/* ============================================================
   UAE VISA EXPERT — Global Stylesheet
   UAE Travel Services, Madurai | uaevisaexpert.com
   ============================================================ */

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

:root {
  --gold: #C9A84C;
  --gold-light: #F0D080;
  --gold-dark: #8B6914;
  --navy: #0A1628;
  --navy-mid: #112240;
  --navy-light: #1A3355;
  --white: #FFFFFF;
  --off-white: #F8F6F0;
  --text-light: #CBD5E1;
  --text-muted: #94A3B8;
  --green: #22C55E;
  --wa-green: #25D366;
  --border: rgba(201,168,76,0.15);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:'DM Sans',sans-serif; background:var(--navy); color:var(--white); overflow-x:hidden; }

/* ── TOPBAR ── */
.topbar {
  background:var(--gold);
  color:var(--navy);
  text-align:center;
  padding:8px 20px;
  font-size:13px;
  font-weight:600;
  letter-spacing:.4px;
  position:sticky; top:0; z-index:1000;
}
.topbar a { color:var(--navy); text-decoration:none; }

/* ── HEADER ── */
header {
  background:var(--navy-mid);
  border-bottom:1px solid var(--border);
  padding:14px 5%;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;
  position:sticky; top:37px; z-index:999;
}
.logo-name { font-family:'Playfair Display',serif; font-size:22px; font-weight:900; color:var(--gold); line-height:1.1; text-decoration:none; display:block; }
.logo-sub { font-size:10px; color:var(--text-muted); letter-spacing:2px; text-transform:uppercase; }

nav { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
nav a {
  color:var(--text-light); text-decoration:none; font-size:13px; font-weight:500;
  padding:6px 12px; border-radius:6px; transition:all .2s;
}
nav a:hover, nav a.active { color:var(--gold); background:rgba(201,168,76,.08); }
.nav-cta {
  background:var(--wa-green)!important; color:#fff!important;
  font-weight:700!important; padding:8px 16px!important; border-radius:6px;
}
.nav-cta:hover { background:#1da851!important; }

/* ── HERO (reusable inner-page) ── */
.page-hero {
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy-mid) 60%,#0F2040 100%);
  padding:64px 5% 52px;
  position:relative; overflow:hidden; text-align:center;
}
.page-hero::before {
  content:''; position:absolute; top:-80px; right:-80px;
  width:420px; height:420px;
  background:radial-gradient(circle,rgba(201,168,76,.08) 0%,transparent 70%);
  border-radius:50%;
}
.page-hero .badge {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(201,168,76,.1); border:1px solid rgba(201,168,76,.3);
  border-radius:50px; padding:5px 16px; font-size:11px;
  color:var(--gold-light); font-weight:700; letter-spacing:1.5px;
  text-transform:uppercase; margin-bottom:18px;
}
.page-hero h1 {
  font-family:'Playfair Display',serif;
  font-size:clamp(28px,5vw,50px); font-weight:900; line-height:1.15;
  margin-bottom:16px; position:relative; z-index:1;
}
.page-hero h1 span { color:var(--gold); }
.page-hero p { font-size:16px; color:var(--text-light); line-height:1.7; max-width:660px; margin:0 auto 28px; }
.breadcrumb { font-size:12px; color:var(--text-muted); margin-bottom:14px; }
.breadcrumb a { color:var(--gold); text-decoration:none; }
.breadcrumb a:hover { text-decoration:underline; }

/* ── LAYOUT ── */
section { padding:64px 5%; }
.section-inner { max-width:1100px; margin:0 auto; }
.section-label { font-size:11px; letter-spacing:3px; text-transform:uppercase; color:var(--gold); font-weight:700; margin-bottom:10px; }
.section-title { font-family:'Playfair Display',serif; font-size:clamp(24px,4vw,38px); font-weight:900; line-height:1.2; margin-bottom:14px; }
.section-title span { color:var(--gold); }
.section-sub { font-size:15px; color:var(--text-light); line-height:1.7; max-width:620px; }
.bg-mid { background:var(--navy-mid); }

/* ── BUTTONS ── */
.btn-primary {
  background:var(--gold); color:var(--navy);
  padding:13px 26px; border-radius:8px; font-weight:700; font-size:15px;
  text-decoration:none; display:inline-flex; align-items:center; gap:8px;
  transition:all .2s; border:none; cursor:pointer;
}
.btn-primary:hover { background:var(--gold-light); transform:translateY(-2px); box-shadow:0 8px 24px rgba(201,168,76,.3); }
.btn-wa {
  background:var(--wa-green); color:#fff;
  padding:13px 22px; border-radius:8px; font-weight:700; font-size:15px;
  text-decoration:none; display:inline-flex; align-items:center; gap:8px; transition:all .2s;
}
.btn-wa:hover { background:#1da851; transform:translateY(-2px); }
.btn-outline {
  border:1.5px solid var(--gold); color:var(--gold);
  padding:12px 22px; border-radius:8px; font-weight:700; font-size:14px;
  text-decoration:none; display:inline-flex; align-items:center; gap:8px; transition:all .2s;
}
.btn-outline:hover { background:var(--gold); color:var(--navy); }

/* ── CARDS ── */
.card {
  background:var(--navy-mid); border:1px solid var(--border);
  border-radius:14px; padding:28px; transition:all .25s;
}
.card:hover { border-color:rgba(201,168,76,.35); transform:translateY(-3px); box-shadow:0 12px 32px rgba(0,0,0,.25); }
.card-top-line { position:relative; }
.card-top-line::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--gold-dark),var(--gold)); border-radius:0 0 3px 3px;
}

