/* @media (min-width: 1400px){
    .container{
        max-width: 1200px;
    }
} */

@media(min-width:768px){
    .successful-detail-sec .booked-flex{
        display: flex;
        gap: 20px;
    }
    .successful-detail-sec .booked-flex .sbw-50{
        width: 50%;
    }
    .successful-detail-sec .sports-car .car-slider img{
        height: 400px;
    }
    
    .bookmark-sec{
        border-radius: 12px 12px 0 0;
        padding-bottom: 0 !important;
    }
    .successful-detail-sec{
        border-radius: 0 0 12px 12px;
    }
    .successful-detail-sec .addons-car,
    .successful-detail-sec .pickup-car{
        padding: 0;
    }
    .successful-detail-sec .addons-car-detail h4 {
        font-weight: 700;
        font-size: 20px;
    }
    .successful-detail-sec .pickup-detail .pickup-info h5{
        font-size: 20px;
    }
    .successful-detail-sec .pickup-detail .pickup-info .pickup-dates p {
        font-weight: 600;
        font-size: 18px;
    }
    .successful-detail-sec .pickup-detail .pickup-info .pickup-dates p:first-child {
        color: #4F46E5;
    }
    .custom-accordion .accordion-body{
        display: flex;
        gap: 20px;
    }
    .custom-accordion .accordion-body .accordion-with{
        width: calc(50% - 10px) !important;
    }
   
    .custom-accordion .accordion-with.price-part{
        border: 1px solid #E6E6E6;
        border-radius: 12px;
        padding: 20px;
    }
    .custom-accordion .childset-row .add-btn-txt {
        width: unset;
    }
}

@media(min-width:1200px){
    .successful-detail-sec .booked-flex{
        display: flex;
        gap: 40px;
    }
    .custom-accordion .accordion-with.price-part{
        padding: 20px;
    }
    .booking-successful-sec .p-40{
        padding: 40px !important;
    }
    .booking-successful-sec .price-dropdown.p-40{
        padding: 20px 40px !important;
    }
    .booking-successful-sec .price-dropdown.p-40 .collapse.show{
        padding-bottom: 20px;
    }
    .booking-successful-sec .price-dropdown .accordion-button {
        padding: 0 !important;
    }
    .booking-successful-sec .price-dropdown .accordion-body{
        padding: 0 !important;
    }
    .successful-detail-sec .pickup-detail .pickup-info h5{
        font-size: 24px;
    }
    .successful-detail-sec .pickup-detail .pickup-info .pickup-dates p {
        font-weight: 600;
        font-size: 20px;
    }
    .successful-detail-sec .pickup-detail .pickup-info .pickup-dates p:first-child {
        color: var(--text-blue);
    }
     .custom-accordion .accordion-with.totla-part{
        max-width: 400px;
        width: 100%;
        margin-left: auto;
    }
    .custom-accordion .accordion-with.price-part{
        padding: 40px 32px;
    }
}

/* @media(max-width:1399px){
    .container{
        max-width: 100%;
    }
} */

@media (max-width: 1400px){
    .cost-details .border-gray h4 {
        font-size: 14px;
    }
}

@media (max-width: 1200px){
    .navbar, .process-sec{
        padding:10px 10px !important;
    }
    .container{
        max-width: 100%;
    }
    .childset-row .add-btn-row{
        flex-direction: column;
        gap:5px;
        text-align: center;
    }
    .childset-row .add-btn-row {
        width: 180px;
    }
    .bookmark-sec h1 {
        font-size: 54px;
    }
    .bookmark-sec img{
        width: 100px;
    }
    .car-single-page .package-box label {
        padding: 12px 12px;
    }
    .car-single-page .detail-page-info h2{
        font-size: 22px;
        margin-top: 10px;
    }
    .car-single-page .carousel-indicators{
        gap: 12px;
    }
    .car-single-page .carousel-indicators li{
        width: calc(33.33% - 8px);
    }
    .package-box-info h5{
        font-size: 16px;
    }
    .cost-details .border-gray h4{
        font-size:14px;
    }
}

