@font-face {
    font-family: __defaultFont_d4507e;
    src: url("../fonts/0f84f4e2f3f47d07-s.p.woff2") format("woff2");
    font-display: swap;
    font-weight: 300;
    font-style: normal
}

@font-face {
    font-family: __defaultFont_d4507e;
    src: url("../fonts/f94c3cc4cbbc19e4-s.p.woff2") format("woff2");
    font-display: swap;
    font-weight: 350;
    font-style: normal
}

@font-face {
    font-family: __defaultFont_d4507e;
    src: url("../fonts/34145536d0fde6cc-s.p.woff2") format("woff2");
    font-display: swap;
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: __defaultFont_d4507e;
    src: url("../fonts/78ca7ffe26213c34-s.p.woff2") format("woff2");
    font-display: swap;
    font-weight: 500;
    font-style: normal
}

@font-face {
    font-family: __defaultFont_d4507e;
    src: url("../fonts/bd2798b6e5c56d66-s.p.woff2") format("woff2");
    font-display: swap;
    font-weight: 700;
    font-style: normal
}

@font-face {
    font-family: __defaultFont_Fallback_d4507e;
    src: local("Arial");
    ascent-override:96.13%;descent-override:19.23%;line-gap-override:0.00%;size-adjust:104.03%}

.__className_d4507e {
    font-family: __defaultFont_d4507e,__defaultFont_Fallback_d4507e,roboto,Helvetica,Arial,sans-serif
}

:root{
    --m-dark: #021D49;
    --m-body: #3D3D3D;
}
html {
    font-size: 100%;
}

/* total width */
body::-webkit-scrollbar {
    background-color: transparent;
    width: 8px;
}

/* background of the scrollbar except button or resizer */
body::-webkit-scrollbar-track {
    background-color: transparent;
}

/* scrollbar itself */
body::-webkit-scrollbar-thumb {
    background-color: #babac0;
    border-radius: 16px;
}

/* set button(top and bottom of the scrollbar) */
body::-webkit-scrollbar-button {
    display:none;
}
body{
    font-family: __defaultFont_d4507e, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #ffffff;
    background-color: #15181E;
    text-size-adjust: none;
    font-weight: 300;

    -webkit-font-smoothing: antialiased;
}
.bg-black{
    background: #15181E;
}
video {
    object-fit: cover;
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
}

#heroVideo {
    transition: opacity 0.7s ease-in-out;
    opacity: 1;
}

#heroVideo.fade-out {
    opacity: 0;
}


html, body {
    height: 100%;
    scroll-behavior: smooth;
}

.section-forms{

}

