/*
======================================================
1. GLOBAL STYLES & VARIABLES
======================================================
*/
:root {
    /* Color Palette */
    --primary-red: #B00020;
    --primary-dark: #8E001A;
    --muted: #e0e0e0;
    --background: #f7f7fb;
    --dark-bg: #191c21;
    --light-text: #b0b8c0;

    /* Spacing & Utilities */
    --radius: 12px;
    --font: 'Poppins', sans-serif;
    --form-font: 'Quicksand', sans-serif;
    --heading-font: 'Montserrat', sans-serif; 
    --transition: 0.3s ease-in-out;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font);
    color: #111;
    background: var(--background);
    line-height: 1.6;
}

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

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.center-text {
    text-align: center;
}

.section-description {
    max-width: 800px;
    margin: 0px auto 40px auto;
    text-align: center;
    font-size: 17px;
    color: #555;
}

/* Base Headings (H2 Style with Underline) */
h2 {
    font-family: var(--heading-font);
    font-size: 30px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 40px;
    color: var(--primary-dark);
    position: relative;
    display: inline-block;
    width: auto;
    left: 50%;
    transform: translateX(-50%);
}

h2::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background: var(--primary-red);
    margin: 10px auto 0;
    border-radius: 2px;
}

/*
======================================================
2. HEADER STYLES
======================================================
*/
header {
    background-color: rgba(25, 28, 33, 0.4); 
    color: white;
    position: fixed; 
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    transition: background-color 0.4s ease;
}

.header-content {
    max-width: 1200px; 
    margin: 0 auto; 
    padding: 15px 20px; 
    display: flex;
    justify-content: space-between; 
    align-items: center;
}

.brand {
    display: flex;
    align-items: left;
    gap: 10px;
    text-decoration: none;
    color: white;
    margin-right: auto; 
}

.logo-img {
    height: 40px;
    width: auto;
}

.brand-name {
    font-size: 14px;
    font-weight: 400;
}

#main-nav {
    display: flex;
    gap: 20px;
}

#main-nav a {
    color: white;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s;
}

#main-nav a:hover,
#main-nav a.active {
    color: #ff6f61;
}

.menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
}

.menu-toggle span {
    width: 25px;
    height: 3px;
    background-color: var(--primary-red) !important; /* force white */
    border-radius: 2px;
    display: block;
    transition: all 0.3s ease; /* smooth open/close animation */
}



body.menu-open #main-nav {
    transform: translateX(0);
    display: flex !important; 
}

/*
======================================================
3. HERO SECTIONS
======================================================
*/
.hero {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: flex;
    color: white;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 100px 0 80px 0;
    box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.4);
}

.hero-content {
    max-width: 800px;
}

.hero h1 {
    font-family: var(--heading-font);
    font-size: 28px; 
    font-weight: 400;
    margin-bottom: 20px;
    text-shadow: 2px 2px 6px rgba(0,0,0,0.5);
}

.hero p {
    font-size: 17px;
    margin-bottom: 30px;
    color: var(--muted);
}

.hero-full-bg {
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5)), url('images/hero.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center bottom;
    min-height: 100vh;
    box-shadow: none; 
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-top: 100px;
    padding-bottom: 0;
}


.hero-content-wrapper {
    max-width: 900px;
    padding: 0 20px;
}

.hero-full-bg .hero-title, 
.hero-full-bg .hero-description {
    color: white !important; 
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
}

.hero-title {
    font-size: 28px; 
    font-weight: 600;
    line-height: 1.1;
} 

.hero-description {
    font-size: 18px;
    margin: 20px auto 30px auto;
    color: var(--muted);
}

/* Specific Page Hero Backgrounds */
.parts-hero {
    background-image: url('images/hero-parts.png'); 
    box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.5);
}

.lease-hero {
    background-image: url('images/hero-lease.png'); 
    box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.5);
}

.overhaul-hero {
    background-image: url('images/hero-overhaul.png'); 
    background-position: center 70%;
    box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.5);
}

.sale-hero {
    background-image: url('images/hero-sale.png'); 
    background-position: center 30%;
    box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.5);
}

.contact-hero {
    background-image: url('images/hero-contact.png'); 
    box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.5);
}