.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-top:40px; }
.grid-3 { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:24px; margin-top:40px; }
.grid-4 { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px; margin-top:40px; }

/* ── CHECKLIST ── */
.checklist { list-style:none; display:flex; flex-direction:column; gap:10px; }
.checklist li { font-size:14px; color:var(--text-light); display:flex; align-items:flex-start; gap:10px; line-height:1.6; }
.checklist li::before { content:'✓'; color:var(--green); font-weight:700; font-size:13px; flex-shrink:0; margin-top:2px; }

/* ── STEP CARDS ── */
.step-card { display:flex; gap:18px; align-items:flex-start; }
.step-num {
  width:44px; height:44px; background:linear-gradient(135deg,var(--gold-dark),var(--gold));
  color:var(--navy); border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:16px; flex-shrink:0;
  font-family:'Playfair Display',serif; box-shadow:0 0 0 6px rgba(201,168,76,.1);
}
.step-card h4 { font-size:15px; font-weight:700; margin-bottom:5px; }
.step-card p { font-size:13px; color:var(--text-light); line-height:1.6; }

/* ── FAQ ── */
.faq-list { display:flex; flex-direction:column; gap:10px; margin-top:36px; }
.faq-item { background:var(--navy-mid); border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.faq-q { padding:16px 20px; font-size:14px; font-weight:600; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:12px; user-select:none; }
.faq-q:hover { color:var(--gold); }
.faq-arrow { font-size:16px; color:var(--gold); flex-shrink:0; transition:transform .3s; }
.faq-a { max-height:0; overflow:hidden; transition:max-height .4s ease,padding .3s; font-size:13px; color:var(--text-light); line-height:1.7; padding:0 20px; }
.faq-item.open .faq-a { max-height:300px; padding:0 20px 16px; }
.faq-item.open .faq-arrow { transform:rotate(180deg); }

/* ── REVIEW CARDS ── */
.review-card { background:var(--navy-mid); border:1px solid var(--border); border-radius:14px; padding:26px; }
.stars { color:var(--gold); font-size:16px; letter-spacing:2px; margin-bottom:12px; }
.review-text { font-size:13px; color:var(--text-light); line-height:1.7; margin-bottom:18px; font-style:italic; }
.reviewer { display:flex; align-items:center; gap:12px; }
.reviewer-avatar {
  width:42px; height:42px; background:var(--gold); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:900; color:var(--navy); font-size:15px;
  font-family:'Playfair Display',serif; flex-shrink:0;
}
.reviewer-name { font-size:14px; font-weight:700; }
.reviewer-loc { font-size:11px; color:var(--text-muted); }

/* ── INFO BOX ── */
.info-box {
  background:rgba(201,168,76,.07); border:1px solid rgba(201,168,76,.25);
  border-radius:12px; padding:22px 24px;
}
.info-box h4 { font-size:15px; font-weight:700; color:var(--gold); margin-bottom:10px; }
.info-box p, .info-box li { font-size:13px; color:var(--text-light); line-height:1.7; }

/* ── CTA BANNER ── */
.cta-banner {
  background:linear-gradient(135deg,var(--gold-dark),var(--gold),#D4A017);
  padding:56px 5%; text-align:center;
}
.cta-banner h2 { font-family:'Playfair Display',serif; font-size:clamp(24px,4vw,38px); font-weight:900; color:var(--navy); margin-bottom:10px; }
.cta-banner p { font-size:16px; color:var(--navy-mid); margin-bottom:28px; font-weight:500; }
.cta-buttons { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.btn-dark { background:var(--navy); color:var(--gold); padding:13px 24px; border-radius:8px; font-weight:700; font-size:14px; text-decoration:none; display:inline-flex; align-items:center; gap:8px; transition:all .2s; }
.btn-dark:hover { background:var(--navy-light); transform:translateY(-2px); }

/* ── FOOTER ── */
footer { background:#06111E; padding:48px 5% 22px; border-top:1px solid var(--border); }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:36px; max-width:1100px; margin:0 auto 36px; }
.footer-brand h3 { font-family:'Playfair Display',serif; font-size:20px; color:var(--gold); margin-bottom:10px; }
.footer-brand p { font-size:13px; color:var(--text-muted); line-height:1.7; margin-bottom:14px; }
.footer-contact { display:flex; flex-direction:column; gap:8px; }
.footer-contact a { color:var(--text-light); text-decoration:none; font-size:13px; display:flex; align-items:center; gap:8px; }
.footer-contact a:hover { color:var(--gold); }
.footer-col h4 { font-size:12px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--gold); margin-bottom:14px; }
.footer-col ul { list-style:none; display:flex; flex-direction:column; gap:9px; }
.footer-col li a { color:var(--text-muted); text-decoration:none; font-size:13px; transition:color .2s; }
.footer-col li a:hover { color:var(--gold); }
.footer-bottom { max-width:1100px; margin:0 auto; padding-top:20px; border-top:1px solid rgba(255,255,255,.05); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; }
.footer-bottom p { font-size:12px; color:var(--text-muted); }
.footer-bottom a { color:var(--text-muted); text-decoration:none; margin:0 8px; }
.footer-bottom a:hover { color:var(--gold); }

/* ── WA FLOAT ── */
.wa-float {
  position:fixed; bottom:22px; right:22px;
  background:var(--wa-green); color:#fff; width:56px; height:56px;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:26px; text-decoration:none;
  box-shadow:0 4px 18px rgba(37,211,102,.45); z-index:9999;
  animation:wapulse 2.2s infinite;
}
@keyframes wapulse { 0%,100%{box-shadow:0 4px 18px rgba(37,211,102,.45)} 50%{box-shadow:0 4px 36px rgba(37,211,102,.75)} }

/* ── STATS ROW ── */
.stats-row { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:40px; }
.stat-box { text-align:center; padding:24px 16px; background:var(--navy-mid); border:1px solid var(--border); border-radius:12px; }
.stat-num { font-family:'Playfair Display',serif; font-size:30px; font-weight:900; color:var(--gold); line-height:1; }
.stat-label { font-size:12px; color:var(--text-muted); margin-top:5px; font-weight:500; }

/* ── BLOG CARD ── */
.blog-card { background:var(--navy-mid); border:1px solid var(--border); border-radius:14px; overflow:hidden; transition:all .25s; }
.blog-card:hover { border-color:rgba(201,168,76,.35); transform:translateY(-4px); box-shadow:0 14px 36px rgba(0,0,0,.3); }
.blog-img { background:linear-gradient(135deg,var(--navy-light),var(--navy-mid)); padding:32px 24px; font-size:48px; text-align:center; }
.blog-body { padding:24px; }
.blog-tag { font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:var(--gold); font-weight:700; margin-bottom:10px; }
.blog-card h3 { font-family:'Playfair Display',serif; font-size:18px; font-weight:700; margin-bottom:10px; line-height:1.35; }
.blog-card p { font-size:13px; color:var(--text-light); line-height:1.7; margin-bottom:16px; }
.blog-card a.read-more { font-size:13px; color:var(--gold); text-decoration:none; font-weight:600; }
.blog-card a.read-more:hover { text-decoration:underline; }

/* ── RESPONSIVE ── */
@media(max-width:900px) {
  .footer-grid { grid-template-columns:1fr 1fr; }
  .grid-2 { grid-template-columns:1fr; }
  .stats-row { grid-template-columns:1fr 1fr; }
  header { top:33px; }
  .mobile-hide { display:none; }
}
@media(max-width:600px) {
  section { padding:48px 5%; }
  .footer-grid { grid-template-columns:1fr; }
  .stats-row { grid-template-columns:1fr 1fr; }
  .grid-4 { grid-template-columns:1fr 1fr; }
  .footer-bottom { flex-direction:column; text-align:center; }
}