:root {
    --cream: #B4A99B;
}

a {
    text-decoration: none;
    color: white;
}

body {
    font-family: 'Montserrat', sans-serif;
}

header {
    padding: 12px;
    background-color: transparent;
    transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out;
    transform: translateY(1rem);
    z-index: 99;
    width: 100%;
    position: fixed;
}

.sticky-active {
    background-color: var(--cream);
    box-shadow: 0 3px 5px rgb(0 0 0 / 20%);
    transform: translateY(0);
}

.sticky-active2 {
    position: fixed;
    top: 99px;
    width: 100%;
    z-index: 2;
}

li {
    list-style-type: none;
}

header a {
    text-decoration: none;
    color: white;
}

a:hover {
    color: white;
}

.left-menu {
    display: flex;
    align-items: center;
}

.menu-line {
    background-color: white;
    width: 30px;
    height: 2px;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    position: relative;
}

.menu-line.line-1 {
    top: 1px;
}

.header.nav-active .line-1 {
    top: 9px;
    transform: rotate(135deg);
}

.menu-line.line-2 {
    top: 7px;
}

.header.nav-active .line-2 {
    opacity: 0;
    transform: translateX(100%);
}

.menu-line.line-3 {
    top: 13px;
}

.header.nav-active .line-3 {
    top: 5px;
    transform: rotate(-135deg);
}

.language-menu {
    margin: 0;
    padding: 0;
    list-style: none;
}

.language-menu li {
    font-size: 18px;
    color: white;
    margin-right: 18px;
}

.language-menu-hidden {
    top: 74px;
    right: 32px;
    display: none;
    position: absolute;
    background-color: white;
    margin: 0;
    padding: 0;
}

.active {
    display: block;
}

.language-menu-hidden li {
    margin: 0;
    padding: 13px 40px 10px 10px;
    transition: background-color 0.2s ease-in-out;
}

.language-menu-hidden li:hover {
    background-color: #f6e1d0;
}

.language-menu-hidden a {
    color: black;
    font-size: 14px;
    padding: 10px;
}

.menu-phone {
    font-size: 18px;
    color: white;
    margin-right: 15px;
}

.logo img {
    width: 180px;
}

.right-menu {
    font-size: 14px;
}

.menu-opportunities {
    margin-right: 15px;
    font-weight: 400;
}

.menu-reservation {
    background-color: #718472bf;
    font-size: 12px;
    padding: 10px 40px;
    font-weight: 300;
    color: white;
}

.menu-reservation:hover {
    background-color: #f6e1d0bf;
    color: black;
}

.sticky-active .menu-reservation {
    background-color: #f6e1d0bf;
    color: black;
}

.sticky-active .menu-reservation:hover {
    color: white;
}

.nav {
    position: fixed;
    top: 0;
    padding: 8rem 3rem 0 3rem;
    width: 100%;
    max-width: 500px;
    height: 100%;
    background-color: var(--cream);
    transform: translateX(100%);
    transition: transform 0.2s ease-in-out;
    overflow-y: auto;
    z-index: 2;
    right: 0;
}

.nav-active2 {
    transform: translateX(0);
    padding: 150px 50px 0 0;
    z-index: 2;
}

.right-menu-logo {
    height: 480px;
    object-fit: cover;
}

.right-nav > ul > li > a {
    color: white;
    font-size: 16px;
    font-weight: 300;
    position: relative;
    display: inline-block;
    text-decoration: none;
    padding: 10px 0px 10px 0px;
}

.right-nav > ul > li > a::after {
    content: "";
    position: absolute;
    bottom: 4px;
    left: 0;
    background-color: white;
    width: 0;
    height: 2px;
    transition: width 0.3s ease;
}

.right-nav > ul > li > a:hover::after, .nav > ul > li > a:focus::after {
    width: 100%;
}

/* slider */

.header-slider {
    background-color: #000;
}

.owl-item {
    width: 100%;
}

.item {
    width: 100%;
}

.header-slider .item img {
    height: 85vh;
    width: 100%;
    object-fit: cover;
    object-position: top;
    opacity: 0.75;
}

/* about */

.about-section {
    margin-top: 40px;
    position: relative;
    padding: 40px 0;
}

.about-section img {
    position: absolute;
    height: 550px;
    top: -45px;
}

.about-section h6 {
    color: var(--cream);
    font-family: 'Marcellus';
    font-weight: 300;
    letter-spacing: 1px;
    margin-bottom: 1.5rem;
}

.about-section h4 {
    font-weight: 300;
    letter-spacing: 1px;
    margin-bottom: 1.5rem;
}

.about-section h1 {
    font-weight: 200;
    letter-spacing: 1px;
    margin-bottom: 1.5rem;
}

.about-section p {
    font-weight: 300;
    padding: 0 15%;
    margin-bottom: 40px;
    font-size: 14px;
}

.about-section a {
    padding: 15px 80px;
    background-color: var(--cream);
    color: white;
    text-decoration: none;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 300;
    letter-spacing: 1px;
}


/* rooms */

.villa-section {
    margin-top: 30px;
    padding: 40px 0;
}

.villa-section h6 {
    color: var(--cream);
    letter-spacing: 1px;
    font-family: 'Marcellus';
    margin-bottom: 1rem;
}

.villa-section h5 {
    font-weight: 300;
    margin-bottom: 1rem;
    letter-spacing: 2px;
}

.villa-section .villa-line {
    width: 5%;
    background-color: #000;
    margin: auto;
    margin-bottom: 1rem;
    height: 1px;
}

.villa-section p {
    font-size: 14px;
    padding: 0 10%;
    font-weight: 300;
}

