/* =========================
   Base
========================= */
:root {
    --navy: #0b2559;
    --navy-dark: #061735;
    --blue: #0f63d8;
    --gold: #c9a45c;
    --text: #111827;
    --muted: #6b7280;
    --light: #f5f7fb;
    --white: #ffffff;
    --border: #e5e7eb;
    --shadow: 0 18px 45px rgba(15, 35, 75, 0.12);
    --radius: 18px;
}

body {
    font-family: "Inter", "IBM Plex Sans Arabic", sans-serif;
    color: var(--text);
    background: var(--white);
    line-height: 1.6;
    font-weight: 400;
    margin: 0
}

html[dir="rtl"] body {
    font-family: "IBM Plex Sans Arabic", "Inter", sans-serif;
}

html,
body {
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    display: block;
}

.container {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}

.section {
    padding: 80px 0;
}

.section-kicker,
.eyebrow {
    display: inline-block;
    color: var(--navy);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 10px;
}

.section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 30px;
}

.section-head h2,
.why-intro h2,
.services-content h2,
.contact-info h2 {
    color: var(--navy-dark);
    font-size: 34px;
    line-height: 1.2;
}

.primary-btn,
.secondary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 24px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 700;
    transition: 0.25s ease;
}

.primary-btn {
    background: var(--navy);
    color: var(--white);
}

.primary-btn:hover {
    background: var(--blue);
}

.secondary-btn {
    background: var(--white);
    color: var(--navy);
    border: 1px solid var(--navy);
}

.secondary-btn:hover {
    background: var(--navy);
    color: var(--white);
}


/* =========================
   Header - Concept A Luxury
========================= */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: #f5f5f5;
    border-bottom: 1px solid rgba(229, 231, 235, 0.9);
}

.header-inner {
    height: 100px;
    display: grid;
    grid-template-columns: 230px 1fr auto;
    align-items: center;
    gap: 28px;
}

.brand-logo {
    display: flex;
    align-items: center;
    gap: 12px;
}

.brand-mark {
    width: 46px;
    height: 46px;
    border-radius: 4px;
    color: var(--navy);
    background: transparent;
    font-size: 24px;
    font-weight: 900;
    letter-spacing: -2px;
}

.brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.brand-name {
    color: var(--navy);
    font-size: 18px;
    font-weight: 800;
}

.brand-text small {
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.main-nav {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
}

.main-nav a {
    color: #111827;
    font-size: 16px;
    font-weight: 500;
    transition: 0.25s ease;
}

.main-nav a:hover {
    color: var(--navy);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.language-switch {
    height: 44px;
    padding: 0 15px;
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 999px;
    color: var(--navy-dark);
    cursor: pointer;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.header-btn {
    height: 46px;
    min-height: 46px;
    border-radius: 4px;
    padding: 0 24px;
    font-size: 13px;
}

.menu-toggle {
    display: none;
    width: 44px;
    height: 44px;
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 4px;
    cursor: pointer;
}

.menu-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--navy);
    margin: 5px auto;
}

.nav-dropdown {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
}

.nav-dropdown > a {
    position: relative;
    color: #111827;
    font-size: 16px;
    font-weight: 500;
    transition: 0.25s ease;
    padding: 30px 0;
}

.nav-dropdown > a::after,
.main-nav > a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 22px;
    width: 0;
    height: 2px;
    background: var(--navy);
    transition: 0.3s ease;
}

.nav-dropdown:hover > a::after,
.main-nav > a:hover::after {
    width: 100%;
}

.nav-dropdown:hover > a {
    color: var(--navy);
}

.sub-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    min-width: 260px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(229, 231, 235, 0.95);
    border-radius: 18px;
    box-shadow: 0 28px 70px rgba(6, 23, 53, 0.16);
    transform: translateX(-50%) translateY(12px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: 0.28s ease;
}

.nav-dropdown:hover .sub-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.sub-menu::before {
    content: "";
    position: absolute;
    top: -14px;
    left: 0;
    width: 100%;
    height: 14px;
}

.sub-menu a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 14px;
    border-radius: 12px;
    color: var(--navy-dark);
    font-size: 13px;
    font-weight: 500;
    transition: 0.25s ease;
}

.sub-menu a::after {
    content: "→";
    opacity: 0;
    transform: translateX(-8px);
    transition: 0.25s ease;
    color: var(--blue);
}

.sub-menu a:hover {
    background: linear-gradient(135deg, #f5f7fb, #ffffff);
    color: var(--blue);
    padding-inline-start: 18px;
}

.sub-menu a:hover::after {
    opacity: 1;
    transform: translateX(0);
}

html[dir="rtl"] .sub-menu a::after {
    content: "←";
}
html[dir="rtl"]  .section-kicker,
.eyebrow {
    font-size: 18px;
}

.main-nav > a,
.nav-dropdown > a {
    position: relative;
}

.main-nav > a {
    padding: 30px 0;
}

.main-nav {
    gap: 28px;
}

.main-nav > a:hover,
.nav-dropdown > a:hover {
    transform: translateY(-1px);
}

.sub-menu a:nth-child(1) { transition-delay: 0.03s; }
.sub-menu a:nth-child(2) { transition-delay: 0.06s; }
.sub-menu a:nth-child(3) { transition-delay: 0.09s; }
.sub-menu a:nth-child(4) { transition-delay: 0.12s; }

/* =========================
   Mobile Menu
========================= */
/* =========================
   Mobile Menu - Luxury
========================= */
.mobile-menu {
    position: fixed;
    top: 14px;
    right: 14px;
    width: min(390px, calc(100vw - 28px));
    height: calc(100vh - 28px);
    z-index: 3000;
    background: #f5f5f5;
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    border: 1px solid rgba(229, 231, 235, 0.9);
    border-radius: 26px;
    box-shadow: 0 30px 90px rgba(6, 23, 53, 0.22);
    padding: 22px;
    transform: translateX(calc(100% + 28px));
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: 0.35s cubic-bezier(.22,.61,.36,1);
    overflow-y: auto;
}

.mobile-menu.active {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

html[dir="rtl"] .mobile-menu {
    right: auto;
    left: 14px;
    transform: translateX(calc(-100% - 28px));
}

html[dir="rtl"] .mobile-menu.active {
    transform: translateX(0);
}

.mobile-menu-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--border);
}

.mobile-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mobile-brand .brand-mark {
    width: 44px;
    height: 44px;
}

.mobile-brand span:last-child {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.mobile-brand strong {
    color: var(--navy);
    font-size: 17px;
    font-weight: 900;
}

.mobile-brand small {
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.mobile-close {
    width: 42px;
    height: 42px;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: #fff;
    color: var(--navy-dark);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

.mobile-nav {
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mobile-nav > a,
.mobile-accordion {
    width: 100%;
    min-height: 50px;
    padding: 0 4px;
    border: 0;
    background: transparent;
    color: var(--navy-dark);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 22px;
    font-weight: 800;
    cursor: pointer;
    text-align: inherit;
}

.mobile-nav > a::after {
    content: "→";
    color: var(--muted);
    font-size: 18px;
}

html[dir="rtl"] .mobile-nav > a::after {
    content: "←";
}

.mobile-accordion b {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--light);
    display: grid;
    place-items: center;
    color: var(--navy);
    font-size: 18px;
    transition: 0.25s ease;
}

.mobile-accordion.active b {
    transform: rotate(45deg);
    background: var(--navy);
    color: #fff;
}

.mobile-sub {
    display: none;
    padding: 4px 0 10px 18px;
}

html[dir="rtl"] .mobile-sub {
    padding: 4px 18px 10px 0;
}

.mobile-sub.active {
    display: block;
}

.mobile-sub a {
    display: block;
    padding: 9px 0;
    color: var(--muted);
    font-size: 15px;
    font-weight: 700;
}

.mobile-sub a:hover {
    color: var(--blue);
}

.mobile-menu-bottom {
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid var(--border);
    display: grid;
    gap: 12px;
}

.mobile-lang {
    width: 100%;
    height: 48px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #fff;
    color: var(--navy);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 900;
    cursor: pointer;
}

.mobile-test-drive {
    height: 54px;
    border-radius: 999px;
    background: var(--navy);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 900;
    box-shadow: 0 18px 38px rgba(11, 37, 89, 0.22);
}

.mobile-overlay {
    position: fixed;
    inset: 0;
    background: rgba(6, 23, 53, 0.45);
    z-index: 2500;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: 0.25s ease;
}

.mobile-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


/* Dynamic Brands Mega Menu */
.nav-mega-dropdown{position:static}
.brands-mega-menu{position:fixed;top:80px;left:50%;z-index:1200;width:min(1180px,calc(100vw - 44px));padding-top:12px;opacity:0;visibility:hidden;pointer-events:none;transform:translateX(-50%) translateY(10px);transition:.22s ease}
.nav-mega-dropdown:hover .brands-mega-menu,.nav-mega-dropdown:focus-within .brands-mega-menu{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.brands-mega-menu::before{content:"";position:absolute;top:0;left:0;width:100%;height:14px}
.brands-mega-shell{display:grid;grid-template-columns:245px minmax(0,1fr);min-height:430px;overflow:hidden;border:1px solid rgba(229,231,235,.96);border-radius:22px;background:rgba(255,255,255,.985);box-shadow:0 35px 90px rgba(6,23,53,.19)}
.brands-mega-rail{padding:28px 18px;border-inline-end:1px solid #edf0f4;background:linear-gradient(180deg,#f7f8fa 0%,#fff 100%)}
.brands-mega-eyebrow{display:block;padding:0 12px;margin-bottom:14px;color:#7b8493;font-size:10px;font-weight:900;letter-spacing:2px;text-transform:uppercase}
.brands-mega-tabs{display:grid;gap:5px}
.brands-mega-tab{width:100%;min-height:58px;display:grid;grid-template-columns:42px minmax(0,1fr) 18px;align-items:center;gap:10px;padding:8px 11px;border:0;border-radius:12px;background:transparent;color:#17263f;cursor:pointer;text-align:start;transition:.2s ease}
.brands-mega-tab:hover,.brands-mega-tab:focus-visible,.brands-mega-tab.is-active{background:#fff;color:var(--blue);box-shadow:0 8px 24px rgba(8,35,75,.07);transform:translateX(3px)}
html[dir="rtl"] .brands-mega-tab:hover,html[dir="rtl"] .brands-mega-tab:focus-visible,html[dir="rtl"] .brands-mega-tab.is-active{transform:translateX(-3px)}
.brands-mega-tab-logo{width:42px;height:42px;display:grid;place-items:center;overflow:hidden;border:1px solid #edf0f4;border-radius:9px;background:#fff}
.brands-mega-tab-logo img{width:82%;height:82%;object-fit:contain}
.brands-mega-tab>span:not(.brands-mega-tab-logo){overflow:hidden;font-size:14px;font-weight:800;text-overflow:ellipsis;white-space:nowrap}
.brands-mega-tab svg,.brands-mega-view-brand svg{width:16px;height:16px}
html[dir="rtl"] .brands-mega-tab svg,html[dir="rtl"] .brands-mega-view-brand svg{transform:scaleX(-1)}
.brands-mega-content{min-width:0;padding:28px 30px 30px}
.brands-mega-panel[hidden]{display:none!important}
.brands-mega-panel{animation:brandsMegaFade .2s ease both}
@keyframes brandsMegaFade{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
.brands-mega-panel-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:22px}
.brands-mega-panel-head>div>span{display:block;margin-bottom:4px;color:#8a94a3;font-size:10px;font-weight:900;letter-spacing:1.8px;text-transform:uppercase}
.brands-mega-panel-head h3{margin:0;color:var(--navy);font-size:26px;line-height:1.1}
.brands-mega-view-brand{display:inline-flex;align-items:center;gap:7px;color:var(--navy);font-size:12px;font-weight:800;white-space:nowrap}
.brands-mega-view-brand:hover{color:var(--blue)}
.brands-mega-vehicles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.brands-mega-vehicle{min-width:0;display:grid;gap:8px;padding:9px;border:1px solid #edf0f4;border-radius:14px;background:#fff;color:#17263f!important;transition:.22s ease}
.brands-mega-vehicle:hover{border-color:rgba(20,80,145,.2);box-shadow:0 13px 30px rgba(7,32,70,.09);transform:translateY(-3px)}
.brands-mega-vehicle-image{position:relative;display:block;overflow:hidden;aspect-ratio:16/9;border-radius:10px;background:linear-gradient(135deg,#f1f3f6,#fafbfc)}
.brands-mega-vehicle-image img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.brands-mega-vehicle:hover .brands-mega-vehicle-image img{transform:scale(1.035)}
.brands-mega-no-image{position:absolute;inset:0;background:linear-gradient(135deg,#eff2f6,#fafbfc)}
.brands-mega-vehicle strong{display:block;overflow:hidden;padding:0 3px 2px;font-size:12px;font-weight:800;line-height:1.35;text-overflow:ellipsis;white-space:nowrap}
.brands-mega-empty{display:grid;place-items:center;min-height:250px;border:1px dashed #dfe4ea;border-radius:15px;color:#86909e;font-size:13px}
html[dir="rtl"] .brands-mega-tab>span{font-family: 'IBM Plex Sans Arabic';}
/* Mobile */
.mobile-brands-mega{padding-bottom:14px}
.mobile-brands-all-link{margin-bottom:8px;color:var(--blue)!important;font-weight:900!important}
.mobile-brand-mega-group{border-top:1px solid rgba(15,35,65,.08)}
.mobile-brand-mega-toggle{width:100%;min-height:52px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:5px 0;border:0;background:transparent;color:var(--navy);cursor:pointer;text-align:inherit}
.mobile-brand-mega-name{min-width:0;display:flex;align-items:center;gap:10px}
.mobile-brand-mega-logo{width:38px;height:38px;display:grid;place-items:center;flex:0 0 38px;overflow:hidden;border:1px solid var(--border);border-radius:8px;background:#fff}
.mobile-brand-mega-logo img{width:82%;height:82%;object-fit:contain}
.mobile-brand-mega-name strong{overflow:hidden;font-size:15px;text-overflow:ellipsis;white-space:nowrap}
.mobile-brand-mega-toggle>b{width:28px;height:28px;display:grid;place-items:center;flex:0 0 28px;border-radius:50%;background:#eef1f5;font-size:16px;transition:.22s ease}
.mobile-brand-mega-toggle.is-active>b{transform:rotate(45deg);background:var(--navy);color:#fff}
.mobile-brand-mega-vehicles{display:none;padding:0 0 10px 48px}
html[dir="rtl"] .mobile-brand-mega-vehicles{padding:0 48px 10px 0}
.mobile-brand-mega-vehicles.is-active{display:grid}
.mobile-brand-mega-vehicles a{display:block;padding:7px 0;color:var(--muted);font-size:13px;font-weight:700}
.mobile-brand-mega-vehicles a:hover{color:var(--blue)}
.mobile-brand-page-link{color:var(--navy)!important;font-weight:900!important}

@media(max-width:1100px){.brands-mega-menu{display:none!important}}


html,
body {
    width: 100%;
    overflow-x: hidden !important;
}

/* =========================
   Hero - Premium Polish
========================= */
.hero {
    position: relative;
    min-height: 690px;
    overflow: hidden;
    background: #061735;
}

.hero-slider,
.hero-slide {
    height: 690px;
    position: relative;
}

.hero-slide {
    display: none;
    overflow: hidden;
}

.hero-slide.active {
    display: block;
}

.hero-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.06);
}

.hero-slide.active .hero-bg {
    animation: heroImageZoom 6s ease forwards;
}

.hero-shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(6, 23, 53, 0.88) 0%, rgba(6, 23, 53, 0.68) 42%, rgba(6, 23, 53, 0.10) 100%),
        linear-gradient(0deg, rgba(6, 23, 53, 0.35), rgba(6, 23, 53, 0.05));
}

html[dir="rtl"] .hero-shade {
    background:
        linear-gradient(-90deg, rgba(6, 23, 53, 0.88) 0%, rgba(6, 23, 53, 0.68) 42%, rgba(6, 23, 53, 0.10) 100%),
        linear-gradient(0deg, rgba(6, 23, 53, 0.35), rgba(6, 23, 53, 0.05));
}

.hero-content {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    z-index: 3;
}

.hero-text {
    max-width: 610px;
    color: #fff;
    padding-top: 18px;
}

.hero-text .eyebrow {
    color: rgba(255,255,255,0.78);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 3px;
    margin-bottom: 18px;
    display: inline-flex;
    align-items: center;
    gap: 13px;
}

.hero-text .eyebrow::before {
    content: "";
    width: 54px;
    height: 1px;
    background: rgba(255,255,255,0.55);
}

.hero-text h1 {
    color: #fff;
    font-size: clamp(46px, 6vw, 64px);
    line-height: 0.98;
    letter-spacing: -3px;
    font-weight: 900;
    margin-bottom: 22px;
    max-width: 680px;
}

.hero-text p {
    color: rgba(255,255,255,0.78);
    max-width: 520px;
    font-size: 17px;
    line-height: 1.8;
    margin-bottom: 32px;
}

.hero-buttons {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.hero .primary-btn,
.hero .secondary-btn {
    min-height: 52px;
    padding: 0 28px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 900;
}

.hero .primary-btn {
    background: #fff;
    color: #061735;
    box-shadow: 0 18px 35px rgba(0,0,0,0.18);
}

.hero .primary-btn:hover {
    background: var(--blue);
    color: #fff;
    transform: translateY(-2px);
}

.hero .secondary-btn {
    background: rgba(255,255,255,0.08);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.42);
}

.hero .secondary-btn:hover {
    background: rgba(255,255,255,0.16);
    color: #fff;
    transform: translateY(-2px);
}

/* text animation */
.hero-slide.active .eyebrow {
    animation: heroFadeUp 0.7s ease both;
}

.hero-slide.active h1 {
    animation: heroFadeUp 0.8s ease 0.12s both;
}

.hero-slide.active p {
    animation: heroFadeUp 0.8s ease 0.24s both;
}

.hero-slide.active .hero-buttons {
    animation: heroFadeUp 0.8s ease 0.36s both;
}

.hero-arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:62px;
    height:62px;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:0;

    border-radius:50%;
    border:1px solid rgba(255,255,255,.28);

    background:rgba(255,255,255,.12);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);

    color:#fff;
    cursor:pointer;
    transition:.3s;
    z-index:20;
}

.hero-arrow svg{
    width:24px;
    height:24px;
    display:block;
    flex-shrink:0;
}

.hero-arrow:hover{
    background:#fff;
    color:var(--navy);
    transform:translateY(-50%) scale(1.08);
    box-shadow:0 18px 45px rgba(0,0,0,.22);
}

.hero-arrow.prev{
    left:28px;
}

.hero-arrow.next{
    right:28px;
}

html[dir="rtl"] .hero-arrow.prev{
    left:auto;
    right:28px;
}

html[dir="rtl"] .hero-arrow.next{
    right:auto;
    left:28px;
}

/* dots */
.hero-dots {
    position: absolute;
    bottom: 34px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 12;
}

.hero-dots button {
    width: 42px;
    height: 4px;
    border: 0;
    border-radius: 20px;
    background: rgba(255,255,255,0.35);
    cursor: pointer;
    transition: 0.3s ease;
}

.hero-dots button.active {
    width: 74px;
    background: #fff;
}

/* small luxury label bottom */
.hero::after {
    content: "FORD  ·  MAZDA  ·  NIO  ·  FORD TRUCKS";
    position: absolute;
    left: 48px;
    bottom: 28px;
    z-index: 11;
    color: rgba(255,255,255,0.52);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 3px;
}

html[dir="rtl"] .hero::after {
    left: auto;
    right: 48px;
}

/* animations */
@keyframes heroFadeUp {
    from {
        opacity: 0;
        transform: translateY(26px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes heroImageZoom {
    from {
        transform: scale(1.08);
    }
    to {
        transform: scale(1);
    }
}

/* Responsive */
@media (max-width: 980px) {
    .hero,
    .hero-slider,
    .hero-slide {
        height: 640px;
        min-height: 640px;
    }

    .hero-text {
        max-width: 92%;
    }

    .hero-text h1 {
        font-size: clamp(40px, 12vw, 62px);
        letter-spacing: -2px;
    }

    .hero-text p {
        font-size: 15px;
        max-width: 430px;
    }

    .hero-arrow {
        display: none;
    }

    .hero::after {
        left: 22px;
        right: 22px;
        bottom: 64px;
        font-size: 9px;
        letter-spacing: 2px;
    }

    html[dir="rtl"] .hero::after {
        left: 22px;
        right: 22px;
    }

    .hero-dots {
        bottom: 28px;
    }
    .header-inner img {
      width:120px !important
    }
}

.hero-arrow.prev {
    left: 28px;
    right: auto;
}

.hero-arrow.next {
    right: 28px;
    left: auto;
}

html[dir="rtl"] .hero-arrow.prev {
    left: 28px;
    right: auto;
}

html[dir="rtl"] .hero-arrow.next {
    right: 28px;
    left: auto;
}

/*html[dir="rtl"] .hero-arrow.prev svg,
html[dir="rtl"] .hero-arrow.next svg {
    transform: rotate(180deg);
}*/

.hero-arrow .icon-rtl {
    display: none;
}

html[dir="rtl"] .hero-arrow .icon-ltr {
    display: none;
}

html[dir="rtl"] .hero-arrow .icon-rtl {
    display: block;
}

.hero-arrow svg {
    width: 24px;
    height: 24px;
}

html[dir="rtl"] .nav-dropdown > a{
      font-size: 14px;
}
html[dir="rtl"] .main-nav a{
  font-size: 16px;
}
html[dir="rtl"] .hero-text .eyebrow{
  font-size: 18px;
}
html[dir="rtl"] .hero-text p {
  font-size: 22px;
}
/* =========================================================
   Hero Media
========================================================= */

.hero-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.hero-media picture {
    display: block;
    width: 100%;
    height: 100%;
}

.hero-media .hero-bg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* =========================================================
   Hero Video
========================================================= */

.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;

    /*
     * Prevent browser video UI.
     */
    pointer-events: none;

    background: #061735;
}


/*
 * Do not apply image zoom animation to video.
 */
.hero-slide-video.active .hero-video {
    animation: none;
    transform: none;
}


/*
 * Keep image animation only for image slides.
 */
.hero-slide-image.active .hero-bg {
    animation: heroImageZoom 6s ease forwards;
}


/* =========================================================
   Video fallback
========================================================= */

.hero-slide-video .hero-media {
    background: #061735;
}


/* =========================================================
   Mobile
========================================================= */

@media (max-width: 768px) {

    .hero-video {
        object-position: center center;
    }

}

/* =========================
   Brands Strip - Final Polish
========================= */
.brands-strip {
    position: relative;
    z-index: 20;
    overflow: hidden;
    background:
        radial-gradient(circle at 15% 12%, rgba(15, 99, 216, 0.055), transparent 30%),
        radial-gradient(circle at 88% 76%, rgba(11, 37, 89, 0.05), transparent 34%),
        linear-gradient(180deg, #ffffff 0%, #f6f8fc 100%);
    padding: 76px 0 82px;
    border-bottom: 1px solid rgba(229, 231, 235, 0.9);
}

.brands-strip::before {
    /*content: "BRANDS";
    position: absolute;
    inset-inline-end: -28px;
    top: 38px;
    color: rgba(6, 23, 53, 0.035);
    font-size: clamp(80px, 13vw, 160px);
    font-weight: 900;
    letter-spacing: -7px;
    line-height: 1;
    pointer-events: none;
    right: 35px;*/
}

.brands-head {
    position: relative;
    z-index: 2;
    max-width: 720px;
    margin: 0 auto 38px;
    text-align: center;
}

.brands-head span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    color: var(--navy);
    font-size: 48px;
    font-weight: 900;
    text-transform: capitalize;
    /*letter-spacing: 2.8px;*/
    margin-bottom: 14px;
}

.brands-head span::before,
.brands-head span::after {
    content: "";
    width: 42px;
    height: 1px;
    background: rgba(11, 37, 89, 0.28);
}

.brands-head h2 {
    color: var(--navy-dark);
    font-size: clamp(32px, 3.7vw, 48px);
    line-height: 1.08;
    font-weight: 900;
    letter-spacing: -1.7px;
    margin-bottom: 14px;
}

.brands-head p {
    color: var(--muted);
    font-size: 16px;
    line-height: 1.8;
}

.brands-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.brand-card {
    position: relative;
    min-height: 232px;
    padding: 26px 22px 22px;
    background: rgba(255,255,255,0.96);
    border: 1px solid rgba(229, 231, 235, 0.95);
    border-radius: 26px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    overflow: hidden;
    box-shadow: 0 20px 52px rgba(6, 23, 53, 0.075);
    transition: 0.34s ease;
}

.brand-card::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: 0.34s ease;
}

.brand-card::after {
    content: "";
    position: absolute;
    left: 26px;
    right: 26px;
    top: 0;
    height: 4px;
    border-radius: 0 0 20px 20px;
    background: var(--navy);
    transform: scaleX(0.28);
    opacity: 0.75;
    transition: 0.34s ease;
}

.brand-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 32px 78px rgba(6, 23, 53, 0.13);
    border-color: rgba(15, 99, 216, 0.22);
}

.brand-card:hover::before {
    opacity: 1;
}

.brand-card:hover::after {
    transform: scaleX(1);
    opacity: 1;
}

.brand-logo-img {
    position: relative;
    z-index: 2;
    width: 96px;
    height: 96px;
    border-radius: 28px;
    background: #f7f9fd;
    border: 1px solid rgba(229, 231, 235, 0.95);
    display: grid;
    place-items: center;
    padding: 15px;
    margin-bottom: 20px;
    transition: 0.34s ease;
}

.brand-card:hover .brand-logo-img {
    background: #fff;
    transform: translateY(-3px) scale(1.06);
    box-shadow: 0 18px 38px rgba(6, 23, 53, 0.08);
}

.brand-logo-img img {
    max-height: 80px;
    max-width: 100%;
    object-fit: contain;
    transition: 0.34s ease;
}

.brand-card:hover .brand-logo-img img {
    transform: scale(1.06);
}

.brand-card h3 {
    position: relative;
    z-index: 2;
    color: var(--navy-dark);
    font-size: 24px;
    font-weight: 900;
    line-height: 1.12;
    margin-bottom: 7px;
    letter-spacing: -0.6px;
}

.brand-card p {
    position: relative;
    z-index: 2;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.55;
    margin-bottom: 18px;
    min-height: 22px;
}

.brand-action {
    position: relative;
    z-index: 2;
    margin-top: auto;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.brand-action span {
    color: var(--navy);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.35px;
}

.brand-action b {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--navy);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 17px;
    transition: 0.34s ease;
}

.brand-card:hover .brand-action b {
    background: var(--blue);
    transform: translateX(5px);
}

html[dir="rtl"] .brand-action b {
    transform: rotate(180deg);
}

html[dir="rtl"] .brand-card:hover .brand-action b {
    transform: translateX(-5px) rotate(180deg);
}

html[dir="rtl"] .brands-head h2{
  font-size: clamp(32px, 3.7vw, 38px);
}

/* Brand accents */
.brand-ford::before {
    background: linear-gradient(135deg, rgba(0, 48, 135, 0.11), transparent 66%);
}

.brand-mazda::before {
    background: linear-gradient(135deg, rgba(75, 85, 99, 0.11), transparent 66%);
}

.brand-nio::before {
    background: linear-gradient(135deg, rgba(0, 168, 255, 0.13), transparent 66%);
}

.brand-trucks::before {
    background: linear-gradient(135deg, rgba(238, 112, 36, 0.14), transparent 66%);
}

.brand-ford::after {
    background: #003087;
}

.brand-mazda::after {
    background: #4b5563;
}

.brand-nio::after {
    background: #00a8ff;
}

.brand-trucks::after {
    background: #ee7024;
}

/* Subtle entrance polish */
.brand-card {
    animation: brandFadeUp 0.75s ease both;
}

.brand-card:nth-child(1) { animation-delay: 0.05s; }
.brand-card:nth-child(2) { animation-delay: 0.13s; }
.brand-card:nth-child(3) { animation-delay: 0.21s; }
.brand-card:nth-child(4) { animation-delay: 0.29s; }

@keyframes brandFadeUp {
    from {
        opacity: 0;
        transform: translateY(22px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive */
@media (max-width: 1100px) {
    .brands-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .brand-card {
        min-height: 224px;
    }
}

@media (max-width: 640px) {
    .brands-strip {
        padding: 58px 0 62px;
    }

    .brands-head {
        margin-bottom: 28px;
    }

    .brands-head h2 {
        font-size: 30px;
        letter-spacing: -1px;
    }

    .brands-head p {
        font-size: 14px;
    }

    .brands-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .brand-card {
        min-height: 215px;
        border-radius: 22px;
    }
}


/* =========================
   Vehicles - Final Showroom Polish
========================= */
.vehicles-section {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 12% 10%, rgba(15, 99, 216, 0.08), transparent 34%),
        radial-gradient(circle at 92% 85%, rgba(11, 37, 89, 0.06), transparent 34%),
        linear-gradient(180deg, #f6f8fc 0%, #ffffff 100%);
    padding: 96px 0;
}

.vehicles-section::before {
    /*content: "SHOWROOM";
    position: absolute;
    inset-inline-end: -25px;
    top: 58px;
    color: rgba(6, 23, 53, 0.035);
    font-size: clamp(80px, 9vw, 180px);
    font-weight: 900;
    letter-spacing: -7px;
    line-height: 1;
    pointer-events: none;
    right: 35px;*/
}

.vehicles-head {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 34px;
}

.vehicles-head > div {
    max-width: 720px;
}

.vehicles-head h2 {
    color: var(--navy-dark);
    font-size: clamp(34px, 4vw, 56px);
    line-height: 1.05;
    font-weight: 900;
    letter-spacing: -2px;
    margin-bottom: 14px;
    margin-top: 25px;
}

.vehicles-head p {
    color: var(--muted);
    max-width: 620px;
    font-size: 16px;
    line-height: 1.8;
}

.view-link {
    min-height: 46px;
    padding: 0 20px;
    border: 1px solid rgba(11, 37, 89, 0.18);
    border-radius: 999px;
    color: var(--navy);
    background: #fff;
    font-size: 13px;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    transition: 0.25s ease;
}

.view-link:hover {
    background: var(--navy);
    color: #fff;
    transform: translateY(-2px);
}

.vehicles-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
}

.vehicle-card {
    position: relative;
    min-height: 350px;
    border-radius: 30px;
    overflow: hidden;
    background: #061735;
    box-shadow: 0 26px 70px rgba(6, 23, 53, 0.14);
    border: 1px solid rgba(255,255,255,0.08);
    display: flex;
    align-items: flex-end;
    transition: 0.35s ease;
}

.vehicle-card:hover {
    transform: translateY(-9px);
    box-shadow: 0 38px 95px rgba(6, 23, 53, 0.20);
}

.vehicle-img {
    position: absolute;
    inset: 0;
    height: 100%;
    overflow: hidden;
    background: #0b2559;
}

.vehicle-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.55s ease;
}

.vehicle-card:hover .vehicle-img img {
    transform: scale(1.07);
}

.vehicle-img::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(0deg, rgba(6, 23, 53, 0.92) 0%, rgba(6, 23, 53, 0.62) 42%, rgba(6, 23, 53, 0.08) 100%),
        linear-gradient(90deg, rgba(6, 23, 53, 0.35), transparent 55%);
    transition: 0.35s ease;
}

.vehicle-card:hover .vehicle-img::after {
    background:
        linear-gradient(0deg, rgba(6, 23, 53, 0.90) 0%, rgba(6, 23, 53, 0.48) 42%, rgba(6, 23, 53, 0.04) 100%),
        linear-gradient(90deg, rgba(6, 23, 53, 0.28), transparent 55%);
}

.vehicle-img > span {
    position: absolute;
    top: 20px;
    inset-inline-start: 20px;
    z-index: 3;
    background: rgba(255,255,255,0.94);
    color: var(--navy);
    border-radius: 999px;
    padding: 8px 15px;
    font-size: 12px;
    font-weight: 900;
    box-shadow: 0 12px 25px rgba(6, 23, 53, 0.14);
}

.vehicle-info {
    position: relative;
    z-index: 3;
    width: 100%;
    padding: 28px;
    color: #fff;
}

.vehicle-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 13px;
}

.vehicle-meta span {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.14);
    color: rgba(255,255,255,0.82);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.3px;
}

.vehicle-info h3 {
    color: #fff;
    font-size: clamp(26px, 2.6vw, 38px);
    line-height: 1.05;
    font-weight: 900;
    letter-spacing: -1px;
    margin-bottom: 11px;
}

.vehicle-info p {
    color: rgba(255,255,255,0.76);
    font-size: 14px;
    line-height: 1.75;
    max-width: 470px;
    margin-bottom: 22px;
}

.vehicle-bottom {
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,0.18);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.vehicle-bottom strong {
    color: #fff;
    font-size: 15px;
    font-weight: 900;
}

.vehicle-bottom a {
    min-height: 40px;
    padding: 0 17px;
    border-radius: 999px;
    background: #fff;
    color: var(--navy);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 900;
    transition: 0.25s ease;
    white-space: nowrap;
}

.vehicle-bottom a:hover {
    background: var(--blue);
    color: #fff;
    transform: translateY(-2px);
}

/* RTL */
html[dir="rtl"] .vehicle-img::after {
    background:
        linear-gradient(0deg, rgba(6, 23, 53, 0.92) 0%, rgba(6, 23, 53, 0.62) 42%, rgba(6, 23, 53, 0.08) 100%),
        linear-gradient(-90deg, rgba(6, 23, 53, 0.35), transparent 55%);
}

html[dir="rtl"] .vehicles-head h2{
      font-size: clamp(34px, 4vw, 48px);
}
/* Responsive */
@media (max-width: 1000px) {
    .vehicles-grid {
        grid-template-columns: 1fr;
    }

    .vehicle-card {
        min-height: 360px;
    }
}

@media (max-width: 760px) {
    .vehicles-section {
        padding: 72px 0;
    }

    .vehicles-head {
        display: block;
    }

    .view-link {
        margin-top: 20px;
    }

    .vehicle-card {
        min-height: 390px;
        border-radius: 24px;
    }

    .vehicle-info {
        padding: 24px;
    }

    .vehicle-bottom {
        align-items: flex-start;
        flex-direction: column;
    }
}

html[dir="rtl"] .vehicle-bottom a {
    direction: rtl;
    unicode-bidi: isolate;
    transform: none !important;
}

html[dir="rtl"] .vehicle-bottom a:hover {
    transform: translateY(-2px) !important;
}

/* =========================
   Why Choose - Premium Trust
========================= */
.why-section {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(135deg, #061735 0%, #0b2559 58%, #123b7c 100%);
    padding: 96px 0;
    color: #fff;
}

.why-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 18% 20%, rgba(255,255,255,0.13), transparent 28%),
        radial-gradient(circle at 90% 80%, rgba(15,99,216,0.35), transparent 32%);
    pointer-events: none;
}

.why-section::after {
    /*content: "TRUST";
    position: absolute;
    inset-inline-end: -30px;
    bottom: -28px;
    font-size: clamp(90px, 12vw, 240px);
    font-weight: 900;
    letter-spacing: -10px;
    color: rgba(255,255,255,0.035);
    line-height: 1;
    pointer-events: none;
    right: 35px;*/
}

.why-layout {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 0.9fr 1.35fr;
    gap: 54px;
    align-items: center;
}

.why-intro .section-kicker {
    color: rgba(255,255,255,0.72);
}

.why-intro h2 {
    color: #fff;
    font-size: clamp(36px, 4.5vw, 62px);
    line-height: 1.04;
    font-weight: 900;
    letter-spacing: -2px;
    margin-bottom: 20px;
}

.why-intro p {
    color: rgba(255,255,255,0.74);
    font-size: 16px;
    line-height: 1.9;
    max-width: 520px;
}

.why-stats {
    display: grid;
    grid-template-columns: repeat(1, minmax(120px, 1fr));
    gap: 14px;
    margin-top: 34px;
    max-width: 420px;
}

.why-stats div {
    padding: 22px;
    border-radius: 22px;
    background: rgba(255,255,255,0.09);
    border: 1px solid rgba(255,255,255,0.16);
    backdrop-filter: blur(14px);
}

.why-stats strong {
    display: block;
    color: #fff;
    font-size: 42px;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 8px;
}

.why-stats span {
    color: rgba(255,255,255,0.70);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.why-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.why-features article {
    position: relative;
    min-height: 220px;
    padding: 24px;
    border-radius: 24px;
    background: rgba(255,255,255,0.09);
    border: 1px solid rgba(255,255,255,0.15);
    backdrop-filter: blur(18px);
    overflow: hidden;
    transition: 0.3s ease;
}

.why-features article::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.13), transparent 62%);
    opacity: 0;
    transition: 0.3s ease;
}

.why-features article:hover {
    transform: translateY(-8px);
    background: rgba(255,255,255,0.13);
    border-color: rgba(255,255,255,0.28);
}

.why-features article:hover::before {
    opacity: 1;
}

.why-features i {
    position: relative;
    z-index: 2;
    width: 54px;
    height: 54px;
    border-radius: 18px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.16);
    display: grid;
    place-items: center;
    color: #fff;
    margin-bottom: 18px;
}

.why-features i svg {
    width: 29px;
    height: 29px;
}

.why-features h3 {
    position: relative;
    z-index: 2;
    color: #fff;
    font-size: 18px;
    font-weight: 900;
    margin-bottom: 10px;
    letter-spacing: -0.3px;
}

.why-features p {
    position: relative;
    z-index: 2;
    color: rgba(255,255,255,0.70);
    font-size: 13px;
    line-height: 1.75;
}

/* Responsive */
@media (max-width: 1100px) {
    .why-layout {
        grid-template-columns: 1fr;
    }

    .why-features {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .why-section {
        padding: 72px 0;
    }

    .why-features,
    .why-stats {
        grid-template-columns: 1fr;
    }

    .why-features article {
        min-height: auto;
    }
}
html[dir="rtl"] .why-intro h2{
  font-size: clamp(36px, 4.5vw, 50px);
  line-height: 1.5;
}
/* =========================
   Offers - Final Premium Polish
========================= */
.offers-band {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 10% 12%, rgba(15, 99, 216, 0.10), transparent 32%),
        radial-gradient(circle at 88% 84%, rgba(238, 112, 36, 0.08), transparent 30%),
        linear-gradient(180deg, #ffffff 0%, #f6f8fc 100%);
    padding: 100px 0;
    color: var(--navy-dark);
}

.offers-band::before {
  /*  content: "OFFERS";
    position: absolute;
    inset-inline-end: -25px;
    top: 38px;
    color: rgba(6, 23, 53, 0.04);
    font-size: clamp(90px, 9vw, 190px);
    font-weight: 900;
    letter-spacing: -7px;
    line-height: 1;
    pointer-events: none;
    right: 35px;*/
}

.offers-head {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 36px;
}

.offers-head > div {
    max-width: 760px;
}

.offers-head span {
    display: inline-block;
    color: var(--navy);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    margin-bottom: 12px;
}

.offers-head h2 {
    color: var(--navy-dark);
    font-size: clamp(34px, 4vw, 56px);
    line-height: 1.08;
    font-weight: 900;
    letter-spacing: -2px;
    margin-bottom: 14px;
}

.offers-head p {
    color: var(--muted);
    font-size: 16px;
    line-height: 1.8;
    max-width: 640px;
}

.offers-cta {
    min-height: 48px;
    padding: 0 22px;
    border-radius: 999px;
    background: var(--navy);
    color: #fff;
    font-size: 13px;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    transition: 0.25s ease;
}

.offers-cta:hover {
    background: var(--blue);
    transform: translateY(-2px);
}

.offers-layout {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.12fr 1fr;
    gap: 22px;
    align-items: stretch;
}

.offer-hero-card {
    position: relative;
    min-height: 470px;
    padding: 36px;
    border-radius: 34px;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(6, 23, 53, 0.92), rgba(11, 37, 89, 0.82));
    box-shadow: 0 32px 85px rgba(6, 23, 53, 0.18);
    display: flex;
    align-items: flex-end;
}

.offer-hero-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 78% 18%, rgba(255,255,255,0.18), transparent 28%),
        linear-gradient(0deg, rgba(6, 23, 53, 0.92), rgba(6, 23, 53, 0.08));
}

.offer-badge {
    position: absolute;
    top: 26px;
    inset-inline-start: 26px;
    z-index: 2;
    padding: 8px 15px;
    border-radius: 999px;
    background: rgba(255,255,255,0.16);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.20);
    backdrop-filter: blur(12px);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.8px;
}

.offer-hero-content {
    position: relative;
    z-index: 2;
    max-width: 540px;
    color: #fff;
}

.offer-hero-content strong {
    display: block;
    font-size: clamp(72px, 9vw, 106px);
    font-weight: 900;
    line-height: 0.85;
    letter-spacing: -5px;
    margin-bottom: 20px;
    margin-top:45px;
}

.offer-hero-content h3 {
    color: #fff;
    font-size: clamp(30px, 3.2vw, 46px);
    line-height: 1.05;
    font-weight: 900;
    letter-spacing: -1.5px;
    margin-bottom: 14px;
}

.offer-hero-content p {
    color: rgba(255,255,255,0.74);
    font-size: 15px;
    line-height: 1.8;
    margin-bottom: 24px;
}

.offer-hero-content a {
    min-height: 46px;
    padding: 0 20px;
    border-radius: 999px;
    background: #fff;
    color: var(--navy);
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    font-weight: 900;
    transition: 0.25s ease;
}

.offer-hero-content a:hover {
    background: var(--blue);
    color: #fff;
    transform: translateY(-2px);
}

.offer-small-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.offer-item {
    position: relative;
    min-height: 226px;
    padding: 26px;
    border-radius: 28px;
    background: rgba(255,255,255,0.96);
    border: 1px solid rgba(229, 231, 235, 0.95);
    box-shadow: 0 24px 65px rgba(6, 23, 53, 0.08);
    overflow: hidden;
    transition: 0.3s ease;
}

.offer-item::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(11,37,89,0.08), transparent 65%);
    opacity: 0;
    transition: 0.3s ease;
}

.offer-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 34px 85px rgba(6, 23, 53, 0.14);
    border-color: rgba(15, 99, 216, 0.22);
}

.offer-item:hover::before {
    opacity: 1;
}

.offer-item i {
    position: relative;
    z-index: 2;
    width: 52px;
    height: 52px;
    border-radius: 17px;
    background: #eef4ff;
    color: var(--navy);
    display: grid;
    place-items: center;
    margin-bottom: 18px;
}

.offer-item i svg {
    width: 27px;
    height: 27px;
}

.offer-item strong {
    position: relative;
    z-index: 2;
    display: block;
    color: var(--navy);
    font-size: 48px;
    font-weight: 900;
    line-height: 0.9;
    margin-bottom: 14px;
    letter-spacing: -2px;
}

.offer-item h3 {
    position: relative;
    z-index: 2;
    color: var(--navy-dark);
    font-size: 18px;
    font-weight: 900;
    margin-bottom: 8px;
}

.offer-item p {
    position: relative;
    z-index: 2;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.7;
}

.offer-wide {
    grid-column: 1 / 3;
    min-height: 190px;
}

html[dir="rtl"] .offer-item strong {
    letter-spacing: 0;
}

/* Responsive */
@media (max-width: 1000px) {
    .offers-head {
        display: block;
    }

    .offers-cta {
        margin-top: 20px;
    }

    .offers-layout {
        grid-template-columns: 1fr;
    }

    .offer-hero-card {
        min-height: 420px;
    }
}

@media (max-width: 640px) {
    .offers-band {
        padding: 72px 0;
    }

    .offer-small-grid {
        grid-template-columns: 1fr;
    }

    .offer-wide {
        grid-column: auto;
    }

    .offer-hero-card {
        min-height: 440px;
        padding: 26px;
        border-radius: 26px;
    }

    .offer-item {
        min-height: auto;
    }
}


/* =========================
   Premium Service - Final Polish
========================= */
.services-section {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 14% 16%, rgba(15, 99, 216, 0.08), transparent 32%),
        linear-gradient(180deg, #ffffff 0%, #f6f8fc 100%);
    padding: 100px 0;
}

.services-section::before {
  /*  content: "SERVICE";
    position: absolute;
    inset-inline-end: -25px;
    top: 40px;
    color: rgba(6, 23, 53, 0.04);
    font-size: clamp(90px, 9vw, 190px);
    font-weight: 900;
    letter-spacing: -7px;
    pointer-events: none;
    right: 35px;*/
}

.services-layout {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: 64px;
    align-items: center;
}

.services-image {
    position: relative;
    min-height: 620px;
    border-radius: 34px;
    overflow: hidden;
    box-shadow: 0 35px 80px rgba(6, 23, 53, 0.16);
}

.services-image::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(6,23,53,0.02), rgba(6,23,53,0.62)),
        radial-gradient(circle at 70% 20%, rgba(15,99,216,0.20), transparent 36%);
}