/*
======================================================
4. BUTTONS & MAIN CONTENT (GRID/CARDS)
======================================================
*/
.btn {
    padding: 14px 32px;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    font-weight: 700;
    transition: all var(--transition);
    display: inline-block;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-hero {
    background: transparent;
    color: white;
    border: 2px solid white;
    margin-top: 10px;
}

.btn-hero:hover {
    background: var(--primary-red);
    border-color: var(--primary-red);
    transform: translateY(-3px);
}

.btn-primary {
    background: linear-gradient(180deg, var(--primary-red) 0%, var(--primary-dark) 100%);
    color: white;
    box-shadow: 0 6px 15px rgba(176, 0, 32, 0.4);
}

.btn-primary:hover {
    transform: translateY(-3px);
    background: linear-gradient(180deg, var(--primary-red) 0%, #D40029 100%);
    box-shadow: 0 10px 25px rgba(176, 0, 32, 0.6);
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    margin-top: 20px;
    padding-bottom: 40px;
}

.card {
    background: white;
    border-radius: var(--radius);
    box-shadow: 0 8px 20px rgba(0,0,0,0.05);
    overflow: hidden;
    transition: transform var(--transition), box-shadow var(--transition);
}

.card:hover {
    transform: translateY(-7px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.15);
}

.card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: transform var(--transition);
}

.card:hover img {
    transform: scale(1.05);
}

.card-body {
    padding: 20px;
}

.card-body h3 {
    font-family: var(--heading-font);
    margin-bottom: 12px;
    font-size: 20px; 
    color: var(--primary-dark);
}

.card-body p {
    color: #6b7280;
    font-size: 15px;
    margin-bottom: 15px;
}

.card-body .btn {
    font-size: 14px;
    padding: 10px 20px;
    margin-top: 5px;
}

/* Contact Form */
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-width: 600px;
    margin: 20px auto 50px;
}

.contact-form input,
.contact-form textarea {
    padding: 14px;
    border-radius: var(--radius);
    border: 1px solid #ccc;
    font-family: var(--font);
    font-size: 14px;
    transition: border-color var(--transition);
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--primary-red);
}

.contact-email {
    margin-top: 12px;
    color: #6b7280;
    text-align: center;
}

.contact-form select {
    padding: 14px;
    border-radius: var(--radius);
    border: 1px solid #ccc;
    font-family: var(--form-font);
    font-size: 16px; 
    background-color: white;
    transition: border-color var(--transition);
    width: 100%; 
    box-sizing: border-box; 
    appearance: none; 
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%3Cpath%20fill%3D%22%23333%22%20d%3D%22M10%203L6%207L2%203L0%205L6%2011L12%205z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 30px;
}


/* ========================================================= */
/* CTA BANNER STYLES                                         */
/* ========================================================= */

.cta-banner {
    background: linear-gradient(90deg, var(--primary-dark) 0%, var(--primary-red) 100%);
    padding: 40px 0;
    text-align: center; /* <<< MUST BE HERE TO ALIGN H2/BUTTON */
    color: white;
    margin-top: 50px;
}

/* This is the inner container for the CTA banner */
.cta-banner .container {
    /* Ensures the *content* inside the container div is treated as a block for centering the paragraph */
    text-align: center; 
}

.cta-banner h2 {
    color: white;
    font-size: 26px;
    margin-bottom: 10px;
}

.cta-banner h2::after {
    /* Remove the default H2 underline for the CTA banner */
    display: none; 
}

.cta-banner .cta-content p {
    font-size: 17px;
    max-width: 600px;
    margin: 0 auto 30px auto;
    color: #f0f0f0;
    line-height: 1.6;
}

.btn-secondary {
    background: white;
    color: var(--primary-dark);
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.btn-secondary:hover {
    background: var(--muted);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.4);
}


/*

/*
======================================================
5. PARTS PAGE SPECIFIC STYLES
======================================================
*/
.parts-grid .part-card {
    grid-column: span 1; 
}

.part-card img {
    height: 250px;
    object-fit: contain;
    background: #fcfcfc;
    padding: 10px;
}

.part-card h3 {
    color: #333; 
    font-size: 18px;
    min-height: 48px;
}

