:root {
    --mainColor: #ff6600;
    --whiteColor: #fff;
    --blackColor: #000;
    --mainTextColor: #fff;
    --mainYellowColor: #ffc61a;
    --reviewBookingColor: #4d55cc;
    --mainbg: #003b95;
    --ms-bg: transparent;
    --borderColor: #d3d3d3;
    --greybg: #f8f8f8;
    --carList: #006ce4;
    --primaryColor: #39a7ff;
}

.offer-svg {
    width: 25px;
}

.search_box_inner .to-address-airport {
    display: none;
}

.read-more-less-btn {
    font-size: 12px;
    font-weight: 600;
    padding: 5px 8px;
    border-radius: 20px;
    cursor: pointer;
}

.button-handle {
    background: linear-gradient(93deg, #53b2fe, #065af3);
    color: #fff;
}

.otp-btn {
    background-color: var(--mainColor);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    border-color: var(--borderColor);
}

.otp-btn:hover {
    background-color: var(--mainColor);
    color: #fff;
    border-color: var(--borderColor);
}

.otp-btn:active {
    background-color: var(--mainColor) !important;
    color: #fff !important;
    border-color: var(--borderColor) !important;
}

#mobileNumber {
    border-radius: 7px 0px 0px 7px !important;
}

.book-mobile {
    display: none;
}

.form-select:focus {
    outline: 0px !important;
    box-shadow: none !important;
}

.date-picker {
    -webkit-appearance: none;
}

.date-picker:focus {
    outline: none !important;
    background-color: transparent !important;
}

.date-picker::selection,
.time-picker::selection {
    background-color: transparent !important;
}

ul li {
    list-style: none;
}
#searching-area {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

.search_top_inner {
    position: relative;
    background: #fff;
    padding: 15px 10px;
    border-radius: 20px;
    box-shadow: 0 0 12px rgb(84 84 84 / 85%);
    border: 1px solid var(--borderColor);
}

.search_top_box {
    padding: 0px 10px;
}

.search_btn_list {
    gap: 10px;
    width: 40%;
    padding: 0px 10px;
    margin: auto;
}

.search_top_btn_group {
    text-align: center;
}

.search_top_btn_group .nav-link {
}

.search_btn_list .nav-item .nav-link.active {
    background: linear-gradient(90deg, #057de2 0%, #52b0ff 100%) !important;
    color: #fff !important;
}

.search_btn_list .nav-item:last-child {
    border-right: 0px solid #e3e6ea;
}

.search_btn_list .nav-item .nav-link {
    padding: 7px 20px !important;
    font-size: 14px;
    font-weight: 600;
    border-radius: 50px;
    color: #000;
    text-transform: capitalize;
    border: 1px solid rgb(225, 231, 238);
    background: #fff;
}

.search_box .input_group {
    position: relative;
}

.search_box .input_top_name {
    margin-bottom: 3px;
    color: #000;
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
}

.searching_cab_btn {
    background: #ff6600;
    color: var(--mainTextColor);
    padding: 5px;
    border-radius: 50px;
    font-size: 24px;
    text-transform: uppercase;
    font-weight: 500;
    margin-top: 20px;
    border: 3px solid #f2f2f2;
    width: 216px;
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translate(-50%);
    background-size: 200% auto;
    transition: background-position 0.5s ease-in-out;
}

.searching_cab_btn:active {
    background-position: right center;
}

#hero_banner .form {
    padding: 0px 0px;
    border-radius: 10px;
}

.suggestions {
    position: absolute;
    width: 100%;
    border: 1px solid #ccc;
    border-top: none;
    background: white;
    max-height: 150px;
    overflow-y: auto;
    border: 1px solid #d4d4d4;
    margin-top: 2px;
    border-radius: 5px;
    z-index: 999;
    display: none;
}

.suggestions div {
    padding: 5px;
    text-align: center;
    cursor: pointer;
    font-size: 12px;
}

#booking {
    padding-top: 30px;
    padding-bottom: 30px;
}

#booking .card {
    border: 1px solid var(--borderColor);   
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    border-radius: 10px;
    
}

#booking .card-child{
 overflow: hidden;
 border-radius: 10px;
}

.border-bottom {
    border-bottom: 1px solid rgb(230, 230, 230);
}

#booking .header {
    /* background: linear-gradient(90deg, #c7dffe 0%, #d8f2ff 100%); */
    /* background-color:rgba(32, 168, 217, 0.7); */
    background: linear-gradient(282deg, #ffeefd 0%, #caf7ff 100%);
    color: #000;
    padding: 10px;
    text-align: left;
    font-size: 18px;
}
#booking .nav-tabs .nav-link.active {
    background-color: #17a2b8;
    color: white;
}

