/* style.css */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Poppins:wght@300;400;500;600;700&family=Playfair+Display:wght@700&display=swap');
/* Font Awesome already imported in HTML via CDN */

/*------------------------------------*\
    #ROOT VARIABLES & BASE STYLES
\*------------------------------------*/
:root {
    /* Light Mode Colors */
    --primary-color: #FF9566;
    --secondary-color: #E07A5F;
    --accent-color: #FFBC80;
    --bg-color: #FFF8F0;
    --bg-secondary: #FFFFFF;
    --text-color: #212529;
    --text-muted: #5a5a5a;
    --border-color: #E0E0E0;
    --site-footer-bg: #9B4C37;
    --copyright-color: #E0E0E0;
    --heading-font: 'Poppins', sans-serif;
    --body-font: 'Roboto', sans-serif;
    --playfair-font: 'Playfair Display', serif;
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 5px 15px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.15);
    --transition-speed: 0.3s;
    --border-radius-sm: 5px;
    --border-radius-md: 10px;
    --border-radius-lg: 15px;

    /* Department Card Colors (Light Mode) - Coral Theme */
    --dept-color-1: #fff0eb;
    --dept-color-2: #ffe0d5;
    --dept-color-3: #ffd0c0;
    --dept-color-4: #ffb8a5;
    --dept-color-5: #ff9f85;
    --dept-color-6: #ff8a70;
    --dept-color-7: #FF7F5F;

    /* RGB versions for rgba() */
    --bg-color-rgb: 255, 248, 240;
    --primary-rgb: 255, 149, 102; /* #FF9566 */
    --hero-animation-grd-clr: rgba(255, 149, 102, 0.3);
}

body.dark-mode {
    /* Dark Mode Colors */
    --primary-color: #FFA580;
    --secondary-color: #F4A460;
    --accent-color: #FF7F50;
    --bg-color: #1a1a1a;
    --bg-secondary: #2c2c2c;
    --text-color: #f1f1f1;
    --text-muted: #b0b0b0;
    --border-color: #444444;
    --site-footer-bg: #2a1a0a;
    --copyright-color: #cccccc;

    /* Department Card Colors (Dark Mode) */
     --dept-color-1: #4d3823;
     --dept-color-2: #5a412a;
     --dept-color-3: #674a31;
     --dept-color-4: #745338;
     --dept-color-5: #815c3f;
     --dept-color-6: #8e6546;
     --dept-color-7: #9b6e4d;

     /* RGB versions for rgba() */
     --bg-color-rgb: 26, 26, 26;
     --primary-rgb: 255, 165, 128; /* #FFA580 */
     --hero-animation-grd-clr: rgba(44, 44, 44, 0.5);
}

* { padding: 0; margin: 0; box-sizing: border-box; }
html { font-size: 100%; scroll-behavior: smooth; overflow-x: hidden; }
body {
    font-family: var(--body-font); background-color: var(--bg-color); color: var(--text-color);
    line-height: 1.7; display: flex; flex-direction: column; min-height: 100vh;
    transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
    font-synthesis: none; text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}
main { flex-grow: 1; }
h1, h2, h3, h4, h5, h6 { font-family: var(--heading-font); font-weight: 700; color: var(--primary-color); margin-bottom: 0.8em; line-height: 1.3; }

/* Specific Heading Colors */
.vision-section h2,
.structure-section h2,
.recent-events-section h2,
.about-us-header h1,
main h1.page-main-title /* For Calendar page and similar */
 {
    color: var(--secondary-color);
}
body.dark-mode .vision-section h2,
body.dark-mode .structure-section h2,
body.dark-mode .recent-events-section h2,
body.dark-mode .about-us-header h1,
body.dark-mode main h1.page-main-title {
    color: var(--primary-color);
}

h1 { font-size: clamp(1.8rem, 4.5vw, 3rem); }
h2 { font-size: clamp(1.6rem, 3.8vw, 2.5rem); }
h3 { font-size: clamp(1.4rem, 3.3vw, 2rem); }
h4 { font-size: clamp(1.1rem, 2.8vw, 1.6rem); }
p { margin-bottom: 1rem; font-size: clamp(0.95rem, 1.5vw, 1.05rem); color: var(--text-muted); }
.text-center-p p { margin-left: auto; margin-right: auto; text-align: center; }
.text-justify-p p { text-align: justify; }
.lead { font-size: 1.15rem; font-weight: 300; }
a { color: var(--primary-color); text-decoration: none; transition: color var(--transition-speed) ease; }
a:hover { color: var(--accent-color); text-decoration: underline; }
img, video { max-width: 100%; height: auto; display: block; border-style: none; }
.container { max-width: 1200px; margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px; }
.container.position-relative { position: relative; }
.section-padding { padding: 60px 0; } /* Reverted to 0 horizontal padding by default */
.text-center { text-align: center !important; }
.text-start { text-align: left !important; }
.mb-3 { margin-bottom: 1rem !important; } .mb-4 { margin-bottom: 1.5rem !important; } .mb-5 { margin-bottom: 3rem !important; }
.mt-3 { margin-top: 1rem !important; } .mt-4 { margin-top: 1.5rem !important; }

.fade-in { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; will-change: opacity, transform; }
.fade-in.visible { opacity: 1; transform: translateY(0); }

/* Reverted Button Styling */
.btn-jazbaa {
    background-color: var(--primary-color);
    color: #fff; /* Reverted: Ensure light text */
    border: none;
    padding: 10px 25px;
    border-radius: var(--border-radius-sm);
    font-weight: 500;
    transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease, transform 0.2s ease, box-shadow var(--transition-speed) ease;
    box-shadow: var(--shadow-sm);
    display: inline-block;
    text-decoration: none;
    line-height: 1.5;
    text-align: center;
    cursor: pointer;
}
.no-touch .btn-jazbaa:hover {
    background-color: var(--secondary-color);
    color: #fff; /* Reverted: Ensure light text on hover */
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    text-decoration: none;
}
.btn-jazbaa:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
body.dark-mode .btn-jazbaa {
    background-color: var(--primary-color); /* Dark mode primary */
    color: var(--bg-color); /* Dark text for contrast */
}
body.dark-mode .no-touch .btn-jazbaa:hover {
     background-color: var(--accent-color);
     color: var(--bg-color);
}

.btn-jazbaa-secondary {
    background-color: transparent; color: var(--primary-color); border: 1px solid var(--primary-color);
    padding: 10px 25px; border-radius: var(--border-radius-sm); font-weight: 500;
    transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease, transform 0.2s ease, box-shadow var(--transition-speed) ease;
    box-shadow: none; display: inline-block; text-decoration: none; line-height: 1.5; text-align: center; cursor: pointer;
}
.no-touch .btn-jazbaa-secondary:hover { background-color: var(--primary-color); color: var(--bg-secondary); transform: translateY(-3px); box-shadow: var(--shadow-md); text-decoration: none; border-color: var(--primary-color); }
.btn-jazbaa-secondary:active { transform: translateY(0); box-shadow: none; }
body.dark-mode .btn-jazbaa-secondary { color: var(--primary-color); border-color: var(--primary-color); }
body.dark-mode .no-touch .btn-jazbaa-secondary:hover { background-color: var(--primary-color); color: var(--bg-color); border-color: var(--primary-color); }

html.no-touch .no-touch\\:hover\:bg-secondary:hover {}

