/* ==========================================
   VELOCITY RENT A CAR
   
   RESET + HEADER + HERO
========================================== */

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

body{

font-family:'Poppins',sans-serif;
background:#0b0f19;
color:#fff;
overflow-x:hidden;

}

html{

overflow-x:hidden;

}

img{

max-width:100%;
display:block;

}

a{

text-decoration:none;
color:inherit;

}

ul{

list-style:none;

}

.container{

width:90%;
max-width:1300px;
margin:auto;

}

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

header{

position:fixed;
top:0;
left:0;
width:100%;
padding:20px 0;
z-index:1000;

background:rgba(9,12,20,.35);
backdrop-filter:blur(15px);

transition:.4s;

}

header .container{

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

}

.logo{

font-size:30px;
font-weight:800;
letter-spacing:2px;
color:#3b82f6;
white-space:nowrap;

}

nav ul{

display:flex;
gap:35px;

}

nav a{

font-size:16px;
font-weight:500;
position:relative;
transition:.3s;

}

nav a::after{

content:"";
position:absolute;
left:0;
bottom:-8px;
width:0%;
height:2px;
background:#3b82f6;
transition:.35s;

}

nav a:hover::after{

width:100%;

}

.book-btn{

padding:14px 30px;
border-radius:50px;

background:#2563eb;

font-weight:700;

transition:.35s;
white-space:nowrap;

}

.book-btn:hover{

background:#3b82f6;

transform:translateY(-4px);

box-shadow:0 15px 35px rgba(37,99,235,.4);

}

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

.hero{

height:100vh;

background:

linear-gradient(rgba(6,10,18,.72),
rgba(6,10,18,.72)),

url("images/background.jpg");

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

display:flex;
justify-content:center;
align-items:center;
text-align:center;

}

.hero-content{

max-width:900px;

}

.hero h1{

font-size:78px;
font-weight:800;
line-height:1.1;
margin-bottom:25px;

}

.hero p{

font-size:22px;
color:#d7d7d7;
margin-bottom:45px;
line-height:1.8;

}

.hero-buttons{

display:flex;
justify-content:center;
gap:25px;
flex-wrap:wrap;

}

.btn-primary{

padding:18px 45px;

background:#2563eb;

border-radius:50px;

font-weight:700;

transition:.35s;

}

.btn-primary:hover{

transform:translateY(-5px);

background:#3b82f6;

box-shadow:0 18px 35px rgba(37,99,235,.4);

}

.btn-secondary{

padding:18px 45px;

border:2px solid #fff;

border-radius:50px;

transition:.35s;

}

.btn-secondary:hover{

background:#fff;

color:#111;

}

section{

padding:120px 0;

}

h2{

font-size:48px;
text-align:center;
margin-bottom:70px;
font-weight:800;

}

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

.stats{

background:#101827;

}

.stats .container{

display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;

}

.stat{

background:#162033;

padding:40px;

border-radius:18px;

text-align:center;

transition:.35s;

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

}

.stat:hover{

transform:translateY(-10px);

border-color:#3b82f6;

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

}

.stat h2{

font-size:46px;
color:#3b82f6;
margin-bottom:10px;

}

.stat p{

color:#d4d4d4;

font-size:17px;

}

/* ==========================================
  
   CARS + ABOUT + SERVICES
==========================================*/

/* ================= CARS ================= */

.cars{

background:#0b0f19;

}

.cars-grid{

width:90%;
max-width:1300px;
margin:auto;

display:grid;
grid-template-columns:repeat(3,1fr);
gap:35px;

}

.car-card{

background:rgba(22,32,51,.9);
border:1px solid rgba(255,255,255,.08);
border-radius:22px;
overflow:hidden;

transition:.4s;

backdrop-filter:blur(10px);

}

.car-card:hover{

transform:translateY(-12px);

border-color:#3b82f6;

box-shadow:0 25px 50px rgba(37,99,235,.25);

}

.car-card img{

width:100%;
height:230px;
object-fit:cover;

transition:.45s;

}

.car-card:hover img{

transform:scale(1.08);

}

.car-card h3{

font-size:26px;
padding:25px 25px 10px;

}

.car-card p{

padding:0 25px;
color:#bfc7d8;
margin-bottom:25px;

}

