/* Define Noto Sans Lao font */
@font-face {
    font-family: 'Noto Sans Lao';   /* Use quotes and full name */
    src: url('../fonts/NotoSansLao.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Define Roboto font */
@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Add other fonts similarly, e.g. Noto Sans Thai and Noto Sans KR if you have them */

/* Body font stack */
body {
    font-family:
        'Noto Sans Lao',
        'Noto Sans Thai',
        'Noto Sans KR',
        'Roboto',
        sans-serif;
}

/* Specific classes for language/font usage */
.font-en {
    font-family: 'Roboto', sans-serif;
}

.font-th {
    font-family: 'Noto Sans Thai', sans-serif;
}

.font-lo {
    font-family: 'Noto Sans Lao', sans-serif;
}

.font-kr {
    font-family: 'Noto Sans KR', sans-serif;
}

/*--------------------------------------------------------------
# Root
--------------------------------------------------------------*/
:root {
    --font-primary: "NotoSansLao";
    --font-secondary: "Roboto";

    --color-default: #374151;
    --color-primary: #4B5563;
    --color-secondary: #6B7280;
    --color-background: #F6F6F6;
    --color-white: #FFF;
    --color-black: #222;
    --color-green: #28A745;
    --color-blue: #007BFF;

    --color-default-rgb: 55, 65, 81;
    --color-primary-rgb: 75, 85, 99;
    --color-secondary-rgb: 107, 114, 128;
    --color-background-rgb: 246, 246, 246;
    --color-white-rgb: 255, 255, 255;
    --color-black-rgb: 34, 34, 34;
    --color-green-rgb: 40, 167, 69;
    --color-blue-rgb: 0, 123, 255;

    --font-header: 28px;
    --font-title: 28px;
    --font-text: 16px;
    --font-sm-header: 24px;
    --font-sm-title: 18px;
    --font-sm-text: 14px;

    --font-icon-big: 56px;
    --font-icon-middle: 48px;
    --font-icon-small: 40px;

    scroll-behavior: smooth;
}

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body {
    color: var(--color-default);
}

a {
    color: var(--color-primary);
    text-decoration: none;
}

a:hover {
    color: var(--color-default);
    text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin-bottom: 0;
}

.font-primary {
    font-family: var(--font-primary);
}

.font-secondary {
    font-family: var(--font-secondary);
}

.border-green {
    border: 1px solid var(--color-green) !important;
    box-shadow: 0px 0px 4px 2px rgba(var(--color-green-rgb), 0.5);
}

.form-check-input:checked {
    background-color: var(--color-green);
    border-color: var(--color-green);
}

.break-all-text {
    word-break: break-all !important;
}

/*--------------------------------------------------------------
# Sections & Section Header
--------------------------------------------------------------*/
#section {
    padding: 60px 0;
    overflow: hidden;
}

.section-title {
    text-align: center;
    padding-bottom: 30px;
}

.section-title h2 {
    position: relative;
    color: var(--color-default);
    font-size: var(--font-header);
    font-weight: 700;
    margin-bottom: 16px;
    padding-bottom: 16px;
}

.section-title h2::before {
    content: "";
    position: absolute;
    display: block;
    background: var(--color-secondary);
    bottom: 1px;
    left: calc(50% - 100px); /* 200px total, 100px each side */
    width: 200px;
    height: 1px;
}

.section-title h2::after {
    content: "";
    position: absolute;
    display: block;
    width: 100px; /* optional inner bar */
    height: 3px;
    background: var(--color-default);
    bottom: 0;
    left: calc(50% - 50px); /* center 100px */
}
.section-title p {
    margin-bottom: 0;
}

.section-hero {
    display: flex;
    align-items: center;
    background: var(--color-secondary);
    height: 100px;
}

.section-hero .section-hero-title {
    color: var(--color-white);
    font-size: var(--font-header);
    font-weight: 600;
}

/*--------------------------------------------------------------
# Breadcrumbs
--------------------------------------------------------------*/
.breadcrumbs {
    background: var(--color-background);
    padding: 8px 0;
}

.breadcrumbs ol {
    display: flex;
    color: var(--color-default);
    flex-wrap: wrap;
    font-size: var(--font-text);
    font-weight: 500;
    list-style: none;
    margin: 0;
    padding: 0;
}

.breadcrumbs ol a {
    color: var(--color-primary);
    transition: 0.3s;
}

.breadcrumbs ol a:hover {
    text-decoration: underline;
}

.breadcrumbs ol li+li {
    padding-left: 8px;
}

.breadcrumbs ol li+li::before {
    content: "/";
    display: inline-block;
    color: var(--color-secondary);
    padding-right: 8px;
}

/*--------------------------------------------------------------
# Scroll top button
--------------------------------------------------------------*/
.scroll-top {
    position: fixed;
    background: var(--color-secondary);
    border-radius: 50%;
    bottom: -100px;
    right: 20px;
    width: 40px;
    height: 40px;
    transition: all 0.4s;
    visibility: hidden;
    opacity: 0;
    z-index: 99999;
}

.scroll-top i {
    color: var(--color-white);
    font-size: var(--font-header);
    line-height: 0;
}

.scroll-top:hover {
    background: var(--color-default);
    color: var(--color-white);
}

.scroll-top.active {
    visibility: visible;
    opacity: 1;
    bottom: 100px;
}
/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/
.back-to-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 15px;
  z-index: 996;
  background: #01b;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  transition: all 0.4s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-to-top i {
  font-size: 28px;
  color: #fff;
}

.back-to-top:hover {
  background: #03d1fe;
  color: #fff;
}

.back-to-top.active {
  visibility: visible;
  opacity: 1;
}


/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
  position: fixed;
  background: var(--color-white);
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.5s ease-out;
}

#preloader::before {
  content: "";
  width: 50px;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(farthest-side, #ffa516 94%, #0000) top/8px 8px no-repeat,
    conic-gradient(#0000 30%, #ffa516);
  -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 8px), #000 0);
  animation: l13 1s infinite linear;
}

@keyframes l13 {
  100% {
    transform: rotate(1turn);
  }
}
/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
.header {
    background: var(--color-white);
    height: 80px;
    transition: all 0.5s;
    z-index: 997;
}

