/* SCOPED RESET - Only affects this section */
        .credentialing-section,
        .credentialing-section *,
        .credentialing-section *::before,
        .credentialing-section *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        }

        /* PALETTE VARIABLES */
        :root {
            --medical-green: #21514B;
            --mint-green: #57BA91;
            --white: #FFFFFF;
        }

        /* SECTION CONTAINER - Self-contained, isolated from header/footer */
        .credentialing-section {
          position: relative;
            display: block;
            width: 100%;
            max-width: 100%;
            padding: 60px 20px;
            background-color: var(--white);
            position: relative;
            z-index: 1;
            isolation: isolate;
            overflow-x: hidden;
            box-sizing: border-box;
        }

        @media (min-width: 992px) {
            .credentialing-section {
                padding: 80px 96px; /* Approx 1 inch padding on sides */
            }
        }

        /* MAIN WRAPPER */
        .credentialing-wrapper {
            max-width: 1600px;
            width: 100%;
            margin: 0 auto;
            position: relative;
            display: flex;
            flex-direction: column;
            padding: 0;
        }

        /* DESKTOP LAYOUT (Flex with Overlap) */
        @media (min-width: 992px) {
            .credentialing-wrapper {
                flex-direction: row;
                align-items: center;
                justify-content: center;
                padding: 0;
            }
        }

        @media (min-width: 1400px) {
            .credentialing-wrapper {
                padding: 0;
            }
        }

        /* LEFT PANEL - WHITE CONTENT CARD */
        .content-card {
            background-color: var(--white);
            border-radius: 24px;
            padding: 28px;
            box-shadow: 0 10px 40px rgba(33, 81, 75, 0.15);
            border: 2px solid var(--mint-green);
            position: relative;
            z-index: 1;
            width: 100%;
        }

        @media (min-width: 992px) {
            .content-card {
                width: 58%;
                padding: 50px;
                padding-right: 80px;
                margin-right: -4%;
            }
        }

        @media (min-width: 1400px) {
            .content-card {
                width: 60%;
                padding: 60px;
                padding-right: 100px;
                margin-right: -5%;
            }
        }

        /* TYPOGRAPHY & ELEMENTS */
        .content-card h1,
.content-card h2 {
    font-size: 32px;
    font-weight: 800;
    color: var(--medical-green);
    margin-bottom: 28px;
    letter-spacing: -0.5px;
    line-height: 1.3;
}


        .content-card h2 span {
            color: var(--mint-green);
        }

        .content-card p {
            margin-bottom: 18px;
            font-size: 16px;
            color: var(--medical-green);
            opacity: 0.9;
            line-height: 1.8;
        }

        .content-card p:last-of-type {
            margin-bottom: 30px;
        }

        .pricing-box{
  padding-bottom:6px;
  background:#21514B;
  padding:12px 20px;
  border-radius:10px;
  width:fit-content;
  min-width:300px;
  margin-bottom:30px;
  position:relative;
  color:#fff;
  z-index:1;
  overflow:visible;
}

.pricing-box p{
  margin:0 0 8px 0;   /* removes extra top space */
  font-size:16px;
  line-height:1;
  transform: translateY(18px);
  color:#ffffff !important;
}

.pricing-box b{
  font-size:22px;
  line-height:0.45;
}


/* 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:6px solid rgba(110,207,167,0.8);
  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:4px solid rgba(110,207,167,0.45);
  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}
}



        /* RIGHT PANEL - GREEN FORM CARD */
        .form-card {
            background: linear-gradient(180deg, var(--medical-green) 0%, var(--mint-green) 100%);
            border-radius: 20px;
            padding: 30px;
            color: var(--white);
            box-shadow: 0 20px 50px rgba(33, 81, 75, 0.3);
            width: 100%;
            position: relative;
            z-index: 2;
            margin-top: 30px;
        }

        @media (min-width: 992px) {
            .form-card {
                width: 46%;
                margin-top: 0;
                padding: 45px;
            }
        }

        @media (min-width: 1400px) {
            .form-card {
                width: 45%;
                padding: 50px;
            }
        }

        /* FORM HEADER */
        .form-header {
            text-align: center;
            margin-bottom: 25px;
        }

        .form-header h3 {
            font-size: 22px;
            font-weight: 700;
            margin-bottom: 8px;
            color: var(--white);
        }

        .form-header p {
            font-size: 14px;
            opacity: 0.9;
            color: var(--white);
        }

        /* FORM ELEMENTS */
        .form-group {
            margin-bottom: 16px;
            display: flex;
            flex-direction: column;
        }

        .name-row {
            display: flex;
            gap: 12px;
        }
        
        .name-row .form-group {
            flex: 1;
        }

        .form-card label {
            font-size: 13px;
            font-weight: 600;
            margin-bottom: 6px;
            color: var(--white);
            opacity: 0.95;
            margin-left: 4px;
        }

        .form-card input, 
        .form-card textarea {
            width: 100%;
            padding: 14px 16px;
            border-radius: 12px;
            border: 2px solid transparent;
            font-size: 15px;
            background-color: var(--white);
            color: var(--medical-green);
            outline: none;
            transition: border-color 0.2s, box-shadow 0.2s;
            -webkit-appearance: none;
        }

        .form-card input::placeholder, 
        .form-card textarea::placeholder {
            color: rgba(33, 81, 75, 0.5);
        }

        .form-card input:focus, 
        .form-card textarea:focus {
            border-color: var(--mint-green);
            box-shadow: 0 0 0 3px rgba(87, 186, 145, 0.2);
        }

        .form-card textarea {
            resize: vertical;
            min-height: 90px;
        }

        /* CTA BUTTON - With hover animation using #21514B */
        /* CTA BUTTON - FINAL FIX */
#credForm{
    display:flex;
    flex-direction:column;
}

