/* 10.01 - about page - start
==================================================================================================== */

/* intro section - start
================================================== */
.intro-section {
	.deco-image-3 {
		left: 0px;
		bottom: 0px;
		overflow: hidden;
	}
	.item-image {
		z-index: 1;
		position: relative;
		padding-left: 70px;
		padding-bottom: 95px;
		.absolute-image {
			z-index: 1;
			bottom: 0px;
			left: -130px;
			padding: 10px;
			max-width: 370px;
			position: absolute;
			background-color: #ffffff;
			box-shadow: 0px 20px 100px 0px rgba(53, 57, 78, 0.3);
		}

		.deco-image-1 {
			top: 105px;
			left: -180px;
			max-width: 225px;
		}
		.deco-image-2 {
			top: 80px;
			left: 70px;
			max-width: 230px;
		}
	}

	.item-image-2 {
		z-index: 1;
		position: relative;
		padding-right: 70px;
		padding-bottom: 95px;
		.absolute-image {
			z-index: 1;
			bottom: 0px;
			right: -130px;
			padding: 10px;
			max-width: 370px;
			position: absolute;
			background-color: #ffffff;
			box-shadow: 0px 20px 100px 0px rgba(53, 57, 78, 0.3);
		}

		.deco-image-1 {
			top: 105px;
			right: -180px;
			max-width: 225px;
		}
		.deco-image-2 {
			top: 80px;
			right: 70px;
			max-width: 230px;
		}
	}
}
/* intro section - end
================================================== */


/* misssion section - start
================================================== */
.misssion-section {
	&.bg-gray {
		background-color: #f9f6fe;
	}
	&.bg-gray-2 {
		background-color: #fdf7f9;
	}

	.section-title {
		margin-right: -30px;
	}

	.item-image-wrap {
		z-index: 1;
		position: relative;
		margin-left: -30px;
		.item-image {
			width: 650px;
			overflow: hidden;
			position: relative;
			border-radius: 6px;
			box-shadow: 0px 20px 100px 0px rgba(44, 48, 65, 0.3);
			.play-btn {
				top: 50%;
				left: 50%;
				width: 120px;
				height: 120px;
				font-size: 32px;
				text-align: center;
				position: absolute;
				line-height: 130px;
				border-radius: 100%;
				color: $default-pink;
				background-color: #ffffff;
				transform: translate(-50%, -50%);
				i {
					margin-left: 6px;
				}
			}
		}
		.deco-image-1 {
			bottom: -40px;
			right: -210px;
		}
	}

	.deco-image-2 {
		top: 100px;
		right: -75px;
		max-width: 280px;
	}

	.deco-image-3 {
		bottom: 80px;
		left: -140px;
		max-width: 280px;
	}
}
/* misssion section - end
================================================== */


/* how it work section - start
================================================== */
.howitwork-section {
	.overlay-purple {
		top: 0px;
		left: 0px;
		right: 0px;
		bottom: 0px;
		position: absolute;
		background-image: linear-gradient( -140deg, rgba(199, 63, 250, 0.9) 0%, rgba(134, 52, 246, 0.9) 100%);
	}

	.item-image {
		z-index: 1;
		padding-top: 90px;
		margin-left: -30px;
		position: relative;
		padding-right: 100px;
		.video-image {
			z-index: 2;
			overflow: hidden;
			position: relative;
			border-radius: 6px;
			box-shadow: 0px 3px 128px 0px rgba(3, 3, 3, 0.2);
			>img {
				width: 100%;
				display: block;
			}
			.play-btn {
				top: 50%;
				left: 50%;
				width: 120px;
				height: 120px;
				font-size: 32px;
				text-align: center;
				position: absolute;
				line-height: 130px;
				border-radius: 100%;
				color: $default-purple;
				background-color: #ffffff;
				transform: translate(-50%, -50%);
				i {
					margin-left: 6px;
				}
			}
		}

		.absolute-image {
			top: 0px;
			z-index: 1;
			right: -120px;
			max-width: 290px;
			position: absolute;
		}

		.deco-image-1 {
			right: -25px;
			bottom: -50px;
			max-width: 335px;
		}
		.deco-image-2 {
			top: -65px;
			left: 80px;
			max-width: 390px;
		}
	}
}
/* how it work section - end
================================================== */


/* faq section - start
================================================== */
.faq-section {
	&.bg-light {
		background-color: #fdf7f9 !important;
	}
	.deco-image-1 {
		right: 0px;
		bottom: 0px;
	}

	.item-image {
		width: 530px;
		margin-left: -5px;
		margin-bottom: -100px;
	}
}

.faq-accordion {
	position: relative;
	margin-right: -30px;
	.card {
		border: none;
		margin-top: 20px;
		border-radius: 6px;
		background-color: #ffffff;
		box-shadow: 0px 20px 30px 0px rgba(99, 95, 98, 0.05);
		.card-header {
			padding: 0px;
			border: none;
			background-color: transparent;;
			>a {
				width: 100%;
				display: block;
				font-weight: 600;
				padding: 20px 30px;
				position: relative;
				color: $default-black;
				font-family: $heading-font;
				&:after {
					top: 20px;
					right: 30px;
					color: #75717b;
					font-size: 16px;
					content: '\f105';
					font-weight: 600;
					position: absolute;
					transition: all .2s ease-in-out;
					font-family: 'Font Awesome 5 Pro';
				}
				&:not(.collapsed) {
					&:after {
						content: '\f107';
						transform: rotate(360deg);
					}
				}
			}
		}

		.card-body {
			padding: 30px;
			padding-top: 0px;
		}
	}
}
/* faq section - end
================================================== */

/* 10.01 - about page - end
==================================================================================================== */