/* ==========================================================================
    DigiManic — Healthcare Digital Marketing Agency Landing Page
    Brand palette (mandatory — 3 colors only):
      Dark      #0F1B2D   (navbar, hero, why-us, CTA, footer, stats)
      Primary   #2C8CF4   (buttons, links, icons, highlights, borders)
      White     #FFFFFF   (light section backgrounds, text contrast)
    Headings: Fraunces (serif, editorial/premium) · Body: Inter
    ========================================================================== */

  :root{
    --dark: #0F1B2D;
    --dark-soft: #16253c;
    --dark-softer: #1c2e49;
    --primary: #2C8CF4;
    --primary-deep: #1c6fd1;
    --primary-tint: rgba(44,140,244,0.08);
    --primary-tint-strong: rgba(44,140,244,0.14);
    --bg-light: #ffffff;
    --tint: #f3f8fe;
    --tint-strong: #e6f1fd;
    --ink-900: #0F1B2D;
    --ink-600: #4b5a6d;
    --ink-400: #7c8898;
    --border-soft: #e3eaf3;
    --white: #ffffff;

    --font-display: 'Fraunces', Georgia, serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    --radius-md: 16px;
    --radius-lg: 22px;
    --shadow-soft: 0 20px 45px -24px rgba(15, 27, 45, 0.35);
    --shadow-card: 0 14px 34px -20px rgba(15, 27, 45, 0.16);
    --shadow-glow: 0 10px 28px -8px rgba(44,140,244,0.5);
    --transition-base: all 0.3s ease;
  }

  *{ box-sizing: border-box; }
  html{ scroll-behavior: smooth; }

  body{
    font-family: var(--font-body);
    color: var(--ink-600);
    background: var(--bg-light);
    line-height: 1.7;
    overflow-x: hidden;
  }

  h1, h2, h3, h4{
    font-family: var(--font-display);
    color: var(--dark);
    font-weight: 600;
    line-height: 1.2;
  }
  h2{ font-size: clamp(1.9rem, 1.5rem + 1.6vw, 2.7rem); margin-bottom: 0.85rem; }
  h3{ font-size: 1.2rem; margin-bottom: 0.5rem; }
  p{ color: var(--ink-600); }
  a{ text-decoration: none; color: inherit; }

  .section-pad{ padding: 6.5rem 0; }
  @media (max-width: 767.98px){ .section-pad{ padding: 4rem 0; } }

  .section-heading-block{ max-width: 700px; margin: 0 auto; }
  .section-lead{ font-size: 1.05rem; max-width: 540px; }

  /* Highlighted keyword accent */
  .text-accent{ color: var(--primary); }

  .section-badge{
    display: inline-block;
    background: var(--primary-tint);
    color: var(--primary-deep);
    border: 1px solid var(--primary-tint-strong);
    padding: 0.4rem 1.1rem;
    border-radius: 100px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 1rem;
    letter-spacing: 0.02em;
  }
  .section-badge.badge-light{
    background: rgba(44,140,244,0.12);
    border-color: rgba(44,140,244,0.3);
    color: #7db8f8;
  }

  /* ===================== BUTTONS ===================== */
  .btn-primary-brand{
    background: var(--primary);
    border: 1px solid var(--primary);
    color: #fff;
    font-weight: 700;
    padding: 0.75rem 1.7rem;
    border-radius: 12px;
    transition: var(--transition-base);
    box-shadow: 0 0 0 rgba(44,140,244,0.0);
  }
  .btn-primary-brand:hover, .btn-primary-brand:focus{
    background: var(--primary-deep);
    color: #fff;
    box-shadow: var(--shadow-glow);
    transform: translateY(-1px);
  }
  .btn-outline-hero{
    background: #ffffff;
    border: 1.5px solid var(--primary);
    color: var(--primary);
    font-weight: 600;
    padding: 0.75rem 1.7rem;
    border-radius: 12px;
    transition: var(--transition-base);
  }
  .btn-outline-hero:hover{ background: var(--primary); color: #fff; box-shadow: var(--shadow-glow); transform: translateY(-1px); }
  .btn-whatsapp{
    background: var(--primary);
    border: 1px solid var(--primary);
    color: #fff;
    font-weight: 700;
    border-radius: 12px;
    transition: var(--transition-base);
  }
  .btn-whatsapp:hover{ background: var(--primary-deep); color: #fff; box-shadow: var(--shadow-glow); }
  .btn-nav-cta{ padding: 0.55rem 1.3rem; font-size: 0.9rem; }

  /* ===================== HEADER (dark, mandatory) ===================== */
  .site-header{
    position: sticky; top: 0; z-index: 1000;
    background: rgba(22,37,60,0.92);
    backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 1px 0 rgba(44,140,244,0.12);
    transition: var(--transition-base);
  }
  .site-header.is-scrolled{ background: rgba(22,37,60,0.97); border-bottom-color: rgba(255,255,255,0.12); box-shadow: 0 8px 26px -20px rgba(0,0,0,0.6); }
  .navbar{ padding: 0.85rem 0; }
  .navbar-brand{ display: flex; align-items: center; gap: 0.6rem; }
  .brand-logo{ height: 34px; width: auto; display: block; }
  .nav-link{ color: rgba(255,255,255,0.78); font-weight: 500; font-size: 0.94rem; padding: 0.5rem 0.85rem !important; transition: var(--transition-base); }
  .nav-link:hover{ color: #fff; }

  /* ===================== HERO (dark overlay, mandatory) ===================== */

  /* =========================================================
    PREMIUM HEALTHCARE HERO
    Colors:
    Dark  : #0f1b2d
    Blue  : #2c8cf4
    White : #ffffff
  ========================================================= */

  .hero-section {
    position: relative;
    padding: 7rem 0 7.5rem;
    overflow: hidden;
    background: #ffffff;
    isolation: isolate;
  }

  /* ---------------------------------------------
    Background
  --------------------------------------------- */

  .hero-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;

    background:
      radial-gradient(
        circle at 8% 18%,
        rgba(44, 140, 244, 0.09),
        transparent 32%
      ),
      radial-gradient(
        circle at 92% 78%,
        rgba(44, 140, 244, 0.08),
        transparent 34%
      ),
      linear-gradient(
        135deg,
        #ffffff 0%,
        #f8fbff 55%,
        #ffffff 100%
      );
  }

  /* ---------------------------------------------
    Medical Background Icons
  --------------------------------------------- */

  .medical-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;

    width: 72px;
    height: 72px;

    border-radius: 20px;

    color: rgba(44, 140, 244, 0.14);
    background: rgba(44, 140, 244, 0.035);

    border: 1px solid rgba(44, 140, 244, 0.06);

    font-size: 2rem;

    transform: rotate(-8deg);
    filter: blur(0.1px);

    animation: medicalFloat 7s ease-in-out infinite;
  }

  .medical-icon-1 {
    top: 12%;
    left: 4%;
    animation-delay: 0s;
  }

  .medical-icon-2 {
    top: 8%;
    right: 5%;
    transform: rotate(8deg);
    animation-delay: 1.2s;
  }

  .medical-icon-3 {
    bottom: 14%;
    left: 7%;
    transform: rotate(12deg);
    animation-delay: 2s;
  }

  .medical-icon-4 {
    bottom: 9%;
    right: 7%;
    transform: rotate(-10deg);
    animation-delay: 2.8s;
  }

  .medical-icon-5 {
    top: 45%;
    left: 48%;
    width: 55px;
    height: 55px;
    border-radius: 16px;
    font-size: 1.5rem;
    opacity: 0.6;
    animation-delay: 1.5s;
  }

  .medical-icon-6 {
    top: 32%;
    right: 31%;
    width: 52px;
    height: 52px;
    border-radius: 15px;
    font-size: 1.35rem;
    opacity: 0.45;
    animation-delay: 3s;
  }

  @keyframes medicalFloat {
    0%,
    100% {
      transform: translateY(0) rotate(-8deg);
    }

    50% {
      transform: translateY(-12px) rotate(-5deg);
    }
  }

  /* ---------------------------------------------
    Decorative Medical Plus
  --------------------------------------------- */

  .medical-plus {
    position: absolute;

    color: rgba(44, 140, 244, 0.16);

    font-size: 2rem;
    font-weight: 300;

    user-select: none;
  }

  .plus-1 {
    top: 25%;
    left: 24%;
  }

  .plus-2 {
    bottom: 24%;
    left: 39%;
    font-size: 1.5rem;
  }

  .plus-3 {
    top: 22%;
    right: 22%;
    font-size: 1.4rem;
  }

  /* ---------------------------------------------
    Content
  --------------------------------------------- */

  .hero-content {
    position: relative;
    z-index: 2;
  }

  .section-badge.badge-light {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;

    padding: 0.55rem 0.9rem;

    border-radius: 999px;

    color: #2c8cf4;
    background: rgba(44, 140, 244, 0.08);

    border: 1px solid rgba(44, 140, 244, 0.14);

    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;

    margin-bottom: 1.25rem;
  }

  .section-badge.badge-light i {
    font-size: 0.9rem;
  }

  /* ---------------------------------------------
    Heading
  --------------------------------------------- */

  .hero-heading {
    

    margin: 0 0 1.4rem;

    color: #0f1b2d;

    font-size: clamp(
      1.45rem,
      1.7rem + 1.6vw,
      2rem
    );

    line-height: 1.08;
    letter-spacing: -0.045em;
    font-weight: 800;
  }

  .text-accent {
    color: #2c8cf4;
    position: relative;
    white-space: nowrap;
  }

  /* subtle underline */

 

  /* ---------------------------------------------
    Description
  --------------------------------------------- */

  .hero-subtext {
    max-width: 620px;

    margin: 0 0 2rem;

    color: #526174;

    font-size: 1.08rem;
    line-height: 1.75;
  }

  /* ---------------------------------------------
    CTA
  --------------------------------------------- */

  .hero-cta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.85rem;
  }

  .btn-primary-brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;

    background: #2c8cf4;
    border: 1px solid #2c8cf4;

    color: #ffffff;

    padding: 0.85rem 1.35rem;

    border-radius: 12px;

    font-weight: 700;

    box-shadow:
      0 12px 28px rgba(44, 140, 244, 0.22);

    transition:
      transform 0.25s ease,
      box-shadow 0.25s ease,
      background 0.25s ease;
  }

  .btn-primary-brand:hover {
    color: #ffffff;

    background: #197be3;
    border-color: #197be3;

    transform: translateY(-3px);

    box-shadow:
      0 18px 35px rgba(44, 140, 244, 0.28);
  }

  .btn-primary-brand i {
    transition: transform 0.25s ease;
  }

  .btn-primary-brand:hover i {
    transform: translateX(4px);
  }

  /* Outline button */

  .btn-outline-hero {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: #ffffff;

    color: #0f1b2d;

    border: 1px solid #dce5ef;

    padding: 0.85rem 1.35rem;

    border-radius: 12px;

    font-weight: 700;

    box-shadow: 0 6px 20px rgba(15, 27, 45, 0.05);

    transition:
      all 0.25s ease;
  }

  .btn-outline-hero:hover {
    color: #2c8cf4;

    border-color: rgba(44, 140, 244, 0.35);

    background: #f7fbff;

    transform: translateY(-3px);

    box-shadow:
      0 12px 25px rgba(15, 27, 45, 0.08);
  }

  /* ---------------------------------------------
    Trust Points
  --------------------------------------------- */

  .hero-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;

    margin-top: 2.1rem;
  }

  .trust-item {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;

    color: #68778a;

    font-size: 0.78rem;
    font-weight: 600;
  }

  .trust-item i {
    color: #2c8cf4;
    font-size: 0.95rem;
  }

  /* ---------------------------------------------
    Hero Visual
  --------------------------------------------- */

  .hero-visual {
    position: relative;
    z-index: 2;

    padding: 1.2rem 1rem 1.5rem;
  }

  .hero-visual-glow {
    position: absolute;

    width: 360px;
    height: 360px;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    background: rgba(44, 140, 244, 0.12);

    filter: blur(70px);

    border-radius: 50%;

    z-index: -1;
  }

  /* ---------------------------------------------
    Image Frame
  --------------------------------------------- */

  .hero-visual-frame {
    position: relative;

    overflow: hidden;

    border-radius: 28px;

    background: #ffffff;

    border: 8px solid #ffffff;

    box-shadow:
      0 35px 80px rgba(15, 27, 45, 0.13),
      0 8px 25px rgba(44, 140, 244, 0.08);

    transform: rotate(1deg);

    transition: transform 0.4s ease;
  }

  .hero-visual:hover .hero-visual-frame {
    transform: rotate(0deg) translateY(-4px);
  }

  .hero-photo {
    display: block;

    width: 100%;
    height: auto;

    aspect-ratio: 520 / 560;

    object-fit: cover;

    transition: transform 0.6s ease;
  }

  .hero-visual:hover .hero-photo {
    transform: scale(1.025);
  }

  /* Image overlay */

  .hero-image-overlay {
    position: absolute;
    inset: 0;

    background:
      linear-gradient(
        180deg,
        rgba(15, 27, 45, 0.02) 35%,
        rgba(15, 27, 45, 0.28) 100%
      );

    pointer-events: none;
  }

  /* Image badge */

  .hero-image-badge {
    position: absolute;

    left: 1.2rem;
    bottom: 1.2rem;

    display: flex;
    align-items: center;
    gap: 0.5rem;

    padding: 0.65rem 0.85rem;

    background: rgba(255, 255, 255, 0.92);

    backdrop-filter: blur(12px);

    border: 1px solid rgba(255, 255, 255, 0.8);

    border-radius: 10px;

    color: #0f1b2d;

    font-size: 0.72rem;
    font-weight: 700;

    box-shadow:
      0 10px 25px rgba(15, 27, 45, 0.12);
  }

  .status-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #2c8cf4;

    box-shadow:
      0 0 0 4px rgba(44, 140, 244, 0.12);
  }

  /* ---------------------------------------------
    Floating Cards
  --------------------------------------------- */

  .floating-card {
    position: absolute;

    display: flex;
    align-items: center;
    gap: 0.7rem;

    min-width: 155px;

    padding: 0.75rem 0.9rem;

    background: rgba(255, 255, 255, 0.94);

    backdrop-filter: blur(14px);

    border: 1px solid rgba(255, 255, 255, 0.9);

    border-radius: 15px;

    box-shadow:
      0 18px 45px rgba(15, 27, 45, 0.12);

    font-size: 0.82rem;

    z-index: 5;

    transition:
      transform 0.3s ease,
      box-shadow 0.3s ease;
  }

  .floating-card:hover {
    transform: translateY(-5px);

    box-shadow:
      0 24px 50px rgba(15, 27, 45, 0.16);
  }

  .fc-icon {
    width: 38px;
    height: 38px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 11px;

    background: rgba(44, 140, 244, 0.09);

    color: #2c8cf4;

    font-size: 1.05rem;
  }

  .fc-title {
    display: block;

    margin-bottom: 2px;

    color: #7b8795;

    font-size: 0.68rem;
    font-weight: 600;
  }

  .fc-value {
    display: block;

    color: #0f1b2d;

    font-weight: 800;
    font-size: 0.92rem;
  }

  .fc-1 {
    top: 1rem;
    left: -2rem;
  }

  .fc-2 {
    right: -2rem;
    bottom: 6rem;
  }

  .fc-3 {
    left: 1.5rem;
    bottom: -0.5rem;
  }

  /* ---------------------------------------------
    Responsive
  --------------------------------------------- */

  @media (max-width: 1199.98px) {

    .fc-1 {
      left: -1rem;
    }

    .fc-2 {
      right: -1rem;
    }

  }

  @media (max-width: 991.98px) {

    .hero-section {
      padding: 5rem 0 5.5rem;
    }

    .hero-heading {
      font-size: clamp(
        2.4rem,
        5vw,
        3.2rem
      );
    }

    .hero-content {
      text-align: center;
    }

    .section-badge.badge-light {
      margin-left: auto;
      margin-right: auto;
    }

    .hero-subtext {
      margin-left: auto;
      margin-right: auto;
    }

    .hero-cta-row {
      justify-content: center;
    }

    .hero-trust {
      justify-content: center;
    }

    .hero-visual {
      max-width: 520px;
      margin: 2rem auto 0;
    }

    .medical-icon-5,
    .medical-icon-6,
    .plus-1,
    .plus-2,
    .plus-3 {
      display: none;
    }

  }

  @media (max-width: 575.98px) {

    .hero-section {
      padding: 4rem 0 4.5rem;
    }

    .hero-heading {
      font-size: 2.25rem;
      line-height: 1.1;
    }

    .hero-subtext {
      font-size: 0.98rem;
      line-height: 1.65;
    }

    .hero-cta-row {
      flex-direction: column;
      width: 100%;
    }

    .hero-cta-row .btn {
      width: 100%;
    }

    .hero-trust {
      gap: 0.7rem;
      flex-direction: column;
      align-items: center;
    }

    .hero-visual {
      padding: 0.5rem 0 1rem;
    }

    .hero-visual-frame {
      border-width: 5px;
      border-radius: 22px;
    }

    .floating-card {
      display: none;
    }

    .medical-icon {
      width: 55px;
      height: 55px;

      font-size: 1.4rem;
    }

    .medical-icon-1 {
      top: 7%;
      left: 2%;
    }

    .medical-icon-2 {
      top: 5%;
      right: 2%;
    }

    .medical-icon-3 {
      bottom: 5%;
      left: 3%;
    }

    .medical-icon-4 {
      bottom: 4%;
      right: 3%;
    }

  }


  /* =========================================================
   PREMIUM ABOUT SECTION
   Light Healthcare Theme
   Dark  : #0F1B2D
   Blue  : #2C8CF4
   White : #FFFFFF
========================================================= */

.about-section {
  position: relative;
  background:
    linear-gradient(
      135deg,
      #ffffff 0%,
      #f8fbff 52%,
      #ffffff 100%
    );

  overflow: hidden;
  isolation: isolate;
}


/* =========================================================
   BACKGROUND
========================================================= */

.about-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: -1;
}


/* Soft blue glow */

.about-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(5px);
}

.about-orb-1 {
  width: 420px;
  height: 420px;

  top: -180px;
  left: -150px;

  background: radial-gradient(
    circle,
    rgba(44, 140, 244, 0.10),
    transparent 70%
  );
}

.about-orb-2 {
  width: 500px;
  height: 500px;

  bottom: -260px;
  right: -200px;

  background: radial-gradient(
    circle,
    rgba(44, 140, 244, 0.09),
    transparent 70%
  );
}


/* =========================================================
   FLOATING MEDICAL ICONS
========================================================= */

.about-medical-icon {
  position: absolute;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 70px;
  height: 70px;

  border-radius: 20px;

  background: rgba(255, 255, 255, 0.75);

  border: 1px solid rgba(44, 140, 244, 0.10);

  color: rgba(44, 140, 244, 0.20);

  font-size: 2rem;

  box-shadow:
    0 15px 40px rgba(15, 27, 45, 0.06);

  backdrop-filter: blur(10px);

  animation: aboutMedicalFloat 8s ease-in-out infinite;
}


/* Hospital */

.about-icon-1 {
  top: 12%;
  left: 3%;

  color: rgba(44, 140, 244, 0.23);

  transform: rotate(-8deg);

  animation-delay: 0s;
}


/* Heart */

.about-icon-2 {
  top: 9%;
  right: 7%;

  width: 62px;
  height: 62px;

  color: rgba(44, 140, 244, 0.17);

  transform: rotate(7deg);

  animation-delay: 1.5s;
}


/* Capsule */

.about-icon-3 {
  bottom: 16%;
  left: 6%;

  width: 58px;
  height: 58px;

  color: rgba(15, 27, 45, 0.14);

  transform: rotate(10deg);

  animation-delay: 2.5s;
}


/* Shield */

.about-icon-4 {
  bottom: 10%;
  right: 5%;

  width: 74px;
  height: 74px;

  color: rgba(44, 140, 244, 0.16);

  transform: rotate(-10deg);

  animation-delay: 3.5s;
}


/* Clipboard */

.about-icon-5 {
  top: 48%;
  left: 42%;

  width: 50px;
  height: 50px;

  border-radius: 15px;

  font-size: 1.35rem;

  color: rgba(44, 140, 244, 0.12);

  opacity: 0.75;

  animation-delay: 1s;
}


/* Doctor / patient */

.about-icon-6 {
  top: 65%;
  right: 27%;

  width: 52px;
  height: 52px;

  border-radius: 15px;

  font-size: 1.4rem;

  color: rgba(15, 27, 45, 0.10);

  opacity: 0.7;

  animation-delay: 4s;
}


@keyframes aboutMedicalFloat {

  0%,
  100% {
    transform: translateY(0) rotate(-8deg);
  }

  50% {
    transform: translateY(-14px) rotate(-4deg);
  }

}


/* =========================================================
   MEDICAL PLUS DECORATIONS
========================================================= */

.about-plus {
  position: absolute;

  color: rgba(44, 140, 244, 0.16);

  font-size: 2rem;

  font-weight: 300;

  user-select: none;
}

.about-plus-1 {
  top: 25%;
  left: 27%;
}

.about-plus-2 {
  bottom: 25%;
  left: 42%;

  font-size: 1.4rem;
}

.about-plus-3 {
  top: 30%;
  right: 23%;

  font-size: 1.3rem;
}


/* =========================================================
   CONTENT
========================================================= */

.about-content {
  position: relative;
  z-index: 3;
}

.about-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;

  background: rgba(44, 140, 244, 0.07);

  border: 1px solid rgba(44, 140, 244, 0.14);

  color: #2c8cf4;

  padding: 0.55rem 0.95rem;

  border-radius: 999px;

  font-size: 0.78rem;

  font-weight: 700;

  margin-bottom: 1.2rem;
}

.about-badge i {
  font-size: 0.9rem;
}


/* Heading */

.about-content h2 {
  max-width: 620px;

  font-size: clamp(
    2rem,
    1.5rem + 1.8vw,
    2.9rem
  );

  line-height: 1.12;

  letter-spacing: -0.035em;

  margin-bottom: 1rem;
}


/* Description */

.about-content .section-lead {
  max-width: 600px;

  color: #627084;

  font-size: 1rem;

  line-height: 1.75;

  margin-bottom: 1.8rem;
}


/* =========================================================
   ABOUT IMAGE
========================================================= */

.about-visual {
  position: relative;

  padding: 1.4rem 1.8rem 2rem 1rem;

  z-index: 2;
}


/* Glow behind image */

.about-image-glow {
  position: absolute;

  width: 360px;
  height: 360px;

  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%);

  border-radius: 50%;

  background: rgba(44, 140, 244, 0.12);

  filter: blur(65px);

  z-index: -1;
}


/* Main frame */

.about-image-frame {
  position: relative;

  overflow: hidden;

  border-radius: 28px;

  background: #ffffff;

  border: 8px solid #ffffff;

  box-shadow:
    0 35px 75px rgba(15, 27, 45, 0.13),
    0 8px 30px rgba(44, 140, 244, 0.09);

  transform: rotate(-1deg);

  transition:
    transform 0.45s ease,
    box-shadow 0.45s ease;
}


.about-visual:hover .about-image-frame {
  transform: rotate(0deg) translateY(-5px);

  box-shadow:
    0 40px 90px rgba(15, 27, 45, 0.15),
    0 12px 35px rgba(44, 140, 244, 0.12);
}


/* Image */

.about-photo {
  display: block;

  width: 100%;
  height: auto;

  aspect-ratio: 480 / 500;

  object-fit: cover;

  transition: transform 0.7s ease;
}


.about-visual:hover .about-photo {
  transform: scale(1.035);
}


/* Image overlay */

.about-image-overlay {
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      180deg,
      rgba(15, 27, 45, 0.01) 35%,
      rgba(15, 27, 45, 0.24) 100%
    );

  pointer-events: none;
}


/* =========================================================
   IMAGE BADGE
========================================================= */

.about-image-badge {
  position: absolute;

  left: 1.2rem;
  bottom: 1.2rem;

  display: flex;
  align-items: center;

  gap: 0.65rem;

  padding: 0.7rem 0.9rem;

  border-radius: 13px;

  background: rgba(255, 255, 255, 0.94);

  border: 1px solid rgba(255, 255, 255, 0.9);

  backdrop-filter: blur(14px);

  box-shadow:
    0 15px 30px rgba(15, 27, 45, 0.14);
}


.about-image-badge strong {
  display: block;

  color: #0f1b2d;

  font-size: 0.75rem;

  line-height: 1.3;
}


.about-image-badge small {
  display: block;

  color: #7c8898;

  font-size: 0.64rem;

  margin-top: 2px;
}


.about-status-dot {
  width: 9px;
  height: 9px;

  flex-shrink: 0;

  border-radius: 50%;

  background: #2c8cf4;

  box-shadow:
    0 0 0 5px rgba(44, 140, 244, 0.10);
}


/* =========================================================
   FLOATING STAT CARDS
========================================================= */

.about-floating-card {
  position: absolute;

  display: flex;
  align-items: center;

  gap: 0.7rem;

  min-width: 175px;

  padding: 0.8rem 1rem;

  background: rgba(255, 255, 255, 0.96);

  border: 1px solid rgba(255, 255, 255, 0.9);

  border-radius: 15px;

  box-shadow:
    0 20px 45px rgba(15, 27, 45, 0.13);

  backdrop-filter: blur(15px);

  z-index: 5;

  animation: aboutCardFloat 5.5s ease-in-out infinite;
}


.about-card-icon {
  width: 40px;
  height: 40px;

  flex-shrink: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 11px;

  background: rgba(44, 140, 244, 0.09);

  color: #2c8cf4;

  font-size: 1.05rem;
}


.about-floating-card span {
  display: block;

  color: #7c8898;

  font-size: 0.67rem;

  font-weight: 600;

  margin-bottom: 2px;
}


.about-floating-card strong {
  display: block;

  color: #0f1b2d;

  font-size: 0.95rem;

  font-weight: 800;
}


.about-card-1 {
  top: 2rem;
  left: -1rem;

  animation-delay: 0s;
}


.about-card-2 {
  right: -1rem;
  bottom: 3rem;

  animation-delay: 1.7s;
}


@keyframes aboutCardFloat {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-9px);
  }

}


/* =========================================================
   FEATURE LIST
========================================================= */

.about-list {
  display: flex;

  flex-direction: column;

  gap: 0.65rem;

  margin-top: 1.4rem;
}


/* Feature */

.about-feature {
  position: relative;

  display: flex;
  align-items: center;

  gap: 0.9rem;

  padding: 0.85rem 0.95rem;

  background: rgba(255, 255, 255, 0.78);

  border: 1px solid #e6edf5;

  border-radius: 15px;

  box-shadow:
    0 8px 24px rgba(15, 27, 45, 0.035);

  transition:
    transform 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    background 0.3s ease;
}


.about-feature:hover {
  transform: translateX(5px);

  background: #ffffff;

  border-color: rgba(44, 140, 244, 0.28);

  box-shadow:
    0 14px 32px rgba(15, 27, 45, 0.08);
}


/* Icon */

.about-feature-icon {
  width: 42px;
  height: 42px;

  flex-shrink: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 12px;

  background: rgba(44, 140, 244, 0.08);

  color: #2c8cf4;

  font-size: 1.1rem;

  transition:
    background 0.3s ease,
    color 0.3s ease,
    transform 0.3s ease;
}


.about-feature:hover .about-feature-icon {
  background: #2c8cf4;

  color: #ffffff;

  transform: scale(1.05);
}


/* Content */

.about-feature-content {
  min-width: 0;

  flex: 1;
}


