/*====================================================
 ECN PREMIUM UI
 PART 1
====================================================*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

:root{

--primary:#ef4444;
--primary-dark:#dc2626;
--secondary:#0ea5e9;

--bg:#07111f;
--bg2:#0d1728;

--glass:rgba(255,255,255,.06);
--glass-border:rgba(255,255,255,.08);

--text:#ffffff;
--muted:#94a3b8;

--card:#121d2d;

--shadow:0 20px 60px rgba(0,0,0,.35);

--radius:18px;

}

/*========================*/

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

html{
scroll-behavior:smooth;
}

body{

font-family:'Inter',sans-serif;

background:
radial-gradient(circle at top left,#1d4ed8 0%,transparent 35%),
radial-gradient(circle at bottom right,#7f1d1d 0%,transparent 35%),
linear-gradient(135deg,#06101d,#0b1628,#06101d);

color:var(--text);

overflow-x:hidden;

min-height:100vh;

}

/*========================
Background Glow
========================*/

body::before{

content:"";

position:fixed;

left:-250px;
top:-250px;

width:700px;
height:700px;

background:
radial-gradient(circle,
rgba(59,130,246,.18),
transparent 70%);

filter:blur(80px);

z-index:-2;

animation:move1 18s infinite alternate;

}

body::after{

content:"";

position:fixed;

right:-250px;
bottom:-250px;

width:650px;
height:650px;

background:
radial-gradient(circle,
rgba(239,68,68,.18),
transparent 70%);

filter:blur(80px);

z-index:-2;

animation:move2 20s infinite alternate;

}

@keyframes move1{

to{

transform:translate(160px,120px);

}

}

@keyframes move2{

to{

transform:translate(-160px,-120px);

}

}

/*========================
Scrollbar
========================*/

::-webkit-scrollbar{

width:8px;

}

::-webkit-scrollbar-thumb{

background:#ef4444;
border-radius:20px;

}

::-webkit-scrollbar-track{

background:#09111f;

}

/*====================================================
 NAVBAR
====================================================*/

.navbar{

width:94%;

max-width:1450px;

margin:18px auto;

padding:14px 24px;

display:grid;

grid-template-columns:240px 1fr 220px;

align-items:center;

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

backdrop-filter:blur(24px);

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

border-radius:18px;

box-shadow:0 15px 40px rgba(0,0,0,.30);

position:relative;

z-index:10000;

}

/*========================
Logo
========================*/


.ecn-logo {
    height: 60px;
    width: auto;
    max-width: 220px;
    object-fit: contain;
    display: block;
}


/*========================
CENTER NAV
========================*/

.nav-right{

display:flex;

justify-content:center;

align-items:center;

gap:14px;

}


/* =====================================================
   ECN — CORPORATE NATIONAL HELPLINES
   Premium Healthcare Navigation Dropdown
===================================================== */

#helplineDropdown {
    position: relative;
    display: inline-flex;
    align-items: center;
    font-family: Inter, -apple-system, BlinkMacSystemFont,
                 "Segoe UI", sans-serif;
    z-index: 1000;
}

/* ================= TRIGGER BUTTON ================= */

#helplineDropdown .dropdown-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 230px;
    height: 44px;
    padding: 0 40px;

    border: 1px solid #dbe3ef;
    border-radius: 9px;

    background: #ffffff;
    color: #1e293b;

    font-size: 12.5px;
    font-weight: 650;
    letter-spacing: -0.1px;

    cursor: pointer;

    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);

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

#helplineDropdown .dropdown-btn:hover,
#helplineDropdown.active .dropdown-btn {
    border-color: #1D4ED8;
    box-shadow: 0 0 0 3px rgba(29, 78, 216, .08);
}

#helplineDropdown .dropdown-btn:focus-visible {
    outline: 3px solid rgba(29, 78, 216, .22);
    outline-offset: 3px;
}

/* Green availability indicator */

#helplineDropdown .status-dot {
    position: absolute;
    left: 16px;

    width: 7px;
    height: 7px;

    border-radius: 50%;
    background: #16a34a;

    box-shadow: 0 0 0 3px rgba(22, 163, 74, .10);
}

/* Chevron */

#helplineDropdown .arrow {
    position: absolute;
    right: 15px;

    color: #64748b;
    font-size: 10px;

    transition: transform .22s ease, color .22s ease;
}

#helplineDropdown.active .arrow {
    transform: rotate(180deg);
    color: #1D4ED8;
}

/* ================= DROPDOWN PANEL ================= */

#helplineDropdown .dropdown-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;

    width: 340px;
    max-width: calc(100vw - 24px);
    box-sizing: border-box;

    padding: 8px;

    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;

    box-shadow:
        0 16px 40px rgba(15, 23, 42, .12),
        0 3px 10px rgba(15, 23, 42, .04);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

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

    transition: opacity .2s ease,
                transform .2s ease,
                visibility .2s ease;

    z-index: 99999;
}

#helplineDropdown.active .dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

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

/* ================= PANEL HEADER ================= */

#helplineDropdown .dropdown-title {
    padding: 12px 12px 14px;
    margin-bottom: 4px;

    border-bottom: 1px solid #edf1f7;
}

#helplineDropdown .dropdown-title h4 {
    margin: 0 0 5px;

    color: #0f172a;
    font-size: 14px;
    font-weight: 750;
    letter-spacing: -.3px;
    line-height: 1.4;
}

#helplineDropdown .dropdown-title p {
    margin: 0;

    color: #64748b;
    font-size: 11.5px;
    font-weight: 400;
    line-height: 1.5;
}

/* ================= HELPLINE ROWS ================= */

#helplineDropdown .dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    min-height: 64px;
    box-sizing: border-box;
    padding: 10px 11px;
    margin-top: 3px;

    border: 1px solid transparent;
    border-radius: 8px;

    background: #ffffff;
    text-decoration: none;

    transition: background .18s ease,
                border-color .18s ease;
}

#helplineDropdown .dropdown-item:hover {
    background: #f5f8ff;
    border-color: #e1eaff;
}

#helplineDropdown .dropdown-item:focus-visible {
    outline: 2px solid #1D4ED8;
    outline-offset: 2px;
}

/* Left-side content */

#helplineDropdown .dropdown-item .left {
    display: flex;
    align-items: center;
    gap: 11px;

    min-width: 0;
}

/* ================= ICON CONTAINERS ================= */

#helplineDropdown .dropdown-item .icon {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 38px;
    width: 38px;
    height: 38px;

    border-radius: 9px;
    font-size: 15px;

    transition: background .18s ease,
                color .18s ease;
}

/* Professional, restrained icon colours */

#helplineDropdown .icon.red {
    background: #fff1f2;
    color: #e11d48;
}

#helplineDropdown .icon.green {
    background: #ecfdf5;
    color: #059669;
}

#helplineDropdown .icon.blue {
    background: #eff6ff;
    color: #1D4ED8;
}

#helplineDropdown .icon.orange {
    background: #fff7ed;
    color: #ea580c;
}

/* Hover icon treatment */

#helplineDropdown .dropdown-item:hover .icon.red {
    background: #ffe4e6;
}

#helplineDropdown .dropdown-item:hover .icon.green {
    background: #d1fae5;
}

#helplineDropdown .dropdown-item:hover .icon.blue {
    background: #dbeafe;
}

#helplineDropdown .dropdown-item:hover .icon.orange {
    background: #ffedd5;
}

/* ================= HELPLINE TEXT ================= */

#helplineDropdown .dropdown-item h5 {
    margin: 0 0 4px;

    color: #1e293b;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.35;
    letter-spacing: -.1px;
}

#helplineDropdown .dropdown-item small {
    display: block;

    color: #64748b;
    font-size: 10.5px;
    font-weight: 400;
    line-height: 1.45;
}

/* Helpline number */

#helplineDropdown .dropdown-item > span {
    flex-shrink: 0;
    margin-left: 8px;

    color: #1D4ED8;
    font-size: 15px;
    font-weight: 750;
    letter-spacing: .1px;
    font-variant-numeric: tabular-nums;
}

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

@media (max-width: 480px) {
    #helplineDropdown .dropdown-btn {
        width: 215px;
        height: 42px;
    }

    #helplineDropdown .dropdown-menu {
        width: 320px;
        max-width: calc(100vw - 24px);
    }

    #helplineDropdown .dropdown-item {
        min-height: 60px;
        padding: 9px;
    }
}

/* ================= ACCESSIBILITY ================= */

@media (prefers-reduced-motion: reduce) {
    #helplineDropdown *,
    #helplineDropdown *::before,
    #helplineDropdown *::after {
        transition: none !important;
    }
}

/* =========================================================
   ECN SIGN IN BUTTON
========================================================= */

.btn-signin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    height: 42px;
    padding: 0 18px;

    border: 1px solid #dbe1e8;
    border-radius: 8px;

    background: #ffffff;
    color: #0f172a;

    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;

    text-decoration: none;
    white-space: nowrap;

    box-shadow:
        0 2px 6px rgba(15, 23, 42, 0.04);

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

.btn-signin i {
    font-size: 11px;

    transition:
        transform 0.2s ease;
}

/* Hover */

.btn-signin:hover {
    background: #0b0f19;
    color: #ffffff;

    border-color: #0b0f19;

    transform: translateY(-1px);

    box-shadow:
        0 6px 16px rgba(15, 23, 42, 0.15);
}

.btn-signin:hover i {
    transform: translateX(3px);
}

/* Click */

.btn-signin:active {
    transform: translateY(0);

    box-shadow:
        0 3px 8px rgba(15, 23, 42, 0.12);
}

/* Keyboard accessibility */

.btn-signin:focus-visible {
    outline: 2px solid #ef4444;
    outline-offset: 3px;
}

.theme-toggle{

width:42px;
height:42px;

border:none;

border-radius:50%;

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

color:white;

cursor:pointer;

transition:.3s;

}

.theme-toggle:hover{

transform:rotate(180deg);

background:#0ea5e9;

}

/*========================
LIGHT MODE
========================*/

body.light{

background:#f5f8fd;

color:#111827;

}

body.light .navbar{

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

}

body.light .btn-signin{

background:#ffffff;

color:#111827;

border:1px solid #dbe4ef;

}

body.light .theme-toggle{

background:#ffffff;

color:#111827;

}

body.light .dropdown-menu{

background:#ffffff;

}

body.light .dropdown-card:hover{

background:#f4f7fb;

}

/*====================================================
 ECN PREMIUM UI
 PART 2
 HERO SECTION
====================================================*/

.hero-container{

    width:100%;

    padding:70px 6% 50px;

}

.hero-content{

    max-width:1400px;

    margin:auto;

    display:grid;

    grid-template-columns:1.2fr .8fr;

    gap:60px;

    align-items:center;

}

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

.hero-left{

    animation:fadeLeft .8s ease;

}

.live-tag{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:8px 18px;

    border-radius:40px;

    background:rgba(239,68,68,.12);

    border:1px solid rgba(239,68,68,.25);

    color:#ff6b6b;

    font-size:12px;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:28px;

}

.hero-title{

    font-size:64px;

    font-weight:900;

    line-height:1.05;

    margin-bottom:24px;

}

