@use "../utilities" as *;

/* START: Home 6 CTA CSS */
.h6-cta {
	&-section {
		background-color: var(--tj-color-theme-dark);
		position: relative;
		overflow: hidden;
	}
	&-shape {
		position: absolute;
		bottom: 0;
		inset-inline-end: 8%;
		width: 270px;
		height: 270px;
		@media (min-width: 2350px) {
			inset-inline-end: 15%;
		}
		@media (min-width: 2850px) {
			inset-inline-end: 20%;
		}
		@media #{$xxxl} {
			inset-inline-end: 5%;
		}
		@media #{$xxl} {
			inset-inline-end: 3%;
		}
		@media #{$xl, $lg, $md, $sm, $xs} {
			inset-inline-end: 0;
		}
		@media #{$lg, $md} {
			width: 200px;
			height: 200px;
		}
		@media #{$md, $sm, $xs} {
			width: 160px;
			height: 160px;
		}
		i {
			font-size: 270px;
			line-height: 1;
			color: var(--tj-color-common-white);
			opacity: 0.05;
			@media #{$lg} {
				font-size: 200px;
			}
			@media #{$md, $sm, $xs} {
				font-size: 160px;
			}
		}
		&::after {
			content: "";
			position: absolute;
			bottom: -90px;
			inset-inline-end: 0;
			width: 100%;
			height: 124px;
			background-color: var(--tj-color-theme-primary);
			filter: blur(16px);
			border-radius: 50%;
		}
	}
	&-image {
		height: 553px;
		@media (min-width: 2350px) {
			height: 750px;
		}
		@media #{$lg} {
			height: 570px;
		}
		@media #{$md} {
			height: 502px;
		}
		@media #{$sm} {
			height: 380px;
		}
		@media #{$xs} {
			height: 320px;
		}
		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}
	&-content {
		padding: 120px 15px 120px 60px;
		@media #{$lg} {
			padding: 100px 15px 100px 35px;
		}
		@media #{$md} {
			padding: 80px 15px 80px 30px;
		}
		@media #{$sm, $xs} {
			padding: 80px 15px;
			padding-top: 65px;
		}
		.sec-heading {
			max-width: 615px;
			margin-bottom: 0;
			@media #{$sm} {
				max-width: 520px;
				margin: 0 auto;
			}
		}
		.sec-title {
			color: var(--tj-color-common-white);
		}
		.desc {
			max-width: 405px;
			color: var(--tj-color-text-body-2);
			@media #{$sm, $xs} {
				max-width: 320px;
			}
		}
		.contact-button {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			gap: 15px;
		}
		.call-btn-style-2 {
			display: inline-flex;
			gap: 8px;
			align-items: center;
			.icon {
				display: inline-flex;
				align-items: center;
				justify-content: center;
				width: 54px;
				height: 54px;
				border-radius: 50%;
				background-color: rgba(247, 247, 247, 0.1);
				backdrop-filter: blur(50px);
				font-size: 20px;
				line-height: 1;
				color: var(--tj-color-common-white);
				transition: all 0.4s ease-in-out 0s;
			}
			.text {
				display: inline-flex;
				line-height: 1;
				color: var(--tj-color-common-white);
				font-weight: var(--tj-fw-bold);
				position: relative;
				&::before {
					content: "";
					position: absolute;
					bottom: -2px;
					inset-inline-start: auto;
					inset-inline-end: 0;
					width: 0;
					height: 1px;
					background-color: var(--tj-color-common-white);
					-webkit-transition: all 0.3s ease-in-out 0s;
					transition: all 0.3s ease-in-out 0s;
				}
			}
			&:hover {
				.icon {
    background: linear-gradient(to right, #f75763, #c354af, #9353f5);
  }

  .icon i {
    background: none;
    -webkit-text-fill-color: #fff;
    color: #fff;
  }
				.text {
					&::before {
						width: 100%;
						inset-inline-start: 0;
						inset-inline-end: auto;
					}
				}
			}
		}
	}
}
/* END: Home 6 CTA CSS */