/* @media only screen and (max-width: 600px) {
  .carousel-inner {
    text-align: center;
  }
  .carousel-caption {
    padding: 0px 10px ;
    text-align: center;
  }

  .about-section .about-content .about-info {
    top: 0px;
    left: 0px;
  }

  .work-area {
    margin-top: 900px;
  }
  .sec-title h2 {
    font-size: 28px;
  }

  .fact-card {
    margin-top: 100px;
  }
  .quote-form {
    padding: 15px 60px 60px;
    max-width: 820px;
    margin: 10px;
  }
  .quote-content {
    max-width: 100%;
    text-align: center;
  }
  .quote-youtube-btn .wrapper {
    left: 50%;
  }

}


@media only screen and (min-width: 600px) {
  .about-section .about-content .about-info {
        top: 0px;
        left: 0px;
      }
  .faq-card {
    margin-top: 100px;
  }
  
} */

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 300px) and (max-width: 400px) {
  body {
    width: 100%;
    max-width: 400px;
    min-width: 300px;
    margin: 0 auto;
  }

  .navbar-brand img {

 max-height: 65px;
  margin-left: 4%;
 width:  auto;
  object-fit: contain;
  display: block;
  padding: 0px 0px;
  filter: drop-shadow(0 0 8px rgb(174, 179, 160));
  transition: transform 0.3s ease, filter 0.3s ease;
 
  transform: perspective(600px) rotateY(0deg) scale(1.3);
  
}

  .sec-title h2 {
    font-size: 28px;
  }

  .navbar {
    z-index: 9999; /* Use a practical value */
    width: 100%;   /* Responsive to screen */
  }

  /* .customer-section {
    display: flex;
    justify-content: center;
    align-items: center;
  } */


  
  .recognition-container{
    margin-top: 2%;
  }
  
  .carousel-bg {
    height: 70vh;
  }

  .about-section{
    margin-top: 0;
  }

.about-section .about-banner {
  height: 40vh;
}
   .customer-section {
    display: flex;
    align-items: center; 
     gap: 60px;
     flex-direction: column;
   justify-content: space-around; 
    background: rgb(232, 240, 243);
    padding: 20px 20px;
    border-radius: 20px;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
    width: 90%;
    margin: 0 auto;
    
   
  } 
  #pickupForm{
    margin-bottom: 22%;
    width:100%;
  }
  .gallery-new-images{
    margin-bottom: 10%;
  }
  .awards-container{
    margin-bottom: 10%;
    max-width: 100%;
  }

  .clients-grid{
    margin-bottom: 5%;
  }

.phone-box {
  background: #0d47a1;
  color: white;
  padding: 6px 10px;
  display: inline-flex;
  align-items: center;
  
  border-radius: 8px;
}

.customer-care {
  flex: 1;
  margin-left: -2%;
   
 }
.tracking-section {
  flex: 1;
  text-align: center;
}



.tracking-box {
  display: flex;
  align-items: center;
  background: white;
  border-radius: 15px;
  padding: 5px;
}

.tracking-box input {
  border: 1px solid #ddd;
  padding: 10px;
  border-radius: 8px;
  width:45%;
  outline: none;
  flex: 1;
}

.track-btn {
  background: #00aaff;
  color: white;
  border: none;
  padding: 5px 5px;
  border-radius: 15px;
  cursor: pointer;
  font-weight: bold;
  box-shadow: 0 5px 10px rgba(0, 170, 255, 0.3);
} 


.about-section .about-content .about-info {
  position: relative;
  background: #fff;
  left: 0px;
  box-shadow: 0 15px 18px rgba(0, 0, 0, 0.1);
  /* font-size: 10px; */
}

.team-section,.team-section .container{
  width: 100%;
}

.swiper {
  width: 100%;
  height: 40%;
}

.swiper-new-wrapper{
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-wrap: wrap;
}


