@charset "UTF-8";

.light-background {
    --background-color: #e7e5dd;
    --surface-color: #fffefb;
}

.dark-background {
    --background-color: #0d1b2a;
    --default-color: #ffffff;
    --heading-color: #ffffff;
    --surface-color: #2e2b28;
    --contrast-color: #ffffff;
}

a {
    color: var(--accent-color);
    text-decoration: none;
    transition: 0.3s;
}

    a:hover {
        color: color-mix(in srgb, var(--accent-color), transparent 25%);
        text-decoration: none;
    }

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--heading-color);
    font-family: var(--default-font);
}

.php-email-form .error-message {
    display: none;
    background: #df1529;
    color: #ffffff;
    text-align: left;
    padding: 15px;
    margin-bottom: 24px;
    font-weight: 600;
}

.php-email-form .sent-message {
    display: none;
    color: #ffffff;
    background: #059652;
    text-align: center;
    padding: 15px;
    margin-bottom: 24px;
    font-weight: 600;
}

.php-email-form .loading {
    display: none;
    background: var(--surface-color);
    text-align: center;
    padding: 15px;
    margin-bottom: 24px;
}

    .php-email-form .loading:before {
        content: "";
        display: inline-block;
        border-radius: 50%;
        width: 24px;
        height: 24px;
        margin: 0 10px -6px 0;
        border: 3px solid var(--accent-color);
        border-top-color: var(--surface-color);
        animation: php-email-form-loading 1s linear infinite;
    }

@keyframes php-email-form-loading {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.clinic-container {
    width: min(1440px, calc(100% - 60px));
    margin: 0 auto;
}

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

.topbar-left,
.topbar-right,
.clinic-social,
.emergency-link {
    display: flex;
    align-items: center;
}

.topbar-left {
    gap: 18px;
}

    .topbar-left span,
    .topbar-left a {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        white-space: nowrap;
    }

.clinic-topbar a:hover {
    opacity: .8;
}

.topbar-left i {
    font-size: 15px;
    color: #bceaff;
}

.topbar-divider {
    width: 1px;
    height: 20px;
    background: rgba(255, 255, 255, .35);
}

.topbar-right {
    gap: 20px;
}

.clinic-social {
    gap: 15px;
}

    .clinic-social a {
        font-size: 16px;
    }

.emergency-link {
    gap: 9px;
    padding: 8px 14px;
    border-radius: 30px;
    background: linear-gradient(110deg, #31ad49, #008d82);
    white-space: nowrap;
}

    .emergency-link > i {
        font-size: 16px;
    }

    .emergency-link strong {
        font-size: 13px;
        font-weight: 600;
    }

.header-inner {
    min-height: 88px;
    height: 88px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.logo-line {
    height: 1px;
    flex: 1;
    min-width: 8px;
    background: #123477;
}

.clinic-specialty span {
    color: #269e43;
}

@media (max-width: 1200px) {
    .clinic-logo {
        max-width: 310px;
        gap: 8px;
    }

    .clinic-logo-icon {
        width: 90px;
    }

    .clinic-logo-img {
        max-width: 90px;
    }

    .clinic-name {
        font-size: 21px;
    }

    .clinic-specialty {
        font-size: 6px;
    }

    .clinic-tagline {
        font-size: 5px;
        gap: 3px;
    }

    .clinic-header .header-inner {
        gap: 12px;
    }
}

@media (max-width: 767px) {
    .clinic-logo {
        max-width: 270px;
        gap: 8px;
    }

    .clinic-logo-icon {
        width: 90px;
    }

    .clinic-logo-img {
        max-width: 90px;
    }

    .doctor-name {
        font-size: 8px;
        letter-spacing: 0.5px;
    }

    .clinic-name {
        font-size: 18px;
        gap: 3px;
        margin-bottom: 3px;
    }

    .heartbeat-icon {
        font-size: 14px;
    }

    .clinic-specialty {
        font-size: 5px;
    }

    .clinic-tagline {
        font-size: 4.5px;
        gap: 3px;
        margin-top: 3px;
    }

    .specialty-divider {
        height: 8px;
    }

    .clinic-header .header-inner {
        min-height: 70px;
    }
}

.nav-link::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 5px;
    height: 3px;
    border-radius: 5px;
    background: linear-gradient( 90deg, var(--clinic-blue), var(--clinic-green) );
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s ease;
}

.nav-link:hover,
.nav-link.active {
    color: #0754b5;
}

    .nav-link:hover::after,
    .nav-link.active::after {
        transform: scaleX(1);
    }

.dropdown-icon {
    font-size: 13px;
}

.services-nav-row {
    display: flex;
    align-items: center;
    position: relative;
}

    .services-nav-row .nav-link {
        padding-right: 5px;
    }

.services-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 40px;
    padding: 0;
    border: none;
    background: transparent;
    color: #122b55;
    font-size: 13px;
    cursor: pointer;
    transition: color .2s ease, transform .2s ease;
}

    .services-toggle:hover {
        color: #269b42;
    }

    .services-toggle i {
        transition: transform .25s ease;
    }

.clinic-nav-list .nav-dropdown {
    position: relative;
    z-index: 2000;
}

.clinic-nav-list .dropdown-menu {
    display: block;
    position: absolute;
    left: 0;
    z-index: 1100;
    width: 245px;
    min-width: 245px;
    padding: 8px;
    margin: 0;
    list-style: none;
    background: #fff;
    border: 1px solid #e4edf7;
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(8, 44, 102, .15);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
}

.clinic-nav-list .nav-dropdown.dropdown-open > .dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.clinic-nav-list .nav-dropdown.dropdown-open .services-toggle i {
    transform: rotate(180deg);
}

.clinic-nav-list .dropdown-menu li {
    display: block;
    width: 100%;
}

.clinic-nav-list .nav-dropdown > .dropdown-menu {
    display: block !important;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 3000;
    width: 245px;
    min-width: 245px;
    padding: 8px;
    margin: 0;
    list-style: none;
    background: #fff;
    border: 1px solid #e4edf7;
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(8, 44, 102, .15);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(5px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}

    .clinic-nav-list .nav-dropdown > .dropdown-menu::before {
        content: "";
        position: absolute;
        top: -8px;
        left: 0;
        right: 0;
        height: 8px;
    }

.clinic-nav-list .nav-dropdown:hover > .dropdown-menu,
.clinic-nav-list .nav-dropdown:focus-within > .dropdown-menu,
.clinic-nav-list .nav-dropdown.dropdown-open > .dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.clinic-nav-list .dropdown-menu li a {
    font-weight: 500;
    transition: background .2s ease, color .2s ease;
    display: block;
    padding: 12px 14px;
    color: #142e59;
    font-size: 13px;
    text-decoration: none;
    border-radius: 7px;
    position: relative;
    z-index: 1;
}

    .clinic-nav-list .dropdown-menu li a:hover {
        color: #269b42;
        background: #eff8f1;
    }

@media (max-width: 1050px) {
    .clinic-nav-list .nav-dropdown > .dropdown-menu {
        display: none !important;
        position: static;
        width: 100%;
        min-width: 0;
        padding: 5px 8px 8px 15px;
        border: none;
        box-shadow: none;
        transform: none;
    }

    .clinic-nav-list .nav-dropdown.dropdown-open > .dropdown-menu {
        display: block !important;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .clinic-nav-list .nav-dropdown > .dropdown-menu::before {
        display: none;
    }
}

@media (max-width: 1050px) {
    .services-nav-row {
        width: 100%;
    }

        .services-nav-row .nav-link {
            flex: 1;
        }

    .services-toggle {
        width: 44px;
        height: 44px;
        flex-shrink: 0;
        border-radius: 8px;
    }

        .services-toggle:hover {
            background: #eff7ff;
        }

    .clinic-nav-list .dropdown-menu {
        display: none;
        position: static;
        width: 100%;
        min-width: 0;
        padding: 5px 8px 8px 15px;
        margin: 0;
        border: none;
        border-radius: 0;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
        transition: none;
    }

    .clinic-nav-list .nav-dropdown.dropdown-open > .dropdown-menu {
        display: block;
    }
}

.nav-dropdown:hover .dropdown-menu,
.nav-dropdown:focus-within .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-menu a {
    display: block;
    padding: 11px 13px;
    color: var(--clinic-text);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    border-radius: 7px;
    transition: .2s ease;
}

    .dropdown-menu a:hover {
        color: var(--clinic-green);
        background: #eff9f1;
        padding-left: 18px;
    }

.header-appointment-btn,
.mobile-appointment-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 13px 16px;
    border-radius: 11px;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    background: linear-gradient(110deg, #0756c5, #087fc1 48%, #229f40);
    box-shadow: 0 5px 15px rgba(5, 91, 163, 0.16);
    flex-shrink: 0;
}

    .header-appointment-btn i:first-child {
        font-size: 18px;
    }

    .header-appointment-btn:hover,
    .mobile-appointment-btn:hover {
        color: #fff;
        transform: translateY(-1px);
        box-shadow: 0 10px 23px rgba(5, 91, 163, .30);
    }

.mobile-appointment-btn,
.mobile-menu-toggle {
    display: none;
}

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

.blue-icon {
    color: #0757bb;
}

.teal-icon {
    color: #0797b5;
}

.green-icon {
    color: #269b42;
}

@media (max-width: 1350px) {
    .clinic-container {
        width: calc(100% - 40px);
    }

    .header-inner {
        gap: 12px;
    }

    .clinic-logo-img {
        width: 90px;
    }

    .clinic-name {
        font-size: 25px;
    }

    .clinic-tagline {
        font-size: 7px;
    }

    .nav-link {
        padding-left: 9px;
        padding-right: 9px;
        font-size: 13px;
    }

    .header-appointment-btn {
        padding: 12px 14px;
        gap: 7px;
        font-size: 13px;
    }

    .clinic-feature {
        padding: 8px 10px;
        gap: 10px;
    }

    .feature-text h3 {
        font-size: 13px;
    }
}

@media (max-width: 1050px) {
    .clinic-logo-complete {
        width: 190px;
        height: 65px;
    }

    .topbar-inner {
        justify-content: center;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .topbar-right {
        display: none;
    }

    .topbar-left {
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px 15px;
    }

    .header-inner {
        min-height: 88px;
    }

    .clinic-logo-img {
        width: 90px;
    }

    .clinic-name {
        font-size: 23px;
    }

    .header-appointment-btn {
        margin-left: auto;
    }

    .mobile-menu-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border: 1px solid #dce8f5;
        border-radius: 10px;
        color: var(--clinic-blue);
        background: #f3f8ff;
        font-size: 27px;
        cursor: pointer;
        order: 3;
    }

    .clinic-navigation {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        max-height: calc(100vh - 130px);
        overflow-y: auto;
        padding: 15px 20px 22px;
        background: #fff;
        border-top: 1px solid #e5eef8;
        box-shadow: 0 15px 25px rgba(8, 44, 102, .12);
    }

        .clinic-navigation.nav-open {
            display: block;
        }

    .clinic-nav-list {
        display: flex;
        align-items: stretch;
        flex-direction: column;
        gap: 2px;
    }

        .clinic-nav-list > li {
            width: 100%;
        }

    .nav-link {
        display: flex;
        justify-content: space-between;
        width: 100%;
        padding: 13px 12px;
        font-size: 14px;
        border-radius: 7px;
    }

        .nav-link::after {
            display: none;
        }

        .nav-link:hover,
        .nav-link.active {
            background: #eff7ff;
        }

    .dropdown-menu {
        display: none;
        position: static;
        min-width: 0;
        padding: 4px 8px 8px 18px;
        border: none;
        border-radius: 0;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: none;
    }

    .nav-dropdown.dropdown-open .dropdown-menu {
        display: block;
    }

    .nav-dropdown:hover .dropdown-menu {
        display: none;
    }

    .nav-dropdown.dropdown-open:hover .dropdown-menu {
        display: block;
    }

    .mobile-appointment-btn {
        display: flex;
        margin-top: 12px;
        width: 100%;
        box-sizing: border-box;
    }

    .feature-inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 10px;
    }

    .clinic-feature {
        justify-content: flex-start;
        border-right: none;
        padding: 8px 18px;
    }

        .clinic-feature:nth-child(odd) {
            border-right: 1px solid #ccdeef;
        }
}

@media (max-width: 575px) {
    .clinic-logo-complete {
        width: 165px;
        height: 58px;
    }

    .clinic-container {
        width: calc(100% - 28px);
    }

    .clinic-topbar {
        font-size: 13px;
    }

    .topbar-inner {
        min-height: 36px;
    }

    .topbar-left {
        gap: 6px 12px;
    }

        .topbar-left span,
        .topbar-left a {
            gap: 5px;
        }

    .topbar-divider {
        display: none !important;
    }

    .header-inner {
        height: 72px;
        min-height: 72px;
        gap: 8px;
    }

    .clinic-logo {
        gap: 6px;
    }

    .clinic-logo-img {
        width: 90px;
    }

    .doctor-name {
        font-size: 8px;
        letter-spacing: 0.2px;
        margin-bottom: 3px;
    }

    .clinic-name {
        font-size: 17px;
        letter-spacing: .3px;
    }

    .clinic-tagline {
        font-size: 5px;
        letter-spacing: 0;
        margin-top: 4px;
    }

    .header-appointment-btn {
        display: none;
    }

    .mobile-menu-toggle {
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
        font-size: 25px;
    }

    .clinic-navigation {
        padding-left: 14px;
        padding-right: 14px;
    }

    .clinic-feature-strip {
        padding: 10px 0;
    }

    .feature-inner {
        column-gap: 4px;
        row-gap: 6px;
    }

    .clinic-feature {
        min-height: 55px;
        gap: 8px;
        padding: 6px 3px;
    }

        .clinic-feature:nth-child(odd) {
            border-right: 1px solid #ccdeef;
        }

    .feature-icon {
        width: 36px;
        height: 36px;
        flex: 0 0 36px;
    }

        .feature-icon i {
            font-size: 19px;
        }

    .feature-text h3 {
        font-size: 13px;
        margin-bottom: 3px;
    }

    .feature-text p {
        font-size: 9px;
    }
}

.clinic-logo-complete {
    width: 230px;
    height: 76px;
    object-fit: contain;
}

.scrolled .header {
    --background-color: #0d1b2a;
    box-shadow: 0px 0 18px rgba(0, 0, 0, 0.1);
}

@media (min-width: 1200px) {
    .navmenu {
        padding: 0;
    }

        .navmenu svg {
            height: 16px;
            padding-right: 10px;
        }

        .navmenu ul {
            margin: 0;
            padding: 0;
            display: flex;
            list-style: none;
            align-items: center;
        }

        .navmenu li {
            position: relative;
        }

        .navmenu a,
        .navmenu a:focus {
            color: var(--nav-color);
            padding: 18px 15px;
            font-size: 16px;
            font-family: var(--nav-font);
            font-weight: 400;
            display: flex;
            align-items: center;
            justify-content: space-between;
            white-space: nowrap;
            transition: 0.3s;
        }

            .navmenu a i,
            .navmenu a:focus i {
                font-size: 12px;
                line-height: 0;
                margin-left: 5px;
                transition: 0.3s;
            }

        .navmenu li:last-child a {
            padding-right: 0;
        }

        .navmenu li:hover > a,
        .navmenu .active,
        .navmenu .active:focus {
            color: var(--nav-hover-color);
        }

        .navmenu .dropdown ul {
            margin: 0;
            padding: 10px 0;
            background: var(--nav-dropdown-background-color);
            display: block;
            position: absolute;
            visibility: hidden;
            left: 14px;
            top: 130%;
            opacity: 0;
            transition: 0.3s;
            border-radius: 4px;
            z-index: 99;
            box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
        }

            .navmenu .dropdown ul li {
                min-width: 200px;
            }

            .navmenu .dropdown ul a {
                padding: 10px 20px;
                font-size: 15px;
                text-transform: none;
                color: var(--nav-dropdown-color);
            }

                .navmenu .dropdown ul a i {
                    font-size: 12px;
                }

                .navmenu .dropdown ul a:hover,
                .navmenu .dropdown ul .active,
                .navmenu .dropdown ul .active:hover,
                .navmenu .dropdown ul li:hover > a {
                    color: var(--nav-dropdown-hover-color);
                }

        .navmenu .dropdown:hover > ul {
            opacity: 1;
            top: 100%;
            visibility: visible;
        }

        .navmenu .dropdown .dropdown ul {
            top: 0;
            left: -90%;
            visibility: hidden;
        }

        .navmenu .dropdown .dropdown:hover > ul {
            opacity: 1;
            top: 0;
            left: -100%;
            visibility: visible;
        }
}

@media (max-width: 1199px) {
    .mobile-nav-toggle {
        color: var(--nav-color);
        font-size: 28px;
        line-height: 0;
        margin-right: 10px;
        cursor: pointer;
        transition: color 0.3s;
    }

    .navmenu {
        padding: 0;
        z-index: 9997;
    }

        .navmenu svg {
            height: 16px;
            padding-right: 10px;
        }

        .navmenu ul {
            display: none;
            list-style: none;
            position: absolute;
            inset: 60px 20px 20px 20px;
            padding: 10px 0;
            margin: 0;
            border-radius: 6px;
            background-color: var(--nav-mobile-background-color);
            overflow-y: auto;
            transition: 0.3s;
            z-index: 9998;
            box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
        }

        .navmenu a,
        .navmenu a:focus {
            color: var(--nav-dropdown-color);
            padding: 10px 20px;
            font-family: var(--nav-font);
            font-size: 17px;
            font-weight: 500;
            display: flex;
            align-items: center;
            justify-content: space-between;
            white-space: nowrap;
            transition: 0.3s;
        }

            .navmenu a i,
            .navmenu a:focus i {
                font-size: 12px;
                line-height: 0;
                margin-left: 5px;
                width: 30px;
                height: 30px;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 50%;
                transition: 0.3s;
                background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
            }

                .navmenu a i:hover,
                .navmenu a:focus i:hover {
                    background-color: var(--accent-color);
                    color: var(--contrast-color);
                }

            .navmenu a:hover,
            .navmenu .active,
            .navmenu .active:focus {
                color: var(--nav-dropdown-hover-color);
            }

                .navmenu .active i,
                .navmenu .active:focus i {
                    background-color: var(--accent-color);
                    color: var(--contrast-color);
                    transform: rotate(180deg);
                }

        .navmenu .dropdown ul {
            position: static;
            display: none;
            z-index: 99;
            padding: 10px 0;
            margin: 10px 20px;
            background-color: var(--nav-dropdown-background-color);
            border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
            box-shadow: none;
            transition: all 0.5s ease-in-out;
        }

            .navmenu .dropdown ul ul {
                background-color: rgba(33, 37, 41, 0.1);
            }

        .navmenu .dropdown > .dropdown-active {
            display: block;
            background-color: rgba(33, 37, 41, 0.03);
        }

    .mobile-nav-active {
        overflow: hidden;
    }

        .mobile-nav-active .mobile-nav-toggle {
            color: #fff;
            position: absolute;
            font-size: 32px;
            top: 15px;
            right: 15px;
            margin-right: 0;
            z-index: 9999;
        }

        .mobile-nav-active .navmenu {
            position: fixed;
            overflow: hidden;
            inset: 0;
            background: rgba(33, 37, 41, 0.8);
            transition: 0.3s;
        }

            .mobile-nav-active .navmenu > ul {
                display: block;
            }
}

.footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
}

.footer-top .container {
    max-width: 1440px;
}

.footer-top .row {
    align-items: stretch;
    --bs-gutter-x: 28px;
    --bs-gutter-y: 30px;
}

    .footer-top .row > div {
        min-width: 0;
    }

.footer h4::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 44px;
    height: 4px;
    background: #43cc69;
    border-radius: 4px;
}

.footer-about {
    min-width: 0;
    padding-left: 12px;
    padding-right: 24px;
}

.footer-logo {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    max-width: 250px;
    margin: 0 0 22px;
    padding: 0;
    line-height: 0;
    text-decoration: none;
    overflow: hidden;
}

    .footer-logo img,
    .footer-brand-logo {
        display: block;
        width: 100%;
        max-width: 230px;
        height: 95px;
        max-height: 95px;
        margin: 0;
        padding: 0;
        object-fit: contain;
        object-position: left center;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

.footer-description {
    color: #D5E3F0;
    font-size: 14px;
    margin-top: 0;
    margin-bottom: 18px;
    line-height: 1.8;
}

.footer-specialities {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    margin-top: 26px;
    gap: 12px;
    max-width: 300px;
}

.footer-speciality {
    flex: 1;
    min-width: 0;
    text-align: center;
}

.speciality-icon i {
    color: #35c4ef;
    font-size: 28px;
}

.footer-speciality:nth-child(2) .speciality-icon {
    border-color: #43cc69;
}

    .footer-speciality:nth-child(2) .speciality-icon i {
        color: #43cc69;
    }

.footer-speciality span {
    display: block;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
    text-transform: uppercase;
}

.footer-links-column {
    border-right: 1px solid rgba(255, 255, 255, 0.25);
    padding-right: 20px;
    padding-left: 20px;
}

.footer-links {
    padding: 0;
    margin: 0;
    list-style: none;
}

    .footer-links li {
        margin: 0 0 14px;
    }

    .footer-links a i {
        flex: 0 0 auto;
        color: #20B8D5;
        font-size: 12px;
        margin-top: 4px;
    }

    .footer-links a:hover {
        color: #35B85A;
    }

.footer-locations {
    padding-left: 20px;
}

    .footer-locations > .row {
        --bs-gutter-x: 22px;
        --bs-gutter-y: 25px;
    }

.location-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0;
}

.location-image {
    display: block;
    width: 100%;
    /*height: 145px;*/
    object-fit: cover;
    object-position: center;
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 10px;
    background: #153b57;
    margin: 0 0 15px;
}

.location-detail {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
    margin-bottom: 12px;
}

    .location-detail > i {
        flex: 0 0 16px;
        color: #20B8D5;
        font-size: 15px;
        margin-top: 3px;
    }

    .location-detail a {
        color: #dce8f5;
        text-decoration: none;
        overflow-wrap: anywhere;
    }

        .location-detail a:hover {
            color: #43cc69;
        }

    .location-detail small {
        color: #b8cde0;
        font-size: 13px;
    }

.location-direction i {
    color: #42c6ef;
    font-size: 15px;
}

.location-direction:hover {
    background: #078dbf;
    border-color: #078dbf;
    color: #ffffff;
}

.footer-brand {
    margin: 0 0 24px;
    max-width: 290px;
}

.footer-brand-name {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-decoration: none;
    line-height: 1.2;
}

.footer-doctor-name {
    color: #b8d0e7;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 5px;
}

.footer-clinic-name {
    color: #168cf0;
    font-size: 34px;
    font-weight: 800;
    letter-spacing: 0.5px;
    line-height: 1.1;
}

    .footer-clinic-name span {
        color: #42ce65;
    }

.footer-brand-tagline {
    display: block;
    color: #8bdcf3;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: 0.3px;
    margin-top: 8px;
}

.footer-brand-name:hover .footer-clinic-name {
    filter: brightness(1.15);
}

.footer .footer-description {
    font-size: 14px;
    line-height: 1.8;
    color: #D5E3F0;
}

@media (max-width: 575px) {
    .footer-brand {
        max-width: 270px;
    }

    .footer-clinic-name {
        font-size: 30px;
    }

    .footer-brand-tagline {
        font-size: 9px;
    }
}

.copyright-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    flex-wrap: wrap;
}

.copyright-left {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 20px;
}

.copyright-links {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.copyright a {
    color: #E3EDF7;
    text-decoration: none;
    transition: color 0.2s ease;
}

    .copyright a:hover {
        color: #35B85A;
    }

.copyright-divider {
    color: rgba(213, 227, 240, 0.5);
}

.copyright-right {
    text-align: right;
}

@media (max-width: 767px) {
    .copyright {
        padding: 16px 0;
    }

    .copyright-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .copyright-left {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .copyright-right {
        text-align: left;
    }
}

.footer-policy-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 7px;
}

    .footer-policy-links a,
    .credits a {
        color: #dce8f5;
        text-decoration: none;
        transition: color .2s ease;
    }

    .footer-policy-links span {
        color: #7895ae;
    }

    .footer-policy-links a:hover,
    .credits a:hover {
        color: #43cc69;
    }

.credits {
    color: #b7c9dc;
    font-size: 12px;
}

    .credits a {
        color: #E3EDF7;
    }

        .credits a:hover {
            color: #35B85A;
        }

.social-links {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .social-links a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        border-radius: 7px;
        background: rgba(255, 255, 255, .1);
        color: #ffffff;
        font-size: 20px;
        text-decoration: none;
        transition: background .2s ease, transform .2s ease;
    }

        .social-links a:hover {
            background: #137fb5;
            transform: translateY(-2px);
        }

        .social-links a:nth-child(2):hover {
            background: #c13584;
        }

.footer-social-links {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0 24px;
}

    .footer-social-links a {
        width: 38px;
        height: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.10);
        border: 1px solid rgba(32, 184, 213, 0.25);
        color: #FFFFFF;
        font-size: 18px;
        text-decoration: none;
        transition: all 0.25s ease;
    }

        .footer-social-links a:hover {
            background: #35B85A;
            border-color: #35B85A;
            color: #FFFFFF;
            transform: translateY(-3px);
        }

@media (min-width: 992px) {
    .footer-links-column {
        border-right: 1px solid rgba(255, 255, 255, .25);
    }
}

@media (max-width: 1199px) {
    .footer-top .row {
        --bs-gutter-x: 20px;
    }

    .footer-about {
        padding-right: 10px;
    }

    .footer-links-column {
        padding-left: 12px;
        padding-right: 12px;
    }

    .footer-locations {
        padding-left: 10px;
    }

    .footer h4 {
        font-size: 16px;
    }

    .location-image {
        /*height: 125px;*/
    }
}

@media (max-width: 991px) {
    .footer-top {
        padding: 38px 0 30px;
    }

    .footer-about {
        padding-right: 12px;
    }

    .footer .footer-logo img,
    .footer .footer-logo .footer-brand-logo {
        max-width: 250px;
        height: 100px;
        max-height: 100px;
    }

    .footer-links-column {
        border-right: none;
        padding-left: 12px;
        padding-right: 12px;
    }

    .footer-locations {
        padding-left: 12px;
    }

    .location-image {
        /*height: 180px;*/
    }

    .footer h4 {
        font-size: 18px;
    }
}

@media (max-width: 575px) {
    .footer-top {
        padding: 32px 0 20px;
    }

    .footer-logo img,
    .footer-brand-logo {
        max-width: 240px;
        max-height: 105px;
    }

    .footer .footer-logo img,
    .footer .footer-logo .footer-brand-logo {
        max-width: 220px;
        height: 90px;
        max-height: 90px;
    }

    .footer-specialities {
        max-width: 350px;
        gap: 10px;
    }

    .footer-locations > .row > div {
        width: 100%;
    }

    .location-image {
        /*height: 200px;*/
    }

    .location-card {
        margin-bottom: 18px;
    }

    .copyright-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
    }

    .social-links {
        order: -1;
    }
}

#preloader {
    position: fixed;
    inset: 0;
    z-index: 999999;
    overflow: hidden;
    background: var(--background-color);
    transition: all 0.6s ease-out;
}

    #preloader:before {
        content: "";
        position: fixed;
        top: calc(50% - 30px);
        left: calc(50% - 30px);
        border: 6px solid #ffffff;
        border-color: var(--accent-color) transparent var(--accent-color) transparent;
        border-radius: 50%;
        width: 60px;
        height: 60px;
        animation: animate-preloader 1.5s linear infinite;
    }

@keyframes animate-preloader {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.scroll-top {
    position: fixed;
    visibility: hidden;
    opacity: 0;
    right: 15px;
    bottom: -15px;
    z-index: 99999;
    background-color: var(--accent-color);
    width: 44px;
    height: 44px;
    border-radius: 50px;
    transition: all 0.4s;
}

    .scroll-top i {
        font-size: 24px;
        color: var(--contrast-color);
        line-height: 0;
    }

    .scroll-top:hover {
        background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
        color: var(--contrast-color);
    }

    .scroll-top.active {
        visibility: visible;
        opacity: 1;
        bottom: 15px;
    }

@media screen and (max-width: 768px) {
    [data-aos-delay] {
        transition-delay: 0 !important;
    }
}

.page-title {
    color: var(--default-color);
    background-color: var(--background-color);
    background-size: cover;
    /*background-position: center;*/
    background-repeat: no-repeat;
    /*padding: 160px 0 160px 0;*/
    text-align: center;
    position: relative;
}

    .page-title:before {
        content: "";
        background-color: color-mix(in srgb, var(--background-color), transparent 50%);
        position: absolute;
        inset: 0;
    }

    .page-title h1 {
        font-size: 42px;
        font-weight: 700;
        margin-bottom: 10px;
    }

    .page-title .breadcrumbs ol {
        display: flex;
        flex-wrap: wrap;
        list-style: none;
        justify-content: center;
        padding: 0;
        margin: 0;
        font-size: 16px;
        font-weight: 400;
    }

        .page-title .breadcrumbs ol a {
            color: #55f507;
        }

        .page-title .breadcrumbs ol li + li {
            padding-left: 10px;
        }

            .page-title .breadcrumbs ol li + li::before {
                content: "/";
                display: inline-block;
                padding-right: 10px;
                color: color-mix(in srgb, var(--default-color), transparent 50%);
            }

section,
.section {
    color: var(--default-color);
    background-color: var(--background-color);
    scroll-margin-top: 90px;
    overflow: clip;
}

@media (max-width: 1199px) {
    section,
    .section {
        scroll-margin-top: 66px;
    }
}

.section-title {
    text-align: center;
    padding-bottom: 60px;
    position: relative;
}

    .section-title h2 {
        font-size: 32px;
        font-weight: 700;
        margin-bottom: 20px;
        padding-bottom: 20px;
        position: relative;
    }

        .section-title h2:before {
            content: "";
            position: absolute;
            display: block;
            width: 160px;
            height: 1px;
            background: color-mix(in srgb, var(--default-color), transparent 60%);
            left: 0;
            right: 0;
            bottom: 1px;
            margin: auto;
        }

        .section-title h2::after {
            content: "";
            position: absolute;
            display: block;
            width: 60px;
            height: 3px;
            background: var(--accent-color);
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }

    .section-title p {
        margin-bottom: 0;
    }

.about-home .about-images {
    position: relative;
    /*height: 480px;*/
}

    .about-home .about-images .image-stack {
        position: relative;
        height: 100%;
    }

        .about-home .about-images .image-stack .image-main {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 75%;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
        }

            .about-home .about-images .image-stack .image-main img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

        .about-home .about-images .image-stack .image-overlay {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 65%;
            height: 55%;
            border-radius: 16px;
            overflow: hidden;
            border: 4px solid var(--surface-color);
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.12);
            z-index: 2;
        }

            .about-home .about-images .image-stack .image-overlay img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

    .about-home .about-images .floating-badge {
        position: absolute;
        top: 60%;
        left: 10%;
        transform: translateY(-50%);
        background-color: var(--accent-color);
        color: var(--contrast-color);
        padding: 1.25rem;
        border-radius: 16px;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        box-shadow: 0 15px 30px rgba(54, 144, 231, 0.3);
        z-index: 3;
    }

        .about-home .about-images .floating-badge .badge-icon {
            font-size: 1.5rem;
        }

        .about-home .about-images .floating-badge .badge-info {
            display: flex;
            flex-direction: column;
            line-height: 1.2;
        }

            .about-home .about-images .floating-badge .badge-info .badge-title {
                font-weight: 600;
                font-size: 1rem;
            }

            .about-home .about-images .floating-badge .badge-info .badge-subtitle {
                font-size: 0.8rem;
                opacity: 0.9;
            }

@media (max-width: 768px) {
    .about-home .about-images {
        height: 350px;
    }

        .about-home .about-images .image-stack .image-main {
            width: 80%;
            height: 70%;
        }

        .about-home .about-images .image-stack .image-overlay {
            width: 60%;
            height: 50%;
        }

        .about-home .about-images .floating-badge {
            padding: 1rem;
            gap: 0.5rem;
            left: 5%;
        }

            .about-home .about-images .floating-badge .badge-icon {
                font-size: 1.25rem;
            }

            .about-home .about-images .floating-badge .badge-info .badge-title {
                font-size: 0.9rem;
            }

            .about-home .about-images .floating-badge .badge-info .badge-subtitle {
                font-size: 0.7rem;
            }
}

.about-home .about-content {
    padding-left: 2rem;
}

    .about-home .about-content .section-header {
        margin-bottom: 1.5rem;
    }

        .about-home .about-content .section-header .subtitle {
            display: block;
            color: var(--accent-color);
            font-weight: 500;
            font-size: 0.95rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 0.5rem;
        }

        .about-home .about-content .section-header h2 {
            font-size: 2.25rem;
            font-weight: 700;
            line-height: 1.2;
            margin: 0;
        }

@media (max-width: 768px) {
    .about-home .about-content .section-header h2 {
        font-size: 1.75rem;
    }
}

.about-home .about-content p {
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 1.25rem;
    color: color-mix(in srgb, var(--default-color), transparent 15%);
}

.about-home .about-content .features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin: 2rem 0;
}

@media (max-width: 576px) {
    .about-home .about-content .features-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

.about-home .about-content .features-grid .feature-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

    .about-home .about-content .features-grid .feature-item .feature-icon {
        flex-shrink: 0;
        width: 40px;
        height: 40px;
        background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
        color: var(--accent-color);
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
    }

    .about-home .about-content .features-grid .feature-item .feature-content h4 {
        font-size: 0.95rem;
        font-weight: 600;
        margin-bottom: 0.25rem;
        color: var(--heading-color);
    }

    .about-home .about-content .features-grid .feature-item .feature-content p {
        font-size: 0.85rem;
        line-height: 1.4;
        margin: 0;
        color: color-mix(in srgb, var(--default-color), transparent 30%);
    }

.about-home .about-content .about-actions {
    margin-top: 2rem;
}

    .about-home .about-content .about-actions .btn-discover {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 14px 28px;
        background-color: var(--accent-color);
        color: var(--contrast-color);
        text-decoration: none;
        border-radius: 8px;
        font-weight: 500;
        transition: all 0.3s ease;
        border: 2px solid var(--accent-color);
    }

        .about-home .about-content .about-actions .btn-discover:hover {
            background-color: transparent;
            color: var(--accent-color);
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
        }

            .about-home .about-content .about-actions .btn-discover:hover i {
                transform: translateX(3px);
            }

        .about-home .about-content .about-actions .btn-discover i {
            transition: transform 0.3s ease;
        }

@media (max-width: 992px) {
    .about-home .about-content {
        padding-left: 0;
        margin-top: 3rem;
        text-align: center;
    }

        .about-home .about-content .features-grid .feature-item {
            text-align: left;
        }
}

@media (max-width: 992px) {
    .about-home .row {
        flex-direction: column;
    }
}

.call-to-action {
    position: relative;
    overflow: hidden;
}

    .call-to-action::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image: url("assets/img/hotel/showcase-3.webp");
        background-size: cover;
        background-position: center;
        opacity: 0.1;
        z-index: 0;
    }

    .call-to-action .container {
        position: relative;
        z-index: 1;
    }

    .call-to-action .cta-content {
        background: var(--surface-color);
        border-radius: 20px;
        padding: 60px 40px;
        box-shadow: 0 20px 60px color-mix(in srgb, var(--default-color), transparent 90%);
        border: 1px solid color-mix(in srgb, var(--accent-color), transparent 80%);
    }

@media (max-width: 768px) {
    .call-to-action .cta-content {
        padding: 40px 30px;
        border-radius: 15px;
    }
}

@media (max-width: 992px) {
    .call-to-action .text-content {
        margin-bottom: 2rem;
        text-align: center;
    }
}

.call-to-action .text-content h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: var(--heading-color);
}

@media (max-width: 768px) {
    .call-to-action .text-content h2 {
        font-size: 2rem;
    }
}

@media (max-width: 576px) {
    .call-to-action .text-content h2 {
        font-size: 1.75rem;
    }
}

.call-to-action .text-content .lead {
    font-size: 1.1rem;
    color: color-mix(in srgb, var(--default-color), transparent 20%);
    line-height: 1.6;
}

@media (max-width: 768px) {
    .call-to-action .text-content .lead {
        font-size: 1rem;
    }
}

.call-to-action .cta-action {
    position: relative;
}

.call-to-action .btn-cta {
    background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color), #000 15%));
    color: var(--contrast-color);
    font-size: 1.1rem;
    font-weight: 600;
    padding: 15px 35px;
    border-radius: 50px;
    border: none;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    box-shadow: 0 8px 25px color-mix(in srgb, var(--accent-color), transparent 60%);
    transition: all 0.3s ease;
}

    .call-to-action .btn-cta:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 35px color-mix(in srgb, var(--accent-color), transparent 50%);
        background: linear-gradient(135deg, color-mix(in srgb, var(--accent-color), #000 10%), color-mix(in srgb, var(--accent-color), #000 25%));
        color: var(--contrast-color);
    }

    .call-to-action .btn-cta:active {
        transform: translateY(0);
    }

    .call-to-action .btn-cta i {
        font-size: 1.2rem;
    }

@media (max-width: 768px) {
    .call-to-action .btn-cta {
        font-size: 1rem;
        padding: 12px 30px;
    }
}

.call-to-action .offer-badge {
    background: linear-gradient(135deg, #28a745, color-mix(in srgb, #28a745, #000 15%));
    color: white;
    padding: 8px 20px;
    border-radius: 25px;
    font-size: 0.9rem;
    font-weight: 600;
    margin-top: 1rem;
    display: inline-block;
    box-shadow: 0 4px 15px color-mix(in srgb, #28a745, transparent 60%);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

.call-to-action .feature-item .icon-wrapper {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color), #000 15%));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    transition: all 0.3s ease;
}

    .call-to-action .feature-item .icon-wrapper i {
        font-size: 1.8rem;
        color: var(--contrast-color);
    }

.call-to-action .feature-item:hover .icon-wrapper {
    transform: translateY(-5px) scale(1.1);
    box-shadow: 0 10px 25px color-mix(in srgb, var(--accent-color), transparent 60%);
}

.call-to-action .feature-item h5 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: var(--heading-color);
}

.call-to-action .feature-item p {
    font-size: 0.9rem;
    color: color-mix(in srgb, var(--default-color), transparent 30%);
    margin-bottom: 0;
    line-height: 1.5;
}

.gallery-showcase .gallery-carousel {
    margin-bottom: 2rem;
}

    .gallery-showcase .gallery-carousel .swiper-wrapper {
        height: auto !important;
    }

.gallery-showcase .gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    cursor: pointer;
}

    .gallery-showcase .gallery-item:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
    }

        .gallery-showcase .gallery-item:hover .gallery-overlay {
            opacity: 1;
        }

        .gallery-showcase .gallery-item:hover img {
            transform: scale(1.05);
        }

    .gallery-showcase .gallery-item img {
        width: 100%;
        height: 250px;
        object-fit: cover;
        transition: transform 0.3s ease;
    }

@media (max-width: 576px) {
    .gallery-showcase .gallery-item img {
        height: 200px;
    }
}

.gallery-showcase .gallery-item .gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color), transparent 60%));
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

    .gallery-showcase .gallery-item .gallery-overlay i {
        color: var(--contrast-color);
        font-size: 2rem;
    }

.gallery-showcase .btn-gallery {
    background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color), #000000 20%));
    color: var(--contrast-color);
    border: none;
    padding: 15px 35px;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 50px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: all 0.3s ease;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

    .gallery-showcase .btn-gallery:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 35px rgba(0, 0, 0, 0.2);
        color: var(--contrast-color);
        background: linear-gradient(135deg, color-mix(in srgb, var(--accent-color), #000000 10%), color-mix(in srgb, var(--accent-color), #000000 30%));
    }

    .gallery-showcase .btn-gallery i {
        font-size: 1.2rem;
    }

@media (max-width: 576px) {
    .gallery-showcase .btn-gallery {
        padding: 12px 28px;
        font-size: 1rem;
    }
}

.about .about-content h3 {
    font-size: 2.5rem;
    margin-bottom: 2rem;
    line-height: 1.2;
}

@media (max-width: 768px) {
    .about .about-content h3 {
        font-size: 2rem;
    }
}

.about .about-content p {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 1.5rem;
    color: color-mix(in srgb, var(--default-color), transparent 15%);
}

.about .stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin: 3rem 0;
}

@media (max-width: 576px) {
    .about .stats-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

.about .stat-item {
    text-align: center;
    padding: 1.5rem;
    background: var(--surface-color);
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease;
}

    .about .stat-item:hover {
        transform: translateY(-5px);
    }

    .about .stat-item .stat-number {
        font-size: 3rem;
        font-weight: 700;
        color: var(--accent-color);
        line-height: 1;
        margin-bottom: 0.5rem;
        font-family: var(--default-font);
    }

    .about .stat-item .stat-label {
        font-size: 0.9rem;
        color: var(--heading-color);
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

.about .cta-button {
    margin-top: 2rem;
}

    .about .cta-button .btn-primary {
        background: var(--accent-color);
        border: none;
        padding: 12px 30px;
        border-radius: 25px;
        color: var(--contrast-color);
        font-weight: 500;
        text-decoration: none;
        display: inline-block;
        transition: all 0.3s ease;
    }

        .about .cta-button .btn-primary:hover {
            background: color-mix(in srgb, var(--accent-color), black 15%);
            transform: translateY(-2px);
        }

.about .about-visuals .main-image {
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    margin-bottom: 2rem;
}

    .about .about-visuals .main-image img {
        width: 100%;
        height: 400px;
        object-fit: cover;
        transition: transform 0.3s ease;
    }

    .about .about-visuals .main-image .image-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.3);
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .about .about-visuals .main-image .play-button {
        width: 80px;
        height: 80px;
        background: var(--accent-color);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: transform 0.3s ease;
    }

        .about .about-visuals .main-image .play-button i {
            font-size: 2rem;
            color: var(--contrast-color);
        }

        .about .about-visuals .main-image .play-button:hover {
            transform: scale(1.1);
        }

    .about .about-visuals .main-image:hover .image-overlay {
        opacity: 1;
    }

    .about .about-visuals .main-image:hover img {
        transform: scale(1.05);
    }

.about .features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

@media (max-width: 576px) {
    .about .features-grid {
        grid-template-columns: 1fr;
    }
}

.about .feature-item {
    background: var(--surface-color);
    padding: 1.5rem;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease;
}

    .about .feature-item:hover {
        transform: translateY(-5px);
    }

    .about .feature-item .feature-icon {
        width: 60px;
        height: 60px;
        background: color-mix(in srgb, var(--accent-color), transparent 90%);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 1rem;
    }

        .about .feature-item .feature-icon i {
            font-size: 1.5rem;
            color: var(--accent-color);
        }

    .about .feature-item h5 {
        font-size: 1.1rem;
        margin-bottom: 0.5rem;
        color: var(--heading-color);
    }

    .about .feature-item p {
        font-size: 0.9rem;
        color: color-mix(in srgb, var(--default-color), transparent 30%);
        margin: 0;
    }

.about .awards-section {
    margin-top: 5rem;
    margin-bottom: 3rem;
}

    .about .awards-section .section-header h4 {
        font-size: 2rem;
        margin-bottom: 1rem;
        color: var(--heading-color);
    }

    .about .awards-section .section-header p {
        font-size: 1.1rem;
        color: color-mix(in srgb, var(--default-color), transparent 30%);
    }

.about .award-item {
    background: var(--surface-color);
    padding: 2rem 1.5rem;
    border-radius: 10px;
    text-align: center;
    margin-bottom: 2rem;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease;
}

    .about .award-item:hover {
        transform: translateY(-5px);
    }

    .about .award-item .award-icon {
        width: 70px;
        height: 70px;
        background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color), black 20%));
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 1.5rem;
    }

        .about .award-item .award-icon i {
            font-size: 1.8rem;
            color: var(--contrast-color);
        }

    .about .award-item h6 {
        font-size: 1.2rem;
        margin-bottom: 0.5rem;
        color: var(--heading-color);
        font-weight: 600;
    }

    .about .award-item span {
        font-size: 0.9rem;
        color: color-mix(in srgb, var(--default-color), transparent 30%);
    }

@media (max-width: 992px) {
    .about .about-content {
        margin-bottom: 3rem;
    }
}

.menu .menu-filters ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    list-style: none;
    margin: 0;
    padding: 0;
}

    .menu .menu-filters ul li {
        padding: 8px 16px;
        font-size: 1rem;
        font-weight: 500;
        cursor: pointer;
        border-radius: 25px;
        background-color: var(--surface-color);
        color: var(--default-color);
        transition: 0.3s;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    }

        .menu .menu-filters ul li:hover {
            background-color: color-mix(in srgb, var(--accent-color), transparent 80%);
        }

        .menu .menu-filters ul li.filter-active {
            background-color: var(--accent-color);
            color: var(--contrast-color);
        }

@media (max-width: 768px) {
    .menu .menu-filters ul {
        gap: 8px;
    }

        .menu .menu-filters ul li {
            padding: 6px 12px;
            font-size: 0.9rem;
        }
}

.menu .menu-container {
    position: relative;
}

.menu .specials-badge {
    margin-bottom: 15px;
}

    .menu .specials-badge span {
        display: inline-block;
        background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
        color: var(--heading-color);
        font-weight: 600;
        font-size: 1.1rem;
        padding: 8px 20px;
        border-radius: 20px;
    }

        .menu .specials-badge span i {
            color: var(--accent-color);
            margin-right: 8px;
        }

.menu .specials-container {
    margin-bottom: 2rem;
}

.menu .special-item {
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s, box-shadow 0.3s;
    height: 100%;
    background-color: var(--surface-color);
}

    .menu .special-item:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    }

    .menu .special-item .menu-item-img {
        position: relative;
        overflow: hidden;
    }

        .menu .special-item .menu-item-img img {
            width: 100%;
            height: 240px;
            object-fit: cover;
            transition: transform 0.5s;
        }

        .menu .special-item .menu-item-img:hover img {
            transform: scale(1.05);
        }

        .menu .special-item .menu-item-img .menu-item-badges {
            position: absolute;
            top: 10px;
            left: 10px;
            display: flex;
            gap: 8px;
        }

            .menu .special-item .menu-item-img .menu-item-badges span {
                font-size: 0.75rem;
                font-weight: 600;
                padding: 4px 10px;
                border-radius: 20px;
                text-transform: uppercase;
                letter-spacing: 0.5px;
            }

            .menu .special-item .menu-item-img .menu-item-badges .badge-special {
                background-color: var(--accent-color);
                color: var(--contrast-color);
            }

            .menu .special-item .menu-item-img .menu-item-badges .badge-vegan {
                background-color: color-mix(in srgb, green, transparent 30%);
                color: var(--contrast-color);
            }

            .menu .special-item .menu-item-img .menu-item-badges .badge-spicy {
                background-color: color-mix(in srgb, red, transparent 30%);
                color: var(--contrast-color);
            }

    .menu .special-item .menu-item-content {
        padding: 20px;
    }

        .menu .special-item .menu-item-content h4 {
            margin: 0 0 12px;
            font-weight: 600;
            font-size: 1.25rem;
        }

        .menu .special-item .menu-item-content p {
            color: color-mix(in srgb, var(--default-color), transparent 20%);
            margin-bottom: 15px;
            font-size: 0.95rem;
        }

        .menu .special-item .menu-item-content .menu-item-price {
            font-weight: 700;
            color: var(--accent-color);
            font-size: 1.2rem;
        }

.menu .menu-item {
    padding: 20px;
    border-radius: 8px;
    background-color: var(--surface-color);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

    .menu .menu-item:hover {
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        transform: translateY(-3px);
    }

    .menu .menu-item .menu-img {
        width: 100px;
        height: 100px;
        object-fit: cover;
        border-radius: 8px;
        transition: transform 0.3s;
    }

        .menu .menu-item .menu-img:hover {
            transform: scale(1.05);
        }

    .menu .menu-item .menu-content {
        flex: 1;
    }

        .menu .menu-item .menu-content h5 {
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 8px;
        }

        .menu .menu-item .menu-content .menu-tag {
            font-size: 0.7rem;
            padding: 3px 8px;
            background-color: color-mix(in srgb, var(--accent-color), transparent 85%);
            color: var(--accent-color);
            border-radius: 20px;
            font-weight: 500;
            display: inline-block;
        }

        .menu .menu-item .menu-content p {
            color: color-mix(in srgb, var(--default-color), transparent 20%);
            font-size: 0.9rem;
            margin-bottom: 10px;
        }

        .menu .menu-item .menu-content .price {
            font-weight: 700;
            color: var(--accent-color);
            font-size: 1.1rem;
        }

.menu .download-menu {
    display: inline-block;
    padding: 10px 25px;
    background-color: var(--accent-color);
    color: var(--contrast-color);
    text-decoration: none;
    border-radius: 30px;
    font-weight: 600;
    transition: 0.3s;
}

    .menu .download-menu i {
        margin-right: 8px;
    }

    .menu .download-menu:hover {
        background-color: color-mix(in srgb, var(--accent-color), transparent 25%);
        transform: translateY(-3px);
    }

@media (max-width: 992px) {
    .menu .menu-item .menu-img {
        width: 80px;
        height: 80px;
    }
}

@media (max-width: 768px) {
    .menu .specials-container .row {
        flex-direction: column;
    }
}

@media (max-width: 576px) {
    .menu .menu-item {
        flex-direction: column;
    }

        .menu .menu-item .menu-img {
            width: 100%;
            height: 160px;
            margin-bottom: 15px;
        }
}

.gallery .section-heading {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--heading-color);
}

@media (max-width: 768px) {
    .gallery .section-heading {
        font-size: 2rem;
    }
}

.gallery .section-subheading {
    font-size: 1.125rem;
    color: color-mix(in srgb, var(--default-color), transparent 30%);
    margin-bottom: 3rem;
}

@media (max-width: 768px) {
    .gallery .section-subheading {
        font-size: 1rem;
    }
}

.gallery .gallery-filters {
    margin-bottom: 3rem;
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

    .gallery .gallery-filters li {
        background: transparent;
        border: 2px solid color-mix(in srgb, var(--default-color), transparent 80%);
        color: var(--default-color);
        padding: 10px 20px;
        margin: 0 5px 10px 0;
        border-radius: 30px;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.3s ease;
    }

        .gallery .gallery-filters li:hover,
        .gallery .gallery-filters li.filter-active {
            background: var(--accent-color);
            border-color: var(--accent-color);
            color: var(--contrast-color);
        }

.gallery .isotope-container .gallery-item {
    margin-bottom: 30px;
}

.gallery .isotope-container .gallery-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

    .gallery .isotope-container .gallery-wrapper:hover {
        transform: translateY(-5px);
    }

    .gallery .isotope-container .gallery-wrapper img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s ease;
    }

    .gallery .isotope-container .gallery-wrapper:hover img {
        transform: scale(1.05);
    }

.gallery .isotope-container .gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.7) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    display: flex;
    align-items: flex-end;
    padding: 20px;
}

.gallery .isotope-container .gallery-wrapper:hover .gallery-overlay {
    opacity: 1;
}

.gallery .isotope-container .gallery-content {
    color: white;
    text-align: left;
    width: 100%;
}

    .gallery .isotope-container .gallery-content h4 {
        font-size: 1.25rem;
        font-weight: 600;
        margin-bottom: 8px;
        color: white;
    }

    .gallery .isotope-container .gallery-content p {
        font-size: 0.95rem;
        margin-bottom: 15px;
        opacity: 0.9;
    }

    .gallery .isotope-container .gallery-content .gallery-link {
        color: white;
        font-size: 1.5rem;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        backdrop-filter: blur(10px);
        transition: all 0.3s ease;
    }

        .gallery .isotope-container .gallery-content .gallery-link:hover {
            background: var(--accent-color);
            color: white;
            transform: scale(1.1);
        }

@media (max-width: 768px) {
    .gallery .isotope-container .gallery-content {
        padding: 15px;
    }

        .gallery .isotope-container .gallery-content h4 {
            font-size: 1.125rem;
        }

        .gallery .isotope-container .gallery-content p {
            font-size: 0.875rem;
        }
}

.contact .contact-info-box {
    background-color: var(--surface-color);
    border-radius: 10px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.05);
    padding: 25px;
    height: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

    .contact .contact-info-box:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    }

    .contact .contact-info-box .icon-box {
        background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
        color: var(--accent-color);
        width: 50px;
        height: 50px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

        .contact .contact-info-box .icon-box i {
            font-size: 24px;
        }

    .contact .contact-info-box .info-content h4 {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 10px;
    }

    .contact .contact-info-box .info-content p {
        margin-bottom: 5px;
        color: color-mix(in srgb, var(--default-color), transparent 20%);
        font-size: 15px;
        line-height: 1.5;
    }

        .contact .contact-info-box .info-content p:last-child {
            margin-bottom: 0;
        }

.contact .map-section {
    position: relative;
    width: 100%;
    height: 500px;
    overflow: hidden;
}

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

.contact .form-container-overlap {
    position: relative;
    margin-top: -150px;
    margin-bottom: 60px;
    z-index: 10;
}

.contact .contact-form-wrapper {
    background-color: var(--surface-color);
    border-radius: 12px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.05);
    padding: 40px;
}

    .contact .contact-form-wrapper h2 {
        font-size: 28px;
        font-weight: 700;
        margin-bottom: 30px;
        position: relative;
    }

        .contact .contact-form-wrapper h2:after {
            content: "";
            position: absolute;
            left: 50%;
            bottom: -10px;
            transform: translateX(-50%);
            width: 50px;
            height: 3px;
            background-color: var(--accent-color);
        }

    .contact .contact-form-wrapper .form-group {
        margin-bottom: 20px;
    }

        .contact .contact-form-wrapper .form-group .input-with-icon {
            position: relative;
        }

            .contact .contact-form-wrapper .form-group .input-with-icon i {
                position: absolute;
                left: 15px;
                top: 50%;
                transform: translateY(-50%);
                color: color-mix(in srgb, var(--default-color), transparent 40%);
                font-size: 18px;
                z-index: 10;
            }

                .contact .contact-form-wrapper .form-group .input-with-icon i.message-icon {
                    top: 28px;
                }

            .contact .contact-form-wrapper .form-group .input-with-icon textarea + i {
                top: 25px;
                transform: none;
            }

            .contact .contact-form-wrapper .form-group .input-with-icon .form-control {
                border-radius: 8px;
                padding: 12px 15px 12px 45px;
                height: 3.5rem;
                color: var(--default-color);
                background-color: var(--surface-color);
                font-size: 15px;
                border: 1px solid color-mix(in srgb, var(--default-color), transparent 80%);
            }

                .contact .contact-form-wrapper .form-group .input-with-icon .form-control:focus {
                    border-color: var(--accent-color);
                    box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--accent-color), transparent 90%);
                }

                .contact .contact-form-wrapper .form-group .input-with-icon .form-control::placeholder {
                    color: color-mix(in srgb, var(--default-color), transparent 40%);
                }

            .contact .contact-form-wrapper .form-group .input-with-icon textarea.form-control {
                height: 180px;
                resize: none;
                padding-top: 15px;
            }

    .contact .contact-form-wrapper .btn-submit {
        background-color: var(--accent-color);
        border: none;
        color: var(--contrast-color);
        padding: 12px 30px;
        font-size: 16px;
        font-weight: 600;
        letter-spacing: 1px;
        border-radius: 8px;
        transition: all 0.3s ease;
        box-shadow: 0 5px 15px color-mix(in srgb, var(--accent-color), transparent 70%);
    }

        .contact .contact-form-wrapper .btn-submit:hover {
            background-color: color-mix(in srgb, var(--accent-color), transparent 15%);
            transform: translateY(-3px);
            box-shadow: 0 8px 20px color-mix(in srgb, var(--accent-color), transparent 60%);
        }

        .contact .contact-form-wrapper .btn-submit:active {
            transform: translateY(0);
            box-shadow: 0 3px 10px color-mix(in srgb, var(--accent-color), transparent 70%);
        }

    .contact .contact-form-wrapper .loading,
    .contact .contact-form-wrapper .error-message,
    .contact .contact-form-wrapper .sent-message {
        margin-top: 10px;
        margin-bottom: 20px;
    }

@media (max-width: 992px) {
    .contact .form-container-overlap {
        margin-top: -120px;
    }

    .contact .contact-form-wrapper {
        padding: 30px;
    }
}

@media (max-width: 768px) {
    .contact .contact-info-box {
        margin-bottom: 20px;
    }

    .contact .form-container-overlap {
        margin-top: -100px;
    }

    .contact .contact-form-wrapper {
        padding: 25px;
    }

        .contact .contact-form-wrapper h2 {
            font-size: 24px;
        }

    .contact .map-section {
        height: 450px;
    }
}

@media (max-width: 576px) {
    .contact .form-container-overlap {
        margin-top: -80px;
    }

    .contact .contact-form-wrapper {
        padding: 20px;
    }

    .contact .btn-submit {
        width: 100%;
    }

    .contact .map-section {
        height: 400px;
    }
}

.about {
    padding: 90px 0;
    background: #f8f7f3;
}

    .about .section-header {
        margin-bottom: 25px;
    }

    .about .subtitle {
        display: inline-block;
        color: #a4875a;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        margin-bottom: 12px;
    }

    .about .section-header h2 {
        font-size: 42px;
        line-height: 1.2;
        color: #182737;
        margin-bottom: 20px;
    }

.about-images {
    position: relative;
}

.about-main-image {
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.12);
}

    .about-main-image img {
        width: 100%;
        height: 520px;
        object-fit: cover;
        transition: transform 0.5s ease;
    }

    .about-main-image:hover img {
        transform: scale(1.03);
    }

.about-small-image {
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 8px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15);
}

    .about-small-image img {
        width: 100%;
        height: 180px;
        object-fit: cover;
        border-radius: 5px;
    }

.about-content .lead {
    font-size: 18px;
    line-height: 1.8;
    color: #3d4852;
}

.about-content p {
    color: #68727a;
    line-height: 1.8;
    margin-bottom: 18px;
}

.about-highlights {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    margin-top: 30px;
}

.highlight-item {
    display: flex;
    gap: 14px;
    padding: 18px;
    background: #fff;
    border: 1px solid rgba(164, 135, 90, 0.12);
    border-radius: 8px;
    transition: all 0.3s ease;
}

    .highlight-item:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
    }

.highlight-icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f1ece3;
    color: #a4875a;
    font-size: 19px;
}

.highlight-item h5 {
    margin: 0 0 5px;
    color: #182737;
    font-size: 16px;
}

.highlight-item p {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
}

.btn-primary-custom,
.btn-outline-custom {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 13px 23px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-primary-custom {
    background: #a4875a;
    color: #fff;
}

    .btn-primary-custom:hover {
        background: #8e724b;
        color: #fff;
        transform: translateY(-2px);
    }

.btn-outline-custom {
    color: #182737;
    border: 1px solid #c9bda9;
    background: transparent;
}

    .btn-outline-custom:hover {
        background: #182737;
        color: #fff;
        border-color: #182737;
    }

.experience-section {
    padding: 65px 0;
    border-top: 1px solid #e5e0d8;
    border-bottom: 1px solid #e5e0d8;
}

.experience-content h3 {
    color: #182737;
    font-size: 32px;
    line-height: 1.3;
    margin: 12px 0 20px;
}

.experience-content p {
    color: #68727a;
    line-height: 1.8;
}

.experience-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.feature-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 22px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.05);
}

    .feature-card > i {
        color: #a4875a;
        font-size: 25px;
    }

    .feature-card h5 {
        margin: 0 0 6px;
        color: #182737;
        font-size: 16px;
    }

    .feature-card p {
        margin: 0;
        color: #777;
        font-size: 13px;
        line-height: 1.6;
    }

.why-choose-section {
    margin-top: 90px;
    margin-bottom: 35px;
}

    .why-choose-section .section-header h3 {
        color: #182737;
        font-size: 32px;
        margin: 8px 0 12px;
    }

    .why-choose-section .section-header p {
        color: #777;
    }

.why-card {
    height: 100%;
    padding: 30px 24px;
    background: #fff;
    text-align: center;
    border-radius: 8px;
    border: 1px solid rgba(164, 135, 90, 0.10);
    transition: all 0.3s ease;
}

    .why-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
    }

.why-icon {
    width: 58px;
    height: 58px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1ece3;
    color: #a4875a;
    border-radius: 50%;
    font-size: 24px;
}

.why-card h5 {
    color: #182737;
    margin-bottom: 10px;
}

.why-card p {
    color: #777;
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
}

@media (max-width: 991px) {
    .about .section-header h2 {
        font-size: 34px;
    }

    .about-images {
        margin-bottom: 45px;
    }

    .about-main-image img {
        height: 450px;
    }
}

@media (max-width: 767px) {
    .about {
        padding: 65px 0;
    }

        .about .section-header h2 {
            font-size: 30px;
        }

    .about-highlights,
    .experience-features {
        grid-template-columns: 1fr;
    }

    .about-actions {
        flex-direction: column;
    }

    .btn-primary-custom,
    .btn-outline-custom {
        justify-content: center;
    }

    .about-images {
        position: relative;
        width: 100%;
        padding-bottom: 70px;
    }

    .about-main-image {
        width: 100%;
        aspect-ratio: 4 / 3;
        overflow: hidden;
        border-radius: 12px;
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
    }

        .about-main-image img {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: cover;
            object-position: center center;
            transition: transform 0.5s ease;
        }

        .about-main-image:hover img {
            transform: scale(1.03);
        }

    .about-small-image {
        position: absolute;
        right: -35px;
        bottom: 0;
        width: 48%;
        aspect-ratio: 4 / 3;
        overflow: hidden;
        border: 8px solid #fff;
        border-radius: 12px;
        background: #fff;
        box-shadow: 0 12px 35px rgba(0, 0, 0, 0.18);
        z-index: 2;
    }

        .about-small-image img {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: cover;
            object-position: center center;
        }

    .experience-section {
        margin-top: 65px;
        padding: 45px 0;
    }

    .experience-content h3 {
        font-size: 27px;
    }

    .why-choose-section {
        margin-top: 65px;
    }
}

.about-image-badge {
    position: absolute;
    left: 25px;
    bottom: 25px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    padding: 12px 18px;
    border-radius: 10px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

    .about-image-badge i {
        width: 42px;
        height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #a8895b;
        color: #fff;
        border-radius: 50%;
        font-size: 20px;
    }

    .about-image-badge strong {
        display: block;
        color: #0b2239;
        font-size: 15px;
    }

    .about-image-badge span {
        display: block;
        color: #777;
        font-size: 13px;
        margin-top: 2px;
    }

.whatsapp-float {
    position: fixed;
    bottom: 25px;
    width: 62px;
    height: 62px;
    background: #25D366;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 32px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
    z-index: 9999;
    transition: all 0.3s ease;
}

    .whatsapp-float:hover {
        background: #20b957;
        transform: scale(1.08);
        color: #fff;
    }

.whatsapp-tooltip {
    position: absolute;
    left: 75px;
    bottom: 50%;
    transform: translateY(50%);
    background: #fff;
    color: #333;
    padding: 9px 14px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.whatsapp-float:hover .whatsapp-tooltip {
    opacity: 1;
    visibility: visible;
}

@media (max-width: 768px) {
    .whatsapp-float {
        width: 55px;
        height: 55px;
        bottom: 18px;
        font-size: 28px;
    }

    .whatsapp-tooltip {
        display: none;
    }
}

#hero .hero-wrapper {
    position: relative;
    overflow: hidden;
}

#hero .hero-image {
    width: 100%;
}

.hero-contact-btn i {
    font-size: 17px;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}

.call-btn {
    background: linear-gradient(110deg, #064bb0, #0878cf);
}

.whatsapp-btn {
    background: linear-gradient(110deg, #168d39, #20b85a);
}

.location-btn {
    background: linear-gradient(110deg, #0751ad, #079bc0);
}

@media (max-width: 768px) {
    .hero-contact-actions {
        right: 0;
        gap: 8px;
    }

    .hero-contact-btn {
        width: 115px;
        min-height: 40px;
        padding: 10px 12px;
        gap: 8px;
        font-size: 13px;
    }

        .hero-contact-btn i {
            font-size: 15px;
        }

        .hero-contact-btn:hover {
            width: 120px;
        }
}

@media (max-width: 480px) {
    .hero-contact-actions {
        top: 50%;
        gap: 7px;
    }

    .hero-contact-btn {
        width: 42px;
        min-height: 42px;
        height: 42px;
        justify-content: center;
        padding: 0;
        border-radius: 22px 0 0 22px;
    }

        .hero-contact-btn span {
            /*display: none;*/
        }

        .hero-contact-btn i {
            font-size: 17px;
        }

        .hero-contact-btn:hover {
            width: 46px;
        }
}

@media (max-width: 1199px) {
    .clinic-logo {
        min-width: 250px;
        gap: 8px;
    }

    .clinic-logo-icon {
        width: 90px;
    }

    .clinic-name {
        font-size: 23px;
    }

    .heartbeat-icon {
        font-size: 19px;
    }

    .clinic-tagline {
        font-size: 6.5px;
    }
}

@media (max-width: 767px) {
    .clinic-header .header-inner {
        min-height: 76px;
        gap: 8px;
    }

    .clinic-logo {
        min-width: 0;
        max-width: 270px;
        gap: 7px;
    }

    .clinic-logo-icon {
        width: 90px;
    }

    .doctor-name {
        font-size: 8px;
        letter-spacing: 0.5px;
    }

    .clinic-name {
        font-size: clamp(16px, 4.5vw, 21px);
        gap: 3px;
        letter-spacing: -0.5px;
    }

    .heartbeat-icon {
        font-size: 15px;
    }

    .clinic-tagline {
        font-size: 5.5px;
        letter-spacing: 0;
        margin-top: 4px;
    }
}

.container,
.container-fluid,
.clinic-container {
    max-width: 100%;
}

@media (max-width: 991px) {
    .clinic-topbar {
        padding: 7px 10px;
        min-height: auto;
    }

        .clinic-topbar .clinic-container,
        .clinic-topbar .topbar-inner {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            gap: 6px 12px;
        }

        .clinic-topbar .topbar-social,
        .clinic-topbar .social-links {
            display: none;
        }

    .clinic-header {
        position: relative;
        width: 100%;
        z-index: 1000;
    }

        .clinic-header .header-inner {
            width: 100%;
            min-height: 76px;
            padding: 8px 14px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
        }

    .clinic-logo {
        flex: 1 1 auto;
        min-width: 0;
        max-width: 300px;
        gap: 8px;
    }

    .clinic-logo-icon {
        width: 90px;
    }

    .clinic-logo-img {
        display: block;
        width: 90px;
        object-fit: contain;
    }

    .clinic-logo-text {
        min-width: 0;
        overflow: hidden;
    }

    .doctor-name {
        font-size: 8px;
        letter-spacing: 0.4px;
        margin-bottom: 3px;
    }

    .clinic-name {
        font-size: clamp(15px, 4.4vw, 20px);
        letter-spacing: -0.5px;
        gap: 3px;
        margin-bottom: 3px;
    }

    .heartbeat-icon {
        font-size: 13px;
    }

    .clinic-specialty {
        font-size: 5px;
        line-height: 1.3;
    }

    .clinic-tagline {
        font-size: 4.5px;
        gap: 3px;
        margin-top: 3px;
    }

    .mobile-menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 40px;
        width: 40px;
        height: 40px;
        padding: 0;
        border: 1px solid #dce5ef;
        border-radius: 8px;
        background: #fff;
        color: #123477;
        font-size: 25px;
        cursor: pointer;
    }

    .clinic-navigation {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        width: 100%;
        max-height: calc(100vh - 150px);
        overflow-y: auto;
        background: #fff;
        box-shadow: 0 8px 18px rgba(0, 30, 70, 0.12);
        padding: 10px 16px 16px;
        z-index: 1001;
    }

        .clinic-navigation.is-open {
            display: block;
        }

    .clinic-nav-list {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        width: 100%;
        padding: 0;
        margin: 0;
        list-style: none;
    }

        .clinic-nav-list > li {
            width: 100%;
            border-bottom: 1px solid #edf1f5;
        }

        .clinic-nav-list .nav-link {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            padding: 13px 5px;
            font-size: 14px;
        }

    .nav-dropdown,
    .services-nav-row {
        width: 100%;
    }

    .services-nav-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

        .services-nav-row .nav-link {
            flex: 1;
        }

    .services-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 42px;
        width: 42px;
        height: 42px;
        border: 0;
        background: transparent;
        color: #123477;
        cursor: pointer;
    }

    .nav-dropdown .dropdown-menu {
        display: none;
        position: static;
        float: none;
        width: 100%;
        min-width: 0;
        margin: 0 0 8px;
        padding: 5px 0 5px 14px;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: #f5f8fc;
        transform: none;
    }

    .nav-dropdown.dropdown-open .dropdown-menu {
        display: block;
    }

    .nav-dropdown .dropdown-menu li a {
        display: block;
        padding: 11px 12px;
        font-size: 13px;
    }

    .header-appointment-btn {
        display: none !important;
    }

    .mobile-appointment-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        margin-top: 14px;
        padding: 12px;
        border-radius: 8px;
        color: #fff;
        background: linear-gradient(100deg, #0865c7, #1a9d50);
        text-decoration: none;
        font-size: 13px;
        font-weight: 700;
    }

    #hero,
    .hero {
        width: 100%;
        overflow: hidden;
    }

    .hero-wrapper,
    .hero-image {
        width: 100%;
        max-width: 100%;
    }

        .hero-image img {
            display: block;
            width: 100%;
            height: auto;
            max-width: 100%;
            object-fit: contain;
        }

    .hero-quick-links {
        right: 0;
        top: 50%;
        max-width: 125px;
    }

        .hero-quick-links a {
            max-width: 100%;
            font-size: 13px;
            padding: 10px 12px;
        }

    .clinic-feature-strip {
        padding: 20px 12px;
    }

    .feature-inner {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px 12px;
        width: 100%;
    }

    .clinic-feature {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        min-width: 0;
        width: 100%;
        text-align: left;
    }

    .feature-icon {
        flex: 0 0 38px;
        width: 38px;
        height: 38px;
        font-size: 18px;
    }

    .feature-text {
        min-width: 0;
    }

        .feature-text h3 {
            font-size: 12px;
            line-height: 1.35;
            margin: 0 0 3px;
        }

        .feature-text p {
            font-size: 13px;
            line-height: 1.4;
            margin: 0;
            overflow-wrap: anywhere;
        }

    .footer .footer-top,
    .clinic-footer .footer-top {
        padding: 30px 16px 20px;
    }

    .footer .row,
    .clinic-footer .row {
        row-gap: 24px;
    }

    .footer [class*="col-"],
    .clinic-footer [class*="col-"] {
        min-width: 0;
    }

    .footer p,
    .clinic-footer p {
        overflow-wrap: anywhere;
    }

    .footer h3,
    .footer h4,
    .clinic-footer h3,
    .clinic-footer h4 {
        font-size: 15px;
        line-height: 1.4;
    }

    .footer ul,
    .clinic-footer ul {
        padding-left: 0;
    }

    .footer-bottom,
    .clinic-footer .footer-bottom {
        padding: 14px 12px;
        text-align: center;
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .clinic-topbar {
        font-size: 13px;
        line-height: 1.5;
    }

        .clinic-topbar a {
            overflow-wrap: anywhere;
        }

    .clinic-header .header-inner {
        padding: 8px 10px;
        gap: 6px;
        min-height: 68px;
    }

    .clinic-logo {
        gap: 6px;
        max-width: calc(100% - 46px);
    }

    .clinic-logo-icon,
    .clinic-logo-img {
        width: 90px;
    }

    .clinic-logo-icon {
    }

    .doctor-name {
        font-size: 7px;
        letter-spacing: 0.2px;
    }

    .clinic-name {
        font-size: clamp(14px, 4.1vw, 18px);
    }

    .clinic-specialty {
        font-size: 4.5px;
    }

    .clinic-tagline {
        font-size: 4px;
        gap: 2px;
    }

    .mobile-menu-toggle {
        flex-basis: 36px;
        width: 36px;
        height: 36px;
        font-size: 23px;
    }

    .feature-inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .clinic-feature {
        justify-content: flex-start;
    }

    .hero-quick-links {
        top: auto;
        right: 0;
        bottom: 18px;
        max-width: 105px;
    }

        .hero-quick-links a {
            gap: 6px;
            padding: 9px 10px;
            font-size: 13px;
        }

    .footer .row,
    .clinic-footer .row {
        display: flex;
        flex-direction: column;
    }

    .footer [class*="col-"],
    .clinic-footer [class*="col-"] {
        width: 100%;
        max-width: 100%;
    }
}

@media (min-width: 992px) {
    .mobile-menu-toggle,
    .mobile-appointment-btn {
        display: none !important;
    }

    .clinic-navigation {
        display: flex;
    }
}

html,
body {
    margin: 0;
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
}

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

.clinic-topbar {
    position: relative;
    z-index: 1002;
    color: #fff;
    background: linear-gradient(105deg, #06336f 0%, #0755a2 55%, #047f93 100% );
    font-size: 13px;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

    .clinic-topbar .clinic-container {
        width: 100%;
        max-width: 1320px;
        margin: 0 auto;
        padding: 0 20px;
    }

    .clinic-topbar .topbar-inner,
    .clinic-topbar .topbar-left,
    .clinic-topbar .topbar-right {
        display: flex;
        align-items: center;
        gap: 14px;
    }

    .clinic-topbar .topbar-inner {
        justify-content: space-between;
    }

    .clinic-topbar a {
        color: #fff;
        text-decoration: none;
        transition: opacity .25s ease;
        white-space: nowrap;
    }

.clinic-header {
    top: 0;
    border-bottom: 1px solid #e5eef8;
    box-shadow: 0 4px 15px rgba(8, 44, 102, 0.06);
    width: 100%;
    max-width: 100%;
    position: relative;
    z-index: 1000;
    background: #fff;
}

.clinic-logo-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    min-width: 0;
    line-height: 1.2;
}

.ekanshi-text {
    color: #0757ad;
}

.clinic-text {
    color: #20a34a;
}

.heartbeat-icon {
    font-weight: normal;
    margin-left: 1px;
    color: #0785b9;
    font-size: 18px;
}

.clinic-navigation {
    display: flex;
    align-items: center;
    min-width: 0;
}

    .clinic-navigation ul {
        display: flex;
        align-items: center;
        gap: 20px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .clinic-navigation a {
        white-space: nowrap;
    }

.mobile-menu-toggle {
    display: none;
    flex-shrink: 0;
}

@media (max-width: 1100px) {
    .clinic-header .header-inner {
        gap: 12px;
        padding: 10px 14px;
    }

    .clinic-logo {
        max-width: 350px;
        gap: 7px;
    }

    .clinic-logo-img {
        width: 90px;
    }

    .clinic-name {
        font-size: 19px;
    }

    .clinic-tagline {
        font-size: 6px;
    }

    .clinic-navigation ul {
        gap: 12px;
    }
}

@media (max-width: 991px) {
    .clinic-topbar {
        overflow: hidden;
    }

        .clinic-topbar .clinic-container {
            padding: 0 10px;
        }

        .clinic-topbar .topbar-inner {
            min-height: 42px;
            justify-content: center;
            flex-wrap: wrap;
            gap: 5px;
            padding: 5px 0;
        }

        .clinic-topbar .topbar-left {
            width: 100%;
            justify-content: center;
            flex-wrap: wrap;
            gap: 5px 12px;
        }

        .clinic-topbar .topbar-right {
            display: none;
        }

        .clinic-topbar a {
            font-size: 13px;
            white-space: normal;
        }

    .clinic-header .header-inner {
        min-height: 76px;
        padding: 8px 12px;
        gap: 8px;
    }

    .clinic-logo {
        max-width: calc(100% - 50px);
        gap: 7px;
    }

    .clinic-logo-img {
        width: 90px;
    }

    .doctor-name {
        font-size: 8px;
        letter-spacing: 0.4px;
    }

    .clinic-name {
        font-size: clamp(14px, 4vw, 19px);
        gap: 2px;
    }

    .heartbeat-icon {
        font-size: 13px;
    }

    .clinic-tagline {
        font-size: 5px;
        letter-spacing: 0;
        margin-top: 3px;
    }

    .mobile-menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        padding: 0;
        border: 1px solid #d6e1ef;
        border-radius: 9px;
        background: #fff;
        color: #0757ad;
        flex-shrink: 0;
    }

    .clinic-navigation {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        width: 100%;
        max-height: calc(100dvh - 120px);
        overflow-y: auto;
        overflow-x: hidden;
        background: #fff;
        box-shadow: 0 10px 22px rgba(0, 35, 80, 0.12);
        padding: 10px 15px 18px;
    }

        .clinic-navigation.active {
            display: block;
        }

        .clinic-navigation ul {
            display: flex;
            flex-direction: column;
            align-items: stretch;
            gap: 0;
            width: 100%;
        }

        .clinic-navigation li {
            width: 100%;
        }

        .clinic-navigation a {
            display: block;
            padding: 12px 8px;
            white-space: normal;
        }

        .clinic-navigation .dropdown-menu {
            position: static;
            width: 100%;
            min-width: 0;
            box-shadow: none;
            border: 0;
            padding: 0 0 0 15px;
        }

    .clinic-header .btn,
    .clinic-header .book-appointment {
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .clinic-topbar .topbar-inner {
        min-height: 38px;
    }

    .clinic-topbar .topbar-left {
        flex-direction: row;
        justify-content: center;
        gap: 4px 10px;
    }

        .clinic-topbar .topbar-left > * {
            font-size: 13px;
        }

    .clinic-header .header-inner {
        min-height: 70px;
        padding: 7px 10px;
    }

    .clinic-logo {
        max-width: calc(100% - 45px);
        gap: 6px;
    }

    .clinic-logo-img {
        width: 90px;
    }

    .doctor-name {
        font-size: 7px;
    }

    .clinic-name {
        font-size: clamp(12px, 3.8vw, 16px);
    }

    .clinic-tagline {
        font-size: 4.5px;
    }

    .mobile-menu-toggle {
        width: 36px;
        height: 36px;
    }
}

.specialty-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    flex-shrink: 0;
}

    .specialty-item i {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        line-height: 1;
        color: #0875c9;
    }

    .specialty-item:nth-of-type(3) i {
        color: #199c48;
    }

    .specialty-item:last-child i {
        color: #0799b5;
    }

.specialty-divider {
    flex: 0 0 1px;
    display: inline-block;
    height: 12px;
    width: 1px;
    background: #cbd8e8;
    flex-shrink: 0;
}

@media (max-width: 991px) {
    .clinic-tagline {
        gap: 4px;
        font-size: 6px;
        margin-top: 4px;
    }

    .specialty-item {
        gap: 2px;
    }

        .specialty-item i {
            font-size: 8px;
        }

    .specialty-divider {
        height: 9px;
    }
}

@media (max-width: 380px) {
    .clinic-tagline {
        gap: 3px;
        font-size: 5px;
    }

    .specialty-item i {
        font-size: 7px;
    }
}

.doctor-name-text {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.2px;
    line-height: 1.2;
    text-align: center;
}

.doctor-name-line {
    position: relative;
    display: block;
    flex: 1;
    height: 2px;
    min-width: 15px;
    background-color: #092d70;
}

    .doctor-name-line:first-child::before,
    .doctor-name-line:last-child::after {
        content: "";
        position: absolute;
        top: 50%;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background-color: #092d70;
        transform: translateY(-50%);
    }

    .doctor-name-line:first-child::before {
        left: 0;
    }

    .doctor-name-line:last-child::after {
        right: 0;
    }

@media (max-width: 576px) {
    .doctor-name {
        gap: 6px;
    }

    .doctor-name-text {
        font-size: 13px;
        letter-spacing: 0.7px;
    }

    .doctor-name-line {
        min-width: 10px;
    }

        .doctor-name-line:first-child::before,
        .doctor-name-line:last-child::after {
            width: 5px;
            height: 5px;
        }
}

.about-hero-background {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: linear-gradient( 90deg, rgba(255, 255, 255, 0.97) 0%, rgba(255, 255, 255, 0.95) 38%, rgba(255, 255, 255, 0.78) 68%, rgba(255, 255, 255, 0.70) 100% ), url("/assets/img/clinics/ekanshi-urology-clinic.jpg");
    background-size: cover;
    background-position: center;
    opacity: 0.55;
}

.about-hero-container {
    position: relative;
    z-index: 1;
}

.about-content {
    position: relative;
    z-index: 2;
    padding: 10px 0;
}

.about-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    color: #176779;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
    line-height: 1.7;
    text-transform: uppercase;
}

.eyebrow-line {
    display: inline-block;
    width: 32px;
    height: 2px;
    flex-shrink: 0;
    background: #10aaa1;
}

.about-title span {
    display: block;
    color: #0b9d9b;
}

.about-intro strong {
    color: #123867;
}

.speciality-item:hover .speciality-icon {
    color: #ffffff;
    background: #079e96;
    transform: translateY(-2px);
}

.qualification-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

    .qualification-heading > i {
        color: #0b9d9b;
        font-size: 23px;
    }

.qualification-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px 16px;
}

    .qualification-list span i {
        flex-shrink: 0;
        margin-top: 2px;
        color: #0b9d9b;
    }

.about-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 25px;
}

.about-btn-primary {
    color: #ffffff;
    background: linear-gradient(135deg, #08aaa0, #087eb2);
    box-shadow: 0 8px 20px rgba(8, 147, 164, 0.16);
}

    .about-btn-primary:hover {
        color: #ffffff;
        background: linear-gradient(135deg, #078d88, #086d9b);
        box-shadow: 0 11px 25px rgba(8, 147, 164, 0.22);
        transform: translateY(-2px);
    }

.about-btn-outline {
    color: #087eaa;
    background: rgba(255, 255, 255, 0.88);
    border-color: #8bcfce;
}

    .about-btn-outline:hover {
        color: #ffffff;
        background: #087eaa;
        border-color: #087eaa;
        transform: translateY(-2px);
    }

.about-location i {
    color: #0b9d9b;
    font-size: 15px;
}

.clinic-photo::after {
    position: absolute;
    inset: 0;
    content: "";
    background: linear-gradient( 180deg, rgba(10, 54, 76, 0.02) 35%, rgba(10, 54, 76, 0.15) 100% );
    pointer-events: none;
}

.clinic-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.doctor-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.doctor-info-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    color: #079e96;
    background: #e4f8f5;
    border-radius: 12px;
    font-size: 22px;
}

.doctor-info-card p {
    margin: 0 0 3px;
    color: #456273;
    font-size: 13px;
    line-height: 1.5;
}

.doctor-info-card span {
    color: #079e96;
    font-size: 13px;
    font-weight: 700;
}

.visual-decoration {
    position: absolute;
    z-index: -2;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    pointer-events: none;
}

.visual-decoration-one {
    top: -12px;
    right: -15px;
    border: 20px solid rgba(14, 171, 161, 0.15);
}

.visual-decoration-two {
    bottom: 45px;
    left: -25px;
    width: 90px;
    height: 90px;
    border: 15px solid rgba(76, 183, 103, 0.13);
}

@media (min-width: 1200px) {
    .about-hero-container {
        max-width: 1320px;
    }
}

@media (max-width: 1199px) {
    .about-visual {
        min-height: 560px;
    }

    .about-title {
        font-size: 40px;
    }

    .clinic-photo {
        right: -3%;
        width: 103%;
    }
}

@media (max-width: 991px) {
    .about-home {
        padding: 55px 0 65px;
    }

    .about-content {
        padding: 0;
    }

    .about-title {
        max-width: 680px;
        font-size: clamp(34px, 5vw, 44px);
    }

    .about-visual {
        width: 100%;
        max-width: 600px;
        min-height: 580px;
        margin: 50px auto 0;
    }

    .clinic-photo {
        right: 0;
        width: 100%;
        height: 70%;
    }

    .doctor-photo {
        right: 6%;
        width: 72%;
        height: 75%;
    }

    .doctor-info-card {
        right: 0;
        bottom: 18px;
    }
}

@media (max-width: 575px) {
    .about-home {
        padding: 38px 0 45px;
    }

    .about-eyebrow {
        gap: 7px;
        font-size: 13px;
        letter-spacing: 1.2px;
    }

    .eyebrow-line {
        width: 18px;
    }

    .about-title {
        font-size: 33px;
        letter-spacing: -0.5px;
        line-height: 1.17;
    }

    .about-tagline {
        font-size: 14px;
        line-height: 1.6;
    }

    .about-intro,
    .about-description {
        font-size: 13px;
        line-height: 1.8;
    }

    .about-specialities {
        grid-template-columns: 1fr;
        gap: 18px;
        margin-top: 24px;
    }

    .speciality-item h3 {
        font-size: 14px;
    }

    .speciality-item p {
        font-size: 12px;
    }

    .about-qualifications {
        padding: 16px;
        margin-top: 25px;
    }

    .qualification-heading {
        align-items: flex-start;
    }

        .qualification-heading h3 {
            font-size: 14px;
        }

    .qualification-list {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .about-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .about-btn {
        width: 100%;
        min-height: 48px;
    }

    .about-visual {
        min-height: 440px;
        margin-top: 38px;
    }

    .clinic-photo {
        top: 2%;
        height: 65%;
        border-width: 5px;
        border-radius: 18px;
    }

    .doctor-photo {
        right: 5%;
        width: 77%;
        height: 76%;
        border-width: 5px;
        border-radius: 130px 130px 18px 18px;
    }

    .doctor-info-card {
        right: 0;
        bottom: 6px;
        width: min(290px, 94%);
        padding: 12px;
        gap: 9px;
    }

    .doctor-info-icon {
        width: 38px;
        height: 38px;
        font-size: 19px;
    }

    .doctor-info-card h3 {
        font-size: 13px;
    }

    .doctor-info-card p,
    .doctor-info-card span {
        font-size: 13px;
    }

    .visual-decoration-one {
        right: -5px;
        width: 90px;
        height: 90px;
        border-width: 12px;
    }

    .visual-decoration-two {
        left: -5px;
        width: 60px;
        height: 60px;
        border-width: 10px;
    }
}

.clinic-stats-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 30px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
}

.clinic-stat-item:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 8px;
    height: 65px;
    width: 1px;
    background: rgba(255, 255, 255, 0.4);
}

.support-24 {
    position: absolute;
    font-size: 19px;
    font-weight: 700;
    top: 23px;
    left: 22px;
    background: #073879;
    line-height: 1.1;
}

.clinic-stat-content {
    min-width: 0;
}

@media (max-width: 991px) {
    .clinic-stats-container {
        grid-template-columns: repeat(2, 1fr);
        padding: 0 20px;
    }

    .clinic-stat-item {
        justify-content: flex-start;
        padding: 18px 20px;
    }

        .clinic-stat-item:nth-child(2)::after {
            display: none;
        }

        .clinic-stat-item:nth-child(-n /**/ +2) {
            border-bottom: 1px solid rgba(255, 255, 255, 0.3);
        }

    .clinic-stat-content h3 {
        font-size: 30px;
    }

    .clinic-stat-content p {
        font-size: 15px;
    }
}

@media (max-width: 575px) {
    .clinic-stats-section {
        padding: 15px 0;
    }

    .clinic-stats-container {
        grid-template-columns: 1fr;
        padding: 0 20px;
    }

    .clinic-stat-item {
        min-height: 85px;
        padding: 12px 10px;
        justify-content: flex-start;
        border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    }

        .clinic-stat-item:not(:last-child)::after {
            display: none;
        }

        .clinic-stat-item:last-child {
            border-bottom: none;
        }

    .clinic-stat-icon {
        width: 55px;
        height: 55px;
    }

        .clinic-stat-icon i {
            font-size: 42px;
        }

    .support-24 {
        font-size: 16px;
        top: 20px;
        left: 19px;
    }

    .clinic-stat-content h3 {
        font-size: 28px;
        margin-bottom: 4px;
    }

    .clinic-stat-content p {
        font-size: 14px;
    }
}

.footer-top .footer-specialty-item h6,
.footer-top .footer-specialty-item span {
    text-align: center;
    margin: 0;
}

@media (max-width: 767px) {
    .footer-top .footer-specialties {
        gap: 12px;
    }

    .footer-top .footer-social-links {
        justify-content: center;
    }
}

.footer-specialties {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    margin: 24px 0 20px;
    padding: 0;
}

.footer-specialty-item {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 0;
    padding: 0;
}

    .footer-specialty-item span {
        display: block;
        white-space: nowrap;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.4;
        color: #FFFFFF;
        text-align: center;
        margin: 0;
        padding: 0;
    }

    .footer-specialty-item .specialty-icon {
        width: 48px;
        height: 48px;
        min-width: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        margin: 0 auto 10px;
        box-sizing: border-box;
    }

        .footer-specialty-item .specialty-icon i {
            font-size: 27px;
            line-height: 1;
        }

@media (max-width: 400px) {
    .footer-specialties {
        gap: 5px;
    }

    .footer-specialty-item .specialty-icon {
        width: 42px;
        height: 42px;
        min-width: 42px;
    }

        .footer-specialty-item .specialty-icon i {
            font-size: 23px;
        }

    .footer-specialty-item span {
        font-size: 13px;
    }
}

.footer-top .footer-about {
    text-align: left;
    padding-right: 20px;
}

    .footer-top .footer-about .footer-description {
        color: #D5E3F0;
        font-size: 14px;
        line-height: 1.8;
        margin-bottom: 14px;
    }

.footer-top .footer-specialties {
    justify-content: center;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    justify-items: center;
    gap: 8px;
    width: 100%;
    margin: 28px 0 24px;
    padding: 0;
}

.footer-top .footer-specialty-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
}

    .footer-top .footer-specialty-item .specialty-icon {
        width: 46px;
        height: 46px;
        min-width: 46px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        margin: 0 auto 10px;
        box-sizing: border-box;
    }

        .footer-top .footer-specialty-item .specialty-icon i {
            font-size: 25px;
            line-height: 1;
        }

.footer-top .specialty-blue {
    background: #D9F3FA;
    border: 1px solid #20B8D5;
    color: #079DD1;
}

.footer-top .specialty-green {
    background: #E1F7E8;
    border: 1px solid #35B85A;
    color: #20A94D;
}

.footer-top .specialty-teal {
    background: #D9F3FA;
    border: 1px solid #20B8D5;
    color: #079DD1;
}

.footer-top .footer-specialty-item span {
    display: block;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.4;
    color: #FFFFFF;
    text-align: center;
    white-space: nowrap;
    margin: 0;
    padding: 0;
}

.footer-top .footer-social-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 20px 0 0;
    padding: 0;
}

    .footer-top .footer-social-links a {
        margin: 0;
        width: 38px;
        height: 38px;
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.10);
        border: 1px solid rgba(32, 184, 213, 0.3);
        color: #FFFFFF;
        font-size: 18px;
        text-decoration: none;
        transition: all 0.25s ease;
    }

        .footer-top .footer-social-links a:hover {
            background: #35B85A;
            border-color: #35B85A;
            color: #FFFFFF;
            transform: translateY(-2px);
        }

@media (max-width: 400px) {
    .footer-top .footer-about {
        padding-right: 0;
    }

    .footer-top .footer-specialties {
        gap: 4px;
    }

    .footer-top .footer-specialty-item span {
        font-size: 9px;
    }

    .footer-top .footer-specialty-item .specialty-icon {
        width: 42px;
        height: 42px;
        min-width: 42px;
    }
}

.urology-services-section {
    position: relative;
    padding: 75px 0;
    background: linear-gradient( 180deg, #f4faff 0%, #ffffff 55%, #f0f8ff 100% );
    overflow: hidden;
}

.urology-services-heading {
    max-width: 850px;
    margin: 0 auto 42px;
}

.urology-section-subtitle {
    display: inline-block;
    color: #159447;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.6px;
    margin-bottom: 12px;
}

.urology-services-heading h2 {
    color: #082f70;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(26px, 3vw, 36px);
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 16px;
}

.urology-services-heading p {
    color: #52657b;
    font-size: 15px;
    line-height: 1.8;
    margin: 0;
}

.urology-service-card {
    height: 100%;
    min-height: 275px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 28px 25px 24px;
    background: #ffffff;
    border: 1px solid #e2edf6;
    border-bottom: 4px solid #0750a5;
    border-radius: 14px;
    box-shadow: 0 6px 22px rgba(13, 54, 99, 0.07);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

    .urology-service-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 14px 32px rgba(13, 54, 99, 0.13);
        border-bottom-color: #28ae58;
    }

.urology-service-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-bottom: 20px;
    border-radius: 15px;
}

    .urology-service-icon i {
        font-size: 29px;
        line-height: 1;
    }

    .urology-service-icon.icon-blue {
        background: #e6f0ff;
        color: #0750b5;
    }

    .urology-service-icon.icon-teal {
        background: #e1f8f8;
        color: #0798a6;
    }

    .urology-service-icon.icon-green {
        background: #e8f8ec;
        color: #229747;
    }

.urology-service-card h3 {
    color: #0b3678;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 12px;
}

.urology-service-card p {
    color: #526176;
    font-size: 14px;
    line-height: 1.8;
    margin: 0 0 20px;
}

.urology-service-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    color: #0750b5;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: color 0.25s ease;
}

    .urology-service-link i {
        transition: transform 0.25s ease;
    }

    .urology-service-link:hover {
        color: #198b46;
    }

        .urology-service-link:hover i {
            transform: translateX(4px);
        }

.urology-services-cta {
    margin-top: 42px;
}

    .urology-services-cta p {
        color: #43566e;
        font-size: 15px;
        line-height: 1.8;
        margin-bottom: 20px;
    }

.urology-services-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px 25px;
    color: #ffffff;
    background: linear-gradient(110deg, #0648a8, #087eae);
    border: 1px solid transparent;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 5px 14px rgba(7, 78, 167, 0.18);
    transition: all 0.25s ease;
}

    .urology-services-button:hover {
        color: #ffffff;
        background: linear-gradient(110deg, #147d3b, #28a951);
        transform: translateY(-2px);
    }

@media (max-width: 991px) {
    .urology-services-section {
        padding: 60px 0;
    }

    .urology-service-card {
        min-height: 265px;
        padding: 24px 20px;
    }

        .urology-service-card h3 {
            font-size: 19px;
        }
}

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

    .urology-services-heading {
        margin-bottom: 30px;
    }

        .urology-services-heading h2 {
            font-size: 27px;
        }

        .urology-services-heading p {
            font-size: 14px;
        }

    .urology-service-card {
        min-height: auto;
        padding: 24px 22px;
    }

    .urology-service-icon {
        width: 54px;
        height: 54px;
    }

        .urology-service-icon i {
            font-size: 26px;
        }

    .urology-service-card h3 {
        font-size: 19px;
    }

    .urology-service-card p {
        font-size: 14px;
    }

    .urology-services-cta {
        margin-top: 30px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .urology-service-card,
    .urology-service-link,
    .urology-service-link i,
    .urology-services-button {
        transition: none;
    }

        .urology-service-card:hover,
        .urology-services-button:hover {
            transform: none;
        }
}

.urology-services-page * {
    box-sizing: border-box;
}

.urology-services-page .container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 18px;
    padding-right: 18px;
}

.services-hero {
    position: relative;
    padding: 90px 0 85px;
    background: radial-gradient(circle at 85% 20%, rgba(41, 178, 208, .13), transparent 30%), linear-gradient(120deg, #eff8ff 0%, #ffffff 55%, #e8f8f5 100%);
    border-bottom: 1px solid #e3edf8;
}

    .services-hero::after {
        content: "";
        position: absolute;
        width: 310px;
        height: 310px;
        right: -100px;
        bottom: -170px;
        border: 35px solid rgba(28, 157, 190, .07);
        border-radius: 50%;
        pointer-events: none;
    }

.services-hero-content {
    max-width: 850px;
    position: relative;
    z-index: 1;
}

.services-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #168344;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.6px;
    margin-bottom: 17px;
}

    .services-eyebrow i {
        color: var(--service-teal);
        font-size: 17px;
    }

.services-hero h1 {
    max-width: 850px;
    color: #092d65;
    font-size: clamp(34px, 4.3vw, 54px);
    line-height: 1.16;
    font-weight: 800;
    letter-spacing: -.8px;
    margin: 0 0 18px;
}

    .services-hero h1 span {
        color: var(--service-teal);
    }

.services-hero-content > p {
    max-width: 750px;
    color: #53667d;
    font-size: 16px;
    line-height: 1.9;
    margin: 0 0 27px;
}

.services-hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 26px;
}

.service-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 9px;
    padding: 13px 21px;
    min-height: 46px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    transition: all .25s ease;
}

    .service-btn:hover {
        transform: translateY(-2px);
    }

.service-btn-primary {
    color: #fff;
    background: linear-gradient(120deg, #0756b8, #0879bb);
    box-shadow: 0 6px 18px rgba(7, 86, 184, .18);
}

    .service-btn-primary:hover {
        color: #fff;
        box-shadow: 0 9px 22px rgba(7, 86, 184, .27);
    }

.service-btn-outline {
    border: 1px solid #159b9f;
    background: #fff;
    color: #087f83;
}

    .service-btn-outline:hover {
        background: #eafaf8;
        color: #087f83;
    }

.services-hero-points {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

    .services-hero-points span {
        color: #53677b;
        font-size: 12px;
        font-weight: 600;
    }

    .services-hero-points i {
        color: #24a65a;
        margin-right: 5px;
    }

.service-help-strip {
    background: #fff;
    border-bottom: 1px solid #e7eef6;
    box-shadow: 0 5px 18px rgba(10, 43, 76, .035);
}

.service-help-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.service-help-item {
    display: flex;
    position: relative;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 23px 15px;
    border-right: 1px solid #e4edf5;
    transition: background .2s ease;
}

    .service-help-item:first-child {
        padding-left: 0;
    }

    .service-help-item:last-child {
        border-right: 0;
        padding-right: 0;
    }

    .service-help-item:hover {
        background: #f7fbff;
    }

.service-help-icon {
    width: 47px;
    height: 47px;
    flex: 0 0 47px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    font-size: 22px;
}

    .service-help-icon.blue,
    .treatment-icon.blue {
        color: #0758bb;
        background: #e8f1ff;
    }

    .service-help-icon.teal,
    .treatment-icon.teal {
        color: #079fa9;
        background: #e3f8f8;
    }

    .service-help-icon.green,
    .treatment-icon.green {
        color: #25a75b;
        background: #e8f8ec;
    }

    .service-help-icon.purple,
    .treatment-icon.purple {
        color: #7054ce;
        background: #f0edff;
    }

.service-help-item > span:nth-child(2) {
    min-width: 0;
}

.service-help-item strong {
    display: block;
    color: var(--service-navy);
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 3px;
}

.service-help-item small {
    display: block;
    color: var(--service-muted);
    font-size: 13px;
    line-height: 1.5;
}

.help-arrow {
    color: #1499a5;
    font-size: 14px;
    margin-left: auto;
}

.services-main {
    background: #f6fbff;
}

.services-section-heading {
    max-width: 900px;
    margin: 0 auto 42px;
    text-align: center;
}

.services-eyebrow {
    display: inline-block;
    margin-bottom: 10px;
    color: #009f8f;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.6px;
}

.services-section-heading h2 {
    margin: 0 0 14px;
    color: #073f82;
    font-size: 40px;
    line-height: 1.2;
    font-weight: 700;
}

.services-section-heading p {
    max-width: 780px;
    margin: 0 auto;
    color: #58708b;
    font-size: 16px;
    line-height: 1.65;
}

.services-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.treatment-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    /*min-height: 215px;*/
    height: 100%;
    padding: 24px 22px 20px;
    text-align: center;
    background: #ffffff;
    border: 1px solid #d6e6f5;
    border-radius: 12px;
    box-shadow: 0 5px 18px rgba(20, 78, 125, 0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

    .treatment-card:hover {
        transform: translateY(-4px);
        border-color: #b9d8ef;
        box-shadow: 0 12px 28px rgba(20, 78, 125, 0.10);
    }

.treatment-card-top {
    position: relative;
    width: 100%;
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}


/* Icon */

.treatment-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    font-size: 25px;
    line-height: 1;
}


    /* Icon colours */

    .treatment-icon.blue {
        background: #e9f0ff;
        color: #287be0;
    }

    .treatment-icon.teal {
        background: #e4f7f5;
        color: #0d9e98;
    }

    .treatment-icon.green {
        background: #e7f7ed;
        color: #27a866;
    }

    .treatment-icon.purple {
        background: #f0eaff;
        color: #7655d9;
    }


/* IMPORTANT:
   Number is now separated from the icon.
   It will NOT overlap the icon. */

.treatment-number {
    position: absolute;
    top: -3px;
    right: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    /*background: #0b79d0;*/
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 4px 10px rgba(11, 121, 208, 0.22);
}


/* ---------- Treatment Heading ---------- */

.treatment-card h3 {
    margin: 0 0 7px;
    color: #073f82;
    font-size: 17px;
    line-height: 1.3;
    /*font-weight: 700;*/
}


/* ---------- Treatment Description ---------- */

.treatment-card p {
    margin: 0;
    color: #58708b;
    font-size: 14px;
    line-height: 1.5;
}


/* ---------- Treatment Link ---------- */

.treatment-link {
    margin-top: auto;
    padding-top: 13px;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #0068bd;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: color 0.2s ease;
}

    .treatment-link i {
        font-size: 13px;
        transition: transform 0.2s ease;
    }

    .treatment-link:hover {
        color: #008f86;
    }

        .treatment-link:hover i {
            transform: translateX(3px);
        }

.patient-symptom-section {
    padding: 80px 0;
    background: #fff;
}

.symptom-layout {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    align-items: center;
    gap: 65px;
}

.symptom-content h2 {
    color: #0a306b;
    font-size: clamp(27px, 3.3vw, 36px);
    line-height: 1.3;
    font-weight: 800;
    margin: 0 0 16px;
}

.symptom-content > p {
    color: #64758a;
    font-size: 14px;
    line-height: 1.9;
    margin-bottom: 23px;
}

.symptom-list {
    list-style: none;
    padding: 0;
    margin: 0 0 27px;
}

    .symptom-list li {
        display: flex;
        align-items: flex-start;
        gap: 11px;
        color: #344c65;
        font-size: 13px;
        line-height: 1.7;
        margin-bottom: 13px;
    }

        .symptom-list li i {
            color: #20a65a;
            margin-top: 3px;
        }

.symptom-info-card {
    padding: 31px;
    border: 1px solid #dcecf5;
    border-radius: 18px;
    background: linear-gradient(145deg, #f2f9ff, #f0fcf8);
    box-shadow: 0 10px 30px rgba(9, 43, 76, .055);
}

.symptom-info-icon {
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0876ba;
    background: #fff;
    border-radius: 14px;
    font-size: 27px;
    box-shadow: 0 5px 15px rgba(9, 43, 76, .07);
    margin-bottom: 19px;
}

.symptom-info-card h3 {
    color: #0a306b;
    font-size: 21px;
    font-weight: 800;
    margin: 0 0 9px;
}

.symptom-info-card > p {
    color: #64758a;
    font-size: 13px;
    line-height: 1.7;
    margin-bottom: 22px;
}

.visit-check-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #dce9f0;
    color: #344c65;
    font-size: 12px;
    line-height: 1.7;
}

    .visit-check-item i {
        color: #079fa9;
        font-size: 17px;
    }

.symptom-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px;
    margin-top: 19px;
    background: #fff8e9;
    border: 1px solid #f2dfb9;
    border-radius: 9px;
    color: #795a24;
    font-size: 13px;
    line-height: 1.7;
}

    .symptom-note i {
        font-size: 17px;
        flex: 0 0 auto;
    }

.patient-journey-section {
    padding: 75px 0;
    background: #f2f8ff;
}

.patient-journey {
    padding: 80px 0;
    background: #f1f8ff;
}

    .patient-journey .section-heading {
        max-width: 760px;
        margin: 0 auto 40px;
        text-align: center;
    }

        .patient-journey .section-heading > span {
            display: inline-block;
            margin-bottom: 10px;
            color: #009f8f;
            font-size: 13px;
            font-weight: 700;
            letter-spacing: 1.6px;
        }

        .patient-journey .section-heading h2 {
            max-width: 700px;
            margin: 0 auto 12px;
            color: #073f82;
            font-size: 40px;
            line-height: 1.2;
            font-weight: 700;
        }

        .patient-journey .section-heading p {
            margin: 0;
            color: #58708b;
            font-size: 15px;
            line-height: 1.6;
        }

    .patient-journey .row {
        --bs-gutter-x: 18px;
        --bs-gutter-y: 18px;
    }

.journey-card {
    position: relative;
    height: 100%;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 22px 24px;
    text-align: center;
    background: #ffffff;
    border: 1px solid #d9e8f5;
    border-radius: 14px;
    box-shadow: 0 5px 18px rgba(20, 78, 125, 0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

    .journey-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 28px rgba(20, 78, 125, 0.10);
    }


/* ---------- Journey Number ---------- */

.journey-number {
    position: absolute;
    top: 18px;
    left: 18px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #087bd1;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 4px 10px rgba(8, 123, 209, 0.25);
    z-index: 2;
}


/* ---------- Journey Icon ---------- */

.journey-card > i {
    width: 52px;
    height: 52px;
    margin-top: 8px;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #edf7ff;
    color: #087bd1;
    font-size: 24px;
}


/* ---------- Journey Heading ---------- */

.journey-card h3 {
    max-width: 220px;
    margin: 0 0 10px;
    color: #073f82;
    font-size: 21px;
    line-height: 1.25;
    font-weight: 700;
}


/* ---------- Journey Description ---------- */

.journey-card p {
    max-width: 240px;
    margin: 0;
    color: #58708b;
    font-size: 14px;
    line-height: 1.55;
}


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

@media (max-width: 991px) {

    .services-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .services-section-heading h2,
    .patient-journey .section-heading h2 {
        font-size: 34px;
    }

    .patient-journey {
        padding: 65px 0;
    }
}


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

@media (max-width: 575px) {

    .services-main {
        padding-left: 0;
        padding-right: 0;
    }

    .services-section-heading {
        margin-bottom: 30px;
        padding: 0 10px;
    }

    .services-eyebrow,
    .patient-journey .section-heading > span {
        font-size: 11px;
        letter-spacing: 1.3px;
    }

    .services-section-heading h2,
    .patient-journey .section-heading h2 {
        font-size: 28px;
        line-height: 1.25;
    }

    .services-section-heading p,
    .patient-journey .section-heading p {
        font-size: 14px;
        line-height: 1.55;
    }


    /* One treatment card per row */

    .services-card-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .treatment-card {
        min-height: 0;
        padding: 22px 18px 18px;
    }

    .treatment-card-top {
        margin-bottom: 13px;
    }

    .treatment-number {
        right: 2px;
    }

    .treatment-card h3 {
        font-size: 17px;
    }

    .treatment-card p {
        font-size: 14px;
    }


    /* Patient Journey */

    .patient-journey {
        padding: 55px 0;
    }

        .patient-journey .section-heading {
            margin-bottom: 30px;
            padding: 0 10px;
        }

        .patient-journey .row {
            --bs-gutter-x: 14px;
            --bs-gutter-y: 14px;
        }

    .journey-card {
        min-height: 205px;
        padding: 28px 16px 20px;
    }

    .journey-number {
        top: 14px;
        left: 14px;
        width: 32px;
        height: 32px;
        font-size: 11px;
    }

    .journey-card > i {
        width: 48px;
        height: 48px;
        margin-top: 5px;
        margin-bottom: 14px;
        font-size: 22px;
    }

    .journey-card h3 {
        font-size: 18px;
    }

    .journey-card p {
        font-size: 13px;
        line-height: 1.5;
    }
}

.journey-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}

.journey-item {
    position: relative;
    text-align: center;
    padding: 30px 20px 24px;
    background: #fff;
    border: 1px solid #e0eaf5;
    border-radius: 14px;
}

.journey-step {
    position: absolute;
    top: 14px;
    right: 16px;
    color: #d9e6f3;
    font-size: 23px;
    font-weight: 800;
}

.journey-icon {
    width: 61px;
    height: 61px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    color: #0874b9;
    background: #e8f5ff;
    border-radius: 50%;
    font-size: 26px;
}

.journey-item h3 {
    color: #0a306b;
    font-size: 15px;
    font-weight: 800;
    margin-bottom: 10px;
}

.journey-item p {
    color: #687b8f;
    font-size: 12px;
    line-height: 1.8;
    margin: 0;
}

.services-appointment-section {
    padding: 65px 0 80px;
    background: #fff;
}

.services-appointment-box {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 38px 40px;
    color: #fff;
    background: linear-gradient(120deg, #073c7d 0%, #087ea7 65%, #139c87 100%);
    border-radius: 18px;
    box-shadow: 0 15px 35px rgba(7, 70, 123, .15);
}

.appointment-cta-icon {
    width: 66px;
    height: 66px;
    flex: 0 0 66px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 16px;
    font-size: 31px;
}

.appointment-cta-content {
    flex: 1;
    min-width: 0;
}

    .appointment-cta-content > span {
        display: block;
        color: #b5f5d5;
        font-size: 13px;
        font-weight: 800;
        letter-spacing: 1.5px;
        margin-bottom: 8px;
    }

    .appointment-cta-content h2 {
        color: #fff;
        font-size: clamp(21px, 2.7vw, 30px);
        line-height: 1.35;
        font-weight: 800;
        margin: 0 0 8px;
    }

    .appointment-cta-content p {
        max-width: 600px;
        color: rgba(255, 255, 255, .85);
        font-size: 12px;
        line-height: 1.8;
        margin: 0;
    }

.appointment-cta-actions {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    gap: 10px;
}

.service-btn-white {
    color: #0756a4;
    background: #fff;
}

    .service-btn-white:hover {
        color: #0756a4;
        background: #eff8ff;
    }

.service-btn-light-outline {
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .55);
    background: transparent;
}

    .service-btn-light-outline:hover {
        color: #fff;
        background: rgba(255, 255, 255, .1);
    }

@media (max-width: 991px) {
    .services-hero {
        padding: 65px 0;
    }

    .service-help-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .service-help-item {
        border-bottom: 1px solid #e4edf5;
    }

        .service-help-item:nth-child(2) {
            border-right: 0;
        }

        .service-help-item:nth-child(3),
        .service-help-item:nth-child(4) {
            border-bottom: 0;
        }

        .service-help-item:first-child {
            padding-left: 15px;
        }

        .service-help-item:last-child {
            padding-right: 15px;
        }

    .services-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .symptom-layout {
        gap: 30px;
    }

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

    .services-appointment-box {
        flex-wrap: wrap;
    }

    .appointment-cta-actions {
        flex-direction: row;
        flex-wrap: wrap;
        margin-left: 90px;
    }
}

@media (max-width: 575px) {
    .section-padding {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .services-hero {
        padding: 48px 0;
    }

        .services-hero h1 {
            font-size: 32px;
        }

    .services-hero-content > p {
        font-size: 14px;
        line-height: 1.8;
    }

    .services-hero-buttons {
        flex-direction: column;
        align-items: stretch;
    }

        .services-hero-buttons .service-btn {
            width: 100%;
        }

    .services-hero-points {
        flex-direction: column;
        gap: 10px;
    }

    .service-help-grid {
        grid-template-columns: 1fr;
    }

    .service-help-item,
    .service-help-item:first-child,
    .service-help-item:last-child {
        padding: 15px 5px;
        border-right: 0;
        border-bottom: 1px solid #e4edf5;
    }

        .service-help-item:last-child {
            border-bottom: 0;
        }

    .services-card-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .treatment-card {
        padding: 23px;
    }

    .symptom-layout {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .symptom-info-card {
        padding: 23px;
    }

    .journey-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .journey-item {
        padding: 25px 20px;
    }

    .services-appointment-box {
        flex-direction: column;
        align-items: flex-start;
        padding: 27px 22px;
        gap: 17px;
    }

    .appointment-cta-actions {
        width: 100%;
        flex-direction: column;
        margin-left: 0;
    }

        .appointment-cta-actions .service-btn {
            width: 100%;
        }
}

@media (prefers-reduced-motion: reduce) {
    .urology-services-page *,
    .urology-services-page *::before,
    .urology-services-page *::after {
        scroll-behavior: auto !important;
        transition: none !important;
    }
}

.urology-services-page {
    --service-bg: #f3f9ff;
    --service-blue: #073b82;
    --service-navy: #082844;
    --service-teal: #08a6b3;
    --service-green: #35b65b;
    --service-text: #34445a;
    --service-muted: #66758a;
    color: var(--service-text);
    background: #fff;
    overflow: hidden;
}

    .urology-services-page a {
        text-decoration: none;
    }

.services-intro {
    padding: 75px 0;
    background: radial-gradient(circle at 90% 10%, rgba(24, 174, 190, .10), transparent 35%), linear-gradient(135deg, #f4faff, #ffffff 70%);
}

.services-eyebrow,
.section-heading > span,
.services-cta-inner .cta-content > span {
    display: inline-block;
    margin-bottom: 12px;
    color: #168b60;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.7px;
}

.services-intro h1 {
    max-width: 780px;
    margin: 0 0 20px;
    color: #0a3168;
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 800;
    line-height: 1.17;
}

    .services-intro h1 span {
        color: #159e9d;
    }

.services-lead {
    max-width: 760px;
    margin-bottom: 25px;
    font-size: 16px;
    line-height: 1.85;
}

.services-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 25px;
}

.btn-services-primary,
.btn-services-outline {
    display: inline-flex;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 12px 19px;
    border-radius: 7px;
    font-size: 14px;
    font-weight: 700;
    transition: .25s ease;
}

.btn-services-primary {
    color: #fff;
    background: linear-gradient(120deg, #073b82, #087fae);
    box-shadow: 0 5px 15px rgba(7, 59, 130, .15);
}

    .btn-services-primary:hover {
        color: #fff;
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(7, 59, 130, .23);
    }

.btn-services-outline {
    color: var(--service-blue);
    border: 1px solid #a6c8e9;
    background: #fff;
}

    .btn-services-outline:hover {
        color: #fff;
        border-color: var(--service-teal);
        background: var(--service-teal);
    }

.services-trust-points {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
}

    .services-trust-points span {
        font-size: 12px;
        font-weight: 600;
    }

    .services-trust-points i {
        margin-right: 5px;
        color: #25a968;
    }

.services-doctor-card {
    position: relative;
    padding: 32px 27px;
    border: 1px solid #dceaf5;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 15px 45px rgba(8, 40, 68, .08);
}

.doctor-card-icon {
    display: flex;
    width: 64px;
    height: 64px;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    border-radius: 15px;
    color: #078fa8;
    background: #e6f8fa;
    font-size: 32px;
}

.doctor-card-label {
    color: #149c70;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.services-doctor-card h2 {
    margin: 8px 0;
    color: #0a3168;
    font-size: 23px;
    font-weight: 800;
}

.services-doctor-card p {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
}

.doctor-card-divider {
    height: 1px;
    margin: 20px 0;
    background: #e3edf5;
}

.services-doctor-card a {
    color: #087ea5;
    font-size: 13px;
    font-weight: 700;
}

    .services-doctor-card a i {
        margin-left: 5px;
    }

.symptom-finder {
    padding: 65px 0;
    background: #fff;
}

.symptom-card {
    display: block;
    height: 100%;
    padding: 24px 19px;
    border: 1px solid #e3edf6;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 5px 18px rgba(8, 40, 68, .035);
    transition: transform .25s, box-shadow .25s, border-color .25s;
}

    .symptom-card > i {
        display: flex;
        width: 49px;
        height: 49px;
        align-items: center;
        justify-content: center;
        margin-bottom: 18px;
        border-radius: 12px;
        color: #087ea5;
        background: #e8f6ff;
        font-size: 25px;
    }

    .symptom-card h3 {
        margin-bottom: 9px;
        color: #0a3168;
        font-size: 16px;
        font-weight: 800;
    }

    .symptom-card p {
        min-height: 45px;
        margin-bottom: 14px;
        color: #66758a;
        font-size: 12px;
        line-height: 1.7;
    }

    .symptom-card > span {
        color: #087ea5;
        font-size: 12px;
        font-weight: 800;
    }

    .symptom-card:hover {
        transform: translateY(-5px);
        border-color: #8bd9df;
        box-shadow: 0 12px 28px rgba(8, 40, 68, .09);
    }

.treatment-icon.blue {
    color: #1762c0;
    background: #e8f0ff;
}

.treatment-icon.teal {
    color: #0798a7;
    background: #e2f8f7;
}

.treatment-icon.green {
    color: #269c58;
    background: #e7f8ed;
}

.treatment-icon.purple {
    color: #7855d9;
    background: #f0ebff;
}

.treatment-icon.cyan {
    color: #078da8;
    background: #e5f8fc;
}

.treatment-icon.rose {
    color: #cb557c;
    background: #fff0f4;
}

.treatment-card > a:hover {
    color: #079da5;
}

.symptom-checklist i {
    margin-top: 3px;
    color: #1da56b;
}

.medical-note {
    padding: 15px;
    border-left: 3px solid #e6a63b;
    border-radius: 5px;
    background: #fff9ed;
    font-size: 12px !important;
}

    .medical-note i {
        margin-right: 5px;
        color: #b77a15;
    }

.preparation-heading {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 22px;
}

    .preparation-heading > i {
        display: flex;
        width: 45px;
        height: 45px;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        color: #087ea5;
        background: #e2f4fc;
        font-size: 23px;
    }

.preparation-item > i {
    color: #0798a7;
    font-size: 21px;
}

.preparation-item strong,
.preparation-item span {
    display: block;
}

.journey-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(8, 40, 68, .07);
}

.journey-number {
    position: absolute;
    top: 15px;
    right: 17px;
    color: #d6e5f6;
    font-size: 20px;
    font-weight: 800;
}

.services-cta-inner .cta-content {
    flex: 1;
}

    .services-cta-inner .cta-content > span {
        margin-bottom: 8px;
        color: #a7f1d4;
        font-size: 13px;
    }

.cta-buttons {
    display: flex;
    flex-shrink: 0;
    flex-direction: column;
    gap: 10px;
}

.btn-cta-white {
    color: #073b82;
    background: #fff;
}

    .btn-cta-white:hover {
        color: #073b82;
        background: #e9f7ff;
    }

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

    .btn-cta-outline:hover {
        color: #073b82;
        background: #fff;
    }

@media (max-width: 991px) {
    .services-intro {
        padding: 55px 0;
    }

    .services-doctor-card {
        padding: 25px;
    }

    .services-cta-inner {
        flex-wrap: wrap;
    }

    .cta-buttons {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
    }
}

@media (max-width: 575px) {
    .services-intro,
    .symptom-finder,
    .treatment-section,
    .consult-warning,
    .patient-journey {
        padding: 45px 0;
    }

        .services-intro h1 {
            font-size: 31px;
        }

    .services-lead {
        font-size: 14px;
    }

    .services-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .btn-services-primary,
    .btn-services-outline {
        width: 100%;
    }

    .services-trust-points {
        flex-direction: column;
        gap: 9px;
    }

    .symptom-card {
        padding: 17px 13px;
    }

        .symptom-card h3 {
            font-size: 14px;
        }

        .symptom-card p {
            min-height: 0;
            font-size: 13px;
        }

    .treatment-card {
        padding: 20px 17px;
    }

        .treatment-card h3 {
            font-size: 16px;
        }

        .treatment-card p {
            font-size: 12px;
        }

    .visit-preparation {
        padding: 20px;
    }

    .services-cta-inner {
        align-items: flex-start;
        padding: 25px 20px;
        gap: 16px;
    }

    .cta-icon {
        width: 48px;
        height: 48px;
        font-size: 23px;
    }

    .services-cta-inner .cta-content {
        flex-basis: calc(100% - 65px);
    }

    .services-cta-inner h2 {
        font-size: 21px;
    }

    .cta-buttons {
        flex-direction: column;
    }

    .btn-cta-white,
    .btn-cta-outline {
        width: 100%;
    }
}

:root {
    --ek-navy: #073878;
    --ek-blue: #0756b8;
    --ek-blue-dark: #062d68;
    --ek-green: #168b3c;
    --ek-teal: #079ca9;
    --ek-ink: #102c58;
    --ek-muted: #5e6d83;
    --ek-pale: #eef7ff;
    --ek-line: #dce9f7;
    --ek-shadow: 0 14px 34px rgba(9, 54, 111, 0.09);
    --clinic-blue: #07377c;
    --clinic-dark-blue: #082c66;
    --clinic-green: #269b42;
    --clinic-teal: #0797b5;
    --clinic-light: #eff7ff;
    --clinic-text: #142e59;
    --clinic-white: #ffffff;
    --background-color: #f5f4f1;
    --default-color: #212529;
    --heading-color: #32220b;
    --accent-color: #439F41;
    --surface-color: #ffffff;
    --contrast-color: #ffffff;
    --mm-navy: #0d1b2a;
    --mm-navy-light: #16283a;
    --mm-gold: #a88a5a;
    --mm-gold-light: #c6a86a;
    --mm-cream: #f7f5ef;
    --mm-white: #ffffff;
    --mm-text: #26333d;
    --mm-muted: #68737c;
    --mm-border: #e7e1d6;
    --mm-radius: 14px;
    --mm-shadow: 0 12px 35px rgba(18, 28, 38, 0.08);
    --mm-shadow-hover: 0 18px 45px rgba(18, 28, 38, 0.13);
    --nav-color: rgba(248, 242, 233, 0.9);
    --nav-hover-color: rgba(233, 210, 174, 0.7);
    --nav-mobile-background-color: #ffffff;
    --nav-dropdown-background-color: #ffffff;
    --nav-dropdown-color: #212529;
    --nav-dropdown-hover-color: #917a5a;
    scroll-behavior: smooth;
    --default-font: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    --heading-font: "Playfair Display", Georgia, "Times New Roman", serif;
    --nav-font: "Poppins", "Roboto", Arial, sans-serif;
    --blog-primary: #063b8f;
    --blog-primary-dark: #032b6d;
    --blog-secondary: #16a34a;
    --blog-secondary-dark: #07813a;
    --blog-blue-light: #eef7ff;
    --blog-green-light: #effbf3;
    --blog-text: #14213d;
    --blog-muted: #68758a;
    --blog-border: #e2eaf2;
    --blog-white: #ffffff;
    --blog-bg: #f7fafc;
    --blog-shadow: 0 8px 28px rgba(12, 53, 92, 0.08);
    --blog-radius: 14px;
    --ks-primary: #063b8f;
    --ks-primary-dark: #032d70;
    --ks-secondary: #16a34a;
    --ks-secondary-dark: #0f7d38;
    --ks-accent: #e53935;
    --ks-text: #172033;
    --ks-muted: #64748b;
    --ks-light: #f5f9fd;
    --ks-light-green: #f0faf3;
    --ks-border: #e2e8f0;
    --ks-white: #ffffff;
    --ks-shadow: 0 15px 45px rgba(6, 59, 143, .10);
    --ks-radius: 18px;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

body {
    background-color: var(--background-color);
    font-family: var(--default-font);
    font-size: 15px;
    line-height: 1.65;
    color: #33485c;
    background: #f7fafc;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--default-font);
    text-rendering: optimizeLegibility;
}

p {
    margin-top: 0;
}

img {
    height: auto;
    max-width: 100%;
}

.clinic-container,
.about-hero-container,
.clinic-stats-container {
    width: min(1320px, calc(100% - 40px));
    margin-left: auto;
    margin-right: auto;
}

.clinic-header .header-inner {
    padding-top: 8px;
    padding-bottom: 8px;
    max-width: 1320px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: min(1320px, calc(100% - 40px));
    min-height: 86px;
    height: 86px;
    margin: 0 auto;
    padding: 8px 0;
    gap: 22px;
}

.clinic-logo {
    flex: 0 0 auto;
    width: auto;
    color: inherit;
    overflow: hidden;
    display: flex;
    align-items: center;
    flex-shrink: 1;
    min-width: 0;
    text-decoration: none;
    max-width: 400px;
    gap: 12px;
}

.clinic-logo-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 82px;
    flex: 0 0 82px;
}

.clinic-logo-img {
    object-position: center;
    display: block;
    object-fit: contain;
    width: 82px;
    max-width: 82px;
    height: auto;
}

.doctor-name {
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin-bottom: 5px;
    color: #092d70;
    white-space: nowrap;
    font-size: 13px;
    letter-spacing: 1.2px;
}

.clinic-name {
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 3px;
    font-weight: 800;
    white-space: nowrap;
    line-height: 1.15;
    font-size: 25px;
    letter-spacing: -.6px;
}

.clinic-specialty {
    color: #123477;
    font-weight: 700;
    line-height: 1.4;
    white-space: normal;
    font-size: 7px;
}

.clinic-tagline {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 7px;
    margin-top: 5px;
    width: 100%;
    color: #073b80;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    font-size: 6px;
}

.clinic-nav-list {
    display: flex;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 3px;
}

.nav-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    position: relative;
    white-space: nowrap;
    text-decoration: none;
    padding: 12px 11px;
    color: #17345c;
    font-family: var(--nav-font);
    font-size: 12.5px;
    font-weight: 600;
}

.header-appointment-btn {
    min-height: 42px;
    padding: 11px 17px;
    border-radius: 9px;
    font-family: var(--nav-font);
    font-size: 12px;
}

#hero,
#hero .hero-wrapper,
#hero .hero-image {
    width: 100%;
}

    #hero .hero-image img {
        display: block;
        width: 100%;
        height: auto;
        max-height: 620px;
        object-fit: cover;
        object-position: center;
    }

.hero-contact-actions {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    right: 0;
    gap: 8px;
}

.hero-contact-btn {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: #fff;
    text-decoration: none;
    border-radius: 30px 0 0 30px;
    box-shadow: 0 5px 18px rgba(0, 32, 75, 0.18);
    transition: width 0.25s ease, filter 0.25s ease, box-shadow 0.25s ease;
    width: 132px;
    min-height: 42px;
    padding: 10px 13px;
    gap: 8px;
    font-family: var(--nav-font);
    font-size: 13px;
    font-weight: 600;
}

    .hero-contact-btn:hover {
        color: #fff;
        filter: brightness(1.08);
        box-shadow: 0 7px 22px rgba(0, 32, 75, 0.25);
        width: 142px;
    }

.clinic-feature-strip {
    position: relative;
    z-index: 1;
    background: linear-gradient(105deg, #e8f4ff 0%, #f5faff 50%, #e5f4ff 100% );
    border-bottom: 1px solid #dcecfb;
    padding: 13px 0;
    width: 100%;
    overflow: hidden;
}

.feature-inner {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: center;
    width: min(1320px, calc(100% - 40px));
    margin: 0 auto;
}

.clinic-feature {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    width: 100%;
    gap: 11px;
    padding: 7px 18px;
    box-sizing: border-box;
}

.feature-icon {
    flex: 0 0 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 4px 15px rgba(17, 77, 139, .10);
    width: 46px;
    height: 46px;
    flex-basis: 46px;
}

    .feature-icon i {
        font-size: 22px;
    }

.feature-text {
    min-width: 0;
    flex: 1;
}

    .feature-text h3 {
        margin: 0 0 5px;
        color: var(--clinic-blue);
        line-height: 1.3;
        margin-bottom: 3px;
        font-family: var(--default-font);
        font-size: 13px;
        font-weight: 700;
        word-break: normal;
        overflow-wrap: normal;
        white-space: normal;
    }

.feature-text p {
    margin: 0;
    color: #526781;
    font-size: 13px;
    line-height: 1.45;
}

.about-home {
    padding-top: 60px;
    padding-bottom: 60px;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: #f7fbfc;
    color: #243e50;
    padding: 72px 0 78px;
}

.about-title {
    margin: 0 0 14px;
    color: #123867;
    font-weight: 700;
    max-width: 720px;
    margin-bottom: 12px;
    font-family: var(--default-font);
    font-size: clamp(38px, 3.5vw, 50px);
    line-height: 1.08;
    letter-spacing: -.8px;
}

.about-tagline {
    margin: 0 0 22px;
    color: #254b60;
    line-height: 1.7;
    margin-bottom: 18px;
    font-size: 15px;
    font-weight: 600;
}

.about-intro,
.about-description {
    color: #455e6e;
    /*max-width: 700px;*/
    margin-bottom: 13px;
    font-size: 13px;
    line-height: 1.75;
}

.about-specialities {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 20px;
    margin-top: 24px;
}

.speciality-item {
    display: flex;
    align-items: flex-start;
    min-width: 0;
    gap: 10px;
}

.speciality-icon {
    margin: 0 auto 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #087caa;
    background: rgba(225, 246, 249, 0.95);
    border: 1px solid rgba(12, 148, 170, 0.14);
    transition: all 0.25s ease;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    font-size: 18px;
}

.speciality-item h3 {
    margin: 2px 0 5px;
    color: #123867;
    font-weight: 800;
    font-family: var(--default-font);
    font-size: 13px;
    line-height: 1.35;
}

.speciality-item p {
    margin: 0;
    color: #607482;
    font-size: 13px;
    line-height: 1.55;
}

.about-qualifications {
    background: rgba(237, 249, 248, 0.94);
    border: 1px solid rgba(13, 157, 151, 0.13);
    border-left: 4px solid #0ba39b;
    border-radius: 12px;
    margin-top: 24px;
    padding: 17px 18px;
}

.qualification-heading h3 {
    margin: 0;
    color: #174b61;
    font-weight: 800;
    line-height: 1.5;
    font-family: var(--default-font);
    font-size: 13px;
}

.qualification-list span {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: #415d6d;
    line-height: 1.6;
    font-size: 13px;
}

.about-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid transparent;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.25s ease;
    min-height: 42px;
    padding: 10px 16px;
    border-radius: 7px;
    font-family: var(--nav-font);
    font-size: 13px;
}

.about-location {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 18px 0 0;
    color: #607482;
    font-size: 13px;
}

.about-visual {
    position: relative;
    margin-left: 8px;
    isolation: isolate;
    min-height: 570px;
}

.clinic-photo {
    position: absolute;
    right: -8%;
    z-index: -1;
    width: 108%;
    height: 70%;
    overflow: hidden;
    background: #e7f1f4;
    border: 7px solid rgba(255, 255, 255, 0.9);
    border-width: 5px;
    border-radius: 20px;
    box-shadow: 0 16px 35px rgba(24, 66, 90, .10);
}

.doctor-photo {
    position: absolute;
    right: 2%;
    bottom: 0;
    z-index: 1;
    width: 80%;
    height: 78%;
    overflow: hidden;
    background: #f4f7f7;
    border: 7px solid rgba(255, 255, 255, 0.96);
    box-shadow: 0 18px 40px rgba(20, 61, 79, 0.15);
    border-width: 5px;
    border-radius: 160px 160px 18px 18px;
}

.doctor-info-card {
    position: absolute;
    right: 0;
    bottom: 25px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(10, 157, 151, 0.15);
    box-shadow: 0 12px 35px rgba(21, 66, 83, 0.16);
    backdrop-filter: blur(8px);
    width: min(290px, 90%);
    padding: 13px;
    border-radius: 12px;
}

    .doctor-info-card h3 {
        margin: 0 0 4px;
        color: #123867;
        font-weight: 800;
        font-family: var(--default-font);
        font-size: 13px;
    }

    .doctor-info-card p,
    .doctor-info-card span {
        font-size: 13px;
    }

.clinic-stats-section {
    width: 100%;
    background: linear-gradient(110deg, #073879 0%, #003574 50%, #073879 100%);
    color: #ffffff;
    overflow: hidden;
    padding: 13px 0;
}

.clinic-stat-item {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    min-height: 68px;
    gap: 12px;
    padding: 8px 18px;
}

.clinic-stat-icon {
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    width: 46px;
    height: 46px;
}

    .clinic-stat-icon i {
        line-height: 1;
        font-weight: normal;
        font-size: 38px;
    }

.clinic-stat-content h3 {
    color: #ffffff;
    font-weight: 700;
    margin: 0 0 10px;
    white-space: nowrap;
    margin-bottom: 3px;
    font-family: var(--default-font);
    font-size: 24px;
    line-height: 1.1;
}

.clinic-stat-content p {
    color: #ffffff;
    font-weight: 400;
    margin: 0;
    white-space: nowrap;
    font-family: var(--default-font);
    font-size: 13px;
    line-height: 1.3;
}

.section-padding {
    padding-top: 75px;
    padding-bottom: 75px;
    padding: 68px 0;
}

.section-heading {
    max-width: 760px;
    margin: 0 auto 38px;
    text-align: center;
    margin-bottom: 32px;
}

.section-eyebrow {
    display: inline-block;
    color: #b5965c;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 8px;
    font-family: var(--nav-font);
    font-size: 9px;
    letter-spacing: 1.8px;
}

.section-heading h2 {
    margin: 0 0 12px;
    font-weight: 800;
    margin-bottom: 9px;
    font-family: var(--default-font);
    font-size: clamp(30px, 3vw, 42px);
    line-height: 1.15;
    color: #0d315f;
}

.section-heading p {
    max-width: 700px;
    margin: 0;
    color: var(--service-muted);
    font-size: 13px;
    line-height: 1.7;
}

.treatment-section {
    background: linear-gradient(180deg, #f4faff 0%, #ffffff 100%);
    padding: 68px 0;
}

.treatment-icon {
    flex: 0 0 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: 14px;
    border-radius: 10px;
    font-size: 20px;
}

.treatment-number {
    position: absolute;
    color: #d7e5f5;
    font-weight: 800;
    top: 20px;
    right: 18px;
    font-size: 18px;
}

.treatment-card p {
    margin: 0 0 22px;
    flex-grow: 1;
    color: #64748b;
    margin-bottom: 15px;
    font-size: 13px;
    line-height: 1.65;
}

.treatment-card > a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #0759ad;
    /*font-weight: 800;*/
    /*font-family: var(--nav-font);*/
    font-size: 13px;
}

.consult-warning {
    background: #fff;
    padding: 68px 0;
}

    .consult-warning h2 {
        max-width: 600px;
        color: #0a3168;
        font-weight: 800;
        margin-bottom: 12px;
        font-family: var(--default-font);
        font-size: clamp(28px, 3vw, 38px);
        line-height: 1.15;
    }

    .consult-warning > .container .row > .col-lg-7 > p {
        color: #64748b;
        font-size: 13px;
        line-height: 1.75;
    }

.symptom-checklist {
    display: grid;
    padding: 0;
    list-style: none;
    gap: 9px;
    margin: 20px 0;
}

    .symptom-checklist li {
        display: flex;
        gap: 10px;
        align-items: flex-start;
        font-size: 12px;
        line-height: 1.5;
    }

.visit-preparation {
    border: 1px solid #dcecf3;
    background: #f5fbfd;
    box-shadow: 0 12px 32px rgba(8, 40, 68, .05);
    padding: 22px;
    border-radius: 12px;
}

.preparation-heading h3 {
    margin-bottom: 5px;
    color: #0a3168;
    font-weight: 800;
    font-family: var(--default-font);
    font-size: 15px;
}

.preparation-heading p {
    margin: 0;
    color: #718096;
    font-size: 13px;
}

.preparation-item {
    display: flex;
    align-items: flex-start;
    border-top: 1px solid #e0edf3;
    gap: 10px;
    padding: 13px 0;
}

    .preparation-item strong {
        margin-bottom: 5px;
        color: #153d68;
        font-size: 13px;
    }

    .preparation-item span {
        color: #6b7c8d;
        font-size: 13px;
        line-height: 1.55;
    }

.patient-journey {
    background: #f1f8ff;
    padding: 68px 0;
}

.journey-card {
    position: relative;
    height: 100%;
    border: 1px solid #e1ebf6;
    background: #fff;
    transition: transform .25s, box-shadow .25s;
    padding: 20px 17px;
    border-radius: 9px;
}

    .journey-card > i {
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 11px;
        color: #087ea5;
        background: #e7f5ff;
        width: 40px;
        height: 40px;
        margin-bottom: 13px;
        font-size: 20px;
    }

    .journey-card h3 {
        margin-bottom: 10px;
        color: #0a3168;
        font-weight: 800;
        font-family: var(--default-font);
        font-size: 14px;
    }

    .journey-card p {
        margin: 0;
        color: #6b7c8d;
        font-size: 13px;
        line-height: 1.6;
    }

.services-cta {
    background: #fff;
    padding: 48px 0;
}

.services-cta-inner {
    display: flex;
    align-items: center;
    color: #fff;
    background: linear-gradient(115deg, #083b7c, #087e9f 65%, #099e89);
    box-shadow: 0 15px 35px rgba(8, 59, 124, .16);
    gap: 20px;
    padding: 27px 30px;
    border-radius: 13px;
}

.cta-icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .25);
    background: rgba(255, 255, 255, .12);
    width: 54px;
    height: 54px;
    border-radius: 12px;
    font-size: 25px;
}

.services-cta-inner h2 {
    margin-bottom: 10px;
    color: #fff;
    font-weight: 800;
    font-family: var(--default-font);
    font-size: 22px;
}

.services-cta-inner p {
    margin: 0;
    color: #e0f1fa;
    font-size: 13px;
    line-height: 1.65;
}

.btn-cta-white,
.btn-cta-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-weight: 800;
    transition: .2s;
    min-height: 38px;
    padding: 9px 13px;
    border-radius: 6px;
    font-size: 13px;
}

.footer {
    position: relative;
    overflow: hidden;
    color: #eaf3ff;
    font-family: inherit;
    font-size: 13px;
}

.footer-top {
    background: linear-gradient(135deg, #061F3A 0%, #082B4B 55%, #061F3A 100% );
    color: #E3EDF7;
    padding: 38px 0 30px;
}

.footer h4 {
    color: #ffffff !important;
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 25px;
    padding-bottom: 12px;
    position: relative;
    font-family: var(--default-font);
    font-size: 15px;
    margin-bottom: 18px;
}

.footer-description,
.footer .footer-description {
    font-size: 12px;
    line-height: 1.7;
}

.footer-links a {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: #E3EDF7;
    line-height: 1.6;
    text-decoration: none;
    overflow-wrap: anywhere;
    transition: color .25s ease;
    font-size: 12px;
}

.location-card h5 {
    color: #ffffff !important;
    font-weight: 700;
    line-height: 1.45;
    margin: 0 0 14px;
    font-family: var(--default-font);
    font-size: 14px;
}

.location-detail p {
    flex: 1;
    min-width: 0;
    color: #E3EDF7;
    line-height: 1.7;
    margin: 0;
    overflow-wrap: anywhere;
    word-break: normal;
    font-size: 13px;
}

.location-direction {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    margin-top: auto;
    padding: 10px 8px;
    border: 1px solid #42c6ef;
    border-radius: 7px;
    color: #ffffff;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    transition: background .2s ease, border-color .2s ease;
    font-size: 13px;
}

.copyright {
    background: #061F3A;
    border-top: 1px solid rgba(32, 184, 213, 0.3);
    padding: 16px 0;
    color: #D5E3F0;
    font-size: 13px;
}
@media (max-width: 480px) {

    .feature-inner {
        width: calc(100% - 24px);
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .clinic-feature {
        min-height: 56px;
        padding: 8px 6px;
        gap: 11px;
    }

    .feature-icon {
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
    }

        .feature-icon i {
            font-size: 19px;
        }

    .feature-text h3 {
        font-size: 14px;
        line-height: 1.3;
    }

    .feature-text p {
        font-size: 12px;
        line-height: 1.4;
    }
}
@media (max-width: 1199px) {
    .clinic-header .header-inner,
    .clinic-container,
    .about-hero-container,
    .clinic-stats-container,
    .feature-inner {
        width: min(1140px, calc(100% - 32px));
    }

    .clinic-header .header-inner {
        gap: 12px;
    }

    .clinic-logo {
        max-width: 310px;
    }

    .clinic-logo-icon,
    .clinic-logo-img {
        width: 72px;
        max-width: 72px;
    }

    .clinic-name {
        font-size: 21px;
    }

    .nav-link {
        padding-left: 8px;
        padding-right: 8px;
        font-size: 11.5px;
    }

    .about-visual {
        min-height: 520px;
    }
}

@media (max-width: 991px) {
    .clinic-header .header-inner,
    .clinic-container,
    .about-hero-container,
    .clinic-stats-container,
    .feature-inner {
        width: calc(100% - 28px);
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .clinic-header .header-inner {
        height: 76px;
        min-height: 76px;
    }

    .clinic-logo-icon,
    .clinic-logo-img {
        width: 62px;
        max-width: 62px;
    }

    .clinic-name {
        font-size: 19px;
    }

    .doctor-name {
        font-size: 8px;
    }

    .clinic-specialty {
        font-size: 6px;
    }

    .clinic-tagline {
        font-size: 5px;
    }

    .about-home {
        padding: 55px 0 62px;
    }

    .about-visual {
        min-height: 500px;
        margin-top: 35px;
    }

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

    .clinic-stat-item {
        min-height: 65px;
    }

    .clinic-stat-content h3 {
        font-size: 21px;
    }

    .clinic-stat-content p {
        font-size: 13px;
    }

    .clinic-feature {
        justify-content: flex-start;
        border-right: none;
        padding: 8px 18px;
    }

        .clinic-feature:nth-child(odd) {
            border-right: 1px solid #ccdeef;
        }
}

@media (max-width: 575px) {
    body {
        font-size: 14px;
    }

    .clinic-header .header-inner {
        width: calc(100% - 20px);
        height: 68px;
        min-height: 68px;
        padding: 6px 0;
    }

    .clinic-logo {
        max-width: calc(100% - 44px);
        gap: 6px;
    }

    .clinic-logo-icon,
    .clinic-logo-img {
        width: 52px;
        max-width: 52px;
    }

    .doctor-name {
        font-size: 7px;
        letter-spacing: .3px;
    }

    .clinic-name {
        font-size: 17px;
        letter-spacing: -.3px;
    }

    .clinic-specialty {
        font-size: 5px;
    }

    .clinic-tagline {
        display: none;
    }

    .about-home {
        padding: 42px 0 48px;
    }

    .about-title {
        font-size: 31px;
    }

    .about-tagline {
        font-size: 13px;
    }

    .about-intro,
    .about-description {
        font-size: 12px;
    }

    .about-visual {
        min-height: 410px;
    }

    .clinic-stats-container {
        grid-template-columns: repeat(2, 1fr);
        padding: 0 10px;
    }

    .clinic-stat-item {
        min-height: 72px;
        padding: 9px 8px;
        gap: 8px;
    }

    .clinic-stat-icon {
        width: 38px;
        height: 38px;
    }

        .clinic-stat-icon i {
            font-size: 30px;
        }

    .clinic-stat-content h3 {
        font-size: 18px;
    }

    .clinic-stat-content p {
        font-size: 9px;
        white-space: normal;
    }

    .section-padding,
    .treatment-section,
    .consult-warning,
    .patient-journey {
        padding: 48px 0;
    }

    .section-heading h2 {
        font-size: 29px;
    }

    .section-heading p {
        font-size: 12px;
    }

    .services-cta-inner {
        padding: 22px 18px;
    }

    .clinic-feature-strip {
        padding: 15px 0;
    }

    .feature-inner {
        width: calc(100% - 28px);
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .clinic-feature {
        width: 100%;
        min-height: 58px;
        justify-content: flex-start;
        gap: 12px;
        padding: 8px 10px;
        border-right: none !important;
        border-bottom: 1px solid #ccdeef;
    }

        .clinic-feature:last-child {
            border-bottom: none;
        }

    .feature-icon {
        width: 42px;
        height: 42px;
        flex: 0 0 42px;
    }

        .feature-icon i {
            font-size: 20px;
        }

    .feature-text {
        flex: 1;
        min-width: 0;
    }

        .feature-text h3 {
            font-size: 14px;
            line-height: 1.3;
            margin: 0 0 3px;
        }

        .feature-text p {
            font-size: 12px;
            line-height: 1.4;
            margin: 0;
        }
}

.treatment-card {
    min-width: 0;
    display: flex;
    height: 100%;
    flex-direction: column;
    padding: 20px 19px;
    border-radius: 9px;
    position: relative;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #d9e7f5;
    border-bottom: 3px solid #1260b6;
    box-shadow: 0 5px 20px rgba(13, 49, 88, 0.06);
    transition: transform 0.28s ease, background-color 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
}

    .treatment-card::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background: linear-gradient( 135deg, rgba(7, 88, 187, 0.055) 0%, rgba(7, 159, 169, 0.075) 100% );
        opacity: 0;
        transition: opacity 0.28s ease;
    }

    .treatment-card > * {
        position: relative;
        z-index: 1;
    }

    .treatment-card:hover {
        transform: translateY(-7px);
        background: #f4fbff;
        border-color: #78b9e8;
        border-bottom-color: #079fa9;
        box-shadow: 0 16px 36px rgba(7, 72, 135, 0.16);
    }

        .treatment-card:hover::before {
            opacity: 1;
        }

        .treatment-card:hover .treatment-icon {
            transform: translateY(-1px) scale(1.04);
            box-shadow: 0 7px 18px rgba(7, 88, 187, 0.12);
        }

    .treatment-card .treatment-icon {
        transition: transform 0.28s ease, box-shadow 0.28s ease, background-color 0.28s ease;
    }

    .treatment-card:hover .treatment-number {
        color: #9fc5e8;
    }

    .treatment-card .treatment-number {
        transition: color 0.28s ease;
    }

    .treatment-card:hover h3 {
        color: #0758bb;
    }

    .treatment-card h3 {
        margin: 0 0 11px;
        color: #0a3168;
        /*font-weight: 800;*/
        margin-bottom: 8px;
        /*font-family: var(--default-font);*/
        font-size: 15px;
        line-height: 1.35;
        transition: color 0.28s ease;
    }

    .treatment-card:hover > a,
    .treatment-card:hover .treatment-link {
        color: #079fa9;
    }

    .treatment-card > a,
    .treatment-card .treatment-link {
        transition: color 0.25s ease;
    }

        .treatment-card > a i,
        .treatment-card .treatment-link i {
            transition: transform 0.25s ease;
        }

    .treatment-card:hover > a i,
    .treatment-card:hover .treatment-link i {
        transform: translateX(4px);
    }

    .treatment-card:focus-within {
        border-color: #78b9e8;
        box-shadow: 0 16px 36px rgba(7, 72, 135, 0.16);
    }

@media (prefers-reduced-motion: reduce) {
    .treatment-card,
    .treatment-card::before,
    .treatment-card .treatment-icon,
    .treatment-card .treatment-number,
    .treatment-card h3,
    .treatment-card > a,
    .treatment-card .treatment-link,
    .treatment-card > a i,
    .treatment-card .treatment-link i {
        transition: none;
    }
}

/* =========================================================
       UROLOGY SERVICES PAGE
========================================================= */
.urology-services-page {
    background: #ffffff;
    color: #19385f;
}

    /* =========================================================
       HERO
    ========================================================= */
    .urology-services-page .services-hero {
        position: relative;
        min-height: 360px;
        display: flex;
        align-items: center;
        overflow: hidden;
        background: linear-gradient( 90deg, rgba(239, 248, 255, 0.98) 0%, rgba(239, 248, 255, 0.94) 42%, rgba(239, 248, 255, 0.35) 72%, rgba(239, 248, 255, 0.05) 100% ), url('/assets/img/heroslider/urology-services-jaipur.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

.services-hero-content {
    max-width: 650px;
    padding: 55px 0;
}

.services-hero h1 {
    margin: 0 0 10px;
    font-size: 54px;
    line-height: 1.05;
    font-weight: 700;
    color: #123c70;
    font-family: Georgia, "Times New Roman", serif;
}

    .services-hero h1 span {
        display: block;
        color: #18a875;
    }

.services-hero-description {
    max-width: 560px;
    margin: 0 0 24px;
    color: #50667d;
    font-size: 17px;
    line-height: 1.6;
}

.hero-features {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
}

.hero-feature {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 120px;
}

.hero-feature-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #e1f4f7;
    color: #087cb6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.hero-feature span {
    font-size: 12px;
    line-height: 1.3;
    font-weight: 600;
    color: #264a6e;
}

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

.services-breadcrumb {
    padding: 14px 0;
    background: #ffffff;
}

    .services-breadcrumb ol {
        display: flex;
        flex-wrap: wrap;
        list-style: none;
        gap: 8px;
        margin: 0;
        padding: 0;
        font-size: 13px;
    }

    .services-breadcrumb li {
        color: #7a8b9c;
    }

        .services-breadcrumb li + li::before {
            content: "›";
            margin-right: 8px;
            color: #9caab7;
        }

    .services-breadcrumb a {
        color: #39709c;
        text-decoration: none;
    }

/* =========================================================
       COMMON SECTION HEADING
    ========================================================= */

.services-section {
    padding: 70px 0;
}

.services-section-heading {
    max-width: 820px;
    margin: 0 auto 38px;
    text-align: center;
}

.services-eyebrow {
    display: block;
    margin-bottom: 8px;
    color: #13a47c;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.services-section-heading h2 {
    margin: 0 0 14px;
    color: #123e73;
    font-size: 39px;
    line-height: 1.2;
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 700;
}

.services-section-heading p {
    max-width: 780px;
    margin: 0 auto;
    color: #64768a;
    font-size: 15px;
    line-height: 1.7;
}

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

.medical-services {
    background: #ffffff;
}

.service-card {
    height: 100%;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e5edf3;
    border-radius: 6px;
    box-shadow: 0 5px 20px rgba(28, 75, 111, 0.08);
    transition: all 0.3s ease;
}

    .service-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 12px 28px rgba(28, 75, 111, 0.14);
    }

.service-card-image {
    height: 155px;
    overflow: hidden;
}

    .service-card-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.service-card-body {
    padding: 18px 18px 20px;
}

    .service-card-body h3 {
        margin: 0 0 8px;
        color: #143e72;
        font-size: 20px;
        line-height: 1.25;
        font-weight: 700;
    }

    .service-card-body p {
        min-height: 52px;
        margin: 0 0 13px;
        color: #63768a;
        font-size: 13px;
        line-height: 1.5;
    }

.service-points {
    list-style: none;
    padding: 0;
    margin: 0 0 13px;
}

    .service-points li {
        position: relative;
        padding-left: 21px;
        margin-bottom: 7px;
        color: #52677c;
        font-size: 12px;
        line-height: 1.35;
    }

        .service-points li::before {
            content: "\f26a";
            position: absolute;
            left: 0;
            top: 0;
            font-family: bootstrap-icons !important;
            color: #16a673;
            font-size: 13px;
        }

.service-card-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #0c6cae;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

    .service-card-link:hover {
        color: #0a4e80;
    }

/* =========================================================
       DOCTOR SECTION
    ========================================================= */

.doctor-care-section {
    position: relative;
    overflow: hidden;
    padding: 75px 0;
    background: radial-gradient( circle at 80% 50%, rgba(205, 236, 249, 0.75), transparent 36% ), #f4fbff;
}

.doctor-care-content h2 {
    margin: 0 0 16px;
    color: #123e73;
    font-size: 40px;
    line-height: 1.12;
    font-family: Georgia, "Times New Roman", serif;
}

    .doctor-care-content h2 span {
        display: block;
    }

.doctor-care-content > p {
    max-width: 580px;
    color: #62768b;
    font-size: 15px;
    line-height: 1.7;
}

.doctor-benefits {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin: 30px 0;
}

.doctor-benefit {
    text-align: center;
}

.doctor-benefit-icon {
    width: 50px;
    height: 50px;
    margin: 0 auto 9px;
    border-radius: 50%;
    background: #dff7ef;
    color: #11a67c;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
}

.doctor-benefit strong {
    display: block;
    color: #244968;
    font-size: 11px;
    line-height: 1.3;
}

.services-primary-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 23px;
    background: #0877bd;
    border-radius: 4px;
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
}

    .services-primary-btn:hover {
        background: #075e98;
        color: #ffffff;
    }

.doctor-image-wrapper {
    position: relative;
    max-width: 600px;
    margin: auto;
}

    .doctor-image-wrapper img {
        width: 100%;
        display: block;
    }

.doctor-caption {
    position: absolute;
    right: 0;
    bottom: 35px;
    max-width: 310px;
    padding: 18px 22px;
    background: rgba(255,255,255,0.96);
    border-radius: 4px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.10);
}

    .doctor-caption strong {
        display: block;
        color: #133e70;
        font-size: 15px;
        margin-bottom: 4px;
    }

    .doctor-caption span {
        color: #65798d;
        font-size: 11px;
        line-height: 1.5;
    }

/* =========================================================
       PATIENT JOURNEY
    ========================================================= */

.patient-journey-section {
    padding: 70px 0;
    background: #ffffff;
}

.journey-card {
    position: relative;
    height: 100%;
    padding: 24px 18px;
    text-align: center;
    border-radius: 5px;
    background: #ffffff;
    box-shadow: 0 5px 22px rgba(34, 82, 120, 0.08);
    border: 1px solid #edf2f5;
}

.journey-icon {
    width: 55px;
    height: 55px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: #e5f4ff;
    color: #0879bd;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.journey-number {
    display: block;
    margin-bottom: 5px;
    color: #11a579;
    font-size: 11px;
    font-weight: 700;
}

.journey-card h3 {
    margin: 0 0 7px;
    color: #173f70;
    font-size: 17px;
}

.journey-card p {
    margin: 0;
    color: #718295;
    font-size: 12px;
    line-height: 1.5;
}

/* =========================================================
       FAQ
    ========================================================= */

.services-faq-section {
    padding: 70px 0;
    background: #f8fbfd;
}

.faq-image {
    overflow: hidden;
    border-radius: 5px;
}

    .faq-image img {
        width: 100%;
        display: block;
    }

.services-faq-section h2 {
    margin: 0 0 22px;
    color: #123e73;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 35px;
    line-height: 1.2;
}

.services-faq-accordion .accordion-item {
    margin-bottom: 8px;
    border: 1px solid #e0e8ee;
    border-radius: 3px;
    overflow: hidden;
    background: #ffffff;
}

.services-faq-accordion .accordion-button {
    padding: 15px 18px;
    color: #284b6e;
    background: #ffffff;
    box-shadow: none;
    font-size: 14px;
    font-weight: 600;
}

    .services-faq-accordion .accordion-button:not(.collapsed) {
        color: #0877bd;
        background: #f5fbff;
    }

.services-faq-accordion .accordion-body {
    padding: 0 18px 17px;
    color: #687b8e;
    font-size: 13px;
    line-height: 1.6;
}

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

.services-bottom-cta {
    padding: 35px 0;
    background: linear-gradient(90deg, #0874a8, #03977c);
}

.services-bottom-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.cta-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.cta-icon {
    width: 65px;
    height: 65px;
    flex: 0 0 65px;
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 27px;
}

.cta-content span {
    display: block;
    margin-bottom: 4px;
    color: #9de6d0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
}

.cta-content h2 {
    margin: 0 0 5px;
    color: #ffffff;
    font-size: 30px;
    font-family: Georgia, "Times New Roman", serif;
}

.cta-content p {
    margin: 0;
    color: rgba(255,255,255,0.82);
    font-size: 13px;
}

.cta-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 180px;
}

    .cta-buttons a {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        min-height: 43px;
        border-radius: 3px;
        text-decoration: none;
        font-size: 13px;
        font-weight: 600;
    }

.cta-white {
    background: #ffffff;
    color: #0877a8;
}

.cta-outline {
    border: 1px solid rgba(255,255,255,0.75);
    color: #ffffff;
}

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

@media (max-width: 991px) {

    .services-hero {
        min-height: 330px;
    }

        .services-hero h1 {
            font-size: 44px;
        }

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

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

    .cta-buttons {
        width: 100%;
        flex-direction: row;
    }

        .cta-buttons a {
            flex: 1;
        }
}

@media (max-width: 767px) {

    .services-hero {
        min-height: 430px;
        background-position: 65% center;
    }

    .services-hero-content {
        padding: 40px 15px;
    }

    .services-hero h1 {
        font-size: 38px;
    }

    .services-hero-description {
        font-size: 14px;
    }

    .hero-features {
        gap: 12px;
    }

    .hero-feature {
        min-width: 105px;
    }

    .services-section,
    .doctor-care-section,
    .patient-journey-section,
    .services-faq-section {
        padding: 50px 0;
    }

    .services-section-heading h2,
    .doctor-care-content h2 {
        font-size: 32px;
    }

    .service-card-image {
        height: 190px;
    }

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

    .doctor-caption {
        position: relative;
        right: auto;
        bottom: auto;
        margin-top: -20px;
        margin-left: 20px;
        margin-right: 20px;
    }

    .cta-left {
        align-items: flex-start;
    }

    .cta-content h2 {
        font-size: 25px;
    }

    .cta-buttons {
        flex-direction: column;
    }
}

/* ============================================================
   EKANSHI CLINIC - BOOK APPOINTMENT
   Refined responsive styling
   ============================================================ */

/* Appointment-specific variables */
:root {
    --appointment-bg: #f5f9fc;
    --appointment-white: #ffffff;
    --appointment-border: #dce7f1;
    --appointment-text: #172d50;
    --appointment-muted: #66758a;
    --appointment-radius: 14px;
    --appointment-shadow: 0 10px 35px rgba(11, 55, 105, .08);
    --appointment-shadow-hover: 0 15px 40px rgba(11, 55, 105, .13);
}

/* ============================================================
   APPOINTMENT HERO
   ============================================================ */
.appointment-hero {
    position: relative;
    min-height: 350px;
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    overflow: hidden;
}

    .appointment-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.91) 38%, rgba(255,255,255,.55) 62%, rgba(255,255,255,.08) 100%);
        z-index: 1;
    }

    .appointment-hero::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 4px;
        background: linear-gradient(90deg, var(--ek-blue), var(--ek-green));
        z-index: 2;
    }

    .appointment-hero .container {
        position: relative;
        z-index: 3;
    }

.appointment-hero-content {
    position: relative;
    z-index: 2;
    max-width: 720px;
    padding: 58px 0;
}

.appointment-hero .hero-eyebrow {
    display: inline-flex;
    align-items: center;
    margin-bottom: 12px;
    color: var(--ek-green);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 1.7px;
    text-transform: uppercase;
}

    .appointment-hero .hero-eyebrow::before {
        content: "";
        width: 4px;
        height: 23px;
        margin-right: 11px;
        background: var(--ek-green);
        border-radius: 4px;
    }

.appointment-hero h1 {
    margin: 0 0 14px;
    color: var(--ek-blue);
    font-size: clamp(42px, 5vw, 62px);
    line-height: 1.04;
    font-weight: 750;
    letter-spacing: -1.8px;
}

    .appointment-hero h1 span {
        color: var(--ek-green);
    }

.appointment-hero .hero-tagline {
    max-width: 650px;
    margin: 0;
    color: var(--appointment-text);
    font-size: 17px;
    line-height: 1.65;
}

.appointment-hero .hero-description {
    margin: 10px 0 0;
    color: var(--appointment-muted);
    font-size: 14px;
    font-weight: 600;
}

.appointment-hero .breadcrumbs {
    margin-top: 22px;
}

    .appointment-hero .breadcrumbs ol {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 9px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .appointment-hero .breadcrumbs li {
        color: var(--appointment-muted);
        font-size: 14px;
    }

        .appointment-hero .breadcrumbs li + li::before {
            content: "›";
            margin-right: 9px;
            color: #8798aa;
            font-size: 19px;
        }

    .appointment-hero .breadcrumbs a {
        color: var(--ek-blue);
        text-decoration: none;
        font-weight: 600;
    }

        .appointment-hero .breadcrumbs a:hover {
            color: var(--ek-green);
        }

    .appointment-hero .breadcrumbs .current {
        color: var(--ek-green);
        font-weight: 700;
    }

/* ============================================================
   MAIN APPOINTMENT SECTION
   ============================================================ */
.book-appointment {
    position: relative;
    padding: 55px 0 75px;
    background: linear-gradient(180deg, #f7fbfe 0%, var(--appointment-bg) 100%);
}

    .book-appointment,
    .book-appointment * {
        box-sizing: border-box;
    }

/* ============================================================
   FORM WRAPPER
   ============================================================ */
.appointment-form-wrapper {
    position: relative;
    background: var(--appointment-white);
    border: 1px solid var(--appointment-border);
    border-radius: 16px;
    padding: 30px;
    box-shadow: var(--appointment-shadow);
    transition: box-shadow .3s ease;
}

    .appointment-form-wrapper:hover {
        box-shadow: var(--appointment-shadow-hover);
    }

/* ============================================================
   FORM HEADER
   ============================================================ */
.appointment-form-header {
    display: flex;
    align-items: flex-start;
    gap: 17px;
    margin-bottom: 22px;
}

.appointment-title-icon {
    flex: 0 0 54px;
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 25px;
    background: linear-gradient(135deg, var(--ek-blue), #1477d4);
    border-radius: 13px;
    box-shadow: 0 8px 20px rgba(6,59,145,.20);
}

.appointment-form-header h2 {
    margin: 0 0 5px;
    color: var(--ek-blue);
    font-size: 29px;
    line-height: 1.2;
    font-weight: 750;
}

.appointment-form-header p {
    max-width: 700px;
    margin: 0;
    color: var(--appointment-muted);
    font-size: 15px;
    line-height: 1.6;
}

/* ============================================================
   APPOINTMENT INFORMATION NOTE
   ============================================================ */
.appointment-info-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 24px;
    padding: 13px 16px;
    background: linear-gradient(135deg, #f0f7ff, #f8fbff);
    border: 1px solid #d9e9f8;
    border-left: 4px solid var(--ek-blue);
    border-radius: 9px;
}

    .appointment-info-note > i {
        flex: 0 0 auto;
        margin-top: 2px;
        color: var(--ek-blue);
        font-size: 18px;
    }

    .appointment-info-note strong {
        display: block;
        margin-bottom: 2px;
        color: var(--ek-blue);
        font-size: 13px;
        font-weight: 750;
    }

    .appointment-info-note span {
        display: block;
        color: var(--appointment-muted);
        font-size: 13px;
        line-height: 1.5;
    }

/* ============================================================
   FORM SECTIONS
   ============================================================ */
.appointment-form-section {
    margin-bottom: 18px;
    padding: 21px;
    background: linear-gradient(180deg, #fbfdff, #fafdff);
    border: 1px solid #dfebf4;
    border-radius: 12px;
}

.form-section-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 19px;
    padding-bottom: 13px;
    border-bottom: 1px solid #e5edf4;
}

    .form-section-heading .section-icon {
        flex: 0 0 39px;
        width: 39px;
        height: 39px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--ek-blue);
        font-size: 15px;
        background: #eaf4ff;
        border: 1px solid #d5e9fc;
        border-radius: 10px;
    }

    .form-section-heading h3 {
        margin: 0;
        color: var(--ek-blue);
        font-size: 18px;
        line-height: 1.25;
        font-weight: 750;
    }

    .form-section-heading p {
        margin: 3px 0 0;
        color: var(--appointment-muted);
        font-size: 12.5px;
        line-height: 1.4;
    }

/* ============================================================
   FORM FIELDS
   ============================================================ */
.appointment-form .form-group {
    margin-bottom: 3px;
}

.appointment-form label {
    display: block;
    margin-bottom: 7px;
    color: var(--appointment-text);
    font-size: 13px;
    line-height: 1.3;
    font-weight: 700;
}

    .appointment-form label span {
        color: #dc3545;
        margin-left: 2px;
    }

.input-with-icon {
    position: relative;
}

    .input-with-icon > i {
        position: absolute;
        top: 50%;
        left: 14px;
        z-index: 3;
        transform: translateY(-50%);
        color: #7890a9;
        font-size: 16px;
        pointer-events: none;
        transition: color .2s ease;
    }

.appointment-form .form-control {
    width: 100%;
    min-height: 50px;
    padding: 11px 14px;
    color: var(--appointment-text);
    background: #fff;
    border: 1px solid #d6e2ec;
    border-radius: 8px;
    font-size: 14px;
    box-shadow: none;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.appointment-form .input-with-icon .form-control {
    padding-left: 43px;
}

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

.appointment-form .form-control:hover {
    border-color: #b7cadc;
}

.appointment-form .form-control:focus {
    color: var(--appointment-text);
    background: #fff;
    border-color: var(--ek-blue);
    outline: none;
    box-shadow: 0 0 0 3px rgba(6,59,145,.08);
}

.appointment-form input[type="date"] {
    cursor: pointer;
}

.appointment-form select.form-control {
    cursor: pointer;
    appearance: auto;
}

.input-with-icon:focus-within > i {
    color: var(--ek-blue);
}

.field-help {
    display: block;
    margin-top: 5px;
    color: #8795a7;
    font-size: 11px;
    line-height: 1.4;
}

/* ============================================================
   TEXTAREA
   ============================================================ */
.textarea-wrapper {
    position: relative;
}

    .textarea-wrapper > .message-icon {
        top: 17px;
        transform: none;
    }

    .textarea-wrapper textarea.form-control {
        min-height: 125px;
        padding: 13px 14px 13px 43px;
        resize: vertical;
    }

/* ============================================================
   CONSENT
   ============================================================ */
.appointment-consent {
    margin: 4px 0 20px;
    padding: 13px 15px;
    background: #f8fafc;
    border: 1px solid #e5ebf1;
    border-radius: 8px;
}

    .appointment-consent .form-check {
        display: flex;
        align-items: flex-start;
        gap: 9px;
        margin: 0;
    }

    .appointment-consent .form-check-input {
        flex: 0 0 auto;
        width: 17px;
        height: 17px;
        margin-top: 1px;
        cursor: pointer;
    }

        .appointment-consent .form-check-input:checked {
            background-color: var(--ek-green);
            border-color: var(--ek-green);
        }

    .appointment-consent .form-check-label {
        margin: 0;
        color: #637286;
        font-size: 12px;
        line-height: 1.5;
        font-weight: 500;
        cursor: pointer;
    }

/* ============================================================
   SUBMIT AREA
   ============================================================ */
.appointment-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 3px;
}

    .appointment-submit .btn-submit {
        min-width: 235px;
        min-height: 52px;
        padding: 12px 25px;
        color: #fff;
        background: linear-gradient(90deg, #0769d7, #159b4b);
        border: 0;
        border-radius: 9px;
        font-size: 14px;
        font-weight: 750;
        box-shadow: 0 8px 22px rgba(8,104,215,.20);
        transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
    }

        .appointment-submit .btn-submit:hover {
            color: #fff;
            transform: translateY(-2px);
            filter: brightness(1.04);
            box-shadow: 0 12px 28px rgba(8,104,215,.27);
        }

        .appointment-submit .btn-submit:active {
            transform: translateY(0);
        }

    .appointment-submit .btn-call {
        min-height: 52px;
        padding: 12px 23px;
        color: var(--ek-blue);
        background: #fff;
        border: 1px solid #c8d9e9;
        border-radius: 9px;
        font-size: 14px;
        font-weight: 700;
        text-decoration: none;
        transition: background .25s ease, border-color .25s ease, color .25s ease, transform .25s ease;
    }

        .appointment-submit .btn-call:hover {
            color: #fff;
            background: var(--ek-blue);
            border-color: var(--ek-blue);
            transform: translateY(-2px);
        }

.appointment-note,
.appointment-confirmation-note {
    margin: 12px 0 0;
    color: #7b8797;
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
}

    .appointment-confirmation-note i {
        color: var(--ek-green);
        margin-right: 5px;
    }

/* ============================================================
   SIDEBAR CARDS
   ============================================================ */
.appointment-side-card {
    position: relative;
    margin-bottom: 18px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--appointment-border);
    border-radius: var(--appointment-radius);
    box-shadow: var(--appointment-shadow);
    transition: transform .25s ease, box-shadow .25s ease;
}

    .appointment-side-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--appointment-shadow-hover);
    }

    .appointment-side-card:last-child {
        margin-bottom: 0;
    }

.expert-care-card {
    /*background: linear-gradient(135deg, #eaf7ff, #f3fbff);*/
}

.expert-care-image {
    width: 100%;
    overflow: hidden;
    background: #fff;
}

    .expert-care-image img {
        display: block;
        width: 100%;
        height: auto;
        max-height: 270px;
        object-fit: cover;
    }

.expert-care-content {
    padding: 16px 18px 18px;
}

    .expert-care-content h3 {
        margin: 0 0 7px;
        color: var(--ek-blue);
        font-size: 20px;
        line-height: 1.3;
        font-weight: 750;
    }

    .expert-care-content p {
        margin: 0;
        color: var(--appointment-text);
        font-size: 13px;
        line-height: 1.5;
    }

.why-choose-card {
    padding: 18px;
    background: linear-gradient(135deg, #f0fbf3, #e8f8ee);
    border-color: #dcefe2;
}

.side-card-heading {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 17px;
}

    .side-card-heading .side-icon {
        flex: 0 0 40px;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 18px;
        background: var(--ek-green);
        border-radius: 50%;
    }

    .side-card-heading h3 {
        margin: 0;
        color: var(--ek-blue);
        font-size: 18px;
        line-height: 1.25;
        font-weight: 750;
    }

.benefit-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

    .benefit-list li {
        display: flex;
        align-items: flex-start;
        gap: 9px;
        margin-bottom: 11px;
        color: var(--appointment-text);
        font-size: 13px;
        line-height: 1.45;
    }

        .benefit-list li:last-child {
            margin-bottom: 0;
        }

    .benefit-list i {
        flex: 0 0 auto;
        margin-top: 1px;
        color: var(--ek-green);
        font-size: 16px;
    }

.contact-side-card {
    padding: 20px;
    background: linear-gradient(135deg, #eef8ff, #e7f4ff);
    border-color: #d9e9f7;
}

    .contact-side-card > p {
        margin: -2px 0 16px;
        color: #63748a;
        font-size: 13px;
        line-height: 1.5;
    }

.side-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-bottom: 14px;
    color: var(--appointment-text);
    font-size: 13px;
    line-height: 1.5;
}

    .side-contact-item:last-child {
        margin-bottom: 0;
    }

    .side-contact-item > i {
        flex: 0 0 20px;
        margin-top: 2px;
        color: var(--ek-blue);
        font-size: 17px;
    }

    .side-contact-item a {
        color: var(--ek-blue);
        text-decoration: none;
        font-weight: 700;
    }

        .side-contact-item a:hover {
            color: var(--ek-green);
        }

.side-call-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 43px;
    margin-top: 15px;
    padding: 10px 15px;
    color: #fff !important;
    background: linear-gradient(90deg, var(--ek-blue), #1477d4);
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 6px 16px rgba(6,59,145,.16);
    transition: transform .25s ease, box-shadow .25s ease;
}

    .side-call-button i {
        margin-right: 7px;
    }

    .side-call-button:hover {
        color: #fff !important;
        transform: translateY(-2px);
        box-shadow: 0 9px 20px rgba(6,59,145,.24);
    }

/* ============================================================
   ALERT / VALIDATION
   ============================================================ */
.appointment-form-wrapper .alert {
    margin-bottom: 22px;
    border-radius: 9px;
    font-size: 14px;
}

.appointment-form .form-control.is-invalid {
    border-color: #dc3545;
    box-shadow: 0 0 0 3px rgba(220,53,69,.06);
}

.appointment-form .form-control.is-valid {
    border-color: var(--ek-green);
    box-shadow: 0 0 0 3px rgba(21,148,71,.06);
}

/* ============================================================
   ACCESSIBILITY / MOTION
   ============================================================ */
.appointment-form .form-control:focus-visible,
.appointment-submit button:focus-visible,
.appointment-submit a:focus-visible,
.appointment-consent input:focus-visible,
.side-call-button:focus-visible {
    outline: 3px solid rgba(6,59,145,.18);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .appointment-side-card,
    .appointment-submit .btn-submit,
    .appointment-submit .btn-call,
    .side-call-button {
        transition: none;
    }

        .appointment-side-card:hover,
        .appointment-submit .btn-submit:hover,
        .appointment-submit .btn-call:hover,
        .side-call-button:hover {
            transform: none;
        }
}

/* ============================================================
   RESPONSIVE - TABLET
   ============================================================ */
@media (max-width: 991px) {
    .appointment-hero {
        min-height: 320px;
        background-position: center;
    }

    .appointment-hero-content {
        max-width: 620px;
        padding: 48px 0;
    }

    .appointment-hero h1 {
        font-size: 46px;
    }

    .appointment-hero .hero-tagline {
        font-size: 16px;
    }

    .book-appointment {
        padding: 45px 0 55px;
    }

    .appointment-form-wrapper {
        padding: 24px;
    }

    .expert-care-image img {
        max-height: 260px;
    }
}

/* ============================================================
   RESPONSIVE - MOBILE
   ============================================================ */
@media (max-width: 767px) {
    .appointment-hero {
        min-height: 290px;
        background-position: 68% center;
    }

        .appointment-hero::before {
            background: linear-gradient(90deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.90) 70%, rgba(255,255,255,.70) 100%);
        }

    .appointment-hero-content {
        padding: 40px 0;
    }

    .appointment-hero h1 {
        font-size: 38px;
        letter-spacing: -.8px;
    }

    .appointment-hero .hero-tagline {
        font-size: 15px;
        line-height: 1.55;
    }

    .appointment-hero .hero-description {
        font-size: 13px;
    }

    .book-appointment {
        padding: 32px 0 45px;
    }

    .appointment-form-wrapper {
        padding: 17px;
        border-radius: 12px;
    }

    .appointment-form-header {
        gap: 11px;
        margin-bottom: 17px;
    }

    .appointment-title-icon {
        flex-basis: 45px;
        width: 45px;
        height: 45px;
        font-size: 20px;
    }

    .appointment-form-header h2 {
        font-size: 23px;
    }

    .appointment-form-header p {
        font-size: 13px;
    }

    .appointment-info-note {
        padding: 11px 12px;
        margin-bottom: 17px;
    }

        .appointment-info-note span {
            font-size: 12px;
        }

    .appointment-form-section {
        padding: 15px;
        margin-bottom: 14px;
    }

    .form-section-heading {
        gap: 10px;
        margin-bottom: 16px;
        padding-bottom: 11px;
    }

        .form-section-heading .section-icon {
            flex-basis: 34px;
            width: 34px;
            height: 34px;
            font-size: 11px;
        }

        .form-section-heading h3 {
            font-size: 16px;
        }

        .form-section-heading p {
            font-size: 11.5px;
        }

    .appointment-form .form-control {
        min-height: 48px;
        font-size: 14px;
    }

    .appointment-submit {
        flex-direction: column;
        align-items: stretch;
        gap: 9px;
    }

        .appointment-submit .btn-submit,
        .appointment-submit .btn-call {
            width: 100%;
            min-width: 0;
            min-height: 50px;
        }

    .expert-care-content {
        padding: 16px 18px 18px;
    }

        .expert-care-content h3 {
            font-size: 20px;
        }

    .why-choose-card,
    .contact-side-card {
        padding: 18px;
    }

    .side-card-heading h3 {
        font-size: 18px;
    }
}

/* ============================================================
   RESPONSIVE - SMALL MOBILE
   ============================================================ */
@media (max-width: 480px) {
    .appointment-hero {
        min-height: 270px;
        background-position: 72% center;
    }

    .appointment-hero-content {
        padding: 34px 0;
    }

    .appointment-hero .hero-eyebrow {
        font-size: 12px;
        letter-spacing: 1.3px;
    }

    .appointment-hero h1 {
        font-size: 32px;
        letter-spacing: -.5px;
    }

    .appointment-hero .hero-tagline {
        font-size: 14px;
    }

    .appointment-hero .hero-description {
        display: none;
    }

    .appointment-form-wrapper {
        padding: 13px;
        border-radius: 10px;
    }

    .appointment-form-section {
        padding: 12px;
        border-radius: 9px;
    }

    .form-section-heading .section-icon {
        flex-basis: 31px;
        width: 31px;
        height: 31px;
    }

    .form-section-heading h3 {
        font-size: 15px;
    }

    .form-section-heading p {
        display: none;
    }

    .appointment-form .form-control {
        min-height: 47px;
    }

    .appointment-form .input-with-icon .form-control {
        padding-left: 40px;
    }

    .appointment-form .input-with-icon > i {
        left: 13px;
        font-size: 15px;
    }

    .field-help {
        font-size: 10px;
    }

    .side-contact-item {
        font-size: 12px;
    }
}


/* ==========================================
   GALLERY PAGE
========================================== */
.ekanshi-gallery {
    padding: 80px 0;
    background: #f8fafc;
}


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

.gallery-card {
    position: relative;
    overflow: hidden;
    height: 300px;
    border-radius: 12px;
    background: #e9eef3;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    cursor: pointer;
}


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

.gallery-image {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

    .gallery-image img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        transition: transform 0.55s ease, filter 0.4s ease;
    }


/* Slight zoom when hovering */

.gallery-card:hover .gallery-image img {
    transform: scale(1.06);
}


/* =========================================================
   DARK HOVER OVERLAY
========================================================= */

.gallery-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    padding: 30px;
    background: linear-gradient( to top, rgba(3, 25, 55, 0.92) 0%, rgba(3, 25, 55, 0.72) 38%, rgba(3, 25, 55, 0.20) 75%, rgba(3, 25, 55, 0.00) 100% );
    opacity: 0;
    transition: opacity 0.35s ease;
}


/* Show overlay on hover */

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


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

.gallery-content {
    width: 100%;
    transform: translateY(25px);
    opacity: 0;
    transition: opacity 0.4s ease, transform 0.4s ease;
}


/* Animate content */

.gallery-card:hover .gallery-content {
    opacity: 1;
    transform: translateY(0);
}


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

.gallery-category {
    display: inline-block;
    margin-bottom: 7px;
    color: #65c76a;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}


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

.gallery-content h3 {
    margin: 0 0 8px;
    color: #ffffff;
    font-size: 23px;
    font-weight: 700;
    line-height: 1.25;
    text-shadow: 0 2px 5px rgba(0,0,0,.25);
}


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

.gallery-content p {
    max-width: 90%;
    margin: 0;
    color: rgba(255,255,255,.90);
    font-size: 14px;
    line-height: 1.6;
}


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

.gallery-zoom {
    position: absolute;
    left: 25px;
    bottom: 25px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255,255,255,.95);
    color: #0759bd;
    font-size: 20px;
    text-decoration: none;
    box-shadow: 0 5px 18px rgba(0,0,0,.25);
    transform: scale(.7);
    opacity: 0;
    transition: opacity .35s ease, transform .35s ease, background .3s ease, color .3s ease;
}


/* Show zoom button */

.gallery-card:hover .gallery-zoom {
    opacity: 1;
    transform: scale(1);
}


/* Zoom hover */

.gallery-zoom:hover {
    color: #ffffff;
    background: #20a65a;
    transform: scale(1.08) !important;
}


/* =========================================================
   REMOVE OLD CARD CONTENT
========================================================= */

.gallery-card-content {
    display: none !important;
}


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

.gallery-item {
    margin-bottom: 30px;
}


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

@media (max-width: 991px) {

    .gallery-card {
        height: 280px;
    }
}

@media (max-width: 767px) {

    .gallery-card {
        height: 270px;
    }

    /*
       On mobile there is no mouse hover.
       Therefore show a subtle overlay/content.
    */

    .gallery-overlay {
        opacity: 1;
        padding: 22px;
        background: linear-gradient( to top, rgba(3, 25, 55, 0.90), rgba(3, 25, 55, 0.05) );
    }

    .gallery-content {
        opacity: 1;
        transform: translateY(0);
    }

        .gallery-content h3 {
            font-size: 20px;
        }

        .gallery-content p {
            font-size: 13px;
        }

    .gallery-zoom {
        opacity: 1;
        transform: scale(.9);
    }
}

.ekanshi-gallery {
    position: relative;
    padding: 82px 0 90px;
    background: #ffffff;
}


/* =========================================================
   INTRODUCTION AREA
========================================================= */

.gallery-intro {
    max-width: 950px;
    margin: 0 auto;
    text-align: center;
}


/* Small label */

.gallery-eyebrow {
    display: inline-block;
    margin-bottom: 14px;
    color: #2ca653;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
}

/* =========================================================
   MAIN HEADING
========================================================= */
.gallery-intro h2 {
    max-width: 900px;
    margin: 0 auto;
    color: #092f70;
    font-size: clamp(32px, 4vw, 46px);
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -0.5px;
}


    /* Green part of heading */

    .gallery-intro h2 span {
        color: #2ca653;
    }

/* =========================================================
   DECORATIVE LINE
========================================================= */
.gallery-title-line {
    position: relative;
    width: 70px;
    height: 3px;
    margin: 20px auto 20px;
    border-radius: 10px;
    background: linear-gradient( 90deg, #0759bd, #2ca653 );
}

/* =========================================================
   INTRO DESCRIPTION
========================================================= */
.gallery-intro p {
    max-width: 780px;
    margin: 0 auto;
    color: #667085;
    font-size: 15px;
    line-height: 1.8;
}

/* =========================================================
   FILTER AREA
========================================================= */
.gallery-filter-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 38px;
    margin-bottom: 52px;
}

/* =========================================================
   FILTER BUTTONS
========================================================= */
.gallery-filters {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0;
    margin-top: 38px;
    margin-bottom: 52px;
    list-style: none;
}

.gallery-filters li {
    padding: 10px 20px;
    border: 1px solid #d5dbe2;
    border-radius: 30px;
    background: #ffffff;
    color: #26384f;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all .3s ease;
}

/* Hover */
.gallery-filters li:hover {
    border-color: #2ca653;
    color: #2ca653;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(44,166,83,.10);
}

/* Active */
.gallery-filters li.filter-active {
    border-color: #2ca653;
    background: #2ca653;
    color: #ffffff;
    box-shadow: 0 7px 18px rgba(44,166,83,.20);
}

/**********Patient Guide**********/
.quick-guide {
    margin-top: -28px;
    position: relative;
    z-index: 5;
}

.quick-guide-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.quick-guide-card {
    background: #fff;
    border: 1px solid #e1edf7;
    border-radius: 12px;
    padding: 15px 16px 14px;
    box-shadow: var(--shadow);
    min-height: 106px;
    transition: .25s ease;
}

    .quick-guide-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 30px rgba(0,75,145,.15);
    }

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

.quick-guide-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #edf7ff;
    color: var(--blue);
    display: grid;
    place-items: center;
    font-size: 21px;
}

.quick-arrow {
    color: #1582d6;
    font-size: 18px;
}

.quick-guide-card h3 {
    margin: 7px 0 2px;
    font-size: 15px;
    color: #07509b;
    font-weight: 700;
}

.quick-guide-card p {
    margin: 0;
    color: #617286;
    font-size: 13px;
    line-height: 1.35;
}

/* ================= COMMON SECTIONS ================= */
.patient-section {
    padding: 42px 0;
}

.section-soft {
    background: linear-gradient(180deg, #f0faff 0%, #f8fcff 100%);
}

.section-label {
    display: block;
    color: #138a63;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.section-title {
    margin: 0;
    color: #064783;
    font-size: clamp(25px, 2.6vw, 34px);
    line-height: 1.12;
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 800;
}

.section-description {
    max-width: 720px;
    margin: 8px auto 23px;
    color: #6c7b8d;
    font-size: 12px;
}

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

/* ================= TREATMENT CARDS ================= */
.treatment-section {
    background: linear-gradient(180deg, #eefaff, #f7fcff);
    border: 1px solid #e2f1f9;
    border-radius: 14px;
    margin: 12px auto 0;
    padding: 18px 10px 16px;
}

    .treatment-section .section-description {
        margin-bottom: 18px;
    }

.treatment-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    align-items: stretch;
}

.treatment-card {
    background: #fff;
    border: 1px solid #d7e8f5;
    border-radius: 10px;
    padding: 13px 9px 10px;
    /*height: 150px;*/
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0 3px 10px rgba(21,100,160,.055);
}

.treatment-icon {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    display: grid;
    place-items: center;
    margin-bottom: 3px;
}

    .treatment-icon i {
        font-size: 38px;
        line-height: 1;
        color: #e94646;
    }

.treatment-card:nth-child(2) .treatment-icon i {
    color: #e78345;
}

.treatment-card:nth-child(3) .treatment-icon i {
    color: #3e8fd7;
}

.treatment-card:nth-child(4) .treatment-icon i {
    color: #2b76c9;
}

.treatment-card:nth-child(5) .treatment-icon i {
    color: #7656bf;
}

.treatment-card:nth-child(6) .treatment-icon i {
    color: #d53e55;
}

.treatment-card h3 {
    width: 100%;
    margin: 2px 0 4px;
    font-family: Georgia, "Times New Roman", serif;
    color: #0754a0;
    font-size: 21px;
    font-weight:700;
    line-height: 1.2;
}

.treatment-card p {
    width: 100%;
    /*margin: 0;*/
    color: #6c7c8e;
    font-size: 13px;
    /*line-height: 1.3;*/
    flex: 1;
}

.round-link {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    border-radius: 50%;
    background: #0b72d4;
    color: #fff;
    display: grid;
    place-items: center;
    margin-top: 6px;
    font-size: 9px;
}

/* ================= JOURNEY ================= */
.journey-section {
    padding-top: 42px;
    padding-bottom: 38px;
}

    .journey-section .section-description {
        margin-bottom: 29px;
    }

.journey-line {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    position: relative;
    margin-top: 0;
    padding-top: 0;
    min-height: 126px;
}

    .journey-line::before {
        content: "";
        position: absolute;
        left: 7.8%;
        right: 7.8%;
        top: 37px;
        border-top: 2px solid #8fc8f2;
        z-index: 0;
    }

.journey-step {
    position: relative;
    z-index: 1;
    min-width: 0;
    text-align: center;
    padding: 0 6px;
}

.journey-number {
    position: absolute;
    top: 18px;
    left: 20%;
    transform: translateX(-50%);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #0871d1;
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 15px;
    font-weight: 800;
    border: 4px solid #fff;
    box-shadow: 0 2px 9px rgba(0,82,160,.18);
}

.journey-icon {
    width: 46px;
    height: 46px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 3px 12px rgba(15,90,145,.12);
    display: grid;
    place-items: center;
    margin: 0 auto;
    color: #0b62ae;
    font-size: 19px;
    border: 1px solid #edf5fa;
}

.journey-step h3 {
    margin: 10px 0 2px;
    color: #07519a;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
}

.journey-step p {
    max-width: 145px;
    margin: 0 auto;
    color: #687a8e;
    font-size: 12px;
    line-height: 1.3;
}

/* ================= CHECKLIST ================= */
.checklist-section {
    background: linear-gradient(180deg, #effaff 0%, #f6fcff 100%);
}

.checklist-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.checklist-card,
.guardian-card,
.question-card,
.discharge-card {
    background: #fff;
    border: 1px solid #e0edf6;
    border-radius: 12px;
    box-shadow: 0 5px 17px rgba(18, 90, 145,.07);
}

.checklist-card {
    padding: 17px 18px;
}

.checklist-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 9px;
}

.checklist-icon {
    width: 35px;
    height: 35px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: #eaf4ff;
    color: var(--blue);
    font-size: 18px;
    flex: 0 0 auto;
}

.green .checklist-icon {
    background: #e8f9ed;
    color: #1caa62;
}

.orange .checklist-icon {
    background: #fff4e5;
    color: #e58a1c;
}

.checklist-heading h3 {
    margin: 0;
    color: #084f95;
    font-size: 16px;
    font-weight: 700;
}

.checklist {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .checklist li {
        position: relative;
        padding-left: 17px;
        margin: 5px 0;
        color: #65768a;
        font-size: 13px;
        line-height: 1.35;
    }

        .checklist li::before {
            content: "\f26a";
            font-family: bootstrap-icons;
            position: absolute;
            left: 0;
            top: 0;
            color: #19a757;
            font-size: 10px;
        }

/* ================= ADMISSION ================= */
.admission-layout {
    display: grid;
    grid-template-columns: 1fr .9fr;
    gap: 35px;
    align-items: center;
}

.admission-list > div {
    display: flex;
    gap: 12px;
    margin: 11px 0;
}

.admission-list .number {
    width: 29px;
    height: 29px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #0871d1;
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 12px;
}

.admission-list h4 {
    margin: 0 0 1px;
    color: #07509a;
    font-size: 13px;
    font-weight: 700;
}

.admission-list p {
    margin: 0;
    color: #6c7c8e;
    font-size: 13px;
}

.admission-visual {
    min-height: 270px;
    border-radius: 15px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(8,103,182,.17), rgba(12,168,117,.08)), url('/assets/img/patient-guide/admission-day.jpg') center/cover no-repeat, linear-gradient(135deg, #e9f7ff, #dff4f1);
    border: 1px solid #d9ebf6;
    box-shadow: var(--shadow);
}

.admission-label {
    position: absolute;
    left: 18px;
    top: 18px;
    background: #fff;
    border-radius: 10px;
    padding: 12px 15px;
    box-shadow: 0 5px 18px rgba(0,60,120,.13);
    color: #07519b;
    font-weight: 800;
    font-size: 12px;
}

    .admission-label span {
        display: block;
        font-weight: 500;
        margin-top: 2px;
    }

.admission-info-box {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 14px;
    background: rgba(255,255,255,.96);
    border: 1px solid #d9ebf6;
    border-radius: 12px;
    padding: 13px 15px;
    display: flex;
    gap: 10px;
}

    .admission-info-box i {
        color: #0b70d1;
        font-size: 19px;
    }

    .admission-info-box strong {
        display: block;
        color: #07519b;
        font-size: 13px;
    }

    .admission-info-box span {
        display: block;
        color: #65768a;
        font-size: 13px;
        line-height: 1.35;
        margin-top: 2px;
    }

/* ================= GUARDIAN ================= */
.guardian-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.guardian-card {
    padding: 17px 20px;
}

    .guardian-card h3 {
        margin: 0 0 9px;
        color: #07519b;
        font-size: 13px;
    }

.guardian-points {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .guardian-points li {
        padding: 5px 0 5px 20px;
        border-top: 1px dashed #e3edf4;
        color: #68798b;
        font-size: 13px;
        position: relative;
    }

        .guardian-points li:first-child {
            border-top: 0;
        }

        .guardian-points li::before {
            content: "\f26a";
            font-family: bootstrap-icons;
            position: absolute;
            left: 0;
            color: #19a757;
        }

/* ================= QUESTIONS / DISCHARGE ================= */
.questions-discharge {
    background: #fff;
}

.two-column {
    display: grid;
    grid-template-columns: 1.03fr .97fr;
    gap: 30px;
    align-items: start;
}

.question-list {
    display: grid;
    gap: 5px;
}

.faq-btn {
    width: 100%;
    border: 1px solid #e0edf5;
    background: #f5fbff;
    color: #30526f;
    padding: 9px 12px;
    border-radius: 7px;
    text-align: left;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .faq-btn i {
        color: #0872d3;
        transition: transform .2s;
    }

    .faq-btn.open i {
        transform: rotate(45deg);
    }

.faq-answer {
    display: none;
    background: #fff;
    border: 1px solid #e0edf5;
    border-top: 0;
    padding: 9px 12px;
    margin-top: -5px;
    border-radius: 0 0 7px 7px;
    color: #68798b;
    font-size: 13px;
}

    .faq-answer.open {
        display: block;
    }

.discharge-wrap {
    background: linear-gradient(180deg, #effaff, #f7fcff);
    border: 1px solid #dceef7;
    border-radius: 13px;
    padding: 17px;
}

.discharge-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.discharge-card {
    text-align: center;
    padding: 14px 9px;
    box-shadow: none;
}

    .discharge-card > i {
        font-size: 40px;
        color: #0a8f7a;
    }

    .discharge-card h4 {
        margin: 5px 0 2px;
        color: #07519b;
        font-size: 14px;
        font-weight: 700;
    }

    .discharge-card p {
        margin: 0;
        color: #6a7b8d;
        font-size: 13px;
        line-height: 1.35;
    }

/* ================= WARNING / FINAL CHECK ================= */
.warning-final {
    padding: 10px 0 8px;
}

.warning-final-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    align-items: stretch;
}

/* -------------------------
   WARNING BOX
   ------------------------- */
.warning-box {
    background: #FBF9F9;
    border: 1px solid #FBDAD9;
    border-radius: 10px;
    padding: 12px 16px;
}

.warning-points {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 25px;
    row-gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}

    .warning-points li {
        display: flex;
        align-items: flex-start;
        gap: 6px;
        margin: 0;
        padding: 0;
        color: #555;
        font-size: 12.5px;
        line-height: 1.4;
    }

        .warning-points li i {
            color: #a80025;
            font-size: 12px;
            margin-top: 2px;
            flex-shrink: 0;
        }
/* -------------------------
   FINAL CHECK BOX
   ------------------------- */
.final-check-box {
    background: #f5fff9;
    border: 1px solid #8bd9ad;
    border-radius: 10px;
    padding: 12px 16px;
}

    .final-check-box .section-label {
        display: block;
        margin-bottom: 4px;
        color: #008f68;
        font-size: 13px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .3px;
    }

    .final-check-box h2 {
        margin: 0 0 6px;
        color: #064b8f;
        font-size: 15px;
        font-weight: 700;
        line-height: 1.25;
    }

    .final-check-box p {
        margin: 0 0 8px;
        color: #555;
        font-size: 12.5px;
        line-height: 1.45;
    }

.final-check-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px 14px;
}

    .final-check-list div {
        display: flex;
        align-items: center;
        gap: 5px;
        color: #555;
        font-size: 12px;
        line-height: 1.3;
        white-space: nowrap;
    }

    .final-check-list i {
        color: #07966f;
        font-size: 13px;
        flex-shrink: 0;
    }


/* =========================================================
   CTA
   ========================================================= */
.patient-guide-cta {
    padding: 8px 0 !important;
    background: linear-gradient( 90deg, #07539d 0%, #0879c9 100% ) !important;
}

    .patient-guide-cta .cta-content {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        min-height: 58px !important;
        padding: 7px 14px !important;
        gap: 20px;
    }

        .patient-guide-cta .cta-content > div:first-child {
            flex: 1;
        }

        .patient-guide-cta .cta-content h2 {
            margin: 0 0 3px !important;
            color: #ffffff !important;
            font-size: 16px !important;
            font-weight: 700;
            line-height: 1.2;
        }

        .patient-guide-cta .cta-content p {
            margin: 0 !important;
            color: #ffffff !important;
            font-size: 12px !important;
            line-height: 1.3;
        }

    .patient-guide-cta .cta-buttons {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
        flex-shrink: 0;
    }

    .patient-guide-cta .cta-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px;
        min-width: 118px;
        height: 38px;
        padding: 8px 14px;
        border-radius: 4px;
        font-size: 12px;
        font-weight: 700;
        text-decoration: none;
        transition: all .25s ease;
    }

        .patient-guide-cta .cta-btn:first-child {
            background: #ffffff !important;
            border: 1px solid #ffffff !important;
            color: #07539d !important;
        }

            .patient-guide-cta .cta-btn:first-child:hover {
                background: #f2f7fc !important;
                border-color: #f2f7fc !important;
                color: #06447e !important;
                transform: translateY(-1px);
            }

        .patient-guide-cta .cta-btn.secondary {
            background: transparent !important;
            border: 1px solid rgba(255,255,255,.9) !important;
            color: #ffffff !important;
        }

            .patient-guide-cta .cta-btn.secondary:hover {
                background: #ffffff !important;
                border-color: #ffffff !important;
                color: #07539d !important;
                transform: translateY(-1px);
            }

    /* CTA heading */
    .patient-guide-cta .cta-content h2 {
        color: #ffc107 !important;
        margin: 0 0 3px !important;
        font-size: 16px !important;
        line-height: 1.2 !important;
    }

    .patient-guide-cta .cta-content p {
        margin: 0 !important;
        font-size: 12px !important;
        line-height: 1.3 !important;
    }

/* -------------------------
   CTA BUTTONS
   ------------------------- */

.cta-buttons {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-shrink: 0;
}

.cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 118px;
    height: 38px;
    padding: 7px 13px;
    border: 1px solid #fff;
    border-radius: 4px;
    background: #fff;
    color: #07539d;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    transition: all .2s ease;
}

    .cta-btn:hover {
        background: #f2f7fc;
        color: #06447e;
        text-decoration: none;
    }

    .cta-btn.secondary {
        background: transparent;
        color: #fff;
    }

        .cta-btn.secondary:hover {
            background: rgba(255,255,255,.12);
            color: #fff;
        }


/* =========================================================
   HEALTH TIPS
   ========================================================= */
.health-tips {
    padding: 40px 0px !important;
    background: #ffffff !important;
}

.health-tips-title {
    margin: 0 0 7px !important;
    text-align: center;
    color: #07539d !important;
    font-size: 15px !important;
    font-weight: 700;
    line-height: 1.2;
}

    .health-tips-title i {
        color: #ffc107 !important;
        margin-right: 5px;
    }

.health-tip-list {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100%;
    gap: 10px;
}

.health-tip {
    display: flex !important;
    align-items: center !important;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.health-tip-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border-radius: 50% !important;
    background: #edf8f3 !important;
    border: 1px solid #dcefe7;
    color: #00a878 !important;
    font-size: 20px !important;
    line-height: 1 !important;
}

.health-tip span {
    display: block;
    color: #4d4d4d !important;
    font-size: 12px !important;
    font-weight: 600;
    line-height: 1.2;
}

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

@media (max-width: 991px) {

    .warning-final-grid {
        grid-template-columns: 1fr;
    }

    .health-tip-list {
        justify-content: center;
        flex-wrap: wrap;
    }

    .health-tip {
        min-width: 150px;
    }
}


@media (max-width: 768px) {

    .warning-final {
        padding: 8px 0;
    }

    .warning-points {
        grid-template-columns: 1fr;
    }

    .final-check-list {
        grid-template-columns: 1fr 1fr;
    }

    .cta-content {
        flex-direction: column;
        align-items: stretch;
        text-align: left;
    }

    .cta-buttons {
        justify-content: flex-start;
    }

    .cta-btn {
        flex: 1;
    }
}


@media (max-width: 480px) {

    .warning-box,
    .final-check-box {
        padding: 12px;
    }

    .final-check-list {
        grid-template-columns: 1fr;
    }

    .cta-buttons {
        flex-direction: column;
        width: 100%;
    }

    .cta-btn {
        width: 100%;
    }

    .health-tip-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .health-tip {
        min-width: 0;
    }
}
/* ============================================================
   PATIENT GUIDE - FINAL RESPONSIVE OVERRIDES
   Append this block AFTER the existing Patient Guide CSS.
   Designed for desktop, tablet and mobile widths.
   ============================================================ */

/* ---------- Global responsive safety ---------- */
#patient-guide,
#patient-guide * {
    box-sizing: border-box;
}

#patient-guide {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

    #patient-guide img,
    #patient-guide video,
    #patient-guide iframe {
        max-width: 100%;
        height: auto;
    }

    #patient-guide .container {
        width: 100%;
    }

/* ============================================================
   LARGE TABLET / SMALL DESKTOP
   ============================================================ */
@media (max-width: 1199px) {

    #patient-guide .patient-section {
        padding: 34px 0;
    }

    #patient-guide .quick-guide-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    #patient-guide .treatment-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
    }

    #patient-guide .journey-line {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        row-gap: 28px;
        min-height: 0;
    }

        #patient-guide .journey-line::before {
            display: none;
        }

    #patient-guide .journey-number {
        left: 50%;
        top: 18px;
    }

    #patient-guide .checklist-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #patient-guide .admission-layout {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }

    #patient-guide .guardian-grid {
        grid-template-columns: 1fr 1fr;
    }

    #patient-guide .two-column {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    #patient-guide .warning-final-grid {
        grid-template-columns: 1fr 1fr;
    }

    #patient-guide .health-tip-list {
        gap: 8px;
    }

    #patient-guide .health-tip {
        gap: 6px;
    }

        #patient-guide .health-tip span {
            font-size: 11.5px !important;
        }
}

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

    #patient-guide .patient-section {
        padding: 30px 0;
    }

    #patient-guide .section-title {
        font-size: clamp(24px, 4vw, 30px);
    }

    #patient-guide .quick-guide-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #patient-guide .treatment-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #patient-guide .journey-line {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 30px;
    }

    #patient-guide .checklist-grid {
        grid-template-columns: 1fr;
    }

    #patient-guide .admission-layout {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    #patient-guide .admission-visual {
        min-height: 260px;
    }

    #patient-guide .guardian-grid {
        grid-template-columns: 1fr;
    }

    #patient-guide .two-column {
        grid-template-columns: 1fr;
    }

    #patient-guide .warning-final-grid {
        grid-template-columns: 1fr;
    }

    #patient-guide .warning-box,
    #patient-guide .final-check-box {
        width: 100%;
    }

    #patient-guide .patient-guide-cta .cta-content {
        gap: 15px !important;
    }

    #patient-guide .health-tip-list {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 12px 20px !important;
    }

    #patient-guide .health-tip {
        flex: 0 0 calc(33.333% - 20px);
    }
}

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

    #patient-guide .patient-section {
        padding: 26px 0;
    }

    #patient-guide .section-description {
        margin: 7px auto 18px;
        font-size: 12px;
        line-height: 1.5;
    }

    #patient-guide .section-title {
        font-size: 25px;
        line-height: 1.15;
    }

    /* Quick guide: 2 columns */
    #patient-guide .quick-guide {
        margin-top: -18px;
    }

    #patient-guide .quick-guide-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    #patient-guide .quick-guide-card {
        min-height: 0;
        padding: 12px;
    }

    #patient-guide .quick-guide-icon {
        width: 36px;
        height: 36px;
        font-size: 19px;
    }

    #patient-guide .quick-guide-card h3 {
        font-size: 14px;
    }

    #patient-guide .quick-guide-card p {
        font-size: 12px;
        line-height: 1.4;
    }

    /* Treatment cards: 2 columns */
    #patient-guide .treatment-section {
        margin-top: 8px;
        padding: 18px 10px;
    }

    #patient-guide .treatment-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    #patient-guide .treatment-card {
        padding: 12px 9px 10px;
    }

    #patient-guide .treatment-icon {
        width: 46px;
        height: 46px;
        flex-basis: 46px;
    }

        #patient-guide .treatment-icon i {
            font-size: 32px;
        }

    #patient-guide .treatment-card h3 {
        font-size: 13px;
    }

    #patient-guide .treatment-card p {
        font-size: 12px;
        line-height: 1.35;
    }

    /* Journey: 2 columns */
    #patient-guide .journey-section {
        padding-top: 28px;
        padding-bottom: 28px;
    }

    #patient-guide .journey-line {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 24px;
    }

    #patient-guide .journey-step {
        padding: 0 5px;
    }

    #patient-guide .journey-icon {
        width: 42px;
        height: 42px;
        font-size: 17px;
    }

    #patient-guide .journey-number {
        width: 32px;
        height: 32px;
        font-size: 13px;
        top: 16px;
        left: 28%;
    }

    #patient-guide .journey-step h3 {
        font-size: 12.5px;
        margin-top: 8px;
    }

    #patient-guide .journey-step p {
        max-width: 155px;
        font-size: 11.5px;
        line-height: 1.35;
    }

    /* Checklist */
    #patient-guide .checklist-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    #patient-guide .checklist-card {
        padding: 14px;
    }

    /* Admission */
    #patient-guide .admission-layout {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    #patient-guide .admission-visual {
        min-height: 230px;
    }

    #patient-guide .admission-label {
        left: 12px;
        top: 12px;
    }

    #patient-guide .admission-info-box {
        left: 10px;
        right: 10px;
        bottom: 10px;
    }

    /* Guardian */
    #patient-guide .guardian-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    /* Questions / discharge */
    #patient-guide .two-column {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    #patient-guide .discharge-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    /* Warning / final check */
    #patient-guide .warning-final {
        padding: 8px 0;
    }

    #patient-guide .warning-final-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    #patient-guide .warning-box,
    #patient-guide .final-check-box {
        padding: 12px;
    }

    #patient-guide .warning-points {
        grid-template-columns: 1fr;
        row-gap: 5px;
    }

    #patient-guide .final-check-list {
        grid-template-columns: 1fr 1fr;
        gap: 6px 10px;
    }

        #patient-guide .final-check-list div {
            white-space: normal;
            font-size: 11.5px;
        }

    /* CTA */
    #patient-guide .patient-guide-cta {
        padding: 10px 0 !important;
    }

        #patient-guide .patient-guide-cta .cta-content {
            flex-direction: column !important;
            align-items: stretch !important;
            gap: 10px !important;
            min-height: 0 !important;
            padding: 8px 12px !important;
            text-align: left !important;
        }

            #patient-guide .patient-guide-cta .cta-content h2 {
                color: #ffffff !important;
                font-size: 16px !important;
                line-height: 1.25 !important;
            }

                #patient-guide .patient-guide-cta .cta-content h2 i {
                    color: #ffc107 !important;
                    font-size: 17px;
                }

            #patient-guide .patient-guide-cta .cta-content p {
                color: #ffffff !important;
                font-size: 12px !important;
                line-height: 1.4 !important;
            }

        #patient-guide .patient-guide-cta .cta-buttons {
            display: grid !important;
            grid-template-columns: 1fr 1fr;
            width: 100% !important;
            gap: 8px !important;
        }

        #patient-guide .patient-guide-cta .cta-btn {
            width: 100% !important;
            min-width: 0 !important;
            height: 40px;
            padding: 8px 9px;
            font-size: 11.5px;
        }

    /* Health tips */
    #patient-guide .health-tips {
        padding: 10px 0 12px !important;
    }

    #patient-guide .health-tips-title {
        font-size: 13px !important;
        margin-bottom: 9px !important;
    }

    #patient-guide .health-tip-list {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px !important;
    }

    #patient-guide .health-tip {
        width: 100%;
        flex: none !important;
        min-width: 0 !important;
    }

    #patient-guide .health-tip-icon {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        font-size: 18px !important;
    }

    #patient-guide .health-tip span {
        font-size: 11.5px !important;
    }
}

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

    #patient-guide .container {
        padding-left: 12px;
        padding-right: 12px;
    }

    #patient-guide .patient-section {
        padding: 22px 0;
    }

    #patient-guide .quick-guide-grid {
        grid-template-columns: 1fr;
    }

    #patient-guide .quick-guide-card {
        min-height: 0;
    }

    #patient-guide .treatment-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    #patient-guide .treatment-card {
        padding: 10px 7px;
    }

        #patient-guide .treatment-card p {
            font-size: 11.5px;
        }

    #patient-guide .journey-line {
        grid-template-columns: 1fr;
        row-gap: 18px;
    }

    #patient-guide .journey-step {
        display: grid;
        grid-template-columns: 48px 1fr;
        column-gap: 10px;
        align-items: start;
        text-align: left;
    }

    #patient-guide .journey-icon {
        grid-row: 1 / span 3;
        margin: 0;
    }

    #patient-guide .journey-number {
        position: absolute;
        top: -3px;
        left: 31px;
        transform: none;
        width: 27px;
        height: 27px;
        border-width: 3px;
        font-size: 11px;
    }

    #patient-guide .journey-step h3,
    #patient-guide .journey-step p {
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }

    #patient-guide .journey-step h3 {
        margin-top: 0;
    }

    #patient-guide .journey-step p {
        margin-top: 2px;
    }

    #patient-guide .admission-visual {
        min-height: 220px;
    }

    #patient-guide .discharge-grid {
        grid-template-columns: 1fr;
    }

    #patient-guide .final-check-list {
        grid-template-columns: 1fr;
    }

    #patient-guide .patient-guide-cta .cta-buttons {
        grid-template-columns: 1fr;
    }

    #patient-guide .health-tip-list {
        grid-template-columns: 1fr 1fr;
        gap: 9px 8px !important;
    }

    #patient-guide .health-tip {
        gap: 6px;
    }

    #patient-guide .health-tip-icon {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        font-size: 17px !important;
    }

    #patient-guide .health-tip span {
        font-size: 11px !important;
    }
}

/* ============================================================
   VERY SMALL MOBILE - 400px and below
   ============================================================ */
@media (max-width: 400px) {

    #patient-guide .container {
        padding-left: 10px;
        padding-right: 10px;
    }

    #patient-guide .section-title {
        font-size: 23px;
    }

    #patient-guide .section-label {
        font-size: 11px;
        letter-spacing: 1px;
    }

    #patient-guide .quick-guide-card {
        padding: 11px;
    }

    #patient-guide .treatment-section {
        padding-left: 7px;
        padding-right: 7px;
    }

    #patient-guide .treatment-grid {
        gap: 7px;
    }

    #patient-guide .treatment-card h3 {
        font-size: 12px;
    }

    #patient-guide .treatment-card p {
        font-size: 11px;
    }

    #patient-guide .journey-step {
        grid-template-columns: 44px 1fr;
    }

    #patient-guide .journey-icon {
        width: 40px;
        height: 40px;
    }

    #patient-guide .journey-number {
        left: 26px;
    }

    #patient-guide .patient-guide-cta .cta-content h2 {
        font-size: 15px !important;
    }

    #patient-guide .patient-guide-cta .cta-content p {
        font-size: 11.5px !important;
    }

    #patient-guide .patient-guide-cta .cta-btn {
        font-size: 11px;
    }
}

/* ============================================================
   IMPORTANT FIXES FOR EXISTING OVERRIDES
   ============================================================ */

/* Existing CSS accidentally makes the complete CTA heading yellow.
   Keep only the lightbulb yellow. */
#patient-guide .patient-guide-cta .cta-content h2 {
    color: #ffffff !important;
}

    #patient-guide .patient-guide-cta .cta-content h2 i {
        color: #ffc107 !important;
    }

/* Existing 40px health-tips padding is too large on mobile/desktop. */
#patient-guide .health-tips {
    padding-top: 8px !important;
    padding-bottom: 10px !important;
}

/* Preserve the correct warning check icon appearance. */
#patient-guide .warning-points li {
    list-style: none;
}

    #patient-guide .warning-points li i {
        /*color: #19a757 !important;*/
    }

/* Prevent long words / labels from creating horizontal overflow. */
#patient-guide h1,
#patient-guide h2,
#patient-guide h3,
#patient-guide h4,
#patient-guide p,
#patient-guide span,
#patient-guide li,
#patient-guide a {
    overflow-wrap: anywhere;
}

/* Never allow a grid/flex child to force the viewport wider. */
#patient-guide .quick-guide-grid > *,
#patient-guide .treatment-grid > *,
#patient-guide .journey-line > *,
#patient-guide .checklist-grid > *,
#patient-guide .guardian-grid > *,
#patient-guide .two-column > *,
#patient-guide .warning-final-grid > *,
#patient-guide .health-tip-list > * {
    min-width: 0;
}

/* =========================================
       ABOUT PAGE COMMON
    ========================================= */
.about-page {
    font-family: Arial, Helvetica, sans-serif;
    color: #18375f;
    overflow: hidden;
}

    .about-page *,
    .about-page *::before,
    .about-page *::after {
        box-sizing: border-box;
    }

.about-container {
    width: 100%;
    /*max-width: 1280px;*/
    margin: 0 auto;
    padding: 0 25px;
}

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

.section-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    color: #159447;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

    .section-label::before {
        content: "";
        width: 28px;
        height: 3px;
        border-radius: 5px;
        background: #159447;
    }

.section-title {
    margin: 0 0 18px;
    color: #073f86;
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.15;
    font-weight: 700;
}

    .section-title span {
        color: #25a449;
    }

.section-description {
    max-width: 760px;
    margin: 0 auto;
    color: #536783;
    font-size: 17px;
    line-height: 1.7;
}


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

.about-hero-new {
    position: relative;
    min-height: 580px;
    display: flex;
    align-items: center;
    background: linear-gradient( 90deg, rgba(2, 45, 96, .94) 0%, rgba(2, 45, 96, .84) 38%, rgba(2, 45, 96, .25) 72%, rgba(2, 45, 96, .05) 100% ), url('/assets/img/heroslider/ekanshi-clinic-about.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

    .about-hero-new::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 55px;
        background: linear-gradient( 90deg, #063e82, #0876b8, #24a449 );
        clip-path: polygon( 0 55%, 15% 25%, 32% 60%, 48% 20%, 67% 62%, 83% 30%, 100% 55%, 100% 100%, 0 100% );
    }

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 700px;
    color: #fff;
}

.hero-badge {
    display: inline-flex;
    padding: 8px 16px;
    margin-bottom: 18px;
    border: 1px solid rgba(255,255,255,.45);
    border-radius: 30px;
    background: rgba(255,255,255,.10);
    backdrop-filter: blur(8px);
    font-size: 13px;
    font-weight: 600;
}

.hero-content h1 {
    margin: 0 0 18px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(48px, 6vw, 76px);
    line-height: 1.02;
}

    .hero-content h1 span {
        color: #7ee041;
    }

.hero-content h2 {
    margin: 0 0 18px;
    font-size: 25px;
    line-height: 1.3;
    font-weight: 600;
}

.hero-content p {
    max-width: 650px;
    margin: 0 0 25px;
    font-size: 18px;
    line-height: 1.65;
    color: rgba(255,255,255,.92);
}

.hero-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 13px 23px;
    border-radius: 7px;
    text-decoration: none;
    font-weight: 700;
    transition: .3s;
}

.hero-btn-primary {
    background: #0a69bb;
    color: #fff;
}

    .hero-btn-primary:hover {
        background: #07589e;
        color: #fff;
    }

.hero-btn-secondary {
    background: #fff;
    color: #073f86;
}

    .hero-btn-secondary:hover {
        background: #f0f7ff;
        color: #073f86;
    }


/* =========================================================
       QUICK CREDENTIALS
========================================================= */
.credentials-section {
    position: relative;
    z-index: 10;
    margin-top: -34px;
    padding: 0 0 15px;
}

    .credentials-section .about-container {
        max-width: 1320px;
    }


/* Main Card */

.credentials-card {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(7, 63, 134, 0.08);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 15px 45px rgba(0, 55, 100, 0.13), 0 3px 10px rgba(0, 55, 100, 0.05);
    backdrop-filter: blur(12px);
}


    /* Small top branding line */

    .credentials-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 7%;
        right: 7%;
        height: 3px;
        background: linear-gradient( 90deg, #0874bb 0%, #0d91b7 45%, #27a94a 100% );
        border-radius: 0 0 5px 5px;
    }


/* Individual Credential */

.credential {
    position: relative;
    min-height: 132px;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 25px 24px 22px;
    transition: background .3s ease, transform .3s ease;
}


    /* Vertical divider */

    .credential:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 25px;
        right: 0;
        bottom: 25px;
        width: 1px;
        background: #e2eaf1;
    }


    /* Hover */

    .credential:hover {
        background: linear-gradient( 135deg, rgba(235, 248, 255, .85), rgba(245, 252, 247, .85) );
    }


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

.credential-icon {
    position: relative;
    width: 58px;
    height: 58px;
    min-width: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background: linear-gradient( 145deg, #e8f6ff, #dff2ff );
    color: #0870b8;
    font-size: 24px;
    border: 1px solid rgba(8, 112, 184, .08);
    box-shadow: 0 6px 15px rgba(8, 112, 184, .08);
    transition: transform .3s ease, box-shadow .3s ease;
}


    /* Icon small glow */

    .credential-icon::after {
        content: "";
        position: absolute;
        width: 8px;
        height: 8px;
        right: -3px;
        top: -3px;
        border-radius: 50%;
        background: #28a94b;
        border: 2px solid #fff;
    }


/* Green icons */

.credential:nth-child(2) .credential-icon,
.credential:nth-child(4) .credential-icon {
    background: linear-gradient( 145deg, #eefae6, #e3f6d9 );
    color: #168944;
}

    .credential:nth-child(2) .credential-icon::after,
    .credential:nth-child(4) .credential-icon::after {
        background: #0873ba;
    }


/* Hover icon */

.credential:hover .credential-icon {
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgba(8, 100, 170, .14);
}


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

.credential > div:last-child {
    min-width: 0;
}

.credential strong {
    display: block;
    margin-bottom: 6px;
    color: #073f86;
    font-size: 15px;
    line-height: 1.3;
    font-weight: 700;
}

.credential span {
    display: block;
    max-width: 190px;
    color: #63758c;
    font-size: 12.5px;
    line-height: 1.55;
}


/* =========================================================
   OPTIONAL NUMBER / LABEL
   If you add <small>01</small> later
========================================================= */

.credential-number {
    position: absolute;
    top: 12px;
    right: 18px;
    color: #dce8f1;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
}


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

@media (max-width: 1100px) {

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

    .credential {
        min-height: 120px;
    }

        .credential:nth-child(2)::after {
            display: none;
        }

        .credential:nth-child(-n + 2) {
            border-bottom: 1px solid #e5edf3;
        }
}


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

@media (max-width: 650px) {

    .credentials-section {
        margin-top: -20px;
        padding: 0 15px 10px;
    }

    .credentials-card {
        grid-template-columns: 1fr;
        border-radius: 16px;
    }

    .credential {
        min-height: auto;
        padding: 19px 18px;
        gap: 15px;
    }

        .credential:not(:last-child)::after {
            display: none;
        }

        .credential:not(:last-child) {
            border-bottom: 1px solid #e6edf3;
        }

    .credential-icon {
        width: 50px;
        height: 50px;
        min-width: 50px;
        border-radius: 13px;
        font-size: 21px;
    }

    .credential strong {
        font-size: 14px;
    }

    .credential span {
        max-width: none;
        font-size: 12px;
    }
}
/* =========================================================
       INTRO / WHY EKANSHI
    ========================================================= */

.intro-section {
    background: #f7fbfe;
}

.intro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.intro-content h2 {
    text-align: left;
}

.intro-content p {
    color: #52647d;
    line-height: 1.75;
    font-size: 16px;
    margin-bottom: 15px;
}

.intro-points {
    margin-top: 25px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.intro-point {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    line-height: 1.45;
    color: #304968;
}

    .intro-point i {
        color: #159447;
        font-size: 17px;
        margin-top: 2px;
    }

.intro-visual {
    position: relative;
}

.intro-image-main {
    width: 85%;
    margin-left: auto;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 18px 45px rgba(0,50,100,.15);
}

    .intro-image-main img {
        width: 100%;
        display: block;
    }

.experience-badge {
    position: absolute;
    left: 0;
    bottom: 25px;
    padding: 18px 25px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 12px 35px rgba(0,50,100,.15);
}

    .experience-badge strong {
        display: block;
        color: #073f86;
        font-size: 18px;
    }

    .experience-badge span {
        color: #61728a;
        font-size: 13px;
    }


/* =========================================================
       SPECIALIST SECTION
    ========================================================= */

.specialist-section {
    background: #fff;
}

.specialist-grid {
    display: grid;
    grid-template-columns: 390px 1fr;
    gap: 65px;
    align-items: center;
}

.specialist-image {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    background: #eaf6fc;
}

    .specialist-image img {
        width: 100%;
        display: block;
    }

    .specialist-image::after {
        content: "";
        position: absolute;
        left: 20px;
        right: 20px;
        bottom: 15px;
        height: 5px;
        border-radius: 5px;
        background: linear-gradient( 90deg, #0872bc, #2aa94a );
    }

.specialist-content h2 {
    margin: 0 0 6px;
    color: #073f86;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 42px;
}

.specialist-role {
    color: #159447;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.45;
    margin-bottom: 18px;
}

.specialist-content > p {
    color: #536783;
    line-height: 1.75;
    font-size: 16px;
}

.specialist-features {
    margin-top: 25px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.specialist-feature {
    display: flex;
    gap: 12px;
    padding: 14px;
    border-radius: 10px;
    background: #f4f9fd;
    border: 1px solid #e3edf5;
}

    .specialist-feature i {
        color: #0870b9;
        font-size: 21px;
    }

    .specialist-feature strong {
        display: block;
        color: #123f70;
        font-size: 14px;
    }

    .specialist-feature span {
        color: #718096;
        font-size: 12px;
    }


/* =========================================================
       EXPERTISE
    ========================================================= */

.expertise-section {
    background: #f3f9fc;
}

.center-heading {
    text-align: center;
    margin-bottom: 45px;
}

.expertise-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.expertise-card {
    position: relative;
    padding: 28px;
    background: #fff;
    border-radius: 15px;
    border: 1px solid #e4edf4;
    transition: .3s;
    overflow: hidden;
}

    .expertise-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 35px rgba(0,55,100,.11);
    }

    .expertise-card::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 4px;
        height: 100%;
        background: #0a72bb;
    }

    .expertise-card:hover::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 4px;
        height: 100%;
        background: linear-gradient(90deg, #0872bc, #2aa94a);
    }

.expertise-icon {
    width: 55px;
    height: 55px;
    margin-bottom: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 13px;
    background: #e7f5ff;
    color: #0867b2;
    font-size: 25px;
}

.expertise-card h3 {
    margin: 0 0 10px;
    color: #073f86;
    font-size: 19px;
}

.expertise-card p {
    margin: 0;
    color: #687990;
    font-size: 14px;
    line-height: 1.6;
}


/* =========================================================
       MISSION / VISION / VALUES
    ========================================================= */

.mvv-section {
    background: #fff;
}

.mvv-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.mvv-card {
    padding: 35px 30px;
    border-radius: 17px;
    border: 1px solid #e3ebf2;
    background: #fff;
    box-shadow: 0 7px 25px rgba(0,50,90,.06);
}

    .mvv-card:nth-child(1) {
        background: #f2fae9;
    }

    .mvv-card:nth-child(2) {
        background: #eef8ff;
    }

    .mvv-card:nth-child(3) {
        background: #f7fbf7;
    }

.mvv-icon {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    color: #148746;
    font-size: 29px;
    margin-bottom: 20px;
}

.mvv-card h3 {
    color: #073f86;
    font-size: 24px;
    margin: 0 0 12px;
}

.mvv-card p {
    color: #586b83;
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
}

.value-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .value-list li {
        margin-bottom: 8px;
        color: #52647c;
        font-size: 14px;
    }

    .value-list i {
        color: #169044;
        margin-right: 6px;
    }


/* =========================================================
       WHY CHOOSE US
    ========================================================= */
.why-section {
    position: relative;
    padding: 85px 0 75px;
    color: #fff;
    background: radial-gradient( circle at 10% 10%, rgba(54, 173, 91, .15), transparent 30% ), radial-gradient( circle at 90% 80%, rgba(67, 190, 235, .16), transparent 35% ), linear-gradient( 135deg, #063d80 0%, #075a9f 48%, #087db2 100% );
    overflow: hidden;
}


    /* Decorative background circles */

    .why-section::before {
        content: "";
        position: absolute;
        width: 420px;
        height: 420px;
        left: -240px;
        top: -220px;
        border-radius: 50%;
        border: 1px solid rgba(255,255,255,.08);
        box-shadow: 0 0 0 70px rgba(255,255,255,.025), 0 0 0 140px rgba(255,255,255,.018);
        pointer-events: none;
    }

    .why-section::after {
        content: "";
        position: absolute;
        width: 350px;
        height: 350px;
        right: -180px;
        bottom: -220px;
        border-radius: 50%;
        border: 1px solid rgba(255,255,255,.08);
        pointer-events: none;
    }


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

.why-header {
    position: relative;
    z-index: 2;
    max-width: 850px;
    margin: 0 auto 48px;
    text-align: center;
}

.why-label {
    color: #9bf05b !important;
    justify-content: center;
    margin-bottom: 14px;
}

    .why-label::before {
        background: #9bf05b !important;
    }


.why-title {
    margin: 0 0 17px;
    color: #fff !important;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(34px, 4vw, 50px);
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -.4px;
}


    .why-title span {
        color: #62d04e !important;
    }


.why-intro {
    max-width: 760px;
    margin: 0 auto;
    color: rgba(255,255,255,.82) !important;
    font-size: 15px;
    line-height: 1.75;
}


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

.why-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}


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

.why-card {
    position: relative;
    min-height: 285px;
    display: flex;
    flex-direction: column;
    padding: 26px 26px 21px;
    border-radius: 16px;
    background: linear-gradient( 145deg, rgba(255,255,255,.105), rgba(255,255,255,.045) );
    border: 1px solid rgba(255,255,255,.18);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 12px 30px rgba(0,25,65,.10);
    backdrop-filter: blur(8px);
    overflow: hidden;
    transition: transform .3s ease, background .3s ease, border-color .3s ease, box-shadow .3s ease;
}


    /* Green top accent */

    .why-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 25px;
        right: 25px;
        height: 3px;
        border-radius: 0 0 6px 6px;
        background: linear-gradient( 90deg, #8de83f, #31c75c );
        opacity: .85;
    }


    /* Hover */

    .why-card:hover {
        transform: translateY(-7px);
        background: linear-gradient( 145deg, rgba(255,255,255,.16), rgba(255,255,255,.075) );
        border-color: rgba(142,235,92,.40);
        box-shadow: 0 20px 42px rgba(0,20,60,.22);
    }


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

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


/* Number */

.why-number {
    color: rgba(255,255,255,.38);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
}


/* Icon */

.why-icon {
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background: rgba(142,235,92,.11);
    border: 1px solid rgba(142,235,92,.25);
    color: #91ed43;
    font-size: 25px;
    box-shadow: 0 5px 18px rgba(0,0,0,.10);
    transition: transform .3s ease, background .3s ease;
}

.why-card:hover .why-icon {
    transform: scale(1.08) rotate(-3deg);
    background: rgba(142,235,92,.18);
}


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

.why-card h3 {
    margin: 0 0 11px !important;
    color: #ffffff !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 19px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
}


.why-card p {
    margin: 0 !important;
    color: rgba(255,255,255,.76) !important;
    font-size: 13.5px !important;
    line-height: 1.65 !important;
    font-family: Arial, Helvetica, sans-serif !important;
}


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

.why-card-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,.10);
    color: #8fea4a;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .7px;
}


    .why-card-bottom i {
        font-size: 15px;
        transition: transform .3s ease;
    }

.why-card:hover .why-card-bottom i {
    transform: translate(3px, -3px);
}


/* =========================================================
   BOTTOM TRUST MESSAGE
========================================================= */

.why-trust-message {
    position: relative;
    z-index: 2;
    max-width: 850px;
    margin: 38px auto 0;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 22px;
    border-radius: 12px;
    background: rgba(255,255,255,.075);
    border: 1px solid rgba(255,255,255,.13);
}


.why-trust-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(142,235,92,.14);
    color: #92ec49;
    font-size: 21px;
}


.why-trust-message strong {
    display: block;
    margin-bottom: 3px;
    color: #fff;
    font-size: 14px;
}


.why-trust-message span {
    display: block;
    color: rgba(255,255,255,.68);
    font-size: 12px;
    line-height: 1.5;
}


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

@media (max-width: 1000px) {

    .why-section {
        padding: 70px 0 60px;
    }

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


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

@media (max-width: 650px) {

    .why-section {
        padding: 55px 0 50px;
    }

    .why-header {
        margin-bottom: 32px;
    }

    .why-title {
        font-size: 32px;
    }

    .why-intro {
        font-size: 13.5px;
        line-height: 1.65;
    }

    .why-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .why-card {
        min-height: 245px;
        padding: 23px;
    }

        .why-card h3 {
            font-size: 18px !important;
        }

        .why-card p {
            font-size: 13px !important;
        }

    .why-trust-message {
        align-items: flex-start;
        margin-top: 25px;
        padding: 16px;
    }
}
/* =========================================================
       PATIENT EXPECTATIONS
    ========================================================= */

.patient-section {
    background: #f7fbfd;
}

.patient-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.patient-list {
    margin-top: 30px;
}

.patient-step {
    display: flex;
    gap: 17px;
    margin-bottom: 24px;
}

.patient-number {
    width: 43px;
    height: 43px;
    flex: 0 0 43px;
    border-radius: 50%;
    background: #e3f5e6;
    color: #148844;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
}

.patient-step h3 {
    margin: 0 0 5px;
    color: #073f86;
    font-size: 17px;
}

.patient-step p {
    margin: 0;
    color: #66768b;
    font-size: 14px;
    line-height: 1.55;
}

.patient-promise {
    padding: 35px;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 12px 35px rgba(0,50,100,.09);
    border: 1px solid #e5edf3;
}

    .patient-promise h3 {
        margin: 0 0 20px;
        color: #073f86;
        font-size: 25px;
    }

.promise-item {
    display: flex;
    gap: 12px;
    padding: 13px 0;
    border-bottom: 1px solid #edf1f4;
}

    .promise-item:last-child {
        border-bottom: none;
    }

    .promise-item i {
        color: #169148;
        font-size: 18px;
    }

    .promise-item span {
        color: #50657e;
        font-size: 14px;
        line-height: 1.5;
    }


/* =========================================================
       ACHIEVEMENTS / COMMITMENT
    ========================================================= */

.achievements-section {
    background: #fff;
}

.achievement-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
}

.achievement-card {
    padding: 30px;
    border-radius: 16px;
    background: linear-gradient( 135deg, #f3f9ff, #fff );
    border: 1px solid #e1ebf3;
}

    .achievement-card h3 {
        color: #073f86;
        margin: 0 0 15px;
        font-size: 21px;
    }

    .achievement-card p {
        margin: 0;
        color: #5b6d83;
        line-height: 1.7;
        font-size: 14px;
    }

.achievement-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .achievement-list li {
        position: relative;
        padding-left: 27px;
        margin-bottom: 11px;
        color: #53677e;
        font-size: 14px;
        line-height: 1.5;
    }

        .achievement-list li::before {
            content: "✓";
            position: absolute;
            left: 0;
            color: #149147;
            font-weight: bold;
        }


/* =========================================================
       CTA
    ========================================================= */
.about-cta {
    position: relative;
    min-height: 390px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 70px 25px;
    overflow: hidden;
    color: #fff;
    background: radial-gradient( circle at 15% 50%, rgba(41, 176, 76, .18), transparent 30% ), radial-gradient( circle at 85% 20%, rgba(72, 190, 232, .18), transparent 30% ), linear-gradient( 120deg, #043b7c 0%, #075b9d 48%, #0780b4 100% );
}


/* =========================================================
   BACKGROUND PATTERN
========================================================= */

.about-cta-bg-pattern {
    position: absolute;
    inset: 0;
    opacity: .10;
    background-image: linear-gradient( 30deg, rgba(255,255,255,.10) 12%, transparent 12.5%, transparent 87%, rgba(255,255,255,.10) 87.5% ), linear-gradient( 150deg, rgba(255,255,255,.08) 12%, transparent 12.5%, transparent 87%, rgba(255,255,255,.08) 87.5% );
    background-size: 70px 120px;
    pointer-events: none;
}


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

.about-cta-content {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 900px;
    text-align: center;
}


/* =========================================================
   LABEL
========================================================= */

.about-cta-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 17px;
    color: #9aef54;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}

    .about-cta-label span {
        display: block;
        width: 28px;
        height: 2px;
        border-radius: 4px;
        background: #8de94d;
    }


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

.about-cta h2 {
    margin: 0 auto 17px;
    color: #fff !important;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(34px, 4.5vw, 52px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.5px;
}

    .about-cta h2 span {
        display: block;
        color: #67d94e !important;
    }


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

.about-cta-description {
    max-width: 720px;
    margin: 0 auto;
    color: rgba(255,255,255,.84) !important;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    line-height: 1.7;
}


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

.about-cta-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    margin-top: 30px;
}


.cta-btn {
    min-width: 245px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 10px;
    text-decoration: none;
    transition: transform .3s ease, box-shadow .3s ease, background .3s ease;
}


    /* Icon */

    .cta-btn .cta-icon {
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 9px;
        font-size: 19px;
    }


    /* Text */

    .cta-btn > span:nth-child(2) {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        flex: 1;
    }


    .cta-btn strong {
        display: block;
        font-size: 14px;
        line-height: 1.3;
    }


    .cta-btn small {
        display: block;
        margin-top: 3px;
        font-size: 11px;
        opacity: .75;
    }


.cta-arrow {
    font-size: 17px;
    transition: transform .3s ease;
}


/* =========================================================
   PRIMARY
========================================================= */

.cta-primary {
    color: #fff;
    background: linear-gradient( 135deg, #0ba4b0, #159a4d );
    border: 1px solid rgba(255,255,255,.18);
    box-shadow: 0 10px 28px rgba(0,0,0,.18);
}


    .cta-primary .cta-icon {
        background: rgba(255,255,255,.15);
    }


    .cta-primary:hover {
        color: #fff;
        background: linear-gradient( 135deg, #0ba4b0, #159a4d );
        transform: translateY(-4px);
        box-shadow: 0 16px 35px rgba(0,0,0,.25);
    }


        .cta-primary:hover .cta-arrow {
            transform: translateX(5px);
        }


/* =========================================================
   SECONDARY
========================================================= */

.cta-secondary {
    color: #073f86;
    background: #fff;
    border: 1px solid rgba(255,255,255,.8);
    box-shadow: 0 8px 25px rgba(0,0,0,.10);
}


    .cta-secondary .cta-icon {
        background: #e7f6ff;
        color: #0872b9;
    }


    .cta-secondary small {
        color: #62748a;
    }


    .cta-secondary:hover {
        color: #073f86;
        transform: translateY(-4px);
        box-shadow: 0 15px 32px rgba(0,0,0,.18);
    }


        .cta-secondary:hover .cta-arrow {
            transform: translateX(5px);
        }


/* =========================================================
   TRUST POINTS
========================================================= */

.about-cta-trust {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 25px;
    margin-top: 27px;
}


    .about-cta-trust div {
        display: flex;
        align-items: center;
        gap: 7px;
        color: rgba(255,255,255,.75);
        font-size: 12px;
    }


    .about-cta-trust i {
        color: #8ee94c;
        font-size: 14px;
    }


/* =========================================================
   DECORATIVE ICONS
========================================================= */

.cta-decoration {
    position: absolute;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 50%;
    color: rgba(255,255,255,.08);
}


.cta-decoration-left {
    width: 220px;
    height: 220px;
    left: -105px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 80px;
}


.cta-decoration-right {
    width: 300px;
    height: 300px;
    right: -145px;
    top: -140px;
    font-size: 75px;
}


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

@media (max-width: 700px) {

    .about-cta {
        min-height: auto;
        padding: 60px 20px;
    }

        .about-cta h2 {
            font-size: 34px;
        }

    .about-cta-description {
        font-size: 13.5px;
        line-height: 1.65;
    }

    .about-cta-actions {
        flex-direction: column;
        width: 100%;
    }

    .cta-btn {
        width: 100%;
        max-width: 360px;
        min-width: 0;
    }

    .about-cta-trust {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
        max-width: 330px;
        margin-left: auto;
        margin-right: auto;
    }

    .cta-decoration-left {
        width: 150px;
        height: 150px;
        left: -100px;
        font-size: 50px;
    }

    .cta-decoration-right {
        width: 180px;
        height: 180px;
        right: -100px;
        top: -80px;
    }
}
/* =========================================================
       RESPONSIVE
    ========================================================= */

@media (max-width: 1000px) {

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

    .credential:nth-child(2) {
        border-right: none;
    }

    .credential:nth-child(-n+2) {
        border-bottom: 1px solid #e4ebf3;
    }

    .intro-grid,
    .patient-grid {
        grid-template-columns: 1fr;
    }

    .specialist-grid {
        grid-template-columns: 300px 1fr;
        gap: 35px;
    }

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

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

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

@media (max-width: 700px) {

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

    .about-hero-new {
        min-height: 580px;
    }

    .credentials-card {
        grid-template-columns: 1fr;
    }

    .credential {
        border-right: none;
        border-bottom: 1px solid #e4ebf3;
    }

        .credential:last-child {
            border-bottom: none;
        }

    .intro-points,
    .specialist-features,
    .expertise-grid,
    .why-grid,
    .achievement-grid {
        grid-template-columns: 1fr;
    }

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

    .specialist-image {
        max-width: 390px;
        margin: auto;
    }

    .intro-image-main {
        width: 100%;
    }

    .experience-badge {
        left: 10px;
    }
}

.professional-journey {
    width: 100%;
    background: linear-gradient(180deg, #f5fbfe 0%, #ffffff 100%);
    overflow: hidden;
}

    .professional-journey .journey-timeline {
        position: relative;
        width: 100%;
        margin: 50px auto 0;
    }


        /* =========================================================
   TIMELINE LINE
   ========================================================= */

        .professional-journey .journey-timeline::before {
            content: "";
            position: absolute;
            left: 28px;
            top: 10px;
            bottom: 10px;
            width: 2px;
            background: linear-gradient( 180deg, #0874ba, #27a84a );
        }


    /* =========================================================
   JOURNEY ITEM
   ========================================================= */

    .professional-journey .journey-item {
        position: relative;
        display: grid;
        grid-template-columns: 58px minmax(0, 1fr);
        gap: 25px;
        margin-bottom: 28px;
        min-width: 0;
    }


    /* =========================================================
   JOURNEY MARKER
   ========================================================= */

    .professional-journey .journey-marker {
        position: relative;
        z-index: 2;
        width: 58px;
        height: 58px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        border-radius: 50%;
        background: #e7f5fd;
        color: #0871b9;
        border: 5px solid #ffffff;
        box-shadow: 0 5px 18px rgba(0, 60, 100, .12);
        font-size: 22px;
    }

        .professional-journey .journey-marker.current {
            background: #e8f8df;
            color: #178a45;
        }

        .professional-journey .journey-marker.ekanshi {
            background: linear-gradient( 135deg, #0874b9, #23a54a );
            color: #ffffff;
        }


    /* =========================================================
   JOURNEY CARD
   IMPORTANT:
   These properties prevent collision with other
   .journey-card definitions in main.css
   ========================================================= */

    .professional-journey .journey-card {
        position: relative;
        display: block;
        width: 100%;
        height: auto;
        min-height: 0;
        padding: 25px 28px;
        box-sizing: border-box;
        text-align: left;
        background: #ffffff;
        border: 1px solid #e2ebf2;
        border-radius: 14px;
        box-shadow: 0 7px 25px rgba(0, 50, 90, .06);
        min-width: 0;
    }


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

    .professional-journey .journey-category {
        display: inline-block;
        margin: 0 0 8px;
        color: #169147;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 1.2px;
        line-height: 1.4;
    }


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

    .professional-journey .journey-card h3 {
        margin: 0 0 10px;
        color: #073f86;
        font-family: Georgia, "Times New Roman", serif;
        font-size: 25px;
        font-weight: 700;
        line-height: 1.25;
        text-align: left;
    }


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

    .professional-journey .journey-card p {
        margin: 0;
        color: #61738a;
        font-size: 14px;
        line-height: 1.65;
        text-align: left;
    }


    /* =========================================================
   EDUCATION DETAILS
   ========================================================= */

    .professional-journey .journey-details {
        display: grid;
        grid-template-columns: repeat( 2, minmax(0, 1fr) );
        gap: 12px;
        margin-top: 15px;
    }


        /* IMPORTANT:
   display:flex was commented in your CSS.
*/

        .professional-journey .journey-details > div {
            display: flex;
            align-items: flex-start;
            gap: 8px;
            min-width: 0;
            color: #425b76;
            font-size: 14px;
            line-height: 1.45;
            text-align: left;
        }


            /* Icon */

            .professional-journey .journey-details > div > i {
                flex: 0 0 auto;
                color: #159447;
                margin-top: 2px;
                font-size: 14px;
            }


            /* Text */

            .professional-journey .journey-details > div > strong {
                display: block;
                min-width: 0;
                font-weight: 600;
                color: #425b76;
            }


    /* =========================================================
   CURRENT EXPERIENCE
   ========================================================= */

    .professional-journey .current-card {
        border-left: 4px solid #159447;
    }


    /* =========================================================
   EKANSHI CLINIC
   ========================================================= */

    .professional-journey .ekanshi-card {
        border: 1px solid #a8dfb8;
        background: linear-gradient( 135deg, #f3fbf5, #ffffff );
    }


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

    .professional-journey .journey-highlight {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-top: 18px;
        padding: 10px 15px;
        border-radius: 8px;
        background: #e5f7e8;
        color: #147d3e;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.4;
    }

        .professional-journey .journey-highlight i {
            flex: 0 0 auto;
        }


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

@media (max-width: 700px) {

    .professional-journey .journey-timeline {
        margin-top: 35px;
    }

        .professional-journey .journey-timeline::before {
            left: 23px;
        }

    .professional-journey .journey-item {
        grid-template-columns: 48px minmax(0, 1fr);
        gap: 15px;
        margin-bottom: 20px;
    }

    .professional-journey .journey-marker {
        width: 48px;
        height: 48px;
        font-size: 18px;
    }

    .professional-journey .journey-card {
        padding: 20px;
    }

        .professional-journey .journey-card h3 {
            font-size: 21px;
        }

        .professional-journey .journey-card p {
            font-size: 13px;
        }

    .professional-journey .journey-details {
        grid-template-columns: 1fr;
        gap: 10px;
    }

        .professional-journey .journey-details > div {
            font-size: 13px;
        }

    .professional-journey .journey-highlight {
        display: flex;
        width: 100%;
        box-sizing: border-box;
    }
}


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

@media (max-width: 480px) {

    .professional-journey .journey-timeline {
        margin-top: 30px;
    }

    .professional-journey .journey-item {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 12px;
        margin-bottom: 16px;
    }

    .professional-journey .journey-timeline::before {
        left: 20px;
    }

    .professional-journey .journey-marker {
        width: 42px;
        height: 42px;
        border-width: 4px;
        font-size: 16px;
    }

    .professional-journey .journey-card {
        padding: 17px 15px;
        border-radius: 12px;
    }

    .professional-journey .journey-category {
        font-size: 10px;
        letter-spacing: 1px;
    }

    .professional-journey .journey-card h3 {
        font-size: 19px;
        line-height: 1.25;
    }

    .professional-journey .journey-card p {
        font-size: 13px;
        line-height: 1.6;
    }

    .professional-journey .journey-details > div {
        font-size: 12.5px;
    }

    .professional-journey .journey-highlight {
        font-size: 12px;
        padding: 9px 11px;
    }
}

/* =========================================================
       ENDO UROLOGY PAGE
========================================================= */
.endo-page {
    --endo-blue: #063b7a;
    --endo-blue-dark: #052e60;
    --endo-green: #28a65a;
    --endo-green-dark: #168443;
    --endo-soft-blue: #f2f8fd;
    --endo-soft-green: #f1fbf5;
    --endo-text: #33445c;
    --endo-muted: #66758a;
    --endo-border: #dfe9f1;
    color: var(--endo-text);
    background: #fff;
}

    .endo-page * {
        box-sizing: border-box;
    }

.endo-hero {
    position: relative;
    min-height: 500px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: linear-gradient(90deg, rgba(3, 37, 76, .94) 0%, rgba(5, 57, 111, .82) 48%, rgba(5, 57, 111, .35) 100%), url('/assets/img/services/endo-urology-treatment.jpg') center/cover no-repeat;
}

    .endo-hero::after {
        content: "";
        position: absolute;
        inset: auto 0 0;
        height: 70px;
        background: linear-gradient(180deg, transparent, rgba(255,255,255,.12));
        pointer-events: none;
    }

.endo-hero-content {
    position: relative;
    z-index: 2;
    padding: 80px 0 75px;
    max-width: 900px;
}

.endo-breadcrumb {
    margin-bottom: 22px;
}

    .endo-breadcrumb ol {
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding: 0;
        margin: 0;
        font-size: 14px;
    }

    .endo-breadcrumb li,
    .endo-breadcrumb a {
        color: rgba(255,255,255,.82);
        text-decoration: none;
    }

        .endo-breadcrumb li + li::before {
            content: "›";
            margin-right: 8px;
            color: #8ee3ae;
        }

.endo-hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 999px;
    background: rgba(255,255,255,.09);
    color: #d9ffe7;
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 18px;
}

.endo-hero h1 {
    margin: 0 0 18px;
    color: #fff;
    font-size: clamp(38px, 5vw, 68px);
    line-height: 1.06;
    font-weight: 800;
    letter-spacing: -.8px;
}

    .endo-hero h1 span {
        color: #62d784;
    }

.endo-hero-lead {
    max-width: 760px;
    margin: 0 0 28px;
    color: rgba(255,255,255,.92);
    font-size: 19px;
    line-height: 1.7;
}

.endo-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 28px;
}

.endo-btn,
.endo-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 48px;
    padding: 12px 21px;
    border-radius: 9px;
    font-weight: 700;
    text-decoration: none;
    transition: .25s ease;
}

.endo-btn {
    color: #fff;
    background: linear-gradient(135deg, #0879d8, #20a35b);
    box-shadow: 0 10px 25px rgba(0,0,0,.16);
}

    .endo-btn:hover {
        color: #fff;
        transform: translateY(-2px);
    }

.endo-btn-outline {
    color: #fff;
    border: 1px solid rgba(255,255,255,.5);
    background: rgba(255,255,255,.08);
}

    .endo-btn-outline:hover {
        color: var(--endo-blue);
        background: #fff;
    }

.endo-trust-line {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 25px;
    color: rgba(255,255,255,.9);
    font-size: 14px;
}

    .endo-trust-line span {
        display: inline-flex;
        align-items: center;
        gap: 7px;
    }

    .endo-trust-line i {
        color: #65dc87;
    }

.endo-section {
    padding: 78px 0;
}

.endo-section-soft {
    background: linear-gradient(180deg, #f7fcfa 0%, #eff9f5 100%);
}

.endo-section-light {
    background: var(--endo-soft-blue);
}

.endo-section-heading {
    max-width: 800px;
    margin: 0 auto 45px;
    text-align: center;
}

.endo-label,
.endo-cta-label {
    color: var(--endo-green);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .2px;
    margin-bottom: 8px;
}

.endo-section-heading h2,
.endo-content h2 {
    margin: 0 0 14px;
    color: var(--endo-blue);
    font-size: clamp(30px, 4vw, 44px);
    line-height: 1.15;
    font-weight: 800;
}

.endo-section-heading p,
.endo-content > p {
    color: var(--endo-muted);
    line-height: 1.8;
    font-size: 16px;
    margin-bottom: 0;
}

.endo-heading-line {
    width: 58px;
    height: 4px;
    border-radius: 4px;
    background: var(--endo-green);
    margin: 16px 0 22px;
}

    .endo-heading-line.center {
        margin-left: auto;
        margin-right: auto;
    }

.endo-intro {
    padding: 72px 0 50px;
}

.endo-intro-card,
.endo-conditions-card {
    height: 100%;
    border-radius: 18px;
    border: 1px solid var(--endo-border);
    background: #fff;
    box-shadow: 0 12px 35px rgba(17, 54, 88, .07);
}

.endo-intro-card {
    padding: 34px;
}

    .endo-intro-card h2 {
        color: var(--endo-blue);
        font-size: clamp(30px, 3.5vw, 42px);
        font-weight: 800;
        margin: 0;
    }

    .endo-intro-card p {
        color: var(--endo-text);
        font-size: 16px;
        line-height: 1.85;
        margin-bottom: 15px;
    }

        .endo-intro-card p:last-child {
            margin-bottom: 0;
        }

.endo-conditions-card {
    padding: 30px;
    background: linear-gradient(145deg, #f4fcf7, #eef9f4);
    border-color: #d5ecdf;
}

    .endo-conditions-card h3,
    .endo-card-heading {
        color: var(--endo-blue);
        font-size: 24px;
        line-height: 1.25;
        font-weight: 800;
        margin: 0 0 20px;
    }

.endo-condition-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .endo-condition-list li {
        position: relative;
        padding: 0 0 13px 27px;
        color: var(--endo-text);
        line-height: 1.5;
        font-size: 15px;
    }

        .endo-condition-list li::before {
            content: "\f26a";
            font-family: bootstrap-icons;
            position: absolute;
            left: 0;
            top: 0;
            color: var(--endo-green);
            font-weight: 700;
        }

.endo-mini-benefits {
    margin-top: 25px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 12px;
}

.endo-mini-benefit {
    padding: 14px;
    border-radius: 12px;
    background: #f8fbfe;
    border: 1px solid #e6eef5;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 14px;
    font-weight: 600;
}

    .endo-mini-benefit i {
        color: var(--endo-green);
        font-size: 18px;
    }

.endo-procedure-card {
    height: 100%;
    overflow: hidden;
    border-radius: 15px;
    background: #fff;
    border: 1px solid var(--endo-border);
    box-shadow: 0 8px 25px rgba(17, 54, 88, .06);
    transition: .25s ease;
}

    .endo-procedure-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 32px rgba(17, 54, 88, .11);
    }

.endo-procedure-image {
    display: block;
    width: 100%;
    height: 190px;
    object-fit: cover;
}

.endo-procedure-content {
    padding: 20px;
}

.endo-procedure-title {
    color: var(--endo-blue);
    font-size: 19px;
    line-height: 1.3;
    font-weight: 800;
    margin: 0 0 10px;
}

.endo-procedure-text {
    color: var(--endo-muted);
    line-height: 1.65;
    font-size: 14px;
    margin: 0 0 15px;
}

.endo-procedure-link {
    color: var(--endo-green-dark);
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
}

.endo-benefits-wrapper {
    height: 100%;
    padding: 28px;
    border-radius: 17px;
    background: linear-gradient(150deg, #eaf6ff, #f7fbff);
    border: 1px solid #dcebf7;
}

.endo-benefit {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid rgba(6,59,122,.08);
}

    .endo-benefit:last-child {
        border-bottom: 0;
    }

.endo-benefit-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #fff;
    color: var(--endo-blue);
    box-shadow: 0 4px 12px rgba(0,0,0,.06);
}

.endo-benefit span {
    color: var(--endo-text);
    font-size: 14px;
    line-height: 1.45;
    font-weight: 600;
}

.endo-detail-card {
    height: 100%;
    padding: 28px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid var(--endo-border);
    box-shadow: 0 8px 24px rgba(17,54,88,.06);
}

.endo-detail-number {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #e8f7ee;
    color: var(--endo-green-dark);
    font-weight: 800;
    margin-bottom: 16px;
}

.endo-detail-card h3 {
    color: var(--endo-blue);
    font-size: 21px;
    font-weight: 800;
    margin: 0 0 10px;
}

.endo-detail-card p {
    color: var(--endo-muted);
    line-height: 1.75;
    font-size: 15px;
    margin: 0;
}

.endo-comparison {
    overflow-x: auto;
    border: 1px solid var(--endo-border);
    border-radius: 15px;
    box-shadow: 0 8px 24px rgba(17,54,88,.05);
}

    .endo-comparison table {
        width: 100%;
        min-width: 650px;
        margin: 0;
        border-collapse: collapse;
        background: #fff;
    }

    .endo-comparison th {
        background: var(--endo-blue);
        color: #fff;
        padding: 16px 18px;
        text-align: left;
        font-size: 14px;
    }

    .endo-comparison td {
        padding: 15px 18px;
        border-top: 1px solid var(--endo-border);
        color: var(--endo-text);
        font-size: 14px;
        line-height: 1.55;
    }

    .endo-comparison tr:nth-child(even) td {
        background: #f8fbfd;
    }

.endo-note {
    margin-top: 18px;
    padding: 15px 18px;
    border-left: 4px solid var(--endo-green);
    border-radius: 8px;
    background: #f2faf5;
    color: #4e5f70;
    font-size: 14px;
    line-height: 1.65;
}

.endo-warning {
    margin-top: 20px;
    padding: 18px;
    border-radius: 12px;
    background: #fff8ed;
    border: 1px solid #f5dfbb;
    color: #68563e;
    font-size: 14px;
    line-height: 1.7;
}

.endo-feature-card {
    height: 100%;
    padding: 30px 22px;
    text-align: center;
    border-radius: 16px;
    background: #fff;
    border: 1px solid var(--endo-border);
    box-shadow: 0 8px 25px rgba(17,54,88,.05);
}

.endo-feature-icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    margin: 0 auto 17px;
    border-radius: 50%;
    background: #eaf8f0;
    color: var(--endo-green-dark);
    font-size: 25px;
}

.endo-feature-title {
    color: var(--endo-blue);
    font-size: 19px;
    font-weight: 800;
    margin: 0 0 9px;
}

.endo-feature-text {
    color: var(--endo-muted);
    font-size: 14px;
    line-height: 1.65;
    margin: 0;
}

.endo-steps {
    position: relative;
}

.endo-step {
    height: 100%;
    padding: 25px;
    border-radius: 15px;
    background: #fff;
    border: 1px solid var(--endo-border);
}

    .endo-step h3 {
        color: var(--endo-blue);
        font-size: 19px;
        font-weight: 800;
        margin: 0 0 8px;
    }

    .endo-step p {
        color: var(--endo-muted);
        font-size: 14px;
        line-height: 1.7;
        margin: 0;
    }

.endo-faq {
    border: 1px solid var(--endo-border);
    border-radius: 13px;
    background: #fff;
    overflow: hidden;
    margin-bottom: 12px;
}

    .endo-faq summary {
        cursor: pointer;
        list-style: none;
        padding: 20px 24px;
        color: var(--endo-blue);
        font-weight: 800;
        font-size: 16px;
        position: relative;
        padding-right: 55px;
    }

        .endo-faq summary::-webkit-details-marker {
            display: none;
        }

        .endo-faq summary::after {
            content: "\f282";
            font-family: bootstrap-icons;
            position: absolute;
            right: 22px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--endo-green);
        }

    .endo-faq[open] summary::after {
        transform: translateY(-50%) rotate(180deg);
    }

.endo-faq-content {
    padding: 0 24px 21px;
    color: var(--endo-muted);
    line-height: 1.75;
    font-size: 15px;
}

.endo-cta {
    padding: 78px 0;
    background: linear-gradient(135deg, #edf9f3 0%, #f0f8ff 100%);
}

.endo-cta-image {
    width: 100%;
    height: 320px;
    object-fit: cover;
    border-radius: 18px;
    box-shadow: 0 15px 35px rgba(17,54,88,.12);
}

.endo-cta h2 {
    color: var(--endo-blue);
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.15;
    font-weight: 800;
    margin: 0 0 15px;
}

.endo-cta p {
    color: var(--endo-muted);
    line-height: 1.8;
    font-size: 16px;
    margin-bottom: 23px;
}

.endo-disclaimer {
    padding: 25px 0;
    background: #f7f9fb;
    border-top: 1px solid #e7edf2;
}

    .endo-disclaimer p {
        margin: 0;
        color: #718092;
        font-size: 13px;
        line-height: 1.7;
        text-align: center;
    }

@media (max-width: 991px) {
    .endo-hero {
        min-height: 570px;
    }

    .endo-section,
    .endo-cta {
        padding: 60px 0;
    }

    .endo-procedure-image {
        height: 210px;
    }
}

@media (max-width: 767px) {
    .endo-hero {
        min-height: 620px;
    }

    .endo-hero-content {
        padding: 65px 0;
    }

    .endo-hero-lead {
        font-size: 16px;
    }

    .endo-trust-line {
        display: grid;
        gap: 10px;
    }

    .endo-intro {
        padding-top: 50px;
    }

    .endo-intro-card,
    .endo-conditions-card {
        padding: 24px;
    }

    .endo-mini-benefits {
        grid-template-columns: 1fr;
    }

    .endo-procedure-image {
        height: 220px;
    }

    .endo-cta-image {
        height: 250px;
    }
}

/* =========================================================
       ENDOSCOPIC STONE SURGERY
========================================================= */
.stone-page {
    --stone-blue: #063b7a;
    --stone-blue-dark: #052e60;
    --stone-green: #28a65a;
    --stone-green-dark: #168443;
    --stone-soft-blue: #f2f8fd;
    --stone-soft-green: #f1fbf5;
    --stone-text: #33445c;
    --stone-muted: #66758a;
    --stone-border: #dfe9f1;
    color: var(--stone-text);
    background: #fff;
}

    .stone-page * {
        box-sizing: border-box;
    }

/* HERO */
.stone-hero {
    position: relative;
    min-height: 500px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: linear-gradient(90deg, rgba(3,37,76,.94) 0%, rgba(5,57,111,.82) 45%, rgba(5,57,111,.28) 100%), url('/assets/img/services/endoscopic-stone-surgery.jpg') center/cover no-repeat;
}

.stone-hero-content {
    position: relative;
    z-index: 2;
    padding: 78px 0 70px;
    max-width: 900px;
}

.stone-breadcrumb {
    margin-bottom: 22px;
}

    .stone-breadcrumb ol {
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding: 0;
        margin: 0;
        font-size: 14px;
    }

    .stone-breadcrumb li,
    .stone-breadcrumb a {
        color: rgba(255,255,255,.84);
        text-decoration: none;
    }

        .stone-breadcrumb li + li::before {
            content: "›";
            margin-right: 8px;
            color: #8ee3ae;
        }

.stone-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 999px;
    background: rgba(255,255,255,.09);
    color: #d9ffe7;
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 18px;
}

.stone-hero h1 {
    margin: 0 0 18px;
    color: #fff;
    font-size: clamp(38px, 5vw, 66px);
    line-height: 1.06;
    font-weight: 800;
    letter-spacing: -.8px;
}

    .stone-hero h1 span {
        color: #62d784;
    }

.stone-hero-lead {
    max-width: 770px;
    margin: 0 0 28px;
    color: rgba(255,255,255,.93);
    font-size: 19px;
    line-height: 1.7;
}

.stone-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 26px;
}

.stone-btn,
.stone-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 48px;
    padding: 12px 21px;
    border-radius: 9px;
    font-weight: 700;
    text-decoration: none;
    transition: .25s ease;
}

.stone-btn {
    color: #fff;
    background: linear-gradient(135deg,#0879d8,#20a35b);
    box-shadow: 0 10px 25px rgba(0,0,0,.16);
}

    .stone-btn:hover {
        color: #fff;
        transform: translateY(-2px);
    }

.stone-btn-outline {
    color: #fff;
    border: 1px solid rgba(255,255,255,.5);
    background: rgba(255,255,255,.08);
}

    .stone-btn-outline:hover {
        color: var(--stone-blue);
        background: #fff;
    }

.stone-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 15px 24px;
    color: rgba(255,255,255,.92);
    font-size: 14px;
}

    .stone-trust span {
        display: inline-flex;
        align-items: center;
        gap: 7px;
    }

    .stone-trust i {
        color: #65dc87;
    }

/* GENERAL */
.stone-section {
    padding: 78px 0;
}

.stone-section-light {
    background: var(--stone-soft-blue);
}

.stone-section-soft {
    background: linear-gradient(180deg,#f7fcfa 0%,#eff9f5 100%);
}

.stone-heading {
    max-width: 820px;
    margin: 0 auto 45px;
    text-align: center;
}

.stone-label,
.stone-cta-label {
    color: var(--stone-green);
    font-size: 15px;
    font-weight: 800;
    margin-bottom: 8px;
}

.stone-heading h2,
.stone-content h2 {
    color: var(--stone-blue);
    font-size: clamp(30px,4vw,44px);
    line-height: 1.15;
    font-weight: 800;
    margin: 0 0 14px;
}

.stone-heading p,
.stone-content > p {
    color: var(--stone-muted);
    line-height: 1.8;
    font-size: 16px;
    margin: 0;
}

.stone-line {
    width: 58px;
    height: 4px;
    border-radius: 4px;
    background: var(--stone-green);
    margin: 16px 0 22px;
}

    .stone-line.center {
        margin-left: auto;
        margin-right: auto;
    }

/* INTRO */
.stone-intro {
    padding: 72px 0 52px;
}

.stone-intro-card,
.stone-conditions,
.stone-detail-card {
    height: 100%;
    border: 1px solid var(--stone-border);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 12px 35px rgba(17,54,88,.07);
}

.stone-intro-card {
    padding: 34px;
}

    .stone-intro-card h2 {
        color: var(--stone-blue);
        font-size: clamp(30px,3.5vw,42px);
        font-weight: 800;
        margin: 0;
    }

    .stone-intro-card p {
        color: var(--stone-text);
        font-size: 16px;
        line-height: 1.85;
        margin-bottom: 15px;
    }

.stone-conditions {
    padding: 30px;
    background: linear-gradient(145deg,#f4fcf7,#eef9f4);
    border-color: #d5ecdf;
}

    .stone-conditions h3,
    .stone-card-title {
        color: var(--stone-blue);
        font-size: 24px;
        line-height: 1.25;
        font-weight: 800;
        margin: 0 0 20px;
    }

.stone-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .stone-list li {
        position: relative;
        padding: 0 0 13px 27px;
        line-height: 1.5;
        font-size: 15px;
    }

        .stone-list li::before {
            content: "\f26a";
            font-family: bootstrap-icons;
            position: absolute;
            left: 0;
            top: 0;
            color: var(--stone-green);
            font-weight: 700;
        }

.stone-note {
    margin-top: 18px;
    padding: 15px 18px;
    border-left: 4px solid var(--stone-green);
    border-radius: 8px;
    background: #f2faf5;
    color: #4e5f70;
    font-size: 14px;
    line-height: 1.65;
}

/* QUICK BENEFITS */
.stone-quick-card {
    height: 100%;
    padding: 24px;
    border: 1px solid var(--stone-border);
    border-radius: 15px;
    background: #fff;
    text-align: center;
}

.stone-quick-icon {
    width: 55px;
    height: 55px;
    display: grid;
    place-items: center;
    margin: 0 auto 13px;
    border-radius: 50%;
    background: #eaf8f0;
    color: var(--stone-green-dark);
    font-size: 24px;
}

.stone-quick-card h3 {
    color: var(--stone-blue);
    font-size: 18px;
    font-weight: 800;
    margin: 0 0 7px;
}

.stone-quick-card p {
    color: var(--stone-muted);
    font-size: 13px;
    line-height: 1.6;
    margin: 0;
}

/* PROCEDURE CARDS */
.stone-procedure-card {
    height: 100%;
    overflow: hidden;
    border-radius: 16px;
    background: #fff;
    border: 1px solid var(--stone-border);
    box-shadow: 0 8px 25px rgba(17,54,88,.06);
    transition: .25s ease;
}

    .stone-procedure-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 32px rgba(17,54,88,.11);
    }

.stone-procedure-image {
    display: block;
    width: 100%;
    height: 205px;
    object-fit: cover;
}

.stone-procedure-content {
    padding: 22px;
}

.stone-procedure-title {
    color: var(--stone-blue);
    font-size: 20px;
    line-height: 1.3;
    font-weight: 800;
    margin: 0 0 10px;
}

.stone-procedure-text {
    color: var(--stone-muted);
    font-size: 14px;
    line-height: 1.7;
    margin: 0 0 14px;
}

.stone-link {
    color: var(--stone-green-dark);
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
}

/* DETAIL CARDS */
.stone-detail-card {
    padding: 28px;
}

.stone-number {
    display: inline-grid;
    place-items: center;
    width: 39px;
    height: 39px;
    border-radius: 50%;
    background: #e8f7ee;
    color: var(--stone-green-dark);
    font-weight: 800;
    margin-bottom: 15px;
}

.stone-detail-card h3 {
    color: var(--stone-blue);
    font-size: 21px;
    font-weight: 800;
    margin: 0 0 10px;
}

.stone-detail-card p {
    color: var(--stone-muted);
    line-height: 1.75;
    font-size: 15px;
    margin: 0;
}

/* STONE TYPES */
.stone-type {
    height: 100%;
    padding: 26px;
    border-radius: 15px;
    background: #fff;
    border: 1px solid var(--stone-border);
    box-shadow: 0 8px 22px rgba(17,54,88,.05);
}

.stone-type-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #eaf5ff;
    color: var(--stone-blue);
    font-size: 21px;
    margin-bottom: 15px;
}

.stone-type h3 {
    color: var(--stone-blue);
    font-size: 19px;
    font-weight: 800;
    margin: 0 0 9px;
}

.stone-type p {
    color: var(--stone-muted);
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
}

/* TREATMENT TABLE */
.stone-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--stone-border);
    border-radius: 15px;
    box-shadow: 0 8px 24px rgba(17,54,88,.05);
}

.stone-table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    background: #fff;
}

    .stone-table th {
        padding: 16px 18px;
        background: var(--stone-blue);
        color: #fff;
        text-align: left;
        font-size: 14px;
    }

    .stone-table td {
        padding: 15px 18px;
        border-top: 1px solid var(--stone-border);
        color: var(--stone-text);
        font-size: 14px;
        line-height: 1.55;
    }

    .stone-table tr:nth-child(even) td {
        background: #f8fbfd;
    }

/* STEPS */
.stone-step {
    height: 100%;
    padding: 26px;
    border-radius: 15px;
    background: #fff;
    border: 1px solid var(--stone-border);
}

    .stone-step h3 {
        color: var(--stone-blue);
        font-size: 19px;
        font-weight: 800;
        margin: 0 0 8px;
    }

    .stone-step p {
        color: var(--stone-muted);
        font-size: 14px;
        line-height: 1.7;
        margin: 0;
    }

/* WARNING */
.stone-warning {
    margin-top: 20px;
    padding: 18px;
    border-radius: 12px;
    background: #fff8ed;
    border: 1px solid #f5dfbb;
    color: #68563e;
    font-size: 14px;
    line-height: 1.7;
}

/* FAQ */
.stone-faq {
    border: 1px solid var(--stone-border);
    border-radius: 13px;
    background: #fff;
    overflow: hidden;
    margin-bottom: 12px;
}

    .stone-faq summary {
        cursor: pointer;
        list-style: none;
        padding: 20px 24px;
        padding-right: 55px;
        position: relative;
        color: var(--stone-blue);
        font-weight: 800;
        font-size: 16px;
    }

        .stone-faq summary::-webkit-details-marker {
            display: none;
        }

        .stone-faq summary::after {
            content: "\f282";
            font-family: bootstrap-icons;
            position: absolute;
            right: 22px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--stone-green);
        }

    .stone-faq[open] summary::after {
        transform: translateY(-50%) rotate(180deg);
    }

.stone-faq-content {
    padding: 0 24px 21px;
    color: var(--stone-muted);
    line-height: 1.75;
    font-size: 15px;
}

/* CTA */
.stone-cta {
    padding: 78px 0;
    background: linear-gradient(135deg,#edf9f3 0%,#f0f8ff 100%);
}

.stone-cta-image {
    width: 100%;
    height: 320px;
    object-fit: cover;
    border-radius: 18px;
    box-shadow: 0 15px 35px rgba(17,54,88,.12);
}

.stone-cta h2 {
    color: var(--stone-blue);
    font-size: clamp(30px,4vw,46px);
    line-height: 1.15;
    font-weight: 800;
    margin: 0 0 15px;
}

.stone-cta p {
    color: var(--stone-muted);
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 23px;
}

.stone-disclaimer {
    padding: 25px 0;
    background: #f7f9fb;
    border-top: 1px solid #e7edf2;
}

    .stone-disclaimer p {
        margin: 0;
        color: #718092;
        font-size: 13px;
        line-height: 1.7;
        text-align: center;
    }

@media (max-width: 991px) {
    .stone-hero {
        min-height: 560px;
    }

    .stone-section, .stone-cta {
        padding: 60px 0;
    }
}

@media (max-width: 767px) {
    .stone-hero {
        min-height: 630px;
    }

    .stone-hero-content {
        padding: 62px 0;
    }

    .stone-hero-lead {
        font-size: 16px;
    }

    .stone-trust {
        display: grid;
        gap: 10px;
    }

    .stone-intro {
        padding-top: 50px;
    }

    .stone-intro-card, .stone-conditions {
        padding: 24px;
    }

    .stone-procedure-image {
        height: 220px;
    }

    .stone-cta-image {
        height: 250px;
    }
}

/* =========================================================
       ENDOSCOPIC PROSTATE SURGERY
========================================================= */
.prostate-page {
    --p-blue: #063b7a;
    --p-blue-dark: #052e60;
    --p-green: #28a65a;
    --p-green-dark: #168443;
    --p-soft-blue: #f2f8fd;
    --p-soft-green: #f1fbf5;
    --p-text: #33445c;
    --p-muted: #66758a;
    --p-border: #dfe9f1;
    color: var(--p-text);
    background: #fff;
}

    .prostate-page * {
        box-sizing: border-box;
    }

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

.prostate-hero {
    position: relative;
    min-height: 500px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: linear-gradient(90deg, rgba(3,37,76,.94) 0%, rgba(5,57,111,.82) 46%, rgba(5,57,111,.28) 100%), url('/assets/img/services/endoscopic-prostate-surgery.jpg') center/cover no-repeat;
}

.prostate-hero-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
    padding: 78px 0 70px;
}

.prostate-breadcrumb {
    margin-bottom: 22px;
}

    .prostate-breadcrumb ol {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        list-style: none;
        padding: 0;
        margin: 0;
        font-size: 14px;
    }

    .prostate-breadcrumb a,
    .prostate-breadcrumb li {
        color: rgba(255,255,255,.85);
        text-decoration: none;
    }

        .prostate-breadcrumb li + li::before {
            content: "›";
            margin-right: 8px;
            color: #8ee3ae;
        }

.prostate-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    margin-bottom: 18px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 999px;
    background: rgba(255,255,255,.09);
    color: #d9ffe7;
    font-size: 14px;
    font-weight: 700;
}

.prostate-hero h1 {
    margin: 0 0 18px;
    color: #fff;
    font-size: clamp(38px, 5vw, 66px);
    line-height: 1.06;
    font-weight: 800;
    letter-spacing: -.8px;
}

    .prostate-hero h1 span {
        color: #62d784;
    }

.prostate-hero-lead {
    max-width: 780px;
    margin: 0 0 28px;
    color: rgba(255,255,255,.93);
    font-size: 19px;
    line-height: 1.7;
}

.prostate-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 26px;
}

.prostate-btn,
.prostate-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 48px;
    padding: 12px 21px;
    border-radius: 9px;
    font-weight: 700;
    text-decoration: none;
    transition: .25s ease;
}

.prostate-btn {
    color: #fff;
    background: linear-gradient(135deg,#0879d8,#20a35b);
    box-shadow: 0 10px 25px rgba(0,0,0,.16);
}

    .prostate-btn:hover {
        color: #fff;
        transform: translateY(-2px);
    }

.prostate-btn-outline {
    color: #fff;
    border: 1px solid rgba(255,255,255,.5);
    background: rgba(255,255,255,.08);
}

    .prostate-btn-outline:hover {
        color: var(--p-blue);
        background: #fff;
    }

.prostate-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 15px 24px;
    color: rgba(255,255,255,.92);
    font-size: 14px;
}

    .prostate-trust span {
        display: inline-flex;
        align-items: center;
        gap: 7px;
    }

    .prostate-trust i {
        color: #65dc87;
    }

/* =====================================================
       GENERAL
       ===================================================== */

.prostate-section {
    padding: 78px 0;
}

.prostate-section-light {
    background: var(--p-soft-blue);
}

.prostate-section-soft {
    background: linear-gradient(180deg,#f7fcfa 0%,#eff9f5 100%);
}

.prostate-heading {
    max-width: 820px;
    margin: 0 auto 45px;
    text-align: center;
}

.prostate-label,
.prostate-cta-label {
    margin-bottom: 8px;
    color: var(--p-green);
    font-size: 15px;
    font-weight: 800;
}

.prostate-heading h2,
.prostate-content h2 {
    margin: 0 0 14px;
    color: var(--p-blue);
    font-size: clamp(30px,4vw,44px);
    line-height: 1.15;
    font-weight: 800;
}

.prostate-heading p,
.prostate-content > p {
    margin: 0;
    color: var(--p-muted);
    font-size: 16px;
    line-height: 1.8;
}

.prostate-line {
    width: 58px;
    height: 4px;
    margin: 16px 0 22px;
    border-radius: 4px;
    background: var(--p-green);
}

    .prostate-line.center {
        margin-left: auto;
        margin-right: auto;
    }

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

.prostate-intro {
    padding: 72px 0 52px;
}

.prostate-intro-card,
.prostate-condition-card,
.prostate-detail-card {
    height: 100%;
    border: 1px solid var(--p-border);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 12px 35px rgba(17,54,88,.07);
}

.prostate-intro-card {
    padding: 34px;
}

    .prostate-intro-card h2 {
        margin: 0;
        color: var(--p-blue);
        font-size: clamp(30px,3.5vw,42px);
        font-weight: 800;
    }

    .prostate-intro-card p {
        margin-bottom: 15px;
        color: var(--p-text);
        font-size: 16px;
        line-height: 1.85;
    }

.prostate-condition-card {
    padding: 30px;
    background: linear-gradient(145deg,#f4fcf7,#eef9f4);
    border-color: #d5ecdf;
}

    .prostate-condition-card h3,
    .prostate-card-title {
        margin: 0 0 20px;
        color: var(--p-blue);
        font-size: 24px;
        line-height: 1.25;
        font-weight: 800;
    }

.prostate-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .prostate-list li {
        position: relative;
        padding: 0 0 13px 27px;
        font-size: 15px;
        line-height: 1.5;
    }

        .prostate-list li::before {
            content: "\f26a";
            position: absolute;
            left: 0;
            top: 0;
            color: var(--p-green);
            font-family: bootstrap-icons;
            font-weight: 700;
        }

.prostate-note {
    margin-top: 18px;
    padding: 15px 18px;
    border-left: 4px solid var(--p-green);
    border-radius: 8px;
    background: #f2faf5;
    color: #4e5f70;
    font-size: 14px;
    line-height: 1.65;
}

/* =====================================================
       QUICK CARDS
       ===================================================== */

.prostate-quick-card {
    height: 100%;
    padding: 26px 22px;
    border: 1px solid var(--p-border);
    border-radius: 15px;
    background: #fff;
    text-align: center;
    box-shadow: 0 8px 22px rgba(17,54,88,.05);
}

.prostate-quick-icon {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: #eaf8f0;
    color: var(--p-green-dark);
    font-size: 24px;
}

.prostate-quick-card h3 {
    margin: 0 0 8px;
    color: var(--p-blue);
    font-size: 19px;
    font-weight: 800;
}

.prostate-quick-card p {
    margin: 0;
    color: var(--p-muted);
    font-size: 14px;
    line-height: 1.65;
}

/* =====================================================
       PROCEDURES
       ===================================================== */

.prostate-procedure-card {
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--p-border);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 25px rgba(17,54,88,.06);
    transition: .25s ease;
}

    .prostate-procedure-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 32px rgba(17,54,88,.11);
    }

.prostate-procedure-image {
    display: block;
    width: 100%;
    height: 205px;
    object-fit: cover;
}

.prostate-procedure-content {
    padding: 22px;
}

.prostate-procedure-title {
    margin: 0 0 10px;
    color: var(--p-blue);
    font-size: 20px;
    line-height: 1.3;
    font-weight: 800;
}

.prostate-procedure-text {
    margin: 0 0 14px;
    color: var(--p-muted);
    font-size: 14px;
    line-height: 1.7;
}

.prostate-link {
    color: var(--p-green-dark);
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
}

/* =====================================================
       DETAILS
       ===================================================== */

.prostate-detail-card {
    padding: 28px;
}

.prostate-number {
    width: 39px;
    height: 39px;
    display: inline-grid;
    place-items: center;
    margin-bottom: 15px;
    border-radius: 50%;
    background: #e8f7ee;
    color: var(--p-green-dark);
    font-weight: 800;
}

.prostate-detail-card h3 {
    margin: 0 0 10px;
    color: var(--p-blue);
    font-size: 21px;
    font-weight: 800;
}

.prostate-detail-card p {
    margin: 0;
    color: var(--p-muted);
    font-size: 15px;
    line-height: 1.75;
}

/* =====================================================
       SYMPTOMS
       ===================================================== */

.prostate-symptom {
    height: 100%;
    padding: 25px;
    border: 1px solid var(--p-border);
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(17,54,88,.05);
}

.prostate-symptom-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    margin-bottom: 15px;
    border-radius: 12px;
    background: #eaf5ff;
    color: var(--p-blue);
    font-size: 21px;
}

.prostate-symptom h3 {
    margin: 0 0 9px;
    color: var(--p-blue);
    font-size: 19px;
    font-weight: 800;
}

.prostate-symptom p {
    margin: 0;
    color: var(--p-muted);
    font-size: 14px;
    line-height: 1.7;
}

/* =====================================================
       COMPARISON TABLE
       ===================================================== */

.prostate-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--p-border);
    border-radius: 15px;
    box-shadow: 0 8px 24px rgba(17,54,88,.05);
}

.prostate-table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    background: #fff;
}

    .prostate-table th {
        padding: 16px 18px;
        background: var(--p-blue);
        color: #fff;
        text-align: left;
        font-size: 14px;
    }

    .prostate-table td {
        padding: 15px 18px;
        border-top: 1px solid var(--p-border);
        color: var(--p-text);
        font-size: 14px;
        line-height: 1.55;
    }

    .prostate-table tr:nth-child(even) td {
        background: #f8fbfd;
    }

/* =====================================================
       PATIENT JOURNEY
       ===================================================== */

.prostate-step {
    height: 100%;
    padding: 26px;
    border: 1px solid var(--p-border);
    border-radius: 15px;
    background: #fff;
}

    .prostate-step h3 {
        margin: 0 0 8px;
        color: var(--p-blue);
        font-size: 19px;
        font-weight: 800;
    }

    .prostate-step p {
        margin: 0;
        color: var(--p-muted);
        font-size: 14px;
        line-height: 1.7;
    }

/* =====================================================
       WARNING
       ===================================================== */

.prostate-warning {
    margin-top: 20px;
    padding: 18px;
    border: 1px solid #f5dfbb;
    border-radius: 12px;
    background: #fff8ed;
    color: #68563e;
    font-size: 14px;
    line-height: 1.7;
}

/* =====================================================
       FAQ
       ===================================================== */

.prostate-faq {
    overflow: hidden;
    margin-bottom: 12px;
    border: 1px solid var(--p-border);
    border-radius: 13px;
    background: #fff;
}

    .prostate-faq summary {
        position: relative;
        cursor: pointer;
        list-style: none;
        padding: 20px 55px 20px 24px;
        color: var(--p-blue);
        font-size: 16px;
        font-weight: 800;
    }

        .prostate-faq summary::-webkit-details-marker {
            display: none;
        }

        .prostate-faq summary::after {
            content: "\f282";
            position: absolute;
            right: 22px;
            top: 50%;
            color: var(--p-green);
            font-family: bootstrap-icons;
            transform: translateY(-50%);
        }

    .prostate-faq[open] summary::after {
        transform: translateY(-50%) rotate(180deg);
    }

.prostate-faq-content {
    padding: 0 24px 21px;
    color: var(--p-muted);
    font-size: 15px;
    line-height: 1.75;
}

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

.prostate-cta {
    padding: 78px 0;
    background: linear-gradient(135deg,#edf9f3 0%,#f0f8ff 100%);
}

.prostate-cta-image {
    width: 100%;
    height: 320px;
    object-fit: cover;
    border-radius: 18px;
    box-shadow: 0 15px 35px rgba(17,54,88,.12);
}

.prostate-cta h2 {
    margin: 0 0 15px;
    color: var(--p-blue);
    font-size: clamp(30px,4vw,46px);
    line-height: 1.15;
    font-weight: 800;
}

.prostate-cta p {
    margin-bottom: 23px;
    color: var(--p-muted);
    font-size: 16px;
    line-height: 1.8;
}

.prostate-disclaimer {
    padding: 25px 0;
    border-top: 1px solid #e7edf2;
    background: #f7f9fb;
}

    .prostate-disclaimer p {
        margin: 0;
        color: #718092;
        font-size: 13px;
        line-height: 1.7;
        text-align: center;
    }

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

@media (max-width: 991px) {
    .prostate-hero {
        min-height: 560px;
    }

    .prostate-section,
    .prostate-cta {
        padding: 60px 0;
    }
}

@media (max-width: 767px) {
    .prostate-hero {
        min-height: 630px;
    }

    .prostate-hero-content {
        padding: 62px 0;
    }

    .prostate-hero-lead {
        font-size: 16px;
    }

    .prostate-trust {
        display: grid;
        gap: 10px;
    }

    .prostate-intro {
        padding-top: 50px;
    }

    .prostate-intro-card,
    .prostate-condition-card {
        padding: 24px;
    }

    .prostate-procedure-image {
        height: 220px;
    }

    .prostate-cta-image {
        height: 250px;
    }
}

/* =========================================================
       LAPAROSCOPIC KIDNEY SURGERY
========================================================= */
.lap-kidney-page {
    --lk-blue: #063b7a;
    --lk-blue-dark: #052e60;
    --lk-green: #28a65a;
    --lk-green-dark: #168443;
    --lk-soft-blue: #f2f8fd;
    --lk-soft-green: #f1fbf5;
    --lk-text: #33445c;
    --lk-muted: #66758a;
    --lk-border: #dfe9f1;
    color: var(--lk-text);
    background: #fff;
}

    .lap-kidney-page * {
        box-sizing: border-box;
    }

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

.lk-hero {
    position: relative;
    min-height: 500px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: linear-gradient(90deg, rgba(3,37,76,.94) 0%, rgba(5,57,111,.82) 46%, rgba(5,57,111,.24) 100%), url('/assets/img/services/laparoscopic-kidney-surgery.jpg') center/cover no-repeat;
}

.lk-hero-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
    padding: 78px 0 70px;
}

.lk-breadcrumb {
    margin-bottom: 22px;
}

    .lk-breadcrumb ol {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        list-style: none;
        padding: 0;
        margin: 0;
        font-size: 14px;
    }

    .lk-breadcrumb li,
    .lk-breadcrumb a {
        color: rgba(255,255,255,.85);
        text-decoration: none;
    }

        .lk-breadcrumb li + li::before {
            content: "›";
            margin-right: 8px;
            color: #8ee3ae;
        }

.lk-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    margin-bottom: 18px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 999px;
    background: rgba(255,255,255,.09);
    color: #d9ffe7;
    font-size: 14px;
    font-weight: 700;
}

.lk-hero h1 {
    margin: 0 0 18px;
    color: #fff;
    font-size: clamp(38px, 5vw, 66px);
    line-height: 1.06;
    font-weight: 800;
    letter-spacing: -.8px;
}

    .lk-hero h1 span {
        color: #62d784;
    }

.lk-hero-lead {
    max-width: 790px;
    margin: 0 0 28px;
    color: rgba(255,255,255,.93);
    font-size: 19px;
    line-height: 1.7;
}

.lk-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 26px;
}

.lk-btn,
.lk-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 48px;
    padding: 12px 21px;
    border-radius: 9px;
    font-weight: 700;
    text-decoration: none;
    transition: .25s ease;
}

.lk-btn {
    color: #fff;
    background: linear-gradient(135deg,#0879d8,#20a35b);
    box-shadow: 0 10px 25px rgba(0,0,0,.16);
}

    .lk-btn:hover {
        color: #fff;
        transform: translateY(-2px);
    }

.lk-btn-outline {
    color: #fff;
    border: 1px solid rgba(255,255,255,.5);
    background: rgba(255,255,255,.08);
}

    .lk-btn-outline:hover {
        color: var(--lk-blue);
        background: #fff;
    }

.lk-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 15px 24px;
    color: rgba(255,255,255,.92);
    font-size: 14px;
}

    .lk-trust span {
        display: inline-flex;
        align-items: center;
        gap: 7px;
    }

    .lk-trust i {
        color: #65dc87;
    }

/* =====================================================
       GENERAL
       ===================================================== */

.lk-section {
    padding: 78px 0;
}

.lk-section-light {
    background: var(--lk-soft-blue);
}

.lk-section-soft {
    background: linear-gradient(180deg,#f7fcfa 0%,#eff9f5 100%);
}

.lk-heading {
    max-width: 840px;
    margin: 0 auto 45px;
    text-align: center;
}

.lk-label,
.lk-cta-label {
    color: var(--lk-green);
    font-size: 15px;
    font-weight: 800;
    margin-bottom: 8px;
}

.lk-heading h2,
.lk-content h2 {
    color: var(--lk-blue);
    font-size: clamp(30px,4vw,44px);
    line-height: 1.15;
    font-weight: 800;
    margin: 0 0 14px;
}

.lk-heading p,
.lk-content > p {
    color: var(--lk-muted);
    line-height: 1.8;
    font-size: 16px;
    margin: 0;
}

.lk-line {
    width: 58px;
    height: 4px;
    border-radius: 4px;
    background: var(--lk-green);
    margin: 16px 0 22px;
}

    .lk-line.center {
        margin-left: auto;
        margin-right: auto;
    }

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

.lk-intro {
    padding: 72px 0 52px;
}

.lk-intro-card,
.lk-condition-card,
.lk-detail-card {
    height: 100%;
    border: 1px solid var(--lk-border);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 12px 35px rgba(17,54,88,.07);
}

.lk-intro-card {
    padding: 34px;
}

    .lk-intro-card h2 {
        color: var(--lk-blue);
        font-size: clamp(30px,3.5vw,42px);
        font-weight: 800;
        margin: 0;
    }

    .lk-intro-card p {
        color: var(--lk-text);
        font-size: 16px;
        line-height: 1.85;
        margin-bottom: 15px;
    }

.lk-condition-card {
    padding: 30px;
    background: linear-gradient(145deg,#f4fcf7,#eef9f4);
    border-color: #d5ecdf;
}

    .lk-condition-card h3,
    .lk-card-title {
        color: var(--lk-blue);
        font-size: 24px;
        line-height: 1.25;
        font-weight: 800;
        margin: 0 0 20px;
    }

.lk-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .lk-list li {
        position: relative;
        padding: 0 0 13px 27px;
        line-height: 1.5;
        font-size: 15px;
    }

        .lk-list li::before {
            content: "\f26a";
            font-family: bootstrap-icons;
            position: absolute;
            left: 0;
            top: 0;
            color: var(--lk-green);
            font-weight: 700;
        }

.lk-note {
    margin-top: 18px;
    padding: 15px 18px;
    border-left: 4px solid var(--lk-green);
    border-radius: 8px;
    background: #f2faf5;
    color: #4e5f70;
    font-size: 14px;
    line-height: 1.65;
}

/* =====================================================
       BENEFITS
       ===================================================== */

.lk-benefit-card {
    height: 100%;
    padding: 26px 22px;
    border: 1px solid var(--lk-border);
    border-radius: 15px;
    background: #fff;
    text-align: center;
    box-shadow: 0 8px 22px rgba(17,54,88,.05);
}

.lk-benefit-icon {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: #eaf8f0;
    color: var(--lk-green-dark);
    font-size: 24px;
}

.lk-benefit-card h3 {
    color: var(--lk-blue);
    font-size: 19px;
    font-weight: 800;
    margin: 0 0 8px;
}

.lk-benefit-card p {
    color: var(--lk-muted);
    font-size: 14px;
    line-height: 1.65;
    margin: 0;
}

/* =====================================================
       PROCEDURE CARDS
       ===================================================== */

.lk-procedure-card {
    height: 100%;
    overflow: hidden;
    border-radius: 16px;
    background: #fff;
    border: 1px solid var(--lk-border);
    box-shadow: 0 8px 25px rgba(17,54,88,.06);
    transition: .25s ease;
}

    .lk-procedure-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 32px rgba(17,54,88,.11);
    }

.lk-procedure-image {
    display: block;
    width: 100%;
    /*height: 205px;*/
    object-fit: cover;
}

.lk-procedure-content {
    padding: 22px;
}

.lk-procedure-title {
    color: var(--lk-blue);
    font-size: 20px;
    line-height: 1.3;
    font-weight: 800;
    margin: 0 0 10px;
}

.lk-procedure-text {
    color: var(--lk-muted);
    font-size: 14px;
    line-height: 1.7;
    margin: 0 0 14px;
}

.lk-link {
    color: var(--lk-green-dark);
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
}

/* =====================================================
       DETAIL CARDS
       ===================================================== */

.lk-detail-card {
    padding: 28px;
}

.lk-number {
    display: inline-grid;
    place-items: center;
    width: 39px;
    height: 39px;
    border-radius: 50%;
    background: #e8f7ee;
    color: var(--lk-green-dark);
    font-weight: 800;
    margin-bottom: 15px;
}

.lk-detail-card h3 {
    color: var(--lk-blue);
    font-size: 21px;
    font-weight: 800;
    margin: 0 0 10px;
}

.lk-detail-card p {
    color: var(--lk-muted);
    line-height: 1.75;
    font-size: 15px;
    margin: 0;
}

/* =====================================================
       CONDITIONS
       ===================================================== */

.lk-condition-small {
    height: 100%;
    padding: 26px;
    border-radius: 15px;
    background: #fff;
    border: 1px solid var(--lk-border);
    box-shadow: 0 8px 22px rgba(17,54,88,.05);
}

.lk-condition-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #eaf5ff;
    color: var(--lk-blue);
    font-size: 21px;
    margin-bottom: 15px;
}

.lk-condition-small h3 {
    color: var(--lk-blue);
    font-size: 19px;
    font-weight: 800;
    margin: 0 0 9px;
}

.lk-condition-small p {
    color: var(--lk-muted);
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
}

/* =====================================================
       TREATMENT TABLE
       ===================================================== */

.lk-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--lk-border);
    border-radius: 15px;
    box-shadow: 0 8px 24px rgba(17,54,88,.05);
}

.lk-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
    background: #fff;
}

    .lk-table th {
        padding: 16px 18px;
        background: var(--lk-blue);
        color: #fff;
        text-align: left;
        font-size: 14px;
    }

    .lk-table td {
        padding: 15px 18px;
        border-top: 1px solid var(--lk-border);
        color: var(--lk-text);
        font-size: 14px;
        line-height: 1.55;
    }

    .lk-table tr:nth-child(even) td {
        background: #f8fbfd;
    }

/* =====================================================
       PATIENT JOURNEY
       ===================================================== */

.lk-step {
    height: 100%;
    padding: 26px;
    border-radius: 15px;
    background: #fff;
    border: 1px solid var(--lk-border);
}

    .lk-step h3 {
        color: var(--lk-blue);
        font-size: 19px;
        font-weight: 800;
        margin: 0 0 8px;
    }

    .lk-step p {
        color: var(--lk-muted);
        font-size: 14px;
        line-height: 1.7;
        margin: 0;
    }

/* =====================================================
       WARNING
       ===================================================== */

.lk-warning {
    margin-top: 20px;
    padding: 18px;
    border-radius: 12px;
    background: #fff8ed;
    border: 1px solid #f5dfbb;
    color: #68563e;
    font-size: 14px;
    line-height: 1.7;
}

/* =====================================================
       FAQ
       ===================================================== */

.lk-faq {
    border: 1px solid var(--lk-border);
    border-radius: 13px;
    background: #fff;
    overflow: hidden;
    margin-bottom: 12px;
}

    .lk-faq summary {
        cursor: pointer;
        list-style: none;
        padding: 20px 55px 20px 24px;
        position: relative;
        color: var(--lk-blue);
        font-weight: 800;
        font-size: 16px;
    }

        .lk-faq summary::-webkit-details-marker {
            display: none;
        }

        .lk-faq summary::after {
            content: "\f282";
            font-family: bootstrap-icons;
            position: absolute;
            right: 22px;
            top: 50%;
            color: var(--lk-green);
            transform: translateY(-50%);
        }

    .lk-faq[open] summary::after {
        transform: translateY(-50%) rotate(180deg);
    }

.lk-faq-content {
    padding: 0 24px 21px;
    color: var(--lk-muted);
    line-height: 1.75;
    font-size: 15px;
}

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

.lk-cta {
    padding: 78px 0;
    background: linear-gradient(135deg,#edf9f3 0%,#f0f8ff 100%);
}

.lk-cta-image {
    width: 100%;
    /*height: 320px;*/
    object-fit: cover;
    border-radius: 18px;
    box-shadow: 0 15px 35px rgba(17,54,88,.12);
}

.lk-cta h2 {
    color: var(--lk-blue);
    font-size: clamp(30px,4vw,46px);
    line-height: 1.15;
    font-weight: 800;
    margin: 0 0 15px;
}

.lk-cta p {
    color: var(--lk-muted);
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 23px;
}

.lk-disclaimer {
    padding: 25px 0;
    background: #f7f9fb;
    border-top: 1px solid #e7edf2;
}

    .lk-disclaimer p {
        margin: 0;
        color: #718092;
        font-size: 13px;
        line-height: 1.7;
        text-align: center;
    }

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

@media (max-width: 991px) {
    .lk-hero {
        min-height: 560px;
    }

    .lk-section,
    .lk-cta {
        padding: 60px 0;
    }
}

@media (max-width: 767px) {
    .lk-hero {
        min-height: 630px;
    }

    .lk-hero-content {
        padding: 62px 0;
    }

    .lk-hero-lead {
        font-size: 16px;
    }

    .lk-trust {
        display: grid;
        gap: 10px;
    }

    .lk-intro {
        padding-top: 50px;
    }

    .lk-intro-card,
    .lk-condition-card {
        padding: 24px;
    }

    .lk-procedure-image {
        /*height: 220px;*/
    }

    .lk-cta-image {
        /*height: 250px;*/
    }
}

/* =========================================================
       RETROPERITONEOSCOPIC SURGERY
       Same blue + green visual language as Endo Urology page
       ========================================================= */

.retro-page {
    --r-blue: #063b7a;
    --r-blue-dark: #052e60;
    --r-green: #28a65a;
    --r-green-dark: #168443;
    --r-soft-blue: #f2f8fd;
    --r-soft-green: #f1fbf5;
    --r-text: #33445c;
    --r-muted: #66758a;
    --r-border: #dfe9f1;
    color: var(--r-text);
    background: #fff;
}

    .retro-page * {
        box-sizing: border-box;
    }

/* HERO */
.retro-hero {
    position: relative;
    min-height: 500px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: linear-gradient(90deg, rgba(3,37,76,.94) 0%, rgba(5,57,111,.82) 46%, rgba(5,57,111,.25) 100%), url('/assets/img/services/retroperitoneoscopic-surgery.jpg') center/cover no-repeat;
}

.retro-hero-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
    padding: 78px 0 70px;
}

.retro-breadcrumb {
    margin-bottom: 22px;
}

    .retro-breadcrumb ol {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        list-style: none;
        padding: 0;
        margin: 0;
        font-size: 14px;
    }

    .retro-breadcrumb li,
    .retro-breadcrumb a {
        color: rgba(255,255,255,.85);
        text-decoration: none;
    }

        .retro-breadcrumb li + li::before {
            content: "›";
            margin-right: 8px;
            color: #8ee3ae;
        }

.retro-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    margin-bottom: 18px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 999px;
    background: rgba(255,255,255,.09);
    color: #d9ffe7;
    font-size: 14px;
    font-weight: 700;
}

.retro-hero h1 {
    margin: 0 0 18px;
    color: #fff;
    font-size: clamp(38px, 5vw, 66px);
    line-height: 1.06;
    font-weight: 800;
    letter-spacing: -.8px;
}

    .retro-hero h1 span {
        color: #62d784;
    }

.retro-hero-lead {
    max-width: 790px;
    margin: 0 0 28px;
    color: rgba(255,255,255,.93);
    font-size: 19px;
    line-height: 1.7;
}

.retro-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 26px;
}

.retro-btn,
.retro-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 48px;
    padding: 12px 21px;
    border-radius: 9px;
    font-weight: 700;
    text-decoration: none;
    transition: .25s ease;
}

.retro-btn {
    color: #fff;
    background: linear-gradient(135deg,#0879d8,#20a35b);
    box-shadow: 0 10px 25px rgba(0,0,0,.16);
}

    .retro-btn:hover {
        color: #fff;
        transform: translateY(-2px);
    }

.retro-btn-outline {
    color: #fff;
    border: 1px solid rgba(255,255,255,.5);
    background: rgba(255,255,255,.08);
}

    .retro-btn-outline:hover {
        color: var(--r-blue);
        background: #fff;
    }

.retro-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 15px 24px;
    color: rgba(255,255,255,.92);
    font-size: 14px;
}

    .retro-trust span {
        display: inline-flex;
        align-items: center;
        gap: 7px;
    }

    .retro-trust i {
        color: #65dc87;
    }

/* GENERAL */
.retro-section {
    padding: 78px 0;
}

.retro-section-light {
    background: var(--r-soft-blue);
}

.retro-section-soft {
    background: linear-gradient(180deg,#f7fcfa 0%,#eff9f5 100%);
}

.retro-heading {
    max-width: 840px;
    margin: 0 auto 45px;
    text-align: center;
}

.retro-label,
.retro-cta-label {
    color: var(--r-green);
    font-size: 15px;
    font-weight: 800;
    margin-bottom: 8px;
}

.retro-heading h2,
.retro-content h2 {
    color: var(--r-blue);
    font-size: clamp(30px,4vw,44px);
    line-height: 1.15;
    font-weight: 800;
    margin: 0 0 14px;
}

.retro-heading p,
.retro-content > p {
    color: var(--r-muted);
    line-height: 1.8;
    font-size: 16px;
    margin: 0;
}

.retro-line {
    width: 58px;
    height: 4px;
    border-radius: 4px;
    background: var(--r-green);
    margin: 16px 0 22px;
}

    .retro-line.center {
        margin-left: auto;
        margin-right: auto;
    }

/* INTRO */
.retro-intro {
    padding: 72px 0 52px;
}

.retro-intro-card,
.retro-condition-card,
.retro-detail-card {
    height: 100%;
    border: 1px solid var(--r-border);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 12px 35px rgba(17,54,88,.07);
}

.retro-intro-card {
    padding: 34px;
}

    .retro-intro-card h2 {
        color: var(--r-blue);
        font-size: clamp(30px,3.5vw,42px);
        font-weight: 800;
        margin: 0;
    }

    .retro-intro-card p {
        color: var(--r-text);
        font-size: 16px;
        line-height: 1.85;
        margin-bottom: 15px;
    }

.retro-condition-card {
    padding: 30px;
    background: linear-gradient(145deg,#f4fcf7,#eef9f4);
    border-color: #d5ecdf;
}

    .retro-condition-card h3,
    .retro-card-title {
        color: var(--r-blue);
        font-size: 24px;
        line-height: 1.25;
        font-weight: 800;
        margin: 0 0 20px;
    }

.retro-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .retro-list li {
        position: relative;
        padding: 0 0 13px 27px;
        line-height: 1.5;
        font-size: 15px;
    }

        .retro-list li::before {
            content: "\f26a";
            font-family: bootstrap-icons;
            position: absolute;
            left: 0;
            top: 0;
            color: var(--r-green);
            font-weight: 700;
        }

.retro-note {
    margin-top: 18px;
    padding: 15px 18px;
    border-left: 4px solid var(--r-green);
    border-radius: 8px;
    background: #f2faf5;
    color: #4e5f70;
    font-size: 14px;
    line-height: 1.65;
}

/* BENEFITS */
.retro-benefit-card {
    height: 100%;
    padding: 26px 22px;
    border: 1px solid var(--r-border);
    border-radius: 15px;
    background: #fff;
    text-align: center;
    box-shadow: 0 8px 22px rgba(17,54,88,.05);
}

.retro-benefit-icon {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: #eaf8f0;
    color: var(--r-green-dark);
    font-size: 24px;
}

.retro-benefit-card h3 {
    color: var(--r-blue);
    font-size: 19px;
    font-weight: 800;
    margin: 0 0 8px;
}

.retro-benefit-card p {
    color: var(--r-muted);
    font-size: 14px;
    line-height: 1.65;
    margin: 0;
}

/* PROCEDURES */
.retro-procedure-card {
    height: 100%;
    overflow: hidden;
    border-radius: 16px;
    background: #fff;
    border: 1px solid var(--r-border);
    box-shadow: 0 8px 25px rgba(17,54,88,.06);
    transition: .25s ease;
}

    .retro-procedure-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 32px rgba(17,54,88,.11);
    }

.retro-procedure-image {
    display: block;
    width: 100%;
    /*height: 205px;*/
    object-fit: cover;
}

.retro-procedure-content {
    padding: 22px;
}

.retro-procedure-title {
    color: var(--r-blue);
    font-size: 20px;
    line-height: 1.3;
    font-weight: 800;
    margin: 0 0 10px;
}

.retro-procedure-text {
    color: var(--r-muted);
    font-size: 14px;
    line-height: 1.7;
    margin: 0 0 14px;
}

.retro-link {
    color: var(--r-green-dark);
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
}

/* DETAIL CARDS */
.retro-detail-card {
    padding: 28px;
}

.retro-number {
    display: inline-grid;
    place-items: center;
    width: 39px;
    height: 39px;
    border-radius: 50%;
    background: #e8f7ee;
    color: var(--r-green-dark);
    font-weight: 800;
    margin-bottom: 15px;
}

.retro-detail-card h3 {
    color: var(--r-blue);
    font-size: 21px;
    font-weight: 800;
    margin: 0 0 10px;
}

.retro-detail-card p {
    color: var(--r-muted);
    line-height: 1.75;
    font-size: 15px;
    margin: 0;
}

/* CONDITION CARDS */
.retro-condition-small {
    height: 100%;
    padding: 26px;
    border-radius: 15px;
    background: #fff;
    border: 1px solid var(--r-border);
    box-shadow: 0 8px 22px rgba(17,54,88,.05);
}

.retro-condition-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #eaf5ff;
    color: var(--r-blue);
    font-size: 21px;
    margin-bottom: 15px;
}

.retro-condition-small h3 {
    color: var(--r-blue);
    font-size: 19px;
    font-weight: 800;
    margin: 0 0 9px;
}

.retro-condition-small p {
    color: var(--r-muted);
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
}

/* TABLE */
.retro-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--r-border);
    border-radius: 15px;
    box-shadow: 0 8px 24px rgba(17,54,88,.05);
}

.retro-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
    background: #fff;
}

    .retro-table th {
        padding: 16px 18px;
        background: var(--r-blue);
        color: #fff;
        text-align: left;
        font-size: 14px;
    }

    .retro-table td {
        padding: 15px 18px;
        border-top: 1px solid var(--r-border);
        color: var(--r-text);
        font-size: 14px;
        line-height: 1.55;
    }

    .retro-table tr:nth-child(even) td {
        background: #f8fbfd;
    }

/* PATIENT JOURNEY */
.retro-step {
    height: 100%;
    padding: 26px;
    border-radius: 15px;
    background: #fff;
    border: 1px solid var(--r-border);
}

    .retro-step h3 {
        color: var(--r-blue);
        font-size: 19px;
        font-weight: 800;
        margin: 0 0 8px;
    }

    .retro-step p {
        color: var(--r-muted);
        font-size: 14px;
        line-height: 1.7;
        margin: 0;
    }

/* WARNING */
.retro-warning {
    margin-top: 20px;
    padding: 18px;
    border-radius: 12px;
    background: #fff8ed;
    border: 1px solid #f5dfbb;
    color: #68563e;
    font-size: 14px;
    line-height: 1.7;
}

/* FAQ */
.retro-faq {
    border: 1px solid var(--r-border);
    border-radius: 13px;
    background: #fff;
    overflow: hidden;
    margin-bottom: 12px;
}

    .retro-faq summary {
        cursor: pointer;
        list-style: none;
        padding: 20px 55px 20px 24px;
        position: relative;
        color: var(--r-blue);
        font-weight: 800;
        font-size: 16px;
    }

        .retro-faq summary::-webkit-details-marker {
            display: none;
        }

        .retro-faq summary::after {
            content: "\f282";
            font-family: bootstrap-icons;
            position: absolute;
            right: 22px;
            top: 50%;
            color: var(--r-green);
            transform: translateY(-50%);
        }

    .retro-faq[open] summary::after {
        transform: translateY(-50%) rotate(180deg);
    }

.retro-faq-content {
    padding: 0 24px 21px;
    color: var(--r-muted);
    line-height: 1.75;
    font-size: 15px;
}

/* CTA */
.retro-cta {
    padding: 78px 0;
    background: linear-gradient(135deg,#edf9f3 0%,#f0f8ff 100%);
}

.retro-cta-image {
    width: 100%;
    /*height: 320px;*/
    object-fit: cover;
    border-radius: 18px;
    box-shadow: 0 15px 35px rgba(17,54,88,.12);
}

.retro-cta h2 {
    color: var(--r-blue);
    font-size: clamp(30px,4vw,46px);
    line-height: 1.15;
    font-weight: 800;
    margin: 0 0 15px;
}

.retro-cta p {
    color: var(--r-muted);
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 23px;
}

.retro-disclaimer {
    padding: 25px 0;
    background: #f7f9fb;
    border-top: 1px solid #e7edf2;
}

    .retro-disclaimer p {
        margin: 0;
        color: #718092;
        font-size: 13px;
        line-height: 1.7;
        text-align: center;
    }

/* RESPONSIVE */
@media (max-width: 991px) {
    .retro-hero {
        min-height: 560px;
    }

    .retro-section,
    .retro-cta {
        padding: 60px 0;
    }
}

@media (max-width: 767px) {
    .retro-hero {
        min-height: 630px;
    }

    .retro-hero-content {
        padding: 62px 0;
    }

    .retro-hero-lead {
        font-size: 16px;
    }

    .retro-trust {
        display: grid;
        gap: 10px;
    }

    .retro-intro {
        padding-top: 50px;
    }

    .retro-intro-card,
    .retro-condition-card {
        padding: 24px;
    }

    .retro-procedure-image {
        height: 220px;
    }

    .retro-cta-image {
        height: 250px;
    }
}

/* =========================================================
       UROLOGICAL CANCER
       Same visual language as Endo Urology service pages
       ========================================================= */

.uro-cancer-page {
    --uc-blue: #063b7a;
    --uc-blue-dark: #052e60;
    --uc-green: #28a65a;
    --uc-green-dark: #168443;
    --uc-soft-blue: #f2f8fd;
    --uc-soft-green: #f1fbf5;
    --uc-text: #33445c;
    --uc-muted: #66758a;
    --uc-border: #dfe9f1;
    color: var(--uc-text);
    background: #fff;
}

    .uro-cancer-page * {
        box-sizing: border-box;
    }

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

.uc-hero {
    position: relative;
    min-height: 510px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: linear-gradient(90deg, rgba(3,37,76,.95) 0%, rgba(5,57,111,.83) 48%, rgba(5,57,111,.20) 100%), url('/assets/img/services/urological-cancer.jpg') center/cover no-repeat;
}

.uc-hero-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
    padding: 78px 0 70px;
}

.uc-breadcrumb {
    margin-bottom: 22px;
}

    .uc-breadcrumb ol {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        list-style: none;
        padding: 0;
        margin: 0;
        font-size: 14px;
    }

    .uc-breadcrumb li,
    .uc-breadcrumb a {
        color: rgba(255,255,255,.86);
        text-decoration: none;
    }

        .uc-breadcrumb li + li::before {
            content: "›";
            margin-right: 8px;
            color: #8ee3ae;
        }

.uc-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    margin-bottom: 18px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 999px;
    background: rgba(255,255,255,.09);
    color: #d9ffe7;
    font-size: 14px;
    font-weight: 700;
}

.uc-hero h1 {
    margin: 0 0 18px;
    color: #fff;
    font-size: clamp(38px, 5vw, 66px);
    line-height: 1.06;
    font-weight: 800;
    letter-spacing: -.8px;
}

    .uc-hero h1 span {
        color: #62d784;
    }

.uc-hero-lead {
    max-width: 800px;
    margin: 0 0 28px;
    color: rgba(255,255,255,.94);
    font-size: 19px;
    line-height: 1.7;
}

.uc-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 26px;
}

.uc-btn,
.uc-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 48px;
    padding: 12px 21px;
    border-radius: 9px;
    font-weight: 700;
    text-decoration: none;
    transition: .25s ease;
}

.uc-btn {
    color: #fff;
    background: linear-gradient(135deg,#0879d8,#20a35b);
    box-shadow: 0 10px 25px rgba(0,0,0,.16);
}

    .uc-btn:hover {
        color: #fff;
        transform: translateY(-2px);
    }

.uc-btn-outline {
    color: #fff;
    border: 1px solid rgba(255,255,255,.5);
    background: rgba(255,255,255,.08);
}

    .uc-btn-outline:hover {
        color: var(--uc-blue);
        background: #fff;
    }

.uc-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 15px 24px;
    color: rgba(255,255,255,.92);
    font-size: 14px;
}

    .uc-trust span {
        display: inline-flex;
        align-items: center;
        gap: 7px;
    }

    .uc-trust i {
        color: #65dc87;
    }

/* =====================================================
       GENERAL
       ===================================================== */

.uc-section {
    padding: 78px 0;
}

.uc-section-light {
    background: var(--uc-soft-blue);
}

.uc-section-soft {
    background: linear-gradient(180deg,#f7fcfa 0%,#eff9f5 100%);
}

.uc-heading {
    max-width: 860px;
    margin: 0 auto 45px;
    text-align: center;
}

.uc-label,
.uc-cta-label {
    color: var(--uc-green);
    font-size: 15px;
    font-weight: 800;
    margin-bottom: 8px;
}

.uc-heading h2,
.uc-content h2 {
    color: var(--uc-blue);
    font-size: clamp(30px,4vw,44px);
    line-height: 1.15;
    font-weight: 800;
    margin: 0 0 14px;
}

.uc-heading p,
.uc-content > p {
    color: var(--uc-muted);
    line-height: 1.8;
    font-size: 16px;
    margin: 0;
}

.uc-line {
    width: 58px;
    height: 4px;
    border-radius: 4px;
    background: var(--uc-green);
    margin: 16px 0 22px;
}

    .uc-line.center {
        margin-left: auto;
        margin-right: auto;
    }

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

.uc-intro {
    padding: 72px 0 52px;
}

.uc-intro-card,
.uc-cancer-list-card,
.uc-detail-card {
    height: 100%;
    border: 1px solid var(--uc-border);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 12px 35px rgba(17,54,88,.07);
}

.uc-intro-card {
    padding: 34px;
}

    .uc-intro-card h2 {
        color: var(--uc-blue);
        font-size: clamp(30px,3.5vw,42px);
        font-weight: 800;
        margin: 0;
    }

    .uc-intro-card p {
        color: var(--uc-text);
        font-size: 16px;
        line-height: 1.85;
        margin-bottom: 15px;
    }

.uc-cancer-list-card {
    padding: 30px;
    background: linear-gradient(145deg,#f4fcf7,#eef9f4);
    border-color: #d5ecdf;
}

    .uc-cancer-list-card h3,
    .uc-card-title {
        color: var(--uc-blue);
        font-size: 24px;
        line-height: 1.25;
        font-weight: 800;
        margin: 0 0 20px;
    }

.uc-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .uc-list li {
        position: relative;
        padding: 0 0 13px 27px;
        line-height: 1.5;
        font-size: 15px;
    }

        .uc-list li::before {
            content: "\f26a";
            font-family: bootstrap-icons;
            position: absolute;
            left: 0;
            top: 0;
            color: var(--uc-green);
            font-weight: 700;
        }

.uc-note {
    margin-top: 18px;
    padding: 15px 18px;
    border-left: 4px solid var(--uc-green);
    border-radius: 8px;
    background: #f2faf5;
    color: #4e5f70;
    font-size: 14px;
    line-height: 1.65;
}

/* =====================================================
       CANCER TYPE CARDS
       ===================================================== */

.uc-cancer-card {
    height: 100%;
    padding: 28px 24px;
    border: 1px solid var(--uc-border);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(17,54,88,.06);
    transition: .25s ease;
}

    .uc-cancer-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 14px 30px rgba(17,54,88,.10);
    }

.uc-cancer-icon {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    margin-bottom: 16px;
    border-radius: 14px;
    background: #eaf8f0;
    color: var(--uc-green-dark);
    font-size: 24px;
}

.uc-cancer-card h3 {
    color: var(--uc-blue);
    font-size: 21px;
    font-weight: 800;
    margin: 0 0 10px;
}

.uc-cancer-card p {
    color: var(--uc-muted);
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
}

/* =====================================================
       WARNING / SYMPTOMS
       ===================================================== */

.uc-symptom-card {
    height: 100%;
    padding: 28px;
    border-radius: 16px;
    border: 1px solid var(--uc-border);
    background: #fff;
    box-shadow: 0 8px 24px rgba(17,54,88,.05);
}

    .uc-symptom-card h3 {
        color: var(--uc-blue);
        font-size: 21px;
        font-weight: 800;
        margin: 0 0 14px;
    }

    .uc-symptom-card p {
        color: var(--uc-muted);
        font-size: 14px;
        line-height: 1.7;
    }

.uc-warning {
    margin-top: 20px;
    padding: 18px;
    border-radius: 12px;
    background: #fff8ed;
    border: 1px solid #f5dfbb;
    color: #68563e;
    font-size: 14px;
    line-height: 1.7;
}

/* =====================================================
       SCREENING / DIAGNOSIS
       ===================================================== */

.uc-step {
    height: 100%;
    padding: 27px;
    border-radius: 16px;
    border: 1px solid var(--uc-border);
    background: #fff;
    box-shadow: 0 8px 22px rgba(17,54,88,.05);
}

.uc-number {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #e8f7ee;
    color: var(--uc-green-dark);
    font-weight: 800;
    margin-bottom: 15px;
}

.uc-step h3 {
    color: var(--uc-blue);
    font-size: 20px;
    font-weight: 800;
    margin: 0 0 9px;
}

.uc-step p {
    color: var(--uc-muted);
    font-size: 14px;
    line-height: 1.75;
    margin: 0;
}

/* =====================================================
       PROCEDURE CARDS
       ===================================================== */

.uc-procedure-card {
    height: 100%;
    overflow: hidden;
    border-radius: 16px;
    background: #fff;
    border: 1px solid var(--uc-border);
    box-shadow: 0 8px 25px rgba(17,54,88,.06);
    transition: .25s ease;
}

    .uc-procedure-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 32px rgba(17,54,88,.11);
    }

.uc-procedure-image {
    display: block;
    width: 100%;
    /*height: 205px;*/
    object-fit: cover;
}

.uc-procedure-content {
    padding: 22px;
}

.uc-procedure-title {
    color: var(--uc-blue);
    font-size: 20px;
    line-height: 1.3;
    font-weight: 800;
    margin: 0 0 10px;
}

.uc-procedure-text {
    color: var(--uc-muted);
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
}

/* =====================================================
       TREATMENT TABLE
       ===================================================== */

.uc-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--uc-border);
    border-radius: 15px;
    box-shadow: 0 8px 24px rgba(17,54,88,.05);
}

.uc-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
    background: #fff;
}

    .uc-table th {
        padding: 16px 18px;
        background: var(--uc-blue);
        color: #fff;
        text-align: left;
        font-size: 14px;
    }

    .uc-table td {
        padding: 15px 18px;
        border-top: 1px solid var(--uc-border);
        color: var(--uc-text);
        font-size: 14px;
        line-height: 1.55;
    }

    .uc-table tr:nth-child(even) td {
        background: #f8fbfd;
    }

/* =====================================================
       WHY / BENEFITS
       ===================================================== */

.uc-benefit-card {
    height: 100%;
    padding: 26px 22px;
    border: 1px solid var(--uc-border);
    border-radius: 15px;
    background: #fff;
    text-align: center;
    box-shadow: 0 8px 22px rgba(17,54,88,.05);
}

.uc-benefit-icon {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: #eaf8f0;
    color: var(--uc-green-dark);
    font-size: 24px;
}

.uc-benefit-card h3 {
    color: var(--uc-blue);
    font-size: 19px;
    font-weight: 800;
    margin: 0 0 8px;
}

.uc-benefit-card p {
    color: var(--uc-muted);
    font-size: 14px;
    line-height: 1.65;
    margin: 0;
}

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

.uc-cta {
    padding: 78px 0;
    background: linear-gradient(135deg,#edf9f3 0%,#f0f8ff 100%);
}

.uc-cta-image {
    width: 100%;
    /*height: 320px;*/
    object-fit: cover;
    border-radius: 18px;
    box-shadow: 0 15px 35px rgba(17,54,88,.12);
}

.uc-cta h2 {
    color: var(--uc-blue);
    font-size: clamp(30px,4vw,46px);
    line-height: 1.15;
    font-weight: 800;
    margin: 0 0 15px;
}

.uc-cta p {
    color: var(--uc-muted);
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 23px;
}

.uc-disclaimer {
    padding: 25px 0;
    background: #f7f9fb;
    border-top: 1px solid #e7edf2;
}

    .uc-disclaimer p {
        margin: 0;
        color: #718092;
        font-size: 13px;
        line-height: 1.7;
        text-align: center;
    }

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

@media (max-width: 991px) {
    .uc-hero {
        min-height: 570px;
    }

    .uc-section,
    .uc-cta {
        padding: 60px 0;
    }
}

@media (max-width: 767px) {
    .uc-hero {
        min-height: 650px;
    }

    .uc-hero-content {
        padding: 62px 0;
    }

    .uc-hero-lead {
        font-size: 16px;
    }

    .uc-trust {
        display: grid;
        gap: 10px;
    }

    .uc-intro {
        padding-top: 50px;
    }

    .uc-intro-card,
    .uc-cancer-list-card {
        padding: 24px;
    }

    .uc-procedure-image {
        height: 220px;
    }

    .uc-cta-image {
        height: 250px;
    }
}

/* =========================================================
       PEDIATRIC UROLOGY
       Same visual language as the Endo Urology service page
       ========================================================= */

.pediatric-page {
    --p-blue: #063b7a;
    --p-blue-dark: #052e60;
    --p-green: #28a65a;
    --p-green-dark: #168443;
    --p-soft-blue: #f2f8fd;
    --p-soft-green: #f1fbf5;
    --p-text: #33445c;
    --p-muted: #66758a;
    --p-border: #dfe9f1;
    color: var(--p-text);
    background: #fff;
}

    .pediatric-page * {
        box-sizing: border-box;
    }

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

.pu-hero {
    position: relative;
    min-height: 510px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: linear-gradient(90deg, rgba(3,37,76,.94) 0%, rgba(5,57,111,.80) 48%, rgba(5,57,111,.18) 100%), url('/assets/img/services/pediatric-urology.jpg') center/cover no-repeat;
}

.pu-hero-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
    padding: 78px 0 70px;
}

.pu-breadcrumb {
    margin-bottom: 22px;
}

    .pu-breadcrumb ol {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        list-style: none;
        padding: 0;
        margin: 0;
        font-size: 14px;
    }

    .pu-breadcrumb li,
    .pu-breadcrumb a {
        color: rgba(255,255,255,.86);
        text-decoration: none;
    }

        .pu-breadcrumb li + li::before {
            content: "›";
            margin-right: 8px;
            color: #8ee3ae;
        }

.pu-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    margin-bottom: 18px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 999px;
    background: rgba(255,255,255,.09);
    color: #d9ffe7;
    font-size: 14px;
    font-weight: 700;
}

.pu-hero h1 {
    margin: 0 0 18px;
    color: #fff;
    font-size: clamp(38px, 5vw, 66px);
    line-height: 1.06;
    font-weight: 800;
    letter-spacing: -.8px;
}

    .pu-hero h1 span {
        color: #62d784;
    }

.pu-hero-lead {
    max-width: 800px;
    margin: 0 0 28px;
    color: rgba(255,255,255,.94);
    font-size: 19px;
    line-height: 1.7;
}

.pu-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 26px;
}

.pu-btn,
.pu-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 48px;
    padding: 12px 21px;
    border-radius: 9px;
    font-weight: 700;
    text-decoration: none;
    transition: .25s ease;
}

.pu-btn {
    color: #fff;
    background: linear-gradient(135deg,#0879d8,#20a35b);
    box-shadow: 0 10px 25px rgba(0,0,0,.16);
}

    .pu-btn:hover {
        color: #fff;
        transform: translateY(-2px);
    }

.pu-btn-outline {
    color: #fff;
    border: 1px solid rgba(255,255,255,.5);
    background: rgba(255,255,255,.08);
}

    .pu-btn-outline:hover {
        color: var(--p-blue);
        background: #fff;
    }

.pu-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 15px 24px;
    color: rgba(255,255,255,.92);
    font-size: 14px;
}

    .pu-trust span {
        display: inline-flex;
        align-items: center;
        gap: 7px;
    }

    .pu-trust i {
        color: #65dc87;
    }

/* =========================================================
       GENERAL
       ========================================================= */

.pu-section {
    padding: 78px 0;
}

.pu-section-light {
    background: var(--p-soft-blue);
}

.pu-section-soft {
    background: linear-gradient(180deg,#f7fcfa 0%,#eff9f5 100%);
}

.pu-heading {
    max-width: 860px;
    margin: 0 auto 45px;
    text-align: center;
}

.pu-label,
.pu-cta-label {
    color: var(--p-green);
    font-size: 15px;
    font-weight: 800;
    margin-bottom: 8px;
}

.pu-heading h2,
.pu-intro-card h2,
.pu-cta h2 {
    color: var(--p-blue);
    font-size: clamp(30px,4vw,44px);
    line-height: 1.15;
    font-weight: 800;
    margin: 0 0 14px;
}

.pu-heading p {
    color: var(--p-muted);
    line-height: 1.8;
    font-size: 16px;
    margin: 0;
}

.pu-line {
    width: 58px;
    height: 4px;
    border-radius: 4px;
    background: var(--p-green);
    margin: 16px 0 22px;
}

    .pu-line.center {
        margin-left: auto;
        margin-right: auto;
    }

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

.pu-intro {
    padding: 72px 0 52px;
}

.pu-intro-card,
.pu-condition-card,
.pu-info-card {
    height: 100%;
    border: 1px solid var(--p-border);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 12px 35px rgba(17,54,88,.07);
}

.pu-intro-card {
    padding: 34px;
}

    .pu-intro-card p {
        color: var(--p-text);
        font-size: 16px;
        line-height: 1.85;
        margin-bottom: 15px;
    }

.pu-condition-card {
    padding: 30px;
    background: linear-gradient(145deg,#f4fcf7,#eef9f4);
    border-color: #d5ecdf;
}

    .pu-condition-card h3,
    .pu-card-title {
        color: var(--p-blue);
        font-size: 24px;
        line-height: 1.25;
        font-weight: 800;
        margin: 0 0 20px;
    }

.pu-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .pu-list li {
        position: relative;
        padding: 0 0 13px 27px;
        line-height: 1.5;
        font-size: 15px;
    }

        .pu-list li::before {
            content: "\f26a";
            font-family: bootstrap-icons;
            position: absolute;
            left: 0;
            top: 0;
            color: var(--p-green);
            font-weight: 700;
        }

.pu-note {
    margin-top: 18px;
    padding: 15px 18px;
    border-left: 4px solid var(--p-green);
    border-radius: 8px;
    background: #f2faf5;
    color: #4e5f70;
    font-size: 14px;
    line-height: 1.65;
}

/* =========================================================
       CONDITION CARDS
       ========================================================= */

.pu-condition-small {
    height: 100%;
    padding: 27px;
    border: 1px solid var(--p-border);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(17,54,88,.06);
    transition: .25s ease;
}

    .pu-condition-small:hover {
        transform: translateY(-4px);
        box-shadow: 0 14px 30px rgba(17,54,88,.10);
    }

.pu-condition-icon {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    margin-bottom: 15px;
    border-radius: 13px;
    background: #eaf8f0;
    color: var(--p-green-dark);
    font-size: 23px;
}

.pu-condition-small h3 {
    color: var(--p-blue);
    font-size: 20px;
    font-weight: 800;
    margin: 0 0 9px;
}

.pu-condition-small p {
    color: var(--p-muted);
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
}

/* =========================================================
       PROCEDURE CARDS
       ========================================================= */

.pu-procedure-card {
    height: 100%;
    overflow: hidden;
    border-radius: 16px;
    background: #fff;
    border: 1px solid var(--p-border);
    box-shadow: 0 8px 25px rgba(17,54,88,.06);
    transition: .25s ease;
}

    .pu-procedure-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 32px rgba(17,54,88,.11);
    }

.pu-procedure-image {
    display: block;
    width: 100%;
    /*height: 205px;*/
    object-fit: cover;
}

.pu-procedure-content {
    padding: 22px;
}

.pu-procedure-title {
    color: var(--p-blue);
    font-size: 20px;
    line-height: 1.3;
    font-weight: 800;
    margin: 0 0 10px;
}

.pu-procedure-text {
    color: var(--p-muted);
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
}

/* =========================================================
       BENEFITS
       ========================================================= */

.pu-benefit-card {
    height: 100%;
    padding: 26px 22px;
    border: 1px solid var(--p-border);
    border-radius: 15px;
    background: #fff;
    text-align: center;
    box-shadow: 0 8px 22px rgba(17,54,88,.05);
}

.pu-benefit-icon {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: #eaf8f0;
    color: var(--p-green-dark);
    font-size: 24px;
}

.pu-benefit-card h3 {
    color: var(--p-blue);
    font-size: 19px;
    font-weight: 800;
    margin: 0 0 8px;
}

.pu-benefit-card p {
    color: var(--p-muted);
    font-size: 14px;
    line-height: 1.65;
    margin: 0;
}

/* =========================================================
       PATIENT JOURNEY / STEPS
       ========================================================= */

.pu-step {
    height: 100%;
    padding: 27px;
    border-radius: 16px;
    border: 1px solid var(--p-border);
    background: #fff;
    box-shadow: 0 8px 22px rgba(17,54,88,.05);
}

.pu-number {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #e8f7ee;
    color: var(--p-green-dark);
    font-weight: 800;
    margin-bottom: 15px;
}

.pu-step h3 {
    color: var(--p-blue);
    font-size: 20px;
    font-weight: 800;
    margin: 0 0 9px;
}

.pu-step p {
    color: var(--p-muted);
    font-size: 14px;
    line-height: 1.75;
    margin: 0;
}

/* =========================================================
       INFORMATION CARDS
       ========================================================= */

.pu-info-card {
    padding: 30px;
}

    .pu-info-card h3 {
        color: var(--p-blue);
        font-size: 22px;
        font-weight: 800;
        margin: 0 0 12px;
    }

    .pu-info-card p {
        color: var(--p-muted);
        font-size: 15px;
        line-height: 1.75;
    }

/* =========================================================
       FAQ
       ========================================================= */

.pu-faq {
    border: 1px solid var(--p-border);
    border-radius: 13px;
    background: #fff;
    overflow: hidden;
    margin-bottom: 12px;
    box-shadow: 0 5px 16px rgba(17,54,88,.035);
}

    .pu-faq summary {
        cursor: pointer;
        list-style: none;
        padding: 20px 55px 20px 24px;
        position: relative;
        color: var(--p-blue);
        font-weight: 800;
        font-size: 16px;
    }

        .pu-faq summary::-webkit-details-marker {
            display: none;
        }

        .pu-faq summary::after {
            content: "\f282";
            font-family: bootstrap-icons;
            position: absolute;
            right: 22px;
            top: 50%;
            color: var(--p-green);
            transform: translateY(-50%);
        }

    .pu-faq[open] summary::after {
        transform: translateY(-50%) rotate(180deg);
    }

.pu-faq-content {
    padding: 0 24px 21px;
    color: var(--p-muted);
    line-height: 1.75;
    font-size: 15px;
}

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

.pu-cta {
    padding: 78px 0;
    background: linear-gradient(135deg,#edf9f3 0%,#f0f8ff 100%);
}

.pu-cta-image {
    width: 100%;
    /*height: 320px;*/
    object-fit: cover;
    border-radius: 18px;
    box-shadow: 0 15px 35px rgba(17,54,88,.12);
}

.pu-cta h2 {
    font-size: clamp(30px,4vw,46px);
    margin-bottom: 15px;
}

.pu-cta p {
    color: var(--p-muted);
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 23px;
}

.pu-disclaimer {
    padding: 25px 0;
    background: #f7f9fb;
    border-top: 1px solid #e7edf2;
}

    .pu-disclaimer p {
        margin: 0;
        color: #718092;
        font-size: 13px;
        line-height: 1.7;
        text-align: center;
    }

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

@media (max-width: 991px) {
    .pu-hero {
        min-height: 570px;
    }

    .pu-section,
    .pu-cta {
        padding: 60px 0;
    }
}

@media (max-width: 767px) {
    .pu-hero {
        min-height: 650px;
    }

    .pu-hero-content {
        padding: 62px 0;
    }

    .pu-hero-lead {
        font-size: 16px;
    }

    .pu-trust {
        display: grid;
        gap: 10px;
    }

    .pu-intro {
        padding-top: 50px;
    }

    .pu-intro-card,
    .pu-condition-card {
        padding: 24px;
    }

    .pu-procedure-image {
        height: 220px;
    }

    .pu-cta-image {
        height: 250px;
    }
}

/************Kidney Transplant Surgery*********/
.kidney-transplant-page {
    --kt-blue: #063b7a;
    --kt-blue-dark: #052e60;
    --kt-green: #28a65a;
    --kt-green-dark: #168443;
    --kt-soft-blue: #f2f8fd;
    --kt-soft-green: #f1fbf5;
    --kt-text: #33445c;
    --kt-muted: #66758a;
    --kt-border: #dfe9f1;
    color: var(--kt-text);
    background: #fff;
}

    .kidney-transplant-page * {
        box-sizing: border-box;
    }

/* HERO */
.kt-hero {
    position: relative;
    min-height: 510px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: linear-gradient(90deg,rgba(3,37,76,.95) 0%,rgba(5,57,111,.82) 48%,rgba(5,57,111,.18) 100%), url('/assets/img/services/kidney-transplant-surgery.jpg') center/cover no-repeat;
}

.kt-hero-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
    padding: 78px 0 70px;
}

.kt-breadcrumb {
    margin-bottom: 22px;
}

    .kt-breadcrumb ol {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        list-style: none;
        padding: 0;
        margin: 0;
        font-size: 14px;
    }

    .kt-breadcrumb li,
    .kt-breadcrumb a {
        color: rgba(255,255,255,.86);
        text-decoration: none;
    }

        .kt-breadcrumb li + li::before {
            content: "›";
            margin-right: 8px;
            color: #8ee3ae;
        }

.kt-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    margin-bottom: 18px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 999px;
    background: rgba(255,255,255,.09);
    color: #d9ffe7;
    font-size: 14px;
    font-weight: 700;
}

.kt-hero h1 {
    margin: 0 0 18px;
    color: #fff;
    font-size: clamp(38px,5vw,66px);
    line-height: 1.06;
    font-weight: 800;
    letter-spacing: -.8px;
}

    .kt-hero h1 span {
        color: #62d784;
    }

.kt-hero-lead {
    max-width: 800px;
    margin: 0 0 28px;
    color: rgba(255,255,255,.94);
    font-size: 19px;
    line-height: 1.7;
}

.kt-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 26px;
}

.kt-btn,
.kt-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 48px;
    padding: 12px 21px;
    border-radius: 9px;
    font-weight: 700;
    text-decoration: none;
    transition: .25s ease;
}

.kt-btn {
    color: #fff;
    background: linear-gradient(135deg,#0879d8,#20a35b);
    box-shadow: 0 10px 25px rgba(0,0,0,.16);
}

    .kt-btn:hover {
        color: #fff;
        transform: translateY(-2px);
    }

.kt-btn-outline {
    color: #fff;
    border: 1px solid rgba(255,255,255,.5);
    background: rgba(255,255,255,.08);
}

    .kt-btn-outline:hover {
        color: var(--kt-blue);
        background: #fff;
    }

.kt-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 15px 24px;
    color: rgba(255,255,255,.92);
    font-size: 14px;
}

    .kt-trust span {
        display: inline-flex;
        align-items: center;
        gap: 7px;
    }

    .kt-trust i {
        color: #65dc87;
    }

/* GENERAL */
.kt-section {
    padding: 78px 0;
}

.kt-section-light {
    background: var(--kt-soft-blue);
}

.kt-section-soft {
    background: linear-gradient(180deg,#f7fcfa 0%,#eff9f5 100%);
}

.kt-heading {
    max-width: 860px;
    margin: 0 auto 45px;
    text-align: center;
}

.kt-label,
.kt-cta-label {
    color: var(--kt-green);
    font-size: 15px;
    font-weight: 800;
    margin-bottom: 8px;
}

.kt-heading h2,
.kt-intro-card h2,
.kt-cta h2 {
    color: var(--kt-blue);
    font-size: clamp(30px,4vw,44px);
    line-height: 1.15;
    font-weight: 800;
    margin: 0 0 14px;
}

.kt-heading p {
    color: var(--kt-muted);
    line-height: 1.8;
    font-size: 16px;
    margin: 0;
}

.kt-line {
    width: 58px;
    height: 4px;
    border-radius: 4px;
    background: var(--kt-green);
    margin: 16px 0 22px;
}

    .kt-line.center {
        margin-left: auto;
        margin-right: auto;
    }

/* INTRO */
.kt-intro {
    padding: 72px 0 52px;
}

.kt-intro-card,
.kt-highlight-card,
.kt-info-card {
    height: 100%;
    border: 1px solid var(--kt-border);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 12px 35px rgba(17,54,88,.07);
}

.kt-intro-card {
    padding: 34px;
}

    .kt-intro-card p {
        color: var(--kt-text);
        font-size: 16px;
        line-height: 1.85;
        margin-bottom: 15px;
    }

.kt-highlight-card {
    padding: 30px;
    background: linear-gradient(145deg,#f4fcf7,#eef9f4);
    border-color: #d5ecdf;
}

    .kt-highlight-card h3,
    .kt-card-title {
        color: var(--kt-blue);
        font-size: 24px;
        line-height: 1.25;
        font-weight: 800;
        margin: 0 0 20px;
    }

.kt-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .kt-list li {
        position: relative;
        padding: 0 0 13px 27px;
        line-height: 1.5;
        font-size: 15px;
    }

        .kt-list li::before {
            content: "\f26a";
            font-family: bootstrap-icons;
            position: absolute;
            left: 0;
            top: 0;
            color: var(--kt-green);
            font-weight: 700;
        }

.kt-note {
    margin-top: 18px;
    padding: 15px 18px;
    border-left: 4px solid var(--kt-green);
    border-radius: 8px;
    background: #f2faf5;
    color: #4e5f70;
    font-size: 14px;
    line-height: 1.65;
}

/* CARDS */
.kt-card {
    height: 100%;
    padding: 28px 24px;
    border: 1px solid var(--kt-border);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(17,54,88,.06);
    transition: .25s ease;
}

    .kt-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 14px 30px rgba(17,54,88,.10);
    }

.kt-icon {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    margin-bottom: 16px;
    border-radius: 14px;
    background: #eaf8f0;
    color: var(--kt-green-dark);
    font-size: 24px;
}

.kt-card h3 {
    color: var(--kt-blue);
    font-size: 21px;
    font-weight: 800;
    margin: 0 0 10px;
}

.kt-card p {
    color: var(--kt-muted);
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
}

/* PROCESS */
.kt-step {
    height: 100%;
    padding: 27px;
    border-radius: 16px;
    border: 1px solid var(--kt-border);
    background: #fff;
    box-shadow: 0 8px 22px rgba(17,54,88,.05);
}

.kt-number {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #e8f7ee;
    color: var(--kt-green-dark);
    font-weight: 800;
    margin-bottom: 15px;
}

.kt-step h3 {
    color: var(--kt-blue);
    font-size: 20px;
    font-weight: 800;
    margin: 0 0 9px;
}

.kt-step p {
    color: var(--kt-muted);
    font-size: 14px;
    line-height: 1.75;
    margin: 0;
}

/* PROCEDURES */
.kt-procedure-card {
    height: 100%;
    overflow: hidden;
    border-radius: 16px;
    background: #fff;
    border: 1px solid var(--kt-border);
    box-shadow: 0 8px 25px rgba(17,54,88,.06);
    transition: .25s ease;
}

    .kt-procedure-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 32px rgba(17,54,88,.11);
    }

.kt-procedure-image {
    display: block;
    width: 100%;
    /*height: 205px;*/
    object-fit: cover;
}

.kt-procedure-content {
    padding: 22px;
}

.kt-procedure-title {
    color: var(--kt-blue);
    font-size: 20px;
    line-height: 1.3;
    font-weight: 800;
    margin: 0 0 10px;
}

.kt-procedure-text {
    color: var(--kt-muted);
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
}

/* TABLE */
.kt-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--kt-border);
    border-radius: 15px;
    box-shadow: 0 8px 24px rgba(17,54,88,.05);
}

.kt-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
    background: #fff;
}

    .kt-table th {
        padding: 16px 18px;
        background: var(--kt-blue);
        color: #fff;
        text-align: left;
        font-size: 14px;
    }

    .kt-table td {
        padding: 15px 18px;
        border-top: 1px solid var(--kt-border);
        color: var(--kt-text);
        font-size: 14px;
        line-height: 1.55;
    }

    .kt-table tr:nth-child(even) td {
        background: #f8fbfd;
    }

/* INFO */
.kt-info-card {
    padding: 30px;
}

    .kt-info-card h3 {
        color: var(--kt-blue);
        font-size: 22px;
        font-weight: 800;
        margin: 0 0 12px;
    }

    .kt-info-card p {
        color: var(--kt-muted);
        font-size: 15px;
        line-height: 1.75;
    }

/* FAQ */
.kt-faq {
    border: 1px solid var(--kt-border);
    border-radius: 13px;
    background: #fff;
    overflow: hidden;
    margin-bottom: 12px;
    box-shadow: 0 5px 16px rgba(17,54,88,.035);
}

    .kt-faq summary {
        cursor: pointer;
        list-style: none;
        padding: 20px 55px 20px 24px;
        position: relative;
        color: var(--kt-blue);
        font-weight: 800;
        font-size: 16px;
    }

        .kt-faq summary::-webkit-details-marker {
            display: none;
        }

        .kt-faq summary::after {
            content: "\f282";
            font-family: bootstrap-icons;
            position: absolute;
            right: 22px;
            top: 50%;
            color: var(--kt-green);
            transform: translateY(-50%);
        }

    .kt-faq[open] summary::after {
        transform: translateY(-50%) rotate(180deg);
    }

.kt-faq-content {
    padding: 0 24px 21px;
    color: var(--kt-muted);
    line-height: 1.75;
    font-size: 15px;
}

/* CTA */
.kt-cta {
    padding: 78px 0;
    background: linear-gradient(135deg,#edf9f3 0%,#f0f8ff 100%);
}

.kt-cta-image {
    width: 100%;
    /*height: 320px;*/
    object-fit: cover;
    border-radius: 18px;
    box-shadow: 0 15px 35px rgba(17,54,88,.12);
}

.kt-cta p {
    color: var(--kt-muted);
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 23px;
}

.kt-disclaimer {
    padding: 25px 0;
    background: #f7f9fb;
    border-top: 1px solid #e7edf2;
}

    .kt-disclaimer p {
        margin: 0;
        color: #718092;
        font-size: 13px;
        line-height: 1.7;
        text-align: center;
    }

@media (max-width:991px) {
    .kt-hero {
        min-height: 570px;
    }

    .kt-section, .kt-cta {
        padding: 60px 0;
    }
}

@media (max-width:767px) {
    .kt-hero {
        min-height: 650px;
    }

    .kt-hero-content {
        padding: 62px 0;
    }

    .kt-hero-lead {
        font-size: 16px;
    }

    .kt-trust {
        display: grid;
        gap: 10px;
    }

    .kt-intro {
        padding-top: 50px;
    }

    .kt-intro-card, .kt-highlight-card {
        padding: 24px;
    }

    .kt-procedure-image {
        height: 220px;
    }

    .kt-cta-image {
        height: 250px;
    }
}

/* =========================================================
   EKANSHI CLINIC
   PRIVACY POLICY
   MODERN RESPONSIVE UI
   Desktop + Tablet + Mobile
   ========================================================= */


/* =========================================================
   1. ROOT / PAGE
   ========================================================= */

.privacy-page {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    background: linear-gradient( 180deg, #f7fbfc 0%, #ffffff 18%, #f8fbfc 100% );
    color: #243746;
}

    .privacy-page *,
    .privacy-page *::before,
    .privacy-page *::after {
        box-sizing: border-box;
    }

.privacy-wrapper {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 55px 25px 70px;
}


/* =========================================================
   2. HERO
   ========================================================= */

/*.page-title {
    min-height: 380px !important;
    background-size: cover;
    background-position: center;
}

    .page-title::before {
        opacity: .35;
    }

    .page-title .contact-hero-content {
        z-index: 2;
    }

    .page-title .breadcrumbs {
        margin-top: 100px;
    }

        .page-title .breadcrumbs ol {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
        }*/


/* =========================================================
   3. INTRODUCTION CARD
   ========================================================= */

.privacy-intro {
    position: relative;
    margin: -75px auto 45px;
    max-width: 1120px;
    padding: 38px 45px 35px;
    background: rgba(255, 255, 255, .97);
    border: 1px solid rgba(8, 47, 77, .08);
    border-radius: 22px;
    box-shadow: 0 18px 50px rgba(8, 47, 77, .10);
    overflow: hidden;
    z-index: 5;
}

    .privacy-intro::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 5px;
        background: linear-gradient( 90deg, #082f4d, #25c5df, #35d49b );
    }

    .privacy-intro::after {
        content: "";
        position: absolute;
        right: -70px;
        bottom: -90px;
        width: 210px;
        height: 210px;
        border-radius: 50%;
        background: rgba(37, 197, 223, .07);
        pointer-events: none;
    }

.privacy-intro-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 13px;
    padding: 7px 13px;
    border-radius: 50px;
    background: rgba(37, 197, 223, .10);
    color: #08738b;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
}

    .privacy-intro-badge i {
        font-size: 15px;
    }

.privacy-intro h2 {
    position: relative;
    margin: 0 0 13px;
    color: #082f4d;
    font-size: clamp(27px, 3vw, 38px);
    line-height: 1.2;
    font-weight: 800;
}

    .privacy-intro h2::after {
        content: "";
        display: block;
        width: 58px;
        height: 4px;
        margin-top: 14px;
        border-radius: 10px;
        background: #35d49b;
    }

.privacy-intro p {
    position: relative;
    max-width: 950px;
    margin: 0 0 10px;
    color: #5f707d;
    font-size: 15px;
    line-height: 1.8;
}

.privacy-date {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 12px;
    padding: 7px 12px;
    border-radius: 7px;
    background: #f3f8fa;
    color: #647784;
    font-size: 12px;
    font-weight: 600;
}

    .privacy-date i {
        color: #25a9c5;
    }


/* =========================================================
   4. MAIN CONTENT LAYOUT
   ========================================================= */

.privacy-layout {
    display: grid;
    grid-template-columns: 265px minmax(0, 1fr);
    gap: 35px;
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    align-items: start;
}


/* =========================================================
   5. SIDEBAR
   ========================================================= */

.privacy-sidebar {
    width: 100%;
    min-width: 0;
    position: sticky;
    top: 95px;
}

.privacy-nav-card {
    position: relative;
    padding: 25px 20px;
    background: #ffffff;
    border: 1px solid #e5edf1;
    border-radius: 16px;
    box-shadow: 0 12px 35px rgba(8, 47, 77, .07);
    overflow: hidden;
}

    .privacy-nav-card::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 4px;
        height: 100%;
        background: linear-gradient( 180deg, #25c5df, #35d49b );
    }

.privacy-desktop-title {
    margin: 0 0 17px;
    padding-left: 5px;
    color: #082f4d;
    font-size: 18px;
    font-weight: 800;
}

.privacy-desktop-nav {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .privacy-desktop-nav li {
        margin: 2px 0;
    }

    .privacy-desktop-nav a {
        position: relative;
        display: flex;
        align-items: center;
        min-height: 40px;
        padding: 8px 10px 8px 14px;
        border-radius: 8px;
        color: #647784;
        text-decoration: none;
        font-size: 13px;
        line-height: 1.45;
        font-weight: 500;
        transition: color .25s ease, background .25s ease, padding-left .25s ease, transform .25s ease;
    }

        .privacy-desktop-nav a::before {
            content: "›";
            margin-right: 8px;
            color: #25c5df;
            font-size: 17px;
            font-weight: 700;
            transition: transform .25s ease;
        }

        .privacy-desktop-nav a:hover {
            padding-left: 18px;
            color: #082f4d;
            background: #f0f9fb;
            transform: translateX(2px);
        }

            .privacy-desktop-nav a:hover::before {
                transform: translateX(3px);
            }


/* =========================================================
   6. CONTENT
   ========================================================= */

.privacy-content {
    min-width: 0;
    width: 100%;
    padding: 0;
    background: transparent;
}


/* =========================================================
   7. PRIVACY SECTION
   ========================================================= */

.privacy-section {
    position: relative;
    width: 100%;
    margin: 0 0 22px;
    padding: 30px 32px;
    background: #ffffff;
    border: 1px solid #e7eef2;
    border-radius: 16px;
    box-shadow: 0 8px 28px rgba(8, 47, 77, .045);
    scroll-margin-top: 100px;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

    .privacy-section:hover {
        border-color: rgba(37, 197, 223, .25);
        box-shadow: 0 14px 38px rgba(8, 47, 77, .08);
        transform: translateY(-2px);
    }

    .privacy-section h2 {
        display: flex;
        align-items: center;
        gap: 13px;
        margin: 0 0 18px;
        color: #082f4d;
        font-size: clamp(21px, 2vw, 27px);
        line-height: 1.3;
        font-weight: 800;
    }

.section-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: linear-gradient( 135deg, #082f4d, #126080 );
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .4px;
    box-shadow: 0 7px 18px rgba(8, 47, 77, .15);
}

.privacy-section p {
    margin: 0 0 14px;
    color: #5c6f7c;
    font-size: 14px;
    line-height: 1.8;
}

    .privacy-section p:last-child {
        margin-bottom: 0;
    }


/* =========================================================
   8. LISTS
   ========================================================= */

.privacy-section ul {
    margin: 10px 0 18px;
    padding: 0;
    list-style: none;
}

.privacy-section li {
    position: relative;
    margin: 9px 0;
    padding-left: 25px;
    color: #5c6f7c;
    font-size: 14px;
    line-height: 1.7;
}

    .privacy-section li::before {
        content: "";
        position: absolute;
        left: 3px;
        top: .7em;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #35d49b;
        box-shadow: 0 0 0 4px rgba(53, 212, 155, .10);
    }


/* =========================================================
   9. INFORMATION CARDS
   ========================================================= */

.privacy-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    width: 100%;
    margin-top: 22px;
}

.privacy-info-card {
    position: relative;
    min-width: 0;
    padding: 21px;
    border: 1px solid #e5edf1;
    border-radius: 13px;
    background: linear-gradient( 145deg, #ffffff, #f7fbfc );
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

    .privacy-info-card:hover {
        transform: translateY(-4px);
        border-color: rgba(37, 197, 223, .35);
        box-shadow: 0 12px 30px rgba(8, 47, 77, .09);
    }

    .privacy-info-card .icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 43px;
        height: 43px;
        margin-bottom: 14px;
        border-radius: 11px;
        background: rgba(37, 197, 223, .10);
        color: #0791ae;
        font-size: 19px;
        transition: background .25s ease, color .25s ease, transform .25s ease;
    }

    .privacy-info-card:hover .icon {
        background: #082f4d;
        color: #ffffff;
        transform: scale(1.06);
    }

    .privacy-info-card h4 {
        margin: 0 0 7px;
        color: #082f4d;
        font-size: 16px;
        line-height: 1.4;
        font-weight: 750;
    }

    .privacy-info-card p {
        margin: 0;
        color: #687985;
        font-size: 13px;
        line-height: 1.7;
    }


/* =========================================================
   10. HIGHLIGHT BOX
   ========================================================= */

.privacy-highlight {
    position: relative;
    margin: 22px 0 0;
    padding: 18px 20px 18px 23px;
    border: 1px solid rgba(37, 197, 223, .18);
    border-radius: 11px;
    background: linear-gradient( 135deg, #f1fbfd, #f4fcf8 );
    overflow: hidden;
}

    .privacy-highlight::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        background: linear-gradient( 180deg, #25c5df, #35d49b );
    }

    .privacy-highlight p {
        margin: 0;
        color: #45606e;
        font-size: 13px;
        line-height: 1.7;
    }

    .privacy-highlight strong {
        color: #082f4d;
    }


/* =========================================================
   11. CONTACT CTA
   ========================================================= */

.privacy-contact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    max-width: 1120px;
    margin: 35px auto 0;
    padding: 28px 32px;
    border-radius: 17px;
    background: linear-gradient( 135deg, #082f4d, #0b4666 );
    box-shadow: 0 15px 40px rgba(8, 47, 77, .16);
    overflow: hidden;
}

    .privacy-contact h3 {
        margin: 0 0 7px;
        color: #ffffff;
        font-size: 22px;
        font-weight: 800;
    }

    .privacy-contact p {
        margin: 0;
        color: rgba(255,255,255,.75);
        font-size: 13px;
        line-height: 1.7;
    }

    .privacy-contact .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        min-height: 48px;
        padding: 0 22px;
        border: 0;
        border-radius: 9px;
        background: #35d49b;
        color: #082f4d;
        text-decoration: none;
        font-size: 13px;
        font-weight: 750;
        transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
    }

        .privacy-contact .btn:hover {
            background: #ffffff;
            transform: translateY(-2px);
            box-shadow: 0 9px 25px rgba(0,0,0,.16);
        }


/* =========================================================
   12. MOBILE NAVIGATION
   ========================================================= */

.privacy-mobile-nav {
    display: none;
}

.privacy-mobile-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 54px;
    padding: 0 17px;
    border: 0;
    border-radius: 12px;
    background: #082f4d;
    color: #ffffff;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 8px 22px rgba(8, 47, 77, .12);
}

    .privacy-mobile-toggle span {
        display: flex;
        align-items: center;
        gap: 9px;
    }

        .privacy-mobile-toggle span i {
            color: #35d49b;
            font-size: 18px;
        }

    .privacy-mobile-toggle > i {
        transition: transform .25s ease;
    }

.privacy-mobile-nav.open
.privacy-mobile-toggle > i {
    transform: rotate(180deg);
}

.privacy-mobile-menu {
    display: none;
    overflow: hidden;
    width: 100%;
    background: #082f4d;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 12px 25px rgba(8, 47, 77, .13);
}

    .privacy-mobile-menu.active {
        display: block;
    }

    .privacy-mobile-menu a {
        display: flex;
        align-items: center;
        min-height: 45px;
        padding: 9px 17px;
        border-top: 1px solid rgba(255,255,255,.08);
        color: rgba(255,255,255,.85);
        text-decoration: none;
        font-size: 13px;
        line-height: 1.4;
        transition: background .2s ease, color .2s ease, padding-left .2s ease;
    }

        .privacy-mobile-menu a::before {
            content: "›";
            margin-right: 8px;
            color: #35d49b;
            font-size: 17px;
        }

        .privacy-mobile-menu a:hover {
            padding-left: 22px;
            background: rgba(255,255,255,.06);
            color: #ffffff;
        }


/* =========================================================
   13. TABLET
   768px - 1100px
   ========================================================= */

@media (max-width: 1100px) {

    .privacy-wrapper {
        padding: 45px 20px 60px;
    }

    .privacy-layout {
        grid-template-columns: 225px minmax(0, 1fr);
        gap: 25px;
    }

    .privacy-intro,
    .privacy-contact,
    .privacy-layout {
        max-width: 100%;
    }

    .privacy-intro {
        padding: 32px;
    }

    .privacy-section {
        padding: 27px;
    }

    .privacy-desktop-nav a {
        font-size: 12px;
    }
}


/* =========================================================
   14. TABLET / LARGE MOBILE
   767px AND BELOW
   ========================================================= */

@media (max-width: 767px) {

    .privacy-wrapper {
        padding: 35px 15px 45px;
    }

    .page-title {
        min-height: 270px !important;
        background-position: center center;
    }

        .page-title .breadcrumbs {
            margin-top: 70px;
        }

    /* Intro */

    .privacy-intro {
        margin: -45px 0 28px;
        padding: 27px 22px;
        border-radius: 16px;
    }

        .privacy-intro h2 {
            font-size: 27px;
        }

        .privacy-intro p {
            font-size: 14px;
            line-height: 1.75;
        }

    /* Layout */

    .privacy-layout {
        display: block;
        width: 100%;
    }

    /* Hide desktop navigation */

    .privacy-nav-card {
        display: none;
    }

    /* Show mobile navigation */

    .privacy-mobile-nav {
        display: block;
        width: 100%;
        margin-bottom: 20px;
    }

    /* Content */

    .privacy-content {
        width: 100%;
    }

    .privacy-section {
        margin-bottom: 17px;
        padding: 24px 20px;
        border-radius: 14px;
        box-shadow: 0 6px 22px rgba(8, 47, 77, .055);
    }

        .privacy-section:hover {
            transform: none;
        }

        .privacy-section h2 {
            gap: 10px;
            font-size: 21px;
        }

    .section-number {
        flex-basis: 38px;
        width: 38px;
        height: 38px;
        border-radius: 9px;
    }

    .privacy-section p,
    .privacy-section li {
        font-size: 14px;
    }

    .privacy-info-grid {
        grid-template-columns: 1fr;
        gap: 13px;
    }

    .privacy-info-card {
        padding: 18px;
    }

    .privacy-contact {
        flex-direction: column;
        align-items: stretch;
        margin-top: 25px;
        padding: 25px 21px;
        text-align: left;
    }

        .privacy-contact .btn {
            width: 100%;
        }
}


/* =========================================================
   15. SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .privacy-wrapper {
        padding: 25px 11px 35px;
    }

    .page-title {
        min-height: 235px !important;
    }

    .privacy-intro {
        margin-top: -35px;
        padding: 23px 18px;
        border-radius: 14px;
    }

    .privacy-intro-badge {
        font-size: 10px;
    }

    .privacy-intro h2 {
        font-size: 23px;
    }

    .privacy-intro p {
        font-size: 13px;
        line-height: 1.7;
    }

    .privacy-date {
        font-size: 11px;
    }

    .privacy-section {
        padding: 21px 17px;
    }

        .privacy-section h2 {
            align-items: flex-start;
            font-size: 19px;
            line-height: 1.35;
        }

    .section-number {
        flex: 0 0 35px;
        width: 35px;
        height: 35px;
        font-size: 10px;
    }

    .privacy-section p,
    .privacy-section li {
        font-size: 13px;
        line-height: 1.75;
    }

    .privacy-info-card h4 {
        font-size: 15px;
    }

    .privacy-info-card p {
        font-size: 12.5px;
    }

    .privacy-highlight {
        padding: 16px 16px 16px 19px;
    }

    .privacy-contact h3 {
        font-size: 19px;
    }
}


/* =========================================================
   16. VERY SMALL DEVICES
   ========================================================= */

@media (max-width: 360px) {

    .privacy-wrapper {
        padding-left: 9px;
        padding-right: 9px;
    }

    .privacy-intro {
        padding: 20px 16px;
    }

        .privacy-intro h2 {
            font-size: 21px;
        }

    .privacy-section {
        padding: 19px 15px;
    }

        .privacy-section h2 {
            font-size: 18px;
        }

        .privacy-section p,
        .privacy-section li {
            font-size: 12.5px;
        }

    .privacy-mobile-toggle {
        min-height: 52px;
        padding: 0 14px;
    }
}


/* =========================================================
   17. ACCESSIBILITY
   ========================================================= */

.privacy-page a:focus-visible,
.privacy-page button:focus-visible {
    outline: 3px solid rgba(37, 197, 223, .45);
    outline-offset: 3px;
}


/* =========================================================
   18. REDUCE MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .privacy-page *,
    .privacy-page *::before,
    .privacy-page *::after {
        scroll-behavior: auto !important;
        transition: none !important;
    }
}


/* =========================================================
   19. IMAGE / MEDIA SAFETY
   ========================================================= */

.privacy-page img,
.privacy-page video,
.privacy-page iframe {
    max-width: 100%;
    height: auto;
}

.privacy-page table {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
}

/* =========================================================
   EKANSHI CLINIC
   TERMS & CONDITIONS
   MODERN RESPONSIVE UI
   Desktop + Tablet + Mobile
   ========================================================= */


/* =========================================================
   1. PAGE
   ========================================================= */

.terms-page {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    background: linear-gradient( 180deg, #f7fbfc 0%, #ffffff 18%, #f8fbfc 100% );
    color: #243746;
}

    .terms-page *,
    .terms-page *::before,
    .terms-page *::after {
        box-sizing: border-box;
    }


    /* =========================================================
   2. HERO
   ========================================================= */

    .terms-page .page-title {
        position: relative;
        min-height: 380px !important;
        background-image: linear-gradient( rgba(4, 36, 61, .48), rgba(4, 36, 61, .68) ), url('/assets/img/heroslider/terms-conditions-ekanshi-clinic.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        display: flex;
        align-items: center;
    }

        .terms-page .page-title::before {
            opacity: .25;
        }

    .terms-page .breadcrumbs {
        margin-top: 95px;
    }

        .terms-page .breadcrumbs ol {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 9px;
        }


/* =========================================================
   3. MAIN WRAPPER
   ========================================================= */

.terms-wrapper {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 55px 25px 70px;
}


/* =========================================================
   4. INTRO CARD
   ========================================================= */

.terms-intro {
    position: relative;
    width: 100%;
    max-width: 1120px;
    margin: -75px auto 45px;
    padding: 38px 45px 35px;
    background: rgba(255,255,255,.97);
    border: 1px solid rgba(8,47,77,.08);
    border-radius: 22px;
    box-shadow: 0 18px 50px rgba(8,47,77,.10);
    overflow: hidden;
    z-index: 5;
}

    .terms-intro::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 5px;
        background: linear-gradient( 90deg, #082f4d, #25c5df, #35d49b );
    }

    .terms-intro::after {
        content: "";
        position: absolute;
        right: -70px;
        bottom: -90px;
        width: 210px;
        height: 210px;
        border-radius: 50%;
        background: rgba(53,212,155,.07);
        pointer-events: none;
    }

.terms-intro-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 13px;
    padding: 7px 13px;
    border-radius: 50px;
    background: rgba(53,212,155,.11);
    color: #159c67;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
}

    .terms-intro-badge i {
        font-size: 15px;
    }

.terms-intro h2 {
    position: relative;
    margin: 0 0 13px;
    color: #082f4d;
    font-size: clamp(27px, 3vw, 38px);
    line-height: 1.2;
    font-weight: 800;
}

    .terms-intro h2::after {
        content: "";
        display: block;
        width: 58px;
        height: 4px;
        margin-top: 14px;
        border-radius: 10px;
        background: #35d49b;
    }

.terms-intro p {
    position: relative;
    max-width: 950px;
    margin: 0 0 10px;
    color: #5f707d;
    font-size: 15px;
    line-height: 1.8;
}

.terms-date {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 12px;
    padding: 7px 12px;
    border-radius: 7px;
    background: #f3f8fa;
    color: #647784;
    font-size: 12px;
    font-weight: 600;
}

    .terms-date i {
        color: #25a9c5;
    }


/* =========================================================
   5. MAIN LAYOUT
   ========================================================= */

.terms-layout {
    display: grid;
    grid-template-columns: 265px minmax(0, 1fr);
    gap: 35px;
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    align-items: start;
}


/* =========================================================
   6. SIDEBAR
   ========================================================= */

.terms-sidebar {
    width: 100%;
    min-width: 0;
    position: sticky;
    top: 95px;
}

.terms-nav-card {
    position: relative;
    padding: 25px 20px;
    background: #ffffff;
    border: 1px solid #e5edf1;
    border-radius: 16px;
    box-shadow: 0 12px 35px rgba(8,47,77,.07);
    overflow: hidden;
}

    .terms-nav-card::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 4px;
        height: 100%;
        background: linear-gradient( 180deg, #25c5df, #35d49b );
    }

    .terms-nav-card h4 {
        margin: 0 0 17px;
        padding-left: 5px;
        color: #082f4d;
        font-size: 18px;
        font-weight: 800;
    }

    .terms-nav-card ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .terms-nav-card li {
        margin: 2px 0;
    }

    .terms-nav-card a {
        position: relative;
        display: flex;
        align-items: center;
        min-height: 40px;
        padding: 8px 10px 8px 14px;
        border-radius: 8px;
        color: #647784;
        text-decoration: none;
        font-size: 13px;
        line-height: 1.45;
        font-weight: 500;
        transition: color .25s ease, background .25s ease, padding-left .25s ease, transform .25s ease;
    }

        .terms-nav-card a::before {
            content: "›";
            margin-right: 8px;
            color: #25c5df;
            font-size: 17px;
            font-weight: 700;
            transition: transform .25s ease;
        }

        .terms-nav-card a:hover {
            padding-left: 18px;
            color: #082f4d;
            background: #f0f9fb;
            transform: translateX(2px);
        }

            .terms-nav-card a:hover::before {
                transform: translateX(3px);
            }


/* =========================================================
   7. MAIN CONTENT
   ========================================================= */

.terms-content {
    width: 100%;
    min-width: 0;
    background: transparent;
}


/* =========================================================
   8. TERMS SECTION
   ========================================================= */

.terms-section {
    position: relative;
    width: 100%;
    margin: 0 0 22px;
    padding: 30px 32px;
    background: #ffffff;
    border: 1px solid #e7eef2;
    border-radius: 16px;
    box-shadow: 0 8px 28px rgba(8,47,77,.045);
    scroll-margin-top: 100px;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

    .terms-section:hover {
        border-color: rgba(37,197,223,.25);
        box-shadow: 0 14px 38px rgba(8,47,77,.08);
        transform: translateY(-2px);
    }

    .terms-section:last-child {
        margin-bottom: 0;
    }

    .terms-section h2 {
        display: flex;
        align-items: center;
        gap: 13px;
        margin: 0 0 18px;
        color: #082f4d;
        font-size: clamp(21px, 2vw, 27px);
        line-height: 1.3;
        font-weight: 800;
    }

.section-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: linear-gradient( 135deg, #082f4d, #126080 );
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .4px;
    box-shadow: 0 7px 18px rgba(8,47,77,.15);
}

.terms-section h3 {
    margin: 22px 0 10px;
    color: #164764;
    font-size: 17px;
    line-height: 1.4;
    font-weight: 750;
}

.terms-section p {
    margin: 0 0 14px;
    color: #5c6f7c;
    font-size: 14px;
    line-height: 1.8;
}

    .terms-section p:last-child {
        margin-bottom: 0;
    }


/* =========================================================
   9. LISTS
   ========================================================= */

.terms-section ul {
    margin: 10px 0 18px;
    padding: 0;
    list-style: none;
}

.terms-section li {
    position: relative;
    margin: 9px 0;
    padding-left: 25px;
    color: #5c6f7c;
    font-size: 14px;
    line-height: 1.7;
}

    .terms-section li::before {
        content: "";
        position: absolute;
        left: 3px;
        top: .7em;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #35d49b;
        box-shadow: 0 0 0 4px rgba(53,212,155,.10);
    }


/* =========================================================
   10. INFORMATION CARDS
   ========================================================= */

.terms-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    width: 100%;
    margin-top: 22px;
}

.terms-info-card {
    position: relative;
    min-width: 0;
    padding: 21px;
    border: 1px solid #e5edf1;
    border-radius: 13px;
    background: linear-gradient( 145deg, #ffffff, #f7fbfc );
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

    .terms-info-card:hover {
        transform: translateY(-4px);
        border-color: rgba(37,197,223,.35);
        box-shadow: 0 12px 30px rgba(8,47,77,.09);
    }

    .terms-info-card .icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 43px;
        height: 43px;
        margin-bottom: 14px;
        border-radius: 11px;
        background: rgba(37,197,223,.10);
        color: #0791ae;
        font-size: 19px;
        transition: background .25s ease, color .25s ease, transform .25s ease;
    }

    .terms-info-card:hover .icon {
        background: #082f4d;
        color: #ffffff;
        transform: scale(1.06);
    }

    .terms-info-card h4 {
        margin: 0 0 7px;
        color: #082f4d;
        font-size: 16px;
        line-height: 1.4;
        font-weight: 750;
    }

    .terms-info-card p {
        margin: 0;
        color: #687985;
        font-size: 13px;
        line-height: 1.7;
    }


/* =========================================================
   11. GENERAL HIGHLIGHT
   ========================================================= */

.terms-highlight {
    position: relative;
    margin: 22px 0 0;
    padding: 18px 20px 18px 23px;
    border: 1px solid rgba(37,197,223,.18);
    border-radius: 11px;
    background: linear-gradient( 135deg, #f1fbfd, #f4fcf8 );
    overflow: hidden;
}

    .terms-highlight::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        background: linear-gradient( 180deg, #25c5df, #35d49b );
    }

    .terms-highlight p {
        margin: 0;
        color: #45606e;
        font-size: 13px;
        line-height: 1.7;
    }

    .terms-highlight strong {
        color: #082f4d;
    }


/* =========================================================
   12. MEDICAL NOTICE
   ========================================================= */

.medical-notice {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin: 22px 0;
    padding: 22px;
    background: linear-gradient( 135deg, #fffaf1, #fff8ed );
    border: 1px solid #f1dfbf;
    border-radius: 14px;
    transition: transform .25s ease, box-shadow .25s ease;
}

    .medical-notice:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 25px rgba(157,109,31,.08);
    }

.medical-notice-icon {
    flex: 0 0 45px;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: #fff0d6;
    color: #d38a18;
    font-size: 21px;
}

.medical-notice h4 {
    margin: 0 0 7px;
    color: #684b18;
    font-size: 17px;
}

.medical-notice p {
    margin: 0;
    color: #735c36;
    font-size: 14px;
    line-height: 1.7;
}


/* =========================================================
   13. EMERGENCY NOTICE
   ========================================================= */

.emergency-notice {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin: 22px 0;
    padding: 22px;
    background: linear-gradient( 135deg, #fff7f7, #fff3f3 );
    border: 1px solid #f0d4d4;
    border-radius: 14px;
    transition: transform .25s ease, box-shadow .25s ease;
}

    .emergency-notice:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 25px rgba(180,50,50,.08);
    }

.emergency-notice-icon {
    flex: 0 0 45px;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: #ffe4e4;
    color: #d34d4d;
    font-size: 21px;
}

.emergency-notice h4 {
    margin: 0 0 7px;
    color: #793333;
    font-size: 17px;
}

.emergency-notice p {
    margin: 0;
    color: #765151;
    font-size: 14px;
    line-height: 1.7;
}


/* =========================================================
   14. LINKS
   ========================================================= */

.terms-section a {
    color: #159c67;
    font-weight: 650;
    text-decoration: none;
    transition: color .2s ease;
}

    .terms-section a:hover {
        color: #078ca7;
        text-decoration: underline;
    }


/* =========================================================
   15. CONTACT CTA
   ========================================================= */

.terms-contact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    width: 100%;
    max-width: 1120px;
    margin: 35px auto 0;
    padding: 28px 32px;
    border-radius: 17px;
    background: linear-gradient( 135deg, #082f4d, #0b4666 );
    box-shadow: 0 15px 40px rgba(8,47,77,.16);
    overflow: hidden;
}

    .terms-contact h3 {
        margin: 0 0 7px;
        color: #ffffff;
        font-size: 22px;
        font-weight: 800;
    }

    .terms-contact p {
        margin: 0;
        color: rgba(255,255,255,.75);
        font-size: 13px;
        line-height: 1.7;
    }

    .terms-contact .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        min-height: 48px;
        padding: 0 22px;
        border: 0;
        border-radius: 9px;
        background: #35d49b;
        color: #082f4d;
        text-decoration: none;
        font-size: 13px;
        font-weight: 750;
        transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
    }

        .terms-contact .btn:hover {
            background: #ffffff;
            color: #082f4d;
            transform: translateY(-2px);
            box-shadow: 0 9px 25px rgba(0,0,0,.16);
        }


/* =========================================================
   15A. MOBILE NAVIGATION - DESKTOP DEFAULT
   ========================================================= */

.terms-mobile-nav {
    display: none;
}

.terms-mobile-menu {
    display: none;
}

.terms-mobile-toggle {
    appearance: none;
    -webkit-appearance: none;
}


/* =========================================================
   16. TABLET
   768px - 1100px
   ========================================================= */

@media (max-width: 1100px) {

    .terms-wrapper {
        padding: 45px 20px 60px;
    }

    .terms-layout {
        grid-template-columns: 225px minmax(0, 1fr);
        gap: 25px;
    }

    .terms-intro,
    .terms-layout,
    .terms-contact {
        max-width: 100%;
    }

    .terms-intro {
        padding: 32px;
    }

    .terms-section {
        padding: 27px;
    }

    .terms-nav-card a {
        font-size: 12px;
    }
}


/* =========================================================
   17. TABLET / MOBILE
   767px AND BELOW
   ========================================================= */

@media (max-width: 767px) {

    .terms-wrapper {
        padding: 35px 15px 45px;
    }

    .terms-page .page-title {
        min-height: 270px !important;
    }

    .terms-page .breadcrumbs {
        margin-top: 70px;
    }

    /* Intro */

    .terms-intro {
        margin: -45px 0 28px;
        padding: 27px 22px;
        border-radius: 16px;
    }

        .terms-intro h2 {
            font-size: 27px;
        }

        .terms-intro p {
            font-size: 14px;
            line-height: 1.75;
        }

    /* Layout */

    .terms-layout {
        display: block;
        width: 100%;
    }

    /* Sidebar */

    .terms-sidebar {
        position: static;
        width: 100%;
        margin-bottom: 20px;
    }

    /* Hide desktop navigation on mobile */
    .terms-nav-card {
        display: none !important;
    }

    /* Privacy Policy-style mobile navigation */
    .terms-mobile-nav {
        display: block !important;
        width: 100%;
        margin-bottom: 20px;
        position: relative;
        z-index: 100;
    }

    .terms-mobile-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        min-height: 56px;
        padding: 0 18px;
        border: 0;
        border-radius: 12px;
        background: #082f4d;
        color: #ffffff;
        cursor: pointer;
        font-family: inherit;
        font-size: 15px;
        font-weight: 700;
        box-shadow: 0 8px 22px rgba(8,47,77,.12);
    }

        .terms-mobile-toggle span {
            display: flex;
            align-items: center;
            gap: 9px;
        }

            .terms-mobile-toggle span i {
                color: #35d49b;
                font-size: 18px;
            }

        .terms-mobile-toggle > i {
            color: #ffffff;
            font-size: 13px;
            transition: transform .25s ease;
        }

    .terms-mobile-nav.open .terms-mobile-toggle > i {
        transform: rotate(180deg);
    }

    .terms-mobile-menu {
        display: none;
        width: 100%;
        background: #082f4d;
        border-radius: 0 0 12px 12px;
        overflow: hidden;
        box-shadow: 0 12px 25px rgba(8,47,77,.13);
    }

        .terms-mobile-menu.active {
            display: block;
        }

        .terms-mobile-menu a {
            display: flex;
            align-items: center;
            width: 100%;
            min-height: 45px;
            padding: 10px 18px;
            border-top: 1px solid rgba(255,255,255,.10);
            color: rgba(255,255,255,.90);
            text-decoration: none;
            font-size: 13px;
            line-height: 1.5;
            transition: background .2s ease, color .2s ease, padding-left .2s ease;
        }

            .terms-mobile-menu a::before {
                content: "›";
                margin-right: 8px;
                color: #25c5df;
                font-size: 18px;
            }

            .terms-mobile-menu a:hover {
                padding-left: 22px;
                color: #35d49b;
                background: rgba(255,255,255,.04);
            }

    /* Content */

    .terms-content {
        width: 100%;
    }

    .terms-section {
        margin-bottom: 17px;
        padding: 24px 20px;
        border-radius: 14px;
        box-shadow: 0 6px 22px rgba(8,47,77,.055);
    }

        .terms-section:hover {
            transform: none;
        }

        .terms-section h2 {
            gap: 10px;
            font-size: 21px;
        }

    .section-number {
        flex-basis: 38px;
        width: 38px;
        height: 38px;
        border-radius: 9px;
    }

    .terms-section p,
    .terms-section li {
        font-size: 14px;
    }

    /* Cards */

    .terms-info-grid {
        grid-template-columns: 1fr;
        gap: 13px;
    }

    .terms-info-card {
        padding: 18px;
    }

    /* Notices */

    .medical-notice,
    .emergency-notice {
        gap: 13px;
        padding: 19px;
    }

    /* CTA */

    .terms-contact {
        flex-direction: column;
        align-items: stretch;
        margin-top: 25px;
        padding: 25px 21px;
    }

        .terms-contact .btn {
            width: 100%;
        }
}


/* =========================================================
   18. SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .terms-wrapper {
        padding: 25px 11px 35px;
    }

    .terms-page .page-title {
        min-height: 235px !important;
    }

    .terms-intro {
        margin-top: -35px;
        padding: 23px 18px;
        border-radius: 14px;
    }

    .terms-intro-badge {
        font-size: 10px;
    }

    .terms-intro h2 {
        font-size: 23px;
    }

    .terms-intro p {
        font-size: 13px;
        line-height: 1.7;
    }

    .terms-date {
        font-size: 11px;
    }

    /* Sidebar */

    .terms-nav-card {
        padding: 17px;
    }

        .terms-nav-card ul {
            grid-template-columns: 1fr;
        }

        .terms-nav-card a {
            min-height: 40px;
            font-size: 12px;
        }

    /* Sections */

    .terms-section {
        padding: 21px 17px;
    }

        .terms-section h2 {
            align-items: flex-start;
            font-size: 19px;
            line-height: 1.35;
        }

    .section-number {
        flex: 0 0 35px;
        width: 35px;
        height: 35px;
        font-size: 10px;
    }

    .terms-section p,
    .terms-section li {
        font-size: 13px;
        line-height: 1.75;
    }

    .terms-section h3 {
        font-size: 16px;
    }

    /* Cards */

    .terms-info-card h4 {
        font-size: 15px;
    }

    .terms-info-card p {
        font-size: 12.5px;
    }

    /* Notices */

    .medical-notice,
    .emergency-notice {
        flex-direction: column;
    }

    .medical-notice-icon,
    .emergency-notice-icon {
        flex-basis: 42px;
        width: 42px;
        height: 42px;
    }

    /* Highlight */

    .terms-highlight {
        padding: 16px 16px 16px 19px;
    }

    /* CTA */

    .terms-contact h3 {
        font-size: 19px;
    }
}


/* =========================================================
   19. VERY SMALL DEVICES
   ========================================================= */

@media (max-width: 360px) {

    .terms-wrapper {
        padding-left: 9px;
        padding-right: 9px;
    }

    .terms-intro {
        padding: 20px 16px;
    }

        .terms-intro h2 {
            font-size: 21px;
        }

    .terms-section {
        padding: 19px 15px;
    }

        .terms-section h2 {
            font-size: 18px;
        }

        .terms-section p,
        .terms-section li {
            font-size: 12.5px;
        }

    .terms-nav-card {
        padding: 15px;
    }

    .terms-contact {
        padding: 21px 16px;
    }
}


/* =========================================================
   20. ACCESSIBILITY
   ========================================================= */

.terms-page a:focus-visible,
.terms-page button:focus-visible {
    outline: 3px solid rgba(37,197,223,.45);
    outline-offset: 3px;
}


/* =========================================================
   21. REDUCE MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .terms-page *,
    .terms-page *::before,
    .terms-page *::after {
        scroll-behavior: auto !important;
        transition: none !important;
    }
}


/* =========================================================
   22. MEDIA SAFETY
   ========================================================= */

.terms-page img,
.terms-page video,
.terms-page iframe {
    max-width: 100%;
    height: auto;
}

.terms-page table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
}
/* =========================================================
   23. ANCHOR / STICKY HEADER SAFETY
   ========================================================= */

.terms-section,
.terms-section[id] {
    scroll-margin-top: 110px;
}

@media (max-width: 767px) {
    .terms-section,
    .terms-section[id] {
        scroll-margin-top: 85px;
    }
}

/***************Blog Page*************/
.blogs-page {
    background: var(--blog-bg);
    color: var(--blog-text);
    overflow: hidden;
}

    .blogs-page *,
    .blogs-page *::before,
    .blogs-page *::after {
        box-sizing: border-box;
    }

    .blogs-page button,
    .blogs-page input {
        font: inherit;
    }

    .blogs-page button {
        cursor: pointer;
    }

.blogs-container {
    width: min(1240px, calc(100% - 40px));
    margin-inline: auto;
}


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

.blogs-hero {
    position: relative;
    min-height: 390px;
    display: flex;
    align-items: center;
    background-image: linear-gradient( 90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.94) 38%, rgba(255,255,255,.38) 70%, rgba(255,255,255,.08) 100% ), url('/assets/img/heroslider/ekanshi-clinic-blogs.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

    .blogs-hero::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 5px;
        background: linear-gradient( 90deg, var(--blog-primary), #0b7ed0, var(--blog-secondary) );
    }

.blogs-hero-content {
    position: relative;
    z-index: 2;
    width: 620px;
    padding: 28px 0 50px;
}

.blogs-breadcrumb {
    position: absolute;
    top: 25px;
    left: 20px;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
}

    .blogs-breadcrumb a {
        color: var(--blog-primary);
        text-decoration: none;
    }

        .blogs-breadcrumb a:hover {
            color: var(--blog-secondary);
        }

    .blogs-breadcrumb span {
        color: #68758a;
    }

    .blogs-breadcrumb i {
        color: var(--blog-secondary);
        font-size: 10px;
    }

.blogs-hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--blog-secondary);
    font-size: 15px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-bottom: 12px;
}

    .blogs-hero-tag::before {
        content: "";
        width: 4px;
        height: 25px;
        background: var(--blog-secondary);
        border-radius: 4px;
    }

.blogs-hero h1 {
    margin: 0;
    font-size: clamp(38px, 4vw, 58px);
    line-height: 1.08;
    font-weight: 800;
    color: var(--blog-primary);
    letter-spacing: -1.2px;
}

    .blogs-hero h1 span {
        color: var(--blog-secondary);
    }

.blogs-hero-description {
    max-width: 620px;
    margin: 18px 0 25px;
    font-size: 17px;
    line-height: 1.7;
    color: #42526a;
}


/* =========================================================
   STATIC SEARCH
   ========================================================= */

.blog-search-box {
    width: min(570px, 100%);
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #dbe5ef;
    border-radius: 50px;
    padding: 6px;
    box-shadow: 0 8px 25px rgba(0, 47, 94, .10);
}

    .blog-search-box .search-icon {
        width: 45px;
        height: 45px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--blog-primary);
        font-size: 20px;
        flex-shrink: 0;
    }

    .blog-search-box input {
        flex: 1;
        min-width: 0;
        border: 0;
        outline: 0;
        background: transparent;
        padding: 0 10px;
        color: var(--blog-text);
        font-size: 15px;
    }

        .blog-search-box input::placeholder {
            color: #8996a7;
        }

.blog-search-btn {
    border: 0;
    background: linear-gradient( 135deg, var(--blog-secondary), #059669 );
    color: #fff;
    font-weight: 700;
    border-radius: 40px;
    padding: 13px 26px;
    transition: .3s ease;
}

    .blog-search-btn:hover {
        background: var(--blog-primary);
        transform: translateY(-1px);
    }

.blog-search-status {
    min-height: 20px;
    margin: 8px 0 0 18px;
    color: var(--blog-primary);
    font-size: 12px;
    font-weight: 600;
}


/* =========================================================
   CATEGORY NAVIGATION
   ========================================================= */

.blog-category-section {
    background: #fff;
    border-bottom: 1px solid var(--blog-border);
    padding: 18px 0;
}

.blog-category-list {
    display: flex;
    gap: 12px;
    align-items: center;
    overflow-x: auto;
    scrollbar-width: thin;
    padding-bottom: 3px;
}

    .blog-category-list::-webkit-scrollbar {
        height: 4px;
    }

    .blog-category-list::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 20px;
    }

.blog-category {
    min-width: 125px;
    min-height: 76px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px 16px;
    border: 1px solid transparent;
    border-radius: 14px;
    background: transparent;
    color: var(--blog-text);
    font-size: 13px;
    font-weight: 600;
    flex-shrink: 0;
    transition: .3s ease;
}

    .blog-category i {
        width: 35px;
        height: 35px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--blog-blue-light);
        color: #0877c9;
        font-size: 18px;
    }

    .blog-category:hover {
        background: var(--blog-blue-light);
        border-color: #cfe3f7;
        color: var(--blog-primary);
        transform: translateY(-2px);
    }

    .blog-category.active {
        background: linear-gradient( 135deg, var(--blog-primary), #0878d1 );
        color: #fff;
        box-shadow: 0 8px 20px rgba(6,59,143,.20);
    }

        .blog-category.active i {
            background: rgba(255,255,255,.18);
            color: #fff;
        }


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

.blogs-main {
    padding: 55px 0 70px;
}

.blogs-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 305px;
    gap: 28px;
    align-items: start;
}

.blogs-content {
    min-width: 0;
}

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

.blogs-eyebrow {
    display: inline-block;
    margin-bottom: 7px;
    color: var(--blog-secondary);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
}

.blogs-section-heading h2 {
    margin: 0;
    font-size: 30px;
    line-height: 1.2;
    color: var(--blog-primary);
    font-weight: 800;
}

.blogs-section-heading p {
    margin: 7px 0 0;
    color: var(--blog-muted);
    font-size: 14px;
}

.blogs-result-count {
    color: var(--blog-secondary);
    font-weight: 800;
    white-space: nowrap;
}


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

.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.blog-card {
    background: #fff;
    border: 1px solid var(--blog-border);
    border-radius: var(--blog-radius);
    overflow: hidden;
    box-shadow: 0 3px 12px rgba(18,52,86,.04);
    transition: transform .3s ease, box-shadow .3s ease;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

    .blog-card:hover {
        transform: translateY(-5px);
        box-shadow: var(--blog-shadow);
    }

    .blog-card[hidden] {
        display: none !important;
    }

.blog-image-wrapper {
    position: relative;
    /*height: 205px;*/
    display: block;
    overflow: hidden;
    background: #edf5fa;
}

    .blog-image-wrapper img {
        width: 100%;
        /*height: 100%;*/
        display: block;
        object-fit: cover;
        transition: transform .5s ease;
    }

.blog-card:hover .blog-image-wrapper img {
    transform: scale(1.05);
}

.blog-date {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 52px;
    min-height: 55px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.96);
    border-radius: 9px;
    box-shadow: 0 5px 15px rgba(0,0,0,.12);
    color: var(--blog-primary);
    line-height: 1.1;
    z-index: 2;
}

    .blog-date strong {
        font-size: 17px;
        font-weight: 800;
    }

    .blog-date span {
        font-size: 10px;
        text-transform: uppercase;
        font-weight: 700;
    }

.blog-card-body {
    padding: 18px 18px 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.blog-category-label {
    display: inline-flex;
    align-self: flex-start;
    padding: 5px 10px;
    border-radius: 30px;
    background: var(--blog-green-light);
    color: var(--blog-secondary-dark);
    font-size: 10px;
    line-height: 1;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 11px;
}

.blog-card h3 {
    margin: 0 0 10px;
    font-size: 18px;
    line-height: 1.35;
    font-weight: 800;
}

    .blog-card h3 a {
        color: var(--blog-primary);
        text-decoration: none;
    }

        .blog-card h3 a:hover {
            color: var(--blog-secondary);
        }

.blog-card-description {
    margin: 0 0 15px;
    color: var(--blog-muted);
    font-size: 13px;
    line-height: 1.65;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-card-footer {
    margin-top: auto;
    padding-top: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    border-top: 1px solid #edf1f5;
}

.blog-reading-time {
    color: #8793a3;
    font-size: 10px;
    font-weight: 600;
}

    .blog-reading-time i {
        margin-right: 3px;
    }

.blog-read-more {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #0676cf;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
}

    .blog-read-more i {
        transition: .2s ease;
    }

    .blog-read-more:hover {
        color: var(--blog-secondary);
    }

        .blog-read-more:hover i {
            transform: translateX(4px);
        }


/* =========================================================
   NO RESULTS
   ========================================================= */

.blog-no-results {
    margin-top: 20px;
    padding: 45px 25px;
    text-align: center;
    background: #fff;
    border: 1px solid var(--blog-border);
    border-radius: var(--blog-radius);
}

    .blog-no-results i {
        font-size: 35px;
        color: #0b7ed0;
    }

    .blog-no-results h3 {
        margin: 12px 0 7px;
        color: var(--blog-primary);
        font-size: 20px;
    }

    .blog-no-results p {
        margin: 0 auto 18px;
        color: var(--blog-muted);
        font-size: 13px;
    }

    .blog-no-results button {
        border: 0;
        border-radius: 30px;
        padding: 10px 18px;
        color: #fff;
        background: var(--blog-primary);
        font-size: 12px;
        font-weight: 700;
    }


/* =========================================================
   SIDEBAR
   ========================================================= */

.blogs-sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.blog-sidebar-card {
    background: #fff;
    border: 1px solid var(--blog-border);
    border-radius: var(--blog-radius);
    padding: 20px;
    box-shadow: 0 3px 12px rgba(18,52,86,.035);
}

.blog-sidebar-title {
    position: relative;
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e8edf2;
    color: var(--blog-primary);
    font-size: 18px;
    font-weight: 800;
}

    .blog-sidebar-title::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -1px;
        width: 55px;
        height: 3px;
        background: var(--blog-secondary);
        border-radius: 10px;
    }

    .blog-sidebar-title i {
        color: var(--blog-secondary);
    }


/* =========================================================
   POPULAR POSTS
   ========================================================= */

.popular-post {
    display: grid;
    grid-template-columns: 70px minmax(0,1fr);
    gap: 11px;
    padding: 12px 0;
    border-bottom: 1px solid #edf1f5;
}

    .popular-post:first-child {
        padding-top: 0;
    }

    .popular-post:last-child {
        padding-bottom: 0;
        border-bottom: 0;
    }

.popular-post-image {
    width: 70px;
    /*height: 58px;*/
    display: block;
    border-radius: 7px;
    overflow: hidden;
}

    .popular-post-image img {
        width: 100%;
        /*height: 100%;*/
        object-fit: cover;
    }

.popular-post h4 {
    margin: 0 0 5px;
    font-size: 12px;
    line-height: 1.35;
}

    .popular-post h4 a {
        color: var(--blog-text);
        text-decoration: none;
    }

        .popular-post h4 a:hover {
            color: var(--blog-secondary);
        }

.popular-post-date {
    color: #8793a3;
    font-size: 10px;
}


/* =========================================================
   SIDEBAR CATEGORY BUTTONS
   ========================================================= */

.sidebar-category-list {
    display: flex;
    flex-direction: column;
}

    .sidebar-category-list button {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 10px 0;
        border: 0;
        border-bottom: 1px solid #edf1f5;
        background: transparent;
        color: #44536a;
        text-align: left;
        font-size: 13px;
        transition: .2s ease;
    }

        .sidebar-category-list button:last-child {
            border-bottom: 0;
        }

        .sidebar-category-list button:hover,
        .sidebar-category-list button.active {
            color: var(--blog-primary);
            padding-left: 4px;
        }

.category-count {
    min-width: 27px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 7px;
    border-radius: 30px;
    background: var(--blog-blue-light);
    color: #0676cf;
    font-size: 11px;
    font-weight: 700;
}


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

.blog-cta-card {
    background: linear-gradient(135deg, #e3f6ff, #eafbf0);
    border-color: #c5e5ec;
}

.newsletter-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #fff;
    color: #0676cf;
    font-size: 19px;
    margin-bottom: 12px;
}

.blog-cta-card h3 {
    margin: 0 0 8px;
    color: var(--blog-primary);
    font-size: 18px;
    line-height: 1.3;
}

.blog-cta-card p {
    margin: 0 0 15px;
    color: #536276;
    font-size: 12px;
    line-height: 1.6;
}

.blog-sidebar-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 14px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--blog-primary), #0878d1);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

    .blog-sidebar-cta:hover {
        background: var(--blog-secondary);
        color: #fff;
    }

.blog-sidebar-phone {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    margin-top: 12px;
    color: var(--blog-secondary-dark);
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}


/* =========================================================
   PAGINATION
   ========================================================= */

.blog-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    margin-top: 35px;
}

    .blog-pagination span {
        width: 38px;
        height: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #0876d1;
        border-radius: 7px;
        background: #0876d1;
        color: #fff;
        font-size: 13px;
        font-weight: 700;
    }


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

.blog-seo-content {
    margin-top: 55px;
    background: #fff;
    border: 1px solid var(--blog-border);
    border-radius: var(--blog-radius);
    padding: 30px;
}

    .blog-seo-content h2 {
        margin: 0 0 12px;
        color: var(--blog-primary);
        font-size: 26px;
        font-weight: 800;
    }

    .blog-seo-content h3 {
        margin: 20px 0 8px;
        color: var(--blog-primary);
        font-size: 19px;
    }

    .blog-seo-content p {
        margin: 0 0 12px;
        color: var(--blog-muted);
        font-size: 14px;
        line-height: 1.8;
    }

    .blog-seo-content a {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        color: #0676cf;
        font-weight: 700;
        text-decoration: none;
    }

        .blog-seo-content a:hover {
            color: var(--blog-secondary);
        }

.blog-seo-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 30px;
    margin-top: 15px;
}


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

.blog-mobile-actions {
    display: none;
}


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

@media (max-width: 1100px) {

    .blogs-layout {
        grid-template-columns: minmax(0, 1fr) 275px;
    }

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

    .blog-image-wrapper {
        height: 190px;
    }

    .blogs-hero-content {
        width: 570px;
    }
}


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

@media (max-width: 767px) {

    .blogs-container {
        width: min(100% - 28px, 600px);
    }

    .blogs-hero {
        min-height: 475px;
        align-items: flex-end;
        background-position: 62% center;
    }

        .blogs-hero::before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient( 180deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.78) 46%, rgba(255,255,255,.98) 80% );
        }

    .blogs-breadcrumb {
        top: 18px;
        left: 14px;
        font-size: 11px;
    }

    .blogs-hero-content {
        width: 100%;
        padding: 45px 0 35px;
    }

    .blogs-hero-tag {
        font-size: 13px;
    }

    .blogs-hero h1 {
        font-size: 37px;
        letter-spacing: -.6px;
    }

    .blogs-hero-description {
        font-size: 14px;
        line-height: 1.6;
        margin: 14px 0 20px;
    }

    .blog-search-box {
        border-radius: 12px;
        padding: 5px;
    }

        .blog-search-box .search-icon {
            width: 40px;
            height: 40px;
        }

        .blog-search-box input {
            font-size: 13px;
        }

    .blog-search-btn {
        padding: 11px 17px;
        font-size: 12px;
    }

    .blog-category-section {
        padding: 12px 0;
    }

    .blog-category {
        min-width: 105px;
        min-height: 67px;
        font-size: 11px;
        padding: 8px 10px;
    }

        .blog-category i {
            width: 30px;
            height: 30px;
            font-size: 15px;
        }

    .blogs-main {
        padding: 35px 0 80px;
    }

    .blogs-layout {
        display: block;
    }

    .blogs-sidebar {
        margin-top: 35px;
    }

    .blogs-section-heading {
        display: block;
        margin-bottom: 20px;
    }

        .blogs-section-heading h2 {
            font-size: 25px;
        }

        .blogs-section-heading p {
            font-size: 13px;
        }

    .blogs-result-count {
        display: inline-block;
        margin-top: 8px;
    }

    .blog-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .blog-image-wrapper {
        height: 215px;
    }

    .blog-card-body {
        padding: 17px;
    }

    .blog-card h3 {
        font-size: 18px;
    }

    .blog-card-description {
        font-size: 13px;
    }

    .blog-sidebar-card {
        padding: 18px;
    }

    .blog-seo-content {
        margin-top: 35px;
        padding: 22px;
    }

        .blog-seo-content h2 {
            font-size: 22px;
        }

        .blog-seo-content h3 {
            font-size: 18px;
        }

        .blog-seo-content p {
            font-size: 13px;
        }

    .blog-seo-columns {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .blog-mobile-actions {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9999;
        background: #fff;
        box-shadow: 0 -5px 20px rgba(0,0,0,.12);
        border-top: 1px solid #e5e7eb;
    }

        .blog-mobile-actions a {
            flex: 1;
            min-height: 58px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 3px;
            color: var(--blog-primary);
            text-decoration: none;
            font-size: 10px;
            font-weight: 700;
        }

            .blog-mobile-actions a i {
                font-size: 18px;
            }

            .blog-mobile-actions a:nth-child(2) {
                color: #0aa856;
            }

            .blog-mobile-actions a:last-child {
                color: #0876d1;
            }
}


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

@media (max-width: 420px) {

    .blogs-container {
        width: calc(100% - 22px);
    }

    .blogs-hero {
        min-height: 455px;
    }

        .blogs-hero h1 {
            font-size: 32px;
        }

    .blog-search-box input {
        font-size: 12px;
    }

    .blog-search-btn {
        padding: 10px 13px;
    }

    .blog-image-wrapper {
        height: 195px;
    }

    .blog-card-footer {
        align-items: flex-start;
        flex-direction: column;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .blogs-page *,
    .blogs-page *::before,
    .blogs-page *::after {
        scroll-behavior: auto !important;
        transition: none !important;
        animation: none !important;
    }
}

/****************Blog Details Css***************/
.kidney-stone-article,
.kidney-stone-article * {
    box-sizing: border-box;
}

.kidney-stone-article {
    color: var(--ks-text);
    background: #fff;
    font-family: inherit;
    line-height: 1.75;
}

    .kidney-stone-article img {
        max-width: 100%;
        display: block;
    }

.ks-container {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}

.ks-content h2,
.ks-content h3,
.ks-sidebar h3,
.ks-cta h2 {
    color: var(--ks-primary);
    line-height: 1.25;
}

.ks-content p {
    color: #475569;
    margin: 0 0 18px;
}


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

.ks-hero {
    position: relative;
    min-height: 540px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: linear-gradient( 90deg, rgba(3, 45, 112, .94) 0%, rgba(6, 59, 143, .83) 43%, rgba(6, 59, 143, .38) 72%, rgba(6, 59, 143, .10) 100% ), url('/assets/img/blogs/kidney-stones-treatment.jpg') center center / cover no-repeat;
}

    .ks-hero::after {
        content: "";
        position: absolute;
        inset: auto 0 0;
        height: 100px;
        background: linear-gradient( transparent, rgba(0, 0, 0, .22) );
        pointer-events: none;
    }

    .ks-hero .ks-container {
        position: relative;
        z-index: 2;
        padding-top: 90px;
        padding-bottom: 70px;
    }

.ks-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    margin-bottom: 30px;
    color: rgba(255, 255, 255, .78);
    font-size: 14px;
}

    .ks-breadcrumb a {
        color: #fff;
        text-decoration: none;
    }

        .ks-breadcrumb a:hover {
            text-decoration: underline;
        }

.ks-hero-content {
    max-width: 760px;
}

.ks-eyebrow,
.ks-section-label,
.ks-cta-label {
    display: inline-block;
    color: #a7f3d0;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.ks-hero h1 {
    color: #fff;
    font-size: clamp(38px, 5vw, 64px);
    line-height: 1.08;
    margin: 14px 0 22px;
    font-weight: 800;
    letter-spacing: -.8px;
}

.ks-hero-intro {
    max-width: 700px;
    color: rgba(255, 255, 255, .92);
    font-size: 18px;
    line-height: 1.8;
    margin: 0 0 25px;
}

.ks-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

    .ks-meta span {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 8px 13px;
        border: 1px solid rgba(255, 255, 255, .20);
        border-radius: 999px;
        color: #fff;
        background: rgba(255, 255, 255, .10);
        backdrop-filter: blur(8px);
        font-size: 13px;
    }


/* =========================================================
   ARTICLE LAYOUT
   ========================================================= */

.ks-article-section {
    padding: 75px 0 100px;
    background: #fff;
}

.ks-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 55px;
    align-items: start;
}

.ks-content {
    min-width: 0;
}


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

.ks-featured-image {
    overflow: hidden;
    border-radius: var(--ks-radius);
    margin-bottom: 30px;
    background: var(--ks-light);
    box-shadow: var(--ks-shadow);
}

    .ks-featured-image img {
        width: 100%;
        aspect-ratio: 16 / 10;
        object-fit: cover;
    }


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

.ks-intro-box {
    margin-bottom: 30px;
    padding: 22px 25px;
    border-left: 4px solid var(--ks-secondary);
    border-radius: 0 12px 12px 0;
    background: var(--ks-light-green);
    color: #334155;
}

    .ks-intro-box strong {
        color: var(--ks-primary);
    }

.ks-content > p {
    font-size: 17px;
}


/* =========================================================
   TABLE OF CONTENTS
   ========================================================= */

.ks-toc {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 35px 0 55px;
    border: 1px solid var(--ks-border);
    border-radius: 16px;
    overflow: hidden;
    background: var(--ks-light);
}

.ks-toc-title {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 17px 20px;
    color: var(--ks-primary);
    font-weight: 800;
    background: #eef5ff;
    border-bottom: 1px solid var(--ks-border);
}

.ks-toc a {
    padding: 13px 18px;
    color: #475569;
    font-size: 14px;
    text-decoration: none;
    border-bottom: 1px solid var(--ks-border);
    transition: .2s ease;
}

    .ks-toc a:hover {
        color: var(--ks-primary);
        background: #fff;
    }


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

.ks-section {
    scroll-margin-top: 100px;
    margin-bottom: 70px;
    padding: 34px;
}

.ks-section-label {
    color: var(--ks-secondary-dark);
    margin-bottom: 11px;
}

.ks-section h2 {
    font-size: clamp(29px, 3vw, 40px);
    margin: 0 0 18px;
}

.ks-section > p {
    font-size: 16px;
    /*max-width: 850px;*/
}


/* =========================================================
   SYMPTOMS
   ========================================================= */

.ks-symptom-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin: 30px 0;
}

.ks-info-card {
    padding: 25px;
    border: 1px solid var(--ks-border);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 28px rgba(15, 23, 42, .05);
    transition: transform .2s ease, box-shadow .2s ease;
}

    .ks-info-card:hover {
        transform: translateY(-3px);
        box-shadow: var(--ks-shadow);
    }

.ks-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    margin-bottom: 16px;
    border-radius: 14px;
    color: var(--ks-primary);
    background: #eaf2ff;
    font-size: 22px;
}

.ks-info-card h3 {
    margin: 0 0 8px;
    font-size: 19px;
}

.ks-info-card p {
    margin: 0;
    font-size: 14px;
}


/* =========================================================
   WARNING
   ========================================================= */

.ks-warning {
    display: flex;
    gap: 15px;
    padding: 20px;
    border: 1px solid #fecaca;
    border-radius: 15px;
    background: #fff7f7;
}

    .ks-warning > i {
        flex: 0 0 auto;
        color: var(--ks-accent);
        font-size: 22px;
        margin-top: 2px;
    }

    .ks-warning strong {
        color: #991b1b;
    }

    .ks-warning p {
        margin: 4px 0 0;
        font-size: 14px;
    }


/* =========================================================
   CAUSES
   ========================================================= */

.ks-causes-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 30px;
}

    .ks-causes-list > div {
        position: relative;
        padding: 24px 24px 24px 70px;
        border-radius: 15px;
        background: var(--ks-light);
        border: 1px solid var(--ks-border);
    }

    .ks-causes-list span {
        position: absolute;
        left: 20px;
        top: 24px;
        color: var(--ks-secondary);
        font-weight: 800;
        font-size: 14px;
    }

    .ks-causes-list strong {
        display: block;
        margin-bottom: 5px;
        color: var(--ks-primary);
    }

    .ks-causes-list p {
        margin: 0;
        font-size: 14px;
    }


/* =========================================================
   DIAGNOSIS
   ========================================================= */

.ks-process {
    display: grid;
    gap: 15px;
    margin-top: 30px;
}

.ks-process-item {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 20px;
    border: 1px solid var(--ks-border);
    border-radius: 15px;
    background: #fff;
}

    .ks-process-item > span {
        flex: 0 0 40px;
        width: 40px;
        height: 40px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        color: #fff;
        background: var(--ks-primary);
        font-weight: 800;
    }

    .ks-process-item h3 {
        margin: 2px 0 5px;
        font-size: 18px;
    }

    .ks-process-item p {
        margin: 0;
        font-size: 14px;
    }


/* =========================================================
   TREATMENT
   ========================================================= */

.ks-treatment-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 30px;
}

.ks-treatment-card {
    padding: 26px;
    border: 1px solid var(--ks-border);
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 7px 25px rgba(15, 23, 42, .045);
}

    .ks-treatment-card h3 {
        margin: 10px 0 9px;
        font-size: 19px;
    }

    .ks-treatment-card p {
        margin: 0;
        font-size: 14px;
    }

.ks-treatment-number {
    color: var(--ks-secondary);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 1px;
}

.ks-treatment-highlight {
    background: linear-gradient( 145deg, #eef7ff, #f2fbf5 );
    border-color: #cce5d4;
}


/* =========================================================
   PREVENTION
   ========================================================= */

.ks-prevention-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 30px;
}

.ks-prevention-card {
    padding: 24px;
    border-radius: 16px;
    background: var(--ks-light-green);
    border: 1px solid #d7eedf;
}

    .ks-prevention-card > i {
        display: inline-grid;
        place-items: center;
        width: 48px;
        height: 48px;
        margin-bottom: 14px;
        border-radius: 14px;
        color: var(--ks-secondary-dark);
        background: #fff;
        font-size: 22px;
    }

    .ks-prevention-card h3 {
        margin: 0 0 7px;
        font-size: 18px;
    }

    .ks-prevention-card p {
        margin: 0;
        font-size: 14px;
    }

.ks-note {
    display: flex;
    gap: 13px;
    margin-top: 22px;
    padding: 18px;
    border-radius: 14px;
    background: #fff9eb;
    border: 1px solid #f4dfab;
}

    .ks-note > i {
        color: #b7791f;
        margin-top: 4px;
    }

    .ks-note p {
        margin: 0;
        font-size: 14px;
    }


/* =========================================================
   URGENT CARE
   ========================================================= */

.ks-emergency-section {
    padding: 32px;
    border: 1px solid #dbeafe;
    border-radius: 18px;
    background: linear-gradient( 145deg, #f5faff, #ffffff );
}

.ks-check-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px 25px;
    padding: 0;
    margin: 25px 0 0;
    list-style: none;
}

    .ks-check-list li {
        display: flex;
        align-items: flex-start;
        gap: 9px;
        color: #475569;
        font-size: 14px;
    }

    .ks-check-list i {
        color: var(--ks-secondary);
        margin-top: 4px;
    }


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

.ks-cta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    margin: 70px 0;
    padding: 38px;
    border-radius: 22px;
    color: #fff;
    background: linear-gradient( 120deg, rgba(3, 45, 112, .97), rgba(6, 59, 143, .90) ), url('/assets/img/blogs/kidney-stones-treatment.jpg') center / cover;
    box-shadow: var(--ks-shadow);
}

.ks-cta-label {
    color: #a7f3d0;
}

.ks-cta h2 {
    color: #fff;
    margin: 8px 0 10px;
    font-size: clamp(25px, 3vw, 35px);
}

.ks-cta p {
    max-width: 650px;
    color: rgba(255, 255, 255, .82);
    margin: 0;
}

.ks-cta-actions {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ks-btn {
    min-width: 210px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 9px;
    padding: 13px 18px;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    transition: .2s ease;
}

.ks-btn-primary {
    color: var(--ks-primary);
    background: #fff;
}

    .ks-btn-primary:hover {
        transform: translateY(-2px);
        background: #f0fdf4;
    }

.ks-btn-outline {
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .35);
    background: transparent;
}

    .ks-btn-outline:hover {
        background: rgba(255, 255, 255, .10);
    }


/* =========================================================
   FAQ
   ========================================================= */

.ks-faq-section {
    margin-bottom: 50px;
}

.ks-faq {
    display: grid;
    gap: 11px;
    margin-top: 25px;
}

    .ks-faq details {
        border: 1px solid var(--ks-border);
        border-radius: 13px;
        background: #fff;
        overflow: hidden;
    }

    .ks-faq summary {
        position: relative;
        cursor: pointer;
        padding: 18px 48px 18px 20px;
        color: var(--ks-primary);
        font-weight: 800;
        list-style: none;
    }

        .ks-faq summary::-webkit-details-marker {
            display: none;
        }

        .ks-faq summary::after {
            content: "+";
            position: absolute;
            right: 20px;
            top: 15px;
            font-size: 23px;
            font-weight: 400;
        }

    .ks-faq details[open] summary::after {
        content: "−";
    }

    .ks-faq details p {
        margin: 0;
        padding: 0 20px 20px;
        font-size: 14px;
    }


/* =========================================================
   SOURCES
   ========================================================= */

.ks-source-box {
    padding: 25px;
    border: 1px solid var(--ks-border);
    border-radius: 16px;
    background: var(--ks-light);
}

    .ks-source-box h2 {
        margin: 0 0 12px;
        color: var(--ks-primary);
        font-size: 22px;
    }

    .ks-source-box p {
        margin: 0 0 12px;
        font-size: 13px;
    }

.ks-source-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
}

    .ks-source-links a {
        color: var(--ks-primary);
        font-size: 13px;
        font-weight: 700;
        text-decoration: none;
    }

        .ks-source-links a:hover {
            text-decoration: underline;
        }


/* =========================================================
   SIDEBAR
   ========================================================= */

.ks-sidebar {
    position: sticky;
    top: 30px;
    display: grid;
    gap: 20px;
}

.ks-sidebar-card {
    padding: 25px;
    border: 1px solid var(--ks-border);
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 8px 30px rgba(15, 23, 42, .05);
}

    .ks-sidebar-card > h3 {
        margin: 0 0 10px;
        font-size: 21px;
    }

    .ks-sidebar-card > p {
        color: var(--ks-muted);
        margin: 0 0 17px;
        font-size: 14px;
    }


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

.ks-author-card {
    text-align: center;
}

.ks-author-image {
    width: 115px;
    height: 115px;
    margin: 0 auto 16px;
    overflow: hidden;
    border-radius: 50%;
    border: 4px solid #eaf2ff;
    background: #f8fafc;
}

    .ks-author-image img {
        width: 100%;
        /*height: 100%;*/
        object-fit: cover;
        object-position: center top;
    }

.ks-author-card > span {
    color: var(--ks-secondary-dark);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1.2px;
}

.ks-author-card h3 {
    margin: 5px 0 3px;
    font-size: 21px;
}

.ks-author-card p {
    margin-bottom: 15px;
}


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

.ks-sidebar-link,
.ks-sidebar-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 11px 13px;
    border-radius: 8px;
    color: var(--ks-primary);
    background: #eef5ff;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
}

    .ks-sidebar-link:hover,
    .ks-sidebar-btn:hover {
        background: #e1edff;
    }


/* =========================================================
   RELATED BLOGS
   ========================================================= */

.ks-related-card {
    padding-bottom: 10px;
}

.ks-related-item {
    display: grid;
    grid-template-columns: 75px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--ks-border);
    color: var(--ks-text);
    text-decoration: none;
}

    .ks-related-item:last-child {
        border-bottom: 0;
    }

    .ks-related-item img {
        width: 75px;
        /*height: 62px;*/
        object-fit: cover;
        border-radius: 9px;
    }

    .ks-related-item span {
        display: block;
        font-size: 13px;
        font-weight: 800;
        line-height: 1.35;
    }

    .ks-related-item small {
        display: block;
        margin-bottom: 4px;
        color: var(--ks-secondary-dark);
        font-size: 10px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .5px;
    }


/* =========================================================
   MOBILE ACTION BAR
   ========================================================= */

.ks-mobile-actions {
    display: none;
}


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

@media (max-width: 1100px) {

    .ks-container {
        width: min(100% - 32px, 980px);
    }

    .ks-layout {
        grid-template-columns: minmax(0, 1fr) 285px;
        gap: 30px;
    }

    .ks-hero {
        min-height: 500px;
    }

        .ks-hero h1 {
            font-size: 48px;
        }

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

    .ks-cta-actions {
        flex-direction: row;
    }
}


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

@media (max-width: 767px) {

    .ks-container {
        width: min(100% - 28px, 680px);
    }

    .ks-hero {
        min-height: 520px;
        background: linear-gradient( 180deg, rgba(3, 45, 112, .50) 0%, rgba(3, 45, 112, .94) 72%, rgba(3, 45, 112, .98) 100% ), url('/assets/img/blogs/kidney-stones-treatment.jpg') 60% center / cover no-repeat;
    }

        .ks-hero .ks-container {
            padding-top: 75px;
            padding-bottom: 50px;
        }

    .ks-breadcrumb {
        margin-bottom: 20px;
        font-size: 12px;
    }

    .ks-hero h1 {
        font-size: 37px;
        letter-spacing: -.4px;
    }

    .ks-hero-intro {
        font-size: 15px;
        line-height: 1.7;
    }

    .ks-meta {
        gap: 7px;
    }

        .ks-meta span {
            font-size: 11px;
            padding: 7px 10px;
        }

    .ks-article-section {
        padding: 45px 0 90px;
    }

    .ks-layout {
        display: block;
    }

    .ks-sidebar {
        position: static;
        margin-top: 50px;
    }

    .ks-toc {
        grid-template-columns: 1fr;
        margin: 30px 0 45px;
    }

        .ks-toc a {
            border-bottom: 1px solid var(--ks-border);
        }

            .ks-toc a:last-child {
                border-bottom: 0;
            }

    .ks-section {
        margin-bottom: 55px;
    }

    .ks-symptom-grid,
    .ks-causes-list,
    .ks-treatment-grid,
    .ks-prevention-grid {
        grid-template-columns: 1fr;
    }

    .ks-check-list {
        grid-template-columns: 1fr;
    }

    .ks-emergency-section {
        padding: 24px 20px;
    }

    .ks-cta {
        margin: 50px 0;
        padding: 28px 22px;
    }

    .ks-cta-actions {
        width: 100%;
        flex-direction: column;
    }

    .ks-btn {
        width: 100%;
    }

    .ks-source-links {
        display: grid;
        gap: 8px;
    }


    /* MOBILE BOTTOM BAR */

    .ks-mobile-actions {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9999;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
        background: rgba(255, 255, 255, .97);
        border-top: 1px solid var(--ks-border);
        box-shadow: 0 -10px 30px rgba(15, 23, 42, .12);
        backdrop-filter: blur(12px);
    }

        .ks-mobile-actions a {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 3px;
            color: var(--ks-primary);
            font-size: 10px;
            font-weight: 800;
            text-decoration: none;
        }

        .ks-mobile-actions i {
            font-size: 18px;
        }
}


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

@media (max-width: 420px) {

    .ks-container {
        width: min(100% - 22px, 380px);
    }

    .ks-hero {
        min-height: 500px;
    }

        .ks-hero h1 {
            font-size: 32px;
        }

    .ks-hero-intro {
        font-size: 14px;
    }

    .ks-featured-image img {
        aspect-ratio: 4 / 3;
    }

    .ks-info-card,
    .ks-treatment-card,
    .ks-prevention-card {
        padding: 20px;
    }

    .ks-warning {
        padding: 16px;
    }

    .ks-meta span {
        font-size: 10px;
    }
}


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

@media (prefers-reduced-motion: reduce) {

    .ks-info-card,
    .ks-btn,
    .ks-sidebar-link,
    .ks-sidebar-btn {
        transition: none;
    }
}

/* =========================================================
   URINARY TRACT DISORDERS PAGE
   Theme adapted from the supplied Endo Urology CSS
========================================================= */

.urinary-page {
    --urinary-blue: #063b7a;
    --urinary-blue-dark: #052e60;
    --urinary-green: #28a65a;
    --urinary-green-dark: #168443;
    --urinary-soft-blue: #f2f8fd;
    --urinary-soft-green: #f1fbf5;
    --urinary-text: #33445c;
    --urinary-muted: #66758a;
    --urinary-border: #dfe9f1;
    color: var(--urinary-text);
    background: #fff;
}

    .urinary-page * {
        box-sizing: border-box;
    }

.urinary-hero {
    position: relative;
    min-height: 500px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: linear-gradient(90deg, rgba(3, 37, 76, .94) 0%, rgba(5, 57, 111, .82) 48%, rgba(5, 57, 111, .35) 100%), url('/assets/img/services/urinary-tract-disorders.jpg') center/cover no-repeat;
}

    .urinary-hero::after {
        content: "";
        position: absolute;
        inset: auto 0 0;
        height: 70px;
        background: linear-gradient(180deg, transparent, rgba(255,255,255,.12));
        pointer-events: none;
    }

.urinary-hero-content {
    position: relative;
    z-index: 2;
    padding: 80px 0 75px;
    max-width: 900px;
}

.urinary-breadcrumb {
    margin-bottom: 22px;
}

    .urinary-breadcrumb ol {
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding: 0;
        margin: 0;
        font-size: 14px;
    }

    .urinary-breadcrumb li,
    .urinary-breadcrumb a {
        color: rgba(255,255,255,.82);
        text-decoration: none;
    }

        .urinary-breadcrumb li + li::before {
            content: "›";
            margin-right: 8px;
            color: #8ee3ae;
        }

.urinary-hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 999px;
    background: rgba(255,255,255,.09);
    color: #d9ffe7;
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 18px;
}

.urinary-hero h1 {
    margin: 0 0 18px;
    color: #fff;
    font-size: clamp(38px, 5vw, 68px);
    line-height: 1.06;
    font-weight: 800;
    letter-spacing: -.8px;
}

    .urinary-hero h1 span {
        color: #62d784;
    }

.urinary-hero-lead {
    max-width: 760px;
    margin: 0 0 28px;
    color: rgba(255,255,255,.92);
    font-size: 19px;
    line-height: 1.7;
}

.urinary-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 28px;
}

.urinary-btn,
.urinary-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 48px;
    padding: 12px 21px;
    border-radius: 9px;
    font-weight: 700;
    text-decoration: none;
    transition: .25s ease;
}

.urinary-btn {
    color: #fff;
    background: linear-gradient(135deg, #0879d8, #20a35b);
    box-shadow: 0 10px 25px rgba(0,0,0,.16);
}

    .urinary-btn:hover {
        color: #fff;
        transform: translateY(-2px);
    }

.urinary-btn-outline {
    color: #fff;
    border: 1px solid rgba(255,255,255,.5);
    background: rgba(255,255,255,.08);
}

    .urinary-btn-outline:hover {
        color: var(--urinary-blue);
        background: #fff;
    }

.urinary-trust-line {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 25px;
    color: rgba(255,255,255,.9);
    font-size: 14px;
}

    .urinary-trust-line span {
        display: inline-flex;
        align-items: center;
        gap: 7px;
    }

    .urinary-trust-line i {
        color: #65dc87;
    }

.urinary-section {
    padding: 78px 0;
}

.urinary-section-soft {
    background: linear-gradient(180deg, #f7fcfa 0%, #eff9f5 100%);
}

.urinary-section-light {
    background: var(--urinary-soft-blue);
}

.urinary-section-warm {
    background: #fbfaf6;
}

.urinary-section-heading {
    max-width: 800px;
    margin: 0 auto 45px;
    text-align: center;
}

.urinary-label,
.urinary-cta-label {
    color: var(--urinary-green);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .2px;
    margin-bottom: 8px;
}

.urinary-section-heading h2,
.urinary-content h2 {
    margin: 0 0 14px;
    color: var(--urinary-blue);
    font-size: clamp(30px, 4vw, 44px);
    line-height: 1.15;
    font-weight: 800;
}

.urinary-section-heading p,
.urinary-content > p {
    color: var(--urinary-muted);
    line-height: 1.8;
    font-size: 16px;
    margin-bottom: 0;
}

.urinary-heading-line {
    width: 58px;
    height: 4px;
    border-radius: 4px;
    background: var(--urinary-green);
    margin: 16px 0 22px;
}

    .urinary-heading-line.center {
        margin-left: auto;
        margin-right: auto;
    }

.urinary-intro {
    padding: 72px 0 50px;
}

.urinary-intro-card,
.urinary-conditions-card {
    height: 100%;
    border-radius: 18px;
    border: 1px solid var(--urinary-border);
    background: #fff;
    box-shadow: 0 12px 35px rgba(17, 54, 88, .07);
}

.urinary-intro-card {
    padding: 34px;
}

    .urinary-intro-card h2 {
        color: var(--urinary-blue);
        font-size: clamp(30px, 3.5vw, 42px);
        font-weight: 800;
        margin: 0;
    }

    .urinary-intro-card p {
        color: var(--urinary-text);
        font-size: 16px;
        line-height: 1.85;
        margin-bottom: 15px;
    }

        .urinary-intro-card p:last-child {
            margin-bottom: 0;
        }

.urinary-conditions-card {
    padding: 30px;
    background: linear-gradient(145deg, #f4fcf7, #eef9f4);
    border-color: #d5ecdf;
}

    .urinary-conditions-card h3,
    .urinary-card-heading {
        color: var(--urinary-blue);
        font-size: 24px;
        line-height: 1.25;
        font-weight: 800;
        margin: 0 0 20px;
    }

.urinary-condition-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .urinary-condition-list li {
        position: relative;
        padding: 0 0 13px 27px;
        color: var(--urinary-text);
        line-height: 1.5;
        font-size: 15px;
    }

        .urinary-condition-list li::before {
            content: "\f26a";
            font-family: bootstrap-icons;
            position: absolute;
            left: 0;
            top: 0;
            color: var(--urinary-green);
            font-weight: 700;
        }

.urinary-mini-benefits {
    margin-top: 25px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 12px;
}

.urinary-mini-benefit {
    padding: 14px;
    border-radius: 12px;
    background: #f8fbfe;
    border: 1px solid #e6eef5;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 14px;
    font-weight: 600;
}

    .urinary-mini-benefit i {
        color: var(--urinary-green);
        font-size: 18px;
    }

.urinary-procedure-card {
    height: 100%;
    overflow: hidden;
    border-radius: 15px;
    background: #fff;
    border: 1px solid var(--urinary-border);
    box-shadow: 0 8px 25px rgba(17, 54, 88, .06);
    transition: .25s ease;
}

    .urinary-procedure-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 32px rgba(17, 54, 88, .11);
    }

.urinary-procedure-image {
    display: block;
    width: 100%;
    /*height: 190px;*/
    object-fit: cover;
}

.urinary-procedure-content {
    padding: 20px;
}

.urinary-procedure-title {
    color: var(--urinary-blue);
    font-size: 19px;
    line-height: 1.3;
    font-weight: 800;
    margin: 0 0 10px;
}

.urinary-procedure-text {
    color: var(--urinary-muted);
    line-height: 1.65;
    font-size: 14px;
    margin: 0 0 15px;
}

.urinary-procedure-link {
    color: var(--urinary-green-dark);
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
}

.urinary-benefits-wrapper {
    height: 100%;
    padding: 28px;
    border-radius: 17px;
    background: linear-gradient(150deg, #eaf6ff, #f7fbff);
    border: 1px solid #dcebf7;
}

.urinary-benefit {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid rgba(6,59,122,.08);
}

    .urinary-benefit:last-child {
        border-bottom: 0;
    }

.urinary-benefit-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #fff;
    color: var(--urinary-blue);
    box-shadow: 0 4px 12px rgba(0,0,0,.06);
}

.urinary-benefit span {
    color: var(--urinary-text);
    font-size: 14px;
    line-height: 1.45;
    font-weight: 600;
}

.urinary-detail-card {
    height: 100%;
    padding: 28px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid var(--urinary-border);
    box-shadow: 0 8px 24px rgba(17,54,88,.06);
}

.urinary-detail-number {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #e8f7ee;
    color: var(--urinary-green-dark);
    font-weight: 800;
    margin-bottom: 16px;
}

.urinary-detail-card h3 {
    color: var(--urinary-blue);
    font-size: 21px;
    font-weight: 800;
    margin: 0 0 10px;
}

.urinary-detail-card p {
    color: var(--urinary-muted);
    line-height: 1.75;
    font-size: 15px;
    margin: 0;
}

.urinary-comparison {
    overflow-x: auto;
    border: 1px solid var(--urinary-border);
    border-radius: 15px;
    box-shadow: 0 8px 24px rgba(17,54,88,.05);
}

    .urinary-comparison table {
        width: 100%;
        min-width: 650px;
        margin: 0;
        border-collapse: collapse;
        background: #fff;
    }

    .urinary-comparison th {
        background: var(--urinary-blue);
        color: #fff;
        padding: 16px 18px;
        text-align: left;
        font-size: 14px;
    }

    .urinary-comparison td {
        padding: 15px 18px;
        border-top: 1px solid var(--urinary-border);
        color: var(--urinary-text);
        font-size: 14px;
        line-height: 1.55;
    }

    .urinary-comparison tr:nth-child(even) td {
        background: #f8fbfd;
    }

.urinary-note {
    margin-top: 18px;
    padding: 15px 18px;
    border-left: 4px solid var(--urinary-green);
    border-radius: 8px;
    background: #f2faf5;
    color: #4e5f70;
    font-size: 14px;
    line-height: 1.65;
}

.urinary-warning {
    margin-top: 20px;
    padding: 18px;
    border-radius: 12px;
    background: #fff8ed;
    border: 1px solid #f5dfbb;
    color: #68563e;
    font-size: 14px;
    line-height: 1.7;
}

.urinary-feature-card {
    height: 100%;
    padding: 30px 22px;
    text-align: center;
    border-radius: 16px;
    background: #fff;
    border: 1px solid var(--urinary-border);
    box-shadow: 0 8px 25px rgba(17,54,88,.05);
}

.urinary-feature-icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    margin: 0 auto 17px;
    border-radius: 50%;
    background: #eaf8f0;
    color: var(--urinary-green-dark);
    font-size: 25px;
}

.urinary-feature-title {
    color: var(--urinary-blue);
    font-size: 19px;
    font-weight: 800;
    margin: 0 0 9px;
}

.urinary-feature-text {
    color: var(--urinary-muted);
    font-size: 14px;
    line-height: 1.65;
    margin: 0;
}

.urinary-steps {
    position: relative;
}

.urinary-step {
    height: 100%;
    padding: 25px;
    border-radius: 15px;
    background: #fff;
    border: 1px solid var(--urinary-border);
}

    .urinary-step h3 {
        color: var(--urinary-blue);
        font-size: 19px;
        font-weight: 800;
        margin: 0 0 8px;
    }

    .urinary-step p {
        color: var(--urinary-muted);
        font-size: 14px;
        line-height: 1.7;
        margin: 0;
    }

.urinary-faq {
    border: 1px solid var(--urinary-border);
    border-radius: 13px;
    background: #fff;
    overflow: hidden;
    margin-bottom: 12px;
}

    .urinary-faq summary {
        cursor: pointer;
        list-style: none;
        padding: 20px 24px;
        color: var(--urinary-blue);
        font-weight: 800;
        font-size: 16px;
        position: relative;
        padding-right: 55px;
    }

        .urinary-faq summary::-webkit-details-marker {
            display: none;
        }

        .urinary-faq summary::after {
            content: "\f282";
            font-family: bootstrap-icons;
            position: absolute;
            right: 22px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--urinary-green);
        }

    .urinary-faq[open] summary::after {
        transform: translateY(-50%) rotate(180deg);
    }

.urinary-faq-content {
    padding: 0 24px 21px;
    color: var(--urinary-muted);
    line-height: 1.75;
    font-size: 15px;
}

.urinary-cta {
    padding: 78px 0;
    background: linear-gradient(135deg, #edf9f3 0%, #f0f8ff 100%);
}

.urinary-cta-image {
    width: 100%;
    /*height: 320px;*/
    object-fit: cover;
    border-radius: 18px;
    box-shadow: 0 15px 35px rgba(17,54,88,.12);
}

.urinary-cta h2 {
    color: var(--urinary-blue);
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.15;
    font-weight: 800;
    margin: 0 0 15px;
}

.urinary-cta p {
    color: var(--urinary-muted);
    line-height: 1.8;
    font-size: 16px;
    margin-bottom: 23px;
}

.urinary-disclaimer {
    padding: 25px 0;
    background: #f7f9fb;
    border-top: 1px solid #e7edf2;
}

    .urinary-disclaimer p {
        margin: 0;
        color: #718092;
        font-size: 13px;
        line-height: 1.7;
        text-align: center;
    }

@media (max-width: 991px) {
    .urinary-hero {
        min-height: 570px;
    }

    .urinary-section,
    .urinary-cta {
        padding: 60px 0;
    }

    .urinary-procedure-image {
        height: 210px;
    }
}

@media (max-width: 767px) {
    .urinary-hero {
        min-height: 620px;
    }

    .urinary-hero-content {
        padding: 65px 0;
    }

    .urinary-hero-lead {
        font-size: 16px;
    }

    .urinary-trust-line {
        display: grid;
        gap: 10px;
    }

    .urinary-intro {
        padding-top: 50px;
    }

    .urinary-intro-card,
    .urinary-conditions-card {
        padding: 24px;
    }

    .urinary-mini-benefits {
        grid-template-columns: 1fr;
    }

    .urinary-procedure-image {
        height: 220px;
    }

    .urinary-cta-image {
        height: 250px;
    }
}

/*--------------------------------------------------------------
# Testimonials Section
--------------------------------------------------------------*/

.testimonials {
    position: relative;
    overflow: hidden;
    padding: 80px 0;
    background: linear-gradient( 90deg, rgba(3, 25, 48, 0.96), rgba(5, 39, 68, 0.92) ), url("/assets/img/testimonials-ekanshi-clinic-bg.jpg") center center / cover no-repeat;
}

    /* -------------------------------------------------------------
   SECTION TITLE
------------------------------------------------------------- */

    .testimonials .section-title {
        max-width: 900px;
        margin: 0 auto 55px;
        padding: 0 20px;
        text-align: center;
    }

    /* Small Label */

    .testimonials .section-subtitle {
        display: inline-block;
        position: relative;
        margin-bottom: 15px;
        padding-bottom: 12px;
        color: #39a852;
        font-size: 15px;
        font-weight: 700;
        letter-spacing: 1.8px;
        text-transform: uppercase;
    }

        /* Green Line */

        .testimonials .section-subtitle::after {
            content: "";
            position: absolute;
            left: 50%;
            bottom: 0;
            width: 55px;
            height: 3px;
            transform: translateX(-50%);
            background: #39a852;
            border-radius: 10px;
        }

    /* Main Heading */

    .testimonials .section-title h2 {
        margin: 0 0 16px;
        color: #ffffff;
        font-size: 44px;
        line-height: 1.2;
        font-weight: 700;
    }

    /* Description */

    .testimonials .section-title .section-description {
        max-width: 720px;
        margin: 0 auto;
        color: rgba(255, 255, 255, 0.78);
        font-size: 17px;
        line-height: 1.7;
        font-weight: 400;
    }


    /* -------------------------------------------------------------
   TESTIMONIAL SLIDER
------------------------------------------------------------- */

    .testimonials .testimonial-slider {
        position: relative;
    }

        .testimonials .testimonial-slider .swiper-wrapper {
            height: auto !important;
        }


    /* -------------------------------------------------------------
   TESTIMONIAL CARD
------------------------------------------------------------- */

    .testimonials .testimonial-item {
        position: relative;
        height: 100%;
        overflow: hidden;
        padding: 0;
        background: rgba(255, 255, 255, 0.98);
        border: 1px solid rgba(255, 255, 255, 0.5);
        border-radius: 20px;
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
        transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
    }

        /* Top Accent */

        .testimonials .testimonial-item::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient( 90deg, #0b63ce, #39a852 );
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.4s ease;
            z-index: 2;
        }

        .testimonials .testimonial-item:hover {
            transform: translateY(-8px);
            border-color: rgba(57, 168, 82, 0.4);
            box-shadow: 0 22px 50px rgba(0, 0, 0, 0.22);
        }

            .testimonials .testimonial-item:hover::before {
                transform: scaleX(1);
            }


    /* -------------------------------------------------------------
   TESTIMONIAL HEADER
------------------------------------------------------------- */

    .testimonials .testimonial-header {
        position: relative;
        padding: 28px 30px 18px;
        text-align: center;
        background: linear-gradient( 180deg, #f8fbff 0%, #ffffff 100% );
    }


    /* Patient Icon */

    .testimonials .patient-photo {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 62px;
        height: 62px;
        margin: 0 auto 15px;
        border-radius: 50%;
        background: linear-gradient( 135deg, #e8f3ff, #eefaf0 );
        border: 2px solid rgba(11, 99, 206, 0.15);
        box-shadow: 0 6px 18px rgba(11, 99, 206, 0.12);
        color: #0b63ce;
        font-size: 32px;
        transition: all 0.3s ease;
    }

    .testimonials .testimonial-item:hover .patient-photo {
        transform: scale(1.08);
        border-color: rgba(57, 168, 82, 0.35);
        color: #39a852;
    }


    /* -------------------------------------------------------------
   STAR RATING
------------------------------------------------------------- */

    .testimonials .testimonial-header .rating {
        display: flex;
        justify-content: center;
        gap: 4px;
    }

        .testimonials .testimonial-header .rating i {
            color: #f5b301;
            font-size: 15px;
            line-height: 1;
        }


    /* -------------------------------------------------------------
   TESTIMONIAL BODY
------------------------------------------------------------- */

    .testimonials .testimonial-body {
        padding: 8px 30px 20px;
    }

        .testimonials .testimonial-body p {
            position: relative;
            margin: 0;
            color: #5f6b78;
            font-size: 15.5px;
            line-height: 1.75;
            font-weight: 400;
            font-style: italic;
            text-align: center;
        }

            /* Opening Quote */

            .testimonials .testimonial-body p::before {
                content: "“";
                position: absolute;
                top: -24px;
                left: -8px;
                color: rgba(57, 168, 82, 0.35);
                font-family: Georgia, serif;
                font-size: 42px;
                line-height: 1;
            }

            /* Closing Quote */

            .testimonials .testimonial-body p::after {
                content: "”";
                position: absolute;
                right: -6px;
                bottom: -28px;
                color: rgba(57, 168, 82, 0.35);
                font-family: Georgia, serif;
                font-size: 42px;
                line-height: 1;
            }


    /* -------------------------------------------------------------
   TESTIMONIAL FOOTER
------------------------------------------------------------- */

    .testimonials .testimonial-footer {
        position: relative;
        padding: 18px 30px 28px;
        text-align: center;
    }

        .testimonials .testimonial-footer h5 {
            margin: 0 0 5px;
            color: #073b7a;
            font-size: 17px;
            line-height: 1.3;
            font-weight: 700;
        }

        .testimonials .testimonial-footer span {
            display: block;
            margin-bottom: 12px;
            color: #7a8794;
            font-size: 13px;
            line-height: 1.4;
        }


        /* Quote Icon */

        .testimonials .testimonial-footer .quote-icon {
            position: absolute;
            right: 25px;
            bottom: 18px;
            color: rgba(57, 168, 82, 0.3);
            font-size: 24px;
            transition: all 0.3s ease;
        }

    .testimonials .testimonial-item:hover .quote-icon {
        color: #39a852;
        transform: scale(1.12);
    }


    /* -------------------------------------------------------------
   SWIPER NAVIGATION
------------------------------------------------------------- */

    .testimonials .swiper-navigation {
        position: relative;
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-top: 35px;
    }

    .testimonials .swiper-button-prev,
    .testimonials .swiper-button-next {
        position: static;
        width: 46px;
        height: 46px;
        margin: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: #ffffff;
        color: #0b63ce;
        font-size: 16px;
        box-shadow: 0 8px 22px rgba(0, 0, 0, 0.16);
        transition: all 0.3s ease;
    }

        .testimonials .swiper-button-prev:hover,
        .testimonials .swiper-button-next:hover {
            background: #39a852;
            color: #ffffff;
            transform: translateY(-3px);
        }

        .testimonials .swiper-button-prev::after,
        .testimonials .swiper-button-next::after {
            font-size: 16px;
            font-weight: 700;
        }


    /* -------------------------------------------------------------
   SWIPER PAGINATION
------------------------------------------------------------- */

    .testimonials .swiper-pagination {
        position: static;
        margin-top: 25px;
        text-align: center;
    }

        .testimonials .swiper-pagination .swiper-pagination-bullet {
            width: 9px;
            height: 9px;
            margin: 0 5px;
            background: rgba(255, 255, 255, 0.45);
            opacity: 1;
            transition: all 0.3s ease;
        }

        .testimonials .swiper-pagination
        .swiper-pagination-bullet-active {
            width: 25px;
            border-radius: 10px;
            background: #39a852;
            transform: none;
        }


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

@media (max-width: 1199px) {

    .testimonials {
        padding: 70px 0;
    }

        .testimonials .section-title h2 {
            font-size: 40px;
        }

        .testimonials .testimonial-header {
            padding: 25px 25px 18px;
        }

        .testimonials .testimonial-body {
            padding-left: 25px;
            padding-right: 25px;
        }

        .testimonials .testimonial-footer {
            padding-left: 25px;
            padding-right: 25px;
        }
}


/* =============================================================
   TABLET / SMALL LAPTOP
============================================================= */

@media (max-width: 991px) {

    .testimonials {
        padding: 65px 0;
    }

        .testimonials .section-title {
            margin-bottom: 45px;
        }

            .testimonials .section-title h2 {
                font-size: 36px;
            }

            .testimonials .section-title .section-description {
                font-size: 16px;
            }

        .testimonials .testimonial-item {
            margin-bottom: 25px;
        }
}


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

@media (max-width: 767px) {

    .testimonials {
        padding: 55px 0;
    }

        .testimonials .section-title {
            margin-bottom: 35px;
            padding: 0 15px;
        }

        .testimonials .section-subtitle {
            font-size: 13px;
            letter-spacing: 1.4px;
        }

        .testimonials .section-title h2 {
            font-size: 30px;
            line-height: 1.25;
        }

        .testimonials .section-title .section-description {
            font-size: 15px;
            line-height: 1.6;
        }

        .testimonials .testimonial-header {
            padding: 22px 20px 15px;
        }

        .testimonials .patient-photo {
            width: 56px;
            height: 56px;
            font-size: 28px;
        }

        .testimonials .testimonial-body {
            padding: 8px 20px 15px;
        }

            .testimonials .testimonial-body p {
                font-size: 14.5px;
                line-height: 1.65;
            }

        .testimonials .testimonial-footer {
            padding: 15px 20px 22px;
        }

            .testimonials .testimonial-footer h5 {
                font-size: 16px;
            }

            .testimonials .testimonial-footer span {
                font-size: 12.5px;
            }

            .testimonials .testimonial-footer .quote-icon {
                right: 15px;
                bottom: 12px;
                font-size: 20px;
            }

        .testimonials .swiper-button-prev,
        .testimonials .swiper-button-next {
            width: 40px;
            height: 40px;
        }
}


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

@media (max-width: 575px) {

    .testimonials {
        padding: 50px 0;
    }

        .testimonials .section-title h2 {
            font-size: 28px;
        }

        .testimonials .section-title .section-description {
            font-size: 14px;
        }

        .testimonials .testimonial-header {
            padding: 18px 15px 12px;
        }

        .testimonials .testimonial-body {
            padding: 8px 15px 12px;
        }

        .testimonials .testimonial-footer {
            padding: 12px 15px 18px;
        }

        .testimonials .swiper-navigation {
            margin-top: 25px;
        }
}