@font-face {
  font-family: proxmanova;
  src: url(/src/fonts/ProximaNovaRegular.otf);
}

body {
  font-family: poppins, sans-serif;
  overflow-x: hidden !important;
}

/*header*/

.btn {
  transition: transform 0.25s ease-out !important;
}

.btn.btn-outline-secondary {
  padding: 20px;
}

.nav-item {
  padding: 10px;
}

.nav-item a {
  color: #000;
  position: relative;
  /* Para usar o pseudo-elemento */
}

.nav-item a::after {
  content: "";
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background: linear-gradient(6deg, #00124c, #00124c, #00124c, #032695, #022db8, #012cb5, #001c77);
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

.nav-item a:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

.btn-custom {
  color: #000;
  /* Cor do texto */
  background-color: transparent;
  /* Fundo transparente */
  border: 2px solid #533e60 !important;
  /* Contorno */
  transition: all 0.3s;
  /* Transição suave */
  padding: 20px 35px !important;
  /* Espaçamento interno */
  border-radius: 3rem !important;
  /* Bordas arredondadas */
  text-align: center;
  /* Alinhamento do texto */
  text-decoration: none;
  /* Remover sublinhado */
  white-space: nowrap;
  /* Impedir quebra de texto */
}

.btn-custom:hover {
  transform: scale(1.1);
  /* Aumenta o tamanho do botão ao passar o mouse */
}

.form-select {
  border: none !important;
  /* Remover contorno */
  box-shadow: none;
  /* Remover sombra */
  position: relative;
  /* Para usar o pseudo-elemento */
  background-color: transparent;
  /* Fundo transparente */
}

.form-select::after {
  content: "";
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #533e60;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

.form-select:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

.btn-outline-secondary {
  border: none !important;
  /* Remover contorno inicial */
  background-color: transparent !important;
  /* Fundo transparente */
  color: #533e60 !important;
  /* Cor do texto */
  transition: all 0.3s;
  /* Transição suave */
  margin-left: 20px;
  /* Aumentar espaço entre botões */
  position: relative;
  /* Para usar o pseudo-elemento */
}

.btn-outline-secondary::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: -2px;
  left: 0;
  background-color: #533e60;
  transform: scaleX(0);
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

.btn-outline-secondary:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

/*teste*/

.navbar-toggler {
  border: none;
  /* Remover borda do botão */
}


.navbar-nav .nav-link {
  padding-right: 1rem;
  padding-left: 1rem;
  text-transform: uppercase;
}

.navbar-brand img {
  height: 40px;
  margin-left: 10px;
  margin-top: 5px;
}

.btn-custom {
  /* Seu estilo customizado aqui */
}

.btn-outline-secondary {
  /* Seu estilo customizado aqui */
}


/*home*/

/* Ajustes Gerais */

.hero-section {
  background-image: url(/imagens/logobg.png);

  background-position: right -40% top;

  background-repeat: no-repeat;

  background-size: 66%;
}

.hero-section {
  padding: 20px 0 30px;
  text-align: left;
}

.container-fluid {
  max-width: 90%;
  margin: 0 auto;
  /* Centraliza o conteúdo */
}

.row {
  display: flex;
  align-items: center;
}

.col-md-6 {
  flex: 1;
  padding: 20px;
}

/* Cabeçalhos */
.hero-section h2 {
  font-size: 2.3rem;
  color: #333;
  font-weight: 400;
  margin-bottom: 0px;
}

.hero-section h1 {
  font-size: 4.5rem;
  color: #000;
  margin-bottom: 30px;
  line-height: 1;
  max-width: 738px;
  font-weight: 900;
}

.highlight {
  background: linear-gradient(144deg, #00124c, #00124c, #00124c, #032695, #022db8, #012cb5, #001c77);
  font-weight: 700;
  background-clip: text;
  color: transparent;
}

/* Parágrafos */
.hero-section p {
  font-size: 35px;
  color: #000;
  font-weight: 400;
  line-height: 1.2;
  max-width: 500px;
}

.hero-section .highlighted-text {
  font-size: 35px;
  color: #000;
  font-weight: 400;
  line-height: 1.2;
  max-width: 500px;
}

/* Botão */
.hero-section .btn-success {
  background-color: #479547;
  color: #ffffff;
  padding: 15px 40px;
  border: none;
  border-radius: 50px;
  font-size: 1.2rem;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s;
  font-weight: 500;
}

.hero-section .btn-success:hover {
  background-color: #010929;
  transform: scale(1.1);
}

/* Imagem */
.hero-section img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}

/* Conteúdo Adicional */
.additional-content {
  margin-top: 40px;
  /* Espaçamento acima do conteúdo adicional */
  text-align: center;
  transition: all .5s;
}

.additional-content h2 {
  font-size: 2.5rem;
  color: #333;
  line-height: 1.4;
  margin: 0 auto;
  font-weight: 400;
  max-width: 77%;
}

.additional-content .highlight-pink {
  color: #d52e74;
  /* Cor personalizada */
  font-weight: 700;
}

.additional-content .highlight-purple {
  color: #9033c4;
  /* Cor personalizada */
  font-weight: 700;
}


#startup {
  width: 100%;
  height: 100%;
  position: fixed;
  background-color: #eeeeee;
  -moz-user-select: none;
  -webkit-user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.spinner-container {
  animation: rotate 2s linear infinite;
  -webkit-animation: rotate 2s linear infinite;
}

.spinner-container .path {
  stroke-dasharray: 1, 150;
  /* 1%, 101% circumference */
  stroke-dashoffset: 0;
  stroke: rgba(27, 154, 89, 0.7);
  stroke-linecap: round;
  animation: dash 1.5s ease-in-out infinite;
  -webkit-animation: dash 1.5s ease-in-out infinite;
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes dash {
  0% {
    stroke-dasharray: 1, 150;
    /* 1%, 101% circumference */
    stroke-dashoffset: 0;
  }

  50% {
    stroke-dasharray: 90, 150;
    /* 70%, 101% circumference */
    stroke-dashoffset: -35;
    /* 25% circumference */
  }

  100% {
    stroke-dasharray: 90, 150;
    /* 70%, 101% circumference */
    stroke-dashoffset: -124;
    /* -99% circumference */
  }
}

@-webkit-keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes dash {
  0% {
    stroke-dasharray: 1, 150;
    /* 1%, 101% circumference */
    stroke-dashoffset: 0;
  }

  50% {
    stroke-dasharray: 90, 150;
    /* 70%, 101% circumference */
    stroke-dashoffset: -35;
    /* 25% circumference */
  }

  100% {
    stroke-dasharray: 90, 150;
    /* 70%, 101% circumference */
    stroke-dashoffset: -124;
    /* -99% circumference */
  }
}

/* Ajustes de Layout Responsivo */
@media (max-width: 768px) {

.apartir-hg {text-align: center;}
  
  span.responsive-taxa.highlight {
    font-size: 26px;
    margin-top: -10px;
    margin-bottom: 18px;
    display: block !important;
  }

  section#quem {
    padding: 20px 0px;
  }

  span.none-responsive {
    display: none;
  }

  .extra-card a.btn-planos {
    padding: 20px 20px !important;
    white-space: nowrap;
    font-size: 19px;
    margin-left: -15px;
  }

  .card-planos .title-card {
    font-size: 32px !important;
  }

  .price-planos h3 {
    display: flex;
    align-items: center;
  }

  .title-planos h2 {
    font-size: 3rem !important;
    margin-bottom: 40px !important;
    margin-top: -30px !important;
  }

  .cards-container {
    display: flex !important;
    flex-direction: column !important;
  }

  .container-extra {
    padding: 0 !important;
  }

  .card-planos {
    margin: 0px 0px 50px 0px !important;
  }

  .text-top h2 {
    font-size: 50px !important;
  }

  #passos-new .final-text p {
    margin-bottom: 45px !important;
  }

  #passos-new .final-text {
    padding-bottom: 55px;
  }

  #passos .download-button {
    padding: 10px 20px !important;
  }

  .navbar-nav .nav-link {
    background-color: #ffffff57;
    border-radius: 10px;
  }

  .navbar-nav .nav-link:hover {
    scale: 1.1;
  }

  .hero-section {
    text-align: center;
    padding: 45px 20px;
  }

  .row {
    flex-direction: column;
  }

  .hero-section .col-md-6 {
    margin-bottom: 30px;
    padding: 0;
  }

  .additional-content h2 {
    font-size: 1.6rem;
  }
}

