.login-section .banner-img{

width: 100%;

}

.member-login-form{

    width: 506px;

    background-color: 

    rgba(0, 0, 0, 0.6);

    border-radius: 25px;

    position: relative;

    padding-inline: 40px;

    padding-block: 3%;

    backdrop-filter: blur(5px);

}

.member-login-form{

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

}



.member-login-form h2{

    color: 

    rgba(255, 255, 255, 0.89);

    font-family: 'Oswald', sans-serif;

    font-weight: 500;

    font-size: 40px;

    line-height: 67px;

    letter-spacing: 0.8px;

    text-align: center;

}



  

.member-login-form .number{

    width: 100%;

  

    padding-left: 20px; 

   

}

.member-login-form  .number, .member-login-form select{

    height: 

    51px;

    border-radius: 8px;

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

    font-family: "Manrope";

    font-weight: 500;

    font-size: 16px;

    line-height: 24px;

    border: none;

    outline: none;

    color: 

    rgba(255, 255, 255, 1);

    position: relative;

    appearance: none; /* Hides the default dropdown arrow */

    -webkit-appearance: none; /* For older versions of Chrome */

    -moz-appearance: none;

    padding-left: 45px;

    padding-right: 20px;

    cursor: pointer;

   

}







/* .login-section form */

.login-section form label{

    

        font-family: 'Manrope', sans-serif;

        font-weight: 500;

        font-size: 14px;

        line-height: 24px;

    color: rgb(190 190 190);

    

}

.mobile-number-section{

    display: flex;

    gap: 20px;

    padding-top: 10px;

}

.form-button::after{

    position: absolute;

    content: '';

    width: 40px;

    height: 5px;

}

.form-button{

    background-color: 

    rgba(71, 173, 162, 1);

    border-radius: 50px;

    color: rgba(255, 255, 255, 1);

    font-family: 'Manrope', sans-serif;

    font-weight: 600;

    font-size: 18px;

    line-height: 24px;

   

    text-align: center;

    width: 100%;

    border: none;

    padding-block: 17px;

  margin-top: 20px;

  cursor: pointer;

  

}

.select-div{

    position: relative;

}

.icon-select-div::before{

    content: ''; /* Empty content */

    position: absolute;

    top: 50%;

    left: 50%;

    right: 10px; /* Adjust as needed */

    transform: translate(-50%, -50%) rotate(-45deg); /* Rotate the square to create a V shape */

    

    width: 8px; /* Width of the arrow */

    height: 8px; /* Height of the arrow */

    border-left: 1px solid rgba(71, 173, 162, 1);; /* Left side of the arrow */

    border-bottom: 1px solid rgba(71, 173, 162, 1);

   

}

.icon-select-div{

    border-radius: 8px;

    width: 24px;

    height: 24px;

    left: 6px;

    background: 

    rgba(255, 255, 255, 0.05);

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    position: absolute;

}

#select .dropdown{

    display: block;

}

.dropdoen-details{

    position: absolute;

}

.back-button::after{

    content: ''; /* Empty content */

    position: absolute;

    top: 50%;

    left: 16px;

    right: 10px; /* Adjust as needed */

    transform: translate(-50%, -50%) rotate(45deg); /* Rotate the square to create a V shape */

    

    width: 6px; /* Width of the arrow */

    height: 6px; /* Height of the arrow */

    border-left: 1px solid rgba(255, 255, 255, 1); /* Left side of the arrow */

    border-bottom: 1px solid rgba(255, 255, 255, 1);

}

#mobile-otp-section {

    display: grid;

    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr ;

    gap: 10px;

    display: none;

    padding-top: 10px;

}

#mobile-otp-section input{

    height: 

    51px;

    border-radius: 8px;

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

    font-family: "Manrope";

    font-weight: 500;

    font-size: 16px;

    line-height: 24px;

    border: none;

    outline: none;

    color: 

    rgba(255, 255, 255, 1);

    position: relative;

    text-align: center;

    cursor: not-allowed;

    pointer-events: none;

    width: 100%;

}

#mobile-otp-section input:focus{

    border-bottom: 3px solid orange;

    outline: none;

}

#mobile-otp-section input:nth-child(1) {

    cursor: pointer;

    pointer-events: all;

}

#mobile-otp-section input::placeholder{

    text-align: center;

    color: rgba(255, 255, 255, 1);

}

.back-button{

    width: 72px;

    background-color: 

    rgba(217, 217, 217, 0.1);

    color: rgba(255, 255, 255, 1);

    font-family: "Manrope";

    font-size: 14px;

    font-weight: 500;

    line-height: 24px;

    position: absolute;

    top: 20px;

    left: 10px;

    border-radius: 12px;

    text-align: center;

    padding-left: 10px;

    display: none;

    cursor: pointer;

}



.login-section{

    position: relative;

}



.line-container {

    text-align: center; /* Center the entire block */

    margin-top: 15px;

}



.line {

    display: inline-block;

    width: 43%; /* Adjust the width of the line */

    vertical-align: middle;

    color: white;

}



.line hr {

    border: none; /* Remove default border */

    border-top: 1px solid rgb(190 190 190); /* Set the custom line style */

    margin: 0;

    color: white;

}



.line-container p {

    display: inline-block;

    margin: 0 10px; /* Space between the lines */

    color: rgb(190 190 190);

}



#register-message p, #resend-otp p {

    font-family: 'Manrope', sans-serif;

    font-weight: 500;

    font-size: 16px;

    line-height: 24px;

    color: rgb(190 190 190);

    text-align: center;

    margin-top: 20px;

}



#register-message a, #resend-otp a {

    color: rgb(71 175 162);

    text-decoration: underline;

    

}



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

    .login-section{

        width: 100%;

        height: 100vh;

    }

    .login-section .banner-img{

        height: 100%;

        object-fit: cover;

    }

    .member-login-form{

        width: 90%;

      

    }

}