body, html {
    margin: 0;
    padding: 0;
    font-weight: 400
}

footer, html {
    position: relative
}

.photos-grid-container .main-photo, .photos-grid-container .sub:nth-child(0) {
    grid-column: 1;
    grid-row: 1
}

#lets-run .image, .qty .count {
    vertical-align: top
}

.range-input input, .track-btn {
    -webkit-appearance: none;
    -moz-appearance: none
}

.autocomplete-container li, .text-ellipse {
    text-overflow: ellipsis !important;
    text-wrap: nowrap !important;
    overflow: hidden !important
}

#map .gm-style-iw.gm-style-iw-c .gm-style-iw-d, .text-ellipse {
    overflow: hidden !important
}

#cookie-pop-up, #feedback-pop-up {
    position: fixed;
    width: 70%;
    bottom: 0;
    transform: translateX(-50%)
}

*, .marquee-text {
    box-sizing: border-box
}

.dropdown-menu li a, .faq-list a, .learn-more-btn, a.btn {
    text-decoration: none
}

.blog-review-desc, .hotelName {
    -webkit-line-clamp: 2
}

html {
    min-height: 100%
}

body {
    font-family: Manrope,sans-serif;
    background-color: #fff
}

.btn-primary, .fw-medium, p {
    font-weight: 500
}

@media (min-width:576px) {
    .container {
        max-width: 576px
    }
}

@media (min-width:768px) {
    .container {
        max-width: 768px
    }
}

@media (min-width:1200px) and (max-width:1500px) {
    .container {
        padding: 0 3rem
    }
}

.btn-primary, .btn-primary-outline {
    padding: .675rem 2rem;
    white-space: nowrap
}

footer {
    height: 62px;
    bottom: 0
}

.border-t {
    border-top: 1px solid #dee2e6 !important
}

.border-l {
    border-left: 1px solid #dee2e6 !important
}

.border-r {
    border-right: 1px solid #dee2e6 !important
}

.border-b {
    border-bottom: 1px solid #dee2e6 !important
}

.best-place-text p, h1, h2, h3, h4 {
    font-family: "Concert One",sans-serif
}

.btn-check:focus + .btn, .btn:focus, .form-control:focus, .page-link:focus {
    box-shadow: none !important
}

.cursor-pointer {
    cursor: pointer
}

.text-primary {
    color: #002d72 !important
}

.text-secondary, a.text-decoration-none:hover, footer a:hover, header .nav-item a:hover {
    color: #00957f !important
}

.text-gray {
    color: #8f8f8f
}

.text-sm {
    font-size: .8em
}

.bg-primary {
    background-color: #002d72 !important
}

.bg-blog-secondary {
    background-color: #edfcff
}

.bg-ash {
    background-color: #f1f3f4
}

#account-page .card, #forgot-password-page .card, #login-page .card, #reset-password-page .card, #signup-page .card, .border-0, .input-group-text {
    border: none !important
}

.w-80 {
    width: 80% !important
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24
}

.min-h-50 {
    min-height: 50vh
}

.rounded-5 {
    border-radius: .85rem
}

#home-hero {
    background: linear-gradient(135deg,#8dcFFF42 50%,#8dcFFF42 25%,transparent 50%)
}

.btn-primary {
    background-color: #002d72;
    color: #fff;
    border-radius: .5rem;
    border: 2px solid #002d72;
    letter-spacing: .5px;
    font-size: .875rem
}

.btn-danger-outline, .btn-primary-outline {
    font-weight: 600;
    background-color: #f9feff;
    font-size: .875rem
}

.btn-primary:disabled {
    color: #002d72;
    background-color: #d4d4d4;
    opacity: 1;
    border-color: #d4d4d4
}

.btn-primary-outline {
    border: 2px solid #002d72;
    color: #002d72;
    border-radius: .5rem
}

    .btn-primary-outline .bi, .btn-primary-outline svg {
        fill: #002d72 !important
    }

    .btn-primary-outline:hover, .month-grid button.active {
        background-color: #002d72;
        color: #fff
    }

        .btn-primary-outline:hover .bi, .btn-primary-outline:hover svg {
            fill: white !important
        }

.btn-danger-outline {
    border: 2px solid #f24d4d;
    color: #f24d4d;
    white-space: nowrap;
    border-radius: .5rem
}

.btn-secondary, .btn-tab {
    border-radius: .5rem;
    padding: .675rem 2rem;
    white-space: nowrap;
    letter-spacing: .5px
}

.btn-danger-outline svg {
    fill: #F24D4D
}

.btn-danger-outline:hover {
    background-color: #f24d4d;
    color: #fff !important
}

    #about-us-page .nav-pills .nav-link.active .bi, #help-for-tr .nav-pills .nav-link.active .bi, #privacy-policy-page .nav-pills .nav-link.active .bi, #terms-condition-page .nav-pills .nav-link.active .bi, #user-settings-page .nav-justified .nav-link.active .bi, #user-settings-page .nav-pills .nav-link.active .bi, .btn-danger-outline:hover svg, .btn-secondary svg, .btn-secondary-outline:hover svg {
        fill: white
    }

.btn-tab {
    background-color: #f3f3f3;
    color: #8f8f8f;
    font-weight: 500;
    border: none;
    font-size: .875rem
}

.searchbar-wrapper .btn-secondary svg {
    fill: transparent;
}

    .badge.active, .btn-secondary, .btn-tab.active {
        color: #fff;
        background-color: #00957f
    }

.btn-secondary {
    font-weight: 500;
    border: 1px solid #00957f;
    font-size: 1rem
}

.btn-danger {
    border-radius: .5rem;
    font-weight: 500;
    padding: .675rem 2rem;
    white-space: nowrap;
    border: none;
    letter-spacing: .5px;
    font-size: .875rem
}

.btn-primary:hover {
    background-color: #00957f;
    border: 2px solid #00957f
}

.btn-secondary-outline {
    border: 1px solid #00957f;
    color: #00957f
}

    #contact-us-page .bi, .btn-secondary-outline svg {
        fill: #00957f
    }

    .btn-secondary-outline:hover {
        border: 1px solid #00957f;
        color: #fff !important;
        background-color: #00957f
    }

.btn-more {
    top: 25%;
    right: .5em;
    padding: 15px 0;
    background-color: #ededed;
    border-radius: 25px
}

    .btn-more svg {
        fill: #2d2d2d
    }

.shadow {
    box-shadow: 5px 4px 12px 0 rgba(0,0,0,.08) !important
}

.ls-1 {
    letter-spacing: .5px
}

#contact-us-page .form-control, #editBlogModal .form-control, #user-settings-page .form-control, #write-page .form-control, .bg-grey {
    background-color: #f3f3f3
}

.form-control, .form-select, .input-group-text {
    border: none;
    background-color: #fff;
    padding: 1em;
    border-radius: .5em
}

.input-group {
    border-radius: .5em
}

header {
    position: sticky;
    background-color: #fff;
    top: 0;
    z-index: 100
}

footer a {
    color: #fff !important;
    text-decoration: none !important;
    font-size: 1rem;
    margin-top: 10px;
    cursor: pointer;
    display: block
}

.star-rating__checkbox {
    position: absolute;
    overflow: hidden;
    clip: rect(0 0 0 0);
    height: 1px;
    width: 1px;
    margin: -1px;
    padding: 0;
    border: 0
}

.star-rating__star {
    display: inline-block;
    vertical-align: middle;
    line-height: 0;
    font-size: 1.5em;
    color: #d9d9d9;
    transition: color .2s ease-out
}

    #account-page .upload-btn-img:hover input, #blog-page .blog-review-card, #recent-reviews .bi.trash:hover, #user-settings-page .upload-btn-img:hover input, .bi.trash:hover, .ponter, .star-rating__star:hover {
        cursor: pointer
    }

    #thumbnail, .star-rating__star.is-disabled:hover {
        cursor: default
    }

    .star-rating__star.is-selected {
        color: gold
    }

#homeContents #home-hero h1, #user-settings-page #home-hero h1 {
    font-size: 4em
}

#homeContents #home-hero h1 {
    z-index: 1
}

.brush-image {
    position: absolute;
    bottom: -5px;
    left: 28%;
    z-index: -1
}

.bg-sub-rating {
    background-color: rgb(169 169 169 / 10%)
}

.mw-500 {
    max-width: 500px
}

.sub-rating-card p {
    color: #0cadf0
}

.sub-rating-card .star-rating__star {
    font-size: 1.3em
}

.img-wrapper .star-rating__star {
    font-size: 2em
}

.img-wrapper p {
    font-size: 1.2em
}

#hotelPage .hotel-images .VueCarousel-slide img {
    width: 100%;
    object-fit: cover;
    border-radius: 1em
}

#hotelPage .hotel-images .thumbnail-container .VueCarousel-slide {
    padding: 1em
}

    #hotelPage .hotel-images .thumbnail-container .VueCarousel-slide img {
        width: 100%;
        cursor: pointer;
        border-radius: .5em;
        object-fit: cover;
        opacity: .5;
        transition: .25s ease-in
    }

        #blog-page .blog-review-card:hover .ihover_hover, #hotelPage .hotel-images .thumbnail-container .VueCarousel-slide img.active, .review-modal-images .thumbnail-container .VueCarousel-slide img.active {
            opacity: 1
        }

