body {
    width: 100% !important;
    height: 100%;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    font-family: "Poppins", sans-serif;
    background-color: #212121;
    touch-action: manipulation;
}
#content {
    height: 100dvh;
    overflow-y: auto;
    width: 100dvw;
    overflow-x: hidden;
}

main {
    margin: 0 !important;
    min-height: 50dvh;
}

#notFoundPage,
#errorPage {
    width: 100%;
    height: 100%;
    background-color: transparent;
}

.material-symbols-rounded {
    font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
}

.rounded-img-container img {
    height: auto;
    width: 50px;
    object-fit: cover;
    border-radius: 50%;
    border: 1px solid white;
}

.rounded-img-container.big-img img {
    height: auto;
    width: 100px;
}
.dm-playfair-text-regular {
    font-family: "Playfair Display", serif;
}

.row,
footer {
    margin: 0 !important;
}

.tab-pane {
    opacity: 0;
    height: 0;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
}
.tab-pane.show {
    height: max-content;
    opacity: 1;
}

/* width */

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #888;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #f1f1f1;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #fff;
}

/* end menu icon */
#offcanvasMenuBtn:focus,
#offcanvasMenuBtn {
    border: none !important;
}

header:not(.masterhead, #homestay-view) {
    background-image: url("https://www.transparenttextures.com/patterns/diagonal-striped-brick.png");
    min-height: 250px;
}

/* homepage */

.masterhead {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-bottom: 30px;
}

.masterhead .card {
    width: 100%;
    height: 100%;
}

.masterhead img {
    object-position: center;
}

#choose-us .card {
    width: 18rem;
}

@media (max-width: 991.98px) {
    #choose-us .card {
        width: 90%;
    }
}
/* redesign input text */

.glass-background {
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5.7px);
    -webkit-backdrop-filter: blur(5.7px);
}

.glass-background-btn {
    border: 1px solid #777 !important;
    padding: 5px 20px;

    transition: all 0.5;
}

.glass-background-btn:hover {
    background: white;
    color: #212121;
}

.gold-glass-bg {
    background: rgba(214, 173, 96, 0.48) !important;
}
.white-glass-bg {
    background: rgba(212, 211, 211, 0.08) !important;
}
.black-glass-bg {
    background: rgba(43, 43, 43, 0.43) !important;
}

.modal-title {
    font-size: medium;
    margin-left: auto;
}

/* search country  */

/* #choose-us .card {
   max-width:300px;
} */

/* contact ws btn */

#prev-btn,
#next-btn {
    border-radius: 20%;
    color: white;
    background-color: transparent;
    padding: 5px;
    height: 30px;
    width: 30px;
    border-color: transparent;
    font-weight: 600;
    font-size: small;
}

#prev-btn:hover,
#next-btn:hover {
    color: #4f4537;
}

.view-image image {
    cursor: pointer !important;
}
.modal-content {
    background-color: #212121;
}

@media (max-width: 991.98px) {
    .modal-content {
        border-radius: 0px !important;
    }
    .modal-dialog {
        width: 100vw;
        max-width: none;
        height: 100%;
        margin: 0;
    }

    .modal-content {
        height: 100%;
    }
}

#offcanvasNotification {
    background-color: #212121;
}

#offcanvasNotification .card {
    background-color: transparent;
}

.booking-image-card {
    height: 120px;
    width: 150px;
}

@media (max-width: 991.98px) {
    .booking-image-card {
        height: 120px;
        min-width: 120px;
        max-width: 120px;
    }
}

.booking-image-card.pending-image {
    height: 90px;
    min-width: 90px;
    max-width: 90px;
}

.no-scrollbar::-webkit-scrollbar {
    width: 0px !important;
    height: 0px !important;
}

.login-logo {
    height: 100px;
    width: 100px;
    filter: brightness(0) invert(1);
}

.flex-same-size {
    flex: 0 1 170px;
}

/* ACCOUNT-MENU */
#acc-menu-container,
#wishlist-list {
    width: 50%;
    font-size: small;
}

#acc-menu-container button {
    font-size: small;
}

#acc-menu-container .card a {
    text-decoration: none;
    color: #fff;
    cursor: pointer;
}
#acc-menu-container .card a:hover {
    color: #d6ad60;
}
@media (max-width: 991.98px) {
    #acc-menu-container,
    #wishlist-list {
        width: 100%;
        font-size: medium;
        border: transparent;
    }

    #acc-menu-container button {
        font-size: medium;
    }
}
/* END-ACCOUNT-MENU */
/* BANNER */

