/* ==========================================================================
   Muttichur Muslim Jama'at (MMJ) - Premium Modern Styling
   ========================================================================== */

/* 1. Imports & Core Config */


:root {
    /* Color Palette - Premium Organic Theme */
    --primary: #0a2d21;         /* Organic Deep Forest Green */
    --primary-light: #164e3b;   /* Glowing Forest Green */
    --primary-glow: rgba(10, 45, 33, 0.08);
    
    --accent: #b25e38;          /* Organic Warm Terracotta Clay */
    --accent-light: #d67c52;    /* Soft Terracotta Orange */
    --accent-glow: rgba(178, 94, 56, 0.15);
    
    --gold: #dfb15b;            /* Radiant Imperial Gold */
    --gold-light: #f4c462;      /* Soft Sunlit Gold */
    --gold-glow: rgba(223, 177, 91, 0.25);
    
    --success: #1b5e20;
    --warning: #b25e38;
    --danger: #b71c1c;

    /* Light Theme (Default) - Beautiful Organic Soft Sage-Green Base */
    --bg: #f2f6f3;              /* Organic Soft Sage/Mint-Linen Green */
    --surface: #e5ece6;         /* Deeper Tea-Green Surface for Cards */
    --surface-glass: rgba(242, 246, 243, 0.82);
    --border: rgba(10, 45, 33, 0.08);
    --text: #081a13;
    --text-muted: #41554c;
    --shadow: 0 16px 36px -12px rgba(10, 45, 33, 0.05), 0 4px 12px rgba(10, 45, 33, 0.02);
    --glass-blur: blur(20px);
}

/* Dark Theme Variables - Rich Midnight Forest Green */
[data-theme="dark"] {
    --bg: #030d0a;
    --surface: #071913;
    --surface-glass: rgba(7, 25, 19, 0.85);
    --border: rgba(253, 251, 247, 0.06);
    --text: #f3f7f5;
    --text-muted: #8ca398;
    --shadow: 0 20px 50px -15px rgba(0, 0, 0, 0.7);
    --primary-glow: rgba(223, 177, 91, 0.06);
    --accent: #d67c52;
    --accent-light: #dfb15b;
}

/* 1.2 Tech Light Theme Variables - Dynamic Modern & Technology */
[data-theme="tech-light"] {
    --primary: #0d9488;         /* Dynamic Tech Teal */
    --primary-light: #14b8a6;   /* Glowing Neon Teal */
    --primary-glow: rgba(20, 184, 166, 0.08);
    
    --accent: #6366f1;          /* Digital Indigo */
    --accent-light: #818cf8;    /* Neon Indigo */
    --accent-glow: rgba(99, 102, 241, 0.15);
    
    --gold: #eab308;            /* Cyber Gold */
    --gold-light: #fde047;      /* Bright Yellow */
    --gold-glow: rgba(234, 179, 8, 0.2);

    --bg: #f8fafc;              /* Slate White / Clean Tech Base */
    --surface: #ffffff;         /* Pure white cards */
    --surface-glass: rgba(255, 255, 255, 0.75);
    --border: rgba(99, 102, 241, 0.12); /* Soft Indigo border */
    --text: #0f172a;            /* Deep Slate Text */
    --text-muted: #475569;      /* Slate Muted Text */
    --shadow: 0 20px 40px -15px rgba(99, 102, 241, 0.08), 0 4px 12px rgba(99, 102, 241, 0.03);
    --glass-blur: blur(20px);
}

/* 2. Global Resets & Typography */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg);
    color: var(--text);
    line-height: 1.6;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.02em;
}

/* 3. Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

@keyframes pulse-glow {
    0% { box-shadow: 0 0 0 0 rgba(217, 119, 6, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(217, 119, 6, 0); }
    100% { box-shadow: 0 0 0 0 rgba(217, 119, 6, 0); }
}

.animate-fade-in {
    animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-float {
    animation: float 6s ease-in-out infinite;
}

/* 4. Layout & Structure */
.mmj-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.mmj-container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* 5. Sleek Premium Header (Navbar) */
.mmj-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: var(--surface-glass);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-bottom: 1px solid var(--border);
    padding: 16px 0;
    box-shadow: var(--shadow);
}

