:root {
	--primary-green: #19AE47;
	--primary-purple: #5035E8;
	--primary-pink: #FF002B;
	--primary-orange: #E38462;
	--primary-gradient: linear-gradient(to right, var(--primary-purple), var(--primary-pink));
	--light-purple: #EAF0FF;
	--light-yellow: #FFF6EB;
	--light-green: #BFFFDE;
}

@media (min-width: 1200px) and (max-width: 1399px) {
section { padding: 70px 0;}
.navbar-nav .menu-item a { font-size: 18px;}
.header-right .btn { font-size: 18px; padding: 8px 25px;}
.hero .caption h1 { font-size: 40px;}
.hero .caption h2 { font-size: 40px;}
.hero .caption p { font-size: 20px;}
.hero .caption .btn { font-size: 20px;}

.features .box { padding: 30px 40px;}
.features .box img { height: 80px;}
.features .box p { font-size: 22px;}

.sec-head h3 { font-size: 40px;}
.howitworks .sec-inner ul li p { font-size: 20px;}

.pricing .sec-inner .box h4 { font-size: 24px;}
.pricing .sec-inner .box h2 { font-size: 45px; padding: 10px 0;}
.pricing .sec-inner .box .btn { font-size: 20px;}

.faqs .sec-inner p { font-size: 20px;}
.faqs .sec-inner p:last-child { margin: 0;}

.about .sec-inner p { font-size: 20px; padding: 0 10%;}

footer .top { padding: 30px 0;}
footer .footer-menu a { font-size: 18px;}
footer .bottom p { font-size: 15px;}

}

@media (min-width: 992px) and (max-width: 1199px) {
section { padding: 70px 0;}
header { margin: 0 0 30px 0;}
.navbar-nav .nav-item { margin: 0 15px;}
.navbar-nav .menu-item a { font-size: 16px;}
.header-right .btn { font-size: 18px; padding: 8px 25px;}
.hero .caption h1 { font-size: 40px;}
.hero .caption h2 { font-size: 40px;}
.hero .caption p { font-size: 20px;}
.hero .caption .btn { font-size: 20px; padding: 10px 40px;}

.features .box { padding: 30px 30px 20px;}
.features .box img { height: 80px;}
.features .box p { font-size: 20px;}

.sec-head { margin: 0 0 40px 0;}
.sec-head h3 { font-size: 35px;}
.howitworks { padding: 50px 0 70px 0;}
.howitworks .sec-inner ul li p { font-size: 20px;}

.pricing .sec-inner .box h4 { font-size: 20px;}
.pricing .sec-inner .box h2 { font-size: 40px; padding: 10px 0;}
.pricing .sec-inner .box .btn { font-size: 18px; padding: 10px 0;}
.pricing .sec-inner .box .btn i { font-size: 18px;}
.pricing .sec-foot p { font-size: 20px;}

.faqs .sec-inner { padding: 0 5%;}
.faqs .sec-inner p { font-size: 20px;}
.faqs .sec-inner p:last-child { margin: 0;}

.about .sec-inner p { font-size: 18px; padding: 0;}

footer .top { padding: 20px 0;}
footer .footer-menu a { font-size: 16px;}
footer .bottom p { font-size: 14px;}

}

