@charset "utf-8";

/* common
------------------------------------------------------------*/
/* p:not(:last-child),
ul:not(:last-child),
ol:not(:last-child),
table:not(:last-child) {
	margin-bottom: 20px;
} */

a { text-decoration: none; }

.desktop {
	display: none;
}

@media (min-width: 601px) {
	.desktop {
		display: block;
	}

	.mobile {
		display: none;
	}
	
}

h2 {
	font-family: "Geologica", sans-serif;
	word-break: break-word;
}

h3 {
	word-break: break-word;
}

h4 {
	word-break: break-word;
}

p {
	word-break: break-word;
}

ul li {
	word-break: break-word;
}

.mb16 {
	margin-bottom: 16px;
}

ul.disc {
	padding-left: 24px;
}

ul.disc li {
	list-style-type: disc;
}

a:hover {
	opacity: .5;
	transition-duration: .3s;
}

a {
	cursor:pointer
}

a.whiteLink {
	color: #fff;
	text-decoration: underline;
}




/* Header & Kv START
------------------------------------------------------------------------------------------------------------------------*/
header {
	position: relative;
}

header::after {
	content: "";
	position: absolute;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 60%;
	background-color: #E8EAFC;
	z-index: -100;
	/* clip-path: polygon(45% 0, 100% 0%, 100% 99%, 0% 100%); */
}


/* Navigation */
.header {
	background-color: white;
	width: 100%;
	height: 56px;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 999;
}

.headerInner {
	padding: 0 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: inherit;
	position: relative;
}

.headerTitle {
	width: 100px;
}

.headerNav {
	position: absolute;
	right: 0;
	left: 0;
	top: 0;
	width: 100%;
	height: 100vh;
	transform: translateX(100%);
	background-color: #fff;
	transition: ease .4s;
}

.navUl {
	margin-top: 60px;
}

.navItems a {
	color: black;
	width: 100%;
	display: block;
	text-align: center;
	font-size: 1.6rem;
	padding: 16px 0;
}

.navItems:last-child a {
	margin-bottom: 0;
}

.nav-cta {
	display: flex;
	justify-content: center;
	padding-top: 24px;
}

.nav-cta li {
	margin-right: 16px;
}

.nav-cta li:last-child {
	margin-right: 0;
}

.nav-cta .subBtn{
	background-color: #fff;
	border: solid 1px #1A2DD8;
	padding: 10px 32px;
	color: #1A2DD8;
	border-radius: 6px;
}

.nav-cta .mainBtn{
	background-color: #1A2DD8;
	padding: 10px 32px;
	color: #fff;
	border-radius: 6px;
}

.hamburger {
	background-color: transparent;
	border-color: transparent;
	z-index: 9999;
	width: 40px;
	height: 100%;
}

.hamburger span {
	width: 100%;
	height: 2px;
	background-color: #000;
	position: relative;
	transition: ease .4s;
	display: block;
}

.hamburger span:nth-child(1) {
	top: 0;
}

.hamburger span:nth-child(2) {
	margin: 8px 0;
}

.hamburger span:nth-child(3) {
	top: 0;
}

.headerNav.active {
	transform: translateX(0);
}

.hamburger.active span:nth-child(1) {
	top: 6px;
	transform: rotate(45deg);
}

.hamburger.active span:nth-child(2) {
	opacity: 0;
}

.hamburger.active span:nth-child(3) {
	top: -14px;
	transform: rotate(-45deg);
}

/* --------- KV --------- */

.kv {
	padding: 0 16px 40px 16px;
	margin: auto;
	margin-top: 64px;
}

.kvTitle {
	font-size: 3rem;
	font-family: "Geologica", sans-serif;
	font-weight: 800;
	font-style: italic;
	color: #1A2DD8;
}

.kv p {
	font-size: 1.8rem;
	font-weight: 500;
}

.kvBtn {
	display: flex;
	justify-content: center;
	margin: 28px 0;
}

.kvBtn a {
	background-color: #1A2DD8;
	width: 90%;
	padding: 10px 32px;
	color: #fff;
	border-radius: 6px;
	display: block;
	text-align: center;
}