.navbar-brand-custom {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.navbar-brand-logo {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 24px;
    font-weight: 800;
    border: 2px solid var(--accent);
    box-shadow: 0 4px 12px rgba(6, 78, 59, 0.2);
}

.brand-text-wrapper {
    display: flex;
    flex-direction: column;
}

.brand-title {
    font-size: 20px;
    font-weight: 800;
    color: var(--primary);
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.brand-subtitle {
    font-size: 11px;
    font-weight: 600;
    color: var(--accent);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.nav-links-custom {
    display: flex;
    align-items: center;
    gap: 6px;
}

.nav-link-custom {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.nav-link-custom:hover, .nav-link-custom.active {
    color: var(--primary);
    background-color: var(--primary-glow);
}

.btn-donate-nav {
    background: linear-gradient(135deg, var(--accent), var(--accent-light));
    color: #ffffff !important;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 700;
    box-shadow: 0 4px 15px var(--accent-glow);
}

.btn-donate-nav:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(217, 119, 6, 0.4);
    background: linear-gradient(135deg, var(--accent-light), var(--accent));
}

/* Theme Toggle Button */
.btn-theme-toggle {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow);
    font-size: 13px;
}

.btn-theme-toggle:hover {
    background-color: var(--border);
    transform: rotate(15deg);
}

/* Header Flex Layout System */
.header-flex-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    gap: 16px;
    width: 100%;
}

.nav-links-custom {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 6px;
}

/* Mobile Toggle & Close Button Styles */
.btn-menu-toggle-mobile {
    display: none;
    background: var(--surface-glass);
    border: 1px solid var(--border);
    color: var(--text);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    box-shadow: var(--shadow);
    transition: all 0.2s ease;
}

.btn-menu-toggle-mobile:hover {
    background-color: var(--border);
    transform: scale(1.05);
}

.btn-menu-close-mobile {
    display: none;
    position: absolute;
    top: 20px;
    right: 20px;
    background: transparent;
    border: none;
    color: var(--text);
    font-size: 20px;
    cursor: pointer;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.btn-menu-close-mobile:hover {
    background-color: var(--border);
    color: var(--danger) !important;
}

/* Mobile Menu Backdrop Overlay */
.mobile-menu-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(3, 13, 10, 0.4); /* Sage-Midnight tint */
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.mobile-menu-backdrop.active {
    opacity: 1;
    pointer-events: auto;
}

/* Smart Desktop & Tablet Centering Alignment */
@media (max-width: 1024px) {
    .btn-menu-toggle-mobile {
        display: flex;
    }
    
    .btn-menu-close-mobile {
        display: flex;
    }
    
    .header-flex-container {
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 16px !important;
    }
    
    .navbar-brand-custom {
        justify-content: flex-start !important;
        margin: 0 !important;
    }
    
    .nav-links-custom {
        position: fixed !important;
        top: 0 !important;
        left: -320px !important; /* Drawer offscreen to the left */
        width: 290px !important;
        height: 100vh !important;
        background: var(--surface-glass) !important;
        backdrop-filter: var(--glass-blur) !important;
        -webkit-backdrop-filter: var(--glass-blur) !important;
        border-right: 1px solid var(--border) !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        padding: 80px 20px 40px 20px !important;
        gap: 10px !important;
        z-index: 2000 !important;
        transition: left 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
        box-shadow: 0 0 50px rgba(0, 0, 0, 0.15) !important;
        flex-wrap: nowrap !important;
        overflow-y: auto !important;
    }
    
    .nav-links-custom.open {
        left: 0 !important; /* Slide drawer in from left! */
    }
    
    .nav-link-custom {
        width: 100% !important;
        font-size: 14px !important;
        padding: 10px 16px !important;
        border-radius: 8px !important;
        text-align: left !important;
        box-sizing: border-box !important;
    }
    
    .btn-donate-nav {
        margin-top: 8px !important;
        text-align: center !important;
    }
    
    .lang-switcher-glass {
        margin: 12px 0 0 0 !important;
        width: 100% !important;
        justify-content: center !important;
        padding: 6px 12px !important;
        box-sizing: border-box !important;
    }
    
    .btn-theme-toggle {
        width: 100% !important;
        border-radius: 8px !important;
        height: 38px !important;
        margin-top: 4px !important;
    }
}

/* Compact layout for medium desktops/laptops to keep header on a single row */
@media (min-width: 1025px) and (max-width: 1280px) {
    .mmj-header {
        padding: 10px 0;
    }
    .header-flex-container {
        gap: 8px !important;
    }
    .navbar-brand-logo-img {
        width: 38px !important;
        height: 38px !important;
    }
    .brand-title {
        font-size: 16px !important;
    }
    .brand-subtitle {
        font-size: 9px !important;
    }
    .navbar-brand-custom {
        gap: 6px !important;
    }
    .nav-links-custom {
        gap: 3px !important;
    }
    .nav-link-custom {
        font-size: 11px !important;
        padding: 4px 6px !important;
    }
    .btn-donate-nav {
        padding: 5px 10px !important;
    }
    .lang-switcher-glass {
        padding: 2px 4px !important;
        margin-right: 2px !important;
    }
    .btn-lang-toggle {
        padding: 3px 5px !important;
        font-size: 9.5px !important;
    }
    .btn-theme-toggle {
        width: 28px !important;
        height: 28px !important;
        font-size: 10px !important;
    }
}

/* 6. Immersive Hero Section */
.hero-section {
    background: linear-gradient(135deg, rgba(6, 78, 59, 0.03) 0%, rgba(217, 119, 6, 0.03) 100%), var(--surface);
    padding: 100px 0 80px 0;
    position: relative;
    border-bottom: 1px solid var(--border);
    overflow: hidden;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(6, 78, 59, 0.08) 0%, rgba(0,0,0,0) 70%);
    border-radius: 50%;
    z-index: 0;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 48px;
    align-items: center;
    position: relative;
    z-index: 1;
}

@media (max-width: 991px) {
    .hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 40px;
    }
}

.hero-tag {
    background-color: var(--primary-glow);
    color: var(--primary);
    padding: 8px 16px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    border: 1px solid rgba(6, 78, 59, 0.1);
}

.hero-title {
    font-size: 54px;
    line-height: 1.1;
    font-weight: 800;
    margin-bottom: 24px;
}

.hero-title span {
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-desc {
    font-size: 18px;
    color: var(--text-muted);
    margin-bottom: 40px;
    max-width: 600px;
}

@media (max-width: 991px) {
    .hero-desc {
        margin: 0 auto 32px auto;
    }
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

@media (max-width: 576px) {
    .hero-actions {
        flex-direction: column;
        width: 100%;
    }
    .hero-actions .btn-premium {
        width: 100%;
        justify-content: center;
    }
}

.btn-premium {
    padding: 14px 32px;
    border-radius: 30px; /* Gorgeous organic pill shape */
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 10px rgba(10, 45, 33, 0.05);
}

.btn-premium-primary {
    background: linear-gradient(135deg, var(--accent), var(--accent-light)); /* Terracotta gradient base */
    color: #ffffff !important;
    box-shadow: 0 8px 24px var(--accent-glow), 0 2px 4px rgba(178, 94, 56, 0.15);
    border: none;
}

.btn-premium-primary:hover {
    transform: translateY(-3px);
    background: linear-gradient(135deg, var(--accent-light), var(--accent));
    box-shadow: 0 12px 30px rgba(178, 94, 56, 0.35);
}

.btn-premium-secondary {
    background-color: var(--surface);
    color: var(--primary) !important;
    border: 1.5px solid var(--border);
    box-shadow: var(--shadow);
}

.btn-premium-secondary:hover {
    background-color: var(--border);
    border-color: rgba(10, 45, 33, 0.15);
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(10, 45, 33, 0.08);
}

/* 7. Interactive Prayer Widget */
.prayer-widget-card {
    background: var(--surface-glass);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 20px;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 420px;
    margin: 0 auto;
}

.prayer-header-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border);
    padding-bottom: 10px;
}

.prayer-widget-title {
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--primary);
}

.prayer-date-badge {
    background-color: var(--border);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 6px;
}

.prayer-countdown-box {
    background: linear-gradient(135deg, rgba(6, 78, 59, 0.04) 0%, rgba(217, 119, 6, 0.04) 100%);
    border: 1px solid rgba(217, 119, 6, 0.25);
    padding: 10px;
    border-radius: 12px;
    text-align: center;
}

.prayer-countdown-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--accent);
    letter-spacing: 0.05em;
    margin-bottom: 2px;
}

.prayer-countdown-time {
    font-family: 'Outfit', sans-serif;
    font-size: 22px;
    font-weight: 800;
    color: var(--primary);
}

.prayer-times-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.prayer-time-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10px 6px;
    border-radius: 10px;
    background-color: var(--surface);
    border: 1px solid var(--border);
    transition: all 0.2s ease;
    gap: 2px;
    min-width: 0;
}