.hero-title .highlight{

    background:linear-gradient(90deg,#ffffff,#38bdf8,#ef4444);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

.hero-description{

    font-size:17px;

    line-height:1.8;

    color:#aab8c8;

    max-width:640px;

    margin-bottom:36px;

}

/*====================================================
 BUTTONS
====================================================*/

.action-tabs{

    display:flex;

    gap:16px;

    flex-wrap:wrap;

    margin-bottom:35px;

}

.tab-btn{

    padding:15px 26px;

    border:none;

    border-radius:50px;

    cursor:pointer;

    font-size:14px;

    font-weight:700;

    display:flex;

    align-items:center;

    gap:10px;

    transition:.3s;

}

.tab-btn:hover{

    transform:translateY(-4px);

}

.btn-danger{

    background:linear-gradient(135deg,#ef4444,#dc2626);

    color:#fff;

    box-shadow:0 15px 35px rgba(239,68,68,.35);

}

.btn-light{

    background:#ffffff;

    color:#111827;

}

.btn-outline{

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

    color:#fff;

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

}

.btn-outline:hover{

    border-color:#38bdf8;

}

/*====================================================
 METRICS
====================================================*/

.hero-metrics{

    display:flex;

    flex-wrap:wrap;

    gap:14px;

    margin-top:15px;

}

.hero-metrics span{

    display:flex;

    align-items:center;

    gap:8px;

    padding:11px 16px;

    border-radius:40px;

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

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

    color:#d2d8e4;

    font-size:13px;

}

.hero-metrics i{

    color:#38bdf8;

}

.charge-disclaimer{

    margin-top:14px;

    color:#94a3b8;

    font-size:12px;

}

/*====================================================
 RIGHT COLUMN
====================================================*/

.hero-right{

    display:flex;

    justify-content:flex-end;

    animation:fadeRight .8s ease;

}

/*====================================================
 PREMIUM VIRTUAL ER CARD
====================================================*/

.virtual-er-card{

    width:100%;

    max-width:420px;

    background:rgba(16,24,40,.65);

    backdrop-filter:blur(18px);

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

    border-radius:20px;

    padding:28px;

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

    transition:.35s;

    position:relative;

    overflow:hidden;

}

.virtual-er-card:hover{

    transform:translateY(-6px);

    box-shadow:0 35px 80px rgba(0,0,0,.45);

}

.virtual-er-card::before{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    right:-60px;

    top:-60px;

    border-radius:50%;

    background:rgba(59,130,246,.12);

}

.virtual-er-card::after{

    content:"";

    position:absolute;

    width:140px;

    height:140px;

    left:-40px;

    bottom:-50px;

    border-radius:50%;

    background:rgba(239,68,68,.10);

}

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

.card-header{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:8px 16px;

    border-radius:30px;

    background:rgba(239,68,68,.12);

    color:#ff6b6b;

    font-size:11px;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:20px;

}

.virtual-er-card h3{

    font-size:28px;

    line-height:1.3;

    margin-bottom:14px;

}

.card-desc{

    font-size:14px;

    color:#aab8c8;

    line-height:1.7;

    margin-bottom:22px;

}

.features-list{

    list-style:none;

    display:flex;

    flex-direction:column;

    gap:12px;

    margin-bottom:26px;

}

.features-list li{

    display:flex;

    align-items:flex-start;

    gap:10px;

    padding:12px;

    border-radius:12px;

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

    font-size:13px;

    color:#dbe4ef;

    transition:.25s;

}

.features-list li:hover{

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

}

.features-list i{

    color:#22c55e;

    margin-top:2px;

}

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

.card-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    width: 100%;
}

/*====================================================
 COMMON BUTTON STYLE
====================================================*/

.card-actions .btn-whatsapp,
.card-actions .btn-book {
    width: 100%;
    min-height: 46px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    padding: 12px 16px;

    border-radius: 8px;
    box-sizing: border-box;

    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;

    text-decoration: none;
    cursor: pointer;

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

/*====================================================
 WHATSAPP BUTTON
====================================================*/

.card-actions .btn-whatsapp {
    background: #25D366;
    color: #ffffff;
    border: 1px solid #25D366;
}

.card-actions .btn-whatsapp i {
    font-size: 19px;
    line-height: 1;
}

.card-actions .btn-whatsapp:hover {
    background: #1ebe5d;
    border-color: #1ebe5d;
    color: #ffffff;

    transform: translateY(-1px);

    box-shadow: 0 5px 15px rgba(37, 211, 102, 0.22);
}

/*====================================================
 BOOK BUTTON
====================================================*/

.card-actions .btn-book {
    background: #ffffff;
    color: #2563eb;
    border: 1px solid #2563eb;
}

.card-actions .btn-book:hover {
    background: #2563eb;
    border-color: #2563eb;
    color: #ffffff;

    transform: translateY(-1px);

    box-shadow: 0 5px 15px rgba(37, 99, 235, 0.18);
}

/*====================================================
 ACTIVE
====================================================*/

.card-actions .btn-whatsapp:active,
.card-actions .btn-book:active {
    transform: translateY(0);
}

/*====================================================
 MOBILE
====================================================*/

@media (max-width: 480px) {

    .card-actions {
        grid-template-columns: 1fr;
        gap: 10px;
    }

}
/*====================================================
 ANIMATION
====================================================*/

@keyframes fadeLeft{

    from{

        opacity:0;

        transform:translateX(-50px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

@keyframes fadeRight{

    from{

        opacity:0;

        transform:translateX(50px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

/*====================================================
 ECN PREMIUM UI
 PART 3
====================================================*/

/*==============================
 FLOATING SOS BUTTON
==============================*/

.floating-sos{

    position:fixed;

    left:30px;

    bottom:30px;

    width:72px;

    height:72px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-direction:column;

    gap:4px;

    background:linear-gradient(135deg,#ef4444,#b91c1c);

    color:#fff;

    font-size:14px;

    font-weight:800;

    cursor:pointer;

    z-index:99999;

    box-shadow:
    0 20px 50px rgba(239,68,68,.45);

    transition:.30s;

    animation:pulseSOS 2s infinite;

}

.floating-sos i{

    font-size:22px;

}

.floating-sos:hover{

    transform:scale(1.08);

}

@keyframes pulseSOS{

0%{

box-shadow:
0 0 0 0 rgba(239,68,68,.45);

}

70%{

box-shadow:
0 0 0 24px rgba(239,68,68,0);

}

100%{

box-shadow:
0 0 0 0 rgba(239,68,68,0);

}

}

/*==============================
 HOVER EFFECTS
==============================*/

button{

transition:.30s ease;

}

button:active{

transform:scale(.96);

}

a{

text-decoration:none;

color:inherit;

transition:.30s;

}

img{

display:block;

max-width:100%;

}

/*==============================
 LIGHT MODE
==============================*/

body.light{

background:#f4f7fb;

color:#111827;

}

body.light::before,
body.light::after{

display:none;

}

body.light .hero-title{

color:#111827;

}

body.light .hero-description{

color:#475569;

}

body.light .live-tag{

background:#ffecec;

border:1px solid #fecaca;

}

body.light .hero-metrics span{

background:#ffffff;

color:#1f2937;

border:1px solid #dbe4ef;

}

body.light .btn-outline{

background:#ffffff;

border:1px solid #dbe4ef;

color:#111827;

}

body.light .virtual-er-card{

background:#ffffff;

border:1px solid #dbe4ef;

box-shadow:
0 18px 45px rgba(0,0,0,.08);

}

body.light .card-desc{

color:#475569;

}

body.light .features-list li{

background:#f8fafc;

color:#1f2937;

}

body.light .btn-book{

color:#111827;

border:1px solid #dbe4ef;

}

body.light .btn-book:hover{

color:#ffffff;

}

body.light .theme-toggle{

background:#ffffff;

color:#111827;

}

body.light .floating-sos{

box-shadow:
0 18px 45px rgba(239,68,68,.30);

}

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

@media(max-width:1200px){

.hero-content{

grid-template-columns:1fr;

gap:50px;

}

.hero-right{

justify-content:center;

}

.virtual-er-card{

max-width:520px;

}

}

@media(max-width:992px){

.navbar{

grid-template-columns:1fr;

gap:20px;

text-align:center;

padding:20px;

}

.logo{

justify-content:center;

}

.nav-right{

justify-content:center;

flex-wrap:wrap;

}

.hero-container{

padding:50px 30px;

}

.hero-title{

font-size:48px;

}

.action-tabs{

justify-content:center;

}

.card-actions{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

.hero-container{

padding:40px 20px;

}

.hero-title{

font-size:38px;

line-height:1.15;

}

.hero-description{

font-size:15px;

}

.hero-metrics{

flex-direction:column;

align-items:flex-start;

}

.hero-metrics span{

width:100%;

}

.action-tabs{

flex-direction:column;

}

.tab-btn{

width:100%;

justify-content:center;

}

.virtual-er-card{

padding:22px;

}

.virtual-er-card h3{

font-size:24px;

}

.dropdown-menu{

width:260px;

left:50%;

transform:translateX(-50%);

}

.floating-sos{

width:64px;

height:64px;

left:18px;

bottom:18px;

font-size:12px;

}

}

@media(max-width:480px){

.hero-title{

font-size:30px;

}

.live-tag{

font-size:10px;

}

.logo{

flex-direction:column;

text-align:center;

}

.logo-text h1{

font-size:22px;

}

.logo-text p{

font-size:10px;

}

.dropdown-btn{

width:100%;

}

.virtual-er-card{

padding:18px;

}

.virtual-er-card h3{

font-size:21px;

}

.card-desc{

font-size:13px;

}

.btn-whatsapp,
.btn-book{

padding:12px;

font-size:13px;

}

}

/*==============================
 SMOOTH ENTRANCE
==============================*/

.hero-left{

animation:fadeLeft .8s ease;

}

.hero-right{

animation:fadeRight .8s ease;

}

.virtual-er-card{

animation:fadeUp .9s ease;

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:translateY(0);

}

}

/*==============================
 UTILITIES
==============================*/

.text-center{

text-align:center;

}

.mt-20{

margin-top:20px;

}

.mt-40{

margin-top:40px;

}

.mb-20{

margin-bottom:20px;

}

.mb-40{

margin-bottom:40px;

}

.rounded{

border-radius:18px;

}

.shadow{

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

}

.glass{

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

backdrop-filter:blur(18px);

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

}

/*=========================================================
SECTION LAYOUT
=========================================================*/

.speciality-section,
.hospital-section{
    width:92%;
    max-width:1400px;
    margin:50px auto;
}

.section-top{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    margin-bottom:24px;
    gap:20px;
}

.section-label{
    display:inline-flex;
    align-items:center;
    gap:8px;

    padding:8px 16px;

    border-radius:50px;

    background:rgba(59,130,246,.12);

    border:1px solid rgba(59,130,246,.25);

    color:#60a5fa;

    font-size:11px;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
}

.section-label i{
    font-size:8px;
}

.section-label.verified{
    background:rgba(34,197,94,.12);
    border-color:rgba(34,197,94,.25);
    color:#22c55e;
}

.section-top h2{
    margin-top:14px;
    margin-bottom:10px;

    font-size:34px;
    font-weight:800;
    color:#fff;
}

.section-top p{
    color:#94a3b8;
    font-size:15px;
    line-height:1.7;
    max-width:650px;
}

.section-status{
    padding:10px 18px;
    border-radius:40px;

    background:rgba(16,185,129,.12);

    border:1px solid rgba(16,185,129,.25);

    color:#10b981;

    font-size:13px;
    font-weight:700;
}

.section-top a{
    color:#38bdf8;
    text-decoration:none;
    font-weight:700;
    transition:.3s;
}

.section-top a:hover{
    color:#ffffff;
}


/*=========================================================
SLIDERS
=========================================================*/

.speciality-slider,
.hospital-slider{

display:flex;

gap:22px;

overflow-x:auto;

padding-bottom:10px;

scrollbar-width:none;

}

.speciality-slider::-webkit-scrollbar,
.hospital-slider::-webkit-scrollbar{
display:none;
}


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

.speciality-card{

min-width:150px;

padding:24px 18px;

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

gap:16px;

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

backdrop-filter:blur(20px);

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

border-radius:20px;

transition:.35s;

cursor:pointer;

}

.speciality-card:hover{

transform:translateY(-8px);

border-color:#38bdf8;

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

box-shadow:0 25px 55px rgba(0,212,255,.18);

}

.speciality-card i{

font-size:34px;

color:#38bdf8;

}

.speciality-card span{

font-size:14px;

font-weight:700;

color:#ffffff;

text-align:center;

line-height:1.5;

}


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

.hospital-card{

min-width:270px;

padding:24px;

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

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

border-radius:22px;

backdrop-filter:blur(20px);

transition:.35s;

}

.hospital-card:hover{

transform:translateY(-8px);

border-color:#38bdf8;

box-shadow:0 25px 60px rgba(0,212,255,.18);

}


/*=========================================================
LOGO
=========================================================*/

.hospital-logo{

width:72px;
height:72px;

border-radius:18px;

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

font-size:24px;
font-weight:800;
color:#fff;

margin-bottom:18px;

}

.purple{
background:linear-gradient(135deg,#7c3aed,#5b21b6);
}

.maroon{
background:linear-gradient(135deg,#991b1b,#7f1d1d);
}

.teal{
background:linear-gradient(135deg,#0891b2,#155e75);
}

.green{
background:linear-gradient(135deg,#16a34a,#166534);
}


/*=========================================================
TEXT
=========================================================*/

.hospital-card h3{

font-size:20px;

margin-bottom:8px;

font-weight:700;

color:#fff;

}

.hospital-card p{

font-size:14px;

color:#94a3b8;

margin-bottom:18px;

line-height:1.6;

}


/*=========================================================
META
=========================================================*/

.hospital-meta{

display:flex;

justify-content:space-between;

align-items:center;

padding-top:16px;

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

}

.hospital-meta span{

font-size:13px;

font-weight:600;

color:#cbd5e1;

}

.hospital-meta i{

color:#fbbf24;

margin-right:4px;

}

.live{

padding:5px 12px;

background:#16a34a;

border-radius:30px;

font-size:11px;

font-weight:700;

color:#fff;

}


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

@media(max-width:768px){

.section-top{

flex-direction:column;

align-items:flex-start;

}

.section-top h2{

font-size:28px;

}

.speciality-card{

min-width:130px;

padding:20px 16px;

}

.speciality-card i{

font-size:28px;

}

.hospital-card{

min-width:230px;

}

}


/* CLICKABLE SPECIALITY CARDS */

.speciality-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-decoration: none;
    color: inherit;
    cursor: pointer;

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

.speciality-card:hover {
    transform: translateY(-4px);
    border-color: #d4af37;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
}

.speciality-card:focus-visible {
    outline: 2px solid #d4af37;
    outline-offset: 4px;
}

.speciality-card i {
    transition: color 0.3s ease;
}

.speciality-card:hover i {
    color: #d4af37;
}

/* =========================================================
   ECN HOSPITAL CLICKABLE CARDS
========================================================= */

.hospital-card {
    position: relative;
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;

    /* Reserve space for the rating badge */
    padding-top: 54px;

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

.hospital-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14);
}

.hospital-card:focus-visible {
    outline: 3px solid #d4af37;
    outline-offset: 4px;
}



/* =========================================================
   ECN DIAGNOSTIC MARQUEE — LEFT TO RIGHT
========================================================= */

.diagnostic-marquee {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.diagnostic-marquee .hospital-track.diagnostic-track {
    display: flex;
    flex-flow: row nowrap;
    gap: 18px;
    width: max-content;

    animation: ecnDiagnosticLeftToRight 32s linear infinite !important;
    will-change: transform;
}

/* Keep cards at fixed widths */
.diagnostic-marquee .diagnostic-track > .hospital-card {
    flex: 0 0 270px;
}

/* LEFT → RIGHT */
@keyframes ecnDiagnosticLeftToRight {
    0% {
        transform: translateX(-50%);
    }

    100% {
        transform: translateX(0);
    }
}

/* Pause on hover */
.diagnostic-marquee:hover .diagnostic-track {
    animation-play-state: paused !important;
}

/* Mobile */
@media (max-width: 768px) {
    .diagnostic-marquee .diagnostic-track > .hospital-card {
        flex-basis: 230px;
    }

    .diagnostic-marquee .hospital-track.diagnostic-track {
        animation-duration: 28s !important;
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .diagnostic-marquee .hospital-track.diagnostic-track {
        animation: none !important;
        transform: none;
    }
}




/* =========================================================
   PREMIUM ECN RATING — TOP RIGHT
========================================================= */

.ecn-rating-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 5;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;

    padding: 7px 10px;

    background: linear-gradient(
        135deg,
        #fff5f5 0%,
        #25344a 100%
    );

    border: 1px solid rgba(222, 190, 105, 0.75);
    border-radius: 9px;

    color: #f1d68a;
    font-family: Inter, sans-serif;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;

    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

    pointer-events: none;
}

.ecn-rating-badge > i:first-child {
    color: #e6c56e;
    font-size: 12px;
}

.ecn-rating-badge strong {
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
}

.ecn-rating-badge .rating-star {
    color: #f5c451;
    font-size: 10px;
}

/* =========================================================
   EMERGENCY ASSISTANCE ACTION
========================================================= */

.hospital-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    margin-top: 14px;
    padding: 9px 12px;

    border: 1px solid rgba(212, 175, 55, 0.45);
    border-radius: 8px;

    color: #b48a2c;
    font-size: 11px;
    font-weight: 700;

    transition:
        background 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease;
}

.hospital-card:hover .hospital-action {
    background: #182438;
    border-color: #d4af37;
    color: #f5d78e;
}

/* Keep badge and cards compact on mobile */
@media (max-width: 480px) {
    .hospital-card {
        padding-top: 50px;
    }

    .ecn-rating-badge {
        top: 9px;
        right: 9px;
        padding: 6px 8px;
        gap: 4px;
    }

    .hospital-action {
        font-size: 10px;
    }
}


/*===========================
MARQUEE CONTAINER
===========================*/

.speciality-marquee,
.hospital-marquee{
    overflow:hidden;
    width:100%;
    position:relative;
}

.speciality-track,
.hospital-track{
    display:flex;
    gap:18px;
    width:max-content;
}

/* Right → Left */

.speciality-track{
    animation:marqueeLeft 28s linear infinite;
}

/* Left → Right */

.hospital-track{
    animation:marqueeRight 32s linear infinite;
}

/* Pause on Hover */

.speciality-track:hover,
.hospital-track:hover{
    animation-play-state:paused;
}

/*===========================
ANIMATIONS
===========================*/

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

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

/* =========================================================
   ECN PREMIUM FEATURE NETWORK
   Matches ECN Dark Glassmorphism UI
   ========================================================= */

.features-container {
    width: 92%;
    max-width: 1400px;
    margin: 55px auto;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;

    padding: 0;

    background: transparent;

    font-family: 'Inter', sans-serif;
}


/* =========================================================
   FEATURE ITEM
   ========================================================= */

.feature-item {

    position: relative;

    display: flex;
    align-items: center;

    gap: 18px;

    min-height: 105px;

    padding: 22px 24px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.07),
            rgba(255,255,255,.035)
        );

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

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

    border-radius: 20px;

    overflow: hidden;

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


/* Top light effect */

.feature-item::before {

    content: "";

    position: absolute;

    top: 0;
    left: 24px;
    right: 24px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.25),
            transparent
        );

    opacity: .7;
}


/* Background glow */

.feature-item::after {

    content: "";

    position: absolute;

    width: 150px;
    height: 150px;

    right: -70px;
    bottom: -80px;

    border-radius: 50%;

    background: rgba(56,189,248,.08);

    filter: blur(30px);

    pointer-events: none;
}


/* Hover */

.feature-item:hover {

    transform: translateY(-7px);

    border-color: rgba(56,189,248,.35);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.10),
            rgba(255,255,255,.045)
        );

    box-shadow:
        0 20px 55px rgba(0,0,0,.30),
        0 0 30px rgba(56,189,248,.08);
}


/* =========================================================
   ICON BOX
   ========================================================= */

.icon-box {

    position: relative;

    flex-shrink: 0;

    width: 58px;
    height: 58px;

    display: flex;

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

    border-radius: 17px;

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

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 10px 25px rgba(0,0,0,.20);

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


.feature-item:hover .icon-box {

    transform: scale(1.08) rotate(-3deg);

}


/* SVG */

.icon-box svg {

    width: 27px;
    height: 27px;

    stroke-width: 1.8;

    transition: .35s;
}


.feature-item:hover .icon-box svg {

    transform: scale(1.08);

}


/* =========================================================
   PHARMACY
   ========================================================= */

.icon-pharmacy {

    background:
        linear-gradient(
            135deg,
            rgba(16,185,129,.22),
            rgba(6,95,70,.12)
        );

    color: #34d399;

    box-shadow:
        0 0 25px rgba(16,185,129,.12),
        inset 0 1px 0 rgba(255,255,255,.08);
}


/* =========================================================
   LABS
   ========================================================= */

.icon-labs {

    background:
        linear-gradient(
            135deg,
            rgba(245,158,11,.22),
            rgba(146,64,14,.12)
        );

    color: #fbbf24;

    box-shadow:
        0 0 25px rgba(245,158,11,.12),
        inset 0 1px 0 rgba(255,255,255,.08);
}


/* =========================================================
   DISCOUNT
   ========================================================= */

.icon-discount {

    background:
        linear-gradient(
            135deg,
            rgba(239,68,68,.22),
            rgba(127,29,29,.12)
        );

    color: #f87171;

    box-shadow:
        0 0 25px rgba(239,68,68,.12),
        inset 0 1px 0 rgba(255,255,255,.08);
}


/* =========================================================
   TEXT AREA
   ========================================================= */

.text-box {

    position: relative;

    display: flex;
    flex-direction: column;

    justify-content: center;

    min-width: 0;
}


/* =========================================================
   TITLE
   ========================================================= */

.title {

    position: relative;

    display: inline-flex;
    align-items: center;

    width: fit-content;

    margin-bottom: 8px;

    padding-left: 11px;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1.4px;

    line-height: 1;

}


/* Small live indicator */

.title::before {

    content: "";

    position: absolute;

    left: 0;
    top: 50%;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    transform: translateY(-50%);

    box-shadow: 0 0 10px currentColor;
}


/* =========================================================
   TITLE COLORS
   ========================================================= */

.title-pharmacy {

    color: #34d399;

}

.title-pharmacy::before {

    background: #34d399;

}


.title-labs {

    color: #fbbf24;

}

.title-labs::before {

    background: #fbbf24;

}


.title-discount {

    color: #f87171;

}

.title-discount::before {

    background: #f87171;

}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.description {

    margin: 0;

    color: #94a3b8;

    font-size: 13px;

    font-weight: 500;

    line-height: 1.5;

    white-space: normal;
}


/* =========================================================
   PREMIUM ACCENT LINE
   ========================================================= */

.feature-item .text-box::after {

    content: "";

    width: 32px;
    height: 2px;

    margin-top: 10px;

    border-radius: 10px;

    opacity: .7;
}


.feature-item:nth-child(1) .text-box::after {

    background: #34d399;

    box-shadow: 0 0 10px rgba(52,211,153,.5);

}


.feature-item:nth-child(2) .text-box::after {

    background: #fbbf24;

    box-shadow: 0 0 10px rgba(251,191,36,.5);

}


.feature-item:nth-child(3) .text-box::after {

    background: #f87171;

    box-shadow: 0 0 10px rgba(248,113,113,.5);

}


/* =========================================================
   LIGHT MODE
   ========================================================= */

body.light .features-container {

    background: transparent;

}


body.light .feature-item {

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.95),
            rgba(248,250,252,.95)
        );

    border: 1px solid #dbe4ef;

    box-shadow:
        0 15px 40px rgba(15,23,42,.06);
}


body.light .feature-item:hover {

    border-color: #bae6fd;

    box-shadow:
        0 20px 50px rgba(15,23,42,.10);
}


body.light .description {

    color: #64748b;

}


body.light .icon-pharmacy {

    background: #ecfdf5;

    border-color: #bbf7d0;

}


body.light .icon-labs {

    background: #fffbeb;

    border-color: #fde68a;

}


body.light .icon-discount {

    background: #fef2f2;

    border-color: #fecaca;

}


/* =========================================================
   RESPONSIVE — TABLET
   ========================================================= */

@media (max-width: 992px) {

    .features-container {

        grid-template-columns: 1fr;

        gap: 16px;

        margin-top: 40px;
        margin-bottom: 40px;

    }

    .feature-item {

        min-height: 95px;

    }

}


/* =========================================================
   RESPONSIVE — MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .features-container {

        width: calc(100% - 32px);

        margin: 35px auto;

        gap: 14px;

    }

    .feature-item {

        min-height: 90px;

        padding: 18px;

        gap: 15px;

        border-radius: 18px;

    }

    .icon-box {

        width: 52px;
        height: 52px;

        border-radius: 15px;

    }

    .icon-box svg {

        width: 24px;
        height: 24px;

    }

    .title {

        font-size: 10px;

        letter-spacing: 1.2px;

    }

    .description {

        font-size: 12px;

    }

}


/* =========================================================
   VERY SMALL DEVICES
   ========================================================= */

@media (max-width: 380px) {

    .feature-item {

        padding: 15px;

        gap: 12px;

    }

    .icon-box {

        width: 48px;
        height: 48px;

    }

    .title {

        font-size: 9px;

    }

    .description {

        font-size: 11px;

    }

}

/* =========================================================
   ECN ABCD SERVICES
========================================================= */

.ecn-abcd-section {
    width: min(1180px, calc(100% - 48px));
    margin: 70px auto 75px;
}


/* =========================================================
   HEADER
========================================================= */

.ecn-abcd-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 26px;
}


/* SMALL LABEL */

.ecn-abcd-label {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 1.8px;

    color: #ef4444;
    white-space: nowrap;
}

.ecn-abcd-label span {
    width: 7px;
    height: 7px;

    background: #ef4444;
    border-radius: 50%;

    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.10);
}


/* HEADING */

.ecn-abcd-heading {
    flex: 1;
    max-width: 720px;
}

.ecn-abcd-heading h2 {
    margin: 0 0 7px;

    font-size: clamp(1.65rem, 2.5vw, 2.15rem);
    line-height: 1.15;

    font-weight: 800;
    letter-spacing: -0.7px;

    color: #111827;
}

.ecn-abcd-heading h2 span {
    color: #ef4444;
}

.ecn-abcd-heading p {
    margin: 0;

    max-width: 620px;

    font-size: 0.88rem;
    line-height: 1.55;

    color: #6b7280;
}


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

.ecn-abcd-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 14px;
}


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

.ecn-service-card {
    position: relative;

    min-height: 225px;

    padding: 19px;

    display: flex;
    flex-direction: column;

    justify-content: space-between;

    overflow: hidden;

    border: 1px solid rgba(15, 23, 42, 0.08);

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.98),
            rgba(248, 250, 252, 0.96)
        );

    box-shadow:
        0 8px 25px rgba(15, 23, 42, 0.045);

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


/* subtle background glow */

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

    position: absolute;

    width: 110px;
    height: 110px;

    right: -45px;
    bottom: -50px;

    border-radius: 50%;

    background: rgba(239, 68, 68, 0.06);

    pointer-events: none;
}


/* HOVER */

.ecn-service-card:hover {
    transform: translateY(-4px);

    border-color: rgba(239, 68, 68, 0.18);

    box-shadow:
        0 16px 35px rgba(15, 23, 42, 0.09);
}


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

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


/* LETTER */

.ecn-service-index {
    width: 29px;
    height: 29px;

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

    border-radius: 8px;

    background: #f8fafc;

    border: 1px solid #e5e7eb;

    color: #64748b;

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


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

.ecn-service-icon {
    width: 48px;
    height: 48px;

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

    border-radius: 14px;

    font-size: 1.45rem;

    background: #fff5f5;

    border: 1px solid rgba(239, 68, 68, 0.08);
}

.ecn-service-icon.blue {
    background: #eff6ff;
}

.ecn-service-icon.green {
    background: #ecfdf5;
}


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

.ecn-service-content {
    position: relative;
    z-index: 2;

    margin-top: 18px;
}

.ecn-service-content h3 {
    margin: 0 0 7px;

    font-size: 1rem;
    font-weight: 750;

    letter-spacing: -0.2px;

    color: #111827;
}

.ecn-service-content p {
    margin: 0;

    max-width: 225px;

    font-size: 0.76rem;
    line-height: 1.55;

    color: #6b7280;
}


/* =========================================================
   OPEN LINK
========================================================= */

.ecn-service-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    margin-top: 15px;

    color: #111827;

    text-decoration: none;

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

    transition: gap 0.2s ease, color 0.2s ease;
}

.ecn-service-link i {
    font-size: 0.65rem;
}

.ecn-service-link:hover {
    gap: 11px;
    color: #ef4444;
}


/* =========================================================
   LIGHT MODE
========================================================= */

.ecn-abcd-heading h2 {
    color: #000000;
}


/* =========================================================
   DARK MODE
========================================================= */

body.dark .ecn-abcd-heading h2 {
    color: #ffffff;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .ecn-abcd-header {
        display: block;
    }

    .ecn-abcd-label {
        margin-bottom: 10px;
    }

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

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .ecn-abcd-section {
        width: min(100% - 30px, 520px);
        margin: 45px auto 55px;
    }

    .ecn-abcd-header {
        margin-bottom: 20px;
    }

    .ecn-abcd-heading h2 {
        font-size: 1.55rem;
    }

    .ecn-abcd-heading p {
        font-size: 0.8rem;
    }

    .ecn-abcd-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .ecn-service-card {
        min-height: 190px;
        padding: 15px;
        border-radius: 15px;
    }

    .ecn-service-icon {
        width: 40px;
        height: 40px;

        border-radius: 11px;

        font-size: 1.2rem;
    }

    .ecn-service-index {
        width: 25px;
        height: 25px;

        font-size: 0.62rem;
    }

    .ecn-service-content {
        margin-top: 12px;
    }

    .ecn-service-content h3 {
        font-size: 0.86rem;
    }

    .ecn-service-content p {
        font-size: 0.68rem;
        line-height: 1.45;
    }

    .ecn-service-link {
        margin-top: 10px;
        font-size: 0.68rem;
    }

}


/* SMALL PHONES */

@media (max-width: 380px) {

    .ecn-abcd-grid {
        grid-template-columns: 1fr;
    }

    .ecn-service-card {
        min-height: 165px;
    }

}

/* =========================================================
   HELPLINE BUTTON
   ========================================================= */

.helplines-btn {

    height: 42px;

    display: flex;

    align-items: center;

    gap: 9px;

    padding: 0 18px;

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

    border-radius: 40px;

    background: #ffffff;

    color: #111827;

    font-size: 13px;

    font-weight: 600;

    cursor: pointer;

    transition: .3s;
}

.helplines-btn:hover {

    transform: translateY(-2px);

    box-shadow:
        0 10px 25px rgba(0,0,0,.20);
}


.status-dot {

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #22c55e;

    box-shadow:
        0 0 0 4px rgba(34,197,94,.12),
        0 0 12px rgba(34,197,94,.6);

    animation: ecnStatusPulse 2s infinite;
}


@keyframes ecnStatusPulse {

    50% {

        transform: scale(1.25);

        opacity: .65;
    }

}


/* =========================================================
   SIGN IN
   ========================================================= */

.signin-btn {

    height: 42px;

    padding: 0 20px;

    border-radius: 40px;

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

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

    color: #ffffff;

    font-size: 13px;

    font-weight: 600;

    cursor: pointer;

    transition: .3s;
}

.signin-btn:hover {

    background: #ef4444;

    border-color: #ef4444;

    transform: translateY(-2px);

    box-shadow:
        0 10px 25px rgba(239,68,68,.25);
}


/* =========================================================
   CATEGORIES
   ========================================================= */

.categories-slider {

    position: relative;

    display: flex;

    align-items: center;

    width: 100%;

    padding: 20px 0 10px;

    overflow: hidden;
}


.slider-track {

    display: flex;

    gap: 10px;

    width: 100%;

    overflow: hidden;

    white-space: nowrap;

    padding: 3px 10px;
}


/* =========================================================
   CATEGORY CHIP
   ========================================================= */

.category-chip {

    flex-shrink: 0;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 9px 15px;

    border-radius: 40px;

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

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

    color: #cbd5e1;

    font-size: 12px;

    font-weight: 600;

    cursor: pointer;

    transition: .3s;
}

.category-chip:hover {

    transform: translateY(-2px);

    border-color: rgba(56,189,248,.35);

    background: rgba(56,189,248,.08);

    color: #ffffff;
}


.active-chip {

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            rgba(56,189,248,.14),
            rgba(59,130,246,.08)
        );

    border-color:
        rgba(56,189,248,.45);

    box-shadow:
        0 0 25px rgba(56,189,248,.08);
}


