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

@media (max-width: 1150px) {

    .nav-menu {
        gap: 14px;
    }

    .nav-menu a {
        font-size: 10px;
    }

    .brands-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .cars-grid {
        grid-template-columns: repeat(3, 1fr);
    }

}


@media (max-width: 950px) {

    .top-bar {
        display: none;
    }

    .nav-menu {

        display: none;

        position: absolute;

        left: 0;
        right: 0;
        top: 82px;

        padding: 25px;

        background: #080808;

        flex-direction: column;

        align-items: flex-start;

        border-top: 1px solid #222;

    }

    .nav-menu.active {
        display: flex;
    }

    .nav-actions {
        display: none;
    }

    .mobile-menu-btn {
        display: block;
    }

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

    .search-button {
        min-height: 55px;
    }

    .why-layout {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .world-layout {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .process {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .process-line {
        width: 1px;
        height: 30px;
        margin-left: 35px;
    }

}


@media (max-width: 700px) {

    .section {
        padding: 75px 0;
    }

    .hero {
        min-height: 850px;
    }

    .hero h1 {
        font-size: 48px;
        letter-spacing: -2px;
    }

    .hero-text p {
        font-size: 14px;
    }

    .hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-actions .btn {
        width: 100%;
    }

    .vehicle-search {
        margin-top: 45px;
    }

    .search-fields {
        grid-template-columns: 1fr;
    }

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

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

    .section-header-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 20px;
    }

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

    .stat:nth-child(2) {
        border-right: 0;
    }

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

}


@media (max-width: 480px) {

    .logo img {
        width: 40px;
    }
    .logo .brand {
        font-size: 16px;
    }

    .nav-menu {
        top: 70px;
    }

    .hero {
        min-height: 900px;
    }

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

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

    .search-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

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

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

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

    .stat strong {
        font-size: 34px;
    }

    .testimonial p {
        font-size: 18px;
    }

    .cta-inner {
        align-items: flex-start;
        flex-direction: column;
    }

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

    .footer-bottom .container {
        padding: 20px 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

}