/* ═══════════════════════════════════════════════════════════
   YUOOM — BLUE THEME DESIGN SYSTEM
   Primary: #0057B8 (Yuoom Logo Blue)
   Accent:  #FF6B35 (Orange CTA)
   Dark:    #0A0F1E (Night Navy)
   Fonts: Outfit (body) + Playfair Display (serif headings)
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Playfair+Display:ital,wght@0,600;0,700;1,600&display=swap');

:root {
  --primary:       #0057B8;
  --primary-dark:  #003F8A;
  --primary-light: #E8F1FF;
  --primary-mid:   #1a6dd4;
  --accent:        #FF6B35;
  --accent-dark:   #E55A25;
  --gold:          #F5A623;
  --dark:          #0A0F1E;
  --char:          #1C1C2E;
  --mid:           #4A5568;
  --muted:         #8898AA;
  --border:        #E2E8F0;
  --bg:            #F7F9FC;
  --white:         #FFFFFF;
  --success:       #16a34a;
  --radius:        14px;
  --shadow:        0 4px 20px rgba(0,0,0,.08);
  --shadow-md:     0 8px 32px rgba(0,0,0,.12);
  --shadow-lg:     0 20px 60px rgba(0,0,0,.15);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Outfit', sans-serif;
  font-size: 15px; line-height: 1.7;
  color: var(--dark); background: var(--white);
  overflow-x: hidden; -webkit-font-smoothing: antialiased;
}

/* ── Typography ── */
h1,h2,h3,.serif { font-family: 'Playfair Display', serif; }
h1 { font-size: clamp(28px,5vw,52px); font-weight: 700; line-height: 1.1; }
h2 { font-size: clamp(22px,3.5vw,38px); font-weight: 700; line-height: 1.15; }
h3 { font-size: clamp(18px,2.5vw,24px); font-weight: 600; }
p  { color: var(--mid); line-height: 1.8; }

.sec-label {
  font-size: 11px; font-weight: 700; letter-spacing: 2.5px;
  text-transform: uppercase; color: var(--accent); display: block; margin-bottom: 10px;
}
.sec-title  { color: var(--dark); margin-bottom: 14px; }
.sec-sub    { color: var(--mid); max-width: 540px; font-size: 16px; }

