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

.hero{
  width:100%;
  min-height:100vh;

  background:
  radial-gradient(circle at top, rgba(255,45,85,0.15), transparent 40%),
  var(--cor-fundo);

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

  padding:120px 20px 50px;

  overflow:hidden;

  position:relative;
}

/* CONTAINER */

.hero-content{
  max-width:var(--container);

  width:100%;

  display:grid;
  grid-template-columns:1fr 1fr;

  align-items:center;

  gap:50px;
}

/* TEXTO */

.hero-text{
  z-index:2;
}

.tag{
  display:inline-block;

  background:rgba(255,255,255,0.08);

  border:1px solid rgba(255,255,255,0.1);

  padding:10px 18px;

  border-radius:30px;

  color:var(--cor-branca);

  margin-bottom:25px;

  backdrop-filter:blur(10px);
}

.hero-text h1{
  font-size:5rem;

  line-height:1.1;

  color:var(--cor-branca);

  margin-bottom:25px;
}

.hero-text p{
  color:rgba(255,255,255,0.7);

  line-height:1.8;

  max-width:550px;

  margin-bottom:35px;
}

/* BOTÕES */

.hero-buttons{
  display:flex;
  gap:20px;
  flex-wrap:wrap;
}

/* BOTÃO PRINCIPAL */
.btn{
  padding:12px 24px;

  border-radius:30px;

  background:linear-gradient(
    45deg,
    var(--cor-primaria),
    var(--cor-secundaria)
  );

  color:var(--cor-branca);

  text-decoration:none;

  font-weight:bold;

  transition:0.3s;
}

.btn:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 20px rgba(255,45,85,0.3);
}

/* BOTÃO SECUNDÁRIO */
.btn-outline{
  padding:12px 24px;

  border:1px solid rgba(255,255,255,0.2);

  border-radius:30px;

  color:var(--cor-branca);

  text-decoration:none;

  transition:0.3s;
}

.btn-outline:hover{
  background:rgba(255,255,255,0.08);
}

/* CARRO */

.hero-car{
  display:flex;
  justify-content:center;
  align-items:center;

  perspective:1000px;
}

.car-container{
  width:100%;

  max-width:700px;

  transition:0.2s ease-out;

  transform-style:preserve-3d;
}

.f1-car{
  width:100%;

  filter:
  drop-shadow(0 30px 40px rgba(255,45,85,0.4));

  animation:float 4s ease-in-out infinite;
}

/* ANIMAÇÃO */

@keyframes float{

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

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

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

}

/* RESPONSIVO */

@media(max-width:950px){

  .hero-content{
    grid-template-columns:1fr;
    text-align:center;
  }

  .hero-text p{
    margin:auto auto 35px;
  }

  .hero-buttons{
    justify-content:center;
  }

  .hero-text h1{
    font-size:3rem;
  }

}

@media(max-width:600px){

  .hero-text h1{
    font-size:2.3rem;
  }

}