*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial, Helvetica, sans-serif;
}


body{
background:white;
color:#222;
}


html{
scroll-behavior:smooth;
}



/* HEADER */


header{

height:90px;
background:#071b2c;

display:flex;
align-items:center;
justify-content:space-between;

padding:0 8%;

position:sticky;
top:0;
z-index:1000;

}


.logo{

color:white;
font-size:28px;
font-weight:900;

}


.logo span{

display:block;
font-size:12px;
color:#20c997;
letter-spacing:2px;

}



nav{

display:flex;
gap:30px;
align-items:center;

}


nav a{

color:white;
text-decoration:none;

}


nav a:hover{

color:#20c997;

}


.nav-btn{

background:#20c997;
padding:14px 25px;
border-radius:5px;

}


.menu-toggle{

display:none;
color:white;
font-size:30px;

}




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


.hero{

height:92vh;

background:

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

url("images/truck.jpg");


background-size:cover;

background-position:center;


display:flex;

align-items:center;

position:relative;

overflow:hidden;

}




.hero-content{

max-width:900px;

margin-left:8%;

color:white;

animation:heroShow 1s ease;

}



.hero-badge{

display:inline-block;

background:#20c997;

padding:12px 25px;

border-radius:50px;

font-size:14px;

font-weight:bold;

margin-bottom:25px;

}




.hero h1{

font-size:65px;

line-height:1.1;

font-weight:900;

margin-bottom:25px;

text-transform:uppercase;

}




.hero p{

font-size:21px;

line-height:1.8;

max-width:750px;

margin-bottom:35px;

color:#eee;

}




.btn{

display:inline-block;

background:#20c997;

color:white;

padding:16px 35px;

border-radius:5px;

text-decoration:none;

font-weight:bold;

transition:.3s;

}



.btn:hover{

transform:translateY(-5px);

}



.btn-outline{

background:transparent;

border:2px solid white;

margin-left:15px;

}



.hero::after{

content:"";

position:absolute;

bottom:0;

left:0;

height:120px;

width:100%;

background:linear-gradient(
transparent,
#071b2c
);

}




@keyframes heroShow{


from{

opacity:0;

transform:translateY(50px);

}


to{

opacity:1;

transform:translateY(0);

}


}
/* =========================
 TRUST
========================= */


.trust{

display:flex;

justify-content:center;

gap:25px;

padding:40px 8%;

background:#f5f5f5;

flex-wrap:wrap;

}



.trust-box{

background:white;

width:220px;

padding:25px;

text-align:center;

border-radius:10px;

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

}



.trust-box h3{

color:#071b2c;

margin-bottom:10px;

}



.trust-box p{

color:#20c997;

font-weight:bold;

}





/* STATS */


.stats{

background:#20c997;

display:flex;

justify-content:center;

gap:80px;

padding:50px;

text-align:center;

}



.stats h2{

font-size:45px;

color:white;

}



.stats p{

color:white;

font-size:18px;

}







/* SECTIONS */


.section{

padding:80px 8%;

}



.section.dark{

background:#071b2c;

color:white;

}



.section-title{

text-align:center;

font-size:40px;

margin-bottom:50px;

color:#071b2c;

}



.dark .section-title{

color:white;

}






/* CARDS */


.cards{

display:grid;

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

gap:30px;

}



.card{

background:white;

padding:35px;

border-radius:12px;

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

transition:.3s;

}



.card:hover{

transform:translateY(-10px);

}



.card h3{

color:#071b2c;

margin-bottom:15px;

font-size:22px;

}



.card p{

color:#555;

line-height:1.7;

}





/* VEHICLES */


.vehicle-grid{

display:grid;

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

gap:20px;

}



.vehicle{

height:150px;

background:#071b2c;

color:white;

display:flex;

align-items:center;

justify-content:center;

border-radius:10px;

font-size:20px;

font-weight:bold;

transition:.3s;

}



.vehicle:hover{

background:#20c997;

transform:scale(1.05);

}






/* SAFETY */


.safety{

max-width:900px;

margin:auto;

}



.safety-text h2{

font-size:40px;

margin-bottom:25px;

}



.safety-text p{

font-size:20px;

line-height:1.7;

}



.safety-list{

margin-top:30px;

}



