/* ===== BASE STYLES ===== */
:root {
    /* Updated brighter colors as requested */
    --green-primary: #4CAF50;  /* Brighter green */
    --green-light: #8BC34A;    /* Lighter green */
    --orange-primary: #FF9800; /* Brighter orange */
    --orange-light: #FFB74D;   /* Lighter orange */
    
    /* Neutral colors */
    --white: #ffffff;
    --light-gray: #f5f7fa;
    --medium-gray: #e0e6ed;
    --dark-gray: #6b7280;
    --text-dark: #2c3e50;
    
    /* Shadows and effects */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
    
    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Open Sans', sans-serif;
    color: var(--text-dark);
    line-height: 1.6;
    overflow-x: hidden;
}

h1, h2, h3, h4 {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    line-height: 1.3;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.section {
    padding: 80px 0;
}

.section-header {
    text-align: center;
    margin-bottom: 60px;
}

.section-title {
    font-size: 2.5rem;
    margin-bottom: 15px;
    color: var(--text-dark);
    position: relative;
    display: inline-block;
}

.section-title::after {
    content: '';
    position: absolute;
    width: 60px;
    height: 4px;
    background: var(--green-primary);
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 2px;
}

.section-subtitle {
    font-size: 1.1rem;
    color: var(--dark-gray);
    max-width: 600px;
    margin: 0 auto;
}

/* ===== BUTTONS ===== */
.btn {
    display: inline-block;
    padding: 12px 28px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    transition: all var(--transition-normal);
    cursor: pointer;
    border: none;
    font-size: 1rem;
}

.btn-primary {
    background-color: var(--green-primary);
    color: var(--white);
}

.btn-primary:hover {
    background-color: #3d8b40;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-secondary {
    background-color: var(--orange-primary);
    color: var(--white);
}

.btn-secondary:hover {
    background-color: #e68900;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

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

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

/* ===== HEADER & NAVIGATION ===== */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-normal);
}

.header.scrolled {
    background-color: var(--white);
    box-shadow: var(--shadow-md);
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
}

.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--text-dark);
}

.logo-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: var(--green-primary);
    color: var(--white);
    border-radius: 6px;
    margin-right: 10px;
    font-weight: 700;
}

.nav-menu {
    display: flex;
    list-style: none;
    align-items: center;
}

.nav-item {
    margin-left: 30px;
    position: relative;
}

.nav-link {
    text-decoration: none;
    color: var(--text-dark);
    font-weight: 500;
    font-size: 1rem;
    transition: color var(--transition-fast);
    display: flex;
    align-items: center;
}

.nav-link i {
    margin-left: 5px;
    font-size: 0.8rem;
}

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

.nav-item.active .nav-link {
    color: var(--green-primary);
    font-weight: 600;
}

/* Dropdown Menu */
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--white);
    min-width: 200px;
    box-shadow: var(--shadow-lg);
    border-radius: 6px;
    padding: 10px 0;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all var(--transition-normal);
    z-index: 100;
}

.dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-menu li {
    width: 100%;
}

.dropdown-menu a {
    display: block;
    padding: 10px 20px;
    text-decoration: none;
    color: var(--text-dark);
    font-weight: 400;
    transition: all var(--transition-fast);
}

.dropdown-menu a:hover {
    background-color: var(--light-gray);
    color: var(--green-primary);
    padding-left: 25px;
}

/* Mobile menu toggle */
.menu-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
    width: 30px;
    height: 24px;
    justify-content: space-between;
}

.menu-toggle span {
    height: 3px;
    width: 100%;
    background-color: var(--text-dark);
    border-radius: 2px;
    transition: all var(--transition-normal);
}

/* ===== HERO SLIDER ===== */
.hero-slider {
    height: 100vh;
    max-height: 800px;
    position: relative;
    margin-top: 80px;
}

.slider-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity var(--transition-slow);
}

.slide.active {
    opacity: 1;
}

.slide-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 1;
}

.slide-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 2;
}

.slide-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: var(--white);
    z-index: 3;
    max-width: 800px;
    width: 90%;
    padding: 0 20px;
}

.slide-title {
    font-size: 3rem;
    margin-bottom: 20px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.slide-text {
    font-size: 1.2rem;
    margin-bottom: 30px;
    opacity: 0.9;
}

.slide-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
}

/* Slider Controls */
.slider-controls {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 20px;
}

.slider-prev,
.slider-next {
    background-color: rgba(255, 255, 255, 0.2);
    color: var(--white);
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: all var(--transition-normal);
    backdrop-filter: blur(5px);
}

.slider-prev:hover,
.slider-next:hover {
    background-color: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

.slider-dots {
    display: flex;
    gap: 10px;
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all var(--transition-normal);
}

.dot.active {
    background-color: var(--white);
    transform: scale(1.2);
}

/* ===== SECTION 1: WHO WE ARE + VALUES ===== */
.who-we-are {
    background-color: var(--light-gray);
}

.two-column-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
}

.about-card {
    background-color: var(--white);
    padding: 40px;
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-normal);
    height: 100%;
}

.about-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.card-title {
    font-size: 1.8rem;
    margin-bottom: 20px;
    color: var(--green-primary);
}

.card-text {
    margin-bottom: 20px;
    color: var(--dark-gray);
}

.values-title {
    font-size: 1.8rem;
    margin-bottom: 30px;
    color: var(--text-dark);
}

.values-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.value-item {
    background-color: var(--white);
    padding: 25px;
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-normal);
}

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

.value-icon {
    width: 60px;
    height: 60px;
    background-color: rgba(76, 175, 80, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    color: var(--green-primary);
    font-size: 1.5rem;
}

.value-title {
    font-size: 1.3rem;
    margin-bottom: 10px;
    color: var(--text-dark);
}

.value-text {
    color: var(--dark-gray);
    font-size: 0.95rem;
}

/* ===== SECTION 2: WHAT WE DO ===== */
.programs {
    position: relative;
    color: var(--white);
    overflow: hidden;
}

.video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1;
}

.video-fallback {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}

.programs-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    position: relative;
    z-index: 2;
}

.program-card {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    overflow: hidden;
    backdrop-filter: blur(10px);
    transition: all var(--transition-normal);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.program-card:hover {
    transform: translateY(-10px);
    background-color: rgba(255, 255, 255, 0.15);
}

.program-image {
    height: 200px;
    background-size: cover;
    background-position: center;
}

.program-content {
    padding: 25px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.program-title {
    font-size: 1.5rem;
    margin-bottom: 15px;
    color: var(--white);
}

.program-text {
    margin-bottom: 20px;
    color: rgba(255, 255, 255, 0.9);
    flex-grow: 1;
}

.program-link {
    color: var(--orange-primary);
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    transition: all var(--transition-fast);
}

.program-link i {
    margin-left: 8px;
    transition: transform var(--transition-fast);
}

.program-link:hover {
    color: var(--orange-light);
}

.program-link:hover i {
    transform: translateX(5px);
}

/* ===== SECTION 3: OUR APPROACH ===== */
.approach-content {
    padding-right: 40px;
}

.approach-title {
    font-size: 1.8rem;
    margin-bottom: 20px;
    color: var(--text-dark);
}

.approach-text {
    margin-bottom: 20px;
    color: var(--dark-gray);
}

/* Venn Diagram */
.venn-diagram {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.venn-circle {
    transition: all var(--transition-normal);
    cursor: pointer;
}

.venn-circle.community:hover {
    fill-opacity: 0.4;
    stroke-width: 4;
}

.venn-circle.policy:hover {
    fill-opacity: 0.4;
    stroke-width: 4;
}

.venn-circle.sustainability:hover {
    fill-opacity: 0.4;
    stroke-width: 4;
}

.venn-label {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 16px;
    fill: var(--text-dark);
}

.intersection-label {
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    fill: var(--dark-gray);
    font-weight: 500;
}

.center-label {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 14px;
    fill: var(--green-primary);
}

/* ===== SECTION 4: IMPACT ===== */
.impact {
    background-color: var(--light-gray);
}

.impact-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-bottom: 60px;
}

.stat-item {
    background-color: var(--white);
    padding: 30px;
    border-radius: 10px;
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-normal);
}

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

.stat-icon {
    width: 70px;
    height: 70px;
    background-color: rgba(76, 175, 80, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: var(--green-primary);
    font-size: 1.8rem;
}

.stat-number {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--green-primary);
    margin-bottom: 10px;
}

.stat-text {
    color: var(--dark-gray);
    font-size: 1.1rem;
}

.impact-stories {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.story-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
    background-color: var(--white);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.story-image {
    height: 300px;
    background-size: cover;
    background-position: center;
}

.story-content {
    padding: 40px;
}

.story-title {
    font-size: 1.6rem;
    margin-bottom: 15px;
    color: var(--text-dark);
}

.story-text {
    margin-bottom: 20px;
    color: var(--dark-gray);
}

.story-link {
    color: var(--orange-primary);
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    transition: all var(--transition-fast);
}

.story-link i {
    margin-left: 8px;
    transition: transform var(--transition-fast);
}

.story-link:hover {
    color: var(--orange-light);
}

.story-link:hover i {
    transform: translateX(5px);
}

/* ===== SECTION 5: STAY CONNECTED ===== */
.stay-connected {
    background-color: var(--green-primary);
    color: var(--white);
    padding: 60px 0;
}

.connect-content {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

.connect-title {
    font-size: 2.2rem;
    margin-bottom: 15px;
    color: var(--white);
}

.connect-text {
    font-size: 1.1rem;
    margin-bottom: 30px;
    opacity: 0.9;
}

.newsletter-form {
    margin-bottom: 40px;
}

.form-group {
    display: flex;
    max-width: 500px;
    margin: 0 auto 15px;
}

.form-group input {
    flex-grow: 1;
    padding: 15px 20px;
    border: none;
    border-radius: 4px 0 0 4px;
    font-family: 'Open Sans', sans-serif;
    font-size: 1rem;
}

.form-group button {
    border-radius: 0 4px 4px 0;
    padding: 15px 30px;
}

.form-note {
    font-size: 0.9rem;
    opacity: 0.8;
}

.social-links {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: var(--white);
    font-size: 1.2rem;
    transition: all var(--transition-normal);
    text-decoration: none;
}

.social-link:hover {
    background-color: var(--white);
    color: var(--green-primary);
    transform: translateY(-3px);
}

/* ===== FOOTER ===== */
.footer {
    background-color: var(--text-dark);
    color: var(--white);
    padding: 60px 0 30px;
}

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

.footer-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--white);
    margin-bottom: 20px;
}

.footer-about {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    line-height: 1.7;
}

.footer-title {
    font-size: 1.3rem;
    margin-bottom: 20px;
    color: var(--white);
    position: relative;
    padding-bottom: 10px;
}

.footer-title::after {
    content: '';
    position: absolute;
    width: 40px;
    height: 3px;
    background-color: var(--green-primary);
    bottom: 0;
    left: 0;
    border-radius: 2px;
}

.footer-links {
    list-style: none;
}

.footer-links li {
    margin-bottom: 12px;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.footer-links a:hover {
    color: var(--green-primary);
    padding-left: 5px;
}

.footer-contact {
    list-style: none;
}

.footer-contact li {
    margin-bottom: 15px;
    display: flex;
    align-items: flex-start;
    color: rgba(255, 255, 255, 0.7);
}

.footer-contact i {
    margin-right: 10px;
    color: var(--green-primary);
    width: 20px;
}

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

.copyright {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
}

.footer-legal {
    display: flex;
    gap: 20px;
}

.footer-legal a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color var(--transition-fast);
}

.footer-legal a:hover {
    color: var(--green-primary);
}

/* ===== ANIMATIONS ===== */
[data-aos] {
    opacity: 0;
    transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-aos="fade-up"] {
    transform: translateY(30px);
}

[data-aos="fade-down"] {
    transform: translateY(-30px);
}

[data-aos="fade-right"] {
    transform: translateX(-30px);
}

[data-aos="fade-left"] {
    transform: translateX(30px);
}

[data-aos].aos-animate {
    opacity: 1;
    transform: translate(0);
}

/* ===== RESPONSIVE STYLES ===== */
@media (max-width: 992px) {
    .two-column-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .programs-container {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .impact-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .story-card {
        grid-template-columns: 1fr;
    }
    
    .footer-content {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .approach-content {
        padding-right: 0;
    }
    
    .values-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .section {
        padding: 60px 0;
    }
    
    .section-title {
        font-size: 2rem;
    }
    
    .slide-title {
        font-size: 2.2rem;
    }
    
    .slide-text {
        font-size: 1.1rem;
    }
    
    .slide-buttons {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }
    
    .btn {
        width: 100%;
        max-width: 250px;
        text-align: center;
    }
    
    .menu-toggle {
        display: flex;
    }
    
    .nav-menu {
        position: fixed;
        top: 80px;
        left: 0;
        width: 100%;
        background-color: var(--white);
        flex-direction: column;
        align-items: flex-start;
        padding: 20px;
        box-shadow: var(--shadow-md);
        transform: translateY(-100%);
        opacity: 0;
        visibility: hidden;
        transition: all var(--transition-normal);
        z-index: 999;
    }
    
    .nav-menu.active {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }
    
    .nav-item {
        margin: 0 0 20px 0;
        width: 100%;
    }
    
    .nav-item.cta {
        margin-top: 20px;
    }
    
    .dropdown-menu {
        position: static;
        box-shadow: none;
        background-color: var(--light-gray);
        opacity: 1;
        visibility: visible;
        transform: none;
        margin-top: 10px;
        padding: 10px;
        display: none;
    }
    
    .dropdown.active .dropdown-menu {
        display: block;
    }
    
    .hero-slider {
        height: 80vh;
        margin-top: 60px;
    }
    
    .footer-bottom {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
}

@media (max-width: 576px) {
    .impact-stats {
        grid-template-columns: 1fr;
    }
    
    .footer-content {
        grid-template-columns: 1fr;
    }
    
    .form-group {
        flex-direction: column;
    }
    
    .form-group input {
        border-radius: 4px;
        margin-bottom: 10px;
    }
    
    .form-group button {
        border-radius: 4px;
        width: 100%;
    }
}
/* ===== GRAPHIC LINES & DECORATIVE ELEMENTS ===== */
/* Add decorative lines to sections */
.section::before {
    content: '';
    position: absolute;
    width: 100px;
    height: 4px;
    background: linear-gradient(90deg, #4CAF50, #FF9800);
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 2px;
}

.section {
    position: relative;
    padding-top: 100px;
}

.section-header {
    position: relative;
}

.section-header::after {
    content: '';
    position: absolute;
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, transparent, #4CAF50, transparent);
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
}

/* Animated background dots */
.bg-dots {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(#4CAF50 1px, transparent 1px);
    background-size: 30px 30px;
    opacity: 0.05;
    z-index: -1;
}

/* Floating shapes animation */
.floating-shapes {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
    pointer-events: none;
}

.shape {
    position: absolute;
    background: rgba(76, 175, 80, 0.1);
    border-radius: 50%;
    animation: float 20s infinite linear;
}

.shape:nth-child(1) {
    width: 80px;
    height: 80px;
    top: 10%;
    left: 10%;
    animation-delay: 0s;
}

.shape:nth-child(2) {
    width: 120px;
    height: 120px;
    top: 60%;
    right: 10%;
    background: rgba(255, 152, 0, 0.1);
    animation-delay: -5s;
    animation-duration: 25s;
}

.shape:nth-child(3) {
    width: 60px;
    height: 60px;
    bottom: 20%;
    left: 20%;
    animation-delay: -10s;
    animation-duration: 15s;
}

@keyframes float {
    0% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-20px) rotate(180deg);
    }
    100% {
        transform: translateY(0) rotate(360deg);
    }
}

/* Dynamic lines between sections */
.connector-line {
    position: absolute;
    height: 60px;
    width: 2px;
    background: linear-gradient(to bottom, #4CAF50, #FF9800);
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}

/* ===== ENHANCED NAVIGATION ===== */
.nav-link {
    position: relative;
    padding: 8px 0;
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, #4CAF50, #FF9800);
    bottom: 0;
    left: 0;
    transition: width 0.3s ease;
    border-radius: 2px;
}

.nav-link:hover::after,
.nav-item.active .nav-link::after {
    width: 100%;
}

.nav-item.cta .btn {
    position: relative;
    overflow: hidden;
    z-index: 1;
    border-radius: 30px;
    padding: 10px 25px;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
    transition: all 0.3s ease;
}

.nav-item.cta .btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.7s ease;
    z-index: -1;
}

.nav-item.cta .btn:hover::before {
    left: 100%;
}

.nav-item.cta .btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(76, 175, 80, 0.4);
}

/* Animated logo */
.logo {
    transition: transform 0.3s ease;
}

.logo:hover {
    transform: scale(1.05);
}

.logo-icon {
    position: relative;
    overflow: hidden;
}

.logo-icon::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    top: -100%;
    left: -100%;
    transition: all 0.5s ease;
}

.logo:hover .logo-icon::after {
    top: 100%;
    left: 100%;
}

/* ===== ENHANCED HERO SECTION ===== */
.hero-slider {
    overflow: hidden;
}

.hero-slider::before {
    content: '';
    position: absolute;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
    top: -50%;
    left: -50%;
    animation: shimmer 8s infinite linear;
    z-index: 1;
}

@keyframes shimmer {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.hero-title {
    animation: fadeInUp 1s ease;
}

.hero-text {
    animation: fadeInUp 1s ease 0.2s both;
}

.hero-buttons {
    animation: fadeInUp 1s ease 0.4s both;
}

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

/* ===== ENHANCED CARDS & ELEMENTS ===== */
.value-item, .program-card, .stat-item, .about-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.value-item::before, .program-card::before, .stat-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.7s ease;
    z-index: 1;
}

.value-item:hover::before, .program-card:hover::before, .stat-item:hover::before {
    left: 100%;
}

/* Add corner accents to cards */
.about-card::after {
    content: '';
    position: absolute;
    width: 30px;
    height: 30px;
    border-top: 3px solid #4CAF50;
    border-left: 3px solid #4CAF50;
    top: 15px;
    left: 15px;
    opacity: 0.5;
    transition: all 0.3s ease;
}

.about-card:hover::after {
    width: 40px;
    height: 40px;
    opacity: 1;
}

/* ===== ANIMATED STAT NUMBERS ===== */
.stat-number {
    position: relative;
    display: inline-block;
}

.stat-number::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #4CAF50, #FF9800);
    bottom: -5px;
    left: 0;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s ease;
}

.stat-item:hover .stat-number::after {
    transform: scaleX(1);
}

/* ===== ENHANCED BUTTONS ===== */
.btn {
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: all 0.3s ease;
}

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

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

.btn-primary {
    background: linear-gradient(45deg, #4CAF50, #8BC34A);
    border: none;
}

.btn-secondary {
    background: linear-gradient(45deg, #FF9800, #FFB74D);
    border: none;
}

/* ===== ANIMATED UNDERLINES FOR LINKS ===== */
.program-link, .story-link {
    position: relative;
    display: inline-block;
}

.program-link::after, .story-link::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    background: currentColor;
    bottom: -2px;
    left: 0;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s ease;
}

.program-link:hover::after, .story-link:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* ===== PULSING CALL-TO-ACTION ===== */
.pulse {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.4);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(76, 175, 80, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(76, 175, 80, 0);
    }
}

/* ===== ENHANCED FORM ===== */
.form-group input {
    transition: all 0.3s ease;
    border: 2px solid transparent;
    background: rgba(255, 255, 255, 0.9);
}

.form-group input:focus {
    outline: none;
    border-color: #4CAF50;
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.2);
}

/* ===== SCROLL PROGRESS INDICATOR ===== */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: linear-gradient(90deg, #4CAF50, #FF9800);
    z-index: 1001;
    transition: width 0.1s ease;
}

/* ===== RESPONSIVE ENHANCEMENTS ===== */
@media (max-width: 768px) {
    .shape {
        display: none;
    }
    
    .section::before {
        width: 60px;
    }
}
/* Remove all unnecessary spacing */
.hero-slider {
    margin-bottom: 0 !important;
}

.who-we-are {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Optional: If you want sections to touch each other */
.section {
    padding-top: 60px; /* Reduced from 100px */
    padding-bottom: 60px; /* Reduced from 80px */
}

/* Remove the top decorative line if you want sections to be flush */
.section::before {
    display: none; /* Comment this out if you want to keep the lines */
}
.programs .section-title {
    color: #f4f2f0 !important; /* Orange stands out better on dark */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
}

.programs .section-subtitle {
    color: #f6f5f2 !important; /* Lighter orange */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
/* Fix Programs section text visibility */
.programs .section-title {
    color: #ffffff; /* White for maximum contrast */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); /* Add shadow for better readability */
}

.programs .section-subtitle {
    color: rgba(255, 255, 255, 0.9); /* Lighter white with transparency */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Also ensure program cards have good contrast */
.program-title {
    font-size: 1.5rem;
    margin-bottom: 15px;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.program-text {
    margin-bottom: 20px;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

/* Make the dark overlay stronger for better text readability */
.programs::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8); /* Increased from 0.7 to 0.8 */
    z-index: 1;
}
/* ===== APPROACH SECTION - PROMO CARD ===== */
.promo-card {
    background: linear-gradient(145deg, #2c3e50, #1a252f);
    border-radius: 20px;
    padding: 30px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.promo-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
    border-color: rgba(76, 175, 80, 0.3);
}

/* Card Header */
.promo-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.promo-label {
    background: #4CAF50;
    color: white;
    padding: 6px 15px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    box-shadow: 0 4px 10px rgba(76, 175, 80, 0.3);
}

.promo-stats .stat {
    text-align: right;
}

.stat-number {
    font-size: 1.8rem;
    font-weight: 700;
    color: #4CAF50;
    display: block;
    line-height: 1;
}

.stat-label {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
    display: block;
    margin-top: 4px;
}

/* Profile Section */
.promo-profile {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
}

.promo-profile:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(76, 175, 80, 0.2);
}

.profile-image {
    position: relative;
    margin-right: 15px;
    flex-shrink: 0;
}

.profile-image img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #4CAF50;
    transition: all 0.3s ease;
}

.promo-profile:hover .profile-image img {
    transform: scale(1.05);
    border-color: #8BC34A;
}

.profile-badge {
    position: absolute;
    bottom: 0;
    right: 0;
    background: #FF9800;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.8rem;
    border: 2px solid #2c3e50;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.profile-info {
    flex-grow: 1;
}

.profile-name {
    color: white;
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 5px;
}

.profile-role {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    margin: 0;
}

/* Headline with Highlights */
.promo-headline {
    margin-bottom: 20px;
}

.promo-headline h3 {
    color: white;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
}

.highlight-green {
    color: #4CAF50;
    font-weight: 700;
    position: relative;
    display: inline-block;
}

.highlight-green::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 6px;
    background: rgba(76, 175, 80, 0.2);
    bottom: 2px;
    left: 0;
    z-index: -1;
    border-radius: 3px;
}

.highlight-orange {
    color: #FF9800;
    font-weight: 700;
    position: relative;
    display: inline-block;
}

.highlight-orange::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 6px;
    background: rgba(255, 152, 0, 0.2);
    bottom: 2px;
    left: 0;
    z-index: -1;
    border-radius: 3px;
}

