/* =====================================
HOME PAGE
===================================== */


/* HERO */

.hero{
    min-height:100vh;
    background:
    linear-gradient(rgba(6,25,19,.46),rgba(6,25,19,.62)),
    url("../images/hero-mountain-resort.jpg");
    background-size:cover;
    background-position:center 58%;
    position:relative;

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

.hero-content{
    max-width:950px;
    color:white;
    padding:0 20px;
}

.hero-content h1{
    font-size:80px;
    font-family:'Playfair Display',serif;
    margin-bottom:25px;
}

.hero-content p{
    font-size:20px;
    line-height:1.9;
    color:#eee;
    margin-bottom:50px;
}

.hero-stats{
    display:flex;
    justify-content:center;
    gap:80px;
    margin-bottom:50px;
}

.hero-stats h2{
    font-size:50px;
    color:#d4b06a;
    font-family:'Playfair Display',serif;
}

.hero-stats span{
    font-size:15px;
}

.hero-buttons{
    display:flex;
    justify-content:center;
    gap:25px;
}

.explore-btn,
.hero-book-btn{
    text-decoration:none;
    padding:18px 40px;
    border-radius:50px;
    font-weight:600;
    transition:.4s;
}

.explore-btn{
    background:white;
    color:#0f3b2f;
}

.hero-book-btn{
    background:#d4b06a;
    color:white;
}

.explore-btn:hover{
    background:#d4b06a;
    color:white;
}

.hero-book-btn:hover{
    background:white;
    color:#0f3b2f;
}

/*header*/
#header{

position:fixed;

top:0;
left:0;

width:100%;

z-index:9999;

transition:
background .4s,
box-shadow .4s;

background:transparent;

}

#header.sticky{

background:rgba(15,59,47,.95);

backdrop-filter:blur(10px);

box-shadow:
0 5px 20px rgba(0,0,0,.15);

}

/* BOOKING */

.booking-section{
    margin-top:-80px;
    position:relative;
    z-index:100;
    padding:0 8%;
}

.booking-box{
    background:white;
    border-radius:25px;
    padding:35px;
    box-shadow:0 15px 40px rgba(0,0,0,.12);

    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:25px;
    flex-wrap:wrap;
}

.field{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.field label{
    font-size:14px;
    font-weight:600;
    color:#0f3b2f;
}

.field input,
.field select{
    width:200px;
    padding:15px;
    border:1px solid #ddd;
    border-radius:15px;
    outline:none;
}

.availability-btn{
    background:#0f3b2f;
    color:white;
    border:none;
    padding:18px 35px;
    border-radius:50px;
    cursor:pointer;
    transition:.4s;
}

.availability-btn:hover{
    background:#d4b06a;
}



/* PROPERTIES */

.properties{
    padding:120px 8%;
    background:#fafaf7;
}

.property-container{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
    gap:40px;
}

.property-card{
    background:white;
    border-radius:30px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    transition:.4s;
}

.property-card:hover{
    transform:translateY(-10px);
}

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

.property-content{
    padding:35px;
}

.property-content h3{
    font-size:34px;
    color:#0f3b2f;
    font-family:'Playfair Display',serif;
    margin-bottom:10px;
}

.property-content span{
    color:#d4b06a;
}

.property-content p{
    line-height:1.9;
    color:gray;
    margin:20px 0;
}

.amenities{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-bottom:30px;
}

.amenities span{
    background:#f3f3f3;
    padding:10px 15px;
    border-radius:30px;
    font-size:14px;
}

.property-content a{
    display:inline-block;
    text-decoration:none;
    background:#0f3b2f;
    color:white;
    padding:15px 30px;
    border-radius:50px;
    transition:.4s;
}

.property-content a:hover{
    background:#d4b06a;
}

/* =====================================
WHY CHOOSE US
===================================== */

.why-us{
padding:120px 8%;
background:white;
}

.why-container{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:35px;
}

.why-card{
background:#fafaf7;
padding:50px 40px;
border-radius:30px;
text-align:center;
box-shadow:0 10px 30px rgba(0,0,0,.08);
transition:.4s;
}

.why-card:hover{
transform:translateY(-10px);
}

.icon{
font-size:55px;
margin-bottom:25px;
}

.why-card h3{
font-size:30px;
font-family:'Playfair Display',serif;
color:#0f3b2f;
margin-bottom:20px;
}

.why-card p{
line-height:1.9;
color:gray;
}


/* =====================================
AMENITIES
===================================== */

.amenities-section{
padding:120px 8%;
background:#fafaf7;
}

.amenities-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:30px;
}

