/* Hero Section Styling */
 .hero-section {
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
    text-align: center;
    padding: 15px;
    position: relative;
 }

/* Base GIF Styling */
.hero-gif {
    position: absolute;
    top: 40%;
    left: 58%;
    transform: translate(-50%, -50%);
    width: 32%;
    z-index: -1;
    opacity: 0; /* Initially hidden */
    transition: opacity 1s ease-in-out;
}

/* Hide GIF on smaller screens */
@media (max-width: 990px) {
    .hero-gif {
        display: none !important;
    }
}

/* Medium screens (991px - 1200px) */
@media (min-width: 991px) and (max-width: 1200px) {
    .hero-gif {
        top: 42%;
        left: 60%;
        width: 36%;
    }
}

/* Large screens (1201px - 1400px) */
@media (min-width: 1201px) and (max-width: 1300px) {
    .hero-gif {
        top: 41%;
        left: 54%;
        width: 34%;
    }
}

@media (min-width: 1301px) and (max-width: 1400px) {
    .hero-gif {
        top: 41%;
        left: 56%;
        width: 34%;
    }
}

/* Extra large screens (1401px - 1600px) */
@media (min-width: 1401px) and (max-width: 1600px) {
    .hero-gif {
        top: 40%;
        left: 58%;
        width: 32%;
    }
}

/* Screens around 1521px */
@media (min-width: 1500px) and (max-width: 1540px) {
    .hero-gif {
        top: 40%;
        left: 58%;
        width: 32%;
    }
}

/* Very large screens (1601px - 1800px) */
@media (min-width: 1601px) and (max-width: 1670px) {
    .hero-gif {
        top: 39%;
        left: 58%;
        width: 30%;
    }
}

@media (min-width: 1671px) and (max-width: 1780px) {
    .hero-gif {
        top: 39%;
        left: 60%;
        width: 30%;
    }
}

@media (min-width: 1781px) and (max-width: 1850px) {
    .hero-gif {
        top: 39%;
        left: 60%;
        width: 30%;
    }
}

@media (min-width: 1850px) and (max-width: 1900px) {
    .hero-gif {
        top: 39%;
        left: 60%;
        width: 30%;
    }
}

@media (min-width: 1900px){
    .hero-gif {
        top: 39%;
        left: 61%;
        width: 30%;
    }
}

 /* Hero Text Styling */
 .hero-text {
     max-width: 635px;
     position: relative;
 }

 .hero-text p {
    font-size: 18px;
    color: rgb(63, 63, 63);
    width: 45%;
    margin-left: 60%;
    margin-top: -4%;
}

