@media (max-width: 1024px) {

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}

@media (max-width: 768px) {

    .section {
        padding: 60px 0;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 480px) {

    .container {
        width: 94%;
    }

    .btn {
        width: 100%;
    }

}

@media (max-width: 768px) {

    .nav-links {
        display: none;
    }

    .menu-toggle {
        display: block;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

}

@media (max-width: 1024px) {

    .hero-container,
    .rider-container {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero p {
        margin-left: auto;
        margin-right: auto;
    }

    .cards-grid,
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .steps-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}

@media (max-width: 768px) {

    .hero {
        padding: 60px 0;
    }

    .hero h1 {
        font-size: 2.4rem;
    }

    .section-header h2,
    .rider-text h2,
    .final-cta h2 {
        font-size: 2rem;
    }

    .cards-grid,
    .services-grid,
    .steps-grid {
        grid-template-columns: 1fr;
    }

    .hero-buttons {
        flex-direction: column;
    }

}

@media (max-width: 480px) {

    .hero h1 {
        font-size: 2rem;
    }

    .hero-badge {
        font-size: .85rem;
    }

}

.mobile-open {

    display: flex !important;

    flex-direction: column;

    position: absolute;

    top: var(--navbar-height);

    left: 0;

    width: 100%;

    background: var(--white);

    padding: 30px;

    gap: 20px;

    box-shadow: var(--shadow);
}

/* AUTH */

@media (max-width: 768px) {

    .auth-page {
        padding: 30px 15px;
    }

    .auth-card {
        padding: 35px 25px;
        border-radius: 24px;
    }

    .auth-header h1 {
        font-size: 2rem;
    }

    .role-selector {
        flex-direction: column;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 480px) {

    .auth-card {
        padding: 28px 20px;
    }

    .auth-header h1 {
        font-size: 1.8rem;
    }

    .auth-logo {
        width: 75px;
    }

}


@media (max-width: 768px) {

    .dashboard-header {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }

    .header-left {
        flex-direction: column;
    }

    .logout-btn {
        width: 100%;
    }

}


@media (max-width: 768px) {

    .availability-card {

        flex-direction: column;

        align-items: flex-start;

    }

    .availability-btn {

        width: 100%;

    }

}