/* App Overview Section - Start */
.overview-item-wrapper {
	&:not(:last-child) {
		margin-bottom: 120px;
	}
	&:nth-child(odd) {
		background: linear-gradient(90.09deg, rgba(252, 197, 243, 0.2) 21.49%, rgba(252, 197, 243, 0) 71.67%);
	}
	&:nth-child(even) {
		background: linear-gradient(-90.09deg, rgba(252, 197, 243, 0.2) 21.49%, rgba(252, 197, 243, 0) 71.67%);
	}
}

.app-circle {
	z-index: 1;
	float: right;
	width: 463px;
	height: 463px;
	position: relative;
	&:before {
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		content: '';
		position: absolute;
		background-size: 100%;
		background-repeat: no-repeat;
		background-position: center center;
		animation: spin 10s infinite linear;
		background-image: url(../images/shape/dashed-circle.png);
	}

	.app-item {
		position: absolute;
		span {
			width: 66px;
			height: 66px;
			display: flex;
			align-items: center;
			border-radius: 20px;
			justify-content: center;
		}
	}

	.app-item-1 {
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		span {
			width: 99px;
			height: 99px;
			background-color: #6852F4;
			filter: drop-shadow(0px 3.264px 19.584px rgba(77, 53, 233, 0.08)) drop-shadow(0px 9.792px 39.168px rgba(77, 53, 233, 0.24));
		}
	}

	.app-item-2 {
		left: 50%;
		top: -27px;
		span {
			background-color: #8865F9;
			animation: zoomInZoomOut 2s ease infinite;
		}
	}

	.app-item-3 {
		top: 139px;
		right: 49px;
		span {
			background-color: #3BC4B9;
			animation: zoomInZoomOut 3s ease infinite;
		}
	}

	.app-item-4 {
		right: 0;
		bottom: 73px;
		span {
			background-color: #FC9069;
			animation: zoomInZoomOut 2s ease infinite;
		}
	}

	.app-item-5 {
		left: 47%;
		bottom: -27px;
		span {
			background-color: #3BC4B9;
			animation: zoomInZoomOut 3s ease infinite;
		}
	}

	.app-item-6 {
		left: 82px;
		bottom: 84px;
		span {
			background-color: #FC9069;
			animation: zoomInZoomOut 2s ease infinite;
		}
	}

	.app-item-7 {
		top: 36%;
		left: -28px;
		span {
			background-color: #6E49E8;
			animation: zoomInZoomOut 3s ease infinite;
		}
	}

	.app-item-8 {
		top: 51px;
		left: 124px;
		span {
			background-color: #FC9069;
			animation: zoomInZoomOut 3s ease infinite;
		}
	}
}

.app-overview-content {
	padding-right: 100px;
	p {
		font-size: 24px;
	}
	hr {
		height: 3px;
		margin: 45px 0 30px;
		background-color: #7047EB;
	}

	.admin-info {
		display: flex;
		.admin-image {
			width: 54px;
			height: 54px;
			flex: 0 0 54px;
			overflow: hidden;
			margin: 0 24px 0 0;
			border-radius: 100%;
		}
		h4 {
			font-size: 22px;
			line-height: 1.2;
			margin-bottom: 20px;
		}
		span {
			display: block;
			line-height: 1;
			strong {
				color: #7047EB;
				font-weight: 400;
			}
		}
	}
}

.overview-item-wrapper-2 {
	padding: 60px 0;
	.overview-image {
		z-index: 1;
		position: relative;
		&:before {
			top: 50%;
			left: 50%;
			z-index: -2;
			content: '';
			opacity: 0.1;
			width: 492px;
			height: 492px;
			position: absolute;
			filter: blur(120px);
			background: #0061FF;
			transform: translate(-50%, -50%);
		}

		.shape-item {
			z-index: -1;
			position: absolute;
		}
		.shape-1 {
			left: 0;
			top: 46px;
		}
		.shape-2 {
			top: 0;
			right: 0;
		}
	}
	.app-overview-content p {
		font-size: 20px;
	}
	.section-title-2 .title-text {
		font-size: 48px;
	}
}