.about-feature-content strong {
  display: block;

  color: #0f1b2d;

  font-size: 0.9rem;

  font-weight: 700;

  line-height: 1.3;

  margin-bottom: 3px;
}


.about-feature-content span {
  display: block;

  color: #7c8898;

  font-size: 0.76rem;

  line-height: 1.45;
}


/* Arrow */

.about-feature-arrow {
  flex-shrink: 0;

  color: #b5c0ce;

  font-size: 0.85rem;

  transition:
    color 0.3s ease,
    transform 0.3s ease;
}


.about-feature:hover .about-feature-arrow {
  color: #2c8cf4;

  transform: translate(2px, -2px);
}


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

@media (max-width: 1199.98px) {

  .about-visual {
    padding-left: 0.5rem;
    padding-right: 1.2rem;
  }

  .about-card-1 {
    left: -0.5rem;
  }

  .about-card-2 {
    right: -0.5rem;
  }

}


@media (max-width: 991.98px) {

  .about-section {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .about-visual {
    max-width: 560px;

    margin: 0 auto 1rem;

    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .about-content {
    max-width: 700px;

    margin: 0 auto;
  }

  .about-icon-5,
  .about-icon-6,
  .about-plus-1,
  .about-plus-2,
  .about-plus-3 {
    display: none;
  }

}


@media (max-width: 767.98px) {

  .about-section {
    padding-top: 4rem;
    padding-bottom: 4.5rem;
  }

  .about-content h2 {
    font-size: 2rem;
  }

  .about-content .section-lead {
    font-size: 0.96rem;
  }

  .about-feature {
    padding: 0.8rem;
  }

  .about-feature-content strong {
    font-size: 0.86rem;
  }

  .about-feature-content span {
    font-size: 0.73rem;
  }

  .about-feature-arrow {
    display: none;
  }

  .about-floating-card {
    min-width: 155px;

    padding: 0.65rem 0.75rem;
  }

  .about-card-1 {
    top: 1rem;
    left: -0.5rem;
  }

  .about-card-2 {
    right: -0.5rem;
    bottom: 2rem;
  }

  .about-medical-icon {
    width: 55px;
    height: 55px;

    font-size: 1.45rem;
  }

}


@media (max-width: 575.98px) {

  .about-visual {
    padding: 0.4rem 0 1.5rem;
  }

  .about-image-frame {
    border-width: 5px;

    border-radius: 22px;
  }

  .about-photo {
    aspect-ratio: 480 / 470;
  }

  .about-image-badge {
    left: 0.8rem;
    bottom: 0.8rem;

    padding: 0.6rem 0.7rem;
  }

  .about-image-badge strong {
    font-size: 0.68rem;
  }

  .about-image-badge small {
    font-size: 0.58rem;
  }

  .about-floating-card {
    display: none;
  }

  .about-icon-1 {
    top: 7%;
    left: 2%;
  }

  .about-icon-2 {
    top: 6%;
    right: 2%;
  }

  .about-icon-3 {
    bottom: 5%;
    left: 3%;
  }

  .about-icon-4 {
    bottom: 4%;
    right: 3%;
  }

}



  /* ===================== TRUSTED BY / STATISTICS (dark, mandatory) ===================== */
  .trustedby-section{ padding: 3.75rem 0; background: var(--dark-soft); border-top: 1px solid rgba(255,255,255,0.06); border-bottom: 1px solid rgba(255,255,255,0.06); }
  .trustedby-label{ color: rgba(255,255,255,0.55); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.02em; margin-bottom: 1.5rem; }
  .logo-marquee{ overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
  .logo-track{ display: flex; align-items: center; gap: 1.5rem; width: max-content; animation: marquee-scroll 28s linear infinite; }
  .logo-marquee:hover .logo-track{ animation-play-state: paused; }
  @keyframes marquee-scroll{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
  .logo-chip{
    flex: 0 0 auto;
    width: 130px; height: 68px;
    background: #ffffff;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    padding: 0.8rem 1.1rem;
    box-shadow: 0 8px 20px -12px rgba(0,0,0,0.4);
  }
  .logo-chip img{ max-width: 100%; max-height: 100%; object-fit: contain; }
  .counter-row{ margin-top: 2.5rem; }
  .counter-card{ text-align: center; }
  .counter-value{ display: block; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.8rem, 1.5rem + 1vw, 2.4rem); color: #fff; }
  .counter-label{ display: block; color: rgba(255,255,255,0.55); font-size: 0.85rem; margin-top: 0.25rem; }

  /* ===================== ABOUT (light) ===================== */
  .about-visual svg, .about-photo{ width: 100%; height: auto; aspect-ratio: 480 / 400; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
  .about-list{ list-style: none; padding: 0; margin: 1.5rem 0 0; }
  .about-list li{ display: flex; gap: 1rem; padding: 0.9rem 0; border-bottom: 1px solid var(--border-soft); }
  .about-list li:last-child{ border-bottom: none; }
  .about-list i{ color: var(--primary); font-size: 1.3rem; margin-top: 0.15rem; }
  .about-list strong{ display: block; color: var(--dark); font-size: 0.98rem; }
  .about-list span{ display: block; color: var(--ink-400); font-size: 0.88rem; margin-top: 0.15rem; }

  /* ===================== SERVICES (light, premium cards) ===================== */
  
  /* ===================== WHY DOCTORS CHOOSE US (dark, mandatory) ===================== */
  .whyus-dark-section{ background: var(--dark); }
  .dark-feature-card{
    background: var(--dark-soft);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px;
    padding: 1.9rem;
    height: 100%;
    transition: var(--transition-base);
  }
  .dark-feature-card:hover{ border-color: var(--primary); transform: translateY(-4px); box-shadow: var(--shadow-glow); }
  .dark-feature-card i{ color: var(--primary); font-size: 1.6rem; display: block; margin-bottom: 0.85rem; }
  .dark-feature-card h3{ color: #fff; font-size: 1.05rem; }
  .dark-feature-card p{ color: rgba(255,255,255,0.62); font-size: 0.9rem; margin-bottom: 0; }

  /* ===================== RESULTS (light) ===================== */
  .results-section{ background: var(--bg-light); }
  .result-card{
    background: #fff;
    border: 1px solid var(--border-soft);
    border-radius: 20px;
    padding: 1.8rem;
    height: 100%;
    text-align: left;
    box-shadow: var(--shadow-card);
    transition: var(--transition-base);
  }
  .result-card:hover{ transform: translateY(-5px); border-color: var(--primary); box-shadow: var(--shadow-soft); }
  .result-card i{ color: var(--primary); font-size: 1.4rem; }
  .result-value{ display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.9rem; color: var(--dark); margin-top: 0.6rem; }
  .result-label{ display: block; color: var(--ink-400); font-size: 0.85rem; margin-top: 0.2rem; }
  .mini-bars{ display: flex; align-items: flex-end; gap: 0.3rem; height: 46px; margin-top: 1.1rem; }
  .mini-bars span{ flex: 1; background: var(--tint-strong); border-radius: 3px 3px 0 0; }
  .mini-bars span:last-child{ background: var(--primary); }
  .results-disclaimer{ color: var(--ink-400); font-size: 0.8rem; margin-top: 2rem; }

  /* ===================== SUCCESS STORIES (light, subtle blue gradient) ===================== */
  .success-section{ background: linear-gradient(180deg, #ffffff 0%, var(--tint) 100%); }
  .case-card{
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 2rem;
    height: 100%;
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-card);
    transition: var(--transition-base);
  }
  .case-photo{
    margin: -2rem -2rem 1.3rem;
    height: 170px;
    overflow: hidden;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
  .case-photo img{ width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
  .case-card:hover .case-photo img{ transform: scale(1.06); }
  .case-card:hover{ transform: translateY(-6px); border-color: var(--primary); box-shadow: var(--shadow-soft); }
  .case-tag{ display: inline-block; background: var(--dark); color: #7db8f8; font-size: 0.78rem; font-weight: 600; padding: 0.35rem 0.9rem; border-radius: 100px; margin-bottom: 1.1rem; }
  .case-metrics{ display: flex; gap: 1.75rem; margin-bottom: 1rem; }
  .case-num{ display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.7rem; color: var(--primary-deep); }
  .case-note{ display: block; color: var(--ink-400); font-size: 0.8rem; }
  .case-card p{ font-size: 0.92rem; margin-bottom: 0; }

  /* ===================== OUR PROCESS (light) ===================== */
  .process-section{ background: var(--tint); }
  .process-card{
    background: #fff;
    border: 1px solid var(--border-soft);
    border-radius: 18px;
    padding: 1.6rem 1.4rem;
    height: 100%;
    box-shadow: var(--shadow-card);
    transition: var(--transition-base);
    position: relative;
  }
  .process-card:hover{ transform: translateY(-5px); border-color: var(--primary); box-shadow: var(--shadow-soft); }
  .process-num{
    display: inline-block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--primary);
    opacity: 0.85;
    margin-bottom: 0.5rem;
  }
  .process-card h3{ font-size: 1rem; }
  .process-card p{ font-size: 0.86rem; margin-bottom: 0; }

  /* ===================== HOSPITAL WEBSITE MANAGEMENT (light) ===================== */
  .webmgmt-section{ background: var(--bg-light); }
  .webmgmt-section h3{ font-size: 1.5rem; margin-top: 0.4rem; }
  .webmgmt-tag{
    display: inline-flex; align-items: center; gap: 0.5rem;
    background: var(--primary-tint); border: 1px solid var(--primary-tint-strong);
    color: var(--primary-deep); font-weight: 600; font-size: 0.85rem;
    padding: 0.55rem 1.2rem; border-radius: 100px; margin-top: 1.1rem;
  }
  .webmgmt-tag i{ color: var(--primary); }

  .webmgmt-problem{ border-top: 1px solid var(--border-soft); padding-top: 3rem; }
  .problem-card{
    background: #fff;
    border: 1px solid var(--border-soft);
    border-radius: 18px;
    padding: 1.8rem 1.5rem;
    height: 100%;
    text-align: center;
    box-shadow: var(--shadow-card);
    transition: var(--transition-base);
  }
  .problem-card:hover{ transform: translateY(-5px); border-color: var(--primary); box-shadow: var(--shadow-soft); }
  .problem-card i{ color: var(--primary); font-size: 1.8rem; display: block; margin-bottom: 1rem; }
  .problem-card h4{ font-family: var(--font-display); font-weight: 600; color: var(--dark); font-size: 1.02rem; margin-bottom: 0.5rem; }
  .problem-card p{ font-size: 0.88rem; margin-bottom: 0; }

  .webmgmt-ux{ border-top: 1px solid var(--border-soft); }
  .webmgmt-timeline .journey-step{ background: var(--tint); }
  .click-target-badge{
    display: flex; align-items: baseline; justify-content: center; gap: 0.6rem;
    max-width: 260px; margin: 0 auto;
    background: var(--dark); border-radius: 100px;
    padding: 0.9rem 1.8rem;
    box-shadow: var(--shadow-glow);
  }
  .click-target-num{ font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; color: #fff; }
  .click-target-label{ font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #7db8f8; }

  /* ===================== JOURNEY (light) ===================== */
  .journey-section{ background: var(--bg-light); }
  .journey-timeline{ display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 0.5rem; }
  .journey-step{ background: #fff; border: 1px solid var(--border-soft); border-radius: 20px; padding: 1.3rem 1.4rem; text-align: center; min-width: 150px; flex: 1 1 0; box-shadow: var(--shadow-card); transition: var(--transition-base); }
  .journey-step:hover{ border-color: var(--primary); transform: translateY(-4px); }
  .journey-num{
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--primary); color: #fff; font-weight: 700; font-family: var(--font-display);
  }
  .journey-label{ display: block; font-weight: 600; color: var(--dark); font-size: 0.92rem; margin-top: 0.6rem; }
  .journey-connector{ color: var(--primary); flex: 0 0 auto; font-size: 1.2rem; }
  @media (max-width: 767.98px){
    .journey-timeline{ flex-direction: column; align-items: stretch; overflow-x: visible; }
    .journey-connector{ transform: rotate(90deg); align-self: center; }
    .journey-step{ min-width: unset; }
  }

  /* ===================== TESTIMONIALS (light, mandatory) ===================== */
  .testimonials-section{ background: var(--tint); }
  .testimonial-card{
    background: #fff;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    padding: 2rem;
    height: 100%;
    box-shadow: var(--shadow-card);
    transition: var(--transition-base);
  }
  .testimonial-card:hover{ border-color: var(--primary); transform: translateY(-5px); box-shadow: var(--shadow-soft); }
  .stars{ color: var(--primary); font-size: 0.9rem; margin-bottom: 1rem; }
  .testimonial-card p{ color: var(--ink-600); font-size: 0.95rem; font-style: italic; }
  .testimonial-author{ display: flex; align-items: center; gap: 0.75rem; margin-top: 1.25rem; }
  .author-avatar{ font-size: 2.3rem; color: var(--border-soft); line-height: 1; }
  .testimonial-author strong{ display: block; color: var(--dark); font-size: 0.92rem; }
  .testimonial-author span{ display: block; color: var(--ink-400); font-size: 0.8rem; }

  /* Testimonial carousel */
  .testimonial-carousel{ position: relative; padding: 0 3.5rem; }
  .testimonial-carousel .carousel-item{ transition: transform 0.6s ease-in-out; }
  .testimonial-carousel .carousel-control-prev,
  .testimonial-carousel .carousel-control-next{ position: absolute; width: auto; opacity: 1; }
  .testimonial-carousel .carousel-control-prev{ left: 0; }
  .testimonial-carousel .carousel-control-next{ right: 0; }
  .testimonial-arrow{
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 50%;
    background: #fff; border: 1px solid var(--border-soft); color: var(--primary);
    font-size: 1.1rem; box-shadow: var(--shadow-card); transition: var(--transition-base);
  }
  .testimonial-carousel .carousel-control-prev:hover .testimonial-arrow,
  .testimonial-carousel .carousel-control-next:hover .testimonial-arrow{ background: var(--primary); color: #fff; box-shadow: var(--shadow-glow); }
  .testimonial-indicators{ position: static; margin-top: 2rem; }
  .testimonial-indicators [data-bs-target]{
    width: 9px; height: 9px; border-radius: 50%; background: var(--border-soft);
    border: none; opacity: 1; margin: 0 5px;
  }
  .testimonial-indicators .active{ background: var(--primary); width: 22px; border-radius: 5px; }
  @media (max-width: 767.98px){
    .testimonial-carousel{ padding: 0 2.75rem; }
    .testimonial-arrow{ width: 38px; height: 38px; font-size: 1rem; }
  }

  /* ===================== SPECIALITIES (light, mandatory) ===================== */
  .specialities-section{ background: var(--bg-light); }
  .spec-tile{
    display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
    background: #fff; border: 1px solid var(--border-soft); border-radius: 18px;
    padding: 1.5rem 1rem; height: 100%; text-align: center; transition: var(--transition-base);
    box-shadow: var(--shadow-card);
  }
  .spec-tile:hover{ border-color: var(--primary); transform: translateY(-4px); box-shadow: var(--shadow-soft); }
  .spec-tile i{ color: var(--primary); font-size: 1.6rem; }
  .spec-tile span{ font-weight: 500; font-size: 0.88rem; color: var(--dark); }

  /* ===================== FAQ (light, mandatory) ===================== */
  .faq-section{ background: var(--bg-light); }
  .accordion-item{ border: 1px solid var(--border-soft); border-radius: 14px !important; margin-bottom: 0.85rem; overflow: hidden; }
  .accordion-button{ font-weight: 600; color: var(--dark); font-size: 0.98rem; background: #fff; font-family: var(--font-body); }
  .accordion-button:not(.collapsed){ color: var(--primary-deep); background: var(--primary-tint); box-shadow: none; }
  .accordion-button:focus{ box-shadow: none; border-color: var(--border-soft); }
  .accordion-button::after{ filter: none; }
  .accordion-body{ color: var(--ink-400); font-size: 0.93rem; }

  /* ===================== FINAL CTA (dark, mandatory) ===================== */
  .final-cta-section{
    background: var(--dark);
    padding: 5.5rem 0;
    position: relative;
    overflow: hidden;
  }
  .final-cta-section::before{
    content: "";
    position: absolute;
    width: 560px; height: 560px; border-radius: 50%;
    background: radial-gradient(circle, rgba(44,140,244,0.22), transparent 70%);
    top: -260px; left: -180px;
  }
  .final-cta-section::after{
    content: "";
    position: absolute;
    width: 460px; height: 460px; border-radius: 50%;
    background: radial-gradient(circle, rgba(44,140,244,0.16), transparent 70%);
    bottom: -220px; right: -160px;
  }
  .urgency-badge{
    display: inline-flex; align-items: center; gap: 0.5rem;
    background: rgba(44,140,244,0.14);
    border: 1px solid rgba(44,140,244,0.4);
    color: #7db8f8;
    padding: 0.5rem 1.2rem;
    border-radius: 100px;
    font-size: 0.82rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    position: relative;
  }
  .final-cta-section h2{ position: relative; margin-bottom: 0.75rem; }
  .final-cta-section p{ position: relative; color: rgba(255,255,255,0.7); font-size: 1.05rem; margin-bottom: 2.5rem; }
  .consult-form{ position: relative; max-width: 760px; margin: 0 auto; }
  .consult-form .form-control, .consult-form .form-select{
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.18);
    color: #fff;
    border-radius: 10px;
    padding: 0.7rem 0.95rem;
  }
  .consult-form .form-control::placeholder{ color: rgba(255,255,255,0.45); }
  .consult-form .form-control:focus, .consult-form .form-select:focus{
    background: rgba(255,255,255,0.1);
    border-color: var(--primary);
    box-shadow: 0 0 0 0.2rem rgba(44,140,244,0.18);
    color: #fff;
  }
  .consult-form select option{ color: #111; }
  .btn-spinner{ margin-left: 0.5rem; }

  /* ===================== FOOTER (dark, mandatory) ===================== */
  .site-footer{
    background: var(--dark-soft);
    color: rgba(255,255,255,0.65);
    padding: 4.5rem 0 1.5rem;
    border-top: 1px solid rgba(44,140,244,0.18);
    box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset;
    position: relative;
  }
  .site-footer .navbar-brand{ color: #fff; }
  .footer-desc{ color: rgba(255,255,255,0.5); font-size: 0.9rem; max-width: 320px; margin-top: 1rem; }
  .site-footer h4{ color: #fff; font-family: var(--font-body); font-weight: 600; font-size: 1rem; margin-bottom: 1rem; }
  .footer-links{ list-style: none; padding: 0; margin: 0; }
  .footer-links li{ margin-bottom: 0.6rem; font-size: 0.9rem; display: flex; align-items: center; gap: 0.5rem; }
  .footer-links a{ color: rgba(255,255,255,0.6); transition: var(--transition-base); }
  .footer-links a:hover{ color: var(--primary); }
  .footer-links i{ color: var(--primary); }
  .footer-social{ display: flex; gap: 0.75rem; margin-top: 1.25rem; }
  .footer-social a{
    width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
    background: rgba(44,140,244,0.12); border: 1px solid rgba(44,140,244,0.3); border-radius: 50%; color: var(--primary); transition: var(--transition-base);
  }
  .footer-social a:hover{ background: var(--primary); color: #fff; }
  .site-footer hr{ border-color: rgba(255,255,255,0.12); margin: 2.5rem 0 1.5rem; }
  .footer-bottom p{ color: rgba(255,255,255,0.45); font-size: 0.85rem; margin: 0; }

  /* ===================== SCROLL REVEAL ===================== */
  .reveal-up{ opacity: 0; transform: translateY(26px); transition: opacity 0.6s ease, transform 0.6s ease; }
  .reveal-up.is-visible{ opacity: 1; transform: translateY(0); }
  @media (prefers-reduced-motion: reduce){
    .reveal-up{ opacity: 1; transform: none; transition: none; }
    .logo-track{ animation: none; }
    *{ scroll-behavior: auto !important; }
  }

  a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
    outline: 2px solid var(--primary);
    outline-offset: 2px;
  }

  /* =========================================================
   SERVICES SECTION — PREMIUM DARK HEALTHCARE
========================================================= */

.services-section{
  position:relative;
  overflow:hidden;
  isolation:isolate;

  background:
    radial-gradient(
      circle at 12% 15%,
      rgba(44,140,244,.16),
      transparent 30%
    ),
    radial-gradient(
      circle at 88% 78%,
      rgba(44,140,244,.10),
      transparent 32%
    ),
    #0F1B2D !important;

  color:#fff;
}


/* =========================================================
   BACKGROUND
========================================================= */

.services-bg{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:-1;
}

.services-orb{
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  filter:blur(100px);
}

.services-orb-1{
  width:450px;
  height:450px;
  top:-220px;
  left:-170px;

  background:
    rgba(44,140,244,.13);

  opacity:.7;
}

.services-orb-2{
  width:520px;
  height:520px;
  right:-250px;
  bottom:-250px;

  background:
    rgba(44,140,244,.11);

  opacity:.65;
}


/* =========================================================
   SUBTLE GRID
========================================================= */

.services-bg::after{
  content:"";

  position:absolute;
  inset:0;

  opacity:.025;

  background-image:
    linear-gradient(
      rgba(255,255,255,.6) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.6) 1px,
      transparent 1px
    );

  background-size:70px 70px;
}


/* =========================================================
   FLOATING MEDICAL ICONS
========================================================= */

.services-medical-icon{
  position:absolute;

  width:68px;
  height:68px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:20px;

  background:
    rgba(255,255,255,.035);

  border:1px solid
    rgba(255,255,255,.08);

  box-shadow:
    0 20px 45px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.04);

  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);

  opacity:.7;

  animation:
    servicesMedicalFloat 7s ease-in-out infinite;
}

.services-medical-icon i{
  font-size:1.55rem;
  line-height:1;
}


/* Individual icons */

.services-icon-1{
  top:12%;
  left:3%;

  color:rgba(44,140,244,.55);

  transform:rotate(-8deg);

  animation-delay:-1s;
}

.services-icon-2{
  top:30%;
  right:3%;

  color:rgba(255,255,255,.25);

  transform:rotate(7deg);

  animation-delay:-3s;
}

.services-icon-3{
  bottom:15%;
  left:5%;

  color:rgba(44,140,244,.42);

  transform:rotate(9deg);

  animation-delay:-5s;
}

.services-icon-4{
  bottom:8%;
  right:8%;

  color:rgba(255,255,255,.18);

  transform:rotate(-6deg);

  animation-delay:-2s;
}

.services-icon-5{
  top:8%;
  right:18%;

  width:52px;
  height:52px;

  border-radius:16px;

  color:rgba(44,140,244,.38);

  animation-delay:-4s;
}

.services-icon-6{
  bottom:25%;
  right:22%;

  width:54px;
  height:54px;

  border-radius:17px;

  color:rgba(44,140,244,.32);

  animation-delay:-6s;
}


@keyframes servicesMedicalFloat{

  0%,100%{
    translate:0 0;
  }

  50%{
    translate:0 -16px;
  }

}


/* =========================================================
   PLUS DECORATIONS
========================================================= */

.services-plus{
  position:absolute;

  font-family:var(--font-display);

  font-size:2.5rem;
  font-weight:500;

  color:rgba(44,140,244,.20);

  animation:
    servicesPlusFloat 6s ease-in-out infinite;
}

.services-plus-1{
  top:20%;
  left:18%;
}

.services-plus-2{
  top:62%;
  right:12%;

  font-size:2rem;

  animation-delay:-2s;
}

.services-plus-3{
  bottom:10%;
  left:22%;

  font-size:1.7rem;

  animation-delay:-4s;
}


@keyframes servicesPlusFloat{

  0%,100%{
    transform:translateY(0) rotate(0deg);
  }

  50%{
    transform:translateY(-10px) rotate(8deg);
  }

}


/* =========================================================
   SECTION HEADING
========================================================= */

.services-heading{
  position:relative;
  z-index:2;
}

.services-badge{
  display:inline-flex;
  align-items:center;
  gap:.45rem;

  background:rgba(44,140,244,.10) !important;
  border:1px solid rgba(44,140,244,.25) !important;

  color:#7db8f8 !important;
}

.services-badge i{
  font-size:.9rem;
}

.services-heading h2{
  max-width:780px;

  margin-left:auto;
  margin-right:auto;
  margin-bottom:.9rem;

  color:#FFFFFF !important;
}

.services-heading h2 .text-accent{
  color:#2C8CF4 !important;
}

.services-intro{
  max-width:620px;

  margin:0 auto;

  color:rgba(255,255,255,.60) !important;

  font-size:1rem;
}


/* =========================================================
   SERVICE CARDS
========================================================= */

.service-glass-card{
  position:relative;

  height:100%;
  min-height:285px;

  padding:1.65rem;

  display:flex;
  flex-direction:column;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.065),
      rgba(255,255,255,.025)
    );

  border:1px solid
    rgba(255,255,255,.09);

  border-radius:22px;

  box-shadow:
    0 20px 50px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.035);

  overflow:hidden;

  transition:
    transform .35s ease,
    box-shadow .35s ease,
    border-color .35s ease,
    background .35s ease;
}


/* Ambient blue glow */

.service-glass-card::before{
  content:"";

  position:absolute;

  width:160px;
  height:160px;

  top:-90px;
  right:-70px;

  border-radius:50%;

  background:
    rgba(44,140,244,.12);

  filter:blur(8px);

  transition:.4s ease;
}


/* Bottom accent line */

.service-glass-card::after{
  content:"";

  position:absolute;

  left:1.65rem;
  right:1.65rem;
  bottom:0;

  height:2px;

  background:
    linear-gradient(
      90deg,
      transparent,
      #2C8CF4,
      transparent
    );

  transform:scaleX(0);

  transform-origin:center;

  transition:.4s ease;
}


.service-glass-card:hover{

  transform:translateY(-9px);

  border-color:
    rgba(44,140,244,.34);

  background:
    linear-gradient(
      145deg,
      rgba(44,140,244,.085),
      rgba(255,255,255,.025)
    );

  box-shadow:
    0 30px 65px rgba(0,0,0,.25),
    0 12px 35px rgba(44,140,244,.10);
}


.service-glass-card:hover::before{
  width:230px;
  height:230px;

  background:
    rgba(44,140,244,.16);
}


.service-glass-card:hover::after{
  transform:scaleX(1);
}


/* =========================================================
   CARD TOP
========================================================= */

.service-card-top{
  position:relative;
  z-index:1;

  display:flex;
  align-items:flex-start;
  justify-content:space-between;

  margin-bottom:1.35rem;
}

.service-number{
  font-family:var(--font-body);

  font-size:.72rem;
  font-weight:700;

  letter-spacing:.12em;

  color:rgba(255,255,255,.30);
}


/* =========================================================
   SERVICE ICON
========================================================= */

.service-icon{
  width:52px;
  height:52px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:16px;

  color:#2C8CF4;

  background:
    linear-gradient(
      145deg,
      rgba(44,140,244,.16),
      rgba(44,140,244,.055)
    );

  border:1px solid
    rgba(44,140,244,.20);

  box-shadow:
    0 10px 28px rgba(44,140,244,.10);

  transition:
    transform .35s ease,
    background .35s ease,
    color .35s ease,
    box-shadow .35s ease;
}

.service-icon i{
  font-size:1.35rem;
}

.service-glass-card:hover .service-icon{

  transform:
    translateY(-3px)
    rotate(-4deg);

  background:#2C8CF4;

  color:#FFFFFF;

  box-shadow:
    0 14px 30px rgba(44,140,244,.30);
}


/* =========================================================
   CARD CONTENT
========================================================= */

.service-glass-card h3{
  position:relative;
  z-index:1;

  color:#FFFFFF !important;

  font-size:1.08rem;

  line-height:1.35;

  margin-bottom:.65rem;
}

.service-glass-card p{
  position:relative;
  z-index:1;

  margin:0;

  color:rgba(255,255,255,.54) !important;

  font-size:.88rem;

  line-height:1.65;
}


/* =========================================================
   CARD FOOTER
========================================================= */

.service-card-bottom{
  position:relative;
  z-index:1;

  display:flex;
  align-items:center;
  justify-content:space-between;

  margin-top:auto;
  padding-top:1.25rem;

  color:#2C8CF4;

  font-size:.76rem;

  font-weight:700;

  letter-spacing:.01em;
}

.service-card-bottom i{

  width:30px;
  height:30px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:50%;

  color:#2C8CF4;

  background:
    rgba(44,140,244,.10);

  transition:
    transform .3s ease,
    background .3s ease,
    color .3s ease;
}

.service-glass-card:hover .service-card-bottom i{

  transform:
    translate(3px,-3px);

  background:#2C8CF4;

  color:#FFFFFF;
}


/* =========================================================
   TRUST STRIP
========================================================= */

.services-trust{

  position:relative;

  max-width:900px;

  margin:4rem auto 0;

  display:flex;

  align-items:center;

  gap:1rem;

  padding:1.1rem 1.3rem;

  background:
    rgba(255,255,255,.045);

  border:
    1px solid rgba(255,255,255,.09);

  border-radius:18px;

  box-shadow:
    0 20px 45px rgba(0,0,0,.15);

  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}


.services-trust-icon{

  flex:0 0 auto;

  width:44px;
  height:44px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:14px;

  background:
    rgba(44,140,244,.12);

  color:#2C8CF4;

  border:
    1px solid rgba(44,140,244,.16);
}

.services-trust-icon i{
  font-size:1.15rem;
}

.services-trust strong{

  display:block;

  color:#FFFFFF;

  font-size:.88rem;

  line-height:1.3;
}

.services-trust span{

  display:block;

  margin-top:.15rem;

  color:rgba(255,255,255,.45);

  font-size:.78rem;
}

.services-trust-arrow{

  margin-left:auto;

  width:34px;
  height:34px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:50%;

  color:#2C8CF4;

  background:
    rgba(44,140,244,.09);

  transition:.3s ease;
}

.services-trust:hover .services-trust-arrow{

  transform:translateX(4px);

  background:#2C8CF4;

  color:#FFFFFF;
}


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

@media(max-width:1199.98px){

  .service-glass-card{
    min-height:295px;
  }

  .services-icon-5,
  .services-icon-6{
    display:none;
  }

}


@media(max-width:991.98px){

  .services-section{
    padding-top:5.5rem;
    padding-bottom:5.5rem;
  }

  .services-medical-icon{
    width:58px;
    height:58px;
  }

  .services-icon-1{
    left:-15px;
  }

  .services-icon-2{
    right:-15px;
  }

  .services-icon-3{
    left:-12px;
  }

  .services-icon-4{
    right:-12px;
  }

  .services-trust{
    margin-top:3rem;
  }

}


@media(max-width:767.98px){

  .services-intro{
    font-size:.92rem;
  }

  .service-glass-card{
    min-height:275px;
    padding:1.45rem;
  }

  .services-medical-icon{
    opacity:.45;
  }

  .services-icon-1{
    top:8%;
  }

  .services-icon-2{
    top:22%;
  }

  .services-icon-3{
    bottom:12%;
  }

  .services-icon-4{
    bottom:6%;
  }

  .services-plus{
    display:none;
  }

  .services-trust{
    align-items:flex-start;
    padding:1rem;
  }

  .services-trust-arrow{
    display:none;
  }

}


@media(max-width:575.98px){

  .services-section{
    padding-top:4.5rem;
    padding-bottom:4.5rem;
  }

  .services-heading h2{
    font-size:1.85rem;
  }

  .services-medical-icon{
    width:48px;
    height:48px;

    border-radius:14px;
  }

  .services-medical-icon i{
    font-size:1.15rem;
  }

  .services-icon-1{
    left:-20px;
  }

  .services-icon-2{
    right:-20px;
  }

  .services-icon-3,
  .services-icon-4{
    display:none;
  }

  .services-trust{
    gap:.75rem;
  }

  .services-trust-icon{
    width:40px;
    height:40px;

    border-radius:12px;
  }

  .services-trust strong{
    font-size:.82rem;
  }

  .services-trust span{
    font-size:.72rem;
  }

}

/* =========================================================
   WEBSITE MANAGEMENT
   LIGHT → DARK → LIGHT → DARK
========================================================= */


/* =========================================================
   01. HOSPITAL WEBSITE MANAGEMENT — LIGHT
========================================================= */

.webmgmt-light-section{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  padding:100px 0;
  background:#FFFFFF !important;
  color:#0F1B2D;
}

.webmgmt-light-section .webmgmt-bg{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:-1;
  overflow:hidden;
}

.webmgmt-light-section .webmgmt-glow{
  position:absolute;
  width:420px;
  height:420px;
  border-radius:50%;
  background:#2C8CF4;
  filter:blur(120px);
  opacity:.055;
}

.webmgmt-light-section .webmgmt-glow-1{
  top:-250px;
  right:-150px;
}

.webmgmt-light-section .webmgmt-glow-2{
  bottom:-280px;
  left:-160px;
}

.webmgmt-medical{
  position:absolute;
  width:58px;
  height:58px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(44,140,244,.10);
  border-radius:16px;
  background:rgba(255,255,255,.75);
  box-shadow:0 15px 35px rgba(15,27,45,.05);
  color:#2C8CF4;
  font-size:1.2rem;
  opacity:.38;
}

.webmgmt-medical-1{
  top:13%;
  left:4%;
  transform:rotate(-8deg);
}

.webmgmt-medical-2{
  top:30%;
  right:4%;
  transform:rotate(8deg);
}

.webmgmt-medical-3{
  bottom:18%;
  left:7%;
  transform:rotate(6deg);
}

.webmgmt-medical-4{
  bottom:12%;
  right:8%;
  transform:rotate(-7deg);
}

.webmgmt-plus{
  position:absolute;
  color:#2C8CF4;
  opacity:.22;
  font-family:var(--font-display);
  font-size:2rem;
}

.webmgmt-plus-1{
  top:18%;
  left:17%;
}

.webmgmt-plus-2{
  top:55%;
  right:14%;
}

.webmgmt-plus-3{
  bottom:12%;
  left:30%;
}


/* HERO */

.webmgmt-hero{
  max-width:850px;
  margin:0 auto 55px;
  text-align:center;
}

.webmgmt-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 13px;
  border:1px solid rgba(44,140,244,.16);
  border-radius:100px;
  background:rgba(44,140,244,.055);
  color:#2C8CF4;
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.webmgmt-eyebrow-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#2C8CF4;
  box-shadow:0 0 0 5px rgba(44,140,244,.10);
}

.webmgmt-hero h2{
  margin:20px auto 16px;
  max-width:820px;
  color:#0F1B2D !important;
  font-size:clamp(2.1rem,4vw,3.5rem);
  line-height:1.12;
}

.webmgmt-hero h2 span{
  color:#2C8CF4 !important;
}

.webmgmt-hero > p{
  max-width:700px;
  margin:0 auto;
  color:#667487 !important;
  font-size:.95rem;
  line-height:1.8;
}

.webmgmt-hero-tags{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:9px;
  margin-top:25px;
}

.webmgmt-hero-tags span{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:8px 12px;
  border:1px solid #E3EAF3;
  border-radius:100px;
  background:#fff;
  color:#607084;
  box-shadow:0 8px 20px rgba(15,27,45,.04);
  font-size:.67rem;
  font-weight:600;
}

.webmgmt-hero-tags i{
  color:#2C8CF4;
}


/* DASHBOARD */

.webmgmt-dashboard{
  max-width:1120px;
  margin:0 auto;
  padding:25px;
  border:1px solid #DCE6F1;
  border-radius:24px;
  background:#FFFFFF;
  box-shadow:
    0 30px 70px rgba(15,27,45,.10),
    0 4px 15px rgba(15,27,45,.035);
}

.webmgmt-dashboard-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:24px;
}

.dashboard-kicker{
  display:flex;
  align-items:center;
  gap:7px;
  color:#8793A2;
  font-size:.62rem;
  font-weight:800;
  letter-spacing:.1em;
}

.live-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#2C8CF4;
  box-shadow:0 0 0 5px rgba(44,140,244,.10);
}

.webmgmt-dashboard-header h3{
  margin:6px 0 0;
  color:#0F1B2D !important;
  font-size:1.15rem;
}

.dashboard-status{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:8px 11px;
  border:1px solid rgba(44,140,244,.15);
  border-radius:100px;
  background:rgba(44,140,244,.055);
  color:#2C8CF4;
  font-size:.65rem;
  font-weight:700;
}

.dashboard-status i{
  font-size:.75rem;
}


/* WEBSITE PREVIEW */

.website-preview{
  overflow:hidden;
  height:100%;
  min-height:365px;
  border:1px solid #DCE6F1;
  border-radius:18px;
  background:#F7FAFD;
}

.browser-top{
  height:42px;
  display:flex;
  align-items:center;
  gap:15px;
  padding:0 15px;
  border-bottom:1px solid #E3EAF3;
  background:#FFFFFF;
}

.browser-dots{
  display:flex;
  gap:5px;
}

.browser-dots span{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#CBD5E1;
}

.browser-address{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  color:#8A96A5;
  font-size:.62rem;
}

.browser-address i{
  color:#2C8CF4;
}

.browser-top > i{
  color:#9AA5B3;
  font-size:.8rem;
}

.website-preview-body{
  padding:20px;
}

.preview-nav{
  display:flex;
  align-items:center;
  gap:20px;
  padding-bottom:18px;
  border-bottom:1px solid #E8EEF4;
}

.preview-nav strong{
  margin-right:auto;
  color:#0F1B2D;
  font-size:.7rem;
}

.preview-nav strong i{
  margin-right:5px;
  color:#2C8CF4;
}

.preview-nav > span{
  color:#8490A0;
  font-size:.57rem;
}

.preview-content{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  padding-top:30px;
}

.preview-copy{
  flex:1;
}

.preview-copy small{
  color:#2C8CF4;
  font-size:.80rem;
  font-weight:800;
  letter-spacing:.1em;
}

.preview-copy h4{
  max-width:280px;
  margin:8px 0 18px;
  color:#0F1B2D !important;
  font-size:1.6rem;
  line-height:1.15;
}

.preview-copy h4 strong{
  color:#2C8CF4;
}

.preview-search{
  display:flex;
  align-items:center;
  gap:7px;
  max-width:330px;
  padding:10px 11px;
  border:1px solid #DDE6EF;
  border-radius:9px;
  background:#FFFFFF;
  color:#8A96A5;
  font-size:.90rem;
}

.preview-search i{
  color:#2C8CF4;
}

.preview-search span{
  margin-left:auto;
  padding:5px 8px;
  border-radius:6px;
  background:#2C8CF4;
  color:#fff;
  font-size:.53rem;
  font-weight:700;
}

.preview-doctor{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:175px;
  padding:14px;
  border:1px solid #DDE6EF;
  border-radius:13px;
  background:#FFFFFF;
  box-shadow:0 10px 25px rgba(15,27,45,.06);
}

.doctor-avatar{
  width:42px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  border-radius:11px;
  background:rgba(44,140,244,.09);
  color:#2C8CF4;
}

.preview-doctor strong{
  display:block;
  color:#0F1B2D;
  font-size:.65rem;
}

.preview-doctor span{
  display:block;
  margin-top:3px;
  color:#7E8B9A;
  font-size:.57rem;
}

.preview-doctor small{
  display:block;
  margin-top:6px;
  color:#2C8CF4;
  font-size:1rem;
}


/* WEBSITE HEALTH */

.website-health{
  height:100%;
  padding:22px;
  border:1px solid #DCE6F1;
  border-radius:18px;
  background:#FBFDFF;
}

.health-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
}

.health-heading > div:first-child > span{
  color:#2C8CF4;
  font-size:.80rem;
  font-weight:800;
  letter-spacing:.1em;
}

.health-heading h4{
  margin:6px 0 0;
  color:#0F1B2D !important;
  font-size:1rem;
}

.health-score{
  display:flex;
  align-items:baseline;
  color:#2C8CF4;
}

.health-score strong{
  font-family:var(--font-display);
  font-size:2rem;
  line-height:1;
}

.health-score small{
  color:#8A96A5;
  font-size:.65rem;
}

.health-progress{
  height:5px;
  margin:20px 0;
  overflow:hidden;
  border-radius:100px;
  background:#E8EEF4;
}

.health-progress span{
  display:block;
  width:98%;
  height:100%;
  border-radius:inherit;
  background:#2C8CF4;
}

.health-checks{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.health-check{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px;
  border:1px solid #E7EDF3;
  border-radius:10px;
  background:#fff;
}

.health-check-icon{
  width:32px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  border-radius:8px;
  background:rgba(44,140,244,.07);
  color:#2C8CF4;
  font-size:.8rem;
}

.health-check div:nth-child(2){
  flex:1;
}

.health-check strong{
  display:block;
  color:#25354A;
  font-size:.62rem;
}

.health-check span{
  display:block;
  margin-top:2px;
  color:#929DAC;
  font-size:1rem;
}

.health-check > i{
  color:#2C8CF4;
  font-size:.72rem;
}


/* METRICS */

.dashboard-metrics{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  margin-top:15px;
}

.dashboard-metric{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px;
  border:1px solid #E2EAF2;
  border-radius:11px;
  background:#FBFDFF;
}

.metric-icon{
  width:32px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  border-radius:8px;
  background:rgba(44,140,244,.08);
  color:#2C8CF4;
  font-size:.75rem;
}

.dashboard-metric small{
  display:block;
  color:#8A96A5;
  font-size:1rem;
}

.dashboard-metric strong{
  display:block;
  margin-top:2px;
  color:#0F1B2D;
  font-size:.7rem;
}


/* =========================================================
   02. THE REAL PROBLEM — DARK
========================================================= */

.webmgmt-problem-dark{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  padding:100px 0;
  background:#0F1B2D !important;
  color:#fff;
}

.webmgmt-dark-bg{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:-1;
}

.dark-glow{
  position:absolute;
  width:450px;
  height:450px;
  border-radius:50%;
  background:#2C8CF4;
  filter:blur(130px);
  opacity:.07;
}

.dark-glow-1{
  top:-280px;
  right:-150px;
}

.dark-glow-2{
  bottom:-300px;
  left:-180px;
}

.dark-grid{
  position:absolute;
  inset:0;
  opacity:.035;
  background-image:
    linear-gradient(rgba(255,255,255,.6) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.6) 1px,transparent 1px);
  background-size:70px 70px;
}

.webmgmt-section-title{
  max-width:760px;
  margin:0 auto 48px;
  text-align:center;
}

.webmgmt-mini-label{
  display:inline-block;
  padding:6px 11px;
  border:1px solid rgba(44,140,244,.25);
  border-radius:100px;
  background:rgba(44,140,244,.08);
  color:#2C8CF4;
  font-size:.62rem;
  font-weight:800;
  letter-spacing:.09em;
}

.dark-title h3{
  margin:18px 0 12px;
  color:#fff !important;
  font-size:clamp(1.8rem,3vw,2.6rem);
}

.dark-title h3 span{
  color:#2C8CF4 !important;
}

.dark-title p{
  max-width:600px;
  margin:0 auto;
  color:rgba(255,255,255,.55) !important;
  font-size:.9rem;
}

.web-problem-dark-card{
  position:relative;
  height:100%;
  min-height:255px;
  padding:25px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  background:rgba(255,255,255,.035);
  transition:.35s ease;
}

.web-problem-dark-card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:2px;
  background:#2C8CF4;
  transform:scaleX(0);
  transform-origin:left;
  transition:.35s ease;
}

.web-problem-dark-card:hover{
  transform:translateY(-7px);
  border-color:rgba(44,140,244,.32);
  background:rgba(44,140,244,.055);
  box-shadow:0 25px 55px rgba(0,0,0,.22);
}

.web-problem-dark-card:hover::before{
  transform:scaleX(1);
}

.web-problem-dark-card .problem-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:25px;
}

.web-problem-dark-card .problem-top > span{
  color:rgba(255,255,255,.22);
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.08em;
}

.web-problem-dark-card .problem-icon{
  width:48px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(44,140,244,.2);
  border-radius:13px;
  background:rgba(44,140,244,.09);
  color:#2C8CF4;
  font-size:1rem;
  transition:.3s ease;
}

.web-problem-dark-card:hover .problem-icon{
  background:#2C8CF4;
  color:#fff;
  transform:rotate(-5deg);
}

.web-problem-dark-card h4{
  margin-bottom:10px;
  color:#fff !important;
  font-size:1.05rem;
}

.web-problem-dark-card p{
  margin:0;
  color:rgba(255,255,255,.52) !important;
  font-size:.82rem;
  line-height:1.7;
}

.web-problem-dark-card .problem-line{
  width:35px;
  height:2px;
  margin-top:22px;
  background:#2C8CF4;
}


/* =========================================================
   03. PATIENT-FIRST UX — LIGHT
========================================================= */

.webmgmt-journey-light{
  position:relative;
  overflow:hidden;
  padding:100px 0;
  background:#FFFFFF !important;
}

.journey-title h3{
  margin:18px 0 12px;
  color:#0F1B2D !important;
  font-size:clamp(1.8rem,3vw,2.6rem);
}

.journey-title h3 span{
  color:#2C8CF4 !important;
}

.journey-title p{
  max-width:600px;
  margin:0 auto;
  color:#718093 !important;
  font-size:.9rem;
}

.webmgmt-journey-light .patient-journey{
  position:relative;
  max-width:1050px;
  margin:65px auto 0;
  display:flex;
  justify-content:space-between;
  gap:15px;
}

.webmgmt-journey-light .journey-progress{
  position:absolute;
  top:30px;
  left:10%;
  right:10%;
  height:2px;
  background:#E2EAF2;
  z-index:0;
}

.webmgmt-journey-light .journey-progress span{
  display:block;
  width:100%;
  height:100%;
  background:#2C8CF4;
}

.webmgmt-journey-light .patient-step{
  position:relative;
  z-index:1;
  width:18%;
  text-align:center;
}

.patient-step-number{
  margin-bottom:10px;
  color:#A2ADBA;
  font-size:.62rem;
  font-weight:800;
  letter-spacing:.08em;
}

.webmgmt-journey-light .patient-step-icon{
  width:62px;
  height:62px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 13px;
  border:1px solid #DCE6F1;
  border-radius:17px;
  background:#FFFFFF;
  box-shadow:0 12px 28px rgba(15,27,45,.07);
  color:#2C8CF4;
  font-size:1.05rem;
  transition:.3s ease;
}

.webmgmt-journey-light .patient-step.active .patient-step-icon,
.webmgmt-journey-light .patient-step:hover .patient-step-icon{
  border-color:#2C8CF4;
  background:#2C8CF4;
  color:#fff;
  transform:translateY(-4px);
  box-shadow:0 15px 30px rgba(44,140,244,.25);
}

.webmgmt-journey-light .patient-step strong{
  display:block;
  color:#0F1B2D;
  font-size:.72rem;
}

.webmgmt-journey-light .patient-step > span{
  display:block;
  margin-top:4px;
  color:#8A96A5;
  font-size:.90rem;
}

.click-target{
  max-width:620px;
  display:flex;
  align-items:center;
  gap:13px;
  margin:55px auto 0;
  padding:14px 17px;
  border:1px solid rgba(44,140,244,.18);
  border-radius:15px;
  background:rgba(44,140,244,.045);
}

.click-target-icon{
  width:42px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  border-radius:11px;
  background:#2C8CF4;
  color:#fff;
  font-size:.85rem;
}

.click-target small{
  display:block;
  color:#2C8CF4;
  font-size:1rem;
  font-weight:800;
  letter-spacing:.1em;
}

.click-target strong{
  display:block;
  margin-top:2px;
  color:#0F1B2D;
  font-family:var(--font-display);
  font-size:1.15rem;
}

.click-target > span{
  margin-left:auto;
  color:#718093;
  font-size:.65rem;
}


/* =========================================================
   04. CTA — DARK
========================================================= */

.webmgmt-bottom-dark{
  position:relative;
  overflow:hidden;
  background:#0F1B2D !important;
  color:#fff;
}

.webmgmt-bottom-dark::before{
  content:"";
  position:absolute;
  width:450px;
  height:450px;
  top:-250px;
  right:-100px;
  border-radius:50%;
  background:#2C8CF4;
  filter:blur(130px);
  opacity:.08;
  pointer-events:none;
}

.webmgmt-bottom-dark .webmgmt-bottom{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:35px;
  padding:75px 0;
}

.webmgmt-bottom-dark .webmgmt-bottom > div{
  max-width:700px;
}

.webmgmt-bottom-dark .webmgmt-bottom > div > span{
  color:#2C8CF4;
  font-size:.62rem;
  font-weight:800;
  letter-spacing:.1em;
}

.webmgmt-bottom-dark .webmgmt-bottom h3{
  margin:12px 0 0;
  color:#fff !important;
  font-size:clamp(1.7rem,3vw,2.6rem);
}

.webmgmt-bottom-dark .webmgmt-bottom h3 strong{
  color:#2C8CF4;
}

.webmgmt-cta{
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:13px 17px;
  border:1px solid rgba(44,140,244,.35);
  border-radius:11px;
  background:#2C8CF4;
  color:#fff !important;
  font-size:.72rem;
  font-weight:700;
  white-space:nowrap;
  box-shadow:0 12px 28px rgba(44,140,244,.22);
  transition:.3s ease;
}

.webmgmt-cta:hover{
  background:#fff;
  color:#0F1B2D !important;
  transform:translateY(-3px);
  box-shadow:0 18px 35px rgba(0,0,0,.2);
}

.webmgmt-cta i{
  font-size:.85rem;
}


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

@media(max-width:991.98px){

  .webmgmt-light-section,
  .webmgmt-problem-dark,
  .webmgmt-journey-light{
    padding:75px 0;
  }

  .webmgmt-dashboard{
    padding:20px;
  }

  .dashboard-metrics{
    grid-template-columns:repeat(2,1fr);
  }

  .webmgmt-journey-light .patient-journey{
    flex-wrap:wrap;
    justify-content:center;
    gap:30px 10px;
  }

  .webmgmt-journey-light .patient-step{
    width:18%;
  }

}


@media(max-width:767.98px){

  .webmgmt-light-section,
  .webmgmt-problem-dark,
  .webmgmt-journey-light{
    padding:65px 0;
  }

  .webmgmt-hero{
    margin-bottom:40px;
  }

  .webmgmt-hero h2{
    font-size:2rem;
  }

  .webmgmt-dashboard{
    padding:15px;
    border-radius:18px;
  }

  .webmgmt-dashboard-header{
    align-items:flex-start;
    flex-direction:column;
  }

  .website-preview{
    min-height:auto;
  }

  .preview-nav{
    gap:10px;
  }

  .preview-nav > span{
    display:none;
  }

  .preview-content{
    flex-direction:column;
    align-items:stretch;
  }

  .preview-doctor{
    min-width:0;
  }

  .dashboard-metrics{
    grid-template-columns:1fr 1fr;
  }

  .webmgmt-section-title{
    margin-bottom:35px;
  }

  .webmgmt-journey-light .patient-journey{
    margin-top:40px;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:28px 15px;
  }

  .webmgmt-journey-light .patient-step{
    width:auto;
  }

  .webmgmt-journey-light .journey-progress{
    display:none;
  }

  .click-target{
    align-items:flex-start;
    flex-wrap:wrap;
  }

  .click-target > span{
    width:100%;
    margin-left:55px;
  }

  .webmgmt-bottom-dark .webmgmt-bottom{
    align-items:flex-start;
    flex-direction:column;
    padding:60px 0;
  }

}


@media(max-width:575.98px){

  .webmgmt-hero h2{
    font-size:1.8rem;
  }

  .webmgmt-hero > p{
    font-size:.85rem;
  }

  .webmgmt-hero-tags{
    align-items:center;
    flex-direction:column;
  }

  .webmgmt-dashboard-header h3{
    font-size:1rem;
  }

  .dashboard-status{
    font-size:.90rem;
  }

  .website-preview-body{
    padding:15px;
  }

  .preview-copy h4{
    font-size:1.35rem;
  }

  .dashboard-metrics{
    grid-template-columns:1fr;
  }

  .webmgmt-journey-light .patient-journey{
    grid-template-columns:1fr 1fr;
  }

  .webmgmt-journey-light .patient-step-icon{
    width:54px;
    height:54px;
  }

  .webmgmt-bottom-dark .webmgmt-bottom h3{
    font-size:1.65rem;
  }


}


/* =========================================================
   WHY US — PREMIUM LIGHT SECTION
========================================================= */

.whyus-light-section{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:#FFFFFF !important;
  color:#0F1B2D;
}


/* =========================================================
   AMBIENT BACKGROUND
========================================================= */

.whyus-light-bg{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:-1;
  overflow:hidden;
}

.whyus-orb{
  position:absolute;
  border-radius:50%;
  background:#2C8CF4;
  filter:blur(110px);
}

.whyus-orb-1{
  width:400px;
  height:400px;
  top:-260px;
  right:-120px;
  opacity:.055;
}

.whyus-orb-2{
  width:320px;
  height:320px;
  bottom:-200px;
  left:-130px;
  opacity:.045;
}


.whyus-medical{
  position:absolute;
  width:60px;
  height:60px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(44,140,244,.10);
  border-radius:17px;
  background:rgba(255,255,255,.72);
  box-shadow:0 15px 35px rgba(15,27,45,.045);
  color:#2C8CF4;
  font-size:1.15rem;
  opacity:.35;
}

.whyus-medical-1{
  top:16%;
  left:3%;
  transform:rotate(-8deg);
}

.whyus-medical-2{
  top:42%;
  right:3%;
  transform:rotate(8deg);
}

.whyus-medical-3{
  bottom:13%;
  left:7%;
  transform:rotate(6deg);
}

.whyus-plus{
  position:absolute;
  color:#2C8CF4;
  font-family:var(--font-display);
  font-size:2rem;
  opacity:.18;
}

.whyus-plus-1{
  top:20%;
  left:15%;
}

.whyus-plus-2{
  bottom:20%;
  right:15%;
}


/* =========================================================
   HEADING
========================================================= */

.whyus-light-heading{
  max-width:760px;
}

.whyus-light-heading .section-badge{
  display:inline-flex;
  align-items:center;
  gap:7px;
}

.whyus-light-heading h2{
  margin-top:5px;
  color:#0F1B2D !important;
}

.whyus-light-heading h2 span{
  color:#2C8CF4 !important;
}

.whyus-light-heading p{
  max-width:620px;
  margin:15px auto 0;
  color:#718093 !important;
  font-size:.95rem;
  line-height:1.8;
}


/* =========================================================
   FEATURE CARDS
========================================================= */

.whyus-feature-card{
  position:relative;
  height:100%;
  min-height:270px;
  display:flex;
  flex-direction:column;
  padding:24px;
  overflow:hidden;

  border:1px solid #E3EAF3;
  border-radius:20px;

  background:#FFFFFF;

  box-shadow:
    0 14px 35px rgba(15,27,45,.055);

  transition:
    transform .35s ease,
    border-color .35s ease,
    box-shadow .35s ease,
    background .35s ease;
}


/* Top blue line */

.whyus-feature-card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:2px;

  background:#2C8CF4;

  transform:scaleX(0);
  transform-origin:left;

  transition:.35s ease;
}


/* Soft hover glow */

.whyus-feature-card::after{
  content:"";
  position:absolute;
  width:180px;
  height:180px;
  top:-100px;
  right:-100px;

  border-radius:50%;
  background:#2C8CF4;
  filter:blur(70px);
  opacity:0;

  transition:.35s ease;
  pointer-events:none;
}


.whyus-feature-card:hover{
  transform:translateY(-8px);

  border-color:rgba(44,140,244,.28);

  box-shadow:
    0 25px 55px rgba(15,27,45,.10);
}

.whyus-feature-card:hover::before{
  transform:scaleX(1);
}

.whyus-feature-card:hover::after{
  opacity:.055;
}


/* =========================================================
   CARD TOP
========================================================= */

.whyus-card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:28px;
}

.whyus-number{
  color:#B2BCC8;
  font-size:.65rem;
  font-weight:800;
  letter-spacing:.1em;
}


.whyus-icon{
  width:50px;
  height:50px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:1px solid rgba(44,140,244,.14);
  border-radius:14px;

  background:rgba(44,140,244,.065);

  color:#2C8CF4;

  font-size:1.05rem;

  transition:
    background .3s ease,
    color .3s ease,
    transform .3s ease,
    box-shadow .3s ease;
}


.whyus-feature-card:hover .whyus-icon{
  background:#2C8CF4;
  color:#FFFFFF;

  transform:translateY(-2px) rotate(-4deg);

  box-shadow:
    0 10px 22px rgba(44,140,244,.25);
}


/* =========================================================
   CARD CONTENT
========================================================= */

.whyus-card-content{
  position:relative;
  z-index:2;
}

.whyus-card-content h3{
  margin:0 0 10px;

  color:#0F1B2D !important;

  font-size:1.08rem;
  line-height:1.35;
}

.whyus-card-content p{
  margin:0;

  color:#718093 !important;

  font-size:.82rem;
  line-height:1.75;
}


/* =========================================================
   CARD FOOTER
========================================================= */

.whyus-card-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;

  margin-top:auto;
  padding-top:20px;

  border-top:1px solid #EDF1F5;

  color:#97A2AF;

  font-size:.62rem;
  font-weight:600;

  transition:.3s ease;
}

