/* =================================== */
/*        EWTA DYNAMIC BLUE THEME        */
/* =================================== */

:root {
    --primary-blue: #0077b6;   /* NEW: Vibrant, Professional Sky Blue */
    --secondary-blue: #00b4d8; /* NEW: Lighter accent blue for gradients */
    --dark-navy: #03045e;      /* NEW: Deep, powerful navy for text */
    --text-primary: #1e293b;
    --text-secondary: #525f70;
    --background-light: #F7FBFF; /* A very light, cool grey */
    --background-white: #FFFFFF;
    --border-color: #E2E8F0;
    --shadow-color: rgba(3, 4, 94, 0.07);
    --shadow-hover-color: rgba(3, 4, 94, 0.15);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { 
    font-family: 'Poppins', sans-serif; 
    color: var(--text-primary); 
    background-color: var(--background-light); 
    line-height: 1.8; 
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
}

/* ✨ NEW: Subtle Background Pattern for non-white sections */
body, section:nth-of-type(odd) {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23E2E8F0' fill-opacity='0.4'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

p { font-size: 1.05rem; }
.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
section { padding: 120px 0; position: relative; overflow: hidden; }
section:nth-of-type(even) { background-color: var(--background-white); }
section:nth-of-type(odd) { background-color: var(--background-light); }

h1, h2, h3, h4 { font-family: 'Poppins', sans-serif; font-weight: 700; color: var(--dark-navy); }
.section-title { text-align: center; font-size: 2.8rem; margin-bottom: 10px; }
.section-subtitle { text-align: center; font-size: 1.1rem; color: var(--text-secondary); max-width: 600px; margin: 0 auto 60px auto; }
.section-link { text-align: center; margin-top: 50px; }


.reveal-up, .reveal-scale, .reveal-left, .reveal-right {
    opacity: 0;
    transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reveal-up { transform: translateY(50px); }
.reveal-scale { transform: scale(0.9); }
.reveal-left { transform: translateX(-50px); }
.reveal-right { transform: translateX(50px); }

.reveal-up.visible, .reveal-scale.visible, .reveal-left.visible, .reveal-right.visible {
    opacity: 1;
    transform: none;
}
/* HEADER */
header { position: sticky; top: 0; width: 100%; padding: 20px 0; z-index: 1000; transition: all 0.3s ease; }
header.scrolled { background-color: rgba(255, 255, 255, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-color); box-shadow: 0 4px 15px var(--shadow-color); padding: 15px 0; }
nav { display: flex; justify-content: space-between; align-items: center; }
.logo img { max-height: 50px; transition: max-height 0.3s ease; }
header.scrolled .logo img { max-height: 45px; }

/* CTA BUTTON */
.cta-button { cursor: pointer; background: var(--primary-blue); color: var(--background-white); text-decoration: none; font-weight: 700; padding: 14px 32px; border-radius: 50px; border: none; box-shadow: 0 4px 20px rgba(0, 119, 182, 0.4); transition: all 0.3s ease; display: inline-block; }
.cta-button:hover { transform: translateY(-4px) scale(1.03); box-shadow: 0 8px 30px rgba(0, 119, 182, 0.5); background: var(--secondary-blue); }
.cta-secondary { background: transparent; border: 2px solid var(--primary-blue); color: var(--dark-navy); }
.cta-secondary:hover { background: var(--primary-blue); color: var(--background-white); }
.cta-header { background: transparent; border: 2px solid var(--primary-blue); color: var(--primary-blue); padding: 12px 30px; }
.cta-header:hover { background: var(--primary-blue); color: var(--background-white); transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 119, 182, 0.2); }

/* HERO SECTION */
#home { background-color: var(--background-white); }
.hero-container { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 40px; }
@keyframes gradient-text-flow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.hero-content h1 { font-size: 3.5rem; line-height: 1.25; background: linear-gradient(90deg, var(--primary-blue), var(--dark-navy), var(--secondary-blue)); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: gradient-text-flow 8s linear infinite; }
.hero-content p { font-size: 1.15rem; color: var(--text-secondary); margin: 25px 0 40px; max-width: 550px; }
.hero-3d-graphic { position: relative; height: 400px; perspective: 1500px; }
.graphic-element { position: absolute; top: 50%; left: 50%; transition: transform 0.1s linear; }
#shape-bg { width: 350px; height: 350px; background: var(--background-white); border-radius: 30%; transform: translate(-50%, -50%) translateZ(-50px) rotate(45deg); box-shadow: 0 20px 60px var(--shadow-color); }
#shape-main { width: 180px; height: 180px; background: linear-gradient(135deg, var(--secondary-blue) 0%, var(--primary-blue) 100%); border-radius: 50%; transform: translate(-50%, -50%) translateZ(80px); display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 30px rgba(0, 119, 182, 0.3); }
#shape-main svg { color: var(--background-white); width: 80px; height: 80px; }
#shape-accent1 { width: 80px; height: 80px; background: var(--primary-blue); border-radius: 20%; transform: translate(-180%, -120%) translateZ(40px); opacity: 0.8; }
#shape-accent2 { width: 60px; height: 60px; background: var(--secondary-blue); border-radius: 50%; transform: translate(150%, 80%) translateZ(120px); }

/* ✨ DYNAMIC TILT CARD */
.tilt-card { 
    background-color: var(--background-white); 
    border-radius: 20px; 
    position: relative; 
    transform-style: preserve-3d; 
    transition: transform 0.4s ease-out, box-shadow 0.4s ease-out; 
    box-shadow: 0 10px 30px var(--shadow-color); 
    padding: 40px;
    border: 1px solid var(--border-color);
    overflow: hidden; /* Important for the glow effect */
}
.tilt-card:hover { 
    box-shadow: 0 25px 50px -12px var(--shadow-hover-color);
    border-color: var(--primary-blue);
}
.tilt-card::before { /* Gradient border effect */
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: -1;
    margin: -1px; /* To hide behind the border */
    border-radius: inherit;
    background: linear-gradient(135deg, var(--primary-blue), var(--secondary-blue));
    opacity: 0;
    transition: opacity 0.4s ease;
}
.tilt-card:hover::before { opacity: 1; }
.tilt-card::after { /* Glow effect */
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 200%; height: 200%;
    background: radial-gradient(circle, rgba(0, 180, 216, 0.15) 0%, rgba(0,180,216,0) 50%);
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.5s ease;
}
.tilt-card:hover::after { transform: translate(-50%, -50%) scale(1); }

/* ABOUT & FOCUS SECTION */
.pillars-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; }
.pillar-card { text-align: center; }
.pillar-card h3 { font-size: 1.3rem; margin-bottom: 10px; }

/* IMPACT SECTION */
.impact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
.impact-card { text-align: left; }
.impact-card h3 { color: var(--primary-blue); margin-bottom: 10px; }

/* TEAM SECTION */
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; }
.team-card { text-align: center; }
.team-card img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; border: 4px solid var(--border-color); margin-bottom: 20px; }
.team-card h3 { font-size: 1.2rem; }
.team-card p { font-size: 0.9rem; color: var(--text-secondary); }

