/* =========================================
   DOCTOR DETAIL PAGE
========================================= */

.doctor-detail-page {
    --hospital-blue: #2166d5;
    --hospital-dark: #142b52;
    --hospital-light: #f6f9fd;
    --text-gray: #687384;
}


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

.doctor-detail-page .header,
.doctor-detail-page .header.sticked {

    position: relative !important;

    top: auto !important;
    left: auto !important;
    right: auto !important;

    width: 100% !important;

    z-index: 1000 !important;
}


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

.doctor-detail-hero {

    padding: 55px 0 70px;

    background:
        linear-gradient(
            135deg,
            #142b52 0%,
            #2166d5 100%
        );

    color: #ffffff;
}


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

.doctor-detail-breadcrumb {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 10px;

    margin-bottom: 45px;

    color: rgba(255,255,255,0.75);

    font-size: 14px;
}


.doctor-detail-breadcrumb a {

    color: #ffffff;

    text-decoration: none;

    transition: 0.3s ease;
}


.doctor-detail-breadcrumb a:hover {

    color: #8fc0ff;
}


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

.doctor-hero-content {

    display: grid;

    grid-template-columns: 360px 1fr;

    align-items: center;

    gap: 55px;
}


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

.doctor-hero-image {

    width: 100%;

    height: 400px;

    overflow: hidden;

    border-radius: 18px;

    background: #edf3fa;

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


.doctor-hero-image img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: top center;
}


/* =========================================
   HERO INFO
========================================= */

.doctor-hero-info {

    max-width: 700px;
}


.doctor-detail-specialization {

    display: inline-block;

    margin-bottom: 15px;

    padding: 7px 13px;

    border-radius: 50px;

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

    color: #ffffff;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1px;
}


.doctor-hero-info h1 {

    margin: 0 0 8px;

    color: #ffffff;

    font-size: 48px;

    line-height: 1.2;

    font-weight: 700;
}


.doctor-hero-info h2 {

    margin: 0 0 20px;

    color: #8fc0ff;

    font-size: 21px;

    font-weight: 600;
}


.doctor-hero-info p {

    max-width: 650px;

    margin: 0 0 28px;

    color: rgba(255,255,255,0.86);

    font-size: 16px;

    line-height: 1.8;
}


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

.doctor-hero-actions {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 12px;
}


.doctor-primary-btn,
.doctor-secondary-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding: 12px 18px;

    border-radius: 7px;

    font-size: 13px;

    font-weight: 600;

    text-decoration: none;

    transition: 0.3s ease;
}


.doctor-primary-btn {

    background: #ffffff;

    color: #142b52;
}


.doctor-primary-btn:hover {

    background: #8fc0ff;

    color: #142b52;
}


.doctor-secondary-btn {

    border: 1px solid rgba(255,255,255,0.45);

    color: #ffffff;
}


.doctor-secondary-btn:hover {

    background: #ffffff;

    color: #142b52;
}


/* =========================================
   INFORMATION SECTION
========================================= */

.doctor-information {

    padding: 80px 0;

    background: #f6f9fd;
}


.doctor-info-layout {

    display: grid;

    grid-template-columns: minmax(0, 1fr) 330px;

    align-items: start;

    gap: 30px;
}


/* =========================================
   MAIN INFO CARD
========================================= */

.doctor-info-card {

    margin-bottom: 25px;

    padding: 30px;

    background: #ffffff;

    border-radius: 14px;

    box-shadow:
        0 8px 25px rgba(20,43,82,0.06);
}


.doctor-info-label {

    display: inline-block;

    margin-bottom: 8px;

    color: #2166d5;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.5px;
}


.doctor-info-card h2 {

    margin: 0 0 15px;

    color: #142b52;

    font-size: 27px;

    font-weight: 600;
}


.doctor-info-card p {

    margin: 0 0 12px;

    color: #687384;

    font-size: 15px;

    line-height: 1.8;
}


.doctor-info-card p:last-child {

    margin-bottom: 0;
}


/* =========================================
   EXPERTISE
========================================= */

.expertise-list {

    display: grid;

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

    gap: 15px;

    margin-top: 20px;
}


.expertise-item {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 13px;

    border-radius: 8px;

    background: #f6f9fd;

    color: #142b52;

    font-size: 14px;

    font-weight: 500;
}


.expertise-item i {

    color: #2166d5;

    font-size: 15px;
}


/* =========================================
   QUALIFICATION
========================================= */

.qualification-item {

    display: flex;

    align-items: flex-start;

    gap: 15px;

    margin-top: 20px;

    padding: 18px;

    border-radius: 10px;

    background: #f6f9fd;
}


.qualification-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    width: 45px;

    height: 45px;

    border-radius: 8px;

    background: #edf4ff;

    color: #2166d5;
}


.qualification-item h3 {

    margin: 0 0 5px;

    color: #142b52;

    font-size: 16px;
}


.qualification-item p {

    margin: 0;

    font-size: 13px;
}


/* =========================================
   SIDEBAR
========================================= */

.doctor-sidebar {

    position: sticky;

    top: 25px;
}


.doctor-sidebar-card {

    margin-bottom: 20px;

    padding: 25px;

    background: #ffffff;

    border-radius: 14px;

    box-shadow:
        0 8px 25px rgba(20,43,82,0.06);
}


.sidebar-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 50px;

    height: 50px;

    margin-bottom: 15px;

    border-radius: 10px;

    background: #edf4ff;

    color: #2166d5;

    font-size: 20px;
}


.doctor-sidebar-card h3 {

    margin: 0 0 8px;

    color: #142b52;

    font-size: 21px;
}


.doctor-sidebar-card p {

    margin: 0 0 18px;

    color: #687384;

    font-size: 14px;

    line-height: 1.7;
}


