*{
    height:auto;
    width:auto;
}
@keyframes changeColor {
    from { background: transparent; }
    to { background: #22A426; }
}
header {
    display: flex;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: 14%;
  width: 100%;
  color: white;
  animation: changeColor linear both;
  animation-timeline: scroll(y);
  animation-range: 0 300px; /* scroll hone tak color change hoga */
  z-index: 9999;
  align-items: center;
  overflow-x: hidden;
}
.header-left-side{
    display: flex;
    align-items: center;
    gap:1%;
    width:30%;
    padding-left:5%;
}
.logo-container{
    width:10vh;
    margin-left: 6%;
}
.logo-container img{
    height: 100%;
    width:100%;
     border-radius: 10%;
}
.comp-name{
    color:white;
    font-family: "merienda one";
    font-size: 1.25rem;
}
.comp-name p{
   margin-top: 0px;
  font-size: 0.875rem;
}
.header-right-side{
    width:70%;
}
.header-right-side ul{
    display: flex;
    list-style: none;
    font-size:1.5rem;
    font-family: Roboto;
    color: white;
    font-weight: bold;
    justify-content: space-between;
    margin:0% 18%;
}
.header-right-side a{
    color:white;
    text-decoration: none;
}
/* Hide checkbox */
    .dropdown input {
      display: none;
    }

    /* Menu button */
    .menu-btn {
      background-color: #22A426;
  color: white;
  padding: 2% 2%;
  cursor: pointer;
  border-radius: 5px;
  display: none;
  margin-top: 2%;
  font-size: 0.8rem;
    }

    /* Dropdown content */
    .dropdown-content {
       display: none;
  position: fixed; /* ✅ fixed so it floats above all and doesn’t affect layout */
  top: 70px; /* ✅ exactly below header */
  right: 5%;
  width: 40%;
  background-color: #f9f9f9;
  box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
  border-radius: 5px;
  z-index: 10000; /* ✅ stays above header */
  overflow: hidden;
     
    }

    .dropdown-content a {
      color: black;
  padding: 10px 14px;
  text-decoration: none;
  display: block;
    }
 .dropdown-content a:hover {
      background-color: #ddd;
    }

    /* When checkbox checked → show dropdown */
    .dropdown input:checked ~ .dropdown-content {
      display: block;
    }
.hero-container{
    width: 100%;
    height:60%;
    left:0%;
    right:0%;
   
}
.hero-image{
    position: relative;
    width: 100%;
    height: 100%;
    

}
.hero-title h1{
    position: absolute;
    top:35%;
    left:10%;
    font-weight: bold;
    color: white;
    font-family:'Josefin Sans', sans-serif;
    line-height: 3rem;
    
}

.hero-title p{
    position: absolute;
    width:30%;
    font-size: 1rem;
    text-align: center;
    font-family:'Josefin Sans', sans-serif;
    top:45%;
    left:8%;
    color: white;
    line-height: 1rem;
}
.hero-button{
    position: absolute;
    background-color: #22A426;
    height:8%;
    width: 12%;
    border-radius: 20px;
    border: none;
    top:60%;
    left: 15%;
    font-family: 'Roboto Mono', monospace;
    font-size: 1.25rem;
    font-weight: bold;

}
.hero-button a{
    color:white;
    text-decoration: none;
}
.hero-button:hover{
    background-color: #084E0A;
    color: white;
    transition: 500ms;
}
.spider-net{
    height: 40%;
    width: 25%;
    position:absolute;
    margin-top:-13%;
    margin-left: -8%;
}
.our-services-section{
    height:auto;
    width:100%;
}
.our-services-text{
    color:#22A426;
    font-size: 2.5rem;
    font-family: Roboto;
    font-weight: bolder;
    text-align: center;
}
.cockroach-png{
    height: 12%;
    width: 12%;
    position: absolute;
    margin-left: 55%;
    margin-top: -10%;
}
.services-container{
    display:grid;
    grid-template-columns:1fr 1fr 1fr 1fr;
    width:80%;
    margin-left:10%;
    margin-right: 10%;
    justify-content: space-between;
    gap:2%;
}
.services-box{
    background-color: #EFF5FB;
    height:70%;
    width:96%;
}
.services-box:hover{
    box-shadow: inset 0px 0px 30px 0px rgba(0, 0, 0, 0.25);
    transition: 500ms;
    margin-top: 2%;
}
.service-image-container{
    height:30%;
    width: 50%;
    margin-top: 12%;
    margin-left: 20%;
    border-radius: 10%;
 
   
}
.service-image{
    height:100%;
    width: 100%;
    border-radius: 10%;

    
}
.services-box h4{
    font-size: 0.9rem;
    text-align: center;
    font-family:"Roboto Slab",serif;
    letter-spacing: 5%;
    color:#22A426;
}
.services-box h5{
    text-align: center;
    font-family:"Roboto Slab",serif;
    letter-spacing: 5%;
    color:#22A426;
}
.services-box a{
    font-size :1rem;
    font-family: 'Roboto Mono', monospace;
    letter-spacing: 5%;
    margin-left: 30%;
    text-decoration: none;
    color:black;
    margin-top: 10%;
   
}
.get-quote-link{
    height:5%; 
    width:80%;
    background-color: #22A426; 
    padding :5% 10%;
    text-align: center;
    color: white;
    bottom:0%;
     
}

.get-quote-link:hover{
    background-color:#084E0A ;
}
.our-product-section{
    background-color: #EFF5FB;
    width:100%;
    height:auto;
    margin-top: 8%;
    padding-bottom:10%;
    
}
.our-product-insect{
    height:12%;
    width: 12%;
    position:absolute;
    margin-left: 32%;
    margin-top: 2%;
}
.our-product-text{
    color:#22A426;
    font-size: 2.5rem;
    font-family: Roboto;
    font-weight: bolder;
   text-align: center;
    padding-top:6%;
    letter-spacing: 5%;

}
.our-product-spider{
    height: 28%;
    width: 7%;
    position: absolute;
    margin-left :67%;
    margin-top: -13%;
}
.our-product-container{
    height:auto;
    width:80%;
    background-color: #22A426;
    border-radius: 20px;
    margin-left : 10%;
    margin-right : 10%;
    margin-top: 5%;
    box-shadow: 20px 20px 18px 0px black;

}
.our-product-man{
    height:50%;
    width:20%;
    position:absolute;
    margin-top: -11%;
    margin-left :15%;
}
.our-product-description{
    font-size: 1.2rem;
    font-weight: bold;
    font-family:"Roboto Slab",serif;
    color: white;
    text-align: center;
    align-items: center;
    line-height: 2.9rem;
    letter-spacing: 1px;
    padding:7% 3%;
    height:100%;
    width:95%; 
}
.service-sector-text{
    color:#22A426;
    font-size: 2.5rem;
    font-family: Roboto;
    font-weight: bolder;
    text-align: center;
    padding-top: 5%;
    letter-spacing: 5%;
}
.service-sector-ant{
    height:15%;
    width: 12%;
    position: absolute;
    margin-left: 68%;
    margin-top: -10%;
}
.sector-section{
    height:auto;
    width:100%;
}
.icon-container{
    height:auto;
    width: 80%;
    display: grid;
    text-align: center;
    grid-template-columns:1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    margin-left: 10%;
    margin-right: 10%;
   
}
.icon-box{
    height:25%;
    width:30%;
    justify-content: space-between;
}
.icon-box p{
    font-family: roboto slab,serif;
    margin-top:15%;
    font-size:1.50rem;
    font-weight: bold;
    color:#22A426;
    letter-spacing: 4%;
    margin-left: 50%;
}
.icon{
    height: 200%;
    width: 200%;
    left: 0%;
    border-radius: 20px 20px 0px 20px;
}   

.icon:hover{
    box-shadow: 0px 0px 0px 5px #EFF5FB;
    transition: 400ms;
    background-color:#EFF5FB ;
}
.why-needed-section{
    margin-top:8%;
    height:auto;
    width:100%;
    background-color: #EFF5FB ;
}
.why-needed-text{
    color:#22A426;
    font-size: 2.5rem;
    font-family: Roboto;
    font-weight: bolder;
    text-align: center;
    letter-spacing: 5%;
    padding-top: 7%;
   
}
.why-needed-bee{
    height:15%;
    width:15%;
    position:absolute;
    margin-left:80%;
    margin-top: -8%;
}
.why-needed-container{
    display: grid;
    height:auto;
    width:80%;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    column-gap: 5%;
    margin-left: 10%;
    margin-right:10%;
}
.why-needed-box{
    background-color:#22A426;
    height: auto;
    width: 100%;
    border-radius: 30px;
    text-align: left;
    box-shadow: 0px 20px 10px 0px black;
    margin-bottom: 10%;
}
#box-1{
    border-radius: 30px 30px 0px 30px;
}
#box-2{
    border-radius: 30px 30px 30px 0px;
}
#box-3{
    border-radius: 30px 0px 30px 30px;
}
#box-4{
    border-radius: 0px 30px 30px 30px;
}
.why-needed-box:hover{
    background-color: #084E0A;
    color:white;
    box-shadow: none;
    transition: 400ms;
}
.why-needed-box h3{
    padding-left: 10%;
    padding-top: 3%;
    font-family: Roboto;
    font-size: 1.8rem;
    font-weight: bolder;
    letter-spacing: 2%;
    line-height: 2rem;
}
.why-needed-box p{
    height: 100%;
    width: 80%;
    padding-left: 10%;
    padding-right: 10%;
    font-size: 1.1rem;
    font-family:"Roboto Slab",serif;
    font-weight:500;
    letter-spacing: 1%;
    line-height: 2rem;
}
.what-people-say-text{
   
    width:100%;
    color:#22A426;
    font-size: 2.5rem;
    font-family: Roboto;
    font-weight: bolder;
    text-align: center;
    margin-top:8%;
    letter-spacing: 5%;
   
}
.what-people-say-section{
  height:auto;
  width:100%;
   overflow: hidden;
}
.what-people-say-container {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
     
      position: relative;
      width: 200%;       /* jitna width chaho */
      column-gap: 5%;
    }