/* GALLERY */
.gallery-grid { columns: 3; gap: 15px; }
.gallery-item img { width: 100%; border-radius: 12px; margin-bottom: 15px; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.gallery-item img:hover { transform: scale(1.03); box-shadow: 0 10px 25px var(--shadow-hover-color); }

/* BLOG SECTION */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
.blog-card { text-align: center; }
.blog-card h3 { margin-bottom: 10px; }
.blog-card a { text-decoration: none; font-weight: 700; color: var(--primary-blue); }
.blog-card p { color: var(--text-secondary); }

/* FINAL CTA SECTION */
#contact { background-image: linear-gradient(135deg, var(--dark-navy) 0%, var(--primary-blue) 100%); text-align: center; color: var(--background-white); }
#contact h2 { font-size: 3rem; margin-bottom: 20px; }
#contact p { font-size: 1.2rem; opacity: 0.9; margin-bottom: 40px; max-width: 600px; margin-left: auto; margin-right: auto; }

/* FOOTER */
footer { background-color: var(--dark-navy); color: var(--background-light); padding: 80px 0 40px 0; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 40px; }
.footer-col h4 { color: var(--white); margin-bottom: 15px; }
.footer-col ul { list-style: none; }
.footer-col a, .footer-col p { text-decoration: none; color: var(--background-light); opacity: 0.7; transition: opacity 0.3s; }
.footer-col a:hover { opacity: 1; }
.footer-bottom { text-align: center; padding-top: 40px; font-size: 0.9rem; opacity: 0.6; border-top: 1px solid rgba(255,255,255,0.1); margin-top: 40px; }

/* ABOUT PAGE 2.0 STYLES */
#about-hero { padding: 100px 0; text-align: center; background-color: var(--background-white); }
.page-title { font-size: 3.5rem; }
.page-subtitle { font-size: 1.2rem; max-width: 600px; margin: 15px auto 0 auto; color: var(--text-secondary); }
.feature-item { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 80px; }
.feature-item:not(:last-child) { margin-bottom: 120px; }
.feature-item:nth-child(even) .feature-image { order: 2; }
.feature-image img { width: 100%; border-radius: 20px; box-shadow: 0 20px 50px var(--shadow-hover-color); }
.feature-content h2 { font-size: 2.5rem; margin-bottom: 20px; }
.mission-vision-grid { margin-top: 30px; display: grid; gap: 20px; }
#impact-about { background-color: var(--dark-navy); }
.impact-grid-about { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; }
.impact-card-about { background-color: #132742 !important; border-color: #314a68 !important; text-align: center; color: var(--background-light); }
.impact-card-about .icon { font-size: 2.5rem; color: var(--secondary-blue); margin-bottom: 20px; }
.impact-card-about h3 { color: var(--background-white); }
.values-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; }
.value-card { text-align: center; }
.value-card h4 { font-size: 1.3rem; }

/* BACKEND SYSTEM STYLES */
.form-container { max-width: 600px; margin: 0 auto; text-align: center; }
.form-group { margin-bottom: 25px; text-align: left; }
.form-group label { display: block; font-weight: 600; margin-bottom: 8px; }
.form-group input { width: 100%; padding: 14px; font-family: 'Poppins', sans-serif; font-size: 1rem; border: 1px solid var(--border-color); border-radius: 8px; transition: all 0.3s ease; }
.form-group input:focus { outline: none; border-color: var(--primary-blue); box-shadow: 0 0 0 3px rgba(0, 119, 182, 0.1); }
.alert { padding: 15px; margin-bottom: 20px; border-radius: 8px; }
.alert-danger { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
.alert-success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.alert-success a { color: #0c5460; font-weight: 700; }
.nav-actions { display: flex; align-items: center; gap: 15px; }
.login-btn { text-decoration: none; color: var(--dark-navy); font-weight: 600; padding: 12px 20px; }
.login-btn:hover { color: var(--primary-blue); }
.form-check { display: flex; align-items: center; gap: 10px; }
.form-check input[type="checkbox"] { width: auto; }
.form-check label { margin-bottom: 0; font-weight: 500; }

/* RESPONSIVENESS */
@media (max-width: 992px) { 
    .hero-container, .feature-item { grid-template-columns: 1fr; text-align: center; } 
    .hero-3d-graphic { display: none; } 
    .hero-content p { margin-left: auto; margin-right: auto; } 
    .footer-grid { grid-template-columns: 1fr 1fr; } 
    .gallery-grid { columns: 2; } 
    .feature-item:nth-child(even) .feature-image { order: -1; }
}
@media (max-width: 768px) { 
    .nav-links { display: none; } 
    .hero-content h1 { font-size: 2.8rem; } 
    .footer-grid { grid-template-columns: 1fr; text-align: center; } 
    .tilt-card:hover { transform: none; } 
    .gallery-grid { columns: 1; } 
    .pillars-grid, .impact-grid, .impact-grid-about { grid-template-columns: 1fr; } 
}
/* =================================== */
/*      FINAL RESPONSIVE HEADER        */
/* =================================== */

header {
    position: sticky;
    top: 0;
    width: 100%;
    padding: 15px 0;
    z-index: 1000;
    background-color: var(--background-white); /* Solid background */
    border-bottom: 1px solid var(--border-color);
    transition: box-shadow 0.3s ease;
}

header.scrolled {
    box-shadow: 0 4px 15px var(--shadow-color);
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo img {
    max-height: 50px;
}

/* Desktop Navigation */
.nav-links-desktop {
    display: flex;
    list-style: none;
    gap: 40px;
}

.nav-links-desktop a {
    text-decoration: none;
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 1rem;
    position: relative;
    padding-bottom: 5px;
    transition: color 0.3s ease;
}

.nav-links-desktop a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--primary-blue);
    transition: width 0.3s ease;
}

.nav-links-desktop a:hover,
.nav-links-desktop a.active {
    color: var(--primary-blue);
}

.nav-links-desktop a.active::after {
    width: 100%;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Mobile Menu Toggle (Hamburger Icon) */
.menu-toggle {
    display: none; /* Hidden on desktop */
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 1001;
}
.menu-toggle .bar {
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--dark-navy);
    margin: 5px 0;
    transition: all 0.4s ease;
}

/* Mobile Menu Overlay */
.mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--background-white);
    z-index: 999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: translateY(-100%);
    transition: transform 0.5s cubic-bezier(0.7, 0, 0.3, 1);
}

