*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:"Inter",sans-serif;
}

body{
background:#f8f6f1;
color:#222;
overflow-x:hidden;
}


/* NAV */

.navbar{
height:80px;
padding:0 30px;

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

background:white;
border-bottom:1px solid #ddd;
}

.logo{
font-family:"Playfair Display",serif;
font-size:28px;
text-decoration:none;
color:#2c3a2f;
letter-spacing:2px;
}

.menu-btn{
background:none;
border:none;
font-size:28px;
cursor:pointer;
}



/* HERO */

.hero{

height:420px;

background:
linear-gradient(
rgba(0,0,0,.35),
rgba(0,0,0,.35)
),

url(images/cas1.JPG);

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

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

text-align:center;
color:white;
padding:20px;
}

.hero-content h1{

font-family:
"Playfair Display",
serif;

font-size:70px;
font-weight:400;

margin:10px 0;
}

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

.small{
letter-spacing:3px;
font-size:12px;
}



/* STEPS */

.steps{

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

padding:40px 0;
}

.step{

width:50px;
height:50px;

border-radius:50%;

background:#ddd;

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

font-weight:bold;
}

.step.active{

background:#2c3a2f;
color:white;

}



/* STEP CONTENT */

.step-content{

display:none;

padding:
30px
20px
80px;

}

.step-content.active{

display:block;

}



/* SEARCH CARD */

.search-card{

max-width:850px;
margin:auto;

background:white;

padding:40px;

border:
1px solid #ddd;

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

}

.search-card h2{

font-family:
"Playfair Display",
serif;

font-size:42px;

margin-bottom:25px;
}


label{

display:block;

margin:
18px 0 8px;

font-size:14px;

}


input,
textarea,
select{

width:100%;

padding:14px;

border:
1px solid #ccc;

font-size:15px;

background:white;

}


textarea{

min-height:120px;

resize:none;

}


.main-btn{

display:inline-block;

padding:
16px 35px;

background:
#2c3a2f;

color:white;

border:none;

cursor:pointer;

margin-top:25px;

text-decoration:none;

font-weight:600;

}



/* ROOMS GUESTS */

#roomsContainer{

display:grid;

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

gap:15px;

margin-top:25px;

}

.room{

background:#f6f6f6;

padding:15px;

}



/* LAYOUT */

.layout{

max-width:1200px;

margin:auto;

display:grid;

grid-template-columns:
1fr 330px;

gap:35px;

}


/* SUMMARY */

.summary-card{

background:white;

padding:25px;

border:
1px solid #ddd;

height:fit-content;

position:sticky;

top:100px;

}

.summary-card h3{

font-family:
"Playfair Display",
serif;

font-size:30px;

margin-bottom:20px;
}

.summary-card p{

margin:
10px 0;

line-height:1.6;
}



/* ROOM CARD */

.room-card{

background:white;

border:
1px solid #ddd;

display:grid;

grid-template-columns:
320px 1fr;

margin-bottom:25px;

overflow:hidden;
}

.room-card img{

width:100%;
height:100%;

object-fit:cover;
}

.room-info{

padding:25px;
}

.room-info h3{

font-family:
"Playfair Display",
serif;

font-size:38px;

font-weight:400;

margin-bottom:15px;
}

.room-info p{

margin:8px 0;
}

.room-price{

font-size:28px;

margin:
20px 0;

font-weight:bold;

color:#2c3a2f;
}


.selected{

border:
2px solid
#2c3a2f;

}



/* EXTRAS */

.extras-card{

background:white;

padding:35px;

border:
1px solid #ddd;
}

.addon{

display:flex;

justify-content:
space-between;

align-items:center;

padding:18px;

border:
1px solid #ddd;

margin-bottom:18px;
}

.addon small{

display:block;

margin-top:5px;

color:#666;
}

.addon input{

width:20px;
height:20px;
}



/* GUEST */

.guest-card{

background:white;

padding:35px;

border:
1px solid #ddd;
}



/* CONFIRM */

.confirmation{

max-width:700px;

margin:auto;

background:white;

padding:60px;

text-align:center;

border:
1px solid #ddd;
}

.confirmation h1{

font-family:
"Playfair Display",
serif;

font-size:48px;

margin-bottom:20px;
}

.confirmation p{

margin-bottom:15px;

line-height:1.7;
}



/* FOOTER */

.footer{

background:
#2c3a2f;

padding:
40px;

text-align:center;

color:white;

}



/* MOBILE */

@media(
max-width:768px
){

.hero{

height:300px;

}

.hero-content h1{

font-size:44px;

}


.layout{

grid-template-columns:
1fr;

}


.summary-card{

position:static;

}


.room-card{

grid-template-columns:
1fr;

}


#roomsContainer{

grid-template-columns:
1fr;

}


.steps{

gap:10px;

}


.step{

width:42px;
height:42px;

}


.search-card,
.guest-card,
.extras-card,
.summary-card,
.confirmation{

padding:25px;

}


.search-card h2,
.room-info h3,
.summary-card h3{

font-size:30px;

}


}

/* NAVBAR */
.navbar {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  background: #f3f3f3;
  position: sticky;
  top: 0;
}

/* MENU FIX */


/* SIDE DROPDOWN MENU */

.menu-overlay {
  position: fixed;
  top: 0;
  left: -100%;
  width: 85%;
  max-width: 360px;
  height: 100vh;
  background: #f5f5f5;
  transition: 0.4s cubic-bezier(.77,0,.18,1);
  z-index: 9999;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.menu-overlay.active {
  left: 0;
}

.menu-content {
  padding: 30px 25px;
}

.menu-close {
  font-size: 28px;
  cursor: pointer;
  margin-bottom: 25px;
  color: #555;
}

.menu-item {
  display: block;
  text-decoration: none;
  color: #555;
  font-size: 20px;
  padding: 14px 0;
  border-bottom: 1px solid #ddd;
}

.menu-item:hover {
  color: #a87442;
}

.menu-footer {
  background: #a87442;
  color: white;
  padding: 20px;
  text-align: center;
  font-weight: bold;
  letter-spacing: 2px;
  text-decoration: none;
}

.menu-btn {
  width: 30px;
  height: 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
}

.menu-btn span {
  height: 3px;
  width: 100%;
  background: #555;
  border-radius: 2px;
  transition: 0.3s;
}

.menu-btn.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.menu-btn.active span:nth-child(2) {
  opacity: 0;
}

.menu-btn.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}