/*carousel*/

/* Estilo básico para o contêiner do acordeon */
#double .accordion-container,
#templates .accordion-container {
  display: flex;
  margin: 4%;
}

/* Estilo para o acordeon */
#double .accordion {
  width: 50%;
  /* 50% da largura da tela */
  background-color: transparent;
  /* Fundo transparente */
  border: none;
  /* Sem borda */
}

#double .accordion-item {
  border: none;
  /* Remover bordas */
  position: relative;
  /* Adicionado para permitir o uso de ::before */
}

#double .accordion-header {
  display: flex;
  /* Alinha imagem e texto horizontalmente */
  align-items: center;
  /* Centraliza verticalmente a imagem e o texto */
  background-color: transparent;
  /* Fundo transparente */
  color: #000;
  /* Texto preto */
  cursor: pointer;
  padding: 15px;
  /* Ajuste do padding para maior similaridade */
  font-weight: bold;
  font-size: 40px;
  /* Tamanho da fonte ajustado */
  border: none;
  /* Sem borda */
  gap: 5px;
  border-bottom: 1px solid;
  margin-bottom: 5px;
}

#double .accordion-image {
  max-width: 50px;
  max-height: 50px;
  margin-right: 10px;
  height: 50px;
  width: 50px;
}

#double .accordion-content {
  max-height: 0;
  overflow: hidden;
  /* Esconder conteúdo além da altura máxima */
  transition: max-height 0.5s ease-out, padding 0.5s ease;
  /* Animação suave */
  background-color: transparent;
  /* Fundo transparente */
}