.mobile-menu a {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--dark-navy);
    text-decoration: none;
    margin: 20px 0;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Animation for when mobile menu is active */
body.mobile-menu-active .mobile-menu {
    transform: translateY(0);
}

body.mobile-menu-active .mobile-menu a {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.3s;
}

body.mobile-menu-active .menu-toggle .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}
body.mobile-menu-active .menu-toggle .bar:nth-child(2) {
    opacity: 0;
}
body.mobile-menu-active .menu-toggle .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* Responsive Breakpoint */
@media (max-width: 992px) {
    .nav-links-desktop, .cta-header-desktop {
        display: none;
    }
    .menu-toggle {
        display: block;
    }
}
/* =================================== */
/*        "FIRE" GALLERY STYLES        */
/* =================================== */

.gallery-filters {
    text-align: center;
    margin-bottom: 50px;
}

.filter-btn {
    background: transparent;
    border: 2px solid var(--border-color);
    color: var(--text-secondary);
    padding: 10px 25px;
    border-radius: 50px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    margin: 0 5px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.filter-btn:hover {
    border-color: var(--primary-blue);
    color: var(--primary-blue);
}

.filter-btn.active {
    background-color: var(--primary-blue);
    border-color: var(--primary-blue);
    color: var(--background-white);
}

.gallery-grid-fire {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.gallery-item-fire {
    aspect-ratio: 1 / 1; /* Makes them square */
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    transform-style: preserve-3d;
    will-change: transform;
    transition: transform 0.4s ease-out;
}

.gallery-item-fire img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.gallery-item-fire:hover img {
    transform: scale(1.1);
}

/* Lightbox Styles - you will need a lightbox JS library for this to work */
/* This is a basic styling placeholder */
.lightbox-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 25, 47, 0.9);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* =================================== */
/*    BEAUTIFUL AUTH PAGE STYLES       */
/* =================================== */

.auth-section {
    padding: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--background-light) 0%, #eaf4ff 100%);
}
.auth-container {
    width: 100%;
    max-width: 1100px;
    margin: 60px 20px;
    background: var(--background-white);
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.15);
    border-radius: 20px;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    overflow: hidden;
}
.auth-image-panel {
    background-image: url('');
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: flex-end;
    padding: 50px;
    color: var(--background-white);
}
.auth-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to top, rgba(3, 4, 94, 0.8) 0%, rgba(0, 119, 182, 0.5) 100%);
}
.auth-text-content {
    position: relative;
    z-index: 2;
}
.auth-text-content h2 {
    font-size: 2.2rem;
    color: var(--background-white);
    margin-bottom: 10px;
}
.auth-text-content p {
    font-size: 1.1rem;
    opacity: 0.9;
}
.auth-form-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px;
}
.form-wrapper {
    width: 100%;
    max-width: 400px;
}
.form-title {
    font-size: 2rem;
    text-align: center;
    margin-bottom: 30px;
}
.auth-switch {
    text-align: center;
    margin-top: 20px;
    color: var(--text-secondary);
}
.auth-switch a {
    color: var(--primary-blue);
    font-weight: 600;
    text-decoration: none;
}
.auth-switch a:hover {
    text-decoration: underline;
}