#booking .form-control {
    border: 1px solid var(--borderColor);
    background: rgba(195, 200, 201, 0.1);
    border-radius: 7px;
    height: 45px;
}

#booking .form-label {
    font-weight: 600;
    font-size: 15px;
}

#booking #gst {
    background: rgba(96, 239, 255, 0.1);
    border: 1px solid rgb(0, 229, 255);
}

#booking {
    .custom-checkbox {
        position: relative;
        padding-left: 35px;
        cursor: pointer;
        user-select: none;
        font-weight: 700;
        font-size: 15px;
    }

    .custom-checkbox input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
    }

    .checkmark {
        position: absolute;
        top: 0;
        left: 0;
        height: 20px;
        width: 20px;
        background-color: #fff;
        border: 2px solid rgb(0, 229, 255);
        border-radius: 4px;
        transition: background-color 0.2s ease;
    }

    .custom-checkbox input:checked ~ .checkmark {
        background-color: rgb(0, 229, 255);
    }

    .checkmark:after {
        content: "";
        position: absolute;
        display: none;
    }

    .custom-checkbox input:checked ~ .checkmark:after {
        display: block;
    }

    .custom-checkbox .checkmark:after {
        left: 7px;
        top: 3px;
        width: 5px;
        height: 10px;
        border: solid white;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
    }

    #gstForm {
        display: none;
    }

    #gstForm .form-control {
        background: #fff;
    }

    .payment-option {
        border: 1px solid #ddd;
        border-radius: 12px;
        padding: 10px 15px;
        margin-bottom: 10px;
        cursor: pointer;
        position: relative;
    }
    .payment-option.active {
        background: rgba(96, 239, 255, 0.1);
        border: 1px solid rgb(0, 229, 255);
    }
    .payment-option input[type="radio"] {
        appearance: none;
        border: 2px solid #ddd;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        margin-right: 10px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 15px;
        cursor: pointer;
    }
    .payment-option input[type="radio"]:checked {
        border-color: rgb(0, 229, 255);
        background-color: rgb(0, 229, 255);
    }

    .typePayment {
        font-size: 15px;
        cursor: pointer;
    }

    .partPaymentmute {
        font-size: 12px;
    }

    .continue-btn {
        background-color: #ff6600;
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 30px;
        font-size: 18px;
        width: 100%;
        font-weight: 600;
    }

    #coupon_area {
        position: relative;
    }

    #coupon_area #coupon_code {
        padding: 0px 80px 0px 10px;
        font-size: 14px;
        font-weight: 600;
        text-transform: uppercase;
    }

    #coupon_area #coupon_code::placeholder {
        text-transform: capitalize;
        font-weight: 600;
        font-size: 14px;
    }

    .apply_remove_btn {
        position: absolute;
        top: 50%;
        right: 30px;
        transform: translateY(-50%);
        cursor: pointer;
        font-size: 14px;
    }
    .city-review {
        font-size: 16px;
        font-weight: 700;
        text-transform: capitalize;
        margin-bottom: 10px;
    }

    .image-area {
        width: 30%;
        padding: 10px 15px;
    }
    .cab-details {
        width: 33%;
        padding-left: 20px;
        padding: 10px 15px;
        border-right: 1px dashed var(--borderColor);
    }

    .city-review-date-time {
        width: 37%;
        padding: 10px 15px;
    }

    .pickup-drop {
        font-size: 12px;
        font-weight: 600;
        text-transform: capitalize;
        color: #757575;
    }

    #review-booking-page .card-body {
        display: flex;
    }

    .cab-name {
        font-weight: 700;
        font-size: 16px;
        margin-bottom: 12px;
    }

    #fareCard .card-body ul {
        padding-left: 0px;
        margin-bottom: 0px;
    }

    #fareCard .card-body ul li {
        font-weight: 600;
        font-size: 15px;
        border-bottom: 1px solid var(--borderColor);
        padding-bottom: 10px;
        padding-top: 10px;
    }

    #fareCard .card-body ul li:first-child {
        padding-top: 0px;
    }

    #fareCard .card-body ul li:last-child {
        border-bottom: 0px solid var(--borderColor);
        padding-bottom: 0px;
    }

    #fareCard .card-body ul li span {
        float: right;
    }

    .totalprice {
        font-size: 20px !important;
        color: #eb5a3c;
        font-weight: 700 !important;
    }

    .cab-info {
        font-size: 13px;
        font-weight: 600;
        color: #757575;
        margin-bottom: 10px;
    }

    #fareSummaryRead .header {
        font-size: 20px;
        font-weight: 600;
        margin-bottom: 0px;
        padding: 15px 10px !important;
        cursor: pointer;
    }

    .fareSummaryContent {
        display: none;
    }

    .fareSummaryContent {
        font-size: 14px;
    }

    .fareSummaryContent ul li {
        list-style: circle !important;
    }
}

