/* RESET */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:Arial, sans-serif;
}

body{
  background:#f8f8f8;
  color:#222;
  line-height:1.6;
}

/* NAVBAR */
.navbar{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:90px;
  background:white;
  z-index:1000;
}

/* HERO SECTION */
.hero{
  margin-top:90px;

  height:calc(90vh - 90px);

  background:url('images/twin-lakes.jpg') center center/cover no-repeat;

  position:relative;
}

/* DARK OVERLAY */
.overlay{
  background:rgba(0,0,0,0.5);

  width:100%;
  height:100%;

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

  color:white;
  text-align:center;

  padding:20px;
}

/* HERO TEXT */
.overlay h1{
  font-size:60px;
  margin-bottom:15px;
}

.overlay p{
  font-size:24px;
  margin-bottom:25px;
}

/* BUTTON */
.btn{
  background:#d4a017;
  color:white;

  padding:14px 30px;

  text-decoration:none;

  border-radius:5px;

  font-weight:bold;

  transition:0.3s;
}

.btn:hover{
  background:#b8860b;
}

/* GENERAL CONTAINER */
.container{
  width:90%;
  max-width:1200px;

  margin:auto;

  padding:70px 0;
}

.container h2{
  margin-bottom:25px;
  color:#0d3b2e;
  font-size:36px;
}

/* DETAILS CARDS */
.details{
  display:grid;

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

  gap:20px;
}

.card{
  background:white;

  padding:30px;

  border-radius:12px;

  text-align:center;

  box-shadow:0 2px 10px rgba(0,0,0,0.1);
}

.card h3{
  margin-bottom:10px;
  color:#0d3b2e;
}

/* ITINERARY */
.itinerary .item{
  background:white;

  padding:25px;

  margin-bottom:20px;

  border-left:5px solid #d4a017;

  border-radius:8px;

  box-shadow:0 2px 8px rgba(0,0,0,0.05);
}

.itinerary .item h3{
  margin-bottom:10px;
  color:#0d3b2e;
}

/* INCLUDES */
.includes{
  list-style:none;
}

.includes li{
  background:white;

  margin-bottom:12px;

  padding:18px;

  border-radius:8px;

  box-shadow:0 2px 8px rgba(0,0,0,0.05);
}

/* BOOKING SECTION */
.booking{
  background:#0d3b2e;

  color:white;

  text-align:center;

  padding:80px 20px;
}

.booking h2{
  margin-bottom:20px;
}

.booking p{
  margin-bottom:15px;
  font-size:18px;
}

/* DATE BADGE */
.date-badge{
  position:absolute;

  top:20px;
  left:20px;

  background:#d4a017;
  color:white;

  padding:12px 20px;

  border-radius:10px;

  font-size:16px;
  font-weight:bold;

  box-shadow:0 4px 10px rgba(0,0,0,0.2);
}

/* MOBILE RESPONSIVE */
@media(max-width:768px){

  .hero{
    height:70vh;
  }

  .overlay h1{
    font-size:38px;
  }

  .overlay p{
    font-size:18px;
  }

  .container h2{
    font-size:28px;
  }

  .card{
    padding:20px;
  }

}