/* Soft Colors, mobile-first */
:root{
  --bg:#fbfbfd;
  --card:#ffffff;
  --muted:#657085;
  --accent1:#6dd3b3;
  --accent2:#7ec8ff;
  --accent-grad: linear-gradient(90deg,var(--accent1),var(--accent2));
  --radius:14px;
  --shadow: 0 6px 18px rgba(45,52,67,0.08);
  --maxw:980px;
  --gap:14px;
  --btn-h:48px;
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;color:#213345;background:var(--bg)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:16px}
.topbar{background:var(--card);box-shadow:var(--shadow);position:sticky;top:0;z-index:30}
.topbar .wrap{display:flex;align-items:center;gap:12px}
.brand{font-weight:700;font-size:18px;padding:12px 0}
.brand .accent{background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.nav{margin-left:auto;display:flex;gap:10px}
.nav a{color:#3b4b59;text-decoration:none;padding:12px;border-radius:10px;font-size:14px}
.nav a:hover{background:rgba(124,200,255,0.12)}
.main{padding:18px 16px}
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;margin-bottom:16px}
.small{padding:12px}
.narrow{max-width:420px;margin:12px auto}
.hero-card{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}
.hero-left{padding:12px}
.hero-right{border-radius:12px;overflow:hidden}
.hero-card h1{margin:0;font-size:24px;line-height:1.1}
.lead{color:var(--muted);margin-top:8px}
.kpis{display:flex;gap:8px;margin:12px 0}
.kpi{background:linear-gradient(180deg,#f8fffb,#ffffff);padding:8px;border-radius:10px;flex:1;text-align:center}
.kpi strong{display:block;font-size:16px}
.btn-primary{display:inline-block;background:var(--accent1);color:#04323a;border:none;padding:12px 16px;border-radius:12px;font-weight:600;cursor:pointer;box-shadow:0 6px 14px rgba(109,211,179,0.18)}
.btn-primary.large{padding:14px 18px;font-size:16px}
.btn-ghost{background:none;border:1px solid #e6eef0;padding:8px 12px;border-radius:10px;color:#213345;text-decoration:none}
.form-card label{font-size:13px;color:var(--muted);margin-top:10px;display:block}
.form-card input[type="text"], .form-card input[type="number"], .form-card input[type="file"], .form-card select{width:100%;padding:10px;border-radius:10px;border:1px solid #e6eef0;margin-top:6px;background:#fbfcfe}
.row{display:flex;gap:8px;margin-top:6px}
.price-row{font-weight:700;margin-top:12px}
.result{margin-top:10px;padding:10px;border-radius:10px;background:#f1fffa;color:#03503c}
.steps{padding-left:18px;color:var(--muted)}
.service-slider{height:180px;border-radius:12px;overflow:hidden}
.service-slider img{width:100%;height:180px;object-fit:cover;display:none}
.slider{height:220px;position:relative;overflow:hidden}
.slider img{width:100%;height:220px;object-fit:cover;position:absolute;left:0;top:0;opacity:0;transition:opacity .6s}
.slider img.active{opacity:1}
.admin-table{width:100%;border-collapse:collapse;margin-top:8px}
.admin-table th, .admin-table td{padding:8px;border:1px solid #eef3f6;font-size:13px}
.admin-head{display:flex;align-items:center;justify-content:space-between}
.thumb{height:44px;border-radius:8px;object-fit:cover}
.muted{color:var(--muted);font-size:13px}
.flash-danger{color:#b00020}
@media(min-width:760px){
  .hero-card{flex-direction:row;align-items:center}
  .hero-left{flex:1}
  .hero-right{flex:1}
}
/* HERO SECTION */
.hero-wrapper{
  display:flex;
  flex-direction:column;
  gap:20px;
  margin-bottom:25px;
}

.hero-left{
  flex:1;
}

.hero-title{
  font-size:26px;
  font-weight:700;
  line-height:1.2;
}

.hero-sub{
  color:#6e7c8a;
  margin-top:8px;
}

.hero-btn{
  display:inline-block;
  margin-top:18px;
  background:#6dd3b3;
  padding:14px 18px;
  border-radius:14px;
  color:#0c3c31;
  text-decoration:none;
  font-weight:600;
  box-shadow:0 6px 14px rgba(109,211,179,0.25);
}

.hero-stats{
  display:flex;
  gap:10px;
  margin-top:16px;
}

.stat-box{
  background:#f0faf7;
  flex:1;
  padding:12px;
  border-radius:12px;
  text-align:center;
  font-size:13px;
}

.stat-box strong{
  display:block;
  font-size:16px;
}

/* HERO SLIDER */
.hero-right{
  border-radius:16px;
  overflow:hidden;
}

.hero-slider img{
  width:100%;
  height:240px;
  object-fit:cover;
  opacity:0;
  position:absolute;
  transition:.5s;
}

.hero-slider img.active{
  opacity:1;
}

/* SERVICE SECTION */
.service-section{ margin-bottom:25px; }
.section-title{
  font-size:22px;
  font-weight:700;
  margin-bottom:14px;
}

.service-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(250px, 1fr));
  gap:12px;
}

.service-card{
  background:#ffffff;
  border-radius:16px;
  box-shadow:0 6px 16px rgba(0,0,0,0.06);
}

.service-card img{
  border-radius:16px 16px 0 0;
  width:100%;
  height:150px;
  object-fit:cover;
}

.service-card h3{
  margin:12px;
  font-size:17px;
}

.service-card p{
  margin:0 12px 14px;
  color:#6c7a89;
}

/* BOOKING */
.booking-container{
  background:#ffffff;
  padding:20px;
  border-radius:18px;
  box-shadow:0 6px 18px rgba(0,0,0,0.08);
  margin-bottom:25px;
}

.step-box{
  margin-bottom:24px;
}

.step-title{
  font-size:18px;
  font-weight:600;
  margin-bottom:10px;
}

.capacity-buttons{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
  gap:10px;
}

.capacity-btn{
  padding:12px;
  background:#f6faff;
  border:1px solid #d8e8f2;
  border-radius:12px;
  text-align:center;
  cursor:pointer;
  transition:.3s;
}

.capacity-btn:hover{
  background:#edfaff;
}

.capacity-btn input{
  display:none;
}

.capacity-btn input:checked + span{
  font-weight:600;
  color:#0877b3;
}

.map-box{
  height:180px;
  border-radius:12px;
  margin-top:6px;
  overflow:hidden;
}

.schedule-grid{
  display:flex;
  gap:12px;
}

.price-box{
  padding:14px;
  background:#eefbfd;
  border-radius:12px;
  font-weight:700;
  text-align:center;
  margin-top:10px;
}

.submit-btn{
  width:100%;
  padding:14px;
  font-size:16px;
  background:#6dd3b3;
  border:none;
  border-radius:14px;
  color:#094b37;
  font-weight:700;
  margin-top:20px;
  cursor:pointer;
}

.result-box{
  margin-top:14px;
  padding:12px;
  border-radius:12px;
  display:none;
  background:#e9fff2;
}

/* WHY CHOOSE US */
.why-section{
  margin-bottom:25px;
}

.why-grid{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.why-card{
  background:#ffffff;
  padding:18px;
  border-radius:16px;
  box-shadow:0 4px 14px rgba(0,0,0,0.06);
}

.why-card h3{
  margin-top:0;
}

@media(min-width:750px){
  .hero-wrapper{
    flex-direction:row;
    align-items:center;
  }

  .why-grid{
    flex-direction:row;
  }
}
/* Improved Contact Details UI */
.input-group{
  position:relative;
  margin-top:14px;
}

.input-group .icon{
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  font-size:18px;
  opacity:0.7;
}

.input-group input{
  width:100%;
  padding:12px 14px 12px 42px;
  border-radius:12px;
  border:1.4px solid #d8e4ef;
  background:#fbfdff;
  font-size:15px;
  transition: border .2s, box-shadow .2s;
}

.input-group input:focus{
  border-color:#7ec8ff;
  box-shadow:0 0 0 3px rgba(126,200,255,0.25);
  outline:none;
}

.map-label{
  display:block;
  font-size:14px;
  color:#455a67;
  margin-top:18px;
  margin-bottom:6px;
}

.map-box{
  height:200px;
  border-radius:14px;
  overflow:hidden;
  border:1px solid #dde7f0;
  margin-bottom:14px;
}

/* BOOKING NEW UI */
.booking-card{
  background:#ffffff;
  border-radius:18px;
  padding:22px;
  box-shadow:0 8px 22px rgba(0,0,0,0.08);
  margin-bottom:18px;
}

.booking-header h2{
  margin:0;
  font-size:22px;
  font-weight:700;
}

.booking-header p{
  margin:6px 0 16px;
  color:#6b7a8d;
}

.booking-step{
  margin-bottom:22px;
}

.booking-step h3{
  font-size:17px;
  margin-bottom:12px;
  color:#1c2933;
}

.capacity-grid{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.cap-option{
  flex:1 1 calc(50% - 10px);
  background:#f7fcff;
  padding:12px;
  border-radius:12px;
  border:1.4px solid #d9e9f5;
  text-align:center;
  cursor:pointer;
  transition:.3s;
}

.cap-option input{
  display:none;
}

.cap-option span{
  font-size:14px;
  font-weight:500;
}

.cap-option:hover{
  border-color:#7ec8ff;
  background:#f0faff;
}

.cap-option input:checked + span{
  color:#0a65b5;
  font-weight:600;
}

.custom-litres{
  margin-top:12px;
}

.custom-litres input{
  padding:10px;
  border-radius:10px;
  width:100%;
  border:1px solid #dce6ef;
}

.booking-map{
  height:180px;
  border-radius:12px;
  margin-top:6px;
  margin-bottom:10px;
  overflow:hidden;
}

.two-grid{
  display:flex;
  gap:10px;
}

.price-box{
  background:#eefbfd;
  padding:14px;
  border-radius:12px;
  margin-top:12px;
  font-weight:600;
  color:#0d607e;
  text-align:center;
}

.btn-book{
  width:100%;
  background:#6dd3b3;
  color:#094b37;
  padding:14px;
  border:none;
  border-radius:14px;
  font-size:16px;
  font-weight:700;
  margin-top:18px;
  cursor:pointer;
  box-shadow:0 6px 14px rgba(109,211,179,0.25);
}

.btn-book:hover{
  background:#5acaa8;
}

.booking-result{
  margin-top:14px;
  padding:12px;
  border-radius:12px;
  display:none;
  background:#e6fff2;
  color:#055a32;
}