@charset "utf-8";

/* Mobility Main Page */

.quantum-hero {
    width: 100%;
    height: 100dvh;
    min-height: 600rem;
    position: relative;
    background: linear-gradient(135deg, #9C2B32 0%, #BA2427 100%);
    overflow: hidden;
    border-radius: 0 0 200px 0;

    .quantum-hero-content {
        display: flex;
        align-items: center;
        height: 100%;
        z-index: 1;
    }

    .quantum-hero-content .title-wrap {
        color: #fff;
    }

    .quantum-hero-content .title-wrap .title p {
        font-family: var(--font-sans);
        font-size: var(--font-size-32);
        margin-bottom: 24px;
    }

    .quantum-hero-content .title-wrap .title h1 {
        font-family: var(--font-primary);
        font-size: var(--font-size-60);
        line-height: 140%;
    }

    .quantum-hero-content .title-wrap a {
        display: flex;
        width: 200px;
        height: 60px;
        padding: 18px 12px;
        justify-content: center;
        align-items: center;
        gap: 20px;
        border-radius: 50px;
        background: #FFF;
        color: #B92427;
        margin-top: 100px;
    }

    .car-main {
        position: absolute;
        bottom: 10%;
        right: 300rem;
        width: calc(var(--container-scale) * 100%);
        max-width: 485rem;
        z-index: 1;
    }

    .bg-main {
        position: absolute;
        bottom: 0;
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        filter: brightness(0.8);
        clip-path: polygon(0 0, 100% 0%, 50% 100%, 0% 100%);
    }


    @media (max-width: 1280px) {
        .car-main {
            max-width: 300rem;
            right: 150rem;
        }
    }

    @media (max-width: 767px) {
        .car-main {
            max-width: 190rem;
            right: 0rem;
            bottom: 30rem;
        }
    }
}