/*  
  Name: Hotelshop  
  Description: Main stylesheet for hotelshop.com � travel protection and cancellation coverage site  
  Author: skytoursonline
  Version: 1.0  
  � 2025 HotelShop.com - All rights reserved  
*/

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

* {
    margin: 0;
    padding: 0;
}

html {
    overflow-x: hidden;
    scroll-behavior: smooth;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
    color: #222;
}

body {
    background-color: #fff;
    font-size: 14px;
    overflow-x: hidden;
    color: #2B2021;
    font-weight: 400;
    font-family: "Inter", sans-serif;
}

h6,
h4,
h4,
h3,
h2,
h1 {
    font-family: "Manrope", sans-serif;
}

.hotel_header {
    font-family: "Manrope", sans-serif;
}

.filter-item input[type=text] {
    border: 1px solid rgba(77, 77, 77, 0.79);
    border-radius: 30px;
    padding: 10px 20px;
}

/* Hedaer CSS */
.header_main {
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.15) !important;
    border-bottom: 1px solid #ddd !important;
    background: #fff !important;
    position: relative;
    z-index: 10;
}

.navbar-brand {}

.navbar-brand img {
    width: 220px;
}

.contact_image img {
    width: 30px;
}

.acessabilty_change {
    margin-right: 20px;
    border-right: 1px solid #ddd;
    padding-right: 20px;
    font-size: 16px;
    font-weight: 600;
    gap: 20px;
}

.contact_image {
    margin-right: 10px;
    padding: 8px;
    border: 1.5px solid #ddd;
    border-radius: 5px;
}

.contact_txt {}

.contact_txt span {
    font-size: 10px;
    color: rgba(43, 32, 33, 0.7);
}

.contact_txt b {
    font-weight: 700;
    font-size: 16px;

}

/* Search CSS */
.search_main {
    width: 100%;
    height: 330px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    
}

.serach_form {
    height: 108px;
    background-color: #fff;
    border-radius: 100px;
    margin: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    height: 100%;
    padding: 10px;
}

.search_input {
    border-radius: 100px;
    padding: 10px;
    display: flex;
    gap: 10px;
    align-items: center;
    border: 1px solid rgba(77, 77, 77, 0.5);
    position: relative;
}

.search_input input {
    border: none;
    outline: none;
}

.search_txt {
    display: flex;
    flex-direction: column;
}

.search_txt label {
    font-size: 10px;
}

.search_txt input {
    font-size: 16px;
}

.date_main {
    display: flex;
    gap: 5px;
    align-items: center;
}

.search_input.z-50 {
    width: 267px;
}

.search_input.z-40 {
    width: 240px;
}

.search_input.z-40 input {
    width: 100%;
}

.date_main input {
    width: 100%;
}

.search_button button:hover {
    background-color: #52879b;
}

.search_button button {
    background-color: #23a7d9;
    color: #fff;
    border: none;
    padding: 17px 30px;
    border-radius: 100px;
}

/* model */
.modal-content {
    border-radius: 20px;
}

.modal-header {
    border: none;
    padding-bottom: 0;
}

.display-select {
    border: 1px solid rgba(77, 77, 77, 0.79);
    padding: 15px 20px;
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    border-radius: 2px;
}

.display-select label {
    font-size: 10px;
}

.display-select select {
    border: none;
    outline: none;
}

.display-submit input[type="submit"] {
    background-color: #23a7d9;
    padding: 17px 20px;
    width: 100%;
    outline: none;
    border: none;
    border-radius: 100px;
    margin-top: 10px;
    color: #fff;
    font-weight: 500;
}

.navbar-light .navbar-toggler {

    border: none;
}

/* Hotel Main */
.hotels-main {}

.hotel-main-header {
    padding: 30px;
    text-align: center;
}

.hotel-main-header h1 {
    font-size: 36px;
    font-weight: 700;
    color: #2B2021;
}

.hotel-main-header span {
    font-size: 16px;
}

.hotel-main-header a {
    color: #23a7d9;
}

.hotel-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    /* grid-auto-rows: 300px; */
    gap: 10px;
}

.hotel-card {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    display: flex;
    border: 1px solid #DFE0E4;
    padding: 10px;

}

.hotel-img img {
    width: 178px;
    height: 200px;
    border-radius: 10px;
}

