/* =======================================================
GLOBAL THEME COLORS
======================================================= */
:root {
--brown: #4A3325;
--gold: #D4A574;
--cream: #F6EFE7;
--dark-text: #2B1B12;
}

/* =======================================================
GLOBAL RESET
======================================================= */
body {
margin: 0;
background: var(--cream);
font-family: "Poppins", sans-serif;
}

html {
scroll-behavior: smooth;
}

/* =======================================================
HEADER (TRANSPARENT)
======================================================= */
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: transparent;
padding: 12px 35px;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 1000;
transition: 0.4s;
}

/* header color after scrolling */
header.scrolled{
background: var(--brown);
box-shadow: 0 4px 18px rgba(0,0,0,0.4);
}

/* =======================================================
LOGO
======================================================= */
.logo {
height: 170px;
width: auto;
transition: 0.3s;
filter: drop-shadow(0px 6px 10px rgba(0,0,0,0.4));
}

.logo:hover {
transform: scale(1.05);
}

/* =======================================================
NAV MENU
======================================================= */
nav{
display:flex;
align-items:center;
gap:25px;
flex-wrap:wrap;
}

nav a{
position:relative;
color:white;
text-decoration:none;
font-weight:500;
font-size:15px;   /* slightly larger */
letter-spacing:0.5px;
transition:0.3s;
}
/* NAV HOVER EFFECT */

nav a::after{
content:"";
position:absolute;
width:0;
height:2px;
left:0;
bottom:-6px;
background:var(--gold);
transition:width 0.3s ease;
}

nav a:hover::after{
width:100%;
}

nav a:hover{
color:var(--gold);
}

/* =======================================================
PARALLAX HERO
======================================================= */
.parallax {
background-attachment: fixed;
background-size: cover;
background-position: center;
}

.hero {
height: 90vh;
background:
linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)),
url("gallery/DON05204.JPG");
background-size: cover;
background-position: center;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
color: white;
text-align: center;
}

.hero h2 {
font-family: "Playfair Display", serif;
font-size: 4rem;
position: relative;
display: inline-block;
padding: 0 20px;
}
.hero h2::before,
.hero h2::after {
content: "";
position: absolute;
top: 50%;
width: 80px;
height: 2px;
background: var(--gold);
}

.hero h2::before {
left: -100px;
}

.hero h2::after {
right: -100px;
}

.hero p {
margin-top:10px;
}

.hero button {
margin-top: 20px;
padding: 13px 40px;
background: var(--gold);
border: none;
border-radius: 10px;
font-size: 1.1rem;
color: var(--brown);
cursor: pointer;
}

.hero button:hover {
transform: scale(1.08);
}

/* =======================================================
IMAGE SLIDER
======================================================= */
.slider {
width: 90%;
margin: 40px auto;
overflow: hidden;
border-radius: 15px;
box-shadow: 0 4px 20px rgba(0,0,0,0.25);
}

.slider img {
width: 100%;
height: 350px;
object-fit: cover;
display: none;
}

.slider img.active {
display: block;
}

/* =======================================================
TITLES
======================================================= */
.section-title {
text-align: center;
font-family: "Playfair Display", serif;
font-size: 2.8rem;
color: var(--brown);
margin-top: 50px;
}

/* =======================================================
BOOKING FORM
======================================================= */

.booking-container{
width:90%;
max-width:600px;
margin:60px auto;
background:white;
padding:30px;
border-radius:15px;
box-shadow:0 6px 25px rgba(0,0,0,0.2);
text-align:center;
}

.booking-container h2{
font-family:"Playfair Display",serif;
color:var(--brown);
margin-bottom:20px;
}

.booking-container form{
display:flex;
flex-direction:column;
gap:15px;
}

.booking-container input,
.booking-container select{
padding:12px;
border-radius:8px;
border:1px solid #ccc;
font-size:15px;
width:100%;
}

.booking-container button{
padding:13px;
border:none;
background:var(--gold);
color:var(--brown);
font-weight:600;
border-radius:8px;
cursor:pointer;
transition:0.3s;
}

.booking-container button:hover{
transform:scale(1.05);
}

/* =======================================================
ROOMS
======================================================= */
/* =======================================================
ROOMS
======================================================= */
.room-container {
display: flex;
justify-content: center;
gap: 25px;
flex-wrap: wrap;
}