.swiper-new-slide {
  width: 80%;
}



  #popup {
    width: 80%;    /* This is fine if you want it relative */
    margin: 0 auto;
  }



  .reginal-sidebar{
    margin-bottom: 13%;
  }
  .reginal-content{
    margin-bottom: 13%;
  }



  .track-box{
    margin-bottom: 4%;
  }

  .careers-section{
    margin-bottom: 23%;
    margin-top: 4%;
  }


  /* .teamsection{
     max-width: 400px;
    max-height: 400px;
  } */

  .tree {
    flex-direction: column;
    align-items: center;
    min-width: auto;
  }

  .tree ul {
    flex-direction: column;
    align-items: center;
  }

  .tree li::before,
  .tree li::after,
  .tree ul::before {
    display: none;
  }

  .tree li {
    padding: 10px 0;
  }

  .teamcard {
    width: 90vw;
    max-width: 300px;
  }

  .tracking-section .label {
  
   display: flex;
  align-items: center;
  justify-content: center;
}




}
















@media only screen and (min-width: 400px) and (max-width: 600px) {
  body {
    width: 100%;
    max-width: 600px;
    min-width: 400px;
    margin: 0 auto;
  }




  .navbar-brand img {

 max-height: 65px; 
  margin-left: 4%;
 width:  auto;
  object-fit: contain;
  display: block;
  padding: 0px 0px;
  filter: drop-shadow(0 0 8px rgb(174, 179, 160));
  transition: transform 0.3s ease, filter 0.3s ease;
 
  transform: perspective(600px) rotateY(0deg) scale(1.3);
  
}
  .sec-title h2 {
    font-size: 28px;
  }

  .navbar {
    z-index: 9999; /* Use a practical value */
    width: 100%;   /* Responsive to screen */
  }

  /* .customer-section {
    display: flex;
    
    justify-content: center;
    align-items: center;
  } */

  .customer-section {
    display: flex;
    align-items: center; 
     flex-direction: column;
      gap: 60px;
   justify-content: space-around; 
    background: rgb(232, 240, 243);
    padding: 20px 20px;
    border-radius: 20px;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
    width: 90%;
    margin: 0 auto;
   
   
  } 

  #pickupForm{
    margin-bottom: 22%;
    width:100%;
  }
  .awards-container{
    margin-bottom: 10%;
    max-width: 100%;
  }

  .gallery-new-images{
    margin-bottom: 10%;
  }
  .clients-grid{
    margin-bottom: 5%;
  }
  .customer-care {
    flex: 1;
    margin-left: -2%;
     
   }
  .phone-box {
    background: #0d47a1;
    color: white;
    padding: 6px 10px;
    display: inline-flex;
    align-items: center;
    
    border-radius: 8px;
  }
  
.tracking-box {
  display: flex;
  align-items: center;
  background: white;
  border-radius: 15px;
  padding: 5px;
}

.tracking-box input {
  border: 1px solid #ddd;
  padding: 10px;
  border-radius: 8px;
  outline: none;
  width:45%;
  flex: 1;
}

.track-btn {
  background: #00aaff;
  color: white;
  border: none;
  padding: 5px 5px;
  border-radius: 15px;
  cursor: pointer;
  font-weight: bold;
  box-shadow: 0 5px 10px rgba(0, 170, 255, 0.3);
} 
  .recognition-container{
    margin-top: 20%;
  }
  
  .carousel-bg {
    height: 70vh;
  }

  .about-section{
    margin-top: 0;
  }

.about-section .about-banner {
  height: 40vh;
}


.about-section .about-content .about-info {
  position: relative;
  background: #fff;
  left: 0px;
  box-shadow: 0 15px 18px rgba(0, 0, 0, 0.1);
  font-size: 10px;
}

.features-container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  flex-wrap: wrap;
}

.feature-box {
  background: #ffffff;
  border-radius: 30px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  text-align: center;
  width: calc(35% - 80px); /* Makes 3 cards per row */
  min-width: 250px;
  transition: transform 0.3s ease-in-out;
}


.swiper {
  width: 100%;
  height: 40%;
}

.swiper-new-wrapper{
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-wrap: wrap;
}