.services-image img {
    width: 100%;
    height: 620px;
    object-fit: cover;
    display: block;
    transition: 0.55s ease;
}

.services-image:hover img {
    transform: scale(1.05);
}

.experience-card {
    position: absolute;
    z-index: 3;
    left: 32px;
    bottom: 32px;
    width: min(330px, calc(100% - 64px));
    padding: 28px;
    border-radius: 26px;
    background: rgba(255,255,255,0.8);
    /*backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);*/
    box-shadow: 0 25px 65px rgba(0,0,0,0.22);
}

.exp-number {
    display: block;
    color: var(--navy);
    font-size: 58px;
    font-weight: 900;
    line-height: 0.95;
    letter-spacing: -2px;
}

.exp-text {
    display: block;
    margin: 10px 0 20px;
    color: var(--navy-dark);
    font-size: 14px;
    font-weight: 900;
    line-height: 1.4;
}

.experience-card ul {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.experience-card li {
    display: flex;
    align-items: center;
    gap: 11px;
    color: var(--navy-dark);
    font-size: 13px;
    font-weight: 800;
}

.experience-card svg {
    width: 18px;
    height: 18px;
    color: #2e8b57;
    flex-shrink: 0;
}

.services-content .section-kicker {
    color: var(--navy);
}

.services-content h2 {
    color: var(--navy-dark);
    font-size: clamp(36px, 4vw, 58px);
    line-height: 1.06;
    font-weight: 900;
    letter-spacing: -2px;
    margin: 14px 0 20px;
}

.services-content > p {
    color: var(--muted);
    font-size: 16px;
    line-height: 1.9;
    max-width: 620px;
    margin-bottom: 32px;
}

.services-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-bottom: 34px;
}

.services-grid article {
    position: relative;
    display: grid;
    grid-template-columns: 62px 1fr;
    gap: 18px;
    align-items: center;
    padding: 20px;
    border-radius: 24px;
    background: rgba(255,255,255,0.92);
    border: 1px solid rgba(229, 231, 235, 0.95);
    box-shadow: 0 18px 45px rgba(6, 23, 53, 0.065);
    overflow: hidden;
    transition: 0.3s ease;
}

.services-grid article::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(15,99,216,0.08), transparent 60%);
    opacity: 0;
    transition: 0.3s ease;
}

.services-grid article:hover {
    transform: translateX(8px);
    border-color: rgba(15, 99, 216, 0.24);
    box-shadow: 0 28px 65px rgba(6, 23, 53, 0.12);
}

.services-grid article:hover::before {
    opacity: 1;
}

.service-icon {
    position: relative;
    z-index: 2;
    width: 58px;
    height: 58px;
    border-radius: 18px;
    background: #eef4ff;
    color: var(--navy);
    display: grid;
    place-items: center;
    transition: 0.3s ease;
}

.service-icon svg {
    width: 28px;
    height: 28px;
}

.services-grid article:hover .service-icon {
    background: var(--navy);
    color: #fff;
    transform: scale(1.06);
}

.services-grid article > div:last-child {
    position: relative;
    z-index: 2;
}

.services-grid h3 {
    color: var(--navy-dark);
    font-size: 18px;
    font-weight: 900;
    margin-bottom: 5px;
}

.services-grid p {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.65;
    margin: 0;
}

.services-buttons {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

/* RTL */
html[dir="rtl"] .services-content {
    text-align: right;
}

html[dir="rtl"] .experience-card {
    left: auto;
    right: 32px;
}

html[dir="rtl"] .experience-card li {
    flex-direction: row;
}

html[dir="rtl"] .services-grid article:hover {
    transform: translateX(-8px);
}

html[dir="rtl"] .services-buttons {
    justify-content: flex-start;
}

html[dir="rtl"] .services-content h2{
  font-size: clamp(36px, 4vw, 42px);
}
/* Responsive */
@media (max-width: 992px) {
    .services-layout {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .services-image,
    .services-image img {
        min-height: auto;
        height: 460px;
    }
}

@media (max-width: 640px) {
    .services-section {
        padding: 72px 0;
    }

    .services-image,
    .services-image img {
        height: 420px;
        border-radius: 26px;
    }

    .experience-card {
        left: 18px;
        right: 18px;
        bottom: 18px;
        width: auto;
        padding: 22px;
    }

    html[dir="rtl"] .experience-card {
        left: 18px;
        right: 18px;
    }

    .services-grid article {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .services-buttons a {
        width: 100%;
    }
}

/* =========================
   Contact - Final Polish
========================= */
.contact-section {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 14% 18%, rgba(15, 99, 216, 0.08), transparent 32%),
        linear-gradient(180deg, #f6f8fc 0%, #ffffff 100%);
    padding: 100px 0;
}

.contact-section::before {
    /*content: "CONTACT";
    position: absolute;
    inset-inline-end: -25px;
    top: 42px;
    color: rgba(6, 23, 53, 0.04);
    font-size: clamp(85px, 9vw, 190px);
    font-weight: 900;
    letter-spacing: -7px;
    line-height: 1;
    pointer-events: none;
    right: 35px;*/
}

.contact-head {
    position: relative;
    z-index: 2;
    max-width: 760px;
    margin-bottom: 36px;
}

.contact-head h2 {
    color: var(--navy-dark);
    font-size: clamp(36px, 4.2vw, 60px);
    line-height: 1.05;
    font-weight: 900;
    letter-spacing: -2px;
    margin: 14px 0 16px;
}

.contact-head p {
    color: var(--muted);
    font-size: 16px;
    line-height: 1.85;
    max-width: 650px;
}

.contact-layout {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 0.9fr;
    gap: 24px;
    align-items: stretch;
}

.contact-info-panel {
    padding: 28px;
    border-radius: 32px;
    background: #fff;
    border: 1px solid rgba(229, 231, 235, 0.95);
    box-shadow: 0 28px 75px rgba(6, 23, 53, 0.10);
}

.contact-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}

.contact-main-btn {
    min-height: 54px;
    padding: 0 22px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 900;
    transition: 0.25s ease;
}

.contact-main-btn svg {
    width: 21px;
    height: 21px;
}

.whatsapp-btn {
    background: #25d366;
    color: #fff;
    box-shadow: 0 18px 38px rgba(37, 211, 102, 0.25);
}

.call-btn {
    background: var(--navy);
    color: #fff;
    box-shadow: 0 18px 38px rgba(11, 37, 89, 0.20);
}

.contact-main-btn:hover {
    transform: translateY(-3px);
}

.contact-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.contact-cards a {
    position: relative;
    min-height: 132px;
    background: #f8faff;
    border: 1px solid rgba(229, 231, 235, 0.95);
    border-radius: 24px;
    padding: 20px;
    transition: 0.28s ease;
    overflow: hidden;
}

.contact-cards a::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(11,37,89,0.08), transparent 65%);
    opacity: 0;
    transition: 0.28s ease;
}

