/* =========================================================
   Heaven On Earth Pokhara Tours - Main Stylesheet
   ========================================================= */
:root{
  --primary: #0e7c66;      /* himalayan green */
  --primary-dark: #0a5c4c;
  --accent: #f5a623;       /* sunrise orange */
  --accent-dark: #d4880f;
  --dark: #1c2b2a;
  --light: #f7f9f8;
  --gray: #6b7a78;
  --white: #ffffff;
  --shadow: 0 10px 30px rgba(14,124,102,0.12);
  --radius: 14px;
  --transition: all .3s ease;
}

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

body{
  font-family:'Poppins', 'Segoe UI', Arial, sans-serif;
  color:var(--dark);
  background:var(--light);
  line-height:1.6;
}

h1,h2,h3,h4{font-family:'Poppins',sans-serif; font-weight:700; line-height:1.25;}
a{text-decoration:none; color:inherit;}
ul{list-style:none;}
img{max-width:100%; display:block;}
.container{width:92%; max-width:1200px; margin:0 auto;}

.btn{
  display:inline-block;
  padding:12px 28px;
  border-radius:50px;
  font-weight:600;
  transition:var(--transition);
  border:none;
  cursor:pointer;
}
.btn-primary{background:var(--accent); color:var(--white);}
.btn-primary:hover{background:var(--accent-dark); transform:translateY(-2px);}
.btn-outline{background:transparent; border:2px solid var(--white); color:var(--white);}
.btn-outline:hover{background:var(--white); color:var(--primary);}
.btn-block{width:100%; text-align:center;}

.section-title{text-align:center; margin-bottom:45px;}
.section-title span{color:var(--accent); font-weight:600; letter-spacing:2px; text-transform:uppercase; font-size:14px;}
.section-title h2{font-size:36px; margin-top:8px; color:var(--primary-dark);}
.section-title p{color:var(--gray); max-width:620px; margin:14px auto 0;}

/* ---------- Top bar ---------- */
.topbar{
  background:var(--primary-dark);
  color:var(--white);
  font-size:13px;
  padding:8px 0;
}
.topbar .container{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px;}
.topbar a{color:var(--white); margin-right:16px;}
.topbar .socials a{margin:0 0 0 12px; font-size:14px;}

/* ---------- Header / Nav ---------- */
header{
  background:var(--white);
  box-shadow:0 2px 12px rgba(0,0,0,0.06);
  position:sticky; top:0; z-index:999;
}
.navbar{display:flex; align-items:center; justify-content:space-between; padding:16px 0;}
.logo{display:flex; align-items:center; gap:10px;}
.logo .icon{
  width:46px; height:46px; border-radius:50%;
  background:linear-gradient(135deg,var(--primary),var(--accent));
  display:flex; align-items:center; justify-content:center;
  color:var(--white); font-size:22px; font-weight:700;
}
.logo h1{font-size:19px; color:var(--primary-dark); line-height:1.1;}
.logo h1 span{display:block; font-size:11px; font-weight:400; color:var(--gray); letter-spacing:1px;}

nav ul{display:flex; gap:30px;}
nav ul li a{font-weight:600; color:var(--dark); position:relative; padding:6px 0;}
nav ul li a:hover, nav ul li a.active{color:var(--primary);}
nav ul li a::after{
  content:''; position:absolute; left:0; bottom:-2px; width:0; height:2px;
  background:var(--accent); transition:var(--transition);
}
nav ul li a:hover::after, nav ul li a.active::after{width:100%;}

.nav-cta{display:flex; align-items:center; gap:14px;}
.nav-toggle{display:none; font-size:26px; background:none; border:none; cursor:pointer; color:var(--primary-dark);}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:88vh;
  display:flex; align-items:center;
  background:linear-gradient(135deg, rgba(10,92,76,.85), rgba(28,43,42,.75)),
    url('../images/hero-himalaya.jpg') center/cover no-repeat;
  color:var(--white);
}
.hero-content{max-width:680px;}
.hero-content span.tag{
  background:rgba(245,166,35,.2); border:1px solid var(--accent);
  padding:6px 16px; border-radius:50px; font-size:13px; letter-spacing:1px;
}
.hero-content h1{font-size:52px; margin:20px 0; }
.hero-content h1 em{color:var(--accent); font-style:normal;}
.hero-content p{font-size:17px; opacity:.92; margin-bottom:30px; max-width:560px;}
.hero-btns{display:flex; gap:16px; flex-wrap:wrap;}
.hero-stats{display:flex; gap:40px; margin-top:50px; flex-wrap:wrap;}
.hero-stats div h3{font-size:32px; color:var(--accent);}
.hero-stats div p{font-size:13px; opacity:.85;}