.chip-icon {

    font-size: 15px;

    line-height: 1;
}


/* =========================================================
   NAV ARROWS
   ========================================================= */

.nav-arrow {

    position: absolute;

    z-index: 20;

    width: 32px;
    height: 32px;

    display: flex;

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

    border-radius: 50%;

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

    background:
        rgba(15,23,42,.85);

    backdrop-filter: blur(12px);

    color: #ffffff;

    font-size: 20px;

    cursor: pointer;

    transition: .3s;
}

.nav-arrow:hover {

    background: #ef4444;

    border-color: #ef4444;
}

.left-arrow {

    left: -10px;
}

.right-arrow {

    right: -10px;
}


/* =========================================================
   TRUST BAR
   ========================================================= */

.trust-bar {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 18px;

    margin-top: 30px;
}


.trust-item {

    position: relative;

    display: flex;

    align-items: center;

    gap: 17px;

    min-height: 100px;

    padding: 20px 22px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.07),
            rgba(255,255,255,.035)
        );

    backdrop-filter: blur(20px);

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

    border-radius: 20px;

    overflow: hidden;

    transition: .35s;
}


.trust-item::after {

    content: "";

    position: absolute;

    width: 140px;
    height: 140px;

    right: -70px;
    bottom: -80px;

    border-radius: 50%;

    background: rgba(56,189,248,.06);

    filter: blur(30px);

    pointer-events: none;
}