@media (max-width: 992px) {
    .auth-container {
        grid-template-columns: 1fr;
    }
    .auth-image-panel {
        display: none; /* Hide image on smaller screens to focus on the form */
    }
    .auth-form-panel {
        padding: 40px;
    }
}
/* =================================== */
/*        FINAL HEADER STYLES          */
/* =================================== */

header {
    position: sticky;
    top: 0;
    width: 100%;
    padding: 15px 0;
    z-index: 1000;
    background-color: var(--background-white);
    border-bottom: 1px solid var(--border-color);
    transition: box-shadow 0.3s ease;
}
header.scrolled { box-shadow: 0 4px 15px var(--shadow-color); }
nav { display: flex; justify-content: space-between; align-items: center; }
.logo img { max-height: 60px; } /* Larger Logo */
.nav-links { display: flex; align-items: center; list-style: none; gap: 40px; }
.nav-links a { text-decoration: none; color: var(--text-secondary); font-weight: 600; font-size: 1rem; position: relative; padding-bottom: 5px; transition: color 0.3s ease; }
.nav-links a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: var(--primary-blue); transition: width 0.3s ease; }
.nav-links a:hover, .nav-links a.active { color: var(--dark-navy); }
.nav-links a.active::after { width: 100%; }
.nav-actions { display: flex; align-items: center; gap: 15px; }

/* Hamburger Menu Icon */
.hamburger { display: none; cursor: pointer; z-index: 1001; }
.hamburger span { display: block; width: 25px; height: 3px; margin: 5px 0; background-color: var(--dark-navy); transition: all 0.3s ease-in-out; }

/* User Dropdown */
.user-dropdown { position: relative; display: inline-block; }
.user-btn { background-color: transparent; border: none; padding: 10px; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 1rem; color: var(--dark-navy); cursor: pointer; display: flex; align-items: center; gap: 8px; }
.user-btn svg { transition: transform 0.3s ease; }
.user-dropdown.active .user-btn svg { transform: rotate(180deg); }
.dropdown-content { display: none; position: absolute; right: 0; top: calc(100% + 10px); background-color: var(--background-white); min-width: 160px; box-shadow: 0 8px 25px var(--shadow-hover-color); border-radius: 12px; z-index: 100; overflow: hidden; padding: 8px 0; opacity: 0; transform: translateY(-10px); transition: opacity 0.3s ease, transform 0.3s ease; }
.user-dropdown.active .dropdown-content { display: block; opacity: 1; transform: translateY(0); }
.dropdown-content a { color: var(--text-primary); padding: 12px 20px; text-decoration: none; display: block; font-weight: 500; }
.dropdown-content a:hover { background-color: var(--background-light); color: var(--primary-blue); }

/* Responsive Mobile Header */
@media (max-width: 992px) {
    .nav-menu { position: fixed; top: 0; right: -100%; width: 300px; height: 100%; background-color: var(--background-white); box-shadow: -10px 0 30px rgba(0,0,0,0.1); transition: right 0.4s ease-in-out; padding-top: 100px; }
    .nav-menu.active { right: 0; }
    .nav-links { flex-direction: column; align-items: center; gap: 0; }
    .nav-links li { width: 100%; }
    .nav-links a { display: block; padding: 20px; width: 100%; text-align: center; }
    .nav-links a::after { display: none; }
    .hamburger { display: block; }
    .hamburger.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .hamburger.active span:nth-child(2) { opacity: 0; }
    .hamburger.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
}
/* =================================== */
/*      COOLER CONTACT PAGE STYLES     */
/* =================================== */

.contact-container-compact {
    max-width: 800px; /* Narrower for a focused look */
    margin: 0 auto;
}

.contact-pills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.info-pill {
    padding: 30px !important;
    text-align: center;
}

.info-pill .icon-wrapper {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--background-light);
    color: var(--primary-blue);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
}

.info-pill h4 {
    font-size: 1.2rem;
    margin-bottom: 8px;
}

.info-pill a, .info-pill span {
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
}
.info-pill a:hover {
    color: var(--primary-blue);
}

.contact-form-panel {
    margin-bottom: 40px;
}
.contact-form-panel h3 {
    text-align: center;
    font-size: 1.8rem;
    margin-bottom: 30px;
}