@media (max-width:481px) {
    .horizontal-scroll-area padding, .p-font {
        font-size: 10px
    }

    .horizontal-scroll-area span.text-gray {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: initial;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        padding-bottom: 0 !important
    }

    .horizontal-scroll-area p.text-secondary {
        text-overflow: ellipsis;
        overflow: hidden;
        text-wrap: nowrap
    }

    .horizontal-scroll-area :not(.sub-rating-card) .star-rating__star {
        font-size: 12px
    }

    #homeContents #home-hero h1 {
        font-size: 2.5em
    }

    .btn-tab {
        border-radius: .75em;
        padding: 1.5em 3.5em;
        border: none;
        font-size: .75em
    }

    #hotelPage .container {
        flex-direction: column
    }

    #hotelPage .hotel-images .VueCarousel-slide img {
        height: 15em;
        width: 100%
    }

    #hotelPage .hotel-images .thumbnail-container .VueCarousel-slide {
        padding: .25em
    }

        #hotelPage .hotel-images .thumbnail-container .VueCarousel-slide img {
            height: 3em;
            border-radius: .5em
        }

    .hotel-recent-review-card {
        max-height: 50vh !important
    }

    .best-place-text {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%
    }

        .best-place-text .btn-primary {
            padding: .5em 2.5em;
            margin: 0 .75em
        }

        .best-place-text p {
            font-size: 1.5em;
            margin-top: .75em
        }

    footer a {
        font-size: .85em
    }

    footer .footer-logo {
        width: 25%
    }

    #account-page, #forgot-password-page, #login-page, #reset-password-page, #signup-page {
        background-size: cover !important
    }

    #slider-wrapper #image-slider {
        width: auto;
        height: 16em !important
    }

    #slider-wrapper #thumbnail li img {
        float: left;
        margin: 0 1px;
        border-radius: .25em;
        height: 2.5em
    }

    #hotelPage #single-hotel-btn-group {
        margin-bottom: 1em
    }

        #hotelPage #single-hotel-btn-group .btn-group, .engagement-tabs {
            display: flex
        }

            #hotelPage #single-hotel-btn-group .btn-group button, .engagement-tabs .nav-item {
                flex: 1 1 0px;
                width: 0
            }

    .review-desc-wrapper {
        height: 6em;
        min-height: 6em
    }

    .how-does-itwork-text::before {
        left: 50% !important;
        transform: translateX(-50%)
    }
}

@media (min-width:576px) {
    .navbar-expand-sm .navbar-toggler {
        display: none !important
    }

    .best-place-text p {
        font-size: 1.5em;
        margin-top: .75em
    }

    .best-place-text .btn-primary {
        padding: 1em 5em !important
    }

    footer p {
        font-size: .5em
    }

    #hotelPage .container {
        flex-direction: column
    }

    #hotelPage .hotel-images .VueCarousel-slide img {
        height: 17em;
        width: 100%
    }

    #hotelPage .hotel-images .thumbnail-container .VueCarousel-slide {
        padding: .25em
    }

        #hotelPage .hotel-images .thumbnail-container .VueCarousel-slide img {
            height: 5em;
            border-radius: .5em
        }

    .p-font {
        font-size: 10px
    }

    .modal-dialog {
        max-width: 600px;
        margin: 1.75rem auto
    }
}

@media (min-width:768px) {
    html {
        font-size: 16px
    }

    #hotelPage .container {
        flex-direction: column
    }

    #hotelPage .hotel-images .VueCarousel-slide img {
        height: 20em;
        width: 100%
    }

    #hotelPage .hotel-images .thumbnail-container .VueCarousel-slide {
        padding: .35em
    }

        #hotelPage .hotel-images .thumbnail-container .VueCarousel-slide img {
            height: 6em;
            border-radius: .5em
        }

    #hotelPage .p-font {
        font-size: 12px
    }

    footer p {
        font-size: .65em
    }

    #account-page, #forgot-password-page, #login-page, #reset-password-page, #signup-page {
        background-size: cover !important
    }

    .review-desc-wrapper {
        height: 6em;
        min-height: 6em
    }

    .p-font {
        font-size: 8px
    }
}

@media (min-width:992px) {
    .container {
        max-width: 992px
    }

    #homeContents #home-hero h1 {
        font-size: 3.5em
    }

    .best-place-text p {
        font-size: 3.5em;
        margin-top: 1.5em
    }

    #hotelPage .container {
        flex-direction: column
    }

    #hotelPage .hotel-images .VueCarousel-slide img {
        height: 25em;
        width: 100%
    }

    #hotelPage .hotel-images .thumbnail-container .VueCarousel-slide {
        padding: .5em
    }

        #hotelPage .hotel-images .thumbnail-container .VueCarousel-slide img {
            height: 7em;
            border-radius: .5em
        }

    footer p {
        font-size: .75em
    }

    .p-font {
        font-size: 12px
    }
}

@media (min-width:1200px) {
    .container {
        max-width: 1200px
    }

    #hotelPage .container {
        flex-direction: column
    }

    #hotelPage .hotel-images .VueCarousel-slide img {
        height: 35em;
        width: 100%
    }

    #hotelPage .hotel-images .thumbnail-container .VueCarousel-slide {
        padding: 1em
    }

        #hotelPage .hotel-images .thumbnail-container .VueCarousel-slide img {
            height: 7em;
            border-radius: .5em
        }

    .best-place-text p {
        font-size: 4.5em;
        margin-top: 1.8em
    }

    footer p {
        font-size: 1em
    }

    .p-font {
        font-size: 14px
    }
}

@media (min-width:1400px) {
    .container {
        max-width: 1400px
    }

    .best-place-text p {
        font-size: 5em;
        margin-top: 2em
    }

    footer p {
        font-size: 1.2em
    }

    .p-font {
        font-size: 14px
    }
}

.horizontal-scroll-area {
    overflow-x: auto;
    flex-wrap: nowrap;
    -ms-overflow-style: none;
    scrollbar-width: none
}

    .horizontal-scroll-area::-webkit-scrollbar {
        display: none
    }

    .horizontal-scroll-area.row {
        --bs-gutter-x: 0 !important
    }

#all-hotel-page .img-wrapper::before, .carousel-wrap .img-wrapper::before, .result-container .img-wrapper::before {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg,rgb(0 0 0 / 71%) 17%,rgba(180,20,20,0) 82%);
    z-index: 2;
    transition: .5s
}

#all-hotel-page .img-wrapper::after, .carousel-wrap .img-wrapper::after, .result-container .img-wrapper::after {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(197deg,#000 7%,rgba(90,0,0,0) 33%);
    z-index: 2;
    transition: .5s
}

#all-hotel-page .img-wrapper img, #listing .img-wrapper img, #user-settings-page .img-wrapper img {
    max-height: 12em;
    height: 12em;
    object-fit: cover
}

.img-wrapper .position-absolute {
    z-index: 4
}

.photos-grid-container {
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    grid-gap: 0;
    align-items: start;
    gap: 1em
}

@media (max-width:580px) {
    .photos-grid-container {
        grid-template-columns: 1fr;
        gap: 0
    }
}

.photos-grid-container .img-box {
    border: 1px solid #fff;
    border-radius: 1rem !important
}

    .photos-grid-container .img-box:hover .transparent-box {
        background-color: rgba(0,0,0,.6)
    }

    .photos-grid-container .img-box:hover .caption, .travel-card:hover {
        transform: translateY(-5px)
    }

.photos-grid-container img {
    max-width: 100%;
    display: block;
    height: auto;
    border-radius: 1em
}

.photos-grid-container .caption {
    color: #fff;
    transition: transform .3s,opacity .3s;
    font-size: 1.5rem
}

.photos-grid-container .transparent-box {
    height: 100%;
    width: 100%;
    transition: background-color .3s;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 1em
}

.photos-grid-container .sub {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-gap: 0em;
    gap: 1em
}

    .photos-grid-container .sub:first-child {
        grid-column: 2;
        grid-row: 1
    }

    .photos-grid-container .sub:nth-child(2) {
        grid-column: 1;
        grid-row: 2
    }

    .photos-grid-container .sub:nth-child(3) {
        grid-column: 2;
        grid-row: 2
    }

.hide-element {
    border: 0;
    clip: rect(1px 1px 1px 1px);
    clip: rect(1px,1px,1px,1px);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px
}

#lets-run .best-place-text {
    z-index: 5
}

#lets-run .image:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.5);
    opacity: 1
}

.hotel-recent-review-card {
    max-height: 35vh;
    overflow-x: hidden;
    overflow-y: auto;
    flex-wrap: nowrap;
    -ms-overflow-style: none;
    scrollbar-width: none
}

    .hotel-recent-review-card::-webkit-scrollbar {
        display: none
    }

.modal-dialog .modal-header {
    background-color: #002d72;
    color: #fff;
    border-radius: .75em;
    margin-top: -1em
}

.modal-dialog .modal-content {
    border: none
}

.modal-dialog .btn-close {
    color: #fff;
    opacity: 1
}

.modal-dialog .photos-grid-container {
    grid-template-columns: 1fr
}

#account-page .form-control, #forgot-password-page .form-control, #login-page .form-control, #reset-password-page .form-control, #signInModal .form-control, #signUpModal .form-control, #signup-page .form-control {
    background-color: #f3f3f3;
    box-shadow: rgba(0,0,0,.16) 0 1px 4px
}

.range-value {
    position: absolute;
    top: -2rem
}

    #image-slider ul li.active-img, .range-value.min {
        left: 0
    }

    .checkout-drawer.open, .range-value.max {
        right: 0
    }

.track-container {
    width: 100%;
    position: relative;
    cursor: pointer;
    height: .5rem
}

.track, .track-highlight {
    display: block;
    position: absolute;
    width: 100%;
    height: .5rem
}

.track {
    background-color: #ddd;
    border-radius: 1em
}

.track-btn, .track-highlight {
    z-index: 2;
    background-color: #00957f
}

.track-btn {
    appearance: none;
    outline: 0;
    cursor: pointer;
    display: block;
    position: absolute;
    width: 1.5rem;
    height: 1.5rem;
    top: calc(-50% - .25rem);
    margin-left: -1rem;
    border: none;
    border-radius: 1em;
    -ms-touch-action: pan-x;
    touch-action: pan-x;
    transition: transform .3s ease-out,box-shadow .3s ease-out,background-color .3s,-webkit-transform .3s ease-out
}

.blog-review-desc, .horizontal-scroll-area .text-gray, .review-desc-wrapper .text-gray {
    white-space: initial;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    padding-bottom: 0 !important;
    overflow: hidden;
    text-overflow: ellipsis
}

#home-search #map {
    height: 80vh
}

#home-search #listing {
    max-height: 80vh;
    overflow-x: hidden;
    overflow-y: auto
}

    #home-search #listing::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(221,255,250,.3019607843);
        border-radius: 10px;
        background-color: #f5f5f5
    }

    #home-search #listing::-webkit-scrollbar {
        width: 10px;
        background-color: #f5f5f5
    }

    #home-search #listing::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
        background-color: #002d72
    }

