/* =========================
   GLOBAL RESPONSIVE
========================= */

@media (max-width: 1200px) {

    .container {
        width: min(100% - 40px, 1100px);
    }

}


/* =========================
   TABLET
========================= */

@media (max-width: 1024px) {

    .header-container {
        gap: 18px;
    }

    .rline-logo {
        height: 60px;
    }

    .hero {
        min-height: 800px;
        background-position: center center;
    }

    .hero h1 {
        font-size: clamp(44px, 7vw, 64px);
    }

    @media (max-width: 1024px) {

    .vehicle-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .vehicle-card {
        width: 100%;
        max-width: 650px;
        margin-left: auto;
        margin-right: auto;
    }

}

    .about-intro-grid,
    .why-rline-grid,
    .contact-layout,
    .sell-vehicle-layout,
    .vehicle-detail-layout,
    .vehicle-detail-content-grid {
        grid-template-columns: 1fr;
    }

}


/* =========================
   MOBILE
========================= */

/* =========================
   MOBILE HAMBURGER
========================= */

@media (max-width: 768px) {

    .menu-button {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        width: 44px;
        height: 44px;

        padding: 0;

        gap: 6px;

        background: transparent;
        border: none;

        cursor: pointer;

        flex-shrink: 0;

        z-index: 1001;
    }

    .menu-button span {
        display: block;

        width: 27px;
        height: 2px;

        margin: 0;

        background: #ffffff;

        border-radius: 2px;

        transition:
            transform 0.25s ease,
            opacity 0.25s ease;
    }

}


/* =========================
   SMALL MOBILE
========================= */

@media (max-width: 480px) {

    .container {
        width: calc(100% - 20px);
    }

    .rline-logo {
        height: 44px;
    }

    .hero {
        min-height: 620px;
    }

    .hero-content {
        padding-top: 105px;
        padding-bottom: 100px;
    }

    .hero h1 {
        font-size: 38px;
    }

    .page-hero {
        padding:
            105px 0 50px;
    }

    .page-hero h1 {
        font-size: 36px;
    }

    .button,
    .sell-submit-button,
    .detail-whatsapp-button,
    .detail-contact-button,
    .contact-whatsapp-button {
        width: 100%;
    }

    .map-container iframe {
        height: 290px;
    }

}