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


html{
scroll-behavior:smooth;
}


body{

background:#030303;

color:white;

}



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


nav{

height:100px;

display:flex;

justify-content:space-between;

align-items:center;

padding:0 60px;

background:#050505;

position:sticky;

top:0;

z-index:999;

box-shadow:0 5px 25px #000;

}



.brand{

display:flex;

align-items:center;

gap:20px;

}



.logo{

width:90px;

height:90px;

object-fit:contain;

}



.brand h2{

color:#d4af37;

font-size:25px;

letter-spacing:5px;

}



.brand p{

color:#d4af37;

font-size:15px;

}



.menu a{

background:none;

color:white;

padding:0;

margin:0 18px;

font-size:17px;

}



.menu a:hover{

color:#d4af37;

}





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


.hero{

min-height:650px;


background:

linear-gradient(

90deg,

#000 35%,

rgba(0,0,0,.75)

),

url("images/crysta.png");


background-size:55%;

background-repeat:no-repeat;

background-position:right center;


display:flex;

align-items:center;

padding-left:80px;

}



.hero h1{

font-size:65px;

line-height:1.2;

color:#d4af37;

letter-spacing:2px;

}



.hero p{

font-size:24px;

margin:30px 0;

}



a{

background:#d4af37;

color:black;

text-decoration:none;

font-weight:bold;

padding:15px 35px;

border-radius:35px;

display:inline-block;

transition:.3s;

}



a:hover{

transform:scale(1.08);

box-shadow:0 0 20px #d4af37;

}







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


section{

padding:80px 50px;

text-align:center;

}



section h2{

font-size:35px;

margin-bottom:35px;

}




/* ================= GOOGLE REVIEW ================= */



.box{

max-width:700px;

margin:auto;

padding:50px;

background:#111;

border-radius:25px;

border:1px solid #d4af37;

}


.box h1{

font-size:50px;

color:#d4af37;

}





/* ================= CAR GRID ================= */



.grid{

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(300px,1fr));

gap:35px;

}



.car{

background:#111;

border-radius:25px;

overflow:hidden;

border:1px solid #333;

transition:.4s;

}



.car:hover{

transform:translateY(-12px);

border-color:#d4af37;

}



.car img{

width:100%;

height:230px;

object-fit:cover;

}



.car h3{

font-size:25px;

color:#d4af37;

margin-top:20px;

}



.car p{

font-size:18px;

margin:15px;

}



.car a{

margin-bottom:25px;

}






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



.about{

background:#101010;

}



.about p{

font-size:22px;

line-height:45px;

}





/* ================= MAP ================= */


iframe{

width:90%;

height:350px;

border:0;

border-radius:25px;

}





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



footer{

padding:50px;

text-align:center;

background:#111;

}



footer h2{

color:#d4af37;

margin-bottom:20px;

}






/* ================= WHATSAPP FLOAT ================= */



.whatsapp{

position:fixed;

right:30px;

bottom:30px;

height:70px;

width:70px;

background:#25D366;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:28px;

z-index:9999;

}






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


@media(max-width:768px){


nav{

height:auto;

padding:20px;

flex-direction:column;

}


.brand{

flex-direction:column;

gap:5px;

text-align:center;

}


.logo{

width:95px;

height:95px;

}


.menu{

margin-top:20px;

}


.menu a{

font-size:14px;

margin:8px;

}



.hero{

padding:70px 20px;

text-align:center;

justify-content:center;

background-size:100%;

background-position:bottom;

}


.hero h1{

font-size:40px;

}


.hero p{

font-size:20px;

}



}

/* HERO SLIDER */


.slider{

animation:changeCar 15s infinite;

}



