/*--------------------------------------------------------------
# General
----------------------------------------------------------------*/
html {
    touch-action: manipulation;
}

body {
    background: #F9F9F9;
    font-family: 'Roboto';
    scroll-behavior: smooth;
    display: flex;
    flex-direction: column;
}

.bx {
    vertical-align: middle;
}

.mobile-shared-container {
    padding: 40px 0;
}

::placeholder {
    color: var(--text-muted);
    font-size: 15px;
    opacity: 1; /* Firefox */
}

::-ms-input-placeholder { /* Edge 12-18 */
    color: var(--text-muted);
    font-size: 15px;
}

.caleran-container-mobile .caleran-input .caleran-calendars .caleran-month-selector .caleran-ms-month, .caleran-container-mobile .caleran-input .caleran-calendars .caleran-year-selector .caleran-ms-month {
    height: 33.33%;
}

.route-timeline-press {
    position: relative;
    list-style: none;
    padding: 0;
    margin-bottom: 0
}

    .route-timeline-press:before {
        content: "";
        position: absolute;
        top: 14px;
        bottom: 16px;
        left: 2px;
        width: 3px;
        border-left: 2px dashed var(--background-primary);
    }

    .route-timeline-press.has-stops:before {
        bottom: 35px;
    }

    .route-timeline-press li {
        position: relative;
        font-weight: 500;
        font-size: 12px;
        color: #888;
        padding-left: 12px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 80%;
        line-height: normal;
    }

    .route-timeline-press .routefrom-timeline-item::before {
        content: "";
        position: absolute;
        top: 6px;
        left: 0;
        width: 6px;
        height: 6px;
        border: 1px solid var(--background-primary);
        background: transparent;
        border-radius: 50%;
    }

    .route-timeline-press .routeto-timeline-item::before {
        content: "";
        position: absolute;
        width: 9px;
        height: 9px;
        bottom: 5px;
        left: -1px;
        background-image: url('/assets/img_V2/9route-map.png');
        background-repeat: no-repeat;
    }

.route-timeline-cb {
    position: relative;
    list-style: none;
    padding: 0;
    margin-bottom: 0
}

    .route-timeline-cb:before {
        content: "";
        position: absolute;
        top: 50px;
        bottom: 70px;
        left: 20px;
        width: 3px;
        border-left: 2px dashed var(--background-primary);
    }

    .route-timeline-cb .route-timeline-item-cb {
        display: flex;
        align-items: center;
        padding-bottom: 20px;
    }

    .route-timeline-cb .oval-route-cb {
        border-radius: 8px;
        background: linear-gradient(0deg, var(--background-primary) 0%, var(--background-primary) 100%);
        width: 44px;
        height: 44px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        padding: 5px;
    }

        .route-timeline-cb .oval-route-cb .circle-cb {
            border: 2px solid var(--background-light);
            border-radius: 50%;
            width: 10px;
            height: 10px;
        }

    .route-timeline-cb .route-timeline-item-cb .route-timeline-val-cb {
        padding-left: 15px;
    }


.caleran-footer {
    display: none;
}

.noresult-bg {
    border-radius: 12px;
    background: var(--background-light);
    padding: 32px;
    text-align: center;
}

.listing-noresult .noresult-bg img {
    max-width: 100%;
    margin-bottom: 20px;
}

.listing-noresult .noresult-bg h5 {
    font-size: 20px;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 7px;
    color: var(--border-strong);
}

.listing-noresult .noresult-bg span {
    font-size: 14px;
    color: var(--border-strong);
    line-height: normal;
}

.loading {
    --uib-size: 18px;
    --uib-color: white;
    --uib-speed: 2s;
    --uib-bg-opacity: 0;
    height: var(--uib-size);
    width: var(--uib-size);
    transform-origin: center;
    animation: rotate var(--uib-speed) linear infinite;
    will-change: transform;
    overflow: visible;
    display: none;
}

.loading-active .loading {
    display: inline-block;
}

.loading-active .btn-text {
    display: none;
}

.car {
    fill: none;
    stroke: var(--uib-color);
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
    stroke-linecap: round;
    animation: stretch calc(var(--uib-speed) * 0.75) ease-in-out infinite;
    will-change: stroke-dasharray, stroke-dashoffset;
    transition: stroke 0.5s ease;
}

.track {
    fill: none;
    stroke: var(--uib-color);
    opacity: var(--uib-bg-opacity);
    transition: stroke 0.5s ease;
}

@keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes stretch {
    0% {
        stroke-dasharray: 0, 150;
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dasharray: 75, 150;
        stroke-dashoffset: -25;
    }

    100% {
        stroke-dashoffset: -100;
    }
}


@keyframes slideUp {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}


@keyframes slideDown {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(100%);
    }
}

.hide-password {
    display: none;
}

.eye-icon {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

/*--------------------------------------------------------------
# Pagination
--------------------------------------------------------------*/
.booking-hist-pagination {
    display: flex;
    justify-content: center;
}

.pagination {
    padding: 0;
    margin: 0;
    gap: 10px;
    font-size: 18px;
    font-weight: 500;
    list-style: none;
    background: var(--background-light);
    border-radius: 12px;
    min-width: 210px;
    padding: 5px;
    justify-content: space-around;
}

.paginate_button a {
    font-weight: 500;
    font-size: 18px;
}

.paginate_button.disabled a {
    color: var(--border-strong);
}

.paginate_button.color-pagination a {
    color: var(--text-secondary);
}

.paginate_button.active a {
    color: var(--text-secondary);
}

/*--------------------------------------------------------------
# Head Title
----------------------------------------------------------------*/
.mobile-head-container {
    border-bottom: 1px solid #CCC;
    background: var(--background-light);
    position: relative;
    padding: 15px;
}

    .mobile-head-container a > i {
        position: absolute;
        top: 10px;
        left: 14px;
        color: var(--border-strong);
        font-size: 28px;
    }

    .mobile-head-container > h6 {
        margin-bottom: 0;
        font-size: 14px;
        line-height: normal;
        letter-spacing: .15px;
        text-align: center;
        font-weight: 400;
    }

/*--------------------------------------------------------------
# Drop Down
----------------------------------------------------------------*/
.select-container {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    background: #F9F9F9;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    -webkit-border-top-left-radius: 12px;
    -webkit-border-top-right-radius: 12px;
    padding: 16px;
    overflow: hidden;
    z-index: 1080;
    transform: translateY(100%);
    transition: transform .3s ease-in-out, height .3s ease-in-out;
}

    .select-container.open {
        transform: translateY(0);
        height: 100%;
    }

    .select-container .scrolled {
        overflow-y: auto;
        overflow-x: hidden;
        max-height: 100%;
        scroll-behavior: smooth;
    }

    .select-container ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

        .select-container ul > li {
            padding: 12px;
        }

            .select-container ul > li.selected {
                color: var(--text-secondary);
            }

    .select-container .select-header {
        display: flex;
        align-items: center;
        padding: 6px 10px;
    }

        .select-container .select-header > i {
            font-size: 26px;
        }

        .select-container .select-header > h6 {
            margin-bottom: 0;
            font-size: 18px;
            line-height: normal;
            font-weight: 700;
            margin-left: 14px;
        }

        .select-container .select-header > img {
            margin-left: 14px;
        }

    .select-container .bottom-container {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 16px;
    }

        .select-container .bottom-container > p {
            text-align: center;
            color: var(--border-strong);
            font-size: 14px;
            line-height: normal;
            margin-bottom: 0;
        }

            .select-container .bottom-container > p > a {
                text-decoration: underline;
                -webkit-text-decoration: underline;
                color: var(--border-strong);
            }

    .select-container .btn-help {
        position: relative;
        width: 100%;
        height: 40px;
        background: var(--background-primary);
        border-radius: 12px;
        border: 0;
        outline: 0;
        color: var(--text-light);
        font-weight: 500;
        line-height: normal;
        text-align: center;
        margin-bottom: 32px;
        transition: .3s ease;
    }

        .select-container .btn-help > img {
            position: absolute;
            top: 6px;
            left: 29px;
        }

/*--------------------------------------------------------------
# Input
----------------------------------------------------------------*/
.label-i {
    position: relative;
    display: block;
    margin-bottom: 35px;
}

    .label-i .input {
        background: var(--background-light);
        border: 1px solid var(--border-strong);
        border-radius: 12px;
        width: 100%;
        height: 65px;
        padding: 23px 23px 8px;
        outline: 0;
        font-size: 15px;
    }

        .label-i .input + span {
            color: var(--text-muted);
            font-weight: 600;
            position: absolute;
            left: 23px;
            top: 8px;
            cursor: text;
            font-size: 14px;
            transition: .3s ease;
        }

        .label-i .input:placeholder-shown + span {
            top: 23px;
            font-weight: 400;
            font-size: 16px;
        }

        .label-i .input:focus + span {
            top: 8px;
            font-size: 14px;
            font-weight: 600;
        }

input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
    display: none;
}