.header.sticked {
    position: fixed;
    box-shadow: 0px 4px 16px rgba(var(--color-black-rgb), 0.25);
    top: 0;
    right: 0;
    left: 0;
}

.header .logo img {
    max-height: 60px;
    margin-right: 8px;
}

.header .logo i {
    color: var(--color-primary);
    font-size: var(--font-sm-header);
    margin-right: 8px;
}

.header .logo span {
    color: var(--color-primary);
    font-size: var(--font-sm-title);
}

.header .btn-getstarted,
.header .btn-getstarted:focus {
    border: 2px solid var(--color-primary);
    border-radius: 16px;
    color: var(--color-secondary);
    font-size: var(--font-text);
    font-weight: 600;
    margin-right: 16px;
    padding: 8px 16px;
}

.header .btn-getstarted i,
.header .btn-getstarted:focus i {
    font-size: var(--font-text);
    line-height: 0;
    margin-right: 8px;
}

.header .btn-getstarted:hover,
.header .btn-getstarted:focus:hover {
    color: var(--color-white);
    background: var(--color-primary);
}

.sticked-header-offset {
    margin-top: 80px;
}

section {
    scroll-margin-top: 80px;
}

/*--------------------------------------------------------------
# Navbar
--------------------------------------------------------------*/
.navbar {
    padding: 0;
}

.navbar ul {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.navbar li {
    position: relative;
}

.navbar>ul>li {
    padding: 8px 0 8px 24px;
    white-space: nowrap;
}

.navbar a,
.navbar a:focus {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--color-secondary);
    font-size: var(--font-sm-title);
    font-weight: 600;
    transition: 0.3s;
    white-space: nowrap;
}

.navbar>ul>li>a:before {
    content: "";
    position: absolute;
    background: var(--color-primary);
    bottom: -4px;
    height: 2px;
    left: 0;
    transition: all 0.3s ease-in-out 0s;
    visibility: hidden;
    width: 0px;
}

.navbar a:hover:before,
.navbar li:hover>a:before,
.navbar .active:before {
    visibility: visible;
    width: 100%;
}

.navbar a:hover,
.navbar .active,
.navbar .active:focus,
.navbar li:hover>a {
    color: var(--color-primary);
}

.navbar .btn-getstarted,
.navbar .btn-getstarted:focus {
    border: 2px solid var(--color-primary);
    border-radius: 16px;
    color: var(--color-secondary);
    font-size: var(--font-text);
    font-weight: 600;
    margin-right: 0;
    padding: 8px 16px;
}

.navbar .btn-getstarted i,
.navbar .btn-getstarted:focus i {
    font-size: var(--font-text);
    line-height: 0;
    margin-right: 8px;
}

.navbar .btn-getstarted:before {
    height: 0;
}

.navbar .btn-getstarted:hover,
.navbar .btn-getstarted:focus:hover {
    color: var(--color-white);
    background: var(--color-primary);
}

.navbar .dropdown ul {
    position: absolute;
    display: block;
    background: var(--color-white);
    box-shadow: 0px 0px 20px rgba(var(--color-secondary-rgb), 0.25);
    border-radius: 4px;
    left: 28px;
    top: calc(100% + 30px);
    margin: 0;
    padding: 10px 0;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
    z-index: 99;
}

.navbar .dropdown ul li {
    min-width: 200px;
}

.navbar .dropdown ul a {
    color: var(--color-secondary);
    font-size: var(--font-text);
    font-weight: 600;
    padding: 10px 20px;
    text-transform: none;
}

.navbar .dropdown ul a:hover,
.navbar .dropdown ul .active:hover,
.navbar .dropdown ul li:hover>a {
    color: var(--color-primary);
}

.navbar .dropdown:hover>ul {
    opacity: 1;
    top: 100%;
    visibility: visible;
}

/*--------------------------------------------------------------
# Hero
--------------------------------------------------------------*/
.hero {
    height: calc(600px + 51px);
}

.hero .hero-background {
    position: relative;
}

.hero .hero-background img {
    height: 600px;
    width: 100%;
    object-fit: cover;
}

.hero .hero-background .hero-detail {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: rgba(var(--color-black-rgb), 0.5);
    color: var(--color-white);
    inset: 0;
}

.hero .hero-background .hero-detail .hero-title {
    font-size: var(--font-header);
    font-weight: 600;
    margin-bottom: 8px;
    text-align: center;
}

.hero .hero-background .hero-detail .btn-get-started {
    border: 2px solid var(--color-white);
    border-radius: 50px;
    color: var(--color-white);
    font-size: var(--font-text);
    font-weight: 600;
    padding: 8px 16px;
    transition: 0.3s;
}

.hero .hero-background .hero-detail .btn-get-started:hover {
    background: var(--color-white);
    color: var(--color-secondary);
}

.hero .swiper-button-prev::after,
.hero .swiper-button-next::after {
    color: var(--color-white);
    font-size: var(--font-header);
    font-weight: 800;
}

.hero .hero-search {
    position: relative;
    top: -51px;
}

.hero .hero-search .search-box {
    background: var(--color-white);
    box-shadow: 0px 0px 16px rgba(var(--color-secondary-rgb), 0.5);
    border-radius: 16px;
    padding: 16px;
    width: 900px;
    z-index: 1;
}

.hero .hero-search .search-box .form-label {
    color: var(--color-secondary);
    font-size: var(--font-text);
    font-weight: 600;
}

.hero .hero-search .search-box .form-control,
.hero .hero-search .search-box .form-select {
    border: 1px solid var(--color-secondary);
}

.hero .hero-search .search-box .btn-submit {
    margin-top: auto;
}

.hero .hero-search .search-box .btn-submit button {
    background: var(--color-secondary);
    border: 1px solid var(--color-secondary);
    border-radius: 4px;
    color: var(--color-white);
    padding: 6px 16px;
    width: 100%;
}

.hero .hero-search .search-box .btn-submit button:hover {
    background: var(--color-primary);
    border: 1px solid var(--color-primary);
    color: var(--color-white);
}

/*--------------------------------------------------------------
# Room
--------------------------------------------------------------*/
.room .card {
    box-shadow: 0px 0px 16px rgba(var(--color-secondary-rgb), 0.25);
    border: 0;
    height: 100%;
    padding: 16px;
    min-height: 400px;
}

