/* ============================================
   AALILAI TRUST - UI/UX ENHANCEMENTS
   Modern, Accessible, Performance-Optimized
   ============================================ */

/* ============================================
   1. ROOT VARIABLES & GLOBAL IMPROVEMENTS
   ============================================ */
:root {
    /* Color Palette - Enhanced */
    --primary-green: #16A34A;
    --primary-green-dark: #15803D;
    --primary-green-light: #4ADE80;
    --accent-yellow: #E2D110;
    --accent-green: #2CF633;
    --text-dark: #1a202c;
    --text-gray: #4a5568;
    --text-light: #718096;
    --bg-light: #f7fafc;
    --bg-white: #ffffff;
    --border-color: #e2e8f0;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

    /* Spacing */
    --section-padding: 60px;
    --section-padding-mobile: 40px;

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;
}

/* Smooth Scrolling */
/* Global improvements consolidated */

/* Focus Styles for Accessibility */
*:focus {
    outline: 2px solid var(--primary-green);
    outline-offset: 2px;
}

*:focus:not(:focus-visible) {
    outline: none;
}

/* Global typography reset removed to restore original scale */
.gradient-heading {
    background: linear-gradient(135deg, var(--accent-yellow) 0%, var(--accent-green) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
    display: inline-block;
}

/* ============================================
   3. BUTTON ENHANCEMENTS
   ============================================ */
.btn {
    font-weight: 600;
    padding: 8px 20px;
    border-radius: 4px;
    transition: all var(--transition-base);
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

.btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.btn:hover::before {
    width: 300px;
    height: 300px;
}

.btn-success,
.btn-common {
    background: linear-gradient(135deg, var(--primary-green) 0%, var(--primary-green-dark) 100%);
    color: white;
    box-shadow: var(--shadow-md);
}

.btn-success:hover,
.btn-common:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    background: linear-gradient(135deg, var(--primary-green-dark) 0%, var(--primary-green) 100%);
}

.btn-success:active,
.btn-common:active {
    transform: translateY(0);
}

.btn-outline-primary {
    border: 2px solid var(--primary-green);
    color: var(--primary-green);
    background: transparent;
}

.btn-outline-primary:hover {
    background: var(--primary-green);
    color: white;
    transform: translateY(-2px);
}

/* Donate Button Enhancement */
#donateBtn {
    background: linear-gradient(135deg, var(--primary-green) 0%, var(--primary-green-dark) 100%);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-base);
    box-shadow: var(--shadow-md);
    font-size: 14px;
}

#donateBtn:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: var(--shadow-lg);
}

#donateBtn:active {
    transform: translateY(0) scale(1);
}

/* ============================================
   4. CARD ENHANCEMENTS
   ============================================ */
.card,
.single-blog,
.single-team,
.single-project {
    border-radius: 8px;
    overflow: hidden;
    transition: all var(--transition-base);
    border: 1px solid var(--border-color);
    background: var(--bg-white);
}

.card:hover,
.single-blog:hover,
.single-team:hover,
.single-project:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
    border-color: var(--primary-green-light);
}

.card-img-top,
.blog-thumb img,
.team-thumb img,
.project-thumb img {
    transition: transform var(--transition-slow);
}

.card:hover .card-img-top,
.single-blog:hover .blog-thumb img,
.single-team:hover .team-thumb img,
.single-project:hover .project-thumb img {
    transform: scale(1.1);
}

/* ============================================
   5. SECTION ENHANCEMENTS
   ============================================ */
/* Global section padding removed to restore original scale */

.section-title {
    margin-bottom: 3rem;
}

.section-title h2 {
    font-size: 2rem;
    margin-bottom: 0.75rem;
}

@media (max-width: 768px) {
    .section-title h2 {
        font-size: 2rem;
    }
}

/* Story / Mission / Programs premium layouts */
.story-section {
    background: radial-gradient(circle at top left, rgba(22, 163, 74, 0.05), transparent 55%);
}

.story-media-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--shadow-xl);
}

.story-media-card img {
    transition: transform var(--transition-slow);
}

.story-media-card:hover img {
    transform: scale(1.05);
}

.story-media-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    padding: 1.75rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.65), transparent 55%);
    color: #f9fafb;
    font-size: 1.1rem;
    font-weight: 600;
}

.story-copy-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 2rem 2.25rem;
    box-shadow: var(--shadow-lg);
}

.mission-section {
    background: #f7fafc;
}

.mission-intro-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 2rem 2.5rem;
    box-shadow: var(--shadow-md);
}

.mission-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 1.75rem 1.9rem;
    box-shadow: var(--shadow-sm);
}

.programs-section {
    background: radial-gradient(circle at top right, rgba(34, 197, 94, 0.04), transparent 55%);
}

.programs-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 1.75rem 1.9rem;
    box-shadow: var(--shadow-sm);
}

@media (max-width: 768px) {

    .story-copy-card,
    .mission-intro-card,
    .mission-card,
    .programs-card {
        padding: 1.5rem 1.6rem;
    }
}

/* ============================================
   6. FORM ENHANCEMENTS
   ============================================ */
.form-control,
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
    border: 2px solid var(--border-color);
    border-radius: 8px;
    padding: 12px 16px;
    transition: all var(--transition-base);
    font-size: 15px;
    width: 100%;
}