@media (max-width: 1024px){
    
    .car-detial-slider button.slick-arrow.slick-prev,
    .car-detial-slider button.slick-arrow.slick-next{
        height:30px;
        width: 30px;
        left:-14px;
    }
    .car-detial-slider button.slick-arrow.slick-next{
        left: unset;
        right:-14px;
    }
    .back-page-sec{
        padding: 20px 6px;
    }
}

@media (max-width: 991px){
    h2{
        font-size: 30px;
        line-height: 40px;
    }
    .left-side-370,
    .right-side-370 {
        width: 100%;
        max-width: 100%;
    }
    .addons-sec .row{
        flex-direction: column-reverse;
    }
    h5{
        font-size: 16px;
    }
    h4{
        font-size: 18px;
    }
    p{
        font-size: 14px;
    }
    .bookmark-sec h1 {
        font-size: 40px;
    }

    .hero-section{
        padding:80px 10px 60px !important;
    }
    .date-info .date-calender::before{
        content: "";
        display: none;
    }
    .hero-section .hero-bg-image{
        top: -280px;
        height: calc(100% + 280px);
    }
    .navbar-nav{
        gap: 20px;
    }
    .navbar-light .navbar-toggler{
        color: unset !important;
        border: unset !important;
        box-shadow: unset;
    }
    .slider-sec{
        background-color: var(--bg-lightgray);
        padding:60px 10px;
    }
    .white-box{
        padding: 20px 20px 20px 20px;
    }
    .show-mobile{
        display: block;
        font-size: 14px;
        color: var(--text-white);
        line-height: 16px;
    }
    .btn-blue{
        width:100%;
        height:44px;
        padding: 12px 20px;
        border-radius: 4px;
    }
    .btn-blue{
        display: flex;
        gap: 10px;
    }
    .rental-type{
        gap: 12px;
        justify-content: start;
    }
    .search-res-info {
        padding-bottom: 60px;
    }
    .date-calender,
    .location-details{
        border:1px solid rgba(153, 153, 153, 0.4);
        border-radius: 12px;
        margin:6px 0px;
    }
    .car-single-page .car-information .date-calender{
        border:none;
    }
    .date-calender .datepicker{
        width: 95% !important;
    }
    .update-search .floating-group .select2 .select2-selection,
    .input-effect input{
        margin-bottom: 16px;
    }
    .process-sec{
        padding: 80px 6px 16px !important;
    }
    .process-sec.personal-process{
        padding: 90px 6px 16px !important;
    }
    .process-sec.add-ons-process{
        padding:60px 6px 16px !important;
    }
    .mobile-head{
        display: block;
    }
    .update-search{
        display: none;
    }
    .update-city-popup .update-search{
        display: block;
    }
    .update-city-popup{
        z-index: 9999;
    }
    /* .update-search .location-details{
        margin-bottom: 12px;
    } */
    .update-city-popup .modal-body{
        padding: 0px;
    }
     .select2-container{
        z-index: 9999;
    }
    .update-search label.floating-label{
/*        z-index: 0;*/
    z-index:99999;
    }

    .datepicker-days table td, .datepicker-days table th{
        width: 48px !important;
        height: 48px;
        font-size: 14px !important;
    }
    .date-calender .datepicker{
        padding: 10px;
    }
    .box-shadow{
        padding:16px;
    }
    .cost-details{
        border-left: none !important;
        border-top: 2px dashed #CCCCCC;
        padding-left: 0;
        padding-top: 20px;
    }
    .renault-details .sports-car{
        margin-bottom:20px;
    }
    .cost-details .border-gray,
    .cost-details .day-cost-info{
        width: 50%;
    }
    .cost-info {
        display: flex;
        display: flex;
        gap: 10px;
        justify-content: space-between;
        align-items: center;
    }
    .cost-details .border-gray h4{
        font-size: 16px;
        line-height: 19px;
    }
    .vechical-details h6,
    .address-details .filter-group h6{
        font-size: 12px !important;
    }
    .available-car p.font-weight-semibold{
        font-size: 14px;
    }
    .renault-details .sperpart-detail{
        gap: 5px;
    }
    .vechical-details{
        width: calc(33.33% - 4px);
    }
    .car-imformation .mb-20{
        margin-bottom: 16px;
    }
    .lightbox img.lb-image{
/*        height:500px !important;*/
        width: 100% !important;
        /* margin: 0 20px !important; */
    }
    .lightbox .lb-outerContainer{
/*        width: 90% !important;*/
        width:100%;
        background-color:unset;
    }
    .car-single-page .p-40{
        padding: 20px;
    }
    .price-package .package-box label {
        padding:8px 12px;
    }
    .price-package .package-box h5{
        font-size: 20px;
    }
    .car-single-page .car-slider-info .car-category{
        margin-bottom: 28px;
    }
    .car-single-page .mb-40{
        margin-bottom: 24px;
    }
    .car-single-page .carousel-inner .carousel-item img{
        height: 300px;
    }
    .personal-form .input-effect input{
        margin-bottom: 0px;
    }
    .pickup-detail-popup .pickup-detail{
        padding: 14px 0px 10px;
    }
    .car-thumbnail-slider .lightbox{
        display:flex !important;
    }
    .map-icon-input select {
        font-size: 14px;
    }
    .renault-details .sports-car .car-slider .w-228 img {
        max-width: 100%;
/*        max-height: unset;*/
        height: 180px;
    }
    .car-rental-form .rental-btns {
        padding-top: 30px;
    }
    .pickup-detail .pickup-info.left-line:before {
        top: 14px;
        left: 6px;
        height: 100%;
    }

}

