:root {
    --primary-red: #e30613;
    --font-heading: 'Obvia Condensed', 'Bebas Neue', sans-serif;
    --font-body: 'HP Simplified', 'Inter', sans-serif;
}

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

body, html {
    margin: 0;
    padding: 0;
    font-family: var(--font-body);
    background-color: #ffffff;
    min-height: 100vh;
    width: 100%;
}

/* Background Image - Persistent on right bottom */
body {
    background-image: url('Background Image.png');
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: contain; /* Don't cut, keep stuck to edges */
    background-attachment: fixed; /* Keeps it locked to the bottom and right */
}

/* Page Overlay */
.page-container {
    width: 100%;
    min-height: 100vh;
    display: block;
    position: relative;
    z-index: 10;
}

/* Content Area - Transparent to let BG show through */
.content-wrapper {
    width: 50%; /* Desktop takes left half */
    padding: 10vh 8vw;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    background: transparent;
}

.header {
    margin-bottom: 25vh;
}

.logo {
    width: clamp(200px, 15vw, 260px);
    height: auto;
}

/* Hero Section Styles */
.hero-section {
    position: relative;
    max-width: 550px;
}

.subtitle-container {
    position: relative;
    width: 100%;
}

.hero-image {
    width: 100%;
    height: auto;
    display: block;
}

/* Interactive hotspots on the hero-image icons */
.interactive-overlay {
    position: absolute;
    bottom: 0px; 
    left: 10px;
    height: 25%;
    width: 140px; 
    display: flex;
    gap: 15px;
}

.overlay-link {
    flex: 1;
    height: 100%;
    cursor: pointer;
    background: transparent;
    display: block;
    z-index: 20;
}

/* RESPONSIVE BREAKPOINTS */

@media (max-width: 1250px) {
    .content-wrapper {
        width: 60%;
        padding: 5vh 5vw;
    }
}

/* Mobile & Tablets (Stack Content over BG) */
@media (max-width: 850px) {
    body {
        background-size: 100% auto; /* Take full width on mobile or keep contain? let's stick to 120% maybe? 
                                       Actually, 120% 120% right bottom is common for this. */
        background-position: right bottom;
    }

    .content-wrapper {
        width: 100%;
        padding: 6vh 8vw 40vh; /* Bottom padding to avoid text overlapping car at bottom too much */
        align-items: center;
        text-align: center;
    }

    .header {
        margin-bottom: 12vh;
    }

    .logo {
        width: 220px;
    }

    .hero-section {
        max-width: 420px;
    }
}

/* Small Devices */
@media (max-width: 480px) {
    .logo {
        width: 180px;
    }
    .hero-section {
        max-width: 320px;
    }
    .interactive-overlay {
        bottom: 2%;
        width: 110px;
        gap: 10px;
    }
}