/* RESET */

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

body{

font-family:'Segoe UI',sans-serif;

background:#f5f5f5;

color:#333;

overflow-x:hidden;
}


/* HERO */

.hero{

position:relative;

height:100vh;

background-image:
linear-gradient(
rgba(0,0,0,0.45),
rgba(0,0,0,0.45)
),
url("images/mountain-hotel.jpg");

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


/* HEADER */

.header{

position:absolute;

top:50px;
left:60px;

color:white;
z-index:10;
}

.header h1{

font-size:80px;

font-weight:300;

letter-spacing:6px;
}

.header p{

font-size:18px;

color:#d4b16a;

letter-spacing:3px;
}


/* CLOCK */

#clock{

position:absolute;

top:50px;
right:60px;

font-size:30px;

font-weight:600;

color:white;

z-index:10;
}


/* FLOATING AREA */

.desktop{

position:relative;

width:100%;

height:100%;
}


/* CARD */

.card{

position:absolute;

width:280px;

padding:30px;

background:
rgba(255,255,255,0.92);

backdrop-filter:blur(10px);

border-radius:20px;

cursor:pointer;

box-shadow:
0 15px 35px rgba(0,0,0,0.25);

transition:0.3s;
}

.card:hover{

transform:
translateY(-10px)
scale(1.03);
}

.card h3{

color:#234032;

margin-bottom:10px;

font-size:18px;
}

.card p{

color:#666;

font-size:15px;
}


/* POSISI CARD */

.about{

top:180px;
left:260px;
}

.rooms{

top:500px;
left:80px;
}

.experiences{

top:220px;
right:180px;
}

.gallery{

top:500px;
right:140px;
}

.contact{

top:350px;
left:43%;
}

.booking{

top:680px;
left:44%;
}

.offer{

top:700px;
right:180px;
}


/* CONTENT SECTION */

.content-section{

padding:120px 10%;

background:white;
}

.content-section:nth-child(even){

background:#f7f7f7;
}

.content-section h2{

font-size:42px;

margin-bottom:30px;

color:#234032;
}

.content-section p{

font-size:18px;

line-height:32px;
}


/* ROOM GRID */

.room-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(280px,1fr));

gap:30px;
}

.room-box{

background:white;

padding:30px;

border-radius:20px;

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

transition:0.3s;
}

.room-box:hover{

transform:
translateY(-10px);
}

.room-box h3{

color:#234032;

margin-bottom:15px;
}

.room-box p{

color:#b38b4d;

font-weight:bold;
}


/* EXPERIENCE */

.content-section ul{

padding-left:25px;
}

.content-section li{

margin-bottom:15px;

font-size:18px;
}


/* GALLERY */

.gallery-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(300px,1fr));

gap:30px;
}

.gallery-item{

text-align:center;
}

.gallery-item img{

width:100%;

height:250px;

object-fit:cover;

border-radius:20px;

transition:0.4s;
}

.gallery-item img:hover{

transform:
scale(1.05);
}

.gallery-item h3{

margin-top:15px;

color:#234032;
}


/* BOOKING */

form{

max-width:700px;

margin:auto;
}

form input,
form select{

width:100%;

padding:15px;

margin-bottom:20px;

border:1px solid #ccc;

border-radius:12px;

font-size:16px;
}

form button{

width:100%;

padding:16px;

border:none;

background:#b38b4d;

color:white;

font-size:18px;

font-weight:bold;

border-radius:12px;

cursor:pointer;

transition:0.3s;
}

form button:hover{

background:#9a773e;
}


/* CONTACT */

#contact p{

margin-bottom:15px;
}


/* OFFER */

#offer{

text-align:center;
}

#offer h3{

color:#b38b4d;

font-size:32px;

margin-bottom:25px;
}


/* FOOTER */

footer{

background:#111;

color:white;

text-align:center;

padding:30px;
}


/* RESPONSIVE */

@media(max-width:900px){

.hero{

height:auto;

padding-bottom:100px;
}

.desktop{

display:flex;

flex-direction:column;

align-items:center;

padding-top:220px;
}

.card{

position:relative;

top:auto !important;
left:auto !important;
right:auto !important;

margin:15px;
}

.header{

position:relative;

left:0;

top:40px;

text-align:center;
}

#clock{

position:relative;

top:50px;
right:auto;

text-align:center;

display:block;
}

.header h1{

font-size:55px;
}

.content-section{

padding:80px 8%;
}

.content-section h2{

font-size:32px;
}
}