/* Description */
.promo-description {
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.promo-description p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

/* Checklist */
.promo-checklist {
    margin-bottom: 25px;
}

.checklist-title {
    color: white;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}

.checklist-title::before {
    content: '';
    width: 20px;
    height: 3px;
    background: #4CAF50;
    margin-right: 10px;
    border-radius: 2px;
}

.checklist-items {
    list-style: none;
    padding: 0;
    margin: 0;
}

.checklist-items li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 12px;
    transition: all 0.3s ease;
    padding: 8px;
    border-radius: 8px;
}

.checklist-items li:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateX(5px);
}

.checklist-icon {
    width: 20px;
    height: 20px;
    background: rgba(76, 175, 80, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    flex-shrink: 0;
    margin-top: 2px;
}

.checklist-icon i {
    color: #4CAF50;
    font-size: 0.8rem;
}

.checklist-text {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95rem;
    line-height: 1.4;
    flex-grow: 1;
}

/* Call to Action Button */
.promo-cta {
    text-align: center;
}

.btn-promo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(90deg, #4CAF50, #8BC34A);
    color: white;
    padding: 12px 25px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.btn-promo::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.7s ease;
    z-index: -1;
}

.btn-promo:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(76, 175, 80, 0.4);
    color: white;
}

.btn-promo:hover::before {
    left: 100%;
}

.btn-promo i {
    margin-left: 8px;
    transition: transform 0.3s ease;
}

.btn-promo:hover i {
    transform: translateX(5px);
}

/* Decorative Accents */
.promo-accent {
    position: absolute;
    border-radius: 50%;
    opacity: 0.1;
    z-index: 0;
}

.accent-green {
    width: 100px;
    height: 100px;
    background: #4CAF50;
    top: -30px;
    right: -30px;
}

.accent-orange {
    width: 80px;
    height: 80px;
    background: #FF9800;
    bottom: -20px;
    left: -20px;
}

/* Ensure card content stays above accents */
.promo-card > *:not(.promo-accent) {
    position: relative;
    z-index: 1;
}

/* Responsive Design */
@media (max-width: 992px) {
    .two-column-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .approach-content {
        padding-right: 0;
        margin-bottom: 30px;
    }
    
    .promo-card {
        max-width: 600px;
        margin: 0 auto;
    }
}

@media (max-width: 576px) {
    .promo-card {
        padding: 20px;
    }
    
    .promo-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    
    .promo-stats .stat {
        text-align: left;
    }
    
    .promo-headline h3 {
        font-size: 1.3rem;
    }
    
    .btn-promo {
        width: 100%;
        justify-content: center;
    }
    
    .promo-profile {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }
    
    .profile-image {
        margin-right: 0;
        margin-bottom: 15px;
    }
}
/* ===== APPROACH VISUAL CARD ===== */
.approach-visual-card {
    background: linear-gradient(145deg, #2c3e50, #1a252f);
    border-radius: 20px;
    padding: 30px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.approach-visual-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
    border-color: rgba(76, 175, 80, 0.3);
}

/* Header with Circular Photo */
.approach-header {
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.approach-avatar {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto 20px;
}

.approach-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #4CAF50;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 2;
}

.avatar-ring {
    position: absolute;
    border-radius: 50%;
    border: 2px solid;
    animation: pulse-ring 3s infinite;
}

.avatar-ring.ring-1 {
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    border-color: rgba(76, 175, 80, 0.3);
    animation-delay: 0s;
}

.avatar-ring.ring-2 {
    top: -20px;
    left: -20px;
    right: -20px;
    bottom: -20px;
    border-color: rgba(255, 152, 0, 0.3);
    animation-delay: 1s;
}

.avatar-ring.ring-3 {
    top: -30px;
    left: -30px;
    right: -30px;
    bottom: -30px;
    border-color: rgba(76, 175, 80, 0.15);
    animation-delay: 2s;
}

@keyframes pulse-ring {
    0% {
        opacity: 0.5;
        transform: scale(0.95);
    }
    50% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0.5;
        transform: scale(0.95);
    }
}

.approach-visual-title {
    color: white;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 8px;
    position: relative;
    display: inline-block;
}

.approach-visual-title::after {
    content: '';
    position: absolute;
    width: 40px;
    height: 3px;
    background: #4CAF50;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 2px;
}

.approach-visual-subtitle {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    margin: 0;
}

/* Approach Outlines */
.approach-outlines {
    margin-bottom: 25px;
}

.approach-item {
    display: flex;
    margin-bottom: 25px;
    padding: 15px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.approach-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    transform: translateX(5px);
}

.approach-icon {
    position: relative;
    margin-right: 15px;
    flex-shrink: 0;
}

.icon-circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid;
    transition: all 0.3s ease;
}

.approach-item:hover .icon-circle {
    transform: scale(1.1);
}

.approach-item:nth-child(1) .icon-circle {
    border-color: #4CAF50;
    color: #4CAF50;
    background: rgba(76, 175, 80, 0.1);
}

.approach-item:nth-child(2) .icon-circle {
    border-color: #4CAF50;
    color: #4CAF50;
    background: rgba(76, 175, 80, 0.1);
    
}

.approach-item:nth-child(3) .icon-circle {
    border-color: #4CAF50;
    color: #4CAF50;
    background: rgba(76, 175, 80, 0.1);
}

.approach-item:nth-child(4) .icon-circle {
   border-color: #4CAF50;
    color: #4CAF50;
    background: rgba(76, 175, 80, 0.1);
}

.icon-circle i {
    font-size: 1.2rem;
}

.approach-connector {
    position: absolute;
    top: 60px;
    left: 50%;
    width: 2px;
    height: 25px;
    background: rgba(255, 255, 255, 0.2);
    transform: translateX(-50%);
}

.approach-item:last-child .approach-connector {
    display: none;
}

.approach-content {
    flex-grow: 1;
}

.approach-item-title {
    color: white;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
}

.approach-item-title::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 10px;
    flex-shrink: 0;
}

.approach-item:nth-child(1) .approach-item-title::before {
    background: #4CAF50;
    box-shadow: 0 0 10px rgba(76, 175, 80, 0.5);
}

.approach-item:nth-child(2) .approach-item-title::before {
    background: #4CAF50;
    box-shadow: 0 0 10px rgba(76, 175, 80, 0.5);
}

.approach-item:nth-child(3) .approach-item-title::before {
    background: #4CAF50;
    box-shadow: 0 0 10px rgba(76, 175, 80, 0.5);
}

.approach-item:nth-child(4) .approach-item-title::before {
    background: #4CAF50;
    box-shadow: 0 0 10px rgba(76, 175, 80, 0.5);
}

.approach-item-text {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 10px;
}

.approach-stats {
    display: flex;
    gap: 10px;
}

.stat-pill {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.stat-pill.green {
    background: rgba(76, 175, 80, 0.2);
    color: #8BC34A;
    border: 1px solid rgba(76, 175, 80, 0.3);
}

.stat-pill.orange {
     background: rgba(76, 175, 80, 0.2);
    color: #8BC34A;
    border: 1px solid rgba(76, 175, 80, 0.3);
}



@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

/* Decorative Elements */
.visual-accent {
    position: absolute;
    border-radius: 50%;
    opacity: 0.1;
    z-index: 0;
}

.accent-1 {
    width: 120px;
    height: 120px;
    background: #4CAF50;
    top: -40px;
    right: -40px;
}

.accent-2 {
    width: 80px;
    height: 80px;
    background: #FF9800;
    bottom: -20px;
    left: -20px;
}

.accent-3 {
    width: 60px;
    height: 60px;
    background: #4CAF50;
    top: 50%;
    left: -30px;
}

/* Ensure card content stays above accents */
.approach-visual-card > *:not(.visual-accent) {
    position: relative;
    z-index: 1;
}

/* Responsive Design */
@media (max-width: 992px) {
    .two-column-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .approach-content {
        padding-right: 0;
        margin-bottom: 30px;
    }
    
    .approach-visual-card {
        max-width: 600px;
        margin: 0 auto;
    }
}

@media (max-width: 576px) {
    .approach-visual-card {
        padding: 20px;
    }
    
    .approach-avatar {
        width: 100px;
        height: 100px;
    }
    
    .approach-item {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .approach-icon {
        margin-right: 0;
        margin-bottom: 15px;
    }
    
    .approach-connector {
        top: 50px;
        left: 25px;
        height: 15px;
        width: 2px;
    }
    
    .approach-item-title::before {
        position: absolute;
        left: 24px;
        top: 70px;
    }
}
.approach-visual-card {
    background: linear-gradient(145deg, #2c3e50, #1a252f);
    border-radius: 25px; /* Increased from 20px for wider corners */
    padding: 35px; /* Increased from 30px */
    position: relative;
    overflow: hidden;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.25); /* Enhanced shadow */
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
    width: 100%; /* Ensures full width of column */
    min-height: 680px; /* Set minimum height */
    display: flex;
    flex-direction: column;
}

.approach-visual-card:hover {
    transform: translateY(-8px); /* Increased from -5px */
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35); /* Enhanced hover shadow */
    border-color: rgba(76, 175, 80, 0.4); /* Brighter border on hover */
}

/* Header with Circular Photo - Adjusted for larger card */
.approach-header {
    text-align: center;
    margin-bottom: 35px; /* Increased from 30px */
    padding-bottom: 25px; /* Increased from 20px */
    border-bottom: 2px solid rgba(255, 255, 255, 0.12); /* Thicker border */
}

.approach-avatar {
    position: relative;
    width: 140px; /* Increased from 120px */
    height: 140px; /* Increased from 120px */
    margin: 0 auto 25px; /* Increased bottom margin */
}

.approach-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 5px solid #4CAF50; /* Thicker border */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4); /* Enhanced shadow */
    position: relative;
    z-index: 2;
}



.approach-visual-title::after {
    content: '';
    position: absolute;
    width: 50px; /* Wider line */
    height: 4px; /* Thicker line */
    background: #4CAF50;
    bottom: -8px; /* Adjusted position */
    left: 50%;
    transform: translateX(-50%);
    border-radius: 2px;
}

.approach-visual-subtitle {
    color: rgba(255, 255, 255, 0.75); /* Slightly brighter */
    font-size: 0.95rem; /* Slightly larger */
    margin: 10px 0 0; /* Added top margin */
}

/* Approach Outlines - Adjusted spacing */
.approach-outlines {
    margin-bottom: 35px; /* Increased from 25px */
    flex-grow: 1; /* Allow this section to grow */
}

.approach-item {
    display: flex;
    margin-bottom: 30px; /* Increased from 25px */
    padding: 18px; /* Increased from 15px */
    border-radius: 15px; /* Increased from 12px */
    background: rgba(255, 255, 255, 0.04); /* Slightly brighter */
    border: 1px solid rgba(255, 255, 255, 0.07);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.approach-item:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateX(8px); /* Increased from 5px */
}
.approach-icon {
    position: relative;
    margin-right: 18px; /* Increased from 15px */
    flex-shrink: 0;
}

.icon-circle {
    width: 55px; /* Increased from 50px */
    height: 55px; /* Increased from 50px */
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid;
    transition: all 0.3s ease;
}

.approach-item:hover .icon-circle {
    transform: scale(1.15); /* Increased from 1.1 */
}

.icon-circle i {
    font-size: 1.3rem; /* Increased from 1.2rem */
}

.approach-connector {
    position: absolute;
    top: 65px; /* Adjusted for larger icon */
    left: 50%;
    width: 2px;
    height: 28px; /* Increased from 25px */
    background: rgba(255, 255, 255, 0.25); /* Brighter */
    transform: translateX(-50%);
}

.approach-item-title {
    color: white;
    font-size: 1.15rem; /* Slightly larger */
    font-weight: 600;
    margin-bottom: 8px; /* Increased */
    display: flex;
    align-items: center;
}

.approach-item-title::before {
    content: '';
    width: 10px; /* Increased from 8px */
    height: 10px; /* Increased from 8px */
    border-radius: 50%;
    margin-right: 12px; /* Increased from 10px */
    flex-shrink: 0;
}

.approach-item-text {
    color: rgba(255, 255, 255, 0.85); /* Brighter */
    font-size: 0.92rem; /* Slightly larger */
    line-height: 1.6; /* Increased from 1.5 */
    margin-bottom: 12px; /* Increased from 10px */
}

.stat-pill {
    padding: 5px 14px; /* Increased from 4px 12px */
    border-radius: 20px;
    font-size: 0.78rem; /* Slightly larger */
    font-weight: 600;
    letter-spacing: 0.3px;
}
/* ===== ENHANCED LEFT APPROACH TEXT STYLING ===== */
.approach-subtitle {
    color: #4CAF50;
    font-size: 1.2rem;
    font-weight: 600;
    margin: 25px 0 10px;
    position: relative;
    padding-left: 15px;
}

.approach-subtitle::before {
    content: '';
    position: absolute;
    width: 6px;
    height: 100%;
    background: #4CAF50;
    left: 0;
    top: 0;
    border-radius: 3px;
}

.approach-cta {
    display: flex;
    gap: 15px;
    margin-top: 30px;
    flex-wrap: wrap;
}

/* Adjust spacing for better readability */
.approach-text {
    margin-bottom: 18px;
    color: #555;
    line-height: 1.7;
}

.approach-title {
    font-size: 1.8rem;
    margin-bottom: 20px;
    color: #2c3e50;
}
.approach-visual-card {
    background: 
        /* Dark color */
        #2c3e50,
        /* Pattern overlay */
        repeating-linear-gradient(
            45deg,
            rgba(76, 175, 80, 0.03) 0px,
            rgba(76, 175, 80, 0.03) 1px,
            transparent 1px,
            transparent 10px
        ),
        /* Very faint image */
        url('https://images.unsplash.com/photo-1559027615-cd4628902d4a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=15') center/cover;
    /* Rest of the properties remain the same */
}
/* ===== BRAND COLOR UTILITIES ===== */
.brand-green {
    color: #4CAF50;
    font-weight: 600;
}

.brand-orange {
    color: #FF9800;
    font-weight: 600;
}

.brand-stat {
    color: #4CAF50;
    font-weight: 700;
    font-size: 1.1em;
    position: relative;
    display: inline-block;
}

.brand-stat::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 3px;
    background: #FF9800;
    bottom: -2px;
    left: 0;
    border-radius: 2px;
}

/* ===== WHO WE ARE SECTION ENHANCEMENTS ===== */
.who-we-are {
    background-color: #f5f7fa;
    position: relative;
    overflow: hidden;
}

/* Brand-colored background shapes */
.brand-bg-shape {
    position: absolute;
    border-radius: 50%;
    opacity: 0.05;
    z-index: 0;
}

.shape-green {
    width: 300px;
    height: 300px;
    background: #4CAF50;
    top: -150px;
    right: -100px;
}

.shape-orange {
    width: 200px;
    height: 200px;
    background: #FF9800;
    bottom: -100px;
    left: -50px;
}

/* Enhanced About Card */
.about-card {
    background-color: #ffffff;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    height: 100%;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(76, 175, 80, 0.1);
}

.about-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(76, 175, 80, 0.15);
    border-color: rgba(76, 175, 80, 0.3);
}

/* Card corner accents */
.card-corner {
    position: absolute;
    width: 60px;
    height: 60px;
    border-width: 3px;
    border-style: solid;
    opacity: 0.5;
    transition: all 0.3s ease;
}

.corner-top-left {
    top: 20px;
    left: 20px;
    border-color: #4CAF50 transparent transparent #4CAF50;
    border-radius: 15px 0 0 0;
}

.corner-bottom-right {
    bottom: 20px;
    right: 20px;
    border-color: transparent #FF9800 #FF9800 transparent;
    border-radius: 0 0 15px 0;
}

.about-card:hover .card-corner {
    opacity: 1;
    width: 70px;
    height: 70px;
}

/* Brand highlight section */
.brand-highlight {
    display: flex;
    align-items: flex-start;
    margin: 20px 0;
    padding: 15px;
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.05), rgba(255, 152, 0, 0.05));
    border-radius: 10px;
    border-left: 4px solid #4CAF50;
}

.highlight-icon {
    margin-right: 15px;
    flex-shrink: 0;
}

.highlight-icon i {
    font-size: 1.8rem;
}

.highlight-text {
    flex-grow: 1;
}

.highlight-text p {
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.6;
}

/* Mission statement */
.mission-statement {
    margin: 25px 0;
    padding: 20px;
    background: rgba(255, 152, 0, 0.05);
    border-radius: 10px;
    border: 1px solid rgba(255, 152, 0, 0.1);
    display: flex;
    align-items: flex-start;
}

.mission-icon {
    margin-right: 15px;
    color: #FF9800;
    font-size: 1.5rem;
}

.mission-content {
    flex-grow: 1;
}

.mission-title {
    color: #2c3e50;
    font-size: 1.2rem;
    margin-bottom: 8px;
}

.mission-text {
    color: #555;
    margin: 0;
    line-height: 1.6;
}

/* Brand button */
.btn-brand {
    background: linear-gradient(90deg, #4CAF50, #8BC34A);
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 30px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
    position: relative;
    overflow: hidden;
}

.btn-brand::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.7s ease;
}

.btn-brand:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(76, 175, 80, 0.4);
}

.btn-brand:hover::before {
    left: 100%;
}

.btn-brand i {
    margin-left: 8px;
    transition: transform 0.3s ease;
}

.btn-brand:hover i {
    transform: translateX(5px);
}

/* ===== ENHANCED VALUES SECTION ===== */
.values-title {
    font-size: 1.8rem;
    margin-bottom: 30px;
    color: #2c3e50;
    position: relative;
    display: inline-block;
}

.values-title::after {
    content: '';
    position: absolute;
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, #4CAF50, #FF9800);
    bottom: -10px;
    left: 0;
    border-radius: 2px;
}

/* Enhanced Value Items */
.value-item {
    background-color: #ffffff;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    border: 2px solid transparent;
}

.value-green {
    border-top: 4px solid #4CAF50;
}

.value-orange {
    border-top: 4px solid #4CAF50;
}

.value-green:hover {
    border-color: #4CAF50;
    box-shadow: 0 10px 30px rgba(76, 175, 80, 0.15);
    transform: translateY(-8px);
}

.value-orange:hover {
    border-color: #4CAF50;
    box-shadow: 0 10px 30px rgba(255, 152, 0, 0.15);
    transform: translateY(-8px);
}

/* Enhanced Value Icons */
.value-icon {
    position: relative;
    width: 70px;
    height: 70px;
    margin: 0 auto 20px;
}

.icon-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    opacity: 0.1;
    transition: all 0.3s ease;
}

.value-green .icon-bg {
    background: #4CAF50;
}

.value-orange .icon-bg {
    background: #4CAF50;
}

.value-item:hover .icon-bg {
    opacity: 0.2;
    transform: scale(1.1);
}

.value-icon i {
    position: relative;
    z-index: 1;
    font-size: 1.8rem;
}

.value-green .value-icon i {
    color: #4CAF50;
}

.value-orange .value-icon i {
    color: #4CAF50;
}

.value-title {
    font-size: 1.3rem;
    margin-bottom: 12px;
    color: #2c3e50;
}

.value-text {
    color: #666;
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 15px;
}

.value-tag {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.value-green .value-tag {
    background: rgba(76, 175, 80, 0.1);
    color: #4CAF50;
    border: 1px solid rgba(76, 175, 80, 0.3);
}

.value-orange .value-tag {
    background: rgba(255, 152, 0, 0.1);
    color: #4CAF50;
    border: 1px solid rgba(255, 152, 0, 0.3);
}

/* Values Summary */
.values-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 30px;
}

.summary-item {
    padding: 15px;
    border-radius: 10px;
    display: flex;
    align-items: center;
}

.green-summary {
    background: rgba(76, 175, 80, 0.05);
    border: 1px solid rgba(76, 175, 80, 0.1);
}

.orange-summary {
    background: rgba(255, 152, 0, 0.05);
    border: 1px solid rgba(255, 152, 0, 0.1);
}

.summary-icon {
    margin-right: 12px;
    color: #4CAF50;
}

.orange-summary .summary-icon {
    color: #4CAF50;
}

.summary-content h5 {
    margin: 0 0 5px 0;
    font-size: 1rem;
}

.summary-content p {
    margin: 0;
    font-size: 0.85rem;
    color: #666;
}
/* ===== PAGE TEMPLATE STRUCTURE ===== */
.page-template {
    padding-top: 100px;
    min-height: 100vh;
}

.page-hero {
    height: 400px;
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.4)),
                url('https://images.unsplash.com/photo-1545239351-ef35f43d514b?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=50') center/cover;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--white);
    position: relative;
    margin-bottom: var(--space-2xl);
}

.hero-content {
    max-width: 800px;
    padding: var(--space-xl);
    position: relative;
    z-index: 2;
}

.page-title {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: var(--space-md);
    color: var(--white);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.page-subtitle {
    font-size: 1.3rem;
    opacity: 0.9;
    max-width: 600px;
    margin: 0 auto;
}

/* ===== REUSABLE COMPONENTS ===== */
.content-section {
    padding: var(--space-2xl) 0;
}

.two-column-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
    align-items: center;
}

.image-content-card {
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    transition: transform var(--transition-normal);
}

.image-content-card:hover {
    transform: translateY(-8px);
}

.card-image {
    height: 300px;
    background-size: cover;
    background-position: center;
}

.card-content {
    padding: var(--space-xl);
    background: var(--white);
}

.value-pill {
    display: inline-block;
    padding: 6px 16px;
    background: var(--green-primary);
    color: var(--white);
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: var(--space-md);
}

.story-card {
    background: var(--white);
    border-radius: var(--border-radius-lg);
    padding: var(--space-xl);
    box-shadow: var(--shadow-md);
    border-left: 4px solid var(--orange-primary);
    margin: var(--space-xl) 0;
}

/* ===== CYLINDER LAYOUT FOR VISION/MISSION ===== */
.cylinder-flow {
    display: flex;
    flex-direction: column;
    gap: 80px;
    position: relative;
}

.cylinder-item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
    align-items: center;
    position: relative;
}

.cylinder-visual {
    position: relative;
    height: 200px;
    display: flex;
    align-items: center;
}

.cylinder-shape {
    width: 100%;
    height: 120px;
    background: linear-gradient(90deg, var(--green-primary), var(--green-light));
    border-radius: 60px;
    position: relative;
    box-shadow: var(--shadow-md);
}

