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

:root {
    --primary: #bb2a21;
    --primary-dark: #8f1e18;
    --dark: #202b38;
    --dark-two: #293442;
    --light: #f5f7fa;
    --text: #29323d;
    --muted: #75808c;
    --white: #ffffff;
    --shadow: 0 15px 40px rgba(0, 0, 0, .10);
}


/* =========================================================
   GENERAL
========================================================= */

* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--text);
    overflow-x: hidden;
}


.section {
    padding: 100px 0;
}


.section-light {
    background: var(--light);
}


.section-label {
    display: inline-block;
    font-size: 12px;
    letter-spacing: 2px;
    font-weight: 800;
    color: var(--primary);
    margin-bottom: 15px;
}


.section-heading h2 {
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 800;
    margin-bottom: 15px;
}


.section-heading p {
    color: var(--muted);
    max-width: 650px;
    margin: auto;
    font-size: 17px;
}


/* =========================================================
   PAGE LOADER
========================================================= */

.page-loader {
    position: fixed;
    inset: 0;
    background: var(--dark);
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity .5s ease, visibility .5s ease;
}


.page-loader.hide {
    opacity: 0;
    visibility: hidden;
}


.loader-content {
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}


.loader-circle {
    width: 55px;
    height: 55px;
    border: 5px solid rgba(255, 255, 255, .2);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}


@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}


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

.site-navbar {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    padding: 14px 0;
    background: rgba(32, 43, 56, .75);
    backdrop-filter: blur(12px);
    transition: .3s ease;
}


.site-navbar.scrolled {
    padding: 8px 0;
    background: rgba(32, 43, 56, .98);
    box-shadow: 0 5px 25px rgba(0, 0, 0, .15);
}


.brand-logo {
    width: 48px;
    height: 48px;
    object-fit: contain;
    border-radius: 10px;
    background: white;
    padding: 3px;
}


.default-logo {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: white;
    font-size: 23px;
}


.brand-name {
    display: block;
    color: white;
    font-weight: 800;
    font-size: 17px;
}


.navbar-brand small {
    display: block;
    color: rgba(255, 255, 255, .6);
    font-size: 11px;
}


.navbar-nav {
    gap: 8px;
}


.navbar-nav .nav-link {
    color: rgba(255, 255, 255, .75);
    font-weight: 600;
    padding: 10px 12px;
    transition: .2s ease;
}


.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    color: white;
}


.nav-preorder-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: var(--primary);
    color: white;
    border-radius: 7px;
    text-decoration: none;
    font-weight: 700;
    transition: .25s ease;
}


.nav-preorder-btn:hover {
    background: var(--primary-dark);
    color: white;
    transform: translateY(-2px);
}


.navbar-toggler {
    border: none;
    color: white;
    font-size: 25px;
}


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

.hero-slider {
    height: 750px;
    position: relative;
    overflow: hidden;
    background: var(--dark);
}


.hero-slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;

    opacity: 0;
    visibility: hidden;

    transform: scale(1.08);

    transition:
        opacity 1.2s ease,
        transform 1.5s cubic-bezier(.22, .61, .36, 1),
        visibility 1.2s;
}


/* BACKGROUND ANIMATION */

.hero-slide::before {
    content: "";
    position: absolute;
    inset: -5%;
    background: inherit;
    background-size: cover;
    background-position: center;
    z-index: -1;

    transform: scale(1.08);

    transition:
        transform 8s ease,
        filter 1.2s ease;

    filter: brightness(.85);
}


/* ACTIVE SLIDE */

.hero-slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
    transform: scale(1);
}


.hero-slide.active::before {
    animation: kenBurns 8s ease forwards;
}


@keyframes kenBurns {

    0% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1.16);
    }

}


/* HERO CONTENT */

.hero-container {
    width: 100%;
    position: relative;
    z-index: 5;
}


.hero-content {
    max-width: 780px;
    color: white;
    padding-top: 70px;
}


/* TEXT INITIAL STATE */

.hero-slide .hero-badge,
.hero-slide h1,
.hero-slide p,
.hero-slide .hero-buttons {

    opacity: 0;

    transform:
        translateY(45px);

}


/* ACTIVE TEXT ANIMATION */

.hero-slide.active .hero-badge {

    animation:
        heroContentUp .7s ease forwards;

}


