html {
  scroll-behavior: smooth;
}
.hero2-form textarea {
    border: 2px solid #21514B;
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 14px;
    color: #21514B;
    outline: none;
    resize: none;
}

/* Focus state — exactly like inputs */
.hero2-form textarea:focus {
    border-color: #21514B;
    box-shadow: none;
}



/* ============================
   HERO SECTION — FULL STYLES
   Option A card positions — all animations kept
   Cleaned conflicts but no visual changes
   ============================ */

/* BASIC LAYOUT */
.hero2{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:30px 5%;
  gap:50px;
}
.hero2-left{flex:1}
.hero2-right{flex:1; display:flex; justify-content:center}

.tag{font-size:14px;color:#57BA91;font-weight:700}

/* HEADLINE & TEXT */
.hero2-left h1{
  font-size:35px;
  font-weight:800;
  color:#21514B;
  margin:15px 0;
}
.hero2-left p{
  font-size:17px;
  max-width:520px;
  color:#333;
  margin-bottom:25px;
}

/* BADGES */
.hero2-badges{
  display:grid;
  grid-template-columns:repeat(2,auto);
  gap:12px 18px;
  margin-bottom:25px;
  justify-content:start;
}
.hero2-badges span{
  background:#F5FFFC;
  padding:10px 16px;
  border-radius:40px;
  font-size:14px;
  font-weight:600;
  color:#21514B;
  border:2px solid #21514B;
}

/* PRICING BOX + ANIMATIONS (kept identical) */
.pricing-box{
  background:#21514B;
  padding:14px 26px;
  border-radius:14px;

  display:inline-flex;      /* ⭐ fix */
  flex-direction:column;
  gap:6px;                 /* ⭐ space between lines */

  width:fit-content;
  margin-bottom:30px;

  color:#fff;
  position:relative;
  z-index:1;
}

.pricing-box p{
  margin:0;
  font-size:14px;
  opacity:.9;
  letter-spacing:.4px;
}

.pricing-box b{
  font-size:23px;        /* ⭐ bigger = clearer */
  font-weight:700;

  margin-top:8px;        /* ⭐ real vertical gap */
  line-height:1.5;       /* ⭐ THIS fixes crowding */
  letter-spacing:1px;    /* ⭐ clean readable */
}

.pricing-box a{
  display:inline-block;
  padding:4px 0;
}


/* Pricing box animated outlines */
.pricing-box::after, .pricing-box::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
}
.pricing-box::after{
  outline:3px solid rgba(110,207,167,0.6);
  box-shadow:0 0 0 0 rgba(110,207,167,0.8);
  animation:attachedOutwardWave 2.4s ease-out infinite;
  z-index:-1;
}
.pricing-box::before{
  outline:2px solid rgba(110,207,167,0.35);
  box-shadow:0 0 0 0 rgba(110,207,167,0.45);
  animation:attachedOutwardEcho 2.4s ease-out .28s infinite;
  z-index:-2;
}

@keyframes attachedOutwardWave{
  0%{box-shadow:0 0 0 0 rgba(110,207,167,0.8);opacity:1}
  40%{box-shadow:0 0 0 18px rgba(110,207,167,0.35);opacity:0.5}
  100%{box-shadow:0 0 0 40px rgba(110,207,167,0);opacity:0}
}
@keyframes attachedOutwardEcho{
  0%{box-shadow:0 0 0 0 rgba(110,207,167,0.4);opacity:0.4}
  40%{box-shadow:0 0 0 14px rgba(110,207,167,0.2);opacity:0.25}
  100%{box-shadow:0 0 0 34px rgba(110,207,167,0);opacity:0}
}

/* FORM */
.hero2-form{display:flex;flex-wrap:wrap;gap:12px}
.hero2-form input{
  flex:1;
  min-width:180px;
  padding:14px;
  border-radius:9px;
  font-size:15px;
  border:2px solid #21514B;
}
.hero2-form button{
  width:100%;
  padding:16px;
  background:#21514B;
  color:#fff;
  font-weight:700;
  border:none;
  border-radius:9px;
  cursor:pointer;
}

/* U-FRAME / DOCTOR */
.u-frame{
  width:560px;
  height:700px;
  position:relative;

  /* FULL U-SHAPE */
  border-radius:0 0 280px 280px;  /* ← You can increase/decrease this number */

  overflow:hidden;
  background:#fff;
  box-shadow:0 12px 45px rgba(0,0,0,0.12);
}

