/* --- NUUTRO SAVERA BRAND COLORS --- */
:root {
    --primary-green: #2d5a3e; /* Dark green from tree side */
    --accent-lime: #9dc040;   /* Lime green from sun side */
    --accent-orange: #ff8c00; /* Warm orange for CTA buttons */
    --white: #ffffff;
    --glass-bg: rgba(0, 0, 0, 0.4);
}

/* SLIDER MAIN WRAPPER */
.hero-slider {
    width: 100%;
    height: 85vh; /* Responsive height */
    position: relative;
    overflow: hidden;
}

.swiper-slide {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* DARK OVERLAY FOR TEXT READABILITY */
.swiper-slide::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to right, rgba(45, 90, 62, 0.7), rgba(0, 0, 0, 0.2));
}

/* CONTENT BOX WITH GLASSMORPHISM */
.slider-content {
    position: relative;
    z-index: 10;
    max-width: 800px;
    padding: 40px;
    color: var(--white);
    text-align: left;
    backdrop-filter: blur(4px);
    background: rgba(255, 255, 255, 0.05);
    border-left: 5px solid var(--accent-lime);
    border-radius: 0 20px 20px 0;
    margin-left: 5%;
}

/* TYPOGRAPHY ANIMATIONS */
.slider-content .badge {
    display: inline-block;
    background: var(--accent-lime);
    color: var(--primary-green);
    padding: 6px 15px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
    animation: fadeInUp 0.8s ease forwards;
}

.slider-content h1 {
    font-size: 60px;
    line-height: 1.1;
    font-weight: 800;
    margin-bottom: 20px;
    color: var(--white);
    text-shadow: 2px 2px 10px rgba(0,0,0,0.3);
    animation: fadeInUp 1s ease forwards 0.2s;
    opacity: 0;
}

.slider-content p {
    font-size: 18px;
    margin-bottom: 35px;
    color: #e0e0e0;
    max-width: 600px;
    animation: fadeInUp 1s ease forwards 0.4s;
    opacity: 0;
}

/* INTERACTIVE BUTTONS */
.btn-group {
    display: flex;
    gap: 20px;
    animation: fadeInUp 1s ease forwards 0.6s;
    opacity: 0;
}

.btn-main {
    background: var(--accent-lime);
    color: var(--primary-green);
    padding: 15px 35px;
    text-decoration: none;
    font-weight: 700;
    border-radius: 50px;
    transition: all 0.3s ease;
    box-shadow: 0 10px 20px rgba(157, 192, 64, 0.3);
}

.btn-main:hover {
    background: var(--white);
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.2);
}

.btn-outline {
    background: transparent;
    color: var(--white);
    padding: 15px 35px;
    text-decoration: none;
    font-weight: 600;
    border-radius: 50px;
    border: 2px solid var(--white);
    transition: all 0.3s ease;
}

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

/* SWIPER CONTROLS CUSTOMIZATION */
.swiper-button-next, .swiper-button-prev {
    color: var(--accent-lime) !important;
    background: rgba(255,255,255,0.1);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    backdrop-filter: blur(5px);
}

.swiper-pagination-bullet-active {
    background: var(--accent-lime) !important;
}

/* --- RESPONSIVE ADJUSTMENTS --- */
@media (max-width: 992px) {
    .slider-content h1 { font-size: 45px; }
    .hero-slider { height: 70vh; }
}

@media (max-width: 768px) {
    .slider-content {
        text-align: center;
        margin: 0 20px;
        border-left: none;
        border-top: 5px solid var(--accent-lime);
        border-radius: 20px;
        padding: 30px 20px;
    }
    .slider-content h1 { font-size: 32px; }
    .btn-group { flex-direction: column; gap: 10px; }
    .hero-slider { height: 60vh; }
}

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


/* --- BRAND COLORS --- */
/* SECTION WRAPPER */
.about-section {
    padding: 100px 0;
    background: var(--bg-soft);
    overflow: hidden;
}

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

.about-flex {
    display: flex;
    align-items: center;
    gap: 60px;
}

/* IMAGE STYLING with INTERACTIVE BADGE */
.about-image {
    flex: 1;
    position: relative;
    padding: 20px;
}

.about-image img {
    width: 100%;
    border-radius: 30px 100px 30px 30px; /* Modern organic shape */
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    transition: var(--transition);
}

.about-image:hover img {
    transform: translateY(-10px) scale(1.02);
}