.whyus-card-footer i{
  color:#2C8CF4;
  font-size:.85rem;

  transition:.3s ease;
}

.whyus-feature-card:hover .whyus-card-footer{
  color:#596879;
}

.whyus-feature-card:hover .whyus-card-footer i{
  transform:translate(3px,-3px);
}


/* =========================================================
   TRUST STRIP
========================================================= */

.whyus-trust-strip{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;

  margin-top:45px;
  padding:18px 20px;

  border:1px solid #E3EAF3;
  border-radius:16px;

  background:#F8FBFE;
}


.whyus-trust-intro{
  display:flex;
  align-items:center;
  gap:12px;
}

.trust-line{
  width:28px;
  height:2px;
  flex-shrink:0;
  background:#2C8CF4;
}

.whyus-trust-intro small{
  display:block;

  color:#2C8CF4;

  font-size:.53rem;
  font-weight:800;
  letter-spacing:.1em;
}

.whyus-trust-intro strong{
  display:block;

  margin-top:2px;

  color:#0F1B2D;

  font-size:.72rem;
}


.whyus-trust-points{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:9px;
}

.whyus-trust-points span{
  display:inline-flex;
  align-items:center;
  gap:6px;

  padding:7px 10px;

  border:1px solid #E2EAF2;
  border-radius:100px;

  background:#FFFFFF;

  color:#718093;

  font-size:1rem;
  font-weight:600;
}

