/* ==========================================================================
   Responsive Styles for CabPass Redesign
   ========================================================================== */

/* Tablet and Large Mobile Landscape (max-width: 992px) */
@media (max-width: 992px) {
    h1 { font-size: 2.8rem; }
    h2 { font-size: 2.2rem; }

    /* --- Header --- */
    .topbar .main-nav {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: #fff;
        padding: 1rem;
        box-shadow: var(--shadow-md);
        gap: 1rem;
    }
    .topbar .main-nav.active {
        display: flex;
    }

    .mobile-toggle {
        display: block;
    }

    /* --- Hero Section --- */
    .hero .container {
        grid-template-columns: 1fr; /* Stack hero content on top of image */
        text-align: center;
    }
    .hero-content p {
        margin-left: auto;
        margin-right: auto;
    }
    .hero-image {
        margin-top: 3rem;
    }

    /* --- Grids --- */
    .features-grid,
    .reviews-grid {
        grid-template-columns: 1fr 1fr; /* Go from 3 columns to 2 */
    }
    .faq-grid {
        grid-template-columns: 1fr; /* Stack FAQ items */
    }
}


/* Mobile Devices (max-width: 768px) */
@media (max-width: 768px) {
    h1 { font-size: 2.2rem; }
    h2 { font-size: 1.8rem; }

    /* --- General Section Padding --- */
    .hero,
    .features-section,
    .reviews-section,
    .pricing-section,
    .faq-section,
    .standout-bg {
        padding: 4rem 0;
    }

    /* --- Header --- */
    .topbar .container {
        justify-content: space-between;
    }

    /* --- Grids --- */
    .features-grid,
    .reviews-grid {
        grid-template-columns: 1fr; /* Go from 2 columns to 1 */
    }
    
    /* --- Pricing Card --- */
    .pricing-card {
        padding: 2rem;
    }
    .price {
        font-size: 3rem;
    }

    /* --- Footer --- */
    .footer-grid {
        grid-template-columns: 1fr; /* Stack footer columns */
        text-align: center;
    }
    .footer-col {
        margin-bottom: 2rem;
    }
}