.trust-item:hover {

    transform: translateY(-6px);

    border-color: rgba(56,189,248,.30);

    box-shadow:
        0 20px 50px rgba(0,0,0,.28),
        0 0 25px rgba(56,189,248,.06);
}


/* =========================================
   ECN PREMIUM RADIANT BLUE TRUST SECTION
========================================= */

.features-container {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;

    padding: 32px;
    margin: 30px auto;
    max-width: 1200px;

    background:
        radial-gradient(
            circle at 15% 0%,
            rgba(40, 140, 255, 0.28),
            transparent 42%
        ),
        radial-gradient(
            circle at 90% 100%,
            rgba(0, 220, 255, 0.16),
            transparent 40%
        ),
        linear-gradient(
            135deg,
            #06152f 0%,
            #082d63 48%,
            #064b91 100%
        );

    border: 1px solid rgba(96, 180, 255, 0.4);
    border-radius: 24px;

    box-shadow:
        0 0 35px rgba(0, 112, 255, 0.18),
        0 15px 45px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);

    overflow: hidden;
    isolation: isolate;
}

/* Individual feature cards */
.features-container .feature-item {
    display: flex;
    align-items: center;
    gap: 16px;

    padding: 22px 18px;

    background: linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.10),
        rgba(255, 255, 255, 0.035)
    );

    border: 1px solid rgba(160, 210, 255, 0.22);
    border-radius: 18px;

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

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 8px 20px rgba(0, 0, 0, 0.12);

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

/* Premium hover effect */
.features-container .feature-item:hover {
    transform: translateY(-5px);

    border-color: rgba(115, 200, 255, 0.7);

    box-shadow:
        0 0 24px rgba(0, 145, 255, 0.18),
        0 12px 28px rgba(0, 0, 0, 0.2);
}

/* Icon containers */
.features-container .icon-box {
    flex-shrink: 0;
    width: 54px;
    height: 54px;

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

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

    box-shadow:
        0 0 20px rgba(0, 145, 255, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.features-container .icon-box svg {
    width: 26px;
    height: 26px;
}

/* Pharmacy icon */
.features-container .icon-pharmacy {
    color: #76e4ff;
    background: linear-gradient(
        135deg,
        rgba(0, 195, 255, 0.22),
        rgba(0, 105, 255, 0.12)
    );
}

/* Laboratory icon */
.features-container .icon-labs {
    color: #8ab8ff;
    background: linear-gradient(
        135deg,
        rgba(75, 140, 255, 0.24),
        rgba(25, 80, 220, 0.12)
    );
}

/* Discount icon */
.features-container .icon-discount {
    color: #78ffd2;
    background: linear-gradient(
        135deg,
        rgba(0, 255, 190, 0.18),
        rgba(0, 180, 150, 0.10)
    );
}

/* Feature titles */
.features-container .title {
    display: block;
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.1px;
    line-height: 1.5;
}

/* Feature descriptions */
.features-container .description {
    margin: 7px 0 0;
    color: #d4e7ff;
    font-size: 13px;
    line-height: 1.7;
}

/* Responsive layout */
@media (max-width: 900px) {
    .features-container {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 22px;
    }

    .features-container .feature-item {
        padding: 18px;
    }
}

@media (max-width: 480px) {
    .features-container {
        margin: 20px 12px;
        padding: 15px;
        border-radius: 20px;
    }

    .features-container .feature-item {
        gap: 13px;
        padding: 15px 12px;
        border-radius: 15px;
    }

    .features-container .icon-box {
        width: 46px;
        height: 46px;
        border-radius: 13px;
    }

    .features-container .icon-box svg {
        width: 23px;
        height: 23px;
    }

    .features-container .title {
        font-size: 11px;
        letter-spacing: 0.7px;
    }

    .features-container .description {
        font-size: 12px;
    }
}


/* =========================================================
   TRUST ICON
   ========================================================= */

.trust-icon-box {

    flex-shrink: 0;

    width: 58px;
    height: 58px;

    display: flex;

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

    border-radius: 17px;

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

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 10px 25px rgba(0,0,0,.20);

    transition: .35s;
}


.trust-item:hover .trust-icon-box {

    transform: scale(1.08) rotate(-3deg);
}


.trust-icon-box svg {

    width: 27px;
    height: 27px;
}


/* Pharmacy */

.icon-pharmacy {

    background:
        linear-gradient(
            135deg,
            rgba(16,185,129,.22),
            rgba(6,95,70,.10)
        );

    color: #34d399;

    box-shadow:
        0 0 25px rgba(16,185,129,.10);
}


/* Labs */

.icon-labs {

    background:
        linear-gradient(
            135deg,
            rgba(245,158,11,.22),
            rgba(146,64,14,.10)
        );

    color: #fbbf24;

    box-shadow:
        0 0 25px rgba(245,158,11,.10);
}


/* Discount */

.icon-discount {

    background:
        linear-gradient(
            135deg,
            rgba(239,68,68,.22),
            rgba(127,29,29,.10)
        );

    color: #f87171;

    box-shadow:
        0 0 25px rgba(239,68,68,.10);
}


/* =========================================================
   TRUST TEXT
   ========================================================= */

.trust-text {

    display: flex;

    flex-direction: column;
}


.trust-title {

    position: relative;

    display: inline-flex;

    align-items: center;

    width: fit-content;

    padding-left: 10px;

    margin-bottom: 7px;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.4px;
}


.trust-title::before {

    content: "";

    position: absolute;

    left: 0;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    box-shadow: 0 0 10px currentColor;
}


.title-pharmacy {

    color: #34d399;
}

.title-pharmacy::before {

    background: #34d399;
}


.title-labs {

    color: #fbbf24;
}

.title-labs::before {

    background: #fbbf24;
}


.title-discount {

    color: #f87171;
}

.title-discount::before {

    background: #f87171;
}


.trust-desc {

    margin: 0;

    color: #94a3b8;

    font-size: 12px;

    font-weight: 500;

    line-height: 1.5;
}


/* =========================================================
   HERO INTRO
   ========================================================= */

.hero-intro {

    position: relative;

    margin-top: 65px;

    margin-bottom: 30px;

    padding-left: 4px;
}


.hero-subheading {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 14px;

    padding: 7px 15px;

    border-radius: 40px;

    background: rgba(239,68,68,.10);

    border: 1px solid rgba(239,68,68,.20);

    color: #fb7185;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.5px;
}


.hero-subheading::before {

    content: "";

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #ef4444;

    box-shadow:
        0 0 10px rgba(239,68,68,.7);
}


.hero-heading {

    margin-bottom: 12px;

    font-size: 38px;

    font-weight: 900;

    line-height: 1.1;

    letter-spacing: -1px;

    color: #ffffff;

    background:
        linear-gradient(
            90deg,
            #ffffff,
            #e2e8f0,
            #38bdf8
        );

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;
}


.hero-text {

    max-width: 650px;

    color: #94a3b8;

    font-size: 15px;

    line-height: 1.7;
}


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

.services-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 18px;

    margin-bottom: 70px;
}


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

.service-card {

    position: relative;

    height: 285px;

    padding: 24px;

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    overflow: hidden;

    border-radius: 22px;

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

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

    backdrop-filter: blur(20px);

    color: #ffffff;

    cursor: pointer;

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


.service-card::before {

    content: "";

    position: absolute;

    width: 190px;
    height: 190px;

    right: -80px;
    top: -80px;

    border-radius: 50%;

    filter: blur(25px);

    opacity: .7;

    transition: .4s;
}


.service-card:hover {

    transform: translateY(-10px);

    border-color: rgba(56,189,248,.35);

    box-shadow:
        0 25px 60px rgba(0,0,0,.40),
        0 0 35px rgba(56,189,248,.08);
}


.service-card:hover::before {

    transform: scale(1.25);
}


.ecn-abcd-heading h2 {
    color: #ffffff;
}

.ecn-abcd-heading h2 span {
    /* Keeps One network in its existing color */
}


/* =========================================================
   CARD ACCENT GLOWS
   ========================================================= */

.card-ambulance::before {

    background: rgba(239,68,68,.16);
}


.card-blood::before {

    background: rgba(239,68,68,.14);
}


.card-clinical::before {

    background: rgba(56,189,248,.16);
}


.card-diagnostics::before {

    background: rgba(34,197,94,.14);
}


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

.card-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(5,12,24,.98) 0%,
            rgba(5,12,24,.70) 45%,
            rgba(5,12,24,.20) 100%
        );

    z-index: 1;
}


