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

@media (max-width: 991px) {

    .top-social {
        display: none;
    }

    .navbar-nav {

        background: white;

        padding: 15px;

        border-radius: 12px;

        margin-top: 12px;

        box-shadow:
            0 15px 35px rgba(16,42,46,0.08);

    }

    .navbar-nav .btn-primary-custom {
        margin-top: 10px;
    }

    .hero-section {

        padding: 70px 0;

    }

    .hero-section h1 {

        font-size: 55px;

    }

    .hero-image-wrapper {

        margin-top: 60px;

        min-height: 500px;

    }

    .quick-wrapper {

        grid-template-columns: 1fr 1fr;

        gap: 25px;

    }

    .quick-item {

        border-right: none;

    }

    .section-padding {

        padding: 80px 0;

    }

    .appointment-box {

        padding: 40px 25px;

    }

}


@media (max-width: 767px) {

    .top-bar {
        display: none;
    }

    .hero-section {

        padding: 55px 0 70px;

    }

    .hero-section h1 {

        font-size: 45px;

        letter-spacing: -2px;

    }

    .hero-description {

        font-size: 15px;

    }

    .hero-buttons {

        display: block;

    }

    .hero-buttons .btn {

        width: 100%;

        margin: 5px 0;

    }

    .btn-outline-custom {
        margin-left: 0;
    }

    .hero-trust {

        justify-content: space-between;

    }

    .trust-line {

        margin: 0 10px;

    }

    .hero-image-wrapper {

        min-height: 420px;

        margin-top: 30px;

    }

    .hero-circle {

        width: 320px;
        height: 320px;

    }

    .hero-doctor {

        width: 290px;
        height: 380px;

    }

    .experience-card {

        left: 0;

        top: 30px;

        transform: scale(0.85);

        transform-origin: left top;

    }

    .patient-card {

        right: 0;

        bottom: 20px;

        transform: scale(0.85);

        transform-origin: right bottom;

    }

    .quick-info {

        margin-top: 0;

        padding-top: 25px;

    }

    .quick-wrapper {

        grid-template-columns: 1fr;

        padding: 20px;

    }

    .quick-item {

        padding: 10px 0;

        border-bottom: 1px solid #e8eeee;

    }

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

    .about-image {

        padding-right: 0;

    }

    .about-image img {

        height: 400px;

    }

    .about-experience {

        right: 15px;

    }

    .about-points {

        grid-template-columns: 1fr;

    }

    .section-title {

        font-size: 35px;

    }

    .doctor-image {

        height: 400px;

    }

    .appointment-box h2 {

        font-size: 30px;

    }

    .appointment-form {

        padding: 20px;

    }

    .doctor-note {

        left: 10px;

    }

    .why-image > img {

        height: 420px;

    }

    .footer-bottom {

        display: block;

    }

    .footer-bottom div {

        margin-top: 10px;

    }

}


@media (max-width: 400px) {

    .hero-section h1 {
        font-size: 39px;
    }

    .hero-circle {
        width: 285px;
        height: 285px;
    }

    .hero-doctor {
        width: 255px;
        height: 345px;
    }

    .hero-image-wrapper {
        min-height: 390px;
    }

}


@media (max-width: 576px) {

    .loader-heart {

        width: 62px;
        height: 62px;

        font-size: 28px;

        border-radius: 18px;

    }

    .loader-content h5 {

        font-size: 18px;

    }

}

@media (max-width: 767px) {

    .floating-actions {

        right: 14px;

        bottom: 16px;

        gap: 9px;

    }


    .floating-btn {

        width: 46px;

        height: 46px;

        font-size: 18px;

    }


    .floating-btn::before,
    .floating-btn::after {

        display: none;

    }

}


@media (max-width: 991px) {

    .clinic-cta {

        padding: 55px 40px;

    }

    .cta-info-card {

        margin-top: 45px;

    }

}


@media (max-width: 576px) {

    .clinic-cta-section {

        padding: 60px 0 70px;

    }

    .clinic-cta {

        padding: 42px 24px;

        border-radius: 24px;

    }

    .clinic-cta h2 {

        font-size: 34px;

        letter-spacing: -1px;

    }

    .clinic-cta p {

        font-size: 13px;

    }

    .cta-buttons {

        align-items: stretch;

        flex-direction: column;

        gap: 14px;

    }

    .cta-primary-btn {

        justify-content: center;

    }

    .cta-call-btn {

        justify-content: center;

    }

    .cta-info-card {

        margin-top: 35px;

    }

}