.whyus-trust-points i{
  color:#2C8CF4;
}


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

@media(max-width:991.98px){

  .whyus-light-section{
    padding-top:75px;
    padding-bottom:75px;
  }

  .whyus-feature-card{
    min-height:255px;
  }

  .whyus-trust-strip{
    align-items:flex-start;
    flex-direction:column;
  }

  .whyus-trust-points{
    justify-content:flex-start;
  }

}


@media(max-width:767.98px){

  .whyus-light-section{
    padding-top:65px;
    padding-bottom:65px;
  }

  .whyus-light-heading p{
    font-size:.86rem;
  }

  .whyus-feature-card{
    min-height:240px;
    padding:21px;
  }

  .whyus-card-top{
    margin-bottom:23px;
  }

  .whyus-trust-strip{
    margin-top:32px;
    padding:16px;
  }

}


@media(max-width:575.98px){

  .whyus-medical{
    display:none;
  }

  .whyus-plus{
    display:none;
  }

  .whyus-feature-card{
    min-height:225px;
  }

  .whyus-card-content h3{
    font-size:1rem;
  }

  .whyus-card-content p{
    font-size:.78rem;
  }

  .whyus-trust-points{
    width:100%;
    align-items:stretch;
    flex-direction:column;
  }

  .whyus-trust-points span{
    justify-content:center;
  }

}


/* =========================================================
   RESULTS — PREMIUM DARK SECTION
========================================================= */

.results-dark-section{
  position:relative;
  overflow:hidden;
  isolation:isolate;

  background:
    radial-gradient(
      circle at 88% 12%,
      rgba(44,140,244,.16),
      transparent 30%
    ),
    radial-gradient(
      circle at 5% 90%,
      rgba(44,140,244,.08),
      transparent 28%
    ),
    #0F1B2D !important;

  color:#FFFFFF;
}


/* =========================================================
   AMBIENT BACKGROUND
========================================================= */

.results-dark-bg{
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  overflow:hidden;
}

.results-orb{
  position:absolute;
  border-radius:50%;
  background:#2C8CF4;
  filter:blur(120px);
}

.results-orb-1{
  width:420px;
  height:420px;
  top:-280px;
  right:-130px;
  opacity:.07;
}

.results-orb-2{
  width:350px;
  height:350px;
  bottom:-240px;
  left:-160px;
  opacity:.055;
}


/* subtle grid */

.results-dark-bg::after{
  content:"";
  position:absolute;
  inset:0;

  background-image:
    linear-gradient(
      rgba(255,255,255,.025) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.025) 1px,
      transparent 1px
    );

  background-size:70px 70px;

  mask-image:linear-gradient(
    to bottom,
    rgba(0,0,0,.8),
    transparent 90%
  );
}


/* Medical floating elements */

.results-medical{
  position:absolute;

  width:58px;
  height:58px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:1px solid rgba(255,255,255,.07);
  border-radius:16px;

  background:rgba(255,255,255,.025);

  color:#2C8CF4;

  font-size:1.05rem;
  opacity:.35;

  backdrop-filter:blur(8px);
}

.results-medical-1{
  top:19%;
  left:3%;
  transform:rotate(-8deg);
}

.results-medical-2{
  bottom:18%;
  right:3%;
  transform:rotate(8deg);
}


.results-plus{
  position:absolute;

  color:#2C8CF4;

  font-family:var(--font-display);
  font-size:2rem;

  opacity:.18;
}

.results-plus-1{
  top:24%;
  left:14%;
}

.results-plus-2{
  bottom:25%;
  right:14%;
}


/* =========================================================
   HEADING
========================================================= */

.results-dark-heading{
  max-width:760px;
}

.results-dark-heading h2{
  margin-top:5px;
  color:#FFFFFF !important;
}

.results-dark-heading h2 span{
  color:#2C8CF4 !important;
}

.results-dark-heading p{
  max-width:620px;
  margin:15px auto 0;

  color:rgba(255,255,255,.58) !important;

  font-size:.95rem;
  line-height:1.8;
}


/* =========================================================
   RESULT CARD
========================================================= */

.result-dark-card{
  position:relative;

  height:100%;
  min-height:315px;

  display:flex;
  flex-direction:column;

  padding:24px;

  overflow:hidden;

  border:1px solid rgba(255,255,255,.075);
  border-radius:20px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.065),
      rgba(255,255,255,.025)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035);

  transition:
    transform .35s ease,
    border-color .35s ease,
    box-shadow .35s ease,
    background .35s ease;
}


/* Blue top line */

.result-dark-card::before{
  content:"";

  position:absolute;
  top:0;
  left:0;

  width:100%;
  height:2px;

  background:#2C8CF4;

  transform:scaleX(0);
  transform-origin:left;

  transition:.35s ease;
}


/* Blue ambient glow */

.result-dark-card::after{
  content:"";

  position:absolute;

  width:180px;
  height:180px;

  top:-100px;
  right:-100px;

  border-radius:50%;

  background:#2C8CF4;
  filter:blur(75px);

  opacity:0;

  transition:.35s ease;

  pointer-events:none;
}


.result-dark-card:hover{
  transform:translateY(-8px);

  border-color:rgba(44,140,244,.32);

  background:
    linear-gradient(
      145deg,
      rgba(44,140,244,.09),
      rgba(255,255,255,.025)
    );

  box-shadow:
    0 25px 60px rgba(0,0,0,.22);
}

.result-dark-card:hover::before{
  transform:scaleX(1);
}

.result-dark-card:hover::after{
  opacity:.08;
}


/* =========================================================
   CARD TOP
========================================================= */

.result-card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.result-number{
  color:rgba(255,255,255,.22);

  font-size:.64rem;
  font-weight:800;
  letter-spacing:.1em;
}


.result-icon{
  width:48px;
  height:48px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:1px solid rgba(44,140,244,.20);
  border-radius:13px;

  background:rgba(44,140,244,.08);

  color:#2C8CF4;

  font-size:1rem;

  transition:.3s ease;
}


.result-dark-card:hover .result-icon{
  background:#2C8CF4;
  color:#FFFFFF;

  transform:rotate(-5deg);

  box-shadow:
    0 10px 25px rgba(44,140,244,.25);
}


/* =========================================================
   RESULT VALUE
========================================================= */

.result-main{
  margin-top:27px;
}

.result-value{
  display:block;

  color:#FFFFFF !important;

  font-family:var(--font-display);

  font-size:2.45rem;
  font-weight:600;

  line-height:1;
  letter-spacing:-.02em;
}

.result-label{
  display:block;

  margin-top:9px;

  color:rgba(255,255,255,.58) !important;

  font-size:.78rem;
  font-weight:600;
  line-height:1.5;
}


/* =========================================================
   MINI CHART
========================================================= */

.result-chart{
  height:70px;

  display:flex;
  align-items:flex-end;

  gap:7px;

  margin-top:30px;

  padding-bottom:1px;

  border-bottom:1px solid rgba(255,255,255,.07);
}

.result-chart span{
  flex:1;

  min-width:8px;

  border-radius:
    5px 5px 2px 2px;

  background:#2C8CF4;

  opacity:.20;

  transition:
    opacity .3s ease,
    transform .3s ease;
}

.result-chart span:nth-last-child(-n+2){
  opacity:.58;
}

.result-dark-card:hover .result-chart span{
  opacity:.78;
}

.result-dark-card:hover .result-chart span:last-child{
  transform:translateY(-3px);
}


/* =========================================================
   CARD FOOTER
========================================================= */

.result-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;

  margin-top:auto;
  padding-top:15px;

  color:rgba(255,255,255,.34);

  font-size:.62rem;
  font-weight:600;
}

.result-footer i{
  color:#2C8CF4;

  transition:.3s ease;
}

.result-dark-card:hover .result-footer i{
  transform:translate(3px,-3px);
}


/* =========================================================
   BOTTOM TRUST / INSIGHT STRIP
========================================================= */

.results-dark-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:25px;

  margin-top:42px;
  padding:19px 20px;

  border:1px solid rgba(255,255,255,.075);
  border-radius:16px;

  background:rgba(255,255,255,.025);
}


.results-bottom-icon{
  width:42px;
  height:42px;

  flex-shrink:0;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:12px;

  background:rgba(44,140,244,.10);

  color:#2C8CF4;
}


.results-dark-bottom small{
  display:block;

  color:#2C8CF4;

  font-size:1rem;
  font-weight:800;
  letter-spacing:.1em;
}

.results-dark-bottom strong{
  display:block;

  margin-top:3px;

  color:#FFFFFF;

  font-size:.72rem;
  font-weight:600;
}


.results-bottom-points{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;

  gap:8px;
}

.results-bottom-points span{
  display:inline-flex;
  align-items:center;
  gap:6px;

  padding:7px 10px;

  border:1px solid rgba(255,255,255,.07);
  border-radius:100px;

  color:rgba(255,255,255,.48);

  font-size:.90rem;
  font-weight:600;
}

.results-bottom-points i{
  color:#2C8CF4;
}


/* =========================================================
   DISCLAIMER
========================================================= */

.results-dark-disclaimer{
  display:flex;
  align-items:center;
  justify-content:center;

  gap:8px;

  max-width:850px;

  margin:25px auto 0;

  color:rgba(255,255,255,.32) !important;

  font-size:.65rem;
  line-height:1.6;

  text-align:center;
}

.results-dark-disclaimer i{
  flex-shrink:0;
  color:#2C8CF4;
}


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

@media(max-width:991.98px){

  .results-dark-section{
    padding-top:75px;
    padding-bottom:75px;
  }

  .result-dark-card{
    min-height:295px;
  }

  .results-dark-bottom{
    align-items:flex-start;
    flex-wrap:wrap;
  }

  .results-bottom-points{
    width:100%;
    justify-content:flex-start;
  }

}


@media(max-width:767.98px){

  .results-dark-section{
    padding-top:65px;
    padding-bottom:65px;
  }

  .results-dark-heading p{
    font-size:.86rem;
  }

  .result-dark-card{
    min-height:275px;
    padding:21px;
  }

  .result-value{
    font-size:2.25rem;
  }

  .results-dark-bottom{
    margin-top:32px;
    padding:16px;
  }

}


@media(max-width:575.98px){

  .results-medical,
  .results-plus{
    display:none;
  }

  .result-dark-card{
    min-height:255px;
  }

  .result-chart{
    height:60px;
  }

  .results-bottom-points{
    flex-direction:column;
    align-items:stretch;
  }

  .results-bottom-points span{
    justify-content:center;
  }

  .results-dark-disclaimer{
    align-items:flex-start;
    text-align:left;
  }

}

/* =========================================================
   SUCCESS STORIES — PREMIUM DARK
========================================================= */

.success-dark-section{
  position:relative;
  overflow:hidden;
  isolation:isolate;

  background:
    radial-gradient(
      circle at 10% 15%,
      rgba(44,140,244,.13),
      transparent 30%
    ),
    radial-gradient(
      circle at 90% 85%,
      rgba(44,140,244,.10),
      transparent 30%
    ),
    #0F1B2D !important;

  color:#fff;
}


/* =========================================================
   BACKGROUND
========================================================= */

.success-dark-bg{
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  overflow:hidden;
}

.success-orb{
  position:absolute;
  border-radius:50%;
  background:#2C8CF4;
  filter:blur(125px);
}

.success-orb-1{
  width:430px;
  height:430px;
  top:-280px;
  left:-170px;
  opacity:.065;
}

.success-orb-2{
  width:380px;
  height:380px;
  right:-160px;
  bottom:-260px;
  opacity:.055;
}


/* subtle grid */

.success-dark-bg::after{
  content:"";
  position:absolute;
  inset:0;

  background-image:
    linear-gradient(
      rgba(255,255,255,.022) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.022) 1px,
      transparent 1px
    );

  background-size:72px 72px;

  mask-image:linear-gradient(
    to bottom,
    rgba(0,0,0,.75),
    transparent 90%
  );
}


/* Medical decoration */

.success-medical{
  position:absolute;

  width:58px;
  height:58px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:1px solid rgba(255,255,255,.065);
  border-radius:16px;

  background:rgba(255,255,255,.025);

  color:#2C8CF4;

  font-size:1rem;
  opacity:.32;

  backdrop-filter:blur(8px);
}

.success-medical-1{
  top:22%;
  left:3%;
  transform:rotate(-8deg);
}

.success-medical-2{
  bottom:19%;
  right:3%;
  transform:rotate(8deg);
}

.success-plus{
  position:absolute;

  color:#2C8CF4;

  font-family:var(--font-display);
  font-size:2rem;

  opacity:.16;
}

.success-plus-1{
  top:18%;
  right:14%;
}

.success-plus-2{
  bottom:20%;
  left:14%;
}


/* =========================================================
   HEADING
========================================================= */

.success-dark-heading{
  max-width:760px;
}

.success-dark-heading h2{
  margin-top:5px;
  color:#fff !important;
}

.success-dark-heading h2 span{
  color:#2C8CF4 !important;
}

.success-dark-heading p{
  max-width:620px;

  margin:15px auto 0;

  color:rgba(255,255,255,.56) !important;

  font-size:.95rem;
  line-height:1.8;
}


/* =========================================================
   CASE CARD
========================================================= */

.success-case-card{
  position:relative;

  height:100%;

  overflow:hidden;

  border:1px solid rgba(255,255,255,.075);
  border-radius:22px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.055),
      rgba(255,255,255,.018)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035);

  transition:
    transform .4s ease,
    border-color .4s ease,
    box-shadow .4s ease;
}


.success-case-card:hover{
  transform:translateY(-9px);

  border-color:rgba(44,140,244,.34);

  box-shadow:
    0 28px 65px rgba(0,0,0,.25);
}


/* =========================================================
   IMAGE
========================================================= */

.success-case-image{
  position:relative;

  height:250px;

  overflow:hidden;
}

.success-case-image img{
  width:100%;
  height:100%;

  object-fit:cover;

  display:block;

  transition:
    transform .7s cubic-bezier(.2,.7,.2,1),
    filter .5s ease;
}

.success-case-card:hover .success-case-image img{
  transform:scale(1.07);

  filter:saturate(1.05);
}


/* Image overlay */

.success-image-overlay{
  position:absolute;
  inset:0;

  background:
    linear-gradient(
      to top,
      rgba(15,27,45,.92),
      rgba(15,27,45,.15) 65%,
      rgba(15,27,45,.05)
    );
}


/* Category */

.success-case-category{
  position:absolute;

  left:18px;
  bottom:17px;

  padding:7px 12px;

  border:1px solid rgba(255,255,255,.16);
  border-radius:100px;

  background:rgba(15,27,45,.72);

  color:#fff;

  font-size:.63rem;
  font-weight:700;

  backdrop-filter:blur(10px);
}


/* Number */

.success-case-number{
  position:absolute;

  top:17px;
  right:18px;

  color:rgba(255,255,255,.55);

  font-size:.62rem;
  font-weight:800;

  letter-spacing:.1em;
}


/* =========================================================
   CARD BODY
========================================================= */

.success-case-body{
  padding:24px;
}


/* =========================================================
   METRICS
========================================================= */

.success-case-metrics{
  display:flex;
  align-items:flex-start;

  gap:30px;

  min-height:67px;

  padding-bottom:20px;

  border-bottom:1px solid rgba(255,255,255,.075);
}

.success-metric{
  display:flex;
  flex-direction:column;
}

.success-metric-value{
  color:#fff !important;

  font-family:var(--font-display);

  font-size:2rem;
  font-weight:600;

  line-height:1;
}

.success-metric-label{
  margin-top:6px;

  color:rgba(255,255,255,.42) !important;

  font-size:.62rem;
  line-height:1.4;
}


/* Description */

.success-case-body > p{
  min-height:88px;

  margin:20px 0 0;

  color:rgba(255,255,255,.54) !important;

  font-size:.79rem;
  line-height:1.75;
}


/* =========================================================
   FOOTER
========================================================= */

.success-case-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;

  margin-top:20px;
  padding-top:16px;

  border-top:1px solid rgba(255,255,255,.07);
}

.success-case-service{
  display:flex;
  flex-direction:column;
}

.success-case-service span{
  color:rgba(255,255,255,.3);

  font-size:1rem;
  font-weight:700;

  letter-spacing:.08em;
  text-transform:uppercase;
}

.success-case-service strong{
  margin-top:4px;

  color:rgba(255,255,255,.68);

  font-size:.66rem;
  font-weight:600;
}


.success-arrow{
  width:35px;
  height:35px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:1px solid rgba(44,140,244,.18);
  border-radius:10px;

  background:rgba(44,140,244,.07);

  color:#2C8CF4;

  transition:.3s ease;
}

.success-case-card:hover .success-arrow{
  background:#2C8CF4;
  color:#fff;

  transform:translate(2px,-2px);

  box-shadow:
    0 8px 20px rgba(44,140,244,.25);
}


/* =========================================================
   BOTTOM STATEMENT
========================================================= */

.success-dark-bottom{
  display:flex;
  align-items:center;

  gap:16px;

  margin-top:44px;
  padding:19px 20px;

  border:1px solid rgba(255,255,255,.075);
  border-radius:16px;

  background:rgba(255,255,255,.025);
}


.success-bottom-mark{
  width:43px;
  height:43px;

  flex-shrink:0;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:12px;

  background:rgba(44,140,244,.10);

  color:#2C8CF4;
}


.success-bottom-content{
  flex:1;
}

.success-bottom-content small{
  display:block;

  color:#2C8CF4;

  font-size:.51rem;
  font-weight:800;

  letter-spacing:.1em;
}

.success-bottom-content strong{
  display:block;

  margin-top:3px;

  color:#fff;

  font-size:.72rem;
  font-weight:600;
}


.success-bottom-points{
  display:flex;
  align-items:center;
  flex-wrap:wrap;

  gap:8px;
}

.success-bottom-points span{
  display:inline-flex;
  align-items:center;
  gap:6px;

  padding:7px 10px;

  border:1px solid rgba(255,255,255,.07);
  border-radius:100px;

  color:rgba(255,255,255,.42);

  font-size:.57rem;
  font-weight:600;
}

.success-bottom-points i{
  color:#2C8CF4;
}


/* =========================================================
   DISCLAIMER
========================================================= */

.success-dark-disclaimer{
  display:flex;
  align-items:center;
  justify-content:center;

  gap:8px;

  max-width:850px;

  margin:24px auto 0;

  color:rgba(255,255,255,.28) !important;

  font-size:.64rem;
  line-height:1.6;

  text-align:center;
}

.success-dark-disclaimer i{
  flex-shrink:0;

  color:#2C8CF4;
}


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

@media(max-width:991.98px){

  .success-dark-section{
    padding-top:75px;
    padding-bottom:75px;
  }

  .success-case-image{
    height:235px;
  }

  .success-case-body > p{
    min-height:auto;
  }

  .success-dark-bottom{
    flex-wrap:wrap;
  }

  .success-bottom-points{
    width:100%;
  }

}


@media(max-width:767.98px){

  .success-dark-section{
    padding-top:65px;
    padding-bottom:65px;
  }

  .success-dark-heading p{
    font-size:.86rem;
  }

  .success-case-image{
    height:225px;
  }

  .success-case-body{
    padding:21px;
  }

  .success-case-metrics{
    min-height:auto;
  }

  .success-dark-bottom{
    margin-top:32px;
    padding:16px;
  }

}


@media(max-width:575.98px){

  .success-medical,
  .success-plus{
    display:none;
  }

  .success-case-image{
    height:205px;
  }

  .success-metric-value{
    font-size:1.8rem;
  }

  .success-case-body > p{
    font-size:.77rem;
  }

  .success-bottom-points{
    flex-direction:column;
    align-items:stretch;
  }

  .success-bottom-points span{
    justify-content:center;
  }

  .success-dark-disclaimer{
    align-items:flex-start;
    text-align:left;
  }

}


/* =========================================================
   PREMIUM PATIENT JOURNEY — LIGHT EDITION
   Palette:
   #0F1B2D  Dark
   #2C8CF4  Primary
   #FFFFFF  White
========================================================= */

.patient-journey-section{
  position:relative;
  overflow:hidden;
  isolation:isolate;

  background:
    radial-gradient(
      circle at 8% 15%,
      rgba(44,140,244,.055),
      transparent 28%
    ),
    radial-gradient(
      circle at 92% 82%,
      rgba(44,140,244,.045),
      transparent 28%
    ),
    #FFFFFF !important;

  color:#0F1B2D;
}


/* =========================================================
   BACKGROUND
========================================================= */

.patient-journey-bg{
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  overflow:hidden;
}

.pj-glow{
  position:absolute;
  border-radius:50%;
  background:#2C8CF4;
  filter:blur(125px);
}

.pj-glow-1{
  width:480px;
  height:480px;
  top:-340px;
  left:-160px;
  opacity:.045;
}

.pj-glow-2{
  width:420px;
  height:420px;
  right:-180px;
  bottom:-300px;
  opacity:.035;
}

.pj-grid{
  position:absolute;
  inset:0;

  background-image:
    linear-gradient(
      rgba(15,27,45,.018) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(15,27,45,.018) 1px,
      transparent 1px
    );

  background-size:80px 80px;

  mask-image:
    linear-gradient(
      to bottom,
      rgba(0,0,0,.65),
      transparent 88%
    );
}

.pj-medical{
  position:absolute;

  width:58px;
  height:58px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:1px solid rgba(44,140,244,.10);
  border-radius:17px;

  background:rgba(255,255,255,.82);

  box-shadow:
    0 18px 40px rgba(15,27,45,.055);

  color:#2C8CF4;

  font-size:1rem;

  opacity:.32;

  backdrop-filter:blur(10px);
}

.pj-medical-1{
  top:24%;
  left:2.5%;
  transform:rotate(-8deg);
}

.pj-medical-2{
  right:2.5%;
  bottom:24%;
  transform:rotate(8deg);
}

.pj-plus{
  position:absolute;

  color:#2C8CF4;

  font-family:var(--font-display);

  font-size:2rem;

  opacity:.14;
}

.pj-plus-1{
  top:17%;
  right:13%;
}

.pj-plus-2{
  bottom:18%;
  left:13%;
}


/* =========================================================
   HEADING
========================================================= */

.patient-journey-heading{
  display:grid;
  grid-template-columns:1.1fr .9fr;

  align-items:end;

  gap:60px;

  max-width:1050px;

  margin:0 auto;
}

.pj-heading-left h2{
  margin:7px 0 0;

  max-width:650px;

  color:#0F1B2D !important;

  font-size:
    clamp(
      2rem,
      1.45rem + 2vw,
      3.25rem
    );

  line-height:1.08;

  letter-spacing:-.025em;
}

.pj-heading-left h2 span{
  color:#2C8CF4 !important;
}

.pj-heading-right{
  padding-bottom:5px;
}

.pj-heading-right p{
  max-width:440px;

  margin:0;

  color:#718093 !important;

  font-size:.9rem;

  line-height:1.85;
}


/* =========================================================
   JOURNEY TRACK
========================================================= */

.pj-journey{
  position:relative;

  display:grid;
  grid-template-columns:repeat(4,1fr);

  gap:20px;

  margin-top:82px;
}


/* connecting line */

.pj-path{
  position:absolute;

  top:30px;

  left:7%;
  right:7%;

  height:1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      #DDE6F0 8%,
      #DDE6F0 92%,
      transparent
    );

  z-index:0;
}

.pj-path-progress{
  position:absolute;

  left:8%;
  right:8%;

  top:0;

  height:2px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(44,140,244,.7) 18%,
      rgba(44,140,244,.7) 82%,
      transparent
    );

  box-shadow:
    0 0 14px rgba(44,140,244,.25);

  opacity:.5;
}


/* =========================================================
   STAGE
========================================================= */

.pj-stage{
  position:relative;
  z-index:2;
}


/* large background number */

.pj-stage-number{
  position:absolute;

  top:70px;
  right:5px;

  font-family:var(--font-display);

  font-size:5.5rem;

  line-height:1;

  font-weight:600;

  color:rgba(15,27,45,.035);

  pointer-events:none;

  transition:
    color .4s ease,
    transform .4s ease;
}


