/* ============================================
   SARZAMEEN TRAVEL — Global Design System
   ============================================ */

/* --- Variables --- */
:root {
  --green: #0E5A38;
  --green-d: #0A3D26;
  --gold: #C9A227;
  --gold-d: #A97F1E;
  --gold-l: #E6C766;
  --cream: #FBF8F1;
  --ink: #17251f;
  --muted: #5c6b63;
  --line: #E7E0CE;
}

/* --- Reset --- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Poppins', sans-serif; color: var(--ink); background: var(--cream); line-height: 1.6; }
h1, h2, h3, .serif { font-family: 'Playfair Display', serif; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; }

/* --- Utilities --- */
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
section.pad { padding: 78px 0; }

.btn { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; border-radius: 999px; padding: 13px 26px; font-size: 15px; transition: .2s; cursor: pointer; border: none; font-family: 'Poppins', sans-serif; }
.btn svg { width: 18px; height: 18px; }
.btn.full { width: 100%; justify-content: center; }
.btn-wa { background: #25D366; color: #fff; }
.btn-wa:hover { background: #1eb356; transform: translateY(-1px); }
.btn-gold { background: linear-gradient(180deg, var(--gold-l), var(--gold)); color: var(--green-d); }
.btn-gold:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(201,162,39,.35); }
.btn-ghost { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.6); }
.btn-ghost:hover { background: #fff; color: var(--green); }
.btn-light { background: #fff; color: var(--green); }
.btn-light:hover { background: var(--cream); transform: translateY(-1px); }
.btn-green { background: var(--green); color: #fff; }
.btn-green:hover { background: var(--green-d); transform: translateY(-1px); }
.btn-outline { background: transparent; color: var(--green); border: 1.5px solid var(--green); }
.btn-outline:hover { background: var(--green); color: #fff; }

.eyebrow { display: inline-block; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; font-size: 12px; color: var(--gold-d); margin-bottom: 14px; }
.head { text-align: center; max-width: 660px; margin: 0 auto 46px; }
.head h2 { font-size: 38px; color: var(--green-d); line-height: 1.15; }
.head p { margin-top: 12px; color: var(--muted); font-size: 16px; }

/* --- Top Bar --- */
.topbar { background: var(--green-d); color: #dfeee6; font-size: 13px; }
.topbar .wrap { display: flex; justify-content: space-between; align-items: center; height: 40px; }
.topbar a { color: #dfeee6; }
.topbar a:hover { color: var(--gold-l); }
.topbar .sep { color: var(--gold); margin: 0 10px; }

/* --- Navigation --- */
header.nav { position: sticky; top: 16px; z-index: 50; background: rgba(251,248,241,.96); backdrop-filter: blur(12px); border: 1px solid var(--line); border-radius: 999px; max-width: 1180px; margin: 16px auto; width: calc(100% - 32px); box-shadow: 0 12px 40px rgba(14,90,56,.08); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 115px; padding: 0 36px; }
.brand img { height: 95px; }
.brand { font-family: 'Playfair Display', serif; font-weight: 800; font-size: 22px; color: var(--green-d); display: flex; align-items: center; gap: 10px; }
.brand span { color: var(--gold-d); }
.menu { display: flex; gap: 28px; font-weight: 500; font-size: 15px; }
.dropdown { position: relative; display: flex; align-items: center; }
.dropdown-content { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(10px); background: #fff; min-width: 190px; border-radius: 12px; padding: 8px 0; opacity: 0; visibility: hidden; transition: .2s; border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(14,90,56,.08); z-index: 60; }
.dropdown:hover .dropdown-content { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(4px); }
.dropdown-content a { display: block; padding: 10px 22px !important; font-size: 14px; font-weight: 500; color: var(--ink); position: static !important; border: none !important; }
.dropdown-content a::after { display: none !important; }
.dropdown-content a:hover { background: rgba(14,90,56,.04); color: var(--green); }
.drop-icon { font-size: 10px; margin-left: 5px; opacity: 0.6; display: inline-block; transform: translateY(-1px); }
.menu a { position: relative; padding: 4px 0; }
.menu a.active, .menu a:hover { color: var(--green); }
.menu a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--gold); }
.nav-cta { font-size: 14px !important; padding: 10px 20px !important; }

/* --- Hamburger / Mobile Menu --- */
.hamburger { display: none; background: none; border: none; cursor: pointer; padding: 6px; flex-direction: column; gap: 5px; z-index: 51; }
.hamburger span { display: block; width: 24px; height: 2.5px; background: var(--green-d); border-radius: 2px; transition: .3s; }
.mobile-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.4); z-index: 98; opacity: 0; visibility: hidden; transition: .3s; }
.mobile-overlay.open { opacity: 1; visibility: visible; }
.mobile-menu { position: fixed; top: 0; right: -320px; width: 300px; height: 100vh; background: #fff; z-index: 99; padding: 80px 30px 30px; transition: right .35s ease; box-shadow: -8px 0 30px rgba(0,0,0,.15); overflow-y: auto; }
.mobile-menu.open { right: 0; }
.mobile-menu a { display: block; padding: 14px 0; font-size: 17px; font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--line); }
.mobile-menu a:hover, .mobile-menu a.active { color: var(--green); }
.mobile-menu .btn { margin-top: 20px; width: 100%; justify-content: center; }
.mobile-close { position: absolute; top: 20px; right: 20px; background: none; border: none; font-size: 28px; cursor: pointer; color: var(--ink); line-height: 1; }

/* --- Hero (Home) --- */
.hero { position: relative; background: radial-gradient(120% 120% at 85% 0%, #12724a, var(--green) 45%, var(--green-d)); color: #fff; overflow: hidden; }
.hero::after { content: ""; position: absolute; right: -80px; top: -80px; width: 460px; height: 460px; background: radial-gradient(circle, rgba(201,162,39,.28), transparent 60%); }
.hero .wrap { padding: 84px 24px 92px; position: relative; z-index: 2; max-width: 820px; }
.hero h1 { font-size: 54px; line-height: 1.1; font-weight: 800; }
.hero h1 .g { color: var(--gold-l); }
.hero p.lead { margin-top: 18px; font-size: 19px; color: #e3f0e9; max-width: 600px; }
.hero .actions { margin-top: 30px; display: flex; gap: 14px; flex-wrap: wrap; }
.hero .stats { margin-top: 44px; display: flex; gap: 40px; flex-wrap: wrap; }
.hero .stat b { font-family: 'Playfair Display'; font-size: 32px; color: var(--gold-l); display: block; line-height: 1; }
.hero .stat span { font-size: 13px; color: #cfe2d8; }

/* --- Page Hero (Sub-pages) --- */
.page-hero { position: relative; background: radial-gradient(120% 120% at 85% 0%, #12724a, var(--green) 45%, var(--green-d)); color: #fff; overflow: hidden; text-align: center; padding: 62px 0 68px; }
.page-hero::after { content: ""; position: absolute; right: -80px; top: -80px; width: 360px; height: 360px; background: radial-gradient(circle, rgba(201,162,39,.2), transparent 60%); pointer-events: none; }
.page-hero .wrap { position: relative; z-index: 2; }
.page-hero h1 { font-size: 46px; font-weight: 800; line-height: 1.15; }
.page-hero h1 .g { color: var(--gold-l); }
.page-hero p { color: #d9e8e0; font-size: 17px; max-width: 600px; margin: 14px auto 0; }
.page-hero .actions { margin-top: 24px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.breadcrumb { position: relative; z-index: 2; margin-bottom: 14px; font-size: 14px; color: #bcd3c7; }
.breadcrumb a { color: var(--gold-l); }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb .sep { margin: 0 8px; opacity: .6; }

/* --- Trust Bar --- */
.trust { background: var(--green-d); }
.trust .wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding: 26px 24px; }
.trust .t { display: flex; align-items: center; gap: 12px; color: #eaf3ee; }
.trust .t svg { width: 26px; height: 26px; color: var(--gold-l); flex: 0 0 auto; }
.trust .t b { display: block; font-size: 15px; color: #fff; }
.trust .t span { font-size: 12.5px; color: #bcd3c7; }

/* --- Packages --- */
.pkgs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: start; }
.pkg { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 30px 26px; position: relative; transition: .2s; }
.pkg:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(14,90,56,.12); }
.pkg.feat { border: 2px solid var(--gold); box-shadow: 0 18px 44px rgba(201,162,39,.18); }
.badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--gold); color: var(--green-d); font-size: 12px; font-weight: 700; padding: 5px 16px; border-radius: 999px; white-space: nowrap; }
.pkg h3 { font-size: 24px; color: var(--green-d); }
.pkg-sub { color: var(--muted); font-size: 14px; margin-top: 4px; }
.pkg-price { margin: 18px 0; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pkg-price span { font-size: 12px; color: var(--muted); display: block; text-transform: uppercase; letter-spacing: 1px; }
.pkg-price b { font-family: 'Playfair Display'; font-size: 30px; color: var(--green); }
.pkg-feats { list-style: none; margin: 0 0 22px; }
.pkg-feats li { font-size: 14.5px; color: var(--ink); padding: 6px 0 6px 26px; position: relative; }
.pkg-feats li::before { content: "✓"; position: absolute; left: 0; color: var(--gold-d); font-weight: 800; }

/* --- Duration Band --- */
.durband { display: flex; justify-content: center; gap: 0; flex-wrap: wrap; margin-top: 10px; }
.dur { text-align: center; padding: 0 34px; border-right: 1px solid var(--line); }
.dur:last-child { border-right: none; }
.dur b { font-family: 'Playfair Display'; font-weight: 800; font-size: 48px; color: var(--gold-d); display: block; line-height: 1; }
.dur span { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }

/* --- Services Grid --- */
.svc { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.svc a { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 24px 12px; text-align: center; transition: .2s; }
.svc a:hover { background: var(--green); color: #fff; transform: translateY(-3px); }
.svc .si { color: var(--gold-d); margin-bottom: 10px; }
.svc a:hover .si { color: var(--gold-l); }
.svc .si svg { width: 30px; height: 30px; }
.svc b { font-size: 14px; font-weight: 600; }

/* --- Why Choose Us --- */
.why { background: linear-gradient(180deg, #fff, var(--cream)); }
.whygrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 28px; text-align: center; transition: .2s; }
.card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(14,90,56,.08); }
.card .ci { width: 58px; height: 58px; border-radius: 14px; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; background: rgba(14,90,56,.08); color: var(--green); }
.card .ci svg { width: 28px; height: 28px; }
.card h3 { font-family: 'Poppins'; font-weight: 700; font-size: 17px; margin-bottom: 6px; }
.card p { font-size: 14px; color: var(--muted); }

/* --- Airlines --- */
.airlines { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.airlines .wrap { padding: 32px 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 34px; }
.airlines .lbl { width: 100%; text-align: center; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.al { font-family: 'Playfair Display'; font-weight: 700; font-size: 20px; color: #9aa79f; transition: .2s; }
.al:hover { color: var(--green); }

/* --- Testimonials --- */
.tst { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.review { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 26px; transition: .2s; }
.review:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(14,90,56,.06); }
.review .stars { color: var(--gold); display: flex; gap: 2px; margin-bottom: 12px; }
.review .stars svg { width: 18px; height: 18px; fill: var(--gold); stroke: var(--gold); }
.review p { font-size: 14.5px; color: var(--ink); font-style: italic; }
.review .who { margin-top: 14px; font-weight: 700; color: var(--green-d); font-size: 14px; }

/* --- CTA Band --- */
.ctaband { background: radial-gradient(120% 140% at 15% 0%, #12724a, var(--green-d)); color: #fff; text-align: center; }
.ctaband .wrap { padding: 66px 24px; }
.ctaband h2 { font-size: 36px; }
.ctaband p { color: #d9e8e0; margin-top: 12px; font-size: 17px; }
.ctaband .actions { margin-top: 26px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* --- FAQ --- */
.faq { max-width: 820px; margin: 0 auto; }
.qa { background: #fff; border: 1px solid var(--line); border-radius: 14px; margin-bottom: 14px; overflow: hidden; }
.qa-head { padding: 20px 24px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.qa-head h3 { font-family: 'Poppins'; font-size: 16.5px; font-weight: 700; color: var(--green-d); }
.qa-head .qa-icon { width: 22px; height: 22px; color: var(--gold-d); transition: transform .3s; flex-shrink: 0; margin-left: 14px; }
.qa.open .qa-head .qa-icon { transform: rotate(45deg); }
.qa-body { padding: 0 24px 0; max-height: 0; overflow: hidden; transition: max-height .35s ease, padding .35s ease; }
.qa.open .qa-body { max-height: 300px; padding: 0 24px 20px; }
.qa-body p { font-size: 14.5px; color: var(--muted); }
/* fallback for no-JS */
.qa p { font-size: 14.5px; color: var(--muted); margin-top: 6px; padding: 0 24px 20px; }

/* --- Footer --- */
footer { background: var(--green-d); color: #cfe0d7; padding: 56px 0 26px; }
.fgrid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
.fbrand { font-family: 'Playfair Display'; font-weight: 800; font-size: 26px; color: #fff; }
.fbrand span { color: var(--gold-l); }
footer h4 { color: #fff; font-size: 15px; margin-bottom: 14px; letter-spacing: 1px; }
footer a, footer p { color: #bcd3c7; font-size: 14px; display: block; margin-bottom: 9px; }
footer a:hover { color: var(--gold-l); }
.fbot { border-top: 1px solid rgba(255,255,255,.12); margin-top: 36px; padding-top: 20px; text-align: center; font-size: 13px; color: #9fb8ac; }

/* --- WhatsApp FAB --- */
.fab { position: fixed; right: 22px; bottom: 22px; z-index: 60; background: #25D366; color: #fff; width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 26px rgba(37,211,102,.5); transition: .2s; }
.fab:hover { transform: scale(1.08); box-shadow: 0 12px 32px rgba(37,211,102,.6); }
.fab svg { width: 30px; height: 30px; }

/* ============================================
   EXTENDED STYLES — Sub-pages
   ============================================ */

/* --- Comparison Table --- */
.comparison-wrap { overflow-x: auto; margin-top: 30px; }
.comparison-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); }
.comparison-table th { background: var(--green-d); color: #fff; padding: 16px 20px; font-family: 'Playfair Display'; font-size: 16px; font-weight: 700; text-align: left; }
.comparison-table th.highlight { background: var(--green); position: relative; }
.comparison-table th.highlight::after { content: "★ Popular"; position: absolute; top: -10px; right: 14px; background: var(--gold); color: var(--green-d); font-size: 10px; font-family: 'Poppins'; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.comparison-table td { padding: 14px 20px; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.comparison-table tr:last-child td { border-bottom: none; }
.comparison-table td:first-child { font-weight: 600; color: var(--green-d); background: rgba(14,90,56,.03); }
.comparison-table .check { color: var(--gold-d); font-weight: 800; }
.comparison-table .cross { color: #ccc; }

/* --- Process Steps --- */
.process { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; counter-reset: step; }
.step { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 30px 24px; text-align: center; position: relative; counter-increment: step; transition: .2s; }
.step:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(14,90,56,.08); }
.step::before { content: counter(step); font-family: 'Playfair Display'; font-weight: 800; font-size: 42px; color: rgba(14,90,56,.08); position: absolute; top: 12px; right: 18px; line-height: 1; }
.step .step-icon { width: 52px; height: 52px; border-radius: 50%; background: rgba(14,90,56,.08); color: var(--green); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.step .step-icon svg { width: 24px; height: 24px; }
.step h3 { font-family: 'Poppins'; font-weight: 700; font-size: 16px; margin-bottom: 6px; color: var(--green-d); }
.step p { font-size: 13.5px; color: var(--muted); }

/* --- Form Elements --- */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label { font-weight: 600; font-size: 14px; color: var(--green-d); }
.form-input,
.form-select,
.form-textarea { width: 100%; padding: 14px 18px; border: 1px solid var(--line); border-radius: 12px; font-family: 'Poppins', sans-serif; font-size: 15px; color: var(--ink); background: #fff; transition: border-color .2s, box-shadow .2s; outline: none; }
.form-input:focus,
.form-select:focus,
.form-textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(14,90,56,.1); }
.form-textarea { resize: vertical; min-height: 120px; }
.form-select { cursor: pointer; appearance: auto; }

/* --- Search Form (Flights) --- */
.search-box { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 34px; box-shadow: 0 12px 40px rgba(14,90,56,.08); }
.search-box h3 { font-family: 'Poppins'; font-weight: 700; font-size: 20px; color: var(--green-d); margin-bottom: 20px; }
.search-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr auto; gap: 14px; align-items: end; }
.search-grid .btn { height: 50px; white-space: nowrap; }

/* --- Route Grid (Flights) --- */
.route-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.route-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 26px; transition: .2s; display: flex; align-items: center; gap: 18px; }
.route-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(14,90,56,.08); }
.route-icon { width: 52px; height: 52px; border-radius: 14px; background: rgba(14,90,56,.08); color: var(--green); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.route-icon svg { width: 24px; height: 24px; }
.route-info h3 { font-family: 'Poppins'; font-weight: 700; font-size: 16px; color: var(--green-d); }
.route-info p { font-size: 13.5px; color: var(--muted); margin-top: 2px; }

/* --- Country Grid (Visa) --- */
.country-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.country-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 30px; text-align: center; transition: .2s; }
.country-card:hover { transform: translateY(-4px); box-shadow: 0 14px 36px rgba(14,90,56,.1); }
.country-flag { font-size: 42px; margin-bottom: 12px; }
.country-card h3 { font-family: 'Poppins'; font-weight: 700; font-size: 18px; color: var(--green-d); margin-bottom: 6px; }
.country-card p { font-size: 14px; color: var(--muted); margin-bottom: 16px; }
.country-card .tag { display: inline-block; background: rgba(14,90,56,.08); color: var(--green); font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: 999px; margin: 2px; }

/* --- Document Checklist --- */
.doc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.doc-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 26px; }
.doc-card h3 { font-family: 'Poppins'; font-weight: 700; font-size: 17px; color: var(--green-d); margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
.doc-card h3 svg { width: 22px; height: 22px; color: var(--gold-d); }
.doc-list { list-style: none; }
.doc-list li { font-size: 14.5px; padding: 8px 0 8px 28px; position: relative; color: var(--ink); border-bottom: 1px solid rgba(0,0,0,.04); }
.doc-list li:last-child { border-bottom: none; }
.doc-list li::before { content: "✓"; position: absolute; left: 0; color: var(--gold-d); font-weight: 800; }

/* --- Timeline (Visa) --- */
.timeline { max-width: 700px; margin: 0 auto; position: relative; padding-left: 40px; }
.timeline::before { content: ""; position: absolute; left: 15px; top: 0; bottom: 0; width: 2px; background: var(--line); }
.timeline-item { position: relative; margin-bottom: 30px; }
.timeline-item::before { content: ""; position: absolute; left: -33px; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--gold); border: 3px solid var(--cream); }
.timeline-item h3 { font-family: 'Poppins'; font-weight: 700; font-size: 16px; color: var(--green-d); }
.timeline-item p { font-size: 14px; color: var(--muted); margin-top: 4px; }
.timeline-item .tl-time { font-size: 12px; font-weight: 700; color: var(--gold-d); text-transform: uppercase; letter-spacing: 1px; }

/* --- About Page --- */
.about-content { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
.about-text h2 { font-size: 36px; color: var(--green-d); line-height: 1.15; margin-bottom: 16px; }
.about-text p { color: var(--muted); font-size: 15.5px; margin-bottom: 14px; }
.about-img { border-radius: 20px; overflow: hidden; border: 4px solid var(--line); }
.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.value-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 30px; text-align: center; transition: .2s; }
.value-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(14,90,56,.08); }
.value-card .vi { font-size: 36px; margin-bottom: 12px; }
.value-card h3 { font-family: 'Poppins'; font-weight: 700; font-size: 18px; color: var(--green-d); margin-bottom: 8px; }
.value-card p { font-size: 14px; color: var(--muted); }

/* --- Stats Bar --- */
.stats-bar { background: var(--green-d); }
.stats-bar .wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding: 40px 24px; text-align: center; }
.stat-item b { font-family: 'Playfair Display'; font-size: 40px; color: var(--gold-l); display: block; line-height: 1; }
.stat-item span { font-size: 14px; color: #bcd3c7; margin-top: 4px; display: block; }

/* --- Team --- */
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.team-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 28px; text-align: center; transition: .2s; }
.team-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(14,90,56,.08); }
.team-avatar { width: 80px; height: 80px; border-radius: 50%; background: linear-gradient(135deg, var(--green), var(--green-d)); color: var(--gold-l); font-family: 'Playfair Display'; font-size: 28px; font-weight: 800; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }
.team-card h3 { font-family: 'Poppins'; font-weight: 700; font-size: 16px; color: var(--green-d); }
.team-card p { font-size: 13px; color: var(--muted); }

/* --- Contact Page --- */
.contact-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: start; }
.contact-form-box { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 36px; }
.contact-form-box h3 { font-family: 'Playfair Display'; font-size: 26px; color: var(--green-d); margin-bottom: 8px; }
.contact-form-box > p { font-size: 14.5px; color: var(--muted); margin-bottom: 24px; }
.contact-info-side { display: flex; flex-direction: column; gap: 20px; }
.info-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 24px; display: flex; gap: 16px; align-items: flex-start; }
.info-card .ic-icon { width: 48px; height: 48px; border-radius: 12px; background: rgba(14,90,56,.08); color: var(--green); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.info-card .ic-icon svg { width: 22px; height: 22px; }
.info-card h4 { font-size: 15px; font-weight: 700; color: var(--green-d); margin-bottom: 4px; }
.info-card p, .info-card a { font-size: 14px; color: var(--muted); display: block; margin-bottom: 2px; }
.info-card a:hover { color: var(--green); }
.map-container { border-radius: 16px; overflow: hidden; border: 1px solid var(--line); margin-top: 22px; }
.map-container iframe { width: 100%; height: 300px; border: none; display: block; }

/* --- Include Grid (Umrah) --- */
.include-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.include-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 24px; display: flex; gap: 16px; }
.include-card .inc-icon { width: 48px; height: 48px; border-radius: 12px; background: rgba(14,90,56,.08); color: var(--green); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.include-card .inc-icon svg { width: 24px; height: 24px; }
.include-card h3 { font-family: 'Poppins'; font-weight: 700; font-size: 16px; color: var(--green-d); margin-bottom: 4px; }
.include-card p { font-size: 14px; color: var(--muted); }

/* --- Corporate Section (Flights) --- */
.split-section { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
.split-section .split-text h2 { font-size: 32px; color: var(--green-d); line-height: 1.2; margin-bottom: 14px; }
.split-section .split-text p { font-size: 15px; color: var(--muted); margin-bottom: 14px; }
.split-visual { background: linear-gradient(135deg, var(--green), var(--green-d)); border-radius: 20px; padding: 44px; color: #fff; text-align: center; }
.split-visual h3 { font-family: 'Playfair Display'; font-size: 28px; margin-bottom: 10px; }
.split-visual p { color: #d9e8e0; font-size: 15px; margin-bottom: 20px; }

/* --- Feature List --- */
.feat-list { list-style: none; }
.feat-list li { font-size: 15px; padding: 8px 0 8px 30px; position: relative; color: var(--ink); }
.feat-list li::before { content: "✓"; position: absolute; left: 0; color: var(--gold-d); font-weight: 800; font-size: 16px; }

/* --- Certification Grid --- */
.cert-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.cert-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 22px; text-align: center; }
.cert-card .cert-icon { font-size: 32px; margin-bottom: 8px; }
.cert-card h4 { font-family: 'Poppins'; font-weight: 700; font-size: 14px; color: var(--green-d); }
.cert-card p { font-size: 12.5px; color: var(--muted); margin-top: 4px; }

/* ============================================
   SCROLL ANIMATIONS
   ============================================ */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-left { opacity: 0; transform: translateX(-30px); transition: opacity .6s ease, transform .6s ease; }
.reveal-left.visible { opacity: 1; transform: translateX(0); }
.reveal-right { opacity: 0; transform: translateX(30px); transition: opacity .6s ease, transform .6s ease; }
.reveal-right.visible { opacity: 1; transform: translateX(0); }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
  .search-grid { grid-template-columns: 1fr 1fr; }
  .search-grid .btn { grid-column: 1 / -1; }
  .process { grid-template-columns: repeat(2, 1fr); }
  .cert-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .hero .wrap { padding: 60px 24px; }
  .hero h1 { font-size: 38px; }
  .page-hero h1 { font-size: 34px; }
  .head h2 { font-size: 30px; }
  .menu { display: none; }
  .hamburger { display: flex; }
  .nav-cta { display: none; }
  .trust .wrap { grid-template-columns: 1fr 1fr; }
  .pkgs { grid-template-columns: 1fr; max-width: 440px; margin-left: auto; margin-right: auto; }
  .whygrid { grid-template-columns: 1fr 1fr; }
  .tst { grid-template-columns: 1fr; }
  .svc { grid-template-columns: 1fr 1fr 1fr; }
  .dur { padding: 0 20px; }
  .fgrid { grid-template-columns: 1fr; }
  .about-content { grid-template-columns: 1fr; }
  .split-section { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .route-grid { grid-template-columns: 1fr; }
  .country-grid { grid-template-columns: 1fr 1fr; }
  .doc-grid { grid-template-columns: 1fr; }
  .values-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr 1fr; }
  .include-grid { grid-template-columns: 1fr; }
  .stats-bar .wrap { grid-template-columns: 1fr 1fr; }
  .comparison-table { font-size: 13px; }
  .comparison-table th, .comparison-table td { padding: 10px 12px; }
}

@media (max-width: 600px) {
  .topbar .wrap { flex-direction: column; height: auto; padding: 8px 24px; gap: 2px; text-align: center; }
  .hero h1 { font-size: 32px; }
  .page-hero h1 { font-size: 28px; }
  .hero .stats { gap: 24px; }
  .head h2 { font-size: 26px; }
  .trust .wrap { grid-template-columns: 1fr; }
  .svc { grid-template-columns: 1fr 1fr; }
  .whygrid { grid-template-columns: 1fr; }
  .process { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr; }
  .country-grid { grid-template-columns: 1fr; }
  .stats-bar .wrap { grid-template-columns: 1fr; gap: 20px; }
  .cert-grid { grid-template-columns: 1fr; }
  .search-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .ctaband h2 { font-size: 28px; }
  .stepgrid { grid-template-columns: 1fr; }
}

/* --- Ziyarat Custom --- */
.steps { background: linear-gradient(180deg,#fff,var(--cream)); }
.stepgrid { display: grid; grid-template-columns: repeat(4,1fr); gap: 22px; }
.step { text-align: center; }
.step .n { width: 54px; height: 54px; border-radius: 50%; margin: 0 auto 14px; background: linear-gradient(180deg,var(--gold-l),var(--gold)); color: var(--green-d); font-family: 'Playfair Display', serif; font-weight: 800; font-size: 22px; display: flex; align-items: center; justify-content: center; }
.step h3 { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 17px; }
.step p { color: var(--muted); font-size: 14px; margin-top: 5px; }
.checklist { max-width: 820px; margin: 0 auto; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 30px 34px; }
.checklist li { list-style: none; padding: 10px 0 10px 34px; position: relative; border-bottom: 1px dashed var(--line); font-size: 15px; }
.checklist li:last-child { border-bottom: none; }
.checklist li::before { content: "✓"; position: absolute; left: 0; color: var(--gold-d); font-weight: 800; font-size: 17px; }

/* --- Missing Grid Layouts --- */
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media(max-width:900px) {
  .grid3, .grid4 { grid-template-columns: 1fr; }
}