.carousel-item {
    padding: 0px 10px;
    transition: transform 1s ease, opacity 1s ease-in-out;
}
#carouselBanner {
    height: 40dvh;
    width: 80dvw;
}

#carouselBanner .container.card-img-overlay {
    width: 80%;
}

#carouselBanner .container.card-img-overlay h1 {
    width: 80%;
    font-size: 2rem;
    font-weight: 300;
}

#carouselBanner .content-text-animate ol {
    list-style: none;
    --height: 2.5rem;
    height: var(--height);
    line-height: var(--height);
    overflow: hidden;
    padding: 0; /* Removes padding */
    margin: 0;
}

#carouselBanner .content-text-animate ol li {
    animation: slide-up 8s infinite;
}

#carouselBanner .content-text-animate ol li span {
    font-weight: 700;
    font-size: 2rem;
    -webkit-text-fill-color: transparent;
    background: #d6ad60;
    -webkit-background-clip: text;
    white-space: nowrap;
}

@keyframes slide-up {
    0%,
    10% {
        transform: translateY(0%);
    }

    15%,
    25% {
        transform: translateY(-100%);
    }

    30%,
    40% {
        transform: translateY(-200%);
    }

    45%,
    55% {
        transform: translateY(-300%);
    }

    60%,
    70% {
        transform: translateY(-400%);
    }
}

@media (max-width: 991.98px) {
    #carouselBanner {
        width: 95%;
        height: 25dvh;
    }
}

@media (max-width: 991.98px) {
    #carouselBanner .container.card-img-overlay {
        width: 90%;
    }

    #carouselBanner .container.card-img-overlay h1,
    .content-text-animate ol li span {
        font-size: 1.3rem;
    }

    .content-text-animate ol {
        --height: 2rem;
        height: var(--height);
        line-height: var(--height);
    }
}
/* END-BANNER */
/* DROPDOWN */
.dropdown-toggle.btn-light {
    border-radius: 0;
    background: #212121;
    color: #fff;
    padding: 15px;
    border-color: rgba(128, 128, 128, 0.671);
}

.dropdown-toggle.btn-light:hover {
    border-radius: none;
    background: #212121;
    color: #fff;
}

.bootstrap-select .no-results {
    background: none;
}

.dropdown-menu .dropdown-item:active {
    background-color: #fff;
    font-weight: 500;
}

.dropdown-menu .dropdown-item:hover {
    background-color: #e5e4e2;
    width: 100%;
}

.dropdown-menu .dropdown-item:focus {
    background-color: #e5e4e2;
}

.dropdown-menu {
    background-color: #fff;
}

.dropdown-menu .dropdown-item {
    color: #212121;
    font-weight: 300;
}
/* END-DROPDOWN */
/* DATE-FLATPICKR */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
    background: #d6ad60 !important;
    border-color: #d6ad60 !important;
}

.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n + 1)),
.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n + 1)),
.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n + 1)) {
    -webkit-box-shadow: -10px 0 0 #d6ad60 !important;
}

.flatpickr-prev-month:hover > svg,
.flatpickr-next-month:hover > svg {
    fill: #d6ad60 !important;
    color: #d6ad60 !important;
}

.date-input {
    cursor: pointer;
}
/* END-DATE-FLATPICKR */
/* FORM-INPUT */
.form-control {
    background-color: transparent !important;
}

label {
    background-color: transparent;
}

.form-control:focus {
    border-color: #fff;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.form-floating > .form-control:not(:placeholder-shown) ~ label::after {
    background-color: transparent;
}

.form-select {
    background-color: #212121 !important;
}

