*{margin:0;padding:0;box-sizing:border-box;font-family: Poppins, Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;}
html{scroll-behavior:smooth}
body{
  background:#f1f5f9;
  color:#0f172a;
  overflow-x:hidden;
  opacity:0;
  transition:.8s;
}
body.loaded{opacity:1}

/* TOP SCROLL LOADER */
#topLoader{
  position:fixed;
  top:0;left:0;
  height:4px;
  width:0%;
  background:linear-gradient(90deg,#22c55e,#38bdf8,#facc15);
  z-index:10001;
}

/* PAGE LOADER */
#loader{
  position:fixed;
  inset:0;
  background:linear-gradient(135deg,#020617,#0f172a);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:10000;
  transition:.8s;
}
#loader.hide{opacity:0;visibility:hidden}
.loader-box{text-align:center;color:#fff}
.car{font-size:48px;animation:bounce .8s infinite alternate}
@keyframes bounce{to{transform:translateY(-6px)}}
.road{
  width:220px;height:6px;
  background:#334155;
  margin:12px auto;
  border-radius:10px;
  overflow:hidden;
  position:relative
}
.road::after{
  content:"";
  position:absolute;
  width:40px;height:100%;
  background:#facc15;
  animation:road 1s linear infinite
}
@keyframes road{from{left:-40px}to{left:220px}}

/* NAV */
nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:15px 25px;
  background:#020617;
  color:#fff;
  position:sticky;
  top:0;
  z-index:1000
}
.logo-area{display:flex;align-items:center;gap:10px;font-weight:700}
.logo-area img{height:42px}
.menu-btn{font-size:26px;cursor:pointer;display:none}
nav ul{list-style:none;display:flex;gap:18px}
nav a{
  color:#fff;
  text-decoration:none;
  padding:8px 14px;
  border-radius:18px
}
nav a:hover{background:#1e293b}

@media(max-width:768px){
.menu-btn{display:block}
nav ul{
  position:absolute;
  top:70px;left:0;
  width:100%;
  background:#020617;
  flex-direction:column;
  display:none;
  align-items:center;
  padding:15px 0
}
nav ul.show{display:flex}
}

/* HERO */
.hero{
  padding:120px 20px;
  background:linear-gradient(135deg,#020617,#0f172a);
  color:#fff;
  text-align:center
}
.hero h1{font-size:44px}
#typing{
  margin-top:15px;
  font-size:22px;
  color:#38bdf8;
  min-height:28px;
}

/* SECTIONS */
.section{padding:80px 20px}
.container{
  max-width:1100px;
  margin:auto;
  padding:60px 30px;
  border-radius:28px;
  background:#fff;
  opacity:0;
  transform:translateY(60px);
  transition:.8s;
}
.container.show{opacity:1;transform:none}

.about-section{background:#e0f2fe; font-size: 16px;font-weight: 600;color: #000000;text-align: center;margin-bottom: 12px;position: relative;}
.pricing-section{background:#fef3c7}
.faq-section{background:#f0fdf4}
.contact-section{background:#dcfce7}

h2{text-align:center;margin-bottom:25px}

/* SLIDER */
/*
.slider-wrapper{overflow:hidden;border-radius:12px;background:#f9f9f9;padding:10px 0;margin-bottom:12px}
.vehicle-slider{display:flex;gap:12px;transition:transform 3s ease-in-out}
.vehicle-card{min-width:250px;flex-shrink:0;display:flex;justify-content:center;align-items:center;background:#fff;border-radius:12px;box-shadow:0 4px 16px rgba(0,0,0,0.06);padding:10px;transition: transform 0.3s ease, box-shadow 0.3s ease}
.slide img{width:100%;height:200px;object-fit:cover}
.slide:hover{transform: translateY(-6px) scale(1.05); box-shadow: 0 12px 24px rgba(0,0,0,0.2);} */

/* SLIDER NEW*/
/* ===== CARD BACKGROUND ===== */
.slider-card{
  max-width:1100px;
  margin:auto;
  background:#e5e5e5;
  padding:15px;
  border-radius:14px;
  box-shadow:0 8px 20px rgba(0,0,0,.2);
}

/* ===== SLIDER ===== */
.slider{
  overflow:hidden;
  border-radius:12px;
  background:#ccc;
}

/* ===== TRACK ===== */
.slides{
  display:flex;
  transition:transform 0.7s ease-in-out;
}

/* ===== EACH SLIDE ===== */
.slide{
  flex:0 0 33.3333%;     /* 3 IMAGES DESKTOP */
  height:220px;
  padding:6px;
}

/* ===== IMAGE ===== */
.slide img{
  width:100%;
  height:100%;
  object-fit:cover;     /* FULL COVER */
  border-radius:10px;
  transition:transform .5s ease;
}

/* ===== ZOOM ===== */
.slide:hover img{
  transform:scale(1.12);
}

/* ===== MOBILE ===== */
@media(max-width:700px){
  .slide{
    flex:0 0 100%;     /* 1 IMAGE MOBILE */
    height:200px;
  }
}

/* PRICING */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:25px
}
.card{
  padding:35px;
  border-radius:24px;
  color:#fff;
  font-weight:700;
  text-align:center;
  transition:.4s
}
.card:hover{transform:translateY(-10px)}
.p1{background:#818cf8}
.p2{background:#22c55e}
.p3{background:#f87171}
.p4{background:#6b7280}

.action-btns{
  display:flex;
  gap:10px;
  margin-top:15px
}
.action-btns a{
  flex:1;
  padding:12px;
  border-radius:30px;
  font-size:14px;
  font-weight:700;
  text-decoration:none;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  color:#fff;
  transition:.3s
}
.wa-btn{background:#25d366}
.call-btn{background:#38bdf8}
.action-btns a:hover{transform:scale(1.1)}

/* FAQ */
.faq-item{
  background:#fff;
  margin-bottom:15px;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 8px 20px rgba(0,0,0,.08)
}
.faq-question{
  padding:18px;
  background:linear-gradient(135deg,#fde047,#facc15);
  cursor:pointer;
  font-weight:700;
  display:flex;
  justify-content:space-between;
  align-items:center
}
.faq-question i{transition:.4s}
.faq-answer{
  max-height:0;
  overflow:hidden;
  padding:0 18px;
  background:#dcfce7;
  transition:.5s ease
}
.faq-item.active .faq-answer{
  max-height:200px;
  padding:18px
}
.faq-item.active .faq-question i{
  transform:rotate(180deg)
}

/* CONTACT */
.contact-layout{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:25px
}
.map{height:320px;border-radius:22px;overflow:hidden}
form{background:#fff;padding:25px;border-radius:22px}
input,textarea{
  width:100%;
  padding:14px;
  margin-bottom:14px;
  border-radius:12px;
  border:1px solid #ccc
}
button{
  width:100%;
  padding:14px;
  background:#25d366;
  color:#fff;
  border:none;
  border-radius:30px;
  font-weight:700;
  cursor:pointer
}
button:hover{background:#1ebe5d}

@media(max-width:768px){
.contact-layout{grid-template-columns:1fr}
}

/* FLOATING BUTTONS */
#whatsappBtn,#scrollTop{
  position:fixed;
  right:20px;
  width:55px;
  height:55px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  cursor:pointer;
  z-index:999;
  box-shadow:0 6px 20px rgba(0,0,0,.3)
}
#whatsappBtn{
  bottom:20px;
  background:#25d366;
  color:#fff;
  animation:pulse 2s infinite
}
#scrollTop{
  bottom:90px;
  background:#38bdf8;
  color:#fff;
  display:none
}
@keyframes pulse{
  0%{transform:scale(1)}
  50%{transform:scale(1.1)}
  100%{transform:scale(1)}
}

/* FOOTER */
footer{
  background:#020617;
  color:#fff;
  text-align:center;
  padding:22px;
  font-size:14px
}
footer a{
  color:#38bdf8;
  text-decoration:none;
  margin:0 4px
}
footer a:hover{text-decoration:underline}
/* SOCIAL MEDIA ICONS */
.social-icons{
  display:flex;
  justify-content:center;
  gap:14px;
  margin-top:15px;
}

.social-icons a{
  width:42px;
  height:42px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  color:#fff;
  text-decoration:none;
  transition:.3s;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
}

/* Brand colors */
.social-icons .wa{background:#25d366}
.social-icons .fb{background:#1877f2}
.social-icons .ig{background:linear-gradient(45deg,#f58529,#dd2a7b,#8134af)}
.social-icons .tw{background:#000}
.social-icons .yt{background:#ff0000}

/* Hover effect */
.social-icons a:hover{
  transform:translateY(-6px) scale(1.1);
  box-shadow:0 10px 25px rgba(0,0,0,.35);
}