body{
	margin: 0px;
	padding: 0px;
}

body::before{
content: '';
    background-image: url(../img/bg.svg);
    background-repeat: no-repeat;
    background-position: 100% 0;
    background-size: contain;
    position: absolute;
    height: 100vh;
    z-index: -5;
    width: 100%;
}

*{
	box-sizing: border-box;
	font-family: system-ui, sans-serif;
}

header{
	width: 100%;
}

#navone{
	border-bottom: 1px solid #66cbda;
	padding: 0px 0px;
}

#navtwo{

}

header li{
	list-style-type: none;
}

ul {
	margin: 0px;
	padding: 0px;
}


#navone > ul {
	display: flex;
	justify-content: flex-end;
	width: 78%;
	margin: auto;
}


#navone li {
	padding: 9px 20px;
    font-weight: 600;
}

#actif{
    position: relative;
    color: white;
    margin-left: 20px;
}

#actif::before{
	content: '';
    background: url(../img/1.svg);
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
}

#actif::after{
	content: '';
    background: url(../img/2.svg);
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
}

#actif > span {
	position: relative; z-index: 500;display: flex;align-items: center;
}

#actif > span > img {
	position: relative;
}

#navtwo{
	border-bottom:  1px solid  #f0fafe;
}

#navtwo > ul {
	width: 78%;
	margin: auto;
	display: flex;
	font-weight: 600;
}

#navtwo li {
	padding: 24px 20px;
}

header li{
	cursor: pointer;
	transition: 0.3s;
}
header li:hover{
	color: #0baee8;
}

main{
	width: 800px;
	margin: auto;
}

#directory{
	margin: auto;
	margin-top: 30px;
	margin-bottom: 30px;
	display: flex;
	align-items: center;
}

.spanzer{
	font-size: 18px;
}

#activey{
	font-weight: 500;
	color: #445bff;
}

#container-title > h1{
	margin-top: 0px;
	font-weight: 500;
	font-size: 32px;
}

#container-title{
	margin-top: 80px;
}

#transac{
	padding: 0px;
    margin: 20px 30px 30px 20px;
}

#transac li {
	font-weight: 500;
}

#container-title > p {
	padding: 0px 40px;
}

.btnzer{
    margin: auto;
    padding: 16px 26px;
    background-color: #33f;
    border: none;
    border-radius: 40px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    margin-top: 50px;
    cursor: pointer;
    transition: background 1s;
}

.btnzer > img {
	margin-left: 10px;
	width: 20px;
}


.btnzer:hover {
  background:  #1a95c1; 
}
#asking{
	margin: 100px 0px 30px 0px;
}
#asking > li {
	cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    list-style-type: none;
    border-bottom: 1px solid #d8d8d8;
    padding: 23px 0px;
}

#asking > li > div > span:first-child{
	font-size: 20px;
	color: #b9e7a4;
    font-weight: 700;
    margin-right: 1em;
}

#asking > li > div > span:last-child{
    color: #081a45;
    font-size: 18px;
    font-weight: 500;
}

#asking > li > div {
    display: flex;
}

footer{
	background-color: rgba(0,0,0,.75);
	width: 100%;
	padding: 60px;
	color: white;
	margin-top: 140px;
}

#container-login{
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 80px;
}

.login-card{
	width: 30%;
    border: 1px solid #ddd;
    border-radius: 4px;
    transition: all .1s ease-in-out;
    box-shadow: 0 0 10px 0 rgba(51,51,255,0.08);
    display: flex;
    align-items: center;
    flex-direction: column;
    background-color: white;
    padding: 20px;
    cursor: pointer;
}

.login-card:hover{
    box-shadow: rgba(0,0,0,0.4) 0 0 0 1px, rgba(0,0,0,0.65) 0 0 6px -1px, rgba(0,0,0,0.08) 0 0 0 inset;
    transform: scale(1.05);
}

.login-card > img {
	width: 130px;
	margin-bottom: 24px;
}

#container-login > div:first-child{
	margin-right: 20px;
}

#alert{
	background-color: #2388ed;
}

#alert > div {
	color: white;
	width: 78%;
	margin: auto;
	display: flex;
	align-items: center;
	padding: 24px 0px;
}

#alert img {
	margin-right: 20px;
}

#login-form{
	display:flex;
	justify-content: space-between;
}


.container-input input{
    margin: 0px 24px 0px 10px;
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
    -webkit-transition: border-color ease-in-out 0.15s,box-shadow ease-in-out 0.15s;
    -o-transition: border-color ease-in-out 0.15s,box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s,box-shadow ease-in-out 0.15s;
}

.container-input > label {
	font-weight: 600;
	font-family: system-ui, sans-serif;
	width: 140px;
	display: block;
}

.container-input{
	display: flex;
	align-items: center;
	margin-bottom: 10px;
}

#spacing input{
	margin: 0px;
}

#spacing{
	width: 100%;
    margin: 0px 24px 0px 6px;
}

#container-btn {
	position: relative;
	top: 15px;
	display: flex;
	justify-content: space-between;

}

button{
	text-decoration: none;
}

#container-btn > button{
	width: 49%;
	background-color: transparent;
	font-family: system-ui, sans-serif;
	font-weight: 500;
	border: 1px solid black;
	border-radius: 3px;
	text-decoration: none;
	color: black;
	background-color: white;
	padding: 10px 0px;
	cursor: pointer;
	cursor: pointer;
	transition: 0.1s;
}

.pass{
	align-items: flex-start;
}

.pass > label, .pass > img{
	position: relative;
	top: 10px;
}

#container-btn > button:hover{
	background-color: #e6e6e6;
}

input{
	outline: none;
	font-size: 16px;
}

#otp{
	width: 550px;
	display: flex;
	align-items: center;
	margin-bottom: 40px;
}

#otp > img {
	margin-right: 25px;
}

#auth{
    font-size: 24px;
    font-weight: 500;
    color: #2388ed;
    margin-bottom: 0px;
}

#separator{
	height: 9px;
    background: rgb(8,129,246);
    background: linear-gradient(90deg, rgba(8,129,246,1) 0%, rgba(41,132,251,1) 37%, rgba(122,243,202,1) 100%);
    width: 100%;
    margin-bottom: 15px;
}

#cancel{
	background-color: #e6e6e6;
	color: black;
	font-weight: 500;
	font-size: 16px;
	display: block;
	margin: auto;
	padding: 14px 40px;
	border: none;
	border-radius: 16px;
	cursor: pointer;
}


@media screen and (max-width: 1061px){
	#navtwo > ul,#navone > ul,main,#alert > div{
		width: 90%;
	}
	.none{
		display: none;
	}
	#asking > li > div > span:last-child{
		font-size: 16px;
	}
	header{
		background-color: white;
	}
	#alert img{
		width: 30px;
	}

	#alert span{
	    font-size: 14px;
	    line-height: 14px;
	    display: block;
	}

	#alert b {
	    font-size: 14px;
	}

	#alert > div{
		padding: 14px 0px;
	}

	.login-card{
		width: 100%;
	}

	#container-login{
		margin-top: 20px;
	}

	#asking {
	    margin: 20px 0px 30px 0px;
	}

	#login-form{
		display: block;
	}

	#trux{
		display: block;
		margin: auto;
		margin-top: 60px;
	}

	footer{
		margin-top: 60px;
	}
	#otp{
		width: 100%;
	}

}

@media screen and (max-width: 400px){
	#directory{
		font-size: 14px;
	}
}