.hero-section h2 {
    font-size: 45px;
}

 /* Arrow Image Styling */
 .arrow-image {
    position: absolute;
    left: 28%;
    top: 30%;
    width: 38%;
    transform: rotate(22deg);
}

 .hero-image {
    width: 100%;
    max-width: 480px;
    height: 480px;
    border-radius: 50%;
    overflow: hidden;
    border: 12px solid #0095ff;
    display: flex;
    justify-content: center;
    align-items: center;
}

 .carousel-inner img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 .carousel {
    height: 100%;
    width: 100%;
 }


 /* Responsive Styling */



 @media (min-width: 1200px) {
    .hero-section {
        max-width: 100% !important;
    }
}

 @media (max-width: 480px) {
    .hero-image {
        max-width: 325px;
        height: 325px;
    }

    .carousel {
        height: 100%;
        width: 100%;
     }
}

 @media (max-width: 768px) {

    .hero-section {
        display: flex;
        align-items: center;
        justify-content: space-around;
        flex-wrap: wrap;
        text-align: center;
        width: 100%;
        /* position: relative; */
    }

     .hero-text p,
     .arrow-image {
         display: none;
     }

     .hero-image {
        max-width: 325px;
        height: 325px; /* Slightly smaller on mobile */
    }

     .btn-small {
         margin: 10px 0px 20px 0px;
     }

     .hero-text h2 {
         font-size: 30px !important;
     }

     .carousel {
        height: 100%;
        width: 100%;
     }

 }

 @media (min-width: 992px) {

     .hero-text {
         flex: 1;
         text-align: left;
     }

     .carousel {
        height: 100%;
        width: 100%;
     }

 }

 @media (max-width: 990px) {

     .hero-text p,
     .arrow-image {
         display: none;
     }

     .btn-small {
         margin: 10px 0px 20px 0px;
     }
 }



 @media (max-width: 1199px) {
    .hero-image {
        max-width: 325px;
        height: 325px;
    }

     .hero-text h2 {
         font-size: 30px;
     }

     .hero-text p {
        font-size: 14px;
        color: rgb(63, 63, 63);
        width: 40%;
        margin-left: 55%;
        margin-top: -5%;
    }

    .arrow-image {
        position: absolute;
        left: 30%;
        top: 30%;
        width: 30%;
        transform: rotate(22deg);
    }

    .carousel {
        height: 100%;
        width: 100%;
     }

 }


 /* home service section buttons */

 .pest-section {
     background: #F4FBFF;
     padding: 30px 20px;
 }

 .pest-card {
     background: white;
     border: 2px solid #ddd;
     border-radius: 10px;
     height: 90px;
     text-align: center;
     margin: 12px 0;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     justify-content: space-evenly;
     text-decoration: none;
     color: #1c1c1c;
     padding: 6px;
 }

 .pest-card img {
     width: 45px;
     height: 45px;
     transition: transform 0.5s ease-in-out;
 }

 .pest-card p {
     margin-top: 10px;
     font-weight: bold;
 }

 .pest-card:hover img {
     transform: rotate(90deg);
     transition: transform 0.5s ease-in-out;
 }

 .flip-image:hover img {
    transform: scaleX(-1);
    transition: transform 0.5s ease-in-out;
}

 @media (max-width: 768px) {
     .pest-card {
         width: 90%;
     }
 }

 /* pest services */

 .service-card {
     /* border: 1px solid #ddd; */
     border-radius: 10px;
     padding: 12px;
     text-align: left;
 }

 .service-card h4 {
     font-size: 18px;
     font-weight: bold;
 }

 .service-card img {
     width: 100%;
     height: 150px;
     border-radius: 10px;
     margin-top: 15px;
 }

 .highlight {
     color: #0096FF;
     font-weight: bold;
 }

 .view-more {
     text-align: right;
     margin-top: 60px;
     text-decoration: none;
     font-size: 16px;
     font-weight: 500;
 }


 .carousel-indicators [data-bs-target] {
    background-color: #007bff;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.carousel-indicators {
    bottom: -55px; /* or adjust as needed */
}

 /* youtube video section */

 .how_we_work,
 .youtube_service {
     background-color: #F4FBFF;
 }

 .how_we_work span {
     color: #007bff;
 }

 .how_we_work p {
     color: #555;
 }


 /* about section */

 .about-section {
     padding: 10px 20px;
 }

 .about-section h2 {
     font-weight: bold;
 }

 .highlight {
     font-weight: 700;
 }

 .about-text {
     max-width: 600px;
 }

 .about-images {
     display: flex;
     flex-direction: column;
     gap: 15px;
 }

 .about-images img {
     width: 100%;
     border-radius: 15px;
     object-fit: cover;
 }

 .circle-img {
     border-radius: 50%;
     width: 150px;
     height: 150px;
     object-fit: cover;
 }

 @media (min-width: 768px) {
     .about-images {
         flex-direction: row;
         align-items: center;
     }

     .circle-img {
         width: 400px;
         height: 370px;
     }
 }

 @media (max-width: 768px) {
     .about-images img {
         width: 100%;
         border-radius: 10px;
         object-fit: cover;
         height: 100%;
         margin-top: 25px;
     }
 }

 /* counter */

 .counter {
     font-size: 2rem;
     color: #fff;
 }

 .counter-count p{
    color: #343333;
    font-size: 18px;
    font-weight: 500;
 }

 .counter-section .row {
     background: #FF6262;
     border-radius: 20px;
     padding: 15px 0;
 }

 .counter-section p {
     font-size: 20px;
 }

 .vertical-line {
    width: 2px;
    height: 60px;
    border-left: 2px dotted #ebebeb; /* Dotted Line */
    margin: 0 auto;
}

 /* Adjust for Small Devices */
 @media (max-width: 767px) {
     .row>div {
         margin-bottom: 15px;
     }
 }


 /* booking step section */

 .booking-steps {
     background-color: #f8fcff;
     padding: 30px 20px;
     text-align: center;
 }

 .booking-steps h2 {
     font-weight: bold;
     margin-bottom: 15px;
 }

 .highlight {
     color: #007bff;
 }

 .step-box {
     padding: 10px;
 }

 .step-box i {
     font-size: 50px;
     color: #007bff;
     margin-bottom: 10px;
 }

 .step-box h4 {
     font-weight: bold;
     font-size: 18px;
 }

 .step-box p {
     font-size: 15px;
     color: #555;
 }

 @media (max-width: 768px) {
     .step-box {
         margin-bottom: 15px;
     }
 }


 /* why choose us */

 .choose-section {
     padding: 30px 20px;
 }

 .choose-title {
     color: #007bff;
     font-weight: bold;
 }

 .choose-heading {
     font-weight: bold;
     font-size: 28px;
 }

 .feature-box {
     margin-bottom: 20px;
     display: flex;
     align-items: flex-start;
     gap: 15px;
 }

 .feature-box i {
     font-size: 24px;
     color: #007bff;
 }

 .feature-text h6 {
     font-weight: bold;
     font-size: 18px;
     margin-bottom: 5px;
 }

 .feature-text p {
     font-size: 14px;
     color: #555;
 }

 .choose-image img {
     width: 100%;
     max-width: 400px;
     border-radius: 15px;
 }

 @media (max-width: 768px) {
     .choose-image {
         display: none;
     }
 }

 /* testimonial */
  /* Styling for the testimonials section */
  .testimonials {
    background-color: #f8f9fa;
    padding: 50px 0;
}

.testimonial-container {
    display: flex;
    gap: 20px;
    overflow-x: hidden;
    scroll-snap-type: x mandatory;
    padding-bottom: 10px;
    white-space: nowrap;
    position: relative;
}

.testimonial-box {
    flex: 0 0 calc(100% - 20px); /* Default: 1 per row */
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    scroll-snap-align: start;
    display: inline-block;
    white-space: normal;
}

.stars {
    color: #FFD700;
    font-size: 18px;
    margin: 10px 0;
}

.read-more {
    display: block;
    margin-top: 10px;
    text-decoration: none;
    color: #007bff;
    font-weight: bold;
}

/* Responsive Layout */
@media (min-width: 576px) { /* Small devices (tablets) */
    .testimonial-box { flex: 0 0 calc(50% - 20px); } /* 2 per row */
}

@media (min-width: 992px) { /* Large devices (desktops) */
    .testimonial-box { flex: 0 0 calc(33.333% - 20px); } /* 3 per row */
}


.google-reviews img {
    width: 100px;
    margin-bottom: 10px;
}