@import url('reset.min.css');


/**/
*{ box-sizing: border-box; outline: none; }

img{ max-width: 100%; }

body{
	font-family: 'Poppins', sans-serif;
	font-weight: 300;
	line-height: 1.7;
	font-size: 18px;
	color: #434243;
}
a{ text-decoration: none; }
a:hover{ opacity: 0.8;}

h1, h2{line-height: 1.3; margin-bottom: 20px;  }
h1{ 
	font-size: 29px;
	font-weight: 200;
}
h2{ 
	font-size: 28px;
	font-weight: 200;
}
h3{ font-size: 24px; }
h4{ font-size: 18px; font-weight: normal; }
p{ margin-bottom: 25px; }
a{ color: inherit; }


.container{
	margin:0 auto;
	max-width: 1306px;
	padding:60px 20px;
	
}
.container-xl{
	max-width: 1540px;
}
.font11{ font-size: 11.5px; }
.font14{ font-size: 14px; }
.font17{ font-size: 17px; }
.subtitle{ font-size: 24px; }
.bg-light-blue{ background: #f8fafc;}
.pb-30{ padding-bottom: 30px; }
.mb-0{ margin-bottom: 0; }
.mb-30{ margin-bottom: 30px; }
.mb-60{ margin-bottom: 60px; }
.w700{font-weight: 700;}
.violet{ color: #8723dd; }
.pink{ color: #d2307b; }

.flex-box{
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.flex-box.align-top{ align-items: start; }

.col-6{ flex-basis: 48%; }

.btn-round{
	display: inline-block;
	background: #d2307b;
	color: #fff;
	font-size: 25px;
	text-align: center;
	width: 280px;
	border-radius: 25px;
	padding: 5px 10px;
	box-shadow: 0px 8px 7px rgba(0,0,0,0.07);
}

.text-center{ text-align: center; }

/*header*/
header{ background: #7d31ce;}
.home header{background: #932cd1; }
header .container{
	height: 140px; 	
	padding: 0 20px;
}
.site-logo{ margin-right: auto; }

nav a{
	color: #fff;
	font-size: 14px;
	text-transform: uppercase;
	margin: 0 8px;
	text-decoration: none;
}

nav a.current{ font-weight: bold; }

#account-links{ margin-left: 60px; }
#account-links a{
	font-size: 14px;
	border-radius: 25px;
	padding: 5px 15px;
	border:2px solid #fff;
	background: #fff;
	color: #4d2887;
}
#account-links a:first-child{
	color: #fff;
	background: none;
	border:2px solid #fff;
}


/*home hero*/
#hero{
	background: url('../img/hero-bg.jpg') no-repeat center center;
	background-size: cover;
	height: 640px;
	color: #fff;
}
#hero .container{
	padding-top: 10%;
	padding-bottom: 20px;
}
#hero h1{
	font-size: 50px;
	font-weight: bold;
}


#premium-features{
	align-items: stretch;
	font-size: 15px;
}
#premium-features h3{ 
	color: #414141; 
	font-size: 16px;
	font-weight: 400;
	margin-bottom: 10px;
}
#premium-features .col-6{
	background: #fff;
	padding: 25px 25px 20px 25px;
	margin-bottom: 30px;
}
#premium-features .col-6 img{
	margin: 0 0 10px -10px;
}
.about-us-page #premium-features div{
	flex-basis: 20%;
	text-align: center;
}
.about-us-page #premium-features div img{ margin-bottom: 10px; }


#get-started{
	background: #9b248e;
	text-align: center;
}
#get-started h3{
	font-size: 32px;
	display: inline-block;
	margin: 0 30px;
	color: #fff;
	font-weight: 200;
}



.steps-box{	
	margin-top: 120px;
	margin-bottom: 75px;	
	text-align: center;
}
.steps-box .flex-box{
	justify-content: space-around;
	margin-top: 60px;
	align-items: start;
}
.steps-box .flex-box li{
 	flex-basis: 18%;
	font-size: 14px;
	position: relative;
}
.steps-box .flex-box li:after{
	content: "";
	height: 1px;
	background: #adadad;
	position: absolute;
	right: -64%;
	top: 104px;
	width: 88%;
}
.steps-box .flex-box li:last-child:after{ display: none; }
.steps-box .flex-box li span{
	display: flex;
	font-size: 18px;
	color: #cdcfd3;
	border:1px solid #cdcfd3;
	width: 40px; height: 40px;
	margin: 20px auto;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
}
.steps-box .flex-box li h3{
	font-size: 18.5px;
	color: #554850;
	font-weight: normal;
}


#testimonials.flex-box{
	justify-content: space-evenly;
	margin-top: 30px;
	padding-bottom: 120px;
}
#testimonials blockquote{
	flex-basis: 35%;
	font-size: 14px;
}
#testimonials blockquote div{
	justify-content: flex-start;
	margin-top: 20px;
}
#testimonials blockquote p{
	font-size: 20px;
	font-weight: 400;
	line-height: 1.3;
	margin:0 0 0 10px;
}
#testimonials blockquote p span{
	display: block;
	color: #939393;
	font-size: 12.5px;
}

