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

html{
  scroll-behavior:smooth;
}

body{
  font-family:'Poppins',sans-serif;
  background:#2a160c;
  overflow-x:hidden;
  color:#fff;
}

/* ================================================= */
/* HERO */
/* ================================================= */

.hero{
  position:relative;
  width:100%;
  min-height:100vh;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.hero-bg{
  position:absolute;
  inset:0;
  background:url('/images/htl.jpg') center/cover no-repeat;
  z-index:0;
}

.hero-bg::after{
  content:'';
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      to bottom,
      rgba(0,0,0,.35),
      rgba(0,0,0,.18),
      rgba(0,0,0,.62)
    );
}

/* ================================================= */
/* NAVBAR */
/* ================================================= */

.navbar{
  position:relative;
  z-index:20;
  margin-top:20px;
  width:min(1850px,calc(100% - 40px));
  height:72px;
  padding:0 22px;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(20px);
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.navbar-left{
  display:flex;
  align-items:center;
  min-width:140px;
}

.navbar-right{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:140px;
  justify-content:flex-end;
}

.nav-username{
  font-size:14px;
  font-weight:500;
  color:rgba(255,255,255,0.85);
  white-space:nowrap;
  max-width:130px;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* NAV LINKS */

.nav-links{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:30px;
  height:100%;
}

.nav-btn{
  border:none;
  background:transparent;
  color:#fff;
  text-decoration:none;
  font-family:'Poppins',sans-serif;
  font-size:15px;
  font-weight:600;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:.3s;
}

.nav-link{
  position:relative;
  height:100%;
}

.nav-link::after{
  content:'';
  position:absolute;
  left:50%;
  bottom:16px;
  transform:translateX(-50%);
  width:0;
  height:2px;
  background:#fff;
  transition:.3s;
}

.nav-link:hover::after{
  width:100%;
}

/* LOGIN BUTTON */

.btn-login{
  width:100px;
  height:46px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
}

/* BOOK BUTTON */

.btn-book{
  width:140px;
  height:46px;
  border-radius:999px;
  background:#d1a060;
  color:#fff;
  box-shadow:0 10px 25px rgba(0,0,0,.16);
}

.btn-book:hover{
  transform:translateY(-2px);
}

/* ================================================= */
/* HERO CONTENT */
/* ================================================= */

.hero-content{
  position:relative;
  z-index:5;
  margin-top:auto;
  margin-bottom:130px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.hero-subtitle{
  font-size:14px;
  letter-spacing:.38em;
  text-transform:uppercase;
  color:rgba(255,255,255,.72);
  margin-bottom:20px;
}

.hero-title{
  font-family:'Sedan SC',serif;
  font-weight:400;
  font-size:clamp(82px,11vw,185px);
  line-height:1;
  letter-spacing:.14em;
  color:#fff;
  margin-bottom:24px;
  text-shadow:0 10px 30px rgba(0,0,0,.35);
}

.hero-desc{
  width:min(650px,90%);
  font-size:15px;
  line-height:2;
  color:rgba(255,255,255,.82);
  margin-bottom:36px;
}

/* BUTTONS */

.hero-buttons{
  display:flex;
  gap:18px;
}

.hero-btn{
  height:54px;
  padding:0 36px;
  border:none;
  border-radius:999px;
  font-family:'Poppins',sans-serif;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  transition:.3s;
}

.hero-btn:hover{
  transform:translateY(-3px);
}

.hero-btn-primary{
  background:#d1a060;
  color:#fff;
}

.hero-btn-secondary{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.15);
  color:#fff;
}

/* ================================================= */
/* ABOUT */
/* ================================================= */

.about{
  background:#3b2010;
  padding:120px 90px;
}

.about-title{
  font-family:'Italiana',serif;
  font-size:4rem;
  color:#ecd6b8;
  text-align:center;
  margin-bottom:70px;
}

.about-inner{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:100px;
  align-items:center;
  max-width:1400px;
  margin:auto;
}

.about-text p{
  font-size:15px;
  line-height:2.1;
  color:rgba(255,240,220,.75);
  margin-bottom:22px;
}

.hl{
  color:#e2b06d;
  font-weight:600;
}

.about-credit{
  margin-top:40px;
  font-size:11px;
  letter-spacing:.08em;
  color:rgba(255,255,255,.35);
}

/* ================================================= */
/* CITY */
/* ================================================= */

.city-map{
  position:relative;
}

.city-line{
  position:absolute;
  left:4px;
  top:10px;
  bottom:10px;
  width:1px;
  background:rgba(255,255,255,.12);
}

.city-dot-line{
  display:flex;
  align-items:center;
  gap:18px;
  margin-bottom:42px;
}

.city-dot{
  width:12px;
  height:12px;
  border-radius:50%;
  background:#d6a364;
  box-shadow:0 0 20px rgba(214,163,100,.5);
}

.city-name{
  min-width:90px;
  font-size:15px;
  font-weight:600;
  color:#fff;
}

.city-photo{
  width:150px;
  height:90px;
  object-fit:cover;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.15);
  margin-left:auto;
  transition:.4s;
}

.city-photo:hover{
  transform:scale(1.05);
}

/* ================================================= */
/* RECOMMEND */
/* ================================================= */

.recommend{
  position:relative;
  background:linear-gradient(to bottom,#b88d5b,#8d6036);
  padding:120px 70px;
}

.recommend-label{
  text-align:center;
  font-size:4rem;
  font-weight:600;
  color:#fff;
  margin-bottom:60px;
}

.recommend-hero-img{
  width:min(1450px,100%);
  height:520px;
  margin:auto;
  margin-bottom:55px;
  border-radius:34px;
  overflow:hidden;
  background:url('/images/olin.jpg') center/cover no-repeat;
  position:relative;
  box-shadow:0 30px 70px rgba(0,0,0,.24);
}

.recommend-hero-img::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.45),rgba(0,0,0,.08));
}

