/* ================= TABLET LANDSCAPE (1024px) ================= */
@media (max-width: 1024px) {

    .features-grid {

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

    }

    .testimonials-grid {

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

    }

    .contact-preview-grid {

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

    }

}


/* ================= TABLET PORTRAIT / MOBILE MENU (900px) ================= */
@media (max-width: 900px) {

    .navbar {

        position: absolute;

        top: 82px;

        left: 0;

        width: 100%;

        background: var(--white);

        padding: 25px;

        display: none;

        flex-direction: column;

        align-items: flex-start;

        border-bottom: 1px solid var(--border);

        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);

    }


    .navbar.active {

        display: flex;

    }


    .menu-toggle {

        display: block;

        cursor: pointer;

        padding: 8px;

    }


    .hero-container,
    .about-container {

        grid-template-columns: 1fr;

        gap: 50px;

    }


    .hero-image {

        order: -1;

    }


    .hero-image img {

        height: 450px;

        width: 100%;

    }


    .service-grid,
    .barber-grid {

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

    }


    .footer-grid {

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

    }

}


/* ================= MOBILE PHONES (600px) ================= */
@media (max-width: 600px) {

    .section {

        padding: 60px 0;

    }


    .hero {

        padding: 40px 0 60px;

    }


    .hero-image img {

        height: 340px;

    }


    .hero-badge {

        left: 12px;

        bottom: 15px;

        padding: 12px 16px;

    }


    .hero-info {

        gap: 18px;

        flex-wrap: wrap;

        margin-top: 35px;

    }


    .hero-buttons {

        flex-direction: column;

        width: 100%;

    }

    .hero-buttons .btn {

        width: 100%;

    }


    .service-grid,
    .barber-grid {

        grid-template-columns: 1fr;

    }

    .features-grid {

        grid-template-columns: 1fr;

    }

    .testimonials-grid {

        grid-template-columns: 1fr;

    }

    .contact-preview-grid {

        grid-template-columns: 1fr;

    }


    .section-heading {

        display: block;

    }


    .section-heading .text-link {

        display: inline-block;

        margin-top: 15px;

    }


    .about-container {

        gap: 35px;

    }


    .about-image img {

        height: 320px;

    }


    .barber-image {

        height: 340px;

    }


    .cta-container {

        flex-direction: column;

        align-items: flex-start;

        gap: 25px;

    }

    .cta-container .btn {

        width: 100%;

    }


    .footer-grid {

        grid-template-columns: 1fr;

        gap: 30px;

    }


    .footer-bottom .container {

        flex-direction: column;

        text-align: center;

        gap: 8px;

    }

}


/* ================= SMALL MOBILE (390px & 360px) ================= */
@media (max-width: 400px) {

    .nav-container {

        height: 70px;

    }

    .navbar {

        top: 70px;

        padding: 18px;

    }

    .logo {

        font-size: 17px;

    }

    .hero h1 {

        font-size: 36px;

    }

    .hero-image img,
    .about-image img,
    .barber-image {

        height: 280px;

    }

    .hero-info strong {

        font-size: 20px;

    }

    .hero-info span {

        font-size: 10px;

    }

    .btn {

        padding: 12px 18px;

        font-size: 13px;

    }

    .toast-container {

        left: 15px;

        right: 15px;

        bottom: 15px;

    }

    .toast {

        min-width: 100%;

    }

}