/* modals */
/* first */
#personal_modal_sat .modal-content {
    border-radius: 10px;
}

#personal_modal_sat .modal-dialog {
    max-width: 788px;
}

#personal_modal_sat .modal-header {
    padding-block: 14px;
    padding-inline: 24px;
    background-color: #f1f5f9;
}

#personal_modal_sat .modal-body {
    padding-block: 18px;
    padding-inline: 24px;
}

#personal_modal_sat .modal-header .quote-title {
    font-family: var(--font-family-Lato);
    font-size: var(--font-size-14);
    font-weight: 500;
    line-height: 20px;
    letter-spacing: -0.01em;
    color: #000000;
    margin-bottom: 0px;
}

.form-errors {
    font-size: 12px;
    color: red;
    margin-top: 6px;
}

.mb10sc {
    margin-bottom: 10px;
}

.iti.iti--allow-dropdown {
    width: 100%;
}

.form-secion label {
    font-family: var(--font-family-Lato);
    font-size: var(--font-size-14);
    font-weight: 500;
    line-height: 20px;
    color: #344054;
    margin-bottom: 6px;
}

.form-secion .form-control {
    font-family: var(--font-family-Lato);
    font-size: var(--font-size-14);
    border-radius: 8px;
    font-weight: 400;
    line-height: 24px;
    border: 1px solid #d0d5dd;
    color: #101828;
    height: 40px;
}

.form-secion .form-control:focus {
    border-color: #5cbaf5;
    box-shadow: 0 0 0 0.25rem rgba(92, 186, 245, 0.25);
}

.form-scion-btn {
    height: 40px;
    width: 208px;
    color: white;
    font-family: var(--font-family-Lato);
    font-size: var(--font-size-16);
    font-weight: 700;
    line-height: 24px;
    letter-spacing: -0.01em;
    background-color: var(--color-blue-50);
    border-radius: 4px;
    padding-block: 8px;
    padding-inline: 10px;
    border: 1px solid var(--color-blue-50);
    transition-duration: 0.4s;
    margin-top: 18px;
    margin-bottom: 32px;
}

.form-scion-btn:hover {
    background-color: #2a9fe8bc;
}

.form-scion-btn:focus-visible {
    border: 1px solid var(--color-blue-50);
}

.form-scion-btn:active {
    background-color: #2a9fe8bc;
    transform: translateY(2px);
}

.ty-border {
    border: 1px solid var(--color-blue-60);
    border-radius: 4px;
}

.cty-delivery-srvc {
    padding: 10px;
    max-width: 100% !important;
    width: max-content;
}

.form-label-secion span {
    font-family: var(--font-family-Lato);
    font-size: var(--font-size-12);
    font-weight: 500;
    line-height: 16px;
    letter-spacing: -0.01em;
    color: #98a2b3;
}

.flex-frm-cls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.flex-frm-cls label {
    display: flex;
    align-items: center;
    gap: 6px;
}

.flex-frm-cls span {
    font-family: var(--font-family-Lato);
    font-size: var(--font-size-12);
    font-weight: 500;
    line-height: 16px;
    letter-spacing: -0.01em;
    color: var(--color-black-40);
}

.mb-12bok {
    margin-bottom: 12px !important;
}

/* second modal*/
#card_modal_sat .modal-content {
    border-radius: 10px;
}

#card_modal_sat .modal-dialog {
    max-width: 788px;
}

#card_modal_sat .modal-header {
    padding-block: 14px;
    padding-inline: 24px;
    background-color: #f1f5f9;
}

#card_modal_sat .modal-body {
    padding-block: 18px;
    padding-inline: 24px;
}

#card_modal_sat .modal-header .quote-title {
    font-family: var(--font-family-Lato);
    font-size: var(--font-size-14);
    font-weight: 500;
    line-height: 20px;
    letter-spacing: -0.01em;
    color: #000000;
    margin-bottom: 0px;
}

/* third modal*/
#bank_modal_sat .modal-content {
    border-radius: 10px;
}

#bank_modal_sat .modal-dialog {
    max-width: 788px;
}

#bank_modal_sat .modal-header {
    padding-block: 14px;
    padding-inline: 24px;
    background-color: #f1f5f9;
}

#bank_modal_sat .modal-body {
    padding-block: 18px;
    padding-inline: 24px;
}

#bank_modal_sat .modal-header .quote-title {
    font-family: "Lato", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: -0.01em;
    color: #000000;
    margin-bottom: 0px;
}

.bank-info-table {
    margin-top: 28px;
}

.bank-info-table td {
    padding-inline: 10px;
    padding-block: 8px;
    border-bottom: 22px solid transparent;
    background-clip: padding-box;
}

.bank-info-table th {
    padding-inline: 10px;
    padding-block: 8px;
    border-bottom: 22px solid transparent;
    background-clip: padding-box;
}

.bank-info-current {
    flex-basis: 16ch;
    padding: 6px 10px;
    font-family: var(--font-family-Lato);
    font-size: var(--font-size-16);
    font-weight: 500;
    line-height: 24px;
    letter-spacing: -0.01em;
    color: var(--color-black-50);
    background-color: #ededf1;
}

.bank-info-address {
    flex-basis: 23ch;
    padding: 6px 10px;
    font-family: var(--font-family-Lato);
    font-size: var(--font-size-14);
    font-weight: 600;
    line-height: 20px;
    letter-spacing: -0.01em;
    color: #1c6a9b;
}

.mb-tb-22 {
    margin-bottom: 22px;
    display: flex;
}

.error-cardsshow {
    padding: 10px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    border: 2px solid #d92d20;
    margin-bottom: 26px;
    border-radius: 4px;
}

.error-cardsshow p {
    margin: 0px;
    font-family: var(--font-family-Lato);
    font-size: var(--font-size-16);
    font-weight: 700;
    line-height: 24px;
    letter-spacing: -0.01em;
    color: #d92d20;
    display: flex;
    align-items: center;
    gap: 13px;
}

.err-lists-card {
    padding-left: 26px;
    margin: 0px;
    font-family: var(--font-family-Lato);
    font-size: var(--font-size-14);
    font-weight: 600;
    line-height: 20px;
    color: var(--color-black-50);
    letter-spacing: -0.01em;
}

.car-payment-infoform {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
}

.infoform-item1 {
    border-right: 1px solid #cac8d4;
    padding-right: 13px;
}

.infoform-item2 {
    padding-left: 13px;
}

.cards-types img {
    cursor: pointer;
}

.cards-types {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.infoform-item2 p {
    font-family: var(--font-family-Lato);
    font-size: var(--font-size-14);
    font-weight: 600;
    line-height: 20px;
    letter-spacing: -0.01em;
    color: #475467;
    margin-bottom: 10px;
}

.default-check {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
}

.default-check .form-check-label {
    cursor: pointer;
    font-family: var(--font-family-Lato);
    font-size: var(--font-size-12);
    font-weight: 600;
    line-height: 16px;
    letter-spacing: -0.01em;
    margin-bottom: 0px;
}

.form-submit-btn {
    background-color: var(--color-blue-50);
    color: white;
    height: 36px;
    width: 100%;
    max-width: 105px;
    padding-inline: 10px;
    padding-block: 8px;
    font-family: var(--font-family-Lato);
    font-size: var(--font-size-14);
    font-weight: 500;
    line-height: 20px;
    letter-spacing: -0.01em;
    border-radius: 4px;
    border: 1px solid var(--color-blue-50);
}

.form-submit-btn-bank {
    background-color: var(--color-blue-50);
    color: white;
    height: 36px;
    width: 100%;
    max-width: 146px;
    padding-inline: 10px;
    padding-block: 8px;
    font-family: var(--font-family-Lato);
    font-size: var(--font-size-14);
    font-weight: 500;
    line-height: 20px;
    letter-spacing: -0.01em;
    border-radius: 4px;
    border: 1px solid var(--color-blue-50);
    text-align: center;
}

.bank-modal-sep h2 {
    font-family: Lato;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    letter-spacing: -0.01em;
    color: var(--color-black-50);
    margin-bottom: 0;
}

.bank-modal-sep p {
    margin-bottom: 0;
    font-family: "Lato", sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 28px;
    letter-spacing: -0.01em;
    color: #475467;
}

.form-cancel-btn {
    border: 1px solid #98a2b3;
    background-color: white;
    color: var(--color-black-50);
    padding-inline: 10px;
    padding-block: 8px;
    width: 100%;
    max-width: 83px;
    height: 36px;
    font-family: var(--font-family-Lato);
    font-size: var(--font-size-14);
    font-weight: 500;
    line-height: 20px;
    letter-spacing: -0.01em;
    border-radius: 4px;
}

.form-cancel-btn a[href^="tel:"] {
    color: var(--color-black-50);
}

.actions-modal {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    margin-top: 32px;
}

/* breadcrumb */
#breadcrumb-section {
    padding-block: 19px;
}

#breadcrumb-section .breadcrumb-item {
    font-family: var(--font-family-Lato);
    font-size: var(--font-size-14s);
    /* font-weight: 500; */
    line-height: 20px;
    letter-spacing: -0.01em;
    text-align: left;
}

.breadcrumb {
    margin-bottom: 0px;
}

/* Booking section */
.pyb32 {
    padding-block: 32px;
}

#mainsection_booking {}

/* right section */
.card-booking-detail {
    border-radius: 10px;
    background-color: #fbfdff;
    border: 1px solid #cbcbcb;
    padding: 12px;
}

.promo-flag-items span {
    font-family: var(--font-family-Lato);
    font-size: var(--font-size-12);
    font-weight: 600;
    line-height: 16px;
    letter-spacing: -0.01em;
    padding-block: 2px;
    padding-inline: 10px;
    border-radius: 31px;
    display: flex;
    align-items: center;
}

span.modal-promo-1 {
    background-color: #ff4b44;
    color: white;
}

span.modal-promo-2 {
    background-color: #fbf2cb;
    color: #c8811a;
}

.promo-flag-items {
    display: flex;
    justify-content: start;
    gap: 23px;
}

.msection-title {
    font-family: var(--font-family-Lato);
    font-size: 16px;
    font-weight: 700;
    line-height: 23.93px;
    letter-spacing: -0.018em;
    color: var(--color-blue-70);
    margin-top: 11px;
    margin-bottom: 7px;
}

.ship-information {
    margin-block: 13.21px;
}

.ship-information .title {
    font-family: Lato;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    color: #0c1529;
    margin-bottom: 5px;
}

.ship-information .para {
    font-family: Lato;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    color: #0c1529;
}

.ship-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 11px;
    border-bottom: 1px solid #eaeaea;
    margin-bottom: 11px;
}

.ship-info .title-spn {
    font-family: Lato;
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    color: #5d6370;
}

.ship-info .para-spn {
    font-family: Lato;
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    color: #121212;
}

.specs-section {
    display: flex;
    gap: 21px;
}

.specs-section-item h4 {
    font-family: var(--font-family-Lato);
    font-size: 12px;
    font-weight: 400;
    line-height: 18.28px;
    letter-spacing: -0.012em;
}

.specs-section span {
    font-size: 8px;
    align-self: center;
    color: var(--color-black-20s);
}

.selects-section {
    display: flex;
    margin-top: 24px;
    gap: 4px;
}

.selects-section-item {
    flex-grow: 1;
}

.selects-section label {
    font-family: var(--font-family-Lato);
    font-size: var(--font-size-14);
    font-weight: 700;
    line-height: 13px;
    letter-spacing: -0.01em;
    color: var(--color-black-50);
}

.selects-section select {
    font-family: var(--font-family-Lato);
    font-size: var(--font-size-12);
    font-weight: 500;
    line-height: 16px;
    letter-spacing: -0.01em;
    color: var(--color-black-40);
    background-color: #f6f6f8;
    border: 1px solid #5d6370b3;
    background-color: #ffffff;
    height: 33px;
    border-radius: 5px;
}

.selects-section select.form-select {
    background-size: 16px 8px;
    border: 1px solid #0000001a;
}

.radio-selectors {
    margin-top: 24px;
}

.radio-selector-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
}

.radio-selectors span {
    font-family: var(--font-family-Lato);
    font-size: 13px;
    font-weight: 500;
    line-height: 17.78px;
    letter-spacing: -0.01em;
    color: var(--color-black-50);
    display: flex;
    justify-content: start;
    flex-grow: 1;
    align-items: center;
    gap: 8.49px;
}

.radio-selectors label {
    font-family: var(--font-family-Lato);
    font-size: 12px;
    font-weight: 500;
    line-height: 17.78px;
    letter-spacing: -0.01em;
    color: var(--color-black-50);
}

.labels-section-booking {
    display: flex;
    align-items: center;
    gap: 11.55px;
}

.radio-selectors .check-input-checkbox {
    margin-top: 2px;
}

.car-totalprice-modal {
    margin-top: 12px;
}

.product-price {
    margin-top: 24px;
}

.c-title {
    font-family: var(--font-family-Lato);
    font-size: var(--font-size-14);
    font-weight: 700;
    line-height: 18.73px;
    letter-spacing: -0.01em;
    color: var(--color-black-50);
}

.car-price-modal {
    margin-bottom: 8px;
}

.car-price-modal tr {
    border-bottom: 1px solid #eaeaea;
}

.car-price-modal tr td {
    padding-block: 11px;
}

.gren-slr {
    color: #1ba97f !important;
}

input.coupn-fil {
    font-family: Lato;
    font-size: 11.56px;
    font-weight: 400;
    line-height: 16.51px;
    letter-spacing: -0.01em;
    width: 100%;
    color: #605f5f;
    border: 1px solid #cbcbcb;
    border-radius: 4.95px;
    height: 33px;
    padding-inline: 8px;
}

button.coupn-fil:focus-visible {
    outline: none;
}

button[data-status="remove"].coupn-fil {
    width: 100%;
    max-width: max-content;
    height: 33px;
    border: 1px solid #aeb1b8;
    background-color: transparent;
    font-family: "Lato";
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: -0.01em;
    color: #383838;
    border-radius: 3.3px;
    padding: 6px 21px;
}

button[data-status="apply"].coupn-fil {
    width: 100%;
    max-width: max-content;
    height: 33px;
    border: 1px solid #075884;
    background-color: #075884;
    font-family: "Lato";
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: -0.01em;
    color: #ffffff;
    border-radius: 3.3px;
    padding: 6px 21px;
}

.coupn-added p {
    margin-bottom: 0px;
    display: flex;
    align-items: center;
    gap: 2px;
}

.coupn-added p span:first-of-type {
    font-family: Lato;
    font-size: 11.56px;
    font-weight: 400;
    line-height: 16.51px;
    letter-spacing: -0.01em;
    color: #605f5f;
}

.coupn-added p span:last-of-type {
    font-family: Lato;
    font-size: 11.56px;
    font-weight: 700;
    line-height: 16.51px;
    letter-spacing: -0.01em;
    color: #252525;
}

.coupn-added {
    height: 33px;
    width: 100%;
    border: 1px solid #2f9461;
    background-color: #effdf6;
    border-radius: 4.95px;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 10px 13px;
}