#home-search .map-container .image {
    height: 65vh
}

#home-search .filter-tab {
    width: 25%;
    color: #696969;
    position: relative;
    cursor: pointer
}

    #home-search .filter-tab .bi {
        fill: dimgray
    }

    #home-search .filter-tab:before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 0;
        height: 3px;
        background-color: #002d72
    }

    #home-search .filter-tab.active, #home-search .filter-tab:hover, .iziToast-capsule .iziToast-message a:hover {
        color: #002d72
    }

        #about-us-page .bi, #help-for-tr .bi, #home-search .filter-tab.active .bi, #home-search .filter-tab:hover .bi, #privacy-policy-page .bi, #terms-condition-page .bi, #user-settings-page .nav-justified .nav-link .bi, .search-btn:disabled svg {
            fill: #002d72
        }

        #home-search .filter-tab:hover:before {
            width: 80%;
            left: 10%;
            background-color: #696969;
            transition: .1s ease-in
        }

        #home-search .filter-tab.active:before {
            width: 100%;
            left: 0;
            transition: .1s ease-in;
            background-color: #002d72
        }

#account-page, #forgot-password-page, #login-page, #reset-password-page, #signup-page {
    height: 100%;
    min-height: 100vh;
    background-size: 100%;
    background-repeat: no-repeat;
    width: 100vw;
    background-position: center
}

    #account-page .shadow, #forgot-password-page .shadow, #login-page .shadow, #reset-password-page .shadow, #signup-page .shadow {
        box-shadow: 5px 4px 15px 2px rgba(2,30,42,.25) !important
    }

    #account-page .upload-btn-img, #forgot-password-page .upload-btn-img, #login-page .upload-btn-img, #reset-password-page .upload-btn-img, #signup-page .upload-btn-img {
        position: relative;
        overflow: hidden;
        display: inline-block
    }

        #account-page .upload-btn-img input[type=file], #user-settings-page .upload-btn-img input[type=file] {
            height: 100%;
            width: 100%;
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
            cursor: pointer
        }

    #account-page .img-thumbnail, #user-settings-page .img-thumbnail {
        opacity: 1;
        transition: opacity .25s ease-in-out;
        -moz-transition: opacity .25s ease-in-out;
        -webkit-transition: opacity .25s ease-in-out;
        cursor: pointer;
        width: 160px;
        height: 160px;
        object-fit: cover;
        border-radius: 50%
    }

    #account-page .upload-btn-img:hover .img-thumbnail, #user-settings-page .upload-btn-img:hover .img-thumbnail {
        opacity: .7;
        cursor: pointer
    }

.hotelcardBtn, .tabs-slider, .whitespace-nowrap {
    white-space: nowrap
}

.horizontal-scroll-area .text-gray, .review-desc-wrapper .text-gray {
    -webkit-line-clamp: 3
}

.review-desc-wrapper .text-gray {
    height: 56px
}

#viewReviewModal .main-photo::before {
    content: none
}

#user-settings-page .nav-pills .nav-link {
    color: #6c757d;
    letter-spacing: 1px;
    border-radius: 8px;
    padding: .75rem 1rem;
    text-align: left;
    display: flex;
    gap: 4px;
    align-items: center;
    font-weight: 500
}

    #user-settings-page .nav-pills .nav-link .bi {
        fill: #6c757d
    }

    #user-settings-page .nav-pills .nav-link.active {
        width: 100%;
        transition: 1.5s;
        background: linear-gradient(50deg,#002d72,#dcf2ff);
        color: #fff;
        border-radius: 8px;
        padding: .75rem 1rem;
        text-align: left
    }

#user-settings-page .nav-justified .nav-link {
    color: #002d72;
    justify-content: center
}

    #user-settings-page .nav-justified .nav-link.active {
        color: #fff;
        transition: .5s
    }

#user-settings-page .my-review-section .review-card img {
    height: 6em;
    object-fit: cover
}

#user-settings-page .btn-danger-outline {
    border: 1px solid #f24d4d
}

#about-us-page .nav-pills .nav-link, #help-for-tr .nav-pills .nav-link, #privacy-policy-page .nav-pills .nav-link, #terms-condition-page .nav-pills .nav-link {
    color: #002d72;
    letter-spacing: 1px
}

    #about-us-page .nav-pills .nav-link.active, #help-for-tr .nav-pills .nav-link.active, #privacy-policy-page .nav-pills .nav-link.active, #terms-condition-page .nav-pills .nav-link.active {
        background-color: #002d72;
        width: 100%;
        transition: 1s;
        color: #fff
    }

#recent-reviews .bi.trash, .bi.trash {
    fill: #f44141
}

.img-wrapper .bi {
    fill: #000000
}

label.is-invalid {
    font-size: .8em;
    color: #dc3545;
    margin-left: .55em;
    margin-top: .25em
}

.search-btn, .search-btn-fallback {
    position: absolute;
    bottom: .5em;
    right: 1.25em;
    z-index: 10;
    padding: .8em 1.5em;
    border-radius: .65em
}

    .search-btn:disabled {
        background-color: unset !important;
        opacity: 1
    }

.filter-btn {
    background-color: #002d72
}

.dot:hover, .search-btn-fallback, .search-btn-fallback:hover, .slider-container .active, .sticky-tabs-container.is-sticky .tab-item.active::after {
    background-color: #fff
}

#hotelPage #map {
    height: 50vh
}

.border-primary-light, .same-user-review {
    border: 1px solid #002d72 !important
}

#slider-wrapper {
    max-width: 540px;
    width: 100%;
    height: 100%
}

#image-slider {
    width: auto;
    height: 22em;
    position: relative;
    overflow: hidden;
    margin: auto;
    display: block
}

    #image-slider ul {
        width: 100%;
        height: 259px;
        position: relative
    }

        #image-slider ul li {
            display: inline-block;
            position: absolute;
            top: 0;
            left: 540px;
            width: 100%;
            height: 100%
        }

            #image-slider ul li img {
                width: 100%;
                height: auto;
                border-radius: .85em;
                object-fit: contain
            }

.next-img {
    z-index: 9999
}

#thumbnail {
    margin-top: 3px;
    height: auto;
    display: table;
    width: 100%
}

    #thumbnail ul {
        width: 100%;
        height: 100%
    }

    #thumbnail li {
        list-style: none;
        float: left;
        cursor: pointer;
        min-width: 1px
    }

        #thumbnail li img {
            padding: 0;
            float: left;
            margin: 0 1.5px;
            max-height: 56px;
            height: 56px;
            border-radius: .35em;
            object-fit: cover
        }

        #thumbnail li:first-child img {
            margin-right: 0;
            margin-left: 0
        }

.navbar-brand img {
    height: 70px
}

.navbar-toggler {
    width: 20px;
    height: 20px;
    transition: .5s ease-in-out
}

    .navbar-toggler, .navbar-toggler-icon:focus, .navbar-toggler:active, .navbar-toggler:focus {
        outline: 0;
        box-shadow: none;
        border: 0;
        position: relative
    }

        .navbar-toggler span {
            margin: 0;
            padding: 0
        }

.toggler-icon {
    display: block;
    position: absolute;
    height: 3px;
    width: 100%;
    background: #003742;
    border-radius: 1px;
    opacity: 1;
    left: 0;
    transform: rotate(0);
    transition: .25s ease-in-out
}

.middle-bar {
    margin-top: 0
}

.navbar-toggler.collapsed .top-bar {
    position: absolute;
    top: 0;
    transform: rotate(0)
}

.navbar-toggler.collapsed .middle-bar {
    opacity: 1;
    position: absolute;
    top: 10px
}

.navbar-toggler.collapsed .bottom-bar {
    position: absolute;
    top: 20px;
    transform: rotate(0)
}

.navbar-toggler .top-bar {
    top: inherit;
    transform: rotate(135deg)
}

.navbar-toggler .middle-bar {
    opacity: 0;
    top: inherit
}

.navbar-toggler .bottom-bar {
    top: inherit;
    transform: rotate(-135deg)
}

.navbar-toggler.collapsed .toggler-icon {
    background: linear-gradient(319deg,#000 0,#35a7be 100%)
}

.loader-globe {
    width: 75px;
    margin: auto;
    animation-name: rotate;
    animation-duration: 60s;
    animation-iteration-count: infinite
}

@keyframes rotate {
    0% {
        transform: rotate(0turn)
    }

    100% {
        transform: rotate(12turn)
    }
}

@-webkit-keyframes rotate {
    0% {
        transform: rotate(0turn)
    }

    100% {
        transform: rotate(12turn)
    }
}

.info__box {
    background: #fff;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,.12),0 2px 4px 0 rgba(0,0,0,.08)
}

.info__text_one, .info__text_three, .info__text_two {
    height: 20px;
    border-radius: 4px
}

.info__text_one {
    width: 60%
}

.info__text_two {
    width: 40%
}

.info__text_three {
    width: 55%
}

.shinny-img {
    border-radius: 50%;
    width: 3.25em;
    height: 3.25em
}

.left_box {
    flex: 0 0 70%;
    margin-right: auto
}

    .left_box .image {
        height: 12em;
        width: 100%;
        border-radius: 10px
    }

.shinny {
    background: #d3d3d3;
    margin: 10px 0;
    position: relative;
    overflow: hidden
}

    .shinny::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        background: rgba(255,255,255,.2);
        height: 100%;
        transform: skew(5deg);
        animation: 1.5s ease-in-out infinite shine
    }

@keyframes shine {
    from {
        transform: skew(45deg) translateX(0)
    }

    to {
        transform: skew(45deg) translateX(200%)
    }
}

.eye, .eye-slash {
    right: 1em;
    top: 1.2em;
    cursor: pointer
}

.uploaded-img-thumbs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center
}

    .uploaded-img-thumbs img {
        width: 6em;
        height: 4em;
        object-fit: fill
    }

    .uploaded-img-thumbs svg {
        position: absolute;
        right: -5px;
        top: -5px;
        cursor: pointer
    }

