/*=====================================================
    IMPERIAL HERO MOTORS F.Z.E.
    Premium Luxury Landing Page
======================================================*/

/*==============================
ROOT VARIABLES
==============================*/

:root{

    --bg:#050505;
    --bg-soft:#101010;

    --card:#171717;
    --card-light:#1c1c1c;

    --gold:#C8A24A;
    --gold-light:#D6B05B;
    --gold-dark:#8F6D25;

    --white:#FFFFFF;
    --grey:#B8B8B8;

    --border:rgba(255,255,255,.08);

    --radius:22px;

    --transition:.45s cubic-bezier(.4,0,.2,1);

    --shadow:
        0 25px 70px rgba(0,0,0,.55);

    --container:1280px;

}

/*==============================
RESET
==============================*/

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    background:var(--bg);

    color:var(--white);

    font-family:'Inter',sans-serif;

    line-height:1.7;

    overflow-x:hidden;

}

img{

    display:block;

    max-width:100%;

}

a{

    color:inherit;

    text-decoration:none;

}

ul{

    list-style:none;

}

section{

    padding:150px 0;

}

.container{

    width:min(92%,var(--container));

    margin:auto;

}

/*==============================
TYPOGRAPHY
==============================*/

h1,
h2,
h3{

    font-family:'Playfair Display',serif;

    font-weight:600;

}

h1{

    font-size:clamp(4.2rem,8.2vw,7.6rem);

    line-height:1;

    letter-spacing:-1px;

}

.hero-content h1{

    font-size:clamp(3.4rem,6vw,5.6rem);

}

h2{

    font-size:clamp(2.8rem,5vw,4.5rem);

    line-height:1.05;

}

h3{

    font-size:1.55rem;

}

p{

    color:var(--grey);

}

.section-tag{

    color:var(--gold);

    letter-spacing:5px;

    text-transform:uppercase;

    font-size:.8rem;

}

.center{

    text-align:center;

}

/*==============================
BUTTONS
==============================*/

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    padding:18px 42px;

    border-radius:999px;

    transition:var(--transition);

    cursor:pointer;

    font-weight:500;

}

.btn img{

    width:17px;

    transition:.35s;

}

.btn:hover img{

    transform:translateX(5px);

}

.btn-gold{

    background:linear-gradient(

        135deg,

        #D6B767,

        #C8A24A,

        #A57C2C

    );

    color:#111;

}

.btn-gold:hover{

    transform:translateY(-5px);

    box-shadow:

        0 18px 40px

        rgba(200,162,74,.35);

}

.btn-outline{

    border:1px solid

    rgba(255,255,255,.18);

}

.btn-outline:hover{

    border-color:var(--gold);

    color:var(--gold);

    transform:translateY(-5px);

}

.text-link{

    display:flex;

    align-items:center;

    gap:10px;

    color:var(--gold);

    transition:.35s;

}

.text-link img{

    width:15px;

}

.text-link:hover{

    letter-spacing:.5px;

}

/*==============================
INTRO LOADER
==============================*/

#intro-loader{

    position:fixed;

    inset:0;

    width:100%;

    height:100vh;

    height:100dvh;

    z-index:999999;

    background:#050505;

    overflow:hidden;

    transition:opacity .7s ease;

}

#intro-loader.intro-hide{

    opacity:0;

    pointer-events:none;

}

body.intro-active{

    overflow:hidden;

    height:100%;
}

html.intro-active{

    overflow:hidden;

    height:100%;
}

.intro-video{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    pointer-events:none;

}

.intro-video-mobile{

    display:none;

}

@media(max-width:768px){

    .intro-video-desktop{

        display:none;

    }

    .intro-video-mobile{

        display:block;

    }

}

.intro-video::-webkit-media-controls,

.intro-video::-webkit-media-controls-start-playback-button,

.intro-video::-webkit-media-controls-panel,

.intro-video::-webkit-media-controls-play-button,

.intro-video::-webkit-media-controls-overlay-play-button{

    display:none !important;

    -webkit-appearance:none;

    opacity:0 !important;

    pointer-events:none !important;

}

/*==============================
NAVBAR
==============================*/

header{

    position:fixed;

    width:100%;

    top:0;

    left:0;

    z-index:999;

    background:var(--bg);

    border-bottom:1px solid rgba(255,255,255,.05);

    transition:.4s;

}

header.scrolled{

    background:rgba(5,5,5,.92);

    backdrop-filter:blur(20px);

}

