@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root{
    --primary-color:#242180;
    --secondary-color:black;
    --tertiary-color:gray;
    --white-color:#ffffff;
    --small-font-size:1.4rem;
    --light-gray:#e4e0e0;
}


html{
    font-size: 62.5%;
    overflow-x:hidden;
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
    text-decoration: none!important; 
 }



 ::selection{
  background-color: var(--primary-color);
  color: var(--white-color);
 }
 
 /* Hide scrollbar for WebKit browsers */
::-webkit-scrollbar {
  display: none;
}

/* Optional: Ensure scrolling still works */
html, body {
  -ms-overflow-style: none;  /* Hide scrollbar in IE and Edge */
  scrollbar-width: none;      /* Hide scrollbar in Firefox */
}

 button{
  border: none;
  outline: none;
 }

 body{
    font-family: "Poppins", sans-serif;
    overflow-x:hidden;
 }

 p{
    font-size: 1.8rem;
 }

 .btn {
    display: inline-block;
    padding: 2rem 6rem;
    border-radius: 8rem;
    background-color: var(--light-gray);
    color: var(--secondary-color);
    font-size: 2rem;
    font-weight:500;
    box-shadow: 0 .3rem .5rem rgba(255, 255, 255, 0.3);
    border: .1rem soild var(--primary-color);
    transition: background-color .3s ease, color .3s ease;
 }

 .btn:hover{
  background-color: var(--primary-color);
  color: var(--white-color);
 }


 .letter {
  opacity: 0;
  display: inline-block;
  transform: translateY(20px); /* Start slightly lower */
  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

#text span{
  color: var(--white-color);
}

 .title h3{
    font-size: 5rem;
    text-align: center;
    font-weight: 600;
    color: var(--secondary-color);
 }



 .padding-50{
    padding-top: 5rem;
    padding-bottom: 5rem;
 }

 .padding-top-80{
    padding-top:80px;
 }

 .padding-80{
    padding-top: 8rem;
    padding-bottom: 8rem;
 }

 /* header css */

 .navbar{
    position: relative;
    z-index: 100;
    transition: all 0.3s ease-in-out;
 }

 /* Sticky Navbar after Scroll */
 .navbar.sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgb(241 240 240 / 100%)!important;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    border-radius: 0;
}

/* Change navbar links color when sticky */
.navbar.sticky .nav-link,
.navbar.sticky .navbar-brand {
  color: var(--secondary-color) !important;
}


 .navbar-nav .nav-item{
    margin-right: 1rem;
 }

 .navbar-toggler{
    background-color: var(--primary-color);
    width: 5rem;
    height: 5rem;
    border: .1rem solid rgba(255,255,255,.5);
    margin-right:2rem;
 }

 .navbar-toggler span{
    font-size: 2rem;
    
 }

 .navbar-toggler .navbar-toggler-icon {
    transition: all 0.3s ease-in-out;
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
    background-image: none;
    position: relative;
    width: 24px;
    height: 24px;

}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before,
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
    content: "";
    position: absolute;
    width: 24px;
    height: 3px;
    background-color: white;
    top: 50%;
    left: 0;
    transform-origin: center;
    transition: all 0.3s ease-in-out;
    filter: invert(1);
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
    transform: rotate(45deg);
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
    transform: rotate(-45deg);
}

 .navbar-toggler-icon {
    filter: invert(1);
}
 .navbar-nav .nav-item .nav-link{
  position: relative;
    font-size: 1.6rem;
    text-transform: uppercase;
    color: var(--white-color);
 }
 
  .navbar-nav .nav-item .nav-link.active{
      border-bottom:.1rem solid rgba(255,255,255,.5);
  }

 .navbar-nav .dropdown-menu{
  background-color: var(--primary-color);
  box-shadow: none;
  border: none;
 }

 .dropdown-menu ul{
  padding-left: 0;
 }
 .dropdown-menu li{
  padding: 1rem;
 }

 .dropdown-menu .dropdown-item{
  display: block;
  width: 100%;
  background-color: var(--primary-color);
  color: var(--white-color);
  font-size: 1.6rem;
  border-bottom:  .1rem solid rgba(255, 255, 255, 0.1);
  padding-bottom: 1rem;
  position: relative;
 }

 .dropdown-menu .dropdown-item::before{
  position: absolute;
  content: '';
  top: 100%;
  left: 0;
  width: 0;
  height: .1rem;
  background-color: rgba(0,0,0,.5);
  transition: width .3s ease;
 }

 .dropdown-menu .dropdown-item:hover::before{
  width: 100%;
 }

 .navbar-nav .nav-item .nav-link::before{
  position: absolute;
  content: '';
  top: 100%;
  background-color: rgba(0,0,0,.5);
  width: 0;
  height: .1rem;
  transition: width .3s ease;
 }

 .navbar-nav .nav-item .nav-link:hover::before{
   width: 100%;
 }


  /* header css end */


  /* home section css starts */
  
  
  /* Overlay layer */