.car-card a{

display:inline-block;

margin:0 25px 30px;

padding:14px 34px;

background:#2563eb;

border-radius:40px;

font-weight:700;

transition:.35s;

}

.car-card a:hover{

background:#3b82f6;

transform:translateY(-4px);

}

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

.about{

background:#101827;

}

.about .container{

display:grid;
grid-template-columns:1fr 1fr;
gap:70px;
align-items:center;

}

.about h2{

text-align:left;
margin-bottom:25px;

}

.about p{

font-size:18px;
line-height:1.9;
color:#d0d5e1;

}

.features{

display:grid;
grid-template-columns:repeat(2,1fr);
gap:25px;

}

.features div{

background:#162033;

padding:35px;

border-radius:18px;

text-align:center;

transition:.35s;

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

}

.features div:hover{

transform:translateY(-10px);

border-color:#3b82f6;

box-shadow:0 18px 35px rgba(0,0,0,.35);

}

.features i{

font-size:45px;

color:#3b82f6;

margin-bottom:18px;

}

.features h3{

font-size:22px;

}

/* ================= SERVICES ================= */

.services{

background:#0b0f19;

}

.service-grid{

width:90%;
max-width:1300px;
margin:auto;

display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;

}

.service{

background:#162033;

padding:45px 30px;

border-radius:20px;

text-align:center;

transition:.35s;

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

}

.service:hover{

transform:translateY(-12px);

border-color:#3b82f6;

box-shadow:0 20px 40px rgba(37,99,235,.2);

}

.service i{

font-size:55px;

color:#3b82f6;

margin-bottom:22px;

}

.service h3{

font-size:24px;

}

/* ==========================================
   PART 3
   REVIEWS + CONTACT + FOOTER
==========================================*/

/* ================= REVIEWS ================= */

.reviews{

background:#101827;

}

.review-grid{

width:90%;
max-width:1300px;
margin:auto;

display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;

}

.review{

background:#162033;

padding:40px;

border-radius:20px;

text-align:center;

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

transition:.35s;

}

.review:hover{

transform:translateY(-12px);

border-color:#3b82f6;

box-shadow:0 20px 40px rgba(37,99,235,.25);

}

.review:first-line{

font-size:28px;
color:#FFD700;

}

.review p{

margin:20px 0;

color:#d0d5e1;

line-height:1.8;

}

.review h4{

color:#3b82f6;

font-size:18px;

}

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

.contact{

background:

linear-gradient(rgba(6,10,18,.82),
rgba(6,10,18,.82)),

url("images/rentacar.jpg");

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

text-align:center;

padding:140px 20px;

}

.contact h2{

font-size:54px;

margin-bottom:20px;

}

.contact p{

font-size:20px;

color:#d7d7d7;

margin-bottom:40px;

}

.contact-btn{

display:inline-block;

padding:18px 45px;

background:#2563eb;

border-radius:50px;

font-weight:700;

transition:.35s;

}

.contact-btn:hover{

background:#3b82f6;

transform:translateY(-5px);

box-shadow:0 18px 35px rgba(37,99,235,.35);

}

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

footer{

background:#070b12;

padding:45px 20px;

text-align:center;

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

}

footer p{

color:#9ca3af;

font-size:15px;

letter-spacing:1px;

}

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

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#101827;

}

::-webkit-scrollbar-thumb{

background:#2563eb;

border-radius:50px;

}

::-webkit-scrollbar-thumb:hover{

background:#3b82f6;

}

/* ================= EXTRA EFFECTS ================= */

.car-card,
.service,
.review,
.features div,
.stat{

cursor:pointer;

}

.car-card,
.service,
.review,
.features div,
.stat,
.book-btn,
.btn-primary,
.btn-secondary,
.contact-btn{

will-change:transform;

}

::selection{

background:#2563eb;
color:#fff;

}

/* ==========================================
   
   RESPONSIVE + ANIMATIONS + FINAL
==========================================*/

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

@keyframes fadeUp{

0%{
opacity:0;
transform:translateY(60px);
}

100%{
opacity:1;
transform:translateY(0);
}

}

@keyframes zoomIn{

0%{
opacity:0;
transform:scale(.92);
}

100%{
opacity:1;
transform:scale(1);
}

}