.overview-item-wrapper-3 {
	&:not(:last-child) {
		margin-bottom: 80px;
	}

	.overview-image {
		width: 670px;
		height: 570px;
		align-items: center;
		display: inline-flex;
		background-size: 492px;
		justify-content: center;
		background-repeat: no-repeat;
		background-position: center center;
	}

	.section-title-2 .sub-title {
		font-size: 14px;
		letter-spacing: 0.2em;
	}
	.section-title-2 .title-text {
		font-size: 48px;
	}
	.app-overview-content p {
		font-size: 20px;
	}

	.unfilled-btn {
		color: #7047EB;
		font-size: 16px;
		&:before {
			background-color: #7047EB;
		}
		i {
			margin-left: 5px;
		}
	}

	.aap-overview-accordion {
		p {
			font-size: 18px;
		}
	}
}

.aap-overview-accordion {
	.accordion_item {
		padding-bottom: 25px;
		border-bottom: 1px solid #E2E2E2;
		&:not(:last-child) {
			margin-bottom: 25px;
		}
	}
	.accordion_button {
		width: 100%;
		border: none;
		display: block;
		color: #161851;
		font-size: 20px;
		font-weight: 700;
		text-align: left;
		background: none;
		position: relative;
		font-family: $sofia;
		&:after {
			float: right;
			color: #7047EB;
			font-weight: 500;
			content: '\f107';
			font-family: 'Font Awesome 5 Pro';
			transition: 0.4s cubic-bezier(0.25, 1, 0.5, 1);
		}

		&[aria-expanded=true] {
			&:after {
				content: '\f106';
				transform: rotate(360deg);
			}
		}
	}

	.accordion-body {
		padding: 15px 0 0;
	}
}

.app-review-section {
	padding: 100px 0;
	border-bottom: 1px solid #C4C4C4;
	h2 {
		margin: 0;
		padding: 25px 0;
		font-size: 48px;
		font-weight: 600;
		line-height: 1.2;
	}
	.review-content {
		padding: 25px;
		text-align: center;
		h3 {
			font-size: 42px;
			font-weight: 700;
			margin-bottom: 26px;
		}
		.star-wrap {
			line-height: 1;
			display: block;
			color: #FF8210;
			margin-bottom: 5px;
		}
		p {
			font-size: 18px;
			margin-bottom: 0;
		}
	}
}

.overview-item-wrapper-4 {
	.app-overview-image {
		padding: 25px 95px 70px 95px;
		.dot-pattern {
			top: 0;
			left: 67px;
		}
		.circle-shape {
			bottom: 0;
			right: 37px;
		}
		.image-wrap {
			overflow: hidden;
			border-radius: 10px;
		}
	}

	.app-overview-image-2 {
		float: left;
		width: 1098px;
		.image-wrap {
			margin: 0 0 -90px 0;
		}

		.circle-shape {
			top: 0;
			left: 0;
		}
		.dot-pattern {
			left: 30px;
			bottom: 230px;
		}
	}

	.capsule-info-list {
		left: 0;
		top: 50%;
		z-index: 1;
		position: absolute;
		transform: translateY(-50%);
	}

	.unfilled-btn {
		color: #7047EB;
		&:before {
			background-color: #7047EB;
		}
	}
}

.capsule-info-list {
	>li {
		&:not(:last-child) {
			margin-bottom: 22px;
		}
		&:nth-child(even) {
			padding-left: 40px;
		}
	}
	i {
		font-size: 10px;
		margin-right: 10px;
	}
	span {
		color: #040212;
		font-size: 18px;
		font-weight: 600;
		background: #FFFCFA;
		padding: 15px 20px;
		border-radius: 10px;
		align-items: center;
		display: inline-flex;
		font-family: $sofia;
		box-shadow: 0px 4px 90px rgba(0, 0, 0, 0.05);
	}
}

.icon-info-list {
	>li {
		display: flex;
		&:not(:last-child) {
			margin-bottom: 30px;
		}
	}

	.icon-wrap {
		width: 28px;
		height: 28px;
		flex: 0 0 28px;
		color: #FFFfff;
		font-size: 14px;
		line-height: 30px;
		text-align: center;
		margin-right: 17px;
		border-radius: 100%;
		background-color: #7047EB;
	}

	h3 {
		font-size: 18px;
		line-height: 1.2;
		margin-bottom: 18px;
	}
	p {
		font-size: 18px;
	}
}
/* App Overview Section - End */