/*--------------------------------------------------------------
# Responsive
--------------------------------------------------------------*/

/* Mobile First Method */

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    .hero-title, .different-title, .packages-title, .reviews-title, .contact-title {
        font-size: 2.2rem;
    }

    .hero-description {
        font-size: 1rem;
    }

    .packages-grid,
    .contact-grid {
        grid-template-columns: 1fr;
    }
    .social-links{
        justify-content: center;
    }
    .reviews-grid {
        display: flex;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch; /* for smooth scrolling on iOS */
        padding-bottom: 1rem;
    }

    .review-card {
        flex: 0 0 98%;
        scroll-snap-align: start;
        padding: 20px;
    }
    .contact-form, .contact-info{
        padding: 20px;
    }
    .reviews-navigation .nav-dot {
        display: none; /* Hide arrows on mobile, rely on swipe */
    }

    .footer-content,
    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }
    .contact-grid{
        padding: 0;
    }
    .footer-links {
        flex-direction: column;
        align-items: center;
    }

    .footer-column {
        margin-bottom: 2rem;
        text-align: center;
    }
    
    .status-cards .position-absolute {
        position: static !important;
        margin-bottom: 1rem;
    }
    .status-card.status-open, .status-card.status-slots {
        width: 100%;
    }
    
    .different-section .row {
        flex-direction: column-reverse;
    }

    .little-speedsters-section {
        padding: 2rem 0 2rem 0;
    }
    .ls-header {
        flex-direction: column;
        gap: 0.2rem;
    }
    .ls-title {
        font-size: 2rem;
    }
    .ls-subtitle {
        font-size: 1.1rem;
    }
    .ls-highlight-row {
        flex-direction: column;
        gap: 0.2rem;
        margin: 1.2rem 0 1rem 0;
    }
    .ls-highlight-main, .ls-highlight-secondary {
        font-size: 1.1rem;
    }
    .ls-desc {
        font-size: 0.98rem;
        padding: 0 0.5rem;
    }
    .ls-btn-gradient {
        font-size: 1rem;
        padding: 0.6em 1.2em;
    }
    .ls-card-row {
        flex-direction: column;
        align-items: center;
    }
    .ls-card {
        padding: 1.2rem 0.5rem 1.5rem 0.5rem;
        max-width: 98vw;
    }
    .ls-card-header {
        font-size: 1.2rem;
    }
    .ls-card-price {
        font-size: 1.3rem;
    }
    .ls-card-age {
        font-size: 1rem;
    }
    .ls-card-desc {
        font-size: 0.95rem;
    }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) and (max-width: 767px) {
    .packages-grid {
        grid-template-columns: 1fr;
    }

    .reviews-grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch; /* for smooth scrolling on iOS */
        padding-bottom: 1rem;
    }

    .review-card {
        flex: 0 0 80%;
        scroll-snap-align: start;
        margin-right: 1rem;
    }

    .reviews-navigation .nav-arrow {
        display: none; /* Hide arrows on mobile, rely on swipe */
    }
    
    .contact-grid {
        grid-template-columns: 1fr;
    }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .packages-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .reviews-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .contact-grid {
        grid-template-columns: 1fr;
    }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    /* Styles for large devices are mostly in style.css */
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    /* Styles for extra large devices */
}