@use "../utilities" as *;

/* Growth css */
.tj-video-section {
	position: relative;
	overflow: hidden;
	z-index: 1;
	.tj-video-bg {
		position: absolute;
		inset-inline-start: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: -1;
		height: 130%; /* Slightly bigger for parallax depth */
		background-size: cover;
		background-position: center;
		will-change: transform;
		&::before {
			content: "";
			position: absolute;
			top: 0;
			inset-inline-start: 0;
			width: 100%;
			height: 100%;
			background-color: var(--tj-color-theme-dark);
			opacity: 0.5;
			z-index: 1;
		}
	}
	.video-btn-wrap {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 777px;
		margin: 0;
		@media #{xl} {
			min-height: 650px;
		}
		@media #{$lg, $md} {
			min-height: 550px;
		}
		@media #{$sm, $xs} {
			min-height: 400px;
		}
		.video-btn {
			max-width: 112px;
			.play-btn {
				background-color: rgba(247, 247, 247, 0.1);
				color: var(--tj-color-common-white);
				width: 112px;
				height: 112px;
				border-radius: 50%;
				font-size: 20px;
				position: relative;
				backdrop-filter: blur(50px);
				animation: pulse-two 2s infinite;
				z-index: 5;
				i {
					line-height: 1;
					display: inline-flex;
					margin-inline-start: 2px;
				}
				@media #{$lg, $md} {
					width: 90px;
					height: 90px;
				}
				@media #{$sm, $xs} {
					font-size: 16px;
					width: 70px;
					height: 70px;
				}
			}
			&:hover {
				transform: scale(0.9);
			}
			@media #{$sm, $xs} {
				gap: 10px;
			}
		}
	}
}