.nav-container{

    display:flex;

    align-items:center;

    justify-content:space-between;

    height:86px;

}

.logo img{

    width:216px;

}

.nav-links{

    display:flex;

    gap:42px;

}

.nav-links a{

    position:relative;

    transition:.35s;

    text-transform:uppercase;

    letter-spacing:1.5px;

    font-size:.82rem;

    font-weight:500;

}

.nav-links a:hover,
.nav-links a.active{

    color:var(--gold);

}

.nav-links a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:1px;

    background:var(--gold);

    transition:.35s;

}

.nav-links a:hover::after{

    width:100%;

}

/*==============================
MENU BUTTON
==============================*/

#menu-toggle{

    display:none;

    background:none;

    border:none;

    cursor:pointer;

}

#menu-toggle img{

    width:34px;

    transition:.35s;

}

#menu-toggle:hover img{

    transform:scale(1.08);

}

/*==============================
MOBILE MENU
==============================*/

#mobile-menu{

    position:fixed;

    right:-100%;

    top:95px;

    width:300px;

    height:calc(100vh - 95px);

    background:var(--bg-soft);

    display:flex;

    flex-direction:column;

    gap:24px;

    padding:45px;

    transition:.45s;

    z-index:998;

}

#mobile-menu.active{

    right:0;

}

.mobile-menu-top{

    display:flex;

    justify-content:center;

    margin-bottom:20px;

}

.mobile-menu-top img{

    width:95px;

}

.mobile-btn{

    margin-top:10px;

}

/*==============================
HERO
==============================*/

#hero{

    position:relative;

    height:100vh;

    display:flex;

    align-items:center;

    overflow:hidden;

}

#hero video{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    pointer-events:none;

}

#hero video::-webkit-media-controls,

#hero video::-webkit-media-controls-start-playback-button,

#hero video::-webkit-media-controls-panel,

#hero video::-webkit-media-controls-play-button,

#hero video::-webkit-media-controls-overlay-play-button{

    display:none !important;

    -webkit-appearance:none;

    opacity:0 !important;

    pointer-events:none !important;

}

.overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(

        90deg,

        rgba(5,5,5,.78) 0%,

        rgba(5,5,5,.52) 45%,

        rgba(5,5,5,.34) 100%

    );

}

.hero-content{

    position:relative;

    z-index:2;

    max-width:680px;

    margin:0;

}

.hero-content h1{

    margin:18px 0;

}

.hero-content h1 span{

    color:var(--gold);

}

.hero-content p{

    max-width:600px;

    margin-bottom:42px;

    font-size:1.05rem;

}

.hero-buttons{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

}
/*=========================================
        SCROLL INDICATOR
=========================================*/

.scroll-indicator{

    position:absolute;

    left:50%;

    bottom:38px;

    transform:translateX(-50%);

    z-index:5;

}

.scroll-indicator span{

    display:block;

    width:2px;

    height:70px;

    background:rgba(255,255,255,.18);

    position:relative;

    overflow:hidden;

}

.scroll-indicator span::before{

    content:"";

    position:absolute;

    width:100%;

    height:24px;

    background:linear-gradient(

        var(--gold),

        #f5d88a

    );

    animation:scrollDown 2.2s infinite;

}

@keyframes scrollDown{

    0%{

        top:-30px;

    }

    100%{

        top:100%;

    }

}

/*=========================================
            BRANDS
=========================================*/

#brands{

    padding:80px 0;

    border-top:1px solid rgba(200,162,74,.15);

    border-bottom:1px solid rgba(200,162,74,.15);

    background:var(--bg-soft);

}

.brand-row{

    margin-top:50px;

    display:grid;

    grid-template-columns:repeat(8,1fr);

    align-items:center;

    justify-items:center;

    gap:40px;

}

.brand-row img{

    width:auto;

    height:94px;

    object-fit:contain;

    opacity:.7;

    filter:grayscale(100%) brightness(.95);

    transition:var(--transition);

}

.brand-row img:hover{

    opacity:1;

    filter:

        brightness(1.15)

        sepia(1)

        saturate(6)

        hue-rotate(-6deg);

    transform:

        scale(1.08)

        translateY(-4px);

}

/*=========================================
        SECTION HEADER
=========================================*/

.section-header{

    display:flex;

    justify-content:space-between;

    align-items:flex-end;

    gap:30px;

    margin-bottom:70px;

}