/* =========================================================
   INDEX BADGE
   ========================================================= */

.badge-index {

    position: absolute;

    top: 20px;
    left: 20px;

    width: 32px;
    height: 32px;

    display: flex;

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

    border-radius: 10px;

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

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

    color: #94a3b8;

    font-size: 11px;

    font-weight: 800;

    z-index: 3;
}


/* =========================================================
   ROUND ICON
   ========================================================= */

.card-icon-round {

    position: absolute;

    top: 20px;
    right: 20px;

    width: 52px;
    height: 52px;

    display: flex;

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

    border-radius: 16px;

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

    backdrop-filter: blur(15px);

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

    box-shadow:
        0 10px 25px rgba(0,0,0,.25);

    font-size: 24px;

    z-index: 3;

    transition: .35s;
}


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

    transform:
        scale(1.08)
        rotate(-5deg);

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


/* =========================================================
   ICON COLORS
   ========================================================= */

.icon-red {

    filter:
        drop-shadow(
            0 0 8px rgba(239,68,68,.35)
        );
}


.icon-blue {

    filter:
        drop-shadow(
            0 0 8px rgba(56,189,248,.35)
        );
}


.icon-green {

    filter:
        drop-shadow(
            0 0 8px rgba(34,197,94,.35)
        );
}


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

.card-content {

    position: relative;

    z-index: 3;
}


.card-content h2 {

    margin-bottom: 8px;

    color: #ffffff;

    font-size: 21px;

    font-weight: 800;

    letter-spacing: -.3px;
}


.card-content p {

    min-height: 38px;

    margin-bottom: 18px;

    color: #94a3b8;

    font-size: 12px;

    line-height: 1.6;
}


/* =========================================================
   OPEN LINK
   ========================================================= */

.open-link {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: #38bdf8;

    font-size: 12px;

    font-weight: 800;

    transition: .3s;
}


.open-link::after {

    content: "";

    width: 22px;
    height: 1px;

    background: #38bdf8;

    transition: .3s;
}


.service-card:hover .open-link {

    color: #ffffff;
}


.service-card:hover .open-link::after {

    width: 35px;

    background: #ffffff;
}


/* =========================================================
   FLOATING SOS
   ========================================================= */

.floating-sos {

    position: fixed;

    left: 30px;
    bottom: 30px;

    width: 72px;
    height: 72px;

    display: flex;

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

    flex-direction: column;

    gap: 3px;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #ef4444,
            #b91c1c
        );

    color: #ffffff;

    font-size: 13px;

    font-weight: 900;

    cursor: pointer;

    z-index: 99999;

    box-shadow:
        0 20px 50px rgba(239,68,68,.45);

    animation:
        ecnSOSPulse 2s infinite;

    transition: .3s;
}


.sos-icon {

    font-size: 21px;

    line-height: 1;
}


.floating-sos:hover {

    transform: scale(1.1);

}


@keyframes ecnSOSPulse {

    0% {

        box-shadow:
            0 0 0 0 rgba(239,68,68,.45);

    }

    70% {

        box-shadow:
            0 0 0 24px rgba(239,68,68,0);

    }

    100% {

        box-shadow:
            0 0 0 0 rgba(239,68,68,0);

    }

}


/* =========================================================
   LIGHT MODE
   ========================================================= */

body.light .main-header,
body.light .trust-item,
body.light .service-card,
body.light .category-chip {

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

    border-color: #dbe4ef;
}


body.light .logo-accent {

    background:
        linear-gradient(
            90deg,
            #111827,
            #2563eb,
            #dc2626
        );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


body.light .center-tagline {

    color: #64748b;
}


body.light .category-chip {

    color: #475569;
}


body.light .active-chip {

    background: #eff6ff;

    border-color: #93c5fd;

    color: #1d4ed8;
}


body.light .trust-desc,
body.light .hero-text {

    color: #64748b;
}


body.light .hero-heading {

    background:
        linear-gradient(
            90deg,
            #111827,
            #1e40af
        );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


body.light .service-card {

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f8fafc
        );

    color: #111827;

    box-shadow:
        0 15px 40px rgba(15,23,42,.08);
}


body.light .card-overlay {

    background:
        linear-gradient(
            to top,
            rgba(15,23,42,.92),
            rgba(15,23,42,.20)
        );
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .main-header {

        grid-template-columns: 1fr auto;

    }

    .header-center {

        display: none;
    }

    .services-grid {

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

    .trust-bar {

        grid-template-columns:
            repeat(3, 1fr);
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

    .app-container {

        width: calc(100% - 30px);
    }


    .main-header {

        grid-template-columns: 1fr;

        gap: 18px;

        padding: 18px;

        text-align: center;
    }


    .logo-container {

        align-items: center;
    }


    .header-right {

        justify-content: center;

        flex-wrap: wrap;
    }


    .categories-slider {

        padding-top: 16px;
    }


    .slider-track {

        overflow-x: auto;

        scrollbar-width: none;
    }


    .slider-track::-webkit-scrollbar {

        display: none;
    }


    .nav-arrow {

        display: none;
    }


    .trust-bar {

        grid-template-columns: 1fr;

        gap: 12px;

        margin-top: 25px;
    }


    .trust-item {

        min-height: 88px;

        padding: 17px;
    }


    .hero-intro {

        margin-top: 45px;
    }


    .hero-heading {

        font-size: 31px;
    }


    .hero-text {

        font-size: 14px;
    }


    .services-grid {

        grid-template-columns: 1fr;

        gap: 15px;
    }


    .service-card {

        height: 250px;
    }


    .floating-sos {

        width: 64px;
        height: 64px;

        left: 18px;
        bottom: 18px;

        font-size: 11px;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .app-container {

        width: calc(100% - 22px);
    }


    .main-header {

        margin-top: 10px;

        border-radius: 16px;
    }


    .logo-accent {

        font-size: 22px;
    }


    .logo-sub {

        font-size: 8px;
    }


    .helplines-btn {

        font-size: 12px;

        padding: 0 14px;
    }


    .signin-btn {

        padding: 0 17px;
    }


    .trust-item {

        border-radius: 18px;
    }


    .trust-icon-box {

        width: 52px;
        height: 52px;
    }


    .trust-desc {

        font-size: 11px;
    }


    .hero-heading {

        font-size: 27px;
    }


    .service-card {

        height: 235px;

        padding: 20px;

        border-radius: 20px;
    }


    .card-icon-round {

        width: 48px;
        height: 48px;
    }


    .card-content h2 {

        font-size: 20px;
    }

}

/* =========================================================
   ECN LOWER SECTIONS
   Designed to match the existing ECN Emergency UI
========================================================= */

.page-sections-container {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 24px;
}


/* =========================================================
   COMMON
========================================================= */

.ecn-section-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.ecn-label-red {
    color: #ef4444;
}

.ecn-label-green {
    color: #22c55e;
}

.ecn-live-dot {
    width: 7px;
    height: 7px;

    background: #ef4444;
    border-radius: 50%;

    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.10);
}


/* =========================================================
   SOS BANNER
========================================================= */

.ecn-sos-banner {
    position: relative;

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

    gap: 40px;

    margin: 32px 0 24px;

    padding: 30px 34px;

    background:
        linear-gradient(
            135deg,
            rgba(239, 68, 68, 0.10),
            rgba(239, 68, 68, 0.035)
        );

    border: 1px solid rgba(239, 68, 68, 0.18);

    border-radius: 16px;

    overflow: hidden;
}


/* subtle emergency glow */

.ecn-sos-banner::before {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    left: -70px;
    top: -100px;

    background: rgba(239, 68, 68, 0.08);

    border-radius: 50%;

    filter: blur(30px);

    pointer-events: none;
}


.ecn-sos-content {
    position: relative;
    z-index: 1;
}


.ecn-sos-content .ecn-section-label {
    margin-bottom: 10px;
}


.ecn-sos-content h2 {
    margin: 0 0 8px;

    font-size: 25px;
    line-height: 1.25;

    font-weight: 750;

    letter-spacing: -0.4px;

    color: #fff;
}


.ecn-sos-content p {
    margin: 0;

    max-width: 700px;

    color: #64748b;

    font-size: 14px;

    line-height: 1.6;
}


/* SOS BUTTON */

.ecn-btn-sos {
    position: relative;
    z-index: 1;

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

    gap: 10px;

    padding: 13px 21px;

    border: 0;

    border-radius: 10px;

    background: #ef4444;

    color: #ffffff;

    font-size: 13px;
    font-weight: 750;

    cursor: pointer;

    box-shadow:
        0 8px 20px rgba(239, 68, 68, 0.20);

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


.ecn-btn-sos i:first-child {
    font-size: 16px;
}


.ecn-btn-sos i:last-child {
    font-size: 11px;
    opacity: 0.8;
}


.ecn-btn-sos:hover {
    background: #dc2626;

    transform: translateY(-2px);

    box-shadow:
        0 12px 25px rgba(239, 68, 68, 0.28);
}


/* =========================================================
   PARTNER SECTION
========================================================= */

.ecn-partner-section {
    position: relative;

    margin-bottom: 30px;

    padding: 46px;

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(59, 130, 246, 0.08),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            #0b1220,
            #080d17
        );

    color: #ffffff;

    border: 1px solid #172235;

    border-radius: 18px;

    overflow: hidden;
}


.ecn-partner-section::after {
    content: "";

    position: absolute;

    width: 260px;
    height: 260px;

    right: -120px;
    bottom: -160px;

    border-radius: 50%;

    background: rgba(16, 185, 129, 0.06);

    filter: blur(35px);

    pointer-events: none;
}


.ecn-partner-main {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(400px, 0.85fr);

    gap: 55px;

    align-items: center;
}


/* =========================================================
   PARTNER LEFT
========================================================= */

.ecn-partner-content {
    max-width: 650px;
}


.ecn-partner-content
.ecn-section-label {
    margin-bottom: 16px;
}


.ecn-partner-content h2 {
    margin: 0 0 16px;

    font-size: clamp(28px, 3vw, 38px);

    line-height: 1.15;

    letter-spacing: -0.8px;

    font-weight: 750;

    color: #f8fafc;
}


.ecn-partner-content p {
    max-width: 590px;

    margin: 0 0 28px;

    color: #94a3b8;

    font-size: 14px;

    line-height: 1.7;
}


/* =========================================================
   PARTNER BUTTONS
========================================================= */

.ecn-partner-actions {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 12px;
}


.ecn-btn-primary {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 12px 18px;

    border: 1px solid #ffffff;

    border-radius: 9px;

    background: #ffffff;

    color: #0b1220;

    font-size: 13px;

    font-weight: 750;

    cursor: pointer;

    transition: 0.2s ease;
}


.ecn-btn-primary:hover {
    background: #f1f5f9;

    transform: translateY(-1px);
}


.ecn-btn-primary i {
    font-size: 11px;
}


.ecn-btn-secondary {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding: 11px 15px;

    border: 1px solid #263449;

    border-radius: 9px;

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

    color: #94a3b8;

    text-decoration: none;

    font-size: 12px;

    transition: 0.2s ease;
}


.ecn-btn-secondary:hover {
    color: #ffffff;

    border-color: #3b4c65;

    background: rgba(255, 255, 255, 0.04);
}


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

.ecn-pricing-grid {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 12px;
}


.ecn-price-card {
    min-height: 132px;

    padding: 18px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.045),
            rgba(255,255,255,0.018)
        );

    border: 1px solid #1c2a3d;

    border-radius: 12px;

    transition:
        border-color 0.2s ease,
        transform 0.2s ease,
        background 0.2s ease;
}


.ecn-price-card:hover {
    transform: translateY(-3px);

    border-color: #33445b;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.07),
            rgba(255,255,255,0.025)
        );
}


