/* _________________landing section______________________ */

/* Animation keyframes */
@keyframes fadeInSlideLeft {
	0% {
		opacity: 0;
		transform: translateX(-50px);
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes fadeInSlideRight {
	0% {
		opacity: 0;
		transform: translateX(50px);
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

/* Apply animations */
.landing-section {
	opacity: 0; /* Start with the section hidden */
}

.landing-left {
	animation: fadeInSlideLeft 1s ease-in-out forwards;
}

.landing-right {
	animation: fadeInSlideRight 1s ease-in-out forwards;
}

/* Apply the animation when class is added */
.landing-section.animate {
	animation: fadeIn 1.5s ease-in-out forwards;
}

/* Optionally add hover effect to buttons */
.landing-buttons button:hover {
	transform: scale(1.1);
	transition: transform 0.3s ease-in-out;
}

/* Add continuous animation to the right image */
@keyframes moveHorizontally {
	0% {
		transform: translateX(0);
	}
	50% {
		transform: translateX(10px); /* Adjust for the desired movement */
	}
	100% {
		transform: translateX(0);
	}
}

@keyframes moveVertically {
	0% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(10px); /* Adjust for the desired movement */
	}
	100% {
		transform: translateY(0);
	}
}

/* Apply the animation to the landing-right image */
.landing-right img {
	/* width: 70%; */
	animation: moveHorizontally 2s ease-in-out infinite,
		moveVertically 3s ease-in-out infinite; /* Faster vertical animation */
}

/* ____________________service section_______________ */

/* ___show service section when user scroll___ */
/* Hidden state */
.hidden {
	opacity: 0;
	transform: translateY(50px);
	transition: all 0.5s ease-out;
}

/* Visible state */
.visible {
	opacity: 1;
	transform: translateY(0);
}

/* Animation keyframes for smooth fade and slide-up */
@keyframes fadeInUp {
	0% {
		opacity: 0;
		transform: translateY(50px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Apply animation */
.service-section.visible {
	animation: fadeInUp 0.8s ease-out;
}

/* ___flip cards___ */
/* Initial hidden state for service cards */
.service-card {
	opacity: 0;
	transform: rotateY(90deg);
	transition: opacity 0.5s ease, transform 0.8s ease;
}

/* Visible state for service cards */
.service-card.visible {
	opacity: 1;
	transform: rotateY(0);
}

/* _________________________________company section _______________________ */

/* only show when user scroll and comes from left and right*/
/* Initial hidden states */
.hidden-left {
	opacity: 0;
	transform: translateX(-50px); /* Start from the left */
	transition: all 1s ease-out; /* Smooth animation */
}

.hidden-right {
	opacity: 0;
	transform: translateX(50px); /* Start from the right */
	transition: all 1s ease-out; /* Smooth animation */
}

/* Visible state */
.visible {
	opacity: 1;
	transform: translateX(0); /* Slide into position */
}

/* Add continuous animation to the company-section-left image */
.company-section-left img {
	animation: moveHorizontally 2s ease-in-out infinite,
		moveVertically 3s ease-in-out infinite; /* Add the animation here */
}

/* __________________process-section__________________ */
/* Initially hide the process section and process cards */
.process-section .process-section-cards {
	opacity: 0;
	transform: translateY(50px); /* Position below the viewport */
	transition: all 2s ease-out; /* Smooth transition when it comes into view */
}

/* When the section becomes visible */
.process-section .process-section-cards.visible {
	opacity: 1;
	transform: translateY(0); /* Slide into place */
}

/* Add continuous animation to images 11.png, 12.png, and 13.png */
.process-section .procss-section-card-img-1 {
	animation: moveHorizontally 2s ease-in-out infinite,
		/* Slower horizontal movement */ moveVertically 3s ease-in-out infinite; /* Slower vertical movement */
}

/* Add continuous animation to images 11.png, 12.png, and 13.png */
.horizontal-animation {
	animation: moveVertically 3s ease-in-out infinite,
		moveHorizontally 2s ease-in-out infinite;
}

/* _____________________________________benefit-section___________________________ */

.benefit-img-front {
	animation: moveHorizontally 1s ease-in-out infinite,
		moveVertically 2s ease-in-out infinite;
}

/* Initial hidden states for benefit section */
.hidden-left {
	opacity: 0;
	transform: translateX(-50px); /* Start from the left */
	transition: all 1s ease-out; /* Smooth animation */
}

.hidden-right {
	opacity: 0;
	transform: translateX(50px); /* Start from the right */
	transition: all 1s ease-out; /* Smooth animation */
}

/* Visible state */
.visible {
	opacity: 1;
	transform: translateX(0); /* Slide into position */
}

/* _____________________________________marketing-section___________________________ */

/* Hidden states */
.hidden-left {
	opacity: 0;
	transform: translateX(-50px); /* Start from the left */
	transition: all 1s ease-out;
}

.hidden-right {
	opacity: 0;
	transform: translateX(50px); /* Start from the right */
	transition: all 1s ease-out;
}

/* Visible state */
.visible {
	opacity: 1;
	transform: translateX(0); /* Slide into position */
}