.section-header.center{

    flex-direction:column;

    align-items:center;

}

/*=========================================
        FEATURED INVENTORY
=========================================*/

#inventory{

    background:var(--bg);

}

.inventory-layout{

    display:flex;

    align-items:flex-start;

    gap:56px;

}

.inventory-layout .section-header{

    flex:0 0 260px;

    flex-direction:column;

    align-items:flex-start;

    margin-bottom:0;

    position:relative;

}

.inventory-layout .section-header h2{

    font-size:clamp(2rem,3vw,2.8rem);

}

.inventory-header-actions{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    gap:26px;

    margin-top:26px;

}

.inventory-controls{

    display:flex;

    gap:12px;

}

.carousel-btn{

    width:48px;

    height:48px;

    border-radius:50%;

    border:1px solid rgba(255,255,255,.18);

    background:none;

    display:flex;

    align-items:center;

    justify-content:center;

    transition:var(--transition);

}

.carousel-btn img{

    width:16px;

    filter:invert(1);

}

.carousel-btn:hover{

    border-color:var(--gold);

    background:var(--gold);

}

.carousel-btn:hover img{

    filter:invert(0) brightness(0);

}

.inventory-grid{

    flex:1;

    min-width:0;

    display:grid;

    grid-auto-flow:column;

    grid-auto-columns:calc((100% - 56px) / 3);

    gap:28px;

    overflow-x:auto;

    scroll-snap-type:x mandatory;

    scrollbar-width:none;

}

.inventory-grid::-webkit-scrollbar{

    display:none;

}

.inventory-grid .car-card{

    scroll-snap-align:start;

}

.car-card{

    background:linear-gradient(

        180deg,

        var(--card),

        var(--bg-soft)

    );

    border-radius:22px;

    overflow:hidden;

    border:1px solid rgba(255,255,255,.05);

    transition:var(--transition);

    box-shadow:

        0 20px 50px rgba(0,0,0,.45);

}

.car-card:hover{

    transform:

        translateY(-14px);

    box-shadow:

        0 35px 80px rgba(0,0,0,.65);

    border-color:

        rgba(200,162,74,.18);

}

.car-card .image{

    display:block;

    height:210px;

    overflow:hidden;

    background:var(--bg-soft);

}

.car-card .image img.img-error{

    opacity:0;

}

.car-card .image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:1.1s;

}

.car-card:hover .image img{

    transform:scale(1.08);

}

/*=========================================
        CARD CONTENT
=========================================*/

.card-content{

    padding:34px;

}

.brand-badge{

    width:72px;

    height:36px;

    object-fit:contain;

    margin-bottom:22px;

    opacity:.9;

}

.card-content h3{

    margin-bottom:14px;

}

.card-content p{

    margin-bottom:24px;

    color:#a9a9a9;

}

.card-content a{

    display:inline-flex;

    align-items:center;

    gap:10px;

    color:var(--gold);

    font-weight:500;

    transition:.35s;

}

.card-content a img{

    width:15px;

    height:auto;

    transition:.35s;

}

.card-content a:hover{

    letter-spacing:.4px;

}

.card-content a:hover img{

    transform:translateX(6px);

}

/*=========================================
        EXPORT
=========================================*/

#export{

    background:var(--bg-soft);

}

.export-grid{

    display:grid;

    grid-template-columns:.8fr 1.35fr;

    gap:70px;

    align-items:center;

}

.export-content p{

    max-width:420px;

    margin:

        28px 0

        42px;

}

.export-image{

    overflow:hidden;

    border-radius:24px;

    border:1px solid rgba(255,255,255,.06);

    box-shadow:

        0 35px 80px rgba(0,0,0,.55);

}

.export-image img{

    transition:1.2s;

}

.export-image:hover img{

    transform:scale(1.04);

}
/*=========================================
        WHY CHOOSE IMPERIAL
=========================================*/

#about{

    background:var(--bg);

}

.features-grid{

    display:grid;

    grid-template-columns:repeat(5,1fr);

    gap:0;

    margin-top:60px;

    padding:54px 0;

    border-top:1px solid var(--border);

    border-bottom:1px solid var(--border);

}

.feature-card{

    background:none;

    border:none;

    border-radius:0;

    padding:0 26px;

    text-align:center;

    transition:var(--transition);

    position:relative;

}

.feature-card::after{

    content:"";

    position:absolute;

    top:6px;

    bottom:6px;

    right:0;

    width:1px;

    background:var(--border);

}