.room .card .room-img {
    position: relative;
    margin: -16px -16px 0 -16px;
    overflow: hidden;
    text-align: center;
    transition: 0.3s;
}

.room .card .room-img img {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    width: 100%;
    height: 300px;
    object-fit: cover;
    transition: 0.3s;
}

.room .card:hover .room-img img {
    transform: scale(1.05);
}

.room .room-img .room-type {
    position: absolute;
    background: var(--color-primary);
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    color: var(--color-white);
    bottom: 0;
    left: 16px;
    padding: 4px 8px 0 8px;
}

.room .room-img .room-type span {
    font-size: var(--font-sm-text);
}

.room .card .room-title {
    display: -webkit-box;
    color: var(--color-primary);
    font-size: 24px;
    font-weight: 600;
    margin: 8px 0 0 0;
    padding: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: 0.3s;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.room .card .room-content {
    display: -webkit-box;
    color: var(--color-secondary);
    font-size: var(--font-sm-text);
    margin: 8px 0 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.room .card .room-icons {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--color-secondary);
    margin: 24px 0 0 0;
    padding: 0 0 8px 0;
}

.room .card .room-icons i {
    border-left: 1px solid var(--color-secondary);
    color: var(--color-secondary);
    font-size: var(--font-sm-title);
    padding: 0 4px;
}

.room .card .room-icons i:first-child {
    border-left: 0;
    padding: 0 4px 0 0;
}

.room .card .room-price {
    color: var(--color-default);
    font-size: var(--font-sm-title);
    font-weight: 600;
    margin: 8px 0 0 0;
}


.room .card .room-price span {
    color: var(--color-secondary);
    font-size: var(--font-sm-title);
    font-weight: 600;
    margin: 0 4px 0 0;
}

/*--------------------------------------------------------------
# Room View
--------------------------------------------------------------*/
.room-view .room-detail {
    display: flex;
    align-items: end;
    justify-content: space-between;
    margin-bottom: 16px;
}

.room-view .room-detail .room-title span {
    color: var(--color-primary);
    font-size: var(--font-title);
    font-weight: 600;
    margin-bottom: 8px;

}

.room-view .room-detail .room-title span:last-child {
    color: var(--color-secondary);
    font-size: var(--font-text);
    font-weight: 500;
    margin-bottom: 0;
}

.room-view .room-detail .room-price {
    color: var(--color-default);
    font-size: var(--font-sm-header);
    font-weight: 600;
    margin: 8px 0 0 0;
}

.room-view .room-detail .room-price span {
    color: var(--color-secondary);
    font-size: var(--font-title);
    font-weight: 600;
    margin: 0 4px 0 0;
}

.room-view .room-view-swiper-top {
    text-align: center;
    margin: 0 0 16px 0;
}

.room-view .room-view-swiper-top img {
    max-width: 100%;
    height: 400px;
    object-fit: contain;
}

.room-view .room-view-swiper-top .swiper-button-next::after,
.room-view .room-view-swiper-top .swiper-button-prev::after {
    color: var(--color-primary);
    font-size: var(--font-header);
    font-weight: 800;
}

.room-view .room-view-swiper-bottom {
    text-align: center;
}

.room-view .room-view-swiper-bottom img {
    max-width: 100%;
    height: 100px;
    object-fit: contain;
}
.swiper-slide {
  width: 100%;
  overflow: hidden;
}

.room-view .room-view-swiper-bottom .swiper-slide {
    opacity: 0.25;
}

.room-view .room-view-swiper-bottom .swiper-slide-thumb-active {
    opacity: 1;
}

.swiper-slide img {
  animation: slow-zoom 20s ease-in-out infinite;
  transform-origin: center center;
}

@keyframes slow-zoom {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.08); /* You can increase for more zoom */
  }
  100% {
    transform: scale(1);
  }
}

.room-view .room-title {
    color: var(--color-primary);
    font-size: var(--font-title);
    font-weight: 600;
    margin-top: 16px;
}

.room-view .room-content {
    margin-top: 8px;
}

.room-view .room-content .info {
    color: var(--color-primary);
    font-size: var(--font-text);
    font-weight: 600;
    margin-bottom: 8px;
}

.room-view .room-content .info span {
    color: var(--color-secondary);
    font-weight: 600;
}

.room-view .room-description {
    color: var(--color-secondary);
    font-size: var(--font-text);
}

.room-view .room-view-detail .room-title-detail {
    color: var(--color-primary);
    font-size: var(--font-title);
    font-weight: 600;
    margin-bottom: 8px;
}

.room-view .room-amenity {
    margin-top: 16px;
    margin-bottom: 16px;
}

.room-view .room-amenity .title {
    color: var(--color-primary);
    font-size: var(--font-title);
    font-weight: 600;
    margin-bottom: 8px;
}

