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


/* TABLET */

@media (max-width: 1100px) {

    .navbar {
        width: calc(100% - 50px);
    }

    .nav-links {
        gap: 20px;
    }

    .nav-actions {
        margin-left: 20px;
        gap: 10px;
    }

    .book-btn {
        padding: 0 18px;
    }
}


/* SMALL TABLET */

@media (max-width: 900px) {

    .navbar {
        width: calc(100% - 40px);
        height: 70px;
    }

    .nav-links {
        gap: 15px;
    }

    .nav-links a {
        font-size: 13px;
    }

    .nav-actions {
        margin-left: 15px;
        gap: 8px;
    }

    .login-btn {
        min-width: 65px;
        padding: 0 12px;
    }

    .book-btn {
        padding: 0 14px;
    }
}









@media (max-width: 600px) {

    .services-section {
        padding: 75px 0;
    }

    .services-heading {
        margin-bottom: 40px;
    }

    .services-heading h2 {
        font-size: 36px;
    }

    .services-heading > p {
        font-size: 16px;
    }

    .services-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .service-card-large {
        grid-column: span 1;
        min-height: 320px;
    }

    .service-card {
        min-height: 290px;
        padding: 28px;
    }
}




/* ========================================
   HOW IT WORKS RESPONSIVE
======================================== */

