/* ═══════════════════════════════════
   RENTOVA — Complete CSS (Light Theme)
   Single Page Car Rental
   Bright, clean, brand-coordinated
═══════════════════════════════════ */

:root {
    --brand: #1BBFA3;
    --brand-dark: #159E88;
    --brand-deeper: #0E7D6A;
    --brand-light: #E6F9F6;
    --brand-glow: rgba(27,191,163,0.12);
    --brand-mid: rgba(27,191,163,0.06);
    --brand-soft: #F0FBF9;

    /* Light backgrounds */
    --bg-base: #FFFFFF;
    --bg-section: #F7FAFA;
    --bg-card: #FFFFFF;
    --bg-card-hover: #F0FBF9;
    --bg-alt: #F2F9F8;
    --surface: rgba(27,191,163,0.04);
    --surface-hover: rgba(27,191,163,0.07);

    /* Borders */
    --border: rgba(27,191,163,0.12);
    --border-brand: rgba(27,191,163,0.25);
    --border-light: rgba(0,0,0,0.06);

    /* Text */
    --text: #1A2B2A;
    --text-sec: #4D6B67;
    --text-muted: #8BA3A0;
    --text-on-brand: #FFFFFF;

    /* Accents */
    --gold: #C8A96E;
    --gold-light: rgba(200,169,110,0.12);

    /* Footer dark */
    --footer-bg: #0E1E1B;
    --footer-surface: rgba(27,191,163,0.06);
    --footer-border: rgba(27,191,163,0.15);
    --footer-text: #C8DCD9;
    --footer-text-muted: #5E8580;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: 'Cairo', sans-serif;
    background: var(--bg-base);
    color: var(--text);
    line-height: 1.7;
    overflow-x: hidden;
}
img { max-width: 100%; display: block; }

/* Subtle background pattern */
body::before {
    content: '';
    position: fixed; inset: 0;
    background-image:
        radial-gradient(ellipse 80% 60% at 20% 10%, rgba(27,191,163,0.04) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 80% 80%, rgba(27,191,163,0.03) 0%, transparent 60%);
    pointer-events: none; z-index: 0;
}
body::after {
    content: '';
    position: fixed; inset: 0;
    background-image:
        linear-gradient(rgba(27,191,163,0.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(27,191,163,0.018) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none; z-index: 0;
}

/* ═══ NAVBAR ═══ */
.navbar {
    position: fixed; top: 16px; right: 5%; left: 5%; z-index: 100;
    border-radius: 18px;
    background: rgba(255,255,255,0.65);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(27,191,163,0.1);
    transition: all 0.5s cubic-bezier(0.25,0.8,0.25,1);
    box-shadow: 0 2px 20px rgba(0,0,0,0.04);
}
.navbar.scrolled {
    background: rgba(255,255,255,0.92);
    border-color: rgba(27,191,163,0.2);
    box-shadow: 0 4px 32px rgba(0,0,0,0.06), 0 0 0 1px rgba(27,191,163,0.08);
}
.nav-inner { max-width: 100%; padding: 0 24px; height: 68px; display: flex; align-items: center; justify-content: space-between; position: relative; }
.nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; z-index: 2; }
.logo-mark { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; transition: all 0.35s; }
.logo-mark img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 8px rgba(27,191,163,0.3)); transition: all 0.35s; }
.nav-logo:hover .logo-mark img { filter: drop-shadow(0 0 14px rgba(27,191,163,0.5)); transform: scale(1.06); }
.logo-wm { font-size: 21px; font-weight: 800; color: var(--text); letter-spacing: -0.3px; }
.logo-wm span { color: var(--brand); }

.nav-links { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 4px; list-style: none; }
.nav-links a { color: var(--text-sec); text-decoration: none; font-size: 13.5px; font-weight: 600; transition: all 0.3s; white-space: nowrap; padding: 7px 14px; border-radius: 10px; position: relative; }
.nav-links a.active { color: var(--brand-deeper); background: rgba(27,191,163,0.1); }
.nav-links a::after { content: ''; position: absolute; bottom: 2px; right: 50%; left: 50%; height: 2px; background: var(--brand); border-radius: 1px; transition: all 0.35s; opacity: 0; }
.nav-links a.active::after { right: 20%; left: 20%; opacity: 1; }
.nav-links a:hover { color: var(--brand-dark); background: rgba(27,191,163,0.07); }

