*{
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 */


/* 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);
}
/* FOOTER FIX */

.footer{
  background:#0d3b56;
  color:#cbd5e1;
  padding:60px 20px 30px;
  text-align:left;
}

.footer-container{
  max-width:1200px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:40px;
  align-items:start;
}

.footer-section h3,
.footer-title h3{
  color:#c89b5e;
  font-family:"Playfair Display", serif;
  font-size:16px;
  letter-spacing:2px;
  margin-bottom:10px;
}

.footer-section .line,
.footer-title .line{
  display:block;
  width:40px;
  height:3px;
  background:#c89b5e;
  margin:10px 0 20px;
}

.footer-section p{
  font-size:14px;
  line-height:1.7;
  margin-bottom:10px;
}

.footer-section ul{
  list-style:none;
  padding:0;
}

.footer-section ul li{
  margin-bottom:10px;
  font-size:14px;
  color:#9fb3c8;
}

.footer-section a{
  color:#9fb3c8;
  text-decoration:none;
}

.footer-section a:hover{
  color:white;
}

.footer-title{
  text-align:center;
}

.social-icons{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:18px;
  margin-top:25px;
}

.social-icons a{
  width:54px;
  height:54px;
  border-radius:50%;
  display:flex;
  justify-content:center;
  align-items:center;
  color:white;
  font-size:22px;
  text-decoration:none;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2);
  transition:.35s ease;
}

.social-icons a:hover{
  transform:translateY(-6px);
}

.social-icons a:nth-child(1):hover{
  background:#1877F2;
}

.social-icons a:nth-child(2):hover{
  background:#25D366;
}

.footer-divider{
  max-width:1200px;
  margin:40px auto 25px;
  border-top:1px dashed #7fa1b8;
}

.copyright{
  text-align:center;
  font-size:12px;
  letter-spacing:2px;
}



  

  /* NAVBAR */

.navbar{
    height:80px;
    background:#fff;
    border-bottom:1px solid #e5e5e5;

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

    padding:0 40px;
}

.logo{
    display:flex;
    align-items:center;
}

.logo img{
    height:55px;
    width:auto;
    display:block;
}

.desktop-menu{
    display:flex;
    align-items:center;
    gap:35px;
}

.desktop-menu a{
    text-decoration:none;
    color:#222;
    font-size:14px;
    font-weight:600;
    letter-spacing:1px;
    transition:.3s;
}

.desktop-menu a:hover{
    color:#a87442;
}

.desktop-book{
    display:inline-block;
    background:#a87442;
    color:#fff;
    text-decoration:none;
    padding:14px 28px;
    font-size:13px;
    font-weight:600;
    letter-spacing:1px;
}

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

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

@media (max-width:991px){

    .desktop-menu,
    .desktop-book{
        display:none;
    }

    .menu-btn{
        display:flex;
    }

    .navbar{
        padding:0 20px;
    }

    .logo img{
        height:45px;
    }
}