.feature-card:last-child::after{

    display:none;

}

.feature-card:hover h3{

    color:var(--gold);

}

.feature-icon{

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:22px;

}

.feature-icon img{

    width:64px;

    height:64px;

    object-fit:contain;

    transition:.45s;

}

.feature-card:hover .feature-icon img{

    transform:

        scale(1.1)

        translateY(-3px);

}

.feature-card h3{

    margin-bottom:14px;

    font-size:1.15rem;

    transition:var(--transition);

}

.feature-card p{

    font-size:.9rem;

    color:#AFAFAF;

}

/*=========================================
            FOOTER
=========================================*/

footer{

    background:var(--bg);

    border-top:1px solid rgba(255,255,255,.05);

}

.footer-grid{

    display:grid;

    grid-template-columns:

    1.2fr

    .9fr

    1.1fr

    1fr;

    gap:50px;

    padding:70px 0 40px;

}

.footer-logo{

    width:180px;

    margin-bottom:22px;

}

.footer-column p{

    color:#A8A8A8;

}

.footer-column h4{

    margin-bottom:22px;

    font-size:1.3rem;

}

.footer-column ul{

    display:flex;

    flex-direction:column;

    gap:16px;

}

.footer-column ul a{

    color:#BDBDBD;

    transition:.35s;

}

.footer-column ul a:hover{

    color:var(--gold);

    padding-left:6px;

}

/*=========================================
        CONTACT LIST
=========================================*/

.contact-list{

    display:flex;

    flex-direction:column;

    gap:22px;

}

.contact-list li{

    display:flex;

    align-items:flex-start;

    gap:16px;

}

.contact-list img{

    width:30px;

    flex-shrink:0;

    margin-top:3px;

    transition:.35s;

}

.contact-list li:hover img{

    transform:scale(1.12);

}

.contact-list span{

    color:#BDBDBD;

    line-height:1.7;

}

/*=========================================
            SOCIALS
=========================================*/

.socials{

    display:flex;

    gap:18px;

    margin-top:28px;

}

.socials a{

    width:56px;

    height:56px;

    border-radius:50%;

    background:#141414;

    display:flex;

    justify-content:center;

    align-items:center;

    transition:.35s;

    border:1px solid rgba(255,255,255,.05);

}

.socials img{

    width:28px;

}

.socials a:hover{

    background:var(--gold);

    transform:translateY(-5px);

}

.socials a:hover img{

    filter:brightness(0);

}

/*=========================================
            FOOTER BUTTON
=========================================*/

.footer-column .btn{

    margin-top:30px;

    width:max-content;

}

.footer-column .btn img{

    width:24px;

}

/*=========================================
        FOOTER BOTTOM
=========================================*/

.footer-bottom{

    border-top:1px solid rgba(255,255,255,.06);

}

.footer-bottom-inner{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:24px 0;

    gap:20px;

}

.footer-bottom p{

    color:#8F8F8F;

    font-size:.92rem;

}

/*=========================================
        CAR DETAIL PAGE — HERO
=========================================*/

.car-hero{

    position:relative;

    height:85vh;

    min-height:560px;

    display:flex;

    align-items:flex-end;

    overflow:hidden;

}

.car-hero-img{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

}

.car-hero-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(

        to top,

        rgba(5,5,5,.92) 0%,

        rgba(5,5,5,.45) 45%,

        rgba(5,5,5,.15) 100%

    );

}

.car-hero-content{

    position:relative;

    z-index:2;

    padding-bottom:70px;

}

.car-back-link{

    display:inline-flex;

    align-items:center;

    gap:10px;

    color:var(--grey);

    font-size:.88rem;

    letter-spacing:.5px;

    margin-bottom:26px;

    transition:var(--transition);

}

.car-back-arrow{

    width:14px;

    transform:rotate(180deg);

    transition:var(--transition);
}

.car-back-link:hover{

    color:var(--gold);

}

.car-back-link:hover .car-back-arrow{

    transform:rotate(180deg) translateX(4px);

}

.car-hero-content h1{

    margin:14px 0 18px;

    font-size:clamp(3rem,6vw,5.2rem);

}

.car-hero-specs{

    color:var(--grey);

    letter-spacing:1px;

    font-size:1.05rem;

}

/*=========================================
        CAR DETAIL PAGE — DETAILS
=========================================*/

.car-details{

    background:var(--bg);

}

