*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppines", sans-serif;
}
body{
width: 100%;
height: auto;
max-width: 100%;
top: 120px;
right: 0px;
background: #731f90;
}
h1{
font-weight: bold;
}
.icon img{
width: 2000px;
height: auto;
position:absolute;
top: 30px ;
right:	15px ;
/*anaa lidhe nechee scroling ave chee*/

}
#photo{
width:20px;
height:20px;
}
.wrapper{
width: 340px;
height: auto;
padding: 2rem 1rem;
margin: 25px auto;
background-color: #fff;
border-radius: 10px;
text-align: center;
box-shadow: 0 20px 35px rgba(0, 0, 0, 0.1);
}
h1{
font-size: 2rem;
color: black;
margin-bottom: -1.8rem;
color: #4850d0;
}
form input{
width: 92%;
outline: none;
font-size: 16px;
border: 1px solid #fff;
padding: 12px 20px;
margin-bottom: 10px;
border-radius: 20px;
background-color: #e4e4e4;
}
.button{
font-size: 20px;
font-weight: bold;
letter-spacing: 1px;
margin-top: 1.8rem;
padding: 10px 0;
border-radius: 20px;
outline: none;
border: none;
width: 90%;
color: #fff;
cursor: pointer;
background:#0f1ce8;

}
.button:hover{
background: #4850d0;
}
input:focus{
border: 1px solid rgb(192, 192, 192);
}
/*-------------login text animation---------*/
/*-------media screen---------*/
@media only screen and (min-width: 450px) {
.icon img{
margin-left: 0px;
position: fixed;
width: 200px;
height: auto;
top: 17px ;
right:100px ;
}
}
/* ------------------------ */
/*	text animation login*/
.loader {
position: relative;
-webkit-box-reflect: below -28px linear-gradient
(transparent, #0002)
}
.loader::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 2px;
height: 100%;
/*    cursor color*/
background: white;
}

.loader h1 {
position: relative;
color:  black;
letter-spacing: 5px;
font-size: 2em;
text-transform: uppercase;
overflow: hidden;
}
/*-------------------*/
.box{
position: 	relative	;
}
.fa{
position:absolute	;
right:25px;
margin-top:	15px;
cursor:pointer;
}
span{
position: 	absolute	;
right: 	100px;
transform: 	translate(0, -50%	);
top:50%;
cursor: 	pointer	;
background-color: 	red;
}
.fa{
font-size: 	20px;
color: 	#7a797e;
}
/*-----------brand------	*/
#brand1{
color: green;
/*align-items: center;
justify-content: center;*/
width: 20%;
/*padding-top: 10px;
margin-top: -40%;*/
height: 200px;
width: 200px;
position: absolute;
top: 50%;
left: 20%;
}
#brand2{
color: green;
/*align-items: center;
justify-content: center;*/
width: 20%;
/*padding-top: 10px;
margin-top: -40%;*/
height: 200px;
width: 200px;
position: absolute;
top: 50%;
left: 70%;
}