/* ── BANNER ── */
      .banner-container {
        width: 100%;
        background-color: white;
        position: relative;
        overflow: hidden;
        min-height: 100vh;
        display: flex;
        align-items: center;
      }

      /* Desktop keeps 16/8 ratio, mobile just flows */
      @media (min-width: 768px) {
        .banner-container {
          aspect-ratio: 16 / 8;
          min-height: unset;
        }
      }

      .image-clip {
        clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 0% 100%);
      }

      .teal-accent {
        clip-path: polygon(20% 0%, 35% 0%, 15% 100%, 0% 100%);
      }

      .heading-font {
        font-family: "Montserrat", sans-serif;
        font-weight: 800;
      }

      /* ── ABOUT ── */
      .modern-card {
        background: white;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.08);
      }

      /* ── HEXAGONS ── */
      /* ── WHY CHOOSE US — Desktop honeycomb ── */
      .honeycomb-grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        max-width: 1200px;
        margin: 0 auto;
        padding-bottom: 40px;
      }
      .hexagon-wrapper {
        width: 280px;
        height: 250px;
        margin: -15px -28px;
        display: flex;
        align-items: center;
        justify-content: center;
        filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.12));
      }
      .hexagon-wrapper.offset {
        margin-top: calc(-15px + 125px);
      }

      .hexagon {
        clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
        background: white;
        transition: all 0.35s ease;
        width: 100%;
        height: 100%;
      }
      .hexagon:hover {
        background: #f0fdff;
        transform: translateY(-8px);
        filter: drop-shadow(0 12px 28px rgba(0, 151, 178, 0.25));
      }
      .hexagon:hover .hex-icon-bg {
        background-color: #0097B2;
        color: white;
      }

      .hex-content {
        text-align: center;
        padding: 28px 16px;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 14px;
      }

      .hex-icon-bg {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        background-color: #e0f7fb;
        color: #0097B2;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        flex-shrink: 0;
      }

      .hex-title {
        font-size: 0.95rem;
        font-weight: 700;
        color: #1e293b;
        letter-spacing: 0.01em;
        line-height: 1.3;
      }

      /* ── Mobile: clean 2-col card grid ── */
      @media (max-width: 767px) {
        .honeycomb-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 14px;
          padding: 0 16px 32px;
        }
        .hexagon-wrapper,
        .hexagon-wrapper.offset {
          width: 100%;
          height: auto;
          margin: 0;
          filter: none;
        }
        .hexagon {
          clip-path: none;
          border-radius: 20px;
          border: 1.5px solid #e2e8f0;
          background: white;
          box-shadow: 0 4px 16px rgba(0,0,0,0.07);
          aspect-ratio: 1 / 1;
          width: 100%;
          height: auto;
        }
        .hexagon:hover {
          transform: translateY(-4px);
        }
        .hex-content {
          padding: 20px 12px;
          gap: 10px;
        }
        .hex-icon-bg {
          width: 52px;
          height: 52px;
        }
        .hex-title {
          font-size: 0.8rem;
        }
      }

      /* ── FAQ ── */
      .faq-banner {
        background-color: #0097b2;
        padding: 20px 80px;
      }
      @media (max-width: 767px) {
        .faq-banner {
          padding: 16px 24px;
        }
        .faq-banner h1 {
          font-size: 2.25rem !important;
        }
      }
      .faq-banner h1 {
        font-size: 4rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        font-weight: 1000;
        margin: 0;
        color: white;
      }
      .accordion-content {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease-out, padding 0.3s ease;
      }
      .accordion-item.active .accordion-content {
        max-height: 500px;
        padding-bottom: 24px;
      }
      .accordion-item {
        border-bottom: 1px solid #e5e1d8;
      }
      .arrow-icon {
        transition: transform 0.3s ease;
      }
      .accordion-item.active .arrow-icon {
        transform: rotate(180deg);
      }
      .model-image {
        width: 100%;
        height: auto;
        display: block;
        object-fit: cover;
      }

      /* ── BANNER MOBILE overrides ── */
      @media (max-width: 767px) {
        /* Stack banner columns vertically */
        .banner-grid {
          display: flex !important;
          flex-direction: column;
        }
        .banner-text-col {
          width: 100% !important;
          padding: 60px 24px 32px !important;
          order: 1;
        }
        .banner-image-col {
          width: 100% !important;
          height: 300px !important;
          position: relative !important;
          order: 2;
        }
        .banner-heading {
          font-size: 3rem !important;
          line-height: 0.9 !important;
        }
        .banner-sub {
          font-size: 1.1rem !important;
        }
        .banner-contacts {
          flex-direction: column !important;
          gap: 4px !important;
          margin-top: 32px !important;
        }
        /* hide decorative accent bar on mobile */
        .accent-bar { display: none; }
        /* teal accent behind image */
        .teal-accent {
          clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
          transform: none !important;
        }
      }
      
      
      /* Optional: Adds a smooth fade to the non-active slides for a premium feel */
  .serviceSwiper .swiper-slide {
    opacity: 0.4;
    transition: opacity 0.5s ease;
  }
  .serviceSwiper .swiper-slide-active,
  .serviceSwiper .swiper-slide-next {
    opacity: 1;
  }

  /* Position arrows at the very edges of the screen */
  .swiper-prev-btn {
    left: 20px;
  }
  .swiper-next-btn {
    right: 20px;
  }
  @media (min-width: 1280px) {
    .swiper-prev-btn { left: 40px; }
    .swiper-next-btn { right: 40px; }
  }