@import url('https://fonts.googleapis.com/css2?family=Amaranth:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sarabun:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
/* 1. Root Variables */
:root {
/* Brand Colors */
--mountain-grey: #CFCFCB;
--muted-clay: #C28B72;
--cream-white: #F5F2E9;
--warm-beige: #D9C8A9;
--earth-brown: #8B5E3C;
--pine-green: #4F7F5A;
--forest-green: #3B6042;
--white: #ffffff;
--body-color: #404874;
/* Text Colors */
--text-dark: #2A2A2A;
--text-medium: #555;
--text-light: #777;
/* Border Colors */
--border-light: #E4E4E4;
--font-heading: "Amaranth", sans-serif;
--font-body: "Sarabun", sans-serif;
}

body {
font-family: var(--font-body);
color: var(--body-color);
background: var(--light);
line-height: 1.6;
margin: 0;
padding: 0;
}
/* 3. Headings (SEO Friendly) */
h1, h2, h3, h4, h5, h6 {
margin: 0 0 30px 0;
font-family: var(--font-heading);
font-weight: 600;
color: #004d12;
}

h1 {
font-size: 48px;
}

h2 {
font-size: 36px;
}

h3 {
font-size: 30px;
}

h4 {
font-size: 24px;
}

h5 {
font-size: 18px;
}

h6 {
font-size: 16px;
}
/* 4. Paragraphs */
p {
margin: 0 0 15px 0;
color: var(--body-color);
font-size: 15px;
}

/* 5. Links */
a {
color: var(--primary);
text-decoration: none;
}

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

/* 6. Lists */
ul li, ol li {
margin-bottom: 10px;
}

.lead {
font-weight: 600;
font-size: 18px;
color: #d99600;
margin: 0 0 45px 0;
}

.py-80 {
padding: 80px 0;
}

.pt-80 {
padding: 80px 0 0 0;
}

.btn-custom {
position: relative;
overflow: hidden;
height: 48px;
padding: 0 30px;
border-radius: 30px;
background: #8a5f31;
background-size: auto;
background-size: 400%;
color: #fff;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-weight: 600;
margin: 30px 0 0 0;
}

.btn-custom:hover::before {
transform: scaleX(1);
}

.btn-custom:hover {
color: #ffffff;
}

.btn-custom::before {
content: "";
position: absolute;
top: 0;
left: 0;
transform: scaleX(0);
transform-origin: 0 50%;
width: 100%;
height: inherit;
border-radius: inherit;
background: linear-gradient( 82.3deg, #d99600 10.8%, #d99600 94.3% );
transition: all 0.475s;
}

.button-content {
position: relative;
z-index: 1;
top: -1px;
}

.call-btn {
position: relative;
overflow: hidden;
height: 48px;
width: 48px;
border-radius: 30px;
background: #004d12;
background-size: auto;
background-size: 400%;
color: #fff;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
}

.call-btn:hover::before {
transform: scaleX(1);
}

.call-btn:hover {
color: #ffffff;
}

.call-btn::before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 48px;
width: 48px;
transform: scaleX(0);
transform-origin: 0 50%;
width: 100%;
height: inherit;
border-radius: inherit;
background: linear-gradient( 82.3deg, #d99600 10.8%, #d99600 94.3% );
transition: all 0.475s;
}

.call-btn i {
position: relative;
z-index: 999;
}

.form-floating > .form-control, .form-floating > .form-control-plaintext {
padding: 15px 24px;
border-radius: 30px;
background-color: #fdf7eb;
border: 1px solid #dbcebf;
min-height: 54px;
height: 54px;
color: var(--body-color);
}

.form-floating > label {
padding: 12px 24px;
color: var(--body-color);
}

.form-floating > .form-control-plaintext ~ label, .form-floating > .form-control:focus ~ label, .form-floating > .form-control:not(:placeholder-shown) ~ label, .form-floating > .form-select ~ label {
opacity: 0.70;
}

.form-control:focus {
box-shadow: 0 0 0 .25rem rgba(217, 150, 0, 0.16);
}

.main-slider {
position: relative;
}

.main-slider .slider-overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: #00000050;
z-index: 1;
width: 100%;
display: flex;
align-items: center;
justify-content: start;
}

.main-slider .slider-overlay .slider-form {
padding: 24px;
background-color: #ffffff;
border-radius: 15px;
backdrop-filter: blur(4px);
}

.main-slider .slider-overlay .slider-form .lead {
font-size: 16px;
margin: 0 0 24px 0;
}

.main-slider .slider-overlay .slider-overlay-content {
padding: 0;
}

.main-slider .slider-overlay .slider-overlay-content h1 {
margin: 0 0 24px 0;
color: #fff0d4;
text-shadow: -1px 2px 2px rgba(0,0,0,0.6);
font-size: 42px;
}

.main-slider .slider-overlay .slider-overlay-content h1 small {
color: #ffffff;
font-size: 24px;
font-weight: 500;
}

.main-slider .slider-overlay .slider-overlay-content h4 {
color: #ffffff;
font-weight: 500;
font-size: 21px;
text-shadow: -1px 2px 2px rgba(0,0,0,0.6);
}

.about-section {
background-color: #fff5e1;
/*background: #004D12;
background: linear-gradient(90deg, rgba(0, 77, 18, 1) 50%, rgba(217, 200, 169, 1) 50%);*/
}

.about-section h2 {
color: #004d12
}

.about-section .about-image img {
height: 580px;
width: 100%;
border-radius: 0;
object-fit: cover;
box-shadow: -4px 3px 18px -3px rgba(92,92,92,0.15);
-webkit-box-shadow: -4px 3px 18px -3px rgba(92,92,92,0.15);
-moz-box-shadow: -4px 3px 18px -3px rgba(92,92,92,0.15);
border-top-right-radius: 15px;
}

.explore-section {
background: #fff5e1;
/*background: linear-gradient(90deg, rgb(255, 245, 225) 48%, rgb(0, 77, 18) 48%);*/
}

.explore-section h2 {
}

.explore-section h2 small {
font-weight: 500;
font-size: 21px;
color: #d99600;
}

.explore-section p {
}
/*.explore-section .btn-custom {
background-color: #004d12;
}
.explore-section .btn-custom::before {
background: linear-gradient( 82.3deg, #d99600 10.8%, #d99600 94.3% )
}*/
.explore-section .explore-image img {
height: 580px;
width: 100%;
border-radius: 0;
object-fit: cover;
box-shadow: -4px 3px 18px -3px rgba(92,92,92,0.15);
-webkit-box-shadow: -4px 3px 18px -3px rgba(92,92,92,0.15);
-moz-box-shadow: -4px 3px 18px -3px rgba(92,92,92,0.15);
border-bottom-left-radius: 15px;
}


.f-carousel .f-carousel__slide img {
border-radius: 15px;
height: 520px;
width: 100%;
object-fit: cover;
object-position: center;
}

.f-panzoom__viewport {
display: block;
position: absolute;
top: 3px;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
border-radius: 15px;
overflow: hidden;
}

.f-button svg {
stroke: rgb(255 255 255);
}

.local-attraction {
background-color: #fff5e1; /* your green shade */
background-image: url('../images/bg-1.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
}

.booking-form {
background-color: #fff5e14f;
background-image: url('../images/bg-1.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
padding: 30px 60px;
border-radius: 15px;
backdrop-filter: blur(4px);
border: 1px solid #dbcebf;
}

.snow-wrapper {
position: relative;
}

.snow-area {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
z-index: 1;
}

.snowflake {
position: absolute;
top: -10px;
color: #d99600;
font-size: 12px;
opacity: 0.8;
pointer-events: none;
animation-name: snowFall;
animation-timing-function: linear;
}

@keyframes snowFall {
to {
transform: translateY(110vh);
opacity: 0;
}
}



.exp-card {
display: flex;
width: 100%;
align-items: center;
gap: 30px;
margin: 0;
}

.exp-card .exp-thumb {
flex: 0 0 35%;
max-width: 35%;
}

.exp-card .exp-thumb img {
height: 280px;
border-radius: 15px;
width: 100%;
object-fit: cover;
box-shadow: -4px 3px 18px -3px rgba(92,92,92,0.15);
-webkit-box-shadow: -4px 3px 18px -3px rgba(92,92,92,0.15);
-moz-box-shadow: -4px 3px 18px -3px rgba(92,92,92,0.15);
}

.exp-card .exp-detail {
flex: 0 0 60%;
max-width: 60%;
}

.exp-card .exp-detail h4 {
margin: 0 0 15px 0;
}

.exp-card .exp-detail p {
font-size: 16px;
font-weight: 500;
}
/* Owl Dots Styling */
.owl-dots {
text-align: center;
margin-top: 15px;
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
}

.owl-dot span {
width: 12px;
height: 12px;
background: #ccc !important;
display: block;
border-radius: 50%;
transition: 0.3s;
}

.owl-dot.active span {
background: #3B6042 !important; /* Your green color */
width: 12px;
height: 12px;
}

.amenities-card {
padding: 24px 15px;
background-color: #fff;
width: 100%;
border-radius: 15px;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
border: 1px solid #dbcebf;
}

.amenities-card:hover {
-webkit-transform: scale(1.07);
transform: scale(1.07,1.07);
-ms-transform: scale(1.07,1.07); /* IE 9 */
-webkit-transform: scale(1.07,1.07);
background-color: #fdf7eb;
}

.amenities-card h4 {
font-size: 18px;
margin: 0;
}

.amenities-card .amenities-icon {
background: rgb(250 74 74 / 08%);
height: 80px;
width: 80px;
border-radius: 100%;
display: flex;
margin: 0 auto 24px auto;
align-items: center;
justify-content: center;
background-color: #fdf7eb;
border: 1px solid #dbcebf;
}

.amenities-card .amenities-icon img {
height: 40px;
}

footer {
background-color: #fff5e1;
background-image: url('../images/bg-1.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
/*background-color: #20160d;*/
padding: 60px 0 0 0;
}

footer .footer-logo {
width: 280px;
margin: 0 0 24px 0;
}

footer h4 { 
font-weight: 500;
font-size: 21px;
margin: 0 0 15px 0;
}

footer p, footer ul li, footer ul li a {
font-size: 15px;
transition: ease-in-out all 0.2s;
}
footer p a:hover, footer ul li a:hover {
color: #004d12;
}

footer ul {
padding: 0 0 0 15px;
margin: 0;
}

footer .location iframe {
border-radius: 15px;
}

footer .contact-detail {
display: flex;
gap: 0;
margin: 0 0 15px 0;
flex-direction: column;
}

footer .contact-detail p {
display: flex;
gap: 7.5px;
align-items: center;
}

footer .contact-detail p a {
font-size: 16px;
}


footer .contact-detail p i {
height: 38px;
width: 38px;
min-height: 38px;
min-width: 38px;
border: 1px solid #8a5f31;
border-radius: 8px;
color: #8a5f31;
text-align: center;
font-size: 16px;
transition: ease-in-out all 0.2s;
display: flex;
align-items: center;
justify-content: center;
}

.social-links {
display: flex;
align-items: center;
gap: 15px;
}

.social-links a {
height: 38px;
width: 38px;
min-height: 38px;
min-width: 38px;
border: 1px solid #8a5f31;
border-radius: 8px;
color: #8a5f31;
text-align: center;
font-size: 16px;
transition: ease-in-out all 0.2s;
display: flex;
align-items: center;
justify-content: center;
}

.social-links a:hover {
background-color: #8a5f31;
color: #ffffff;
border-color: #8a5f31;
}

.footer-bottom {
padding: 15px 0;
margin: 30px 0 0 0;
border-top: 1px solid #8a5f315e;
}

.footer-bottom p {
}

.footer-bottom p a {
color: #004d12;
text-decoration: underline;
font-weight: 500;
transition: ease-in-out all 0.2s;
}

.footer-bottom p a:hover {
color: #d99600;
}


.date-range-wrapper {
max-width: 100%;
margin: 0 auto;
position: relative;
}

.date-range-input {
padding: 0 24px;
background-color: #fdf7eb;
border: 1px solid #dbcebf;
border-radius: 30px;
cursor: pointer;
font-size: 16px;
min-height: 54px;
height: 54px;
align-items: center;
width: 100%;
min-width: 100%;
display: flex;
gap: 10px;
justify-content: space-between;
}

/* Popup Base */
.date-picker {
position: absolute;
width: 100%;
background: #fff;
border: none;
border-radius: 15px;
padding: 15px 12px;
z-index: 999;
box-shadow: 0 4px 15px rgba(0,0,0,0.15);
opacity: 0;
pointer-events: none;
transform: translateY(10px);
transition: all .25s ease;
}

.open-down {
top: 105%;
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}

.calendar-header {
display: flex;
justify-content: space-between;
padding: 0 0 5px 0;
font-size: 16px;
font-weight: bold;
text-transform: uppercase;
align-items: center;
}

.calendar-header i {
font-size: 21px;
cursor: pointer;
}

.calendar-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 5px;
margin-top: 10px;
}

.calendar-grid div {
padding: 10px;
text-align: center;
border-radius: 10px;
cursor: pointer;
height: auto;
width: auto;
display: flex;
align-items: center;
justify-content: center;
}

.calendar-grid div:hover {
background: #ececec;
}

.day {
background: #fafafa;
}

.day.disabled {
background: #f9f9f9;
color: #d4d4d4;
cursor: not-allowed;
}

.day.disabled:hover {
background: #f9f9f9;
color: #d4d4d4;
cursor: not-allowed;
/*no hover effect*/
}

.selected {
background: #004d12 !important;
color: #ffffff;
}

.in-range {
background: #bdd1c2;
}

.apply-btn {
position: relative;
overflow: hidden;
height: 48px;
padding: 0 30px;
border-radius: 30px;
background: #004d12;
background-size: auto;
background-size: 400%;
color: #fff;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-weight: 600;
border: none;
width: 100%;
margin: 15px 0 0 0;
z-index: 1;
}

.apply-btn:disabled {
background: #ccc;
cursor: not-allowed;
pointer-events: none; /* ensures clicks are blocked */
}

.apply-btn:hover::before {
transform: scaleX(1);
}

.apply-btn:hover {
color: #ffffff;
}

.apply-btn::before {
content: "";
position: absolute;
top: 0;
left: 0;
transform: scaleX(0);
transform-origin: 0 50%;
width: 100%;
height: inherit;
border-radius: inherit;
background: linear-gradient( 82.3deg, #d99600 10.8%, #d99600 94.3% );
transition: all 0.475s;
z-index: -1;
}

.video-card {
position: relative;
display: block;
cursor: pointer;
}

.video-card img {
width: 100%;
border-radius: 15px;
}

.video-card .play-btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: inline-flex;
align-items: center;
text-decoration: none;
transition: 0.3s ease;
}

.video-card .play-btn i {
color: #FF0000;
font-size: 66px;
transition: 0.3s ease;
}

/* 🔥 SCALE EFFECT ON HOVER */
.video-card:hover .play-btn i {
transform: scale(1.15);
color: #FFF;
}

.mfp-iframe-scaler iframe {
border-radius: 15px !important;
}




/* Responsive: Portrait tablets and up */
@media screen and (max-width: 1399px) {
h1, h2, h3, h4, h5, h6 {
margin: 0 0 24px 0;
}

.lead {
margin: 0 0 30px 0;
}

.carousel-inner .carousel-item img {
height: 768px;
object-fit: cover;
object-position: center;
}



.slider-form h3 {
font-size: 24px;
}

.main-slider .slider-overlay .slider-form .lead {
font-size: 15px;
margin: 0 0 20px 0;
}

.main-slider .slider-overlay .slider-overlay-content h1 {
font-size: 36px;
}

.main-slider .slider-overlay .slider-overlay-content h4 {
font-size: 18px;
}

.explore-section .explore-image img {
height: 520px;
}

.about-section .about-image img {
height: 520px;
}
}


@media screen and (max-width: 1199px) {
h2 {
font-size: 30px;
}

.lead {
font-size: 16px;
}

.py-80 {
padding: 60px 0;
}

.pt-80 {
padding: 60px 0 0 0;
}

.btn-custom {
height: 45px;
padding: 0 24px;
}

.call-btn {
height: 45px;
width: 45px;
}

.form-floating > .form-control, .form-floating > .form-control-plaintext {
padding: 15px 24px;
min-height: 48px;
height: 48px;
}

.carousel-inner .carousel-item img {
height: 640px;
}

.form-floating > label {
padding: 8px 24px;
}

.carousel-indicators {
justify-content: start;
margin-left: 9%;
}

footer .contact-detail {
gap: 0;
margin: 0 0 10px 0;
flex-direction: column;
}

footer .footer-logo {
width: 180px;
margin: 0 0 15px 0;
}

.main-slider .slider-overlay .slider-overlay-content h1 {
font-size: 48px;
}

.explore-section .explore-image img {
height: 480px;
}

.about-section .about-image img {
height: 480px;
}

.exp-card .exp-thumb img {
height: 250px;
border-radius: 15px;
}

.exp-card .exp-detail h4 {
font-size: 21px;
}
.date-range-input {
font-size: 15px;
min-height: 48px;
height: 48px;
}
}

@media screen and (max-width: 991px) {
.py-80 {
padding: 40px 0;
}

.pt-80 {
padding: 40px 0 0 0;
}

.carousel-control-next-icon, .carousel-control-prev-icon {
display: none;
}

.carousel-indicators [data-bs-target] {
width: 12px;
height: 12px;
background: #ffffff !important;
display: block;
border-radius: 50%;
transition: 0.3s;
border: none;
opacity: 1;
}

.carousel-indicators .active {
background: #d99600 !important;
}

.carousel-indicators {
background: #ffffff;
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 1) 100%);
margin: 0;
padding: 60px 15px 15px 15px;
justify-content: center;
}

.booking-form { 
padding: 30px 24px;
}
.explore-section .explore-image {
margin: 0 0 30px 0;
}
.main-slider .slider-overlay .slider-overlay-content { 
text-align: center;
}

.explore-section .explore-image img {
height: 420px;
border-radius: 15px;
}

.about-section .about-image img {
height: 420px;
border-radius: 15px;
}

.about-section .about-image {
margin: 0 0 30px 0;
}

.explore-section {
padding: 40px 0;
}

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

.amenities-card h4 {
font-size: 15px;
margin: 0;
}

.amenities-card {
padding: 20px 10px;
}

.f-carousel .f-carousel__slide img {
border-radius: 15px;
height: 420px;
width: 100%;
object-fit: cover;
object-position: center;
}
}

@media screen and (max-width: 767px) {
h2 {
font-size: 27px;
}

.main-slider .slider-overlay {
position: static;
background-color: #fff;
padding: 30px 0 0 0;
}

.carousel-inner .carousel-item img {
height: 420px;
}

.slider-overlay .container {
max-width: 540px;
}

.main-slider .slider-overlay .slider-form {
padding: 24px;
background-color: #ffffff;
border-radius: 15px;
backdrop-filter: blur(4px);
border: 1px solid #dbcebf;
margin: 30px 0 0 0;
}

.main-slider .slider-overlay .slider-overlay-content h1 {
font-size: 36px;
text-shadow: none;
color: #004d12;
text-align: center;
}

.main-slider .slider-overlay .slider-overlay-content h4 {
font-size: 16px;
text-shadow: none;
color: var(--body-color);
text-align: center;
}

.slider-overlay-content .btn-custom {
display: none;
}

.slider-form h3 {
font-size: 24px;
text-align: center;
}

.main-slider .slider-overlay .slider-form .lead {
font-size: 15px;
margin: 0 0 20px 0;
text-align: center;
}

.main-slider .slider-overlay .slider-overlay-content h1 {
}

.main-slider .slider-overlay .slider-overlay-content h1 small {
color: #d99600;
font-size: 24px;
font-weight: 500;
}

.explore-section .explore-image img {
height: 350px;
}

.about-section .about-image img {
height: 350px;
}

.f-carousel .f-carousel__slide img {
height: 350px;
}

.exp-card {
display: block;
width: 100%;
}

.exp-card .exp-thumb {
flex: 0 0 100%;
max-width: 100%;
margin: 0 0 24px 0;
}

.exp-card .exp-detail {
flex: 0 0 100%;
max-width: 100%;
text-align: center;
}

.exp-card .exp-thumb img {
height: 280px;
}

footer { 
padding: 40px 0 0 0;
}
}

@media screen and (max-width: 575px) {
body {
line-height: 1.5;
}

.booking-form {
padding: 24px 15px;
}

.carousel-inner .carousel-item img {
height: 500px;
}

.main-slider .slider-overlay .slider-overlay-content h1 small {
font-size: 18px;
}

h2 {
font-size: 24px;
}

.main-slider .slider-overlay .slider-overlay-content h1 {
font-size: 24px;
margin: 0 0 15px 0;
}

.main-slider .slider-overlay .slider-form {
padding: 24px 15px;
}

.slider-form h3 {
font-size: 21px;
text-align: center;
}

.main-slider .slider-overlay .slider-overlay-content h4 {
font-size: 15px;
line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
margin: 0 0 15px 0;
}

.amenities-card .amenities-icon {
height: 70px;
width: 70px;
}

.amenities-card .amenities-icon img {
height: 35px;
}

.local-attraction .btn-custom {
width: 100%;
text-align: center;
}

.navbar-brand img {
width: 160px;
display: block;
}

.is-sticky .navbar-brand img {
width: 120px;
}

.form-floating > label {
font-size: 15px;
}

.explore-section .explore-image img {
height: 320px;
}

.about-section .about-image img {
height: 320px;
}

.f-carousel .f-carousel__slide img {
height: 320px;
}

.calendar-grid div {
padding: 7px 10px;
font-size: 15px;
}

.apply-btn {
height: 45px;
}

.date-range-input {
font-size: 15px;
}
.form-floating > label {
padding: 10px 24px;
}
.explore-section h2 small { 
font-size: 18px; 
}

footer .contact-detail p:last-child {
margin: 0;
}
footer .contact-detail {
gap: 0;
margin: 0; 
}
footer ul li:last-child {
margin: 0;
}
}