:root {
    --bg-color: #ffffff;
    --text-main: #1a1a1a;
    --text-light: #5f6c7b;

    /* Logo Palette - Yellow/Gold as primary accent */
    --logo-pink: #f9a825;   /* Warm gold (was pink) */
    --logo-purple: #f57f17; /* Deep gold (was purple) */
    --logo-orange: #ffb300; /* Amber */
    --logo-yellow: #fdd835; /* Primary yellow */
    --logo-blue: #f9a825;   /* Gold (was blue) */
    --logo-cyan: #fdd835;   /* Yellow (was cyan) */
    --logo-red: #f9a825;    /* Gold accent */

    /* Gradients - yellow/gold tones */
    --gradient-pink: linear-gradient(135deg, var(--logo-purple), var(--logo-yellow));
    --gradient-orange: linear-gradient(135deg, var(--logo-orange), var(--logo-yellow));
    --gradient-blue: linear-gradient(135deg, var(--logo-purple), var(--logo-yellow));
    --gradient-full: linear-gradient(90deg, #f57f17, #fdd835, #ffb300);

    --font-serif: 'Cormorant Garamond', serif;
    --font-sans: 'Montserrat', sans-serif;
    --transition-speed: 0.3s;
}

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

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

/* Header */
.main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 0.5rem 4rem; /* Reduced padding */
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    border-bottom: 2px solid transparent;
    border-image: var(--gradient-full) 1; /* Rainbow border bottom */
    transition: padding 0.3s ease;
}

.main-header.scrolled {
    padding: 0.3rem 4rem; /* Even smaller on scroll */
}

.logo-container {
    width: 100px; /* Smaller logo */
    z-index: 1001; /* Ensure logo stays above mobile menu */
}

.logo {
    width: 100%;
    height: auto;
    filter: none; /* Ensure original colors are shown */
    transition: transform 0.3s ease;
}

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

/* Menu Toggle (Hamburger) */
.menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
    cursor: pointer;
    z-index: 1002; /* Above everything */
}

.menu-toggle span {
    display: block;
    width: 100%;
    height: 3px;
    background: var(--text-main);
    border-radius: 3px;
    transition: all 0.3s ease;
}

/* Hamburger Animation */
.menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
    background: var(--logo-pink);
}

.menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -8px);
    background: var(--logo-blue);
}

.main-nav ul {
    list-style: none;
    display: flex;
    gap: 2rem;
    align-items: center;
}

.main-nav > ul > li {
    position: relative;
}

.main-nav a {
    text-decoration: none;
    color: var(--text-main);
    font-weight: 600; /* Bold for modern look matching logo text */
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 1px;
    padding: 10px 0;
    position: relative;
    transition: color 0.3s ease;
}

/* Hover colors - consistent yellow/gold */
.main-nav > ul > li:nth-child(1) > a:hover { color: var(--logo-yellow); }
.main-nav > ul > li:nth-child(2) > a:hover { color: var(--logo-orange); }
.main-nav > ul > li:nth-child(3) > a:hover { color: var(--logo-yellow); }
.main-nav > ul > li:nth-child(4) > a:hover { color: var(--logo-orange); }
.main-nav > ul > li:nth-child(5) > a:hover { color: var(--logo-yellow); }
.main-nav > ul > li:nth-child(6) > a:hover { color: var(--logo-orange); }

.main-nav a::after {
    content: '';
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 0;
    height: 3px;
    transition: width 0.3s ease;
    background: var(--gradient-full); /* Rainbow underline */
    border-radius: 2px;
}

.main-nav a:hover::after {
    width: 100%;
}

/* Submenu Styles */
.submenu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 260px;
    background-color: #fff;
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
    border-radius: 0 0 8px 8px; /* Rounded only at bottom */
    border-top: 3px solid var(--logo-blue); /* Accent top border */
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    display: block !important;
    padding: 10px 0;
    z-index: 1001;
}

.main-nav li:hover .submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.submenu li {
    width: 100%;
    margin: 0;
}

.submenu a {
    display: block;
    padding: 12px 25px;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--text-light);
    border-left: 3px solid transparent;
}