/*--------------------------------------------------------------
# Password Strength
----------------------------------------------------------------*/
#password-strength {
    display: none;
    transition: opacity .3s ease, visibility .3s ease;
    opacity: 0;
    visibility: hidden;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

    #password-strength.show {
        opacity: 1;
        visibility: visible;
    }

.strength-bar-outer {
    border-radius: 8px;
    height: 21px;
    width: 100%;
    background-color: transparent;
    overflow: hidden;
}

.strength-bar-inner {
    height: 100%;
    width: 0;
    border-radius: 8px;
    background-color: transparent;
    transition: width .3s ease, background-color .3s ease;
}

.strength-text {
    display: block;
    font-size: 14px;
    width: 50px;
    text-align: center;
    transition: color .3s ease;
}

    .strength-text.weak {
        color: #FF3B4E;
    }

    .strength-text.medium {
        color: #FB8D20;
    }

    .strength-text.strong {
        color: var(--text-secondary);
    }

/*--------------------------------------------------------------
# Cancel Booking Modal
----------------------------------------------------------------*/
.cancelbooking-mobile-modal {
    --l: 1rem;
    --r: 1rem;
    --s: 350px;
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5);
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    z-index: 1055;
    transition: opacity .3s ease, visibility .3s ease;
}

    .cancelbooking-mobile-modal.open {
        opacity: 1;
        visibility: visible;
    }

    .cancelbooking-mobile-modal .cancelbooking-mobile-modal-dialog {
        margin-left: var(--l);
        margin-right: var(--r);
        position: relative;
        width: auto;
    }

    .cancelbooking-mobile-modal .cancelbooking-mobile-modal-dialog-centered {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: calc(100% - var(--l) * 2);
    }

    .cancelbooking-mobile-modal .cancelbooking-mobile-modal-content {
        background: var(--background-light);
        width: var(--s);
        height: auto;
        position: relative;
        display: flex;
        flex-direction: column;
        border-radius: 12px;
    }

    .cancelbooking-mobile-modal .cancelbooking-mobile-modal-body {
        padding: 36px 29px 26px;
        height: 100%;
        text-align: center;
    }

        .cancelbooking-mobile-modal .cancelbooking-mobile-modal-body h6 {
            margin-bottom: 30px;
            font-weight: 700;
        }

        .cancelbooking-mobile-modal .cancelbooking-mobile-modal-body span {
            line-height: normal;
            margin-bottom: 35px;
            display: block;
        }

        .cancelbooking-mobile-modal .cancelbooking-mobile-modal-body .btn-yes {
            background: var(--background-secondary);
            border-radius: 12px;
            color: #FCFCFC;
            line-height: normal;
            font-size: 16px;
            font-weight: 700;
            height: 41px;
            border: 0;
            outline: 0;
            transition: all .3s;
            margin-bottom: 18px;
        }

    .cancelbooking-mobile-modal .cancelbooking-modal-body .btn-yes:hover {
        background: var(--background-secondary-hover);
    }

    .cancelbooking-mobile-modal .cancelbooking-mobile-modal-body .btn-cancel {
        font-size: 16px;
        background-color: transparent;
        width: fit-content;
        margin: 0 auto;
        outline: 0;
        border: 0;
        font-weight: 700;
        line-height: normal;
        color: var(--text-primary);
    }


.support-modal {
    --l: 1rem;
    --r: 1rem;
    --s: 800px;
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5);
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    z-index: 1055;
    transition: opacity .3s ease, visibility .3s ease;
}

    .support-modal.open {
        opacity: 1;
        visibility: visible;
    }

    .support-modal .support-modal-dialog {
        /*        margin-left: var(--l);
        margin-right: var(--r);*/
        position: relative;
        width: auto;
    }

    .support-modal .support-modal-dialog-centered {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: calc(100% - var(--l) * 2);
    }

    .support-modal .support-modal-content {
        background: var(--background-light);
        width: var(--s);
        height: 100vh;
        position: relative;
        display: flex;
        flex-direction: column;
        border-radius: 12px;
        box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.25);
    }

    .support-modal .support-modal-header {
        position: relative;
        padding: 1rem 1rem 0rem 2rem;
        /*        padding-bottom: 0px;
        margin-bottom: 0px;*/
    }

    .support-modal .support-modal-inner {
        flex: 1;
        overflow-y: auto;
        box-sizing: border-box;
    }

    .support-modal .support-modal-body {
        padding: 30px;
        background: var(--background-primary);
    }

        .support-modal .support-modal-body h5 {
            margin-bottom: 0;
            font-size: 18px;
            font-weight: 700;
            line-height: normal;
        }

        .support-modal .support-modal-body i {
            cursor: pointer;
        }

        .support-modal .support-modal-body h6 {
            font-size: 16px;
            line-height: normal;
            margin-bottom: 19px;
            font-weight: 700;
            color: var(--text-light);
        }

        .support-modal .support-modal-body p {
            line-height: 18px;
            font-size: 14px;
            margin-bottom: 20px;
            color: var(--text-light);
        }

    .support-modal .contact-wrapper {
        border-radius: 12px;
        background: var(--background-light);
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
        padding: 25px 17px;
    }

        .support-modal .contact-wrapper .contact-item {
            display: flex;
            align-items: center;
            gap: 25px;
            margin-bottom: 50px;
        }

            .support-modal .contact-wrapper .contact-item:last-child {
                margin-bottom: 0;
            }

            .support-modal .contact-wrapper .contact-item i {
                color: var(--text-secondary);
            }

    .support-modal .call-wrapper {
        border-radius: 12px;
        background: var(--background-light);
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
        padding: 25px 17px;
    }

        .support-modal .call-wrapper .icon {
            color: var(--text-secondary);
            margin-right: 2.5rem;
        }

    .support-modal .or {
        color: var(--border-strong);
        text-align: center;
        margin-top: 1rem;
        margin-bottom: 1rem;
    }

    .support-modal .call-wrapper .chat-desc {
        color: var(--border-strong);
        font-size: 14px;
        margin-bottom: 1rem;
    }

    .support-modal .call-wrapper .btn-chat {
        width: 223px;
        height: 45px;
        border-radius: 12px;
        background: var(--background-secondary);
        color: #FCFCFC;
        font-size: 18px;
        font-weight: 700;
        transition: all .3s;
        text-align: center;
        padding: .6rem .75rem;
        cursor: pointer;
        margin-top: .5rem;
    }

/*--------------------------------------------------------------
# Checkbox
--------------------------------------------------------------*/
.check-container {
    /*  display: flex;
    align-items: center;*/
    gap: 35px;
    margin-bottom: 24px;
}

.checkbox-wrapper-46 input[type="checkbox"] {
    display: none;
    visibility: hidden;
}