.cylinder-circle {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    border: 6px solid var(--white);
    box-shadow: var(--shadow-lg);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.cylinder-content {
    padding: var(--space-lg);
    background: var(--white);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
    border: 2px solid var(--light-gray);
}

.connector-line {
    position: absolute;
    height: 40px;
    width: 2px;
    background: var(--green-primary);
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
}

/* ===== TEAM GRID ===== */
.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-xl);
    margin-top: var(--space-xl);
}

.team-card {
    background: var(--white);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: all var(--transition-normal);
}

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

.team-image {
    height: 250px;
    background-size: cover;
    background-position: center;
}

.team-info {
    padding: var(--space-lg);
    text-align: center;
}

.team-name {
    font-size: 1.3rem;
    color: var(--text-dark);
    margin-bottom: 4px;
}

.team-role {
    color: var(--green-primary);
    font-weight: 600;
    margin-bottom: var(--space-md);
}

/* ===== PROGRAM CARDS ===== */
.program-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--space-xl);
}

.program-card {
    background: var(--white);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: all var(--transition-normal);
}

.program-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-lg);
}

.program-header {
    height: 200px;
    background-size: cover;
    background-position: center;
    position: relative;
}

.program-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
    padding: var(--space-lg);
    color: var(--white);
}

.program-body {
    padding: var(--space-xl);
}

/* ===== CONTACT FORM ===== */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
}

.contact-info {
    background: var(--light-gray);
    padding: var(--space-xl);
    border-radius: var(--border-radius-lg);
}

.contact-form .form-group {
    margin-bottom: var(--space-lg);
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--medium-gray);
    border-radius: var(--border-radius);
    font-family: var(--font-primary);
    transition: border-color var(--transition-fast);
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--green-primary);
}

/* ===== RESPONSIVE ADJUSTMENTS ===== */
@media (max-width: 992px) {
    .two-column-layout {
        grid-template-columns: 1fr;
    }
    
    .cylinder-item {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .contact-grid {
        grid-template-columns: 1fr;
    }
    
    .page-title {
        font-size: 2.5rem;
    }
}

@media (max-width: 768px) {
    .program-grid {
        grid-template-columns: 1fr;
    }
    
    .team-grid {
        grid-template-columns: 1fr;
    }
}
/* Add to your CSS */
.two-column-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px; /* Increase this if needed */
    align-items: start;
}

/* Specifically for who-we-are section */
.who-we-are .two-column-layout {
    gap: 80px; /* More spacing for this section */
}

/* Add padding to the values container */
.who-we-are .values-container {
    padding-left: 20px; /* Creates breathing room */
}

/* Ensure cards have consistent spacing */
.about-card, .values-grid {
    padding: 40px;
    margin: 0 auto;
}
/* Replace or update these styles */
.programs {
    background: linear-gradient(rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.9)), 
                url('https://images.unsplash.com/photo-1488521787991-ed7bbaae773c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');
    background-size: cover;
    background-position: center;
    position: relative;
    color: white;
}

/* Make overlay darker */
.programs::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8); /* Darker overlay */
    z-index: 1;
}

/* Ensure all content is above overlay */
.programs .container,
.programs .section-header,
.programs .programs-container {
    position: relative;
    z-index: 2;
}

/* Enhance program cards */
.program-card {
    background: rgba(255, 255, 255, 0.15); /* Slightly more opaque */
    backdrop-filter: blur(15px); /* Stronger blur */
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 15px;
    overflow: hidden;
    transition: all 0.4s ease;
}

.program-card:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

/* Improve text visibility */
.program-title {
    color: white;
    font-size: 1.6rem;
    margin-bottom: 15px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.program-text {
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.7;
    margin-bottom: 25px;
}

.program-link {
    color: #FFB74D; /* Brighter orange for better contrast */
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.program-link:hover {
    color: #FF9800;
}
/* Force perfect circles */
.values-grid .value-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.values-grid .value-icon {
    width: 80px;
    height: 80px;
    flex: 0 0 auto; /* Don't grow or shrink */
    margin: 0 auto 20px;
}

/* Override any conflicting styles */
.value-icon[style] {
    width: 80px !important;
    height: 80px !important;
}
/* ===== NEW VALUE CARD LAYOUT ===== */

/* Make the grid 2x2 with wider cards */
.values-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 columns */
    gap: 25px; /* Reduce gap since cards are wider */
    margin-top: 0;
}

/* Redesign value cards to be wider and shorter */
.value-item {
    display: flex;
    flex-direction: row; /* Horizontal layout */
    align-items: flex-start;
    text-align: left;
    padding: 25px;
    background: var(--white);
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    height: auto;
    min-height: 160px; /* Shorter height */
    border-top: 4px solid transparent;
}

/* Color-coded top borders */
.value-green {
    border-top-color: #4CAF50;
}

.value-orange {
    border-top-color: #4CAF50;
}

/* Horizontal icon layout */
.value-icon {
    width: 60px; /* Smaller width */
    height: 60px; /* Smaller height */
    min-width: 60px; /* Prevent shrinking */
    min-height: 60px;
    border-radius: 50%;
    background: rgba(76, 175, 80, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 20px 0 0; /* Right margin instead of bottom */
    flex-shrink: 0;
}

/* Adjust icon colors */
.value-green .value-icon {
    background: rgba(76, 175, 80, 0.1);
    color: #4CAF50;
}

.value-orange .value-icon {
    background: rgba(76, 175, 80, 0.1);
    color: #4CAF50;
}

.value-icon i {
    font-size: 1.5rem;
}

/* Text content takes remaining space */
.value-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.value-title {
    font-size: 1.2rem;
    margin-bottom: 10px;
    color: var(--text-dark);
}

.value-text {
    color: var(--dark-gray);
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 12px;
    flex-grow: 1; /* Push tag to bottom */
}

.value-tag {
    align-self: flex-start;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.value-green .value-tag {
    background: rgba(76, 175, 80, 0.1);
    color: #4CAF50;
    border: 1px solid rgba(76, 175, 80, 0.3);
}

.value-orange .value-tag {
    background: rgba(255, 152, 0, 0.1);
     color: #4CAF50;
    border: 1px solid rgba(255, 152, 0, 0.3);
}

/* Hover effects */
.value-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
}

.value-green:hover {
    border-top-color: #3d8b40;
    box-shadow: 0 15px 35px rgba(76, 175, 80, 0.15);
}

.value-orange:hover {
    border-top-color: #3d8b40;
    box-shadow: 0 15px 35px rgba(255, 152, 0, 0.15);
}
/* ===== VERTICAL ALIGNMENT FIX ===== */

/* Ensure both columns align at the top */
.who-we-are .two-column-layout {
    align-items: flex-start !important; /* Align to top */
    gap: 60px;
}

/* Make both columns same starting height */
.who-we-are .column-left,
.who-we-are .column-right {
    display: flex;
    flex-direction: column;
}

/* Right column content container */
.values-container {
    width: 100%;
    margin-top: 0; /* Remove any top margin */
    padding-top: 0; /* Remove any top padding */
}

/* If there's a title above values, adjust it */
.values-title {
    margin-top: 0;
    padding-top: 0;
    margin-bottom: 30px;
}

/* Ensure cards align perfectly */
.values-grid {
    margin-top: 0;
}

/* If the left card has padding affecting alignment */
.about-card {
    padding-top: 40px;
    padding-bottom: 40px;
}

/* Alternative: If you want exact pixel alignment */
@media (min-width: 993px) {
    .who-we-are .column-left .about-card,
    .who-we-are .column-right .values-grid {
        padding-top: 0;
        margin-top: 0;
    }
    
    /* Optional: Add a visual alignment guide (remove after testing) */
    .who-we-are .two-column-layout::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        width: 1px;
        height: 100%;
        background: rgba(0,0,0,0.1);
        z-index: 1;
    }
}
/* ===== ENHANCE "WHAT WE DO" BACKGROUND ===== */

/* Replace or update the existing .programs styles */
.programs {
    background: 
        /* Darker overlay for better text contrast */
        linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.8)),
        /* Brighter, more visible image */
        url('https://images.unsplash.com/photo-1488521787991-ed7bbaae773c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80') center/cover;
    position: relative;
    color: white;
    overflow: hidden;
}

/* Remove or hide the video-background div since we're using CSS background */
.video-background {
    display: none;
}

/* Alternative: Keep video background but make it more visible */
.video-background .video-fallback {
    opacity: 0.8 !important; /* Make image more visible */
    filter: brightness(1.1) contrast(1.2); /* Enhance image */
}

.video-overlay {
    background: rgba(0, 0, 0, 0.6) !important; /* Darker overlay */
}
/* ===== ENHANCED FOOTER ===== */
.footer {
    background-color: #1a252f;
    color: var(--white);
    padding: 80px 0 30px;
    position: relative;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 50px;
    margin-bottom: 50px;
}

.footer-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--white);
    margin-bottom: 25px;
    transition: transform 0.3s ease;
}

.footer-logo:hover {
    transform: translateY(-3px);
}

.footer-about {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 30px;
}

/* Social Media Links in Footer */
.footer-social {
    margin-top: 25px;
}

.footer-social-title {
    font-size: 1rem;
    margin-bottom: 15px;
    color: rgba(255, 255, 255, 0.9);
}

.social-icons-grid {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.social-icon {
    width: 42px;
    height: 42px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-decoration: none;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.social-icon:hover {
    background: var(--orange-primary);
    transform: translateY(-3px);
    border-color: var(--orange-primary);
    box-shadow: 0 5px 15px rgba(255, 152, 0, 0.3);
}

/* Specific colors for each social platform */
.social-icon.facebook:hover { background: #1877F2 !important; }
.social-icon.twitter:hover { background: #1DA1F2 !important; }
.social-icon.instagram:hover { 
    background: linear-gradient(45deg, #405DE6, #5851DB, #833AB4, #C13584, #E1306C, #FD1D1D) !important; 
}
.social-icon.linkedin:hover { background: #0077B5 !important; }
.social-icon.youtube:hover { background: #FF0000 !important; }
.social-icon.whatsapp:hover { background: #25D366 !important; }

.footer-title {
    font-size: 1.3rem;
    margin-bottom: 25px;
    color: white;
    position: relative;
    padding-bottom: 12px;
}

.footer-title::after {
    content: '';
    position: absolute;
    width: 40px;
    height: 3px;
    background: var(--orange-primary);
    bottom: 0;
    left: 0;
    border-radius: 2px;
    transition: width 0.3s ease;
}

.footer-column:hover .footer-title::after {
    width: 60px;
}

.footer-links {
    list-style: none;
}

.footer-links li {
    margin-bottom: 15px;
    position: relative;
    padding-left: 0;
    transition: padding-left 0.3s ease;
}

.footer-links li:hover {
    padding-left: 8px;
}

.footer-links li::before {
    content: '›';
    position: absolute;
    left: -15px;
    color: var(--orange-primary);
    opacity: 0;
    transition: all 0.3s ease;
}

.footer-links li:hover::before {
    left: 0;
    opacity: 1;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
    padding: 2px 0;
}

.footer-links a:hover {
    color: var(--orange-primary);
    transform: translateX(5px);
}

.footer-contact {
    list-style: none;
}

.footer-contact li {
    margin-bottom: 20px;
    display: flex;
    align-items: flex-start;
    color: rgba(255, 255, 255, 0.7);
    transition: all 0.3s ease;
    padding: 8px 0;
}

.footer-contact li:hover {
    color: white;
    transform: translateX(5px);
}

.footer-contact i {
    margin-right: 15px;
    color: var(--orange-primary);
    width: 20px;
    font-size: 1.1rem;
    margin-top: 3px;
}

.newsletter-form {
    margin-top: 20px;
}

.footer-input-group {
    display: flex;
    margin-bottom: 15px;
}

.footer-input {
    flex: 1;
    padding: 12px 15px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px 0 0 4px;
    color: white;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.footer-input:focus {
    outline: none;
    border-color: var(--orange-primary);
    background: rgba(255, 255, 255, 0.1);
}

.footer-btn {
    padding: 12px 20px;
    background: var(--orange-primary);
    color: white;
    border: none;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
}

.footer-btn:hover {
    background: #e68900;
}

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

.copyright {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
}

.footer-legal {
    display: flex;
    gap: 25px;
}

.footer-legal a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s ease;
    position: relative;
    padding: 5px 0;
}

.footer-legal a:hover {
    color: var(--orange-primary);
}

.footer-legal a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    background: var(--orange-primary);
    bottom: 0;
    left: 0;
    transition: width 0.3s ease;
}

.footer-legal a:hover::after {
    width: 100%;
}
/* ===== BACK TO TOP BUTTON ===== */
.back-to-top {
    position: fixed;
    bottom: 100px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: var(--orange-primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 1.2rem;
    box-shadow: 0 4px 15px rgba(255, 152, 0, 0.3);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.4s ease;
    border: 2px solid transparent;
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    background: white;
    color: var(--orange-primary);
    border-color: var(--orange-primary);
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(255, 152, 0, 0.4);
}

.back-to-top:active {
    transform: translateY(-2px);
}

/* Add pulse animation for attention */
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 152, 0, 0.4);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(255, 152, 0, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 152, 0, 0);
    }
}

.back-to-top.pulse {
    animation: pulse 2s infinite;
}
/* ===== TEXT MESSAGE / CHAT ICON ===== */
.chat-widget {
    position: fixed;
    bottom: 40px;
    left: 30px;
    z-index: 1000;
}

.chat-button {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--green-primary), var(--green-light));
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    box-shadow: 0 5px 20px rgba(76, 175, 80, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    border: none;
    outline: none;
}

.chat-button:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 25px rgba(76, 175, 80, 0.4);
    background: linear-gradient(135deg, var(--orange-primary), var(--orange-light));
}

.chat-button .notification-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #FF5722;
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    border: 2px solid #1a252f;
    animation: badgePulse 2s infinite;
}

@keyframes badgePulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

.chat-box {
    position: absolute;
    bottom: 70px;
    left: 0;
    width: 350px;
    background: white;
    border-radius: 15px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease;
}

.chat-box.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.chat-header {
    background: linear-gradient(135deg, var(--green-primary), var(--green-light));
    color: white;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chat-header h4 {
    margin: 0;
    font-size: 1.2rem;
}

.close-chat {
    background: none;
    border: none;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 5px;
    transition: transform 0.3s ease;
}

.close-chat:hover {
    transform: rotate(90deg);
}

.chat-body {
    padding: 20px;
    max-height: 400px;
    overflow-y: auto;
}

.chat-message {
    background: #f5f7fa;
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 15px;
    font-size: 0.95rem;
    line-height: 1.5;
}

.chat-message.bot {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.1), rgba(139, 195, 74, 0.1));
    border-left: 4px solid var(--green-primary);
}

.chat-message.user {
    background: linear-gradient(135deg, rgba(255, 152, 0, 0.1), rgba(255, 183, 77, 0.1));
    border-left: 4px solid var(--orange-primary);
    margin-left: 40px;
}

.chat-input {
    display: flex;
    padding: 15px;
    background: #f8f9fa;
    border-top: 1px solid #eee;
}

.chat-input input {
    flex: 1;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 25px 0 0 25px;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.9rem;
}

.chat-input button {
    padding: 12px 20px;
    background: var(--orange-primary);
    color: white;
    border: none;
    border-radius: 0 25px 25px 0;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
}

.chat-input button:hover {
    background: #e68900;
}
/* ===== RESPONSIVE FOOTER ===== */
@media (max-width: 992px) {
    .footer-content {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }
    
    .back-to-top {
        right: 20px;
        bottom: 90px;
        width: 45px;
        height: 45px;
    }
    
    .chat-button {
        width: 55px;
        height: 55px;
        left: 20px;
        bottom: 30px;
    }
    
    .chat-box {
        width: 320px;
        left: -10px;
    }
}

@media (max-width: 768px) {
    .footer-content {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .footer-bottom {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
    
    .footer-legal {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .back-to-top {
        right: 15px;
        bottom: 80px;
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
    
    .chat-widget {
        left: 15px;
        bottom: 25px;
    }
    
    .chat-button {
        width: 50px;
        height: 50px;
        font-size: 1.3rem;
    }
    
    .chat-box {
        width: 280px;
        left: -50px;
    }
}

@media (max-width: 480px) {
    .chat-box {
        width: 250px;
        left: -80px;
    }
}
/* Add these to your existing styles.css */

/* Three Column Layout */
.three-column-layout {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
    margin-top: var(--space-xl);
}

@media (max-width: 992px) {
    .three-column-layout {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

/* Service Cards */
.service-card {
    background: var(--white);
    padding: var(--space-xl);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
    text-align: center;
    transition: transform var(--transition-normal);
}

.service-card:hover {
    transform: translateY(-5px);
}

.service-icon {
    width: 70px;
    height: 70px;
    background: rgba(76, 175, 80, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-lg);
    color: var(--green-primary);
    font-size: 1.8rem;
}

.service-card h3 {
    color: var(--text-dark);
    margin-bottom: var(--space-md);
    font-size: 1.3rem;
}

/* Process Steps */
.process-step {
    background: var(--white);
    padding: var(--space-xl);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
    border-left: 4px solid var(--orange-primary);
    margin-bottom: var(--space-lg);
}

.step-number {
    width: 40px;
    height: 40px;
    background: var(--green-primary);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    margin-bottom: var(--space-md);
}

.process-step h3 {
    color: var(--text-dark);
    margin-bottom: var(--space-sm);
}

/* Add to existing styles.css */

/* Values Highlight */
.values-highlight {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 60px;
}

.value-highlight-item {
    text-align: center;
    padding: 40px 30px;
    background: var(--white);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
    transition: all 0.3s ease;
}

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

.highlight-icon {
    width: 80px;
    height: 80px;
    background: rgba(76, 175, 80, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    color: var(--green-primary);
    font-size: 2rem;
}

.value-highlight-item h3 {
    color: var(--text-dark);
    margin-bottom: 15px;
    font-size: 1.3rem;
}

/* CTA Banner */
.cta-banner {
    background: linear-gradient(135deg, var(--green-primary), var(--green-light));
    border-radius: var(--border-radius-lg);
    padding: 60px;
    text-align: center;
    color: var(--white);
    position: relative;
    overflow: hidden;
}

.cta-banner::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px);
    background-size: 30px 30px;
    opacity: 0.3;
    z-index: 0;
}

.cta-content {
    position: relative;
    z-index: 1;
}

.cta-banner h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
    color: var(--white);
}

.cta-banner p {
    font-size: 1.2rem;
    opacity: 0.9;
    margin-bottom: 30px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.cta-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

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

.btn-outline:hover {
    background: var(--white);
    color: var(--green-primary);
}
/* Add to existing styles.css */

/* Practice Items */
.practice-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 30px;
    padding: 25px;
    background: var(--white);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
    transition: transform var(--transition-normal);
}

.practice-item:hover {
    transform: translateX(10px);
}

.practice-icon {
    width: 60px;
    height: 60px;
    background: var(--green-primary);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
    flex-shrink: 0;
    font-size: 1.5rem;
}

.practice-content {
    flex: 1;
}

.practice-content h3 {
    color: var(--text-dark);
    margin-bottom: 10px;
    font-size: 1.2rem;
}

/* Circle text */
.circle-text {
    font-size: 0.9rem;
    color: var(--text-medium);
    line-height: 1.4;
}

/* Path items */
.path-item h3 {
    color: var(--green-primary);
    margin-bottom: 10px;
    font-size: 1.3rem;
}

.path-item p {
    color: var(--text-medium);
    line-height: 1.6;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .practice-item {
        flex-direction: column;
        text-align: center;
    }
    
    .practice-icon {
        margin-right: 0;
        margin-bottom: 20px;
    }
}

/* Add to existing styles.css */

/* Social Buttons */
.social-links-large {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 15px;
    margin-top: 20px;
}

.social-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15px 10px;
    background: var(--light-gray);
    border-radius: var(--border-radius);
    color: var(--text-dark);
    text-decoration: none;
    transition: all var(--transition-normal);
}

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

.social-btn i {
    font-size: 1.2rem;
    margin-bottom: 8px;
}

.social-btn span {
    font-size: 0.85rem;
    font-weight: 500;
}

/* Form Check */
.form-check {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
}

.form-check-input {
    margin-right: 10px;
    margin-top: 5px;
}

.form-check-label {
    color: var(--text-medium);
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Emergency Button */
.btn-outline {
    background: transparent;
    border: 2px solid var(--white);
    color: var(--white);
}

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

/* Map Placeholder */
.map-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-dark);
    font-size: 1.1rem;
}

.map-placeholder i {
    color: var(--green-primary);
    font-size: 3rem;
    margin-bottom: 15px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .social-links-large {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .form-check {
        align-items: flex-start;
    }
}
/* ===== LOGO FIXES ===== */

/* Logo in Header/Navigation */
.logo img {
    height: 50px; /* Adjust this number based on your logo size */
    width: auto;
    display: block;
    transition: transform 0.3s ease;
}

.logo img:hover {
    transform: scale(1.05);
}

/* If your logo is too big/small, adjust here: */
.logo-img {
    height: 50px !important; /* Force height */
    width: auto !important;
    max-width: 180px; /* Prevent too wide logos */
}

/* Footer Logo (if different) */
.footer-logo img {
    height: 40px;
    width: auto;
    filter: brightness(0) invert(1); /* Makes logo white */
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .logo img {
        height: 40px; /* Smaller on mobile */
    }
    
    .footer-logo img {
        height: 35px;
    }
}
/* ===== WHAT WE DO PAGE STYLES ===== */

/* Page Hero */
.page-hero {
    height: 500px;
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.4)),
                url(images/christian-weiss-unuRbA_wHhg-unsplash.jpg) center/cover;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--white);
    position: relative;
    margin-top: 80px;
}

.hero-stats {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-top: 30px;
}

.hero-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero-stat .stat-number {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--orange-primary);
    margin-bottom: 5px;
}

.hero-stat .stat-text {
    font-size: 0.9rem;
    opacity: 0.9;
}

.hero-scroll {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
}

.scroll-down {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--white);
    text-decoration: none;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.scroll-down:hover {
    opacity: 1;
}

.scroll-down i {
    font-size: 1.2rem;
    margin-bottom: 5px;
    animation: bounce 2s infinite;
}

.scroll-down span {
    font-size: 0.9rem;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

/* Program Navigation */
.program-navigation {
    background: var(--light-gray);
    padding: 60px 0 40px;
}

.program-tabs {
    margin-top: 40px;
}

.tab-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.tab-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--white);
    border: 2px solid var(--medium-gray);
    border-radius: 10px;
    padding: 20px 15px;
    min-width: 150px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

