body {
  font-family: 'Montserrat';
  margin: 0;
  padding: 0;
}

/* Paleta de Cores usadas no site */

:root {
  --pretoPrincipal: black;
  --offWhite: rgb(255, 255, 242);
  --redEscuro: #c0392b;
  --redVibrante: #ff3333;
  --redSangue: #e74c3c;
  --Dourado: #D4AF37;
  --AzulTech: #3B82F6;
  --CinzaChumbo: #2B2B2B;
  --Verdesucesso: #27AE60;
  --LaranjaEnergia: #FF8C42;

}

header {
  height: 80px;
  width: 100%;
  /* background-color: #E63946; */
  background-color: var(--pretoPrincipal);
  justify-content: center;
  display: flex;
  align-items: center;
}


.ZT {
  width: 200px;
  height: 50px;
  color: rgb(255, 255, 242);
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 25px;
}

.ZT a {
  color: var(--offWhite);
  list-style: none;
  text-decoration: none;
}

.banner {
  height: 700px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  background-color: var(--offWhite);
  background-image: url(../images/Banner.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
}

.blc {
  background-color: rgba(0, 0, 0, 0.5);
  padding: 20px;
  border-radius: 15px;
  margin-right: 40%;
  transform: translate(0, -60%);
}


.texto-banner {
  text-align: center;
  color: var(--offWhite);
  box-sizing: border-box;
}


.btnComecar {
  background-color: var(--redVibrante);
  list-style: none;
  color: var(--offWhite);
  text-decoration: none;
  border-radius: 10px;
  font-size: 1.1rem;
  font-weight: bolder;
  transition: all 0.3 ease;
  cursor: pointer;
  display: inline-block;
  /* Como o botão está como <a> então usei essa        propriedade para poder add altura e largura no botão, <a> não aceitaa diretaamennte width e heigth */
  padding: 8px 20px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.8);
}

/* Animação CSS do botão */

.btnComecar:hover {
  transform: scale(1.1);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  background-color: var(--redVibrante);
}

.btnComecar:active {
  transform: scale(0.95);
}



/* Animação de pulso contínua (opcional) */
@keyframes pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }

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

/*  animação de pulso */
.btnComecar {
  animation: pulse 2s infinite;
}


/*Responsividade da tela do banner para mobile */

@media(max-width: 480px) {

  .blc {
    width: 85%;
    /* Ajusta el ancho en móvil */
    transform: translate(30%, -60%);
    /* Menos desplazamiento en móvil */
  }

}

/*Telas de celulares maiores*/

@media(max-width:768px) {}

/*Responsividade para tablet no banner */

@media (min-width:769px) and (max-width:1024px) {}

/* Estilização da area do sobre */

.container-sobre {
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 20px;
}

/* Título principal */
.title-one {
  text-align: center;
  font-size: 2.3rem;
  color: var(--redPrincipal);
  margin-bottom: 50px;
  transition: all 0.3s ease;
}

/*Destaque para a palavra desculpas e resultados */

.title-one .destaque {
  color: var(--redVibrante);
}

.title-one:hover {
  transform: scale(1.05);
}


.container {
  display: flex;
  gap: 40px;
  align-items: center;
  flex-wrap: wrap;
}

.titleSobre {
  flex: 1;
  min-width: 250px;
  transition: transform 0.3s ease;
}

.titleSobre:hover {
  transform: translateX(10px);
  /*Animação de ir um pouco para a direita ao passar o mause*/
}

.titleSobre h4 {
  font-size: 1.8rem;
  color: var(--pretoPrincipal);
  margin: 0;
  line-height: 1.3;
  border-left: 4px solid var(--redPrincipal);
  padding-left: 20px;
}


.textSobre {
  flex: 1;
  /* Texto Ocupa metade e quebra a linha */
  min-width: 250px;
  transition: transform 0.3s ease;
}


/* Animação */
.textSobre:hover {
  transform: translateX(-5px);
}

.textSobre p {
  font-size: 1.1rem;
  color: var(--pretoPrincipal);
  line-height: 1.6;
  margin: 0;
  background: rgba(255, 255, 255, 0.05);
  padding: 20px;
  border-radius: 10px;
  transition: all 0.3s ease;
}

/*Animação do texto*/
.textSobre:hover p {
  background: var(--redVibrante);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.8);
  color: var(--offWhite);
}


