* {
    font-family: "primary-font", sans-serif;
    /* font-family: "primary-azarmehr", sans-serif; */
}

.navbar-brand > img {
    height: 44px;
}

:root {
    /*--body-bg-color: #ffffff;*/
    --body-bg-color: #fafafa;
    --card-bg-color: #ffffff;
}
body {
    /*background-color: #e9e9e929;*/
    /*background-color: #f6f6f6;*/
    background-color: var(--body-bg-color);
}

.card-bg {
    background-color: var(--card-bg-color);
}

.navbar {
    /*border-radius: 20px;*/
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;

    /*box-shadow: 1px 21px 30px -31px rgba(0,0,0,0.87);*/
    /*-webkit-box-shadow: 1px 21px 30px -31px rgba(0,0,0,0.87);*/
    /*-moz-box-shadow: 1px 21px 30px -31px rgba(0,0,0,0.87);*/
    box-shadow: 0 2px 13px 5px rgba(0, 0, 0, 0.08);
}

.btn-mobile-menu {
    background-color: #ffffff;
    border: 1px solid #dedede;
    font-size: 20px;
    border-radius: 11px;
}

.mobile-menu-box {
    display: flex;
    flex-direction: column;
}

.mobile-menu-box .mobile-menu-item i {
    font-weight: 900;
}
.mobile-menu-box .mobile-menu-item {
    width: 100%;
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    padding: 16px 13px;
    border-bottom: 1px solid #e8e8e8;
    font-weight: 500;
    text-decoration: none;
    color: inherit;
}

.ringing {
    color: #00ae56 !important;
    animation: ring-animation 1s ease-in-out, pulse-animation 1s ease-in-out;
    font-weight: 600;
    font-size: 16px;
    transition: color 0.3s, font-size 0.3s;
}
@keyframes ring-animation {
    0% {
        transform: rotate(0);
    }
    10% {
        transform: rotate(15deg);
    }
    20% {
        transform: rotate(-15deg);
    }
    30% {
        transform: rotate(10deg);
    }
    40% {
        transform: rotate(-10deg);
    }
    50% {
        transform: rotate(5deg);
    }
    60% {
        transform: rotate(-5deg);
    }
    70% {
        transform: rotate(2deg);
    }
    80% {
        transform: rotate(-2deg);
    }
    90% {
        transform: rotate(1deg);
    }
    100% {
        transform: rotate(0);
    }
}
@keyframes pulse-animation {
    0% {
        text-shadow: 0 0 0px #00ae56;
    }
    50% {
        text-shadow: 0 0 12px #00ae56;
    }
    100% {
        text-shadow: 0 0 0px #00ae56;
    }
}

.dropdown-menu {
    border-radius: 12px;
}

.dropdown-menu > li > .dropdown-item {
    padding: 0.5rem 1rem;
}

.navbar .nav-link {
    font-weight: var(--font-weight-semibold);
    color: var(--bs-gray-800);
}

.d-flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.searchbar-background {
    width: 100%;
    border-radius: 35px;
    /* min-height: 300px; */
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;

    height: 48vh;
    min-height: 200px;

    display: flex;
    flex-direction: column;
    align-items: end;
    justify-content: end;

    background-image: url("/app-assets/images/banner-desktop.webp");
}
@media (max-width: 768px) {
    .searchbar-background {
        background: url("/app-assets/images/banner-mobile.webp");

        height: 87vh;
        min-height: 500px;
    }
}

.breadcrumb a {
    text-decoration: none;
}

.searchbar-box {
    /* padding: 284px 15px 20px; */
    width: 100%;
    /* margin: auto; */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    margin-bottom: 25px;
}

.searchbar-background.searchbar-small {
    /* padding-top: 50px; */
    height: 35vh;
    /* min-height: 200px; */
    justify-content: space-between;

    backdrop-filter: blur(3px);
}
@media (max-width: 768px) {
    .searchbar-background.searchbar-small {
        height: auto;
        min-height: 500px;
    }

    .searchbar-background.searchbar-small h1 {
        font-size: 27px !important;
        margin-bottom: 30px;;
    }
}

.searchbar-background.searchbar-blog-list {
    height: 35vh;
    justify-content: start;
}
.searchbar-background.searchbar-blog-show {
    height: 40vh;
    justify-content: start;
}

.searchbar-background h1 {
    padding-top: 60px;
    padding-left: 80px;
    padding-right: 80px;

    font-weight: bolder;
    font-size: 37px;
    color: var(--bs-gray-800);
    text-shadow: 0px 2px 20px #ffffff, 2px -2px 0 #ffffff, -2px 2px 0 #ffffff,
        -2px -2px 0 #ffffff, 2px 0px 0 #ffffff, 0px 2px 0 #ffffff,
        -2px 0px 0 #ffffff, 0px -2px 0 #ffffff;
}

.searchbar-box > .searchbar-area {
    margin: auto;
    width: 90%;
    padding: 25px 20px;
    border-radius: 25px;
    border: 2px solid var(--bs-gray-300);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(3px);
    background-color: #fafafa73;
    transition: all 0.5s ease;
}