.form-control.is-invalid {
    background-image: none !important
}

.recent-review-hotel-image img {
    width: 100%;
    height: 10em;
    object-fit: cover;
    transform: scale(1);
    transition: .2s
}

.iziToast-capsule .iziToast.iziToast-color-red {
    background: #f4434e;
    border-color: #ff404c;
    border-radius: .85em !important
}

.iziToast-capsule .iziToast-message a, .iziToast-capsule .iziToast > .iziToast-body .iziToast-message, .sticky-tabs-container.is-sticky .tab-item {
    color: #fff
}

.iziToast-capsule .iziToast.iziToast-color-green {
    background: #30c254;
    border-color: #259a42;
    border-radius: .85em !important
}

.avatar {
    width: 50px;
    height: 50px;
    background: center/cover #001c28;
    border-radius: 50% !important;
    margin-right: .5rem !important;
    color: #fff;
    font-size: 20px;
    object-fit: cover
}

.autocomplete-container {
    position: absolute;
    border-radius: .75em;
    padding: 0;
    width: 100%;
    z-index: 9999 !important;
    background: #fff;
    margin: 0;
    list-style: none;
    transition: none;
    box-shadow: 5px 4px 12px 0 rgba(0,0,0,.08) !important;
    height: auto;
    max-height: 20rem;
    overflow-y: scroll;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important
}

.date-picker-container, .how-does-itwork-text, .search-area {
    position: relative
}

.search-input-wrapper {
    overflow: visible !important;
    z-index: 1000
}

.search-area {
    overflow: visible;
    z-index: 1
}

.search-close-btn, .search-loader {
    width: 2em;
    height: 2em;
    top: 1em;
    z-index: 10
}

.autocomplete-container li {
    color: gray;
    cursor: pointer
}

    .autocomplete-container li.selected, .autocomplete-container li:hover {
        color: #002d72;
        background-color: rgba(234,234,234,.5803921569)
    }

.search-loader {
    right: 1em
}

    .search-close-btn svg, .search-loader svg {
        max-width: 2em;
        max-height: 2em
    }

.search-close-btn {
    right: 5em
}

.infowindow-wrapper {
    width: 20em;
    max-width: 20em
}

    .infowindow-wrapper img {
        height: 10em;
        width: 100%;
        object-fit: cover
    }

#map .gm-style-iw.gm-style-iw-c {
    padding: 0
}

    #map .gm-style-iw.gm-style-iw-c button.gm-ui-hover-effect {
        top: 0 !important;
        right: 0 !important;
        background-color: #fff !important;
        border-radius: 50% !important
    }

.slide-enter, .slide-leave-to {
    opacity: 0;
    transform: translateX(10px)
}

.fade-enter-active, .fade-leave-active {
    transition: .3s
}

.fade-enter, .fade-leave-to {
    opacity: 0;
    transform: translateY(-20px)
}

#write-page .ql-container ql-snow, #write-page .ql-toolbar.ql-snow, .signup-btn {
    border-radius: .75em
}

#write-page .ql-editor.ql-blank {
    min-height: 15em
}

.how-does-itwork-text::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: #00957f;
    width: 0;
    height: 1.5px
}

.how-does-itwork-text:hover::before {
    width: 30%;
    transition: .3s ease-in
}

#blog-page .blog-review-card:hover .ihover_hover--content h4 {
    letter-spacing: 5px
}

#blog-page .ihover_image {
    position: relative;
    height: 100%;
    width: 100%
}

    #blog-page .ihover_image img {
        height: 100%;
        width: 100%;
        display: block;
        max-height: 12em;
        object-fit: cover
    }

#blog-page .ihover_hover {
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(3,39,75,.7019607843);
    opacity: 0;
    transition: opacity .3s ease-in .1s;
    border-radius: .75em
}

#blog-page .ihover_hover--content {
    padding: 25px
}

    #blog-page .ihover_hover--content h4 {
        font-size: 22px;
        font-weight: 400;
        color: #fff;
        letter-spacing: 2px;
        transition: letter-spacing .3s linear .3s
    }

#single-blog-content img, .articleWrapper img, .blog-post-content img, .eventWrapper img {
    max-width: 100%
}

.img-john {
    border-radius: 50%;
    object-fit: cover
}

.faq-list .icon-show, .faq-list a.collapsed .icon-close, .photos-grid-container .hide-element, [v-cloak] {
    display: none
}

.VueCarousel .VueCarousel-wrapper {
    padding: 1em 0
}

.VueCarousel .VueCarousel-slide {
    max-width: 100%;
    overflow: hidden;
    padding: .5em
}

.VueCarousel .VueCarousel-navigation-prev {
    left: 1.75em !important
}

.VueCarousel .VueCarousel-navigation-next {
    right: 1.5em !important
}

.VueCarousel-navigation {
    display: flex;
    justify-content: end
}

.VueCarousel-navigation-button {
    position: static !important
}

.VueCarousel-navigation-next, .VueCarousel-navigation-prev {
    transform: unset !important
}

.VueCarousel-slide {
    max-width: 100%;
    overflow: hidden
}

.review-modal-images .VueCarousel-inner img {
    width: 100%;
    height: 20em;
    object-fit: contain;
    border-radius: .25em
}

.review-modal-images .thumbnail-container .VueCarousel-slide {
    padding: .25em
}

    .review-modal-images .thumbnail-container .VueCarousel-slide img {
        width: 100%;
        height: 4em;
        cursor: pointer;
        border-radius: .25em;
        object-fit: cover;
        opacity: .5;
        transition: .25s ease-in
    }

#how-tr-works svg.bi {
    fill: #002d72;
    width: 8em;
    height: 8em
}

#how-tr-works .card {
    cursor: pointer;
    padding-top: 1.5em;
    border: none;
    align-items: center;
    transform: scale(.96);
    transition: .25s ease-in
}

.quill-editor-container {
    border: 1px solid #dee2e6;
    border-radius: 5px;
    min-height: 300px;
    background-color: #fff;
    position: sticky;
    top: 185px
}

#editor {
    min-height: 200px
}

.ql-toolbar {
    border: none;
    border-bottom: 1px solid #ced4da;
    border-radius: 5px 5px 0 0;
    background-color: #f8f9fa;
    padding: 5px
}

.z-carosusel {
    margin: auto;
    height: 300px;
    object-fit: cover
}

.zt-carosusel {
    border: 2px solid #ccc;
    padding: 2px;
    background-color: #fff;
    opacity: .8;
    width: 85px;
    height: 60px;
    object-fit: cover;
    cursor: pointer;
    border-radius: 8px
}

.ct-left {
    left: -2%
}

.ct-right {
    right: -2%
}

.carousel-control-next, .carousel-control-prev {
    width: 5%
}

.margin-t {
    margin-top: 60px
}

.carousel-indicators button.thumbnail {
    width: 100px
}

    .carousel-indicators button.thumbnail:not(.active) {
        opacity: .7
    }

.carousel-indicators {
    position: static
}

@media screen and (min-width:992px) {
    .carousel {
        margin: 0 auto
    }
}

#cookie-pop-up button{
    margin-left: auto;
    margin-right: auto;
    color: #fff
}

.avatar-logo {
    color: #fff
}

.avatar-logo {
    width: 50px;
    height: 50px;
    background: center/cover #001c28;
    border-radius: 50% !important;
    font-size: 20px;
    display: flex
}

.p-diaries {
    max-width: 800px
}

#feedback-pop-up {
    z-index: 1000;
    left: 50%
}

#cookie-pop-up {
    z-index: 1000;
    left: 50%;
    background-color: rgba(255,255,255,.9);
    padding: 20px 30px;
    font-family: Poppins,sans-serif;
    box-shadow: 0 3px 10px 5px rgba(0,0,0,.4);
    border-radius: 30px 30px 0 0
}

    #cookie-pop-up button {
        display: block;
        border: none;
        background-color: #00957f;
        padding: 10px 50px;
        margin-top: -5px;
        transition: .5s;
        border-radius: .75em
    }

        #cookie-pop-up button:hover {
            background-color: #565e64
        }

    #cookie-pop-up h3 {
        font-size: 22px
    }

    #cookie-pop-up p, .priceWidgetUI {
        font-size: 13px
    }

    #cookie-pop-up a {
        color: gray;
        text-decoration: underline
    }

.lable-s {
    z-index: 5;
    max-height: 100px !important;
    position: relative
}

.ribbon {
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    --f: .4em;
    --r: .8em;
    position: absolute;
    top: calc(-1 * var(--f));
    padding: 10px 3px;
    border: solid transparent
}

.lable-t {
    font-size: 12px !important;
    padding: 2px;
    font-weight: 500
}

.error {
    color: red
}

.text-fields-c {
    background-color: #f7f7f7
}

.qty .count {
    color: #000;
    display: inline-block;
    font-size: 25px;
    font-weight: 700;
    line-height: 30px;
    padding: 0 2px;
    min-width: 40px;
    text-align: center;
    background-color: #fff
}

.qty .minus, .qty .plus {
    display: inline-block;
    vertical-align: top;
    height: 30px;
    font: 30px/1 Arial,sans-serif;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    width: 30px;
    text-align: center
}

.qty .minus {
    background-clip: padding-box
}

.minus:hover, .plus:hover {
    background-color: #717fe0 !important
}

.bookingHotelWrapper {
    background: #002d72;
    padding-bottom: 100px !important
}

#frmCheckAvailability #-error, #frmEvent #-error {
    display: none !important
}

.bookingCols {
    display: grid
}

.booking-widget {
    margin-top: -75px !important;
    background: #fff;
    box-shadow: rgba(100,100,111,.2) 0 7px 29px 0;
    padding: 25px 20px;
    border-radius: 12px
}

#childrenAgeModal .form-control, .DetailedView .form-control, .edit-review-modal .form-control, .filterWrapper .form-control, .form-select, .input-group-text {
    border: 1px solid #ced4da30;
    background-color: #fff;
    padding: 8px;
    border-radius: 6px;
    font-weight: 500;
    font-size: 16px
}