.form-group-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.map-block {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px var(--shadow-color);
}

.map-block iframe {
    display: block;
    width: 100%;
}

@media (max-width: 768px) {
    .form-group-grid {
        grid-template-columns: 1fr;
    }
}
/* =================================== */
/*    HEARTWARMING DONATION PAGE       */
/* =================================== */

#donation-hero {
    padding: 100px 0;
    text-align: center;
    background-color: var(--background-white);
    background-image: linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.8)), url('');
    background-size: cover;
    background-position: center;
}

.donation-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: flex-start;
}

.donation-story-panel h2 {
    font-size: 2.2rem;
    margin-bottom: 20px;
}
.donation-story-panel p {
    margin-bottom: 25px;
}
.donation-story-panel ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 30px;
}
.donation-story-panel li {
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}
.donation-story-panel .icon {
    color: var(--primary-blue);
    margin-right: 15px;
    font-weight: 700;
}
.donation-story-panel img {
    width: 100%;
    border-radius: 20px;
    margin-top: 20px;
}

.donation-form-panel {
    padding: 40px !important;
}
.donation-form-panel h3 {
    text-align: center;
    font-size: 1.8rem;
    margin-bottom: 30px;
}

.suggested-amounts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 30px;
}
.amount-btn {
    background-color: var(--background-light);
    border: 2px solid var(--border-color);
    padding: 15px;
    border-radius: 12px;
    font-family: 'Poppins', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}
.amount-btn:hover {
    border-color: var(--primary-blue);
    color: var(--primary-blue);
}
.amount-btn.active {
    background-color: var(--primary-blue);
    border-color: var(--primary-blue);
    color: var(--background-white);
    transform: scale(1.05);
}

@media (max-width: 992px) {
    .donation-container {
        grid-template-columns: 1fr;
    }
}
/* =================================== */
/*        FINAL HEADER STYLES          */
/* =================================== */

header {
    position: sticky;
    top: 0;
    width: 100%;
    padding: 15px 0;
    z-index: 1000;
    background-color: var(--background-white);
    border-bottom: 1px solid var(--border-color);
}
header.scrolled { box-shadow: 0 4px 20px var(--shadow-color); }

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo img {
    max-height: 60px;
    display: block;
}

.nav-links {
    display: flex;
    align-items: center;
    list-style: none;
    gap: 35px; /* Adjust gap between links */
    margin: 0; /* Resets default ul margin */
    padding: 0; /* Resets default ul padding */
}
.nav-links a {
    text-decoration: none;
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 1rem;
    position: relative;
    padding-bottom: 5px;
    white-space: nowrap;
    transition: color 0.3s ease;
}
.nav-links a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--primary-blue);
    transition: width 0.3s ease;
}
.nav-links a:hover,
.nav-links a.active {
    color: var(--dark-navy);
}
.nav-links a.active::after { width: 100%; }

.nav-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}

.hamburger {
    display: none; /* Hidden on desktop */
    cursor: pointer;
    z-index: 1001; /* Above mobile menu overlay */
}
.hamburger span {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px 0;
    background-color: var(--dark-navy);
    transition: all 0.3s ease-in-out;
}

/* User Dropdown */
.user-dropdown { position: relative; display: inline-block; }
.user-btn { background: none; border: none; padding: 10px; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 1rem; color: var(--dark-navy); cursor: pointer; display: flex; align-items: center; gap: 8px; }
.dropdown-content { display: none; position: absolute; right: 0; top: calc(100% + 10px); background-color: var(--background-white); min-width: 160px; box-shadow: 0 8px 25px var(--shadow-hover-color); border-radius: 12px; z-index: 100; overflow: hidden; padding: 8px 0; opacity: 0; transform: translateY(-10px); transition: opacity 0.3s ease, transform 0.3s ease; }
.user-dropdown.active .dropdown-content { display: block; opacity: 1; transform: translateY(0); }
.dropdown-content a { color: var(--text-primary); padding: 12px 20px; text-decoration: none; display: block; font-weight: 500; }
.dropdown-content a:hover { background-color: var(--background-light); color: var(--primary-blue); }

/* Responsive Mobile Header */
@media (max-width: 1024px) {
    .nav-links {
        display: none; /* Hide the links container on desktop */
    }
    .hamburger {
        display: block; /* Show the hamburger icon */
    }
    .nav-menu.active .nav-links { /* This is the mobile menu itself */
        display: flex;
        position: fixed;
        top: 0;
        right: 0;
        width: 300px;
        height: 100%;
        background-color: var(--background-white);
        box-shadow: -10px 0 30px rgba(0,0,0,0.1);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 20px;
        padding: 0;
    }
    .hamburger.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .hamburger.active span:nth-child(2) { opacity: 0; }
    .hamburger.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
}
/* =================================== */
/*    NEW COOLER CONTACT PAGE STYLES   */
/* =================================== */

#contact-main-v2 {
    position: relative;
    padding: 80px 0;
}

.contact-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('https://i.ibb.co/hZ2vP4T/ewta-capacity.jpg');
    background-size: cover;
    background-position: center;
    filter: blur(8px);
    opacity: 0.1;
    z-index: -1;
}

.contact-container-v2 {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 40px;
    align-items: stretch; /* Makes columns same height */
}