.tab-link:hover {
    border-color: var(--green-primary);
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.tab-link.active {
    background: var(--green-primary);
    border-color: var(--green-primary);
    color: var(--white);
}

.tab-link i {
    font-size: 1.8rem;
    margin-bottom: 10px;
    color: var(--green-primary);
}

.tab-link.active i {
    color: var(--white);
}

.tab-link span {
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.3;
}

/* Program Sections */
.program-section {
    padding: 100px 0;
    display: none;
}

.program-section.active {
    display: block;
    animation: fadeIn 0.5s ease;
}

.program-section.featured {
    position: relative;
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
                url(images/christian-weiss-unuRbA_wHhg-unsplash.jpg) center/cover;
    color: var(--white);
}

.program-section.featured .program-title,
.program-section.featured .program-subtitle,
.program-section.featured .program-description,
.program-section.featured h4,
.program-section.featured p {
    color: var(--white);
}

.program-section.featured .program-label {
    background: rgba(255, 255, 255, 0.2);
    color: var(--white);
}

.program-section.featured .approach-card {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.program-content {
    padding-right: 40px;
}

.reverse .program-content {
    padding-right: 0;
    padding-left: 40px;
}

.program-label {
    display: inline-block;
    background: var(--green-primary);
    color: var(--white);
    padding: 6px 15px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

.program-title {
    font-size: 2.5rem;
    color: var(--text-dark);
    margin-bottom: 15px;
}

.program-subtitle {
    font-size: 1.3rem;
    color: var(--orange-primary);
    margin-bottom: 25px;
    font-weight: 500;
}

.program-description {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--dark-gray);
    margin-bottom: 30px;
}

.program-highlights {
    margin: 30px 0;
}

.highlight-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 15px;
}

.highlight-item i {
    color: var(--green-primary);
    margin-right: 12px;
    margin-top: 3px;
    flex-shrink: 0;
}

.program-stats {
    display: flex;
    gap: 30px;
    margin: 40px 0;
}

.stat-box {
    text-align: center;
    flex: 1;
}

.stat-box .stat-number {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--green-primary);
    margin-bottom: 5px;
}

.stat-box .stat-label {
    font-size: 0.9rem;
    color: var(--dark-gray);
    line-height: 1.3;
}

.program-cta {
    display: flex;
    gap: 15px;
    margin-top: 40px;
    flex-wrap: wrap;
}

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

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

/* Program Visuals */
.program-visual {
    position: relative;
}

.visual-image {
    height: 400px;
    border-radius: 15px;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}

.image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, transparent 50%, rgba(0,0,0,0.7));
}

.visual-quote {
    background: var(--white);
    border-radius: 15px;
    padding: 25px;
    margin-top: -60px;
    margin-left: 30px;
    position: relative;
    box-shadow: var(--shadow-lg);
    max-width: 400px;
}

.quote-icon {
    color: var(--orange-primary);
    font-size: 1.5rem;
    margin-bottom: 15px;
}

.quote-text {
    font-size: 1.1rem;
    font-style: italic;
    color: var(--text-dark);
    margin-bottom: 15px;
    line-height: 1.5;
}

.quote-author {
    color: var(--green-primary);
    font-weight: 600;
    font-size: 0.9rem;
}

.visual-features {
    display: flex;
    justify-content: space-around;
    margin-top: 30px;
}

.feature-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.feature-item i {
    font-size: 2rem;
    color: var(--green-primary);
    margin-bottom: 10px;
}

.feature-item span {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-dark);
}

/* Approach Steps */
.program-approach {
    margin: 30px 0;
}

.approach-steps {
    margin-top: 20px;
}

.step {
    display: flex;
    align-items: flex-start;
    margin-bottom: 25px;
}

.step-number {
    width: 40px;
    height: 40px;
    background: var(--green-primary);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    margin-right: 15px;
    flex-shrink: 0;
}

.step-content h5 {
    color: var(--text-dark);
    margin-bottom: 5px;
    font-size: 1.1rem;
}

.step-content p {
    color: var(--dark-gray);
    font-size: 0.95rem;
}

/* Social Connection Section */
.section-header-center {
    text-align: center;
    margin-bottom: 60px;
}

.three-column-layout {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 60px;
}

.social-card {
    background: var(--white);
    border-radius: 15px;
    padding: 30px;
    text-align: center;
    box-shadow: var(--shadow-md);
    transition: transform 0.3s ease;
    height: 100%;
    border-top: 4px solid var(--green-primary);
}

.social-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-lg);
}

.social-icon {
    width: 70px;
    height: 70px;
    background: rgba(76, 175, 80, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: var(--green-primary);
    font-size: 1.8rem;
}

.social-card h3 {
    color: var(--text-dark);
    margin-bottom: 15px;
    font-size: 1.3rem;
}

.social-card p {
    color: var(--dark-gray);
    margin-bottom: 20px;
    line-height: 1.6;
}

.social-features {
    list-style: none;
    text-align: left;
    margin-top: 20px;
}

.social-features li {
    padding: 8px 0;
    border-bottom: 1px solid var(--light-gray);
    font-size: 0.9rem;
    color: var(--dark-gray);
    position: relative;
    padding-left: 20px;
}

.social-features li:before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--green-primary);
    font-weight: bold;
}

.social-impact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
    background: var(--light-gray);
    border-radius: 20px;
    padding: 50px;
    margin-top: 60px;
}

.impact-image {
    height: 350px;
    border-radius: 15px;
    background-size: cover;
    background-position: center;
}

.impact-content h3 {
    font-size: 1.8rem;
    color: var(--text-dark);
    margin-bottom: 20px;
}

.impact-content p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--dark-gray);
    margin-bottom: 30px;
}

.impact-stats {
    display: flex;
    gap: 40px;
}

.impact-stat {
    display: flex;
    flex-direction: column;
}

.impact-number {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--green-primary);
    margin-bottom: 5px;
}

.impact-text {
    font-size: 0.9rem;
    color: var(--dark-gray);
    max-width: 150px;
}

/* Independent Living */
.living-approaches {
    margin: 30px 0;
}

.approach-card {
    display: flex;
    align-items: flex-start;
    background: var(--white);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 15px;
    box-shadow: var(--shadow-sm);
    transition: transform 0.3s ease;
}

.approach-card:hover {
    transform: translateX(10px);
}

.approach-icon {
    width: 50px;
    height: 50px;
    background: rgba(76, 175, 80, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    color: var(--green-primary);
    font-size: 1.3rem;
    flex-shrink: 0;
}

.approach-content h4 {
    color: var(--text-dark);
    margin-bottom: 8px;
    font-size: 1.1rem;
}

.approach-content p {
    color: var(--dark-gray);
    font-size: 0.95rem;
    line-height: 1.5;
}

.program-features {
    margin: 30px 0;
}

.program-features h4 {
    color: var(--text-dark);
    margin-bottom: 15px;
    font-size: 1.2rem;
}

.program-features ul {
    list-style: none;
}

.program-features li {
    padding: 10px 0;
    border-bottom: 1px solid var(--light-gray);
    color: var(--dark-gray);
    position: relative;
    padding-left: 25px;
}

.program-features li:before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--green-primary);
    font-size: 1.5rem;
    line-height: 1;
}

.living-visual {
    position: relative;
}

.visual-main {
    height: 400px;
    border-radius: 15px;
    background-size: cover;
    background-position: center;
}

.visual-testimonial {
    background: var(--white);
    border-radius: 15px;
    padding: 25px;
    margin-top: -50px;
    margin-right: 30px;
    position: relative;
    box-shadow: var(--shadow-lg);
    border-left: 5px solid var(--orange-primary);
}

.testimonial-content p {
    font-style: italic;
    color: var(--text-dark);
    margin-bottom: 15px;
    line-height: 1.6;
}

.testimonial-author {
    display: flex;
    flex-direction: column;
}

.author-name {
    font-weight: 600;
    color: var(--text-dark);
}

.author-location {
    font-size: 0.9rem;
    color: var(--dark-gray);
}

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

.advocacy-card {
    background: var(--white);
    border-radius: 15px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: transform 0.3s ease;
    height: 100%;
}

.advocacy-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-lg);
}

.card-header {
    background: linear-gradient(135deg, var(--green-primary), var(--green-light));
    padding: 30px;
    text-align: center;
    color: var(--white);
}

.header-icon {
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.card-header h3 {
    font-size: 1.4rem;
    margin: 0;
}

.card-content {
    padding: 25px;
}

.card-content p {
    color: var(--dark-gray);
    margin-bottom: 20px;
    line-height: 1.6;
}

.card-content ul {
    list-style: none;
    padding: 0;
}

.card-content li {
    padding: 8px 0;
    border-bottom: 1px solid var(--light-gray);
    color: var(--dark-gray);
    font-size: 0.95rem;
    position: relative;
    padding-left: 25px;
}

.card-content li:before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--green-primary);
    font-weight: bold;
}

.advocacy-impact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
    background: var(--white);
    border-radius: 20px;
    padding: 50px;
    box-shadow: var(--shadow-md);
}

.impact-visual .visual-image {
    height: 300px;
    border-radius: 15px;
}

.achievement-list {
    margin-top: 30px;
}

.achievement {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
}

.achievement-icon {
    width: 30px;
    height: 30px;
    background: var(--green-primary);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    flex-shrink: 0;
    font-size: 0.8rem;
}

.achievement-text {
    color: var(--dark-gray);
    line-height: 1.5;
}

/* Community Empowerment */
.empowerment-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.circle-chart {
    margin-bottom: 40px;
}

.chart-circle {
    width: 200px;
    height: 200px;
    position: relative;
}

.circular-chart {
    display: block;
    width: 100%;
    height: auto;
}

.circle-bg {
    fill: none;
    stroke: var(--light-gray);
    stroke-width: 3;
}

.circle {
    fill: none;
    stroke: var(--green-primary);
    stroke-width: 3;
    stroke-linecap: round;
    animation: progress 1.5s ease-out forwards;
    transform-origin: center;
    transform: rotate(-90deg);
}

@keyframes progress {
    0% {
        stroke-dasharray: 0, 100;
    }
}

.percentage {
    fill: var(--text-dark);
    font-size: 0.5em;
    font-weight: 700;
    text-anchor: middle;
}

.chart-label {
    text-align: center;
    font-weight: 600;
    color: var(--text-dark);
    margin-top: 10px;
    font-size: 1.1rem;
}

.empowerment-features {
    display: flex;
    justify-content: space-around;
    width: 100%;
    margin-top: 30px;
}

.empowerment-features .feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.empowerment-features .feature i {
    font-size: 1.8rem;
    color: var(--green-primary);
    margin-bottom: 10px;
}

.empowerment-features .feature span {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-dark);
    max-width: 100px;
}

.empowerment-areas {
    margin: 30px 0;
}

.area {
    background: var(--light-gray);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 15px;
}

.area h4 {
    color: var(--text-dark);
    margin-bottom: 10px;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
}

.area h4 i {
    margin-right: 10px;
    color: var(--green-primary);
}

.area p {
    color: var(--dark-gray);
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0;
}

.outcomes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 20px;
}

.outcome {
    text-align: center;
    padding: 15px;
    background: var(--light-gray);
    border-radius: 10px;
}

.outcome-number {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--green-primary);
    margin-bottom: 5px;
}

.outcome-text {
    font-size: 0.9rem;
    color: var(--dark-gray);
    line-height: 1.3;
}

/* Programs Overview */
.programs-overview {
    background: var(--light-gray);
    padding: 100px 0;
}

.program-model {
    position: relative;
    height: 400px;
    margin: 60px auto;
    max-width: 600px;
}

.model-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

.center-circle {
    width: 200px;
    height: 200px;
    background: linear-gradient(135deg, var(--green-primary), var(--green-light));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--white);
    font-weight: 600;
    padding: 30px;
    box-shadow: var(--shadow-lg);
    animation: pulse 3s infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.model-spokes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.spoke {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50%;
    transform-origin: 0 0;
    transform: rotate(var(--angle)) translateY(-50%);
}

.spoke-dot {
    width: 30px;
    height: 30px;
    background: var(--orange-primary);
    border-radius: 50%;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    box-shadow: 0 4px 10px rgba(255, 152, 0, 0.3);
    transition: all 0.3s ease;
}

.spoke-label {
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--white);
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-dark);
    white-space: nowrap;
    box-shadow: var(--shadow-sm);
    opacity: 0;
    transition: all 0.3s ease;
}

.spoke:hover .spoke-dot {
    transform: translateY(-50%) scale(1.3);
    background: var(--green-primary);
}

.spoke:hover .spoke-label {
    opacity: 1;
    right: 50px;
}

.program-model.animated .spoke {
    animation: drawSpoke 0.8s ease-out forwards;
    animation-delay: calc(var(--angle) / 360 * 0.5s);
}

@keyframes drawSpoke {
    from { width: 0; }
    to { width: 50%; }
}

.program-synergy {
    max-width: 800px;
    margin: 60px auto 0;
    text-align: center;
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--dark-gray);
}

.program-synergy strong {
    color: var(--green-primary);
}

/* Call to Action */
.cta-section {
    background: linear-gradient(135deg, var(--green-primary), var(--green-light));
    color: var(--white);
    padding: 100px 0;
    text-align: center;
}

.cta-title {
    font-size: 2.5rem;
    margin-bottom: 20px;
    color: var(--white);
}

.cta-text {
    font-size: 1.2rem;
    max-width: 700px;
    margin: 0 auto 50px;
    opacity: 0.9;
    line-height: 1.6;
}

.cta-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto;
}

.cta-option {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 40px 30px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: transform 0.3s ease;
}

.cta-option:hover {
    transform: translateY(-10px);
    background: rgba(255, 255, 255, 0.15);
}

.option-icon {
    font-size: 2.5rem;
    margin-bottom: 20px;
    color: var(--white);
}

.cta-option h3 {
    font-size: 1.5rem;
    margin-bottom: 15px;
    color: var(--white);
}

.cta-option p {
    opacity: 0.9;
    margin-bottom: 25px;
    line-height: 1.5;
}

.cta-option .btn-outline {
    border-color: var(--white);
    color: var(--white);
}

.cta-option .btn-outline:hover {
    background: var(--white);
    color: var(--green-primary);
}

/* Responsive Design */
@media (max-width: 1200px) {
    .tab-nav {
        gap: 8px;
    }
    
    .tab-link {
        min-width: 130px;
        padding: 15px 10px;
    }
}

@media (max-width: 992px) {
    .two-column-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .program-content {
        padding-right: 0;
    }
    
    .reverse .program-content {
        padding-left: 0;
    }
    
    .three-column-layout {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .social-impact,
    .advocacy-impact {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .advocacy-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .cta-options {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .program-stats {
        flex-wrap: wrap;
    }
    
    .stat-box {
        flex: 0 0 calc(50% - 15px);
    }
}

@media (max-width: 768px) {
    .page-hero {
        height: 400px;
        margin-top: 60px;
    }
    
    .hero-stats {
        gap: 20px;
        flex-wrap: wrap;
    }
    
    .tab-nav {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    
    .tab-link {
        min-width: auto;
    }
    
    .program-title {
        font-size: 2rem;
    }
    
    .program-subtitle {
        font-size: 1.1rem;
    }
    
    .three-column-layout {
        grid-template-columns: 1fr;
    }
    
    .advocacy-grid {
        grid-template-columns: 1fr;
    }
    
    .cta-options {
        grid-template-columns: 1fr;
    }
    
    .program-cta {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .program-cta .btn {
        width: 100%;
        text-align: center;
        margin-bottom: 10px;
    }
    
    .program-model {
        height: 300px;
    }
    
    .center-circle {
        width: 150px;
        height: 150px;
        font-size: 0.9rem;
    }
    
    .spoke-label {
        font-size: 0.8rem;
        padding: 5px 10px;
    }
}

@media (max-width: 576px) {
    .program-section {
        padding: 60px 0;
    }
    
    .program-stats {
        flex-direction: column;
        gap: 20px;
    }
    
    .stat-box {
        flex: 0 0 100%;
    }
    
    .visual-quote {
        margin-left: 15px;
        margin-right: 15px;
        padding: 20px;
    }
    
    .social-impact,
    .advocacy-impact {
        padding: 30px;
    }
    
    .impact-stats {
        flex-direction: column;
        gap: 20px;
    }
    
    .outcomes-grid {
        grid-template-columns: 1fr;
    }
}
/* NEW VISUAL PROGRAM MODEL */
.connection-model {
    position: relative;
    margin: 60px auto;
}

.model-container {
    position: relative;
    width: 100%;
    height: 500px;
    max-width: 800px;
    margin: 0 auto;
}

.model-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

.center-content {
    width: 180px;
    height: 180px;
    background: linear-gradient(135deg, #4CAF50, #8BC34A);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    font-weight: 600;
    padding: 25px;
    box-shadow: 0 10px 30px rgba(76, 175, 80, 0.3);
    position: relative;
}

.center-content h3 {
    font-size: 1.2rem;
    line-height: 1.4;
    margin: 0;
    position: relative;
    z-index: 2;
}

.center-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    background: rgba(76, 175, 80, 0.1);
    border-radius: 50%;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.8;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.3);
        opacity: 0;
    }
}

.program-node {
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: 3;
    transition: all 0.3s ease;
}

.node-circle {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    color: white;
    font-size: 1.5rem;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    position: relative;
}

.node-circle.health { background: #4CAF50; }
.node-circle.education { background: #2196F3; }
.node-circle.social { background: #9C27B0; }
.node-circle.living { background: #FF9800; }
.node-circle.advocacy { background: #F44336; }
.node-circle.empowerment { background: #009688; }

.program-node:hover .node-circle {
    transform: scale(1.2);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.node-label {
    position: absolute;
    white-space: nowrap;
    background: white;
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #2c3e50;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    opacity: 0;
    transition: all 0.3s ease;
    pointer-events: none;
}

.program-node:hover .node-label {
    opacity: 1;
}

.node1 .node-label { top: -60px; left: 50%; transform: translateX(-50%); }
.node2 .node-label { top: -60px; left: 50%; transform: translateX(-50%); }
.node3 .node-label { bottom: -60px; left: 50%; transform: translateX(-50%); }
.node4 .node-label { bottom: -60px; left: 50%; transform: translateX(-50%); }
.node5 .node-label { bottom: -60px; left: 50%; transform: translateX(-50%); }
.node6 .node-label { top: -60px; left: 50%; transform: translateX(-50%); }

.node-connector {
    position: absolute;
    width: 15px;
    height: 15px;
    background: #4CAF50;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.3;
}

.connection-lines {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.connection-lines line {
    stroke: #4CAF50;
    stroke-width: 2;
    stroke-dasharray: 5, 5;
    opacity: 0.3;
    transition: all 0.5s ease;
}

.connection-lines line:hover {
    stroke-width: 3;
    opacity: 0.6;
    stroke-dasharray: none;
}

.model-explanation {
    max-width: 800px;
    margin: 40px auto 0;
    text-align: center;
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--dark-gray);
    padding: 30px;
    background: white;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

.model-explanation strong {
    color: var(--green-primary);
}

@media (max-width: 768px) {
    .model-container {
        height: 400px;
    }
    
    .center-content {
        width: 140px;
        height: 140px;
        padding: 20px;
    }
    
    .center-content h3 {
        font-size: 1rem;
    }
    
    .node-circle {
        width: 60px;
        height: 60px;
        font-size: 1.3rem;
    }
    
    .node-label {
        font-size: 0.75rem;
        padding: 6px 10px;
        white-space: normal;
        width: 120px;
        text-align: center;
    }
    
    .node1 .node-label,
    .node2 .node-label,
    .node3 .node-label,
    .node4 .node-label,
    .node5 .node-label,
    .node6 .node-label {
        transform: translateX(-50%) !important;
    }
}
/* Make Key Interventions text white in Independent Living section */
.program-section.featured .program-features h4,
.program-section.featured .program-features li {
    color: white !important;
}

.program-section.featured .program-features li:before {
    color: var(--orange-primary) !important;
}

/* Specifically target the Independent Living section */
#living .program-features h4,
#living .program-features li,
#living .program-features li strong {
    color: white !important;
}

#living .program-features li:before {
    color: var(--orange-primary) !important;
}
/* Fix connection lines and node labels */
.program-node {
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: 10; /* Increased z-index */
    transition: all 0.3s ease;
}

.node-circle {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    color: white;
    font-size: 1.5rem;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    position: relative;
    z-index: 15; /* Ensure icons are above lines */
}

.connection-lines {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5; /* Lines behind icons */
    pointer-events: none; /* Prevent lines from interfering with hover */
}

.connection-lines line {
    stroke: #4CAF50;
    stroke-width: 2;
    stroke-dasharray: 5, 5;
    opacity: 0.3;
    animation: pulseLine 3s infinite alternate;
}

@keyframes pulseLine {
    0% {
        opacity: 0.2;
    }
    100% {
        opacity: 0.4;
    }
}

/* Keep labels always visible and positioned better */
.node-label {
    position: absolute;
    white-space: nowrap;
    background: white;
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #2c3e50;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    opacity: 0.9; /* Always visible */
    transition: all 0.3s ease;
    pointer-events: none;
    z-index: 12; /* Above lines, below icons */
}

/* Remove hover effect that hides labels */
.program-node:hover .node-label {
    opacity: 1; /* Just slightly brighter on hover */
    transform: none; /* Remove transform on hover */
}

/* Position labels with more spacing */
.node1 .node-label { 
    top: -70px; 
    left: 50%; 
    transform: translateX(-50%);
}
.node2 .node-label { 
    top: -70px; 
    left: 50%; 
    transform: translateX(-50%);
}
.node3 .node-label { 
    bottom: -70px; 
    left: 50%; 
    transform: translateX(-50%);
}
.node4 .node-label { 
    bottom: -70px; 
    left: 50%; 
    transform: translateX(-50%);
}
.node5 .node-label { 
    bottom: -70px; 
    left: 50%; 
    transform: translateX(-50%);
}
.node6 .node-label { 
    top: -70px; 
    left: 50%; 
    transform: translateX(-50%);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .node-label {
        font-size: 0.75rem;
        padding: 6px 10px;
        white-space: normal;
        width: 100px;
        text-align: center;
        opacity: 0.95; /* More visible on mobile */
    }
    
    .node1 .node-label { top: -60px; }
    .node2 .node-label { top: -60px; }
    .node3 .node-label { bottom: -60px; }
    .node4 .node-label { bottom: -60px; }
    .node5 .node-label { bottom: -60px; }
    .node6 .node-label { top: -60px; }
}

#health, #education, #social, #living, #advocacy, #empowerment {
    scroll-margin-top: 120px; /* Adjust based on header height */
}
/* ===== GET INVOLVED PAGE STYLES ===== */

/* Ways to Help Overview */
.ways-overview {
    background: var(--light-gray);
}

.ways-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-top: 50px;
}

.way-card {
    background: var(--white);
    padding: 30px;
    border-radius: 15px;
    text-align: center;
    box-shadow: var(--shadow-md);
    transition: all 0.3s ease;
    border-top: 4px solid var(--green-primary);
}

.way-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-lg);
}

.way-icon {
    width: 70px;
    height: 70px;
    background: rgba(76, 175, 80, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: var(--green-primary);
    font-size: 1.8rem;
}

.way-card h3 {
    font-size: 1.3rem;
    margin-bottom: 15px;
    color: var(--text-dark);
}

.way-card p {
    color: var(--dark-gray);
    margin-bottom: 20px;
    line-height: 1.5;
}

.way-link {
    color: var(--orange-primary);
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    transition: all 0.3s ease;
}

.way-link i {
    margin-left: 8px;
    transition: transform 0.3s ease;
}

.way-link:hover {
    color: var(--orange-light);
}

.way-link:hover i {
    transform: translateX(5px);
}

/* Volunteer Section - Featured */
.volunteer-section.featured {
    background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)),
                url(images/stuart-isaac-harrier-lV4aWw3ujpA-unsplash.jpg) center/cover;
    color: var(--white);
}

.volunteer-section.featured .program-title,
.volunteer-section.featured .program-subtitle,
.volunteer-section.featured .program-description,
.volunteer-section.featured h4,
.volunteer-section.featured p {
    color: var(--white);
}

.volunteer-roles {
    margin: 30px 0;
}

.role-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 20px;
}

.role-item {
    display: flex;
    align-items: flex-start;
    background: rgba(255, 255, 255, 0.1);
    padding: 20px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.role-item:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateX(5px);
}

.role-icon {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    color: var(--white);
    font-size: 1.3rem;
    flex-shrink: 0;
}

.role-content h5 {
    color: var(--white);
    margin-bottom: 8px;
    font-size: 1.1rem;
}

.role-content p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
}

/* Volunteer Form */
.volunteer-form-container {
    background: var(--white);
    border-radius: 15px;
    padding: 30px;
    box-shadow: var(--shadow-lg);
}

.form-header {
    text-align: center;
    margin-bottom: 30px;
}

.form-header h3 {
    color: var(--text-dark);
    margin-bottom: 10px;
    font-size: 1.5rem;
}

.form-header p {
    color: var(--dark-gray);
    margin: 0;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid var(--medium-gray);
    border-radius: 8px;
    font-family: 'Open Sans', sans-serif;
    font-size: 1rem;
    transition: all 0.3s ease;
    background: var(--white);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--green-primary);
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.2);
}

