/* =============================================================
   AZEEZIA VIDEO HERO — minimal, screenshot-inspired
   ============================================================= */

/* Nunito is now the site's font, loaded once sitewide from
   Web/default.php — the two Google Font imports this page used to load
   for its own headings and body text are no longer needed and were
   removed here. */

/* ── Palette pulled from the Azeezia logo (this page only) ──
   Deep blue = dominant swirl/wordmark colour.
   Sky blue  = light gradient highlight inside the swirl.
   Lime      = small accent colour inside the mark.
   Navy      = near-black used for logo text. */
:root {
  --az-demo-blue: #0e58a5;
  --az-demo-blue-dark: #0a3f78;
  --az-demo-blue-light: #b4d8e4;
  --az-demo-lime: #8dc63f;
  --az-demo-navy: #17233a;
}

/* ── Light "bento" hero: text block + a mosaic of small cards (video is one tile, not the whole backdrop) ── */
.az-vhero2 {
  position: relative;
  overflow: hidden;
  background: #ffffff;
}

.az-vhero2__wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 40px clamp(10px, 1.5vw, 20px) 90px clamp(20px, 5vw, 56px);
  display: grid;
  grid-template-columns: minmax(320px, 480px) 1fr;
  align-items: center;
  gap: clamp(24px, 4vw, 48px);
}

.az-vhero2__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "Nunito Sans", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--az-demo-navy);
  background: rgba(14, 88, 165, 0.08);
  border: 1px solid rgba(14, 88, 165, 0.16);
  border-radius: 50px;
  padding: 9px 18px;
  margin-bottom: 24px;
}

.az-vhero2__eyebrow i {
  color: var(--az-demo-blue);
  font-size: 13px;
}

.az-vhero2__title {
  font-family: "Nunito Sans", sans-serif;
  font-weight: 800;
  font-size: clamp(2.4rem, 4vw, 3.6rem);
  line-height: 1.15;
  color: var(--az-demo-navy);
  letter-spacing: -0.5px;
  margin-bottom: 20px;
}

.az-vhero2__desc {
  font-family: "Nunito Sans", sans-serif;
  font-size: 17px;
  line-height: 1.75;
  color: rgba(23, 35, 58, 0.62);
  max-width: 460px;
  margin-bottom: 34px;
}

.az-vhero2__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
}

.az-vhero2__btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  justify-content: center;
  background: var(--az-demo-navy);
  color: #ffffff;
  font-family: "Nunito Sans", sans-serif;
  font-size: 15px;
  font-weight: 700;
  padding: 8px 8px 8px 26px;
  border-radius: 50px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.az-vhero2__btn:hover {
  /* No more background colour swap on hover — the lift/shadow still gives
     feedback, and the arrow below carries the rest of the hover effect. */
  color: #ffffff;
  text-decoration: none;
  transform: translateY(-3px);
  box-shadow: 0 16px 32px rgba(23, 35, 58, 0.2);
}

.az-vhero2__btn-arrow {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--az-demo-lime);
  color: var(--az-demo-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  transition: transform 0.3s ease;
}

.az-vhero2__btn-arrow i {
  transform: rotate(-45deg);
  transition: transform 0.3s ease;
}

/* Hover effect now lives on the arrow instead of the button background:
   the circle slides right and the arrow straightens out, like it's about
   to fire off. */
.az-vhero2__btn:hover .az-vhero2__btn-arrow {
  transform: translateX(5px) scale(1.08);
}

.az-vhero2__btn:hover .az-vhero2__btn-arrow i {
  transform: rotate(0deg);
}

/* ── Bento mosaic: video tile + two stat tiles ── */
.az-vhero2__bento {
  height: clamp(420px, 42vw, 560px);
}

.az-vhero2__bento-video {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 24px 50px rgba(23, 35, 58, 0.16);
}

.az-vhero2__bento-video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.05) contrast(1.05);
}

.az-vhero2__bento-video-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4, 12, 26, 0.05) 0%, rgba(4, 12, 26, 0.1) 60%, rgba(4, 12, 26, 0.4) 100%);
}

.az-vhero2__bento-play {
  position: absolute;
  bottom: 18px;
  left: 18px;
  z-index: 2;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--az-demo-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  box-shadow: 0 8px 20px rgba(2, 8, 20, 0.25);
}

/* The header (.az-vhead) and full-screen menu overlay (.az-vmenu) used
   to be styled here — this page was the original design source before
   the header was adopted site-wide into css/web/header.css. Both blocks
   were left behind after that move, and being loaded AFTER header.css
   on this page, their stale copies silently overrode any later fix made
   only in header.css (that's how the mobile header/menu overflow bug
   went unfixed the first time). header.css is the single source now —
   removed the duplicates here. */

/* =============================================================
   RESPONSIVE
   ============================================================= */

@media (max-width: 991px) {
  .az-vhero2__wrap {
    grid-template-columns: 1fr;
    padding: 30px 20px 50px;
  }

  .az-vhero2__bento {
    height: 380px;
  }
}

@media (max-width: 767px) {
  .az-vhero2__title {
    font-size: 2.1rem;
  }

  .az-vhero2__desc {
    font-size: 15.5px;
  }

  .az-vhero2__bento {
    height: 280px;
  }
}

/* =============================================================
   DEPARTMENT SHOWCASE CAROUSEL
   ============================================================= */

.az-dshow {
  position: relative;
  z-index: 2;
  padding: 56px clamp(20px, 5vw, 56px) 40px;
}

.az-dshow__wrap {
  max-width: 1400px;
  margin: 0 auto;
}

.az-dshow__card {
  position: relative;
  border-radius: 32px;
  overflow: hidden;
  /* White, not the old navy gradient. Every slide in this design paints its
     own light wash (--dshow-blend, #FFFFFF on the department slides; plain
     white on the banners), so the card itself is only ever visible through a
     slide that is not fully opaque. During the 0.7s crossfade BOTH slides sit
     part-transparent for a moment, and a dark card read through them as a
     black flash around the edges on every slide change. */
  background: #ffffff;
  box-shadow: 0 24px 60px rgba(2, 12, 26, 0.35);
  min-height: 400px;
}

.az-dshow__slides {
  position: relative;
  min-height: 400px;
}

.az-dshow__slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity 0.7s ease, transform 0.7s ease, background 0.4s ease;
  /* Each slide can set --dshow-blend inline, sampled from its own photo,
     so the card's wash colour follows whichever image is showing instead
     of one fixed tone that only suits some photos. */
  background: var(--dshow-blend, transparent);
}

.az-dshow__slide--active {
  position: relative;
  height: 400px;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ── Image-only promo slide ──
   The artwork spans the full width of the card with no padding, text or
   chrome. Height is left to follow the image's own aspect ratio (rather
   than the 400px the department slides use) so the banner is never
   cropped; line-height:0 removes the inline-image descender gap. */
.az-dshow__slide--banner {
  display: block;
  padding: 0;
  line-height: 0;
  font-size: 0;
  background: #ffffff;
}

.az-dshow__slide--banner.az-dshow__slide--active {
  height: auto;
}

.az-dshow__banner-img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  border: 0;
}

/* The 400px floor exists for the department slides; on a narrow viewport the
   banner is shorter than that, which would leave a strip of the card's dark
   gradient showing under it. Drop the floor while the banner slide is the
   active one so the card hugs the image exactly. */
