@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
    .nav-link {
        @apply text-gray-700 font-medium relative after:content-[''] after:absolute after:left-0 after:bottom-[-4px] after:w-0 after:h-[2px] after:bg-blue-600 after:transition-all after:duration-300 hover:after:w-full;
    }
    .nav-link.active::after {
        @apply w-full;
    }
    .footer-link {
         @apply text-gray-400 hover:text-white transition;
    }
    .details-link {
        @apply mt-auto pt-4 text-blue-600 font-semibold hover:underline;
    }
    .details-link-expanded {
        @apply block w-full text-center bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg transition duration-300;
    }
    .download-link-alt {
        @apply block w-full mt-4 bg-gray-200 text-gray-800 text-center font-semibold py-2 px-4 rounded-lg transition duration-300 hover:bg-gray-300;
    }
    .icon-wrapper {
        @apply bg-blue-100 text-blue-600 rounded-full w-24 h-24 flex items-center justify-center mx-auto;
    }
    .accordion-header {
        @apply w-full flex justify-between items-center text-left p-4 bg-gray-100 hover:bg-gray-200 rounded-lg font-semibold transition;
    }
    .accordion-content {
        @apply max-h-0 overflow-hidden transition-all duration-500 ease-in-out px-4;
    }
    .accordion-content.open {
        @apply max-h-screen py-4;
    }
}

body {
    font-family: 'Roboto', sans-serif;
}
.font-montserrat {
    font-family: 'Montserrat', sans-serif;
}

/* GSAP Animation Initial States */
.course-card, .about-card, .course-grid-item {
    opacity: 0;
    transform: translateY(50px);
}

/* Hero Slider Styles */
.hero-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    position: relative;
}
.hero-slide::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 40%;
    background: linear-gradient(to top, rgba(0,0,0,0.5), transparent);
}
.slide-content {
    position: relative;
    z-index: 10;
    text-align: center;
    color: white;
    padding: 1.5rem;
}
.hero-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 1rem;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
}
.hero-subtitle {
    font-size: 1.25rem;
    margin-bottom: 2rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 1px 1px 6px rgba(0, 0, 0, 0.7);
}
.hero-button {
    background-color: #2563EB;
    color: white;
    font-weight: bold;
    padding: 0.75rem 2rem;
    border-radius: 9999px;
    font-size: 1.125rem;
    transition: all 0.3s ease;
    display: inline-block;
}
.hero-button:hover {
    background-color: #1D4ED8;
    transform: scale(1.05);
}

/* --- THIS IS THE SECTION YOU HAVE UPDATED --- */
/* These paths now point to your 'images' folder. */
/* Make sure your image filenames match exactly! */

.slide-bg-1 {
    background-image: url('images/hero-1.png');
}
.slide-bg-2 {
    background-image: url('images/hero-2.png');
}
.slide-bg-3 {
    background-image: url('images/hero-3.png');
}
.slide-bg-4 {
    background-image: url('images/hero-4.jpg');
}
.slide-bg-5 {
    background-image: url('images/hero-5.jpg');
}

/* Swiper Navigation/Pagination Styles */
.hero-slider .swiper-button-next,
.hero-slider .swiper-button-prev {
    color: #ffffff;
    filter: drop-shadow(0 0 5px rgba(0,0,0,0.5));
}
.hero-slider .swiper-pagination-bullet {
    background-color: rgba(255, 255, 255, 0.7);
    width: 10px;
    height: 10px;
    opacity: 1;
}
.hero-slider .swiper-pagination-bullet-active {
    background-color: #ffffff;
}

/* Responsive font sizes for hero slider */
@media (min-width: 768px) {
    .hero-title {
        font-size: 4.5rem;
    }
    .hero-subtitle {
        font-size: 1.5rem;
    }
}