.c-price-title {
    color: #353c4d;
    font-family: Lato;
    font-size: 14px;
    font-weight: 700;
    line-height: 18.73px;
    letter-spacing: -0.01em;
    text-align: left;
}

.select-accept-currcies {
    background-color: #ededf1;
    width: 81px;
    height: 32px;
    padding: 6px 12px 6px 12px;
    border-radius: 6px;
    font-family: Lato;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    box-shadow: 0px 1px 4px 0px #0000001a;
    border: unset;
    background-size: 10px;
}

.accpt-texture {
    color: #353c4d;
    font-family: Lato;
    font-size: 14px;
    font-weight: 700;
    line-height: 17.78px;
    letter-spacing: -0.01em;
    text-align: left;
    margin-bottom: 0;
}

.c-price {
    font-family: var(--font-family-Lato);
    font-size: var(--font-size-18);
    font-weight: 700;
    line-height: 18.73px;
    letter-spacing: -0.01em;
    color: #0c1529;
    padding-right: 21px;
}

.c-price-country {
    color: #7a7493;
    font-family: Lato;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: -0.01em;
}

.order-title-booking {
    font-family: var(--font-family-Lato);
    font-size: 16px;
    font-weight: 700;
    line-height: 28px;
    letter-spacing: -0.014em;
    color: var(--color-black-50);
    margin-bottom: 12px;
}

.rht-55 {
    /* top: 55px; */
}

/* left side */
.cmn-heading-booking {
    font-family: var(--font-family-Lato);
    font-size: var(--font-size-18);
    font-weight: 700;
    line-height: 26px;
    letter-spacing: -0.012em;
    color: var(--color-black-50);
    margin-bottom: 16px;
}

.separator {
    margin-right: 39px;
    padding-bottom: 16px;
    border-bottom: 1px solid #cbd5e178;
}

.separator-payment {
    margin-right: 39px;
    padding-bottom: 16px;
}

.active-information .cmn-heading-booking {
    color: var(--color-black-60);
}

.add-new-adress-btndiv {
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    padding: 10px;
    min-height: 44px;
    min-width: 108px;
}

.add-new-adress-btndiv-payment {
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    padding: 16px 10px;
}

.add-new-adress-btndivf {
    display: flex;
    justify-content: center;
}

.add-new-address-btn {
    font-family: var(--font-family-Lato);
    font-size: var(--font-size-16);
    font-weight: 500;
    line-height: 24px;
    letter-spacing: -0.01em;
    color: var(--color-blue-60);
    max-width: 160px;
    display: flex;
    justify-content: flex-start;
    gap: 6px;
}

.add-new-address-btn-payment {
    font-family: var(--font-family-Lato);
    font-size: var(--font-size-16);
    font-weight: 500;
    line-height: 24px;
    letter-spacing: -0.01em;
    color: var(--color-blue-60);
    display: flex;
    justify-content: flex-start;
    gap: 6px;
}

.add-sep {
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    padding: 10px;
    width: 200px;
    height: 200px;
    max-height: 44px;
    max-width: 180px;
}

.para-final-info {
    font-family: var(--font-family-Lato);
    font-size: var(--font-size-16);
    font-weight: 500;
    line-height: 24px;
    letter-spacing: -0.01em;
    color: var(--color-black-50);
    margin-bottom: 5px;
}

.change-info {
    font-family: var(--font-family-Lato);
    font-size: var(--font-size-16);
    font-weight: 500;
    line-height: 24px;
    letter-spacing: -0.01em;
    color: var(--color-blue-60);
}

.valign-top {
    vertical-align: top;
}

.pt16-bok {
    padding-top: 16px;
}

.address-table {
    height: 44px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 16px;
}

.address-table-payment {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 16px;
}

.address-table p {
    margin-bottom: 0px;
    font-family: var(--font-family-Lato);
    font-size: var(--font-size-16);
    font-weight: 500;
    line-height: 24px;
    letter-spacing: -0.01em;
    color: #98a2b3;
    max-width: 622px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.address-table-payment .address-titlename {
    margin-bottom: 0px;
    font-family: var(--font-family-Lato);
    font-size: var(--font-size-16);
    font-weight: 500;
    line-height: 24px;
    letter-spacing: -0.01em;
}

.sub-flx {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mcr-30 {
    margin-left: 29px;
}

.address-table p span {
    color: #101828 !important;
}

.address-table-payment span {
    color: #101828 !important;
}

.inactive-address {
    border: 1px solid #dcdae2;
    background-color: #ededf1;
}

.active-address {
    border: 1px solid #2a9fe8;
    background-color: #e9effd;
}

.form-cmn-btn {
    height: 36px;
    width: 176px;
    color: white;
    font-family: var(--font-family-Lato);
    font-size: var(--font-size-14);
    font-weight: 500;
    line-height: 20px;
    letter-spacing: -0.01em;
    background-color: var(--color-blue-50);
    border-radius: 4px;
    padding-block: 8px;
    padding-inline: 10px;
    border: 1px solid var(--color-blue-50);
    transition-duration: 0.4s;
}

.mtb-10 {
    margin-top: 10px;
}

.form-cmn-btn:hover {
    background-color: #2a9fe8bc;
}

.form-cmn-btn:focus-visible {
    border: 1px solid var(--color-blue-50);
}

.form-cmn-btn:active {
    background-color: #2a9fe8bc;
    transform: translateY(2px);
}

.form-cmn-btn[disabled] {
    background-color: #ced0d4;
    border: 1px solid #ced0d4;
    border-radius: 4px;
    padding: 8px 10px 8px 10px;
    color: white;
    height: 36px;
    width: 176px;
    transition-duration: 0.4s;
}

.pmt {
    margin-top: 24px;
}

.place-order p {
    font-family: var(--font-family-Lato);
    font-size: var(--font-size-14);
    font-weight: 500;
    line-height: 20px;
    letter-spacing: -0.01em;
    color: var(--color-black-30);
    margin-top: 16px;
    text-align: center;
}

.place-ord-btn {
    background-color: var(--color-blue-50);
    border: 1px solid var(--color-blue-50);
    border-radius: 4px;
    padding: 8px 10px 8px 10px;
    color: white;
    height: 36px;
    width: 176px;
    transition-duration: 0.4s;
    font-family: var(--font-family-Lato);
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: -0.01em;
}

.place-ord-btn:focus-visible {
    border: 1px solid var(--color-blue-50);
}

.place-ord-btn:active {
    background-color: #2a9fe8bc;
    transform: translateY(2px);
}

.place-ord-btn[disabled] {
    background-color: #ced0d4;
    border: 1px solid #ced0d4;
    border-radius: 4px;
    padding: 8px 10px 8px 10px;
    color: white;
    height: 36px;
    width: 176px;
    transition-duration: 0.4s;
}

.coupon-table {
    margin-top: 16px;
}

.coupon-field {
    height: 40px;
    max-width: 306px;
    background-color: white;
    font-family: var(--font-family-Lato);
    font-size: var(--font-size-12);
    font-weight: 400;
    line-height: 24px;
    color: #667085;
    border-radius: 10px;
    border: 1px solid #d0d5dd;
}

.flex-coupon {
    display: flex;
    justify-content: start;
    gap: 16px;
    align-items: center;
}

.mrb39d {
    padding-right: 46px;
}

.mbpay-24 {
    margin-bottom: 24px;
}

.mx-wdth-154 {
    max-width: 160px;
}

.menu-payment {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-family-Lato);
    font-size: var(--font-size-16);
    font-weight: 500;
    line-height: 24px;
    letter-spacing: -0.01em;
    color: var(--color-black-50);
    padding-block: 10px;
}

.menu-payment .trash-bin {
    fill: #2f2b43;
}

.menu-payment:hover {
    background-color: #f1f5f9 !important;
}

.menu-payment.text-remove:hover {
    color: red;
}

.menu-payment.text-remove:hover .trash-bin {
    color: red;
    fill: red;
}

.menu-payment:active {
    color: var(--color-black-50);
    text-decoration: none;
    background-color: rgba(128, 128, 128, 0.291);
}

.reserve-car {
    margin-right: 39px;
}

/* checkout new */
.main-title {
    font-family: Sofia Pro;
    font-size: 24px;
    font-weight: 700;
    line-height: 24.57px;
    letter-spacing: -0.018em;
    color: #353c4d;
    margin-bottom: 10px;
}

.main-title span {
    color: #2384c1;
}

.secondary-title {
    font-family: Lato;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: -0.01em;
    color: #5d6370;
    margin-bottom: 0px;
}

.ordertext {
    font-family: Lato;
    font-size: 18px;
    font-weight: 700;
    line-height: 28px;
    letter-spacing: -0.014em;
    color: #475569;
}

.order-number {
    font-family: Lato;
    font-size: 20px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: -0.01em;
    color: #5d6370;
    padding-left: 8px;
}

.order-status {
    font-family: Lato;
    font-size: 20px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: -0.01em;
    color: #2f9461;
    padding-left: 8px;
}

.track-ordr-btn {
    background-color: #2384c1;
    border: 1px solid #2384c1;
    font-family: Lato;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    letter-spacing: -0.01em;
    color: white;
    border-radius: 4px;
    height: 44px;
    width: 130px;
}

.address-title {
    font-family: Lato;
    font-size: 18px;
    font-weight: 700;
    line-height: 26px;
    letter-spacing: -0.012em;
    color: #353c4d;
}

.address-main {
    color: #353c4d;
    font-family: Lato;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: -0.01em;
    padding-top: 4px;
}

.cmn-padding {
    padding-block: 16px;
}

.cmb-border {
    border-bottom: 1px solid #cbd5e185;
}

.go-search {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    font-family: Lato;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: -0.01em;
    color: #2a9fe8;
    margin-top: 32px;
}

/* track-order */
.brb-8 {
    border-bottom: 8px solid #fbfdff;
}

.fws-600 {
    font-weight: 600 !important;
}

#questionaries_section {
    background-color: #f6f6f8;
    padding-block: 32px;
}

.quest-title {
    font-family: Sofia Pro;
    font-size: 24px;
    font-weight: 600;
    line-height: 36px;
    letter-spacing: -0.018em;
    color: #08202e;
    margin-bottom: 8px;
}

.quest-para {
    font-family: Lato;
    font-size: 20px;
    line-height: 40px;
    letter-spacing: 0.02em;
    color: #5d6370;
    font-weight: 400;
    margin: 0px;
}

.quest-para a {
    color: #2384c1;
    font-weight: 700;
}

.main-heading-track {
    font-family: Sofia Pro;
    font-size: 24px;
    font-weight: 600;
    line-height: 32px;
    letter-spacing: -0.016em;
    color: #08202e;
    margin-bottom: 24px;
}

.timeline-items {
    margin-bottom: 17px;
    padding-left: 35px;
    position: relative;
    border-left: 2px solid #cac8d4;
    padding-bottom: 8px;
}

.timeline-items h2 {
    font-family: Lato;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: -0.01em;
    color: #344054;
    margin-bottom: 2px;
}

.timeline-items p {
    font-family: Lato;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: -0.01em;
    color: #475467;
    margin-bottom: 2px;
}

.timeline-items h4 {
    font-family: Lato;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: -0.01em;
    color: #7a7493;
    margin-bottom: 0px;
}

.timeline-items.completed::before {
    content: "";
    position: absolute;
    width: 40px;
    height: 40px;
    top: -7px;
    left: -20px;
    border: 4px solid white;
    border-radius: 50%;
    background: #2384c1;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}

.timeline-items.inprocess::before {
    content: "";
    position: absolute;
    font-size: 22px;
    width: 32px;
    height: 32px;
    top: -5px;
    left: -16px;
    border: 2px solid #d0d5dd;
    color: #d0d5dd;
    border-radius: 50%;
    background: #eaecf0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.timeline-items.inprocess::after {
    position: absolute;
    content: "";
    height: 40px;
    width: 40px;
    border-radius: 50%;
    border: 4px solid white;
    top: -9px;
    left: -20px;
}

.timeline-items.completed {
    border-left: 2px solid #2384c1;
}

.timeline-items.inprocess {
    border-left: 2px solid #eaecf0;
}

.timeline-items.inprocess h2 {
    color: #858a94;
}

.timeline-items.inprocess p {
    color: #aeb1b8;
}

.timeline-items.inprocess h4 {
    color: #aeb1b8;
}

.timeline-items.completed .marker-tick {
    display: block;
    position: absolute;
    top: 5px;
    left: -6px;
    height: 15px;
    width: 15px;
}

.timeline-items.inprocess .marker-tick {
    display: none;
}

.timeline-items.completed .marker-dots {
    display: none;
}

.timeline-items.inprocess .marker-dots {
    display: block;
    position: absolute;
    top: 6px;
    left: -5px;
    height: 10px;
    width: 10px;
}

.timeline-items:last-child {
    border-left: 0px;
}

/* expiration date */
.exp-wrapper:after {
    content: "/";
    position: absolute;
    left: 50%;
    margin-left: -4px;
    color: #aaa;
    font-size: 17px;
}

.exp-wrapper {
    position: relative;
    display: flex;
    width: 100%;
    justify-content: space-around;
    font-family: var(--font-family-Lato);
    font-size: var(--font-size-12);
    border-radius: 8px;
    font-weight: 400;
    line-height: 36px;
    border: 1px solid #d0d5dd;
    color: #101828;
    height: 40px;
}

input.exp {
    float: left;
    border: 0;
    width: calc(100% - 129px);
    outline: none;
    appearance: none;
    font-size: 12px;
    text-align: center;
    color: #101828;
}

/* failed text page */
.failed-animation {
    width: 100%;
    height: 100%;
}

#failed_textanimation h1 {
    font-family: Lato;
    font-size: 30px;
    font-weight: 700;
    line-height: 36px;
    letter-spacing: -0.018em;
    color: #353c4d;
    margin-bottom: 16px;
}

#failed_textanimation p {
    font-family: Lato;
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
    letter-spacing: -0.014em;
    color: #353c4d;
    margin-bottom: 46px;
}

#failed_textanimation .go-back-btn {
    font-family: Lato;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: -0.01em;
    color: #ffffff;
    background-color: #2a9fe8;
    border: 1px solid;
    border-radius: 4px;
    max-width: 190px;
    padding: 10px 40px;
}

.pd7x4 {
    padding-block: 74px;
    padding-inline: 45px;
}

/* Additional Charges Notice Modal css */
.addintional-chargies-body {
    padding: 32px 32px 32px 32px;
    max-height: 620px;
    overflow: auto;
}

.mb-24 {
    margin-bottom: 24px;
}

.chargies-modal-hdr {
    font-family: Lato;
    font-size: clamp(18px, 4vw, 24px);
    font-weight: 700;
    line-height: 36px;
    color: #08202e;
}

.chargies-modal-sub-hdr {
    font-family: Lato;
    font-size: clamp(14px, 2vw, 18px);
    font-weight: 700;
    line-height: 24px;
    color: #0c1529;
}

.chargies-modal-paragraph {
    font-family: Lato;
    font-size: clamp(14px, 2vw, 18px);
    font-weight: 400;
    line-height: 24px;
    color: #5d6370;
}

.chargies-modal-close-btn {
    border: 1px solid #2384c1 !important;
    color: #2384c1 !important;
    font-family: Lato;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
}

