/* =========================================
   PREMIUM FULL-BACKGROUND HERO SLIDER
========================================= */

.hero-section.page-section {
    position: relative;
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
    margin: 0;
    padding: 0;
    display: block;
    overflow: hidden;
    scroll-margin-top: 0;
    background: var(--brand-navy-deep, #071a30);
}

.hero-slider {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100svh;
    min-height: 650px;
    overflow: hidden;
    background: #071a30;
}

.hero-track {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Individual slides */

.hero-slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 100%;
    padding: 110px 9% 100px;
    overflow: hidden;
    background-image: var(--hero-image);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0;
    visibility: hidden;
    transform: scale(1.035);
    transition: opacity 900ms ease, transform 6500ms ease, visibility 900ms ease;
}

    .hero-slide.is-active {
        z-index: 1;
        opacity: 1;
        visibility: visible;
        transform: scale(1);
    }

/* Background overlay */

.hero-slide-overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient( 90deg, rgba(5, 20, 39, 0.96) 0%, rgba(7, 27, 49, 0.91) 32%, rgba(7, 27, 49, 0.70) 56%, rgba(7, 27, 49, 0.22) 100% ), linear-gradient( 0deg, rgba(4, 17, 32, 0.48) 0%, transparent 40% );
}

/* Text content */

.hero-content {
    position: relative;
    z-index: 2;
    width: min(660px, 58%);
    color: #ffffff;
    padding: 0;
    animation: heroContentIn 900ms ease both;
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 27px;
    color: #e3c58c;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    line-height: 1.6;
    text-transform: uppercase;
}

    .hero-eyebrow::before {
        content: "";
        width: 34px;
        height: 1px;
        background: #d6b77c;
    }

.hero-content h1,
.hero-content h2 {
    max-width: 720px;
    margin: 0 0 24px;
    color: #ffffff;
    font-family: var(--font-heading, Georgia, serif);
    font-size: clamp(48px, 4vw, 82px);
    font-weight: 500;
    letter-spacing: -1.8px;
    line-height: 1.08;
}

    .hero-content h1 span,
    .hero-content h2 span {
        color: #e1c28a;
        font-style: italic;
    }

.hero-description {
    max-width: 540px;
    margin: 0;
    color: rgba(255, 255, 255, 0.82);
    font-family: var(--font-body, Arial, sans-serif);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.9;
}

/* CTA buttons */

.hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 32px;
    margin-top: 38px;
}

.hero-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    min-height: 58px;
    padding: 0 27px;
    color: #102640;
    background: #e0c18a;
    border: 1px solid #e0c18a;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-decoration: none;
    transition: background 250ms ease, color 250ms ease, transform 250ms ease;
}

    .hero-button span {
        font-size: 19px;
        transition: transform 250ms ease;
    }

    .hero-button:hover {
        color: #ffffff;
        background: transparent;
        transform: translateY(-2px);
    }

        .hero-button:hover span {
            transform: translate(3px, -3px);
        }

.hero-secondary-link {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: color 250ms ease;
}

    .hero-secondary-link span {
        color: #e0c18a;
        font-size: 19px;
        transition: transform 250ms ease;
    }

    .hero-secondary-link:hover {
        color: #e0c18a;
    }

        .hero-secondary-link:hover span {
            transform: translateX(5px);
        }

/* Doctor / slide label */

.hero-doctor-label {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-top: 58px;
    color: rgba(255, 255, 255, 0.68);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.3px;
}

.hero-label-line {
    width: 38px;
    height: 1px;
    background: #d9bd89;
}

/* Bottom controls */

