* {
	margin: 0;
	padding: 0;

}

body {
	font-family: sans-serif;
	font-size: 16px;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	background-color: #f7f7f7;
}

.pop-up-container {
	width: 100vw;
	height: 100vh;
	max-height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	top: 0;
	left: 0;
}

.success-card {
	height: 200px;
	width: 400px;
	background-color: #f6f6f6;
	box-sizing: border-box;
	padding: 25px;
	box-shadow: 5px 5px 10px red;
}

.pop-up {
	background-color: white;
	width: 500px;
	padding: 25px;
	position: fixed;
	height: 210px;
	border-radius: 15px;
	line-height: 25px;
	text-align: left;



}

#proceed-btn {
	width: 150px;
	color: white;
	font-weight: bold;
	margin-top: 30px;
	float: right;
	height: 40px;

	
}

.main-container {
	background-color: ;


}

.just-contianer {
	width: 100vw;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: red;
}

.form-container {
	display: flex;
	justify-content: center;
	background-color: white;
	
	border-radius: 10px;
	margin-top: 65px;
	width: 800px;

}





form {
 background-color: ;
 min-height: 570px;
 display: block;
 text-align: left;
}


.logo-section {
	display: flex;
	justify-content: center;
	align-items: center;
	padding-bottom: 15px;
	margin-top: 50px;
}

.welcome {
	display: block;
	justify-content: center;
	align-items: center;
	padding-bottom: 50px;
	font-size: 22px;
	text-align: center;
}


.input-group {
	padding-bottom: 50px;
	width: 48%;
}

input, button {
	width: 300px;
	height: 50px;
	font-size: 16px;
	align-item: center;
	
	

}


#continue-btn {
	width: 201px;
	background-color: #dcdfe3;
	border-radius: 10px;
	color: black;
	font-weight: normal;
}

input {
	border: 0.5px solid grey;
	border-radius: 10px;
	text-indent: 10px;

}

select {
	border: 0.5px solid grey;
	border-radius: 10px;
	width: 300px;
	height: 50px;
	font-size: 17px;
	box-sizing: border-box;
	padding-left: 20px;
	
}

input:focus {
	outline: 0.1px solid blue;
	border: blue;
}




button {
	background-color: #0057b8;
	border: none;
	border-radius: 25px;
	color: white;
	font-weight: bold;
	font-size: 16px;
}


a {
	text-decoration: none;
	color: black;
}


ul {
	display: flex;
	justify-content: center;
}

li {
	padding-right: 20px;
	color: transparent;
	font-size: 13px;
}


#blue-txt {
	color: #0057b8;
	font-weight: bold;
}


footer {
	margin-top: 60px;
	width: 100vw;

}

#footer-txt {
	font-size: 13px;
	margin-top: 20px;
	text-align: center;
}



.flex-card {
	background-color: ;
	
	width: 700px;
	display: flex;
	justify-content: space-between;
	overflow-wrap: break-word;
}

.l-line {
	display: flex;
	margin-top: 10px;
}


#l1 {
	background-color: #009fdb;
	width: 50%;
	height: 3px;
}

#l2 {
	background-color: #dcdfe3;
	width: 50%;
	height: 3px;
}


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


#kbox {
	width: 600px;
	max-width: 600px;
	height: 200px;
	max-height: 200px;
	border: 1px solid grey;
	display: flex;
	align-items: center;
	justify-content: center;
}


#nbox {
	width: 500px;
	height: 150px;
	background-color: ;

	
}

#gbox {
	width: 500px;
	height: 50px;
	border: 1px solid grey;
	display: flex;
	padding-left: 10px;
	align-items: center;
	margin-top: 20px;

}


#gbox:hover {
	background-color: #0057b8;
	cursor: pointer;
	color: white;
}



#gbox:active {
	background-color: #0057b8;
	cursor: pointer;
	color: white;
}




#hicon {
	display: none;
}



/* -------------------------		MOBILE STYLING       --------------*/



@media(max-width: 650px)  {

	body {
		padding-right: 20px;
		padding-left: 20px;
		max-width: 100vw;
	}

	ul {
		display: block;
	}


	#kbox {
		width: 90vw;
		max-width: 90vw;
	}

	#nbox {
		width: 80vw;
		max-width: 80vw;
	}


	#gbox {
		width: 96%;
		max-width: 96%;
	}


	body, footer {
		max-width: 100vw;
		padding-left: 20px;
		padding-right: 20px;
	}


	 .main-container, .form-container {
			max-width: 100vw;
	}


	.form-container {
		border: none;
		width: 100%;

	}

	li {
		padding-bottom: 10px;
	}

	footer {
		display: block;
		text-align: left;
	}

	#footer-txt {
		text-align: left;
	}

	.logo-section {
		margin-top: 10px;
	}


		.pop-up {
		width: 70vw;
		height: 250px;
		position: fixed;
	}

	.pop-up-container {
		max-width: 100vw;
	}

    body {
    	padding: 0;
    	margin: 0;
    	max-width: 100vw;
    }


    #proceed-btn {
    	background-color: ;
    	width: 100%;
    	height: 50px;
    	border-radius: 10px;
    	float: center;
    }


    .form-container, .main-container, footer, .just-contianer {
    	width: 100vw;
    	max-width: 100vw;
    }

    .form-container {
    	top: 0;
    	left: 0;
    	position: absolute;
    	justify-content: center;



    }

    .flex-card {
    	display: block;
		overflow-wrap: break-word;
		width: 100vw;
		padding-left: 10px;
		padding-right: 10px;
    }

    h3 {
    	font-size: 22px;
    }

    .input-group {
    	justify-content: center;
    	width: 80%;
    }

    form {
    	max-width: 90vw;
    	background-color: ;
    }

	.success-card {
		width: 300px;
		height: 220px;
	}


    .welcome {
    	max-width: 100vw;
    }


    #continue-btn {
    	margin-right: auto;
    	margin-left: auto;
    }

}