.submenu a::after {
    display: none;
}

.submenu a:hover {
    background-color: #f8f9fa;
    color: var(--logo-blue);
    border-left-color: var(--logo-blue);
}

/* Hero Section - Creative Living Canvas */
.hero {
    min-height: 100vh;
    width: 100%;
    position: relative;
    overflow: hidden;
    background-color: #fff; /* Bright base */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 6rem 1rem;
}

/* Background Creative Shapes */
.creative-shapes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px); /* Soft artistic blur */
    opacity: 0.6;
    animation: floatShape 10s infinite alternate ease-in-out;
}

.shape-1 {
    top: -10%;
    right: -5%;
    width: 50vw;
    height: 50vw;
    background: linear-gradient(135deg, #fff8e1, #ffecb3);
    transform: rotate(0deg);
}

.shape-2 {
    bottom: -10%;
    left: -10%;
    width: 40vw;
    height: 40vw;
    background: linear-gradient(135deg, #f5f0e8, #fff3e0);
    animation-delay: -2s;
}

.shape-3 {
    top: 40%;
    left: 40%;
    width: 30vw;
    height: 30vw;
    background: linear-gradient(135deg, #fff9c4, #ffecb3);
    opacity: 0.3;
    animation-delay: -5s;
}

@keyframes floatShape {
    0% { transform: translate(0, 0) scale(1) rotate(0deg); }
    100% { transform: translate(20px, 40px) scale(1.1) rotate(10deg); }
}

/* Hero Container Grid */
.hero-container {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 2rem;
    max-width: 1200px;
    width: 100%;
    text-align: center;
}

/* Desktop layout: Zig-zag text around art */
@media (min-width: 1024px) {
    .hero-container {
        grid-template-columns: 1.2fr 1fr 1.2fr; /* Text - Art - Text */
        grid-template-rows: 1fr;
        align-items: center;
        text-align: left;
    }

    .hero-text-area {
        text-align: right;
        padding-right: 20px;
    }

    .hero-text-area-bottom {
        text-align: left;
        padding-left: 20px;
    }
}

/* Typography Styles */
.quote-modern {
    font-family: var(--font-sans);
    font-weight: 700;
    line-height: 1.2;
    color: #2c3e50;
}

.quote-modern .block-text {
    display: block;
    font-size: clamp(1.8rem, 2.5vw, 2.4rem);
    color: #2c3e50;
    margin-bottom: 0.2rem;
}

.quote-modern .small {
    font-size: clamp(1.1rem, 1.5vw, 1.3rem);
    font-weight: 400;
    color: var(--text-light);
    margin-top: 0.3rem;
}

.script-font {
    font-family: 'Kaushan Script', cursive;
    font-size: clamp(1.8rem, 2.8vw, 2.6rem) !important;
    line-height: 1.3;
    padding: 4px 0;
    color: var(--logo-purple);
    -webkit-text-fill-color: var(--logo-purple);
    transform: rotate(-2deg);
    display: inline-block !important;
}

/* Central Art Blob */
.hero-art-area {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.blob-frame {
    width: 350px;
    height: 450px;
    position: relative;
    transition: transform 0.5s ease;
}

.blob-frame:hover {
    transform: scale(1.02) rotate(2deg);
}

.blob-image {
    width: 100%;
    height: 100%;
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    background-image: url('https://semper.org.pl/wp-content/uploads/2022/07/female-artist-painting-in-studio-scaled.jpg');
    background-size: cover;
    background-position: center;
    box-shadow: 20px 20px 60px rgba(0,0,0,0.15);
    border: 5px solid #fff;
    animation: blobMorph 8s ease-in-out infinite alternate;
}

/* Add a playful paint splash behind the blob */
.blob-frame::before {
    content: '';
    position: absolute;
    top: -10%;
    left: -10%;
    width: 120%;
    height: 120%;
    background: var(--gradient-orange);
    z-index: -1;
    border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
    filter: blur(20px);
    opacity: 0.4;
    animation: blobMorph 10s ease-in-out infinite alternate-reverse;
}

@keyframes blobMorph {
    0% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
    50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
    100% { border-radius: 50% 40% 40% 70% / 40% 50% 60% 50%; }
}

/* Author Tag */
.author {
    font-family: var(--font-sans);
    font-size: 0.95rem;
    margin-top: 1.5rem;
    font-weight: 300;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-light);
    display: inline-block;
    border-bottom: 2px solid var(--logo-pink);
}

/* Scroll indicator styling - Button Style */
.scroll-indicator {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    background: white;
    padding: 10px 25px;
    border-radius: 50px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.scroll-indicator:hover {
    transform: translateX(-50%) translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.scroll-text {
    font-size: 0.8rem;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 5px;
    color: var(--text-main);
}

.arrow-down {
    width: 12px;
    height: 12px;
    border-right: 3px solid var(--logo-yellow);
    border-bottom: 3px solid var(--logo-orange);
    transform: rotate(45deg);
    margin-top: -3px;
}

/* Animations */
.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

.fade-in {
    opacity: 0;
    animation: fadeIn 1s ease-out forwards;
}

.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.4s; }
.delay-3 { animation-delay: 0.6s; }
.delay-4 { animation-delay: 0.8s; }
.delay-5 { animation-delay: 1.0s; }
.delay-6 { animation-delay: 1.4s; }

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

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

/* Content Section */
/* Content Section */
.content-section {
    padding: 8rem 0; /* Vertical padding only */
    background-color: #fff;
    position: relative;
    /* Subtle mesh gradient background */
    background-image:
        radial-gradient(at 0% 0%, rgba(253, 216, 53, 0.05) 0px, transparent 50%),
        radial-gradient(at 100% 100%, rgba(249, 168, 37, 0.04) 0px, transparent 50%);
}

.content-wrapper {
    width: 90%; /* Defines width in % */
    max-width: 1400px; /* Restrict max width */
    margin: 0 auto; /* Center everything */
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

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

.section-title {
    font-family: var(--font-sans);
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text-main);
    display: inline-block;
    line-height: 1.2;
    border-bottom: 4px solid var(--logo-yellow);
    padding-bottom: 0.3rem;
}

.section-desc {
    font-size: 1.1rem;
    color: var(--text-light);
    line-height: 1.8;
}

/* Gallery - Clean & Modern */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Force 3 columns for desktop */
    gap: 20px;
    width: 100%; /* Take full width of wrapper */
}

/* Animations Reveal */
.reveal {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s ease-out;
}

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

.reveal.fade-bottom {
    transform: translateY(50px);
}

.reveal.delay-200 { transition-delay: 0.2s; }

.gallery-item {
    height: 400px;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: all 0.4s ease;
    filter: none; /* Full color by default per "bright" request */
    background-size: cover;
    background-position: center;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Colored overlays on hover matching logo */
.gallery-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.item-1:hover::before { background: linear-gradient(to bottom, rgba(253, 216, 53, 0.7), transparent); }
.item-2:hover::before { background: linear-gradient(to bottom, rgba(249, 168, 37, 0.7), transparent); }
.item-3:hover::before { background: linear-gradient(to bottom, rgba(255, 179, 0, 0.7), transparent); }

.gallery-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

.item-1 { background-image: url('https://semper.org.pl/wp-content/uploads/2022/07/handcraft-handmade-diy-skills-drawing-scaled.jpg'); background-size: cover; background-position: center; }
.item-2 { background-image: url('https://semper.org.pl/wp-content/uploads/2022/06/top-view-woman-knitting-scaled.jpg'); background-size: cover; background-position: center; }
.item-3 { background-image: url('https://semper.org.pl/wp-content/uploads/2022/06/feminine-hands-creating-handmade-invitations-scaled.jpg'); background-size: cover; background-position: center;}

/* Footer */
footer {
    padding: 3rem;
    text-align: center;
    background: #fff;
    border-top: 1px solid #eee;
    color: var(--text-light);
    position: relative;
    overflow: hidden;
}

footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--gradient-full);
}

/* =========================================
   RESPONSIVE DESIGN (Mobile & Tablet)
   ========================================= */

@media (max-width: 1024px) {
    /* Header Adjustments */
    .main-header {
        padding: 0.5rem 2rem;
    }
    .main-header.scrolled {
        padding: 0.5rem 2rem;
    }

    .menu-toggle {
        display: flex; /* Show hambuger */
    }

    /* FULL SCREEN MOBILE NAV */
    .main-nav {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        transform: translateY(-100%);
        transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1);
        z-index: 1000; /* Behind logo and toggle */
    }

    .main-nav.active {
        transform: translateY(0);
    }

    .main-nav ul {
        flex-direction: column;
        gap: 1.5rem;
        text-align: center;
    }

    .main-nav a {
        font-size: 1.5rem;
        padding: 5px;
    }

    .main-nav a::after {
        display: none; /* No underlines on mobile to keep it clean */
    }

    /* Handle Dropdowns in Mobile */
    .has-submenu > a::after {
        /* Optional indicator for dropdowns */
        content: ' ▼';
        font-size: 0.8rem;
        position: static;
        width: auto;
        height: auto;
        background: none;
        color: var(--logo-pink);
    }

    .submenu {
        position: static;
        visibility: visible;
        opacity: 1;
        transform: none;
        box-shadow: none;
        border: none;
        min-width: auto;
        display: none !important; /* Click to show logic needed or CSS toggle */
        padding-left: 0;
        margin-top: 10px;
    }

    /* Simple JS toggle class for functionality or just show them for simplicity?
       For a "clean" overlay, usually we show them.
       Let's stick to a clean list for now. */
    .main-nav.active li:hover .submenu {
        /* On mobile touch 'hover' helps, but really needs click.
           For now let's just make valid layout */
        display: block !important;
    }

    /* Hero Section Mobile */
    .hero {
        padding-top: 8rem; /* Space for fixed header */
        flex-direction: column;
        text-align: center;
        height: auto;
        min-height: 100vh;
    }

    .hero-container {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .hero-text-area, .hero-text-area-bottom {
        text-align: center !important;
        padding: 0 !important;
    }

    .quote-modern .block-text {
        font-size: 1.8rem;
    }

    .quote-modern .small {
        font-size: 1.1rem;
    }

    .blob-frame {
        width: 80vw;
        height: 80vw;
        max-width: 300px;
        max-height: 300px;
        margin: 0 auto;
    }

    .script-font {
        font-size: 1.8rem !important;
    }

    /* Content & Gallery */
    .content-section {
        padding: 4rem 2rem;
    }

    .container h2 {
        font-size: 2.5rem;
    }

    .gallery-grid {
        grid-template-columns: 1fr; /* 1 column on mobile */
        gap: 1.5rem;
    }

    .gallery-item {
        height: 300px;
    }

    /* Footer */
    footer {
        padding: 2rem 1rem;
    }
}

/* Mission Section Typography */
.mission-quote {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-style: italic;
    color: var(--text-main);
    border-left: 4px solid var(--logo-pink);
    padding-left: 20px;
    margin: 2rem 0;
    line-height: 1.6;
    background: linear-gradient(to right, rgba(253, 216, 53, 0.08), transparent);
    padding: 20px;
    border-radius: 0 10px 10px 0;
}

.author-note {
    font-size: 0.9rem;
    color: var(--text-light);
    margin-bottom: 2rem;
    font-style: italic;
    line-height: 1.6;
    padding-left: 20px;
}

/* Page Header (for subpages) */
.page-header-section {
    padding-top: 10rem; /* More space from top */
    padding-bottom: 6rem;
    position: relative;
    background-color: #f9f9f9;
    text-align: center;
    overflow: hidden;
    margin-bottom: 0;
}

/* Adjust content padding when following a page header to avoid huge gaps */
.page-header-section + .content-section {
    padding-top: 3rem;
}

/* Reusing the artistic background for subpages but with different settings */
.page-header-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('images/artistic_studio_bg.png');
    background-size: cover;
    background-position: center;
    opacity: 0.15;
    mix-blend-mode: multiply;
    z-index: 0;
}

/* Decorative gradient line at the bottom */
.page-header-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--gradient-full);
}