.checkbox-wrapper-46 .cbx-guest {
    margin: auto;
    -webkit-user-select: none;
    user-select: none;
    cursor: pointer;
    top: 0;
    width: auto;
    height: auto;
    border: none;
}

    .checkbox-wrapper-46 .cbx-guest .true-box {
        display: inline-block;
        vertical-align: middle;
        transform: translate3d(0, 0, 0);
    }

        .checkbox-wrapper-46 .cbx-guest .true-box:first-child {
            position: relative;
            width: 20px;
            height: 20px;
            border-radius: 4px;
            transform: scale(1);
            vertical-align: middle;
            border: 2px solid #DADADA;
            transition: all 0.2s ease;
        }

            .checkbox-wrapper-46 .cbx-guest .true-box:first-child svg {
                position: absolute;
                top: 4px;
                left: 3px;
                fill: none;
                stroke: var(--background-light);
                stroke-width: 2;
                stroke-linecap: round;
                stroke-linejoin: round;
                stroke-dasharray: 25px;
                stroke-dashoffset: 25px;
                transition: all 0.3s ease;
                transition-delay: 0.1s;
                transform: translate3d(0, 0, 0);
            }

            .checkbox-wrapper-46 .cbx-guest .true-box:first-child:before {
                content: "";
                width: 100%;
                height: 100%;
                background: var(--background-primary);
                display: block;
                transform: scale(0);
                opacity: 1;
                border-radius: 50%;
            }

    .checkbox-wrapper-46 .cbx-guest .check-label:last-child {
        padding-left: 8px;
        color: #777;
        font-size: 14px;
    }

.checkbox-wrapper-46 .inp-cbx:checked + .cbx-guest .true-box:first-child {
    background: var(--background-primary);
    border-color: var(--background-primary);
    animation: wave-46 0.4s ease;
}

    .checkbox-wrapper-46 .inp-cbx:checked + .cbx-guest .true-box:first-child svg {
        stroke-dashoffset: 0;
    }

    .checkbox-wrapper-46 .inp-cbx:checked + .cbx-guest .true-box:first-child:before {
        transform: scale(3.5);
        opacity: 0;
        transition: all 0.6s ease;
    }

/*--------------------------------------------------------------
# Quantity
--------------------------------------------------------------*/
.qty-input {
    display: flex;
    align-items: center;
    overflow: hidden;
    border-radius: 6px;
}

.input-number,
.btn-number {
    background: transparent;
    font-size: inherit;
    border: none;
    display: inline-block;
    min-width: 0;
    height: 37px;
    line-height: 1;
    background: var(--background-light);
    border: 1px solid #CCC;
}

.input-number {
    width: 50px;
    height: 37px;
    min-width: 0;
    display: inline-block;
    text-align: center;
    appearance: textfield;
}

    .input-number:focus {
        outline: 0;
    }

.btn-number {
    padding: 0;
    width: 25px;
    font-size: 18px;
    overflow: hidden;
    position: relative;
    background: var(--background-primary);
    color: var(--text-light);
    outline: 0;
    border: 0;
    transition: color .3s;
}

    .btn-number:disabled {
        width: 25px;
        height: 37px;
        background: var(--border-strong);
    }

        .btn-number:disabled:hover {
            background-color: var(--border-strong);
            border: none;
            color: var(--text-light);
        }

.btn-plus {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.btn-minus {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}


/*--------------------------------------------------------------
# Caleran
--------------------------------------------------------------*/
.caleran-container-mobile .caleran-input .caleran-calendars .caleran-calendar .caleran-title {
    color: var(--text-primary) !important;
}

    .caleran-container-mobile .caleran-input .caleran-calendars .caleran-calendar .caleran-title .caleran-month-switch:hover, .caleran-container-mobile .caleran-input .caleran-calendars .caleran-calendar .caleran-title .caleran-year-switch:hover {
        color: var(--text-primary) !important;
        font-weight: 400;
    }

.caleran-container-mobile .caleran-input .caleran-calendars .caleran-calendar .caleran-title {
    background: var(--background-light) !important;
    border-bottom: 0 !important;
}

.caleran-container-mobile .caleran-input .caleran-calendars .caleran-calendar .caleran-title {
    font-size: 16px !important;
    font-family: 'Roboto' !important;
}

/*--------------------------------------------------------------
# Pre Loader
--------------------------------------------------------------*/
#pre-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: none;
    align-items: center;
    justify-content: center;
    background-color: rgba(255,255,255,.5);
    z-index: 9999;
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
#mobile-header {
    transition: all 0.5s;
    z-index: 997;
    padding: 8px 0;
    background: var(--background-light);
    box-shadow: 0 2px 4px 0 rgba(0,0,0,.2);
}

    #mobile-header.header-scrolled {
        box-shadow: 0 2px 4px 0 rgba(0,0,0,.2);
    }


    #mobile-header .logo img {
        max-height: 28px;
    }

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
.mobile-navbar {
    padding: 0;
}

    .mobile-navbar ul {
        margin: 0;
        padding: 0;
        display: flex;
        list-style: none;
        align-items: center;
    }

    .mobile-navbar li {
        position: relative;
    }

    .mobile-navbar .bx-support {
        margin-right: 9px;
    }

    .mobile-navbar li span {
        font-size: 12px;
        font-weight: 500;
        letter-spacing: .15px;
    }

    .mobile-navbar a,
    .mobile-navbar a:focus {
        display: flex;
        align-items: center;
        justify-content: space-between;
        /*padding: 6px 0 6px 0;*/
        font-weight: 400;
        color: var(--text-primary);
        white-space: nowrap;
        transition: 0.3s;
    }

.mobile-menu-items {
    position: absolute;
    top: 44px;
    left: -100%;
    width: 60%;
    height: 100%;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    background: var(--background-light);
    z-index: 99;
    overflow: hidden;
    transition: left .3s ease-in-out;
}

    .mobile-menu-items.open {
        position: fixed;
        left: 0;
        z-index: 9999;
    }

    .mobile-menu-items .menu-item {
        padding: 16px 16px 20px;
        height: 100%;
    }

        .mobile-menu-items .menu-item > ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }

            .mobile-menu-items .menu-item > ul > li {
                padding: 10px 8px;
            }

                .mobile-menu-items .menu-item > ul > li > a {
                    font-weight: 500;
                    letter-spacing: .15px;
                }

.mobile-navbar .user-p-icon {
    font-size: 27px;
    color: var(--text-secondary);
}

.mobile-navbar .user-n {
    font-size: 27px;
    color: var(--text-primary);
}