#how-tr-works .unstyled, .dropdown-menu ul {
    list-style: none;
    padding: 0
}

.marquee-text {
    -webkit-box-align: center;
    -moz-box-align: center;
    -o-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    overflow: hidden
}

    .marquee-text .top-info-bar {
        font-size: 13px;
        width: 200%;
        display: flex;
        -webkit-animation: 25s linear infinite marquee;
        -moz-animation: 25s linear infinite marquee;
        -o-animation: 25s linear infinite marquee;
        -ms-animation: marquee 25s linear infinite running;
        animation: 25s linear infinite marquee
    }

        .marquee-text .top-info-bar:hover {
            -webkit-animation-play-state: paused;
            -moz-animation-play-state: paused;
            -o-animation-play-state: paused;
            -ms-animation-play-state: paused;
            animation-play-state: paused
        }

        .marquee-text .top-info-bar .info-text {
            padding: 0 8px 16px;
            white-space: nowrap;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            -webkit-transition: .2s;
            transition: .2s
        }

        .marquee-text .top-info-bar a {
            color: #fff;
            text-decoration: none
        }

@-moz-keyframes marquee {
    0% {
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -o-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0)
    }

    100% {
        -webkit-transform: translate(-50%);
        -moz-transform: translate(-50%);
        -o-transform: translate(-50%);
        -ms-transform: translate(-50%);
        transform: translate(-50%)
    }
}

@-webkit-keyframes marquee {
    0% {
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -o-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0)
    }

    100% {
        -webkit-transform: translate(-50%);
        -moz-transform: translate(-50%);
        -o-transform: translate(-50%);
        -ms-transform: translate(-50%);
        transform: translate(-50%)
    }
}

@-o-keyframes marquee {
    0% {
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -o-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0)
    }

    100% {
        -webkit-transform: translate(-50%);
        -moz-transform: translate(-50%);
        -o-transform: translate(-50%);
        -ms-transform: translate(-50%);
        transform: translate(-50%)
    }
}

@keyframes marquee {
    0% {
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -o-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0)
    }

    100% {
        -webkit-transform: translate(-50%);
        -moz-transform: translate(-50%);
        -o-transform: translate(-50%);
        -ms-transform: translate(-50%);
        transform: translate(-50%)
    }
}

.dropdown {
    position: relative;
    display: inline-block
}

.dropdown-button {
    border: 1px solid #ced4da;
    background-color: #fff;
    padding: 8px;
    border-radius: 6px;
    color: #212529;
    cursor: pointer;
    align-items: baseline;
    justify-content: center;
    gap: 10px;
    display: inline-flex
}

.dropdown-menu-booking {
    display: block;
    position: absolute;
    background-color: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 8px 16px rgba(0,0,0,.2);
    z-index: 1
}

.dropdown-menu ul {
    margin: 0
}

.dropdown-menu li {
    padding: 8px 12px
}

    .dropdown-menu li a {
        color: #333;
        display: block
    }

        .dropdown-menu li a:hover {
            background-color: #f1f1f1
        }

.invisible-label {
    pointer-events: none;
    color: transparent !important;
    height: 18px
}

.bookingUIimg {
    width: 240px;
    aspect-ratio: auto 240/240;
    height: 240px
}

.bookingCardWrapper {
    height: 560px;
    overflow: auto;
    scrollbar-width: thin
}

.runnerImg {
    position: absolute;
    left: 0;
    z-index: 0;
    opacity: .1
}

.sucessPageHotelImg {
    height: 150px;
    object-fit: cover
}

.bookingCardTxt, .reviewcardTxt {
    font-size: 12px;
    font-weight: 600
}

.bookingUIcard {
    border-radius: 12px
}

.priceWidgetUI .btnview {
    width: max-content
}

.bookingDetailmodal .modal-header, .border-bottom-0, .modal-content .modal-header {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0
}

.bookingDetailmodal .btn-danger {
    border-top-left-radius: 0;
    border-top-right-radius: 0
}

.purposeName {
    font-size: 10px
}

.feedbackModal .modal-body {
    height: auto !important
}

@media (min-width:991px) {
    .InputWrapper {
        display: inline-flex;
        flex-direction: column-reverse
    }

    .modal-body {
        height: 600px;
        overflow: auto;
        scrollbar-width: thin
    }
}

.scrollbar-none, .tabs-slider-wrapper {
    scrollbar-width: none
}

.modal {
    z-index: 102 !important
}

.modal-backdrop {
    z-index: 101 !important
}

#promoCodeDatatable_wrapper .dataTables_scrollHeadInner, table.dataTable {
    width: 100% !important
}

.dataTables_scrollHead table.dataTable {
    margin-bottom: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important
}

.dataTables_scrollBody > table {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important
}

div.dataTables_wrapper div.dataTables_length select {
    width: 60px;
    display: inline-block
}

div.dataTables_wrapper div.dataTables_info {
    padding-top: 0
}

.page-link {
    width: 50px;
    text-align: center;
    height: 40px
}

.dropdown-item {
    border-radius: 6px
}

.login, .register {
    position: relative;
    width: 100%;
    background-color: #fff;
    min-height: 100vh;
    overflow: hidden
}

    .login .forms-container, .register .forms-container {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0
    }

    .login .loginWrapper, .register .registerWrapper {
        background: #fff;
        box-shadow: 5px 4px 15px 2px rgba(2,30,42,.25) !important;
        border-radius: 20px
    }

    .login form, .register form {
        display: flex;
        justify-content: center;
        flex-direction: column;
        padding: 1.5rem 2rem;
        transition: .2s .7s;
        overflow: hidden;
        grid-column: 1/2;
        grid-row: 1/2
    }

        .login .container.sign-up-mode form.sign-in-form, .login form.sign-up-form, .register .container.sign-up-mode form.sign-in-form, .register form.sign-up-form {
            opacity: 0;
            z-index: 1
        }

        .login form.sign-in-form, .register form.sign-in-form {
            z-index: 2
        }

    .login .form-control, .register .form-control {
        border: 1px solid #ced4da
    }

    .login .container:before, .register .container:before {
        height: 2000px;
        width: 2000px;
        top: -10%;
        transform: translateY(-50%);
        background-image: linear-gradient(-45deg,#001145 0,#002d72 100%);
        transition: 1.8s ease-in-out;
        border-radius: 50%;
        position: absolute;
        content: ""
    }

    .login .container:before {
        right: 48%;
        z-index: 6
    }

    .register .container:before {
        left: 48%
    }

.signup-btn:hover {
    color: #002d72 !important;
    border-color: #002d72
}

.login .image, .register .image {
    width: 100%;
    transition: transform 1.1s ease-in-out 0.4s
}

.login .panel, .register .panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    text-align: center;
    z-index: 6
}

.login .left-panel, .register .left-panel {
    pointer-events: all;
    padding: 3rem 17% 2rem 12%
}

.login .container.sign-up-mode .left-panel, .map-drawer, .range-input input, .register .container.sign-up-mode .left-panel {
    pointer-events: none
}

.login .right-panel, .register .right-panel {
    pointer-events: none;
    padding: 3rem 12% 2rem 17%
}

.login .panel .content, .register .panel .content {
    color: #fff;
    transition: transform .9s ease-in-out 0.6s
}

.login .panel h3, .register .panel h3 {
    font-weight: 600;
    line-height: 1;
    font-size: 1.5rem
}

.login .panel p, .register .panel p {
    font-size: .95rem;
    padding: .7rem 0
}

.login .btn.transparent, .register .btn.transparent {
    margin: 0;
    background: 0 0;
    border: 2px solid #fff;
    width: 130px;
    height: 41px;
    font-weight: 600;
    font-size: .8rem;
    color: #fff
}

.login .right-panel .content, .login .right-panel .image, .register .right-panel .content, .register .right-panel .image {
    transform: translateX(800px)
}

.login .container.sign-up-mode:before, .register .container.sign-up-mode:before {
    transform: translate(100%,-50%);
    right: 52%
}

.login .container.sign-up-mode .left-panel .content, .login .container.sign-up-mode .left-panel .image, .register .container.sign-up-mode .left-panel .content, .register .container.sign-up-mode .left-panel .image {
    transform: translateX(-800px)
}

.login .container.sign-up-mode .signin-signup, .register .container.sign-up-mode .signin-signup {
    left: 25%
}

.login .container.sign-up-mode form.sign-up-form, .register .container.sign-up-mode form.sign-up-form {
    opacity: 1;
    z-index: 2
}

.login .container.sign-up-mode .right-panel .content, .login .container.sign-up-mode .right-panel .image, .register .container.sign-up-mode .right-panel .content, .register .container.sign-up-mode .right-panel .image {
    transform: translateX(0)
}

.login .container.sign-up-mode .right-panel, .register .container.sign-up-mode .right-panel {
    pointer-events: all
}