/* =========================================================
   MARKER
========================================================= */

.pj-stage-marker{
  position:relative;

  width:60px;
  height:60px;

  margin-bottom:35px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:1px solid rgba(44,140,244,.20);

  border-radius:18px;

  background:#FFFFFF;

  color:#2C8CF4;

  box-shadow:
    0 12px 28px rgba(15,27,45,.075),
    0 0 0 7px rgba(44,140,244,.035);

  transition:
    transform .4s ease,
    background .4s ease,
    border-color .4s ease,
    box-shadow .4s ease;
}

.pj-stage-marker::after{
  content:"";

  position:absolute;

  width:7px;
  height:7px;

  top:-4px;
  right:-4px;

  border-radius:50%;

  background:#2C8CF4;

  box-shadow:
    0 0 0 4px rgba(44,140,244,.08),
    0 0 14px rgba(44,140,244,.4);
}

.pj-stage-marker i{
  font-size:1.05rem;
}


/* =========================================================
   CONTENT
========================================================= */

.pj-stage-content{
  position:relative;

  padding:0 12px 0 0;
}

.pj-stage-eyebrow{
  display:block;

  margin-bottom:13px;

  color:#2C8CF4;

  font-size:.53rem;

  font-weight:800;

  letter-spacing:.14em;
}

.pj-stage-content h3{
  margin:0;

  color:#0F1B2D !important;

  font-family:var(--font-display);

  font-size:1.35rem;

  line-height:1.2;

  font-weight:600;
}

.pj-stage-content h3 span{
  color:#2C8CF4;
}

.pj-stage-content p{
  max-width:250px;

  margin:14px 0 0;

  color:#718093 !important;

  font-size:.76rem;

  line-height:1.8;
}


/* =========================================================
   META
========================================================= */

.pj-stage-meta{
  display:flex;
  align-items:center;

  gap:9px;

  margin-top:27px;

  color:#B0BAC6;

  font-size:.90rem;
}

.pj-stage-meta > span{
  color:#2C8CF4;

  font-size:.80rem;

  font-weight:800;
}

.pj-stage-meta > i{
  color:#C8D1DB;

  font-size:.62rem;
}

.pj-stage-meta strong{
  color:#687789;

  font-size:.90rem;

  font-weight:600;
}


/* =========================================================
   HOVER
========================================================= */

.pj-stage:hover .pj-stage-marker{
  transform:
    translateY(-5px)
    rotate(-4deg);

  background:#2C8CF4;

  border-color:#2C8CF4;

  color:#FFFFFF;

  box-shadow:
    0 15px 35px rgba(44,140,244,.22),
    0 0 0 8px rgba(44,140,244,.045);
}

.pj-stage:hover .pj-stage-number{
  color:rgba(44,140,244,.07);

  transform:translateY(-5px);
}

.pj-stage:hover .pj-stage-meta strong{
  color:#3E5064;
}


/* =========================================================
   FINAL OUTCOME
========================================================= */

.pj-stage-final{
  position:relative;

  padding:22px;

  margin-top:-22px;

  border:1px solid rgba(44,140,244,.20);

  border-radius:22px;

  background:
    linear-gradient(
      145deg,
      rgba(44,140,244,.065),
      #FFFFFF 70%
    );

  box-shadow:
    0 20px 45px rgba(15,27,45,.07),
    inset 0 1px 0 rgba(255,255,255,.9);

  overflow:hidden;
}

.pj-stage-final::before{
  content:"";

  position:absolute;

  top:0;
  left:0;

  width:100%;
  height:2px;

  background:#2C8CF4;

  opacity:.75;
}

.pj-stage-final .pj-stage-marker{
  margin-bottom:28px;

  background:#2C8CF4;

  border-color:#2C8CF4;

  color:#FFFFFF;

  box-shadow:
    0 12px 30px rgba(44,140,244,.20);
}

.pj-stage-final .pj-stage-number{
  top:55px;
  right:15px;

  color:rgba(44,140,244,.065);
}

.pj-stage-final .pj-stage-content p{
  color:#617286 !important;
}

.pj-stage-final .pj-stage-meta{
  margin-top:24px;
}

.pj-final-glow{
  position:absolute;

  width:180px;
  height:180px;

  right:-100px;
  bottom:-100px;

  border-radius:50%;

  background:#2C8CF4;

  filter:blur(65px);

  opacity:.055;

  pointer-events:none;
}


/* =========================================================
   BOTTOM STRIP
========================================================= */

.pj-bottom{
  display:flex;

  align-items:center;

  gap:18px;

  margin-top:65px;

  padding-top:22px;

  border-top:1px solid #E5EBF2;
}

.pj-bottom-line{
  width:32px;
  height:2px;

  flex-shrink:0;

  background:#2C8CF4;

  box-shadow:
    0 0 12px rgba(44,140,244,.3);
}

.pj-bottom-label{
  display:flex;

  flex-direction:column;

  min-width:230px;
}

.pj-bottom-label span{
  color:#2C8CF4;

  font-size:.5rem;

  font-weight:800;

  letter-spacing:.13em;
}

.pj-bottom-label strong{
  margin-top:3px;

  color:#0F1B2D;

  font-size:.68rem;

  font-weight:600;
}

.pj-bottom-flow{
  display:flex;

  align-items:center;

  justify-content:flex-end;

  flex:1;

  gap:10px;
}

.pj-bottom-flow span{
  display:inline-flex;

  align-items:center;

  gap:6px;

  padding:7px 10px;

  border:1px solid #E2EAF2;

  border-radius:100px;

  color:#718093;

  font-size:.90rem;

  font-weight:600;

  background:#FFFFFF;

  box-shadow:
    0 5px 15px rgba(15,27,45,.025);
}

.pj-bottom-flow span i{
  color:#2C8CF4;
}

.pj-bottom-flow > i{
  color:#C6D0DB;

  font-size:.6rem;
}

.pj-bottom-flow .pj-bottom-highlight{
  border-color:rgba(44,140,244,.20);

  background:rgba(44,140,244,.065);

  color:#0F1B2D;

  box-shadow:none;
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:991.98px){

  .patient-journey-section{
    padding-top:75px;
    padding-bottom:75px;
  }

  .patient-journey-heading{
    grid-template-columns:1fr;
    gap:20px;
  }

  .pj-heading-right{
    padding-bottom:0;
  }

  .pj-heading-right p{
    max-width:600px;
  }

  .pj-journey{
    grid-template-columns:repeat(2,1fr);

    gap:45px 25px;

    margin-top:60px;
  }

  .pj-path{
    display:none;
  }

  .pj-stage-final{
    margin-top:0;
  }

  .pj-bottom{
    flex-wrap:wrap;
  }

  .pj-bottom-flow{
    width:100%;

    justify-content:flex-start;
  }
}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:767.98px){

  .patient-journey-section{
    padding-top:65px;
    padding-bottom:65px;
  }

  .patient-journey-heading{
    gap:16px;
  }

  .pj-heading-left h2{
    font-size:
      clamp(
        2rem,
        9vw,
        2.7rem
      );
  }

  .pj-heading-right p{
    font-size:.84rem;
    line-height:1.75;
  }

  .pj-journey{
    grid-template-columns:1fr;

    gap:22px;

    margin-top:45px;
  }

  .pj-stage{
    min-height:0;

    padding:22px;

    border:1px solid #E5EBF2;

    border-radius:20px;

    background:
      linear-gradient(
        145deg,
        #FFFFFF,
        #FBFDFF
      );

    box-shadow:
      0 12px 30px rgba(15,27,45,.04);
  }

  .pj-stage-marker{
    margin-bottom:25px;
  }

  .pj-stage-number{
    top:20px;
    right:20px;

    font-size:4rem;
  }

  .pj-stage-content{
    padding:0;
  }

  .pj-stage-final{
    padding:22px;

    border-color:rgba(44,140,244,.22);

    background:
      linear-gradient(
        145deg,
        rgba(44,140,244,.06),
        #FFFFFF
      );
  }

  .pj-bottom{
    margin-top:40px;
  }

  .pj-bottom-label{
    min-width:0;
    flex:1;
  }

  .pj-bottom-flow{
    flex-wrap:wrap;
  }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media(max-width:575.98px){

  .pj-medical,
  .pj-plus{
    display:none;
  }

  .pj-stage{
    padding:20px;
  }

  .pj-stage-content h3{
    font-size:1.2rem;
  }

  .pj-stage-content p{
    max-width:none;

    font-size:.75rem;
  }

  .pj-stage-meta{
    flex-wrap:wrap;
  }

  .pj-bottom{
    align-items:flex-start;
  }

  .pj-bottom-line{
    margin-top:5px;
  }

  .pj-bottom-flow{
    gap:7px;
  }

  .pj-bottom-flow > i{
    display:none;
  }

  .pj-bottom-flow span{
    font-size:.54rem;
  }
}

.testimonials-premium-section{
  position:relative;
  overflow:hidden;
  isolation:isolate;

  background:
    radial-gradient(
      circle at 8% 18%,
      rgba(44,140,244,.14),
      transparent 30%
    ),
    radial-gradient(
      circle at 92% 80%,
      rgba(44,140,244,.09),
      transparent 30%
    ),
    #0F1B2D !important;

  color:#FFFFFF;
}


/* =========================================
   BACKGROUND
========================================= */

.testimonials-premium-bg{
  position:absolute;
  inset:0;

  z-index:-1;

  pointer-events:none;

  overflow:hidden;
}

.tp-orb{
  position:absolute;

  border-radius:50%;

  background:#2C8CF4;

  filter:blur(125px);
}

.tp-orb-1{
  width:430px;
  height:430px;

  top:-300px;
  left:-160px;

  opacity:.065;
}

.tp-orb-2{
  width:380px;
  height:380px;

  right:-170px;
  bottom:-280px;

  opacity:.055;
}


.testimonials-premium-bg::after{
  content:"";

  position:absolute;
  inset:0;

  background-image:
    linear-gradient(
      rgba(255,255,255,.018) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.018) 1px,
      transparent 1px
    );

  background-size:80px 80px;

  mask-image:
    linear-gradient(
      to bottom,
      rgba(0,0,0,.7),
      transparent 90%
    );
}


.tp-medical{
  position:absolute;

  width:58px;
  height:58px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:1px solid rgba(255,255,255,.065);

  border-radius:16px;

  background:rgba(255,255,255,.025);

  color:#2C8CF4;

  font-size:1rem;

  opacity:.3;

  backdrop-filter:blur(9px);
}

.tp-medical-1{
  top:23%;
  left:3%;

  transform:rotate(-8deg);
}

.tp-medical-2{
  right:3%;
  bottom:22%;

  transform:rotate(8deg);
}

.tp-plus{
  position:absolute;

  color:#2C8CF4;

  font-family:var(--font-display);

  font-size:2rem;

  opacity:.15;
}

.tp-plus-1{
  top:18%;
  right:15%;
}

.tp-plus-2{
  bottom:20%;
  left:14%;
}


/* =========================================
   HEADING
========================================= */

.tp-heading{
  max-width:760px;
}

.tp-heading .section-badge{
  display:inline-flex;

  align-items:center;

  gap:7px;
}

.tp-heading h2{
  margin-top:6px;

  color:#FFFFFF !important;
}

.tp-heading h2 span{
  color:#2C8CF4 !important;
}

.tp-heading p{
  max-width:620px;

  margin:15px auto 0;

  color:rgba(255,255,255,.55) !important;

  font-size:.95rem;

  line-height:1.8;
}


/* =========================================
   CAROUSEL
========================================= */

.tp-carousel{
  

  margin:65px auto 0;
}


/* =========================================
   TESTIMONIAL
========================================= */

.tp-testimonial{
  position:relative;

  display:grid;

  grid-template-columns:35% 65%;

  min-height:390px;

  overflow:hidden;

  border:1px solid rgba(255,255,255,.075);

  border-radius:24px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.055),
      rgba(255,255,255,.018)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 30px 80px rgba(0,0,0,.18);
}


/* =========================================
   QUOTE PANEL
========================================= */

.tp-quote-panel{
  position:relative;

  display:flex;

  flex-direction:column;

  justify-content:flex-end;

  padding:38px;

  overflow:hidden;

  border-right:1px solid rgba(255,255,255,.07);

  background:
    radial-gradient(
      circle at 25% 20%,
      rgba(44,140,244,.12),
      transparent 55%
    ),
    rgba(44,140,244,.025);
}

.tp-quote-panel::after{
  content:"";

  position:absolute;

  width:200px;
  height:200px;

  top:-100px;
  left:-100px;

  border-radius:50%;

  background:#2C8CF4;

  filter:blur(75px);

  opacity:.08;
}

.tp-big-quote{
  position:absolute;

  top:18px;
  left:28px;

  font-family:Georgia,serif;

  font-size:10rem;

  line-height:1;

  color:rgba(44,140,244,.13);

  user-select:none;
}

.tp-quote-line{
  width:38px;
  height:2px;

  margin-bottom:14px;

  background:#2C8CF4;

  box-shadow:
    0 0 14px rgba(44,140,244,.45);
}

.tp-quote-label{
  color:rgba(255,255,255,.32);

  font-size:1rem;

  font-weight:800;

  letter-spacing:.13em;
}

.tp-rating{
  display:flex;

  gap:4px;

  margin-top:24px;
}

.tp-rating i{
  color:#2C8CF4;

  font-size:.72rem;
}

.tp-rating-text{
  margin-top:7px;

  color:rgba(255,255,255,.32);

  font-size:.57rem;
}

.tp-rating-text span{
  padding:0 5px;

  color:rgba(255,255,255,.16);
}


/* =========================================
   CONTENT
========================================= */

.tp-testimonial-content{
  position:relative;

  display:flex;

  flex-direction:column;

  justify-content:center;

  padding:45px 55px;
}

.tp-content-top{
  position:absolute;

  top:27px;
  right:30px;

  display:flex;

  align-items:center;

  gap:12px;

  color:rgba(255,255,255,.22);

  font-size:.80rem;

  font-weight:700;

  letter-spacing:.08em;
}

.tp-content-top i{
  color:#2C8CF4;

  font-size:.75rem;
}


.tp-testimonial-content blockquote{
  max-width:650px;

  margin:0;

  color:#FFFFFF;

  font-family:var(--font-display);

  font-size:
    clamp(
      1.45rem,
      1.15rem + .8vw,
      2rem
    );

  font-weight:500;

  line-height:1.42;

  letter-spacing:-.015em;
}


/* =========================================
   AUTHOR
========================================= */

.tp-author{
  display:flex;

  align-items:center;

  gap:13px;

  margin-top:35px;
}

.tp-avatar{
  width:45px;
  height:45px;

  flex-shrink:0;

  display:flex;
  align-items:center;
  justify-content:center;

  border:1px solid rgba(44,140,244,.20);

  border-radius:50%;

  background:rgba(44,140,244,.08);

  color:#2C8CF4;

  font-size:1rem;
}

.tp-author-info{
  display:flex;

  flex-direction:column;
}

.tp-author-info strong{
  color:#FFFFFF;

  font-size:.72rem;

  font-weight:700;
}

.tp-author-info span{
  margin-top:3px;

  color:rgba(255,255,255,.38);

  font-size:.6rem;
}

.tp-author-meta{
  margin-top:24px;

  padding-top:17px;

  border-top:1px solid rgba(255,255,255,.065);
}

.tp-author-meta span{
  display:inline-flex;

  align-items:center;

  gap:6px;

  color:rgba(255,255,255,.3);

  font-size:.90rem;

  font-weight:600;
}

.tp-author-meta i{
  color:#2C8CF4;
}


/* =========================================
   CONTROLS
========================================= */

.tp-carousel-controls{
  display:flex;

  align-items:center;

  justify-content:center;

  gap:14px;

  margin-top:27px;
}

.tp-carousel-arrow{
  width:40px;
  height:40px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:1px solid rgba(255,255,255,.09);

  border-radius:12px;

  background:rgba(255,255,255,.025);

  color:rgba(255,255,255,.6);

  transition:.3s ease;
}

.tp-carousel-arrow:hover{
  border-color:rgba(44,140,244,.35);

  background:#2C8CF4;

  color:#FFFFFF;

  transform:translateY(-2px);

  box-shadow:
    0 8px 22px rgba(44,140,244,.22);
}

.tp-progress{
  position:relative;

  width:90px;
  height:2px;

  overflow:hidden;

  background:rgba(255,255,255,.08);
}

.tp-progress-active{
  position:absolute;

  left:0;
  top:0;

  width:33.33%;
  height:100%;

  background:#2C8CF4;

  box-shadow:
    0 0 10px rgba(44,140,244,.5);
}


/* =========================================
   INDICATORS
========================================= */

.tp-indicators{
  position:static;

  display:flex;

  justify-content:center;

  gap:5px;

  margin:14px 0 0;
}

.tp-indicators button{
  width:5px;
  height:5px;

  margin:0;

  padding:0;

  border:0;

  border-radius:50%;

  background:rgba(255,255,255,.25);

  opacity:1;
}

.tp-indicators button.active{
  width:18px;

  border-radius:100px;

  background:#2C8CF4;
}


/* =========================================
   BOTTOM STRIP
========================================= */

.tp-bottom{
  display:flex;

  align-items:center;

  gap:16px;

  margin-top:45px;

  padding:19px 20px;

  border:1px solid rgba(255,255,255,.075);

  border-radius:16px;

  background:rgba(255,255,255,.025);
}

.tp-bottom-mark{
  width:43px;
  height:43px;

  flex-shrink:0;

  display:flex;

  align-items:center;
  justify-content:center;

  border-radius:12px;

  background:rgba(44,140,244,.10);

  color:#2C8CF4;
}

.tp-bottom-copy{
  flex:1;
}

.tp-bottom-copy small{
  display:block;

  color:#2C8CF4;

  font-size:.51rem;

  font-weight:800;

  letter-spacing:.1em;
}

.tp-bottom-copy strong{
  display:block;

  margin-top:3px;

  color:#FFFFFF;

  font-size:.7rem;

  font-weight:600;
}

.tp-bottom-points{
  display:flex;

  align-items:center;

  flex-wrap:wrap;

  gap:8px;
}

.tp-bottom-points span{
  display:inline-flex;

  align-items:center;

  gap:6px;

  padding:7px 10px;

  border:1px solid rgba(255,255,255,.07);

  border-radius:100px;

  color:rgba(255,255,255,.42);

  font-size:.90rem;

  font-weight:600;
}

.tp-bottom-points i{
  color:#2C8CF4;
}


/* =========================================
   DISCLAIMER
========================================= */

.tp-disclaimer{
  display:flex;

  align-items:center;

  justify-content:center;

  gap:8px;

  max-width:850px;

  margin:23px auto 0;

  color:rgba(255,255,255,.27) !important;

  font-size:.63rem;

  line-height:1.6;

  text-align:center;
}

.tp-disclaimer i{
  flex-shrink:0;

  color:#2C8CF4;
}


/* =========================================
   TABLET
========================================= */

@media(max-width:991.98px){

  .testimonials-premium-section{
    padding-top:75px;
    padding-bottom:75px;
  }

  .tp-carousel{
    margin-top:50px;
  }

  .tp-testimonial{
    grid-template-columns:1fr;

    min-height:auto;
  }

  .tp-quote-panel{
    min-height:180px;

    padding:28px;

    border-right:0;

    border-bottom:1px solid rgba(255,255,255,.07);

    justify-content:flex-end;
  }

  .tp-big-quote{
    font-size:7rem;

    top:0;
  }

  .tp-rating{
    margin-top:18px;
  }

  .tp-testimonial-content{
    min-height:320px;

    padding:38px;
  }

  .tp-bottom{
    flex-wrap:wrap;
  }

  .tp-bottom-points{
    width:100%;
  }
}


/* =========================================
   MOBILE
========================================= */

@media(max-width:767.98px){

  .testimonials-premium-section{
    padding-top:65px;
    padding-bottom:65px;
  }

  .tp-heading p{
    font-size:.86rem;
  }

  .tp-carousel{
    margin-top:40px;
  }

  .tp-quote-panel{
    min-height:155px;

    padding:23px;
  }

  .tp-big-quote{
    left:20px;

    font-size:6rem;
  }

  .tp-testimonial-content{
    min-height:330px;

    padding:30px 23px;
  }

  .tp-content-top{
    top:20px;
    right:20px;
  }

  .tp-testimonial-content blockquote{
    font-size:1.35rem;

    line-height:1.45;
  }

  .tp-author{
    margin-top:28px;
  }

  .tp-bottom{
    margin-top:32px;

    padding:16px;
  }
}


/* =========================================
   SMALL MOBILE
========================================= */

@media(max-width:575.98px){

  .tp-medical,
  .tp-plus{
    display:none;
  }

  .tp-testimonial{
    border-radius:20px;
  }

  .tp-quote-panel{
    min-height:140px;
  }

  .tp-testimonial-content{
    min-height:350px;
  }

  .tp-testimonial-content blockquote{
    font-size:1.2rem;
  }

  .tp-author-info span{
    font-size:.90rem;
  }

  .tp-bottom-points{
    flex-direction:column;

    align-items:stretch;
  }

  .tp-bottom-points span{
    justify-content:center;
  }

  .tp-disclaimer{
    align-items:flex-start;

    text-align:left;
  }
}


.specialities-premium-section{
  position:relative;
  overflow:hidden;
  isolation:isolate;

  background:
    radial-gradient(
      circle at 5% 15%,
      rgba(44,140,244,.055),
      transparent 28%
    ),
    radial-gradient(
      circle at 95% 85%,
      rgba(44,140,244,.045),
      transparent 28%
    ),
    #FFFFFF !important;

  color:#0F1B2D;
}


/* =========================================
   BACKGROUND
========================================= */

.specialities-premium-bg{
  position:absolute;
  inset:0;
  z-index:-1;

  pointer-events:none;
  overflow:hidden;
}

.sp-orb{
  position:absolute;

  border-radius:50%;

  background:#2C8CF4;

  filter:blur(120px);
}

.sp-orb-1{
  width:420px;
  height:420px;

  top:-280px;
  left:-160px;

  opacity:.045;
}

.sp-orb-2{
  width:360px;
  height:360px;

  right:-160px;
  bottom:-240px;

  opacity:.035;
}


.specialities-premium-bg::after{
  content:"";

  position:absolute;
  inset:0;

  background-image:
    linear-gradient(
      rgba(15,27,45,.015) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(15,27,45,.015) 1px,
      transparent 1px
    );

  background-size:80px 80px;

  mask-image:
    linear-gradient(
      to bottom,
      rgba(0,0,0,.55),
      transparent 90%
    );
}


/* Medical floating elements */

.sp-medical{
  position:absolute;

  width:58px;
  height:58px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:1px solid rgba(44,140,244,.10);

  border-radius:17px;

  background:rgba(255,255,255,.8);

  color:#2C8CF4;

  font-size:1rem;

  opacity:.3;

  box-shadow:
    0 18px 40px rgba(15,27,45,.055);

  backdrop-filter:blur(10px);
}

.sp-medical-1{
  top:25%;
  left:2.5%;
  transform:rotate(-8deg);
}

.sp-medical-2{
  right:2.5%;
  bottom:20%;
  transform:rotate(8deg);
}

.sp-plus{
  position:absolute;

  color:#2C8CF4;

  font-family:var(--font-display);

  font-size:2rem;

  opacity:.14;
}

.sp-plus-1{
  top:17%;
  right:13%;
}

.sp-plus-2{
  bottom:17%;
  left:13%;
}


/* =========================================
   HEADING
========================================= */

.specialities-heading{
  display:grid;

  grid-template-columns:1.1fr .9fr;

  align-items:end;

  gap:70px;

  max-width:1080px;

  margin:0 auto;
}

.specialities-heading-left h2{
  max-width:650px;

  margin:8px 0 0;

  color:#0F1B2D !important;

  font-size:
    clamp(
      2rem,
      1.5rem + 1.8vw,
      3rem
    );

  line-height:1.1;

  letter-spacing:-.025em;
}

.specialities-heading-left h2 span{
  color:#2C8CF4 !important;
}

.specialities-heading-right{
  padding-bottom:4px;
}

.specialities-heading-right p{
  max-width:450px;

  margin:0;

  color:#718093 !important;

  font-size:.88rem;

  line-height:1.85;
}

.sp-heading-line{
  display:flex;

  align-items:center;

  gap:10px;

  margin-top:20px;
}

.sp-heading-line span{
  width:30px;
  height:2px;

  background:#2C8CF4;
}

.sp-heading-line small{
  color:#A0ABB8;

  font-size:1rem;

  font-weight:800;

  letter-spacing:.1em;
}


/* =========================================
   GRID
========================================= */

.specialities-grid{
  display:grid;

  grid-template-columns:
    repeat(4,1fr);

  gap:14px;

  max-width:1100px;

  margin-left:auto;
  margin-right:auto;
}


/* =========================================
   ITEM
========================================= */

.sp-item{
  position:relative;

  min-height:205px;

  display:flex;

  flex-direction:column;

  justify-content:space-between;

  padding:22px;

  overflow:hidden;

  border:1px solid #E3EAF3;

  border-radius:18px;

  background:#FFFFFF;

  box-shadow:
    0 12px 30px rgba(15,27,45,.035);

  transition:
    transform .35s ease,
    border-color .35s ease,
    box-shadow .35s ease,
    background .35s ease;
}


/* top blue line */

.sp-item::before{
  content:"";

  position:absolute;

  top:0;
  left:0;

  width:100%;
  height:2px;

  background:#2C8CF4;

  transform:scaleX(0);

  transform-origin:left;

  transition:.35s ease;
}


/* subtle corner glow */

.sp-item::after{
  content:"";

  position:absolute;

  width:150px;
  height:150px;

  top:-90px;
  right:-90px;

  border-radius:50%;

  background:#2C8CF4;

  filter:blur(65px);

  opacity:0;

  transition:.35s ease;

  pointer-events:none;
}


.sp-item:hover{
  transform:translateY(-7px);

  border-color:rgba(44,140,244,.28);

  box-shadow:
    0 24px 50px rgba(15,27,45,.09);
}

.sp-item:hover::before{
  transform:scaleX(1);
}

.sp-item:hover::after{
  opacity:.055;
}


/* =========================================
   NUMBER
========================================= */

.sp-item-number{
  position:absolute;

  top:17px;
  right:20px;

  color:#C6CED8;

  font-size:.90rem;

  font-weight:800;

  letter-spacing:.1em;

  transition:.3s ease;
}

.sp-item:hover .sp-item-number{
  color:#2C8CF4;
}


/* =========================================
   ICON
========================================= */

.sp-item-icon{
  width:48px;
  height:48px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:1px solid rgba(44,140,244,.14);

  border-radius:14px;

  background:rgba(44,140,244,.055);

  color:#2C8CF4;

  font-size:1rem;

  transition:
    background .3s ease,
    color .3s ease,
    transform .3s ease,
    box-shadow .3s ease;
}

.sp-item:hover .sp-item-icon{
  background:#2C8CF4;

  color:#FFFFFF;

  transform:
    translateY(-2px)
    rotate(-4deg);

  box-shadow:
    0 10px 24px rgba(44,140,244,.22);
}


/* =========================================
   CONTENT
========================================= */

.sp-item-content{
  position:relative;

  z-index:2;

  margin-top:22px;
}

.sp-item-content span{
  display:block;

  margin-bottom:5px;

  color:#A0ABB8;

  font-size:.51rem;

  font-weight:800;

  letter-spacing:.1em;

  text-transform:uppercase;
}