.prayer-time-row.active {
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    color: #ffffff;
    border-color: var(--primary);
    box-shadow: 0 8px 20px var(--primary-glow);
    animation: pulse-glow 2s infinite;
}

.prayer-time-row.active .prayer-name,
.prayer-time-row.active .prayer-val {
    color: #ffffff;
}

.prayer-name {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.prayer-val {
    font-size: 14px;
    font-weight: 800;
    color: var(--text);
}

/* 8. Stats & Metrics Showcase */
.stats-section {
    background-color: var(--primary);
    color: #ffffff;
    padding: 60px 0;
    border-radius: 32px;
    margin: 40px auto;
    position: relative;
    z-index: 2;
    box-shadow: 0 20px 40px rgba(6, 78, 59, 0.25);
    background-image: radial-gradient(circle at top right, rgba(217, 119, 6, 0.15) 0%, transparent 60%);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    text-align: center;
}

@media (max-width: 991px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }
}

@media (max-width: 576px) {
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

.stat-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.stat-number {
    font-family: 'Outfit', sans-serif;
    font-size: 48px;
    font-weight: 800;
    color: var(--accent-light);
    line-height: 1;
}

.stat-label {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* 9. Premium Card Containers */
.section-header {
    text-align: center;
    margin-bottom: 50px;
}

.section-tag {
    color: var(--accent);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 8px;
    display: block;
}

.section-title {
    font-size: 38px;
    font-weight: 800;
}

.glass-card {
    background: var(--surface-glass);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 30px;
    box-shadow: var(--shadow);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

.glass-card:hover {
    transform: translateY(-8px);
    border-color: rgba(6, 78, 59, 0.15);
    box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.12);
}

.glass-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.glass-card:hover::before {
    opacity: 1;
}

/* Services Grid */
.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 60px;
}

@media (max-width: 991px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .services-grid {
        grid-template-columns: 1fr;
    }
}

.service-icon {
    width: 60px;
    height: 60px;
    background-color: var(--primary-glow);
    color: var(--primary);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin-bottom: 24px;
    border: 1px solid rgba(6, 78, 59, 0.08);
}

.service-card-title {
    font-size: 20px;
    margin-bottom: 12px;
}

.service-card-desc {
    color: var(--text-muted);
    font-size: 14px;
    margin-bottom: 20px;
}

.btn-card-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-size: 14px;
    color: var(--primary);
    text-decoration: none;
}

.btn-card-link:hover {
    color: var(--accent);
}

/* 10. Multi-Step Wizard Forms */
.wizard-form-container {
    max-width: 720px;
    margin: 40px auto;
}

.wizard-steps-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    position: relative;
}

.wizard-steps-header::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--border);
    z-index: 0;
    transform: translateY(-50%);
}

.wizard-step-node {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--surface);
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--text-muted);
    z-index: 1;
    position: relative;
    transition: all 0.3s ease;
}

.wizard-step-node.active {
    background-color: var(--primary);
    border-color: var(--primary);
    color: #ffffff;
    box-shadow: 0 4px 15px var(--primary-glow);
}

.wizard-step-node.completed {
    background-color: var(--success);
    border-color: var(--success);
    color: #ffffff;
}

.form-group-custom {
    margin-bottom: 24px;
}

.form-label-custom {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 8px;
}

.form-input-custom {
    width: 100%;
    padding: 14px 18px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background-color: var(--surface);
    color: var(--text);
    font-family: inherit;
    font-size: 15px;
    transition: all 0.2s ease;
}

.form-input-custom:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px var(--primary-glow);
}

.form-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
}

/* 11. Announcements & Event Boards */
.board-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 30px;
    margin-bottom: 80px;
}

@media (max-width: 991px) {
    .board-grid {
        grid-template-columns: 1fr;
    }
}

.notice-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.notice-item {
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    gap: 20px;
    align-items: flex-start;
    transition: all 0.2s ease;
}

.notice-item:hover {
    transform: translateX(6px);
    border-color: var(--primary);
}