#double .accordion-content.active {
  max-height: 500px;
  /* Altura máxima suficiente para o conteúdo */
  padding: 0px 15px 15px;
  /* Adiciona padding quando ativo */
  background-color: #f9f9f9;
  /* Fundo #f9f9f9 quando aberto */
}

#double .accordion-item.active {
  background-color: #f9f9f9;
  /* Fundo #f9f9f9 quando aberto */
}

#double ul {
  list-style-type: square;
  /* Itens de lista com marcadores quadrados */
  padding-left: 20px;
  /* Ajuste de padding à esquerda para melhorar o alinhamento */
  font-size: 24px;
  color: #333;
}

#double p {
  font-size: 24px;
  color: #333;
  /* Cor do texto preto */
}

/* Estilo para o lado direito da tela */
#double .right-side {
  width: 50%;
  /* 50% da largura da tela */
  margin-left: 20px;
  flex-grow: 1;
}

/* Estilo para as imagens do carousel */
#double .owl-carousel .item img {
  width: 85% !important;
  height: auto;
  margin-left: 10%;
}

/* Animação de rotação no sentido anti-horário */
/* Estado inicial e transição padrão */
/* Animação de rotação inicial */
.owl-item.item-proximo {
  transform-origin: bottom;
  transform: rotate(50deg);
  transition: opacity 0.6s ease, transform 0.6s ease;
  opacity: 0;
}

/* Animação de entrada (foco) */
#double .owl-carousel .owl-item.active {
  opacity: 1;
  transform: rotate(0deg);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Animação de saída (desfoco) */
.owl-item.item-anterior {
  opacity: 0;
  transform: rotate(-50deg);
  transform-origin: bottom;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/*sctionimagems*/

#benefits-results h4 {
  font-size: 5rem !important;
  display: grid;
  justify-content: center;
  text-align: center;
  font-weight: 700 !important;
  margin-bottom: 0%;
  margin-top: 0%;
}

#benefits-results .col-md-6 {
  flex: 0 0 auto;
  width: 50%;
  display: grid;
  justify-content: center;
}

#benefits-results h3 {
  font-size: 35px;
  font-weight: 700;
}

#benefits-results p {
  font-size: 25px;
}

#benefits-results .col-md-8 {
  flex: 0 0 auto;
  width: 50%;
  display: grid;
  justify-content: center;
}

#benefits-results .col-md-6 {
  flex: 0 0 auto;
  width: 50%;
  display: grid;
  justify-content: center;
  padding: 14% 0% 10% 0%;
}

/*quemusa*/

/* Estilo para a seção do carrossel com fundo personalizável */

#quem {
  position: relative;
  padding: 20px;

  /* Substitua pelo caminho da sua imagem */
  background: #00124c;
  /* background-image: url(/imagens/BGusuari.png); */
  background-size: cover;
  background-position: center;
}

#quemusa .carousel-heading {
  text-align: center;
  color: white;
  font-size: 5em;
  font-weight: 700;
  margin: 4%;
}

#quemusa .carousel-heading .highlight {
  color: #88ff88;
  /* Cor amarela para o destaque "AMA!" */
}

#quemusa .owl-carousel .item {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  color: white;
  font-size: 2em;
}

#quemusa .owl-carousel .item img {
  width: 250px;
  height: 250px;
  border-radius: 50%;
  box-shadow: 0 0 10px 5px #00000085;
  object-fit: cover;
  transition: all .5s;
}

/* Estilização das setas */
#quemusa .owl-nav-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

#quemusa .owl-nav-container .nav-buttons {
  display: flex;
  align-items: center;
}

#quemusa .owl-nav-container button {
  background: none;
  border: none;
  font-size: 4em;
  cursor: pointer;
  color: white;
  /* cor da seta */
  padding: 10px;
  position: relative;
}

#quemusa .owl-nav-container .transparent-arrow {
  opacity: 0.5;
  /* Define a transparência */
}