@media (min-width: 821px) {
	.desktop {
		display: block;
	}

	.mobile {
		display: none;
	}

	.header {
		background-color: transparent;
		position: inherit;
	}

	.headerInner {
		display: flex;
		justify-content: space-between;
		max-width: 1240px;
		margin: auto;
		padding-top: 24px;
	}

	.headerTitle {
		width: 140px;
	}

	.headerNav {
		position: static;
		transform: initial;
		background-color: inherit;
		height: inherit;
		display: flex;
		justify-content: end;
		width: 50%;
	}

	.navUl {
		width: 100%;
		display: flex;
		align-items: center;
		height: initial;
		justify-content: flex-start;
	}

	.navItems a {
		margin-bottom: 0;
	}

	.hamburger {
		display: none;
	}

	header::after {
		content: "";
		position: absolute;
		bottom: 0;
		width: 66%;
		height: 100%;
		background-color: #E8EAFC;
		z-index: -100;
		clip-path: polygon(40% 0, 100% 0%, 100% 99%, 0% 100%);
	}
	
	.kv {
		display: flex;
		margin-top: 32px;
		max-width: 1240px;
	}

	.headerTitle {
		margin-right: 16px;
	}

	.headerNav {
		width: auto;
	}

	.navUl {
		width: auto;
		margin-top: 0;
	}

	.navItems {
		margin-right: 32px;
	}

	.nav-cta {
		padding: 0;
	}

	.nav-cta li {
		margin-right: 10px;
	}

	.nav-cta .subBtn{
		padding: 6px 12px;
	}
	
	.nav-cta .mainBtn{
		padding: 6px 12px;
	}

	.navItems {
		display: block;
	}

	.kvLeft {
		width: 40%;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.kvRight {
		width: 60%;
	}

	.kvBtn {
		margin: 0;
		justify-content: left;
		margin-top: 32px;
	}

	.kvBtn a {
		width: 320px;
		padding: 16px 32px;
		font-size: 2rem;
	}

	.kvTitle {
		font-size: 3.2rem;
	}
}


@media (min-width: 1240px) {
	.kv {
		padding: 32px 0 32px 0;
	}

	.kvTitle {
		font-size: 4.8rem;
	}

	.headerInner {
		padding: 24px 0 0 0;
	}
	
}


/* Header & Kv END
------------------------------------------------------------------------------------------------------------------------*/












/* KeyMessage START
------------------------------------------------------------------------------------------------------------------------*/

#keyMessage {
	margin: 48px 0;
}

#keyMessage h2 {
	font-size: 2.4rem;
	font-weight: 800;
	margin-bottom: 32px;
}

.keyInner {
	margin: auto;
	padding: 0 16px;
	align-items: center;
}

.keyUl li{
	display: flex;
	justify-content: space-between;
	align-items: center;
	justify-content: center;
}

.keyNum {
	width: 23%;
	margin-right: 2%;
}

.keyP {
	width: 75%;
}


.keyNum p{
	font-weight: 800;
	font-size: 4rem;
	color: #1A2DD8;
	text-align: center;
}

@media (min-width: 768px) {
	#keyMessage {
		margin: 80px 0;
	}

	.keyInner {
		margin: auto;
		max-width: 1240px;
		display: flex;
	}

	#keyMessage h2 {
		width: 30%;
		font-size: 2.6rem;
		margin-right: 5%;
		margin-bottom: 0;
	}

	.keyUl {
		width: 65%;
	}

	.keyUl {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
	}

	.keyUl li {
		display: flex;
		flex-direction: column;
		width: 31%;
		margin-right: 3%;
	}

	.keyUl li:last-child {
		margin-right: 0;
	}

	.keyNum {
		width: 100%;
	}

	.keyP {
		width: 100%;
	}

	.keyNum p{
		font-size: 5rem;
	}

}


@media (min-width: 1240px) {
	.keyInner {
        padding: 0;
    }

	#keyMessage h2 {
		width: 34%;
		font-size: 2.7rem;
	}
	
}

/* KeyMessage END
------------------------------------------------------------------------------------------------------------------------*/