.form-select option:hover {
    background-color: #414141 !important;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus,
select:-webkit-autofill:active {
    transition: background-color 5000s;
    background-color: transparent;
    -webkit-text-fill-color: white !important;
}

button {
    font-size: small !important;
}

.user-input.d-none {
    opacity: 0;
    transition: all 0.5s ease-in-out !important;
}
.user-input {
    opacity: 1;
    transition: all 0.5s ease-in-out !important;
}

.user-text-input {
    border-radius: 0;
    background-color: transparent;
    padding: 15px;
    margin-bottom: 10px;
}

.user-select-input {
    border-radius: 0;
    background-color: #212121;
}

.user-select-input:focus {
    border-color: #fff;
    box-shadow: none;
}

.form-control.user-text-input:focus {
    box-shadow: none;
    background-color: transparent;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s;
    -webkit-text-fill-color: white !important;
}
.btn-modify {
    border-radius: 17px;
    font-size: small;
    padding-left: 30px;
    padding-right: 30px;
    margin-bottom: 5px;
}
textarea.form-control,
input[type="text"],
input[type="email"],
input[type="number"],
input[type="date"],
.form-select,
option {
    font-size: small;
}

.check-box-card {
    width: 200px;
    height: 100%;
}

.check-box-card .card-body {
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    flex-wrap: wrap;
}

.check-box-card:hover {
    cursor: pointer;
}
.form-check-input:checked + .check-box-card {
    box-shadow: 0 0 1px 1px #d6ad60 !important;
}
.check-box-card.check-box-card-image {
    height: 100px;
    width: 100px;
}

.check-box-card.check-box-card-image h6 {
    font-weight: 300;
    color: white;
    font-size: x-small;
}

.check-box-card.check-box-card-image img {
    object-fit: cover;
    height: 100px;
    width: 100px;
}

.form-check-input:checked + .check-box-card.check-box-card-image img {
    filter: brightness(30%);
}

.form-check-input:checked + .check-box-card.check-box-card-image h6 {
    font-weight: 600;
}

.card-radio {
    border: 1px solid #ffffff30;
    border-radius: 10px;
    padding: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.radio-input:checked + .card-radio {
    border-color: #d6ad60;
}

.radio-input:checked + .card-radio .title-card {
    color: #d6ad60;
}

.card-radio:has(.radio-input:disabled) {
    opacity: 75%;
}

/* checkbox modify */

.label-checkbox {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    cursor: pointer;
    transition: all 0.05s ease-in-out;
}

.label-checkbox:hover {
    color: #d6ad60;
}

input[type="checkbox"] {
    display: none;
}

.checkbox {
    position: relative;
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 10px;
    border-radius: 15%;
    border: 2px solid grey;
    transition: all 0.3s ease;
}

.checkbox-rounded {
    border-radius: 100%;
}

.modify-checkbox:checked + .checkbox {
    border-color: white;
}

.modify-checkbox:checked + .checkbox::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 18px;
    border: solid white;
    border-width: 0 6px 6px 0;
    transform: translate(-50%, -50%) rotateZ(45deg);
    animation: check 0.4s ease forwards;
}

@keyframes check {
    0% {
        transform: translate(-50%, -50%) rotateZ(45deg) scale(0.2);
    }
    50% {
        transform: translate(-50%, -50%) rotateZ(45deg) scale(1.2);
    }
    100% {
        transform: translate(-50%, -50%) rotateZ(45deg) scale(0.4);
    }
}
.digit-group input {
    height: 45px;
    width: 42px;
    border-radius: 6px;
    outline: none;
    font-size: 1.125rem;
    text-align: center;
    border: 1px solid #ddd;
}
/* END-FORM-INPUT */
/* HOMESTAY */

#homestay-suggestion .card {
    width: 300px;
}

@media (max-width: 991.98px) {
    #homestay-suggestion .card {
        width: 100% !important;
    }
}

.card-homestay {
    text-decoration: none;
    transition: all 0.5s;
    cursor: pointer;
    background-color: transparent;
}

.view-space-price,
.view-space {
    cursor: pointer;
}

.view-space-price:hover,
.view-space:hover {
    opacity: 75%;
}
#search-panel {
    border-radius: 6px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 20px;
    border: 0.5px solid #414141;
}

#search-panel .input-group-text {
    color: #212121;
    background-color: #d6ad60;
}

#search-panel input {
    background-color: #212121 !important;
    border-color: #3f3f3f !important;
}
.card-selection {
    width: 110px;
    height: fit-content;
    margin: 5px;
    cursor: pointer;
}
.card-selection .card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.card-selection .card-img-overlay {
    display: flex;
    justify-content: center;
    align-items: center;
}

.card-selection:hover .card {
    box-shadow: 0 0 1px 1px #d6ad60 !important;
}

.card-selection:hover span {
    color: #d6ad60 !important;
}
#search-homestay-result .homestay-image-container,
#wishlist-list .homestay-image-container {
    width: auto;
    max-height: 200px;
    height: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