.sp-item-content h3{
  margin:0;

  color:#0F1B2D !important;

  font-family:var(--font-display);

  font-size:1.05rem;

  line-height:1.25;

  font-weight:600;
}


/* =========================================
   ARROW
========================================= */

.sp-item-arrow{
  position:absolute;

  right:20px;
  bottom:20px;

  color:#C0CAD5;

  font-size:.8rem;

  transition:
    color .3s ease,
    transform .3s ease;
}

.sp-item:hover .sp-item-arrow{
  color:#2C8CF4;

  transform:
    translate(3px,-3px);
}


/* =========================================
   FEATURED ITEM
========================================= */

.sp-item-featured{
  grid-column:span 2;

  min-height:205px;

  border-color:rgba(44,140,244,.20);

  background:
    linear-gradient(
      145deg,
      rgba(44,140,244,.065),
      #FFFFFF 72%
    );

  box-shadow:
    0 16px 38px rgba(15,27,45,.055);
}

.sp-item-featured::before{
  transform:scaleX(1);

  opacity:.7;
}

.sp-item-featured .sp-item-icon{
  background:#2C8CF4;

  color:#FFFFFF;

  border-color:#2C8CF4;

  box-shadow:
    0 10px 25px rgba(44,140,244,.18);
}

.sp-item-featured .sp-item-number{
  color:#2C8CF4;
}

.sp-item-featured .sp-item-content h3{
  font-size:1.3rem;
}

.sp-featured-glow{
  position:absolute;

  width:220px;
  height:220px;

  right:-130px;
  bottom:-130px;

  border-radius:50%;

  background:#2C8CF4;

  filter:blur(75px);

  opacity:.055;

  pointer-events:none;
}


/* =========================================
   BOTTOM
========================================= */

.sp-bottom{
  display:flex;

  align-items:center;

  gap:16px;

  max-width:1100px;

  margin:42px auto 0;

  padding:18px 20px;

  border:1px solid #E3EAF3;

  border-radius:16px;

  background:#F8FBFE;
}

.sp-bottom-mark{
  width:42px;
  height:42px;

  flex-shrink:0;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:12px;

  background:rgba(44,140,244,.08);

  color:#2C8CF4;
}

.sp-bottom-copy{
  flex:1;
}

.sp-bottom-copy small{
  display:block;

  color:#2C8CF4;

  font-size:.5rem;

  font-weight:800;

  letter-spacing:.1em;
}

.sp-bottom-copy strong{
  display:block;

  margin-top:3px;

  color:#0F1B2D;

  font-size:.69rem;

  font-weight:600;
}

.sp-bottom-tags{
  display:flex;

  align-items:center;

  flex-wrap:wrap;

  justify-content:flex-end;

  gap:7px;
}

.sp-bottom-tags span{
  display:inline-flex;

  align-items:center;

  gap:5px;

  padding:7px 10px;

  border:1px solid #E2EAF2;

  border-radius:100px;

  background:#FFFFFF;

  color:#718093;

  font-size:.80rem;

  font-weight:600;
}

.sp-bottom-tags i{
  color:#2C8CF4;
}


/* =========================================
   TABLET
========================================= */

@media(max-width:991.98px){

  .specialities-premium-section{
    padding-top:75px;
    padding-bottom:75px;
  }

  .specialities-heading{
    grid-template-columns:1fr;

    gap:20px;
  }

  .specialities-heading-right{
    padding-bottom:0;
  }

  .specialities-grid{
    grid-template-columns:
      repeat(3,1fr);
  }

  .sp-item-featured{
    grid-column:span 2;
  }

  .sp-bottom{
    flex-wrap:wrap;
  }

  .sp-bottom-tags{
    width:100%;

    justify-content:flex-start;
  }
}


/* =========================================
   MOBILE
========================================= */

@media(max-width:767.98px){

  .specialities-premium-section{
    padding-top:65px;
    padding-bottom:65px;
  }

  .specialities-heading-left h2{
    font-size:
      clamp(
        2rem,
        8.5vw,
        2.65rem
      );
  }

  .specialities-heading-right p{
    font-size:.83rem;
  }

  .specialities-grid{
    grid-template-columns:
      repeat(2,1fr);

    gap:11px;

    margin-top:38px !important;
  }

  .sp-item{
    min-height:185px;

    padding:18px;

    border-radius:16px;
  }

  .sp-item-featured{
    grid-column:span 2;

    min-height:185px;
  }

  .sp-item-featured .sp-item-content h3{
    font-size:1.12rem;
  }

  .sp-item-icon{
    width:44px;
    height:44px;

    border-radius:12px;
  }

  .sp-item-content{
    margin-top:18px;
  }

  .sp-item-content h3{
    font-size:.96rem;
  }

  .sp-bottom{
    margin-top:32px;

    padding:16px;
  }
}


/* =========================================
   SMALL MOBILE
========================================= */

@media(max-width:575.98px){

  .sp-medical,
  .sp-plus{
    display:none;
  }

  .specialities-grid{
    gap:9px;
  }

  .sp-item{
    min-height:170px;

    padding:16px;
  }

  .sp-item-featured{
    min-height:170px;
  }

  .sp-item-number{
    top:14px;
    right:15px;
  }

  .sp-item-icon{
    width:41px;
    height:41px;

    font-size:.9rem;
  }

  .sp-item-content h3{
    font-size:.9rem;
  }

  .sp-item-content span{
    font-size:1rem;
  }

  .sp-item-arrow{
    right:15px;
    bottom:15px;
  }

  .sp-bottom-tags{
    flex-direction:column;

    align-items:stretch;
  }

  .sp-bottom-tags span{
    justify-content:center;
  }
}

.faq-premium-section{
  position:relative;
  overflow:hidden;
  isolation:isolate;

  background:
    radial-gradient(
      circle at 7% 20%,
      rgba(44,140,244,.14),
      transparent 30%
    ),
    radial-gradient(
      circle at 92% 78%,
      rgba(44,140,244,.09),
      transparent 30%
    ),
    #0F1B2D !important;

  color:#FFFFFF;
}


/* =========================================
   BACKGROUND
========================================= */

.faq-premium-bg{
  position:absolute;
  inset:0;

  z-index:-1;

  pointer-events:none;
  overflow:hidden;
}

.faq-orb{
  position:absolute;

  border-radius:50%;

  background:#2C8CF4;

  filter:blur(125px);
}

.faq-orb-1{
  width:440px;
  height:440px;

  top:-300px;
  left:-180px;

  opacity:.06;
}

.faq-orb-2{
  width:380px;
  height:380px;

  right:-170px;
  bottom:-270px;

  opacity:.05;
}


.faq-premium-bg::after{
  content:"";

  position:absolute;
  inset:0;

  background-image:
    linear-gradient(
      rgba(255,255,255,.018) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.018) 1px,
      transparent 1px
    );

  background-size:78px 78px;

  mask-image:
    linear-gradient(
      to bottom,
      rgba(0,0,0,.7),
      transparent 92%
    );
}


/* Floating medical icons */

.faq-medical{
  position:absolute;

  width:58px;
  height:58px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:1px solid rgba(255,255,255,.065);

  border-radius:16px;

  background:rgba(255,255,255,.025);

  color:#2C8CF4;

  font-size:1rem;

  opacity:.3;

  backdrop-filter:blur(9px);
}

.faq-medical-1{
  top:24%;
  left:2.5%;

  transform:rotate(-8deg);
}

.faq-medical-2{
  right:2.5%;
  bottom:21%;

  transform:rotate(8deg);
}

.faq-plus{
  position:absolute;

  color:#2C8CF4;

  font-family:var(--font-display);

  font-size:2rem;

  opacity:.15;
}

.faq-plus-1{
  top:17%;
  right:13%;
}

.faq-plus-2{
  bottom:18%;
  left:14%;
}


/* =========================================
   MAIN LAYOUT
========================================= */

.faq-layout{
  display:grid;

  grid-template-columns:
    .78fr 1.22fr;

  gap:85px;

  max-width:1120px;

  margin:0 auto;
}


/* =========================================
   LEFT INTRO
========================================= */

.faq-intro{
  position:relative;

  padding-top:8px;
}

.faq-intro h2{
  max-width:470px;

  margin:10px 0 0;

  color:#FFFFFF !important;

  font-size:
    clamp(
      2.2rem,
      1.65rem + 1.9vw,
      3.25rem
    );

  line-height:1.08;

  letter-spacing:-.025em;
}

.faq-intro h2 span{
  color:#2C8CF4 !important;
}

.faq-intro > p{
  max-width:440px;

  margin:20px 0 0;

  color:rgba(255,255,255,.52) !important;

  font-size:.88rem;

  line-height:1.85;
}


/* =========================================
   TRUST CARD
========================================= */

.faq-trust-card{
  display:flex;

  align-items:flex-start;

  gap:13px;

  max-width:430px;

  margin-top:35px;

  padding:17px;

  border:1px solid rgba(255,255,255,.075);

  border-radius:15px;

  background:rgba(255,255,255,.025);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025);
}

.faq-trust-icon{
  width:40px;
  height:40px;

  flex-shrink:0;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:11px;

  background:rgba(44,140,244,.10);

  color:#2C8CF4;
}

.faq-trust-card small{
  display:block;

  color:#2C8CF4;

  font-size:.49rem;

  font-weight:800;

  letter-spacing:.11em;
}

.faq-trust-card strong{
  display:block;

  margin-top:3px;

  color:#FFFFFF;

  font-size:.7rem;
}

.faq-trust-card span{
  display:block;

  margin-top:4px;

  color:rgba(255,255,255,.35);

  font-size:1rem;

  line-height:1.6;
}


/* =========================================
   MINI POINTS
========================================= */

.faq-mini-points{
  display:flex;

  flex-wrap:wrap;

  gap:22px;

  margin-top:32px;
}

.faq-mini-points > div{
  display:flex;

  flex-direction:column;

  gap:4px;
}

.faq-mini-number{
  color:#2C8CF4;

  font-size:.5rem;

  font-weight:800;

  letter-spacing:.08em;
}

.faq-mini-points strong{
  color:rgba(255,255,255,.55);

  font-size:.90rem;

  font-weight:600;
}


/* =========================================
   FAQ LIST
========================================= */

.faq-list{
  position:relative;
}

.faq-list-head{
  display:flex;

  align-items:center;

  gap:15px;

  margin-bottom:12px;

  padding-left:20px;
}

.faq-list-head > span{
  color:rgba(255,255,255,.27);

  font-size:.5rem;

  font-weight:800;

  letter-spacing:.13em;

  white-space:nowrap;
}

.faq-head-line{
  width:45px;
  height:1px;

  background:#2C8CF4;

  opacity:.7;
}


/* =========================================
   FAQ ITEM
========================================= */

.faq-item{
  position:relative;

  margin-bottom:8px;

  overflow:hidden;

  border:1px solid rgba(255,255,255,.07) !important;

  border-radius:15px !important;

  background:rgba(255,255,255,.025) !important;

  transition:
    border-color .3s ease,
    background .3s ease,
    transform .3s ease;
}

.faq-item:hover{
  border-color:rgba(44,140,244,.20) !important;

  background:rgba(44,140,244,.035) !important;
}


/* Bootstrap button reset */

.faq-item .accordion-button{
  position:relative;

  display:grid;

  grid-template-columns:38px 1fr 35px;

  align-items:center;

  gap:10px;

  width:100%;

  padding:19px 20px;

  border:0 !important;

  border-radius:0 !important;

  background:transparent !important;

  box-shadow:none !important;

  color:#FFFFFF !important;

  text-align:left;
}

.faq-item .accordion-button::after{
  display:none !important;
}


/* Number */

.faq-number{
  color:rgba(255,255,255,.22);

  font-size:.80rem;

  font-weight:800;

  letter-spacing:.08em;

  transition:.3s ease;
}


/* Question */

.faq-question{
  color:rgba(255,255,255,.78);

  font-family:var(--font-body);

  font-size:.77rem;

  font-weight:600;

  line-height:1.5;

  transition:.3s ease;
}


/* Plus */

.faq-toggle{
  width:31px;
  height:31px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:1px solid rgba(255,255,255,.08);

  border-radius:9px;

  background:rgba(255,255,255,.025);

  color:#2C8CF4;

  transition:
    transform .35s ease,
    background .35s ease,
    border-color .35s ease;
}

.faq-toggle i{
  font-size:.9rem;

  transition:transform .35s ease;
}


/* Active */

.faq-item:has(.accordion-collapse.show){
  border-color:rgba(44,140,244,.27) !important;

  background:
    linear-gradient(
      145deg,
      rgba(44,140,244,.075),
      rgba(255,255,255,.025)
    ) !important;

  box-shadow:
    0 18px 40px rgba(0,0,0,.13);
}

.faq-item:has(.accordion-collapse.show) .faq-number{
  color:#2C8CF4;
}

.faq-item:has(.accordion-collapse.show) .faq-question{
  color:#FFFFFF;
}

.faq-item:has(.accordion-collapse.show) .faq-toggle{
  background:#2C8CF4;

  border-color:#2C8CF4;

  color:#FFFFFF;

  box-shadow:
    0 7px 18px rgba(44,140,244,.22);
}

.faq-item:has(.accordion-collapse.show) .faq-toggle i{
  transform:rotate(45deg);
}


/* Answer */

.faq-answer{
  max-width:720px;

  padding:
    0 65px
    21px
    68px !important;

  color:rgba(255,255,255,.47) !important;

  font-size:.72rem;

  line-height:1.8;
}


/* =========================================
   BOTTOM CTA STRIP
========================================= */

.faq-bottom{
  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:25px;

  max-width:1120px;

  margin:48px auto 0;

  padding:18px 20px;

  border:1px solid rgba(255,255,255,.075);

  border-radius:16px;

  background:rgba(255,255,255,.025);
}

.faq-bottom-left{
  display:flex;

  align-items:center;

  gap:13px;
}

.faq-bottom-icon{
  width:42px;
  height:42px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:12px;

  background:rgba(44,140,244,.10);

  color:#2C8CF4;
}

.faq-bottom-left small{
  display:block;

  color:#2C8CF4;

  font-size:.49rem;

  font-weight:800;

  letter-spacing:.1em;
}

.faq-bottom-left strong{
  display:block;

  margin-top:3px;

  color:#FFFFFF;

  font-size:.68rem;

  font-weight:600;
}

.faq-bottom-link{
  display:inline-flex;

  align-items:center;

  gap:9px;

  padding:9px 13px;

  border:1px solid rgba(44,140,244,.18);

  border-radius:10px;

  background:rgba(44,140,244,.065);

  color:#2C8CF4;

  font-size:1rem;

  font-weight:700;

  transition:.3s ease;
}

.faq-bottom-link:hover{
  background:#2C8CF4;

  color:#FFFFFF;

  border-color:#2C8CF4;

  transform:translateY(-2px);

  box-shadow:
    0 10px 24px rgba(44,140,244,.22);
}

.faq-bottom-link i{
  transition:.3s ease;
}

.faq-bottom-link:hover i{
  transform:translate(2px,-2px);
}


/* =========================================
   TABLET
========================================= */

@media(max-width:991.98px){

  .faq-premium-section{
    padding-top:75px;
    padding-bottom:75px;
  }

  .faq-layout{
    grid-template-columns:1fr;

    gap:50px;

    max-width:800px;
  }

  .faq-intro h2{
    max-width:650px;
  }

  .faq-intro > p{
    max-width:620px;
  }

  .faq-trust-card{
    max-width:620px;
  }

  .faq-list{
    width:100%;
  }
}


/* =========================================
   MOBILE
========================================= */

@media(max-width:767.98px){

  .faq-premium-section{
    padding-top:65px;
    padding-bottom:65px;
  }

  .faq-intro h2{
    font-size:
      clamp(
        2.1rem,
        9vw,
        2.8rem
      );
  }

  .faq-intro > p{
    font-size:.83rem;
  }

  .faq-trust-card{
    margin-top:28px;
  }

  .faq-mini-points{
    margin-top:25px;

    gap:15px;
  }

  .faq-list-head{
    padding-left:14px;
  }

  .faq-item .accordion-button{
    grid-template-columns:29px 1fr 32px;

    padding:16px 14px;

    gap:8px;
  }

  .faq-question{
    font-size:.72rem;
  }

  .faq-answer{
    padding:
      0 45px
      18px
      51px !important;

    font-size:.69rem;
  }

  .faq-bottom{
    align-items:flex-start;

    flex-direction:column;

    margin-top:32px;

    padding:16px;
  }

  .faq-bottom-link{
    width:100%;

    justify-content:center;
  }
}


/* =========================================
   SMALL MOBILE
========================================= */

@media(max-width:575.98px){

  .faq-medical,
  .faq-plus{
    display:none;
  }

  .faq-mini-points{
    flex-direction:column;

    gap:9px;
  }

  .faq-mini-points > div{
    flex-direction:row;

    align-items:center;

    gap:9px;
  }

  .faq-list-head{
    margin-bottom:8px;
  }

  .faq-item{
    border-radius:13px !important;
  }

  .faq-item .accordion-button{
    grid-template-columns:25px 1fr 30px;

    padding:15px 12px;
  }

  .faq-number{
    font-size:.5rem;
  }

  .faq-question{
    font-size:.68rem;
  }

  .faq-toggle{
    width:28px;
    height:28px;
  }

  .faq-answer{
    padding:
      0 40px
      17px
      45px !important;

    font-size:.66rem;
  }
}

/* =====================================================
   PREMIUM LIGHT FINAL CTA
===================================================== */

.final-cta-light-section{
  position:relative;
  overflow:hidden;
  isolation:isolate;

  padding:110px 0 45px;

  background:
    radial-gradient(
      circle at 8% 18%,
      rgba(44,140,244,.07),
      transparent 28%
    ),
    radial-gradient(
      circle at 92% 80%,
      rgba(44,140,244,.055),
      transparent 30%
    ),
    #FFFFFF !important;

  color:#0F1B2D;
}


/* =====================================================
   BACKGROUND
===================================================== */

.final-cta-bg{
  position:absolute;
  inset:0;

  z-index:-1;

  pointer-events:none;
  overflow:hidden;
}

.cta-orb{
  position:absolute;

  border-radius:50%;

  background:#2C8CF4;

  filter:blur(125px);
}

.cta-orb-1{
  width:480px;
  height:480px;

  top:-330px;
  left:-190px;

  opacity:.045;
}

.cta-orb-2{
  width:420px;
  height:420px;

  right:-190px;
  bottom:-300px;

  opacity:.04;
}


.final-cta-bg::after{
  content:"";

  position:absolute;
  inset:0;

  background-image:
    linear-gradient(
      rgba(15,27,45,.015) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(15,27,45,.015) 1px,
      transparent 1px
    );

  background-size:80px 80px;

  mask-image:
    linear-gradient(
      to bottom,
      rgba(0,0,0,.55),
      transparent 90%
    );
}


/* Medical floating elements */

.cta-medical{
  position:absolute;

  width:58px;
  height:58px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:1px solid rgba(44,140,244,.10);

  border-radius:17px;

  background:rgba(255,255,255,.82);

  color:#2C8CF4;

  font-size:1rem;

  opacity:.28;

  box-shadow:
    0 18px 40px rgba(15,27,45,.05);

  backdrop-filter:blur(10px);
}

.cta-medical-1{
  top:22%;
  left:2.5%;

  transform:rotate(-8deg);
}

.cta-medical-2{
  right:2.5%;
  bottom:24%;

  transform:rotate(8deg);
}

.cta-plus{
  position:absolute;

  color:#2C8CF4;

  font-family:var(--font-display);

  font-size:2rem;

  opacity:.13;
}

.cta-plus-1{
  top:18%;
  right:13%;
}

.cta-plus-2{
  bottom:18%;
  left:14%;
}


/* =====================================================
   MAIN GRID
===================================================== */

.final-cta-layout{
  display:grid;

  grid-template-columns:
    .92fr 1.08fr;

  align-items:center;

  gap:75px;

  max-width:1120px;

  margin:0 auto;
}


/* =====================================================
   LEFT COPY
===================================================== */

.final-cta-copy{
  position:relative;
}

.final-cta-copy h2{
  max-width:570px;

  margin:12px 0 0;

  color:#0F1B2D !important;

  font-size:
    clamp(
      2.45rem,
      1.8rem + 2vw,
      3.55rem
    );

  line-height:1.06;

  letter-spacing:-.03em;
}

.final-cta-copy h2 span{
  color:#2C8CF4 !important;
}

.final-cta-copy > p{
  max-width:500px;

  margin:22px 0 0;

  color:#718093 !important;

  font-size:.9rem;

  line-height:1.85;
}


/* =====================================================
   AVAILABILITY
===================================================== */

.cta-availability{
  display:flex;

  align-items:center;

  gap:11px;

  margin-top:31px;
}

.cta-live-dot{
  position:relative;

  width:9px;
  height:9px;

  flex-shrink:0;

  border-radius:50%;

  background:#2C8CF4;

  box-shadow:
    0 0 0 5px rgba(44,140,244,.08),
    0 0 14px rgba(44,140,244,.3);
}

.cta-availability small{
  display:block;

  color:#2C8CF4;

  font-size:.49rem;

  font-weight:800;

  letter-spacing:.1em;
}

.cta-availability strong{
  display:block;

  margin-top:2px;

  color:#0F1B2D;

  font-size:.65rem;

  font-weight:600;
}


/* =====================================================
   TRUST POINTS
===================================================== */

.cta-trust-points{
  display:flex;

  flex-direction:column;

  gap:13px;

  margin-top:35px;

  max-width:490px;
}

.cta-trust-point{
  display:flex;

  align-items:center;

  gap:11px;
}

.cta-trust-point > span{
  width:35px;
  height:35px;

  flex-shrink:0;

  display:flex;
  align-items:center;
  justify-content:center;

  border:1px solid rgba(44,140,244,.13);

  border-radius:10px;

  background:rgba(44,140,244,.055);

  color:#2C8CF4;

  font-size:.82rem;
}

.cta-trust-point strong{
  display:block;

  color:#0F1B2D;

  font-size:.64rem;

  font-weight:700;
}

.cta-trust-point small{
  display:block;

  margin-top:2px;

  color:#8995A4;

  font-size:.90rem;
}


/* =====================================================
   FORM CARD
===================================================== */

.final-cta-form-wrap{
  position:relative;

  padding:30px;

  border:1px solid #DDE6F0;

  border-radius:24px;

  background:
    linear-gradient(
      145deg,
      #FFFFFF,
      #F8FBFE
    );

  box-shadow:
    0 30px 80px rgba(15,27,45,.10),
    0 8px 25px rgba(15,27,45,.04);

  overflow:hidden;
}

.final-cta-form-wrap::before{
  content:"";

  position:absolute;

  top:0;
  left:0;

  width:100%;
  height:3px;

  background:#2C8CF4;
}

.final-cta-form-wrap::after{
  content:"";

  position:absolute;

  width:230px;
  height:230px;

  right:-150px;
  top:-150px;

  border-radius:50%;

  background:#2C8CF4;

  filter:blur(80px);

  opacity:.045;

  pointer-events:none;
}


/* =====================================================
   FORM HEADER
===================================================== */

.cta-form-top{
  display:flex;

  align-items:flex-start;

  justify-content:space-between;

  gap:20px;

  padding-bottom:21px;

  margin-bottom:22px;

  border-bottom:1px solid #E7EDF4;
}

.cta-form-top > div:first-child > span{
  color:#2C8CF4;

  font-size:.5rem;

  font-weight:800;

  letter-spacing:.12em;
}

.cta-form-top h3{
  margin:5px 0 0;

  color:#0F1B2D !important;

  font-size:1.25rem;

  line-height:1.25;
}

.cta-form-number{
  color:#C3CCD7;

  font-family:var(--font-display);

  font-size:2.4rem;

  line-height:1;

  font-weight:600;
}


/* =====================================================
   FORM LABELS
===================================================== */

.consult-form label{
  display:block;

  margin-bottom:7px;

  color:#596879;

  font-size:.90rem;

  font-weight:700;

  letter-spacing:.02em;
}

.consult-form label span{
  color:#A3ADB9;

  font-weight:500;
}


/* =====================================================
   INPUT
===================================================== */

.cta-input{
  position:relative;
}

.cta-input > i{
  position:absolute;

  left:14px;
  top:50%;

  transform:translateY(-50%);

  z-index:2;

  color:#9BA7B5;

  font-size:.8rem;

  pointer-events:none;

  transition:.3s ease;
}

.cta-input input,
.cta-input select,
.cta-input textarea{
  width:100%;

  border:1px solid #DCE5EE;

  border-radius:11px;

  background:#FFFFFF;

  color:#0F1B2D;

  outline:none;

  box-shadow:none;

  font-family:var(--font-body);

  font-size:.7rem;

  transition:
    border-color .3s ease,
    box-shadow .3s ease,
    background .3s ease;
}

.cta-input input,
.cta-input select{
  height:47px;

  padding:
    0 14px
    0 40px;
}

.cta-input textarea{
  min-height:90px;

  resize:vertical;

  padding:
    13px
    14px
    13px
    40px;
}

.cta-input select{
  appearance:none;

  cursor:pointer;
}

.cta-input:has(input:focus) > i,
.cta-input:has(select:focus) > i,
.cta-input:has(textarea:focus) > i{
  color:#2C8CF4;
}

.cta-input input:focus,
.cta-input select:focus,
.cta-input textarea:focus{
  border-color:rgba(44,140,244,.45);

  background:#FFFFFF;

  box-shadow:
    0 0 0 4px rgba(44,140,244,.07);
}

.cta-input input::placeholder,
.cta-input textarea::placeholder{
  color:#A8B2BE;
}


/* =====================================================
   SELECT ARROW
===================================================== */

.cta-select::after{
  content:"\F282";

  position:absolute;

  right:15px;
  top:50%;

  transform:translateY(-50%);

  font-family:"bootstrap-icons";

  color:#9BA7B5;

  font-size:.65rem;

  pointer-events:none;
}


/* =====================================================
   ACTIONS
===================================================== */

.cta-form-actions{
  display:flex;

  align-items:stretch;

  gap:10px;

  margin-top:4px;
}

.cta-submit{
  flex:1;

  min-height:49px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:0;

  border-radius:11px;

  background:#2C8CF4;

  color:#FFFFFF;

  font-family:var(--font-body);

  font-size:.67rem;

  font-weight:700;

  cursor:pointer;

  box-shadow:
    0 12px 25px rgba(44,140,244,.20);

  transition:
    transform .3s ease,
    box-shadow .3s ease,
    background .3s ease;
}

.cta-submit:hover{
  background:#1c6fd1;

  transform:translateY(-2px);

  box-shadow:
    0 16px 30px rgba(44,140,244,.26);
}

.cta-submit .btn-text{
  display:flex;

  align-items:center;

  justify-content:center;

  gap:8px;
}

.cta-submit i{
  font-size:.75rem;

  transition:.3s ease;
}

.cta-submit:hover i{
  transform:translate(2px,-2px);
}


.cta-whatsapp{
  min-width:150px;

  display:flex;

  align-items:center;

  justify-content:center;

  gap:8px;

  padding:8px 13px;

  border:1px solid #DCE5EE;

  border-radius:11px;

  background:#FFFFFF;

  color:#0F1B2D;

  transition:
    transform .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;
}

.cta-whatsapp:hover{
  transform:translateY(-2px);

  border-color:rgba(44,140,244,.25);

  box-shadow:
    0 10px 25px rgba(15,27,45,.07);

  color:#0F1B2D;
}

.cta-whatsapp > i{
  color:#2C8CF4;

  font-size:1rem;
}