.az-dshow__card:has(> .az-dshow__slides > .az-dshow__slide--banner.az-dshow__slide--active),
.az-dshow__slides:has(> .az-dshow__slide--banner.az-dshow__slide--active) {
  min-height: 0;
}

/* ── Text side ── */
.az-dshow__text {
  flex: 0 0 46%;
  max-width: 46%;
  padding: 40px clamp(28px, 5vw, 70px);
}

.az-dshow__title {
  font-family: "Nunito Sans", sans-serif;
  font-weight: 700;
  font-size: clamp(2rem, 3.6vw, 3.1rem);
  line-height: 1.15;
  color: #ffffff;
  margin-bottom: 24px;
}

.az-dshow__desc {
  font-family: "Nunito Sans", sans-serif;
  font-size: 17px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.75);
  max-width: 420px;
  margin-bottom: 36px;
}

.az-dshow__actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.az-dshow__btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: #ffffff;
  color: var(--az-demo-blue-dark);
  font-family: "Nunito Sans", sans-serif;
  font-size: 15px;
  font-weight: 700;
  padding: 8px 8px 8px 28px;
  border-radius: 50px;
  text-decoration: none;
  transition: background 0.3s ease, color 0.3s ease;
}

.az-dshow__btn:hover {
  /* Colour swap removed — the arrow below (already darkening on hover)
     carries the feedback instead. */
  text-decoration: none;
}

.az-dshow__btn-arrow {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--az-demo-lime);
  color: var(--az-demo-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: background 0.3s ease;
}

.az-dshow__btn-arrow i {
  transform: rotate(-45deg);
}

.az-dshow__btn:hover .az-dshow__btn-arrow {
  background: #79b331;
}

/* ── Light-photo variant: dark text/button for slides whose photo is
   pale rather than dark navy (e.g. the washed-out neurology image) ── */
.az-dshow__slide--light .az-dshow__title {
  color: var(--az-demo-navy);
}

.az-dshow__slide--light .az-dshow__desc {
  color: rgba(23, 35, 58, 0.72);
}

.az-dshow__slide--light .az-dshow__btn {
  background: var(--az-demo-navy);
  color: #ffffff;
}

.az-dshow__slide--light .az-dshow__btn:hover {
  color: #ffffff;
}

/* ── Media side ── */
.az-dshow__media {
  position: relative;
  flex: 1;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.az-dshow__media-glow {
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.16) 0%, rgba(180, 216, 228, 0.1) 55%, rgba(180, 216, 228, 0) 75%);
  filter: blur(4px);
}

.az-dshow__media-ring {
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.16);
}

.az-dshow__media img {
  position: relative;
  z-index: 1;
  width: 170px;
  height: 170px;
  object-fit: contain;
  filter: drop-shadow(0 18px 26px rgba(0, 0, 0, 0.35));
}

/* ── Photo variant: real department photography, blended into the card ── */
.az-dshow__media--photo {
  align-self: stretch;
  height: 100%;
  position: relative;
}

.az-dshow__media--photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: none;
  z-index: 1;
  /* Fade the edge nearest the text panel so the photo dissolves into the
     card background instead of showing a hard rectangular seam. */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.55) 16%, #000 42%);
  mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.55) 16%, #000 42%);
}

/* Colour-matched wash over the same edge — uses this slide's own
   --dshow-blend colour (sampled from its photo), faded out with a mask
   so the transition reads as a blend of tone, not just see-through. */
.az-dshow__media--photo::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: var(--dshow-blend, #072a4d);
  -webkit-mask-image: linear-gradient(to right, #000 0%, rgba(0, 0, 0, 0.85) 10%, rgba(0, 0, 0, 0.45) 24%, transparent 46%);
  mask-image: linear-gradient(to right, #000 0%, rgba(0, 0, 0, 0.85) 10%, rgba(0, 0, 0, 0.45) 24%, transparent 46%);
}

/* ── Carousel dots ── */
.az-dshow__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 28px;
}

.az-dshow__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: none;
  background: rgba(14, 88, 165, 0.25);
  padding: 0;
  cursor: pointer;
  transition: all 0.3s ease;
}

.az-dshow__dot--active {
  width: 30px;
  border-radius: 5px;
  background: var(--az-demo-blue);
}

/* =============================================================
   DEPARTMENT SHOWCASE — RESPONSIVE
   ============================================================= */

@media (max-width: 991px) {
  .az-dshow__card,
  .az-dshow__slides {
    min-height: auto;
  }

  .az-dshow__slide {
    position: relative;
    flex-direction: column-reverse;
  }

  .az-dshow__slide--active {
    height: auto;
  }

  .az-dshow__slide:not(.az-dshow__slide--active) {
    display: none;
  }

  .az-dshow__text,
  .az-dshow__media {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .az-dshow__text {
    padding: 40px 28px 10px;
  }

  .az-dshow__media {
    padding: 30px 0 10px;
  }

  .az-dshow__media--photo {
    height: 240px;
    padding: 0;
  }

  .az-dshow__media-glow {
    width: 280px;
    height: 280px;
  }

  .az-dshow__media-ring {
    width: 200px;
    height: 200px;
  }

  .az-dshow__media img {
    width: 130px;
    height: 130px;
  }
}

@media (max-width: 575px) {
  .az-dshow {
    margin-top: -60px;
    padding-bottom: 50px;
  }

  .az-dshow__card {
    border-radius: 22px;
  }

  .az-dshow__title {
    font-size: 1.7rem;
  }

  .az-dshow__desc {
    font-size: 15px;
  }
}

/* =============================================================
   ABOUT SECTION — centered banner + floating stat cards
   ============================================================= */

.az-about3 {
  background: #ffffff;
  padding: 60px clamp(20px, 5vw, 56px) 56px;
}

.az-about3__wrap {
  /* Matches the 1400px wrap every other section on this page uses
     (.az-dshow__wrap, .az-deptgrid__wrap, .az-pkg__wrap, .az-news__wrap,
     .az-cta__wrap) so the About block's banner and stat cards line up on
     the same left/right edge as the blocks above and below it. */
  max-width: 1400px;
  margin: 0 auto;
}

/* ── Centered colour banner ── */
.az-about3__banner {
  position: relative;
  overflow: hidden;
  text-align: center;
  border-radius: 36px;
  padding: 72px clamp(24px, 6vw, 90px) 130px;
  background: #ebf8fa;
  box-shadow: 0 24px 60px rgba(23, 35, 58, 0.08);
}

.az-about3__banner-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(14, 88, 165, 0.12);
  pointer-events: none;
}

.az-about3__banner-ring--a {
  width: 420px;
  height: 420px;
  top: -220px;
  left: -140px;
}

.az-about3__banner-ring--b {
  width: 260px;
  height: 260px;
  bottom: -160px;
  right: -80px;
  border-color: rgba(141, 198, 63, 0.3);
}

.az-about3__eyebrow {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(14, 88, 165, 0.08);
  border: 1px solid rgba(14, 88, 165, 0.18);
  border-radius: 50px;
  padding: 7px 18px 7px 8px;
  font-family: "Nunito Sans", sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.3px;
  color: var(--az-demo-blue);
  margin-bottom: 26px;
}

.az-about3__eyebrow-icon {
  height: 40px;
  width: auto;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  flex-shrink: 0;
}