#search-homestay-result .homestay-image-container img,
#wishlist-list .homestay-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* or 'contain' depending on your needs */
}
#homestay-booking-panel .card {
    max-width: 700px;
    height: fit-content;
    background-color: #d6ad60;
    color: #212121;
    border: transparent;
}

#homestay-booking-panel input {
    color: #212121 !important;
    background-color: #fff !important;
    border: transparent;
}

@media (max-width: 991.98px) {
    #homestay-booking-panel .card {
        width: 100px !important;
        height: fit-content;
    }
}

/* END-HOMESTAY */
/* IMAGE-ID-UPLOADER */
#picture_input_frontID,
#picture_input_backID {
    display: none;
}

.picture {
    height: 200px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fffefe;
    border: 1px solid #777;
    cursor: pointer;
    font-family: sans-serif;
    transition: color 300ms ease-in-out, background 300ms ease-in-out;
    outline: none;
    overflow: hidden;
    border-radius: 16px;
}

.picture:hover {
    color: #000000;
    background: #fefefe;
}

.picture:active {
    border-color: #d6ad60;
    color: #d6ad60;
    background: #eee;
}

.picture:focus {
    color: #777;
    background: #ccc;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.picture_image_frontID,
.picture_image_backID {
    width: 100%;
    height: 100%;
    align-content: center;
}
.picture__img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}
/* END-IMAGE-ID-UPLOADER */
/* LOADER */
#start-loader + #content,
#page-content {
    opacity: 0;
    transition: all 0.5s ease-in-out;
}

#start-loader + #content #page-loader {
    display: none;
}

#start-loader + #content #page-content {
    opacity: 1;
}

#start-loader-container,
#dot-loader-container {
    width: 100dvw;
    height: 100dvh;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 101 !important;
    background-color: #212121;
    transition: all 0.5s ease-out;
    opacity: 1;
}

#start-loader-logo {
    top: 50%;
    left: 50%;
    position: absolute;
}

#start-loader-loading {
    width: 100%;
    height: 4.8px;
    display: inline-block;
    position: relative;
    background: rgba(255, 255, 255, 0.15);
    overflow: hidden;
}

#start-loader-loading::after {
    content: "";
    box-sizing: border-box;
    width: 0;
    height: 4.8px;
    background: #fff;
    position: absolute;
    top: 0;
    left: 0;
    animation: animFw 2s ease-in-out forwards;
}

@keyframes animFw {
    0% {
        width: 0;
    }
    100% {
        width: 100%;
    }
}

#dot-loader-container {
    z-index: 99 !important;
}

#dot-loader {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: block;
    margin: 15px auto;
    position: relative;
    color: #fff;
    box-sizing: border-box;
    animation: animloader 1s linear infinite alternate;
    z-index: 90;
}
@keyframes animloader {
    0% {
        box-shadow: -38px -6px, -14px 6px, 14px -6px;
    }
    33% {
        box-shadow: -38px 6px, -14px -6px, 14px 6px;
    }
    66% {
        box-shadow: -38px -6px, -14px 6px, 14px -6px;
    }
    100% {
        box-shadow: -38px 6px, -14px -6px, 14px 6px;
    }
}
/* END-LOADER */
/* MOBILE */
#mobile-version #content {
    height: 90dvh;
    padding-bottom: 30px;
    overflow-y: auto;
}

#mobile-version #content:has(.exclude-padding) {
    padding-bottom: 0px;
}

#mobile-version #notFoundPage,
#mobile-version #errorPage {
    padding: 30px 5px;
    height: fit-content;
}
#mobile-version .cookies-consent-banner {
    bottom: 10dvh;
}

#mobile-version::-webkit-scrollbar {
    width: 0px !important;
    height: 0px !important;
    display: none !important;
}

#mobile-nav {
    background-color: #212121;
    color: #dfe0df;
    padding-top: 5px;
    padding-bottom: 20px;
    border-top: #a58d65 5px solid;
    align-items: center;
    justify-content: center;
    z-index: 100 !important;
}

#mobile-nav-container {
    padding-top: 15px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 10px;
    height: 45px;
    margin: 0px 15px;
}
#mobile-nav .mobile-nav-items {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: #fff;
}
#mobile-nav .mobile-nav-items.active {
    color: #d6ad60;
}