#quemusa .owl-nav-container .owl-prev.transparent-arrow {
  margin-right: -150px;
  /* Ajuste de acordo com a necessidade */
}

#quemusa .owl-nav-container .owl-next.transparent-arrow {
  margin-left: -150px;
  /* Ajuste de acordo com a necessidade */
}

#quemusa .owl-nav-container .main-arrow {
  z-index: 1;
  margin-right: 75px;
  margin-left: 75px;
}

/*passos*/

#passos .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  max-width: 1200px;
  margin: 40px auto;
  padding: 20px;
}

#passos .intro-text {
  width: 100%;
  text-align: center;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  color: #000;
}

#passos .intro-text h1 {
  color: #000;
  margin-bottom: 10px;
  font-size: 55px;
  font-weight: 700;
}

#passos .intro-text p {
  color: #000;
  font-size: 29px;
}

#passos .card {
  position: relative;
  border-radius: 10px;
  /* Ajustado para 20px */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  padding: 20px;
  flex: 1 1 calc(33.333% - 40px);
  box-sizing: border-box;
  transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  color: #000;
  background-color: #fff;
  min-height: 600px;
}

#passos .card::before {
  content: "";
  position: absolute;
  top: -5px;
  right: -5px;
  bottom: -5px;
  left: -5px;
  border-radius: 12px;
  background: linear-gradient(6deg, #00124c, #00124c, #00124c, #032695, #022db8, #012cb5, #001c77);
  z-index: -1;
}

#passos .card:hover {
  background-color: #f0f8ff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#passos .card h3 {
  text-align: center;
  color: #000;
  margin-bottom: 15px;
  font-weight: 700;
  font-size: 35px;
}

#passos .card h2 {
  color: #000;
  margin: auto;
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  padding: 8px 32px 0px 32px;
}

#passos .card p {
  margin: 10px 0;
  color: #000;
  font-size: 22px;
  padding: 25px 8px 20px 8px;
  margin: auto;
}

#passos .card img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 10px 0 20px;
  border-radius: 8px;
}

#passos .final-text,
#passos-new .final-text {
  width: 100%;
  text-align: center;
  padding: 20px;
  color: #000;
}

#passos .download-button,
#passos-new .download-button {
  background-color: #479547;
  color: white;
  padding: 15px 30px;
  /* Ajustado para parecer maior */
  border: none;
  border-radius: 40px;
  /* Bordas arredondadas */
  cursor: pointer;
  font-size: 25px;
  /* Aumentado o tamanho da fonte */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  /* Adicionada sombra */
  transition: background-color 0.3s, transform 0.3s;
  text-decoration: none;
  white-space: normal !important;
}

#passos-new .download-button:hover {
  background-color: #010929;
  transform: scale(1.1);
}

#passos p,
#passos-new p {
  font-size: 30px;
  margin-bottom: 4%;
}

#passos .h1 {
  font-size: 3.5rem !important;
  font-weight: 700;
  display: flex;
  justify-content: center;
  margin-bottom: 4%;
  flex-direction: column;
}

/*call*/

#call .promo-section {
  background-color: #000b2c;
  color: white;
  text-align: center;
  padding: 100px 50px;
}

#call .highlight {
  color: white;
  font-size: 2em;
  line-height: 82px;
}

#call .free {
  color: #ff007f;
}

#call .subtitle {
  font-size: 3em;
  margin: 10px 0;
}

#call .cta {
  color: white;
  margin-top: 20px;
  font-size: 1.5em;
  font-weight: bold;
}

#call .button {
  background-color: #479547;
  color: white;
  padding: 15px 30px;
  text-decoration: none;
  border-radius: 5px;
  font-size: 1.2em;
  display: inline-block;
  margin-top: 30px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  border-radius: 30px;
  transition: background-color 0.3s, transform 0.3s;
}

#call .button:hover {
  background-color: #051864;
  transform: scale(1.1);
}

#call h1 {
  font-size: 40px;
  font-weight: 700;
  line-height: 60px;
}

#call .free {
  color: #479547;
  font-size: 3.5rem;
  font-weight: 700;
  background: linear-gradient(78deg, #ffffff, #1f3074, #4c598c, #001050);
  background-clip: text;
  color: transparent;
}