.back-image {
  position: relative;
  overflow: hidden;
}

.back-image .overlay {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1;
  border-radius:8rem;
}

.back-image img {
  position: relative;
  z-index: 0;
}

.home-text {
  position: relative;
  z-index: 2;
}

/* Arrow styles */
.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2rem;
  background: rgba(0, 0, 0, 0.4);
  color: white;
  padding: 0.5rem 1rem;
  cursor: pointer;
  z-index: 10;
  user-select: none;
  transition: background 0.3s ease;
}

.slider-arrow:hover {
  background: rgba(0, 0, 0, 0.7);
}

.slider-arrow.prev {
  left: 10px;
}

.slider-arrow.next {
  right: 10px;
}

/* Pagination dots */
.slider-dots {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  gap: 8px;
}

.dot {
  width: 12px;
  height: 12px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.3s ease;
}

.dot.active,
.dot:hover {
  background: white;
}

  
  .home-background-image {
    min-height: 100vh; /* Ensures section is at least full screen */
}

  .home-background-image .back-image{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    z-index: -1;
 }

 

 .home-background-image .back-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8rem;
 }
 


@media (min-width: 1600px) {
  .home-background-image .home-content {
    position: relative;
    margin-top: 40rem;
  }
  
   .product-category{
      margin-top:-30rem;
  }
  
  .about-us .about-us-section .about-right{
      align-self:center;
  }
  
}


 .home-background-image .home-content .home-text h1{
    font-size: clamp(2rem, 0.1143rem + 8.3659vw, 6.5rem);
    color: var(--white-color);
    font-weight: 600;
 }

 .usp{
    background-color:var(--primary-color);
}


  .counter-box {
      text-align: center;
      padding: 4rem;
      border-radius: 1rem;
      background: rgb(241 240 240 / 100%)!important;
      box-shadow: 0px .4rem 1rem rgba(0, 0, 0, 0.1);
      margin-top: 50px;
  }

  .counter {
      font-size: 40px;
      font-weight: bold;
      color: transparent;
      position: relative;
      -webkit-text-stroke: 1px var(--primary-color);
  }

  
  .counter-box h4{
      font-size:2rem;
  }
  .counter h3{
      text-align:center;
  }

  .counter-box p {
      font-size: 1.8rem;
  }

  .counter-box i{
    font-size: 3.5rem;
    padding: 2rem;
    border: .2rem solid var(--white-color);
    border-radius: 50%;
     transition: transform .3s ease;
  }

@media (min-width: 1200px) and (max-width: 1600px) {
  .home-background-image .home-content {
    position: relative;
    margin-top: 15rem;
  }
  
  .product-category{
      margin-top:-8rem;
  }
  
 
}

  /* home section css ends */


  /* prouct-category section css starts */
  .product-category{
    position: relative;
  }
  
  .product-category .card{
        height:48rem;
        margin-bottom:5rem;
     }
    
    

  .title h1{
    position: relative;
    font-size: clamp(1.875rem, 0.6555rem + 6.0976vw, 5rem);
    font-weight: 600;
    display: inline-block;
  }
 

  .title.title-banner h1 span{
    color: var(--white-color);
    width: max-content;
  }
  

