:root{
    --mainBg: #242024;
    --redText: #E30220;
    --whiteText: white;
    --blackText: black;
    --redAccents: #E30220;
    --heroCarName: #6F6F6F;
    --navSelected: 3px #E30220 solid;
    --smallFont: 16px;
    --normFont: 20px;
    --midFont: 32px;
    --bigFont: 40px;
    --cardFont: 48px;
    --vBigFont: 64px;
    --paragraphFont: 24px;
}

::-webkit-scrollbar{
    width: 3px;
}


::-webkit-scrollbar-thumb{
    background-color: var(--redAccents);
}


@font-face {
    font-family: 'Mont';
    src: url(Fonts/Montserrat-VariableFont_wght.ttf);
}

@font-face {
    font-family: 'Bez';
    src: url(Fonts/Bezmiar-Regular.otf);
}

*{
    margin: 0;
    padding: 0;
}

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

html{
    scroll-behavior: smooth;
}


body{
    font-family: 'Mont';
    background: var(--mainBg);
    overflow-x: hidden;
}

.headerContainer{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
}

header{
    padding: 60px 120px;
    display: flex;
    justify-content: space-between;
    position: fixed;
    width: 100%;
    box-sizing: border-box;
    opacity: 0;
    animation: heroFader 500ms ease 4s forwards;
    backdrop-filter: blur(2px);
}

nav{
    color: var(--whiteText);
    font-size: var(--smallFont);
    font-weight: 700;
    display: flex;
    gap: 20px;
}

nav a{
    color: var(--whiteText);
    text-decoration: none;
    padding: 10px;
    mix-blend-mode: difference;
}

nav a:hover{
    border-bottom: 3px #e3022046 solid;
}

#brgrBtn{
    display: none;
}

@keyframes heroFlicker {
    0%{
        opacity: 0;
    }

    32.9999%{
        opacity: 0;
    }

    33%{
        opacity: 1;
    }

    65.9999%{
        opacity: 0;
    }

    66%{
        opacity: 0;
    }

    99.9999%{
        opacity: 1;
    }

    100%{
        opacity: 1;
    }
}

@keyframes heroFader {
    from{
        opacity: 0;
    }

    to{
        opacity: 1;
    }
}

@keyframes btnSpin {
    from{
        transform: rotate(0deg);
    }

    to{
        transform: rotate(360deg);
    }
}

model-viewer::part(default-progress-bar){
    display: none;
}

.navSelected{
    border-bottom: var(--navSelected);
    mix-blend-mode: difference;
}

#hero{
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 99;
}

.topBg{
    width: 100vw;
    height: 50vh;
    background: linear-gradient(0deg, #FFF 0%, #242024 96.44%);
    position: absolute;
    top: 0;
    z-index: 99;
}

.bottomBg{
    width: 100vw;
    height: 50vh;
    background: radial-gradient(108.41% 108.41% at 50% 0%, #FFF 48.65%, #242024 91.83%);
    position: absolute;
    bottom: 0;
    z-index: 99;
}

.circles{
    position: absolute;
    height: 100vh;
    top: 0;
    overflow: hidden;
    z-index: 90;
    width: 100%;
    z-index: 99;
}

.outer, .inner1, .inner2{
    position: absolute;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
}

.outer{
    animation: heroFlicker 200ms linear forwards;
}

.inner1{
    animation: heroFlicker 200ms linear 50ms forwards;
}

.inner2{
    animation: heroFlicker 200ms linear 100ms forwards;
}

.lines{
    animation: heroFlicker 200ms linear 150ms forwards;
}

.lines{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.heroContent{
    position: relative;
    z-index: 99;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 120px;
    box-sizing: border-box;
}

.carTitle{
    animation: heroFader 500ms ease 1s forwards;
    opacity: 0;
    margin-bottom: 250px;
}


.carStats{
    display: flex;
    justify-content: space-between;
    font-size: var(--bigFont);
    font-weight: 700;
    color: var(--redText);
}

#carName{
    font-family: 'Bez';
    font-size: 120px;
    color: var(--heroCarName);
    line-height: 75px;
    text-align: center;
}

.heroCar{
    width: 100%;
    position: absolute;
    left: 50%;
    top: 35%;
    transform: translate(-50%, -35%);
    opacity: 0;
    animation: heroFader 1s linear 500ms  forwards;
}

#heroCar3d{
    width: 100%;
    height: 1000px;
}

.discoverBtn{
    font-size: var(--normFont);
    font-weight: 700;
    color: var(--redText);
    display: flex;
    align-items: center;
    cursor: pointer;
    position: absolute;
    bottom: 60px;
    left: 120px;
    z-index: 99;
    text-decoration: none;
}

.btnArrow{
    position: relative;
    padding: 23px;
    margin-left: -15px;
}

.btnBg{
    position: absolute;
    left: 0;
    top: 0;
    animation: btnSpin 8s linear  infinite forwards;
    animation-play-state: paused;
}

.discoverBtn:hover .btnBg{
    animation-play-state: running;
}

.heroSocials{
    display: flex;
    flex-direction: column;
    gap: 30px;
    position: absolute;
    right: 60px;
}

#about{
    padding: 60px 120px;
    background-color: var(--mainBg);
    position: relative;
    z-index: 80;
}