.contact-cards a:hover {
    background: #fff;
    transform: translateY(-6px);
    border-color: rgba(15, 99, 216, 0.22);
    box-shadow: 0 24px 60px rgba(6, 23, 53, 0.12);
}

.contact-cards a:hover::before {
    opacity: 1;
}

.contact-cards i {
    position: relative;
    z-index: 2;
    width: 44px;
    height: 44px;
    border-radius: 15px;
    background: #eef4ff;
    color: var(--navy);
    display: grid;
    place-items: center;
    margin-bottom: 14px;
}

.contact-cards i svg {
    width: 23px;
    height: 23px;
}

.contact-cards b {
    position: relative;
    z-index: 2;
    display: block;
    color: var(--navy-dark);
    font-size: 15px;
    font-weight: 900;
    margin-bottom: 4px;
}

.contact-cards span {
    position: relative;
    z-index: 2;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
}

.location-panel {
    position: relative;
    min-height: 500px;
    border-radius: 32px;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(6, 23, 53, 0.94), rgba(11, 37, 89, 0.82)),
        url("../images/8.jpg") center/cover no-repeat;
    box-shadow: 0 28px 75px rgba(6, 23, 53, 0.16);
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.location-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 72% 22%, rgba(15, 99, 216, 0.36), transparent 35%),
        linear-gradient(0deg, rgba(6, 23, 53, 0.72), rgba(6, 23, 53, 0.08));
}

.location-pattern {
    position: absolute;
    inset: 20px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 26px;
    pointer-events: none;
}

.location-card {
    position: relative;
    z-index: 2;
    max-width: 410px;
    padding: 28px;
    border-radius: 26px;
    background: rgba(255,255,255,0.8);
  /*  backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);*/
    box-shadow: 0 25px 65px rgba(0,0,0,0.22);
}

.location-card span {
    display: inline-block;
    color: var(--navy);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.location-card h3 {
    color: var(--navy-dark);
    font-size: 30px;
    font-weight: 900;
    letter-spacing: -1px;
    margin-bottom: 8px;
}

.location-card p {
    color: var(--muted);
    font-size: 14px;
    margin-bottom: 20px;
}

.location-lines {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.location-lines div {
    padding: 18px;
    border-radius: 20px;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.16);
    backdrop-filter: blur(12px);
}

.location-lines b {
    display: block;
    color: #fff;
    font-size: 13px;
    font-weight: 900;
    margin-bottom: 5px;
}

.location-lines span {
    color: rgba(255,255,255,0.72);
    font-size: 13px;
}

/* RTL */
html[dir="rtl"] .contact-head,
html[dir="rtl"] .contact-info-panel,
html[dir="rtl"] .location-card,
html[dir="rtl"] .location-lines {
    text-align: right;
}

html[dir="rtl"] .contact-main-btn {
    direction: rtl;
}

html[dir="rtl"] .contact-main-btn svg {
    flex-shrink: 0;
}

html[dir="rtl"] .contact-cards a {
    text-align: right;
}
html[dir="rtl"] .contact-head h2{
      font-size: clamp(36px, 4.2vw, 42px);
}
/* Responsive */
@media (max-width: 1000px) {
    .contact-layout {
        grid-template-columns: 1fr;
    }

    .location-panel {
        min-height: 480px;
    }
}

@media (max-width: 640px) {
    .contact-section {
        padding: 72px 0;
    }

    .contact-info-panel {
        padding: 20px;
        border-radius: 26px;
    }

    .contact-cards {
        grid-template-columns: 1fr;
    }

    .contact-actions {
        flex-direction: column;
    }

    .contact-main-btn {
        width: 90%;
        justify-content: center;
    }

    .location-panel {
        min-height: 520px;
        padding: 20px;
        border-radius: 26px;
    }

    .location-card {
        padding: 22px;
    }

    .location-lines {
        grid-template-columns: 1fr;
    }
}
/* =========================
   Footer - Premium
========================= */
.site-footer {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 20% 10%, rgba(15, 99, 216, 0.22), transparent 30%),
        linear-gradient(135deg, #061735 0%, #0b2559 62%, #102f66 100%);
    color: #fff;
    margin-top:100px;
    padding-top:0;
}

.site-footer::before {
  /*  content: "AL-RAMI";
    position: absolute;
    inset-inline-end: -35px;
    top: 35px;
    font-size: clamp(95px, 15vw, 220px);
    font-weight: 900;
    letter-spacing: -8px;
    color: rgba(255,255,255,0.035);
    line-height: 1;
    pointer-events: none;*/
}

.footer-cta {
    position: relative;
    z-index: 2;
    margin-top: 0;
    padding: 34px;
    border-radius: 30px;
    background: rgba(255,255,255,0.96);
    color: var(--navy-dark);
    border: 1px solid rgba(229, 231, 235, 0.95);
    box-shadow: 0 30px 85px rgba(6, 23, 53, 0.18);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;

    position: relative;
    margin-top:-70px;
    margin-bottom:55px;
    transform:none;
    z-index:5;
}

.footer-cta span {
    display: inline-block;
    color: var(--navy);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.footer-cta h2 {
    color: var(--navy-dark);
    font-size: clamp(26px, 3vw, 42px);
    line-height: 1.12;
    font-weight: 900;
    letter-spacing: -1.5px;
    max-width: 720px;
}

.footer-cta-btn {
    min-height: 52px;
    padding: 0 26px;
    border-radius: 999px;
    background: var(--navy);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 900;
    white-space: nowrap;
    box-shadow: 0 18px 38px rgba(11, 37, 89, 0.22);
    transition: 0.25s ease;
}

.footer-cta-btn:hover {
    background: var(--blue);
    transform: translateY(-2px);
}

.footer-top {
    position: relative;
    z-index: 2;
    padding: 100px 0 62px;
    display: grid;
    grid-template-columns: 1.65fr 0.85fr 0.95fr 1.35fr;
    gap: 38px;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 14px;
}

.footer-logo .brand-mark {
    background: #fff;
    color: var(--navy);
}

.footer-logo strong {
    display: block;
    color: #fff;
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -0.6px;
    line-height: 1.1;
}

.footer-logo small {
    display: block;
    color: rgba(255,255,255,0.62);
    font-size: 11px;
    font-weight: 700;
    margin-top: 6px;
    max-width: 260px;
}

.footer-brand p {
    color: rgba(255,255,255,0.68);
    font-size: 14px;
    line-height: 1.8;
    max-width: 330px;
    margin: 22px 0;
}

.social-links {
    display: flex;
    gap: 10px;
}

.social-links a {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 50%;
    color: #fff;
    background: rgba(255,255,255,0.08);
    font-weight: 900;
    transition: 0.25s ease;
}

.social-links a:hover {
    background: #fff;
    color: var(--navy);
    transform: translateY(-3px);
}

.footer-col h3,
.footer-contact h3 {
    color: #fff;
    font-size: 15px;
    font-weight: 900;
    margin-bottom: 18px;
    letter-spacing: 0.4px;
}

.footer-col a {
    display: block;
    color: rgba(255,255,255,0.66);
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 12px;
    transition: 0.25s ease;
}

.footer-col a:hover {
    color: #fff;
    transform: translateX(4px);
}

html[dir="rtl"] .footer-col a:hover {
    transform: translateX(-4px);
}

.footer-contact {
    padding: 22px;
    border-radius: 24px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.14);
    backdrop-filter: blur(14px);
}

.footer-contact a {
    display: block;
    padding: 13px 0;
    border-bottom: 1px solid rgba(255,255,255,0.12);
}

.footer-contact a:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.footer-contact b {
    display: block;
    color: #fff;
    font-size: 13px;
    font-weight: 900;
    margin-bottom: 3px;
}

.footer-contact span {
    color: rgba(255,255,255,0.65);
    font-size: 13px;
}

.footer-bottom {
    position: relative;
    z-index: 2;
    border-top: 1px solid rgba(255,255,255,0.12);
    padding: 18px 0;
}

.footer-bottom-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    color: rgba(255,255,255,0.64);
    font-size: 13px;
}

.footer-language {
    display: flex;
    align-items: center;
    gap: 8px;
}

.footer-lang {
    background: none;
    border: 0;
    color: rgba(255,255,255,0.72);
    cursor: pointer;
    font-weight: 800;
    transition: 0.25s ease;
}

.footer-lang:hover {
    color: #fff;
}

/* Floating WhatsApp */
.floating-whatsapp {
    position: fixed;
    inset-inline-end: 22px;
    bottom: 22px;
    width: 56px;
    height: 56px;
    background: #25d366;
    color: #fff;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 26px;
    z-index: 200;
    box-shadow: 0 20px 45px rgba(37, 211, 102, 0.35);
    transition: 0.25s ease;
}

.floating-whatsapp:hover {
    transform: translateY(-4px) scale(1.04);
}

@media (max-width: 1000px) {
    .footer-cta {
        transform: translateY(-32px);
        flex-direction: column;
        align-items: flex-start;
    }

    .footer-top {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .footer-cta {
        padding: 24px;
        border-radius: 24px;
    }

    .footer-cta-btn {
        width: 100%;
    }

    .footer-top {
        grid-template-columns: 1fr;
        padding-top: 10px;
    }

    .footer-bottom-inner {
        flex-direction: column;
        text-align: center;
    }
}

/* =========================
   RTL
========================= */
html[dir="rtl"] .hero-text {
    text-align: right;
}

html[dir="rtl"] .hero-buttons {
    justify-content: flex-start;
}

html[dir="rtl"] .brand-card b,
html[dir="rtl"] .vehicle-bottom a {
    transform: rotate(180deg);
}


/* =========================
   Responsive
========================= */
@media (max-width: 1100px) {
    .main-nav,
    .header-btn {
        display: none;
    }

    .menu-toggle {
        display: block;
    }

    .brands-grid,
    .vehicles-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .offers-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .offers-title {
        grid-column: 1 / -1;
    }

    .why-layout,
    .services-layout,
    .contact-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .container {
        width: min(100% - 24px, 1180px);
    }

    .header-inner {
        height: 72px;
    }

    .brand-name {
        font-size: 16px;
    }

    .hero,
    .hero-slider,
    .hero-slide {
        height: 560px;
        min-height: 560px;
    }

    .hero-text h1 {
        font-size: 38px;
    }

    .hero-text {
        max-width: 90%;
    }

    .hero-arrow {
        display: none;
    }

    .section {
        padding: 55px 0;
    }

    .section-head {
        display: block;
    }

    .section-head h2,
    .why-intro h2,
    .services-content h2,
    .contact-info h2 {
        font-size: 28px;
    }

    .brands-grid,
    .vehicles-grid,
    .why-features,
    .offers-grid,
    .contact-cards,
    .footer-top {
        grid-template-columns: 1fr;
    }

    .brand-card {
        grid-template-columns: 70px 1fr 20px;
    }

    .services-image img {
        height: 280px;
    }

    .footer-bottom-inner {
        flex-direction: column;
        text-align: center;
    }
}


/* =========================
   Inner Hero - Compact
========================= */
.inner-hero {
    position: relative;
    min-height: 280px;
    overflow: hidden;
    background: #061735;
}

.inner-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.inner-hero-shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(6,23,53,.92), rgba(6,23,53,.62), rgba(6,23,53,.18)),
        linear-gradient(0deg, rgba(6,23,53,.45), transparent);
}

html[dir="rtl"] .inner-hero-shade {
    background:
        linear-gradient(-90deg, rgba(6,23,53,.92), rgba(6,23,53,.62), rgba(6,23,53,.18)),
        linear-gradient(0deg, rgba(6,23,53,.45), transparent);
}

.inner-hero-content {
    position: relative;
    z-index: 2;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #fff;
}

.inner-hero-content > span {
    color: rgba(255,255,255,.72);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.inner-hero-content h1 {
    color: #fff;
    font-size: clamp(36px, 4.5vw, 48px);
    line-height: 1;
    font-weight: 900;
    letter-spacing: -2px;
    margin-bottom: 14px;
}

.inner-hero-content p {
    color: rgba(255,255,255,.76);
    max-width: 620px;
    font-size: 15px;
    line-height: 1.75;
    margin-bottom: 16px;
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255,255,255,.65);
    font-size: 13px;
    font-weight: 800;
}

.breadcrumb a {
    color: #fff;
}

.breadcrumb b {
    color: rgba(255,255,255,.75);
}

/* =========================
   Vehicles Page - Compact Grid
========================= */
.vehicles-page {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 14% 14%, rgba(15,99,216,.08), transparent 32%),
        linear-gradient(180deg, #f6f8fc 0%, #ffffff 100%);
    padding: 78px 0;
}

.vehicles-toolbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 32px;
}

.vehicles-toolbar h2 {
    color: var(--navy-dark);
    font-size: clamp(32px, 3.6vw, 50px);
    line-height: 1.06;
    font-weight: 900;
    letter-spacing: -2px;
}

.vehicles-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.vehicles-filters button {
    min-height: 42px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid rgba(11,37,89,.16);
    background: #fff;
    color: var(--navy);
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
    transition: .25s ease;
    font-family: "Inter", "IBM Plex Sans Arabic", sans-serif;

}

.vehicles-filters button:hover,
.vehicles-filters button.active {
    background: var(--navy);
    color: #fff;
}

.vehicles-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
}

.vehicle-list-card {
    position: relative;
    min-height: 500px;
    background: #fff;
    border: 1px solid rgba(229,231,235,.95);
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 24px 70px rgba(6,23,53,.09);
    transition: .32s ease;
    display: flex;
    flex-direction: column;
}

.vehicle-list-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 36px 90px rgba(6,23,53,.15);
}

.vehicle-list-img {
    position: relative;
    height: 270px;
    overflow: hidden;
    background: #061735;
}

.vehicle-list-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .55s ease;
}

.vehicle-list-card:hover .vehicle-list-img img {
    transform: scale(1.06);
}

.vehicle-list-img::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(0deg, rgba(6,23,53,.50), transparent 55%),
        linear-gradient(90deg, rgba(6,23,53,.14), transparent);
}

.vehicle-list-img > span {
    position: absolute;
    z-index: 2;
    top: 18px;
    inset-inline-start: 18px;
    padding: 8px 15px;
    border-radius: 999px;
    background: rgba(255,255,255,.94);
    color: var(--navy);
    font-size: 12px;
    font-weight: 900;
}

.vehicle-list-info {
    padding: 26px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.vehicle-list-meta,
.vehicle-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.vehicle-list-meta {
    margin-bottom: 13px;
}

.vehicle-list-meta span,
.vehicle-specs span {
    min-height: 27px;
    padding: 0 10px;
    border-radius: 999px;
    background: #f4f6fb;
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
}

.vehicle-list-info h3 {
    color: var(--navy-dark);
    font-size: clamp(25px, 2.4vw, 34px);
    font-weight: 900;
    letter-spacing: -1px;
    line-height: 1.08;
    margin-bottom: 12px;
}

.vehicle-list-info p {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.75;
    margin-bottom: 18px;
}

.vehicle-list-bottom {
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid rgba(229,231,235,.9);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.vehicle-list-bottom strong {
    color: var(--navy-dark);
    font-size: 15px;
    font-weight: 900;
}

.vehicle-list-bottom a {
    min-height: 42px;
    padding: 0 17px;
    border-radius: 999px;
    background: var(--navy);
    color: #fff;
    font-size: 13px;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    transition: .25s ease;
}

.vehicle-list-bottom a:hover {
    background: var(--blue);
    transform: translateY(-2px);
}

/* variation: every second card has darker top feel */
.vehicle-list-card:nth-child(even) .vehicle-list-img::after {
    background:
        linear-gradient(0deg, rgba(6,23,53,.62), transparent 58%),
        linear-gradient(-90deg, rgba(15,99,216,.18), transparent);
}

/* RTL */
html[dir="rtl"] .inner-hero-content,
html[dir="rtl"] .vehicles-toolbar,
html[dir="rtl"] .vehicle-list-info {
    text-align: right;
}

html[dir="rtl"] .breadcrumb {
    direction: rtl;
}

html[dir="rtl"] .vehicle-list-img::after {
    background:
        linear-gradient(0deg, rgba(6,23,53,.50), transparent 55%),
        linear-gradient(-90deg, rgba(6,23,53,.14), transparent);
}

/* Responsive */
@media (max-width: 900px) {
    .vehicles-toolbar {
        display: block;
    }

    .vehicles-filters {
        margin-top: 20px;
    }

    .vehicles-list {
        grid-template-columns: 1fr;
    }

    .vehicle-list-card {
        min-height: auto;
    }
}

@media (max-width: 640px) {
    .inner-hero,
    .inner-hero-content {
        min-height: 250px;
    }

    .inner-hero-content h1 {
        font-size: 34px;
        letter-spacing: -1px;
    }

    .inner-hero-content p {
        font-size: 14px;
    }

    .vehicles-page {
        padding: 64px 0;
    }

    .vehicle-list-img {
        height: 235px;
    }

    .vehicle-list-info {
        padding: 22px;
    }

    .vehicle-list-bottom {
        flex-direction: column;
        align-items: flex-start;
    }
}

/*==================================
Reveal Animation
==================================*/

.reveal{

    opacity:0;

    transform:translateY(45px);

}

.reveal.show{

    opacity:1;

    transform:translateY(0);

    transition:
    opacity .7s ease,
    transform .7s ease;

}

/*==================================================
    VEHICLE DETAILS
==================================================*/

.vehicle-details-section{
    padding:90px 0 70px;
    background:
        radial-gradient(circle at 8% 15%,rgba(15,99,216,.07),transparent 32%),
        linear-gradient(180deg,#f7f9fc 0%,#ffffff 100%);
}

.vehicle-details-layout{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:48px;
    align-items:start;
}

/*=========================
Gallery
=========================*/

.vehicle-gallery-box{
    position:sticky;
    top:110px;
}

.vehicle-main-image{

    position:relative;
    overflow:hidden;

    border-radius:28px;

    background:#061735;

    box-shadow:0 35px 90px rgba(6,23,53,.14);

}

.vehicle-main-image img{

    width:100%;
    height:560px;
    object-fit:cover;
    display:block;
    transition:.45s;

}

.vehicle-main-image:hover img{

    transform:scale(1.04);

}

.vehicle-main-image span{

    position:absolute;
    top:22px;
    inset-inline-start:22px;

    background:#fff;

    color:var(--navy);

    padding:8px 18px;

    border-radius:999px;

    font-size:12px;

    font-weight:900;

}

.vehicle-thumbs{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:12px;

    margin-top:18px;

}

.vehicle-thumbs button{

    border:2px solid transparent;

    background:none;

    border-radius:16px;

    overflow:hidden;

    cursor:pointer;

    transition:.3s;

}

.vehicle-thumbs button.active{

    border-color:var(--blue);

}

.vehicle-thumbs img{

    width:100%;

    height:92px;

    object-fit:cover;

    display:block;

}

/*=========================
Summary Card
=========================*/

.vehicle-summary-card{

    background:#fff;

    border-radius:30px;

    padding:38px;

    border:1px solid rgba(229,231,235,.9);

    box-shadow:0 25px 70px rgba(6,23,53,.08);

}

.vehicle-status{

    display:inline-flex;

    align-items:center;

    gap:8px;

    background:#eaf8ee;

    color:#1e8e52;

    padding:8px 16px;

    border-radius:999px;

    font-size:12px;

    font-weight:900;

}

.vehicle-summary-card h2{

    margin:22px 0 14px;

    font-size:46px;

    line-height:1;

    color:var(--navy-dark);

    font-weight:900;

    letter-spacing:-1.5px;

}

.vehicle-summary-card p{

    color:var(--muted);

    line-height:1.9;

    margin-bottom:15px;

}

.vehicle-price{

    display:flex;

    justify-content:space-between;

    align-items:flex-end;

    padding:20px 0;

    border-top:1px solid var(--border);

    border-bottom:1px solid var(--border);

}

.vehicle-price span{

    color:var(--muted);

}

.vehicle-price strong{

    font-size:40px;

    color:var(--navy);

    font-weight:900;

}

.vehicle-quick-specs{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:16px;

    margin:28px 0;

}

.vehicle-quick-specs div{

    background:#f7f9fc;

    border-radius:18px;

    padding:18px;

}

.vehicle-quick-specs b{

    display:block;

    color:var(--navy-dark);

    font-size:19px;

    margin-bottom:6px;

}

.vehicle-quick-specs span{

    color:var(--muted);

    font-size:13px;

}

.vehicle-summary-actions{

    display:flex;

    gap:14px;

    flex-wrap:wrap;

}

/*=========================
Specifications
=========================*/

.vehicle-spec-section{

    padding:30px 0 80px;

    background:#fff;

}

.details-section-head{

    text-align:center;

    max-width:700px;

    margin:0 auto 45px;

}

.specs-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:22px;

}

.specs-grid article{

    background:#fff;

    border:1px solid rgba(229,231,235,.9);

    border-radius:22px;

    padding:28px;

    transition:.3s;

    box-shadow:0 15px 45px rgba(6,23,53,.05);

}

.specs-grid article:hover{

    transform:translateY(-6px);

    box-shadow:0 25px 60px rgba(6,23,53,.10);

}

.specs-grid span{

    display:block;

    color:var(--muted);

    font-size:13px;

    margin-bottom:8px;

}

.specs-grid strong{

    color:var(--navy-dark);

    font-size:24px;

}

/*=========================
Downloads
=========================*/

.vehicle-files-section{

    background:#f7f9fc;

    padding:90px 0;

}

.vehicle-files-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:22px;

}

.vehicle-file-card{

    background:#fff;

    border-radius:24px;

    padding:26px;

    display:grid;

    grid-template-columns:72px 1fr auto;

    gap:22px;

    align-items:center;

    border:1px solid rgba(229,231,235,.9);

    transition:.3s;

    box-shadow:0 20px 55px rgba(6,23,53,.05);

}

.vehicle-file-card:hover{

    transform:translateY(-6px);

    box-shadow:0 30px 70px rgba(6,23,53,.12);

}

.vehicle-file-card i{

    width:68px;

    height:68px;

    border-radius:18px;

    background:#eef4ff;

    color:var(--navy);

    display:flex;

    align-items:center;

    justify-content:center;

}

.vehicle-file-card svg{

    width:34px;

    height:34px;

}

.vehicle-file-card h3{

    margin-bottom:8px;

    color:var(--navy-dark);

}

.vehicle-file-card p{

    color:var(--muted);

    font-size:14px;

    line-height:1.7;

}

.vehicle-file-card b{

    background:#d62828;

    color:#fff;

    padding:10px 16px;

    border-radius:999px;

    font-size:12px;

    font-weight:900;

}

/*=========================
RTL
=========================*/

html[dir="rtl"] .vehicle-summary-card,

html[dir="rtl"] .details-section-head{

    text-align:right;

}

html[dir="rtl"] .details-section-head{

    text-align:center;

}

html[dir="rtl"] .vehicle-price{

    direction:rtl;

}

/*=========================
Responsive
=========================*/

@media(max-width:1100px){

.vehicle-details-layout{

grid-template-columns:1fr;

}

.vehicle-gallery-box{

position:relative;

top:auto;

}

.specs-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:768px){

.vehicle-main-image img{

height:340px;

}

.vehicle-summary-card{

padding:28px;

}

.vehicle-summary-card h2{

font-size:34px;

}

.vehicle-files-grid,

.specs-grid{

grid-template-columns:1fr;

}

.vehicle-file-card{

grid-template-columns:60px 1fr;

}

.vehicle-file-card b{

grid-column:2;

justify-self:start;

margin-top:12px;

}

}

.vehicle-main-image img {
    opacity: 1;
    transition: opacity 0.22s ease, transform 0.45s ease;
}

.vehicle-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(6, 23, 53, 0.94);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px;
}

.vehicle-lightbox img {
    max-width: 92vw;
    max-height: 84vh;
    object-fit: contain;
    border-radius: 22px;
    box-shadow: 0 35px 90px rgba(0,0,0,0.45);
    transition: opacity 0.2s ease;
}

.vehicle-lightbox-close,
.vehicle-lightbox-arrow {
    position: absolute;
    border: 0;
    background: rgba(255,255,255,0.12);
    color: #fff;
    cursor: pointer;
    transition: 0.25s ease;
}

.vehicle-lightbox-close {
    top: 28px;
    inset-inline-end: 28px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-size: 34px;
    line-height: 1;
}

.vehicle-lightbox-arrow {
    top: 50%;
    transform: translateY(-50%);
    width: 58px;
    height: 58px;
    border-radius: 50%;
    font-size: 42px;
    line-height: 1;
}

.vehicle-lightbox-arrow.prev {
    inset-inline-start: 32px;
}

.vehicle-lightbox-arrow.next {
    inset-inline-end: 32px;
}

.vehicle-lightbox-close:hover,
.vehicle-lightbox-arrow:hover {
    background: #fff;
    color: var(--navy);
}

@media (max-width: 640px) {
    .vehicle-lightbox {
        padding: 24px;
    }

    .vehicle-lightbox-arrow {
        width: 48px;
        height: 48px;
        font-size: 34px;
    }

    .vehicle-lightbox-arrow.prev {
        inset-inline-start: 12px;
    }

    .vehicle-lightbox-arrow.next {
        inset-inline-end: 12px;
    }
}

/*==================================================
    BRANDS PAGE
    Part 1
==================================================*/

/*==============================
Hero
==============================*/

.brands-hero .inner-hero-bg{
    filter:brightness(.82);
}

/*==============================
Sections
==============================*/

