:root {
      --primary-color: #333333;
      --secondary-color: #7d7d7d;
      --accent-color: #a58f78;
      --background-color: #f9f7f3;
      --light-background: #ffffff;
      --spacing-xs: 5px;
      --spacing-sm: 15px;
      --spacing-md: 30px;
      --spacing-lg: 60px;
      --spacing-xl: 90px;
      --border-radius: 2px;
    }
    
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    
    body {
      background: #ededed;
      color: var(--primary-color);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      padding-top: 66px;
    }

    .prodctDtl .container {
      display: grid;
      grid-template-columns: 60% 40%;
      min-height: 100vh;
    }

    .prodctDtl .image-section {
      position: relative;
      overflow: hidden;
    }
    
    .prodctDtl .image-section img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .prodctDtl .content {
      padding: var(--spacing-xl) var(--spacing-lg);
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: relative;
    }

    .prodctDtl .content h2 {
        font-size: 15px;
        font-weight: 400;
        margin-bottom: 15px;
        letter-spacing: 3px;
        position: relative;
        padding-bottom: 0;
    }
    .prodctDtl .content p {
          font-size: 11px;
        line-height: 20px;
        color: #666;
        margin-bottom: 20px;
    }

    .prodctDtl .meta {
      margin-top: var(--spacing-lg);
      font-size: 14px;
/*      border-top: 1px solid rgba(0,0,0,0.1);*/
      padding-top: var(--spacing-md);
    }

    .prodctDtl .meta p {
      margin-bottom: var(--spacing-sm);
      display: flex;
    }
    
    .prodctDtl .meta strong {
      display: inline-block;
      width: 90px;
      color: var(--primary-color);
      font-weight: 500;
    }

    /* Bottom bar */
    .prodctDtl .bottom-bar {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: var(--spacing-sm) var(--spacing-lg);
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      background: #ededed;
      z-index: 100;
    }

    .prodctDtl .bottom-bar a {
      text-decoration: none;
      color: var(--secondary-color);
      transition: color 0.3s ease;
      font-weight: 500;
    }

    .prodctDtl .bottom-bar a:hover {
      color: var(--primary-color);
    }
    
    .prodctDtl .project-title {
      color: var(--primary-color);
      font-weight: 500;
    }

    /* Gallery section */
    .prodctDtl .gallery {
      padding: var(--spacing-xl) 0;
    }
    
    .prodctDtl .gallery-title {
      text-align: center;
      font-size: 16px;
      text-transform: uppercase;
      letter-spacing: 2px;
      margin-bottom: var(--spacing-lg);
      color: var(--secondary-color);
    }
    
    .prodctDtl .gallery-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: var(--spacing-md);
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 var(--spacing-md);
    }
    
    .prodctDtl .gallery-item {
      overflow: hidden;
      height: 310px;
    }
    
    .prodctDtl .gallery-item img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    transition: transform 0.5s ease;
    cursor: zoom-in;
    position: relative;
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
}
    
/*    .prodctDtl .gallery-item img:hover {
      transform: scale(1.03) translate(0, -50%);
    }*/
    .header {
      padding: 10px 40px;
      background: #ededed;
    }
    
    .search-icon,
    .header nav ul li a{
      color: #333 !important;
    }
    .menu-toggle {
        display: inline-block;
        color: #7f7f7f;
        font-size: 21px;
        line-height: 9px;
        cursor: pointer;
    }
    .header nav{
      display: none;
    }
    .header nav ul {
      justify-content: flex-end;
    }
    .header nav ul li ul li ul {
        left: auto;
        right: 100%;
    }
.glryPopup-lightbox {
    background-color: #ededed;
    padding-top: 0;
}
.glryPopup-caption {
    text-align: left;
    color: #7f7f7f;
    position: absolute;
    bottom: 20px;
    padding-left: 30px;
}
.glryPopup-close {
    position: absolute;
    bottom: 18px;
    right: 29px;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
    color: #838080;
    font-weight: 500;
    top: auto;
    text-transform: uppercase;
    z-index: 10;
}
.glryPopup-close:hover{
  text-decoration: underline;
}

.glryPopup-content {
    max-width: unset;
    max-height: 83%;
    transform: translate(0, -50%);
    left: 0;
    position: relative;
    top: 50%;
}
.glryPopup-caption {
    text-align: left;
    color: #7f7f7f;
    margin-top: 0;
    position: absolute;
    bottom: 20px;
    padding-left: 30px;
    text-transform: uppercase;
    font-size: 14px;
}
.glryPopup-next {
    right: auto;
    position: fixed;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 2;
    top: 0;
    cursor: ew-resize;
}
.glryPopup-prev{
  display: none;
}
/*.scrollee {
    max-height: 400px;
    overflow: hidden;
    overflow-y: auto;
}*/
scrollee::-webkit-scrollbar {
  height: 10px;                  /* scrollbar height */
}
.scrollee::-webkit-scrollbar-track {
  background: #eee;               /* track color */
  border-radius: 10px;
}
.scrollee::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #7f7f7f, #764ba2);
  border-radius: 10px;
}
.scrollee::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #6a11cb, #2575fc);
}
.search-icon{
    display: none;
}
/* For Firefox */
.scrollee {
  scrollbar-color: #7f7f7f #eee;  /* thumb + track */
  scrollbar-width: thin;
}img.logoWhite{
  display: none;
}
.logo img.grayLogo{
  display: inline-block;
}

    @media (max-width: 1024px) {
      .prodctDtl .container {
        grid-template-columns: 55% 45%;
      }
      
      .prodctDtl .content {
        padding: var(--spacing-lg) var(--spacing-md);
      }
    }

    @media (max-width: 900px) {
      .prodctDtl .container {
        grid-template-columns: 1fr;
      }

     .prodctDtl .image-section img {
        height: 50vh;
      }

      .prodctDtl .content {
        padding: var(--spacing-md);
      }
      

      .prodctDtl .bottom-bar {
        flex-direction: row;
        padding: var(--spacing-sm);
        font-size: 11px;
      }
      
      .prodctDtl .project-title {
        display: none;
      }
    }
    
    @media (max-width: 600px) {
      .prodctDtl .gallery {
        padding: 0;
        padding-bottom: 80px;
    }
    .prodctDtl .gallery-item img {
      height: 170px;
    }
    body {
        padding-top: 62px;
    }
      :root {
        --spacing-lg: 40px;
        --spacing-md: 20px;
      }
      
      .prodctDtl .content h2 {
        font-size: 20px;
      }
      
      .prodctDtl .meta p {
        flex-direction: column;
      }
      
      .prodctDtl .meta strong {
        width: 100%;
        margin-bottom: var(--spacing-xs);
      }
      .header nav ul li ul li ul li a,
      .header nav ul li a {
          color: #ffffff !important;
      }      
      .header nav ul li ul li a {
          width: 100%;
          color: #000 !important;
      }
    }