@media (max-width:991px) {
    .navbar-collapse {
        justify-content: center
    }

    .navbar-nav {
        flex-direction: column;
        text-align: center
    }

    .navbar-brand img {
        height: 50px
    }

    .modal-body {
        height: 500px;
        scrollbar-width: thin;
        overflow: auto
    }

    #shareModal .modal-body {
        height: auto
    }

    .lead {
        font-size: 1rem
    }

    .login, .register {
        overflow-y: scroll
    }

        .login .signin-signup, .register .signin-signup {
            width: 100%
        }

        .login .container.sign-up-mode .signin-signup, .login .signin-signup, .register .container.sign-up-mode .signin-signup, .register .signin-signup {
            left: 50%
        }

        .login .panels-container, .register .panels-container {
            grid-template-columns: 1fr;
            grid-template-rows: 1fr 2fr 1fr
        }

        .login .panel, .register .panel {
            flex-direction: row;
            justify-content: space-around;
            align-items: center;
            padding: 2.5rem 8%;
            grid-column: 1/2
        }

        .login .right-panel, .register .right-panel {
            grid-row: 3/4
        }

        .login .left-panel, .register .left-panel {
            grid-row: 1/2;
            display: none
        }

        .login .image, .register .image {
            width: 200px;
            transition: transform .9s ease-in-out 0.6s
        }

        .login .panel .content, .register .panel .content {
            padding-right: 15%;
            transition: transform .9s ease-in-out 0.8s
        }

        .login .panel h3, .register .panel h3 {
            font-size: 1.2rem
        }

        .login .panel p, .register .panel p {
            font-size: .7rem;
            padding: .5rem 0
        }

        .login .btn.transparent, .register .btn.transparent {
            width: 110px;
            height: 35px;
            font-size: .7rem
        }

        .login .container:before, .register .container:before {
            width: 1500px;
            height: 1500px;
            transform: translateX(-50%);
            left: 30%;
            bottom: 68%;
            right: initial;
            top: initial;
            transition: 2s ease-in-out;
            display: none
        }

        .login .container.sign-up-mode:before, .register .container.sign-up-mode:before {
            transform: translate(-50%,100%);
            bottom: 32%;
            right: initial
        }

        .login .container.sign-up-mode .left-panel .content, .login .container.sign-up-mode .left-panel .image, .register .container.sign-up-mode .left-panel .content, .register .container.sign-up-mode .left-panel .image {
            transform: translateY(-300px)
        }

        .login .container.sign-up-mode .right-panel .content, .login .container.sign-up-mode .right-panel .image, .register .container.sign-up-mode .right-panel .content, .register .container.sign-up-mode .right-panel .image {
            transform: translateY(0)
        }

        .login .right-panel .content, .login .right-panel .image, .register .right-panel .content, .register .right-panel .image {
            transform: translateY(300px)
        }

        .login .container.sign-up-mode .signin-signup, .register .container.sign-up-mode .signin-signup {
            top: 5%;
            transform: translate(-50%,0)
        }

    .mobileContent {
        text-align: center;
        padding: 45px 50px;
        width: 100%;
        background-image: linear-gradient(-45deg,#001145 0,#002d72 100%);
        color: #fff;
        clip-path: circle(140vw at 50% calc(100% - 140vw))
    }
}

.successPage #map {
    height: 250px;
    width: 100%
}

.globeWrapper {
    display: flex;
    justify-content: center;
    padding: 40px 0
}

.footerWrapper {
    bottom: 2%;
    left: 0;
    right: 0;
    position: absolute
}

footer a:hover {
    text-decoration: underline
}

.footer-logo {
    max-width: 200px
}

.icon-container {
    display: inline-block;
    cursor: pointer;
    padding: .5rem;
    background: rgba(0,0,0,.05);
    border-radius: 50%;
    margin-right: .5rem;
    transition: background .3s
}

    .icon-container:hover {
        background: rgba(0,0,0,.1)
    }

.hotelName {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical
}

.blogDescription, .eventDes, .slider-container .title {
    -webkit-line-clamp: 3;
    overflow: hidden;
    -webkit-box-orient: vertical
}

.hotelcardWrapper .card, .transition-transform, .travel-card {
    transition: transform .3s
}

.slider-container .dot, .slider-container .slider-nav-btn {
    background-color: rgba(211,211,211,.226);
    transition: .3s;
    cursor: pointer
}

.blogHero, .events {
    background-color: #8dcfff42
}

.bg-blue-100 {
    background: #8dcfff42 !important;
    border: 2px solid #a3d7fc !important;
    box-shadow: 1px 1px 10px #a3d7fc
}

.event-card-background {
    width: 100%;
    height: 500px;
    background-size: cover;
    background-position: center;
    position: relative;
    border-radius: 24px;
    overflow: hidden
}

.event-content {
    background-color: rgba(0,0,0,.5);
    color: #fff;
    padding: 80px 50px;
    height: 100%;
    border-radius: 10px
}

.eventDes {
    width: 75%;
    max-height: 75px;
    display: -webkit-box
}

.learn-more-btn {
    background-color: #f60;
    color: #fff;
    padding: 10px 50px;
    border-radius: 5px;
    transition: background-color .3s
}

.slider-container {
    width: 100%;
    position: relative
}

    .slider-container .slide {
        width: 100%;
        display: none
    }

    .slider-container .slide-image {
        width: 100%;
        height: 85vh;
        object-fit: cover;
        filter: brightness(.6)
    }

    .slider-container .slide-content {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 5rem;
        z-index: 5;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        gap: .5rem;
        padding: 1rem;
        width: 60%
    }

    .slider-container .title {
        color: #fdffd5 !important;
        font-size: 64px;
        font-weight: 500;
        text-transform: capitalize;
        line-height: 74px;
        display: -webkit-box
    }

    .slider-container .slide-number-container {
        position: absolute;
        bottom: 1rem;
        left: 1rem;
        z-index: 5;
        font-size: 18px;
        display: flex;
        gap: 0;
        align-items: center;
        color: rgba(211,211,211,.788)
    }

        .slider-container .slide-number-container hr {
            width: 30px;
            transform: rotate(90deg);
            border-color: rgba(211,211,211,.788)
        }

    .slider-container .slider-nav {
        position: absolute;
        bottom: 1rem;
        right: 1rem;
        display: flex;
        gap: 1rem
    }

    .slider-container .slider-nav-btn {
        color: #fff;
        font-size: 1.5rem;
        padding: .5rem;
        border-radius: .5rem;
        height: 40px;
        width: 40px
    }

        .slider-container .slider-nav-btn:hover {
            background-color: #fff;
            color: #000
        }

.page-link .next::after, .page-link .previous::after {
    display: inline-block;
    font-size: 25px;
    color: #333;
    line-height: 0
}

.slider-container .dot-container {
    position: absolute;
    bottom: 1rem;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: .5rem
}

.slider-container .dot {
    height: 8px;
    width: 60px;
    border-radius: 14px
}

.slider-container .fade {
    animation-name: fade;
    animation-duration: 1.5s;
    opacity: 1 !important
}

.slider-container .eventCTA {
    width: inherit;
    background-color: #f60
}

.more-info-button {
    background-color: #cce6ff;
    color: #06c;
    border: none;
    border-radius: 8px;
    padding: 10px 40px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .3s
}

.photos-grid-container .main-photo {
    grid-row: 1/span 2;
    grid-column: 1;
    height: 400px
}

.photos-grid-container .sub-photos {
    grid-column: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-gap: 4px;
    height: 400px
}

.photos-grid-container .img-box {
    position: relative;
    overflow: hidden
}

.photos-grid-container .main-photo .img-box {
    height: 100%
}

.photos-grid-container .sub-photos .img-box {
    height: 198px
}

.photos-grid-container .img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0
}

.photos-grid-container .transparent-box {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,.5);
    display: flex;
    justify-content: center;
    align-items: center
}

.singleHoteltransparent-box {
    border-radius: 0 !important
}

    .singleHoteltransparent-box .caption {
        color: #000;
        transition: transform .3s,opacity .3s;
        font-size: .875em;
        background: #ffffffc2;
        padding: 6px 16px;
        border-radius: 6px;
        font-weight: 600
    }

@media (max-width:575px) {
    .login .container, .login form, .register .container, .register form {
        padding: 1.5rem
    }

    .login .image, .register .image {
        display: none
    }

    .login .panel .content, .register .panel .content {
        padding: .5rem 1rem
    }

    .photos-grid-container .sub-photos {
        grid-gap: 0
    }
}

.hotelSingleCard {
    height: fit-content
}

.faq-border {
    border-left: 2px dashed #acacac
}

.faq-list {
    padding-left: 17px
}

.faqlistitems li {
    margin-top: 8px !important;
    border: 0 !important;
    padding: 0 !important
}

.faq-list li {
    padding: 20px;
    background: #fff;
    border-radius: 12px;
    position: relative;
    border: 1px solid #acacac;
    margin-top: 15px
}

.faq-list a {
    display: block;
    position: relative;
    font-size: 16px;
    line-height: 24px;
    padding: 5px 0;
    outline: 0;
    cursor: pointer
}

.faq-list span {
    margin-left: 5px
}

.faq-list .icon-close, .faq-list .icon-show {
    font-size: 20px
}

.faq-list p {
    padding: 10px 0 0
}

.faq-list a.collapsed .icon-show {
    display: inline-block
}

.blog-post-content p {
    margin: 0 !important
}

.reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 4px;
    background: linear-gradient(90deg,#f67a03,#ff9b3f);
    transition: width .3s;
    z-index: 1100
}

.date-picker-container input {
    width: 100%;
    border: 1px solid #ced4da;
    background-color: #fff;
    padding: 8px;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    cursor: pointer;
    color: #212529
}

.month-year-picker-wrapper {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 10;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0,0,0,.1);
    margin-top: 5px
}

.month-year-picker {
    padding: 15px;
    text-align: center
}

.year-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px
}

    .year-navigation button {
        background-color: #002d72;
        border: none;
        font-size: 18px;
        cursor: pointer;
        color: #fff;
        border-radius: 4px
    }

.month-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 10px
}

    .month-grid button {
        padding: 10px;
        font-size: 14px;
        background-color: #f0f0f0;
        border: 1px solid #ccc;
        border-radius: 5px;
        cursor: pointer
    }

.blogcard {
    background-image: url(../img/originals/blog-bg.jpg)
}

.blogDescription {
    height: 90px;
    display: -webkit-box
}

.blogcard img {
    height: 245px;
    object-fit: cover
}

.w-fit {
    width: fit-content
}

.watermark_img {
    width: 90px;
    z-index: 10
}

.grid-3x1 {
    display: -ms-grid;
    display: grid;
    grid-auto-columns: 1fr;
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    -ms-grid-columns: 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr;
    -ms-grid-rows: auto;
    grid-template-rows: auto
}

.grid-process-item, .grid-process-item-icon-wrap {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    position: relative
}

.grid-process-item {
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center
}

.grid-process-item-icon-wrap {
    display: flex;
    width: 160px;
    height: 160px;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    border: 1px dashed #939393;
    border-radius: 50%;
    -webkit-transition: .2s;
    transition: .2s
}

.process-line, .process-number {
    position: absolute;
    bottom: auto
}