.ecn-price-label {
    display: inline-block;

    align-self: flex-start;

    padding-bottom: 6px;

    border-bottom: 2px solid #263449;

    color: #64748b;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.2px;
}


.ecn-price {
    margin-top: 10px;

    color: #f8fafc;

    font-size: 23px;

    line-height: 1;

    font-weight: 750;
}


.ecn-price small {
    color: #64748b;

    font-size: 11px;

    font-weight: 500;
}


.ecn-price-status {
    display: flex;

    align-items: center;

    gap: 6px;

    margin-top: 12px;

    color: #64748b;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 0.8px;
}


.ecn-price-status span {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #22c55e;

    box-shadow:
        0 0 0 3px rgba(34, 197, 94, 0.08);
}


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

.ecn-footer {
    margin-top: 30px;

    padding: 40px 0 20px;

    border-top: 1px solid #e2e8f0;
}


.ecn-footer-grid {
    display: grid;

    grid-template-columns:
        1.2fr
        1.3fr
        1fr;

    gap: 50px;

    padding-bottom: 35px;
}


/* =========================================================
   FOOTER BRAND
========================================================= */

.ecn-footer-logo {
    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 15px;
}


.ecn-logo-icon {
    width: 39px;
    height: 39px;

    display: flex;

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

    border-radius: 10px;

    background: #eef2ff;

    color: #4f46e5;

    font-size: 17px;
}


.ecn-footer-logo strong {
    display: block;

    color: #172554;

    font-size: 21px;

    line-height: 1;

    font-weight: 850;

    letter-spacing: -0.5px;
}


.ecn-footer-logo small {
    display: block;

    margin-top: 4px;

    color: #94a3b8;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 1px;
}


.ecn-footer-brand p {
    max-width: 310px;

    margin: 0;

    color: #64748b;

    font-size: 12px;

    line-height: 1.7;
}


/* =========================================================
   FOOTER COLUMNS
========================================================= */

.ecn-footer-title {
    display: inline-block;

    margin-bottom: 17px;

    padding-bottom: 5px;

    border-bottom: 2px solid #e2e8f0;

    color: #64748b;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.5px;
}


.ecn-footer-column ul {
    list-style: none;

    margin: 0;

    padding: 0;
}


.ecn-footer-column li {
    display: flex;

    align-items: flex-start;

    gap: 9px;

    margin-bottom: 11px;

    color: #475569;

    font-size: 12px;

    line-height: 1.5;
}


.ecn-footer-column li i {
    margin-top: 2px;

    color: #10b981;

    font-size: 11px;
}


/* =========================================================
   FOOTER CONTACT
========================================================= */

.ecn-footer-phone {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 7px;

    color: #fff;

    text-decoration: none;

    font-size: 18px;

    font-weight: 750;
}


.ecn-footer-phone i {
    color: #4f46e5;

    font-size: 14px;
}


.ecn-footer-note {
    margin: 0 0 13px;

    color: #94a3b8;

    font-size: 10px;
}


.ecn-footer-email {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    color: #64748b;

    text-decoration: none;

    font-size: 11px;

    transition: color 0.2s ease;
}


.ecn-footer-email:hover {
    color: #4f46e5;
}


/* =========================================================
   FOOTER BOTTOM
========================================================= */

.ecn-footer-bottom {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding-top: 19px;

    border-top: 1px solid #f1f5f9;

    color: #94a3b8;

    font-size: 10px;
}


.ecn-footer-secure {
    display: inline-flex;

    align-items: center;

    gap: 6px;
}


.ecn-footer-secure i {
    color: #10b981;

    font-size: 10px;
}


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

@media (max-width: 1000px) {

    .ecn-partner-main {
        grid-template-columns: 1fr;

        gap: 35px;
    }

    .ecn-pricing-grid {
        max-width: 650px;
    }

    .ecn-footer-grid {
        grid-template-columns:
            1fr 1fr;
    }

    .ecn-footer-brand {
        grid-column: 1 / -1;
    }

}


@media (max-width: 700px) {

    .page-sections-container {
        padding: 0 14px;
    }


    /* SOS */

    .ecn-sos-banner {
        flex-direction: column;

        align-items: flex-start;

        padding: 25px 22px;

        gap: 22px;
    }


    .ecn-sos-content h2 {
        font-size: 22px;
    }


    .ecn-sos-action {
        width: 100%;
    }


    .ecn-btn-sos {
        width: 100%;
    }


    /* PARTNER */

    .ecn-partner-section {
        padding: 30px 20px;

        border-radius: 15px;
    }


    .ecn-partner-content h2 {
        font-size: 28px;
    }


    .ecn-partner-actions {
        align-items: stretch;

        flex-direction: column;
    }


    .ecn-btn-primary,
    .ecn-btn-secondary {
        width: 100%;

        justify-content: center;
    }


    .ecn-pricing-grid {
        grid-template-columns: 1fr 1fr;
    }


    /* FOOTER */

    .ecn-footer {
        padding-top: 30px;
    }


    .ecn-footer-grid {
        grid-template-columns: 1fr;

        gap: 30px;
    }


    .ecn-footer-brand {
        grid-column: auto;
    }


    .ecn-footer-bottom {
        flex-direction: column;

        align-items: flex-start;

        line-height: 1.5;
    }

}


@media (max-width: 430px) {

    .ecn-pricing-grid {
        grid-template-columns: 1fr;
    }

    .ecn-price-card {
        min-height: 120px;
    }

}

/* =========================================================
   ECN GLOBAL THEME TEXT OVERRIDE
   PUT THIS AT THE VERY END OF YOUR CSS
========================================================= */

/* =========================================================
   THEME VARIABLES
========================================================= */

:root {
    --ecn-page-text: #ffffff;
    --ecn-page-heading: #ffffff;
    --ecn-page-muted: #94a3b8;
    --ecn-page-border: rgba(255,255,255,.08);
}

/* =========================================================
   DARK MODE
========================================================= */

body.dark {

    --ecn-page-text: #ffffff;
    --ecn-page-heading: #ffffff;
    --ecn-page-muted: #94a3b8;
    --ecn-page-border: rgba(255,255,255,.08);

    color: var(--ecn-page-text);
}


/* =========================================================
   LIGHT MODE
========================================================= */

body.light {

    --ecn-page-text: #111827;
    --ecn-page-heading: #000000;
    --ecn-page-muted: #475569;
    --ecn-page-border: #dbe4ef;

    color: var(--ecn-page-text);
}


/* =========================================================
   GLOBAL PAGE TEXT
========================================================= */

body.light,
body.light p,
body.light span,
body.light div,
body.light li,
body.light h1,
body.light h2,
body.light h3,
body.light h4,
body.light h5,
body.light h6,
body.light strong,
body.light small,
body.light label {

    color: var(--ecn-page-text);
}


/* =========================================================
   GLOBAL HEADINGS — LIGHT
========================================================= */

body.light h1,
body.light h2,
body.light h3,
body.light h4,
body.light h5,
body.light h6 {

    color: #000000;
}


/* =========================================================
   GLOBAL MUTED TEXT — LIGHT
========================================================= */

body.light p,
body.light small {

    color: #475569;
}


/* =========================================================
   GLOBAL TEXT — DARK
========================================================= */

body.dark h1,
body.dark h2,
body.dark h3,
body.dark h4,
body.dark h5,
body.dark h6 {

    color: #ffffff;
}


body.dark p,
body.dark small {

    color: #94a3b8;
}


/* =========================================================
   MARQUEE — LIGHT MODE
========================================================= */

/* Speciality marquee */

body.light .speciality-card span {

    color: #111827 !important;
}

body.light .speciality-card {

    color: #111827 !important;
}

body.light .speciality-card i {

    color: #2563eb !important;
}


/* Hospital marquee */

body.light .hospital-card h3 {

    color: #111827 !important;
}

body.light .hospital-card p {

    color: #475569 !important;
}

body.light .hospital-meta span {

    color: #334155 !important;
}


/* =========================================================
   MARQUEE — DARK MODE
========================================================= */

body.dark .speciality-card span {

    color: #ffffff !important;
}

body.dark .hospital-card h3 {

    color: #ffffff !important;
}

body.dark .hospital-card p {

    color: #94a3b8 !important;
}

body.dark .hospital-meta span {

    color: #cbd5e1 !important;
}


/* =========================================================
   CATEGORY MARQUEE / CHIPS
========================================================= */

body.light .category-chip {

    color: #111827 !important;

    background: #ffffff;

    border-color: #dbe4ef;
}

body.light .category-chip:hover {

    color: #000000 !important;

    background: #eff6ff;

    border-color: #93c5fd;
}

body.light .active-chip {

    color: #111827 !important;

    background: #eff6ff;

    border-color: #93c5fd;
}


/* DARK */

body.dark .category-chip {

    color: #cbd5e1 !important;
}

body.dark .active-chip {

    color: #ffffff !important;
}


/* =========================================================
   SECTION HEADINGS
========================================================= */

body.light .section-top h2,
body.light .hero-heading,
body.light .hero-title,
body.light .hero-title .highlight,
body.light .ecn-abcd-heading h2,
body.light .ecn-abcd-heading h2 span {

    color: #000000 !important;
}


body.dark .section-top h2,
body.dark .hero-heading,
body.dark .hero-title,
body.dark .ecn-abcd-heading h2 {

    color: #ffffff !important;
}


/* =========================================================
   HERO TEXT
========================================================= */

body.light .hero-description,
body.light .hero-text {

    color: #475569 !important;
}


body.dark .hero-description,
body.dark .hero-text {

    color: #94a3b8 !important;
}


/* =========================================================
   HERO METRICS
========================================================= */

body.light .hero-metrics span {

    color: #111827 !important;

    background: #ffffff;

    border-color: #dbe4ef;
}


body.light .hero-metrics span i {

    color: #2563eb !important;
}


body.dark .hero-metrics span {

    color: #dbe4ef !important;
}


/* =========================================================
   TRUST BAR
========================================================= */

body.light .trust-item {

    background: #ffffff;

    border-color: #dbe4ef;
}


body.light .trust-desc {

    color: #475569 !important;
}


body.dark .trust-desc {

    color: #94a3b8 !important;
}


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

body.light .feature-item {

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f8fafc
        );

    border-color: #dbe4ef;
}


body.light .feature-item .description {

    color: #475569 !important;
}


body.light .feature-item .title {

    /* Keep semantic accent colors */
    color: inherit;
}


/* DARK */

body.dark .feature-item .description {

    color: #94a3b8 !important;
}


/* =========================================================
   ECN ABCD SERVICE CARDS
========================================================= */

body.light .ecn-service-card {

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f8fafc
        );

    border-color: #dbe4ef;
}


body.light .ecn-service-content h3 {

    color: #000000 !important;
}


body.light .ecn-service-content p {

    color: #475569 !important;
}


body.light .ecn-service-link {

    color: #111827 !important;
}


body.dark .ecn-service-content h3 {

    color: #ffffff !important;
}


body.dark .ecn-service-content p {

    color: #94a3b8 !important;
}


body.dark .ecn-service-link {

    color: #ffffff !important;
}


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

body.light .service-card {

    color: #111827 !important;
}


body.light .service-card .card-content h2 {

    color: #ffffff !important;

    /*
       Card has dark gradient overlay,
       so this remains white for readability.
    */
}


body.light .service-card .card-content p {

    color: #cbd5e1 !important;
}


body.light .service-card .open-link {

    color: #38bdf8 !important;
}


/* DARK */

body.dark .service-card .card-content h2 {

    color: #ffffff !important;
}

body.dark .service-card .card-content p {

    color: #94a3b8 !important;
}


/* =========================================================
   SOS BANNER
========================================================= */

body.light .ecn-sos-content h2 {

    color: #111827 !important;
}


body.light .ecn-sos-content p {

    color: #475569 !important;
}


body.dark .ecn-sos-content h2 {

    color: #ffffff !important;
}


body.dark .ecn-sos-content p {

    color: #94a3b8 !important;
}


/* =========================================================
   PARTNER SECTION
========================================================= */