/* Features START
------------------------------------------------------------------------------------------------------------------------*/
#feature {
	padding: 56px 16px;
	background-image: url(../img/feature_bg.jpg);
	background-repeat: no-repeat;
	background-position: left;
	background-size: cover;
}

.featureInner {
	margin: auto;
}

#feature h2 {
	font-size: 2.4rem;
	font-weight: 800;
	color: #fff;
	margin-bottom: 16px;
	text-align: center;
}

#feature h2 span {
	font-size: 1.6rem;
	font-family: "Roboto", sans-serif;
}

.featureLeft p {
	color: #fff;
}

.featureLeft {
	margin-bottom: 16px;
}

.featureList li{
	background-color: #1A2DD8;
	display: flex;
	padding: 12px;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16px;
	min-height: 140px;
}

.featureListImg {
	width: 48px;
	margin-right: 12px;
}

.featureListTxt {
	width: 100%;
}

.featureList h3 {
	font-weight: 600;
	font-size: 1.8rem;
	color: #fff;
	margin-bottom: 4px;
}

.featureList p {
	color: #fff;
}

.linkBtn {
	margin-top: 12px;
}

.linkBtn a{
	color: #fff;
	position: relative;
	font-size: 1.8rem;
}

.linkBtn a:after {
	content: '';
	width: 6px;
	height: 6px;
	border: 0;
	border-top: solid 2px #ffffff;
	border-right: solid 2px #ffffff;
	transform: rotate(45deg);
	position: absolute;
	top: 0;
	right: -16px;
	bottom: 0;
	margin: auto;
}


@media (min-width: 768px) {
	#feature {
		padding: 80px 16px;
	}

	.featureInner {
		display: flex;
		margin: auto;
		max-width: 1240px;
	}

	.featureLeft {
		width: 30%;
		margin-right: 5%;
	}

	.featureRight {
		width: 65%;
	}

	.featureList{
		display: flex;
		flex-wrap: wrap;
	}

	.featureList li{
		width: 49%;
		margin-right: 2%;
		min-height: 300px;
	}

	.featureList li {
		display: block;
		padding: 24px;
		margin-bottom: 16px;
	}

	.featureListImg {
		width: 72px;
		margin-bottom: 10px;
	}

	.featureListTxt h3 {
		font-size: 2.4rem;
		font-weight: 800;
	}

	.featureList li:nth-child(2n){
        margin-right: 0;
    }

	#feature h2 {
		font-size: 2.6rem;
		text-align: left;
	}

}


@media (min-width: 1240px) {
	#feature {
		padding: 110px 0;
	}

	#feature h2 {
		font-size: 3.6rem;
	}
	
}



/* Features END
------------------------------------------------------------------------------------------------------------------------*/










/*  CBRA START
------------------------------------------------------------------------------------------------------------------------*/
#cbra {
	margin: 56px 0;
}

.cbraInner {
	margin: auto;
	padding: 0 16px;
	max-width: 1240px;
}

#cbra h2 {
	font-size: 2.4rem;
	font-weight: 800;
	margin-bottom: 32px;
}

#cbra h2 span {
	display: inline-block;
	margin-top: 8px;
	padding: 4px 20px;
	background-color: #000;
	color: #fff;
	font-weight: 500;
	font-size: 1.8rem;
	border-radius: 40px;
}

.cbraList {
	margin-top: 24px;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
}

.cbraList li {
	width: 48%;
	margin-right: 4%;
	margin-bottom: 16px;
	background-color: #F3F4FD;
	border-radius: 50px;
	padding: 4px 16px;
	color: #1A2DD8;
	text-align: center;
	font-weight: 600;
}

.cbraList li:nth-child(2n) {
	margin-right: 0;
}

.linkBtnBlack {
	margin-top: 12px;
}

.linkBtnBlack a{
	position: relative;
	color: #121212;
	font-size: 1.8rem;
}

.linkBtnBlack a:after {
	content: '';
	width: 6px;
	height: 6px;
	border: 0;
	border-top: solid 2px #121212;
	border-right: solid 2px #121212;
	transform: rotate(45deg);
	position: absolute;
	top: 0;
	right: -16px;
	bottom: 0;
	margin: auto;
}