.part-price {
    font-size: 20px;
    font-weight: 700;
    color: var(--primary-dark);
    margin-top: 10px;
    margin-bottom: 15px !important;
}

/*
======================================================
6. FOOTER STYLES
======================================================
*/
footer {
    background: var(--dark-bg);
    color: white;
    padding: 0; 
    margin-top: 50px;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    padding: 50px 20px; 
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-col h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 25px;
    color: white;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.footer-col p {
    font-size: 14px;
    color: var(--light-text);
    margin-bottom: 10px;
}

.social-icons a {
    color: var(--primary-red);
    font-size: 20px;
    transition: color var(--transition);
    margin-right: 15px;
}
.social-icons a:hover {
    color: white;
}

.contact-col .contact-info {
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--light-text);
    display: flex;
    align-items: center;
}
.contact-col .contact-info i {
    font-size: 14px;
    color: var(--primary-red);
    margin-right: 10px;
}

.btn-contact {
    display: inline-block;
    color: var(--primary-red);
    font-weight: 600;
    margin-top: 15px;
    transition: color var(--transition);
}
.btn-contact:hover {
    color: white;
}

.nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.nav-list li {
    margin-bottom: 8px;
}
.nav-list a {
    font-size: 14px;
    color: var(--light-text);
    transition: color var(--transition);
}
.nav-list a:hover {
    color: var(--primary-red);
}

.copyright-bar {
    background: #111;
    padding: 15px 0;
}
.copyright-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: #6b7280;
}
.copyright-content a {
    color: #6b7280;
}
.copyright-content a:hover {
    color: var(--primary-red);
}

/*
======================================================
7. SUPPLIER SCROLLING STRIP
======================================================
*/
.supplier-strip {
    background-color: #a0a0a0;
    padding: 40px 0;
    margin-top: 50px;
    overflow: hidden; 
    white-space: nowrap;
}

.supplier-strip h2 {
    color: var(--primary-color, #a8002d); 
    font-size: 1.1em; 
    text-align: center;
    margin-bottom: 20px; 
    position: relative;
    padding-bottom: 10px;
}

.supplier-strip h2::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background-color: var(--primary-color, #a8002d);
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%); 
}

.logo-scroll-container {
    width: 100%;
    overflow: hidden;
}

.logo-scroll-track {
    display: flex;
    animation: scrollLogos 40s linear infinite; 
    width: fit-content;
}

.supplier-logo {
    height: 90px; 
    margin: 0 40px; 
    opacity: 0.9; 
    filter: grayscale(100%); 
    flex-shrink: 0; 
}

@keyframes scrollLogos {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}


/* ========================================================= */
/* 8. BROKERAGE HERO RESPONSIVE & BASE                         */
/* ========================================================= */
.brokerage-hero {
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.4)), url('images/hero-brokerage.png'); 
    background-position: center 35%;
    background-size: cover;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 80px 20px;
}

.hero-tagline {
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--primary-red);
    margin-bottom: 10px;
    letter-spacing: 1px;
}

/* ========================================================= */
/* TWO-COLUMN SECTION                                        */
/* ========================================================= */
.two-col-section {
    padding: 60px 20px;
    display: flex;
    flex-wrap: wrap; 
    gap: 40px;
    align-items: center;
}

.two-col-section .col-text {
    flex: 2; 
    min-width: 300px; 
}

.two-col-section .col-image {
    flex: 1; 
    min-width: 250px;
}

.two-col-section .col-image img {
    max-width: 100%; 
    height: auto;
    display: block;
    border-radius: var(--radius); 
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    object-fit: cover;
}

/* ========================================================= */
/* DARK BG SECTION & PROCESS GRID                             */
/* ========================================================= */
.dark-bg {
    background: var(--dark-bg);
    color: var(--light-text);
    padding: 60px 20px;
}

.dark-bg h2 {
    color: white;
}

.process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); 
    gap: 30px;
    max-width: 1200px; /* Assuming your main container is 1200px */
    margin: 20px auto 0 auto;
    margin-top: 20px;
}

.process-step {
    text-align: center;
    padding: 20px;
    background: rgba(255,255,255,0.05);
    border-radius: var(--radius);
}