/*------------------------------------*\
    #HEADER & NAVIGATION
\*------------------------------------*/
.site-header { position: sticky; top: 0; z-index: 1030; background-color: var(--bg-secondary); box-shadow: var(--shadow-sm); transition: background-color var(--transition-speed) ease; padding: 0.4rem 0; }
.site-header .container { display: flex; justify-content: space-between; align-items: center; }
.navbar { padding: 0; }

.navbar-brand { margin-right: auto; display: inline-block; line-height: 1; transition: transform var(--transition-speed) ease; }
#navbar-logo-link { display: inline-block; width: 161px; height: 38px; background-image: url('assets/jazbaa-light.svg'); background-repeat: no-repeat; background-size: contain; background-position: center; transition: background-image 0s ease 0s; vertical-align: middle; text-indent: -9999px; overflow: hidden; }
body.dark-mode #navbar-logo-link { background-image: url('assets/jazbaa-dark.svg'); }
.navbar-brand:hover { transform: scale(1.05); }

.navbar-nav .nav-link { color: var(--text-muted) !important; font-weight: 500; font-size: 1rem; padding: 0.5rem 0.8rem !important; margin: 0 0.2rem; border-radius: var(--border-radius-sm); transition: color var(--transition-speed) ease, background-color var(--transition-speed) ease; position: relative; overflow: hidden; }
.navbar-nav .nav-link::before { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 0; height: 2px; background-color: var(--primary-color); transition: width var(--transition-speed) ease; }
.no-touch .navbar-nav .nav-link:hover, .navbar-nav .nav-link.active { color: var(--primary-color) !important; background-color: rgba(var(--primary-rgb), 0.08); }
.no-touch .navbar-nav .nav-link:hover::before, .navbar-nav .nav-link.active::before { width: 50%; }

.navbar-toggler { border: 1px solid var(--border-color); padding: 0.25rem 0.5rem; margin-left: 1rem; order: 3; }
.navbar-toggler-icon { height: 1.2em; width: 1.2em; }
.dark-mode-toggle { background: none; border: none; color: var(--text-muted); font-size: 1.2rem; cursor: pointer; padding: 0.5rem; transition: color var(--transition-speed) ease, transform var(--transition-speed) ease; line-height: 1; order: 2; }
.dark-mode-toggle:hover { color: var(--primary-color); transform: rotate(15deg) scale(1.1); }

@media (min-width: 992px) { .navbar-toggler { display: none; } .navbar-collapse { display: flex !important; flex-basis: auto; } .navbar-nav { flex-direction: row; } .dark-mode-toggle { margin-left: 0.8rem; order: 0; } }
@media (max-width: 991.98px) { .site-header .container { flex-wrap: wrap; } .navbar-brand { order: 0; } .dark-mode-toggle { order: 1; margin-left: auto; } .navbar-toggler { order: 2; } .navbar-collapse { order: 3; flex-basis: 100%; } .navbar-nav { margin-top: 10px; align-items: flex-start; } .navbar-nav .nav-link { margin: 0.3rem 0; padding-left: 0 !important; width: 100%; } .navbar-nav .nav-link::before { display: none; } }

/*------------------------------------*\
    #FOOTER (Reverted & Refined)
\*------------------------------------*/
.site-footer { background-color: var(--site-footer-bg); color: var(--copyright-color); padding: 50px 0 20px 0; margin-top: auto; transition: background-color var(--transition-speed) ease; font-size: 0.95rem; }
body.dark-mode .site-footer { background-color: var(--site-footer-bg); color: var(--copyright-color); }
.footer-column h5 { color: #fff; margin-bottom: 1.5rem; font-size: 1.1rem; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
body.dark-mode .footer-column h5 { color: var(--primary-color); }
.footer-logo-title { display: flex; align-items: center; margin-bottom: 1.5rem; justify-content: flex-start; }
#footer-logo-img { height: 24px; margin-right: 10px; vertical-align: middle; }
.footer-logo-title h5 { margin-bottom: 0; }
.footer-column p, .footer-column li { margin-bottom: 0.8rem; color: inherit; }
.footer-column ul { list-style: none; padding: 0; }
.footer-column a { color: inherit; text-decoration: none; transition: color var(--transition-speed) ease; }
.footer-column a:hover { color: var(--accent-color); text-decoration: none; }
body.dark-mode .footer-column a:hover { color: var(--primary-color); }
.footer-column i { margin-right: 10px; width: 18px; text-align: center; color: var(--accent-color); }
body.dark-mode .footer-column i { color: var(--accent-color); }
.footer-socials { margin-top: 1.5rem; }
.footer-socials a { font-size: 1.4rem; color: #fff; margin: 0 8px; display: inline-block; transition: color var(--transition-speed) ease, transform var(--transition-speed) ease; }
.no-touch .footer-socials a:hover { color: var(--accent-color); transform: translateY(-3px); }
body.dark-mode .footer-socials a { color: var(--copyright-color); }
body.dark-mode .no-touch .footer-socials a:hover { color: var(--primary-color); }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.15); margin-top: 30px; padding-top: 20px; text-align: center; font-size: 0.9rem; color: inherit; }

/* Reverted Footer Column Layout */
@media (max-width: 991.98px) { /* Medium devices and down */
    .footer-column { text-align: center; margin-bottom: 30px; }
    .footer-column:last-child { margin-bottom: 0; }
    .footer-logo-title { justify-content: center; }
    .footer-socials { text-align: center; }
    .footer-column ul { display: inline-block; text-align: left; padding-left: 0; }
    .footer-column.footer-contact div > p { /* Target paragraphs with icons in contact column */
        display: flex; /* Use flex to keep icon and text on one line */
        justify-content: center; /* Center the flex container if column is centered */
        align-items: flex-start;
        text-align: left; /* Keep text within the P left-aligned */
    }
     .footer-column.footer-contact div > p i {
        margin-right: 8px; /* Space between icon and text */
        flex-shrink: 0;
    }
}
@media (min-width: 768px) and (max-width: 991.98px) { /* Tablets */
    .footer-column.footer-links,
    .footer-column.footer-contact {
        /* Keep them stacking normally, not side-by-side with each other */
    }
}
@media (max-width: 767.98px) { /* Small devices */
     .footer-column.footer-links ul,
     .footer-column.footer-contact div > p {
        /* Ensure they can center if their parent .footer-column is centered */
        display: inline-block; /* Allow centering of block */
        text-align: left;
    }
    .footer-column.footer-contact div { text-align: center; } /* Center the div holding the P tags */
}

