@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Koulen&family=Lato&family=Nunito&family=Playfair+Display:ital@1&family=Prata&family=Raleway:ital,wght@1,100&family=Roboto&family=Roboto+Condensed&family=Teko&display=swap');

*{
	/*font-family: 'Protest Riot', sans-serif;*/
	font-family: "Montserrat", sans-serif;
	font-weight: 700;
}
/*=================== welcome page ====================*/

.back_arrow{
	margin-left: 30px;
	margin-top: 20px;
	height: 40px;
	width: 40px;
	border-radius: 50%;
	display: flex;
    justify-content: center;
    color: #FFFFFF;
    background-color : #EB5428;
    align-items: center;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}
.back_arrow i {
    font-size: 34px;
}
.welcome_page .main_div{
	height: 100vh;
	width: 100vw;
	overflow: hidden;
	position: relative;
}
.welcome_page .main_div img {
	position: absolute;
	top: 20%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
}
.welcome_page .main_div::after{
	content: "";
	height: 100vh;
	width: 100%;
	position: absolute;
	bottom: 25%;
	background-color: #ff870f;
	border-radius: 10px 10px 10px 600px;
	-moz-border-radius: 10px 10px 10px 600px;
	-webkit-border-radius: 10px 10px 10px 600px;
	box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
	z-index: 0;
}
.welcome_page .welcome_text {
	position: absolute;
	top: 35%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 20px;
	color: white;
	z-index: 2;
	text-align: center;
}
.welcome_page .welcome_text .desc{
	font-size: 10px;
}
.welcome_page .start{
	position: absolute;
	top: 60%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 20px;
	color: white;
	z-index: 2;
	box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
	background-color: #fff;
	width: 300px;
	height: 100px;
	border-radius: 20px;
	text-align: center; 
}
.welcome_page .start button {
	margin-top: 20px;
	height: 58px;
	width: 200px;
	padding: 10px 20px;
	border-radius: 20px;
	outline: none;
	border: none;
	background-color:#ff870f;
	color: #fff;
	transition: 0.2s ease all;
}
.welcome_page .start button:hover{
	width: 220px;
}
.welcome_page .start button a, .start button a:hover{
	text-decoration: none;
	color: #fff;
}

/*===================== login page ======================*/
.toast {
    position: fixed;
    top: 1rem;
    right: 1rem;
    min-width: 250px;
    max-width: 100%;
    z-index: 9999;
    animation: slideInRight 2.5s;
}
    
@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}
.log_body{
	background: rgb(250,114,2);
	background: linear-gradient(117deg, rgba(250,114,2,1) 0%, rgba(223,94,201,1) 53%);
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden;
}
.login_div{
	background-color: #fff;
	width: 100%;
	height: 550px;
	padding: 50px 10px 10px 10px;
	position: absolute;
	top: 18%;
	border-top-left-radius: 100px;
	box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.form-control, .form-control:focus{
	border: none;
	outline: none;
	box-shadow: none;
	border: 0.5px solid #ff870f;
	height:48px;
	color: #EF8D38;
    background-color: #FFFFFF;
}
/*================ button style =============*/
.log_btn_div{
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 25px;
}
.log_btn{
	font-family: Roboto Condensed;
	font-weight: 0;
	font-size: 14px;
	color: #fff;
	background: linear-gradient(90deg, #ff870f 0%, #8a0091 100%);
	padding: 15px 100px;
	border: none;
	box-shadow: rgb(0, 0, 0) 0px 0px 0px 0px;
	border-radius: 50px;
	transition : 557ms;
	transform: translateY(0);
	display: flex;
	flex-direction: row;
	align-items: center;
	cursor: pointer;
	justify-content: center;
}

.log_btn:hover{
	transition : 557ms;
	padding: 15px 120px;
	transform : translateY(-0px);
	background: linear-gradient(90deg, #ff870f 0%, #8a0091 100%);
	color: #ffffff;
	border: none;
}
.otp_log_btn{
    font-size:22px;
}