.az-about3__eyebrow-icon img {
  height: 100%;
  width: auto;
  display: block;
  object-fit: contain;
}

.az-about3__title {
  position: relative;
  z-index: 1;
  font-family: "Nunito Sans", sans-serif;
  font-weight: 700;
  font-size: clamp(2.3rem, 4.5vw, 3.6rem);
  line-height: 1.18;
  color: var(--az-demo-navy);
  margin-bottom: 22px;
}

.az-about3__desc {
  position: relative;
  z-index: 1;
  font-family: "Nunito Sans", sans-serif;
  font-size: 17px;
  line-height: 1.75;
  color: rgba(23, 35, 58, 0.72);
  max-width: 580px;
  margin: 0 auto 36px;
}

.az-about3__btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: var(--az-demo-navy);
  color: #ffffff;
  font-family: "Nunito Sans", sans-serif;
  font-size: 15px;
  font-weight: 700;
  padding: 8px 8px 8px 30px;
  border-radius: 50px;
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.az-about3__btn:hover {
  /* No background colour swap — the arrow's own hover animation below
     carries the feedback. */
  color: #ffffff;
  text-decoration: none;
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(23, 35, 58, 0.22);
}

.az-about3__btn-arrow {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--az-demo-lime);
  color: var(--az-demo-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: transform 0.3s ease;
}

.az-about3__btn-arrow i {
  transform: rotate(-45deg);
}

.az-about3__btn:hover .az-about3__btn-arrow {
  transform: rotate(-45deg) translate(3px, -3px);
}

/* ── Floating stat cards ── */
.az-about3__cards {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 26px;
  margin-top: -86px;
  padding: 0 clamp(0px, 3vw, 30px);
}

.az-about3__card {
  flex: 1;
  background: #ffffff;
  border-radius: 24px;
  padding: 36px 28px;
  text-align: center;
  box-shadow: 0 24px 50px rgba(23, 35, 58, 0.14);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.az-about3__card-icon {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: rgba(14, 88, 165, 0.1);
  color: var(--az-demo-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 18px;
  flex-shrink: 0;
}

/* Icon + number + label on one row (doctor card) instead of stacked */
.az-about3__card-top {
  display: flex;
  align-items: center;
  gap: 16px;
  text-align: left;
}

.az-about3__card-top .az-about3__card-icon {
  margin-bottom: 0;
}

.az-about3__card-top .az-about3__card-label {
  margin-top: 4px;
}

/* Middle card keeps the same white card body as the others, just with
   a lime icon accent instead of blue, matching the department blocks'
   Know More arrow accent. */
.az-about3__card--accent .az-about3__card-icon {
  background: rgba(141, 198, 63, 0.18);
  color: #6a9c2d;
}

.az-about3__card-num {
  font-family: "Nunito Sans", sans-serif;
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--az-demo-navy);
}

.az-about3__card-label {
  font-family: "Nunito Sans", sans-serif;
  font-size: 14.5px;
  color: #5c6472;
  margin-top: 10px;
}

.az-about3__avatars {
  display: flex;
  align-items: center;
  margin-top: 18px;
}

.az-about3__avatar {
  width: 75px;
  height: 75px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid #ffffff;
  box-shadow: 0 4px 10px rgba(23, 35, 58, 0.14);
  margin-left: -18px;
  background: #eef6fb;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--az-demo-blue);
  font-size: 20px;
  flex-shrink: 0;
}

.az-about3__avatar:first-child {
  margin-left: 0;
}

.az-about3__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.az-about3__avatar--more {
  background: var(--az-demo-lime);
  color: var(--az-demo-navy);
  font-weight: 700;
  font-size: 12px;
}

/* =============================================================
   ABOUT SECTION — RESPONSIVE
   ============================================================= */

@media (max-width: 991px) {
  .az-about3 {
    padding: 70px 24px 60px;
  }

  .az-about3__banner {
    padding: 56px 24px 150px;
    border-radius: 26px;
  }

  .az-about3__cards {
    flex-direction: column;
    margin-top: -110px;
    padding: 0;
  }
}

@media (max-width: 575px) {
  .az-about3__title {
    font-size: 1.9rem;
  }

  .az-about3__desc {
    font-size: 15.5px;
  }

  .az-about3__banner {
    padding: 48px 20px 170px;
  }

  .az-about3__cards {
    margin-top: -130px;
  }
}

/* =============================================================
   FOOTER — no longer overridden here.

   This section used to force a solid black footer with !important,
   which leaked onto any page loading this stylesheet (including the
   main home page). The site footer in css/web/footer.css now carries
   the intended light design, so the override is gone.
   ============================================================= */

/* =============================================================
   DEPARTMENT GRID — categorized, horizontally scrollable
   ============================================================= */

.az-deptgrid {
  background: #ffffff;
  padding: 56px clamp(20px, 5vw, 56px) 60px;
}

.az-deptgrid__wrap {
  max-width: 1400px;
  margin: 0 auto;
}

/* ── Header ── */
.az-deptgrid__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  flex-wrap: wrap;
  margin-bottom: 46px;
}

.az-deptgrid__head-left {
  flex: 1 1 320px;
  min-width: 280px;
}

.az-deptgrid__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(14, 88, 165, 0.08);
  border: 1px solid rgba(14, 88, 165, 0.18);
  border-radius: 50px;
  padding: 7px 18px 7px 8px;
  font-family: "Nunito Sans", sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.3px;
  color: var(--az-demo-blue);
  margin-bottom: 20px;
}

.az-deptgrid__eyebrow-icon {
  height: 40px;
  width: auto;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  flex-shrink: 0;
}

.az-deptgrid__eyebrow-icon img {
  height: 100%;
  width: auto;
  display: block;
  object-fit: contain;
}

.az-deptgrid__title {
  font-family: "Nunito Sans", sans-serif;
  font-weight: 700;
  font-size: clamp(2rem, 3.6vw, 3rem);
  line-height: 1.18;
  color: var(--az-demo-navy);
}

.az-deptgrid__titlerow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.az-deptgrid__title--oneline {
  white-space: nowrap;
}

.az-deptgrid__viewall {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: var(--az-demo-navy);
  color: #ffffff;
  font-family: "Nunito Sans", sans-serif;
  font-size: 15px;
  font-weight: 700;
  padding: 8px 8px 8px 26px;
  border-radius: 50px;
  text-decoration: none;
  transition: background 0.3s ease;
}

.az-deptgrid__viewall:hover {
  color: #ffffff;
  text-decoration: none;
}

.az-deptgrid__viewall-arrow {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--az-demo-lime);
  color: var(--az-demo-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  transition: transform 0.3s ease;
}

.az-deptgrid__viewall-arrow i {
  transform: rotate(-45deg);
  transition: transform 0.3s ease;
}

.az-deptgrid__viewall:hover .az-deptgrid__viewall-arrow {
  transform: translateX(5px) scale(1.08);
}

.az-deptgrid__viewall:hover .az-deptgrid__viewall-arrow i {
  transform: rotate(0deg);
}

/* Duplicate "View All" placed at the bottom of the listing for mobile
   only (see the 767px block below); hidden by default so desktop keeps
   the single inline copy next to the title. */
.az-deptgrid__viewall-bottomrow {
  display: none;
}

/* ── Category tabs ── */
.az-deptgrid__tabsrow {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 34px;
}

