body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #2C2F33; /* Dark background */
    color: #EAEAEA; /* Light text */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.body-content {
    flex: 1;
}

/* Muted Red Accent */
.text-accent-red {
    color: #D9534F !important;
}

.bg-accent-red {
    background-color: #D9534F !important;
    border-color: #D9534F !important;
}

.btn-danger { /* Overriding Bootstrap's default red to our muted red */
    background-color: #D9534F;
    border-color: #D9534F;
}

    .btn-danger:hover, .btn-danger:focus {
        background-color: #C9302C; /* A slightly darker shade for hover/focus */
        border-color: #AC2925;
    }

.navbar-brand i {
    color: #D9534F;
}

h1, h2, h3, h4, h5, h6 {
    color: #D9534F; /* Red headings */
}

.card {
    background-color: #36393f; /* Darker card background */
    border: 1px solid #4f545c;
}

.card-header {
    background-color: #2f3136;
    border-bottom: 1px solid #4f545c;
}

/* More styles will be added as we build components */

.hero-section {
    /* === MODIFIED PART === */
    background: linear-gradient(rgba(20, 20, 20, 0.85), rgba(10, 10, 10, 0.95)), url('https://images.unsplash.com/photo-1552519507-da3b142c6e3d?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80'); /* Example: Mitsubishi Car Image */
    /* === END MODIFIED PART === */
    background-size: cover;
    background-position: center center;
    padding: 8rem 0;
    color: #f8f9fa;
    text-align: center;
}

        .hero-section .display-3 {
            font-weight: 700;
            color: #fff;
        }
        .hero-section .text-accent-red {
             color: #D9534F !important;
        }

        .hero-section p.lead {
            font-size: 1.3rem;
            margin-bottom: 2rem;
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
            color: #ced4da;
        }

        .hero-section .btn-lg {
            padding: 0.8rem 2.5rem;
            font-size: 1.1rem;
            font-weight: 600;
        }

        .section-title { /* This might be a general utility, but fine here for now */
            margin-bottom: 3rem;
            font-weight: 600;
        }
        .section-title small {
            display: block;
            font-size: 0.9rem;
            color: #adb5bd;
            margin-top: 0.25rem;
        }

        .feature-card {
            background-color: #36393f;
            border: none;
            border-radius: 0.5rem;
            padding: 2rem;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            height: 100%;
        }
        .feature-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(217, 83, 79, 0.15);
        }
        .feature-card .icon-circle {
            width: 70px;
            height: 70px;
            background-color: rgba(217, 83, 79, 0.1);
            color: #D9534F;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1.5rem;
            font-size: 2rem;
        }
        .feature-card h5 {
            font-weight: 600;
            margin-bottom: 0.75rem;
            /* Note: h5 color is already set globally to red in Site.css, if not, add 'color: #D9534F;' here or ensure global style applies */
        }
        .feature-card p {
            font-size: 0.95rem;
            color: #adb5bd;
        }

        .benefits-section {
            padding: 4rem 0;
            background-color: #2C2F33;
        }
        .benefit-item {
            display: flex;
            align-items: flex-start;
            margin-bottom: 1.5rem;
        }
        .benefit-item .icon-box {
            font-size: 1.5rem;
            color: #D9534F;
            margin-right: 1rem;
            min-width: 30px;
            text-align: center;
        }
        .benefit-item h6 {
            margin-bottom: 0.25rem;
            color: #f0f0f0; /* Red color for h6 is from global Site.css, adjust if needed here for benefit items */
        }
        .benefit-item p {
            font-size: 0.9rem;
            color: #adb5bd;
            margin-bottom: 0;
        }

        .cta-section { /* Call To Action section specific styles */
            padding: 4rem 0;
            text-align: center;
            /* background-color: #343a40; (already set in Default.aspx HTML if using bg-dark) */
        }