/*=============================================================
RESPONSIVE - Harley-Davidson Antalya
=============================================================*/

@media (max-width: 1399.98px) {
    .hero-content h1 {
        font-size: 3.2rem;
    }
}

@media (max-width: 1199.98px) {
    .hero-content h1 {
        font-size: 2.8rem;
    }

    .topbar-left span {
        font-size: 0.85rem;
    }
}

@media (max-width: 991.98px) {
    .topbar {
        display: none;
    }

    .hero-content h1 {
        font-size: 2.4rem;
    }

    .hero-content p {
        font-size: 0.95rem;
        max-width: 90%;
    }

    .service-image,
    .rental-image {
        margin-bottom: 2rem;
    }

    .map-area iframe {
        height: 320px;
    }

    .footer-widget {
        text-align: center;
    }

    .footer-logo {
        margin: 0 auto 1rem;
    }
}

@media (max-width: 767.98px) {
    .heroSlider {
        height: 70vh;
        min-height: 480px;
    }

    .hero-content h1 {
        font-size: 1.9rem;
        line-height: 1.15;
    }

    .hero-content p {
        font-size: 0.9rem;
        margin-bottom: 1.5rem;
    }

    .hero-buttons {
        flex-direction: column;
        gap: 0.75rem;
    }

    .hero-buttons a {
        width: 100%;
        text-align: center;
    }

    .model-navigation-wrapper {
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 0.75rem;
        padding-bottom: 0.5rem;
        -webkit-overflow-scrolling: touch;
    }

    .model-item {
        flex: 0 0 auto;
        min-width: 140px;
        padding: 0.75rem 1rem;
    }

    .model-item span {
        font-size: 0.7rem;
    }

    .motorcycle-card h3 {
        font-size: 0.95rem;
    }

    .price {
        font-size: 0.9rem;
    }

    .section-title h2 {
        font-size: 1.6rem;
    }

    #backToTop {
        width: 42px;
        height: 42px;
        bottom: 90px;
        right: 16px;
    }

    #whatsapp {
        width: 52px;
        height: 52px;
        bottom: 20px;
        right: 16px;
        font-size: 1.5rem;
    }
}

@media (max-width: 575.98px) {
    .hero-content h1 {
        font-size: 1.6rem;
    }

    .col-6 .motorcycle-card {
        padding: 0.75rem;
    }

    .color-options {
        gap: 0.35rem;
    }

    .color {
        width: 16px;
        height: 16px;
    }
}