@media (max-width: 768px) {

#call .promo-section {
  padding: 100px 20px !important;
}

  #call .highlight {
    font-size: 50px;
    line-height: 10px;
}
  
  .loading::after {
    left: 35% !important;
    top: 40% !important;
  }

  .close-icon .icon-div {}

  .extra-card .price-planos {
    display: flex;
    flex-direction: column;
  }

  .tog-itens {
    display: flex;
    flex-direction: column;
  }

  .extra-card .card-planos {
    width: 100% !important;
    text-align: left !important;
  }

  .extra-card .price-planos h3 {
    display: flex;
    text-align: left;
    gap: 8px;
  }

  .extra-card .price-planos .text-price {
    font-size: 30px;
  }

  br.no-responsive-choose {
    display: none;
  }

  .price-2.all-price {
    width: 100%;
    margin-top: 10px;
  }


  .formulario h5 {
    font-size: 22px !important;
  }

  form.formulario {
    left: 2% !important;
    padding: 45px 15px !important;
    top: 1% !important;
  }

  #templates .accordion-container {
    display: flex;
    flex-direction: column;
  }

  .text-templates-edt {
    padding: 0px !important;
  }

  .order-boxes-templates {
    display: flex;
    flex-direction: column;
    gap: 30px;
  }

  .box-template {
    padding: 0px !important;
  }

  .edt-img-templates {
    width: 100%;
    height: 100%;
  }

  #templates {
    margin-top: 45px;
    padding-top: 25px !important;
  }

  .box-saiba-mais {
    width: 100% !important;
  }

  #saiba-mais .row {
    padding: 0px 20px;
  }

  .hero-section img {
    margin-left: 0px;
    height: 100%;
  }

  #double .accordion-content.active {
    text-align: center;
  }

  .icon-text {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  #benefits-results img.img-fluid {
    scale: 1.1;
  }

  #benefits-results .side-right {
    margin-left: 100px;
  }

  #benefits-results .side-left {
    margin-left: -90px;
  }

  .title-saiba-mais h1 {
    font-size: 34px !important;
  }

  #saiba-mais {
    padding: 60px 0px !important;
    margin-top: 50px;
  }

  #saiba-mais .col-md-4 {
    width: 100% !important;
  }

  #passos .h1 {
    display: contents;
  }

  .hero-section h2 {
    font-size: 2.2rem;
    margin-bottom: 0px;
  }

  .hero-section h1 {
    font-size: 2.5rem;
  }

  .hero-section .highlighted-text {
    font-size: 1rem;
  }

  .hero-section p {
    font-size: 1rem;
  }

  .hero-section .align-items-center {
    align-items: center !important;
    display: flex;
    flex-direction: column-reverse;
  }

  .hero-section {
    /* background-image: url('/imagens/logobg.png'); */
    background-position: right -40% top 7%;
    background-repeat: no-repeat;
    background-size: 95%;
  }

  .additional-content h2 {
    max-width: 100%;
    padding: 0;
  }

  #double .accordion-header {
    font-size: 16px;
    /* justify-content: center; */
  }

  footer.footer-copyright p {
    text-align: left !important;
  }

  #double p {
    font-size: 15px;
  }

  #double li {
    font-size: 14px;
  }

  #double .accordion-container {
    display: flex;
    margin: 0%;
    flex-direction: column-reverse;
  }

  #double .accordion {
    width: 100%;
  }

  #double .right-side {
    width: 100%;
    margin-left: 0px;
    flex-grow: 1;
  }

  #benefits-results h4 {
    font-size: 3rem !important;
    display: grid;
    justify-content: center;
    text-align: center;
    font-weight: 700 !important;
    margin-bottom: 0%;
    margin-top: 5%;
  }

  #benefits-results .col-md-8 {
    flex: 0 0 auto;
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 0px 0px 0px 0px;
    overflow: hidden;
  }

  #benefits-results .col-md-6 {
    flex: 0 0 auto;
    width: 96%;
    display: grid;
    justify-content: center;
    padding: 15% 5% 0%;
  }

  #benefits-results h3 {
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
  }

  #benefits-results p {
    font-size: 1rem;
    text-align: center;
  }

  #benefits-results .icon {
    display: flex;
    justify-content: center;
    margin-left: 38%;
  }

  #quemusa .carousel-heading {
    text-align: center;
    color: white;
    font-size: 2rem;
    font-weight: 700;
    margin: 1%;
  }

  #passos .intro-text p {
    font-size: 1rem;
  }

  #passos .intro-text h1 {
    font-size: 1.5rem;
  }

  #passos .card {
    position: relative;
    border-radius: 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    padding: 20px;
    flex: auto;
    box-sizing: border-box;
    transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    color: #000;
    background-color: #fff;
    margin-top: 8%;
  }

  #passos .card p {
    font-size: 1.5rem;
  }

  .title-passos p,
  .title-passos h2 {
    padding: 25px 20px !important;
    text-align: left;
  }

  #passos p,
  .title-passos p {
    font-size: 1.5rem !important;
    margin-bottom: 10% !important;
  }

  #call h1 {
    font-size: 25px;
    font-weight: 700;
    overflow: hidden;
  }

  #call .free {
    color: #ff007f;
    font-size: 2.5rem;
    font-weight: 700;
  }

  #call .subtitle {
    font-size: 1.5rem;
  }

  #call .cta {
    font-size: 1.5rem;
  }

  #navbarContent {
    text-align: center;
    margin-left: 8%;
  }

  #benefits-results .container {
    padding-right: 0px !important;
    padding-left: 0px !important;
  }

  .inverto .align-items-center {
    display: flex;
    flex-direction: column-reverse;
  }

  #double .owl-carousel .item img {
    width: 65% !important;
    height: auto;
    margin-left: 17%;
  }

  .row {
    --bs-gutter-x: 0 !important;
  }

  .btn.btn-outline-secondary {
    padding: 0px;
  }

  .d-flex {
    display: flex !important;
    margin-top: 8%;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }

}