.searchbar-box:hover .searchbar-area {
    background-color: #fafafa9c;
    backdrop-filter: blur(7px);
}

.searchbar-box > .searchbar-area .form-label {
    font-weight: 500;
}

.nice-select {
    width: 100%;
}

.nice-select .list {
    width: 100%;
    z-index: 1000 !important;
}

.main-slider.swiper .swiper-slide {
    z-index: -1 !important;
}

.main-slider.swiper .swiper-slide .slider-image {
    transition: all 0.2s ease-in-out;
}
.main-slider.swiper .swiper-slide .slider-image:hover {
    filter: contrast(140%);
}

.searchbar-box input,
.searchbar-box .nice-select {
    padding: 16px 13px;
    border-radius: 13px;
    border-radius: 13px;
    font-size: 18px;
    color: var(--bs-gray-800) !important;
    border: 2px solid var(--bs-gray-500);
}

.searchbar-box input:hover,
.searchbar-box .nice-select:hover {
    border: 2px solid var(--bs-primary-border-subtle);
}

.searchbar-box input:focus,
.searchbar-box .nice-select:focus {
    border: 2px solid var(--bs-primary);
    box-shadow: none;
}

.searchbar-box .nice-select {
    height: 63px;
    padding: 10px 13px;
}

.main-slider.swiper,
.main-hotel-slider.swiper {
    width: 100%;
    padding: 30px 0;
}

.main-slider.swiper .swiper-slide {
    height: 331px;
    object-fit: cover;
}

.main-slider.swiper .slider-image {
    width: 100%;
    height: 100%;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    border-radius: 24px;

    display: flex;
    align-items: end;
    padding: 20px;
    color: white;
}

.main-slider.swiper .slider-image h3 {
    font-size: 20px;
    font-weight: 900;
    text-decoration: none;
}

.main-slider.swiper .slider-image p {
    margin-bottom: 10px;
    font-weight: 400;
    font-size: 11px;
    text-decoration: none;
}

.page-section {
    margin-top: 50px;
    display: block;
}

.page-section h2 {
    font-size: 26px;
    line-height: 37px;
    font-weight: 900;
}

.page-section p {
    font-weight: 100;
}

/* MAIN HOTEL SLIDER */

.main-hotel-slider.swiper .swiper-slide {
    /* height: 331px; */
    object-fit: cover;

    border: 2px solid var(--bs-gray-300);
    border-radius: 12px;

    transition: all 0.2s ease-in-out;
    cursor: pointer;

    text-decoration: none;
    color: inherit;
}

.main-hotel-slider.swiper .swiper-slide .slider-content h3 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.main-hotel-slider.swiper .swiper-slide .slider-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    min-height: 220px;
}
.main-hotel-slider.swiper .swiper-slide:hover {
    -webkit-box-shadow: 0px 10px 13px -6px rgba(0, 0, 0, 0.48);
    box-shadow: 0px 10px 13px -6px rgba(0, 0, 0, 0.48);
}