.secTitle{
    font-size: var(--bigFont);
    font-family: 'Bez';
    color: var(--redText);
    display: flex;
    align-items: center;
    gap: 20px;
}

.secTitle2{
    font-size: var(--bigFont);
    font-family: 'Bez';
    color: var(--whiteText);
    display: flex;
    align-items: center;
    gap: 20px;
}

.titleLine{
    height: 3px;
    background-color: var(--redAccents);
    width: 100%;
    box-sizing: border-box;
}

.titleLineMobile{
    height: 3px;
    background-color: var(--redAccents);
    width: 100%;
    box-sizing: border-box;
    display: none;
}

.titleLineMobile2{
    height: 3px;
    background-color: var(--whiteText);
    width: 100%;
    box-sizing: border-box;
    display: none;
}

.titleLine2{
    height: 3px;
    background-color: var(--whiteText);
    width: 100%;
    box-sizing: border-box;
}

.aboutContent{
    display: flex;
    justify-content: space-between;
    max-width: 1920px;
    margin: 100px auto 0 auto;
}

#aboutP{
    width: 45%;
    font-size: var(--paragraphFont);
    color: var(--whiteText);
    font-weight: 300;
}

.aboutStats{
    display: flex;
    gap: 100px;
    align-items: center;
    width: 45%;
}

.stat{
    width: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.statNum{
    font-size: var(--vBigFont);
    font-weight: 700;
    color: var(--redText);
}

.statText{
    font-size: 36px;
    font-weight: 700;
    color: var(--whiteText);
}

.aboutTagline{
    font-size: 36px;
    font-weight: 700;
    color: var(--redAccents);
    text-align: center;
    margin-top: 100px;
}




#super{
    padding: 60px 120px;
    background: url(Images/superBg.png);
    height: 916px;
    box-sizing: border-box;
    background-position: center;
    position: relative;
    z-index: 80;
}

#luxury{
    padding: 60px 120px;
    background: url(Images/luxBg.png);
    height: 916px;
    box-sizing: border-box;
    background-position: center;
    position: relative;
    z-index: 80;
}

#muscle{
    padding: 60px 120px;
    background: url(Images/muscleBg.png);
    height: 916px;
    box-sizing: border-box;
    background-position: center;
    position: relative;
    z-index: 80;
}

.introP{
    font-size: var(--midFont);
    color: var(--whiteText);
    font-weight: 200;
    text-align: center;
    margin-top: 48px;
}

.introContent{
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;
    height: 95%;
}

.introBtn1, .introBtn2{
    padding: 10px 75px;
    font-size: var(--midFont);
    font-weight: 600;
    color: var(--whiteText);
    background-color: var(--redAccents);
    border-radius: 20px;
    text-decoration: none;
    text-transform: uppercase;
}

