/*About*/
.about-img {
	@include breakpoint(max-xxl) {
		img {
			max-width: 650px;
		}
	}
	@include breakpoint(max-xl) {
		img {
			max-width: 540px;
		}
	}
	@include breakpoint(max-lg) {
		max-width: 650px;
		margin: 0 auto;
		img {
			max-width: 100%;
		}
	}
}
.about-feature-wrapper {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -7px -35px;
	.about-feature-item {
		padding: 0 7px 35px;
		display: flex;
		flex-wrap: wrap;
		width: 50%;
		@include breakpoint(lg) {
			@include breakpoint(max-xl) {
				width: 100%;
			}
		}
		@include breakpoint(max-md) {
			width: 100%;
		}
		.icon {
			font-size: 30px;
			line-height: 1;
			color: $base;
			width: 30px;
		}
		.cont {
			width: calc(100% - 30px);
			padding-left: 22px;
			.subtitle {
				color: $base;
				margin-bottom: 15px;
			}
		}
	}
}
/*Service*/
.service-item {
	text-align: center;
	box-shadow: 0 2px 5px rgba($base, 0.6);
	background: $white;
	position: relative;
	z-index: 1;
	.service-icon {
		font-size: 40px;
		line-height: 1;
		color: $base;
		width: 70px;
		height: 50px;
		text-align: center;
		margin: 0 auto 20px;
	}
	.title {
		margin-bottom: 20px;
	}
	padding: 30px 15px;
	@include border-radius(7px);
	@include transition($transition);
	&:hover {
		@include transform(scale(1.021));
	}
}
/*How To*/
.how-thumb {
	img {
		max-width: 753px;
		@include breakpoint(max-xxl) {
			max-width: 720px;
		}
		@include breakpoint(max-xl) {
			max-width: 680px;
		}
		@include breakpoint(max-lg) {
			max-width: 100%;
		}
	}
}
.how-wrapper {
	counter-reset: how-counter;
}
.how__item {
	display: flex;
	flex-wrap: wrap;
	font-size: 14px;
	&-thumb {
		font-size: 24px;
		color: $white;
		width: 70px;
		height: 70px;
		line-height: 70px;
		text-align: center;
		background: $base;
		@include border-radius(5px);
	}
	&-content {
		padding-left: 30px;
		width: calc(100% - 70px);
		p {
			max-width: 440px;
		}
	}
	&-title {
		margin: 0;
		margin-bottom: 15px;
	}
	position: relative;
	&::after {
		position: absolute;
		counter-increment: how-counter;
		content: "0" counter(how-counter);
		font-size: 40px;
		font-weight: 700;
		color: rgba($base, 0.4);
		top: 100%;
		left: 0;
	}
	&:nth-of-type(n + 10) {
		&::after {
			content: counter(how-counter);
		}
	}
	&:not(:last-child) {
		margin-bottom: 45px;
	}
	@include breakpoint(lg) {
		flex-direction: row-reverse;
		text-align: right;
		&-content {
			padding-left: 0;
			padding-right: 30px;
			p {
				margin-left: auto;
			}
		}
		&::after {
			left: unset;
			right: 0;
		}
	}
}
/*Counter*/
.counter-item {
	position: relative;
	margin-left: 35px;
	padding: 35px 25px 35px 55px;
	@include border-radius(5px);
	background: $section-bg;
	height: 100%;
	display: flex;
	align-items: center;
	box-shadow: 0 0 5px rgba($title, 0.2);
	z-index: 1;
	.counter-icon {
		width: 70px;
		height: 70px;
		line-height: 70px;
		text-align: center;
		@include border-radius(50%);
		font-size: 24px;
		color: $base;
		background: $white;
		box-shadow: 0 0 4px rgba($title, 0.3);
		position: absolute;
		left: -35px;
		top: calc(50% - 35px);
	}
	.counter-content {
		width: 100%;
		.counter-title {
			margin: 0;
			display: flex;
			align-items: center;
			color: $base;
			margin-bottom: 10px;
		}
		.counter-subtitle {
			font-size: 16px;
		}
	}
}
/*Feature*/
.sticky-section-title {
	position: sticky;
	top: 200px;
}
.feature-item {
	padding: 40px 30px;
	@include border-radius(8px);
	background: $white;
	position: relative;
	z-index: 1;
	box-shadow: 0 0 5px rgba($base, 0.1);
	border: 1px solid $border-color;
	@extend %flex;
	.feature-icon {
		img {
			width: 60px;
			height: 60px;
			object-fit: contain;
			object-position: left top;
		}
	}
	.feature-content {
		width: calc(100% - 60px);
		padding-left: 20px;
		.feature-title {
			margin-bottom: 15px;
		}
	}
	&:not(:last-child) {
		margin-bottom: 24px;
	}
	@media screen and (max-width: 450px) {
		padding: 30px 15px;
		.feature-icon {
			img {
				width: 40px;
				height: 40px;
			}
		}
		.feature-content {
			width: calc(100% - 40px);
			padding-left: 15px;
			font-size: 14px;
			line-height: 1.6;
		}
	}
}
/*FAQs*/
.accordion-item {
	&:not(:last-child) {
		margin-bottom: 14px;
	}
	.accordion-title {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		cursor: pointer;
		padding: 15px 15px 15px 20px;
		background: $section-bg;
		border: 1px solid $border-color;
		@include border-radius(5px);
		.title {
			flex-grow: 1;
			margin: 0;
			font-weight: 600;
			max-width: calc(100% - 20px);
		}
		.icon {
			width: 14px;
			height: 14px;
			border-left: 1px solid $title;
			border-bottom: 1px solid $title;
			@include transform(translateX(-5px) rotate(-45deg));
			@include transition($transition);
			display: block;
		}
	}
	.accordion-content {
		padding: 25px 20px;
		display: none;
		border: 1px solid $border-color;
		border-top: none;
		@include border-radius(0 0 5px 5px);
	}
	&.active {
		.accordion-content {
			display: block;
		}
	}
	&.open {
		.accordion-title {
			@include border-radius(5px 5px 0 0);
			.icon {
				@include transform(translateX(-5px) translateY(8px) rotate(135deg));
			}
		}
	}
}
/*Testimonial*/
.testimonial-item {
	padding: 22px;
	@include border-radius(5px);
	background: $section-bg;
	border: 1px solid $border-color;
	font-size: 14px;
	line-height: 1.6;
	.testimonial-header {
		.thumb {
			width: 80px;
			height: 80px;
			@include border-radius(50%);
			overflow: hidden;
			border: 1px solid $border-color;
			img {
				width: 100%;
			}
		}
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 15px;
		.icon {
			font-size: 50px;
			color: rgba($base, 0.4);
		}
	}
	.rating {
		font-size: 16px;
		color: $star;
		margin-bottom: 15px;
	}
}
/*Sponsor*/
.sponsor-wrapper {
	@extend %flex;
	.sponsor-item {
		width: calc(100% / 7);
	}
}
.sponsor-item {
	padding: 20px;
	background: $section-bg;
	border: 1px solid $border-color;
	@include border-radius(5px);
	img {
		width: 100%;
		height: 70px;
		object-fit: contain;
	}
}
.bg--section {
	.counter-item,
	.sponsor-item,
	.testimonial-item,
	.accordion-item .accordion-title {
		background: $body-bg;
	}
}
/*Account*/
.account-section {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	@include breakpoint(xl) {
		padding: 35px 0;
	}
}
.account-wrapper {
	width: 100%;
	max-width: calc(100% - 100px);
	box-shadow: 0 0 10px rgba($title, 0.3);
	min-height: calc(100vh - 100px);
	@include border-radius(5px);
	display: flex;
	flex-wrap: wrap;
	.account-left {
		width: 570px;
		@include border-radius(5px 0 0 5px);
		background: $base;
		padding: 70px 40px;
		display: flex;
		flex-wrap: wrap;
		flex-direction: column;
		justify-content: center;
		position: sticky;
		.logo {
			display: block;
			max-width: 200px;
			margin-left: auto;
			margin-right: auto;
			img {
				width: 100%;
			}
			margin-bottom: 50px;
		}
	}
	.account-right {
		width: calc(100% - 570px);
		padding: 40px 40px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		.section-title {
			max-width: 540px;
		}
	}
	@include breakpoint(max-xl) {
		@include breakpoint(lg) {
			.account-left {
				width: 400px;
			}
			.account-right {
				width: calc(100% - 400px);
			}
		}
	}
	@include breakpoint(max-lg) {
		max-width: 100%;
		max-height: 100%;
		margin: 20px;
		min-height: calc(100vh - 40px);
		.account-right,
		.account-left {
			width: 100%;
		}
		.account-left {
			padding: 20px;
			@include border-radius(5px 5px 0 0);
			.account-thumb {
				display: none;
			}
			.logo {
				margin: 0 auto;
				max-width: 170px;
			}
		}
	}
	@include breakpoint(max-sm) {
		.account-right {
			padding: 45px 20px 30px;
		}
	}
	&.login-wrapper {
		@include breakpoint(xl) {
			.account-left {
				flex-grow: 1;
				.account-thumb {
					max-width: 540px;
					margin-left: auto;
					margin-right: auto;
				}
			}
			.account-right {
				max-width: 40%;
			}
		}
	}
}
.account-thumb {
	margin-top: auto;
	margin-bottom: auto;
	img {
		width: 100%;
	}
}
.form--check {
	.form-check-input {
		&:checked {
			background-color: $base;
			border-color: $base;
		}
	}
	.form-check-label {
	}
}
.form--label {
	font-family: $heading;
	text-transform: capitalize;
	color: $title;
	margin-bottom: 10px;
	font-weight: 500;
}
.form--control {
	height: 50px;
	border: 1px solid $border-color;
	box-shadow: none !important;
	outline: none !important;
	&:focus {
		border-color: $base;
	}
}
textarea.form--control {
	height: 130px;
}
select.form--control {
	-webkit-appearance: button;
	appearance: button;
}
/*Contact*/
.contact__item {
	&-icon {
		width: 55px;
		height: 55px;
		line-height: 55px;
		font-size: 22px;
		background: $section-bg;
		border: 1px solid rgba($base, 0.2);
		@include border-radius(5px);
		text-align: center;
		color: $base;
		@include transition($transition);
	}
	display: flex;
	flex-wrap: wrap;
	&-cont {
		width: calc(100% - 55px);
		a {
			color: $base;
		}
		padding-left: 20px;
	}
	&-title {
		margin: 0;
	}
	&:not(:last-child) {
		margin-bottom: 20px;
	}
	&:hover {
		.contact__item-icon {
			background: $base;
			color: $white;
			border-color: $base;
		}
	}
}

