@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Poppins:wght@300;400;500;600&display=swap');
html,
body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
}
*{
margin:0;
padding:0;
box-sizing:border-box;
scroll-behavior:smooth;
}

body{
font-family:'Poppins',sans-serif;
background:#f7f2ea;
color:#17362d;
overflow-x:hidden;
position:relative;
}

/* SCROLLBAR */

::-webkit-scrollbar{
width:8px;
}

::-webkit-scrollbar-thumb{
background:#b08d57;
border-radius:10px;
}

/* NAVBAR */

nav{
position:fixed;
top:0;
left:0;
width:100%;
padding:15px 20px;
background:rgba(255,255,255,.85);
backdrop-filter:blur(15px);
z-index:9999;
text-align:center;
font-weight:600;
color:#17362d;
}

/* HERO */

.hero{
min-height:100vh;

background:
linear-gradient(
rgba(0,0,0,.3),
rgba(0,0,0,.6)
),
url("assets/background.webp");

background-size:cover;
background-position:center;

display:flex;
justify-content:center;
align-items:center;
text-align:center;

padding:20px;
position:relative;
overflow:hidden;
}

.hero-content{
    max-width:900px;
}


/* Desktop Hero Logo */
.main-logo{
    width:520px;
    max-width:100%;
    height:auto;
    display:block;
    margin:0 auto 30px;
}

.hero h1{
    font-size:4.5rem;
    margin-top:10px;
}


.hero p{
    font-size:1.3rem;
    max-width:700px;
    margin:auto auto 30px;
}
/* Intro Logo */
.intro-logo{
    width:360px;
    max-width:85%;
    height:auto;
}

/* Homepage Logo */
.main-logo{
    width:170px;
    max-width:60%;
    height:auto;
    display:block;
    margin:0 auto 25px;
}
/* BUTTONS */

.book-btn,
.big-book-btn{

display:flex;
justify-content:center;
align-items:center;

padding:18px 25px;

background:
linear-gradient(
90deg,
#0c4f36,
#1c7c54
);

color:white;
text-decoration:none;
font-weight:600;

border-radius:18px;

box-shadow:
0 10px 25px rgba(0,0,0,.15);

transition:.3s;
}

.book-btn:hover,
.big-book-btn:hover{
transform:translateY(-3px);
}

/* SECTIONS */

section{
padding:80px 20px;
position:relative;
}

.section-title{

font-family:'Cinzel',serif;

font-size:2.2rem;

text-align:center;

color:#7a5a22;

margin-bottom:35px;
}

.section-title::after{

content:"";

display:block;

width:120px;
height:2px;

background:#d4af37;

margin:15px auto 0;
}

/* HOMESTAYS */

.homestay-card{

display:flex;

background:white;

border-radius:30px;

overflow:hidden;

margin-bottom:35px;

box-shadow:
0 15px 35px rgba(0,0,0,.12);
}

.homestay-card img{

width:45%;

height:auto;

object-fit:cover;
}

.homestay-card .content{

width:55%;

padding:25px;
}

.homestay-card h3{

font-size:2rem;

font-family:'Cinzel',serif;

color:#17362d;

margin-bottom:15px;
}

.homestay-card p{
margin-bottom:20px;
line-height:1.7;
}

.features{

display:flex;
gap:20px;
flex-wrap:wrap;

margin-bottom:20px;
}

.features span{
font-size:.95rem;
}

/* WHY US */

.why-us{

background:
linear-gradient(
90deg,
#0a3f2d,
#0d5a3e,
#0a3f2d
);

color:white;
}

.why-grid{

display:grid;

grid-template-columns:
repeat(4,1fr);

gap:25px;
}

.why-card{
text-align:center;
}

.why-card i{
font-size:2rem;
margin-bottom:15px;
color:#f3d28b;
}

/* ABOUT */

.about{

text-align:center;

max-width:900px;

margin:auto;

line-height:1.8;
}
/* FLOATING PETALS */

.petal{
    position: fixed;
    width: 25px !important;
    height: auto !important;
    pointer-events: none;
    opacity: 0.8;
    z-index: 10;
    animation: fall linear infinite;
}

@keyframes fall{

0%{
transform:
translateY(-100px)
translateX(0px)
rotate(0deg);
}

50%{
transform:
translateY(50vh)
translateX(50px)
rotate(180deg);
}

100%{
transform:
translateY(120vh)
translateX(-50px)
rotate(360deg);
}

}



/* INTRO VIDEO */

#intro-screen{

position:fixed;

inset:0;

background:black;

z-index:10000;
}

#introVideo{

width:100%;
height:100%;

object-fit:cover;
}

.intro-overlay{

position:absolute;
inset:0;

display:flex;
flex-direction:column;

justify-content:center;
align-items:center;

background:rgba(0,0,0,.35);
}

.intro-title{

font-family:'Cinzel',serif;

font-size:3rem;

color:#f3d28b;

text-align:center;

margin-bottom:10px;

animation:fadeUp 2s forwards;
}

.intro-subtitle{

color:white;

font-size:1.1rem;

animation:fadeUp 2s forwards;
}

