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

a {
  text-decoration: none;
}

/* ROOT */
:root {
  --header-height: 10rem;

  /* COLOR */
  --body-color: #f2f2f2;
  --blue: #093572;
  --light-blue: #3fb4e7;

  font-size: 62.5%;
  /* 1rem = 10px */

  /* DESKTOP MOBILE */
  --title-font: 4rem;
  --subtitle-font: 2.6rem;
  --subtitle-font-card: 2rem;
  --paragraph-font: 1.6rem;

  /* DESKTOP FONTS */
  --title-fontD: 6rem;
  --subtitle-fontD: 3rem;
  --paragraph-fontD: 2rem;

  /* MARGIN */
  --margin-title: 2rem;
  --margin-section: 10rem;

  /* BORDER-RADIUS */
  --radius: .6rem;

  /* POPUP */
  --duration-popup: 30s;
}

/* BASE */
html {
  scroll-behavior: smooth;
}

body {
  background: var(--body-color);
  font-family: "Poppins", sans-serif;
}

/* TITLE HOME */
.titleHome h1 {
  font-size: 10rem;
  color: var(--blue);
  font-weight: 700;
  margin-bottom: var(--margin-title);
}

.titleHome h1 span {
  font-weight: 400;
}

.titleHome p {
  font-size: var(--paragraph-font);
  color: var(--blue);
  font-weight: 400;
  margin-bottom: var(--margin-title);
}

/* TITLE */
.title h1 {
  font-size: 2.6rem;
  color: var(--blue);
  font-weight: 700;
  margin-bottom: var(--margin-title);
  line-height: 4rem;
}

.title p {
  font-size: var(--paragraph-font);
  color: var(--blue);
  font-weight: 400;
  margin-bottom: var(--margin-title);
  line-height: 2.2rem;
}

/* BUTTON */
.content-button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.buttonConv {
  box-shadow: inset 0px -3px 7px 0px #3dc21b;
  background: linear-gradient(to bottom, #0dbf3d 5%, #5cbf2a 100%);
  border-radius: 6px;
  border: 1px solid #18ab29;

  cursor: pointer;
  color: #ffffff;
  font-size: 1.6rem;
  font-weight: 700;
  text-decoration: none;
  text-shadow: 0px 1px 0px #2f6627;

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

  height: 5rem;
  max-width: 100%;

  padding: 0 1rem 0 1rem;

  text-transform: uppercase;
  cursor: pointer;
}

.buttonConv:hover {
  background: linear-gradient(to bottom, #5cbf2a 100%, #097a27 5%);
  border: none;
  text-shadow: none;
  box-shadow: none;
}

.button {
  box-shadow: inset 0px -3px 7px 0px #3dc21b;
  background: linear-gradient(to bottom, #0dbf3d 5%, #5cbf2a 100%);
  border-radius: 3px;
  border: 1px solid #18ab29;

  cursor: pointer;
  color: #ffffff;
  font-size: 1.8rem;
  font-weight: 700;
  text-decoration: none;
  text-shadow: 0px 1px 0px #2f6627;

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

  height: 5rem;
  width: 15rem;

  text-transform: uppercase;
  cursor: pointer;
}

.button:hover {
  background: linear-gradient(to bottom, #5cbf2a 100%, #097a27 5%);
  border: none;
  text-shadow: none;
  box-shadow: none;
}

.buttonWhatsapp {
  width: 6rem;

  position: fixed;
  right: 3rem;
  bottom: 3rem;

  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  gap: 1rem;
}

.buttonWhatsapp .whatsapp {
  box-shadow: inset 0px -3px 7px 0px #3dc21b;
  background: linear-gradient(to bottom, #0dbf3d 5%, #5cbf2a 100%);
  background-color: #0dbf3d;
  border: 1px solid #18ab29;
  cursor: pointer;

  height: 6rem;
  width: 6rem;
  border-radius: 50%;

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

.buttonWhatsapp .whatsapp:hover {
  transform: scale(1.1);
}

.buttonWhatsapp .whatsapp svg,
.buttonWhatsapp #backToTop svg {
  margin-top: -0.2rem;
}

.buttonWhatsapp #backToTop {
  display: none;
  background-color: var(--blue);
  height: 6rem;
  width: 6rem;
  border-radius: 50%;

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

  cursor: pointer;
}

.buttonWhatsapp #backToTop:hover svg {
  transform: rotate(-45deg);
  transition: 0.5s;
}

.imgBan {
  width: 100%;
}


/* LAYOUT */
.wrapper {
  width: min(700rem, 100%);

  margin-left: 2.5rem;
  margin-inline: auto;

  padding-inline: 2.5rem;
}

.section {
  padding: calc(0.5rem + var(--header-height)) 0;
}

/* HEADER */
#header {
  background-color: var(--blue);
  height: 7rem;
  width: 100%;

  position: fixed;
  top: 0;
  z-index: 100;

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


#header nav {
  display: flex;
  align-items: center;
  justify-content: center;

  height: 100%;
  width: 100%;
}

#header .img img {
  width: 18rem;
}

#header .button {
  -webkit-animation: pulse 1s ease infinite;
  animation: pulse 1s ease infinite;
}