.contact-form-panel-v2 {
    padding: 40px !important;
}
.form-title {
    font-size: 2rem;
    text-align: center;
    margin-bottom: 10px;
}
.form-subtitle {
    text-align: center;
    color: var(--text-secondary);
    margin-bottom: 30px;
}
.form-group-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.contact-info-panel-v2 {
    background: rgba(255, 255, 255, 0.6); /* Glass effect */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    padding: 40px;
    display: flex;
    flex-direction: column;
}

.info-pills-grid-v2 {
    display: flex;
    flex-direction: column;
    gap: 25px;
    margin-bottom: 30px;
}
.info-pill-v2 {
    display: flex;
    align-items: center;
    gap: 20px;
}
.info-pill-v2 .icon-wrapper {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--primary-blue);
    color: var(--background-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.info-pill-v2 h4 {
    margin-bottom: 0;
    font-size: 1.1rem;
}
.info-pill-v2 a {
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
}
.info-pill-v2 a:hover { color: var(--primary-blue); }

.map-block-v2 {
    flex-grow: 1; /* Makes map fill remaining space */
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    min-height: 250px; /* Ensures map has height */
}
.map-block-v2 iframe {
    width: 100%;
    height: 100%;
    display: block;
}

@media (max-width: 992px) {
    .contact-container-v2 {
        grid-template-columns: 1fr;
    }
    .form-group-grid {
        grid-template-columns: 1fr;
    }
}
/* =================================== */
/*        FOOTER SOCIAL ICONS          */
/* =================================== */
.social-icons {
    display: flex;
    align-items: center;
    gap: 15px;
}
.social-icons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--background-light);
    opacity: 0.8;
    transition: all 0.3s ease;
}
.social-icons a:hover {
    background-color: var(--primary-blue);
    opacity: 1;
    transform: translateY(-3px);
}
.social-icons svg {
    width: 20px;
    height: 20px;
}
/* =================================== */
/*        FOOTER POWERED BY LINK       */
/* =================================== */
.powered-by {
    font-size: 0.85rem;
    margin-top: 10px;
    opacity: 0.6;
}
.powered-by a {
    color: #fff;
    font-weight: 500;
    text-decoration: none;
}
.powered-by a:hover {
    text-decoration: underline;
    opacity: 1;
}
#partners {
    background-color: ;
    padding: 120px 0;
}

.partners-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 60px; /* Space between logos */
}

/* Clean container - no border, bg, or shadow */
.partner-logo {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0;
    margin: 0;
}

/* Logo image */
.partner-logo img {
    display: block;
    max-width: 160px;
    max-height: 70px;
    filter: grayscale(100%);  /* Black and white by default */
    opacity: 0.6;             /* Slightly faded */
    transition: all 0.3s ease-in-out;
    background: none !important;
}

/* Hover effect */
.partner-logo:hover img {
    filter: grayscale(0%);  /* Show full color */
    opacity: 1;             /* Fully visible */
    transform: scale(1.1);  /* Slight zoom */
}

.partner-cta {
    text-align: center;
    margin-top: 80px;
    padding-top: 40px;
    border-top: 1px solid var(--border-color);
}

.partner-cta h3 {
    font-size: 1.8rem;
    margin-bottom: 25px;
}
/* =================================== */
/*    FINAL SEARCH OVERLAY STYLES      */
/* =================================== */

/* The Search Icon in the Header */
.search-trigger {
    cursor: pointer;
    color: var(--text-secondary);
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.3s ease;
}
.search-trigger:hover {
    color: var(--primary-blue);
}

/* The Full-Screen Overlay */
.search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(248, 249, 250, 0.8); /* Light background with transparency */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 9999;
    display: flex;
    align-items: flex-start; /* Align content to the top */
    justify-content: center;
    padding-top: 15vh; /* Push content down from the top */
    
    /* Animation */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0s 0.4s; /* Delay hiding visibility */
}
.search-overlay.active {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.4s ease;
}

/* The Close (X) Button */
.search-overlay-close {
    position: absolute;
    top: 30px;
    right: 40px;
    font-size: 3rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: transform 0.3s ease, color 0.3s ease;
}
.search-overlay-close:hover {
    transform: rotate(90deg);
    color: var(--dark-navy);
}

/* The Content Wrapper (Input + Results) */
.search-overlay-content {
    width: 100%;
    max-width: 700px;
    position: relative;
    /* Animation for the content */
    transform: translateY(20px);
    transition: transform 0.4s ease 0.1s;
}
.search-overlay.active .search-overlay-content {
    transform: translateY(0);
}


/* The Large Search Input */
.overlay-search-input {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 3px solid var(--border-color);
    font-family: 'Poppins', sans-serif;
    font-size: 2rem; /* Large font */
    font-weight: 600;
    color: var(--dark-navy);
    padding: 15px 0;
    outline: none;
    transition: border-color 0.3s ease;
}
.overlay-search-input:focus {
    border-bottom-color: var(--primary-blue);
}
.overlay-search-input::placeholder {
    color: #ced4da;
}

/* The Results List */
.search-overlay-results {
    margin-top: 30px;
    max-height: 50vh; /* Limit height and allow scrolling */
    overflow-y: auto;
}