@media (min-width: 769px) {
  .navbar-expand-lg .navbar-nav {
    flex-direction: row;
    margin: auto;
    margin-right: auto;
    margin-bottom: auto;
  }
}

/* css novo */

p.black-text {
  color: black !important;
}

p.extra-text-hero {
  font-size: 25px;
  color: #555;
  margin-bottom: 20px;
  line-height: 1.3;
  max-width: 650px;
  font-weight: 400;
}

.fx-2-hero,
.fx-1-hero {
  position: absolute;
  top: 18%;
  z-index: -1;
  right: 0;
}

@keyframes initial-appear {
  0% {
    opacity: 0;
    right: -600px;
  }

  100% {
    opacity: 1;
    right: 0px;
  }
}

@keyframes fadeInTop {
  0% {
    opacity: 0;
    top: -300px;
  }

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

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.fx-1-hero {
  opacity: 0;
  animation: initial-appear 1s .5s forwards;
}

.fx-2-hero {
  opacity: 0;
  animation: initial-appear 1s forwards;
}

.note-hero {
  opacity: 0;
  animation: fadeInTop 1.2s 1s forwards;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
}

.left-surg {
  opacity: 0;
  animation: fadeIn 2s .5s forwards;
}

.right-surg {
  opacity: 0;
  animation: rightSurg 1.2s .5s forwards;
}

.accordion-content li {
  font-size: 24px;
  font-weight: 500;
  padding-bottom: 20px;
}

#benefits-results img.img-fluid {
  border-radius: 10px;
}

img.icon-beneficios {
  margin-bottom: 15px;
}

.icon-mais-extra {
  height: 50px;
}

new.highlight {}

#saiba-mais {
  background: url(/imagens/fundo-saiba-mais.webp) no-repeat center;
  background-size: cover;
  padding: 60px;
}

.title-saiba-mais {
  text-align: center;
}

.title-saiba-mais h1 {
  color: white;
  margin-bottom: 0px;
  text-transform: uppercase;
  /* font-weight: 600; */
  padding-top: 15px;
  font-size: 3.5rem;
  line-height: 52px;
}

.title-saiba-mais p {
  color: white;
  font-weight: 500;
  text-transform: uppercase;
  padding-top: 25px;
}

.box-saiba-mais {
  background: linear-gradient(to right, #1b3084, #001978, #001c8e, #001978, #001050);
  margin: 15px 0px 25px;
  width: max-content;
  padding: 15px 20px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 0px 10px black;
  overflow: hidden;
  position: relative;
}

.box-saiba-mais h4 {
  color: white;
  display: flex;
  flex-direction: column;
  margin: 10px;
  text-transform: uppercase;
  font-weight: 300;
  letter-spacing: 2px;
}

span.span-elevel {
  font-size: 32px;
  margin-top: -6px;
}

#saiba-mais .col-md-4 {
  width: max-content;
}

#saiba-mais .row {
  display: flex;
  justify-content: center;
}


img.edt-saiba-mais-icon {
  height: 60px;
  filter: invert(1);
}

.animationBox {
  animation: tada 3s infinite;
}

.animationCircle {
  animation: heartBeat 3s infinite;
}

.activeBox {
  position: relative;
  animation: none;
}

.noAnimationBox {
  animation: none !important;
}

.box-saiba-mais:hover {
  cursor: pointer;
}

.title-passos {
  text-align: center;
}

.title-passos h2 {
  font-size: 55px;
  font-weight: 700;
}

.title-passos p {
  font-size: 24px;
  padding: 0px 100px;
}

.card-passos:hover {
  background: #001c772e;
}

.card-passos {
  transition: all .5s;
  text-align: center;
  border-radius: 20px;
  background: #dfe3eb;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.14);
  margin-bottom: 30px;
}