.nav-cta-wrap { flex-shrink: 0; z-index: 2; }
.nav-cta { display: inline-flex; align-items: center; background: var(--brand); color: #fff !important; padding: 9px 22px; border-radius: 10px; font-weight: 700; font-size: 13.5px; text-decoration: none; box-shadow: 0 3px 16px rgba(27,191,163,0.25); transition: all 0.3s; white-space: nowrap; }
.nav-cta:hover { background: var(--brand-dark); transform: translateY(-1px); box-shadow: 0 6px 24px rgba(27,191,163,0.35); }

.hamburger { display: none; cursor: pointer; width: 38px; height: 38px; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-card); flex-direction: column; gap: 5px; padding: 9px; }
.hamburger span { display: block; width: 18px; height: 1.5px; background: var(--text); border-radius: 2px; transition: all 0.3s; }

.mob-menu { display: none; position: fixed; top: 100px; right: 5%; left: 5%; background: rgba(255,255,255,0.97); border: 1px solid var(--border-brand); border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,0.08); z-index: 99; padding: 12px; backdrop-filter: blur(24px); }
.mob-menu.open { display: block; }
.mob-menu a { display: block; padding: 13px 18px; color: var(--text-sec); text-decoration: none; font-size: 14px; font-weight: 600; border-radius: 10px; transition: all 0.2s; }
.mob-menu a:hover, .mob-menu a.active { color: var(--brand-deeper); background: rgba(27,191,163,0.08); }

/* ═══ HERO ═══ */
.hero { position: relative; width: 100%; height: 100vh; min-height: 600px; max-height: 920px; overflow: hidden; }
.hero-slides { position: absolute; inset: 0; }
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s ease; background-size: cover; background-position: center; }
.hero-slide.active { opacity: 1; }
.hero-slide::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(255,255,255,0.97) 0%, rgba(255,255,255,0.6) 35%, rgba(255,255,255,0.15) 70%, rgba(0,0,0,0.1) 100%);
}
.hero-slide::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 70% at 50% 100%, rgba(27,191,163,0.06) 0%, transparent 70%); z-index: 1; }

.hero-content { position: absolute; bottom: 0; right: 0; left: 0; z-index: 3; padding: 0 5% 120px; text-align: center; }
.hero-logo-block { margin: 0 auto 32px; display: inline-flex; flex-direction: column; align-items: center; gap: 16px; }
.hero-icon { width: 110px; height: 110px; display: flex; align-items: center; justify-content: center; position: relative; animation: heroPulse 3.5s ease-in-out infinite; }
.hero-icon::before { content: ''; position: absolute; inset: -12px; border-radius: 30px; border: 1.5px solid rgba(27,191,163,0.25); animation: ringPulse 3.5s ease-in-out infinite; }
.hero-icon::after { content: ''; position: absolute; inset: -24px; border-radius: 36px; border: 1px solid rgba(27,191,163,0.1); animation: ringPulse 3.5s ease-in-out infinite 0.5s; }
.hero-icon img { width: 80%; height: 80%; object-fit: contain; filter: drop-shadow(0 0 20px rgba(27,191,163,0.5)) drop-shadow(0 0 50px rgba(27,191,163,0.2)); }
@keyframes heroPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@keyframes ringPulse { 0%, 100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }

.hero h1 { font-size: clamp(34px,5.5vw,60px); font-weight: 900; color: var(--text); margin-bottom: 18px; text-shadow: 0 2px 20px rgba(255,255,255,0.6); letter-spacing: -1px; line-height: 1.2; }
.hero h1 span { color: var(--brand); }
.hero-desc { font-size: clamp(15px,2vw,19px); color: var(--text-sec); max-width: 540px; margin: 0 auto 40px; font-weight: 400; line-height: 2; font-family: 'Tajawal', sans-serif; }

.hero-cta { display: inline-flex; align-items: center; gap: 10px; background: var(--brand); color: #fff; padding: 15px 48px; border-radius: 14px; font-size: 16px; font-weight: 700; text-decoration: none; transition: all 0.35s; box-shadow: 0 6px 32px rgba(27,191,163,0.3); position: relative; overflow: hidden; }
.hero-cta::before { content: ''; position: absolute; top: 0; right: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent); transition: right 0.5s; }
.hero-cta:hover::before { right: 100%; }
.hero-cta:hover { background: var(--brand-dark); transform: translateY(-3px); box-shadow: 0 12px 44px rgba(27,191,163,0.4); }

