* { margin:0; padding:0; box-sizing:border-box; }

html, body {
  overflow-x: hidden;
}

body {
  font-family:'Montserrat',sans-serif;
  overflow-x:hidden;
  background:#000;
  color:white;
}

.panel {
  position:relative;
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}

h1, h2 {
  font-family:'Playfair Display';
  font-size:60px;
}

/* 3D DEPTH HERO */



.layer-back {
  background:url("https://media.istockphoto.com/id/517188688/photo/mountain-landscape.jpg?s=612x612&w=0&k=20&c=A63koPKaCyIwQWOTFBRWXj_PwCrR4cEoOw2S9Q7yVl8=") center/cover;
  transform:translateZ(-300px) scale(1.4);
}

.layer-mid {
  background:url("https://cdn.pixabay.com/photo/2018/01/14/23/12/nature-3082832_1280.jpg") center/cover;
  transform:translateZ(-150px) scale(1.2);
}

.layer-front {
  background:url("https://img.freepik.com/free-photo/scenic-view-mountains-lake_53876-138187.jpg?semt=ais_rp_progressive&w=740&q=80") center/cover;
  transform:translateZ(0);
}

/* SNAP SECTIONS */

.snap {
  scroll-snap-align:start;
}

body {
  scroll-snap-type:y mandatory;
}

.snap.dark { background:#000; }
.snap.light { background:#fff; color:#111; }

/* HORIZONTAL SECTION */

/* SECTION */

.horizontal-section{

min-height:100vh;
position:relative;
overflow:hidden;
background:#000;

}

/* WRAPPER */

.horizontal-wrapper{

display:flex;
height:100%;

}

/* PANEL */

.horizontal-panel{

min-width:100vw;
height:100%;
position:relative;
overflow:hidden;

}

/* IMAGE */

.horizontal-panel img{

width:100%;
height:100%;
object-fit:cover;
transform:scale(1.1);
transition:transform 1s ease;

}

/* OVERLAY */

.horizontal-panel::after{

content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:linear-gradient(
to top,
rgba(0,0,0,0.75),
rgba(0,0,0,0.2)
);

}

/* TEXT */

.panel-content{

position:absolute;
bottom:80px;
left:80px;
color:white;
max-width:500px;
z-index:2;

}

.panel-content h2{

font-family:"Playfair Display";
font-size:60px;
margin-bottom:10px;

}

.panel-content p{

font-size:20px;
opacity:.85;

}

/* HOVER ZOOM */

.horizontal-panel:hover img{

transform:scale(1.15);

}

.cta {
  background:#000;
}

/* ===== Dynamic Lighting ===== */


/* Initial blur states */

/* HERO */

.hero {
  position: relative;
  min-height:100vh;
  overflow: hidden;
}

.hero-video {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  top: 0;
  left: 0;
  z-index: 1;
  transform: scale(1.1);
}

.lighting-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle at center,
    rgba(255,255,255,0.2),
    rgba(0,0,0,0.6)
  );
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 2;
}

.hero-content {
  margin-bottom: 200px;
  position: relative;
  z-index: 3;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
  color: white;
}

/* SECTION */

.experience-section {
  min-height:100vh;
  display: flex;
  align-items: center;
  padding: 80px 6%;
  background: #111;
  color: white;
}

/* CONTAINER */

.experience-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  width: 100%;
  max-width: 1400px;
  margin: auto;
}

/* LEFT SIDE */

.experience-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* THUMBNAILS */

.thumb-gallery {
  display: flex;
  gap: 10px;
  margin-bottom: 30px;
}

.thumb-gallery img {
  width: 90px;
  height: 70px;
  object-fit: cover;
  border-radius: 10px;
}

/* TITLE */

.experience-title {
  font-family: "Playfair Display";
  font-size: 56px;
  line-height: 1.1;
  margin-bottom: 15px;
}

/* SUB */

.experience-sub {
  font-size: 18px;
  opacity: 0.8;
  margin-bottom: 30px;
}