.text-appear {
  overflow: hidden;
  padding: 0px 32px;
}

.text-passos>h2 {
  overflow: hidden;
}

.text-passos {
  width: 100%;
  background: #FFFFFF;
  border-radius: 0 0 10px 10px;
  text-align: center;
  padding: 25px 20px;
}

.icone-call {
  display: flex;
  justify-content: center;
  position: relative;
}

.call-item-ico {
  padding: 8px 30px 3px;
  border-radius: 20px 20px 0px 0px;
  background: white;
  width: max-content;
}

img.img-passos {
  width: 100%;
  transform: translateY(40px);
  margin-top: -40px;
}

#passos-new .final-text {}

p.after-p {
  font-size: 20px !important;
  margin-bottom: 0px !important;
}

.rotate-seta {
  rotate: 0deg !important;
  animation: none !important;
}

.hide-item {
  opacity: 0;
  position: absolute;
}

#passos-new .text-passos p {
  font-size: 20px;
}

.opacity-0 {
  opacity: 0;
}

.opacity-1 {
  opacity: 1 !important;
}

section#passos-new {
  padding: 2% 0px;
}

.flash {
  height: 860px;
  background-color: #ffffff21;
  width: 70px;
  margin: -160px;
  rotate: 390deg;
  transform: translateY(-20%);
}

.flashs {
  position: absolute;
  z-index: -2;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: all .5s;
}

.box-saiba-mais:hover .flashs {
  transform: translateX(520px);
}

.order-boxes-templates {
  display: flex;
  margin: 40px 0px 0px 0px;
}

.icon-template {
  width: 60px;
  height: 60px;
  background: linear-gradient(144deg, #00124c, #00124c, #00124c, #032695, #022db8, #012cb5, #001c77);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
  border-radius: 10px;
}

.box-template h6 {
  font-weight: 700;
  text-transform: capitalize;
  font-size: 28px;
}

.box-template p {
  font-size: 18px;
}

.flut-text h4 {
  text-transform: capitalize;
  margin-bottom: 0px !important;
  color: white;
  font-size: 24px;
}

.flut-text {
  width: max-content;
  background: linear-gradient(144deg, #00124c, #00124c, #00124c, #032695, #022db8, #012cb5, #001c77);
  padding: 10px 10px;
  border-radius: 10px;
  margin-bottom: 15px;
}

.text-top h2 {
  font-size: 54px;
  font-weight: 700;
}

.new-container {
  margin: 0px 180px !important;
}

section#benefits-results {
  padding-top: 45px;
}

.text-bottom p {
  font-size: 20px;
}

.text-templates-edt {
  padding: 0px 80px 0px 0px;
  display: flex;
  flex-direction: column;
}

.text-bottom {
  margin-top: 20px;
}

.box-template {
  width: 100%;
  padding: 0px 75px 0px 0px;
}

img.icon-template-edt {
  filter: invert(1);
  height: 38px;
}

section#templates {
  padding: 1px 0px 12px 0px;
  background: url(/imagens/bg-templates.webp) no-repeat center;
  background-size: cover;
}

.text-top,
.text-bottom {
  margin-left: 8px;
}

img.edt-img-templates {
  width: 100%;
}

/* fim do css novo */

/* keyframes novos */

.right-side .active {
  animation: swing 1s;
}

.icon-call-edt {
  /* Movimento linear para continuidade */
  transition: all .5s;
  animation: tada infinite 2s;
  rotate: 180deg;
}

@keyframes bounce-2 {
  0% {
    transform: translateY(0);
    /* Posição inicial */
  }

  50% {
    transform: translateY(-3px);
    /* Subida */
  }

  100% {
    transform: translateY(0);
    /* Retorno à posição inicial */
  }
}

@keyframes rightSurg {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }

  100% {
    opacity: 1;
    transform: translateX(0%);
  }
}

@keyframes slideDownExtra {
  0% {
    transform: translateY(100%);
  }

  100% {
    opacity: 1;
    transform: translateY(0%);
  }
}

@keyframes slideDownExtraOut {
  0% {
    transform: translateY(0%);
  }

  100% {
    opacity: 1;
    transform: translateY(100%);
  }
}

/* fim dos keyframes novos */

/* extra css */

#quemusa .owl-carousel .item:hover img {
  scale: 1.1;
}

.icon-call-edt:hover {
  cursor: pointer;
}

.fa-brands:before,
.fa-regular:before,
.fa-solid:before,
.fa:before,
.fab:before,
.far:before,
.fas:before {
  content: var(--fa);
}

a.btn-whatsapp {
  text-decoration: none
}

.fa-whatsapp {
  --fa: "\f232";
}