.hero-dots { position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 4; }
.hero-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(27,191,163,0.2); cursor: pointer; transition: all 0.35s; border: 1.5px solid transparent; }
.hero-dot.active { background: var(--brand); width: 28px; border-radius: 4px; }

.hero-wave { position: absolute; bottom: -2px; left: 0; right: 0; z-index: 4; }
.hero-wave svg { display: block; width: 100%; }
.hero-wave svg path { fill: var(--bg-base); }

/* ═══ SECTION SHARED ═══ */
.sh { text-align: center; margin-bottom: 56px; position: relative; z-index: 2; }
.sh-tag {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(27,191,163,0.08); border: 1px solid rgba(27,191,163,0.18);
    color: var(--brand-dark); padding: 6px 18px; border-radius: 100px;
    font-size: 12.5px; font-weight: 700; letter-spacing: 0.5px; margin-bottom: 16px;
}
.sh-tag::before { content: ''; width: 6px; height: 6px; background: var(--brand); border-radius: 50%; }
.sh-title { font-size: 34px; font-weight: 900; color: var(--text); letter-spacing: -0.5px; }
.sh-title span { color: var(--brand); }
.sh-sub { font-size: 15px; color: var(--text-sec); max-width: 480px; margin: 12px auto 0; font-family: 'Tajawal', sans-serif; line-height: 1.9; }
.sh-line { width: 48px; height: 2px; background: linear-gradient(90deg, var(--brand), rgba(27,191,163,0.2)); border-radius: 2px; margin: 20px auto 0; }

/* ═══ ABOUT ═══ */
.about-sec { padding: 90px 5% 100px; background: var(--bg-base); position: relative; overflow: hidden; z-index: 1; }
.about-inner { max-width: 1120px; margin: 0 auto; display: flex; align-items: center; gap: 64px; position: relative; z-index: 2; }
.about-img-block { flex: 0 0 46%; position: relative; }
.about-img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 22px; box-shadow: 0 24px 64px rgba(0,0,0,0.08); }
.about-img-block::before { content: ''; position: absolute; top: -12px; right: -12px; bottom: 12px; left: 12px; border: 1.5px solid rgba(27,191,163,0.2); border-radius: 24px; z-index: -1; }
.about-img-block::after { content: ''; position: absolute; inset: 0; border-radius: 22px; box-shadow: inset 0 0 0 1px rgba(27,191,163,0.08); }
.about-badge { position: absolute; bottom: -18px; left: 28px; background: linear-gradient(135deg, var(--brand), var(--brand-dark)); color: #fff; padding: 11px 24px; border-radius: 12px; font-weight: 700; font-size: 13px; box-shadow: 0 6px 24px rgba(27,191,163,0.3); border: 1px solid rgba(255,255,255,0.2); }
.about-txt { flex: 1; }
.about-txt h3 { font-size: 24px; font-weight: 700; line-height: 1.9; color: var(--text); }
.about-txt h3 span { color: var(--brand); }
.about-ornament { display: flex; align-items: center; gap: 6px; margin-top: 24px; }
.about-ornament-line { width: 36px; height: 2px; background: var(--brand); border-radius: 2px; }
.about-ornament-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); opacity: 0.2; }

/* ═══ WAVE DIVIDERS ═══ */
.wave-divider { position: relative; width: 100%; overflow: hidden; line-height: 0; margin-top: -1px; z-index: 1; }
.wave-divider svg { display: block; width: 100%; }

/* Override wave fills to match light sections */
.about-sec + .wave-divider svg path { fill: var(--bg-section); }
.reg-sec + .wave-divider svg path { fill: var(--bg-base); }
.svc-sec + .wave-divider svg path { fill: var(--bg-section); }
.fleet-sec + .wave-divider svg path { fill: var(--bg-alt); }
.req-sec + .wave-divider svg path { fill: var(--bg-section); }
.faq-sec + .wave-divider svg path { fill: var(--bg-base); }
.sub-sec + .wave-divider svg path { fill: var(--footer-bg); }