#mobile-nav .mobile-nav-items span {
    font-weight: 400;
}

#mobile-nav .mobile-nav-items .icon {
    font-size: 30px;
    margin-bottom: auto;
}

.title-nav-homestay {
    font-size: clamp(16px, 2vw, 18px);
}
/* END-MOBILE */
/* NAV-BAR */
.menu-icon {
    width: 55px;
    height: 30px;
    display: grid;
}

.menu-icon .line {
    width: 100%;
    background: #212121;
    margin: 5px 0 5px 0;
    height: 1.5px;
    display: block;
    transition: all 800ms cubic-bezier(0.645, 0.045, 0.355, 1);
}
.line-1 {
    margin-top: 0;
}

.menu-icon:hover .line-1 {
    width: 20px;
}

.menu-icon:hover .line-2 {
    width: 30px;
}

.menu-icon:hover .line-3 {
    width: 10px;
}

.navbar .navbar-brand {
    height: 50px;
    filter: brightness(0) invert(1);
}

#menu .nav-item {
    width: 100%;
}
#menu .nav-item:hover {
    color: #a58d65;
}

#menu .nav-link {
    border-radius: 10px;
    padding: 10px 30px;
    font-size: small;
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: center;
}
#menu .nav-link.active {
    background-color: #d6ad60 !important;
    color: #212121;
    font-weight: 600;
}

#top-nav-container {
    padding: 15px 30px;
    border-radius: 30px;
    background-color: #d6ad60;
    color: #212121;
}

.top-nav-list {
    flex-direction: row;
    gap: 50px;
    flex-grow: 1;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    list-style: none;
    font-weight: 300;
    transition: opacity 0.6 ease;
    font-size: small;
}

.top-nav-list .nav-link:hover {
    opacity: 75%;
}
.top-nav-list .nav-link.active {
    font-weight: 600;
}

#offcanvasMenu {
    background-color: #212121;
    border-radius: 30px;
    max-width: 1000px !important;
    margin: 10px;
}

.navbar {
    transition: all 0.5s;
    padding-right: 0 !important;
}

/* END-NAV-BAR */
/* QTY-BTN */
.qty {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 100%; /* Adjust the max-width as needed */
    border-radius: 5px;
}

.qty.addOnQty {
    max-width: none; /* Adjust the max-width as needed */
    width: 100%; /* Adjust the max-width as needed */
}

.minus,
.plus {
    display: inline-block;
    height: 30px;
    text-align: center;
    line-height: 30px;
    font-size: 20px;
    cursor: pointer;
    border-radius: 5px;
}

.minus:hover,
.plus:hover {
    transform: scale(1.5);
}

.count {
    width: 100%; /* Adjust the width as needed */
    height: 30px; /* Adjust the height as needed */
    text-align: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 5px;
    margin: 0 10px;
    font-size: small;
}
/* END-QTY-BTN */
/* RATING */
#rating-section .col {
    min-width: 150px;
}

.star-rating {
    display: flex;
    flex-direction: row-reverse;
    font-size: 2rem;
    justify-content: space-around;
    padding: 0 0.2em;
    text-align: start;
    width: 6em;
}

.star-rating.yourRating {
    font-size: 1.5rem;
    width: 50%;
    text-align: center;
}
.star-rating input {
    display: none;
}
.star-rating label {
    color: #ccc;
    cursor: pointer;
}
.star-rating :checked ~ label {
    color: #f90;
}

.star-rating label:hover,
.star-rating label:hover ~ label {
    color: #fc0;
}

.star-rating .yourRating label:hover,
.star-rating .yourRating label:hover ~ label {
    color: none;
}
/* END-RATING */
/* TEXT-BTN */
.text-justify {
    text-align: justify;
}
.btn-signup {
    color: #212121;
    font-size: x-small;
}

.btn-signup:hover {
    background-color: white;
    color: #212121;
}

.btn-login {
    border: 1px solid white;
    background-color: white;
    color: #212121;
    font-size: x-small !important;
}

