:root {
    --primary-red: #e31e24;
    /* Updated to match ArkAuto Logo Red */
    --primary-black: #111111;
    --text-white: #ffffff;
    --text-grey: #e0e0e0;
}

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

body {
    font-family: 'Outfit', sans-serif;
    min-height: 100vh;
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    /* Allow scrolling */
    position: relative;
    background-color: var(--primary-black);
    color: var(--text-white);
}

/* Background Slider */
/* Background Slider */
/* Background Media Container */
.media-container {
    position: fixed;
    /* Fixed so it stays while scrolling */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    overflow: hidden;
}

.background-media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}

.background-media.active {
    opacity: 1;
    z-index: 1;
    /* Bring active to front of the stack within container */
}

/* Video specific */
#intro-video {
    object-fit: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1.2);
    /* Centered and slightly zoomed to prevent edge gaps */
    min-width: 100%;
    min-height: 100%;
}

/* Overlay to darken images for text readability */
/* Overlay to darken images for text readability */
.overlay {
    position: fixed;
    /* Fixed to cover background */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    /* Reduced opacity slightly since blur is gone? Or keep 0.8? Let's go 0.7 */
    z-index: -1;
}

/* Content Layout */
.content-wrapper {
    position: relative;
    z-index: 10;
    min-height: 100vh;
    /* Ensure it takes full height but can grow */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 2rem;
}

/* Header */
header {
    display: flex;
    justify-content: center;
    padding-top: 1rem;
}

.logo {
    max-width: 300px;
    height: auto;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5));
}

/* Main Hero */
main {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.hero-content h1 {
    font-size: 4.5rem;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 1rem;
    text-transform: uppercase;
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.8);
    background: linear-gradient(90deg, #ffffff, var(--primary-red));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-content p {
    font-size: 1.25rem;
    color: var(--text-grey);
    max-width: 600px;
    margin: 0 auto 2rem;
    line-height: 1.6;
}

.loader-line {
    width: 100px;
    height: 4px;
    background: var(--primary-red);
    margin: 0 auto;
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}

.loader-line::after {
    content: '';
    position: absolute;
    left: -100%;
    top: 0;
    width: 100%;
    height: 100%;
    background: white;
}

/* Footer / Contact */
footer {
    padding-bottom: 2rem;
}

.contact-container {
    display: flex;
    justify-content: center;
    gap: 3rem;
    flex-wrap: wrap;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px);
    padding: 1.5rem 3rem;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    max-width: fit-content;
    margin: 0 auto;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: white;
}

.contact-item i {
    font-size: 1.5rem;
    color: var(--primary-red);
    background: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.contact-text {
    text-align: left;
    font-size: 0.95rem;
    line-height: 1.4;
}

.contact-text a {
    color: white;
    text-decoration: none;
    transition: color 0.3s;
}

.contact-text a:hover {
    color: var(--primary-red);
}

/* Animations */
/* We can add class variations for different entrance animations via JS if needed, but the subtle zoom and fade is usually the most "beautiful" and professional. I'll stick to that as the base, but maybe add some variants. */

@media (max-width: 768px) {
    .content-wrapper {
        padding: 1rem;
    }

    .logo {
        max-width: 200px;
    }

    .hero-content h1 {
        font-size: 2.5rem;
    }

    .contact-container {
        flex-direction: column;
        gap: 1.5rem;
        border-radius: 20px;
        padding: 1.5rem;
        align-items: flex-start;
    }
}

.whatsapp-link a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #25D366;
    /* WhatsApp Green */
    text-decoration: none;
    font-weight: 700;
    transition: all 0.3s ease;
}

.whatsapp-link a:hover {
    color: #128C7E;
    transform: scale(1.05);
}

.whatsapp-link i {
    font-size: 1.2rem;
}

/* Floating WhatsApp Widget */
.floating-whatsapp {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background-color: #25D366;
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 35px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    z-index: 100;
    /* Ensure it's above everything */
    transition: all 0.3s ease;
    text-decoration: none;
}

.floating-whatsapp:hover {
    transform: scale(1.1);
    background-color: #128C7E;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4);
}

.floating-whatsapp {
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    font-size: 28px;
}

/* Navbar */
.navbar {
    position: fixed;
    /* Fixed to viewport */
    top: 1.5rem;
    right: 2rem;
    z-index: 1100;
    /* Above sidebar z-index (1000) so it remains clickable or acts as toggle? actually sidebar is 1000. If sidebar opens, it covers everything. But button should be visible? Usually button toggles. If sidebar covers it, we need a close button inside sidebar (which we have). */
}