.experience-badge {
    position: absolute;
    bottom: -10px;
    right: -10px;
    background: var(--primary-green);
    color: var(--white);
    padding: 30px;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 15px 30px rgba(45, 90, 62, 0.3);
    border: 4px solid var(--white);
    animation: bounce 3s infinite;
}

.experience-badge h2 {
    font-size: 35px;
    margin: 0;
    color: var(--accent-lime);
    font-weight: 800;
}

.experience-badge p {
    font-size: 13px;
    margin: 0;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
}

/* CONTENT STYLING */
.about-content {
    flex: 1;
}

.sub-heading {
    color: var(--accent-lime);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 14px;
    display: block;
    margin-bottom: 10px;
}

.about-content h1 {
    font-size: 42px;
    color: var(--primary-green);
    margin-bottom: 20px;
    font-weight: 800;
    line-height: 1.2;
}

.about-content p {
    color: var(--text-light);
    line-height: 1.8;
    margin-bottom: 30px;
    font-size: 16px;
}

/* FEATURES GRID */
.about-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 40px;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 15px;
    background: var(--white);
    padding: 15px;
    border-radius: 12px;
    transition: var(--transition);
    border: 1px solid #eee;
}

.feature-item:hover {
    background: var(--primary-green);
    transform: translateX(10px);
    border-color: var(--primary-green);
}

.feature-item i {
    font-size: 20px;
    color: var(--accent-lime);
    transition: var(--transition);
}

.feature-item span {
    font-weight: 600;
    color: var(--text-dark);
    font-size: 15px;
    transition: var(--transition);
}

.feature-item:hover i, 
.feature-item:hover span {
    color: var(--white);
}

/* BUTTON */
.btn-about {
    display: inline-flex;
    align-items: center;
    background: var(--accent-orange);
    color: var(--white);
    padding: 15px 35px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    transition: var(--transition);
    box-shadow: 0 10px 20px rgba(255, 140, 0, 0.2);
}

.btn-about:hover {
    background: var(--primary-green);
    transform: scale(1.05);
    box-shadow: 0 15px 30px rgba(45, 90, 62, 0.3);
}

/* --- ANIMATIONS --- */
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* --- RESPONSIVE DESIGN --- */
@media (max-width: 992px) {
    .about-flex {
        flex-direction: column;
        text-align: center;
    }
    
    .about-image {
        max-width: 500px;
        margin-bottom: 40px;
    }

    .about-content h1 {
        font-size: 32px;
    }

    .feature-item {
        justify-content: center;
    }
}

@media (max-width: 600px) {
    .about-features {
        grid-template-columns: 1fr;
    }
    
    .experience-badge {
        padding: 20px;
        bottom: 0;
        right: 0;
    }
    
    .experience-badge h2 {
        font-size: 28px;
    }
}


/* ===== IMPACT SECTION ===== */
.impact-section {
    padding: 80px 20px;
    background: #f4f8f5;
    font-family: 'Poppins', sans-serif;
}

/* Header */
.section-header {
    text-align: center;
    margin-bottom: 50px;
}

.sub-title {
    color: #6aa84f;
    font-weight: 600;
    letter-spacing: 1px;
}

.main-title {
    font-size: 36px;
    font-weight: 700;
    color: #2d5d3b;
    margin: 10px 0;
}

.section-desc {
    color: #666;
    max-width: 600px;
    margin: auto;
}

/* ===== SINGLE ROW GRID ===== */
.impact-grid {
    display: flex;
    gap: 25px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding-bottom: 10px;
}

/* Hide Scrollbar */
.impact-grid::-webkit-scrollbar {
    display: none;
}

/* ===== CARD ===== */
.impact-card {
    min-width: 260px;
    flex: 0 0 auto;
    background: #ffffff;
    border-radius: 15px;
    transition: 0.4s ease;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    position: relative;
}

/* Hover Effect */
.impact-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.15);
}

/* Inner Content */
.card-inner {
    padding: 30px 20px;
    text-align: center;
}

