*{box-sizing:border-box}
:root{
  --orange:#ff8117;
  --orange-2:#ff9b38;
  --navy:#12395b;
  --text:#fff;
  --dark:#173b57;
}
html{scroll-behavior:smooth}
body{margin:0;font-family:"DM Sans",Arial,sans-serif;color:var(--text);background:#f6f7f8}
button,select{font:inherit}
button{cursor:pointer}
.site-header{
  position:absolute;z-index:20;top:0;left:0;right:0;height:94px;
  display:flex;align-items:center;gap:34px;padding:0 clamp(24px,10vw,180px);
}
.logo{display:flex;align-items:center;gap:7px;color:#fff;text-decoration:none;font-size:38px;font-weight:800;letter-spacing:-2px;white-space:nowrap}
.logo-mark{font-size:42px;color:var(--orange);display:inline-block;transform:rotate(-28deg)}
.main-nav{display:flex;align-items:center;gap:34px;margin-left:auto}
.main-nav a{position:relative;color:#fff;text-decoration:none;font-size:15px;font-weight:600;opacity:.96;padding:37px 0 30px}
.main-nav a.active:after{content:"";position:absolute;left:0;right:0;bottom:18px;height:3px;background:var(--orange);border-radius:10px}
.chevron{font-size:17px;margin-left:3px}
.header-contact{display:flex;align-items:center;gap:20px;margin-left:10px}
.phone{display:grid;line-height:1.1;text-align:right}
.phone strong{font-size:14px}.phone small{font-size:11px;margin-top:4px}
.talk-btn,.primary-btn{
  border:0;background:var(--orange);color:#fff;border-radius:28px;
  font-weight:700;padding:11px 10px 11px 18px;display:flex;align-items:center;gap:14px;
  box-shadow:0 8px 22px rgba(255,129,23,.22)
}
.talk-btn span,.primary-btn span{background:#fff;color:#153c5a;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:16px}
.menu-toggle{display:none;background:none;border:0}
.menu-toggle span{display:block;width:26px;height:2px;background:#fff;margin:5px}

.hero{
  min-height:850px;position:relative;overflow:hidden;
  background-image:url("assets/hero-bg.jpg");
  background-size:cover;background-position:center;
  padding-top:1px;
}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,52,78,.28),rgba(8,51,77,.12) 50%,rgba(4,44,67,.24)),linear-gradient(180deg,rgba(11,59,87,.12),rgba(3,39,58,.16))}

.welcome{font-family:Pacifico,cursive;color:#ffb25e;font-size:34px;margin-bottom:14px}
h1{font-size:64px;line-height:.99;letter-spacing:-2px;margin:0 0 24px;font-weight:800}
.hero-content p{font-size:17px;line-height:1.55;margin:0 0 28px;text-shadow:0 2px 5px rgba(0,0,0,.35)}
.primary-btn{text-decoration:none;width:max-content;padding-left:21px}

.photo-pill{
  display:inline-block;vertical-align:middle;width:160px;height:61px;border:5px solid #fff;
  border-radius:40px;overflow:hidden;position:relative;top:-4px;background:linear-gradient(135deg,#d9a06c,#6e8d87)
}
.photo-pill span{display:block;width:100%;height:100%;background:linear-gradient(90deg,rgba(255,255,255,.15),rgba(0,0,0,.15))}

.tour-search{
  position:absolute;z-index:5;right:clamp(24px,13.5vw,245px);top:332px;width:550px;
  background:rgba(255,255,255,.96);color:#233c50;padding:23px 25px 22px;border-radius:19px;
  box-shadow:0 18px 50px rgba(0,0,0,.22)
}
.tour-search h2{font-size:21px;margin:0 0 20px;font-weight:700}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.select-field{height:49px;background:#faf8f6;border-radius:10px;display:flex;align-items:center;padding:0 14px;gap:10px}
.field-icon{color:var(--orange);font-size:19px}
.select-field select{border:0;outline:0;background:transparent;color:#42515d;width:100%;font-size:14px;appearance:auto}
.search-btn{width:100%;height:47px;border:0;border-radius:28px;background:var(--orange);color:#fff;font-weight:700;margin-top:14px;position:relative}
.search-btn span{position:absolute;right:6px;top:5px;width:37px;height:37px;background:#fff;color:#25465d;border-radius:50%;display:grid;place-items:center;font-size:21px}
.search-message{font-size:12px;color:#52616d;text-align:center;height:0;overflow:hidden;transition:.2s}
.search-message.show{height:20px;padding-top:5px}

.destination-tabs{
  position:relative;z-index:5;
  display:grid;grid-template-columns:repeat(6,1fr);gap:13px
}
.destination{margin-bottom: 30px;
  min-height:84px;border:1px solid rgba(255,255,255,.24);border-radius:42px;
  background:rgba(39,65,76,.48);backdrop-filter:blur(9px);color:#fff;
  display:flex;align-items:center;justify-content:center;gap:15px;padding:12px 14px;
  transition:.2s
}
.destination:hover,.destination.active{background:rgba(34,60,71,.72);transform:translateY(-2px)}
.destination.active{border-bottom:3px solid var(--orange)}
.dest-icon{font-size:27px;line-height:1}
.destination b,.destination small{display:block;text-align:left}
.destination b{font-size:14px}.destination small{font-size:13px;margin-top:4px}

.stats{
  position:relative;z-index:6;margin-bottom: 30px;
  height:96px;border-radius:17px;background:rgba(255,255,255,.96);color:#283d4c;
  display:grid;grid-template-columns:repeat(4,1fr);align-items:center;box-shadow:0 10px 35px rgba(0,0,0,.15)
}
.stat{display:flex;align-items:center;justify-content:center;gap:20px;border-right:1px solid #e6e8e9}
.stat:last-child{border-right:0}
.stat-icon{font-size:35px;color:var(--orange)}
.stat strong,.stat small{display:block}.stat strong{font-size:24px}.stat small{font-size:13px;color:#71808a;margin-top:3px}

.dummy-section{min-height:300px;padding:90px 20px;text-align:center;color:#173b57;background:#fff}
.dummy-section h2{font-size:36px;margin:0 0 10px}.dummy-section p{color:#687985}

@media(max-width:1200px){
  .site-header{padding:0 35px}.main-nav{gap:20px}.header-contact{gap:10px}
  .hero-content{margin-left:8vw}.tour-search{right:7vw}.destination-tabs,.stats{left:7vw;right:7vw}
}
@media(max-width:900px){
  .site-header{height:76px}
  .main-nav{display:none;position:absolute;top:70px;left:20px;right:20px;background:rgba(10,44,65,.96);border-radius:14px;padding:10px 20px;flex-direction:column;gap:0}
  .main-nav.open{display:flex}.main-nav a{padding:14px 0;width:100%}
  .main-nav a.active:after{bottom:5px}
  .header-contact{margin-left:auto}.phone{display:none}.menu-toggle{display:block}
  .logo{font-size:30px}.logo-mark{font-size:34px}
  .hero{min-height:1040px}
  .hero-content{padding-top:145px;margin:0 24px}
  .welcome{font-size:26px}h1{font-size:48px}.photo-pill{width:120px;height:48px}
  .tour-search{top:470px;left:24px;right:24px;width:auto}
  .destination-tabs{top:760px;grid-template-columns:repeat(3,1fr);left:24px;right:24px}
  .stats{bottom:14px;left:24px;right:24px;height:88px}
  .stat{gap:9px}.stat-icon{font-size:25px}.stat strong{font-size:19px}.stat small{font-size:10px}
}
@media(max-width:600px){
  .talk-btn{display:none}.hero{min-height:1230px}
  .hero-content{padding-top:125px}.welcome{font-size:22px}h1{font-size:41px;letter-spacing:-1px}.photo-pill{width:92px;height:39px;border-width:3px}
  .hero-content p{font-size:15px}
  .tour-search{top:415px;padding:19px}.fields{grid-template-columns:1fr}
  .destination-tabs{top:785px;grid-template-columns:repeat(2,1fr);gap:9px}
  .destination{min-height:74px;gap:8px;border-radius:28px}.dest-icon{font-size:22px}.destination b{font-size:12px}.destination small{font-size:11px}
  .stats{left:14px;right:14px;bottom:10px;grid-template-columns:repeat(2,1fr);height:132px}
  .stat{border-right:0}.stat:nth-child(-n+2){border-bottom:1px solid #e6e8e9}
}