.introBtn1:hover, .introBtn2:hover{
    background-color: var(--whiteText);
    color: var(--redText);
}

#superCars, #luxuryCars, #muscleCars{
    height: 100vh;
    position: relative;
    box-sizing: border-box;
}

#sCarSlider, #sCarSlider2, #sCarSlider3{
    display: flex;
    height: 100%;
    width: fit-content;
    transition: all 500ms ease;
}

.superCarsBg{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    height: 100vh;
    pointer-events: none;
}

#scBg1{
    position: absolute;
    right: 0;
    top: 0;
    height: 100vh;
    width: 70vw;
    z-index: 0;
    transition: all 300ms ease;
}

#scBg2{
    position: absolute;
    left: 0;
    top: 50px;
    width: 60%;
    transition: all 300ms ease;
}

#carText1, #carText2, #carText3, #carText4, #carText5, #carText6, #carText7, #carText8, #carText9{
    transform: translateY(200px);
    transition: all 300ms ease;
}

#sCarStats1, #sCarStats2, #sCarStats3, #sCarStats4, #sCarStats5, #sCarStats6, #sCarStats7, #sCarStats8, #sCarStats9{
    margin-top: 53px;
    display: flex;
    gap: 100px;
    opacity: 0;
    transition: all 300ms ease;
}

#porsche, #i8, #amg, #bentley, #range, #rolls, #charger, #mustang, #camaro{
    display: flex;
    align-items: center;
    height: 100%;
    box-sizing: border-box;
    position: relative;
    z-index: 10;
    padding: 60px 120px;
    width: 100vw;
}

#porsche3d, #i83d, #amg3d, #bentely3d, #range3d, #rolls3d, #charger3d, #mustang3d, #camaro3d{
    height: 100%;
    width: 100%;
    cursor: pointer;
}



.sCarName{
    font-family: 'Bez';
    font-size: var(--cardFont);
    color: var(--whiteText);
}

.model{
    font-family: 'Mont';
    font-size: var(--bigFont);
    color: var(--redText);
    font-weight: 700;
}

.sCarModel{
    width: 60%;
    height: 100%;
    position: absolute;
    right: 0;
}





.engineStat{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 128px;
}

.statIcon{
    padding: 30px;
    background-color: var(--redAccents);
    border-radius: 90px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    
}

.statName{
    margin-top: 10px;
    font-size: var(--normFont);
    color: var(--redText);
    font-weight: 700;
}

.statNum2{
    margin-top: 20px;
    font-size: var(--bigFont);
    font-weight: 700;
    color: var(--whiteText);
    text-wrap: nowrap;
}

.metric{
    font-size: 10px;
    margin-left: -10px;
}

.sCarsSliderButtons{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 50px;
    box-sizing: border-box;
}

#leftBtn, #rightBtn{
    width: 70px;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--whiteText);
    border-radius: 90px;
    position: relative;
    z-index: 9999;
    cursor: pointer;
    border: none;
}

#leftBtnLux, #rightBtnLux{
    width: 70px;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--whiteText);
    border-radius: 90px;
    position: relative;
    z-index: 9999;
    cursor: pointer;
    border: none;
}

#leftBtnMuscle, #rightBtnMuscle{
    width: 70px;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--whiteText);
    border-radius: 90px;
    position: relative;
    z-index: 9999;
    cursor: pointer;
    border: none;
}