/* BUTTON */

.experience-btn {
  font-family: 'Montserrat';
  width: 200px;
  padding: 14px;
  border-radius: 10px;
  background: #c7a27a;
  border: none;
  font-weight: 600;
  cursor: pointer;
}

/* RIGHT SIDE */


/* VIDEO */

.experience-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.experience-video-wrapper{
position:relative;
width:100%;
height:100%;
}

/* SOUND BUTTON */

.video-sound-btn{

position:absolute;
bottom:20px;
right:20px;

width:44px;
height:44px;

border-radius:50%;
border:1px solid rgba(255,255,255,0.4);

background:rgba(0,0,0,0.5);
backdrop-filter:blur(6px);

color:white;
font-size:18px;

cursor:pointer;

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

transition:0.3s;

}

.video-sound-btn:hover{

background:white;
color:black;

}

.experience-right {
  height: 900px;
}

/* CAPTION */

.video-caption {
  position: absolute;
  bottom: 30px;
  left: 30px;
  font-size: 16px;
  letter-spacing: 2px;
}

.experience-section{
background:#0a0a0a;
padding:120px 6%;
color:white;
}

.experience-layout{
display:grid;
grid-template-columns:350px 1fr;
gap:40px;
align-items:start;
}

/* LEFT */

.experience-title{
font-family:"Playfair Display";
font-size:56px;
line-height:1.1;
margin-bottom:20px;
}

.experience-desc{
opacity:.7;
margin-bottom:30px;
}

.experience-toggle{
display:flex;
gap:15px;
}

.toggle{
padding:10px 22px;
border-radius:30px;
border:1px solid white;
background:none;
color:white;
cursor:pointer;
}

.toggle.active{
background:white;
color:black;
}

/* CENTER CARDS */

.experience-center{
overflow-x:auto;
}

.plans{
display:none;
gap:25px;
}

.plans.active{
display:flex;
}

.plan-card{
background:#1a1a1a;
border-radius:20px;
overflow:hidden;
width:280px;
flex-shrink:0;
transition:.4s;
}

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

.plan-card h3{
padding:15px 15px 5px;
}

.plan-card p{
padding:0 15px;
font-size:14px;
opacity:.7;
}

.plan-card span{
padding:0 15px 20px;
font-size:12px;
opacity:.5;
display:block;
}

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

/* ACTIVITIES RIGHT */



.activities-section{
margin-top:120px;
text-align:center;
width:100%;
}

.activities-title{
font-size:36px;
margin-bottom:50px;
font-family:"Playfair Display";
}

.activities-slider{
overflow:hidden;
position:relative;
width:100%;
}

.activities-track{
display:flex;
gap:25px;
width:max-content;
animation:scrollActivities 45s linear infinite;
}

.activity-card{
min-width:240px;
border-radius:18px;
overflow:hidden;
position:relative;
transition:0.4s;
}

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

.activity-card span{
position:absolute;
bottom:12px;
left:12px;
background:rgba(0,0,0,0.65);
padding:6px 14px;
border-radius:6px;
font-size:14px;
}

.activities-section{
margin-top:120px;
padding:0 6%;
width:100%;
clear:both;
}

.activity-card:hover{
transform:scale(1.06);
}

@keyframes scrollActivities{
0%{
transform:translateX(0);
}
100%{
transform:translateX(-50%);
}
}

.horizontal-section{

height:100vh;
background:#000;
overflow:hidden;
position:relative;

}

.horizontal-wrapper{

display:flex;
height:100%;

}

/* PANEL */

.horizontal-panel{

min-width:100vw;
height:100%;
position:relative;
overflow:hidden;
display:flex;
align-items:center;
justify-content:flex-start;

}

/* IMAGE LAYER */

.panel-image{

position:absolute;
width:100%;
height:100%;
overflow:hidden;

}

.panel-image img{

width:100%;
height:100%;
object-fit:cover;
transform:scale(1.2);
transition:transform 1s ease;

}