.form-group textarea {
    resize: vertical;
    min-height: 100px;
}

.form-check {
    display: flex;
    align-items: flex-start;
    margin-bottom: 25px;
}

.form-check input {
    margin-right: 10px;
    margin-top: 5px;
}

.form-check label {
    color: var(--dark-gray);
    font-size: 0.9rem;
    line-height: 1.5;
}

.btn-block {
    width: 100%;
    text-align: center;
}

.form-note {
    margin-top: 20px;
    padding: 15px;
    background: rgba(76, 175, 80, 0.1);
    border-radius: 8px;
    border: 1px solid rgba(76, 175, 80, 0.3);
}

.form-note p {
    margin: 0;
    color: var(--green-primary);
    font-size: 0.9rem;
    display: flex;
    align-items: flex-start;
}

.form-note i {
    margin-right: 10px;
    margin-top: 3px;
}

.form-success {
    background: rgba(76, 175, 80, 0.1);
    border: 2px solid var(--green-primary);
    border-radius: 10px;
    padding: 20px;
    margin-top: 20px;
    display: flex;
    align-items: flex-start;
    animation: slideIn 0.5s ease;
}

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

.form-success i {
    color: var(--green-primary);
    font-size: 1.5rem;
    margin-right: 15px;
    margin-top: 3px;
}

.form-success h4 {
    color: var(--text-dark);
    margin-bottom: 5px;
    font-size: 1.2rem;
}

.form-success p {
    color: var(--dark-gray);
    margin: 0;
    line-height: 1.5;
}

/* Donation Section */
.donation-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin: 50px 0;
}

.donation-card {
    background: var(--white);
    border-radius: 15px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: all 0.3s ease;
    position: relative;
}

.donation-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-lg);
}

.donation-card.featured {
    border: 2px solid var(--orange-primary);
}

.donation-badge {
    position: absolute;
    top: 15px;
    right: -30px;
    background: var(--orange-primary);
    color: var(--white);
    padding: 5px 40px;
    font-size: 0.8rem;
    font-weight: 600;
    transform: rotate(45deg);
    z-index: 1;
}

.donation-header {
    background: linear-gradient(135deg, var(--green-primary), var(--green-light));
    padding: 30px;
    text-align: center;
    color: var(--white);
}

.donation-header h3 {
    font-size: 1.4rem;
    margin-bottom: 15px;
}

.donation-icon {
    font-size: 2.5rem;
    opacity: 0.9;
}

.donation-body {
    padding: 30px;
}

.donation-body p {
    color: var(--dark-gray);
    margin-bottom: 25px;
    line-height: 1.6;
}

.amount-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 25px;
}

.amount-option {
    padding: 10px;
    background: var(--light-gray);
    border: 2px solid var(--medium-gray);
    border-radius: 8px;
    font-weight: 600;
    color: var(--text-dark);
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

.amount-option:hover,
.amount-option.active {
    background: var(--green-primary);
    border-color: var(--green-primary);
    color: var(--white);
}

.program-options {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 25px;
}

.program-option {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    background: var(--light-gray);
    border-radius: 8px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.program-option:hover {
    background: var(--green-primary);
    color: var(--white);
}

.program-option:hover i {
    color: var(--white);
}

.program-option i {
    color: var(--green-primary);
    margin-right: 10px;
    font-size: 1.2rem;
}

.program-option span {
    font-weight: 500;
}

.donation-note {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    color: var(--green-primary);
    font-size: 0.9rem;
}

.donation-note i {
    margin-right: 8px;
}

/* Donation Impact */
.donation-impact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
    background: var(--light-gray);
    border-radius: 20px;
    padding: 50px;
    margin-top: 60px;
}

.impact-visual .impact-image {
    height: 350px;
    border-radius: 15px;
    background-size: cover;
    background-position: center;
}

.impact-content h3 {
    font-size: 1.8rem;
    color: var(--text-dark);
    margin-bottom: 20px;
}

.impact-content p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--dark-gray);
    margin-bottom: 30px;
}

.impact-breakdown {
    margin: 30px 0;
}

.breakdown-item {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--medium-gray);
}

.breakdown-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.breakdown-amount {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--green-primary);
    margin-right: 20px;
    min-width: 120px;
}

.breakdown-text {
    color: var(--text-dark);
    line-height: 1.5;
}

.donation-methods h4 {
    color: var(--text-dark);
    margin-bottom: 15px;
    font-size: 1.2rem;
}

.method-icons {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.method-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.method-icon i {
    font-size: 1.8rem;
    color: var(--green-primary);
    margin-bottom: 8px;
}

.method-icon span {
    font-size: 0.9rem;
    color: var(--dark-gray);
    font-weight: 500;
}

/* Partner Section */
.partner-types {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin: 50px 0;
}

.partner-type {
    background: var(--white);
    border-radius: 15px;
    padding: 30px;
    text-align: center;
    box-shadow: var(--shadow-md);
    transition: all 0.3s ease;
    border-top: 4px solid var(--green-primary);
}

.partner-type:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-lg);
}

.type-icon {
    width: 80px;
    height: 80px;
    background: rgba(76, 175, 80, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: var(--green-primary);
    font-size: 2rem;
}

.partner-type h3 {
    font-size: 1.3rem;
    margin-bottom: 15px;
    color: var(--text-dark);
}

.partner-type p {
    color: var(--dark-gray);
    margin-bottom: 20px;
    line-height: 1.6;
}

.type-benefits {
    list-style: none;
    text-align: left;
    margin: 25px 0;
    padding: 0;
}

.type-benefits li {
    padding: 8px 0;
    border-bottom: 1px solid var(--light-gray);
    color: var(--dark-gray);
    font-size: 0.95rem;
    position: relative;
    padding-left: 25px;
}

.type-benefits li:before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--green-primary);
    font-weight: bold;
}

.current-partners {
    text-align: center;
    margin: 60px 0;
    padding: 40px;
    background: var(--light-gray);
    border-radius: 15px;
}

.current-partners h3 {
    color: var(--text-dark);
    margin-bottom: 30px;
    font-size: 1.8rem;
}