.main-hotel-slider.swiper .slider-image {
    width: 100%;
    height: 200px;

    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;

    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.main-hotel-slider.swiper h3 {
    font-size: 17px;
    font-weight: 500;
}

.main-hotel-slider.swiper p {
    margin-bottom: 10px;
    font-weight: 400;
    font-size: 5px;
}
.main-hotel-slider.swiper .swiper-slide {
    background-color: var(--card-bg-color);
}
.main-hotel-slider.swiper .slider-content {
    padding: 10px 16px;
}
.main-hotel-slider.swiper .slider-content .address {
    font-weight: 100;
    font-size: 15px;
}
.main-hotel-slider.swiper .star {
    color: rgb(255 226 25);
}
.main-hotel-slider.swiper i {
    width: 18px;
    text-align: center;
}
.main-hotel-slider.swiper .slider-content .star-count {
    font-weight: 100;
    font-size: 15px;
}
.main-hotel-slider.swiper .slider-content span {
    font-size: 14px;
}
.main-hotel-slider.swiper .slider-content .price {
    font-weight: 900;
    font-size: 17px;
}

.main-hotel-slider.swiper .slider-content .emoji-body img {
    width: 24px;
    height: 24px;
}
.main-hotel-slider.swiper .slider-content .emoji-body span {
    font-weight: 100;
    font-size: 15px;
}

/* HOTEL LIST BOX */

.hotel-list-box {
}
.hotel-list-box .hotel-item {
}

a.link-normal {
    text-decoration: none;
    color: inherit;
}

.hotel-list-box .hotel-item {
    /* height: 331px; */
    object-fit: cover;
    background-color: var(--card-bg-color);

    border: 2px solid var(--bs-gray-300);
    border-radius: 12px;

    transition: all 0.2s ease-in-out;
    cursor: pointer;

    padding: 0;
}
.hotel-list-box .hotel-item:hover {
    -webkit-box-shadow: 0px 10px 13px -6px rgba(0, 0, 0, 0.48);
    box-shadow: 0px 10px 13px -6px rgba(0, 0, 0, 0.48);
}
.hotel-list-box .hotel-image {
    width: 100%;
    height: 200px;

    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;

    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}
.hotel-list-box h3 {
    font-size: 17px;
    font-weight: 500;
}
.hotel-list-box p {
    margin-bottom: 10px;
    font-weight: 400;
    font-size: 5px;
}
.hotel-list-box .hotel-content {
    padding: 10px 16px;
}
.hotel-list-box .hotel-content .address {
    font-weight: 100;
    font-size: 15px;
}
.hotel-list-box .star {
    color: rgb(255 226 25);
}
.hotel-list-box i {
    width: 18px;
    text-align: center;
}
.hotel-list-box .hotel-content .star-count {
    font-weight: 100;
    font-size: 15px;
}
.hotel-list-box .hotel-content span {
    font-size: 14px;
}
.hotel-list-box .hotel-content .price-box .price {
    font-weight: 900;
    font-size: 17px;
}
.hotel-list-box .hotel-content .emoji-body img {
    width: 24px;
    height: 24px;
}
.hotel-list-box .hotel-content .emoji-body span {
    font-weight: 100;
    font-size: 15px;
}

footer .mobile-box {
    background-color: var(--bs-gray-100);
    border: 2px solid var(--bs-gray-300);
    padding: 12px 12px;
    border-radius: 23px;
    font-size: 20px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: bold;
    gap: 10px;
}

footer .mobile-box .icon-box {
    /* padding: 5px 2px; */
    background-color: rgb(243 153 18 / 12%);
    border: 1px solid rgb(235 176 106);
    color: #f39912;
    font-size: 30px;
    border-radius: 18px;
    width: 50px;
    height: 50px;

    display: flex;
    align-items: center;
    justify-content: center;
}

/* BLOG SWIPER */
.blog-slider.swiper {
    width: 100%;
    padding: 30px 0;
}

.blog-slider.swiper .swiper-slide {
    /* height: 331px; */
    object-fit: cover;

    border: 2px solid var(--bs-gray-300);
    border-radius: 12px;

    transition: all 0.2s ease-in-out;
    cursor: pointer;
}
.blog-slider.swiper .swiper-slide:hover {
    -webkit-box-shadow: 0px 10px 13px -6px rgba(0, 0, 0, 0.48);
    box-shadow: 0px 10px 13px -6px rgba(0, 0, 0, 0.48);
}

.blog-slider.swiper .slider-image {
    width: 100%;
    height: 200px;

    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;

    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}
.blog-slider.swiper h4 {
    font-size: 17px;
    font-weight: 500;
}
.blog-slider.swiper .slider-content {
    padding: 10px 16px;
    background-color: var(--card-bg-color);
}
.blog-slider.swiper .slider-content span {
    font-weight: 100;
    font-size: 13px;
    line-height: 15px;
}

.searchbar-box .search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.searchbar-box button {
    padding: 18px 8px;
    width: 100%;
    /* height: 100%; */
    border-radius: 13px;
}

.main-slider.swiper .slider-image {
    z-index: 2 !important;
}

.datepicker-plot-area {
    width: 260px !important;
    padding: 12px !important;
    box-shadow: 0 0.25rem 1rem rgba(165, 163, 174, 0.45) !important;
    border: 0 !important;
    border-radius: 20px !important;
}

.datepicker-plot-area .datepicker-navigator .pwt-btn-prev,
.datepicker-plot-area .datepicker-navigator .pwt-btn-next {
    visibility: hidden !important;
}

.datepicker-plot-area .datepicker-navigator .pwt-btn-prev::before,
.datepicker-plot-area .datepicker-navigator .pwt-btn-next::before {
    background: #2d6efd1c !important;
    border-radius: 10px !important;
    padding: 8px 12px !important;
    font-family: "Font Awesome 6 Pro" !important;
    visibility: visible !important;
    font-size: 14px !important;
    color: #2d6efd9e !important;
    transition: all 0.2s ease-in-out !important;
}
.datepicker-plot-area .datepicker-navigator .pwt-btn-prev:hover::before,
.datepicker-plot-area .datepicker-navigator .pwt-btn-next:hover::before {
    background: #2d6ffd3f !important;
    color: #2d6ffdb8 !important;
}
.datepicker-plot-area .datepicker-navigator .pwt-btn-prev::before {
    content: "\f105" !important;
}

.datepicker-plot-area .datepicker-navigator .pwt-btn-next::before {
    content: "\f104" !important;
}

.datepicker-plot-area .datepicker-navigator .pwt-btn-switch {
    font-size: 14px !important;
}

.datepicker-plot-area .datepicker-day-view .table-days td {
    padding: 2px !important;
}

.datepicker-plot-area .datepicker-day-view .table-days td span {
    height: 30px !important;
    line-height: 30px !important;
}

.datepicker-plot-area .datepicker-day-view .table-days td span {
    border-radius: 6px !important;
}

.datepicker-plot-area .datepicker-day-view .table-days td.selected span,
.datepicker-plot-area .datepicker-year-view .year-item.selected,
.datepicker-plot-area .datepicker-month-view .month-item.selected {
    background-color: #2d6efdd9 !important;
    text-shadow: none !important;
    font-weight: 600 !important;
}

.datepicker-plot-area .datepicker-day-view .table-days td.disabled span,
.datepicker-plot-area .datepicker-year-view .year-item-disable,
.datepicker-plot-area .datepicker-month-view .month-item-disable {
    background-color: #f1f1f17a !important;
    text-decoration: line-through !important;
    color: #ccc !important;
}

.datepicker-plot-area .datepicker-day-view .table-days td span {
    transition: all 0.12s ease-in-out !important;
    font-size: 15px !important;
}

.datepicker-plot-area
    .datepicker-day-view
    .table-days
    td:not(.selected):not(.disabled)
    span:hover {
    background-color: #2d6efd17 !important;
    color: #2d6efd !important;
    border: 1px solid #2d6efd !important;
}

.datepicker-plot-area .toolbox .pwt-btn-today {
    background-color: rgb(45 110 253 / 4%) !important;
    border: 1px solid #2d6efd59 !important;
    font-size: 11px !important;
    border-radius: 6px !important;
    height: auto !important;
    padding: 3px 6px !important;
    transition: all 0.2s ease-in-out !important;
}

.datepicker-plot-area .toolbox .pwt-btn-today:hover {
    background-color: rgb(45 110 253 / 12%) !important;
    border: 1px solid #2d6efd !important;
    color: #2d6efd !important;
}

/* NICE SELECT LIST */

.nice-select .list {
    box-shadow: 0 0.25rem 1rem rgba(165, 163, 174, 0.45) !important;
    padding: 6px !important;
    border: 0 !important;
    border-radius: 20px !important;

    max-height: 260px !important;
    overflow-y: hidden !important;
}

.nice-select .list .option {
    padding: 6px 12px !important;
    transition: all 0.1s ease-in-out !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    line-height: 30px !important;
}
.nice-select .list .option:hover {
    background-color: #2d6efd1f !important;
    color: #2d6efd !important;
}

.nice-select .list .option.selected {
    background-color: #2d6efd1f !important;
    color: #2d6efd !important;
}

/* TYPE-HEAD SEARCH LIST */
.twitter-typeahead .tt-menu {
    /* padding: 0 !important;
    margin: 0 !important;
    border-radius: 20px !important; */
    padding: 6px !important;
    border: 0 !important;
    margin: 0 !important;
    border-radius: 20px !important;
}

.twitter-typeahead .tt-menu .tt-suggestion {
    /* margin: 1px;
    padding: 8px 15px;
    border-radius: 18px; */
    padding: 6px 12px !important;
    transition: all 0.1s ease-in-out !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    margin: 0 !important;
    line-height: 30px !important;
}
.twitter-typeahead .tt-menu .tt-suggestion:hover,
.twitter-typeahead .tt-menu .tt-suggestion.tt-cursor {
    /* color: #2d6efd;
    background-color: rgb(45 110 253 / 12%); */
    background-color: #2d6efd1f !important;
    color: #2d6efd !important;
}

.sidebar-filder-box {
    padding: 17px;
    background-color: #ffffff;
    border: 2px solid var(--bs-gray-200);
    border-radius: 12px;
}
.sidebar-filder-box .sidebar-section-header {
    background-color: var(--bs-gray-100);
    border-radius: 8px;
    border: 2px solid var(--bs-gray-300);
    padding: 10px;
    margin-top: 20px;
}
.sidebar-filder-box .filter-content-box {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 25px;
}
.sidebar-filder-box .sidebar-section-header h6 {
    font-weight: 600;
    font-size: 15px;
    margin: 0;
}

.sidebar-filder-box .form-check-input[type="checkbox"] {
    padding: 10px;
    border-radius: 8px;
}
.sidebar-filder-box .form-check {
    display: flex;
    gap: 10px;
    align-items: flex-end;
}

.hotel-items-box {
    gap: 15px;
    display: flex;
    flex-direction: column;
}

.hotel-items-box .hotel-item:hover {
    -webkit-box-shadow: 0px 10px 13px -6px rgba(0, 0, 0, 0.48);
    box-shadow: 0px 10px 13px -6px rgba(0, 0, 0, 0.48);
    border: 1px solid var(--bs-gray-500);
}

.hotel-items-box .hotel-item {
    padding: 20px;
    border-radius: 20px;
    border: 2px solid var(--bs-gray-300);
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    margin-top: 10px;
    background-color: #ffffff;
    transition: all 0.2s ease-in-out;
}

.hotel-items-box .hotel-item .hotel-image {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 200px;
    border-radius: 20px;
}

.hotel-items-box .hotel-item .hotel-btn {
    width: 100%;
    padding: 13px 8px;
    border-radius: 13px;
}

.hotel-items-box .hotel-item .price-box {
    font-size: 18px;
}

.hotel-items-box .hotel-item .price-box .price {
    font-weight: 900;
    font-size: 21px;
}
.hotel-items-box .hotel-item .address {
    font-weight: 100;
    font-size: 15px;
}
.hotel-items-box .hotel-item .star {
    color: rgb(255 226 25);
}
.hotel-items-box .hotel-item i {
    width: 18px;
    text-align: center;
}
.hotel-items-box .hotel-item .star-count {
    font-weight: 100;
    font-size: 15px;
}
.hotel-items-box .hotel-item .emoji-body img {
    width: 24px;
    height: 24px;
}
.hotel-items-box .hotel-item .emoji-body span {
    font-weight: 100;
    font-size: 15px;
}
.hotel-items-box .hotel-item .discount-box {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: end;
}
.hotel-items-box .hotel-item .discount-box .discount {
    background-color: #ffeea3;
    color: #939700;
    font-weight: 600;
    padding: 7px;
    border: 1px solid #b1b600;
    border-radius: 9px;
}
.hotel-items-box .hotel-item .discount-box .price {
    color: var(--bs-gray-600);
    text-decoration: line-through;
}
.hotel-items-box .hotel-item .special-label-box {
    display: flex;
    align-items: top;
    justify-content: end;
}
.hotel-items-box .hotel-item .special-label-box .badge {
    background-color: #2d6efd1f;
    color: #2d6efd;
    font-weight: 600;
    padding: 7px;
    border: 1px solid #2d6efd;
}

.hotel-sort-box {
    display: flex;
    gap: 6px;
}
.hotel-sort-box .sort-btn {
    border-radius: 20px;
    background: rgb(245 252 255);
    color: #2d6efd;
    border: 1px solid #2d6efd;
    font-size: 15px;
    padding: 6px 9px;
    transition: all 0.2s ease-in-out;
}
.hotel-sort-box .sort-btn.active {
    color: rgb(245 252 255);
    background: #2d6efd;
    font-weight: 600;
}
.hotel-sort-box .sort-btn:not(.active):hover {
    background: #dce7ff;
    font-weight: 550;
}
/*
.hotel-gallery-box {
}

.hotel-gallery-box .gallery-item {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 400px;
    border-radius: 15px;
}

.hotel-gallery-box .gallery-item-small {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 186px;
    border-radius: 15px;
}
.hotel-gallery-box .gallery-item-small.muted {
    display: flex;
    align-items: center;
    justify-content: center;
}
.hotel-gallery-box .gallery-item-small.muted .btn {
    border-radius: 20px;
    font-weight: 600;
    border: 1px solid #dbdbdb;
    color: #ffffff;
    background: #ffffff45;
}

.hotel-gallery-box .col-lg-6 {
    padding: 0 5px;
}

.hotel-gallery-box .gallery-item-small.muted .btn:hover {
    background-color: #ffffff;
    color: #2d6efd;
} */

.hotel-gallery {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    /* grid-template-columns: repeat(4,minmax(0,1fr)); */
    grid-template-rows: repeat(4, 5vw);
    /* grid-template-rows: repeat(4,minmax(0,1fr)); */
    grid-gap: 11px;
}
.hotel-gallery .gallery__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 25px;
}
.hotel-gallery .gallery__item {
    margin: 0;
}