#header .button:hover {
  -webkit-animation: none;
}

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
  }

  25% {
    -webkit-transform: scale(1.1);
  }

  50% {
    -webkit-transform: scale(1);
  }

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

/* HOME */
#home {
  background-color: var(--blue);
  height: 100%;
  width: 100%;

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

#home .container {
  height: 100%;
  margin-top: -7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column-reverse;
}

#home .container .titleHome h1 {
  text-align: center;
  color: #ffffff;
  font-size: 3rem;
  text-align: center;
  padding: 0 0 2rem 0;
  margin-top: 7rem;
  line-height: 3.5rem;
}

#home .container .titleHome h1 span {
  color: var(--light-blue);
}


#home .container .titleHome p {
  text-align: center;
  color: #ffffff;
  text-align: center;
  font-size: 1.6rem;
  padding: 1rem 1rem 0 0;
}

#home .container .titleHome .hero-buttons {
  display: flex;
  align-items: left;
  justify-content: left;
  padding: 0 1rem 0 0;
}

#home .container .hero-buttons .button {
  height: 6rem;
  width: 100%;
}


#pcta .wrapper {
  text-align: center;
}

#pcta .button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* RECURSOS */
#recursos .title {
  text-align: center;

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

#recursos .title h1 {
  margin-top: -2rem;
}

#recursos .cards-recursos {
  display: grid;
  place-items: center;
  grid-template-columns: repeat(1, 1fr);
  gap: 2rem;
  padding: 2rem;
}

#recursos .cards-recursos .card {
  height: 100%;
  width: 100%;

  background-color: #ffffff;

  border-radius: var(--radius);
  padding: 2rem;

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

  gap: 1rem;
}

#recursos .cards-recursos .card:hover {
  transform: scale(1.1);
}

#recursos .cards-recursos .card .img {
  width: 100%;

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

#recursos .cards-recursos .card .title h2 {
  font-size: 2rem;
  color: var(--blue);
}

#recursos .cards-recursos .card .title p {
  font-size: 1.6rem;
  text-align: center;
}

/* CTA */
#cta {
  margin-top: -10rem;
}

#cta .wrapper {
  background-color: var(--blue);

  padding: 2rem;

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

  text-align: center;
}

#cta .title {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#cta .title h1 {
  color: #ffffff;
  font-size: 3rem;
  line-height: 5rem;
}

#cta .info {
  display: flex;
  align-items: center;
  flex-direction: column;
}

#cta .title p {
  color: #ffffff;
  text-align: center;
  font-size: 1.6rem;
  line-height: 2rem;
}

#cta .title .info .hero-buttons .button {
  width: 100%;
  padding: 2rem;
}

/* DEMONSTRAÇÃO */
#demonstracao {
  background-color: var(--blue);
}

#demonstracao .title {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#demonstracao .title h1 {
  text-align: center;
  margin-top: -2rem;
  color: #ffffff;
}

#demonstracao .title p {
  color: #ffffff;
}


#demonstracao .details {
  display: flex;
  flex-direction: column;

  gap: 2rem;
  margin-top: 2rem;
}

#demonstracao .details .card .img {
  height: 10rem;

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

#demonstracao .details .card h1 {
  font-size: 1.8rem;
  line-height: 2rem;
  margin-top: 0;
}

#demonstracao .details .card p {
  font-size: 1.6rem;
  line-height: 2rem;
}

#demonstracao .hero-buttons .button {
  height: 6rem;
  width: 100%;
}

/* PLANOS */
#planos .title h1 {
  text-align: center;
}

#planos .nav-planos {
  height: 4rem;

  border: 1px solid hsla(223, 37%, 36%, 0.2);
  border-radius: var(--radius);
  margin-bottom: var(--margin-title);

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