/* Icon Box */
.icon-box {
    width: 70px;
    height: 70px;
    margin: auto;
    border-radius: 50%;
    background: linear-gradient(135deg, #2d5d3b, #8fbc8f);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    transition: 0.4s;
}

.icon-box i {
    font-size: 28px;
    color: #fff;
}

/* Hover Icon Animation */
.impact-card:hover .icon-box {
    transform: rotate(10deg) scale(1.1);
}

/* Title */
.impact-card h3 {
    font-size: 20px;
    color: #2d5d3b;
    margin-bottom: 10px;
}

/* Description */
.impact-card p {
    font-size: 14px;
    color: #555;
    margin-bottom: 15px;
}

/* Link */
.learn-link {
    font-size: 14px;
    font-weight: 600;
    color: #6aa84f;
    text-decoration: none;
    transition: 0.3s;
}

.learn-link i {
    margin-left: 5px;
    transition: 0.3s;
}

.learn-link:hover {
    color: #2d5d3b;
}

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

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .main-title {
        font-size: 28px;
    }

    .impact-card {
        min-width: 220px;
    }
}

@media (max-width: 480px) {
    .impact-card {
        min-width: 200px;
    }
}

.learn-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--accent-lime); /* Start with Lime for visibility */
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 8px 0;
    position: relative;
    transition: var(--transition);
    cursor: pointer;
}

/* THE HIDDEN UNDERLINE (Modern Growth Effect) */
.learn-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--accent-lime);
    transition: var(--transition);
    border-radius: 2px;
}

/* ICON STYLING */
.learn-link i {
    font-size: 16px;
    transition: var(--transition);
    background: rgba(157, 192, 64, 0.1); /* Very light lime circle */
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

/* --- INTERACTIVE HOVER STATES --- */

.learn-link:hover {
    color: var(--white); /* Text turns white when the card is hovered (assuming parent hover) */
    letter-spacing: 2.5px;
}

/* If the card is dark green on hover, link text should pop */
.impact-card:hover .learn-link {
    color: var(--accent-lime);
}

.learn-link:hover::after {
    width: 100%;
}

/* Arrow Animation */
.learn-link:hover i {
    transform: translateX(8px);
    background: var(--accent-lime);
    color: var(--primary-green);
    box-shadow: 0 0 15px rgba(157, 192, 64, 0.5);
}

/* ACTIVE/CLICK STATE */
.learn-link:active {
    transform: scale(0.95);
}

/* --- RESPONSIVE ADJUSTMENTS --- */
@media (max-width: 768px) {
    .learn-link {
        font-size: 13px;
        letter-spacing: 1px;
    }
    
    .learn-link i {
        width: 28px;
        height: 28px;
        font-size: 14px;
    }
}

.gallery-section {
    padding: 80px 0;
    background: #fdfdfd;
}

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

/* SECTION HEADER */
.section-header {
    text-align: center;
    margin-bottom: 50px;
}

.section-header h2 {
    font-size: 36px;
    color: var(--primary-green);
    font-weight: 800;
    position: relative;
    display: inline-block;
    padding-bottom: 15px;
}

.section-header h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: var(--accent-lime);
    border-radius: 2px;
}

/* GALLERY GRID */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-auto-rows: 250px;
    gap: 20px;
}

/* GALLERY ITEM */
.gallery-item {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 15px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

/* Making every 3rd image larger for a modern look */
.gallery-item:nth-child(3n+1) {
    grid-column: span 1;
    grid-row: span 2;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);
}

/* INTERACTIVE OVERLAY */
.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(45, 90, 62, 0.85); /* Transparent Forest Green */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: var(--transition);
    transform: scale(0.9);
}

.gallery-overlay i {
    color: var(--white);
    font-size: 40px;
    background: var(--accent-lime);
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transform: translateY(20px);
    transition: var(--transition);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

/* HOVER EFFECTS */
.gallery-item:hover img {
    transform: scale(1.15) rotate(2deg);
}

.gallery-item:hover .gallery-overlay {
    opacity: 1;
    transform: scale(1);
}

.gallery-item:hover .gallery-overlay i {
    transform: translateY(0);
}

/* --- RESPONSIVE DESIGN --- */
@media (max-width: 992px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 200px;
    }
    .section-header h2 { font-size: 28px; }
}

@media (max-width: 600px) {
    .gallery-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: 250px;
    }
    
    /* Disable span on mobile for better fit */
    .gallery-item:nth-child(3n+1) {
        grid-column: span 1;
        grid-row: span 1;
    }

    .gallery-overlay {
        background: rgba(45, 90, 62, 0.5); /* Lighter on mobile */
        opacity: 1; /* Keep icon visible for touch users */
        transform: scale(1);
    }
    
    .gallery-overlay i {
        transform: translateY(0);
        width: 50px;
        height: 50px;
        font-size: 24px;
    }
}


