.gh-portfolio-main {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #0c0d10;
  color: #fff;
}

.gh-container {
  display: flex;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 0;
  height: 75vh;
}

.gh-left {
  width: 25%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}

.gh-center { 
  width: 50%; 
  padding: 0 40px; 
  position: relative; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
}

.gh-right {
  width: 25%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

.gh-thumbs-wrap,
.gh-titles-wrap,
.gh-details-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.gh-titles-wrap {
  height: 100px;
} 

.gh-thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 80px;
  height: 100px;
  object-fit: cover;
  border-radius: 8px;
}

.gh-title {
  position: absolute;
  bottom: 0;
  left: 0;
  margin: 0;
  text-transform: uppercase;
}

.gh-title a {
  color: inherit;
  text-decoration: none;
}

.gh-main-img {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: top left;
}

.gh-main-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.gh-detail { 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  display: flex; 
  flex-direction: column; 
  justify-content: space-between; 
}

.gh-detail-group { 
  display: flex; 
  flex-direction: column; 
  align-items: flex-start;
  gap: 15px; 
}

.gh-block {
  margin-bottom: 0;
}

.gh-label {
  font-size: 12px;
  color: #777;
  text-transform: uppercase;
  margin-bottom: 5px;
  display: block;
}

.gh-slide-btn { 
  color: #ff3300; 
  text-decoration: none; 
  font-weight: 600; 
  display: inline-flex; 
  align-items: center; 
  justify-content: center;
  white-space: nowrap; 
  transition: all 0.3s ease;
}

.gh-slide-btn:hover { 
  opacity: 0.8; 
  transform: translateY(-2px); 
}

.gh-btn-icon { 
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  margin-left: 8px; 
}

.gh-btn-icon svg,
.gh-btn-icon i { 
  width: 1em; 
  height: 1em; 
  fill: currentColor; 
  font-size: 1.1em;
}

.gh-main-img-wrap { 
  position: relative; 
  width: 100%; 
  max-width: 500px; 
  height: 600px; 
  max-height: 100%; 
  border-radius: 12px; 
  overflow: hidden; 
  box-shadow: 0 20px 40px rgba(0,0,0,0.3); 
}

.gh-item-0 { opacity: 1; transform: translateY(0); }
.gh-img-0 { transform: scale(1); opacity: 1 !important; }

.gh-item-1, .gh-item-2, .gh-item-3, .gh-item-4 { opacity: 0; transform: translateY(50px); }
.gh-img-1, .gh-img-2, .gh-img-3, .gh-img-4 { transform: scale(0); opacity: 1 !important; }

/* Tablet Screens (Max Width: 1024px) */
@media screen and (max-width: 1024px) {
  .gh-portfolio-main {
    height: auto; 
    min-height: 100vh; 
    padding: 80px 0; 
    overflow-y: auto; 
  }
  
  .gh-container {
    flex-direction: column;
    height: auto;
    gap: 50px;
    padding: 0 40px;
  }
  
  .gh-left, .gh-center, .gh-right {
    width: 100%;
  }

  /* Left Area: Align Thumb & Title Horizontally */
  .gh-left {
    flex-direction: row;
    align-items: center;
    height: 100px; 
    gap: 30px;
  }
  
  .gh-thumbs-wrap {
    width: 80px; 
    height: 100px;
    flex-shrink: 0;
  }

  .gh-titles-wrap {
    width: calc(100% - 110px); /* 80px thumb + 30px gap */
    height: 100px;
  }

  .gh-title {
    bottom: auto;
    top: 50%;
    transform: translateY(-50%); /* Center align title with thumb */
  }

  .gh-center {
    padding: 0;
  }
  
  .gh-main-img-wrap {
    height: 500px; 
    max-width: 100%;
  }

  /* Right Area: Layout details horizontally on Tablet */
  .gh-right {
    height: 150px;
  }
  
  .gh-detail {
    flex-direction: row; 
    justify-content: space-between;
    align-items: center;
  }
}

/* Small Tablets / Large Phones (Max Width: 768px) */
@media screen and (max-width: 768px) {
  .gh-container {
    padding: 0 20px;
    gap: 40px;
  }

  /* Stack Thumb and Title vertically on Mobile */
  .gh-left {
    flex-direction: column;
    align-items: flex-start;
    height: 160px; /* Fixed space to prevent GSAP collapse */
    gap: 20px;
  }
  
  .gh-left{
      height:185px;
  }
  
  
  .gh-thumbs-wrap {
    width: 100%; /* Reset from tablet */
    height: 80px;
  }

  .gh-thumb {
    width: 100px;
    height: 80px;
  }

  .gh-titles-wrap {
    width: 100%; /* Reset from tablet */
    height: 60px!important;
  }

  .gh-title {
    top: 0;
    transform: none; /* Reset transform from tablet */
  }

  .gh-main-img-wrap {
    height: 400px;
  }

  /* Stack details vertically again on Mobile */
  .gh-right {
    height: 250px; /* Ensure content doesn't bleed */
  }
  
  .gh-detail {
    flex-direction: column; 
    justify-content: flex-start;
    align-items: flex-start;
    gap: 25px;
  }
}

/* Mobile Screens (Max Width: 480px) */
@media screen and (max-width: 480px) {
  .gh-portfolio-main {
    padding: 40px 0;
  }

  .gh-main-img-wrap {
    height: 300px;
    border-radius: 8px; 
  }

  .gh-right {
    height: 320px; /* Extra height just in case your description text is long */
  }
}