.chargies-modal-close-btn:hover {
    color: #ffffff !important;
    background-color: #2384c1;
}

.chargies-modal-close-btn:active {
    color: #ffffff !important;
    background-color: #2384c1;
}

.chargies-modal-order-btn {
    background-color: #2a9fe8;
    color: #ffffff;
    font-family: Lato;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
}

.chargies-modal-order-btn:hover {
    background-color: #2a9fe8;
    color: #ffffff;
}

.chargies-modal-order-btn:active {
    border: 1px solid #2384c1 !important;
    color: #2384c1 !important;
}

.chargies-footer-stion {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.warr-btn {
    max-width: 200px;
    width: 128px;
}

.warr-btn.chargies-modal-close-btn:hover {
    color: #2384c1 !important;
    background-color: white;
}

.get-price-paragraph-main {
    background-color: #fefaf5;
    padding: 6px 6px 6px 6px;
    /* height: 30px; */
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

.price-icon {
    height: 16px;
    width: 12px;
    margin-top: 2px;
}

.get-price-paragraph {
    color: #353c4d;
    font-family: Lato;
    font-size: 12px;
    font-weight: 500;
    line-height: 17.78px;
    letter-spacing: -0.01em;
    /* text-align: left; */
    margin-bottom: 0;
    display: flex;
    gap: 5px;
}

select.select-accept-currcies option {
    color: #000000;
    border: 1px solid #cd15151a !important;
    border-radius: 6px !important;
    background-color: #ededf1 !important;
    font-size: 12px !important;
}

select.select-accept-currcies option:checked {
    border-radius: 6px;
    font-size: 12px !important;
}

.add-cooupon-icon {
    transition: transform 0.5s ease;
}

.add-cooupon-icon.active {
    transform: rotate(180deg);
}

.copndiv {
    height: 0px;
    overflow: hidden;
    transition: height 0.3s ease;
}

.cactive {
    height: 74px !important;
}

.cmn-heading-booking[aria-expanded="true"] .add-cooupon-icon {
    transform: rotate(-180deg);
}

.order-detail-review {
    max-height: 200px;
    overflow: auto;
}

.order-detail-review table tr td {
    font-family: var(--font-family-Lato);
    font-size: var(--font-size-14);
    font-weight: 500;
    line-height: 17.78px;
    letter-spacing: -0.01em;
    color: var(--color-black-50);
    padding-bottom: 5px;
}

.new-cars-specs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 7px;
    row-gap: 12px;
}

.specs-item-new {
    margin-right: 26px;
    width: max-content;
}

.specs-item-new .cmn-stl {
    font-family: Lato;
    font-size: 12px;
    font-weight: 700;
    line-height: 15.76px;
    letter-spacing: -0.012em;
}

.specs-item-new .title {
    color: #858a94;
}

.specs-item-new .spec {
    color: #0c1529;
}

/* helpgrow */
.help-card {
    margin-block: 32px;
    background-color: #2f2b430d;
    padding: 24px;
    border-radius: 12px;
}

.middle-section-helpgrow {
    padding: 20px;
    background-color: #ffffff;
    border-left: 4px solid #2384c1;
}

.h-title {
    font-family: "Sofia Pro";
    font-size: 24px;
    font-weight: 600;
    line-height: 32px;
    letter-spacing: -0.016em;
    color: #08202e;
    margin-bottom: 8px;
}

.h-para {
    font-family: "Lato";
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: -0.01em;
    color: #08202e;
    margin-bottom: 24px;
}

.h-tip {
    color: #ffffff;
    padding: 7px 47px;
    border: 1px solid #2384c1;
    background-color: #2384c1;
    border-radius: 4px;
    font-family: "Lato";
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.01em;
}

.modal-help-title {
    font-family: "Lato";
    color: #0c1529;
    letter-spacing: -0.01em;
}

#give_tip .modal-content {
    border-radius: 20px;
}

#give_tip .modal-dialog {
    max-width: 672px;
}

#give_tip .amount-card {
    border-radius: 5px;
    background-color: #2f2b430d;
    padding: 14px;
}

.amount-card-title {
    font-family: "Lato";
    color: #0c1529;
    letter-spacing: -0.01em;
}

.amount-card-input-text {
    font-family: Lato;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: #344054;
    margin-bottom: 6px;
}

.input-card-amount-div:focus-within {
    border: 1px solid #2a9fe8;
}

.input-card-amount-div {
    background-color: #ffffff;
    border: 1px solid #d0d5dd;
    border-radius: 6px;
    box-shadow: 0px 1px 2px 0px #1018280d;
    padding: 8px 12px;
    display: flex;
    align-items: center;
}

.amount-select {
    width: 47px;
    font-family: "Lato";
    font-size: 11.4px;
    font-weight: 600;
    line-height: 16.28px;
    letter-spacing: -0.01em;
    color: #353c4d;
    border: none;
    outline: none;
    background-color: white;
}

.amount-input {
    border: none;
    outline: none;
    width: 100%;
    border: none;
    outline: none;
    font-family: "Lato";
    font-size: 12px;
    font-weight: 400;
    line-height: 24px;
    color: #667085;
}

.amount-tab-item {
    padding-block: 2px;
    color: #5d6370;
    padding-inline: 22px;
    border: 1px solid #5d6370;
    border-radius: 54px;
    font-family: "Lato";
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.018em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.amount-tab-item.active-amount {
    background-color: #2384c1;
    border: 1px solid #154f74;
    color: #ffffff;
}

.strip-input {
    font-family: "Lato";
    font-size: 12px;
    font-weight: 400;
    line-height: 24px;
    color: #b2aebf;
    border: 1px solid #d0d5dd;
    border-radius: 6px;
    height: 40px;
}

.help-grow-btn {
    padding: 10px 20px;
    font-size: 16px;
    font-weight: 600;
    line-height: normal;
    background-color: #2384c1;
    border: 1px solid #2384c1;
    color: #ffffff;
    border-radius: 6px;
    letter-spacing: -0.018em;
    max-width: 150px;
    width: 100%;
}

.brd-b-1 {
    border-bottom: 1px solid #eaeaea;
}

/* services */
#add_on_service .slick-slide {
    margin-right: 0px !important;
}

#add_on_service .slick-item {
    padding: 0 8px;
}

#add_on_service .slick-arrow {
    height: 28px !important;
    width: 28px !important;
    background-color: white;
    box-shadow: 0px 0px 4.301px 0px rgba(47, 43, 67, 0.3);
    position: absolute;
}

#add_on_service .slick-next {
    right: 0px;
}

#add_on_service .slick-prev {
    left: -13px;
}

#add_on_service .slick-prev,
#add_on_service .slick-next {
    color: #2f2b43 !important;
    display: none !important;
}

#add_on_service .slick-prev:before,
#add_on_service .slick-next:before {
    font-size: 12px !important;
    color: #2f2b43 !important;
    opacity: 1;
}

#add_on_service {
    padding-block: 24px;
}

.free-text-benifits {
    font-family: Lato;
    font-size: 10px;
    font-weight: 600;
    line-height: 16px;
    letter-spacing: -0.01em;
    padding-inline: 10px;
    color: white;
    background-color: #faa51b;
    border-radius: 4px;
    position: absolute;
    top: -9px;
    left: 10px;
}

#add_on_service .service-card-item {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 9px 13.4px;
    display: flex;
    align-items: center;
    cursor: pointer;
    position: relative;
}

#add_on_service .service-card-item.active {
    border-color: #2384c1;
    background-color: #ecf5ff;
}

#add_on_service .service-card-item .service-texts {
    flex-grow: 1;
    margin-right: 13.4px;
    margin-left: 12px;
}

#add_on_service .title {
    font-family: Lato, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: -0.01em;
    color: #334155;
    margin-bottom: 2.23px;
}

#add_on_service .para {
    font-family: Lato, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: -0.01em;
    color: #64748b;
    margin-bottom: 0px;
}

#add_on_service .title2 {
    font-family: Lato, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: -0.01em;
    color: #334155;
    margin-bottom: 2.23px;
}

#add_on_service .para2 {
    font-family: Lato, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: -0.01em;
    color: #64748b;
    margin-bottom: 0px;
}

#add_on_service .slick-service:hover .slick-prev {
    display: block !important;
}

#add_on_service .slick-service:hover .slick-next {
    display: block !important;
}

/*  */
#add_on_autoparts .slick-slide {
    margin-right: 10px !important;
}

#add_on_autoparts .slick-arrow {
    height: 28px !important;
    width: 28px !important;
    background-color: white;
    box-shadow: 0px 0px 4.301px 0px rgba(47, 43, 67, 0.3);
    position: absolute;
}

#add_on_autoparts .slick-next {
    right: 0px;
}

#add_on_autoparts .slick-prev {
    left: -13px;
}

#add_on_autoparts .slick-prev,
#add_on_autoparts .slick-next {
    color: #2f2b43 !important;
    display: none !important;
}

#add_on_autoparts .slick-prev:before,
#add_on_autoparts .slick-next:before {
    font-size: 12px !important;
    color: #2f2b43 !important;
    opacity: 1;
}

#add_on_autoparts {
    padding-block: 24px;
}

#add_on_autoparts .service-card-item {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 9px 13.4px;
    display: flex;
    align-items: center;
}

#add_on_autoparts .service-card-item.active {
    border-color: #2384c1;
    background-color: #ecf5ff;
}

#add_on_autoparts .service-card-item .service-texts {
    flex-grow: 1;
    margin-right: 13.4px;
    margin-left: 12px;
}

#add_on_autoparts .title {
    font-family: Lato;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    letter-spacing: -0.01em;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    margin-bottom: 2.23px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 167px;
}

#add_on_autoparts .para {
    font-family: Lato;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: -0.01em;
    color: #0c1529;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 167px;
}

#add_on_autoparts .title_auto {
    font-family: Lato;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    letter-spacing: -0.01em;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    margin-bottom: 2.23px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 167px;
}

#add_on_autoparts .title_auto2 {
    font-family: Lato;
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    letter-spacing: -0.01em;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
}

#add_on_autoparts .para_auto2 {
    font-family: Lato;
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: -0.01em;
    color: #64748b;
    margin-bottom: 4px;
}

#add_on_autoparts .para_auto {
    font-family: Lato;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: -0.01em;
    color: #0c1529;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 167px;
}

.review_rewards_discount {
    margin-top: 19px;
}

.review_rewards_discount a {
    font-family: Lato;
    font-size: clamp(14px, 2vw, 16px);
    font-weight: 700;
    line-height: 24px;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #3a3a3a;
    border: 1px solid #cac8d4;
    border-radius: 4px;
    padding: 6px 8px;
    gap: 4px;
}

#add_on_autoparts .priceaddon {
    font-family: Lato;
    font-size: 16.05px;
    font-weight: 500;
    line-height: 22.47px;
    letter-spacing: -0.014em;
    color: #5d6370;
}

#add_on_autoparts .amountaddon {
    font-family: Lato;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: -0.01em;
    color: #0c1529;
}

#add_on_autoparts .btn-addinorder {
    font-family: Lato;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    letter-spacing: -0.01em;
    color: #2384c1;
    border: 1px solid #ced0d4;
    border-radius: 4px;
    width: 100%;
    padding-block: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    flex-grow: 1;
    margin-top: 6px;
    text-decoration: none;
}

#add_on_autoparts .service-card-item.active .btn-addinorder {
    background-color: #2384c1;
    border-color: #2384c1;
    color: #ffffff;
}

#add_on_autoparts .slick-service:hover .slick-next {
    display: block !important;
}

#add_on_autoparts .slick-service:hover .slick-prev {
    display: block !important;
}

/* para why buy with sat */
.whbuy-withsat-para .title {
    font-family: Lato;
    font-size: 18px;
    font-weight: 700;
    line-height: 26px;
    letter-spacing: -0.012em;
    color: #353c4d;
    margin-bottom: 12px;
}

.whbuy-withsat-para .para-ul {
    padding-left: 0px;
    margin-bottom: 0px;
    list-style-type: none;
}

.whbuy-withsat-para .para-ul li {
    display: flex;
    align-items: flex-start;
    gap: 4px;
}

.whbuy-withsat-para .para-ul .title {
    font-family: Lato;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: -0.01em;
    color: #353c4d;
    margin-bottom: 4px;
}

.whbuy-withsat-para .para-ul .para {
    font-family: Lato;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: -0.01em;
    color: #353c4d;
    margin-top: 0px;
    margin-bottom: 25px;
    max-width: 100%;
    text-align: start;
}

/* modals select */
.add-on-service .modal-content {
    border-radius: 10px;
}

.add-on-service .modal-dialog {
    max-width: 672px;
}

.add-on-service .amount-card {
    border-radius: 10px;
    background-color: #2f2b430d;
    padding: 14px;
}

.title-auction {
    padding: 14px 24px;
    background-color: #f1f5f9;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.title-give {
    font-family: "Lato", Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    letter-spacing: -0.01em;
    color: #353c4d;
    margin-bottom: 6px;
}

.field-give {
    font-family: "Lato", Arial, Helvetica, sans-serif;
    height: 38px;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: -0.01em;
    border-radius: 6px;
    border: 1px solid #2f2b4333;
}

.main-title-give {
    font-family: "Lato", Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    letter-spacing: -0.01em;
    color: #353c4d;
    margin-bottom: 0px;
}

.card-stock-num {
    padding: 12px;
    border-radius: 10px;
    background-color: #f1f5f9;
}

.stock-title {
    font-family: "Lato";
    color: #1c6a9b;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 23.927px;
    letter-spacing: -0.252px;
    margin-bottom: 8px;
}

.specs-details-stock {
    display: flex;
    align-items: center;
    gap: 13px;
}

.specs-stock span {
    display: block;
}

.specs-stock span:first-of-type {
    color: #858a94;
    font-weight: 400;
}

.specs-stock span:last-of-type {
    color: #0c1529;
    font-weight: 700;
}

.specs-stock {
    font-family: "Lato";
    font-size: 12px;
    font-style: normal;
    line-height: 17.281px;
    letter-spacing: -0.144px;
}

.service-fee span:first-of-type {
    color: #5d6370;
    font-family: "Lato";
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: -0.12px;
    margin-right: 24px;
}

.service-fee span:last-of-type {
    color: #1c6a9b;
    font-family: "Lato";
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 17.281px;
    letter-spacing: -0.144px;
}

.carrier-select {
    color: #353c4d;
    font-family: "Lato", sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 13.004px;
    letter-spacing: -0.12px;
}

.carrier-div select {
    border-radius: 3px;
    border: 0.65px solid #5d6370;
    color: #5d6370;
    font-family: "Lato", sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: -0.12px;
    width: 162px;
}

.b-title {
    font-family: Lato;
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
    letter-spacing: -0.016em;
    color: #353c4d;
    margin-bottom: 8px;
}

.b-para {
    font-family: Lato;
    font-size: 18px;
    font-weight: 500;
    line-height: 26px;
    letter-spacing: -0.012em;
    color: #353c4d;
    margin-bottom: 24px;
}