@media (max-width: 767px){
    h2{
        font-size: 28px;
        line-height: 36px;
    }
    .left-side-370,
    .right-side-370 {
        width: 100%;
        max-width: 100%;
    }
   /* h5{
        font-size: 14px;
    }*/
    h4{
        font-size: 16px;
    }
    p {
        font-size: 12px;
    }
    .slider-sec p{
        font-size: 14px;
        line-height: 22px;
    }
    .hero-section{
        padding:80px 10px 40px !important;
    }
    .hero-section .form-check label{
        min-width: 120px;
    }
    .hero-section .form-check label{
        padding: 12px 8px;
    }
    .rental-type{
        gap: 12px;
        justify-content: start;
    }
    .date-calender,
    .location-details{
        border:1px solid rgba(153, 153, 153, 0.4);
        border-radius: 12px;
        margin:6px 0px;
    }
    .date-calender {
        padding: 8px 16px;
    }
    .arrow-btn {
        margin-top: 32px;
    }
    .slider-sec{
        background-color: var(--bg-lightgray);
        padding:40px 10px;
    }  

    /* === Search === */
    
    .mobile-bg-gray{
        background-color: var(--bg-lightgray);
        padding:12px 16px;
    }
    .progressbar ul li a,
    .progressbar ul li{
        font-size: 12px;
        line-height: 14px;
    }
    .progressbar ul li a::before,
    .progressbar ul li.active a::after,
    .progressbar ul li.progress-mark a::after{
        height: 14px;
        width: 14px;
    }
    .progressbar ul li.progress-mark a::after {
        height: 18px;
        width: 18px;
    }
    .progressbar ul li.active a::before {
        height: 5px;
        width: 5px;
        left: 5px;
    }
    .progressbar ul li::after{
        width: 92%;
        left: 10px;
    }
    .search-res-info {
        padding-bottom: 40px;
    }

    .input-effect input,
    .update-search .select2-selection__rendered,
    .input-effect input::placeholder{
        font-size: 14px !important;
    }
    .update-search{
        padding:12px 6px;
    }
    .btn-dark-blue{
        padding: 13px 20px !important;
    }
    .input-effect input, .update-search .floating-group.mappin-select .select2 .select2-selection{
        padding: 8px 16px 8px 30px !important;
    }
    .input-effect::before, .update-search .floating-group.mappin-select .select2 .select2-selection::before{
        left: 8px;
    }
    .input-effect input ~ label,
    .update-search .mappin-select label.floating-label{
        left: 30px;
    }
    .input-effect::before, .update-search .floating-group.mappin-select .select2 .select2-selection::before{
        height: 14px;
        width: 14px;
    }
    .datepicker-days table td, .datepicker-days table th{
        width: 22px !important;
        height: 20px;
        font-size: 11px !important;
    }
    .available-car p.font-weight-semibold{
        font-size: 14px;
    }
    .renault-details .sports-car{
        flex-direction: column;
    }
    .renault-details .sports-car .w-40,
    .renault-details .sports-car .w-80{
        width: 100%;
    }
    .pagination-sec .pagination li a.next-arrow{
        position: absolute;
        right: 0;
    }
    .car-imformation .sperpart-detail{
        height: 25px;
        overflow: hidden;
    }

    .car-imformation .sperpart-detail.show-details{
        height: auto;
    }
    .available-car p.fs-16{
        font-size: 14px;
    }
    .renault-details .sports-car{
        gap: 0px;
    }
    .pickup-time .mb-20{
        margin-bottom: 0px;
    }
    .price-filter-dropdown{
        margin-bottom: 16px !important;
    }
    .update-city-popup .price-filter-dropdown{
        margin-bottom: 0px !important;
    }

    .box-shadow {
        padding: 16px;
    }
    .breadcrunb-sec{
        display: none;
    }
    .process-sec, .process-sec.personal-process{
        margin-bottom: 30px;
    }
    .process-sec.mobile-bg-gray{
        margin-bottom: 0px;
    }
    .package-box-row {
        flex-direction: column;
    }
    .package-box-row .package-box {
        width: 100%;
    }
    .package-box .box-total {
        min-height: unset;
    }
    .package-box .list-group {
        padding: 15px 0 5px;
    }
    .childset-row .add-btn-txt {
        width: calc(100% - 180px);
    }
    .kilometers-row .add-btn-txt h6{
        font-size: 14px;
    }
    .kilometers-row{
        align-items: baseline !important;
    }
    .childset-row .add-btn-row p{
        font-size: 13px;
    }
    .childset-row .add-btn-row .flex-column{
        flex-direction: row !important;
        align-items: center;
    }
    .childset-row.drivers-row .add-btn-row{
        flex-direction: row-reverse;
        justify-content: space-between;
        width: 100%;
    }
    .childset-row{
        padding: 15px 0;
    } 
    .package-p {
        padding: 0px 0 15px;
        font-size: 14px !important;
    }  
    .package-box .deductible-bg {
        font-size: 14px;
    } 
    .package-box .list-group li {
        margin-bottom: 5px;
    }
    .package-box .list-group li img {
        width: 13px;
        margin-right: 5px;
    }
    
    .addons-rightside{
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
        background-color: #ffffff;
        padding: 16px;
        border-radius: 12px;
    }
    .addons-rightside .box-shadow{
        padding: 0px !important;
    }
    .addons-rightside .sports-car,
    .addons-rightside .addons-car{
        width: calc(50% - 10px);
        padding: 0 !important;
        margin-bottom: 0px;
    }
    .addons-rightside .pickup-car{
        width: 100%;
    }
    .addons-rightside .pickup-car hr{
        display: none;
    }
    .addons-car .addons-car-detail{
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
    }
    .addons-car .addons-car-detail h6{
        order: 2;
    }
    .addons-car .addons-car-detail h4{
        order: 1;
        width: 100%;
    }
    .pickup-detail .pickup-dates{
        display: flex;
        gap: 20px;
    }
    .pickup-detail .pickup-dates p{
        font-size: 14px !important;
        position: relative;
    }
    .pickup-detail .pickup-dates p:after{
        content: '';
        position: absolute;
        top: 0;
        right: -10px;
        width: 2px;
        height: 100%;
        background: #E6E6E6;
    }
    .pickup-detail .pickup-dates p:last-child:after{
        display: none;
    }
    .pickup-detail .pickup-dates p span{
        display: none;
    }
    .kilometers-row{
        padding: 15px 0 0;
    }
    .addons-sec{
        padding-bottom: 100px;
    }
    .personal-form .input-effect {
        width: 100%;
    }
    .personal-form .company-form-field {
        flex-wrap: wrap;
    }
    .personal-form {
        padding: 28px 0;
    }
    .personal-form-footer label {
        font-size: 14px;
    }
    .childset-row.payment-row {
        padding: 12px 0 5px;
    }
    .childset-row.payment-row .add-btn-txt h6,
    .childset-row.totla-payable .add-btn-txt h6{
        font-size: 14px;
    }
    .childset-row.totla-payable h3 {
        font-size: 20px;
    }
    .payment-radio label {
        font-size: 16px;
    }
    .payment-radio .form-check-input {
        margin-top: 5px !important;
    }
    .payment-radio {
        padding-bottom: 24px;
    }
    .payment-radio .payment-icon img{
        width: 25px;
    }
    .bookmark-sec h1 {
        font-size: 24px;
    }
    .bookmark-sec {
        gap: 15px;
        padding: 16px 0 24px;
        background: unset;
    }
    .bookmark-sec img {
        width: 64px;
    }
    .successful-detail-sec{
        display: block;
    }
    .successful-detail-sec .booked-flex{
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
    }
    .booking-successful-sec .box-shadow {
        padding: 16px;
    }
    .bookmark-sec,
    .booking-successful-sec{
        padding: 20px 0 !important;
    }
    .summary-total-box h4{
        font-size: 14px;
    }
    .summary-total-box {
        padding: 10px 16px;
    }
    .booked-address-info .booked-address p {
        font-size: 12px;
    }
    .booked-address-info .booked-address a p {
        font-size: 16px !important;
        font-weight: 500;
    }
    .lightbox img.lb-image{
/*        height:400px !important;*/
        width: 100% !important;
    }
    .car-single-page .p-40{
        padding: 16px;
    }
    .car-single-page .detail-page-info h2{
        font-size: 20px;
    }
    .car-single-page .car-slider-info .car-category a{
        font-size: 12px;
    }
    .car-single-page .carousel-inner .carousel-item img{
        height: 300px;
    }
    .car-single-page .carousel-indicators{
        flex-wrap: unset;
        overflow-x: auto;
    }
    .car-single-page .carousel-inner{
        margin-bottom: 12px;
    }
    /* .car-single-page .box-shadow{
        overflow: hidden;
    } */
    .car-single-page .carousel-indicators li img{
        width: 100% !important;
    }
    .car-single-page .carousel-indicators::-webkit-scrollbar,
    .single-page-section::-webkit-scrollbar{
        display: none;
    }
    .car-single-page .carousel-indicators,
    .single-page-section{
        -ms-overflow-style: none;  
        scrollbar-width: none;  
    }
    .car-single-page .car-information h5{
        font-size: 12px;
    }
    .car-single-page .sperpart-detail h6,
    .car-single-page .equipment-info p,
    .car-single-page .booked-addmap .booked-address-info h5,
    .pickup-detail .pickup-info h5{
        font-size: 14px;
        line-height: 19px;
    }
    .car-single-page .car-information .sperpart-detail img{
        width: 16px;
        height: 16px;
    }
    .calender-icon::before{
        height: 12px;
        width: 12px;
        left: 8px;
    }
    .car-single-page .map-icon-input input{
        padding: 7px 12px 7px 25px;
    }
    .car-single-page .map-icon-input input::placeholder,
    .car-single-page .about-info-car p,
    .car-single-page .package-box .list-group li{
        font-size: 14px;
    }
    .car-single-page .map-address::before{
        height: 16px;
        width: 16px;
        left: 8px;
    }
    .car-single-page .about-info-car {
        flex-direction: column;
        gap: 0px !important;
    }
    .car-single-page .booked-addmap .booked-address-info{
        max-width: 100%;
    }
    .single-page-section{
/*        height: calc(100vh - 162px);*/
        overflow-y: auto;
        padding-bottom: 40px !important;
    }
    .back-icon img{
        height: 20px;
        width: 20px;
        object-fit: contain;
    }
    .back-page-sec{
        padding: 12px 6px;
    }
    .addons-sec .renault-details .sports-car .car-slider img,
    .booked-flex  .sports-car .car-slider img{
        height: 150px;
        object-fit: cover;
    }

    .renault-details .sports-car .car-slider img{
        object-fit:cover !important;
    }

    .addons-sec {
        margin-top: 30px;
    }
    .cost-details .rent-details .border-button{
        background-color: var(--bg-blue);
        color: var(--text-white);
    }
    .cost-details .rent-details .border-button:hover{
        background-color: var(--bg-transparent);
        color: var(--text-blue);
    }
    .price-dropdown .accordion-body{
        padding: 0px 16px 20px;
    }
    .accordion-button{
        padding: 16px 16px;
    }
    /*    23 Aug 2024*/
    .map-icon-input select {
/*        font-size: 10px;*/
        padding-left: 1.8rem !important;
    }
    .add-driver-btn-row{
        flex-wrap:wrap;
        width:100%;
    }
    .add-driver-btn-row div,
    .add-driver-btn-row div input,
    .add-driver-btn-row div button{
        width: 100%;
    }
    .childset-row .btn-dark-blue {
        display: block;
        max-width: 100%;
    }
    .renault-details .sports-car .car-slider img{
        max-height:unset;
        max-width:unset;
        height:228px;
    }
    .quantitybtn .input-km{
        font-size:13px;
    }
    .quantitybtn {
        padding: 8px 12px;
    }
    .quantitybtn button {
        width: 18px;
        height: 18px;
        font-size: 12px;
        line-height: 16px;
        display: flex;
        justify-content: center;
        align-items: center;
        align-items: center;
        text-align: center;
    }
    .quantitybtn .increae-num {
        width: calc(100% - 46px);
    }
    .renault-details .slick-arrow::before {
        height: 12px;
        width: 12px;
    }
    .renault-details .slick-arrow {
        height: 20px;
        width: 20px;
    }
    .month-select select {
        min-height: 38px;
        padding-left: 16px !important;
    }
    .date-calender .datepicker {
        width: auto !important;
        left: 14px !important;
        transform:unset;

    }
    .car-single-page .date-calender .datepicker {
        top: 39px !important;
        width: auto !important;
        left: 0px !important;
    }
    .car-detial-box .card .card-img-top{
        height:250px;
    }
    .renault-details .sports-car .car-slider .w-228 img{
        height:228px;
    }
    .pickup-detail .pickup-info.left-line:before {
        top: 14px;
        left: 6px;
        height: 100%;
    }

}

@media(max-width:500px){
    .addons-rightside .sports-car .car-slider img {
        height: 110px;
    }
    .car-single-page .carousel-inner .carousel-item img{
        height: 250px;
    }
    .car-single-page .carousel-indicators li,
    .car-single-page .carousel-indicators li img{
        height: 59px;
        width: 69px !important;
    }
    .car-single-page .carousel-indicators li img{
        width: 100% !important;
    }
    .addons-sec .renault-details .sports-car .car-slider img,
    .booked-flex .sports-car .car-slider img {
        height: 99px;
    }
}

@media (max-width: 1399px) and (min-width: 992px){
    .vechical-details {
        width: calc(50% - 4px);
    }
}