/* CARDS */

.thumb-cards{
  width:min(1450px,100%);
  margin:auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
}

.thumb-card{
  overflow:hidden;
  border-radius:26px;
  background:rgba(255,255,255,.10);
  backdrop-filter:blur(14px);
  transition:.35s;
  box-shadow:0 12px 30px rgba(0,0,0,.14);
}

.thumb-card:hover{
  transform:translateY(-10px);
}

.thumb-card-img{
  width:100%;
  height:280px;
  object-fit:cover;
}

.thumb-card-body{
  padding:26px;
}

.thumb-card-name{
  font-size:21px;
  font-weight:600;
  color:#fff;
  margin-bottom:12px;
}

.thumb-card-desc{
  font-size:14px;
  line-height:1.9;
  color:rgba(255,255,255,.78);
}

/* ================================================= */
/* FOOTER */
/* ================================================= */

.footer{
  height:84px;
  background:#2d170b;
  padding:0 60px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-top:1px solid rgba(255,255,255,.05);
}

.footer-logo{
  font-size:1rem;
  font-weight:600;
  letter-spacing:.2em;
  color:#d6a364;
}

.footer-copy{
  font-size:12px;
  color:rgba(255,255,255,.42);
}

/* ================================================= */
/* LOGIN POPUP */
/* ================================================= */

.login-popup{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  backdrop-filter:blur(6px);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:999;
  opacity:0;
  visibility:hidden;
  transition:.3s;
}

.login-popup.active{
  opacity:1;
  visibility:visible;
}

.login-popup-box{
  width:420px;
  background:#fff;
  border-radius:28px;
  padding:38px;
  text-align:center;
  transform:translateY(20px);
  transition:.3s;
}

.login-popup.active .login-popup-box{
  transform:translateY(0);
}

.popup-title{
  font-size:28px;
  font-weight:700;
  color:#2d170b;
  margin-bottom:14px;
}

.popup-desc{
  font-size:15px;
  line-height:1.8;
  color:#6b6b6b;
  margin-bottom:30px;
}

.popup-buttons{
  display:flex;
  gap:14px;
}

.popup-login-btn,
.popup-close-btn{
  flex:1;
  height:52px;
  border:none;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'Poppins',sans-serif;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  text-decoration:none;
  transition:.3s;
}

.popup-login-btn{
  background:#d1a060;
  color:#fff;
}

.popup-close-btn{
  background:#f2f2f2;
  color:#333;
}

.popup-login-btn:hover,
.popup-close-btn:hover{
  transform:translateY(-2px);
}

/* ================================================= */
/* RESPONSIVE */
/* ================================================= */

@media(max-width:1100px){
  .about-inner{
    grid-template-columns:1fr;
  }
  .thumb-cards{
    grid-template-columns:1fr;
  }
  .hero-title{
    font-size:90px;
  }
}

@media(max-width:768px){
  .navbar{
    flex-direction:column;
    height:auto;
    gap:16px;
    padding:20px;
    border-radius:28px;
  }
  .navbar-left,
  .navbar-right{
    min-width:unset;
    justify-content:center;
    width:100%;
  }
  .nav-links{
    flex-wrap:wrap;
    gap:18px;
    height:auto;
  }
  .nav-link::after{
    bottom:0;
  }
  .hero-title{
    font-size:64px;
  }
  .recommend{
    padding:90px 24px;
  }
  .about{
    padding:90px 24px;
  }
  .footer{
    flex-direction:column;
    justify-content:center;
    gap:8px;
    text-align:center;
  }
}