.amenity-box{
background:white;
padding:45px 30px;
border-radius:25px;
text-align:center;
box-shadow:0 10px 30px rgba(0,0,0,.08);
transition:.4s;
}

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

.amenity-icon{
font-size:50px;
margin-bottom:20px;
}

.amenity-box h3{
font-size:24px;
font-family:'Playfair Display',serif;
color:#0f3b2f;
}


/* =====================================
SIGNATURE EXPERIENCES
===================================== */

.experiences{
padding:120px 8%;
background:white;
}

.experience-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
gap:35px;
}

.experience-card{
position:relative;
height:350px;
overflow:hidden;
border-radius:30px;
cursor:pointer;
}

.experience-card img{
width:100%;
height:100%;
object-fit:cover;
transition:.7s;
}

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

.experience-overlay{
position:absolute;
left:0;
right:0;
bottom:0;
padding:35px;
background:linear-gradient(transparent,rgba(0,0,0,.9));
color:white;
}

.experience-overlay h3{
font-size:32px;
font-family:'Playfair Display',serif;
margin-bottom:15px;
color: #eee;
}

.experience-overlay p{
font-size:15px;
line-height:1.8;
color:#eee;
}

/* =====================================
LOCATIONS
===================================== */

.locations{
padding:120px 8%;
background:#fafaf7;
}

.location-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
gap:35px;
}

.location-card{
background:white;
padding:50px;
border-radius:30px;
box-shadow:0 10px 30px rgba(0,0,0,.08);
transition:.4s;
}

.location-card:hover{
transform:translateY(-10px);
}

.location-content h3{
font-size:20px;
color:#c6a05d;
margin-bottom:10px;
}

.location-content h4{
font-size:36px;
font-family:'Playfair Display',serif;
color:#0f3b2f;
margin-bottom:20px;
}

.location-content p{
line-height:1.9;
color:gray;
margin-bottom:25px;
}

.location-tags{
display:flex;
flex-wrap:wrap;
gap:12px;
margin-bottom:30px;
}

.location-tags span{
background:#f3f3f3;
padding:10px 15px;
border-radius:30px;
font-size:14px;
}

.location-content a{
background:#0f3b2f;
color:white;
padding:15px 30px;
border-radius:50px;
text-decoration:none;
display:inline-block;
transition:.4s;
}

.location-content a:hover{
background:#d4b06a;
}


/* =====================================
REVIEWS
===================================== */

.reviews{
padding:120px 8%;
background:white;
}

.review-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
gap:35px;
}

.review-card{
background:#fafaf7;
padding:45px 35px;
border-radius:30px;
text-align:center;
box-shadow:0 10px 30px rgba(0,0,0,.08);
transition:.4s;
}

.review-card:hover{
transform:translateY(-10px);
}

.review-card img{
width:100px;
height:100px;
border-radius:50%;
object-fit:cover;
border:5px solid #d4b06a;
margin-bottom:25px;
}

.review-card h3{
font-size:28px;
font-family:'Playfair Display',serif;
color:#0f3b2f;
margin-bottom:10px;
}

.review-card h4{
font-size:15px;
color:gray;
margin-bottom:20px;
}

.stars{
font-size:20px;
margin-bottom:25px;
}

.review-card p{
line-height:1.9;
color:gray;
}


/* =====================================
GALLERY PREVIEW
===================================== */

.gallery-preview{
padding:120px 8%;
background:#fafaf7;
}

.gallery-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:25px;
margin-top:70px;
}