.brand-showcase{

    position:relative;

    overflow:hidden;

    padding:95px 0;

    background:
    radial-gradient(circle at 10% 10%,rgba(15,99,216,.06),transparent 34%),
    linear-gradient(180deg,#ffffff 0%,#f8fafd 100%);

}

.brand-showcase:nth-child(even){

    background:#fff;

}

.brand-layout{

    display:grid;

    grid-template-columns:1.05fr .95fr;

    gap:70px;

    align-items:center;

}

.brand-showcase.alternate .brand-layout{

    grid-template-columns:.95fr 1.05fr;

}

/*==============================
Image
==============================*/

.brand-image{

    position:relative;

    border-radius:34px;

    overflow:hidden;

    box-shadow:
    0 40px 90px rgba(6,23,53,.14);

}

.brand-image img{

    width:100%;

    height:620px;

    object-fit:cover;

    display:block;

    transition:.7s ease;

}

.brand-showcase:hover .brand-image img{

    transform:scale(1.04);

}

.brand-image::after{

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(0deg,
    rgba(6,23,53,.55),
    transparent 58%),

    linear-gradient(90deg,
    rgba(6,23,53,.12),
    transparent);

}

/*==============================
Content
==============================*/

.brand-content{

    position:relative;

}

.brand-logoo{

    width:105px;

    margin-bottom:24px;

}

.brand-kicker{

    display:inline-flex;

    align-items:center;

    gap:12px;

    color:var(--navy);

    font-size:12px;

    font-weight:900;

    text-transform:uppercase;

    letter-spacing:2px;

    margin-bottom:16px;

}

.brand-kicker::before{

    content:"";

    width:42px;

    height:2px;

    background:var(--blue);

}

.brand-content h2{

    color:var(--navy-dark);

    font-size:clamp(44px,5vw,76px);

    line-height:1;

    font-weight:900;

    letter-spacing:-3px;

    margin-bottom:22px;

}

.brand-content p{

    max-width:620px;

    color:var(--muted);

    font-size:17px;

    line-height:1.95;

    margin-bottom:34px;

}

/*==============================
Features
==============================*/

.brand-features{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:14px;

    margin-bottom:36px;

}

.brand-features li{

    position:relative;

    list-style:none;

    padding-inline-start:34px;

    color:var(--navy-dark);

    font-size:15px;

    font-weight:700;

}

.brand-features li::before{

    content:"";

    position:absolute;

    inset-inline-start:0;

    top:1px;

    width:18px;

    height:18px;

    border-radius:50%;

    background:linear-gradient(135deg,
    var(--blue),
    var(--navy));

    box-shadow:0 6px 18px rgba(15,99,216,.25);

}

.brand-features li::after{

    content:"✓";

    position:absolute;

    inset-inline-start:4px;

    top:0;

    color:#fff;

    font-size:11px;

    font-weight:900;

}

/*==============================
Stats
==============================*/

.brand-stats{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:18px;

    margin-bottom:40px;

}

.brand-stats div{

    background:#fff;

    border:1px solid rgba(229,231,235,.95);

    border-radius:22px;

    padding:22px;

    text-align:center;

    box-shadow:0 18px 45px rgba(6,23,53,.05);

    transition:.3s;

}

.brand-stats div:hover{

    transform:translateY(-6px);

    box-shadow:0 28px 65px rgba(6,23,53,.10);

}

.brand-stats strong{

    display:block;

    color:var(--navy);

    font-size:30px;

    line-height:1;

    font-weight:900;

    margin-bottom:8px;

}

.brand-stats span{

    color:var(--muted);

    font-size:13px;

}

/*==============================
Button
==============================*/

.brand-content .primary-btn{

    min-width:220px;

    justify-content:center;

    min-height:54px;

    font-size:14px;

    border-radius:999px;

    box-shadow:
    0 18px 45px rgba(11,37,89,.18);

    margin-top: 30px;

}

.brand-content .primary-btn:hover{

    transform:translateY(-3px);

}

/*==============================
Divider
==============================*/

.brand-showcase::before{

    content:"";

    position:absolute;

    top:0;

    left:50%;

    transform:translateX(-50%);

    width:min(1320px,92%);

    height:1px;

    background:
    linear-gradient(90deg,
    transparent,
    rgba(6,23,53,.08),
    transparent);

}

.brand-showcase:first-of-type::before{

    display:none;

}

/*==================================================
    BRANDS PAGE
    Part 2
==================================================*/

/*=========================================
    Brand Themes
=========================================*/

.brand-showcase{
    transition:.45s ease;
}

.brand-showcase:hover{
    z-index:2;
}

.brand-showcase:nth-child(even){
    background:
    linear-gradient(180deg,#ffffff 0%,#fbfcfe 100%);
}

/* Ford */

.brand-showcase:nth-of-type(1){

    background:
    radial-gradient(circle at 12% 18%,rgba(0,48,135,.08),transparent 32%),
    linear-gradient(180deg,#ffffff 0%,#f8fafd 100%);

}

/* Mazda */

.alternate{

    background:
    radial-gradient(circle at 88% 20%,rgba(78,89,105,.08),transparent 30%),
    linear-gradient(180deg,#fbfcfe 0%,#ffffff 100%);

}

/* NIO */

.nio-theme{

    background:
    linear-gradient(135deg,#eef7ff 0%,#ffffff 55%);

}

.nio-theme .brand-image{

    box-shadow:
    0 40px 90px rgba(0,168,255,.16);

}

.nio-theme .brand-kicker{

    color:#00a8ff;

}

.nio-theme .brand-kicker::before{

    background:#00a8ff;

}

/* Trucks */

.trucks-theme{

    background:
    radial-gradient(circle at 90% 15%,rgba(238,112,36,.08),transparent 30%),
    linear-gradient(180deg,#ffffff 0%,#fbfbfb 100%);

}

.trucks-theme .brand-kicker{

    color:#ee7024;

}

.trucks-theme .brand-kicker::before{

    background:#ee7024;

}

/*=========================================
    Floating Decoration
=========================================*/

.brand-showcase::after{

    content:"";

    position:absolute;

    width:340px;

    height:340px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(15,99,216,.06),
    transparent 70%);

    filter:blur(10px);

    top:-120px;

    inset-inline-end:-110px;

    pointer-events:none;

}

.alternate::after{

    inset-inline-start:-120px;

    inset-inline-end:auto;

}

/*=========================================
    CTA
=========================================*/

.brands-cta{

    position:relative;

    overflow:hidden;

    padding:110px 0;

    background:
    linear-gradient(135deg,
    #061735 0%,
    #0b2559 100%);

    color:#fff;

    text-align:center;

}

.brands-cta::before{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(255,255,255,.08),
    transparent 70%);

    top:-260px;

    inset-inline-end:-120px;

}

.brands-cta::after{

    content:"";

    position:absolute;

    width:360px;

    height:360px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(15,99,216,.18),
    transparent 70%);

    bottom:-170px;

    inset-inline-start:-120px;

}

.brands-cta .container{

    position:relative;

    z-index:2;

}

.brands-cta h2{

    color:#fff;

    font-size:clamp(38px,5vw,68px);

    line-height:1.08;

    font-weight:900;

    letter-spacing:-2px;

    margin-bottom:18px;

}

.brands-cta p{

    max-width:720px;

    margin:0 auto 34px;

    color:rgba(255,255,255,.78);

    font-size:17px;

    line-height:1.9;

}

.brands-cta .primary-btn{

    min-width:250px;

    min-height:58px;

    justify-content:center;

    background:#fff;

    color:var(--navy);

    border-radius:999px;

    font-weight:900;

}

.brands-cta .primary-btn:hover{

    background:var(--blue);

    color:#fff;

    transform:translateY(-4px);

}

/*=========================================
    RTL
=========================================*/

html[dir="rtl"] .brand-content{

    text-align:right;

}

html[dir="rtl"] .brand-kicker{

    flex-direction:row-reverse;

}

html[dir="rtl"] .brand-features li{

    padding-inline-start:0;

    padding-inline-end:34px;

}

html[dir="rtl"] .brand-features li::before{

    inset-inline-start:auto;

    inset-inline-end:0;

}

html[dir="rtl"] .brand-features li::after{

    inset-inline-start:auto;

    inset-inline-end:4px;

}

html[dir="rtl"] .brand-image::after{

    background:
    linear-gradient(0deg,
    rgba(6,23,53,.55),
    transparent 58%),

    linear-gradient(-90deg,
    rgba(6,23,53,.12),
    transparent);

}

/*=========================================
    Responsive
=========================================*/

@media (max-width:1100px){

.brand-layout{

grid-template-columns:1fr;

gap:40px;

}

.alternate .brand-image{

order:-1;

}

.brand-image img{

height:460px;

}

.brand-content h2{

font-size:54px;

}

.brand-stats{

grid-template-columns:repeat(3,1fr);

}

}

@media (max-width:768px){

.brand-showcase{

padding:70px 0;

}

.brand-image{

border-radius:24px;

}

.brand-image img{

height:300px;

}

.brand-logoo{

width:82px;

}

.brand-content h2{

font-size:40px;

letter-spacing:-1px;

}

.brand-content p{

font-size:15px;

}

.brand-features{

grid-template-columns:1fr;

}

.brand-stats{

grid-template-columns:1fr;

gap:14px;

}

.brands-cta{

padding:80px 0;

}

.brands-cta h2{

font-size:34px;

}

.brands-cta p{

font-size:15px;

}

.brands-cta .primary-btn{

width:100%;

}

}

/*==================================================
    BRAND DETAILS
    PART 1
==================================================*/

/*==============================
Hero
==============================*/

/* =========================
   Brand Details Hero Fix
========================= */
.brand-details-hero,
.brand-details-hero .inner-hero-content {
    min-height: 560px;
}

.brand-details-hero .inner-hero-content {
    padding-top: 70px;
    justify-content: center;
}

.brand-details-hero .inner-hero-bg {
    filter: brightness(.68);
}

.brand-hero-logo {
    width: 118px;
    margin-bottom: 24px;
}

.brand-details-hero .inner-hero-content h1 {
    font-size: clamp(64px, 7vw, 110px);
    margin-bottom: 18px;
}

@media (max-width: 768px) {
    .brand-details-hero,
    .brand-details-hero .inner-hero-content {
        min-height: 390px;
    }

    .brand-details-hero .inner-hero-content {
        padding-top: 40px;
    }

    .brand-hero-logo {
        width: 88px;
    }
}

/*==============================
Overview
==============================*/

.brand-overview{

    position:relative;

    overflow:hidden;

    padding:100px 0;

    background:
    radial-gradient(circle at 8% 15%,
    rgba(15,99,216,.06),
    transparent 35%),

    linear-gradient(180deg,
    #ffffff 0%,
    #f8fafd 100%);

}

.brand-overview::after{

    content:"";

    position:absolute;

    top:40px;

    inset-inline-end:-20px;

    font-size:180px;

    font-weight:900;

    color:rgba(6,23,53,.035);

    line-height:1;

    pointer-events:none;

}

.overview-layout{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.overview-image{

    position:relative;

    border-radius:34px;

    overflow:hidden;

    box-shadow:
    0 35px 90px rgba(6,23,53,.12);

}

.overview-image img{

    width:100%;

    height:560px;

    object-fit:cover;

    display:block;

    transition:.65s;

}

.overview-image:hover img{

    transform:scale(1.05);

}

.overview-content h2{

    font-size:clamp(42px,5vw,68px);

    line-height:1.06;

    color:var(--navy-dark);

    letter-spacing:-2px;

    margin:14px 0 24px;

}

.overview-content p{

    color:var(--muted);

    line-height:1.95;

    font-size:17px;

    margin-bottom:40px;

}

/*==============================
Stats
==============================*/

.overview-highlights{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:18px;

}

.overview-highlights article{

    background:#fff;

    border-radius:24px;

    padding:28px;

    border:1px solid rgba(229,231,235,.9);

    box-shadow:0 18px 45px rgba(6,23,53,.05);

    transition:.3s;

}

.overview-highlights article:hover{

    transform:translateY(-8px);

    box-shadow:0 28px 70px rgba(6,23,53,.11);

}

.overview-highlights strong{

    display:block;

    color:var(--navy);

    font-size:38px;

    line-height:1;

    font-weight:900;

    margin-bottom:8px;

}

.overview-highlights span{

    color:var(--muted);

    font-size:14px;

}

/*==============================
Featured Models
==============================*/

.brand-models{

    padding:100px 0;

    background:#fff;

}

.brand-models-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:24px;

}

.brand-model-card{

    position:relative;

    overflow:hidden;

    border-radius:30px;

    background:#fff;

    box-shadow:0 22px 60px rgba(6,23,53,.08);

    transition:.35s;

}

.brand-model-card:hover{

    transform:translateY(-10px);

    box-shadow:0 35px 90px rgba(6,23,53,.14);

}

.brand-model-card img{

    width:100%;

    height:260px;

    object-fit:cover;

    display:block;

    transition:.6s;

}

.brand-model-card:hover img{

    transform:scale(1.06);

}

.brand-model-card div{

    padding:26px;

}

.brand-model-card h3{

    color:var(--navy-dark);

    font-size:24px;

    margin-bottom:14px;

}

.brand-model-card a{

    display:inline-flex;

    align-items:center;

    gap:8px;

    color:var(--navy);

    font-weight:800;

    transition:.25s;

}

.brand-model-card:hover a{

    gap:14px;

}

/*==============================
Slider Ready
==============================*/

.brand-models-slider{

    position:relative;

}

.brand-models-arrow{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:52px;

    height:52px;

    border:none;

    border-radius:50%;

    background:#fff;

    color:var(--navy);

    box-shadow:0 15px 40px rgba(6,23,53,.14);

    cursor:pointer;

    transition:.25s;

    z-index:5;

}

.brand-models-arrow:hover{

    background:var(--navy);

    color:#fff;

}

.brand-models-arrow.prev{

    inset-inline-start:-26px;

}

.brand-models-arrow.next{

    inset-inline-end:-26px;

}

/*==================================================
    BRAND DETAILS
    PART 2A
==================================================*/

/*==============================
Why Brand
==============================*/

.brand-features-section{
    position:relative;
    overflow:hidden;
    padding:100px 0;
    background:
        radial-gradient(circle at 12% 20%,rgba(15,99,216,.08),transparent 34%),
        linear-gradient(135deg,#061735 0%,#0b2559 100%);
    color:#fff;
}

.brand-features-section::before{
  /*  content:"WHY";
    position:absolute;
    inset-inline-end:-25px;
    top:35px;
    font-size:clamp(90px,13vw,190px);
    font-weight:900;
    color:rgba(255,255,255,.045);
    letter-spacing:-7px;
    pointer-events:none;*/
}

.brand-features-section .details-section-head h2{
    color:#fff;
}

.brand-features-section .section-kicker{
    color:rgba(255,255,255,.72);
}

.brand-feature-grid{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
}

.brand-feature-grid article{
    position:relative;
    min-height:240px;
    padding:28px;
    border-radius:28px;
    background:rgba(255,255,255,.09);
    border:1px solid rgba(255,255,255,.15);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    overflow:hidden;
    transition:.3s ease;
}

.brand-feature-grid article::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(135deg,rgba(255,255,255,.14),transparent 62%);
    opacity:0;
    transition:.3s ease;
}

.brand-feature-grid article:hover{
    transform:translateY(-8px);
    background:rgba(255,255,255,.13);
    border-color:rgba(255,255,255,.28);
}

.brand-feature-grid article:hover::before{
    opacity:1;
}

.brand-feature-grid i{
    position:relative;
    z-index:2;
    width:58px;
    height:58px;
    border-radius:18px;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.16);
    display:grid;
    place-items:center;
    color:#fff;
    margin-bottom:20px;
}

.brand-feature-grid i::before{
    content:"";
    width:26px;
    height:26px;
    border-radius:8px;
    border:2px solid currentColor;
    transform:rotate(45deg);
    opacity:.9;
}

.brand-feature-grid h3{
    position:relative;
    z-index:2;
    color:#fff;
    font-size:20px;
    font-weight:900;
    margin-bottom:10px;
}

.brand-feature-grid p{
    position:relative;
    z-index:2;
    color:rgba(255,255,255,.72);
    font-size:14px;
    line-height:1.75;
}

/*==============================
Gallery
==============================*/

.brand-gallery{
    position:relative;
    overflow:hidden;
    padding:100px 0;
    background:
        radial-gradient(circle at 88% 15%,rgba(15,99,216,.07),transparent 32%),
        linear-gradient(180deg,#ffffff 0%,#f7f9fc 100%);
}

.gallery-grid{
    display:grid;
    grid-template-columns:1.15fr .85fr 1fr;
    grid-auto-rows:220px;
    gap:18px;
}

.gallery-grid img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:26px;
    box-shadow:0 22px 60px rgba(6,23,53,.10);
    cursor:pointer;
    transition:.35s ease;
}

.gallery-grid img:hover{
    transform:translateY(-6px) scale(1.015);
    box-shadow:0 34px 80px rgba(6,23,53,.16);
}

.gallery-grid img:nth-child(1){
    grid-row:span 2;
}

.gallery-grid img:nth-child(5){
    grid-column:span 2;
}

/*==============================
Downloads
==============================*/

.brand-downloads{
    position:relative;
    overflow:hidden;
    padding:100px 0;
    background:#fff;
}

.brand-downloads::before{
    /*content:"PDF";
    position:absolute;
    inset-inline-end:-18px;
    top:35px;
    font-size:clamp(90px,12vw,180px);
    font-weight:900;
    color:rgba(6,23,53,.035);
    letter-spacing:-6px;
    pointer-events:none;*/
}

.brand-downloads .vehicle-files-grid{
    position:relative;
    z-index:2;
}

.brand-downloads .vehicle-file-card{
    cursor:pointer;
}

.brand-downloads .vehicle-file-card i{
    background:#eef4ff;
    color:var(--navy);
}

.brand-downloads .vehicle-file-card:hover i{
    background:var(--navy);
    color:#fff;
}

/*==================================================
    BRAND DETAILS
    PART 2B
==================================================*/

/*==============================
CTA
==============================*/

.brands-cta {
    position: relative;
    overflow: hidden;
    padding: 110px 0;
    background: linear-gradient(135deg, #061735 0%, #0b2559 100%);
    color: #fff;
    text-align: center;
}

.brands-cta::before {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.08), transparent 70%);
    top: -260px;
    inset-inline-end: -120px;
}

.brands-cta::after {
    content: "";
    position: absolute;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(15,99,216,.18), transparent 70%);
    bottom: -170px;
    inset-inline-start: -120px;
}

.brands-cta .container {
    position: relative;
    z-index: 2;
}

.brands-cta h2 {
    color: #fff;
    font-size: clamp(38px, 5vw, 58px);
    line-height: 1.08;
    font-weight: 900;
    letter-spacing: -2px;
    margin-bottom: 18px;
}

.brands-cta p {
    max-width: 720px;
    margin: 0 auto 34px;
    color: rgba(255,255,255,.78);
    font-size: 17px;
    line-height: 1.9;
}

.brands-cta .primary-btn {
    min-width: 250px;
    min-height: 58px;
    justify-content: center;
    background: #fff;
    color: var(--navy);
    border-radius: 999px;
    font-weight: 900;
}

.brands-cta .primary-btn:hover {
    background: var(--blue);
    color: #fff;
    transform: translateY(-4px);
}

/*==============================
RTL
==============================*/

html[dir="rtl"] .overview-content,
html[dir="rtl"] .brand-models,
html[dir="rtl"] .brand-feature-grid,
html[dir="rtl"] .brand-downloads {
    text-align: right;
}

html[dir="rtl"] .brand-details-hero .inner-hero-content {
    text-align: right;
}

html[dir="rtl"] .vehicle-file-card {
    direction: rtl;
}

html[dir="rtl"] .brand-model-card a {
    direction: rtl;
}

html[dir="rtl"] .brand-model-card a {
    unicode-bidi: isolate;
}
html[dir="rtl"] .brands-cta h2{
  font-size: clamp(38px, 5vw, 52px);
}

html[dir="rtl"]  .overview-content h2 {
    font-size: clamp(42px, 5vw, 56px);
}


/*==============================
Responsive
==============================*/

@media (max-width: 1100px) {
    .overview-layout {
        grid-template-columns: 1fr;
        gap: 42px;
    }

    .overview-image {
        order: -1;
    }

    .overview-image img {
        height: 420px;
    }

    .brand-models-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .brand-feature-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 220px;
    }

    .gallery-grid img:nth-child(1),
    .gallery-grid img:nth-child(5) {
        grid-row: auto;
        grid-column: auto;
    }
}

@media (max-width: 768px) {
    .brand-details-hero .inner-hero-content h1 {
        font-size: 48px;
        letter-spacing: -2px;
    }

    .brand-hero-logo {
        width: 84px;
    }

    .brand-overview,
    .brand-models,
    .brand-features-section,
    .brand-gallery,
    .brand-downloads {
        padding: 72px 0;
    }

    .overview-content h2 {
        font-size: 38px;
        letter-spacing: -1px;
    }

    .overview-content p {
        font-size: 15px;
    }

    .overview-highlights,
    .brand-models-grid,
    .brand-feature-grid,
    .gallery-grid,
    .vehicle-files-grid {
        grid-template-columns: 1fr;
    }

    .overview-image img {
        height: 300px;
    }

    .brand-model-card img {
        height: 230px;
    }

    .brand-feature-grid article {
        min-height: auto;
    }

    .gallery-grid {
        grid-auto-rows: 230px;
    }

    .brands-cta {
        padding: 78px 0;
    }

    .brands-cta h2 {
        font-size: 34px;
        letter-spacing: -1px;
    }

    .brands-cta p {
        font-size: 15px;
    }

    .brands-cta .primary-btn {
        width: 100%;
    }
}

.brand-feature-grid i::before {
    display: none;
}

.brand-feature-grid i svg {
    width: 30px;
    height: 30px;
}

.brand-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(6, 23, 53, .95);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px;
}

.brand-lightbox img {
    max-width: 92vw;
    max-height: 84vh;
    object-fit: contain;
    border-radius: 22px;
    box-shadow: 0 35px 90px rgba(0,0,0,.45);
    transition: opacity .2s ease;
}

.brand-lightbox-close,
.brand-lightbox-arrow {
    position: absolute;
    border: 0;
    background: rgba(255,255,255,.12);
    color: #fff;
    cursor: pointer;
    transition: .25s ease;
}

.brand-lightbox-close {
    top: 28px;
    inset-inline-end: 28px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-size: 34px;
}

.brand-lightbox-arrow {
    top: 50%;
    transform: translateY(-50%);
    width: 58px;
    height: 58px;
    border-radius: 50%;
    font-size: 42px;
}

.brand-lightbox-arrow.prev {
    inset-inline-start: 32px;
}

.brand-lightbox-arrow.next {
    inset-inline-end: 32px;
}

.brand-lightbox-close:hover,
.brand-lightbox-arrow:hover {
    background: #fff;
    color: var(--navy);
}

.vehicle-file-card i svg {
    width: 34px;
    height: 34px;
    display: block;
}

/* =========================
   Services Page
========================= */
.services-page-hero,
.services-page-hero .inner-hero-content {
    min-height: 420px;
}

.services-page-section {
    position: relative;
    overflow: hidden;
    padding: 96px 0;
    background:
        radial-gradient(circle at 12% 14%, rgba(15,99,216,.08), transparent 34%),
        linear-gradient(180deg, #f6f8fc 0%, #ffffff 100%);
}

.services-page-section::before {
    content: "SERVICES";
    position: absolute;
    inset-inline-end: -30px;
    top: 40px;
    color: rgba(6,23,53,.04);
    font-size: clamp(90px, 10vw, 190px);
    font-weight: 900;
    letter-spacing: -7px;
    pointer-events: none;
    right: 10px;
}

.services-page-head {
    position: relative;
    z-index: 2;
    max-width: 780px;
    margin-bottom: 42px;
}

.services-page-head h2 {
    color: var(--navy-dark);
    font-size: clamp(36px, 4.4vw, 56px);
    line-height: 1.05;
    font-weight: 900;
    letter-spacing: -2px;
    margin: 14px 0 16px;
}

.services-page-head p {
    color: var(--muted);
    font-size: 16px;
    line-height: 1.85;
}

.services-page-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.service-page-card {
    position: relative;
    min-height: 300px;
    padding: 28px;
    border-radius: 28px;
    background: rgba(255,255,255,.96);
    border: 1px solid rgba(229,231,235,.95);
    box-shadow: 0 22px 60px rgba(6,23,53,.075);
    overflow: hidden;
    transition: .32s ease;
}

.service-page-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(11,37,89,.08), transparent 65%);
    opacity: 0;
    transition: .32s ease;
}

.service-page-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 34px 85px rgba(6,23,53,.14);
    border-color: rgba(15,99,216,.25);
}

.service-page-card:hover::before {
    opacity: 1;
}

.service-page-card.featured {
    grid-column: span 2;
    background:
        linear-gradient(135deg, rgba(6,23,53,.94), rgba(11,37,89,.86)),
        url("assets/images/hero-ford.jpg") center/cover no-repeat;
    color: #fff;
}

.service-page-card.featured::before {
    opacity: 1;
    background: radial-gradient(circle at 85% 15%, rgba(255,255,255,.16), transparent 32%);
}

.service-page-icon {
    position: relative;
    z-index: 2;
    width: 62px;
    height: 62px;
    border-radius: 20px;
    background: #eef4ff;
    color: var(--navy);
    display: grid;
    place-items: center;
    margin-bottom: 22px;
    transition: .32s ease;
}

.service-page-card.featured .service-page-icon {
    background: rgba(255,255,255,.14);
    color: #fff;
    border: 1px solid rgba(255,255,255,.18);
}

.service-page-card:hover .service-page-icon {
    transform: scale(1.06);
    background: var(--navy);
    color: #fff;
}