.room-view .room-amenity .amenity-box {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.room-view .room-amenity .info {
    border-left: 1px solid var(--color-primary);
    color: var(--color-primary);
    font-size: var(--font-text);
    font-weight: 600;
    margin-bottom: 8px;
    padding-left: 8px;
    padding-right: 8px;
}

.room-view .room-amenity .info i {
    font-size: var(--font-title);
    margin-right: 4px;
}

.room-view .room-view-detail .card {
    box-shadow: 0px 0px 16px rgba(var(--color-secondary-rgb), 0.25);
    border: 0;
    height: 100%;
    padding: 16px;
}

.room-view .room-view-detail .card .room-img {
    position: relative;
    margin: -16px -16px 0 -16px;
    overflow: hidden;
    text-align: center;
    transition: 0.3s;
}

.room-view .room-view-detail .card .room-img img {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: 0.3s;
}

.room-view .room-view-detail .card:hover .room-img img {
    transform: scale(1.05);
}

.room-view .room-view-detail .room-img .room-type {
    position: absolute;
    background: var(--color-primary);
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    color: var(--color-white);
    bottom: 0;
    left: 16px;
    padding: 4px 8px 0 8px;
}

.room-view .room-view-detail .room-img .room-type span {
    font-size: var(--font-sm-text);
}

.room-view .room-view-detail .card .room-title {
    display: -webkit-box;
    color: var(--color-primary);
    font-size: var(--font-sm-title);
    font-weight: 600;
    margin: 8px 0 0 0;
    padding: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: 0.3s;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.room-view .room-view-detail .card .room-content {
    display: -webkit-box;
    color: var(--color-secondary);
    font-size: var(--font-sm-text);
    margin: 8px 0 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.room-view .room-view-detail .card .room-icons {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--color-secondary);
    margin: 24px 0 0 0;
    padding: 0 0 8px 0;
}

.room-view .room-view-detail .card .room-icons i {
    border-left: 1px solid var(--color-secondary);
    color: var(--color-secondary);
    font-size: var(--font-sm-title);
    padding: 0 4px;
}

.room-view .room-view-detail .card .room-icons i:first-child {
    border-left: 0;
    padding: 0 4px 0 0;
}

.room-view .room-view-detail .card .room-price {
    color: var(--color-default);
    font-size: var(--font-sm-title);
    font-weight: 600;
    margin: 8px 0 0 0;
}

.room-view .room-view-detail .card .room-price span {
    color: var(--color-secondary);
    font-size: var(--font-sm-title);
    font-weight: 600;
    margin: 0 4px 0 0;
}
.section-bg {
    background: rgba(var(--color-secondary-rgb), 0.1);
}
/*--------------------------------------------------------------
# Service
--------------------------------------------------------------*/
.service-bg {
    background-image: url(../images/service/service_bg_top.png), url(../images/service/service_bg_bottom.png);
    background-position: top left, bottom right;
    background-repeat: no-repeat;
}

.service .card {
    box-shadow: 0px 0px 16px rgba(var(--color-secondary-rgb), 0.25);
    border: 0;
    height: 100%;
    padding: 16px;
}

.service .card .service-title {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: var(--color-primary);
}

.service .card .service-title i {
    font-size: var(--font-icon-big);
}

.service .card .service-title span {
    font-size: var(--font-sm-header);
    font-weight: 600;
    margin-bottom: 8px;
}

.service .card .service-detail {
    color: var(--color-secondary);
    font-size: var(--font-text);
    text-align: center;
}

/*--------------------------------------------------------------
# Gallery
--------------------------------------------------------------*/
.gallery img {
    border-radius: 4px;
    height: 300px;
    width: 100%;
    object-fit: cover;
}

/*--------------------------------------------------------------
# Discover
--------------------------------------------------------------*/
.discover-bg {
    background: rgba(var(--color-secondary-rgb), 0.1);
}

.discover .discover-item {
    position: relative;
}

.discover .discover-item .discover-img {
    overflow: hidden;
}

.discover .discover-item .discover-img img {
    border-radius: 4px;
    height: 300px;
    width: 100%;
    object-fit: cover;
    transition: all 0.6s;
}

.discover .discover-item:hover .discover-img img {
    transform: scale(1.05);
}

.discover .discover-item .discover-info {
    position: absolute;
    background: var(--color-primary);
    left: 12px;
    bottom: 0;
    right: 12px;
    padding: 16px;
    transition: all 0.3s;
    opacity: 0;
    z-index: 3;
}

.discover .discover-item:hover .discover-info {
    opacity: 1;
}

.discover .discover-item .discover-info h3 {
    color: var(--color-white);
    font-size: var(--font-sm-title);
    font-weight: 600;
    margin-bottom: 0px;
}

.discover .discover-item .discover-info p {
    color: var(--color-white);
    font-size: var(--font-sm-text);
    margin-bottom: 0;
}

.discover .discover-item .discover-info .preview-link,
.discover .discover-item .discover-info .details-link {
    position: absolute;
    color: var(--color-white);
    font-size: var(--font-sm-header);
    top: calc(50% - 18px);
    right: 40px;
    transition: 0.3s;
}

.discover .discover-item .discover-info .details-link {
    right: 10px;
}

.discover .discover-item .discover-info .preview-link:hover,
.discover .discover-item .discover-info .details-link:hover {
    color: var(--color-white);
}

/*--------------------------------------------------------------
# Discover View
--------------------------------------------------------------*/
.discover-view .discover-img {
    position: relative;
}

.discover-view .discover-img img {
    width: 100%;
    height: 600px;
}

.discover-view .discover-img .title {
    position: absolute;
    background: rgba(var(--color-black-rgb), 0.5);
    color: var(--color-white);
    font-size: var(--font-header);
    font-weight: 600;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 30px 0;
}

.discover-view .discover-content {
    color: var(--color-secondary);
    font-size: var(--font-text);
    margin-bottom: 16px;
}

.discover-view .source-link {
    color: var(--color-primary);
    font-size: var(--font-text);
}

.discover-view .source-link a {
    color: var(--color-default);
    font-size: var(--font-text);
}

.discover-view .map iframe {
    height: 400px;
    margin-top: 16px;
    width: 100%;
}

/*--------------------------------------------------------------
# News
--------------------------------------------------------------*/
.news .card {
    box-shadow: 0 4px 16px rgba(var(--color-black-rgb), 0.1);
    border: 0;
    padding: 16px;
    height: 100%;
}

.news .card .news-img {
    margin: -16px -16px 0 -16px;
    overflow: hidden;
    text-align: center;
    transition: 0.3s;
}

.news .card .news-img img {
    height: 200px;
    width: 100%;
    object-fit: cover;
    transition: 0.3s;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.news .card:hover .news-img img {
    transform: scale(1.1);
}

.news .card .news-title {
    display: -webkit-box;
    color: var(--color-black);
    font-size: var(--font-sm-title);
    font-weight: 500;
    margin: 8px 0 0 0;
    padding: 0;
    text-overflow: ellipsis;
    transition: 0.3s;
    overflow: hidden;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.news .card .news-date {
    color: var(--color-gray);
    font-style: italic;
    margin-top: 8px;
}

.news .card .news-date i {
    color: var(--color-gray);
    font-size: var(--font-sm-text);
    font-style: italic;
    line-height: 0;
    margin-right: 8px;
}

.news .card .news-content {
    display: -webkit-box;
    color: var(--color-black);
    font-size: var(--font-sm-text);
    margin: 8px 0 16px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.news .card .read-more a {
    color: var(--color-primary);
    font-size: var(--font-text);
    font-style: italic;
}

.news .card .read-more a:hover {
    color: var(--color-secondary);
}

/*--------------------------------------------------------------
# News View
--------------------------------------------------------------*/
.news-view .news-details .news-img {
    overflow: hidden;
    text-align: center;
    transition: 0.3s;
}

.news-view .news-details .news-img img {
    height: 400px;
    max-width: 100%;
    object-fit: cover;
    transition: 0.3s;
}

.news-view .news-details .news-img .swiper-button-next::after,
.news-view .news-details .news-img .swiper-button-prev::after {
    color: var(--color-primary);
    font-size: var(--font-header);
    font-weight: 800;
}

.news-view .news-details .news-title {
    color: var(--color-black);
    font-size: var(--font-sm-title);
    font-weight: 600;
}

.news-view .news-details .news-date {
    color: var(--color-gray);
    font-style: italic;
    margin-top: 8px;
    margin-bottom: 8px;
}

.news-view .news-details .news-date i {
    color: var(--color-gray);
    font-size: var(--font-text);
    font-style: italic;
    line-height: 0;
    margin-right: 8px;
}

.news-view .news-details .news-content {
    color: var(--color-black);
    font-size: var(--font-text);
    margin: 8px 0 0 0;
}

.news-view .news-latest {
    font-size: var(--font-title);
    font-weight: 600;
    margin: 0 0 8px 0;
}

.news-view .news-box {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    box-shadow: 0 4px 16px rgba(var(--color-black-rgb), 0.1);
}

.news-view .news-box .news-img {
    overflow: hidden;
    text-align: center;
    transition: 0.3s;
    width: 40%;
}

.news-view .news-box .news-img img {
    height: 100px;
    object-fit: cover;
    transition: 0.3s;
    width: 100%;
}

.news-view .news-box:hover .news-img img {
    transform: scale(1.1);
}

.news-view .news-box .news-title {
    width: 60%;
}

.news-view .news-box .news-title span {
    display: -webkit-box;
    color: var(--color-black);
    font-size: var(--font-sm-title);
    font-weight: 500;
    margin: 8px 0;
    overflow: hidden;
    padding: 0 8px;
    text-overflow: ellipsis;
    transition: 0.3s;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.news-view .news-box .news-date {
    color: var(--color-gray);
    font-style: italic;
    margin-top: 8px;
    padding: 0 8px;
}

.news-view .news-box .news-date i {
    color: var(--color-gray);
    font-size: var(--font-sm-text);
    font-style: italic;
    line-height: 0;
    margin-right: 8px;
}

/*--------------------------------------------------------------
# Contact
--------------------------------------------------------------*/
.contact-bg {
    background: var(--color-background);
}

.contact .info i {
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(var(--color-secondary-rgb), 0.1);
    border-radius: 50%;
    color: var(--color-default);
    font-size: var(--font-title);
    float: left;
    width: 40px;
    height: 40px;
    transition: all 0.3s ease-in-out;
}

.contact .info h3 {
    color: var(--color-primary);
    font-size: var(--font-title);
    font-weight: 600;
    margin-bottom: 8px;
    padding: 0 0 0 56px;
}

.contact .info p {
    color: var(--color-secondary);
    font-size: var(--font-text);
    margin-bottom: 16px;
    padding: 0 0 8px 56px;
}

.contact .info iframe {
    border: 0;
    width: 100%;
    height: 300px;
}

.contact .info .email:hover i,
.contact .info .address:hover i,
.contact .info .phone:hover i,
.contact .info .facebook:hover i {
    background: var(--color-primary);
    color: var(--color-white);
}

/*--------------------------------------------------------------
# Reservation
--------------------------------------------------------------*/
.reservation .search-box {
    margin-bottom: 24px;
}

.reservation .search-box .form-label {
    color: var(--color-secondary);
    font-size: var(--font-text);
    font-weight: 600;
}

.reservation .search-box .form-control,
.reservation .search-box .form-select {
    border: 1px solid var(--color-secondary);
    margin-bottom: 8px;
}

.reservation .search-box .btn-submit {
    margin-top: auto;
    margin-bottom: 8px;
}

.reservation .search-box .btn-submit button {
    background: var(--color-secondary);
    border: 1px solid var(--color-secondary);
    border-radius: 4px;
    color: var(--color-white);
    padding: 6px 16px;
    width: 100%;
}

.reservation .search-box .btn-submit button:hover {
    background: var(--color-primary);
    border: 1px solid var(--color-primary);
    color: var(--color-white);
}

.reservation .reservation-box .step {
    display: flex;
    align-items: center;
    border: 1px solid var(--color-secondary);
    width: 100%;
    height: 60px;
    margin-bottom: 16px;
}

.reservation .reservation-box .step #step_start,
.reservation .reservation-box .step #step_finish {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-secondary);
    font-size: var(--font-sm-header);
    font-weight: 600;
    width: 50%;
    height: 60px;
}

.reservation .reservation-box .step #step_start.active,
.reservation .reservation-box .step #step_finish.active {
    background: var(--color-primary);
    color: var(--color-white);
}

.reservation .reservation-box .step #step_start.active::after {
    position: absolute;
    content: '';
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent;
    border-left: 30px solid var(--color-primary);
    height: 0;
    width: 0;
    right: -30px;
}

.reservation .reservation-box .step #step_finish.active::after {
    position: absolute;
    content: '';
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent;
    border-left: 30px solid var(--color-white);
    height: 0;
    width: 0;
    left: 0px;
}

.reservation .reservation-box .step #step_start.active-all,
.reservation .reservation-box .step #step_finish.active-all {
    background: var(--color-blue);
    color: var(--color-white);
}

.reservation .reservation-box .step #step_start.active-all::after {
    position: absolute;
    content: '';
    border: 1px solid var(--color-white);
    height: 80%;
    width: 0;
    right: 0;
}