.gallery-grid img{
width:100%;
height:300px;
object-fit:cover;
border-radius:25px;
cursor:pointer;
transition:.5s;
box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.gallery-grid img:hover{
transform:scale(1.03);
}


/* GALLERY BUTTON */

.gallery-btn{
text-align:center;
margin-top:60px;
}

.gallery-btn a{
background:#0f3b2f;
color:white;
padding:18px 40px;
border-radius:50px;
text-decoration:none;
font-weight:600;
transition:.4s;
}

.gallery-btn a:hover{
background:#d4b06a;
}

/* =====================================
STATS SECTION
===================================== */

.stats-section{
padding:100px 8%;
background:#0f3b2f;
color:white;

display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:40px;

text-align:center;
}

.stat-box h2{
font-size:60px;
font-family:'Playfair Display',serif;
color:#d4b06a;
margin-bottom:15px;
}

.stat-box p{
font-size:18px;
}


/* =====================================
CTA
===================================== */

.cta{
padding:140px 8%;
text-align:center;
background:white;
}

.cta h2{
font-size:60px;
font-family:'Playfair Display',serif;
color:#0f3b2f;
margin-bottom:30px;
}

.cta p{
max-width:750px;
margin:auto;
line-height:1.9;
color:gray;
margin-bottom:50px;
font-size:18px;
}

.cta a{
display:inline-block;
background:#0f3b2f;
color:white;
padding:18px 40px;
border-radius:50px;
text-decoration:none;
font-weight:600;
transition:.4s;
}

.cta a:hover{
background:#d4b06a;
}


/* =====================================
FAQ
===================================== */

.faq-section{
padding:120px 8%;
background:#fafaf7;
}

.faq-container{
max-width:1000px;
margin:auto;
margin-top:70px;
}

.faq-item{
background:white;
border-radius:25px;
margin-bottom:20px;
overflow:hidden;
box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.faq-question{
display:flex;
justify-content:space-between;
align-items:center;
padding:30px;
cursor:pointer;
}

.faq-question h3{
font-size:24px;
font-family:'Playfair Display',serif;
color:#0f3b2f;
}

.faq-question span{
font-size:30px;
color:#d4b06a;
}

.faq-answer{
max-height:0;
overflow:hidden;
transition:.5s ease;
}

.faq-answer p{
padding:0 30px 30px;
line-height:1.9;
color:gray;
}

.faq-item.active .faq-answer{
max-height:250px;
}


/* FAQ HOVER */

.faq-item:hover{
transform:translateY(-3px);
transition:.3s;
}

/* =====================================
HOVER EFFECTS
===================================== */

.property-card,
.why-card,
.amenity-box,
.review-card,
.location-card{
transition:.4s;
}

.property-card:hover,
.why-card:hover,
.amenity-box:hover,
.review-card:hover,
.location-card:hover{
transform:translateY(-10px);
}


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

@media(max-width:900px){

/* HERO */

.hero{
min-height:auto;
padding:132px 0 88px;
background-position:center 55%;
}

.hero-content{
padding:0 16px;
max-width:720px;
}

.hero-content h1{
font-size:clamp(38px,9vw,54px);
line-height:1.08;
margin-bottom:18px;
}

.hero-content p{
font-size:16px;
line-height:1.7;
margin-bottom:34px;
}

.hero-stats{
flex-direction:row;
flex-wrap:wrap;
justify-content:center;
gap:14px;
margin-bottom:32px;
width:100%;
}

.hero-stats > div{
flex:1 1 30%;
min-width:110px;
text-align:center;
}

.hero-stats h2{
font-size:34px;
}

.hero-buttons{
flex-direction:column;
align-items:center;
gap:14px;
}

.explore-btn,
.hero-book-btn{
width:min(320px,100%);
padding:16px 24px;
}


/* BOOKING */

.booking-box{
flex-direction:column;
align-items:stretch;
padding:24px;
border-radius:26px;
gap:14px;
}

.field{
width:100%;
}

.field label{
font-size:12px;
}

.field input,
.field select{
width:100%;
height:64px;
padding:0 16px;
}

.availability-btn{
width:100%;
height:64px;
padding:0 18px;
}


/* PROPERTIES */

.properties{
padding:82px 5%;
}

.property-container{
grid-template-columns:1fr;
gap:20px;
max-width:520px;
margin:0 auto;
}

.property-card img{
height:250px;
}

.property-content{
padding:24px;
}

.property-content h3{
font-size:28px;
}

.property-content p{
margin:14px 0 18px;
line-height:1.75;
}

.property-content a{
width:100%;
text-align:center;
}


/* WHY US */

.why-container{
grid-template-columns:1fr;
}

.why-card{
padding:28px 20px;
}


/* AMENITIES */

.amenities-grid{
grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
}

.amenity-box{
padding:24px 18px;
}


/* EXPERIENCES */

.experience-grid{
grid-template-columns:1fr;
}

.experience-card{
height:300px;
}

.experience-card .overlay{
padding:18px;
}


/* LOCATIONS */

.location-grid{
grid-template-columns:1fr;
}

.location-card{
padding:22px;
}


/* REVIEWS */

.review-grid{
grid-template-columns:1fr;
}

.review-card{
padding:30px 22px;
}


/* GALLERY */

.gallery-grid{
grid-template-columns:1fr;
}

.gallery-grid img{
border-radius:18px;
}


/* FAQ */

.faq-question{
padding:25px;
}

.faq-question h3{
font-size:18px;
}

}


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

@media(max-width:600px){

.hero{
padding:118px 0 74px;
background-position:center 52%;
}

.hero-content h1{
font-size:clamp(34px,10vw,44px);
}

.hero-content p{
font-size:15px;
}

.hero-stats h2{
font-size:30px;
}

.hero-stats span{
font-size:13px;
}

.section-title h2{
font-size:32px;
line-height:1.12;
}

.section-title p{
font-size:14px;
padding:0 10px;
}

.cta h2{
font-size:34px;
}

.stat-box h2{
font-size:36px;
}

.location-content h4{
font-size:26px;
}

.review-card{
padding:28px 18px;
}

.booking-section{
margin-top:-34px;
}

.booking-box{
padding:20px;
border-radius:24px;
}

.property-content h3{
font-size:24px;
}

.property-content p,
.why-card p,
.amenity-box p,
.location-card p{
font-size:14px;
line-height:1.7;
}

}


/* =====================================
SMOOTH IMAGE EFFECTS
===================================== */

.gallery-grid img,
.property-card img{
transition:.5s;
}

.gallery-grid img:hover{
transform:scale(1.03);
}


/* =====================================
BUTTON HOVER
===================================== */

.explore-btn:hover,
.hero-book-btn:hover,
.availability-btn:hover,
.gallery-btn a:hover,
.cta a:hover{
transform:translateY(-3px);
}

/* =====================================
calendar
===================================== */

.calendar-popup{
position:fixed;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:900px;
max-width:95%;
background:white;
padding:30px;
border-radius:20px;
box-shadow:0 20px 60px rgba(0,0,0,.2);
display:none;
z-index:99999;
}

.calendar-popup.active{
display:block;
}

#popupCalendar{
display:grid;
grid-template-columns:repeat(7,1fr);
gap:10px;
}

.popup-day{
height:75px;
border-radius:12px;
background:#e8f9e3;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
cursor:pointer;
transition:.3s;
}

.popup-day:hover{
background:#dff4d7;
}

.popup-price{
font-size:11px;
margin-top:5px;
}

.popup-booked{
background:#e63946;
color:white;
pointer-events:none;
}

.popup-selected{
background:#1976d2;
color:white;
}

.popup-past{
background:#f1f1f1;
color:#aaa;
pointer-events:none;
}

.popup-empty{
visibility:hidden;
}

.popup-weekdays{
display:grid;
grid-template-columns:repeat(7,1fr);
margin-bottom:15px;
}

.popup-weekdays div{
text-align:center;
font-weight:600;
color:gray;
}

.popup-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:25px;
}