/* Responsividade*/
@media (max-width: 768px) {
  .container {
    flex-direction: column;
    gap: 30px;
  }

  .titleSobre h4 {
    font-size: 1.5rem;
  }

  .titleSobre:hover {
    transform: translateX(5px);
  }
}

/*Cards dos Treinos*/

.container-treinos {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.treinos {
  background-color: var(--pretoPrincipal);
  height: 100%;
  padding: 60px 0;
}

.treinos-title {
  display: flex;
  margin: 0 auto;
  justify-content: center;
  transition: transform 0.3s ease;
  border-radius: 11px;

}

.treinos-title h3 {
  text-align: center;
  color: var(--offWhite);
  font-size: 2.4rem;
}

.col-md-4.personalizado {
    display: flex;
    justify-content: center;
    align-items: center;
   /* width: 30%; isso css entendesse "oi vcs precisam ficar lado a lado*/
    padding: 10px;
   /*margin: 20px; se colocar essa precisaria do width de 30*/
   
}

.card-personalizado {
  border: var(--redVibrante) !important;
  /* O importantee permite que eu personalize as classes do bootstrap */
  background-color: var(--offWhite);
  transition: all 0.6s ease;
  margin-top: 40px;
  display: flex;
  
}

/* Botão Gerar dos cards */

.button-red {
  background-color: var(--redVibrante) !important;
  border: none !important;
  font-weight: bolder;
  transition: all 0.5s ease;
  align-items: center !important;

}




/* Animação dos cards e botao */

.card-personalizado:hover {
  transform: scale(1.08);
  box-shadow: 0px 6px 15px rgba(255, 255, 242, 0.6);

}

.button-red:hover {
  transform: scale(1.06) !important;
  background-color: var(--redSangue) !important;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3) !important;
}


/* Responsividade Mobile dos cards*/

@media(max-width:480px) {

  .treinos-title {
    padding: 1px;
    width: 80%;
  }

  .treinos-title h3 {
    font-size: 1.9rem;
  }

  .card-personalizado {
    width: 14rem;
    margin: 0 auto;
    margin-top: 20px;
  }

  .card-personalizado:hover {
    transform: scale(1.01);

  }
}




/* ================================================
   Sessão das Funcionalidades
   ================================================ */
/* Titulo
subtitulo
os dois cards um ao lado do outro

Os cards vai fica 100 para 2( pega 2% para cada de margem para ver como fica e se não estiver muito apertado 
titulo ocupa a parte de um todo na parte de cima
subtitulo fica menor abaixo, tambem ocupando o espaço de um "todo"
Essa divisão fica como 6-6 no bootstrap

Aproveita e o título e subtítulo não fica se movendo, fica travado, precisa arrumar isso em ambas as situações, tanto pro mobile quando para notebook

colocar essa parte na de responsividade para não mudar todo? ou deixa as duas versões iguais,tanto para computador como para mobile

VERIFICAR: a linha vermelha que se divide e fica branca
*/

.functions-title {
  text-align: center;
  color: var(--offWhite);
  font-size: 2.3rem;
  font-weight: 700;
  margin: 0 auto;
  padding-top: 10px;
  letter-spacing: .5px;
}

.functions-subtitle {
  text-align: center;
  color: rgba(255, 255, 242, 0.6);
  max-width: 560px;
  margin: 10px auto 0;
  font-size: .95rem;
  padding: 0 20px;
}

.functions {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 0 90px;
  box-shadow: 10px 2px 15px var(--redVibrante);
  background-color: var(--pretoPrincipal);
}

.container-functions {
  width: 100%;
  max-width: 1100px;
  padding: 0 20px;
  margin: 0 auto;
}

.card-functions {
  background-color: var(--pretoPrincipal);
  color: var(--offWhite) !important;
  border-radius: 15px;
  margin: 0 auto;
  padding: 10px;
  width: 100%;
  height: 100%;
}

.card-bodyf {
  padding: 28px 24px;
  background-color: var(--CinzaChumbo);
  border: 2px solid var(--redVibrante);
  border-radius: 15px;
  height: 100%;
  box-sizing: border-box;
  transition: transform 0.35s ease, box-shadow 0.35s ease, background-color 0.35s ease, border-color 0.35s ease;
}

/* Animação dos cards de funcionalidades */
.card-bodyf:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0px 6px 15px rgba(255, 255, 242, 0.6);
  background-color: var(--redSangue);
  border-color: var(--offWhite);
}

