/*********************************
/*  Integrate Section Start
*********************************/
.integrate__wrapper {
	position: relative;
	display: grid;
	align-items: center;
	grid-template-columns: repeat(2, 1fr);
	background: rgba(var(--color-primary-rgb), 0.1);
	padding: 60px;
	border-radius: var(--radius);
	gap: 30px;
	z-index: 1;

	@include respond(tabland) {
		grid-template-columns: auto;
		text-align: center;
		padding: 60px 30px;
	}
	@include respond(phone-mid) {
		padding: 60px 20px;
	}

	.integrate__content {
		max-width: 490px;

		@include respond(tabland) {
			margin: auto;
		}
		.title {
			font-family: var(--font-default);
			font-size: 28px;
			font-weight: var(--font-medium);
			line-height: 40px;
			color: var(--color-heading);
			margin-bottom: 14px;
		}
		.desc {
			font-family: var(--font-default);
			font-weight: var(--font-regular);
			font-size: 16px;
			line-height: 24px;
			color: var(--color-heading2);
			margin: 0;
		}
	}
	.btn__group {
		display: inline-flex;
		align-items: center;
		gap: 12px;
		margin-top: 26px;
	}
	.integrate__channel {
		.channel__list {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 16px;

			@include respond(medium) {
				grid-template-columns: repeat(2, 1fr);
			}
			@include respond(phone-sm) {
				gap: 10px;
			}

			li {
				font-family: var(--font-default);
				font-weight: var(--font-medium);
				font-size: 20px;
				line-height: 18px;
				color: var(--color-heading2);
				display: flex;
				align-items: center;
				gap: 15px;
				padding: 15px 16px;
				border-radius: var(--radius);
				background: var(--color-white);

				@include respond(phone-sm) {
					font-size: 16px;
					gap: 10px;
					padding: 15px 10px;
				}

				.icon {
					width: 30px;
					height: 30px;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 50%;
					color: var(--color-white);
					font-weight: 400;
					font-size: 16px;
					line-height: 18px;

					@include respond(phone-sm) {
						width: 25px;
						height: 25px;
						font-size: 14px;
					}

					img {
						width: auto;
						height: auto;
						max-width: 30px;
						display: block;
						border-radius: 50%;

						@include respond(phone-sm) {
							max-width: 25px;
						}
					}
				}
			}
		}
	}
}

/*********************************
/*  Integrate Section End
*********************************/
