// index page
.wrapper {
	// padding: 70px 40px 30px 40px;
	padding: 0;
	margin-top: 75px;

	.background-image {
		.img-h {
			padding: 80px;

			p {
				color: yellow;
				padding-left: 30px;
				position: relative;
				margin-top: 30px;
				font-weight: 500;

				&::before {
					content: '\2713\0020';
					position: absolute;
					color: yellow;
					left: 0;
				}
			}

			.img-text {
				color: #7fd4f3;
				font-size: 20px;
				margin-top: 20px;
				font-weight: 500;
			}

			.btn-img {
				margin-top: 40px;

				a {
					border: 1px solid $white;
					background-color: $brand_color-dark;
					padding: 10px 45px;
					color: $white;
					border-radius: 30px;
					font-size: 14px;
					letter-spacing: 1;
					transition: all .2s linear;

					&:hover {
						background-color: transparent;
					}
				}
			}

			.button-video {
				margin-top: 40px;
				position: relative;

				a {
					border: 1px solid $white;
					background-color: transparent;
					padding: 10px 30px;
					color: $white;
					border-radius: 30px;
					font-size: 14px;
					letter-spacing: 1;
					transition: all .2s linear;

					i {
						&::before {
							padding-right: 10px;
							color: $brand_color-dark;
						}
					}

					&:hover {
						background-color: $brand_color-dark;

						i::before {
							color: $white;
						}
					}
				}
			}
		}
	}

	.background-black {
		.row {
			&>div {
				display: flex;
				align-items: center;
				justify-content: center;

				img {
					width: 30px;
					height: 30px;
					margin-right: 10px;
				}
			}
		}
	}

	.mobile-container {
		.background-business {
			&>div {
				padding: 90px 65px;
			}

			.img-flex {
				position: absolute;
				bottom: 0;
				right: 0;

				.mobile-img {
					width: 300px;
				}
			}

			p {
				color: $black;
				font-size: 13px;
				margin-top: 30px;
			}
		}
	}

	.slider-image {
		margin: 40px 0;
		padding: 0px 80px;
		background-color: #fcfcfc;


		.slider-text {
			padding-left: 40px;
			padding-top: 120px;

			div {
				&:nth-child(2) {
					color: #2e3192;
					font-weight: 400;
				}
			}
		}
	}

	.background-ul {
		&>div {
			padding: 65px;

			ul {
				list-style-type: none;
				color: $black;
				font-weight: 400;

				li {
					position: relative;
					padding-left: 20px;

					&::before {
						content: '\2713\0020';
						position: absolute;
						color: $brand_color-dark;
						left: 0;
					}
				}
			}
		}
	}

	.place {
		margin-top: 30px;

		.owl-carousel {
			padding: 0 80px;

			&>div {
				img {
					width: 50px;
					margin-bottom: 25px;
				}

				p {
					font-size: 14px;
					line-height: 1.5;
				}

				.item {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
				}
			}
		}
	}

	.bsp {
		margin-top: 50px;
		margin-left: -24px;
		margin-right: -24px;

		img {
			height: auto;
			width: 100%;
		}

		.bsp-price {
			display: flex;
			justify-content: space-between;
			padding: 15px 0;

			span {
				&:first-child {
					font-weight: 600;
					font-size: 17px;
					color: $black;
				}

				&:nth-child(2) {
					font-size: 15px;
				}
			}
		}

		.bsp-text {
			font-size: 14px;

			span {
				color: $brand_color-sp;
			}
		}

		.card-body {
			position: relative;
			padding-left: 0;

			h3 {
				color: #000;
				font-size: 18px;
				padding-top: 15px;
				padding-bottom: 15px;
			}

			p {
				font-size: 14px;
				padding-bottom: 15px;
				margin-bottom: 0;

				a {
					text-decoration: underline;

					&:hover {
						color: #ff6600;
					}
				}
			}

			ol {
				padding-left: 40px;

				li {
					font-size: 14px;
					padding-left: 10px;
				}
			}

			ul.list-accord {
				list-style-type: disc;
				padding-left: 40px;

				li {
					font-size: 14px;
					padding-left: 10px;

					&::before {
						content: '';
					}
				}
			}

			ul {
				list-style-type: none;

				li {
					padding-left: 25px;
					font-size: 15px;

					span {
						color: $brand_color-dark;
					}

					&::before {
						content: '\2713\0020';
						position: absolute;
						color: grey;
						left: 0;
					}

					&:nth-child(-n+6) {
						&::before {
							color: $brand_color-dark;
						}
					}

					&.color-before {
						&::before {
							color: $brand_color-dark;
						}
					}
				}
			}
		}
	}

	.background-hand {
		&>div {
			padding: 130px 65px;

			&.img-hand {
				padding: 100px 65px;
			}

			.col-md-6 {
				color: $white;
			}
		}
	}

	.hands-img {
		margin-left: -24px;
		margin-right: -24px;

		img {
			width: auto;
			margin-bottom: 30px;
			height: 50px;
		}
	}

	// about page
	&.about {
		.img-h {
			padding: 180px 80px;

			div {
				color: $white;
				font-size: 20px;
				font-weight: 400;

				&:last-child {
					margin-top: 30px;
				}
			}
		}

		// .background-hand {
		// 	&> div {
		// 		padding: 130px 65px;
		// 	}
		// }

		.row.mt-5 {
			margin-top: 50px;
		}
	}

	// our clients page
	&.clients {
		.bsp {
			.logo-c {
				height: 40px;
				width: 135px;
				margin-top: 30px;
				margin-bottom: 30px;
			}
		}
	}

	// faq page
	.faq-h {
		background-color: $black;
		padding: .6rem 1.25rem;
		margin: 30px 0;
		font-weight: 600;
		color: $white;

		&.color-sp {
			background-color: $brand_color-sp;
		}
	}

	.text-faq {
		color: $brand_color-sp;
		font-weight: 500;
		margin-bottom: 20px;
		line-height: 1;
	}

	#accordion {

		table {
			margin-top: 20px;
			margin-bottom: 20px;
			
			td {
				text-align: center;
				vertical-align: middle;
				padding: 3px 10px;
				font-size: 14px;

				&.td-price {
					width: 155px;
					padding: 3px 10px;
				}

				&.price-green {
					background-color: #30b830;
					color: #fff;
					font-weight: 500;
				}

				span {
					&.span-left {
						float: left;
					}
					&.span-right {
						float: right;
					}
				}
			}
		}

		.card-header {
			border: none;
			padding: 0;
			background-color: transparent;
			border: 1px solid #ced4da;
			border-radius: 0;
			margin-bottom: 15px;

			h5 {
				font-size: 14px;
				color: $grey_color;
				cursor: pointer;
				width: 100%;

				a {
					padding: .6rem 1.25rem;
					display: block;
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 100%;

					&::after {
						content: '\25bc';
						color: #bfbfbf;
					}
				}
			}
		}

		.card-body {
			padding: 0 1.25rem 1.25rem;
		}
	}

	// blog page
	&.blog {
		.col-md-4 {
			div {
				font-size: 12px;
			}

			img {
				margin-bottom: 20px;
			}
		}
	}
}

// support
.support {
	form {
		margin-top: 40px;

		.code-form {
			width: 200px;
			margin-bottom: 40px;

			input {
				text-align: center;

				&::-webkit-input-placeholder {
					text-align: center;
				}

				&::-moz-placeholder {
					text-align: center;
				}

				&:-ms-input-placeholder {
					text-align: center;
				}

				&:-moz-placeholder {
					text-align: center;
				}
			}
		}

		.btn-support {
			color: #ff6600;
			border-color: #ff6600;

			&:hover {
				background-color: #ff6600;
				color: $white;
			}
		}
	}
}

.tabs ul {
	margin-bottom: 0;
}