.btn-login:hover {
    color: #212121;
    background-color: rgb(223, 223, 223);
}
.btn-gold {
    background-color: #d6ad60;
    border: none;
    color: #212121 !important;
    font-size: small;
    padding: 8px 12px;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.btn-gold:hover {
    background-color: #d6ad60;
    filter: brightness(90%);
}

.btn-gold:active {
    filter: brightness(90%);
}

.btn-gold-outline:hover {
    background-color: #d6ad60;
    border-color: transparent;
    color: #212121 !important;
}
.dropdown-menu li {
    cursor: pointer;
}

.btn-action:hover {
    color: #d6ad60;
}

.click-action {
    text-decoration: none;
    color: white;
}

.click-action:hover {
    background-color: #282828;
}

.text-gold {
    color: #d6ad60;
}
.text-normal {
    font-size: medium;
}
.text-small {
    font-size: small !important;
}

.text-x-small {
    font-size: x-small !important;
}
.text-xx-small {
    font-size: xx-small !important;
}

.text-xx-small {
    font-size: xx-small !important;
}
.password-btn,
.password-btn:focus,
button:focus,
button {
    cursor: pointer;
    outline: none !important;
    border: none !important;
}

.select-element {
    cursor: pointer !important;
    transition: all 0.3s ease-in-out;
}

.select-element:hover {
    color: #b68d40;
}

.pointer {
    cursor: pointer;
}
.modify-btn {
    border-radius: 50%;
    padding: 2px;
    border: none;
    background: none;
    transition: all 0.5s;
}

.modify-btn:hover {
    background: #eee;
    color: #212121;
}
.code-input {
    font-size: large !important;
    font-weight: bolder !important;
    text-transform: uppercase !important;
}

.small-text {
    font-size: small !important;
}
/* END-TEXT-BTN */
/* USER-ACCOUNT */
.menu-item {
    display: none;
    opacity: 0;
    transition: opacity 0.1s ease;
}

.menu-item.show {
    opacity: 1;
}

.img-profile,
.img-preview-profile {
    height: 150px;
    width: 150px;
    object-fit: cover;
    border-radius: 50%;
    border: solid white 10px;
}

.cam-container,
.photo-container {
    margin: 0px auto;
}
#cam,
#capture-photo {
    border-radius: 100%;
    width: 200px;
    border: 5px solid white;
    height: 200px;
    object-fit: cover;
}
.img-container {
    position: relative;
    display: inline-block;
    width: fit-content;
}

.img-profile,
.img-preview {
    height: 100px;
    width: 100px;
    object-fit: cover;
    border-radius: 50%;
}

#edit-img-btn {
    padding-top: 7px;
    padding-right: 7px;
    position: absolute;
    right: 0;
    top: 0;
}

#edit-img-btn > input {
    display: none;
}

#edit-img-btn span {
    cursor: pointer;
}
/* END-USER-ACCOUNT */
/* WISHLIST */
.heart-checkbox {
    cursor: pointer;
    display: flex;
    align-items: center;
}

.heart-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.heart-checkbox .bi-heart-fill {
    font-size: large;
    color: #ccc;
}

.heart-checkbox input:checked + .bi-heart-fill {
    color: #ff0000; /* Change color to red when checked */
}
/* END-WISHLIST */
/* CAROUSEL */
.carousel-wrapper {
    position: relative;
    overflow: hidden;
}
.carousel-wrapper .carousel-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
}
.carousel-wrapper .carousel-holder {
    box-sizing: border-box;
    padding: 20px;
}

.carousel-wrapper .navigation {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #00000045;
    color: white;
    border: none;
    padding: 10px;
    font-size: 24px;
    cursor: pointer;
    border-radius: 100%;
}

.carousel-wrapper .navigation:hover {
    opacity: 75%;
}
.carousel-wrapper .navigation#carousel-prev {
    left: 10px;
}
.carousel-wrapper .navigation#carousel-next {
    right: 10px;
}
/* END-CAROUSEL */
/* GRID */

.grid-layout {
    display: grid;
}

.grid-layout.grid-wrapper-type {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: 8px;
}

.grid-layout div {
    overflow: hidden;
}

.grid-layout img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    transition: transform 1s ease-in;
    object-position: center;
}
.grid-layout.grid-wrapper-type .grid-type img {
    filter: brightness(50%);
}

.grid-layout.grid-wrapper-type .grid-type:hover img {
    transform: scale(1.3);
}

.grid-wrapper-type .card-title {
    font-size: 1.1rem;
}

@media (max-width: 991.98px) {
    .grid-wrapper-type .card-title {
        font-size: 0.8rem;
        writing-mode: vertical-lr;
    }
}

.grid-wrapper-type div:nth-child(3) {
    grid-row: span 3 / span 3;
}

