* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Open Sans', sans-serif;
}

/* mobile view */
@media only screen and (max-width: 2000px) {
  .login-container {
    /* background: url("./assets/images/grid-bg.svg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat; */
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    flex-direction: column;
  }
  .main-screen-container {
    background: url("../assets/images/grid-bg.svg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 90vh;
    display: flex;
    justify-content: center;
    flex-direction: column;
    z-index: 10;
    position: relative;
  }

  .logos-div {
    display: flex;
    justify-content: center;
    gap: 16px;
    padding-top: 82px;
    padding-bottom: 38px;
    align-items: center;
  }

  .login-first-logo {
    width: 83px;
    height: 52px;
  }

  .second-logo {
    width: 8px;
    height: 8px;
  }

  .third-logo {
    width: 69px;
    height: 29px;
  }

  .login-form {
    margin-inline: 39px;
    border: 1px solid #e888e3;
    border-radius: 9px;
  }

  .login-form .login-inner-div {
    padding: 21px 35px 0px 35px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .form-content1 {
    font-weight: 700;
    font-size: 18px;
    line-height: 36px;
    letter-spacing: -0.75px;
  }

  .form-content2 {
    font-weight: 400;
    padding-top: 7px;
    font-size: 16px;
    line-height: 24px;
  }


  .email-div{
    padding-top: 21px;
  }

  .phone-icon {
    width: 11px;
    height: 15px;
  }
  .form-email-input {
    width: 254px;
    font-size: 15px;
    font-weight: 400;
    height: 40px;
    border-radius: 6px;
    border: 1px solid #e888e3;
    padding: 10px 12px 10px 12px;
    background-color: white;
  }

    .form-phone-input {
    width: 254px;
    font-size: 15px;
    font-weight: 400;
    height: 40px;
    border-radius: 6px;
    border: 1px solid #e888e3;
    padding-left: 12px;
    padding: 10px 12px 10px 12px;
    background-color: white;
  }

  .phone-number-div{
    padding-top: 12px;
  }

  .form-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* space between text and icon */
    border-radius: 6px;
   
    border: none;
    width: 100%;
    max-width: 400px;
    margin: 23px auto;
    color: white;
    background: linear-gradient(to left top, #E888E3, #A865D2);
    font-size: 15px;
    padding: 10px 80px;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(168, 101, 210, 0.2);
  }
  
  .arrow-icon {
    width: 16px;
    height: 16px;
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 1;
    visibility: visible;
  }
  
  .form-button:hover .arrow-icon {
    transform: translateX(4px);
    opacity: 1;       /* explicitly keep arrow visible */
    visibility: visible;
  }
  

  .form-btn-div{
    padding-left: 24px;
    padding-right: 24px;
    padding-bottom: 38px;
    position: relative;
    display: flex;
flex-direction: column;
}
  

}

/* desktop view */
@media only screen and (min-width: 600px) {
  /* .main-container {
        display: flex;
        width: 100%;
        background-color: blue;
        justify-content: center;
        align-items: center;
        height: 100vh;
    }

    .main-container h1 {
        color: white;
        font-weight: 800;
        font-size: 40px;
    } */
}