.hotel-gallery .gallery__item--1 {
    grid-column-start: 5;
    grid-column-end: 7;
    grid-row-start: 1;
    grid-row-end: 3;
}
.hotel-gallery .gallery__item--2 {
    grid-column-start: 7;
    grid-column-end: 9;
    grid-row-start: 1;
    grid-row-end: 3;
}
.hotel-gallery .gallery__item--3 {
    grid-column-start: 1;
    grid-column-end: 5;
    grid-row-start: 1;
    grid-row-end: 5;
}
.hotel-gallery .gallery__item--4 {
    grid-column-start: 5;
    grid-column-end: 7;
    grid-row-start: 3;
    grid-row-end: 5;
}
.hotel-gallery .gallery__item--5 {
    grid-column-start: 7;
    grid-column-end: 9;
    grid-row-start: 3;
    grid-row-end: 5;

    display: flex;
    align-items: center;
    justify-content: center;
}
.hotel-gallery .gallery__item--5 img {
    filter: brightness(0.4);
}
.hotel-gallery .gallery__item--5 span,
.hotel-gallery .gallery__item--5 span:active {
    position: absolute;
    border: 1px solid var(--bs-white);
    border-radius: 20px;
    color: var(--bs-white);
    font-weight: 400;
}
.hotel-gallery .gallery__item--5 span:hover {
    background-color: rgba(255, 255, 255, 0.394);
}

