*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

:root{

    --bg:#050505;
    --card:#0d0d0d;
    --line:#1a1a1a;
    --text:#ffffff;
    --gray:#9b9b9b;
    --red:#d90429;

}

html{
    scroll-behavior:smooth;
}

body{

    background:var(--bg);

    color:var(--text);

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

    overflow-x:hidden;

}

a{
    text-decoration:none;
    color:inherit;
}

ul{
    list-style:none;
}

body::before{

    content:'';

    position:fixed;

    inset:0;

    background:

    radial-gradient(

        circle at top right,

        rgba(217,4,41,.12),

        transparent 35%

    );

    pointer-events:none;

    z-index:-1;

}

/* LOADER */

#loader{

    position:fixed;

    inset:0;

    background:#050505;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:9999;

    transition:.8s;

}

#loader.hide{

    opacity:0;

    visibility:hidden;

}

#loader h1{

    font-size:4rem;

    font-weight:900;

    letter-spacing:8px;

}

/* NAV */

.navbar{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:90px;

    padding:0 8%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    background:

    rgba(5,5,5,.85);

    backdrop-filter:blur(15px);

    z-index:1000;

}

.logo{

    font-size:2rem;

    font-weight:900;

    letter-spacing:5px;

}

.logo span{

    color:var(--red);

}

.navbar ul{

    display:flex;

    gap:35px;

}

.navbar a{

    font-size:.85rem;

    letter-spacing:2px;

    transition:.3s;

}

.navbar a:hover{

    color:var(--red);

}

/* HERO */

.hero{

    min-height:100vh;

    position:relative;

    display:flex;

    align-items:flex-end;

    padding:0 8% 120px;

    background:

    linear-gradient(

    rgba(0,0,0,.3),

    rgba(0,0,0,.9)

    ),

    url("images/hero.jpg");

    background-size:cover;

    background-position:center;

}

.hero-content{

    max-width:700px;

}

.hero-sub{

    display:block;

    color:var(--red);

    letter-spacing:5px;

    margin-bottom:25px;

}

.hero h1{

    font-size:
    clamp(
    4rem,
    8vw,
    8rem
    );

    line-height:.85;

    font-weight:900;

    letter-spacing:-5px;

}

.hero p{

    margin-top:25px;

    font-size:1.2rem;

    color:#c4c4c4;

    max-width:500px;

    line-height:1.8;

}
/* =========================
   SECTION COMMON
========================= */

section{

    padding:150px 10%;

}

.section-title{

    color:var(--red);

    font-size:.85rem;

    letter-spacing:4px;

    margin-bottom:20px;

}

section h2{

    font-size:4rem;

    margin-bottom:35px;

    line-height:1.1;

}

.section-description{

    color:var(--gray);

    max-width:700px;

    line-height:2;

    margin-bottom:50px;

}

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

.about p{

    max-width:800px;

    color:var(--gray);

    line-height:2.2;

    font-size:1.05rem;

}

/* =========================
   SERVICE
========================= */

.service-grid{

    display:grid;

    grid-template-columns:
    repeat(
        auto-fit,
        minmax(
            280px,
            1fr
        )
    );

    gap:25px;

}

.service-card{

    background:var(--card);

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

    padding:40px;

    transition:.35s;

    position:relative;

}

.service-card:hover{

    transform:
    translateY(-10px);

    border-color:
    var(--red);

}

.service-number{

    font-size:4rem;

    font-weight:900;

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

    position:absolute;

    top:20px;

    right:20px;

}

.service-card h3{

    font-size:1.5rem;

    margin-bottom:20px;

}

.service-card p{

    color:var(--gray);

    line-height:1.8;

}

/* =========================
   TEAM
========================= */

.team-grid{

    display:grid;

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

    gap:20px;

    max-width:1100px;

    margin:auto;

}

.member-card{

    background:var(--card);

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

    overflow:hidden;

    transition:.35s;

}

.member-card:hover{

    transform:
    translateY(-10px);

    border-color:
    var(--red);

}

.member-image{

    height:280px;

    background:#111;

}

.member-image{

    height:220px;

    overflow:hidden;

}

.member-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center top;

    display:block;

}

.member-card h3{

    padding:
    30px
    30px
    10px;

    font-size:1.7rem;

}

.member-card span{

    display:block;

    padding:
    0
    30px;

    color:var(--red);

    letter-spacing:2px;

    font-size:.8rem;

}

.member-card p{

    padding:
    20px
    30px
    30px;

    color:var(--gray);

}

/* =========================
   DEMO CAR
========================= */

.demo-wrap{

    display:grid;

    grid-template-columns:
    1.2fr
    1fr;

    gap:60px;

    align-items:center;

}

