/* Custom styles and animations */

/* Background gradient for the hero section */

/* Modal styling */
.modal-container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
}
.modal-content {
	background-color: white;
	padding: 2rem;
	border-radius: 1rem;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
	max-width: 90%;
	width: 450px;
	position: relative;
	transform: scale(0.9);
	transition: transform 0.5s ease-in-out;
}
.modal-container.opacity-100 .modal-content {
	transform: scale(1);
}

/* Hover effects for course cards */
.card-course img {
	transition: transform 0.5s ease;
}

.card-course:hover img {
	transform: scale(1.1);
}

/* Keyframe animations */
@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes slideIn {
	from {
		transform: translateY(20px);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes bounceIn {
	0%,
	20%,
	40%,
	60%,
	80%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-5px);
	}
}

.animate-fade-in {
	animation: fadeIn 1s ease-out forwards;
}

.animate-slide-in {
	animation: slideIn 1s ease-out forwards;
}

.animate-bounce-in {
	animation: bounceIn 1s ease-in-out;
}

/* Color Palette */
.bg-beige {
	background-color: #f9f5ed; /* Light beige */
}
.bg-pink-100 {
	background-color: #fce7f3; /* Very light pink */
}
.bg-pink-600 {
	background-color: #d4db9e; /* Deep pink */
}
.bg-pink-700 {
	background-color: #4718be; /* Even deeper pink for hover */
}
.bg-pink-900 {
	background-color: #381883; /* Darker pink for text and footer */
}
.text-pink-900 {
	color: #182c83;
}
.text-pink-800 {
	color: #582ca4;
}
.text-pink-600 {
	color: #6c27db;
}
.border-pink-200 {
	border-color: #cfe4fb;
}
.border-pink-700 {
	border-color: #1839be;
}

/* Background gradient for the hero section */
.bg-gradient-pink {
	background: linear-gradient(135deg, #fce7f3 0%, #70faba 100%);
}

/* Hover effects for course cards */
.card-course img {
	transition: transform 0.5s ease;
}

.card-course:hover img {
	transform: scale(1.1);
}

/* Keyframe animations */
@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes slideIn {
	from {
		transform: translateY(20px);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes bounceIn {
	0%,
	20%,
	40%,
	60%,
	80%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-5px);
	}
}

.animate-fade-in {
	animation: fadeIn 1s ease-out forwards;
}

.animate-slide-in {
	animation: slideIn 1s ease-out forwards;
}

.animate-bounce-in {
	animation: bounceIn 1s ease-in-out;
}