h1.hotel-title {
    font-weight: 500 !important;
    font-size: 28px !important;
    color: var(--bs-dark-text-emphasis) !important;
}

.hotel-info-box {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hotel-info-box .address {
    font-weight: 100;
    font-size: 17px;
}
.hotel-info-box .star {
    color: rgb(255 226 25);
}
.hotel-info-box i.fa-location-dot,
.hotel-info-box i.fa-star,
.hotel-info-box i.fa-hands-heart {
    font-size: 25px;
    text-align: center;
}
.hotel-info-box .star-count {
    font-weight: 100;
    font-size: 15px;
}
.hotel-info-box .emoji-body img {
    width: 25px;
    height: 25px;
    margin: 0 10px;
}
.hotel-info-box .emoji-body span {
    font-weight: 100;
    font-size: 15px;
}

.page-section h2.hotel-section-title {
    font-size: 20px;
    font-weight: 600;
}

/* .hotel-facilities-toggle-btn {
    padding: 8px 12px;
    font-size: 14px;
    background-color: #eaf8f0;
    border-radius: 20px;
    color: #33a150;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto;
}
.hotel-facilities-toggle-btn:hover {
    background-color: #def5e8;
} */

.hotel-facilities-box .facility-items-inner {
    position: relative;
    overflow: hidden;
    transition: max-height 0.4s ease;
    max-height: 148px;
}

.hotel-facilities-box .bottom-shadow {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2em;
    background: linear-gradient(to top, var(--body-bg-color), transparent);
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.hotel-facilities-box .hotel-facilitty-item-box {
    font-size: 15px;
    color: var(--bs-gray-600);

    display: flex;
    align-items: center;
    justify-content: start;
    gap: 10px;
}
.hotel-facilities-box .hotel-facilitty-item-box i {
    font-size: 20px;
    color: #4f4f4f;
}

.hotel-rules-box p {
    line-height: 30px;
}

.hotel-rules-box .hotel-rules-content-checkin,
.hotel-rules-box .hotel-rules-content-checkout {
    padding: 10px 20px;
    border-radius: 12px;
    background: #f9f9f9;
    color: #6a6a6a;
    border: 1px solid #dbdbdb;
    font-size: 15px;
    display: flex;
    gap: 8px;
    align-items: center;
}

.hotel-rules-box .hotel-rules-content-checkin i,
.hotel-rules-box .hotel-rules-content-checkout i {
    font-size: 22px;
    font-weight: bolder;
}

.hotel-rules-box .hotel-rules-content-checkin i {
    color: #41a823;
}

.hotel-rules-box .hotel-rules-content-checkout i {
    color: #ff0000;
}

.hotel-rules-sub-title {
    font-size: 17px;
    font-weight: 600;
}

.hotel-map {
    height: 280px;
    border-radius: 15px;
}

.hotel-mini-map {
    min-height: 220px;
    height: 100%;
    border-radius: 15px;
}

.hotel-mini-map-info {
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background: rgba(255, 255, 255, 0.85);
    padding: 10px;
    font-size: 14px;
    border-radius: 15px;
    z-index: 500;
}

.hotel-rooms-box {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.hotel-rooms-box .hotel-room-item > div {
    padding: 0;
}
.hotel-rooms-box .hotel-room-item .room-title {
    font-weight: 500;
    font-size: 19px;
    margin: 0;
    padding: 0;

    /*truncate*/
    /*white-space: nowrap;*/
    /*overflow: hidden;*/
    /*text-overflow: ellipsis;*/
    max-width: 400px;
}
.hotel-rooms-box .hotel-room-item .room-capacity-box {
    padding: 0px 10px;
    border-radius: 11px;
    background: #f2981124;
    color: #da8608;
    font-size: 16px;
    width: fit-content;
}
.hotel-rooms-box .hotel-room-item .room-diet-box i {
    color: #f29911;
}
.hotel-rooms-box .hotel-room-item .room-diet-box {
    color: #474747;
}
.hotel-rooms-box .hotel-room-item .room-btn {
    padding: 12px 21px;
    font-size: 17px;
    font-weight: 500;
    width: 100%;
    border-radius: 12px;
}
button.btn-primary:not(.search-btn) {
    padding: 12px 21px;
    font-size: 17px;
    font-weight: 500;
    border-radius: 12px;
}
.hotel-rooms-box .hotel-room-item .room-price-for-txt {
    color: #6c6c6c;
    padding-bottom: 10px;
    margin: 0;
}
.hotel-rooms-box .hotel-room-item .room-price-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-bottom: 10px;
}
.hotel-rooms-box .hotel-room-item .room-price-box .price {
    font-size: 26px;
    font-weight: 900;
    line-height: 30px;
}
.hotel-rooms-box .hotel-room-item .room-price-box .currancy {
}
.hotel-rooms-box .hotel-room-item .room-night-box i {
    color: #2348da;
}
.hotel-rooms-box .hotel-room-item .btn-room-show-facility {
    color: #2348da;
    padding: 0;
}
.hotel-rooms-box .hotel-room-item .btn-room-show-facility:hover {
    background: #2d6ffd24;
    cursor: pointer;
}
.hotel-rooms-box .hotel-room-item .btn-room-show-facility i {
    color: #ff67e2;
}
.hotel-rooms-box .hotel-room-item {
    border: 2px solid var(--bs-gray-300);
    border-radius: 15px;
    padding: 20px;
    transition: all 0.2s ease-in-out;
}
.hotel-rooms-box .hotel-room-item .room-discount-badge {
    padding: 2px 1px;
    background: #c0ffc3;
    color: #0cb300;
    font-size: 17px;
    font-weight: 300;
}
.hotel-rooms-box .hotel-room-item {
    background-color: #ffffff;
}
.hotel-rooms-box .hotel-room-item:hover {
    box-shadow: 0px 10px 13px -6px rgba(0, 0, 0, 0.48);
}
.hotel-rooms-box .hotel-room-item .hotel-image-box {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 160px;
    height: 160px;
    border-radius: 12px;
}
.hotel-rooms-search-box {
    position: sticky;
    top: 0;

    /*background-color: var(--bs-gray-100);*/
    background-color: #ffffff;
    border: 2px solid var(--bs-gray-300);
    padding: 18px 15px;
    border-radius: 15px;

    display: flex;
    flex-direction: column;
    gap: 7px;
}

.hotel-rooms-search-box input,
.hotel-rooms-search-box .nice-select {
    padding: 16px 13px;
    border-radius: 13px;
    border-radius: 13px;
    font-size: 18px;
    color: var(--bs-gray-800) !important;
    border: 2px solid var(--bs-gray-500);
    width: 100%;
}

.hotel-rooms-search-box input:hover,
.hotel-rooms-search-box .nice-select:hover {
    border: 2px solid var(--bs-primary-border-subtle);
}

.hotel-rooms-search-box input:focus,
.hotel-rooms-search-box .nice-select:focus {
    border: 2px solid var(--bs-primary);
    box-shadow: none;
}

.hotel-rooms-search-box .nice-select {
    height: 63px;
    padding: 10px 13px;
}

.hotel-rooms-search-box .form-label {
    font-weight: 100;
}

.hotel-rooms-search-box .nice-select {
    width: 100%;
}

.hotel-rooms-search-box .nice-select .list {
    width: 100%;
    z-index: 1000 !important;
}
.hotel-rooms-search-box .nice-select {
    height: 63px;
    padding: 10px 13px;
}

.hotel-rooms-search-box .search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.hotel-rooms-search-box button {
    padding: 18px 8px;
    width: 100%;
    /* height: 100%; */
    border-radius: 13px;
}
.reservation-step-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 15px;
}
.reservation-step-box .step-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.reservation-step-box {
}
.reservation-step-box .reservation-step-item {
    padding: 10px;
    border-radius: 10px;
    width: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.reservation-step-box .reservation-step-item.active {
    border: 1px solid rgb(35, 175, 42);
    background-color: rgba(86, 204, 71, 0.362);
    color: #21570f;
}
.reservation-step-box .reservation-step-item.passed {
    border: 1px solid rgb(35, 175, 42);
    background-color: rgb(178 255 168 / 6%);
    color: #21570f;
}
.reservation-step-box .reservation-step-item.inactive {
    border: 1px solid rgb(227, 227, 227);
    background-color: rgba(215, 215, 215, 0.08);
    color: #b9b9b9;
}
.reservation-step-box .reservation-step-item i {
    font-size: 13px;
}
.reservation-step-box .reservation-step-item .title {
}
.page-section h1 {
    font-weight: 600;
    font-size: 22px;
}
.page-section h2 {
    font-weight: 600;
    font-size: 20px;
}

.page-section.section-form {
    border: 2px solid var(--bs-gray-300);
    border-radius: 15px;
    padding: 15px 25px;
}
.form-label {
    font-weight: 100;
}

.form-control {
    padding: 11px 13px;
    border-radius: 13px;
    border-radius: 13px;
    font-size: 18px;
    color: var(--bs-gray-800);
    border: 2px solid var(--bs-gray-400);
}
.form-control:focus {
    border: 2px solid var(--bs-primary);
    box-shadow: none;
}

.nice-select {
    height: 53px;
    padding: 6px 13px;
    border-radius: 13px;
    border-radius: 13px;
    font-size: 18px;
    color: var(--bs-gray-800);
    border: 2px solid var(--bs-gray-400);
    width: 100%;
}

.nice-select:hover {
    border: 2px solid var(--bs-primary-border-subtle);
}

.nice-select:focus {
    border: 2px solid var(--bs-primary);
    box-shadow: none;
}
.nice-select .list {
    width: 100%;
    z-index: 1000 !important;
}

.prepare_reserve-sidebar-hotel-image {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    width: 190px;
    height: 150px;
    border-radius: 20px;
}
.checkin-icon {
    color: #41a823;
    font-size: 22px;
    font-weight: bolder;
}
.checkout-icon {
    color: #ff0000;
    font-size: 22px;
    font-weight: bolder;
}
.night-icon {
    color: #2348da;
}
.person-icon {
    color: #dd8c26;
    font-size: 20px;
}
.person-box {
    background-color: rgb(252, 255, 201);
    padding: 3px 5px;
    border-radius: 10px;
}
.prepare-reservation-submit-btn {
    padding: 18px 8px;
    width: 100%;
    border-radius: 13px;
}
.prepare-reservation-back-btn {
    padding: 12px 14px;
    width: 100%;
    border-radius: 13px;
}
.reserve-sidebar-payable-price-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.reserve-sidebar-payable-price-box .title {
    font-size: 20px;
}
.reserve-sidebar-payable-price-box .price-area {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.reserve-sidebar-payable-price-box .price-area .price {
    font-size: 25px;
    font-weight: 600;
}
.reserve-sidebar-payable-price-box .price-area .currency {
}
.countdown-box {
    padding: 6px 80px;
    font-weight: 900;
    font-size: 35px;
    border-radius: 30px;
    text-align: center;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 17px;
}
.countdown-box i {
    font-size: 35px;
}

.countdown-box.counting {
    background: #c0c0c040;
    color: #727272;
    border: 1px solid #919191;
}
.countdown-box.counting i {
    color: #c7c7c7;
}

.countdown-box.error {
    background: #bf2f2f40;
    color: #991c1c;
    border: 1px solid #991c1c;
}
.countdown-box.error i {
    color: #c58383;
}

.countdown-box.success {
    background: #2fbf4c40;
    color: #1c9935;
    border: 1px solid #1c9935;
}
.countdown-box.success i {
    color: #83c586;
}

.room-show-facility-box {
    display: flex;
    align-items: center;
    gap: 5px;
}

.accordion .accordion-button:focus {
    box-shadow: none;
}

div.divider {
    width: 100%;
    height: 1px;
    background-color: #e0e0e0;
    margin-top: 2rem;
}

/* .hotel-location-in-map-btn {
    padding: 8px 12px;
    font-size: 14px;
    background-color: #eaf8f0;
    border-radius: 20px;
    color: #33a150;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto;
}
.hotel-location-in-map-btn i {
    font-size: 14px;
}
.hotel-location-in-map-btn:hover {
    background-color: #def5e8;
} */

.leaflet-touch .leaflet-bar a:first-child {
    border-top-left-radius: 12px !important;
    border-top-right-radius: 12px !important;
}
.leaflet-touch .leaflet-bar a:last-child {
    border-bottom-left-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
}
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
    border-radius: 12px;
    /*border: none !important;*/
    /*box-shadow: 1px -1px 13px 1px rgba(0,0,0,0.75) !important;*/
    /*-webkit-box-shadow: 1px -1px 13px 1px rgba(0,0,0,0.75);*/
    /*-moz-box-shadow: 1px -1px 13px 1px rgba(0,0,0,0.75);*/
}
.btn-label-primary {
    padding: 8px 12px;
    font-size: 14px;
    background-color: #e1e8f2;
    border-radius: 13px;
    color: #0061f6;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease-out;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto;
}
.btn-label-primary:hover {
    background-color: #0061f6;
    color: #e1e8f2;
}
footer .footer-head {
    background-color: #1f58a926;
    padding: 20px 10px;
    border-radius: 20px;
    border: 1px solid #1f58a9;
}

.btn-show-more-secondary {
    padding: 8px 12px;
    font-size: 14px;
    background-color: #89aefb59;
    border-radius: 20px;
    /*border: #3b3146;*/
    color: #1f58a9;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s;
    border: 1px solid #1f58a9;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto;
}

.btn-show-more-secondary:hover {
    background-color: rgba(137, 174, 251, 0.82);
}

.text-second-primary {
    color: #f39912;
}

.banner-overlay {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 32px;
}
.banner-overlay img {
    transition: filter 0.4s ease, transform 0.4s ease;
    display: block;
    width: 100%;
    border-radius: 20px;
}
.banner-overlay:hover img {
    filter: brightness(1.1) contrast(1.1) saturate(1.2);
    transform: scale(1.03);
}
.banner-overlay::after {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0.2),
        rgba(255, 255, 255, 0)
    );
    transform: skewX(-20deg);
    transition: left 0.5s ease;
    pointer-events: none;
}
.banner-overlay:hover::after {
    left: 125%;
}
.banner-overlay.disabled {
    z-index: -1 !important;
    pointer-events: none !important;
}