/* ═══ REGISTER ═══ */
.reg-sec { padding: 90px 5% 100px; background: var(--bg-section); position: relative; overflow: hidden; z-index: 1; }
.reg-inner { max-width: 1120px; margin: 0 auto; display: flex; align-items: center; gap: 56px; position: relative; z-index: 2; }
.reg-vis { flex: 0 0 50%; position: relative; }
.reg-vis img { width: 100%; border-radius: 22px; box-shadow: 0 24px 64px rgba(0,0,0,0.08); }
.reg-form {
    flex: 1; background: var(--bg-card); border-radius: 24px; padding: 44px 40px;
    border: 1px solid var(--border); backdrop-filter: blur(10px);
    position: relative; overflow: hidden;
    box-shadow: 0 8px 40px rgba(0,0,0,0.04);
}
.reg-form::before { content: ''; position: absolute; top: 0; right: 0; width: 100px; height: 100px; background: radial-gradient(circle, rgba(27,191,163,0.08), transparent 70%); border-radius: 0 24px 0 0; }
.reg-form h4 { font-size: 20px; font-weight: 800; margin-bottom: 28px; color: var(--text); position: relative; z-index: 1; }

.ff { margin-bottom: 14px; }
.ff input, .ff select {
    width: 100%; padding: 14px 18px; border: 1px solid var(--border);
    border-radius: 12px; font-size: 14px; font-family: 'Cairo', sans-serif;
    color: var(--text); background: var(--bg-section); outline: 0;
    transition: all 0.25s; appearance: none; -webkit-appearance: none;
}
.ff select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231BBFA3' stroke-width='1.8' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: left 16px center; padding-left: 38px;
    background-color: var(--bg-section);
}
.ff select option { background: #fff; color: var(--text); }
.ff input::placeholder { color: var(--text-muted); }
.ff input:focus, .ff select:focus { border-color: var(--brand); background: rgba(27,191,163,0.03); box-shadow: 0 0 0 3px rgba(27,191,163,0.08); }

.btn-b {
    display: flex; align-items: center; justify-content: center; width: 100%; padding: 15px;
    background: linear-gradient(135deg, var(--brand), var(--brand-dark)); color: #fff;
    border: none; border-radius: 12px; font-size: 15px; font-weight: 700;
    font-family: 'Cairo', sans-serif; cursor: pointer; transition: all 0.3s; margin-top: 6px;
    box-shadow: 0 4px 20px rgba(27,191,163,0.2);
}
.btn-b:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(27,191,163,0.35); }
.btn-b:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.f-note { text-align: center; margin-top: 14px; font-size: 12.5px; color: var(--text-muted); font-family: 'Tajawal', sans-serif; }
.form-msg { text-align: center; margin-top: 12px; font-size: 13px; font-weight: 600; display: none; }

/* ═══ SERVICES ═══ */
.svc-sec { padding: 90px 5% 100px; background: var(--bg-base); position: relative; overflow: hidden; z-index: 1; }
.svc-grid { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; position: relative; z-index: 2; }
.svc-card {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px;
    padding: 34px 28px; text-align: center; transition: all 0.4s;
    position: relative; overflow: hidden; cursor: default;
    box-shadow: 0 2px 12px rgba(0,0,0,0.03);
}
.svc-card::before { content: ''; position: absolute; top: 0; right: 0; left: 0; height: 2px; background: linear-gradient(90deg, var(--brand), transparent); opacity: 0; transition: opacity 0.4s; }
.svc-card:hover {
    background: var(--bg-card-hover); border-color: var(--border-brand);
    transform: translateY(-6px);
    box-shadow: 0 20px 60px rgba(27,191,163,0.08), 0 0 0 1px rgba(27,191,163,0.1);
}
.svc-card:hover::before { opacity: 1; }
.svc-ic {
    width: 56px; height: 56px; margin: 0 auto 18px;
    background: rgba(27,191,163,0.08); border: 1px solid rgba(27,191,163,0.15);
    border-radius: 16px; display: flex; align-items: center; justify-content: center;
    transition: all 0.4s;
}
.svc-card:hover .svc-ic { background: var(--brand); border-color: var(--brand); box-shadow: 0 6px 24px rgba(27,191,163,0.3); }
.svc-ic svg { width: 24px; height: 24px; stroke: var(--brand); fill: none; stroke-width: 1.8; transition: stroke 0.4s; }
.svc-card:hover .svc-ic svg { stroke: #fff; }
.svc-card h4 { font-size: 15.5px; font-weight: 700; margin-bottom: 10px; color: var(--text); }
.svc-card p { font-size: 13px; color: var(--text-sec); line-height: 1.9; font-family: 'Tajawal', sans-serif; }

/* ═══ FLEET ═══ */
.fleet-sec { padding: 90px 5% 100px; background: var(--bg-section); position: relative; overflow: hidden; z-index: 1; }
.fleet-grid { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; position: relative; z-index: 2; }
.fc {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px;
    overflow: hidden; transition: all 0.4s; text-decoration: none; color: inherit; display: block;
    box-shadow: 0 2px 12px rgba(0,0,0,0.03);
}
.fc:hover { border-color: var(--border-brand); box-shadow: 0 24px 64px rgba(27,191,163,0.1); transform: translateY(-6px); }
.fc-iw { position: relative; overflow: hidden; }
.fc-img { width: 100%; height: 200px; object-fit: cover; transition: transform 0.6s; }
.fc:hover .fc-img { transform: scale(1.06); }
.fc-tag {
    position: absolute; top: 14px; right: 14px;
    background: rgba(255,255,255,0.9); border: 1px solid rgba(27,191,163,0.2);
    color: var(--brand-dark); padding: 5px 14px; border-radius: 8px;
    font-size: 12px; font-weight: 700; backdrop-filter: blur(8px);
}
.fc-body { padding: 22px; }
.fc-name { font-size: 15.5px; font-weight: 700; margin-bottom: 14px; color: var(--text); }
.fc-meta { display: flex; justify-content: space-between; align-items: center; }
.fp-block { display: flex; align-items: baseline; gap: 4px; }
.fp-num { font-size: 22px; font-weight: 900; color: var(--brand); }
.fp-lbl { font-size: 12px; color: var(--text-muted); }
.fs-row { display: flex; gap: 10px; }
.fs-item { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-sec); }
.fs-item svg { width: 14px; height: 14px; stroke: var(--text-muted); fill: none; stroke-width: 1.8; }