.az-deptgrid__tabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.az-deptgrid__tab {
  padding: 10px 22px;
  border-radius: 50px;
  border: 1.5px solid rgba(14, 88, 165, 0.18);
  background: #ffffff;
  color: var(--az-demo-navy);
  font-family: "Nunito Sans", sans-serif;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.az-deptgrid__tab:hover {
  border-color: var(--az-demo-blue);
  color: var(--az-demo-blue);
}

.az-deptgrid__tab--active,
.az-deptgrid__tab--active:hover {
  background: var(--az-demo-navy);
  border-color: var(--az-demo-navy);
  color: #ffffff;
}

/* ── Card rows ── */
.az-deptgrid__rows {
  position: relative;
}

.az-deptgrid__row {
  display: none;
}

.az-deptgrid__row--active {
  display: block;
}

.az-deptgrid__scroller {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding: 4px 4px 10px;
}

.az-deptgrid__card {
  background: #ffffff;
  border-radius: 22px;
  padding: 22px;
  border: 1px solid rgba(23, 35, 58, 0.08);
  box-shadow: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Beyond the first four in a category — revealed by "Show More". */
.az-deptgrid__card--extra {
  display: none;
}

.az-deptgrid__row--expanded .az-deptgrid__card--extra {
  display: block;
}

.az-deptgrid__card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 44px rgba(23, 35, 58, 0.12);
}

.az-deptgrid__card-media {
  position: relative;
  height: 150px;
  border-radius: 16px;
  background: linear-gradient(135deg, #eef6fb 0%, #dceaf3 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 18px;
}

.az-deptgrid__card-glow {
  position: absolute;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, rgba(180, 216, 228, 0.45) 60%, rgba(180, 216, 228, 0) 75%);
  filter: blur(2px);
}

.az-deptgrid__card-media img {
  position: relative;
  z-index: 1;
  width: 74px;
  height: 74px;
  object-fit: contain;
  filter: drop-shadow(0 10px 16px rgba(28, 43, 69, 0.16));
}

.az-deptgrid__card-media--photo {
  background: linear-gradient(135deg, #eef6fb 0%, #dceaf3 100%);
}

.az-deptgrid__card-media--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: none;
}

.az-deptgrid__card-name {
  font-family: "Nunito Sans", sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--az-demo-navy);
  margin-bottom: 8px;
}

.az-deptgrid__card-desc {
  font-family: "Nunito Sans", sans-serif;
  font-size: 14px;
  line-height: 1.65;
  color: #5c6472;
  min-height: 44px;
  margin-bottom: 18px;
}

.az-deptgrid__card-arrow {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--az-demo-lime);
  color: var(--az-demo-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background 0.3s ease, transform 0.3s ease;
}

.az-deptgrid__card-arrow i {
  transform: rotate(-45deg);
}

.az-deptgrid__card-arrow:hover {
  background: #79b331;
  color: var(--az-demo-navy);
  text-decoration: none;
  transform: translate(2px, -2px);
}

/* ── Show more / show less ── */
.az-deptgrid__showmore-wrap {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}

.az-deptgrid__showmore {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--az-demo-navy);
  border: 1.5px solid var(--az-demo-navy);
  color: #ffffff;
  font-family: "Nunito Sans", sans-serif;
  font-weight: 700;
  font-size: 14px;
  padding: 12px 28px;
  border-radius: 50px;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Color stays the same on hover -- a lift + shadow gives the feedback
   instead. */
.az-deptgrid__showmore:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(23, 35, 58, 0.28);
}

.az-deptgrid__showmore:active {
  transform: translateY(-1px);
}

.az-deptgrid__showmore i {
  font-size: 12px;
  color: #ffffff;
  transition: transform 0.25s ease;
}

.az-deptgrid__showmore:hover i {
  transform: translateY(2px);
}

.az-deptgrid__row--expanded .az-deptgrid__showmore:hover i {
  transform: rotate(180deg) translateY(-2px);
}

.az-deptgrid__row--expanded .az-deptgrid__showmore i {
  transform: rotate(180deg);
}

/* =============================================================
   DEPARTMENT GRID — RESPONSIVE
   ============================================================= */

@media (max-width: 1199px) {
  .az-deptgrid__scroller {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 860px) {
  .az-deptgrid__scroller {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  .az-deptgrid__scroller {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .az-deptgrid {
    padding: 40px 20px 48px;
  }

  .az-deptgrid__head {
    align-items: flex-start;
  }

  .az-deptgrid__title {
    font-size: 1.8rem;
  }

  .az-deptgrid__title--oneline {
    white-space: normal;
  }

  /* Same five pills wrap into a ragged stack on a phone; scroll them in
     one line instead, same treatment as the specialities listing page. */
  .az-deptgrid__tabsrow {
    flex-wrap: nowrap;
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .az-deptgrid__tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }

  .az-deptgrid__tabs::-webkit-scrollbar {
    display: none;
  }

  .az-deptgrid__tab {
    flex-shrink: 0;
    white-space: nowrap;
  }

  /* The title-row "View All" hides in favour of the copy placed at the
     bottom of the listing, centered under the department cards. */
  .az-deptgrid__viewall--inline {
    display: none;
  }

  .az-deptgrid__viewall-bottomrow {
    display: flex;
    justify-content: center;
    margin-top: 28px;
  }
}

/* =============================================================
   HOME CARE SECTION
   ============================================================= */

.az-athome {
  background: #f7fafc;
  padding: 60px clamp(20px, 5vw, 56px);
}

.az-athome__wrap {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(320px, 420px) 1fr;
  gap: clamp(40px, 6vw, 90px);
  align-items: center;
}

.az-athome__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(14, 88, 165, 0.08);
  border: 1px solid rgba(14, 88, 165, 0.18);
  border-radius: 50px;
  padding: 7px 18px 7px 8px;
  font-family: "Nunito Sans", sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.3px;
  color: var(--az-demo-blue);
  margin-bottom: 20px;
}

.az-athome__eyebrow-icon {
  height: 40px;
  width: auto;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  flex-shrink: 0;
}

.az-athome__eyebrow-icon img {
  height: 100%;
  width: auto;
  display: block;
  object-fit: contain;
}

.az-athome__title {
  font-family: "Nunito Sans", sans-serif;
  font-weight: 700;
  font-size: clamp(2rem, 3.6vw, 2.9rem);
  line-height: 1.2;
  color: var(--az-demo-navy);
  margin-bottom: 18px;
}

.az-athome__desc {
  font-family: "Nunito Sans", sans-serif;
  font-size: 15.5px;
  line-height: 1.75;
  color: rgba(23, 35, 58, 0.65);
  margin-bottom: 30px;
  max-width: 420px;
}

.az-athome__btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: var(--az-demo-navy);
  color: #ffffff;
  font-family: "Nunito Sans", sans-serif;
  font-size: 15px;
  font-weight: 700;
  padding: 8px 8px 8px 26px;
  border-radius: 50px;
  text-decoration: none;
  transition: background 0.3s ease;
}

.az-athome__btn:hover {
  color: #ffffff;
  text-decoration: none;
}

.az-athome__btn-arrow {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--az-demo-lime);
  color: var(--az-demo-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  transition: transform 0.3s ease;
}

.az-athome__btn-arrow i {
  transform: rotate(-45deg);
  transition: transform 0.3s ease;
}

.az-athome__btn:hover .az-athome__btn-arrow {
  transform: translateX(5px) scale(1.08);
}

.az-athome__btn:hover .az-athome__btn-arrow i {
  transform: rotate(0deg);
}

/* ── Right: service list ── */
.az-athome__list {
  background: #ffffff;
  border-radius: 24px;
  padding: 10px clamp(16px, 3vw, 36px);
  box-shadow: 0 20px 60px rgba(23, 35, 58, 0.08);
}

.az-athome__item {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(23, 35, 58, 0.08);
  transition: padding-left 0.3s ease;
}

.az-athome__item:last-child {
  border-bottom: none;
}

.az-athome__item:hover {
  padding-left: 8px;
}

.az-athome__item-icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 14px;
  background: var(--az-demo-navy);
  color: var(--az-demo-lime);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: color 0.3s ease;
}

