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

body{

  cursor:url('../images/monstera-cursor.png'), auto;

  font-family:Arial, sans-serif;

  background:#F5E9DC;

  color:#3E2C23;

  min-height:100vh;

  display:flex;

  flex-direction:column;
}

a,
button{

  cursor:url('../images/monstera-cursor.png'), pointer;
}

/* NAVBAR */

nav{

  display:flex;

  justify-content:space-between;

  align-items:center;

  padding:20px 10%;

  background:#3E2C23;

  flex-wrap:wrap;
}

nav h2{

  color:white;

  font-family:Georgia, serif;

  font-size:42px;
}

nav ul{

  display:flex;

  gap:25px;

  list-style:none;

  flex-wrap:wrap;
}

nav a{

  color:white;

  text-decoration:none;

  transition:0.3s;

  font-size:16px;
}

nav a:hover{

  color:#DDB892;
}

/* HERO */

.hero{

  position:relative;

  height:100vh;

  overflow:hidden;

  display:flex;

  justify-content:center;

  align-items:center;

  padding:20px;
}

.hero-video{

  position:absolute;

  top:0;
  left:0;

  width:100%;
  height:100%;

  object-fit:cover;

  z-index:-1;
}

/* OVERLAY */

.overlay{

  background:rgba(0,0,0,0.25);

  backdrop-filter:blur(5px);

  padding:50px;

  border-radius:25px;

  text-align:center;

  color:white;

  width:90%;

  max-width:700px;
}

.overlay h1{

  font-size:70px;

  margin-bottom:20px;

  line-height:1.1;
}

.overlay p{

  font-size:20px;

  margin-bottom:25px;
}

/* BUTTON */

.btn{

  display:inline-block;

  padding:14px 35px;

  background:#DDB892;

  color:#3E2C23;

  text-decoration:none;

  border-radius:50px;

  font-weight:bold;

  transition:0.3s;
}

.btn:hover{

  background:#8B5E3C;

  color:white;

  transform:translateY(-3px);
}

/* ABOUT */

.about{

  padding:100px 10%;

  text-align:center;
}

.about h2{

  font-size:40px;

  margin-bottom:20px;
}

.about p{

  max-width:700px;

  margin:auto;

  line-height:1.8;

  font-size:18px;
}

/* PROMO */

.promo{

  display:flex;

  gap:25px;

  padding:0 10% 100px;

  flex-wrap:wrap;
}

.card{

  flex:1;

  min-width:280px;

  background:white;

  padding:20px;

  border-radius:25px;

  box-shadow:0 5px 20px rgba(0,0,0,0.1);

  transition:0.3s;
}

.card:hover{

  transform:translateY(-10px);
}

.card img{

  width:100%;

  height:220px;

  object-fit:cover;

  border-radius:18px;

  margin-bottom:20px;
}

.card h3{

  margin-bottom:10px;

  font-size:28px;
}

.card p{

  line-height:1.7;
}

/* ROOM */

.room-section{

  padding:100px 10%;

  flex:1;
}

.room-section h1{

  text-align:center;

  margin-bottom:50px;

  font-size:55px;
}

.room-container{

  display:flex;

  gap:25px;

  flex-wrap:wrap;
}

.room-card{

  flex:1;

  min-width:280px;

  background:white;

  border-radius:25px;

  overflow:hidden;

  box-shadow:0 5px 20px rgba(0,0,0,0.1);

  transition:0.3s;
}

.room-card:hover{

  transform:scale(1.03);
}

.room-card img{

  width:100%;

  height:260px;

  object-fit:cover;
}

.room-card h2{

  padding:20px 20px 10px;

  font-size:32px;
}

.room-card p{

  padding:0 20px 25px;

  line-height:1.7;
}

/* FACILITIES */

.facilities-section{

  padding:100px 8%;
}

.facilities-section h1{

  text-align:center;

  font-size:55px;

  margin-bottom:50px;
}

/* GRID */

.facility-grid{

  display:grid;

  grid-template-columns:
  1fr 1fr 1fr;

  gap:25px;
}

/* CARD */

.facility-large,
.facility-large-bottom,
.facility-small{

  position:relative;

  overflow:hidden;

  border-radius:35px;

  background:#ddd;

  cursor:pointer;

  transition:0.4s ease;
}

/* EXPERIENCE */

.facility-large{

  grid-column:1 / 2;

  grid-row:1 / 3;

  min-height:520px;
}

/* RESTAURANT */

.facility-large-bottom{

  grid-column:3 / 4;

  grid-row:3 / 5;

  min-height:420px;
}

/* SMALL CARD */

.facility-small{

  min-height:190px;
}

/* TOP */

.top-small-1{

  grid-column:2 / 3;

  grid-row:1 / 2;
}

.top-small-2{

  grid-column:3 / 4;

  grid-row:1 / 2;
}

.top-small-3{

  grid-column:2 / 3;

  grid-row:2 / 3;
}

.top-small-4{

  grid-column:3 / 4;

  grid-row:2 / 3;
}

/* BOTTOM */

.bottom-small-1{

  grid-column:1 / 2;

  grid-row:3 / 4;
}

.bottom-small-2{

  grid-column:2 / 3;

  grid-row:3 / 4;
}

