:root {
  --accent:#13f2b3;
  --bg1:#07182e;
  --bg2:#164361;
  --glass:#ffffff;
}
body {
  font-family:'Open Sans',sans-serif;
  background:linear-gradient(125deg,var(--bg1),var(--bg2));
  color:#112a39;
  margin:0;
}
.header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:1em 2em;
  background:var(--bg2);
  color:#fff;
}
.logo {
  font-family:'Montserrat',sans-serif;
  font-weight:800;
}
.nav a {
  color:#fff;
  margin-left:1em;
  text-decoration:none;
  font-weight:600;
}
.listing-hero {
  position:relative;
}
.hero-img {
  width:100%;
  display:block;
  border-radius:0 0 32px 32px;
  box-shadow:0 16px 60px rgba(0,0,0,0.3);
}
.listing-info {
  position:absolute;
  bottom:1em;
  left:1em;
  background:rgba(0,0,0,0.5);
  color:#fff;
  padding:1em;
  border-radius:20px;
}
.listing-body {
  display:flex;
  gap:2em;
  max-width:880px;
  margin:2em auto;
  background:var(--glass);
  border-radius:32px;
  box-shadow:0 18px 64px rgba(0,0,0,0.2);
  padding:2em;
}
.amenities {
  flex:2;
}
.amenities h2 {
  font-family:'Montserrat',sans-serif;
  margin-bottom:.5em;
}
.booking {
  flex:1;
  background:var(--glass);
  border-radius:20px;
  box-shadow:0 8px 32px rgba(0,0,0,0.1);
  padding:1em;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.price {
  font-size:1.5rem;
  font-weight:700;
  color:#07182e;
  margin-bottom:1em;
}
.cta {
  background:var(--accent);
  color:#07182e;
  border:none;
  border-radius:30px;
  padding:.8em 1.5em;
  font-weight:800;
  cursor:pointer;
  text-decoration:none;
  text-align:center;
}
@media(max-width:700px){
  .listing-body {
    flex-direction:column;
  }
}