.az-athome__item:hover .az-athome__item-icon {
  color: #ffffff;
}

.az-athome__item-label {
  flex: 1;
  font-family: "Nunito Sans", sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: var(--az-demo-navy);
}

.az-athome__item-arrow {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(14, 88, 165, 0.08);
  color: var(--az-demo-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.3s ease, color 0.3s ease;
}

.az-athome__item-arrow i {
  transform: rotate(-45deg);
}

.az-athome__item:hover .az-athome__item-arrow {
  opacity: 1;
  transform: translateX(0);
  background: var(--az-demo-lime);
  color: var(--az-demo-navy);
}

/* ── Responsive ── */
@media (max-width: 991px) {
  .az-athome__wrap {
    grid-template-columns: 1fr;
  }

  .az-athome__desc {
    max-width: none;
  }
}

@media (max-width: 767px) {
  .az-athome {
    padding: 40px 20px 48px;
  }

  .az-athome__title {
    font-size: 1.8rem;
  }

  .az-athome__item-label {
    font-size: 14.5px;
  }

  .az-athome__item-arrow {
    display: none;
  }
}

/* =============================================================
   TESTIMONIALS SECTION — centered header + opposing marquee rows
   ============================================================= */

.az-testi {
  background: #eef3f6;
  padding: 64px 0;
  overflow: hidden;
}

.az-testi__head {
  max-width: 640px;
  margin: 0 auto 56px;
  padding: 0 clamp(20px, 5vw, 56px);
  text-align: center;
}

.az-testi__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(14, 88, 165, 0.08);
  border: 1px solid rgba(14, 88, 165, 0.18);
  border-radius: 50px;
  padding: 7px 18px 7px 8px;
  font-family: "Nunito Sans", sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.3px;
  color: var(--az-demo-blue);
  margin-bottom: 20px;
}

.az-testi__eyebrow-icon {
  height: 40px;
  width: auto;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  flex-shrink: 0;
}

.az-testi__eyebrow-icon img {
  height: 100%;
  width: auto;
  display: block;
  object-fit: contain;
}

.az-testi__title {
  font-family: "Nunito Sans", sans-serif;
  font-weight: 700;
  font-size: clamp(2rem, 3.6vw, 2.9rem);
  line-height: 1.2;
  color: var(--az-demo-navy);
  margin-bottom: 14px;
}

.az-testi__desc {
  font-family: "Nunito Sans", sans-serif;
  font-size: 15.5px;
  color: rgba(23, 35, 58, 0.6);
  margin-bottom: 26px;
}

.az-testi__badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #ffffff;
  border-radius: 50px;
  padding: 10px 22px;
  box-shadow: 0 12px 30px rgba(23, 35, 58, 0.08);
}

.az-testi__badge-stars {
  color: #f5a623;
  font-size: 14px;
  letter-spacing: 1.5px;
}

.az-testi__badge-text {
  font-family: "Nunito Sans", sans-serif;
  font-size: 13.5px;
  color: rgba(23, 35, 58, 0.65);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.az-testi__badge-text strong {
  color: var(--az-demo-navy);
}

.az-testi__badge-google {
  font-family: Arial, sans-serif;
  font-weight: 700;
  font-size: 13.5px;
}

/* ── Marquee ── */
.az-testi__marquee {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 22px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
}

.az-testi__row {
  display: flex;
  gap: 22px;
  width: max-content;
  animation: azTestiScrollLeft 46s linear infinite;
}

.az-testi__row--right {
  animation-name: azTestiScrollRight;
  animation-duration: 52s;
}

.az-testi__row:hover {
  animation-play-state: paused;
}

@keyframes azTestiScrollLeft {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes azTestiScrollRight {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

.az-testi__card {
  flex: 0 0 360px;
  background: #ffffff;
  border-radius: 20px;
  padding: 24px;
  border: 1px solid rgba(23, 35, 58, 0.05);
  box-shadow: 0 16px 40px rgba(23, 35, 58, 0.06);
}

.az-testi__card-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.az-testi__avatar {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--az-demo-navy);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Nunito Sans", sans-serif;
  font-weight: 700;
  font-size: 14px;
}

/* Google supplies a reviewer photo; without this it would sit square on top
   of the round initials badge. Falls back to the initials when absent. */
.az-testi__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* The name links to the review — Google requires the attribution — but it
   should read as the name, not as a link. */
.az-testi__name a {
  color: inherit;
  text-decoration: none;
}

.az-testi__name a:hover {
  text-decoration: underline;
}

.az-testi__name {
  font-family: "Nunito Sans", sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--az-demo-navy);
}

.az-testi__stars {
  color: #f5a623;
  font-size: 11px;
  letter-spacing: 2px;
  margin-top: 3px;
}

.az-testi__star--empty {
  color: rgba(23, 35, 58, 0.15);
}

.az-testi__quote {
  margin-left: auto;
  color: rgba(14, 88, 165, 0.15);
  font-size: 22px;
}

.az-testi__text {
  font-family: "Nunito Sans", sans-serif;
  font-size: 14px;
  line-height: 1.75;
  color: rgba(23, 35, 58, 0.65);
  margin: 0;
}

/* ── Responsive ── */
@media (max-width: 640px) {
  .az-testi {
    padding: 44px 0 48px;
  }

  .az-testi__card {
    flex-basis: 280px;
    padding: 20px;
  }
}

/* =============================================================
   HEALTH PACKAGES SECTION
   ============================================================= */

.az-pkg {
  background: #ffffff;
  padding: 56px clamp(20px, 5vw, 56px) 60px;
}

.az-pkg__wrap {
  max-width: 1400px;
  margin: 0 auto;
}

/* ── Header ── */
.az-pkg__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  flex-wrap: wrap;
  margin-bottom: 46px;
}

.az-pkg__head-left {
  flex: 1 1 320px;
  min-width: 280px;
}

.az-pkg__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(14, 88, 165, 0.08);
  border: 1px solid rgba(14, 88, 165, 0.18);
  border-radius: 50px;
  padding: 7px 18px 7px 8px;
  font-family: "Nunito Sans", sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.3px;
  color: var(--az-demo-blue);
  margin-bottom: 20px;
}

.az-pkg__eyebrow-icon {
  height: 40px;
  width: auto;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  flex-shrink: 0;
}

.az-pkg__eyebrow-icon img {
  height: 100%;
  width: auto;
  display: block;
  object-fit: contain;
}

.az-pkg__title {
  font-family: "Nunito Sans", sans-serif;
  font-weight: 700;
  font-size: clamp(2rem, 3.6vw, 3rem);
  line-height: 1.18;
  color: var(--az-demo-navy);
}

