/*COLLECTION page style */ 
    body {
        font-family: sans-serif;
        text-align: center;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        overflow-x: hidden;
    }
    .art-title { 
      margin-top: 30px; 
      font-size: 1.7rem; 
      font-weight: bold; 
      text-align: center;
      margin-bottom: 30px;
      }
      
 
  
      .image-container3 {
      position: relative;
      max-width: 1120px;
      box-sizing: border-box;
      width: 100%;
      height: 100vh;
      margin-bottom: 60px !important;
      overflow: hidden;
      margin: 0 auto;
      aspect-ratio: 16/9;
        box-shadow: 10px 10px 25px rgba(0,0,0,0.3);
    }

       /* Common style for each background layer */
    .bg-slide {
      position: absolute;
      top: 0; left: 0;
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center bottom;
       box-shadow: 10px 10px 25px rgba(0,0,0,0.3);
      opacity: 0;
      animation: fadeCycle 16s infinite;
    }

    /* Individual images with staggered delay */
    .bg1 { background-image: url("images/Collections/Art & Design Objects/Covers/DP-3.jpg"); animation-delay: 0s; }
    .bg2 { background-image: url("images/Collections/Art & Design Objects/Covers/DP-5.jpg"); animation-delay: 4s; }
    .bg3 { background-image: url("images/Collections/Art & Design Objects/Covers/DSC_0180.jpg"); animation-delay: 8s; }
    .bg4 { background-image: url("images/Collections/Art & Design Objects/Covers/IMG_20240816_185320.jpg"); animation-delay: 12s; }
                                      

    /* Fade animation keyframes */
    @keyframes fadeCycle {
      0% { opacity: 0; }
      5% { opacity: 1; }
      25% { opacity: 1; }
      30% { opacity: 0; }
      100% { opacity: 0; }
    }
    
    .image-container3 .text-overlay {
      position: relative;
      z-index: 1;
      width: 100%;
      height: 100%;
      padding: 5vw;
      background: rgba(0, 0, 0, 0.5);
      color: white;

      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 1.2;
      text-align: center;
      font-size: 20px;
      overflow-y: auto;
    }

   .image-container3 .text-overlay p {
      max-width: 900px;
    
    }

    .image-container3 .text-overlay::-webkit-scrollbar {
      width: 0;
      background: transparent;
    }
   
/*  artwork grid category */
    
    .category-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding: 30px;
    justify-content:center;
    align-items: center;

    padding: 0 70px; /* desktop left-right space */
   
}