.mobile-navbar a.menu-circle-name {
    background: var(--background-primary);
    border-radius: 50%;
    width: 27px;
    height: 27px;
    color: var(--text-light);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/*--------------------------------------------------------------
# Back To top
--------------------------------------------------------------*/
.mobile-back-to-top {
    bottom: 100px;
}

/*--------------------------------------------------------------
# Button
--------------------------------------------------------------*/
.btn-genaral {
    background: var(--background-secondary);
    color: var(--text-light);
    width: 290px;
    border-radius: 12px;
    height: 42px;
}

    .btn-genaral:hover {
        background: var(--background-secondary-hover);
        color: var(--text-light);
    }

    .btn-genaral:disabled, .btn-genaral[disabled] {
        background: var(--border-strong);
        color: var(--text-light);
        font-weight: 700;
    }

.btn-genaral-filter {
    width: 150px;
    height: 45px;
    flex-shrink: 0;
    border-radius: 12px;
    background: var(--background-secondary);
    color: var(--text-light);
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

    .btn-genaral-filter :hover {
        background: var(--background-secondary);
        color: var(--text-light);
        border-color: var(--background-secondary);
    }

    .btn-genaral-filter :disabled, .btn-genaral-filter [disabled] {
        background: var(--border-strong);
        color: var(--text-light);
        font-weight: 700;
    }


.btn-clear {
    width: 150px;
    height: 45px;
    flex-shrink: 0;
    border-radius: 12px;
    border: 1px solid var(--background-primary);
    background: var(--background-light);
    color: var(--text-secondary);
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

    .btn-clear:hover {
        color: var(--text-primary);
        background-color: var(--background-light);
        border-color: var(--background-light);
    }

.btn-payment-yes {
    background: var(--background-secondary);
    color: var(--text-light);
    border-radius: 12px;
    height: 42px;
}

    .btn-payment-yes:hover {
        background: var(--background-secondary);
        color: var(--text-light);
    }


    .btn-payment-yes:disabled, .btn-genaral[disabled] {
        background: var(--border-strong);
        color: var(--text-light);
        font-weight: 700;
    }


.btn-modal {
    background: var(--background-secondary);
    width: 222px;
    font-size: 18px;
    font-weight: 700;
    color: #FCFCFC;
}

.btn-cancel {
    color: var(--text-secondary);
    border: 1px solid var(--background-primary);
    border-radius: 12px;
    background: var(--background-light);
    cursor: pointer;
    font-weight: 700;
    padding: .375rem .75rem;
    width: 290px;
    height: 45px;
}

.btn-complete-box {
    padding: 0.6rem;
    width: auto;
    height: 45px;
    flex-shrink: 0;
    border-radius: 6px;
    border: 1px solid var(--background-primary);
}

    .btn-complete-box .title-rebook-trip {
        color: var(--background-primary);
        text-align: center;
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }

.btn-help {
    background: var(--background-primary);
    border-radius: 12px;
    color: var(--text-light);
    font-weight: 700;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.btn-ticket {
    background: var(--background-light);
    border: 1px solid var(--background-primary);
    border-radius: 12px;
    color: var(--background-primary);
    width: 135px;
}

    .btn-ticket:hover {
        color: var(--background-primary);
        background-color: var(--background-light);
        border-color: var(--background-primary);
    }

.service-wrap .btn-ticket {
    display: inline-flex;
    align-items: center;
    padding: 10px;
    cursor: pointer;
    margin-right: 1rem;
    font-size: 16px !important;
    font-weight: 700 !important;
}

    .service-wrap .btn-ticket img {
        width: 20px;
        height: 20px;
        margin-right: 10px;
    }

.service-wrap .slick-slide {
    margin: 1rem 1rem 1rem 0;
}

.btn-mainly-blue-color {
    background: var(--background-primary);
    color: var(--text-light);
    font-weight: 700;
}

    .btn-mainly-blue-color:hover {
        color: var(--text-light);
        background-color: var(--background-primary);
        border-color: var(--background-primary);
    }

    .btn-mainly-blue-color:focus {
        color: var(--text-light);
        background-color: var(--background-primary);
        border-color: var(--background-primary);
        outline: 0;
        box-shadow: var(--bs-btn-focus-box-shadow);
    }



/*--------------------------------------------------------------
# Modal
--------------------------------------------------------------*/
.custom-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transition: opacity .3s ease, visibility .3s ease;
    z-index: 999;
}

    .custom-modal-overlay.open {
        opacity: 1;
        visibility: visible;
    }

.custom-modal-header {
    display: flex;
    align-items: center;
}

.custom-modal-box {
    background: var(--text-light);
    border-radius: 16px;
    outline: 0;
    width: 346px;
    max-width: 90%;
    height: 286px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.custom-modal-body {
    display: flex;
    align-items: center;
    flex-grow: 1;
}

    .custom-modal-body h6 {
        font-size: 16px;
        font-weight: 700;
        line-height: normal;
    }

.custom-modal-footer .btn-yes {
    width: 222px;
    max-width: 100%;
    border: 0;
    outline: 0;
    border-radius: 12px;
    background: var(--background-secondary);
    color: var(--text-light);
    font-weight: 700;
    padding: 8px;
    margin-bottom: 24px;
    transition: .3s ease;
}

.custom-modal-footer .btn-no {
    width: 222px;
    max-width: 100%;
    border: 0;
    outline: 0;
    background-color: transparent;
    font-weight: 700;
    padding: 8px;
    transition: .3s ease;
}

.mobile-message-modal {
    --l: 1rem;
    --r: 1rem;
    --s: 350px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(68, 68, 68, .5);
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    z-index: 1180;
    transition: opacity .3s ease, visibility .3s ease;
}

    .mobile-message-modal.open {
        opacity: 1;
        visibility: visible;
    }

    .mobile-message-modal .message-modal-dialog {
        margin-left: var(--l);
        margin-right: var(--r);
        position: relative;
        width: auto;
    }

    .mobile-message-modal .message-modal-dialog-centered {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: calc(100% - 0.5rem * 2);
    }

    .mobile-message-modal .message-modal-content {
        background: var(--background-light);
        width: var(--s);
        height: 325px;
        position: relative;
        display: flex;
        flex-direction: column;
        border-radius: 16px;
    }

    .mobile-message-modal .message-modal-body {
        padding: 36px 29px 26px;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        height: 100%;
        text-align: center;
    }

        .mobile-message-modal .message-modal-body #partial-header {
            display: none;
            margin-bottom: 1rem;
            font-size: 16px;
            font-weight: 700;
        }

        .mobile-message-modal .message-modal-body #partial-msg {
            margin-bottom: 0;
        }

        .mobile-message-modal .message-modal-body #partial-secondary-msg {
            display: none;
            margin-top: 1rem;
        }

        .mobile-message-modal .message-modal-body .btn-ok {
            width: 100%;
            height: 45px;
            background: var(--background-secondary);
            border: 0;
            outline: 0;
            border-radius: 12px;
            color: var(--text-light);
            margin-top: 37px;
            font-weight: 700;
        }

/*--------------------------------------------------------------
# App
--------------------------------------------------------------*/
.mobile-app-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(68, 68, 68, .5);
    overflow: hidden;
    z-index: 1055;
    opacity: 0;
    transition: opacity .4s ease-out;
}

    .mobile-app-modal.open {
        opacity: 1;
    }

    .mobile-app-modal .app-modal-dialog {
        margin-left: 1.5rem;
        margin-right: 1.5rem;
    }

    .mobile-app-modal .app-modal-dialog-centered {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: calc(100% - 1.75rem * 2);
    }

    .mobile-app-modal .app-modal-content {
        max-width: 335px;
        border-radius: 16px;
        background: #F6F6F6;
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25), 0px -1px 1px 0px rgba(0, 0, 0, 0.25);
    }

    .mobile-app-modal .app-modal-header {
        position: relative;
    }

        .mobile-app-modal .app-modal-header img {
            width: 100%;
            border-radius: 16px 16px 0px 0px;
        }

        .mobile-app-modal .app-modal-header i {
            position: absolute;
            top: 15px;
            right: 20px;
            color: var(--text-light);
        }

    .mobile-app-modal .app-modal-body {
        padding-top: 16px;
        padding-left: 26px;
        padding-bottom: 48px;
        padding-right: 17px;
    }

        .mobile-app-modal .app-modal-body p {
            font-size: 14px;
            text-align: center;
            margin-bottom: 14px;
        }

        .mobile-app-modal .app-modal-body .btn-download {
            background: var(--background-secondary);
            max-width: 280px;
            height: 45px;
            border-radius: 12px;
            font-weight: 700;
            letter-spacing: .15px;
            color: var(--text-light);
            display: block;
            padding-top: 11px;
            padding-left: 30px;
            padding-bottom: 10px;
            padding-right: 27px;
            text-align: center;
        }

.mobile-app-hero {
    background-image: url('/assets/img_V2/mobile-background.png');
    background-repeat: no-repeat;
    background-size: cover;
    padding: 120px 35px 80px 36px;
    text-align: center;
    color: var(--text-light);
    line-height: normal;
}

    .mobile-app-hero .logo {
        margin-bottom: 40px;
    }

    .mobile-app-hero h4 {
        font-size: 26px;
        text-shadow: 0px 1px 5px rgba(6, 90, 90, 0.75);
        font-weight: 700;
        line-height: normal;
        width: 205px;
        text-align: justify;
        margin-bottom: 20px;
    }

    .mobile-app-hero span {
        font-size: 14px;
        line-height: 20px;
        margin-bottom: 30px;
        display: block;
        font-weight: 400;
        width: 208px;
        text-align: left;
    }

.phone-image-mobile {
    margin-left: 200px;
    margin-top: -360px;
    margin-bottom: 85px;
}