#review-booking-page .card-body {
    padding: 0px;
}

.container {
    max-width: 1200px;
    width: 100%;
}

#round .box_input {
    min-width: 220px;
}

.search_box {
    gap: 10px;
}

.search_box_inner input:focus-visible {
    border-color: #000 !important;
    border-width: 2px !important;
}

.search_box_inner {
    display: flex;
    gap: 10px;
    margin-top: 40px;
    margin-bottom: 50px;
    position: relative;
    max-width: 1200px;
    width: 100%;
}

.search_box_inner label {
    font-size: 13px;
    font-weight: 600;
    color: #969494;
    width: auto;
    margin-bottom: 0;
}

#oneway .swap-btn-container {
    width: 600px;
}

#oneway #box_group_input,
#oneway .from-group,
#oneway .to-group {
    width: 300px;
}

#round-trip .swap-btn-container {
    width: 480px;
}

#round-trip #box_group_input,
#round-trip .from-group,
#round-trip .to-group {
    width: 240px;
}

#local #box_group_input,
#local .from-group,
#local .to-group {
    width: 300px;
}

#airport #box_group_input,
#airport .from-group,
#airport .to-group {
    width: 240px;
}

.field-display,
.search_box_inner input::placeholder {
    font-size: 21px;
    font-weight: 600;
    color: #212529;
    text-transform: capitalize;
    border: none;
    width: 100%;
    background-color: transparent;
    cursor: pointer;
}

.swap-btn-container {
    display: flex;
    gap: 10px;
    position: relative;
}

.swap-btn.rotated {
    transform: translate(-50%, -50%) rotate(180deg);
}

.swap-btn {
    border-radius: 50%;
    background-color: #ffffff;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid rgb(225, 231, 238);
    z-index: 2;
    transition: transform 0.4s ease;
}

.swap-container {
    position: relative;
}

.call_btn {
    background: var(--carList);
    color: var(--whiteColor);
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    padding: 7px 10px;
    text-decoration: none;
}

.call_btn .bi-telephone-fill {
    color: var(--whiteColor);
}

.calendar-container,
.time-slot-container {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 5px;
    text-align: center;
}
.calendar-day,
.time-slot {
    padding: 10px;
    border: 2px solid #ffc61a;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.3s, transform 0.2s;
}
.selected {
    background-color: #ffc61a;
    color: white;
}
.disabled {
    background-color: #f0f0f0;
    color: #999;
    cursor: not-allowed;
}
.today {
    background-color: rgba(255, 198, 26, 0.3);
    border: 2px solid #ffc61a;
}

.form-input {
    width: 100%;
    border: none;
    cursor: pointer;
    padding: 0px;
}

.form-input:focus-visible {
    outline: none;
    border: none;
}

#timeModal .modal-content {
    max-height: 80vh;
    overflow: hidden;
}

#timeModal .modal-body {
    max-height: 60vh;
    overflow-y: auto;
}

#timeModal .modal-body::-webkit-scrollbar {
    width: 3px;
}

#timeModal .modal-body::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

#timeModal .modal-body::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

#timeModal .modal-body::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.modal-backdrop {
    backdrop-filter: blur(10px);
    background: rgba(0, 0, 0, 0.5);
    --bs-backdrop-opacity: 1 !important;
}

.modal-header {
    background-color: var(--mainYellowColor);
    border-bottom: 0px;
}

#dateModal .btn-close-modal,
#timeModal .btn-close-modal {
    background-color: #fff;
    opacity: 1;
    text-align: center;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    cursor: pointer;
    position: absolute;
    right: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.custom-header {
    background: var(--mainYellowColor);
    color: black;
    padding: 12px;
}

.custom-header .fa-arrow-left {
    font-size: 18px;
    cursor: pointer;
}

.input-group-text {
    background: white;
    border-right: 0;
}

.city-item {
    border: 1px solid #dddddd;
    background: #fff;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 10px;
    margin-bottom: 10px;
    cursor: pointer;
    border-radius: 4px;
}

.modal-body {
    background: #f5f6f7;
}

.input-grp-bx {
    display: flex;
    background: #fff;
    align-items: center;
    border-radius: 4px;
    height: 40px;
}

.input-icon {
    padding-left: 12px;
}

#searchCity {
    border: none;
}

.cityModalTitle {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

#cityModal .modal-body .icon {
    color: #969494;
}

#cityModal .modal-body .search-modal-city-name {
    margin-left: 10px;
    font-weight: 600;
}

