/* =========================================================
   Global Responsive Fixes
========================================================= */

@media(max-width: 1200px) {

    .container {
        width: 92%;
    }

}

/* =========================================================
   Tablet
========================================================= */

@media(max-width: 1000px) {

    .hero h2,
    .about-hero-content h1,
    .contact-hero-content h1,
    .sell-hero-content h1,
    .test-drive-hero-content h1 {
        font-size: 52px;
    }

    .hero p,
    .about-hero-content p,
    .contact-hero-content p,
    .sell-hero-content p,
    .test-drive-hero-content p {
        font-size: 18px;
    }

    .vehicle-grid,
    .trust-grid,
    .about-stats,
    .payment-options-grid,
    .contact-gallery-grid,
    .favourites-grid,
    .compare-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .single-vehicle-header,
    .finance-box,
    .finance-calculator-box,
    .about-intro-grid,
    .about-building-grid,
    .contact-layout,
    .sell-form-layout,
    .test-drive-layout {
        grid-template-columns: 1fr;
    }

    .stock-layout {
        grid-template-columns: 1fr;
    }

    .stock-sidebar,
    .contact-info,
    .sell-form-copy,
    .test-drive-sidebar {
        position: relative;
        top: auto;
    }

}

/* =========================================================
   Mobile
========================================================= */

@media(max-width: 768px) {

    section {
        overflow: hidden;
    }

    .hero,
    .about-hero,
    .contact-hero,
    .sell-hero,
    .test-drive-hero {
        min-height: 60vh;
        padding: 80px 0;
    }

    .hero h2,
    .about-hero-content h1,
    .contact-hero-content h1,
    .sell-hero-content h1,
    .test-drive-hero-content h1 {
        font-size: 40px;
        line-height: 1.1;
    }

    .hero p,
    .about-hero-content p,
    .contact-hero-content p,
    .sell-hero-content p,
    .test-drive-hero-content p {
        font-size: 17px;
        line-height: 1.7;
    }

    .section-heading h1,
    .section-heading h2,
    .about-intro-content h2,
    .about-building-content h2,
    .sell-form-copy h2,
    .contact-form-box h2,
    .test-drive-form-box h2,
    .home-cta-inner h2,
    .about-cta-inner h2,
    .contact-cta-inner h2,
    .sell-cta-inner h2,
    .test-drive-cta-inner h2,
    .finance-cta-inner h2,
    .favourites-cta-inner h2,
    .compare-cta-inner h2 {
        font-size: 34px;
    }

    .vehicle-grid,
    .trust-grid,
    .about-stats,
    .sell-steps-grid,
    .payment-options-grid,
    .test-drive-steps-grid,
    .contact-gallery-grid,
    .favourites-grid,
    .compare-grid,
    .vehicle-specs,
    .form-grid,
    .test-drive-grid {
        grid-template-columns: 1fr;
    }

    .vehicle-card-buttons,
    .favourite-buttons {
        grid-template-columns: 1fr;
    }

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

    .main-vehicle-image img {
        height: 380px;
    }

    .vehicle-card h2,
    .vehicle-card h3,
    .compare-card h2,
    .favourite-content h2 {
        font-size: 24px;
    }

    .vehicle-price,
    .compare-price,
    .favourite-price {
        font-size: 32px;
    }

    .finance-price,
    .monthly-result {
        font-size: 46px;
    }

    .vehicle-action-strip {
        flex-direction: column;
    }

    .vehicle-action-strip .cta-button,
    .vehicle-action-strip .secondary-button,
    .vehicle-action-strip .save-vehicle-btn,
    .vehicle-action-strip .compare-vehicle-btn {
        width: 100%;
    }

    .stock-header h1 {
        font-size: 40px;
    }

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

    .footer-brand h2 {
        font-size: 38px;
    }

    .contact-map iframe {
        height: 380px;
    }

    .finance-calculator-section,
    .sell-form-box,
    .contact-form-box,
    .test-drive-form-box {
        padding: 28px;
    }

}

/* =========================================================
   Small Mobile
========================================================= */

@media(max-width: 480px) {

    .container {
        width: 94%;
    }

    .hero h2,
    .about-hero-content h1,
    .contact-hero-content h1,
    .sell-hero-content h1,
    .test-drive-hero-content h1 {
        font-size: 34px;
    }

    .vehicle-price,
    .compare-price,
    .favourite-price,
    .finance-price,
    .monthly-result {
        font-size: 28px;
    }

    .main-vehicle-image img {
        height: 300px;
    }

    .gallery-thumbnails {
        gap: 8px;
    }

    .gallery-thumbnails img {
        height: 90px;
    }

    .cta-button,
    .secondary-button,
    .save-vehicle-btn,
    .compare-vehicle-btn {
        width: 100%;
        text-align: center;
    }

}