.bank-info-div {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.bank-info-div .item-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bank-info-div .item-info .title {
    font-family: Lato;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: -0.01em;
    color: #353c4d;
    padding: 6px 10px;
    background-color: #f6f6f8;
    min-width: 150px;
}

.bank-info-div .item-info .val {
    font-family: Lato;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: -0.01em;
    padding: 6px 10px;
    color: #1c6a9b;
    min-width: 343px;
}

/* right section */
/* thank you tip*/
#thankyou_tip .modal-content {
    border-radius: 20px;
}

#thankyou_tip .modal-dialog {
    padding: 24px;
    max-width: 672px;
}

#thankyou_tip .btn-close {
    background: transparent var(--bs-btn-close-bg) center/.8em auto no-repeat;
    opacity: 1;
}

#thankyou_tip .thankyou-title {
    font-family: Lato, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: -0.01em;
    color: #0c1529;
    margin-bottom: 0px;
}

.img-thank-you {
    margin-block: 18px;
}

#thankyou_tip .received-tip {
    font-family: Lato, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: -0.01em;
    color: #0c1529;
    margin-bottom: 6px;
}

#thankyou_tip .received-para {
    font-family: Lato, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: -0.01em;
    color: #0c1529;
    margin-bottom: 18px;
}

.tip-done-btn {
    width: 100%;
    max-width: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    border: 1px solid #2384c1;
    background-color: #2384c1;
    font-family: Lato;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: -0.01em;
    color: #ffffff;
    padding-block: 8px;
    text-decoration: none;
}

.flex-give-tip {
    height: calc(100dvh - 64px);
    display: flex;
    flex-direction: column;
}

/* end */
/* unlocked benifits */
.benifits-checkout {
    padding-block: 32px;
}

.benifits-checkout .title {
    color: #020408;
    font-family: "Sofia Pro";
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 32px;
    /* 133.333% */
    letter-spacing: -0.384px;
    margin-bottom: 10px;
}

.tabs-benifits {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tabs-benifits span {
    font-family: Lato;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 26px;
    /* 144.444% */
    letter-spacing: -0.216px;
    padding: 10px 28px;
    transition: all 0.2s ease-in-out;
    color: #94a3b8;
    cursor: pointer;
    background-color: white;
    border: 1px solid transparent;
    user-select: none;
}

.tabs-benifits span[aria-selected="true"] {
    color: #01334e;
    border-radius: 33px;
    border-color: #1c6a9b;
    background: #d4ecfa;
}

#add_on_free {
    display: none;
}

#add_on_loyaltypoints {
    display: none;
}

#add_on_loyaltypoints.active-tab {
    display: block;
}

#add_on_free.active-tab {
    display: block;
}

.addin-order {
    max-width: 165px;
    padding: 12px 20px;
    width: 100%;
    border: 1px solid #2384c1;
    border-radius: 4px;
    background-color: #2384c1;
    color: #ffffff;
    font-family: Lato;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
}

.bannar-getmore-reward {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 29px 71px 29px 59px;
    border-radius: 6px;
    background: linear-gradient(90deg, #4d585e 0%, #000 100%),
        linear-gradient(180deg, #ffd03f 0.76%, #e28e05 97.27%, #df8800 105.66%);
    margin-top: 8px;
}

.getmore {
    max-width: 682px;
}

.bannar-getmore-reward .getmore h2 {
    font-family: Lato;
    font-size: 30px;
    font-weight: 700;
    line-height: 36px;
    letter-spacing: -0.018em;
    color: #ffffff;
    margin-bottom: 12px;
}

.bannar-getmore-reward .getmore p {
    font-family: Lato;
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
    letter-spacing: -0.014em;
    color: #eaebf0;
    margin-bottom: 16px;
}

.bannar-getmore-reward .getmore button,
.bannar-getmore-reward .getmore a {
    border-radius: 4px;
    background: linear-gradient(180deg,
            #ffd03f 0.76%,
            #e28e05 97.27%,
            #df8800 105.66%);
    border: 1px solid #e28e05;
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    color: #fff;
    padding: 12px 20px;
    font-family: Lato;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
    width: max-content;
    display: flex;
    align-items: center;
    justify-content: center;
}

/*  */
.loyalty-points-addons {
    overflow: auto;
}

.loyalty-point-25.head {
    color: #7a7493;
    font-family: Lato;
    font-size: clamp(14px, 2vw, 18px);
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: -0.16px;
}

.loyalty-point-25.val {
    color: #5d6370;
    font-family: Lato;
    font-size: clamp(14px, 2vw, 18px);
    font-style: normal;
    font-weight: 500;
    line-height: 26px;
    letter-spacing: -0.216px;
}

.loyalty-point-25 {
    flex: 1 0 25%;
    padding: 10px;
}

.heading-bottom-1 {
    min-width: 696px;
    border-bottom: 1px solid #ededf1;
}

.val-bottom-1:first-of-type {
    margin-top: 12px;
}

.val-bottom-1 {
    min-width: 696px;
    border-radius: 6px;
    border: 1px solid #eaebf0;
    margin-top: 18px;
}

.mob-slider {
    display: none;
}

.desktop-slider {
    display: block;
}

.error-img-label {
    font-family: Lato;
    font-size: clamp(16px, 2vw, 18px);
    font-weight: 600;
    line-height: clamp(25px, 2vw, 30.52px);
    text-align: center;
    margin-top: 18px;
    color: #64748b;
}

.error-img-inner {
    text-align: center;
}

.check-termcondition {
    color: #04070e;
    font-family: Lato;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    /* 142.857% */
    letter-spacing: -0.14px;
}

.check-termcondition a {
    color: #2384c1;
    font-family: Lato;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: -0.14px;
}

/* end */
/* why buy with sat */
.buywith-confidence {
    margin-top: 24px;
}

.buywith-confidence .title {
    font-family: Lato;
    font-size: 18px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: -0.01em;
    color: #0c1529;
    margin-bottom: 12px;
}

.buywith-confidence ul li {
    display: flex;
    gap: 4px;
    align-items: start;
    margin-bottom: 12px;
}

.buywith-confidence ul li h4 {
    font-family: Lato;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: -0.01em;
    color: #353c4d;
    margin-bottom: 4px;
}

.buywith-confidence ul li p {
    font-family: Lato;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: -0.01em;
    color: #353c4d;
    margin-bottom: 0px;
}

.buywith-confidence ul {
    padding: 0px;
    margin-bottom: 0px;
}

/* why buy with sat */
.payment_selection {
    margin-top: 24px;
}

.payment_selection .selection-payment {
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid #d0d5dd;
}

.payment_selection .selection-payment .form-check {
    display: flex;
    gap: 8px;
    align-items: center;
    cursor: pointer;
}

.payment_selection .selection-payment label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: Lato;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: #182230;
}

.payament-sat-balance-table tr:nth-child(even) {
    background-color: #f6f6f8;
}

.payament-sat-balance-table tr:nth-child(even) td {
    border: none !important;
}

.payament-sat-balance-table td {
    padding: 11px 8px;
    border-bottom: 1px solid #d0d5dd;
}

.payament-sat-balance-table .para {
    font-family: Lato;
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    color: #5d6370;
}

.payament-sat-balance-table .para-sub {
    font-family: Lato;
    font-weight: 700;
    font-size: 14.86px;
    line-height: 21.46px;
    color: #121212;
}

.bank-transfer-info .para {
    font-family: Lato;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: #5d6370;
}

.bank-transfer-info .bank-info {
    display: flex;
    align-items: center;
    margin-bottom: 22px;
}

.bank-transfer-info .bank-info:last-of-type {
    margin-bottom: 0px;
    flex-wrap: nowrap;
}

.bank-transfer-info .title-bank {
    background-color: #ededf1;
    padding: 6px 10px;
    font-family: Lato;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: #353c4d;
    min-width: 153px;
}

.bank-transfer-info .para-bank {
    padding: 8px 6px;
    font-family: Lato;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    min-width: 163px;
    display: flex;
    color: #1c6a9b;
}

.port-destinations {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 16px;
}

.port-destinations .portdes-title {
    font-family: Lato;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: #353c4d;
    margin-bottom: 6px;
}

.port-destinations .portdes {
    border: 1px solid #0000001a;
    border-radius: 6px;
    padding: 10px 12px;
    font-family: Lato;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: #000000;
    width: 100%;
}

.cars-information-details .price {
    font-family: Lato;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
}

.cars-information-details .title {
    font-family: Lato;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: #353c4d;
    max-width: 192px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cars-information-details .spec {
    font-family: Lato;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: #353c4d;
}

.cars-information-details .new-cars-specs {
    justify-content: space-between;
}

#bank_details_info.offcanvas.offcanvas-bottom {
    border-top-right-radius: 24px;
    border-top-left-radius: 24px;
    height: max-content;
    max-height: 80vh;
}

.pdf-html-agreement .modal-dialog {
    max-width: 850px;
}

.pdf-html-agreement .btn-close {
    opacity: 1;
    width: 0.7em;
    height: 0.7em;
}

.pdf-html-agreement .download-pdf-vehicle a {
    color: var(--color-blue-60);
}

.pdf-html-agreement .download-pdf-vehicle {
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: var(--color-blue-60);
}

.pdf-html-agreement .main-heading {
    margin-bottom: 20px;
    color: #000000;
    text-align: center;
}

.pdf-html-agreement .main-heading h2 {
    font-size: 1.5rem;
    line-height: 1.75rem;
    font-weight: bold;
    text-decoration: underline;
}

.pdf-html-agreement .main-heading h3 {
    font-size: 1.25rem;
    line-height: 1.5rem;
    font-weight: bold;
    margin-bottom: 20px;
}

.pdf-html-agreement .main-heading h4 {
    font-size: 1.25rem;
    line-height: normal;
    font-weight: bold;
    margin-bottom: 0px;
}

.pdf-html-agreement .main-heading h5 {
    font-size: 0.875rem;
    line-height: 1.5rem;
    font-weight: bold;
    margin-bottom: 0px;
}

.pdf-html-agreement .head-buyer {
    margin-bottom: 10px;
}

.pdf-html-agreement .head-buyer h2 {
    font-size: 1rem;
    line-height: 20px;
    color: #000;
}

.pdf-html-agreement .head-buyer p {
    font-size: 0.875rem;
    line-height: 20px;
    color: rgb(58, 58, 58);
    margin-bottom: 0px;
}

.pdf-html-agreement .head-seller {
    margin-bottom: 10px;
}

.pdf-html-agreement .head-seller h2 {
    font-size: 1rem;
    line-height: 20px;
    color: #000;
}

.pdf-html-agreement .head-seller p {
    font-size: 0.875rem;
    line-height: 20px;
    color: rgb(58, 58, 58);
    margin-bottom: 4px;
}

.pdf-html-agreement .signature_sat_japan {
    padding-bottom: 4px;
    border-bottom: 2px solid black;
}

.alert-card-payment {
    font-size: 16px;
}

.payment-card-tablet {
    display: none;
}

.confirm-checkout {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    padding: 8px;
    max-width: 173px;
    width: 100%;
    background-color: #2a9fe8;
    border: 1px solid #2a9fe8;
    color: white;
    font-family: Lato;
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
}

@media screen and (min-width: 1200px) and (max-width: 1399px) {
    .specs-section {
        gap: 19px;
    }

    .specs-section-item h4 {
        font-size: 12px;
        line-height: 18.28px;
    }

    /* personal info */
    .address-table p {
        max-width: 503px;
    }

    .mrb39d {
        padding-left: 86px;
        padding-right: 0px;
    }

    /* track new */
    .main-heading-track {
        font-size: 20px;
    }

    .quest-title {
        font-size: 20px;
    }

    .quest-para {
        font-size: 18px;
    }
}

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

    /* personal info */
    .address-table p {
        max-width: 383px;
    }

    .mrb39d {
        padding-left: 86px;
        padding-right: 0px;
    }

    .specs-section {
        gap: 10px;
    }

    .specs-section-item h4 {
        font-size: 12px;
    }

    .c-price {
        font-size: var(--font-size-16);
    }

    .pyb32 {
        padding-top: 16px;
    }

    .selects-section {
        margin-top: 12px;
    }

    .promo-flag-items {
        gap: 10px;
    }

    .radio-selectors {
        margin-top: 14px;
    }

    .c-price {
        padding-right: 7px;
    }

    .mcustom-7 {
        padding-right: 10px;
    }

    /* checkoutnew */
    .track-ordr-btn {
        height: 36px;
    }

    .order-status {
        font-size: 18px;
    }

    .ordertext {
        font-size: 18px;
    }

    .order-number {
        font-size: 18px;
    }

    .main-title {
        font-size: 22px;
    }

    /* track new */
    .main-heading-track {
        font-size: 20px;
    }

    .quest-title {
        font-size: 20px;
    }

    .quest-para {
        font-size: 18px;
        line-height: 28px;
    }

    /* failed payment page */
    #failed_textanimation h1 {
        font-size: 28px;
        line-height: 36px;
        margin-bottom: 16px;
    }

    #failed_textanimation p {
        font-size: 18px;
        line-height: 26px;
        margin-bottom: 46px;
    }

    .bank-info-div .item-info .val {
        min-width: 165px;
    }

    /* newcheckout */
    .getmore {
        max-width: 500px;
    }

    .bannar-getmore-reward .getmore h2 {
        font-size: 26px;
    }

    .bannar-getmore-reward .getmore p {
        font-size: 18px;
    }

    .tabs-benifits span {
        font-size: 16px;
        padding: 8px 16px;
    }

    .benifits-checkout .title {
        font-size: 22px;
        margin-bottom: 16px;
    }

    .bannar-getmore-reward .getmore button,
    .bannar-getmore-reward .getmore a {
        padding: 9px 14px;
    }

    .payment-cards-fields {
        flex-wrap: wrap;
    }

    .payment-cards-fields .card-number {
        max-width: 100%;
    }

    .payment-cards-fields .expiration {
        max-width: calc(50% - 10px);
    }

    .payment-cards-fields .cvc {
        max-width: calc(50% - 10px);
    }

    .payment-card-tablet {
        display: block;
    }

    .hide-on-tablet {
        display: none;
    }
}