.modal-content {
    overflow: hidden;
    border: none;
    box-shadow: 0px 0px 5px 0px rgba(89, 89, 89, 1);
}

.dropdown-select {
    font-size: 14px;
}

#review-booking-update {
    background: #0062ff;
    padding: 10px 0px;
    /* position:sticky;
  top:62px;
  z-index: 11; */
}

.from-group,
.to-group,
#box_group_input {
    position: relative;
}
.from-group label,
.to-group label,
#box_group_input label {
    position: absolute;
    top: -20px;
    left: -1px;
}

.from-group input,
.to-group input,
#box_group_input input,
#box_group_input select {
    padding: 5px 15px;
    cursor: pointer;
    border: 2px solid rgb(225, 231, 238);
    border-radius: 8px;
    position: relative;
    height: 60px;
}

#review-booking-update {
    .box_input {
        padding: 5px 8px;
        border-radius: 10px;
        min-width: inherit;
        background-color: rgba(211, 211, 211, 0.3);
    }

    .input_label {
        font-size: 11px;
        font-weight: 600;
        margin-bottom: 1px;
        color: var(--mainTextColor);
    }

    .input_data {
        color: #fff;
        border-radius: 0.5rem;
        font-weight: 700;
        text-transform: capitalize;
        font-size: 14px;
    }

    .updateBookingmodel {
        background: var(--mainColor);
        color: #fff;
        padding: 8px 5px;
        font-weight: 600;
        border: none;
        border-radius: 5px;
        border: 2px solid var(--mainTextColor);
        font-size: 15px;
        text-align: center;
        cursor: pointer;
        margin-bottom: 4px;
    }
}

.search-list {
    display: none;
    content: "";
    position: absolute;
    border: 1px solid #d4d4d4;
    box-shadow: 0 4px 5px 0 rgb(0 0 0 / 22%);
    background: #fff;
    width: 100%;
    z-index: 1000 !important;
    border-radius: 7px;

    .searching-list-box {
        padding: 5px 0px;
        max-height: 250px;
        min-height: 50px;
        overflow-y: scroll;
        scroll-behavior: smooth;
        cursor: pointer;
    }

    .searching-list-single-box {
        font-size: 14px;
        font-weight: 500;
        border-bottom: 1px solid #d4d4d4;
        padding: 8px 5px;
    }
    .searching-list-single-box:last-child {
        border-bottom: 0px;
    }

    .searching-list-single-box .bi-geo-alt-fill {
        font-size: 25px;
        color: rgb(247, 109, 87);
    }

    .search_input_box {
        display: flex;
        border-bottom: 1px solid #d4d4d4;
        padding: 5px 6px;
        align-items: center;
    }

    .search-input {
        width: 100%;
        border: none;
        height: 40px;
        font-weight: 600;
        color: #000;
        font-size: 15px;
    }

    .search-input::placeholder {
        font-size: 15px;
        color: #aeaeae;
    }

    .search-input:focus {
        outline: none;
        box-shadow: none;
    }

    .searching-list-box::-webkit-scrollbar {
        width: 2px;
    }

    .searching-list-box::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 10px;
    }
    .searching-list-box::-webkit-scrollbar-thumb:hover {
        background: #555;
    }
    .searching-list-single-box .full_address {
        font-size: 10px;
    }

    .searching-list-single-box .city-item-name {
        font-size: 15px;
        font-weight: 600;
    }
}

/*=====================================* Select Cab Css =====================================*/