.hotel-info {
    padding-left: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.hotel-name {
    font-size: 16px;
    font-weight: 600;
}

.hotel-rating {
    padding: 10px 0;
}

.hotel-rating svg {
    width: 19px;
    height: 19px;
}

.hotel-location {
    font-size: 11px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.hotel-price b {
    font-size: 18px;
    font-weight: 700;
}

.hotel-price {
    text-align: right;
    margin-top: auto;
    display: flex;
    gap: 5px;
    justify-content: flex-end;
    align-items: center;
    color: #23A7D9;
}

a:hover {
    color: #FF2435;
    cursor: pointer;
}

.hotels-main {
    margin-bottom: 20px;
}

.trip-list {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
}

.h-2 {
    grid-row: span 2;
}

.w-2 {
    grid-column: span 2;
}

.trip-con {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    grid-auto-rows: 300px;
    gap: 10px;
}

a.trip-card {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    color: #fff;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: flex-start;
    align-items: end;
    padding: 20px;
    font-weight: 600;
}

.trip-main {
    margin-bottom: 20px;
}

.newslatter form {
    border-radius: 100px;
    border: 1px solid rgba(0, 0, 0, 0.37);
}

.newslatter form input {
    outline: none;
    border: none;
    padding: 20px;
    background-color: transparent;
    width: 400px;
}

.newslatter form input[type=button] {
    background-color: #23a7d9;
    color: #fff;
    outline: none;
    border: none;
    padding: 20px;
    border-radius: 100px;
    width: 150px;
}

.newslatter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;
}

.newslatter-main {
    border-top: 1px solid #ddd;
}

.newslatter-txt {
    width: 360px;
}

/* footer */
footer {
    background-color: #EEEEEE;
    padding: 20px 0;
}

footer img {
    width: 221px;
}

.footer-con {
    display: flex;
    gap: 100px;
}

footer img {
    width: 221px;
}

.footer-bio p {
    font-size: 16px;
    color: rgb(9 6 6 / 55%);
    margin-top: 20px;
}

.footer-bio {
    flex-basis: 45%;
}

.footer-menu {
    flex-basis: 55%;
    /* width: 100%; */
    display: flex;
    justify-content: space-between;
}

.footer-menu {}

ol,
ul {
    padding: 0;
}

.footer-menu ul li {
    margin-bottom: 10px;
}

.footer-menu-title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 10px;
}

.footer-more {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 50px;
}

.footer-more img {
    width: 100%;
}

.footer-more>div .footer-title-more {
    font-size: 18px;
    font-weight: 700;
}

.footer-more .footer-partner .footer-title-more {
    text-align: center;
}

.footer-more>div ul {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.footer-copy {
    display: flex;
    align-items: center;
    padding: 10px 0;
    margin-top: 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.33);
    justify-content: space-between;
}

.footer-copyright {
    font-size: 12px;
}

.footer-c-menu ul {
    display: flex;
    align-items: center;
    gap: 10px;
}

.search-title h1 {
    text-align: center;
    font-size: 36px;
    color: #fff;
    font-weight: 700;
}

/* Medica */

div#worldmap svg {
    width: 100%;
}

.search-title {
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0px;
    margin-bottom: 20px;
}

.search-title a {
    background-color: #23a7d9;
    color: #fff;
    border: none;
    padding: 17px 30px;
    border-radius: 100px;
    margin-top: 10px;
}

.search-title span {
    font-size: 16px;
}

.search-minimap {
    width: 100%;
    height: 300px;
    border-radius: 10px;
    background-image: url(images/map.png);
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.15) !important;
    position: relative;
}

.map-zoom {
    padding: 10px;
    position: absolute;
    top: 20px;
    right: 10px;
    z-index: 10;
    background-color: #fff;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.15) !important;
    border-radius: 5px;
}

.search-container {
    margin: 40px 0;
}

.map-view {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 15px;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    background-color: #fff;
}

.map-view a {
    color: #23A7D9;
}

.w-box-jj .checkmark {
    background-color: #FFFFFF;
}

