/* =====================================
ABOUT HERO
===================================== */

.about-hero{
min-height:100vh;
background:
linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.55)),
url("../images/hero-mountain-resort.jpg");

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

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

padding:0 10%;
}

.about-hero-content{
max-width:900px;
margin-top:80px;
}

.about-hero-content h5{
color:#d4b06a;
letter-spacing:5px;
font-size:14px;
margin-bottom:20px;
}

.about-hero-content h1{
font-size:70px;
font-family:'Playfair Display',serif;
line-height:1.2;
color:white;
margin-bottom:30px;
}

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

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

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

/* HEADER */

.header,
#header{

position:fixed;
top:0;
left:0;
width:100%;

background:#0f3b2f;

z-index:9999;
box-shadow:
0 5px 20px rgba(0,0,0,.08);
transition:
transform .4s ease,
background .4s ease;
}

body{

background:#CAC6BA;
}
/* =====================================
ABOUT SECTION
===================================== */

.about-section{
padding:120px 8%;
background:white;
}

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

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

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

.about-box i{
font-size:50px;
color:#d4b06a;
margin-bottom:25px;
}

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

.about-box p{
line-height:1.9;
color:gray;
}


/* =====================================
TIMELINE SECTION
===================================== */

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

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

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

.timeline-item:hover{
transform:translateY(-10px);
}

.timeline-item h3{
font-size:50px;
font-family:'Playfair Display',serif;
color:#d4b06a;
margin-bottom:15px;
}

.timeline-item h4{
font-size:24px;
color:#0f3b2f;
margin-bottom:20px;
}

.timeline-item p{
line-height:1.8;
color:gray;
}


/* =====================================
OUR STORY
===================================== */

.our-story{
padding:120px 8%;
display:grid;
grid-template-columns:1fr 1fr;
gap:80px;
align-items:center;
background:white;
}

.story-image img{
width:100%;
border-radius:30px;
box-shadow:0 15px 40px rgba(0,0,0,.12);
}

.story-content h5{
color:#d4b06a;
letter-spacing:4px;
margin-bottom:20px;
}

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

.story-content p{
line-height:2;
color:gray;
margin-bottom:40px;
}

.story-points{
display:flex;
flex-direction:column;
gap:20px;
}

.story-points div{
font-size:18px;
color:#333;
}

.story-points i{
color:#d4b06a;
margin-right:10px;
}

/* =====================================
ABOUT PROPERTIES
===================================== */

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

.property-showcase{
display:flex;
flex-direction:column;
gap:100px;
margin-top:80px;
}

.showcase-card{
display:grid;
grid-template-columns:1fr 1fr;
gap:70px;
align-items:center;
}

.showcase-card img{
width:100%;
height:500px;
object-fit:cover;
border-radius:30px;
box-shadow:0 15px 40px rgba(0,0,0,.12);
transition:.6s;
}

.showcase-card:hover img{
transform:scale(1.03);
}


/* CONTENT */

.showcase-content h3{
font-size:50px;
font-family:'Playfair Display',serif;
color:#0f3b2f;
margin-bottom:15px;
}

.showcase-content h4{
font-size:20px;
color:#d4b06a;
margin-bottom:25px;
}

.showcase-content p{
line-height:2;
color:gray;
margin-bottom:40px;
}

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

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


/* REVERSE CARD */

.reverse{
display:grid;
grid-template-columns:1fr 1fr;
}


/* =====================================
IMAGE SHADOW EFFECT
===================================== */

.showcase-card img{
box-shadow:
0 20px 50px rgba(0,0,0,.15);
}


/* =====================================
SMALL ANIMATION
===================================== */

.showcase-content{
animation:fadeUp .8s ease;
}

@keyframes fadeUp{

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

to{
opacity:1;
transform:translateY(0);
}

}
/* =====================================
WHY GUESTS LOVE SKYDEN
===================================== */

.guest-love{
padding:120px 8%;
background:white;
}

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

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

.love-card:hover{
transform:translateY(-12px);
}

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

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

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


/* =====================================
SECOND JOURNEY SECTION
===================================== */

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

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

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

.timeline-box h3{
font-size:50px;
font-family:'Playfair Display',serif;
color:#d4b06a;
margin-bottom:20px;
}

.timeline-box p{
line-height:1.8;
color:gray;
}


/* =====================================
CARD EFFECTS
===================================== */

.love-card,
.timeline-box{
transition:.4s;
}

.love-card:hover,
.timeline-box:hover{
box-shadow:0 20px 50px rgba(0,0,0,.12);
}


/* =====================================
SPACING IMPROVEMENTS
===================================== */