.page-title {
    position: relative;
    z-index: 1; /* Above background */
    font-family: var(--font-sans);
    font-size: 4rem; /* Larger */
    font-weight: 800;
    letter-spacing: -1px;
    color: var(--text-main);
    /* No gradient text on complex background for better readability, or keep it but stronger?
       Let's stick to dark text for clarity or gradient if it pops.
       The user wants "pretty" and "not empty". Large text helps. */
    color: var(--text-main);
    display: inline-block;
    padding-bottom: 1rem;
    border-bottom: 4px solid var(--logo-yellow);
}

/* Statute Page Styling */
.statute-content {
    text-align: justify; /* Justify text for clean edges */
    max-width: 900px !important;
    margin: 0 auto; /* Center the block */
    background: #fff;
    padding: 3rem;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.05); /* Soft shadow lift */
    position: relative;
    border: 1px solid rgba(0,0,0,0.03);
}

/* Add a subtle artistic decoration top/bottom of the paper */
.statute-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 6px;
    background: var(--gradient-full);
    border-radius: 8px 8px 0 0;
}

.statute-chapter {
    font-family: var(--font-serif);
    font-size: 2.5rem;
    font-weight: 600;
    text-align: center;
    margin-top: 4rem;
    margin-bottom: 2.5rem;
    line-height: 1.2;
    color: var(--text-main);
    position: relative;
    display: table;
    margin-left: auto;
    margin-right: auto;
}