.w-box-jj {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.w-jj-star {
    display: flex;
    gap: 0;
    align-items: center;
}

.w-jj-count {
    margin-left: auto;
}

.load-more {
    padding-top: 10px;
    text-align: center;
}

.load-more a {
    text-align: center;
    color: #23A7D9;
    font-size: 13px;
}

.INPcontainer {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 23px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.INPcontainer input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: transparent;
    border: 2px solid #23A7D9;
    border-radius: 5px;
}

.filter-roundmark .checkmark {
    border-radius: 50px !important;
}

/* On mouse-over, add a grey background color */
.INPcontainer:hover input~.checkmark {
    background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.INPcontainer input:checked~.checkmark {
    background-color: #23A7D9;
    border: 1.5px solid #23A7D9;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.INPcontainer input:checked~.checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.INPcontainer .checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.INPcontainer input[type="text"] {
    border: 2px solid rgba(241, 242, 243, 0.6);
    border-radius: 50px;
    padding: 10px 15px;
    position: relative;
    background: transparent;
    width: 100%;
}

.INPcontainer input[type="text"]::placeholder {
    color: #fff;
    font-size: 14px;
}

.btn-options input[type="radio"] {
    display: none;
}

.btn-options label {
    border: 2px solid var(--minput);
    border-radius: 50px;
    padding: 10px 15px;
    color: var(--text-color);
    background-color: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 47%;
    text-align: center;
}

.search-cards {
    border: 1px solid rgba(0, 0, 0, 0.18);
    display: flex;
    border-radius: 20px;
}

.search-card-img {
    width: 250px;
    height: 350px;
    border-radius: 20px;
}

.search-side {
    padding: 20px;
}

.upper-filter {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20px;
}

.search-side h4 {
    font-size: 24px;
    font-weight: 800;
}

.search-card-star {
    padding: 10px 0;
}

.search-card-star svg {
    width: 22px;
    height: 22px;
}

.search-card-map {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 10px;
}

.search-card-aminites {
    padding-bottom: 10px;
    display: flex;
    gap: 5px;
    align-items: center;
}

.search-card-aminites svg {
    width: 40px;
    height: 40px;
}

.search-card-price {
    display: flex;
    flex-direction: column;
}

.search-card-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
}

.search-card-price b {
    font-size: 24px;
    color: #23A7D9;
    font-weight: 800;
}

.search-card-link a {
    background-color: #23A7D9;
    color: #fff;
    padding: 12px 35px;
    border-radius: 100px;
    font-size: 16px;
}

/* Reset default styles */
.custom-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    background: #ddd;
    border-radius: 3px;
    outline: none;
    padding: 0;
    margin: 0;
}

/* WebKit (Chrome, Safari) */
.custom-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 20px;
    width: 20px;
    background: #23A7D9;
    border: none;
    border-radius: 50%;
    margin-top: -7px;
    /* aligns the thumb vertically */
    cursor: pointer;
    transition: background 0.3s ease;
}

/* Firefox */
.custom-range::-moz-range-thumb {
    height: 20px;
    width: 20px;
    background: #23A7D9;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.3s ease;
}

/* Track for Firefox */
.custom-range::-moz-range-track {
    height: 6px;
    background: #ddd;
    border-radius: 3px;
}

/* Hover effect */
.custom-range::-webkit-slider-thumb:hover,
.custom-range::-moz-range-thumb:hover {
    background: #23A7D9;
}

.filter-item {
    padding: 20px 0;
}

.filter-range-count {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
}

.filter-item input {
    width: 100%;
}

.upper-txt-main {
    font-size: 16px;
}

.uppersearch-btn {
    display: flex;
    align-items: center;
    gap: 10px;
}

.uppersearch-btn a {
    border-radius: 50px;
    padding: 10px 20px;
}

.btn1-a {
    background-color: #23A7D9;
    color: #fff;
}

.btn2-a {
    border: 1px solid #23A7D9;
    color: #23A7D9;
}

.filter-main-title {
    margin-top: 30px;
}

ul.pagination {
    justify-content: center;
    padding: 40px 0;
}

.page-item:first-child .page-link,
.page-item:last-child .page-link {
    /* border-top-left-radius: .25rem; */
    /* border-bottom-left-radius: .25rem; */
    border-radius: 100px !important;
}

a.page-link {
    /* padding: 20px; */
    border-radius: 133px;
    background: #23A7D9;
    color: #fff;
    margin: 10px;
    font-size: 20px;
}

/* room page CSS */
.room-header {
    padding: 20px 0;
}

.room-header h1 {
    font-size: 36px;
    line-height: 50px;
    font-weight: 800;
}

.room-stars img,
.room-map span {
    width: 25px;
    height: 25px;
}

.room-map {
    padding: 10px 0;
}

.room-map span {
    font-size: 16px;
}

.room-slider img {
    width: 100%;
    border-radius: 20px;
    height: 400px;
}

.room-mini-map img {
    height: 206px !important;
    width: 100%;
}

.room-contact a {
    display: flex;
    gap: 10px;
    align-items: center;
}

.room-bio {
    padding: 20px 0;
}

.room-contact-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.room-contact-item b {
    font-size: 20px;
}

.room-contact-item {
    font-size: 16px;
}

.room-contact-item span {
    color: rgba(43, 32, 33, 0.58);
}

.room-contact-item i {
    color: #E56564;
}