.demo-image{

    height:600px;

    background:

    url(
    "images/s15.jpg"
    );

    background-size:cover;

    background-position:center;

}

.demo-info{

    background:var(--card);

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

    padding:50px;

}

.demo-info h3{

    font-size:3rem;

    margin-bottom:30px;

}

.demo-info ul{

    display:flex;

    flex-direction:column;

    gap:15px;

}

.demo-info li{

    padding-bottom:15px;

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

    color:var(--gray);

}

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

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:
    18px
    42px;

    background:
    var(--red);

    color:white;

    font-weight:700;

    transition:.3s;

}

.btn:hover{

    transform:
    translateY(-4px);

    box-shadow:
    0 15px 40px
    rgba(
        217,
        4,
        41,
        .3
    );

}

.btn-outline{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:
    18px
    42px;

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

    color:white;

    transition:.3s;

}

.btn-outline:hover{

    background:
    var(--red);

}
/* =========================
   GALLERY
========================= */

.gallery-grid{

    display:grid;

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

    gap:20px;

}

.gallery-item{

    position:relative;

    height:350px;

    overflow:hidden;

    cursor:pointer;

    transition:.4s;

    background:#111;

    background-size:cover;

    background-position:center;

}

.gallery-item:hover{

    transform:scale(.98);

}

.gallery-item::before{

    content:'';

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        transparent,
        rgba(0,0,0,.85)
    );

}

.gallery-overlay{

    position:absolute;

    left:25px;

    bottom:25px;

    z-index:2;

    font-weight:700;

    letter-spacing:2px;

}

/* GALLERY IMAGES */

.gallery-item:nth-child(1){

    background-image:
    url("images/gallery1.jpg");

}

.gallery-item:nth-child(2){

    background-image:
    url("images/gallery2.jpg");

}

.gallery-item:nth-child(3){

    background-image:
    url("images/gallery3.jpg");

}

.gallery-item:nth-child(4){

    background-image:
    url("images/gallery4.jpg");

}

.gallery-item:nth-child(5){

    background-image:
    url("images/gallery5.jpg");

}

.gallery-item:nth-child(6){

    background-image:
    url("images/gallery6.jpg");

}

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

.contact{

    text-align:center;

}

.contact h2{

    margin-bottom:30px;

}

.contact p{

    max-width:700px;

    margin:auto;

    color:var(--gray);

    line-height:2;

}

.contact-buttons{

    margin-top:50px;

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

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

footer{

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

    text-align:center;

    padding:
    80px
    20px;

}

.footer-logo{

    font-size:2rem;

    font-weight:900;

    letter-spacing:4px;

    margin-bottom:15px;

}

footer p{

    color:var(--gray);

    margin-bottom:10px;

}

footer span{

    color:#666;

}

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

.hero-scroll{

    position:absolute;

    right:60px;

    bottom:50px;

    writing-mode:
    vertical-rl;

    letter-spacing:5px;

    color:#888;

    font-size:.8rem;

}

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

.reveal{

    opacity:0;

    transform:
    translateY(60px);

    transition:
    opacity 1s ease,
    transform 1s ease;

}

.reveal.active{

    opacity:1;

    transform:
    translateY(0);

}

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

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#050505;

}

::-webkit-scrollbar-thumb{

    background:var(--red);

}

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

@media(max-width:1000px){

    .demo-wrap{

        grid-template-columns:
        1fr;

    }

    .demo-image{

        height:450px;

    }

}

@media(max-width:768px){

    .navbar{

        flex-direction:column;

        height:auto;

        padding:
        20px;

        gap:20px;

    }

    .navbar ul{

        flex-wrap:wrap;

        justify-content:center;

        gap:15px;

    }

    .hero{

        padding:
        0 8%
        80px;


        background:
    linear-gradient(
        rgba(0,0,0,.55),
        rgba(0,0,0,.75)
    ),
    url("images/hero.jpg");

    background-size:cover;
    background-position:center;

    }

    .hero h1{

        font-size:4rem;

    }

    section h2{

        font-size:2.4rem;

    }

    .gallery-grid{

        grid-template-columns:
        1fr;

    }

    .hero-scroll{

        display:none;

    }

    .service-card,
    .member-card,
    .demo-info{

        padding:30px;

    }

}

@media(max-width:500px){

    .hero h1{

        font-size:3rem;

    }

    .hero p{

        font-size:1rem;

    }

    section{

        padding:
        100px
        7%;

    }

}

@media(max-width:768px){

    .team-grid{

        grid-template-columns:1fr;

        gap:20px;

    }

    .team-card{

        width:100%;

    }

}