.bottom-small-3{

  grid-column:1 / 2;

  grid-row:4 / 5;
}

.bottom-small-4{

  grid-column:2 / 3;

  grid-row:4 / 5;
}

/* IMAGE */

.facility-large video,
.facility-large-bottom video,
.facility-small img{

  width:100%;

  height:100%;

  object-fit:cover;

  display:block;

  transition:0.5s ease;
}

/* OVERLAY */

.facility-large::after,
.facility-large-bottom::after,
.facility-small::after{

  content:"";

  position:absolute;

  inset:0;

  background:
  linear-gradient(
    rgba(0,0,0,0.1),
    rgba(0,0,0,0.45)
  );
}

/* TEXT */

.facility-text{

  position:absolute;

  bottom:300px;

  left:180px;

  color:rgba(240, 249, 71, 0.308);

  z-index:2;

  transition:0.4s ease;
}

.facility-text h2{

  font-size:32px;

  text-shadow:
  0 5px 15px rgba(0,0,0,0.4);
}

/* EXPERIENCE TEXT */

.experience-text h2{

  font-size:32px;
}

/* SMALL TEXT */

.facility-text-small{

  position:absolute;

  bottom:15px;

  left:15px;

  color:white;

  z-index:2;

  transition:0.4s ease;
}

.facility-text-small h3{

  font-size:22px;

  text-shadow:
  0 3px 10px rgba(0,0,0,0.4);
}

/* HOVER EFFECT */

.facility-small:hover,
.facility-large:hover,
.facility-large-bottom:hover{

  transform:translateY(-8px);
}

/* ZOOM EFFECT */

.facility-small:hover img,
.facility-large:hover video,
.facility-large-bottom:hover video{

  transform:scale(1.05);
}

/* TEXT MOVE */

.facility-small:hover .facility-text-small,
.facility-large:hover .facility-text,
.facility-large-bottom:hover .facility-text{

  transform:translateY(-5px);
}

/* FORM */

.form-container,
.booking-container{

  width:90%;

  max-width:500px;

  margin:100px auto;

  background:white;

  padding:45px;

  border-radius:25px;

  box-shadow:0 5px 20px rgba(0,0,0,0.1);
}

.form-container h1,
.booking-container h1{

  margin-bottom:30px;

  text-align:center;

  font-size:38px;
}

form{

  display:flex;

  flex-direction:column;

  gap:18px;
}

input,
textarea,
select{

  padding:14px;

  border-radius:12px;

  border:1px solid #ccc;

  font-size:16px;
}

button{

  padding:14px;

  border:none;

  background:#8B5E3C;

  color:white;

  border-radius:12px;

  transition:0.3s;

  font-size:16px;
}

button:hover{

  background:#6B705C;
}

/* FOOTER */

footer{

  position:relative;

  background:#3E2C23;

  color:white;

  text-align:center;

  padding:40px;

  line-height:2;

  margin-top:auto;

  overflow:hidden;
}

/* LEAF */

.leaf{

  position:absolute;

  width:220px;

  bottom:-40px;

  z-index:2;

  opacity:0.95;

  filter:drop-shadow(
    0 10px 20px rgba(0,0,0,0.3)
  );
}

.leaf-left{

  left:-70px;

  transform:rotate(-15deg);
}

.leaf-right{

  right:-45px;

  bottom:-65px;

  transform:
  scaleX(-1)
  rotate(80deg);
}

/* MUSIC */

.music-btn{

  position:fixed;

  bottom:20px;

  right:20px;

  padding:14px 20px;

  border:none;

  border-radius:50px;

  background:#DDB892;

  color:#3E2C23;

  font-weight:bold;

  box-shadow:0 5px 15px rgba(0,0,0,0.2);

  transition:0.3s;

  z-index:999;
}

.music-btn:hover{

  background:#8B5E3C;

  color:white;

  transform:scale(1.05);
}

/* RESPONSIVE */

@media (max-width:768px){

  nav{

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:18px;

    padding:20px;
  }

  nav h2{

    font-size:38px;
  }

  nav ul{

    justify-content:center;

    gap:15px;
  }

  nav a{

    font-size:15px;
  }

  .overlay{

    padding:30px;
  }

  .overlay h1{

    font-size:42px;

    line-height:1.2;
  }

  .overlay p{

    font-size:16px;
  }

  .promo{

    flex-direction:column;
  }

  .room-container{

    flex-direction:column;
  }

  .facility-grid{

    grid-template-columns:1fr;
  }

  .facility-large,
  .facility-large-bottom,
  .facility-small{

    grid-column:auto;

    grid-row:auto;

    min-height:250px;
  }

  .facility-text h2{

    font-size:32px;
  }

  .experience-text h2{

    font-size:32px;
  }

  .room-section h1,
  .facilities-section h1{

    font-size:42px;
  }

  .about h2{

    font-size:32px;
  }

  .card h3{

    font-size:24px;
  }

  .room-card h2{

    font-size:28px;
  }

  .music-btn{

    padding:12px 16px;

    font-size:14px;
  }

  .leaf{

    width:120px;

    bottom:-20px;
  }

  .leaf-left{

    left:-40px;
  }

  .leaf-right{

    right:-25px;
  }
}