.villa-row {
    margin-top: 30px;
    margin-bottom: 60px;
}

.villas-col {
    position: relative;
}

.villa-row img {
    height: 600px;
    width: 100%;
    object-fit: cover;
    transition: all 1s ease;
}

.villa-caption {
    color: white;
    z-index: 1;
    position: absolute;
    top: 45%;
    display: flex;
    opacity: 0;
    transition: all 1s ease;
    width: 100%;
    justify-content: center;
    letter-spacing: 2px;
}

.villas-col:hover .villa-image {
    filter: brightness(0.5);
}

.villas-col:hover .villa-caption {
    opacity: 1;
}

.villa-section a {
    padding: 15px 80px;
    background-color: var(--cream);
    color: white;
    text-decoration: none;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 300;
    letter-spacing: 1px;
    text-align: center;
}


/* campaigns */

.campaign-section {
    margin-top: 30px;
}

.campaign-section .item {
    padding: 80px 0;
}

.campaign-img {
    height: 470px;
    object-fit: cover;
}

.campaign-content {
    height: 540px;
    width: 300px;
    background: #FFFFFF;
    box-shadow: 9px 11px 20px rgba(0, 0, 0, 0.1);
    position: absolute;
    top: 41px;
    left: 15%;
    z-index: 99;
}

.campaign-decoration {
    height: 280px;
    object-fit: contain;
    margin-left: 35px;
}

.campaign-text {
    padding: 0px 35px 0 35px
}

.campaign-text h6 {
    margin: 10px 0 30px 0;
}

.campaign-text p {
    font-weight: 300;
    font-size: 12px;
    margin-bottom: 50px;
}

.campaign-text a {
    font-size: 11px;
    font-weight: 600;
    color: black;
    text-decoration: none;
}

.campaign-line {
    width: 56%;
    background-color: #000;
    height: 2px;
    margin-top: 30px;
}

/* room */

.index-room-section {
    margin-top: 10px;
    padding: 40px 0;
}

.index-room-header h6 {
    color: var(--cream);
    letter-spacing: 1px;
    font-family: 'Marcellus';
    margin-bottom: 1rem;
}

.index-room-header h5 {
    font-weight: 300;
    margin-bottom: 1rem;
    letter-spacing: 2px;
}

.index-room-header .index-room-line {
    width: 5%;
    background-color: #000;
    margin: auto;
    margin-bottom: 1rem;
    height: 1px;
}

.index-room-header p {
    font-size: 14px;
    padding: 0 10%;
    font-weight: 300;
}

.index-room-description {
    margin-top: 20px;
}

.index-room-content-col {
    align-self: center;
}

.mobile-index-room-shadow {
    display: flex;
}

.index-room-content {
    padding: 0 10% 0 15%;
}

.index-room-content h6 {
    color: var(--cream);
    letter-spacing: 1px;
    font-family: 'Marcellus';
    margin-bottom: 1rem;
}

.index-room-content h5 {
    font-weight: 300;
    margin-bottom: 3rem;
    letter-spacing: 2px;
}

.index-room-content .index-room-content-line {
    width: 10%;
    background-color: #000;
    margin-bottom: 3rem;
    height: 1px;
}

.index-room-content p {
    font-size: 12px;
    font-weight: 300;
}

.room-slider .owl-prev {
    position: absolute;
    left: 3%;
    background-color: var(--cream) !important;
    height: 30px;
    width: 30px;
    border-radius: 50% !important;
    color: white !important;
    bottom: 2%;
}

.room-slider .owl-next {
    position: absolute;
    left: 6%;
    background-color: var(--cream) !important;
    height: 30px;
    width: 30px;
    border-radius: 50% !important;
    color: white !important;
    bottom: 2%;
}

.room-slider .owl-next:hover {
    background-color: var(--cream) !important;
}

.room-slider .owl-prev:hover {
    background-color: var(--cream) !important;
}

.room-slider .owl-stage-outer {
    height: 650px !important;
}

/* facilities */

.index-facilities-section {
    margin-top: 30px;
    padding: 40px 0;
    margin-bottom: 30px;
}

.index-facilities-col {
    margin-bottom: 1rem;
}

.index-facilities-col h6 {
    color: var(--cream);
    letter-spacing: 1px;
    font-family: 'Marcellus';
    margin-bottom: 1rem;
}

.index-facilities-col h5 {
    font-weight: 300;
    margin-bottom: 1rem;
    letter-spacing: 2px;
}

.index-facilities-col .index-facilities-line {
    width: 5%;
    background-color: #000;
    margin: auto;
    margin-bottom: 1rem;
    height: 1px;
}

.index-facilities-col p {
    font-size: 14px;
    padding: 0 10%;
    font-weight: 300;
}

.facility-slider img {
    height: 600px;
    object-fit: cover;
    transform: scale(0.9);
}

.owl-item img {
    transition: transform 0.2s ease-in-out;
}

.owl-item.center img {
    transform: scale(1);
}

.index-facility-content {
    color: white;
    padding: 12px 0 0 0;
    transform: scale(0.9);
    margin-top: -100px;
    background: rgba(255, 255, 255, 0);
    transition: transform 0.2s ease-in-out, background 0.2s ease-in-out;
}

