h1, h2, h3, h4, h5, h6 {
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-style: normal;
  }

  body {
    font-family: "Lato", sans-serif;
    font-weight: 400;
    font-style: normal;
    zoom: 65%;
    color: #252525;
  }

  strong {
    font-weight: 700 !important;
  }

  #header-body {
    background-image: url('../../images/background.jpeg');
    background-size: cover;
    background-position: center;
  }

  .header-body__first {

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

    padding: 171px 24px 0;
  }

  .header-body__first img {
    width: 100%;
    max-width: 403px;
  }

  .header-body__first div {
    margin-top: 82px;
    text-align: center;
    max-width: 832px;
  }

  .header-body__first div h1 {
    font-size: 60px;
    line-height: 60px;
  }

  .header-body__first div p {
    font-size: 32px;
    line-height: 38px;
  }

  .header-body__second {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 60px;

    margin-top: 180px;

    padding: 171px 24px;
  }

  .header-body__second .card{
    min-height: 545px;
    width: 525px;

    background-color: rgba(255, 255, 255, 0.01);

    border-radius: 23px;
    display: flex;
    flex-direction: column;
    border: 1.42px solid #FFFFFF40;

    backdrop-filter: blur(25px);

  }

  .header-body__second .card h4 {
    font-size: 42px;
    color: #FFFFFF;
  }

  .header-body__second .card:first-child {
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .card_form_content {
      display: flex;
      flex-direction: column;
      gap: 40px;
      padding: 49px 70px;

      color: #FFFFFF;
      font-size: 24px;
      line-height: 32px;

      max-width: 482px;
      width: 100%;
  }

  .card__content {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 49px 70px;

    color: #FFFFFF;
    font-size: 24px;
    line-height: 32px;

    max-width: 482px;
    width: 100%;
  }

  .card__content h4 {
    line-height: 48px;
  }

  .card__content a {
    color: #FFFFFF;
  }

  .card__footer {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px;
    font-size: 24px;

    color: #FFF;
  }

  .card__footer a {
    color: #FFFFFF;
  }

  .card form {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
  }

  .input {
    font-size: 28px;
    padding: 26px 30px;
    line-height: 34px;
    border-radius: 999px;
    border: 1px solid #FFFFFF;
    background-color: transparent;
    color: #FFFFFF;
    margin-top: 30px;
    width: 100%;
  }

  .input:focus {
    outline: none;
  }

  .input::placeholder {
    color: #FFFFFF;
  }

  .input-password {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: auto;
  }

  .input-password button {
    background-color: transparent;
    border: none;
    color: #FFFFFF;
    cursor: pointer;
    padding: 0;
  }

  .input-password input {
    width: 100%;
    font-size: 28px;
    background-color: transparent;
    outline: none;
    border: 0;
    color: #FFFFFF;
  }

  .input-password input::placeholder {
    color: #FFFFFF;
  }

  .form-helper {
    color: #FFF;
    text-align: center;
    font-size: 22.68px;
    margin-top: 24px;
    margin-bottom: 38px;
  }

  .form-helper a {
    color: #FFF;
  }

  form button {
    background-color: #FFFFFF;
    color: #000;
    outline: 0;
    border: 0;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 32px;
    line-height: 34.02px;
    padding: 11px;
    border-radius: 11px;
    cursor: pointer;
  }

  .info {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 160px 24px 0;
  }

  .info h2 {
    font-size: 60px;
    line-height: 37px;
  }

  .info > p {
    font-size: 24px;
    line-height: 32px;
    margin-top: 30px;
    margin-bottom: 127px;
  }

  .info-content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 200px;

    max-width: 1377px;
  }

  .info-right, .info-left {
    flex: 1;
  }

  .info-right h3 {
    font-size: 42px;
    line-height: 48px;
  }

  .info-right p {
    font-size: 24px;
    line-height: 32px;
    max-width: 439px;

    margin-top: 52px;
    margin-bottom: 45px;
  }


  .info-left {
    display: flex;
    flex-direction: column;
    gap: 150px;
  }

  .info-card {
    display: flex;
    gap: 25px;
  }

  .info-card h4 {
    font-size: 32px;
    margin-bottom: 5px;
  }

  .info-card p {
    font-size: 24px;
    line-height: 32px;
  }

  .mockup {
  margin-top: 80px;
  }

  .btn-whats {
    display: flex;
    justify-content: center;
    align-items: center;

    gap: 10px;

    color: #252525;
    text-decoration: none;
    border: 1px solid #252525;
    border-radius: 999px;
    font-size: 28px;
    font-weight: 500;
    line-height: 32px;
    padding: 23px 45px;
    cursor: pointer;
  }

  .btn-whats:hover {
    background-color: #252525;
    color: #FFF;
  }

  .download {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 130px 24px 111px;

    gap: 52px;
  }

  .download div {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 40px;
  }

  .download img {
    max-width: 17rem;
  }

  .appstore:hover {
    content: url('../../images/appstore-variant.png');
  }

  .googleplay:hover {
    content: url('../../images/googleplay-variant.png');
  }

  footer {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 60px;
    background-color: #E3E3E3;
    color: #FFFFFF;
  }

  footer img {
    width: 100%;
    max-width: 16rem;
  }

  @media screen and (max-width: 920px) {

    .info, .header-body__first, .header-body__second {
      padding-left: 40px;
      padding-right: 40px;
    }
    .info-content {
      align-items: flex-start;
    }
  }

  @media screen and (max-width: 780px) {
    .info-content {
      flex-direction: column;
      gap: 60px;
    }

    .info-right, .info-left {
      width: 100%;
    }

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

    @media screen and (max-width: 650px) {
      .info h2 {
        line-height: 60px;
        text-align: center ;
      }

      .info > p {
        text-align: center;
      }
    }
  }