#planos .cards-planos {
  display: grid;
  place-items: center;
  grid-template-columns: repeat(1, 1fr);
  gap: 2rem;

  padding: 2rem 0 2rem 0;
}

#planos .card {
  height: 100%;
  width: 35rem;

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

  background-color: #ffffff;
  padding: 2rem;
  border-radius: var(--radius);

  text-align: center;

  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1), 0 3px 6px rgba(0, 0, 0, 0.1);
}

#planos .card#maisvendido {
  border: 1px solid #2d5286;
  position: relative;
}

#planos .card#maisvendido::after {
  content: "Mais vendido";
  height: 2.5rem;
  width: 15rem;

  font-size: 1.8rem;
  font-weight: 700;
  color: var(--body-color);
  background-color: var(--blue);

  border: 1 px solid rgba(0, 0, 0, 0.288);
  border-radius: 0.5rem;

  position: absolute;
  top: -1.5rem;
  right: 1rem;
}

#planos .card:hover .button {
  -webkit-animation: pulse 1s ease infinite;
  animation: pulse 1s ease infinite;
}

#planos .card#personalizado {
  background-color: var(--blue);
  color: var(--body-color);
}

#planos .card#personalizado h1 {
  background-color: hsla(0, 0%, 100%, 0.2);
  color: var(--body-color);
  width: 25rem;
}

#planos .card#personalizado p {
  font-size: var(--paragraph-font);
  line-height: 2rem;
  color: var(--body-color);
  font-weight: 700;
  margin-bottom: var(--margin-title);
}

#planos .card#personalizado .img {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--margin-title);
}

#planos .card#personalizado .img img {
  width: 25rem;
}

#planos .card#personalizado .button {
  height: 5rem;
  width: 100%;
  padding: 2rem;
}

#planos .card .valores {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-bottom: var(--margin-title);
}

#planos .card .title h1 {
  height: 5rem;
  width: 100%;
  background-color: hsla(215, 50%, 35%, 0.2);
  color: #2d5286;
  text-align: center;
  border-radius: 1rem;
  font-size: 2.5rem;
  font-weight: 800;

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

#planos .card ul {
  font-size: var(--paragraph-font);
  line-height: 2.5rem;
  list-style: none;
  margin-bottom: var(--margin-title);
  color: var(--blue);
  font-weight: 700;
}

#planos .card .valores h3:nth-child(1) {
  color: #a5a5a5;
  text-decoration: line-through;
  font-size: 1.6rem;
  margin-top: 2rem;
}

#planos .cards-planos .card .line {
  height: 1px;
  width: 100%;
  background-color: #e6e6e6;
  margin-bottom: var(--margin-title);
}

#planos .cards-planos .card h3 {
  color: #a5a5a5;
  font-size: 1.4rem;
  margin-bottom: var(--margin-title);
}

#planos .cards-planos .card .button {
  height: 4.5rem;
  width: 100%;
  padding: 2rem;
}

#planos .exPreço {
  color: red;
  text-decoration: line-through
}

#planos .preço {
  font-size: 5rem;
  color: #0dbf3d;
}

#planos .preço span {
  font-size: 2rem;
  color: #0dbf3d;
}

#planos .iconsPlans {
  display: flex;
  padding: .5rem;
  margin-top: 1rem;
}

#planos .iconsPlans .icons {
  display: flex;
  align-items: center;
  justify-content: center;
}

#planos .iconsPlans .icons p {
  font-size: 1.4rem;
  width: 50%;
  text-align: right;
}

#planos .iconsPlans .icons svg {
  padding: .5rem;
}

#planos .iconsPlans .icons p:nth-child(2) {
  text-align: left;
}

#planos .iconsPlans .divide {
  height: 100%;
  width: 1px;
  background-color: rgb(145, 145, 145);
}

/* COMENTARIO */
#comentario .title p {
  text-align: center;
}

#comentario .title h1 {
  text-align: center;
  margin-top: -1rem;
  padding-bottom: 2rem;
}

#comentario .cards {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 2rem;
  padding: 2rem;
}

#comentario .card {
  background-color: #d9d9d9;
  padding: 2rem;
  border-radius: .6rem;
  height: 25rem;

  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

#comentario .card .comentario {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

#comentario .card p {
  font-size: 1.6rem;
}

#comentario .card .comentario .star {
  font-size: 3rem;
  margin-top: 1rem;
}

#comentario .card .comentario h1 {
  font-size: 2rem;
}