.title span{
    color: var(--primary-color);
    font-size: clamp(1.875rem, 0.6555rem + 6.0976vw, 5rem);
  }


  .product-category .title p{
    padding-bottom: 6rem;
  }

  .product-category .card{
    background-color: var(--light-gray);
    border-radius: 1.5rem;
    border: none;
    padding: 1rem;
    padding-top: 1rem;
    margin-bottom: 2rem;
    min-height: 50rem;
  }

  .product-category .card .card-image{
    padding:1rem 0;
    transform:scale(0.9);
    transition: transform .3s ease-in-out;
  }

  .product-category .card:hover  .card-image{
    transform:scale(1)
  }

  .product-category .card .card-title {
    padding-bottom: 1.5rem;
  }

  .product-category .card:hover .card-title{
    color: var(--primary-color);
  }
  .product-category .card .card-title h3{
    font-size:2.5rem;
    font-weight: 600;
  }

  .product-category .card .card-description {
    text-align: center;
    font-size: var(--small-font-size);
    padding-bottom: 1.5rem;
  }


  .product-category .card  .cat-btn{
    font-size:1.8rem;
    text-decoration: none;
    color: var(--white-color);
    padding: 1.5rem;
    background-color: gray;
    border-radius: 3rem;
    font-weight: 600;
    margin-bottom: 2rem;
    transition: background-color .3s ease;
  }

  .product-category .card:hover .cat-btn{
    background-color: var(--primary-color);
  }

  .about-us .about-us-section{
    display: flex;
    flex-wrap: wrap;
    background-color: var(--primary-color);
    min-height: 100vh;
  }


  .about-us .about-us-section .about-right
  {
    flex: 1;
    /*align-self: center;*/
  }

  .about-us .about-us-section .about-left{
    width: 50vw;
    background-color: var(--primary-color);
  }

  .about-us .about-us-section .about-left img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .about-us .about-us-section .about-right{
    padding: 5rem 3rem;
  }

  .about-us .about-us-section .about-right .title h2{
    font-size: clamp(2.5rem, 1.5244rem + 4.878vw, 5rem);
    color: var(--white-color);
    margin-bottom: 1rem;
    /*padding-top: 15rem;*/
  }

  .about-us .about-us-section .about-right .about-description p{
    color: var(--white-color);
    margin-bottom: 5rem;
  }

  .about-us .about-us-section .about-right .about-second .title h2{
    padding-top: 0;
    font-size: clamp(1.5625rem, 0.7088rem + 4.2683vw, 3.75rem);
  }

  .about-us .about-us-section .about-right .about-second .btn{
    margin-bottom: 3rem;
  }


  .industries{
    background-color: var(--light-gray);
    border-radius: 8rem;
  }

  .industries .icon-container{
    margin-top: 6rem;
    background-color: rgb(241 240 240 / 100%)!important;
    padding: 2rem;
    height: 32rem;
    align-items: center;
    transition: color .3s ease;
    margin-bottom: 6rem;
    border: .1rem solid var(--secondary-color);
    transition: border .3s ease;
    border-radius: 1rem;
    position:relative;
    overflow:visible;
  }

  .industries .icon-container:hover{
    border: .1rem solid var(--primary-color);
    
  }

  .industries .icon-container img{
    background-color: rgb(241 240 240 / 100%)!important;
    border: .2rem solid var(--secondary-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    color: var(--secondary-color);
    width: 12rem;
    height: 12rem;
    border-radius: 50%;
    margin-bottom: 3rem;
    margin-top: -8rem;
    transition: color .3s ease, background-color .3s ease;
    box-shadow: 0 .3rem .5rem rgba(0, 0, 0, 0.1);
  }
  
  
  .industries .icon-container:hover i{
      border: .2rem solid var(--primary-color);
    color: var(--white-color);
    background-color: var(--primary-color)!important;
  }

  .industries .icon-container h2{
    text-align: center;
    color: var(--secondary-color);
    font-weight: 700;
  }

  .industries .icon-container:hover h2{
    color: var(--primary-color);
  }

  .review-container{
    overflow: hidden;
    position: relative;
  }

  .review-container .review-slide{
    background-color: rgb(241 240 240 / 100%)!important;
    color: var(--white-color);
    padding: 4rem 5rem;
    margin-top: 8rem;
    border-radius: 3rem;
  }

  .review-container .review-slide .stars{
    font-size: 4rem;
    background-image: linear-gradient(to right, #af932d 0, #cb9b51 22%, #f6e27a 45%, #fdd593 50%, #f6e27a 55%, #cb9b51 100%, #ce9048 100%);
    color: transparent;
    -webkit-background-clip: text;
  }

  .review-container .review-slide p{
    font-size: var(--small-font-size);
    margin-bottom: 2rem;
    color:Var(--secondary-color);
  }

  .review-container .review-area{
    position: relative;
  }

  .review-container .review-source{
    display: flex;
    align-items: center;
    gap: 30px;
  }

  .review-container .review-source img{
    border-radius: 50%;
  }
  
  .review-container .review-source .person-name h3{
      color:var(--secondary-color);
  }

/* Custom Navigation Buttons */

.arrow-navigation-container{
  position: absolute;
  top: 25px;
  right: 0;
  display: flex;
  align-items: center;
}
.custom-prev,
.custom-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  background: var(--primary-color);
  box-shadow: 0 .3rem .5rem rgba(255,255,255,.2);
  color: white;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  z-index: 10;
  border: .1rem solid var(--white-color);
}

/* Positioning */
.custom-prev {
  right: 80px;
}

.custom-next {
  right: 20px;
}


  /* about us page css */

  .background-image-banner{
    min-height: 80vh;
    background-image: linear-gradient(rgba(0,0,0,.8),rgba(0,0,0,.8)),url('https://cdn.pixabay.com/photo/2013/11/24/11/10/lab-217043_640.jpg');
    background-size: cover;
   margin-top: -12rem;
   border-radius:8rem;
  }

  .background-image-banner .title{
    font-size: 25rem;
    font-weight: bolder;
    color: var(--white-color);
   position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-transform: uppercase;
    text-align: center;
  }
  
  
  .background-image-banner .title h4{
      font-size:2rem;
      text-align:center;
      line-height:1.4;
      margin-bottom: 10rem;
  }

   .mission{
    background-color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
   }

   .mission .left-side,
   .mission .right-side
   {
    width: 50vw;
   }

 

   .mission .right-side h3{
    font-size: 5rem;

   }

    .offering{
        background-color:var(--light-gray);
    }

   .offering .card{
    padding: 3rem;
    margin-bottom: 6rem;
    min-height: 23rem;
    border-radius: 2rem;
    background: rgb(241 240 240 / 100%) !important;
   }

   .offering .card img{
   background: rgb(241 240 240 / 100%) !important;
    border: .2rem solid var(--secondary-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    color: var(--secondary-color);
    width: 12rem;
    height: 12rem;
    border-radius: 50%;
    transition: color .3s ease, background-color .3s ease;
    box-shadow: 0 .3rem .5rem rgba(0, 0, 0, 0.1);
    margin: 0 auto;
    margin-top: -7rem;
   margin-bottom:3rem;
   }

   .offering .card:hover i{
    color: var(--white-color);
    background-color: var(--primary-color)!important;
    border: .2rem solid var(--primary-color);
   }

   .offering .card:hover h3{
    color: var(--primary-color);
   }

   .offering .card p{
    padding-top: 2rem;
   }

   .flip-card {
    background-color: transparent;
    width: 35rem;
    height: 26rem;
    perspective: 1000px;
    margin: 10px;
   }
  .flip-card-inner {
      position: relative;
      width: 100%;
      height: 100%;
      text-align: center;
      transition: transform 0.6s;
      transform-style: preserve-3d;
  }
  .flip-card:hover .flip-card-inner {
      transform: rotateY(180deg);
  }
  .flip-card-front, .flip-card-back {
      position: absolute;
      width: 100%;
      height: 100%;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      border-radius: 10px;
      z-index: 2;
  }
/*  .flip-card-front {*/
/*      background: url('https://cdn.pixabay.com/photo/2018/07/12/10/38/chemistry-3533039_640.jpg') no-repeat center center/cover;*/
/*      color: white;*/
/*      overflow: hidden;*/
/*  }*/

/*  .flip-card-front::before{*/
/*    position: absolute;*/
/*    content: '';*/
/*    background-color:rgba(0,0,0,.8);*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    z-index: 1;*/
/*  }*/

/*.flip-card-front h4{*/
/*  z-index: 2;*/
/*  font-size: 2rem;*/
/*}*/
.flip-card-back {
    background: var(--primary-color);
    color: var(--white-color);
    transform: rotateY(180deg);
}

  /* .background-image-banner .banner-title{
    font-size: 8rem!important;
    text-transform: uppercase;
   } */


   /* contact us */

   .contact-form {
    padding: 3rem;
    background: white;
    border-radius: 1rem;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.contact-form .contact-img{
  padding: 1rem;
}


.contact-form input{
  padding: 1rem;
  height: 5rem;
  font-size: 1.5rem;
}


.contact-form input::placeholder,
.contact-form textarea::placeholder{
  font-size: 1.5rem;
}

.contact-form textarea{
  resize: none;
}

.contact-form input[type="submit"]{
    font-size: 1.8rem;
    text-decoration: none;
    color: var(--white-color);
    padding: 1.5rem;
    background-color: var(--primary-color);
    border-radius: 3rem;
    font-weight: 600;
}


.captcha-box {
  display: flex;
  align-items: center;
}
.captcha-img {
  font-size: 24px;
  font-weight: bold;
  padding: 5px 15px;
  background: #333;
  color: #fff;
  border-radius: 5px;
  margin-right: 10px;
}

.captcha-btn{
  width: 10rem;
  height: 6rem;
}

.captcha-btn i{
  font-size: 3rem;
  padding: 1rem;
}
.modal-header h5{
  color: var(--primary-color);
  font-size: 2rem;
}
.modal-header .btn-close{
  background-color: var(--primary-color)!important;
  color: var(--white-color);
  font-size: 2rem;
  padding: 1rem;
  filter: invert(1);
}

  /* Back to Top Button */
  #backToTop {
    position: fixed;
    bottom: 2rem;
    right: 1rem;
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    background-color: var(--white-color);
    color: var(--primary-color);
    font-size: 2rem;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 .4rem .6rem rgba(0, 0, 0, 0.2);
    transition: opacity 0.3s, transform 0.3s;
    opacity: 0;
    transform: scale(0);
    z-index: 1000;
    cursor: pointer;
}

/* Show button when active */
#backToTop.show {
    opacity: 1;
    transform: scale(1);
}

/* SVG Progress Circle */
.progress-ring {
    position: absolute;
    top: 0;
    left: 0;
    width: 5rem;
    height: 5rem;
}

.progress-ring circle {
    fill: none;
    stroke: var(--primary-color);
    stroke-width: 6;
    stroke-linecap: round;
    stroke-dasharray: 157; /* Full circumference of the circle */
    stroke-dashoffset: 157; /* Initially hidden */
    transition: stroke-dashoffset 0.2s;
}


#backToTop i{
  font-size: 1.5rem;
  font-weight: 800;
}



  

  .product-title{
    background-color: var(--primary-color);
  }
  
  .product-table tr th{
    font-size: 1.8rem;
  }



  .product-table tr td{
    font-size: var(--small-font-size);
    
  }

  .product-details th{
    background-color: var(--primary-color);
    color:var(--white-color);
    padding: 1rem;
  }
  .product-details td{
    padding: 1rem;
    background-color: var(--bs-table-striped-bg);
     white-space: normal !important;
    word-wrap: break-word;
    word-break: break-word;
  }