.notice-badge-priority {
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.notice-badge-priority.high {
    background-color: rgba(239, 68, 68, 0.1);
    color: var(--danger);
}

.notice-badge-priority.medium {
    background-color: rgba(245, 158, 11, 0.1);
    color: var(--warning);
}

.notice-badge-priority.low {
    background-color: rgba(16, 185, 129, 0.1);
    color: var(--success);
}

/* 12. Elegant Footer */
.mmj-footer {
    background-color: #031c15; /* Extremely dark deep emerald */
    color: rgba(255, 255, 255, 0.7);
    padding: 80px 0 30px 0;
    margin-top: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr repeat(3, 1fr);
    gap: 40px;
    margin-bottom: 60px;
}

@media (max-width: 991px) {
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .footer-grid {
        grid-template-columns: 1fr;
    }
}

.footer-brand {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.footer-brand-title {
    font-size: 24px;
    font-weight: 800;
    color: #ffffff;
}

.footer-links-title {
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 20px;
}

.footer-links-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-link {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s ease;
}

.footer-link:hover {
    color: var(--accent-light);
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 30px;
    font-size: 13px;
}

@media (max-width: 768px) {
    .footer-bottom {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }
}

/* 13. Premium Success Page Styles */
.success-card {
    text-align: center;
    max-width: 560px;
    margin: 80px auto;
    padding: 50px 40px;
}

.success-icon-wrapper {
    width: 80px;
    height: 80px;
    background-color: rgba(16, 185, 129, 0.1);
    color: var(--success);
    font-size: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 30px auto;
    border: 2px solid rgba(16, 185, 129, 0.2);
    box-shadow: 0 10px 25px rgba(16, 185, 129, 0.15);
}

/* 14. Clean Hide for Default Odoo Website Layout Elements */
#wrapwrap > header[data-name="Header"],
#wrapwrap > footer[data-name="Footer"],
header[data-name="Header"],
footer[data-name="Footer"] {
    display: none !important;
}

/* ==========================================================================
   15. Advanced Premium Animated Hero, Multilingual & Data Table Styling
   ========================================================================== */

/* Multilingual Toggle Selector Rules */
body.lang-ml .lang-en {
    display: none !important;
}
body.lang-ml .lang-ml {
    display: inline-block !important;
    animation: fadeIn 0.4s ease-out forwards;
}
body:not(.lang-ml) .lang-ml {
    display: none !important;
}
body:not(.lang-ml) .lang-en {
    display: inline-block !important;
    animation: fadeIn 0.4s ease-out forwards;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(2px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Lang Switcher Glass Pill Box */
.lang-switcher-glass {
    display: inline-flex;
    align-items: center;
    background: rgba(6, 78, 59, 0.08);
    border: 1px solid rgba(6, 78, 59, 0.15);
    padding: 3px 6px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 700;
    margin-right: 8px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
}

.btn-lang-toggle {
    background: transparent;
    border: none;
    color: var(--text-muted);
    padding: 4px 10px;
    border-radius: 100px;
    cursor: pointer;
    font-weight: 700;
    font-size: 11px;
    transition: all 0.2s ease;
}

.btn-lang-toggle.active {
    background-color: var(--primary);
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(6, 78, 59, 0.2);
}

.lang-divider {
    color: rgba(6, 78, 59, 0.2);
    margin: 0 4px;
    font-size: 10px;
}

/* Premium Animated Mesh Gradient Hero Background */
.premium-mesh-hero {
    background: linear-gradient(125deg, #022c22 0%, #064e3b 40%, #1e3a1f 70%, #451a03 100%);
    background-size: 300% 300%;
    animation: meshMovement 20s ease infinite;
    color: #ffffff !important;
    position: relative;
    padding: 120px 0 100px 0;
}

.premium-mesh-hero .hero-title, 
.premium-mesh-hero .hero-desc, 
.premium-mesh-hero .hero-greeting {
    color: #ffffff !important;
}

.premium-mesh-hero .hero-title span {
    background: linear-gradient(135deg, var(--accent-light), #fcd34d);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

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

/* Mosque Silhouette Overlay */
.premium-mosque-silhouette {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 120px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><path d="M0,120 L1200,120 L1200,90 C1150,90 1120,60 1100,50 C1080,40 1060,50 1050,60 C1040,70 1020,90 980,90 C940,90 920,50 900,40 C880,30 860,10 840,10 C820,10 800,30 780,40 C760,50 740,90 700,90 C660,90 640,60 620,50 C600,40 580,50 570,60 C560,70 540,90 500,90 C460,90 440,40 420,30 C400,20 380,10 360,10 C340,10 320,20 300,30 C280,40 260,90 220,90 C180,90 160,60 140,50 C120,40 100,50 90,60 C80,70 60,90 20,90 C10,90 0,95 0,95 Z" fill="rgba(6, 78, 59, 0.15)"/></svg>');
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 1;
    pointer-events: none;
}

/* Hadith / Daily Content Card Styling */
.premium-daily-content-card {
    border: 1px solid rgba(217, 119, 6, 0.3);
    background: var(--surface-glass);
    box-shadow: 0 15px 40px rgba(217, 119, 6, 0.08);
}

.daily-content-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border);
    padding-bottom: 12px;
}

.badge-daily-type {
    background-color: var(--accent-glow);
    color: var(--accent);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 6px;
}

.arabic-script-text {
    font-family: 'Outfit', sans-serif;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.8;
    direction: rtl;
}

/* Premium Cemetery & Burial Registry Table */
.premium-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    background: var(--surface);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow);
}

.premium-table th {
    background-color: var(--primary);
    color: #ffffff;
    padding: 16px;
    font-weight: 700;
    text-align: left;
    font-size: 14px;
}

.premium-table td {
    padding: 16px;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
    color: var(--text);
}

.premium-table tr:hover {
    background-color: var(--primary-glow);
}

.badge-grave {
    background: linear-gradient(135deg, var(--accent), var(--accent-light));
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
    display: inline-block;
}

/* Source feed details from muttichurmahallu.online */
.info-strip {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px dashed var(--border);
}

.info-strip:last-child {
    border-bottom: none;
}

.strip-label {
    font-weight: 700;
    color: var(--primary);
    font-size: 14px;
}

.strip-value {
    color: var(--text-muted);
    font-size: 14px;
    text-align: right;
}

.premium-btn-hover {
    position: relative;
    overflow: hidden;
}

.premium-btn-hover::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150px;
    height: 150px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.5s ease;
}

.premium-btn-hover:hover::after {
    transform: translate(-50%, -50%) scale(1.5);
}

/* Mosque Hero Vector Calligraphy Artwork Positioning - Bell Method Sway & Float */
.hero-calligraphy-artwork {
    position: absolute;
    top: 55%;
    left: 8%;
    width: 450px;
    height: 450px;
    transform: translateY(-50%);
    z-index: 1;
    opacity: 0.38; /* Highly visible grand vector */
    pointer-events: none;
    animation: bellSway 10s ease-in-out infinite;
    filter: drop-shadow(0 0 25px rgba(251, 191, 36, 0.45)); /* Gorgeous gold glow backdrop */
}

@keyframes bellSway {
    0% { transform: translateY(-50%) rotate(-1.5deg); }
    50% { transform: translateY(-52%) rotate(1.5deg); }
    100% { transform: translateY(-50%) rotate(-1.5deg); }
}

@media (max-width: 991px) {
    .hero-calligraphy-artwork {
        left: 50%;
        top: 30%;
        transform: translate(-50%, -50%);
        width: 300px;
        height: 300px;
        animation: bellSwayMobile 10s ease-in-out infinite;
    }
    @keyframes bellSwayMobile {
        0% { transform: translate(-50%, -50%) rotate(-1.5deg); }
        50% { transform: translate(-50%, -52%) rotate(1.5deg); }
        100% { transform: translate(-50%, -50%) rotate(-1.5deg); }
    }
}

/* Ultra-Premium Footer Enhancements */
.premium-styled-footer {
    border-top: 4px solid transparent;
    border-image: linear-gradient(90deg, var(--primary) 0%, var(--accent) 50%, var(--primary-light) 100%) 1;
    background-color: #02130f !important;
    position: relative;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.15);
}

.premium-styled-footer .footer-links-title {
    border-bottom: 2px solid var(--accent);
    padding-bottom: 8px;
    display: inline-block;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Premium Connection Circles */
.social-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(217, 119, 6, 0.3);
    background-color: rgba(6, 78, 59, 0.25);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-light) !important;
    font-size: 16px;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.social-circle:hover {
    background-color: var(--accent);
    color: #ffffff !important;
    border-color: var(--accent);
    transform: translateY(-5px) rotate(360deg);
    box-shadow: 0 8px 20px rgba(217, 119, 6, 0.4);
}

.social-circle i {
    transition: transform 0.4s ease;
}

.social-circle:hover i {
    transform: scale(1.1);
}

/* Community Hub Custom Badges & Table formatting */
.badge-grave {
    background: linear-gradient(135deg, var(--accent), var(--accent-light));
    color: #ffffff;
    font-weight: 700;
}

.premium-source-card {
    border-left: 5px solid var(--accent) !important;
}

/* Custom Circular Brand Logo Img */
.navbar-brand-logo-img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--accent);
    box-shadow: 0 4px 12px rgba(6, 78, 59, 0.25);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.navbar-brand-logo-img:hover {
    transform: scale(1.1) rotate(10deg);
    border-color: var(--accent-light);
    box-shadow: 0 6px 16px rgba(217, 119, 6, 0.4);
}