body.light .ecn-partner-section {

    color: #111827;
}


body.light .ecn-partner-content h2 {

    color: #111827 !important;
}


body.light .ecn-partner-content p {

    color: #475569 !important;
}


/* DARK */

body.dark .ecn-partner-content h2 {

    color: #ffffff !important;
}


body.dark .ecn-partner-content p {

    color: #94a3b8 !important;
}


/* =========================================================
   PRICING CARDS
========================================================= */

body.light .ecn-price-card {

    background: #ffffff;

    border-color: #dbe4ef;
}


body.light .ecn-price-label {

    color: #64748b !important;
}


body.light .ecn-price {

    color: #111827 !important;
}


body.light .ecn-price small {

    color: #64748b !important;
}


body.light .ecn-price-status {

    color: #64748b !important;
}


/* DARK */

body.dark .ecn-price {

    color: #ffffff !important;
}


/* =========================================================
   FOOTER — LIGHT
========================================================= */

body.light .ecn-footer {

    border-top-color: #dbe4ef;
}


body.light .ecn-footer-logo strong {

    color: #111827 !important;
}


body.light .ecn-footer-logo small {

    color: #64748b !important;
}


body.light .ecn-footer-brand p {

    color: #475569 !important;
}


body.light .ecn-footer-title {

    color: #475569 !important;

    border-bottom-color: #dbe4ef;
}


body.light .ecn-footer-column li {

    color: #334155 !important;
}


body.light .ecn-footer-phone {

    color: #111827 !important;
}


body.light .ecn-footer-email {

    color: #475569 !important;
}


body.light .ecn-footer-bottom {

    color: #64748b !important;

    border-top-color: #e2e8f0;
}


/* =========================================================
   FOOTER — DARK
========================================================= */

body.dark .ecn-footer {

    border-top-color: rgba(255,255,255,.08);
}


body.dark .ecn-footer-logo strong {

    color: #ffffff !important;
}


body.dark .ecn-footer-logo small {

    color: #94a3b8 !important;
}


body.dark .ecn-footer-brand p {

    color: #94a3b8 !important;
}


body.dark .ecn-footer-title {

    color: #cbd5e1 !important;
}


body.dark .ecn-footer-column li {

    color: #cbd5e1 !important;
}


body.dark .ecn-footer-phone {

    color: #ffffff !important;
}


body.dark .ecn-footer-email {

    color: #94a3b8 !important;
}


body.dark .ecn-footer-bottom {

    color: #94a3b8 !important;
}


/* =========================================================
   NAVBAR
========================================================= */

body.light .logo-text h1 {

    color: #111827 !important;
}


body.light .logo-text p {

    color: #64748b !important;
}


body.dark .logo-text h1 {

    color: #ffffff !important;
}


body.dark .logo-text p {

    color: #94a3b8 !important;
}


/* =========================================================
   HELPLINE / SIGN IN
========================================================= */

body.light .helplines-btn,
body.light .signin-btn {

    color: #111827 !important;
}


body.dark .helplines-btn {

    color: #111827 !important;

    /*
       White helpline button intentionally keeps dark text
       because its background is white.
    */
}


/* =========================================================
   DROPDOWN
========================================================= */

body.light .dropdown-menu {

    background: #ffffff;

    color: #111827;
}


body.light .dropdown-card h4 {

    color: #111827 !important;
}


body.light .dropdown-card p {

    color: #64748b !important;
}


body.dark .dropdown-menu {

    background: #ffffff;

    color: #111827;
}


/* =========================================================
   LINKS
========================================================= */

body.light a {

    color: #111827;
}


body.dark a {

    color: inherit;
}


/* =========================================================
   FORCE COMMON WHITE TEXT TO DARK IN LIGHT MODE
   EXCLUDES BUTTONS / DARK SERVICE CARD CONTENT
========================================================= */

body.light .section-top h2,
body.light .hospital-card h3,
body.light .ecn-abcd-heading h2,
body.light .ecn-service-content h3,
body.light .hero-heading {

    color: #000000 !important;
}


/* =========================================================
   IMPORTANT:
   NEVER TURN THESE WHITE IN LIGHT MODE
   Because they are white-background controls
========================================================= */

body.light .dropdown-btn,
body.light .btn-signin,
body.light .helplines-btn,
body.light .btn-light {

    background: #ffffff !important;

    color: #111827 !important;
}


/* =========================================================
   ACCESSIBILITY
========================================================= */

body.light .ecn-service-link:focus-visible,
body.light a:focus-visible,
body.light button:focus-visible {

    outline: 2px solid #2563eb;

    outline-offset: 3px;
}

/* =========================================================
   PARTNER PROGRAMME — LIGHT MODE FIX
========================================================= */

body:not(.dark) .ecn-partner-section {
    color: #0f172a;
}

/* Section label */
body:not(.dark) .ecn-partner-section .ecn-section-label {
    color: #15803d;
}

body:not(.dark) .ecn-partner-section .ecn-section-label span {
    color: #15803d;
}

/* Main heading */
body:not(.dark) .ecn-partner-section .ecn-partner-content h2 {
    color: #0f172a;
}

/* Description */
body:not(.dark) .ecn-partner-section .ecn-partner-content p {
    color: #475569;
}

/* Primary button */
body:not(.dark) .ecn-partner-section .ecn-btn-primary {
    color: #ffffff;
}

/* Secondary email button */
body:not(.dark) .ecn-partner-section .ecn-btn-secondary {
    color: #334155;
}

body:not(.dark) .ecn-partner-section .ecn-btn-secondary i {
    color: #15803d;
}

body:not(.dark) .ecn-partner-section .ecn-btn-secondary span {
    color: #334155;
}

/* =========================================================
   PRICING CARDS — LIGHT MODE
========================================================= */

body:not(.dark) .ecn-partner-section .ecn-price-card {
    color: #0f172a;
}

body:not(.dark) .ecn-partner-section .ecn-price-label {
    color: #64748b;
}

body:not(.dark) .ecn-partner-section .ecn-price {
    color: #0f172a;
}

body:not(.dark) .ecn-partner-section .ecn-price small {
    color: #64748b;
}

body:not(.dark) .ecn-partner-section .ecn-price-status {
    color: #15803d;
}

body:not(.dark) .ecn-partner-section .ecn-price-status span {
    background: #22c55e;
}

body:not(.dark) .ecn-partner-section {
    background: #ffffff;
}

body:not(.dark) .ecn-partner-section .ecn-price-card {
    background: #f8fafc;
    border-color: #e2e8f0;
}

body.dark .ecn-partner-section {
    
}

/* =========================================================
   ECN SERVICES — PREMIUM 2 × 2 GRID
========================================================= */

.ecn-services-grid {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;

    display: grid;

    /* EXACTLY 2 COLUMNS */
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 24px;
}


/* =========================================================
   PREMIUM SERVICE CARD
========================================================= */

.ecn-services-grid .ecn-service-card {

    position: relative;

    min-height: 310px;

    padding: 26px;

    border-radius: 22px;

    overflow: hidden;

    display: flex;
    flex-direction: column;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.98),
            rgba(248,250,252,0.96)
        );

    border: 1px solid rgba(15,23,42,0.08);

    box-shadow:
        0 12px 35px rgba(15,23,42,0.08),
        0 2px 8px rgba(15,23,42,0.04);

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


/* =========================================================
   HOVER
========================================================= */

.ecn-services-grid .ecn-service-card:hover {

    transform: translateY(-6px);

    box-shadow:
        0 20px 50px rgba(15,23,42,0.13),
        0 5px 15px rgba(15,23,42,0.06);

    border-color: rgba(15,23,42,0.14);
}


/* =========================================================
   TOP AREA
========================================================= */

.ecn-services-grid .ecn-service-top {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    margin-bottom: 24px;
}


/* =========================================================
   A / B / C / D LETTER
========================================================= */

.ecn-services-grid .ecn-service-index {

    width: 42px;
    height: 42px;

    display: flex;

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

    border-radius: 12px;

    background: #f1f5f9;

    color: #0f172a;

    font-size: 14px;

    font-weight: 800;

    letter-spacing: 0.08em;
}


/* =========================================================
   IMAGE CONTAINER
========================================================= */

.ecn-services-grid .ecn-service-icon {

    width: 82px;
    height: 82px;

    flex-shrink: 0;

    border-radius: 18px;

    overflow: hidden;

    display: flex;

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

    background: #f8fafc;

    box-shadow:
        0 8px 20px rgba(15,23,42,0.12);

    border: 4px solid rgba(255,255,255,0.9);
}


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

.ecn-services-grid .ecn-service-icon img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    transition:
        transform 0.4s ease;
}


/* =========================================================
   IMAGE HOVER
========================================================= */

.ecn-services-grid
.ecn-service-card:hover
.ecn-service-icon img {

    transform: scale(1.08);
}


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

.ecn-services-grid .ecn-service-content {

    flex: 1;

    display: flex;

    flex-direction: column;
}


/* =========================================================
   TITLE
========================================================= */

.ecn-services-grid .ecn-service-content h3 {

    margin: 0 0 10px;

    color: #0f172a;

    font-size: 22px;

    font-weight: 750;

    letter-spacing: -0.02em;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.ecn-services-grid .ecn-service-content p {

    margin: 0;

    max-width: 430px;

    color: #64748b;

    font-size: 15px;

    line-height: 1.7;
}


/* =========================================================
   OPEN LINK
========================================================= */

.ecn-services-grid .ecn-service-link {

    margin-top: auto;

    padding-top: 22px;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    width: fit-content;

    color: #0f172a;

    font-size: 14px;

    font-weight: 700;

    text-decoration: none;

    transition:
        gap 0.25s ease,
        color 0.25s ease;
}


.ecn-services-grid .ecn-service-link:hover {

    gap: 13px;
}


/* =========================================================
   OPTIONAL IMAGE ACCENT COLORS
========================================================= */

.ecn-services-grid .ecn-service-icon.red {
    background: #fff1f2;
}

.ecn-services-grid .ecn-service-icon.blue {
    background: #eff6ff;
}

.ecn-services-grid .ecn-service-icon.green {
    background: #f0fdf4;
}


/* =========================================================
   DARK MODE
   WHITE TEXT — LIGHT MODE REMAINS UNCHANGED
========================================================= */

body.dark .ecn-services-grid .ecn-service-card {

    background:
        linear-gradient(
            145deg,
            rgba(17,24,39,0.98),
            rgba(15,23,42,0.96)
        );

    border-color: rgba(255,255,255,0.08);

    box-shadow:
        0 15px 40px rgba(0,0,0,0.25);
}


body.dark .ecn-services-grid .ecn-service-index {

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

    color: #ffffff;
}


body.dark .ecn-services-grid .ecn-service-content h3 {

    color: #ffffff;
}


body.dark .ecn-services-grid .ecn-service-content p {

    color: #94a3b8;
}


body.dark .ecn-services-grid .ecn-service-link {

    color: #ffffff;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .ecn-services-grid {

        /* 1 COLUMN ON MOBILE */

        grid-template-columns: 1fr;

        gap: 18px;
    }


    .ecn-services-grid .ecn-service-card {

        min-height: 280px;

        padding: 22px;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

    .ecn-services-grid .ecn-service-card {

        min-height: 260px;

        padding: 20px;

        border-radius: 18px;
    }


    .ecn-services-grid .ecn-service-icon {

        width: 70px;
        height: 70px;

        border-radius: 15px;
    }


    .ecn-services-grid .ecn-service-content h3 {

        font-size: 20px;
    }
}

/* =========================================================
   ENROLL YOUR FACILITY BUTTON — LIGHT MODE
========================================================= */

.ecn-btn-primary {
    color: #ffffff !important;
    background: #0f172a;
}

.ecn-btn-primary i {
    color: #ffffff !important;
}


/* =========================================================
   ENROLL YOUR FACILITY BUTTON — DARK MODE
========================================================= */

body.dark .ecn-btn-primary {
    color: #ffffff !important;
    background: #2563eb;
}

body.dark .ecn-btn-primary i {
    color: #ffffff !important;
}


/* =========================================================
   HOVER
========================================================= */

.ecn-btn-primary:hover {
    color: #ffffff !important;
}

.ecn-btn-primary:hover i {
    color: #ffffff !important;
}

/* =========================================================
   ENROLL YOUR FACILITY — PRIMARY BUTTON
========================================================= */

.ecn-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    padding: 13px 20px;

    border-radius: 12px;

    background: #0f172a;
    color: #ffffff !important;

    font-size: 14px;
    font-weight: 700;

    line-height: 1;
    text-decoration: none !important;

    border: 1px solid #0f172a;

    cursor: pointer;

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


/* =========================================================
   ARROW ICON
========================================================= */

.ecn-btn-primary i {
    color: #ffffff !important;

    font-size: 13px;

    transition:
        transform 0.25s ease;
}


/* =========================================================
   HOVER
========================================================= */

.ecn-btn-primary:hover {
    color: #ffffff !important;

    background: #1e293b;

    border-color: #1e293b;

    transform: translateY(-2px);

    box-shadow:
        0 8px 20px rgba(15, 23, 42, 0.18);
}


.ecn-btn-primary:hover i {
    color: #ffffff !important;

    transform: translateX(4px);
}


/* =========================================================
   DARK MODE
========================================================= */

body.dark .ecn-btn-primary {
    background: #2563eb;

    color: #ffffff !important;

    border-color: #2563eb;
}


body.dark .ecn-btn-primary i {
    color: #ffffff !important;
}


/* =========================================================
   DARK MODE HOVER
========================================================= */

body.dark .ecn-btn-primary:hover {
    background: #3b82f6;

    border-color: #3b82f6;

    color: #ffffff !important;

    box-shadow:
        0 8px 25px rgba(37, 99, 235, 0.30);
}


body.dark .ecn-btn-primary:hover i {
    color: #ffffff !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .ecn-btn-primary {
        width: 100%;

        padding: 14px 18px;

        justify-content: center;
    }
}