/* ---------- Quick booking bar ---------- */
.quick-booking{
  background:var(--white);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:26px;
  margin-top:-60px;
  position:relative; z-index:5;
}
.quick-booking form{display:grid; grid-template-columns:repeat(4,1fr) auto; gap:16px; align-items:end;}
.form-group{display:flex; flex-direction:column; gap:6px;}
.form-group label{font-size:12px; font-weight:600; color:var(--primary-dark); text-transform:uppercase; letter-spacing:.5px;}
.form-group select, .form-group input{
  padding:12px 14px; border:1.5px solid #e2e8e6; border-radius:8px; font-size:14px; font-family:inherit;
}
.form-group select:focus, .form-group input:focus{outline:none; border-color:var(--primary);}

/* ---------- Sections generic ---------- */
section{padding:80px 0;}
.bg-light{background:var(--white);}

/* ---------- Why choose us ---------- */
.features-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:26px;}
.feature-card{
  background:var(--white); border-radius:var(--radius); padding:32px 24px;
  text-align:center; box-shadow:var(--shadow); transition:var(--transition);
}
.feature-card:hover{transform:translateY(-8px);}
.feature-card .ico{
  width:64px; height:64px; margin:0 auto 18px; border-radius:50%;
  background:rgba(14,124,102,.1); display:flex; align-items:center; justify-content:center;
  font-size:28px; color:var(--primary);
}
.feature-card h3{font-size:18px; margin-bottom:10px;}
.feature-card p{color:var(--gray); font-size:14px;}

/* ---------- Trek cards ---------- */
.trek-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
.trek-card{
  background:var(--white); border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow); transition:var(--transition);
}
.trek-card:hover{transform:translateY(-6px);}
.trek-img{position:relative; height:210px; overflow:hidden; background:linear-gradient(135deg,var(--primary),var(--primary-dark));}
.trek-img img{width:100%; height:100%; object-fit:cover; transition:.5s;}
.trek-card:hover .trek-img img{transform:scale(1.08);}
.trek-badge{
  position:absolute; top:14px; left:14px; background:var(--accent); color:var(--white);
  font-size:12px; padding:5px 12px; border-radius:50px; font-weight:600;
}
.trek-price{
  position:absolute; bottom:14px; right:14px; background:var(--white); color:var(--primary-dark);
  font-weight:700; padding:6px 14px; border-radius:8px; font-size:14px;
}
.trek-body{padding:22px;}
.trek-body h3{font-size:19px; margin-bottom:10px;}
.trek-meta{display:flex; gap:14px; flex-wrap:wrap; font-size:12.5px; color:var(--gray); margin-bottom:14px;}
.trek-meta span{display:flex; align-items:center; gap:5px;}
.trek-body p.desc{font-size:14px; color:var(--gray); margin-bottom:16px; min-height:44px;}
.trek-footer{display:flex; justify-content:space-between; align-items:center;}
.link-btn{color:var(--primary); font-weight:600; font-size:14px;}
.link-btn:hover{text-decoration:underline;}

.center-btn{text-align:center; margin-top:40px;}

/* ---------- Vehicle cards ---------- */
.vehicle-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
.vehicle-card{background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px; text-align:center;}
.vehicle-card .v-img{height:150px; display:flex; align-items:center; justify-content:center; font-size:60px; color:var(--primary); background:rgba(14,124,102,.08); border-radius:10px; margin-bottom:16px;}
.vehicle-card h3{font-size:18px; margin-bottom:6px;}
.vehicle-card .v-price{color:var(--accent-dark); font-weight:700; margin:10px 0;}
.vehicle-card .v-meta{font-size:13px; color:var(--gray); margin-bottom:14px;}

/* ---------- About / split ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;}
.split img{border-radius:var(--radius); box-shadow:var(--shadow);}
.badge-years{
  position:relative; background:var(--primary); color:var(--white); border-radius:var(--radius);
  padding:24px; margin-top:-70px; margin-left:24px; max-width:220px; box-shadow:var(--shadow);
}
.badge-years h2{font-size:42px; color:var(--accent);}
.badge-years p{font-size:13px;}
.check-list li{display:flex; gap:10px; margin-bottom:12px; align-items:flex-start;}
.check-list li i{color:var(--primary); margin-top:3px;}

/* ---------- Testimonials ---------- */
.testi-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
.testi-card{background:var(--white); border-radius:var(--radius); padding:28px; box-shadow:var(--shadow);}
.testi-card .stars{color:var(--accent); margin-bottom:12px;}
.testi-card p{color:var(--gray); font-size:14px; margin-bottom:18px; font-style:italic;}
.testi-user{display:flex; align-items:center; gap:12px;}
.testi-avatar{width:44px; height:44px; border-radius:50%; background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700;}
.testi-user h4{font-size:14px;}
.testi-user span{font-size:12px; color:var(--gray);}