/* ═══ REQUEST ═══ */
.req-sec { padding: 90px 5% 100px; background: var(--bg-alt); position: relative; overflow: hidden; z-index: 1; }
.req-inner { max-width: 1120px; margin: 0 auto; display: flex; align-items: center; gap: 56px; position: relative; z-index: 2; }
.req-vis { flex: 0 0 50%; }
.req-vis img { width: 100%; border-radius: 22px; box-shadow: 0 24px 64px rgba(0,0,0,0.08); }
.req-form {
    flex: 1; background: var(--bg-card); border: 1px solid var(--border); border-radius: 24px;
    padding: 44px 40px; position: relative; overflow: hidden;
    box-shadow: 0 8px 40px rgba(0,0,0,0.04);
}
.req-form::before { content: ''; position: absolute; bottom: 0; left: 0; width: 90px; height: 90px; background: radial-gradient(circle, rgba(27,191,163,0.06), transparent 70%); border-radius: 0 0 0 24px; }
.req-form h4 { font-size: 20px; font-weight: 800; margin-bottom: 28px; color: var(--text); position: relative; z-index: 1; }

/* ═══ FAQ ═══ */
.faq-sec { padding: 100px 5% 110px; background: var(--bg-section); position: relative; overflow: hidden; z-index: 1; }
.faq-sec::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 70%; height: 70%; background: radial-gradient(ellipse, rgba(27,191,163,0.03) 0%, transparent 70%); pointer-events: none; }
.faq-wrapper { max-width: 860px; margin: 0 auto; position: relative; z-index: 2; }
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-i {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 18px;
    overflow: hidden; transition: all 0.4s; position: relative;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}
.faq-i::before { content: ''; position: absolute; top: 0; right: 0; width: 0; height: 100%; background: linear-gradient(to left, rgba(27,191,163,0.03), transparent); transition: width 0.4s; pointer-events: none; }
.faq-i:hover::before { width: 100%; }
.faq-i:hover { border-color: rgba(27,191,163,0.2); box-shadow: 0 4px 24px rgba(0,0,0,0.04); }
.faq-i.active {
    border-color: rgba(27,191,163,0.3); background: var(--brand-soft);
    box-shadow: 0 8px 36px rgba(27,191,163,0.06), 0 0 0 1px rgba(27,191,163,0.08);
}
.faq-i.active::after { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: linear-gradient(to bottom, var(--brand), transparent); border-radius: 0 0 0 18px; }

.faq-q { padding: 22px 28px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; gap: 16px; user-select: none; }
.faq-q-left { display: flex; align-items: center; gap: 16px; flex: 1; }
.faq-num { font-size: 12px; font-weight: 800; color: var(--brand); opacity: 0.4; min-width: 28px; transition: opacity 0.3s; }
.faq-i.active .faq-num { opacity: 1; }
.faq-q h5 { font-size: 15px; font-weight: 700; flex: 1; line-height: 1.65; color: var(--text); transition: color 0.3s; }
.faq-i.active .faq-q h5 { color: var(--brand-deeper); }