/*tabs*/

.tab-scroll-container {
      position: relative;
      display: flex;
      align-items: center;
      overflow: hidden;
      margin-bottom:3rem;
    }

    .nav-tabs {
      margin: 1.5rem 0;
      scroll-behavior: smooth;
      white-space: nowrap;
      flex-grow: 1;
      scrollbar-width: none;
      padding: 1rem;
    }
    
    .nav-tabs .nav-link{
        padding:1rem 3rem;
        color:var(--secondary-color);
        font-size:var(--small-font-size);
    }
    
    .nav-tabs .nav-link.active{
        background-color:var(--primary-color);
        color:var(--white-color);
    }

    .nav-tabs::-webkit-scrollbar {
      display: none;
    }
    
    .tab-content{
        padding:1rem;
    }

    .scroll-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: white;
      border: none;
      padding: 5px;
      z-index: 10;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
      border-radius: 50%;
      cursor: pointer;
    }

    .scroll-btn svg {
      display: block;
    }

    .scroll-btn.left {
      left: 0;
    }

    .scroll-btn.right {
      right: 0;
    }

    .progress-container {
      height: 6px;
      background:gray;
      border-radius: 3px;
      overflow: hidden;
      margin-top: 1rem;
    }

    .progress-bar {
      height: 100%;
      background: var(--primary-color);
      width: 0%;
      transition: width 0.3s ease;
    }
  

   .certificate-container {
    overflow: hidden;
  }

  .certificate-wrapper{
    position: relative;
  }

    .certificate-card {
      transition: transform 0.3s ease-in-out;
      cursor: pointer;
       padding: 2rem;
       background-color: var(--white-color);
       box-shadow: .1rem .3rem  .3rem .1rem rgba(0, 0, 0, 0.2);
       border: .1rem solid rgba(0, 0, 0, 0.1);
       transition: transform .3s ease;
  }

  .certificate-card:hover{
      transform: scale(0.9);
  }



      #map-container {
      position: relative;
      width: 100%;
      height: 100vh;
      background: url('../images/world-map.jpg') no-repeat center center;
      background-size: cover;
      overflow: hidden;
      margin-bottom:80px;
    }

    #map-container .marker {
      position: absolute;
      width: 40px;
      height: 40px;
      background: url('https://cdn-icons-png.flaticon.com/64/684/684908.png') no-repeat center center;
      background-size: contain;
      cursor: pointer;
    }

   #map-container .popup {
      position: absolute;
      background: white;
      padding: 10px;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.3);
      max-width: 300px;
      z-index: 10;
      display: none;
      padding:20px;
    }

    #map-container .popup img {
      width: 100px;
      display: block;
      margin-bottom: 5px;
    }

    #map-container .popup h4 {
      margin: 5px 0;
    }

    #map-container .popup a {
      color: blue;
      font-size:2rem;
      text-decoration: none;
    }
    .popup-container {
        width: 250px;
    }
    .popup-container img {
        width: 100px;
        text-align: left;
    }
    .popup-container h4 {
        margin: 10px 0 5px;
        font-size: 2rem;
        text-align: left;
        margin-bottom: .5rem;
    }
    .popup-container p {
        margin: 0;
        font-size: 14px;
        color: #555;
        text-align: left;
        margin-bottom: .5rem;
    }
    .popup-btn {
        display: inline-block;
        margin-top: 8px;
        padding: 1rem 2rem;
        background: var(--primary-color);
        text-decoration: none;
        border-radius: 4px;
        font-size: 12px;
    }

    .popup-btn a{
      color: var(--white-color);
     
    }

    .leaflet-container a{
      margin-bottom: .5rem;
      font-size: 2rem;
    }

    .leaflet-container a.leaflet-popup-close-button span{
      font-size: 2rem;
    }





  .footer{
    position: relative;
    background-color:rgb(241 240 240 / 60%);
  }

  .footer .footer-first-column img{
    margin-bottom: 3rem;
  }

  .footer .footer-first-column p,
  .footer .footer-second-column p{
    color: var(--secondary-color);
  }
  
  
  

  .footer .footer-first-column .social-links ul li{
    display: inline-block;
    font-size: 3rem;
    list-style: none;
  
  }

  .footer .footer-first-column .social-links ul{
    padding-left: 0;
  }

  .footer .footer-first-column .social-links ul li a{
    width: 8rem;
    height: 8rem;
    border-radius: 50%;
    text-decoration: none;
    font-size: 3rem;
    margin-right: 1rem;
    margin-top: 2rem;
    padding: 1rem;
    border-radius: 100%;
     color: var(--secondary-color);
    border: .1rem solid var(--secondary-color);
  }

  .footer .footer-first-column .social-links ul li:hover a{
    color: var(--white-color);
    background-color: var(--primary-color);
    border: .1rem solid var(--primary-color);
    box-shadow:  0 .3rem .15rem rgba(0, 0, 0, 0.2);
  }

  .footer .footer-second-column h3{
    color: var(--secondary-color);
    font-size: 2.5rem;
    padding-bottom: .8rem;
    padding-top: 5rem;
    margin-bottom: 3rem;
    border-bottom: .1rem solid rgba(255,255,255,.1);
    transition: border-bottom .3s ease;
    position: relative;
  } 

  .footer .footer-second-column h3::before{
    position: absolute;
    content: '';
    top: 100%;
    left: 0;
    background-color: var(--secondary-color);
    width: 5rem;
    height: .1rem;
    transition: width .3s ease;
  }

  .footer .footer-second-column h3:hover::before{
    width: 100%;
  }

  .footer .footer-second-column h3:hover{
    border-bottom: .1rem solid rgba(255,255,255,.5);
  }

  .footer .footer-first-column,
  .footer .footer-second-column {
    padding: 2rem;
  }

  .footer .footer-first-column i,
  .footer .footer-second-column i{
    font-size: 2rem;
  }


  .footer .footer-second-column .nav-links ul{
    padding: 0;
  }
  .footer .footer-second-column .nav-links ul li{
    list-style: none;
    margin-bottom: .5rem;
  }

  .footer .footer-second-column .nav-links ul li i{
    font-size: 2rem;
    color: var(--secondary-color);
    margin-right: .5rem;
    transition: margin-right .5s ease;
  }

  .footer .footer-second-column .nav-links ul li:hover i{
   margin-right: .2rem;
  }

  .footer .footer-second-column ul li a{
    font-size: 1.8rem;
    text-decoration: none;
    color: var(--secondary-color);
    transition: color .3s ease;
    display: inline-flex;
  }


  .footer .copyright-area{
    margin-top: 2rem;
    padding: 2rem;
    border-top: 1px solid rgba(0,0,0,.1);
  }

  .footer .copyright-area p{
    color: var(--secondary-color);
  }