.btn-whatsapp {
  position: fixed;
  bottom: 50px;
  right: 50px;
  width: 60px;
  height: 60px;
  background-color: #25D366;
  border-radius: 50%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, .2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  animation: pulse 2s infinite
}

.btn-whatsapp i {
  color: #fff;
  font-size: 2.25rem
}

#campoOutro {
  margin-top: 15px;
}

form.formulario {
  position: fixed;
  z-index: 99;
  background-color: white;
  padding: 70px;
  top: 10%;
  bottom: 10%;
  left: 34%;
  right: 20%;
  height: max-content;
  border-radius: 20px;
  width: max-content;
  box-shadow: 0px 10px 90px 800px #00000073;
}

.animationSlideDown {
  animation: slideDownExtra .5s forwards;
}

.animationSlideDownOut {
  animation: slideDownExtraOut .5s;
}

.formulario h5 {
  /* text-align: center; */
  font-size: 28px;
  margin-bottom: 40px;
}

.form-control {
  font-size: 22px;
}

button.btn.btn-success.form-submission {
  font-size: 20px;
  margin-top: 25px;
}

.close-icon {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  margin-top: -20px;
  margin-bottom: 20px;
}

section#planos {
  padding: 80px 0px;
  background: #f2f2f2;
}

.title-planos {
  text-align: center;
}

.title-planos h2 {
  font-size: 3.5rem;
  text-transform: uppercase;
  margin-bottom: 30px;
}

.cards-container {
  display: flex;
  justify-content: space-around;
}

.card-planos {
  background: white;
  border-radius: 20px;
  padding: 60px 60px;
  margin: 20px 35px;
  height: auto;
  width: 100%;
}

.card-planos .title-card {
  font-size: 36px;
  margin-bottom: 32px;
}

.item-planos {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.item-planos h4 {
  margin-bottom: 0px;
  margin-left: 10px;
  font-size: 26px;
}

.vantagens-planos {
  margin: 20px 0px;
}

.price-planos {
  display: flex;
  margin-top: 40px;
  align-items: center;
  justify-content: center;
}

span.elevel-text {
  font-size: 75px;
}

.btn-planos {
  background: linear-gradient(144deg, #00124c, #00124c, #00124c, #032695, #022db8, #012cb5, #001c77);
  padding: 20px;
  color: white;
  text-decoration: none;
  font-size: 25px;
  border-radius: 15px;
  width: 100%;
  border: transparent;
  filter: drop-shadow(2px 4px 10px black);
  transition: all .5s;
}

.btn-planos-contain {
  margin-top: 40px !important;
  transition: all .5s;
}

.card-planos p {
  font-size: 22px;
}

.title-planos p {
  font-size: 28px;
}

p.opacity-minus {
  opacity: 0.7;
}

.extra-card .btn-planos-contain:hover {
  scale: 1.1;
}

.container-extra {
  padding: 0px 60px;
}

.item-planos i {
  font-size: 20px;
}

footer.footer-copyright {
  background-color: #eee;
  padding: 15px 0;
}

footer.footer-copyright a {
  text-decoration: none;
}

footer.footer-copyright p {
  margin: 0;
  font-size: 22px;
}

footer.footer-copyright img {
  margin-left: 3px;
  max-height: 23px;
  margin-bottom: 4px;
}

.extra-card .card-planos {
  width: 70%;
  text-align: center;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

.extra-card {
  display: flex;
  justify-content: center;
}

.all-price {
  display: flex;
}

.price-2 {
  gap: 30px;
  display: flex;
  align-items: center;
  width: 40%;
  justify-content: center;
}

h3.highlight.plus-text {
  font-size: 54px;
}

h3.text-price.highlight {
  font-size: 42px;
  text-align: center;
}

.extra-card .vantagens-planos {
  display: flex;
  margin-top: 50px;
  flex-direction: column;
  align-items: center;
  margin-bottom: 5px;
}

.tog-itens {
  display: flex;
  gap: 30px;
  justify-content: center;
  align-items: center;
}

.extra-card a.btn-planos {
  padding: 25px 115px;
}

span.responsive-taxa.highlight {
  display: none;
}

.loading::before {
  content: " ";
  width: 100% !important;
  height: 100% !important;
  background: white;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.loading::after {
  content: "";
  border: 16px solid #f3f3f3;
  /* Light grey */
  border-top: 16px solid #3498db;
  /* Blue */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
  position: absolute;
  top: 45%;
  left: 45%;
  right: 0;
  bottom: 0;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.loading {
  width: 100% !important;
  height: 100% !important;
  position: absolute !important;
  top: 0px !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
}

.apartir-hg {
    margin-bottom: 0px;
}

/* ----------------------------- */