@media (min-width: 1400px) {

    .color-option {
        width: 32px;
        height: 32px;
    }

    .img-aboutus-index {

        width: 89%;
    }


}

@media (max-width: 1395px) {
    .color-option {
        width: 32px;
        height: 32px;
    }

    .img-aboutus-index {

        width: 89%;
    }

    .content-service h3 {
        font-size: 18px;
    }

    .contact-team-index {
        margin-bottom: 0;
    }
}

@media (max-width: 1300px) {
    .element ul {
        display: flex;
        align-items: center;
        gap: 30px;
    }
}

@media (max-width: 1200px) {

    .element ul {
        display: flex;
        align-items: center;
        gap: 18px;
    }

    .element ul li a {
        font-size: 15px;
    }

    .num-about {
        padding: 20px 20px 20px 10%;
        width: 53%;
        height: 172px;
    }

    .counter-number .counter {
        font-size: 67px;
        margin: 17px 0 0;

    }

    .hero {
        min-height: 515px;
        padding: 35px 0;
    }

    .title-test-drive h3 {
        font-size: 18px
    }

    .text-counter-number h2 {
        font-size: 18px;
        font-family: 'font_main';
        margin-bottom: 4px;
        color: var(--color-white);
    }

    .nav-bar .main-container .logo {
        width: 102px;
        height: 100px;
    }

    .content-hero h1 {
        font-size: 31px;
        margin-bottom: 20px;
    }

    .content-hero p {
        font-size: 18px;
        width: 83%;
    }

    .img-start-aboutus>img {
        height: 320px;
        width: 100%;
    }

    .footer-title {
        font-size: 16px;
    }
    .social-link {
        width: 39px;
        height: 39px;
       
        font-size: 14px;
    }
}

@media (max-width: 992px) {
    .element {
        display: none;
    }
    .top-bar .main-container {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 20px;
    }
    .contact-header {
        justify-content: center;
        display: flex;
        width: 100%;
        align-items: center;
        gap: 20px;
        text-align: center;
    }
    .hero {
        min-height: 350px;
        padding: 30px 0;
    }
    .content-hero h1 {
        font-size: 23px;
        margin-bottom: 15px;
    }

    .content-hero p {
        font-size: 15px;
        width: 83%;
    }
    .btns-header .ctm-btn {
        display: none;
    }
    #map {
        width: 100%;
        height: 300px;
    }
    .contact-header-item {
        font-size: 14px;
    }
    .contact-header-item a {
        color: var(--color-white);
        font-size: 13px;
    }
    .img-aboutus-index {
        width: 100%;
    }
    .num-about {
        padding: 10px 10px 10px 10%;
        width: 58%;
        height: 155px;
    }
    .sub-test-drive {
        position: relative;
        width: 95%;
        margin: auto;
    }
    .img-test-drive {
        height: 245px;
    }
    .menu-div {
        display: block;
    }
}

@media (max-width: 768px) {
    .certificates-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    .certificate-item img {
        height: 300px !important;
    }
    
    .certificate-title {
        font-size: 20px !important;
    }
    
    .certificate-overlay {
        padding: 20px !important;
    }
}

@media (max-width: 576px) {
    .mr-section {
        margin: 40px 0;
    }
    .pg-section {
        padding: 40px 0;
    }
    .title-start h2, .title-w h2, .title-center h2 {
        font-size: 20px;
    }
    .content-hero p {
        font-size: 13px;
        width: 95%;
    }
    .img-end-aboutus>img {
        height: 310px;
    }
    .features-service ul {
        display: flex;
        gap: 10px;
        margin-bottom: 10px;
        padding: 0;
        flex-wrap: wrap;
        list-style: none;
    }
    .color-selection {
        flex-wrap: wrap;
    }
}



/* ====================================
   Car Details Page - Responsive
   ==================================== */
@media (max-width: 1200px) {
    .gallery-main-img {
        height: 380px;
    }
    .car-info-title {
        font-size: 24px;
    }
    .price-amount {
        font-size: 20px;
    }
}

@media (max-width: 991px) {
    .car-gallery {
        position: static;
        margin-bottom: 30px;
    }
    .gallery-main-img {
        height: 350px;
    }
    .gallery-thumbs {
        grid-template-columns: repeat(6, 1fr);
    }
    .car-info-card {
        padding: 25px;
    }
}

@media (max-width: 768px) {
    .gallery-main-img {
        height: 280px;
    }
    .gallery-thumbs {
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
    }
    .gallery-thumb {
        height: 65px;
    }
    .car-info-header {
        flex-direction: column;
    }
    .car-info-title {
        font-size: 22px;
    }
    .car-specs-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .car-info-actions {
        flex-direction: column;
    }
    .car-info-btn,
    .car-info-btn-outline {
        width: 100%;
    }
    .other-car-img {
        height: 200px;
    }
    .lightbox-nav {
        width: 45px;
        height: 45px;
        font-size: 16px;
    }
    .lightbox-prev {
        right: 15px;
    }
    .lightbox-next {
        left: 15px;
    }
    .lightbox-close {
        top: 15px;
        left: 15px;
        width: 42px;
        height: 42px;
        font-size: 35px;
    }
    .lightbox-counter {
        top: 15px;
        right: 15px;
        font-size: 14px;
        padding: 6px 16px;
    }
    .lightbox-content {
        max-width: 95%;
    }
    .lightbox-thumb {
        width: 55px;
        height: 40px;
    }
}

@media (max-width: 576px) {
    .gallery-main-img {
        height: 230px;
        border-radius: 15px;
    }
    .gallery-main {
        border-radius: 15px;
    }
    .gallery-thumbs {
        grid-template-columns: repeat(3, 1fr);
    }
    .gallery-thumb {
        height: 60px;
        border-radius: 8px;
    }
    .car-info-card {
        padding: 20px;
        border-radius: 15px;
    }
    .car-info-title {
        font-size: 20px;
    }
    .price-amount {
        font-size: 18px;
    }
    .car-specs-grid {
        grid-template-columns: 1fr;
    }
    .car-spec-item {
        padding: 12px;
    }
    .other-car-content {
        padding: 18px;
    }
    .other-car-content h3 {
        font-size: 17px;
    }
    .other-price-value {
        font-size: 17px;
    }
    .other-car-specs {
        gap: 8px;
    }
    .other-car-specs span {
        font-size: 12px;
        padding: 4px 10px;
    }
}

@media (max-width: 450px) {
    .certificate-item img {
        height: 240px !important;
    }
    
    .certificate-title {
        font-size: 17px !important;
    }
    
    .certificate-icon {
        width: 60px !important;
        height: 60px !important;
    }
    
    .certificate-icon i {
        font-size: 24px !important;
    }
    
    .certificate-date {
        font-size: 13px !important;
    }
}