.reservation .reservation-box .step #step_finish.active-all::after {
    position: absolute;
    content: '';
    border: 1px solid var(--color-white);
    height: 80%;
    width: 0;
    left: 0;
}

.reservation .reservation-box #fieldset_start .room {
    display: flex;
    padding: 16px;
    border: 1px solid var(--color-secondary);
    border-radius: 4px;
}

.reservation .reservation-box #fieldset_start .room .room-img {
    width: 40%;
}

.reservation .reservation-box #fieldset_start .room .room-img img {
    border-radius: 4px;
    width: 100%;
    height: 250px;
    object-fit: cover;
}

.reservation .reservation-box #fieldset_start .room .room-content {
    width: 60%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0 0 0 16px;
}

.reservation .reservation-box #fieldset_start .room .room-content .first-content .title {
    color: var(--color-primary);
    font-size: var(--font-title);
    font-weight: 600;
}

.reservation .reservation-box #fieldset_start #next_step {
    background: rgba(var(--color-blue-rgb), 0.85);
    border: 1px solid var(--color-blue);
    border-radius: 8px;
    color: var(--color-white);
    padding: 8px 16px;
    width: 100%;
    opacity: 1;
}

.reservation .reservation-box #fieldset_start #next_step:hover {
    background: var(--color-blue);
    color: var(--color-white);
}

