/** @format **/

/* =============================================
   1900px — Ultra-wide tweaks
   ============================================= */
@media screen and (max-width: 1900px) {}

/* =============================================
   1400px — Large desktops
   ============================================= */
@media screen and (max-width: 1400px) {}

/* =============================================
   1399px — Stellarnav font size
   ============================================= */
@media screen and (max-width: 1399px) {
  .mainft .ftlogo {
    max-width: 18.3rem;
  }

  .mainft .ftmain {
    gap: 2rem;
  }

  .mainft .ftinfo,
  .mainft .ftcontact {
    max-width: 17.7rem;
  }
}

/* =============================================
   1200px — Desktop-to-tablet transition
   ============================================= */
@media screen and (max-width: 1200px) {}

/* =============================================
   1199px — Refined tablet
   ============================================= */
@media screen and (max-width: 1199px) {

  /* Reduce footer top padding */
  .mainft {
    padding: 5rem 0 1.875rem;
  }

  /* Allow footer columns to wrap onto multiple rows */
  .mainft .ftmain {
    flex-wrap: wrap;
    row-gap: 3rem;
  }

  /* Logo takes its own full-width row */
  .mainft .ftlogo {
    flex: 0 0 100%;
    max-width: 11.3125rem;
  }

  /* Remaining columns share the row evenly */
  .mainft .ftinfo,
  .mainft .ftcontact,
  .mainft .ftnews {
    flex: 1 1 15rem;
    max-width: none;
  }

  .mainft .ftlogo {
    flex: 0 0 100%;
    max-width: 100%;
    text-align: center;
  }

  .mainft .ftmain {
    padding-bottom: 4.5rem;
  }

  .whychoose .wc-media {
    flex: 0 0 40.125rem;
    max-width: 28.125rem;
  }

  .whychoose .wc-features {
    gap: 1rem;
  }
}

/* =============================================
   991px — Tablet portrait / small tablet
   ============================================= */
@media screen and (max-width: 991px) {
  .mainhd .headerrow .navigation .stellarnav>ul>li>a {
    font-size: 1rem;
  }

  /* Banner stacks: text + members, then phone centered below */
  .banner {
    min-height: auto;
    padding: 2.5rem 0 3rem;
    margin-bottom: 320px;
  }

  .banner .bannercont {
    max-width: 100%;
  }

  .banner .bannercont p {
    max-width: 100%;
  }

  .banner .bannermembers {
    position: static;
    left: auto;
    bottom: auto;
    margin-top: 2rem;
  }

  .banner .bannerphone {
    margin: 2.5rem auto 0;
  }

  /* How Kaidi Works: stack heading -> steps -> media -> CTA */
  .howworks .container {
    display: flex;
    flex-direction: column;
  }

  .howworks .row,
  .howworks .col-lg-6,
  .howworks .hkw-right {
    display: contents;
  }

  .howworks .hkw-head {
    order: 0;
    text-align: center;
    margin-bottom: 2.5rem;
  }

  .howworks .hkw-steps {
    order: 1;
  }

  .howworks .hkw-media {
    order: 2;
    width: 100%;
    max-width: 30rem;
    margin: 2.5rem auto 0;
    aspect-ratio: auto;
    height: auto;
    padding: 0.75rem 0;
  }

  .howworks .hkw-phone {
    width: 76%;
    height: auto;
  }

  .howworks .hkw-btn {
    order: 3;
    align-self: center;
    margin-top: 6rem;
  }

  .howworks .hkw-step-text {
    flex-direction: column;
    gap: 0.5rem;
  }

  .howworks .hkw-step-text h4 {
    flex: none;
  }

  /* Why Choose Kaidi: stack heading -> image -> features (single col), hide CTA */
  .whychoose .wc-inner {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
  }

  .whychoose .wc-left {
    display: contents;
  }

  .whychoose .wc-head {
    order: 1;
    text-align: center;
    margin-bottom: 0;
  }

  .whychoose .wc-media {
    order: 2;
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
  }

  .whychoose .wc-features {
    order: 3;
    gap: 1.75rem;
    margin-bottom: 0;
  }

  .whychoose .wc-item {
    flex: 0 0 100%;
  }

  .whychoose .wc-btn {
    display: none;
  }

  /* Features: single column, illustration stacks below text (auto height) */
  .features .features-grid {
    /* grid-template-columns: 1fr;
    grid-auto-rows: auto;
    grid-template-areas: none; */
    display: flex;
    flex-wrap: wrap;
  }

  .features .features-grid .feat-card {
    padding: 1.5rem;
    flex: 0 0 calc(50% - 15px);
  }

  .features .features-grid .feat-card .feat-content {
    max-width: 100%;
  }

  .features .features-grid .feat-card .feat-visual {
    position: static;
    inset: auto;
    width: auto;
    height: auto;
    margin: 1.5rem -1.5625rem -1.5625rem;
    transform: none;
    text-align: center;
  }

  .features .features-grid .feat-card.feat-events .feat-visual {
    margin: 1.5rem 0 0;
  }

  .features .features-grid .feat-card .feat-visual img {
    max-width: 100%;
    height: auto;
    display: inline-block;
  }

  /* Explore: liquid grid (6 -> 2 cols) */
  .explore .explore-grid {
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  }

  /* Testimonials: liquid grid (3 -> 1 col) */
  .testimonials .testi-grid {
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  }

  /* Notify: content spans full width, phones drop below and center */
  .notify .notifycont {
    max-width: 100%;
    margin-bottom: 3rem;
  }

  .notify .notifyphones {
    margin: 0 auto;
  }

  .howworks.sectionspacing {
    /* padding-top: 400px; */
    padding-bottom: 0;
  }

  .howworks .hkw-steps .hkw-step .hkw-step-text h4 {
    flex: auto;
  }

  .howworks .hkw-media .hkw-phone .hkw-video {
    width: 100%;
    max-width: 100%;
  }

  .howworks .hkw-media .hkw-phone {
    position: relative;
    height: 100%;
    aspect-ratio: auto;
    margin: 0 0 -60px 0;
    z-index: 2;
    overflow: hidden;
    border-radius: 50px;
  }

  .howworks .hkw-steps .hkw-step .hkw-step-text {
    gap: 10px;
  }
}