/*--------------------------------------------------------------
# Language
--------------------------------------------------------------*/
.mobile-language-modal {
    display: none;
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(68, 68, 68, .5);
    overflow: hidden;
    z-index: 1055;
    opacity: 0;
    transition: opacity .4s ease-out;
    animation: slideUp .4s ease-out forwards;
}

    .mobile-language-modal.open {
        opacity: 1;
    }

    .mobile-language-modal.hide {
        opacity: 0;
        transition: opacity .4s ease-out;
        animation: slideDown .4s ease-out forwards;
    }

    .mobile-language-modal .language-modal-dialog {
        width: 100%;
        height: 100%;
        position: relative;
    }

    .mobile-language-modal .language-modal-content {
        position: relative;
        height: 100%;
        background: #F9F9F9;
        box-shadow: 0px -1px 4px 0px rgba(0, 0, 0, 0.25);
        z-index: 1180;
        overflow-y: scroll;
    }

    .mobile-language-modal .language-modal-header {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 32px 29px;
    }

        .mobile-language-modal .language-modal-header h5 {
            flex: 1;
            margin-bottom: 0;
            text-align: center;
            font-weight: 700;
            font-size: 16px;
        }

        .mobile-language-modal .language-modal-header i {
            position: absolute;
            right: 18px;
        }

    .mobile-language-modal .language-modal-body {
        padding: 26px 29px;
    }

        .mobile-language-modal .language-modal-body ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }

            .mobile-language-modal .language-modal-body ul li {
                padding: 8px 14px;
                margin-bottom: 14px;
            }

                .mobile-language-modal .language-modal-body ul li span {
                    margin-left: 2rem;
                }

/*--------------------------------------------------------------
# Home
--------------------------------------------------------------*/
#mobile-hero {
    padding-bottom: 0;
}

    #mobile-hero:before {
        content: '';
        position: absolute;
        top: -50px;
        left: 0;
        background-image: url(/assets/img_V2/home_bg.png);
        width: 100%;
        height: 318px;
        background-size: 125% 100%;
        background-repeat: no-repeat;
    }

    #mobile-hero .mobile-main-container {
        position: relative;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        z-index: 3;
    }

    #mobile-hero .title {
        font-size: 24px;
        font-weight: 700;
        color: var(--text-light);
        text-shadow: 0px 2px 5px rgba(6, 90, 90, 0.75);
        margin: 18px 0;
    }

    #mobile-hero .type-wrapper {
        border-radius: 12px;
        background: var(--background-light);
        box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
        padding: 25px 16px;
        text-align: center;
        font-size: 12px;
        letter-spacing: .15px;
        line-height: normal;
    }

        #mobile-hero .type-wrapper .type-icon {
            width: 50px;
            height: 50px;
            margin-bottom: 7px;
        }

.mobile-recent h6 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 30px;
}

.mobile-recent .swiper {
    width: 100%;
    height: 100%;
}

.mobile-recent .recent-card {
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    background: var(--background-light);
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
    padding: 9px;
    margin-bottom: 1rem;
}

    .mobile-recent .recent-card .terminal-icon {
        border-radius: 6px;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        width: 67px;
    }

    .mobile-recent .recent-card .item,
    .mobile-popular-route .popular-route-item .item {
        display: flex;
        align-items: center;
        position: relative;
    }

    .mobile-recent .recent-card .icon,
    .mobile-popular-route .popular-route-item .icon {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 13px;
        margin-left: 3px;
        border: 2px solid var(--background-primary);
    }

        .mobile-recent .recent-card .icon::after,
        .mobile-popular-route .popular-route-item icon:after {
            content: '';
            width: 7px;
            background: var(--background-light);
            border-radius: 50%;
        }

    .mobile-recent .recent-card .route-name,
    .mobile-popular-route .popular-route-item .route-name {
        font-size: 16px;
        line-height: normal;
        color: #4E4E4E;
        width: 126px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: block;
        text-align: start;
        flex: 1;
    }

    .mobile-recent .recent-card .tcode {
        color: #888;
        font-size: 12px;
    }

    .mobile-recent .recent-card .dotted-line,
    .mobile-popular-route .popular-route-item .dotted-line {
        height: 9px;
        border-left: 3px dotted var(--background-primary);
        position: absolute;
        top: 0;
        left: 5px;
    }

    .mobile-recent .recent-card .route-p,
    .mobile-popular-route .popular-route-item .route-p {
        padding-top: 5px;
    }

    .mobile-recent .recent-card .location-icon,
    .mobile-popular-route .popular-route-item .location-icon {
        margin-right: 10px;
        margin-left: 2px;
        padding-top: 4px;
    }

.mobile-popular-route {
    padding: 0 1.5rem;
}

    .mobile-popular-route h6 {
        font-size: 16px;
        font-weight: 700;
        margin-bottom: 1rem;
    }

    .mobile-popular-route .popular-route-items {
        border-radius: 8px;
        background: var(--background-light);
        box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
        width: 100%;
        height: 100%;
        margin-bottom: 7px;
    }

    .mobile-popular-route .popular-route-item {
        width: 100%;
        height: 64px;
        padding: 10px 15px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

        .mobile-popular-route .popular-route-item .icon {
            width: 10px;
            height: 10px;
            margin-left: 4px;
        }

        .mobile-popular-route .popular-route-item icon:after {
            width: 10px;
        }

        .mobile-popular-route .popular-route-item .route-name {
            font-size: 16px;
            width: 180px;
        }

        .mobile-popular-route .popular-route-item .tcode {
            color: #888;
            font-size: 12px;
        }

        .mobile-popular-route .popular-route-item .dotted-line {
            height: 13px;
            left: 7px;
        }

        .mobile-popular-route .popular-route-item .location-icon {
            padding-top: 10px;
        }

        .mobile-popular-route .popular-route-item .route-p {
            padding-top: 10px;
        }

        .mobile-popular-route .popular-route-item .price-tag {
            color: var(--text-secondary);
            font-size: 16px;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 3px;
        }

        .mobile-popular-route .popular-route-item .price-plus {
            font-size: 10px;
        }

    .mobile-popular-route .popular-route-title img,
    .mobile-explore .explore-title img,
    .mobile-pick .pick-title img,
    .mobile-place .place-title img,
    .mobile-activities .activities-title img {
        width: 28px;
        height: 28px;
        margin-right: 1rem;
    }

.mobile-pick .pick-content {
    display: none;
    position: relative;
}

    .mobile-pick .pick-content.active {
        display: block;
    }

.mobile-explore .explore-tabs,
.mobile-activities .activities-tabs {
    margin: 0;
    display: flex;
    justify-content: start;
    align-items: start; /* Aligns items vertically */
    padding-top: 10px;
    padding-bottom: 10px;
    gap: 5px; /* Adds spacing between tabs */
    position: relative;
    overflow-x: scroll;
}

.pick-tabs {
    display: flex;
    gap: 20px;
    padding: 10px 0;
    position: relative;
    overflow-x: scroll;
}

.mobile-explore .explore-tabs .explore-tablinks, .mobile-activities .activities-tabs .activities-tablinks, .mobile-pick .pick-tabs .pick-tablinks {
    border: none;
    outline: none;
    color: #AAA;
    font-size: 16px;
    font-weight: 500;
    background-color: transparent;
    cursor: pointer;
    position: relative;
    display: flex;
    padding: 8px 12px; /* Adjust padding for better spacing */
    transition: color .3s ease;
    text-transform: capitalize;
    white-space: nowrap;
}

    .mobile-explore .explore-tabs .explore-tablinks.active,
    .mobile-activities .activities-tabs .activities-tablinks.active,
    .mobile-pick .pick-tabs .pick-tablinks.active {
        color: var(--text-secondary);
    }

    .mobile-explore .explore-tabs .explore-tablinks:before,
    .mobile-activities .activities-tabs .activities-tablinks:before,
    .mobile-pick .pick-tabs .pick-tablinks:before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 0%;
        height: 2px;
        background: var(--background-primary);
        transition: .3s ease-in-out;
    }

    .mobile-explore .explore-tabs .explore-tablinks.active:before,
    .mobile-activities .activities-tabs .activities-tablinks.active:before,
    .mobile-pick .pick-tabs .pick-tablinks.active:before {
        width: 100%;
        left: 0;
    }

.mobile-explore .explore-tabs::-webkit-scrollbar,
.mobile-activities .activities-tabs::-webkit-scrollbar,
.mobile-pick .pick-tabs::-webkit-scrollbar {
    display: none;
}