.reservation .reservation-box #fieldset_start #next_step:disabled {
    pointer-events: none;
    opacity: 0.8;
}

.reservation .reservation-box #fieldset_finish .btn-outline-primarys {
    background: rgba(var(--color-blue-rgb), 0.85);
    border: 1px solid var(--color-blue);
    border-radius: 8px;
    color: var(--color-white);
    padding: 8px 16px;
    opacity: 1;
}

.reservation .reservation-box #fieldset_finish .btn-outline-primarys:hover {
    background: var(--color-blue);
    color: var(--color-white);
}

.reservation .reservation-box #fieldset_finish .btn-outline-primarys:disabled {
    pointer-events: none;
    opacity: 0.8;
}

.reservation .reservation-box #fieldset_start .room .room-content .last-content {
    border-top: 1px solid var(--color-secondary);
    padding-top: 8px;
}

.reservation .reservation-box #fieldset_finish h3,
.reservation .reservation-box #fieldset_summary h3 {
    color: var(--color-primary);
    font-size: var(--font-header);
    font-weight: 600;
    margin-bottom: 16px;
}

.reservation .reservation-box #fieldset_summary h4 {
    color: var(--color-primary);
    font-size: var(--font-title);
    font-weight: 600;
    margin-bottom: 16px;
}

.reservation .reservation-box .thank-you {
    display: flex;
    align-items: strat;
    color: var(--color-blue);
    font-size: var(--font-title);
    font-weight: 600;
    margin-bottom: 16px;
}

.reservation .reservation-box .thank-you i {
    font-size: var(--font-sm-header);
    margin-right: 8px;
}

.reservation .reservation-box #fieldset_summary .table-darks {
    border-color: var(--color-primary) !important;
    background-color: var(--color-primary) !important;
    color: var(--color-white) !important;
}

.reservation #card_notification {
    border: 0;
    box-shadow: 0 0 20px 8px rgba(var(--color-secondary-rgb), 0.25);
    width: 500px;
}

.reservation #card_notification #notification_icon {
    text-align: center;
    margin-top: 16px;
}

.reservation #card_notification #notification_icon i {
    font-size: var(--font-icon-middle);
    color: var(--color-primary);
}

.reservation #card_notification #sorry_title {
    color: var(--color-primary);
    font-size: var(--font-sm-header);
    font-weight: 600;
    margin-top: 16px;
    text-align: center;
}

.reservation #card_notification #sorry_description {
    color: var(--color-secondary);
    font-size: var(--font-sm-title);
    font-weight: 500;
    margin-top: 8px;
    margin-bottom: 16px;
    text-align: center;
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.footer .footer-top {
    background: rgba(var(--color-secondary-rgb), 0.1);
    padding: 60px 0;
}

.footer .footer-info .logo {
    line-height: 0;
    margin-bottom: 16px;
}

.footer .footer-info .logo img {
    max-height: 40px;
    margin-right: 8px;
}

.footer .footer-info .logo h1 {
    color: var(--color-primary);
    font-size: var(--font-header);
    font-weight: 600;
}

.footer .footer-info p {
    font-size: var(--font-text);
}

.footer .social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--color-primary);
    font-size: var(--font-text);
    color: var(--color-primary);
    width: 40px;
    height: 40px;
    margin-right: 8px;
    transition: 0.3s;
}

.footer .social-links a:hover {
    background: var(--color-primary);
    color: var(--color-white);
}

.footer h3 {
    position: relative;
    font-size: var(--font-text);
    font-weight: bold;
    padding-bottom: 16px;
}

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

.footer .footer-links ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer .footer-links ul i {
    padding-right: 8px;
    color: var(--color-secondary);
    font-size: var(--font-text);
    line-height: 0;
}

.footer .footer-links ul li {
    display: flex;
    align-items: center;
    padding: 8px 0;
}

.footer .footer-links ul li:first-child {
    padding-top: 0;
}

.footer .footer-links ul a {
    display: inline-block;
    color: var(--color-secondary);
    line-height: 1;
    transition: 0.3s;
}

.footer .footer-links ul a:hover {
    color: var(--color-primary);
}

.footer .footer-contact p {
    line-height: 24px;
}

.footer .copyright {
    background: var(--color-secondary);
    color: var(--color-white);
    font-size: var(--font-text);
    text-align: center;
    padding: 16px 0;
}

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
    [data-aos-delay] {
        transition-delay: 0 !important;
    }
}

/*--------------------------------------------------------------
# Media Query
--------------------------------------------------------------*/
@media (max-width: 1399.98px) {}

