.not-found-page {
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 56px;

  .header {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 134px 30px 44px 30px;

    background-color: #6478FF;

    .title {
      color: #FFF;
      text-align: center;
      font-family: Poppins;
      font-size: 30px;
      font-style: normal;
      font-weight: 600;
      line-height: 36px;
    }
  }

  .content {
    width: 100%;
    display: flex;
    justify-content: center;
    /* height: 124px; */
    .internal-content {
      padding: 47px 30px 27px 30px;
      width: 100%;
      max-width: 620px;
      position: relative;
    }

    background-color: #D3EAFB;
    position: relative;

    .blue-bean {
      position: absolute;
      width: 77px;
      height: 71px;
      top: -42px;
      right: 10px;
      transform: none;
    }

    h3 {
      color: #094DA4;
      text-align: center;
      font-family: Poppins;
      font-size: 16px;
      font-style: normal;
      font-weight: 500;
      line-height: normal;
    }
  }

  .button-container {
    margin: 36px 0;
    display: flex;
    justify-content: center;

    .button {
      max-width: 180px;
      color: #FFF;
      text-align: center;
      font-family: Poppins;
      font-size: 13px;
      font-style: normal;
      font-weight: 700;
      line-height: normal;
      text-transform: uppercase;
    }
  }

  @media screen and (min-width: 768px) {
    margin-bottom: 65px;

    .header {
      padding: 132px 30px 50px 30px;

    }
    
    .content {
      .internal-content {
        padding: 74px 30px 51px 30px;
      }
      .blue-bean {
        width: 81px;
        height: 75px
      }
    }

    .button-container {
      margin: 43px 0;
    }
  }
}