/* ===============================
   RESET GLOBAL
   =============================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.top-bar {
  height: 90px;
  width: 100%;
  background-color: #000;

  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;

  border-bottom: 2px solid #0f9d58;

  display: flex;
  align-items: center;
}

.top-bar .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;

  display: flex;
  align-items: center;
}

.brand {
  display: flex;
  align-items: center;
  gap: 6px;
}

.brand-name {
  color: #ffffff;
  font-size: 2.5rem; /* amentar o tamanho do ontake na barra */
  font-weight: 700;
  letter-spacing: 2px;
}

.power {
  color: #0f9d58;
  font-size: 2.5rem; /* amentar o tamanho do botao power */
  animation: blink 1.4s infinite;
}


/* ANIMAÇÃO PISCAR */
@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0.2; }
  100% { opacity: 1; }
}


/* ===============================
   ESTILO GLOBAL
   =============================== */
body {
  font-family: Arial, sans-serif;
  background-color: #0b0b0b;
  color: white;
}

/* ===============================
   HERO SECTION
   =============================== */
.hero {
  position: relative;
  min-height: 100vh;
  background: url("./assets/images/hero.jpeg") center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-top: 120px;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 10px;
  max-width: 720px;
  width: 100%;
}
  

/* sobe ou desce SÓ esse texto capturando.. */
.hero-title {
  transform: translateY(5px); /* sobe só ele */
  font-size: 20px;
  font-size: 1.8rem;
}

 .hero-cta {
  transform: translateY(70px); /* desce só o botão */
}


.hero-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: px; /* espaço entre texto e botão */
}

/* ===============================
   BOTÃO PRINCIPAL (CTA)
   =============================== */
.btn-primary {
  background: #00c97b;
  color: #000;
  padding: 16px 36px;
  border-radius: 40px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.3s ease;
}


.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0, 201, 123, 0.4);
}

/* ===============================
   SERVIÇOS
   =============================== */
.services {
  padding: 80px 20px;
  background-color: #0b0b0b;
}

.services-header {
  text-align: center;
  margin-bottom: 50px;
}

.services-header h2 {
  font-size: 2rem;
  font-weight: 600;
}

.services-header span {
  color: #0f9d58;
}

.services-header .line {
  width: 60px;
  height: 3px;
  background-color: #0f9d58;
  margin: 15px auto 0;
  border-radius: 2px;
}

.services-list {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.service-card {
  background: linear-gradient(145deg, #111, #0d0d0d);
  padding: 25px;
  border-radius: 12px;
  border: 1px solid #1f1f1f;
  transition: all 0.3s ease;
}

.service-card:hover {
  transform: translateY(-4px);
  border-color: #0f9d58;
}

.service-card .icon {
  width: 42px;
  height: 42px;
  background-color: #0f9d58;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 1.2rem;
  margin-bottom: 15px;
}

.service-card h3 {
  font-size: 1.1rem;
  margin-bottom: 10px;
}

.service-card p {
  font-size: 0.95rem;
  color: #bdbdbd;
  line-height: 1.5;
}

/* ===============================
   POR QUE ESCOLHER A ONTAKE
   =============================== */
.why {
  padding: 80px 20px;
  background: radial-gradient(circle at top, #111, #0b0b0b);
}

.why-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 60px;
}

.why-header h2 {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 15px;
}

.why-header span {
  color: #0f9d58;
}

.why-header p {
  font-size: 1rem;
  color: #bdbdbd;
}

.why-list {
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 600px;
  margin: 0 auto;
}

.why-item {
  text-align: center;
}

.why-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 15px;
  border-radius: 50%;
  background: rgba(15, 157, 88, 0.15);
  color: #0f9d58;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  border: 1px solid #0f9d58;
}

/* ===============================
   TIME
   =============================== */
.team {
  padding: 80px 20px;
  background-color: #0b0b0b;
}

.team-header {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 50px;
}

.team-header h2 {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 10px;
}

.team-header span {
  color: #0f9d58;
}

.team-header p {
  font-size: 1.3rem;
  color: #bdbdbd;
}

.team-list {
  display: flex;
  justify-content: center; /* centraliza os membros */
  gap: 20px; /* espaço entre os membros */
  flex-wrap: wrap; /* permite quebrar linha se necessário */
}

.team-member {
  text-align: center;
  background-color: #111;
  padding: 15px;
  border-radius: 8px;
  transition: transform 0.3s, box-shadow 0.3s;
  width: 30%; /* cada membro ocupa 30% da largura da tela */
  min-width: 150px; /* evita ficar muito pequeno em celulares */
}

.team-member:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 20px rgba(15, 157, 88, 0.5);
}

.team-member img {
  width: 100%;
  height: auto;
  max-height: 300px;
  object-fit: cover;
  border-radius: 5px;
  border: 2px solid #0f9d58;
  margin-bottom: 15px;
}

.team-member h3 {
  margin: 0;
  font-size: 1.1rem;
  color: #fff;
}

.team-member p {
  margin: 5px 0 0;
  font-size: 0.9rem;
  color: #bdbdbd;
}

/* RESPONSIVO: telas menores que 768px */
@media (max-width: 768px) {
  .team-member {
    width: 45%; /* dois membros por linha no celular */
  }
}

/* RESPONSIVO: telas menores que 480px */
@media (max-width: 480px) {
  .team-member {
    width: 90%; /* um membro por linha em celular pequeno */
  }
}