#luxBg{
    background: linear-gradient(270deg, #E30220 0%, rgba(227, 2, 32, 0.00) 100%);
    width: 100%;
    height: 100%;
}

 footer {
            background-color: #000;
            color: #fff;
            padding: 60px 80px;
        }

        .footerContainer {
            display: flex;
            justify-content: space-between;
            max-width: 1400px;
            margin: 0 auto;
        }

        .footerSocials{
         display: flex;
         gap: 30px;
         margin-bottom: 30px;
        }

        .footerSocials img{
            filter: invert(1);
            cursor: pointer;
        }

        .footerLogo{
            margin-bottom: 30px;
        }

        .footerColumn {
            flex: 1;
        }

        .footerColumn p{
            font-size: 14px;
            font-weight: 600;
            letter-spacing: 3px;
            text-transform: uppercase;
            margin-bottom: 25px;
            color: #fff;
        }

        .footerColumn ul {
            list-style: none;
        }

        .footerColumn ul li {
            margin-bottom: 15px;
        }

        .footerColumn ul li a {
            color: #ff0033;
            text-decoration: none;
            font-size: 16px;
            font-weight: 500;
            transition: all opacity 200ms;
        }

        .footerColumn ul li a:hover {
            opacity: 0.7;
        }

        .socialIcons {
            display: flex;
            gap: 20px;
            margin-bottom: 30px;
        }

        .socialIcons a {
            color: #fff;
            font-size: 24px;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px solid #333;
            border-radius: 4px;
            transition: all opacity 200ms;
        }

        .socialIcons a:hover {
            opacity: 0.7;
        }

        .logoPlaceholder {
            width: 150px;
            height: 40px;
            background-color: transparent;
            margin-bottom: 25px;
            border: 2px dashed #333;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            color: #666;
        }

        .phoneNumber {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 32px;
            font-weight: 700;
            color: #ff0033;
            margin-bottom: 20px;
        }

        .address {
            color: #999;
            font-size: 14px;
            line-height: 1.8;
        }



/* ////////////////////////////////////////////////////////////////// */
/* ////////////////////////////////////////////////////////////////// */
/* ///////////////////////PRODUCTS PAGE////////////////////////////// */
/* ////////////////////////////////////////////////////////////////// */
/* ////////////////////////////////////////////////////////////////// */


#carAbout{
    padding: 60px 120px;
    background-color: var(--mainBg);
    position: relative;
    z-index: 80;
}  

#productImg{
    width: 100%;
}

#specImg{
    width: 100%;
}

#carSpecs{
    padding: 60px 120px;
    
}

.specsContent{
    display: flex;
    margin-top: 114px;
    align-items: center;
    gap: 50px;
}

.specsLeft{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 98px;
}

.sMenu{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.menuDiv{
    position: relative;
}

.menuDiv:hover #specPower, .menuDiv:hover #specPerformance, .menuDiv:hover #specBody, .menuDiv:hover #specCapacity, .menuDiv:hover #specEmission, .menuDiv:hover #specSound{
    top: 40px;
    display: block;
    opacity: 1;
    position: static;
}

.menuBtn{
    padding-bottom: 20px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px white solid;
}

.menuName{
    font-size: var(--midFont);
    color: var(--whiteText);
    font-weight: 700;
}

#specPower, #specPerformance, #specBody, #specCapacity, #specEmission, #specSound{
    padding: 20px 0;
    font-size: var(--paragraphFont);
    color: var(--whiteText);
    font-weight: 400;
    position: absolute;
    top: 0;
    opacity: 0;
    transition: all 200ms ease;
}

.viewBtn{
    padding: 27px 75px;
    background-color: var(--redAccents);
    border-radius: 30px;
    font-size: var(--midFont);
    color: var(--whiteText);
    font-weight: 600;
    transition: all 200ms ease;
    text-decoration: none;
    width: fit-content;
}

.viewBtn:hover{
    background-color: var(--whiteText);
    color: var(--redText);
}

.specImg{
    height: 977px;
    
}

.specsDimensions{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: fit-content;
    gap: 135px;
    box-sizing: border-box;
}

.dimSpec{
    width: 100%;
    text-align: center;
}

.dimName{
    font-size: var(--paragraphFont);
    color: var(--whiteText);
    font-weight: 700;
    
}

#width, #height, #wheelbase, #carlength{
    font-size: var(--bigFont);
    color: var(--whiteText);
    font-weight: 700;
    text-wrap: nowrap;
}