.shine-loop {
    position: relative;
    overflow: hidden;
    z-index: 1;
}
.shine-loop::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        120deg,
        rgba(255, 255, 255, 0.25) 0%,
        rgba(255, 255, 255, 0.05) 80%
    );
    transform: skewX(-20deg);
    animation: shineEffect 5.5s ease-in-out infinite;
    pointer-events: none;
    z-index: 2;
    filter: blur(2px);
    backdrop-filter: blur(2px);
    border-radius: inherit;
    opacity: 0.8;
}
@keyframes shineEffect {
    0% {
        left: -100%;
        opacity: 0;
    }
    3% {
        left: -100%;
        opacity: 0.5;
    }
    10% {
        left: 100%;
        opacity: 1;
    }
    13% {
        left: 100%;
        opacity: 0;
    }
    100% {
        left: 100%;
        opacity: 0;
    }
}

.page-description * {
    line-height: 30px;
}
.page-description h2 {
    font-size: 20px;
}
.page-description h3 {
    font-size: 18px;
}
.page-description p {
    font-size: 16px;
}

.breadcrumb .breadcrumb-item {
    font-size: 15px;
    color: #0d6efd;
}

.breadcrumb .breadcrumb-item.active {
    color: #21252999;
}

.hotel-rate-box {
    background-color: #0d6efd;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auth;
    text-align: center;
    font-weight: 900;
    color: #ffff;
    width: auto;
    padding: 10px 10px;
    border-radius: 8px;
}

.grayscale {
    filter: grayscale(1);
}