/* OVERLAY */

.horizontal-panel::after{

content:"";
position:absolute;
width:100%;
height:100%;
background:linear-gradient(
to right,
rgba(0,0,0,0.8),
rgba(0,0,0,0.3)
);

}

/* CONTENT */

.panel-content{

position:relative;
z-index:3;
max-width:520px;
margin-left:8%;
color:white;

}

/* TITLE */

.panel-title{

font-family:"Playfair Display";
font-size:64px;
margin-bottom:20px;

}

/* TEXT */

.panel-text{

font-size:20px;
opacity:.85;
margin-bottom:30px;

}

/* GLASS BUTTON */

.panel-btn{

padding:14px 32px;
border-radius:40px;
border:1px solid rgba(255,255,255,0.3);

background:rgba(255,255,255,0.1);
backdrop-filter:blur(10px);

color:white;
font-size:16px;

cursor:pointer;
transition:0.3s;

}

.panel-btn:hover{

background:white;
color:black;

}

.rooms-section{

padding:140px 6%;
background:#0a0a0a;
color:white;

}

/* HEADER */

.rooms-header{

text-align:center;
margin-bottom:80px;

}

.rooms-header h2{

font-family:"Playfair Display";
font-size:52px;
margin-bottom:10px;

}

.rooms-header p{

opacity:.7;

}

/* FEATURED ROOM */

.featured-room{

position:relative;
height:550px;
border-radius:24px;
overflow:hidden;
margin-bottom:80px;

}

.featured-room img{

width:100%;
height:100%;
object-fit:cover;
transform:scale(1.1);
transition:transform 1s ease;

}

.featured-room:hover img{

transform:scale(1.2);

}

/* OVERLAY */

.featured-room::after{

content:"";
position:absolute;
width:100%;
height:100%;
background:linear-gradient(
to right,
rgba(0,0,0,0.85),
rgba(0,0,0,0.3)
);

}

/* CONTENT */

.featured-content{

position:absolute;
left:80px;
bottom:80px;
max-width:420px;
z-index:2;

}

.featured-content h3{

font-size:44px;
margin-bottom:15px;

}

.featured-content p{

opacity:.8;
margin-bottom:20px;

}

/* BUTTON */

.room-btn{

padding:14px 30px;
border-radius:40px;
border:1px solid rgba(255,255,255,0.3);

background:rgba(255,255,255,0.1);
backdrop-filter:blur(10px);

color:white;
cursor:pointer;

}

.room-btn:hover{

background:white;
color:black;

}

/* GRID */

.rooms-grid{

display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;

}

.room-card{

background:#141414;
border-radius:18px;
overflow:hidden;
transition:.4s;

}

.room-card img{

width:100%;
height:220px;
object-fit:cover;

}

.room-card:hover{

transform:translateY(-10px);

}

.room-info{

padding:20px;

}

.room-info h4{

margin-bottom:8px;

}

.room-info p{

opacity:.7;
margin-bottom:15px;

}

.room-info button{

background:none;
border:1px solid white;
border-radius:30px;
padding:8px 18px;
color:white;
cursor:pointer;

}

.gallery-section{

padding:140px 6%;
background:#000;
color:white;

}

/* HEADER */

.gallery-header{

text-align:center;
margin-bottom:80px;

}

.gallery-header h2{

font-family:"Playfair Display";
font-size:52px;
margin-bottom:10px;

}

.gallery-header p{

opacity:.7;

}

/* GRID */

.gallery-grid{

display:grid;
grid-template-columns:repeat(4,1fr);
grid-auto-rows:220px;
gap:20px;

}

/* ITEMS */

.gallery-item{

width:100%;
height:100%;
object-fit:cover;
border-radius:16px;
cursor:pointer;
transition:0.6s;

}

/* HOVER */

.gallery-item:hover{

transform:scale(1.08);

}

/* SIZE VARIATIONS */

.gallery-item.large{

grid-column:span 2;
grid-row:span 2;

}