#engineView{
    padding: 60px 120px;
}

#engine3d{
    width: 100%;
    height: 90vh;
}

#view3d{
    padding: 60px 120px;
}

.view3dModel{
    width: 100%;
    height: 100%;
    border-radius: 50px;
    background: #D9D9D9;
    position: relative;
    height: 856px;
}

.view3dTitle{
    font-size: 264px;
    font-weight: 800;
    color: var(--heroCarName);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-wrap: nowrap;
}

#view3dCar{
    width: 100%;
    height: 100%;
}

#feedback{
    padding: 60px 120px;
    display: flex;
    flex-direction: column;
}

form{
    margin-top: 60px;
}

.feedbackSection {
            background-color: #2a2a2a;
            padding: 60px 80px;
            max-width: 1400px;
            margin: 0 auto;
        }

        .feedbackTitle {
            font-size: 48px;
            font-weight: 700;
            color: #cc0000;
            text-transform: uppercase;
            letter-spacing: 8px;
            margin-bottom: 10px;
        }

        .redLine {
            width: 100%;
            height: 2px;
            background-color: #cc0000;
            margin-bottom: 60px;
        }

        .formGrid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
            margin-bottom: 40px;
        }

        .formGroup {
            display: flex;
            flex-direction: column;
        }

        .formGroup label {
            font-size: 28px;
            font-weight: 700;
            color: #fff;
            margin-bottom: 15px;
        }

        .formGroup input,
        .formGroup textarea {
            padding: 20px;
            border: 3px solid #cc0000;
            border-radius: 15px;
            background-color: #f5f5f5;
            font-size: 16px;
            font-family: Arial, sans-serif;
            outline: none;
            transition: background-color 0.3s;
        }

        .formGroup input:focus,
        .formGroup textarea:focus {
            background-color: #fff;
        }

        .messageGroup {
            grid-column: 2;
            grid-row: 1 / 4;
        }

        .messageGroup textarea {
            height: 100%;
            resize: none;
            min-height: 200px;
        }

        .submitButton {
            display: block;
            margin: 40px auto 0;
            padding: 18px 80px;
            background-color: #cc0000;
            color: #fff;
            font-size: 24px;
            font-weight: 700;
            text-transform: uppercase;
            border: none;
            border-radius: 50px;
            cursor: pointer;
            transition: opacity 0.3s;
        }


/* //////////////////////// Media queiries //////////////////////// */




@media screen and (max-width: 590px) {
    header{
        padding: 20px;
    }

    nav{
        display: none;
    }

    #brgrBtn{
        display: block;
    }

    .heroContent{
        padding: 20px;
    }

    .carName{
        font-size: 30px;
    }

    .heroSocials{
        display: none;
    }

    #about{
        padding: 20px;
    }

    .secTitle{
        font-size: var(--normFont);
    }

    .titleLineMobile{
        display: block;
    }

    .aboutContent{
        flex-direction: column;
    }

    #aboutP{
        width: 100%;
        font-size: var(--smallFont);
        text-align: center;
        
    }

    .aboutStats{
        flex-direction: column;
        width: 100%;
        margin-top: 20px;
    }

    #super, #luxury, #muscle{
        padding: 20px;
    }

    .titleLineMobile2{
        display: block;
    }

    .secTitle2{
        font-size: var(--normFont);
    }

    .introP{
        font-size: var(--midFont);
    }

    .sCarsSliderButtons{
        padding: 20px;
    }

    #porsche, #i8, #amg, #bentley, #range, #rolls, #charger, #mustang, #camaro{
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    box-sizing: border-box;
    position: relative;
    z-index: 10;
    padding: 20px;
    width: 100vw;
}

.sCarModel{
    width: 100%;
    top: 200px;
    padding: 20px;
    box-sizing: border-box;
}

.sCarName{
    font-size: var(--paragraphFont);
}

#carText1, #carText2, #carText3, #carText4, #carText5, #carText6, #carText7, #carText8, #carText9{
    transform: translateY(200px);
    transition: all 300ms ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex-direction: column;
}