.guest-love .section-title,
.journey .section-title{
margin-bottom:70px;
}


/* =====================================
ICONS
===================================== */

.love-icon{
display:flex;
justify-content:center;
align-items:center;
width:90px;
height:90px;
margin:auto;
margin-bottom:25px;
background:#fff;
border-radius:50%;
box-shadow:0 10px 30px rgba(0,0,0,.08);
}

/* =====================================
MEMORIES
===================================== */

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

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

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

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


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

.about-testimonials{
padding:120px 8%;
background:white;
}

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

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

.testimonial-card:hover{
transform:translateY(-10px);
box-shadow:0 20px 50px rgba(0,0,0,.12);
}

.testimonial-card h3{
font-size:30px;
margin-bottom:25px;
}

.testimonial-card p{
line-height:2;
color:gray;
margin-bottom:30px;
}

.testimonial-card h4{
color:#0f3b2f;
font-size:18px;
}


/* =====================================
CARD EFFECTS
===================================== */

.memory-grid img,
.testimonial-card{
transition:.5s;
}


/* =====================================
EXTRA SPACING
===================================== */

.about-testimonials .section-title{
margin-bottom:70px;
}


/* =====================================
SMOOTH APPEARANCE
===================================== */

.testimonial-card{
animation:fadeTestimonials .8s ease;
}

@keyframes fadeTestimonials{

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

to{
opacity:1;
transform:translateY(0);
}

}
/* =====================================
ABOUT CTA
===================================== */

.about-cta{
padding:150px 8%;
text-align:center;

background:
linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),
url("../images/hero-mountain-resort.jpg");

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

.about-cta h1{
font-size:70px;
font-family:'Playfair Display',serif;
color:white;
max-width:900px;
margin:auto;
margin-bottom:30px;
}

.about-cta p{
font-size:20px;
color:#eee;
margin-bottom:50px;
}

.about-cta a{
display:inline-block;
background:#d4b06a;
color:white;
padding:20px 45px;
border-radius:50px;
text-decoration:none;
font-weight:600;
transition:.4s;
}

.about-cta a:hover{
background:white;
color:#0f3b2f;
}


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

.about-box,
.timeline-item,
.timeline-box,
.love-card,
.testimonial-card{
transition:.4s;
}

.about-box:hover,
.timeline-item:hover,
.timeline-box:hover,
.love-card:hover,
.testimonial-card:hover{
transform:translateY(-10px);
}


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

@media(max-width:900px){

/* HERO */

.about-hero{
min-height:auto;
padding:120px 6% 76px;
background-position:center 55%;
}

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

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


/* STORY */

.our-story{
grid-template-columns:1fr;
gap:50px;
padding:84px 5%;
}

.story-image img{
border-radius:24px;
}

.story-content h2{
font-size:34px;
line-height:1.12;
margin-bottom:22px;
}

.story-content p{
font-size:15px;
line-height:1.8;
}


/* PROPERTY SHOWCASE */

.showcase-card{
grid-template-columns:1fr;
gap:40px;
}

.reverse{
display:flex;
flex-direction:column-reverse;
}

.showcase-content h3{
font-size:34px;
line-height:1.12;
}

.showcase-card img{
height:320px;
border-radius:24px;
}


/* GRIDS */

.about-grid,
.timeline,
.love-grid,
.testimonial-grid{
grid-template-columns:1fr;
}


/* MEMORIES */

.memory-grid{
grid-template-columns:1fr;
gap:18px;
}

.about-box,
.timeline-item,
.love-card,
.timeline-box,
.testimonial-card{
padding:32px 24px;
border-radius:24px;
}

.about-box h3,
.love-card h3,
.testimonial-card h3{
font-size:24px;
}


/* CTA */

.about-cta{
padding:110px 6%;
background-position:center 55%;
}

.about-cta h1{
font-size:clamp(40px,9vw,56px);
line-height:1.1;
}

}


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

@media(max-width:600px){

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

.story-content h2{
font-size:30px;
}

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

.about-cta h1{
font-size:32px;
}

.timeline-item h3,
.timeline-box h3{
font-size:34px;
}

.about-section,
.timeline-section,
.about-properties,
.guest-love,
.journey,
.memories,
.about-testimonials{
padding:72px 14px;
}

.about-grid,
.timeline,
.love-grid,
.testimonial-grid,
.memory-grid{
margin-top:34px;
}

.showcase-card img,
.memory-grid img{
height:260px;
border-radius:22px;
}

.story-points div{
font-size:15px;
}

}


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

.showcase-card img,
.memory-grid img{
transition:.6s;
}

.showcase-card img:hover,
.memory-grid img:hover{
transform:scale(1.03);
}