:root {
    --theme-teal: #0D5C63;
    --theme-teal-dark: #0b3d40;
    --theme-orange: #DE6B1F;
    --theme-orange-dark: #d14d13;
    --text-dark: #333333;
    --bg-light: #F8F9FA;
}

body {
    font-family: 'Inter', sans-serif;
    color: var(--text-dark);
    font-size: 1.0625rem;
    /* 17px base body copy */
    line-height: 1.7;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Source Serif 4', serif;
    font-weight: 600;
    line-height: 1.25;
}

.text-teal {
    color: var(--theme-teal) !important;
}

.text-orange {
    color: var(--theme-orange) !important;
}

/* Buttons — Original styles preserved */
.btn-orange {
    background-color: var(--theme-orange);
    color: white;
    border-radius: 50px;
    padding: 10px 28px;
    font-weight: 600;
    border: none;
    transition: all 0.3s ease;
}
.btn-outline-orange {
    border: 2px solid var(--theme-orange);
    color: var(--theme-orange);
    background-color: transparent;
    border-radius: 50px;
    padding: 10px 32px;
    font-weight: 600;
    transition: all 0.3s ease;
}
.btn.btn-outline-orange:hover {
    background-color: var(--theme-orange);
    border-color: var(--theme-orange);
    color: #ffffff;
}
.btn.btn-orange:hover {
    background-color: var(--theme-orange-dark);
    color: white;
}

.btn.btn-orange:active {
    background-color: var(--theme-orange-dark) !important;
    color: #ffffff !important;
    transform: translateY(1px);
}

.btn-white-orange {
    background-color: #ffffff;
    color: var(--theme-orange);
    border-radius: 50px;
    padding: 10px 28px;
    font-weight: 600;
    border: none;
    transition: all 0.3s ease;
}

.btn.btn-white-orange:hover {
    background-color: #f0f0f0;
    color: var(--theme-orange-dark);
}

.btn.btn-white-orange:active {
    background-color: #e8e8e8 !important;
    color: var(--theme-orange-dark) !important;
    transform: translateY(1px);
}

/* Keyboard focus ring */
.btn.btn-orange:focus-visible,
.btn.btn-white-orange:focus-visible,
.btn.btn-outline-teal:focus-visible {
    box-shadow: 0 0 0 0.25rem rgba(222, 107, 31, 0.35) !important;
}

/* Top Bar Styles */
.top-bar {
    background-color: #ffffff;
}

.contact-phone-top {
    font-weight: 600;
    color: var(--theme-teal);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
}

.contact-phone-top:hover {
    color: var(--theme-teal-dark);
}

.contact-phone-top i {
    font-size: 1.1rem;
}

/* Portal Login Button */
.btn-outline-teal {
    color: var(--theme-teal);
    border: 1px solid var(--theme-teal);
    background-color: transparent;
    padding: 6px 16px;
    font-weight: 500;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.btn-outline-teal:hover {
    background-color: var(--theme-teal);
    color: #ffffff;
}

/* Navbar */
/* Smooth scrolling for anchor links + offset below sticky navbar */
html {
    scroll-behavior: smooth;
}

section[id] {
    scroll-margin-top: 90px;
}

.navbar {
    padding: 12px 0;
    background-color: #ffffff;
}

.navbar .navbar-nav {
    gap: 20px;
}

.navbar .nav-link {
    color: var(--theme-teal);
    font-weight: 500;
    font-size: 0.95rem;
    margin: 0;
    padding: 8px 0;
    /* Transparent bottom border for the underline hover/active effect */
    border-bottom: 2px solid transparent;
    transition: color 0.25s ease, border-color 0.25s ease;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus-visible {
    color: var(--theme-teal-dark);
    border-bottom-color: rgba(13, 92, 99, 0.35);
}

/* Active page link — underline style to match screenshot */
.navbar .nav-link.active {
    color: var(--theme-teal) !important;
    font-weight: 600;
    border-bottom-color: var(--theme-teal);
    background-color: transparent;
}

/* Navbar — Mobile / Tablet (collapsed menu) */
@media (max-width: 1199px) {
    .navbar .navbar-collapse {
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid #EEF2F3;
    }

    .navbar .navbar-nav {
        align-items: flex-start !important;
        gap: 10px;
    }

    .navbar .nav-link {
        padding: 8px 0;
        display: inline-block;
    }
}

/* Hero Section */
.hero-section {
    /* Replace the URL below with your actual background image path */
    background: linear-gradient(267.38deg, rgba(9, 71, 77, 0.0936) 48.95%, rgba(7, 47, 45, 0.36) 79.75%, rgba(11, 52, 50, 0.36) 98.36%),
        url('../images/banner-img.webp') no-repeat center center;
    ;
    background-size: cover;
    min-height: 700px;
    display: flex;
    align-items: center;
    color: white;
}

.hero-subtitle {
    font-size: 0.8125rem;
    letter-spacing: 1.5px;
    font-weight: 600;
    margin-bottom: 15px;
    color: #e0e0e0;
}

.hero-title {
    font-size: 3.8rem;
    line-height: 1.1;
    margin-bottom: 20px;
    font-weight: 600;
}

.hero-text {
    font-size: 1.125rem;
    margin-bottom: 40px;
    font-weight: 400;
    line-height: 1.7;
}

.hero-features {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 30px;
}

.hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 50px;
    padding: 8px 18px;
    font-size: 0.9rem;
    font-weight: 500;
    color: #ffffff;
    line-height: 1.4;
}

.hero-pill i {
    font-size: 1rem;
    color: #FFC59B;
}

.hero-disclaimer {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background-color: rgba(0, 0, 0, 0.22);
    border-left: 3px solid var(--theme-orange);
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 0.85rem;
    color: #E8EDED;
    line-height: 1.6;
    margin-top: 20px;
    max-width: 560px;
}

.hero-disclaimer i {
    color: #FFC59B;
    font-size: 0.95rem;
    margin-top: 3px;
}

.hero-disclaimer strong {
    color: #ffffff;
    font-weight: 600;
}

/* Hero Section - Responsive */
@media (max-width: 991px) {
    .hero-section {
        min-height: 620px;
        padding: 70px 0;
    }

    .hero-title {
        font-size: 3.2rem;
    }

    .hero-text {
        font-size: 1.0625rem;
    }
}

@media (max-width: 767px) {
    .hero-section {
        min-height: auto;
        padding: 90px 0 100px;
    }

    .hero-subtitle {
        font-size: 0.8rem;
        margin-bottom: 12px;
    }

    .hero-title {
        font-size:  2.625rem;
        line-height: 1.15;
        margin-bottom: 16px;
    }

    .hero-text {
        font-size: 1rem;
        margin-bottom: 30px;
    }

    .hero-features {
        gap: 8px;
        margin-top: 24px;
    }

    .hero-pill {
        font-size: 0.85rem;
        padding: 7px 14px;
    }

    .hero-disclaimer {
        font-size: 0.8rem;
        max-width: none;
        margin-top: 16px;
    }
}

/* Features Bar */
.features-bar {
    background-color: var(--bg-light);
    border-bottom: 1px solid #e9ecef;
    padding: 20px 0;
}

.feature-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    height: 100%;
}