@media(min-width:1920px){

  .home-background-image .home-content{
    margin-top: 42rem;
  }
  
  .product-category {
        margin-top: -32rem;
    }
    
    
}


/* Desktop: Show dropdown on hover */
@media (min-width: 992px) {
  .nav-item.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0;
  }

}


  @media (max-width: 991px) { /* Bootstrap's breakpoint for mobile */
  
    .navbar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        background-color: var(--white-color) !important; /* White background */
        border-radius: 0;
    }
    
    .col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6{
        width:90%;
        margin:0 auto;
    }
    
    .counter-box{
        width:90%;
        margin:0 auto;
        margin-top: 50px;
    }
    
    
    .review-container .review-slide{
        padding: 2rem 3rem;
    }
    
    .footer .footer-second-column h3{
        font-size:2rem;
    }

    .navbar .navbar-toggler-icon {
        filter: invert(1); /* Make the icon black */
    }

    .navbar .nav-link {
        color: var(--secondary-color) !important; /* Make links black for visibility */
    }
    
    
    .navbar-brand img{
        width:120px;
    }


    .home-background-image{
        min-height: 65vh;
        margin-top: 28rem;
    }

    .home-background-image .home-content{
      margin-top: 40rem;
    }

   
    
    .background-image-banner{
        top: 30%;
    }
    
    .product-category{
        margin-top:-8rem;
    }
    
    
    .offering .card{
        width:90%;
        margin:0 auto;
        margin-bottom: 6rem;
    }
    
    .background-image-banner{
        margin-top:0;
    }

}



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

    .navbar-nav{
      margin: 5rem 0 5rem 2rem;
    }
    
    .navbar-nav .nav-item {
        padding:.5rem;
   }

    .navbar-nav .nav-item .nav-link{
      padding: 2rem 0;
      border-bottom: .1rem solid rgba(255, 255, 255, 0.1);
    }

    .navbar-nav .nav-item .nav-link:hover{
      color: rgba(255,255,255,.5);
    }
    
    .dropdown-menu li {
    padding: 1rem 0;
}

    .home-background-image{
        margin-top: 15rem;
    }

    .about-us .about-us-section .about-left{
      width:100vw;
    }
  
    .about-us .about-us-section{
        flex-direction: column;
    }

    .mission{
      flex-direction: column;
    }

    .mission .left-side,
    .mission .right-side
    {
     width: 100vw;
    }
    
    .mission:nth-child(odd){
        flex-direction:column-reverse;
    }
    
    .mission .right-side h3{
        font-size:3rem;
    }
    
    .background-image-banner .title{
        font-size:15rem;
    }
    
    .footer .copyright-area p{
        text-align:center;
    }
    
    .title{
        text-align:center;
    }
    
    .row{
        width:90vw;
        margin:0 auto;
    }
    
    .footer .row{
      width:100vw;
      margin:0;
  }
  
  
  .footer .footer-first-column, .footer .footer-second-column{
      padding:2rem 0;
  }
  
  .footer .copyright-area{
      padding:2rem 0;
  }

.footer .footer-first-column p, .footer .footer-second-column p{
    font-size:1.6rem;
}
    /* Add your styles for mobile and smaller screens here */
  }


  .product-details{
    padding: 2rem;
  }