#sCarStats1, #sCarStats2, #sCarStats3, #sCarStats4, #sCarStats5, #sCarStats6, #sCarStats7, #sCarStats8, #sCarStats9{
    margin-top: 53px;
    display: flex;
    opacity: 0;
    transition: all 300ms ease;
    width: 100%;
    gap: 0;
    justify-content: space-between;
}

.engineStat{
    width: 79px;
}

.statName{
    font-size: var(--smallFont);
}

.statNum2{
    font-size: var(--paragraphFont);
}

.statIcon{
    width: 52.685px;
    height: 52.685px;
    padding: 20px;
}

footer{
    padding: 20px;
}

.footerContainer{
    flex-direction: column;
    align-items: center;
    gap: 50px;
}

.footerSocials{
    justify-content: space-around;
}

.footerColumn{
    text-align: center;
}

.specsContent{
    flex-direction: column;
}

#engineView{
    padding: 20px;
}

#engine3d{
    height: 500px;
}

#view3d{
    padding: 20px;
}

.view3dTitle{
    font-size: 86px;
}

.formGrid{
    display: flex;
    flex-direction: column;
}
}



@media screen and (min-width: 591px) and (max-width: 1300px) {
    header{
        padding: 20px;
    }

    nav{
        display: none;
    }

    #brgrBtn{
        display: block;
    }

    .heroContent{
        padding: 20px;
    }

    .carName{
        font-size: 48px;
        text-wrap: nowrap;
    }

    .heroSocials{
        display: none;
    }

    #about{
        padding: 20px;
    }

    .secTitle{
        font-size: var(--normFont);
    }

    .titleLineMobile{
        display: block;
    }

    .aboutContent{
        flex-direction: column;
    }

    #aboutP{
        width: 100%;
        font-size: var(--smallFont);
        text-align: center;
        
    }

    .aboutStats{
        flex-direction: column;
        width: 100%;
        margin-top: 20px;
    }
    
    #super, #luxury, #muscle{
        padding: 60px 20px;
    }

    .secTitle2{
        font-size: var(--normFont);
    }

    .titleLineMobile2{
        display: block;
    }

    #porsche, #i8, #amg, #bentley, #range, #rolls, #charger, #mustang, #camaro{
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    box-sizing: border-box;
    position: relative;
    z-index: 10;
    padding: 20px;
    width: 100vw;
}

.sCarModel{
    width: 100%;
    top: 200px;
    padding: 20px;
    box-sizing: border-box;
}

.sCarName{
    font-size: var(--paragraphFont);
}

#carText1, #carText2, #carText3, #carText4, #carText5, #carText6, #carText7, #carText8, #carText9{
    transform: translateY(200px);
    transition: all 300ms ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex-direction: column;
}

#sCarStats1, #sCarStats2, #sCarStats3, #sCarStats4, #sCarStats5, #sCarStats6, #sCarStats7, #sCarStats8, #sCarStats9{
    margin-top: 53px;
    display: flex;
    opacity: 0;
    transition: all 300ms ease;
    width: 100%;
    gap: 0;
    justify-content: space-between;
    padding: 0 70px;
    box-sizing: border-box;
}

.engineStat{
    width: 79px;
}

.statName{
    font-size: var(--smallFont);
}

.statNum2{
    font-size: var(--paragraphFont);
}

.statIcon{
    width: 52.685px;
    height: 52.685px;
    padding: 20px;
}

footer{
    padding: 20px;
}

.footerContainer{
    flex-direction: column;
    align-items: center;
    gap: 50px;
}

.footerSocials{
    justify-content: space-around;
}

.footerColumn{
    text-align: center;
    
}

#carSpecs{
    padding: 20px;
}

.specsContent{
    flex-direction: column;
}

#engineView{
    padding: 20px;
}

.view3dTitle{
    font-size: 164px;
}

.formGrid{
    display: flex;
    flex-direction: column;
}
}