.service-page-icon svg {
    width: 30px;
    height: 30px;
}

.service-page-card > span {
    position: relative;
    z-index: 2;
    display: block;
    color: var(--navy);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    margin-bottom: 12px;
}

.service-page-card.featured > span {
    color: rgba(255,255,255,.72);
}

.service-page-card h3 {
    position: relative;
    z-index: 2;
    color: var(--navy-dark);
    font-size: 24px;
    font-weight: 900;
    letter-spacing: -.6px;
    margin-bottom: 12px;
}

.service-page-card.featured h3 {
    color: #fff;
    font-size: 34px;
}

.service-page-card p {
    position: relative;
    z-index: 2;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.75;
}

.service-page-card.featured p {
    color: rgba(255,255,255,.76);
    max-width: 620px;
}

.service-page-card a {
    position: relative;
    z-index: 2;
    display: inline-flex;
    margin-top: 24px;
    color: #fff;
    font-weight: 900;
}

.service-process-section {
    padding: 96px 0;
    background: #fff;
}

.service-process-layout {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 50px;
    align-items: center;
}

.service-process-content h2 {
    color: var(--navy-dark);
    font-size: clamp(36px, 4vw, 58px);
    line-height: 1.07;
    font-weight: 900;
    letter-spacing: -2px;
    margin: 14px 0 18px;
}

.service-process-content p {
    color: var(--muted);
    line-height: 1.85;
}

.service-steps {
    display: grid;
    gap: 16px;
}

.service-steps article {
    position: relative;
    padding: 26px 28px;
    border-radius: 26px;
    background: #f7f9fc;
    border: 1px solid rgba(229,231,235,.95);
    /*display: grid;*/
    grid-template-columns: 72px 1fr;
    gap: 18px;
    align-items: center;
    transition: .3s ease;
}

.service-steps article:hover {
    background: #fff;
    transform: translateX(8px);
    box-shadow: 0 22px 60px rgba(6,23,53,.1);
}

.service-steps strong {
    color: var(--navy);
    font-size: 34px;
    font-weight: 900;
}

.service-steps h3 {
    color: var(--navy-dark);
    font-size: 20px;
    font-weight: 900;
    margin-bottom: 6px;
}

.service-steps p {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.6;
}

.services-cta {
    position: relative;
    overflow: hidden;
    padding: 100px 0;
    text-align: center;
    background: linear-gradient(135deg, #061735 0%, #0b2559 100%);
    color: #fff;
}

.services-cta h2 {
    color: #fff;
    font-size: clamp(38px, 5vw, 66px);
    line-height: 1.08;
    font-weight: 900;
    letter-spacing: -2px;
    margin-bottom: 16px;
}

.services-cta p {
    color: rgba(255,255,255,.76);
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 30px;
}

.services-cta-actions {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

.services-cta .secondary-btn {
    color: var(--navy);;
    border-color: rgba(255,255,255,.45);
}
.services-cta .secondary-btn:hover{
  color:#fff
}

/* RTL */
html[dir="rtl"] .services-page-head,
html[dir="rtl"] .service-process-content,
html[dir="rtl"] .service-page-card,
html[dir="rtl"] .service-steps {
    text-align: right;
}

html[dir="rtl"] .inner-hero-content h1{
  font-size: clamp(36px, 4.5vw, 42px);
}
html[dir="rtl"] .service-steps article:hover {
    transform: translateX(-8px);
}
html[dir="rtl"] .services-page-head h2{
      font-size: clamp(36px, 4.4vw, 46px);
}
html[dir="rtl"] .service-process-content h2 {
    font-size: clamp(36px, 4vw, 50px);
    line-height: 1.4;
}
html[dir="rtl"] .services-cta h2{
  font-size: clamp(38px, 5vw, 46px);
}
html[dir="rtl"] .services-page-section::before {
    content: "SERVICES";
    font-size: clamp(90px, 10vw, 190px);
    left: 10px;
}
html[dir="rtl"]  .about-content h2{
  font-size: 49px;
  line-height: 1.5;
}

/* Responsive */
@media (max-width: 1000px) {
    .services-page-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .service-process-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .services-page-hero,
    .services-page-hero .inner-hero-content {
        min-height: 340px;
    }

    .services-page-section,
    .service-process-section,
    .services-cta {
        padding: 72px 0;
    }

    .services-page-grid {
        grid-template-columns: 1fr;
    }

    .service-page-card.featured {
        grid-column: auto;
    }

    .service-page-card.featured h3 {
        font-size: 28px;
    }

    .service-steps article {
        grid-template-columns: 1fr;
    }

    .services-cta-actions a {
        width: 100%;
    }
}


/*==================================================
ABOUT HERO
==================================================*/

.about-hero{
    position:relative;
}

/* =========================
   About Hero Fix
========================= */
.about-hero,
.about-hero .inner-hero-content {
    min-height: 360px;
}

.about-hero .inner-hero-bg {
    height: 100%;
    object-fit: cover;
}

.about-hero .inner-hero-content {
    max-width: none;
    align-items: flex-start;
    text-align: left;
}

html[dir="rtl"] .about-hero .inner-hero-content {
    text-align: right;
    align-items: flex-start;
}

.about-hero h1 {
    max-width: 850px;
}

.about-hero p {
    max-width: 720px;
}

@media(max-width:640px){
    .about-hero,
    .about-hero .inner-hero-content {
        min-height: 320px;
    }
}

.about-hero .inner-hero-shade{
    background:linear-gradient(180deg,
    rgba(6,23,53,.68),
    rgba(6,23,53,.55));
}


.about-hero span{
    display:inline-block;
    margin-bottom:0px;
    color:#fff;
    font-size:13px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:2px;
    opacity:.95;
}

.about-hero h1{
    color:#fff;
    font-size:clamp(42px,5vw,60px);
    line-height:1.05;
    font-weight:900;
    margin-bottom:20px;
    letter-spacing:-2px;
}

.about-hero p{
    color:rgba(255,255,255,.92);
    max-width:650px;
    line-height:1.9;
    font-size:17px;
    margin-bottom:28px;
}

.about-hero .breadcrumb{
    color:#fff;
}

.about-hero .breadcrumb a{
    color:#fff;
    opacity:.85;
}

.about-hero .breadcrumb b{
    color:#fff;
}


/*==================================================
ABOUT STORY
==================================================*/

.about-story{
    padding:100px 0;
    background:#fff;
}

.about-layout{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:center;
}

.about-image{
    position:relative;
}

.about-image img{
    width:100%;
    height:640px;
    object-fit:cover;
    border-radius:34px;
    box-shadow:0 35px 75px rgba(0,0,0,.12);
}

.experience-box{
    position:absolute;
    inset-inline-start:35px;
    bottom:35px;
    width:280px;
    background:rgba(255,255,255,.95);
    backdrop-filter:blur(14px);
    border-radius:24px;
    padding:28px;
    box-shadow:0 25px 60px rgba(0,0,0,.18);
}

.experience-box strong{
    display:block;
    font-size:58px;
    font-weight:900;
    color:var(--navy);
    line-height:1;
}

.experience-box span{
    display:block;
    margin-top:12px;
    color:var(--muted);
    line-height:1.7;
    font-weight:700;
}

.about-content h2{
    font-size:46px;
    line-height:1.08;
    color:var(--navy-dark);
    margin:16px 0 24px;
}

.about-content>p{
    color:var(--muted);
    line-height:1.9;
    margin-bottom:20px;
    font-size:16px;
}

.about-highlights{
    display:grid;
    gap:18px;
    margin:36px 0 38px;
}

.about-highlights article{
    display:flex;
    gap:18px;
    align-items:flex-start;
    padding:22px;
    border:1px solid var(--border);
    border-radius:22px;
    transition:.3s;
}

.about-highlights article:hover{
    transform:translateY(-6px);
    box-shadow:0 20px 50px rgba(0,0,0,.08);
    border-color:var(--navy);
}

.about-highlights svg{
    width:28px;
    height:28px;
    color:var(--navy);
    flex-shrink:0;
}

.about-highlights h3{
    margin-bottom:6px;
    color:var(--navy-dark);
    font-size:18px;
}

.about-highlights p{
    margin:0;
    color:var(--muted);
    font-size:14px;
    line-height:1.8;
}


/*==================================================
NUMBERS
==================================================*/

.about-numbers{
    padding:0 0 100px;
    background:#fff;
}

.numbers-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
}

.numbers-grid article{
    background:#fff;
    border:1px solid var(--border);
    border-radius:26px;
    padding:36px;
    text-align:center;
    transition:.3s;
    box-shadow:0 18px 45px rgba(0,0,0,.06);
}

.numbers-grid article:hover{
    transform:translateY(-8px);
    border-color:var(--navy);
    box-shadow:0 28px 60px rgba(0,0,0,.10);
}

.numbers-grid strong{
    display:block;
    color:var(--navy);
    font-size:58px;
    font-weight:900;
    line-height:1;
    margin-bottom:16px;
}

.numbers-grid span{
    display:block;
    color:var(--muted);
    font-size:15px;
    font-weight:700;
    line-height:1.6;
}


/*==================================================
COMMON SECTION HEAD
==================================================*/

.about-section-head{
    max-width:720px;
    margin:0 auto 60px;
    text-align:center;
}

.about-section-head h2{
    font-size:38px;
    color:var(--navy-dark);
    margin:16px 0;
    line-height:1.1;
}

.about-section-head p{
    color:var(--muted);
    line-height:1.9;
}

.about-section-head.light h2,
.about-section-head.light p,
.about-section-head.light .section-kicker{
    color:#fff;
}


/*==================================================
RESPONSIVE
==================================================*/

@media(max-width:992px){

.about-layout{
grid-template-columns:1fr;
gap:40px;
}

.about-image img{
height:460px;
}

.experience-box{
position:relative;
left:auto;
right:auto;
bottom:auto;
width:100%;
margin-top:18px;
}

.numbers-grid{
grid-template-columns:repeat(2,1fr);
}

.about-content h2{
font-size:42px;
}

}

@media(max-width:640px){

.about-story{
padding:70px 0;
}

.about-numbers{
padding-bottom:70px;
}

.numbers-grid{
grid-template-columns:1fr;
}

.about-section-head h2{
font-size:34px;
}

.about-hero .inner-hero-bg{
height:300px;
}

.about-content h2{
font-size:34px;
}

}
/*==================================================
TIMELINE
==================================================*/

.about-timeline{
    padding:100px 0;
    background:linear-gradient(180deg,#f8fafe 0%,#ffffff 100%);
}

.timeline-track{
    position:relative;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:28px;
    margin-top:60px;
}

.timeline-track::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:38px;
    height:2px;
    background:linear-gradient(90deg,var(--blue),var(--navy));
}

.timeline-track article{
    position:relative;
    background:#fff;
    border-radius:26px;
    padding:70px 28px 28px;
    border:1px solid var(--border);
    box-shadow:0 18px 45px rgba(0,0,0,.06);
    transition:.3s;
}

.timeline-track article::before{
    content:"";
    position:absolute;
    top:24px;
    left:50%;
    transform:translateX(-50%);
    width:18px;
    height:18px;
    border-radius:50%;
    background:var(--blue);
    border:5px solid #fff;
    box-shadow:0 0 0 4px rgba(15,99,216,.18);
}

.timeline-track article:hover{
    transform:translateY(-8px);
    box-shadow:0 30px 65px rgba(0,0,0,.10);
}

.timeline-track strong{
    display:block;
    color:var(--blue);
    font-size:34px;
    font-weight:900;
    margin-bottom:12px;
}

.timeline-track h3{
    color:var(--navy-dark);
    margin-bottom:10px;
    font-size:20px;
}

.timeline-track p{
    color:var(--muted);
    line-height:1.8;
    font-size:14px;
}

/*==================================================
VALUES
==================================================*/

.about-values{
    padding:100px 0;
    background:#fff;
}

.values-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:26px;
}

.values-grid article{
    position:relative;
    padding:42px 34px;
    border-radius:28px;
    background:#fff;
    border:1px solid var(--border);
    box-shadow:0 18px 45px rgba(0,0,0,.06);
    transition:.3s;
}

.values-grid article:hover{
    transform:translateY(-8px);
    box-shadow:0 28px 60px rgba(0,0,0,.10);
}

.values-grid span{
    display:inline-flex;
    width:54px;
    height:54px;
    border-radius:16px;
    background:#eef4ff;
    color:var(--blue);
    align-items:center;
    justify-content:center;
    font-size:22px;
    font-weight:900;
    margin-bottom:26px;
}

.values-grid h3{
    font-size:26px;
    color:var(--navy-dark);
    margin-bottom:14px;
}

.values-grid p{
    color:var(--muted);
    line-height:1.9;
}

/*==================================================
TRUST
==================================================*/

.about-trust{
    padding:110px 0;
    background:linear-gradient(135deg,var(--navy),#163b78);
}

.trust-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
}

.trust-grid article{
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.12);
    border-radius:28px;
    padding:34px 28px;
    backdrop-filter:blur(12px);
    transition:.3s;
}

.trust-grid article:hover{
    background:rgba(255,255,255,.13);
    transform:translateY(-8px);
}

.trust-grid i{
    width:68px;
    height:68px;
    border-radius:18px;
    background:rgba(255,255,255,.12);
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:24px;
}

.trust-grid svg{
    width:32px;
    height:32px;
    color:#fff;
}

.trust-grid h3{
    color:#fff;
    margin-bottom:10px;
}

.trust-grid p{
    color:rgba(255,255,255,.82);
    line-height:1.8;
    margin:0;
}

/*==================================================
GALLERY
==================================================*/

.about-gallery{
    padding:100px 0;
    background:#fff;
}

.about-gallery-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
}

.about-gallery-grid img{
    width:100%;
    height:280px;
    object-fit:cover;
    border-radius:24px;
    transition:.35s;
    cursor:pointer;
    box-shadow:0 18px 40px rgba(0,0,0,.08);
}

.about-gallery-grid img:hover{
    transform:scale(1.03);
}

/*==================================================
BRANDS
==================================================*/

.about-brands-preview{
    padding:90px 0;
    background:#f7f9fc;
}

.about-brands-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
}

.about-brands-grid a{
    background:#fff;
    border-radius:24px;
    padding:28px;
    text-align:center;
    border:1px solid var(--border);
    transition:.3s;
}

.about-brands-grid a:hover{
    transform:translateY(-8px);
    box-shadow:0 24px 55px rgba(0,0,0,.10);
}

.about-brands-grid img{
    height:72px;
    object-fit:contain;
    margin-bottom:18px;
}

.about-brands-grid span{
    display:block;
    color:var(--navy-dark);
    font-weight:800;
}

/*==================================================
CTA
==================================================*/

.about-cta{
    padding:110px 0;
    text-align:center;
    background:linear-gradient(135deg,var(--navy-dark),var(--blue));
    color:#fff;
}

.about-cta h2{
    font-size:clamp(38px,5vw,52px);
    margin-bottom:20px;
}

.about-cta p{
    max-width:720px;
    margin:0 auto 34px;
    line-height:1.9;
    color:rgba(255,255,255,.88);
}

.about-cta-actions{
    display:flex;
    justify-content:center;
    gap:18px;
    flex-wrap:wrap;
}

/*==================================================
RESPONSIVE
==================================================*/

@media(max-width:1100px){

.timeline-track,
.trust-grid,
.about-brands-grid{
grid-template-columns:repeat(2,1fr);
}

.values-grid{
grid-template-columns:1fr;
}

.about-gallery-grid{
grid-template-columns:repeat(2,1fr);
}

}

@media(max-width:640px){

.about-timeline,
.about-values,
.about-trust,
.about-gallery,
.about-brands-preview,
.about-cta{
padding:70px 0;
}

.timeline-track,
.trust-grid,
.about-brands-grid,
.about-gallery-grid{
grid-template-columns:1fr;
}

.timeline-track::before{
display:none;
}

.timeline-track article{
padding-top:34px;
}

.timeline-track article::before{
display:none;
}

.about-cta h2{
font-size:34px;
}

.about-cta-actions{
flex-direction:column;
}

.about-cta-actions a{
width:100%;
justify-content:center;
}

}


/* =========================
   About Hero Correct Fix
========================= */
.about-hero,
.about-hero .inner-hero-content {
    min-height: 460px !important;
}

.about-hero .inner-hero-bg {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
}

.about-hero .inner-hero-content {
    max-width: none !important;
    align-items: flex-start;
    justify-content: center;
    text-align: start;
}

.about-hero h1 {
    max-width: 900px;
}

.about-hero p {
    max-width: 720px;
}

@media(max-width: 640px) {
    .about-hero,
    .about-hero .inner-hero-content {
        min-height: 360px !important;
    }
}

/* =========================
   About Lightbox - No Library
========================= */
.no-scroll {
    overflow: hidden;
}

.about-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(6, 23, 53, .96);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 70px;
}

.about-lightbox img {
    max-width: 92vw;
    max-height: 84vh;
    object-fit: contain;
    border-radius: 22px;
    box-shadow: 0 35px 90px rgba(0,0,0,.45);
    transition: opacity .18s ease;
}

.about-lightbox-close,
.about-lightbox-arrow {
    position: absolute;
    border: 0;
    background: rgba(255,255,255,.13);
    color: #fff;
    cursor: pointer;
    transition: .25s ease;
}

.about-lightbox-close {
    top: 28px;
    inset-inline-end: 28px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-size: 34px;
}

.about-lightbox-arrow {
    top: 50%;
    transform: translateY(-50%);
    width: 58px;
    height: 58px;
    border-radius: 50%;
    font-size: 42px;
}

.about-lightbox-prev {
    inset-inline-start: 32px;
}

.about-lightbox-next {
    inset-inline-end: 32px;
}

.about-lightbox-close:hover,
.about-lightbox-arrow:hover {
    background: #fff;
    color: var(--navy);
}

/* =========================
   Reveal Fix
========================= */
.timeline-track article,
.values-grid article,
.trust-grid article,
.about-brands-grid a {
    opacity: 1;
    transform: none;
}

.timeline-track article.revealed,
.values-grid article.revealed,
.trust-grid article.revealed,
.about-brands-grid a.revealed {
    opacity: 1;
    transform: none;
}

/*==================================================
CONTACT PAGE
==================================================*/

.contact-page-hero,
.contact-page-hero .inner-hero-content{
    min-height:420px;
}

.contact-page-section{
    padding:100px 0;
    background:
    radial-gradient(circle at 12% 18%,rgba(15,99,216,.07),transparent 34%),
    linear-gradient(180deg,#f7f9fc 0%,#fff 100%);
}

.contact-page-layout{
    display:grid;
    grid-template-columns:.95fr 1.05fr;
    gap:44px;
    align-items:start;
}

.contact-page-info h2{
    font-size:clamp(38px,4.5vw,48px);
    line-height:1.5;
    color:var(--navy-dark);
    margin:16px 0 20px;
}

.contact-page-info p{
    color:var(--muted);
    line-height:1.9;
    margin-bottom:34px;
}

.contact-page-cards{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:16px;
}

.contact-page-cards a{
    background:#fff;
    border:1px solid var(--border);
    border-radius:24px;
    padding:22px;
    box-shadow:0 18px 45px rgba(0,0,0,.06);
    transition:.3s;
}

.contact-page-cards a:hover{
    transform:translateY(-6px);
    box-shadow:0 28px 60px rgba(0,0,0,.1);
}

.contact-page-cards i{
    width:48px;
    height:48px;
    border-radius:16px;
    background:#eef4ff;
    color:var(--navy);
    display:grid;
    place-items:center;
    margin-bottom:14px;
}

.contact-page-cards svg{
    width:24px;
    height:24px;
}

.contact-page-cards b{
    display:block;
    color:var(--navy-dark);
    margin-bottom:6px;
}

.contact-page-cards span{
    color:var(--muted);
    font-size:14px;
}

.contact-page-form{
    background:#fff;
    border-radius:32px;
    padding:34px;
    border:1px solid var(--border);
    box-shadow:0 28px 70px rgba(0,0,0,.09);
}

.contact-page-form h3{
    font-size:30px;
    color:var(--navy-dark);
    margin-bottom:24px;
}

.form-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;
}

.form-group.full{
    grid-column:1/-1;
}

.form-group label{
    display:block;
    color:var(--navy-dark);
    font-size:13px;
    font-weight:800;
    margin-bottom:8px;
}

.form-group input,
.form-group select,
.form-group textarea{
    width:90%;
    border:1px solid var(--border);
    background:#f8faff;
    border-radius:16px;
    padding:14px 16px;
    font-family:inherit;
    color:var(--navy-dark);
    outline:none;
    transition:.25s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
    border-color:var(--blue);
    background:#fff;
}

.contact-page-form button{
    margin-top:24px;
    font-family: "Inter", "IBM Plex Sans Arabic", sans-serif;
}

.contact-map-section{
    padding:0 0 100px;
    background:#fff;
}

.contact-map-layout{
    display:grid;
    grid-template-columns:1.15fr .85fr;
    gap:28px;
}

.contact-map-box,
.contact-test-drive-box{
    border-radius:32px;
    overflow:hidden;
    border:1px solid var(--border);
    box-shadow:0 24px 60px rgba(0,0,0,.08);
}

.contact-map-box{
    min-height:420px;
}

.map-placeholder{
    min-height:420px;
    height:100%;
    background:
    linear-gradient(135deg,rgba(6,23,53,.78),rgba(11,37,89,.45)),
    url("assets/images/8.jpg") center/cover no-repeat;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:20px;
    color:#fff;
}

.map-placeholder span{
    font-size:34px;
    font-weight:900;
}

.contact-test-drive-box{
    padding:44px;
    background:linear-gradient(135deg,var(--navy),var(--blue));
    color:#fff;
}

.contact-test-drive-box h2{
    color:#fff;
    font-size:42px;
    line-height:1.1;
    margin:16px 0;
}

.contact-test-drive-box p{
    color:rgba(255,255,255,.82);
    line-height:1.8;
    margin-bottom:26px;
}

.contact-test-drive-box .primary-btn{
    background:#fff;
    color:var(--navy);
}

html[dir="rtl"] .contact-value{
    direction: ltr;
    unicode-bidi: bidi-override;
    display: inline-block;
}

/* RTL */
html[dir="rtl"] .contact-page-info,
html[dir="rtl"] .contact-page-form,
html[dir="rtl"] .contact-test-drive-box{
    text-align:right;
}

/* Responsive */
@media(max-width:1000px){
    .contact-page-layout,
    .contact-map-layout{
        grid-template-columns:1fr;
    }
}

@media(max-width:640px){
    .contact-page-section{
        padding:70px 0;
    }

    .contact-page-cards,
    .form-grid{
        grid-template-columns:1fr;
    }

    .contact-page-form{
        padding:24px;
    }

    .contact-map-section{
        padding-bottom:70px;
    }

    .contact-test-drive-box{
        padding:30px;
    }
}

/*==================================================
TEST DRIVE PAGE
==================================================*/

.test-drive-hero,
.test-drive-hero .inner-hero-content {
    min-height: 430px;
}

