@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;600;700;800;900&display=swap');

*
{
	margin: 0;
	padding: 0;
}

body{
	font-family: 'Nunito', sans-serif;
	box-sizing: border-box;
	background-color: rgb(246 249 254) !important;
	height: 100vh !important;
}

.nav-list li a{
	text-decoration: none;
	color: grey !important;
	font-size: 18px;
	font-family: 'Nunito', sans-serif;
	font-weight: 400;
	transition: 0.2s all ease;
}

.nav-list li a:hover{
	color: rgb(50 40 101)!important;

}

.end-btn{
	color: white !important;
	background-color: rgb(50 40 101) !important;
	font-family: 'Nunito', sans-serif;
	transition: 0.2s all ease !important;
}

 .d-flex a:hover{
	color: rgb(50 40 101) !important;
	background-color: white !important;
	border: 1px solid rgb(50 40 101) !important;
}

.head{
	margin-top: 150px;
}

.left{
	padding-left: 40px !important;
}

.left p{
	font-family: 'Nunito', sans-serif;
	font-weight: 200;
	padding: 12px 20px;
	background-color: rgb(50 40 101);
	display: inline-block;
	border-radius: 50px;
	color: rgb(204 193 230);
}

.left p a{
	color: rgb(204 193 230);
	font-size: 18px;
}

.left h1{
	font-family: 'Nunito', sans-serif;
	font-weight: 700;
	font-size: 3.55rem;
	color: rgb(50 40 101);
}

.left  .sub-title{
	font-size: 20px;
	background-color:transparent;
	color: grey;
	padding: 12px 0px;
}

.right img{
	padding-right: 40px;
	width: 100%;
}

.input-email{
	padding: 12px 20px !important;
	border-radius:7px 0px 0px 7px !important;
	display: inline !important;
}

.button{
	Padding: 12px 20px !important;
	color: white;
	background-color:  rgb(50 40 101) !important;
	border-radius: 0px 7px 7px 0px !important;
	display: inline !important;
}

.used-by{
	padding-left: 30px;
}

.used-by h5{
	font-family:  'Nunito', sans-serif;
	font-weight: 400;
	display: flex !important;
}

.used-by img{
	padding: 0px 3px;
	width: 50px;
}

.created-by{
	display:inline-block;
	flex-direction: row-reverse;
	height: auto;
	float: right;
	font-family: 'Nunito', sans-serif;
	font-size: 15px;
}


/* Media queries */
@media only screen and (min-width: 320px) and (max-width: 991.98px)  {
	.head{
		margin-top: 50px;
		padding-left: 0px;
	}
	.left{
		text-align: center;
		padding-left: 10px !important;
	}
	.left h1{
		font-size: 3rem;
	}
	.used-by{
		padding-top: 30px;
	}
.used-by h5{
	font-weight: 600;
}
.created-by{
	display: none;
}
.used-by {
	padding-left: 0px;
}

@media screen and (max-width: 425px) {
	.left p{
		font-size: 15px;
	}
	.left a{
		font-size: 15px;
	}
	.left h1{
		font-size: 38px;
		width: 100%;
	}
	.left  .sub-title{
		font-size: 16px;
		font-weight: 400;
	}
	.input-email, .button{
		border-radius: 7px !important;
		margin-left: 20px;
	}
	.button{
		margin-left: 10px !important;
		
	}
	.used-by{
		padding-top: 30px;
	}
	.used-by h5{
		font-size: 18px;
		font-family: 'Nunito', sans-serif;
		font-weight: 600;
	}
	.created-by{
		display: none;
	}
}