.events-section {
    padding: 80px 0;
    background-color: var(--bg-soft);
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 20px;
}

.events-title {
    text-align: center;
    font-size: 36px;
    color: var(--primary-green);
    margin-bottom: 50px;
    font-weight: 800;
    position: relative;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.events-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 4px;
    background: var(--accent-lime);
    border-radius: 2px;
}

/* GRID SYSTEM */
.events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
}

/* CARD DESIGN */
.event-card {
    background: var(--white);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(0,0,0,0.03);
}

.event-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 20px 40px rgba(45, 90, 62, 0.15);
}

/* IMAGE INTERACTION */
.event-img {
    width: 100%;
    height: 220px;
    overflow: hidden;
    position: relative;
}

.event-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.event-card:hover .event-img img {
    transform: scale(1.1);
}

/* CARD CONTENT */
.event-content {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.event-content h3 {
    font-size: 20px;
    color: var(--primary-green);
    margin-bottom: 12px;
    font-weight: 700;
    line-height: 1.4;
}

.event-content p {
    font-size: 14px;
    color: var(--text-gray);
    line-height: 1.6;
    margin-bottom: 20px;
}

/* ADDRESS & INFO */
.event-address {
    font-size: 13px;
    color: var(--primary-green);
    background: rgba(157, 192, 64, 0.1); /* Light lime background */
    padding: 8px 12px;
    border-radius: 8px;
    margin-bottom: 25px;
    font-weight: 600;
    display: inline-block;
}

/* INTERACTIVE BUTTON */
.read-btn {
    margin-top: auto;
    background: var(--primary-green);
    color: var(--white);
    text-align: center;
    padding: 12px 20px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    transition: var(--transition);
    border: 2px solid var(--primary-green);
}

.read-btn:hover {
    background: var(--accent-lime);
    border-color: var(--accent-lime);
    color: var(--primary-green);
    box-shadow: 0 5px 15px rgba(157, 192, 64, 0.4);
}

/* --- RESPONSIVE ADJUSTMENTS --- */
@media (max-width: 992px) {
    .events-title { font-size: 28px; }
}

@media (max-width: 768px) {
    .events-grid {
        grid-template-columns: 1fr; /* Single column on mobile */
        max-width: 450px;
        margin: 0 auto;
    }
    
    .event-img { height: 200px; }
    
    .events-section { padding: 40px 15px; }
}

@media (max-width: 480px) {
    .event-content h3 { font-size: 18px; }
    .event-content { padding: 20px; }
  }

  /* --- Root Variables for Colors --- */

*, *::before, *::after {
    box-sizing: inherit;
}

/* --- Container --- */
.main-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 20px;
    text-align: center;
}

/* --- Header & Title --- */
.mission-header {
    margin-bottom: 50px;
}

.mission-header h2 {
    font-size: 36px;
    font-weight: 800;
    color: var(--dark-blue-gray);
    margin-bottom: 15px;
}

.mission-header h2 span {
    color: var(--primary-orange);
}

.title-underline {
    width: 80px;
    height: 4px;
    background-color: var(--primary-orange);
    margin: 0 auto;
    border-radius: 2px;
}

/* --- Grid Section --- */
.activities-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* --- Card Styling --- */
.activity-card {
    background-color: var(--light-bg);
    border: 1.5px solid var(--border-color);
    border-radius: 12px;
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: var(--transition-smooth);
    position: relative;
    overflow: hidden;
}

/* --- INTERACTIVE Hover Effect --- */
.activity-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    border-color: #a3aeb9;
}

/* --- Icon Section --- */
.icon-container {
    width: 90px;
    height: 90px;
    background-color: var(--primary-orange);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    transition: var(--transition-smooth);
    position: relative;
    z-index: 2;
}

/* --- INTERACTIVE Icon Hover Effect --- */
.activity-card:hover .icon-container {
    transform: scale(1.1);
    background-color: #ea580c; /* Darker orange on hover */
}

/* Font Awesome Icon Styling (Assumes you are using Font Awesome) */
.icon-container i {
    font-size: 40px;
    color: #ffffff;
}

/* --- Title Section --- */
.activity-card h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-black);
    margin-bottom: 25px;
    transition: var(--transition-smooth);
}