.mobile-explore .explore-tabs,
.mobile-activities .mobile-activities {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.mobile-explore .explorecontent,
.mobile-activities .activitiescontent {
    display: none;
    position: relative;
}

    .mobile-explore .explorecontent.active,
    .mobile-activities .activitiescontent.active {
        display: block;
    }

.mobile-explore .swiper-slide,
.mobile-activities .swiper-slide {
    height: 185px !important;
}

.mobile-explore .popular-branch-card,
.mobile-activities .popular-activities-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    border-radius: 12px;
    overflow: hidden;
    transition: box-shadow .3s ease 0s;
    height: 100%;
}

.mobile-explore .popular-branch-img,
.mobile-activities .popular-activities-img {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    width: 100%;
    height: 185px;
    border-radius: calc(12px - 1px);
    -o-object-fit: cover;
    object-fit: cover;
    transition: transform .3s ease 0s;
}

.mobile-explore .popular-branch-card:after,
.mobile-activities .popular-activities-card:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 53.79%, rgba(5, 21, 18, 0.80) 78.83%);
}

.mobile-explore .popular-branch-bottom-card,
.mobile-activities .popular-activities-bottom-card {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    padding: 12px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    justify-content: space-between;
}

    .mobile-explore .popular-branch-bottom-card h5,
    .mobile-activities .popular-activities-bottom-card h5 {
        font-size: 16px;
        color: var(--text-light);
        font-weight: 700;
        margin-bottom: 0;
        line-height: normal;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-explore .popular-branch-bottom-card span,
    .mobile-activities .popular-activities-bottom-card span {
        font-size: 14px;
        color: var(--text-light);
        line-height: normal;
    }

    .mobile-explore .popular-branch-bottom-card .address,
    .mobile-activities .popular-activities-bottom-card .address {
        font-style: italic;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 100%;
        display: block;
    }

    .mobile-explore .popular-branch-bottom-card .minprice,
    .mobile-activities .popular-activities-bottom-card .minprice {
        color: var(--text-secondary);
        font-size: 16px;
        font-weight: 500;
    }

.mobile-pick .swiper-slide {
    height: 178px !important;
}

.mobile-pick .pick-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    border-radius: 12px;
    overflow: hidden;
    transition: box-shadow .3s ease 0s;
    height: 100%;
    justify-content: space-between;
}

.mobile-pick .pick-bottom-card {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 90px;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    padding: 12px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    justify-content: space-between;
}

.mobile-pick .pick-card:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 53.79%, rgba(5, 21, 18, 0.80) 78.83%);
}

.mobile-pick .pick-img {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    width: 100%;
    height: 178px;
    border-radius: calc(12px - 1px);
    -o-object-fit: cover;
    object-fit: cover;
    transition: transform .3s ease 0s;
}

.mobile-pick .pick-bottom-card .pick-top h5 {
    font-size: 16px;
    color: var(--text-light);
    font-weight: 700;
    margin-bottom: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.mobile-pick .pick-bottom-card .pick-top span {
    font-size: 14px;
    color: var(--text-light);
    font-style: italic;
    line-height: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-box-align: start;
    -webkit-line-clamp: 2;
}

.mobile-pick .pick-bottom-card .pick-bottom {
    display: flex;
    align-items: center;
    gap: 6px;
    position: relative;
    z-index: 1;
}

    .mobile-pick .pick-bottom-card .pick-bottom i {
        font-size: 9px;
        color: #FFBE2C;
    }

    .mobile-pick .pick-bottom-card .pick-bottom span {
        color: var(--text-light);
        font-size: 14px;
        font-weight: 500;
    }

.mobile-place .place-content {
    margin-top: 26px;
}

.mobile-place .swiper-slide {
    height: 183px !important;
    /*    width: 149px !important;*/
}

.mobile-place .place-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    border-radius: 12px;
    overflow: hidden;
    transition: box-shadow .3s ease 0s;
    height: 100%;
}

.mobile-place .place-bottom-card {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    padding: 12px;
    display: flex;
    z-index: 1;
    flex-direction: column !important;
}

.mobile-place .place-card:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 53.79%, rgba(5, 21, 18, 0.80) 78.83%);
}

.mobile-place .place-img {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    width: 100%;
    height: 183px;
    border-radius: calc(12px - 1px);
    -o-object-fit: cover;
    object-fit: cover;
    transition: transform .3s ease 0s;
}

.mobile-place .place-bottom-card h5 {
    font-size: 16px;
    color: var(--text-light);
    font-weight: 700;
    line-height: normal;
    margin-bottom: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.mobile-place .place-bottom-card p {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-muted);
    margin: 4px 0 0;
}

.mobile-place .place-bottom-card span {
    font-size: 14px;
    color: var(--text-muted);
    line-height: normal;
}


.popular-route-item-container {
    margin-top: 26px;
}

.mobile-recent-route-container,
.mobile-popular-route-container,
.mobile-explore-rr-container,
.mobile-pick-container,
.mobile-place-container,
.mobile-activity-container {
    position: relative;
    margin-bottom: 2.3rem;
}

.mobile-popular-route .popular-route-title,
.mobile-explore .explore-title,
.mobile-pick .pick-title,
.mobile-place .place-title,
.mobile-activities .activities-title {
    font-size: 16px;
    font-weight: 700;
    line-height: normal;
    display: flex;
    align-items: center;
}

.mobile-explore .swiper-pagination-bullet.swiper-pagination-bullet-active,
.mobile-pick .swiper-pagination-bullet.swiper-pagination-bullet-active,
.mobile-place .swiper-pagination-bullet.swiper-pagination-bullet-active,
.mobile-activities .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background: var(--background-primary);
}

.mobile-explore .swiper-pagination-bullet,
.mobile-pick .swiper-pagination-bullet,
.mobile-place .swiper-pagination-bullet,
.mobile-activities .swiper-pagination-bullet {
    width: 11px;
    height: 11px;
}

.mobile-explore .swiper-horizontal > .mobile-explore .swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .mobile-explore .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.mobile-pick .swiper-horizontal > .mobile-pick .swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .mobile-pick .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.mobile-place .swiper-horizontal > .mobile-place .swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .mobile-place .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.mobile-activities .swiper-horizontal > .mobile-activities .swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .mobile-activities .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
    bottom: -20px;
}

