@media screen and (max-width: 767px) {
    .site-header {
        padding: 0.5rem 0rem;
    }

    .mobile-toggle span {
        vertical-align: middle;

    }

    .carousel-number-indicators {
        display: none;
    }

    .banner-border-radius-custom {
        border-top-left-radius: 50px;
    }

    .section-title span {
        font-size: 14px;
    }

    .features {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    }

    .city-footer {
        padding: 10px 5px;
        font-size: 15px;
    }

    .vehicle-tabs button {
        font-size: 12px;
    }

    .margin-div-banner {
        margin-top: 0;
    }

    .bookings {
        flex-direction: unset;
    }

    .bookings span {
        font-size: 12px;
    }

    .arrow {
        display: none;
    }

    .feature-card p {
        font-size: 14px;
        color: #fff;
        padding: 12px 0px;
        margin: 0;
    }

    .feature-overlay h3 {
        font-size: 10px;
    }

    .content h1 {
        font-size: 25px;
    }

    .content h4 {
        font-size: 20px;
    }

    .content p {
        font-size: 16px;
    }

    .enquire-btn {
        font-size: 16px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .features {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 10px;
    }

    .feature-card p {
        padding: 15px 0px;
        font-size: 14px;
    }

    .content h4 {
        font-size: 20px;
    }

    .content h1 {
        font-size: 20px;
    }

    .content .icon img {
        width: 100px;
    }

    .content p {
        font-size: 15px;
    }

    .enquire-btn {
        font-size: 15px;
    }

    .about-content {
        display: block;
        width: auto;
        height: auto;
        right: 0;
    }

    .carousel-number-indicators button {
        width: 60px;
    }

    .margin-div-banner {
        margin-top: 40px;
    }

    .content h1 {
        font-size: 28px;
    }
}

@media (min-width: 992px) and (max-width: 1024px) {

    .carousel-number-indicators button {
        width: 60px;
    }

    .margin-div-banner {
        margin-top: 40px;
    }

    .features {
        grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    }

    .feature-card p {
        padding: 10px 0;
    }

    .about-content {
        width: 500px;
        padding: 20px 15px;
        height: auto;
    }
}

@media (min-width: 1025px) and (max-width: 1200px) {
    .about-content {
        flex: 1 1 50%;
        background-color: #000;
        color: white;
        padding: 20px 25px;
        box-sizing: border-box;
        position: relative;
        right: 60%;
        top: 12%;
        width: 575px;
        height: 471px;
    }

    .features {
        grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    }

    .feature-card p {
        padding: 10px 0;
    }

    .about-content {
        width: 500px;
        padding: 20px 15px;
        height: auto;
    }
}