/* Shared booking card sits between the hero and content. */
.hero + .booking-widget-section{
margin-top:-72px;
}

@media(max-width:700px){
.hero{
min-height:820px;
}

.hero + .booking-widget-section{
margin-top:-45px;
}
}

/* Keep the shared modal authoritative over the retired home calendar rules. */
.booking-widget-section .booking-box{
display:grid;
grid-template-columns:1.35fr 1fr 1fr .85fr .8fr;
gap:16px;
align-items:end;
padding:30px;
border-radius:35px;
box-shadow:0 15px 50px rgba(0,0,0,.1);
}

.calendar-popup:not(.legacy-calendar-popup){
inset:0;
top:0;
left:0;
width:auto;
max-width:none;
padding:24px;
display:flex;
transform:none;
background:rgba(0,0,0,.35);
opacity:0;
visibility:hidden;
}

.calendar-popup:not(.legacy-calendar-popup).active{
display:flex;
opacity:1;
visibility:visible;
}

#popupCalendar.calendar-months{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:44px;
}

@media(max-width:700px){
.booking-widget-section .booking-box{
grid-template-columns:1fr;
padding:20px;
border-radius:28px;
}

.calendar-popup:not(.legacy-calendar-popup){
padding:10px;
}

#popupCalendar.calendar-months{
grid-template-columns:1fr;
gap:0;
}
}

@media(min-width:701px) and (max-width:1050px){
.booking-widget-section .booking-box{
grid-template-columns:repeat(2,minmax(0,1fr));
}
}