/*------------------------------------*\
    #HOMEPAGE SPECIFIC (index.html)
\*------------------------------------*/
body.dark-mode .hero { background: linear-gradient(165deg, var(--hero-animation-grd-clr) 0%, var(--bg-color) 120%); }
.hero { min-height: 70vh; max-height: 650px; display: flex; justify-content: center; align-items: center; overflow: hidden; padding: 4rem 1rem; position: relative; text-align: center; background-color: var(--bg-color); }
#hero-watermark { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('assets/light-hero.svg'); background-repeat: no-repeat; background-position: center center; background-size: 100% auto; opacity: 0.3; z-index: 0; transition: background-image 0s, opacity var(--transition-speed) ease; pointer-events: none; }
body.dark-mode #hero-watermark { background-image: url('assets/dark-hero.svg'); opacity: 0.15; }
#hero-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.hero-content { position: relative; z-index: 2; color: var(--text-color); max-width: 750px; padding: 2rem; }
.hero-subtitle { display: block; font-family: 'Poppins', sans-serif; font-size: clamp(1.1rem, 3vw, 1.5rem); color: var(--text-muted); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 0.2rem; font-weight: 500; }
.hero-content h1 { font-family: var(--heading-font); font-size: clamp(3rem, 10vw, 6rem); color: var(--primary-color); margin-bottom: 1rem; line-height: 1.1; font-weight: 700; text-shadow: 1px 1px 3px rgba(0,0,0,0.1); }
body.dark-mode .hero-content h1 { color: var(--primary-color); text-shadow: 1px 1px 3px rgba(0,0,0,0.3); }
.hero-description { font-size: clamp(1rem, 2.5vw, 1.15rem); color: var(--text-muted); margin: 0 auto 2.5rem auto; max-width: 600px; line-height: 1.7; }
body.dark-mode .hero-description { color: var(--text-muted); }
.hero-buttons { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
@keyframes float { 0%, 100% { transform: translatey(0px); } 50% { transform: translatey(-12px); } }
.vision-section { background-color: var(--bg-color); padding: 60px 0; } /* Reverted horizontal padding */
.vision-content { max-width: 950px; margin: 0 auto; text-align: center; background-color: var(--bg-secondary); padding: 40px; border-radius: var(--border-radius-lg); box-shadow: var(--shadow-md); }
.vision-icon { font-size: 3rem; color: var(--primary-color); margin-bottom: 20px; line-height: 1; }
.vision-section .lead { max-width: 700px; margin-left: auto; margin-right: auto; }
.vision-subtitle { font-size: 1.15rem; font-weight: 600; color: var(--text-color); margin-bottom: 0.5rem; text-align: left; }
.vision-subtitle i { color: var(--primary-color); width: 20px; }
.vision-section .row p { text-align: left; font-size: 0.95rem; margin-bottom: 1rem; }
.glimpses-section { background-color: var(--bg-secondary); }
.carousel { box-shadow: var(--shadow-md); border-radius: var(--border-radius-lg); overflow: visible; position: relative; max-width: 1000px; margin: 0 auto; }
.carousel-inner { border-radius: var(--border-radius-lg); overflow: hidden; }
.carousel img { object-fit: cover; aspect-ratio: 16 / 9; transition: transform 0.5s ease; }
.carousel .carousel-indicators { margin-bottom: 0.8rem; position: relative; bottom: -10px; z-index: 5; /* Above overlays */ }
.carousel .carousel-indicators [data-bs-target] { background-color: var(--primary-color); opacity: 0.6; width: 10px; height: 10px; border-radius: 50%; margin: 0 5px; border: 1px solid var(--bg-secondary); }
.carousel .carousel-indicators .active { opacity: 1; transform: scale(1.1); }
.structure-section { background-color: var(--bg-secondary); }
.structure-section h2 { text-align: center; }
.structure-section .text-muted { max-width: 700px; margin-left: auto; margin-right: auto; color: var(--text-muted) !important; } /* Ensure explicit color */
body.dark-mode .structure-section .text-muted { color: var(--text-muted); }
.department-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 25px; max-width: 1000px; margin: 40px auto 0 auto; }
.department-card { border-radius: var(--border-radius-md); padding: 30px 20px; text-align: center; box-shadow: var(--shadow-sm); transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease, background-color var(--transition-speed) ease, color var(--transition-speed) ease; display: flex; flex-direction: column; align-items: center; position: relative; overflow: hidden; color: var(--text-color); min-height: 180px; justify-content: center; }
.no-touch .department-card:hover { transform: translateY(-8px) scale(1.03); box-shadow: var(--shadow-lg); }
.department-card.color-1 { background-color: var(--dept-color-1); } .department-card.color-2 { background-color: var(--dept-color-2); } .department-card.color-3 { background-color: var(--dept-color-3); } .department-card.color-4 { background-color: var(--dept-color-4); } .department-card.color-5 { background-color: var(--dept-color-5); } .department-card.color-6 { background-color: var(--dept-color-6); } .department-card.color-7 { background-color: var(--dept-color-7); }
.department-card.color-1, .department-card.color-2, .department-card.color-3, .department-card.color-4 { color: #333; }
.department-card.color-1 h3, .department-card.color-2 h3, .department-card.color-3 h3, .department-card.color-4 h3 { color: #333; }
.department-card.color-1 .card-icon, .department-card.color-2 .card-icon, .department-card.color-3 .card-icon, .department-card.color-4 .card-icon { color: #333; } /* Department icons black in light mode */
.department-card.color-5, .department-card.color-6, .department-card.color-7 { color: #fff; }
.department-card.color-5 h3, .department-card.color-6 h3, .department-card.color-7 h3 { color: #fff; }
.department-card.color-5 .card-icon, .department-card.color-6 .card-icon, .department-card.color-7 .card-icon { color: rgba(255,255,255,0.8); }
.no-touch .department-card.color-5:hover, .no-touch .department-card.color-6:hover, .no-touch .department-card.color-7:hover { background-color: var(--primary-color); color: var(--bg-secondary); }
.no-touch .department-card.color-5:hover h3, .no-touch .department-card.color-6:hover h3, .no-touch .department-card.color-7:hover h3, .no-touch .department-card.color-5:hover .card-icon, .no-touch .department-card.color-6:hover .card-icon, .no-touch .department-card.color-7:hover .card-icon { color: var(--bg-secondary); }
body.dark-mode .department-card { color: var(--text-color); } body.dark-mode .department-card h3 { color: var(--text-color); }
body.dark-mode .department-card .card-icon { color: var(--primary-color); } /* Icons primary color in dark mode */
body.dark-mode .no-touch .department-card:hover { background-color: var(--primary-color); color: var(--bg-color); }
body.dark-mode .no-touch .department-card:hover h3, body.dark-mode .no-touch .department-card:hover .card-icon { color: var(--bg-color); }
.department-card .card-icon { font-size: 2.8rem; margin-bottom: 15px; line-height: 1; transition: transform 0.3s ease; }
.no-touch .department-card:hover .card-icon { transform: scale(1.1) rotate(-5deg); }
.department-card h3 { font-size: 1.25rem; margin-bottom: 8px; font-weight: 600; font-family: var(--heading-font); color: inherit; }
.department-card p { font-size: 0.9rem; margin-bottom: 0; color: inherit; opacity: 0.8; max-width: 90%; }
.recent-events-section { background-color: var(--bg-color); }
.video-event-card { border: none; border-radius: var(--border-radius-lg); background: var(--bg-secondary); padding: 1.5rem; transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease; box-shadow: var(--shadow-md); height: 100%; display: flex; flex-direction: column; overflow: hidden; }
.video-event-card .card-video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: var(--border-radius-md); margin-bottom: 1.5rem; background-color: #000; box-shadow: var(--shadow-sm); object-fit: cover; }
.video-event-card .card-body { padding: 0; flex-grow: 1; text-align: center; }
.video-event-card .card-body p { font-size: 1rem; margin-bottom: 0.5rem; color: var(--text-muted); line-height: 1.5; margin-left: auto; margin-right: auto; max-width: 60ch; }
.no-touch .video-event-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }

.carousel-fullscreen-nav { position: relative; overflow: hidden; }
.carousel-nav-overlay { position: absolute; top: 0; bottom: 0; width: 50%; z-index: 4; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; background-color: rgba(0, 0, 0, 0.1); transition: opacity var(--transition-speed) ease, background-color var(--transition-speed) ease; }
.carousel-nav-overlay.carousel-nav-prev { left: 0; justify-content: flex-start; }
.carousel-nav-overlay.carousel-nav-next { right: 0; justify-content: flex-end; }
.carousel-nav-icon { color: rgba(255, 255, 255, 0.8); font-size: clamp(1.8rem, 4vw, 2.5rem); padding: 0 25px; text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5); pointer-events: none; transition: transform 0.2s ease; }
.no-touch .carousel-fullscreen-nav:hover .carousel-nav-overlay { opacity: 1; }
.no-touch .carousel-fullscreen-nav .carousel-nav-overlay:hover { background-color: rgba(0, 0, 0, 0.3); }
.no-touch .carousel-fullscreen-nav .carousel-nav-overlay:hover .carousel-nav-icon { transform: scale(1.1); }
.carousel-fullscreen-nav .carousel-indicators { z-index: 5; position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); margin-bottom: 0; padding-left: 0; margin-left: 0; margin-right: 0; }
.carousel-fullscreen-nav .carousel-control-prev, .carousel-fullscreen-nav .carousel-control-next { display: none !important; }

/*------------------------------------*\
    #TEAM PAGE SPECIFIC (team.html)
\*------------------------------------*/
.about-us-header { text-align: center; margin-bottom: 40px; }
.about-us-header .note p { font-size: 1.1rem; font-weight: 300; color: var(--text-muted); max-width: 800px; margin: 0 auto 40px auto; text-align: center; }
.department-block { margin-bottom: 50px; border-bottom: 1px solid var(--border-color); padding-bottom: 40px; }
.department-block:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.department-header-wrapper { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; flex-wrap: wrap; gap: 10px; border-bottom: 2px solid var(--primary-color); padding-bottom: 10px; }
.department-header { font-size: clamp(1.4rem, 3.5vw, 2rem); color: var(--primary-color); font-weight: 600; border-left: none; padding-left: 0; margin-bottom: 0; }
.member-count { font-size: 0.9rem; font-weight: 500; color: var(--text-muted); background-color: var(--bg-color); padding: 4px 10px; border-radius: 15px; border: 1px solid var(--border-color); white-space: nowrap; }
body.dark-mode .member-count { background-color: var(--bg-secondary); }
.hod-container, .member-container { display: grid; gap: 25px; justify-content: center; }
.hod-container { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-bottom: 30px; }
.member-container { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.profile-card { transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease; display: flex; flex-direction: column; align-items: center; text-align: center; }
.profile-card.hod-card { background-color: var(--bg-secondary); border-radius: var(--border-radius-md); padding: 25px 15px; box-shadow: var(--shadow-sm); height: 100%; width: 100%; max-width: 350px; justify-self: center; }
.no-touch .profile-card.hod-card:hover { transform: translateY(-5px) scale(1.02); box-shadow: var(--shadow-md); }
.profile-card img { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; margin-bottom: 15px; border: 3px solid var(--accent-color); background-color: var(--bg-color); }
.profile-card h3 { font-size: 1.1rem; margin-bottom: 3px; font-weight: 600; color: var(--text-color); font-family: var(--heading-font); line-height: 1.3; }
.profile-card p { font-size: 0.9rem; color: var(--primary-color); font-weight: 500; margin-bottom: 0; line-height: 1.3; }
.profile-card.member-card { background-color: transparent; padding: 10px 5px; max-width: 180px; justify-self: center; }
.profile-card.member-card h3 { font-size: 1rem; color: var(--text-muted); font-weight: 400; font-family: var(--body-font); }
.profile-card.member-card p { font-size: 0.85rem; color: var(--secondary-color); font-weight: 400; }
body.dark-mode .profile-card.member-card p { color: var(--secondary-color); }
.cultural-minister-container { display: flex; justify-content: center; margin-bottom: 30px; }
.cultural-minister-card { max-width: 400px !important; padding: 30px 20px !important; } /* Ensure it overrides .profile-card.hod-card max-width */
.cultural-minister-card img { width: 180px !important; height: 180px !important; }
.cultural-minister-card h3 { font-size: 1.3rem !important; }
.deputy-minister-container { /* Uses .hod-container for grid */ }
.deputy-minister-card img { width: 140px; height: 140px; }

/*------------------------------------*\
    #NEW GALLERY PAGE (gallery.html) - Streamlined & Themed
\*------------------------------------*/
.gallery-page body { font-family: var(--body-font); color: var(--text-color); background-color: var(--bg-color); line-height: 1.6; }
body.dark-mode .gallery-page body { color: var(--text-color); background-color: var(--bg-color); }
.gallery-page a { text-decoration: none; }
.gallery-page a:hover { text-decoration: none; color: var(--accent-color); }

.cd-horizontal-timeline { opacity: 0; margin: 3em auto; padding: 1em 0; transition: opacity 0.2s; width: 90%; max-width: 1100px; }
.cd-horizontal-timeline.loaded { opacity: 1; }
.cd-horizontal-timeline h1 { text-align: center; margin-bottom: 1.5em; font-family: var(--heading-font); font-size: clamp(2rem, 4.5vw, 2.6rem); color: var(--secondary-color); font-weight: 700; }
body.dark-mode .cd-horizontal-timeline h1 { color: var(--primary-color); }
.cd-horizontal-timeline .timeline { position: relative; height: 120px; margin: 0 auto; }
.cd-horizontal-timeline .events-wrapper { position: relative; height: 100%; overflow: hidden; margin: 0 45px; }
.cd-horizontal-timeline .events-wrapper::after, .cd-horizontal-timeline .events-wrapper::before { content: ''; position: absolute; z-index: 2; top: 0; height: 100%; width: 45px; }
.cd-horizontal-timeline .events-wrapper::before { left: 0; background-image: linear-gradient(to right, var(--bg-color), rgba(var(--bg-color-rgb), 0)); }
.cd-horizontal-timeline .events-wrapper::after { right: 0; background-image: linear-gradient(to left, var(--bg-color), rgba(var(--bg-color-rgb), 0)); }
body.dark-mode .cd-horizontal-timeline .events-wrapper::before { background-image: linear-gradient(to right, var(--bg-color), rgba(var(--bg-color-rgb), 0)); }
body.dark-mode .cd-horizontal-timeline .events-wrapper::after { background-image: linear-gradient(to left, var(--bg-color), rgba(var(--bg-color-rgb), 0)); }
.cd-horizontal-timeline .events { position: absolute; z-index: 1; left: 0; top: 50%; transform: translateY(-50%); height: 2px; background: var(--border-color); transition: transform 0.4s; }
body.dark-mode .cd-horizontal-timeline .events { background: var(--border-color); }
.cd-horizontal-timeline ol { list-style: none !important; background: none !important; padding: 0 !important; margin: 0 !important; position: relative; height: 100%; }
.cd-horizontal-timeline li { list-style: none !important; background: none !important; padding: 0 !important; margin: 0 !important; position: absolute; top: 50%; transform: translateY(-50%); height: 100%; }
.cd-horizontal-timeline li::marker { content: "" !important; display: none !important; }
.cd-horizontal-timeline .filling-line { position: absolute; z-index: 2; left: 0; top: 0; height: 100%; width: 100%; background-color: var(--primary-color); transform: scaleX(0); transform-origin: left center; transition: transform 0.3s; border-radius: 1px; }
.cd-horizontal-timeline .events a { position: absolute; z-index: 3; text-align: center; font-size: 1.1rem; /* Smaller */ font-weight: 500; padding: 3px 5px; color: var(--text-muted); left: 50%; transform: translateX(-50%); user-select: none; white-space: nowrap; cursor: pointer; top: 50%; margin-top: 18px; background-color: var(--bg-color); border-radius: var(--border-radius-sm); transition: color 0.3s; }
body.dark-mode .cd-horizontal-timeline .events a { color: var(--text-muted); background-color: var(--bg-secondary); }
.cd-horizontal-timeline .events a::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); height: 14px; width: 14px; border-radius: 50%; border: 2px solid var(--primary-color); background-color: var(--bg-secondary); transition: background-color 0.3s, border-color 0.3s, transform 0.3s; z-index: 4; top: -25px; }
body.dark-mode .cd-horizontal-timeline .events a::after { background-color: var(--bg-secondary); border-color: var(--primary-color); }
.cd-horizontal-timeline .events li:nth-child(odd) a { top: auto; bottom: 50%; margin-top: 0; margin-bottom: 18px; }
.cd-horizontal-timeline .events li:nth-child(odd) a::after { top: auto; bottom: -25px; }
.no-touch .cd-horizontal-timeline .events a:hover::after { background-color: var(--accent-color); border-color: var(--accent-color); transform: translateX(-50%) scale(1.2); }
body.dark-mode .no-touch .cd-horizontal-timeline .events a:hover::after { background-color: var(--accent-color); border-color: var(--accent-color); }
.cd-horizontal-timeline .events a.selected { pointer-events: none; color: var(--secondary-color); font-weight: 700; }
body.dark-mode .cd-horizontal-timeline .events a.selected { color: var(--accent-color); }
.cd-horizontal-timeline .events a.selected::after { background-color: var(--secondary-color); border-color: var(--secondary-color); transform: translateX(-50%) scale(1.3); }
body.dark-mode .cd-horizontal-timeline .events a.selected::after { background-color: var(--accent-color); border-color: var(--accent-color); }
.cd-horizontal-timeline .events a.older-event::after { border-color: var(--accent-color); }
body.dark-mode .cd-horizontal-timeline .events a.older-event::after { border-color: var(--secondary-color); }
.cd-timeline-navigation { padding: 0; margin: 0; list-style: none; position: absolute; top: 50%; transform: translateY(-50%); height: 40px; width: 100%; left: 0; z-index: 4; pointer-events: none; }
.cd-timeline-navigation li { padding: 0; margin: 0; list-style: none; position: absolute; top: 0; height: 100%; pointer-events: auto; }
.cd-timeline-navigation a { display: block; height: 40px; width: 40px; border-radius: 50%; border: 2px solid var(--border-color); overflow: hidden; color: transparent; text-indent: 100%; white-space: nowrap; background-color: var(--bg-secondary); transition: border-color 0.3s, background-color 0.3s; box-shadow: var(--shadow-sm); position: relative; }
body.dark-mode .cd-timeline-navigation a { border-color: var(--border-color); background-color: var(--bg-secondary); }
.cd-timeline-navigation a::before { font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: var(--text-muted); font-size: 16px; text-indent: 0; }
body.dark-mode .cd-timeline-navigation a::before { color: var(--text-muted); }
.cd-timeline-navigation li.prev-nav { left: 0; transform: translateX(-45px); }
.cd-timeline-navigation li.next-nav { right: 0; transform: translateX(45px); }
.cd-timeline-navigation a.prev::before { content: "\f053"; } .cd-timeline-navigation a.next::before { content: "\f054"; }
.no-touch .cd-timeline-navigation a:hover { border-color: var(--primary-color); background-color: var(--bg-color); }
.no-touch .cd-timeline-navigation a:hover::before { color: var(--primary-color); }
body.dark-mode .no-touch .cd-timeline-navigation a:hover { border-color: var(--primary-color); background-color: var(--bg-color); }
body.dark-mode .no-touch .cd-timeline-navigation a:hover::before { color: var(--primary-color); }
.cd-timeline-navigation a.inactive { cursor: not-allowed; border-color: var(--border-color); background-color: var(--bg-color); opacity: 0.6; box-shadow: none; }
.cd-timeline-navigation a.inactive::before { color: var(--text-muted); opacity: 0.7; }
body.dark-mode .cd-timeline-navigation a.inactive { border-color: var(--border-color); background-color: var(--bg-secondary); }
body.dark-mode .cd-timeline-navigation a.inactive::before { color: var(--text-muted); }
.no-touch .cd-timeline-navigation a.inactive:hover { border-color: var(--border-color); background-color: var(--bg-color); }
.no-touch .cd-timeline-navigation a.inactive:hover::before { color: var(--text-muted); }
body.dark-mode .no-touch .cd-timeline-navigation a.inactive:hover { border-color: var(--border-color); background-color: var(--bg-secondary); }
body.dark-mode .no-touch .cd-timeline-navigation a.inactive:hover::before { color: var(--text-muted); }
.cd-horizontal-timeline .events-content { position: relative; width: 100%; margin: 3em 0; overflow: hidden; transition: height 0.4s ease-in-out; padding: 0 2%; min-height: 600px; /* Increased */ }
.cd-horizontal-timeline .events-content ol { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.cd-horizontal-timeline .events-content li { position: absolute; z-index: 1; width: 100%; left: 0; top: 0; transform: translateX(100%); opacity: 0; animation-duration: 0.4s; animation-timing-function: ease-in-out; padding: clamp(30px, 5vw, 50px) clamp(35px, 5vw, 60px); /* Increased */ visibility: hidden; background-color: var(--bg-secondary); border-radius: var(--border-radius-md); box-shadow: var(--shadow-md); }
body.dark-mode .cd-horizontal-timeline .events-content li { background-color: var(--bg-secondary); }
.cd-horizontal-timeline .events-content li.selected { position: relative; z-index: 2; opacity: 1; transform: translateX(0); visibility: visible; }
.cd-horizontal-timeline .events-content li.enter-right { animation-name: cd-enter-right; }
.cd-horizontal-timeline .events-content li.leave-left { animation-name: cd-enter-right; animation-direction: reverse; }
.cd-horizontal-timeline .events-content li.enter-left { animation-name: cd-enter-left; }
.cd-horizontal-timeline .events-content li.leave-right { animation-name: cd-enter-left; animation-direction: reverse; }
.cd-horizontal-timeline .events-content li > * { max-width: 800px; margin-left: auto; margin-right: auto; }
.cd-horizontal-timeline .events-content h2 { font-weight: 600; font-family: var(--heading-font); line-height: 1.3; font-size: clamp(1.5rem, 3.5vw, 2rem); /* Smaller */ text-align: center; margin-bottom: 0.5em; color: var(--primary-color); }
body.dark-mode .cd-horizontal-timeline .events-content h2 { color: var(--primary-color); }
.cd-horizontal-timeline .events-content p { font-size: clamp(0.9rem, 1.3vw, 1rem); /* Smaller */ color: var(--text-muted); line-height: 1.7; margin-bottom: 1em; text-align: center; font-family: var(--body-font); }
body.dark-mode .cd-horizontal-timeline .events-content p { color: var(--text-muted); }
.gallery { display: flex; overflow-x: auto; overflow-y: hidden; gap: 20px; margin-top: 25px; padding: 5px 0 25px 0; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; max-width: 100%; scroll-snap-type: x mandatory; cursor: grab; scrollbar-width: thin; scrollbar-color: var(--accent-color) var(--bg-color); }
.gallery:active { cursor: grabbing; }
.gallery img { height: clamp(350px, 55vh, 600px); /* Increased */ width: auto; max-width: 90vw; object-fit: cover; border-radius: var(--border-radius-md); box-shadow: var(--shadow-sm); flex-shrink: 0; scroll-snap-align: center; background-color: var(--bg-color); }
.gallery::-webkit-scrollbar { height: 8px; }
.gallery::-webkit-scrollbar-track { background: var(--bg-color); border-radius: 5px; }
.gallery::-webkit-scrollbar-thumb { background-color: var(--accent-color); border-radius: 5px; border: 2px solid var(--bg-color); }
.gallery::-webkit-scrollbar-thumb:hover { background-color: var(--primary-color); }
body.dark-mode .gallery { scrollbar-color: var(--primary-color) var(--bg-secondary); }
body.dark-mode .gallery::-webkit-scrollbar-track { background: var(--bg-secondary); }
body.dark-mode .gallery::-webkit-scrollbar-thumb { background-color: var(--primary-color); border: 2px solid var(--bg-secondary); }
body.dark-mode .gallery::-webkit-scrollbar-thumb:hover { background-color: var(--accent-color); }
@-webkit-keyframes cd-enter-right { 0% { opacity: 0; -webkit-transform: translateX(100%); visibility: hidden; } 1% { visibility: visible; } 100% { opacity: 1; -webkit-transform: translateX(0%); visibility: visible; } }
@keyframes cd-enter-right { 0% { opacity: 0; transform: translateX(100%); visibility: hidden; } 1% { visibility: visible; } 100% { opacity: 1; transform: translateX(0%); visibility: visible; } }
@-webkit-keyframes cd-enter-left { 0% { opacity: 0; -webkit-transform: translateX(-100%); visibility: hidden; } 1% { visibility: visible; } 100% { opacity: 1; -webkit-transform: translateX(0%); visibility: visible; } }
@keyframes cd-enter-left { 0% { opacity: 0; transform: translateX(-100%); visibility: hidden; } 1% { visibility: visible; } 100% { opacity: 1; transform: translateX(0%); visibility: visible; } }

/*------------------------------------*\
    #CALENDAR PAGE (calendar.html)
\*------------------------------------*/
.calendar-container { background-color: var(--bg-secondary); border-radius: var(--border-radius-lg); padding: clamp(20px, 4vw, 30px); box-shadow: var(--shadow-md); max-width: 1100px; margin: 30px auto; }
.calendar-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; margin-bottom: 25px; padding-bottom: 20px; border-bottom: 1px solid var(--border-color); gap: 10px; }
.calendar-header h2 { order: 1; flex-grow: 1; text-align: center; margin: 0; font-size: clamp(1.4rem, 4vw, 1.8rem); /* color: var(--primary-color); No, should be secondary for light */ }
.calendar-nav { display: flex; gap: 5px; }
.calendar-nav:first-of-type { order: 0; }
.calendar-nav:last-of-type { order: 2; }
.calendar-view-toggle { order: 3; display: flex; gap: 5px; margin-left: auto; }
@media (max-width: 767.98px) { .calendar-header { justify-content: center; } .calendar-header h2 { order: 0; width: 100%; margin-bottom: 10px; } .calendar-nav:first-of-type { order: 1; } .calendar-nav:last-of-type { order: 2; } .calendar-view-toggle { order: 3; width: 100%; justify-content: center; margin-left: 0; margin-top: 10px; } }
.calendar-nav button, .calendar-view-toggle button { background-color: transparent; border: 1px solid var(--secondary-color); color: var(--secondary-color); padding: clamp(6px, 1.5vw, 8px) clamp(10px, 2vw, 15px); border-radius: 20px; cursor: pointer; font-size: clamp(0.8rem, 2vw, 0.9rem); font-weight: 500; transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease, transform 0.1s ease, box-shadow 0.2s ease; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.no-touch .calendar-nav button:hover, .no-touch .calendar-view-toggle button:hover { background-color: var(--secondary-color); color: var(--bg-secondary); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.calendar-nav button:active, .calendar-view-toggle button:active { transform: translateY(0); box-shadow: none; }
.calendar-view-toggle button.active { background-color: var(--primary-color); border-color: var(--primary-color); color: var(--bg-secondary); font-weight: 700; box-shadow: var(--shadow-sm); }
.calendar-grid-view { display: grid; grid-template-columns: repeat(7, 1fr); gap: clamp(3px, 0.8vw, 5px); }
.calendar-dow { text-align: center; font-weight: 600; padding: 10px 0; color: var(--secondary-color); font-size: clamp(0.8rem, 1.8vw, 0.9rem); border-bottom: 2px solid var(--border-color); margin-bottom: 5px; }
body.dark-mode .calendar-dow { color: var(--secondary-color); } /* Or primary for dark mode */
.calendar-day { border: 1px solid var(--border-color); min-height: 110px; padding: 8px; font-size: 0.9rem; position: relative; background-color: var(--bg-color); transition: background-color var(--transition-speed) ease, border-color var(--transition-speed) ease; border-radius: var(--border-radius-sm); display: flex; flex-direction: column; }
body.dark-mode .calendar-day { background-color: var(--bg-secondary); }
.calendar-day.other-month { opacity: 0.4; background-color: transparent; border-color: transparent; pointer-events: none; }
.calendar-day.today { background-color: rgba(var(--primary-rgb), 0.15); border: 2px solid var(--primary-color); font-weight: bold; }
body.dark-mode .calendar-day.today { background-color: rgba(255, 140, 0, 0.25); /* Reverted dark mode today highlight */ border: 2px solid #FF8C00; /* Reverted dark mode today border */ }
.day-number { font-weight: 500; display: block; text-align: right; font-size: 0.85rem; color: var(--text-muted); margin-bottom: 5px; }
.calendar-day.today .day-number { color: var(--primary-color); }
body.dark-mode .calendar-day.today .day-number { color: #FF8C00; } /* Reverted dark mode today number */
.calendar-day.has-events { cursor: pointer; }
.no-touch .calendar-day.has-events:hover { background-color: rgba(0,0,0,0.03); border-color: var(--accent-color); }
body.dark-mode .no-touch .calendar-day.has-events:hover { background-color: rgba(255,255,255,0.05); border-color: var(--accent-color); }
.calendar-event-titles { margin-top: auto; padding-top: 5px; display: flex; flex-direction: column; gap: 3px; overflow: hidden; }
.calendar-event-title { font-size: 0.75rem; background-color: var(--primary-color); color: var(--bg-secondary); padding: 1px 4px; border-radius: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; cursor: pointer; transition: background-color var(--transition-speed) ease; }
body.dark-mode .calendar-event-title { color: var(--bg-color); }
.no-touch .calendar-event-title:hover { background-color: var(--secondary-color); }
.calendar-event-more-indicator { font-size: 0.7rem; color: var(--text-muted); text-align: center; margin-top: 2px; font-style: italic; }
#list-view { display: none; }
.calendar-list-view { margin-top: 20px; }
.event-list-item { background-color: var(--bg-color); border-left: 5px solid var(--primary-color); padding: 15px 20px; margin-bottom: 15px; border-radius: var(--border-radius-md); display: flex; gap: 20px; align-items: flex-start; box-shadow: var(--shadow-sm); transition: box-shadow var(--transition-speed) ease, border-color var(--transition-speed) ease, background-color var(--transition-speed) ease; }
body.dark-mode .event-list-item { background-color: var(--bg-secondary); }
.no-touch .event-list-item:hover { box-shadow: var(--shadow-md); border-color: var(--secondary-color); }
.event-list-item.highlighted { border-color: var(--accent-color); background-color: rgba(var(--primary-rgb), 0.1); }
body.dark-mode .event-list-item.highlighted { background-color: rgba(var(--primary-rgb), 0.15); }
.event-date { background-color: var(--secondary-color); color: var(--bg-secondary); padding: 10px; border-radius: var(--border-radius-sm); text-align: center; min-width: 60px; flex-shrink: 0; }
body.dark-mode .event-date { background-color: var(--primary-color); color: var(--bg-color); }
.event-date .day { display: block; font-size: 1.6rem; font-weight: 700; line-height: 1.2; }
.event-date .month { display: block; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.5px; }
.event-details { flex-grow: 1; }
.event-details h4 { margin-bottom: 0.3em; font-size: 1.2rem; color: var(--text-color); font-family: var(--body-font); font-weight: 600; }
body.dark-mode .event-details h4 { color: var(--text-color); }
.event-details p { margin-bottom: 0.5rem; font-size: 0.95rem; color: var(--text-muted); line-height: 1.5; }
.event-meta { display: flex; flex-wrap: wrap; gap: 15px; margin-top: 8px; font-size: 0.9rem; color: var(--text-muted); }
.event-meta span { display: inline-flex; align-items: center; gap: 5px; }
.event-meta i { color: var(--primary-color); }
body.dark-mode .event-meta i { color: var(--accent-color); }
.no-events-message { text-align: center; padding: 30px; color: var(--text-muted); font-style: italic; }

/*------------------------------------*\
    #AWAAZ PAGE (awaaz.html)
\*------------------------------------*/
.awaaz-hero { min-height: 40vh; display: flex; align-items: center; justify-content: center; text-align: center; background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); color: var(--bg-secondary); padding: 40px 20px; position: relative; overflow: hidden; }
body.dark-mode .awaaz-hero { background: linear-gradient(135deg, #3a2a1a -25%, var(--primary-color) 100%); }
.awaaz-hero h1 { color: inherit; font-size: clamp(2rem, 6vw, 3.5rem); margin-bottom: 0.5em; text-shadow: 1px 1px 3px rgba(0,0,0,0.2); }
.awaaz-hero p { color: rgba(255, 255, 255, 0.9); font-size: 1.1rem; max-width: 600px; margin: 0 auto; }
#awaaz-bg-animation { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; opacity: 0.6; background-image: linear-gradient(var(--secondary-color) 1px, transparent 1px), linear-gradient(to right, var(--secondary-color) 1px, transparent 1px); background-size: 20px 20px; animation: scrollGrid 50s linear infinite; will-change: background-position; }
body.dark-mode #awaaz-bg-animation { background-image: linear-gradient(var(--text-muted) 1px, transparent 1px), linear-gradient(to right, var(--text-muted) 1px, transparent 1px); opacity: 0.1; }
@keyframes scrollGrid { from { background-position: 0 0; } to { background-position: -200px 200px; } }
.awaaz-hero-content { position: relative; z-index: 1; }
.awaaz-flipbook-bg { background-color: var(--bg-color); padding: 60px 0; position: relative; overflow: hidden; } /* Reverted horizontal padding */
body.dark-mode .awaaz-flipbook-bg { background-color: var(--bg-color); }
.awaaz-flipbook-bg h2 { color: var(--secondary-color); }
body.dark-mode .awaaz-flipbook-bg h2 { color: var(--primary-color); }
.awaaz-flipbook-bg .muted-text { color: var(--text-muted); }
.awaaz-flipbook-bg .text-center.muted-text a { color: var(--primary-color); }
body.dark-mode .awaaz-flipbook-bg .text-center.muted-text a { color: var(--primary-color); }
#awaaz-lines-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0.6; }
.iframe-container { position: relative; z-index: 1; overflow: hidden; width: 100%; aspect-ratio: 4 / 3; margin: 30px auto; max-width: 1000px; border-radius: var(--border-radius-md); box-shadow: var(--shadow-lg); background-color: var(--bg-secondary); border: 1px solid var(--border-color); }
.iframe-container iframe { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; border: none; }


/*------------------------------------*\
    #PETS PAGE SPECIFIC (pets.html)
\*------------------------------------*/

/* Particles Background for Pets Page */
#particles-js-pets {
    position: fixed; /* Or absolute if main content scrolls over it */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Behind other content */
    background-color: var(--bg-color); /* Use theme background */
}
body.dark-mode #particles-js-pets {
    background-color: var(--bg-color); /* Use theme background */
}

.pets-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* Responsive grid */
    gap: 30px; /* Spacing between cards */
    padding: 20px 0;
    justify-items: center; /* Center cards in their grid cells */
}

.pet-card {
  width: 100%; /* Make card take full width of its grid cell */
  max-width: 350px; /* Max width of a card */
  height: 380px;  /* Increased height for more content */
  perspective: 1000px;
  cursor: pointer;
  margin-bottom: 20px; /* Add some bottom margin for stacking on small screens */
}

.pet-card-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(0.4, 0.0, 0.2, 1); /* Smoother transition */
  box-shadow: var(--shadow-md);
  border-radius: var(--border-radius-md);
}

.pet-card.flipped .pet-card-inner {
  transform: rotateY(180deg);
}

.pet-card-front, .pet-card-back {
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: hidden;
  border-radius: var(--border-radius-md); /* Consistent border radius */
  overflow: hidden; /* Ensure content respects border radius */
}

.pet-card-front {
    background-color: var(--bg-secondary); /* Use theme secondary bg */
}

.pet-card-front img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* border-radius already on .pet-card-front */
}

.pet-card-back {
  background-color: var(--primary-color); /* Use theme primary */
  color: #fff; /* Light text on primary background */
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px; /* Increased padding */
  text-align: center;
  font-family: var(--body-font);
}
body.dark-mode .pet-card-back {
    background-color: var(--primary-color); /* Dark mode primary */
    color: var(--bg-color); /* Dark text on light button */
}

.pet-card-back h3 {
  font-family: var(--heading-font);
  color: inherit; /* Inherit from .pet-card-back */
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 1.5rem; /* Consistent heading size */
}

.pet-card-back p {
  font-size: 0.9rem; /* Consistent paragraph size */
  margin-bottom: 8px;
  color: inherit; /* Inherit from .pet-card-back */
  line-height: 1.5;
}
.pet-card-back p strong {
    font-weight: 600; /* Make strong tags bolder */
}

/* Responsive adjustments for pet cards */
@media (max-width: 768px) {
    .pets-card-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 20px;
    }
    .pet-card {
        height: 350px;
    }
}
@media (max-width: 480px) {
    .pets-card-grid {
        grid-template-columns: 1fr; /* Single column on very small screens */
    }
     .pet-card {
        max-width: 100%; /* Allow card to take full width */
        height: 320px;
    }
    .pet-card-back h3 {
        font-size: 1.3rem;
    }
    .pet-card-back p {
        font-size: 0.85rem;
    }
}


