@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

*::selection {
	background-color: #ed1c24;
	color: #f8fafc;
}

body {
	font-family: "Poppins", sans-serif;
}

/* Background Images */
.background-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -10;
}

.background-slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	opacity: 0;
	transition: opacity 1s ease-in-out;
}

.background-slide.active {
	opacity: 1;
}

.overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.4);
	z-index: -2;
}

.Link {
	text-decoration: none;
	display: inline-block;
	@apply p-0 md:p-4;
	/* padding: 15px; */
	position: relative;
}

.Link:hover::after {
	width: 100%;
	left: 0;
}

.Link::after {
	background: none repeat scroll 0 0 transparent;
	bottom: 0;
	content: "";
	display: block;
	height: 4px;
	left: 0;
	position: absolute;
	@apply bg-fuchsia-400/75;
	transition: width 0.5s ease 0s, right 0.5s ease 0s;
	width: 0;
}

.underlineTxt {
	position: relative;
}

.underlineTxt::after {
	content: "";
	position: absolute;
	bottom: 12px;
	left: 0;
	z-index: -10;
	display: inline-block;
	height: 1rem;
	width: 100%;
	background-color: #ed1c24;
}

@media (max-width: 768px) {
	.underlineTxt::after {
		bottom: 6px;
		height: 0.5rem;
	}
}

/* Flip card container */
.flip-card-container {
	position: relative;
	cursor: pointer;
	outline: none;
}

/* Shadow */
.flip-card-container .bg-shadow {
	position: absolute;
	inset: 0.5rem;
	z-index: -1;
	background-color: #ddd;
	opacity: 0.5;
}

.flip-card-inner {
	position: relative;
	width: 100%;
	height: 100%;
	transition: transform 0.6s;
	transform-style: preserve-3d;
}

.flip-card.is-flipped .flip-card-inner {
	transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
	position: absolute;
	width: 100%;
	height: 100%;
	backface-visibility: hidden;
	border-radius: 10px;
	padding: 2rem;
}

.flip-card-back {
	transform: rotateY(180deg);
}

.card-content {
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* Marquee Animation */
@keyframes scroll-marquee {
	0% {
		transform: translateX(0%);
	}
	100% {
		transform: translateX(-50%);
	}
}

.animate-scroll {
	animation: scroll-marquee 30s ease infinite;
	will-change: transform;
}

/* Initial states for animations */
.animate-on-scroll-left {
	opacity: 0;
	transform: translateX(-50px);
	transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-on-scroll-right {
	opacity: 0;
	transform: translateX(50px);
	transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-on-scroll-bottom {
	opacity: 0;
	transform: translateY(50px);
	transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-on-scroll-fade-in {
	opacity: 0;
	transition: opacity 0.8s ease-out;
}

/* Final states for animations (when in view) */
.animate-on-scroll-left.is-in-view,
.animate-on-scroll-right.is-in-view,
.animate-on-scroll-bottom.is-in-view,
.animate-on-scroll-fade-in.is-in-view {
	opacity: 1;
	transform: translate(0, 0);
}