.crbaRight img {
	margin-right: -16px;
}


@media (min-width: 768px) {
	#cbra {
		margin: 80px 0;
	}
	

	.cbraInner {
		display: flex;
	}

	.crbaLeft {
		max-width: 600px;
		margin-right: 16px;
	}

	#cbra h2 {
		font-size: 2.6rem;
	}


}


@media (min-width: 1240px) {
	#cbra {
		margin: 110px 0;
	}

	.crbaLeft {
		margin-right: 56px;
	}
	
	.cbraInner {
		padding: 0;
	}

	#cbra h2 {
		font-size: 3.6rem;
	}

	.cbraList li {
		width: 22%;
		margin-right: 4%;
	}

	.cbraList li:nth-child(2n) {
		margin-right: 4%;
	}

	.cbraList li:nth-child(4) {
		margin-right: 0;
	}
	
	.crbaRight img {
		margin-right: 0;
	}

	#cbra h2 span {
		font-size: 2rem;
	}
	
}

/*  CBRA END
------------------------------------------------------------------------------------------------------------------------*/











/*  Technology START
------------------------------------------------------------------------------------------------------------------------*/
#technology {
	padding: 56px 16px;
	background-image: url(../img/technology_bg.jpg);
	background-repeat: no-repeat;
	background-position: left;
	background-size: cover;
}

.technologyInner {
	margin: auto;
	max-width: 1240px;
}

.technologyTitle {
	margin-bottom: 16px;
	color: #fff;
}

.technologyTitle h2 span{
	display: block;
	font-size: 1.6rem;
	font-family: "Roboto", sans-serif;
}

.technologyTitle h2 {
	font-size: 2.4rem;
	text-align: center;
	font-weight: 800;
}

.technologyList li {
	background-color: #1A2DD8;
	padding: 16px;
	color: #fff;
	margin-bottom: 16px;
}

.technologyList li:last-child {
	margin-bottom: 0;
}

.technologyCardCont {
	display: flex;
	align-items: center;
	margin-bottom: 8px;
}

.technologyImg {
	width: 100px;
	margin-right: 8px;
}

.technologyCardTitle h3{
	font-size: 2rem;
	font-weight: 800;

}



@media (min-width: 768px) {

	#technology {
		padding: 80px 16px;
	}

	.technologyTitle {
		text-align: center;
		margin-bottom: 40px;
	}

	.technologyTitle h2 {
		font-size: 3rem;
	}

	.technologyList {
		display: flex;
	}

	.technologyList li {
		padding: 24px;
		margin-bottom: 0;
		margin-right: 2%;
		width: 32%;
		min-height: 400px;
	}
	
	.technologyList li:last-child {
		margin-bottom: 0;
		margin-right: 0;
	}

	.technologyCardCont {
		flex-direction: column;
	}

	.technologyImg {
		width: 150px;
		margin-right: 0;
	}

	.technologyCardTitle {
		width: 100%;
		text-align: center;
	}

	.technologyCardTitle h3{
		font-size: 2.8rem;
	}

	.technologyCardCont {
		margin-bottom: 24px;
	}

}


@media (min-width: 1240px) {
	.technologyInner {
		padding: 0;
	}

	#technology {
		padding: 110px 0;
	}

	.technologyTitle h2 {
		font-size: 3.6rem;
	}
}

/*  END
------------------------------------------------------------------------------------------------------------------------*/











/* Strengths START
------------------------------------------------------------------------------------------------------------------------*/
#strengths {
	padding: 56px 16px;
}

.strengthsInner {
	margin: auto;
	max-width: 1240px;
}

#strengths h2 {
	font-size: 2.4rem;
	text-align: center;
	font-weight: 800;
	margin-bottom: 40px;
}

#strengths h2 span{
	display: inline-block;
	font-size: 1.6rem;
	font-family: "Roboto", sans-serif;
	color: #1A2DD8;
}

.strengthsImg {
	margin-bottom: 28px;
}

.strengthsList {
	margin-top: 28px;
}