.center .index-facility-content {
    margin-top: -80px;
    background: linear-gradient(88.83deg, #BEB7AE 0%, #EFE1D0 99%);
    transform: scale(1);
}

.index-facility-content h6 {
    font-size: 12px;
    font-weight: 400;
}

.index-facility-content p {
    font-size: 10px;
}

.index-facility-arrow {
    align-self: center;
}

.index-facility-arrow-image {
    height: 16px !important;
    width: 100px !important;
    object-fit: contain !important;
}


/* footer */

footer {
    background-color: var(--cream);
    padding: 15px 0;
    color: white;
}

.footer-container {
    width: 75%;
    margin: auto;
}

.footer-image {
    height: 60px;
}

.footer-address p {
    margin-top: 30px;
    font-size: 12px;
}

.footer-address a {
    font-size: 12px;
    color: white;
    text-decoration: none;
}

.footer-address i {
    font-size: 10px;
    margin-right: 5px;
}

.footer-menu {
    margin-top: 25px;
}

.footer-menu a {
    color: white;
    font-size: 12px;
    text-decoration: none;
    margin-bottom: 16px;
    display: block;
}

.footer-social {
    text-align: end;
    margin-top: 25px;
}

.footer-social p {
    font-size: 12px;
}

.social-icons i {
    font-size: 14px;
    color: white;
    padding-right: 7px;
}

.footer-line {
    background-color: white;
    height: 1px;
    opacity: 0.3;
    margin: 15px 0;
}

.footer-links a {
    color: white;
    font-size: 10px;
    text-decoration: none;
    margin-right: 10px;
}

.footer-copyright {
    font-size: 10px;
    text-align: end;
    align-self: center;
}


/* rooms page */

.roomspage-bg-light {
    background: #F5F5F5;
}

.roomspage-header img {
    height: 350px;
    width: 100%;
    object-fit: cover;
}

.roomspage-about-section {
    padding: 40px 0;
}

.roomspage-about-section h6 {
    color: var(--cream);
    letter-spacing: 1px;
    font-family: 'Marcellus';
    margin-bottom: 1rem;
}

.roomspage-about-section h5 {
    font-weight: 300;
    margin-bottom: 1rem;
    letter-spacing: 2px;
}

.roomspage-about-section .roomspage-line {
    width: 5%;
    background-color: #000;
    margin: auto;
    margin-bottom: 1rem;
    height: 1px;
}

.roomspage-about-section p {
    font-size: 14px;
    padding: 0 10%;
    font-weight: 300;
}

.roomspage-rooms-detail {
    width: 400px;
    box-shadow: 0 1px 3px rgb(0 0 0 / 15%);
    margin-bottom: 36px;
}

.roomspage-room-img {
    height: 300px;
    width: 100%;
}

.roomspage-room-content {
    padding: 16px;
    background-color: white;
}

.roomspage-rooms-detail:hover {
    box-shadow: 0 10px 20px rgb(0 0 0 / 25%);
}

.roomspage-room-content h6 {
    color: var(--cream);
    font-family: 'Marcellus';
    letter-spacing: 1px;
}

.roomspage-room-content img {
    height: 14px;
    width: 20px;
    object-fit: contain;
}

.roomspage-room-content label {
    font-size: 14px;
    font-weight: 300;
    margin-left: 6px;
    color: #212529;
}

.roomspage-room-content span {
    font-size: 14px;
    font-weight: 300;
    margin-left: 6px;
    color: #212529;
}

/* room-detail */

.room-detail-header {
    height: 100px;
    background-color: var(--cream);
}


.room-detail-section h6 {
    color: var(--cream);
    letter-spacing: 1px;
    font-family: 'Marcellus';
    margin-bottom: 1rem;
}

.room-detail-section h5 {
    font-weight: 300;
    margin-bottom: 1rem;
    letter-spacing: 2px;
}

.room-detail-section .room-detail-line {
    width: 5%;
    background-color: #000;
    margin: auto;
    margin-bottom: 1rem;
    height: 1px;
}

.room-detail-header p {
    font-size: 14px;
    padding: 0 10%;
    font-weight: 300;
}

.room-detail-description {
    padding-top: 20px;
    margin-bottom: 50px;
}

.room-detail-name {
    letter-spacing: 2px;
    color: var(--cream);
    font-weight: 400;
    font-size: 56px;
    padding: 12% 0% 15% 15%;
}

.room-detail-content {
    padding: 0 14% 0 30%;
}

.room-detail-content p {
    font-size: 14px;
    font-weight: 300;
    line-height: 28px;
    margin-bottom: 24px;
}

.room-detail-content span {
    font-size: 10px;
    font-weight: 300;
}

.room-detail-content .room-detail-content-line {
    width: 25%;
    background-color: #000;
    margin-top: 3rem;
    margin-bottom: 3rem;
    height: 1px;
    filter: opacity(0.3);
}

.room-detail-properties div {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

.room-detail-properties img {
    height: 26px;
    width: 26px;
    object-fit: contain;
}

.room-detail-properties span {
    font-size: 12px;
    font-weight: 300;
    padding-top: 6px;
    margin-left: 16px;
    color: rgba(117, 110, 101, 1);
}

.room-detail-slider .owl-prev {
    position: absolute;
    right: 7%;
    background-color: var(--cream) !important;
    height: 30px;
    width: 30px;
    border-radius: 50% !important;
    color: white !important;
    bottom: 2%;
}

.room-detail-slider .owl-next {
    position: absolute;
    right: 2%;
    background-color: var(--cream) !important;
    height: 30px;
    width: 30px;
    border-radius: 50% !important;
    color: white !important;
    bottom: 2%;
}

.room-detail-slider .owl-next:hover {
    background-color: var(--cream) !important;
}

.room-detail--slider .owl-prev:hover {
    background-color: var(--cream) !important;
}

.room-detail--slider .owl-stage-outer {
    height: 650px !important;
}

.room-detail-otherrooms-section {
    padding: 50px 0;
}

.room-detail-otherrooms-section h6 {
    color: var(--cream);
    letter-spacing: 1px;
    font-family: 'Marcellus';
    margin-bottom: 1rem;
}

.room-detail-otherrooms-section h5 {
    font-weight: 300;
    margin-bottom: 1rem;
    letter-spacing: 2px;
}

.room-detail-otherrooms-section .otherrooms-line {
    width: 5%;
    background-color: #000;
    margin: auto;
    margin-bottom: 1rem;
    height: 1px;
}

.room-detail-otherrooms-section p {
    font-size: 14px;
    padding: 0 10%;
    font-weight: 300;
}

.otherrooms-container {
    width: 75%;
    margin: auto;
    margin-top: 40px;
}

.otherrooms-slider .owl-prev {
    position: absolute;
    top: 40%;
    left: -5%;
}

.otherrooms-slider .owl-next {
    position: absolute;
    top: 40%;
    right: -5%;
}

.otherrooms-slider .owl-prev:hover {
    background-color: #ffffff00 !important;
}

.otherrooms-slider .owl-next:hover {
    background-color: #ffffff00 !important;
}

.room-detail-otherroom {
    box-shadow: 0 1px 3px rgb(0 0 0 / 15%);
    margin-bottom: 36px;
}

.otherroom-room-content {
    padding: 16px;
    background-color: white;
    filter: drop-shadow(0px 4px 7px rgba(0, 0, 0, 0.08));
}

.otherroom-room-content h6 {
    color: var(--cream);
    font-family: 'Marcellus';
    letter-spacing: 1px;
}

.otherroom-room-content img {
    height: 14px;
    width: 20px !important;
    object-fit: contain;
    display: unset !important;
}

.otherroom-room-content label {
    font-size: 14px;
    font-weight: 400;
    margin-left: 6px;
    letter-spacing: 1px;
    color: #212529;
}

.otherroom-room-content span {
    font-size: 14px;
    font-weight: 400;
    margin-left: 6px;
    letter-spacing: 1px;
    color: #212529;
}

.room-detail-left-logo {
    position: fixed;
    bottom: 25%;
}

.room-detail-left-logo img {
    height: 350px;
}

/* facilty detail page */

.facility-detail-header {
    height: 100px;
    background-color: var(--cream);
}


.facility-detail-section h6 {
    color: var(--cream);
    letter-spacing: 1px;
    font-family: 'Marcellus';
    margin-bottom: 1rem;
}

.facility-detail-section h5 {
    font-weight: 300;
    margin-bottom: 1rem;
    letter-spacing: 2px;
}

.facility-detail-section .facility-detail-line {
    width: 5%;
    background-color: #000;
    margin: auto;
    margin-bottom: 1rem;
    height: 1px;
}

.facility-detail-header p {
    font-size: 14px;
    padding: 0 10%;
    font-weight: 300;
}

.facility-detail-description {
    padding-top: 20px;
    margin-bottom: 50px;
}

.facility-detail-name {
    letter-spacing: 2px;
    color: var(--cream);
    font-weight: 400;
    font-size: 44px;
    padding: 12% 0% 15% 15%;
}

.facility-detail-content {
    padding: 0 14% 0 30%;
}

.facility-detail-content p {
    font-size: 14px;
    font-weight: 300;
    line-height: 28px;
    margin-bottom: 24px;
}

.facility-detail-content span {
    font-size: 10px;
    font-weight: 300;
}

.facility-detail-content .facility-detail-content-line {
    width: 25%;
    background-color: #000;
    margin-top: 3rem;
    margin-bottom: 3rem;
    height: 1px;
    filter: opacity(0.3);
}

.facility-detail-properties div {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

.facility-detail-properties img {
    height: 26px;
    width: 26px;
    object-fit: contain;
}

.facility-detail-properties span {
    font-size: 12px;
    font-weight: 300;
    padding-top: 6px;
    margin-left: 16px;
    color: rgba(117, 110, 101, 1);
}

.facility-detail-slider .owl-prev {
    position: absolute;
    right: 7%;
    background-color: var(--cream) !important;
    height: 30px;
    width: 30px;
    border-radius: 50% !important;
    color: white !important;
    bottom: 2%;
}

.facility-detail-slider .owl-next {
    position: absolute;
    right: 2%;
    background-color: var(--cream) !important;
    height: 30px;
    width: 30px;
    border-radius: 50% !important;
    color: white !important;
    bottom: 2%;
}

.facility-detail-slider .owl-next:hover {
    background-color: var(--cream) !important;
}

.facility-detail--slider .owl-prev:hover {
    background-color: var(--cream) !important;
}

.facility-detail--slider .owl-stage-outer {
    height: 650px !important;
}

.facility-detail-otherfacilities-section {
    padding: 50px 0;
}

.facility-detail-otherfacilities-section h6 {
    color: var(--cream);
    letter-spacing: 1px;
    font-family: 'Marcellus';
    margin-bottom: 1rem;
}

.facility-detail-otherfacilities-section h5 {
    font-weight: 300;
    margin-bottom: 1rem;
    letter-spacing: 2px;
}

.facility-detail-otherfacilities-section .otherfacilities-line {
    width: 5%;
    background-color: #000;
    margin: auto;
    margin-bottom: 1rem;
    height: 1px;
}

.facility-detail-otherfacilities-section p {
    font-size: 14px;
    padding: 0 10%;
    font-weight: 300;
}

.other-facilities-slider .owl-prev {
    position: absolute;
    right: 15%;
}

.other-facilities-slider .owl-next {
    position: absolute;
    right: 0%;
}

.owl-next img, .owl-prev img {
    height: unset !important;
    transform: unset !important;
}

.other-facilities-slider .owl-prev:hover {
    background-color: #ffffff00 !important;
}

.other-facilities-slider .owl-next:hover {
    background-color: #ffffff00 !important;
}

.facility-detail-otherfacilities {
    box-shadow: 0 1px 3px rgb(0 0 0 / 15%);
    margin-bottom: 36px;
}

.facility-detail-left-logo {
    position: fixed;
    bottom: 25%;
}

.facility-detail-left-logo img {
    height: 350px;
}

.other-facilities-section {
    padding: 40px 0 70px;
}

.other-facilities-col {
    margin-bottom: 1rem;
}

.other-facilities-col h6 {
    color: var(--cream);
    letter-spacing: 1px;
    font-family: 'Marcellus';
    margin-bottom: 1rem;
}

.other-facilities-col h5 {
    font-weight: 300;
    margin-bottom: 1rem;
    letter-spacing: 2px;
}

.other-facilities-col .other-facilities-line {
    width: 5%;
    background-color: #000;
    margin: auto;
    margin-bottom: 1rem;
    height: 1px;
}

.other-facilities-col p {
    font-size: 14px;
    padding: 0 10%;
    font-weight: 300;
}

.other-facilities-slider img {
    height: 400px;
    transform: scale(0.9);
}

.center img {
    transform: scale(1);
}

.other-facilities-content {
    color: white;
    padding: 12px 0 0 0;
    transform: scale(0.9);
    margin-top: -100px;
    background: rgba(255, 255, 255, 0);
}

.center .other-facilities-content {
    margin-top: -80px;
    background: linear-gradient(88.83deg, #BEB7AE 0%, #EFE1D0 99%);
    transform: scale(1);
}

.other-facilities-content h6 {
    font-size: 12px;
    font-weight: 400;
}

.other-facilities-content p {
    font-size: 10px;
}

.other-facilities-arrow {
    align-self: center;
}

.other-facilities-arrow-image {
    height: 12px !important;
    width: 100px !important;
    object-fit: contain;
}

/* contact page */

.contact-left-logo {
    position: absolute;
    left: 0;
    top: 335px;
    height: 450px;
}

.contact-section {
    padding: 70px 0;
}

.contact-information {
    text-align: end;
    padding: 0px 20px 0 25%;
}

.contact-section h6 {
    font-weight: 400;
    margin-bottom: 24px;
}

.contact-hotel {
    color: var(--cream);
    font-weight: 300;
}

.contact-line {
    width: 50%;
    height: 1px;
    background-color: black;
    margin-bottom: 24px;
    display: inline-block;
}

.contact-section p {
    font-size: 12px;
    font-weight: 300;
}

.contact-form {
    margin-top: 40px !important;
    margin: auto;
    text-align: center;
    padding: 0 20px 0 20%;
}

.contact-form h6 {
    font-weight: 300;
    margin-top: 16px;
    letter-spacing: 1px;
}

.contact-form input {
    background-color: rgba(0, 0, 0, 0);
    font-size: 12px;
    height: 38px;
    border-radius: 10px;
}


.form-check input {
    height: 1em;
}

.form-check label {
    font-size: 10px;
    text-align: left;
    display: block;
}

.contact-form button {
    padding: 10px 70px;
    color: white;
    background-color: var(--cream);
    border: none;
    font-size: 12px;
    letter-spacing: 1px;
    font-weight: 300;
}

.contact-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.contact-form-button {
    justify-content: end;
}

/* campaigns page */

.campaigns-header-bg img {
    width: 100%;
}

.campaigns-page-section {
    padding: 40px 0 70px;
}

.campaigns-page-col {
    margin-bottom: 1rem;
}

.campaigns-page-col h6 {
    color: var(--cream);
    letter-spacing: 1px;
    font-family: 'Marcellus';
    margin-bottom: 1rem;
}

.campaigns-page-col h5 {
    font-weight: 300;
    margin-bottom: 1rem;
    letter-spacing: 2px;
}

.campaigns-page-col .campaigns-page-line {
    width: 5%;
    background-color: #000;
    margin: auto;
    margin-bottom: 1rem;
    height: 1px;
}

.campaigns-page-col p {
    font-size: 14px;
    padding: 0 10%;
    font-weight: 300;
}

.campaigns-page-slider img {
    height: 400px;
    transform: scale(0.9);
}

.center img {
    transform: scale(1);
}

.campaigns-page-content {
    color: white;
    padding: 12px 0 0 0;
    transform: scale(0.9);
    margin-top: -100px;
    background: rgba(255, 255, 255, 0);
}

.center .campaigns-page-content {
    margin-top: -80px;
    background: linear-gradient(88.83deg, #BEB7AE 0%, #EFE1D0 99%);
    transform: scale(1);
}

.campaigns-page-content h6 {
    font-size: 12px;
    font-weight: 400;
}

.campaigns-page-content p {
    font-size: 10px;
}

.campaigns-page-arrow {
    align-self: center;
}

.campaigns-page-arrow-image {
    height: 12px !important;
    width: 100px !important;
    object-fit: contain;
}

/* gallery page */

.gallery-page-section {
    padding: 40px 0 70px;
}

.gallery-page-col {
    margin-bottom: 1rem;
}

.gallery-page-col h6 {
    color: var(--cream);
    letter-spacing: 1px;
    font-family: 'Marcellus';
    margin-bottom: 1rem;
}

.gallery-page-col h5 {
    font-weight: 300;
    margin-bottom: 1rem;
    letter-spacing: 2px;
}

.gallery-page-col .gallery-page-line {
    width: 5%;
    background-color: #000;
    margin: auto;
    margin-bottom: 1rem;
    height: 1px;
}

.gallery-page-col p {
    font-size: 14px;
    padding: 0 10%;
    font-weight: 300;
}

.gallery-titles {
    margin-bottom: 40px;
}

.gallery-titles a {
    color: var(--cream);
    margin-right: 8px;
    margin-left: 8px;
    padding: 8px 24px;
    border: 1px solid;
    border-radius: 10px;
    letter-spacing: 1px;
    font-size: 12px;
    font-weight: 300;
}

.gallery-titles a:hover, .g-active {
    background-color: var(--cream);
    color: white !important;
}

.gallery-images-section {
    width: 75%;
    margin: auto;
    padding: 5px 0 50px;
}

.gallery-images-section .col-md-4 {
    padding: 8px;
}

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

.gallery-images a {
    width: 900px;
    height: auto;
    object-fit: cover;
}

.glightbox-clean .gprev, .glightbox-clean .gnext, .glightbox-clean .gclose {
    background-color: rgba(255, 255, 255, 0) !important;
}

.gallery-left-logo {
    position: absolute;
    left: 0;
    top: 100px;
    height: 450px;
}

.desktop-hide {
    display: none;
}

.desktop-show {
    display: block;
}

@media only screen and (max-width: 1200px) {
    .room-slider .owl-stage-outer {
        height: 450px !important;
    }

    .room-slider .owl-next {
        left: 8%;
    }

    .roomspage-rooms-detail {
        width: auto;
    }

    .facility-slider img {
        transform: scale(1);
        object-fit: cover;
    }

    .index-facility-arrow-image {
        width: unset !important;
        object-fit: contain !important;
    }

    .room-detail-slider img {
        height: 715px;
        object-fit: cover;
    }

    .room-detail-slider .owl-prev {
        right: 11%;
    }

    .otherrooms-slider .owl-prev {
        position: absolute;
        top: 40%;
        left: -11%;
        width: 30px;
        height: 30px;
        border-radius: 50% !important;
        color: white !important;
        background-color: var(--cream) !important;
    }

    .otherrooms-slider .owl-next {
        position: absolute;
        top: 40%;
        right: -11%;
        width: 30px;
        height: 30px;
        border-radius: 50% !important;
        color: white !important;
        background-color: var(--cream) !important;
    }

    .facility-detail-slider img {
        height: 715px;
        object-fit: cover;
    }

    .facility-detail-slider .owl-prev {
        right: 11%;
    }

    .other-facilities-slider img {
        object-fit: cover;
        transform: scale(1);
    }

    .other-facilities-arrow-image {
        object-fit: contain !important;
        transform: unset !important;
    }

    .contact-form-button {
        justify-content: center;
    }

    .gallery-images img {
        height: 180px;
    }

    .gallery-titles {
        display: flex;
        overflow: auto;
        margin-bottom: 36px;
    }

    .gallery-titles a {
        padding: 12px 16px;
        align-self: center;
    }

    .campaigns-page-slider img {
        object-fit: cover;
        transform: scale(1);
    }

    .campaigns-page-arrow-image {
        object-fit: contain !important;
        transform: unset !important;
    }

    .contact-left-logo {
        display: none;
    }

    .gallery-left-logo {
        display: none;
    }
}

@media only screen and (max-width: 600px) {
    .mobile-hide {
        display: none;
    }

    .mobile-show {
        display: block;
    }

    /* mobile-header */
    .language-menu-hidden {
        top: 55px;
    }

    .menu-phone {
        display: none;
    }

    .logo img {
        width: 140px;
    }

    .menu-opportunities {
        display: none;
    }

    .menu-reservation {
        padding: 7px;
        margin-left: 5px;
    }

    /* mobile-index-about */
    .about-section {
        margin-top: 0;
    }

    .about-section h6 {
        margin-bottom: 1rem;
    }

    .about-section h4 {
        margin-bottom: 1rem;
    }

    .about-section a {
        padding: 15px 20px;
        font-size: 10px;
    }

    .about-section p {
        padding: 0px 3%;
        margin-bottom: 28px;
    }

    /* mobile-index-villa */
    .villa-row {
        margin-top: 10px;
        margin-bottom: 40px;
    }

    .villa-section {
        margin-top: 0;
        padding: 15px 0 40px;
    }

    .villa-section .villa-line {
        width: 25%;
    }

    .villa-caption {
        opacity: 1;
        top: 48%;
    }

    .villa-image {
        filter: brightness(0.7);
    }

    .villa-section a {
        font-size: 10px;
    }

    .mobile-villa-hand {
        position: absolute;
        bottom: 20px;
        right: 24px;
    }

    .mobile-villa-hand img {
        height: 32px;
    }

    /* mobile-index-campaigns */
    .campaign-section {
        margin-top: 0;
    }

    .campaign-content {
        height: 500px;
        width: 215px;
        left: 5%;
        top: 24px;
    }

    .campaign-section .item {
        padding: 40px 0 50px;
    }

    .campaign-text p {
        margin-bottom: 15px;
    }

    .campaign-line {
        margin-top: 15px;
    }

    /* mobile-index-room */
    .index-room-section {
        margin-top: 0;
        padding: 10px 0;
    }

    .index-room-header p {
        margin-bottom: 0;
    }

    .room-slider .owl-stage-outer {
        height: 600px !important;
    }

    .index-room-content {
        padding: 0;
    }

    .index-room-content h6 {
        margin-top: 1rem;
        margin-bottom: 0.5rem;
    }

    .index-room-content h5 {
        margin-bottom: 1rem;
    }

    .index-room-header .index-room-line {
        width: 25%;
    }

    .index-room-content .index-room-content-line {
        margin: auto;
        margin-bottom: 1rem;
        width: 25%;
    }

    .room-slider .owl-next {
        bottom: 8%;
        left: unset;
        right: 8%;
    }

    .room-slider .owl-prev {
        bottom: 8%;
        left: unset;
        right: 17%;
    }

    .mobile-index-room-shadow {
        box-shadow: 0px 4px 7px rgb(0 0 0 / 8%);
        width: 94%;
        margin: auto;
        padding-top: 10px;
        display: block;
        padding-bottom: 42px;
        background-color: white;
    }

    .mobile-index-room-shadow img {
        border-radius: 12px 12px 0 0;
    }

    /* mobile-index-facilities */
    .index-facilities-section {
        margin-top: 0;
        padding: 0;
    }

    .index-facilities-col .index-facilities-line {
        width: 25%;
    }

    .index-facilities-col p {
        padding: 0 5%;
    }

    /* mobile-footer */
    footer {
        text-align: center;
    }

    .footer-address {
        margin-bottom: 22px;
    }

    .footer-social {
        text-align: center;
    }

    .footer-links {
        margin-bottom: 16px;
    }

    .footer-copyright {
        text-align: center;
    }

    .footer-mobile-center {
        justify-content: center;
    }

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

    .mobile-footer-other-options span {
        border: 1px solid;
        padding: 10px 50px;
        border-radius: 8px;
        font-size: 14px;
    }

    /* mobile-roomspage */
    .room-detail-header {
        height: 90px;
    }

    .roomspage-rooms-detail {
        width: 90%;
        margin: auto;
        margin-bottom: 36px;
    }

    .roomspage-about-section .roomspage-line {
        width: 15%;
    }

    .roomspage-about-section {
        padding: 30px 0 15px;
    }

    .room-detail-slider img {
        border-radius: 12px 12px 0 0;
        height: auto;
    }

    .mobile-room-detail-name {
        font-weight: 300;
        margin-top: 20px;
        margin-bottom: 16px;
        letter-spacing: 2px;
    }

    .mobile-room-detail-content-line {
        width: 30%;
        margin: auto;
        height: 1px;
        background-color: #000;
        margin-bottom: 30px;
    }

    .mobile-room-detail-content {
        padding: 0 16px;
    }

    .mobile-room-detail-content-line2 {
        width: 30%;
        height: 1px;
        background-color: rgba(117, 110, 101, 1);
        margin-bottom: 20px;
        margin-top: 20px;
    }

    .mobile-room-detail-properties img {
        height: 24px;
        width: 24px;
        object-fit: contain;
        margin-right: 12px;
    }

    .mobile-room-detail-properties span {
        color: rgba(117, 110, 101, 1);
        letter-spacing: 1px;
        font-size: 14px;
    }

    .room-detail-slider .owl-prev {
        right: 14%;
    }

    .room-detail-otherrooms-section .otherrooms-line {
        width: 25%;
    }

    .otherrooms-slider .owl-prev {
        position: absolute;
        top: 40%;
        left: -14%;
        width: 30px;
        height: 30px;
        border-radius: 50% !important;
        color: white !important;
        background-color: var(--cream) !important;
    }

    .otherrooms-slider .owl-next {
        position: absolute;
        top: 40%;
        right: -14%;
        width: 30px;
        height: 30px;
        border-radius: 50% !important;
        color: white !important;
        background-color: var(--cream) !important;
    }

    .otherrooms-slider .owl-prev:hover, .otherrooms-slider .owl-next:hover {
        background-color: var(--cream) !important;
    }

    .room-detail-otherrooms-section {
        padding: 15px 0 15px;
    }

    .otherrooms-container {
        margin-top: 20px;
    }

    .otherrooms-container {
        width: 83%;
        margin: auto;
        margin-top: 40px;
    }

    /* mobile-gallery-page */
    .gallery-page-section {
        padding: 40px 0 10px;
    }

    .gallery-page-col .gallery-page-line {
        width: 15%;
    }

    .gallery-titles {
        display: flex;
        overflow: auto;
        margin-bottom: 36px;
    }

    .gallery-titles a {
        padding: 12px 16px;
        align-self: center;
    }

    .gallery-images img {
        height: auto;
        width: 100%;
        object-fit: cover;
    }

    .gallery-left-logo {
        display: none;
    }

    /* mobile-facility-detail-page */
    .facility-detail-header {
        height: 90px;
    }

    .facility-detail-left-logo {
        display: none;
    }

    .facility-detail-slider img {
        height: auto;
    }

    .room-detail-slider img {
        border-radius: 12px 12px 0 0;
    }

    .mobile-facility-detail-name {
        font-weight: 300;
        margin-top: 20px;
        margin-bottom: 16px;
        letter-spacing: 2px;
    }

    .mobile-facility-detail-content-line {
        width: 30%;
        margin: auto;
        height: 1px;
        background-color: #000;
        margin-bottom: 30px;
    }

    .mobile-facility-detail-content {
        padding: 0 16px;
    }

    .mobile-facility-detail-content-line2 {
        width: 30%;
        height: 1px;
        background-color: rgba(117, 110, 101, 1);
        margin-bottom: 20px;
        margin-top: 20px;
    }

    .mobile-facility-detail-properties img {
        height: 24px;
        width: 24px;
        object-fit: contain;
        margin-right: 12px;
    }

    .mobile-facility-detail-properties span {
        color: rgba(117, 110, 101, 1);
        letter-spacing: 1px;
        font-size: 14px;
    }

    .other-facilities-section {
        padding: 10px 0 40px;
    }

    .facility-detail-slider .owl-prev {
        right: 14%;
    }

    /* contact-page */
    .contact-left-logo {
        display: none;
    }

    .contact-section {
        padding: 40px 0 20px;
    }

    .contact-information {
        text-align: center;
        padding: 0px 20px 0;
    }

    .contact-form {
        margin-top: 40px !important;
        margin: auto;
        text-align: center;
        padding: 0 8px 30px;
    }

    .contact-form-button {
        justify-content: center;
    }

    .contact-form button {
        padding: 10px 50px;
    }

    /* mobile-campaigns-page */
    .campaigns-page-section {
        padding: 40px 0 30px;
    }

    .campaigns-header-bg img {
        height: 110px;
    }

    .campaigns-page-col .campaigns-page-line {
        width: 25%;
    }

    .header-menu-reservation {
        display: none;
    }

    .campaign-decoration {
        display: none !important;
    }

}

.index-room-view {
    color: black;
    border: 1px solid black;
    padding: 10px 30px;
    font-size: 12px;
    border-radius: 3px;
}

.index-room-view:hover {
    color: black;
}

.facility-detail-slider img {
    max-height: 600px !important;
    object-fit: cover;
}

.flex-table {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.flex-row {
    display: flex;
    border-bottom: 1px solid #ddd;
}

.flex-table.fivecol .flex-cell:nth-child(1) {
    flex: 0 0 10%;
}

.flex-table.fivecol .flex-cell:first-child {
    flex: 0 0 10%;
}

.flex-cell:first-child {
    flex: 0 0 20%;
}

.flex-cell {
    flex: 1;
    padding: 8px;
}

.non-image {
    height: 100px;
    background-color: var(--cream)
}

.header-menu-reservation {
    font-size: 12px;
    color: #fff;
    margin-right: 15px;
    padding: 9px 36px;
    background-color: #f6e1d0bf;
}

.header-bg-404 {
    height: 100px;
    background-color: var(--cream);
}

.content-404 {
    height: 700px;
    position: relative;
    margin-top: 100px;
}

.header-404 {
    position: relative;
}

.header-404-h1 {
    padding-top: 20px;
    letter-spacing: 1px;
    font-weight: 400;
}

.main-404 {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-top: -40px;
    height: 435px;
}

.wrapper-404 {
    display: flex;
    margin-top: -10px;
    gap: 20px;
}

.content-4 {
    font-size: 210px;
    color: var(--gray);
}

.main-0 {
    position: relative;
    width: 300px;
    justify-content: center;
    display: flex;
}

.content-0 {
    font-size: 210px;
    color: var(--gray);
    z-index: 1;
    position: relative;
}

.content-0-upper {
    width: 210px;
    height: 150px;
    background-color: #d9d9d9;
    position: absolute;
    top: 40px;
    border-bottom-left-radius: 30%;
    border-top-left-radius: 20%;
    z-index: 0;
    right: 45px;
    border-top-right-radius: 10%;
}

.content-0-right {
    width: 156px;
    position: absolute;
    top: 190px;
    z-index: 0;
    height: 60px;
    right: 45px;
    background-color: #d9d9d9;
    border-bottom-left-radius: 30%;
}

.content-0-bottom {
    width: 210px;
    position: absolute;
    top: 190px;
    z-index: 0;
    height: 230px;
    right: 45px;
    background-color: #d9d9d9;
    border-top-left-radius: 40%;
    border-bottom-left-radius: 10%;
    border-bottom-right-radius: 10%;
}

.text-404 {
    height: 100%;
    display: flex;
    width: 95%;
    margin: auto;
    justify-content: end;
    flex-direction: column;
    text-align: center;
}

.img-404 {
    width: 160px;
    object-fit: cover;
    align-self: center;
    margin-bottom: 30px;
}

.links-404 {
    gap: 25px;
    margin-top: 30px;
    display: flex;
    justify-content: center;
}

.content-detail-a {
    color: black;
    margin-bottom: 20px;
    padding-bottom: 10px;
    position: relative
}

.content-detail-a:hover {
    color: #000;
}


.back-to-404 {
    position: absolute;
    top: 32px;
    left: 60px;
    align-items: center;
    color: black;
    display: flex;
}

.back-to-i {
    padding-right: 6px;
    font-size: 12px;
}

.back-to-404:hover {
    color: #000;
}

.alt-content-404 {
    margin-top: 12px;
}

@media (max-width: 900px) {
    .main-404 {
        gap: 40px;
    }
}

@media (max-width: 600px) {

    .content-404 {
        padding-top: 25px;
        height: 410px;
    }

    .header-404-h1 {
        padding-top: 10px;
        font-size: 16px;
    }

    .main-404 {
        gap: 20px;
        margin-top: -20px;
        height: 230px;
    }

    .content-4 {
        font-size: 100px;
    }

    .main-0 {
        width: 100px;
    }

    .content-0 {
        font-size: 100px;
    }

    .content-0-upper {
        width: 85px;
        height: 60px;
        right: 10px;
        top: 30px;
        border-bottom-left-radius: 34%;
    }

    .content-0-right {
        width: 60px;
        top: 89px;
        height: 20px;
        right: 10px;
    }

    .content-0-bottom {
        width: 85px;
        top: 100px;
        z-index: 0;
        height: 100px;
        right: 10px;
    }

    .img-404 {
        width: 60px;
        object-fit: cover;
        align-self: center;
        margin-bottom: 15px;
    }

    .content-detail-a {
        padding: 5px 10px;
        margin-top: -20px;
        margin-bottom: 30px;
        font-size: 12px;
    }

    .back-to-404 {
        top: 24px;
        left: 16px;
    }

    .wrapper-404 {
        margin-top: 30px;
    }

    .alt-content-404 {
        margin-top: 30px;
    }

    .links-404 {
        display: block;
    }

    .header-bg-404 {
        height: 90px;
    }

    .back-to-i {
        padding-right: 4px;
    }

}