/* Floating Gold Particle Container */
#particles-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 2; /* In front of silhouette but behind content which has z-index 10 */
}
.particle {
    will-change: transform, opacity;
}

/* Mahallu Committee Card Grid styling with gold accent frame */
.committee-member-card {
    border-radius: 24px !important;
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    box-shadow: 0 10px 25px -10px rgba(10, 45, 33, 0.04), var(--shadow) !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.committee-member-card:hover {
    transform: translateY(-8px) scale(1.03) !important;
    border-color: var(--accent) !important;
    box-shadow: 0 20px 45px -10px var(--accent-glow), var(--shadow) !important;
}
.member-avatar-fallback {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(10, 45, 33, 0.05), rgba(10, 45, 33, 0.15));
    border: 3px solid var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: var(--primary);
    font-weight: 800;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    margin: 0 auto 12px auto;
}
.committee-member-card:hover .member-avatar-fallback {
    transform: scale(1.08) rotate(5deg);
    border-color: var(--accent-light);
    box-shadow: 0 0 15px var(--accent-glow);
}

/* Malayalam Language Alignment & Premium Beautification */
body.lang-ml {
    font-family: 'Manjari', 'Inter', sans-serif !important;
    word-break: keep-all; /* prevent awkward breaks in words */
}
body.lang-ml h1, body.lang-ml h2, body.lang-ml h3, body.lang-ml h4, body.lang-ml h5, body.lang-ml h6 {
    font-family: 'Gayathri', 'Outfit', sans-serif !important;
    line-height: 1.4 !important;
    letter-spacing: normal !important;
}
body.lang-ml .hero-title {
    font-size: 42px !important;
    line-height: 1.4 !important;
    font-weight: 800;
}
body.lang-ml .hero-desc {
    font-size: 16px !important;
    line-height: 1.8 !important;
}
body.lang-ml .hero-greeting {
    font-size: 20px !important;
    font-weight: 700;
}
body.lang-ml .brand-title {
    font-family: 'Manjari', sans-serif !important;
    font-size: 17px !important;
    font-weight: 700 !important;
}
body.lang-ml .brand-subtitle {
    font-family: 'Manjari', sans-serif !important;
    font-size: 10px !important;
    letter-spacing: normal !important;
}
body.lang-ml .nav-link-custom {
    font-size: 13px !important;
    padding: 6px 12px !important;
}
body.lang-ml .btn-donate-nav {
    font-size: 13px !important;
    padding: 8px 14px !important;
}
body.lang-ml .stat-label {
    font-size: 12px !important;
    font-family: 'Manjari', sans-serif !important;
    letter-spacing: normal !important;
    line-height: 1.4 !important;
}
body.lang-ml .btn-premium {
    font-size: 14px !important;
    font-family: 'Manjari', sans-serif !important;
    font-weight: 700 !important;
}
body.lang-ml .service-card-title {
    font-size: 18px !important;
    font-family: 'Gayathri', sans-serif !important;
}
body.lang-ml .service-card-desc {
    font-size: 13px !important;
    line-height: 1.6 !important;
}
body.lang-ml .badge-daily-type, 
body.lang-ml .prayer-countdown-label,
body.lang-ml .prayer-date-badge {
    font-family: 'Manjari', sans-serif !important;
    font-size: 10px !important;
    letter-spacing: normal !important;
}
body.lang-ml .committee-member-card h4 {
    font-family: 'Gayathri', sans-serif !important;
    font-size: 15px !important;
}
body.lang-ml .committee-member-card p {
    font-family: 'Manjari', sans-serif !important;
    font-size: 13px !important;
}
body.lang-ml .footer-brand-title {
    font-size: 20px !important;
    font-family: 'Gayathri', sans-serif !important;
}
body.lang-ml .footer-links-title {
    font-size: 14px !important;
    font-family: 'Gayathri', sans-serif !important;
    letter-spacing: normal !important;
}
body.lang-ml .footer-link {
    font-size: 13px !important;
    font-family: 'Manjari', sans-serif !important;
}
body.lang-ml .footer-bottom {
    font-size: 12px !important;
    font-family: 'Manjari', sans-serif !important;
}
body.lang-ml .daily-content-banner span {
    font-family: 'Manjari', sans-serif !important;
}
body.lang-ml .translation-text {
    font-family: 'Manjari', sans-serif !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
}
body.lang-ml .btn-card-link {
    font-family: 'Manjari', sans-serif !important;
    font-size: 13px !important;
}
body.lang-ml .section-tag {
    font-family: 'Manjari', sans-serif !important;
    font-size: 12px !important;
    letter-spacing: 0.05em !important;
}
body.lang-ml .section-title {
    font-size: 30px !important;
    line-height: 1.4 !important;
}

/* Premium Coverpage Logo Hover Micro-Animations */
.premium-hero-logo-img {
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.premium-hero-logo-img:hover {
    transform: scale(1.08) rotate(5deg) !important;
    border-color: var(--accent-light) !important;
    box-shadow: 0 0 30px rgba(251, 191, 36, 0.6) !important;
}

/* 16. Institutional Showcase Cards */
.institutions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
    margin-top: 30px;
}

.institution-card-link {
    text-decoration: none;
    color: inherit;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

.institution-card {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: 24px !important; /* Premium rounded organic corners */
    padding: 16px !important; /* Elegant padded envelope */
    box-shadow: 0 10px 30px -10px rgba(10, 45, 33, 0.04), var(--shadow) !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: flex;
    flex-direction: column;
    gap: 18px;
    height: 100% !important;
    min-height: 400px;
    overflow: hidden;
    justify-content: space-between;
}

.institution-card:hover {
    transform: translateY(-8px) scale(1.02) !important;
    border-color: var(--accent) !important;
    box-shadow: 0 20px 45px var(--accent-glow), var(--shadow) !important;
}

/* Custom Card Image Header Styles - Rennale Organic padded style */
.institution-card-image-wrapper {
    position: relative;
    width: 100%;
    height: 170px;
    overflow: hidden;
    border-radius: 18px; /* Rounded inner image plate */
    border: 1px solid var(--border);
    transition: all 0.3s ease;
}

.institution-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.institution-card:hover .institution-card-img {
    transform: scale(1.06);
}

.institution-card-img-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.institution-card:hover .institution-card-img-placeholder {
    transform: scale(1.06);
}

.placeholder-icon {
    font-size: 50px;
    color: rgba(255, 255, 255, 0.3);
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.15));
    transition: all 0.4s ease;
}

