:root{
    --mainbg: #0B0B09;
    --mainText: #FFFFFF;
    --grey:#D0C1D7;
    --gradient1:linear-gradient(93deg, #F4A235 -0.94%, #CD3030 62.65%, #39293F 97.76%), linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%);
    --gradient2:radial-gradient(51.4% 51.7% at 48.6% 44.38%, rgba(244, 162, 53, 0.86) 0%, rgba(205, 48, 48, 0.86) 72.22%, rgba(57, 41, 63, 0.86) 100%);
    --glow:0 2px 10.2px 0 rgba(205, 48, 48, 0.36);
    --bg2: #171612;
    --accent:#E77D33;
}
*{
    margin: 0;
    padding: 0;
    color: var(--mainaccent);
    font-family: Syne;
    /* text-align: center; */

}
header{
    display: flex;
    width: 100%;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.20);
    backdrop-filter: blur(30px);
    position: fixed;
    margin: 0 auto;
    top: 0;
    z-index: 999999999;
    opacity: 0;
    animation: splashAnim 1000ms ease-in-out 1s forwards;
}
body{
    background: var(--mainbg);
    color: var(--mainText);
    overflow-x: hidden;
    position: relative;
}
.header_container .button2{
    justify-self: flex-end;
}
.hero_graphic3{
    width: 859.455px;
    height: 123.9px;
    transform: rotate(9deg);
    padding-bottom: 40px;
    z-index: -1;
    position: absolute;
    bottom: 0px;
    right: 40px;
    border-radius: 50%;
    background: radial-gradient(51.4% 51.7% at 48.6% 44.38%, rgba(239, 161, 71, 0.80) 0%, rgba(205, 48, 48, 0.80) 73.08%, rgba(57, 41, 63, 0.80) 100%);
    filter: blur(38px);
    opacity: 0;
    animation: splashAnim 2s ease-in-out 2.2s forwards;
}
.header_container{
    display: flex;
    padding: 12px 92px;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    max-width: 1840px;
}
.header_container .logo{
    width: 246px;
    display: flex;
}
.header_container .logo img{
    width: 70px;
    height: auto;
}
ul{
    list-style: none;
}
nav ul{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    width: 358px;

}
nav ul li{
    font-size: 20px;
    font-weight: 300;
    height: 45px;
    display: flex;
    align-items: center;
    text-transform: capitalize;
}
nav ul li a{
    transition: all 200ms ease;
}
nav ul li a:hover{
    padding-bottom: 5px;
    opacity: 0.5;
}
a{
    color: inherit;
    text-decoration: none;
}
h1{
    text-align: center;
    color: linear-gradient(180deg, #D0C1D7 65.45%, #0B0B09 104.49%);;
    font-size: 96px;
    font-weight: 800;
    line-height: 93%;
    background: linear-gradient(180deg, #D0C1D7 65.45%, #0B0B09 104.49%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.text_gradient{
    color: linear-gradient(90deg, #D0C1D7 65.45%, #0B0B09 104.49%);;
    background: linear-gradient(90deg, #D0C1D7 65.45%, #0B0B09 104.49%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.h1_2{
    font-weight: 718;
}
.h1_3{
    font-size: 64px;
}
h2{
    font-size: 40px;
    font-weight: 800;
}
.h2_2{
color: var(--accent);
font-size: 48px;
font-weight: 700;
/* line-height: 60%; */
letter-spacing: -1.44px;
margin-bottom: 12px;
padding-bottom: 2px;
border-bottom: 3px solid var(--accent);
width: fit-content;
}
h3{
    font-size: 32px;
}
h4{
    font-size: 24px;
}
h5{
    font-size: 20px;
}
h6{
    font-size: 16px;
}
.flex_column{
    display: flex;
    flex-direction: column;
}
.text_uppercase{
    text-transform: uppercase;
    letter-spacing: 1px;
}
.text_grey{
    color: var(--grey)
}
.text_regular{
    font-weight: 400;
}
section{
    margin: 0 auto;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 120px;
}
.container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 1700px;
}
.hero1{
    padding-top: 100px;
    /* opacity: 0; */
}

.gradient_cont{
    border: none;
    outline: none;
    border-radius: 22px;
}
.hero_graphic1{
    position: absolute;
    width: 161px;
    height: 110px;
    background: radial-gradient(51.4% 51.7% at 48.6% 44.38%, #F4A235 0%, #CD3030 72.22%, #39293F 100%);
    filter: blur(100px);
    left: -54px;
    top: 100px;
    z-index: 3;
    opacity: 0;
    animation: splashAnim 800ms ease-in-out 2.2s forwards;

}
.hero_graphic2{
    width: 646px;
    height: 440px;
    border-radius: 646px;
    background: radial-gradient(51.4% 51.7% at 48.6% 44.38%, rgba(244, 162, 53, 0.82) 0%, rgba(205, 48, 48, 0.82) 33.65%, rgba(57, 41, 63, 0.82) 100%);
    filter: blur(150px);
    right: -250px;
    top: -200px;
    opacity: 0;
    position: absolute;
    animation: splashAnim 800ms ease-in-out 2.2s forwards;

}
.hero1_modelContainer{
    height: 321px;
    width: 1000px;
    overflow: visible;
    position: relative;
}
.hero1model {
    position: absolute;
    top: -120px; 
    left: -130px;
    height: 521px;
    width: 1080px;
    filter: blur(2px);
    transform: translateX(-100vw) translateY(-150px);   
    animation: hero1Anim 1.4s cubic-bezier(0.22, 1, 0.36, 1) 2.8s both;
    will-change: transform, filter;
}

@keyframes hero1Anim {
    from {
        filter: blur(6px);
        transform: translateX(-100vw) translateY(-150px);
    }
    to {
        filter: blur(0);
        transform: translateX(0) translateY(0);
    }
}

model-viewer {
    margin: 0 auto;
    transition-duration: 1000ms;
}
model-viewer::part(default-progress-bar) {
    display: none;
}
.hero_splash_container {
    width: 120vw;
    height: 1012px;
    position: absolute;
    top: -500px;
    left: -10vw;
    z-index: 99999999999999999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: splashAnim2 1200ms ease-in-out 2s forwards;
}

.hero_splash {
    width: 100%;
    height: 100%;
    position: absolute;
    background: radial-gradient(51.4% 51.7% at 48.6% 44.38%, #F4A235 0%, #CD3030 71.15%, #39293F 100%);
    filter: blur(75px);
    border-radius: 50%;
    z-index: 1;
    top: 0;
    left: 0;
    animation: splashAnim 1200ms ease-in-out forwards;
}
.splash_logo {
    position: relative;
    z-index: 2;
    top: 180px;
    opacity: 0;
    animation: splashAnim 800ms ease-in-out 1s forwards;
}

.splash_logo img {
    width: 336px;
}
@keyframes splashAnim{
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}
@keyframes splashAnim2{
    from{
        opacity: 1;
        transform: translateY(0);
    }
    to{
        opacity: 0;
        transform: translateY(-100vh);
    }
}
.button1{
    display: flex;
    padding: 11px 65px;
    justify-content: center;
    align-items: center;
    border-radius: 24px;
    background: linear-gradient(90deg, #0B0B09 -48.58%, #484846 -45.35%, #0B0B09 -5.48%);
    box-shadow: var(--glow);
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 0.96px;
    text-transform: uppercase;
    cursor: pointer;
    border: none;
    color: white;
    text-wrap: nowrap;
    position: relative;
    z-index: 11;
    overflow: hidden;
}
.button1::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(120% 75% at 44% 50%, #0B0B09 54.64%, #FF4C1A 80%, #0B0B09 100%);
    opacity: 0;
    transition: opacity 300ms ease-in-out;
    border-radius: 24px;
    z-index: -1;
}
.button1:hover{
    gap: 10px;
    box-shadow: 0 2px 22px 0 rgba(205, 48, 48, 0.56);
}
.button1:hover::before {
    opacity: 1;
}
.button2.active { 
  border: 1px solid transparent;
}

.button1.active {
  gap: 10px;
  box-shadow: 0 2px 22px 0 rgba(205, 48, 48, 0.56);
}

.button1.active::before {
  opacity: 1;
}


.button1 img{
    width: 0px;
    height: auto;
    transition: all 200ms ease-in-out;
}
.button1:hover img{
    width: 24px;
    height: auto;
}
.heroCard{
    display: flex;
    width: 300px;
    padding: 12px 22px;
    box-sizing: border-box;
    flex-direction: column;
    gap: 8px;
    border-radius: 22px;
    background: linear-gradient(45deg, #17161200 70%, #CD3030 200%);
    box-shadow: 1px 1px 1px 0 rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(20px);
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 9;
}
.button1_size4{
    padding: 6px 12px;
}
.button1_size4:hover {
    padding: 6px 16px;
    height: fit-content;
}
.button1_size4 img{
    height: 12px;
    width: 12px;
    transform: scaleX(1);
    transform: scaleY(1);
}
.button1_size4:hover img {
    width: 12px;
    height: 12px;
}
.heroCard .gradient_wrapper{
    align-self: flex-end;
    
}
.hero1Text{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
position: relative;
    opacity: 0;
    animation: splashAnim 1000ms ease-in-out 3s forwards;
}
.text_left{
     text-align: left;
}
.team_logo{
    height: 25px;
    width: auto;
}
.heroCard .team_logo{
    height: 16px;
    width: auto;
    align-self: flex-start;
}
.smallBtn{
    border-radius: 31px;
    border: 0.5px solid #D0C1D7;
    background: var(--mainbg, #0B0B09);
    border-radius: 31px;
    border: 0.5px solid #D0C1D7;
    background: var(--mainbg, #0B0B09);
}
button {
    border: none;
}
.gradient_wrapper {
    width: fit-content;
    padding: 1px;
    border-radius: 26px;
    background: var(--gradient1);
    z-index: 10;
}


.hero1 .flex_column{
    align-items: center;
    justify-content: center;
        width: 100%;
}
.button1_size2{
    padding: 10px 22px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    max-height: 38px;
}
header .buttonsCont{
    display: flex;
align-items: center;
gap: 22px;
}
.button2{
    border: 1px solid var(--mainText);
    transition: all 200ms ease-in-out;
}
.button2:hover{
    border: 1px solid transparent;
}
.btn2_wrap{
   background: none;
   transition: all 200ms ease-in-out;
}
.btn2_wrap:hover{
   background: var(--gradient1);
}
.carousel-wrapper {
    overflow: hidden;
    position: relative;
    max-width: 1700px;
    margin-top: 22px;
}
.carousel {
    display: flex;
    padding: 34px 0;
    align-items: center;
    gap: 42px;
    width: fit-content;
}
.carousel img{
    height: 25px;
    width: auto;
}
.mainTextbox{
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 40px;
    width: fit-content;
    text-transform: capitalize;
}
.alignCenter{
    align-items: center;
    justify-content:center;
}
.gradientext{
    background: linear-gradient(270deg, #0B0B09 -16.76%, #D0C1D7 50.9%, #0B0B09 118.56%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.mainTextbox span{ 
    width: 100%;
    height: 4px;
    border-radius: 50%;
    background: radial-gradient(51.4% 51.7% at 48.6% 44.38%, rgba(244, 162, 53, 0.86) 0%, rgba(205, 48, 48, 0.86) 72.22%, rgba(57, 41, 63, 0.86) 100%);
}
.padded_container{
    padding: 0 80px;
    box-sizing: border-box;
}
.padded_container2{
    padding: 100px 80px;
    box-sizing: border-box;
}
.landingsec2Flex{
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 24px;
    align-self: stretch;
        flex-wrap: wrap;
}
.text_bold{
    font-weight: 700;
}
.text_center{
    text-align: center;
    justify-content: center;
}
.card1{
    border-radius: 24px;
    background: var(--bg2, #171612);
    box-shadow: var(--glow);
    display: flex;
    padding: 30px 32px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}
.card2_wrapper{
    min-width: 360px;
    max-width: 360px;
}
.landingsec2Flex .card1{
    min-height: 340px
}
.card1 img{
    width: 94px;
    height: 94px;
    margin-bottom: 15px;
}
p{
    font-size: 18px;
    font-weight: 400;
}
.landingsec3Flex{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 72px;
    flex-direction: row;
}
.sec3CarCont{
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
}
.sec3Car{
    background-image: url(public/images/sec3car.png);
    width: 25%;
    aspect-ratio: 262/725;
    min-width: 273px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.sec3Car img{
    width: 100%;
    mix-blend-mode: lighten;
}
.fade_in{
    opacity: 0;
     animation: fade-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
.scale_in{
    opacity: 0;
    transform: scaleX(0);
     animation: scale-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
.move_focus{
    position: relative;
    transform: translateY(100px);
    animation: move-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
@keyframes move-focus-in{
  0% {
    transform: translateY(100px);
    opacity: 0;
  }
  80% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(0);
            filter: blur(0px);
    opacity: 1;
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes scale-in {
  0% {
    opacity: 0;
    transform: scaleX(0);
  }
  100% {
    opacity: 1;
    transform: scaleX(1);
  }
}

.button1_size3{
    padding: 8px 33px;
}
.button1_size2:hover{
    gap: 10px;
    box-shadow: 0 2px 16px 0 rgba(205, 48, 48, 0.3);
}
.car_neonContainer {
    position: relative;
    width: 70%;
    min-height: 215px;
}
.car_neonContainer img {
    width: 100%;
    height: auto;
    position: relative;
    z-index: 2;
    mix-blend-mode: color-dodge;
    pointer-events: none;
}
.car_neonView {
    position: absolute;
    inset: 0;
    display: flex;
    flex-wrap: wrap;
    z-index: 1;
}
.neonCell {
    width: 20%;
    height: 20%;
    pointer-events: auto;
}
.neonCell span {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 77px;
    background: radial-gradient( 51.4% 51.7% at 48.6% 44.38%,#F4A235 0%,#CD3030 72.22%, #39293F 100%);
    filter: blur(16px);
    opacity: 0;
    transform: scale(0.9);
    transition:
        opacity 200ms ease,
        filter 200ms ease,
        transform 200ms ease;
}
.neonCell:hover span {
    opacity: 1;
    filter: blur(20px);
    transform: scale(1.1);
}
.sec3_car3{
    align-self: flex-end;
}
.subtitleParagraph{
    gap: 12px;
    margin-bottom: 22px;
}
.road_flex{
    display: flex;
    flex-direction: column;
    position: relative;
    max-height: 400px;
}
.road-path, .road-path2 {
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke-dashoffset 0.1s linear;
  width: 100%;
}
.road-path .roadPath1{
    width: 100%;
}
.road-path2 .roadPath2{
    width: 100%;
}
.roadCenter{
    width: 100%;
    position: absolute;
    top: 15%;
    left: 0;
    z-index: 3;
}
.card2_wrapper{
width: 30%;
}
.card2{
    display: flex;
    padding: 22px;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    flex-direction: column;
    border-radius: 24px;
    gap: 10px;
    border: 1px solid transparent;
    background: linear-gradient(229deg, rgba(244, 162, 53, 0.00) -12.8%, rgba(205, 48, 48, 0.00) 19.52%, rgba(57, 41, 63, 0.00) 53.35%), var(--bg2, #171612);
    box-shadow: var(--glow);
}
.filterTitle{
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
}
.filtersFlex{
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    justify-content: space-between;
    max-width: 387px;
}
.filtersFlex div{
    display: flex;
    max-width: 90px;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    position: relative;
}
.filtersFlex div img{
    height: 94px;
    width: auto;
    transition: all 300ms ease-in-out;
}
.filtersFlex div .speed{
    mix-blend-mode:lighten;
}
.filtersFlex div .neonCell{
    width: 100%;
    height: 90px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}
.filtersFlex div:hover .neonCell span{
    opacity: 1;
}
.filtersFlex div:hover  img{
        transform: scale(1.05) rotate(3deg);
}
.carCardsCont{
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    margin: 42px;
    display: flex;
    justify-content: end;
    padding: 0;
    position: relative;
}
.carCardsFade{
    height: 100%;
    width: 10%;
    background: linear-gradient(270deg, rgba(11, 11, 9, 0.00) 0%, #0B0B09 81.73%);
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 99;
}
.carCardsFlex{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap; 
    margin-bottom: 22px;
    position: relative;
    left: 1100px;
}
.carCardImg{
    height: 250px;
    width: auto;
    transition: all 200ms ease-in-out;
}
.carCardLogo{
    height: 19px;
    width: auto;
    align-self: start;
}
.card2::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    border-radius: 24px;
    z-index: 1;
    opacity: 0;
    background: linear-gradient(229deg, #F4A235 -12.8%, rgba(205, 48, 48, 0.50) 19.52%, rgba(57, 41, 63, 0.00) 53.35%), #171612;
    transition: all 200ms ease-in;
}
.card2:hover::before{
    opacity: 1;
}
.card2 .gradient_wrapper{
    align-self: flex-end;
}
.card2:hover .carCardImg{
    scale: 1.1;
}
.cardCardImgCont{
    max-width: 100%;
    overflow: visible;
    z-index: 2
}
.carCardContent{
    display: flex;
    width: 100%;
    flex-direction: column;
    position: relative;
    z-index: 2;
}
.carPodium1{
    background-image: url(public/images/carpodium.png);
    width: 100%;
    height: 291px;
    padding: 20px 0;
    display: flex;
    align-items: flex-start;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 2;
}
.carPodium1 model-viewer{
    width: 100%;
    height: 90%;
    position: relative;
    bottom: 5%;
}
.carSpecifics{
    position: relative;
    width: 100%;
    z-index: 1;
    top: -50px;
    padding: 32px 28px;
    background: linear-gradient(-45deg, #17161200 70%, #CD3030 200%);
    box-sizing: border-box;
    flex-direction: column;
    border-radius: 22px;
    box-shadow: 1px 1px 1px 0 rgba(255, 255, 255, 0.25);
}
.statsBlock1{
    display: flex;
    flex-direction: column;
    gap: 13px;
    width: 50%;
}
.statsBlock1 span{
    width: 100%;
    height: 1px;
    background: var(--gradient1);
}
.statsBlock1 div{
    display: flex;
    align-items: center;
}
.statsBlock1 .icon{
    width: 24px;
    height: auto;
    margin-right: 8px;
}
.statsBlock1 h5{
    margin-right: 10px;
    text-wrap: nowrap;
}
.statsFlex1{
    display: flex;
    margin-top: 12px;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
}
.statsFlex2{
    flex-direction: row;
    width: calc(50% - 12px );
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    display: flex;
}
.carSpecifics .btn2_wrap{
    position: absolute;
    top: 22px;
    right: 22px;
}
.text_black{
    font-weight: 800;
    line-height: 93%;
}
.text_black2{
    font-weight: 760;
}
.progress{
    border-radius: 10px;
background: #D0C1D7;
display: flex;
height: 5px;
display: flex;
align-items: flex-start;
gap: 10px;
align-self: stretch;
}
.progress div{
    border-radius: 10px;
    height: 100%;
    width: 90%;
    background: var(--gradient1);
    box-shadow: var(--glow);
}
.progressFlex{
    width: calc(50% - 12px );
    gap: 10px;
}
.progressFlex .content{
    display: flex;
    justify-content: space-between;
    width: 100%;
}
.progressFlex  h4 .kph{
    font-size: 14px;
    font-weight: 600;
    background: none;
    text-wrap: nowrap;
}
.section6Flex{
    display: flex;
    align-items: center;
    align-content: center;
    gap: 32px;
    align-self: stretch;
    flex-wrap: wrap;
}
.sec6Card1Wrapper{
    width: 100%;
    overflow: hidden;
}
.sec6Card1{
    width: 100%;
    display: flex;
    padding: 62px 41px;
    flex-direction: column;
    align-items: flex-start;
    border: 1px solid transparent;
    box-sizing: border-box;
    position: relative;
    gap: 8px;
    overflow: hidden;
     height: -webkit-fill-available;;
    
}
.sec6Card1 h1{
    color: var(--accent);
    font-size: 96px;
    font-weight: 700;
    letter-spacing: -2.88px;
    background-clip: none;
    background: none;
    margin-bottom: 6px;
    -webkit-text-fill-color: var(--accent);
}
.sec6Card1 img{
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: auto;
    mix-blend-mode: lighten;
    max-width: 50%;
    object-fit: fill;
    object-fit: cover;
    object-position: left;
}
.sec6Card1 p{
    max-width: 500px;
}
.sec6Card2Wrapper{
    width: calc(50% - 19px);
     height: -webkit-fill-available;;
}
.sec6Card2 .img1{
    mix-blend-mode: normal;
    height: 70%;
    right: -100px;
    top: -50px;
}
.sec6Card2 .img2{
    height: 70%;
    right: -63px;
    top: -66px;
}
.sec7Card1{
    display: flex;
    width: 769px;
    min-width: 341px;
    padding: 62px 34px 62px 193px;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    left: -5%;
    border: 1px solid var(--accent);
    background: rgba(23, 22, 18, 0.01);
    width: 100%;
    max-width: 769px;
    box-sizing: border-box;
    border-radius: 0 58px 58px 0;
    gap: 12px;
    margin-bottom: 40px;
}
.hiddenOverflow{
    overflow: hidden;
    width: 100%;
    max-width: 1800px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.sec7Card2{
    align-self: flex-end;
    padding: 62px 258px 62px 41px;
    border-radius: 58px 0 0 58px;
    left: unset;
    right: -5%;
}
.sec7{
    background-image: url(public/images/sec7bg.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 110%;
    background-attachment: fixed;
    padding-top: 80px;
    padding-bottom: 180px;
    padding-left: 0;
    padding-right: 0;
    position: relative;
}
.sec7_overlay{
    background: linear-gradient(120deg, rgba(11, 11, 9, 0) -11.47%, #0B0B09 109.33%);
    width: 100%;
    height: 101%;
    left: -100%;
    top: -1px;
    position: absolute;
    filter: blur(10px);
}
.sec7Separator{
    background: linear-gradient(0deg, rgba(11, 11, 9, 0.00) 0%, #0B0B09 81.73%);
    z-index: 999;
    position: absolute;
    width: 100%;
    height: 80px;
    filter: blur(0);
    top: -1px;
    left: 0;
    display: block;
    content: '';
}
.sec7Separator2{
    top: unset;
    bottom: -1px;
    background: linear-gradient(180deg, rgba(11, 11, 9, 0.00) 0%, #0B0B09 81.73%);
}
.move_inLeft{
    animation: move-inLeft 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
@keyframes move-inLeft{
  0% {
    left: -100%;
    opacity: 0;
  }
  80% {
    left: -50%;
    opacity: 1;
  }
  100% {
    left: 0;
    opacity: 1;
  }
}

footer{
    width: 100%;
    background: linear-gradient(180deg, rgba(11, 11, 9, 0.00) 0%, #0B0B09 20%);
    z-index: 999;
    height: 100vh;
    max-height: 500px;
    display: flex;
    flex-direction: column;
    position: relative;
    align-items: center;
    justify-content: center;
}
.footer_container{
    display: flex;
    margin-bottom: 60px;
    margin-left: auto;
    margin-right: auto;
    justify-content: space-between;
    align-items: flex-start;
    gap: 80px;
    overflow: hidden;

    flex-direction: row;
}

.footer_left{
    gap: 24px;
    max-width: 600px;
}
.footer_logo{
    width: 120px;
    height: auto;
    margin-bottom: 12px;
}
.footer_title{
    font-size: 40px;
    font-weight: 800;
    margin-bottom: 12px;
}
.footer_title span{
    background: linear-gradient(270deg, #D0C1D7 0%, #FFFFFF 50%, #D0C1D7 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.footer_right{
    display: flex;
    flex-direction: column;
    gap: 44px;
    min-width: 40%;
}    
.footer_section{
    gap: 12px;
}
.footer_section_title{
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 8px;
}
.footer_links{
    display: flex;
    flex-direction: column;
    gap: 16px;
    list-style: none;
}

.footer_links li a{
    font-size: 16px;
    font-weight: 400;
    color: var(--grey);
    text-decoration: none;
    transition: all 200ms ease;
}

.footer_links li a:hover{
    color: var(--mainText);
    padding-left: 8px;
}

.social_links{
    display: flex;
    gap: 16px;
}
.social_icon{
    width: 34px;
    height: 34px;
    bottom: 0;
    cursor: pointer;
    transition: all 300ms ease;
    position: relative;
    transition: all 200ms ease-in;
}
.social_icon:hover{
    box-shadow: var(--glow);
    bottom: 5px;
}
 .footer_bottom{
    width: 100%;
    position: relative;
    text-align: center;
    box-sizing: border-box;
    padding-top: 22px;
    gap: 22px;
    padding-bottom: 48px;
    margin: 0 auto;
}
.footer_copyright{
    font-size: 14px;
    font-weight: 400;
    color: var(--grey);
}
.footer_title span{
    font-weight: 400;
}
.footer_bottom span{
    display: block;
    width: 100%;
    height: 1px;
    background: var(--gradient1);
    box-sizing: border-box;
    overflow: hidden;
}
.footer_decor1{
    width: 262px;
    height: 145px;
    position: absolute;
    left: -158px;
    top: 23px;
    border-radius: 50%;
    opacity: 0.36;
    background: radial-gradient(78.59% 51.7% at 48.6% 44.38%, #F4A235 0%, #CD3030 71.63%);
    mix-blend-mode: plus-lighter;
    filter: blur(50px);
}
.footer_decor2{
    width: 262px;
    height: 145px;
    position: absolute;
    right: 89px;
    bottom: -27px;
    left: unset;
    top: unset;
    filter: blur(100px);
}

@keyframes move-focus-in{
  0% {
    transform: translateY(100px);
    filter: blur(12px);
    opacity: 0;
  }
  80% {
    transform: translateY(0);
            filter: blur(0px);
    opacity: 1;
  }
  100% {
    transform: translateY(0);
            filter: blur(0px);
    opacity: 1;
  }
}
.move_focus{
    position: relative;
    transform: translateY(100px);
    animation: move-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
/* width */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-track {
  background:var(--mainbg);
  box-shadow: var(--glow);
}

/* Handle */
::-webkit-scrollbar-thumb {
  background:var(--gradient1);
  border-radius: 0;

}

#carsSection{
    position: relative;
    overflow: hidden;
}
.productHeroModel{
    width: 100%;
    height: 460px;
    bottom: 100px;
}
.hero2_modelContainer{
    animation: none;
    filter: blur(0);
    width: 100%;
}
.hero2_modelContainer model-viewer{
animation: hero2Anim 1.4s cubic-bezier(0.22, 1, 0.36, 1) 2.8s both;
    will-change: transform, filter;
}

@keyframes hero2Anim {
    from {
        filter: blur(6px);
        transform: scale(0.2);
        opacity: 0;
    }
    to {
        opacity: 1;
        filter: blur(0);
        transform: scale(1);

    }
}

.hero_graphic4{
    width: 120%;
    height: 220px;
    transform: rotate(0deg);
    padding-bottom: 0px;
    z-index: -1;
    position: absolute;
    bottom: 0px;
    left: -10%;
    border-radius: 0%;
    background:none;
    filter: none;
    opacity: 0;
    animation: splashAnim 2s ease-in-out 2.2s forwards;
}
.hero_graphic5{
    width: 71px;
    height: 400px;
    background: linear-gradient(0deg, #f4a13576 -0.94%, #cd303068 62.65%, #39293f72 97.76%), linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%);
    filter: blur(29px);
    right: calc(50% - 40px);
    top: 0;
    opacity: 0;
    position: absolute;
    animation: splashAnim3 800ms ease-in-out 2.2s forwards;
}
@keyframes splashAnim3{
    from{
        opacity: 0;
        transform: scaleY(0)
    }
    to{
        opacity: 1;
        transform: scaleY(1);
    }
}
.podium2{
    background-image: url(public/images/podium3.png);
    position: relative;
}
.podium2_flash{
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: 0;
    left: 0;
    opacity: 1;
    object-fit: contain;
  animation: fadeOnOff 5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes fadeOnOff {
  0%   { opacity: 0; }
  15%  { opacity: 1; }
  50%  { opacity: 1; }
  75%  { opacity: 0; }
  100% { opacity: 0; }
}

.fade-on-off {
  animation: fadeOnOff 6s ease-in-out infinite;
}
.btnsFlex{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
}
.btnsFlex .button2{
    text-transform: capitalize;
    width: 163px;
}
.engineContainer{
    width: 100%;
    height: 500px;
    position: relative;
    background: none;
}
.engineContainer model-viewer{
    height: 100%;
}
.engineContainer .neonCell {
    width: 50%;
    height: 70%;
    left: 25%;
    top: 60px;
    position: absolute;
    z-index: -1;
}
.engineContainer .neonCell span{
   opacity: 0.7;
   border-radius: 50%;
   filter: blur(100px);
}
.engBtn{
    position: relative;
    bottom: 100px;
}
#neonSpan {
  opacity: 0.7;
  border-radius: 50%;
  filter: blur(100px);
  transition: all 0.5s ease-in-out;
}

#neonSpan.active {
  opacity: 1;
  filter: blur(200px);
}
.newsletter_section {
    margin-bottom: 180px;
    position: relative;
}

.newsletter_card {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
}

.newsletter_content {
    padding: 62px 80px !important;
    align-items: center;
    text-align: center;
    min-height: auto !important;
    border-radius: 24px;
    background: var(--bg2, #171612);
    box-shadow: var(--glow);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.newsletter_content h2 {
    margin-bottom: 16px;
    font-size: 48px;
}

.newsletter_subtitle {
    margin-bottom: 42px;
    font-size: 20px;
}

.newsletter_form {
    display: flex;
    gap: 22px;
    width: 100%;
    max-width: 700px;
    align-items: center;
    justify-content: center;
}

.newsletter_input {
    flex: 1;
    padding: 16px 28px;
    border-radius: 12px;
    border: 1px solid var(--grey);
    background: transparent;
    color: var(--mainText);
    font-size: 16px;
    font-family: Syne;
    transition: all 200ms ease;
}

.newsletter_input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--glow);
}

.newsletter_input::placeholder {
    color: var(--grey);
    opacity: 0.6;
}
.logosflex{
    display: flex;
    gap: 14px;
    align-items: center;
    justify-content: center;
}
.logosflex h4{
    color: var(--grey);
    padding-bottom: 3px;
    border-bottom: 2px solid var(--grey);
    position: relative;
    bottom: 3px;
}
.productsSec2Left{
    width: calc(60% - 73px);
}
.productsSec2Left .mainTextbox{
    max-width: 401px;
}
.productsSec2Right{
    width: calc(40% - 73px);
    height: 380px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.productsSec2Right img{
    width: 100%;
    position: absolute;
    height: auto;
    top: 30%;
    animation: fadeOnOff 5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.productsSec2Right model-viewer {
    width: 100%;
    height: 400px;
    min-width: 540px;
    top: -40px;
}
.slider_wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin-top: 42px;
    position: relative;
    overflow: hidden;
    margin-bottom: 120px;
}
.slider_main {
    width: 100%;
    height: 600px;
    position: relative;
    border-radius: 0;
    overflow: hidden;
}

.slider_main_img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 600ms ease-in-out;
    pointer-events: none;
}

.slider_main_img.active {
    opacity: 1;
    pointer-events: auto;
}

.slider_nav {
    display: flex;
    justify-content: center;
    gap: 24px;
    width: 100%;
    flex-wrap: wrap;
}

.slider_thumb_wrapper {
    cursor: pointer;
    transition: transform 300ms ease;
    box-sizing: border-box;
}


.slider_thumb_border {
    padding: 0px;
    border-radius: 0px;
    transition: all 300ms ease;
    background: transparent;
    opacity: 0.5;

}

.slider_thumb_wrapper.active .slider_thumb_border {
    padding: 3px;
    background: var(--gradient1);
    opacity: 1;
}

.slider_thumb {
    width: 280px;
    height: 180px;
    border-radius: 0px;
    overflow: hidden;
    background: var(--bg2);
    position: relative;
}

.slider_thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 300ms ease;
}

.slider_thumb_wrapper:hover .slider_thumb img {
    transform: scale(1.05);
}
.slider_wrapper .carCardsFade{
    width: 18%;
    pointer-events: none;
}
.carCardsFade2{
    left: unset;
    right: 0;
    transform: scaleX(-1);
}
.engAudioCont{
    position: absolute;
    z-index: 999;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    display: flex;
}
.engAudio{
    width: 48px;
    height: 48px;
    padding: 22px;
}
.engAudio img{
    width: 24px;
    height: 24px;
}
.prodSpecsifics{
    top: 0;
    margin-bottom: 44px;
}
.prodSpecsifics .team_logo,
.prodSpecsifics .text_left{
    opacity: 0;
}
.backBtn{
    bottom: 0;
}
.backBtn img{
    transform: scale(-1);
}
.backCont{
    width: 246px;
}
.header_container2 .logo{
    width: fit-content;
    display: block;
}
.statsBlock1 h4{
    justify-self: end;
}
.animatedCar{
    height: 140%;
    width: auto;
    position: absolute;
    right: 0;
    top: -20%;
    z-index: 3;
    animation: carAnim 1.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes carAnim {
    from {
        filter: blur(6px);
        transform: translateX(-40vw);
    }
    to {
        filter: blur(0);
        transform: translateX(100vw);
    }
}
.scroll_animate2{
    view-timeline: --scroll-tl;
    animation-timeline: --scroll-tl;
    animation-delay: cover 10%;
    animation-range: cover 10% cover 35%;
}
.scroll_animate{
    view-timeline: --scroll-tl;
    animation-timeline: --scroll-tl;
    animation-delay: cover 10%;
    animation-range: cover 10% cover 15%;
}
.scroll_animate3{
    view-timeline: --scroll-tl;
    animation-timeline: --scroll-tl;
    animation-delay: cover 20%;
    animation-range: cover 20% cover 90%;
}