@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700;800;900&display=swap');
*{
    margin: 0;
    padding: 0; 
    box-sizing: border-box;
}
html{
    font-size: 10px;
}
body{
    background: url(BG\ 2.png) no-repeat;
    background-size: cover;
    background-position: center;

}
.main-contianer {
    
    display: flex;
    justify-content:center;
    align-items: center;
   min-height: 100vh;

}

.logo {
    display: flex;
    align-items: center;
    border-right: 1px solid rgba(243, 243, 243, .4);
    padding: 0;
    margin-right: 50px;
    width: 30%;
    height: 280px;
}
.logo img {
  
    width: 220px;
    height: 160px;
}

.lognin {
    position: relative;
    background-color:transparent;
    width: 320px;
    height: 400px;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #f3f3f3;
    border: 1PX solid rgba(243, 243, 243, .2);
    backdrop-filter: blur(10px);
    box-shadow: 2PX 2PX 10px #00000027;

}
.header-login {
    display: flex;
    justify-content: center;
   
    font-size: 3rem;
    font-weight: 700;

}

.input-box {
    position: relative;
    justify-content: space-between;
    width: 310px;
    height: 35px;
    margin: 40px 0;
    display: flex;
    align-items: center;
    border: 1px solid rgba(243, 243, 243, .2);
    border-radius: 10px;
   
}
.input-box input { width: 100%;
position: absolute;
background-color: transparent;
border: none;
outline: none;
height: 100%;
padding-left: 10px;
padding-right: 50px;
color: #f3f3f3;
font-size: 1.4rem;
font-weight:300;

}
.input-box ::placeholder {
color: rgba(243, 243, 243, .6);
}



.icon {
    position: absolute;
    right: 15px;
}


.remember {
    display: flex;
    justify-content: space-between;
    margin-top: -35px;

}

div a {
text-decoration: none;
    color: #f3f3f3;
}
    


div a:hover {
    text-decoration: underline ;
    
    }

label {
    display: flex;
    align-items: center;
    
}
  .label {
    margin-left: 5px;
  }
 
  .BTN{

    width: 100%;
    margin: 20px 0 ;
    padding: 10px 0;
    border-radius: 10px;
    outline: none;
    border: none;
    color: #1D1D1D;
    font-size: 1.6rem;
    font-weight:500;
    cursor: pointer;
    box-shadow: 2px 2px 10px rgba(29, 29, 29, 0.5);
  }


.div > select.Emp-type{
    width: 400px;
    background: #f3f3f3e0;
    border-radius: 4px;
    outline: none;
    border: .5px solid #335DA0;
    padding: 10px 8px;
    color: #1D1D1D;
    font-size: 1.1rem;
   
    }
    
.select.Emp-type > option{
    background: #f3f3f3;
    font-size: 1.1rem;
    gap: 5px;
    
    }
    


.BTN:hover {
    font-weight:700;
    color: #002C72;
}

@media (max-width:360px ) {
    .main-contianer {
        display: flex;
        flex-direction: column;
        padding: 0;
        margin: 0;

    }
    .logo{
        border: none;
        width: 40%;
        margin: 0;
        padding: 0;
        
    }
    .logo img {
        width: 100%;

    }
    .lognin {
        
        width: 100%;
        padding: 30px 10px;
        margin: 0;
       
    }
    .input-box{width: 100%;
    
}
.input-box input{width: 100%;
    padding: 0 20px 0 10px
    
}

}