/* =========================================================
   ALBARON LUXURY MOTORS – PREMIUM BLACK × GOLD THEME
   ========================================================= */

:root {
    --main: #C8A951;        /* Gold */
    --main-light: #E6C977;  /* Soft gold */
    --main-dark: #8C6B1F;   /* Deep gold */

    --bg-main: #0B0D10;     /* Deep Carbon Black */
    --bg-soft: #14181D;     /* Dark panel */
    --bg-soft2: #1A1F25;

    --text: #F5F7FA;        /* Light text */
    --muted: #A7B0BB;       /* Grey-muted */
    --card-bg: #111418;
    --card-border: #232A33;
    --white: #FFF;

    --radius: 14px;
    --transition: .3s ease;
}

/* Reset */
body {
    background: var(--bg-main);
    color: var(--text);
    font-family: "Tajawal", sans-serif;
}

/* ===================== NAVBAR ===================== */

.navbar {
    background: var(--bg-soft) !important;
    border-bottom: 1px solid #1d2127 !important;
}

.navbar a {
    color: var(--text) !important;
    font-weight: 600;
}

.navbar a:hover {
    color: var(--main-light) !important;
}

.lang-switch a {
    color: var(--text);
}
.lang-switch a:hover {
    color: var(--main-light);
}

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

.hero-transport {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #000;
}

.hero-bg {
    width: 100%;
    height: 560px;
    filter: brightness(0.55);
}

@media (max-width: 768px) {
    .hero-bg {
        height: 440px;
    }
}

/* Slider Buttons */
.carousel-control-next-icon,
.carousel-control-prev-icon {
    filter: invert(90%) sepia(60%) saturate(300%) hue-rotate(15deg);
}

/* ===================== BUTTONS ===================== */

.btn-main-light {
    background: var(--main);
    color: #111;
    font-weight: 700;
    padding: 10px 26px;
    border-radius: 12px;
    transition: var(--transition);
}

.btn-main-light:hover {
    background: var(--main-light);
    color: #000;
}

/* ===================== SECTION TITLES ===================== */

.section h2 {
    color: var(--main-light);
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 8px;
}

.section p.lead {
    color: var(--muted);
}

/* ===================== SERVICE CARDS ===================== */

.service-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    padding: 14px;
    text-align: center;
    transition: var(--transition);
}

.service-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.35);
    border-color: var(--main);
}

.service-card h5 {
    color: var(--main-light);
    font-weight: 700;
    margin-bottom: 10px;
}

.service-card p {
    color: var(--muted);
    font-size: .95rem;
}

.service-card .img-box {
    width: 100%;
    height: 210px;
    overflow: hidden;
    border-radius: var(--radius);
    margin-bottom: 15px;
}
.service-card .img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ===================== ABOUT PAGE ===================== */

.about-img-box {
    width: 100%;
    height: 350px;
    overflow: hidden;
    border-radius: var(--radius);
    border: 1px solid var(--card-border);
}
.about-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ===================== CAR LIST ===================== */

.car-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    transition: var(--transition);
    overflow: hidden;
}

.car-card:hover {
    transform: translateY(-6px);
    border-color: var(--main);
    box-shadow: 0 8px 25px rgba(0,0,0,0.35);
}

.car-card img {
    width: 100%;
    height: 240px;
    object-fit: cover;
}

.car-card .car-title {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--main-light);
    margin-top: 10px;
}

.car-card .car-info {
    color: var(--muted);
    font-size: .9rem;
}

/* ===================== FOOTER ===================== */

footer {
    background: #0A0C0F !important;
    border-top: 1px solid #1d2127;
    color: var(--muted);
    text-align: center;
    padding: 18px 0;
}

footer div {
    opacity: .85;
}

/* ===================== FORCED SPACING FIX ===================== */

.section {
    padding: 60px 0;
}

@media (max-width: 768px) {
    .section {
        padding: 40px 0;
    }
}