/* --- Button Styling --- */
.view-details-btn {
    background-color: var(--btn-dark);
    color: #ffffff;
    border: none;
    padding: 10px 24px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: var(--transition-smooth);
    text-decoration: none; /* If it's an 'a' tag */
}

/* --- INTERACTIVE Button Hover Effect --- */
.view-details-btn:hover {
    background-color: #1a3675; /* Slightly darker on hover */
    transform: scale(1.05);
}

/* --- Button Active State --- */
.view-details-btn:active {
    transform: scale(0.98);
}

/* --- Specific Background for Icons as in Image --- */
/* You would need to add classes for each icon to apply these specific inner background effects, 
but here is how you might style the content area of the icons as seen in the image. */

/* Youth Development Icon (Single Person) */
.icon-youth::before {
    content: '\f183'; /* Person Icon from Font Awesome */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
}

/* Women Support Icon (Single Person Female) */
.icon-women::before {
    content: '\f182'; /* Female Person Icon */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
}

/* Village Welfare Icon (Group) */
.icon-village::before {
    content: '\f0c0'; /* Users/Group Icon */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
}

/* Environment Care Icon (Globe) */
.icon-environment::before {
    content: '\f57d'; /* Globe Icon */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
}

/* Education Support Icon (Book) */
.icon-education::before {
    content: '\f02d'; /* Book Icon */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
}

/* Health Awareness Icon (First Aid Kit) */
.icon-health::before {
    content: '\f479'; /* First Aid Kit Icon */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
}


/* =========================================
   --- RESPONSIVE Media Queries ---
   ========================================= */

/* --- For Large Tablets & Laptops (max-width: 1024px) --- */
@media screen and (max-width: 1024px) {
    .activities-grid {
        gap: 20px;
    }
}

/* --- For Small Tablets & Large Phones (max-width: 768px) --- */
@media screen and (max-width: 768px) {
    .mission-header h2 {
        font-size: 30px;
    }

    .activities-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns */
        gap: 20px;
    }

    .activity-card {
        padding: 30px 15px;
    }

    .icon-container {
        width: 80px;
        height: 80px;
    }

    .icon-container i {
        font-size: 36px;
    }

    .activity-card h3 {
        font-size: 18px;
    }
}

/* --- For Mobile Phones (max-width: 480px) --- */
@media screen and (max-width: 480px) {
    .main-container {
        padding: 40px 15px;
    }

    .mission-header h2 {
        font-size: 26px;
    }

    .activities-grid {
        grid-template-columns: 1fr; /* 1 column (list view) */
        gap: 15px;
    }

    .activity-card {
        padding: 25px 15px;
        flex-direction: column;
        align-items: center;
    }
    
    .icon-container {
        margin-bottom: 20px;
    }

    .activity-card h3 {
        margin-bottom: 20px;
    }
}



/* --- VARIABLES --- */
:root {
    --primary-green: #2d5a3e;
    --accent-lime: #9dc040;
    --dark-green: #1e3d2a;
    --white: #ffffff;
    --text-gray: #666;
    --transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* SECTION LAYOUT */
.president-section {
    padding: 100px 0;
    background: #fdfdfd;
    overflow: hidden;
}

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

.president-flex {
    display: flex;
    gap: 50px;
    align-items: flex-start;
}

/* PROFILE CARD */
.profile-card {
    flex: 0 0 350px;
    background: var(--white);
    border-radius: 25px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
    padding: 20px;
    text-align: center;
    position: sticky;
    top: 150px;
    transition: var(--transition);
}

.profile-card:hover {
    transform: translateY(-10px);
}

.image-wrapper {
    width: 100%;
    height: 350px;
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 20px;
    border: 5px solid #f0f4f1;
}

.image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.6s;
}

.profile-card:hover .image-wrapper img {
    transform: scale(1.1);
}

.profile-info h2 {
    color: var(--primary-green);
    font-size: 24px;
    margin-bottom: 5px;
    font-weight: 800;
}

.designation {
    color: var(--accent-lime);
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
}

/* CONTENT SIDE */
.content-side {
    flex: 1;
}

.president-message {
    background: var(--white);
    padding: 40px;
    border-radius: 25px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.04);
    position: relative;
    border-left: 6px solid var(--primary-green);
}

.message-header {
    font-size: 14px;
    text-transform: uppercase;
    color: var(--accent-lime);
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 15px;
}

.scroll-desc {
    max-height: 400px;
    overflow-y: auto;
    padding-right: 15px;
    font-style: italic;
    color: #444;
    line-height: 1.8;
}

