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

html{
  scroll-behavior:smooth;
}

body{
  background:#050505;
  color:white;
  font-family:Arial, Helvetica, sans-serif;
  overflow-x:hidden;
}

/* HEADER */

.header{
  width:100%;
  height:100px;
  padding:0 6%;
  display:flex;
  justify-content:space-between;
  align-items:center;

  position:fixed;
  top:0;
  left:0;

  z-index:1000;

  background:rgba(8,8,8,.55);
  backdrop-filter:blur(12px);

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

.logo img{
  width:240px;
}

.nav{
  display:flex;
  gap:35px;
}

.nav a{
  color:#ddd;
  text-decoration:none;
  font-size:14px;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
  transition:.3s;
}

.nav a:hover{
  color:#e30613;
}

.phone-btn{
  background:#e30613;
  color:white;
  text-decoration:none;
  padding:15px 24px;
  border-radius:4px;
  font-weight:900;
  transition:.3s;
}

.phone-btn:hover{
  transform:translateY(-3px);
  box-shadow:0 0 25px rgba(227,6,19,.45);
}

/* HERO */

.hero{
    isolation:isolate;
  min-height:100vh;

  display:flex;
  align-items:center;

  padding:0 6%;

  position:relative;
  overflow:hidden;

  background:
  linear-gradient(
    90deg,
    rgba(0,0,0,.95) 0%,
    rgba(0,0,0,.78) 38%,
    rgba(0,0,0,.50) 70%,
    rgba(0,0,0,.88) 100%
  ),
  url("images/garage.png");

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

.hero::before{
    animation:pulseGlow 6s infinite ease-in-out;
    
  content:"";
  position:absolute;

  width:600px;
  height:600px;

  background:
  radial-gradient(circle,
  rgba(227,6,19,.28),
  transparent 70%);

  right:-120px;
  top:50%;

  transform:translateY(-50%);
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;

  background:
  linear-gradient(
    to bottom,
    rgba(0,0,0,.15),
    rgba(0,0,0,.45)
  );

  z-index:1;
}

.hero-content{
  max-width:720px;
  position:relative;
  z-index:2;

  animation:fadeUp 1s ease;
}

.tag{
  color:#e30613;
  text-transform:uppercase;
  letter-spacing:4px;
  font-weight:900;
  margin-bottom:22px;
}

.hero h1{
    background:linear-gradient(
to bottom,
#ffffff,
#cfcfcf
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
  font-size:96px;
  line-height:.9;
  font-weight:1000;
  letter-spacing:-4px;

  text-shadow:0 0 30px rgba(227,6,19,.22);
}

.hero h1 span{
  color:#e30613;
}

.hero h2{
  margin-top:18px;
  font-size:28px;
  text-transform:uppercase;
  color:#ddd;
}

.desc{
  margin-top:26px;

  font-size:20px;
  line-height:1.7;

  color:#cfcfcf;

  max-width:580px;
}

.hero-buttons{
  display:flex;
  gap:18px;
  margin-top:40px;
}

.btn{
  display:inline-block;

  padding:18px 30px;

  text-decoration:none;

  font-weight:900;
  text-transform:uppercase;

  border-radius:4px;

  transition:.3s;
}

.btn.red{
  background:#e30613;
  color:white;
}

.btn.red:hover{
  transform:translateY(-4px);
  box-shadow:0 0 30px rgba(227,6,19,.5);
}

.btn.outline{
  border:2px solid #e30613;
  color:white;
  background:rgba(0,0,0,.35);
}

.btn.outline:hover{
  background:#e30613;
  transform:translateY(-4px);
}

/* SERVICES */

.services{
  padding:110px 6%;
  background:#080808;
}

.section-tag{
  color:#e30613;
  text-transform:uppercase;
  letter-spacing:4px;
  text-align:center;
  font-weight:900;
  margin-bottom:20px;
}

.section-title{
  text-align:center;
  font-size:52px;
  margin-bottom:55px;
}

.service-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:25px;
}

.card{
    position:relative;
overflow:hidden;
  background:
  linear-gradient(180deg,#151515,#090909);

  border:1px solid #242424;
  border-bottom:3px solid #e30613;

  padding:40px 30px;

  transition:.35s;
}
.card::before{
  content:"";
  position:absolute;

  width:220px;
  height:220px;

  background:
  radial-gradient(circle,
  rgba(227,6,19,.16),
  transparent 70%);

  top:-80px;
  right:-80px;

  transition:.4s;
}

.card:hover::before{
  transform:scale(1.2);
}

.card:hover{
  transform:translateY(-10px);

  box-shadow:
  0 0 35px rgba(227,6,19,.16);

  border-color:#e30613;
}

.card-icon{
  font-size:46px;
  margin-bottom:20px;
}

.card h3{
  font-size:22px;
  margin-bottom:15px;
  text-transform:uppercase;
}

.card p{
  color:#bbb;
  line-height:1.6;
}

/* ABOUT */

.about{
  padding:110px 6%;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;

  background:#0d0d0d;
}

.about-image{
  height:500px;

  background:
  linear-gradient(rgba(0,0,0,.2),
  rgba(0,0,0,.55)),
  url("images/garage.png");

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

  border:1px solid #242424;
}

.about-text h2{
  font-size:52px;
  margin-bottom:25px;
}

.about-text p{
  color:#cfcfcf;
  font-size:18px;
  line-height:1.8;
}

.features{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;

  margin-top:35px;
}

.feature{
  background:#121212;
  padding:18px;
  border-left:3px solid #e30613;
}

.feature strong{
  display:block;
  margin-bottom:8px;
}

.feature span{
  color:#aaa;
}

/* GALLERY */

.gallery{
  padding:110px 6%;
  background:#070707;
}

.gallery-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}

.gallery-grid img{
  width:100%;
  height:280px;

  object-fit:cover;

  border:1px solid #242424;

  filter:
  brightness(.78)
  contrast(1.1);

 transition:.5s;
}

.gallery-grid img:hover{
  transform:scale(1.06);
  filter:
  brightness(1)
  contrast(1.1);
}

/* CONTACT */

.contact{
  padding:110px 6%;

  background:
  linear-gradient(rgba(0,0,0,.88),
  rgba(0,0,0,.92)),
  url("images/garage.png");

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

.contact-box{
  max-width:850px;
  margin:auto;

  background:rgba(8,8,8,.9);

  border:1px solid #242424;

  padding:45px;

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

.contact-box h3{
  font-size:32px;
  margin-bottom:18px;
}

.contact-box p{
  margin-bottom:12px;
  color:#ccc;
  font-size:18px;
}

/* FOOTER */

footer{
  padding:40px 6%;
  text-align:center;
  background:#030303;
  border-top:1px solid #1b1b1b;
}

footer img{
  width:180px;
  margin-bottom:18px;
}

footer p{
  color:#777;
}

/* MOBILE BUTTON */

.mobile-call{
  display:none;
}

/* ANIMATION */

@keyframes fadeUp{

  from{
    opacity:0;
    transform:translateY(40px);
  }

  to{
    opacity:1;
    transform:translateY(0);
  }

}

/* SCROLLBAR */

::-webkit-scrollbar{
  width:10px;
}

::-webkit-scrollbar-track{
  background:#080808;
}

::-webkit-scrollbar-thumb{
  background:#e30613;
}

/* MOBILE */

@media(max-width:950px){

  .header{
    height:auto;
    padding:18px 5%;
    flex-direction:column;
    gap:18px;
  }

  .logo img{
    width:210px;
  }

  .nav{
    gap:16px;
    flex-wrap:wrap;
    justify-content:center;
  }

  .phone-btn{
    display:none;
  }

  .hero{
    padding:140px 6% 80px;
  }

  .hero h1{
    font-size:58px;
  }

  .hero h2{
    font-size:21px;
  }

  .desc{
    font-size:17px;
  }

  .hero-buttons{
    flex-direction:column;
    max-width:260px;
  }

  .service-grid,
  .gallery-grid,
  .about{
    grid-template-columns:1fr;
  }

  .about-image{
    height:320px;
  }

  .contact-box{
    flex-direction:column;
    gap:30px;
    text-align:center;
  }

  .mobile-call{
    display:block;

    position:fixed;

    left:16px;
    right:16px;
    bottom:16px;

    z-index:9999;

    background:#e30613;
    color:white;

    text-decoration:none;

    text-align:center;

    padding:18px;

    border-radius:50px;

    font-weight:900;

    box-shadow:
    0 0 30px rgba(227,6,19,.5);
  }

  body{
    padding-bottom:80px;
  }

}
@keyframes pulseGlow{

  0%{
    opacity:.6;
    transform:translateY(-50%) scale(1);
  }

  50%{
    opacity:1;
    transform:translateY(-50%) scale(1.08);
  }

  100%{
    opacity:.6;
    transform:translateY(-50%) scale(1);
  }

}
.card,
.about-image,
.gallery-grid img,
.contact-box{
  animation:fadeUp 1s ease;
}
.floating-light{
  position:absolute;
  border-radius:50%;
  filter:blur(90px);
  opacity:.22;
  pointer-events:none;
}

.light1{
  width:260px;
  height:260px;
  background:#ff0000;

  top:120px;
  left:-100px;

  animation:float1 8s ease-in-out infinite;
}

.light2{
  width:340px;
  height:340px;
  background:#990000;

  bottom:-120px;
  right:-120px;

  animation:float2 10s ease-in-out infinite;
}

@keyframes float1{

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

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

  100%{
    transform:translateY(0px);
  }

}

@keyframes float2{

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

  50%{
    transform:translateY(30px);
  }

  100%{
    transform:translateY(0px);
  }

}
.scroll-indicator{
  position:absolute;
  bottom:35px;
  left:50%;

  transform:translateX(-50%);

  width:32px;
  height:55px;

  border:2px solid rgba(255,255,255,.4);
  border-radius:30px;

  z-index:5;
}

.scroll-indicator::before{
  content:"";

  position:absolute;

  width:7px;
  height:7px;

  background:#e30613;

  border-radius:50%;

  left:50%;
  top:10px;

  transform:translateX(-50%);

  animation:scrollDot 2s infinite;
}

@keyframes scrollDot{

  0%{
    opacity:0;
    top:10px;
  }

  40%{
    opacity:1;
  }

  100%{
    opacity:0;
    top:30px;
  }

}
.loader{
  position:fixed;
  inset:0;

  background:#050505;

  z-index:999999;

  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;

  animation:loaderHide .8s ease forwards;
  animation-delay:2s;
}

.loader img{
  width:260px;

  animation:pulseLogo 1.5s infinite;
}

.loader-line{
  width:220px;
  height:4px;

  background:#1a1a1a;

  margin-top:30px;

  overflow:hidden;

  position:relative;
}

.loader-line::before{
  content:"";

  position:absolute;

  width:40%;
  height:100%;

  background:#e30613;

  animation:loading 1.2s infinite;
}

@keyframes loading{

  0%{
    left:-40%;
  }

  100%{
    left:100%;
  }

}

@keyframes pulseLogo{

  0%{
    transform:scale(1);
  }

  50%{
    transform:scale(1.04);
  }

  100%{
    transform:scale(1);
  }

}

@keyframes loaderHide{

  to{
    opacity:0;
    visibility:hidden;
  }

}
.stats{
  padding:60px 6%;

  background:#090909;

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

  text-align:center;

  border-top:1px solid #181818;
  border-bottom:1px solid #181818;
}

.stat h2{
  font-size:58px;
  color:#e30613;

  margin-bottom:12px;

  text-shadow:
  0 0 25px rgba(227,6,19,.3);
}

.stat p{
  color:#aaa;
  text-transform:uppercase;
  letter-spacing:2px;
}
.mouse-glow{
  position:fixed;

  width:350px;
  height:350px;

  background:
  radial-gradient(circle,
  rgba(227,6,19,.18),
  transparent 70%);

  border-radius:50%;

  pointer-events:none;

  z-index:0;

  transform:translate(-50%,-50%);
}
.stats{
  grid-template-columns:1fr;
  gap:40px;
}
.reveal{
  opacity:0;
  transform:translateY(60px);
  transition:1s;
}

.reveal.active{
  opacity:1;
  transform:translateY(0);
}
.parallax{
  background-attachment:fixed;
}