/* Custom styles */
body {
    font-family: 'Inter', sans-serif;
    color: #e2e8f0;
    background-color: #0a0a0a; /* Fallback background in case animation fails */
}

/* Style for header when you scroll down */
header.scrolled {
    background-color: rgba(17, 24, 39, 0.7); /* Glassy dark blue */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Animation for sections to reveal on scroll */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Glowing animation for buttons */
.glowing-btn {
    transition: background-color 0.3s, box-shadow 0.4s;
}

.glowing-btn:hover {
    box-shadow: 0 0 20px 7px rgba(34, 211, 238, 0.4); /* Cyan glow effect */
}

/* Animation for individual elements within a section (sequential fade-in) */
.reveal-child {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.reveal-child.visible {
    opacity: 1;
    transform: translateY(0);
}