@media (max-width: 1000px) {

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


@media (max-width: 600px) {

    .how-it-works {
        padding: 75px 0;
    }

    .how-heading {
        margin-bottom: 45px;
    }

    .how-heading h2 {
        font-size: 36px;
    }

    .how-heading p {
        font-size: 16px;
    }

    .steps-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .step-card {
        padding: 30px 24px;
    }
}






/* ========================================
   FIND A DOCTOR RESPONSIVE
======================================== */

@media (max-width: 1000px) {

    .doctor-search {
        grid-template-columns: 1fr 1fr;
    }

    .search-box {
        grid-column: span 2;
    }

    .doctor-search-button {
        height: 48px;
    }

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


@media (max-width: 700px) {

    .find-doctor-section {
        padding: 75px 0;
    }

    .doctor-heading {
        align-items: flex-start;
        flex-direction: column;
        margin-bottom: 35px;
    }

    .doctor-heading h2 {
        font-size: 36px;
    }

    .doctor-search {
        grid-template-columns: 1fr;
        padding: 10px;
    }

    .search-box {
        grid-column: span 1;
    }

    .doctor-search select,
    .doctor-search-button {
        width: 100%;
    }

    .doctor-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .doctor-image {
        height: 340px;
    }
}




/* ========================================
   OUR APPROACH RESPONSIVE
======================================== */

@media (max-width: 900px) {

    .approach-content {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .approach-text h2 {
        max-width: 700px;
    }

    .approach-intro {
        max-width: 700px;
    }

    .approach-image img {
        height: 520px;
    }

    .approach-card {
        left: 25px;
    }
}


@media (max-width: 600px) {

    .approach-section {
        padding: 75px 0;
    }

    .approach-text h2 {
        font-size: 36px;
    }

    .approach-intro {
        font-size: 16px;
    }

    .approach-points {
        gap: 24px;
    }

    .approach-point {
        gap: 13px;
    }

    .approach-point h3 {
        font-size: 17px;
    }

    .approach-image img {
        height: 430px;
    }

    .approach-card {
        left: 15px;
        right: 15px;
        min-width: 0;
        padding: 17px 18px;
    }
}




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

@media (max-width: 900px) {

    .resources-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 20px;
    }

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

    .resource-card:last-child {
        grid-column: span 2;
    }
}


@media (max-width: 600px) {

    .resources-section {
        padding: 75px 0;
    }

    .resources-heading {
        margin-bottom: 40px;
    }

    .resources-heading h2 {
        font-size: 36px;
    }

    .resources-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .resource-card:last-child {
        grid-column: span 1;
    }

    .resource-image {
        height: 230px;
    }

    .resource-content {
        padding: 24px;
    }
}





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

@media (max-width: 900px) {

    .testimonials-grid {
        grid-template-columns: 1fr 1fr;
    }

    .testimonial-card:last-child {
        grid-column: span 2;
    }
}


@media (max-width: 600px) {

    .testimonials-section {
        padding: 75px 0;
    }

    .testimonials-heading {
        margin-bottom: 40px;
    }

    .testimonials-heading h2 {
        font-size: 36px;
    }

    .testimonials-heading p {
        font-size: 16px;
    }

    .testimonials-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .testimonial-card:last-child {
        grid-column: span 1;
    }

    .testimonial-card {
        padding: 28px 24px;
    }

    .testimonial-card blockquote {
        min-height: 0;
        font-size: 16px;
    }
}



/* ========================================
   FINAL CTA RESPONSIVE
======================================== */

@media (max-width: 900px) {

    .appointment-cta {
        padding: 55px 45px;
    }

    .appointment-cta-visual {
        width: 35%;
    }

    .cta-circle-one {
        width: 320px;
        height: 320px;
    }

    .cta-circle-two {
        width: 210px;
        height: 210px;

        right: 40px;
    }

    .cta-symbol {
        right: 120px;

        width: 80px;
        height: 80px;

        font-size: 40px;
    }
}


@media (max-width: 650px) {

    .appointment-cta-section {
        padding: 60px 0 75px;
    }

    .appointment-cta {
        min-height: auto;

        padding: 45px 25px;

        border-radius: 25px;
    }

    .appointment-cta-content {
        max-width: none;
    }

    .appointment-cta-content h2 {
        font-size: 36px;
    }

    .appointment-cta-content p {
        font-size: 16px;
    }

    .appointment-cta-buttons {
        align-items: flex-start;
        flex-direction: column;
        gap: 18px;
    }

    .appointment-cta-visual {
        display: none;
    }
}






/* ========================================
   SERVICES PAGE RESPONSIVE
======================================== */

@media (max-width: 900px) {

    .services-page-hero {
        padding: 75px 0;
    }

    .all-services-grid {
        grid-template-columns: 1fr;
    }

    .service-page-cta-box {
        align-items: flex-start;
        flex-direction: column;
    }

    .service-cta-buttons {
        flex-wrap: wrap;
    }
}


@media (max-width: 600px) {

    .services-page-hero {
        padding: 60px 0;
    }

    .services-page-hero-content h1 {
        font-size: 42px;
        letter-spacing: -1px;
    }

    .services-page-hero-content p {
        font-size: 16px;
    }

    .all-services-section {
        padding: 75px 0;
    }

    .all-services-heading {
        margin-bottom: 40px;
    }

    .all-services-heading h2 {
        font-size: 36px;
    }

    .full-service-card {
        flex-direction: column;
        padding: 28px;
        gap: 20px;
    }

    .service-page-cta {
        padding-bottom: 75px;
    }

    .service-page-cta-box {
        padding: 40px 25px;
        border-radius: 25px;
    }

    .service-page-cta-box h2 {
        font-size: 34px;
    }

    .service-cta-buttons {
        width: 100%;
        flex-direction: column;
    }

    .service-cta-buttons .btn {
        width: 100%;
    }
}



/* ========================================
   SERVICE DETAIL RESPONSIVE
======================================== */

@media (max-width: 1000px) {

    .service-detail-hero-content {
        grid-template-columns: 1fr;
        gap: 45px;
    }

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

    .service-audience-content {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .service-detail-cta-box {
        align-items: flex-start;
        flex-direction: column;
    }
}


@media (max-width: 600px) {

    .service-detail-hero {
        padding: 60px 0;
    }

    .service-detail-hero-text h1 {
        font-size: 42px;
        letter-spacing: -1px;
    }

    .service-detail-hero-text > p {
        font-size: 16px;
    }

    .service-detail-buttons {
        align-items: stretch;
        flex-direction: column;
    }

    .service-detail-buttons .btn {
        width: 100%;
    }

    .service-detail-hero-image img {
        height: 400px;
    }

    .service-offerings-section {
        padding: 75px 0;
    }

    .service-offerings-heading h2 {
        font-size: 36px;
    }

    .service-offerings-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .service-audience-section {
        padding: 75px 0;
    }

    .service-audience-text h2 {
        font-size: 36px;
    }

    .service-audience-image img {
        height: 430px;
    }

    .service-detail-cta {
        padding-bottom: 75px;
    }

    .service-detail-cta-box {
        padding: 40px 25px;
        border-radius: 25px;
    }

    .service-detail-cta-box h2 {
        font-size: 34px;
    }
}



/* ========================================
   DOCTORS PAGE RESPONSIVE
======================================== */

@media (max-width: 1000px) {

    .directory-toolbar {
        grid-template-columns: 1fr 1fr;
    }

    .directory-search {
        grid-column: span 2;
    }

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

    .doctors-page-cta-box {
        align-items: flex-start;
        flex-direction: column;
    }
}


@media (max-width: 650px) {

    .doctors-page-hero {
        padding: 60px 0;
    }

    .doctors-page-hero-content h1 {
        font-size: 42px;
        letter-spacing: -1px;
    }

    .doctors-page-hero-content p {
        font-size: 16px;
    }

    .doctor-directory-section {
        padding: 70px 0 75px;
    }

    .directory-toolbar {
        grid-template-columns: 1fr;
        padding: 10px;
        margin-bottom: 50px;
    }

    .directory-search {
        grid-column: span 1;
    }

    .doctor-results-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .doctor-results-header h2 {
        font-size: 30px;
    }

    .doctor-directory-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .directory-doctor-image {
        height: 340px;
    }

    .doctors-page-cta {
        padding-bottom: 75px;
    }

    .doctors-page-cta-box {
        padding: 40px 25px;
        border-radius: 25px;
    }
}







/* ========================================
   DOCTOR PROFILE RESPONSIVE
======================================== */

@media (max-width: 1000px) {

    .doctor-profile-layout {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .doctor-profile-photo {
        height: 500px;
        max-width: 600px;
    }

    .doctor-information-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

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

    .doctor-profile-cta-box {
        align-items: flex-start;
        flex-direction: column;
    }
}


@media (max-width: 600px) {

    .doctor-profile-hero {
        padding: 60px 0;
    }

    .doctor-profile-photo {
        height: 420px;
    }

    .doctor-profile-main h1 {
        font-size: 42px;
        letter-spacing: -1px;
    }

    .profile-description {
        font-size: 16px;
    }

    .profile-details {
        gap: 18px;
    }

    .profile-details strong {
        font-size: 19px;
    }

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

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

    .doctor-information-section {
        padding: 75px 0;
    }

    .doctor-about h2 {
        font-size: 36px;
    }

    .doctor-detail-card {
        padding: 24px;
    }

    .doctor-care-section {
        padding: 75px 0;
    }

    .doctor-care-heading h2 {
        font-size: 36px;
    }

    .doctor-care-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .doctor-profile-cta {
        padding-bottom: 75px;
    }

    .doctor-profile-cta-box {
        padding: 40px 25px;
        border-radius: 25px;
    }
}





/* ========================================
   RESOURCES PAGE RESPONSIVE
======================================== */

@media (max-width: 1000px) {

    .featured-resource {
        grid-template-columns: 1fr;
    }

    .featured-resource-image {
        min-height: 400px;
    }

    .featured-resource-content {
        padding: 45px;
        background: #a0ccc6;
    }

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

    .resources-page-cta-box {
        align-items: flex-start;
        flex-direction: column;
    }
}


@media (max-width: 600px) {

    .resources-page-hero {
        padding: 60px 0;
    }

    .resources-page-hero-content h1 {
        font-size: 42px;
        letter-spacing: -1px;
    }

    .resources-page-hero-content p {
        font-size: 16px;
    }

    .featured-resource-section {
        padding: 70px 0;
    }

    .featured-resource-image {
        min-height: 300px;
    }

    .featured-resource-content {
        padding: 35px 25px;
    }

    .featured-resource-content h2 {
        font-size: 34px;
    }

    .resource-categories-section {
        padding: 75px 0;
    }

    .resource-categories-heading h2 {
        font-size: 36px;
    }

    .resource-category-list {
        gap: 8px;
    }

    .resource-filter {
        padding: 10px 15px;
        font-size: 12px;
    }

    .resource-library-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .resources-page-cta {
        padding-bottom: 75px;
    }

    .resources-page-cta-box {
        padding: 40px 25px;
        border-radius: 25px;
    }
}





/* ========================================
   ABOUT PAGE RESPONSIVE
======================================== */

@media (max-width: 1000px) {

    .about-mission-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .about-mission-image img {
        height: 500px;
    }

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

    .about-experience-content {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .about-experience-image > img {
        height: 520px;
    }

    .about-experience-card {
        left: 25px;
    }

    .about-page-cta-box {
        align-items: flex-start;
        flex-direction: column;
    }
}


@media (max-width: 600px) {

    .about-page-hero {
        padding: 60px 0;
    }

    .about-page-hero-content h1 {
        font-size: 42px;
        letter-spacing: -1px;
    }

    .about-page-hero-content p {
        font-size: 16px;
    }

    .about-mission-section {
        padding: 75px 0;
    }

    .about-mission-image img {
        height: 400px;
    }

    .about-mission-content h2 {
        font-size: 36px;
    }

    .about-values-section {
        padding: 75px 0;
    }

    .about-values-heading h2 {
        font-size: 36px;
    }

    .about-values-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .about-experience-section {
        padding: 75px 0;
    }

    .about-experience-text h2 {
        font-size: 36px;
    }

    .about-experience-image > img {
        height: 430px;
    }

    .about-experience-card {
        left: 15px;
        right: 15px;
        min-width: 0;
    }

    .about-page-cta {
        padding-bottom: 75px;
    }

    .about-page-cta-box {
        padding: 40px 25px;
        border-radius: 25px;
    }

    .about-page-cta-box h2 {
        font-size: 34px;
    }

    .about-cta-buttons {
        width: 100%;
        flex-direction: column;
    }

    .about-cta-buttons .btn {
        width: 100%;
    }
}





/* ========================================
   CONTACT PAGE RESPONSIVE
======================================== */

@media (max-width: 1000px) {

    .contact-main-grid {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .contact-information > p {
        max-width: 700px;
    }

    .contact-final-cta-box {
        align-items: flex-start;
        flex-direction: column;
    }
}


@media (max-width: 600px) {

    .contact-page-hero {
        padding: 60px 0;
    }

    .contact-page-hero-content h1 {
        font-size: 42px;
        letter-spacing: -1px;
    }

    .contact-page-hero-content p {
        font-size: 16px;
    }

    .contact-main-section {
        padding: 75px 0;
    }

    .contact-information h2 {
        font-size: 36px;
    }

    .appointment-form-card {
        padding: 30px 22px;
        border-radius: 22px;
    }

    .appointment-form-heading h2 {
        font-size: 30px;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .contact-faq-section {
        padding: 75px 0;
    }

    .contact-faq-heading h2 {
        font-size: 36px;
    }

    .contact-final-cta {
        padding-bottom: 75px;
    }

    .contact-final-cta-box {
        padding: 40px 25px;
        border-radius: 25px;
    }
}




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

@media (max-width: 900px) {

    .auth-layout {
        grid-template-columns: 1fr;
        gap: 45px;

        max-width: 650px;
    }

    .auth-intro {
        text-align: center;
    }

    .auth-intro > p {
        margin-left: auto;
        margin-right: auto;
    }

    .auth-benefits {
        align-items: center;
    }
}


@media (max-width: 600px) {

    .auth-page-section {
        padding: 60px 0 75px;
    }

    .auth-intro h1 {
        font-size: 40px;
        letter-spacing: -1px;
    }

    .auth-intro > p {
        font-size: 16px;
    }

    .auth-form-card {
        padding: 28px 22px;
        border-radius: 22px;
    }

    .auth-form-heading h2 {
        font-size: 29px;
    }

    .auth-form .form-row {
        grid-template-columns: 1fr;
    }
}






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

@media (max-width: 900px) {

    .auth-login-layout {
        grid-template-columns: 1fr;
        gap: 45px;

        max-width: 650px;
    }

    .auth-login-layout .auth-intro {
        text-align: center;
    }

    .auth-login-layout .auth-intro > p {
        margin-left: auto;
        margin-right: auto;
    }

    .auth-login-layout .auth-benefits {
        align-items: center;
    }
}


@media (max-width: 600px) {

    .auth-form-options {
        align-items: flex-start;
        flex-direction: column;
    }
}




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

@media (max-width: 800px) {

    .dashboard-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-profile-card {
        align-items: flex-start;
        flex-direction: column;
    }

    .dashboard-profile-details {
        width: 100%;
        flex-direction: column;
        gap: 18px;
    }
}


@media (max-width: 600px) {

    .dashboard-section {
        padding: 60px 0 75px;
    }

    .dashboard-card,
    .dashboard-profile-card {
        padding: 25px;
        border-radius: 20px;
    }

    .dashboard-header h1 {
        font-size: 36px;
    }
}





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

@media (max-width: 900px) {

    .auth-login-layout {
        grid-template-columns: 1fr;
        gap: 45px;

        max-width: 650px;
    }

    .auth-login-layout .auth-intro {
        text-align: center;
    }

    .auth-login-layout .auth-intro > p {
        margin-left: auto;
        margin-right: auto;
    }

    .auth-login-layout .auth-benefits {
        align-items: center;
    }
}


@media (max-width: 600px) {

    .auth-form-options {
        align-items: flex-start;
        flex-direction: column;
    }
}






/* ========================================
   PATIENT PROFILE RESPONSIVE
======================================== */

@media (max-width: 900px) {

    .patient-page-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .patient-profile-grid {
        grid-template-columns: 1fr;
    }

    .patient-account-card {
        order: -1;
    }
}


@media (max-width: 600px) {

    .patient-profile-section {
        padding: 60px 0 75px;
    }

    .patient-page-header h1 {
        font-size: 36px;
    }

    .patient-profile-form-card,
    .patient-account-card {
        padding: 25px;
        border-radius: 20px;
    }

    .patient-card-heading h2 {
        font-size: 25px;
    }

    .patient-profile-form .form-row {
        grid-template-columns: 1fr;
    }

    .profile-save-button {
        width: 100%;
    }
}





/* ========================================
   APPOINTMENT BOOKING RESPONSIVE
======================================== */

@media (max-width: 900px) {

    .booking-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .booking-layout {
        grid-template-columns: 1fr;
    }

    .booking-info-card {
        order: -1;
    }

    .appointment-slots {
        grid-template-columns: repeat(4, 1fr);
    }
}


@media (max-width: 600px) {

    .booking-section {
        padding: 60px 0 75px;
    }

    .booking-header h1 {
        font-size: 36px;
    }

    .booking-form-card,
    .booking-info-card {
        padding: 25px;
        border-radius: 20px;
    }

    .booking-card-heading h2 {
        font-size: 26px;
    }

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

    .booking-submit {
        width: 100% ;

        min-height: 48px;

        padding: 0 22px;

        align-self: flex-start;

        font-size: 14px;
        background: #126B68;

    color: #FFFFFF;
    }
}





/* ========================================
   ADMIN DASHBOARD RESPONSIVE
======================================== */

@media (max-width: 950px) {

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

    .admin-action-grid {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 600px) {

    .admin-dashboard-section {
        padding: 60px 0 75px;
    }

    .admin-dashboard-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .admin-dashboard-header h1 {
        font-size: 36px;
    }

    .admin-stat-grid {
        grid-template-columns: 1fr;
    }

    .admin-stat-card,
    .admin-action-card {
        padding: 25px;
        border-radius: 20px;
    }
}




/* ========================================
   ADMIN DOCTORS RESPONSIVE
======================================== */

@media (max-width: 800px) {

    .admin-page-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .admin-doctor-form .form-row {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 600px) {

    .admin-doctors-section {
        padding: 60px 0 75px;
    }

    .admin-page-header h1 {
        font-size: 36px;
    }

    .admin-doctor-create-card,
    .admin-doctor-list-card {
        padding: 25px;
        border-radius: 20px;
    }

    .admin-card-heading h2 {
        font-size: 25px;
    }

    .admin-doctor-form button {
        width: 100%;
    }
}







/* ========================================
   DYNAMIC DOCTOR PROFILE RESPONSIVE
======================================== */

@media (max-width: 600px) {

    .profile-details-list {
        gap: 20px;
    }

    .profile-details-list strong {
        font-size: 18px;
    }

    .doctor-profile-placeholder {
        font-size: 65px;
    }

    .doctor-specialty-description {
        padding: 24px;
    }
}





/* ========================================
   ADMIN AVAILABILITY RESPONSIVE
======================================== */

@media (max-width: 800px) {

    .availability-day {
        grid-template-columns: 1fr;
        gap: 18px;
    }
}


@media (max-width: 600px) {

    .admin-availability-section {
        padding: 60px 0 75px;
    }

    .availability-card {
        padding: 25px;
        border-radius: 20px;
    }

    .availability-times {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .availability-to {
        display: none;
    }

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

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





/* ========================================
   APPOINTMENT HISTORY RESPONSIVE
======================================== */

@media (max-width: 700px) {

    .appointment-history {
        margin-top: 50px;
    }

    .appointment-history-heading h2 {
        font-size: 28px;
    }

    .appointment-history-card {
        grid-template-columns: 60px 1fr;
        gap: 15px;
    }

    .appointment-date-box {
        width: 55px;
        height: 62px;
    }

    .appointment-date-box strong {
        font-size: 21px;
    }

    .appointment-status {
        grid-column: 2;
        justify-self: start;
    }
}






/* ========================================
   DOCTOR DASHBOARD RESPONSIVE
======================================== */

@media (max-width: 850px) {

    .doctor-dashboard-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .doctor-stat-grid {
        grid-template-columns: 1fr 1fr;
    }

    .doctor-dashboard-actions {
        grid-template-columns: 1fr;
    }

    .doctor-appointment-row {
        grid-template-columns: 65px 1fr;
    }

    .doctor-appointment-actions {
        grid-column: 2;
        flex-direction: row;
        flex-wrap: wrap;
    }
}


@media (max-width: 600px) {

    .doctor-dashboard-section {
        padding: 60px 0 75px;
    }

    .doctor-dashboard-header h1 {
        font-size: 36px;
    }

    .doctor-stat-grid {
        grid-template-columns: 1fr;
    }

    .doctor-stat-card,
    .doctor-dashboard-action,
    .doctor-appointments-card {
        padding: 25px;
        border-radius: 20px;
    }

    .doctor-appointments-heading h2 {
        font-size: 25px;
    }

    .doctor-appointment-row {
        grid-template-columns: 55px 1fr;
        gap: 14px;
    }

    .doctor-appointment-date {
        width: 52px;
        height: 60px;
    }

    .doctor-appointment-actions {
        grid-column: 2;
    }
}






/* ========================================
   ADMIN DOCTOR EDIT RESPONSIVE
======================================== */

@media (max-width: 900px) {

    .admin-edit-grid {
        grid-template-columns: 1fr;
    }

    .doctor-edit-preview {
        order: -1;
    }
}


@media (max-width: 600px) {

    .admin-doctor-edit-section {
        padding: 60px 0 75px;
    }

    .admin-doctor-edit-card,
    .doctor-edit-preview {
        padding: 25px;

        border-radius: 20px;
    }

    .doctor-edit-preview-image {
        height: 320px;
    }
}





@media (max-width: 800px) {

    .admin-panel {
        padding: 20px;
        border-radius: 16px;
    }

    .admin-panel-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .admin-filter-form {
        grid-template-columns: 1fr;
    }

    .admin-filter-actions {
        width: 100%;
    }

    .admin-button {
        flex: 1;
    }

}






@media (max-width: 700px) {

    .doctor-profile-card-header {
        flex-direction: column;
        padding: 22px;
    }

    .doctor-profile-form {
        padding: 22px;
    }

    .doctor-form-grid {
        grid-template-columns: 1fr;
    }

    .doctor-profile-form-footer {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .doctor-profile-form-footer .admin-button {
        width: 100%;
    }

}




/* =========================================================
   RESPONSIVE NAVBAR
   Healthcare Website
   ========================================================= */

/* ---------- Logo ---------- */

.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}

.logo img {
    width: 58px;
    height: 58px;
    object-fit: contain;
    display: block;
}


/* ---------- Mobile menu button ---------- */

.mobile-menu-button {
    display: none;
}


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

@media (max-width: 1000px) {

    .navbar {
        padding-left: 24px;
        padding-right: 24px;
    }

    .nav-links {
        gap: 24px;
    }

    .nav-actions {
        gap: 14px;
    }

    .logo img {
        width: 54px;
        height: 54px;
    }
}










@media (max-width: 700px) {

    .medical-report-panel {
        padding: 20px;
        border-radius: 17px;
    }

    .medical-report-upload-form {
        grid-template-columns: 1fr;
    }

    .medical-report-upload-form .admin-button {
        width: 100%;
    }

    .medical-report-item {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .medical-report-info {
        width: calc(100% - 65px);
    }

    .medical-report-actions {
        width: 100%;
        margin-left: 64px;
        flex-wrap: wrap;
    }

}






@media (max-width: 700px) {

    .doctor-patient-hero {
        align-items: flex-start;
        padding: 20px;
    }

    .doctor-patient-avatar {
        width: 58px;
        height: 58px;
        flex-basis: 58px;
    }

    .doctor-patient-hero-info h2 {
        font-size: 1.35rem;
    }

    .patient-detail-grid {
        grid-template-columns: 1fr;
    }

    .patient-detail-wide {
        grid-column: auto;
    }

    .doctor-prescription-card-header {
        align-items: flex-start;
        flex-direction: column;
    }

}






@media (max-width: 700px) {

    .prescriptions-page-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .patient-prescription-card {
        padding: 20px;
        border-radius: 16px;
    }

    .patient-prescription-header {
        flex-direction: column;
    }

    .patient-prescription-date {
        align-items: flex-start;
    }

    .patient-prescription-meta {
        grid-template-columns: 1fr;
    }

}






/* =========================================================
   HERO VIDEO - RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {

    .hero {
        min-height: 680px;
        padding: 130px 6% 70px;
    }

    .hero-content {
        max-width: 600px;
    }

    .hero h1 {
        font-size: 58px;
    }

    .hero p {
        font-size: 17px;
    }
}


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

@media (max-width: 900px) {

    .hero {
        min-height: 680px;

        padding: 130px 5% 70px;

        align-items: center;
    }

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

    .hero h1 {
        font-size: 52px;
        line-height: 1.08;
    }

    .hero p {
        max-width: 500px;
        font-size: 16px;
    }

    .hero-overlay {
        background: rgba(0, 0, 0, 0.48);
    }
}


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

@media (max-width: 768px) {

    .hero {
        min-height: 700px;

        width: 100%;

        padding: 140px 25px 60px;

        display: flex;
        align-items: flex-end;

        box-sizing: border-box;
    }


    /* VIDEO */

    .hero-video {
        position: absolute !important;

        top: 0 !important;
        left: 0 !important;

        width: 100% !important;
        height: 100% !important;

        object-fit: cover !important;
    }


    /* DARKER MOBILE OVERLAY */

    .hero-overlay {
        background: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.20) 0%,
            rgba(0, 0, 0, 0.45) 45%,
            rgba(0, 0, 0, 0.78) 100%
        );
    }


    /* CONTENT */

    .hero-content {
        position: relative !important;

        width: 100%;

        max-width: 100%;

        margin: 0 !important;

        z-index: 2 !important;
    }


    /* LABEL */

    .hero-label {
        margin-bottom: 15px;

        font-size: 11px;

        letter-spacing: 1.5px;
    }


    /* HEADING */

    .hero h1 {
        margin-bottom: 18px;

        font-size: 44px;

        line-height: 1.08;

        letter-spacing: -1px;
    }


    /* DESCRIPTION */

    .hero p {
        max-width: 100%;

        margin-bottom: 25px;

        font-size: 16px;

        line-height: 1.5;
    }


    /* BUTTONS */

    .hero-buttons {
        width: 100%;

        display: flex;

        flex-direction: column;

        align-items: stretch;

        gap: 12px;
    }


    .hero-primary,
    .hero-secondary {
        width: 100%;

        height: 48px;

        box-sizing: border-box;
    }
}


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

@media (max-width: 480px) {

    .hero {
        min-height: 680px;

        padding: 130px 20px 45px;
    }


    .hero h1 {
        font-size: 38px;

        line-height: 1.08;
    }


    .hero p {
        font-size: 15px;
    }


    .hero-label {
        font-size: 10px;

        letter-spacing: 1.2px;
    }
}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 360px) {

    .hero {
        min-height: 650px;

        padding-left: 18px;
        padding-right: 18px;
    }


    .hero h1 {
        font-size: 34px;
    }


    .hero p {
        font-size: 14px;
    }
}










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

@media (max-width: 1000px) {

    .approach-section {
        padding: 95px 0 105px;
    }

    .approach-content {
        grid-template-columns: 1fr;

        gap: 60px;
    }

    .approach-text {
        max-width: 760px;
    }

    .approach-text h2 {
        max-width: 700px;
    }

    .approach-intro {
        max-width: 700px;
    }

    .approach-visual {
        max-width: 720px;

        width: 100%;

        margin: 0 auto;
    }

    .approach-image img {
        height: 500px;
    }

    .approach-card {
        left: 25px;
    }
}


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

@media (max-width: 650px) {

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

    .approach-content {
        gap: 45px;
    }

    .approach-text h2 {
        font-size: 38px;

        line-height: 1.08;

        letter-spacing: -1px;
    }

    .approach-intro {
        margin-top: 18px;

        font-size: 15px;

        line-height: 1.7;
    }

    .approach-points {
        gap: 24px;

        margin-top: 30px;
    }

    .approach-point {
        gap: 14px;
    }

    .approach-point-icon {
        width: 32px;
        height: 32px;

        font-size: 14px;
    }

    .approach-point h3 {
        font-size: 17px;
    }

    .approach-point p {
        font-size: 14px;

        line-height: 1.65;
    }

    .approach-visual {
        padding-bottom: 25px;
    }

    .approach-image {
        border-radius: 22px;
    }

    .approach-image img {
        height: 400px;
    }

    .approach-card {
        position: relative;

        left: auto;
        bottom: auto;

        width: calc(100% - 30px);

        min-width: 0;

        margin: -30px auto 0;

        padding: 17px 18px;

        border-radius: 16px;
    }

    .approach-card-icon {
        width: 42px;
        height: 42px;

        border-radius: 12px;

        font-size: 21px;
    }

    .approach-card strong {
        font-size: 14px;
    }

    .approach-card span {
        font-size: 11px;
    }
}


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

@media (max-width: 480px) {

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

    .approach-text h2 {
        font-size: 32px;
    }

    .approach-intro {
        font-size: 15px;
    }

    .approach-image img {
        height: 350px;
    }

    .approach-card {
        width: calc(100% - 20px);

        margin-top: -25px;
    }
}





/* ----------------------------------------
   TABLET
---------------------------------------- */

@media (max-width: 1100px) {

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

        gap: 18px;
    }

    .trust-card {
        min-height: 260px;
    }
}


/* ----------------------------------------
   MOBILE
---------------------------------------- */

@media (max-width: 768px) {

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

    .trust-heading {
        margin-bottom: 45px;
    }

    .trust-heading h2 {
        font-size: 38px;

        letter-spacing: -1px;
    }

    .trust-heading p {
        font-size: 16px;

        line-height: 1.7;
    }

    .trust-grid {
        grid-template-columns: 1fr;

        gap: 14px;
    }

    .trust-card {
        min-height: auto;

        padding: 28px;
    }

    .trust-icon {
        margin-bottom: 22px;
    }
}


/* ----------------------------------------
   SMALL MOBILE
---------------------------------------- */

@media (max-width: 480px) {

    .trust-section {
        padding: 70px 0 75px;
    }

    .trust-heading h2 {
        font-size: 32px;
    }

    .trust-heading p {
        font-size: 15px;
    }

    .trust-card {
        padding: 25px;

        border-radius: 17px;
    }

    .trust-card h3 {
        font-size: 19px;
    }

    .trust-card p {
        font-size: 14px;
    }

    .trust-icon {
        width: 52px;
        height: 52px;

        margin-bottom: 20px;

        border-radius: 14px;

        font-size: 23px;
    }
}






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

@media (max-width: 1000px) {

    .trust-section .trust-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

}


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

@media (max-width: 600px) {

    .trust-section {
        padding: 85px 0 90px !important;
    }

    .trust-section .trust-heading {
        margin-bottom: 42px !important;
    }

    .trust-section .trust-heading h2 {
        font-size: 36px !important;
    }

    .trust-section .trust-heading p {
        font-size: 15px !important;
    }

    .trust-section .trust-grid {
        grid-template-columns: 1fr !important;

        gap: 15px !important;
    }

    .trust-section .trust-card {
        min-height: auto !important;

        padding: 28px !important;
    }

}








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

@media (max-width: 900px) {

    .hero {
        min-height: 700px;

        padding: 0 5% !important;
    }

    .hero-content {
        max-width: 650px !important;

        padding-top: 150px;
    }

    .trust-grid {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 600px) {

    .hero {
        min-height: 720px;

        padding: 0 22px !important;
    }

    .hero-content {
        padding-top: 150px;
    }

    .hero h1 {
        font-size: clamp(46px, 14vw, 64px) !important;
    }

    .hero p {
        font-size: 16px !important;
    }

    .hero-buttons {
        flex-direction: column;

        align-items: stretch;
    }

    .hero-primary,
    .hero-secondary {
        width: 100%;
    }

    .trust-section {
        padding: 90px 20px !important;
    }

    .trust-section .trust-heading h2 {
        font-size: 42px !important;
    }
}








/* TABLET */

@media (max-width: 900px) {

    .service-feature-section {
        width: 92%;

        padding: 85px 45px;

        border-radius: 28px;
    }

    .service-feature-section > .container,
    .service-feature-section.service-feature-reverse
    > .container {
        grid-template-columns: 1fr;

        gap: 50px;
    }

    .service-feature-section.service-feature-reverse
    .service-feature-visual,
    .service-feature-section.service-feature-reverse
    .service-feature-content {
        order: initial;
    }

    .service-feature-visual {
        min-height: 320px;
    }
}


/* MOBILE */

@media (max-width: 600px) {

    .service-feature-section {
        width: 92%;

        margin: 20px auto;

        padding: 65px 25px;

        border-radius: 24px;
    }

    .service-feature-section > .container {
        gap: 35px;
    }

    .service-feature-content h2 {
        font-size: 38px;

        line-height: 1.1;

        letter-spacing: -1px;
    }

    .service-feature-content p {
        margin-top: 18px;

        font-size: 15px;

        line-height: 1.7;
    }

    .service-feature-visual {
        min-height: 230px;
    }

    .service-feature-visual::before {
        width: 220px;
        height: 220px;
    }

    .service-feature-visual::after {
        width: 145px;
        height: 145px;
    }

    .service-feature-icon {
        width: 82px;
        height: 82px;

        border-radius: 21px;

        font-size: 36px;
    }
}















/* Mobile Website Preloader*/
@media (max-width: 767px) {
    .preloader-logo {
        width: 120px;
    }

    .preloader-spinner {
        width: 28px;
        height: 28px;
        margin-top: 20px;
    }
}



/* =========================================================
   MOBILE NAVBAR — FINAL
   ========================================================= */

@media (max-width: 768px) {

    /* FULL WIDTH HEADER */
    .site-header {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    .site-header > .container {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* NAVBAR */
    .site-header .navbar {
        position: relative !important;

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

        transform: none !important;

        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;

        min-height: 64px !important;
        height: auto !important;

        margin: 0 !important;
        padding: 8px 16px !important;

        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;

        box-sizing: border-box !important;

        border-radius: 0 !important;

        overflow: visible !important;
    }

    /* LOGO */
    .site-header .logo {
        display: flex !important;
        align-items: center !important;
        flex-shrink: 0 !important;
    }

    .site-header .logo img {
        width: 48px !important;
        height: 48px !important;
    }

    /* HAMBURGER */
    .site-header .mobile-menu-button {
        display: flex !important;

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

        width: 44px !important;
        height: 44px !important;

        margin-left: auto !important;
        padding: 0 !important;

        border: 0 !important;
        background: transparent !important;

        font-size: 28px !important;
        line-height: 1 !important;

        cursor: pointer !important;
    }

    /* HAMBURGER POSITION */
.site-header .mobile-menu-button {
    order: 4 !important;

    flex-shrink: 0 !important;
}

    /* MOBILE HEADER ITEMS */
.site-header .nav-links {
    display: none !important;
}

.site-header .nav-actions {
    display: flex !important;

    order: 2 !important;

    align-items: center !important;
    justify-content: flex-end !important;

    width: auto !important;

    gap: 6px !important;

    margin: 0 6px 0 auto !important;
    padding: 0 !important;

    background: transparent !important;
}

    /* OPEN MENU */
/* OPEN MENU */
.site-header .nav-links.active {
    display: flex !important;

    position: absolute !important;

    top: 100% !important;
    left: 0 !important;
    right: 0 !important;

    width: 100% !important;
    max-width: none !important;

    height: auto !important;
    min-height: 0 !important;

    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;

    gap: 2px !important;

    margin: 0 !important;
    padding: 12px 16px 8px !important;

    background: #ffffff !important;

    border: 0 !important;
    border-top: 1px solid #eeeeee !important;
    border-radius: 0 0 18px 18px !important;

    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.10) !important;

    box-sizing: border-box !important;

    z-index: 10000 !important;
}

    /* MENU LINKS */
.site-header .nav-links.active a {
    display: flex !important;

    align-items: center !important;
    justify-content: flex-start !important;

    width: 100% !important;

    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;

    flex: 0 0 50px !important;

    margin: 0 !important;
    padding: 0 14px !important;

    box-sizing: border-box !important;

    color: #263238 !important;

    font-size: 16px !important;
    font-weight: 600 !important;

    line-height: 1 !important;

    text-align: left !important;
    text-decoration: none !important;

    border-radius: 10px !important;

    transition:
        background-color 0.2s ease,
        transform 0.2s ease !important;

        border-bottom: 1px solid #101212 !important;
}

/* LINK HOVER / TAP */
.site-header .nav-links.active a:hover {
    background: #f3f8f8 !important;
    transform: translateX(3px);
}

/* LINK HOVER / TAP */
.site-header .nav-links.active a:hover {
    background: #f3f8f8 !important;
    transform: translateX(3px);
}

    /* OPEN ACTION AREA */
    /* HEADER ACTION BUTTONS */
.site-header .nav-actions,
.site-header .nav-actions.active {
    display: flex !important;

    position: static !important;

    order: 2 !important;

    width: auto !important;

    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;

    gap: 6px !important;

    margin: 0 6px 0 auto !important;
    padding: 0 !important;

    background: transparent !important;

    box-sizing: border-box !important;
}

    /* LOGIN + BOOK APPOINTMENT IN HEADER */
.site-header .nav-actions .login-btn,
.site-header .nav-actions .book-btn {
    display: flex !important;

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

    width: auto !important;
    min-width: 0 !important;

    height: 40px !important;

    margin: 0 !important;
    padding: 0 10px !important;

    border-radius: 9px !important;

    box-sizing: border-box !important;

    white-space: nowrap !important;

    font-size: 13px !important;
}

/* LOGIN */
.site-header .nav-actions.active .login-btn {
    border: 1px solid #dce7e7 !important;
}

/* BOOK APPOINTMENT */
.site-header .nav-actions.active .book-btn {
    font-weight: 700 !important;
}

}


/* SMALL MOBILE */

@media (max-width: 480px) {

    .site-header .navbar {
        padding: 7px 12px !important;
    }

    .site-header .logo img {
        width: 46px !important;
        height: 46px !important;
    }

    .site-header .mobile-menu-button {
        width: 42px !important;
        height: 42px !important;
        font-size: 26px !important;
    }

    .site-header .logo img {
    width: 42px !important;
    height: 42px !important;
}

.site-header .nav-actions .login-btn,
.site-header .nav-actions .book-btn {
    height: 38px !important;
    padding: 0 7px !important;
    font-size: 12px !important;
}

.site-header .nav-actions {
    gap: 4px !important;
    margin-right: 3px !important;
}

.site-header .mobile-menu-button {
    width: 40px !important;
    height: 40px !important;
    font-size: 25px !important;
}
}


/* =========================================================
   MOBILE HEADER — LOGO | ACTIONS | HAMBURGER
   ========================================================= */

@media (max-width: 768px) {

    .site-header .navbar {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 100% !important;
    }

    /* LOGO */
    .site-header .logo {
        flex: 0 0 auto !important;
        margin: 0 !important;
    }

    /* LOGIN + BOOK APPOINTMENT */
    .site-header .nav-actions,
    .site-header .nav-actions.active {
        display: flex !important;

        flex: 0 0 auto !important;

        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-end !important;

        width: auto !important;
        max-width: none !important;

        margin-left: auto !important;
        margin-right: 8px !important;

        padding: 0 !important;

        gap: 6px !important;

        position: static !important;

        background: transparent !important;
        box-shadow: none !important;
    }

    /* LOGIN */
    .site-header .nav-actions .login-btn,
    .site-header .nav-actions.active .login-btn {
        width: auto !important;
        min-width: 0 !important;
        height: 40px !important;

        margin: 0 !important;
        padding: 0 10px !important;

        flex: 0 0 auto !important;

        white-space: nowrap !important;
        box-sizing: border-box !important;
    }

    /* BOOK APPOINTMENT */
    .site-header .nav-actions .book-btn,
    .site-header .nav-actions.active .book-btn {
        width: auto !important;
        min-width: 0 !important;
        height: 40px !important;

        margin: 0 !important;
        padding: 0 10px !important;

        flex: 0 0 auto !important;

        white-space: nowrap !important;
        box-sizing: border-box !important;
    }

    /* HAMBURGER */
    .site-header .mobile-menu-button {
        flex: 0 0 44px !important;

        width: 44px !important;
        height: 44px !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        padding: 0 !important;

        display: flex !important;

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

        box-sizing: border-box !important;
    }
}








@media (max-width: 650px) {

    .how-it-works .step-card {
        min-height: 350px !important;
    }

    .how-it-works .step-card-content {
        min-height: 350px;

        padding: 25px;
    }

    .how-it-works .step-card .step-number {
        top: 22px;
        left: 22px;
    }

}






/* =========================================================
   OUR APPROACH — MOBILE IMAGE FIX
========================================================= */

@media (max-width: 650px) {

    .approach-visual {
        width: 100%;
        padding-bottom: 0;
    }

    .approach-image {
        position: relative;

        width: 100%;
        height: 420px !important;

        overflow: hidden;

        border-radius: 24px;

        background: #eaf4f2;
    }

    .approach-image img {
        position: absolute;

        inset: 0;

        width: 100% !important;
        height: 100% !important;

        display: block;

        object-fit: cover !important;

        /* Adjust this if you want a different part of image visible */
        object-position: center center;

        margin: 0;
    }

}






@media (max-width: 650px) {

    .testimonials-grid .testimonial-image-card {
        min-height: 390px !important;
    }

    .testimonial-image-card .testimonial-card-content {
        min-height: 390px;

        padding: 25px;
    }

    .testimonial-image-card blockquote {
        font-size: 17px;

        line-height: 1.6;

        margin-bottom: 28px;
    }

    .testimonial-image-card .testimonial-rating {
        font-size: 16px;
    }

}










@media (max-width: 650px) {

    .trust-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 6px;
        width: 100%;
    }

    .trust-card {
        height: 300px;
        min-width: 0;
        border-radius: 6px !important;
    }

    .trust-card-content {
        padding: 15px 8px 12px;
    }

    .trust-card-content h3 {
        font-size: 13px !important;
        line-height: 1.15;
    }

    .trust-card-content p {
        font-size: 8px !important;
        line-height: 1.3;
    }

    .trust-card-dot {
        top: 8px;
        left: 8px;
        width: 25px;
        height: 25px;
    }

    .trust-card-dot span {
        width: 8px;
        height: 8px;
    }
}







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

@media (max-width: 600px) {

    .ask-doctor-widget {
        right: 15px;
        bottom: 15px;
    }

    .ask-doctor-button {
        padding: 13px 16px;
    }

    .ask-doctor-text {
        font-size: 12px;
    }

    .ask-doctor-panel {
        position: fixed;

        left: 15px;
        right: 15px;

        bottom: 80px;

        width: auto;

        max-height: calc(100vh - 110px);

        overflow-y: auto;

        border-radius: 20px;
    }

}






/* =========================================================
   FINAL DESKTOP NAVBAR — COMPACT BALANCED VERSION
   ========================================================= */

@media (min-width: 769px) {

    .site-header .navbar {
        width: max-content !important;
        max-width: calc(100% - 40px) !important;

        padding-left: 16px !important;
        padding-right: 20px !important;

        box-sizing: border-box !important;

        display: flex !important;
        align-items: center !important;
    }


    /* Navigation links */
    .site-header .nav-links {
        gap: 24px !important;

        margin-left: 55px !important;
        margin-right: 0 !important;

        flex: 0 0 auto !important;
    }


    .site-header .nav-links a {
        font-size: 18px !important;
        white-space: nowrap !important;
    }


    /* Right-side actions */
    .site-header .nav-actions {
        display: flex !important;
        align-items: center !important;

        gap: 8px !important;

        margin-left: 18px !important;
        margin-right: 0 !important;

        flex: 0 0 auto !important;
    }


    /* My Account */
    .site-header .nav-actions .account-btn {
        width: 125px !important;
        min-width: 125px !important;

        height: 48px !important;

        padding: 0 12px !important;

        font-size: 16px !important;

        flex: 0 0 125px !important;
    }


    /* Log Out */
    .site-header .nav-actions .logout-btn {
        width: 100px !important;
        min-width: 100px !important;

        height: 48px !important;

        padding: 0 12px !important;

        font-size: 16px !important;

        flex: 0 0 100px !important;
    }


    /* Book Appointment */
    .site-header .nav-actions .book-btn {
        width: 210px !important;
        min-width: 210px !important;

        height: 48px !important;

        padding: 0 16px !important;

        font-size: 17px !important;

        flex: 0 0 210px !important;

        white-space: nowrap !important;
    }
}





@media (max-width: 650px) {

    .cta-symbol {
        width: 155px !important;
        height: 155px !important;

        min-width: 95px !important;
        min-height: 95px !important;
    }

    .cta-symbol .cta-image {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
    }

    .appointment-cta-visual {
        flex: 0 0 40% !important;
        width: 40% !important;
        min-width: 155px !important;
        height: 270px !important;

        overflow: visible !important;
    }

}







@media (max-width: 768px) {

    /* Hide desktop Resources dropdown */
    .resources-dropdown {
        display: none !important;
    }

    /* Resources behaves like a normal mobile nav item */
    .nav-dropdown {
        position: static;
    }

    .nav-dropdown-toggle {
        width: 100%;
        display: flex;
        align-items: center;

        background: none;
        border: none;

        padding: 0;
        margin: 0;

        font-family: inherit;
        font-size: inherit;
        font-weight: inherit;
        color: inherit;

        text-align: left;
        cursor: pointer;
    }

    /* Remove desktop arrow on mobile */
    .nav-dropdown-toggle::after {
        display: none;
    }

    /* Restore About and Contact in mobile menu */
    .mobile-resource-link {
        display: none !important;
    }
}



/* =========================================================
   MOBILE NAV ACTION BUTTONS — FINAL
   ========================================================= */

@media (max-width: 768px) {

    /* ACTION CONTAINER */
    .site-header .nav-actions {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;

        width: auto !important;
        max-width: calc(100vw - 125px) !important;

        margin: 0 6px 0 auto !important;
        padding: 0 !important;

        gap: 5px !important;

        flex: 0 1 auto !important;
        flex-shrink: 1 !important;

        position: static !important;

        background: transparent !important;
        box-shadow: none !important;
    }


    /* ALL ACTION BUTTONS */
    .site-header .nav-actions .account-btn,
    .site-header .nav-actions .logout-btn,
    .site-header .nav-actions .login-btn,
    .site-header .nav-actions .book-btn {

        display: inline-flex !important;

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

        height: 36px !important;
        min-height: 36px !important;
        max-height: 36px !important;

        width: auto !important;
        min-width: 0 !important;

        padding: 0 8px !important;
        margin: 0 !important;

        flex: 0 1 auto !important;
        flex-shrink: 1 !important;

        border-radius: 7px !important;

        font-size: 11px !important;
        line-height: 1 !important;

        white-space: nowrap !important;

        box-sizing: border-box !important;
    }


    /* ACCOUNT */
    .site-header .nav-actions .account-btn {
        max-width: 92px !important;
    }


    /* LOGOUT */
    .site-header .nav-actions .logout-btn {
        max-width: 70px !important;
    }


    /* LOGIN */
    .site-header .nav-actions .login-btn {
        max-width: 60px !important;
    }


    /* BOOK APPOINTMENT */
    .site-header .nav-actions .book-btn {
        max-width: 125px !important;
    }


    /* HAMBURGER */
    .site-header .mobile-menu-button {
        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;

        height: 40px !important;
        min-height: 40px !important;

        margin: 0 !important;
        padding: 0 !important;

        flex: 0 0 40px !important;
    }
}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 480px) {

    .site-header .nav-actions {
        gap: 3px !important;
        margin-right: 3px !important;
        max-width: calc(100vw - 105px) !important;
    }

    .site-header .nav-actions .account-btn,
    .site-header .nav-actions .logout-btn,
    .site-header .nav-actions .login-btn,
    .site-header .nav-actions .book-btn {

        height: 34px !important;
        min-height: 34px !important;
        max-height: 34px !important;

        padding: 0 6px !important;

        font-size: 10px !important;
        border-radius: 6px !important;
    }

    .site-header .nav-actions .account-btn {
        max-width: 78px !important;
    }

    .site-header .nav-actions .logout-btn {
        max-width: 60px !important;
    }

    .site-header .nav-actions .login-btn {
        max-width: 52px !important;
    }

    .site-header .nav-actions .book-btn {
        max-width: 105px !important;
    }

    .site-header .mobile-menu-button {
        width: 38px !important;
        min-width: 38px !important;
        max-width: 38px !important;

        height: 38px !important;
    }
}



/* =========================================================
   SPECIALITY PAGE - FORCE MOBILE LAYOUT
   ========================================================= */

@media only screen and (max-width: 767px) {

    /* ---------- HERO ---------- */

    .speciality-hero {
        min-height: 600px !important;
        height: auto !important;
        padding: 0 20px !important;
    }

    .speciality-hero > .container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .speciality-hero-content {
        width: 100% !important;
        max-width: 100% !important;
        padding: 120px 0 60px !important;
    }

    .speciality-hero .section-subtitle {
        font-size: 14px !important;
        margin-bottom: 18px !important;
    }

    .speciality-hero h1 {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 42px !important;
        line-height: 1.05 !important;
        letter-spacing: -1.5px !important;
        margin-bottom: 20px !important;
    }

    .speciality-hero p {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 15px !important;
        line-height: 1.65 !important;
    }


    /* ---------- MAIN PAGE ---------- */

    .speciality-page {
        width: 100% !important;
        max-width: 100% !important;

        padding: 35px 12px 60px !important;

        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .speciality-page > .container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .speciality-page .container {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .speciality-list {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }


    /* ---------- SPECIALITY ROW ---------- */

    .speciality-row,
    .speciality-row.speciality-row-reverse {
        width: 100% !important;
        max-width: 100% !important;

        display: flex !important;
        flex-direction: column !important;

        align-items: stretch !important;
        justify-content: flex-start !important;

        gap: 25px !important;

        padding: 28px 20px !important;
        margin: 0 0 20px 0 !important;

        box-sizing: border-box !important;

        border-radius: 20px !important;

        overflow: hidden !important;
    }


    /* ---------- TEXT ---------- */

    .speciality-content {
        width: 100% !important;
        max-width: 100% !important;

        flex: none !important;

        box-sizing: border-box !important;
    }

    .speciality-number {
        font-size: 13px !important;
        margin-bottom: 10px !important;
    }

    .speciality-content h2 {
        width: 100% !important;
        max-width: 100% !important;

        font-size: 28px !important;
        line-height: 1.2 !important;

        margin: 0 0 15px !important;
    }

    .speciality-content p {
        width: 100% !important;
        max-width: 100% !important;

        font-size: 14px !important;
        line-height: 1.75 !important;

        margin: 0 !important;

        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
    }


    /* ---------- VIDEO ---------- */

    .speciality-image {
        width: 100% !important;
        max-width: 100% !important;

        height: 340px !important;

        flex: none !important;
        flex-shrink: 0 !important;

        margin: 0 !important;

        border-radius: 20px !important;

        overflow: hidden !important;

        box-sizing: border-box !important;
    }

    .speciality-image video {
        width: 100% !important;
        height: 100% !important;

        display: block !important;

        object-fit: cover !important;
    }


    /* ---------- CTA ---------- */

    .service-page-cta {
        width: 100% !important;
        padding: 0 0 60px !important;
        box-sizing: border-box !important;
    }

    .service-page-cta .container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }

    .service-page-cta-box {
        width: 100% !important;
        max-width: 100% !important;

        padding: 35px 20px !important;

        box-sizing: border-box !important;
        border-radius: 20px !important;
    }

    .service-page-cta-box h2 {
        font-size: 30px !important;
        line-height: 1.15 !important;
    }

    .service-cta-buttons {
        width: 100% !important;

        display: flex !important;
        flex-direction: column !important;

        gap: 12px !important;
    }

    .service-cta-buttons .btn {
        width: 100% !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }
}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media only screen and (max-width: 480px) {

    .speciality-hero {
        min-height: 570px !important;
        padding: 0 16px !important;
    }

    .speciality-hero-content {
        padding-top: 105px !important;
    }

    .speciality-hero h1 {
        font-size: 38px !important;
    }

    .speciality-hero p {
        font-size: 14px !important;
    }


    .speciality-page {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }


    .speciality-row,
    .speciality-row.speciality-row-reverse {
        padding: 25px 17px !important;
        gap: 22px !important;
        border-radius: 18px !important;
    }


    .speciality-content h2 {
        font-size: 25px !important;
    }

    .speciality-content p {
        font-size: 14px !important;
        line-height: 1.72 !important;
    }


    .speciality-image {
        height: 300px !important;
        border-radius: 17px !important;
    }
}





/* =========================================================
   DOCTORS PAGE - MOBILE FIX
   ========================================================= */

@media only screen and (max-width: 650px) {

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

    .doctors-page-hero {
        min-height: 560px !important;
        height: auto !important;

        padding: 0 20px !important;

        display: flex !important;
        align-items: center !important;

        box-sizing: border-box !important;

        overflow: hidden !important;
    }

    .doctors-page-hero > .container {
        width: 100% !important;
        max-width: 100% !important;

        padding: 0 !important;
        margin: 0 !important;
    }

    .doctors-page-hero-content {
        width: 100% !important;
        max-width: 100% !important;

        padding: 100px 0 50px !important;

        box-sizing: border-box !important;
    }

    .doctors-page-hero-content .section-label {
        font-size: 13px !important;
        letter-spacing: .12em !important;
    }

    .doctors-page-hero-content h1 {
        width: 100% !important;
        max-width: 100% !important;

        margin: 15px 0 20px !important;

        font-size: 40px !important;
        line-height: 1.05 !important;
        letter-spacing: -1.5px !important;

        overflow-wrap: break-word !important;
    }

    .doctors-page-hero-content p {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;

        font-size: 15px !important;
        line-height: 1.65 !important;
    }


    /* =========================
       DIRECTORY SECTION
    ========================= */

    .doctor-directory-section {
        width: 100% !important;

        padding: 50px 12px 65px !important;

        box-sizing: border-box !important;

        overflow: hidden !important;
    }

    .doctor-directory-section > .container {
        width: 100% !important;
        max-width: 100% !important;

        padding: 0 !important;
        margin: 0 !important;

        box-sizing: border-box !important;
    }


    /* =========================
       SEARCH + FILTERS
    ========================= */

    .directory-toolbar {
        width: 100% !important;

        display: flex !important;
        flex-direction: column !important;

        gap: 10px !important;

        padding: 10px !important;
        margin: 0 0 35px !important;

        box-sizing: border-box !important;
    }

    .directory-search {
        width: 100% !important;

        min-width: 0 !important;

        grid-column: auto !important;

        box-sizing: border-box !important;
    }

    .directory-search input {
        width: 100% !important;
        max-width: 100% !important;

        min-width: 0 !important;

        box-sizing: border-box !important;
    }

    #specialtyFilter,
    #availabilityFilter {
        width: 100% !important;
        min-width: 0 !important;

        box-sizing: border-box !important;
    }


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

    .doctor-results-header {
        width: 100% !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;

        gap: 8px !important;

        margin-bottom: 25px !important;

        box-sizing: border-box !important;
    }

    .doctor-results-header h2 {
        margin: 0 !important;

        font-size: 28px !important;
        line-height: 1.2 !important;
    }

    .doctor-result-count {
        font-size: 14px !important;
    }


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

    .doctor-directory-grid {
        width: 100% !important;
        max-width: 100% !important;

        display: grid !important;
        grid-template-columns: 1fr !important;

        gap: 18px !important;

        box-sizing: border-box !important;
    }


    /* =========================
       DOCTOR CARD
    ========================= */

    .directory-doctor-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        box-sizing: border-box !important;

        overflow: hidden !important;

        border-radius: 22px !important;
    }


    /* Doctor image */

    .directory-doctor-image {
        width: 100% !important;

        height: 300px !important;

        min-height: 0 !important;

        box-sizing: border-box !important;

        overflow: hidden !important;
    }

    .directory-doctor-image img {
        width: 100% !important;
        height: 100% !important;

        display: block !important;

        object-fit: cover !important;
    }


    /* Doctor information */

    .directory-doctor-info {
        width: 100% !important;

        padding: 22px 20px !important;

        box-sizing: border-box !important;

        min-width: 0 !important;
    }

    .directory-specialty {
        display: inline-block !important;

        max-width: 100% !important;

        font-size: 12px !important;

        overflow-wrap: break-word !important;
    }

    .directory-doctor-info h3 {
        width: 100% !important;

        margin: 8px 0 10px !important;

        font-size: 24px !important;
        line-height: 1.2 !important;

        overflow-wrap: break-word !important;
    }

    .directory-experience,
    .directory-fee {
        font-size: 14px !important;
        line-height: 1.5 !important;
    }


    /* Consultation badges */

    .directory-consultation {
        width: 100% !important;

        display: flex !important;
        flex-wrap: wrap !important;

        gap: 7px !important;

        margin-top: 14px !important;
    }

    .directory-consultation span {
        font-size: 12px !important;
    }


    /* View profile button */

    .directory-profile-button {
        width: 100% !important;

        display: block !important;

        box-sizing: border-box !important;

        margin-top: 18px !important;

        text-align: center !important;
    }


    /* =========================
       EMPTY / NO RESULTS
    ========================= */

    .doctor-empty-state,
    .doctor-no-results {
        width: 100% !important;

        box-sizing: border-box !important;

        padding: 35px 20px !important;

        text-align: center !important;
    }


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

    .doctors-page-cta {
        width: 100% !important;

        padding: 0 12px 60px !important;

        box-sizing: border-box !important;
    }

    .doctors-page-cta > .container {
        width: 100% !important;
        max-width: 100% !important;

        padding: 0 !important;
        margin: 0 !important;
    }

    .doctors-page-cta-box {
        width: 100% !important;
        max-width: 100% !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;

        gap: 25px !important;

        padding: 35px 22px !important;

        box-sizing: border-box !important;

        border-radius: 22px !important;
    }

    .doctors-page-cta-box h2 {
        width: 100% !important;

        font-size: 30px !important;
        line-height: 1.15 !important;
    }

    .doctors-page-cta-box p {
        font-size: 15px !important;
        line-height: 1.6 !important;
    }

    .doctors-page-cta-box .btn {
        width: 100% !important;

        box-sizing: border-box !important;

        text-align: center !important;
    }
}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media only screen and (max-width: 400px) {

    .doctors-page-hero {
        min-height: 530px !important;
        padding: 0 16px !important;
    }

    .doctors-page-hero-content {
        padding-top: 95px !important;
    }

    .doctors-page-hero-content h1 {
        font-size: 36px !important;
    }

    .doctors-page-hero-content p {
        font-size: 14px !important;
    }

    .doctor-directory-section {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .directory-toolbar {
        padding: 8px !important;
    }

    .directory-doctor-image {
        height: 280px !important;
    }

    .directory-doctor-info {
        padding: 20px 17px !important;
    }

    .directory-doctor-info h3 {
        font-size: 22px !important;
    }

    .doctors-page-cta {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}







/* =========================================================
   RESOURCES PAGE - MOBILE FIX
   ========================================================= */

@media only screen and (max-width: 650px) {

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

    .resources-page-hero {
        width: 100% !important;
        min-height: 560px !important;
        height: auto !important;
        padding: 0 18px !important;
        display: flex !important;
        align-items: center !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .resources-page-hero > .container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .resources-page-hero-content {
        width: 100% !important;
        max-width: 100% !important;
        padding: 100px 0 45px !important;
        margin: 0 !important;
        text-align: left !important;
        box-sizing: border-box !important;
    }

    .resources-page-hero-content .section-label {
        display: block !important;
        margin-bottom: 18px !important;
        font-size: 11px !important;
        letter-spacing: .12em !important;
        line-height: 1.5 !important;
    }

    .resources-page-hero-content h1 {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        font-size: 38px !important;
        line-height: 1.08 !important;
        letter-spacing: -1.5px !important;
        overflow-wrap: break-word !important;
    }

    .resources-page-hero-content p {
        width: 100% !important;
        max-width: 100% !important;
        margin: 20px 0 0 !important;
        font-size: 15px !important;
        line-height: 1.65 !important;
    }


    /* =========================
       FEATURED RESOURCE
    ========================= */

    .featured-resource-section {
        width: 100% !important;
        padding: 55px 12px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .featured-resource-section > .container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    .featured-resource {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        border-radius: 22px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .featured-resource-image {
        width: 100% !important;
        height: 270px !important;
        min-height: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .featured-resource-image img {
        width: 100% !important;
        height: 100% !important;
        display: block !important;
        object-fit: cover !important;
    }

    .featured-resource-content {
        width: 100% !important;
        padding: 30px 22px !important;
        box-sizing: border-box !important;
    }

    .featured-resource-content .resource-meta {
        display: block !important;
        margin-bottom: 12px !important;
        font-size: 11px !important;
    }

    .featured-resource-content h2 {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        font-size: 29px !important;
        line-height: 1.15 !important;
        letter-spacing: -1px !important;
    }

    .featured-resource-content p {
        width: 100% !important;
        max-width: 100% !important;
        margin: 16px 0 24px !important;
        font-size: 14px !important;
        line-height: 1.65 !important;
    }

    .featured-resource-content .btn {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }


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

    .resource-categories-section {
        width: 100% !important;
        padding: 60px 12px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .resource-categories-section > .container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    .resource-categories-heading {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 28px !important;
    }

    .resource-categories-heading .section-label {
        font-size: 11px !important;
    }

    .resource-categories-heading h2 {
        width: 100% !important;
        max-width: 100% !important;
        margin: 10px 0 0 !important;
        font-size: 31px !important;
        line-height: 1.15 !important;
        letter-spacing: -1px !important;
    }


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

    .resource-category-list {
        width: 100% !important;
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: flex-start !important;
        gap: 8px !important;
        margin-bottom: 32px !important;
    }

    .resource-filter {
        flex: 0 0 auto !important;
        padding: 9px 14px !important;
        font-size: 12px !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }


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

    .resource-library-grid {
        width: 100% !important;
        max-width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 18px !important;
        box-sizing: border-box !important;
    }

    .library-resource-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        border-radius: 20px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .library-resource-image {
        width: 100% !important;
        height: 230px !important;
        min-height: 0 !important;
        box-sizing: border-box !important;
    }

    .library-resource-image img {
        width: 100% !important;
        height: 100% !important;
        display: block !important;
        object-fit: cover !important;
    }

    .library-resource-image span {
        top: 12px !important;
        left: 12px !important;
        padding: 6px 9px !important;
        font-size: 9px !important;
    }


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

    .library-resource-content {
        width: 100% !important;
        padding: 22px 20px !important;
        box-sizing: border-box !important;
    }

    .library-resource-content small {
        margin-bottom: 7px !important;
        font-size: 9px !important;
    }

    .library-resource-content h3 {
        width: 100% !important;
        margin: 0 0 10px !important;
        font-size: 21px !important;
        line-height: 1.3 !important;
        overflow-wrap: break-word !important;
    }

    .library-resource-content p {
        width: 100% !important;
        margin-bottom: 17px !important;
        font-size: 14px !important;
        line-height: 1.65 !important;
    }

    .library-resource-content a {
        font-size: 13px !important;
    }


    /* =========================
       NO RESULTS
    ========================= */

    .resource-no-results {
        width: 100% !important;
        padding: 40px 20px !important;
        box-sizing: border-box !important;
    }

    .resource-no-results h3 {
        font-size: 22px !important;
    }

    .resource-no-results p {
        font-size: 14px !important;
    }


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

    .resources-page-cta {
        width: 100% !important;
        padding: 0 12px 60px !important;
        box-sizing: border-box !important;
    }

    .resources-page-cta > .container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    .resources-page-cta-box {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 24px !important;
        padding: 32px 22px !important;
        border-radius: 22px !important;
        box-sizing: border-box !important;
    }

    .resources-page-cta-box h2 {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        font-size: 30px !important;
        line-height: 1.15 !important;
        letter-spacing: -1px !important;
    }

    .resources-page-cta-box p {
        width: 100% !important;
        margin-top: 13px !important;
        font-size: 14px !important;
        line-height: 1.6 !important;
    }

    .resources-page-cta .btn-primary22 {
        width: 100% !important;
        min-width: 0 !important;
        height: 44px !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }
}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media only screen and (max-width: 400px) {

    .resources-page-hero {
        min-height: 530px !important;
        padding: 0 15px !important;
    }

    .resources-page-hero-content {
        padding-top: 95px !important;
    }

    .resources-page-hero-content h1 {
        font-size: 34px !important;
    }

    .resources-page-hero-content p {
        font-size: 14px !important;
    }

    .featured-resource-section {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .featured-resource-image {
        height: 245px !important;
    }

    .featured-resource-content {
        padding: 27px 18px !important;
    }

    .featured-resource-content h2 {
        font-size: 27px !important;
    }

    .resource-categories-section {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .resource-categories-heading h2 {
        font-size: 28px !important;
    }

    .resource-filter {
        padding: 8px 12px !important;
        font-size: 11px !important;
    }

    .library-resource-image {
        height: 210px !important;
    }

    .library-resource-content {
        padding: 20px 17px !important;
    }

    .library-resource-content h3 {
        font-size: 20px !important;
    }

    .resources-page-cta {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .resources-page-cta-box {
        padding: 28px 18px !important;
    }

    .resources-page-cta-box h2 {
        font-size: 27px !important;
    }
}









/* =========================================================
   ABOUT PAGE - MOBILE FIX
   ========================================================= */

@media only screen and (max-width: 650px) {

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

    .about-page-hero {
        width: 100% !important;
        min-height: 560px !important;
        height: auto !important;
        padding: 0 18px !important;
        display: flex !important;
        align-items: center !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .about-page-hero > .container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .about-page-hero-content {
        width: 100% !important;
        max-width: 100% !important;
        padding: 100px 0 45px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        text-align: left !important;
    }

    .about-page-hero-content .section-label {
        display: block !important;
        margin-bottom: 18px !important;
        font-size: 11px !important;
        letter-spacing: .12em !important;
        line-height: 1.5 !important;
    }

    .about-page-hero-content h1 {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        font-size: 38px !important;
        line-height: 1.08 !important;
        letter-spacing: -1.5px !important;
        overflow-wrap: break-word !important;
    }

    .about-page-hero-content p {
        width: 100% !important;
        max-width: 100% !important;
        margin: 20px 0 0 !important;
        font-size: 15px !important;
        line-height: 1.65 !important;
    }


    /* =========================
       MISSION
    ========================= */

    .about-mission-section {
        width: 100% !important;
        padding: 60px 12px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .about-mission-section > .container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    .about-mission-grid {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 30px !important;
        box-sizing: border-box !important;
    }

    .about-mission-image {
        width: 100% !important;
        max-width: 100% !important;
        height: 300px !important;
        min-height: 0 !important;
        overflow: hidden !important;
        border-radius: 22px !important;
        box-sizing: border-box !important;
    }

    .about-mission-image img {
        width: 100% !important;
        height: 100% !important;
        display: block !important;
        object-fit: cover !important;
    }

    .about-mission-content {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .about-mission-content .section-label {
        font-size: 11px !important;
    }

    .about-mission-content h2 {
        width: 100% !important;
        max-width: 100% !important;
        margin: 10px 0 18px !important;
        font-size: 32px !important;
        line-height: 1.15 !important;
        letter-spacing: -1px !important;
        overflow-wrap: break-word !important;
    }

    .about-mission-content p {
        width: 100% !important;
        font-size: 15px !important;
        line-height: 1.7 !important;
        margin-bottom: 16px !important;
    }

    .about-mission-content .btn {
        width: 100% !important;
        box-sizing: border-box !important;
        text-align: center !important;
        margin-top: 8px !important;
    }


    /* =========================
       VALUES
    ========================= */

    .about-values-section {
        width: 100% !important;
        padding: 60px 12px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .about-values-section > .container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    .about-values-heading {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 30px !important;
    }

    .about-values-heading h2 {
        width: 100% !important;
        max-width: 100% !important;
        margin: 10px 0 15px !important;
        font-size: 32px !important;
        line-height: 1.15 !important;
        letter-spacing: -1px !important;
    }

    .about-values-heading p {
        width: 100% !important;
        font-size: 15px !important;
        line-height: 1.65 !important;
    }

    .about-values-grid {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        box-sizing: border-box !important;
    }

    .about-value-card {
        width: 100% !important;
        min-width: 0 !important;
        padding: 25px 21px !important;
        box-sizing: border-box !important;
        border-radius: 20px !important;
    }

    .about-value-icon {
        width: 46px !important;
        height: 46px !important;
        margin-bottom: 16px !important;
    }

    .about-value-card h3 {
        font-size: 21px !important;
        line-height: 1.25 !important;
        margin-bottom: 9px !important;
    }

    .about-value-card p {
        font-size: 14px !important;
        line-height: 1.65 !important;
    }


    /* =========================
       EXPERIENCE
    ========================= */

    .about-experience-section {
        width: 100% !important;
        padding: 60px 12px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .about-experience-section > .container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    .about-experience-content {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 35px !important;
        box-sizing: border-box !important;
    }

    .about-experience-text {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .about-experience-text h2 {
        width: 100% !important;
        max-width: 100% !important;
        margin: 10px 0 17px !important;
        font-size: 31px !important;
        line-height: 1.15 !important;
        letter-spacing: -1px !important;
        overflow-wrap: break-word !important;
    }

    .about-experience-text > p {
        width: 100% !important;
        font-size: 15px !important;
        line-height: 1.7 !important;
        margin-bottom: 25px !important;
    }

    .about-experience-points {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 18px !important;
    }

    .about-experience-point {
        width: 100% !important;
        display: flex !important;
        align-items: flex-start !important;
        gap: 14px !important;
        box-sizing: border-box !important;
    }

    .about-experience-point > span {
        flex: 0 0 auto !important;
        font-size: 13px !important;
    }

    .about-experience-point > div {
        min-width: 0 !important;
        flex: 1 !important;
    }

    .about-experience-point h3 {
        font-size: 19px !important;
        line-height: 1.25 !important;
        margin-bottom: 5px !important;
    }

    .about-experience-point p {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }

    .about-experience-image {
        width: 100% !important;
        max-width: 100% !important;
        height: 320px !important;
        min-height: 0 !important;
        position: relative !important;
        overflow: hidden !important;
        border-radius: 22px !important;
        box-sizing: border-box !important;
    }

    .about-experience-image > img {
        width: 100% !important;
        height: 100% !important;
        display: block !important;
        object-fit: cover !important;
    }

    .about-experience-card {
        left: 15px !important;
        right: 15px !important;
        bottom: 15px !important;
        max-width: calc(100% - 30px) !important;
        padding: 15px 17px !important;
        box-sizing: border-box !important;
        border-radius: 16px !important;
    }

    .about-experience-card strong {
        font-size: 15px !important;
    }

    .about-experience-card span {
        font-size: 12px !important;
    }


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

    .about-page-cta {
        width: 100% !important;
        padding: 0 12px 60px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .about-page-cta > .container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    .about-page-cta-box {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 25px !important;
        padding: 32px 22px !important;
        border-radius: 22px !important;
        box-sizing: border-box !important;
    }

    .about-page-cta-box > div:first-child {
        width: 100% !important;
        max-width: 100% !important;
    }

    .about-page-cta-box h2 {
        width: 100% !important;
        max-width: 100% !important;
        margin: 10px 0 12px !important;
        font-size: 30px !important;
        line-height: 1.15 !important;
        letter-spacing: -1px !important;
    }

    .about-page-cta-box p {
        width: 100% !important;
        font-size: 14px !important;
        line-height: 1.6 !important;
    }

    .about-cta-buttons {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    .about-cta-buttons .btn {
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }
}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media only screen and (max-width: 400px) {

    .about-page-hero {
        min-height: 530px !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .about-page-hero-content {
        padding-top: 95px !important;
    }

    .about-page-hero-content h1 {
        font-size: 34px !important;
    }

    .about-page-hero-content p {
        font-size: 14px !important;
    }

    .about-mission-section,
    .about-values-section,
    .about-experience-section {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .about-mission-image {
        height: 270px !important;
    }

    .about-mission-content h2,
    .about-values-heading h2 {
        font-size: 29px !important;
    }

    .about-value-card {
        padding: 22px 18px !important;
    }

    .about-experience-text h2 {
        font-size: 28px !important;
    }

    .about-experience-image {
        height: 290px !important;
    }

    .about-page-cta {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .about-page-cta-box {
        padding: 28px 18px !important;
    }

    .about-page-cta-box h2 {
        font-size: 27px !important;
    }
}





/* =========================================================
   CONTACT PAGE - MOBILE FIX
   ========================================================= */

@media only screen and (max-width: 650px) {

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

    .contact-page-hero {
        width: 100% !important;
        min-height: 560px !important;
        height: auto !important;
        padding: 0 18px !important;
        display: flex !important;
        align-items: center !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .contact-page-hero > .container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .contact-page-hero-content {
        width: 100% !important;
        max-width: 100% !important;
        padding: 100px 0 45px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        text-align: left !important;
    }

    .contact-page-hero-content .section-label {
        display: block !important;
        margin-bottom: 18px !important;
        font-size: 11px !important;
        letter-spacing: .12em !important;
        line-height: 1.5 !important;
    }

    .contact-page-hero-content h1 {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        font-size: 38px !important;
        line-height: 1.08 !important;
        letter-spacing: -1.5px !important;
        overflow-wrap: break-word !important;
    }

    .contact-page-hero-content p {
        width: 100% !important;
        max-width: 100% !important;
        margin: 20px 0 0 !important;
        font-size: 15px !important;
        line-height: 1.65 !important;
    }


    /* =========================
       MAIN CONTACT SECTION
    ========================= */

    .contact-main-section {
        width: 100% !important;
        padding: 60px 12px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .contact-main-section > .container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    .contact-main-grid {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 35px !important;
        box-sizing: border-box !important;
    }


    /* =========================
       CONTACT INFORMATION
    ========================= */

    .contact-information {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .contact-information > .section-label {
        font-size: 11px !important;
    }

    .contact-information h2 {
        width: 100% !important;
        max-width: 100% !important;
        margin: 10px 0 17px !important;
        font-size: 31px !important;
        line-height: 1.15 !important;
        letter-spacing: -1px !important;
        overflow-wrap: break-word !important;
    }

    .contact-information > p {
        width: 100% !important;
        font-size: 15px !important;
        line-height: 1.7 !important;
    }


    /* =========================
       CONTACT INFO ITEMS
    ========================= */

    .contact-info-list {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        margin-top: 25px !important;
    }

    .contact-info-item {
        width: 100% !important;
        display: flex !important;
        align-items: flex-start !important;
        gap: 14px !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .contact-info-icon {
        flex: 0 0 auto !important;
        width: 44px !important;
        height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .contact-info-item > div:last-child {
        min-width: 0 !important;
        flex: 1 !important;
    }

    .contact-info-item span {
        display: block !important;
        font-size: 12px !important;
        margin-bottom: 4px !important;
    }

    .contact-info-item strong {
        display: block !important;
        max-width: 100% !important;
        font-size: 15px !important;
        line-height: 1.45 !important;
        overflow-wrap: anywhere !important;
    }

    .contact-info-item small {
        display: block !important;
        font-size: 12px !important;
        margin-top: 3px !important;
    }


    /* =========================
       URGENT / NOTE
    ========================= */

    .contact-note {
        width: 100% !important;
        margin-top: 25px !important;
        padding: 18px !important;
        box-sizing: border-box !important;
        border-radius: 16px !important;
    }

    .contact-note strong {
        display: block !important;
        font-size: 15px !important;
        line-height: 1.4 !important;
        margin-bottom: 7px !important;
    }

    .contact-note p {
        font-size: 13px !important;
        line-height: 1.6 !important;
    }


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

    .urgent-care-map {
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 25px !important;
        overflow: hidden !important;
        border-radius: 18px !important;
        box-sizing: border-box !important;
    }

    .urgent-care-map iframe {
        width: 100% !important;
        height: 280px !important;
        display: block !important;
        border: 0 !important;
    }


    /* =========================
       APPOINTMENT FORM CARD
    ========================= */

    .appointment-form-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 28px 20px !important;
        box-sizing: border-box !important;
        border-radius: 22px !important;
        overflow: hidden !important;
    }

    .appointment-form-heading {
        width: 100% !important;
        max-width: 100% !important;
    }

    .appointment-form-heading .section-label {
        font-size: 11px !important;
    }

    .appointment-form-heading h2 {
        width: 100% !important;
        max-width: 100% !important;
        margin: 10px 0 14px !important;
        font-size: 29px !important;
        line-height: 1.15 !important;
        letter-spacing: -1px !important;
    }

    .appointment-form-heading p {
        width: 100% !important;
        font-size: 14px !important;
        line-height: 1.65 !important;
    }


    /* =========================
       FORM
    ========================= */

    .appointment-form {
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 25px !important;
        box-sizing: border-box !important;
    }

    .form-row {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        box-sizing: border-box !important;
    }

    .form-group {
        width: 100% !important;
        min-width: 0 !important;
        margin-bottom: 17px !important;
        box-sizing: border-box !important;
    }

    .form-group label {
        display: block !important;
        font-size: 13px !important;
        margin-bottom: 7px !important;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        font-size: 14px !important;
    }

    .form-group input,
    .form-group select {
        height: 46px !important;
    }

    .form-group textarea {
        min-height: 125px !important;
        resize: vertical !important;
    }


    /* =========================
       CONSENT
    ========================= */

    .appointment-form-disclaimer {
        width: 100% !important;
        display: flex !important;
        align-items: flex-start !important;
        gap: 9px !important;
        margin: 3px 0 18px !important;
        box-sizing: border-box !important;
    }

    .appointment-form-disclaimer input {
        flex: 0 0 auto !important;
        width: 17px !important;
        height: 17px !important;
        margin-top: 2px !important;
    }

    .appointment-form-disclaimer label {
        min-width: 0 !important;
        font-size: 12px !important;
        line-height: 1.55 !important;
    }

    .form-submit-button {
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }

    .form-small-note {
        width: 100% !important;
        font-size: 11px !important;
        line-height: 1.55 !important;
        margin-top: 14px !important;
    }


    /* =========================
       FAQ
    ========================= */

    .contact-faq-section {
        width: 100% !important;
        padding: 60px 12px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .contact-faq-layout {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 35px !important;
        box-sizing: border-box !important;
    }

    .contact-faq-content {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .contact-faq-heading {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 25px !important;
    }

    .contact-faq-heading .section-label {
        font-size: 11px !important;
    }

    .contact-faq-heading h2 {
        width: 100% !important;
        max-width: 100% !important;
        margin: 10px 0 0 !important;
        font-size: 31px !important;
        line-height: 1.15 !important;
        letter-spacing: -1px !important;
    }

    .faq-list {
        width: 100% !important;
    }

    .faq-item {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .faq-item summary {
        width: 100% !important;
        padding: 17px 15px !important;
        font-size: 14px !important;
        line-height: 1.45 !important;
        box-sizing: border-box !important;
    }

    .faq-item p {
        width: 100% !important;
        padding: 0 15px 17px !important;
        font-size: 13px !important;
        line-height: 1.65 !important;
        box-sizing: border-box !important;
    }


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

    .contact-faq-image {
        width: 100% !important;
        max-width: 100% !important;
        height: 280px !important;
        min-height: 0 !important;
        overflow: hidden !important;
        border-radius: 20px !important;
        box-sizing: border-box !important;
    }

    .contact-faq-image img {
        width: 100% !important;
        height: 100% !important;
        display: block !important;
        object-fit: cover !important;
    }


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

    .contact-final-cta {
        width: 100% !important;
        padding: 0 12px 60px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .contact-final-cta > .container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    .contact-final-cta-box {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 22px !important;
        padding: 32px 22px !important;
        border-radius: 22px !important;
        box-sizing: border-box !important;
    }

    .contact-final-cta-box > div:first-child {
        width: 100% !important;
        max-width: 100% !important;
    }

    .contact-final-cta-box h2 {
        width: 100% !important;
        max-width: 100% !important;
        margin: 10px 0 12px !important;
        font-size: 30px !important;
        line-height: 1.15 !important;
        letter-spacing: -1px !important;
    }

    .contact-final-cta-box p {
        width: 100% !important;
        font-size: 14px !important;
        line-height: 1.6 !important;
    }

    .contact-final-cta-box .btn {
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }
}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media only screen and (max-width: 400px) {

    .contact-page-hero {
        min-height: 530px !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .contact-page-hero-content {
        padding-top: 95px !important;
    }

    .contact-page-hero-content h1 {
        font-size: 34px !important;
    }

    .contact-page-hero-content p {
        font-size: 14px !important;
    }

    .contact-main-section,
    .contact-faq-section {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .contact-information h2,
    .contact-faq-heading h2 {
        font-size: 28px !important;
    }

    .urgent-care-map iframe {
        height: 250px !important;
    }

    .appointment-form-card {
        padding: 25px 17px !important;
    }

    .appointment-form-heading h2 {
        font-size: 27px !important;
    }

    .contact-faq-image {
        height: 250px !important;
    }

    .contact-final-cta {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .contact-final-cta-box {
        padding: 28px 18px !important;
    }

    .contact-final-cta-box h2 {
        font-size: 27px !important;
    }
}

@media only screen and (max-width: 650px) {

    .contact-faq-section {
        background: #262b49 !important;
    }

}

/* ========================================
   ABOUT MISSION — MOBILE BACKGROUND FIX
======================================== */

@media only screen and (max-width: 600px) {

    .about-mission-section {
        background: #262b49 !important;
    }

    .about-values-section {
        background: #262b49 !important;
    }

    .about-experience-section {
        background: #262b49 !important;
    }

}




/* =========================================
   SERVICES HERO — MOBILE ONLY
   ========================================= */

@media only screen and (max-width: 600px) {

    .services-page-hero {
        min-height: 620px !important;
        height: auto !important;
        padding: 90px 20px 70px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        overflow: hidden !important;
    }

    .services-page-hero .hero-video {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
    }

    .services-page-hero .hero-overlay {
        position: absolute !important;
        inset: 0 !important;
    }

    .services-page-hero .container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 auto !important;
        position: relative !important;
        z-index: 2 !important;
    }

    .services-page-hero-content {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }

    .services-page-hero-content h1 {
        font-size: 42px !important;
        line-height: 1.08 !important;
        letter-spacing: -1px !important;
        margin: 0 auto 18px !important;
    }

    .services-page-hero-content p {
        max-width: 100% !important;
        margin: 0 auto !important;
        font-size: 16px !important;
        line-height: 1.65 !important;
    }
}



/* =========================================================
   SERVICES PAGE — FINAL MOBILE FIX
   ========================================================= */

@media only screen and (max-width: 600px) {

    .service-feature-section {
        width: 92% !important;
        margin: 20px auto !important;
        padding: 55px 20px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .service-feature-section > .container,
    .service-feature-section.service-feature-reverse > .container {
        width: 100% !important;
        max-width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 35px !important;
    }

    .service-feature-section.service-feature-reverse .service-feature-content,
    .service-feature-section.service-feature-reverse .service-feature-visual {
        order: initial !important;
    }

    .service-feature-content {
        width: 100% !important;
        max-width: 100% !important;
    }

    .service-feature-content h2 {
        font-size: 34px !important;
        line-height: 1.1 !important;
    }

    .service-feature-content p {
        font-size: 15px !important;
        line-height: 1.7 !important;
    }

    .service-feature-visual {
        width: 100% !important;
        min-height: 250px !important;
    }

    .service-feature-icon {
        width: 190px !important;
        height: 190px !important;
        overflow: hidden !important;
    }

    .service-feature-icon img {
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        object-fit: cover !important;
    }

}





/* ==========================================
   MOBILE LOGGED-IN ACTIONS
   SAME STYLE AS DESKTOP
   ========================================== */

@media only screen and (max-width: 768px) {

    .site-header .nav-actions .account-btn,
    .site-header .nav-actions .logout-btn {

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

        height: 42px !important;

        min-width: 0 !important;
        width: auto !important;

        padding: 0 12px !important;
        margin: 0 !important;

        border: 1px solid #cbd7d7 !important;
        border-radius: 8px !important;

        background: #ffffff !important;
        color: #263238 !important;

        font-size: 14px !important;
        font-weight: 600 !important;

        line-height: 1 !important;
        white-space: nowrap !important;

        flex: 0 0 auto !important;
        box-sizing: border-box !important;
    }

    /* Keep the two buttons together */
    .site-header .nav-actions {
        gap: 6px !important;
    }
}


/* ==========================================
   SMALL PHONES
   ========================================== */

@media only screen and (max-width: 480px) {

    .site-header .nav-actions .account-btn,
    .site-header .nav-actions .logout-btn {

        height: 38px !important;

        padding: 0 9px !important;

        font-size: 12px !important;

        border-radius: 7px !important;
    }

    .site-header .nav-actions {
        gap: 5px !important;
    }
}



/* =========================================================
   PATIENT APPOINTMENTS
   MOBILE — KEEP DESKTOP DESIGN
   ========================================================= */

@media only screen and (max-width: 600px) {

    /* Keep the same overall desktop-style spacing */
    .booking-section {
        padding: 65px 0 75px !important;
    }

    /* Keep header styling close to desktop */
    .booking-header {
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: 20px !important;
    }

    .booking-header h1 {
        font-size: 36px !important;
        line-height: 1.1 !important;
    }

    .booking-header p {
        font-size: 15px !important;
    }

    /* Desktop-style cards */
    .booking-form-card,
    .booking-info-card {
        padding: 25px !important;
        border-radius: 20px !important;
    }

    .booking-card-heading h2,
    .booking-info-card h2 {
        font-size: 26px !important;
    }

    /* Keep appointment slots in the same compact grid */
    .appointment-slots {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    /* Keep history cards visually consistent */
    .appointment-history-card {
        grid-template-columns: 58px minmax(0, 1fr) !important;
        gap: 14px !important;
        padding: 15px !important;
    }

    .appointment-date-box {
        width: 58px !important;
        height: 58px !important;
    }

    .appointment-date-box strong {
        font-size: 20px !important;
    }

    /* Keep booking image desktop styling */
    .booking-form-image {
        height: 320px !important;
        border-radius: 22px !important;
    }
}





/* =========================================================
   PATIENT PRESCRIPTIONS
   MOBILE VIEW — DESKTOP STYLE
   ========================================================= */

@media only screen and (max-width: 600px) {

    /* Main page spacing */
    .dashboard-main {
        padding-top: 40px !important;
        padding-bottom: 60px !important;
    }

    .dashboard-main > .container {
        width: 92% !important;
        max-width: 92% !important;
        margin: 0 auto !important;
    }


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

    .prescriptions-page-header {
        display: flex !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
        flex-direction: row !important;
        gap: 15px !important;
        margin-bottom: 25px !important;
    }

    .prescriptions-page-header > div {
        min-width: 0 !important;
        flex: 1 !important;
    }

    .prescriptions-page-header h2 {
        font-size: 27px !important;
        line-height: 1.2 !important;
        margin: 7px 0 8px !important;
    }

    .prescriptions-page-header p {
        font-size: 13px !important;
        line-height: 1.6 !important;
        margin: 0 !important;
    }

    .prescriptions-page-header .admin-count {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        font-size: 11px !important;
        padding: 8px 11px !important;
    }


    /* =========================
       PRESCRIPTION LIST
       ========================= */

    .patient-prescription-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
        width: 100% !important;
    }


    /* =========================
       PRESCRIPTION CARD
       ========================= */

    .patient-prescription-card {
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 21px !important;
        border-radius: 20px !important;
        overflow: hidden !important;
    }


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

    .patient-prescription-header {
        display: flex !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
        flex-direction: row !important;
        gap: 12px !important;
        padding-bottom: 19px !important;
    }


    /* =========================
       DOCTOR INFORMATION
       ========================= */

    .patient-prescription-doctor {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        min-width: 0 !important;
        flex: 1 !important;
    }

    .patient-prescription-doctor .admin-avatar {
        width: 50px !important;
        height: 50px !important;
        min-width: 50px !important;
        flex-basis: 50px !important;
        flex-shrink: 0 !important;
        border-radius: 14px !important;
        font-size: 17px !important;
    }

    .patient-prescription-doctor > div:last-child {
        min-width: 0 !important;
    }

    .patient-prescription-doctor strong {
        display: block !important;
        font-size: 15px !important;
        line-height: 1.35 !important;
        margin-bottom: 4px !important;
        word-break: break-word !important;
    }

    .patient-prescription-doctor span,
    .patient-prescription-doctor small {
        display: block !important;
        font-size: 12px !important;
        line-height: 1.5 !important;
    }


    /* =========================
       PRESCRIPTION DATE
       ========================= */

    .patient-prescription-date {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;
        flex-shrink: 0 !important;
        width: auto !important;
        text-align: right !important;
        gap: 4px !important;
    }

    .patient-prescription-date span {
        font-size: 10px !important;
    }

    .patient-prescription-date strong {
        font-size: 12px !important;
        white-space: nowrap !important;
    }


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

    .patient-prescription-meta {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
        padding: 20px 0 !important;
        margin-top: 0 !important;
    }

    .patient-prescription-meta > div {
        min-width: 0 !important;
        padding: 13px 15px !important;
        box-sizing: border-box !important;
    }

    .patient-prescription-meta span {
        font-size: 10px !important;
        margin-bottom: 5px !important;
    }

    .patient-prescription-meta strong {
        display: block !important;
        font-size: 12px !important;
        line-height: 1.5 !important;
        word-break: break-word !important;
    }


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

    .patient-prescription-content {
        margin-top: 0 !important;
        padding: 17px !important;
        border-radius: 14px !important;
        box-sizing: border-box !important;
    }

    .patient-prescription-content h3 {
        font-size: 15px !important;
        line-height: 1.3 !important;
        margin: 0 0 12px !important;
    }

    .prescription-text {
        padding: 0 !important;
        font-size: 13px !important;
        line-height: 1.75 !important;
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
    }


    /* =========================
       EMPTY STATE
       ========================= */

    .admin-empty-state {
        padding: 30px 20px !important;
        text-align: center !important;
    }

    .admin-empty-state h3 {
        font-size: 21px !important;
    }

    .admin-empty-state p {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }
}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media only screen and (max-width: 400px) {

    .dashboard-main > .container {
        width: 94% !important;
        max-width: 94% !important;
    }

    .prescriptions-page-header h2 {
        font-size: 27px !important;
    }

    .prescriptions-page-header {
        gap: 10px !important;
    }

    .prescriptions-page-header .admin-count {
        font-size: 10px !important;
    }

    .patient-prescription-header {
        padding: 17px !important;
        gap: 10px !important;
    }

    .patient-prescription-doctor {
        gap: 9px !important;
    }

    .patient-prescription-doctor .admin-avatar {
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
    }

    .patient-prescription-date strong {
        font-size: 11px !important;
    }

    .patient-prescription-meta {
        padding: 14px 17px !important;
        gap: 10px !important;
    }

    .patient-prescription-content {
        padding: 17px !important;
    }
}







/* =========================================================
   PRESCRIPTIONS HERO — MOBILE ONLY
   ========================================================= */

@media only screen and (max-width: 600px) {

    .dashboard-header {
        position: relative !important;
        overflow: hidden !important;

        margin: 0 !important;
        padding: 34px 0 26px !important;

        background:
            radial-gradient(
                circle at 90% 15%,
                rgba(83, 178, 171, 0.18),
                transparent 38%
            ),
            linear-gradient(
                135deg,
                #102f3f 0%,
                #173b4d 55%,
                #155b5b 100%
            ) !important;

        border-bottom-left-radius: 30px !important;
        border-bottom-right-radius: 30px !important;

        box-shadow: 0 12px 30px rgba(16, 47, 63, 0.15) !important;
    }


    .dashboard-header::before {
        content: "" !important;

        position: absolute !important;

        width: 180px !important;
        height: 180px !important;

        right: -70px !important;
        top: -90px !important;

        border-radius: 50% !important;

        background: rgba(255, 255, 255, 0.06) !important;

        pointer-events: none !important;
    }


    .dashboard-header::after {
        content: "" !important;

        position: absolute !important;

        width: 130px !important;
        height: 130px !important;

        left: -65px !important;
        bottom: -85px !important;

        border-radius: 50% !important;

        background: rgba(93, 203, 194, 0.08) !important;

        pointer-events: none !important;
    }


    .dashboard-header-inner {
        position: relative !important;
        z-index: 2 !important;

        display: flex !important;
        align-items: flex-start !important;
        flex-direction: column !important;

        gap: 18px !important;
    }


    /* Patient Portal */
    .dashboard-header .dashboard-eyebrow {
        display: inline-flex !important;

        margin-bottom: 8px !important;

        padding: 6px 11px !important;

        border: 1px solid rgba(255, 255, 255, 0.16) !important;
        border-radius: 30px !important;

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

        color: #9edbd6 !important;

        font-size: 10px !important;
        font-weight: 700 !important;

        letter-spacing: 1px !important;
        text-transform: uppercase !important;
    }


    /* My Prescriptions */
    .dashboard-header .dashboard-title {
        margin: 0 !important;

        color: #ffffff !important;

        font-size: 38px !important;
        line-height: 1.05 !important;

        letter-spacing: -1.2px !important;
    }


    /* Dashboard / Appointments / Medical Reports */
    .dashboard-header-actions {
        display: flex !important;
        align-items: center !important;

        width: 100% !important;

        gap: 7px !important;

        padding: 0 !important;

        border: 0 !important;

        background: transparent !important;

        overflow-x: auto !important;

        scrollbar-width: none !important;
    }

    .dashboard-header-actions::-webkit-scrollbar {
        display: none !important;
    }


    .dashboard-header .dashboard-nav-link {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        flex-shrink: 0 !important;

        min-height: 38px !important;

        padding: 0 13px !important;

        border: 1px solid rgba(255, 255, 255, 0.18) !important;
        border-radius: 10px !important;

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

        color: rgba(255, 255, 255, 0.92) !important;

        font-size: 11px !important;
        font-weight: 700 !important;

        white-space: nowrap !important;
    }


    .dashboard-header .dashboard-logout {
        display: none !important;
    }


    /* Remove the large empty space below hero */
    .dashboard-main {
        padding-top: 28px !important;
    }
}






/* =========================================================
   PROFILE PAGE — MOBILE
   KEEP DESKTOP DESIGN / STYLE
   ========================================================= */

@media only screen and (max-width: 650px) {

    /* Main profile area */
    main {
        width: 100% !important;
        background: #f3faf8 !important;
        padding: 0 !important;
    }


    /* Profile grid */
    .patient-profile-grid {
        display: flex !important;
        flex-direction: column !important;

        width: calc(100% - 30px) !important;
        max-width: none !important;

        margin: 35px auto 70px !important;

        gap: 22px !important;
    }


    /* IMPORTANT:
       Keep same order as desktop.
       Form first, account second.
    */
    .patient-profile-form-card {
        order: 1 !important;

        width: 100% !important;
        box-sizing: border-box !important;

        padding: 28px !important;

        border-radius: 26px !important;

        background: #a0ccc6 !important;

        border: 1px solid #dfece8 !important;

        box-shadow:
            0 18px 50px rgba(23, 50, 77, 0.065) !important;
    }


    /* Profile heading */
    .patient-card-heading {
        margin-bottom: 28px !important;
    }

    .patient-card-heading h2 {
        font-size: 27px !important;
        line-height: 1.2 !important;
    }

    .patient-card-heading p {
        font-size: 13px !important;
        line-height: 1.7 !important;
    }


    /* Form */
    .patient-profile-form {
        width: 100% !important;
        gap: 18px !important;
    }


    /* Keep the desktop two-column field design
       where there is enough room */
    .patient-profile-form .form-row {
        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr) !important;

        gap: 12px !important;
    }


    .patient-profile-form .form-group {
        min-width: 0 !important;
        gap: 7px !important;
    }


    .patient-profile-form .form-group label {
        font-size: 11px !important;
    }


    .patient-profile-form input,
    .patient-profile-form select {
        width: 100% !important;
        height: 48px !important;

        box-sizing: border-box !important;

        padding: 0 12px !important;

        font-size: 13px !important;
    }


    .patient-profile-form textarea {
        width: 100% !important;
        box-sizing: border-box !important;

        min-height: 105px !important;

        padding: 12px !important;

        font-size: 13px !important;
    }


    .patient-profile-form .field-note {
        font-size: 10px !important;
        line-height: 1.5 !important;
    }


    /* Emergency divider */
    .patient-form-divider {
        gap: 10px !important;
        margin: 10px 0 2px !important;
    }

    .patient-form-divider span {
        font-size: 10px !important;
        white-space: nowrap !important;
    }


    /* Save button */
    .profile-save-button {
        width: auto !important;

        min-height: 48px !important;

        padding: 0 22px !important;

        align-self: flex-start !important;
    }


    /* Account card
       Same visual style as desktop */
    .patient-account-card {
        order: 2 !important;

        position: relative !important;

        top: auto !important;

        width: 100% !important;
        box-sizing: border-box !important;

        padding: 28px !important;

        border-radius: 26px !important;

        background: #a0ccc6 !important;

        border: 1px solid #dfece8 !important;

        box-shadow:
            0 18px 50px rgba(23, 50, 77, 0.065) !important;
    }


    .patient-avatar {
        width: 76px !important;
        height: 76px !important;

        margin: 20px 0 18px !important;

        border-radius: 22px !important;

        font-size: 28px !important;
    }


    .patient-account-card h2 {
        font-size: 25px !important;
        line-height: 1.2 !important;
    }


    .patient-account-card > p {
        font-size: 12px !important;
    }


    .account-summary-list {
        gap: 14px !important;

        margin-top: 25px !important;

        padding-top: 22px !important;
    }


    .account-summary-list div {
        padding: 12px !important;
    }


    .account-summary-list span {
        font-size: 9px !important;
    }


    .account-summary-list strong {
        font-size: 12px !important;
        line-height: 1.5 !important;
    }


    .account-dashboard-button {
        min-height: 46px !important;

        margin-top: 22px !important;

        font-size: 12px !important;

        background: #126b68;

    color: #ffffff !important;
    }
}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media only screen and (max-width: 420px) {

    .patient-profile-grid {
        width: calc(100% - 24px) !important;
        margin-top: 28px !important;
    }


    .patient-profile-form-card,
    .patient-account-card {
        padding: 22px !important;
        border-radius: 22px !important;
    }


    /* On very narrow phones, fields become one-per-row
       so nothing gets squeezed or overflows. */
    .patient-profile-form .form-row {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }


    .patient-card-heading h2 {
        font-size: 24px !important;
    }


    .patient-card-heading p {
        font-size: 12px !important;
    }


    .profile-save-button {
        width: 100% !important;
        background: #126b68 !important;

    color: #ffffff !important;
    }


    .patient-avatar {
        width: 70px !important;
        height: 70px !important;
        border-radius: 20px !important;
    }


    .patient-account-card h2 {
        font-size: 23px !important;
    }
}