.swiper-new-slide {
  width: 40%;
}



  #popup {
    width: 85%;   
    margin: 0 auto;
  }

  .reginal-sidebar{
    margin-bottom: 13%;
  }
  .reginal-content{
    margin-bottom: 13%;
  }

  .track-box{
    margin-bottom: 4%;
  }

  .careers-section{
    margin-bottom: 23%;
    margin-top: 4%;
  }

  /* .teamsection{
     max-width: 400px;
    max-height: 400px;
  } */



  .tree {
    flex-direction: column;
    align-items: center;
    min-width: auto;
  }

  .tree ul {
    flex-direction: column;
    align-items: center;
  }

  .tree li::before,
  .tree li::after,
  .tree ul::before {
    display: none;
  }

  .tree li {
    padding: 10px 0;
  }

  .teamcard {
    width: 90vw;
    max-width: 300px;
  }

  .tracking-section {
  flex: 1;
  text-align: center;
}
  
.tracking-section .label {
  display: flex;
  align-items: center;
  justify-content: center;
}
 
}










@media only screen and (min-width: 600px) and (max-width: 900px) {
  body {
    width: 100%;
    max-width: 900px;
    min-width: 600px;
    margin: 0 auto;
  }


  .navbar-brand img {

 max-height: 65px;
  margin-left: 4%; 
 width:  auto;
  object-fit: contain;
  display: block;
  padding: 0px 0px;
  filter: drop-shadow(0 0 8px rgb(174, 179, 160));
  transition: transform 0.3s ease, filter 0.3s ease;
 
  transform: perspective(600px) rotateY(0deg) scale(1.3);
  
}
  .sec-title h2 {
    font-size: 28px;
  }

  .navbar {
    z-index: 9999; /* Use a practical value */
    width: 100%;   /* Responsive to screen */
  }

  /* .customer-section {
    display: flex;
    
    justify-content: center;
    align-items: center;
  } */

 
  .customer-section {
    display: flex;
    align-items: center;
    flex-direction: column; 
   justify-content: space-around; 
    background: rgb(232, 240, 243);
    gap: 60px;
    padding: 20px 20px;
    border-radius: 20px;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
    width: 90%;
    margin: 0 auto;
   
   
  } 

  #pickupForm{
    margin-bottom: 22%;
    width:100%;
  }
  .awards-container{
    margin-bottom: 10%;
    
  }

  .gallery-new-images{
    margin-bottom: 10%;
  }
  .clients-grid{
    margin-bottom: 5%;
  }
  .customer-care {
    flex: 1;
    margin-left: -2%;
     
   }
  .phone-box {
    background: #0d47a1;
    color: white;
    padding: 6px 10px;
    display: inline-flex;
    align-items: center;
    
    border-radius: 8px;
  }
  
.tracking-box {
  display: flex;
  align-items: center;
  background: white;
  border-radius: 15px;
  padding: 5px;
}

.tracking-box input {
  border: 1px solid #ddd;
  padding: 10px;
  border-radius: 8px;
  outline: none;
  width:45%;
  flex: 1;
}

.track-btn {
  background: #00aaff;
  color: white;
  border: none;
  padding: 5px 5px;
  border-radius: 15px;
  cursor: pointer;
  font-weight: bold;
  box-shadow: 0 5px 10px rgba(0, 170, 255, 0.3);
} 
  .recognition-container{
    margin-top: 20%;
  }
  
  .carousel-bg {
    height: 70vh;
  }

  .about-section{
    margin-top: 0;
  }

.about-section .about-banner {
  height: 40vh;
}


.about-section .about-content .about-info {
  position: relative;
  background: #fff;
  left: 0px;
  box-shadow: 0 15px 18px rgba(0, 0, 0, 0.1);
  font-size: 10px;
}

.features-container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  flex-wrap: wrap;
}

.feature-box {
  background: #ffffff;
  border-radius: 30px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  text-align: center;
  width: calc(35% - 80px); /* Makes 3 cards per row */
  min-width: 250px;
  transition: transform 0.3s ease-in-out;
}


.swiper {
  width: 100%;
  height: 40%;
}

.swiper-new-wrapper{
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}