/* Group Headers in Results */
.search-group-header {
    padding: 10px 20px;
    background-color: var(--background-light);
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border-color);
    border-top: 1px solid var(--border-color);
}
.search-overlay-results > .search-group-header:first-child {
    border-top: none;
}

/* Individual Result Item */
.search-result-item {
    display: block;
    padding: 12px 20px;
    text-decoration: none;
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.2s ease;
}
.search-result-item:last-child {
    border-bottom: none;
}
.search-result-item:hover {
    background-color: #f1f5f9;
}
.search-result-snippet {
    display: block;
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.5;
}
.search-result-snippet mark {
    background-color: #FFDE59;
    color: #333;
    font-weight: 600;
    padding: 1px 2px;
    border-radius: 3px;
}
.search-no-results {
    padding: 25px;
    text-align: center;
    color: var(--text-secondary);
    font-style: italic;
}
#hero-recap {
    padding: 80px 0;
    background-color: var(--background-white);
}

.recap-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr; /* Image is slightly smaller than text */
    align-items: center;
    gap: 60px;
}

.recap-image img {
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 20px 50px var(--shadow-hover-color);
}

.recap-tagline {
    display: block;
    font-weight: 600;
    color: var(--primary-blue);
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.recap-content h1 {
    font-size: 2.8rem;
    line-height: 1.3;
    margin-bottom: 20px;
}

.recap-content p {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-bottom: 30px;
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .recap-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .recap-image {
        margin-bottom: 40px;
    }
}
.auth-section-v2 {
    padding: 40px 20px;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url(""); /* From your main CSS */
}
.auth-container-v2 {
    width: 100%;
    max-width: 1000px; /* Wider container */
    background: var(--background-white);
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.2);
    border-radius: 24px;
    display: grid;
    grid-template-columns: 40% 60%;
    overflow: hidden;
}
.auth-image-panel-v2 {
    background: linear-gradient(160deg, var(--secondary-blue) 0%, var(--primary-blue) 100%);
}
.auth-form-panel-v2 {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px;
}
.form-wrapper-v2 {
    width: 100%;
    max-width: 450px;
}
.form-wrapper-v2 .form-title {
    font-size: 2rem;
    text-align: left; /* Aligned left as in image */
    margin-bottom: 25px;
}

/* New, beautiful toggle switch */
.user-type-toggle {
    display: flex;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 5px;
    margin-bottom: 30px;
}
.user-type-toggle label {
    flex: 1;
    position: relative;
}
.user-type-toggle input[type="radio"] {
    display: none; /* Hide the actual radio button */
}
.user-type-toggle .toggle-button {
    display: block;
    padding: 10px;
    text-align: center;
    font-weight: 600;
    color: var(--text-secondary);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.user-type-toggle input[type="radio"]:checked + .toggle-button {
    background-color: var(--primary-blue);
    color: var(--background-white);
    box-shadow: 0 5px 15px rgba(0, 119, 182, 0.2);
}

@media (max-width: 992px) {
    .auth-container-v2 { grid-template-columns: 1fr; }
    .auth-image-panel-v2 { display: none; }
}
.profile-card {
    background-color: var(--background-white);
    border-radius: 20px;
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 30px var(--shadow-color);
    padding: 40px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.profile-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px var(--shadow-hover-color);
}
/* =================================== */
/*           STAFF BADGE STYLE         */
/* =================================== */

.staff-badge {
    background-color: var(--primary-blue);
    color: var(--background-white);
    padding: 3px 10px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: 8px; /* Space between name and badge */
}
/* =================================== */
/*        ACTIVATION PAGE STYLES       */
/* =================================== */

#activation-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 70vh;
    padding: 40px 0;
}

.activation-box {
    max-width: 550px;
    margin: 0 auto;
    text-align: center;
    padding: 50px !important; /* Override default tilt-card padding */
}

.icon-success {
    color: #198754; /* Bootstrap success green */
    margin-bottom: 20px;
}
.icon-danger {
    color: #dc3545; /* Bootstrap danger red */
    margin-bottom: 20px;
}

.title-success {
    font-size: 2.2rem;
    color: #198754;
    margin-bottom: 15px;
}
.title-danger {
    font-size: 2.2rem;
    color: #dc3545;
    margin-bottom: 15px;
}

.message-text {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-bottom: 30px;
}
/* =================================== */
/*    ACTIVATION PAGE REDIRECT TEXT    */
/* =================================== */
.redirect-message {
    font-style: italic;
    color: var(--text-secondary);
    margin-top: 20px;
}
/* =================================== */
/*   MULTI-STEP REGISTRATION FORM      */
/* =================================== */
.progress-bar {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
    position: relative;
}
.progress-bar::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    height: 4px;
    width: 100%;
    background-color: var(--border-color);
    z-index: 1;
}
.progress-step {
    position: relative;
    z-index: 2;
    text-align: center;
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 0.9rem;
}
.progress-step::before {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    background-color: var(--background-white);
    border: 3px solid var(--border-color);
    border-radius: 50%;
    margin: 0 auto 10px auto;
    transition: all 0.4s ease;
}
.progress-step.active::before {
    border-color: var(--primary-blue);
    background-color: var(--primary-blue);
}
.progress-step.active {
    color: var(--primary-blue);
    font-weight: 700;
}
.form-step {
    display: none;
    animation: fadeIn 0.5s;
}
.form-step.active {
    display: block;
}
@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* Form Fields */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-group select, .form-group textarea { width: 100%; }
.checkbox-group { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.checkbox-group label { display: flex; align-items: center; gap: 8px; }
/* =================================== */
/*    NEW INTERACTIVE DONATION PAGE    */
/* =================================== */

.bank-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 30px;
    max-width: 900px;
    margin: 0 auto;
}