/* Ícone de cada funcionalidade */
.simbolo {
  width: 56px;
  height: 56px;
  background-color: var(--offWhite);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  transition: transform 0.35s ease;
}

.card-bodyf:hover .simbolo {
  transform: rotate(-8deg) scale(1.05);
}

/* Cores dos iconnes */

.simbolo i.ti.ti-adjustments-bolt {
  font-size: 1.6rem;
  color: var(--LaranjaEnergia);
  font-weight: bolder;
}

.simbolo i.ti.ti-calendar-week {
  font-size: 1.6rem;
  color: var(--Dourado);
  font-weight: bolder;
}

.simbolo i.ti.ti-history {
  font-size: 1.6rem;
  color: var(--AzulTech);
  font-weight: bolder;
}

.simbolo i.ti.ti-device-mobile {
  font-size: 1.6rem;
  color: var(--redVibrante);
  font-weight: bolder;
}


.simbolo i.ti.ti-barbell {
  font-size: 1.6rem;
  color: var(--CinzaChumbo);
  font-weight: bolder;
}

.simbolo i.ti.ti-trophy {
  font-size: 1.6rem;
  color: var(--Dourado);
  font-weight: bolder;
}


.card-bodyf .card-title {
  font-weight: 700;
  font-size: 1.15rem;
  margin-bottom: 0;
}

.card-bodyf .card-text {
  color: rgba(255, 255, 242, 0.85);
  font-size: .95rem;
  line-height: 1.5;
  margin-bottom: 0;
  
}

/* HR dos cards*/

.hr-card {
  border: none;
  border-top: 2px solid rgba(0, 0, 0, 0.25);
  /*margin: 12px 0;*/
}

/* Espaço entre as linhas do carrossel quando quebram no mobile */
.carousel-item .row {
  row-gap: 24px;
}

/* Indicadores (bolinhas) do carrossel no tema vermelho */
#carouselExampleFade .carousel-indicators {
  position: static;
  margin-top: 30px;
}

#carouselExampleFade .carousel-indicators [data-bs-target] {
  background-color: rgba(255, 255, 242, 0.35);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
}

#carouselExampleFade .carousel-indicators .active {
  background-color: var(--redVibrante);
}

/* Setas do carrossel */
.carousel-control-prev,
.carousel-control-next {
  width: 5%;
  opacity: .8;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.9));
}

/* Responsividade da sessão de funcionalidades */

@media (max-width: 991px) {
  .functions-title {
    font-size: 1.9rem;
  }

  .card-bodyf {
    padding: 22px 18px;
  }
}

@media (max-width: 575px) {
  .functions-title {
    font-size: 1.6rem;
    padding-top: 40px;
  }

  .functions-subtitle {
    font-size: .85rem;
  }

  .functions {
    margin-top: 25px;
    padding: 25px 0 50px;
  }

  .card-bodyf {
    padding: 20px 18px;
  }

  .card-bodyf .card-title {
    font-size: 1.05rem;
  }

  .carousel-control-prev,
  .carousel-control-next {
    width: 8%;
  }

   .col-md-4.personalizado {
        width: 100%;
        padding: 10px 20px;
        margin: 0;
    }

    .card-personalizado {
        width: 100%;
        max-width: 350px;
    }
}


/* ================================================
   Sessão de frase motivacional (entre treinos e funcionalidades)
   ================================================ */

.frase-motivacional {
  background-color: var(--pretoPrincipal);
  padding: 70px 20px;
  text-align: center;
}

.frase-motivacional::before {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background-color: var(--redVibrante);
  margin: 0 auto 30px;
  border-radius: 2px;
}

.frase-container {
  max-width: 700px;
  margin: 0 auto;
}

.frase-motivacional i.ti-quote {
  font-size: 2.2rem;
  color: var(--redVibrante);
  margin-bottom: 18px;
  display: inline-block;
}

.frase-texto {
  font-size: 1.8rem;
  font-weight: 700;
  font-style: italic;
  color: var(--offWhite);
  line-height: 1.4;
  margin: 0 0 16px;
}

.frase-autor {
  display: block;
  color: var(--redVibrante);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  margin-top: 15px; 
}

/*Responsividade*/
@media (max-width: 767px) {
  .frase-motivacional {
        padding: 50px 20px;
  }

  .frase-texto {
    font-size: 1.35rem;
  }

  .frase-motivacional i.ti-quote {
    font-size: 1.8rem;
  }
}