.grid-wrapper-type div:nth-child(1) {
    grid-column: span 2 / span 2;
    grid-row: span 2 / span 2;
    grid-column-start: 1;
    grid-row-start: 4;
}

.grid-wrapper-type div:nth-child(2) {
    grid-column: span 2 / span 2;
    grid-row: span 3 / span 3;
    grid-column-start: 2;
    grid-row-start: 1;
}

.grid-wrapper-type div:nth-child(4) {
    grid-row: span 2 / span 2;
    grid-column-start: 3;
    grid-row-start: 4;
}

.grid-wrapper-type div:nth-child(5) {
    grid-row: span 5 / span 5;
    grid-column-start: 4;
    grid-row-start: 1;
}

.about-us-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(6, 1fr);
    gap: 15px;
}

.about-us-grid div {
    overflow: hidden;
}

.about-us-grid div:nth-child(1) {
    grid-row: span 6 / span 6;
}

.about-us-grid div:nth-child(2) {
    grid-row: span 4 / span 4;
}

.about-us-grid div:nth-child(3) {
    grid-row: span 2 / span 2;
    grid-column-start: 2;
    grid-row-start: 5;
}
.grid-property-view {
    gap: 5px;
    height: 400px;
}

.grid-property-view.layout-5 {
    grid-template-areas:
        "a a b c"
        "a a b c"
        "a a d e"
        "a a d e";
}

.grid-property-view.layout-4 {
    grid-template-areas:
        "a a b c"
        "a a b c"
        "a a d d";
}

.grid-property-view.layout-3 {
    grid-template-areas:
        "a a b b"
        "a a c c";
}

.grid-property-view.layout-2 {
    grid-template-areas: "a b";
}

.grid-property-view.layout-1 {
    grid-template-areas: "a";
}

.grid-property-view div:nth-child(1) {
    grid-area: a;
}

.grid-property-view div:nth-child(2) {
    grid-area: b;
}

.grid-property-view div:nth-child(3) {
    grid-area: c;
}

.grid-property-view div:nth-child(4) {
    grid-area: d;
}

.grid-property-view div:nth-child(5) {
    grid-area: e;
}

@media (max-width: 991.98px) {
    .grid-property-view div:not(div:nth-child(1)) {
        display: none;
    }
}
/* END-GRID */
.alert-danger {
    font-size: smaller !important;
}

.icon-link {
    text-decoration: none;
    color: white;
}

label {
    font-size: small;
}
#carouselImageRoomOther img,
#carouselImageRoom img,
.carousel-property img {
    height: 400px;
    object-fit: contain;
    border-radius: 10px;
}

#carouselImageRoomOther .carousel-item,
#carouselImageRoom .carousel-item,
.carousel-property .carousel-item {
    text-align: center;
    border-radius: 10px;
    overflow: hidden;
}

#share-button-container .share-button {
    color: #ccc;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 15px;
    flex-direction: row;
    padding: 15px;
    flex: 1 1 200px;
}
#share-button-container .share-button:hover {
    border-color: #a58d65 !important;
    color: #a58d65;
}

#share-button-container .share-button i {
    font-size: larger;
}

#share-button-container .share-button span {
    font-size: small;
    font-weight: 300;
}
.offcanvas-modify {
    border-radius: 30px;
    max-width: 85dvw !important;
    margin: 10px;
    background-color: #f4f2f3;
}

.offcanvas-modify .offcanvas-body {
    border-radius: 30px;
}
.booking-list-btn {
    font-size: small;
}
.booking-list-btn:hover {
    color: white;
}

input[type="radio"]:checked + .booking-list-btn {
    border-color: #d6ad60 !important;
    color: #d6ad60;
}

input[type="radio"]:disabled + .booking-list-btn {
    opacity: 75%;
}

.booking-card {
    cursor: pointer;
    transition: all 0.5s ease-in-out;
    border: 1px solid transparent !important;
}

.booking-card:focus,.booking-card:hover {
    border-color:  #888 !important;
    background: rgba(212, 211, 211, 0.08) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5.7px);
    -webkit-backdrop-filter: blur(5.7px);
}
.booking-card:focus{
     border-color:#d6ad60 !important;
}
.booking-dropdown{
    z-index: 9999 !important;
}

#pre-check-in-form input,#pre-check-in-form textarea{
    background-color:#212121 !important;
}