.cta-button{
    width:220px;
    margin-top:20px;
    align-self:center;
}





        .cta-button:hover {
            transform: translateY(-4px) scale(1.03);
            box-shadow: 0 8px 25px rgba(33, 81, 75, 0.4);
            background-color: var(--medical-green);
            color: var(--white);
        }

        .cta-button:active {
            transform: translateY(-1px);
            box-shadow: 0 4px 15px rgba(33, 81, 75, 0.3);
        }

        /* TRUST BADGES BELOW BOOK NOW BUTTON */
        .form-trust-badges {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 10px;
            margin-top: 20px;
        }

        .form-trust-badge {
            display: flex;
            align-items: center;
            gap: 6px;
            background-color: var(--white);
            padding: 8px 14px;
            border-radius: 50px;
            border: none;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        .form-trust-badge svg {
            width: 16px;
            height: 16px;
            fill: var(--medical-green);
            flex-shrink: 0;
        }

        .form-trust-badge span {
            font-size: 11px;
            font-weight: 600;
            color: var(--medical-green);
            text-transform: uppercase;
            letter-spacing: 0.3px;
        }

        /* SECURITY NOTE */
        .security-note {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            margin-top: 16px;
            font-size: 12px;
            opacity: 0.85;
        }

        .security-note svg {
            width: 14px;
            height: 14px;
            fill: var(--white);
}
/* ================= BASE STYLES (UNCHANGED DESIGN) ================= */
.section-process{
  background: linear-gradient(to right,#21514B,#57BA91);
  padding: 40px 0;
  box-sizing: border-box;
}

.process-header{
  text-align:center;
  margin-bottom:28px;
}
.process-header h2{
  font-size:28px;
  font-weight:700;
  color:#fff;
  margin-bottom:8px;
}
.process-header p{
  max-width:760px;
  margin:0 auto;
  color:#fff;
  line-height:1.6;
}

/* CONTAINER */
.process-container{
  display:flex;
  justify-content:center;
  gap:24px;
  align-items:flex-start;
  padding:0 18px;
  box-sizing:border-box;
}

/* STEP */
.process-step{
  width:240px;
  text-align:center;
}

/* TOP TAB */
.process-top{
  width:240px;
  height:58px;
  font-weight:700;
  font-size:15px;
  color:#fff;
  border-radius:6px 6px 4px 4px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.process-top::after{
  content:"";
  position:absolute;
  bottom:-10px;
  left:50%;
  transform:translateX(-50%);
  border-left:10px solid transparent;
  border-right:10px solid transparent;
  border-top:10px solid currentColor;
}

/* BOX */
.process-box{
  width:240px;
  background:#fff;
  border:2px solid #21514B;
  border-radius:6px;
  margin-top:25px;
  padding:100px 20px 25px;
  min-height:270px;
  max-height:270px;
  position:relative;
  display:flex;
  align-items:flex-start;
  justify-content:flex-end;
  transition:all .25s ease-in-out;
}

.process-box:hover{
  transform:translateY(-6px);
  box-shadow:0 12px 25px rgba(0,0,0,.12);
  border-color:#1C443E;
}

.process-box p{
  margin:0;
  color:#21514B;
  font-size:14px;
}

/* ICON */
.process-icon{
  position:absolute;
  top:18px;
  left:50%;
  transform:translateX(-50%);
  width:73px;
  height:73px;
  border-radius:50%;
  background:#fff;
  border:4px solid #21514B;
  display:flex;
  align-items:center;
  justify-content:center;
}

.process-icon img{
  width:45px;
  height:45px;
  object-fit:contain;
}

/* COLORS */
.green-light,
.green-dark,
.teal,
.blue-mid,
.blue-dark{
  background:#57BA91;
}

/* ================= RESPONSIVE MEDIA QUERIES ================= */

/* ≥1441px — Large Desktop */
@media (min-width:1441px){
  .process-container{
    flex-wrap:nowrap;
  }
}

/* 1280px–1440px — Laptop */
/* 1280px–1440px — Laptop */
@media (min-width:1280px) and (max-width:1440px){

  .process-container{
    flex-wrap:nowrap;
    max-width:1200px;
    margin:0 auto;
    justify-content:space-between;
    gap:16px !important;   /* 🔥 FORCE APPLY */
  }

  .process-step{
    width: calc((100% - 15px) / 5); /* 4 gaps × 16px */
  }
  .section-process{
    padding-left: 25px;
    padding-right: 80px;
  }
}

/* ≤992px — Tablet */
@media (max-width:992px){
  .process-container{
    flex-wrap:wrap;
  }
  .process-step{
    width:48%;
  }
  .process-top,
  .process-box{
    width:100%;
  }
}

/* ≤576px — Mobile */
@media (max-width:576px){
  .process-step{
    width:100%;
  }
  .process-header h2{
    font-size:22px;
  }
  .process-header p{
    font-size:14px;
  }
}
/* ================= BASE (UNCHANGED DESIGN) ================= */

.credential-box{
  background:#ffffff;
  color:#21514B;
  max-width:1500px;
  margin:0 auto;
  padding:40px 60px 60px;
  border-radius:14px;
  box-sizing:border-box;
}

.cred-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
}

.cred-header h2{
  font-size:24px;
  font-weight:700;
  margin:0;
  line-height:1.4;
}

.cred-btn{
  border:2px solid #57BA91;
  padding:10px 28px;
  border-radius:30px;
  color:#21514B;
  font-size:15px;
  font-weight:600;
  text-decoration:none;
  transition:0.2s;
  white-space:nowrap;
}

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

.cred-subtext{
  margin-top:18px;
  font-size:15px;
  opacity:0.9;
}

.cred-line{
  border:0;
  border-bottom:2px solid #57BA91;
  margin:22px 0;
}

.cred-features{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:40px;
}

.feature-item{
  flex:1;
  display:flex;
  align-items:center;
  gap:10px;
  line-height:1.4;
}

.check-icon{
  background:#57BA91;
  color:#fff;
  width:26px;
  height:26px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  font-size:14px;
  flex-shrink:0;
}

/* ================= RESPONSIVE MEDIA QUERIES ================= */

/* ≥1441px — Large Desktop */
@media (min-width:1441px){
  .credential-box{
    padding:50px 70px 70px;
  }
}

/* 1280px–1440px — Laptop */
@media (min-width:1280px) and (max-width:1440px){

  .credential-box{
    max-width:1200px;   /* 🔥 width kam */
    padding:40px 48px 56px;
  }

  .cred-features{
    gap:28px;          /* 🔥 thora tight but safe */
    flex-wrap:nowrap;  /* 🔒 force single row */
  }
}


/* ≤992px — Tablet */
@media (max-width:992px){

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

  .cred-btn{
    margin-top:14px;
  }

  .cred-features{
    flex-wrap:wrap;
    gap:24px;
  }

  .feature-item{
    flex:1 1 48%;
  }
}

/* ≤576px — Mobile */
@media (max-width:576px){

  .credential-box{
    padding:30px 18px 40px;
    margin:0 14px;
    text-align:center;   /* card center */
  }

  .cred-header{
    flex-direction:column;
    align-items:center;
    gap:16px;
  }

  .cred-header h2{
    font-size:20px;
  }

  .cred-subtext{
    font-size:14px;
  }

  .cred-btn{
    margin:0 auto;
  }

  /* 🔥 FEATURES FIX */
  .cred-features{
    flex-direction:column;
    align-items:flex-start;   /* 🔥 LEFT START */
    gap:18px;
    max-width:320px;          /* 🔥 straight column */
    margin:0 auto;            /* 🔥 center block */
  }

  .feature-item{
    width:100%;
    justify-content:flex-start; /* 🔥 icon + text left */
    text-align:left;
  }
}

.services-grid > div {
  padding-inline: 35px;
}
.services-grid > div:nth-child(5) {
  padding-inline: initial;
}



        /* 
         * PRECISION GRID SYSTEM - Healthcare Credentialing
         * Prefix: .cred-grid-
         * 
         * GRID MATH:
         * - Outer card width: 320px
         * - Outer card height: 200px
         * - Center card width: 360px (320px + 40px)
         * - Center card height: 240px (200px + 40px)
         * - Gap: 28px (uniform)
         * - Total grid width: (320 * 3) + (28 * 2) = 1016px
         * - Total grid height: (200 * 3) + (28 * 2) = 656px
         */

        /* ==================== SCOPED RESET ==================== */
        .cred-grid-wrapper *,
        .cred-grid-wrapper *::before,
        .cred-grid-wrapper *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        /* ==================== CSS VARIABLES ==================== */
        .cred-grid-wrapper {
            --cred-card-width: 320px;
            --cred-card-height: 200px;
            /* Center card now matches standard card dimensions */
            --cred-gap: 28px;
            --cred-radius: 14px;
            --cred-primary: #21514B;
            --cred-gradient-start: #21514B;
            --cred-gradient-end: #57BA91;
            --cred-text-muted: #6b7280;
            --cred-shadow-soft: 0 4px 12px rgba(33, 81, 75, 0.12);
            --cred-shadow-medium: 0 8px 24px rgba(33, 81, 75, 0.18);
            --cred-shadow-strong: 0 16px 48px rgba(33, 81, 75, 0.28);

            font-family: 'Inter', system-ui, -apple-system, sans-serif;
            background-color: #ffffff;
            color: #1f2937;
            line-height: 1.6;
        }

        /* ==================== HEADING SECTION ==================== */
        .cred-grid-heading {
            text-align: center;
            padding: 80px 24px 50px;
            background: #ffffff;
            max-width: 1100px;
            margin: 0 auto;
        }

        .cred-grid-heading h2 {
            font-size: clamp(28px, 4vw, 42px);
            font-weight: 800;
            color: var(--cred-primary);
            margin-bottom: 24px;
            line-height: 1.25;
        }

        .cred-grid-heading p {
            font-size: clamp(15px, 2vw, 18px);
            color: #444;
            max-width: 1000px;
            margin: 0 auto;
            line-height: 1.7;
        }

        /* ==================== GRID CONTAINER ==================== */
        .cred-grid-container {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px 24px 60px;
            background: #ffffff;
            overflow-x: auto;
        }

        /* ==================== PRECISION GRID ==================== */
        .cred-grid-main {
            display: grid;
            
            /* 
             * EXPLICIT GRID DEFINITION
             * 3 columns × 3 rows
             * All cells identical: 320px × 200px
             */
            grid-template-columns: repeat(3, var(--cred-card-width));
            
            grid-template-rows: repeat(3, var(--cred-card-height));
            
            gap: var(--cred-gap);
            
            /* Grid areas for explicit placement */
            grid-template-areas:
                "card1 card2 card3"
                "card4 center card5"
                "card6 card7 card8";
            
            /* Fixed dimensions - no stretching */
            width: max-content;
            
            /* Isolation for z-index */
            isolation: isolate;
        }

        /* ==================== CARD BASE STYLES ==================== */
        .cred-grid-card {
            /* Fill cell completely */
            width: 100%;
            height: 100%;
            
            /* Visual styling */
            background: linear-gradient(135deg, var(--cred-gradient-start), var(--cred-gradient-end));
            border-radius: var(--cred-radius);
            border: 2px solid rgba(198, 239, 183, 0.25);
            box-shadow: var(--cred-shadow-soft);
            
            /* Internal layout */
            padding: 18px;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;
            
            /* Text */
            color: white;
            
            /* Prevent content overflow */
            overflow: hidden;
            
            /* Smooth hover (does not affect layout) */
            transition: box-shadow 0.3s ease, transform 0.3s ease;
            
            /* Layering */
            position: relative;
            z-index: 1;
        }

        /* Content fade indicator */
        .cred-grid-card::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 35px;
            background: linear-gradient(to top, rgba(33, 81, 75, 0.85), transparent);
            border-radius: 0 0 var(--cred-radius) var(--cred-radius);
            pointer-events: none;
        }

        /* Hover effect - visual only, no layout shift */
        .cred-grid-card:hover {
            box-shadow: var(--cred-shadow-medium);
            transform: translateY(-4px);
        }

        /* ==================== EXPLICIT CARD PLACEMENT ==================== */
        .cred-grid-card-1 { grid-area: card1; }
        .cred-grid-card-2 { grid-area: card2; }
        .cred-grid-card-3 { grid-area: card3; }
        .cred-grid-card-4 { grid-area: card4; }
        .cred-grid-card-5 { grid-area: card5; }
        .cred-grid-card-6 { grid-area: card6; }
        .cred-grid-card-7 { grid-area: card7; }
        .cred-grid-card-8 { grid-area: card8; }

        /* ==================== CENTER CARD ==================== */
        .cred-grid-card-center {
            grid-area: center;
            
            /* Override base styles for distinct look but equal size */
            background: #ffffff;
            border: 2px solid var(--cred-primary);
            box-shadow: var(--cred-shadow-soft);
            color: var(--cred-primary);
            
            /* Center alignment */
            justify-content: center;
            align-items: center;
            text-align: center;
            
            /* Standard stacking and padding */
            z-index: 1;
            padding: 24px;
        }

        /* No fade on center card */
        .cred-grid-card-center::after {
            display: none;
        }

        /* Center card hover */
        .cred-grid-card-center:hover {
            box-shadow: var(--cred-shadow-medium);
            transform: translateY(-4px);
            background: #f9fdfb;
        }

        /* ==================== TYPOGRAPHY ==================== */
        .cred-grid-card-title {
            font-size: 17px;
            font-weight: 700;
            margin: 0 0 10px 0;
            line-height: 1.35;
            color: white;
            flex-shrink: 0;
        }

        .cred-grid-card-text {
            font-size: 13px;
            color: rgba(255, 255, 255, 0.9);
            margin: 0;
            line-height: 1.55;
            overflow-y: auto;
            display: block;
             max-height: calc(100% - 38px);
            -webkit-line-clamp: 5;
            -webkit-box-orient: vertical;
            padding-right: 6px;
        }

        /* Center card typography */
        .cred-grid-card-center .cred-grid-card-title {
            font-size: 20px;
            font-weight: 800;
            margin-bottom: 0;
            line-height: 1.35;
            color: var(--cred-primary);
        }

        /* ==================== CTA SECTION ==================== */
        .cred-grid-cta {
            background: #ffffff;
            padding: 60px 24px;
        }

        .cred-grid-cta-bar {
            background: linear-gradient(to right, #57BA91, #21514B);
            width: 100%;
            max-width: 1100px;
            margin: 0 auto;
            padding: 32px 48px;
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 30px;
            color: white;
        }

        .cred-grid-cta-text {
            font-size: 24px;
            font-weight: 600;
            display: flex;
            flex-direction: column;
            line-height: 1.4;
        }

        .cred-grid-cta-sub {
            font-size: 16px;
            opacity: 0.9;
            margin-top: 6px;
            font-weight: 400;
        }

        .cred-grid-cta-btn {
            background: white;
            color: #21514B;
            padding: 14px 28px;
            border-radius: 8px;
            font-weight: 600;
            text-decoration: none;
            transition: background 0.25s ease, color 0.25s ease;
            white-space: nowrap;
            font-size: 16px;
        }

        .cred-grid-cta-btn:hover {
            background: #21514B;
            color: white;
            box-shadow: 0 0 0 2px white;
        }

        .cred-grid-cta-logo {
            height: 45px;
            width: auto;
            filter: brightness(1.1);
        }

        /* ==================== RESPONSIVE: LAPTOP (1024px - 1199px) ==================== */
        @media (max-width: 1199px) {
            .cred-grid-wrapper {
                --cred-card-width: 280px;
                --cred-card-height: 185px;
                --cred-gap: 24px;
            }

            .cred-grid-heading {
                padding: 60px 20px 40px;
            }

            .cred-grid-card {
                padding: 20px;
            }

            .cred-grid-card-title {
                font-size: 16px;
            }

            .cred-grid-card-text {
                font-size: 12.5px;
                -webkit-line-clamp: 4;
            }

            .cred-grid-card-center .cred-grid-card-title {
                font-size: 18px;
            }
        }

        /* ==================== RESPONSIVE: TABLET (768px - 1023px) ==================== */
        @media (max-width: 1023px) {
            .cred-grid-wrapper {
                --cred-card-width: 230px; /* Reduced width for 3 cols fitting */
                --cred-card-height: 175px;
                --cred-gap: 20px;
            }

            .cred-grid-card {
                padding: 18px;
            }

            .cred-grid-card-title {
                font-size: 15px;
                margin-bottom: 8px;
            }

            .cred-grid-card-text {
                font-size: 12px;
                -webkit-line-clamp: 4;
            }

            .cred-grid-card-center .cred-grid-card-title {
                font-size: 17px;
            }

            .cred-grid-cta-bar {
                flex-direction: column;
                text-align: center;
                padding: 28px 24px;
                gap: 20px;
            }

            .cred-grid-cta-text {
                font-size: 20px;
            }

            .cred-grid-cta-logo {
                order: -1;
            }
        }

        /* ==================== RESPONSIVE: SMALL TABLET (600px - 767px) ==================== */
        @media (max-width: 767px) {
            .cred-grid-main {
                /* Switch to 2-column layout */
                grid-template-columns: 
                    minmax(200px, 1fr) 
                    minmax(200px, 1fr);
                
                grid-template-rows: repeat(5, 180px);
                
                /* 
                 * Center card treated as normal cell in 2-col layout 
                 * Note: 9 items total. 5 rows needed.
                 * To keep it uniform, we just flow them.
                 * Layout:
                 * 1 2
                 * 3 4
                 * 5 6 (5 is center)
                 * 7 8
                 * 9 (hanging)
                 */
                grid-template-areas:
                    "card1 card2"
                    "card3 card4"
                    "center card5"
                    "card6 card7"
                    "card8 .";
                
                width: 100%;
                max-width: 580px;
            }

            .cred-grid-container {
                padding: 20px 20px 50px;
            }

            .cred-grid-card {
                padding: 20px;
            }

            .cred-grid-card-title {
                font-size: 16px;
            }

            .cred-grid-card-text {
                font-size: 13px;
                -webkit-line-clamp: 4;
            }

            .cred-grid-card-center .cred-grid-card-title {
                font-size: 18px;
            }
        }

        /* ==================== RESPONSIVE: MOBILE (<600px) ==================== */
        @media (max-width: 599px) {
            .cred-grid-main {
                /* Single column stack */
                grid-template-columns: minmax(280px, 1fr);
                
                grid-template-rows: repeat(9, auto);
                
                grid-template-areas:
                    "center"
                    "card1"
                    "card2"
                    "card3"
                    "card4"
                    "card5"
                    "card6"
                    "card7"
                    "card8";
                
                gap: 18px;
                max-width: 400px;
            }

            .cred-grid-container {
                padding: 10px 16px 40px;
            }

            .cred-grid-heading {
                padding: 50px 16px 30px;
            }

            .cred-grid-card {
                padding: 22px;
                min-height: 160px;
            }

            .cred-grid-card::after {
                height: 30px;
            }

            .cred-grid-card-title {
                font-size: 17px;
                margin-bottom: 10px;
            }

            .cred-grid-card-text {
                font-size: 13px;
                -webkit-line-clamp: 5;
            }

            .cred-grid-card-center {
                min-height: 160px; /* Same as others */
            }

            .cred-grid-card-center .cred-grid-card-title {
                font-size: 20px;
            }

            /* Disable hover transforms on mobile */
            .cred-grid-card:hover {
                transform: none;
            }

            .cred-grid-cta {
                padding: 40px 16px;
            }

            .cred-grid-cta-bar {
                padding: 24px 20px;
            }

            .cred-grid-cta-text {
                font-size: 18px;
            }

            .cred-grid-cta-sub {
                font-size: 14px;
            }

            .cred-grid-cta-btn {
                width: 100%;
                text-align: center;
                padding: 14px 20px;
            }

            .cred-grid-cta-logo {
                height: 36px;
            }
}

/* =========================
   SECTION BASE
========================= */
.section{
  background:linear-gradient(135deg,#21514B 0%,#57BA91 100%);
  padding:72px 16px;
}

.wrap{
  max-width:1200px;
  margin:0 auto;
}

/* =========================
   HEADING
========================= */
.section h2{
  margin:0;
  font-weight:700;
  font-size:40px;
  line-height:1.15;
  color:#ffffff;
  text-align:center;
}

.intro{
  margin:18px auto 0;
  font-size:18px;
  line-height:28px;
  max-width:900px;
  text-align:center;
  color:rgba(255,255,255,.92);
}

/* =========================
   WORKFLOW
========================= */
.workflow{
  list-style:none;
  padding:0;
  margin:44px 0 0;
  display:flex;
  flex-direction:column;
  gap:24px;
  align-items:center;
}

/* =========================
   STEP CARD (LOCKED STRUCTURE)
========================= */
.step{
  width:88%;
  max-width:1200px;
  padding:40px;
  border-radius:14px;
  box-shadow:0 4px 10px rgba(0,0,0,.08);
  display:flex;
  align-items:center;                 /* 🔒 vertical lock */
  justify-content:space-between;
  gap:28px;
  transition:transform .3s ease, box-shadow .3s ease;
}

.step:hover{
  transform:translateY(-6px);
  box-shadow:0 10px 24px rgba(0,0,0,.12);
}

/* =========================
   ODD / EVEN COLORS
========================= */
.step--odd{ background:#21514B; }
.step--even{ background:#ffffff; }

/* =========================
   NUMBER & ICON (FIXED COLUMNS)
========================= */
.number,
.icon{
  flex:0 0 88px;                      /* 🔒 SAME WIDTH */
  display:flex;
  align-items:center;
  justify-content:center;
}

.number__inner{
  width:72px;
  height:72px;
  border-radius:50%;
  border:3px solid #21514B;
  background:#ffffff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:32px;
  font-weight:800;
  color:#21514B;
}

.icon-circle{
  width:72px;
  height:72px;
  border-radius:50%;
  background:#ffffff;
  border:3px solid #21514B;
  display:flex;
  align-items:center;
  justify-content:center;
}

.icon-circle img{
  width:70%;
  height:70%;
  object-fit:contain;
}

/* =========================
   CONTENT (ONLY FLEXIBLE AREA)
========================= */
.content{
  flex:1 1 auto;
  max-width:760px;
  padding:0 20px;
  text-align:center;
}

.step__title{
  margin:0;
  font-size:22px;
  font-weight:600;
  line-height:1.25;
}

.step__body{
  margin-top:12px;
  font-size:16px;
  line-height:1.7;
}

/* =========================
   TEXT COLORS
========================= */
.step--odd .step__title,
.step--odd .step__body{
  color:#ffffff;
}

.step--even .step__title{
  color:#21514B;
}
.step--even .step__body{
  color:rgba(13,41,38,.92);
}

/* =========================
   ZIG-ZAG STRUCTURE (SAFE)
========================= */
.step--odd{
  flex-direction:row;
}
.step--even{
  flex-direction:row-reverse;
}

/* =========================
   TABLET (≤992px)
========================= */
@media (max-width:992px){
  .step{
    width:92%;
    flex-direction:column !important;
    text-align:center;
    gap:18px;
  }

  .number,
  .icon{
    flex:0 0 auto;
  }

  .content{
    max-width:100%;
    padding:0;
  }
}

/* =========================
   MOBILE (≤576px)
========================= */
@media (max-width:576px){
  h2{ font-size:28px; }
  .intro{ font-size:15px; }

  .step{
    width:100%;
    padding:28px 20px;
  }

  .number__inner,
  .icon-circle{
    width:64px;
    height:64px;
    font-size:26px;
  }
}
/* ================= GLOBAL SAFETY ================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ================= SECTION ================= */
.bme-section{
  width:100%;
  background:#fff;
  padding:72px 0 80px;
  overflow:hidden;
}

.bme-container{
  width:100%;
  max-width:1140px;
  margin:0 auto;
  padding:0 24px;
}

/* ================= INTRO ================= */
.bme-intro{
  text-align:center;
  max-width:980px;
  margin:0 auto 54px;
}

.bme-intro h2{
  font-size:clamp(28px,3vw,44px);
  line-height:1.15;
  font-weight:750;
  color:#21514B;
}

.bme-intro p{
  max-width:920px;
  margin:0 auto;
  font-size:clamp(15px,1.3vw,18px);
  color:#475569;
}

/* ================= BLOCKS ================= */
.bme-block{
  border-top:1px solid #57BA91;
  padding-top:54px;
  margin-top:54px;
}

.bme-block:first-of-type{
  border-top:0;
  padding-top:0;
  margin-top:0;
}

.bme-grid{
  display:flex;
  flex-direction:column;
  gap:36px;
  align-items:center;
}

/* Desktop & Laptop */
@media (min-width: 960px){
  .bme-grid{
    flex-direction:row;
    align-items:center;
    gap:52px;
  }
  .bme-block.is-reverse .bme-grid{
    flex-direction:row-reverse;
  }
}

/* ================= TEXT ================= */
.bme-text{
  flex:1;
}

.bme-text h3{
  font-size:clamp(20px,1.7vw,24px);
  font-weight:800;
}

.bme-text h4{
  margin-top:18px;
  font-size:16px;
  font-weight:700;
}

.bme-text p{
  font-size:16px;
  color:#475569;
}

/* ================= MEDIA ================= */
.bme-media{
  flex:1;
  max-width:520px;
  width:100%;
}

.bme-image{
  width:100%;
  height:auto;
  border-radius:14px;
  display:block;
}

/* ================= CTA SECTION ================= */
.cta-section{
  background:#fff;
  padding:60px 20px;
}

.cta-section .cta-bar{
  background: linear-gradient(to right, #57BA91, #21514B);
  max-width:1200px;
  margin:50px auto 0;
  padding:28px 40px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

/* CTA TEXT */
.cta-bar .cta-text{
  font-size: clamp(18px, 1.4vw, 17px);
  font-weight:600;
  color:#fff;
}
/* CTA BUTTON */
.cta-btn{
  background:#fff;
  color:#21514B;
  padding:12px 26px;
  border-radius:8px;
  font-weight:600;
  text-decoration:none;
  white-space:nowrap;
  transition:0.2s ease;
}

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

/* CTA LOGO */
.cta-logo{
  width:180px;
  height:auto;
  object-fit:contain;
}

/* ================= BREAKPOINTS ================= */

/* 1441px+ Large Desktop */
@media (min-width:1441px){
  .bme-container{max-width:1200px;}
}

/* 1280px – 1440px Laptop */
@media (min-width:1280px) and (max-width:1440px){
  .bme-container{max-width:1100px;}
  .cta-bar{padding:26px 36px;}
}

/* Tablet */
@media (max-width:992px){
  .bme-grid{
    gap:32px;
  }
  .cta-bar{
    flex-direction:column;
    text-align:center;
  }
  .cta-btn{
    width:auto;
  }
}

/* Mobile */
@media (max-width:576px){
  .bme-section{
    padding:56px 0 64px;
  }
  .cta-bar{
    padding:22px;
  }
  .cta-btn{
    width:100%;
  }
  .cta-logo{
    width:140px;
  }
}

 /* =============================================
   RESET & SAFETY
============================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* =============================================
   SECTION BACKGROUND
============================================= */
.page-section {
  background: linear-gradient(to right, #21514B, #57BA91);
}

/* =============================================
   ROOT VARIABLES
============================================= */
:root {
  --primary-dark-green: #21514B;
  --accent-mint-green: #57BA91;
  --soft-divider-gray: rgba(255, 255, 255, 0.08);
  --timeline-line: rgba(87, 186, 145, 0.35);
  --white: #ffffff;
  --text-dark: #0f172a;
}

/* =============================================
   SECTION WRAPPER
============================================= */
.why-choose-us {
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 40px;
}

/* =============================================
   HEADER
============================================= */
.section-header {
  text-align: center;
  margin-bottom: 60px;
}

.page-section .why-choose-us .section-header h2,
.page-section .why-choose-us .section-header p{
   color:#ffffff !important;
}



/* =============================================
   TIMELINE
============================================= */
.timeline {
  position: relative;
}

/* Vertical line */
.timeline::before {
  content: "";
  position: absolute;
  left: 40px;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--timeline-line);
  border-radius: 2px;
}

/* =============================================
   TIMELINE ITEM
============================================= */
.timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 28px;
  margin-bottom: 48px;
  align-items: flex-start;
}

/* =============================================
   NUMBER BADGE
============================================= */
.timeline-badge {
  width: 80px;
  height: 80px;
  background: var(--accent-mint-green);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
  z-index: 2;
}

/* =============================================
   CONTENT CARD
============================================= */
.timeline-content {
  background: #fff;
  border-radius: 12px;
  padding: 28px 32px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}

.timeline-content h3 {
  font-size: 1.25rem;
  color: var(--primary-dark-green);
  margin-bottom: 12px;
}

.timeline-content p {
  font-size: 1rem;
  color: #334155;
  line-height: 1.7;
}

/* =============================================
   ICON (DESKTOP/LAPTOP)
============================================= */
.timeline-icon {
  position: absolute;
  right: -96px;
  top: 50%;
  transform: translateY(-50%);
}

.icon-circle {
  width: 80px;
  height: 80px;
}

.circle-icon-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* =========================================================
   RESPONSIVE BREAKPOINTS (AS REQUESTED)
========================================================= */

/* ================== LARGE DESKTOP ================== */
@media (min-width: 1441px) {
  .why-choose-us {
    max-width: 1300px;
  }
}

/* ================== LAPTOP ================== */
@media (min-width: 1280px) and (max-width: 1440px) {
  .why-choose-us {
    padding: 72px 32px;
  }

  .timeline-icon {
    right: -80px;
  }
}

/* ================== TABLET ================== */
@media (max-width: 992px) {
  .why-choose-us {
    padding: 64px 28px;
  }

  .timeline::before {
    left: 36px;
  }

  .timeline-item {
    grid-template-columns: 72px 1fr;
  }

  .timeline-icon {
    position: relative;
    right: auto;
    top: auto;
    transform: none;
    margin-top: 20px;
  }
}

/* ================== MOBILE ================== */
@media (max-width: 576px) {

  /* Remove vertical timeline line */
  .timeline::before {
    display: none;
  }

  /* Timeline item becomes stacked */
  .timeline-item {
    grid-template-columns: 1fr;
    gap: 1px;
    position: relative;
    padding-top: 0; /* 🔥 remove fake spacing */
    text-align: center;
  }

  /* 🔥 NUMBER BADGE — ABOVE THE CARD (NOT OVERLAPPING) */
  .timeline-badge {
    position: relative;     /* 🔥 no absolute */
    left: auto;
    top: auto;
    transform: none;
    margin: 0 auto 1px;    /* center + spacing */
    z-index: 2;
  }

  /* 🔥 CONTENT CARD — NORMAL */
  .timeline-content {
    padding: 22px;
    text-align: left;
  }

  /* 🔥 REMOVE BOTTOM ICON — MOBILE ONLY */
  .timeline-icon {
    display: none !important;
  }
}
/* =====================================================
   MICRO FIX — ONLY FOR 1280 x 720
   DOES NOT AFFECT ANY OTHER SCREEN
===================================================== */
/* =====================================================
   FIX OVERLAP @ 1280 x 720 ONLY
   Prevents badge + card merging
===================================================== */
/* =====================================================
   FIX ICON + CARD MERGE
   TARGET: 1280 × 720 ONLY
===================================================== */
@media (min-width: 1240px) and (max-width: 1320px) {

  /* Timeline item spacing thori open */
  .timeline-item {
    margin-bottom: 52px;
  }

  /* Right-side icon reposition (KEY FIX) */
  .timeline-icon {
    right: -72px;              /* pehle -96px */
    top: 50%;
    transform: translateY(-50%) scale(0.95);
  }

  /* Icon circle thori compact */
  .icon-circle {
    width: 72px;
    height: 72px;
  }
}

/* ================================
   Specialty Framework Section
================================ */
.specialty-framework-section{
  width:100%;
  padding:clamp(56px,7vw,92px) 18px;
  background:#fff;
}

.specialty-framework-section .container{
  max-width:1200px;
  margin:0 auto;
}

/* ================================
   Heading
================================ */
.specialty-framework-section h2{
  margin:14px 0 10px;
  font-size:clamp(28px,3.3vw,40px);
  line-height:1.15;
  font-weight:700;
  color:#21514B;
  text-align:center;
}

.specialty-framework-section .intro{
  margin:18px auto 0;
  max-width:920px;
  text-align:center;
}

.specialty-framework-section .intro p{
  font-size:16px;
  line-height:1.8;
  color:rgba(33,81,75,.86);
}

.specialty-framework-section .intro p + p{
  margin-top:14px;
}

/* ================================
   Grid
================================ */
.specialty-framework-section .grid{
  margin-top:clamp(26px,3vw,36px);
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}

/* ================================
   Cards
================================ */
.specialty-framework-section .card{
  min-height:74px;
  padding:18px 16px;
  border-radius:18px;
  border:1px solid rgba(87,186,145,.35);
  background:rgba(255,255,255,.92);
  display:grid;
  place-items:center;
  text-align:center;
  font-weight:600;
  color:#21514B;
  cursor:pointer;
  transition:all .35s ease;
  box-shadow:
    0 10px 22px rgba(87,186,145,.10),
    0 2px 0 rgba(87,186,145,.10);
}

.specialty-framework-section .card:hover{
  background:#57BA91;
  color:#fff;
  transform:translateY(-6px);
  box-shadow:
    0 18px 34px rgba(87,186,145,.26),
    0 2px 0 rgba(87,186,145,.18);
}

/* ================================
   CTA BAR
================================ */
.cta-bar{
  margin:50px auto 0;
  max-width:1000px;
  padding:26px 34px;
  border-radius:14px;
  background:linear-gradient(to right, #57BA91, #21514B);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

.cta-text{
  font-size:clamp(18px,2vw,24px);
  color:#fff;
}

.cta-btn{
  background:#fff;
  color:#21514B;
  padding:12px 26px;
  border-radius:8px;
  font-weight:600;
  text-decoration:none;
  white-space:nowrap;
  transition:.2s ease;
}

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

.cta-logo{
  width:160px;
  height:auto;
}

/* =================================================
   BREAKPOINTS (AS REQUESTED)
================================================= */

/* 1441px+ */
@media (min-width:1441px){
  .specialty-framework-section .container{
    max-width:1300px;
  }
}

/* 1280px–1440px */
@media (min-width:1280px) and (max-width:1440px){
  .specialty-framework-section .grid{
    gap:16px;
  }
}

/* Tablet */
@media (max-width:992px){
  .specialty-framework-section .grid{
    grid-template-columns:repeat(3,1fr);
  }

  .cta-bar{
    flex-direction:column;
    text-align:center;
  }
}

/* Mobile */
@media (max-width:576px){
  .specialty-framework-section .grid{
    grid-template-columns:repeat(2,1fr);
  }

  .cta-btn{
    width:100%;
  }

  .cta-logo{
    width:140px;
  }
}

/* ============================================
   CREDENTIALING COMPONENT (SCOPED)
============================================ */

.cred-component {
  padding: 60px 24px 80px;
  background: linear-gradient(90deg, #21514B 0%, #57BA91 100%);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

.cred-component *,
.cred-component *::before,
.cred-component *::after {
  box-sizing: border-box;
}

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

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

.cred-heading {
  margin: 0 0 20px;
  font-size: clamp(26px, 4vw, 38px);
  font-weight: 700;
  line-height: 1.2;
  color: #ffffff;
}

.cred-intro {
  max-width: 860px;
  margin: 0 auto 40px;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255,255,255,0.9);
  font-family: poppins;
}

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

.cred-card {
  background: #ffffff;
  border-radius: 16px;
  box-shadow:
    0 20px 50px rgba(0,0,0,0.15),
    0 8px 20px rgba(0,0,0,0.1);
  overflow: hidden;
}

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

.cred-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* ================= PANES ================= */

.cred-pane {
  padding: 36px 40px;
}

.cred-pane:first-child {
  border-right: 1px solid rgba(33,81,75,0.12);
}

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

.cred-list {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
}

.cred-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(33,81,75,0.08);
}

.cred-list li:last-child {
  border-bottom: none;
}

.cred-bullet {
  width: 10px;
  height: 10px;
  margin-top: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg,#57BA91,#21514B);
  flex-shrink: 0;
}

.cred-text {
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.5;
  color: #1f2a2a;
  word-break: break-word;
}

/* =================================================
   RESPONSIVE BREAKPOINTS (AS REQUESTED)
================================================= */

/* ================= 1441px+ (Large Desktop) ================= */
@media (min-width: 1441px) {
  .cred-container {
    max-width: 1200px;
  }

  .cred-pane {
    padding: 40px 48px;
  }
}

/* ================= 1280px – 1440px (Laptop) ================= */
@media (min-width: 1280px) and (max-width: 1440px) {
  .cred-container {
    max-width: 1100px;
  }

  .cred-pane {
    padding: 36px 42px;
  }
}

/* ================= ≤992px (Tablet) ================= */
@media (max-width: 992px) {
  .cred-component {
    padding: 52px 20px 64px;
  }

  .cred-grid {
    grid-template-columns: 1fr;
  }

  .cred-pane:first-child {
    border-right: none;
    border-bottom: 1px solid rgba(33,81,75,0.12);
  }

  .cred-pane {
    padding: 28px 28px;
  }
}

/* ================= ≤576px (Mobile) ================= */
@media (max-width: 576px) {
  .cred-component {
    padding: 42px 16px 52px;
  }

  .cred-heading {
    font-size: 24px;
  }

  .cred-intro {
    font-size: 15px;
    margin-bottom: 28px;
  }

  .cred-pane {
    padding: 24px 20px;
  }

  .cred-text {
    font-size: 14px;
  }
  
}
/* ==============================
   ROOT VARIABLES
============================== */
:root {
  --ms-primary-dark: #21514B;
  --ms-accent-mint: #57BA91;
  --ms-white: #ffffff;
  --ms-text-muted: rgba(33, 81, 75, 0.75);
  --ms-border-light: rgba(33, 81, 75, 0.12);
  --ms-shadow-soft: 0 4px 20px rgba(33, 81, 75, 0.08);
  --ms-shadow-hover: 0 12px 32px rgba(33, 81, 75, 0.15);
  --ms-transition: 0.3s ease;
}

/* ==============================
   SECTION WRAPPER
============================== */
.ms-credentialing-section {
  width: 100%;
  background: #ffffff;
  padding: 100px 20px;
}

.ms-credentialing-container {
  max-width: 1200px;
  margin: 0 auto;
}

/* ==============================
   HEADER
============================== */
.ms-section-header {
  text-align: center;
  margin-bottom: 60px;
}

.ms-section-title {
  color: var(--ms-primary-dark);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  margin-bottom: 20px;
}

.ms-section-description {
  color: var(--ms-text-muted);
  font-size: 1.0625rem;
  max-width: 700px;
  margin: 0 auto;
}

/* ==============================
   GRID
============================== */
.ms-packages-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

/* ==============================
   CARD
============================== */
.ms-package-card {
  background: linear-gradient(180deg, #21514B 0%, #57BA91 100%);
  border-radius: 18px;
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  height: 100%;
  align-items: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ms-package-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.2);
}

/* ==============================
   ICON (FIXED)
============================== */
.ms-card-icon-wrapper {
  width: 84px;          /* 🔥 bigger circle */
  height: 84px;
  margin: 0 auto 28px;
  background: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}

.ms-card-icon-wrapper img {
  width: 50px;          /* 🔥 bigger icon */
  height: 50px;
  object-fit: contain;
  filter: none;
}

/* ==============================
   CARD CONTENT
============================== */
.ms-card-title {
  color: #ffffff;
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 8px;
}

.ms-card-subtitle {
  color: rgba(255,255,255,0.9);
  font-size: 0.95rem;
  margin-bottom: 20px;
}

.ms-includes-list li {
  display: flex;
  gap: 12px;
  color: #ffffff;
  font-size: 0.95rem;
  padding: 10px 0;
  line-height: 1.6;
}

.ms-card-cta svg {
  display: none; /* 🔥 REMOVE GIANT ARROW */
}

/* ==============================
   CTA
============================== */
.ms-card-cta {
  margin-top: auto;
  background: #ffffff;
  color: #21514B;
  padding: 14px 20px;
  border-radius: 10px;
  text-align: center;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease;
}

.ms-card-cta:hover {
  background: #21514B;
  color: #ffffff;
}

/* ==============================
   RESPONSIVE (AS REQUESTED)
============================== */

/* 1441px+ */
@media (min-width: 1441px) {
  .ms-packages-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* 1280px–1440px */
@media (min-width: 1280px) and (max-width: 1440px) {
  .ms-packages-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ≤992px */
@media (max-width: 992px) {
  .ms-packages-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ≤576px */
@media (max-width: 576px) {
  .ms-packages-grid {
    grid-template-columns: 1fr;
  }

  .ms-package-card {
    padding: 32px 24px;
  }

  .ms-card-icon-wrapper {
    width: 64px;
    height: 64px;
  }

  .ms-card-icon-wrapper img {
    width: 34px;
    height: 34px;
  }
}

    :root {
      --ms-purple: #007a41ff;
      --ms-purple-light: rgba(58, 0, 122, 0.08);
      --ms-purple-gradient: linear-gradient(135deg, #3a007a 0%, #5a1a9a 100%);
      --ms-bg: #f8f7fc;
      --ms-white: #ffffff;
      --ms-muted: #656565;
      --ms-text: #1a1a2e;
      --ms-border: rgba(58, 0, 122, 0.1);
      --max-width: 1200px;
      --radius: 14px;
      --radius-sm: 8px;
      --gap: 32px;
      --container-pad: 24px;
      --shadow: 0 4px 24px rgba(58, 0, 122, 0.08);
      --shadow-hover: 0 8px 32px rgba(58, 0, 122, 0.12);
      --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      --placeholder-bg: #fbf7ff;
      --side-spacing: 96px;
    }

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

    body {
      font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      background: #ffffff;
      color: var(--ms-text);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
    }

    .ms-faq {
      background: var(--ms-bg);
      color: var(--ms-text);
      padding-bottom: 64px;
    }

    .ms-faq__hero {
      background: linear-gradient(to right, #21514B, #57BA91);
      color: #fff;
      padding: 40px var(--side-spacing);
      position: relative;
      overflow: hidden;
    }

    .ms-faq__hero::before {
      content: '';
      position: absolute;
      top: -50%;
      right: -10%;
      width: 400px;
      height: 400px;
      background: rgba(255, 255, 255, 0.03);
      border-radius: 50%;
      pointer-events: none;
    }

    .ms-faq__hero-inner {
      max-width: var(--max-width);
      display: block;
      align-items: center;
      margin: 0 auto;
      text-align: center;
      gap: 20px;
      flex-wrap: wrap;
      position: relative;
      z-index: 1;
    }

    .ms-faq__hero-title {
      font-size: clamp(1.5rem, 3vw, 2rem);
      font-weight: 700;
      line-height: 1.3;
    }

    .ms-faq__container {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr; /* Desktop balance */
  gap: var(--gap);
  padding: 40px var(--side-spacing);
  align-items: stretch;
}


    .ms-faq__left {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 16px;
      align-items: stretch;
    }

    .ms-faq__right {
      width: 100%; /* now follows grid */
      flex-shrink: 0;
      display: flex;
      align-items: stretch;
      overflow: hidden;
    }

    .ms-faq__right.has-top-strip {
      position: relative;
    }

    .ms-faq__right.has-top-strip::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: linear-gradient(to right, #21514B, #57BA91);
      border-radius: var(--radius) var(--radius) 0 0;
    }

    .ms-faq__image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: var(--radius);
      display: block;
      transform: none !important;
      transition: none !important;
    }

    .ms-faq__qa {
      background: var(--ms-white);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow: hidden;
      transition: var(--transition);
      align-self: flex-start;
      width: 100%;
      max-width: 100%;
    }

    .ms-faq__qa:hover {
      box-shadow: var(--shadow-hover);
    }

    .ms-faq__input {
      display: none;
    }

    .ms-faq__question {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 20px 24px;
      cursor: pointer;
      font-weight: 600;
      font-size: 1rem;
      color: var(--ms-text);
      transition: var(--transition);
      user-select: none;
      width: 100%;
      justify-content: space-between;
    }


    .ms-faq__dot {
  width: 14px;
  height: 14px;
  background: #57BA91;
  border-radius: 4px; /* slight rounding, still box-like */
  flex-shrink: 0;
}


    .ms-faq__qtext {
      flex: 1;
      color: #000000;
    }

    .ms-faq__arrow {
      width: 24px;
      height: 24px;
      flex-shrink: 0;
      transition: transform 0.3s ease;
      margin-left: auto;
    }

    .ms-faq__arrow svg {
      width: 100%;
      height: 100%;
      color: var(--ms-purple);
    }

    .ms-faq__input:checked + .ms-faq__question .ms-faq__arrow {
      transform: rotate(180deg);
    }

    .ms-faq__answer {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.4s ease, padding 0.3s ease;
      border-left: 4px solid transparent;
      margin-left: 28px; /* aligns nicely under the box */

    }

    .ms-faq__input:checked ~ .ms-faq__answer {
      max-height: 1000px;
      padding: 0 24px 20px 52px;
      border-left-color: #57BA91;
    }

    .ms-faq__answer p {
      color: var(--ms-muted);
      font-size: 0.95rem;
      line-height: 1.7;
      color: #000000;
    }

    @media (max-width: 1024px) {
  :root {
    --side-spacing: 48px;
  }

  .ms-faq__container {
    grid-template-columns: 1fr; /* Single column */
    padding: 32px var(--side-spacing);
  }

  .ms-faq__right {
    order: 2;
    width: 100%;
    max-height: 420px;
  }

  .ms-faq__left {
    order: 1;
  }
}


    @media (max-width: 768px) {
  :root {
    --side-spacing: 20px;
  }

  .ms-faq__hero {
    padding: 28px var(--side-spacing);
  }

  .ms-faq__container {
    padding: 28px var(--side-spacing);
    gap: 24px;
  }

  .ms-faq__question {
    padding: 14px 18px;
    font-size: 0.95rem;
  }

  .ms-faq__input:checked ~ .ms-faq__answer {
    padding: 0 18px 16px 40px;
  }

  .ms-faq__right {
    max-height: 360px;
  }
}
@media (max-width: 480px) {
  .ms-faq__right {
    max-height: 300px;
  }

  .ms-faq__question {
    gap: 10px;
  }

  .ms-faq__dot {
    width: 12px;
    height: 12px;
  }
}

/* ===============================
   REVIEW AVATAR – FINAL FIX
   (matches 2nd card exactly)
================================ */

/* card becomes positioning context */
/* =====================================
   REVIEW CARDS – UNIFIED AVATAR STYLE
   (same as FIRST card)
===================================== */

/* card becomes positioning context */
.medsole-review-card {
  position: relative;
}

/* avatar positioning for ALL cards */
.medsole-review-card .medsole-avatar {
  position: absolute;
  top: -40px;               /* same overlap as working first card */
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;

  width: 83px;
  height: 83px;
  border-radius: 50%;
  overflow: hidden;

  display: flex;
  align-items: center;
  justify-content: center;
  background: #1f6b57;      /* fallback */
}

/* avatar image stays perfect */
.medsole-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
/* =====================================
   ADD EXTRA TOP SPACE FOR BOTTOM REVIEWS
   (no layout change)
===================================== */

/* target ONLY bottom two review cards */
.medsole-review-card:nth-child(3),
.medsole-review-card:nth-child(4) {

  /* extra breathing space from top */
  
  margin-top: 60px;
}

/* OPTIONAL: thora aur neeche chahiye to */
.medsole-review-card:nth-child(3) .medsole-rating,
.medsole-review-card:nth-child(4) .medsole-rating {
  
}
.medsole-review-card .medsole-avatar {
  animation: none !important;
  transition: none !important;
  transform: translateX(-50%) !important; /* lock position */
}




/* ========================================
   SCOPED STYLES FOR MEDSOLE REVIEWS SECTION
   All styles are prefixed with .medsole- to prevent
   conflicts with other site elements (header, footer, etc.)
   ======================================== */

/* Screen reader only utility - scoped */
.medsole-reviews-section .medsole-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Reviews Section Container */
.medsole-reviews-section {
  padding: 4rem 0 5rem;
  background: linear-gradient(to right, #21514B, #57BA91);
  min-height: auto;
  box-sizing: border-box;
  font-family: 'Inter', sans-serif;
  line-height: 1.6;
}

.medsole-reviews-section *,
.medsole-reviews-section *::before,
.medsole-reviews-section *::after {
  box-sizing: border-box;
}

/* Container */
.medsole-reviews-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Section Header */
.medsole-reviews-header {
  text-align: center;
  margin-bottom: 4rem;
}

.medsole-reviews-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 34px;
  letter-spacing: 0.02em;
  color: #ffffff;
  margin: 0 0 0.5rem 0;
  padding: 0;
  line-height: 1.2;
}

.medsole-reviews-sub{
  font-family: 'Poppins';  /* 🔥 force Poppins */
  font-weight: 400;
  font-size: 0.9rem;
  color: #ffffff;
  letter-spacing: 0.08em;
  margin: 0;
  padding: 0;
}


/* Reviews Grid */
.medsole-reviews-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem;
  padding-top: 45px;
}

/* Review Card */
.medsole-review-card {
  background: #ffffff;
  border-radius: 12px;
  padding: calc(45px + 1rem) 1.25rem 1.75rem;
  text-align: center;
  position: relative;
  box-shadow: 0 6px 18px rgba(20, 20, 20, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  border: none;
}

.medsole-review-card:hover,
.medsole-review-card:focus-within {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(20, 20, 20, 0.12);
}

/* Avatar */
.medsole-avatar-wrap {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
}

.medsole-avatar {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #21514B;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  background-color: #21514B;
  transition: transform 0.2s ease;
}

.medsole-review-card:hover .medsole-avatar {
  transform: scale(1.03);
}

/* Avatar Initials Fallback */
.medsole-avatar-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #21514B, #57BA91);
  color: white;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 2rem;
}

/* Star Rating */
.medsole-rating {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  margin-bottom: 1rem;
}

.medsole-star {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.medsole-star path {
  fill: transparent;
  stroke: #21514B;
  stroke-width: 1.5;
  transition: fill 0.2s ease;
}

.medsole-star-filled path {
  fill: #21514B;
  stroke: #21514B;
}

/* Quote */
.medsole-quote {
  font-style: normal;
  color: #000000;
  line-height: 1.7;
  margin: 0 0 1.25rem 0;
  padding: 0 0.5rem;
  position: relative;
  flex-grow: 1;
  font-size: 1rem;
  border: none;
}

.medsole-quote::before {
  content: '"';
  font-family: Georgia, serif;
  font-size: 3rem;
  color: #21514B;
  opacity: 0.3;
  position: absolute;
  top: -0.75rem;
  left: -0.25rem;
  line-height: 1;
}

/* Author Info */
.medsole-author {
  font-size: 0.875rem;
  line-height: 1.5;
  padding-top: 1rem;
  border-top: 1px solid rgba(107, 127, 120, 0.15);
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.medsole-author-name {
  font-weight: 600;
  color: #21514B;
  font-size: 1rem;
}

.medsole-author-title {
  color: #555555;
  font-size: 0.85rem;
}

.medsole-author-company {
  color: #777777;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Responsive Design */
@media (max-width: 900px) {
  .medsole-reviews-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}

@media (max-width: 600px) {
  .medsole-reviews-section {
    padding: 3rem 0 4rem;
  }
  
  .medsole-reviews-header {
    margin-bottom: 3rem;
  }
  
  .medsole-review-card {
    padding: calc(45px + 0.75rem) 1rem 1.5rem;
  }
  
  .medsole-quote {
    font-size: 0.95rem;
  }
}

.logo-strip-heading{
  text-align:center;
  margin-bottom: 32px;
}

.logo-strip-heading h2{
  font-size: 36px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 8px;
}

.logo-strip-heading p{
  font-size: 16px;
  color: rgba(255,255,255,0.85);
  margin: 0;
}

    /* --------- Configurable vars --------- */
:root {
  --tile-size: 140px;         /* base tile size (square) */
  --tile-gap: 24px;           /* gap between tiles */
  --img-scale: 0.65;          /* logo scale inside frame (unused here but keep) */


  --set-count: 8;             /* number of originals in one set (match your HTML originals) */
  --set-gaps: calc(var(--set-count) - 1);


  --visible-count: 6;         /* <-- SHOW 6 logos at a time (your request) */
  --visible-gaps: calc(var(--visible-count) - 1);


  --scroll-duration: 22s;     /* animation duration (increase to slow, decrease to speed up) */


  /* colors */
  --left-green: #21514B;
  --right-mint: #57BA91;
  --viewport-fade-width: calc(var(--tile-size) + var(--tile-gap)); /* width of soft fade at edges */
}
.logo-strip {
  background: linear-gradient(to right, var(--left-green), var(--right-mint));
  /* keep padding so cards float above background */
  padding: 28px 0;
  box-sizing: border-box;
}


    /* --------- Viewport that shows exactly N tiles centered --------- */
.logo-viewport {
  width: min(100%, calc((var(--visible-count) * var(--tile-size)) + (var(--visible-gaps) * var(--tile-gap))));
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  padding: 18px 0;
  box-sizing: border-box;
}
.logo-viewport::before,
.logo-viewport::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--viewport-fade-width);
  pointer-events: none;
  z-index: 5;
}


    /* Container holding the full row (10 + duplicated 10) */
.logo-row {
  display: flex;
  align-items: center;
  gap: var(--tile-gap);
  flex-wrap: nowrap;
  will-change: transform;
  transform: translate3d(0,0,0); /* GPU acceleration */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.logo-row {
  --set-shift: calc((var(--set-count) * var(--tile-size)) + (var(--set-gaps) * var(--tile-gap)));
}


    /* Each tile: FIXED SQUARE size — never changes regardless of logo */
.logo-tile {
  width: var(--tile-size);
  height: var(--tile-size);
  min-width: var(--tile-size);
  min-height: var(--tile-size);
  flex: 0 0 var(--tile-size);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}


    /* Visual frame inside tile: FIXED SQUARE card */
.logo-frame {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 16px;
  background: #fff;
  padding: 18px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.06);
  box-sizing: border-box;
}
.logo-frame .logo-img {
  display: block;
  max-width: calc(var(--tile-size) * 0.85);  /* keep logos consistent */
  max-height: calc(var(--tile-size) * 0.85);
  object-fit: contain;
  object-position: center;
}




@keyframes scroll-left {
  0%   { transform: translate3d(0,0,0); }
  100% { transform: translate3d(calc(-1 * var(--set-shift)), 0, 0); }
}
@keyframes scroll-right {
  0%   { transform: translate3d(calc(-1 * var(--set-shift)), 0, 0); }
  100% { transform: translate3d(0,0,0); }
}


/* assign animations (LTR and RTL rows) */
.logo-row--ltr {
  animation: scroll-left var(--scroll-duration) linear infinite;
  animation-delay: 0s;
}
.logo-row--rtl {
  animation: scroll-right calc(var(--scroll-duration) + 4s) linear infinite;
  animation-delay: 0s;
}


/* micro-smoothing: ensure no rounding gaps by forcing hardware raster */
.logo-row,
.logo-row--ltr,
.logo-row--rtl {
  transform-origin: 0 0;
  will-change: transform;
  -webkit-transform: translate3d(0,0,0);
}


/* pause on hover for accessibility */
.logo-viewport:hover .logo-row,
.logo-viewport:focus-within .logo-row {
  animation-play-state: paused;
}


/* reduced motion respect */
@media (prefers-reduced-motion: reduce) {
  .logo-row--ltr, .logo-row--rtl {
    animation: none;
    transform: translate3d(0,0,0);
  }
}


/* ---------- RESPONSIVE ---------- */
@media (max-width:1200px) {
  :root { --tile-size: 120px; --tile-gap: 20px; --visible-count: 6; }
}
@media (max-width:900px) {
  :root { --tile-size: 110px; --tile-gap: 16px; --visible-count: 5; }
}
@media (max-width:768px) {
  :root { --tile-size: 100px; --tile-gap: 14px; --visible-count: 4; }
}
@media (max-width:480px) {
  :root { --tile-size: 90px; --tile-gap: 12px; --visible-count: 3; }
  .logo-frame { padding: 12px; border-radius: 12px; }
}

  .cred-cta-image-holder img {
    width: 120%;
    height: 120%;
    object-fit: contain; /* image poori dikhe, crop na ho */
    transform: scale(1.08); /* thora bara feel */
}

        /* ========================================
           CREDENTIALING CTA SECTION - SCOPED STYLES
           Prefix: cred-cta-
           This section is fully self-contained.
           No global overrides. Safe to add/remove.
           ======================================== */

        .cred-cta-section {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            box-sizing: border-box;
            padding: 60px 20px;
            width: 100%;
        }

        .cred-cta-section *,
        .cred-cta-section *::before,
        .cred-cta-section *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        .cta-center{
    width:100%;
    display:flex;
    justify-content:center;
}
.cta-button{
    width:220px;
}


        .cred-cta-wrapper {
            max-width: 1200px;
            margin: 0 auto;
        }

        .cred-cta-card {
            background: linear-gradient(to right, #21514B, #57BA91);
            border-radius: 24px;
            box-shadow: 0 8px 32px rgba(46, 125, 50, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
            padding: 48px 56px;
            display: flex;
            flex-wrap: wrap;
            align-items: stretch; /* ensures the right column can reach the bottom of the card */
            justify-content: space-between;
            gap: 40px;
            overflow: hidden;
        }

        /* Left Content Area */
        .cred-cta-content {
            flex: 1;
            min-width: 320px;
            max-width: 760px;
        }

        .cred-cta-heading {
            font-size: 2rem;
            font-weight: 800;
            color: #ffffffff;
            line-height: 1.28;
            margin-bottom: 16px;
            letter-spacing: -0.02em;
        }

        .cred-cta-heading .cred-cta-price {
            color: #57BA91;
            font-weight: 1200;
            padding: 0 0.2em;
            background-color: white;
            border-radius: 0.22em;
        }

        .cred-cta-heading .cred-cta-speed {
            color: #57BA91;
            font-weight: 1200;
            white-space: nowrap;
            padding: 0 0.2em;
            background-color: white;
            border-radius: 0.22em;
        }

        .cred-cta-description {
            font-size: 1.0625rem;
            color: #ffffffff;
            line-height: 1.65;
            margin-bottom: 28px;
            max-width: 660px;
        }

        .cred-cta-divider {
            width: 100%;
            max-width: 640px;
            height: 1px;
            background: white;
            border: none;
            margin-bottom: 28px;
        }

        .cred-cta-usp-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 22px;
        }

        .cred-cta-usp-item {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            min-width: 0;
        }

        .cred-cta-usp-icon {
            flex-shrink: 0;
            width: 26px;
            height: 26px;
            background: #ffffffff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 2px;
            box-shadow: 0 4px 12px rgba(46, 125, 50, 0.22);
        }

        .cred-cta-usp-icon svg {
            width: 18px;
            height: 18px;
            stroke: #57BA91;
            stroke-width: 3;
            fill: none;
        }

        .cred-cta-usp-text {
            flex: 1;
            min-width: 0;
        }

        .cred-cta-usp-title {
            font-size: 0.9rem;
            font-weight: 700;
            color: #ffffffff;
            margin-bottom: 3px;
            line-height: 1.4;
        }

        .cred-cta-usp-desc {
            font-size: 0.8125rem;
            color: #ffffffff;
            line-height: 1.55;
        }

        /* Right Action Area (Button + Image Holder only) */
        .cred-cta-action {
            display: flex;
            flex-direction: column;
            align-items: stretch; /* ensures button + image frame align perfectly */
            justify-content: flex-start;
            min-width: 300px;
            max-width: 380px;
            width: 100%;
            gap: 22px; /* places the image start roughly around the 3rd line of the H2 */
        }

        /*
           Image holder designed for a real .webp image.
           On desktop it visually starts around the 3rd line of the H2 (approx) and runs to the bottom.
           The button sits above; the holder consumes remaining height.
        */
        .cred-cta-image-holder {
            width: 100%;
            flex: 1;                 /* take remaining height in the right column */
            min-height: 320px;       /* gives a premium tall panel; stretches further when card is taller */
            border-radius: 18px;
            overflow: hidden;
            background: white;
            border: 1px solid rgba(46, 125, 50, 0.16);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
            display: flex;
            align-items: stretch;
            position: relative;
        }

        .cred-cta-image-holder img {
            width: 100%;
            height: 100%;
            object-fit: cover; /* change to 'contain' if you want to avoid any cropping */
            display: block;
        }
        .cred-cta-image-holder{
    position: relative;
    overflow: hidden;
}

/* MedSole green strip (background layer) */
.cred-cta-image-holder::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:30px;
    background:linear-gradient(to right, #21514B, #57BA91);
    border-radius:18px 18px 0 0;
    z-index:1;
}

/* Push image down so strip shows */
.cred-cta-image-holder img{
    position: relative;
    z-index:2;
    width:100%;
    height:100%;
    object-fit: cover;
    margin-top:64px;
    height: calc(100% - 64px);
}


        /* Subtle internal placeholder overlay (shows until you set a real file path like .webp) */
        .cred-cta-image-holder::after {
            content: "Place your .webp image here";
            position: absolute;
            inset: 14px;
            border-radius: 14px;
            border: 1px dashed rgba(46, 125, 50, 0.35);
            background: rgba(255, 255, 255, 0.30);
            color: rgba(27, 94, 32, 0.65);
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 18px;
            font-size: 0.9rem;
            line-height: 1.4;
            pointer-events: none;
        }

        /* Hide the placeholder once the image src is set to a normal URL (not a data: placeholder) */
        .cred-cta-image-holder:has(img[src]:not([src^="data:"]))::after {
            content: none;
        }
        /* Gradient behind the image */
        /* Subtle MedSole brand tint on left & right of image */
.cred-cta-image-holder::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            90deg,
            rgba(87,186,145,0.22) 0%,
            rgba(87,186,145,0.10) 12%,
            rgba(87,186,145,0.04) 22%,
            rgba(255,255,255,0) 35%,
            rgba(255,255,255,0) 65%,
            rgba(87,186,145,0.04) 78%,
            rgba(87,186,145,0.10) 88%,
            rgba(87,186,145,0.22) 100%
        );
    z-index:1;
    pointer-events:none;
    border-radius:18px;
}




        .cred-cta-button {
            display: inline-block;
            width: 100%;
            background: #21514B;
            color: #ffffff;
            font-size: 1.125rem;
            font-weight: 700;
            padding: 18px 26px;
            border-radius: 999px;
            text-decoration: none;
            cursor: pointer;
            border: none;
            transition: background 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
            box-shadow: 0 4px 16px rgba(46, 125, 50, 0.3);
            text-align: center;
            white-space: nowrap;
        }

        .cred-cta-button:hover {
    background: #ffffff;      /* white background */
    color: #57BA91;           /* green text on hover */
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(46, 125, 50, 0.4);
}

.cred-cta-button:active {
    transform: translateY(0);
}


        /* (Old SVG doc styles removed in favor of a real image holder) */

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

        /* Tablet */
        @media screen and (max-width: 992px) {
            .cred-cta-card {
                padding: 40px 36px;
                flex-direction: column;
                align-items: center;
            }

            .cred-cta-content {
                max-width: 100%;
            }

            .cred-cta-heading {
                font-size: 1.75rem;
            }

            .cred-cta-action {
                max-width: 520px;
                padding-top: 6px;
            }

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

        /* Mobile */
        @media screen and (max-width: 640px) {
            .cred-cta-section {
                padding: 40px 16px;
            }

            .cred-cta-card {
                padding: 32px 24px;
                border-radius: 20px;
            }

            .cred-cta-content {
                min-width: 100%;
                text-align: center;
            }

            .cred-cta-heading {
                font-size: 1.5rem;
            }

            .cred-cta-description {
                font-size: 1rem;
            }

            .cred-cta-divider {
                margin-left: auto;
                margin-right: auto;
            }

            .cred-cta-usp-grid {
                grid-template-columns: 1fr;
                gap: 18px;
            }

            .cred-cta-usp-item {
                text-align: left;
            }

            .cred-cta-action {
                min-width: 100%;
                max-width: 100%;
            }

            .cred-cta-image-holder {
                min-height: 240px; /* keeps it clean when stacked */
            }

            .cred-cta-button {
                width: 100%;
                padding: 16px 22px;
                font-size: 1.0625rem;
            }
        }

        /* ========================================
           DEMO PAGE STYLES
           (Not part of the CTA section)
           ======================================== */
        .demo-header, .demo-footer {
            background: #f5f5f5;
            padding: 20px;
            text-align: center;
            color: #666;
            font-family: sans-serif;
        }

        .demo-content {
            padding: 40px 20px;
            max-width: 1200px;
            margin: 0 auto;
            font-family: sans-serif;
            color: #333;
        }