/* ===============================
   CONTATO / FOOTER (Ícone à esquerda)
   =============================== */
.contact {
  padding: 80px 20px;
  background-color: #0b0b0b;
  color: #fff;
}

.contact-header {
  text-align: center;
  margin-bottom: 50px;
}

.contact-header h2 {
  font-size: 2rem;
  font-weight: 600;
}

.contact-header span {
  color: #0f9d58;
}

.contact-header .line {
  width: 60px;
  height: 3px;
  background-color: #0f9d58;
  margin: 15px auto 0;
  border-radius: 2px;
}

.contact-header p {
  margin-top: 15px;
  font-size: 1.1rem;
}

/* Lista de contatos */
.contact-list {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Card individual */
.contact-card {
  background: linear-gradient(145deg, #111, #0d0d0d);
  padding: 20px 25px;
  border-radius: 12px;
  border: 1px solid #1f1f1f;
  display: flex;
  align-items: center;
  gap: 20px;
  transition: all 0.3s ease;
}

.contact-card:hover {
  transform: translateY(-4px);
  border-color: #0f9d58;
}

/* Ícone */
.contact-icon {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: #fff;
}

/* Cores específicas para cada serviço */
.contact-icon.whatsapp { background-color: #25d366; } /* verde */
.contact-icon.email { background-color: #1e90ff; } /* azul */
.contact-icon.instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%); } /* gradiente Instagram */

/* Texto ao lado do ícone */
.contact-info h3 {
  margin: 0;
  font-size: 1.2rem;
}

.contact-info p {
  margin: 2px 0 0 0;
  font-size: 1rem;
}

.contact-info a {
  color: #fff;
  text-decoration: none;
}

.contact-info a:hover {
  color: #1da1f2;
}

/* RESPONSIVO */
@media (max-width: 768px) {
  .contact-card {
    flex-direction: column;
    align-items: flex-start;
  }
  .contact-icon {
    margin-bottom: 10px;
  }
}
/* LOGO NA HERO */
.hero-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 30px;
}

.hero-power {
  font-size: 72px;
  color: #0f9d58;
  animation: blink 1.4s infinite;
}

.hero-name {
  font-size: 82px;
  font-weight: 800;
  letter-spacing: 3px;
}

/* ===============================
   POR QUE ESCOLHER - CARDS
   =============================== */

.why {
  background-color: #0b0b0b;
  padding: 80px 20px;
}

.why-header {
  text-align: center;
  margin-bottom: 50px;
}

.why-header h2 {
  font-size: 2.5rem;
  color: #fff;
}

.why-header span {
  color: #0f9d58;
}

.why-header p {
  color: #bbb;
  margin-top: 10px;
}

/* GRID DOS CARDS */
.why-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
}

/* CARD */
.why-item {
  background: #121212;
  border-radius: 16px;
  padding: 35px 25px;
  text-align: center;
  box-shadow: 0 15px 40px rgba(0,0,0,0.6);
  transition: all 0.3s ease;
}

.why-item:hover {
  transform: translateY(-10px);
  box-shadow: 0 25px 60px rgba(0,0,0,0.8);
}

/* ÍCONE */
.why-icon {
  width: 70px;
  height: 70px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0f9d58, #0f9d58);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 28px;
}

/* TÍTULO */
.why-item h3 {
  color: #fff;
  font-size: 1.2rem;
  margin-bottom: 10px;
}

/* TEXTO */
.why-item p {
  color: #ccc;
  font-size: 0.95rem;
  line-height: 1.6;
}

/* ===============================
   FORMULÁRIO DE ORÇAMENTO
   =============================== */

.contact-form {
  background-color: #0b0b0b;
  padding: 80px 20px;
  display: flex;
  justify-content: center;
}

.form-container {
  width: 100%;
  max-width: 600px;
  text-align: center;
}

.form-container h2 {
  font-size: 28px;
  margin-bottom: 10px;
}

.form-container h2 span {
  color: #0f9d58;
}

.form-container p {
  color: #ccc;
  font-size: 14px;
  margin-bottom: 30px;
}

/* CAIXA DO FORM */
.form-box {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* INPUTS, SELECT E TEXTAREA */
.form-box input,
.form-box select,
.form-box textarea {
  background-color: #111;
  border: 1px solid #222;
  padding: 14px;
  border-radius: 8px;
  color: #fff;
  font-size: 14px;
  outline: none;
}

.form-box textarea {
  min-height: 120px;
  resize: none;
}

/* FOCO (quando clica) */
.form-box input:focus,
.form-box select:focus,
.form-box textarea:focus {
  border-color: #0f9d58;
}

/* BOTÃO */
.btn-form {
  margin-top: 10px;
  background-color: #0f9d58;
  color: #000;
  padding: 14px;
  border: none;
  border-radius: 10px;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s;
}

.btn-form:hover {
  background-color: #13b96b;
}
 

/* CONTEÚDO DA BARRA */
.brand {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center; /* HERO */
  transition: all 0.3s ease;
}

/* LOGO */
.brand-left {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-size: 22px;
  font-weight: bold;
}

.power {
  color: #00c97b;
}

/* BOTÃO */
.btn-top {
  display: none;
  background: #00c97b;
  color: #000;
  padding: 12px 22px;
  border-radius: 30px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

/* ===============================
   ESTADO APÓS SCROLL
   =============================== */