@media (max-width:991px) {
.accordion-header h3 {
  font-size: 20px;
}
.keySection {
  display: flex;
  align-items: center;
  gap: 60px;
  flex-direction: column;
}
.accordion {
  margin-top: 30px;
}
.accordion-item {
  padding-block: 0px;
}
.keyMainSection {
  padding-top: 20px;
  padding-bottom: 60px;
  background-size: 80px;
  padding-inline: 16px;
}



.keyInnerLeft .imageBox {
  background-color: #2dad7a;
  border-radius: 30px;
  max-width: 500px;
  display: flex;
  min-height: 540px;
  max-height: 460px;
  position: absolute;
  inset: auto 0% 0%;
}

.keyInnerLeft img {
  position: relative;
  z-index: 10;
  display: flex;
  width: 100%;
}



/* SERVICE SECTION  */ 

.serviceSection {
  margin-block: 80px;
}
.serviceHeading {
  font-size: 34px;
  line-height: 40px;
}


/* BRAND LOGO SECTION  */ 

.brandSection {
  padding-block: 80px;
}


/* BLOG SECTION  */

.blogContainer {
  padding-inline: 15px;
}
.blogCard {
  flex-basis: calc(50% - 12px);
}
.blogSection {
  margin-block: 80px;
}
 .testimonial {
    flex-wrap: wrap;
    padding-inline: 15px;
    max-width: 740px;
    margin-inline: auto;
  }

.testBox {
  flex-basis: calc(50% - 8px);
padding: 20px;
}
.testDesc {
  margin-block: 20px;
}


/* TESTIMONIAL SECTION  */


.testimonialSection {
  padding-block: 80px;
}
.serviceHeading.testimonialHeading {
  max-width: 400px;
  width: 100%;
  font-size: 34px;
  line-height: 40px;
}
.testimonial {
    margin-top: 40px;
    max-width: 740px;
  }



  /* ACCORDION SECTION  */


   .section {
  max-width: 740px;
  margin-block: 80px;
}
    .accordionVertical {
      flex-direction: column;
      height: auto;
      gap: 20px;
      margin-top: 40px;
    }

    .card,
    .card:nth-child(2),
    .accordionVertical:not(:hover) .card:nth-child(2),
    .accordionVertical:hover .card:hover,
    .accordionVertical:hover .card:not(:hover) {
      width: 100% !important;
      height: auto;
      flex-shrink: unset;
    }

    .card {
      min-height: 80px;
    }

    .card-collapsed,
    .card-expanded {
      position: relative;
      inset: unset;
      height: auto;
    }

    /* On mobile, always show expanded layout */
    .card-collapsed {
      display: none;
    }

    .card-expanded {
      opacity: 1 !important;
      pointer-events: all !important;
      padding: 40px 30px;
      gap: 25px;
    }
    .card-expanded .header {
  gap: 20px;
}
.card-expanded .title {
  font-size: 22px;
  line-height: 28px;
}




/* TEAM SECTION  */



.teamContainer {
  margin-top: 50px;
  padding-inline: 15px;
max-width: 740px;
}

.serviceHeading.teamHeading {
  max-width: 400px;
}
.teamSection {
  padding-block: 80px;
}
.teamBox {
  padding-block: 60px;
}
.teamInfo a {
  font-size: 28px;
  line-height: 33px;
}
.teamInfo span {
  font-size: 16px;
  line-height: 24px;
}
.teamImg {
  inset: 0px 95px 0 auto;
}
.teamImg img {
  width: 70%;
  border-radius: 8px;
}



/* HERO SECTION  */


.heroSection {
  padding-inline: 15px;
}
.heroInner {
  max-width: 740px;
  gap: 40px;
  flex-direction: column;
}
.heroBox.heroText {
  gap: 25px;
}
.heroHeading {
  font-size: 42px;
  line-height: 50px;
  max-width: 600px;
}
.heroDesc {
  max-width: 600px;
  color: #fffbeb;
}
.reviewBox {
  padding: 20px;
}
.reviewHeading {
  font-size: 20px;
  line-height: 26px;
}














}