.cta-whatsapp span{
  display:flex;

  flex-direction:column;

  text-align:left;
}

.cta-whatsapp small{
  color:#9BA6B3;

  font-size:.46rem;

  font-weight:700;
}

.cta-whatsapp span{
  font-size:.6rem;

  font-weight:700;
}


/* =====================================================
   FORM FOOTER
===================================================== */

.cta-form-footer{
  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:15px;

  margin-top:18px;

  padding-top:14px;

  border-top:1px solid #E9EEF4;

  color:#A0ABB7;

  font-size:.51rem;
}

.cta-form-footer span{
  display:inline-flex;

  align-items:center;

  gap:5px;
}

.cta-form-footer i{
  color:#2C8CF4;
}


/* =====================================================
   BOTTOM STRIP
===================================================== */

.final-cta-bottom{
  display:flex;

  align-items:center;

  gap:16px;

  max-width:1120px;

  margin:55px auto 0;

  padding-top:21px;

  border-top:1px solid #E3EAF2;
}

.cta-bottom-line{
  width:30px;
  height:2px;

  flex-shrink:0;

  background:#2C8CF4;
}

.cta-bottom-copy{
  flex:1;
}

.cta-bottom-copy small{
  display:block;

  color:#2C8CF4;

  font-size:.48rem;

  font-weight:800;

  letter-spacing:.11em;
}

.cta-bottom-copy strong{
  display:block;

  margin-top:3px;

  color:#0F1B2D;

  font-size:.67rem;

  font-weight:600;
}

.cta-bottom-points{
  display:flex;

  align-items:center;

  flex-wrap:wrap;

  justify-content:flex-end;

  gap:7px;
}

.cta-bottom-points span{
  display:inline-flex;

  align-items:center;

  gap:5px;

  padding:7px 10px;

  border:1px solid #E2EAF2;

  border-radius:100px;

  background:#FFFFFF;

  color:#718093;

  font-size:.53rem;

  font-weight:600;
}

.cta-bottom-points i{
  color:#2C8CF4;
}


/* =====================================================
   TABLET
===================================================== */

@media(max-width:991.98px){

  .final-cta-light-section{
    padding-top:80px;
  }

  .final-cta-layout{
    grid-template-columns:1fr;

    gap:50px;

    max-width:760px;
  }

  .final-cta-copy h2{
    max-width:700px;
  }

  .final-cta-copy > p{
    max-width:650px;
  }

  .cta-trust-points{
    max-width:650px;
  }

  .final-cta-bottom{
    max-width:760px;

    flex-wrap:wrap;
  }

  .cta-bottom-points{
    width:100%;

    justify-content:flex-start;
  }
}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:767.98px){

  .final-cta-light-section{
    padding:
      65px
      0
      35px;
  }

  .final-cta-layout{
    gap:38px;
  }

  .final-cta-copy h2{
    font-size:
      clamp(
        2.15rem,
        9vw,
        2.8rem
      );
  }

  .final-cta-copy > p{
    font-size:.83rem;
  }

  .final-cta-form-wrap{
    padding:22px;

    border-radius:20px;
  }

  .cta-form-top{
    margin-bottom:19px;
  }

  .cta-form-number{
    font-size:2rem;
  }

  .cta-form-actions{
    flex-direction:column;
  }

  .cta-submit{
    width:100%;
  }

  .cta-whatsapp{
    width:100%;

    min-height:47px;
  }

  .final-cta-bottom{
    margin-top:38px;
  }
}


/* =====================================================
   SMALL MOBILE
===================================================== */

@media(max-width:575.98px){

  .cta-medical,
  .cta-plus{
    display:none;
  }

  .final-cta-form-wrap{
    padding:18px;

    border-radius:18px;
  }

  .cta-form-top h3{
    font-size:1.1rem;
  }

  .cta-form-number{
    font-size:1.7rem;
  }

  .consult-form label{
    font-size:.53rem;
  }

  .cta-input input,
  .cta-input select{
    height:45px;
  }

  .cta-bottom-points{
    flex-direction:column;

    align-items:stretch;
  }

  .cta-bottom-points span{
    justify-content:center;
  }

  .cta-form-footer{
    align-items:flex-start;

    flex-direction:column;

    gap:6px;
  }
}


/* =====================================================
   DIGIMANIC — PREMIUM LANDING PAGE FOOTER V3
===================================================== */
/* =====================================================
   DIGIMANIC — PREMIUM LANDING PAGE FOOTER
===================================================== */
/* =====================================================
   DIGIMANIC — PREMIUM LANDING PAGE FOOTER
===================================================== */

.footer-v3{
  position:relative;
  overflow:hidden;
  isolation:isolate;

  background:#0F1B2D;
  color:#FFFFFF;
}


/* =====================================================
   BACKGROUND
===================================================== */

.footer-v3-bg{
  position:absolute;
  inset:0;

  overflow:hidden;
  pointer-events:none;
  z-index:-1;
}

.footer-v3-glow{
  position:absolute;

  border-radius:50%;

  background:#2C8CF4;

  filter:blur(120px);
}

.footer-v3-glow-1{
  width:430px;
  height:430px;

  top:-300px;
  left:-180px;

  opacity:.055;
}

.footer-v3-glow-2{
  width:380px;
  height:380px;

  right:-190px;
  bottom:-260px;

  opacity:.045;
}

.footer-v3-bg::after{
  content:"";

  position:absolute;
  inset:0;

  background-image:
    linear-gradient(
      rgba(255,255,255,.015) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.015) 1px,
      transparent 1px
    );

  background-size:80px 80px;

  mask-image:
    linear-gradient(
      to bottom,
      rgba(0,0,0,.55),
      transparent 88%
    );
}


/* =====================================================
   FLOATING MEDICAL DETAILS
===================================================== */

.footer-v3-medical{
  position:absolute;

  width:58px;
  height:58px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:1px solid rgba(255,255,255,.06);

  border-radius:16px;

  background:rgba(255,255,255,.025);

  color:#2C8CF4;

  font-size:1rem;

  opacity:.25;

  backdrop-filter:blur(8px);
}

.footer-v3-medical-1{
  top:24%;
  left:2.5%;

  transform:rotate(-8deg);
}

.footer-v3-medical-2{
  right:2.5%;
  bottom:22%;

  transform:rotate(8deg);
}


/* =====================================================
   INTRO
===================================================== */

.footer-v3-intro{
  display:flex;

  align-items:flex-end;

  justify-content:space-between;

  gap:40px;

  padding:
    68px
    0
    52px;

  border-bottom:1px solid rgba(255,255,255,.075);
}

.footer-v3-intro-content{
  max-width:780px;
}

.footer-v3-eyebrow{
  display:inline-flex;

  align-items:center;

  gap:8px;

  color:#2C8CF4;

  font-size:.90rem;

  font-weight:800;

  letter-spacing:.14em;
}

.footer-v3-eyebrow i{
  font-size:.62rem;
}


/* =====================================================
   MAIN TITLE
   H2 intentionally kept controlled
===================================================== */

.footer-v3-intro h2{
  max-width:760px;

  margin:13px 0 0;

  color:#FFFFFF !important;

  font-family:var(--font-display);

  font-size:
    clamp(
      3.05rem,
      4.8vw,
      4.55rem
    );

  font-weight:500;

  line-height:.98;

  letter-spacing:-.045em;
}

.footer-v3-intro h2 span{
  color:#2C8CF4 !important;
}


/* =====================================================
   INTRO PARAGRAPH — INCREASED
===================================================== */

.footer-v3-intro p{
  max-width:520px;

  margin:19px 0 0;

  color:rgba(255,255,255,.52) !important;

  font-size:.82rem;

  line-height:1.8;
}


/* =====================================================
   INTRO CTA
===================================================== */

.footer-v3-intro-cta{
  display:inline-flex;

  align-items:center;

  gap:12px;

  flex-shrink:0;

  padding:12px 14px;

  border:1px solid rgba(44,140,244,.25);

  border-radius:10px;

  background:rgba(44,140,244,.065);

  color:#FFFFFF;

  font-size:.68rem;

  font-weight:700;

  white-space:nowrap;

  transition:
    background .3s ease,
    border-color .3s ease,
    transform .3s ease;
}

.footer-v3-intro-cta i{
  width:27px;
  height:27px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:7px;

  background:#2C8CF4;

  color:#FFFFFF;

  font-size:.68rem;

  transition:.3s ease;
}

.footer-v3-intro-cta:hover{
  color:#FFFFFF;

  background:rgba(44,140,244,.13);

  border-color:rgba(44,140,244,.42);

  transform:translateY(-2px);
}

.footer-v3-intro-cta:hover i{
  transform:translate(2px,-2px);
}


/* =====================================================
   MAIN FOOTER GRID
===================================================== */

.footer-v3-main{
  display:grid;

  grid-template-columns:
    1.45fr
    .85fr
    1fr
    1.15fr;

  gap:50px;

  padding:
    45px
    0;

  border-bottom:1px solid rgba(255,255,255,.075);
}


/* =====================================================
   BRAND
===================================================== */

.footer-v3-brand{
  max-width:310px;
}

.footer-v3-logo{
  display:inline-flex;

  margin-bottom:17px;
}

.footer-v3-logo img{
  display:block;

  width:150px;
  height:auto;
}

.footer-v3-brand p{
  max-width:290px;

  margin:0;

  color:rgba(255,255,255,.43) !important;

  font-size:.72rem;

  line-height:1.8;
}


/* =====================================================
   SOCIAL
===================================================== */

.footer-v3-social{
  display:flex;

  align-items:center;

  gap:7px;

  margin-top:21px;
}

.footer-v3-social a{
  width:32px;
  height:32px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:1px solid rgba(255,255,255,.07);

  border-radius:8px;

  background:rgba(255,255,255,.025);

  color:rgba(255,255,255,.42);

  font-size:.68rem;

  transition:.3s ease;
}

.footer-v3-social a:hover{
  border-color:#2C8CF4;

  background:#2C8CF4;

  color:#FFFFFF;

  transform:translateY(-2px);
}


/* =====================================================
   LINKS
===================================================== */

.footer-v3-links{
  display:flex;

  flex-direction:column;

  align-items:flex-start;

  gap:11px;
}

.footer-v3-links > span,
.footer-v3-contact > span{
  display:block;

  margin-bottom:10px;

  color:rgba(255,255,255,.27);

  font-size:.53rem;

  font-weight:800;

  letter-spacing:.13em;
}

.footer-v3-links a{
  color:rgba(255,255,255,.52);

  font-size:.69rem;

  line-height:1.5;

  transition:
    color .25s ease,
    transform .25s ease;
}

.footer-v3-links a:hover{
  color:#FFFFFF;

  transform:translateX(3px);
}


/* =====================================================
   CONTACT
===================================================== */

.footer-v3-contact{
  display:flex;

  flex-direction:column;

  align-items:flex-start;
}

.footer-v3-email{
  display:inline-flex;

  align-items:center;

  gap:8px;

  color:#FFFFFF;

  font-family:var(--font-display);

  font-size:1.02rem;

  font-weight:500;

  transition:.3s ease;
}

.footer-v3-email i{
  color:#2C8CF4;

  font-family:var(--font-body);

  font-size:.66rem;

  transition:.3s ease;
}

.footer-v3-email:hover{
  color:#2C8CF4;
}

.footer-v3-email:hover i{
  transform:translate(2px,-2px);
}


/* =====================================================
   WHATSAPP
===================================================== */

.footer-v3-whatsapp{
  display:inline-flex;

  align-items:center;

  gap:8px;

  margin-top:15px;

  color:#2C8CF4;

  font-size:.68rem;

  font-weight:700;

  transition:.25s ease;
}

.footer-v3-whatsapp:hover{
  color:#FFFFFF;
}

.footer-v3-whatsapp i{
  font-size:.82rem;
}


/* =====================================================
   CONTACT NOTE
===================================================== */

.footer-v3-contact-note{
  display:flex;

  align-items:center;

  gap:9px;

  margin-top:22px;

  color:rgba(255,255,255,.36);

  font-size:.59rem;
}

.footer-v3-contact-note > i{
  color:#2C8CF4;

  font-size:.75rem;
}

.footer-v3-contact-note span{
  display:flex;

  flex-direction:column;
}

.footer-v3-contact-note small{
  margin-bottom:3px;

  color:rgba(255,255,255,.23);

  font-size:.47rem;

  font-weight:800;

  letter-spacing:.08em;
}


/* =====================================================
   HEALTHCARE POSITIONING
===================================================== */

.footer-v3-positioning{
  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:25px;

  padding:21px 0;

  border-bottom:1px solid rgba(255,255,255,.075);
}

.footer-v3-positioning-title{
  display:flex;

  align-items:center;

  gap:11px;
}

.footer-v3-positioning-icon{
  width:40px;
  height:40px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:10px;

  background:rgba(44,140,244,.08);

  color:#2C8CF4;

  font-size:.84rem;
}

.footer-v3-positioning-title small{
  display:block;

  color:#2C8CF4;

  font-size:.48rem;

  font-weight:800;

  letter-spacing:.1em;
}

.footer-v3-positioning-title strong{
  display:block;

  margin-top:3px;

  color:rgba(255,255,255,.62);

  font-size:.69rem;

  font-weight:600;
}


/* =====================================================
   VALUES
===================================================== */

.footer-v3-values{
  display:flex;

  align-items:center;

  gap:8px;
}

.footer-v3-values span{
  display:inline-flex;

  align-items:center;

  gap:6px;

  padding:7px 11px;

  border:1px solid rgba(255,255,255,.06);

  border-radius:100px;

  color:rgba(255,255,255,.42);

  font-size:.80rem;

  font-weight:600;
}

.footer-v3-values i{
  color:#2C8CF4;

  font-size:.62rem;
}


/* =====================================================
   BOOK CTA
===================================================== */

.footer-v3-book{
  display:inline-flex;

  align-items:center;

  gap:8px;

  color:#FFFFFF;

  font-size:.65rem;

  font-weight:700;

  white-space:nowrap;

  transition:.3s ease;
}

.footer-v3-book i{
  color:#2C8CF4;

  font-size:.7rem;

  transition:.3s ease;
}

.footer-v3-book:hover{
  color:#2C8CF4;
}

.footer-v3-book:hover i{
  transform:translate(2px,-2px);
}


/* =====================================================
   BOTTOM
===================================================== */

.footer-v3-bottom{
  min-height:66px;

  display:grid;

  grid-template-columns:
    1fr
    auto
    1fr;

  align-items:center;

  gap:20px;
}

.footer-v3-bottom p{
  margin:0;

  color:rgba(255,255,255,.28) !important;

  font-size:.90rem;
}

.footer-v3-bottom-center{
  color:rgba(255,255,255,.22);

  font-size:.51rem;

  font-weight:700;

  letter-spacing:.08em;

  text-transform:uppercase;
}

.footer-v3-legal{
  display:flex;

  align-items:center;

  justify-content:flex-end;

  gap:9px;
}

.footer-v3-legal a{
  color:rgba(255,255,255,.29);

  font-size:.80rem;

  transition:.25s ease;
}

.footer-v3-legal a:hover{
  color:#2C8CF4;
}

.footer-v3-legal span{
  width:3px;
  height:3px;

  border-radius:50%;

  background:rgba(255,255,255,.15);
}


/* =====================================================
   TABLET
===================================================== */

@media(max-width:991.98px){

  .footer-v3-intro{
    padding-top:55px;
  }

  .footer-v3-intro h2{
    font-size:
      clamp(
        2.9rem,
        6vw,
        4rem
      );
  }

  .footer-v3-main{
    grid-template-columns:
      1.2fr
      1fr
      1fr;

    gap:40px;
  }

  .footer-v3-brand{
    grid-column:span 3;

    max-width:520px;
  }

  .footer-v3-positioning{
    flex-wrap:wrap;
  }

  .footer-v3-values{
    order:3;

    width:100%;
  }

}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:767.98px){

  .footer-v3-intro{
    align-items:flex-start;

    flex-direction:column;

    gap:22px;

    padding:
      50px
      0
      42px;
  }

  .footer-v3-intro h2{
    max-width:100%;

    font-size:
      clamp(
        2.5rem,
        10vw,
        3.45rem
      );

    line-height:1;
  }

  .footer-v3-intro p{
    max-width:500px;

    margin-top:16px;

    font-size:.75rem;

    line-height:1.75;
  }

  .footer-v3-intro-cta{
    width:100%;

    justify-content:space-between;

    padding:12px 13px;

    font-size:.67rem;
  }


  /* Main grid */

  .footer-v3-main{
    grid-template-columns:
      1fr
      1fr;

    gap:36px 22px;

    padding:
      38px
      0;
  }

  .footer-v3-brand{
    grid-column:span 2;
  }

  .footer-v3-contact{
    grid-column:span 2;
  }


  .footer-v3-brand p{
    font-size:.71rem;

    line-height:1.8;
  }

  .footer-v3-links{
    gap:10px;
  }

  .footer-v3-links a{
    font-size:.68rem;
  }

  .footer-v3-links > span,
  .footer-v3-contact > span{
    font-size:.51rem;
  }

  .footer-v3-email{
    font-size:.98rem;
  }

  .footer-v3-whatsapp{
    font-size:.67rem;
  }


  /* Positioning */

  .footer-v3-positioning{
    align-items:flex-start;

    flex-direction:column;

    gap:17px;

    padding:19px 0;
  }

  .footer-v3-values{
    width:100%;

    flex-wrap:wrap;
  }

  .footer-v3-values span{
    font-size:.54rem;

    padding:7px 10px;
  }

  .footer-v3-book{
    width:100%;

    justify-content:space-between;

    padding-top:4px;

    font-size:.65rem;
  }


  /* Bottom */

  .footer-v3-bottom{
    display:flex;

    flex-direction:column;

    justify-content:center;

    gap:10px;

    padding:18px 0;
  }

  .footer-v3-bottom p{
    font-size:.54rem;
  }

  .footer-v3-bottom-center{
    order:3;

    font-size:.49rem;
  }

  .footer-v3-legal a{
    font-size:.53rem;
  }

}


/* =====================================================
   SMALL MOBILE
===================================================== */

@media(max-width:575.98px){

  .footer-v3-medical{
    display:none;
  }

  .footer-v3-intro{
    padding:
      44px
      0
      38px;
  }

  .footer-v3-intro h2{
    font-size:2.4rem;

    line-height:.99;
  }

  .footer-v3-intro p{
    font-size:.73rem;

    line-height:1.75;
  }

  .footer-v3-main{
    grid-template-columns:1fr;

    gap:31px;
  }

  .footer-v3-brand,
  .footer-v3-contact{
    grid-column:span 1;
  }

  .footer-v3-brand p{
    font-size:.7rem;
  }

  .footer-v3-links a{
    font-size:.68rem;
  }

  .footer-v3-values{
    flex-direction:column;

    align-items:stretch;
  }

  .footer-v3-values span{
    justify-content:center;

    font-size:.80rem;
  }

  .footer-v3-positioning-title strong{
    font-size:.67rem;
  }

}

/* =====================================================
   DIGIMANIC — PROCESS / LIGHT PREMIUM
===================================================== */

.process-section{
  position:relative;
  overflow:hidden;
  background:#FFFFFF;
  isolation:isolate;
}


/* =====================================================
   BACKGROUND
===================================================== */

.process-bg{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:-1;
}

.process-orb{
  position:absolute;
  border-radius:50%;
  background:#2C8CF4;
  filter:blur(100px);
}

.process-orb-1{
  width:420px;
  height:420px;
  top:-260px;
  left:-180px;
  opacity:.055;
}

.process-orb-2{
  width:360px;
  height:360px;
  right:-180px;
  bottom:-240px;
  opacity:.045;
}

.process-grid{
  position:absolute;
  inset:0;

  background-image:
    linear-gradient(
      rgba(15,27,45,.025) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(15,27,45,.025) 1px,
      transparent 1px
    );

  background-size:72px 72px;

  mask-image:
    linear-gradient(
      to bottom,
      transparent,
      rgba(0,0,0,.65) 18%,
      rgba(0,0,0,.45) 80%,
      transparent
    );
}


/* =====================================================
   HEADING
===================================================== */

.process-heading{
  position:relative;
  z-index:2;
}

.process-heading .section-badge{
  display:inline-flex;
  align-items:center;
  gap:7px;
}

.process-heading .section-badge i{
  font-size:.72rem;
}

.process-heading h2{
  max-width:760px;
  margin-left:auto;
  margin-right:auto;
}


/* =====================================================
   PROCESS GRID
===================================================== */

.process-grid-wrap{
  position:relative;
  margin-top:4rem;
}


/* Connecting line behind cards */

.process-grid-wrap::before{
  content:"";

  position:absolute;

  top:50%;
  left:5%;
  right:5%;

  height:1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(44,140,244,.18),
      rgba(44,140,244,.18),
      transparent
    );

  z-index:-1;
}


/* =====================================================
   CARD
===================================================== */

.process-card{
  position:relative;

  height:100%;
  min-height:265px;

  padding:24px 22px 25px;

  background:#FFFFFF;

  border:1px solid rgba(15,27,45,.075);

  border-radius:18px;

  box-shadow:
    0 16px 38px -26px rgba(15,27,45,.28);

  overflow:hidden;

  transition:
    transform .35s ease,
    border-color .35s ease,
    box-shadow .35s ease;
}


/* Blue top accent */

.process-card::before{
  content:"";

  position:absolute;

  top:0;
  left:22px;
  right:22px;

  height:2px;

  background:#2C8CF4;

  transform:scaleX(.25);
  transform-origin:left;

  opacity:.35;

  transition:
    transform .35s ease,
    opacity .35s ease;
}


/* Corner glow */

.process-card::after{
  content:"";

  position:absolute;

  width:100px;
  height:100px;

  top:-55px;
  right:-55px;

  border-radius:50%;

  background:#2C8CF4;

  opacity:.035;

  filter:blur(18px);

  transition:opacity .35s ease;
}

.process-card:hover{
  transform:translateY(-7px);

  border-color:rgba(44,140,244,.24);

  box-shadow:
    0 25px 48px -28px rgba(15,27,45,.3);
}

.process-card:hover::before{
  transform:scaleX(1);
  opacity:1;
}

.process-card:hover::after{
  opacity:.09;
}


/* =====================================================
   CARD TOP
===================================================== */

.process-card-top{
  display:flex;

  align-items:center;
  justify-content:space-between;

  margin-bottom:30px;
}


/* Number */

.process-num{
  color:rgba(15,27,45,.16);

  font-family:var(--font-display);

  font-size:2.5rem;

  font-weight:600;

  line-height:1;

  letter-spacing:-.05em;

  transition:
    color .3s ease,
    transform .3s ease;
}

.process-card:hover .process-num{
  color:#2C8CF4;
  transform:translateX(2px);
}


/* Icon */

.process-icon{
  width:42px;
  height:42px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:11px;

  background:rgba(44,140,244,.07);

  border:1px solid rgba(44,140,244,.12);

  color:#2C8CF4;

  font-size:.9rem;

  transition:
    background .3s ease,
    color .3s ease,
    transform .3s ease;
}

.process-card:hover .process-icon{
  background:#2C8CF4;
  color:#FFFFFF;
  transform:rotate(-4deg);
}


/* =====================================================
   TYPOGRAPHY
===================================================== */

.process-card h3{
  margin:0 0 10px;

  color:#0F1B2D;

  font-family:var(--font-display);

  font-size:1.18rem;

  font-weight:600;

  line-height:1.25;

  letter-spacing:-.015em;
}

.process-card p{
  margin:0;

  color:rgba(15,27,45,.58);

  font-size:.78rem;

  line-height:1.75;
}


/* =====================================================
   FINAL CARD
===================================================== */

.process-card-final{
  background:
    linear-gradient(
      145deg,
      #FFFFFF 0%,
      rgba(44,140,244,.055) 100%
    );

  border-color:rgba(44,140,244,.18);
}

.process-card-final .process-num{
  color:#2C8CF4;
}

.process-card-final .process-icon{
  background:#2C8CF4;
  color:#FFFFFF;
}


/* =====================================================
   BOTTOM COMPOUNDING LOOP
===================================================== */

.process-bottom{
  position:relative;

  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:30px;

  margin-top:58px;

  padding:
    20px
    22px;

  border-top:1px solid rgba(15,27,45,.07);
  border-bottom:1px solid rgba(15,27,45,.07);
}

.process-bottom-line{
  position:absolute;

  left:0;
  top:-1px;

  width:120px;
  height:2px;

  background:#2C8CF4;
}


.process-bottom-content{
  display:flex;

  align-items:center;

  gap:12px;
}

.process-bottom-icon{
  width:38px;
  height:38px;

  display:flex;
  align-items:center;
  justify-content:center;

  flex-shrink:0;

  border-radius:10px;

  background:rgba(44,140,244,.07);

  color:#2C8CF4;

  font-size:.8rem;
}

.process-bottom-content span{
  display:block;

  margin-bottom:3px;

  color:rgba(15,27,45,.38);

  font-size:.48rem;

  font-weight:800;

  letter-spacing:.13em;
}

.process-bottom-content strong{
  display:block;

  color:#0F1B2D;

  font-size:.75rem;

  font-weight:700;
}

.process-bottom > p{
  margin:0;

  color:rgba(15,27,45,.42);

  font-size:.68rem;

  font-weight:500;
}


/* =====================================================
   TABLET
===================================================== */

@media(max-width:991.98px){

  .process-grid-wrap{
    margin-top:3rem;
  }

  .process-grid-wrap::before{
    display:none;
  }

  .process-card{
    min-height:250px;
    padding:22px 20px 23px;
  }

  .process-card-top{
    margin-bottom:26px;
  }

  .process-num{
    font-size:2.3rem;
  }

  .process-card h3{
    font-size:1.1rem;
  }

  .process-card p{
    font-size:.75rem;
  }

}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:767.98px){

  .process-grid-wrap{
    margin-top:2.5rem;
  }

  .process-card{
    min-height:235px;

    padding:
      20px
      18px
      21px;

    border-radius:15px;
  }

  .process-card::before{
    left:18px;
    right:18px;
  }

  .process-card-top{
    margin-bottom:23px;
  }

  .process-num{
    font-size:2rem;
  }

  .process-icon{
    width:38px;
    height:38px;

    border-radius:10px;

    font-size:.8rem;
  }

  .process-card h3{
    font-size:1.02rem;
  }

  .process-card p{
    font-size:.72rem;
    line-height:1.7;
  }

  .process-bottom{
    align-items:flex-start;

    flex-direction:column;

    gap:14px;

    margin-top:40px;

    padding:
      18px
      16px;
  }

  .process-bottom > p{
    padding-left:50px;
  }

}


/* =====================================================
   SMALL MOBILE
===================================================== */

@media(max-width:575.98px){

  .process-grid-wrap{
    margin-top:2.2rem;
  }

  .process-card{
    min-height:225px;

    padding:
      18px
      16px
      20px;
  }

  .process-num{
    font-size:1.8rem;
  }

  .process-card-top{
    margin-bottom:20px;
  }

  .process-card h3{
    font-size:.98rem;
  }

  .process-card p{
    font-size:.7rem;
  }

  .process-bottom-content strong{
    font-size:.7rem;
  }

  .process-bottom > p{
    font-size:.64rem;
  }

}