#selectCab {
    .car-card-inner {
        display: flex;
        flex-direction: row;
    }

    .car-card {
        /* border-radius: 10px; */
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
        overflow: hidden;
        background: #fff;
        /* border: 1px solid var(--carList); */
        border: 1px solid #d2d2d2;
        margin-bottom: 20px;
        box-shadow: 0 2px 4px 0 #c8c8c8;
        border-radius: 4px;
    }

    .car-img {
        width: 25%;
        padding: 10px 10px;
        margin: auto 0;
    }

    .car-img img {
        width: 100%;
    }

    .car-info-data {
        width: 50%;
        padding: 10px 10px;
        margin: auto 0;
        border-right: 1px dashed #acacac;
    }

    .cab-price {
        width: 25%;
        padding: 10px 10px;
        margin: auto 0;
        text-align: center;
    }

    .car-info-data .extra-info-data {
        margin-top: 10px;
    }

    .car-info-data .extra-info-data ul {
        padding-left: 1rem;
        list-style-type: circle;
    }

    .car-info-data .extra-info-data ul li {
        font-size: 13px;
        font-weight: 600;
        padding: 3px 0px;
        list-style: circle;
    }

    .car-info-data .cab-name {
        font-size: 16px;
        font-weight: 700;
        margin-bottom: 5px;
    }

    .car-info-data .car-info-inner span {
        border-right: 2px solid var(--blackColor);
        font-size: 13px;
        font-weight: 500;
        padding-right: 6px;
        text-transform: capitalize;
        padding-left: 6px;
    }

    .car-info-data .car-info-inner span:first-child {
        padding-left: 0px;
    }

    .car-info-data .car-info-inner span:last-child {
        border-right: 0px solid var(--blackColor);
    }

    .cab-price .old-price {
        color: #9f9f9f;
        font-size: 21px;
        font-weight: 600;
        position: relative;
    }

    .cab-price .old-price::before {
        content: "";
        height: 2px;
        width: 80px;
        background: #9f9f9f;
        top: 15px;
        left: calc(50% - 40px);
        position: absolute;
        rotate: 167deg;
    }

    .cab-price .offer-price {
        color: var(--blackColor);
        font-weight: 700;
        font-size: 30px;
    }

    .cab-price .select_book_btn {
        background: var(--mainColor);
        border: none;
        padding: 10px 30px;
        color: var(--whiteColor);
        font-weight: 600;
        border-radius: 50px;
        cursor: pointer;
    }

    .fare-summary {
        background: #f3f7fc;
        padding: 5px 20px;
        font-weight: 600;
        color: var(--primaryColor);
        font-size: 13px;
        border-top: 1px solid #dadada;
    }

    .fare-summary-collapse ul {
        padding-left: 1rem;
        list-style-type: circle;
    }

    .fare-summary-collapse ul li {
        font-size: 13px;
        font-weight: 600;
        padding: 3px 0px;
        list-style-type: circle;
    }
    .fare-summary-collapse {
        border-top: 1px dashed #dadada;
    }
}

#breadcrumb {
    background: #f5f4f4;
    padding: 10px 0px;
}

#breadcrumb .breadcrumb-inner {
    font-size: 13px;
    font-weight: 500;
}

#breadcrumb .breadcrumb-inner a {
    text-decoration: none;
    color: #757575;
}

#otpModal .modal-body,
#otpModal .modal-content {
    background: transparent;
    border: 0px;
    box-shadow: inherit;
}

.otp-container {
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2);
    text-align: center;
    max-width: 350px;
    width: 100%;
    margin: auto;
}

.otp-container img {
    width: 50px;
    margin-bottom: 10px;
}

.otp-container h4 {
    font-weight: bold;
    margin-bottom: 10px;
}

.otp-input-container {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 15px;
}

.otp-input {
    width: 50px;
    height: 50px;
    font-size: 22px;
    text-align: center;
    border: 2px solid #3b82f6;
    border-radius: 8px;
    font-weight: bold;
    transition: 0.2s;
}

.otp-input:focus {
    border-color: #2563eb;
    outline: none;
    transform: scale(1.1);
}

.btn-verify {
    background: #3b82f6;
    color: white;
    font-size: 16px;
    border: none;
    padding: 10px;
    width: 100%;
    border-radius: 8px;
    margin-top: 15px;
    font-weight: bold;
    cursor: pointer;
}

.btn-verify:hover {
    background: #2563eb;
}

#booking .form-control::placeholder {
    font-size: 14px !important;
    font-weight: 500 !important;
}

#booking .form-control{
  font-size:14px;
  font-weight:600;
}
.overHidden {
    overflow: inherit;
}
.overHiddenremove {
    overflow: inherit;
}

.main-content-box {
    box-shadow: 0 2px 4px 0 #c8c8c8;
    border-radius: 5px;
    border: 1px solid #d2d2d2;
}

.white-bg {
    background-color: #fff;
}

.heading-main-content-box {
    font-size: 25px;
    font-weight: 600;
    text-align: center;
}

#main-content :is(h1, h2, h3, h4, h5, h6) {
    font-size: 20px;
    font-weight: 600;
}

#main-content p,
#main-content ul {
    font-size: 15px;
    font-weight: 400;
    margin: 20px 0px;
    line-height: 22px;
}

#main-content p:last-child {
    margin-top: 20px;
    margin-bottom: 0px;
}

#main-content .main-content-box p:last-child:only-child {
    margin-top: 0px;
}

#main-content ul {
    margin: 20px 0px;
    list-style: circle;
}

#main-content ul li {
    list-style: circle;
}

#route-content-full-box {
    margin-top: 50px;
    margin-bottom: 50px;
}

.box-handle-top {
    padding-top: 40px;
}

.box-handle-bottom {
    padding-bottom: 40px;
}

.discountAmtRow,
.enjoyapply,
.hide-content {
    display: none;
}

#whychoose-warpper {
    /* background: #e3f0ff; */
}