@keyframes changeCar{


0%{

background:
linear-gradient(90deg,#000 35%,rgba(0,0,0,.75)),
url("images/crysta.png");

background-size:55%;
background-repeat:no-repeat;
background-position:right;

}



33%{

background:
linear-gradient(90deg,#000 35%,rgba(0,0,0,.75)),
url("images/scorpio.png");

background-size:55%;
background-repeat:no-repeat;
background-position:right;

}



66%{

background:
linear-gradient(90deg,#000 35%,rgba(0,0,0,.75)),
url("images/xl6.png");

background-size:55%;
background-repeat:no-repeat;
background-position:right;

}


100%{

background:
linear-gradient(90deg,#000 35%,rgba(0,0,0,.75)),
url("images/crysta.png");

background-size:55%;
background-repeat:no-repeat;
background-position:right;

}


}




/* STATS */


.stats{

display:flex;

gap:30px;

margin-top:40px;

}



.stats div{

background:#111;

border:1px solid #d4af37;

padding:20px 35px;

border-radius:20px;

text-align:center;

}



.stats h2{

color:#d4af37;

}



.stats p{

font-size:15px;

}




@media(max-width:768px){


.stats{

flex-direction:column;

}


}

/* CUSTOMER REVIEWS */


.review-grid{

display:grid;

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

gap:30px;

}


.review{

background:#111;

padding:30px;

border-radius:25px;

border:1px solid #333;

}


.review:hover{

border-color:#d4af37;

}


.review h3{

color:#d4af37;

font-size:30px;

}




/* BOOKING FORM */


.booking{

background:#080808;

}



form{

max-width:600px;

margin:auto;

display:flex;

flex-direction:column;

gap:20px;

}



input,
select,
textarea{

padding:18px;

background:#111;

border:1px solid #d4af37;

border-radius:15px;

color:white;

font-size:16px;

}



textarea{

height:120px;

}



button{

background:#d4af37;

border:none;

padding:18px;

border-radius:30px;

font-size:18px;

font-weight:bold;

cursor:pointer;

}



button:hover{

transform:scale(1.05);

}


#loader{

position:fixed;

top:0;

left:0;

width:100%;

height:100vh;

background:#000;

display:flex;

justify-content:center;

align-items:center;

z-index:99999;

}


#loader img{

width:160px;

animation:pulse 1.5s infinite;

}


@keyframes pulse{

0%{
transform:scale(1);
opacity:0.7;
}

50%{
transform:scale(1.1);
opacity:1;
}

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

}


@keyframes pulse{

50%{

transform:scale(1.2);

}

}

.seo{

background:#050505;

padding:50px;

}


.seo p{

max-width:900px;

margin:auto;

line-height:30px;

color:#bbb;

}

.booking{
padding:70px 20px;
text-align:center;
background:#000;
}

.booking h2{
font-size:36px;
margin-bottom:30px;
}


.booking form{
max-width:650px;
margin:auto;
}


.form-row{
display:flex;
gap:15px;
}


.booking input,
.booking select,
.booking textarea{

width:100%;

background:#111;

border:1px solid #d4af37;

color:white;

padding:18px;

margin-bottom:15px;

border-radius:15px;

font-size:16px;

box-sizing:border-box;

}


.booking textarea{

height:120px;

resize:none;

}


.booking button{

width:100%;

background:#d4af37;

border:none;

padding:18px;

border-radius:30px;

font-size:18px;

font-weight:bold;

cursor:pointer;

}


@media(max-width:700px){

.form-row{

flex-direction:column;

}

}

.footer{
background:#070b14;
padding:50px 8% 25px;
color:white;
}


.footer-box{
display:grid;
grid-template-columns:1.8fr 1fr 1fr 1.4fr;
gap:50px;
align-items:start;
}


.footer-brand h2{
color:#d4af37;
font-size:24px;
letter-spacing:2px;
}


.tagline{
color:#d4af37;
margin:10px 0;
}


.footer p{
color:#b9b9b9;
line-height:1.6;
}


.footer h3{
margin-bottom:15px;
}


.copyright{
border-top:1px solid #333;
margin-top:35px;
padding-top:20px;
text-align:center;
color:#999;
}


@media(max-width:768px){

.footer-box{
grid-template-columns:1fr;
gap:25px;
}

}

.footer a{
display:block;
color:#b9b9b9;
text-decoration:none;

margin:10px 0;

padding:0;

background:none;

border:none;

transition:0.3s;
}


.footer a:hover{

color:#d4af37;

padding-left:8px;

}

.footer a::before{

content:"› ";

color:#d4af37;

}