@media (max-width:768px) {
    .serviceCard {
    flex-basis: calc(100%);
}
.serviceSection {
  padding-inline: 15px;
  margin-block: 40px;
}
.serviceHeading {
  font-size: 28px;
  max-width: 400px;
}
.servicesContainer {
  margin-top: 40px;
}
.innerCard {
  padding: 20px 20px;
}
.sCardH {
  font-size: 26px;
}





/* BLOG SECTION  */


.blogSection {
  padding-inline: 15px;
} 
.blogCard {
  flex-basis: calc(100%);
}
.bTitle {
  font-size: 20px;
}
.blogText {
  margin-top: 18px;
  gap: 8px;
}
.blogSection {
  margin-block: 60px;
}
.blogContainer {
  margin-top: 40px;
}

/* BRAND LOGO SECTION  */


.brandSection {
  padding-block: 60px;
}
.marqueeTopOne {
  gap: 30px;
}

.brandLogo img {
  width: 80%;
}
.brandInner {
  gap: 30px;
}


/* TESTIMONIAL SECTION  */


.testimonialSection {
  padding-block: 60px;
  border-radius: 30px;
}
.serviceHeading.testimonialHeading {
  line-height: 36px;
}
.testimonial {
    margin-top: 40px;
    max-width: 630px;
  }
   .testBox {
    flex-basis: calc(100% - 8px);
  }

 .testDesc {
    margin-block: 16px;
  }



  /* ACCORDION SECTION  */ 



   .section {
  max-width: 630px;
  margin-block: 60px;
  padding-inline: 15px;
}
 .card-expanded {
      padding: 30px 30px;
    }
    .card-expanded .title {
    font-size: 20px;
    line-height: 26px;
    text-align: left;
  }
   .card-expanded {
    gap: 20px;
  }


  /* TEAM SECTION  */


  .teamSection {
    padding-block: 60px;
  }
   .teamBox {
     border-bottom: unset;
    flex-direction: column;
    padding-block: 0px;
    gap: 13px;
    flex-basis: calc(50% - 10px);
  }
  .teamContainer {
    margin-top: 40px;
    max-width: 630px;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 20px;
  }

  .teamImg {
    inset: unset;
    position: unset;
    transform: unset;
    order: -1;
  }
  .teamImg img {
    width: 100%;
    border-radius: 8px;
    transform: unset;
  }

.teamImg:hover img {
  transform: unset;
}
 .teamInfo a {
    font-size: 24px;
    line-height: 28px;
  }
    .teamInfo span {
    font-size: 14px;
    line-height: 21px;
  }
.slash {
  display: none;
}
.teamInfo {
  align-items: flex-start;
  gap: 10px;
  flex-direction: column;
}



/* HERO SECTION  */

  .heroInner {
    max-width: 630px;
  }
  .heroBox.heroText {
    gap: 16px;
  }
 .heroHeading {
    font-size: 38px;
    line-height: 45px;
  }

.reviewBox {
  left: auto;
  right: 20px;
  bottom: 20px;
}

  .heroHeading {
    font-size: 32px;
    line-height: 38px;
  }
 .heroInner {
    gap: 30px;
  }
.mainBack img {
  width: 100%;
}
 .reviewBox {
    padding: 15px;
  }
.rImg {
  margin-left: -10px;
}
.reivewImg img {
  width: 45%;
}
.reviewOne {
  gap: 16px;
}
.reviewTwo {
  gap: 16px;
}
  .reviewBox {
    position: unset;
    max-width: 100%;
  }
.seeReview {
  max-width: unset;
}




/* HEADER SECTION  */



  @media (max-width: 768px) {
    nav { border-radius: 999px; padding: 8px 8px 8px 12px; }
    .nav-links, .cta-btn { display: none; }
    .hamburger { display: flex; }
    .drawer { display: flex; }
  }




/* FOOTER SECTION  */




@media (max-width: 768px) {
      footer { padding: 0 20px; }

      .footer-top {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 16px;
        padding: 24px 0;
      }

        .footer-tagline {
    font-size: 26px;
    line-height: 31px;
  }

      .footer-mid {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 32px 0;
      }

      .newsletter-title { font-size: 26px;
    line-height: 31px; }
      .newsletter-form { max-width: 100%; }

      .nav-col .links-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px 40px;
      }

      .nav-col.single-col .links-grid {
        grid-template-columns: 1fr;
      }

      .footer-bottom {
        flex-direction: column;
        gap: 16px;
        text-align: center;
        padding: 20px 0;
      }
    }











}



@media (max-width:480px) {
    .keyInnerLeft .imageBox {
  background-color: #2dad7a;
  border-radius: 30px;
  max-width: 500px;
  display: flex;
  min-height: 340px;
  max-height: 460px;
  position: absolute;
  inset: auto 0% 0%;
}


/* TEAM SECTION  */


 .teamInfo a {
    font-size: 20px;
    line-height: 20px;
  }
  .teamInfo {
    gap: 8px;
  }
 .teamBox {
    gap: 18px;
  }

  .teamBox {
    flex-basis: calc(100% - 15px);
  }
 .teamContainer {
    gap: 30px;
  }








}