.partners-logos {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

.partner-logo {
    background: var(--white);
    padding: 20px 30px;
    border-radius: 10px;
    font-weight: 600;
    color: var(--text-dark);
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
}

.partner-logo:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.partner-cta {
    background: linear-gradient(135deg, var(--green-primary), var(--green-light));
    border-radius: 15px;
    padding: 50px;
    text-align: center;
    color: var(--white);
}

.partner-cta h3 {
    font-size: 2rem;
    margin-bottom: 15px;
    color: var(--white);
}

.partner-cta p {
    font-size: 1.2rem;
    opacity: 0.9;
    margin-bottom: 30px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Events Section */
.upcoming-events {
    margin: 30px 0;
}

.event-card {
    display: flex;
    background: var(--white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

.event-card:hover {
    transform: translateX(5px);
    box-shadow: var(--shadow-md);
}

.event-date {
    background: var(--green-primary);
    color: var(--white);
    padding: 20px;
    min-width: 80px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.date-day {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
}

.date-month {
    font-size: 1rem;
    font-weight: 600;
    margin-top: 5px;
    text-transform: uppercase;
}

.event-content {
    padding: 20px;
    flex-grow: 1;
}

.event-content h4 {
    color: var(--text-dark);
    margin-bottom: 10px;
    font-size: 1.2rem;
}

.event-time,
.event-location {
    color: var(--dark-gray);
    font-size: 0.9rem;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
}

.event-time i,
.event-location i {
    margin-right: 8px;
    width: 16px;
    text-align: center;
}

.event-description {
    color: var(--dark-gray);
    margin: 15px 0;
    line-height: 1.5;
    font-size: 0.95rem;
}

.event-link {
    color: var(--orange-primary);
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    transition: all 0.3s ease;
}

.event-link i {
    margin-left: 8px;
    transition: transform 0.3s ease;
}

.event-link:hover {
    color: var(--orange-light);
}

.event-link:hover i {
    transform: translateX(5px);
}

.calendar-link {
    margin-top: 30px;
}

.events-visual {
    position: relative;
}

.events-image {
    height: 300px;
    border-radius: 15px;
    background-size: cover;
    background-position: center;
    position: relative;
}

.events-testimonial {
    background: var(--white);
    border-radius: 15px;
    padding: 25px;
    margin-top: -50px;
    margin-left: 30px;
    position: relative;
    box-shadow: var(--shadow-lg);
    border-left: 5px solid var(--orange-primary);
}

.testimonial-content p {
    font-style: italic;
    color: var(--text-dark);
    margin-bottom: 15px;
    line-height: 1.6;
}

.testimonial-author .author-name {
    font-weight: 600;
    color: var(--text-dark);
}

.testimonial-author .author-role {
    font-size: 0.9rem;
    color: var(--dark-gray);
}

.events-newsletter {
    background: var(--light-gray);
    border-radius: 15px;
    padding: 25px;
    margin-top: 30px;
}

.events-newsletter h4 {
    color: var(--text-dark);
    margin-bottom: 10px;
    font-size: 1.2rem;
}

.events-newsletter p {
    color: var(--dark-gray);
    margin-bottom: 20px;
    font-size: 0.95rem;
}

.events-newsletter .newsletter-form {
    display: flex;
    gap: 10px;
}

.events-newsletter input {
    flex-grow: 1;
    padding: 12px 15px;
    border: 2px solid var(--medium-gray);
    border-radius: 8px;
    font-family: 'Open Sans', sans-serif;
}

.events-newsletter button {
    white-space: nowrap;
}

/* Fundraise Section */
.fundraise-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin: 50px 0;
}

.step {
    text-align: center;
    position: relative;
}

.step-number {
    width: 50px;
    height: 50px;
    background: var(--green-primary);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.5rem;
    margin: 0 auto 20px;
    position: relative;
    z-index: 1;
}

.step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 25px;
    left: calc(50% + 25px);
    width: calc(100% - 50px);
    height: 2px;
    background: var(--medium-gray);
    z-index: 0;
}

.step-content h4 {
    color: var(--text-dark);
    margin-bottom: 10px;
    font-size: 1.2rem;
}

.step-content p {
    color: var(--dark-gray);
    line-height: 1.5;
    font-size: 0.95rem;
}

.fundraise-ideas {
    margin: 60px 0;
}

.fundraise-ideas h3 {
    text-align: center;
    color: var(--text-dark);
    margin-bottom: 40px;
    font-size: 1.8rem;
}

.ideas-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.idea-card {
    background: var(--white);
    border-radius: 15px;
    padding: 30px;
    text-align: center;
    box-shadow: var(--shadow-md);
    transition: all 0.3s ease;
    border-top: 4px solid transparent;
}

.idea-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-lg);
    border-top-color: var(--green-primary);
}

.idea-card:nth-child(1):hover { border-top-color: #4CAF50; }
.idea-card:nth-child(2):hover { border-top-color: #2196F3; }
.idea-card:nth-child(3):hover { border-top-color: #9C27B0; }
.idea-card:nth-child(4):hover { border-top-color: #FF9800; }

.idea-icon {
    font-size: 2.5rem;
    color: var(--green-primary);
    margin-bottom: 20px;
}

.idea-card h4 {
    color: var(--text-dark);
    margin-bottom: 15px;
    font-size: 1.2rem;
}

.idea-card p {
    color: var(--dark-gray);
    line-height: 1.5;
    font-size: 0.95rem;
    margin: 0;
}

.fundraise-cta {
    background: var(--light-gray);
    border-radius: 15px;
    padding: 50px;
    text-align: center;
}

.fundraise-cta h3 {
    font-size: 2rem;
    margin-bottom: 15px;
    color: var(--text-dark);
}

.fundraise-cta p {
    font-size: 1.2rem;
    color: var(--dark-gray);
    margin-bottom: 30px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Impact Stories */
.impact-stories-section {
    background: var(--light-gray);
}

.stories-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 50px;
}

.story-card {
    background: var(--white);
    border-radius: 15px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: all 0.3s ease;
}

.story-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-lg);
}

.story-image {
    height: 200px;
    background-size: cover;
    background-position: center;
}

.story-content {
    padding: 25px;
}

.story-content h3 {
    color: var(--text-dark);
    margin-bottom: 10px;
    font-size: 1.3rem;
    line-height: 1.4;
}

.story-meta {
    color: var(--green-primary);
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 15px;
}

.story-content p {
    color: var(--dark-gray);
    line-height: 1.6;
    margin-bottom: 20px;
}

.story-link {
    color: var(--orange-primary);
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    transition: all 0.3s ease;
}

.story-link:hover {
    color: var(--orange-light);
}

/* Final Call to Action */
.final-cta {
    text-align: center;
}

.cta-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 40px 0;
    flex-wrap: wrap;
}

.btn-large {
    padding: 18px 30px;
    font-size: 1.1rem;
    min-width: 200px;
}

.btn-large i {
    margin-right: 10px;
}

.cta-contact {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.cta-contact p {
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 15px;
    font-size: 1.1rem;
}

.contact-link {
    color: var(--white);
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    display: inline-flex;
    align-items: center;
    transition: all 0.3s ease;
}

.contact-link:hover {
    color: var(--orange-light);
    transform: translateY(-3px);
}

.contact-link i {
    margin-right: 10px;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .ways-grid,
    .donation-options,
    .partner-types,
    .stories-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .fundraise-steps {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }
    
    .step:not(:last-child)::after {
        display: none;
    }
}

@media (max-width: 992px) {
    .two-column-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .role-grid {
        grid-template-columns: 1fr;
    }
    
    .donation-impact {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .ideas-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .ways-grid,
    .donation-options,
    .partner-types,
    .stories-grid,
    .fundraise-steps,
    .ideas-grid {
        grid-template-columns: 1fr;
    }
    
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .amount-options {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .method-icons {
        justify-content: center;
    }
    
    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .btn-large {
        width: 100%;
        max-width: 300px;
    }
    
    .events-newsletter .newsletter-form {
        flex-direction: column;
    }
}

@media (max-width: 576px) {
    .program-stats {
        flex-direction: column;
        gap: 20px;
    }
    
    .stat-box {
        flex: 0 0 100%;
    }
    
    .donation-impact,
    .partner-cta,
    .fundraise-cta {
        padding: 30px;
    }
    
    .event-card {
        flex-direction: column;
    }
    
    .event-date {
        min-width: 100%;
        flex-direction: row;
        justify-content: center;
        gap: 20px;
        padding: 15px;
    }
    
    .date-day,
    .date-month {
        margin: 0;
    }
}
/* Simple Why Support GBBU Section */
.why-support-simple {
    background: var(--light-gray);
    padding: 80px 0;
}

.simple-support-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin: 50px 0;
}

.support-point {
    text-align: center;
    padding: 30px 20px;
    background: var(--white);
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
}

.support-point:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.point-icon {
    width: 70px;
    height: 70px;
    background: rgba(76, 175, 80, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: var(--green-primary);
    font-size: 1.8rem;
}

.support-point h3 {
    font-size: 1.2rem;
    color: var(--text-dark);
    margin-bottom: 15px;
}

.support-point p {
    color: var(--dark-gray);
    line-height: 1.5;
    font-size: 0.95rem;
    margin: 0;
}

.support-message {
    text-align: center;
    padding: 40px;
    background: var(--white);
    border-radius: 10px;
    margin-top: 50px;
    border-left: 5px solid var(--orange-primary);
}

.support-message p {
    font-size: 1.2rem;
    line-height: 1.6;
    color: var(--text-dark);
    margin-bottom: 30px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.support-message strong {
    color: var(--green-primary);
}

.support-actions {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Responsive */
@media (max-width: 992px) {
    .simple-support-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
}

@media (max-width: 768px) {
    .why-support-simple {
        padding: 60px 0;
    }
    
    .simple-support-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .support-actions {
        flex-direction: column;
        align-items: center;
    }
    
    .support-actions .btn {
        width: 100%;
        max-width: 300px;
        text-align: center;
    }
}

@media (max-width: 576px) {
    .support-message {
        padding: 25px;
    }
    
    .support-message p {
        font-size: 1.1rem;
    }
}
/* ===== CONTACT PAGE STYLES ===== */

/* Contact Options */
.contact-options {
    padding: 80px 0;
}

.options-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-top: 50px;
}

.option-card {
    text-align: center;
    padding: 40px 25px;
    background: var(--white);
    border-radius: 15px;
    box-shadow: var(--shadow-md);
    transition: all 0.3s ease;
    border-top: 4px solid var(--green-primary);
}

.option-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-lg);
}

.option-icon {
    width: 80px;
    height: 80px;
    background: rgba(76, 175, 80, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: var(--green-primary);
    font-size: 2rem;
}

.option-card h3 {
    font-size: 1.3rem;
    color: var(--text-dark);
    margin-bottom: 15px;
}

.option-card p {
    color: var(--dark-gray);
    line-height: 1.5;
    margin-bottom: 25px;
    font-size: 0.95rem;
}

/* Contact Form Sections */
.contact-form-section {
    padding: 80px 0;
    background: var(--light-gray);
}

.contact-form-section:nth-child(odd) {
    background: var(--white);
}

.form-container {
    max-width: 800px;
    margin: 0 auto;
}

.form-header {
    text-align: center;
    margin-bottom: 40px;
}

.form-header h2 {
    font-size: 2rem;
    color: var(--text-dark);
    margin-bottom: 10px;
}

.form-header p {
    color: var(--dark-gray);
    font-size: 1.1rem;
}

.contact-form {
    background: var(--white);
    padding: 40px;
    border-radius: 15px;
    box-shadow: var(--shadow-md);
}

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

.form-group {
    margin-bottom: 20px;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 14px 18px;
    border: 2px solid var(--medium-gray);
    border-radius: 8px;
    font-family: 'Open Sans', sans-serif;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--green-primary);
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.2);
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

.form-check {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
}

.form-check input {
    margin-right: 10px;
}

.form-check label {
    color: var(--dark-gray);
    font-size: 0.95rem;
}

.form-success {
    background: rgba(76, 175, 80, 0.1);
    border: 2px solid var(--green-primary);
    border-radius: 10px;
    padding: 20px;
    margin-top: 20px;
    display: flex;
    align-items: flex-start;
    animation: slideIn 0.5s ease;
}

.form-success i {
    color: var(--green-primary);
    font-size: 1.5rem;
    margin-right: 15px;
    margin-top: 3px;
}

.form-success h4 {
    color: var(--text-dark);
    margin-bottom: 5px;
    font-size: 1.2rem;
}

.form-success p {
    color: var(--dark-gray);
    margin: 0;
    line-height: 1.5;
}

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

/* Contact Information */
.contact-info-section {
    padding: 80px 0;
    background: var(--light-gray);
}

.contact-info-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-bottom: 60px;
}

.info-card {
    text-align: center;
    padding: 30px;
    background: var(--white);
    border-radius: 15px;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
}

.info-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.info-icon {
    width: 70px;
    height: 70px;
    background: rgba(76, 175, 80, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: var(--green-primary);
    font-size: 1.8rem;
}

.info-card h3 {
    font-size: 1.2rem;
    color: var(--text-dark);
    margin-bottom: 15px;
}

.info-card p {
    color: var(--dark-gray);
    line-height: 1.5;
    margin-bottom: 5px;
    font-size: 0.95rem;
}

.info-note {
    font-size: 0.85rem;
    color: var(--green-primary);
    font-style: italic;
    margin-top: 10px;
}

.emergency-contact {
    background: linear-gradient(135deg, #FF9800, #FFB74D);
    border-radius: 15px;
    padding: 40px;
    display: flex;
    align-items: center;
    color: var(--white);
}

.emergency-icon {
    font-size: 3rem;
    margin-right: 30px;
    opacity: 0.9;
}

.emergency-content h3 {
    font-size: 1.8rem;
    margin-bottom: 10px;
    color: var(--white);
}

.emergency-content p {
    margin-bottom: 10px;
    opacity: 0.9;
}

.emergency-number {
    font-size: 1.8rem;
    font-weight: 700;
    margin: 15px 0;
}

.emergency-note {
    font-size: 0.9rem;
    opacity: 0.8;
    font-style: italic;
}

/* Social Section */
.social-section {
    padding: 80px 0;
    text-align: center;
}

.social-content h2 {
    font-size: 2.2rem;
    color: var(--text-dark);
    margin-bottom: 15px;
}

.social-content > p {
    font-size: 1.1rem;
    color: var(--dark-gray);
    margin-bottom: 40px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.social-links {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin: 40px 0;
    flex-wrap: wrap;
}

.social-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: var(--text-dark);
    transition: all 0.3s ease;
    padding: 15px;
    border-radius: 10px;
    min-width: 100px;
}

.social-link:hover {
    background: var(--light-gray);
    transform: translateY(-5px);
}

.social-link i {
    font-size: 2rem;
    margin-bottom: 10px;
    color: var(--green-primary);
}

.social-link span {
    font-weight: 600;
    font-size: 0.95rem;
}

.newsletter-signup {
    max-width: 600px;
    margin: 60px auto 0;
    padding: 40px;
    background: var(--light-gray);
    border-radius: 15px;
}

.newsletter-signup h3 {
    font-size: 1.5rem;
    color: var(--text-dark);
    margin-bottom: 10px;
}

.newsletter-signup p {
    color: var(--dark-gray);
    margin-bottom: 25px;
}

.newsletter-form {
    display: flex;
    gap: 10px;
}

.newsletter-form input {
    flex-grow: 1;
    padding: 14px 18px;
    border: 2px solid var(--medium-gray);
    border-radius: 8px;
    font-family: 'Open Sans', sans-serif;
    font-size: 1rem;
}

.newsletter-form input:focus {
    outline: none;
    border-color: var(--green-primary);
}

/* Responsive Design */
@media (max-width: 992px) {
    .options-grid,
    .contact-info-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .emergency-contact {
        flex-direction: column;
        text-align: center;
    }
    
    .emergency-icon {
        margin-right: 0;
        margin-bottom: 20px;
    }
}

@media (max-width: 768px) {
    .options-grid,
    .contact-info-grid {
        grid-template-columns: 1fr;
    }
    
    .contact-form {
        padding: 30px;
    }
    
    .social-links {
        gap: 20px;
    }
    
    .newsletter-form {
        flex-direction: column;
    }
    
    .emergency-number {
        font-size: 1.5rem;
    }
}

@media (max-width: 576px) {
    .contact-form-section {
        padding: 60px 0;
    }
    
    .form-container {
        padding: 0 15px;
    }
    
    .contact-form {
        padding: 25px;
    }
    
    .social-link {
        min-width: 80px;
        padding: 10px;
    }
    
    .newsletter-signup {
        padding: 25px;
    }
}
/* Fix form element spacing */
.form-group {
    margin-bottom: 25px; /* Increased from 20px */
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 15px 20px; /* Increased padding */
    border: 2px solid var(--medium-gray);
    border-radius: 8px;
    font-family: 'Open Sans', sans-serif;
    font-size: 1rem;
    transition: all 0.3s ease;
    margin-top: 5px; /* Added margin-top */
}

/* Add more spacing specifically for select elements */
.form-group select {
    padding: 14px 18px; /* Match input padding */
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23333' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 18px center;
    background-size: 12px;
}

/* Textarea specific spacing */
.form-group textarea {
    resize: vertical;
    min-height: 140px; /* Increased from 120px */
    line-height: 1.6;
    padding-top: 16px;
}

/* Add spacing between form sections */
.contact-form {
    background: var(--white);
    padding: 40px;
    border-radius: 15px;
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    gap: 20px; /* Added gap between form elements */
}

/* Specific spacing for form rows */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px; /* Increased from 20px */
    margin-bottom: 25px; /* Increased from 20px */
}

/* Button spacing */
.contact-form button[type="submit"] {
    margin-top: 10px; /* Add top margin to button */
    padding: 16px 30px; /* Increase button padding */
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* Checkbox spacing */
.form-check {
    display: flex;
    align-items: center;
    margin: 30px 0; /* Increased margin */
    padding: 15px;
    background: rgba(76, 175, 80, 0.05);
    border-radius: 8px;
}

.form-check input {
    margin-right: 12px;
    transform: scale(1.2);
}

.form-check label {
    color: var(--dark-gray);
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Add label styling for better visual hierarchy */
.form-group {
    position: relative;
}

/* Optional: Add floating labels */
.form-group label {
    position: absolute;
    top: -10px;
    left: 15px;
    background: var(--white);
    padding: 0 8px;
    font-size: 0.85rem;
    color: var(--green-primary);
    font-weight: 600;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.form-group input:focus + label,
.form-group select:focus + label,
.form-group textarea:focus + label {
    opacity: 1;
}

/* Add focus states with more spacing */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--green-primary);
    box-shadow: 0 0 0 4px rgba(76, 175, 80, 0.15); /* Increased shadow */
    padding: 16px 21px; /* Slightly increase padding on focus */
}

/* Success message spacing */
.form-success {
    background: rgba(76, 175, 80, 0.1);
    border: 2px solid var(--green-primary);
    border-radius: 10px;
    padding: 25px; /* Increased padding */
    margin: 30px 0; /* Increased margin */
    display: flex;
    align-items: flex-start;
    animation: slideIn 0.5s ease;
    gap: 20px; /* Added gap */
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .form-group {
        margin-bottom: 20px;
    }
    
    .form-group input,
    .form-group select,
    .form-group textarea {
        padding: 14px 16px;
    }
    
    .form-row {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-bottom: 20px;
    }
    
    .contact-form {
        padding: 25px;
        gap: 15px;
    }
    
    .contact-form button[type="submit"] {
        padding: 14px 25px;
        font-size: 1rem;
    }
    
    .form-check {
        margin: 25px 0;
        padding: 12px;
    }
}

@media (max-width: 576px) {
    .form-group input,
    .form-group select,
    .form-group textarea {
        padding: 13px 15px;
    }
    
    .contact-form {
        padding: 20px;
    }
    
    .form-group textarea {
        min-height: 120px;
    }
}
#fundraiseForm .form-group:has(select) {
    display: flex;
    flex-direction: column;
}

#fundraiseForm select {
    min-width: 300px; /* Make it longer horizontally */
    max-width: 100%;
    padding: 15px 20px;
}
/* Fix form spacing */
.form-group {
    margin-bottom: 25px;
}

.form-group input,
.form-group select,
.form-group textarea {
    margin-top: 8px;
}

/* Make fundraising goal select longer */
.fundraising-goal-select {
    min-width: 300px;
    max-width: 100%;
}

@media (max-width: 768px) {
    .fundraising-goal-select {
        min-width: 100%;
    }
}
/* ===== CONTACT FORM SPACING FIXES ===== */
.form-group {
    margin-bottom: 25px !important;
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: 15px 20px !important;
    margin-top: 5px !important;
}

.form-group select {
    padding: 14px 18px !important;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23333' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 18px center;
    background-size: 12px;
}

.form-group textarea {
    min-height: 140px !important;
    line-height: 1.6;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-row {
    gap: 25px !important;
    margin-bottom: 25px !important;
}

.contact-form button[type="submit"] {
    margin-top: 10px !important;
    padding: 16px 30px !important;
    font-size: 1.05rem !important;
}

.form-check {
    margin: 30px 0 !important;
    padding: 15px;
    background: rgba(76, 175, 80, 0.05);
    border-radius: 8px;
}

.form-check input {
    margin-right: 12px;
    transform: scale(1.2);
}

/* Fundraising goal select box */
.fundraising-goal-select {
    min-width: 350px !important;
    max-width: 100%;
    padding: 15px 25px !important;
}

@media (max-width: 768px) {
    .form-group {
        margin-bottom: 20px !important;
    }
    
    .form-group input,
    .form-group select,
    .form-group textarea {
        padding: 14px 16px !important;
    }
    
    .form-row {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        margin-bottom: 20px !important;
    }
    
    .contact-form {
        gap: 15px;
    }
    
    .contact-form button[type="submit"] {
        padding: 14px 25px !important;
    }
    
    .form-check {
        margin: 25px 0 !important;
        padding: 12px;
    }
    
    .fundraising-goal-select {
        min-width: 100% !important;
    }
}

@media (max-width: 576px) {
    .form-group input,
    .form-group select,
    .form-group textarea {
        padding: 13px 15px !important;
    }
    
    .form-group textarea {
        min-height: 120px !important;
    }
}

/* Back to Top button visibility */
.back-to-top.visible {
    opacity: 1;
    visibility: visible;
}

/* Contact Options */
.contact-options {
    padding: 80px 0;
}

.section-header-center {
    text-align: center;
    margin-bottom: 50px;
}

.section-title {
    font-size: 2.5rem;
    color: #333;
    margin-bottom: 15px;
}

.section-subtitle {
    font-size: 1.1rem;
    color: #666;
    max-width: 600px;
    margin: 0 auto;
}

.options-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.option-card {
    text-align: center;
    padding: 40px 25px;
    background: white;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.option-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.option-icon {
    width: 80px;
    height: 80px;
    background: rgba(76, 175, 80, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: #4CAF50;
    font-size: 2rem;
}

.option-card h3 {
    font-size: 1.3rem;
    color: #333;
    margin-bottom: 15px;
}

.option-card p {
    color: #666;
    line-height: 1.5;
    margin-bottom: 25px;
    font-size: 0.95rem;
}

.btn-outline {
    display: inline-block;
    padding: 10px 25px;
    border: 2px solid #4CAF50;
    color: #4CAF50;
    text-decoration: none;
    border-radius: 5px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-outline:hover {
    background: #4CAF50;
    color: white;
}

/* Responsive */
@media (max-width: 992px) {
    .options-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .options-grid {
        grid-template-columns: 1fr;
    }
    
    .contact-options {
        padding: 60px 0;
    }
    
    .section-title {
        font-size: 2rem;
    }
}
/* ===== CONTACT PAGE OPTIONS ===== */
.contact-options {
    padding: 80px 0;
    background-color: var(--white);
}

.options-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-top: 50px;
}

.option-card {
    background: var(--white);
    padding: 40px 25px;
    border-radius: 15px;
    box-shadow: var(--shadow-md);
    transition: all 0.3s ease;
    text-align: center;
    border-top: 4px solid var(--green-primary);
    display: block; /* Ensure it's visible */
    opacity: 1; /* Ensure it's not transparent */
    visibility: visible; /* Ensure it's not hidden */
    position: relative;
    z-index: 1;
}

.option-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-lg);
    border-top-color: var(--orange-primary);
}

.option-icon {
    width: 80px;
    height: 80px;
    background: rgba(76, 175, 80, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: var(--green-primary);
    font-size: 2rem;
    transition: all 0.3s ease;
}

.option-card:hover .option-icon {
    background: var(--green-primary);
    color: var(--white);
    transform: scale(1.1);
}

.option-card h3 {
    font-size: 1.3rem;
    color: var(--text-dark);
    margin-bottom: 15px;
    font-weight: 600;
}

.option-card p {
    color: var(--dark-gray);
    line-height: 1.5;
    margin-bottom: 25px;
    font-size: 0.95rem;
}

.option-card .btn-outline {
    display: inline-block;
    padding: 10px 25px;
    border: 2px solid var(--green-primary);
    color: var(--green-primary);
    text-decoration: none;
    border-radius: 30px;
    font-weight: 600;
    transition: all 0.3s ease;
    background: transparent;
}

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

/* Responsive styles */
@media (max-width: 1200px) {
    .options-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 25px;
    }
}

@media (max-width: 992px) {
    .options-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
    
    .contact-options {
        padding: 60px 0;
    }
}

@media (max-width: 768px) {
    .options-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        max-width: 400px;
        margin: 50px auto 0;
    }
    
    .option-card {
        padding: 30px 20px;
    }
}

@media (max-width: 576px) {
    .contact-options {
        padding: 50px 0;
    }
    
    .option-card h3 {
        font-size: 1.2rem;
    }
    
    .option-card p {
        font-size: 0.9rem;
    }
    
    .option-icon {
        width: 70px;
        height: 70px;
        font-size: 1.8rem;
    }
}
/* ===== FOOTER FIXES ===== */
.footer {
    background-color: #1a252f;
    color: var(--white);
    padding: 80px 0 30px;
    position: relative;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 50px;
    margin-bottom: 50px;
}

/* Social Icons Grid */
.social-icons-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 15px;
}

.social-icon {
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-decoration: none;
    font-size: 1.2rem;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.social-icon:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* Specific social media colors on hover */
.social-icon.facebook:hover { 
    background: #1877F2 !important;
    border-color: #1877F2;
}

.social-icon.twitter:hover { 
    background: #1DA1F2 !important;
    border-color: #1DA1F2;
}

.social-icon.instagram:hover { 
    background: linear-gradient(45deg, #405DE6, #5851DB, #833AB4, #C13584, #E1306C, #FD1D1D) !important;
    border-color: transparent;
}

.social-icon.linkedin:hover { 
    background: #0077B5 !important;
    border-color: #0077B5;
}

.social-icon.youtube:hover { 
    background: #FF0000 !important;
    border-color: #FF0000;
}

.social-icon.whatsapp:hover { 
    background: #25D366 !important;
    border-color: #25D366;
}

/* Newsletter Form in Footer */
.footer-newsletter {
    margin-top: 20px;
}

.footer-input-group {
    display: flex;
    margin-bottom: 15px;
}

.footer-input {
    flex: 1;
    padding: 12px 15px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px 0 0 4px;
    color: white;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.footer-input:focus {
    outline: none;
    border-color: var(--orange-primary);
    background: rgba(255, 255, 255, 0.1);
}

.footer-btn {
    padding: 12px 20px;
    background: var(--orange-primary);
    color: white;
    border: none;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.footer-btn:hover {
    background: #e68900;
}

.footer-newsletter-note {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
    line-height: 1.4;
    margin-top: 10px;
}
/* ===== STAY CONNECTED SECTION FIX ===== */
.stay-connected {
    background: linear-gradient(135deg, var(--green-primary), var(--green-light));
    color: var(--white);
    padding: 80px 0;
    text-align: center;
}

.connect-title {
    font-size: 2.5rem;
    margin-bottom: 20px;
    color: var(--white);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.connect-text {
    font-size: 1.2rem;
    margin-bottom: 40px;
    opacity: 0.95;
    line-height: 1.6;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.newsletter-form {
    max-width: 500px;
    margin: 0 auto 40px;
}

.form-group {
    display: flex;
    margin-bottom: 15px;
}

.form-group input {
    flex-grow: 1;
    padding: 16px 20px;
    border: none;
    border-radius: 4px 0 0 4px;
    font-family: 'Open Sans', sans-serif;
    font-size: 1rem;
    background: rgba(255, 255, 255, 0.95);
}

.form-group input:focus {
    outline: none;
    background: white;
}

.form-group button {
    border-radius: 0 4px 4px 0;
    padding: 16px 30px;
    background: var(--orange-primary);
    color: white;
    border: none;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.form-group button:hover {
    background: #e68900;
}

.form-note {
    font-size: 0.9rem;
    opacity: 0.8;
    margin-top: 15px;
}

/* Social links in Stay Connected */
.stay-connected .social-links {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
    flex-wrap: wrap;
}

.stay-connected .social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    color: var(--white);
    font-size: 1.3rem;
    transition: all 0.3s ease;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.stay-connected .social-link:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-5px);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
/* ===== WHAT WE DO CARDS FIX ON INDEX PAGE ===== */
.programs .program-title {
    color: white !important;
    font-size: 1.6rem !important;
    margin-bottom: 15px !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
    font-weight: 600 !important;
}

.programs .program-text {
    color: rgba(255, 255, 255, 0.95) !important;
    font-size: 1rem !important;
    line-height: 1.7 !important;
    margin-bottom: 20px !important;
}

.programs .program-link {
    color: var(--orange-light) !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
}

.programs .program-link:hover {
    color: var(--orange-primary) !important;
}

/* Make sure program cards are visible */
.program-card {
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    transition: all 0.4s ease !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.program-card:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    transform: translateY(-10px) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4) !important;
}
/* ===== CHAT WIDGET STYLES ===== */
.chat-widget {
    position: fixed;
    bottom: 40px;
    left: 30px;
    z-index: 1000;
}

.chat-button {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--green-primary), var(--green-light));
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    box-shadow: 0 5px 20px rgba(76, 175, 80, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    border: none;
    outline: none;
}

.chat-button:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 25px rgba(76, 175, 80, 0.4);
}

.chat-button .notification-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #FF5722;
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    border: 2px solid #1a252f;
    animation: badgePulse 2s infinite;
}

@keyframes badgePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.chat-box {
    position: absolute;
    bottom: 70px;
    left: 0;
    width: 350px;
    background: white;
    border-radius: 15px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease;
}

.chat-box.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.chat-header {
    background: linear-gradient(135deg, var(--green-primary), var(--green-light));
    color: white;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chat-header h4 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
}

.close-chat {
    background: none;
    border: none;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 5px;
    transition: transform 0.3s ease;
}

.close-chat:hover {
    transform: rotate(90deg);
}

.chat-body {
    padding: 20px;
    max-height: 400px;
    overflow-y: auto;
}

.chat-message {
    background: #f5f7fa;
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 15px;
    font-size: 0.95rem;
    line-height: 1.5;
}

.chat-message.bot {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.1), rgba(139, 195, 74, 0.1));
    border-left: 4px solid var(--green-primary);
}

.chat-input {
    display: flex;
    padding: 15px;
    background: #f8f9fa;
    border-top: 1px solid #eee;
}

.chat-input input {
    flex: 1;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 25px 0 0 25px;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.9rem;
}

.chat-input button {
    padding: 12px 20px;
    background: var(--orange-primary);
    color: white;
    border: none;
    border-radius: 0 25px 25px 0;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
}

.chat-input button:hover {
    background: #e68900;
}

/* Responsive chat widget */
@media (max-width: 768px) {
    .chat-widget {
        left: 20px;
        bottom: 30px;
    }
    
    .chat-button {
        width: 55px;
        height: 55px;
        font-size: 1.3rem;
    }
    
    .chat-box {
        width: 320px;
        left: -10px;
    }
}

@media (max-width: 480px) {
    .chat-box {
        width: 280px;
        left: -50px;
    }
}
/* ===== IMPACT SECTION - EQUAL SIZED CARDS ===== */
.impact-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-bottom: 60px;
}

.stat-item {
    background-color: var(--white);
    padding: 40px 30px;
    border-radius: 10px;
    text-align: center;
    box-shadow: var(--shadow-md);
    transition: all var(--transition-normal);
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 250px; /* Set minimum equal height */
}

/* Ensure all stat cards have same dimensions */
.stat-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.stat-icon {
    width: 80px;
    height: 80px;
    background-color: rgba(76, 175, 80, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    color: var(--green-primary);
    font-size: 2rem;
    flex-shrink: 0; /* Prevent icon from shrinking */
}

.stat-number {
    font-size: 2.8rem;
    font-weight: 700;
    color: var(--green-primary);
    margin-bottom: 10px;
    line-height: 1;
}

.stat-text {
    color: var(--dark-gray);
    font-size: 1.1rem;
    line-height: 1.4;
    margin: 0;
    padding: 0 10px;
}
/* ===== IMPACT STORIES - PERFECT IMAGE FIT ===== */
.impact-stories {
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.story-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0; /* Remove gap to make images flush */
    align-items: stretch; /* Make both sides equal height */
    background-color: var(--white);
    border-radius: 10px;
    overflow: hidden; /* Contain the image properly */
    box-shadow: var(--shadow-lg);
    min-height: 350px; /* Set minimum height for consistency */
}

.story-image {
    height: 100%; /* Fill entire height of parent */
    min-height: 350px; /* Ensure minimum height */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
}

/* Fix for image aspect ratio - maintain 16:9 ratio */
.story-image::before {
    content: '';
    display: block;
    padding-top: 56.25%; /* 16:9 Aspect Ratio (9/16 = 0.5625) */
}

/* If you want square images, use this instead: */
/* .story-image {
    aspect-ratio: 1 / 1; /* Perfect square */
/* } */

.story-content {
    padding: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertically center content */
    height: 100%;
}

.story-title {
    font-size: 1.8rem;
    margin-bottom: 20px;
    color: var(--text-dark);
    line-height: 1.3;
}

.story-text {
    margin-bottom: 25px;
    color: var(--dark-gray);
    line-height: 1.7;
    font-size: 1.1rem;
    flex-grow: 1; /* Push link to bottom */
}

.story-link {
    color: var(--orange-primary);
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    transition: all var(--transition-fast);
    align-self: flex-start; /* Align to left */
    margin-top: auto; /* Push to bottom */
}

.story-link i {
    margin-left: 8px;
    transition: transform var(--transition-fast);
}

.story-link:hover {
    color: var(--orange-light);
}

.story-link:hover i {
    transform: translateX(5px);
}
@media (max-width: 1200px) {
    .impact-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
    
    .story-card {
        min-height: 300px;
    }
    
    .story-content {
        padding: 40px;
    }
}

@media (max-width: 992px) {
    .stat-item {
        min-height: 220px;
        padding: 30px 25px;
    }
    
    .stat-icon {
        width: 70px;
        height: 70px;
        font-size: 1.8rem;
        margin-bottom: 20px;
    }
    
    .stat-number {
        font-size: 2.5rem;
    }
    
    .stat-text {
        font-size: 1rem;
    }
}

@media (max-width: 768px) {
    .story-card {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    
    .story-image {
        height: 250px; /* Fixed height on mobile */
        min-height: 250px;
    }
    
    .story-content {
        padding: 30px;
    }
    
    .story-title {
        font-size: 1.5rem;
        margin-bottom: 15px;
    }
    
    .story-text {
        font-size: 1rem;
        margin-bottom: 20px;
    }
}

@media (max-width: 576px) {
    .impact-stats {
        grid-template-columns: 1fr;
        gap: 20px;
        max-width: 400px;
        margin: 0 auto 40px;
    }
    
    .stat-item {
        min-height: 200px;
        padding: 25px 20px;
    }
    
    .stat-icon {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
        margin-bottom: 15px;
    }
    
    .stat-number {
        font-size: 2.2rem;
    }
    
    .stat-text {
        font-size: 0.95rem;
    }
    
    .story-card {
        margin: 0 10px;
    }
    
    .story-image {
        height: 200px;
        min-height: 200px;
    }
    
    .story-content {
        padding: 25px;
    }
}
/* ===== STAY CONNECTED SECTION COMPLETE OVERHAUL ===== */
.stay-connected {
    background: linear-gradient(135deg, #2c3e50, #34495e);
    color: var(--white);
    padding: 100px 0;
    position: relative;
    overflow: hidden;
}

/* Decorative background elements */
.stay-connected::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none" opacity="0.05"><circle cx="50" cy="50" r="2" fill="white"/></svg>');
    background-size: 40px 40px;
    z-index: 1;
}

/* Main container */
.stay-connected .container {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Content wrapper */
.connect-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* Title */
.connect-title {
    font-size: 2.8rem;
    font-weight: 700;
    margin-bottom: 25px;
    color: var(--white);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    position: relative;
    padding-bottom: 20px;
}

.connect-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, var(--green-primary), var(--orange-primary));
    border-radius: 2px;
}

/* Subtitle */
.connect-text {
    font-size: 1.3rem;
    line-height: 1.7;
    margin-bottom: 50px;
    color: rgba(255, 255, 255, 0.9);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* ===== NEWSLETTER FORM STYLING ===== */
.newsletter-container {
    width: 100%;
    max-width: 600px;
    margin: 0 auto 60px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    padding: 40px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

.newsletter-container h3 {
    font-size: 1.5rem;
    margin-bottom: 25px;
    color: var(--white);
    font-weight: 600;
}

.newsletter-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.newsletter-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
}

.form-group label {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.8);
    text-align: left;
    font-weight: 500;
    margin-bottom: 5px;
}

.form-group input {
    width: 100%;
    padding: 16px 20px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    font-family: 'Open Sans', sans-serif;
    font-size: 1rem;
    background: rgba(255, 255, 255, 0.1);
    color: var(--white);
    transition: all 0.3s ease;
}

.form-group input:focus {
    outline: none;
    border-color: var(--green-primary);
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.2);
}

.form-group input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.form-group button {
    padding: 16px 30px;
    background: linear-gradient(90deg, var(--green-primary), var(--green-light));
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.form-group button:hover {
    background: linear-gradient(90deg, #3d8b40, #7cb342);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(76, 175, 80, 0.3);
}

.form-group button i {
    font-size: 1.1rem;
    transition: transform 0.3s ease;
}

.form-group button:hover i {
    transform: translateX(5px);
}

.form-note {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 15px;
    text-align: center;
    line-height: 1.5;
}

/* ===== SOCIAL CONNECTIONS ===== */
.social-connections {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    padding: 40px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

.social-connections h3 {
    font-size: 1.5rem;
    margin-bottom: 25px;
    color: var(--white);
    font-weight: 600;
    text-align: center;
}

.social-connections p {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 30px;
    text-align: center;
    line-height: 1.6;
}

/* Social Links Grid */
.social-links-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
    margin-bottom: 30px;
}

.social-link-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    padding: 15px 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    min-height: 100px;
}

.social-link-item:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.social-link-item i {
    font-size: 1.8rem;
    margin-bottom: 12px;
    color: var(--white);
    transition: all 0.3s ease;
}

.social-link-item:hover i {
    transform: scale(1.2);
}

.social-link-item span {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--white);
    text-align: center;
    line-height: 1.3;
}

/* Platform-specific colors */
.social-link-item.facebook:hover { 
    background: rgba(24, 119, 242, 0.2);
    border-color: #1877F2;
}

.social-link-item.twitter:hover { 
    background: rgba(29, 161, 242, 0.2);
    border-color: #1DA1F2;
}

.social-link-item.instagram:hover { 
    background: rgba(225, 48, 108, 0.2);
    border-color: #E1306C;
}

.social-link-item.linkedin:hover { 
    background: rgba(0, 119, 181, 0.2);
    border-color: #0077B5;
}

.social-link-item.youtube:hover { 
    background: rgba(255, 0, 0, 0.2);
    border-color: #FF0000;
}

/* Or alternative - colored icons on hover */
.social-link-item:hover i.facebook { color: #1877F2; }
.social-link-item:hover i.twitter { color: #1DA1F2; }
.social-link-item:hover i.instagram { color: #E1306C; }
.social-link-item:hover i.linkedin { color: #0077B5; }
.social-link-item:hover i.youtube { color: #FF0000; }

/* Responsive Design */
@media (max-width: 992px) {
    .stay-connected {
        padding: 80px 0;
    }
    
    .connect-title {
        font-size: 2.4rem;
    }
    
    .connect-text {
        font-size: 1.2rem;
        margin-bottom: 40px;
    }
    
    .newsletter-container,
    .social-connections {
        padding: 30px;
    }
    
    .social-links-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
    }
}

@media (max-width: 768px) {
    .stay-connected {
        padding: 60px 0;
    }
    
    .connect-title {
        font-size: 2rem;
        padding-bottom: 15px;
    }
    
    .connect-title::after {
        width: 60px;
        height: 3px;
    }
    
    .connect-text {
        font-size: 1.1rem;
        margin-bottom: 40px;
        padding: 0 10px;
    }
    
    .newsletter-container,
    .social-connections {
        padding: 25px;
        margin: 0 10px;
    }
    
    .form-group input {
        padding: 14px 18px;
        font-size: 0.95rem;
    }
    
    .form-group button {
        padding: 14px 25px;
        font-size: 1rem;
    }
    
    .social-links-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    
    .social-link-item {
        min-height: 90px;
        padding: 12px 8px;
    }
    
    .social-link-item i {
        font-size: 1.6rem;
        margin-bottom: 10px;
    }
    
    .social-link-item span {
        font-size: 0.85rem;
    }
}

@media (max-width: 576px) {
    .stay-connected {
        padding: 50px 0;
    }
    
    .connect-title {
        font-size: 1.8rem;
    }
    
    .connect-text {
        font-size: 1rem;
        margin-bottom: 35px;
    }
    
    .newsletter-container h3,
    .social-connections h3 {
        font-size: 1.3rem;
    }
    
    .newsletter-form {
        gap: 15px;
    }
    
    .form-group {
        gap: 8px;
    }
    
    .social-links-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    
    .social-link-item {
        min-height: 85px;
        padding: 10px 5px;
    }
    
    .social-link-item i {
        font-size: 1.5rem;
        margin-bottom: 8px;
    }
    
    .social-link-item span {
        font-size: 0.8rem;
    }
}

@media (max-width: 400px) {
    .social-links-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    
    .social-link-item {
        min-height: 80px;
    }
    
    .social-link-item i {
        font-size: 1.4rem;
    }
}
/* ===== WHO WE ARE CARD SPECIFIC FIXES ===== */
.who-we-are .about-card {
    /* Remove any corner decorations */
    position: relative;
    border: none;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    border-radius: 15px;
    padding: 40px;
    background: var(--white);
}

/* Ensure no top-left corner elements */
.who-we-are .card-corner.corner-top-left,
.who-we-are .about-card::before,
.who-we-are .about-card::after {
    display: none !important;
}

/* Fix the seedling icon specifically */
.who-we-are .brand-highlight {
    display: flex;
    align-items: flex-start;
    margin: 20px 0;
    padding: 15px;
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.05), rgba(255, 152, 0, 0.05));
    border-radius: 10px;
    border-left: 4px solid var(--green-primary);
}

.who-we-are .highlight-icon {
    margin-right: 15px;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.who-we-are .highlight-icon i.fa-seedling {
    font-size: 1.2rem !important;
    color: var(--green-primary);
    line-height: 1;
}

.who-we-are .highlight-text {
    flex-grow: 1;
}

.who-we-are .highlight-text p {
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--text-dark);
}

/* Keep the bottom-right corner if you want it */
.who-we-are .card-corner.corner-bottom-right {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    border-color: transparent var(--orange-primary) var(--orange-primary) transparent;
    border-width: 3px;
    border-style: solid;
    border-radius: 0 0 15px 0;
    opacity: 0.5;
    transition: all 0.3s ease;
}

.who-we-are .about-card:hover .card-corner.corner-bottom-right {
    opacity: 1;
    width: 70px;
    height: 70px;
}
.who-we-are .about-card {
    padding-top: 50px !important; /* Add more top padding */
    padding-bottom: 50px !important;
}
.approach-visual-card .icon-circle {
    width: 55px !important;
    height: 55px !important;
    min-width: 55px !important;
    min-height: 55px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important; /* Prevent shrinking */
}
/* Fix 4 Pillar Framework card text visibility */
.approach-visual-card {
    color: rgba(255, 255, 255, 0.9) !important; /* Ensure all text is visible */
}

/* Make titles brighter */
.approach-visual-title {
    color: white !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5) !important;
}

.approach-item-title {
    color: white !important;
    font-weight: 600 !important;
}

/* Make body text lighter */
.approach-item-text {
    color: rgba(255, 255, 255, 0.85) !important;
    line-height: 1.5 !important;
}

/* Ensure subtitles are visible */
.approach-visual-subtitle {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Make icon circles more visible */
.icon-circle {
    background: rgba(255, 255, 255, 0.15) !important;
    border-width: 2px !important;
}

/* Make the before dots brighter */
.approach-item-title::before {
    opacity: 0.9 !important;
    box-shadow: 0 0 10px currentColor !important;
}
/* ===== WHO WE ARE PAGE HERO ALIGNMENT ===== */

/* Target specifically the Who We Are page hero */
body:not(.home) .page-hero .hero-content,
.who-we-are-page .page-hero .hero-content,
.page-hero[data-page="who-we-are"] .hero-content {
    text-align: left !important;
    align-items: flex-start !important;
    display: flex !important;
    flex-direction: column !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
}

/* Center the title but align text left */
.page-hero .page-title {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: auto !important;
}

.page-hero .page-subtitle {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    max-width: 100% !important;
}

/* Specific selector for Who We Are hero */
.page-hero:has(+ .our-timeline-section) .hero-content {
    text-align: left !important;
}

/* Alternative: Target by URL */
html[data-page="who-we-are"] .page-hero .hero-content,
html:has([href*="who-we-are.html"]) .page-hero .hero-content {
    text-align: left !important;
}
/* If timeline has dark background, use light text */
.our-timeline-section {
    background: #2c3e50 !important; /* Dark background */
}

.our-timeline-section .section-title {
    color: #ffffff !important;
}

.our-timeline-section .section-subtitle {
    color: rgba(255, 255, 255, 0.9) !important;
}

.timeline-item-card {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.timeline-item-content {
    color: #ffffff !important;
}

.timeline-item-title {
    color: #ffffff !important;
}

.timeline-item-description {
    color: rgba(255, 255, 255, 0.85) !important;
}

.timeline-phase {
    color: var(--orange-primary) !important;
}
/* ===== ANIMATED LEFT BORDER (RECOMMENDED) ===== */
.page-hero .hero-content {
    position: relative;
    padding-left: 50px;
    overflow: hidden;
}

.page-hero .hero-content::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(
        to bottom,
        transparent,
        var(--green-primary),
        var(--orange-primary),
        transparent
    );
    border-radius: 2px;
    animation: borderGlow 3s ease-in-out infinite;
}

@keyframes borderGlow {
    0%, 100% {
        opacity: 0.5;
        box-shadow: 0 0 5px var(--green-primary);
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 20px var(--green-primary), 0 0 30px var(--orange-primary);
    }
}

/* Add pulsing dots */
.page-hero .hero-content::after {
    content: '';
    position: absolute;
    left: -4px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    background: var(--orange-primary);
    border-radius: 50%;
    animation: pulseDot 2s ease-in-out infinite;
    box-shadow: 0 0 15px var(--orange-primary);
}

@keyframes pulseDot {
    0%, 100% {
        transform: translateY(-50%) scale(1);
        opacity: 0.8;
    }
    50% {
        transform: translateY(-50%) scale(1.3);
        opacity: 1;
    }
}
/* RECOMMENDED FIX: Combine options for best result */
.our-timeline-section {
    background: #f8fafc;
    padding: 100px 0;
    position: relative;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

/* Add subtle brand color accents */
.our-timeline-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 20% 80%, rgba(76, 175, 80, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255, 152, 0, 0.03) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

.our-timeline-section .container {
    position: relative;
    z-index: 1;
}

/* Enhance cards for better contrast */
.timeline-item-card {
    background: var(--white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.07);
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 1;
}

.timeline-item-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
    border-color: var(--green-primary);
}

/* Add subtle color accent on hover */
.timeline-item-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, rgba(76, 175, 80, 0.02), rgba(255, 152, 0, 0.02));
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
    border-radius: inherit;
}

.timeline-item-card:hover::after {
    opacity: 1;
}
/* ===== CONTACT FORM STYLES ===== */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
}