.car-details-grid{

    display:grid;

    grid-template-columns:1.7fr 1fr;

    gap:70px;

    align-items:start;

}

.car-details-main h2{

    margin:16px 0 24px;

    font-size:clamp(2.2rem,3.5vw,3rem);

}

.car-details-main > p{

    max-width:640px;

    margin-bottom:44px;

}

.car-specs-table{

    display:flex;

    flex-direction:column;

    border-top:1px solid var(--border);

}

.car-specs-table div{

    display:flex;

    justify-content:space-between;

    padding:18px 4px;

    border-bottom:1px solid var(--border);

}

.car-specs-table span:first-child{

    color:var(--grey);

    font-size:.95rem;

}

.car-specs-table span:last-child{

    font-weight:500;

    color:var(--white);

}

.car-cta-card{

    background:var(--card);

    border:1px solid var(--border);

    border-radius:var(--radius);

    padding:44px 36px;

    position:sticky;

    top:120px;
}

.car-cta-card h3{

    font-size:1.5rem;

    margin-bottom:14px;

}

.car-cta-card p{

    margin-bottom:30px;

    font-size:.95rem;

}

.car-cta-card .btn{

    width:100%;

    margin-bottom:16px;

}

.car-cta-card .btn:last-child{

    margin-bottom:0;

}

.car-cta-card .btn img{

    width:18px;

}

/*=========================================
        CAR DETAIL PAGE — RELATED
=========================================*/

.related-vehicles{

    background:var(--bg-soft);

    border-top:1px solid var(--border);
}

.related-grid{

    margin-top:60px;

}

/*=========================================
        REVEAL ANIMATIONS
=========================================*/

.reveal{

    opacity:0;

    transform:translateY(60px);

    transition:

        opacity .9s ease,

        transform .9s ease;

}

.reveal.active{

    opacity:1;

    transform:translateY(0);

}

/*=========================================
        IMAGE HOVERS
=========================================*/

img{

    user-select:none;

    -webkit-user-drag:none;

}

.image{

    overflow:hidden;

}

.image img{

    transition:1.2s ease;

}

/*=========================================
        CUSTOM SCROLLBAR
=========================================*/

::-webkit-scrollbar{

    width:11px;

}

::-webkit-scrollbar-track{

    background:#050505;

}

::-webkit-scrollbar-thumb{

    background:#2d2d2d;

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--gold);

}

/*=========================================
        SELECTION
=========================================*/

::selection{

    background:var(--gold);

    color:#050505;

}

/*=========================================
        FOCUS
=========================================*/

button,
input,
textarea,
select{

    font:inherit;

}

button{

    cursor:pointer;

}

button:focus,
a:focus{

    outline:none;

}

/*=========================================
        TRANSITIONS
=========================================*/

a,
button,
img{

    transition:var(--transition);

}

/*=========================================
        1200px
=========================================*/

@media(max-width:1200px){

.container{

    width:94%;

}

.inventory-grid{

    gap:26px;

}

.inventory-layout{

    flex-direction:column;

    gap:50px;

}

.inventory-layout .section-header{

    flex:none;

    width:100%;

    flex-direction:row;

    justify-content:space-between;

    align-items:flex-end;

}

.inventory-header-actions{

    flex-direction:row;

    align-items:center;

    margin-top:0;

}

.features-grid{

    grid-template-columns:

    repeat(3,1fr);

    row-gap:40px;

}

.feature-card::after{

    display:none;

}

.footer-grid{

    grid-template-columns:

    repeat(2,1fr);

}

.brand-row{

    grid-template-columns:

    repeat(4,1fr);

    row-gap:45px;

}

}

/*=========================================
        992px
=========================================*/

@media(max-width:992px){

.car-details-grid{

    grid-template-columns:1fr;

    gap:50px;

}

.car-cta-card{

    position:static;

}

.nav-links{

    display:none;

}

.desktop-btn{

    display:none;

}

#menu-toggle{

    display:block;

}

.logo img{

    width:203px;

}

.hero-content{

    max-width:100%;

}

.export-grid{

    grid-template-columns:1fr;

    gap:60px;

}

.export-image{

    order:-1;

}

.inventory-grid{

    grid-auto-flow:row;

    grid-template-columns:1fr;

    overflow-x:visible;

}

.inventory-controls{

    display:none;

}

.features-grid{

    grid-template-columns:

    repeat(2,1fr);

    row-gap:40px;

}

