/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Baloo+Bhai+2:wght@400..800&family=Exo:ital,wght@0,100..900;1,100..900&family=Orbitron:wght@400..900&family=Inter:wght@300;400;500;600;700&family=Cambria&family=Impact&family=Trebuchet+MS&display=swap');

/* Tailwind CSS CDN */
@import url('https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css');

/* Custom Font Definitions */
.font-baloo-bhai { font-family: 'Baloo Bhai 2', sans-serif; }
.font-exo { font-family: 'Exo', sans-serif; }
.font-orbitron { font-family: 'Orbitron', sans-serif; }
.font-inter { font-family: 'Inter', sans-serif; }
.font-cambria { font-family: 'Cambria', serif; } /* Custom font, ensure it's available or fallback */
.font-impact { font-family: 'Impact', sans-serif; } /* Custom font, ensure it's available or fallback */
.font-trebuchet { font-family: 'Trebuchet MS', sans-serif; } /* Custom font, ensure it's available or fallback */


/* Base Styles */
body {
    margin: 0;
    padding: 0;
    font-family: 'Inter', sans-serif; /* Default font */
    line-height: 1.6;
    color: #333;
    background-color: #f8f8f8;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Dark Mode Styles */
body.dark-mode {
    background-color: #1a1a1a;
    color: #e0e0e0;
}

/* Dark mode for specific elements */
body.dark-mode .bg-gray-50 {
    background-color: #2a2a2a;
}

body.dark-mode .bg-white {
    background-color: #1a1a1a;
}

body.dark-mode .text-gray-800 {
    color: #e0e0e0;
}

body.dark-mode .text-gray-600 {
    color: #b0b0b0;
}

body.dark-mode .text-orange-700 {
    color: #e4b784; /* Adjusted for dark mode visibility */
}

body.dark-mode .bg-orange-200 {
    background-color: #3a3a3a;
}

body.dark-mode .bg-white.rounded-lg.shadow-md {
    background-color: #2a2a2a;
}

body.dark-mode .text-gray-900 {
    color: #e0e0e0;
}

body.dark-mode .text-gray-700 {
    color: #b0b0b0;
}

body.dark-mode .border-gray-900 {
    border-color: #555;
}

/* Added styles for the Revered Personalities section text */
body.dark-mode .text-black, 
body.dark-mode .py-16 .text-black,
body.dark-mode .py-16 .text-xl {
    color: #e0e0e0; /* Make text visible in dark mode */
}

/* Specific styles for the campus slider (if not fully handled by Tailwind) */
#campus-slider {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

#campus-slider img {
    width: 100%;
    flex-shrink: 0;
    object-fit: contain; /* or contain, depending on preference */
}

/* Slider dots */
#slider-dots .dot {
    width: 12px;
    height: 12px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

#slider-dots .dot.active {
    background-color: #e4b784; /* Active dot color */
    transform: scale(1.2);
}

/* Mobile menu specific styles */
#mobile-menu.hidden {
    display: none;
}

#mobile-menu.show {
    display: block;
}

/* Upcoming Events Grid Centering */
#events-container {
    display: grid;
    /* Changed to use a fixed width for columns, allowing justify-content to center the group */
    grid-template-columns: repeat(auto-fit, 280px); 
    gap: 2rem; /* Tailwind gap-8 */
    justify-content: center; /* Center items horizontally when they don't fill the row */
    padding: 0 1rem; /* Add some padding to the container */
    margin: 0 auto; /* Center the container itself */
    max-width: 1200px; /* Limit max width for better readability */
}

/* animation when pop up shows */
@keyframes fadeInScale {
    0% {
        opacity: 0;
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.animate-fadeInScale {
    animation: fadeInScale 0.5s ease-out forwards;
}

/* animation when pop up closes */
@keyframes fadeOutScale {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0.9);
    }
}

.animate-fadeOutScale {
    animation: fadeOutScale 0.3s ease forwards;
}


/* Adjustments for smaller screens */
@media (max-width: 768px) {
    .hero-section h1 {
        font-size: 3rem;
    }
    .hero-section p {
        font-size: 1.25rem;
    }
    .about-content {
        flex-direction: column;
        text-align: center;
    }
    .about-content img {
        margin-bottom: 2rem;
    }
    .contact-info {
        grid-template-columns: 1fr;
    }
    #events-container {
        grid-template-columns: 1fr; /* Single column on small screens */
    }
}

@media (max-width: 480px) {
    .hero-section h1 {
        font-size: 2.5rem;
    }
    .hero-section p {
        font-size: 1rem;
    }
    .text-4xl { font-size: 2.25rem; }
    .text-5xl { font-size: 2.5rem; }
}