.demand {
    padding: 4px;
    border-radius: 5px;
    background-color: #E56564;
    display: inline-block;
    color: #fff;
    text-transform: uppercase;
    font-weight: 700;
}

.room-contact {
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

p {
    color: rgba(43, 32, 33, 0.7);
    font-size: 16px;
    line-height: 29px;
}

.room-date {
    border: 1px solid #ddd;
    border-radius: 10px;
}

.room-date-main {
    padding: 20px;
}

.room-date-main b:nth-of-type(2) {
    font-weight: 500;
}

.room-date div:nth-child(1) {
    border-bottom: 1px solid #ddd;
}

.room-date-main b {
    padding: 0px 40px;
}

.room-date-main img {
    width: 32px;
}

.room-main-con {
    padding: 30px 0;
}

.room-main-header h4 {
    font-size: 24px;
    font-weight: 700;
}

.room-card {
    display: flex;
    border-radius: 20px;
    border: 1px solid #ddd;
    margin-bottom: 20px;
}

.room-card-img img {
    width: 372px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    height: 100%;
}

.room-side-price {
    margin-left: auto;
}

.room-list-card {
    width: 300px;
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #ddd;
}


.room-side-list {
    margin-right: 37px;
    border-left: 1px solid #ddd;
    margin: 40px;
    padding-left: 20px;
}

.room-side-main-price {
    text-align: end;
    font-size: 32px;
    font-weight: 800;
    color: #23A7D9;
    padding: 10px 0;
}

.room-side-mai-button a {
    display: block;
    padding: 15px;
    background: #23A7D9;
    border-radius: 100px;
    text-align: center;
    text-transform: uppercase;
    color: #fff;
    font-weight: 600;
}

.room-card-main {
    color: #15120E;
    border: 1px solid #ddd;
    border-radius: 20px;
}

.modal-backdrop {
    background-color: white !important;
    opacity: 0.9 !important;
    /* Adjust the transparency level */
}

span.aminit-main-box-title {
    font-size: 14px;
    font-weight: 400;
    color: #15120E;
}

.box-green span {
    color: #227950;
}

.aminit-main-box {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 7px;
}

.aminit-main-box svg {
    width: 20px;
    height: 20px;
}

.price-main-box {
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: end;
}

.room-tax {
    color: #227950;
    font-size: 12px;
}

.room-price-night {
    font-size: 14px;
}

.review-img {
    border-radius: 20px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.btn-fullscreen {
    background-color: rgba(12, 14, 28, 0.56);
    color: #fff;
    height: 28px;
    width: 50px;
    border-radius: 5px;
    gap: 5px;
    align-items: center;

}

.btn-fullscreen:hover {
    background-color: rgba(12, 14, 28, 0.56);
}

.room-info-model .modal-header {
    border: none;
}

.room-info-model .modal-body {
    padding: 0 20px;
}

.room-info-model {
    --bs-modal-width: 720px;
}

.aminities-header-main {
    padding: 20px 0px;
}

.am-down-main {
    margin-bottom: 20px;
}

.am-list-main {
    padding: 5px 0;
    font-size: 14px;
    font-weight: 400;
    color: #15120E;
}

#search_hidden {
    display: none;
}

h1 {
    text-transform: none;
    text-align: unset;
}

.room-side-list div:nth-last-of-type(4) {
    border-bottom: 1px dotted #ddd;
}

.search_input {
    position: relative;
}

.search_icon_main {
    width: 20px;
    height: 20px;
}

.search_txt {
    flex-grow: 1;
    position: relative;
}

.z-100 {

    width: 400px;
}

.search_txt label {
    font-size: 12px;
    color: #888;
    display: block;
    margin-bottom: 3px;
}

#hotel_dropdown {
    display: none;
}

/* Guest Popup Floating Box */
#guestPopup {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 8px;
    width: 250px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    padding: 15px;
    z-index: 1000;
    display: none;
}

#guestPopup label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    font-size: 14px;
    color: #222;
}

#guestPopup input[type="number"] {
    width: 60px;
    padding: 5px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

/* Done Button */
#doneBtn {
    width: 100%;
    padding: 8px;
    background-color: #23A7D9;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s ease;
}

#doneBtn:hover {
    background-color: #0e5068;
}

/* Default: assume desktop */
#filtermain {
    display: block;
}

#btnfiltermain {
    display: none;
}

#btnfiltermain {
    display: none;
}

.paginationmain {
    padding: 40px 0;
    display: flex;
    align-items: center;
    gap: 15px;
}