/* Decorative dash under chapter */
.statute-chapter::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: var(--logo-pink);
    margin: 15px auto 0;
    border-radius: 2px;
}

.statute-section-title {
    font-family: var(--font-sans);
    font-size: 1.4rem;
    font-weight: 800;
    text-align: center; /* Center the paragraphs */
    margin-top: 2rem;
    margin-bottom: 1rem;
    display: block; /* Block to center */
    color: var(--text-main);
    letter-spacing: 1px;
}

/* Make the paragraph symbol colored */
.statute-section-title::first-letter {
    color: var(--logo-orange);
    font-size: 1.6rem;
}

.statute-content p {
    margin-bottom: 1.2rem;
    color: #2d3748;
    line-height: 1.8;
}

.statute-content ol {
    margin-left: 2rem;
    margin-bottom: 2rem;
}

.statute-content ol li {
    margin-bottom: 0.8rem;
    color: #4a5568;
    padding-left: 1rem;
    line-height: 1.7;
}

.sub-list {
    margin-top: 1rem;
    list-style-type: disc; /* Cleaner than circle */
    margin-left: 1rem;
}

/* =========================================
   Mobile Adjustments for New Pages
   ========================================= */
@media (max-width: 1024px) {
    /* Adjust Page Headers (Misja, Statut) */
    .page-header-section {
        padding-top: 12rem; /* Increased to push text down visually to center */
        padding-bottom: 4rem;
        min-height: 50vh; /* Taller to feel more 'hero' like */
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    .page-title {
        font-size: 2.2rem; /* Slightly smaller to fit better */
        line-height: 1.2;
        padding: 0 1rem; /* Padding for safety */
    }

    /* Statute Content Mobile - WIDER */
    .statute-content {
        padding: 1.5rem 1rem; /* Less horizontal padding */
        margin: 0 !important; /* Remove side margins */
        width: 100%; /* Force full width */
        border-radius: 0; /* Remove rounded corners on mobile to look seamlessly integrated */
        box-shadow: none; /* Simplify for mobile, or keep subtle? Let's remove to widen */
        border: none;
    }

    .content-wrapper {
        width: 100%; /* Ensure wrapper is full width on mobile */
        padding: 0; /* No padding on wrapper */
    }

    .statute-chapter {
        font-size: 1.8rem;
        margin-top: 2rem;
    }

    .statute-section-title {
        font-size: 1.2rem;
    }
}

/* Program Council Styling */
.council-member {
    margin-bottom: 2.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px dashed #eee;
}

.council-member:last-child {
    border-bottom: none;
}

.member-name {
    font-family: var(--font-serif);
    font-size: 1.4rem;
    color: var(--logo-blue);
    margin-bottom: 1rem;
    font-weight: 600;
}
/* Manager / Board Member Styling */
.manager-card {
    max-width: 1000px !important;
}

.manager-layout {
    display: flex;
    gap: 3rem;
    align-items: flex-start;
}

.manager-image-container {
    flex: 0 0 350px;
    position: relative;
}

.manager-image {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 20px 20px 60px rgba(0,0,0,0.1);
    display: block;
}

/* Artistic accent behind image */
.manager-image-container::after {
    content: '';
    position: absolute;
    top: -15px;
    right: -15px;
    width: 100px;
    height: 100px;
    background: var(--gradient-full);
    z-index: -1;
    border-radius: 50%;
    opacity: 0.2;
}

.manager-info {
    flex: 1;
}

@media (max-width: 768px) {
    .manager-layout {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .manager-image-container {
        flex: 0 0 auto;
        width: 100%;
        max-width: 300px;
        margin-bottom: 2rem;
    }
}

/* NGO Page Specific Styling */
.ngo-gallery {
    position: relative;
    margin-bottom: 4rem;
    overflow: hidden;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.gallery-container {
    display: flex;
    transition: transform 0.5s ease;
    height: 450px;
}

.gallery-slide {
    min-width: 100%;
    height: 100%;
}

.gallery-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-nav {
    position: absolute;
    top: 50%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    transform: translateY(-50%);
    pointer-events: none;
}

.gallery-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.8);
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
    color: var(--logo-red);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    pointer-events: auto;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.gallery-btn:hover {
    background: var(--logo-red);
    color: white;
}

/* Accordion Styling */
.accordion {
    margin-top: 3rem;
}

.accordion-item {
    margin-bottom: 1rem;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.accordion-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: var(--font-serif);
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--text-dark);
    transition: color 0.3s ease;
}

.accordion-header:hover {
    color: var(--logo-red);
}

.accordion-header i {
    font-size: 1rem;
    transition: transform 0.3s ease;
}

.accordion-item.active .accordion-header i {
    transform: rotate(45deg);
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.accordion-item.active .accordion-content {
    max-height: 2000px; /* Large enough to fit content */
    padding-bottom: 2rem;
}

.module-title {
    font-family: var(--font-serif);
    font-size: 1.2rem;
    color: var(--logo-red);
    margin: 1.5rem 0 0.5rem;
}

.rules-list {
    list-style: none;
    padding-left: 0;
}

.rules-list li {
    margin-bottom: 0.8rem;
}

.download-forms {
    margin-top: 2rem;
    padding: 2rem;
    background: #fffde7;
    border-radius: 10px;
    text-align: center;
}

.form-links {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 1rem;
}

@media (max-width: 768px) {
    .gallery-container {
        height: 300px;
    }
    .form-links {
        flex-direction: column;
    }
}

/* Contact Page Specific */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    margin-top: 3rem;
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.contact-item {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

.contact-icon {
    width: 50px;
    height: 50px;
    background: var(--gradient-full);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.contact-text h3 {
    font-family: var(--font-serif);
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    color: var(--text-dark);
}

.contact-text p {
    color: var(--text-light);
    line-height: 1.6;
}

.social-links {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
}

.social-btn {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f8f8;
    color: var(--text-dark);
    transition: all 0.3s ease;
    text-decoration: none;
}

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

/* Form Styling */
.contact-form-container {
    background: white;
    padding: 3rem;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.05);
}

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

.form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-light);
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 1.2rem;
    border: 1px solid #eee;
    border-radius: 8px;
    font-family: var(--font-sans);
    transition: all 0.3s ease;
    background: #fafafa;
    font-size: 1rem;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--logo-red);
    background: white;
    box-shadow: 0 5px 15px rgba(249, 168, 37, 0.1);
}

.submit-btn {
    width: 100%;
    padding: 1.2rem;
    background: var(--gradient-full);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: var(--font-sans);
}

.submit-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(249, 168, 37, 0.3);
    filter: brightness(1.1);
}

.privacy-notice {
    margin-top: 4rem;
    padding: 2.5rem;
    background: #fdfdfd;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    font-size: 0.85rem;
    color: #777;
    line-height: 1.8;
    text-align: justify;
}

@media (max-width: 992px) {
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 4rem;
    }
}