/* Custom Scrollbar */
.scroll-desc::-webkit-scrollbar { width: 5px; }
.scroll-desc::-webkit-scrollbar-track { background: #f1f1f1; }
.scroll-desc::-webkit-scrollbar-thumb { background: var(--accent-lime); border-radius: 10px; }

.signature {
    margin-top: 30px;
    font-weight: 700;
    color: var(--primary-green);
    font-size: 18px;
    text-align: right;
}

/* RESPONSIBILITIES GRID */
.responsibilities-container {
    margin-top: 50px;
}

.res-title {
    font-size: 26px;
    color: var(--primary-green);
    margin-bottom: 25px;
    font-weight: 800;
}

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

.role-card {
    background: #f8faf9;
    padding: 25px;
    border-radius: 15px;
    display: flex;
    gap: 20px;
    transition: var(--transition);
    border: 1px solid #eee;
}

.role-card:hover {
    background: var(--primary-green);
    transform: translateX(10px);
}

.role-num {
    font-size: 24px;
    font-weight: 900;
    color: var(--accent-lime);
    opacity: 0.5;
}

.role-info strong {
    display: block;
    color: var(--dark-green);
    margin-bottom: 5px;
}

.role-info p {
    font-size: 13px;
    color: var(--text-gray);
    margin: 0;
}

.role-card:hover .role-num,
.role-card:hover .role-info strong,
.role-card:hover .role-info p {
    color: var(--white);
    opacity: 1;
}

/* --- RESPONSIVE --- */
@media (max-width: 992px) {
    .president-flex {
        flex-direction: column;
        align-items: center;
    }
    .profile-card {
        position: static;
        width: 100%;
        max-width: 400px;
    }
}

@media (max-width: 600px) {
    .roles-grid {
        grid-template-columns: 1fr;
    }
    .president-message {
        padding: 25px;
    }
    .res-title {
        text-align: center;
    }
}


/* --- BRAND VARIABLES (Extracted from Image) --- */
:root {
    --primary-green: #2d5a3e; /* Logo Tree Green */
    --accent-lime: #9dc040;   /* Logo Sun/Leaf Lime */
    --white: #ffffff;
    --transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.cta-banner {
    padding: 120px 0;
    /* Using Forest Green with a slight gradient for a professional look */
    background: linear-gradient(rgba(45, 90, 62, 0.92), rgba(45, 90, 62, 0.95)), 
                url('path-to-nature-pattern.png'); 
    text-align: center;
    color: var(--white);
    position: relative;
    overflow: hidden;
    border-bottom: 5px solid var(--accent-lime);
}

.cta-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- TYPOGRAPHY --- */
.cta-subheading {
    display: block;
    color: var(--accent-lime); /* Switched to Logo Lime */
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 3px;
    font-size: 14px;
    margin-bottom: 15px;
    animation: fadeInDown 0.8s ease;
}

.cta-title {
    font-size: 48px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 25px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.cta-description {
    font-size: 18px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
    max-width: 750px;
    margin: 0 auto 45px;
}

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

/* Outline Button (Secondary CTA) */
.btn-outline {
    padding: 16px 35px;
    border: 2px solid var(--white);
    border-radius: 50px;
    color: var(--white);
    text-decoration: none;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 1px;
    transition: var(--transition);
}

.btn-outline:hover {
    background-color: var(--white);
    color: var(--primary-green);
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* Solid Lime Button (Primary CTA) */
.btn-solid {
    padding: 16px 35px;
    background-color: var(--accent-lime); /* Matches the Sun side of logo */
    border-radius: 50px;
    color: var(--primary-green); /* Dark text on light button for better readability */
    text-decoration: none;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: var(--transition);
    box-shadow: 0 4px 15px rgba(157, 192, 64, 0.3);
}

.btn-solid i {
    font-size: 12px;
}

.btn-solid:hover {
    background-color: #add152; /* Slightly brighter lime for interaction */
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(157, 192, 64, 0.5);
}

/* --- RESPONSIVE DESIGN --- */
@media (max-width: 768px) {
    .cta-banner {
        padding: 80px 0;
    }

    .cta-title {
        font-size: 32px;
    }

    .cta-description {
        font-size: 16px;
    }

    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }

    .btn-outline, .btn-solid {
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }
}

/* --- ANIMATIONS --- */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}