#comentario .card .comentario .img {
  background-color: blue;
  height: 7rem;
  width: 7rem;
  border-radius: 50%;
}

/* GARANTIA */

#garantia {
  background-color: var(--blue);
}

#garantia .title h1 {
  color: #ffffff;
  text-align: center;
}

#garantia .title p {
  color: #ffffff;
  text-align: center;
}

#garantia .img {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 0 1rem 0;
}

#garantia .img img {
  height: 30rem;
}

#garantia .info .title h1 {
  color: #ffffff;
}

#garantia .info p {
  color: #ffffff;
}

/* CTA 2*/
#cta-2 {
  margin: 1rem;
}

#cta-2 .wrapper {
  background-color: var(--blue);
  border-radius: .6rem;
  padding: 2.5rem;

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

#cta-2 .title h1 {
  color: #ffffff;
  font-size: 2rem;
  line-height: 3rem;
}

#cta-2 .title p {
  color: #ffffff;
  text-align: center;
  font-size: 1.6rem;
  line-height: 2rem;
}

#cta-2 .title .hero-buttons .button {
  width: 100%;
  padding: 2rem;
}

/* FAQ */
#faq .wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

#faq .header {
  text-align: center;
  margin-bottom: var(--margin-section);
}

#faq .header h2 {
  color: var(--blue);
  font-weight: 400;
  font-size: 1.6rem;
}

#faq .header h1 {
  font-size: var(--subtitle-font);
  color: var(--blue);
}

.faqs-container {
  max-width: 70rem;
}

.faq {
  background-color: #ffffff;
  border-radius: 1rem;
  padding: 1rem;
  position: relative;
  overflow: hidden;
  margin: 2rem 0;
  transition: 0.3s ease;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1), 0 3px 6px rgba(0, 0, 0, 0.1);
  color: var(--blue);
}

.faq-title {
  margin: 0 35px 0 0;
  font-size: 1.6rem;
}

.faq.active .faq-title {
  color: var(--blue);
  font-size: 2.1rem;
}

.faq-text {
  display: none;
  margin: 30px 0 0;
  font-size: 1.2rem;
}

.faq.active .faq-text {
  display: block;
  color: var(--blue);
  font-size: 1.6rem;
}

.faq-toggle {
  background-color: transparent;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  padding: 0;
  position: absolute;
  top: 0.7rem;
  right: 1.5rem;
  height: 2.3rem;
  width: 2.3rem;
}

.faq-toggle {
  outline: none;
  background-color: #2d5286;
}

.faq.active .faq-toggle {
  background-color: #2d5286;
}

.faq.active .faq-toggle .fa-chevron-down {
  display: none;
}

.faq-toggle .fa-times {
  display: none;
}

.faq.active .faq-toggle .fa-times {
  display: block;
}

/* FOOTER */
#footer .footer {
  background-color: var(--blue);
  padding: 2rem;
}

#footer .left p {
  font-size: 1.5rem;
  color: var(--body-color);

  padding: 1.5rem 0 1.5rem 0;
}

#footer .left img {
  width: 15rem;
}

#footer .left p strong {
  color: var(--body-color);
}

#footer .mid h3 {
  margin-top: var(--margin-title);
  margin-bottom: var(--margin-title);
  font-size: 1.8rem;
  color: var(--body-color);
}

#footer .mid ul li {
  text-decoration: none;
  color: var(--body-color);
  font-size: 1.5rem;
  margin-bottom: 1rem;
  list-style: none;
}

#footer a {
  color: currentColor;
}

#footer .mid ul li:hover {
  color: var(--light-blue);
}

footer {
  background-color: var(--body-color);
  padding: 1rem 0 1rem 0;

}

footer .wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column-reverse;
  color: var(--blue);

  font-size: .7rem;
}

.desenvolvido {
  display: flex;
  align-items: center;

  font-size: 1rem;
}

.desenvolvido img {
  width: 13rem;
  margin-left: 2rem;
}