@media screen and (min-width: 992px) and (max-width: 1023px) {
    .order-detail-review table tr td {
        font-size: var(--font-size-12);
    }

    .specs-section {
        gap: 19px;
    }

    .specs-section-item h4 {
        font-size: 12px;
        line-height: 18.28px;
    }

    /* personal info */
    .address-table p {
        max-width: 383px;
    }

    .mrb39d {
        /* padding-left: 86px; */
        padding-right: 52px;
    }

    .specs-section {
        gap: 10px;
    }

    .specs-section-item h4 {
        font-size: 12px;
    }

    .c-price {
        font-size: var(--font-size-16);
    }

    .pyb32 {
        padding-top: 16px;
    }

    .selects-section {
        margin-top: 12px;
    }

    .promo-flag-items {
        gap: 10px;
    }

    .radio-selectors {
        margin-top: 14px;
    }

    .c-price {
        padding-right: 7px;
    }

    .mcustom-7 {
        padding-right: 10px;
    }

    /* checkoutnew */
    .track-ordr-btn {
        height: 36px;
    }

    .order-status {
        font-size: 18px;
    }

    .ordertext {
        font-size: 18px;
    }

    .order-number {
        font-size: 18px;
    }

    .main-title {
        font-size: 22px;
    }

    /* track new */
    .main-heading-track {
        font-size: 20px;
    }

    .quest-title {
        font-size: 20px;
    }

    .quest-para {
        font-size: 18px;
        line-height: 28px;
    }

    /* failed payment page */
    #failed_textanimation h1 {
        font-size: 28px;
        line-height: 36px;
        margin-bottom: 16px;
    }

    #failed_textanimation p {
        font-size: 18px;
        line-height: 26px;
        margin-bottom: 46px;
    }

    .pd7x4 {
        padding-block: 50px;
        padding-inline: 27px;
    }

    .bank-info-div .item-info .val {
        min-width: 165px;
    }

    /* newcheckout */
    .getmore {
        max-width: 500px;
    }

    .bannar-getmore-reward .getmore h2 {
        font-size: 26px;
    }

    .bannar-getmore-reward .getmore p {
        font-size: 18px;
    }

    .tabs-benifits span {
        font-size: 16px;
        padding: 8px 16px;
    }

    .benifits-checkout .title {
        font-size: 22px;
        margin-bottom: 16px;
    }

    .bank-transfer-info .para-bank {
        min-width: 124px;
    }

    .bank-transfer-info .title-bank {
        min-width: 144px;
    }

    .payment-cards-fields {
        flex-wrap: wrap;
    }

    .payment-cards-fields .card-number {
        max-width: 100%;
    }

    .payment-cards-fields .expiration {
        max-width: calc(50% - 10px);
    }

    .payment-cards-fields .cvc {
        max-width: calc(50% - 10px);
    }

    .payment-card-tablet {
        display: block;
    }

    .hide-on-tablet {
        display: none;
    }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
    .payments-accepted {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }

    .colcustom {
        flex: 0 0 auto;
        width: 50%;
    }

    .order-detail-review table tr td {
        font-size: var(--font-size-12);
    }

    .specs-section {
        gap: 19px;
    }

    .accpt-texture {
        color: #353c4d;
        font-family: Lato;
        font-size: 12px;
        font-weight: 700;
        line-height: 18px;
    }

    .c-price-title {
        font-size: 12px;
    }

    .specs-section-item h4 {
        font-size: 12px;
        line-height: 18.28px;
    }

    /* personal info */
    .address-table p {
        max-width: 170px;
    }

    .mrb39d {
        /* padding-left: 86px; */
        padding-right: 52px;
    }

    .specs-section {
        gap: 7px;
    }

    .specs-section-item h4 {
        font-size: 12px;
    }

    .c-price {
        font-size: var(--font-size-14);
    }

    .pyb32 {
        padding-top: 3px;
    }

    .pmt {
        margin-top: 10px;
    }

    .place-order p {
        font-size: var(--font-size-12);
    }

    .selects-section {
        margin-top: 12px;
    }

    .promo-flag-items {
        gap: 10px;
    }

    .radio-selectors {
        margin-top: 14px;
    }

    .c-price {
        padding-right: 7px;
    }

    /* breadcrumb */
    #breadcrumb-section .breadcrumb-item {
        font-size: var(--font-size-12s);
    }

    .address-table p {
        font-size: var(--font-size-12);
    }

    .change-info {
        font-size: var(--font-size-14);
    }

    .cmn-heading-booking {
        font-size: var(--font-size-14);
    }

    .add-new-address-btn {
        font-size: var(--font-size-14);
    }

    .order-title-booking {
        font-size: 14px;
    }

    .mbpay-24 {
        margin-bottom: 18px;
    }

    .add-new-address-btn-payment {
        font-size: var(--font-size-14);
    }

    .form-cmn-btn {
        height: 28px;
        line-height: 10px;
    }

    .form-cmn-btn[disabled] {
        height: 28px;
        line-height: 10px;
    }

    .msection-title {
        font-size: 14px;
    }

    .promo-flag-items span {
        font-size: var(--font-size-10);
        line-height: 12px;
    }

    .selects-section label {
        font-size: var(--font-size-12);
    }

    .radio-selectors span {
        font-size: var(--font-size-12);
    }

    .radio-selectors label {
        font-size: var(--font-size-12);
    }

    .c-title {
        font-size: var(--font-size-12);
    }

    .place-ord-btn[disabled] {
        height: 28px;
    }

    .place-ord-btn {
        line-height: 10px;
    }

    .para-final-info {
        font-size: var(--font-size-14);
        line-height: 21px;
        margin-bottom: 4px;
    }

    .coupon-field {
        height: 33px;
    }

    .mcustom-7 {
        padding-right: 10px;
    }

    .address-table-payment .address-titlename {
        font-size: var(--font-size-12);
        line-height: 20px;
    }

    .menu-payment {
        font-size: var(--font-size-12);
    }

    #card_modal_sat .modal-dialog {
        max-width: 723px;
    }

    #personal_modal_sat .modal-dialog {
        max-width: 723px;
    }

    #bank_modal_sat .modal-dialog {
        max-width: 723px;
    }

    /* checkoutnew */
    .track-ordr-btn {
        height: 30px;
    }

    .order-status {
        font-size: 14px;
    }

    .ordertext {
        font-size: 14px;
    }

    .order-number {
        font-size: 14px;
    }

    .main-title {
        font-size: 16px;
    }

    .address-title {
        font-size: 14px;
    }

    .address-main {
        font-size: 14px;
    }

    .track-ordr-btn {
        font-size: 12px;
    }

    td.ordertext {
        width: 20%;
    }

    /* track new */
    .main-heading-track {
        font-size: 16px;
    }

    .quest-title {
        font-size: 16px;
    }

    .quest-para {
        font-size: 14px;
        line-height: 28px;
    }

    /* failed payment page */
    #failed_textanimation h1 {
        font-size: 28px;
        line-height: 36px;
        margin-bottom: 16px;
    }

    #failed_textanimation p {
        font-size: 18px;
        line-height: 26px;
        margin-bottom: 46px;
    }

    .pd7x4 {
        padding-block: 50px;
        padding-inline: 27px;
    }

    .help-card {
        margin-block: 20px;
        padding: 16px;
    }

    .middle-section-helpgrow {
        padding: 14px;
    }

    .h-tip {
        padding: 4px 27px;
        font-size: 12px;
    }

    .h-para {
        font-size: 14px;
        margin-bottom: 10px;
    }

    .h-title {
        font-size: 18px;
        margin-bottom: 3px;
    }

    .bank-info-div .item-info .val {
        min-width: 165px;
    }

    .b-title {
        font-size: 16px;
        line-height: 16px;
    }

    .whbuy-withsat-para .para-ul .para {
        font-size: 14px;
        line-height: 20px;
    }

    .whbuy-withsat-para .para-ul .title {
        font-size: 14px;
    }

    .whbuy-withsat-para .title {
        font-size: 14px;
    }

    /* newcheckout */
    .bannar-getmore-reward {
        padding: 16px 20px;
    }

    .bannar-getmore-reward img {
        max-width: 200px;
        height: auto;
    }

    .getmore {
        max-width: 381px;
    }

    .bannar-getmore-reward .getmore button,
    .bannar-getmore-reward .getmore a {
        padding: 6px 12px;
    }

    .bannar-getmore-reward .getmore h2 {
        font-size: 20px;
        margin-bottom: 4px;
    }

    .bannar-getmore-reward .getmore p {
        font-size: 16px;
        line-height: 22px;
    }

    .tabs-benifits span {
        font-size: 16px;
        padding: 8px 16px;
    }

    .benifits-checkout .title {
        font-size: 22px;
        margin-bottom: 16px;
    }

    .addin-order {
        max-width: 150px;
        padding: 12px 10px;
    }

    /* slider */
    .desktop-slider {
        display: block;
    }

    .ship-information .title {
        font-size: 14px;
        line-height: 20px;
    }

    .ship-information .para {
        font-weight: 400;
        font-size: 14px;
    }

    .bank-transfer-info .title-bank {
        font-size: 14px;
        line-height: 20px;
        min-width: 104px;
        display: flex;
        max-width: 103px;
        align-items: center;
    }

    .bank-transfer-info .para-bank {
        padding: 8px 6px;
        font-size: 13px;
        line-height: 20px;
        min-width: 100px;
    }

    .bank-transfer-info .bank-info {
        margin-bottom: 0px;
        flex-wrap: wrap;
    }

    .bank-transfer-info .bank-info .d-flex {
        margin-bottom: 20px;
    }

    .payment-cards-fields {
        flex-wrap: wrap;
    }

    .payment-cards-fields .card-number {
        max-width: 100%;
    }

    .payment-cards-fields .expiration {
        max-width: calc(50% - 10px);
    }

    .payment-cards-fields .cvc {
        max-width: calc(50% - 10px);
    }

    .payment-cards-fields label {
        font-size: 14px;
    }

    .payments-accepted .cards {
        flex-wrap: wrap;
    }

    .confirm-checkout {
        max-width: 150px;
        font-size: 14px;
    }

    .payment-cards-fields {
        justify-content: space-between;
    }

    .payment-card-tablet {
        display: block;
    }

    .hide-on-tablet {
        display: none;
    }
}