.test-drive-section {
    padding: 100px 0;
    background:
        radial-gradient(circle at 12% 18%, rgba(15,99,216,.08), transparent 34%),
        linear-gradient(180deg, #f7f9fc 0%, #fff 100%);
}

.test-drive-layout {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 46px;
    align-items: start;
}

.test-drive-intro h2 {
    color: var(--navy-dark);
    font-size: clamp(38px, 4.5vw, 62px);
    line-height: 1.07;
    font-weight: 900;
    letter-spacing: -2px;
    margin: 16px 0 20px;
}

.test-drive-intro > p {
    color: var(--muted);
    line-height: 1.9;
    margin-bottom: 32px;
}

.test-drive-steps {
    display: grid;
    gap: 16px;
}

.test-drive-steps article {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 18px 45px rgba(0,0,0,.06);
    transition: .3s;
}

.test-drive-steps article:hover {
    transform: translateX(8px);
    box-shadow: 0 28px 60px rgba(0,0,0,.1);
}

.test-drive-steps strong {
    display: block;
    color: var(--blue);
    font-size: 34px;
    font-weight: 900;
    margin-bottom: 10px;
}

.test-drive-steps h3 {
    color: var(--navy-dark);
    font-size: 20px;
    margin-bottom: 8px;
}

.test-drive-steps p {
    color: var(--muted);
    line-height: 1.7;
    margin: 0;
}

.test-drive-form-box {
    background: #fff;
    border-radius: 32px;
    padding: 34px;
    border: 1px solid var(--border);
    box-shadow: 0 30px 80px rgba(0,0,0,.1);
}

.test-drive-form h3 {
    color: var(--navy-dark);
    font-size: 32px;
    margin-bottom: 26px;
}

.test-drive-form button {
    margin-top: 24px;
}

.test-drive-help {
    padding: 0 0 100px;
    background: #fff;
}

.test-drive-help-inner {
    border-radius: 34px;
    padding: 52px;
    background:
        linear-gradient(135deg, rgba(6,23,53,.95), rgba(11,37,89,.88)),
        url("assets/images/hero-ford.jpg") center/cover no-repeat;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    box-shadow: 0 30px 80px rgba(0,0,0,.16);
}

.test-drive-help h2 {
    color: #fff;
    font-size: clamp(34px, 4vw, 56px);
    line-height: 1.08;
    margin: 14px 0;
}

.test-drive-help p {
    color: rgba(255,255,255,.78);
    max-width: 620px;
    line-height: 1.85;
}

.test-drive-help-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.test-drive-help .secondary-btn {
    color: #0b2559;
    border-color: rgba(255,255,255,.48);
}
.test-drive-help .secondary-btn:hover {
    color: #fff;
}

/* RTL */
html[dir="rtl"] .test-drive-intro,
html[dir="rtl"] .test-drive-form-box {
    text-align: right;
}

html[dir="rtl"] .test-drive-steps article:hover {
    transform: translateX(-8px);
}

/* Responsive */
@media(max-width:1000px) {
    .test-drive-layout {
        grid-template-columns: 1fr;
    }

    .test-drive-help-inner {
        display: block;
    }

    .test-drive-help-actions {
        margin-top: 28px;
    }
}

@media(max-width:640px) {
    .test-drive-section {
        padding: 70px 0;
    }

    .test-drive-form-box {
        padding: 24px;
    }

    .test-drive-help {
        padding-bottom: 70px;
    }

    .test-drive-help-inner {
        padding: 32px;
        border-radius: 26px;
    }

    .test-drive-help-actions a {
        width: 100%;
        justify-content: center;
    }
}

/*==================================================
NEWS PAGE
==================================================*/

.news-hero,
.news-hero .inner-hero-content {
    min-height: 420px;
}

.news-page-section {
    padding: 100px 0;
    background:
        radial-gradient(circle at 12% 15%, rgba(15,99,216,.08), transparent 34%),
        linear-gradient(180deg, #f7f9fc 0%, #ffffff 100%);
}

.news-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 38px;
}

.news-page-head h2 {
    color: var(--navy-dark);
    font-size: clamp(36px, 4.5vw, 62px);
    line-height: 1.07;
    font-weight: 900;
    letter-spacing: -2px;
    margin-top: 14px;
}

.news-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.news-filters button {
    min-height: 42px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid rgba(11,37,89,.16);
    background: #fff;
    color: var(--navy);
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
    transition: .25s ease;
}

.news-filters button:hover,
.news-filters button.active {
    background: var(--navy);
    color: #fff;
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.news-card {
    background: #fff;
    border-radius: 28px;
    overflow: hidden;
    border: 1px solid rgba(229,231,235,.95);
    box-shadow: 0 22px 60px rgba(6,23,53,.075);
    transition: .32s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.news-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 34px 85px rgba(6,23,53,.14);
}

.news-img {
    position: relative;
    display: block;
    height: 240px;
    overflow: hidden;
    background: #061735;
}

.news-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .55s ease;
}

.news-card:hover .news-img img {
    transform: scale(1.06);
}

.news-img span {
    position: absolute;
    top: 18px;
    inset-inline-start: 18px;
    z-index: 2;
    background: rgba(255,255,255,.94);
    color: var(--navy);
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 900;
}

.news-content {
    padding: 26px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.news-meta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 14px;
}

.news-content h3 {
    font-size: 23px;
    line-height: 1.3;
    margin-bottom: 0px;
    min-height: 50px;
}

.news-content h3 a {
    color: var(--navy-dark);
}

.news-content p {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.8;
    margin-bottom: 18px;
    flex: 1;
    margin-top: 0
}

.read-more {
    color: var(--navy);
    font-size: 13px;
    font-weight: 900;
    margin-top: auto;
}

html[dir="rtl"] .news-page-head,
html[dir="rtl"] .news-content {
    text-align: right;
}

@media(max-width: 1000px) {
    .news-page-head {
        display: block;
    }

    .news-filters {
        margin-top: 22px;
    }

    .news-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(max-width: 700px) {
    .news-page-section {
        padding: 70px 0;
    }

    .news-grid {
        grid-template-columns: 1fr;
    }

    .news-img {
        height: 230px;
    }

    .news-content h3 {
        min-height: auto;
        font-size: 22px;
    }
}

/*==================================================
NEWS DETAILS PAGE
==================================================*/

.news-details-hero,
.news-details-hero .inner-hero-content {
    min-height: 460px;
}

.news-details-hero .inner-hero-content h1 {
    max-width: 900px;
}

.news-details-section {
    padding: 100px 0;
    background:
        radial-gradient(circle at 12% 15%, rgba(15,99,216,.07), transparent 34%),
        linear-gradient(180deg, #f7f9fc 0%, #ffffff 100%);
}

.news-details-layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 34px;
    align-items: start;
}

.news-article {
    background: #fff;
    border: 1px solid rgba(229,231,235,.95);
    border-radius: 32px;
    padding: 42px;
    box-shadow: 0 28px 75px rgba(6,23,53,.09);
}

.news-article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 22px;
}

.news-article-meta span {
    background: #eef4ff;
    color: var(--navy);
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 900;
}

.news-article h2 {
    color: var(--navy-dark);
    font-size: clamp(32px, 4vw, 38px);
    line-height: 1.5;
    font-weight: 700;
    letter-spacing: -1.5px;
    margin-bottom: 24px;
}

.news-article h3 {
    color: var(--navy-dark);
    font-size: 28px;
    margin: 32px 0 16px;
}

.news-article p {
    color: var(--muted);
    font-size: 16px;
    line-height: 1.95;
    margin-bottom: 24px;
}

.news-main-photo {
    width: 100%;
    height: 430px;
    object-fit: cover;
    border-radius: 26px;
    margin: 14px 0 28px;
    box-shadow: 0 24px 65px rgba(6,23,53,.10);
}

.news-article blockquote {
    margin: 34px 0;
    padding: 30px;
    border-radius: 24px;
    background: linear-gradient(135deg, #061735, #0b2559);
    color: #fff;
    font-size: 20px;
    line-height: 1.8;
    font-weight: 800;
}

.news-article ul {
    display: grid;
    gap: 12px;
    margin-bottom: 34px;
}

.news-article li {
    list-style: none;
    position: relative;
    padding-inline-start: 30px;
    color: var(--muted);
    line-height: 1.8;
}

.news-article li::before {
    content: "✓";
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    color: var(--blue);
    font-weight: 900;
}

.news-details-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.news-sidebar {
    position: sticky;
    top: 110px;
    display: grid;
    gap: 20px;
}

.sidebar-box,
.sidebar-cta {
    background: #fff;
    border: 1px solid rgba(229,231,235,.95);
    border-radius: 28px;
    padding: 24px;
    box-shadow: 0 22px 60px rgba(6,23,53,.08);
}

.sidebar-box h3,
.sidebar-cta h3 {
    color: var(--navy-dark);
    font-size: 22px;
    margin-bottom: 18px;
}

.related-news {
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
}

.related-news:last-child {
    border-bottom: 0;
}

.related-news img {
    width: 92px;
    height: 72px;
    object-fit: cover;
    border-radius: 16px;
}

.related-news b {
    display: block;
    color: var(--navy-dark);
    font-size: 14px;
    line-height: 1.45;
    margin-bottom: 6px;
}

.related-news span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.sidebar-cta {
    background: linear-gradient(135deg, #061735, #0b2559);
    color: #fff;
}

.sidebar-cta span {
    color: rgba(255,255,255,.72);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.sidebar-cta h3 {
    color: #fff;
    margin-top: 10px;
}

.sidebar-cta p {
    color: rgba(255,255,255,.76);
    line-height: 1.75;
    margin-bottom: 20px;
}

.sidebar-cta .primary-btn {
    background: #fff;
    color: var(--navy);
}

html[dir="rtl"] .news-article,
html[dir="rtl"] .news-sidebar {
    text-align: right;
}

@media(max-width: 1000px) {
    .news-details-layout {
        grid-template-columns: 1fr;
    }

    .news-sidebar {
        position: relative;
        top: auto;
    }
}

@media(max-width: 640px) {
    .news-details-section {
        padding: 70px 0;
    }

    .news-article {
        padding: 24px;
        border-radius: 26px;
    }

    .news-main-photo {
        height: 260px;
    }

    .news-article blockquote {
        font-size: 17px;
        padding: 22px;
    }

    .news-details-actions a {
        width: 100%;
        justify-content: center;
    }
}

/*==================================================
CONTENT PAGE
==================================================*/

.content-page-hero,
.content-page-hero .inner-hero-content{
    min-height:420px;
}

.content-page-section{
    padding:100px 0;
    background:
    radial-gradient(circle at 12% 18%,rgba(15,99,216,.06),transparent 34%),
    linear-gradient(180deg,#f7f9fc 0%,#ffffff 100%);
}

.content-page-layout{
    display:grid;
    grid-template-columns:300px minmax(1fr);
    gap:42px;
    align-items:start;
}

/*=========================================
SIDEBAR
=========================================*/

.content-sidebar{
    position:sticky;
    top:110px;
    display:flex;
    flex-direction:column;
    gap:22px;
}

.content-sidebar-card{
    background:#fff;
    border:1px solid var(--border);
    border-radius:28px;
    padding:28px;
    box-shadow:0 18px 45px rgba(0,0,0,.06);
}

.content-sidebar-card>span{
    display:block;
    color:var(--blue);
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:2px;
    margin-bottom:18px;
}

.content-toc{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.content-toc a{
    color:var(--navy-dark);
    padding:12px 14px;
    border-radius:14px;
    transition:.25s;
    font-weight:700;
}

.content-toc a:hover{
    background:#eef4ff;
    color:var(--blue);
    padding-inline-start:22px;
}

.support-card h3{
    color:var(--navy-dark);
    font-size:24px;
    margin:12px 0;
}

.support-card p{
    color:var(--muted);
    line-height:1.8;
    margin-bottom:22px;
}

/*=========================================
ARTICLE
=========================================*/

.content-article{
    background:#fff;
    border:1px solid var(--border);
    border-radius:34px;
    padding:50px;
    box-shadow:0 24px 70px rgba(0,0,0,.08);
}

.content-article-meta{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:34px;
    font-size:13px;
    color:var(--muted);
}

.content-article-meta strong{
    color:var(--navy);
}

.content-article section+section{
    margin-top:55px;
}

.content-article h2{
    color:var(--navy-dark);
    font-size:34px;
    font-weight:900;
    margin-bottom:22px;
    line-height:1.2;
}

.content-article p{
    color:var(--muted);
    font-size:17px;
    line-height:2;
    margin-bottom:24px;
}

.content-article ul{
    margin:24px 0;
    display:flex;
    flex-direction:column;
    gap:16px;
}

.content-article li{
    list-style:none;
    position:relative;
    padding-inline-start:34px;
    color:var(--muted);
    line-height:1.9;
}

.content-article li::before{
    content:"";
    position:absolute;
    inset-inline-start:0;
    top:10px;
    width:10px;
    height:10px;
    border-radius:50%;
    background:var(--blue);
}

.content-article blockquote{
    margin:42px 0;
    padding:34px;
    border-radius:28px;
    background:linear-gradient(135deg,var(--navy),#153d7d);
    color:#fff;
    font-size:22px;
    font-weight:700;
    line-height:1.8;
    box-shadow:0 24px 60px rgba(0,0,0,.16);
}

/*=========================================
TABLES
=========================================*/

.content-article table{
    width:100%;
    border-collapse:collapse;
    margin:30px 0;
}

.content-article th{
    background:#eef4ff;
    color:var(--navy-dark);
    padding:16px;
    text-align:start;
    font-weight:800;
}

.content-article td{
    padding:16px;
    border-bottom:1px solid var(--border);
}

/*=========================================
IMAGES
=========================================*/

.content-article img{
    width:100%;
    border-radius:24px;
    margin:32px 0;
    box-shadow:0 20px 55px rgba(0,0,0,.10);
}

/*=========================================
RTL
=========================================*/

html[dir="rtl"] .content-sidebar,
html[dir="rtl"] .content-article{
    text-align:right;
}

html[dir="rtl"] .content-toc a:hover{
    padding-inline-start:14px;
    padding-inline-end:22px;
}

/*=========================================
RESPONSIVE
=========================================*/

@media(max-width:1100px){

.content-page-layout{
grid-template-columns:1fr;
}

.content-sidebar{
position:relative;
top:auto;
order:2;
}

.content-article{
order:1;
}

}

@media(max-width:640px){

.content-page-section{
padding:70px 0;
}

.content-article{
padding:28px;
border-radius:26px;
}

.content-sidebar-card{
padding:22px;
border-radius:22px;
}

.content-article h2{
font-size:28px;
}

.content-article blockquote{
font-size:18px;
padding:24px;
}

}

/*==================================================
404 PAGE
==================================================*/

.error404-section{
    min-height:calc(100vh - 180px);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:100px 0;
    overflow:hidden;
    position:relative;
    background:
    radial-gradient(circle at 15% 20%,rgba(15,99,216,.08),transparent 34%),
    linear-gradient(180deg,#f7f9fc,#fff);
}

.error404-wrap{
    position:relative;
    max-width:760px;
    margin:auto;
    text-align:center;
}

.error-code{
    position:absolute;
    left:50%;
    top:-70px;
    transform:translateX(-50%);
    font-size:220px;
    font-weight:900;
    color:rgba(6,23,53,.045);
    line-height:1;
    user-select:none;
    pointer-events:none;
}

.error404-wrap img{
    width:min(100%,480px);
    margin-bottom:30px;
}

.error404-wrap h1{
    font-size:clamp(40px,5vw,68px);
    color:var(--navy-dark);
    line-height:1.05;
    margin:18px 0;
}

.error404-wrap p{
    max-width:620px;
    margin:0 auto 36px;
    color:var(--muted);
    line-height:1.9;
}

.error-buttons{
    display:flex;
    justify-content:center;
    gap:18px;
    flex-wrap:wrap;
    margin-bottom:36px;
}

.error-links{
    display:flex;
    justify-content:center;
    gap:28px;
    flex-wrap:wrap;
}

.error-links a{
    color:var(--navy);
    font-weight:700;
}

html[dir="rtl"] .error404-wrap{
    text-align:center;
}
html[dir="rtl"] .error404-wrap h1{
      margin: 40px 0;
}

@media(max-width:640px){

.error404-section{
padding:70px 0;
}

.error-code{
font-size:120px;
top:-20px;
}

.error404-wrap img{
width:260px;
}

.error-buttons a{
width:100%;
justify-content:center;
}

.header-inner {
    grid-template-columns: 150px 1fr auto;
}
}

.header-social{
    display:flex;
    align-items:center;
    gap:10px;
    margin-inline-end:20px;
}

.header-social a{
    width:38px;
    height:38px;
    border-radius:50%;
    border:1px solid rgba(11,37,89,.12);
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--navy);
    transition:.25s;
}

.header-social a:hover{
    background:var(--navy);
    color:#fff;
    transform:translateY(-2px);
    box-shadow:0 12px 30px rgba(11,37,89,.18);
}

.about-highlight-number {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: block;
    color: var(--primary-color, #263653);
}

.about-highlights article {
    display: flex;
    align-items: flex-start;
    gap: 22px;
}

.about-highlights article > div {
    flex: 1;
    min-width: 0;
}

.about-highlights article h3 {
    margin-top: 0;
}

html[dir="rtl"] .about-highlights article {
    text-align: right;
}
.hidden-field{
  visibility: hidden;
}

/* =========================================================
   Frontend Pagination
========================================================= */

.frontend-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 45px auto 0;
    padding: 0 15px 60px;
}

.frontend-pagination a {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(15, 35, 65, 0.14);
    border-radius: 12px;
    background: #ffffff;
    color: #17263f;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.frontend-pagination a:hover {
    border-color: #17263f;
    background: #17263f;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(15, 35, 65, 0.16);
}

.frontend-pagination a.is-active,
.frontend-pagination a[aria-current="page"] {
    border-color: #17263f;
    background: #17263f;
    color: #ffffff;
    box-shadow: 0 10px 24px rgba(15, 35, 65, 0.18);
    pointer-events: none;
}

.frontend-pagination .pagination-arrow {
    font-size: 24px;
    font-weight: 500;
}

html[dir="rtl"] .frontend-pagination .pagination-prev,
html[dir="rtl"] .frontend-pagination .pagination-next {
    transform: scaleX(-1);
}

html[dir="rtl"] .frontend-pagination .pagination-prev:hover,
html[dir="rtl"] .frontend-pagination .pagination-next:hover {
    transform: scaleX(-1) translateY(-2px);
}

@media (max-width: 575px) {
    .frontend-pagination {
        gap: 7px;
        margin-top: 35px;
        padding-bottom: 45px;
    }

    .frontend-pagination a {
        width: 38px;
        height: 38px;
        border-radius: 10px;
        font-size: 14px;
    }

    .frontend-pagination .pagination-arrow {
        font-size: 21px;
    }
}

/* =========================================================
   Article Images Lightbox
========================================================= */

.news-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 70px 30px 30px;

    background: rgba(4, 15, 35, 0.94);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease;
}

.news-lightbox.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.news-lightbox img {
    display: block;

    width: auto;
    height: auto;

    max-width: min(1200px, 92vw);
    max-height: 86vh;

    object-fit: contain;

    border-radius: 18px;

    box-shadow:
        0 25px 80px rgba(0, 0, 0, 0.45);

    transform: scale(0.96);
    transition: transform 0.25s ease;
}

.news-lightbox.is-active img {
    transform: scale(1);
}

.news-lightbox-close {
    position: absolute;
    top: 20px;
    right: 25px;

    width: 48px;
    height: 48px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;

    font-family: Arial, sans-serif;
    font-size: 32px;
    font-weight: 300;
    line-height: 1;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.news-lightbox-close:hover {
    background: #ffffff;
    border-color: #ffffff;
    color: #10284f;
    transform: rotate(90deg);
}

body.news-lightbox-open {
    overflow: hidden;
}


/* =========================================================
   Clickable Article Images
========================================================= */

.news-article a[data-article-lightbox],
.news-gallery-item a[data-article-lightbox] {
    display: block;
    cursor: zoom-in;
}

.news-article a[data-article-lightbox] img,
.news-gallery-item a[data-article-lightbox] img {
    display: block;
}


/* =========================================================
   Mobile
========================================================= */

@media (max-width: 767px) {
    .news-lightbox {
        padding: 65px 15px 20px;
    }

    .news-lightbox img {
        max-width: 100%;
        max-height: 82vh;
        border-radius: 12px;
    }

    .news-lightbox-close {
        top: 12px;
        right: 15px;

        width: 42px;
        height: 42px;

        font-size: 28px;
    }
}


/* RTL keeps the close button visually consistent */
html[dir="rtl"] .news-lightbox-close {
    right: auto;
    left: 25px;
}

@media (max-width: 767px) {
    html[dir="rtl"] .news-lightbox-close {
        right: auto;
        left: 15px;
    }
}

/* =========================================================
   Default Section — Text List
========================================================= */

.default-list-section {
    padding: 80px 0;
    background: #ffffff;
}

.default-list-group {
    border-top: 1px solid rgba(15, 35, 65, 0.14);
}

.default-list-group + .default-list-group {
    margin-top: 42px;
}

.default-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 30px 0;
    border-bottom: 1px solid rgba(15, 35, 65, 0.14);
}

.default-list-content {
    flex: 1;
    min-width: 0;
}

.default-list-date {
    display: block;
    margin-bottom: 9px;
    color: rgba(23, 38, 63, 0.62);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.03em;
}

.default-list-item h2 {
    margin: 0;
    font-size: clamp(21px, 2vw, 30px);
    font-weight: 700;
    line-height: 1.35;
}

.default-list-item h2 a {
    color: #17263f;
    text-decoration: none;
    transition: color 0.2s ease;
}

.default-list-item h2 a:hover {
    color: #4f6f9f;
}

.default-list-item p {
    max-width: 850px;
    margin: 12px 0 0;
    color: rgba(23, 38, 63, 0.72);
    font-size: 15px;
    line-height: 1.8;
}

.default-list-link {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #17263f;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

.default-list-link i {
    font-size: 13px;
    transition: transform 0.2s ease;
}

.default-list-link:hover {
    color: #4f6f9f;
}

.default-list-link:hover i {
    transform: translateX(4px);
}

html[dir="rtl"] .default-list-link i {
    transform: scaleX(-1);
}

html[dir="rtl"] .default-list-link:hover i {
    transform: scaleX(-1) translateX(4px);
}

@media (max-width: 767px) {
    .default-list-section {
        padding: 55px 0;
    }

    .default-list-group + .default-list-group {
        margin-top: 30px;
    }

    .default-list-item {
        align-items: flex-start;
        flex-direction: column;
        gap: 18px;
        padding: 24px 0;
    }

    .default-list-item h2 {
        font-size: 21px;
    }

    .default-list-item p {
        margin-top: 10px;
        font-size: 14px;
        line-height: 1.75;
    }
}

/* =========================================================
   Basic Article
========================================================= */

.content-page-description {
    max-width: 760px;
}

.content-article-body > :first-child {
    margin-top: 0;
}

.content-article-body > :last-child {
    margin-bottom: 0;
}


/* =========================================================
   Gallery
========================================================= */

.content-article-gallery {
    margin-top: 50px;
}

.content-article-gallery > h2 {
    margin: 0 0 24px;
}

.content-article-gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.content-article-gallery-item {
    margin: 0;
}

.content-article-gallery-item > a {
    display: block;
    overflow: hidden;
    border-radius: 16px;
    cursor: zoom-in;
}

.content-article-gallery-item img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.content-article-gallery-item > a:hover img {
    transform: scale(1.03);
}

.content-article-gallery-item figcaption {
    display: grid;
    gap: 6px;
    padding-top: 12px;
}

.content-article-gallery-item figcaption span {
    color: rgba(23, 38, 63, 0.7);
    line-height: 1.7;
}


/* =========================================================
   Attachments
========================================================= */

.content-article-files {
    margin-top: 50px;
}

.content-article-files > h2 {
    margin: 0 0 24px;
}

.content-article-files-list {
    display: grid;
    gap: 12px;
}

.content-article-file {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    padding: 18px 20px;
    border: 1px solid rgba(15, 35, 65, 0.14);
    color: #17263f;
    text-decoration: none;
    transition:
        border-color 0.2s ease,
        transform 0.2s ease;
}

.content-article-file:hover {
    border-color: rgba(15, 35, 65, 0.38);
    transform: translateY(-2px);
}

.content-article-file b {
    font-size: 13px;
}

.content-article-file span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.content-article-file small {
    color: rgba(23, 38, 63, 0.62);
}


/* =========================================================
   Share
========================================================= */

.content-article-share {
    margin-top: 50px;
    padding-top: 30px;
    border-top: 1px solid rgba(15, 35, 65, 0.14);
}

.content-article-share > h2 {
    margin: 0 0 20px;
}

.content-article-share-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.content-article-share-links a,
.content-article-share-links button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 16px;
    border: 1px solid rgba(15, 35, 65, 0.16);
    background: #ffffff;
    color: #17263f;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;
}

.content-article-share-links a:hover,
.content-article-share-links button:hover {
    border-color: #17263f;
    background: #17263f;
    color: #ffffff;
}

#copyBasicArticleMessage {
    margin: 12px 0 0;
    color: #17263f;
    font-size: 13px;
}


/* =========================================================
   Lightbox
========================================================= */

.content-article-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 70px 30px 30px;
    background: rgba(4, 15, 35, 0.94);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 0.25s ease,
        visibility 0.25s ease;
}

.content-article-lightbox.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.content-article-lightbox img {
    display: block;
    width: auto;
    height: auto;
    max-width: min(1200px, 92vw);
    max-height: 86vh;
    object-fit: contain;
    border-radius: 16px;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.45);
    transform: scale(0.96);
    transition: transform 0.25s ease;
}

.content-article-lightbox.is-active img {
    transform: scale(1);
}

.content-article-lightbox-close {
    position: absolute;
    top: 20px;
    right: 25px;
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    font-family: Arial, sans-serif;
    font-size: 32px;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
}

body.content-article-lightbox-open {
    overflow: hidden;
}

html[dir="rtl"] .content-article-lightbox-close {
    right: auto;
    left: 25px;
}


/* =========================================================
   Mobile
========================================================= */

@media (max-width: 767px) {
    .content-article-gallery-grid {
        grid-template-columns: 1fr;
    }

    .content-article-file {
        grid-template-columns: 1fr;
        gap: 7px;
    }

    .content-article-lightbox {
        padding: 65px 15px 20px;
    }

    .content-article-lightbox img {
        max-width: 100%;
        max-height: 82vh;
        border-radius: 10px;
    }

    .content-article-lightbox-close {
        top: 12px;
        right: 15px;
        width: 42px;
        height: 42px;
        font-size: 28px;
    }

    html[dir="rtl"] .content-article-lightbox-close {
        right: auto;
        left: 15px;
    }
}

/* Header search */
.header-search-toggle{width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;padding:0;border:0;border-radius:50%;background:transparent;color:inherit;font-size:15px;cursor:pointer;transition:.2s}
.header-search-toggle:hover{background:rgba(15,35,65,.08);transform:translateY(-1px)}
.mobile-search-link{width:100%;display:flex;align-items:center;gap:12px;padding:14px 0;border:0;border-bottom:1px solid rgba(15,35,65,.1);background:transparent;color:inherit;font:inherit;text-align:inherit;cursor:pointer}

/* Search modal */
.site-search-modal{position:fixed;inset:0;z-index:100000;display:flex;align-items:flex-start;justify-content:center;padding:110px 24px 40px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s ease,visibility .25s ease}
.site-search-modal.is-open{opacity:1;visibility:visible;pointer-events:auto}
.site-search-backdrop{position:absolute;inset:0;background:rgba(4,15,35,.78);backdrop-filter:blur(7px)}
.site-search-dialog{position:relative;z-index:1;width:min(820px,100%);padding:48px;border-radius:24px;background:#fff;box-shadow:0 30px 90px rgba(0,0,0,.28);transform:translateY(-15px);transition:transform .25s ease}
.site-search-modal.is-open .site-search-dialog{transform:translateY(0)}
.site-search-close{position:absolute;top:18px;right:20px;width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;padding:0;border:1px solid rgba(15,35,65,.12);border-radius:50%;background:#fff;color:#17263f;font-family:Arial,sans-serif;font-size:28px;line-height:1;cursor:pointer}
html[dir="rtl"] .site-search-close{right:auto;left:20px}
.site-search-heading{max-width:650px;margin-bottom:28px}
.site-search-heading>span{display:block;margin-bottom:8px;color:rgba(23,38,63,.58);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.site-search-heading h2{margin:0;color:#17263f;font-size:clamp(28px,4vw,46px);line-height:1.2}
.site-search-heading p{margin:12px 0 0;color:rgba(23,38,63,.68);line-height:1.75}
.site-search-form{display:grid;grid-template-columns:minmax(0,1fr) auto;border:1px solid rgba(15,35,65,.18);border-radius:14px;overflow:hidden}
.site-search-form input{min-width:0;height:60px;padding:0 20px;border:0;outline:0;background:transparent;color:#17263f;font:inherit;font-size:16px}
.site-search-form button{min-width:145px;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:0 24px;border:0;background:#17263f;color:#fff;font:inherit;font-weight:700;cursor:pointer}
html[dir="rtl"] .site-search-form button i{transform:scaleX(-1)}
.site-search-help{display:block;margin-top:12px;color:rgba(23,38,63,.56)}
body.search-modal-open{overflow:hidden}

/* Search results */
.search-results-hero{min-height:360px}
.search-results-section{padding:75px 0;background:#fff}
.search-results-head{margin-bottom:34px}
.search-results-form{display:grid;grid-template-columns:minmax(0,1fr) auto;max-width:860px;border:1px solid rgba(15,35,65,.17);border-radius:14px;overflow:hidden}
.search-results-form input{min-width:0;height:58px;padding:0 20px;border:0;outline:0;background:#fff;color:#17263f;font:inherit}
.search-results-form button{min-width:145px;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:0 22px;border:0;background:#17263f;color:#fff;font:inherit;font-weight:700;cursor:pointer}
.search-results-summary{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin-top:18px;color:rgba(23,38,63,.68)}
.search-results-summary strong{color:#17263f}
.search-results-summary b{min-width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;margin-inline-start:5px;border-radius:50%;background:rgba(23,38,63,.08);color:#17263f;font-size:13px}
.search-list{border-top:1px solid rgba(15,35,65,.14)}
.search-list-item{display:flex;align-items:center;justify-content:space-between;gap:40px;padding:30px 0;border-bottom:1px solid rgba(15,35,65,.14)}
.search-list-content{flex:1;min-width:0}
.search-list-meta{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:9px}
.search-list-meta span{padding:5px 9px;border-radius:999px;background:rgba(23,38,63,.08);color:#17263f;font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.search-list-meta time{color:rgba(23,38,63,.58);font-size:13px}
.search-list-item h2{margin:0;font-size:clamp(21px,2vw,30px);line-height:1.35}
.search-list-item h2 a{color:#17263f;text-decoration:none}
.search-list-item p{max-width:850px;margin:12px 0 0;color:rgba(23,38,63,.7);font-size:15px;line-height:1.8}
.search-list-link{flex:0 0 auto;display:inline-flex;align-items:center;gap:11px;color:#17263f;font-size:14px;font-weight:700;text-decoration:none;white-space:nowrap}
.search-list-link i{font-size:13px;transition:transform .2s ease}
.search-list-link:hover i{transform:translateX(4px)}
html[dir="rtl"] .search-list-link i{transform:scaleX(-1)}
html[dir="rtl"] .search-list-link:hover i{transform:scaleX(-1) translateX(4px)}
.search-empty-state{padding:70px 25px;border:1px solid rgba(15,35,65,.12);text-align:center}
.search-empty-state>i{margin-bottom:18px;color:rgba(23,38,63,.38);font-size:40px}
.search-empty-state h2{margin:0;color:#17263f}
.search-empty-state p{margin:12px 0 0;color:rgba(23,38,63,.68)}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

@media(max-width:767px){
.site-search-modal{padding:75px 14px 20px}
.site-search-dialog{padding:42px 20px 24px;border-radius:18px}
.site-search-close{top:12px;right:14px}
html[dir="rtl"] .site-search-close{right:auto;left:14px}
.site-search-form,.search-results-form{grid-template-columns:1fr;border-radius:12px}
.site-search-form button,.search-results-form button{min-height:50px}
.search-results-section{padding:55px 0}
.search-list-item{align-items:flex-start;flex-direction:column;gap:18px;padding:24px 0}
.search-list-item h2{font-size:21px}
.search-list-item p{font-size:14px;line-height:1.75}
}

/* Service Center additions */
.service-center-page .hidden-field{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}
.service-center-page .contact-alert{margin-bottom:22px}
.service-center-page .test-drive-form textarea{resize:vertical}
.service-center-page .contact-captcha{margin:22px 0}
@media(max-width:767px){
.service-center-page .g-recaptcha{transform:scale(.88);transform-origin:left top}
html[dir="rtl"] .service-center-page .g-recaptcha{transform-origin:right top}
}

/*==================================================
  Alerts
==================================================*/

.contact-alert{
    display:flex;
    align-items:flex-start;
    gap:14px;
    padding:18px 20px;
    margin-bottom:24px;
    border-radius:14px;
    border:1px solid transparent;
    font-size:.96rem;
    line-height:1.7;
}

.contact-alert i{
    font-size:1.25rem;
    margin-top:2px;
    flex-shrink:0;
}

.contact-alert strong{
    display:block;
    margin-bottom:8px;
    font-weight:700;
}

.contact-alert ul{
    margin:8px 0 0;
    padding-inline-start:20px;
}

.contact-alert li{
    margin-bottom:6px;
}

.contact-alert--success{
    background:#ecfdf3;
    border-color:#b7ebc6;
    color:#0f6b38;
}

.contact-alert--success i{
    color:#16a34a;
}

.contact-alert--error{
    background:#fff2f2;
    border-color:#f5b5b5;
    color:#991b1b;
}

.contact-alert--error i{
    color:#dc2626;
}

html[dir="rtl"] .contact-alert{
    text-align:right;
}

html[dir="ltr"] .contact-alert{
    text-align:left;
}

@media (max-width:768px){

    .contact-alert{
        padding:16px;
        gap:12px;
        font-size:.92rem;
    }

    .contact-alert i{
        font-size:1.1rem;
    }

}

/* =========================================================
   Brands / Brand / Vehicles / Vehicle additions
========================================================= */

.brand-description > :first-child,
.vehicle-content > :first-child {
    margin-top: 0;
}

.brand-description > :last-child,
.vehicle-content > :last-child {
    margin-bottom: 0;
}

.brands-empty {
    padding: 70px 0;
    text-align: center;
}

.vehicle-main-image > button {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: zoom-in;
}

.vehicle-main-image > button img {
    display: block;
    width: 100%;
}

.vehicle-content-section {
    padding: 75px 0;
    background: #ffffff;
}

.vehicle-content {
    max-width: 980px;
    margin: 0 auto;
    color: #17263f;
    line-height: 1.85;
}

.vehicle-content h2,
.vehicle-content h3 {
    margin-top: 34px;
}

.vehicle-lightbox {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 70px 30px 30px;
    background: rgba(4, 15, 35, 0.94);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .25s ease, visibility .25s ease;
}

.vehicle-lightbox.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.vehicle-lightbox img {
    display: block;
    max-width: min(1200px, 92vw);
    max-height: 86vh;
    object-fit: contain;
    border-radius: 16px;
    box-shadow: 0 25px 80px rgba(0, 0, 0, .45);
}

.vehicle-lightbox-close {
    position: absolute;
    top: 20px;
    right: 25px;
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font: 300 32px/1 Arial, sans-serif;
    cursor: pointer;
}

html[dir="rtl"] .vehicle-lightbox-close {
    right: auto;
    left: 25px;
}

body.vehicle-lightbox-open {
    overflow: hidden;
}

.vehicle-list-card[hidden] {
    display: none !important;
}

@media (max-width: 767px) {
    .vehicle-content-section {
        padding: 55px 0;
    }

    .vehicle-lightbox {
        padding: 65px 15px 20px;
    }

    .vehicle-lightbox img {
        max-width: 100%;
        max-height: 82vh;
        border-radius: 10px;
    }

    .vehicle-lightbox-close {
        top: 12px;
        right: 15px;
        width: 42px;
        height: 42px;
        font-size: 28px;
    }

    html[dir="rtl"] .vehicle-lightbox-close {
        right: auto;
        left: 15px;
    }
}

/* Brand Details Fixes */
.brand-hero-description{max-width:760px}.brand-overview-logo{display:flex;align-items:center;justify-content:center;min-height:360px;padding:45px;background:#fff;border:1px solid rgba(15,35,65,.1)}.brand-overview-logo img{display:block;width:auto;height:auto;max-width:80%;max-height:230px;object-fit:contain}.brand-content-body>:first-child{margin-top:0}.brand-content-body>:last-child{margin-bottom:0}
.brand-models-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:stretch}.brand-model-card{width:auto;min-width:0;height:100%}.brand-model-card img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}.brand-model-card>div{display:flex;flex-direction:column;height:100%}.brand-model-card>div>a{margin-top:auto}.brand-model-card>div>a i{margin-inline-start:7px;font-size:12px}html[dir=rtl] .brand-model-card>div>a i{transform:scaleX(-1)}
.brand-gallery{padding:80px 0;background:#fff}.brand-gallery .gallery-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.brand-gallery-item{display:block;overflow:hidden;border-radius:16px;cursor:zoom-in}.brand-gallery-item img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .3s ease}.brand-gallery-item:hover img{transform:scale(1.035)}
.brand-downloads{padding:80px 0;background:#f5f7fa}.brand-downloads .vehicle-files-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.brand-downloads .vehicle-file-card{min-height:130px}
.brand-details-page .brands-cta{text-align:center}.brand-details-page .brands-cta .container{max-width:880px}.brand-details-page .brands-cta h2{max-width:760px;margin-inline:auto}.brand-details-page .brands-cta p{max-width:700px;margin-inline:auto}
.brand-lightbox{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;padding:70px 30px 30px;background:rgba(4,15,35,.94);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s ease,visibility .25s ease}.brand-lightbox.is-active{opacity:1;visibility:visible;pointer-events:auto}.brand-lightbox img{display:block;width:auto;height:auto;max-width:min(1200px,92vw);max-height:86vh;object-fit:contain;border-radius:16px;box-shadow:0 25px 80px rgba(0,0,0,.45)}.brand-lightbox-close{position:absolute;top:20px;right:25px;width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center;padding:0;border:1px solid rgba(255,255,255,.35);border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font:300 32px/1 Arial,sans-serif;cursor:pointer}html[dir=rtl] .brand-lightbox-close{right:auto;left:25px}body.brand-lightbox-open{overflow:hidden}
@media(max-width:991px){.brand-models-grid,.brand-gallery .gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.brand-downloads .vehicle-files-grid{grid-template-columns:1fr}}
@media(max-width:767px){.brand-overview-logo{min-height:240px;padding:30px}.brand-overview-logo img{max-height:150px}.brand-models-grid,.brand-gallery .gallery-grid{grid-template-columns:1fr}.brand-gallery,.brand-downloads{padding:55px 0}.brand-lightbox{padding:65px 15px 20px}.brand-lightbox img{max-width:100%;max-height:82vh;border-radius:10px}.brand-lightbox-close{top:12px;right:15px;width:42px;height:42px;font-size:28px}html[dir=rtl] .brand-lightbox-close{right:auto;left:15px}}

/* يجعل بطاقة السيارة كلها قابلة للنقر */
.brand-model-card-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.brand-model-card-link > img {
    flex: 0 0 auto;
}

.brand-model-card-content {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.brand-model-card-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    color: inherit;
    font-weight: 700;
}

.brand-model-card-action i {
    font-size: 12px;
    transition: transform 0.2s ease;
}

.brand-model-card-link:hover .brand-model-card-action i {
    transform: translateX(4px);
}

html[dir="rtl"] .brand-model-card-action i {
    transform: scaleX(-1);
}

html[dir="rtl"] .brand-model-card-link:hover .brand-model-card-action i {
    transform: scaleX(-1) translateX(4px);
}


/* =========================================================
   HOME PHOTO STORY — Editorial Automotive Gallery
   Pure gallery: no vehicle/article links
========================================================= */

.home-photo-story {
    position: relative;
    padding: 95px 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 10% 0%, rgba(31, 63, 101, 0.08), transparent 34%),
        linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

.home-photo-story::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: min(1180px, calc(100% - 40px));
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(
        90deg,
        transparent,
        rgba(15, 35, 65, 0.16),
        transparent
    );
}

.home-photo-story-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 520px);
    grid-template-areas:
        "kicker description"
        "title description";
    gap: 5px 60px;
    align-items: end;
    margin-bottom: 38px;
}

.home-photo-story-head .section-kicker {
    grid-area: kicker;
}

.home-photo-story-head h2 {
    grid-area: title;
    max-width: 720px;
    margin: 0;
    color: #17263f;
    font-size: clamp(34px, 4vw, 58px);
    line-height: 1.08;
    letter-spacing: -0.03em;
}

.home-photo-story-head p {
    grid-area: description;
    max-width: 500px;
    margin: 0;
    color: rgba(23, 38, 63, 0.68);
    font-size: 15px;
    line-height: 1.8;
}

/*
 * Editorial mosaic.
 * It intentionally does NOT resemble the vehicle cards/grid.
 */
.home-photo-story-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: 260px 210px 240px;
    gap: 14px;
}

.home-photo-story-item {
    position: relative;
    min-width: 0;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 10px;
    background: #111827;
    cursor: zoom-in;
    text-align: start;
    isolation: isolate;
}

.home-photo-story-item--1 {
    grid-column: 1 / span 7;
    grid-row: 1 / span 2;
}

.home-photo-story-item--2 {
    grid-column: 8 / span 5;
    grid-row: 1;
}

.home-photo-story-item--3 {
    grid-column: 8 / span 3;
    grid-row: 2;
}

.home-photo-story-item--4 {
    grid-column: 11 / span 2;
    grid-row: 2;
}

.home-photo-story-item--5 {
    grid-column: 1 / span 4;
    grid-row: 3;
}

.home-photo-story-item--6 {
    grid-column: 5 / span 4;
    grid-row: 3;
}

.home-photo-story-item--7 {
    grid-column: 9 / span 4;
    grid-row: 3;
}

.home-photo-story-item img {
    position: absolute;
    inset: 0;
    z-index: -2;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.001);
    transition:
        transform 0.65s cubic-bezier(.2,.7,.2,1),
        filter 0.45s ease;
}

.home-photo-story-item:hover img,
.home-photo-story-item:focus-visible img {
    transform: scale(1.055);
}

.home-photo-story-shade {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg, transparent 45%, rgba(6, 17, 34, 0.62) 100%);
    opacity: 0.72;
    transition: opacity 0.35s ease;
}

.home-photo-story-item:hover .home-photo-story-shade {
    opacity: 0.9;
}

.home-photo-story-copy {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 22px;
    display: grid;
    gap: 5px;
    color: #ffffff;
    pointer-events: none;
}

html[dir="rtl"] .home-photo-story-copy {
    text-align: right;
}

.home-photo-story-copy strong {
    font-size: clamp(17px, 1.6vw, 25px);
    line-height: 1.15;
}

.home-photo-story-copy small {
    max-width: 520px;
    color: rgba(255,255,255,.82);
    font-size: 12px;
    line-height: 1.55;
}

.home-photo-story-zoom {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.38);
    border-radius: 50%;
    background: rgba(9, 22, 42, 0.28);
    color: #ffffff;
    opacity: 0;
    transform: translateY(-6px);
    backdrop-filter: blur(8px);
    transition:
        opacity .25s ease,
        transform .25s ease,
        background-color .25s ease;
}

html[dir="rtl"] .home-photo-story-zoom {
    right: auto;
    left: 18px;
}

.home-photo-story-item:hover .home-photo-story-zoom,
.home-photo-story-item:focus-visible .home-photo-story-zoom {
    opacity: 1;
    transform: translateY(0);
}

.home-photo-story-zoom svg {
    width: 19px;
    height: 19px;
}


/* =========================================================
   Gallery Lightbox
========================================================= */

.home-gallery-lightbox {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 76px 90px 60px;
    background: rgba(4, 12, 25, 0.96);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity .25s ease,
        visibility .25s ease;
}

.home-gallery-lightbox.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.home-gallery-lightbox-figure {
    display: grid;
    gap: 12px;
    justify-items: center;
    max-width: 100%;
    max-height: 100%;
    margin: 0;
}

.home-gallery-lightbox-figure img {
    display: block;
    width: auto;
    height: auto;
    max-width: min(1320px, 82vw);
    max-height: 78vh;
    object-fit: contain;
    box-shadow: 0 30px 100px rgba(0, 0, 0, .38);
}

.home-gallery-lightbox-figure figcaption {
    max-width: 760px;
    color: rgba(255,255,255,.72);
    font-size: 13px;
    text-align: center;
}

.home-gallery-lightbox-close {
    position: absolute;
    top: 22px;
    right: 26px;
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    color: #fff;
    font: 300 31px/1 Arial, sans-serif;
    cursor: pointer;
}

html[dir="rtl"] .home-gallery-lightbox-close {
    right: auto;
    left: 26px;
}

.home-gallery-lightbox-arrow {
    position: absolute;
    top: 50%;
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    color: #fff;
    cursor: pointer;
    transform: translateY(-50%);
}

.home-gallery-lightbox-arrow svg {
    width: 22px;
    height: 22px;
}

.home-gallery-lightbox-prev {
    left: 24px;
}

.home-gallery-lightbox-next {
    right: 24px;
}

.home-gallery-lightbox-counter {
    position: absolute;
    left: 50%;
    bottom: 20px;
    color: rgba(255,255,255,.65);
    font-size: 12px;
    letter-spacing: .12em;
    transform: translateX(-50%);
}

body.home-gallery-lightbox-open {
    overflow: hidden;
}


/* =========================================================
   Responsive
========================================================= */

@media (max-width: 991px) {
    .home-photo-story {
        padding: 75px 0;
    }

    .home-photo-story-head {
        grid-template-columns: 1fr;
        grid-template-areas:
            "kicker"
            "title"
            "description";
        gap: 8px;
    }

    .home-photo-story-head p {
        margin-top: 8px;
    }

    .home-photo-story-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: 360px 210px 210px 220px;
    }

    .home-photo-story-item--1 {
        grid-column: 1 / 3;
        grid-row: 1;
    }

    .home-photo-story-item--2 {
        grid-column: 1;
        grid-row: 2;
    }

    .home-photo-story-item--3 {
        grid-column: 2;
        grid-row: 2;
    }

    .home-photo-story-item--4 {
        grid-column: 1;
        grid-row: 3;
    }

    .home-photo-story-item--5 {
        grid-column: 2;
        grid-row: 3;
    }

    .home-photo-story-item--6 {
        grid-column: 1;
        grid-row: 4;
    }

    .home-photo-story-item--7 {
        grid-column: 2;
        grid-row: 4;
    }

    .home-gallery-lightbox {
        padding-inline: 65px;
    }
}

@media (max-width: 640px) {
    .home-photo-story {
        padding: 58px 0;
    }

    .home-photo-story-head {
        margin-bottom: 26px;
    }

    .home-photo-story-grid {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: none;
        gap: 10px;
    }

    .home-photo-story-item,
    .home-photo-story-item--1,
    .home-photo-story-item--2,
    .home-photo-story-item--3,
    .home-photo-story-item--4,
    .home-photo-story-item--5,
    .home-photo-story-item--6,
    .home-photo-story-item--7 {
        grid-column: 1;
        grid-row: auto;
        min-height: 230px;
    }

    .home-photo-story-item--1 {
        min-height: 330px;
    }

    .home-photo-story-copy {
        left: 18px;
        right: 18px;
        bottom: 17px;
    }

    .home-photo-story-zoom {
        top: 14px;
        right: 14px;
        width: 38px;
        height: 38px;
        opacity: 1;
        transform: none;
    }

    html[dir="rtl"] .home-photo-story-zoom {
        right: auto;
        left: 14px;
    }

    .home-gallery-lightbox {
        padding: 66px 15px 54px;
    }

    .home-gallery-lightbox-figure img {
        max-width: 100%;
        max-height: 74vh;
    }

    .home-gallery-lightbox-arrow {
        top: auto;
        bottom: 16px;
        width: 44px;
        height: 44px;
        transform: none;
    }

    .home-gallery-lightbox-prev {
        left: 16px;
    }

    .home-gallery-lightbox-next {
        right: 16px;
    }

    .home-gallery-lightbox-close {
        top: 12px;
        right: 15px;
        width: 42px;
        height: 42px;
    }

    html[dir="rtl"] .home-gallery-lightbox-close {
        right: auto;
        left: 15px;
    }
}


/* Lightbox arrows direction fix */

.home-gallery-lightbox-arrow .icon-rtl {
    display: none;
}

.home-gallery-lightbox-arrow .icon-ltr {
    display: block;
}

.vehicle-videos-section {
    padding: 70px 0;
}

.vehicle-videos-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
}

.vehicle-video-card {
    overflow: hidden;
    border: 1px solid rgba(12, 31, 58, 0.10);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 16px 42px rgba(12, 31, 58, 0.08);
}

.vehicle-video-media {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #07182f;
}

.vehicle-video-media video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #07182f;
}

.vehicle-video-info {
    padding: 20px 22px 22px;
}

.vehicle-video-info h3 {
    margin: 0 0 9px;
    font-size: 19px;
    line-height: 1.4;
}

.vehicle-video-description,
.vehicle-video-description p {
    margin-top: 0;
    margin-bottom: 0;
    line-height: 1.75;
}

@media (max-width: 767px) {
    .vehicle-videos-section {
        padding: 50px 0;
    }

    .vehicle-videos-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .vehicle-video-info {
        padding: 17px 18px 19px;
    }
}

/* =========================================================
   Vehicle Request a Quote
   Uses existing Contact form classes for fields and alerts.
========================================================= */

.vehicle-quote-section {
    padding: 80px 0;
    scroll-margin-top: 125px;
    background: #f7f8fa;
}

.vehicle-quote-layout {
    display: grid;
    grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr);
    gap: 50px;
    align-items: start;
}

.vehicle-quote-intro {
    padding-top: 12px;
}

.vehicle-quote-intro h2 {
    margin: 10px 0 16px;
    color: var(--navy, #07182f);
    font-size: clamp(30px, 3vw, 46px);
    line-height: 1.15;
}

.vehicle-quote-intro > p {
    margin: 0;
    max-width: 520px;
    color: var(--muted, #667085);
    font-size: 15px;
    line-height: 1.8;
}

.vehicle-quote-selected {
    display: grid;
    gap: 5px;
    margin-top: 30px;
    padding: 18px 20px;
    border-inline-start: 3px solid var(--blue, #145091);
    background: #fff;
    box-shadow: 0 12px 32px rgba(7, 24, 47, .06);
}

.vehicle-quote-selected span {
    color: var(--muted, #667085);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.vehicle-quote-selected strong {
    color: var(--navy, #07182f);
    font-size: 20px;
    line-height: 1.4;
}

.vehicle-quote-form {
    width: 100%;
}

.vehicle-quote-form input[readonly] {
    cursor: default;
    background: #f4f6f8;
    color: #5e6876;
}

.vehicle-quote-form .contact-alert {
    margin-bottom: 18px;
}

.vehicle-quote-form .contact-alert ul {
    margin: 8px 0 0;
    padding-inline-start: 20px;
}

@media (max-width: 900px) {
    .vehicle-quote-section {
        padding: 60px 0;
        scroll-margin-top: 100px;
    }

    .vehicle-quote-layout {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .vehicle-quote-intro {
        padding-top: 0;
    }
}





/* =========================================================
   FINAL MOBILE COMPACT OVERRIDES
   Add this block at the VERY END of app.css
========================================================= */

@media (max-width: 767px) {

    /* =====================================================
       01. GENERAL MOBILE
    ===================================================== */

    html,
    body {
        overflow-x: hidden !important;
    }

    .container {
        width: calc(100% - 28px) !important;
        max-width: none !important;
    }

    section {
        scroll-margin-top: 70px;
    }

    .section-head {
        margin-bottom: 22px !important;
    }

    .section-head h2 {
        font-size: 28px !important;
        line-height: 1.15 !important;
    }

    .section-head p {
        font-size: 14px !important;
        line-height: 1.55 !important;
    }

    .eyebrow,
    .section-kicker {
        font-size: 11px !important;
        margin-bottom: 8px !important;
    }


    /* =====================================================
       02. HEADER
    ===================================================== */

    .site-header,
    .main-header {
        min-height: 64px !important;
    }

    .header-inner {
        min-height: 64px !important;
    }

    .brand-mark {
        width: 40px !important;
        height: 40px !important;
    }

    .mobile-toggle,
    .menu-toggle {
        width: 42px !important;
        height: 42px !important;
    }


    /* =====================================================
       03. MOBILE DRAWER
       LTR = LEFT
       RTL = RIGHT
    ===================================================== */

    .mobile-menu {
        box-sizing: border-box !important;

        top: 10px !important;
        bottom: 10px !important;

        left: 10px !important;
        right: auto !important;

        width: min(390px, calc(100vw - 20px)) !important;
        max-width: calc(100vw - 20px) !important;

        height: auto !important;
        max-height: calc(100dvh - 20px) !important;

        padding: 16px !important;

        border-radius: 18px !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        transform: translateX(calc(-100% - 25px)) !important;
    }

    .mobile-menu.active {
        transform: translateX(0) !important;
    }

    html[dir="rtl"] .mobile-menu {
        left: auto !important;
        right: 10px !important;

        transform: translateX(calc(100% + 25px)) !important;
    }

    html[dir="rtl"] .mobile-menu.active {
        transform: translateX(0) !important;
    }

    .mobile-brand {
        gap: 9px !important;
    }

    .mobile-brand .brand-mark {
        width: 38px !important;
        height: 38px !important;
    }

    .mobile-brand strong {
        font-size: 15px !important;
    }

    .mobile-brand small {
        font-size: 9px !important;
    }

    .mobile-close {
        width: 38px !important;
        height: 38px !important;
        font-size: 22px !important;
    }

    .mobile-menu-top {
        padding-bottom: 12px !important;
    }

    .mobile-nav {
        padding: 10px 0 !important;
        gap: 0 !important;
    }

    .mobile-nav > a,
    .mobile-accordion {
        min-height: 42px !important;
        padding: 0 3px !important;
        font-size: 17px !important;
    }

    .mobile-nav > a::after {
        font-size: 14px !important;
    }

    .mobile-accordion b {
        width: 25px !important;
        height: 25px !important;
        font-size: 15px !important;
    }

    .mobile-sub {
        padding-top: 2px !important;
        padding-bottom: 6px !important;
    }

    .mobile-sub a {
        padding: 6px 0 !important;
        font-size: 13px !important;
    }

    .mobile-menu-bottom {
        padding-top: 12px !important;
        gap: 8px !important;
    }

    .mobile-lang {
        height: 42px !important;
    }

    .mobile-test-drive {
        height: 46px !important;
    }


    /* =====================================================
       04. HERO
    ===================================================== */

    .hero,
    .home-hero,
    .hero-slider,
    .hero-slide {
        min-height: 0 !important;
    }

    .hero-slide {
        height: 520px !important;
    }

    .hero-content {
        padding-top: 40px !important;
        padding-bottom: 60px !important;
    }

    .hero-content h1,
    .hero-title {
        font-size: 34px !important;
        line-height: 1.08 !important;
        margin-bottom: 12px !important;
    }

    html[dir="rtl"] .hero-content h1,
    html[dir="rtl"] .hero-title {
        font-size: 31px !important;
        line-height: 1.2 !important;
    }

    .hero-content p,
    .hero-description {
        max-width: 94% !important;
        font-size: 14px !important;
        line-height: 1.6 !important;
        margin-bottom: 18px !important;
    }

    .hero-actions {
        gap: 8px !important;
    }

    .hero-actions a,
    .hero-actions button {
        min-height: 42px !important;
        padding: 10px 15px !important;
        font-size: 13px !important;
    }

    .hero-dots,
    .slider-dots {
        bottom: 16px !important;
    }


    /* =====================================================
       05. BRANDS
       2 CARDS PER ROW
    ===================================================== */

    .brands-section {
        padding-top: 45px !important;
        padding-bottom: 45px !important;
    }

    .brands-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .brand-card {
        min-height: 0 !important;
        padding: 18px 10px !important;
        border-radius: 16px !important;
    }

    .brand-card img {
        max-width: 90px !important;
        max-height: 50px !important;
        margin-bottom: 10px !important;
    }

    .brand-card h3 {
        font-size: 15px !important;
        margin-bottom: 3px !important;
    }

    .brand-card p {
        font-size: 11px !important;
        line-height: 1.4 !important;
    }


    /* =====================================================
       06. VEHICLES
       2 VEHICLES PER ROW
    ===================================================== */

    .vehicles-section {
        padding-top: 45px !important;
        padding-bottom: 45px !important;
    }

    .vehicles-grid,
    .vehicle-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .vehicle-card,
    .vehicle-list-card {
        min-width: 0 !important;
        border-radius: 15px !important;
    }

    .vehicle-card img,
    .vehicle-list-card img {
        width: 100% !important;
        aspect-ratio: 4 / 3 !important;
        object-fit: cover !important;
    }

    .vehicle-card-content,
    .vehicle-list-card > div {
        padding: 12px !important;
    }

    .vehicle-card h3,
    .vehicle-list-card h3 {
        font-size: 14px !important;
        line-height: 1.25 !important;
        margin-bottom: 5px !important;
    }

    .vehicle-card p,
    .vehicle-list-card p {
        font-size: 11px !important;
        line-height: 1.4 !important;
    }

    .vehicle-card a,
    .vehicle-list-card a {
        min-height: 36px !important;
        padding: 8px 10px !important;
        font-size: 11px !important;
    }


    /* =====================================================
       07. OFFERS / FINANCE
    ===================================================== */

    .offers-section,
    .finance-section,
    .financing-section {
        padding-top: 45px !important;
        padding-bottom: 45px !important;
    }

    .offer-card,
    .finance-card,
    .financing-card {
        padding: 20px !important;
        border-radius: 18px !important;
    }

    .offer-card h2,
    .finance-card h2,
    .financing-card h2 {
        font-size: 27px !important;
        line-height: 1.15 !important;
        margin-bottom: 9px !important;
    }

    .offer-card p,
    .finance-card p,
    .financing-card p {
        font-size: 13px !important;
        line-height: 1.55 !important;
    }

    .offer-features,
    .finance-features,
    .financing-features {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 9px !important;
    }

    .offer-feature,
    .finance-feature,
    .financing-feature {
        min-height: 0 !important;
        padding: 14px 10px !important;
    }


    /* =====================================================
       08. GALLERY
       2 IMAGES PER ROW
    ===================================================== */

    .gallery-section,
    .brand-gallery {
        padding-top: 45px !important;
        padding-bottom: 45px !important;
    }

    .gallery-grid,
    .brand-gallery .gallery-grid,
    .vehicle-gallery-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .gallery-item,
    .brand-gallery-item,
    .vehicle-gallery-item {
        min-width: 0 !important;
        border-radius: 12px !important;
        overflow: hidden !important;
    }

    .gallery-item img,
    .brand-gallery-item img,
    .vehicle-gallery-item img {
        width: 100% !important;
        aspect-ratio: 4 / 3 !important;
        height: auto !important;
        object-fit: cover !important;
    }


    /* =====================================================
       09. SERVICES
       Current CSS makes each service one huge row.
       Change to 2 compact cards.
    ===================================================== */

    .services-section {
        padding: 45px 0 !important;
    }

    .services-layout {
        gap: 24px !important;
    }

    .services-image,
    .services-image img {
        height: 300px !important;
        min-height: 0 !important;
        border-radius: 18px !important;
    }

    .experience-card {
        left: 12px !important;
        right: 12px !important;
        bottom: 12px !important;

        padding: 14px !important;

        border-radius: 15px !important;
    }

    html[dir="rtl"] .experience-card {
        left: 12px !important;
        right: 12px !important;
    }

    .services-content h2,
    html[dir="rtl"] .services-content h2 {
        font-size: 28px !important;
        line-height: 1.2 !important;
    }

    .services-content > p {
        font-size: 13px !important;
        line-height: 1.6 !important;
    }

    .services-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 9px !important;
    }

    .services-grid article {
        display: block !important;
        min-width: 0 !important;
        padding: 14px 10px !important;
        border-radius: 15px !important;
    }

    .service-icon {
        width: 42px !important;
        height: 42px !important;
        border-radius: 12px !important;
        margin-bottom: 10px !important;
    }

    .service-icon svg {
        width: 21px !important;
        height: 21px !important;
    }

    .services-grid h3 {
        font-size: 14px !important;
        line-height: 1.3 !important;
        margin-bottom: 4px !important;
    }

    .services-grid p {
        font-size: 11px !important;
        line-height: 1.45 !important;
    }

    .services-buttons {
        gap: 8px !important;
    }

    .services-buttons a {
        width: auto !important;
        min-height: 40px !important;
        padding: 9px 13px !important;
        font-size: 12px !important;
    }


    /* =====================================================
       10. CONTACT
       2 CONTACT CARDS PER ROW
    ===================================================== */

    .contact-section {
        padding-top: 45px !important;
        padding-bottom: 45px !important;
    }

    .contact-grid,
    .contact-cards {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 9px !important;
    }

    .contact-card {
        min-width: 0 !important;
        min-height: 0 !important;
        padding: 15px 10px !important;
        border-radius: 15px !important;
    }

    .contact-card-icon {
        width: 40px !important;
        height: 40px !important;
        margin-bottom: 8px !important;
    }

    .contact-card h3 {
        font-size: 13px !important;
        margin-bottom: 4px !important;
    }

    .contact-card p,
    .contact-card a {
        font-size: 11px !important;
        line-height: 1.4 !important;
        word-break: break-word !important;
    }


    /* =====================================================
       11. CONTACT PAGE / MAP
    ===================================================== */

    .contact-page-section {
        padding-top: 45px !important;
        padding-bottom: 45px !important;
    }

    .contact-page-layout,
    .contact-map-layout {
        gap: 18px !important;
    }

    .contact-map-section {
        padding-bottom: 45px !important;
    }

    .contact-map-box,
    .map-placeholder {
        min-height: 280px !important;
    }

    .map-placeholder span {
        font-size: 25px !important;
    }

    .contact-test-drive-box {
        padding: 24px 18px !important;
        border-radius: 20px !important;
    }

    .contact-test-drive-box h2 {
        font-size: 28px !important;
        margin: 10px 0 !important;
    }

    .contact-test-drive-box p {
        font-size: 13px !important;
        line-height: 1.55 !important;
        margin-bottom: 17px !important;
    }

    .form-grid {
        gap: 11px !important;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        padding: 11px 12px !important;
        border-radius: 12px !important;
    }


    /* =====================================================
       12. FOOTER
    ===================================================== */

    .site-footer,
    .footer {
        padding-top: 38px !important;
    }

    .footer-grid,
    .footer-main {
        gap: 24px !important;
    }

    .footer-logo,
    .footer-brand img {
        max-width: 130px !important;
    }

    .footer-brand p {
        font-size: 12px !important;
        line-height: 1.55 !important;
        margin-top: 10px !important;
    }

    .footer-socials,
    .social-links {
        gap: 7px !important;
        margin-top: 12px !important;
    }

    .footer-socials a,
    .social-links a {
        width: 36px !important;
        height: 36px !important;
    }

    .footer h3,
    .footer h4,
    .site-footer h3,
    .site-footer h4 {
        font-size: 14px !important;
        margin-bottom: 10px !important;
    }

    .footer a,
    .site-footer a {
        font-size: 12px !important;
    }

    .footer-links {
        gap: 6px !important;
    }

    .footer-bottom {
        margin-top: 26px !important;
        padding: 15px 0 !important;
        font-size: 11px !important;
    }
    
    .brand-card p{
        display:none;
        
    }

}


/* =========================================================
   EXTRA SMALL PHONES
========================================================= */

@media (max-width: 390px) {

    .container {
        width: calc(100% - 22px) !important;
    }

    .hero-slide {
        height: 480px !important;
    }

    .hero-content h1,
    .hero-title {
        font-size: 30px !important;
    }

    html[dir="rtl"] .hero-content h1,
    html[dir="rtl"] .hero-title {
        font-size: 28px !important;
    }

    .section-head h2 {
        font-size: 25px !important;
    }

    .services-grid h3,
    .brand-card h3,
    .vehicle-card h3 {
        font-size: 13px !important;
    }
}

/* =========================================================
   MOBILE COMPACT CORRECTION V2
   MUST BE THE LAST BLOCK IN app.css
========================================================= */

@media (max-width: 767px) {

    /* =====================================================
       1. HERO - ACTUALLY REDUCE TOTAL HEIGHT
    ===================================================== */

    .hero,
    .hero-slider,
    .hero-slide {
        height: 430px !important;
        min-height: 430px !important;
        max-height: 430px !important;
    }

    .hero-content {
        height: 100% !important;
        padding: 0 !important;
        align-items: center !important;
    }

    .hero-text {
        max-width: 88% !important;
        padding-top: 0 !important;
    }

    .hero-text .eyebrow {
        font-size: 10px !important;
        letter-spacing: 1.5px !important;
        margin-bottom: 10px !important;
        gap: 8px !important;
    }

    .hero-text .eyebrow::before {
        width: 30px !important;
    }

    .hero-text h1 {
        font-size: 31px !important;
        line-height: 1.08 !important;
        letter-spacing: -1px !important;
        margin-bottom: 10px !important;
    }

    html[dir="rtl"] .hero-text h1 {
        font-size: 29px !important;
        line-height: 1.2 !important;
    }

    .hero-text p,
    html[dir="rtl"] .hero-text p {
        max-width: 92% !important;
        font-size: 13px !important;
        line-height: 1.5 !important;
        margin-bottom: 16px !important;
    }

    .hero-buttons {
        gap: 7px !important;
    }

    .hero .primary-btn,
    .hero .secondary-btn {
        min-height: 38px !important;
        height: 38px !important;
        padding: 0 14px !important;
        font-size: 11px !important;
    }

    .hero-dots {
        bottom: 14px !important;
        gap: 6px !important;
    }

    .hero-dots button {
        width: 24px !important;
        height: 3px !important;
    }

    .hero-dots button.active {
        width: 38px !important;
    }

    .hero::after {
        display: none !important;
    }


    /* =====================================================
       2. BRANDS - TWO REAL COMPACT CARDS
    ===================================================== */

    .brands-strip {
        padding: 38px 0 42px !important;
    }

    .brands-head {
        margin-bottom: 20px !important;
    }

    .brands-head span {
        font-size: 27px !important;
        margin-bottom: 7px !important;
    }

    .brands-head span::before,
    .brands-head span::after {
        width: 24px !important;
    }

    .brands-head p {
        font-size: 12px !important;
        line-height: 1.5 !important;
    }

    .brands-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .brand-card {
        display: flex !important;
        min-height: 155px !important;
        height: 155px !important;
        padding: 13px 8px 10px !important;
        border-radius: 15px !important;
    }

    .brand-logo-img {
        width: 58px !important;
        height: 58px !important;
        min-height: 58px !important;
        padding: 8px !important;
        margin-bottom: 8px !important;
        border-radius: 14px !important;
    }

    .brand-logo-img img {
        max-width: 100% !important;
        max-height: 44px !important;
    }

    .brand-card h3 {
        font-size: 14px !important;
        line-height: 1.15 !important;
        margin-bottom: 3px !important;
    }

    .brand-card p {
        font-size: 10px !important;
        line-height: 1.3 !important;
        margin-bottom: 5px !important;
        min-height: 0 !important;
    }

    .brand-action {
        gap: 5px !important;
    }

    .brand-action span {
        font-size: 9px !important;
    }

    .brand-action b {
        width: 24px !important;
        height: 24px !important;
        font-size: 12px !important;
    }


    /* =====================================================
       3. VEHICLES - TWO PER ROW, BUT SHORT
    ===================================================== */

    .vehicles-section {
        padding: 40px 0 !important;
    }

    .vehicles-head {
        margin-bottom: 20px !important;
    }

    .vehicles-head h2,
    html[dir="rtl"] .vehicles-head h2 {
        margin-top: 12px !important;
        margin-bottom: 8px !important;
        font-size: 27px !important;
        line-height: 1.12 !important;
        letter-spacing: -1px !important;
    }

    .vehicles-head p {
        font-size: 12px !important;
        line-height: 1.5 !important;
    }

    .view-link {
        min-height: 36px !important;
        margin-top: 12px !important;
        padding: 0 13px !important;
        font-size: 10px !important;
    }

    .vehicles-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .vehicle-card {
        height: 235px !important;
        min-height: 235px !important;
        max-height: 235px !important;
        border-radius: 15px !important;
    }

    .vehicle-img > span {
        top: 8px !important;
        inset-inline-start: 8px !important;
        padding: 4px 7px !important;
        font-size: 8px !important;
    }

    .vehicle-info {
        padding: 11px !important;
    }

    .vehicle-meta {
        gap: 3px !important;
        margin-bottom: 5px !important;
    }

    .vehicle-meta span {
        min-height: 18px !important;
        padding: 0 5px !important;
        font-size: 7px !important;
    }

    .vehicle-info h3 {
        font-size: 15px !important;
        line-height: 1.12 !important;
        letter-spacing: 0 !important;
        margin-bottom: 5px !important;
    }

    /*
     * On this compact 2-column mobile design the description
     * is what makes the card excessively tall.
     * Keep the model name, badges and CTA.
    */
    .vehicle-info p {
        display: none !important;
    }

    .vehicle-bottom {
        flex-direction: row !important;
        align-items: center !important;
        gap: 4px !important;
        padding-top: 7px !important;
    }

    .vehicle-bottom strong {
        font-size: 9px !important;
        line-height: 1.15 !important;
    }

    .vehicle-bottom a {
        min-height: 27px !important;
        height: 27px !important;
        padding: 0 7px !important;
        font-size: 8px !important;
    }


    /* =====================================================
       4. HOME MOMENTS GALLERY
       EXACT HOME GALLERY CLASSES
       2 IMAGES NEXT TO EACH OTHER
    ===================================================== */

    .home-photo-story {
        padding: 40px 0 !important;
    }

    .home-photo-story-head {
        margin-bottom: 18px !important;
        gap: 5px !important;
    }

    .home-photo-story-head p {
        margin-top: 3px !important;
        font-size: 12px !important;
        line-height: 1.5 !important;
    }

    .home-photo-story-grid {
        display: grid !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        grid-template-rows: none !important;
        grid-auto-rows: 125px !important;

        gap: 7px !important;
    }

    /*
     * IMPORTANT:
     * Original mobile CSS forces EVERY image to column 1.
     * Reset every custom desktop position here.
    */
    .home-photo-story-item,
    .home-photo-story-item--1,
    .home-photo-story-item--2,
    .home-photo-story-item--3,
    .home-photo-story-item--4,
    .home-photo-story-item--5,
    .home-photo-story-item--6,
    .home-photo-story-item--7 {
        grid-column: auto !important;
        grid-row: auto !important;

        width: 100% !important;
        height: 125px !important;

        min-height: 125px !important;
        max-height: 125px !important;

        border-radius: 12px !important;
    }

    /*
     * Do NOT keep first image huge on mobile.
    */
    .home-photo-story-item--1 {
        height: 125px !important;
        min-height: 125px !important;
        max-height: 125px !important;
    }

    .home-photo-story-item img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .home-photo-story-copy {
        left: 8px !important;
        right: 8px !important;
        bottom: 8px !important;
        gap: 1px !important;
    }

    .home-photo-story-copy strong {
        font-size: 11px !important;
        line-height: 1.15 !important;
    }

    .home-photo-story-copy small {
        display: none !important;
    }

    .home-photo-story-zoom {
        top: 7px !important;
        right: 7px !important;

        width: 27px !important;
        height: 27px !important;

        opacity: 1 !important;
    }

    html[dir="rtl"] .home-photo-story-zoom {
        right: auto !important;
        left: 7px !important;
    }

    .home-photo-story-zoom svg {
        width: 13px !important;
        height: 13px !important;
    }


    /* =====================================================
       5. SERVICES - REDUCE VERTICAL SPACE
    ===================================================== */

    .services-section {
        padding: 40px 0 !important;
    }

    .services-layout {
        gap: 20px !important;
    }

    .services-image,
    .services-image img {
        height: 245px !important;
        min-height: 245px !important;
        max-height: 245px !important;

        border-radius: 18px !important;
    }

    .experience-card {
        left: 10px !important;
        right: 10px !important;
        bottom: 10px !important;
        padding: 11px !important;
    }

    html[dir="rtl"] .experience-card {
        left: 10px !important;
        right: 10px !important;
    }

    .services-content h2,
    html[dir="rtl"] .services-content h2 {
        font-size: 26px !important;
    }

    .services-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 7px !important;
    }

    .services-grid article {
        display: block !important;
        min-height: 125px !important;
        padding: 11px 8px !important;
    }

    .service-icon {
        width: 36px !important;
        height: 36px !important;
        margin-bottom: 7px !important;
    }

    .service-icon svg {
        width: 18px !important;
        height: 18px !important;
    }

    .services-grid h3 {
        font-size: 12px !important;
    }

    .services-grid p {
        font-size: 9px !important;
        line-height: 1.35 !important;
    }


    /* =====================================================
       6. CONTACT CARDS
    ===================================================== */

    .contact-section {
        padding: 40px 0 !important;
    }

    .contact-cards {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 7px !important;
    }

    .contact-card {
        min-height: 115px !important;
        padding: 12px 8px !important;
    }


    /* =====================================================
       7. FOOTER - REMOVE EXCESSIVE HEIGHT
    ===================================================== */

    .footer-top {
        gap: 18px !important;
    }

    .site-footer {
        padding-top: 32px !important;
    }

    .footer-bottom {
        margin-top: 20px !important;
    }

}


/* =========================================================
   EXTRA SMALL MOBILE
========================================================= */

@media (max-width: 390px) {

    .hero,
    .hero-slider,
    .hero-slide {
        height: 410px !important;
        min-height: 410px !important;
        max-height: 410px !important;
    }

    .hero-text h1 {
        font-size: 28px !important;
    }

    html[dir="rtl"] .hero-text h1 {
        font-size: 27px !important;
    }

    .vehicle-card {
        height: 220px !important;
        min-height: 220px !important;
        max-height: 220px !important;
    }

    .home-photo-story-grid {
        grid-auto-rows: 112px !important;
    }

    .home-photo-story-item,
    .home-photo-story-item--1,
    .home-photo-story-item--2,
    .home-photo-story-item--3,
    .home-photo-story-item--4,
    .home-photo-story-item--5,
    .home-photo-story-item--6,
    .home-photo-story-item--7 {
        height: 112px !important;
        min-height: 112px !important;
        max-height: 112px !important;
    }

}



/* =========================================================
   HOME PHOTO GALLERY — MAIN IMAGE + THUMBNAIL SLIDER
   Add this block at the END of app.css
========================================================= */

.home-gallery-viewer {display:grid;gap:16px}
.home-gallery-main{position:relative;display:block;width:100%;aspect-ratio:16/8.5;min-height:0;padding:0;overflow:hidden;border:0;border-radius:20px;background:#0b1728;cursor:zoom-in;isolation:isolate}
.home-gallery-main>img{position:absolute;inset:0;z-index:-2;display:block;width:100%;height:100%;object-fit:cover;transition:transform .45s ease,opacity .2s ease}
.home-gallery-main:hover>img,.home-gallery-main:focus-visible>img{transform:scale(1.025)}
.home-gallery-main-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(5,18,36,.02) 48%,rgba(5,18,36,.68) 100%);pointer-events:none}
.home-gallery-main-copy{position:absolute;left:28px;right:28px;bottom:24px;display:grid;gap:5px;color:#fff;text-align:left;pointer-events:none}
html[dir="rtl"] .home-gallery-main-copy{text-align:right}
.home-gallery-main-copy strong{font-size:clamp(18px,2vw,28px);line-height:1.15}
.home-gallery-main-copy small{max-width:650px;color:rgba(255,255,255,.84);font-size:13px;line-height:1.55}
.home-gallery-main-zoom{position:absolute;top:20px;right:20px;width:46px;height:46px;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.4);border-radius:50%;background:rgba(7,24,47,.32);color:#fff;backdrop-filter:blur(8px);pointer-events:none}
html[dir="rtl"] .home-gallery-main-zoom{right:auto;left:20px}
.home-gallery-main-zoom svg{width:20px;height:20px}
.home-gallery-thumbs-shell{display:grid;grid-template-columns:46px minmax(0,1fr) 46px;gap:10px;align-items:center}
.home-gallery-thumbs{display:flex;gap:10px;min-width:0;overflow-x:hidden;overflow-y:hidden;padding:3px 2px 7px;scroll-behavior:smooth;scroll-snap-type:x proximity;scrollbar-width:thin;overscroll-behavior-inline:contain}
.home-gallery-thumb{flex:0 0 132px;width:132px;height:86px;padding:0;overflow:hidden;border:2px solid transparent;border-radius:12px;background:#eaf0f7;cursor:pointer;opacity:.66;scroll-snap-align:center;transition:opacity .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease}
.home-gallery-thumb:hover,.home-gallery-thumb:focus-visible{opacity:1;transform:translateY(-2px)}
.home-gallery-thumb.is-active{opacity:1;border-color:#12386f;box-shadow:0 7px 22px rgba(12,43,86,.18)}
.home-gallery-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.home-gallery-thumbs-arrow{width:46px;height:46px;display:inline-flex;align-items:center;justify-content:center;padding:0;border:1px solid rgba(16,47,88,.14);border-radius:50%;background:#fff;color:#12386f;cursor:pointer;box-shadow:0 8px 22px rgba(12,43,86,.08);transition:background-color .2s ease,color .2s ease,transform .2s ease}
.home-gallery-thumbs-arrow:hover{background:#12386f;color:#fff}
.home-gallery-thumbs-arrow svg{width:19px;height:19px}
html[dir="rtl"] .home-gallery-thumbs-arrow svg{transform:scaleX(-1)}

@media(max-width:991px){.home-gallery-main{aspect-ratio:16/9;border-radius:16px}.home-gallery-thumb{flex-basis:112px;width:112px;height:74px}}
@media(max-width:767px){.home-photo-story{padding:40px 0!important}.home-photo-story-head{margin-bottom:18px!important}.home-gallery-viewer{gap:10px}.home-gallery-main{aspect-ratio:4/3;min-height:0!important;max-height:none!important;border-radius:14px}.home-gallery-main-copy{left:14px;right:14px;bottom:13px;gap:2px}.home-gallery-main-copy strong{font-size:15px}.home-gallery-main-copy small{max-width:88%;font-size:10px;line-height:1.35}.home-gallery-main-zoom{top:10px;right:10px;width:36px;height:36px}html[dir="rtl"] .home-gallery-main-zoom{right:auto;left:10px}.home-gallery-main-zoom svg{width:16px;height:16px}.home-gallery-thumbs-shell{grid-template-columns:34px minmax(0,1fr) 34px;gap:6px}.home-gallery-thumbs-arrow{width:34px;height:34px}.home-gallery-thumbs-arrow svg{width:15px;height:15px}.home-gallery-thumbs{gap:6px;padding:2px 1px 5px;scrollbar-width:none}.home-gallery-thumbs::-webkit-scrollbar{display:none}.home-gallery-thumb{flex:0 0 76px;width:76px;height:54px;border-radius:8px}}
@media(max-width:390px){.home-gallery-main{aspect-ratio:1.32/1}.home-gallery-thumb{flex-basis:68px;width:68px;height:49px}}