@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
:root {
	--primaryBlue:#009846;
	--primaryColor:#009846;
	--secondaryColor:#04cb60;
    --skew-angle: -5deg;
    --header-outer-height: 120px;
	--header-inner-height: 100px;
	--header-height-difference: calc(
		var(--header-outer-height) - var(--header-inner-height)
	);
	--header-bg: rgba(255,255,255,0.7);
	--bgGradient: linear-gradient(-45deg, #009846, #04cb60);
	--blackText:#2B2A29;
	--primaryGreen:#009846;
	--borderColor:#D2D4E9;
}
.wrapper{font-family: "Poppins", serif;position: relative;}
/* Sticky header */
.header-outer{height: var(--header-outer-height);position: sticky;display: flex;align-items: center;background-color: var(--header-bg);box-shadow: 0 2px 10px 0 rgba(0,0,0, 0.1);z-index: 99;top: calc(var(--header-height-difference) * -1);}
.header-inner{height: var(--header-inner-height);position: sticky;top: 0;}
/* Styling of other elements */
.header-inner .navbar-toggler{background-color: #fff;}
/* .navbar-brand{display: inline-flex;align-items: center;} */
.navbar-brand span{color: var(--primaryGreen);font-size: 2rem;font-weight: 800;vertical-align: text-top;}
.navbar-brand img {height: calc(var(--header-inner-height) - 10px);}
.wrapper header .navbar{background-color: transparent;padding: 0;height: 100%;}
header .navbar-nav .nav-link{font-size: 15px;font-weight: 500;color: var(--blackText);}
header .navbar-nav .nav-link.active, header .navbar-nav .nav-link:hover{color: var(--primaryGreen);}
.btn-signUp, .btn-signIn{font-size: 14px;font-weight: 600;border-radius: 50px;padding: 8px 15px;}
.btn-signIn, .btn-signIn:hover{background-color: var(--primaryBlue);color: #fff;}
.btn-signUp{background-color: #fff;border: 1px solid var(--secondaryColor);color: var(--secondaryColor);}
.btn-signUp:hover{background-color: var(--secondaryColor);color: #fff;}
.section-diagonal-bg{position: relative;margin-bottom: 2rem;}
/* .section-diagonal-bg::after {content: "";background: url(../images/gradient-bg.png)no-repeat center;position: absolute;inset: 0;z-index: -1;transform: skewY(var(--skew-angle));bottom: -60%;top:-200px;background-size: cover;}
.bannerText{text-align: center;color: #fff;} */
.section-diagonal-bg .bannerText{background-color: rgba(0, 0, 0, 0.4);}
.bannerText .card{background:var(--bgGradient)no-repeat;border-radius: 15px;}
.bannerText h1{font-weight: 500;line-height: 1em;letter-spacing: -4px;margin-bottom: 2rem;color: #fff;text-align: center;}
.bannerText h3{font-size: 34px;font-weight: 400;line-height: 1.35em;letter-spacing: -0.8px;margin-bottom: 2rem;color: #fff;text-align: center;}
.btn-explore{background-color:#fff;border: 1px solid var(--secondaryColor);color: var(--secondaryColor);font-size: 1rem;font-weight: 500;padding: .5rem 1.5rem;border-radius: 50px;}
.btn-explore:hover{background-color:var(--secondaryColor);color: #fff;}
.banner-section{width: 100%;
	height: 100vh;
	margin: 0;
	padding: 0;
	background-image: url("../assets/img/home-banner.jpg");
	background-size: cover;
	background-position: center;
	display: flex;
	justify-content: center;
	align-items: center;}
.bannerText{position: relative;
	z-index: 2;
	backdrop-filter: blur(4px);
	/* background-image:var(--bgGradient); */
	background-color: rgba(0, 152, 70, 0.75);
	color: #fff;
	padding: 50px;
	border-radius: 10px;
	box-shadow: 0 5px 50px rgba(0,0,0,0.5);text-align: center;}
.section-why{position: relative;isolation: isolate;background-color: #fff;padding: 4rem 0;}
/* .section-why::after{content: "";background-color:#F8F6FA;position: absolute;inset: 0;z-index: -1;transform: skewY(var(--skew-angle));top: 60px;} */
.intro-section{padding:2rem 0;}
.intro-section .intro-text{font-size: 18px;font-weight: 500;padding: 0 3rem;margin-bottom: 5rem;}
.intro-section .intro-text span{color: var(--primaryGreen);font-weight: 600;font-style: italic;}
.intro-section h2, .feature-section h2, .benefit-section h2, .result-section h2{text-align: center;}
.section-why .card{background-color: #fff;border-radius: 15px;box-shadow: 0px 10px 30px -5px rgba(47.98764492084886, 33.43220629934518, 255, 0.1);border: 0;padding: 1rem;text-align: center;min-height: 320px;}
.section-why .card h3{margin-bottom: 2rem;}
.trial-section{position: relative;isolation: isolate;padding: 6rem 0;color: #fff;}
.trial-section::after{content: "";background: url('../assets/img/gradient-bg.png')no-repeat center;position: absolute;inset: 0;z-index: -1;transform: skewY(var(--skew-angle));background-size: cover;}
.trial-section::before{content: "";position: absolute;inset: 0;z-index: 0;transform: skewY(var(--skew-angle));background-color: rgba(0, 0, 0, 0.5);}
.trial-section .container{position: relative;z-index: 10;}
.benefit-section{padding-top: 4rem;}
.feature-section{padding: 8rem 0 2rem;}
.feature-section h2, .benefit-section h2, .result-section h2{margin-bottom: 3rem;}
.featureBgCol{background:url('../assets/img/features.png')no-repeat center;background-size: cover;border-radius: 15px 0 0 15px;}
.feature-section .card{border-radius: 15px;box-shadow: 0px 10px 30px -5px rgba(47.98764492084886, 33.43220629934518, 255, 0.1);border: 0;}
.feature-section .card .featureCol{background-color: #F2F3FA;border-radius: 0 15px 15px 0;padding: 1.5rem 1rem 1.5rem 2rem;}
.feature-section .icon-wrap{background: linear-gradient(-45deg, #04cb60, #009846);;border-radius: 50%;text-align: center;}
.pricing-section .get-started-card{background: var(--bgGradient);border-radius: 15px;box-shadow: 0px 10px 30px -5px rgba(47.98764492084886, 33.43220629934518, 255, 0.1);border:0;color: #fff;padding: 2rem 1.5rem;margin: 0 auto;text-align: center;}
.pricing-section .get-started-card .btn-explore{margin: 2rem auto 0;}
.btn-subscribe{background-color: var(--primaryGreen);border-radius: 50px;color: #fff;}
/*.pricing-section{position: relative;isolation: isolate;background-color: #fff;padding:6rem 0 6rem;margin-bottom: 6%;}
 .pricing-section::after{content: "";background-color:#F8F6FA;position: absolute;inset: 0;z-index: -1;transform: skewY(var(--skew-angle));top: 50%;height: 100%;} */
.pricing-wrapper{
	display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-gap: 30px;
    margin: 50px;
    padding: 0px 20px;
}
.pricing-table{
	box-shadow: 0px 0px 18px #ccc;
	text-align: center;
	padding: 30px 0px;
	border-radius: 15px;
	position: relative;
	background-color: #fff;
}
.pricing-table .head {
	border-bottom:1px solid #eee;
	padding-bottom: 50px;
	transition: all 0.5s ease;
}
.pricing-table:hover .head{
	border-bottom:1px solid #8E2DE2;
}
.pricing-table .head .title{
	margin-bottom: 20px;
	font-size: 2rem;
	font-weight: 700;
	text-transform: capitalize;
}
 .pricing-table .content h6{font-size: 1.5rem;margin-top: 2rem;}
.pricing-table .content .price{
	background:var(--bgGradient);
	width: 90px;
	height: 90px;
	margin: auto;
	line-height: 90px;
	border-radius: 50%;
	border: 5px solid #fff;
	box-shadow: 0px 0px 10px #ccc;
	margin-top: -50px;
	transition: all 0.5s ease;
}
.pricing-table:hover .content .price{
	transform: scale(1.2);

}
.pricing-table .content .price h1{
	color:#fff;
	font-size: 30px;
	font-weight: 700;
	line-height: 80px;
}
.pricing-table .content ul{
	list-style-type: none;
	margin-bottom: 20px;
	padding:1rem 2rem;
	min-height: 220px;
}
 
.pricing-table .content ul li{
	margin: 20px 0px;
	font-size: 1rem;
	color:#555;
}

.pricing-table .content .sign-up{
	background:var(--bgGradient);
	border-radius: 40px;
	font-weight: 500;
	position: relative;
	display: inline-block;
}

.pricing-table .btn {
	color: #fff;
	padding: 14px 40px;
	display: inline-block;
	text-align: center;
	font-weight: 600;
	-webkit-transition: all 0.3s linear;
	-moz-transition: all 0.3 linear;
	transition: all 0.3 linear;
	border: none;
	font-size: 14px;
	text-transform: capitalize;
	position: relative;
	text-decoration: none;
	margin: 2px;
	z-index: 9999;
	text-decoration: none;
	border-radius:50px;
}

.pricing-table .btn:hover{
	box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.3);
}

.pricing-table .btn.bordered {
	z-index: 50;
	color: #333;
}
.pricing-table:hover .btn.bordered{
	color:#fff !important;
}
 
.pricing-table .btn.bordered:after {
	background: #fff none repeat scroll 0 0;
	border-radius: 50px;
	content: "";
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	-webkit-transition: all 0.3s linear;
	-moz-transition: all 0.3 linear;
	transition: all 0.3 linear;
	width: 100%;
	z-index: -1;	
	-webkit-transform:scale(1);
	-moz-transform:scale(1);
	transform:scale(1);
}
.pricing-table:hover .btn.bordered:after{
	opacity:0;
	transform:scale(0);
}
.result-section{padding-bottom: 6rem;background-color: #F8F6FA;position: relative;margin-top:-45px;}
.result-section .card{box-shadow: 0px 10px 30px -5px rgba(47.98764492084886, 33.43220629934518, 255, 0.1);border-radius: 0 0 15px 15px;border: 0;height: 100%;border-top: 4px solid var(--primaryGreen);}
.copy-footer{background-color: #000;text-align: center;padding: 1rem 0;color: #fff;}
.result-section .card .card-img-top{border-radius: 15px 15px 0 0;}
.result-section .card .btn{background:var(--bgGradient)no-repeat;border-radius: 6px;color: #fff;font-size: 1rem;margin: 0 auto;display: block;cursor: initial;font-weight: 600;}
.startNow-section{background: url('../assets/img/gradient-bg.png')no-repeat center;padding: 2rem 0;background-size: cover;position: relative;}
.startNow-section::before{content: "";position: absolute;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.6);top: 0;}
.startNow-section .card{background-color:transparent;padding: 2rem;border-radius: 15px;border:0;}
.startNow-section .card p{color: #fff;text-align: center;font-size: 1.5rem;margin-bottom: 2rem;}
.startNow-section .card .btn{padding: .5rem 1.5rem;background-color: var(--secondaryColor);color: #fff;border-radius: 10px;}
footer h1{color: var(--primaryGreen);}
.footer-menu{text-align: right;}
.footer-menu a{color: #000;text-decoration:none;}
.footer-menu span{color: #dedede;}
/*----------Responsive CSS----------------*/
@media all and (min-width: 1400px){
    .bannerText h1{font-size: 4rem;}
    .bannerText h3{font-size: 34px;}
	.feature-section .icon-wrap{width: 80px;height: 80px;line-height: 80px;}
	.benefit-section .get-started-card{width: 75%;}
	.benefit-section .get-started-card .btn-explore{width: 50%;}
	.intro-section h2, .feature-section h2, .benefit-section h2, .result-section h2{font-size: 3rem;}
	.section-diagonal-bg .bannerText{position: absolute;width: 100%;height: 100%;top: 0;left: 0;display: flex;align-items:center;padding:0 4rem 5rem;justify-content: center;}
	.bannerText .card{padding:3rem 2rem;}
	.login-card .login-card-left{border-radius: 16px 0 0 16px;}
	.login-card .login-card-right{padding: 4rem 0;}
	#login-page, #reg_page{height: 100vh;}
}
@media all and (min-width: 1200px) and (max-width: 1399px){
    .bannerText h1{font-size: 3rem;}
    .bannerText h3{font-size: 28px;}
	.feature-section .icon-wrap{width: 60px;height: 60px;line-height: 60px;}
	.feature-section .icon-wrap img{width: 32px;}
	.benefit-section .get-started-card{width: 75%;}
	.benefit-section .get-started-card .btn-explore{width: 50%;}
	.intro-section h2, .feature-section h2, .benefit-section h2, .result-section h2{font-size: 3rem;}
	.section-diagonal-bg .bannerText{position: absolute;width: 100%;height: 100%;top: 0;left: 0;display: flex;align-items:flex-end;padding:0 4rem 5rem;justify-content: flex-end;}
	.bannerText .card{padding:3rem 2rem;}
	.login-card .login-card-left{background-position: center;border-radius: 16px 0 0 16px;}
	.login-card .login-card-right{padding: 3rem 0;}
	#login-page, #reg_page{height: 100vh;}
}
@media all and (max-width: 767px){
	/* .header-outer .navbar-brand{display: none;} */
	.btnGroup{text-align: right;width: 48%;}
	.navbar-brand span{display: none;}
	.header-inner .navbar-toggler{padding: 5px 6px;color: var(--primaryBlue);}
	.header-inner .navbar-brand{width: 30%;}
	.header-inner .navbar-brand img{width: 100%;height: auto;}
	.header-inner .navbar-toggler-icon{width: 1em;height: 1em;}
	.header-inner .navbar-collapse{background-color:#F2F3FA;position: fixed;width: 100%;top: var(--header-inner-height);left: 0;padding: 1rem 1.5rem;}
	header .btn-signUp, header .btn-signIn{font-size: 12px;padding: 5px 10px;}
	.section-diagonal-bg .bannerText{background-color: #fff;}
	.bannerText h1{font-size: 1.5rem;line-height: 1.2;letter-spacing: 0;}
	.bannerText h3{font-size: 1rem;}
	.bannerText .card{width: 90%;margin: -40px auto 0;}
	.intro-section .intro-text{padding: 0 1rem;}
	.intro-section h2, .feature-section h2, .benefit-section h2, .result-section h2{font-size: 2rem;}
	.section-why, .feature-section{padding: 2rem 1rem;}
	.trial-section{margin-bottom: 60px;}
	.trial-section .btn-explore{margin-top: 1.5rem;}
	.feature-section .card .featureCol{border-radius: 15px;}
	.feature-section .icon-wrap{width: 50px;height: 50px;line-height: 50px;}
	.feature-section .icon-wrap img{width: 26px;}
	.pricing-wrapper{grid-template-columns:repeat(1,1fr);margin: 0;padding: 0px 10px;}
	.pricing-section{margin-bottom: 0;padding: 2rem 0 5rem;}
	.result-section{padding: 2rem 1rem 4rem;}
	.result-section .card{margin-bottom: 2rem;height: auto;}
	.result-section h2{margin-bottom: 2rem;}
	.pricing-section .get-started-card{margin-top: 2rem;}
	#login-page{padding: 2rem 0;height: 100%;}
	.login-card .login-card-left{min-height: 200px;border-radius: 16px 16px 0 0;}
	.login-card .login-card-right{padding: 2rem 0;}
	#reg_page{padding: 2rem 0;}
}

/*-----Login page styles------*/
#login-page, #reg_page{background-color: var(--primaryColor);}
.login-container{height: 100%;}
.login-container .login-card{border:0;background-color: transparent;}
.login-container .login-card .card-header{background-color: transparent;border-bottom: 0;text-align: center;}
.login-container .login-card .card-header img{width: 180px;}
/* #login-page .login-card .login-card-left{background: url('../assets/img/')no-repeat center;} */
/* .login-card .login-card-right{background-color: #fff;} */
.login-card .login-card-right .login_form{margin: 0 auto;}
.login-card .btn-login{text-transform: uppercase;font-weight: 600;border-radius: 20px;padding: .5rem 1.5rem;box-shadow: 0px 0px 20px rgba(0,0,0,0.2);color: #fff;border-color: var(--secondaryColor);}
#login-page .login-card .btn-login{background-color:var(--blackText);width: 100%;}

.login-card .btn-login:hover{background-color: var(--secondaryColor);color: #fff;}
.login_form .input-group, .regForm .input-group{border-radius: 20px;border:0;background-color: #fff;}
.login_form .input-group .form-control{padding: .5rem 1rem;border-radius: 0 20px 20px 0;}
.login_form .input-group .form-control:focus{box-shadow: none;}
.login_form .input-group .input-group-text, .regForm .input-group .input-group-append .btn{color: var(--primaryBlue);border: 0;background-color: transparent;}
.login_form .input-group .form-control, .login_form .input-group .input-group-text{background-color: transparent!important;border: 0;}
.login-card .text-link{color: #fff;font-weight: 700;font-size: 1rem;text-decoration: none;}
.login-card .text-link:hover{opacity: .8;}
.login-card p{color: #f2f2f2;}
input:-internal-autofill-selected {background-color: transparent!important;}
.login_form input:-webkit-autofill, .regForm input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 30px #f2f2f2 inset !important;
  -webkit-text-fill-color: #2B2A29!important;
}
/*-----End Login page styles-----*/
#reg_page{background: url('../assets/img/register-bg.png')no-repeat center;background-size: cover;}
#reg_page .login-container .login-card{background-color: rgba(0, 0, 0, 0.72);backdrop-filter: blur(12px);position: relative;
    z-index: 2;border-radius: 15px;}
.reg_page .alert{position: fixed;top:10px;right: 10px;z-index: 99;}
.regForm .form-label, .fw-normal{color:#eee;font-weight: 500;font-size: 14px;}
.regForm .form-control{border-radius: 6px;border: 1px solid var(--borderColor);background-color: #fff;}
.regForm .input-group, .regForm .input-group .form-control, .regForm .input-group .input-group-append .btn{background-color: #fff;}
.regForm .input-group .form-control{box-shadow: none;border: 0;}
.regForm .input-group .input-group-append .btn{border-radius: 0 6px 6px 0;}
.referal-btn{background-color: #f2f2f2;border: 1px dashed var(--th-darkGreen);border-radius: 20px;color: var(--th-midGreen);}
.referal-btn:hover{background-color: #eee;}
.ref_code{position: relative;}
#referal_checkbox{position: absolute;right: 30px;top: auto;bottom: 6px;}
#reg_page .login-card .btn-login{background-color: var(--primaryColor);}