@media (width < 900px) {
    .hero-container {
        /*position: relative;
        min-height: 400px;
        z-index: -1;*/
        /*    display: flex;*/
        /*    flex-direction: column;*/
        /*background-image: url("src/dynacle_bus_hero_1.jpg");
        margin-bottom: 10px;
        background-size: 100vh;
        background-repeat: no-repeat;
        background-color: #b7bed0;
        align-content: center;*/
    }


    .bookingbar-wrapper {
        display: grid !important;
    }

    .customer-quote-wrapper {
        display: flex !important;
        flex-direction: column;
    }

    .feature-wrapper {
        display: grid !important;
    }

    .car-carousel {
        display: none !important;
    }

    .footer-home-wrapper {
        justify-content: unset;
        flex-direction: column;
    }

    /*booking page */
    #bookingDetailParent {
        padding: 0px;
        margin-left: 10px;
        margin-right: 10px;
    }

    .booking-page-title-header {
        text-align: start;
        margin-left: 0px;
        margin-top: 10px;
    }

    .map-canvas {
        width: 100%;
        height: 300px;
    }

    .booking-content-container {
        display: flow;
        padding: 20px;
        margin-left: 20px;
        margin-right: 20px;
    }

    .form-divider-vertical {
        display: none;
    }

    .booking-location-wrapper {
        display: block;
        position: relative;
    }

    .booking-detail-wrapper {
        margin-top: 50px;
        display: block;
        position: relative;
    }

    .grid-item-icon {
        width: 10px;
        height: 10px;
    }

    .button-add-more {
        white-space: nowrap;
    }

    .footer-booking-container{
        font-size:10pt;
    }


    .errorMessage {
        max-width: 100%;
    }
}

@media(width < 600px) {
    .hero-img {
        display: none;
    }

    .hero-content-wrapper {
/*        color: white;
        position: relative;
        top:20%;*/
    }

    .bookingbar-location-container {
        border-radius: 1em;
    }

    .bookingbar-location-divider {
        display: none;
    }

    .bookingbar-location-icon {
        background-color: #F5F5FF;
        min-height: 100%;
        width: 50px;
        align-self: start;
        place-self: start;
    }

    .bookingbar-location-1 {
        border-bottom: solid 0.1px #cfcfcf;
        width:100%;
    }

    .booking-input-passenger-container {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .booking-additional-service-wrapper {
        grid-template-columns: repeat(1, 1fr);
    }



}

@media(width < 500px) {
    .map-popup {
/*        min-width: calc(100% - 25%);*/
        margin-left:auto;
    }

    .multi-date-picker{
        left:0;
        right:0;
    }

    .days,
    .dates{
        gap:2.5px;
        grid-template-columns : repeat(7, 1fr);
/*        margin-block:50px;*/
    }

    .dates button{
        width:35px;
        height:35px;
    }

    .pickup-location-wrapper {
        display:flex;
        flex-direction:column;
    }

    .booking-content-container{
        padding:1.5rem 0px;
    }

}

@media (width < 1300px){
    .booking-input-passenger-container {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

}