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

@media(max-width: 992px){

    /* HERO */

    .hero-container,
    .about-container,
    .reports-container,
    .appointment-container,
    .collection-container{

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

    }

    .hero-content h1{

        font-size: 48px;

    }

    .about-content h2,
    .reports-content h2,
    .appointment-form-wrapper h2,
    .collection-content h2,
    .section-header h2{

        font-size: 40px;

    }

    /* SERVICES */

    .services-grid{

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

    }

    /* PACKAGES */

    .packages-grid{

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

    }

    /* WHY CHOOSE */

    .why-grid{

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

    }

}

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

@media(max-width:768px){

    /* CONTAINER */

    .container{

        width: 92%;

    }

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

    .header{

        padding: 0;

    }

    .navbar{

        height: 75px;

    }

    /* LOGO */

    .logo h2{

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

    }

    /* NAV BUTTONS */

    .nav-buttons{

        gap: 8px;

    }

    .theme-toggle{

        width: 42px;
        height: 42px;

    }

    .btn-primary{

        padding: 12px 22px;

        font-size: 15px;

    }

    /* MENU ICON */

    .menu-toggle{

        display: block;

        font-size: 28px;

        cursor: pointer;

        z-index: 1001;

    }

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

    .nav-menu{

        position: fixed;

        top: 75px;
        left: -100%;

        width: 100%;
        height: calc(100vh - 75px);

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

        backdrop-filter: blur(15px);

        padding: 40px 30px;

        transition: 0.4s ease;

        z-index: 999;

    }

    .nav-menu.active{

        left: 0;

    }

    .nav-links{

        display: flex;
        flex-direction: column;

        gap: 28px;

    }

    .nav-links li{

        list-style: none;

    }

    .nav-links a{

        font-size: 22px;

    }

    /* DARK MODE */

    .dark-mode .nav-menu{

        background: rgba(15,23,42,0.98);

    }

    .dark-mode .nav-links a{

        color: white;

    }

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

    .hero{

        padding-top: 120px;
        min-height: auto;

    }

    .hero-container{

        gap: 40px;

    }

    .hero-badge{

        font-size: 14px;

        padding: 10px 18px;

        margin-bottom: 20px;

    }

    .hero-content h1{

        font-size: 54px;

        line-height: 1.15;

        margin-bottom: 22px;

    }

    .hero-content p{

        font-size: 17px;

        line-height: 1.8;

        margin-bottom: 30px;

    }

    /* BUTTONS */

    .hero-buttons{

        flex-direction: column;

        gap: 15px;

    }

    .btn-primary,
    .btn-secondary{

        width: 100%;

        text-align: center;

    }

    /* FEATURES */

    .hero-features{

        grid-template-columns: 1fr;

        gap: 15px;

    }

    .feature-card{

        padding: 18px;

    }

    /* IMAGES */

    .hero-image img,
    .about-image img,
    .appointment-image img,
    .collection-image img{

        border-radius: 25px;

    }

    /* STATS */

    .stats-grid{

        grid-template-columns: 1fr;

    }

    /* SERVICES */

    .services-grid{

        grid-template-columns: 1fr;

    }

    /* PACKAGES */

    .packages-grid{

        grid-template-columns: 1fr;

    }

    .featured-package{

        transform: scale(1);

    }

    /* WHY CHOOSE */

    .why-grid{

        grid-template-columns: 1fr;

    }

    /* REPORTS */

    .reports-card{

        padding: 35px 30px;

    }

    /* APPOINTMENT */

    .form-row{

        grid-template-columns: 1fr;

    }

    .appointment-form{

        padding: 35px 30px;

    }

    /* FLOATING CARD */

    .floating-card{

        left: 20px;
        right: 20px;
        bottom: 20px;

    }

}

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

@media(max-width:480px){

    /* LOGO */

    .logo h2{

        font-size: 22px;

    }

    /* HERO */

    .hero-content h1{

        font-size: 42px;

    }

    .hero-content p{

        font-size: 16px;

    }

    /* TITLES */

    .about-content h2,
    .reports-content h2,
    .appointment-form-wrapper h2,
    .collection-content h2,
    .section-header h2{

        font-size: 34px;

    }

    /* BUTTONS */

    .btn-primary,
    .btn-secondary{

        padding: 12px 18px;

        font-size: 14px;

    }

    /* SERVICE CARD */

    .service-card{

        padding: 30px 25px;

    }

    /* PACKAGE */

    .package-content h3{

        font-size: 26px;

    }

    .new-price{

        font-size: 28px;

    }

    /* WHY CARD */

    .why-card{

        padding: 35px 25px;

    }

    .why-card h3{

        font-size: 24px;

    }

    /* REPORT */

    .reports-card{

        padding: 30px 22px;

    }

    .report-feature span{

        font-size: 18px;

    }

    /* APPOINTMENT */

    .appointment-form{

        padding: 30px 22px;

    }

    /* COLLECTION */

    .collection-feature{

        flex-direction: column;

    }

    .floating-card{

        position: relative;

        left: 0;
        right: 0;
        bottom: 0;

        margin-top: 25px;

    }

}
/* =========================================
TESTIMONIAL RESPONSIVE
========================================= */

@media(max-width:992px){

    .testimonial-grid{

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

    }

}

@media(max-width:768px){

    .testimonial-grid{

        grid-template-columns: 1fr;

    }

}

@media(max-width:480px){

    .testimonial-card{

        padding: 30px 25px;

    }

}

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

@media(max-width:768px){

    .faq-question{

        padding: 24px 22px;

        gap: 20px;

    }

    .faq-question h3{

        font-size: 18px;

    }

    .faq-answer p{

        padding: 0 22px 25px;

    }

}

/* =========================================
CONTACT + FOOTER RESPONSIVE
========================================= */

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

@media(max-width:768px){

    .contact-card{

        padding: 30px 25px;

    }

    .contact-card h3{

        font-size: 24px;

    }

    .contact-card p{

        font-size: 16px;

    }

}

@media(max-width:480px){

    .contact-card{

        flex-direction: column;

        align-items: flex-start;

        gap: 20px;

    }

    .contact-card i{

        width: 70px;
        height: 70px;

        min-width: 70px;

        font-size: 28px;

    }

    .contact-card h3{

        font-size: 22px;

    }

}

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

@media(max-width:1200px){

    .footer-top{

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

    }

}

@media(max-width:992px){

    .footer-newsletter{

        flex-direction: column;

        align-items: flex-start;

    }

    .footer-newsletter form{

        width: 100%;

        max-width: 100%;

    }

}

@media(max-width:768px){

    .footer-top{

        grid-template-columns: 1fr;

    }

    .footer-newsletter{

        padding: 35px 25px;

    }

    .footer-newsletter h3{

        font-size: 28px;

    }

    .footer-newsletter form{

        flex-direction: column;

    }

}

@media(max-width:480px){

    .footer{

        padding-top: 80px;

    }

    .footer-about h2{

        font-size: 34px;

    }

    .footer-links h3,
    .footer-contact h3{

        font-size: 24px;

    }

    .footer-newsletter{

        border-radius: 25px;

    }

}