@keyframes fadeUp{

from{
opacity:0;
transform:translateY(40px);
}

to{
opacity:1;
transform:translateY(0);
}
}
/* ===========================
   MOBILE
=========================== */

@media(max-width:768px){

    /* Navbar */
    nav{
        font-size:12px;
        padding:12px 8px;
        line-height:1.3;
        white-space:normal;
    }

    /* Hero */
    .hero{
        padding-top:90px;
        min-height:100vh;
    }

    /* Hide ONLY the homepage logo */
    .main-logo{
        display:none;
    }

    .hero h1{
    font-size:clamp(1.7rem, 6vw, 4.5rem);
    line-height:1.2;
    margin-bottom:18px;
}

    .hero p{
        font-size:1rem;
    }

    /* Intro logo stays visible */
    .intro-logo{
        width:220px;
        max-width:85%;
        height:auto;
    }

    /* Homestays */
    .homestay-card{
        flex-direction:column;
    }

    .homestay-card img{
        width:100%;
        height:220px;
    }

    .homestay-card .content{
        width:100%;
        padding:18px;
    }

    .homestay-card h3{
        font-size:1.3rem;
        line-height:1.3;
        word-break:break-word;
    }

    /* Section Titles */
    .section-title{
        font-size:1.6rem;
        padding:0 10px;
    }

    /* Why Us */
    .why-grid{
        grid-template-columns:1fr;
    }

    /* Gallery */
    .gallery{
        grid-template-columns:repeat(2,1fr);
    }

    /* Booking */
    #booking h2{
        font-size:1.8rem;
        line-height:1.3;
    }

    /* Intro Text */
    .intro-title{
        font-size:1.7rem;
        line-height:1.3;
        padding:0 15px;
    }

    .intro-subtitle{
        font-size:0.9rem;
        text-align:center;
        padding:0 15px;
    }

    /* Floating Buttons */
    #visitBtn,
    #musicBtn{
        padding:10px 12px;
        font-size:12px;
        max-width:120px;
        white-space:nowrap;
    }

    #visitBtn{
        left:8px;
        bottom:15px;
    }

    #musicBtn{
        right:8px;
        bottom:15px;
    }
}
/* PREMIUM GALLERY */

.gallery-section{

padding:80px 8%;

background:#faf8f3;

}

.gallery-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

grid-auto-rows:250px;

gap:20px;

}

.gallery-item{

overflow:hidden;

border-radius:22px;

box-shadow:0 10px 30px rgba(0,0,0,.12);

cursor:pointer;

}

.gallery-item img{

width:100%;

height:100%;

object-fit:cover;

transition:.6s;

}

.gallery-item:hover img{

transform:scale(1.12);

}

.gallery-item.large{

grid-row:span 2;

}

@media(max-width:768px){

.gallery-grid{

grid-template-columns:1fr;

grid-auto-rows:250px;

}

.gallery-item.large{

grid-row:span 1;

}

}
/* ===========================
   PREMIUM STAY SECTION
=========================== */

.stay-section{
    max-width:1300px;
    margin:70px auto;
    padding:0 20px;
}

.stay-title{
    text-align:center;
    font-size:38px;
    color:#7b4b18;
    margin-bottom:30px;
}

.stay-layout{
    display:grid;
    grid-template-columns:45% 55%;
    gap:20px;
    align-items:start;
    margin-bottom:30px;
}

.main-photo img{
    width:100%;
    height:540px;
    object-fit:cover;
    border-radius:18px;
}

.photo-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px;
}

.photo-grid img{
    width:100%;
    height:125px;
    object-fit:cover;
    border-radius:12px;
    cursor:pointer;
    transition:.3s;
}

.photo-grid img:hover{
    transform:scale(1.05);
}

.stay-info{
    text-align:center;
}

.stay-info p{
    max-width:850px;
    margin:20px auto;
    line-height:1.8;
}

@media(max-width:768px){

    .stay-layout{
        display:block;
    }

    .main-photo img{
        height:260px;
        margin-bottom:15px;
    }

    .photo-grid{
        grid-template-columns:repeat(2,1fr);
        gap:10px;
    }

    .photo-grid img{
        height:120px;
    }

    .stay-title{
        font-size:28px;
    }
}
/* ===========================
   LIGHTBOX
=========================== */

#lightbox{

position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.92);

display:none;

justify-content:center;
align-items:center;

z-index:99999;

}

#lightbox img{

max-width:90%;
max-height:90%;
border-radius:12px;
box-shadow:0 15px 45px rgba(0,0,0,.6);

}

#closeLightbox{

position:absolute;
top:30px;
right:45px;
font-size:55px;
color:white;
cursor:pointer;

}


/* ===========================
   MOBILE
=========================== */

@media(max-width:900px){

.stay-layout{

grid-template-columns:1fr;

}

.main-photo img{

height:320px;

}

.photo-grid{

grid-template-columns:1fr 1fr;

}

.photo-grid img{

height:150px;

}

.stay-title{

font-size:30px;

}

.stay-info p{

font-size:16px;

}

.features{

gap:10px;

}

.features span{

font-size:14px;

}

}