[data-elementor-type]:has([id^="site-elementor-"]) * {
    overflow: visible !important;
}

#site-elementor-about {
	position: relative;
	border-top: 1px solid #343434;	

	.site-elementor-about-firefly {
		display: inline-block;
		width: 290px;
		height: 660px;
		padding: 50px 20px;
		background-size: 100% 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}

	.site-elementor-about-firefly:is(.has-right-side) {
		left: unset;
		right: 0px;
		transform: scaleX(-1);
	}

	.site-elementor-about-containment {
		display: flex;
		max-width: 1290px;
		margin: 0 auto;
		padding: 100px 20px;
		align-items: flex-start;
	}
	
	.site-title {
		font-size: 3.5rem;
		line-height: 1.1;
		font-weight: 700;
		margin-bottom: 40px;
		color: #fff;
	}

	/* Left Side Content */
	.site-elementor-about-content-left {
		flex: 1;
		padding-right: 80px;
		position: sticky;
		top: 100px;
	}

	.site-elementor-about-label {
		display: flex;
		align-items: center;
		gap: 10px;
		color: var(--site-text-gray);
		font-size: 14px;
		margin-bottom: 30px;
	}

	.site-elementor-about-dot {
		width: 8px;
		height: 8px;
		background-color: #C5E040;
		border-radius: 50%;
	}


	.site-elementor-about-description {
		color: var(--site-text-gray);
		line-height: 1.6;
		margin-bottom: 25px;
		font-size: 18px;
	}

	.site-elementor-about-description b {
		color: white;
	}

	/* Footer / Logo Section */
	.site-elementor-about-footer-brand {
		margin-top: 60px;
		display: flex;
		align-items: center;
		gap: 20px;
	}

	.site-elementor-about-logo-group {
		display: flex;
		align-items: center;
	}

	.site-elementor-about-logo-circle {
		width: 80px;
		height: 80px;
		background-color: var(--site-primary);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: black;
		font-weight: 900;
		font-size: 24px;
		z-index: 2;
	}

	.site-elementor-about-brand-info-name {
		font-size: 1.2rem;
		margin-bottom: 4px;
		color: #fff;
	}
	
	.site-elementor-about-brand-info {
	
	}

	.site-elementor-about-brand-info p {
		font-size: 12px;
		color: var(--site-text-gray);
		margin-bottom: 8px;
	}

	.site-elementor-about-social-icons {
		display: flex;
		gap: 12px;
		font-size: 18px;
	}

	.site-elementor-about-btn-touch {
		background-color: var(--site-primary);
		color: black;
		padding: 12px 24px;
		border-radius: 50px;
		text-decoration: none;
		font-weight: 600;
		display: flex;
		align-items: center;
		gap: 10px;
		transition: transform 0.3s;
	}

	.site-elementor-about-btn-touch:hover {
		transform: scale(1.05);
	}

	/* Right Side Cards Stacking Logic */
	.site-elementor-about-cards-stack {
		flex: 0.8;
		display: flex;
		flex-direction: column;
		gap: 40px;
		padding-bottom: 400px;
		
		.site-heading {
			font-size: 2rem;
			margin-bottom: 20px;
			color: #fff;
		}
	}

	.site-elementor-about-card {
		background: linear-gradient(180deg, rgb(45, 45, 45) 0%, rgb(0, 0, 0) 100%);
		position: sticky;
		top: 100px; /* Where they stop when scrolling */
		width: 100%;
		border-radius: 30px;
		padding: 64px 32px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		
		/* Animation Timeline for Stacking Effect */
		view-timeline-name: --card;
		view-timeline-axis: block;
		animation-timeline: --card;
		animation-name: site-about-stack;
		animation-range: entry 100% exit 0%;
		animation-fill-mode: both;
	}

	.site-elementor-about-author-social {
		a {
			text-decoration: none;
			color: #fff;
		}
	}

	.site-elementor-about-card-icon {
		font-size: 40px;
		margin-bottom: 25px;
		color: #C5E040;
	}

	.site-elementor-about-card h2 {
		font-size: 2rem;
		margin-bottom: 20px;
	}

	.site-elementor-about-card p {
		line-height: 1.6;
		font-size: 1.1rem;
		max-width: 90%;
		color: var(--site-text-gray);
	}

	.site-elementor-about-divider {
		width: 1px;
		height: 60px;
		background: #b5b5b5;
		opacity: 0.5;
		margin-inline: 20px;
	}
	
	.site-elementor-about-shapes {
		display: flex;
		align-items: center;
	}
	
	.site-elementor-about-img-shape-3 { width: 80px; height: 80px; background: rgb(83, 94, 100); border-radius: 50%; clip-path: polygon(0px 0px, 40% 0px, 40% 100%, 0% 100%); flex: 0 0 auto; margin-right: -49px; transform: translateX(31px); transition: all 0.6s var(--nm-cube-1); opacity: 0; }
	.site-elementor-about-img-shape-2 { width: 70px; height: 70px; background: rgb(83, 94, 100); border-radius: 50%; clip-path: polygon(0px 0px, 30% 0px, 30% 100%, 0% 100%); flex: 0 0 auto; margin-right: -50px; transform: translateX(52px); transition: all 0.6s var(--nm-cube-1); opacity: 0; }
	.site-elementor-about-img-shape-1 {width: 62px;height: 62px;background: rgb(83, 94, 100);border-radius: 50%;clip-path: polygon(0px 0px, 24% 0px, 24% 100%, 0% 100%);flex: 0 0 auto;margin-right: -48px;transform: translateX(66px);transition: all 0.6s var(--nm-cube-1);opacity: 0;}
	
	.site-elementor-about-img-shape-1, 
	.site-elementor-about-img-shape-2, 
	.site-elementor-about-img-shape-3 {transform: translateX(0px);opacity: 1;}
	
	.site-elementor-about-img-shape-1 { transition-delay: 0.6s; }
	.site-elementor-about-img-shape-2 { transition-delay: 0.5s; }
	.site-elementor-about-img-shape-2 { transition-delay: 0.4s; }	
		   
	
	.site-elementor-about-sky {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
		z-index: -1;
	}

	/* 2. Star styling */
	.site-elementor-about-star {
		position: absolute;
		background-color: #d4e157; /* Yellow-green color */
		border-radius: 50%;
		opacity: 0;
		
		/* Add a soft glow around the star */
		box-shadow: 0 0 6px 1px rgba(212, 225, 87, 0.6);
		
		/* Apply the animation */
		animation: site-about-twinkle 2s infinite ease-in-out;
		
		/* Use variables to position stars and set timing */
		top: var(--top);
		left: var(--left);
		width: var(--size);
		height: var(--size);
		animation-delay: var(--delay);
	}

	/* 4. Decorative: a slight "dust" effect for smaller stars */
	.site-elementor-about-star.small {
		box-shadow: 0 0 2px rgba(212, 225, 87, 0.4);
	}	
}



/* 3. The Fading Animation */
@keyframes site-about-twinkle {
	0%, 100% {
		opacity: 0;
		transform: scale(0.3);
	}
	50% {
		opacity: 0.8;
		transform: scale(1);
	}
}

/* The Animation that shrinks/dims the previous card as the next one comes up */
@keyframes site-about-stack {
	to {
		transform: scale(0.9);
		filter: brightness(0.5);
	}
}