/* 700 */
@media (min-width: 700px) {
  .wrapper {
    width: min(80rem, 100%);

    margin-left: 1.5rem;
    margin-inline: auto;

    padding-inline: 1.5rem;
  }

  /* TITLE */
  .title h1 {
    font-size: 3rem;
    line-height: 3.2rem;
  }

  .title p {
    font-size: 2rem;
    line-height: 3rem;
  }

  /* home */

  #home .container .titleHome h1 {
    font-size: 4rem;
    line-height: 5rem;
  }

  #home .container .titleHome h1 span {
    color: #0198ff;
  }

  #home .container .titleHome .hero-buttons {
    align-items: center;
    justify-content: center;
  }





  /* RECURSOS */
  #recursos .cards-recursos {
    margin-top: var(--margin-title);
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }

  /* CTA */
  #cta .wrapper {
    background-color: var(--blue);

    border-radius: .6rem;
    padding: 2.5rem;

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

  #cta .title {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }

  #cta .title h1 {
    color: #ffffff;
    font-size: 3rem;
    line-height: 5rem;
    width: 50%;
  }

  #cta .info {
    width: 50%;

    display: flex;
    align-items: center;
    flex-direction: column;
  }

  #cta .title p {
    color: #ffffff;
    text-align: center;
    font-size: 1.6rem;
    line-height: 2rem;
  }

  #cta .title .info .hero-buttons .button {
    width: 100%;
    padding: 2rem;
  }

  /* DEMONSTRAÇÃO */
  #demonstracao .info .video {
    width: 100%;
    height: 100%;
    margin-top: 2rem;
  }

  #demonstracao .details {
    display: flex;
    flex-direction: row;

    gap: 2rem;
    margin-top: 2rem;
    background-color: red;
    padding: 2rem;
  }

  #comentario .cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  /* GARANTIA */
  #garantia .title h1 {
    margin-top: 3rem;
  }

  /* FAQ */
  .faqs-container {
    max-width: 100rem;
  }

  /* FOOTER */
  #footer .footer .wrapper {
    display: flex;
    flex-direction: row;
  }

  #footer .left p {
    width: 80%;
  }

  #footer .mid {
    width: 200%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  #footer .mid ul li:hover {
    color: var(--light-blue);
  }

  footer .wrapper {
    flex-direction: row;
  }

  #home .container .hero-buttons {
    flex-direction: row;
  }

  #home .container .hero-buttons .button {
    width: 40rem;
    margin-top: 0;
  }

  #home .container .hero-buttons #button-reuniao {
    max-width: 30rem;
  }

}

@media (min-width: 1100px) {
  .wrapper {
    width: min(115rem, 100%);

    margin-left: 1.5rem;
    margin-inline: auto;

    padding-inline: 1.5rem;
  }

  /* TITLE HOME */
  .titleHome h1 {
    font-size: 8rem;
  }

  .titleHome p {
    font-size: 2.2rem;
  }

  /* TITLE */
  .title h1 {
    font-size: 3.5rem;
    line-height: 4rem;
  }

  .title p {
    font-size: var(--paragraph-fontD);
    line-height: 3.2rem;
  }

  /* BUTTON */
  .button {
    height: 5rem;
    width: 25rem;
    font-size: 2.2rem;
  }

  /* HEADER */
  #header {
    height: 8rem;
  }

  #header .img img {
    width: 20rem;
  }

  /* HOME */

  #home .container .titleHome p {
    font-size: 2rem;
    padding: 2rem 1rem 0 0;
  }

  #home .container .hero-buttons .button {
    width: 100%;
    padding: 1rem;
  }

  #home .container .titleHome {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
  }

  #home .container .titleHome .video-hero {
    width: 50%;
  }

  #home .counter {
    width: 100%;
    text-align: center;
  }

  #pcta .hero-buttons {
    width: 100%;

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

  #pcta .button {
    width: 50%;
  }

  /* RECURSOS */
  #recursos {
    margin-top: -10rem;
  }

  #recursos .cards-recursos {
    display: grid;
    place-items: center;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }

  /* CTA */
  #cta .title h1 {
    color: #ffffff;
    font-size: 4rem;
    line-height: 5rem;
  }

  .imgBan {
    width: 50%;
  }


  /* DEMONSTRAÇÃO */
  #demonstracao .info .video {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--margin-title);
  }

  #demonstracao .info .video iframe {
    height: 60rem;
    width: 100%;
  }

  /* PLANOS */
  #planos .cards-planos {
    grid-template-columns: repeat(3, 1fr);

    padding: 2rem 5rem 2rem 5rem;
  }

  #planos .cards-planos .card {
    max-width: 30rem;
  }

  #planos .cards-planos .card .title h1 {
    font-size: 2rem;
  }

  #planos .cards-planos .card:nth-child(1) .button {
    margin-top: 16%;

  }

  #planos .cards-planos .card:nth-child(1) .info {
    margin-top: 35%;

  }
}