.institution-card:hover .placeholder-icon {
    color: rgba(255, 255, 255, 0.5);
    transform: scale(1.08) rotate(3deg);
}

.institution-card-content {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 0 8px 8px 8px; /* Elegant text spacing */
    flex-grow: 1;
    justify-content: space-between;
}

.institution-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.institution-icon {
    width: 42px;
    height: 42px;
    background-color: var(--primary-glow);
    color: var(--primary);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    border: 1px solid rgba(10, 45, 33, 0.08);
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.institution-card:hover .institution-icon {
    background-color: var(--accent-glow);
    color: var(--accent);
    border-color: rgba(178, 94, 56, 0.2);
    transform: rotate(5deg) scale(1.05);
}

.institution-title-custom {
    font-size: 17px;
    font-weight: 800;
    color: var(--primary);
    margin: 0;
    line-height: 1.35;
}

.institution-desc {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.65;
    margin: 0;
    flex-grow: 1;
}

.institution-tag-pill {
    background-color: rgba(178, 94, 56, 0.06);
    color: var(--accent);
    font-size: 9px;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: 100px; /* Symmetrical pill tag */
    text-transform: uppercase;
    align-self: flex-start;
    letter-spacing: 0.06em;
    border: 1px solid rgba(178, 94, 56, 0.12);
}

.institution-card:hover .institution-tag-pill {
    background-color: var(--primary);
    color: #ffffff;
    border-color: var(--primary);
}

/* Malayalam institution text scaling */
body.lang-ml .institution-title-custom {
    font-family: 'Gayathri', sans-serif !important;
    font-size: 15px !important;
}
body.lang-ml .institution-desc {
    font-family: 'Manjari', sans-serif !important;
    font-size: 12px !important;
}
body.lang-ml .institution-tag-pill {
    font-family: 'Manjari', sans-serif !important;
    font-size: 9px !important;
}

/* ==========================================================================
   17. Hanging Islamic Lanterns, Swaying Animations & Gold split-layout
   ========================================================================== */

.hanging-lanterns {
    position: absolute;
    top: 0;
    width: 140px;
    height: 320px;
    z-index: 5;
    pointer-events: none;
    opacity: 0.95;
    filter: drop-shadow(0 0 20px rgba(223, 177, 91, 0.45)) drop-shadow(0 4px 15px rgba(0, 0, 0, 0.3));
}

.hanging-lanterns.left {
    left: 30px;
    transform-origin: top center;
    animation: swayLeft 10s ease-in-out infinite alternate;
}

.hanging-lanterns.right {
    right: 30px;
    transform-origin: top center;
    animation: swayRight 11s ease-in-out infinite alternate;
}

@keyframes swayLeft {
    0% { transform: rotate(-3deg); }
    100% { transform: rotate(3deg); }
}

@keyframes swayRight {
    0% { transform: rotate(3deg); }
    100% { transform: rotate(-3deg); }
}

@media (max-width: 768px) {
    .hanging-lanterns {
        width: 80px;
        height: 200px;
        opacity: 0.7;
        filter: drop-shadow(0 0 10px rgba(223, 177, 91, 0.3));
    }
    .hanging-lanterns.left {
        left: 10px;
    }
    .hanging-lanterns.right {
        right: 10px;
    }
}

/* Floating Organic Leaf Overlay Styles - Inspired by Reference Image */
.organic-leaf-overlay {
    position: absolute;
    z-index: 3;
    pointer-events: none;
    opacity: 0.12;
    transition: opacity 0.5s ease;
}
.organic-leaf-overlay.top-left {
    top: -40px;
    left: -45px;
    transform: rotate(35deg);
    animation: leafFloat1 20s ease-in-out infinite alternate;
}
.organic-leaf-overlay.bottom-right {
    bottom: -40px;
    right: -45px;
    transform: rotate(-145deg);
    animation: leafFloat2 24s ease-in-out infinite alternate;
}
.organic-leaf-overlay.grid-bg-left {
    top: 25%;
    left: -150px;
    opacity: 0.035;
    transform: scale(2) rotate(15deg);
}
.organic-leaf-overlay.grid-bg-right {
    bottom: 20%;
    right: -150px;
    opacity: 0.035;
    transform: scale(2) rotate(-35deg);
}

@keyframes leafFloat1 {
    0% { transform: rotate(35deg) translate(0, 0); }
    100% { transform: rotate(38deg) translate(10px, 15px); }
}

@keyframes leafFloat2 {
    0% { transform: rotate(-145deg) translate(0, 0); }
    100% { transform: rotate(-142deg) translate(-10px, -15px); }
}

/* Mosque silhouette wave container at bottom of coverpage */
.landing-hero-bottom-divider {
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    z-index: 4;
}

/* Welcome split-layout styling inspired by Shaha Islamic Center */
.landing-welcome-split {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 40px;
    margin: 80px auto;
    align-items: stretch;
}

@media (max-width: 991px) {
    .landing-welcome-split {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

/* Left Column: beautiful organic earthy prayer times card */
.welcome-gold-prayer-card {
    background: var(--surface) !important;
    border: 1.5px solid var(--border) !important;
    border-radius: 24px !important;
    padding: 35px 30px !important;
    box-shadow: 0 20px 40px -15px rgba(10, 45, 33, 0.05), var(--shadow) !important;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.welcome-gold-prayer-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--accent) 0%, var(--gold) 50%, var(--accent) 100%);
}

.welcome-gold-prayer-card .prayer-widget-title {
    color: var(--primary) !important;
    font-size: 20px !important;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 2px solid var(--border);
    padding-bottom: 12px;
    margin-bottom: 20px;
    text-align: center;
}

.welcome-gold-prayer-card .prayer-time-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 11px 16px;
    border-radius: 12px;
    background: rgba(10, 45, 33, 0.02);
    border: 1px solid var(--border);
    margin-bottom: 8px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.welcome-gold-prayer-card .prayer-time-row:hover {
    border-color: var(--accent-light);
    background: rgba(178, 94, 56, 0.04);
    transform: translateX(5px);
}

.welcome-gold-prayer-card .prayer-time-row.active {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    box-shadow: 0 8px 20px var(--primary-glow);
}

.welcome-gold-prayer-card .prayer-time-row.active .prayer-name,
.welcome-gold-prayer-card .prayer-time-row.active .prayer-val {
    color: #ffffff !important;
}

.welcome-gold-prayer-card .prayer-name {
    font-weight: 700;
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.welcome-gold-prayer-card .prayer-val {
    font-weight: 800;
    font-size: 14px;
    color: var(--text);
}

/* Right Column: Faded mosque background and gold text highlights */
.welcome-text-card {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: 24px !important;
    padding: 40px !important;
    box-shadow: var(--shadow) !important;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Soft vector mosque fading on background */
.welcome-text-card::after {
    content: '';
    position: absolute;
    bottom: -10px;
    right: -10px;
    width: 280px;
    height: 280px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" width="100%" height="100%"><path d="M 120 380 L 380 380 M 150 380 L 150 320 Q 150 280 200 280 L 300 280 Q 350 280 350 320 L 350 380 M 200 280 L 200 230 Q 250 130 300 230 L 300 280" stroke="rgba(217, 119, 6, 0.04)" stroke-width="2.5" fill="none"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 1;
}

.welcome-text-card-content {
    position: relative;
    z-index: 2;
}

.welcome-split-tag {
    background-color: var(--accent-glow);
    color: var(--accent);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 6px;
    display: inline-block;
    border: 1px solid rgba(217, 119, 6, 0.15);
    margin-bottom: 16px;
    letter-spacing: 0.05em;
}

.welcome-split-title {
    font-size: 32px;
    font-weight: 800;
    color: var(--primary);
    line-height: 1.25;
    margin-bottom: 20px;
}

.welcome-split-desc {
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-muted);
    margin-bottom: 30px;
}

/* Malayalam overrides for welcome split */
body.lang-ml .welcome-split-title {
    font-family: 'Gayathri', sans-serif !important;
    font-size: 28px !important;
}
body.lang-ml .welcome-split-desc {
    font-family: 'Manjari', sans-serif !important;
    font-size: 14px !important;
}
body.lang-ml .welcome-gold-prayer-card .prayer-name {
    font-family: 'Manjari', sans-serif !important;
    font-size: 12px !important;
}

/* ==========================================================================
   18. Highly Premium Organic Visual Redesign Elements
   ========================================================================== */

/* Immersive Glassmorphic Navbar Overlay */
.mmj-header {
    background-color: rgba(242, 246, 243, 0.82) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border-bottom: 1.5px solid rgba(10, 45, 33, 0.05) !important;
    padding: 14px 0 !important;
    box-shadow: 0 10px 30px -10px rgba(10, 45, 33, 0.05) !important;
}
[data-theme="dark"] .mmj-header {
    background-color: rgba(7, 25, 19, 0.85) !important;
    border-bottom-color: rgba(253, 251, 247, 0.05) !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4) !important;
}

/* Symmetrical Calligraphy Badge Frame */
.hero-greeting {
    background: rgba(178, 94, 56, 0.09) !important;
    border: 1.5px solid rgba(223, 177, 91, 0.35) !important;
    padding: 8px 24px !important;
    border-radius: 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    box-shadow: 0 6px 20px rgba(223, 177, 91, 0.15) !important;
    color: var(--gold-light) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    margin: 0 auto 20px auto !important;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}
.hero-greeting::before, .hero-greeting::after {
    content: '✦' !important;
    color: var(--gold) !important;
    font-size: 12px !important;
    opacity: 0.95 !important;
}

/* Glass Refraction Shimmer Reflection */
.institution-card {
    position: relative !important;
    overflow: hidden !important;
}
.institution-card::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -150% !important;
    width: 60% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent) !important;
    transform: skewX(-20deg) !important;
    pointer-events: none !important;
    z-index: 3 !important;
}
.institution-card:hover::after {
    left: 200% !important;
    transition: left 0.9s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Floating Glassmorphic Calendar Badge - Inspired by Image 1 */
.hero-calendar-badge {
    position: absolute !important;
    top: 40px !important;
    right: 40px !important;
    background: rgba(10, 45, 33, 0.6) !important;
    border: 1px solid rgba(223, 177, 91, 0.22) !important;
    padding: 8px 20px !important;
    border-radius: 100px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    z-index: 15 !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.hero-calendar-badge:hover {
    transform: translateY(-2px) !important;
    border-color: var(--accent) !important;
    box-shadow: 0 12px 30px rgba(223, 177, 91, 0.15), 0 8px 24px rgba(0, 0, 0, 0.25) !important;
}
.calendar-dates {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    font-family: 'Outfit', sans-serif !important;
    letter-spacing: 0.02em !important;
}
.calendar-dates .gregorian-date {
    opacity: 0.95 !important;
}
.calendar-dates .hijri-date {
    color: var(--gold-light) !important;
    filter: drop-shadow(0 0 4px rgba(244, 196, 98, 0.2));
}
.calendar-dates .calendar-divider {
    color: rgba(255, 255, 255, 0.2) !important;
    font-weight: 300 !important;
}
@media (max-width: 768px) {
    .hero-calendar-badge {
        position: absolute !important;
        top: 24px !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        width: calc(100% - 48px) !important;
        max-width: 320px !important;
        justify-content: center !important;
        padding: 6px 16px !important;
    }
    .calendar-dates {
        font-size: 11px !important;
        gap: 6px !important;
    }
}

/* 12. Tech Light Visual Customizations & Interactive Overrides */
[data-theme="tech-light"] .premium-mesh-hero {
    background: linear-gradient(125deg, #f8fafc 0%, #f1f5f9 45%, #e2e8f0 70%, #dbeafe 100%) !important;
    background-size: 300% 300% !important;
    color: var(--text) !important;
    border-bottom: 1px solid var(--border) !important;
    box-shadow: inset 0 -30px 60px rgba(99, 102, 241, 0.02) !important;
}

[data-theme="tech-light"] .premium-mesh-hero .hero-title {
    color: var(--text) !important;
}

[data-theme="tech-light"] .premium-mesh-hero .hero-title span {
    background: linear-gradient(135deg, var(--primary), var(--accent)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

[data-theme="tech-light"] .premium-mesh-hero .hero-desc {
    color: var(--text-muted) !important;
}

[data-theme="tech-light"] .premium-mesh-hero .hero-greeting {
    color: var(--accent) !important;
}

/* Tech Light Calendar Badge Customizations */
[data-theme="tech-light"] .hero-calendar-badge {
    background: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid rgba(99, 102, 241, 0.2) !important;
    box-shadow: 0 10px 25px rgba(99, 102, 241, 0.08) !important;
}
[data-theme="tech-light"] .hero-calendar-badge i {
    color: var(--accent) !important;
}
[data-theme="tech-light"] .calendar-dates {
    color: var(--text) !important;
}
[data-theme="tech-light"] .calendar-dates .gregorian-date {
    color: var(--text) !important;
}
[data-theme="tech-light"] .calendar-dates .hijri-date {
    color: var(--primary) !important;
    filter: none !important;
}
[data-theme="tech-light"] .calendar-dates .calendar-divider {
    color: rgba(99, 102, 241, 0.3) !important;
}

/* Tech Light Interactive Parallax Overlays */
[data-theme="tech-light"] .hero-leaf-parallax-wrapper-left svg path:nth-child(1) {
    fill: var(--primary) !important;
    fill-opacity: 0.25 !important;
}
[data-theme="tech-light"] .hero-leaf-parallax-wrapper-left svg path:nth-child(2) {
    fill: var(--accent) !important;
    fill-opacity: 0.15 !important;
}
[data-theme="tech-light"] .hero-leaf-parallax-wrapper-left svg path:nth-child(3) {
    stroke: var(--accent-light) !important;
    stroke-opacity: 0.45 !important;
}
[data-theme="tech-light"] .hero-leaf-parallax-wrapper-left svg path:nth-child(4) {
    fill: var(--primary-light) !important;
    fill-opacity: 0.2 !important;
}
[data-theme="tech-light"] .hero-leaf-parallax-wrapper-left svg path:nth-child(5) {
    stroke: var(--primary-light) !important;
    stroke-opacity: 0.4 !important;
}
[data-theme="tech-light"] .hero-leaf-parallax-wrapper-right svg path:nth-child(1) {
    fill: var(--primary) !important;
    fill-opacity: 0.25 !important;
}
[data-theme="tech-light"] .hero-leaf-parallax-wrapper-right svg path:nth-child(2) {
    stroke: var(--accent) !important;
    stroke-opacity: 0.4 !important;
}

/* Tech Light Digital Lantern Glows */
[data-theme="tech-light"] .hanging-lanterns svg line {
    stroke: var(--accent-light) !important;
    stroke-opacity: 0.5 !important;
}
[data-theme="tech-light"] .hanging-lanterns svg path {
    fill: var(--accent) !important;
    filter: drop-shadow(0 0 4px rgba(99, 102, 241, 0.4)) !important;
}
[data-theme="tech-light"] .hanging-lanterns svg rect {
    stroke: var(--primary) !important;
    fill: rgba(20, 184, 166, 0.15) !important;
}
[data-theme="tech-light"] .hanging-lanterns svg circle {
    fill: var(--primary-light) !important;
    filter: drop-shadow(0 0 10px var(--primary-light)) !important;
}
[data-theme="tech-light"] .hero-calligraphy-artwork svg path {
    stroke-opacity: 0.45 !important;
}

.footer-developer-credit a:hover {
    color: var(--gold-light) !important;
    text-decoration: underline !important;
}

/* ==========================================================================
   Horizontal Premium Daily Prayer Bar (Compact Hero Design)
   ========================================================================== */
.hero-layout-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
    width: 100%;
}

.hero-text-content {
    max-width: 800px;
}

.prayer-horizontal-bar {
    display: flex;
    align-items: center;
    background: var(--surface-glass);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 16px 28px;
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 960px;
    gap: 32px;
    position: relative;
    overflow: hidden;
}

/* Animated shimmer overlay */
.prayer-horizontal-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: -50%;
    width: 200%;
    height: 100%;
    background: linear-gradient(to right, transparent, rgba(217, 119, 6, 0.05), transparent);
    transform: skewX(-25deg);
    animation: goldGlowShimmer 8s infinite linear;
    pointer-events: none;
}

@keyframes goldGlowShimmer {
    0% { left: -150%; }
    100% { left: 150%; }
}

.prayer-bar-countdown {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 160px;
    flex-shrink: 0;
}

.prayer-bar-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--accent);
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}

.prayer-bar-time {
    font-family: 'Outfit', sans-serif;
    font-size: 26px;
    font-weight: 800;
    color: var(--primary);
    line-height: 1;
}

.prayer-bar-divider {
    width: 1px;
    height: 48px;
    background-color: var(--border);
    flex-shrink: 0;
}

.prayer-bar-times {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-grow: 1;
    gap: 16px;
}

.prayer-bar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 16px;
    border-radius: 12px;
    transition: all 0.3s ease;
    flex: 1;
    min-width: 75px;
    border: 1px solid transparent;
}