.strengthsList li{
	padding-left: 34px;
	position: relative;
	margin-bottom: 16px;
}

.strengthsList li::before {
    content: url('../img/checkmark.svg');
    display: block;
    width: 32px;
    height: 32px;
	position: absolute;
	left: -4px;
}

.strengthsList li h3{
	font-weight: 800;
	font-size: 2rem;
}


@media (min-width: 768px) {
	.strengthsCont {
		display: flex;
		align-items: center;
	}

	#strengths h2 {
		font-size: 3rem;
	}

	.strengthsImg {
		width: 44%;
		margin-right: 2%;
	}

	.strengthsTxt {
		width: 54%;
	}

	#strengths {
		padding: 80px 16px;
	}
}


@media (min-width: 1240px) {
	#strengths h2 {
		font-size: 3.6rem;
	}

	#strengths {
		padding: 110px 16px;
	}
}

/*  Strengths END
------------------------------------------------------------------------------------------------------------------------*/






/*  Pricing START
------------------------------------------------------------------------------------------------------------------------*/
#pricing {
	padding: 56px 16px;
	background-color: #E7E8EC;
}

.pricingInner {
	margin: auto;
	max-width: 1240px;
}

#pricing h2 {
	font-size: 2.4rem;
	text-align: center;
	font-weight: 800;
}

#pricing h2 span{
	display: inline-block;
	font-size: 1.6rem;
	font-family: "Roboto", sans-serif;
	color: #121212;
}

.pricingList > li {
	background-color: #fff;
	padding: 16px;
	border-radius: 6px;
	position: relative;
	margin-bottom: 24px;
	opacity: 50%;
}

.pricingList li.pricingListActive{
	border-radius: 0 6px 6px 6px;
}

.pricingSpot {
	position: absolute;
	padding: 8px 16px;
	background-color: #216DF1;
	top: -44px;
	left: 0;
	color: #fff;
	font-size: 1.8rem;
	font-weight: 500;
	border-radius: 6px 6px 0 0;
}

.pricingList > li.pricingListActive {
	margin-top: 72px;
	opacity: 100%;
}

span.bold {
	font-weight: 800;
}

#pricing h3 {
	font-size: 2.4rem;
	font-weight: 800;
	text-align: center;
	margin-bottom: 12px;
}

.pricingCheckList {
	background-color: #F4F8FE;
	padding: 12px;
}

.pricingCheckList li{
	padding-left: 34px;
	position: relative;
	margin-bottom: 16px;
	font-size: 1.8rem;
}

.pricingCheckList li:last-child{
	margin-bottom: 0;
}

.pricingCheckList li::before {
    content: url('../img/pricing_check.svg');
    display: block;
    width: 32px;
    height: 32px;
	position: absolute;
	top: 0;
	left: -4px;
}

.pricingCheckList li h3{
	font-weight: 800;
	font-size: 2rem;
}

.pricingCta {
	margin-top: 20px;
	text-align: center;
}

.pricingBtn {
	margin-bottom: 16px;
}

.pricingBtn a{
	color: #fff;
	width: 90%;
	padding: 10px 32px;
	border-radius: 6px;
	background-color: #1A2DD8;
	display: inline-block;
}

.pricingBtnDisable a {
	background-color: #C2C4D1;
	pointer-events: none;
}


@media (min-width: 768px) {
	#pricing {
		padding: 80px 16px;
	}

	.pricingInner {
		display: flex;
		margin: auto;
		max-width: 1240px;
	}

	#pricing h2 {
		width: 28%;
        margin-right: 2%;
		font-size: 3rem;
		text-align: left;
	}

	.pricingList {
		width: 70%;
	}

	.pricingBtn a{
		width: auto;
	}

}


@media (min-width: 1240px) {
	#pricing h2 {
		font-size: 3.6rem;
	}

	.pricingList > li {
		display: flex;
		align-items: center;
	}

	.pricingList > li > h3 {
		width: 24%;
		margin-right: 2%;
	}

	.pricingCheckList {
		width: 44%;
		margin-right: 2%;
	}

	.pricingCta {
		width: 28%;
	}

	#pricing {
		padding: 110px 16px;
	}
}