.process-number {
    left: -30px;
    top: -10px;
    right: auto;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 40px;
    height: 40px;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    border-radius: 70px;
    background-color: #f6f6f7;
    font-size: 18px;
    font-weight: 800
}

.margin-top-50 {
    margin-top: 50px
}

.margin-top-15 {
    margin-top: 15px
}

.process-line {
    left: auto;
    top: 70px;
    right: -90px
}

    .process-line.process-line-2 {
        -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        transform: rotate(180deg)
    }

@media screen and (max-width:767px) {
    .grid-3x1 {
        max-width: 80%;
        margin-right: auto;
        margin-left: auto;
        grid-column-gap: 40px;
        grid-row-gap: 40px;
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr
    }

    .process-number {
        left: 0;
        top: 0
    }

    .process-line {
        display: none
    }
}

.ql-container.ql-snow {
    min-height: 200px;
    height: 500px
}

.facility-item {
    min-width: 80px;
    padding: .5rem
}

    .facility-item i {
        font-size: 1.25rem;
        margin-bottom: .25rem
    }

    .facility-item p {
        font-size: .75rem;
        line-height: 1.2
    }

.eventTxt {
    user-select: none
}

.gm-style-iw-chr {
    height: 0 !important
}

.pagination.b-pagination {
    margin-bottom: 0 !important
}

.action-buttons .btn {
    padding: .375rem .75rem !important
}

.action-buttons .btn-primary, .action-buttons .btn-primary:hover {
    border: 0 !important
}

.sucessFooter {
    position: fixed !important;
    width: 100%;
    bottom: 0
}

@media (min-width:991px) {
    .login .signin-signup, .register .signin-signup {
        position: absolute;
        top: 50%;
        transform: translate(-50%,-50%);
        left: 75%;
        width: 50%;
        transition: 1s ease-in-out .7s;
        display: grid;
        grid-template-columns: 1fr;
        z-index: 10
    }

    .mobileContent {
        display: none
    }

    .login .panels-container, .register .panels-container {
        position: absolute;
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
        display: grid;
        grid-template-columns: repeat(2,1fr)
    }

    #comingSoonModal .modal-body, #modalActiveConfirm .modal-body, #modalActiveConfirm-adminActiveStatus .modal-body, #modalActiveConfirm-blogActiveStatus .modal-body, #modalActiveConfirm-hotelBannerActiveStatus .modal-body, #modalActiveConfirm-reviewctiveStatus .modal-body, #modalActiveConfirm-userActiveStatus .modal-body, #modalAddCoupon .modal-body, #modalAddUser .modal-body, #modalCreatePromo .modal-body, #modalCreateSinglePromo .modal-body, #shareModal .modal-body {
        height: auto;
        overflow-x: hidden;
        scrollbar-width: thin
    }
}

.page-link .next::after {
    content: "→"
}

.page-link .previous::after {
    content: "←"
}

.rounded-4 {
    border-radius: 1rem !important
}

.bg-contact-secondary {
    background: #f6f6f6
}

#contact-us-page .bg-blog-secondary {
    background-color: #edfcff;
    border: 1px solid #ededed
}

#percentageInput {
    width: 90%
}

.percentageInputgroup {
    position: absolute;
    right: 0;
    width: 10%;
    padding: 16px;
    border-radius: 0 .5em .5em 0;
    z-index: 2
}

#hotelBooking .input-group-text, .form-control-booking {
    padding: .75em !important
}

.input-border {
    border: 1px solid rgba(0,0,0,.125) !important
}

.input-border-custom {
    border: 1px solid rgba(0,0,0,.125)
}

.border-rounded {
    border-radius: .5em !important
}

.form-control-booking {
    font-weight: 600
}

.booking-dropdown-menu-li, .hotel-booking .dropdown-item:hover {
    padding: 15px !important;
    border-radius: 0 !important;
    display: flex !important;
    gap: 12px
}

.hotel-booking .dropdown-item:hover {
    background: #c8dff9 !important;
    align-items: center !important
}

.booking-dropdown-menu-li {
    align-items: center !important;
    font-size: 14px !important
}

.mobile-screen-filterWrapper label {
    font-size: 12px
}

.border-b {
    overflow: hidden
}

.btn-primary:disabled {
    opacity: .6;
    cursor: not-allowed
}

.rounded-top {
    border-top-left-radius: .5rem !important;
    border-top-right-radius: .5rem !important
}

.form-check-input:checked {
    background-color: #001a36 !important;
    border-color: #001a36 !important
}

.form-range::-moz-range-thumb {
    background-color: #001a36 !important
}

.tourCard.-type-2 {
    display: grid;
    grid-template-columns: max-content 1fr min-content;
    grid-gap: 30px;
    gap: 20px;
    height: 100%;
    border-radius: 12px;
    border: 1px solid var(--border,#e7e6e6);
    transition: .2s
}

    .tourCard.-type-2 .tourCard__image {
        position: relative;
        flex-shrink: 0;
        width: 280px;
        min-height: 260px;
        z-index: 0
    }

        .tourCard.-type-2 .tourCard__image img {
            width: 100%;
            height: 100%;
            border-top-left-radius: 12px;
            border-bottom-left-radius: 12px;
            object-fit: cover
        }

    .tourCard.-type-2 .tourCard__badge {
        position: absolute;
        top: 20px;
        left: 20px;
        z-index: 1
    }

    .tourCard.-type-2 .tourCard__favorite {
        position: absolute;
        top: 15px;
        right: 15px;
        z-index: 1
    }

    .tourCard.-type-2 .tourCard__content {
        padding-top: 10px;
        padding-bottom: 10px
    }

.tourCard__title {
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 18px;
    font-weight: 700;
    line-height: 30px
}

.tab-item, .text-12, .text-14 {
    font-weight: 500
}

.tourCard.-type-2 .tourCard__text {
    font-size: 13px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical
}

.tourCard.-type-2 .tourCard__info {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    height: 100%;
    width: 225px;
    border-left: 1px solid #e7e6e6;
    padding: 10px
}

    .tourCard.-type-2 .tourCard__info > :first-child {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        text-align: center;
        height: 100%
    }

.tourCard.-type-2 .tourCard__price > :first-child {
    font-size: 15px;
    line-height: 1.4
}

.tourCard.-type-2 .tourCard__price > :nth-child(2) {
    line-height: 1.4
}

.text-14 {
    font-size: 14px
}

.text-12 {
    font-size: 12px !important
}

.text-16 {
    font-size: 16px !important
}

.pt-30 {
    padding-top: 30px !important
}

@media (max-width:1199px) {
    .tourCard.-type-2 {
        grid-template-columns: 1fr 1fr
    }

        .tourCard.-type-2 > :first-child {
            grid-column: span 2;
            width: 100% !important
        }

        .tourCard.-type-2 .tourCard__image img {
            width: 100%;
            height: 100%;
            border-top-left-radius: 12px;
            border-top-right-radius: 12px;
            border-bottom-left-radius: 0;
            object-fit: cover
        }

        .tourCard.-type-2 > :nth-child(3) {
            width: 100% !important
        }

        .tourCard.-type-2 .tourCard__content {
            padding: 10px 20px
        }
}

@media (max-width:767px) {
    .tourCard.-type-2 {
        grid-template-columns: 1fr;
        gap: 16px
    }

        .tourCard.-type-2 > :first-child {
            grid-column: span 1
        }

        .tourCard.-type-2 > :nth-child(3) {
            border-left: none !important;
            padding: 0 10px;
            width: 100% !important
        }

        .tourCard.-type-2 .tourCard__content {
            padding: 0 10px
        }
}

.sticky-tabs-container {
    position: sticky;
    top: 112px;
    z-index: 99;
    background-color: white;
    padding: 0;
    margin-top: 1rem;
    transition: box-shadow .3s
}

    .sticky-tabs-container.is-sticky {
        background: #002d72
    }

        .sticky-tabs-container.is-sticky .tabs-slider-wrapper {
            border: none;
            padding: 10px 0
        }

.tabs-slider-wrapper {
    position: relative;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-bottom: 1px solid rgba(0,0,0,.125);
    padding: 10px 0 0
}

    .tabs-slider-wrapper::-webkit-scrollbar {
        display: none
    }

.tabs-slider {
    display: flex;
    flex-wrap: nowrap;
    width: 100%
}

.tab-item {
    flex: 0 0 auto;
    color: #002d72;
    font-size: 1.125rem;
    line-height: 1.5rem;
    padding: 1rem 1.5rem;
    border: none;
    background: 0 0;
    position: relative;
    cursor: pointer;
    transition: color .3s
}

    .tab-item:hover {
        color: #00957f
    }

    .tab-item.active {
        color: #002d72;
        font-weight: 800
    }

        .tab-item.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background-color: #002d72;
            border-radius: 3px 3px 0 0
        }

.tab-section {
    scroll-margin-top: 170px;
    padding-top: 20px
}

@media (max-width:991px) {
    .footerWrapper {
        position: relative;
        margin-top: -25px;
        background: #001a36
    }

    .tourCard.-type-2 .tourCard__info > :first-child {
        align-items: flex-start !important;
        text-align: left !important
    }

    .tab-item {
        padding: .75rem 1rem;
        font-size: .9rem
    }

    .sticky-tabs-container {
        top: 93px
    }

    .tab-section {
        scroll-margin-top: 150px
    }
}

.slide-enter-active, .slide-leave-active {
    transition: 1s cubic-bezier(.4, 0, .2, 1);
    max-height: 2000px;
    overflow: hidden
}

.slide-enter-from, .slide-leave-to {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
    overflow: hidden
}

.drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,.5);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s,visibility .3s
}

    .drawer-overlay.active {
        opacity: 1;
        visibility: visible
    }

.checkout-drawer {
    position: fixed;
    top: 0;
    right: -500px;
    width: 90%;
    max-width: 500px;
    height: 100vh;
    background-color: #fff;
    box-shadow: -2px 0 10px rgba(0,0,0,.1);
    z-index: 1000;
    transition: right .3s;
    display: flex;
    flex-direction: column
}

.drawer-header {
    flex-shrink: 0;
    border-bottom: 1px solid #dee2e6
}