@keyframes float{

0%{
transform:translateY(0);
}

50%{
transform:translateY(-10px);
}

100%{
transform:translateY(0);
}

}

.hero-content h1{

animation:fadeUp .8s ease;

}

.hero-content p{

animation:fadeUp 1.1s ease;

}

.hero-buttons{

animation:fadeUp 1.4s ease;

}

.car-card{

animation:zoomIn .8s ease;

}

.service{

animation:zoomIn .9s ease;

}

.review{

animation:zoomIn 1s ease;

}

.stat{

animation:float 5s ease-in-out infinite;

}

/* =============== HOVER EFFECTS =============== */

.logo{
margin-right:0;
transition:.35s;

}

.logo:hover{

letter-spacing:4px;

color:#60a5fa;

}

.car-card:hover h3{

color:#60a5fa;

}

.service:hover h3{

color:#60a5fa;

}

.review:hover h4{

color:#60a5fa;

}

/* =============== IMAGE EFFECTS =============== */

.car-card img{

filter:brightness(.95);

}

.car-card:hover img{

filter:brightness(1.1);

}

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

@media(max-width:1200px){

.hero h1{

font-size:64px;

}

.stats .container{

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

}

.cars-grid{

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

}

.service-grid{

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

}

.review-grid{

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

}

.about .container{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

header .container{

flex-direction:row;
gap:14px;

}

nav ul{

flex-wrap:wrap;
justify-content:center;
gap:18px;

}

.hero{

padding:140px 20px 100px;

}

.hero h1{

font-size:44px;

}

.hero p{

font-size:17px;

}

.hero-buttons{

flex-direction:column;

align-items:center;

}

.btn-primary,
.btn-secondary{

width:100%;
max-width:320px;
text-align:center;

}

.stats .container{

grid-template-columns:1fr;

}

.cars-grid{

grid-template-columns:1fr;

}

.features{

grid-template-columns:1fr;

}

.service-grid{

grid-template-columns:1fr;

}

.review-grid{

grid-template-columns:1fr;

}

section{

padding:90px 20px;

}

h2{

font-size:36px;

}

.contact h2{

font-size:40px;

}

.contact p{

font-size:17px;

}

}

@media(max-width:500px){

.logo{

font-size:24px;

}

.hero h1{

font-size:34px;

line-height:1.2;

}

.hero p{

font-size:15px;

}

.book-btn{

padding:12px 24px;

}

.btn-primary,
.btn-secondary{

padding:15px 30px;

}

.car-card h3{

font-size:22px;

}

.contact-btn{

padding:15px 35px;

}

footer p{

font-size:14px;

}

}

.back-btn{
position:fixed;
top:92px;
left:30px;
display:flex;
align-items:center;
gap:10px;
padding:14px 24px;
background:#fff;
color:#111;
border-radius:50px;
font-weight:600;
box-shadow:0 10px 25px rgba(0,0,0,.15);
z-index:9999;
transition:.3s;
}

.back-btn:hover{
background:#111;
color:#fff;
transform:translateY(-4px);
}

.menu-toggle{
display:none;
color:#fff;
}

@media (max-width:768px){

header .container{
display:flex;
align-items:center;
justify-content:space-between;
flex-direction:row;
gap:14px;
min-height:48px;
}

.logo{
font-size:clamp(18px,4.5vw,24px);
letter-spacing:1px;
max-width:42vw;
overflow:hidden;
text-overflow:ellipsis;
flex-shrink:1;
}

nav{
display:none;
}

.menu-toggle{
display:flex;
font-size:30px;
cursor:pointer;
line-height:1;
flex-shrink:0;
order:-1;
color:#fff;
}

.book-btn{
padding:12px 22px;
font-size:14px;
flex-shrink:0;
}

.back-btn{
top:76px;
left:20px;
padding:10px 18px;
font-size:15px;
max-width:calc(100vw - 40px);
}

nav.active{
display:flex;
flex-direction:column;
position:absolute;
top:128px;
left:5%;
width:100%;
max-width:90%;
background:#0b0f19;
padding:20px;
border-radius:12px;
z-index:1001;
}

nav.active ul{
display:flex;
flex-direction:column;
align-items:center;
gap:20px;
width:100%;
}

}