@media  screen and (max-width: 1611px) {
  .slider-img{
    max-width:100% ;
    height: auto;
   
   
}
}
@media  screen and (max-width: 1111px) {
    .slider-img{
        max-width:100% ;
        height: auto;
       
       
    }
    
    .gallery h1{
      font-weight:bold;
      font-size:3rem;
      z-index: 100;
    
    }
}



@media  screen and (max-width: 780px) {


    .slider-img{
        max-width:100% ;
        height: auto;
       
       
    }
    .card-container{
        display: flex;
        flex-wrap:wrap ;
        
        gap: 20px;
        align-items: center;
        justify-content: center;
        text-align: center;
      }
      .cardz{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40vw;
        
        border: none;
        background-color: #f3f3f3;
    }

   
    .div-1 {
        
        max-width: 100vw;
        width: 100%; /* Ensure it takes full width within its container */
        
    display: block;
   padding-left: 60px;
   
    color: #fff;
    background-color: #141313;

    }
    .div-2 {
        
        max-width: 100vw;
        width: 100%; /* Ensure it takes full width within its container */
    }
    :root {
      --marquee-width: 98vw;
      --marquee-height: 32vh;
      /* --marquee-elements: 12; */ /* defined with JavaScript */
      --marquee-elements-displayed: 5;
      --marquee-element-width: calc(var(--marquee-width) / var(--marquee-elements-displayed));
      --marquee-animation-duration: calc(var(--marquee-elements) * 3s);
    }

    .gallery h1{
      font-weight:900;
      font-size:2rem;
      z-index: 100;
    
    }

        
}

@media (max-width: 750px) {
    .gallery {
      grid-template-columns: 1fr; /* Adjust to a single column layout */
    }
  
    #box-1 {
      grid-row: span 1; /* Box 1 spans 1 row */
      grid-column: 1 / 3; /* Box 1 spans both columns */
    }
  
    #box-2 {
      grid-row: span 1; /* Box 2 spans 1 row */
      grid-column: 1 / 3; /* Box 2 spans both columns */
    }
  
    #box-3 {
      grid-row: span 1; /* Box 3 spans 1 row */
      grid-column: 1 / 3; /* Box 3 spans both columns */
    }
    .gallery h1{
      font-weight: bold;
      font-size: 3rem;
      z-index: 100;
  
   }
  }

  

@media (max-width: 650px) {
  .navbar-nav{
    gap: 10px;
    font-size: 1.3rem;
 }
   
      .footer-links-1 ul {
        list-style: none;
        color: #fff;
        margin-top: 10px;
       
    
    
    }
    #contact-us{
      text-align: center;
    }
    #contact-us a{
      margin-inline: auto;
    }
}

@media (max-width: 600px) {
     
  .bottom-cards{
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: 40px;
      margin-block: 20px;
    }
    .bottom-card img{
      width: 80vw;
    }
  .div-1 {
      
      max-width: 100vw;
      width: 100%; /* Ensure it takes full width within its container */
      
  display: block;
padding: 0%;
 
  color: #fff;
  background-color: #141313;

  }
  .text-div{
      max-width: 100vw;
      width: 100%; /* Ensure it takes full width within its container */
       
  }
  .footer-links{
      display: flex;
      flex-wrap: wrap;
  }
  .footer-links-1{
      max-width: 100vw;
      width: 100%;
     text-align: center;
  }
.footer-links-1 ul{
  padding: 0%;
}
.gallery h1{
font-weight: bold;
font-size: 2.8rem;
z-index: 100;

}


}
@media  screen and (max-width: 550px) {
  .slider-img{
      max-width:100% ;
      height: auto;
     
     
  }
  .gallery h1{
    font-weight:800;
    font-size:2.4rem;
    z-index: 100;
  
  }
  :root {
    --marquee-width: 98vw;
    --marquee-height: 28vh;
    /* --marquee-elements: 12; */ /* defined with JavaScript */
    --marquee-elements-displayed: 5;
    --marquee-element-width: calc(var(--marquee-width) / var(--marquee-elements-displayed));
    --marquee-animation-duration: calc(var(--marquee-elements) * 2s);
  }
  .marquee-content li {
    display: flex;
    justify-content: center;
    align-items: center;
    /* text-align: center; */
    flex-shrink: 0;
    width: 33vw;
    max-height: 100%;
    font-size: calc(var(--marquee-height)*3/4); /* 5rem; */
    white-space: nowrap;
  }
  }
  
  
  @media  screen and (max-width: 450px) {
    .slider-img{
  
        max-width:100% ;
        height: auto;
       
       
    }
    
    .gallery h1{
      font-weight:700;
      font-size:1.5rem;
      z-index: 100;
    
    }
    :root {
      
      --marquee-height: 40vh;
      /* --marquee-elements: 12; */ /* defined with JavaScript */
      --marquee-elements-displayed: 5;
      --marquee-element-width: calc(var(--marquee-width) / var(--marquee-elements-displayed));
      --marquee-animation-duration: calc(var(--marquee-elements) * 2s);
    }
    .marquee-content li {
      display: flex;
      justify-content: center;
      align-items: center;
      /* text-align: center; */
      flex-shrink: 0;
      width: 45vw;
      max-height: 100%;
      font-size: calc(var(--marquee-height)*3/4); /* 5rem; */
      white-space: nowrap;
    }
    .cardz p{
      margin-top: 30px;
    }
    .inner-card{
      padding: 20px 15px;
    }

  
  }


@media  screen and (max-width: 380px) {
  .contact-us{
      border: 1px solid black;
      padding: 8px 12px;
      text-decoration: none;
      color: black;
      font-size: 1rem;
  }
  .navbar-brand img{
      width: 120px;
  }

  .Contact{
  
      margin-right: 0px;
  }
  .slider-img{
      
      width: 100vw;
  }
  .slider-img{
      max-width:100%;
      height: auto;
  }

  .gallery h1{
    font-weight:700;
    font-size:1.4rem;
    z-index: 100;
  
  }
  .cardz p{
    margin-top: 25px;
  }
  .inner-card{
    padding: 20px 15px;
  }
  #modalImgContainer{
      width:150px;
      background-color:yellow;
  }
}

#modalImgContainer{
    height:70vh;
    width:470px;
    text-align:center;
}