.room-card {
width: 320px;
background: white;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 5px 18px rgba(0,0,0,0.2);
transition: .4s;
}

.room-card:hover {
transform: translateY(-10px) scale(1.05);
}

.room-card img {
width: 100%;
height: 220px;
object-fit: cover;
}

.room-card .info {
padding: 15px;
}

/* =======================================================
AMENITIES
======================================================= */
.amenities {
display: flex;
justify-content: center;
gap: 35px;
flex-wrap: wrap;
padding: 20px;
}

.amenity {
width: 160px;
background: white;
border-radius: 15px;
padding: 18px;
text-align: center;
box-shadow: 0 5px 18px rgba(0,0,0,0.15);
transition: .3s;
}

.amenity:hover {
transform: translateY(-10px) scale(1.07);
}

.amenity i {
font-size: 40px;
color: var(--gold);
}

/* =======================================================
GALLERY SLIDER
======================================================= */

/* =======================================================
GALLERY SLIDER
======================================================= */

.gallery-wrapper{
position:relative;
width:90%;
margin:40px auto;
overflow:hidden;
}

.gallery-container{
display:flex;
gap:20px;
transition:transform 0.5s ease;
}

.gallery-container img{
width:16.66%;
height:220px;
object-fit:cover;
border-radius:12px;
flex-shrink:0;
box-shadow:0 5px 18px rgba(0,0,0,0.2);
transition:.3s;
}

.gallery-container img:hover{
transform:scale(1.08);
}

/* Gallery Buttons */

.gallery-btn{
position:absolute;
top:50%;
transform:translateY(-50%);
background:white;
border:none;
font-size:30px;
cursor:pointer;
padding:10px 15px;
border-radius:50%;
box-shadow:0 5px 15px rgba(0,0,0,0.3);
z-index:10;
}

.gallery-btn:hover{
background:var(--gold);
color:white;
}

.prev{
left:10px;
}

.next{
right:10px;
}

/* =======================================================
TESTIMONIALS SLIDER
======================================================= */

.testimonials{
width:70%;
margin:60px auto;
text-align:center;
position:relative;
min-height:150px;
}

.testimonial{
display:none;
animation:fadeIn 1s ease;
}

.testimonial.active{
display:block;
}

.testimonial p{
font-size:1.2rem;
font-style:italic;
color:var(--dark-text);
}

.testimonial h4{
color:var(--gold);
margin-top:10px;
}

.stars{
color:gold;
font-size:20px;
margin:10px 0;
}
/* =======================================================
VIDEO SECTION
======================================================= */
.video-container{
width:90%;
margin:40px auto;
border-radius:15px;
overflow:hidden;
box-shadow:0 5px 18px rgba(0,0,0,0.25);
}

.video-container video{
width:100%;
height:420px;
object-fit:cover;
}

/* =======================================================
FOOTER
======================================================= */
footer {
background: var(--brown);
padding: 15px;
text-align: center;
color: var(--cream);
margin-top: 40px;
}

/* =======================================================
WHATSAPP BUTTON
======================================================= */
.whatsapp-btn {
position: fixed;
right: 25px;
bottom: 25px;
background: #25d366;
color: white;
padding: 15px 18px;
font-size: 28px;
border-radius: 50%;
box-shadow: 0 5px 18px rgba(0,0,0,0.3);
z-index: 1500;
}
/* =======================================================
AMENITIES VIDEO BACKGROUND
======================================================= */

.video-amenities{
position: relative;
overflow: hidden;
padding: 80px 20px;
}

.amenities-video{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -2;
}

.video-amenities::after{
content: "";
position: absolute;
top:0;
left:0;
width:100%;
height:100%;
background: rgba(0,0,0,0.45);
z-index:-1;
}

.video-amenities .section-title{
color:white;
}

/* PRICE DISPLAY */

.price-box{
margin-top:10px;
font-size:18px;
font-weight:600;
color:var(--gold);
}

/* CONTACT SECTION CARD */

.contact-box{
background:white;
max-width:500px;
margin:40px auto;
padding:30px;
border-radius:12px;
box-shadow:0 8px 25px rgba(0,0,0,0.15);
text-align:center;
}

.contact-box p{
display:flex;
justify-content:center;
align-items:center;
gap:10px;
margin:12px 0;
font-size:16px;
}

.contact-box i{
color:var(--gold);
font-size:18px;
}