/* =============================================
   767px — Mobile landscape / large phone
   ============================================= */
@media screen and (max-width: 767px) {
  .sectionspacing {
    padding: 4rem 0;
  }

  /* Mobile header: hamburger left, logo center, call button right */
  .mainhd .headerrow .navigation {
    order: 1;
  }

  .mainhd .headerrow .logo {
    order: 2;
    margin: 0 auto;
    width: 9.25rem;
    height: 3.25rem;
    flex-shrink: 0;
    aspect-ratio: 37 / 13;
  }

  .mainhd .headerrow .contact {
    order: 3;
  }

  /* hamburger */
  .mainhd .navigation .stellarnav .menu-toggle {
    background: transparent;
    padding: 0;
    border-radius: 0;
  }

  .mainhd .navigation .stellarnav .menu-toggle span.bars span {
    width: 1.4375rem;
    height: 0.1875rem;
    background: var(--navy, #171459);
  }

  /* round call button */
  .mainhd .contact .btn {
    min-width: 0;
    width: 2.8125rem;
    height: 2.8125rem;
    padding: 0;
    border-radius: 50%;
  }

  .mainhd .contact .btn .btn-text {
    display: none;
  }

  .mainhd .contact .btn i {
    display: inline-block !important;
    font-size: 1rem !important;
    display: block !important;
  }

  .mainhd .headerrow .navigation .stellarnav>ul {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: clamp(1rem, 2.2vw, 2.5rem);
    flex-direction: column;
  }

  .stellarnav.mobile>ul>li {
    display: block;
    width: 100%;
  }

  .howworks .hkw-steps .hkw-step .hkw-step-text h4 {
    flex: 0 0 auto;
  }

  .howworks .hkw-media .hkw-phone .hkw-video {
    width: 100%;
    max-width: 20.9375rem;
  }

  .stellarnav.left.mobile.current-menu-item ul {
    display: flex !important;
  }

  .mainhd .navigation .stellarnav.mobile>ul>li>a {
    display: block;
    width: 100%;
  }

  /* mobile slide menu links */
  .mainhd .navigation .stellarnav.mobile>ul>li>a {
    padding: 0.75rem 1.25rem;
    color: var(--text-primary, #1e1e1e);
    font-family: var(--font-body, "Mulish", sans-serif);
    font-size: 1.125rem;
  }

  .mainhd .navigation .stellarnav.mobile>ul>li>a:after {
    display: none;
  }

  /* Banner mobile type */
  .banner h1 {
    font-size: 3rem;
  }

  /* Waitlist heading drops forced line break, tighten card padding */
  .waitlist .waitlisthead h2 br {
    display: none;
  }

  .waitlist .waitlistcard {
    padding: 1.875rem 1rem;
  }

  /* Stack footer columns vertically */
  .mainft .ftmain {
    flex-direction: column;
    row-gap: 2.5rem;
  }

  .mainft .ftinfo,
  .mainft .ftcontact,
  .mainft .ftnews {
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* Tighten copyright line height */
  .mainft .ftbottom p {
    line-height: 1.5rem;
  }

  /* Notify: mobile heading + single-column benefits */
  .notify h2 {
    font-size: 1.875rem;
  }

  .notify .notifylist {
    grid-template-columns: 1fr;
  }

  /* Notify: form fields stack full width */
  .notify .notifyform .row {
    --bs-gutter-x: 0;
  }

  .notify .notifyform .col-6 {
    width: 100%;
  }

  /* Notify: phones become a Swiper slider */
  .notify .notifyphones {
    position: static;
    width: 100%;
    max-width: none;
    margin: 0 0 1.25rem;
    aspect-ratio: auto;
    overflow: hidden;
    padding-bottom: 2.5rem;
    position: relative;
  }

  .notify .notifyphones .swiper-wrapper {
    display: flex;
    align-items: center;
  }

  .notify .notifyphones .phoneshot {
    position: static;
    top: auto;
    left: auto;
    width: 15rem;
    height: auto;
    aspect-ratio: 256 / 535;
  }

  .notify .notifyphones .swiper-pagination {
    display: block;
  }

  .notify .notifyphones .swiper-pagination-bullet-active {
    background: var(--primary, #11a6ac);
  }

  /* FAQ: mobile heading size */
  .faq .sechead h2 {
    font-size: 1.875rem;
  }

  /* Stack FAQ columns into one */
  .faq .faqcols {
    flex-direction: column;
    gap: 0;
  }

  .faq .faq_group {
    width: 100%;
  }

  .faq .faq_item:not(:last-child) {
    margin-bottom: 1.5rem;
  }

  .faq .faq_group:first-child .faq_item:last-child {
    margin-bottom: 1.5rem;
  }

  .notify .notifyphones .phoneshot.side,
  .notify .notifyphones .phoneshot.center,
  .notify .notifyphones .phoneshot.right {
    width: max-content;
    height: auto;
    max-height: 550px;
  }

  /* .howworks.sectionspacing {
    padding-top: 41.4375rem;
  } */

  /* .howworks.sectionspacing {
    padding-top: 580px;
  } */

  .howworks .hkw-steps .hkw-step {
    align-items: flex-start;
  }

  .howworks .hkw-steps .hkw-step .hkw-step-text p {
    color: #000;
    font-family: Mulish;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.375rem;
  }

  .whychoose .wc-features .wc-item {
    flex: 0 0 100%;
  }

  .features .features-grid {
    display: flex;
    flex-direction: column;
  }

  .mainft {
    padding: 4rem 0 1.875rem;
    text-align: center;
  }

  .mainft .social {
    justify-content: center;
  }

  .mainft .ftlogo {
    order: 1;
  }

  .mainft .ftcol.ftinfo {
    order: 2;
  }

  .mainft .ftcol.ftcontact {
    order: 4;
  }

  .mainft .ftcol.ftnews {
    order: 3;
  }

  .banner .bannerphone .phonescreen {
    overflow: auto;
  }

  .banner .bannermembers {
    margin-top: 14rem;
  }

  .banner {
    min-height: auto;
    padding: 5.25rem 0 3rem;
    margin-bottom: 650px;
  }

  .features .feat-head {
    margin: 0 auto 2.25rem;
  }

  .notify .notifycont {
    margin-bottom: 0;
  }

  .notify.sectionspacing {
    padding-bottom: 0;
  }

  .testimonials .testi-card {
    padding: 1.5rem;
  }

  .howworks .hkw-media .hkw-phone {
    border-radius: 20px;
  }

  .howworks.sectionspacing {
    padding-top: 0;
  }

  .testimonials .testi-cta {
    margin-top: 2.37rem;
  }

  .explore .explore-cta {
    margin-top: 1.44rem;
  }

  .mainhd .headerrow .contact .btn {
    padding: 0;
  }

  .howworks .hkw-steps .hkw-step .hkw-step-text {
    gap: 10px;
  }

  .explore .explore-head h2 {
    max-width: 390px;
    margin-left: auto;
    margin-right: auto;
  }

  .explore .explore-head {
    margin: 0 auto 2rem;
  }

  .notify .notifyformhead h3 {
    font-family: Inter;
    font-size: 1.875rem;
    font-style: normal;
    font-weight: 800;
    line-height: 1.75906rem;
  }

  .waitlist .waitlistcard .wlconsent .wpcf7-list-item-label {
    font-size: 12px;
    line-height: 16px;
    color: #1e1e1e;
  }


}

/* =============================================
   639px — Small phone / narrow
   ============================================= */
@media screen and (max-width: 639px) {

  .notify .notifyphones .phoneshot.side,
  .notify .notifyphones .phoneshot.center,
  .notify .notifyphones .phoneshot.right {
    width: 100%;
    max-width: 16.125rem;
    height: auto;
    max-height: none;
  }
}

/* =============================================
   576px — Smallest mobile
   ============================================= */
@media screen and (max-width: 576px) {

  /* Notify benefits stack to a single column */
  .notify .notifylist {
    grid-template-columns: 1fr;
  }

  .howworks.sectionspacing {
    padding-top: 0;
  }

  .banner {
    margin-bottom: 520px;
  }
}