.box-handle-wrapper-top {
    margin-top: 40px;
}

.box-handle-wrapper-bottom {
    margin-top: 40px;
}
#whychoose {
    padding-top: 20px;
    padding-bottom: 20px;
}

.heading-class {
    font-size: 16px;
    font-weight: 600;
    margin-top: 10px;
}
#whychoose p {
    font-size: 11px;
    margin-bottom: 0px;
}

.book-now {
    background: linear-gradient(
        90deg,
        hsla(225, 78%, 59%, 1) 0%,
        hsla(197, 85%, 51%, 1) 100%
    );
    padding: 30px;
    border-radius: 10px;
    display: flex;
    position: relative;
}

.book-now h3 {
    color: #fff;
    font-weight: 600;
}

.book-now .offer-btn-wrapper {
    margin-top: 20px;
}

.book-now a {
    background: var(--mainColor);
    color: #fff;
    padding: 8px 20px;
    border-radius: 20px;
    font-weight: 600;
}

.book-now .img-div img {
    height: 230px;
    position: absolute;
    top: -58px;
    right: 98px;
}

.is-invalid-own {
    color: red;
    font-size: 11px;
    font-weight: 600;
    position: absolute;
    bottom: -20px;
    display: block;
}

.fullPayment {
    display: none;
}

#offerDeals .card {
    border: none;
    border-radius: 15px;
    box-shadow: 0 0 7px rgb(0 -1 6 / 6%) inset;
    background: linear-gradient(
        180deg,
        rgb(255 255 255) 8%,
        rgb(250 253 255) 100%
    );
    /* padding: 8px; */
    border: 1px solid #f5f5f5;
}
#offerDeals .card img {
    border-radius: 15px;
    height: 200px;
    object-fit: cover;
}

/*======================================== Update Location Modal ============================================*/

#updateLocation {
    .modal-content {
        overflow: visible;
        border: none;
        box-shadow: inherit;
        background-color: transparent;
    }
    .search_btn_list {
        width: 50%;
    }
    .modal-body {
        background-color: transparent;
    }
}

#selectCab .desktop {
    display: inherit;
}
#selectCab .mobileCabScreen {
    display: none;
}
#desktopScreenBookingUpdate {
    display: inherit;
}
#mobileScreenBookingUpdate {
    display: none;
}
.img-group-banner .desktop_img {
    display: inherit;
}
.img-group-banner .mobile_img {
    display: none;
}
.img-group-banner img {
    border-radius: 5px;
}

@media (min-width: 100px) and (max-width: 1220px) {
    .search_box_inner {
        display: inherit;
    }
    .box_input {
        margin-bottom: 10px;
        padding: 10px 10px;
    }
    .searching_cab_btn {
        margin-top: 20px;
        font-size: 18px;
        padding: 5px 20px;
    }
    .swap-btn {
        rotate: 90deg;
        right: 9px;
        top: -20px;
    }
    .search_btn_list .nav-item .nav-link {
        font-weight: 600;
    }
    .search_top_inner select {
        background-color: transparent !important;
    }
}

@media (max-width: 800px) {
    .search_btn_list .nav-item .nav-link {
        font-size: 11px;
        padding: 7px 10px !important;
    }
    .search_box_inner input::placeholder {
        font-size: 17px;
    }
    .search_box_inner label {
        font-size: 13px;
    }
    .search-list {
        position: fixed;
        z-index: 1000;
        top: 0px;
        left: 0px;
        border-radius: 0px;
        border: 0px;
        height: 100%;
    }
    .searching-list-box {
        min-height: 100% !important;
    }
    .overHidden {
        overflow: hidden;
    }
    .search_top_inner {
        margin: 16px;
        box-shadow: 0px 8px 24px 0px #1a1a1a1a;
        padding: 10px 3px;
    }
    .searching_cab_btn {
        padding: 10px;
        width: 100%;
        margin-top: 30px;
        border-radius: 50px;
        border: 0px;
    }
    .box_input {
        margin-bottom: 10px;
        padding: 5px 14px;
    }
    #fareSummaryRead .header {
        font-size: 16px !important;
    }
    #booking .header {
        font-size: 16px;
        font-weight: 500;
    }
    .custom-checkbox {
        font-size: 14px;
    }
    #booking .card {
        box-shadow: 0 3px 6px rgba(54, 60, 88, 0.050980392156862744);
    }
    #booking .form-label {
        font-size: 13px;
    }
    .otp-btn {
        font-size: 13px;
    }
    .search_btn_list {
        width: 100%;
        padding: 0px 7px;
    }
    #hero_banner h1 {
        font-size: 38px !important;
        font-weight: 500;
    }
    #updateLocation {
        .search_btn_list {
            width: 100%;
        }
        .modal-body {
            padding: 0px;
        }
    }
    #updateLocation {
        --bs-modal-margin: 0px !important;
    }
    #mobileScreenBookingUpdate .updateBookingmodel {
        padding: 8px 13px;
        border-width: 1px;
    }
    #mobileScreenBookingUpdate .mobileScreenLocation {
        text-transform: capitalize;
        color: #fff;
        font-weight: 600;
        font-size: 16px;
    }
    #mobileScreenBookingUpdate .mobileScreenDateTime {
        color: #fff;
        font-weight: 500;
        font-size: 12px;
    }
    #desktopScreenBookingUpdate {
        display: none;
    }
    #mobileScreenBookingUpdate {
        display: inherit;
    }
    .img-group-banner .desktop_img {
        display: none;
    }
    .img-group-banner .mobile_img {
        display: inherit;
    }
    .remove-searching-wrapper {
        padding: 0px 10px;
        width: 40px;
    }
    .book-now .img-div img {
        height: 184px;
        position: absolute;
        top: -61px;
        right: 4px;
    }
}