.gallery-item.tall{

grid-row:span 2;

}

.lightbox{

position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.95);
display:none;
align-items:center;
justify-content:center;
z-index:999;

}

.lightbox img{

max-width:90%;
max-height:90%;

}

.cta-section{

position:relative;
height:80vh;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;

}

/* BACKGROUND */

.cta-bg{

position:absolute;
width:100%;
height:100%;
z-index:1;

}

.cta-bg img{

width:100%;
height:100%;
object-fit:cover;
transform:scale(1.1);

}

/* OVERLAY */

.cta-overlay{

position:absolute;
width:100%;
height:100%;

background:linear-gradient(
to top,
rgba(0,0,0,0.9),
rgba(0,0,0,0.5)
);

z-index:2;

}

/* CONTENT */

.cta-content{

position:relative;
z-index:3;
text-align:center;
max-width:700px;
color:white;

}

.cta-title{

font-family:"Playfair Display";
font-size:64px;
margin-bottom:20px;

}

.cta-text{

font-size:20px;
opacity:.85;
margin-bottom:40px;

}

/* BUTTONS */

.cta-buttons{

display:flex;
gap:20px;
justify-content:center;

}

/* PRIMARY */

.cta-primary{

padding:16px 36px;
border-radius:40px;
background:white;
color:black;
font-weight:600;
text-decoration:none;

}

/* GLASS BUTTON */

.cta-secondary{

padding:16px 36px;
border-radius:40px;
border:1px solid rgba(255,255,255,0.3);

background:rgba(255,255,255,0.1);
backdrop-filter:blur(10px);

color:white;
text-decoration:none;

}

/* HOVER */

.cta-primary:hover{

transform:scale(1.05);

}

.cta-secondary:hover{

background:white;
color:black;

}

.location-section{

padding:140px 6%;
background:#111;
color:white;

}

/* CONTAINER */

.location-container{

display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:center;

}

/* MAP */

.location-map{

border-radius:20px;
overflow:hidden;
height:420px;

}

.location-map iframe{

width:100%;
height:100%;
border:0;

}

/* INFO */

.location-title{

font-family:"Playfair Display";
font-size:52px;
margin-bottom:20px;

}

.location-text{

opacity:.8;
margin-bottom:40px;
line-height:1.6;

}

/* DETAILS */

.location-details{

display:flex;
gap:40px;
margin-bottom:40px;

}

.detail{

display:flex;
flex-direction:column;

}

.detail strong{

margin-bottom:5px;

}

.detail span{

opacity:.7;

}

/* BUTTON */

.location-btn{

padding:14px 30px;
border-radius:40px;
background:white;
color:black;
text-decoration:none;
font-weight:600;

}

.location-btn:hover{

transform:scale(1.05);

}

.footer{

background:#000;
color:white;
padding:100px 6% 40px;

}

/* GRID */

.footer-container{

display:grid;
grid-template-columns:2fr 1fr 1fr 1.5fr;
gap:50px;
margin-bottom:60px;

}

/* BRAND */

.footer-logo{

font-family:"Playfair Display";
font-size:28px;
margin-bottom:15px;

}

.footer-desc{

opacity:.7;
margin-bottom:20px;
line-height:1.6;

}

/* SOCIAL */

.footer-social{

display:flex;
gap:15px;

}

.footer-social a{

color:white;
opacity:.7;
text-decoration:none;

}

.footer-social a:hover{

opacity:1;

}

/* LINKS */

.footer-links a{

display:block;
margin-bottom:10px;
color:white;
opacity:.7;
text-decoration:none;

}

.footer-links a:hover{

opacity:1;

}

/* CONTACT */

.footer-contact p{

opacity:.7;
margin-bottom:10px;

}

/* BOOK BUTTON */

.footer-btn{

display:inline-block;
margin-top:15px;
padding:12px 28px;
border-radius:40px;
background:white;
color:black;
text-decoration:none;
font-weight:600;

}

.footer-btn:hover{

transform:scale(1.05);

}