/*Documentation*/
.nav--pills {
	.nav-item {
		.nav-link {
			padding: 7px 15px;
			color: $title;
			font-family: $heading;
			&.active {
				background: $base;
				color: $white;
			}
		}
	}
}
.sticky-nav {
	position: sticky;
	top: 78px;
	z-index: 99;
}
.documentation-item {
	.documentation-header {
		margin-bottom: 20px;
		padding-bottom: 20px;
		border-bottom: 1px solid $border-color;
	}
	p {
		margin: 0;
		a {
			color: $base;
		}
		&:not(:last-child) {
			margin-bottom: 20px;
		}
	}
	&:not(:first-child) {
		padding-top: 75px;
	}
}
thead {
	font-family: $heading;
}
.checkout-section-wrapper {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	padding: 30px;
	@include breakpoint(max-sm) {
		padding: 20px;
	}
}
.checkout-wrapper {
	max-width: 620px;
	margin: 0 auto;
	padding: 30px;
	@include border-radius(5px);
	border: 1px solid $border-color;
	background: $section-bg;
	.checkout-logo {
		max-width: 180px;
		margin: 0 auto 25px;
		a {
			display: block;
			img {
				width: 100%;
			}
		}
	}
	.checkout-body {
		.or {
			text-align: center;
			margin: 15px 0;
			position: relative;
			&::before {
				content: "";
				position: absolute;
				width: 100%;
				height: 1px;
				background: $border-color;
				left: 0;
				top: 50%;
			}
			span {
				background: $section-bg;
				padding: 0 10px;
				z-index: 1;
				position: relative;
			}
		}
	}
	@include breakpoint(max-sm) {
		padding: 30px 20px 20px;
	}
}