.nav-btn {
    background: transparent;
    border: none;
    color: white;
    font-size: 2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 10px;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.nav-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--primary-red);
}

/* Sidebar */
.sidebar {
    position: fixed;
    top: 0;
    right: -400px;
    /* Hidden by default */
    width: 350px;
    height: 100%;
    background: rgba(17, 17, 17, 0.95);
    backdrop-filter: blur(15px);
    z-index: 1000;
    transition: right 0.4s cubic-bezier(0.77, 0, 0.175, 1);
    padding: 2rem;
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.5);
    overflow-y: auto;
}

.sidebar.open {
    right: 0;
}

.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 1rem;
}

.sidebar-header h2 {
    color: white;
    font-size: 1.5rem;
}

.close-btn {
    background: none;
    border: none;
    color: white;
    font-size: 2rem;
    cursor: pointer;
    transition: color 0.3s;
}

.close-btn:hover {
    color: var(--primary-red);
}

/* Brands Grid */
.brands-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.brand-item {
    background: white;
    color: var(--primary-black);
    padding: 1rem;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    /* Fixed height for consistency */
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
    overflow: hidden;
}

.brand-item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.brand-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 255, 255, 0.1);
}

.brand-item:hover img {
    transform: scale(1.1);
}

/* Construction Modal */
.modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    justify-content: center;
    align-items: center;
}

.modal-content {
    background-color: #fff;
    padding: 3rem;
    border-radius: 20px;
    width: 90%;
    max-width: 500px;
    text-align: center;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.close-modal {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 2rem;
    font-weight: bold;
    color: #333;
    cursor: pointer;
    transition: color 0.3s;
}

.close-modal:hover {
    color: var(--primary-red);
}

.modal-icon {
    font-size: 4rem;
    color: var(--primary-red);
    margin-bottom: 1.5rem;
}

.modal-content h2 {
    color: #111;
    margin-bottom: 1rem;
    font-size: 2rem;
    text-transform: uppercase;
}

.modal-content p {
    color: #555;
    font-size: 1.1rem;
}

.modal-content #selected-brand-name {
    font-weight: 700;
    color: var(--primary-red);
}

/* -------------------------------------------------------------------------- */
/*                               Request Form Styles                           */
/* -------------------------------------------------------------------------- */

.request-section {
    padding: 4rem 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.glass-panel {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    padding: 3rem;
    width: 100%;
    max-width: 800px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

.form-title {
    color: white;
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: linear-gradient(90deg, #ffffff, var(--primary-red));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.form-subtitle {
    text-align: center;
    color: var(--text-grey);
    margin-bottom: 2rem;
    font-size: 1.1rem;
}

.form-row {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1rem;
}

.form-group {
    margin-bottom: 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

label {
    color: var(--text-grey);
    margin-bottom: 0.5rem;
    font-weight: 600;
    font-size: 0.9rem;
    margin-left: 5px;
}

input,
select,
textarea {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1rem;
    color: white;
    font-family: inherit;
    font-size: 1rem;
    transition: all 0.3s ease;
    width: 100%;
}

input::placeholder,
textarea::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--primary-red);
    background: rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 10px rgba(227, 30, 36, 0.3);
}

select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1em;
}

select:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

textarea {
    resize: vertical;
}

.form-title-small {
    color: white;
    font-size: 1.2rem;
    margin: 1.5rem 0 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 0.5rem;
}

.submit-options {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
}

.submit-btn {
    border: none;
    padding: 1.2rem;
    width: 100%;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: white;
}

.email-btn {
    background: linear-gradient(45deg, var(--primary-black), #333);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.whatsapp-btn {
    background: linear-gradient(45deg, #25D366, #128C7E);
}

.submit-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
}

.submit-btn:active {
    transform: translateY(-1px);
}

@media (max-width: 768px) {
    .submit-options {
        flex-direction: column;
        gap: 1rem;
    }
}

/* Keyframe Animations removed for performance */

/* Specific Responsive Adjustments */
@media (max-width: 768px) {
    .form-row {
        flex-direction: column;
        gap: 0;
    }

    .glass-panel {
        padding: 1.5rem;
    }

    .form-title {
        font-size: 2rem;
    }
}