/* style.css */

/* Define a custom color palette */
:root {
    --color-primary: #1a4e8c; /* Richer Deep Blue */
    --color-secondary: #f47f20; /* Vibrant Orange */
    --color-tertiary: #6c5ce7; /* Soft Purple */
    --color-quaternary: #00b894; /* Vivid Green */
    --color-light-bg: #f8f9fa; /* Light Gray Background */
}

/* Global styles for smooth scrolling and clean base */
html {
    scroll-behavior: smooth;
}
body {
    font-family: 'Inter', sans-serif;
    background-color: var(--color-light-bg);
}

/* Style for the back-to-top button */
#back-to-top {
    transition: opacity 0.3s, transform 0.3s;
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
}
#back-to-top.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Custom card hover effect for courses and instructors */
.hover-card {
    transition: transform 0.3s, box-shadow 0.3s;
}
.hover-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.15);
}

/* Specific style for feature card hover (more pronounced shadow) */
.feature-card:hover {
    box-shadow: 0 10px 20px rgba(244, 127, 32, 0.3); /* Orange glow effect */
    transform: translateY(-5px);
}

/* Slideshow specific transitions for a cleaner effect */
.slide-container {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    position: absolute; /* Needed for stacking */
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 5rem; /* Ensure content is below navbar */
}
.slide-container.active {
    opacity: 1;
    transform: translateY(0);
}

    @keyframes gradient-animation {
        0% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
    }