/* ---------- CTA banner ---------- */
.cta-banner{
  background:linear-gradient(120deg,var(--primary-dark),var(--primary));
  color:var(--white); text-align:center; border-radius:var(--radius);
  padding:60px 30px; margin:0 auto;
}
.cta-banner h2{font-size:32px; margin-bottom:14px;}
.cta-banner p{opacity:.9; margin-bottom:26px;}

/* ---------- Forms (booking pages) ---------- */
.form-card{background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow); padding:36px;}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
.form-grid .full{grid-column:1/-1;}
.form-grid label{display:block; font-size:13px; font-weight:600; margin-bottom:6px; color:var(--primary-dark);}
.form-grid input, .form-grid select, .form-grid textarea{
  width:100%; padding:12px 14px; border:1.5px solid #e2e8e6; border-radius:8px; font-family:inherit; font-size:14px;
}
.form-grid textarea{resize:vertical; min-height:110px;}
.alert{padding:16px 20px; border-radius:10px; margin-bottom:24px; font-size:14px;}
.alert-success{background:#e4f8ef; color:var(--primary-dark); border:1px solid var(--primary);}
.alert-error{background:#fdecea; color:#a0332a; border:1px solid #e8998f;}

/* ---------- Page banner (inner pages) ---------- */
.page-banner{
  background:linear-gradient(120deg, rgba(10,92,76,.9), rgba(28,43,42,.85)), url('../images/banner.jpg') center/cover;
  color:var(--white); padding:90px 0 60px; text-align:center;
}
.page-banner h1{font-size:38px;}
.page-banner .crumb{margin-top:10px; font-size:14px; opacity:.85;}
.page-banner .crumb a{color:var(--accent);}

/* ---------- Trek detail ---------- */
.trek-detail-grid{display:grid; grid-template-columns:2fr 1fr; gap:40px;}
.info-box{background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow); padding:26px; margin-bottom:26px;}
.quick-facts{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.quick-facts div{background:var(--light); padding:14px; border-radius:10px;}
.quick-facts div span{display:block; font-size:12px; color:var(--gray); text-transform:uppercase; letter-spacing:.5px;}
.quick-facts div strong{font-size:15px; color:var(--primary-dark);}
.itinerary-day{border-left:3px solid var(--primary); padding:6px 0 6px 20px; margin-bottom:14px; position:relative;}
.itinerary-day::before{content:''; position:absolute; left:-7px; top:10px; width:11px; height:11px; border-radius:50%; background:var(--accent);}
.sidebar-card{background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow); padding:24px; margin-bottom:24px;}
.sidebar-card h4{margin-bottom:14px; color:var(--primary-dark);}
.price-tag{font-size:30px; color:var(--accent-dark); font-weight:700;}
.price-tag span{font-size:13px; color:var(--gray); font-weight:400;}

/* ---------- Footer ---------- */
footer{background:var(--dark); color:#c9d3d1;}
.footer-top{padding:70px 0 40px;}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1.4fr; gap:40px;}
.footer-grid h4{color:var(--white); margin-bottom:20px; font-size:16px;}
.footer-grid p, .footer-grid li{font-size:14px; margin-bottom:10px; color:#a9b6b3;}
.footer-grid ul li a:hover{color:var(--accent);}
.footer-social{display:flex; gap:12px; margin-top:16px;}
.footer-social a{
  width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:center; transition:var(--transition);
}
.footer-social a:hover{background:var(--accent);}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1); text-align:center; padding:18px 0; font-size:13px;}

/* ---------- Floating contact buttons ---------- */
.float-contact{position:fixed; right:22px; bottom:22px; display:flex; flex-direction:column; gap:12px; z-index:1000;}
.float-contact a{
  width:54px; height:54px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:24px; box-shadow:0 6px 18px rgba(0,0,0,.25); transition:var(--transition);
}
.float-contact a:hover{transform:scale(1.1);}
.wa-btn{background:#25D366;}
.viber-btn{background:#7360f2;}
.call-btn{background:var(--accent);}

/* ---------- Responsive ---------- */
@media(max-width:992px){
  .features-grid, .trek-grid, .vehicle-grid, .testi-grid{grid-template-columns:repeat(2,1fr);}
  .split, .trek-detail-grid{grid-template-columns:1fr;}
  .quick-booking form{grid-template-columns:1fr 1fr;}
  .hero-content h1{font-size:38px;}
}
@media(max-width:768px){
  nav{position:fixed; top:74px; left:0; width:100%; background:var(--white); flex-direction:column; padding:20px; box-shadow:0 8px 20px rgba(0,0,0,.08); display:none;}
  nav.open{display:flex;}
  nav ul{flex-direction:column; gap:16px;}
  .nav-toggle{display:block;}
  .nav-cta .btn-outline{display:none;}
  .features-grid, .trek-grid, .vehicle-grid, .testi-grid{grid-template-columns:1fr;}
  .quick-booking form{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .form-grid{grid-template-columns:1fr;}
}