@media (max-width: 500px) {
    .book-desktop {
        display: none;
    }
    .book-mobile {
        display: block;
    }
    #booking #review-booking-page .card-body {
        display: inherit !important;
    }
    #booking #review-booking-page .image-area {
        width: 35%;
    }
    #booking #review-booking-page .cab-details {
        width: 65%;
    }
    #booking #review-booking-page .cab-info {
        font-size: 10px;
    }
    #booking #review-booking-page .cab-info span {
        border-right: 1px solid #000;
    }
    #booking #review-booking-page .cab-info span:last-child {
        border-right: 0px solid #000;
    }
    #booking .book-mobile .cab-details {
        padding: 10px 0px !important;
        border-right: 0px dashed var(--borderColor);
    }
    .mobile-inner-booking {
        border-bottom: 1px solid var(--borderColor);
    }
    #booking .city-review-date-time {
        width: 100%;
    }
    .otp-btn {
        font-size: 12px;
    }
    #booking .cab-name {
        margin-bottom: 6px;
        font-size: 15px;
        font-weight: 600;
    }
    #booking .city-review {
        margin-bottom: 6px;
        font-size: 15px;
        font-weight: 600;
    }
    #booking .form-control::placeholder {
        font-size: 13px !important;
        font-weight: 500 !important;
    }
    #booking #fareCard .card-body ul li {
        font-size: 14px;
    }
    #booking .totalprice {
        font-size: 18px;
    }
    #booking .custom-checkbox {
        font-size: 14px;
        font-weight: 600;
    }
    #selectCab .desktop {
        display: none;
    }
    #selectCab .mobileCabScreen {
        display: inherit;
    }
    #selectCab .car-info-data {
        border-right: 0px;
        width: 60%;
    }
    #selectCab .car-card-inner .car-img {
        width: 40%;
    }
    #selectCab .cab-price {
        width: 100%;
        text-align: left;
        padding: 10px 0px;
    }
    #selectCab .cab-price .offer-price {
        font-size: 22px;
        font-weight: 600;
    }

    #selectCab .car-info-data .car-info-inner .info-data {
        width: 50%;
        font-size: 13px;
        text-transform: capitalize;
        font-weight: 600;
    }

    /* #selectCab .car-info-data .car-info-inner span{padding-left:0px; padding-right:11px; border-right:0px; }
  #selectCab .car-info-data .car-info-inner span:nth-child(3){padding-left:0px; padding-right:5px;} */

    .card-section .card-fare {
        order: 1;
    }
    .card-section .card-coupon {
        order: 2;
    }
    .card-section .card-payment {
        order: 3;
    }
    .card-section .card-readbefore {
        order: 4;
    }
    #continueBtn {
        order: 5;
    }
    .swap-btn-container {
        display: inherit;
    }
    .from-group {
        padding: 5px 0px;
        margin-bottom: 5px;
        border-top: 0px;
        border-left: 0px;
        border-right: 0px;
    }
    .to-group {
        padding: 5px 0px;
        margin-bottom: 5px;
        margin-top: 5px;
        border-top: 1px solid #3995ca;
    }
    .from-group input,
    .to-group input,
    #box_group_input input,
    #box_group_input select {
        height: inherit;
        border: 0px;
        padding: 0px 10px;
    }
    #box_group_input {
        margin-bottom: 10px;
    }
    #box_group_input:last-child {
        margin-bottom: 0px;
    }

    .is-invalid-own {
        position: inherit;
        bottom: 0px;
        left: 10px;
    }
    .from-group label,
    .to-group label,
    #box_group_input label {
        position: inherit;
        top: 0;
        left: 10px;
    }
    .swap-btn-container {
        border: 1px solid #3995ca;
        border-radius: 10px;
        background-color: #fff;
    }
    .searching_cab_btn {
        position: inherit;
        transform: inherit;
    }
    .search_box_inner {
        margin-top: 0px;
        margin-bottom: 0px;
    }
    .swap-btn {
        top: inherit;
        right: 40px;
        left: inherit;
        border-color: #3995ca;
    }
    .accordion-header button {
        padding: 10px 10px;
        font-size: 13px;
    }
    .accordion-body {
        padding: 10px;
        font-size: 12px !important;
    }
    .heading-main-content-box {
        font-size: 20px;
    }
    #main-content p {
        font-size: 13px;
    }
    #main-content :is(h1, h2, h3, h4, h5, h6) {
        font-size: 17px;
        font-weight: 600;
        line-height: 26px;
    }
    #main-content ul {
        font-size: 13px;
    }
    .heading-class {
        font-size: 12px;
    }
    #whychoose .card-body {
        padding: 5px;
    }
    .search_top_inner {
        border-radius: 8px;
        background: #f4f4f4;
    }
    #box_group_input,
    #local .from-group {
        padding: 5px 0px;
        background-color: #fff;
        border: 1px solid #3995ca;
        border-radius: 10px;
        margin-top: 12px;
    }
    .field-display {
        font-size: 19px;
    }
    .field-display:focus-visible {
        outline: none;
        box-shadow: none;
    }

    #oneway .swap-btn-container {
        width: 100%;
    }

    #oneway #box_group_input,
    #oneway .from-group,
    #oneway .to-group {
        width: 100%;
    }

    #round-trip .swap-btn-container {
        width: 100%;
    }

    #round-trip #box_group_input,
    #round-trip .from-group,
    #round-trip .to-group {
        width: 100%;
    }
    #local #box_group_input,
    #local .from-group,
    #local .to-group {
        width: 100%;
    }

    #airport #box_group_input,
    #airport .from-group,
    #airport .to-group {
        width: 100%;
    }

    .book-now {
        padding: 20px;
    }
    .book-now h3 {
        font-size: 16px;
    }
    .book-now a {
        background: var(--mainColor);
        color: #fff;
        padding: 8px 10px;
        border-radius: 50px;
        font-weight: 600;
        font-size: 13px;
    }
    .mobile_book_btn {
        margin-left: 5%;
        width: 90%;
        margin-bottom: 10px;
        background-color: var(--mainColor);
        color: #fff;
        border-radius: 50px;
        border: none;
        height: 35px;
        font-weight: 600;
        font-size: 15px;
    }
}

#addressSuggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1050;
    background: #fff;
    border: 1px solid #ced4da;
    border-top: none;
    max-height: 200px;
    overflow-y: auto;
    display: none;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

#addressSuggestions a {
    font-size: 13px !important;
    font-weight: 600;
}
#addressSuggestions::-webkit-scrollbar {
    width: 6px; /* Total scrollbar width */
}

#addressSuggestions::-webkit-scrollbar-track {
    background: #f1f1f1; /* Light background */
    border-radius: 0px;
}

#addressSuggestions::-webkit-scrollbar-thumb {
    background: #ccc; /* Light gray thumb */
    border-radius: 10px;
    width:0px; /* Thumb width inside scrollbar */
}

#addressSuggestions::-webkit-scrollbar-thumb:hover {
    background: #999; /* Slightly darker on hover */
}
#getLocationBtn{
     background:var(--mainColor);
     color:#fff;
     border-left:0px !important;
     border:1px solid var(--borderColor);
     cursor: pointer;
     padding:0px 15px 0px 15px;
     border-radius: 7px;
     border-bottom-left-radius: 0px !important;
     border-top-left-radius: 0px !important;
}

#pickup_address{
    border-bottom-right-radius: 0px !important;
    border-top-right-radius: 0px !important;
    border-right:0px !important;
}

.bg-pink {
    color: rgb(0, 0, 0);
    background: rgb(255, 192, 217);
}

.bg-purple {
    color: rgb(0, 0, 0);
    background: rgb(208, 191, 255);
}
.bg-green {
    color: rgb(0, 0, 0);
    background: rgb(163, 255, 214);
}

.bg-yellow {
    color: rgb(0, 0, 0);
    background: rgb(255, 250, 183);
}
.main-button{
    background: #3b82f6;
    color: white;
    font-size: 16px;
    border: none;
    padding: 10px;
    width: 100%;
    border-radius: 8px;
    margin-top: 15px;
    font-weight: bold;
    cursor: pointer;
}

.main-button:hover {
    background: #2563eb;
}