@media (min-width: 768px) and (max-width: 991px) {
section { padding: 70px 0;}
header { margin: 0 0 30px 0;}
.navbar-brand { order: 1;}
.navbar-toggler { font-size: 40px; color: var(--primary-purple); order: 3; border: none; outline: none; padding: 0;}
.navbar-toggler:focus { box-shadow: none;}
.header-right { margin: 0 20px 0 auto; order: 2;}
.navbar-collapse { margin: 10px 0 0 0; order: 4;}
.navbar-nav { display: flex; justify-content: center; flex-direction: row;}
.navbar-nav .nav-item { margin: 0 20px;}
.navbar-nav .menu-item a { font-size: 20px;}
.header-right .btn { font-size: 18px; padding: 8px 25px;}

.hero .caption h1 { font-size: 40px;}
.hero .caption h2 { font-size: 40px;}
.hero .caption p { font-size: 20px;}
.hero .caption .btn { font-size: 20px; padding: 10px 40px;}

.features .box { padding: 20px 20px 10px;}
.features .box img { height: 60px;}
.features .box p { font-size: 16px;}

.sec-head { margin: 0 0 40px 0;}
.sec-head h3 { font-size: 30px;}

.before-after .box::before, .before-after .box::after { bottom: 20px; font-size: 16px;}

.howitworks { padding: 50px 0 70px 0;}
.howitworks .sec-inner ul li p { font-size: 20px;}

.pricing .sec-inner .box { padding: 20px 15px 0;}
.pricing .sec-inner .box h4 { font-size: 16px;}
.pricing .sec-inner .box h2 { font-size: 35px; padding: 10px 0;}
.pricing .sec-inner .box .btn { font-size: 18px; padding: 7px 0;}
.pricing .sec-inner .box .btn i { font-size: 20px;}
.pricing .sec-foot p { font-size: 20px;}

.faqs .sec-inner { padding: 0 5%;}
.faqs .sec-inner p { font-size: 18px;}
.faqs .sec-inner p:last-child { margin: 0;}

.about .sec-inner p { font-size: 16px; padding: 0;}

footer .top { padding: 20px 0;}
footer .footer-menu a { font-size: 16px;}
footer .bottom { margin: 0 0 20px 0;}
footer .bottom p { font-size: 14px;}
footer .disclaimer { padding: 10px;}
}

@media (max-width: 767px) {
section { padding: 70px 0;}
header { margin: 0 0 30px 0;}
.navbar-brand { order: 1;}
.navbar-toggler { font-size: 40px; color: var(--primary-purple); order: 3; border: none; outline: none; padding: 0;}
.navbar-toggler:focus { box-shadow: none;}
.header-right { margin: 0 20px 0 auto; order: 2;}
.navbar-collapse { margin: 10px 0 0 0; order: 4;}
.navbar-nav { display: flex; justify-content: center; flex-direction: column;}
.navbar-nav .nav-item { margin: 0; text-align: center; border-bottom: 1px solid rgba(0,0,0,0.2);}
.navbar-nav .menu-item a { font-size: 20px;}
.header-right { display: none;}
.header-right .btn { font-size: 18px; padding: 8px 25px;}

.hero .caption h1 { font-size: 27px;}
.hero .caption h2 { font-size: 27px;}
.hero .caption p { font-size: 16px;}
.hero .caption .btn { font-size: 16px; padding: 10px 40px;}

.features .sec-inner  { flex-wrap: wrap;}
.features .box { width: 100%; padding: 20px 20px 10px; margin: 0 0 20px 0;}
.features .box img { height: 60px;}
.features .box p { font-size: 16px;}

.sec-head { margin: 0 0 40px 0;}
.sec-head h3 { font-size: 30px;}

.before-after .box { width: 100%;}
.before-after .box::before, .before-after .box::after { bottom: 20px; font-size: 16px;}

.howitworks { padding: 50px 0 70px 0;}
.howitworks .inner-sec { padding: 50px 20px;}
.howitworks .sec-inner ul { flex-wrap: wrap;}
.howitworks .sec-inner ul li { width: 100%; margin: 0 0 30px 0;}
.howitworks .sec-inner ul li:last-child { margin: 0;}
.howitworks .sec-inner ul li p { font-size: 20px;}

.pricing .sec-inner .box { width: 100%; padding: 20px 15px 0; margin: 0 0 20px 0;}
.pricing .sec-inner .box h4 { font-size: 24px;}
.pricing .sec-inner .box h2 { font-size: 40px; padding: 10px 0;}
.pricing .sec-inner .box .btn { font-size: 18px; padding: 7px 0;}
.pricing .sec-inner .box .btn i { font-size: 20px;}
.pricing .sec-foot p { font-size: 20px;}

.faqs .sec-inner { padding: 0 5%;}
.faqs .sec-inner p { font-size: 18px;}
.faqs .sec-inner p:last-child { margin: 0;}

.about .sec-inner p { font-size: 16px; padding: 0;}

footer { margin: 30px 0 0;}
footer .top { padding: 20px 0; flex-wrap: wrap;}
footer .logo { width: 100%; margin: auto;}
footer .footer-menu { width: 100%; flex-direction: column; margin: 20px 0 0 0;}
footer .footer-menu a { width: 100%; display: block; font-size: 16px; text-align: center; padding: 10px 0; border-bottom: 1px solid #ddd;}
footer .bottom { margin: 0 0 20px 0;}
footer .bottom p { font-size: 14px;}
footer .disclaimer { padding: 10px;}
}