/* ========================================
   FONTS
======================================== */

@font-face {
	font-family: "Copperplate-normal";
	src: url('../fonts/Copperplate.ttf')format("truetype");
}

@font-face {
	font-family: "IBM Plex Sans Thai";
	src: url('../fonts/IBM-Plex-Sans-Thai.woff2')format("woff2");
}

body{font-size: 1.5rem;line-height: 24px;color: #767676}
ul, ol {margin-top: 0;margin-bottom: 10px;padding: 0 0 0 25px;}	
	
html, body{font-family: 'Montserrat' !important;color: #20415B;}
h1, h2, h3, h4, h5, h6{font-family: 'Montserrat' !important;font-weight: bold;color: #CD7C56;}
p{font-family: 'Montserrat';}
span{font-family: 'Montserrat';}
a{font-family: 'Montserrat';color: #CD7C56;text-decoration: none;}
a:hover, a:focus {color: #F4E3CF;text-decoration: none;}

.pad-non{padding: 0;}
.clear{clear: both;}
.hi5{clear: both;height: 5px;}
.h10{clear: both;height: 10px;}
.h15{clear: both;height: 15px;}
.h20{clear: both;height: 20px;}
.h25{clear: both;height: 25px;}
.h30{clear: both;height: 30px;}
.h35{clear: both;height: 35px;}
.h40{clear: both;height: 40px;}
.h45{clear: both;height: 45px;}
.h50{clear: both;height: 50px;}
.h55{clear: both;height: 55px;}
.h60{clear: both;height: 60px;}
@media (max-width: 767px) {
	.pad-non-mb{padding: 0;}
	.hm15{clear: both;height: 15px;}
}
@media (min-width: 768px) and (max-width: 991px) {
	.pad-non-tb{padding: 0;}
	.hm15{display: none;}
}
@media (min-width: 992px) and (max-width: 1199px) {
	.pad-non-nb{padding: 0;}
	.hm15{display: none;}
}
@media (min-width: 1200px) {
	.pad-non-pc{padding: 0;}
	.hm15{display: none;}
}				

/*------------- Scrollbar ------------*/
/*-----------------------------------*/
/* width */
::-webkit-scrollbar {width: 8px;height:6px;}

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

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {background: #555;}
/*--// END Scrollbar --*/

section {margin: 0;padding: 50px 0;}

.hr-one{margin: 20px auto;width: 40%;border: 0;height: 2px;background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(121, 121, 121, 0.96), rgba(255, 255, 255, 0));}

.hr-two {margin: 10px auto;width: 50%;border: 0;height: 1px;background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgb(138, 115, 65), rgba(255, 255, 255, 0));}

.section-separator{margin: 0px auto;width: 60%;border: 0;height: 2px;background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(121, 121, 121, 0.96), rgba(255, 255, 255, 0));}


@media (max-width: 991px) {
#menu-mobile{background: #ffffff;background-size: cover;background-position: center;}
.navbar-brand {float: left;height: 50px;padding: 0;font-size: 18px;line-height: 20px;}
}

.restaurant-name{font-size: 2.8rem;margin-bottom: 1.8rem;}
.restaurant-description{font-size: 1.6rem;}

.rounded-25px{border-radius: 25px;}
.rounded-15px{border-radius: 15px;}
.rounded-5px{border-radius: 5px;}

@media screen and (max-width: 767px) {
	.rounded-mb-15px{border-radius: 15px;}
	.rounded-mb-5px{border-radius: 5px;}
}

/* Define a keyframes animation for sliding up */
@keyframes slideUp {
	from {
		transform: translate(-50%,100%); /* Start below the visible area */
		opacity: 0; /* Fully transparent */
	}
	to {
		transform: translate(-50%,0); /* End at initial position */
		opacity: 1; /* Fully visible */
	}
}


/* General Styles for Caption Container */
.banner-description-container {
	position: absolute;
	bottom: 10%; /* Adjusted placement */
	left: 50%;
	transform: translateX(-50%);
	text-align: center;
	z-index: 3;
	/*background-color: rgba(0, 0, 0, 0.3); !* Subtle overlay for readability *!*/
	padding: 10px 20px;
	border-radius: 10px;
	/*box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25); !* Adds depth *!*/
	animation: slideUp 1s ease-out; /* Duration and easing of the animation */
	opacity: 1; /* Ensure visibility after animation */
}

/* Hotel Name Styles */
.banner-hotel-name {
	font-size: 2.8rem;
	font-weight: bold;
	color: #ffffff;
	font-family: "Montserrat", Sans-serif;
	/*font-family: 'League Gothic','Playfair Display', serif;*/
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Elegant shadow */
	letter-spacing: 1.5px;
}

/* Description Styles */
.banner-description {
	font-size: 2.0rem;
	color: #ffffff;
	font-family: "Montserrat", Sans-serif;
	/*font-family: 'Niconne','Roboto', sans-serif;*/
	text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
	line-height: 1.6;
	letter-spacing: 0.5px;
}

/* Call-to-Action Link */
.banner-description-container a {
	display: inline-block;
	font-size: 1.2rem;
	font-family: 'Montserrat', cursive;
	color: #ffffff;
	text-decoration: none;
	transition: color 0.3s, transform 0.3s;
}

.banner-description-container a:hover {
	/*color: #ffd700;*/
	color: var(--color-white);
	transform: scale(1.1); /* Subtle zoom effect */
}

/* Responsive Styling for Smaller Screens */
@media (max-width: 1199px) {
	.banner-hotel-name {
		font-size: 2.2rem;
	}

	.banner-description {
		font-size: 1.5rem;
	}

	.banner-description-container {
		bottom: 15%;
		padding: 10px;
		width: 80%;
	}
	.banner-description-container .booking-button{width: 40%;margin: 0 auto;}
}

@media (max-width: 767px) {
	.banner-hotel-name {
		font-size: 1.4rem;
	}

	.banner-description {
		font-size: 0.9rem;
	}

	.banner-description-container {
		bottom: 15%;
		padding: 10px;
		width: 86%;
	}
}
@media (max-width: 575px) {
	.banner-hotel-name {
		font-size: 1.3rem;
	}
	.banner-description {}
}
.banner-description-container .find-room-icon{margin-top: 0.55em;}