.feature-icon-wrapper {
    background-color: var(--theme-teal);
    color: white;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.feature-item:hover .feature-icon-wrapper {
    background-color: var(--theme-teal-dark);
    transform: translateY(-3px);
}

.feature-title {
    color: var(--theme-teal);
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.35;
    margin: 0 0 6px;
}

.feature-desc {
    color: #5F6F70;
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0;
}

/* Dividers — desktop: 4 across */
.feature-col {
    border-right: 1px solid #DCDCDC;
}

.feature-col:last-child {
    border-right: none;
}

@media (max-width: 991px) {
    /* Tablet: 2 x 2 grid */
    .feature-col {
        border-right: none;
        border-bottom: 1px solid #DCDCDC;
        padding-bottom: 20px;
    }

    /* Last row of the 2 x 2 grid: no bottom border */
    .feature-col:nth-child(n+3) {
        border-bottom: none;
        padding-bottom: 0;
    }

    /* Left column keeps the vertical divider */
    .feature-col:nth-child(odd) {
        border-right: 1px solid #DCDCDC;
    }

    .hero-title {
        font-size: 3rem;
    }
}

@media (max-width: 767px) {
    .features-bar {
        padding: 35px 0;
    }

    /* Mobile: single column */
    .feature-col {
        border-right: none !important;
        border-bottom: 1px solid #DCDCDC;
        padding-bottom: 18px;
    }

    .feature-col:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }
}

/* What is EMC Section */
.emc-section {
    background-color: #ffffff;
}