.feedback{
      display: inline-block;
      white-space: nowrap;
      /* animation */
      animation: marquee-animation 10s linear infinite;
      background: linear-gradient(#22A426, #16271A 87%);
      width: 100%;
      height: auto;
      border-radius: 50px;
      color: white;
      padding: 20px;
    }

.feedback img {
      height: 100px;
      width: 100px;
      border-radius: 100%;
      display: block;
      margin: 0 auto;
      /* margin-left / margin-top adjust agar chaho */
    }
    .feedback h4 {
      text-align: center;
      margin-top: 10px;
    }
    .feedback p {
     
      width: 90%;
      height: auto;
      white-space: normal;
      overflow-wrap: break-word;
      word-wrap: break-word;
      word-break: break-word;

      text-align: left;
      margin-left: 5%;
      margin-right: 5%;
      margin-bottom: 5%;
      font-size: 1rem;
      font-family: 'Open Sans', sans-serif;
      font-weight: 500;
      color: white;
    }
.center-rating {
      margin-top: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .rating-static i {
      font-size: 2em;
      color: #ccc;
      margin: 0 2px;
    }
    .rating-static.rating-1 i:nth-child(-n+1),
    .rating-static.rating-2 i:nth-child(-n+2),
    .rating-static.rating-3 i:nth-child(-n+3),
    .rating-static.rating-4 i:nth-child(-n+4),
    .rating-static.rating-5 i:nth-child(-n+5) {
    color: #FFD700;        /* filled star color – gold etc */
    }

    @keyframes marquee-animation {
      0% {
        transform: translateX(100%);
      }
      100% {
        transform: translateX(-400%);
      }
    }
.inquiry-form-container{
  position: absolute;
  height:auto;
  width:80%;
  margin:10% 10%;
  background-color: #22A426;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 5%;
  padding:2%;
  border-radius: 40px;
}
.inquiry-description{
  height:auto;
  width:auto;
  padding:5%;
}
.inquiry-description h3{
  font-family: Roboto;
    font-size: 2.5rem;
    margin-left: 20%;
    margin-top: 5%;
}
.inquiry-description p{
  font-family: "Roboto slab",serif;
  font-size: 1.2rem;
  margin-left: 10%;
}
.inquiry-form{
  height: 80%;
  width:60%;
  background-color: #084E0A;
   border-radius: 8px;
   color: #000;
    box-shadow: 0px 0px 100px 1px white;
    padding:10% 5%;
    margin-bottom: -5%;
}
.inquiry-form input[type="text"],
    .inquiry-form input[type="tel"],
    .inquiry-form textarea {
      width: 90%;
      padding: 2% 2%;
      margin-bottom: 2%;
      border: 1px solid #ccc;
      border-radius: 10px;
      background-color: rgb(196, 191, 191);
      font-size: 1rem;
      font-family: Arial, sans-serif;
      margin-top: 0%;
      margin-left: 3%;
    }
.inquiry-form textarea {
      height: 80px;
      resize: vertical;
    }
    .service-text {
      font-size: 1.5rem;
      font-family: 'Roboto Slab', serif;
      margin-bottom: 2%;
      display: block;
      margin-left:5%;
      margin-top: 0%;
      color: white;
    }
     .inquiry-form .services label {
      display: inline-flex;
      align-items: center;
      margin-right: 5%;
      cursor: pointer;
      font-family: 'Roboto Slab', serif;
      font-size: 0.70rem;
      color: white;
    }
    .inquiry-form .services input[type="checkbox"] {
      margin-right: 5px;
      width: 16px;
      height: 16px;
      margin-left:30px;
      margin-top: 0px;
      
    }
     .inquiry-form button {
      width: 50%;
      padding: 0.80rem 0;
      background-color: #22A426;
      color: #fff;
      border: none;
      border-radius: 4px;
      font-size:1rem;
      cursor: pointer;
      font-family: 'Roboto Slab', serif;
      margin-left:25%;

    }
    .inquiry-form button:hover {
     border:2px solid black;
    }
footer {
  
    margin-top:30%;
    background: #052229;
    color: white;
    padding: 10%;
    display: flex;
    height: auto;
    width:auto;
    box-shadow: inset 0 0 200px 10px rgba(0,0,0,0.5);
}
.footer-container {
  margin-top:25%;
  margin-left: 10%;
  margin-right:10%;
   display: flex;
   columns: 1fr 1fr 1fr 1fr;
}
.footer-section h3 {
    margin-bottom: 25%;
    margin-left: 10%;
    font-size:1.5rem;
    letter-spacing: 2%;
    font-weight: bold;
    font-family: Roboto;
    width: auto;
}
.footer-section i{
  margin-left: -5%;
}
.footer-section p, 
.footer-section a {
   
    font-size: 1rem;
    color: #ddd;
    text-decoration: none;
    line-height: 1.8rem;
    display: block;
    font-family: 'Roboto Mono', monospace;
    text-align: left;
}
.footer-section p.fa-phone{
   margin-left:20%;
}
.footer-icons{
    display:flex;
    height: 10%;
    margin-top: 8%;
}
.footer-icons a {
    justify-content: space-between;
    
    margin-right: 15%;
    font-size: 1.50rem;
}
.footer-icons .fa-instagram { color: #E1306C; }
.footer-icons .fa-facebook { color: #1877F2; }
.footer-icons .fa-whatsapp { color: #25D366; }
.footer-icons .fa-google { color: #DB4437; }
.map iframe {
    border: 0;
    width: 250%;
    height: 90%;
    border-radius: 10px;
}

/* mobile */
@media only screen and (min-width:360px) and (max-width: 768px){
    *{
        box-sizing: border-box;
        overflow-x: hidden;
    }
    .header{
         height: 12%;
    }
    @keyframes changeColor {
    from { background: transparent; }
    to { background: #22A426; }
}
    .header-left-side{
    flex-basis: 50%;
    padding-left:4%;
    gap:6%;
    }
    .logo-container{
        width:7vh;
        margin-left: 6%;
    }
    .comp-name{
        font-size: 0.8rem;
    }
    .comp-name p{
        font-size: 0.5rem;
    }
    .header-right-side{
        flex-basis:50%;
        flex-wrap: wrap;
    }
    .header-right-side ul{
        display: none;
        margin:0;
       
    }
    /* Show menu icon */
  .menu-btn {
    display: block;
    position: absolute;
    top: 50%;
    right: 5%;
    transform: translateY(-50%);
    z-index: 10001;
  }

  /* dropdown positioning so that the menu shows below the icon, aligned right */
  .dropdown-content {
     position: fixed; /* ✅ ensures no scroll inside header */
    top: 25px; /* just below mobile header */
    right: 5%;
    width: 40%;
    z-index: 10000;
  }
  .hero-title h1{
    font-size: 0.8rem;
    top:10%;
  }
  .hero-title p{
    font-size: 0.4rem;
    width:38%;
    top:18%;
    line-height: 0.5rem;
}
.hero-button{
    height:4%;
    width: 18%;
    top:27%;
    font-size: 0.5rem;

}
.spider-net{
    height: 25%;
    width: 30%;
    margin-top:-13%;
    margin-left: -8%;
}
.our-services-text{
    font-size: 1.2rem;
}
.cockroach-png{
    margin-left: 65%;
    margin-top: -14%;
}
.services-container{
    grid-template-columns: 1fr;
    margin-top: 5%;
}
.services-box{
    height:100%;
    width:60%;
    margin: 0% 20%;
    overflow-y: hidden ;
}
.service-image-container{
    height:20%;
    width: 40%;
    margin-left: 30%;
 
   
}
.services-box h4{
    font-size: 0.7rem;
}
.services-box h5{
   font-size: 0.6rem;
}
.services-box a{
    font-size :0.7rem;
   text-align: center;
   
}
.get-quote-link{
    height:auto;
    display: block;
    width:100%; 
    padding :8% 8%;
    font-size: 0.8rem;
}
.our-product-section{
    margin-top: 8%;
    padding-bottom:10%;
    
}
.our-product-insect{
    width:10%;
    height:10%;
    margin-left: 20%;
}
.our-product-text{
    font-size: 1.2rem;

}
.our-product-spider{
    height: 15%;
    margin-left :70%;
    margin-top: -20%;
}
.our-product-man{
   display: none;
}
.our-product-description{
    font-size: 0.5rem;
    line-height: 1rem;
}
.service-sector-text{
    font-size: 1.2rem;
}
.service-sector-ant{
    height:8%;
    width: 7%;
    margin-left: 72%;
}
.icon-container{
    grid-template-columns:1fr 1fr;
    margin-left: 10%;
    margin-right: 10%;
    margin-top: 8%;
   
}
.icon-box{
    height:100%;
    width:100%;
   
}
.icon-box p{
    margin-top:3%;
    font-size:0.8rem;
    margin-left: 10%;
}
.icon{
    height: 60%;
    width: 60%;
} 
.why-needed-text{
    font-size: 1.2rem;
}
.why-needed-bee{
    height:10%;
    width:10%;
    margin-left:70%;
    margin-top: -13%;
}
.why-needed-container{
    grid-template-columns: 1fr;
}
.why-needed-box{
    height:90%;
    width:100%;
    overflow-y: hidden;
}
.why-needed-box h3{
    font-size: 1.2rem;
}
.why-needed-box p{
    height: 100%;
    width: 100%;
    font-size: 0.8rem;
    line-height: 1rem;
}
  .what-people-say-text{
    font-size: 1.2rem;
    margin-top: 30%;
  }
.what-people-say-container {
      width: 400%;       /* jitna width chaho */
      column-gap: 1%;
    }
.feedback{
      width: 100%;
      height: auto;
    }

.feedback img {
      height: 70px;
      width: 70px;
    }
    .feedback h4 {
     font-size: 0.8rem;
    }
    .feedback p {
      font-size: 0.5rem;
    }
    .rating-static i {
      font-size: 0.8em;
    }
.inquiry-form-container{
  grid-template-columns: 1fr;
  row-gap: 1%;
}
.inquiry-description h3{
    font-size: 1.2rem;
    margin-left: 30%;
}
.inquiry-description p{
  font-size: 0.6rem;
}
.inquiry-form{
  height: auto;
  width:90%;
  margin: 5%;
  margin-top: 0%;
  overflow-y: hidden;
}
.inquiry-form input[type="text"],
    .inquiry-form input[type="tel"],
    .inquiry-form textarea {
      padding: 3% 1%;
      margin-bottom: 2%;
      border-radius: 6px;
      font-size: 0.6rem;
      margin-left: 5%;
    }
.inquiry-form textarea {
      height: 70px;
    }
    .service-text {
      font-size: 0.9rem;
      margin-left: 12%;
    }
     .inquiry-form .services label {
      font-size: 0.5rem;
    }
    .inquiry-form .services input[type="checkbox"] {
      width: 15px;
      height: 15px;
      
    }
     .inquiry-form button {
      width: 40%;
      padding:3%;
      font-size:0.7rem;
      margin-left:30%;

    }
    footer {
  
    margin-top:100%;
}
.footer-container {
    width:100%;
  margin-top:110%;
  flex-direction: column;
  margin-left: 5%;
  margin-right: 5%;

}
.footer-section h3 {
    margin-bottom: 10%;
    font-size:1rem;

}
.work-day-div h3{
    font-size:1rem;
    margin-top: 40% !important;

}
.work-day-div p{
    font-size: 0.7rem;
}
.footer-section i{
  margin-left: 0%;
  margin-right: 2%;
}
.footer-section p, 
.footer-section a {
    width:100%;
    font-size: 0.7rem;
    line-height: 1.5rem;
    padding-left: 5%;
}
.footer-icons{
    height: 20%;
}
.footer-icons a {
    
    margin-right: 5%;
    font-size: 1rem;
}
.map iframe {
    border: 0;
    width: 100%;
    height: 70%;
    border-radius: 10px;
}


}