.faq-p {
    width: 34px; height: 34px; min-width: 34px;
    background: rgba(27,191,163,0.06); border: 1px solid var(--border);
    border-radius: 10px; display: flex; align-items: center; justify-content: center;
    transition: all 0.35s; position: relative; overflow: hidden;
}
.faq-p::before { content: ''; position: absolute; inset: 0; background: var(--brand); transform: scale(0); border-radius: 50%; transition: transform 0.35s; }
.faq-i.active .faq-p::before { transform: scale(2); }
.faq-i.active .faq-p { border-color: var(--brand); }
.faq-p svg { width: 13px; height: 13px; stroke: var(--text-muted); stroke-width: 2.5; fill: none; transition: all 0.35s; position: relative; z-index: 1; }
.faq-i.active .faq-p svg { stroke: #fff; transform: rotate(45deg); }

.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.45s cubic-bezier(0.25,0.8,0.25,1); }
.faq-i.active .faq-a { max-height: 260px; }
.faq-a-inner { padding: 0 28px 24px 72px; }
.faq-a-inner p { font-size: 14px; color: var(--text-sec); line-height: 2; font-family: 'Tajawal', sans-serif; }

/* ═══ SUBSCRIBE ═══ */
.sub-sec { padding: 80px 5%; background: var(--bg-base); position: relative; overflow: hidden; z-index: 1; }
.sub-box { max-width: 640px; margin: 0 auto; text-align: center; position: relative; z-index: 2; }
.sub-box h3 { font-size: 28px; font-weight: 900; margin-bottom: 12px; letter-spacing: -0.3px; color: var(--text); }
.sub-box p { font-size: 14.5px; color: var(--text-sec); margin-bottom: 32px; font-family: 'Tajawal', sans-serif; line-height: 1.9; }
.sub-form { display: flex; gap: 10px; max-width: 460px; margin: 0 auto; }
.sub-form input {
    flex: 1; padding: 14px 18px; border: 1px solid var(--border); border-radius: 12px;
    font-size: 14px; font-family: 'Cairo', sans-serif; outline: 0;
    background: var(--bg-section); color: var(--text); transition: all 0.25s;
}
.sub-form input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(27,191,163,0.08); }
.sub-form input::placeholder { color: var(--text-muted); }
.sub-form button {
    background: var(--brand); color: #fff; border: none; padding: 14px 28px; border-radius: 12px;
    font-size: 14px; font-weight: 700; font-family: 'Cairo', sans-serif; cursor: pointer;
    white-space: nowrap; transition: all 0.3s; box-shadow: 0 4px 16px rgba(27,191,163,0.2);
}
.sub-form button:hover { background: var(--brand-dark); transform: translateY(-2px); box-shadow: 0 8px 28px rgba(27,191,163,0.3); }

/* ═══ FOOTER (kept dark for contrast) ═══ */
.footer { background: var(--footer-bg); color: var(--footer-text); padding: 0; position: relative; overflow: hidden; z-index: 1; }
.footer::before { content: ''; position: absolute; top: 0; right: 0; left: 0; height: 1px; background: linear-gradient(90deg, transparent 10%, rgba(27,191,163,0.35) 50%, transparent 90%); }

.footer-cta-strip { padding: 48px 5%; text-align: center; position: relative; border-bottom: 1px solid rgba(255,255,255,0.05); }
.footer-cta-strip::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 100% at 50% 0%, rgba(27,191,163,0.06) 0%, transparent 70%); pointer-events: none; }
.footer-cta-inner { max-width: 600px; margin: 0 auto; position: relative; z-index: 2; }
.footer-logo { width: 72px; height: 72px; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; }
.footer-logo img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 16px rgba(27,191,163,0.5)) drop-shadow(0 0 40px rgba(27,191,163,0.15)); }
.footer-cta-strip h3 { font-size: 24px; font-weight: 800; color: #E8F0EE; margin-bottom: 8px; }
.footer-cta-strip p { font-size: 14px; color: var(--footer-text); margin-bottom: 24px; font-family: 'Tajawal', sans-serif; }
.footer-cta-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--brand); color: #fff; padding: 13px 36px; border-radius: 12px; font-size: 15px; font-weight: 700; text-decoration: none; transition: all 0.3s; box-shadow: 0 4px 20px rgba(27,191,163,0.3); }
.footer-cta-btn:hover { background: var(--brand-dark); transform: translateY(-2px); box-shadow: 0 8px 32px rgba(27,191,163,0.4); }