.prayer-bar-item .p-name {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 2px;
}

.prayer-bar-item .p-time {
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
}

/* Active prayer styling inside horizontal bar */
.prayer-bar-item.active {
    background: linear-gradient(135deg, rgba(6, 78, 59, 0.05) 0%, rgba(217, 119, 6, 0.05) 100%);
    border: 1px solid rgba(217, 119, 6, 0.2);
    box-shadow: 0 4px 12px rgba(217, 119, 6, 0.06);
    transform: translateY(-2px);
}

.prayer-bar-item.active .p-name {
    color: var(--accent);
    font-weight: 700;
}

.prayer-bar-item.active .p-time {
    color: var(--primary);
    font-weight: 800;
}

/* Theme specifics */
[data-theme="dark"] .prayer-bar-item.active {
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.08) 0%, rgba(217, 119, 6, 0.08) 100%);
    border-color: rgba(217, 119, 6, 0.35);
}

[data-theme="tech-light"] .prayer-bar-item.active {
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.08) 0%, rgba(99, 102, 241, 0.08) 100%);
    border-color: rgba(99, 102, 241, 0.25);
}

/* Responsive adjustment for small screens */
@media (max-width: 991px) {
    .hero-layout-wrapper {
        align-items: center;
        text-align: center;
    }
    .prayer-horizontal-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
        padding: 20px;
    }
    .prayer-bar-countdown {
        align-items: center;
        min-width: unset;
    }
    .prayer-bar-divider {
        width: 100%;
        height: 1px;
    }
    .prayer-bar-times {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }
    .prayer-bar-item {
        padding: 6px 10px;
    }
}

@media (max-width: 480px) {
    .prayer-bar-times {
        grid-template-columns: repeat(2, 1fr);
    }
}