/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jul 07 2026 | 06:45:39 */
/* ========================================= ABOUT US - DOTS ========================================= */
.about-dots-section {
	background-color: var(--white-dyn-1);
	transition: all 0.4s;
	
	.about-dots-text-wrapper {
		max-width: 900px;
		margin-bottom: 1.5rem;
		
		h2 {
			color: var(--green-dark-1-dyn-1);
			transition: all 0.4s;
		}
		
		p {
			color: var(--gray-dark-1-dyn-1);
			font-size: 1.5rem;
			line-height: 1.35;
			transition: all 0.4s;
		}
	}
	
	.about-dots-wrapper {
		width: 100%;
		aspect-ratio: 128/43;
		position: relative;
		margin-top: 130px;
		margin-bottom: 130px;
		filter: var(--curve-shadow);
		
		.about-dots-bg {
			width: 100%;
			height: 100%;
			mask-image: url('/wp-content/uploads/2026/05/ae_404_line.svg');
			mask-size: cover; 
			mask-repeat: no-repeat;
			mask-position: center;

			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
				display: block;
				pointer-events: none;
                user-select: none;
			}

			&::after {
				content: '';
				position: absolute;
				background-color: #0B423FCC;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				pointer-events: none;
			}
		}
		
		.about-dot-slot {
			position: absolute;
			display: flex;
			flex-direction: column;
			align-items: center;
			text-align: center;
			transform: translate(-50%, -50%);
			
			span {
				display: block;
				line-height: 1.1;
			}
			
			.about-dot-wrapper {
				position: absolute;
				top: 0;
				left: 0;
				pointer-events: none;
				transform: translate(-50%, -50%);
				
				.about-dot-text-wrapper {
					position: absolute;
					max-width: 160px;
					opacity: 0;
					visibility: hidden;
					transition:
						opacity 1s ease,
						visibility 0s linear 1s;
					
					@media screen and (min-width: 400px) {
						max-width: 220px;
					}

					@media screen and (min-width: 768px) {
						max-width: 280px;
					}

					.about-dot-num {
						font-size: 2rem;
						color: var(--green-light-1);
						font-weight: 700;
						white-space: nowrap;
						
						@media screen and (min-width: 991px) {
							font-size: 3rem;
						}
						
						@media screen and (min-width: 1200px) {
							font-size: 4rem;
						}
					}

					.about-dot-text {
						font-size: 1.1rem;
						color: var(--green-dark-1-dyn-1);
						font-weight: 700;
						text-transform: uppercase;
						white-space: normal;
						transition: all 0.4s;
						
						@media screen and (min-width: 991px) {
							font-size: 1.25rem;
						}
						
						@media screen and (min-width: 1200px) {
							font-size: 1.5rem;
						}
					}
				}
				
				&.is-active {
					.about-dot-text-wrapper {
						opacity: 1;
						visibility: visible;
						pointer-events: auto;
						transition:
							opacity 0.5s linear,
							visibility 0s linear 0s;
					}

					.about-dot {
						opacity: 1;
						transition: opacity 0.5s linear;
					}
				}
			}
			
			.about-dot {
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 40px;
				height: 40px;
				box-sizing: border-box;
				opacity: 0;
				transition: opacity 1s ease;

				&::before {
					content: '';
					position: absolute;
					inset: 0;
					border: 1px solid var(--green-light-1);
					border-radius: 50%;
					opacity: var(--about-dot-ring-opacity);
					transform: scale(var(--about-dot-ring-scale));
					transform-origin: center;
					will-change: transform, opacity;
					animation: about-dot-border-pulse 3.5s cubic-bezier(0.45, 0, 0.25, 1) infinite;
				}

				&::after {
					content: '';
					position: relative;
					z-index: 1;
					display: block;
					width: 20px;
					height: 20px;
					background-color: var(--green-light-1);
					border-radius: 50%;
				}
				
				@media (prefers-reduced-motion: reduce) {
					&::before {
						animation: none;
					}
				}
			}
			
			&.dot-1 {
				top: 10%;
				left: 35%;
				
				.about-dot-text-wrapper {
					bottom: 40px;
					left: 30px;
					text-align: left;
				}
				
				@media screen and (min-width: 576px) {
					top: 5%;
					left: 12%;
					
					.about-dot-text-wrapper {
						bottom: 60px;
						left: 20px;
					}
				}
			}
			
			&.dot-2 {
				top: 91.1%;
				left: 65%;
				
				.about-dot-text-wrapper {
					top: 35px;
					right: 30px;
					text-align: right;
				}
				
				@media screen and (min-width: 576px) {
					top: 77.2%;
					left: 55%;
				}
				
				@media screen and (min-width: 991px) {
					top: 40%;
					left: 35%;
				}
			}
			
			&.dot-3 {
				top: 27.4%;
				left: 44.7%;
				
				.about-dot-text-wrapper {
					bottom: 40px;
					left: 35px;
					text-align: left;
				}
				
				@media screen and (min-width: 991px) {
					top: 57.5%;
					left: 62%;
				}
			}
			
			&.dot-4 {
				top: 96.7%;
				left: 90.1%;
				
				.about-dot-text-wrapper {
					top: 40px;
					right: 20px;
					text-align: right;
				}
			}

			&.dot-5 {
				top: 22.2%;
				left: 42%;

				.about-dot-text-wrapper {
					bottom: 50px;
					left: 25px;
					text-align: left;
				}
			}

			&.dot-6 {
				top: 77.1%;
				left: 55%;

				.about-dot-text-wrapper {
					top: 35px;
					right: 25px;
					text-align: right;
				}
			}
		}
	}
}