.hero-slide.active h1 {

    animation:
        heroContentUp .9s .15s ease forwards;

}


.hero-slide.active p {

    animation:
        heroContentUp .9s .30s ease forwards;

}


.hero-slide.active .hero-buttons {

    animation:
        heroContentUp .9s .45s ease forwards;

}


@keyframes heroContentUp {

    from {

        opacity: 0;

        transform:
            translateY(45px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


/* HERO BADGE */

.hero-badge {

    display: inline-flex;

    align-items: center;

    gap: 8px;

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

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

    padding:
        9px 15px;

    border-radius:
        50px;

    font-size:
        13px;

    font-weight:
        700;

    margin-bottom:
        25px;

    backdrop-filter:
        blur(10px);

}

.preorder-alert {
    animation:
        preorderAlertIn 0.6s ease-out;
}

@keyframes preorderAlertIn {

    from {
        opacity: 0;
        transform: translateY(-15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}

.preorder-alert.fade-out {
    opacity: 0;
    transform: translateY(-15px);
    transition:
        opacity 0.6s ease,
        transform 0.6s ease;
}
/* HERO TITLE */

.hero-content h1 {

    font-size:
        clamp(
            45px,
            7vw,
            78px
        );

    line-height:
        1.05;

    font-weight:
        800;

    margin-bottom:
        25px;

}


.hero-content h1 span {

    color:
        #ff746b;

}


/* HERO DESCRIPTION */

.hero-content p {

    font-size:
        19px;

    line-height:
        1.8;

    max-width:
        650px;

    color:
        rgba(
            255,
            255,
            255,
            .86
        );

}


/* HERO BUTTONS */

.hero-buttons {

    display:
        flex;

    gap:
        15px;

    flex-wrap:
        wrap;

    margin-top:
        35px;

}


.btn-primary-custom {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    background:
        var(--primary);

    color:
        white;

    padding:
        15px 25px;

    text-decoration:
        none;

    font-weight:
        700;

    border-radius:
        8px;

    transition:
        .25s;

}


.btn-primary-custom:hover {

    background:
        var(--primary-dark);

    color:
        white;

    transform:
        translateY(-3px);

}


.btn-secondary-custom {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    padding:
        15px 25px;

    color:
        white;

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

    border-radius:
        8px;

    text-decoration:
        none;

    font-weight:
        700;

    transition:
        .25s;

}


.btn-secondary-custom:hover {

    background:
        white;

    color:
        var(--dark);

}


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

.slider-arrow {

    position:
        absolute;

    top:
        50%;

    transform:
        translateY(-50%);

    z-index:
        20;

    width:
        54px;

    height:
        54px;

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

    border-radius:
        50%;

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

    color:
        white;

    font-size:
        23px;

    backdrop-filter:
        blur(10px);

    transition:
        .3s;

}


.slider-arrow:hover {

    background:
        var(--primary);

    transform:
        translateY(-50%)
        scale(1.1);

}


.slider-prev {

    left:
        30px;

}


.slider-next {

    right:
        30px;

}


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

.slider-dots {

    position:
        absolute;

    bottom:
        40px;

    left:
        50%;

    transform:
        translateX(-50%);

    z-index:
        20;

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

}


.slider-dots button {

    width:
        11px;

    height:
        11px;

    padding:
        0;

    border-radius:
        50%;

    border:
        none;

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

    transition:
        .4s;

}


.slider-dots button.active {

    width:
        42px;

    border-radius:
        20px;

    background:
        var(--primary);

}


/* =========================================================
   HERO PROGRESS BAR
========================================================= */

.hero-progress {

    position:
        absolute;

    left:
        0;

    bottom:
        0;

    width:
        100%;

    height:
        4px;

    z-index:
        30;

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

}


.hero-progress-bar {

    width:
        0%;

    height:
        100%;

    background:
        var(--primary);

}


.hero-progress-bar.animate {

    animation:
        progressAnimation
        6s
        linear
        forwards;

}


@keyframes progressAnimation {

    from {

        width:
            0%;

    }

    to {

        width:
            100%;

    }

}


/* =========================================================
   STATS
========================================================= */

.stats-section {

    padding:
        40px 0;

    background:
        white;

    position:
        relative;

    z-index:
        20;

    margin-top:
        -45px;

}


.stat-item {

    display:
        flex;

    align-items:
        center;

    gap:
        16px;

    background:
        white;

    padding:
        22px;

    border-radius:
        12px;

    box-shadow:
        var(--shadow);

    height:
        100%;

}


.stat-icon {

    width:
        55px;

    height:
        55px;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    background:
        #fbe9e8;

    color:
        var(--primary);

    border-radius:
        12px;

    font-size:
        23px;

}


.stat-item h3 {

    margin:
        0;

    font-weight:
        800;

    font-size:
        25px;

}


.stat-item p {

    margin:
        3px 0 0;

    color:
        var(--muted);

    font-size:
        13px;

}


/* =========================================================
   PRODUCTS
========================================================= */

.product-slider-wrapper {

    position:
        relative;

    margin-top:
        50px;

}


.product-slider {

    display:
        flex;

    gap:
        25px;

    overflow-x:
        auto;

    scroll-behavior:
        smooth;

    scrollbar-width:
        none;

    padding:
        10px 5px 30px;

}


.product-slider::-webkit-scrollbar {

    display:
        none;

}


.product-slide {

    flex:
        0 0
        280px;

}


.product-card {

    background:
        white;

    border-radius:
        15px;

    overflow:
        hidden;

    height:
        100%;

    box-shadow:
        0 10px 30px
        rgba(0,0,0,.06);

    transition:
        .3s;

}


.product-card:hover {

    transform:
        translateY(-8px);

    box-shadow:
        0 20px 45px
        rgba(0,0,0,.12);

}


.product-image {

    height:
        180px;

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        linear-gradient(
            135deg,
            #e9edf2,
            #ffffff
        );

}


.product-image-icon {

    font-size:
        70px;

    color:
        #c9d0d8;

}


.stock-badge {

    position:
        absolute;

    top:
        15px;

    right:
        15px;

    padding:
        6px 11px;

    border-radius:
        20px;

    font-size:
        11px;

    font-weight:
        700;

}


.available {

    background:
        #dff7e9;

    color:
        #218a4b;

}


.unavailable {

    background:
        #fde3e2;

    color:
        #b42318;

}


.product-body {

    padding:
        22px;

}


.product-brand {

    font-size:
        11px;

    color:
        var(--primary);

    font-weight:
        800;

    text-transform:
        uppercase;

    letter-spacing:
        1px;

    margin-bottom:
        8px;

}


.product-body h5 {

    font-weight:
        800;

    margin-bottom:
        7px;

}


.product-number {

    font-size:
        12px;

    color:
        var(--muted);

}


.product-vehicle {

    font-size:
        12px;

    color:
        var(--muted);

    margin:
        15px 0;

}


.product-vehicle i {

    color:
        var(--primary);

    margin-right:
        5px;

}


.product-footer {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    border-top:
        1px solid #edf0f3;

    padding-top:
        15px;

}


.product-footer small {

    color:
        var(--muted);

    display:
        block;

}


.product-price {

    font-size:
        17px;

    font-weight:
        800;

    color:
        var(--primary);

}


.product-request {

    width:
        42px;

    height:
        42px;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    border-radius:
        10px;

    background:
        var(--dark);

    color:
        white;

    text-decoration:
        none;

    transition:
        .25s;

}


.product-request:hover {

    background:
        var(--primary);

    color:
        white;

    transform:
        scale(1.08);

}


.product-slider-arrow {

    position:
        absolute;

    top:
        45%;

    z-index:
        10;

    width:
        45px;

    height:
        45px;

    border:
        none;

    border-radius:
        50%;

    background:
        white;

    box-shadow:
        var(--shadow);

    color:
        var(--dark);

    transition:
        .25s;

}


.product-slider-arrow:hover {

    background:
        var(--primary);

    color:
        white;

    transform:
        scale(1.08);

}


.product-prev {

    left:
        -20px;

}


.product-next {

    right:
        -20px;

}


.empty-products {

    width:
        100%;

    text-align:
        center;

    padding:
        70px;

}


.empty-products i {

    font-size:
        55px;

    color:
        var(--primary);

}


/* =========================================================
   ABOUT
========================================================= */

.about-gallery {

    position:
        relative;

}


.about-main-image {

    height:
        520px;

    border-radius:
        20px;

    background:

        url(
            "https://images.unsplash.com/photo-1487754180451-c456f719a1fc?auto=format&fit=crop&w=1200&q=85"
        )

        center /
        cover
        no-repeat;

}


.about-floating-card {

    position:
        absolute;

    bottom:
        -25px;

    right:
        -15px;

    background:
        white;

    padding:
        20px;

    border-radius:
        15px;

    display:
        flex;

    gap:
        15px;

    align-items:
        center;

    box-shadow:
        var(--shadow);

}


.about-floating-card i {

    font-size:
        35px;

    color:
        var(--primary);

}


.about-floating-card strong {

    display:
        block;

}


.about-floating-card small {

    color:
        var(--muted);

}


.about-title {

    font-size:
        clamp(
            32px,
            4vw,
            50px
        );

    font-weight:
        800;

    margin:
        15px 0 25px;

}


.about-description {

    color:
        var(--muted);

    line-height:
        1.8;

    font-size:
        17px;

}


.about-features {

    margin-top:
        35px;

}


.about-feature {

    display:
        flex;

    gap:
        17px;

    margin-bottom:
        25px;

}


.feature-icon {

    width:
        55px;

    height:
        55px;

    flex-shrink:
        0;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    border-radius:
        12px;

    background:
        #fbe9e8;

    color:
        var(--primary);

    font-size:
        23px;

}


.about-feature h5 {

    font-weight:
        800;

    margin-bottom:
        6px;

}


.about-feature p {

    color:
        var(--muted);

    margin:
        0;

}


/* =========================================================
   WHY SECTION
========================================================= */

.why-section {

    padding:
        100px 0;

    background:
        var(--dark);

}


.light-heading {

    color:
        white;

}


.light-heading p {

    color:
        rgba(255,255,255,.65);

}


.light-heading .section-label {

    color:
        #ff766e;

}


.why-card {

    position:
        relative;

    padding:
        40px;

    height:
        100%;

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

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

    border-radius:
        18px;

    color:
        white;

    transition:
        .3s;

}


.why-card:hover {

    background:
        var(--primary);

    transform:
        translateY(-7px);

}


.why-card i {

    font-size:
        45px;

    margin-bottom:
        25px;

    display:
        block;

}


.why-card h4 {

    font-weight:
        800;

}


.why-card p {

    color:
        rgba(255,255,255,.72);

    line-height:
        1.7;

}


.why-number {

    position:
        absolute;

    right:
        25px;

    top:
        20px;

    font-size:
        14px;

    font-weight:
        800;

    color:
        rgba(255,255,255,.3);

}


/* =========================================================
   PREORDER
========================================================= */

.preorder-section {

    background:
        linear-gradient(
            135deg,
            var(--primary),
            #7f1814
        );

    color:
        white;

}


.light-label {

    color:
        rgba(255,255,255,.7);

}


.preorder-section h2 {

    font-size:
        clamp(
            38px,
            5vw,
            60px
        );

    font-weight:
        800;

    margin:
        15px 0 25px;

}


.preorder-section p {

    color:
        rgba(255,255,255,.8);

    font-size:
        17px;

    line-height:
        1.8;

}


.preorder-steps {

    margin-top:
        35px;

}


.preorder-step {

    display:
        flex;

    align-items:
        center;

    gap:
        15px;

    margin-bottom:
        18px;

    font-weight:
        600;

}


.preorder-step span {

    width:
        38px;

    height:
        38px;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    background:
        white;

    color:
        var(--primary);

    border-radius:
        50%;

    font-weight:
        800;

}


.preorder-card {

    background:
        white;

    color:
        var(--text);

    padding:
        40px;

    border-radius:
        20px;

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

}


.preorder-card h4 {

    font-weight:
        800;

    margin-bottom:
        8px;

}


.preorder-card > p {

    color:
        var(--muted);

    font-size:
        14px;

}


.form-label {

    font-size:
        13px;

    font-weight:
        700;

}


.form-control {

    min-height:
        48px;

    border:
        1px solid #dde2e7;

    border-radius:
        8px;

}


.form-control:focus {

    border-color:
        var(--primary);

    box-shadow:
        0 0 0 .2rem
        rgba(187,42,33,.12);

}


textarea.form-control {

    min-height:
        auto;

}


.submit-preorder-btn {

    width:
        100%;

    border:
        none;

    padding:
        15px;

    border-radius:
        8px;

    background:
        var(--primary);

    color:
        white;

    font-weight:
        700;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    gap:
        10px;

    transition:
        .3s;

}


.submit-preorder-btn:hover {

    background:
        var(--primary-dark);

    transform:
        translateY(-2px);

}


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

.contact-card {

    height:
        100%;

    padding:
        40px 25px;

    text-align:
        center;

    border:
        1px solid #edf0f3;

    border-radius:
        15px;

    transition:
        .3s;

}


.contact-card:hover {

    transform:
        translateY(-6px);

    box-shadow:
        var(--shadow);

}


.contact-icon {

    width:
        65px;

    height:
        65px;

    margin:
        auto auto 20px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        #fbe9e8;

    color:
        var(--primary);

    border-radius:
        50%;

    font-size:
        28px;

}


.contact-card h5 {

    font-weight:
        800;

}


.contact-card p {

    color:
        var(--muted);

    margin:
        0;

}


.contact-buttons {

    display:
        flex;

    justify-content:
        center;

    gap:
        15px;

    flex-wrap:
        wrap;

    margin-top:
        50px;

}


.whatsapp-btn {

    padding:
        14px 25px;

    background:
        #25d366;

    color:
        white;

    border-radius:
        8px;

    text-decoration:
        none;

    font-weight:
        700;

}


.whatsapp-btn:hover {

    color:
        white;

    transform:
        translateY(-2px);

}


.email-btn {

    padding:
        14px 25px;

    border:
        2px solid var(--dark);

    color:
        var(--dark);

    border-radius:
        8px;

    text-decoration:
        none;

    font-weight:
        700;

}


.email-btn:hover {

    background:
        var(--dark);

    color:
        white;

}


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

footer {

    background:
        #18212b;

    padding:
        60px 0 35px;

    color:
        rgba(255,255,255,.65);

}


.footer-brand {

    font-size:
        22px;

    font-weight:
        800;

    color:
        white;

    margin-bottom:
        15px;

}


.footer-brand i {

    color:
        var(--primary);

    margin-right:
        8px;

}


.footer-link {

    color:
        rgba(255,255,255,.75);

    text-decoration:
        none;

}


.footer-link:hover {

    color:
        white;

}


.footer-divider {

    margin:
        0 12px;

}


.copyright {

    margin-top:
        15px;

    font-size:
        13px;

}


/* =========================================================
   BACK TO TOP
========================================================= */

.back-to-top {

    position:
        fixed;

    right:
        25px;

    bottom:
        25px;

    width:
        48px;

    height:
        48px;

    border:
        none;

    border-radius:
        50%;

    background:
        var(--primary);

    color:
        white;

    z-index:
        100;

    opacity:
        0;

    visibility:
        hidden;

    transform:
        translateY(20px);

    transition:
        .3s;

}


.back-to-top.show {

    opacity:
        1;

    visibility:
        visible;

    transform:
        translateY(0);

}


/* =========================================================
   SCROLL REVEAL
========================================================= */

.reveal {

    opacity:
        0;

    transform:
        translateY(35px);

    transition:
        opacity .7s ease,
        transform .7s ease;

}


.reveal.active {

    opacity:
        1;

    transform:
        translateY(0);

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 991px) {

    .navbar-collapse {

        margin-top:
            15px;

        padding:
            15px;

        background:
            rgba(32,43,56,.98);

        border-radius:
            10px;

    }


    .hero-slider {

        height:
            680px;

    }


    .about-main-image {

        height:
            420px;

    }


    .stats-section {

        margin-top:
            0;

    }


    .product-slider-arrow {

        display:
            none;

    }

}


@media (max-width: 767px) {

    .section {

        padding:
            70px 0;

    }


    .hero-slider {

        height:
            650px;

    }


    .hero-content {

        padding-top:
            60px;

    }


    .hero-content h1 {

        font-size:
            44px;

    }


    .hero-content p {

        font-size:
            16px;

    }


    .slider-arrow {

        display:
            none;

    }


    .stat-item {

        padding:
            15px;

    }


    .stat-icon {

        width:
            45px;

        height:
            45px;

        font-size:
            18px;

    }


    .stat-item h3 {

        font-size:
            19px;

    }


    .product-slide {

        flex-basis:
            250px;

    }


    .about-floating-card {

        right:
            10px;

        bottom:
            -15px;

    }


    .preorder-card {

        padding:
            25px;

    }


    .preorder-section h2 {

        font-size:
            40px;

    }

}