.contact-form {
    background: var(--white);
    padding: 40px;
    border-radius: 15px;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--medium-gray);
}

.contact-form .form-group {
    margin-bottom: 25px;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
    width: 100%;
    padding: 15px 20px;
    border: 2px solid var(--medium-gray);
    border-radius: 8px;
    font-family: 'Open Sans', sans-serif;
    font-size: 1rem;
    color: var(--text-dark);
    background: var(--white);
    transition: all 0.3s ease;
    box-sizing: border-box; /* Ensure padding doesn't affect width */
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--green-primary);
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: var(--dark-gray);
    opacity: 0.7;
}

.contact-form select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%236b7280' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 20px center;
    background-size: 12px;
    padding-right: 40px;
    cursor: pointer;
}

.contact-form textarea {
    resize: vertical;
    min-height: 150px;
    line-height: 1.6;
    font-family: 'Open Sans', sans-serif;
}

.form-check {
    display: flex;
    align-items: center;
    margin: 25px 0 30px;
    gap: 10px;
}

.form-check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    cursor: pointer;
}

.form-check label {
    color: var(--dark-gray);
    font-size: 0.95rem;
    cursor: pointer;
    line-height: 1.4;
}

.form-note {
    margin-top: 25px;
    padding: 15px;
    background: rgba(76, 175, 80, 0.05);
    border-radius: 8px;
    border: 1px solid rgba(76, 175, 80, 0.2);
}

.form-note p {
    margin: 0;
    color: var(--green-primary);
    font-size: 0.9rem;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.form-note i {
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: 2px;
}

/* Contact Info Cards */
.contact-info {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.info-card {
    display: flex;
    align-items: flex-start;
    background: var(--white);
    padding: 25px;
    border-radius: 10px;
    box-shadow: var(--shadow-md);
    border-left: 4px solid var(--green-primary);
    transition: all 0.3s ease;
}

.info-card:hover {
    transform: translateX(5px);
    box-shadow: var(--shadow-lg);
}

.info-icon {
    width: 50px;
    height: 50px;
    background: rgba(76, 175, 80, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
    color: var(--green-primary);
    font-size: 1.3rem;
    flex-shrink: 0;
}

.info-content h4 {
    color: var(--text-dark);
    margin-bottom: 8px;
    font-size: 1.2rem;
}

.info-content p {
    color: var(--dark-gray);
    line-height: 1.6;
    margin: 0;
}

/* Social Contact */
.social-contact {
    margin-top: 20px;
    padding: 25px;
    background: var(--white);
    border-radius: 10px;
    box-shadow: var(--shadow-md);
}

.social-contact h4 {
    color: var(--text-dark);
    margin-bottom: 20px;
    font-size: 1.2rem;
}

.social-contact .social-links {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.social-contact .social-link {
    width: 45px;
    height: 45px;
    background: var(--light-gray);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-dark);
    font-size: 1.2rem;
    transition: all 0.3s ease;
    text-decoration: none;
}

.social-contact .social-link:hover {
    background: var(--green-primary);
    color: var(--white);
    transform: translateY(-3px);
}
/* ===== REMOVE UNWANTED LINES IN EDUCATION SECTION ===== */

/* Target the education section specifically */
#education .approach-steps .step {
    position: relative;
}

/* Remove the ::before pseudo-element lines if they exist */
#education .approach-steps .step::before,
#education .approach-steps .step::after {
    display: none !important;
    content: none !important;
}

/* Remove any border, outline, or box-shadow */
#education .approach-steps .step {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Specifically target the step-content */
#education .approach-steps .step-content h5,
#education .approach-steps .step-content p {
    position: relative;
}

/* Remove any ::before lines on step content */
#education .approach-steps .step-content h5::before,
#education .approach-steps .step-content p::before,
#education .approach-steps .step-content h5::after,
#education .approach-steps .step-content p::after {
    display: none !important;
    content: '' !important;
}

/* Remove any borders or lines on the step number */
#education .step-number {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* If there are lines from parent containers */
#education .program-approach {
    border: none !important;
    background: transparent !important;
}

#education .program-approach::before,
#education .program-approach::after {
    display: none !important;
}
/* ===== CONTACT PAGE HEADING PADDING FIX ===== */
.contact-options .section-header-center {
    padding-top: 40px; /* Add padding to push content lower */
    margin-bottom: 40px; /* Adjust spacing below heading */
}

/* Increase the padding on the contact options section itself */
.contact-options {
    padding: 100px 0 80px !important; /* Increased top padding */
    background-color: var(--white);
}

/* If you want more specific control, target the title and subtitle separately */
.contact-options .section-title {
    margin-bottom: 20px; /* Increase space between title and subtitle */
}

.contact-options .section-subtitle {
    margin-bottom: 30px; /* Add space below subtitle before cards */
    font-size: 1.15rem; /* Optional: slightly larger text */
    line-height: 1.6;
}

/* Alternative: Add margin to push the entire container down */
.contact-options .container {
    margin-top: 30px; /* Push entire content block down */
}

/* If using page hero on contact page, adjust that too */
.contact-page .page-hero {
    margin-bottom: 30px; /* Add space below hero */
}

/* Ensure smooth transition from hero to contact options */
.page-hero + .contact-options {
    margin-top: 0; /* Remove any default margin */
}

/* For more precise control, target specific elements */
.contact-options .section-header {
    padding: 30px 0 20px; /* Top and bottom padding */
}

/* If you want the cards to also be pushed down */
.contact-options .options-grid {
    margin-top: 40px; /* Increase space above cards */
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .contact-options {
        padding: 80px 0 60px !important;
    }
    
    .contact-options .section-header-center {
        padding-top: 30px;
        margin-bottom: 30px;
    }
}

@media (max-width: 768px) {
    .contact-options {
        padding: 60px 0 40px !important;
    }
    
    .contact-options .section-header-center {
        padding-top: 20px;
        margin-bottom: 25px;
    }
    
    .contact-options .options-grid {
        margin-top: 30px;
    }
}

@media (max-width: 576px) {
    .contact-options {
        padding: 50px 0 30px !important;
    }
    
    .contact-options .section-header-center {
        padding-top: 15px;
        margin-bottom: 20px;
    }
    
    .contact-options .section-title {
        font-size: 2rem;
        margin-bottom: 15px;
    }
    
    .contact-options .section-subtitle {
        font-size: 1rem;
        margin-bottom: 25px;
    }
}
/* ===== SYMMETRICAL CONTACT INFO CARDS ===== */
.contact-info-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-bottom: 60px;
}

.info-card {
    background: var(--white);
    border-radius: 15px;
    padding: 35px 25px;
    text-align: center;
    box-shadow: var(--shadow-md);
    transition: all 0.3s ease;
    height: 100%; /* Make all cards same height */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    border-top: 4px solid var(--green-primary);
    min-height: 250px; /* Set minimum equal height */
}

.info-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
    border-top-color: var(--orange-primary);
}

.info-icon {
    width: 70px;
    height: 70px;
    background: rgba(76, 175, 80, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: var(--green-primary);
    font-size: 1.8rem;
    flex-shrink: 0; /* Prevent icon from shrinking */
    transition: all 0.3s ease;
}

.info-card:hover .info-icon {
    background: var(--green-primary);
    color: var(--white);
    transform: scale(1.1);
}

.info-card h3 {
    font-size: 1.3rem;
    color: var(--text-dark);
    margin-bottom: 15px;
    font-weight: 600;
    line-height: 1.3;
}

.info-card p {
    color: var(--dark-gray);
    line-height: 1.5;
    margin-bottom: 5px;
    font-size: 0.95rem;
    flex-grow: 1; /* Make text take remaining space */
    width: 100%; /* Ensure text spans full width */
}

.info-note {
    font-size: 0.85rem;
    color: var(--green-primary);
    font-style: italic;
    margin-top: 10px;
    width: 100%;
}

/* Emergency Contact Card - Make it match others */
.emergency-contact {
    background: linear-gradient(135deg, #FF9800, #FFB74D);
    border-radius: 15px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--white);
    min-height: 250px;
    justify-content: center;
    text-align: center;
}

.emergency-icon {
    font-size: 2.5rem;
    margin-bottom: 20px;
    opacity: 0.9;
}

.emergency-content h3 {
    font-size: 1.6rem;
    margin-bottom: 15px;
    color: var(--white);
}

.emergency-content p {
    margin-bottom: 10px;
    opacity: 0.9;
    line-height: 1.5;
}

.emergency-number {
    font-size: 1.8rem;
    font-weight: 700;
    margin: 15px 0;
    color: var(--white);
}

.emergency-note {
    font-size: 0.9rem;
    opacity: 0.8;
    font-style: italic;
    margin-top: 10px;
}
@media (max-width: 1200px) {
    .contact-info-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
    
    .info-card {
        min-height: 230px;
        padding: 30px 20px;
    }
}

@media (max-width: 992px) {
    .footer-content {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }
    
    .footer-column {
        min-height: auto !important;
    }
    
    .emergency-contact {
        flex-direction: column;
        text-align: center;
        padding: 30px 25px;
        min-height: 230px;
    }
    
    .emergency-icon {
        margin-right: 0;
        margin-bottom: 20px;
    }
}

@media (max-width: 768px) {
    .contact-info-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin: 0 auto 40px;
    }
    
    .info-card {
        min-height: 220px;
        padding: 25px 20px;
    }
    
    .info-icon {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
        margin-bottom: 15px;
    }
    
    .info-card h3 {
        font-size: 1.2rem;
    }
    
    .info-card p {
        font-size: 0.9rem;
    }
    
    .emergency-contact {
        padding: 25px 20px;
        min-height: 200px;
    }
    
    .emergency-content h3 {
        font-size: 1.4rem;
    }
    
    .emergency-number {
        font-size: 1.5rem;
    }
    
    .footer-content {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .footer-contact li {
        min-height: 70px;
        padding: 12px;
    }
    
    .footer-contact i {
        font-size: 1rem;
        margin-right: 12px;
    }
}

@media (max-width: 576px) {
    .info-card {
        min-height: 200px;
        padding: 20px 15px;
    }
    
    .info-icon {
        width: 50px;
        height: 50px;
        font-size: 1.3rem;
    }
    
    .emergency-contact {
        padding: 20px 15px;
        min-height: 180px;
    }
    
    .emergency-icon {
        font-size: 2rem;
    }
    
    .emergency-content h3 {
        font-size: 1.2rem;
    }
    
    .emergency-number {
        font-size: 1.3rem;
    }
}
/* ===== HERO SLIDER FIXES ===== */
.hero-slider {
    height: 100vh;
    max-height: 800px;
    position: relative;
    margin-top: 80px;
}

.slider-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1.2s ease-in-out; /* Slower, smoother transition */
    z-index: 1;
}

.slide.active {
    opacity: 1;
    z-index: 2;
}

.slide-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 1;
}

/* Darker overlay for better text visibility */
.slide-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* Darker for better contrast */
    z-index: 2;
}

.slide-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: var(--white);
    z-index: 3;
    max-width: 800px;
    width: 90%;
    padding: 0 20px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7); /* Stronger text shadow */
}

