/*!
Theme Name: ea3global
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: ea3global
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

ea3global is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

@utility mask-edge {
	background:
	  linear-gradient(
		to right,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 1) 10%,
		rgba(255, 255, 255, 1) 90%,
		rgba(255, 255, 255, 0) 100%
	  ),
	  linear-gradient(
		to bottom,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 1) 10%,
		rgba(255, 255, 255, 1) 90%,
		rgba(255, 255, 255, 0) 100%
	  );
	mask-image: radial-gradient(circle, transparent 60%, black);
	mask-composite: intersect;
}
  
.loading {
	/* position: fixed;
	top: 50%;
	left: 50%; */
	/* transform: translate(-50%, -50%); */
	z-index: 1000;
}
	
#loading-gif {
	animation: fadeInOut 2s infinite;
}
  
#page {
	position: relative;
	overflow: hidden;
}
  
#page::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: url();
	background-repeat: repeat;
	background-size: cover;
	background-position: center;
	opacity: 0.1;
	transition: opacity 0.3s;
	z-index: -1;
}

#page .hover-effect {
	position: absolute;
	width: 150px;
	height: 150px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.5);
	pointer-events: none;
	mix-blend-mode: overlay;
	opacity: 0;
	transition: opacity 0.2s;
}
  
/* Container initial styling */
#logo {
	transform: scale(2.5); /* Start large */
	opacity: 0;
	animation: logo-scale-down 2s ease-out forwards;
}

/* Individual element animation */
.logo-part {
	fill: lightgray;
	opacity: 0;
	transform: scale(1.5); /* Start larger and condense to 1 */
	animation: logo-element-fade 1.5s ease-out forwards;
	animation-delay: 1s;
}

/* Keyframe for the main logo scaling */
@keyframes logo-scale-down {
	0% {
	opacity: 0;
	transform: scale(2.5);
	}
	30% {
	opacity: 1;
	}
	100% {
	transform: scale(1);
	}
}

/* Keyframe for individual parts fading in with color shift */
@keyframes logo-element-fade {
	0% {
	fill: lightgray;
	opacity: 0;
	transform: scale(1.5);
	}
	100% {
	fill: black;
	opacity: 1;
	transform: scale(1);
	}
}

/* Services Carousel */
.swiper-wrapper {
	width: 100%;
	height: max-content !important;
	padding-bottom: 64px !important;
	-webkit-transition-timing-function: linear !important;
	transition-timing-function: linear !important;
	position: relative;
	}
.swiper-pagination-bullet {
	background: #4f46e5;
	}

/* Custom horizontal scrollbar */
.scrollbar-horizontal::-webkit-scrollbar {
	height: 12px;
  }
  
  .scrollbar-horizontal::-webkit-scrollbar-thumb {
	background-color: #004aa6;
	border-radius: 9999px;
  }
  
  .scrollbar-horizontal::-webkit-scrollbar-track {
	background-color: #e5e7eb; /* Tailwind gray-200 */
	border-radius: 9999px;
  }
  

/* CSS for flipping the card */
.groupMobile.flipped {
    transform: rotateY(180deg);
}