.intro-page {
    position: relative;
    height: 100dvh;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
.zi-2{
    z-index: 2;
}
.intro-page{
    width: 100%;

    background-size: cover;
    background-position-x: -550px;
    height: calc(100dvh - 85px);


}

header{
    background-image: url(../CUPRA-RAVAL-003-oe.webp);
    background-position: center center;
    background-size: cover;
}

header:after{
    content: "";
    width: 100%;
    height: 100%;
    background: -webkit-linear-gradient(top, #00000047 3.03%,#000000 91.82%);
    background: linear-gradient(180deg, #00000047 .03%,#000 91.82%);
    position: absolute;
    z-index: 1;
    top: 0;
}

.dynamicOrange {
    background-image: url(../img/dynamicOrange-xs.svg);
    background-repeat: repeat-y;
    background-size: cover;
    background-position: 0px 0px;
}
@media (min-width: 480px) {
    .dynamicOrange {
        background-image: url(../img/dynamicOrange-s.svg);
    }
}
@media (min-width: 764px) {
    .dynamicOrange {
        background-image: url(../img/dynamicOrange-m.svg);
        background-position-y: -338px;
    }
}

@media (min-width: 1016px) {
    .dynamicOrange {
        background-image: url(../img/dynamicOrange-l.svg);
    }
}
@media (min-width: 1436px) {
    .dynamicOrange {
        background-image: url(../img/dynamicOrange-xl.svg);
        background-position-y: -595px;
    }
}


@media (min-width: 1920px) {
    .dynamicOrange {
        background-image: url(../img/dynamicOrange-xxl.svg);
    }
}





.max-content{
    max-width: 760px;
}

.scroll-down {
    position: absolute;
    right: 55px;
    bottom: 10dvh;
    transform: translate(-35%, -155%) rotate(90deg);
    z-index: 5;
    opacity: .7;
    transition: opacity .25s ease-in-out;

}
.animated{
    animation: bounce 1s ease infinite;
}
@keyframes bounce {
    50% {
        transform: translateX(-10%);
    }
}

.scroll-down:hover {
    color: #ffffff;
    opacity: 1;
    cursor: pointer;
}
.scroll-down span {
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 3px;
    display: inline-block;
    margin-right: 15px;
    opacity: .8;
}

.animated-bounce{
    animation: bounce-down 1s ease infinite;
}
@keyframes bounce-down {
    50% {
        transform: translateY(-10%);
    }
}

.site__logo{
    margin-bottom: 1.5rem;
}

.site__title {
    font-size: clamp(4rem, -2.6429rem + 17.1429vw, 7rem);
    line-height: 125%;
    margin-bottom: 1rem;
    font-family: '__defaultFont_d4507e', Amulya, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-style: normal;
    text-transform: uppercase;
    color: #FFFFFF;
    font-weight: 300;
    @media (width >= 40rem) {

    }

}
.site__title-c {
    font-size: clamp(2.5rem, 1.0714rem + 4.7619vw, 3.75rem);
}
.site__title strong {
    font-weight: 700;
}
.site__pre-title {
    font-family: '__defaultFont_d4507e', Amulya, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: clamp(1.125rem, 0.6964rem + 1.4286vw, 1.5rem);
    font-weight: 300;
    line-height: 1.6;
}

.site__sub-title{
    font-size: clamp(1.125rem, 0.8393rem + 0.9524vw, 1.375rem);
    font-weight: 300;
    width: 100%;
    display: block;
    max-width: 28rem;
}
.site__sub-title-c{
    font-size: clamp(0.875rem, 0.7321rem + 0.4762vw, 1rem);
}

.site__lead{
    font-size: 16px;
    line-height: 145%;
    font-weight: 400;
}

.site__sub{
    font-weight: 400;
    font-size: 1rem;
    line-height: 145%;
    color: #ffffff;
}

.site__sub{
    display: flex;
    flex-flow: row;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: min-content;
    padding: 0;
    position: relative;
    overflow: hidden;
    letter-spacing: 0.15em;
}
.raval-specs-hero{
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.raval-specs-title{
    font-size: clamp(2rem, 0.8571rem + 3.8095vw, 3rem);
    font-weight: 300;
}

.raval-specs-title-min{
    font-size: clamp(1.5rem, 0.3571rem + 3.8095vw, 2.5rem);
    font-weight: 300;
}

.raval-specs-sub{
    font-size: clamp(1rem, 0.4286rem + 1.9048vw, 1.5rem);
    font-weight: 300;
}

img.img-fluid.raval-form-img {
    margin-bottom: -3rem;
    z-index: 2;
    position: relative;
}

.raval-specs-img{
    overflow: hidden;
    object-fit: cover;
    object-position: center;
    border: 16px solid rgba(195, 195, 203, 0.0509804);
    border-radius: 26px;

    @media (width >= 40rem) {
        max-height: 596px;
    }
}


.section-features{
overflow: hidden;
}
.raval-feature{
    color: #ffffff;
}
.raval-feature-title{
    color: #ffffff;
    font-family: '__defaultFont_d4507e', Amulya, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: clamp(1.5rem, 1.2143rem + 0.9524vw, 1.75rem);
    font-weight: 300;
    text-transform: uppercase;
}

.raval-feature-img{
    color: #ffffff;
    border-radius: 20px;
}
.raval-feature-text{
    font-size: clamp(1rem, 0.8571rem + 0.4762vw, 1.125rem);
}

.addon-content{
    @media (width >= 40rem) {
        padding-right: 6rem;
    }
}

.stats {
    display: flex;
    justify-content: space-around;
    align-items: center;
    color: #fff;
    text-align: center;
}

.stat {
    flex: 1;
}

.value {
    font-size: 65px;
    font-weight: 700;
    line-height: normal;
}

.unit {
    font-size: 36px;
    font-weight: 400;
    margin-left: 8px;
}

.label {
    margin: 0;
    font-size: 18px;
    color: #aeaeb7;
}

/* Responsive */
@media (max-width: 768px) {
    .stats {
        flex-direction: column;
        height: auto;
        padding: 20px 0;
    }

    .stat {
        margin: 15px 0;
    }

    .value {
        font-size: 60px;
    }

    .unit {
        font-size: 28px;
    }
}

.min-btn, .min-btn-d {
    min-width: 100%;
}

.btn-main-cta{
    padding: 0.888rem 1.8rem;
    border-radius: 56px;
    font-weight: 600;
}

.btn-main-cta:hover{
    background-color: rgba(249, 250, 251, 0.87);
    border-color: #f9fafb;
}

.event-logo{
    width:100%;
    max-height: 40px;
}
@media (min-width: 768px) {

    .event-logo{
        max-height: 42px;
    }
    .min-btn {
        min-width: 227px;
    }
    .min-btn-d {
        min-width: 180px;
    }
}

.btn-default{
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(2px);
    border-radius: 156px;
    padding-inline: 2rem;
    padding-block: 0.888rem;
    color: #ffffff;
    height: 100%;
    background: linear-gradient(269.95deg, rgba(250, 250, 250, 0.15) 0.01%, rgba(195, 195, 203, 0.05) 84.97%, rgba(195, 195, 203, 0.1) 99.96%), #212429;
    border: 1px solid rgba(250, 250, 250, 0.14902);
}
.btn-default:hover{
    background: rgba(255, 255, 255, 0.2);
    background: linear-gradient(220deg, rgba(250, 250, 250, 0.15) 0.01%, rgba(195, 195, 203, 0.05) 84.97%, rgba(195, 195, 203, 0.1) 99.96%), #212429;

    color: #ffffff;
}



.hero-event-logo{
    max-width: 20rem;
}
.title-mw{
    max-width: 660px;
}
.transition-fade {
    transition: 0.4s;
    /*transform: translateX(0);*/
    opacity: 1;
}

.bg-black  .transition-fade {
    transition: 1s;
    /*transform: translateX(0);*/
    opacity: 1;

}


html.is-animating .transition-fade {
    opacity: 0;
    /*transform: translateY(-50px);*/

}

html.is-animating .bg-black .transition-fade {
   opacity: 0;
   /* animation: 3.5s cubic-bezier(.25, 1, .30, 1) circle-in-center both;*/
animation: 3.5s cubic-bezier(.25, 1, .30, 1) circle-in-hesitate both;

}

@keyframes circle-out-center {
    from {
        clip-path: circle(0%);
    }
    to {
        clip-path: circle(125%);
    }
}

.bg-black .navbar-black{ display: none; visibility: hidden}
.bg-white .navbar-white{ display: none; visibility: hidden}

.btn{ border-radius: 12px;}
.navbar{
 height: 85px;
    z-index: 2;
}
.page-h{
    height: 100dvh;
}
.image-max-width{
 max-width: 565px;
}



/* Form */


.form__content{
    border-radius: 32px;
    border: 0;
    padding: 2.5rem 1.5rem;
    max-width: 48rem;
    background: linear-gradient(179deg, rgba(250, 250, 250, 0.15) 0%, rgba(195, 195, 203, 0.05) 85%, rgba(195, 195, 203, 0.1) 100%);

    @media (width >= 576px) {
        gap: 1.4rem;
        padding: 3rem 2.5rem;
    }
}

.form__content.form__test-drive{
    max-width: 42rem;
}
.form_title{
    font-size: clamp(1.5rem, 1.2143rem + 0.9524vw, 1.75rem);
    line-height: 1;
    font-weight: 300;
    color: #ffffff;
}

.form-control{
    font-weight: 400;
    border:1px solid #AEAEB7;
    border-radius: .35rem;
    background-color: transparent;
    color: #ffffff;
}

.form-floating > label {
    color: #f8f8fa;
}



.form-select {
    padding: 0.375rem 2.25rem 0.375rem 0.75rem;
    border: 1px solid #cccccc;
    border-radius: .35rem;
}

.form-select option:checked {
    color: #000;
}
.form-select option:disabled {
    color: #75787B;
}

span.is-invalid {
    font-size: .875rem;
    line-height: 18px;
    color: hsl(358deg 82.94% 83.39%)
}
.form-check-input.is-invalid ~ .form-check-label{
    color: hsl(358deg 82.94% 83.39%)
}
.was-validated .form-check-input:invalid, .form-check-input.is-invalid{
    border-color: hsl(358deg 82.94% 83.39%)
}

.form-control:focus, .form-select:focus {
    color: #ffffff;
    border-color: rgb(178, 118, 77);
    background-color: transparent;
}

.form-control.is-invalid{
    color: #212529;
    background-color: #fce5e3;
}


.form-floating > input.is-invalid ~ label {
    color: #252525;
}


.form-floating > .form-control:focus, .form-select:focus {
    box-shadow: inset 0 0 0 1px rgb(178, 118, 77);
}

.form-floating > .form-control.is-invalid:focus{
    color: #212529;
    box-shadow: inset 0 0 0 1px  hsl(358deg 82.94% 83.39%)
}
.form-floating > .form-control:focus ~ label, .form-floating > .form-control:not(:placeholder-shown) ~ label, .form-floating > .form-select ~ label {
    opacity: 0.80;
}

.form-floating > .form-control:-webkit-autofill ~ label {
    color: #000;
}

.legal_text{
    font-size: .875rem;
}

.rgpd, .legal_text {
    color: #f7f7f7;
}

/* Day toggle */
.day-toggle {
    position: relative;
}
.day-toggle input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}
.day-toggle__btn {
    display: inline-block;
    padding: 0.7rem 1.6rem;
    border-radius: 156px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: linear-gradient(269.95deg, rgba(250, 250, 250, 0.08) 0.01%, rgba(195, 195, 203, 0.03) 100%), #212429;
    color: #ffffff;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 300;
    transition: border-color 180ms ease, background 180ms ease;
    user-select: none;
    white-space: nowrap;
}
.day-toggle__btn:hover {
    border-color: rgba(255, 255, 255, 0.55);
}
.day-toggle input[type="radio"]:checked + .day-toggle__btn {
    border-color: rgba(255, 255, 255, 0.85);
    background: linear-gradient(269.95deg, rgba(250, 250, 250, 0.18) 0.01%, rgba(195, 195, 203, 0.08) 100%), #212429;
}

/* Expo banner */
.expo-banner {
    display: flex;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    min-height: 155px;


}
.expo-banner__left {
    position: relative;
    flex: 0 0 42%;
    background: #111418;
    overflow: hidden;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.expo-banner__subtitle {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.72);
    margin-top: 0.2rem;
    font-weight: 300;
}
.expo-banner__location {
    font-size: 0.58rem;
    color: rgba(255, 255, 255, 0.42);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-top: 0.1rem;
}
.expo-banner__car {
    width: 100%;
    object-fit: cover;
    object-position: center bottom;
}
.expo-banner__right {
    flex: 1;
    background: #1c1f26;
    padding: 1.4rem 1.75rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: linear-gradient(269.95deg, rgba(250, 250, 250, 0.15) 0.01%, rgba(195, 195, 203, 0.05) 84.97%, rgba(195, 195, 203, 0.1) 99.96%), #15181E;

}
.expo-banner__date {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.75);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
    font-weight: 400;
}
.expo-banner__title {
    font-size: clamp(1rem, 2.2vw, 1.55rem);
    font-weight: 300;
    text-transform: uppercase;
    color: #fff;
    line-height: 1.2;
    margin: 0;
    letter-spacing: -0.01em;
    strong{
        font-weight: 500;
    }
    span{
        white-space: nowrap;
    }
}
.expo-banner__title strong {
    font-weight: 700;
}
@media (max-width: 575.98px) {
    .expo-banner {
        flex-direction: column;
    }
    .expo-banner__left {
        flex: none;
        height: 180px;
    }

    .expo-banner__right {
        padding: 1.25rem;
    }

    .day-toggle__btn {
        display: inline-block;
        padding: 0.7rem 1.45rem;
    }
}


.btn-close {
    box-sizing: content-box;
    width: 1em;
    height: 1em;
    padding: 0.25em 0.25em;
    color: #AEAEB7;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23AEAEB7'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
    border: 0;
    border-radius: 0.25rem;
    opacity: 0.5;
}
.btn-close:hover {
    color: #AEAEB7;
    text-decoration: none;
    opacity: 0.75;
}
.btn-close:focus {
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(250, 250, 250, 0.1);
    opacity: 1;
}

.btn-submit{
    padding-block: 0.888rem;
}

.btn-experience {
    border-radius: 8px;
    color: #15181E;
    background-color: #ffffff;
    border-color: #ffffff;
    text-transform: uppercase;
}
.btn-check:focus + .btn-experience, .btn-experience:focus, .btn-experience:hover {
    color: #15181E;
    background-image: linear-gradient(47deg, rgb(211, 214, 217) 0%, rgb(211, 214, 217) 100%);
    border-color: #ffffff;
}


.form-check-input:focus {
    border-color: #aeaeb7;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(255,255,255, 0.25);
}

.form-check-input:checked {
    color: #aeaeb7;;
    background-color: transparent;
    border-color: #ffffff;
}
.form-check-input {
    width: 1.125em;
    height: 1.125em;
    margin-top: 0.2em;
    border-color: #ffffff;
    background-color: transparent;
}

.alert{
    border-radius: 0.55rem;
    font-size: .9rem;
    font-weight: 500;

}
.alert-success {
    color: #0b3320;
    background-color: #e1f7ed;
    border-color: #badbcc;
}

.alert-danger {
    color: #a1181b;
    background-color: #fff0f0;
    border-color: #fdd8d8;
}

@media (min-width: 992px) {
    .h-lg-100{
        height: 100% !important;
    }
}

@media (min-width: 1200px) {
    h1, .h1 {
        font-size: 2.3rem;
    }
}

.animate__animated.animate__delay-ns {
 -webkit-animation-delay: 250ms;
 animation-delay: 250ms;
}
.animate__animated.animate__delay-1ms {
 -webkit-animation-delay: 100ms;
 animation-delay: 100ms;
}
.animate__animated.animate__delay-2ms {
 -webkit-animation-delay: 200ms;
 animation-delay: 200ms;
}
.animate__animated.animate__delay-3ms {
 -webkit-animation-delay: 300ms;
 animation-delay: 300ms;
}
.animate__animated.animate__delay-4ms {
 -webkit-animation-delay: 400ms;
 animation-delay: 400ms;
}
@keyframes circle-in-center {
 from {
     clip-path: circle(0%);
 }
 to {
     clip-path: circle(125%);
 }
}

@keyframes circle-in-hesitate {
 0% {
     clip-path: circle(0%);
 }
 40% {
     clip-path: circle(40%);
 }
 100% {
     clip-path: circle(125%);
 }
}

@keyframes wipe-out-down {
    from {
        clip-path: inset(0 0 0 0);
    }
    to {
        clip-path: inset(100% 0 0 0);
    }
}



/* Left Side */

.left-side-content{
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    max-width: 516px;
    position: relative;
}
.left-side-content:after{
  content: "";
    display: block;
    position: absolute;
    top: 0;
    right: -3rem;
    background: linear-gradient(180deg, #cccccc 0%, rgba(235, 246, 252, 0) 100%);
    width: 1px;
    height: 100%;
}
.save-the-date-text{
    max-width: 18rem;
    margin: 0 auto;
}

.save-the-date-intro-text{
    width: 100%;
    max-width: 23rem;
}

.event__date{
    background-color: #f1f5f9;
    padding: 1.6rem;
    color: #000000;
    gap:1rem;
    border-radius: 24px;
}
.save-date{

}
.event__day{
    font-weight: 500;
    font-size: 2.6rem;
    line-height: 100%;
    text-align: center;
}

.event__month{
    font-size: .875rem;
    font-weight: 500;
    line-height: 145%;
    letter-spacing: 0.165em;
}

.save-date_title{
    font-size: 18px;
    line-height: 145%;
}
address {
    font-size: 16px;
    display: block;
}
address span {
    font-size: 16px;
}

.col-divider{
    display: block;
    width: 2px;
    height: 6rem;
    background: linear-gradient(180deg, #000000 0%, rgba(235, 246, 252, 0) 100%);
}

/* Models Slide */

.model-slider{
}
.model-slider-title{
    font-size: 1.8rem;
}
.btn-toolbar:hover{
    background-color: #F4F4F3;
}


.splide__slide {
    display: flex;
    align-items: start;
    justify-content: center;
    position: relative;
    padding-bottom: .5rem;
}

.car-block {
    width: 100%;
    background: linear-gradient(#000000 165px, rgba(255, 255, 255, 0) 165px);
    padding: 2rem 0rem 1rem;
    position: relative;
}

.car-block h3 {
    color: white;
    font-size: 2.5rem;
    font-weight: bold;
    letter-spacing: -0.08rem;
}


.slide-car-image{
    width: 100%;
    height: auto;
    position: relative;
    z-index: 2;
}
.slide-car-logo{
    padding-inline-start: 2rem;
    max-height: var(--logo-max-height, 3rem);
    position: relative;
    text-align: left;
    margin-right: auto;
    z-index: 2;
}

.brand-logo-container{
    height: 65px; object-fit: contain; object-position: center;
    display: flex;
    align-items: center;
}


.range__container .car-block {
    background: linear-gradient(#000000 240px, rgba(255, 255, 255, 0) 240px);
}
.range__container  .car-block h3 {
    font-size: 2rem;
}



svg.electric_motor, svg.icon_fuel_motor {
    position: absolute;
    right: 30px;
    width: 30px;
    top: 15px;
    height: 42px;
}
.btn-white-dark-border {
    padding-inline: 2rem;
    background-color: white;
    border-color: #021D49;
    border-width: 2px;
    color: #021D49 !important;
}
.btn-white-dark-border:hover {
    background-color: #021D49;
    border-color: #021D49;
    color: white !important;
}


/* Range */

.range__title{
    font-size: 1.8rem;
    letter-spacing: -0.05em;
    line-height: 1;
    font-weight: 600;
    padding-top: 2rem;
}


/* Step */

.form-section-heading {
    font-size: 1.6rem;
    letter-spacing: -0.05em;
    font-weight: 600;
}
.form-section-subheading {
    font-size: 1.2rem;
    letter-spacing: -0.05em;
    font-weight: 600;
}

.step { display: none; }
.step.active { display: block; }
.step_heading {
    color: #1b1b1b;
    font-size: 18px;
    line-height: 22px;
    font-weight: 600;
}
.step_subheading{
    color: #404040;
}


.driver-details__right-container {

}
.driver-details__image {
    height: auto;
    width: 100%;
    max-width: 22rem;
    position: relative;
}
.driver-details__appointment{
    display: flex;
    flex-direction: column;

}
.driver-details__model{
    font-size: 1.7rem;
    font-weight: bold;
    letter-spacing: -0.09rem;
}
.driver-details__time{
    font-size: 1rem;
    & span{
        font-size: .75rem;
        padding-block: 2px;
        padding-inline: 8px;
        color: #6e3d00;
        background: #fef9c2;
        border-radius: 156px;
        border: 1px solid rgba(202,138,4,.3);
    }
}




.model-container{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    @media (width >= 40rem) {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
.model-option {
    display: flex;
    flex-direction: column;
    gap: .56rem;
}

.model-option:hover {
    border-color: #ccc;
}

.model-option input[type="radio"] {
    display: none;
}

.model-option img {
    width: 140px;
    height: auto;
    object-fit: contain;
}
.model-content {
    border: 1px solid #DDDDDD;
    border-radius: 10px;
    transition: border 250ms ease-in-out;
    cursor: pointer;
    text-align: center;
    padding: 10px;
    max-height: 100px;
    height: 100%;
    display: grid;
    place-content: center;
    overflow:hidden;
}
.model-content:hover {
    border-color: #000000;
}

.model-name {
    font-size: .75rem;
    font-weight: 500;
}
.model-option input[type="radio"]:checked + .model-content {
    border-color: #000000;
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.25);
}

.model-option:has(input[type="radio"]:checked) .model-name {
    color: #000000;
}



.model-option input[type="radio"]:checked + .model-content .model-name {
    color: #000000;
}



.brand-container{
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1.6rem;
    text-align: center;
    @media (width >= 40rem) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
.brand-option {
    display: flex;
    flex-direction: column;
    gap: .56rem;
    text-decoration: none;
}

.brand-option:hover {
    border-color: #ccc;
}


.brand-option img {
    height: auto;
    object-fit: contain;
    @media (width >= 40rem) {
        width: 140px;
    }
}
.brand-content {
    border: 1px solid #DDDDDD;
    border-radius: 24px;
    transition: border 250ms ease-in-out;
    cursor: pointer;
    text-align: center;
    padding: 10px;
    height: 12rem;
    display: grid;
    place-content: center;
}
.brand-content:hover {
    border-color: #000000;
}
.brand-name {
    color: #000;
    font-size: 1rem;
    font-weight: 500;
    text-transform: uppercase;
}


@media (min-width: 768px) {

    .site__logo{
        margin-bottom: 2rem;
    }

    .site__sub {
        justify-content: start;
        font-size: 1.2rem;
    }


    .info__box_container{
        grid-template-columns: repeat(4, minmax(0, 1fr));
        display: flex;
        justify-content: center;
        gap: 2.5rem;

    }

    .hero-event-logo{
        max-width: 615px;
    }


    header:after{
        background-image: linear-gradient(270deg, #0000, #0000001a 100%, #00000026), linear-gradient(90deg, #000000cc 9%, #0000), linear-gradient(#00000066, #00000005 25%);
    }
}

@media (min-width: 992px) {
    .modal-lg, .modal-xl {
        max-width: 740px;
    }
    .intro-page{
        background: transparent;
    }
}
@media (min-width: 1015px) {

}

@media (min-width: 1436px) {

}

.modal-body {
    padding: 26px;

    .form-control {
        border: 1px solid #52575d;
    }
    .form-section-subheading {
        letter-spacing: -0.05em;
    }
}

.modal-content {
    background-color: #15181E;
    border: 1px solid rgba(250, 250, 250, 0.1);
    border-radius: 1rem;
}

.modal-header {
    border-bottom: 1px solid rgb(222 226 230 / 10%);
}


footer {
    border-top: 1px solid rgba(250, 250, 250, 0.1);
    color: #e2e8f0;
}
.footer-buttons svg path{
    fill: rgba(255, 255, 255, 0.7);
}

.container-footer {
    padding: 1rem;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.footer-buttons {
    padding: 0;
    margin-left: auto;
    max-width: 250px;
    margin-top: 0;
    margin-right: 16px;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%
}

.footer-legal {
    padding: 0;
    margin-top: 1rem;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
}

.footer-copyright {
    text-align: center;
    margin-top: 56px;
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    font-weight: 300;
    align-self: center;
    margin-bottom: 20px;
    font-size: .875rem;
}

.footer-copyright {
    padding: 0;
    margin-top: 0;
    margin-left: 0;
}

.footer-legal a {
    font-weight: 300;
    font-size: 14px;
    line-height: 24px;
    color: #242221;
    padding: 0;
    margin: 0;
    text-align: center;
    text-decoration: none;
}
.footer-legal a:hover{
    text-decoration: underline;
}


.footer-legal a:last-child {
    border-right: 0
}

.footer-buttons a {
    margin: 0 16px
}

.footer-buttons a img {
    opacity: .7;
    max-width: 24px;
    max-height: 24px
}

.footer-brands-logos {
    max-height: 10rem;
}

.footer-socials{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    @media (width >= 61rem) {
        gap: 4rem;
        flex-direction: row;
    }
}

.footer-socials-item{
    display: flex;
    justify-content: start;
    align-items: center;
    gap: .5rem;
    font-size: clamp(1rem, 0.7143rem + 0.9524vw, 1.25rem);
    color: #aeaeb7;
    text-decoration: none;

    &:hover{
        color: #ffffff;
        text-decoration: underline;
    }
    svg {
        width: 41px;
        height: 41px;
    }
}

@media (min-width: 576px) {

    .model__sub{
        color: #9B9B9B;
        font-size: 28px;
        line-height: 36px;
    }
    .container-footer .footer-copyright {
        margin-bottom: 0
    }

    .container-footer .footer-legal {
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row;
        width: auto;
        margin-top: 0;
    }

    .container-footer .footer-legal a {
        text-align: left;
        padding: 0 8px
    }

    .container-footer .footer-buttons {
        -webkit-justify-content: flex-end;
        -ms-flex-pack: end;
        justify-content: flex-end;
        width: auto
    }

    .save-the-date-text {
        max-width: 23rem;
        margin: 0;
    }
    .save-date{
        padding: .5rem 0 .5rem 1rem;
    }
    .event__day{
        font-size: 4.6rem;
    }

    .event__month{
        font-size: 1rem;
    }

    .slide-car-image {
        /*max-width: 26rem;*/
    }

    .form__content{
        border-top: 0;
    }

    .range__container .slide-car-image {
        /*max-width: 16rem;*/
    }


}

@media (min-width: 992px) {
    .container-footer {
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row;
        font-size: .875rem;
    }
}

@media (min-width: 1436px) {
    .container-footer {
        max-width: 1340px;
        margin: auto;
        position: relative;
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row
    }

    .container-footer .footer-legal a + a {
        border-right: 1px solid #d5d5d5;
        padding: 0 16px;
        margin-bottom: 0
    }

    .footer-buttons a:last-child {
        margin-right: 0
    }

    .footer-buttons a:first-child {
        margin-left: 0
    }
}