.form-control:focus,
input:focus,
textarea:focus,
select:focus {
    border-color: var(--primary-green);
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.1);
    outline: none;
}

.form-control::placeholder {
    color: var(--text-light);
}

/* Required field styling */
.form-label::after,
label::after {
    /* Identify ' *' in text content logic is hard in pure CSS unless label has specific class or structure. 
       Usually prompts imply visually changing the asterisk if it exists. 
       However, if the asterisk is part of the text, we can't style just it. 
       But many frameworks put it in a span or pseudo element. 
       The prompt says "Required Field Asterisk Color".
       In blade files we saw: <label class="form-label">Image *</label>
       So the asterisk is text. We can't style partial text with CSS. 
       We need to assume or force a span, OR the user might mean forms that usually have a class like .required.
       Wait, let's look at the "Create" blade file again.
       <label class="form-label">Image *</label>
       It is plain text.
       I CANNOT change the color of just the * character using CSS if it's in the same text node.
       I MUST Wrap the * in a span in the CSS? No, that's impossible.
       Maybe the user assumes I will add a span? "Change all required field (*) indicators to red color".
       The cleanest way given constraints is to find-replace in Blade files or add a rule if it's already separated.
       BUT, most admin themes might use a pseudo element for required.
       Let's check if I can use a general rule or if I need to edit the blade files.
       The prompt says "Fix ONLY the following... Change all required field (*) indicators to red color... Only the * symbol should be red".
       Since I can't do this with CSS alone if it's text, I will try to target labels where I can, 
       but likely I need to update the storage/blade files to wrap * in <span class="text-danger">*</span>.
       However, that's a lot of files.
       Is there a simpler way?
       Maybe the project uses a helper?
       Let's look at a blade file again.
       admin/galleries/create.blade.php: <label class="form-label">Image *</label>
       It is static text.
       I will modify the blade files view in the "view_file" output to wrap them.
       Wait, "Frontend forms (contact, gallery upload, blog, etc.)".
       This implies a global change.
       If I cannot effectively change all files, maybe I can use JS?
       "Clean, production-ready UI". JS replacement is okay but hacky.
       Refactoring Blade is better.
       But I only see a few open files.
       Let's look at `enhancements.css`.
       Actually, if I look at `d:\github\aalilai_admin\resources\views\admin\galleries\create.blade.php`, it has `Image *`.
       I'll use a Regex Multi-File Replace to wrap `*` in `<span class="text-danger">*</span>` for labels?
       No, "Apply consistently across: Admin panel forms, Frontend forms".
       There might be many files.
       The user said "Fix ONLY the following two issues".
       I'll start by adding a utility class in CSS just in case, and then maybe use a script to wrap them if I can't touch all files.
       Actually, I'll update the `enhancements.css` to define `.text-danger` (if not exists) and `required-asterisk`.
       Then I'll update the specific open files and find others.
       Wait, I can use a global `label` style and if the label has a specific class...
       Let's just wrap the asterisks in the View files I know of, and maybe Search/Replace globally?
       There is `multi_replace_file_content`.
       But I need to know which files.
       
       Let's try to update `enhancements.css` first for alignment, and also for the asterisk class.
       Then I will use `grep` to find labels with asterisks.
       
       Center alignment for Blog:
       I need to check `index.blade.php` for blog.
       It basically needs `text-center` on the container or similar.
       The view `resources/views/blog/index.blade.php` shows:
       `<div class="section-title text-center">`
       It seems centered.
       But maybe `d-flex justify-content-center` is needed on the row or col.
       Lines 37: `<div class="row g-4 justify-content-center">`
       Lines 39: `<div class="col-lg-4 col-md-6 d-flex justify-content-center reveal">`
       This looks centered.
       "Blog page content is aligned to the left".
       Maybe the container width is weird?
       Line 27: `<div class="container" style="max-width: 1200px !important; margin: 0 auto !important; float: none !important;">`
       
       Let's look at `ContactController`, etc. usage of asterisks.
       Let's find all `*</label>` occurrences.
    */

    /* Ensure asterisk color for any span with text-danger within labels */
    label .text-danger,
    .form-label .text-danger {
        color: #dc3545 !important;
    }

    /* Center Alignment Fixes for Blog */
    #blog-page .container {
        margin-left: auto !important;
        margin-right: auto !important;
        float: none !important;
    }

    #blog-page .section-title h2,
    #blog-page .section-title p {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .form-group {
        position: relative;
        margin-bottom: 1.5rem;
    }

    .form-group label {
        position: absolute;
        left: 16px;
        top: 12px;
        color: var(--text-light);
        transition: all var(--transition-base);
        pointer-events: none;
        background: white;
        padding: 0 4px;
    }

    .form-group input:focus+label,
    .form-group input:not(:placeholder-shown)+label {
        top: -10px;
        left: 12px;
        font-size: 12px;
        color: var(--primary-green);
        font-weight: 600;
    }

    /* ============================================
   7. NAVIGATION ENHANCEMENTS
   ============================================ */
    /* Conflicting sticky logic removed to favor theme defaults */
    .header-bottom {
        transition: all var(--transition-base);
    }

    .mainmenu ul li a {
        position: relative;
        transition: color var(--transition-base);
        font-weight: 500;
        letter-spacing: 0.02em;
    }

    .mainmenu ul li a::after {
        content: '';
        position: absolute;
        bottom: -5px;
        left: 0;
        width: 0;
        height: 2px;
        background: var(--primary-green);
        transition: width var(--transition-base);
    }

    .mainmenu ul li a:hover::after,
    .mainmenu ul li.active a::after {
        width: 100%;
    }

    .mainmenu ul li a:hover {
        color: var(--primary-green);
    }

    /* CTA donate button in header */
    .header-area #donateBtn {
        font-size: 14px;
        letter-spacing: 0.03em;
    }

    /* ============================================
   8. IMAGE ENHANCEMENTS
   ============================================ */
    /* Global image styling removed to restore original scale */
    img[loading="lazy"] {
        opacity: 0;
        transition: opacity 0.3s;
    }

    img[loading="lazy"].loaded {
        opacity: 1;
    }

    /* Image Hover Overlay */
    .image-overlay {
        position: relative;
        overflow: hidden;
    }

    .image-overlay::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: none;
        /* Removed green overlay */
        opacity: 0;
        transition: opacity var(--transition-base);
        z-index: 1;
        pointer-events: none;
        /* Pass through click events */
    }

    .image-overlay:hover::before {
        opacity: 0;
        /* Ensure it stays invisible */
    }

    /* Add zoom effect to image instead */
    .image-overlay img {
        transition: transform var(--transition-slow);
    }

    .image-overlay:hover img {
        transform: scale(1.1);
    }

    /* ============================================
   8b. HERO SECTION (PUBLIC HOME)
   ============================================ */
    .hero-eco {
        position: relative;
        min-height: 70vh;
        display: flex;
        align-items: center;
        color: #ffffff;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }

    .hero-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(120deg, rgba(27, 94, 32, 0.9), rgba(46, 125, 50, 0.7), rgba(0, 0, 0, 0.45));
    }

    .hero-eco .container,
    .hero-eco .row,
    .hero-eco .hero-content {
        position: relative;
        z-index: 1;
    }

    .hero-title {
        font-size: 2.8rem;
        max-width: 620px;
        margin-bottom: 1rem;
    }

    .hero-subtitle {
        font-size: 1.05rem;
        max-width: 520px;
        margin-bottom: 1.75rem;
        color: rgba(255, 255, 255, 0.88);
    }

    .hero-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    @media (max-width: 768px) {
        .hero-eco {
            min-height: 60vh;
        }

        .hero-title {
            font-size: 2.1rem;
        }

        .hero-subtitle {
            font-size: 0.98rem;
        }
    }

    /* ============================================
   9. BLOG & CONTENT SECTIONS
   ============================================ */
    .blog-section {
        background: #f7fafc;
    }

    .blog-row {
        display: grid;
        grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
        gap: 24px;
        max-width: 960px;
        margin: 0 auto 32px;
        align-items: stretch;
    }

    .blog-image img {
        border-radius: 18px;
        box-shadow: var(--shadow-md);
        height: 100%;
        width: 100%;
        object-fit: cover;
    }

    .blog-content {
        background: #ffffff;
        border-radius: 18px;
        padding: 20px 22px;
        box-shadow: var(--shadow-sm);
    }

    .blog-meta-date {
        color: #757575;
        font-size: 0.9rem;
        margin-bottom: 0.25rem;
    }

    .blog-title-link {
        text-decoration: none;
        color: var(--text-dark);
        transition: color var(--transition-base);
    }

    .blog-title-link:hover {
        color: var(--primary-green);
    }

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

    /* ============================================
       RECOGNITION SHOWCASE (COMPLETE REBUILD)
       ============================================ */
    .recognition-section {
        padding: 90px 0 !important;
        background: #fdfdfd !important;
        position: relative !important;
        overflow: hidden !important;
    }

    /* Premium Tab Navigation */
    .recognition-tabs-nav {
        display: flex !important;
        justify-content: center !important;
        gap: 15px !important;
        margin-bottom: 60px !important;
        border: none !important;
    }

    .recognition-tabs-nav .nav-link {
        font-family: 'Hind Madurai', sans-serif !important;
        padding: 12px 35px !important;
        border-radius: 50px !important;
        border: 1px solid #e2e8f0 !important;
        color: #64748b !important;
        font-weight: 600 !important;
        background: #ffffff !important;
        transition: all 0.4s ease !important;
    }

    .recognition-tabs-nav .nav-link.active {
        background: #16a34a !important;
        border-color: #16a34a !important;
        color: #ffffff !important;
        box-shadow: 0 10px 20px rgba(22, 163, 74, 0.15) !important;
    }

    /* --- Awards Style: Eco-Circle --- */
    .award-card-circle {
        width: 220px !important;
        height: 220px !important;
        margin: 0 auto 35px !important;
        position: relative !important;
        border-radius: 50% !important;
        border: 3px dashed #77b52c !important;
        padding: 7px !important;
        background: #fff !important;
        transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        opacity: 0;
        transform: translateY(30px);
    }

    .award-card-circle.active {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }

    .award-card-circle:hover {
        transform: translateY(-8px) scale(1.05) !important;
        box-shadow: 0 15px 35px rgba(119, 181, 44, 0.2) !important;
        border-style: solid !important;
    }

    .award-card-circle .circle-inner {
        width: 100% !important;
        height: 100% !important;
        border-radius: 50% !important;
        overflow: hidden !important;
        clip-path: circle(50%) !important;
    }

    .award-card-circle img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        transition: transform 0.6s ease !important;
    }

    .award-card-circle .leaf-deco {
        position: absolute !important;
        width: 50px !important;
        height: 50px !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2377b52c'%3E%3Cpath d='M17,8C8,8,4,16,4,16s8-2,13-8c2.33-2.8,1.44-5.11,1.44-5.11S16.2,3.37,17,8z'/%3E%3C/svg%3E") !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;
        z-index: 5 !important;
        animation: leaf-float-slow 4s ease-in-out infinite alternate !important;
    }

    .leaf-tr { top: -10px !important; right: -10px !important; transform: rotate(15deg) !important; }
    .leaf-bl { bottom: -5px !important; left: -10px !important; transform: rotate(-145deg) !important; width: 40px !important; height: 40px !important; }

    @keyframes leaf-float-slow {
        from { transform: translateY(0) rotate(15deg); }
        to { transform: translateY(-8px) rotate(25deg); }
    }

    .award-label {
        text-align: center !important;
        font-family: 'Hind Madurai', sans-serif !important;
        font-size: 0.95rem !important;
        font-weight: 600 !important;
        color: #4b5563 !important;
        margin-top: -25px !important;
        margin-bottom: 20px !important;
    }

    /* --- Certificates Style: Portrait Frame --- */
    .cert-card-portrait {
        width: 260px !important;
        height: 360px !important;
        margin: 0 auto !important;
        background: #fdfdfb !important;
        border-radius: 14px !important;
        padding: 15px !important;
        border: 1px solid rgba(0, 0, 0, 0.04) !important;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.03) !important;
        transition: all 0.4s ease !important;
        display: flex !important;
        flex-direction: column !important;
        opacity: 0;
        transform: translateY(30px);
    }

    .cert-card-portrait.active {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }

    .cert-card-portrait .img-box {
        width: 100% !important;
        height: 280px !important;
        background: #fff !important;
        border-radius: 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
        padding: 8px !important;
        border: 1px solid rgba(0,0,0,0.02) !important;
    }

    .cert-card-portrait img {
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: contain !important;
    }

    .cert-card-portrait .cert-title-box {
        padding-top: 15px !important;
        text-align: center !important;
    }

    .cert-card-portrait .title-text {
        font-family: 'Hind Madurai', sans-serif !important;
        font-size: 0.9rem !important;
        font-weight: 700 !important;
        color: #1f2937 !important;
        line-height: 1.3 !important;
        margin: 0 !important;
    }

    .cert-card-portrait:hover {
        transform: translateY(-8px) !important;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08) !important;
        border-color: #16a34a !important;
    }

    .recognition-card:hover .img-frame img {
        transform: scale(1.1) !important;
    }

    .recognition-card:hover {
        border-color: #16a34a !important; /* Accent change on hover */
        border-style: solid !important;
    }

    .recognition-card:hover .img-frame img {
        transform: scale(1.08) !important;
    }

    .recognition-card .card-body {
        display: none !important; /* Hides award name/details as requested */
    }

    .recognition-card .card-title {
        font-family: 'Hind Madurai', sans-serif !important;
        font-size: 1.1rem !important;
        font-weight: 700 !important;
        color: var(--text-dark) !important;
        margin-bottom: 8px !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    .recognition-card .card-meta {
        font-size: 0.85rem !important;
        color: var(--primary-green) !important;
        font-weight: 600 !important;
        margin-bottom: 5px !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
    }

    .recognition-card .card-desc {
        font-size: 0.9rem !important;
        color: var(--text-gray) !important;
        line-height: 1.5 !important;
        margin: 0 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 3 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    /* Unified Recognition Slider */
    .recognition-section--unified {
        --recognition-circle-size: 280px;
        --recognition-gap: 34px;
        padding: 100px 0 !important;
        background:
            radial-gradient(circle at top left, rgba(154, 201, 104, 0.10), transparent 30%),
            linear-gradient(180deg, #ffffff 0%, #fbfdf8 100%) !important;
        overflow: hidden !important;
    }

    .recognition-section--unified::before,
    .recognition-section--unified::after {
        content: "" !important;
        position: absolute !important;
        border-radius: 50% !important;
        pointer-events: none !important;
        z-index: 0 !important;
    }

    .recognition-section--unified::before {
        width: 320px !important;
        height: 320px !important;
        top: -140px !important;
        right: -100px !important;
        background: rgba(126, 191, 93, 0.12) !important;
    }

    .recognition-section--unified::after {
        width: 240px !important;
        height: 240px !important;
        bottom: -120px !important;
        left: -90px !important;
        background: rgba(187, 228, 169, 0.18) !important;
    }

    .recognition-section--unified .container,
    .recognition-section--unified .section-head-modern,
    .recognition-section--unified .recognition-marquee-shell {
        position: relative !important;
        z-index: 1 !important;
    }

    .recognition-section--unified .recognition-marquee-shell {
        width: 100% !important;
        max-width: 980px !important;
        margin: 0 auto !important;
        overflow: hidden !important;
        padding: 14px 24px 28px !important;
        background: transparent !important;
    }

    .recognition-marquee-track {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        width: max-content !important;
        overflow: visible !important;
        will-change: transform !important;
    }

    .recognition-marquee-track:not(.is-animated) {
        width: 100% !important;
        justify-content: center !important;
    }

    .recognition-marquee-track.is-animated {
        animation: recognition-marquee-scroll 28s linear infinite !important;
    }

    .recognition-marquee-shell:hover .recognition-marquee-track.is-animated {
        animation-play-state: paused !important;
    }

    .recognition-marquee-group {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: var(--recognition-gap) !important;
        min-width: max-content !important;
        padding-right: var(--recognition-gap) !important;
    }

    .recognition-marquee-track:not(.is-animated) .recognition-marquee-group {
        padding-right: 0 !important;
    }

    .recognition-circle-card {
        width: var(--recognition-circle-size) !important;
        min-width: var(--recognition-circle-size) !important;
        max-width: var(--recognition-circle-size) !important;
        height: var(--recognition-circle-size) !important;
        min-height: var(--recognition-circle-size) !important;
        margin: 0 !important;
        display: flex !important;
        flex: 0 0 auto !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        overflow: visible !important;
        position: relative !important;
    }

    .recognition-circle-frame {
        width: 100% !important;
        height: 100% !important;
        aspect-ratio: 1 / 1 !important;
        padding: 10px !important;
        border-radius: 50% !important;
        border: 5px dashed #f5c744 !important;
        background: transparent !important;
        position: relative !important;
        box-shadow: none !important;
        transition: transform 0.35s ease !important;
        will-change: transform !important;
        overflow: visible !important;
    }

    .recognition-circle-frame::before,
    .recognition-circle-frame::after {
        content: "" !important;
        position: absolute !important;
        background-repeat: no-repeat !important;
        background-size: contain !important;
        pointer-events: none !important;
        z-index: 3 !important;
        filter: drop-shadow(0 8px 10px rgba(82, 138, 28, 0.18)) !important;
    }

    .recognition-circle-frame::before {
        width: 78px !important;
        height: 102px !important;
        top: 2px !important;
        right: -10px !important;
        transform: rotate(12deg) !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 128'%3E%3Cdefs%3E%3ClinearGradient id='leafA' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%2395d73b'/%3E%3Cstop offset='100%25' stop-color='%2368a81d'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M78 7C42 14 15 49 12 80c-2 23 8 35 22 39 14 5 32 1 45-18 18-25 18-61-1-94z' fill='url(%23leafA)'/%3E%3Cpath d='M22 88c20-23 34-41 48-68' stroke='%23c8ef8a' stroke-width='4' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") !important;
    }

    .recognition-circle-frame::after {
        width: 52px !important;
        height: 66px !important;
        right: 10px !important;
        bottom: 14px !important;
        transform: rotate(228deg) !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 128'%3E%3Cdefs%3E%3ClinearGradient id='leafB' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23b8eb61'/%3E%3Cstop offset='100%25' stop-color='%2374b326'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M78 7C42 14 15 49 12 80c-2 23 8 35 22 39 14 5 32 1 45-18 18-25 18-61-1-94z' fill='url(%23leafB)'/%3E%3Cpath d='M22 88c20-23 34-41 48-68' stroke='%23def7a8' stroke-width='4' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") !important;
    }

    .recognition-circle-card:hover {
        z-index: 2 !important;
    }

    .recognition-circle-card:hover .recognition-circle-frame {
        transform: scale(1.05) !important;
    }

    .recognition-circle-media {
        width: 100% !important;
        height: 100% !important;
        aspect-ratio: 1 / 1 !important;
        border-radius: 50% !important;
        overflow: hidden !important;
        background: #ffffff !important;
        border: 8px solid #ffffff !important;
        box-shadow: none !important;
    }

    .recognition-circle-media img {
        width: 100% !important;
        height: 100% !important;
        aspect-ratio: 1 / 1 !important;
        display: block !important;
        border-radius: 50% !important;
        overflow: hidden !important;
        object-fit: cover !important;
        object-position: center !important;
        background: #ffffff !important;
        box-shadow: none !important;
        transform: none !important;
        transition: none !important;
    }

    .recognition-circle-copy {
        display: none !important;
    }

    .recognition-circle-title {
        display: none !important;
    }

    .recognition-circle-meta {
        display: none !important;
    }

    .recognition-circle-card:hover .recognition-circle-media img {
        transform: none !important;
    }

    @keyframes recognition-marquee-scroll {
        from {
            transform: translate3d(0, 0, 0);
        }
        to {
            transform: translate3d(-50%, 0, 0);
        }
    }

    @media (max-width: 1199px) {
        .recognition-section--unified {
            --recognition-circle-size: 250px;
            --recognition-gap: 28px;
        }

        .recognition-section--unified .recognition-marquee-shell {
            max-width: 860px !important;
        }
    }

    @media (max-width: 991px) {
        .recognition-section--unified {
            --recognition-circle-size: 220px;
            --recognition-gap: 26px;
        }

        .recognition-section--unified .recognition-marquee-shell {
            max-width: 520px !important;
            padding: 14px 18px 24px !important;
        }

        .recognition-circle-frame::before {
            width: 64px !important;
            height: 84px !important;
            right: -8px !important;
        }

        .recognition-circle-frame::after {
            width: 42px !important;
            height: 54px !important;
            right: 8px !important;
            bottom: 12px !important;
        }
    }

    @media (max-width: 767px) {
        .recognition-section--unified {
            --recognition-circle-size: 196px;
            --recognition-gap: 22px;
            padding: 78px 0 !important;
        }

        .recognition-section--unified .recognition-marquee-shell {
            max-width: 238px !important;
            padding: 10px 10px 20px !important;
        }

        .recognition-circle-frame::before {
            width: 60px !important;
            height: 78px !important;
            right: -4px !important;
        }

        .recognition-circle-frame::after {
            width: 40px !important;
            height: 52px !important;
            right: 8px !important;
            bottom: 12px !important;
        }
    }

    /* ============================================
   10. EVENTS SECTIONS (ECO)
   ============================================ */
    .event-eco-section {
        position: relative;
        overflow: hidden;
        background: radial-gradient(circle at top left, #e8f5e9 0%, #f9fafb 40%, #e3f2fd 100%);
        padding: 80px 0;
    }

    .event-eco-section-alt {
        background: linear-gradient(to bottom, #e8f5e9 0%, #c8e6c9 50%, #a5d6a7 100%);
    }

    .event-title-primary {
        color: #1b5e20;
        font-weight: 800;
        font-size: 2.2rem;
    }

    .event-subtitle {
        color: #4e342e;
    }

    .event-description {
        max-width: 900px;
        margin: auto;
        color: #3e2723;
        font-size: 1.05rem;
        line-height: 1.8;
    }

    .seed-counter,
    .panai-counter {
        background: #eaf7ee;
        border-radius: 16px;
        padding: 24px 40px;
        display: inline-block;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.06);
    }

    .panai-counter {
        background: #fff3e0;
    }

    .seed-counter h4,
    .panai-counter h4 {
        color: #2f8f4d;
        font-weight: 600;
    }

    .seed-counter h2,
    .panai-counter h2 {
        font-size: 2.5rem;
        font-weight: 800;
        color: #2e7d32;
    }

    .seed-counter p,
    .panai-counter p {
        color: #555;
    }

    .event-gallery-title {
        color: #1b5e20;
        margin-bottom: 20px;
    }

    @media (max-width: 768px) {

        .seed-counter,
        .panai-counter {
            padding: 20px;
        }
    }

    /* ============================================
   11. FOOTER REFINEMENTS
   ============================================ */
    .footer-area {
        background: #2c5e2e;
        /* Soft Forest Green - Lighter and fresher */
        position: relative;
        overflow: hidden;
        font-family: 'Hind Madurai', sans-serif;
        color: rgba(255, 255, 255, 0.92);
    }

    .footer-area::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 0%, rgba(0, 0, 0, 0.1) 100%);
        pointer-events: none;
    }

    .footer-area .container,
    .footer-area .footer-bottom {
        position: relative;
        z-index: 1;
    }

    .footer-area .container {
        padding-top: 72px;
        padding-bottom: 8px;
    }

    .footer-layout {
        align-items: flex-start;
    }

    .footer-widget {
        height: 100%;
        font-family: 'Hind Madurai', sans-serif;
    }

    .footer-logo {
        width: 68px;
        height: auto;
    }

    .footer-title,
    .footer-widget h3 {
        font-family: 'Hind Madurai', sans-serif;
        font-size: 1.45rem;
        font-weight: 700;
        letter-spacing: 0.01em;
        line-height: 1.25;
        color: #ffffff;
        margin-bottom: 22px;
    }

    .footer-about-text,
    .footer-note,
    .footer-widget p,
    .footer-widget li,
    .footer-widget a,
    .footer-bottom p {
        font-family: 'Hind Madurai', sans-serif;
        font-size: 1.03rem;
        line-height: 1.75;
        letter-spacing: 0.01em;
    }

    .footer-about-text,
    .footer-note,
    .footer-widget p {
        color: rgba(255, 255, 255, 0.86);
        max-width: 32rem;
        margin-bottom: 0;
    }

    .footer-area a {
        color: inherit;
        text-decoration: none;
    }

    .footer-area a:hover {
        color: #d7f3a5;
    }

    .footer-links,
    .contact-details {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .footer-links li,
    .contact-details li {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 12px;
        color: rgba(255, 255, 255, 0.88);
    }

    .footer-links li:last-child,
    .contact-details li:last-child {
        margin-bottom: 0;
    }

    .footer-links li {
        gap: 0;
    }

    .footer-links a {
        display: inline-block;
        font-weight: 500;
    }

    .contact-details i {
        flex: 0 0 16px;
        margin-top: 7px;
        color: #cde98b;
        text-align: center;
    }

    .footer-area .contact-phone,
    .footer-area .contact-email {
        font-weight: 500;
        word-break: break-word;
    }

    .social-icons {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 12px;
    }

    .social-link {
        width: 42px;
        height: 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.12);
        color: #ffffff !important;
        font-size: 1.05rem;
        transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
    }

    .social-link:hover {
        transform: translateY(-2px);
        background: rgba(215, 243, 165, 0.18);
        color: #efffd0 !important;
    }

    .footer-newsletter .input-group {
        align-items: stretch;
    }

    .footer-newsletter .form-control {
        min-height: 50px;
        border: 0;
        border-radius: 10px 0 0 10px;
        padding: 12px 16px;
        background: rgba(255, 255, 255, 0.12);
        color: #ffffff;
        font-family: 'Hind Madurai', sans-serif;
        font-size: 1rem;
        box-shadow: none;
    }

    .footer-newsletter .form-control::placeholder {
        color: rgba(255, 255, 255, 0.74);
    }

    .footer-newsletter .form-control:focus {
        background: rgba(255, 255, 255, 0.18);
        color: #ffffff;
        box-shadow: 0 0 0 2px rgba(205, 233, 139, 0.28);
    }

    .footer-newsletter .btn {
        min-width: 56px;
        border: 0;
        border-radius: 0 10px 10px 0 !important;
        background: #8bc052;
        color: #163617;
        font-size: 1rem;
        box-shadow: none;
    }

    .footer-newsletter .btn:hover,
    .footer-newsletter .btn:focus {
        background: #a7d766;
        color: #163617;
        box-shadow: none;
    }

    .footer-bottom {
        margin-top: 52px !important;
        padding: 18px 0 24px;
        border-top: 1px solid rgba(255, 255, 255, 0.14);
    }

    .footer-bottom p {
        margin: 0;
        font-size: 0.98rem;
        line-height: 1.65;
        color: rgba(255, 255, 255, 0.82);
    }

    @media (max-width: 991px) {
        .footer-area .container {
            padding-top: 58px;
        }

        .footer-title,
        .footer-widget h3 {
            font-size: 1.32rem;
            margin-bottom: 18px;
        }

        .footer-about-text,
        .footer-note,
        .footer-widget p,
        .footer-widget li,
        .footer-widget a,
        .footer-bottom p {
            font-size: 0.99rem;
        }
    }

    @media (max-width: 767px) {
        .footer-area .container {
            padding-top: 48px;
        }

        .footer-widget {
            text-align: center;
        }

        .footer-about-text,
        .footer-note,
        .footer-widget p {
            margin-left: auto;
            margin-right: auto;
        }

        .footer-links li,
        .contact-details li,
        .social-icons {
            justify-content: center;
        }

        .contact-details li {
            text-align: left;
        }

        .footer-newsletter .input-group {
            justify-content: center;
        }
    }

    .fb-icon {
        color: #3b5998;
    }

    .tw-icon {
        color: #1DA1F2;
    }

    .ig-icon {
        color: #e4405f;
    }

    .yt-icon {
        color: #FF0000;
    }

    /* ============================================
   12. LOADING STATES
   ============================================ */
    .loading {
        position: relative;
        pointer-events: none;
        opacity: 0.6;
    }

    .loading::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 20px;
        height: 20px;
        margin: -10px 0 0 -10px;
        border: 3px solid var(--primary-green);
        border-top-color: transparent;
        border-radius: 50%;
        animation: spin 0.6s linear infinite;
    }

    @keyframes spin {
        to {
            transform: rotate(360deg);
        }
    }

    /* ============================================
   13. ANIMATIONS & TRANSITIONS
   ============================================ */
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(30px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .fade-in-up {
        animation: fadeInUp 0.6s ease-out;
    }

    /* Scroll Reveal Animation */
    .reveal {
        opacity: 0;
        transform: translateY(30px);
        transition: all 0.6s ease-out;
    }

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

    /* ============================================
   11. ACCESSIBILITY IMPROVEMENTS
   ============================================ */
    /* Skip link: keep in DOM for screen readers, hide visually until keyboard focus */
    .skip-to-content {
        position: absolute !important;
        left: -9999px !important;
        top: -9999px !important;
        width: 1px !important;
        height: 1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        clip-path: inset(50%) !important;
        white-space: nowrap !important;
        z-index: -1 !important;
        background: var(--primary-green) !important;
        color: #ffffff !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        text-decoration: none !important;
        font-weight: 600 !important;
        border-radius: 6px !important;
        box-shadow: none !important;
    }

    .skip-to-content:focus,
    .skip-to-content:focus-visible {
        position: fixed !important;
        left: 50% !important;
        top: 12px !important;
        transform: translateX(-50%) !important;
        width: auto !important;
        height: auto !important;
        overflow: visible !important;
        clip: auto !important;
        clip-path: none !important;
        padding: 12px 24px !important;
        margin: 0 !important;
        background: var(--primary-green) !important;
        color: #ffffff !important;
        border-radius: 6px !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
        z-index: 99999 !important;
        outline: 3px solid #ffffff !important;
        outline-offset: 2px !important;
        font-size: 16px !important;
    }

    #main-content {
        scroll-margin-top: 90px;
    }

    #main-content:focus {
        outline: none;
    }

    /* Screen reader only */
    .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border-width: 0;
    }

    /* High contrast mode support */
    @media (prefers-contrast: high) {
        :root {
            --text-dark: #000000;
            --text-gray: #333333;
            --border-color: #000000;
        }
    }

    /* Reduced motion support */
    @media (prefers-reduced-motion: reduce) {

        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }

        html {
            scroll-behavior: auto;
        }
    }

    /* ============================================
   12. MOBILE RESPONSIVENESS
   ============================================ */
    @media (max-width: 768px) {

        /* Touch-friendly buttons */
        .btn,
        button,
        a.btn {
            min-height: 44px;
            min-width: 44px;
            padding: 12px 20px;
        }

        /* Better spacing on mobile */
        .container {
            padding-left: 15px;
            padding-right: 15px;
        }

        /* Improved mobile menu */
        .mainmenu ul {
            flex-direction: column;
        }

        /* Better card spacing */
        .card,
        .single-blog,
        .single-team {
            margin-bottom: 1.5rem;
        }
    }

    /* ============================================
   13. PERFORMANCE OPTIMIZATIONS
   ============================================ */
    /* GPU Acceleration for animations */
    .card,
    .btn,
    .single-blog,
    .single-team {
        will-change: transform;
        transform: translateZ(0);
    }

    /* Optimize repaints */
    .footer-area {
        contain: layout style paint;
    }

    /* ============================================
   14. UTILITY CLASSES
   ============================================ */
    .text-gradient {
        background: linear-gradient(135deg, var(--accent-yellow) 0%, var(--accent-green) 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .shadow-hover {
        transition: box-shadow var(--transition-base);
    }

    .shadow-hover:hover {
        box-shadow: var(--shadow-xl);
    }

    .rounded-lg {
        border-radius: 16px;
    }

    .rounded-xl {
        border-radius: 24px;
    }

    /* ============================================
   15. SCROLL TO TOP BUTTON
   ============================================ */
    .scroll-to-top {
        position: fixed;
        bottom: 30px;
        right: 30px;
        width: 50px;
        height: 50px;
        background: var(--primary-green);
        color: white;
        border: none;
        border-radius: 50%;
        cursor: pointer;
        display: none;
        align-items: center;
        justify-content: center;
        box-shadow: var(--shadow-lg);
        transition: all var(--transition-base);
        z-index: 1000;
    }

    .scroll-to-top:hover {
        background: var(--primary-green-dark);
        transform: translateY(-5px);
        box-shadow: var(--shadow-xl);
    }

    .scroll-to-top.show {
        display: flex;
    }

    /* ============================================
   16. ALERT ENHANCEMENTS
   ============================================ */
    .alert {
        border-radius: 12px;
        padding: 16px 20px;
        border: none;
        box-shadow: var(--shadow-md);
        animation: slideDown 0.3s ease-out;
    }

    @keyframes slideDown {
        from {
            opacity: 0;
            transform: translateY(-20px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .alert-success {
        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
        color: white;
    }

    .alert-danger {
        background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
        color: white;
    }

    /* ============================================
   17. BREADCRUMB ENHANCEMENTS
   ============================================ */
    .site-breadcrumb {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 14px;
    }

    .site-breadcrumb li {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .site-breadcrumb a {
        color: var(--text-light);
        text-decoration: none;
        transition: color var(--transition-base);
    }

    .site-breadcrumb a:hover {
        color: var(--primary-green);
    }

    /* ============================================
   18. SOCIAL ICONS ENHANCEMENT
   ============================================ */
    .social-icons a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: var(--bg-light);
        color: var(--text-gray);
        transition: all var(--transition-base);
        text-decoration: none;
    }

    .social-icons a:hover {
        background: var(--primary-green);
        color: white;
        transform: translateY(-3px) scale(1.1);
        box-shadow: var(--shadow-md);
    }

    /* ============================================
   19. COUNTER ANIMATION ENHANCEMENT
   ============================================ */
    .counter-item {
        text-align: center;
        padding: 2rem;
        border-radius: 16px;
        background: var(--bg-white);
        box-shadow: var(--shadow-md);
        transition: all var(--transition-base);
    }

    .counter-item:hover {
        transform: translateY(-5px);
        box-shadow: var(--shadow-lg);
    }

    .counter-item .counter-number {
        font-size: 3rem;
        font-weight: 700;
        color: var(--primary-green);
        display: block;
        margin-bottom: 0.5rem;
    }

    /* ============================================
   20. GALLERY ENHANCEMENTS
   ============================================ */
    .project-thumb {
        position: relative;
        overflow: hidden;
        border-radius: 12px;
    }

    .project-desc {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
        padding: 20px;
        color: white;
        transform: translateY(100%);
        transition: transform var(--transition-base);
    }

    .project-thumb:hover .project-desc {
        transform: translateY(0);
    }

    /* ============================================
   21. PRINT STYLES
   ============================================ */
    @media print {

        .header-area,
        .footer-area,
        .btn,
        .scroll-to-top {
            display: none;
        }

        body {
            color: #000;
            background: #fff;
        }
    }

    /* ============================================
   22. SKIP LINK - ACCESSIBILITY FIX
   ============================================ */
    /* Force-level CSS to hide skip link visually while preserving accessibility */
    .skip-to-content {
        position: absolute !important;
        left: -9999px !important;
        top: -9999px !important;
        width: 1px !important;
        height: 1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        z-index: -1 !important;
    }

    /* Show skip link only when focused via keyboard navigation */
    .skip-to-content:focus {
        position: fixed !important;
        left: 50% !important;
        top: 10px !important;
        transform: translateX(-50%) !important;
        width: auto !important;
        height: auto !important;
        overflow: visible !important;
        clip: auto !important;
        white-space: normal !important;
        padding: 12px 24px !important;
        margin: 0 !important;
        background: var(--primary-green) !important;
        color: #ffffff !important;
        text-decoration: none !important;
        border-radius: 4px !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
        z-index: 99999 !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        outline: 3px solid #ffffff !important;
        outline-offset: 2px !important;
    }
}