.tag-line {
    color: var(--theme-teal);
    font-weight: 600;
    font-size: 0.8125rem;
    /* 13px section label */
    letter-spacing: 1.5px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.tag-line::before,
.tag-line::after {
    content: '•••';
    letter-spacing: 2px;
}

.emc-title {
    color: var(--theme-teal);
    font-size: 2.8rem;
    font-weight: 600;
    margin-bottom: 20px;
}

.emc-subtitle {
    font-size: 1.1rem;
    color: var(--theme-teal);
    font-weight: 600;
    margin-bottom: 30px;
}

/* Right Teal Card */
.teal-card {
    background-color: var(--theme-teal);
    border-radius: 12px;
    padding: 35px;
    color: white;
}

.teal-card-text {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 16px;
}

.teal-card-amount {
    color: #FFB27A;
    font-weight: 700;
    font-size: 1.05em;
}

@media (max-width: 767px) {
    .teal-card {
        padding: 28px 22px;
    }
}

/* EMC & PIP Explained Section */
.pip-explained-section {
    background-color: #ffffff;
    overflow: hidden;
}

/* Left Teal Banner */
.teal-banner-left {
    background-color: var(--theme-teal);
    color: white;
    border-top-right-radius: 60px;
    border-bottom-right-radius: 60px;
    padding: 80px 60px 80px 10%;
    /* Left padding uses % to act like container alignment */
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(13, 92, 99, 0.15);
}

.watermark-shield {
    position: absolute;
    right: -20px;
    bottom: -40px;
    font-size: 22rem;
    color: rgba(255, 255, 255, 0.04);
    line-height: 1;
    z-index: 1;
}

.banner-content {
    position: relative;
    z-index: 2;
    max-width: 600px;
    margin-left: auto;
}

.subtitle-orange {
    color: var(--theme-orange);
    font-weight: 600;
    letter-spacing: 1.5px;
    font-size: 0.85rem;
    margin-bottom: 15px;
}

.main-title {
    font-size:  2.625rem;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 15px;
}

.orange-divider {
    border-top: 3px solid var(--theme-orange);
    width: 45px;
    opacity: 1;
    margin: 20px 0;
}

.desc-text {
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1.6;
    margin-bottom: 25px;
    color: rgba(255, 255, 255, 0.9);
    max-width: 90%;
}

.clinician-disclaimer {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-top: 30px;
}

.clinician-disclaimer .shield-icon {
    font-size: 1.8rem;
    line-height: 1;
}

.clinician-disclaimer p {
    font-size: 0.85rem;
    margin: 0;
    color: rgba(255, 255, 255, 0.85);
    max-width: 350px;
    line-height: 1.5;
}

/* Right Side Cards */
.right-cards-wrapper {
    max-width: 550px;
    margin: 0 auto;
}

.pip-card {
    background-color: #ffffff;
    border-left: 6px solid var(--theme-teal);
    border-radius: 12px;
    padding: 30px 40px;
    display: flex;
    gap: 25px;
    margin-bottom: 25px;
    align-items: flex-start;
}

.icon-circle-light {
    background-color: rgba(13, 92, 99, 0.08);
    /* Very light teal */
    color: var(--theme-teal);
    width: 65px;
    height: 65px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    flex-shrink: 0;
}

.card-text-content h4 {
    color: var(--theme-teal);
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.card-text-content p {
    color: #555555;
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

/* Bottom Notice Banner */
.notice-banner {
    background-color: #F8F9FA;
    border-radius: 12px;
    padding: 20px 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.icon-circle-dark {
    background-color: var(--theme-teal);
    color: #ffffff;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.notice-banner p {
    color: var(--theme-teal);
    font-size: 1.05rem;
    font-weight: 500;
}

/* Responsive Adjustments */
@media (max-width: 991px) {
    .teal-banner-left {
        border-radius: 0;
        padding: 60px 20px;
    }

    .banner-content {
        max-width: 100%;
        margin: 0 auto;
    }

    .right-cards-wrapper {
        padding-top: 20px;
    }

    .pip-card {
        padding: 25px 20px;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .notice-banner {
        flex-direction: column;
        text-align: center;
    }
}
.timing-section {
            background-color: #F8FAFB;
        }

        .timing-title {
            color: var(--theme-teal);
            font-size: 2.8rem;
            font-weight: 600;
            margin-bottom: 0;
        }

        .timeline-card {
            background-color: #ffffff;
            border-radius: 16px;
            padding: 50px 40px;
            border: 1px solid rgba(0,0,0,0.03);
            box-shadow: 0 4px 20px rgba(0,0,0,0.02) !important;
        }

        .timeline-container {
            gap: 15px;
            position: relative;
        }

        /* 1. Base Gray Track */
        .animated-track-base {
            position: absolute;
            top: 45px;
            left: 85px;
            right: 85px;
            height: 2px;
            background-color: #E0E7E9;
            z-index: 1;
            transform: translateY(-50%);
        }

        /* 2. Orange Fill Track */
        .animated-track-fill {
            position: absolute;
            top: 45px;
            left: 85px;
            width: 0%;
            height: 2px;
            background-color: var(--theme-orange);
            z-index: 2;
            transform: translateY(-50%);
        }

        /* 3. The Moving Car */
        .moving-car {
            position: absolute;
            top: 45px;
            left: 85px;
            z-index: 5;
            color: var(--theme-orange);
            background-color: #ffffff; 
            padding: 0 6px;
            border-radius: 50%;
            transform: translate(-50%, -50%);
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 0 10px rgba(255,255,255,1);
            opacity: 0;
            transition: opacity 0.15s ease;
        }

        .moving-car i {
            font-size: 1.6rem;
        }

        /* --- STEP ICONS & GLOW EFFECTS --- */
        .step-wrapper {
            width: 170px;
            flex-shrink: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            z-index: 3;
        }

        .step-icon-outer {
            width: 90px;
            height: 90px;
            border-radius: 50%;
            border: 2px solid #EAEFEF;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 12px;
            background-color: #ffffff;
            transition: all 0.3s ease;
        }

        .step-icon-inner {
            width: 66px;
            height: 66px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.6rem;
            background-color: #F2F4F8;
            color: #6A7989;
            transition: all 0.3s ease;
        }

        .step-number {
            font-size: 0.7rem;
            font-weight: 800;
            padding: 4px 12px;
            border-radius: 20px;
            margin-bottom: 12px;
            letter-spacing: 0.5px;
            background-color: #F2F4F8;
            color: #6A7989;
            transition: all 0.3s ease;
        }

        .step-label {
            color: var(--theme-teal);
            font-weight: 600;
            font-size: 0.95rem;
            line-height: 1.4;
        }

        /* Active / Glow State for Steps */
        .step-active .step-icon-outer {
            border-color: var(--theme-teal);
            box-shadow: 0 0 15px rgba(13, 92, 99, 0.25);
        }
        .step-active .step-icon-inner, 
        .step-active .step-number {
            background-color: #E7F6F3;
            color: var(--theme-teal);
        }

        .btn-orange-cta {
            background-color: var(--theme-orange);
            color: #ffffff;
            border: none;
            border-radius: 30px;
            padding: 12px 28px;
            font-weight: 600;
            font-size: 0.95rem;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .btn-orange-cta:hover {
            background-color: #D65011;
            color: #ffffff;
            transform: translateY(-2px);
        }

        @media (max-width: 991px) {
            .timing-title { font-size: 2.2rem; }
            .timeline-container { gap: 40px; }
            .step-wrapper { width: 100%; max-width: 300px; margin: 0 auto; }
            .timeline-footer { text-align: center; }
            .animated-track-base, .animated-track-fill, .moving-car { display: none !important; }
            .step-icon-outer { border-color: var(--theme-teal); box-shadow: 0 0 15px rgba(13, 92, 99, 0.15); }
            .step-icon-inner, .step-number { background-color: #E7F6F3 !important; color: var(--theme-teal) !important; }
        }

/* Pathway Section styling */
.pathway-desc {
    color: var(--text-dark);
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 20px;
}

.pathway-card {
    background-color: #ffffff;
    border: 2px solid #F0F4F5;
    border-radius: 16px;
    padding: 25px 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pathway-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05) !important;
    border-color: #E0EAEB;
}

.pathway-icon-box {
    background-color: #F8FAF9;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--theme-orange);
    margin-bottom: 18px;
    border: 1px solid #EBEFEF;
}

.pathway-card-title {
    color: var(--theme-teal);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.pathway-card-desc {
    color: #666;
    font-size: 0.85rem;
    line-height: 1.5;
    margin-bottom: 20px;
    min-height: 50px;
}

.pathway-link {
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: gap 0.2s ease;
}

.pathway-link:hover {
    gap: 12px;
}

/* Container Section */
.process-section {
    position: relative;
    background-image: url(../images/how-its-wor-bg.webp);
    border-radius: 20px;
    overflow: hidden;
    margin: 40px auto;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Faint Geometric Background Pattern */
.process-bg-pattern {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        linear-gradient(60deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(-60deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 60px 104px;
    z-index: 1;
    opacity: 0.7;
}

.process-header {
    position: relative;
    z-index: 5;
    text-align: center;
}

.process-tag {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    margin-bottom: 8px;
}

.process-tag .dots {
    letter-spacing: 3px;
    margin: 0 8px;
}

.process-title {
    color: #ffffff;
    font-weight: 600;
    font-size:  2.625rem;
    letter-spacing: 0.5px;
}

/* SVG & Nodes Wrapper */
.network-wrapper {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    aspect-ratio: 1200 / 550;
    /* Preserves layout coordinates */
    z-index: 10;
}

.network-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* HTML Nodes Overlaid */
.process-node {
    position: absolute;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    z-index: 15;
    width: 160px;
}

.node-title {
    color: #ffffff;
    font-weight: 600;
    font-size: 1.1rem;
    line-height: 1.25;
    min-height: 2.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.node-icon {
    width: 55px;
    height: 55px;
    background-color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: var(--theme-orange);
    position: relative;
    transition: transform 0.2s ease;
}

/* Node hover description — desktop tooltip / mobile inline card */
.node-desc {
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    width: 230px;
    background-color: #ffffff;
    color: var(--text-dark);
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 0.85rem;
    line-height: 1.55;
    text-align: left;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
    z-index: 30;
    pointer-events: none;
}

.node-desc::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 50%;
    width: 10px;
    height: 10px;
    background-color: #ffffff;
    border-radius: 2px;
    transform: translateX(-50%) rotate(45deg);
}

.node-step {
    display: block;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--theme-orange);
    margin-bottom: 4px;
}

.process-node:hover .node-desc {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* Center Logo Container — PROPORTIONAL (wrapper ke saath scale hota hai)
   taake dots har screen size par EXACTLY ring ko touch karein.
   240px / 1200px = 20% — desktop par bilkul pehle jaisa (240px). */
.center-logo-container {
    position: absolute;
    left: 50%;
    top: 81.81%;
    /* Exactly maps to Y=450 in 550px viewBox */
    transform: translate(-50%, -50%);
    width: 20%;
    aspect-ratio: 1 / 1;
    height: auto;
    z-index: 20;
}

/* --- PERFECTLY SYNCHRONIZED ANIMATIONS (ALL on ONE 8s CSS timeline) ---
   Node Icon Glow + Traveling Dot + Center Brand Arc flash:
   sab kuch ek hi clock par start hota hai, is liye timing kabhi drift nahi kar sakti. */

/* 1. Node Icon Glows (ON exactly while its dot is in flight: departure -> arrival) */
@keyframes glow1 {

    0%,
    19.99% {
        box-shadow: 0 0 25px 6px rgba(255, 255, 255, 0.85);
        transform: scale(1.15);
    }

    20%,
    100% {
        box-shadow: 0 0 0 transparent;
        transform: scale(1);
    }
}

@keyframes glow2 {

    0%,
    19.99% {
        box-shadow: 0 0 0 transparent;
        transform: scale(1);
    }

    20%,
    39.99% {
        box-shadow: 0 0 25px 6px rgba(255, 255, 255, 0.85);
        transform: scale(1.15);
    }

    40%,
    100% {
        box-shadow: 0 0 0 transparent;
        transform: scale(1);
    }
}

@keyframes glow3 {

    0%,
    39.99% {
        box-shadow: 0 0 0 transparent;
        transform: scale(1);
    }

    40%,
    59.99% {
        box-shadow: 0 0 25px 6px rgba(255, 255, 255, 0.85);
        transform: scale(1.15);
    }

    60%,
    100% {
        box-shadow: 0 0 0 transparent;
        transform: scale(1);
    }
}

@keyframes glow4 {

    0%,
    59.99% {
        box-shadow: 0 0 0 transparent;
        transform: scale(1);
    }

    60%,
    79.99% {
        box-shadow: 0 0 25px 6px rgba(255, 255, 255, 0.85);
        transform: scale(1.15);
    }

    80%,
    100% {
        box-shadow: 0 0 0 transparent;
        transform: scale(1);
    }
}

@keyframes glow5 {

    0%,
    79.99% {
        box-shadow: 0 0 0 transparent;
        transform: scale(1);
    }

    80%,
    99.99% {
        box-shadow: 0 0 25px 6px rgba(255, 255, 255, 0.85);
        transform: scale(1.15);
    }

    100% {
        box-shadow: 0 0 0 transparent;
        transform: scale(1);
    }
}

.sync-glow-1 {
    animation: glow1 8s infinite linear;
}

.sync-glow-2 {
    animation: glow2 8s infinite linear;
}

.sync-glow-3 {
    animation: glow3 8s infinite linear;
}

.sync-glow-4 {
    animation: glow4 8s infinite linear;
}

.sync-glow-5 {
    animation: glow5 8s infinite linear;
}

/* 1b. Traveling Dots (CSS transform animations = SAME timeline as glows & flashes, zero drift)
   Dot 1: (150,180)->(491,399)  | Dot 2: (375,180)->(549,341)  | Dot 3: (600,180)->(600,330)
   Dot 4: (825,180)->(651,341)  | Dot 5: (1050,180)->(709,399)  */
@keyframes flowDot1 {

    0% {
        transform: translate(0px, 0px);
        opacity: 1;
    }

    19.99% {
        transform: translate(341px, 219px);
        opacity: 1;
    }

    20%,
    100% {
        transform: translate(341px, 219px);
        opacity: 0;
    }
}

@keyframes flowDot2 {

    0%,
    19.99% {
        transform: translate(0px, 0px);
        opacity: 0;
    }

    20% {
        transform: translate(0px, 0px);
        opacity: 1;
    }

    39.99% {
        transform: translate(174px, 161px);
        opacity: 1;
    }

    40%,
    100% {
        transform: translate(174px, 161px);
        opacity: 0;
    }
}

@keyframes flowDot3 {

    0%,
    39.99% {
        transform: translate(0px, 0px);
        opacity: 0;
    }

    40% {
        transform: translate(0px, 0px);
        opacity: 1;
    }

    59.99% {
        transform: translate(0px, 150px);
        opacity: 1;
    }

    60%,
    100% {
        transform: translate(0px, 150px);
        opacity: 0;
    }
}

@keyframes flowDot4 {

    0%,
    59.99% {
        transform: translate(0px, 0px);
        opacity: 0;
    }

    60% {
        transform: translate(0px, 0px);
        opacity: 1;
    }

    79.99% {
        transform: translate(-174px, 161px);
        opacity: 1;
    }

    80%,
    100% {
        transform: translate(-174px, 161px);
        opacity: 0;
    }
}

@keyframes flowDot5 {

    0%,
    79.99% {
        transform: translate(0px, 0px);
        opacity: 0;
    }

    80% {
        transform: translate(0px, 0px);
        opacity: 1;
    }

    99.99% {
        transform: translate(-341px, 219px);
        opacity: 1;
    }

    100% {
        transform: translate(-341px, 219px);
        opacity: 0;
    }
}

.flow-dot-1 {
    animation: flowDot1 8s infinite linear;
}

.flow-dot-2 {
    animation: flowDot2 8s infinite linear;
}

.flow-dot-3 {
    animation: flowDot3 8s infinite linear;
}

.flow-dot-4 {
    animation: flowDot4 8s infinite linear;
}

.flow-dot-5 {
    animation: flowDot5 8s infinite linear;
}

/* 2. Center Target Impact (Flashes orange EXACTLY at 0%, 25%, 50%, 75%) */
@keyframes pulseCenterImpact {

    /* Impact 5 (0% / 100%) */
    0% {
        stroke: var(--theme-orange);
        filter: drop-shadow(0 0 15px var(--theme-orange));
        transform: scale(1.08);
    }

    4.5% {
        stroke: #ffffff;
        filter: drop-shadow(0 0 0 transparent);
        transform: scale(1);
    }

    19.99% {
        stroke: #ffffff;
        filter: drop-shadow(0 0 0 transparent);
        transform: scale(1);
    }

    /* Impact 1 (20%) */
    20% {
        stroke: var(--theme-orange);
        filter: drop-shadow(0 0 15px var(--theme-orange));
        transform: scale(1.08);
    }

    24.5% {
        stroke: #ffffff;
        filter: drop-shadow(0 0 0 transparent);
        transform: scale(1);
    }

    39.99% {
        stroke: #ffffff;
        filter: drop-shadow(0 0 0 transparent);
        transform: scale(1);
    }

    /* Impact 2 (40%) */
    40% {
        stroke: var(--theme-orange);
        filter: drop-shadow(0 0 15px var(--theme-orange));
        transform: scale(1.08);
    }

    44.5% {
        stroke: #ffffff;
        filter: drop-shadow(0 0 0 transparent);
        transform: scale(1);
    }

    59.99% {
        stroke: #ffffff;
        filter: drop-shadow(0 0 0 transparent);
        transform: scale(1);
    }

    /* Impact 3 (60%) */
    60% {
        stroke: var(--theme-orange);
        filter: drop-shadow(0 0 15px var(--theme-orange));
        transform: scale(1.08);
    }

    64.5% {
        stroke: #ffffff;
        filter: drop-shadow(0 0 0 transparent);
        transform: scale(1);
    }

    79.99% {
        stroke: #ffffff;
        filter: drop-shadow(0 0 0 transparent);
        transform: scale(1);
    }

    /* Impact 4 (80%) */
    80% {
        stroke: var(--theme-orange);
        filter: drop-shadow(0 0 15px var(--theme-orange));
        transform: scale(1.08);
    }

    84.5% {
        stroke: #ffffff;
        filter: drop-shadow(0 0 0 transparent);
        transform: scale(1);
    }

    99.99% {
        stroke: #ffffff;
        filter: drop-shadow(0 0 0 transparent);
        transform: scale(1);
    }

    100% {
        stroke: var(--theme-orange);
        filter: drop-shadow(0 0 15px var(--theme-orange));
        transform: scale(1.08);
    }
}

.pulse-color-target {
    animation: pulseCenterImpact 8s infinite linear;
    transform-origin: 120px 120px;
    /* Scales exactly from center */
}

/* 3. Outer Ring — STATIC (koi glow/color-change nahi).
   Touch ka effect sirf brand arc (pulse-color-target) dikhata hai. */

/* Mobile Responsive Flowchart Fallback */
@media (max-width: 991px) {
    .network-wrapper {
        aspect-ratio: auto;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 30px;
        padding: 20px 0;
    }

    .network-svg {
        display: none;
    }

    .process-node {
        position: relative;
        left: auto !important;
        top: auto !important;
        transform: none;
        width: 100%;
    }

    /* Mobile: descriptions always visible below each step (no hover on touch) */
    .node-desc,
    .process-node:hover .node-desc {
        position: static;
        transform: none;
        width: 100%;
        max-width: 340px;
        margin: 14px auto 0;
        opacity: 1;
        visibility: visible;
    }

    .node-desc::before {
        display: none;
    }

    .center-logo-container {
        position: relative;
        left: auto !important;
        top: auto !important;
        transform: none;
        margin-top: 20px;
        width: 200px;
        height: 200px;
    }
}

/* Services Overview Section Styling */
.service-action-card {
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.04);
    border-radius: 12px;
    padding: 35px 25px;
    display: flex;
    flex-direction: column;
    text-align: left;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-action-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06) !important;
}

.service-action-title {
    color: var(--theme-teal);
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 15px;
}

.service-action-text {
    color: #4A4A4A;
    font-size: 0.85rem;
    line-height: 1.6;
    margin-bottom: 25px;
}

.btn-sm-custom {
    padding: 8px 24px;
    font-size: 0.85rem;
    font-weight: 600;
}

/* General Shared Typo classes */
.section-title {
    color: var(--theme-teal);
    font-size: 2.8rem;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 15px;
}

.section-subtitle {
    color: var(--theme-teal);
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.6;
    margin-bottom: 20px;
    max-width: 90%;
}

/* Team Section Styling */
.team-section {
    background-color: #ffffff;
}

.team-card {
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.03);
    border-radius: 16px;
    padding: 45px 30px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04) !important;
}

.team-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08) !important;
}

/* Custom Pure CSS Avatar */
.avatar-wrapper {
    position: relative;
    width: 75px;
    height: 75px;
    margin-bottom: 30px;
}

.avatar-circle {
    width: 100%;
    height: 100%;
    background-color: var(--theme-teal);
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 1px;
    position: relative;
    z-index: 2;
}

.avatar-ring {
    position: absolute;
    top: -6px;
    left: -6px;
    width: 87px;
    height: 87px;
    border: 2px solid var(--theme-teal);
    border-radius: 50%;
    z-index: 1;
}

.avatar-dot-orange {
    position: absolute;
    bottom: -2px;
    right: 8px;
    width: 10px;
    height: 10px;
    background-color: var(--theme-orange);
    border-radius: 50%;
    z-index: 3;
}

.avatar-dot-teal {
    position: absolute;
    bottom: 8px;
    right: -4px;
    width: 6px;
    height: 6px;
    background-color: var(--theme-teal);
    border-radius: 50%;
    z-index: 3;
}

/* Team Card Typography */
.team-name {
    color: var(--theme-teal);
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 12px;
}

.team-divider {
    width: 30px;
    height: 2px;
    background-color: var(--theme-orange);
    margin: 0 auto 15px auto;
}

.team-credentials {
    font-size: 0.8rem;
    font-weight: 600;
    color: #555555;
    margin-bottom: 12px;
}

.team-desc {
    font-size: 0.85rem;
    color: #777777;
    line-height: 1.6;
    margin-bottom: 0;
}

/* Bottom Pill Banner */
.team-banner {
    background-color: #EBF1F2;
    /* Exact light blue-gray from design */
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    padding: 14px 35px;
    gap: 15px;
}

.team-banner i {
    font-size: 1.25rem;
    color: var(--theme-teal);
}

.banner-separator {
    width: 1px;
    height: 24px;
    background-color: #CFDADA;
}

.banner-text {
    color: var(--theme-teal);
    font-size: 0.95rem;
    font-weight: 600;
}

/* Responsive Adjustments */
@media (max-width: 767px) {
    .team-banner {
        flex-direction: column;
        border-radius: 16px;
        padding: 20px;
        text-align: center;
    }

    .banner-separator {
        width: 50px;
        height: 1px;
    }
}

/* Compliance Section */
.compliance-list li {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    color: var(--theme-teal);
    font-size: 1.4rem;
    font-weight: 600;
}

.list-icon-orange {
    color: var(--theme-orange);
    font-size: 1.5rem;
}

.compliance-image-wrapper {
    position: relative;
    padding-top: 30px;
    /* Space for the floating badge */
    padding-right: 30px;
}

.floating-badge {
    position: absolute;
    top: 0;
    right: 0;
    background-color: #ffffff;
    border-radius: 8px;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    z-index: 2;
}

.badge-icon {
    background-color: #E7F0F2;
    color: var(--theme-teal);
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.badge-text strong {
    display: block;
    color: var(--theme-teal);
    font-size: 0.85rem;
    line-height: 1.2;
}

.badge-text span {
    color: #777;
    font-size: 0.7rem;
}

/* Physician Section */
.doctor-card {
    background-color: #ffffff;
    border: 1px solid #EAEAEA;
    border-radius: 16px;
    padding: 40px;
}

.clinical-label {
    color: var(--theme-orange);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.doctor-name {
    color: var(--theme-teal);
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 5px;
}

.doctor-desc {
    font-size: 0.95rem;
    color: #333;
    font-weight: 500;
    padding-bottom: 20px;
    border-bottom: 1px solid #EAEAEA;
    margin-bottom: 20px;
}

.doctor-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 15px;
    font-size: 0.9rem;
    color: var(--theme-teal);
    font-weight: 500;
    line-height: 1.4;
}

.doctor-list i {
    color: var(--theme-teal);
    font-size: 1.1rem;
    margin-top: 2px;
}

.side-card {
    border-radius: 16px;
    padding: 30px;
}

.light-card {
    background-color: #E7F0F2;
}

.dark-card {
    background-color: var(--theme-teal);
}

.icon-box-light {
    background-color: rgba(239, 94, 24, 0.15);
    /* light orange bg */
    width: 45px;
    height: 45px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.text-orange {
    color: var(--theme-orange) !important;
}

.side-card-title {
    color: var(--theme-teal);
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.side-card-desc {
    color: var(--theme-teal);
    font-size: 0.9rem;
    line-height: 1.5;
    font-weight: 500;
}

.text-white-50 {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Responsive */
@media (max-width: 767px) {
    .section-title {
        font-size: 2.2rem;
    }

    .compliance-image-wrapper {
        padding-right: 0;
    }

    .floating-badge {
        right: 15px;
        top: 15px;
    }

    .doctor-card {
        padding: 25px;
    }
}
/* =========================================
   Dual Services Section (ClearPoint + FirstCall)
   ========================================= */

.service-card-box {
    border-radius: 16px;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Light Blue Card (Left) */
.card-light-blue {
    background-color: #E7F0F2;
}

.card-icon-teal {
    color: var(--theme-teal);
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
}

.card-light-blue .service-card-heading {
    color: var(--theme-teal);
}

.service-card-subtitle-dark {
    color: #4A5B5C;
    font-weight: 500;
    font-size: 1.3rem;
    margin-bottom: 20px;
}

.service-card-text-dark {
    color: #556465;
    font-size: 1.05rem;
    line-height: 1.6;
    margin-bottom: 35px;
}

/* Dark Teal Card (Right) */
.card-dark-teal {
    background-color: var(--theme-teal);
}

.card-icon-white {
    color: #ffffff;
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
}

.card-dark-teal .service-card-heading {
    color: #ffffff;
}

.service-card-subtitle-light {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
    font-size: 1.3rem;
    margin-bottom: 20px;
}

.service-card-text-light {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.05rem;
    line-height: 1.6;
    margin-bottom: 35px;
}

/* Shared Typography & Buttons */
.service-card-heading {
    font-family: 'Source Serif 4', serif;
    font-weight: 600;
    font-size: 2.2rem;
    margin-bottom: 12px;
}

.btn-square-md {
    border-radius: 6px !important;
    font-weight: 600;
}

/* Responsive Adjustments */
@media (max-width: 991px) {
    .service-card-box {
        padding: 2.5rem;
    }
}

@media (max-width: 767px) {
    .service-card-box {
        padding: 2rem;
    }
    .service-card-heading {
        font-size: 1.8rem;
    }
}
/* Partner Form Section */
.partner-container {
    background-color: #E7F0F2;
    border-radius: 24px;
    padding: 50px;
}

.partner-desc {
    color: var(--theme-teal);
    font-size: 1.05rem;
    font-weight: 500;
    line-height: 1.6;
}

.social-icons {
    display: flex;
    gap: 12px;
}

.social-btn {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-color: transparent;
    border: 1px solid #D0DADB;
    color: var(--theme-teal);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: all 0.3s ease;
    text-decoration: none;
}

.social-btn:hover {
    background-color: #ffffff;
    border-color: #ffffff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.social-btn.whatsapp {
    color: #25D366;
}

.social-btn.whatsapp:hover {
    background-color: #25D366;
    color: white;
}

.contact-form-card {
    background-color: #ffffff;
    border-radius: 16px;
    padding: 40px;
}

.custom-input-group label {
    font-size: 0.7rem;
    font-weight: 600;
    color: #8D9A9B;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5px;
    display: block;
}

.custom-input {
    border: none;
    border-bottom: 1px solid #EAEAEA;
    border-radius: 0;
    padding: 8px 0;
    background-color: transparent;
    font-size: 0.95rem;
    color: var(--text-dark);
    box-shadow: none !important;
}

.custom-input::placeholder {
    color: #C4C4C4;
    font-weight: 400;
}

.custom-input:focus {
    border-bottom-color: var(--theme-teal);
    background-color: transparent;
}

/* Form validation states (Let's Connect) — underline style, no Bootstrap full-border */
.was-validated .custom-input:invalid {
    border-color: transparent;
    border-bottom-color: #dc3545;
    background-image: none;
    box-shadow: none;
}

.was-validated .custom-input:valid {
    border-color: transparent;
    border-bottom-color: var(--theme-teal);
    background-image: none;
    box-shadow: none;
}

.custom-input-group .invalid-feedback {
    font-size: 0.75rem;
    padding-top: 4px;
}

/* FAQ Accordion Section */
.custom-accordion .accordion-item {
    border: 1px solid #EAEAEA;
    border-radius: 50px !important;
    margin-bottom: 15px;
    overflow: hidden;
    background-color: #ffffff;
}

.custom-accordion .accordion-button {
    background-color: #ffffff;
    color: var(--theme-teal);
    font-weight: 600;
    font-size: 1.05rem;
    padding: 20px 30px;
    box-shadow: none !important;
    border-radius: 50px !important;
}

.custom-accordion .accordion-button::after {
    display: none;
    /* Hide default bootstrap arrow */
}

.custom-accordion .accordion-body {
    padding: 0 30px 25px 30px;
    color: #666;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Custom Plus/Cross Toggle Icon */
.faq-toggle-icon {
    width: 36px;
    height: 36px;
    background-color: var(--theme-teal);
    border-radius: 50%;
    position: relative;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.faq-toggle-icon::before,
.faq-toggle-icon::after {
    content: '';
    position: absolute;
    background-color: #ffffff;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 2px;
}

.faq-toggle-icon::before {
    width: 14px;
    height: 2px;
}

.faq-toggle-icon::after {
    width: 2px;
    height: 14px;
}

/* Rotate the + into an X when not collapsed */
.accordion-button:not(.collapsed) .faq-toggle-icon {
    transform: rotate(45deg);
}

/* Responsive */
@media (max-width: 991px) {
    .partner-container {
        padding: 30px 20px;
    }

    .contact-form-card {
        padding: 30px 20px;
    }

    .custom-accordion .accordion-button {
        padding: 15px 20px;
        font-size: 1rem;
    }
}

/* CTA Banner Section */
.cta-card {
    background-color: var(--theme-teal);
    border-radius: 24px;
    position: relative;
    overflow: hidden;
    min-height: 420px;
    display: flex;
    align-items: center;
}

.cta-content {
    padding: 60px 40px 60px 60px;
    color: #ffffff;
    position: relative;
    z-index: 2;
    width: 55%;
}

.cta-title {
    font-size: 2.6rem;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 15px;
}

.cta-desc {
    font-size: 1.05rem;
    font-weight: 400;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
    max-width: 450px;
    margin-bottom: 25px;
}

.tag-line-white {
    color: #ffffff;
    font-weight: 600;
    font-size: 0.8125rem;
    letter-spacing: 1.5px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.tag-line-white::before,
.tag-line-white::after {
    content: '•••';
    letter-spacing: 2px;
}

/* The Slanted Image overlay */
.cta-image-wrapper {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 55%;
    /* Polygon creates the slant: Top-left starts at 15%, bottom-left starts at 0% */
    clip-path: polygon(15% 0, 100% 0, 100% 100%, 0% 100%);
    z-index: 1;
}

.cta-bg-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.availability-badge {
    position: absolute;
    top: 30px;
    right: 40px;
    background-color: rgba(13, 92, 99, 0.9);
    /* Dark teal transparent */
    backdrop-filter: blur(4px);
    color: white;
    padding: 8px 18px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1.2;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.status-dot {
    width: 8px;
    height: 8px;
    background-color: #4CAF50;
    /* Green dot */
    border-radius: 50%;
    display: inline-block;
}

/* Footer Section */
.site-footer {
    background-color: #E7F0F2;
    padding: 80px 0 30px 0;
    color: #7A8B8C;
}

.footer-logo {
    height: 45px;
    object-fit: contain;
}

.footer-disclaimer-text {
    line-height: 1.7;
    font-size: 0.85rem;
    color: #7A8B8C;
}

.footer-heading {
    color: var(--text-dark);
    font-weight: 600;
    margin-bottom: 25px;
    font-size: 1rem;
}

.footer-links li {
    margin-bottom: 12px;
}

.footer-links a {
    color: #667272;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: var(--theme-orange);
}

.footer-socials {
    display: flex;
    gap: 12px;
}

.footer-socials a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background-color: #ffffff;
    border-radius: 50%;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    font-size: 1.1rem;
}

.footer-socials a:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.footer-bottom {
    border-top: 1px solid #DCDCDC;
    color: #999999;
    font-size: 0.85rem;
}

.legal-links a {
    color: #999999;
    text-decoration: none;
    margin: 0 5px;
    transition: color 0.3s ease;
}

.legal-links a:hover {
    color: var(--theme-teal);
}

/* Responsive Adjustments */
@media (max-width: 991px) {
    .cta-card {
        flex-direction: column;
        align-items: stretch;
    }

    .cta-content {
        width: 100%;
        padding: 40px 30px;
    }

    .cta-image-wrapper {
        position: relative;
        width: 100%;
        height: 350px;
        clip-path: none;
        /* Remove slant on mobile for better stacking */
    }

    .cta-title {
        font-size: 2.2rem;
    }
}


/* Section Spacing — shared vertical padding for all sections (equal top/bottom) */
.section-space {
    padding: 60px 0;
}

/* Responsive Section Spacing */
@media (max-width: 991px) {
    .section-space {
        padding: 50px 0;
    }
}

@media (max-width: 767px) {
    .section-space {
        padding: 30px 0;
    }
}
/* Standard Cards (Clinical Standards Section) */
.standard-card {
    background-color: #ffffff;
    border: 1px solid #F0F4F5;
    border-radius:  16px;
    padding:  30px 25px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.standard-card:hover {
    transform: translateY(-4px);
    box-shadow:  0 10px 25px rgba(0, 0, 0, 0.06) !important;
}

.standard-card-title {
    color: var(--theme-teal);
    font-size:  1.05rem;
    font-weight:  600;
    margin-bottom:  12px;
}

.standard-card-desc {
    color: #555555;
    font-size:  0.9rem;
    line-height:  1.6;
    margin:  0;
}

/* Office & Law Firm Benefit Lists */
.office-benefits li {
    display: flex;
    align-items: flex-start;
    gap:  12px;
    margin-bottom:  14px;
    color: var(--text-dark);
    font-size:  0.95rem;
    line-height:  1.5;
}

.office-benefits i {
    color: var(--theme-teal);
    font-size:  1.1rem;
    margin-top:  2px;
}

.office-benefit-note {
    background-color: rgba(13, 92, 99, 0.06);
    border-radius:  10px;
    padding:  14px 16px;
    color: var(--theme-teal);
    font-size:  0.9rem;
    font-weight:  500;
    display: flex;
    align-items: flex-start;
    gap:  10px;
    line-height:  1.5;
}

.law-benefits-card {
    background-color: #ffffff;
    border-radius:  16px;
    padding:  35px;
    box-shadow:  0 10px 30px rgba(0, 0, 0, 0.04) !important;
}

/* CTA Hours */
.cta-hours p {
    color: rgba(255, 255, 255, 0.9);
    font-size:  0.95rem;
    line-height:  1.6;
}

.cta-hours strong {
    color: #ffffff;
}

.cta-hours i {
    color: var(--theme-orange);
}

/* (Old .btn-outline-white removed — merged into .btn-outline-orange) */

/* Footer additions */
.footer-contact a {
    color: #667272;
    text-decoration: none;
    font-weight:  600;
    transition: color 0.3s ease;
}

.footer-contact a:hover {
    color: var(--theme-orange);
}

.footer-statement {
    border-top:  1px solid #DCDCDC;
}

.footer-statement p {
    color: #7A8B8C;
    font-size:  0.85rem;
    line-height:  1.7;
}

/* Team credentials list */
.team-list li {
    display: flex;
    align-items: flex-start;
    gap:  8px;
    font-size:  0.8rem;
    color: #555555;
    margin-bottom:  6px;
    line-height:  1.4;
}

.team-list li::before {
    content: '\2713';
    color: var(--theme-orange);
    font-weight:  700;
}

/* Teal card heading */
.emc-list-card-heading {
    color: #ffffff;
    font-size:  1.3rem;
    font-weight:  600;
    margin-bottom:  15px;
}
/* IT + Security Banner Section */
        .it-security-banner {
            /* Replace with your actual background image showing the globe/shield */
            background: url('../images/it-bg.webp') no-repeat center center;
            background-size: cover;
            min-height: 500px;
            display: flex;
            align-items: center;
            padding: 80px 0;
            position: relative;
        }

        /* Optional: Subtle dark overlay if your image is too bright */
        .it-security-banner::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0, 0, 0, 0.15);
            z-index: 1;
        }

        .it-security-banner .container {
            position: relative;
            z-index: 2;
        }

        /* Glassmorphism Card */
        .glass-card {
       background: rgba(255, 255, 255, 0.64);
            backdrop-filter: blur(12px);          /* Blurs the background behind it */
            -webkit-backdrop-filter: blur(12px);  /* Safari support */
            border: 1px solid rgba(255, 255, 255, 0.4);
            border-radius: 24px;
            padding: 50px 60px;
            text-align: center;
        }

        .it-banner-title {
            color: var(--theme-teal);
            font-size: 2.5rem;
            font-weight: 800;
            margin-bottom: 25px;
            font-family: 'Inter', sans-serif;
        }

        .it-banner-text {
            color: var(--theme-teal);
            font-size: 0.95rem;
            line-height: 1.6;
            margin-bottom: 0;
            font-weight: 500;
        }

        /* Responsive Adjustments */
        @media (max-width: 767px) {
            .glass-card {
                padding: 35px 25px;
                border-radius: 16px;
            }
            .it-banner-title {
                font-size: 2rem;
                margin-bottom: 20px;
            }
            .it-banner-text {
                font-size: 0.9rem;
            }
            .it-security-banner {
                min-height: 400px;
            }
        }
        /* Security Features Tabs Section */
        .security-tabs-section {
            background-color: #FAFCFC; /* Subtle off-white background */
        }

        /* Left Nav Pills Styling */
        .custom-v-pills .nav-link {
            display: flex;
            align-items: center;
            text-align: left;
            background-color: transparent;
            border-radius: 12px;
            padding: 15px 20px;
            margin-bottom: 8px;
            color: var(--theme-teal);
            font-weight: 700;
            transition: all 0.3s ease;
            border: none;
            width: 100%;
        }

        .custom-v-pills .nav-link:hover {
            background-color: rgba(13, 92, 99, 0.03);
        }

        .custom-v-pills .nav-link.active {
            background-color: rgba(222, 107, 31, 0.08); /* Light orange background (--theme-orange) */
        }

        .tab-num {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background-color: #EEF2F3;
            color: var(--theme-teal);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.85rem;
            font-weight: 800;
            margin-right: 18px;
            flex-shrink: 0;
            transition: all 0.3s ease;
        }

        .custom-v-pills .nav-link.active .tab-num {
            background-color: var(--theme-orange);
            color: #ffffff;
        }

        .tab-text {
            flex-grow: 1;
            font-size: 0.95rem;
            letter-spacing: 0.2px;
        }

        .tab-arrow {
            color: var(--theme-orange);
            font-size: 1.1rem;
            opacity: 0.7;
            transition: transform 0.3s ease, opacity 0.3s ease;
        }

        .custom-v-pills .nav-link.active .tab-arrow {
            opacity: 1;
            transform: translateX(3px);
        }

        /* Right Content Card Styling */
        .security-detail-card {
            background-color: var(--theme-teal);
            border-radius: 20px;
            padding: 50px;
            color: #ffffff;
            box-shadow: 0 15px 40px rgba(13, 92, 99, 0.15);
            position: relative;
            min-height: 380px; /* Prevents height jumping between tabs */
            display: flex;
            flex-direction: column;
            justify-content: center;
            animation: fadeInCard 0.4s ease forwards;
        }

        @keyframes fadeInCard {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .card-top-row {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 35px;
        }

        .icon-circle-teal {
            width: 55px;
            height: 55px;
            background-color: rgba(255, 255, 255, 0.12);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            color: #ffffff;
        }

        .card-number {
            font-size: 0.8rem;
            color: rgba(255, 255, 255, 0.6);
            font-weight: 600;
            letter-spacing: 1.5px;
        }

        .security-card-title {
            font-size: 2rem;
            font-weight: 700;
            margin-bottom: 20px;
            line-height: 1.25;
            letter-spacing: -0.5px;
        }

        .security-card-desc {
            color: rgba(255, 255, 255, 0.85);
            font-size: 0.95rem;
            line-height: 1.7;
            margin-bottom: 35px;
        }

        .orange-divider-bottom {
            width: 55px;
            height: 3px;
            background-color: var(--theme-orange);
            border-radius: 3px;

        }

        /* Responsive */
        @media (max-width: 991px) {
            .security-detail-card {
                padding: 40px 30px;
                min-height: auto;
            }
            .security-card-title {
                font-size: 1.75rem;
            }
        }

/* =====================================================
   GLOBAL RESPONSIVE OVERRIDES (appended last — wins over all)
   1) Horizontal scroll fix (mobile body main scroll)
   2) Fluid typography for all headings / text
   ===================================================== */

/* --- 1) Horizontal overflow guard ---
   IMPORTANT: overflow-x: hidden html/body pe position:sticky (fixed header) tod deta hai.
   Is liye 'clip' use ho raha hai — scroll rokta hai magar sticky navbar break nahi karta.
   Purane browsers clip support na karein to fallback 'hidden' rehta hai (cascade). */
html,
body {
    overflow-x: hidden; /* fallback */
    overflow-x: clip;   /* sticky-safe */
    max-width: 100%;
}

img,
svg,
video,
iframe {
    max-width: 100%;
}

.row,
.container,
.container-fluid {
    min-width: 0;
}

/* --- 2) Fluid typography (clamp = auto-scale between min & max) --- */
.hero-title {
    font-size: clamp(2rem, 5.2vw, 3.8rem);
}

.section-title,
.emc-title,
.timing-title {
    font-size: clamp(1.75rem, 4.5vw, 2.8rem);
}

.process-title {
    font-size: clamp(1.55rem, 3.8vw, 2.625rem);
}

.security-card-title {
    font-size: clamp(1.4rem, 3.5vw, 2rem);
}

.section-subtitle,
.emc-subtitle {
    font-size: clamp(1rem, 2.2vw, 1.1rem);
}

.doctor-name {
    font-size: clamp(1.35rem, 3vw, 1.8rem);
}

/* --- 3) Small mobile fine-tuning (≤ 576px) --- */
@media (max-width: 576px) {

    body {
        font-size: 1rem;
        line-height: 1.65;
    }

    h1,
    h2,
    h3,
    h4 {
        line-height: 1.2;
    }

    .hero-title {
        font-size: clamp(1.7rem, 8vw, 2rem);
    }

    .hero-text {
        font-size: 0.95rem;
    }
    .section-title,
    .emc-title,
    .timing-title {
        font-size: clamp(1.5rem, 6.5vw, 1.75rem);
    }

    .section-subtitle,
    .emc-subtitle {
        font-size: 0.95rem;
    }

    .process-title {
        font-size: clamp(1.35rem, 6vw, 1.55rem);
    }

    .security-card-title {
        font-size: clamp(1.25rem, 5.5vw, 1.4rem);
    }

    /* Inline-styled elements — need !important to scale on mobile */
    .emc-subtitle {
        font-size: 0.95rem !important;
    }

    .teal-card h3 {
        font-size: 1.45rem !important;
    }

    .teal-card-text {
        font-size: 0.95rem !important;
        margin-bottom: 18px !important;
    }

    /* it_security page — beat its inline stylesheet (body prefix = higher specificity) */
    body .security-card-title {
        font-size: clamp(1.25rem, 5.5vw, 1.4rem);
    }

    body .security-detail-card {
        padding: 28px 20px;
    }

    body .custom-v-pills .nav-link .tab-text {
        font-size: 0.88rem;
    }

    body .it-security-banner h1 {
        font-size: clamp(1.5rem, 6.5vw, 2rem);
    }

    .btn-orange,
    .btn-outline-orange,
    .btn-white-orange {
        padding: 9px 22px;
        font-size: 0.9rem;
    }

    .section-space {
        padding: 36px 0;
    }

    .hero-section {
        padding: 70px 0 80px;
    }

    /* Cards tighter on small screens */
    .teal-card {
        padding: 24px 18px;
    }

    .timeline-card {
        padding: 24px 16px;
    }

    .team-card {
        padding: 30px 20px;
    }

    .partner-container {
        padding: 24px 16px;
    }

    .cta-card {
        min-height: auto;
    }

    .service-card-box {
        padding: 1.5rem;
    }

    /* Top-bar / footer text slightly smaller */
    .contact-phone-top {
        font-size: 0.85rem;
    }

    .footer-heading {
        font-size: 1rem;
    }

    .footer-links a {
        font-size: 0.9rem;
    }

    .footer-statement p {
        font-size: 0.8rem;
    }

    .footer-bottom p {
        font-size: 0.8rem;
    }

    /* Feature bar single-column readability */
    .feature-title {
        font-size: 0.95rem;
    }

    .feature-desc {
        font-size: 0.85rem;
    }

    /* FAQ accordion text */
    .accordion-button {
        font-size: 0.95rem !important;
    }

    /* Let's Connect form heading */
    .contact-form-card h3 {
        font-size: 1.7rem !important;
    }
}