.bank-card {
    padding: 30px !important;
}

.bank-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.bank-logo {
    max-height: 50px;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: all 0.3s ease;
}
.bank-card:hover .bank-logo {
    filter: grayscale(0%);
    opacity: 1;
}

.reveal-trigger {
    color: var(--text-secondary);
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.bank-card.open .reveal-trigger {
    transform: rotate(180deg);
}

.account-details {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out, margin-top 0.5s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid transparent; /* Prepare for border */
    padding-top: 0;
}
.bank-card.open .account-details {
    max-height: 200px; /* Animate to this height */
    margin-top: 25px;
    border-top-color: var(--border-color);
    padding-top: 25px;
}

.account-info {
    display: flex;
    flex-direction: column;
}
.account-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
}
.account-number {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--dark-navy);
    letter-spacing: 1px;
}
.account-branch {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--primary-blue);
}

.copy-btn {
    background-color: var(--background-light);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 8px 15px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}
.copy-btn:hover {
    background-color: var(--primary-blue);
    color: var(--background-white);
    border-color: var(--primary-blue);
}
.copy-btn.copied {
    background-color: #198754; /* Green for success */
    color: var(--background-white);
    border-color: #198754;
}

@media (max-width: 480px) {
    .bank-grid {
        grid-template-columns: 1fr;
    }
}
/* =================================== */
/*    FINAL DONATION CARD STYLES       */
/* =================================== */

.account-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

/* This is the main card container */
.account-card {
    padding: 30px !important;
    display: flex;
    flex-direction: column; /* Stacks the logo and details vertically */
    gap: 20px; /* Space between logo and details */
}

/* The logo image itself */
.account-card .bank-logo {
    max-width: 180px;      /* Set a maximum width */
    height: 60px;          /* Set a consistent height for the logo area */
    object-fit: contain;   /* THIS IS THE FIX: Prevents squeezing and stretching */
    align-self: center;    /* Centers the logo horizontally in the card */
    
    filter: grayscale(100%);
    opacity: 0.7;
    transition: all 0.3s ease;
}
.account-card:hover .bank-logo {
    filter: grayscale(0%);
    opacity: 1;
}

/* The rest of the card styles */
.account-details-v2 {
    border-top: 1px solid var(--border-color);
    padding-top: 20px;
}
.account-label {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-secondary);
    display: block;
    margin-bottom: 5px;
}
.account-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}
.account-number {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--dark-navy);
    letter-spacing: 1px;
    word-break: break-all; /* Prevents long numbers from breaking the layout */
}
.account-branch {
    font-size: 0.9rem;
    color: var(--primary-blue);
    font-weight: 500;
    margin-top: 5px;
    display: block;
}
.copy-btn-v2 {
    background: transparent;
    border: 1px solid var(--border-color);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    flex-shrink: 0;
}
.copy-btn-v2:hover {
    background-color: var(--primary-blue);
    color: var(--background-white);
    border-color: var(--primary-blue);
}
.copy-btn-v2.copied {
    background-color: #198754;
    color: var(--background-white);
    border-color: #198754;
}
/* =================================== */
/*      LANGUAGE CHOICE POPUP          */
/* =================================== */

.language-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(10, 25, 47, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0s 0.4s;
}

.language-popup-overlay.active {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.4s ease;
}

.language-popup-content {
    background: var(--background-white);
    padding: 40px;
    border-radius: 20px;
    text-align: center;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 20px 50px rgba(0,0,0,0.2);
    transform: scale(0.95);
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.1s;
}

.language-popup-overlay.active .language-popup-content {
    transform: scale(1);
}

.popup-logo {
    max-height: 70px;
    margin-bottom: 20px;
}

.language-popup-content h2 {
    font-size: 1.8rem;
    margin-bottom: 10px;
}

.language-popup-content p {
    color: var(--text-secondary);
    margin-bottom: 30px;
}

.language-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
}
/* =================================== */
/*        ADMIN LOGIN/REGISTER CSS     */
/* =================================== */
/* =================================== */
/*        POPUP (MODAL) STYLES         */
/* =================================== */
.modal-overlay { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(10,25,47,0.8); backdrop-filter:blur(5px); z-index:1000; display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transition:all .3s ease; }
.modal-overlay.active { opacity:1; visibility:visible; }
.modal-content { background:var(--background-white); border-radius:15px; padding:40px; width:90%; max-width:500px; position:relative; transform:scale(.95); transition:all .3s ease; }
.modal-overlay.active .modal-content { transform:scale(1); }
.modal-close { position:absolute; top:15px; right:20px; font-size:2.5rem; color:var(--text-secondary); cursor:pointer; line-height: 1; }
.modal-content h2 { margin-top:0; text-align: center; }
.auth-extra-links { display: flex; justify-content: space-between; margin-top: 20px; font-size: 0.9rem; }