/*  Pricing END
------------------------------------------------------------------------------------------------------------------------*/








/*  FAQs START
------------------------------------------------------------------------------------------------------------------------*/
#faqs {
	padding: 56px 16px;
	background-color: #1A2DD8;
}

.faqsInner {
	margin: auto;
	max-width: 1240px;
}

#faqs h2 {
	font-size: 2.4rem;
	text-align: center;
	font-weight: 800;
	color: #fff;
	margin-bottom: 24px;
}

#faqs h3 {
	font-size: 2rem;
	font-weight: bold;
	margin-bottom: 8px;
}

.faqsList {
	color: #fff;
}

.faqsList > li {
	margin-bottom: 40px;
	padding-top: 16px;
	border-top: solid 1px #fff;
}

.faqsList > li:last-child {
	margin-bottom: 0;
}



@media (min-width: 768px) {
	#faqs {
		padding: 80px 16px;
	}

	.faqsInner {
		display: flex;
	}

	#faqs h2 {
		width: 30%;
		text-align: left;
		font-size: 3rem;
	}

	.faqsList {
		width: 70%;
	}

	#faqs h3 {
		font-size: 2.4rem;
	}

}


@media (min-width: 1240px) {
	#faqs h2 {
		font-size: 3.6rem;
	}

	#faqs {
		padding: 110px 16px;
	}
}

/*  FAQs END
------------------------------------------------------------------------------------------------------------------------*/







/*  Team START
------------------------------------------------------------------------------------------------------------------------*/
#team {
	padding: 56px 16px;
}

.teamInner {
	margin: auto;
	max-width: 1240px;
}

#team h2 {
	font-size: 2.4rem;
	text-align: center;
	font-weight: 800;
	margin-bottom: 40px;
}

#team h2 span{
	display: inline-block;
	font-size: 1.6rem;
	font-family: "Roboto", sans-serif;
	color: #1A2DD8;
}

.teamList {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
}

.teamList > li {
	width: 47%;
	margin-right: 3%;
	text-align: center;
	margin-bottom: 24px;
}

.teamList > li:nth-of-type(2n) {
	margin-right: 0;
}

#team h3 {
	font-weight: 800;
	font-size: 2rem;
	margin-bottom: 8px;
}

.teamListInner {
	padding: 2px;
	margin-top: 8px;
}

.linkedIn {
	position: relative;
	padding-left: 30px;
	display: inline-block;
	margin-top: 4px;
}

.linkedIn::before {
	content: url('../img/team_linkedin.svg');
    display: block;
    width: 32px;
    height: 32px;
	position: absolute;
	left: -4px;
}





@media (min-width: 768px) {
	#team {
		padding: 80px 16px;
	}

	.teamList > li {
		width: 19.2%;
		margin-right: 1%;
		margin-bottom: 64px;
	}

	.teamList > li:nth-of-type(2n) {
		margin-right: 1%;
	}
	
	.teamList > li:nth-of-type(5n) {
		margin-right: 0;
	}

	#team h2 {
		font-size: 3rem;
	}


}


@media (min-width: 1240px) {
	#team h2 {
		font-size: 3.6rem;
	}	
}



/*  END
------------------------------------------------------------------------------------------------------------------------*/







/*  Footer START
------------------------------------------------------------------------------------------------------------------------*/

footer {
	background-color: #000;
	color: #fff;
}

footer {
	padding: 56px 16px 8px 16px;
}

.footerInner {
	margin: auto;
	max-width: 1240px;
}

.footerTop {
	text-align: center;
	padding-bottom: 32px;
}

.footerMenu {
	margin-top: 24px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.footerMenu > li {
	margin-right: 24px;
	line-height: 2;
}

.footerBottom {
	padding-top: 32px;
	border-top: solid #fff 1px;
}

.footerBottom > ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-bottom: 32px;
}

.footerBottom > ul > li {
	margin-right: 24px;
	line-height: 2;
	text-decoration: underline;
}

.footerBottom{
	text-align: center;
}

footer a {
	color: #fff;
}

/*  END
------------------------------------------------------------------------------------------------------------------------*/