/* =========================================================
   ECN PREMIUM HERO HIGHLIGHT — DARK & LIGHT MODE
========================================================= */

/* Dark mode */
.hero-title .highlight {
    background: linear-gradient(
        100deg,
        #ffffff 0%,
        #38bdf8 45%,
        #f87171 100%
    );

    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;

    color: transparent;
    font-weight: 900;
    filter: drop-shadow(0 2px 8px rgba(56, 189, 248, 0.12));
}

/* Premium, visible light mode */
body.light .hero-title .highlight {
    background: linear-gradient(
        100deg,
        #1d4ed8 0%,
        #0369a1 55%,
        #b91c1c 100%
    );

    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;

    color: transparent;
    filter: none;
}

/* Ensure the gradient remains readable on mobile */
@media (max-width: 768px) {
    .hero-title .highlight {
        background-size: 100% 100%;
    }
}


/* =========================================================
   ECN — SMOOTH DIAGNOSTICS & PHARMACY MARQUEES
   Diagnostics: Right → Left
   Pharmacies: Left → Right
   Hover: Pause
========================================================= */

/* MARQUEE VIEWPORT */
#partner-diagnostics .hospital-marquee,
#partner-pharmacies .hospital-marquee {
    display: block;
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    isolation: isolate;
}

/* ANIMATED TRACK */
#partner-diagnostics .hospital-track,
#partner-pharmacies .hospital-track {
    display: flex;
    flex-flow: row nowrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: 18px;

    width: max-content;
    max-width: none;
    margin: 0;
    padding: 10px 0;
    box-sizing: border-box;

    animation-duration: 24s !important;
    animation-timing-function: linear !important;
    animation-iteration-count: infinite !important;
    animation-play-state: running;

    will-change: transform;
    backface-visibility: hidden;
}

/* CONSISTENT CARD WIDTH */
#partner-diagnostics .hospital-track > .hospital-card,
#partner-pharmacies .hospital-track > .hospital-card {
    flex: 0 0 270px;
    width: 270px;
    min-width: 270px;
    max-width: 270px;
    box-sizing: border-box;
}

/* DIAGNOSTICS: RIGHT TO LEFT */
#partner-diagnostics .hospital-track {
    animation-name: ecnDiagnosticsRTL !important;
}

/* PHARMACIES: LEFT TO RIGHT */
#partner-pharmacies .hospital-track {
    animation-name: ecnPharmacyLTR !important;
}

/* CONTINUOUS LOOP — TWO IDENTICAL CARD SETS */
@keyframes ecnDiagnosticsRTL {
    from {
        transform: translate3d(0, 0, 0);
    }
    to {
        transform: translate3d(-50%, 0, 0);
    }
}

@keyframes ecnPharmacyLTR {
    from {
        transform: translate3d(-50%, 0, 0);
    }
    to {
        transform: translate3d(0, 0, 0);
    }
}

/* PAUSE ON HOVER — DO NOT CHANGE SPEED */
#partner-diagnostics .hospital-marquee:hover .hospital-track,
#partner-pharmacies .hospital-marquee:hover .hospital-track,
#partner-diagnostics .hospital-marquee:focus-within .hospital-track,
#partner-pharmacies .hospital-marquee:focus-within .hospital-track {
    animation-play-state: paused !important;
}

/* MOBILE RESPONSIVENESS */
@media (max-width: 768px) {
    #partner-diagnostics .hospital-track,
    #partner-pharmacies .hospital-track {
        gap: 14px;
        animation-duration: 28s !important;
    }

    #partner-diagnostics .hospital-track > .hospital-card,
    #partner-pharmacies .hospital-track > .hospital-card {
        flex-basis: 230px;
        width: 230px;
        min-width: 230px;
        max-width: 230px;
    }
}

/* ACCESSIBILITY */
@media (prefers-reduced-motion: reduce) {
    #partner-diagnostics .hospital-track,
    #partner-pharmacies .hospital-track {
        animation: none !important;
        transform: none !important;
    }
}
.hospital-logo-img {
    width: 50px;
    height: 50px;
    object-fit: contain;
    display: block;
    border-radius: 8px;
}


/* =========================================================
   ECN PREMIUM HOSPITAL DIRECTORY
   Existing site background preserved
========================================================= */

#partner-hospitals.ecn-directory {
    width: 100%;
    max-width: 1440px;
    margin-inline: auto;
    padding: clamp(20px, 3vw, 38px);
    color: inherit;
    background: transparent;
    font-family: inherit;
    box-sizing: border-box;
}

#partner-hospitals.ecn-directory *,
#partner-hospitals.ecn-directory *::before,
#partner-hospitals.ecn-directory *::after {
    box-sizing: border-box;
}

/* Directory header */

.ecn-directory-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 28px;
}

.ecn-heading-copy {
    min-width: 0;
}

.ecn-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 12px;
    border: 1px solid rgba(29, 78, 216, 0.25);
    border-radius: 30px;
    color: #2563eb;
    background: rgba(29, 78, 216, 0.07);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.3px;
}

.ecn-directory-heading h2 {
    margin: 16px 0 9px;
    font-size: clamp(27px, 3vw, 38px);
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -1.1px;
    color: inherit;
}

.ecn-directory-heading p {
    max-width: 600px;
    margin: 0;
    font-size: 14px;
    line-height: 1.8;
    opacity: 0.72;
}

/* Locality filter panel */

.ecn-directory-filter {
    padding: clamp(18px, 2.5vw, 26px);
    margin-bottom: 30px;
    border: 1px solid rgba(128, 128, 128, 0.22);
    border-radius: 18px;
    background: rgba(128, 128, 128, 0.045);
}

.ecn-directory-filter label {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 12px;
    color: inherit;
    font-size: 13px;
    font-weight: 750;
}

.ecn-directory-filter label i {
    color: #2563eb;
    font-size: 15px;
}

.ecn-directory-filter select {
    display: block;
    width: 100%;
    min-height: 52px;
    padding: 0 16px;
    border: 1px solid rgba(128, 128, 128, 0.3);
    border-radius: 12px;
    background-color: transparent;
    color: inherit;
    font: inherit;
    font-size: 14px;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s ease,
                box-shadow 0.2s ease;
}

.ecn-directory-filter select:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.10);
}

.ecn-directory-filter select option,
.ecn-directory-filter select optgroup {
    color: #111827;
    background: #ffffff;
}

.ecn-filter-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 12px 0 0;
    font-size: 12px;
    line-height: 1.7;
    opacity: 0.65;
}

.ecn-filter-note i {
    margin-top: 3px;
    flex-shrink: 0;
}

/* Results toolbar */

.ecn-results-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.ecn-results-heading h3 {
    margin: 0 0 7px;
    color: inherit;
    font-size: clamp(18px, 2vw, 22px);
    font-weight: 800;
    letter-spacing: -0.4px;
}

.ecn-results-heading p {
    margin: 0;
    font-size: 12px;
    line-height: 1.6;
    opacity: 0.68;
}

.ecn-reset-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-shrink: 0;
    padding: 10px 14px;
    border: 1px solid rgba(128, 128, 128, 0.3);
    border-radius: 10px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.2s ease,
                color 0.2s ease,
                transform 0.2s ease;
}

.ecn-reset-btn:hover {
    color: #2563eb;
    border-color: #2563eb;
    transform: translateY(-1px);
}

/* Responsive hospital grid */

.ecn-hospital-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
}

/* Hospital listing card */

.ecn-directory-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 21px;
    border: 1px solid rgba(128, 128, 128, 0.22);
    border-radius: 17px;
    background: rgba(128, 128, 128, 0.035);
    overflow: hidden;
    transition: transform 0.22s ease,
                border-color 0.22s ease,
                box-shadow 0.22s ease;
}

.ecn-directory-card:hover {
    transform: translateY(-4px);
    border-color: rgba(37, 99, 235, 0.48);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.07);
}

.ecn-directory-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}

.ecn-directory-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    flex-shrink: 0;
    padding: 9px;
    border: 1px solid rgba(128, 128, 128, 0.17);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.85);
}

.ecn-directory-logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ecn-directory-rating {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 9px;
    border: 1px solid rgba(37, 99, 235, 0.2);
    border-radius: 9px;
    color: #2563eb;
    background: rgba(37, 99, 235, 0.06);
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.ecn-directory-rating i {
    font-size: 11px;
}

.ecn-directory-card h4 {
    margin: 0 0 8px;
    color: inherit;
    font-size: 18px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: -0.3px;
}

.ecn-directory-card .ecn-hospital-description {
    min-height: 40px;
    margin: 0 0 16px;
    font-size: 12px;
    line-height: 1.7;
    opacity: 0.7;
}

.ecn-hospital-location {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 0;
    margin-top: auto;
    border-top: 1px solid rgba(128, 128, 128, 0.17);
    color: inherit;
    font-size: 12px;
    line-height: 1.6;
}

.ecn-hospital-location i {
    margin-top: 3px;
    color: #2563eb;
}

.ecn-hospital-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 9px;
    margin-top: 12px;
}

.ecn-hospital-actions a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    min-height: 41px;
    padding: 9px 8px;
    border: 1px solid rgba(128, 128, 128, 0.25);
    border-radius: 9px;
    color: inherit;
    background: transparent;
    text-align: center;
    text-decoration: none;
    font-size: 11px;
    font-weight: 750;
    transition: 0.2s ease;
}

.ecn-hospital-actions a:hover {
    border-color: #2563eb;
    color: #2563eb;
}

.ecn-hospital-actions a.ecn-primary-action {
    border-color: #1d4ed8;
    background: #1d4ed8;
    color: #ffffff;
}

.ecn-hospital-actions a.ecn-primary-action:hover {
    background: #1e40af;
    border-color: #1e40af;
    color: #ffffff;
}

/* Empty / loading states */

.ecn-empty-state {
    grid-column: 1 / -1;
    padding: 36px 20px;
    border: 1px dashed rgba(128, 128, 128, 0.35);
    border-radius: 15px;
    text-align: center;
    font-size: 13px;
    line-height: 1.8;
    opacity: 0.75;
}

.ecn-directory-disclaimer {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 24px 0 0;
    font-size: 11px;
    line-height: 1.8;
    opacity: 0.65;
}

.ecn-directory-disclaimer i {
    margin-top: 4px;
    flex-shrink: 0;
}

/* Keep compatibility with existing theme classes */

#partner-hospitals.ecn-directory a:focus-visible,
#partner-hospitals.ecn-directory button:focus-visible,
#partner-hospitals.ecn-directory select:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 3px;
}

/* Tablet */

@media (max-width: 950px) {
    .ecn-hospital-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }
}

/* Mobile */

@media (max-width: 600px) {
    #partner-hospitals.ecn-directory {
        padding: 20px 15px;
    }

    .ecn-directory-heading {
        gap: 16px;
        margin-bottom: 22px;
    }

    .ecn-directory-heading h2 {
        font-size: 27px;
    }

    .ecn-directory-heading p {
        font-size: 13px;
    }

    .ecn-directory-filter {
        padding: 16px;
        border-radius: 14px;
        margin-bottom: 24px;
    }

    .ecn-results-heading {
        align-items: flex-start;
    }

    .ecn-reset-btn {
        padding: 9px 10px;
    }

    .ecn-hospital-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 13px;
    }

    .ecn-directory-card {
        padding: 18px;
    }

    .ecn-directory-card .ecn-hospital-description {
        min-height: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ecn-directory-card,
    .ecn-reset-btn,
    .ecn-hospital-actions a {
        transition: none;
    }

    .ecn-directory-card:hover,
    .ecn-reset-btn:hover {
        transform: none;
    }
}

/* ECN PWA Install Button */
.ecn-install-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  background: linear-gradient(135deg, #d4af37, #f3d878);
  color: #0b0f19;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ecn-install-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 16px rgba(212, 175, 55, 0.25);
}

.ecn-install-btn[hidden] {
  display: none !important;
}

@media (max-width: 600px) {
  .ecn-install-btn {
    padding: 9px 11px;
    font-size: 12px;
  }
}