.section-header{

    flex-direction:column;

    align-items:flex-start;

}

.footer-grid{

    grid-template-columns:1fr;

    gap:55px;

}

.footer-bottom-inner{

    flex-direction:column;

    text-align:center;

}

}
/*=========================================
            768px
=========================================*/

@media (max-width:768px){

section{

    padding:110px 0;

}

.car-hero{

    height:65vh;

    min-height:480px;

}

.car-cta-card{

    padding:36px 26px;

}

.nav-container{

    height:82px;

}

#mobile-menu{

    top:82px;

    height:calc(100vh - 82px);

    width:100%;

    padding:40px 35px;

    align-items:center;

    text-align:center;

}

.mobile-menu-top img{

    width:80px;

}

.logo img{

    width:189px;

}

#hero{

    align-items:flex-end;

}

.hero-content{

    text-align:center;

    max-width:100%;

    padding-bottom:14vh;

}

.hero-content p{

    margin-left:auto;

    margin-right:auto;

}

.hero-buttons{

    justify-content:center;

}

.hero-buttons .btn{

    width:100%;

    max-width:320px;

}

.scroll-indicator{

    display:none;

}

.section-header{

    text-align:center;

    align-items:center;

}

.section-header h2{

    margin-top:12px;

}

.inventory-layout .section-header{

    flex-direction:column;

    align-items:center;

}

.inventory-header-actions{

    flex-direction:column;

    align-items:center;

}

.brand-row{

    grid-template-columns:repeat(2,1fr);

    gap:40px 30px;

}

.brand-row img{

    height:70px;

}

.inventory-grid{

    gap:28px;

}

.car-card .image{

    height:220px;

}

.card-content{

    padding:28px;

}

.export-grid{

    gap:40px;

}

.export-image{

    border-radius:18px;

}

.features-grid{

    grid-template-columns:1fr;

    row-gap:36px;

}

.feature-card{

    padding:0 10px 32px;

    border-bottom:1px solid var(--border);

}

.feature-card:last-child{

    padding-bottom:0;

    border-bottom:none;

}

.feature-icon img{

    width:68px;

    height:68px;

}

.footer-grid{

    padding:70px 0 45px;

}

.footer-logo{

    width:160px;

}

.socials{

    justify-content:center;

}

.contact-list li{

    align-items:flex-start;

}

.footer-column .btn{

    width:100%;

    justify-content:center;

}

}

/*=========================================
            576px
=========================================*/

@media (max-width:576px){

.container{

    width:92%;

}

h1{

    font-size:3.2rem;

}

h2{

    font-size:2.3rem;

}

h3{

    font-size:1.35rem;

}

.section-tag{

    letter-spacing:3px;

    font-size:.72rem;

}

.btn{

    padding:15px 26px;

    font-size:.95rem;

}

.btn img{

    width:16px;

}

.logo img{

    width:169px;

}

.brand-row{

    gap:28px;

}

.brand-row img{

    height:60px;

}

.car-card .image{

    height:190px;

}

.brand-badge{

    width:58px;

}

.feature-icon img{

    width:74px;

    height:74px;

}

.contact-list img{

    width:26px;

}

.footer-bottom-inner{

    padding:20px 0;

}

.footer-bottom p{

    font-size:.82rem;

}

}

/*=========================================
            420px
=========================================*/

@media (max-width:420px){

.hero-content h1{

    font-size:2.75rem;

}

.hero-content p{

    font-size:.95rem;

}

.btn{

    width:100%;

}

.hero-buttons{

    gap:14px;

}

.brand-row{

    grid-template-columns:1fr 1fr;

    gap:22px;

}

.brand-row img{

    height:50px;

}

.card-content{

    padding:22px;

}

.feature-card{

    padding:0 6px 28px;

}

.feature-icon img{

    width:58px;

    height:58px;

}

.footer-logo{

    width:165px;

}

.socials a{

    width:46px;

    height:46px;

}

.socials img{

    width:20px;

}

.contact-list{

    gap:18px;

}

}

/*=========================================
        SMALL IMPROVEMENTS
=========================================*/

html{

    scroll-padding-top:100px;

}

body.loaded .reveal{

    transition-delay:.1s;

}

.brand-row img,
.brand-badge,
.feature-icon img,
.socials img{

    backface-visibility:hidden;

    transform:translateZ(0);

}

.btn,
.car-card,
.feature-card,
.export-image,
.socials a{

    will-change:transform;

}