body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 90vh;

  > header {
    background-color: #00208a;
    font-size: 20px;
  }

  >.section1{
    >h1{
      margin-bottom: 20px;
      font-size: 30px;
    }
    >p{
      font-weight: 300;
      color: rgba(255, 255, 255, 0.8);
    }
  }

  > .section2 {
    > .row {
      position: relative;

      .picture {
        margin-left: auto;

        > img {
          width: 100%;
        }
      }
      .form {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;

        h1 {
          width: fit-content;
          padding: 0 0 15px 30px;
          border-bottom: solid 4px #0d6efd;
        }
        .box {
          width: fit-content;
          height: 100%;
          margin: 0 auto;
          background-color: #ffffff;
          color: #161616;

          h2 {
            width: fit-content;
            font-weight: 600;
            padding: 0 20px 10px 20px;
            border-bottom: solid 2px #0d6efd;
          }
          .inputs {
            max-width: 400px;
            width: 100%;

            input {
              background-color: #f0f0f0;
              direction: rtl;
              text-align: right;
              padding: 10px 20px;
              border-radius: 9999px;
              border: none;
              outline: none;
            }
          }
        }
      }
    }
  }

  @media (max-width: 992px) {
    > .section2 {
      > .row {
        .picture {
        }
        .form {
          position: relative;
        }
      }
    }
  }

  @media (max-width: 575px) {
    > header {
      font-size: 16px;
    }
    > .section2 {
      .inputs {
        width: 280px !important;
      }
    }
  }
}