.az-pkg__titlerow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.az-pkg__desc {
  font-family: "Nunito Sans", sans-serif;
  font-size: 15.5px;
  line-height: 1.7;
  color: rgba(23, 35, 58, 0.65);
  margin-bottom: 22px;
}

.az-pkg__viewall {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: var(--az-demo-navy);
  color: #ffffff;
  font-family: "Nunito Sans", sans-serif;
  font-size: 15px;
  font-weight: 700;
  padding: 8px 8px 8px 26px;
  border-radius: 50px;
  text-decoration: none;
  transition: background 0.3s ease;
}

.az-pkg__viewall:hover {
  color: #ffffff;
  text-decoration: none;
}

.az-pkg__viewall-arrow {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--az-demo-lime);
  color: var(--az-demo-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  transition: transform 0.3s ease;
}

.az-pkg__viewall-arrow i {
  transform: rotate(-45deg);
  transition: transform 0.3s ease;
}

.az-pkg__viewall:hover .az-pkg__viewall-arrow {
  transform: translateX(5px) scale(1.08);
}

.az-pkg__viewall:hover .az-pkg__viewall-arrow i {
  transform: rotate(0deg);
}

/* ── Package cards ── */
.az-pkg__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  align-items: start;
}

/* Beyond the home page's 3-card teaser — revealed by "Show All".
   Both selectors below are two classes deep (not one), so they outrank
   .az-pkg__card--simple's own "display: block" regardless of source
   order -- with equal specificity that later rule would otherwise win. */
.az-pkg__card.az-pkg__card--extra {
  display: none;
}

.az-pkg--expanded .az-pkg__card.az-pkg__card--extra {
  display: block;
}

/* ── Show all / show less ── */
.az-pkg__showmore-wrap {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}

.az-pkg__showmore {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--az-demo-navy);
  border: 1.5px solid var(--az-demo-navy);
  color: #ffffff;
  font-family: "Nunito Sans", sans-serif;
  font-weight: 700;
  font-size: 14px;
  padding: 12px 28px;
  border-radius: 50px;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Color stays the same on hover -- a lift + shadow gives the feedback
   instead. */
.az-pkg__showmore:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(23, 35, 58, 0.28);
}

.az-pkg__showmore:active {
  transform: translateY(-1px);
}

.az-pkg__showmore i {
  font-size: 12px;
  color: #ffffff;
  transition: transform 0.25s ease;
}

.az-pkg__showmore:hover i {
  transform: translateY(2px);
}

.az-pkg--expanded .az-pkg__showmore:hover i {
  transform: rotate(180deg) translateY(-2px);
}

.az-pkg--expanded .az-pkg__showmore i {
  transform: rotate(180deg);
}