@media (max-width: 1199.98px) {

    /*--------------------------------------------------------------
    # Navbar
    --------------------------------------------------------------*/
    .navbar {
        position: fixed;
        top: 0;
        right: -100%;
        bottom: 0;
        width: 100%;
        max-width: 400px;
        transition: 0.3s;
        z-index: 9997;
    }

    .navbar ul {
        display: block;
        position: absolute;
        background: var(--color-white);
        inset: 0;
        margin: 0;
        padding: 60px 0 16px 0;
        overflow-y: auto;
        transition: 0.3s;
        z-index: 9998;
    }

    .navbar>ul>li {
        padding: 0;
    }

    .navbar a,
    .navbar a:focus {
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: var(--color-secondary);
        font-size: var(--font-sm-title);
        font-weight: 600;
        padding: 10px 20px;
        transition: 0.3s;
        white-space: nowrap;
    }

    .navbar a:hover:before,
    .navbar li:hover>a:before,
    .navbar .active:before {
        visibility: hidden;
    }

    .navbar a:hover,
    .navbar .active,
    .navbar .active:focus,
    .navbar li:hover>a {
        color: var(--color-primary);
    }

    .navbar .getstarted {
        display: none;
    }

    .navbar .dropdown ul {
        position: static;
        display: none;
        background: var(--color-white);
        padding: 10px 0;
        margin: 10px 20px;
        transition: all 0.5s ease-in-out;
    }

    .navbar .dropdown>.dropdown-active {
        display: block;
        opacity: 1;
        visibility: visible;
    }

    .mobile-nav-show {
        cursor: pointer;
        color: var(--color-primary);
        font-size: var(--font-header);
        line-height: 0;
        margin-right: 8px;
        transition: 0.5s;
        z-index: 9999;
    }

    .mobile-nav-hide {
        position: fixed;
        cursor: pointer;
        color: var(--color-primary);
        font-size: var(--font-header);
        line-height: 0;
        top: 20px;
        right: 20px;
        transition: 0.5s;
        z-index: 9999;
    }

    .mobile-nav-active {
        overflow: hidden;
    }

    .mobile-nav-active .navbar {
        right: 0;
    }

    .mobile-nav-active .navbar:before {
        content: "";
        position: fixed;
        background: rgba(var(--color-primary-rgb), 0.5);
        inset: 0;
        z-index: 9996;
    }

    /*--------------------------------------------------------------
    # Hero
    --------------------------------------------------------------*/
    .hero {
        height: calc(500px + 51px);
    }

    .hero .hero-background img {
        height: 500px;
    }

    .hero .swiper-button-prev::after,
    .hero .swiper-button-next::after {
        font-size: var(--font-sm-header);
    }

    /*--------------------------------------------------------------
    # Room View
    --------------------------------------------------------------*/
    .room-view .room-view-swiper-top img {
        height: 350px;
    }

    .room-view .room-view-swiper-top .swiper-button-next::after,
    .room-view .room-view-swiper-top .swiper-button-prev::after {
        font-size: var(--font-sm-header);
    }

    .room-view .room-view-detail .card .room-img img {
        height: 175px;
    }

    .room-view .room-view-detail .card:hover .room-img img {
        transform: scale(1.05);
    }

    /*--------------------------------------------------------------
    # Service
    --------------------------------------------------------------*/
    .service .card .service-title i {
        font-size: var(--font-icon-middle);
    }

    .service .card .service-title span {
        font-size: var(--font-title);
    }

    /*--------------------------------------------------------------
    # Gallery
    --------------------------------------------------------------*/
    .gallery img {
        height: 250px;
    }

    /*--------------------------------------------------------------
    # Discover
    --------------------------------------------------------------*/
    .discover .discover-item .discover-img img {
        height: 250px;
    }

    /*--------------------------------------------------------------
    # Discover View
    --------------------------------------------------------------*/
    .discover-view .discover-img img {
        height: 500px;
    }

    /*--------------------------------------------------------------
    # News
    --------------------------------------------------------------*/
    .news .card .news-img img {
        height: 175px;
    }

    /*--------------------------------------------------------------
    # News View
    --------------------------------------------------------------*/
    .news-view .news-details .news-img img {
        height: 350px;
    }

    .news-view .news-details .news-img .swiper-button-next::after,
    .news-view .news-details .news-img .swiper-button-prev::after {
        font-size: var(--font-sm-header);
    }
}

@media (max-width: 991.98px) {

    /*--------------------------------------------------------------
    # Sections & Section Header
    --------------------------------------------------------------*/
    .section-title h2 {
        font-size: var(--font-sm-header);
    }

    .section-hero .section-hero-title {
        font-size: var(--font-sm-header);
    }

    /*--------------------------------------------------------------
    # Hero
    --------------------------------------------------------------*/
    .hero {
        height: auto;
    }

    .hero .hero-background img {
        height: 400px;
    }

    .hero .hero-background .hero-detail .hero-title {
        font-size: var(--font-sm-header);
    }

    .hero .hero-search {
        top: 0;
    }

    .hero .hero-search .search-box {
        box-shadow: 0px 0px 0px rgba(var(--color-secondary-rgb), 0.5);
        padding: 16px 0 0 0;
        width: 100%;
    }

    /*--------------------------------------------------------------
    # Room
    --------------------------------------------------------------*/
    .room .card .room-img img {
        height: 150px;
    }

    .room .card .room-icons {
        margin: 16px 0 0 0;
    }

    /*--------------------------------------------------------------
    # Room View
    --------------------------------------------------------------*/
    .room-view .room-view-swiper-top img {
        height: 350px;
    }

    .room-view .room-view-detail .card .room-icons {
        margin: 16px 0 0 0;
    }

    /*--------------------------------------------------------------
    # Service
    --------------------------------------------------------------*/
    .service #card_box {
        margin-bottom: 16px;
    }

    /*--------------------------------------------------------------
    # Gallery
    --------------------------------------------------------------*/
    .gallery img {
        height: 200px;
    }

    /*--------------------------------------------------------------
    # Discover
    --------------------------------------------------------------*/
    .discover .discover-item .discover-img img {
        height: 200px;
    }

    .discover .discover-item .discover-info h3 {
        font-size: var(--font-sm-text);
    }

    .discover .discover-item .discover-info .preview-link,
    .discover .discover-item .discover-info .details-link {
        font-size: var(--font-sm-title);
        top: calc(50% - 12px);
    }

    .discover .discover-item .discover-info .preview-link {
        display: none;
    }

    /*--------------------------------------------------------------
    # Discover View
    --------------------------------------------------------------*/
    .discover-view .discover-img img {
        height: 400px;
    }

    .discover-view .discover-img .title {
        font-size: var(--font-sm-header);
    }

    /*--------------------------------------------------------------
    # News
    --------------------------------------------------------------*/
    .news .card .news-img img {
        height: 200px;
    }

    /*--------------------------------------------------------------
    # News View
    --------------------------------------------------------------*/
    .news-view .news-details .news-img img {
        height: 300px;
    }

    /*--------------------------------------------------------------
    # Reservation
    --------------------------------------------------------------*/
    .reservation .reservation-box .step #step_start,
    .reservation .reservation-box .step #step_finish {
        font-size: var(--font-title);
    }

    .reservation .reservation-box #fieldset_start .room .room-img {
        width: 40%;
    }

    .reservation .reservation-box #fieldset_start .room .room-img img {
        height: 200px;
    }

    .reservation .reservation-box #fieldset_start .room .room-content {
        width: 60%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 0 0 0 16px;
    }

    .reservation .reservation-box #fieldset_start .room .room-content .first-content .title {
        font-size: var(--font-sm-title);
    }

    .reservation .reservation-box #fieldset_finish h3,
    .reservation .reservation-box #fieldset_summary h3 {
        font-size: var(--font-sm-header);
    }

    .reservation .reservation-box .thank-you {
        font-size: var(--font-sm-text);
    }

    .reservation .reservation-box #fieldset_summary h4 {
        font-size: var(--font-sm-title);
    }

    /*--------------------------------------------------------------
    # Footer
    --------------------------------------------------------------*/
    .footer .footer-info .logo h1 {
        font-size: var(--font-sm-header);
    }
}