.paginationmain a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 49.46px;
    height: 49.46px;
    font-size: 16px;
    padding: 10px 20px;
    font-weight: 700;
    background: rgba(217, 217, 217, 0.6);
    color: #002D5A;
    border-radius: 50%;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.15);
}

.paginationmain a.activepage {
    background: #23A7D9;
    color: #fff;
}

.paginationmain a {
    background: rgba(217, 217, 217, 0.6);
    color: #23A7D9;
}

div#worldmap img {
    width: 100%;
}

div#worldmap {
    padding: 40px 0;
}

.form-control {
    border: none;
    padding: 0px;
    color: #595151;
}

.modal-dialog {
    max-width: 700px;
}

.swiper {
    width: 100%;
    height: 100%;
}

.swiper-slide img {
    width: 100%;
    display: block;
    height: 350px;
}

.swiper-wrapper img {
    border-radius: 20px;
}

.aminities-header-main h5 {
    font-size: 18px;
}

.search-card-link:hover a,
.btn1-a:hover {
    background-color: white;
    border: 1px solid #23A7D9;
    color: #23A7D9;
    font-weight: 700;
}

.search-card-link:hover a svg path,
.btn1-a:hover svg path {
    fill: #23A7D9;
}

.btn2-a:hover {
    background-color: #23A7D9;
    border: 1px solid #23A7D9;
    color: #fff;
    font-weight: 700;
}

.btn2-a:hover svg path {
    fill: #fff;
}

.swiper-button-next:after,
.swiper-button-prev:after {
    font-size: 20px;
}

.swiper-button-next,
.swiper-button-prev {
    background: #fff;
    padding: 20px;
    border-radius: 100%;
}
.btn-modal{
    border: none;
}
@media screen and (max-width: 576px) {
    #btnfiltermain {
        align-items: center;
        gap: 8px;
        padding: 15px 15px;
        background-color: #23A7D9;
        color: white;
        font-weight: 500;
        border-radius: 100px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 20px;
        margin-top: 20px;
    }

    #filtermain {
        display: none;
    }

    #btnfiltermain {
        display: flex;
    }

    #filtermain.active {
        display: block;
    }

    .search-title h1 {
        text-align: center;
        font-size: 26px;
        color: #fff;
        margin-bottom: 20px;
    }

    .serach_form {
        width: 100%;
        height: 100%;
        background-color: #fff;
        border-radius: 20px;
        padding: 20px;
        margin: auto;
    }

    .serach_form {
        flex-direction: column;
    }

    .search_input,
    .search_input.z-50,
    .search_input.z-40,
    .search_button,
    .search_button button {
        width: 100%;
    }

    .search_main {
        height: 100%;
        padding: 40px;
    }

    .newslatter {
        flex-direction: column;
    }

    .newslatter form input {
        width: 264px;
    }

    .newslatter form {
        display: flex;
        align-items: center;
    }

    .newslatter-txt {
        width: 100%;
        padding: 0 50px;
    }

    .footer-con {
        flex-direction: column;
        gap: 20px;
    }

    .footer-menu {
        flex-direction: column;
    }

    .footer-more {
        flex-direction: column;
        align-items: flex-start;
    }

    .hotel-main-header h1 {
        font-size: 26px;
    }

    .hotel-main-header span {
        font-size: 14px;
    }

    .w-2 {
        grid-column: span 1;
    }

    .footer-c-menu a {
        font-size: 9px;
    }

    .search-card-img {
        width: 100%;
        object-fit: cover;
        height: 250px;
    }

    .search-cards {
        flex-direction: column;
    }

    .room-header h1 {
        font-size: 24px;
        line-height: 33px;
        font-weight: 800;
    }

    .room-map span {
        font-size: 14px;
    }

    .room-mini-map {
        margin-top: 20px;
    }

    p {
        color: rgba(43, 32, 33, 0.7);
        font-size: 14px;
        line-height: 25px;
    }

    .room-date-main {
        padding: 15px;
    }

    .room-date-main b {
        padding: 0px 21px;
    }

    .room-card {
        flex-direction: column;
    }

    .room-card-img img {
        width: 100%;
        border-radius: 20px;
    }

    .room-list-card {
        width: 100%;
    }

    .room-side-price {
        margin: 0;
    }

    .room-side-list {
        margin: 0;
        border: none;
        padding: 0 20px;
    }

    .room-side-mai-button a {
        margin-bottom: 20px;
    }

    .footer-more .footer-partner .footer-title-more {
        text-align: left;
    }

    .footer-more>div .footer-title-more {
        font-size: 14px;
        font-weight: 700;
        padding: 10px 0;
    }
}