.process-step h4 {
    margin-bottom: 12px;
    color: white;
    font-weight: 600;
}

.process-step p {
    font-size: 14px;
    color: #ccc;
}
/* ========================================================= */
/* RESPONSIVE FIXES                                          */
/* ========================================================= */
@media (max-width: 900px) {
    .brokerage-hero {
        min-height: 300px;
        padding: 60px 20px;
    }

    .two-col-section {
        flex-direction: column;
        text-align: center;
    }

    .two-col-section .col-image {
        margin: 0 auto;
    }

    .process-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        justify-content: center; /* ✅ ensures even centering */
        align-items: stretch;
    }

    .process-step {
        margin: 0 auto;          /* ✅ centers each card */
        max-width: 320px;        /* ✅ prevents over-stretching */
    }
}

@media (max-width: 576px) {
    .brokerage-hero {
        min-height: 250px;
        padding: 40px 15px;
    }

    .hero-tagline {
        font-size: 14px;
    }

    .two-col-section {
        padding: 40px 15px;
    }

    .two-col-section .col-text,
    .two-col-section .col-image {
        min-width: 100%;
    }

    .process-grid {
        grid-template-columns: 1fr;
        gap: 15px;
        justify-content: center; /* ✅ keep centered in 1-column view */
    }

    .process-step {
        padding: 15px;
        margin: 0 auto;          /* ✅ center the step block */
        max-width: 320px;
    }

    .process-step h4 {
        font-size: 16px;
    }

    .process-step p {
        font-size: 13px;
    }
}

/*
======================================================
9. RESPONSIVE / MEDIA QUERIES
======================================================
*/
@media (max-width: 1024px) {
    .two-col-section {
        flex-direction: column-reverse;
        gap: 30px;
    }

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

/* Mobile Nav */
@media (max-width: 768px) {
    #main-nav {
        position: fixed;
        top: 0;
        right: -100%;  /* hidden offscreen by default */
        height: 100%;
        width: 250px;
        background: var(--dark-bg);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 30px;
        transition: right 0.3s ease;
        z-index: 2000;
    }

    body.menu-open #main-nav {
        right: 0; /* slide in */
    }

    .menu-toggle {
        display: flex; /* show hamburger */
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 8px;
        z-index: 3000; /* above nav */
    }

    .hero {
        padding: 80px 15px;
    }

    .card img {
        height: 180px;
    }
}
/* ========================= */
/* CTA BANNER MOBILE FIXES    */
/* ========================= */
@media (max-width: 900px) {
    .cta-banner .cta-content h3 {
        font-size: 24px;
    }
    .cta-banner .cta-content p {
        font-size: 16px;
    }
    .cta-banner .btn-secondary {
        padding: 12px 24px;
        font-size: 14px;
    }
}

@media (max-width: 576px) {
    .cta-banner {
        padding: 40px 15px;
    }
    .cta-banner .cta-content h3 {
        font-size: 20px;
    }
    .cta-banner .cta-content p {
        font-size: 15px;
    }
    .cta-banner .btn-secondary {
        padding: 10px 20px;
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    h2 {
        font-size: 22px;
    }

    .hero h1 {
        font-size: 22px;
    }

    .btn {
        font-size: 13px;
        padding: 12px 24px;
    }

    .supplier-logo {
        height: 60px;
        margin: 0 20px;
    }
/* Mobile fix for Trusted Partners strip */
/* --- Media Query to target and fix only mobile screens (768px wide or less) --- */
@media (max-width: 768px) {
    .supplier-strip {
        /* Set the background to the light grey shown in the desktop image.
           Using !important ensures this style overrides any conflicting mobile defaults 
           or dark background settings that may be in another file. */
        background-color: #a0a0a0 !important; 
    }
}

    
    /* ====== Copy Protection CSS ====== */
img {
  -webkit-user-drag: none; /* Works on Chrome, Safari, Edge */
  user-select: none;       /* Prevents selecting images */
  pointer-events: none;    /* Optional: disables right-click on images */
}

body {
  -webkit-user-select: none; /* Safari/Chrome */
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;     /* IE10+/Edge */
  user-select: none;         /* Standard */
}


}