/* ── Sections ── */
.sec    { padding: 80px 0; }
.sec-sm { padding: 50px 0; }
.sec-lg { padding: 110px 0; }
.bg-body { background: var(--bg); }
.bg-dark-hero { background: linear-gradient(135deg,#0A0F1E 0%,#001A4D 100%); }

/* ── Page hero ── */
.yu-hero {
  background: linear-gradient(135deg,#0A0F1E 0%,#001A4D 100%);
  padding: 72px 0 48px; position: relative; overflow: hidden;
}
.yu-hero::before {
  content:''; position:absolute; inset:0;
  background: radial-gradient(circle at 20% 50%,rgba(0,87,184,.35) 0%,transparent 60%);
}
.yu-hero-content { position: relative; z-index: 2; }
.yu-hero-label {
  font-size: 11px; font-weight: 700; color: rgba(255,255,255,.5);
  text-transform: uppercase; letter-spacing: 2.5px; display: block; margin-bottom: 10px;
}
.yu-hero h1 { color: #fff; }
.yu-hero h1 em { font-style: normal; color: var(--gold); }
.yu-hero p  { color: rgba(255,255,255,.72); font-size: 16px; }
.yu-breadcrumb { font-size: 13px; color: rgba(255,255,255,.45); margin-bottom: 14px; }
.yu-breadcrumb a { color: rgba(255,255,255,.55); text-decoration: none; }
.yu-breadcrumb a:hover { color: rgba(255,255,255,.85); }
.yu-breadcrumb span { color: rgba(255,255,255,.3); margin: 0 6px; }

/* ── Buttons ── */
.btn-yu {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 14px;
  border: none; border-radius: 50px; padding: 12px 28px;
  cursor: pointer; text-decoration: none; transition: .22s; white-space: nowrap;
}
.btn-primary-yu  { background: var(--primary); color: #fff; box-shadow: 0 4px 16px rgba(0,87,184,.3); }
.btn-primary-yu:hover  { background: var(--primary-dark); color: #fff; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,87,184,.4); }
.btn-accent-yu   { background: var(--accent); color: #fff; box-shadow: 0 4px 16px rgba(255,107,53,.35); }
.btn-accent-yu:hover   { background: var(--accent-dark); color: #fff; transform: translateY(-2px); }
.btn-outline-yu  { background: transparent; color: var(--primary); border: 1.5px solid var(--primary); }
.btn-outline-yu:hover  { background: var(--primary); color: #fff; }
.btn-ghost-yu    { background: rgba(255,255,255,.1); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.25); color: #fff; }
.btn-ghost-yu:hover    { background: rgba(255,255,255,.2); color: #fff; }
.btn-yu-sm { padding: 8px 20px; font-size: 13px; }
.btn-yu-lg { padding: 15px 36px; font-size: 16px; }
.btn-yu-block { width: 100%; justify-content: center; border-radius: var(--radius); }

/* ── Cards ── */
.yu-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.yu-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: transparent; }
.yu-card-body { padding: 22px 24px; }

/* ── Package cards ── */
.pkg-img-wrap { height: 220px; overflow: hidden; position: relative; }
.pkg-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.yu-card:hover .pkg-img-wrap img { transform: scale(1.06); }
.pkg-badge { position:absolute; top:14px; left:14px; background:rgba(10,15,30,.65); backdrop-filter:blur(6px); color:#fff; font-size:11px; font-weight:600; padding:4px 12px; border-radius:50px; text-transform:uppercase; letter-spacing:.5px; }
.pkg-rating { position:absolute; top:14px; right:14px; background:#fff; font-size:12px; font-weight:700; padding:4px 10px; border-radius:50px; display:flex; align-items:center; gap:4px; }
.pkg-rating i { color: var(--gold); font-size: 10px; }
.pkg-price { font-family:'Playfair Display',serif; font-size:26px; font-weight:700; color:var(--primary); }
.pkg-price-note { font-size:11px; color:var(--muted); }

/* ── Form inputs ── */
.yu-label { display:block; font-size:12px; font-weight:600; color:var(--dark); text-transform:uppercase; letter-spacing:.5px; margin-bottom:6px; }
.yu-input {
  width:100%; border:1.5px solid var(--border); border-radius:10px;
  padding:11px 16px; font-size:14px; font-family:'Outfit',sans-serif;
  background:var(--bg); color:var(--dark); outline:none; transition:.2s;
}
.yu-input:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(0,87,184,.1); background:#fff; }
.yu-input::placeholder { color:var(--muted); }
.yu-select { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238898AA' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:38px; }

/* ── Trust chips ── */
.trust-chip { display:inline-flex; align-items:center; gap:7px; background:var(--bg); border:1px solid var(--border); border-radius:50px; padding:6px 14px; font-size:12px; font-weight:500; color:var(--mid); }
.trust-chip i { color:var(--primary); }

/* ── Status badges ── */
.yu-badge { display:inline-block; padding:3px 10px; border-radius:20px; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.4px; }
.yu-badge-confirmed { background:#D1FAE5; color:#065F46; }
.yu-badge-pending   { background:#FEF3C7; color:#92400E; }
.yu-badge-cancelled { background:#FEE2E2; color:#991B1B; }
.yu-badge-completed { background:#EDE9FE; color:#5B21B6; }
.yu-badge-primary   { background:var(--primary-light); color:var(--primary); }

/* ── WhatsApp float ── */
.wa-float {
  position:fixed; bottom:28px; right:28px; z-index:999;
  width:56px; height:56px; background:#25D366; color:#fff;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:24px; text-decoration:none; transition:.25s;
  box-shadow:0 6px 20px rgba(37,211,102,.45);
  animation:waPulse 2.5s infinite;
}
.wa-float:hover { transform:scale(1.1); color:#fff; }
@keyframes waPulse { 0%,100%{box-shadow:0 6px 20px rgba(37,211,102,.45)} 50%{box-shadow:0 6px 30px rgba(37,211,102,.7),0 0 0 8px rgba(37,211,102,.1)} }

/* ── Stars ── */
.stars { color:var(--gold); letter-spacing:1px; }

/* ── AOS ── */
.aos-yu { opacity:0; transform:translateY(24px); transition:opacity .6s ease,transform .6s ease; }
.aos-yu.visible { opacity:1; transform:translateY(0); }

/* ── Responsive ── */
@media(max-width:991px) { .sec { padding:60px 0; } .yu-hero { padding:60px 0 40px; } }
@media(max-width:767px) { .sec { padding:44px 0; } .yu-hero { padding:50px 0 32px; } }