/*--------------------------------------------------------------
# Bottom Navigation Menu
--------------------------------------------------------------*/
.footer-navbar {
    position: fixed;
    bottom: 0;
    width: 100%;
    background: var(--background-light);
    filter: drop-shadow(0px -1px 4px rgba(0, 0, 0, 0.10));
    z-index: 10;
}

    .footer-navbar .tabs {
        display: flex;
        justify-content: space-around;
        padding: 16px 0;
        margin: 0;
    }

        .footer-navbar .tabs .even {
            flex: 1;
        }

        .footer-navbar .tabs li {
            list-style: none;
            text-align: center;
            display: block;
        }

            .footer-navbar .tabs li a {
                text-decoration: none;
                padding: 0 20px;
                display: block;
            }

                .footer-navbar .tabs li a .icon {
                    width: 100%;
                    height: 26px;
                    margin-bottom: 5px;
                }

                    .footer-navbar .tabs li a .icon ion-icon,
                    .footer-navbar .tabs li a .icon i {
                        width: 100%;
                        height: 100%;
                        color: #CCC;
                        font-size: 26px;
                    }

                .footer-navbar .tabs li a .text {
                    font-size: 9px;
                    color: #CCC;
                    letter-spacing: .15px;
                }

                .footer-navbar .tabs li a.active ion-icon,
                .footer-navbar .tabs li a.active i,
                .footer-navbar .tabs li a.active .text {
                    color: #1FD8D8;
                }

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
#mobile-footer {
    background: var(--background-primary);
    border-top: 1px solid var(--border-light);
    box-shadow: 0px -1px 2px 0px rgba(0, 0, 0, 0.25);
}

    #mobile-footer .footer-top {
        padding: 51px 0 46px;
        background: var(--background-light);
        padding-left: 1rem;
        padding-right: 1rem;
    }

    #mobile-footer .btn-help {
        display: inline-flex;
        align-items: center;
        justify-content: space-between;
        width: 231px;
        height: 45px;
        padding: 10px 20px;
        background: var(--background-primary);
        color: var(--text-light);
        border-radius: 12px;
        text-decoration: none;
    }

        #mobile-footer .btn-help span {
            flex: 1;
        }

    #mobile-footer hr {
        border-bottom: 1px solid #DDD;
        margin: 30px 0;
    }

    #mobile-footer .footer-content,
    #mobile-footer .footer-payment,
    #mobile-footer .footer-links,
    #mobile-footer .footer-address {
        padding: 0 3rem;
    }

        #mobile-footer .footer-content .footer-logo img {
            max-height: 36px;
            margin-bottom: 23px;
        }

        #mobile-footer .footer-content p {
            font-size: 16px;
            line-height: 18px;
            text-align: start;
        }

        #mobile-footer .footer-payment h5,
        #mobile-footer .footer-links h5 {
            font-size: 16px;
            font-weight: 500;
            line-height: normal;
            margin-bottom: 1.5rem;
        }

    #mobile-footer .paymentmethod {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        margin-bottom: 2rem;
    }

        #mobile-footer .paymentmethod img {
            margin-right: 1rem;
        }

    #mobile-footer .footer-links ul {
        list-style: none;
        margin: 0;
        padding: 0;
        text-align: start;
    }

        #mobile-footer .footer-links ul li {
            margin-bottom: 10px;
        }

            #mobile-footer .footer-links ul li:last-child {
                margin-bottom: 0;
            }

        #mobile-footer .footer-links ul a {
            font-size: 16px;
            line-height: normal;
        }

    #mobile-footer .footer-address h5 {
        font-size: 16px;
        font-weight: 500;
    }

    #mobile-footer .footer-address p {
        font-size: 16px;
        color: #777;
        line-height: normal;
    }

    #mobile-footer .footer-address .address {
        font-size: 16px;
        color: var(--text-primary);
        line-height: 18px;
    }

    #mobile-footer .footer-address .tel {
        font-size: 16px;
        color: var(--text-primary);
        line-height: 18px;
    }

    #mobile-footer .footer-address .operation {
        font-size: 16px;
        color: var(--text-primary);
        line-height: 18px;
    }

    #mobile-footer .footer-bottom {
        padding-left: 1rem;
        padding-right: 1rem;
        padding-top: 23px;
        padding-bottom: 23px;
    }

        #mobile-footer .footer-bottom .copyright {
            line-height: normal;
            text-align: center;
        }

            #mobile-footer .footer-bottom .copyright span {
                color: var(--text-light) !important;
                font-size: 14px;
            }

    #mobile-footer .credits {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 23px;
        margin-top: 1rem;
    }

/*--------------------------------------------------------------
# Contact Us
--------------------------------------------------------------*/
.contactus {
    background: var(--background-primary);
    height: auto;
    padding: 90px 0 20px;
}

    .contactus .contactus-container {
        padding-left: 2rem;
        padding-right: 3rem;
    }

        .contactus .contactus-container .title {
            font-weight: 700;
            color: var(--text-light);
            margin-bottom: 1rem;
        }

        .contactus .contactus-container .desc {
            font-size: 14px;
            color: var(--text-light);
            line-height: 18.2px;
        }

.call-container {
    border-radius: 12px;
    background: var(--background-light);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    padding: 1.5rem 1rem;
}

    .call-container .icon {
        color: var(--text-secondary);
        margin-right: 1.5rem;
    }

.or {
    color: var(--border-strong);
    text-align: center;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.call-container .chat-desc {
    color: var(--border-strong);
    font-size: 14px;
    margin-bottom: 1rem;
}

.call-container .btn-chat {
    width: 223px;
    height: 45px;
    border-radius: 12px;
    background: var(--background-secondary);
    color: #FCFCFC;
    font-size: 18px;
    font-weight: 700;
    transition: all .3s;
    text-align: center;
    padding: .6rem .75rem;
    cursor: pointer;
    margin-top: .5rem;
}

/*--------------------------------------------------------------
# Mobile Login
--------------------------------------------------------------*/
#mobile-login {
    padding: 30px 0;
}

    #mobile-login .title {
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 1.5rem;
    }

    #mobile-login .btn-fb {
        background: #1877F2;
        border-radius: 6px;
        height: 50px;
        color: var(--text-light);
        font-size: 18px;
        font-weight: 700;
        width: 100%;
        display: flex;
        align-items: center;
        margin-bottom: 1rem;
        border: none;
        padding: 0;
    }

    #mobile-login .btn-google {
        border-radius: 0;
        height: 50px;
        color: var(--text-light);
        font-size: 18px;
        font-weight: 700;
        width: 100%;
        margin-bottom: 1rem;
        display: flex;
        align-items: center;
        background: #4285F4;
        border: none;
        padding: 0;
    }

.account {
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.15px;
    text-decoration-line: underline;
    color: var(--background-primary);
    cursor: pointer;
}

    .account:hover {
        text-decoration-line: underline;
        color: var(--background-primary-hover);
    }

#mobile-login .login-input-box {
    border-radius: 12px;
    border: 1px solid #AAA;
    background: var(--background-light);
    height: 58px;
    display: flex;
    align-items: center;
    position: relative;
}

    #mobile-login .login-input-box .login-input {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 6px 33px;
    }


        #mobile-login .login-input-box .login-input input {
            outline: 0;
            border: 0;
            background: var(--background-light);
            padding: 0;
        }

    #mobile-login .login-input-box .label-title {
        display: none;
        font-size: 12px;
        color: var(--text-muted);
        font-weight: 600;
        line-height: normal;
        margin-bottom: 6px;
    }

/*--------------------------------------------------------------
# Mobile Register
--------------------------------------------------------------*/
.mobile-register {
    padding: 0;
}

    .mobile-register .bg {
        background-color: #F9F9F9;
        border-bottom: 1px solid #CCC;
        padding: 10px 20px;
    }

    .mobile-register .head-title {
        font-weight: 600;
        font-size: 12px;
        color: var(--text-muted);
    }

    .mobile-register .register-input-box {
        border-radius: 12px;
        border: 1px solid var(--border-strong);
        background: var(--background-light);
        height: 58px;
        display: flex;
        align-items: center;
        position: relative;
    }

        .mobile-register .register-input-box .register-input {
            display: flex;
            flex-direction: column;
            width: 100%;
            padding: 6px 22px;
        }

            .mobile-register .register-input-box .register-input .label-title {
                display: none;
                font-size: 12px;
                color: var(--text-light);
                font-weight: 600;
                line-height: normal;
                margin-bottom: 6px;
            }

            .mobile-register .register-input-box .register-input input {
                outline: 0;
                border: 0;
                background: var(--background-light);
                padding: 0;
            }

            .mobile-register .register-input-box .register-input #dialCode {
                padding: 0px 17px;
            }

            .mobile-register .register-input-box .register-input .dialicon {
                right: 12px;
            }

            .mobile-register .register-input-box .register-input .icon {
                position: absolute;
                top: 25px;
                right: 25px;
                color: var(--text-primary);
            }

    .mobile-register .register-gender,
    .mobile-register .register-gender select,
    .mobile-register .register-code,
    .mobile-register .register-nation,
    .mobile-register .register-passport {
        cursor: pointer;
    }

    .mobile-register .guest-phone {
        border-radius: 12px !important;
    }

    .mobile-register .register-code {
        border-radius: 12px !important;
    }

        .mobile-register .register-gender #GenderCodeDropDown.expanded,
        .mobile-register .register-nation #NationCodeDropDown.expanded,
        .mobile-register .register-passport #PNationCodeDropDown.expanded,
        .mobile-register .register-code #DialCodeDropDown.expanded {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            display: block;
        }

        .mobile-register .register-gender #GenderCodeDropDown,
        .mobile-register .register-nation #NationCodeDropDown,
        .mobile-register .register-passport #PNationCodeDropDown,
        .mobile-register .register-code #DialCodeDropDown {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            display: none;
        }

        .mobile-register .register-passport .select-dp .scrollable-content,
        .mobile-register .register-nation .select-dp .scrollable-content,
        .mobile-register .register-code .select-dp .scrollable-content {
            overflow-y: auto;
            max-height: calc(350px - 32px);
        }

        .mobile-register .register-gender .select-dp,
        .mobile-register .register-passport .select-dp,
        .mobile-register .register-nation .select-dp,
        .mobile-register .register-code .select-dp {
            width: 350px;
            background: var(--background-light);
            max-height: 350px;
            padding: 0;
            margin: 0;
            list-style: none;
            position: absolute;
            top: 65px;
            left: 0;
            border-radius: 12px;
            box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
            overflow: hidden;
            z-index: 10;
        }

            .mobile-register .register-gender .select-dp li,
            .mobile-register .register-passport .select-dp li,
            .mobile-register .register-nation .select-dp li,
            .mobile-register .register-code .select-dp li {
                padding: 10px;
                cursor: pointer;
            }

            .mobile-register .register-gender .select-dp .dc.selected,
            .mobile-register .register-passport .select-dp .dc.selected,
            .mobile-register .register-code .select-dp .dc.selected,
            .mobile-register .register-nation .select-dp .dc.selected {
                background: var(--background-primary);
                color: var(--text-light);
            }

                .mobile-register .register-gender .select-dp .dc.selected .gender,
                .mobile-register .register-passport .select-dp .dc.selected .passport,
                .mobile-register .register-code .select-dp .dc.selected .nationality,
                .mobile-register .register-nation .select-dp .dc.selected .dialcode {
                    color: var(--text-light);
                }

            .mobile-register .register-gender .select-dp li:hover,
            .mobile-register .register-passport .select-dp li:hover,
            .mobile-register .register-nation .select-dp li:hover,
            .mobile-register .register-code .select-dp li:hover {
                background: var(--background-primary);
                color: var(--text-light);
            }

                .mobile-register .register-gender .select-dp li:hover .gender,
                .mobile-register .register-passport .select-dp li:hover .passport,
                .mobile-register .register-nation .select-dp li:hover .nationality,
                .mobile-register .register-code .select-dp li:hover .dialcode {
                    color: var(--text-light);
                }

            .mobile-register .register-gender .select-dp li > .gender,
            .mobile-register .register-passport .select-dp li > .passport,
            .mobile-register .register-nation .select-dp li > .nationality,
            .mobile-register .register-code .select-dp li > .dialcode {
                color: var(--text-muted);
                font-size: 14px;
                line-height: normal;
            }