.safety-list p{

background:white;

color:#071b2c;

padding:15px;

margin:10px 0;

border-radius:5px;

font-weight:bold;

}





/* REVIEWS */


.testimonials{

display:grid;

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

gap:30px;

}



.review{

background:white;

padding:30px;

border-radius:10px;

box-shadow:0 10px 20px rgba(0,0,0,.1);

}



.stars{

color:#20c997;

font-size:25px;

margin-bottom:15px;

}






/* FAQ */


.faq{

max-width:900px;

margin:auto;

}



.faq-item{

background:#f5f5f5;

padding:25px;

margin-bottom:20px;

border-radius:10px;

}



.faq-item h3{

color:#071b2c;

margin-bottom:10px;

}



.faq-item p{

color:#555;

line-height:1.6;

}






/* FOOTER */


footer{

background:#020d18;

color:white;

text-align:center;

padding:50px 8%;

}



footer a{

color:#20c997;

text-decoration:none;

}






/* MOBILE */


@media(max-width:900px){


header{

padding:0 5%;

}



.menu-toggle{

display:block;

}



nav{

display:none;

position:absolute;

top:90px;

left:0;

width:100%;

background:#071b2c;

flex-direction:column;

padding:30px;

}



nav.active{

display:flex;

}



.hero h1{

font-size:40px;

}



.hero-content{

margin:0 5%;

}



.cards{

grid-template-columns:1fr;

}



.vehicle-grid{

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

}



.testimonials{

grid-template-columns:1fr;

}



.stats{

flex-direction:column;

gap:30px;

}



.section{

padding:60px 5%;

}



}
/* =========================
   QUOTE PAGE
========================= */


.quote-section{

padding:80px 8%;

background:#f5f5f5;

display:grid;

grid-template-columns:1fr 1fr;

gap:50px;

align-items:center;

}



.quote-info h1{

font-size:45px;

color:#071b2c;

margin-bottom:25px;

}



.quote-info p{

font-size:18px;

line-height:1.7;

}



.quote-points{

margin-top:30px;

}



.quote-points p{

background:#071b2c;

color:white;

padding:15px;

margin-bottom:12px;

border-radius:5px;

}




.quote-form{

background:white;

padding:40px;

border-radius:15px;

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

}



.quote-form h2{

text-align:center;

color:#071b2c;

margin-bottom:30px;

font-size:32px;

}



.quote-form label{

display:block;

font-weight:bold;

margin-top:15px;

margin-bottom:7px;

}



.quote-form input,
.quote-form select,
.quote-form textarea{

width:100%;

padding:15px;

border:1px solid #ddd;

border-radius:5px;

font-size:16px;

}



.quote-form textarea{

height:120px;

resize:none;

}



.quote-form button{

width:100%;

border:none;

margin-top:25px;

cursor:pointer;

}




@media(max-width:900px){


.quote-section{

grid-template-columns:1fr;

}


.quote-info h1{

font-size:35px;

}


}
/* =========================
 CONTACT PAGE
========================= */


.contact-section{

padding:80px 8%;

background:#f5f5f5;

display:grid;

grid-template-columns:1fr 1fr;

gap:50px;

align-items:center;

}



.contact-info h1{

font-size:45px;

color:#071b2c;

margin-bottom:20px;

}



.contact-info p{

line-height:1.7;

font-size:18px;

}



.contact-box{

background:#071b2c;

color:white;

padding:20px;

margin-top:20px;

border-radius:8px;

}



.contact-box h3{

color:#20c997;

margin-bottom:10px;

}



.contact-form{

background:white;

padding:40px;

border-radius:15px;

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

}



.contact-form h2{

text-align:center;

color:#071b2c;

margin-bottom:30px;

}



.contact-form input,
.contact-form textarea{

width:100%;

padding:15px;

margin-bottom:15px;

border:1px solid #ddd;

border-radius:5px;

font-size:16px;

}



.contact-form textarea{

height:130px;

resize:none;

}



.contact-form button{

width:100%;

border:none;

cursor:pointer;

}



@media(max-width:900px){


.contact-section{

grid-template-columns:1fr;

}


}
.contact-box a{

color:white;

text-decoration:none;

}


.contact-box a:hover{

color:#20c997;

}
.made-by {
    display: block;
    margin-top: 12px;
    font-size: 11px;
    color: #888;
    text-align: center;
}