/**/
#showcase-intro{
	margin-top: 6%;
}


#showcase-extensions{ padding: 60px; margin-top: 40px; }
#showcase-extensions .flex-box > div{
	flex-basis: 32%;
	text-align: center;	
}

#showcase-extensions .flex-box > div img{
	display: block;
	margin:0 auto;
}


/**/
#faq-list{
	padding-left: 4%;
	padding-right: 4%;
	margin-bottom: 120px;
}
#faq-list h3,
#faq-list div{ 
	position: relative;
	padding-left: 40px;
}
#faq-list div{
	font-size: 14px;
	margin-top: 10px;
	color: #656565;
}

#faq-list h3:before,
#faq-list div:before{
	content:'Q.';
	position: absolute;
	left: 0;
	top: -5px;
	font-size: 29px;
	font-family: 'Poppins', sans-serif;
	font-weight: 200;
}
#faq-list div:before{
	content:'A.';
	color: #656565;
}


/*sign in*/
.form-style{
	box-shadow: 0px 0px 30px rgba(0,0,0,0.07);
	margin-top: 7%;
	margin-bottom: 10%;
	text-align: center;
	padding: 60px 4%;
}
#sign-in{ max-width: 1060px;}
#sign-in .col-6{ flex-basis: 47%; }
#sign-in .col-6:first-child{ border-right: 1px solid #f7f7f7;}

#create-account{ max-width: 550px; }


#sign-in-form{
	text-align: left;
}
.form-style h3{
	margin-bottom: 30px;
	font-size: 20px;
}
.form-style form textarea,
.form-style form input:not([type='checkbox']) {  
	display: block;
	border:1px solid #d3d3d3;
	border-radius: 25px;
	font-size: 13px;
	font-family: 'Poppins', sans-serif;
	color: #c6c6c6;
	padding:12px 20px;
	width: 100%;
	margin-bottom: 20px;
}
.form-style form textarea{ height: 250px }
.form-style form input.icon_input[type=text]{
	background: url('../img/icon-form-email.png') no-repeat 95% center;
}
.form-style form input.icon_input[type=password]{
	background: url('../img/icon-form-password.png') no-repeat 95% center;
}
.form-style form input[type=submit]{
	cursor: pointer;
	background: #d2307b;
	text-transform: uppercase;
	color: #fff;
	font-size: 18px;
	margin:40px 0;
}
.form-style form input[type=submit]:hover{
	opacity: 0.9;
}
.form-style form div{
	font-size: 11.5px;
}
#sign-in-form form div{
	display: flex;
	justify-content: space-between;
}


#contact-us{
	position: fixed;
	background: rgba(0,0,0,0.8);
	height: 100%;width: 100%; top: 0; left: 0;
	display: flex; 
	display: none;
  	align-items: center; 
  	justify-content: center; 
  	text-align: center;
}
#contact-us .form-style{
	width: 100%;
	max-width: 560px;
	box-shadow: 0px 0px 30px rgba(0,0,0,0.07);
	background: #f8fafc;
	margin: 0; padding: 50px;
	position: relative;
}
#contact-us .form-style form input[type="submit"]{
	margin-bottom: 0;
}
#contact-us .form-style a.close-popup{
	position: absolute; right: 13px; top: 10px;
	color: #d2307b;
	font-size: 32px;
	text-transform: lowercase;
	line-height: 1;	
	text-decoration: none;
}
#contact-us .form-style a.close-popup:hover{ color: #000; }

footer{
	padding: 90px 0;
}
footer .container{
	background: #fff;
	align-items: start;
	padding: 60px 60px 30px 60px;
}
footer .container div{ flex-basis: 16.66%; }
footer .container div h4{ margin-bottom: 10px; }
footer .container div:last-child{
	flex-basis: 32%;
	margin-left: auto;
	font-size: 16px;
}
footer .container div li a{
	font-size: 14px;
	margin-bottom: 15px;
	display: block;
	color: #6d6d6d;
}
footer .container div p a{ color: #d2307b; }


footer .copyright{ 
	background: none; padding: 10px 0 0 0;
	font-size: 15px; 
	color: #1a1a1a;
}

@media screen and (max-width: 768px){
	header .container{
		height: auto; padding: 20px 15px;
		text-align: center;
		display: block;
	}
	#account-links{ margin:10px 0 0 0; }
}
@media screen and (max-width: 480px){


	.steps-box,
	#faq-list,
	.form-style{ margin:0; }

	.text-center{ margin-top: 60px; }

	.flex-box{ display: block; }

	.steps-box .flex-box li::after,
	.hide-m{ display: none; }


	#showcase-extensions{ text-align: center; padding:60px 20px 20px 20px; }	
	#showcase-extensions .flex-box > div{ margin-top: 20px; }
	

	#testimonials blockquote,
	.steps-box .flex-box li{ margin-bottom: 40px; }
	#testimonials blockquote{ text-align: center; }

	footer{ padding:2px 0 0 0; }
	footer .container{
		padding: 30px;		
	}
}