.az-pkg__card {
  position: relative;
  background: #f7fafc;
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid rgba(23, 35, 58, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.az-pkg__card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 50px rgba(23, 35, 58, 0.12);
}

.az-pkg__card--popular {
  background: #ffffff;
  border-color: var(--az-demo-navy);
  box-shadow: 0 20px 50px rgba(23, 35, 58, 0.1);
}

.az-pkg__ribbon {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 2;
  background: var(--az-demo-lime);
  color: var(--az-demo-navy);
  font-family: "Nunito Sans", sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.3px;
  padding: 6px 14px;
  border-radius: 50px;
}

.az-pkg__card-media {
  position: relative;
  height: 220px;
  background: linear-gradient(135deg, var(--az-demo-blue) 0%, var(--az-demo-blue-dark) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.az-pkg__card-media-glow {
  position: absolute;
  width: 55%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 70%);
}

.az-pkg__card-media i {
  position: relative;
  z-index: 1;
  font-size: 2.6rem;
  color: var(--az-demo-lime);
}

.az-pkg__card-media--photo {
  background: linear-gradient(135deg, #eef6fb 0%, #dceaf3 100%);
}

.az-pkg__card-media--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%;
}

.az-pkg__card-body {
  padding: clamp(22px, 2.5vw, 32px);
}

/* ── Simplified package card: image + title only ──
   The home page card no longer carries a price, blurb, highlight list or
   button, so the body would otherwise sit as a tall block of padding under
   the image with one line of text floating in it. The title also carried a
   10px bottom margin meant to separate it from the description that is no
   longer there. */
.az-pkg__card--simple {
  display: block;
  text-decoration: none;
}

.az-pkg__card--simple .az-pkg__card-body {
  padding: 20px clamp(18px, 2vw, 26px) 24px;
}

.az-pkg__card--simple .az-pkg__card-title {
  margin-bottom: 0;
}

/* A card that also carries a button needs the gap back between the two. */
.az-pkg__card--simple .az-pkg__card-title:not(:last-child) {
  margin-bottom: 16px;
}

/* Price and button now share one row: amount on the left, a small button
   pinned to the right. margin-left:auto rather than space-between, so the
   button still sits right on a card that has no price. */
.az-pkg__card--simple .az-pkg__card-foot {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.az-pkg__card--simple .az-pkg__card-price {
  margin-bottom: 0;
  line-height: 1.1;
}

/* The full-width pill was sized to sit alone at the bottom of a much taller
   card; here it is a compact action next to the amount. */
.az-pkg__card--simple .az-pkg__card-btn--sm {
  width: auto;
  margin-left: auto;
  flex: 0 0 auto;
  gap: 8px;
  font-size: 13px;
  padding: 9px 16px;
}

a.az-pkg__card--simple:hover {
  text-decoration: none;
}

.az-pkg__card-title {
  font-family: "Nunito Sans", sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1.25;
  color: var(--az-demo-navy);
  margin-bottom: 10px;
}

.az-pkg__card-desc {
  font-family: "Nunito Sans", sans-serif;
  font-size: 14px;
  line-height: 1.65;
  color: rgba(23, 35, 58, 0.62);
  margin-bottom: 20px;
  min-height: 66px;
}

.az-pkg__card-price {
  font-family: "Nunito Sans", sans-serif;
  font-weight: 700;
  font-size: 2.1rem;
  color: var(--az-demo-navy);
}

.az-pkg__card-price-cur {
  font-size: 1.2rem;
  margin-right: 2px;
  color: rgba(23, 35, 58, 0.55);
}

.az-pkg__card-price-unit {
  font-family: "Nunito Sans", sans-serif;
  font-weight: 500;
  font-size: 13px;
  color: rgba(23, 35, 58, 0.5);
  margin-left: 4px;
}

.az-pkg__card-divider {
  height: 1px;
  background: rgba(23, 35, 58, 0.08);
  margin: 20px 0;
}

.az-pkg__highlights {
  list-style: none;
  padding: 0;
  margin: 0 0 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.az-pkg__highlight-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "Nunito Sans", sans-serif;
  font-size: 14px;
  color: rgba(23, 35, 58, 0.75);
}

.az-pkg__highlight-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(14, 88, 165, 0.1);
  color: var(--az-demo-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
}

.az-pkg__card--popular .az-pkg__highlight-icon {
  background: var(--az-demo-lime);
  color: var(--az-demo-navy);
}

.az-pkg__card-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  background: var(--az-demo-navy);
  color: #ffffff;
  font-family: "Nunito Sans", sans-serif;
  font-weight: 700;
  font-size: 14.5px;
  padding: 13px 20px;
  border-radius: 50px;
  text-decoration: none;
  transition: background 0.3s ease;
}

.az-pkg__card-btn:hover {
  color: #ffffff;
  text-decoration: none;
}

.az-pkg__card-btn-arrow i {
  font-size: 12px;
  display: inline-block;
  transition: transform 0.3s ease;
}

.az-pkg__card-btn:hover .az-pkg__card-btn-arrow i {
  transform: translateX(4px);
}

/* ── Responsive ── */
@media (max-width: 991px) {
  .az-pkg__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .az-pkg {
    padding: 40px 20px 48px;
  }

  .az-pkg__title {
    font-size: 1.8rem;
  }

  .az-pkg__grid {
    grid-template-columns: 1fr;
  }

  .az-pkg__card-desc {
    min-height: 0;
  }
}

/* =============================================================
   NEWS & EVENTS SECTION — featured spotlight + compact list
   ============================================================= */

.az-news {
  background: #f7fafc;
  padding: 56px clamp(20px, 5vw, 56px) 60px;
}

.az-news__wrap {
  max-width: 1400px;
  margin: 0 auto;
}

.az-news__head {
  margin-bottom: 40px;
}

.az-news__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(14, 88, 165, 0.08);
  border: 1px solid rgba(14, 88, 165, 0.18);
  border-radius: 50px;
  padding: 7px 18px 7px 8px;
  font-family: "Nunito Sans", sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.3px;
  color: var(--az-demo-blue);
  margin-bottom: 20px;
}

.az-news__eyebrow-icon {
  height: 40px;
  width: auto;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  flex-shrink: 0;
}

.az-news__eyebrow-icon img {
  height: 100%;
  width: auto;
  display: block;
  object-fit: contain;
}

.az-news__titlerow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.az-news__title {
  font-family: "Nunito Sans", sans-serif;
  font-weight: 700;
  font-size: clamp(2rem, 3.6vw, 3rem);
  line-height: 1.18;
  color: var(--az-demo-navy);
}

.az-news__viewall {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: var(--az-demo-navy);
  color: #ffffff;
  font-family: "Nunito Sans", sans-serif;
  font-size: 15px;
  font-weight: 700;
  padding: 8px 8px 8px 26px;
  border-radius: 50px;
  text-decoration: none;
  transition: background 0.3s ease;
}

.az-news__viewall:hover {
  color: #ffffff;
  text-decoration: none;
}

.az-news__viewall-arrow {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--az-demo-lime);
  color: var(--az-demo-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  transition: transform 0.3s ease;
}

.az-news__viewall-arrow i {
  transform: rotate(-45deg);
  transition: transform 0.3s ease;
}

.az-news__viewall:hover .az-news__viewall-arrow {
  transform: translateX(5px) scale(1.08);
}

.az-news__viewall:hover .az-news__viewall-arrow i {
  transform: rotate(0deg);
}

/* ── Featured + list ── */
.az-news__body {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(320px, 420px);
  gap: 32px;
  align-items: stretch;
}

.az-news__featured {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(23, 35, 58, 0.05);
  box-shadow: 0 16px 40px rgba(23, 35, 58, 0.06);
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.az-news__featured:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 50px rgba(23, 35, 58, 0.12);
  text-decoration: none;
}

.az-news__featured-media {
  position: relative;
  height: 280px;
  background: linear-gradient(135deg, var(--az-demo-blue) 0%, var(--az-demo-blue-dark) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.az-news__featured-glow {
  position: absolute;
  width: 50%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 70%);
}

.az-news__featured-media i {
  position: relative;
  z-index: 1;
  font-size: 3.4rem;
  color: var(--az-demo-lime);
}

.az-news__featured-media--photo {
  background: linear-gradient(135deg, #eef6fb 0%, #dceaf3 100%);
}

.az-news__featured-media--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.az-news__tag {
  position: absolute;
  top: 18px;
  left: 18px;
  background: rgba(255, 255, 255, 0.95);
  color: var(--az-demo-navy);
  font-family: "Nunito Sans", sans-serif;
  font-weight: 700;
  font-size: 12px;
  padding: 6px 14px;
  border-radius: 50px;
}

.az-news__featured-body {
  padding: 28px clamp(22px, 3vw, 32px) 32px;
}

.az-news__date {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "Nunito Sans", sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: rgba(23, 35, 58, 0.5);
  margin-bottom: 12px;
}

.az-news__date i {
  font-size: 12px;
}

.az-news__featured-title {
  font-family: "Nunito Sans", sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.3;
  color: var(--az-demo-navy);
  margin-bottom: 12px;
}

.az-news__featured-excerpt {
  font-family: "Nunito Sans", sans-serif;
  font-size: 14.5px;
  line-height: 1.7;
  color: rgba(23, 35, 58, 0.62);
  margin-bottom: 20px;
}

.az-news__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Nunito Sans", sans-serif;
  font-weight: 700;
  font-size: 14.5px;
  color: var(--az-demo-blue);
  transition: gap 0.25s ease;
}

.az-news__featured:hover .az-news__link {
  gap: 12px;
}

/* ── Compact list ── */
.az-news__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.az-news__item {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #ffffff;
  border-radius: 18px;
  padding: 16px;
  border: 1px solid rgba(23, 35, 58, 0.05);
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.az-news__item:hover {
  transform: translateX(4px);
  box-shadow: 0 12px 30px rgba(23, 35, 58, 0.08);
  text-decoration: none;
}

.az-news__item-media {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--az-demo-blue) 0%, var(--az-demo-blue-dark) 100%);
  color: var(--az-demo-lime);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.az-news__item-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.az-news__date--sm {
  margin-bottom: 2px;
  font-size: 12px;
}

.az-news__item-title {
  font-family: "Nunito Sans", sans-serif;
  font-weight: 700;
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--az-demo-navy);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.az-news__link--sm {
  font-size: 13px;
  margin-top: 2px;
}

/* ── Responsive ── */
@media (max-width: 991px) {
  .az-news__body {
    grid-template-columns: 1fr;
  }

  .az-news__featured-media {
    height: 220px;
  }
}

@media (max-width: 640px) {
  .az-news {
    padding: 40px 20px 48px;
  }

  .az-news__title {
    font-size: 1.8rem;
  }
}

/* =============================================================
   APPOINTMENT CTA SECTION
   ============================================================= */

.az-cta {
  background: #ebf8fa;
  border: 1px solid rgba(23, 35, 58, 0.06);
  box-shadow: 0 20px 60px rgba(23, 35, 58, 0.06);
  border-radius: 32px;
  margin: 0 clamp(16px, 4vw, 60px) 40px;
  overflow: hidden;
  position: relative;
}

.az-cta__wrap {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(320px, 440px);
  align-items: center;
  gap: clamp(24px, 4vw, 60px);
  padding: clamp(36px, 5vw, 56px) clamp(24px, 5vw, 64px);
}

.az-cta__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(14, 88, 165, 0.08);
  border: 1px solid rgba(14, 88, 165, 0.18);
  border-radius: 50px;
  padding: 7px 18px 7px 8px;
  font-family: "Nunito Sans", sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.3px;
  color: var(--az-demo-blue);
  margin-bottom: 20px;
}

.az-cta__eyebrow-icon {
  height: 40px;
  width: auto;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  flex-shrink: 0;
}

.az-cta__eyebrow-icon img {
  height: 100%;
  width: auto;
  display: block;
  object-fit: contain;
}

.az-cta__title {
  font-family: "Nunito Sans", sans-serif;
  font-weight: 700;
  font-size: clamp(2rem, 3.6vw, 2.9rem);
  line-height: 1.2;
  color: var(--az-demo-navy);
  margin-bottom: 16px;
}

.az-cta__desc {
  font-family: "Nunito Sans", sans-serif;
  font-size: 15.5px;
  line-height: 1.75;
  color: rgba(23, 35, 58, 0.62);
  margin-bottom: 30px;
  max-width: 440px;
}

.az-cta__actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.az-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: var(--az-demo-navy);
  color: #ffffff;
  font-family: "Nunito Sans", sans-serif;
  font-size: 15px;
  font-weight: 700;
  padding: 8px 8px 8px 26px;
  border-radius: 50px;
  text-decoration: none;
  transition: background 0.3s ease;
}

