.main-container {
      display: flex;
      flex-direction: column;
      height: 100vh;
      overflow: scroll;
    }

    .hero {
      flex: 1;
      overflow: auto;
      position: relative;
    }

    .custom-height-75 {
      flex: 0 0 60%;
    }

    .custom-height-25 {
      flex: 0 0 2%;
    }

    .custom-placeholder::placeholder {
      color: #363636;
      opacity: 1;
    }

    .is-purple {
      background-color: #141414;
    }

    .is-purple-btn {
      background-color: #ff4748;
      border: none;
    }

    .is-purple-btn:hover {
      background-color: #d43737;
    }


    @media screen and (min-width: 1020px) {
      .hero {
        overflow: visible;
      }
    }

    @media screen and (max-width: 1019px) {
      .columns {
        flex-direction: column !important;
      }
    }

    .column-limited {
      max-width: 400px;
      margin: 0 auto;
    }

    .column {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .register-btn {
      position: relative;
      background-color: #242424;
      border: none;
      color: white;
      padding: 10px 20px;
      overflow: hidden;
      cursor: pointer;
      z-index: 1;
    }

    .register-btn::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #ff4748;
      z-index: -1;
      transform: scaleX(0);
      transform-origin: left;
    }

    .register-btn.expand::before {
      animation: expand 0.8s forwards;
    }

    .register-btn.contract::before {
      animation: contract 0.8s forwards;
    }

    @keyframes expand {
      from {
        transform: scaleX(0);
      }
      to {
        transform: scaleX(1);
      }
    }

    @keyframes contract {
      from {
        transform: scaleX(1);
        transform-origin: right;
      }
      to {
        transform: scaleX(0);
        transform-origin: right;
      }
    }

    .register-btn:hover {
      color: white;
      background-color: #242424;
    }

    .card-custom-height {
      height: 300px;
    }

    @media screen and (min-width: 768px) {
      .card-custom-height {
        height: 250px;
      }
    }

    @media screen and (min-width: 1024px) {
      .card-custom-height {
        height: 350px;
      }
    }

    .forgot {
      color: #ff4748;
      width: fit-content;
      align-self: center;
    }

    .forgot:hover {
      color: #242424;
    }

    .card-content {
      display: grid;
      grid-template-columns: 1fr;

    }


    .card-content form {
      margin: 0;
    }

    .login-btn {
      color: white;
      font-weight: 700;
    }