@use "../utilities" as *;

/**----------------------------------------
START: CTA CSS
----------------------------------------*/
.h9-cta-section {
	position: relative;
	overflow: hidden;
	z-index: 1;
	border-radius: 12px;
	margin-bottom: 15px;
	background-color: var(--tj-color-theme-dark);
	&::before {
		content: "";
		position: absolute;
		top: -50px;
		inset-inline-start: -100px;
		width: 550px;
		height: 200px;
		border-radius: 50%;
		background-color: var(--tj-color-theme-primary);
		backdrop-filter: blur(60px);
		filter: blur(60px);
		opacity: 0.3;
		z-index: -1;
	}
	&::after {
		content: "";
		position: absolute;
		bottom: -50px;
		inset-inline-end: -30px;
		width: 300px;
		height: 300px;
		border-radius: 50%;
		background-color: var(--tj-color-theme-primary);
		backdrop-filter: blur(60px);
		filter: blur(60px);
		opacity: 0.3;
		z-index: -1;
	}
	.cta-bg {
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		position: absolute;
		top: 0;
		inset-inline-start: 0;
		width: 100%;
		height: 100%;
		mix-blend-mode: luminosity;
		opacity: 0.15;
		z-index: -1;
	}
	.cta-content {
		padding: 100px 0;
		.title {
			color: var(--tj-color-common-white);
			font-size: 94px;
			line-height: 1;
			margin: 0;
			// position: relative;
			&::before {
				content: "";
				position: absolute;
				top: 50%;
				inset-inline-start: 50%;
				width: 400px;
				height: 400px;
				border-radius: 50%;
				background-color: var(--tj-color-theme-primary);
				backdrop-filter: blur(60px);
				filter: blur(60px);
				transform: translate(-50%, -50%);
				opacity: 0;
				z-index: -1;
			}
			.cta-img {
				position: relative;
				display: inline-block;
				margin: 0 25px;
				a {
					position: absolute;
					width: 88px;
					height: 88px;
					font-size: 45px;
					bottom: -40px;
					inset-inline-start: 50%;
					transform: translateX(-50%);
					background-color: var(--tj-color-theme-primary);
					i {
						color: var(--tj-color-common-white);
					}
					&:hover {
						transform: translateX(-50%) scale(0.9);
					}
					@media #{$xl} {
						width: 78px;
						height: 78px;
						font-size: 38px;
						bottom: -38px;
					}
					@media #{$lg} {
						width: 70px;
						height: 70px;
						font-size: 35px;
						bottom: -35px;
					}
					@media #{$md} {
						width: 70px;
						height: 70px;
						font-size: 35px;
						bottom: -35px;
					}
					@media #{$sm, $xs} {
						width: 60px;
						height: 60px;
						font-size: 30px;
						bottom: -30px;
					}
				}

				@media #{$md, $sm, $xs} {
					margin-top: 30px;
					margin-bottom: 55px;
				}
			}
			img {
				max-width: 240px;
				width: 100%;
				background-color: var(--tj-color-text-body-2);
				border: 3px solid var(--tj-color-common-white);
				border-radius: 10px;
				@include transition(all 0.3s ease-in-out 0s);
				@media #{$xl} {
					max-width: 220px;
				}
				@media #{$lg} {
					max-width: 190px;
				}
				@media #{$md} {
					max-width: 190px;
				}
				@media #{$sm, $xs} {
					max-width: 180px;
				}
			}
			&:hover {
				&::before {
					opacity: 0.4;
				}
				img {
					transform: rotate(3deg);
				}
			}

			@media #{$xl} {
				font-size: 78px;
			}
			@media #{$lg} {
				font-size: 64px;
			}
			@media #{$md, $sm, $xs} {
				font-size: 55px;
				display: flex;
				flex-direction: column;
				align-items: center;
			}
		}

		@media #{$md, $sm, $xs} {
			padding: 60px 0;
		}
	}
}

/* !END: CTA CSS */