.slide-title {
    font-size: 3rem;
    margin-bottom: 20px;
    font-weight: 700;
    line-height: 1.2;
    animation: fadeInUp 0.8s ease-out 0.3s both;
}

.slide-text {
    font-size: 1.2rem;
    margin-bottom: 30px;
    opacity: 0.95;
    line-height: 1.6;
    animation: fadeInUp 0.8s ease-out 0.5s both;
}

.slide-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    animation: fadeInUp 0.8s ease-out 0.7s both;
}

/* Animation for text entrance */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Slower slider controls */
.slider-controls {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 20px;
}

.slider-prev,
.slider-next {
    background-color: rgba(255, 255, 255, 0.2);
    color: var(--white);
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: all 0.4s ease;
    backdrop-filter: blur(5px);
}

.slider-prev:hover,
.slider-next:hover {
    background-color: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

.slider-dots {
    display: flex;
    gap: 10px;
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.4s ease;
}

.dot.active {
    background-color: var(--white);
    transform: scale(1.2);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}
/* ===== HERO SLIDER WITH CONTROLS ===== */
.hero-slider {
    height: 100vh;
    max-height: 800px;
    position: relative;
    margin-top: 80px;
    overflow: hidden;
}

.slider-container {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Slides */
.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.8s ease;
    z-index: 1;
}

.slide.active {
    opacity: 1;
    z-index: 2;
}

.slide-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.slide-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6));
}

.slide-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: var(--white);
    z-index: 3;
    max-width: 800px;
    width: 90%;
    padding: 0 20px;
}

.slide-title {
    font-size: 3rem;
    margin-bottom: 20px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    animation: fadeInUp 0.8s ease;
}

.slide-text {
    font-size: 1.2rem;
    margin-bottom: 30px;
    opacity: 0.9;
    animation: fadeInUp 0.8s ease 0.2s both;
}

.slide-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    animation: fadeInUp 0.8s ease 0.4s both;
}

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

/* ===== SLIDER ARROWS ===== */
.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.15);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.slider-arrow:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-50%) scale(1.1);
}

.slider-arrow:active {
    transform: translateY(-50%) scale(0.95);
}

.slider-prev {
    left: 30px;
}

.slider-next {
    right: 30px;
}

/* ===== SLIDER DOTS ===== */
.slider-dots {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 10;
}

.dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    border: 2px solid rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
    position: relative;
}

.dot:hover {
    background: rgba(255, 255, 255, 0.6);
    transform: scale(1.2);
}

.dot.active {
    background: var(--orange-primary);
    border-color: var(--orange-primary);
    transform: scale(1.3);
    box-shadow: 0 0 10px rgba(255, 152, 0, 0.5);
}

/* Dot pulse animation for active slide */
@keyframes dotPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(255, 152, 0, 0.4);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(255, 152, 0, 0);
    }
}

.dot.active {
    animation: dotPulse 2s infinite;
}

/* ===== RESPONSIVE SLIDER CONTROLS ===== */
@media (max-width: 992px) {
    .slider-arrow {
        width: 50px;
        height: 50px;
        font-size: 1.3rem;
    }
    
    .slider-prev {
        left: 20px;
    }
    
    .slider-next {
        right: 20px;
    }
    
    .slider-dots {
        bottom: 30px;
    }
}

@media (max-width: 768px) {
    .hero-slider {
        height: 80vh;
        margin-top: 60px;
    }
    
    .slide-title {
        font-size: 2.2rem;
    }
    
    .slide-text {
        font-size: 1.1rem;
    }
    
    .slider-arrow {
        width: 45px;
        height: 45px;
        font-size: 1.2rem;
    }
    
    .slider-prev {
        left: 15px;
    }
    
    .slider-next {
        right: 15px;
    }
    
    .dot {
        width: 12px;
        height: 12px;
    }
}

@media (max-width: 576px) {
    .hero-slider {
        height: 70vh;
    }
    
    .slide-title {
        font-size: 1.8rem;
    }
    
    .slide-text {
        font-size: 1rem;
    }
    
    .slide-buttons {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }
    
    .slider-arrow {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
    
    .slider-prev {
        left: 10px;
    }
    
    .slider-next {
        right: 10px;
    }
    
    .slider-dots {
        bottom: 25px;
        gap: 10px;
    }
    
    .dot {
        width: 10px;
        height: 10px;
    }
}
/* ===== VOLUNTEER FORM FIELD FIXES ===== */
.volunteer-form-container {
    background: var(--white);
    border-radius: 15px;
    padding: 40px;
    box-shadow: var(--shadow-lg);
    margin-top: 20px;
}

.volunteer-form-container .form-header {
    text-align: center;
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--light-gray);
}

.volunteer-form-container .form-header h3 {
    font-size: 1.8rem;
    color: var(--text-dark);
    margin-bottom: 10px;
}

.volunteer-form-container .form-header p {
    color: var(--dark-gray);
    font-size: 1.1rem;
    margin: 0;
}

/* Make form fields visible */
.volunteer-form input,
.volunteer-form select,
.volunteer-form textarea {
    width: 100% !important;
    padding: 14px 18px !important;
    border: 2px solid var(--medium-gray) !important;
    border-radius: 8px !important;
    font-family: 'Open Sans', sans-serif !important;
    font-size: 1rem !important;
    background: var(--white) !important;
    color: var(--text-dark) !important;
    transition: all 0.3s ease !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.volunteer-form input:focus,
.volunteer-form select:focus,
.volunteer-form textarea:focus {
    outline: none !important;
    border-color: var(--green-primary) !important;
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.2) !important;
}

/* Fix placeholder text */
.volunteer-form input::placeholder,
.volunteer-form textarea::placeholder {
    color: var(--dark-gray) !important;
    opacity: 0.8 !important;
}

/* Style the select dropdown */
.volunteer-form select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23666' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 18px center;
    background-size: 12px;
    padding-right: 45px !important;
}

/* Fix textarea */
.volunteer-form textarea {
    resize: vertical;
    min-height: 120px;
    line-height: 1.6;
}

/* Form row layout */
.volunteer-form .form-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
    margin-bottom: 20px !important;
}

.volunteer-form .form-group {
    margin-bottom: 25px !important;
    position: relative !important;
}

/* Form labels - add if missing */
.volunteer-form .form-group label {
    display: block !important;
    margin-bottom: 8px !important;
    font-weight: 600 !important;
    color: var(--text-dark) !important;
    font-size: 0.95rem !important;
}

/* Checkbox styling */
.volunteer-form .form-check {
    display: flex !important;
    align-items: flex-start !important;
    margin: 25px 0 !important;
    padding: 15px !important;
    background: rgba(76, 175, 80, 0.05) !important;
    border-radius: 8px !important;
}

.volunteer-form .form-check input[type="checkbox"] {
    width: auto !important;
    margin-right: 12px !important;
    margin-top: 4px !important;
    transform: scale(1.2) !important;
}

.volunteer-form .form-check label {
    margin: 0 !important;
    color: var(--dark-gray) !important;
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
}

/* Submit button */
.volunteer-form .btn-primary {
    width: 100% !important;
    padding: 16px !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    margin-top: 20px !important;
    background: var(--green-primary) !important;
    border: none !important;
    color: white !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.volunteer-form .btn-primary:hover {
    background: #3d8b40 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(76, 175, 80, 0.3) !important;
}

/* Form note */
.volunteer-form .form-note {
    margin-top: 25px !important;
    padding: 15px !important;
    background: rgba(76, 175, 80, 0.1) !important;
    border-radius: 8px !important;
    border: 1px solid rgba(76, 175, 80, 0.3) !important;
}

.volunteer-form .form-note p {
    margin: 0 !important;
    color: var(--green-primary) !important;
    font-size: 0.9rem !important;
    display: flex !important;
    align-items: flex-start !important;
}

.volunteer-form .form-note i {
    margin-right: 10px !important;
    margin-top: 3px !important;
    color: var(--green-primary) !important;
}
/* Partners Section - Logo Styling */
.current-partners {
    padding: 60px 0;
    background-color: #f8f9fa;
}

.partners-logos-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 40px;
    max-width: 800px;
    margin: 40px auto;
}

.partner-logo-card {
    background: white;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
    width: 220px;
    height: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Specific styling for AFRICHAN logo card */
.partner-logo-card:first-child {
    /* Make AFRICHAN logo card larger */
    width: 240px;
    height: 200px;
}

.partner-logo-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.partner-logo {
    width: 100%;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
}

/* Specific styling for AFRICHAN logo */
.partner-logo-card:first-child .partner-logo {
    height: 100px; /* Larger height for AFRICHAN logo */
}

.partner-logo-img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    opacity: 1;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Make AFRICHAN logo image larger */
.partner-logo-card:first-child .partner-logo-img {
    max-height: 100px; /* Larger max height */
    transform: scale(1.1); /* Slightly scale up the logo */
}

.partner-logo-card:hover .partner-logo-img {
    opacity: 1;
    transform: scale(1.05);
}

/* Keep AFRICHAN logo even larger on hover */
.partner-logo-card:first-child:hover .partner-logo-img {
    transform: scale(1.15); /* Slightly larger scale on hover */
}

.partner-info {
    text-align: center;
}

.partner-info h4 {
    font-size: 1rem;
    font-weight: 600;
    color: #333;
    margin: 0 0 5px 0;
}

.partner-info p {
    font-size: 0.85rem;
    color: #666;
    margin: 0;
    line-height: 1.3;
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .partners-logos-grid {
        gap: 30px;
    }
    
    .partner-logo-card {
        width: 180px;
        height: 160px;
        padding: 20px;
    }
    
    /* Adjust AFRICHAN logo for medium screens */
    .partner-logo-card:first-child {
        width: 200px;
        height: 180px;
    }
    
    .partner-logo {
        height: 70px;
    }
    
    .partner-logo-card:first-child .partner-logo {
        height: 90px;
    }
    
    .partner-logo-card:first-child .partner-logo-img {
        max-height: 90px;
    }
}

@media (max-width: 768px) {
    .current-partners {
        padding: 40px 0;
    }
    
    .partners-logos-grid {
        gap: 20px;
    }
    
    .partner-logo-card {
        width: 150px;
        height: 140px;
        padding: 15px;
    }
    
    /* Adjust AFRICHAN logo for small screens */
    .partner-logo-card:first-child {
        width: 170px;
        height: 160px;
    }
    
    .partner-logo {
        height: 60px;
        margin-bottom: 10px;
    }
    
    .partner-logo-card:first-child .partner-logo {
        height: 80px;
    }
    
    .partner-logo-card:first-child .partner-logo-img {
        max-height: 80px;
        transform: scale(1.05);
    }
    
    .partner-info h4 {
        font-size: 0.9rem;
    }
    
    .partner-info p {
        font-size: 0.8rem;
    }
}

@media (max-width: 576px) {
    .partners-logos-grid {
        flex-direction: column;
        gap: 15px;
        max-width: 300px;
    }
    
    .partner-logo-card {
        width: 200px;
        height: 120px;
        flex-direction: row;
        padding: 15px 20px;
        gap: 15px;
    }
    
    /* Adjust AFRICHAN logo for mobile */
    .partner-logo-card:first-child {
        width: 220px;
        height: 140px;
    }
    
    .partner-logo {
        width: 60px;
        height: 60px;
        margin-bottom: 0;
        flex-shrink: 0;
    }
    
    .partner-logo-card:first-child .partner-logo {
        width: 80px;
        height: 80px;
    }
    
    .partner-logo-card:first-child .partner-logo-img {
        max-height: 80px;
        transform: scale(1);
    }
    
    .partner-info {
        text-align: left;
        flex-grow: 1;
    }
}
/* Partners Section - Logo Styling */
.current-partners {
    padding: 60px 0;
    background-color: #f8f9fa;
}

.partners-logos-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 60px; /* More space between logos */
    max-width: 900px; /* Wider container */
    margin: 40px auto;
    background: white;
    border-radius: 12px;
    padding: 40px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

/* Single logo container style */
.partner-logo-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1; /* Both take equal space */
    min-width: 300px; /* Minimum width for each */
    height: 200px; /* Fixed height for consistency */
    text-align: center;
    transition: transform 0.3s ease;
}

.partner-logo-card:hover {
    transform: translateY(-5px);
}

.partner-logo {
    width: 100%;
    height: 120px; /* Larger logo area */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.partner-logo-img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    opacity: 1;
    transition: transform 0.3s ease;
}

.partner-logo-card:hover .partner-logo-img {
    transform: scale(1.05);
}

.partner-info {
    text-align: center;
    width: 100%;
}

.partner-info h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
    margin: 0 0 8px 0;
}

.partner-info p {
    font-size: 0.9rem;
    color: #666;
    margin: 0;
    line-height: 1.4;
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .partners-logos-grid {
        max-width: 800px;
        gap: 40px;
        padding: 30px;
    }
    
    .partner-logo-card {
        min-width: 250px;
        height: 180px;
    }
    
    .partner-logo {
        height: 100px;
        margin-bottom: 15px;
    }
}

@media (max-width: 768px) {
    .current-partners {
        padding: 40px 20px;
    }
    
    .partners-logos-grid {
        flex-direction: column;
        gap: 40px;
        max-width: 500px;
        padding: 30px;
    }
    
    .partner-logo-card {
        min-width: 100%;
        height: 160px;
    }
    
    .partner-logo {
        height: 90px;
        margin-bottom: 15px;
    }
    
    .partner-info h4 {
        font-size: 1rem;
    }
    
    .partner-info p {
        font-size: 0.85rem;
    }
}

@media (max-width: 576px) {
    .partners-logos-grid {
        padding: 25px;
        gap: 30px;
    }
    
    .partner-logo-card {
        height: 140px;
    }
    
    .partner-logo {
        height: 80px;
        margin-bottom: 12px;
    }
}
/* ============================================
   BASE STYLES FOR ENTIRE WEBSITE
   ============================================ */

/* Reset & Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Open Sans', sans-serif;
    line-height: 1.6;
    color: #333;
    background: #f8f9fa;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 1rem;
}

p {
    margin-bottom: 1rem;
}

a {
    text-decoration: none;
    color: inherit;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 12px 30px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    text-align: center;
    font-family: 'Poppins', sans-serif;
}

.btn-primary {
    background: #4CAF50;
    color: white;
    border-color: #4CAF50;
}

.btn-primary:hover {
    background: #45a049;
    border-color: #45a049;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(76, 175, 80, 0.3);
}

.btn-outline {
    background: transparent;
    color: #4CAF50;
    border-color: #4CAF50;
}

.btn-outline:hover {
    background: #4CAF50;
    color: white;
    transform: translateY(-2px);
}

.btn-secondary {
    background: #3498db;
    color: white;
    border-color: #3498db;
}

.btn-secondary:hover {
    background: #2980b9;
    border-color: #2980b9;
    transform: translateY(-2px);
}

/* Navigation */
.header {
    background: white;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
}

.logo {
    display: flex;
    align-items: center;
    gap: 15px;
    font-weight: 700;
    font-size: 1.2rem;
    color: #2c3e50;
}

.logo-img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}

.nav-menu {
    display: flex;
    align-items: center;
    gap: 30px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-item {
    position: relative;
}

.nav-link {
    color: #2c3e50;
    font-weight: 500;
    padding: 10px 0;
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
    gap: 5px;
}

.nav-link:hover {
    color: #4CAF50;
}

.nav-item.active .nav-link {
    color: #4CAF50;
}

/* Dropdown Menu */
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    min-width: 200px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    padding: 10px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    z-index: 100;
}

.dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-menu li {
    list-style: none;
}

.dropdown-menu a {
    display: block;
    padding: 10px 20px;
    color: #2c3e50;
    transition: all 0.3s ease;
}

.dropdown-menu a:hover {
    background: #f8f9fa;
    color: #4CAF50;
    padding-left: 25px;
}

/* Mobile Menu Toggle */
.menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
}

.menu-toggle span {
    width: 25px;
    height: 3px;
    background: #2c3e50;
    border-radius: 3px;
    transition: all 0.3s ease;
}

/* Sections */
.section {
    padding: 80px 0;
}

/* Utility Classes */
.text-center {
    text-align: center;
}

.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }
.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }
.mb-3 { margin-bottom: 3rem; }

/* Responsive Design */
@media (max-width: 992px) {
    .menu-toggle {
        display: flex;
    }
    
    .nav-menu {
        position: fixed;
        top: 90px;
        left: -100%;
        width: 100%;
        height: calc(100vh - 90px);
        background: white;
        flex-direction: column;
        align-items: flex-start;
        padding: 40px 20px;
        transition: left 0.3s ease;
        overflow-y: auto;
    }
    
    .nav-menu.active {
        left: 0;
    }
    
    .nav-item {
        width: 100%;
    }
    
    .nav-link {
        padding: 15px 0;
        width: 100%;
        border-bottom: 1px solid #eee;
    }
    
    .dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        padding-left: 20px;
        display: none;
    }
    
    .dropdown-menu.active {
        display: block;
    }
    
    .dropdown:hover .dropdown-menu {
        transform: none;
    }
}

@media (max-width: 768px) {
    .section {
        padding: 60px 0;
    }
    
    .container {
        padding: 0 15px;
    }
}

@media (max-width: 576px) {
    .section {
        padding: 40px 0;
    }
}
/* Add to your existing style.css */

/* Form validation */
.error {
    border-color: #dc3545 !important;
}

.error-message {
    color: #dc3545;
    font-size: 0.875rem;
    margin-top: 5px;
    display: none;
}

.error-message.show {
    display: block;
}

/* Donation form specific */
#donationForm input {
    width: 100%;
    padding: 12px 15px;
    margin-bottom: 15px;
    border: 2px solid #ddd;
    border-radius: 6px;
    font-size: 1rem;
}

#donationForm input:focus {
    border-color: #4CAF50;
    outline: none;
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
}

#donateButton {
    padding: 15px 40px;
    font-size: 1.1rem;
    font-weight: 600;
}

#donateButton:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Payment options display */
.payment-method-display {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    margin: 20px 0;
    text-align: center;
}

.payment-method-display p {
    margin: 10px 0;
    color: #666;
}

/* Amount quick select */
.quick-amounts {
    display: flex;
    gap: 10px;
    margin: 20px 0;
    flex-wrap: wrap;
}

.amount-option {
    padding: 12px 25px;
    background: white;
    border: 2px solid #ddd;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
    flex: 1;
    min-width: 100px;
    text-align: center;
}

.amount-option:hover,
.amount-option.active {
    background: #4CAF50;
    color: white;
    border-color: #4CAF50;
}
/* ===== Beautiful Read More Button Design ===== */

/* Team Bio Styling */
.team-bio {
    position: relative;
    line-height: 1.6;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

/* For truncated bios */
.team-bio.truncated {
    max-height: 120px; /* About 4 lines */
}

/* Gradient overlay for truncated state */
.team-bio.truncated::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background: linear-gradient(to bottom, 
        rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 0.8) 30%, 
        rgba(255, 255, 255, 0.95) 100%);
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* Expanded state */
.team-bio.expanded {
    max-height: 2000px !important;
}

.team-bio.expanded::after {
    opacity: 0;
}

/* ===== BEAUTIFUL READ MORE BUTTON ===== */
.read-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #FF6B35, #FF8E53);
    color: white !important;
    border: none;
    border-radius: 25px;
    padding: 8px 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 12px;
    margin-bottom: 5px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.2);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* Hover effect with animation */
.read-more-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(255, 107, 53, 0.3);
    background: linear-gradient(135deg, #FF5722, #FF7B3A);
}

/* Active/pressed effect */
.read-more-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(255, 107, 53, 0.2);
}

/* Ripple effect on click */
.read-more-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    background: rgba(255, 255, 255, 0.5);
    opacity: 0;
    border-radius: 100%;
    transform: scale(1, 1) translate(-50%);
    transform-origin: 50% 50%;
}

.read-more-btn:focus:not(:active)::after {
    animation: ripple 1s ease-out;
}

@keyframes ripple {
    0% {
        transform: scale(0, 0);
        opacity: 0.5;
    }
    100% {
        transform: scale(40, 40);
        opacity: 0;
    }
}

/* Icon animation */
.read-more-btn .icon {
    font-size: 12px;
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
}

.read-more-btn.expanded .icon {
    transform: rotate(180deg);
}

/* Button text weight */
.read-more-btn span:not(.icon) {
    font-weight: 600;
    letter-spacing: 0.3px;
}

/* Optional: Add a subtle border for depth */
.read-more-btn {
    border: 2px solid transparent;
    background-clip: padding-box;
    position: relative;
}

.read-more-btn::before {
    content: '';
    position: absolute;
    top: -2px;
    right: -2px;
    bottom: -2px;
    left: -2px;
    background: linear-gradient(135deg, #FF6B35, #FF8E53);
    border-radius: 26px;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.read-more-btn:hover::before {
    opacity: 1;
}

/* Different states for the button */
.read-more-btn.expanded {
    background: linear-gradient(135deg, #E64A19, #FF7043);
}

/* Optional: Add a pulsing animation for attention */
@keyframes gentle-pulse {
    0%, 100% {
        box-shadow: 0 4px 12px rgba(255, 107, 53, 0.2);
    }
    50% {
        box-shadow: 0 4px 12px rgba(255, 107, 53, 0.4);
    }
}

.read-more-btn:not(.expanded) {
    animation: gentle-pulse 3s infinite;
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
    .team-bio.truncated {
        max-height: 100px; /* Slightly less on mobile */
    }
    
    .read-more-btn {
        padding: 7px 18px;
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .read-more-btn {
        padding: 6px 16px;
        font-size: 12px;
    }
    
    .team-bio.truncated {
        max-height: 90px;
    }
}
/* ===== ULTRA SIMPLE FIX: Always show dropdowns on mobile ===== */
@media (max-width: 992px) {
    .dropdown-menu {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        position: static !important;
        transform: none !important;
        background: #f8f9fa;
        border-radius: 8px;
        margin: 10px 0 20px 0;
        padding: 15px 0;
        width: 100%;
    }
    
    /* Hide the chevron icons */
    .dropdown > .nav-link i {
        display: none !important;
    }
    
    /* Make dropdown headers look different */
    .dropdown > .nav-link {
        color: #4CAF50 !important;
        font-weight: 600 !important;
        margin-top: 15px;
        border-bottom: 2px solid #4CAF50;
        padding-bottom: 8px;
    }
    
    /* Style the dropdown links */
    .dropdown-menu a {
        display: block;
        padding: 12px 25px;
        color: #555;
        font-size: 0.95rem;
        border-left: 3px solid transparent;
    }
    
    .dropdown-menu a:hover {
        background: rgba(76, 175, 80, 0.1);
        color: #4CAF50;
        border-left-color: #4CAF50;
    }
}