.drawer-content, .map-drawer {
    flex-direction: column;
    display: flex
}

.drawer-content {
    height: calc(100% - 60px);
    overflow: hidden
}

.scrollable-content {
    flex-grow: 1;
    overflow-y: auto;
    padding: 1rem;
    -webkit-overflow-scrolling: touch
}

.fixed-button-container {
    flex-shrink: 0;
    position: sticky;
    bottom: 0;
    background-color: #fff;
    z-index: 10;
    padding: 1rem;
    border-top: 1px solid #dee2e6;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom))
}

.booking-container .flatpickr-day.selected.startRange, .flatpickr-day.endRange.startRange, .flatpickr-day.startRange.startRange {
    border-radius: 8px 0 0 8px !important
}

.booking-container .flatpickr-day.selected.endRange, .flatpickr-day.endRange.endRange, .flatpickr-day.startRange.endRange {
    border-radius: 0 8px 8px 0 !important
}

.booking-container .flatpickr-day.selected, .flatpickr-day.endRange, .flatpickr-day.endRange.inRange, .flatpickr-day.endRange.nextMonthDay, .flatpickr-day.endRange.prevMonthDay, .flatpickr-day.endRange:focus, .flatpickr-day.endRange:hover, .flatpickr-day.selected.inRange, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.selected.prevMonthDay, .flatpickr-day.selected:focus, .flatpickr-day.selected:hover, .flatpickr-day.startRange, .flatpickr-day.startRange.inRange, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.startRange.prevMonthDay, .flatpickr-day.startRange:focus, .flatpickr-day.startRange:hover {
    background: #002d72 !important;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: #fff;
    border-color: rgba(0,0,0,.125) !important
}

.rangeMode .flatpickr-day {
    font-weight: 600 !important;
    border-radius: 8px
}

.fw-semibold, .loader-text {
    font-weight: 600
}

.flatpickr-months .flatpickr-month {
    border-top: 8px solid #002d72 !important;
    font-weight: 600;
    border-radius: 8px !important;
    height: 40px !important
}

.flatpickr-innerContainer {
    border-bottom: 8px solid #002d72 !important;
    border-radius: 8px !important
}

.flatpickr-current-month .flatpickr-monthDropdown-months, .flatpickr-current-month input.cur-year {
    font-weight: 600 !important
}

@media (min-width:768px) {
    .photos-grid-container {
        display: grid;
        grid-template-columns: 2fr 1fr;
        grid-gap: 4px;
        height: 400px
    }

    .rounded-md-4 {
        border-radius: 1rem !important
    }

    .input-border-right {
        border-right: 1px solid rgba(0,0,0,.125) !important;
        border-radius: 0 !important
    }
}

@media (max-width:768px) {
    .event-content {
        padding: 25px
    }

    .slider-container .slide-content {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 0;
        z-index: 5;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        gap: .5rem;
        padding: 1rem;
        width: 100%
    }

    .slider-container .title {
        font-size: 50px;
        line-height: 70px
    }

    .slider-container .dot {
        width: 20px
    }

    .photos-grid-container .photos-grid-container {
        grid-template-columns: 1fr;
        height: auto
    }

    .photos-grid-container .main-photo {
        grid-row: auto;
        grid-column: auto;
        height: 300px
    }

    .photos-grid-container .sub-photos {
        grid-column: auto;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        height: auto
    }

        .photos-grid-container .sub-photos .img-box {
            height: 150px
        }

    .border-end-md-none {
        border-right: none !important
    }

    .input-border-right {
        border-bottom: 1px solid rgba(0,0,0,.125) !important;
        border-radius: 0 !important
    }
}

.world-image {
    position: absolute;
    right: 0;
    height: 100%;
    top: 0;
    opacity: .3
}

.rounded-custom {
    border-radius: 10px !important
}

.amenties-active {
    border-color: #8dcfff42 !important;
    background: #8dcfff42 !important
}

.loader-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    min-height: 200px
}

.loader-spinner {
    border: 3px solid #002d72;
    border-top: 3px solid #f67a03;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: 1s linear infinite spin
}

@keyframes spin {
    0% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(360deg)
    }
}

.loader-text {
    margin-left: 1rem;
    color: #002d72;
    font-size: .9rem
}

.map-drawer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1050
}

.common-drawer-overlay, .map-drawer-content {
    top: 0;
    left: 0;
    width: 100%;
    pointer-events: all
}

.common-drawer-overlay {
    position: absolute;
    height: 100%;
    background-color: rgba(0,0,0,.5)
}

.mobile-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,.5);
    z-index: 999
}

.map-drawer-content {
    position: absolute;
    height: 100vh;
    background-color: #fff;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,.15);
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    animation: .3s forwards slide-in
}

.map-drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid #dee2e6
}

.map-drawer-body {
    flex: 1;
    overflow: hidden;
    position: relative
}

.map-close-btn {
    position: absolute;
    top: 10px;
    right: 60px;
    z-index: 10;
    padding: 5px 20px;
    display: flex;
    background: #002d72;
    color: #fff;
    font-weight: 700;
    width: auto;
    height: auto;
    opacity: 1
}

@keyframes slide-in {
    to {
        transform: translateX(0)
    }
}

.map-drawer.closing .map-drawer-content {
    animation: .3s forwards slide-out
}

@keyframes slide-out {
    from {
        transform: translateX(0)
    }

    to {
        transform: translateX(-100%)
    }
}

.overflow-y-auto {
    overflow-y: auto
}

.overflow-x-hidden {
    overflow-x: hidden
}

.gm-style-iw.gm-style-iw-c {
    border: 2px solid #2687ee !important
}

.slider-range, .slider-track {
    top: 50%;
    transform: translateY(-50%);
    border-radius: 5px
}

.range-container {
    position: relative;
    width: 100%;
    height: 40px
}

.range-input input, .slider-range, .slider-track {
    height: 5px;
    position: absolute
}

.slider-track {
    width: 100%;
    background: #ddd
}

.slider-range {
    background: #0d6efd
}

.range-input {
    position: relative;
    width: 100%
}

    .range-input input {
        width: 100%;
        background: 0 0;
        appearance: none
    }

input[type=range]::-webkit-slider-thumb {
    height: 17px;
    width: 17px;
    border-radius: 50%;
    background: #0d6efd;
    pointer-events: auto;
    -webkit-appearance: none;
    cursor: pointer
}

input[type=range]::-moz-range-thumb {
    height: 17px;
    width: 17px;
    border-radius: 50%;
    background: #0d6efd;
    pointer-events: auto;
    -moz-appearance: none;
    cursor: pointer
}

.img-wrapper .img-fluid {
    height: 200px;
    object-fit: cover
}

.carousel-card__footer .badge {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -10px
}

.carousel-card__footer {
    transition: background .3s ease-in-out
}

    .carousel-card__footer:hover {
        background: #f2f2f1
    }

.bg-holder, .contact-banner::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover
}

.alert-success {
    color: #1a815c;
    background-color: #effaf4;
    border-color: #5dc298
}

.bg-success {
    color: #1a815c !important;
    background-color: #effaf4 !important;
    border: 1px solid #5dc298
}

.rotate-180 {
    transform: rotate(180deg)
}

.bg-holder {
    min-height: 100%;
    overflow: hidden;
    will-change: transform,opacity,filter;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    z-index: 0
}

.articles-banner, .articles-main, .bg-sky-blue {
    background: #dcf2ff
}

.articles-main {
    clip-path: polygon(100% 0px,100% 100%,0% 95%,0 100%,0 0)
}

.reviews-banner {
    background: url("/img/originals/webp/spiral.webp") 50%/cover no-repeat #dcf2ff;
    overflow: visible !important
}

.contact-banner {
    position: relative;
    background: #dcf2ff;
    overflow: hidden;
    z-index: 1
}

    .contact-banner::before {
        content: "";
        height: 100%;
        background-image: url("/img/originals/webp/map.webp");
        opacity: .1;
        z-index: -1
    }

.object-fit-cover {
    object-fit: cover
}

.card-content-overlay {
    background: linear-gradient(to top,rgba(0,0,0,.8) 0,rgba(0,0,0,.5) 70%,rgba(0,0,0,0) 100%)
}

.hero-top-btn {
    background: #f67a03;
    color: #fff;
    font-weight: 600;
    width: fit-content;
    padding: 6px 20px;
    border-radius: 10px;
    margin: 10px 0
}

#B1, #B2, #B3, #B4, #B5, #B6 {
    border: 1px solid rgba(0,0,0,.125) !important
}

.btn-primary:active {
    color: #fff;
    background-color: #002d72 !important;
    border-color: #002d72 !important
}

.banner {
    background-image: url(../img/originals/banner.png);
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat;
    width: 100%
}

.ellipse-container img {
    position: relative;
    z-index: 2
}

#B1 {
    grid-area: B1;
    background: #dcf2ff
}

#B2 {
    grid-area: B2
}

#B3 {
    grid-area: B3
}

#B4 {
    grid-area: B4
}

#B5 {
    grid-area: B5
}

#B6 {
    grid-area: B6
}

.bentoWrapper {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-areas: "B1 B2 B2" "B1 B3 B4" "B5 B5 B6";
    grid-gap: 20px
}

.bento {
    border-radius: 12px;
    padding: 20px
}

@media screen and (max-width:764px) {
    .bentoWrapper {
        grid-template-columns: 1fr;
        grid-template-areas: "B1" "B2" "B3" "B4" "B5" "B6"
    }
}

.contactfrm-wrapper {
    background: #dcf2ff;
    padding: 20px;
    border-radius: 1rem
}

.z-1 {
    z-index: 1 !important
}

.h-100vh {
    height: 100vh !important
}

.bloghero-gradient {
    background: linear-gradient(135deg,#002d72 0,#e1f3ff 100%)
}

.glass-effect {
    backdrop-filter: blur(10px);
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.2)
}

.pulse-animation {
    animation: 2s infinite pulse;
    display: inline-block
}

@keyframes pulse {
    0%,100% {
        transform: scale(1)
    }

    50% {
        transform: scale(1.05)
    }
}

.text-orange {
    color: #f67a03
}