@media (max-width: 1199px) {


    .hero-section h1 {

        font-size:48px;

    }


    .section-title h2 {

        font-size:36px;

    }


    .nav-link {

        margin:0 5px;

    }


    .appointment-card {

        right:0;

    }


}




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


@media (max-width: 991px) {


    section {

        padding:70px 0;

    }



    .top-header {

        display:none;

    }



    .medical-navbar {

        padding:12px 0;

    }



    .hero-section {

        text-align:center;

    }



    .hero-section h1 {

        font-size:42px;

    }



    .hero-buttons {

        justify-content:center;

    }



    .hero-features {

        justify-content:center;

    }



    .hero-image-wrapper {

        margin-top:50px;

    }



    .experience-card {

        left:20px;

        bottom:20px;

    }



    .appointment-card {

        top:20px;

        right:20px;

    }



    .about-section .section-title {

        margin-top:40px;

    }



    .telemedicine-content {

        margin-bottom:40px;

    }



    .appointment-wrapper {

        text-align:center;

    }



    .appointment-wrapper .text-lg-end {

        text-align:center!important;

        margin-top:25px;

    }



    .contact-box h2 {

        font-size:32px;

    }



}




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


@media (max-width: 767px) {



    html,
    body {
        overflow-x: hidden !important;
        max-width: 100% !important;
        width: 100% !important;
    }



    section {

        padding:0px 0;

    }



    .section-title h2 {

        font-size:30px;

    }



    .section-title p {

        font-size:15px;

    }




    /* Navbar */


    .brand-wrapper h5 {

        font-size:16px;

    }



    .brand-wrapper small {

        font-size:11px;

    }



    .doctor-logo {

        width:40px;

        height:40px;

        font-size:20px;

    }




    /* Hero */


    .hero-section h1 {

        font-size:34px;

        line-height:1.25;

    }



    .hero-section p {

        font-size:16px;

    }



    .hero-buttons {

        flex-direction:column;

    }



    .hero-buttons .btn {

        width:100%;

    }



    .hero-features {

        flex-direction:column;

        align-items:center;

    }




    .doctor-image {

        border-radius:20px;

    }



    .experience-card {

        padding:15px;

    }



    .experience-card h3 {

        font-size:28px;

    }



    .appointment-card {

        padding:15px;

        font-size:13px;

    }



    .appointment-card i {

        font-size:22px;

    }





    /* Service */


    .service-card {

        padding:25px;

    }




    /* About */


    .qualification-box {

        position:relative;

        left:auto;

        bottom:auto;

        margin-top:-30px;

        margin-left:15px;

        margin-right:15px;

    }



    .detail-item {

        align-items:flex-start;

    }




    /* Statistics */


    .stat-box {

        margin-bottom:30px;

    }



    .stat-box h2 {

        font-size:38px;

    }




    /* Appointment */


    .appointment-wrapper {

        padding:35px 20px;

    }



    .appointment-wrapper h2 {

        font-size:28px;

    }




    /* Availability */


    .schedule-row {

        flex-direction:column;

        gap:8px;

    }




    /* Telemedicine */


    .video-status {

        left:15px;

        bottom:15px;

        padding:12px 18px;

        font-size:13px;

    }





    /* Testimonials */


    .testimonial-card {

        padding:25px;

    }





    /* Blog */


    .blog-card img {

        height:200px;

    }




    /* Contact */


    .contact-box {

        padding:40px 20px;

    }



    .contact-box h2 {

        font-size:28px;

    }




    /* Footer */


    .footer {

        text-align:center;

    }


}






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


@media (max-width: 480px) {



    .hero-section h1 {

        font-size:30px;

    }



    .hero-badge {

        font-size:13px;

    }



    .appointment-card {

        display:none;

    }



    .experience-card {

        bottom:10px;

    }



    .section-title h2 {

        font-size:27px;

    }



    .btn {

        padding:12px 22px;

    }



}