.u-bg{
  position:absolute;
  inset:0;

  /* Green gradient stays same */
  background:linear-gradient(135deg,#aee4cc,#68b99c,#3a8f74);
  z-index:1;

  /* Apply SAME U-shape to background also */
  border-radius:0 0 280px 280px;
}


.u-bg::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(#ffffff30 1px, transparent 1px),
    linear-gradient(90deg,#ffffff30 1px, transparent 1px);
  background-size:50px 50px;
}
.u-doctor {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;

    /* FIX TOP ISSUE */
    object-position:center -40px;

    z-index:2;

    border-radius:0 0 280px 280px;

    mask-image:none;
    -webkit-mask-image:none;
}

/* float-card base (same size) */
.float-card{
  width:300px !important;
  height:100px !important;
  display:flex;
  align-items:center;
  gap:12px;
  padding:15px 18px;
  border-radius:14px;
  background:#fff;
  box-shadow:0 8px 20px rgba(0,0,0,0.12);
  position:absolute;
  z-index:999;
  transition:all .25s ease;
}
.float-card {
    border: 1px solid #22c55e;   /* soft outline */
}
.leading-tight {
  display:flex;
  flex-direction:column;
  justify-content:center;   /* vertically centered text */
}


/* round icon */
.icon-round{
  width:45px;
  height:45px;
  border-radius:999px;
  background:rgba(87,186,145,0.12);
  display:flex;
  flex-shrink:0;
  align-items:center;
  justify-content:center;
}
.icon{ width:20px; height:20px; color:#21514B; }

/* text helpers */
.font-bold{ font-weight:700; }
.title { font-size:15px; color:#21514B; font-weight:700; margin-bottom:2px; }
.leading-tight p{ margin:0; }
.leading-tight p + p{ margin-top:6px; }



/* =========================
   OPTION A — DESKTOP POSITIONS
   (locked per your confirmation)
   ========================= */
@media (min-width: 993px) {
  .card-1 { top:0%; left:-160px; }
  .card-2 { top:73%; left:-160px; }  /* LOWER → No overlap */
  .card-3 { top:36.6%; right:-150px; } /* lower-right away from face */
  
  .float-card {
    z-index: 10 !important;
  }
  .u-frame {
    z-index: 1 !important;
  }
}

  .float-card:hover{
    transform:translateY(-8px);
    box-shadow:0 12px 28px rgba(0,0,0,0.2);
    z-index:9999;
  }

  /* allow cards to be visible outside u-frame */
  .u-frame{ overflow:visible; }



/* ---------------------------
   LARGE LAPTOPS / DESKTOP ADJUSTS
---------------------------- */
@media (max-width:1500px) and (min-width:1367px){
  .u-frame{ transform:scale(0.98); transform-origin:center top; height:680px; }
  .float-card{ width:300px; padding:16px; }
  .card-1{ top:0%; left:-140px; }
  .card-2{ top:34%; left:-140px; }
  .card-3{ top:17%; right:-115px; }
}

/* Equal badge width for 1366×768 Laptop */
@media (max-width:1366px) and (min-width:1151px) {
    .hero2-badges span {
        width: 240px !important;     /* MATCH FIRST ROW WIDTH */
        text-align: center !important;
        display: inline-block;
        justify-self: center;
    }
}

/* Standard laptop 1366 → 1151 */
/* Correct block for 1366 × 768 laptops */
@media (max-width:1366px) and (min-width:1151px){
  
  .u-frame{ 
    transform:scale(0.92); 
    transform-origin:center top; 
    height:640px; 
  }

  .float-card{ 
    width:300px; 
    padding:16px; 
  }

  .card-1{ 
    top:0% !important; 
    left:-140px !important; 
  }

  .card-2{ 
    top:35% !important;     /* moved UP — no merge */
    left:-140px !important; 
  }

  .card-3{ 
    top:17% !important;     /* moved DOWN — balanced */
    right:-115px !important; 
  }
}


/* Small laptop / large tablet (1150 → 993) */
@media (max-width:1150px) and (min-width:993px){
  .u-frame{ transform:scale(0.85); height:600px; }
  .float-card{ width:280px; padding:14px; }
  .card-1{ top:12%; left:-110px; }
  .card-2{ top:52%; left:-110px; }
  .card-3{ top:30%; right:-90px; }
}

/* Tablet / small screens: stack layout (OPTION A => stack on <= 992) */
@media (max-width:992px) {
  .hero2{
    flex-direction:column;
    text-align:center;
    gap:30px;
    padding:28px 4%;
  }

  .hero2-badges{ justify-content:center; grid-template-columns:repeat(2,auto); }

  .u-frame{
    width:100% !important;
    max-width:360px;
    height:auto !important;
    margin:auto;
    border-radius:0 0 160px 160px;
    overflow:visible !important;
    padding-top:18px;
    
  }

  /* stack float-cards cleanly under the image */
  .float-card{
    position:relative !important;
    left:0 !important;
    right:0 !important;
    top:0 !important;
    width:94% !important;
    margin:12px auto !important;
    transform:none !important;
  }
}
@media (max-width: 1024px) {
    .ms-form-wrapper, 
    .ms-billing-right, 
    .ms-billing-card {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        width: 100% !important;
    }

    .ms-price-box {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* Mobile tweaks (<= 768 and smaller) */
@media (max-width:768px) {
  .hero2{ padding:20px 4%; gap:24px; }
  .hero2-left h1{ font-size:28px; }
  .hero2-left p{ text-align:center; margin-left:auto; margin-right:auto; }
  .hero2-badges{ grid-template-columns:1fr; justify-items:center; }
  .hero2-form{ flex-direction:column; width:100%; }
  .hero2-form input{ width:100%; }
  .u-frame{ max-width:340px; border-radius:0 0 150px 150px; padding-bottom:16px; }
  .u-doctor{ position:relative; width:100%; z-index:1; }

  /* mobile card sizing */
  .float-card{ width:92% !important; padding:12px; }
  .pricing-box {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Very small phones */
@media (max-width:520px) {
  .u-frame{ max-width:300px; border-radius:0 0 140px 140px; }
  .float-card{ width:92% !important; padding:10px; }
  .hero2-left h1{ font-size:24px; }
}

/* ensure no horizontal overflow anywhere */
.hero2, .u-frame, .hero2-left, .hero2-right {
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  box-sizing:border-box;
}

/* small utility */
.text-gray-500{ color:#6b7280; font-size:13px; }

/* FIX FOR 1024 × 768 (No layout change — only scale & spacing fix) */
@media (max-width: 1024px) and (min-width: 769px) {

    

    .hero2 {
        padding: 20px 3%;
        gap: 20px;
    }

    /* SCALE DOWN RIGHT SIDE IMAGE FRAME */
    .u-frame {
        transform: scale(0.78);
        transform-origin: top right;
        margin-right: -40px;   /* fixes push-left issue */
    }

    /* FLOAT CARD FIX (keep same positions visually) */
    .float-card {
        transform: scale(0.88);
        transform-origin: center;
    }

    .card-1 { top: -1px; left: -120px; }
    .card-2 { top: 55%; left: -120px; }
    .card-3 { top: 40%; right: 23px; }

    /* Left column text spacing fix */
    .hero2-left h1 {
        font-size: 30px;
        line-height: 1.2;
        max-width: 460px;
    }

    .hero2-left p {
        font-size: 16px;
        max-width: 480px;
        line-height: 1.55;
    }

    .hero2-badges span {
        font-size: 13px;
        padding: 8px 14px;
    }

    .hero2-form input {
        padding: 12px;
        font-size: 14px;
    }

    .hero2-form button {
        padding: 14px;
        font-size: 15px;
    }
}
/* ===============================
   FIX ONLY FOR 1440 x 900
   Right image + floating cards
   NO impact on other devices
================================ */
@media (width: 1440px) and (height: 900px) {

  /* Slightly lift the whole frame */
  .u-frame {
    transform: translateY(-12px);
  }

  /* Fine-tune floating cards */
  .card-1 {
    top: -4px;
    left: -150px;
  }

  .card-2 {
    top: 60%;
    left: -150px;
  }

  .card-3 {
    top: 35%;
    right: -40px;
  }

}
/* =====================================================
   HARD LOCK FIX — ONLY 1280 × 720
   RIGHT SIDE ONLY
===================================================== */
/* =========================================
   FIX FOR ~1280px LAPTOPS (SAFE RANGE)
   DOES NOT AFFECT 1366+
========================================= */
@media (min-width: 1230px) and (max-width: 1310px) {

  /* Right side container */
  .hero2-right {
    display: flex;
    justify-content: center;
    align-items: flex-start;
  }

  /* U-frame */
  .u-frame {
    width: 500px;
    height: 620px;
    transform: scale(0.90);
    transform-origin: top center;
  }

  /* Doctor image */
  .u-doctor {
    object-position: center -20px;
  }

  /* Floating cards */
  .float-card {
    transform: scale(0.88);
  }

  .card-1 {
    top: -4px;
    left: -130px;
  }

  .card-2 {
    top: 55%;
    left: -130px;
  }

  .card-3 {
    top: 38%;
    right: -95px;
  }
}
/* Lift right hero on desktop */
@media (min-width: 993px) {
  .hero2-right {
    margin-top: -150px;
  }
}

/* TERMS + RECAPTCHA MOBILE FIX */
.terms-wrap{
    display:flex;
    align-items:flex-start;
    width:100%;
    gap:10px;
}

@media (max-width:768px){
  .terms-wrap{
    flex-direction:column;   /* stack instead of squeeze */
    align-items:flex-start;
  }

  .terms-wrap > div{
    width:100%;
  }

  .terms-wrap label{
    display:block;
    width:100%;
    white-space:normal;      /* force normal wrapping */
    line-height:1.5;
  }

  /* reCAPTCHA sits below text */
  .terms-wrap .g-recaptcha{
    margin-top:10px;
    transform:scale(0.85);
    transform-origin:left top;
  }
}

/* MAIN SUCCESS ROW */
.success-item img {
    border-radius: 50%;
    background: #ffffff;        /* optional */
    padding: 0px;              /* optional */
}
.success-top {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 35px;
    flex-wrap: wrap;
}

/* LAPTOP FIX (1024px–900px) */
@media (max-width: 1024px) {
    .success-top {
        gap: 28px;
    }
    .success-item img {
        width: 50px;
    }
}

/* TABLET FIX (900px–600px) */
@media (max-width: 900px) {
    .success-top {
        justify-content: center;
        gap: 22px;
    }
    .success-item {
        flex: 0 0 calc(50% - 20px);  /* 2 cards per row */
        display: flex;
        align-items: center;
        gap: 12px;
    }
}

/* MOBILE FIX (<600px) */
@media (max-width: 600px) {
    .success-top {
        flex-direction: column;
        gap: 15px;
    }
    .success-item {
        width: 100%;
        justify-content: flex-start;
    }
    .success-item img {
        width: 45px;
    }
}

/* VERY SMALL MOBILE FIX (<400px) */
@media (max-width: 400px) {
    .success-item img {
        width: 40px;
    }
}

.icon svg path,
.icon svg circle,
.icon svg line {
    stroke: #0F8C5F !important;
    fill: #0F8C5F !important;
}

/* TOP GRADIENT SECTION */
.success-banner {
    background: linear-gradient(to right, #21514B, #57BA91);
    padding: 40px 0;
    color: white;
    position: relative;
    overflow: hidden;
}

/* Wave background (optional image if you want same effect) */
.success-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url('YOUR-WAVE-SHAPE.png') no-repeat center/cover;
    opacity: 0.25;
}

.success-top {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 90px; /* equal spacing */
    flex-wrap: wrap;
    text-align: center;
}

.success-item {
    display: flex;
    flex-direction: column;
    align-items: center;   /* ← full center horizontally */
    justify-content: center;
    text-align: center;    /* ← full center text */
}

.success-item img {
    width: 65px;
    height: 65px;
    object-fit: contain;   /* corrects icon distortion */
    margin-bottom: 10px;
}

/* SUCCESS NUMBERS BOXES */
.success-numbers {
    padding: 50px 0;
    text-align: center;
    color: #21514B;
}

.success-numbers h2 {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 35px;
}

.numbers-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px 30px;
    max-width: 1100px;
    margin: auto;
}

.num-box h3 {
    font-size: 28px;
    color: #21514B ;
    margin-bottom: 5px;
    font-weight: 700;
}

.num-box p {
    color: #21514B ;
    font-size: 15px;
}

/* VERTICAL SEPARATORS (Optional) */
.num-box {
    position: relative;
}

.num-box:not(:last-child)::after {
    content: "";
    position: absolute;
    right: -15px;
    top: 10%;
    height: 80%;
    width: 2px;
    background: #b4e0b4;
}
.numbers-grid .num-box:nth-child(4n)::after {
    display: none !important;
}

/* MOBILE RESPONSIVE */
@media (max-width: 768px) {
    .success-top {
        gap: 30px;
    }

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

@media (max-width: 480px) {
    .numbers-grid {
        grid-template-columns: 1fr;
    }
}


.services-section {
    width: 100%;
    padding: 60px 0;
    background: #ffffff;
}

.services-container {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.services-title {
    font-size: 34px;
    font-weight: 800;
    margin-bottom: 15px;
    color: #21514B;
}

.services-title span {
    color: #21514B;
}

.services-subtitle {
    max-width: 900px;
    margin: 10px auto;
    font-size: 16px;
    line-height: 1.7;
}

/* GRID */
.services-grid {
    margin-top: 40px;
    display: grid;
    gap: 28px;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* CARD */
.service-card {
    padding: 26px 22px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid #eee;
    box-shadow: 0px 2px 10px rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 280px;
    transition: 0.3s;
}

/* ICON */
.service-icon {
    font-size: 42px;
    color: #21514B;
    margin-bottom: 12px;
}

/* TEXT */
.service-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
}

.service-text {
    font-size: 15px;
    color: #444;
    flex-grow: 1;
    margin-bottom: 20px;
}

/* BUTTON */
.service-btn {
    padding: 10px 22px;
    border-radius: 30px;
    border: 2px solid #21514B;
    color: #21514B;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    align-self: center;
    transition: 0.3s;
}

.service-btn:hover {
    background: #21514B;
    color: #fff;
}

/* HOVER */
.service-card:hover {
    background: linear-gradient(to bottom, #57BA91 , #21514B);
    color: #fff;
}

.service-card:hover .service-icon,
.service-card:hover .service-text,
.service-card:hover .service-title {
    color: #fff !important;
}

.service-card:hover .service-btn {
    border-color: #fff;
    color: #fff;
}

/* MOBILE */
@media (max-width: 600px) {
    .services-title { font-size: 26px; }
    .services-grid { gap: 20px; }
    .service-card { padding: 20px; min-height: auto; }

    /* FIX TEXT MERGING WITH BORDER ON MOBILE */
    .services-container {
        padding: 0 18px;
    }
}

/* --------------------------- */
/* SECTION BACKGROUND */
/* --------------------------- */
.claims-section {
    width: 100%;
    background: linear-gradient(to right, #21514B, #57BA91);
    padding: 80px 0; /* increased like blue layout */
    color: #fff;
}

/* MAIN WRAPPER */
.claims-wrapper {
    max-width: 1250px; /* wider like blue layout */
    margin: auto;
    padding: 0 40px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px; /* spacing like blue layout */
    align-items: start;
}

/* --------------------------- */
/* HEADINGS — MATCH BLUE DESIGN */
/* --------------------------- */
.claims-heading-1 {
    font-size: 34px;
    font-weight: 700;
    margin: 0 0 14px 0;
}

.claims-heading-2 {
    font-size: 20px;
    font-weight: 500;
    line-height: 1.5;
    opacity: 0.9;
    max-width: 470px; /* same width constraint as blue layout */
    margin-bottom: 30px;
}

/* --------------------------- */
/* IMAGE + WAVE */
/* --------------------------- */
.claims-image-wrapper {
    position: relative;
    display: inline-block;
    z-index: 2;

    width: 500px; /* your design width */
    max-width: 100%;
    background: rgba(255, 255, 255, 0.92);
    padding: 0px;
    border-radius: 14px;

    box-shadow:
        0 8px 22px rgba(33,81,75,0.25),
        0 3px 10px rgba(87,186,145,0.22);
}
.claims-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* image poora box fill karegi */
    display: block;
    border-radius: 10px; /* inner radius */
}





.claims-image-wrapper:hover {
    transform: translateY(-4px);
    box-shadow:
        0 12px 30px rgba(33,81,75,0.32),
        0 6px 14px rgba(87,186,145,0.25);
    transition: 0.3s ease;
}


/* --------------------------- */
/* LEFT TEXT PARAGRAPH */
/* --------------------------- */
.claims-text {
    font-size: 15px;
    line-height: 1.75;
    opacity: 0.95;
    max-width: 520px; /* matched blue layout width */
    margin-bottom: 22px;
}

/* --------------------------- */
/* RIGHT SIDE FEATURES */
/* --------------------------- */
.feature-title {
    font-size: 17px;
    font-weight: 700;
    opacity: 0.85;
    margin-bottom: 4px;
}

.feature-text {
    font-size: 15px;
    opacity: 0.95;
    margin-bottom: 20px;
}

/* BUTTON */
.claims-btn {
    background: #fff;
    color: #000;
    padding: 14px 26px;
    display: inline-block;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
    margin: 20px 0;
    transition: 0.2s;
}

.claims-btn:hover {
    background: #f2f2f2;
}

/* DEMO LINK */
.demo-link {
    color: #fff;
    text-decoration: underline;
    font-size: 14px;
    font-weight: 600;
}
.demo-link:hover {
    opacity: 0.8;
}

/* --------------------------- */
/* RESPONSIVE FIXED */
/* --------------------------- */
/* --------------------------- */
/* RESPONSIVE FIXED (MOBILE) */
/* --------------------------- */
@media(max-width: 900px) {

    .claims-wrapper {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
        padding: 0 20px;
    }

    /* Make image wrapper full-width on mobile */
    .claims-image-wrapper {
        width: 100% !important;
        max-width: 100%;
        margin: 0 auto;
        height: 300px; /* perfect mobile image height */
    }

    .claims-image-wrapper img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Center headings & text */
    .claims-heading-1,
    .claims-heading-2,
    .claims-text {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    /* Left paragraph text alignment restored for readability */
    .feature-title,
    .feature-text {
        text-align: left;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    /* Center button */
    .claims-btn {
        margin-left: auto;
        margin-right: auto;
    }
}

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Poppins', sans-serif;
        }

        .billing-section {
            background-color: #F4FBF9;
            width: 100%;
            min-height: 100vh;
            position: relative;
            padding-bottom: 80px;
            overflow: hidden;
        }

        /* Top Curved White Shape */
        .curved-shape {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 280px;
            background: white;
            border-radius: 0 0 50% 50% / 0 0 100% 100%;
            box-shadow: 0 8px 40px rgba(33, 81, 75, 0.08);
            z-index: -1;
        }

        .content-wrapper {
            position: relative;
            z-index: 2;
            padding-top: 30px;
        }
.billing-section {
    position: relative;
    overflow: visible;
    background: white;
    clip-path: ellipse(120% 100% at 50% 0%);
}
.section-header {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    height: auto !important;
    z-index: 99999 !important;
    position: relative !important;
}


.section-header h2,
.section-header p {
    color: #21514B !important;
}

.curved-shape {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 0;   /* send it back */
}

.content-wrapper {
    position: relative;
    z-index: 2;   /* bring content forward */
}


        /* Hexagon Cluster Container */
        .hexagon-cluster {
            position: relative;
            width: 900px;
            height: 900px;
            margin: 0 auto;
        }

        /* Center Hexagon - Triple Ring Design */
        .center-hex-container {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 10;
        }

        .center-hex-outer {
            width: 220px;
            height: 254px;
            position: relative;
            filter: drop-shadow(0 12px 30px rgba(33, 81, 75, 0.25));
        }

        .center-hex-outer svg {
            width: 100%;
            height: 100%;
        }

        .center-hex-content {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            z-index: 5;
        }

        .center-hex-content .number {
            font-size: 56px;
            font-weight: 700;
            color: #21514B;
            line-height: 1;
            display: block;
        }

        .center-hex-content .text {
            font-size: 14px;
            font-weight: 600;
            color: #21514B;
            line-height: 1.4;
        }

        /* Outer Hexagons */
        .outer-hex {
            position: absolute;
            width: 195px;
            height: 225px;
            transition: transform 0.3s ease;
        }

        .outer-hex:hover {
            transform: scale(1.05);
        }

        /* Number Style for Each Hexagon */
        .hex-num {
    position: absolute;
    font-size: 32px;
    font-weight: 800;
    color: #21514B;
    z-index: 50;
    pointer-events: none;
}

/* 1 — TOP HEXAGON (Right side slightly down) */
.hex-1 .hex-num {
    top: -20%;
    left: 46%;
}

/* 2 — TOP RIGHT HEX (Right side middle) */
.hex-2 .hex-num {
    top: 38%;
    left: 105%;
}

/* 3 — BOTTOM RIGHT HEX (Right side slightly lower) */
.hex-3 .hex-num {
    top: 38%;
    left: 105%;
}

/* 4 — BOTTOM HEX (Bottom center) */
.hex-4 .hex-num {
    top: 98%;
    left: 49%;
    transform: translateX(-50%);
}

/* 5 — BOTTOM LEFT HEX (Left side lower) */
.hex-5 .hex-num {
    top: 38%;
    left: -16%;
}

/* 6 — TOP LEFT HEX (Left side middle) */
.hex-6 .hex-num {
    top: 38%;
    left: -16%;
}


        .hex-wrapper {
            position: relative;
            width: 100%;
            height: 100%;
            filter: drop-shadow(0 8px 25px rgba(33, 81, 75, 0.2));
        }

        .hex-shape {
            width: 100%;
            height: 100%;
            background: #57BA91;
            clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
            position: relative;
        }

        .hex-shape::before {
            content: '';
            position: absolute;
            top: 4px;
            left: 4px;
            right: 4px;
            bottom: 4px;
            background: #57BA91;
            clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
        }

        .hex-border {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #21514B;
            clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
            z-index: -1;
        }

        .hex-inner {
            position: absolute;
            top: 5px;
            left: 5px;
            width: calc(100% - 10px);
            height: calc(100% - 10px);
            background: #82dbb6ff;
            clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
        }

        .hex-content {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 20px 12px;
            text-align: center;
            z-index: 5;
        }
        .hex-content p {
            margin-top: 18px;
            line-height: 1.35;              /* tighter line spacing */
            font-size: 12px;
        }

        .icon-circle {
            width: 48px;
            height: 48px;
            background: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 8px;
            box-shadow: 0 4px 12px rgba(33, 81, 75, 0.15);
        }

        .icon-circle svg {
            width: 24px;
            height: 24px;
            color: #21514B;
        }

        .hex-title {
            font-size: 13px;
            font-weight: 700;
            color: #21514B;
            margin-bottom: 4px;
            line-height: 1.3;
        }

        .hex-subtitle {
            font-size: 12px;
            color: #1a3d38;
            line-height: 1.3;
            opacity: 0.85;
        }

        /* Hexagon Positions - Circular Orbit */
        .hex-1 { /* Top */
            top: 85px;
            left: 50%;
            transform: translateX(-50%);
        }

        .hex-2 { /* Top Right */
            top: 195px;
            right: 115px;
        }

        .hex-3 { /* Bottom Right */
            bottom: 195px;
            right: 115px;
        }

        .hex-4 { /* Bottom */
            bottom: 85px;
            left: 50%;
            transform: translateX(-50%);
        }

        .hex-5 { /* Bottom Left */
            bottom: 195px;
            left: 115px;
        }

        .hex-6 { /* Top Left */
            top: 195px;
            left: 115px;
        }

        /* CTA Section */
        .cta-section {
            text-align: center;
            margin-top: 40px;
        }

        .cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: fit-content;     /* ⭐ prevents full width */
    max-width: 100%;

    gap: 10px;
    background: #21514B;
    color: #fff;
    font-size: 17px;
    font-weight: 600;

    padding: 16px 32px;     /* slightly smaller = elegant */
    border-radius: 40px;

    text-decoration: none;
    box-shadow: 0 8px 25px rgba(87,186,145,.35);
    transition: .3s ease;
}


        .cta-button:hover {
            background: rgba(253, 253, 253, 1);
            color: #21514B;
            transform: translateY(-2px);
            box-shadow: 0 12px 30px rgba(87, 186, 145, 0.4);
            border: 2px solid #21514B;
        }

        .cta-button svg {
            width: 20px;
            height: 20px;
        }

        .cta-microtext {
            margin-top: 20px;
            font-size: 20px;
            color: #6b7771;
            letter-spacing: 0.3px;
        }

        /* Responsive Design */
        @media (max-width: 1024px) {
            .hexagon-cluster {
                width: 700px;
                height: 700px;
            }

            .center-hex-outer {
                width: 180px;
                height: 208px;
            }

            .center-hex-content .number {
                font-size: 44px;
            }

            .center-hex-content .text {
                font-size: 12px;
            }

            .outer-hex {
                width: 160px;
                height: 185px;
            }

            .hex-1 { top: 60px; }
            .hex-2 { top: 150px; right: 80px; }
            .hex-3 { bottom: 150px; right: 80px; }
            .hex-4 { bottom: 60px; }
            .hex-5 { bottom: 150px; left: 80px; }
            .hex-6 { top: 150px; left: 80px; }

            .hex-title { font-size: 11px; }
            .hex-subtitle { font-size: 9px; }
            .icon-circle { width: 40px; height: 40px; }
            .icon-circle svg { width: 20px; height: 20px; }
        }

        @media (max-width: 768px) {
            .section-header h2 {
                font-size: 22px;
                padding: 0 10px;
            }

            .section-header p {
                font-size: 11px;
                padding: 0 25px;
            }

            .hexagon-cluster {
                width: 100%;
                height: auto;
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 20px;
                padding: 20px;
            }

            .center-hex-container {
                position: relative;
                top: auto;
                left: auto;
                transform: none;
                margin-bottom: 30px;
            }

            .outer-hex {
                position: relative;
                top: auto !important;
                left: auto !important;
                right: auto !important;
                bottom: auto !important;
                transform: none !important;
            }
            @media (max-width: 768px) {
    .outer-hex {
        height: 195px !important; /* increase from 225 → fixes text cutting */
    }
}


            .curved-shape {
                height: 140px;
            }

            .content-wrapper {
                padding-top: 55px;
            }
        }
        /* Fix hover for hex-1 and hex-4 — remove jump */
            .hex-1:hover,
            .hex-4:hover {
                transform: translateX(-50%) scale(1.05) !important;
        }

        /* All other hexagons keep normal hover */
            .hex-2:hover,
            .hex-3:hover,
            .hex-5:hover,
            .hex-6:hover {
                transform: scale(1.05) !important;
        }

        /* MOBILE VIEW NUMBER FIX — ONLY FOR PHONES */
/* Mobile: fix number 4 to sit left-middle like the others */
@media (max-width: 768px) {

  /* Default mobile number position (left side middle) */
  .hex-num {
    left: -18% !important;
    top: 38% !important;
    transform: none !important;
  }

  /* Number 1 — FIX (was too high, now aligned with others) */
  .hex-1 .hex-num {
    top: 38% !important;
    left: -18% !important;
  }

  /* Number 4 — FIX (was too low earlier) */
  .hex-4 .hex-num {
    top: 38% !important;
    left: -18% !important;
  }
}



/* ICONS */
.capsule-cell img {
    width: 50px;
    height: 50px;
    object-fit: contain;
    margin-bottom: 8px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.icon-circle {
    width: 60px;
    height: 60px;
    background: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
    overflow: hidden;
}

.icon-circle img {
    width: 80%;
    height: 80%;
    object-fit: contain;
    display: block;
}

/* OUTER WRAPPER */
.capsule-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 40px 0;
}

/* OUTER BORDER */
.capsule-border {
    width: 100%;
    max-width: 1400px;
    border: 2px solid #ffffff;
    border-radius: 240px;
    overflow: hidden;
}

/* GRID */
.capsule-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    position: relative;
}

/* DIVIDER LINES */
.capsule-grid::before,
.capsule-grid::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: #ffffff;
}

.capsule-grid::before { top: calc(33.33% - 1px); }
.capsule-grid::after { top: calc(66.66% - 1px); }

/* REMOVE TOP BORDER FOR MIDDLE CELLS */
.capsule-cell:nth-child(1n + 5):nth-child(-n + 8) {
    border-top: none !important;
}

/* REMOVE BOTTOM LINE FOR LAST ROW */
.capsule-cell:nth-child(n+9) {
    border-bottom: none !important;
}

/* CELL STYLE */
.capsule-cell {
    padding: 32px 20px;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    background: transparent;
    box-sizing: border-box;
    z-index: 1;
}

/* LEFT COLUMN SAFE CENTERING */
.capsule-cell:nth-child(1),
.capsule-cell:nth-child(5),
.capsule-cell:nth-child(9) {
    padding-left: 25px !important;
}

.capsule-cell:nth-child(4),
.capsule-cell:nth-child(8),
.capsule-cell:nth-child(12) {
    padding-right: 25px !important;
}

/* REMOVE DOUBLE BORDER ON MIDDLE ROW */
.capsule-cell:nth-child(5),
.capsule-cell:nth-child(6),
.capsule-cell:nth-child(7),
.capsule-cell:nth-child(8) {
    border-bottom: none !important;
}

/* ROUNDED CORNERS */
.capsule-cell:nth-child(1) { border-top-left-radius: 250px; }
.capsule-cell:nth-child(4) { border-top-right-radius: 250px; }
.capsule-cell:nth-child(9) { border-bottom-left-radius: 250px; }
.capsule-cell:nth-child(12) { border-bottom-right-radius: 250px; }

/* PERFECT HOVER */
.capsule-cell:hover {
    background: #22c55e;
    outline: 2px solid #22c55e;
    outline-offset: -2px;
    position: relative;
    overflow: hidden;
    z-index: 3;
}

/* ========== RESPONSIVE FIXES ========== */
@media(max-width: 992px) {
    .capsule-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    

    /* Remove horizontal dividers—they break shape on tablet */
    .capsule-grid::before,
    .capsule-grid::after {
        display: none !important;
    }

    /* Remove all border radiuses except outer wrapper */
    .capsule-cell {
        border-radius: 0 !important;
    }
}

@media(max-width: 600px) {

    /* FORCE all items to have a bottom border */
    .capsule-cell {
        border-bottom: 2px solid #fff !important;
        border-right: none !important;
    }

    /* last cell no border — FIX for double line */
    .capsule-cell:last-child {
        border-bottom: none !important;
    }

    /* OVERRIDE every nth-child rule that removed bottom border 
       BUT DO NOT override last item */
    .capsule-cell:nth-child(5),
    .capsule-cell:nth-child(6),
    .capsule-cell:nth-child(7),
    .capsule-cell:nth-child(8),
    .capsule-cell:nth-child(n+9):not(:last-child) {
        border-bottom: 2px solid #fff !important;
    }

    .capsule-grid {
        grid-template-columns: 1fr !important;
    }

    .capsule-grid::before,
    .capsule-grid::after {
        display: none !important;
    }

    .capsule-border {
        border-radius: 80px !important;
    }
}

/* SECTION STYLING */
.transcure-specialties {
  padding: 72px 0;
  text-align: center;
  background: linear-gradient(to right, #21514B , #57BA91);
  font-family: "Inter", Arial, sans-serif;
}

.transcure-specialties h2 {
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 10px;
  color: #fff;
}

.transcure-specialties p.intro {
  color: #fff;
  max-width: 960px;
  margin: 12px auto 48px;
  font-size: 15px;
  line-height: 24px;
}

.transcure-view-more {
  display: inline-block;
  margin-top: 48px;
  background: #21514B;
  color: #fff;
  padding: 12px 36px;
  border-radius: 30px;
  font-weight: 600;
  text-decoration: none;
  transition: 0.25s ease;
}

.transcure-view-more:hover {
    background: #ffffff;
    color: #21514B;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(95,36,102,0.25);
    border: 2px solid #21514B;
}

.form-result {
    margin-top: 12px;
    font-size: 14px;
    font-weight: 500;
}

/* Success = white text */
.form-result.success {
    color: #ffffff;
}

/* Error = red text */
.form-result.error {
    color: #ffdddd;
}

/* Background Area */
.provider-form-section {
    width: 100%;
    padding: 80px 0;
    background: #ffffffff url('https://medsolercm.com/imgs/design 1_11zon.webp');
    background-size: cover;
    background-position: center;
    opacity: 1;

    background-size: cover;
}

/* Outer wrapper */
.provider-container {
    position: relative;
    display: flex;
    justify-content: center;
}

/* Main box */
.provider-box {
    width: 650px;
    background: linear-gradient(to right,  #21514B , #57BA91);
    padding: 40px 50px;
    border-radius: 20px;
    margin-top: 40px; /* box will move down */
    color: white;
    position: relative;
    z-index: 2;
}

/* Title */
.provider-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 30px;
}

/* Checkbox list */
.provider-options label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    margin-bottom: 15px;
}

.provider-options input[type="checkbox"] {
    width: 17px;
    height: 17px;
}

/* Error message */
.provider-error {
    color: #ff4e4e;
    font-size: 14px;
    margin: 10px 0 20px 5px;
    display: none; /* hide by default */
}


/* Inputs Row */
.provider-inputs {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
    color: #000000 !important;
}

.provider-inputs input {
    width: 100%;
    padding: 12px 15px;
    border-radius: 4px;
    border: 1px solid #000000ff;
    font-size: 15px;
}

/* Button */
.provider-btn {
    width: 100%;
    padding: 14px 0;
    background: linear-gradient(to right,  #ffffffff , #fdfdfdff);
    color: green;
    border-radius: 4px;
    border: 3px solid var(--green);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 1px;
    cursor: pointer;
}

/* Decorative circles */
.circle {
    position: absolute;
    border-radius: 50%;
    filter: blur(1px);
}

.circle-left {
    width: 120px;
    height: 120px;
    background: rgba(170, 240, 191, 0.81);
    position: absolute;
    top: -40px;      /* EXACT touch */
    left: 570px;     /* EXACT touch */
    border-radius: 50%;
    z-index: 1;
}

.circle-right {
    width: 160px;
    height: 160px;
    background: rgba(170, 240, 191, 0.81);
    position: absolute;
    bottom: -60px;   /* EXACT touch */
    right: 530px;    /* EXACT touch */
    border-radius: 50%;
    z-index: 1;
}
@media (max-width: 768px) {

    .provider-box {
        width: 90%;
        padding: 25px 20px;
        margin-top: 20px;
    }

    .provider-title {
        font-size: 20px;
        line-height: 28px;
    }

    .provider-options label {
        font-size: 14px;
        margin-bottom: 10px;
    }

    .provider-inputs {
        flex-direction: column;
        gap: 10px;
    }

    .provider-btn {
        font-size: 14px;
        padding: 12px 0;
    }

    /* Circles fix for mobile */
    .circle-left {
        top: -40px;
        left: -20px;      /* so circle stays near box */
        width: 90px;
        height: 90px;
    }

    .circle-right {
        bottom: -40px;
        right: -20px;
        width: 110px;
        height: 110px;
    }
}
@media (max-width: 1200px) {

    .provider-box {
        width: 75%;
    }

    .circle-left {
        left: 200px; 
    }

    .circle-right {
        right: 200px;
    }
}

    .role-sub {
    font-size: 8px;   /* jis hisab se chota chahiye adjust kar lo */
    display: inline-block;
    margin-top: 2px;
}


.ms-review-photo {
    height: 60px;
    width: 60px;
    object-fit: cover;
    border-radius: 10%;
    object-position: 100% 20%;
}

@media (min-width: 768px) {
    .ms-review-photo {
        height: 60px;
        width: 60px;
    }
}

/* ⭐ STAR COLOR */
.ms-stars {
    font-size: 22px;
    background: linear-gradient(45deg, #f7d774, #f4b400);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 900;
}

/* SECTION */
.ms-testimonials-section {
    background: #ffffff;
    padding: 80px 0;
    font-family: Inter, sans-serif;
}

/* LAYOUT */
.ms-testimonials-wrapper {
    width: 90%;
    max-width: 1300px;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    align-items: center;
    gap: 40px;
}

/* LEFT SIDE */
.ms-testimonials-left h2 {
    font-size: 58px;
    font-weight: 800;
    color: #21514B;
    line-height: 1.1;
}

.ms-testimonials-left .sub-heading {
    font-size: 20px;
    color: #57BA91;
    margin-top: 15px;
    font-weight: 600;
}

.ms-name,
.ms-role {
    color: #ffffff !important;
}

/* RIGHT SIDE */
.ms-testimonials-right {
    position: relative;
}

.ms-slider-box {
    background: #21514B;
    border-radius: 22px;
    border: 2px solid #57BA91;
    padding: 55px 40px 100px;
    position: relative;
    overflow: visible;
    box-shadow: 0 18px 45px rgba(0,0,0,0.20);
}

/* REVIEW STATES */
.ms-review {
    display: none;
}
.ms-review.active {
    display: block;
}

/* TEXT COLORS */
.ms-review h3 {
    color: #fafafa;
    font-size: 22px;
    font-weight: 700;
    margin-top: 5px;
}

.role {
    color: #ffffff;
    margin-bottom: 8px;
}

/* REVIEW CARD */
.ms-review-card {
    background: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 18px;
    padding: 28px;
    margin-top: 20px;
    position: relative !important; /* ⭐ REQUIRED FOR CENTERED ARROWS */
}

/* Make text readable */
.ms-review-card * {
    color: #21514B !important;
    opacity: 1 !important;
}

/* REVIEWER PHOTO */
.ms-review-photo {
    width: 82px;
    height: 82px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,0.8);
    box-shadow: 0 6px 14px rgba(0,0,0,0.25);
    margin-bottom: 12px;
}

/* ⭐⭐⭐ FIX: PERFECT CENTERED ARROWS FOR EVERY CARD ⭐⭐⭐ */

.ms-arrow {
    position: absolute;
    top: 50%;                 /* vertical center */
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    background: #fff;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.15);
    color: #21514B;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 50;
}

/* Attach arrows directly to the review card edges */
.ms-review-card .ms-arrow.left {
    left: -43px;
}
.ms-review-card .ms-arrow.right {
    right: -43px;
}

/* DOTS */
.ms-dots {
    text-align: center;
    margin-top: 20px;
}

.ms-dots span {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #bbb;
    border-radius: 50%;
    margin: 0 4px;
}
.ms-dots .active-dot {
    background: #ffffff;
}

/* RESPONSIVE FIXES */
@media (max-width: 992px) {
    .ms-testimonials-wrapper {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .testimonial-left {
        align-items: center;
    }
    .flex.items-center.gap-4 {
        justify-content: center;
    }
    .ms-arrow.left { left: -15px; }
    .ms-arrow.right { right: -15px; }
    .ms-slider-box { padding: 35px; }
}

@media (max-width: 600px) {
    .ms-testimonials-left h2 {
        font-size: 34px !important;
        line-height: 1.25;
        text-align: center;
    }
    .ms-slider-box { padding: 22px; }
    .ms-review-card {
        padding: 16px;
        font-size: 14px;
        line-height: 22px;
    }
    .ms-arrow {
        width: 36px;
        height: 36px;
    }
}

/* LAPTOP — Keep bullets in exactly 2 rows instead of 3 */
@media (max-width:1280px) {
  .ms-bullets-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    justify-items:center !important;
  }
}

/* MOBILE — Single column */
@media (max-width:720px) {
  .ms-card {
    grid-template-columns:1fr !important;
    padding:24px !important;
  }
  .ms-bullets-grid {
    grid-template-columns:1fr !important;
    justify-items:flex-start !important;
  }
}

        /* Section Background */
.ehr-section-bg {
            background: linear-gradient(to right, #21514B, #57BA91) !important;
        }

        /* Heading Styles */
        .ehr-section-bg h2,
        .ehr-section-bg h2 span {
            color: #ffffff !important;
            font-family: 'Poppins', sans-serif !important;
        }

        /* Logo Carousel Container */
        .logo-carousel {
            width: 100%;
            overflow: hidden;
            padding: 20px 0 40px;
        }

        .carousel-row {
            width: 100%;
            overflow: hidden;
            position: relative;
            margin: 20px 0;
        }

        .carousel-track {
            display: flex;
            width: max-content;
            gap: 24px;
            animation: scroll-left 60s linear infinite;
        }

        .right-to-left .carousel-track {
            animation: scroll-right 60s linear infinite;
        }

        /* Hover pause per row */
        .carousel-row:hover .carousel-track {
            animation-play-state: paused;
        }

        /* Premium logo cards */
        .logo-card {
            width: 200px;
            height: 110px;
            background: white;
            border-radius: 16px;
            box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            padding: 18px;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            border: 2px solid #22c55e;
        }

        .logo-card:hover {
            transform: scale(1.08);
            box-shadow: 0 20px 45px rgba(0, 0, 0, 0.15);
        }

        /* Image fitting */
        .logo-card img {
            max-width: 150%;
            max-height: 150%;
            object-fit: cover;
            filter: saturate(1.1);
            transform: scale(1.1);
        }

        /* Animations */
        @keyframes scroll-left {
            from { transform: translateX(0); }
            to { transform: translateX(-50%); }
        }

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

        /* Fade edges for premium look */
        .carousel-row::before,
        .carousel-row::after {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100px;
            z-index: 10;
            pointer-events: none;
        }

        .carousel-row::before {
            left: 0;
            background: linear-gradient(to right, rgba(33, 81, 75, 0.9), transparent);
        }

        .carousel-row::after {
            right: 0;
            background: linear-gradient(to left, rgba(87, 186, 145, 0.9), transparent);
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
            .logo-card {
                width: 160px;
                height: 90px;
                padding: 14px;
            }
            
            .carousel-track {
                gap: 16px;
            }
            
            .carousel-row::before,
            .carousel-row::after {
                width: 50px;
            }
        }

        @media (max-width: 480px) {
            .logo-card {
                width: 130px;
                height: 75px;
                padding: 10px;
            }
}


/* Scope everything only inside this section */
.ms-billing-top * {
  box-sizing: border-box;
}

.ms-billing-top {
  padding: 50px 0;
  font-family: sans-serif;
}

/* Custom container instead of theme container */
.ms-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Headings & text */
.ms-billing-heading {
  font-size: 34px;
  font-weight: 700;
  margin-bottom: 18px;
  color: #000;
  text-align: center;
}

.ms-billing-text {
  max-width: 820px;
  font-size: 16px;
  color: #000;
  line-height: 1.7;
  margin: 0 auto 14px;
  text-align: center;
}

/* CTA Card */
.ms-billing-card {
  width: 100%;
  background: linear-gradient(90deg, #21514B, #57BA91);
  border-radius: 36px;
  padding: 50px 60px;
  margin-top: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  overflow: clip; /* SAFE – no footer overlap */
}

.ms-card-left {
  flex: 1;
  padding-right: 20px;
}

.ms-card-left h3 {
  font-size: 22px;
  color: #fff;
  opacity: 0.9;
  margin-bottom: 10px;
}

.ms-card-left h2 {
  font-size: 34px;
  color: #fff;
  font-weight: 700;
  margin-bottom: 25px;
  line-height: 1.2;
}

/* Button */
.ms-btn {
  background: linear-gradient(to left, #21514B, #57BA91);
  color: #fff;
  padding: 12px 28px;
  border-radius: 40px;
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  display: inline-block;
  transition: 0.3s ease;
}

.ms-btn:hover {
  background: #fff;
  color: #21514B;
  border: 2px solid #21514B;
}

/* Image Area */
.ms-card-right {
  flex: 0 0 45%;
  max-width: 500px;
}

.ms-image-placeholder {
  background: #fff;
  width: 100%;
  aspect-ratio: 5299 / 2721;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #aaa;
  font-weight: bold;
  text-align: center;
  font-size: 14px;
}

.ms-image-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}

/* Responsive */
@media (max-width: 900px) {
  .ms-billing-card {
    flex-direction: column;
    text-align: center;
    padding: 40px 30px;
  }

  .ms-card-left {
    padding-right: 0;
    margin-bottom: 30px;
  }

  .ms-card-right {
    width: 100%;
    max-width: 100%;
  }
}