/*=========================================
        <= 1100px
=========================================*/

@media (max-width:1100px){

    .nav-menu{

        gap:1.25rem;

    }

    .nav-btn{

        padding:12px 18px;

    }

    .hero-content h1{

        font-size:3rem;

    }

}

/*=========================================
        <= 992px
=========================================*/

@media (max-width:992px){

    .container{

        width:min(92%,720px);

    }

    .hero{

        padding:125px 0 80px;

    }

    .hero-container,
    .about-container,
    .appointment-container,
    .contact-container{

        grid-template-columns:1fr;

    }

    .hero-container{

        text-align:center;
        gap:3rem;

    }

    .hero-buttons,
    .hero-stats{

        justify-content:center;

    }

    .hero-buttons{

        flex-wrap:wrap;

    }

    .hero-content h1,
    .about-content h2,
    .appointment-content h2,
    .section-title{

        font-size:2.45rem;

    }

    .hero-image{

        width:min(100%,440px);
        margin:0 auto;

    }

    .hero-image::before{

        width:min(78vw,360px);
        height:min(78vw,360px);

    }

    .card-one{

        left:0;

    }

    .card-two{

        right:0;

    }

    .trusted-logos,
    .services-grid,
    .doctors-grid,
    .testimonial-grid,
    .choose-grid{

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

    }

    .about-content,
    .appointment-content{

        text-align:center;

    }

    .about-features{

        grid-template-columns:1fr;

    }

    .experience-card{

        right:20px;

    }

    .footer-container{

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

    }

}

/*=========================================
        <= 768px
=========================================*/

@media (max-width:768px){

    .container{

        width:min(92%,560px);

    }

    .navbar{

        height:72px;

    }

    .logo{

        font-size:1.25rem;

    }

    .logo i{

        font-size:1.45rem;

    }

    .nav-btn{

        display:none;

    }

    .nav-toggle{

        display:flex;
        align-items:center;
        justify-content:center;
        width:42px;
        height:42px;
        border-radius:50%;
        color:var(--primary);

    }

    .nav-menu{

        position:fixed;
        top:72px;
        right:-100%;
        width:min(82vw,320px);
        height:calc(100vh - 72px);
        padding:28px;
        background:var(--white);
        flex-direction:column;
        align-items:flex-start;
        gap:1.25rem;
        box-shadow:-16px 20px 40px rgba(15,23,42,.12);
        transition:right .3s ease;

    }

    .nav-menu.active{

        right:0;

    }

    .nav-link{

        display:block;
        width:100%;
        padding:10px 0;

    }

    .hero{

        padding:110px 0 64px;

    }

    .hero-content h1{

        font-size:2.25rem;

    }

    .hero-content p,
    .section-description{

        font-size:.98rem;
        line-height:1.7;

    }

    .hero-buttons{

        flex-direction:column;
        align-items:stretch;
        width:100%;

    }

    .hero-buttons .btn{

        width:100%;

    }

    .hero-stats{

        display:grid;
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:16px;

    }

    .hero-stats h3{

        font-size:1.55rem;

    }

    .hero-stats span{

        font-size:.86rem;

    }

    .hero-image img{

        max-width:330px;

    }

    .floating-card{

        gap:10px;
        padding:12px 14px;
        border-radius:14px;

    }

    .floating-card i{

        width:42px;
        height:42px;
        font-size:1rem;

    }

    .floating-card h4{

        font-size:.9rem;

    }

    .floating-card span{

        font-size:.76rem;

    }

    .trusted,
    .about,
    .services,
    .doctors,
    .appointment,
    .testimonials,
    .faq,
    .contact,
    .why-choose{

        padding:70px 0;

    }

    .section-title,
    .about-content h2,
    .appointment-content h2{

        font-size:2rem;

    }

    .section-description{

        margin-bottom:40px;

    }

    .appointment-form{

        padding:28px;

    }

    .contact-container{

        margin-top:40px;

    }

    .map-placeholder{

        min-height:320px;

    }

}

/*=========================================
        <= 576px
=========================================*/

@media (max-width:576px){

    .container{

        width:calc(100% - 32px);

    }

    .btn{

        width:100%;
        padding:13px 18px;
        border-radius:14px;

    }

    .hero-tag,
    .section-tag{

        max-width:100%;
        justify-content:center;
        border-radius:14px;
        font-size:.9rem;

    }

    .hero-content h1{

        font-size:2rem;

    }

    .hero-buttons{

        margin-bottom:36px;

    }

    .hero-stats{

        grid-template-columns:1fr;
        gap:18px;

    }

    .hero-image{

        width:100%;
        padding:0 8px;

    }

    .hero-image img{

        max-width:280px;

    }

    .hero-image::before{

        width:min(72vw,270px);
        height:min(72vw,270px);

    }

    .floating-card{

        position:static;
        width:100%;
        max-width:260px;
        margin:14px auto 0;
        justify-content:flex-start;

    }

    .trusted-logos,
    .services-grid,
    .doctors-grid,
    .testimonial-grid,
    .choose-grid,
    .footer-container{

        grid-template-columns:1fr;

    }

    .trusted-title,
    .section-title,
    .about-content h2,
    .appointment-content h2{

        font-size:1.75rem;

    }

    .about-container,
    .appointment-container,
    .contact-container{

        gap:36px;

    }

    .about-image img{

        border-radius:16px;

    }

    .experience-card{

        right:12px;
        bottom:12px;
        padding:16px;
        border-radius:14px;

    }

    .experience-card h2{

        font-size:1.5rem;

    }

    .feature{

        align-items:flex-start;

    }

    .service-card,
    .testimonial-card,
    .choose-card,
    .doctor-content,
    .appointment-form{

        padding:24px 20px;
        border-radius:16px;

    }

    .doctor-card img{

        height:280px;

    }

    .faq-question{

        gap:16px;
        padding:20px;

    }

    .faq-question h3{

        font-size:1rem;

    }

    .faq-answer p{

        padding:0 20px 20px;

    }

    .contact-card{

        gap:14px;
        padding:20px;
        border-radius:16px;

    }

    .contact-card i{

        width:46px;
        height:46px;
        flex:0 0 46px;
        font-size:1rem;

    }

    .footer{

        padding-top:64px;

    }

    .footer-container{

        text-align:center;

    }

    .footer-about .logo,
    .footer-social{

        justify-content:center;

    }

    .back-to-top{

        right:18px;
        bottom:18px;
        width:46px;
        height:46px;

    }

}

/*=========================================
        <= 380px
=========================================*/

@media (max-width:380px){

    .container{

        width:calc(100% - 24px);

    }

    .hero-content h1{

        font-size:1.75rem;

    }

    .trusted-title,
    .section-title,
    .about-content h2,
    .appointment-content h2{

        font-size:1.55rem;

    }

    .appointment-form,
    .service-card,
    .testimonial-card,
    .choose-card,
    .contact-card{

        padding:20px 16px;

    }

}