.category-item {
  
    aspect-ratio: 16/9;
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: cover;
    background-position: center;
    color: white;
    font-size: 1.7rem;
  
    font-weight: bold;
    cursor: pointer;
    position: relative;
   text-shadow: 1px 1px 5px rgba(0,0,0,0.8);
}

 .category-grid h1 {
        
        cursor: pointer;
        color:white;
        font-size: 1.5rem;
      
        margin-bottom: 10px;
        margin: 0;
        padding: 10px 20px;
    
    }

    .category-grid  h1:hover {
        text-decoration: underline;
    }

    /* Popup background */
    .popup, .popup2 {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.98);
        justify-content: flex-start;
        align-items: flex-start;
        flex-direction: column;
        z-index: 999;
        overflow-y: auto;
        padding-bottom: 40px;
        overflow-x: hidden;
    }
    .popup, .popup2{
        overflow-y:scroll;
        scrollbar-width: none;
    }
    .popup, .popup2::-webkit-scrollbar {
    display: none;          /* Chrome, Edge, Safari ke liye */
}
   

    /* Close button */
    .close-btn1, .close-btn2 {
        color: black;
        font-size: 60px;
        position: absolute;
        top: 20px;
        right: 40px;
        cursor: pointer;
    }

    /* Title in popup */
  
    .popup-title, .popup2-title {
        font-size: 1.7rem;
    
        font-weight: bold;
        margin-bottom: 40px;
        margin-top: 20px;
        text-align: center;
        width: 100%;
    }
    .popup-title{
      margin-top: 80px;
    }
    .popup2-title{
      font-weight: 400;
      font-size: 1.3rem;
      font-weight: bold;
    }

    /* Breadcrumb */
    .breadcrumb {
        font-size: 16px;
        margin: 20px;
        text-align: left;
        width: 100%;
        margin-top: 100px;
    }
    .breadcrumb a {
        color: #000;
        text-decoration: none;
        font-weight: bold;
    }
    .breadcrumb a:hover {
        text-decoration: underline;
        color:gray;
    }

    /* Image grid */
    .popup-images, .popup2-images {
        display: grid;
         grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        max-width: 1000px;
        width: 100%;
        padding: 0 20px;
        margin: 0 auto;
        box-sizing: border-box;
    }

    .image-item, .popup2-image-item {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .image-item img, .popup2-image-item img {
        width: 100%;
        height: auto;
        border: 1px solid #cccccc;
        cursor: pointer;
        aspect-ratio: 1/1;
        object-fit:cover;
      

       /* aspect-ratio: 4/5;*/
    }
    .popup2-image-item img{
          cursor: pointer;
        transition: transform 0.4s ease, box-shadow 0.4s ease;
    }
     .popup2-image-item img:hover{
        transform: scale(1.05);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    }

    .caption {
        margin-top: 15px;
       margin-bottom: 15px;
        font-size: 18px;
        font-weight: bold;
        text-align: center;
    }

    /* Specifications */

 
    .specifications {
        max-width: 1000px;
        margin: 40px 40px 40px 150px;
        text-align:left !important;
         align-self: flex-start;
        padding: 0 10px;
    }


    .specifications h3 {
        margin-bottom: 10px;
    }
    .specifications ul {
        list-style: none;
        padding: 0;
    }
    .specifications li {
        margin-bottom: 15px;
        font-size: 15px;
      
      
    }


   .inquiry-btn {
    margin-top: -15px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color:black;
    color: white;
    padding: 12px 20px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    box-shadow: 0px 4px 6px rgba(0,0,0,0.2);
    transition: 0.3s;
    margin-left: 160px;
   
}
.inquiry-btn:hover {
    background-color:gray;
}



    /* lighting & furniture  page styel here */



      /* First Page Grid */
    .grid-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        padding: 60px;
    
    }
    .grid-container img {
        width: 100%;
        height:auto;
        object-fit: cover;
        cursor: pointer;
    }
    .grid-container p{
      margin: 30px 0;
      margin-left: 15px;
      font-size: 20px;
      font-weight: bold;
    }

   
   

    /* Responsive */
       @media(max-width:1920px) and (min-width: 0px){
   
  .image-container3{
      box-sizing: border-box;
          max-width: 1260px;
  }

}
    
    
    @media(max-width:1040px) and (min-width: 0px){
   
  .image-container3{
      box-sizing: border-box;
          max-width: 1120px;
  }

}
  @media(max-width:900px) and (min-width: 0px){
   
  .image-container3{
      box-sizing: border-box;
          max-width: 1120px;
  }

}
    @media (max-width: 820px) {


       .image-container3 .text-overlay {
        font-size: 1.2rem;
        padding: 6vw;
      }
      .image-container3 {
        width: calc(100% - 50px); /* both side  15px gap */
          margin: 0 auto;           /* both side equal space space */

        height: 45vh;
        
        
      }
        .category-grid {
        padding: 0 30px; /* tablet space */
    }
        .popup-images, .popup2-images {
            grid-template-columns: repeat(3, 1fr);
            gap: 15px;
        }
         .specifications{
            margin: 20px 40px 40px 20px;
        }
        .inquiry-btn{
           margin-left: 30px;
        }
           .news_container{
            padding-right: 7px !important;
        }
         .footer_img{
        padding-right: 24px !important;
        background: white !important;
       }

          /*light & furniture stye */

          .grid-container {
          padding: 20px;
        }
    }
    @media (max-width: 768px) {

       .image-container3 .text-overlay {
        font-size: 0.9rem;
        padding: 5vw;
      }
      .image-container3 {
        width: calc(100% - 30px); /* both side  15px gap */
          margin: 0 auto;           /* both side equal space space */

        height: 45vh;
        
        
      }

      .category-grid {
        grid-template-columns: 1fr;
        padding:  0 20px; /* mobile space */
      }
        .popup-images, .popup2-images {
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
        }
           .close-btn1, .close-btn2 {
       
        top: 0px;
        font-size:40px;
        
    }

        .breadcrumb{
          margin-top: 60px;
        }
        .caption {
            font-size: 14px;
        }
        .specifications{
            margin: 20px 40px 40px 20px;
        }
        .inquiry-btn{
           margin-left: 30px;
        }
        .imag_conteain_2{
          
          background: white !important;
        }
          .news_container{
            padding-right: 9px !important;
        }
       .footer_img{
        padding-right: 15px !important;
        background: white !important;
       }
       /*light & furniture stye */
         .grid-container {
            grid-template-columns: 1fr;
            padding: 20px;
        }
    }

        /* Fullscreen viewer */
    .fullscreen-viewer {
        display: none;
        position: fixed;
        top:0;left:0;width:100%;height:100%;
        background: rgba(0,0,0,0.9);
        justify-content: center;
        align-items: center;
        z-index: 1000;
    }
    .fullscreen-viewer img {
        max-width: 90%;
        max-height: 80%;
    }
    .fs-close, .fs-prev, .fs-next {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        font-size: 40px;
        color: white;
        cursor: pointer;
        user-select: none;
    }
    .fs-close {
        top: 20px;
        right: 40px;
        transform: none;
        font-size: 50px;
    }
    .fs-prev {
       left: 30px;
       }
    .fs-next { 
      right: 30px; 
    }

  

   
    @media (max-width: 650px) {
        .art-title{
            margin-top: -40px;
        }
        
      }