@media screen and (min-width: 521px) and (max-width: 767px) {
    .form-secion label {
        font-size: var(--font-size-10);
    }

    .form-secion-user-info label {
        font-size: var(--font-size-12);
    }

    #personal_modal_sat .modal-body {
        padding-block: 10px;
        padding-inline: 10px;
    }

    .plc-des {
        display: flex;
        justify-content: center;
    }

    .mrb39d {
        padding-right: 0px;
    }

    .pyb32 {
        padding-block: 20px;
    }

    .separator-payment {
        margin-right: 0px;
        padding-bottom: 16px;
    }

    .add-new-address-btn {
        font-family: var(--font-family-Lato);
        font-size: var(--font-size-12);
        font-weight: 500;
        line-height: 24px;
        letter-spacing: -0.01em;
        color: var(--color-blue-60);
        max-width: 160px;
        display: flex;
        justify-content: flex-start;
        gap: 6px;
    }

    .para-final-info {
        font-family: var(--font-family-Lato);
        font-size: var(--font-size-14);
        font-weight: 500;
        line-height: 20px;
        letter-spacing: -0.01em;
    }

    .cmn-heading-booking {
        font-family: var(--font-family-Lato);
        font-size: var(--font-size-14);
        font-weight: 700;
        line-height: 20px;
        letter-spacing: -0.01em;
        color: var(--color-black-50);
        margin-bottom: 0;
    }

    .add-new-adress-btndiv {
        border: none;
    }

    .separator {
        margin-right: 0px;
    }

    .change-info {
        font-size: var(--font-size-14);
    }

    #return_detail a {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 8px;
        padding-block: 20px;
    }

    #return_detail a {
        margin-bottom: 0px;
        font-family: var(--font-family-Lato);
        font-size: var(--font-size-14);
        font-weight: 700;
        line-height: 20px;
        letter-spacing: -0.01em;
        color: var(--color-black-50);
    }

    .order-title-booking {
        font-family: var(--font-family-Lato);
        font-size: 16px;
        font-weight: 700;
        line-height: 26px;
        letter-spacing: -0.014em;
        color: var(--color-black-50);
        margin-bottom: 11px;
    }

    .card-booking-detail {
        border-radius: 10px;
        background-color: #fbfdff;
        padding: 12px;
    }

    .promo-flag-items {
        display: flex;
        justify-content: start;
        gap: 21px;
    }

    span.modal-promo-1 {
        background-color: #ff4b44;
        color: white;
    }

    .promo-flag-items span {
        font-family: var(--font-family-Lato);
        font-size: var(--font-size-12);
        font-weight: 600;
        line-height: 16px;
        letter-spacing: -0.01em;
        padding-block: 2px;
        padding-inline: 10px;
        border-radius: 31px;
        display: flex;
        align-items: center;
    }

    span.modal-promo-2 {
        background-color: #fbf2cb;
        color: #c8811a;
    }

    .msection-title {
        font-family: var(--font-family-Lato);
        font-size: var(--font-size-16);
        font-weight: 700;
        line-height: 22px;
        letter-spacing: -0.018em;
        color: var(--color-blue-70);
        margin-top: 10.22px;
        margin-bottom: 7.41px;
    }

    .specs-section {
        display: flex;
        gap: 21px;
    }

    .specs-section-item h4 {
        font-family: var(--font-family-Lato);
        font-size: 12px;
        font-weight: 400;
        line-height: 18.28px;
        letter-spacing: -0.012em;
    }

    .specs-section span {
        font-size: 8px;
        align-self: center;
        color: var(--color-black-20s);
    }

    .selects-section {
        display: flex;
        margin-top: 22.3px;
        gap: 16px;
    }

    .selects-section-item {
        flex-grow: 1;
    }

    .selects-section label {
        font-family: var(--font-family-Lato);
        font-size: var(--font-size-12);
        font-weight: 700;
        line-height: 13px;
        letter-spacing: -0.01em;
        color: var(--color-black-50);
    }

    .selects-section select.form-select {
        background-size: 16px 8px;
    }

    .selects-section select {
        font-family: var(--font-family-Lato);
        font-size: var(--font-size-12);
        font-weight: 500;
        line-height: 16px;
        letter-spacing: -0.01em;
        background-color: #ffffff;
        border: 1px solid #cbd5e1;
        border-radius: 6px;
        height: 36px;
    }

    .specs-section-item h4 {
        font-family: var(--font-family-Lato);
        font-size: 12px;
        font-weight: 400;
        line-height: 18.28px;
        letter-spacing: -0.012em;
    }

    .radio-selectors {
        margin-top: 22.3px;
    }

    .radio-selector-item {
        display: flex;
        justify-content: space-between;
        margin-bottom: 12px;
    }

    .radio-selectors span {
        font-family: var(--font-family-Lato);
        font-size: var(--font-size-12);
        font-weight: 500;
        line-height: 17.78px;
        letter-spacing: -0.01em;
        color: var(--color-black-50);
        display: flex;
        justify-content: start;
        flex-grow: 1;
        align-items: center;
        gap: 8.49px;
    }

    .labels-section-booking {
        display: flex;
        align-items: center;
        gap: 11.55px;
    }

    .radio-selectors label {
        font-family: var(--font-family-Lato);
        font-size: var(--font-size-12);
        font-weight: 500;
        line-height: 17.78px;
        letter-spacing: -0.01em;
        color: var(--color-black-50);
    }

    .radio-selectors .check-input-checkbox {
        margin-top: 2px;
    }

    .product-price {
        margin-top: 22.3px;
    }

    .c-title {
        font-family: var(--font-family-Lato);
        font-size: var(--font-size-12);
        font-weight: 700;
        line-height: 18.73px;
        letter-spacing: -0.01em;
        color: var(--color-black-50);
    }

    .c-price {
        font-family: var(--font-family-Lato);
        font-size: var(--font-size-16);
        font-weight: 700;
        line-height: 18.73px;
        letter-spacing: -0.01em;
        color: var(--color-black-50);
        padding-right: 21px;
    }

    .car-totalprice-modal {
        margin-top: 12px;
    }

    .pmt {
        margin-top: 11px;
    }

    .place-ord-btn {
        background-color: var(--color-blue-50);
        border: 1px solid var(--color-blue-50);
        border-radius: 4px;
        padding: 8px 10px 8px 10px;
        color: white;
        height: 32px;
        width: 125px;
        transition-duration: 0.4s;
        font-family: var(--font-family-Lato);
        font-size: var(--font-size-12);
        font-weight: 500;
        line-height: 16px;
        letter-spacing: -0.01em;
    }

    .place-ord-btn:focus-visible {
        border: 1px solid var(--color-blue-50);
    }

    .place-ord-btn:active {
        background-color: #2a9fe8bc;
        transform: translateY(2px);
    }

    .place-ord-btn[disabled] {
        background-color: #ededf1;
        border: 1px solid #ededf1;
        border-radius: 4px;
        padding: 8px 10px 8px 10px;
        color: #b2aebf;
        transition-duration: 0.4s;
    }

    .place-order p {
        font-family: var(--font-family-Lato);
        font-size: var(--font-size-10);
        font-weight: 500;
        line-height: 20px;
        letter-spacing: -0.01em;
        color: var(--color-black-30);
        margin-top: 12px;
        text-align: center;
        /* max-width: 283px; */
    }

    /*  */
    #main_booking_div {
        margin-bottom: 19px;
    }

    #main_booking_div .pr-info {
        padding-bottom: 24px;
        border-bottom: 1px solid #cbd5e180;
    }

    #main_booking_div .pr-info h2 {
        font-family: var(--font-family-Lato);
        font-size: var(--font-size-14);
        font-weight: 700;
        line-height: 20px;
        letter-spacing: -0.01em;
        color: var(--color-black-50);
        margin-bottom: 12px;
    }

    #main_booking_div .pr-info h2.active {
        color: var(--color-blue-60);
    }

    .mt-20-px {
        margin-top: 20px;
    }

    .info-btn-booking {
        padding: 4px;
        display: flex;
        align-items: center;
        gap: 6px;
        font-family: var(--font-family-Lato);
        font-size: var(--font-size-12);
        font-weight: 500;
        line-height: 16px;
        letter-spacing: -0.01em;
        color: var(--color-blue-60);
        border: 1px solid #e2e8f0;
        border-radius: 4px;
        height: 28px;
        background-color: transparent;
    }

    #offcanvas_personal_info .offcanvas-header {
        padding-block: 18px;
        padding-inline: 16px;
    }

    #offcanvas_personal_info .offcanvas-header .cmn-offcanvas-head {
        font-family: var(--font-family-Lato);
        font-size: var(--font-size-14);
        font-weight: 600;
        line-height: 20px;
        letter-spacing: -0.01em;
        color: #000000;
        margin-bottom: 0px;
    }

    /* #login_preview.offcanvas.offcanvas-bottom {
  
    z-index: 9999;
  } */
    #offcanvas_personal_info.offcanvas.offcanvas-bottom {
        border-top-right-radius: 24px;
        border-top-left-radius: 24px;
        height: calc(100% - 100px);
    }

    /* forms */
    .form-errors {
        font-size: 10px;
        color: red;
        margin-top: 6px;
    }

    .mb10sc {
        margin-bottom: 10px;
    }

    .iti.iti--allow-dropdown {
        width: 100%;
    }

    .form-secion .form-control {
        font-family: var(--font-family-Lato);
        font-size: var(--font-size-12);
        border-radius: 6px;
        font-weight: 400;
        line-height: 16px;
        border: 1px solid #d0d5dd;
        color: #101828;
        height: 40px;
    }

    .form-secion .form-control:focus {
        border-color: #5cbaf5;
        box-shadow: 0 0 0 0.25rem rgba(92, 186, 245, 0.25);
    }

    .form-scion-btn {
        height: 32px;
        width: 208px;
        color: white;
        font-family: var(--font-family-Lato);
        font-size: var(--font-size-12);
        font-weight: 500;
        line-height: 16px;
        letter-spacing: -0.01em;
        background-color: var(--color-blue-50);
        border-radius: 4px;
        padding-block: 8px;
        padding-inline: 10px;
        border: 1px solid var(--color-blue-50);
        transition-duration: 0.4s;
        margin-top: 18px;
        margin-bottom: 32px;
    }

    .max-w125 {
        max-width: 131px;
    }

    .form-scion-btn:hover {
        background-color: #2a9fe8bc;
    }

    .form-scion-btn:focus-visible {
        border: 1px solid var(--color-blue-50);
    }

    .form-scion-btn:active {
        background-color: #2a9fe8bc;
        transform: translateY(2px);
    }

    .ty-border {
        border: 1px solid var(--color-blue-60);
        border-radius: 4px;
    }

    .cty-delivery-srvc {
        padding: 10px;
        max-width: 206px;
    }

    .form-label-secion span {
        font-family: var(--font-family-Lato);
        font-size: var(--font-size-12);
        font-weight: 500;
        line-height: 16px;
        letter-spacing: -0.01em;
        color: #98a2b3;
    }

    .flex-frm-cls {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 20px;
    }

    .flex-frm-cls label {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .flex-frm-cls span {
        font-family: var(--font-family-Lato);
        font-size: var(--font-size-12);
        font-weight: 500;
        line-height: 16px;
        letter-spacing: -0.01em;
        color: var(--color-black-40);
    }

    .mb-12bok {
        margin-bottom: 12px !important;
    }

    .active-address {
        border: 1px solid #2a9fe8;
        background-color: #e9effd;
    }

    .inactive-address {
        border: 1px solid #dcdae2;
        background-color: #ededf1;
    }

    .address-table {
        min-height: 44px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        padding: 10px;
        border-radius: 4px;
        margin-bottom: 16px;
    }

    .sub-flx {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .mcr-30 {
        margin-left: 22px;
    }

    .change-info {
        color: var(--color-blue-60);
    }

    .address-table p {
        margin-bottom: 0px;
        font-family: var(--font-family-Lato);
        font-size: var(--font-size-12);
        font-weight: 500;
        line-height: 16px;
        letter-spacing: -0.01em;
        max-width: 333px;
        color: #98a2b3;
    }

    .address-table p span {
        color: #101828 !important;
    }

    .final-address {
        width: 100%;
        margin-bottom: 24px;
    }

    .final-address tr td {
        font-family: var(--font-family-Lato);
        font-size: var(--font-size-14);
        font-weight: 500;
        line-height: 20px;
        letter-spacing: -0.01em;
        padding-bottom: 5px;
    }

    .final-address td a {
        color: var(--color-blue-60);
    }

    .mbpay-12 {
        margin-bottom: 12px;
    }

    .add-new-adress-btndiv-payment {
        padding-top: 12px;
    }

    .mbpay-24 {
        padding-bottom: 0px;
    }

    .address-table-payment {
        margin-top: 12px;
    }

    .add-new-address-btn-payment {
        font-family: var(--font-family-Lato);
        font-size: var(--font-size-12);
        font-weight: 500;
        line-height: 16px;
        letter-spacing: -0.01em;
        color: var(--color-blue-60);
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 6px;
    }

    .address-table-payment {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        padding: 10px;
        border-radius: 4px;
    }

    .address-table-payment .address-titlename {
        margin-bottom: 0px;
        font-family: var(--font-family-Lato);
        font-size: var(--font-size-12);
        font-weight: 500;
        line-height: 24px;
        letter-spacing: -0.01em;
        color: #101828;
    }

    .form-cmn-btn[disabled] {
        background-color: #ced0d4;
        border: 1px solid #ced0d4;
        border-radius: 4px;
        padding: 8px 10px 8px 10px;
        color: white;
        transition-duration: 0.4s;
    }

    .menu-payment {
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 10px;
        font-family: var(--font-family-Lato);
        font-size: var(--font-size-12);
        font-weight: 500;
        line-height: 16px;
        letter-spacing: -0.01em;
        color: var(--color-black-50);
        padding-inline: 8px;
    }

    .menu-payment .trash-bin {
        fill: #2f2b43;
    }

    .menu-payment:hover {
        background-color: #f1f5f9 !important;
    }

    .menu-payment.text-remove:hover {
        color: red;
    }

    .menu-payment.text-remove:hover .trash-bin {
        color: red;
        fill: red;
    }

    .form-cmn-btn {
        height: 32px;
        width: 176px;
        color: white;
        font-family: var(--font-family-Lato);
        font-size: var(--font-size-12);
        font-weight: 500;
        line-height: 16px;
        letter-spacing: -0.01em;
        background-color: var(--color-blue-50);
        border-radius: 4px;
        padding-block: 8px;
        padding-inline: 10px;
        border: 1px solid var(--color-blue-50);
        transition-duration: 0.4s;
    }

    .form-cmn-btn:hover {
        background-color: #2a9fe8bc;
    }

    .form-cmn-btn:active {
        background-color: #2a9fe8bc;
        transform: translateY(2px);
    }

    .form-cmn-btn[disabled]:active {
        background-color: #ced0d4;
        border: 1px solid #ced0d4;
    }

    .form-cmn-btn[disabled]:hover {
        background-color: #ced0d4;
    }

    #offcanvas_payment_info .offcanvas-header {
        padding-block: 18px;
        padding-inline: 16px;
    }

    #offcanvas_payment_info .offcanvas-header .cmn-offcanvas-head {
        font-family: var(--font-family-Lato);
        font-size: var(--font-size-14);
        font-weight: 600;
        line-height: 20px;
        letter-spacing: -0.01em;
        color: #000000;
        margin-bottom: 0px;
    }

    /* #login_preview.offcanvas.offcanvas-bottom {
  
    z-index: 9999;
  } */
    #offcanvas_payment_info.offcanvas.offcanvas-bottom {
        border-top-right-radius: 24px;
        border-top-left-radius: 24px;
        height: calc(100% - 50px);
    }

    .infoform-item2 p {
        font-family: var(--font-family-Lato);
        font-size: var(--font-size-14);
        font-weight: 600;
        line-height: 20px;
        letter-spacing: -0.01em;
        color: #475467;
        margin-bottom: 10px;
    }

    .cards-types {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
    }

    .form-secion {
        margin-top: 12px;
    }

    .default-check {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-top: 10px;
    }

    .actions-modal {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 24px;
        margin-top: 32px;
    }

    .form-cancel-btn {
        border: 1px solid #98a2b3;
        color: var(--color-black-50);
        background-color: white;
        padding-inline: 10px;
        padding-block: 8px;
        width: 100%;
        max-width: 105px;
        height: 32px;
        font-family: var(--font-family-Lato);
        font-size: var(--font-size-12);
        font-weight: 500;
        line-height: 16px;
        letter-spacing: -0.01em;
        border-radius: 4px;
    }

    .form-submit-btn {
        background-color: var(--color-blue-50);
        color: white;
        height: 32px;
        width: 100%;
        max-width: 105px;
        padding-inline: 10px;
        padding-block: 8px;
        font-family: var(--font-family-Lato);
        font-size: var(--font-size-12);
        font-weight: 500;
        line-height: 16px;
        letter-spacing: -0.01em;
        border-radius: 4px;
        border: 1px solid var(--color-blue-50);
    }

    .error-cardsshow {
        padding: 10px;
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
        border: 2px solid #d92d20;
        margin-bottom: 26px;
        border-radius: 4px;
    }

    .error-cardsshow p {
        margin: 0px;
        font-family: var(--font-family-Lato);
        font-size: var(--font-size-12);
        font-weight: 700;
        line-height: 16px;
        letter-spacing: -0.01em;
        color: #d92d20;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .err-lists-card {
        padding-left: 26px;
        margin: 0px;
        font-family: var(--font-family-Lato);
        font-size: var(--font-size-12);
        font-weight: 500;
        line-height: 16px;
        color: var(--color-black-50);
        letter-spacing: -0.01em;
    }

    #offcanvas_bank_info .offcanvas-header {
        padding-block: 18px;
        padding-inline: 16px;
    }

    #offcanvas_bank_info .offcanvas-header .cmn-offcanvas-head {
        font-family: var(--font-family-Lato);
        font-size: var(--font-size-14);
        font-weight: 600;
        line-height: 20px;
        letter-spacing: -0.01em;
        color: #000000;
        margin-bottom: 0px;
    }

    /* #login_preview.offcanvas.offcanvas-bottom {
  
    z-index: 9999;
  } */
    #offcanvas_bank_info.offcanvas.offcanvas-bottom {
        border-top-right-radius: 24px;
        border-top-left-radius: 24px;
        height: calc(100% - 200px);
    }

    .bank-modal-sep h2 {
        font-family: var(--font-family-Lato);
        font-size: 14px;
        font-weight: 700;
        line-height: 20px;
        letter-spacing: -0.01em;
        color: var(--color-black-50);
        margin-bottom: 0;
    }

    .bank-modal-sep p {
        margin-top: 8px;
        margin-bottom: 0;
        font-family: var(--font-family-Lato);
        font-size: 14px;
        font-weight: 600;
        line-height: 20px;
        letter-spacing: -0.01em;
        color: var(--color-black-30);
    }

    .form-submit-btn-bank {
        background-color: var(--color-blue-50);
        color: white;
        height: 32px;
        width: 100%;
        max-width: 146px;
        padding-inline: 10px;
        padding-block: 8px;
        font-family: var(--font-family-Lato);
        font-size: var(--font-size-12);
        font-weight: 500;
        line-height: 16px;
        letter-spacing: -0.01em;
        border-radius: 4px;
        border: 1px solid var(--color-blue-50);
    }

    .form-submit-btn-bank a[href^="tel:"] {
        color: var(--color-black-50);
    }

    .bank-info-table {
        margin-top: 28px;
    }

    .bank-info-table td {
        padding-inline: 10px;
        padding-block: 8px;
        border-bottom: 22px solid transparent;
        background-clip: padding-box;
    }

    .bank-info-current {
        font-family: var(--font-family-Lato);
        font-size: var(--font-size-16);
        font-weight: 500;
        line-height: 24px;
        letter-spacing: -0.01em;
        color: var(--color-black-50);
        background-color: #ededf1;
    }

    .bank-info-address {
        font-family: var(--font-family-Lato);
        font-size: var(--font-size-14);
        font-weight: 600;
        line-height: 20px;
        letter-spacing: -0.01em;
        color: #1c6a9b;
    }

    /* checkoutnew */
    .track-ordr-btn {
        height: 30px;
    }

    .order-status {
        font-size: 14px;
    }

    .ordertext {
        font-size: 14px;
    }

    .order-number {
        font-size: 14px;
    }

    .main-title {
        font-size: 16px;
    }

    .address-title {
        font-size: 14px;
    }

    .address-main {
        font-size: 14px;
    }

    .track-ordr-btn {
        font-size: 12px;
    }

    td.ordertext {
        width: 20%;
    }

    /* track new */
    .main-heading-track {
        font-size: 18px;
    }

    .quest-title {
        font-size: 16px;
        margin-bottom: 0px;
    }

    .quest-para {
        font-size: 14px;
        line-height: 28px;
    }

    #questionaries_section {
        padding-block: 16px;
    }

    /* failed payment page */
    #failed_textanimation h1 {
        font-size: 28px;
        line-height: 36px;
        margin-bottom: 16px;
    }

    #failed_textanimation p {
        font-size: 18px;
        line-height: 26px;
        margin-bottom: 46px;
    }

    .pd7x4 {
        padding-block: 0px;
        padding-inline: 27px;
    }
}