@media (max-width: 575.98px) {

    /*--------------------------------------------------------------
    # Header
    --------------------------------------------------------------*/
    .header .logo img {
        margin-right: 0;
    }

    .header .logo i {
        display: none;
    }

    .header .logo span {
        display: none;
    }

    .header .btn-getstarted,
    .header .btn-getstarted:focus {
        font-size: var(--font-sm-text);
        margin-right: 8px;
        padding: 4px 8px;
    }

    /*--------------------------------------------------------------
    # Sections & Section Header
    --------------------------------------------------------------*/
    .section-title h2 {
        font-size: var(--font-sm-title);
    }

    .section-title p {
        font-size: var(--font-sm-text);
    }

    .section-hero .section-hero-title {
        font-size: var(--font-sm-title);
    }

    /*--------------------------------------------------------------
    # Hero
    --------------------------------------------------------------*/
    .hero .hero-background img {
        height: 300px;
    }

    .hero .hero-background .hero-detail .hero-title {
        font-size: var(--font-sm-title);
    }

    .hero .hero-background .hero-detail .btn-get-started {
        font-size: var(--font-sm-text);
        padding: 4px 8px;
    }

    .hero .hero-search .search-box .form-control,
    .hero .hero-search .search-box .form-select {
        margin-bottom: 8px;
    }

    .hero .hero-search .search-box .btn-submit {
        text-align: center;
        margin-top: 8px;
    }

    .hero .hero-search .search-box .btn-submit button {
        padding: 4px 8px;
        width: auto;
    }

    /*--------------------------------------------------------------
    # Room
    --------------------------------------------------------------*/
    .room .card .room-img img {
        height: 200px;
    }

    /*--------------------------------------------------------------
    # Room View
    --------------------------------------------------------------*/
    .room-view .room-detail .room-title span {
        font-size: var(--font-sm-title);
    }

    .room-view .room-detail .room-title span:last-child {
        font-size: var(--font-sm-text);
    }

    .room-view .room-detail .room-price span {
        font-size: var(--font-sm-title);
    }

    .room-view .room-view-swiper-top img {
        height: 250px;
    }

    .room-view .room-view-swiper-bottom img {
        height: 75px;
    }

    .room-view .room-title {
        font-size: var(--font-sm-title);
    }

    .room-view .room-view-detail .room-title-detail {
        font-size: var(--font-sm-title);
    }

    .room-view .room-amenity .title {
        font-size: var(--font-sm-title);
    }

    .room-view .room-view-detail .card .room-img img {
        height: 200px;
    }

    /*--------------------------------------------------------------
    # Discover View
    --------------------------------------------------------------*/
    .discover-view .discover-img img {
        height: 200px;
    }

    .discover-view .discover-img .title {
        font-size: var(--font-title);
    }

    .discover-view .map iframe {
        height: 300px;
    }

    /*--------------------------------------------------------------
    # News View
    --------------------------------------------------------------*/
    .news-view .news-details .news-img img {
        height: 250px;
    }

    /*--------------------------------------------------------------
    # Service
    --------------------------------------------------------------*/
    .service .card .service-title i {
        font-size: var(--font-icon-small);
    }

    .service .card .service-title span {
        font-size: var(--font-sm-title);
    }

    .service .card .service-detail {
        font-size: var(--font-sm-text);
    }

    /*--------------------------------------------------------------
    # Contact
    --------------------------------------------------------------*/
    .contact .info i {
        font-size: var(--font-sm-title);
    }

    .contact .info h3 {
        font-size: var(--font-sm-title);
    }

    .contact .info p {
        color: var(--color-secondary);
        font-size: var(--font-sm-text);
    }

    .contact .info iframe {
        margin-bottom: 8px;
    }

    /*--------------------------------------------------------------
    # Reservation
    --------------------------------------------------------------*/
    .reservation .search-box .btn-submit {
        text-align: center;
    }

    .reservation .search-box .btn-submit button {
        width: auto;
    }

    .reservation .reservation-box .step #step_start,
    .reservation .reservation-box .step #step_finish {
        font-size: var(--font-text);
        font-weight: 500;
    }

    .reservation .reservation-box .step #step_start.active,
    .reservation .reservation-box .step #step_finish.active {
        background: var(--color-primary);
        color: var(--color-white);
    }

    .reservation .reservation-box #fieldset_start .room {
        display: flex;
        flex-direction: column;
    }

    .reservation .reservation-box #fieldset_start .room .room-img {
        width: 100%;
    }

    .reservation .reservation-box #fieldset_start .room .room-img img {
        height: 200px;
    }

    .reservation .reservation-box #fieldset_start .room .room-content {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 16px 0 0 0;
    }

    .reservation .reservation-box #fieldset_finish h3,
    .reservation .reservation-box #fieldset_summary h3 {
        font-size: var(--font-title);
    }

    .reservation #card_notification {
        width: 100%;
    }

    .reservation #card_notification #notification_icon i {
        font-size: var(--font-icon-small);
    }

    .reservation #card_notification #sorry_title {
        font-size: var(--font-sm-title);
    }

    .reservation #card_notification #sorry_description {
        font-size: var(--font-text);
    }

    /*--------------------------------------------------------------
    # Footer
    --------------------------------------------------------------*/
    .footer .footer-info p {
        font-size: var(--font-sm-text);
    }

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

    .footer .footer-contact p {
        font-size: var(--font-sm-text);
    }

    .footer .copyright {
        font-size: var(--font-sm-text);
        padding: 8px 0;
    }
}