/*--------------------------------------------------------------
# Mobile Forgot Password
--------------------------------------------------------------*/
#mobile-forgotpassword .btn-password {
    background: var(--background-secondary);
    color: var(--text-light);
    width: 272px;
    border-radius: 12px;
    letter-spacing: .15px;
    font-weight: 700;
    font-size: 18px;
}

    #mobile-forgotpassword .btn-password:hover {
        background: var(--background-secondary-hover);
        color: var(--text-light);
    }

.mobile-title-header {
    border: 1px solid #CCC;
    background: var(--background-light);
    height: 63px;
    /*height: 80px;*/
    display: flex;
    align-content: center;
}

.mobile-header-title {
    font-size: 14px;
    font-weight: 400;
    text-align: center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.fpass-input-box {
    border-radius: 12px;
    /* border: 1px solid #AAA; */
    background: var(--background-light);
    height: 58px;
    display: flex;
    align-items: center;
    position: relative;
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
}

    .fpass-input-box .fpass-input {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 6px 33px;
    }

        .fpass-input-box .fpass-input input {
            outline: 0;
            border: 0;
            background: #FFF;
            padding: 0;
        }

        .fpass-input-box .fpass-input .label-title {
            display: none;
            font-size: 12px;
            color: var(--text-muted);
            font-weight: 600;
            line-height: normal;
            margin-bottom: 6px;
        }

/*--------------------------------------------------------------
# FAQ Section
--------------------------------------------------------------*/
.faq-container-sub-mob {
    margin-bottom: 3.5rem;
    padding: 3rem 1.5rem 1.5rem;
}

    .faq-container-sub-mob .faq-content-mob .faq-title {
        color: var(--text-primary);
        font-weight: 700;
        font-size: 16px;
        line-height: normal;
    }

    .faq-container-sub-mob .faq-content-mob .faq-item-container {
        margin: 1rem 0;
    }

        .faq-container-sub-mob .faq-content-mob .faq-item-container .faq-wrapper {
            padding: 20px 30px 20px 20px;
            position: relative;
            border-radius: 16px;
            background: var(--background-light);
            box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
            margin-bottom: 2rem;
        }

        .faq-container-sub-mob .faq-content-mob .faq-item-container .faq-list-f {
            border-bottom: 1px solid var(--border-light);
            margin-bottom: 20px;
        }

        .faq-container-sub-mob .faq-content-mob .faq-item-container .faq-wrapper .faq-list-f:last-child {
            border-bottom: none;
            margin-bottom: 0;
        }

        .faq-container-sub-mob .faq-content-mob .faq-item-container .faq-wrapper .faq-list-f ul {
            padding: 0;
            list-style: none;
        }

        .faq-container-sub-mob .faq-content-mob .faq-item-container .faq-wrapper .faq-list-f:last-child ul {
            margin-bottom: 0;
        }

        .faq-container-sub-mob .faq-content-mob .faq-item-container .faq-wrapper .faq-list-f li + li {
            margin-top: 15px;
        }

        .faq-container-sub-mob .faq-content-mob .faq-item-container .faq-wrapper .faq-list-f a {
            display: block;
            position: relative;
            line-height: 24px;
            font-weight: 700;
            outline: none;
            cursor: pointer;
        }

        .faq-container-sub-mob .faq-content-mob .faq-item-container .faq-wrapper .faq-list-f .icon-show {
            font-size: 24px;
            position: absolute;
            right: -14px;
            top: 0;
            transition: transform 0.3s ease;
        }

        .faq-container-sub-mob .faq-content-mob .faq-item-container .faq-wrapper .faq-list-f .faq-toggle.active {
            color: var(--text-secondary);
        }

            .faq-container-sub-mob .faq-content-mob .faq-item-container .faq-wrapper .faq-list-f .faq-toggle.active .icon-show {
                transform: rotate(180deg);
            }

        .faq-container-sub-mob .faq-content-mob .faq-item-container .faq-wrapper .faq-list-f p {
            margin-bottom: 0;
            padding: 10px 0 0 0;
            border-radius: 5px;
            background: #F9F9F9;
            padding: 20px;
            margin-top: 20px;
        }

        .faq-container-sub-mob .faq-content-mob .faq-item-container .faq-wrapper .faq-list-f a.pad-0 {
            padding: 0;
        }

@media (max-width: 1200px) {
    .faq-container-sub-mob .faq-content-mob .faq-item-container .faq-wrapper .faq-list-f {
        padding: 0;
    }
}


/*--------------------------------------------------------------
# Announcement Modal
--------------------------------------------------------------*/

.announcement-modal {
    --l: 1rem;
    --r: 1rem;
    --s: 500px;
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5);
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    z-index: 1055;
    transition: opacity .3s ease, visibility .3s ease;
}

    .announcement-modal.open {
        opacity: 1;
        visibility: visible;
    }

    .announcement-modal .announcement-modal-dialog {
        margin-left: var(--l);
        margin-right: var(--r);
        position: relative;
        width: auto;
    }

    .announcement-modal .announcement-modal-dialog-centered {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: calc(100% - var(--l) * 2);
    }

    .announcement-modal .announcement-modal-content {
        background: #FFF;
        width: var(--s);
        height: auto;
        position: relative;
        display: flex;
        flex-direction: column;
        border-radius: 12px;
    }

    .announcement-modal .announcement-modal-body {
        padding: 36px 29px 26px;
        height: 100%;
        text-align: center;
    }

        .announcement-modal .announcement-modal-body h6 {
            margin-bottom: 30px;
            font-weight: 700;
        }

        .announcement-modal .announcement-modal-body .btn-ok {
            background: #FB8D20;
            border-radius: 12px;
            color: #FCFCFC;
            line-height: normal;
            font-size: 16px;
            font-weight: 700;
            height: 41px;
            border: 0;
            outline: 0;
            transition: all .3s;
            margin: 30px 0;
            text-align: center;
            width: 222px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }