/* ====================================    UNI-CARE CLINIC PREMIUM WEBSITE CSS    =================================== */

:root {
    --clinic-primary: #0d6efd;
    --clinic-success: #008f6b;
    --clinic-dark: #072f4f;
    --clinic-danger: #dc3545;
    --clinic-warning: #ffc107;
    --clinic-light: #f5f9fc;
    --clinic-soft: #eef8f5;
    --clinic-text: #263238;
    --clinic-muted: #6c757d;
    --clinic-white: #ffffff;
    --shadow-soft: 0 12px 35px rgba(0, 0, 0, 0.08);
    --shadow-strong: 0 18px 50px rgba(0, 0, 0, 0.18);
    --transition: all 0.35s ease;
    /* --background-color: #0a0236;  */
    /* Background color for the entire website, including individual sections */
}

* {
    box-sizing: border-box;
}

body {
    font-family: "Segoe UI", Arial, sans-serif;
    color: var(--clinic-text);
    background: #fff;
    overflow-x: hidden;
}

/* 
body.background {
    background: var(--background-color);
} */


a {
    text-decoration: none;
    transition: var(--transition);
}

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

/* =========================================================    HEADER + TOPBAR    ========================================================= */

.clinic-header {
    z-index: 1050;
    background: #fff;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

.clinic-topbar {
    background: linear-gradient(135deg, var(--clinic-dark), var(--clinic-success));
    color: #fff;
    font-size: 14px;
}

.topbar-wrapper {
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.topbar-info {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.topbar-info span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: rgba(255, 255, 255, 0.95);
}

.topbar-info i {
    color: var(--clinic-warning);
}

.topbar-right .social-icons {
    margin-bottom: 0 !important;
    display: flex;
    align-items: center;
    gap: 8px;
}

.social-icons a {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    border-radius: 20%;
    background: rgba(255, 255, 255, 0.16);
}

.social-icons a:hover {
    background: var(--clinic-warning);
    color: var(--clinic-dark);
    transform: translateY(-3px);
}

/* ================================    PREMIUM CLINIC NAVBAR ================================ */

.premium-navbar-wrap {
    position: sticky;
    top: 0;
    z-index: 1050;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(13, 110, 253, 0.12);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
}

.clinic-navbar {
    position: relative;
}

.site-logo {
    width: 58px;
    height: 58px;
    object-fit: contain;
}

.navbar-nav .nav-link {
    position: relative;
    font-weight: 700;
    color: #0f172a;
    padding: 0.8rem 1rem;
    transition: all 0.25s ease;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    color: #0d6efd;
}

.navbar-nav .nav-link::after {
    transition: transform 0.25s ease;
}

.navbar-nav .nav-link:hover::after {
    transform: rotate(180deg);
}

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

.dropdown-menu {
    margin-top: 0;
    padding: 0.6rem 0;
    min-width: 230px;
    border-radius: 0;
    background: #ffffff;
}

.dropdown-item {
    font-weight: 600;
    color: #334155;
    padding: 0.75rem 1rem;
    transition: all 0.25s ease;
}

.dropdown-item:hover,
.dropdown-item:focus {
    color: #0d6efd;
    background: rgba(13, 110, 253, 0.08);
    padding-left: 1.25rem;
}

/* ================================    HOVERABLE DESKTOP DROPDOWN ================================ */

@media (min-width: 992px) {

    .navbar .dropdown:hover>.dropdown-menu,
    .navbar .dropdown:focus-within>.dropdown-menu {
        display: block;
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
    }

    .navbar .dropdown-menu {
        display: block;
        opacity: 0;
        visibility: hidden;
        transform: translateY(14px);
        pointer-events: none;
        transition: all 0.25s ease;
    }

    .navbar .dropdown:hover>.nav-link,
    .navbar .dropdown:focus-within>.nav-link {
        color: #0d6efd;
    }
}

/* ================================    MEGA MENU ================================ */

.mega-dropdown {
    position: static;
}

.mega-menu {
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    margin-top: 0;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(239, 246, 255, 0.98));
    border-top: 1px solid rgba(13, 110, 253, 0.12);
    z-index: 1060;
}

.premium-mega-menu {
    box-shadow: 0 25px 70px rgba(15, 23, 42, 0.16);
}

/* Important: keeps mega menu links clickable */
.mega-menu,
.mega-menu * {
    pointer-events: auto;
}

.mega-menu-card {
    position: relative;
    height: 100%;
    padding: 1.4rem;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(13, 110, 253, 0.12);
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.08);
    transition: all 0.3s ease;
}

.mega-menu-card:hover {
    transform: translateY(-6px);
    border-color: rgba(13, 110, 253, 0.35);
    box-shadow: 0 22px 48px rgba(15, 23, 42, 0.14);
}

.menu-icon {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, #0d6efd, #0dcaf0);
    color: #ffffff;
    font-size: 1.2rem;
}

.menu-icon-lg {
    width: 58px;
    height: 58px;
    font-size: 1.45rem;
}

.mega-title {
    font-size: 1rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 0.55rem;
}

.mega-text {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #64748b;
    margin-bottom: 1rem;
}

.premium-links li {
    margin-bottom: 0.35rem;
}

.premium-links a {
    display: block;
    text-decoration: none;
    color: #334155;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0.45rem 0.65rem;
    background: rgba(248, 250, 252, 0.85);
    border-left: 3px solid transparent;
    transition: all 0.25s ease;
}

.premium-links a:hover,
.premium-links a:focus {
    color: #0d6efd;
    background: rgba(13, 110, 253, 0.08);
    border-left-color: #0d6efd;
    padding-left: 0.9rem;
}

/* ================================   BRANCH MEGA MENU CARDS ================================ */

.premium-featured-card {
    color: #ffffff;
    background: linear-gradient(135deg, #0d6efd, #084298);
    border: none;
}

.premium-featured-card .mega-title,
.premium-featured-card .mega-text {
    color: #ffffff;
}

.featured-badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 800;
    color: #084298;
    background: #ffffff;
    padding: 0.35rem 0.7rem;
    margin-bottom: 1rem;
}

.branch-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.branch-tag {
    font-size: 0.72rem;
    font-weight: 800;
    color: #0d6efd;
    background: rgba(13, 110, 253, 0.08);
    padding: 0.35rem 0.6rem;
}

.premium-info-list li {
    display: flex;
    gap: 0.65rem;
    align-items: flex-start;
    margin-bottom: 0.6rem;
    font-size: 0.88rem;
    color: #475569;
}

.premium-info-list i {
    color: #0d6efd;
    margin-top: 0.15rem;
}

.premium-info-list a {
    color: #334155;
    text-decoration: none;
    font-weight: 700;
}

.premium-info-list a:hover {
    color: #0d6efd;
}

.branch-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 1rem;
}

.branch-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #0d6efd;
    background: rgba(13, 110, 253, 0.08);
    font-weight: 800;
    font-size: 0.82rem;
    padding: 0.55rem 0.85rem;
    transition: all 0.25s ease;
}

.branch-link:hover {
    color: #ffffff;
    background: #0d6efd;
}

.emergency-contact-block {
    margin-top: 1rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.14);
}

.emergency-label {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    opacity: 0.9;
}

.emergency-number {
    color: #ffffff;
    text-decoration: none;
    font-weight: 900;
    font-size: 1rem;
}

.emergency-number:hover {
    color: #cffafe;
}

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

.premium-btn {
    font-weight: 800;
    box-shadow: 0 10px 24px rgba(13, 110, 253, 0.25);
    transition: all 0.25s ease;
}

.premium-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(13, 110, 253, 0.35);
}

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

@media (max-width: 991.98px) {
    .premium-navbar-wrap {
        position: sticky;
        top: 0;
    }

    .navbar-collapse {
        max-height: 85vh;
        overflow-y: auto;
        padding-top: 1rem;
    }

    .navbar-nav .nav-link {
        padding: 0.85rem 0;
    }

    .dropdown-menu,
    .mega-menu {
        position: static !important;
        display: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        width: 100%;
        box-shadow: none !important;
        padding: 1rem !important;
        background: #f8fafc;
    }

    .dropdown-menu.show {
        display: block;
    }

    .mega-menu-card {
        padding: 1.1rem;
    }

    .navbar-actions {
        width: 100%;
    }

    .navbar-actions .btn {
        width: 100%;
    }
}



/* ==========================================    HERO CAROUSEL    ============================================== */

.hero-medical {
    min-height: calc(100vh - 128px);
    background: var(--clinic-dark);
}

.hero-item {
    min-height: calc(100vh - 128px);
    position: relative;
    background-size: cover;
    background-position: center;
}

.hero-bg-1 {
    /* background-image: url("assets/img/hero-1.jpg"); */
    background-image: url("../img/1patient-inconsultation.webp");
}

.hero-bg-2 {
    background-image: url("../img/2modern-clinic.webp");
}

.hero-bg-3 {
    background-image: url("../img/3digital-healthcareinterface.webp");
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(7, 47, 79, 0.92), rgba(0, 143, 107, 0.72), rgba(0, 0, 0, 0.35));
    z-index: 1;
}

.hero-slide {
    position: relative;
    z-index: 2;
    min-height: calc(100vh - 128px);
    display: flex;
    align-items: center;
    padding-top: 70px;
    padding-bottom: 70px;
}

.hero-content {
    color: #fff;
    max-width: 920px;
}

.badge-soft,
.hero-kicker,
.section-badge {
    margin-top: 20px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    padding: 9px 16px;
    font-weight: 800;
    font-size: 0.8rem;
    letter-spacing: 0.8px;
}

.section-badge {
    background: var(--clinic-soft);
    color: var(--clinic-success);
    border: 1px solid rgba(0, 143, 107, 0.16);
}

.hero-title {
    /* font-size: clamp(2rem, 5vw, 4.6rem); */
    font-size: 50px;
    font-weight: 900;
    line-height: 1.05;
    margin-top: 12px;
    text-shadow: 2px 2px 3px black;
}

.hero-content .lead {
    max-width: 780px;
    color: rgba(255, 255, 255, 0.92);
    font-size: clamp(1rem, 2vw, 1.25rem);
    font-weight: 700;
    text-shadow: 2px 2px 2px black;
}

.hero-animate {
    animation: fadeUp 0.9s ease both;
}

.hero-card-animate {
    animation: fadeRight 1s ease both;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(35px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeRight {
    from {
        opacity: 0;
        transform: translateX(35px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Hero branch cards */
.branch-mini-card {
    display: flex;
    gap: 12px;
    align-items: center;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #fff;
    padding: 14px;
    backdrop-filter: blur(12px);
    min-height: 88px;
}

.branch-mini-card:hover {
    background: #fff;
    color: var(--clinic-dark);
    transform: translateY(-5px);
}

.branch-mini-icon {
    min-width: 45px;
    height: 45px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--clinic-warning);
    color: var(--clinic-dark);
    font-size: 20px;
}

.branch-mini-card h6 {
    font-weight: 800;
    margin-bottom: 2px;
}

.branch-mini-card p {
    font-size: 0.85rem;
}

/* Appointment card */
.premium-glass-card {
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(5px);
    /* color: #fff; */
    box-shadow: var(--shadow-strong);
    position: relative;
}

.premium-glass-card p {
    text-shadow: 2px 2px 3px black;
    font-weight: 700;
}

.premium-glass-card ul li {
    color: white;
    text-shadow: 2px 2px 2px black;
    font-weight: 700;
}

.booking-mini .form-control,
.booking-mini .form-select {
    border: none;
    min-height: 48px;
    font-weight: 600;
    box-shadow: none;
}

.booking-mini .form-control:focus,
.booking-mini .form-select:focus {
    border: 2px solid var(--clinic-warning);
    box-shadow: none;
}

.small-muted {
    color: rgba(255, 255, 255, 0.78);
}

/* Hero video */
.premium-media-card {
    position: relative;
    min-height: 460px;
    overflow: hidden;
    color: yellow !important;
    text-shadow: 2px 2px 3px black;
    box-shadow: var(--shadow-strong);
}

.hero-video {
    width: 100%;
    height: 460px;
    object-fit: cover;
    display: block;
}

.video-overlay {
    position: absolute;
    inset: auto 0 0 0;
    background: linear-gradient(0deg, rgba(7, 47, 79, 0.95), transparent);
    color: #fff;
    padding: 35px;
}


.floating-branch-card {
    position: absolute;
    /* background: #fff; */
    color: var(--clinic-dark);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    box-shadow: 2px 2px 5px black;
    z-index: 5;
    background: rgba(255, 255, 255, 0.548);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    animation: floatCard 3.5s ease-in-out infinite;
}

.floating-branch-card i {
    color: var(--clinic-success);
    font-size: 22px;
    text-shadow: 2px 2px 2px black;
}

.floating-branch-card strong {
    display: block;
    font-size: 0.9rem;
}

.floating-branch-card span {
    font-size: 0.76rem;
    /* color: var(--clinic-muted); */
    font-weight: 700;
}

.floating-card-1,
.floating-card-5 {
    left: -20px;
    bottom: 35px;
}

.floating-card-3 {
    left: -10px;
    bottom: 100px;
}

.floating-card-2,
.floating-card-4,
.floating-card-6 {
    right: -20px;
    top: 35px;
}

@keyframes floatCard {

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

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

/* Hero controls */
.hero-top-controls {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    gap: 12px;
}

.hero-control {
    position: static;
    width: auto;
    opacity: 1;
}

.hero-control-icon {
    width: 42px;
    height: 42px;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(10px);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    transition: var(--transition);
}

.hero-control-icon:hover {
    background: var(--clinic-warning);
    color: var(--clinic-dark);
}

.hero-indicators {
    bottom: 25px;
    z-index: 8;
}

.hero-indicators button {
    width: 14px !important;
    height: 14px !important;
    border-radius: 50%;
    border: 2px solid #fff !important;
    background: transparent !important;
    opacity: 1;
}

.hero-indicators button.active {
    background: var(--clinic-warning) !important;
}

/* Smart Cut */
.smartcut-advert {
    position: relative;
    background: linear-gradient(135deg, rgba(0, 143, 107, 0.95), rgba(7, 47, 79, 0.96));
    border-left: 6px solid var(--clinic-warning);
    padding: 22px;
    box-shadow: var(--shadow-soft);
}

.smartcut-ribbon {
    display: inline-block;
    background: var(--clinic-warning);
    color: var(--clinic-dark);
    font-weight: 900;
    padding: 7px 13px;
    margin-bottom: 10px;
}

.portal-feature-box {
    padding: 35px;
    min-height: 430px;
}

.conversion-icon {
    width: 76px;
    height: 76px;
    background: var(--clinic-warning);
    color: var(--clinic-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
}

.check-list {
    padding-left: 0;
    list-style: none;
}

.check-list li {
    margin-bottom: 12px;
    padding-left: 28px;
    position: relative;
}

.check-list li::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    color: var(--clinic-warning);
}

/* Shapes */
.hero-shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    z-index: 0;
}

.hero-shape-1 {
    width: 240px;
    height: 240px;
    top: 80px;
    right: -80px;
}

.hero-shape-2 {
    width: 160px;
    height: 160px;
    bottom: 80px;
    left: -60px;
}

.hero-shape-3 {
    width: 90px;
    height: 90px;
    top: 45%;
    right: 30%;
}


/* =========================================================    MAIN SECTIONS    ========================================================= */

.section-soft {
    background: linear-gradient(135deg, #f5f9fc, #eef8f5);
}

.about-hero-section {
    position: relative;
    background:
        linear-gradient(135deg, rgba(245, 249, 252, 0.96), rgba(238, 248, 245, 0.96)),
        url("../img/banner1_result.webp") center/cover no-repeat;
    /* url("assets/img/clinic-pattern.jpg") center/cover no-repeat; */
}

.section-title {
    color: var(--clinic-dark);
    /* font-size: clamp(1.8rem, 4vw, 3rem); */
    font-size: 30px;
    font-weight: 900;
    line-height: 1.15;
}

.section-text,
.section-subtitle {
    color: var(--clinic-muted);
    line-height: 1.8;
    font-size: 1.02rem;
}

.section-subtitle {
    max-width: 760px;
}

.info-mini-card,
.feature-tile,
.glass-service-card,
.value-card,
.icon-feature-box,
.support-card,
.policy-card,
.why-card,
.about-feature-card {
    background: #fff;
    /* box-shadow: var(--shadow-soft); */
    /* box-shadow: 1px 1px 2px black; */
    /* box-shadow: 6px 8px 4px 0px rgba(97,115,116,0.67); */
    box-shadow: 3px 4px 2px 0px rgba(97, 115, 116, 0.67);
    border: 1px solid rgba(13, 110, 253, 0.08);
    transition: var(--transition);
}

.info-mini-card {
    display: flex;
    gap: 14px;
    padding: 18px;
    height: 100%;
}

.info-mini-card i {
    font-size: 28px;
    color: var(--clinic-success);
}

.info-mini-card h6,
.feature-tile h6,
.icon-feature-box h6,
.why-card h6 {
    font-weight: 800;
    color: var(--clinic-dark);
}

.info-mini-card p,
.feature-tile p,
.icon-feature-box p,
.why-card p {
    color: var(--clinic-muted);
    font-size: 0.9rem;
    margin-bottom: 0;
}

.about-feature-card {
    padding: 32px;
    position: relative;
    overflow: hidden;
}

.about-feature-card::before {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    right: -90px;
    top: -90px;
    border-radius: 50%;
    background: rgba(0, 143, 107, 0.09);
}

.about-feature-top,
.support-header {
    display: flex;
    gap: 18px;
    align-items: center;
}

.about-icon-circle,
.service-icon,
.support-icon,
.icon-wrap {
    width: 62px;
    height: 62px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    background: var(--clinic-soft);
    color: var(--clinic-success);
}

.feature-tile {
    padding: 22px;
    height: 100%;
}

.feature-tile i {
    font-size: 28px;
    color: var(--clinic-primary);
    margin-bottom: 12px;
}

.trust-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    background: var(--clinic-soft);
    padding: 14px;
    color: var(--clinic-success);
    font-weight: 800;
}

.glass-service-card {
    padding: 30px;
    height: 100%;
}

.glass-service-card:hover,
.value-card:hover,
.icon-feature-box:hover,
.support-card:hover,
.policy-card:hover,
.why-card:hover,
.info-mini-card:hover,
.feature-tile:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-strong);
}

.glass-service-card h4,
.support-card h4,
.policy-card h4 {
    font-weight: 900;
    color: var(--clinic-dark);
    margin-top: 16px;
}

.glass-service-card p,
.support-card p,
.policy-card p {
    color: var(--clinic-muted);
    line-height: 1.75;
}

.value-card {
    padding: 28px;
}

.value-icon {
    font-size: 34px;
    margin-bottom: 15px;
}

.value-card h5 {
    color: var(--clinic-dark);
    font-weight: 900;
}

.value-card p {
    color: var(--clinic-muted);
    line-height: 1.7;
}

.icon-feature-box {
    padding: 26px;
    text-align: center;
}

.icon-wrap {
    margin-bottom: 15px;
}

.support-card {
    padding: 32px;
}

.support-list li {
    display: flex;
    gap: 10px;
    margin-bottom: 13px;
    color: var(--clinic-text);
    font-weight: 600;
}

.support-list i {
    color: var(--clinic-success);
    margin-top: 4px;
}

.policy-card {
    padding: 34px;
}

.policy-icon {
    font-size: 42px;
    margin-bottom: 15px;
}

.why-card {
    padding: 30px;
    text-align: center;
}

.why-card>i {
    font-size: 42px;
    color: var(--clinic-success);
    margin-bottom: 18px;
}

/* CTA */
.section-padding {
    padding: 80px 0;
}

.cta-box {
    background:
        linear-gradient(135deg, rgba(13, 110, 253, 0.96), rgba(0, 143, 107, 0.96));
    color: #fff;
    padding: 45px;
    box-shadow: var(--shadow-strong);
    position: relative;
    overflow: hidden;
}

.cta-box::after {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.13);
    right: -80px;
    top: -100px;
}

.cta-box h2 {
    font-weight: 900;
}

.cta-box p {
    color: rgba(255, 255, 255, 0.9);
    max-width: 820px;
}

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

.footer-main {
    background: linear-gradient(135deg, #061f35, #073f4f);
    color: rgba(255, 255, 255, 0.82);
}

.footer-main h5,
.footer-main h6 {
    color: #fff;
    font-weight: 900;
    margin-bottom: 18px;
}

.footer-main p,
.footer-main li {
    line-height: 1.75;
}

.footer-main a {
    color: rgba(255, 255, 255, 0.82);
}

.footer-main a:hover {
    color: var(--clinic-warning);
}

.footer-main .site-logo {
    background: #fff;
    padding: 8px;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    font-size: 0.9rem;
}

.copyright-text {
    margin-bottom: 0;
}

/* =========================================================    BACK TO TOP BUTTON    ========================================================= */

#backToTop {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 58px;
    height: 58px;
    border: none;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--clinic-success), var(--clinic-primary));
    color: #fff;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    cursor: pointer;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(25px) scale(0.85);
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.28);
    transition: var(--transition);
}

#backToTop.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

#backToTop:hover {
    transform: translateY(-6px) scale(1.08);
    background: linear-gradient(135deg, var(--clinic-warning), var(--clinic-success));
    color: var(--clinic-dark);
}

#backToTop::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid rgba(0, 143, 107, 0.3);
    animation: pulseRing 1.8s infinite;
}

@keyframes pulseRing {
    from {
        transform: scale(0.9);
        opacity: 0.9;
    }

    to {
        transform: scale(1.35);
        opacity: 0;
    }
}

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

@media (min-width: 992px) {
    .navbar .dropdown:hover>.dropdown-menu {
        display: block;
    }

    .mega-dropdown:hover .mega-menu {
        display: block;
    }
}

@media (max-width: 991px) {
    .topbar-wrapper {
        justify-content: center;
        text-align: center;
        flex-direction: column;
        padding: 8px 0;
    }

    .topbar-info {
        justify-content: center;
    }

    .topbar-right {
        display: none;
    }

    .clinic-navbar {
        min-height: auto;
    }

    .site-logo {
        width: 58px;
        height: 58px;
    }

    .navbar-collapse {
        background: #fff;
        margin-top: 15px;
        padding: 18px;
        box-shadow: var(--shadow-soft);
    }

    .navbar-nav .nav-link {
        padding: 12px 0 !important;
    }

    .navbar-nav .nav-link::before {
        left: 0;
        right: auto;
        width: 55px;
    }

    .mega-menu {
        padding: 15px !important;
        box-shadow: none !important;
    }

    .hero-medical,
    .hero-item,
    .hero-slide {
        min-height: auto;
    }

    .hero-slide {
        padding-top: 95px;
        padding-bottom: 95px;
    }

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

    .floating-branch-card {
        position: static;
        margin-top: 14px;
        animation: none;
    }

    .premium-media-card,
    .hero-video {
        height: 380px;
        min-height: 380px;
    }

    .about-feature-top,
    .support-header {
        align-items: flex-start;
    }
}

@media (max-width: 575px) {
    .container-fluid {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .hero-slide {
        padding-top: 80px;
        padding-bottom: 80px;
    }

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

    .hero-content .lead {
        font-size: 0.98rem;
    }

    .badge-soft,
    .hero-kicker,
    .section-badge {
        margin-top: 20px;
        font-size: 0.72rem;
        padding: 8px 12px;
    }

    .premium-glass-card,
    .portal-feature-box,
    .about-feature-card,
    .support-card,
    .policy-card,
    .cta-box {
        padding: 24px;
    }

    .branch-mini-card {
        min-height: auto;
    }

    .premium-media-card,
    .hero-video {
        height: 300px;
        min-height: 300px;
    }

    .video-overlay {
        padding: 22px;
    }

    .trust-strip {
        flex-direction: column;
    }

    .footer-bottom {
        align-items: center;
    }

    #backToTop {
        width: 50px;
        height: 50px;
        right: 18px;
        bottom: 18px;
    }
}

/* =====================================================    UNI-CARE CONTACT PAGE PREMIUM STYLING ===================================================== */
/* 
:root {
    --primary: #0d6efd;
    --success: #198754;
    --danger: #dc3545;
    --dark: #0f172a;
    --muted: #64748b;
    --light: #f8fafc;
    --white: #ffffff;
    --border: #e2e8f0;
    --shadow-sm: 0 8px 20px rgba(15, 23, 42, 0.08);
    --shadow-md: 0 16px 40px rgba(15, 23, 42, 0.12);
    --shadow-lg: 0 25px 70px rgba(15, 23, 42, 0.16);
    --radius: 22px;
    --transition: all 0.35s ease;
}

body {
    color: var(--dark);
    background: #ffffff;
    font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
} */

/* =====================================================    PREMIUM BREADCRUMB ===================================================== */

.unicare-breadcrumb {
    position: relative;
    min-height: 340px;
    display: flex;
    align-items: center;
    background:
        linear-gradient(rgba(8, 47, 73, 0.78), rgba(8, 47, 73, 0.88)),
        url("../img/1patient-inconsultation.webp") center/cover no-repeat;
    /* url("../img/breadcrumb-bg.jpg") center/cover no-repeat; */
    overflow: hidden;
    text-shadow: 2px 2px 3px black;
}

.unicare-breadcrumb::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 20%, rgba(13, 110, 253, 0.35), transparent 30%),
        radial-gradient(circle at 80% 70%, rgba(25, 135, 84, 0.35), transparent 35%);
    z-index: 1;
}

.breadcrumb-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(13, 110, 253, 0.25), rgba(25, 135, 84, 0.25));
    z-index: 2;
}

.breadcrumb-content {
    position: relative;
    z-index: 3;
    color: var(--white);
}

.breadcrumb-content h1 {
    font-size: clamp(2.4rem, 5vw, 4.8rem);
    font-weight: 900;
    letter-spacing: -1px;
    margin-bottom: 18px;
    text-transform: uppercase;
}

.unicare-breadcrumb .breadcrumb {
    display: inline-flex;
    align-items: center;
    padding: 12px 24px;
    background: rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(12px);
    border-radius: 0px;
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.unicare-breadcrumb .breadcrumb-content p {
    text-shadow: 2px 2px 3px black;
    font-weight: 700;
}

.unicare-breadcrumb .breadcrumb-item,
.unicare-breadcrumb .breadcrumb-item a {
    color: #ffffff;
    font-weight: 600;
    text-decoration: none;
}

.unicare-breadcrumb .breadcrumb-item a:hover {
    color: #dbeafe;
}

.unicare-breadcrumb .breadcrumb-item.active {
    color: #e0f2fe;
}

.unicare-breadcrumb .breadcrumb-item+.breadcrumb-item::before {
    color: #ffffff;
}

/* =========================    PREMIUM CLINIC CONTACT PAGE ========================= */

.clinic-contact-page {
    background:
        linear-gradient(135deg, rgba(3, 37, 76, 0.205), rgba(0, 119, 182, .45)),
        /* url("assets/img/banners/clinic-contact-bg.jpg") center center / cover no-repeat fixed; */
        url("../img/2modern-clinic.webp") center center / cover no-repeat fixed;
}

.contact-bg-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at top left, rgba(13, 110, 253, .35), transparent 35%),
        radial-gradient(circle at bottom right, rgba(25, 135, 84, .28), transparent 35%),
        linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .9));
}

.contact-shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(2px);
    opacity: .55;
}

.contact-shape-1 {
    width: 240px;
    height: 240px;
    background: rgba(13, 110, 253, .28);
    top: -80px;
    right: -70px;
}

.contact-shape-2 {
    width: 180px;
    height: 180px;
    background: rgba(255, 193, 7, .25);
    bottom: 80px;
    left: -60px;
}

.contact-page-header {
    font-style: 50px;
    max-width: 900px;
    margin-inline: auto;
}

.contact-main-badge {
    background: rgba(255, 255, 255, .92);
    color: #0d6efd;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
}

.clinic-contact-page .section-title {
    color: #fff;
    font-weight: 900;
    text-shadow: 0 5px 20px rgba(0, 0, 0, .28);
}

.clinic-contact-page .section-subtitle {
    color: #f8fbff;
    font-weight: 600;
    max-width: 780px;
    text-shadow: 0 4px 18px rgba(0, 0, 0, .35);
}

/* Cards */
.branch-contact-card,
.contact-intro-card,
.appointment-card,
.map-card {
    position: relative;
    overflow: hidden;
    border-radius: 0px;
    /* opacity: .78; */
    background: rgba(255, 255, 255, .9);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, .55);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .16);
}

.branch-contact-card,
.contact-intro-card,
.appointment-card {
    padding: 35px;
}

.branch-contact-card {
    transition: .35s ease;
}

.branch-contact-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 28px 75px rgba(0, 0, 0, .22);
}

.branch-contact-card::before {
    content: "";
    position: absolute;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    top: -80px;
    right: -80px;
    opacity: .16;
}

.branch-ok::before {
    /* background: #0d6efd; */
    background: #011c44;
}

.branch-ong::before {
    background: #198754;
}

.branch-ond::before {
    background: #dc3545;
}

.branch-top-icon {
    width: 76px;
    height: 76px;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 2.1rem;
    margin-bottom: 24px;
    box-shadow: 0 16px 35px rgba(0, 0, 0, .18);
}

.branch-contact-card h3,
.contact-intro-card h3,
.appointment-card h4 {
    font-weight: 900;
    color: #073b6f;
}

.branch-contact-card p,
.contact-intro-card p {
    color: #253041;
    line-height: 1.7;
}

.branch-details {
    list-style: none;
    padding: 0;
    margin: 24px 0 0;
}

.branch-details li {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(0, 0, 0, .07);
    color: #253041;
    font-weight: 600;
}

.branch-details li i {
    font-size: 1.15rem;
    margin-top: 3px;
    flex-shrink: 0;
}

.branch-details a {
    color: #0d6efd;
    text-decoration: none;
    font-weight: 800;
}

/* Maps */
.map-card {
    padding: 14px;
}

.map-card span {
    display: block;
    padding: 10px 8px 14px;
    font-weight: 900;
    color: #073b6f;
}

.contact-map {
    min-height: 290px;
    border-radius: 22px;
    overflow: hidden;
}

.contact-map iframe {
    width: 100%;
    height: 100%;
    min-height: 290px;
    border: 0;
    display: block;
}

/* Contact intro */
.contact-feature-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 28px;
}

.contact-feature {
    display: flex;
    gap: 14px;
    padding: 16px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .75);
    border: 1px solid rgba(13, 110, 253, .08);
    transition: .3s ease;
}

.contact-feature:hover {
    transform: translateX(6px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .08);
}

.feature-icon {
    width: 52px;
    height: 52px;
    border-radius: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    flex-shrink: 0;
}

.contact-feature h6 {
    font-weight: 900;
    color: #073b6f;
    margin-bottom: 3px;
}

.contact-feature p {
    margin: 0;
    font-size: .95rem;
}

/* Appointment form */
.appointment-card {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .94), rgba(239, 248, 255, .92));
}

.appointment-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.small-title {
    display: inline-block;
    font-weight: 900;
    font-size: .8rem;
    color: #dc3545;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 6px;
}

.appointment-icon {
    width: 68px;
    height: 68px;
    border-radius: 22px;
    background: linear-gradient(135deg, #dc3545, #fd7e14);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    box-shadow: 0 16px 35px rgba(220, 53, 69, .28);
}

.appointment-card .form-label {
    font-weight: 800;
    color: #073b6f;
}

.appointment-card .form-control,
.appointment-card .form-select {
    border-radius: 15px;
    border: 1px solid rgba(13, 110, 253, .16);
    background: #fff;
}

.appointment-card .form-control:focus,
.appointment-card .form-select:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 .22rem rgba(13, 110, 253, .12);
}

/* Buttons */
.branch-contact-card .btn,
.contact-intro-card .btn,
.appointment-card .btn {
    border-radius: 0px;
    font-weight: 800;
    padding: 12px 18px;
    transition: .3s ease;
}

.branch-contact-card .btn:hover,
.contact-intro-card .btn:hover,
.appointment-card .btn:hover {
    transform: translateY(-3px);
}

/* Responsive */
@media(max-width:991px) {
    .clinic-contact-page {
        background-attachment: scroll;
    }

    .branch-contact-card,
    .contact-intro-card,
    .appointment-card {
        padding: 28px;
    }
}

@media(max-width:576px) {

    .branch-contact-card,
    .contact-intro-card,
    .appointment-card {
        padding: 22px;
        border-radius: 0px;
    }

    .appointment-card-header {
        align-items: flex-start;
    }

    .appointment-icon {
        width: 56px;
        height: 56px;
        font-size: 1.45rem;
    }
}


/* =====================================================    COMMON SECTION STYLING ===================================================== */

.okalongo-branch-section,
.ongwediva-branch-section,
.ondangwa-branch-section {
    position: relative;
    overflow: hidden;
}

/* .okalongo-branch-section {
    background: linear-gradient(180deg, #ffffff 0%, #f1f7ff 100%);
    padding: 100px 0;
    min-height: 738px;
    overflow: hidden;
    background: url('../img/waiting-room.webp') top center/cover no-repeat;
    background-attachment: fixed;
} */

.okalongo-branch-section p {
    color: black;
    text-shadow: 2px 2px 3px white;
    font-weight: 700;
}

.okalongo-branch-section .section-title {
    color: #1d8cfb;
    text-shadow: 2px 2px 3px black;
    font-weight: 800;
}

/* .okalongo-branch-section::before {
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    background: rgba(13, 202, 240, 0.116);
    filter: blur(120px);
    filter: blur(4px);
    top: -100px;
    left: -100px;
    z-index: 0;
} */

.okalongo-branch-section .container-fluid {
    position: relative;
    z-index: 2;
}

.ongwediva-branch-section {
    /* background: linear-gradient(180deg, #ffffff 0%, #f0fdf4 100%); */
    padding: 100px 0;
    min-height: 738px;
    overflow: hidden;
    background: url('../img/2modern-clinic.webp') top center/cover no-repeat;
    background-attachment: fixed;
}

.ongwediva-branch-section .section-title {
    color: #20b65c;
    text-shadow: 2px 2px 3px black;
    font-weight: 800;
}

.ongwediva-branch-section p {
    color: black;
    text-shadow: 2px 2px 3px white;
    font-weight: 700;
}

.ongwediva-branch-section::before {
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    background: rgba(13, 202, 240, 0.25);
    filter: blur(120px);
    top: -100px;
    left: -100px;
    z-index: 0;
}

.ongwediva-branch-section .container-fluid {
    position: relative;
    z-index: 2;
}


.ondangwa-branch-section {
    /* background: linear-gradient(180deg, #ffffff 0%, #fff5f5 100%); */
    padding: 100px 0;
    min-height: 738px;
    overflow: hidden;
    background: url('../img/ondangwa/ondangwa-face.jpeg') top center/cover no-repeat;
    background-attachment: fixed;
}

.ondangwa-branch-section p {
    color: #080808;
    text-shadow: 2px 2px 2px rgb(243, 239, 239);
    font-weight: 700;
}

.ondangwa-branch-section .section-title {
    color: #e74b5d;
    text-shadow: 2px 2px 3px black;
    font-weight: 800;
}

.ondangwa-branch-section::before {
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    background: rgba(13, 202, 240, 0.25);
    filter: blur(120px);
    top: -100px;
    left: -100px;
    z-index: 0;
}

.ondangwa-branch-section .container-fluid {
    position: relative;
    z-index: 2;
}


.section-badge {
    margin-top: 20px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    color: var(--primary);
    background: #eaf3ff;
    border: 1px solid #cfe4ff;
    border-radius: 0px;
    font-size: 0.86rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ongwediva-branch-section .section-badge {
    color: var(--success);
    background: #eafaf1;
    border-color: #ccefdc;
}

.ondangwa-branch-section .section-badge {
    color: var(--danger);
    background: #fff0f0;
    border-color: #ffd4d4;
}

.section-title {
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 900;
    color: var(--dark);
    letter-spacing: -0.8px;
}

.section-subtitle {
    max-width: 760px;
    color: var(--muted);
    font-size: 1.08rem;
    line-height: 1.8;
}

/* =====================================================    BRANCH PROFILE CARD ===================================================== */

.branch-profile-card,
.branch-contact-card,
.branch-form-card {
    position: relative;
    padding: clamp(26px, 4vw, 42px);
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(226, 232, 240, 0.9);
    /* border-radius: var(--radius); */
    box-shadow: var(--shadow-md);
    transition: var(--transition);
    overflow: hidden;
}

.branch-profile-card:hover,
.branch-contact-card:hover,
.branch-form-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}

.branch-profile-card::before,
.branch-contact-card::before,
.branch-form-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg, var(--primary), #38bdf8);
}

.ongwediva-branch-section .branch-profile-card::before,
.ongwediva-branch-section .branch-contact-card::before,
.ongwediva-branch-section .branch-form-card::before {
    background: linear-gradient(90deg, var(--success), #22c55e);
}

.ondangwa-branch-section .branch-profile-card::before,
.ondangwa-branch-section .branch-contact-card::before,
.ondangwa-branch-section .branch-form-card::before {
    background: linear-gradient(90deg, var(--danger), #fb7185);
}

.branch-icon-lg {
    width: 78px;
    height: 78px;
    display: grid;
    place-items: center;
    margin-bottom: 22px;
    color: var(--white);
    background: linear-gradient(135deg, var(--primary), #38bdf8);
    border-radius: 24px;
    font-size: 2.3rem;
    box-shadow: 0 14px 30px rgba(13, 110, 253, 0.28);
}

.ongwediva-icon {
    background: linear-gradient(135deg, var(--success), #22c55e);
    box-shadow: 0 14px 30px rgba(25, 135, 84, 0.28);
}

.emergency-icon {
    background: linear-gradient(135deg, var(--danger), #fb7185);
    box-shadow: 0 14px 30px rgba(220, 53, 69, 0.28);
}

.branch-profile-card h3,
.branch-form-card h3 {
    font-weight: 900;
    color: var(--dark);
    margin-bottom: 16px;
}

.branch-profile-card p,
.branch-form-card p {
    color: var(--muted);
    line-height: 1.75;
}

/* =====================================================    HIGHLIGHT BOXES ===================================================== */

.branch-highlight {
    height: 100%;
    display: flex;
    gap: 14px;
    padding: 18px;
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: 18px;
    transition: var(--transition);
}

.branch-highlight:hover {
    background: #ffffff;
    transform: translateY(-4px);
    box-shadow: var(--shadow-sm);
}

.branch-highlight i {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    display: grid;
    place-items: center;
    color: var(--primary);
    background: #eaf3ff;
    border-radius: 14px;
    font-size: 1.35rem;
}

.ongwediva-branch-section .branch-highlight i {
    color: var(--success);
    background: #eafaf1;
}

.ondangwa-branch-section .branch-highlight i {
    color: var(--danger);
    background: #fff0f0;
}

.branch-highlight h6 {
    margin-bottom: 5px;
    font-weight: 800;
    color: var(--dark);
}

.branch-highlight p {
    margin-bottom: 0;
    font-size: 0.92rem;
    line-height: 1.5;
}

/* =====================================================    SMART CUT ALERT ===================================================== */

.smart-cut-alert {
    display: flex;
    gap: 15px;
    align-items: flex-start;
    padding: 18px 20px;
    background: linear-gradient(135deg, #fff7ed, #ffedd5);
    border: 1px solid #fed7aa;
    border-radius: 18px;
}

.smart-cut-alert i {
    color: #f97316;
    font-size: 1.8rem;
}

.smart-cut-alert h6 {
    margin-bottom: 4px;
    color: #9a3412;
    font-weight: 900;
}

.smart-cut-alert p {
    color: #7c2d12;
}

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

.branch-contact-card h4 {
    font-weight: 900;
    color: var(--dark);
}

.contact-info-list {
    display: grid;
    gap: 16px;
}

.contact-info-item {
    display: flex;
    gap: 15px;
    padding: 17px;
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: 18px;
    transition: var(--transition);
}

.contact-info-item:hover {
    background: #ffffff;
    transform: translateX(5px);
    box-shadow: var(--shadow-sm);
}

.contact-info-item>i {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: grid;
    place-items: center;
    color: var(--primary);
    background: #eaf3ff;
    border-radius: 14px;
    font-size: 1.25rem;
}

.ongwediva-branch-section .contact-info-item>i {
    color: var(--success);
    background: #eafaf1;
}

.ondangwa-branch-section .contact-info-item>i {
    color: var(--danger);
    background: #fff0f0;
}

.contact-info-item h6 {
    margin-bottom: 4px;
    font-weight: 900;
    color: var(--dark);
}

.contact-info-item p {
    margin-bottom: 0;
    color: var(--muted);
    line-height: 1.55;
}

.contact-info-item a {
    color: var(--dark);
    font-weight: 700;
    text-decoration: none;
}

.contact-info-item a:hover {
    color: var(--primary);
}

.ongwediva-hours,
.emergency-hours {
    background: #fff7ed;
    border-color: #fed7aa;
}

.emergency-hours h6,
.emergency-hours p {
    color: var(--danger);
    font-weight: 800;
}

/* =====================================================
   SOCIAL ICONS
===================================================== */

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

.branch-socials a {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    color: var(--white);
    background: var(--primary);
    border-radius: 50%;
    text-decoration: none;
    font-size: 1.1rem;
    transition: var(--transition);
    box-shadow: var(--shadow-sm);
}

.ongwediva-branch-section .branch-socials a {
    background: var(--success);
}

.ondangwa-branch-section .branch-socials a {
    background: var(--danger);
}

.branch-socials a:hover {
    transform: translateY(-5px) scale(1.05);
    opacity: 0.9;
}

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

.btn {
    border-radius: 14px;
    font-weight: 800;
    transition: var(--transition);
}

.btn-lg {
    padding: 13px 22px;
    font-size: 1rem;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary), #38bdf8);
    border: none;
}

.btn-success {
    background: linear-gradient(135deg, var(--success), #22c55e);
    border: none;
}

.btn-danger {
    background: linear-gradient(135deg, var(--danger), #fb7185);
    border: none;
}

.btn:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-sm);
}

.btn-outline-primary,
.btn-outline-success {
    background: #ffffff;
    border-width: 2px;
}

/* =====================================================
   FORMS
===================================================== */

.branch-form-card .form-label {
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 7px;
}

.branch-form-card .form-control,
.branch-form-card .form-select {
    min-height: 54px;
    color: var(--dark);
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: none;
    transition: var(--transition);
}

.branch-form-card textarea.form-control {
    min-height: 145px;
    resize: vertical;
}

.branch-form-card .form-control:focus,
.branch-form-card .form-select:focus {
    background: #ffffff;
    border-color: var(--primary);
    box-shadow: 0 0 0 0.22rem rgba(13, 110, 253, 0.12);
}

.ongwediva-branch-section .form-control:focus,
.ongwediva-branch-section .form-select:focus {
    border-color: var(--success);
    box-shadow: 0 0 0 0.22rem rgba(25, 135, 84, 0.12);
}

.ondangwa-branch-section .form-control:focus,
.ondangwa-branch-section .form-select:focus {
    border-color: var(--danger);
    box-shadow: 0 0 0 0.22rem rgba(220, 53, 69, 0.12);
}

/* =====================================================    MAP ===================================================== */

.contact-map {
    min-height: 520px;
    border-radius: var(--radius);
    overflow: hidden;
    background: #e2e8f0;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border);
}

.contact-map iframe {
    width: 100%;
    height: 100%;
    min-height: 520px;
    display: block;
    border: 0;
    filter: saturate(1.05) contrast(1.03);
}

/* =====================================================    CTA SECTION ===================================================== */

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

.cta-box {
    position: relative;
    padding: clamp(34px, 5vw, 58px);
    color: var(--white);
    background:
        linear-gradient(135deg, rgba(13, 110, 253, 0.96), rgba(25, 135, 84, 0.96)),
        url("../img/clinic-cta-bg.jpg") center/cover no-repeat;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.cta-box::after {
    content: "";
    position: absolute;
    right: -90px;
    bottom: -90px;
    width: 260px;
    height: 260px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 50%;
}

.cta-box h2 {
    position: relative;
    z-index: 2;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    margin-bottom: 12px;
}

.cta-box p {
    position: relative;
    z-index: 2;
    max-width: 780px;
    margin-bottom: 0;
    color: rgba(255, 255, 255, 0.92);
    font-size: 1.08rem;
    line-height: 1.8;
}

.cta-box .btn {
    position: relative;
    z-index: 2;
}

/* =====================================================    TEAM MODAL ===================================================== */

.doctor-modal-content {
    background: #ffffff;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.modal-doctor-img {
    width: 100%;
    max-height: 430px;
    object-fit: cover;
    border-radius: 24px;
    box-shadow: var(--shadow-md);
}

.badge-soft {
    display: inline-flex;
    padding: 8px 15px;
    color: var(--primary);
    background: #eaf3ff;
    border-radius: 0px;
    font-size: 0.82rem;
    font-weight: 900;
    text-transform: uppercase;
}

.modal-info-box {
    padding: 22px;
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: 20px;
}

.modal-info-box h6 {
    color: var(--dark);
    font-weight: 900;
}

.modal-info-box p {
    color: var(--muted);
    line-height: 1.65;
}

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

@media (max-width: 991.98px) {
    .unicare-breadcrumb {
        min-height: 280px;
    }

    .branch-contact-card,
    .branch-profile-card,
    .branch-form-card {
        padding: 28px;
    }

    .contact-map,
    .contact-map iframe {
        min-height: 430px;
    }

    .cta-box {
        text-align: center;
    }

    .cta-box .d-flex {
        justify-content: center !important;
    }
}

@media (max-width: 767.98px) {
    .unicare-breadcrumb {
        min-height: 240px;
    }

    .breadcrumb-content h1 {
        font-size: 2.2rem;
    }

    .unicare-breadcrumb .breadcrumb {
        padding: 10px 16px;
        font-size: 0.9rem;
    }

    .section-title {
        font-size: 2rem;
    }

    .section-subtitle {
        font-size: 0.98rem;
    }

    .branch-profile-card,
    .branch-contact-card,
    .branch-form-card {
        padding: 24px 20px;
        border-radius: 5px;
    }

    .branch-icon-lg {
        width: 66px;
        height: 66px;
        font-size: 1.9rem;
        border-radius: 20px;
    }

    .branch-highlight,
    .contact-info-item,
    .smart-cut-alert {
        flex-direction: row;
        padding: 15px;
    }

    .contact-map,
    .contact-map iframe {
        min-height: 360px;
    }

    .btn-lg {
        font-size: 0.95rem;
        padding: 12px 18px;
    }
}

@media (max-width: 575.98px) {
    .container-fluid {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .branch-socials {
        justify-content: center;
    }

    .contact-info-item {
        align-items: flex-start;
    }

    .contact-info-item>i,
    .branch-highlight i {
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
        font-size: 1.05rem;
    }

    .section-badge {
        margin-top: 20px;
        font-size: 0.75rem;
        padding: 8px 14px;
    }

    .cta-box {
        padding: 32px 22px;
    }
}

/* ================= About page Styling ================ */

/* =============================================    UNI-CARE ABOUT PAGE PREMIUM CSS ========================================= */

:root {
    --primary: #0d6efd;
    --success: #198754;
    --danger: #dc3545;
    --warning: #f59e0b;
    --dark: #0f172a;
    --text: #334155;
    --muted: #64748b;
    --light: #f8fafc;
    --soft-blue: #eef6ff;
    --soft-green: #ecfdf5;
    --soft-red: #fff1f2;
    --white: #ffffff;
    --border: #e2e8f0;
    --radius: 0px;
    --shadow-sm: 0 8px 22px rgba(15, 23, 42, 0.08);
    --shadow-md: 0 16px 40px rgba(15, 23, 42, 0.12);
    --shadow-lg: 0 26px 70px rgba(15, 23, 42, 0.16);
    --transition: all 0.35s ease;
}

/* =====================================================    GENERAL PAGE STYLING ===================================================== */

body {
    font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--text);
    background: var(--white);
}

.section-padding {
    padding: 90px 0;
}

.section-soft {
    background:
        radial-gradient(circle at top left, rgba(13, 110, 253, 0.08), transparent 30%),
        linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
}

.section-title {
    /* font-size: clamp(2rem, 4vw, 3.25rem); */
    font-size: 50px;
    text-shadow: 2px 2px 3px black;
    font-weight: 900;
    color: var(--dark);
    letter-spacing: -0.8px;
    line-height: 1.15;
    margin-bottom: 18px;
}

.section-subtitle {
    max-width: 780px;
    color: var(--muted);
    font-size: 1.08rem;
    line-height: 1.8;
}

.badge-soft,
.section-badge,
.director-badge {
    margin-top: 20px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    color: var(--primary);
    background: #eaf3ff;
    border: 1px solid #cfe4ff;
    border-radius: 0px;
    font-size: 0.82rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* =====================================================    WHO WE ARE ===================================================== */

.about-section {
    position: relative;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    overflow: hidden;
}

.about-content p {
    color: var(--muted);
    line-height: 1.8;
    font-size: 1.02rem;
}

.image-wrapper {
    position: relative;
    isolation: isolate;
}

.image-wrapper::before {
    content: "";
    position: absolute;
    width: 75%;
    height: 75%;
    right: -16px;
    bottom: -16px;
    background: linear-gradient(135deg, var(--primary), var(--success));
    z-index: -1;
}

.main-image {
    width: 100%;
    min-height: 430px;
    object-fit: cover;
    border: 8px solid #ffffff;
}

.floating-image {
    position: absolute;
    left: -35px;
    bottom: -35px;
    width: 190px;
    padding: 8px;
    background: var(--white);
    box-shadow: var(--shadow-md);
}

.doctor-img {
    width: 100%;
    height: 210px;
    object-fit: cover;
}

/* =====================================================    MINI STAT CARDS ===================================================== */

.mini-stat-card {
    height: 100%;
    display: flex;
    gap: 15px;
    padding: 18px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 0px;
    /* box-shadow: var(--shadow-sm); */
    box-shadow: 3px 4px 2px 0px rgba(97, 115, 116, 0.67);
    transition: var(--transition);
}

.mini-stat-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
}

.mini-stat-card i {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: grid;
    place-items: center;
    color: var(--primary);
    background: #eaf3ff;
    border-radius: 15px;
    font-size: 1.35rem;
}

.mini-stat-card h6 {
    margin-bottom: 5px;
    color: var(--dark);
    font-weight: 900;
}

.mini-stat-card p {
    margin-bottom: 0;
    color: var(--muted);
    font-size: 0.92rem;
    line-height: 1.55;
}

/* =========================================    TRUST / FEATURE / POLICY CARDS =================================== */

.trust-card,
.feature-card,
.policy-card,
.content-block,
.info-card,
.team-summary-card,
.director-card,
.branch-profile-card,
.branch-contact-card,
.branch-form-card,
.branch-services-card {
    position: relative;
    padding: clamp(26px, 4vw, 42px);
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid var(--border);
    /* border-radius: var(--radius); */
    /* box-shadow: var(--shadow-md); */
    box-shadow: 3px 4px 2px 0px rgba(97, 115, 116, 0.67);
    transition: var(--transition);
    overflow: hidden;
}

.trust-card:hover,
.feature-card:hover,
.policy-card:hover,
.team-summary-card:hover,
.director-card:hover,
.branch-profile-card:hover,
.branch-contact-card:hover,
.branch-form-card:hover,
.branch-services-card:hover {
    transform: translateY(-7px);
    box-shadow: var(--shadow-lg);
}

.trust-icon,
.feature-icon,
.policy-icon,
.branch-icon-lg {
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    color: var(--white);
    background: linear-gradient(135deg, var(--primary), #38bdf8);
    border-radius: 22px;
    font-size: 2rem;
    margin-bottom: 22px;
    box-shadow: 0 14px 30px rgba(13, 110, 253, 0.24);
}

.trust-card h4,
.feature-card h4,
.policy-card h4,
.content-block h4,
.info-card h4,
.team-summary-card h2,
.branch-profile-card h3,
.branch-form-card h3,
.branch-services-card h3 {
    color: var(--dark);
    font-weight: 900;
    margin-bottom: 14px;
}

.trust-card p,
.feature-card p,
.policy-card p,
.content-block p,
.info-card p,
.team-summary-card p,
.branch-profile-card p,
.branch-form-card p {
    color: var(--muted);
    line-height: 1.75;
}

/* ============================================    DIRECTOR SECTION ========================================= */

.director-photo {
    width: 100%;
    min-height: 520px;
    object-fit: cover;
    border: 8px solid #ffffff;
    box-shadow: var(--shadow-lg);
}

.director-card {
    border-left: 6px solid var(--primary);
}

.director-card h3 {
    margin-top: 18px;
    color: var(--dark);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
}

.director-card p {
    color: var(--muted);
    line-height: 1.8;
}

.director-meta {
    display: grid;
    gap: 15px;
    margin-top: 24px;
}

.meta-box {
    padding: 18px 20px;
    background: var(--light);
    border: 1px solid var(--border);
    border-radius: 16px;
}

.meta-box h6 {
    color: var(--dark);
    font-weight: 900;
    margin-bottom: 6px;
}

.meta-box p {
    margin-bottom: 0;
    font-size: 0.95rem;
}

/* ===================================   LISTS ========================================= */

.check-list,
.icon-check-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.check-list li,
.icon-check-list li {
    position: relative;
    margin-bottom: 14px;
    color: var(--muted);
    line-height: 1.65;
}

.check-list li {
    padding-left: 32px;
}

.check-list li::before {
    content: "\F26A";
    font-family: "bootstrap-icons";
    position: absolute;
    left: 0;
    top: 1px;
    color: var(--success);
    font-weight: 900;
}

.icon-check-list li {
    display: flex;
    gap: 12px;
}

.icon-check-list i {
    color: var(--success);
    font-size: 1.1rem;
    margin-top: 3px;
}

/* ==========================================    TEAM CARDS =========================================== */

.team-section {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.doctor-card {
    height: 100%;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: var(--transition);
}

.doctor-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
}

.doctor-img-wrap {
    position: relative;
    height: 330px;
    overflow: hidden;
    background: #e2e8f0;
}

.doctor-img img {
    width: 100%;
    height: 330px;
    object-fit: cover;
    object-position: top center;
    transition: var(--transition);
}

.doctor-card:hover .doctor-img img {
    transform: scale(1.08);
}

.doctor-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: end;
    justify-content: center;
    padding-bottom: 24px;
    background: linear-gradient(180deg, transparent 30%, rgba(15, 23, 42, 0.78));
    opacity: 0;
    transition: var(--transition);
}

.doctor-card:hover .doctor-overlay {
    opacity: 1;
}

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

.social-icons a {
    width: 35px;
    height: 35px;
    display: grid;
    place-items: center;
    color: var(--primary);
    background: var(--white);
    border-radius: 20%;
    text-decoration: none;
    transition: var(--transition);
}

.social-icons a:hover {
    color: var(--white);
    background: var(--primary);
    transform: translateY(-4px);
}

.doctor-content {
    padding: 28px;
}

.team-location {
    display: inline-flex;
    padding: 7px 14px;
    color: var(--primary);
    background: #eaf3ff;
    border-radius: 0px;
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.doctor-content h4 {
    margin: 14px 0 10px;
    color: var(--dark);
    font-weight: 900;
}

.role-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    margin-bottom: 14px;
    color: var(--success);
    background: #ecfdf5;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 800;
}

.doctor-content p {
    color: var(--muted);
    line-height: 1.7;
    font-size: 0.95rem;
}

/* =====================================================    BRANCH SECTIONS ===================================================== */

.ongwediva-branch-section {
    /* background: linear-gradient(180deg, #ffffff 0%, #ecfdf5 100%); */
    padding: 100px 0;
    min-height: 738px;
    overflow: hidden;
    background: url('../img/2modern-clinic.webp') top center/cover no-repeat;
    background-attachment: fixed;
}

.ongwediva-branch-section .section-title {
    color: #20b65c;
    text-shadow: 2px 2px 3px black;
    font-weight: 800;
}

.ongwediva-branch-section::before {
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    background: rgba(13, 202, 240, 0.25);
    filter: blur(120px);
    top: -100px;
    left: -100px;
    z-index: 0;
}

.ongwediva-branch-section .container-fluid {
    position: relative;
    z-index: 2;
}

.ondangwa-branch-section {
    /* background: linear-gradient(180deg, #ffffff 0%, #fff1f2 100%); */
    padding: 100px 0;
    min-height: 738px;
    overflow: hidden;
    background: url('../img/ondangwa/ondangwa-face.jpeg') top center/cover no-repeat;
    background-attachment: fixed;
}

.ondangwa-branch-section .section-title {
    color: #e74b5d;
    text-shadow: 2px 2px 3px black;
    font-weight: 800;
}

.ondangwa-branch-section::before {
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    background: rgba(13, 202, 240, 0.25);
    filter: blur(120px);
    top: -100px;
    left: -100px;
    z-index: 0;
}

.ondangwa-branch-section .container-fluid {
    position: relative;
    z-index: 2;
}

.glass-card {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(3px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 0px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
    transition: all 0.4s ease;
}

.glass-card p {
    color: #fff;
    font-weight: 700;
    /* text-shadow: 2px 2px 3px black; */
}

.glass-card h2,
h3,
h4 {
    /* color: white;  */
    text-shadow: 2px 2px 3px rgb(243, 239, 239);
}

.glass-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.45);
}

/* Titles */
.section-title {
    font-weight: 800;
}

.section-badge {
    /* background: rgba(255,255,255,0.1); */
    margin-top: 20px;
    background: rgba(5, 6, 119, 0.534);
    backdrop-filter: blur(14px);
    padding: 8px 18px;
    border-radius: 0px;
    display: inline-block;
    color: #fff;
    font-weight: 600;
}

/* Profile Card */
.branch-profile-card {
    padding: 35px;
}

.branch-profile-card h3 {
    font-weight: 700;
    margin-bottom: 15px;
}

/* Highlights */
.branch-highlight {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: rgba(255, 255, 255, 0.06);
    padding: 12px;
    border-radius: 12px;
}

.branch-highlight i {
    font-size: 1.4rem;
    color: #0dcaf0;
}

/* Smart Cut Alert */
.smart-cut-alert {
    display: flex;
    gap: 12px;
    background: rgba(255, 0, 0, 0.15);
    border-left: 4px solid #dc3545;
    padding: 15px;
    border-radius: 12px;
}

/* Contact Card */
.branch-contact-card {
    padding: 30px;
}

.contact-info-item {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

.contact-info-item i {
    font-size: 1.3rem;
    color: #0dcaf0;
}

/* Buttons */
.btn-danger {
    background: linear-gradient(135deg, #dc3545, #ff5c5c);
    border: none;
}

.btn-outline-primary {
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #fff;
}

.btn-outline-primary:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Services */
.branch-services-card {
    padding: 35px;
}

.service-chip {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    padding: 12px 16px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: 0.3s;
}

.service-chip:hover {
    background: rgba(13, 202, 240, 0.2);
    transform: scale(1.05);
}

/* Form */
.branch-form-card {
    padding: 30px;
}

.branch-form-card .form-control,
.branch-form-card .form-select {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
}

.branch-form-card .form-control::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

/* Map */
.contact-map iframe {
    width: 100%;
    height: 100%;
    min-height: 450px;
    border: 0;
    border-radius: 0px;
}

/* Socials */
.branch-socials a {
    display: inline-flex;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    margin-right: 8px;
    color: #fff;
    transition: 0.3s;
}

.branch-socials a:hover {
    background: #0dcaf0;
}


.branch-profile-card::before,
.branch-contact-card::before,
.branch-form-card::before,
.branch-services-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 5px;
    background: linear-gradient(90deg, var(--primary), #38bdf8);
}

.ongwediva-branch-section .branch-profile-card::before,
.ongwediva-branch-section .branch-contact-card::before,
.ongwediva-branch-section .branch-form-card::before,
.ongwediva-services-card::before {
    background: linear-gradient(90deg, var(--success), #22c55e);
}

.ondangwa-branch-section .branch-profile-card::before,
.ondangwa-branch-section .branch-contact-card::before,
.ondangwa-branch-section .branch-form-card::before,
.ondangwa-services-card::before {
    background: linear-gradient(90deg, var(--danger), #fb7185);
}

.ongwediva-icon {
    background: linear-gradient(135deg, var(--success), #22c55e);
}

.emergency-icon {
    background: linear-gradient(135deg, var(--danger), #fb7185);
}

/* ====================================================    BRANCH HIGHLIGHTS ===================================================== */

.branch-highlight,
.contact-info-item {
    height: 100%;
    display: flex;
    gap: 15px;
    padding: 17px;
    background: var(--light);
    border: 1px solid var(--border);
    border-radius: 0px;
    transition: var(--transition);
}

.branch-highlight:hover,
.contact-info-item:hover {
    background: #ffffff;
    transform: translateY(-4px);
    box-shadow: var(--shadow-sm);
}

.branch-highlight i,
.contact-info-item>i {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    display: grid;
    place-items: center;
    color: var(--primary);
    background: #eaf3ff;
    border-radius: 15px;
    font-size: 1.25rem;
}

.ongwediva-branch-section .branch-highlight i,
.ongwediva-branch-section .contact-info-item>i {
    color: var(--success);
    background: #ecfdf5;
}

.ondangwa-branch-section .branch-highlight i,
.ondangwa-branch-section .contact-info-item>i {
    color: var(--danger);
    background: #fff1f2;
}

.branch-highlight h6,
.contact-info-item h6 {
    color: var(--dark);
    font-weight: 900;
    margin-bottom: 5px;
}

.branch-highlight p,
.contact-info-item p {
    margin-bottom: 0;
    color: var(--muted);
    font-size: 0.93rem;
    line-height: 1.55;
}

.contact-info-item a {
    color: var(--dark);
    font-weight: 700;
    text-decoration: none;
}

.contact-info-item a:hover {
    color: var(--primary);
}

/* =========================    OKALONGO BRANCH SECTION ========================= */

/* .okalongo-branch-section {
    background:
        linear-gradient(135deg, rgba(232, 245, 255, .95), rgba(255, 255, 255, .96)),       
        url("./assets/img/waiting-room.webp") center/cover no-repeat;
} */

.okalongo-bg-shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(4px);
    opacity: .35;
}

.okalongo-bg-shape.shape-a {
    width: 260px;
    height: 260px;
    background: #0d6efd;
    top: -80px;
    right: -70px;
}

.okalongo-bg-shape.shape-b {
    width: 220px;
    height: 220px;
    background: #20c997;
    bottom: 70px;
    left: -80px;
}

.glass-card {
    background: rgba(255, 255, 255, .82);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 0px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .08);
}

.section-badge {
    display: inline-flex;
    align-items: center;
    padding: 10px 18px;
    border-radius: 5px;
    background: rgba(13, 110, 253, .12);
    color: #0d6efd;
    font-weight: 700;
    font-size: .9rem;
}

.section-title {
    /* font-size: clamp(2rem, 4vw, 3.2rem); */
    font-size: 50px;
    font-weight: 800;
    color: #073b6f;
}

.section-subtitle {
    max-width: 760px;
    color: #1f2937;
    font-weight: 600;
    font-size: 1.08rem;
}

.branch-profile-card,
.branch-contact-card,
.branch-services-card,
.branch-info-card {
    padding: 38px;
}

.branch-icon-lg {
    width: 78px;
    height: 78px;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0d6efd, #0dcaf0);
    color: #fff;
    font-size: 2.1rem;
    box-shadow: 0 15px 35px rgba(13, 110, 253, .28);
    flex-shrink: 0;
}

.mini-label {
    display: inline-block;
    color: #198754;
    font-weight: 800;
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 6px;
}

.branch-profile-card h3,
.branch-contact-card h4,
.branch-info-card h3,
.branch-services-card h3 {
    font-weight: 800;
    color: #073b6f;
}

.branch-profile-card p,
.branch-info-card p {
    color: #1f2937;
    line-height: 1.75;
}

.branch-highlight {
    height: 100%;
    display: flex;
    gap: 15px;
    padding: 18px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .72);
    border: 1px solid rgba(13, 110, 253, .08);
    transition: .3s ease;
}

.branch-highlight:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, .08);
}

.branch-highlight i {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0d6efd;
    color: #fff;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.branch-highlight h6 {
    font-weight: 800;
    color: #073b6f;
    margin-bottom: 5px;
}

.branch-highlight p {
    margin: 0;
    font-size: .93rem;
}

.smart-cut-alert {
    display: flex;
    gap: 15px;
    padding: 20px;
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(255, 193, 7, .22), rgba(255, 255, 255, .75));
    border: 1px solid rgba(255, 193, 7, .35);
}

.smart-cut-alert i {
    font-size: 1.8rem;
    color: #f59f00;
}

.smart-cut-alert h6 {
    font-weight: 800;
    color: #7a4b00;
}

.contact-info-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contact-info-item {
    display: flex;
    gap: 15px;
    padding: 17px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .72);
    transition: .3s ease;
}

.contact-info-item:hover {
    transform: translateX(6px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .07);
}

.contact-info-item>i {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: #0d6efd;
    color: #fff;
    flex-shrink: 0;
}

.contact-info-item h6 {
    font-weight: 800;
    color: #073b6f;
    margin-bottom: 4px;
}

.contact-info-item p {
    margin: 0;
    color: #1f2937;
}

.contact-info-item a {
    color: #0d6efd;
    text-decoration: none;
    font-weight: 700;
}

.contact-info-item a:hover {
    color: #084298;
}

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

.branch-socials a {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #0d6efd;
    color: #fff;
    font-size: 1.15rem;
    transition: .3s ease;
}

.branch-socials a:hover {
    transform: translateY(-5px);
    background: #073b6f;
}

.branch-main-btn,
.branch-outline-btn {
    border-radius: 16px;
    padding: 14px 20px;
    font-weight: 800;
}

.branch-main-btn {
    box-shadow: 0 14px 32px rgba(13, 110, 253, .28);
}

.branch-main-btn:hover,
.branch-outline-btn:hover {
    transform: translateY(-3px);
}

.service-chip {
    height: 100%;
    padding: 18px 20px;
    border-radius: 18px;
    background: #fff;
    color: #073b6f;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .06);
    transition: .3s ease;
}

.service-chip:hover {
    transform: translateY(-6px);
    background: #0d6efd;
    color: #fff;
}

.service-chip i {
    font-size: 1.35rem;
    color: #0d6efd;
}

.service-chip:hover i {
    color: #fff;
}

.branch-info-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.branch-info-item {
    display: flex;
    gap: 15px;
    padding: 17px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .72);
    transition: .3s ease;
}

.branch-info-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .07);
}

.branch-icon {
    width: 52px;
    height: 52px;
    border-radius: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.branch-info-item h6 {
    font-weight: 800;
    color: #073b6f;
    margin-bottom: 4px;
}

.branch-info-item p {
    margin: 0;
}

.contact-map {
    min-height: 520px;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .13);
    border: 8px solid rgba(255, 255, 255, .85);
}

.contact-map iframe {
    width: 100%;
    height: 100%;
    min-height: 520px;
    border: 0;
    display: block;
}

/* Responsive */
@media(max-width:991px) {

    .branch-profile-card,
    .branch-contact-card,
    .branch-services-card,
    .branch-info-card {
        padding: 28px;
    }

    .contact-map,
    .contact-map iframe {
        min-height: 420px;
    }
}

@media(max-width:576px) {

    .branch-profile-card,
    .branch-contact-card,
    .branch-services-card,
    .branch-info-card {
        padding: 22px;
        border-radius: 22px;
    }

    .branch-icon-lg {
        width: 64px;
        height: 64px;
        font-size: 1.7rem;
    }

    .contact-info-item,
    .branch-info-item,
    .branch-highlight {
        flex-direction: column;
    }
}

.okalongo-branch-section {
    /* background: linear-gradient(180deg, #ffffff 0%, #eef6ff 100%); */
    padding: 100px 0;
    min-height: 738px;
    overflow: hidden;
    background: url('../img/waiting-room.webp') top center/cover no-repeat;
    background-attachment: fixed;
}

.okalongo-branch-section .section-title {
    color: #1d8cfb;
    text-shadow: 2px 2px 3px black;
    font-weight: 800;
}

.okalongo-branch-section::before {
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    background: rgba(13, 202, 240, 0.11);
    filter: blur(4px);
    top: -100px;
    left: -100px;
    z-index: 0;
}

.okalongo-branch-section .container-fluid {
    position: relative;
    z-index: 2;
}

/* ================ Ongwediva Branch Info Card ==================== */
.ongwediva-info-card {
    position: relative;
    overflow: hidden;
    border-left: 6px solid #198754;
}

.ongwediva-info-card::before {
    content: "";
    position: absolute;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    background: rgba(25, 135, 84, .12);
    top: -70px;
    right: -70px;
}

.ongwediva-info-card::after {
    content: "";
    position: absolute;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: rgba(13, 202, 240, .12);
    bottom: -45px;
    left: -45px;
}

.ongwediva-info-card>* {
    position: relative;
    z-index: 2;
}

.ongwediva-badge {
    background: rgba(25, 135, 84, .12);
    color: #198754;
}

.ongwediva-info-card h3 {
    color: #0f5132;
    font-weight: 800;
}

.ongwediva-info-card p {
    color: #1f2937;
    line-height: 1.7;
}

.ongwediva-info-card .branch-info-item {
    background: rgba(255, 255, 255, .76);
    border: 1px solid rgba(25, 135, 84, .08);
}

.ongwediva-info-card .branch-info-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 34px rgba(25, 135, 84, .12);
}

.ongwediva-info-card .branch-info-item h6 {
    color: #0f5132;
    font-weight: 800;
}

.ongwediva-info-card .branch-info-item a {
    color: #198754;
    font-weight: 700;
    text-decoration: none;
}

.ongwediva-info-card .branch-info-item a:hover {
    color: #0f5132;
}

.ongwediva-map {
    border-color: rgba(25, 135, 84, .25);
}

/* ================= Ondangwa Branch Info Card =================== */
.ondangwa-info-card {
    position: relative;
    overflow: hidden;
    border-left: 6px solid #dc3545;
}

.ondangwa-info-card::before {
    content: "";
    position: absolute;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    background: rgba(220, 53, 69, .13);
    top: -70px;
    right: -70px;
}

.ondangwa-info-card::after {
    content: "";
    position: absolute;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: rgba(255, 193, 7, .16);
    bottom: -45px;
    left: -45px;
}

.ondangwa-info-card>* {
    position: relative;
    z-index: 2;
}

.ondangwa-badge {
    background: rgba(220, 53, 69, .12);
    color: #dc3545;
}

.ondangwa-info-card h3 {
    color: #842029;
    font-weight: 800;
}

.ondangwa-info-card p {
    color: #1f2937;
    line-height: 1.7;
}

.ondangwa-info-card .branch-info-item {
    background: rgba(255, 255, 255, .76);
    border: 1px solid rgba(220, 53, 69, .08);
}

.ondangwa-info-card .branch-info-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 34px rgba(220, 53, 69, .13);
}

.ondangwa-info-card .branch-info-item h6 {
    color: #842029;
    font-weight: 800;
}

.ondangwa-map {
    border-color: rgba(220, 53, 69, .25);
}


/* =====================================================    SMART CUT ALERT ===================================================== */

.smart-cut-alert {
    display: flex;
    gap: 15px;
    padding: 18px 20px;
    background: linear-gradient(135deg, #fff7ed, #ffedd5);
    border: 1px solid #fed7aa;
    border-radius: 0px;
}

.smart-cut-alert i {
    color: #f97316;
    font-size: 1.8rem;
}

.smart-cut-alert h6 {
    color: #9a3412;
    font-weight: 900;
    margin-bottom: 4px;
}

.smart-cut-alert p {
    color: #7c2d12;
}

/* =====================================================    SERVICE CHIPS ===================================================== */

.service-chip {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 16px 18px;
    color: var(--dark);
    background: var(--light);
    border: 1px solid var(--border);
    border-radius: 0px;
    font-weight: 800;
    transition: var(--transition);
}

.service-chip i {
    color: var(--primary);
    font-size: 1.25rem;
}

.service-chip:hover {
    color: var(--white);
    background: linear-gradient(135deg, var(--primary), #38bdf8);
    transform: translateY(-4px);
    box-shadow: var(--shadow-sm);
}

.service-chip:hover i {
    color: var(--white);
}

.ongwediva-services-card .service-chip i {
    color: var(--success);
}

.ongwediva-services-card .service-chip:hover {
    background: linear-gradient(135deg, var(--success), #22c55e);
}

.ondangwa-services-card .service-chip i {
    color: var(--danger);
}

.ondangwa-services-card .service-chip:hover {
    background: linear-gradient(135deg, var(--danger), #fb7185);
}

/* =====================================================    CONTACT FORMS ===================================================== */

.branch-form-card .form-label {
    color: var(--dark);
    font-weight: 800;
    margin-bottom: 7px;
}

.branch-form-card .form-control,
.branch-form-card .form-select {
    min-height: 54px;
    color: var(--dark);
    background: var(--light);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: none;
    transition: var(--transition);
}

.branch-form-card textarea.form-control {
    min-height: 145px;
    resize: vertical;
}

.branch-form-card .form-control:focus,
.branch-form-card .form-select:focus {
    background: #ffffff;
    border-color: var(--primary);
    box-shadow: 0 0 0 0.22rem rgba(13, 110, 253, 0.12);
}

.ongwediva-branch-section .form-control:focus,
.ongwediva-branch-section .form-select:focus {
    border-color: var(--success);
    box-shadow: 0 0 0 0.22rem rgba(25, 135, 84, 0.12);
}

.ondangwa-branch-section .form-control:focus,
.ondangwa-branch-section .form-select:focus {
    border-color: var(--danger);
    box-shadow: 0 0 0 0.22rem rgba(220, 53, 69, 0.12);
}

/* =====================================================    MAP ===================================================== */

.contact-map {
    min-height: 560px;
    border-radius: var(--radius);
    overflow: hidden;
    background: #e2e8f0;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
}

.contact-map iframe {
    width: 100%;
    height: 100%;
    min-height: 560px;
    display: block;
    border: 0;
}

/* =====================================================    BRANCH SOCIALS ===================================================== */

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

.branch-socials a {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    color: var(--white);
    background: var(--primary);
    border-radius: 10%;
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

.ongwediva-branch-section .branch-socials a {
    background: var(--success);
}

.ondangwa-branch-section .branch-socials a {
    background: var(--danger);
}

.branch-socials a:hover {
    transform: translateY(-5px) scale(1.05);
    opacity: 0.9;
}

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

.btn {
    border-radius: 14px;
    font-weight: 800;
    transition: var(--transition);
}

.btn-lg {
    padding: 13px 22px;
    font-size: 1rem;
}

.btn:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-sm);
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary), #38bdf8);
    border: none;
}

.btn-success {
    background: linear-gradient(135deg, var(--success), #22c55e);
    border: none;
}

.btn-danger {
    background: linear-gradient(135deg, var(--danger), #fb7185);
    border: none;
}

.btn-outline-primary,
.btn-outline-success {
    border-width: 2px;
    background: #ffffff;
}

/* =====================================================    CTA ===================================================== */

.cta-box {
    position: relative;
    padding: clamp(34px, 5vw, 58px);
    color: var(--white);
    background:
        linear-gradient(135deg, rgba(13, 110, 253, 0.96), rgba(25, 135, 84, 0.96)),
        url("../img/clinic-cta-bg.jpg") center/cover no-repeat;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.cta-box h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    margin-bottom: 12px;
}

.cta-box p {
    max-width: 780px;
    margin-bottom: 0;
    color: rgba(255, 255, 255, 0.92);
    font-size: 1.08rem;
    line-height: 1.8;
}

/* =====================================================   MODAL ==================================================== */

.doctor-modal-content {
    background: var(--white);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.modal-doctor-img {
    width: 100%;
    max-height: 430px;
    object-fit: cover;
    border-radius: 0px;
    box-shadow: var(--shadow-md);
}

.modal-info-box {
    padding: 22px;
    background: var(--light);
    border: 1px solid var(--border);
    border-radius: 20px;
}

.modal-info-box h6 {
    color: var(--dark);
    font-weight: 900;
}

.modal-info-box p {
    color: var(--muted);
    line-height: 1.65;
}

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

@media (max-width: 991.98px) {
    .section-padding {
        padding: 70px 0;
    }

    .main-image,
    .director-photo {
        min-height: 380px;
    }

    .contact-map,
    .contact-map iframe {
        min-height: 430px;
    }

    .cta-box {
        text-align: center;
    }

    .cta-box .d-flex {
        justify-content: center !important;
    }
}

@media (max-width: 767.98px) {
    .section-padding {
        padding: 58px 0;
    }

    .section-title {
        font-size: 2rem;
    }

    .section-subtitle {
        font-size: 0.98rem;
    }

    .trust-card,
    .feature-card,
    .policy-card,
    .content-block,
    .info-card,
    .team-summary-card,
    .director-card,
    .branch-profile-card,
    .branch-contact-card,
    .branch-form-card,
    .branch-services-card {
        padding: 24px 20px;
        border-radius: 5px;
    }

    .doctor-img-wrap,
    .doctor-img img {
        height: 300px;
    }

    .contact-map,
    .contact-map iframe {
        min-height: 360px;
    }

    .main-image,
    .director-photo {
        min-height: 320px;
    }

    .mini-stat-card,
    .branch-highlight,
    .contact-info-item,
    .smart-cut-alert {
        padding: 15px;
    }
}

@media (max-width: 575.98px) {
    .container-fluid {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .badge-soft,
    .section-badge,
    .director-badge {
        margin-top: 20px;
        font-size: 0.74rem;
        padding: 8px 13px;
    }

    .mini-stat-card,
    .branch-highlight,
    .contact-info-item {
        gap: 12px;
    }

    .mini-stat-card i,
    .branch-highlight i,
    .contact-info-item>i {
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
        font-size: 1.05rem;
    }

    .branch-socials {
        justify-content: center;
    }

    .doctor-content {
        padding: 22px 18px;
    }

    .cta-box {
        padding: 32px 22px;
    }
}


/* ===============================   APPOINTMENT SECTION STYLING ================================ */

.section-padding {
    padding: 80px 0;
    background: linear-gradient(135deg, #f5f9ff 0%, #eef7f4 100%);
}

/* Main Form Card */
.appointment-card {
    background: #ffffff;
    border-left: 6px solid #0d6efd !important;
    box-shadow: 0 20px 45px rgba(13, 110, 253, 0.12) !important;
}

.appointment-card .card-body {
    position: relative;
}

.appointment-card h2 {
    color: #102a43;
    font-size: 2rem;
}

.appointment-card p {
    font-size: 0.95rem;
}

/* Icon Circles */
.icon-circle {
    width: 52px;
    height: 52px;
    min-width: 52px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

/* Labels */
.form-label {
    font-weight: 700;
    color: #243b53;
    font-size: 0.92rem;
    margin-bottom: 7px;
}

/* Input Groups */
.input-group {
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
}

.input-group-text {
    background: #eef6ff;
    color: #0d6efd;
    border: 1px solid #d7e8ff;
    border-right: 0;
    font-size: 1.05rem;
    min-width: 48px;
    justify-content: center;
}

.form-control,
.form-select {
    min-height: 48px;
    border: 1px solid #d7e8ff;
    color: #243b53;
    font-size: 0.95rem;
    box-shadow: none !important;
}

.form-control::placeholder {
    color: #9aa6b2;
}

.form-control:focus,
.form-select:focus {
    border-color: #0d6efd;
    background-color: #ffffff;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.13) !important;
}

.input-group:focus-within .input-group-text {
    background: #0d6efd;
    color: #ffffff;
    border-color: #0d6efd;
}

/* Textarea */
textarea.form-control {
    min-height: 140px;
    border-radius: 14px;
    resize: vertical;
    padding: 14px 16px;
}

/* Consent Box */
.form-check {
    background: #f8fbff !important;
    border: 1px solid #dbeafe !important;
    border-radius: 14px !important;
}

.form-check-input {
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.2rem;
}

.form-check-label {
    color: #334e68;
    font-weight: 500;
}

/* Submit Button */
.appointment-card .btn-primary {
    background: linear-gradient(135deg, #0d6efd, #0056d6);
    border: none;
    font-weight: 700;
    letter-spacing: 0.3px;
    padding: 14px 28px;
    transition: all 0.3s ease;
}

.appointment-card .btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 28px rgba(13, 110, 253, 0.28) !important;
}

/* Emergency Card */
.emergency-card {
    background: linear-gradient(135deg, #dc3545, #b02a37);
    box-shadow: 0 18px 35px rgba(220, 53, 69, 0.25) !important;
}

.emergency-card p {
    line-height: 1.7;
}

/* Sidebar Cards */
.col-lg-5>.card:not(.emergency-card) {
    background: #ffffff;
    border-left: 5px solid #0d6efd !important;
    transition: all 0.3s ease;
}

.col-lg-5>.card:not(.emergency-card):hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 35px rgba(15, 23, 42, 0.12) !important;
}

.col-lg-5 h4 {
    color: #102a43;
    font-size: 1.25rem;
}

/* Booking Steps */
.booking-step {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 15px 0;
    border-bottom: 1px dashed #dbeafe;
}

.booking-step:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.booking-step span {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0d6efd, #4dabf7);
    color: #ffffff;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 18px rgba(13, 110, 253, 0.22);
}

.booking-step p {
    margin: 0;
    color: #52606d;
    font-weight: 500;
    line-height: 1.6;
}

/* Better spacing on form rows */
form.row.g-3 {
    row-gap: 1.2rem;
}

/* Responsive Design */
@media (max-width: 991.98px) {
    .section-padding {
        padding: 60px 0;
    }

    .appointment-card h2 {
        font-size: 1.65rem;
    }

    .col-lg-5 {
        margin-top: 1.5rem;
    }
}

@media (max-width: 575.98px) {
    .section-padding {
        padding: 45px 0;
    }

    .appointment-card .card-body,
    .col-lg-5 .card-body {
        padding: 1.5rem !important;
    }

    .appointment-card h2 {
        font-size: 1.4rem;
    }

    .icon-circle {
        width: 45px;
        height: 45px;
        min-width: 45px;
        font-size: 1.15rem;
    }

    .form-control,
    .form-select {
        min-height: 46px;
        font-size: 0.9rem;
    }

    .appointment-card .btn-primary {
        width: 100%;
        padding: 13px 18px;
    }
}

/* =========================================   UNI-CARE SERVICES PAGE STYLING ============================================== */


/* ================= SECTION =============================== */
.section-padding {
    padding: 90px 0;
    background:
        radial-gradient(circle at top left, rgba(13, 110, 253, 0.08), transparent 32%),
        linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

/* =========================================   LEFT SERVICE NAVIGATION ========================================= */

.quick-links {
    padding: 30px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    z-index: 10;
}

.quick-links h5 {
    color: var(--dark);
    font-weight: 900;
    margin-bottom: 20px !important;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}

.quick-links a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    margin-bottom: 10px;
    color: var(--text);
    background: var(--light);
    border: 1px solid var(--border);
    border-radius: 14px;
    font-weight: 800;
    text-decoration: none;
    transition: var(--transition);
}

.quick-links a::before {
    content: "\f054";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: var(--primary);
    font-size: 0.75rem;
    transition: var(--transition);
}

.quick-links a:hover,
.quick-links a:focus {
    color: var(--white);
    background: linear-gradient(135deg, var(--primary), #38bdf8);
    border-color: transparent;
    transform: translateX(6px);
    box-shadow: var(--shadow-sm);
}

.quick-links a:hover::before,
.quick-links a:focus::before {
    color: var(--white);
}

/* =============================================   SIDEBAR CTA BOX ============================================ */

.quick-links .cta-box {
    position: relative;
    padding: 28px;
    color: var(--white);
    background:
        linear-gradient(135deg, rgba(13, 110, 253, 0.96), rgba(25, 135, 84, 0.96));
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.quick-links .cta-box::after {
    content: "";
    position: absolute;
    right: -55px;
    bottom: -55px;
    width: 150px;
    height: 150px;
    background: rgba(255, 255, 255, 0.14);
    border-radius: 50%;
}

.quick-links .cta-box h5,
.quick-links .cta-box p,
.quick-links .cta-box a {
    position: relative;
    z-index: 2;
}

.quick-links .cta-box h5 {
    color: var(--white);
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 10px !important;
}

.quick-links .cta-box p {
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.65;
}

.quick-links .cta-box .btn {
    color: var(--primary);
    background: var(--white);
    border: none;
    border-radius: 14px;
    font-weight: 900;
    padding: 13px 18px;
}

.quick-links .cta-box .btn:hover {
    color: var(--white);
    background: var(--dark);
    transform: translateY(-3px);
}

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

.service-card {
    position: relative;
    padding: clamp(28px, 4vw, 44px);
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid var(--border);
    /* border-radius: var(--radius); */
    border-radius: 0px;
    box-shadow: var(--shadow-md);
    overflow: hidden;
    transition: var(--transition);
    scroll-margin-top: 130px;
}

.service-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 6px;
    background: linear-gradient(90deg, var(--primary), #38bdf8, var(--success));
}

.service-card::after {
    content: "";
    position: absolute;
    right: -65px;
    top: -65px;
    width: 170px;
    height: 170px;
    background: rgba(13, 110, 253, 0.08);
    border-radius: 50%;
    transition: var(--transition);
}

.service-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
}

.service-card:hover::after {
    transform: scale(1.25);
    background: rgba(25, 135, 84, 0.1);
}

.service-icon {
    position: relative;
    z-index: 2;
    width: 76px;
    height: 76px;
    display: grid;
    place-items: center;
    color: var(--white);
    background: linear-gradient(135deg, var(--primary), #38bdf8);
    border-radius: 22px;
    font-size: 2rem;
    margin-bottom: 24px;
    box-shadow: 0 14px 32px rgba(13, 110, 253, 0.25);
}

.service-card h4 {
    position: relative;
    z-index: 2;
    color: var(--dark);
    font-size: 1.55rem;
    font-weight: 900;
    margin-bottom: 16px;
}

.service-card p {
    position: relative;
    z-index: 2;
    color: var(--muted);
    font-size: 1rem;
    line-height: 1.78;
}

.service-card strong {
    color: var(--dark);
    font-weight: 900;
}

/* ============ 4/5/26 ========= */
/* ================================    PREMIUM SERVICES MEGA MENU ================================ */

.premium-services-mega {
    width: 100%;
    left: 0;
    right: 0;
    top: 100%;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(240, 248, 255, 0.96)),
        radial-gradient(circle at top left, rgba(13, 110, 253, 0.12), transparent 35%),
        radial-gradient(circle at bottom right, rgba(25, 135, 84, 0.12), transparent 35%);
    backdrop-filter: blur(18px);
    border-top: 4px solid #0d6efd !important;
    overflow: hidden;
}

.mega-header {
    padding: 28px 32px;
    background:
        linear-gradient(135deg, rgba(13, 110, 253, 0.95), rgba(0, 150, 136, 0.92)),
        url("assets/img/medical-pattern.png");
    color: #fff;
    position: relative;
}

.mega-header::after {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    right: -50px;
    top: -70px;
    background: rgba(255, 255, 255, 0.14);
    border-radius: 50%;
}

.mega-badge {
    display: inline-flex;
    align-items: center;
    padding: 7px 15px;
    border-radius: 50px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(8px);
}

.mega-header h5 {
    margin: 14px 0 6px;
    font-weight: 800;
    font-size: 1.35rem;
}

.mega-header p {
    max-width: 760px;
    margin: 0;
    opacity: 0.95;
    font-size: 0.95rem;
}

.service-mega-card {
    position: relative;
    /* padding: 24px 20px; */
    padding: 18px 10px;
    border-radius: 0px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(13, 110, 253, 0.12);
    box-shadow: 0 14px 35px rgba(15, 23, 42, 0.08);
    transition: all 0.35s ease;
    overflow: hidden;
}

.service-mega-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(13, 110, 253, 0.06), transparent);
    opacity: 0;
    transition: 0.35s ease;
}

.service-mega-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 22px 45px rgba(15, 23, 42, 0.14);
    border-color: rgba(13, 110, 253, 0.28);
}

.service-mega-card:hover::before {
    opacity: 1;
}

.service-highlight {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(235, 255, 246, 0.95));
    border-color: rgba(25, 135, 84, 0.25);
}

.service-icon {
    position: relative;
    z-index: 1;
    width: 54px;
    /* height: 54px; */
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 0px;
    color: #fff;
    font-size: 1.55rem;
    margin-bottom: 16px;
    box-shadow: 0 12px 25px rgba(15, 23, 42, 0.18);
}

.icon-blue {
    background: linear-gradient(135deg, #0d6efd, #38bdf8);
}

.icon-pink {
    background: linear-gradient(135deg, #d63384, #ff7ab6);
}

.icon-purple {
    background: linear-gradient(135deg, #6f42c1, #9b5de5);
}

.icon-green {
    background: linear-gradient(135deg, #198754, #20c997);
}

.service-mega-card h6 {
    position: relative;
    z-index: 1;
    font-weight: 800;
    color: #102a43;
    margin-bottom: 8px;
}

.service-mega-card p {
    position: relative;
    z-index: 1;
    color: #64748b;
    font-size: 0.88rem;
    line-height: 1.55;
    margin-bottom: 14px;
}

.service-list {
    position: relative;
    z-index: 1;
    list-style: none;
    padding: 0;
    margin: 0;
}

.service-list li {
    margin-bottom: 7px;
}

.service-list a {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border-radius: 12px;
    color: #334155;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.25s ease;
}

.service-list a i {
    color: #0d6efd;
    font-size: 1rem;
}

.service-list a:hover {
    background: rgba(13, 110, 253, 0.08);
    color: #0d6efd;
    transform: translateX(4px);
}

.mega-bottom-cta {
    margin-top: 8px;
    padding: 10px 18px;
    border-radius: 0px;
    background:
        linear-gradient(135deg, #0f172a, #075985),
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.18), transparent 35%);
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.22);
}

.mega-bottom-cta span {
    font-weight: 800;
    font-size: 1rem;
}

.mega-bottom-cta p {
    margin: 5px 0 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.88rem;
}

.mega-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* Desktop hover support */
@media (min-width: 992px) {
    .mega-dropdown:hover>.dropdown-menu {
        display: block;
    }

    .mega-dropdown:hover>.nav-link {
        color: #0d6efd;
    }
}

/* Mobile */
@media (max-width: 991.98px) {
    .premium-services-mega {
        max-height: 80vh;
        overflow-y: auto;
    }

    .mega-header {
        padding: 22px;
    }

    .mega-bottom-cta {
        flex-direction: column;
        align-items: flex-start;
    }

    .mega-actions {
        width: 100%;
    }

    .mega-actions .btn {
        flex: 1;
    }
}

/* ================================    PREMIUM SERVICES PAGE SECTION ================================ */

.services-page-section {
    position: relative;
    background:
        linear-gradient(135deg, #f8fbff 0%, #eef8f5 100%);
    overflow: hidden;
}

.services-page-section::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    top: -160px;
    right: -120px;
    background: rgba(13, 110, 253, 0.09);
    border-radius: 50%;
}

.services-page-section::after {
    content: "";
    position: absolute;
    width: 320px;
    height: 320px;
    bottom: -140px;
    left: -120px;
    background: rgba(25, 135, 84, 0.1);
    border-radius: 50%;
}

.services-page-section .container-fluid {
    position: relative;
    z-index: 2;
}

.services-page-header .section-badge {
    margin-top: 20px;
    display: inline-flex;
    align-items: center;
    padding: 8px 18px;
    border-radius: 0px;
    background: rgba(13, 110, 253, 0.1);
    color: #0d6efd;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 0.78rem;
    letter-spacing: 0.5px;
}

.services-page-header h2 {
    margin-top: 16px;
    font-weight: 900;
    color: #102a43;
    font-size: clamp(1.8rem, 3vw, 2.8rem);
}

.services-page-header p {
    max-width: 780px;
    margin: 12px auto 0;
    color: #64748b;
    line-height: 1.7;
}

.premium-service-nav {
    padding: 24px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(13, 110, 253, 0.14);
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.09);
    backdrop-filter: blur(16px);
}

.nav-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

.nav-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 0px;
    color: #fff;
    font-size: 1.4rem;
    background: linear-gradient(135deg, #0d6efd, #20c997);
}

.nav-head h5 {
    margin: 0;
    font-weight: 900;
    color: #102a43;
}

.nav-head p {
    margin: 2px 0 0;
    color: #64748b;
    font-size: 0.86rem;
}

.premium-service-nav>a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    margin-bottom: 9px;
    border-radius: 16px;
    text-decoration: none;
    color: #334155;
    font-weight: 700;
    background: rgba(248, 250, 252, 0.85);
    border: 1px solid rgba(15, 23, 42, 0.06);
    transition: all 0.3s ease;
}

.premium-service-nav>a i {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: #0d6efd;
    background: rgba(13, 110, 253, 0.1);
}

.premium-service-nav>a:hover {
    color: #0d6efd;
    background: rgba(13, 110, 253, 0.08);
    transform: translateX(6px);
}

.premium-nav-cta {
    padding: 22px;
    background:
        linear-gradient(135deg, #0f172a, #075985),
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.2), transparent 35%);
    color: #fff;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.2);
}

.cta-label {
    display: inline-flex;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    color: #facc15;
}

.premium-nav-cta h5 {
    margin: 10px 0 8px;
    font-weight: 900;
}

.premium-nav-cta p {
    color: rgba(255, 255, 255, 0.76);
    font-size: 0.9rem;
}

.premium-service-card {
    position: relative;
    padding: 30px;
    border-radius: 0px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(13, 110, 253, 0.12);
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
    overflow: hidden;
    transition: all 0.35s ease;
}

.premium-service-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(13, 110, 253, 0.06), transparent);
    opacity: 0;
    transition: 0.35s ease;
}

.premium-service-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 25px 55px rgba(15, 23, 42, 0.14);
}

.premium-service-card:hover::before {
    opacity: 1;
}

.service-card-top {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 18px;
}

.service-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 0px;
    color: #fff;
    font-size: 1.7rem;
    flex-shrink: 0;
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.18);
}

.icon-blue {
    background: linear-gradient(135deg, #0d6efd, #38bdf8);
}

.icon-pink {
    background: linear-gradient(135deg, #d63384, #ff7ab6);
}

.icon-purple {
    background: linear-gradient(135deg, #6f42c1, #9b5de5);
}

.icon-green {
    background: linear-gradient(135deg, #198754, #20c997);
}

.service-kicker {
    display: inline-block;
    margin-bottom: 4px;
    color: #0d6efd;
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.premium-service-card h4 {
    margin: 0;
    color: #102a43;
    font-weight: 900;
}

.premium-service-card p {
    position: relative;
    z-index: 1;
    color: #64748b;
    line-height: 1.75;
    margin-bottom: 18px;
}

.service-chip-grid {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.service-chip-grid span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 13px;
    border-radius: 50px;
    background: rgba(13, 110, 253, 0.08);
    color: #334155;
    font-weight: 700;
    font-size: 0.88rem;
}

.service-chip-grid span i {
    color: #0d6efd;
}

.service-featured {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(235, 255, 246, 0.95));
    border-color: rgba(25, 135, 84, 0.22);
}

.mental-health-banner {
    padding: 28px;
    border-radius: 0px;
    background:
        linear-gradient(135deg, #0f172a, #075985),
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.2), transparent 35%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    box-shadow: 0 24px 55px rgba(15, 23, 42, 0.22);
}

.mental-health-banner span {
    color: #facc15;
    font-weight: 900;
    text-transform: uppercase;
    font-size: 0.8rem;
}

.mental-health-banner h4 {
    margin: 8px 0;
    font-weight: 900;
}

.mental-health-banner p {
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    max-width: 680px;
}

@media (max-width: 991.98px) {
    .premium-service-nav {
        position: relative !important;
        top: 0 !important;
    }

    .mental-health-banner {
        flex-direction: column;
        align-items: flex-start;
    }

    .mental-health-banner .btn {
        width: 100%;
    }
}

@media (max-width: 575.98px) {
    .premium-service-card {
        padding: 24px 20px;
    }

    .service-card-top {
        align-items: flex-start;
    }

    .service-icon {
        width: 54px;
        height: 54px;
        font-size: 1.45rem;
    }

    .service-chip-grid span {
        width: 100%;
    }
}


/* =========================================   SECTION TARGET HIGHLIGHT ============================= */

#general:target .service-card,
#laboratory:target .service-card,
#maternal:target .service-card,
#chronic:target .service-card,
#procedures:target .service-card {
    border-color: rgba(13, 110, 253, 0.45);
    box-shadow: 0 0 0 5px rgba(13, 110, 253, 0.08), var(--shadow-lg);
}

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

@media (max-width: 991.98px) {
    .section-padding {
        padding: 70px 0;
    }

    .quick-links {
        position: relative !important;
        top: 0 !important;
        margin-bottom: 25px;
    }

    .quick-links a {
        margin-bottom: 8px;
    }

    .service-card {
        scroll-margin-top: 90px;
    }
}

@media (max-width: 767.98px) {
    .section-padding {
        padding: 58px 0;
    }

    .quick-links,
    .service-card {
        padding: 24px 20px;
        border-radius: 18px;
    }

    .service-icon {
        width: 64px;
        height: 64px;
        font-size: 1.6rem;
        border-radius: 18px;
    }

    .service-card h4 {
        font-size: 1.35rem;
    }

    .service-card p {
        font-size: 0.96rem;
    }
}

@media (max-width: 575.98px) {
    .quick-links a {
        padding: 12px 14px;
        font-size: 0.92rem;
    }

    .quick-links .cta-box {
        padding: 24px 20px;
    }
}

/* ================= FULL DOCTORS PAGE ================= */

:root {
    --uc-primary: #0d6efd;
    --uc-success: #198754;
    --uc-danger: #dc3545;
    --uc-dark: #071827;
    --uc-soft: #f5f9fd;
    --uc-muted: #64748b;
    --uc-white: #ffffff;
    --uc-radius: 24px;
    --uc-shadow: 0 24px 70px rgba(7, 24, 39, 0.16);
}

.doctors-page {
    background: linear-gradient(180deg, #f7fbff 0%, #ffffff 100%);
    overflow: hidden;
}

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

/* HERO */
.doctors-hero {
    position: relative;
    min-height: 430px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: url("assets/img/ondangwa-waiting-area.jpg") center/cover no-repeat;
}

.doctors-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 80% 10%, rgba(25, 135, 84, 0.35), transparent 30%),
        linear-gradient(135deg, rgba(7, 24, 39, 0.9), rgba(13, 110, 253, 0.48));
    z-index: 1;
}

.doctors-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    backdrop-filter: blur(2px);
}

.doctors-hero h1 {
    color: #fff;
    font-size: clamp(2.3rem, 5vw, 4.8rem);
    font-weight: 950;
    line-height: 1.05;
    max-width: 950px;
    margin-top: 18px;
    text-shadow: 0 14px 40px rgba(0, 0, 0, 0.4);
}

.doctors-hero p {
    color: rgba(255, 255, 255, 0.9);
    max-width: 760px;
    font-size: 1.15rem;
    line-height: 1.75;
}

.doctors-badge,
.section-badge-dark,
.doctor-role-badge {
    display: inline-flex;
    align-items: center;
    padding: 10px 18px;
    border-radius: 0px;
    font-size: 0.82rem;
    font-weight: 850;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.doctors-badge {
    color: #fff;
    background: rgba(220, 53, 69, 0.9);
    box-shadow: 0 16px 36px rgba(220, 53, 69, 0.35);
}

.section-badge-dark,
.doctor-role-badge {
    color: var(--uc-primary);
    background: rgba(13, 110, 253, 0.09);
    border: 1px solid rgba(13, 110, 253, 0.16);
}

.section-heading {
    color: var(--uc-dark);
    font-size: clamp(1.9rem, 3vw, 3.1rem);
    font-weight: 950;
    line-height: 1.12;
}

.section-text {
    color: var(--uc-muted);
    font-size: 1.03rem;
    line-height: 1.75;
    max-width: 740px;
}

/* VIDEO INTRO */
.video-card {
    position: relative;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: var(--uc-shadow);
    background: #000;
}

.video-card video {
    width: 100%;
    display: block;
    min-height: 360px;
    object-fit: cover;
}

.video-play-badge {
    position: absolute;
    left: 22px;
    bottom: 22px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    padding: 12px 18px;
    border-radius: 999px;
    background: rgba(7, 24, 39, 0.72);
    backdrop-filter: blur(14px);
    font-weight: 800;
}

.video-play-badge i {
    color: #ff4d5e;
    font-size: 1.6rem;
}

.intro-feature {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 16px 40px rgba(7, 24, 39, 0.08);
    border: 1px solid rgba(13, 110, 253, 0.08);
    font-weight: 800;
    color: var(--uc-dark);
}

.intro-feature i {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(135deg, var(--uc-primary), #35b7ff);
}

/* DOCTOR SPOTLIGHT */
.doctor-spotlight-section {
    padding: 35px 0 80px;
}

.doctor-spotlight-card {
    padding: 34px;
    border-radius: 0px;
    background:
        radial-gradient(circle at top right, rgba(13, 110, 253, 0.13), transparent 28%),
        #fff;
    box-shadow: var(--uc-shadow);
    border: 1px solid rgba(13, 110, 253, 0.08);
}

.doctor-main-photo-wrap {
    position: relative;
    overflow: hidden;
    border-radius: 0px;
    box-shadow: 0 24px 60px rgba(7, 24, 39, 0.22);
}

.doctor-main-photo {
    width: 100%;
    min-height: 560px;
    object-fit: cover;
    display: block;
}

.doctor-status-badge {
    position: absolute;
    right: 22px;
    bottom: 22px;
    /* border: 1px groove; */
    text-shadow: 2px 2px 3px black;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    border-radius: 0px;
    color: #fff;
    font-weight: 850;
    background: linear-gradient(135deg, var(--uc-danger), #3a09eb);
    /* box-shadow: 0 14px 34px rgba(220, 53, 69, 0.42); */
    box-shadow: 2px 2px 5px black;
}

.doctor-spotlight-card h2 {
    margin-top: 16px;
    color: var(--uc-dark);
    font-size: clamp(2rem, 3.5vw, 3.4rem);
    font-weight: 950;
}

.doctor-position {
    color: var(--uc-primary);
    font-weight: 850;
}

.doctor-spotlight-card p {
    color: var(--uc-muted);
    line-height: 1.75;
}

.doctor-info-box {
    height: 100%;
    display: flex;
    gap: 15px;
    padding: 18px;
    border-radius: 0px;
    background: var(--uc-soft);
    border: 1px solid rgba(13, 110, 253, 0.08);
    transition: 0.3s ease;
}

.doctor-info-box:hover {
    transform: translateY(-5px);
    background: #fff;
    box-shadow: 0 18px 40px rgba(7, 24, 39, 0.09);
}

.doctor-info-box i {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    color: #fff;
    font-size: 1.35rem;
    background: linear-gradient(135deg, var(--uc-primary), var(--uc-success));
}

.doctor-info-box h6 {
    margin-bottom: 5px;
    color: var(--uc-dark);
    font-weight: 900;
}

.doctor-info-box p {
    margin-bottom: 0;
    font-size: 0.92rem;
}

.doctor-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.doctor-action-row .btn {
    border-radius: 16px;
    font-weight: 850;
    padding: 13px 20px;
}

/* GRID */
.doctors-grid-section {
    background:
        radial-gradient(circle at top left, rgba(13, 110, 253, 0.08), transparent 28%),
        linear-gradient(180deg, #f6fbff, #ffffff);
}

.team-doctor-card {
    height: 100%;
    overflow: hidden;
    border-radius: 0px;
    background: #fff;
    border: 1px solid rgba(13, 110, 253, 0.08);
    box-shadow: 0 18px 50px rgba(7, 24, 39, 0.1);
    transition: 0.35s ease;
}

.team-doctor-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 28px 70px rgba(7, 24, 39, 0.16);
}

.team-img {
    position: relative;
    height: 290px;
    overflow: hidden;
    background: #dbeafe;
}

.team-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.45s ease;
}

.team-doctor-card:hover .team-img img {
    transform: scale(1.08);
}

.team-img span {
    position: absolute;
    left: 16px;
    bottom: 16px;
    padding: 9px 14px;
    border-radius: 999px;
    color: #fff;
    background: rgba(7, 24, 39, 0.75);
    backdrop-filter: blur(12px);
    font-size: 0.78rem;
    font-weight: 850;
}

.team-body {
    padding: 24px;
}

.team-body h5 {
    color: var(--uc-dark);
    font-weight: 950;
    margin-bottom: 4px;
}

.team-role {
    color: var(--uc-primary);
    font-weight: 800;
    margin-bottom: 14px;
}

.team-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.team-tags span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border-radius: 999px;
    color: var(--uc-dark);
    background: var(--uc-soft);
    font-size: 0.78rem;
    font-weight: 800;
}

.team-desc {
    color: var(--uc-muted);
    line-height: 1.65;
}

/* REVIEWS */
.patient-reviews-section {
    padding: 80px 0;
    background: #fff;
}

.review-card {
    height: 100%;
    padding: 28px;
    border-radius: 26px;
    background: linear-gradient(180deg, #ffffff, #f7fbff);
    border: 1px solid rgba(13, 110, 253, 0.08);
    box-shadow: 0 18px 50px rgba(7, 24, 39, 0.09);
    transition: 0.3s ease;
}

.review-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 26px 65px rgba(7, 24, 39, 0.14);
}

.review-stars {
    color: #ffc107;
    font-size: 1.1rem;
    margin-bottom: 16px;
}

.review-card p {
    color: var(--uc-muted);
    line-height: 1.75;
}

.review-person {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 22px;
}

.review-person i {
    font-size: 2.3rem;
    color: var(--uc-primary);
}

.review-person h6 {
    margin: 0;
    color: var(--uc-dark);
    font-weight: 900;
}

.review-person small {
    color: var(--uc-muted);
}

/* BOOKING FORM */
.doctor-booking-section {
    background:
        linear-gradient(135deg, rgba(13, 110, 253, 0.08), rgba(25, 135, 84, 0.08)),
        #f7fbff;
}

.booking-card {
    overflow: hidden;
    border-radius: 34px;
    background: #fff;
    box-shadow: var(--uc-shadow);
}

.booking-info {
    padding: 40px;
    color: #fff;
    background:
        linear-gradient(135deg, rgba(7, 24, 39, 0.88), rgba(13, 110, 253, 0.72)),
        url("assets/img/ondangwa-waiting-area.jpg") center/cover no-repeat;
}

.booking-info h2 {
    margin-top: 18px;
    font-size: clamp(1.8rem, 3vw, 3rem);
    font-weight: 950;
}

.booking-info p {
    color: rgba(255, 255, 255, 0.86);
    line-height: 1.75;
}

.booking-contact {
    display: grid;
    gap: 14px;
    margin-top: 28px;
}

.booking-contact div {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.12);
    font-weight: 800;
}

.booking-contact i {
    color: #ffdde1;
    font-size: 1.25rem;
}

.doctor-booking-form {
    padding: 40px;
}

.doctor-booking-form .form-label {
    color: var(--uc-dark);
    font-weight: 850;
    font-size: 0.88rem;
}

.doctor-booking-form .form-control,
.doctor-booking-form .form-select {
    min-height: 52px;
    border-radius: 16px;
    border: 1px solid rgba(13, 110, 253, 0.14);
    background-color: #f8fbff;
    box-shadow: none;
}

.doctor-booking-form textarea.form-control {
    min-height: 130px;
}

.doctor-booking-form .form-control:focus,
.doctor-booking-form .form-select:focus {
    border-color: var(--uc-primary);
    background: #fff;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.12);
}

.doctor-booking-form .btn {
    border-radius: 16px;
    font-weight: 850;
}

.btn-danger {
    border: none;
    background: linear-gradient(135deg, var(--uc-danger), #ff465a);
}

.btn-outline-primary {
    border-color: var(--uc-primary);
    color: var(--uc-primary);
}

.btn-outline-primary:hover {
    color: #fff;
    background: var(--uc-primary);
}

/* RESPONSIVE */
@media (max-width: 991px) {

    .section-padding,
    .patient-reviews-section {
        padding: 60px 0;
    }

    .doctor-main-photo {
        min-height: 420px;
    }

    .doctor-spotlight-card,
    .booking-info,
    .doctor-booking-form {
        padding: 26px;
    }
}

@media (max-width: 575px) {
    .doctors-hero {
        min-height: 380px;
    }

    .team-img {
        height: 250px;
    }

    .doctor-main-photo {
        min-height: 360px;
    }

    .doctor-action-row .btn,
    .doctor-booking-form .btn {
        width: 100%;
    }

    .video-card video {
        min-height: 260px;
    }
}