.az-cta__btn:hover {
  color: #ffffff;
  text-decoration: none;
}

.az-cta__btn-arrow {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--az-demo-lime);
  color: var(--az-demo-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  transition: transform 0.3s ease;
}

.az-cta__btn-arrow i {
  transform: rotate(-45deg);
  transition: transform 0.3s ease;
}

.az-cta__btn:hover .az-cta__btn-arrow {
  transform: translateX(5px) scale(1.08);
}

.az-cta__btn:hover .az-cta__btn-arrow i {
  transform: rotate(0deg);
}

.az-cta__phone {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--az-demo-navy);
  font-family: "Nunito Sans", sans-serif;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
}

.az-cta__phone:hover {
  color: var(--az-demo-blue);
  text-decoration: none;
}

.az-cta__phone-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(23, 35, 58, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

/* ── Media ── */
.az-cta__media {
  position: relative;
  height: 280px;
  border-radius: 22px;
  background: linear-gradient(135deg, var(--az-demo-blue) 0%, var(--az-demo-blue-dark) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.az-cta__media-glow {
  position: absolute;
  width: 55%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 70%);
}

.az-cta__media > i {
  position: relative;
  z-index: 1;
  font-size: 3.6rem;
  color: var(--az-demo-lime);
}

.az-cta__media-logo {
  position: relative;
  z-index: 1;
  width: 45%;
  max-width: 180px;
  height: auto;
  filter: brightness(0) invert(1);
  opacity: 0.95;
}

.az-cta__media--photo {
  background: linear-gradient(135deg, #eef6fb 0%, #dceaf3 100%);
}

.az-cta__media--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 22px;
}

.az-cta__badge {
  position: absolute;
  bottom: -22px;
  left: -22px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #ffffff;
  border-radius: 18px;
  padding: 14px 20px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
  max-width: 240px;
}

.az-cta__badge-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(14, 88, 165, 0.1);
  color: var(--az-demo-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.az-cta__badge-num {
  font-family: "Nunito Sans", sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--az-demo-navy);
  line-height: 1.2;
}

.az-cta__badge-label {
  font-family: "Nunito Sans", sans-serif;
  font-size: 12px;
  color: rgba(23, 35, 58, 0.6);
  line-height: 1.3;
}

/* ── Responsive ── */
@media (max-width: 991px) {
  .az-cta__wrap {
    grid-template-columns: 1fr;
  }

  .az-cta__media {
    order: -1;
  }

  .az-cta__badge {
    left: 20px;
  }
}

@media (max-width: 640px) {
  .az-cta {
    margin: 0 12px 40px;
    border-radius: 24px;
  }

  .az-cta__title {
    font-size: 1.8rem;
  }

  .az-cta__badge {
    position: static;
    margin-top: 20px;
    max-width: none;
  }
}

/* =============================================================
   FAQ ACCORDION

   Follows the section language of the blocks above it: same 1400px wrap,
   same padding rhythm, same eyebrow/title head.
   ============================================================= */

.az-faq {
  position: relative;
  background: #ffffff;
  padding: 56px clamp(20px, 5vw, 56px) 60px;
}

.az-faq__wrap {
  max-width: 1400px;
  margin: 0 auto;
}

/* ── Head ── */
.az-faq__head {
  margin-bottom: 40px;
}

.az-faq__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(14, 88, 165, 0.08);
  border: 1px solid rgba(14, 88, 165, 0.18);
  border-radius: 50px;
  padding: 7px 18px 7px 8px;
  font-family: "Nunito Sans", sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.3px;
  color: var(--az-demo-blue);
  margin-bottom: 20px;
}

.az-faq__eyebrow-icon {
  height: 40px;
  width: auto;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  flex-shrink: 0;
}

.az-faq__eyebrow-icon img {
  height: 100%;
  width: auto;
  display: block;
  object-fit: contain;
}

.az-faq__titlerow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.az-faq__title {
  font-family: "Nunito Sans", sans-serif;
  font-weight: 700;
  font-size: clamp(2rem, 3.6vw, 3rem);
  line-height: 1.18;
  color: var(--az-demo-navy);
}

.az-faq__viewall {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: var(--az-demo-navy);
  color: #ffffff;
  font-family: "Nunito Sans", sans-serif;
  font-size: 15px;
  font-weight: 700;
  padding: 8px 8px 8px 28px;
  border-radius: 50px;
  text-decoration: none;
  transition: background 0.3s ease;
}

.az-faq__viewall:hover {
  color: #ffffff;
  text-decoration: none;
}

.az-faq__viewall-arrow {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #ffffff;
  color: var(--az-demo-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: transform 0.3s ease;
}

.az-faq__viewall:hover .az-faq__viewall-arrow {
  transform: translateX(3px);
}

/* ── Accordion ── */
.az-faq__list {
  display: grid;
  /* Two balanced columns on desktop; the JS opens one panel at a time
     across both. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 26px;
  align-content: start;
}

.az-faq__item {
  border: 1px solid rgba(23, 35, 58, 0.10);
  border-radius: 18px;
  background: #ffffff;
  overflow: hidden;
  align-self: start;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.az-faq__item--open {
  border-color: rgba(14, 88, 165, 0.35);
  box-shadow: 0 16px 36px rgba(23, 35, 58, 0.10);
}

.az-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  padding: 20px 22px;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font-family: "Nunito Sans", sans-serif;
  font-size: 16.5px;
  font-weight: 700;
  color: var(--az-demo-navy);
}

.az-faq__q-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--az-demo-navy);
  background: rgba(23, 35, 58, 0.06);
  transition: transform 0.3s ease, background 0.25s ease, color 0.25s ease;
}

.az-faq__item--open .az-faq__q-icon {
  background: var(--az-demo-navy);
  color: #ffffff;
  /* The plus becomes a minus. */
  transform: rotate(135deg);
}

.az-faq__a {
  height: 0;
  overflow: hidden;
  transition: height 0.32s ease;
}

.az-faq__a-inner {
  padding: 0 22px 22px;
  font-family: "Nunito Sans", sans-serif;
  font-size: 15px;
  line-height: 1.75;
  color: rgba(23, 35, 58, 0.72);
}

@media (max-width: 991px) {
  .az-faq__list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575px) {
  .az-faq__q {
    font-size: 15px;
    padding: 16px 18px;
  }
  .az-faq__a-inner {
    padding: 0 18px 18px;
  }
}