.hero-controls {
    position: absolute;
    z-index: 5;
    right: 9%;
    bottom: 42px;
    left: 9%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.hero-pagination {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hero-dot {
    width: 27px;
    height: 3px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.35);
    cursor: pointer;
    transition: width 300ms ease, background 300ms ease;
}

    .hero-dot.is-active {
        width: 54px;
        background: #e0c18a;
    }

.hero-navigation {
    display: flex;
    align-items: center;
    gap: 12px;
}

.hero-counter {
    margin-right: 12px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
}

    .hero-counter span {
        margin: 0 5px;
        color: rgba(255, 255, 255, 0.45);
    }

.hero-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 43px;
    height: 43px;
    padding: 0;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    transition: background 250ms ease, border-color 250ms ease, color 250ms ease;
}

    .hero-arrow:hover {
        color: #102640;
        background: #e0c18a;
        border-color: #e0c18a;
    }

/* Subtle bottom accent */

.hero-bottom-line {
    position: absolute;
    z-index: 4;
    right: 0;
    bottom: 0;
    left: 0;
    height: 3px;
    background: linear-gradient( 90deg, transparent, #d9bd89, transparent );
}

/* Text animation */

@keyframes heroContentIn {
    from {
        opacity: 0;
        transform: translateY(22px);
    }

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

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

@media (max-width: 1024px) {
    .hero-slide {
        padding-right: 7%;
        padding-left: 7%;
    }

    .hero-content {
        width: min(650px, 75%);
    }

    .hero-controls {
        right: 7%;
        left: 7%;
    }

    .hero-content h1,
    .hero-content h2 {
        font-size: clamp(48px, 7vw, 70px);
    }
}

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

@media (max-width: 768px) {
    .hero-section.page-section {
        min-height: 100svh;
    }

    .hero-slider {
        min-height: 680px;
        min-height: 100svh;
    }

    .hero-slide {
        align-items: flex-end;
        min-height: 100%;
        padding: 150px 24px 125px;
        background-position: 58% center;
    }

    .hero-slide-overlay {
        background: linear-gradient( 0deg, rgba(5, 20, 39, 0.98) 0%, rgba(5, 20, 39, 0.91) 42%, rgba(5, 20, 39, 0.48) 75%, rgba(5, 20, 39, 0.24) 100% );
    }

    .hero-content {
        width: 100%;
        max-width: 560px;
    }

    .hero-eyebrow {
        margin-bottom: 19px;
        font-size: 9px;
        letter-spacing: 2px;
    }

        .hero-eyebrow::before {
            width: 24px;
        }

    .hero-content h1,
    .hero-content h2 {
        margin-bottom: 18px;
        font-size: clamp(43px, 11vw, 61px);
        letter-spacing: -1px;
        line-height: 1.08;
    }

    .hero-description {
        max-width: 480px;
        font-size: 14px;
        line-height: 1.75;
    }

    .hero-actions {
        gap: 19px;
        margin-top: 26px;
    }

    .hero-button {
        min-height: 52px;
        padding: 0 19px;
        font-size: 12px;
    }

    .hero-secondary-link {
        font-size: 12px;
    }

    .hero-doctor-label {
        margin-top: 32px;
        font-size: 9px;
        letter-spacing: 1.7px;
    }

    .hero-controls {
        right: 24px;
        bottom: 25px;
        left: 24px;
    }

    .hero-arrow {
        width: 38px;
        height: 38px;
    }

    .hero-counter {
        font-size: 11px;
    }
}

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

@media (max-width: 380px) {
    .hero-slide {
        padding-right: 19px;
        padding-left: 19px;
    }

    .hero-content h1,
    .hero-content h2 {
        font-size: 39px;
    }

    .hero-description {
        font-size: 13px;
    }

    .hero-actions {
        gap: 15px;
    }

    .hero-button {
        min-height: 48px;
        padding: 0 14px;
    }

    .hero-controls {
        right: 19px;
        left: 19px;
    }
}

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

@media (prefers-reduced-motion: reduce) {
    .hero-slide,
    .hero-button,
    .hero-arrow,
    .hero-dot,
    .hero-secondary-link,
    .hero-content {
        animation: none !important;
        transition: none !important;
    }

    .hero-slide {
        transform: none;
    }
}





/* ==========================================
   DOCTOR PROFILE HERO SLIDE
========================================== */

.hero-profile-slide {
    background: #102b4b;
}

/* Full-screen background video */
.hero-background-video {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
}

/* Profile-specific overlay */
.hero-profile-overlay {
    background: linear-gradient( 90deg, rgba(8, 24, 43, 0.94) 0%, rgba(8, 24, 43, 0.82) 38%, rgba(8, 24, 43, 0.45) 70%, rgba(8, 24, 43, 0.20) 100% );
}

/* Keep profile content above video */
.hero-profile-content {
    position: relative;
    z-index: 2;
    max-width: 850px;
}

/* Designation */
.hero-profile-designation {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
    color: #dfc18b;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
}

.hero-profile-line {
    display: inline-block;
    width: 35px;
    height: 2px;
    background: #dfc18b;
}

/* Profile highlights */
.hero-profile-highlights {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 22px;
    margin-top: 28px;
}

.hero-profile-highlight {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 500;
}

    .hero-profile-highlight i {
        color: #dfc18b;
        font-size: 16px;
    }

/* Mobile */
@media (max-width: 767px) {

  /*  .hero-profile-overlay {
        background: linear-gradient( 90deg, rgba(8, 24, 43, 0.88), rgba(8, 24, 43, 0.70) ), linear-gradient( 0deg, rgba(8, 24, 43, 0.50), transparent );
    }*/

    .hero-profile-content {
        max-width: 100%;
    }

    .hero-profile-designation {
        font-size: 11px;
        letter-spacing: 1.5px;
    }

    .hero-profile-highlights {
        flex-direction: column;
        gap: 13px;
        margin-top: 22px;
    }

    .hero-profile-highlight {
        font-size: 12px;
    }
}


.hero-profile-identity {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 20px !important;
    width: 100%;
    margin: 0 0 24px 0;
}

.hero-profile-identity .hero-profile-photo {
    display: block;
    width: 110px;
    height: 110px;
    min-width: 110px;
    flex: 0 0 110px;
    margin: 0 !important;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #dfc18b;
}

.hero-profile-identity .hero-profile-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.hero-profile-identity .hero-profile-name {
    flex: 1;
    min-width: 0;
}

.hero-profile-identity .hero-profile-name h2 {
    margin: 0 !important;
    text-align: left !important;
}

/* Mobile */
@media (max-width: 600px) {
    .hero-profile-identity {
        gap: 14px !important;
    }

    .hero-profile-identity .hero-profile-photo {
        width: 80px;
        height: 80px;
        min-width: 80px;
        flex-basis: 80px;
    }
}



/* =========================================
   LARGE TRANSPARENT DOCTOR PORTRAIT
========================================= */

.hero-profile-slide {
    position: relative;
    overflow: hidden;
}

.hero-profile-portrait {
    position: absolute;
    z-index: 2;
    right: 6%;
    width: min(40%, 650px);
    height: 63%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    pointer-events: none;
    margin-bottom: 108px;
}

.hero-profile-portrait img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
}

/* Keep text above the background but beside the portrait */
.hero-profile-content {
    position: relative;
    z-index: 3;
    width: 55%;
}

/* Desktop and tablet */
@media (max-width: 900px) and (min-width: 601px) {
    .hero-profile-portrait {
        right: 1%;
        width: 42%;
        height: 82%;
    }

    .hero-profile-content {
        width: 62%;
    }
}

/* Mobile: hide the large transparent portrait */
@media (max-width: 600px) {
    .hero-profile-portrait {
        bottom: 40% !important;
    }

    .hero-profile-content {
        width: 100%;
    }
}

 /*Move doctor profile content slightly upwards*/ 
.hero-profile-slide .hero-profile-content {
    transform: translateY(-50px) !important;
}