/*------------------------------------*\
    #RESPONSIVE ADJUSTMENTS
\*------------------------------------*/
@media (max-width: 991.98px) {
    .hod-container { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px; }
    .member-container { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 15px; }
    .profile-card img { width: 100px; height: 100px; }
    .cultural-minister-card img { width: 150px !important; height: 150px !important; } /* Ensure minister image is larger on tablet */
    .deputy-minister-card img { width: 120px; height: 120px; }
    .department-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; }
    .cd-horizontal-timeline .events-wrapper { margin: 0 30px; }
    .cd-timeline-navigation li.prev-nav { transform: translateX(-35px); }
    .cd-timeline-navigation li.next-nav { transform: translateX(35px); }
}
@media (max-width: 767.98px) {
    html { font-size: 95%; }
    h1 { font-size: 1.8rem; } h2 { font-size: 1.6rem; } h3 { font-size: 1.4rem; }
    .section-padding { padding: 40px 0; } /* Reverted horizontal padding */
    .hero { min-height: 50vh; max-height: 400px; }
    .vision-content { padding: 30px 20px; } .vision-subtitle { font-size: 1.1rem; } .vision-section .row p { font-size: 0.9rem; }
    .carousel-fullscreen-nav .carousel-nav-icon { font-size: 2rem; padding: 0 15px; }
    .calendar-day { min-height: 80px; padding: 5px; } .calendar-event-title { font-size: 0.7rem; padding: 1px 3px; }
    .event-list-item { flex-direction: column; gap: 10px; } .event-date { align-self: flex-start; min-width: 50px; }
    .event-date .day { font-size: 1.3rem; } .event-date .month { font-size: 0.7rem; }
    .event-details h4 { font-size: 1.1rem; } .event-details p { font-size: 0.9rem; }
    .hod-container { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
    .member-container { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
    .profile-card.hod-card { max-width: 250px; }
    .profile-card img { width: 100px; height: 100px; } /* Base for mobile */
    .cultural-minister-card img { width: 130px !important; height: 130px !important; }
    .deputy-minister-card img { width: 100px; height: 100px; }
    .profile-card h3 { font-size: 1rem; } .profile-card p { font-size: 0.8rem; }
    .profile-card.member-card { max-width: 150px; }
    .department-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
    .cd-horizontal-timeline { margin: 2em auto; width: 90%; } .cd-horizontal-timeline h1 { font-size: 2.2rem; }
    .cd-horizontal-timeline .timeline { height: 110px; } .cd-horizontal-timeline .events-wrapper { margin: 0 5px; -webkit-mask-image: none; mask-image: none; }
    .cd-timeline-navigation { display: none; } .cd-horizontal-timeline .events a { font-size: 1.2rem; margin-top: 16px; padding: 2px 3px; }
    .cd-horizontal-timeline .events li:nth-child(odd) a { margin-bottom: 16px; }
    .cd-horizontal-timeline .events a::after { height: 12px; width: 12px; top: -22px; }
    .cd-horizontal-timeline .events li:nth-child(odd) a::after { bottom: -22px; }
    .cd-horizontal-timeline .events-content { margin: 2em 0; padding: 0 2%; min-height: 450px; }
    .cd-horizontal-timeline .events-content li { padding: 1em 3%; }
    .cd-horizontal-timeline .events-content h2 { font-size: 1.6rem; } /* Smaller for mobile */
    .cd-horizontal-timeline .events-content p { font-size: 0.9rem; } /* Smaller for mobile */
    .gallery { margin-top: 15px; gap: 10px; padding-bottom: 15px; }
    .gallery img { height: clamp(250px, 40vh, 400px); max-width: 75vw; border-radius: var(--border-radius-sm); }
}
@media (max-width: 575.98px) {
    .department-grid { grid-template-columns: 1fr; }
    .hod-container { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } /* Further adjust */
    .member-container { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); } /* Further adjust */
    .cultural-minister-card { max-width: 90%; } /* Allow minister card to take more width */
    .cultural-minister-card img { width: 120px !important; height: 120px !important; }
    .cd-horizontal-timeline .gallery img { height: 180px; }
}
/* Gallery specific media queries (from new gallery CSS) */
@media only screen and (min-width: 768px) {
  .cd-horizontal-timeline .timeline { height: 120px; }
  .cd-horizontal-timeline .events a { font-size: 1.1rem; } /* Keep smaller for consistency */
  .cd-horizontal-timeline .events-content h2 { font-size: 1.8rem; } /* Keep smaller */
  .cd-horizontal-timeline .events-content p { font-size: 1rem; } /* Keep smaller */
  .gallery img { height: clamp(350px, 55vh, 600px); max-width: 500px; } /* Use previous settings */
}
@media only screen and (min-width: 1100px) {
  .cd-horizontal-timeline { margin: 4em auto; }
  .cd-horizontal-timeline .events-content h2 { font-size: 2rem; } /* Keep smaller */
  .cd-horizontal-timeline .events-content p { font-size: 1.1rem; } /* Keep smaller */
  .gallery img { height: clamp(400px, 60vh, 700px); } /* Larger on desktop */
}

/*------------------------------------*\
    #PRINT STYLES
\*------------------------------------*/
@media print {
  body { background-color: #fff; color: #000; font-size: 10pt; }
  .site-header, .site-footer, .dark-mode-toggle, .cd-timeline-navigation, .btn-jazbaa, .btn-jazbaa-secondary, .video-event-card video, #hero-canvas, #awaaz-bg-animation, #awaaz-lines-canvas, .carousel-fullscreen-nav, .department-card .card-icon, .vision-icon, #hero-watermark { display: none !important; }
  main, .container, .section-padding { padding: 0 !important; margin: 0 !important; max-width: 100%; }
  h1, h2, h3, h4, h5, h6 { color: #000 !important; }
  a { color: #000; text-decoration: underline; }
  .calendar-container, .cd-horizontal-timeline .events-content li, .department-card, .vision-content, .video-event-card { box-shadow: none; border: 1px solid #ccc; page-break-inside: avoid; background-color: #fff !important; color: #000 !important; }
  .department-card h3, .department-card p { color: #000 !important; }
  .hod-container, .member-container { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .profile-card.hod-card img { border-color: #ccc; }
  :root { --primary-color: #000; --secondary-color: #333; --text-color: #000; --text-muted: #333; --bg-color: #fff; --bg-secondary: #fff; }
  .iframe-container { padding-top: 0; height: auto; aspect-ratio: auto; border: 1px solid #ccc; }
  .iframe-container iframe { position: static; height: 500px; }
  .hero { min-height: 0; height: auto; padding: 1cm 0; background: none; }
  .carousel img { aspect-ratio: auto; height: 150px; }
  .cd-horizontal-timeline .timeline .events-wrapper { mask-image: none; -webkit-mask-image: none; }
  .gallery { display: grid; grid-template-columns: repeat(3, 1fr); overflow: visible; height: auto; }
  .gallery img { height: auto; max-width: 100%; scroll-snap-align: none; }
  .cd-horizontal-timeline .events-content li { position: relative !important; opacity: 1 !important; visibility: visible !important; page-break-inside: avoid !important; transform: none !important; animation: none !important; }
  .cd-horizontal-timeline .events-content { height: auto !important; }
}