.swiper-new-slide {
  width: 40%;
}



  #popup {
    width: 85%;   
    margin: 0 auto;
  }

  .reginal-sidebar{
    margin-bottom: 13%;
  }
  .reginal-content{
    margin-bottom: 13%;
  }
  .track-box{
    margin-bottom: 4%;
  }

  .careers-section{
    margin-bottom: 23%;
    margin-top: 4%;
  }

  /* .teamsection{
    max-width: 400px;
    max-height: 400px;

  } */



  .tree {
    flex-direction: column;
    align-items: center;
    min-width: auto;
  }

  .tree ul {
    flex-direction: column;
    align-items: center;
  }

  .tree li::before,
  .tree li::after,
  .tree ul::before {
    display: none;
  }

  .tree li {
    padding: 10px 0;
  }

  .teamcard {
    width: 90vw;
    max-width: 300px;
  }

 .tracking-section {
  flex: 1;
  text-align: center;
}

.tracking-section .label {
  
   display: flex;
  align-items: center;
  justify-content: center;
}

}


















@media only screen and (min-width: 900px) and (max-width: 1200px) {
  body {
    width: 100%;
    max-width: 1200px;
    min-width: 900px;
    margin: 0 auto;
  }

  .sec-title h2 {
    font-size: 28px;
  }

  .navbar {
    z-index: 9999; /* Use a practical value */
    width: 100%;   /* Responsive to screen */
  }

  /* .customer-section {
    display: flex;
    
    justify-content: center;
    align-items: center;
  } */


  .customer-section {
    display: flex;
    align-items: center; 
   justify-content: space-evenly; 
    background: rgb(232, 240, 243);
    padding: 20px 30px;
    border-radius: 20px;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
    width: 100%;
    margin: 0 auto;
   
   
  } 

  #pickupForm{
    margin-bottom: 22%;
    width:100%;
  }
  .awards-container{
    margin-bottom: 10%;
    
  }

  .gallery-new-images{
    margin-bottom: 10%;
  }
  .clients-grid{
    margin-bottom: 5%;
  }
  .customer-care {
    flex: 1;
    margin-left: -2%;
     
   }
  .phone-box {
    background: #0d47a1;
    color: white;
    padding: 6px 10px;
    display: inline-flex;
    align-items: center;
    
    border-radius: 8px;
  }
  
.tracking-box {
  display: flex;
  align-items: center;
  background: white;
  border-radius: 15px;
  padding: 5px;
}

.tracking-box input {
  border: 1px solid #ddd;
  padding: 10px;
  border-radius: 8px;
  outline: none;
  width:50px;
  flex: 1;
}

.track-btn {
  background: #00aaff;
  color: white;
  border: none;
  padding: 5px 5px;
  border-radius: 15px;
  cursor: pointer;
  font-weight: bold;
  box-shadow: 0 5px 10px rgba(0, 170, 255, 0.3);
} 
  .recognition-container{
    margin-top: 20%;
  }
  
  .carousel-bg {
    height: 70vh;
  }

  .about-section{
    margin-top: 0;
  }

.about-section .about-banner {
  height: 40vh;
}


.about-section .about-content .about-info {
  position: relative;
  background: #fff;
  left: 0px;
  box-shadow: 0 15px 18px rgba(0, 0, 0, 0.1);
  font-size: 10px;
}

.features-container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  flex-wrap: wrap;
}

.feature-box {
  background: #ffffff;
  border-radius: 30px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  text-align: center;
  width: calc(35% - 80px); /* Makes 3 cards per row */
  min-width: 250px;
  transition: transform 0.3s ease-in-out;
}


.swiper {
  width: 100%;
  height: 40%;
}

.swiper-new-wrapper{
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}


.swiper-new-slide {
  width: 40%;
}



  #popup {
    width: 85%;   
    margin: 0 auto;
  }

  .reginal-sidebar{
    margin-bottom: 13%;
  }
  .reginal-content{
    margin-bottom: 13%;
  }
  .track-box{
    margin-bottom: 4%;
  }

  .careers-section{
    margin-bottom: 23%;
    margin-top: 4%;
  }

  /* .teamsection{
    max-width: 400px;
    max-height: 400px;

  } */



  /* .tree {
    flex-direction: column;
    align-items: center;
    min-width: auto;
  }

  .tree ul {
    flex-direction: column;
    align-items: center;
  }

  .tree li::before,
  .tree li::after,
  .tree ul::before {
    display: none;
  }

  .tree li {
    padding: 10px 0;
  }

  .teamcard {
    width: 90vw;
    max-width: 300px;
  }
*/
}