@media screen and (min-width: 320px) and (max-width: 520px) {
    .form-secion label {
        font-size: var(--font-size-12);
    }

    .form-secion-user-info label {
        font-size: var(--font-size-12);
    }

    .plc-des {
        display: flex;
        justify-content: center;
    }

    #breadcrumb-section {
        padding-bottom: 0px;
    }

    #breadcrumb-section .breadcrumb-item {
        font-size: var(--font-size-12);
    }

    .infoform-item1 {
        border-right: none;
        padding-right: 0px;
    }

    #card_modal_sat .modal-body {
        padding-block: 10px;
        padding-inline: 10px;
    }

    .infoform-item1 {
        grid-column: 1 / span 2;
        grid-row: 2;
    }

    .infoform-item2 {
        grid-column: 1 / span 2;
        grid-row: 1;
    }

    #personal_modal_sat .modal-body {
        padding-block: 10px;
        padding-inline: 10px;
    }

    .address-table {
        flex-wrap: wrap;
        height: auto;
    }

    .mrb39d {
        padding-right: 0px;
    }

    .pyb32 {
        padding-block: 20px;
    }

    .separator-payment {
        margin-right: 0px;
        padding-bottom: 16px;
    }

    .add-new-address-btn {
        font-family: var(--font-family-Lato);
        font-size: var(--font-size-12);
        font-weight: 500;
        line-height: 24px;
        letter-spacing: -0.01em;
        color: var(--color-blue-60);
        max-width: 160px;
        display: flex;
        justify-content: flex-start;
        gap: 6px;
    }

    .para-final-info {
        font-family: var(--font-family-Lato);
        font-size: var(--font-size-14);
        font-weight: 500;
        line-height: 20px;
        letter-spacing: -0.01em;
    }

    .cmn-heading-booking {
        font-family: var(--font-family-Lato);
        font-size: var(--font-size-14);
        font-weight: 700;
        line-height: 20px;
        letter-spacing: -0.01em;
        color: var(--color-black-50);
        margin-bottom: 0;
    }

    .add-new-adress-btndiv {
        border: none;
    }

    .separator {
        margin-right: 0px;
    }

    .change-info {
        font-size: var(--font-size-14);
    }

    #return_detail a {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 8px;
        padding-block: 20px;
    }

    #return_detail a {
        margin-bottom: 0px;
        font-family: var(--font-family-Lato);
        font-size: var(--font-size-14);
        font-weight: 700;
        line-height: 20px;
        letter-spacing: -0.01em;
        color: var(--color-black-50);
    }

    .order-title-booking {
        font-family: var(--font-family-Lato);
        font-size: 16px;
        font-weight: 700;
        line-height: 26px;
        letter-spacing: -0.014em;
        color: var(--color-black-50);
        margin-bottom: 11px;
    }

    .card-booking-detail {
        border-radius: 10px;
        background-color: #fbfdff;
        padding: 12px;
    }

    .promo-flag-items {
        display: flex;
        justify-content: start;
        flex-wrap: wrap;
        column-gap: 10px;
        row-gap: 8px;
    }

    span.modal-promo-1 {
        background-color: #ff4b44;
        color: white;
    }

    .promo-flag-items span {
        font-family: var(--font-family-Lato);
        font-size: var(--font-size-12);
        font-weight: 600;
        line-height: 16px;
        letter-spacing: -0.01em;
        padding-block: 2px;
        padding-inline: 10px;
        border-radius: 31px;
        display: flex;
        align-items: center;
    }

    span.modal-promo-2 {
        background-color: #fbf2cb;
        color: #c8811a;
    }

    .msection-title {
        font-family: var(--font-family-Lato);
        font-size: 14px;
        font-weight: 700;
        line-height: 22px;
        letter-spacing: -0.018em;
        color: var(--color-blue-70);
        margin-top: 10.22px;
        margin-bottom: 7.41px;
    }

    .specs-section {
        display: flex;
        gap: 14px;
    }

    .specs-section-item h4 {
        font-family: var(--font-family-Lato);
        font-size: 12px;
        font-weight: 400;
        line-height: 18.28px;
        letter-spacing: -0.012em;
    }

    .specs-section span {
        font-size: 8px;
        align-self: center;
        color: var(--color-black-20s);
    }

    .selects-section {
        display: flex;
        margin-top: 22.3px;
        gap: 16px;
    }

    .selects-section-item {
        flex-grow: 1;
    }

    .selects-section label {
        font-family: var(--font-family-Lato);
        font-size: var(--font-size-12);
        font-weight: 700;
        line-height: 13px;
        letter-spacing: -0.01em;
        color: var(--color-black-50);
    }

    .selects-section select.form-select {
        background-size: 16px 8px;
    }

    .selects-section select {
        font-family: var(--font-family-Lato);
        font-size: var(--font-size-12);
        font-weight: 500;
        line-height: 16px;
        letter-spacing: -0.01em;
        color: var(--color-black-40);
        background-color: #ffffff;
        border: 1px solid #cbd5e1;
        border-radius: 6px;
        height: 36px;
    }

    .specs-section-item h4 {
        font-family: var(--font-family-Lato);
        font-size: 12px;
        font-weight: 400;
        line-height: 18.28px;
        letter-spacing: -0.012em;
    }

    .radio-selectors {
        margin-top: 22.3px;
    }

    .radio-selector-item {
        display: flex;
        justify-content: space-between;
        margin-bottom: 12px;
    }

    .radio-selectors span {
        font-family: var(--font-family-Lato);
        font-size: var(--font-size-12);
        font-weight: 500;
        line-height: 17.78px;
        letter-spacing: -0.01em;
        color: var(--color-black-50);
        display: flex;
        justify-content: start;
        flex-grow: 1;
        align-items: center;
        gap: 8.49px;
    }

    .labels-section-booking {
        display: flex;
        align-items: center;
        gap: 11.55px;
    }

    .radio-selectors label {
        font-family: var(--font-family-Lato);
        font-size: var(--font-size-12);
        font-weight: 500;
        line-height: 17.78px;
        letter-spacing: -0.01em;
        color: var(--color-black-50);
    }

    .radio-selectors .check-input-checkbox {
        margin-top: 2px;
    }

    .product-price {
        margin-top: 22.3px;
    }

    .c-title {
        font-family: var(--font-family-Lato);
        font-size: var(--font-size-12);
        font-weight: 700;
        line-height: 18.73px;
        letter-spacing: -0.01em;
        color: var(--color-black-50);
    }

    .c-price {
        font-family: var(--font-family-Lato);
        font-size: var(--font-size-16);
        font-weight: 700;
        line-height: 18.73px;
        letter-spacing: -0.01em;
        color: #0c1529;
        padding-right: 21px;
    }

    .car-totalprice-modal {
        margin-top: 12px;
    }

    .pmt {
        margin-top: 11px;
    }

    .place-ord-btn {
        background-color: var(--color-blue-50);
        border: 1px solid var(--color-blue-50);
        border-radius: 4px;
        padding: 8px 10px 8px 10px;
        color: white;
        /*height: 32px;*/
        /*width: 125px;*/
        transition-duration: 0.4s;
        font-family: var(--font-family-Lato);
        font-size: var(--font-size-14);
        font-weight: 500;
        line-height: 16px;
        letter-spacing: -0.01em;
    }

    .place-ord-btn:focus-visible {
        border: 1px solid var(--color-blue-50);
    }

    .place-ord-btn:active {
        background-color: #2a9fe8bc;
        transform: translateY(2px);
    }

    .place-ord-btn[disabled] {
        background-color: #ededf1;
        border: 1px solid #ededf1;
        border-radius: 4px;
        padding: 8px 10px 8px 10px;
        color: #b2aebf;
        transition-duration: 0.4s;
    }

    .place-order p {
        font-family: var(--font-family-Lato);
        font-size: var(--font-size-12);
        font-weight: 500;
        line-height: 20px;
        letter-spacing: -0.01em;
        color: var(--color-black-30);
        margin-top: 12px;
        text-align: center;
        max-width: 283px;
    }

    /*  */
    #main_booking_div {
        margin-bottom: 19px;
    }

    #main_booking_div .pr-info {
        padding-bottom: 24px;
        border-bottom: 1px solid #cbd5e180;
    }

    #main_booking_div .pr-info h2 {
        font-family: var(--font-family-Lato);
        font-size: var(--font-size-14);
        font-weight: 700;
        line-height: 20px;
        letter-spacing: -0.01em;
        color: var(--color-black-50);
        margin-bottom: 12px;
    }

    #main_booking_div .pr-info h2.active {
        color: var(--color-blue-60);
    }

    .mt-20-px {
        margin-top: 20px;
    }

    .info-btn-booking {
        padding: 4px;
        display: flex;
        align-items: center;
        gap: 6px;
        font-family: var(--font-family-Lato);
        font-size: var(--font-size-12);
        font-weight: 500;
        line-height: 16px;
        letter-spacing: -0.01em;
        color: var(--color-blue-60);
        border: 1px solid #e2e8f0;
        border-radius: 4px;
        height: 28px;
        background-color: transparent;
    }

    #offcanvas_personal_info .offcanvas-header {
        padding-block: 18px;
        padding-inline: 16px;
    }

    #offcanvas_personal_info .offcanvas-header .cmn-offcanvas-head {
        font-family: var(--font-family-Lato);
        font-size: var(--font-size-14);
        font-weight: 600;
        line-height: 20px;
        letter-spacing: -0.01em;
        color: #000000;
        margin-bottom: 0px;
    }

    /* #login_preview.offcanvas.offcanvas-bottom {
  
    z-index: 9999;
  } */
    #offcanvas_personal_info.offcanvas.offcanvas-bottom {
        border-top-right-radius: 24px;
        border-top-left-radius: 24px;
        height: calc(100% - 100px);
    }

    /* forms */
    .form-errors {
        font-size: 10px;
        color: red;
        margin-top: 6px;
    }

    .mb10sc {
        margin-bottom: 10px;
    }

    .iti.iti--allow-dropdown {
        width: 100%;
    }

    .form-secion .form-control {
        font-family: var(--font-family-Lato);
        font-size: var(--font-size-12);
        border-radius: 6px;
        font-weight: 400;
        line-height: 16px;
        border: 1px solid #d0d5dd;
        color: #101828;
        height: 40px;
    }

    .form-secion .form-control:focus {
        border-color: #5cbaf5;
        box-shadow: 0 0 0 0.25rem rgba(92, 186, 245, 0.25);
    }

    .form-scion-btn {
        height: 32px;
        width: 208px;
        color: white;
        font-family: var(--font-family-Lato);
        font-size: var(--font-size-14);
        font-weight: 500;
        line-height: 16px;
        letter-spacing: -0.01em;
        background-color: var(--color-blue-50);
        border-radius: 4px;
        padding-block: 8px;
        padding-inline: 10px;
        border: 1px solid var(--color-blue-50);
        transition-duration: 0.4s;
        margin-top: 18px;
        margin-bottom: 32px;
    }

    .max-w125 {
        max-width: 131px;
    }

    .form-scion-btn:hover {
        background-color: #2a9fe8bc;
    }

    .form-scion-btn:focus-visible {
        border: 1px solid var(--color-blue-50);
    }

    .form-scion-btn:active {
        background-color: #2a9fe8bc;
        transform: translateY(2px);
    }

    .ty-border {
        border: 1px solid var(--color-blue-60);
        border-radius: 4px;
    }

    .cty-delivery-srvc {
        padding: 10px;
        max-width: 206px;
    }

    .form-label-secion span {
        font-family: var(--font-family-Lato);
        font-size: var(--font-size-12);
        font-weight: 500;
        line-height: 16px;
        letter-spacing: -0.01em;
        color: #98a2b3;
    }

    .flex-frm-cls {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 20px;
    }

    .flex-frm-cls label {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .flex-frm-cls span {
        font-family: var(--font-family-Lato);
        font-size: var(--font-size-12);
        font-weight: 500;
        line-height: 16px;
        letter-spacing: -0.01em;
        color: var(--color-black-40);
    }

    .mb-12bok {
        margin-bottom: 12px !important;
    }

    .active-address {
        border: 1px solid #2a9fe8;
        background-color: #e9effd;
    }

    .inactive-address {
        border: 1px solid #dcdae2;
        background-color: #ededf1;
    }

    .address-table {
        min-height: 44px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        padding: 10px;
        border-radius: 4px;
        margin-bottom: 16px;
    }

    .sub-flx {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .mcr-30 {
        margin-left: 22px;
    }

    .change-info {
        color: var(--color-blue-60);
        font-size: 14px;
    }

    .address-table p {
        margin-bottom: 0px;
        font-family: var(--font-family-Lato);
        font-size: var(--font-size-12);
        font-weight: 500;
        line-height: 16px;
        letter-spacing: -0.01em;
        max-width: 219px;
        color: #98a2b3;
    }

    .address-table p span {
        color: #101828 !important;
    }

    .final-address {
        width: 100%;
        margin-bottom: 24px;
    }

    .final-address tr td {
        font-family: var(--font-family-Lato);
        font-size: var(--font-size-14);
        font-weight: 500;
        line-height: 20px;
        letter-spacing: -0.01em;
        padding-bottom: 5px;
    }

    .final-address td a {
        color: var(--color-blue-60);
    }

    .mbpay-12 {
        margin-bottom: 12px;
    }

    .add-new-adress-btndiv-payment {
        padding-top: 12px;
    }

    .mbpay-24 {
        padding-bottom: 0px;
    }

    .address-table-payment {
        margin-top: 12px;
    }

    .add-new-address-btn-payment {
        font-family: var(--font-family-Lato);
        font-size: var(--font-size-12);
        font-weight: 500;
        line-height: 16px;
        letter-spacing: -0.01em;
        color: var(--color-blue-60);
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 6px;
    }

    .address-table-payment {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        padding: 10px;
        border-radius: 4px;
    }

    .address-table-payment .address-titlename {
        margin-bottom: 0px;
        font-family: var(--font-family-Lato);
        font-size: var(--font-size-12);
        font-weight: 500;
        line-height: 24px;
        letter-spacing: -0.01em;
        color: #101828;
    }

    .form-cmn-btn[disabled] {
        background-color: #ced0d4;
        border: 1px solid #ced0d4;
        border-radius: 4px;
        padding: 8px 10px 8px 10px;
        color: white;
        transition-duration: 0.4s;
    }

    .menu-payment {
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 10px;
        font-family: var(--font-family-Lato);
        font-size: var(--font-size-12);
        font-weight: 500;
        line-height: 16px;
        letter-spacing: -0.01em;
        color: var(--color-black-50);
        padding-inline: 8px;
    }

    .menu-payment .trash-bin {
        fill: #2f2b43;
    }

    .menu-payment:hover {
        background-color: #f1f5f9 !important;
    }

    .menu-payment.text-remove:hover {
        color: red;
    }

    .menu-payment.text-remove:hover .trash-bin {
        color: red;
        fill: red;
    }

    .form-cmn-btn {
        height: 32px;
        width: 176px;
        color: white;
        font-family: var(--font-family-Lato);
        font-size: var(--font-size-12);
        font-weight: 500;
        line-height: 16px;
        letter-spacing: -0.01em;
        background-color: var(--color-blue-50);
        border-radius: 4px;
        padding-block: 8px;
        padding-inline: 10px;
        border: 1px solid var(--color-blue-50);
        transition-duration: 0.4s;
    }

    .form-cmn-btn:hover {
        background-color: #2a9fe8bc;
    }

    .form-cmn-btn:active {
        background-color: #2a9fe8bc;
        transform: translateY(2px);
    }

    .form-cmn-btn[disabled]:active {
        background-color: #ced0d4;
        border: 1px solid #ced0d4;
    }

    .form-cmn-btn[disabled]:hover {
        background-color: #ced0d4;
    }

    #offcanvas_payment_info .offcanvas-header {
        padding-block: 18px;
        padding-inline: 16px;
    }

    #offcanvas_payment_info .offcanvas-header .cmn-offcanvas-head {
        font-family: var(--font-family-Lato);
        font-size: var(--font-size-14);
        font-weight: 600;
        line-height: 20px;
        letter-spacing: -0.01em;
        color: #000000;
        margin-bottom: 0px;
    }

    /* #login_preview.offcanvas.offcanvas-bottom {
  
    z-index: 9999;
  } */
    #offcanvas_payment_info.offcanvas.offcanvas-bottom {
        border-top-right-radius: 24px;
        border-top-left-radius: 24px;
        height: calc(100% - 50px);
    }

    .infoform-item2 p {
        font-family: var(--font-family-Lato);
        font-size: var(--font-size-14);
        font-weight: 600;
        line-height: 20px;
        letter-spacing: -0.01em;
        color: #475467;
        margin-bottom: 10px;
    }

    .cards-types {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
    }

    .form-secion {
        margin-top: 12px;
    }

    .default-check {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-top: 10px;
    }

    .actions-modal {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 24px;
        margin-top: 32px;
        margin-bottom: 20px;
    }

    .form-cancel-btn {
        border: 1px solid #98a2b3;
        color: var(--color-black-50);
        background-color: white;
        padding-inline: 10px;
        padding-block: 8px;
        width: 100%;
        max-width: 105px;
        height: 32px;
        font-family: var(--font-family-Lato);
        font-size: var(--font-size-12);
        font-weight: 500;
        line-height: 16px;
        letter-spacing: -0.01em;
        border-radius: 4px;
    }

    .form-submit-btn {
        background-color: var(--color-blue-50);
        color: white;
        height: 32px;
        width: 100%;
        max-width: 105px;
        padding-inline: 10px;
        padding-block: 8px;
        font-family: var(--font-family-Lato);
        font-size: var(--font-size-12);
        font-weight: 500;
        line-height: 16px;
        letter-spacing: -0.01em;
        border-radius: 4px;
        border: 1px solid var(--color-blue-50);
    }

    .error-cardsshow {
        padding: 10px;
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
        border: 2px solid #d92d20;
        margin-bottom: 26px;
        border-radius: 4px;
    }

    .error-cardsshow p {
        margin: 0px;
        font-family: var(--font-family-Lato);
        font-size: var(--font-size-12);
        font-weight: 700;
        line-height: 16px;
        letter-spacing: -0.01em;
        color: #d92d20;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .err-lists-card {
        padding-left: 26px;
        margin: 0px;
        font-family: var(--font-family-Lato);
        font-size: var(--font-size-12);
        font-weight: 500;
        line-height: 16px;
        color: var(--color-black-50);
        letter-spacing: -0.01em;
    }

    #offcanvas_bank_info .offcanvas-header {
        padding-block: 18px;
        padding-inline: 16px;
    }

    #offcanvas_bank_info .offcanvas-header .cmn-offcanvas-head {
        font-family: var(--font-family-Lato);
        font-size: var(--font-size-14);
        font-weight: 600;
        line-height: 20px;
        letter-spacing: -0.01em;
        color: #000000;
        margin-bottom: 0px;
    }

    /* #login_preview.offcanvas.offcanvas-bottom {
  
    z-index: 9999;
  } */
    #offcanvas_bank_info.offcanvas.offcanvas-bottom {
        border-top-right-radius: 24px;
        border-top-left-radius: 24px;
        height: calc(100% - 200px);
    }

    .bank-modal-sep h2 {
        font-family: var(--font-family-Lato);
        font-size: 14px;
        font-weight: 700;
        line-height: 20px;
        letter-spacing: -0.01em;
        color: var(--color-black-50);
        margin-bottom: 0;
    }

    .bank-modal-sep p {
        margin-top: 8px;
        margin-bottom: 0;
        font-family: var(--font-family-Lato);
        font-size: 14px;
        font-weight: 600;
        line-height: 20px;
        letter-spacing: -0.01em;
        color: var(--color-black-30);
    }

    .form-submit-btn-bank {
        background-color: var(--color-blue-50);
        color: white;
        height: 32px;
        width: 100%;
        max-width: 146px;
        padding-inline: 10px;
        padding-block: 8px;
        font-family: var(--font-family-Lato);
        font-size: var(--font-size-12);
        font-weight: 500;
        line-height: 16px;
        letter-spacing: -0.01em;
        border-radius: 4px;
        border: 1px solid var(--color-blue-50);
    }

    .form-submit-btn-bank a[href^="tel:"] {
        color: var(--color-black-50);
    }

    .bank-info-table {
        margin-top: 28px;
    }

    .bank-info-table td {
        padding-inline: 10px;
        padding-block: 8px;
        border-bottom: 22px solid transparent;
        background-clip: padding-box;
    }

    .bank-info-current {
        font-family: var(--font-family-Lato);
        font-size: var(--font-size-12);
        font-weight: 500;
        line-height: 19px;
        letter-spacing: -0.01em;
        color: var(--color-black-50);
        background-color: #ededf1;
    }

    .bank-info-address {
        font-family: var(--font-family-Lato);
        font-size: var(--font-size-12);
        font-weight: 600;
        line-height: 20px;
        letter-spacing: -0.01em;
        color: #1c6a9b;
    }

    #bank_modal_sat .modal-body {
        padding-block: 10px;
        padding-inline: 10px;
    }

    /* checkoutnew */
    .track-ordr-btn {
        height: 30px;
    }

    .order-status {
        font-size: 14px;
    }

    .ordertext {
        font-size: 14px;
    }

    .order-number {
        font-size: 14px;
    }

    .main-title {
        font-size: 16px;
    }

    .address-title {
        font-size: 14px;
    }

    .address-main {
        font-size: 14px;
    }

    .track-ordr-btn {
        font-size: 12px;
    }

    td.ordertext {
        width: 40%;
    }

    /* track new */
    .main-heading-track {
        font-size: 18px;
    }

    .quest-title {
        font-size: 16px;
        margin-bottom: 0px;
    }

    .quest-para {
        font-size: 14px;
        line-height: 28px;
    }

    #questionaries_section {
        padding-block: 16px;
    }

    .timeline-items h2 {
        font-size: 12px;
        line-height: 20px;
    }

    .timeline-items p {
        font-size: 12px;
        line-height: 20px;
    }

    .inprocess .pb-32 {
        padding-bottom: 16px;
    }

    /* failed payment page */
    #failed_textanimation h1 {
        font-size: 16px;
        line-height: 20px;
        margin-bottom: 8px;
    }

    #failed_textanimation p {
        font-size: 14px;
        line-height: 20px;
        margin-bottom: 30px;
    }

    .pd7x4 {
        margin-bottom: 24px;
        padding-block: 0px;
        padding-inline: 10px;
    }

    #failed_textanimation .go-back-btn {
        font-size: 12px;
        font-weight: 500;
        padding: 7px 20px;
    }

    /* addition-modla-css */
    .chargies-modal-close-btn {
        font-size: 14px;
    }

    .chargies-modal-order-btn {
        font-size: 14px;
    }

    .chargies-footer-stion {
        gap: 15px;
    }

    .accpt-texture {
        font-size: 12px;
    }

    .c-price {
        font-size: 14px !important;
    }

    .c-price-title {
        font-size: 12px;
    }

    .select-accept-currcies {
        font-size: 12px;
    }
}

