/*********************************
/*  Cta Box Start
*********************************/
.ctaBox__wrapper {
	// background: linear-gradient(160deg, rgba(#B14BF4, 1) 0%, rgba(#4D4DFF, 1) 100%);
	background: linear-gradient(120.84deg, #2FABF7 -4.3%, #4DD8FF 106.66%);

	position: relative;
	padding: 60px 40px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	// border: 2px solid rgba(var(--color-white-rgb), 0.12);
	border-radius: 8px;
	box-shadow: 0px 32px 65px rgba(var(--color-black-rgb), 0.25);
	z-index: 1;
	overflow: hidden;
	max-width: 1000px;
	margin: auto;

	@include respond (tabland) {
		flex-direction: column;
	}

	@include respond (phone) {
		margin-bottom: 40px;
	}
	@include respond (phone-sm) {
		padding: 40px 24px;
	}
	
	.ctaBox {
		&__inner {
			display: flex;
			align-items: center;
			gap: 17px;
			
			@include respond (tabland) {
				flex-direction: column;
				text-align: center;
			}
		}
		&__icon {
			height: 70px;
			width: 70px;
			border-radius: 50%;
			background: rgba(var(--color-white-rgb), 0.16);
			// box-shadow: 0px 5px 10px rgba(var(--color-black-rgb), 0.08),
			// 			0px 10px 20px rgba(var(--color-black-rgb), 0.1);
		}
		&__title {
			font-size: 24px;
			line-height: 28px;
			letter-spacing: 0.5px;
			font-weight: var(--font-bold);
			color: var(--color-white);
			margin-bottom: 8px;
			text-shadow: 0px 1px 0px rgba(var(--color-black-rgb), 0.16);

			@include respond (tabland) {
				font-size: 20px;
				line-height: 24px;
			}
		}
		&__desc {
			font-size: 20px;
			line-height: 20px;
			letter-spacing: 0.5px;
			font-weight: var(--font-medium);
			color: var(--color-white);
			margin-bottom: 0px;
			text-shadow: 0px 1px 0px rgba(var(--color-black-rgb), 0.16);

			@include respond (tabland) {
				font-size: 18px;
			}
		}
		&__content {
			flex: 1;
		}
	}
	.btn {
		background: var(--color-white);
		border-color: var(--color-white);
		color: var(--color-primary);
		// box-shadow: 0px 2px 1px rgba(var(--color-white-rgb), 0.2),
		// 			0px 0px 1px rgba(var(--color-black-rgb), 0.25),
		// 			0px 2px 6px rgba(var(--color-black-rgb), 0.1);


		&:hover {
			background: var(--color-black);
			border-color: var(--color-black);
			color: var(--color-white);
		}

		@include respond (phone-sm) {
			width: 100%;
			justify-content: center;
		}
	}
}


/*********************************
/*  Cta Box End
*********************************/