/* BOTTOM */

.footer-bottom{

border-top:1px solid rgba(255,255,255,.1);
padding-top:25px;
text-align:center;
opacity:.6;

}

/* PAGE LOADER */

.page-loader{

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

background:#000;
display:flex;
align-items:center;
justify-content:center;

z-index:9999;

}

/* CONTENT */

.loader-content{

text-align:center;

}

/* LOGO */

.loader-logo{

width:450px;
margin-bottom:40px;
opacity:0;

}

/* BAR */

.loader-bar{

width:450px;
height:2px;
background:rgba(255,255,255,.2);
overflow:hidden;

}

.loader-progress{

width:0%;
height:100%;
background:white;

}

/* ============================= */
/* TABLET */
/* ============================= */

@media (max-width: 1024px){

h1, h2{
  font-size:42px;
}

/* EXPERIENCE SECTION */

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

.experience-right{
  height:700px;
}

.experience-video{
  height:700px;
}

/* ROOMS GRID */

.rooms-grid{
  grid-template-columns:repeat(2,1fr);
}

/* LOCATION */

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

/* FOOTER */

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

}

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

@media (max-width: 768px){

h1{
  font-size:36px;
}

h2{
  font-size:32px;
}

/* HERO */

.hero-content img{
  width:140px;
}

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

/* EXPERIENCE */

.experience-section{
  padding:80px 20px;
  margin-bottom: 300px;
}

.experience-title{
  font-size:36px;
}

.thumb-gallery img{
  width:70px;
  height:55px;
}

/* VIDEO */

.experience-right{
  height:320px;
}

/* PLAN CARDS */

.plan-card{
  width:220px;
}

/* ACTIVITIES */

.activity-card{
  min-width:180px;
}

/* ROOMS */

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

.featured-content{
  left:20px;
  bottom:20px;
}

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

/* HORIZONTAL PANEL */

.panel-content{
  margin-left:20px;
}

h2.panel-title{
  max-width: 30px;
  font-size:30px;
}

p.panel-text{
  max-width: 200px;
  font-size:14px;
}

/* GALLERY */

.gallery-grid{
  grid-template-columns:1fr 1fr;
  grid-auto-rows:160px;
}

/* CTA */

.cta-title{
  font-size:36px;
}

.cta-text{
  font-size:16px;
}

.cta-buttons{
  flex-direction:column;
}

/* LOCATION DETAILS */

.location-details{
  flex-direction:column;
  gap:15px;
}

/* FOOTER */

.footer-container{
  grid-template-columns:1fr;
  text-align:center;
}

.footer-social{
  justify-content:center;
}

/* LOADER */

.loader-logo{
  width:220px;
}

.loader-bar{
  width:220px;
}

.video-caption{
  opacity: 0%;
}


}

/* =============================== */
/* MOBILE ACTIVITIES SECTION */
/* =============================== */

.mobile-activities{
display:none;
background:#0a0a0a;
padding:60px 20px;
}

.mobile-activities-title{
font-family:"Playfair Display";
font-size:32px;
margin-bottom:25px;
}

.mobile-activities-scroll{
display:flex;
gap:16px;
overflow-x:auto;
scroll-snap-type:x mandatory;
padding-bottom:10px;
}

.mobile-activities-scroll::-webkit-scrollbar{
display:none;
}

.mobile-activity-card{
min-width:180px;
height:200px;
border-radius:16px;
overflow:hidden;
position:relative;
scroll-snap-align:start;
}

.mobile-activity-card img{
width:100%;
height:100%;
object-fit:cover;
}

.mobile-activity-card span{
position:absolute;
bottom:12px;
left:12px;
background:rgba(0,0,0,0.7);
padding:6px 12px;
border-radius:6px;
font-size:14px;
}

/* SHOW ONLY ON MOBILE */

@media (max-width:768px){

.mobile-activities{
display:block;
}

}


@media (max-width:768px){

.hide-mobile{
  display:none;
}

}