@media screen and (min-width: 338px) and (max-width: 383px) {
    .specs-section {
        gap: 6px;
    }
}

@media screen and (min-width: 300px) and (max-width: 338px) {
    .specs-section {
        gap: 6px;
    }

    .mcr-30 {
        margin-left: 3px;
    }

    .colsm-12 {
        flex: 0 0 auto;
        width: 100%;
    }

    .chargies-footer-stion {
        gap: 6px;
    }
}

@media screen and (min-width: 300px) and (max-width: 767px) {
    .reserve-car {
        margin-right: unset;
    }

    input.exp {
        width: calc(100% - 100px);
        font-size: 12px;
    }

    .addintional-chargies-body {
        padding: 16px 16px 16px 16px;
    }

    .help-card {
        margin-block: 20px;
        padding: 16px;
    }

    .middle-section-helpgrow {
        padding: 14px;
    }

    .h-tip {
        padding: 4px 27px;
        font-size: 12px;
    }

    .h-para {
        font-size: 14px;
        margin-bottom: 10px;
    }

    .h-title {
        font-size: 18px;
        margin-bottom: 3px;
    }

    /* newcheckout */
    .bannar-getmore-reward {
        padding: 16px 20px;
    }

    .bannar-getmore-reward img {
        max-width: 200px;
        height: auto;
    }

    .getmore {
        max-width: 303px;
    }

    .bannar-getmore-reward .getmore button,
    .bannar-getmore-reward .getmore a {
        padding: 2px 6px;
    }

    .bannar-getmore-reward .getmore h2 {
        font-size: 16px;
        margin-bottom: 0px;
        line-height: 24px;
    }

    .bannar-getmore-reward .getmore p {
        font-size: 14px;
        line-height: 20px;
    }

    .tabs-benifits span {
        font-size: 16px;
        padding: 8px 16px;
    }

    .benifits-checkout .title {
        font-size: 22px;
        margin-bottom: 16px;
    }

    .addin-order {
        max-width: 150px;
        padding: 6px 10px;
    }

    /* slider */
    .mob-slider {
        display: block;
    }

    .desktop-slider {
        display: none;
    }

    .ship-information .title {
        font-size: 14px;
        line-height: 20px;
    }

    .ship-information .para {
        font-weight: 400;
        font-size: 14px;
    }

    .payment_selection .selection-payment label {
        font-size: 14px;
    }
}

@media screen and (max-width: 510px) {
    .bannar-getmore-reward img {
        display: none;
    }

    .getmore {
        max-width: 100%;
    }

    .bannar-getmore-reward .getmore h2 {
        line-height: 22px;
    }

    .bannar-getmore-reward .getmore p {
        line-height: 20px;
    }

    #add_on_autoparts img {
        height: auto;
        max-width: 75px;
    }

    #add_on_autoparts .title {
        font-size: 12px;
    }

    #add_on_autoparts .para {
        font-size: 12px;
    }

    #add_on_autoparts .priceaddon {
        font-size: 12px;
    }

    #add_on_autoparts .btn-addinorder {
        padding-block: 2px;
        font-size: 12px;
    }

    .payments-accepted {
        justify-content: center;
        flex-wrap: wrap;
        gap: 16px;
    }
}

@media screen and (min-width: 768px) {
    .card-booking-detail {
        padding: 13px 12px;
    }
}

@media screen and (max-width: 768px) {
    #add_on_service .title {
        font-size: 14px;
        line-height: 20px;
    }

    #add_on_service .title2 {
        font-size: 14px;
        line-height: 20px;
    }

    #add_on_service .para {
        font-size: 12px;
        line-height: 20px;
        margin-bottom: 10px;
    }

    #add_on_service .para2 {
        font-size: 12px;
        line-height: 20px;
        margin-bottom: 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 180px;
    }

    #add_on_service .slick-dots li.slick-active {
        width: 15px !important;
        height: 6px !important;
        padding: 3px !important;
    }

    #add_on_service .slick-dots li {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #add_on_service .slick-dots {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .carrier-div select {
        width: 100%;
    }

    .carrier-div {
        flex-grow: 1;
    }

    .b-title {
        font-size: 16px;
        line-height: 16px;
        min-width: 1px;
    }

    .bank-info-div .item-info .val {
        min-width: 1px;
    }

    .bank-info-div {
        margin-bottom: 0px;
    }

    .bank-info-div .item-info .title {
        min-width: 141px;
        margin-bottom: 10px;
    }

    .whbuy-withsat-para .para-ul .para {
        font-size: 14px;
        line-height: 20px;
    }

    .whbuy-withsat-para .para-ul .title {
        font-size: 14px;
    }

    .whbuy-withsat-para .title {
        font-size: 14px;
    }

    /* why buy with sat */
    .buywith-confidence ul li h4 {
        font-size: 14px;
        line-height: 20px;
    }

    .buywith-confidence ul li p {
        font-size: 14px;
        line-height: 20px;
    }

    .buywith-confidence {
        margin-top: 16px;
    }

    .buywith-confidence .title {
        font-size: 14px;
    }

    /* why buy with sat */
    .bank-transfer-info .title-bank {
        font-size: 14px;
        line-height: 20px;
        min-width: 104px;
        display: flex;
        max-width: 103px;
        align-items: center;
    }

    .bank-transfer-info .para-bank {
        padding: 8px 6px;
        font-size: 13px;
        line-height: 20px;
        min-width: 100px;
    }

    .bank-transfer-info .bank-info {
        margin-bottom: 0px;
        flex-wrap: wrap;
    }

    .bank-transfer-info .bank-info .d-flex {
        margin-bottom: 20px;
    }

    .cars-information-details .title {
        font-size: 14px;
    }

    .payment-cards-fields {
        flex-wrap: wrap;
    }

    .payment-cards-fields .card-number {
        max-width: 100%;
    }

    .payment-cards-fields .expiration {
        max-width: calc(50% - 10px);
    }

    .payment-cards-fields .cvc {
        max-width: calc(50% - 10px);
    }

    .payment-cards-fields label {
        font-size: 14px;
    }

    .payments-accepted .cards {
        flex-wrap: wrap;
    }

    .confirm-checkout {
        max-width: 150px;
        font-size: 14px;
    }

    .payment-cards-fields {
        justify-content: space-between;
    }

    .alert-card-payment {
        font-size: 14px;
    }

    .pdf-html-agreement .main-heading {
        margin-bottom: 20px;
    }

    .pdf-html-agreement .main-heading h2 {
        font-size: 1.2rem;
    }

    .pdf-html-agreement .main-heading h3 {
        font-size: 1rem;
    }

    .payment-card-tablet {
        display: block;
    }

    .hide-on-tablet {
        display: none;
    }

    .check-termcondition {
        font-size: 14px;
    }

    .check-termcondition a {
        font-size: 14px;
    }
}