.ft-main { padding: 50px 5% 40px; }
.ft-grid { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: 2.2fr 1fr 1fr 1.5fr; gap: 40px; }
.ft-brand-col { display: flex; flex-direction: column; gap: 16px; }
.ft-brand-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.ft-brand-logo-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; }
.ft-brand-logo-icon img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 10px rgba(27,191,163,0.4)); }
.ft-brand-name { font-size: 20px; font-weight: 800; color: #E8F0EE; }
.ft-brand-name span { color: var(--brand); }
.ft-brand-col p { font-size: 13px; line-height: 1.95; color: var(--footer-text-muted); font-family: 'Tajawal', sans-serif; }

/* ═══ SOCIAL MEDIA ICONS ═══ */
.ft-socials-row { display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.ft-soc {
    width: 42px; height: 42px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    text-decoration: none; transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative; overflow: hidden;
    background: rgba(27,191,163,0.06); border: 1px solid rgba(27,191,163,0.15);
    color: var(--brand);
}
.ft-soc svg { width: 17px; height: 17px; fill: currentColor; transition: all 0.35s; position: relative; z-index: 1; }

/* Twitter / X */
.ft-soc--twitter { background: rgba(120,170,200,0.08); border-color: rgba(120,170,200,0.2); color: #A8C8DC; }
.ft-soc--twitter:hover { color: #fff; border-color: #1DA1F2; background: linear-gradient(135deg, #1DA1F2, #0D8BD9); box-shadow: 0 4px 20px rgba(29,161,242,0.35); transform: translateY(-3px); }

/* Instagram */
.ft-soc--instagram { background: rgba(225,130,170,0.08); border-color: rgba(225,130,170,0.2); color: #E8A0BC; }
.ft-soc--instagram svg { fill: none; stroke: currentColor; stroke-width: 2; }
.ft-soc--instagram svg circle[fill="currentColor"] { fill: currentColor; stroke: none; }
.ft-soc--instagram:hover { color: #fff; border-color: #DD2A7B; background: linear-gradient(135deg, #F58529, #DD2A7B, #8134AF); box-shadow: 0 4px 20px rgba(221,42,123,0.35); transform: translateY(-3px); }

/* Snapchat */
.ft-soc--snapchat { background: rgba(255,252,0,0.06); border-color: rgba(255,230,0,0.18); color: #F5E16B; }
.ft-soc--snapchat:hover { color: #1a1a1a; border-color: #FFFC00; background: linear-gradient(135deg, #FFFC00, #F5C518); box-shadow: 0 4px 20px rgba(255,252,0,0.3); transform: translateY(-3px); }

/* YouTube */
.ft-soc--youtube { background: rgba(255,80,80,0.08); border-color: rgba(255,80,80,0.2); color: #F2847A; }
.ft-soc--youtube:hover { color: #fff; border-color: #FF0000; background: linear-gradient(135deg, #FF0000, #CC0000); box-shadow: 0 4px 20px rgba(255,0,0,0.35); transform: translateY(-3px); }

/* TikTok */
.ft-soc--tiktok { background: rgba(180,180,180,0.08); border-color: rgba(180,180,180,0.2); color: #B0C4C0; }
.ft-soc--tiktok:hover { color: #fff; border-color: #69C9D0; background: linear-gradient(135deg, #010101, #25F4EE, #FE2C55); box-shadow: 0 4px 20px rgba(37,244,238,0.3); transform: translateY(-3px); }

/* Facebook */
.ft-soc--facebook { background: rgba(66,103,178,0.08); border-color: rgba(66,103,178,0.2); color: #8EAED4; }
.ft-soc--facebook:hover { color: #fff; border-color: #1877F2; background: linear-gradient(135deg, #1877F2, #0D65D9); box-shadow: 0 4px 20px rgba(24,119,242,0.35); transform: translateY(-3px); }

.footer h5 { font-size: 14px; font-weight: 800; color: #E8F0EE; margin-bottom: 20px; position: relative; padding-bottom: 10px; }
.footer h5::after { content: ''; position: absolute; bottom: 0; right: 0; width: 24px; height: 2px; background: var(--brand); border-radius: 1px; }
.ft-links a { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--footer-text-muted); text-decoration: none; padding: 7px 0; transition: all 0.25s; }
.ft-links a::before { content: ''; width: 0; height: 1.5px; background: var(--brand); border-radius: 1px; transition: width 0.3s; }
.ft-links a:hover { color: var(--brand); padding-right: 4px; }
.ft-links a:hover::before { width: 12px; }
.ft-contact a, .ft-contact span { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--footer-text-muted); text-decoration: none; margin-bottom: 14px; transition: color 0.2s; }
.ft-contact a:hover { color: var(--brand); }
.ft-contact-ic {
    width: 32px; height: 32px; min-width: 32px;
    background: rgba(27,191,163,0.08); border: 1px solid rgba(27,191,163,0.15);
    border-radius: 8px; display: flex; align-items: center; justify-content: center; transition: all 0.3s;
}
.ft-contact a:hover .ft-contact-ic { background: rgba(27,191,163,0.15); border-color: rgba(27,191,163,0.3); }
.ft-contact-ic svg { width: 14px; height: 14px; stroke: var(--brand); fill: none; stroke-width: 1.8; }

.ft-bottom-bar { border-top: 1px solid rgba(255,255,255,0.05); padding: 20px 5%; }
.ft-bottom { max-width: 1120px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; }
.ft-bottom p { font-size: 12px; color: var(--footer-text-muted); opacity: 0.6; }
.ft-bottom-links { display: flex; gap: 20px; }
.ft-bottom-links a { font-size: 12px; color: var(--footer-text-muted); text-decoration: none; transition: color 0.2s; }
.ft-bottom-links a:hover { color: var(--brand); }

/* ═══ FLOATING BUTTONS ═══ */
.floating-btns { position: fixed; bottom: 24px; left: 24px; z-index: 90; display: flex; flex-direction: column; gap: 12px; }
.float-btn {
    width: 52px; height: 52px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: none; cursor: pointer; transition: all 0.3s;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1); text-decoration: none;
}
.float-btn.whatsapp { background: #25d366; color: #fff; }
.float-btn.phone-call { background: var(--brand); color: #fff; }
.float-btn.scroll-top { background: #fff; color: var(--text); border: 1px solid var(--border); }
.float-btn:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.15); }

/* ═══ ANIMATIONS ═══ */
.fade-up { opacity: 0; transform: translateY(30px); transition: all 0.8s cubic-bezier(0.25,0.8,0.25,1); }
.fade-up.visible { opacity: 1; transform: translateY(0); }

/* ═══ RESPONSIVE ═══ */
@media(max-width:1024px) {
    .about-inner, .reg-inner, .req-inner { flex-direction: column; }
    .about-img-block, .reg-vis, .req-vis { flex: none; width: 100%; }
    .svc-grid, .fleet-grid { grid-template-columns: repeat(2,1fr); }
    .ft-grid { grid-template-columns: 1fr 1fr; }
    .nav-links { gap: 2px; }
    .nav-links a { font-size: 12.5px; padding: 7px 10px; }
}
@media(max-width:768px) {
    .nav-links { display: none; }
    .nav-cta-wrap { display: none; }
    .hamburger { display: flex; }
    .navbar { top: 10px; right: 4%; left: 4%; }
    .hero { height: 80vh; }
    .hero-content { padding-bottom: 80px; }
    .svc-grid, .fleet-grid { grid-template-columns: 1fr; }
    .ft-grid { grid-template-columns: 1fr; }
    .sub-form { flex-direction: column; }
    .ft-bottom { flex-direction: column; gap: 14px; text-align: center; }
    .ft-bottom-links { justify-content: center; }
    .reg-form, .req-form { padding: 32px 24px; border-radius: 20px; margin: 0 -2%; width: 104%; }
    .reg-form h4, .req-form h4 { font-size: 18px; text-align: center; }
    .ff input, .ff select { padding: 16px 18px; font-size: 15px; }
    .btn-b { padding: 16px; font-size: 16px; border-radius: 14px; }
    .f-note { font-size: 13px; }
    .faq-a-inner { padding-left: 28px; }
    .faq-num { display: none; }
    .sh-title { font-size: 26px; }
    .about-img-block::before { display: none; }
    .footer-cta-strip h3 { font-size: 20px; }
    .floating-btns { bottom: 16px; left: 16px; }
    .float-btn { width: 46px; height: 46px; }
    .ft-socials-row { justify-content: center; }
}