/* =========================================
   SIDEBAR APPOINTMENT
========================================= */

.sidebar-appointment-btn {

    display: block;

    width: 100%;

    padding: 12px;

    border-radius: 7px;

    background: #2166d5;

    color: #ffffff;

    font-size: 13px;

    font-weight: 600;

    text-align: center;

    text-decoration: none;

    transition: 0.3s ease;
}


.sidebar-appointment-btn:hover {

    background: #142b52;

    color: #ffffff;
}


/* =========================================
   SIDEBAR CONTACT
========================================= */

.sidebar-label {

    display: block;

    margin-bottom: 20px;

    color: #2166d5;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.5px;
}


.sidebar-contact-item {

    display: flex;

    align-items: flex-start;

    gap: 12px;

    margin-bottom: 18px;
}


.sidebar-contact-item:last-child {

    margin-bottom: 0;
}


.sidebar-contact-item > i {

    color: #2166d5;

    font-size: 16px;

    margin-top: 3px;
}


.sidebar-contact-item small {

    display: block;

    margin-bottom: 3px;

    color: #687384;

    font-size: 11px;
}


.sidebar-contact-item a {

    color: #142b52;

    font-size: 13px;

    font-weight: 600;

    text-decoration: none;

    word-break: break-word;
}


.sidebar-contact-item a:hover {

    color: #2166d5;
}


/* =========================================
   BACK TO DOCTORS
========================================= */

.doctor-back-section {

    padding: 0 0 70px;

    background: #f6f9fd;
}


.back-to-doctors {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: #142b52;

    font-size: 14px;

    font-weight: 700;

    text-decoration: none;

    transition: 0.3s ease;
}


.back-to-doctors:hover {

    color: #2166d5;
}


.back-to-doctors i {

    transition: transform 0.3s ease;
}


.back-to-doctors:hover i {

    transform: translateX(-3px);
}


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

@media (max-width: 991px) {

    .doctor-hero-content {

        grid-template-columns: 280px 1fr;

        gap: 35px;
    }


    .doctor-hero-image {

        height: 350px;
    }


    .doctor-hero-info h1 {

        font-size: 40px;
    }


    .doctor-info-layout {

        grid-template-columns: 1fr;
    }


    .doctor-sidebar {

        position: static;
    }

}


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

@media (max-width: 767px) {

    .doctor-detail-hero {

        padding: 40px 0 55px;
    }


    .doctor-detail-breadcrumb {

        margin-bottom: 30px;

        font-size: 12px;
    }


    .doctor-hero-content {

        grid-template-columns: 1fr;

        gap: 30px;
    }


    .doctor-hero-image {

        height: 350px;

        max-width: 400px;

        margin: 0 auto;
    }


    .doctor-hero-info {

        text-align: left;
    }


    .doctor-hero-info h1 {

        font-size: 34px;
    }


    .doctor-hero-info h2 {

        font-size: 18px;
    }


    .doctor-hero-info p {

        font-size: 14px;
    }


    .doctor-information {

        padding: 55px 0;
    }


    .doctor-info-card {

        padding: 23px;
    }


    .doctor-info-card h2 {

        font-size: 24px;
    }


    .expertise-list {

        grid-template-columns: 1fr;
    }

}


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

@media (max-width: 480px) {

    .doctor-hero-image {

        height: 300px;
    }


    .doctor-hero-info h1 {

        font-size: 30px;
    }


    .doctor-hero-actions {

        flex-direction: column;

        align-items: stretch;
    }


    .doctor-primary-btn,
    .doctor-secondary-btn {

        width: 100%;
    }

}



/* =========================================================
   DOCTOR DETAIL PAGE - HEADER & FOOTER FIX
========================================================= */


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

.doctor-detail-page #header {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;

    width: 100% !important;

    z-index: 9999 !important;

    display: block !important;

    visibility: visible !important;

    opacity: 1 !important;
}


/* =========================
   DOCTOR DETAIL CONTENT
========================= */

.doctor-detail-page .doctor-detail-hero,
.doctor-detail-page .doctor-information,
.doctor-detail-page .doctor-back-section {
    display: block !important;

    visibility: visible !important;

    opacity: 1 !important;
}


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

.doctor-detail-page #footer {
    display: block !important;

    position: relative !important;

    width: 100% !important;

    height: auto !important;

    min-height: 300px;

    visibility: visible !important;

    opacity: 1 !important;

    overflow: visible !important;

    z-index: 10 !important;
}


/* Footer main */

.doctor-detail-page #footer .footer-main {
    display: block !important;

    visibility: visible !important;

    opacity: 1 !important;
}


/* Footer bottom */

.doctor-detail-page #footer .footer-bottom {
    display: block !important;

    visibility: visible !important;

    opacity: 1 !important;
}


/* AOS ki wajah se footer hidden na ho */

.doctor-detail-page #footer [data-aos] {
    opacity: 1 !important;

    transform: none !important;

    visibility: visible !important;
}


/* Footer rows */

.doctor-detail-page #footer .row {
    visibility: visible !important;
}


/* Footer columns */

.doctor-detail-page #footer .col-lg-5,
.doctor-detail-page #footer .col-lg-7,
.doctor-detail-page #footer .col-lg-3,
.doctor-detail-page #footer .col-6 {
    visibility: visible !important;
}


/* Footer logo */

.doctor-detail-page #footer .footer-logo {
    max-width: 220px;

    height: auto;

    display: block;
}


/* Footer links */

.doctor-detail-page #footer a {
    visibility: visible;
}


/* =========================
   BACK SECTION
========================= */

.doctor-detail-page .doctor-back-section {
    position: relative;

    z-index: 2;
}


/* =========================
   BODY
========================= */

body.doctor-detail-page {
    overflow-x: hidden;
}