```css
/* =====================================================
   DIGIMANIC — WEBSITE CARE PLANS
   DARK PREMIUM
===================================================== */

.care-plans-section{
  position:relative;
  overflow:hidden;
  isolation:isolate;

  background:#0F1B2D;
  color:#FFFFFF;
}


/* =====================================================
   BACKGROUND
===================================================== */

.care-bg{
  position:absolute;
  inset:0;

  overflow:hidden;
  pointer-events:none;

  z-index:-1;
}

.care-glow{
  position:absolute;

  border-radius:50%;

  background:#2C8CF4;

  filter:blur(120px);
}

.care-glow-1{
  width:450px;
  height:450px;

  top:-280px;
  left:-190px;

  opacity:.07;
}

.care-glow-2{
  width:400px;
  height:400px;

  right:-200px;
  bottom:-260px;

  opacity:.055;
}

.care-bg::after{
  content:"";

  position:absolute;
  inset:0;

  background-image:
    linear-gradient(
      rgba(255,255,255,.018) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.018) 1px,
      transparent 1px
    );

  background-size:80px 80px;

  mask-image:
    linear-gradient(
      to bottom,
      rgba(0,0,0,.7),
      transparent 85%
    );
}

.care-plus{
  position:absolute;

  color:#2C8CF4;

  font-family:var(--font-display);

  font-size:6rem;

  font-weight:300;

  opacity:.07;
}

.care-plus-1{
  top:15%;
  right:4%;
}

.care-plus-2{
  bottom:13%;
  left:3%;
}


/* =====================================================
   HEADER
===================================================== */

.care-header{
  display:flex;

  align-items:flex-end;
  justify-content:space-between;

  gap:55px;

  margin-bottom:58px;
}

.care-header-copy{
  max-width:760px;
}

.care-header-copy .section-badge{
  display:inline-flex;

  align-items:center;

  gap:8px;
}

.care-header-copy h2{
  margin-top:14px;
  margin-bottom:17px;

  color:#FFFFFF !important;
}

.care-header-copy p{
  max-width:620px;

  margin:0;

  color:rgba(255,255,255,.55) !important;

  font-size:1rem;

  line-height:1.8;
}


/* =====================================================
   HEADER NOTE
===================================================== */

.care-header-note{
  display:flex;

  align-items:center;

  gap:13px;

  width:310px;

  padding:15px 17px;

  flex-shrink:0;

  border:
    1px solid
    rgba(255,255,255,.09);

  border-radius:14px;

  background:
    rgba(255,255,255,.035);

  backdrop-filter:blur(10px);
}

.care-note-icon{
  width:40px;
  height:40px;

  display:flex;
  align-items:center;
  justify-content:center;

  flex-shrink:0;

  border-radius:10px;

  background:rgba(44,140,244,.12);

  color:#2C8CF4;

  font-size:.95rem;
}

.care-header-note strong{
  display:block;

  color:#FFFFFF;

  font-size:.76rem;

  font-weight:700;
}

.care-header-note small{
  display:block;

  margin-top:3px;

  color:rgba(255,255,255,.4);

  font-size:.63rem;

  line-height:1.55;
}


/* =====================================================
   PLANS
===================================================== */

.care-plans{
  display:grid;

  grid-template-columns:1fr 1fr;

  gap:24px;

  align-items:stretch;
}


/* =====================================================
   PLAN CARD
===================================================== */

.care-plan{
  position:relative;

  display:flex;
  flex-direction:column;

  min-height:630px;

  padding:36px;

  border:
    1px solid
    rgba(255,255,255,.09);

  border-radius:22px;

  background:
    rgba(255,255,255,.035);

  box-shadow:
    0 30px 70px -45px
    rgba(0,0,0,.7);

  overflow:hidden;

  transition:
    transform .35s ease,
    border-color .35s ease,
    background .35s ease;
}


/* Blue edge */

.care-plan::before{
  content:"";

  position:absolute;

  top:0;
  left:0;

  width:3px;
  height:100%;

  background:#2C8CF4;

  opacity:.25;

  transition:opacity .3s ease;
}

.care-plan:hover{
  transform:translateY(-7px);

  border-color:
    rgba(44,140,244,.3);

  background:
    rgba(255,255,255,.05);
}

.care-plan:hover::before{
  opacity:1;
}


/* =====================================================
   FEATURED
===================================================== */

.care-plan-featured{
  border-color:
    rgba(44,140,244,.42);

  background:
    linear-gradient(
      145deg,
      rgba(44,140,244,.1),
      rgba(255,255,255,.035)
    );

  box-shadow:
    0 35px 80px -48px
    rgba(44,140,244,.45);
}

.care-plan-featured::before{
  opacity:1;
}


/* =====================================================
   RECOMMENDED
===================================================== */

.care-recommended{
  position:absolute;

  top:0;
  right:30px;

  display:flex;

  align-items:center;

  gap:7px;

  padding:9px 15px;

  border-radius:
    0 0 10px 10px;

  background:#2C8CF4;

  color:#FFFFFF;

  font-size:.59rem;

  font-weight:800;

  letter-spacing:.07em;

  text-transform:uppercase;
}

.care-recommended i{
  font-size:.7rem;
}


/* =====================================================
   PLAN TOP
===================================================== */

.care-plan-top{
  display:flex;

  align-items:flex-start;
  justify-content:space-between;

  gap:20px;

  padding-right:85px;
}

.care-duration{
  display:block;

  margin-bottom:9px;

  color:#2C8CF4;

  font-size:.6rem;

  font-weight:800;

  letter-spacing:.14em;
}

.care-plan h3{
  margin:0;

  color:#FFFFFF;

  font-family:var(--font-display);

  font-size:1.72rem;

  font-weight:600;

  line-height:1.2;

  letter-spacing:-.025em;
}

.care-plan-number{
  color:rgba(255,255,255,.14);

  font-family:var(--font-display);

  font-size:2.9rem;

  font-weight:600;

  line-height:1;
}


/* =====================================================
   DESCRIPTION
===================================================== */

.care-plan-description{
  max-width:530px;

  margin:
    20px
    0
    0;

  color:rgba(255,255,255,.55);

  font-size:.86rem;

  line-height:1.8;
}


/* =====================================================
   DIVIDER
===================================================== */

.care-divider{
  width:100%;
  height:1px;

  margin:
    27px
    0
    24px;

  background:
    rgba(255,255,255,.085);
}


/* =====================================================
   FEATURES
===================================================== */

.care-features{
  display:grid;

  grid-template-columns:1fr 1fr;

  gap:14px 24px;
}

.care-features span{
  display:flex;

  align-items:center;

  gap:9px;

  color:rgba(255,255,255,.65);

  font-size:.76rem;

  font-weight:500;

  line-height:1.5;
}

.care-features i{
  color:#2C8CF4;

  font-size:.75rem;

  flex-shrink:0;
}


/* =====================================================
   PLAN FOOTER
===================================================== */

.care-plan-footer{
  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:22px;

  margin-top:auto;

  padding-top:34px;
}

.care-plan-caption{
  color:rgba(255,255,255,.34);

  font-size:.62rem;

  font-weight:600;
}


/* =====================================================
   BUTTON
===================================================== */

.care-plan-btn{
  display:inline-flex;

  align-items:center;
  justify-content:center;

  gap:10px;

  padding:12px 16px;

  border:
    1px solid
    rgba(255,255,255,.15);

  border-radius:10px;

  background:
    rgba(255,255,255,.035);

  color:#FFFFFF;

  font-size:.7rem;

  font-weight:700;

  white-space:nowrap;

  transition:
    background .3s ease,
    border-color .3s ease,
    transform .3s ease;
}

.care-plan-btn i{
  color:#2C8CF4;

  font-size:.7rem;

  transition:.3s ease;
}

.care-plan-btn:hover{
  border-color:#2C8CF4;

  background:#FFFFFF;

  color:#0F1B2D;

  transform:translateY(-2px);
}

.care-plan-btn:hover i{
  transform:translate(2px,-2px);
}


/* Featured */

.care-plan-btn-primary{
  border-color:#2C8CF4;

  background:#2C8CF4;

  color:#FFFFFF;
}

.care-plan-btn-primary i{
  color:#FFFFFF;
}

.care-plan-btn-primary:hover{
  border-color:#FFFFFF;

  background:#FFFFFF;

  color:#0F1B2D;
}

.care-plan-btn-primary:hover i{
  color:#2C8CF4;
}


/* =====================================================
   TRUST STRIP
===================================================== */

.care-bottom{
  display:grid;

  grid-template-columns:
    repeat(4,1fr);

  margin-top:24px;

  border:
    1px solid
    rgba(255,255,255,.085);

  border-radius:15px;

  background:
    rgba(255,255,255,.025);

  overflow:hidden;
}

.care-bottom-item{
  display:flex;

  align-items:center;

  gap:12px;

  padding:19px 21px;

  border-right:
    1px solid
    rgba(255,255,255,.07);
}

.care-bottom-item:last-child{
  border-right:0;
}

.care-bottom-item > i{
  color:#2C8CF4;

  font-size:1rem;
}

.care-bottom-item span{
  display:flex;

  flex-direction:column;

  color:rgba(255,255,255,.4);

  font-size:.6rem;

  line-height:1.5;
}

.care-bottom-item strong{
  margin-bottom:2px;

  color:rgba(255,255,255,.8);

  font-size:.68rem;

  font-weight:700;
}


/* =====================================================
   TABLET
===================================================== */

@media(max-width:991.98px){

  .care-header{
    align-items:flex-start;

    flex-direction:column;

    gap:25px;

    margin-bottom:42px;
  }

  .care-header-note{
    width:auto;
    max-width:400px;
  }

  .care-plans{
    gap:18px;
  }

  .care-plan{
    min-height:650px;

    padding:28px;
  }

  .care-plan h3{
    font-size:1.5rem;
  }

  .care-features{
    gap:12px 14px;
  }

  .care-features span{
    font-size:.7rem;
  }

  .care-bottom{
    grid-template-columns:1fr 1fr;
  }

  .care-bottom-item:nth-child(2){
    border-right:0;
  }

  .care-bottom-item:nth-child(-n+2){
    border-bottom:
      1px solid
      rgba(255,255,255,.07);
  }
}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:767.98px){

  .care-header{
    margin-bottom:34px;
  }

  .care-header-copy p{
    font-size:.88rem;
  }

  .care-plans{
    grid-template-columns:1fr;
  }

  .care-plan{
    min-height:auto;

    padding:27px 21px 23px;

    border-radius:18px;
  }

  .care-plan-featured{
    order:-1;
  }

  .care-plan-top{
    padding-right:55px;
  }

  .care-plan h3{
    font-size:1.4rem;
  }

  .care-plan-number{
    font-size:2.4rem;
  }

  .care-plan-description{
    font-size:.8rem;
  }

  .care-features{
    gap:12px 10px;
  }

  .care-features span{
    font-size:.7rem;
  }

  .care-plan-footer{
    align-items:flex-start;

    flex-direction:column;

    gap:14px;
  }

  .care-plan-btn{
    width:100%;
  }

  .care-bottom{
    grid-template-columns:1fr;
  }

  .care-bottom-item{
    border-right:0 !important;

    border-bottom:
      1px solid
      rgba(255,255,255,.07);
  }

  .care-bottom-item:last-child{
    border-bottom:0;
  }
}


/* =====================================================
   SMALL MOBILE
===================================================== */

@media(max-width:575.98px){

  .care-plus{
    display:none;
  }

  .care-header-note{
    width:100%;
  }

  .care-plan{
    padding:24px 18px 21px;
  }

  .care-plan h3{
    font-size:1.3rem;
  }

  .care-plan-description{
    font-size:.77rem;
  }

  .care-features{
    grid-template-columns:1fr;
  }

  .care-features span{
    font-size:.73rem;
  }

  .care-plan-caption{
    font-size:.59rem;
  }

  .care-plan-btn{
    font-size:.7rem;
  }

  .care-bottom-item{
    padding:17px 18px;
  }

  .care-bottom-item span{
    font-size:.59rem;
  }

  .care-bottom-item strong{
    font-size:.66rem;
  }
}


/* =====================================================
   DIGIMANIC — WEBSITE CARE PLANS
   DARK PREMIUM
===================================================== */

.care-plans-section{
  position:relative;
  overflow:hidden;
  isolation:isolate;

  background:#0F1B2D;
  color:#FFFFFF;
}


/* =====================================================
   BACKGROUND
===================================================== */

.care-bg{
  position:absolute;
  inset:0;

  overflow:hidden;
  pointer-events:none;

  z-index:-1;
}

.care-glow{
  position:absolute;

  border-radius:50%;

  background:#2C8CF4;

  filter:blur(120px);
}

.care-glow-1{
  width:450px;
  height:450px;

  top:-280px;
  left:-190px;

  opacity:.07;
}

.care-glow-2{
  width:400px;
  height:400px;

  right:-200px;
  bottom:-260px;

  opacity:.055;
}

.care-bg::after{
  content:"";

  position:absolute;
  inset:0;

  background-image:
    linear-gradient(
      rgba(255,255,255,.018) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.018) 1px,
      transparent 1px
    );

  background-size:80px 80px;

  mask-image:
    linear-gradient(
      to bottom,
      rgba(0,0,0,.7),
      transparent 85%
    );
}

.care-plus{
  position:absolute;

  color:#2C8CF4;

  font-family:var(--font-display);

  font-size:6rem;

  font-weight:300;

  opacity:.07;
}

.care-plus-1{
  top:15%;
  right:4%;
}

.care-plus-2{
  bottom:13%;
  left:3%;
}


/* =====================================================
   HEADER
===================================================== */

.care-header{
  display:flex;

  align-items:flex-end;
  justify-content:space-between;

  gap:55px;

  margin-bottom:58px;
}

.care-header-copy{
  max-width:760px;
}

.care-header-copy .section-badge{
  display:inline-flex;

  align-items:center;

  gap:8px;
}

.care-header-copy h2{
  margin-top:14px;
  margin-bottom:17px;

  color:#FFFFFF !important;
}

.care-header-copy p{
  max-width:620px;

  margin:0;

  color:rgba(255,255,255,.55) !important;

  font-size:1rem;

  line-height:1.8;
}


/* =====================================================
   HEADER NOTE
===================================================== */

.care-header-note{
  display:flex;

  align-items:center;

  gap:13px;

  width:310px;

  padding:15px 17px;

  flex-shrink:0;

  border:
    1px solid
    rgba(255,255,255,.09);

  border-radius:14px;

  background:
    rgba(255,255,255,.035);

  backdrop-filter:blur(10px);
}

.care-note-icon{
  width:40px;
  height:40px;

  display:flex;
  align-items:center;
  justify-content:center;

  flex-shrink:0;

  border-radius:10px;

  background:rgba(44,140,244,.12);

  color:#2C8CF4;

  font-size:.95rem;
}

.care-header-note strong{
  display:block;

  color:#FFFFFF;

  font-size:.76rem;

  font-weight:700;
}

.care-header-note small{
  display:block;

  margin-top:3px;

  color:rgba(255,255,255,.4);

  font-size:.63rem;

  line-height:1.55;
}


/* =====================================================
   PLANS
===================================================== */

.care-plans{
  display:grid;

  grid-template-columns:1fr 1fr;

  gap:24px;

  align-items:stretch;
}


/* =====================================================
   PLAN CARD
===================================================== */

.care-plan{
  position:relative;

  display:flex;
  flex-direction:column;

  min-height:630px;

  padding:36px;

  border:
    1px solid
    rgba(255,255,255,.09);

  border-radius:22px;

  background:
    rgba(255,255,255,.035);

  box-shadow:
    0 30px 70px -45px
    rgba(0,0,0,.7);

  overflow:hidden;

  transition:
    transform .35s ease,
    border-color .35s ease,
    background .35s ease;
}


/* Blue edge */

.care-plan::before{
  content:"";

  position:absolute;

  top:0;
  left:0;

  width:3px;
  height:100%;

  background:#2C8CF4;

  opacity:.25;

  transition:opacity .3s ease;
}

.care-plan:hover{
  transform:translateY(-7px);

  border-color:
    rgba(44,140,244,.3);

  background:
    rgba(255,255,255,.05);
}

.care-plan:hover::before{
  opacity:1;
}


/* =====================================================
   FEATURED
===================================================== */

.care-plan-featured{
  border-color:
    rgba(44,140,244,.42);

  background:
    linear-gradient(
      145deg,
      rgba(44,140,244,.1),
      rgba(255,255,255,.035)
    );

  box-shadow:
    0 35px 80px -48px
    rgba(44,140,244,.45);
}

.care-plan-featured::before{
  opacity:1;
}


/* =====================================================
   RECOMMENDED
===================================================== */

.care-recommended{
  position:absolute;

  top:0;
  right:30px;

  display:flex;

  align-items:center;

  gap:7px;

  padding:9px 15px;

  border-radius:
    0 0 10px 10px;

  background:#2C8CF4;

  color:#FFFFFF;

  font-size:.59rem;

  font-weight:800;

  letter-spacing:.07em;

  text-transform:uppercase;
}

.care-recommended i{
  font-size:.7rem;
}


/* =====================================================
   PLAN TOP
===================================================== */

.care-plan-top{
  display:flex;

  align-items:flex-start;
  justify-content:space-between;

  gap:20px;

  padding-right:85px;
}

.care-duration{
  display:block;

  margin-bottom:9px;

  color:#2C8CF4;

  font-size:.6rem;

  font-weight:800;

  letter-spacing:.14em;
}

.care-plan h3{
  margin:0;

  color:#FFFFFF;

  font-family:var(--font-display);

  font-size:1.72rem;

  font-weight:600;

  line-height:1.2;

  letter-spacing:-.025em;
}

.care-plan-number{
  color:rgba(255,255,255,.14);

  font-family:var(--font-display);

  font-size:2.9rem;

  font-weight:600;

  line-height:1;
}


/* =====================================================
   DESCRIPTION
===================================================== */

.care-plan-description{
  max-width:530px;

  margin:
    20px
    0
    0;

  color:rgba(255,255,255,.55);

  font-size:.86rem;

  line-height:1.8;
}


/* =====================================================
   DIVIDER
===================================================== */

.care-divider{
  width:100%;
  height:1px;

  margin:
    27px
    0
    24px;

  background:
    rgba(255,255,255,.085);
}


/* =====================================================
   FEATURES
===================================================== */

.care-features{
  display:grid;

  grid-template-columns:1fr 1fr;

  gap:14px 24px;
}

.care-features span{
  display:flex;

  align-items:center;

  gap:9px;

  color:rgba(255,255,255,.65);

  font-size:.76rem;

  font-weight:500;

  line-height:1.5;
}

.care-features i{
  color:#2C8CF4;

  font-size:.75rem;

  flex-shrink:0;
}


/* =====================================================
   PLAN FOOTER
===================================================== */

.care-plan-footer{
  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:22px;

  margin-top:auto;

  padding-top:34px;
}

.care-plan-caption{
  color:rgba(255,255,255,.34);

  font-size:.62rem;

  font-weight:600;
}


/* =====================================================
   BUTTON
===================================================== */

.care-plan-btn{
  display:inline-flex;

  align-items:center;
  justify-content:center;

  gap:10px;

  padding:12px 16px;

  border:
    1px solid
    rgba(255,255,255,.15);

  border-radius:10px;

  background:
    rgba(255,255,255,.035);

  color:#FFFFFF;

  font-size:.7rem;

  font-weight:700;

  white-space:nowrap;

  transition:
    background .3s ease,
    border-color .3s ease,
    transform .3s ease;
}

.care-plan-btn i{
  color:#2C8CF4;

  font-size:.7rem;

  transition:.3s ease;
}

.care-plan-btn:hover{
  border-color:#2C8CF4;

  background:#FFFFFF;

  color:#0F1B2D;

  transform:translateY(-2px);
}

.care-plan-btn:hover i{
  transform:translate(2px,-2px);
}


/* Featured */

.care-plan-btn-primary{
  border-color:#2C8CF4;

  background:#2C8CF4;

  color:#FFFFFF;
}

.care-plan-btn-primary i{
  color:#FFFFFF;
}

.care-plan-btn-primary:hover{
  border-color:#FFFFFF;

  background:#FFFFFF;

  color:#0F1B2D;
}

.care-plan-btn-primary:hover i{
  color:#2C8CF4;
}


/* =====================================================
   TRUST STRIP
===================================================== */

.care-bottom{
  display:grid;

  grid-template-columns:
    repeat(4,1fr);

  margin-top:24px;

  border:
    1px solid
    rgba(255,255,255,.085);

  border-radius:15px;

  background:
    rgba(255,255,255,.025);

  overflow:hidden;
}

.care-bottom-item{
  display:flex;

  align-items:center;

  gap:12px;

  padding:19px 21px;

  border-right:
    1px solid
    rgba(255,255,255,.07);
}

.care-bottom-item:last-child{
  border-right:0;
}

.care-bottom-item > i{
  color:#2C8CF4;

  font-size:1rem;
}

.care-bottom-item span{
  display:flex;

  flex-direction:column;

  color:rgba(255,255,255,.4);

  font-size:.6rem;

  line-height:1.5;
}

.care-bottom-item strong{
  margin-bottom:2px;

  color:rgba(255,255,255,.8);

  font-size:.68rem;

  font-weight:700;
}


/* =====================================================
   TABLET
===================================================== */

@media(max-width:991.98px){

  .care-header{
    align-items:flex-start;

    flex-direction:column;

    gap:25px;

    margin-bottom:42px;
  }

  .care-header-note{
    width:auto;
    max-width:400px;
  }

  .care-plans{
    gap:18px;
  }

  .care-plan{
    min-height:650px;

    padding:28px;
  }

  .care-plan h3{
    font-size:1.5rem;
  }

  .care-features{
    gap:12px 14px;
  }

  .care-features span{
    font-size:.7rem;
  }

  .care-bottom{
    grid-template-columns:1fr 1fr;
  }

  .care-bottom-item:nth-child(2){
    border-right:0;
  }

  .care-bottom-item:nth-child(-n+2){
    border-bottom:
      1px solid
      rgba(255,255,255,.07);
  }
}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:767.98px){

  .care-header{
    margin-bottom:34px;
  }

  .care-header-copy p{
    font-size:.88rem;
  }

  .care-plans{
    grid-template-columns:1fr;
  }

  .care-plan{
    min-height:auto;

    padding:27px 21px 23px;

    border-radius:18px;
  }

  .care-plan-featured{
    order:-1;
  }

  .care-plan-top{
    padding-right:55px;
  }

  .care-plan h3{
    font-size:1.4rem;
  }

  .care-plan-number{
    font-size:2.4rem;
  }

  .care-plan-description{
    font-size:.8rem;
  }

  .care-features{
    gap:12px 10px;
  }

  .care-features span{
    font-size:.7rem;
  }

  .care-plan-footer{
    align-items:flex-start;

    flex-direction:column;

    gap:14px;
  }

  .care-plan-btn{
    width:100%;
  }

  .care-bottom{
    grid-template-columns:1fr;
  }

  .care-bottom-item{
    border-right:0 !important;

    border-bottom:
      1px solid
      rgba(255,255,255,.07);
  }

  .care-bottom-item:last-child{
    border-bottom:0;
  }
}


/* =====================================================
   SMALL MOBILE
===================================================== */

@media(max-width:575.98px){

  .care-plus{
    display:none;
  }

  .care-header-note{
    width:100%;
  }

  .care-plan{
    padding:24px 18px 21px;
  }

  .care-plan h3{
    font-size:1.3rem;
  }

  .care-plan-description{
    font-size:.77rem;
  }

  .care-features{
    grid-template-columns:1fr;
  }

  .care-features span{
    font-size:.73rem;
  }

  .care-plan-caption{
    font-size:.59rem;
  }

  .care-plan-btn{
    font-size:.7rem;
  }

  .care-bottom-item{
    padding:17px 18px;
  }

  .care-bottom-item span{
    font-size:.59rem;
  }

  .care-bottom-item strong{
    font-size:.66rem;
  }
}

.healthcare-cta-light{
  position:relative;
  overflow:hidden;
  padding:5.5rem 0;
  background:#FFFFFF;
}

.healthcare-cta-glow{
  position:absolute;
  width:420px;
  height:420px;
  top:-240px;
  right:-100px;
  border-radius:50%;
  background:#2C8CF4;
  filter:blur(130px);
  opacity:.08;
  pointer-events:none;
}

.healthcare-cta-box{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:60px;
  padding:48px 52px;
  border:1px solid rgba(15,27,45,.09);
  border-radius:24px;
  background:
    linear-gradient(
      135deg,
      #FFFFFF 0%,
      #F7FBFF 100%
    );
  box-shadow:
    0 25px 60px -35px rgba(15,27,45,.22);
  overflow:hidden;
}

.healthcare-cta-box::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:4px;
  height:100%;
  background:#2C8CF4;
}

.healthcare-cta-content{
  max-width:720px;
}

.healthcare-cta-label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:15px;
  color:#2C8CF4;
  font-size:.7rem;
  font-weight:800;
  letter-spacing:.13em;
}

.healthcare-cta-label i{
  font-size:.85rem;
}

.healthcare-cta-content h3{
  margin:0;
  max-width:700px;
  color:#0F1B2D;
  font-family:var(--font-display);
  font-size:clamp(2rem, 1.5rem + 1.8vw, 3rem);
  font-weight:600;
  line-height:1.15;
  letter-spacing:-.03em;
}

.healthcare-cta-content h3 strong{
  color:#2C8CF4;
  font-weight:600;
}

.healthcare-cta-content p{
  max-width:620px;
  margin:17px 0 0;
  color:#4b5a6d;
  font-size:1rem;
  line-height:1.8;
}

.healthcare-cta-action{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  flex-shrink:0;
  min-width:245px;
}

.healthcare-cta-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:15px 21px;
  border:1px solid #2C8CF4;
  border-radius:11px;
  background:#2C8CF4;
  color:#FFFFFF;
  font-size:.82rem;
  font-weight:700;
  white-space:nowrap;
  box-shadow:
    0 12px 28px -12px rgba(44,140,244,.55);
  transition:
    transform .3s ease,
    background .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;
}

.healthcare-cta-button i{
  font-size:.8rem;
  transition:transform .3s ease;
}

.healthcare-cta-button:hover{
  transform:translateY(-3px);
  background:#0F1B2D;
  border-color:#0F1B2D;
  color:#FFFFFF;
  box-shadow:
    0 16px 32px -14px rgba(15,27,45,.35);
}

.healthcare-cta-button:hover i{
  transform:translate(3px,-3px);
}

.healthcare-cta-action small{
  margin-top:11px;
  color:#7c8898;
  font-size:.68rem;
  line-height:1.5;
}


/* TABLET */
@media(max-width:991.98px){

  .healthcare-cta-box{
    align-items:flex-start;
    flex-direction:column;
    gap:32px;
    padding:42px;
  }

  .healthcare-cta-action{
    width:100%;
  }

  .healthcare-cta-button{
    width:auto;
  }
}


/* MOBILE */
@media(max-width:767.98px){

  .healthcare-cta-light{
    padding:4rem 0;
  }

  .healthcare-cta-box{
    padding:34px 25px 30px;
    border-radius:19px;
    gap:28px;
  }

  .healthcare-cta-content h3{
    font-size:2rem;
  }

  .healthcare-cta-content p{
    font-size:.9rem;
    line-height:1.7;
  }

  .healthcare-cta-action{
    width:100%;
  }

  .healthcare-cta-button{
    width:100%;
    padding:14px 18px;
    font-size:.76rem;
  }

  .healthcare-cta-action small{
    font-size:.64rem;
  }
}


/* SMALL MOBILE */
@media(max-width:575.98px){

  .healthcare-cta-box{
    padding:29px 20px 25px;
  }

  .healthcare-cta-label{
    font-size:.64rem;
  }

  .healthcare-cta-content h3{
    font-size:1.7rem;
  }

  .healthcare-cta-content p{
    font-size:.84rem;
  }
}