:root {
    --red: #c8102e;
    --dark: #0b0b0b;
    --light: #ffffff;
    --gray: #f6f6f6;
    --text: #242424;
}


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


html {
    scroll-behavior:smooth;
}


body {

    font-family:
    "Inter",
    Arial,
    Helvetica,
    sans-serif;

    color:var(--text);

    background:white;

}




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


header {

    position:fixed;

    top:0;

    width:100%;

    z-index:1000;


    display:flex;

    align-items:center;

    justify-content:space-between;


    padding:10px 50px;


    background:
    rgba(0,0,0,0.80);


    backdrop-filter:
    blur(12px);

}



.logo img {

    width:110px;
	height:auto;

}




nav {

    display:flex;

    gap:20px;

}



nav a {

    color:white;

    text-decoration:none;

    font-size:14px;

    font-weight:500;

	letter-spacing:.3px;

}



nav a:hover {

    color:var(--red);

}





.nav-buttons {

    display:flex;

    gap:15px;

}



.quote-btn {


    background:var(--red);

    color:white;

    padding:10px 22px;

    border-radius:30px;

    text-decoration:none;

    font-weight:700;

	font-size:14px;

	transition:.3s;

}

.quote-btn:hover {

background:white;
color:var(--red);

}

.primary-btn{

display:inline-flex;
align-items:center;
justify-content:center;
min-width:180px;
height:52px;
background:var(--red);
color:white;
border-radius:30px;
text-decoration:none;
font-weight:700;
transition:.3s;

}

.primary-btn:hover{
background:white;
color:var(--red);

}


.login-btn {


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

    color:white;

    padding:10px 22px;

    border-radius:30px;

    text-decoration:none;

	font-size:14px;

    font-weight:600;

	transition:.3s;
}

.login-btn:hover {

background:white;
color:#111;

}

.secondary-btn {

display:inline-flex;
align-items:center;
justify-content:center;
min-width:180px;
height:52px;
background:transparent;
color:white;
border:2px solid white;
border-radius:30px;
text-decoration:none;
font-weight:700;
transition:.3s;

}

.secondary-btn:hover {
background:white;
color:#111;

}

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


.hero {


height:100vh;


display:flex;

align-items:center;


padding:120px 70px 70px;



background:


linear-gradient(
90deg,
rgba(0,0,0,.8),
rgba(0,0,0,.35)
),


url("../images/fuel-hero.jpeg");



background-size:cover;

background-position:center;


}




.hero-content {


max-width:700px;


color:white;


}



.hero h1 {


font-size:52px;


line-height:1.15;


max-width:650px;


}



.hero p {


font-size:21px;


line-height:1.7;


margin-bottom:35px;


}




.hero-buttons {

display:flex;

gap:20px;

}






/* ==========================
 SECTIONS
========================== */


section {

padding:80px 60px;

}



.section-title {


text-align:center;


margin-bottom:60px;


}



.section-title h2 {


font-size:42px;


margin-bottom:15px;


}



.section-title p {


font-size:18px;

color:#666;


}



/* ==========================
 COMPANY
========================== */



.company-content {


display:grid;

grid-template-columns:1fr 1fr;


gap:50px;


align-items:center;


}



.company-content img {


width:100%;


height:400px;


object-fit:cover;


border-radius:20px;


}




.company-content p {


font-size:15px;

line-height:1.8;

margin-bottom:20px;


}




/* ==========================
 CARDS
========================== */


.cards {


display:grid;


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


gap:25px;


}



.card {


background:white;


padding:35px 25px;


border-radius:20px;


box-shadow:
0 15px 40px rgba(0,0,0,.08);


transition:.35s;


text-align:center;


}



.card:hover {


transform:
translateY(-10px);


border-bottom:
4px solid var(--red);


}




.card h3 {


font-size:22px;


margin-bottom:15px;


}




.card p {


color:#666;


line-height:1.6;


}




.gray-section {


background:
var(--gray);


}



/* ==========================
 QUOTE
========================== */


.quote-section {


background:


linear-gradient(
135deg,
#111,
#333
);


color:white;


text-align:center;
padding:90px 60px;


}



.quote-section h2 {


font-size:28px;

margin-bottom:20px;

color:white;


}

.quote-section p {
font-size:18px;
margin-bottom:35px;

}


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


footer {


background:#050505;


color:white;


padding:30px;


text-align:center;


}




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


@media(max-width:1000px){


header {

padding:15px 25px;

}


nav {

display:none;

}


.nav-buttons {

display:none;

}


.hero {

padding:30px;

}



.hero h1 {

font-size:42px;

}



.cards {


grid-template-columns:
1fr;


}



.company-content {


grid-template-columns:1fr;


}


}

/* Contact Section */

.contact-section {

background:
linear-gradient(
135deg,
#111,
#d3d3d3
);

color:white;
text-align:center;
padding:90px 60px;

}

.contact-section h2{
color:white;
font-size:28px;
margin-bottom:20px;

}

.contact-section p{
font-size:18px;
margin-bottom:35px;

}

.contact-section .primary-btn{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:180px;
height:52px;
background:var(--red);
color:white;
border-radius:30px;
text-decoration:none;
font-weight:700;

}