/* =====================================================
   NARISAKTI WEBSITE
   CREATIVE + RESPONSIVE FRONTEND
   ===================================================== */


/* ================= RESET ================= */

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: "DM Sans", Arial, sans-serif;
    background: #FAECC3;
    color: #49212a;
    line-height: 1.6;
}

a {
    text-decoration: none;
    color: inherit;
}

img {
    max-width: 100%;
    display: block;
}


/* ================= COLORS ================= */

:root {

    /* ===== NARISAKTI COLOUR PALETTE ===== */

    --charcoal: #3A3636;
    --dark-charcoal: #302C2D;

    --maroon: #401519;
    --dark-maroon: #2D0D11;

    --deep-red: #741410;

    --orange: #AE4700;

    --ochre: #D68B32;

    --yellow: #FAB800;

    --bright-yellow: #FFD34E;

    --cream: #FFF7E8;
    --cream-dark: #F4E6D0;

    --white: #FFFFFF;

    --text: #4A4140;
    --light-text: #E7D9C7;

    --border: #D8C5AA;
}


/* ================= COMMON ================= */

.section-container {
    width: min(1120px, 90%);
    margin: auto;
}


.eyebrow {
    color: var(--orange);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 2.5px;
    margin-bottom: 22px;
}


.about-section .eyebrow {
    color: var(--yellow);
}


.section-heading {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 55px;
}


.section-heading h2,
.about-content h2,
.belief-container h2,
.contact-intro h2,
.involved-content h2 {
    font-family: "Playfair Display", Georgia, serif;
    color: var(--maroon);
    font-size: clamp(38px, 5vw, 62px);
    line-height: 1.08;
}


.about-content h2 {
    font-size: clamp(40px, 3.8vw, 54px);
    max-width: 520px;
}


.section-heading p:not(.eyebrow) {
    color: var(--text);
    margin-top: 15px;
}


.text-link {
    color: var(--cream);
    font-weight: 700;
    display: inline-block;
    margin-top: 25px;
    transition: 0.3s;
}


.text-link:hover {
    color: var(--orange);
    transform: translateX(4px);
}

/* Explore Area links on light cards */
.work-card .text-link {
    color: var(--maroon);
}

.work-card .text-link:hover {
    color: var(--orange);
}


/* ================= NAVBAR ================= */

.navbar {
    position: sticky;
    top: 0;
    z-index: 1000;

    background: rgba(255, 250, 244, 0.97);

    border-bottom: 1px solid var(--border);

    backdrop-filter: blur(10px);
}


.nav-container {
    width: min(1200px, 92%);
    height: 68px;
    margin: auto;

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


.logo {
    display: flex;
    align-items: center;
    height: 54px;
}


.logo img {
    height: 62px;
    width: auto;
    display: block;
    object-fit: contain;
}


.nav-links {
    display: flex;
    align-items: center;
    gap: 30px;
}


.nav-links a {
    font-size: 15px;
    font-weight: 600;
    color: #35282b;
    text-decoration: none;
    transition: color 0.25s ease;
}


.nav-links a:hover {
    color: var(--orange);
}


/* DONATE NAV BUTTON */

.nav-links .nav-donate {
    background: var(--maroon);
    color: white;
    padding: 9px 18px;
    border-radius: 30px;
    font-weight: 700;
    transition: 0.3s;
}


.nav-links .nav-donate:hover {
    background: var(--orange);
    color: white;
    transform: translateY(-2px);
}


.menu-button {
    display: none;

    background: none;
    border: none;

    font-size: 28px;
    color: var(--maroon);

    cursor: pointer;
}


/* ================= HERO ================= */
.hero {
    position: relative;

    background: #5a1825;

    color: #f5efe5;

    display: flex;
    align-items: center;

    overflow: hidden;
}


.hero-container {
    width: min(1200px, 90%);
    margin: auto;

    display: grid;
    grid-template-columns: 1.05fr 0.95fr;

    gap: 60px;
    align-items: center;

    padding: 65px 0;
}


.hero-content {
    max-width: 650px;
}


/* ORGANISATION NAME */

.hero .eyebrow {
    color: #FF6A21;

    font-size: 18px;

    font-weight: 700;

    letter-spacing: 2.5px;

    margin-bottom: 22px;
}


/* MAIN HEADING */

.hero h1 {
    font-family: "Playfair Display", Georgia, serif;

    color: #FFD34E;

    font-size: clamp(46px, 5vw, 68px);

    line-height: 1.02;
    letter-spacing: -1.5px;

    margin-bottom: 28px;
}


.hero h1 span {
    display: block;
}


/* DESCRIPTION */

.hero-intro {
    max-width: 540px;

    color: #F1E9DE;

    font-size: 18px;

    line-height: 1.7;

    margin-bottom: 32px;
}


/* BUTTONS */

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}


.button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 52px;

    padding: 0 26px;

    border-radius: 30px;

    font-size: 15px;
    font-weight: 700;

    border: 2px solid transparent;

    transition: 0.3s;

    cursor: pointer;
}


.button-primary {
    background: #FFD34E;

    color: #202323;

    border-color: #FFD34E;
}


.button-primary:hover {
    background: #FF6A21;

    border-color: #FF6A21;

    color: white;

    transform: translateY(-3px);
}

.button-outline {
    border-color: #FFD34E;
    color: #FFD34E;
}

.button-outline:hover {
    background: #FFD34E;
    color: #202323;
    border-color: #FFD34E;
}


/* HERO VISUAL */

.hero-visual {
    position: relative;
    width: 100%;
    max-width: 500px;
    margin-left: auto;
}


/* IMAGE AREA */

.hero-image-placeholder {
    position: relative;

    height: 470px;

    border-radius: 34px;

    background:
        linear-gradient(
            145deg,
            #FFD45A,
            #F39A27
        );

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    color: #541923;

    overflow: hidden;

    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.30);
}


/* DECORATIVE CIRCLES */

.hero-image-placeholder::before {
    content: "";

    position: absolute;

    width: 230px;
    height: 230px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.22);

    top: -70px;
    right: -60px;
}


.hero-image-placeholder::after {
    content: "";

    position: absolute;

    width: 170px;
    height: 170px;

    border-radius: 50%;

    background: rgba(112, 31, 45, 0.12);

    bottom: -55px;
    left: -45px;
}


/* IMAGE TEXT */

.hero-image-content {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;
    align-items: center;
}


.hero-image-placeholder span {
    font-family: "Playfair Display", Georgia, serif;

    font-size: 36px;
    font-weight: 700;

    letter-spacing: 1px;
}


.hero-image-placeholder small {
    margin-top: 10px;

    font-size: 13px;

    color: var(--text);
}


/* BADGE */

.hero-badge {
    position: absolute;

    top: 75%;
    left: 50%;

    transform: translate(-50%, -50%);

    background: #FF6A21;

    color: white;

    padding: 14px 22px;

    border-radius: 30px;

    font-size: 13px;

    font-weight: 700;

    white-space: nowrap;

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.25);

    z-index: 3;
}


/* ORANGE ACCENT */

.hero-accent {
    position: absolute;

    right: 18px;
    top: 35px;

    width: 72px;
    height: 72px;

    border-radius: 50%;

    background: var(--orange);
    color: white;

    display: flex;
    align-items: center;
    justify-content: center;

    text-align: center;

    font-size: 9px;
    font-weight: 800;
    line-height: 1.2;

    letter-spacing: 1px;

    transform: rotate(8deg);

    box-shadow:
        0 12px 25px rgba(239, 126, 48, 0.25);
}


/* ================= ABOUT ================= */

.about-section {
    background: var(--charcoal);
    color: #f8f1e7;
    padding: 100px 0;
    position: relative;
    overflow: hidden;
}


.about-section::before {
    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    border-radius: 50%;

    background: var(--yellow);

    opacity: 0.06;

    right: -70px;
    top: -70px;
}


.about-section::after {
    content: "";

    position: absolute;

    width: 90px;
    height: 90px;

    border: 2px solid var(--yellow);

    border-radius: 50%;

    left: 5%;
    bottom: 8%;

    opacity: 0.18;
}


.about-grid {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 70px;
    align-items: center;
}


.about-image {
    height: 440px;
    position: relative;
}


.photo-placeholder {
    width: 100%;
    height: 100%;

    border-radius: 22px;

    background: #eadaca;

    display: flex;
    align-items: center;
    justify-content: center;

    text-align: center;

    color: var(--maroon);

    border: none;
}


.photo-placeholder span {
    font-weight: 700;
}


.about-content {
    max-width: 620px;
    position: relative;
    z-index: 2;
}


.about-content .eyebrow {
    color: var(--yellow);
    font-weight: 800;
}


.about-content h2 {
    color: #f8f1e7;
    margin-bottom: 25px;
}


.about-content p {
    color: #ded4ca;
    margin-bottom: 16px;
}


.about-content .large-text {
    font-size: 21px;
    color: #eee5dc;
}


.about-content a {
    color: var(--yellow);
    font-weight: 700;
}


.about-content a:hover {
    color: white;
}


/* ================= BELIEF ================= */

.belief-section {
    background: var(--cream-dark);
    padding: 90px 0;
}


.belief-container {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 80px;

    align-items: center;
}


.belief-quote {
    border-left: 4px solid var(--orange);

    padding-left: 35px;
}


.belief-quote p {
    font-family: "Playfair Display", Georgia, serif;

    font-size: clamp(25px, 3vw, 38px);

    line-height: 1.3;

    color: var(--maroon);
}


/* ================= IMPACT ================= */

.impact-section {
    background: white;
    padding: 110px 0;
}


.impact-grid {
    display: grid;

    grid-template-columns: repeat(4, 1fr);

    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}


.impact-item {
    padding: 45px 20px;

    text-align: center;

    border-right: 1px solid var(--border);

    transition: 0.3s;
}


.impact-item:hover {
    background: #fff6df;
    transform: translateY(-3px);
}


.impact-item:last-child {
    border-right: none;
}


.impact-item strong {
    display: block;

    color: var(--orange);

    font-size: clamp(45px, 5vw, 68px);

    line-height: 1;

    margin-bottom: 12px;
}


.impact-item span {
    font-weight: 600;
    color: var(--text);
}


/* ================= OUR WORK ================= */

.work-section {
    background: var(--cream);
    padding: 110px 0;
}


.work-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 24px;
}


.work-card {
    min-height: 300px;

    background: white;

    border: 1px solid var(--border);

    border-radius: 20px;

    padding: 35px;

    display: flex;
    flex-direction: column;

    transition: 0.3s;

    position: relative;
    overflow: hidden;
}


.work-card::before {
    content: "";

    position: absolute;

    width: 120px;
    height: 120px;

    border-radius: 50%;

    background: var(--yellow);

    opacity: 0.12;

    right: -45px;
    top: -45px;
}


.work-card:hover {
    transform: translateY(-7px);

    box-shadow: 0 20px 40px rgba(84, 25, 35, 0.08);
}


.work-number {
    width: 48px;
    height: 48px;

    border-radius: 50%;

    background: var(--maroon);

    color: white;

    display: flex;
    align-items: center;
    justify-content: center;

    font-weight: 700;

    margin-bottom: auto;
}


.work-card h3 {
    color: var(--maroon);

    font-size: 25px;

    line-height: 1.25;
}


/* ================= REACH ================= */

.reach-section {
    background: white;

    padding: 110px 0;
}


.district-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 14px;
}


.district-grid span {
    padding: 20px;

    text-align: center;

    border: 1px solid var(--border);

    border-radius: 12px;

    color: var(--maroon);

    font-weight: 700;

    transition: 0.3s;
}


.district-grid span:hover {
    background: var(--maroon);
    color: white;

    transform: translateY(-3px);
}



/* ================= STORIES ================= */

.stories-section {
    background: #d3a63a;
    padding: 70px 0 90px;
}

/* Heading on top */
.stories-section .left-heading {
    display: block;
    width: 100%;
    margin: 0 0 40px 0;
    text-align: left;
}

.stories-section .left-heading h2 {
    font-family: "Playfair Display", Georgia, serif;
    color: var(--maroon);
    font-size: 58px;
    line-height: 1.1;
    margin: 0;
    white-space: nowrap;
}


/* Box BELOW heading */
.stories-section .story-feature {
    display: grid;
    grid-template-columns: 1fr 1fr;

    width: 100%;
    max-width: 1000px;

    min-height: 420px;
    margin: 0 auto;

    background: #f4ead6;
    border-radius: 24px;
    overflow: hidden;
}


/* Photo area */
.stories-section .story-image {
    min-height: 420px;
    background: #dfb35f;

    display: flex;
    align-items: center;
    justify-content: center;
}


/* Story area */
.stories-section .story-content {
    padding: 50px;

    display: flex;
    flex-direction: column;
    justify-content: center;
}


/* ================= BUSINESSES ================= */

.business-section {
    background: white;

    padding: 110px 0;
}


.business-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 25px;
}


.business-card {
    border: 1px solid var(--border);

    border-radius: 18px;

    overflow: hidden;

    background: var(--cream);

    transition: 0.3s;
}


.business-card:hover {
    transform: translateY(-6px);

    box-shadow: 0 18px 35px rgba(84, 25, 35, 0.08);
}


.business-image {
    height: 250px;

    background: #eadaca;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--maroon);

    font-weight: 700;
}


.business-card h3 {
    padding: 22px;

    color: var(--maroon);

    font-size: 20px;
}


/* ================= EVENTS ================= */

.events-section {
    background: var(--cream);

    padding: 110px 0;
}


.events-grid {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 25px;
}


.event-card {
    background: white;

    border: 1px solid var(--border);

    border-radius: 20px;

    padding: 40px;

    min-height: 230px;

    transition: 0.3s;
}


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

    border-color: var(--yellow);
}


.event-card > span {
    color: var(--orange);

    font-size: 13px;

    letter-spacing: 2px;

    font-weight: 700;
}


.event-card h3 {
    color: var(--maroon);

    font-size: 27px;

    margin-top: 20px;
}


/* ================= GET INVOLVED ================= */

.involved-section {
    background: var(--maroon);

    color: white;

    padding: 90px 0;
}


.involved-content {
    text-align: center;

    max-width: 700px;

    margin: auto;
}


.involved-content .eyebrow {
    color: var(--yellow);
}


.involved-content h2 {
    color: white;
}


.involved-content p {
    margin-top: 15px;

    color: #f3dfe0;
}


.involved-buttons {
    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 14px;

    margin-top: 45px;
}


.button-light {
    background: white;

    color: var(--maroon);

    border-color: white;
}


.button-light:hover {
    background: var(--yellow);

    border-color: var(--yellow);

    color: var(--charcoal);
}


/* ================= DONATE ================= */

.donate-section {
    position: relative;

    background: var(--yellow);

    color: var(--charcoal);

    padding: 105px 0;

    overflow: hidden;
}


.donate-section::before {
    content: "";

    position: absolute;

    width: 430px;
    height: 430px;

    border-radius: 50%;

    border: 2px solid rgba(37, 37, 37, 0.12);

    right: -170px;
    top: -180px;
}


.donate-section::after {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    border-radius: 50%;

    background: rgba(112, 31, 45, 0.08);

    left: -80px;
    bottom: -80px;
}


.donate-container {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns: 1.15fr 0.85fr;

    gap: 80px;

    align-items: center;
}


.donate-content {
    max-width: 650px;
}


.donate-content .eyebrow {
    color: var(--maroon);
    font-weight: 800;
}


.donate-content h2 {
    font-family: "Playfair Display", Georgia, serif;

    color: var(--charcoal);

    font-size: clamp(44px, 5vw, 65px);

    line-height: 1.02;

    letter-spacing: -1px;
}


.donate-content > p:last-child {
    max-width: 600px;

    font-size: 18px;

    line-height: 1.7;

    margin-top: 25px;

    color: #403b36;
}


.donate-action {
    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 18px;
}


.donate-circle {
    width: 155px;
    height: 155px;

    border-radius: 50%;

    background: var(--maroon);

    color: white;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    font-size: 14px;

    line-height: 1.25;

    font-weight: 800;

    letter-spacing: 2px;

    transform: rotate(-8deg);

    box-shadow:
        0 18px 40px rgba(70, 30, 30, 0.2);

    transition: 0.3s;
}


.donate-circle:hover {
    transform: rotate(0deg) scale(1.04);
}


.button-donate {
    background: var(--charcoal);

    color: white;

    border-color: var(--charcoal);

    min-width: 250px;
}


.button-donate:hover {
    background: var(--maroon);

    border-color: var(--maroon);
}


.donate-action small {
    max-width: 300px;

    text-align: center;

    font-size: 11px;

    color: #514a43;
}


/* ================= GALLERY ================= */

.gallery-section {
    background: white;

    padding: 110px 0;
}


.gallery-grid {
    display: grid;

    grid-template-columns: 2fr 1fr 1fr;

    grid-template-rows: 220px 220px;

    gap: 15px;
}


.gallery-item {
    background: #eadaca;

    border-radius: 15px;

    display: flex;

    align-items: center;
    justify-content: center;

    color: var(--maroon);

    font-weight: 700;

    overflow: hidden;

    transition: 0.3s;
}


.gallery-item:hover {
    transform: scale(1.01);

    box-shadow: 0 15px 30px rgba(80, 34, 36, 0.1);
}


.gallery-item.large {
    grid-row: span 2;
}


/* ================= CONTACT ================= */

.contact-section {
    background: var(--cream-dark);

    padding: 110px 0;
}


.contact-grid {
    display: grid;

    grid-template-columns: 0.8fr 1.2fr;

    gap: 100px;

    align-items: start;
}


.contact-intro h2 {
    margin-bottom: 20px;
}


.contact-intro > p:last-child {
    color: var(--text);

    max-width: 400px;
}


.contact-form {
    display: flex;

    flex-direction: column;
}


.contact-form label {
    color: var(--maroon);

    font-weight: 700;

    margin-bottom: 8px;

    margin-top: 18px;
}


.contact-form label:first-child {
    margin-top: 0;
}


.contact-form input,
.contact-form textarea {
    width: 100%;

    border: 1px solid var(--border);

    border-radius: 10px;

    background: white;

    padding: 15px;

    font-family: inherit;

    font-size: 15px;

    outline: none;

    transition: 0.25s;
}


.contact-form textarea {
    resize: vertical;
}


.contact-form input:focus,
.contact-form textarea:focus {
    border-color: var(--orange);

    box-shadow:
        0 0 0 3px rgba(233, 101, 36, 0.08);
}


.contact-form button {
    margin-top: 25px;

    width: fit-content;
}


/* ================= FOOTER ================= */

footer {
    background: #2e1d20;

    color: white;

    padding: 55px 0 25px;
}


.footer-container {
    width: min(1120px, 90%);

    margin: auto;

    display: flex;

    justify-content: space-between;

    gap: 40px;
}


.footer-container h3 {
    font-size: 25px;

    letter-spacing: 2px;

    color: var(--yellow);
}


.footer-container p {
    color: #d7c7c8;

    margin-top: 5px;
}


.footer-links {
    display: flex;

    gap: 25px;

    flex-wrap: wrap;

    align-items: center;
}


.footer-links a {
    color: #eee1e1;

    font-size: 14px;
}


.footer-links a:hover {
    color: var(--yellow);
}


.copyright {
    width: min(1120px, 90%);

    margin: 40px auto 0;

    padding-top: 20px;

    border-top: 1px solid rgba(255,255,255,0.15);

    color: #c8b9ba;

    font-size: 13px;
}


/* =====================================================
   TABLET
   ===================================================== */

@media (max-width: 1100px) {

    .nav-links {
        gap: 15px;
    }


    .nav-links a {
        font-size: 12px;
    }


    .hero-container {
        grid-template-columns: 1fr;

        min-height: auto;

        gap: 45px;

        padding: 70px 0;

        text-align: center;
    }


    .hero-content {
        max-width: 720px;

        margin: auto;
    }


    .hero h1 {
        font-size: clamp(48px, 7vw, 62px);
    }


    .hero-intro {
        margin-left: auto;
        margin-right: auto;
    }


    .hero-actions {
        justify-content: center;
    }


    .hero-visual {
        width: 65%;

        max-width: 500px;

        margin: auto;
    }


    .hero-image-placeholder {
        height: 400px;
    }


    .hero-badge {
        left: 50%;

        top: 75%;

        transform: translate(-50%, -50%);
    }


    .hero-accent {
        right: -15px;
    }


    .about-grid {
        grid-template-columns: 0.9fr 1.1fr;
        gap: 45px;
        align-items: center;
    }


    .about-image {
        width: 100%;
        height: 400px;
    }


    .impact-grid {
        grid-template-columns: repeat(2, 1fr);
    }


    .impact-item:nth-child(2) {
        border-right: none;
    }


    .impact-item:nth-child(-n+2) {
        border-bottom: 1px solid var(--border);
    }


    .work-grid {
        grid-template-columns: 1fr;
    }


    .district-grid {
        grid-template-columns: repeat(2, 1fr);
    }


    .business-grid {
        grid-template-columns: 1fr 1fr;
    }


    .involved-buttons {
        grid-template-columns: 1fr 1fr;
    }


    .donate-container {
        grid-template-columns: 1fr 0.8fr;
        gap: 45px;
    }

}


/* =====================================================
   MOBILE
   ===================================================== */

@media (max-width: 650px) {

    .nav-container {
        min-height: 68px;
    }


    .logo {
        height: 54px;
    }


    .logo img {
        height: 48px;
    }


    .menu-button {
        display: block;
    }


    .nav-links {
        position: absolute;

        top: 68px;
        left: 0;

        width: 100%;

        background: var(--cream);

        border-bottom: 1px solid var(--border);

        display: none;

        flex-direction: column;

        align-items: stretch;

        padding: 15px 20px;

        gap: 0;
    }


    .nav-links.active {
        display: flex;
    }


    .nav-links a {
        padding: 13px 5px;

        font-size: 15px;

        border-bottom: 1px solid var(--border);
    }


    .nav-links .nav-donate {
        margin-top: 12px;
        text-align: center;
        border-bottom: none;
    }


    .nav-links a:last-child {
        border-bottom: none;
    }


    /* HERO */

    .hero {
        min-height: auto;
    }


    .hero-container {
        grid-template-columns: 1fr;

        width: 90%;

        min-height: auto;

        gap: 40px;

        padding: 55px 0 65px;

        text-align: center;
    }


    .hero-content {
        max-width: 600px;

        margin: auto;
    }


    .hero h1 {
        font-size: clamp(42px, 12vw, 56px);

        line-height: 1.05;

        letter-spacing: -0.5px;
    }


    .hero-intro {
        font-size: 16px;

        line-height: 1.65;

        margin-left: auto;

        margin-right: auto;
    }


    .hero-actions {
        justify-content: center;
    }


    .hero-visual {
        width: 90%;

        max-width: 400px;

        margin: auto;
    }


    .hero-image-placeholder {
        height: 350px;

        border-radius: 24px;
    }


    .hero-image-placeholder span {
        font-size: 28px;
    }


    .hero-badge {
        top: 75%;

        left: 50%;

        transform: translate(-50%, -50%);

        font-size: 10px;

        padding: 12px 16px;
    }


    .hero-accent {
        width: 70px;

        height: 70px;

        right: -10px;

        top: 20px;

        font-size: 8px;
    }


    /* GENERAL SECTIONS */

    .about-section,
    .impact-section,
    .work-section,
    .reach-section,
    .stories-section,
    .business-section,
    .events-section,
    .gallery-section,
    .contact-section {
        padding: 75px 0;
    }


    .about-grid,
    .belief-container,
    .contact-grid {
        grid-template-columns: 1fr;

        gap: 40px;
    }


    .about-image {
        height: 350px;
    }


    .about-content .large-text {
        font-size: 18px;
    }


    .belief-section {
        padding: 70px 0;
    }


    .belief-quote {
        padding-left: 20px;
    }


    /* IMPACT */

    .impact-grid {
        grid-template-columns: 1fr 1fr;
    }


    .impact-item {
        padding: 30px 10px;
    }


    .impact-item strong {
        font-size: 40px;
    }


    .impact-item span {
        font-size: 13px;
    }


    /* DISTRICTS */

    .district-grid {
        grid-template-columns: 1fr;
    }


    /* STORIES */

    .story-feature {
        grid-template-columns: 1fr;
    }


    .story-image {
        min-height: 300px;
    }


    .story-content {
        padding: 35px 25px;
    }


    .story-content h3 {
        font-size: 32px;
    }


    /* BUSINESSES */

    .business-grid {
        grid-template-columns: 1fr;
    }


    /* EVENTS */

    .events-grid {
        grid-template-columns: 1fr;
    }


    .event-card {
        padding: 30px;
    }


    /* INVOLVED */

    .involved-buttons {
        grid-template-columns: 1fr;
    }


    /* DONATE */

    .donate-section {
        padding: 80px 0;
    }


    .donate-container {
        grid-template-columns: 1fr;

        gap: 45px;

        text-align: center;
    }


    .donate-content {
        margin: auto;
    }


    .donate-content h2 {
        font-size: clamp(40px, 12vw, 54px);
    }


    .donate-content > p:last-child {
        font-size: 16px;
    }


    .donate-circle {
        width: 135px;
        height: 135px;
    }


    /* GALLERY */

    .gallery-grid {
        grid-template-columns: 1fr 1fr;

        grid-template-rows: 180px 180px 180px;
    }


    .gallery-item.large {
        grid-row: span 2;
    }


    /* FOOTER */

    .footer-container {
        flex-direction: column;
    }


    .footer-links {
        gap: 15px;
    }

}


/* =====================================================
   EXTRA SMALL PHONES
   ===================================================== */

@media (max-width: 390px) {

    .hero h1 {
        font-size: 39px;
    }


    .hero-actions {
        flex-direction: column;
        width: 100%;
    }


    .hero-actions .button {
        width: 100%;
    }


    .hero-image-placeholder {
        height: 320px;
    }


    .hero-badge {
        font-size: 9px;
        padding: 11px 13px;
    }


    .impact-grid {
        grid-template-columns: 1fr;
    }


    .district-grid {
        grid-template-columns: 1fr;
    }


    .gallery-grid {
        grid-template-columns: 1fr;
        grid-template-rows: 200px 200px 200px 200px 200px;
    }


    .gallery-item.large {
        grid-row: auto;
    }


    .donate-button {
        min-width: 0;
        width: 100%;
    }

}


/* ================= JAVASCRIPT EFFECTS ================= */

.reveal-element {
    opacity: 0;
    transform: translateY(25px);
    transition:
        opacity 0.7s ease,
        transform 0.7s ease;
}

.reveal-element.show {
    opacity: 1;
    transform: translateY(0);
}


.navbar-scrolled {
    box-shadow:
        0 8px 25px rgba(80, 34, 36, 0.08);
}


.nav-links a.active-link {
    color: var(--orange);
}

/* =====================================================
   OUR REACH — MAP
   ===================================================== */

.reach-section {
    background: var(--charcoal);
    color: white;
    padding: 110px 0;
    overflow: hidden;
}


.reach-container {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 70px;
    align-items: center;
}


.reach-heading {
    position: relative;
    z-index: 2;
}


.reach-heading .eyebrow {
    color: var(--yellow);
}


.reach-heading h2 {
    color: var(--cream);
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(42px, 5vw, 62px);
    line-height: 1;
    margin-bottom: 25px;
}


.reach-heading > p:last-child {
    color: #d8cfca;
    max-width: 430px;
    font-size: 17px;
}


/* ================= MAP AREA ================= */

.reach-map-area {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}


.india-map {
    min-height: 500px;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(244, 185, 66, 0.12),
            transparent 45%
        ),
        #1d1d1d;

    border: 1px solid rgba(255,255,255,0.12);

    border-radius: 30px;

    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;
}


.india-map::before {
    content: "NARISAKTI / REACH";

    position: absolute;

    top: 25px;
    left: 30px;

    color: rgba(255,255,255,0.4);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 3px;
}


.india-svg {
    width: min(370px, 75%);
    height: auto;

    filter:
        drop-shadow(
            0 20px 30px rgba(0,0,0,0.25)
        );

    transition: transform 0.4s ease;
}




/* ================= MAP LABEL ================= */

.map-label {
    position: absolute;

    top: 28px;
    right: 28px;

    display: flex;

    align-items: center;

    gap: 10px;

    color: white;
}


.map-label strong {
    display: block;

    font-size: 10px;

    letter-spacing: 1.5px;
}


.map-label small {
    display: block;

    color: #aaa;

    font-size: 9px;
}


.map-dot {
    width: auto;
    height: auto;

    display: flex;
    align-items: center;
    justify-content: center;

    background: transparent;

    border-radius: 0;
    box-shadow: none;

    font-size: 18px;
    line-height: 1;
}


/* ================= WEST BENGAL MARKER ================= */

.west-bengal-marker {
    position: absolute;

    right: 17%;
    top: 49%;

    display: flex;

    align-items: center;

    gap: 10px;

    color: var(--maroon);

    background: white;

    padding: 9px 13px;

    border-radius: 12px;

    box-shadow:
        0 10px 25px rgba(0,0,0,0.2);

    transform: rotate(-2deg);
}


.west-bengal-marker > span {
    width: 10px;
    height: 10px;

    border-radius: 50%;

    background: var(--orange);

    box-shadow:
        0 0 0 5px rgba(233,101,36,0.15);
}


.west-bengal-marker strong {
    display: block;

    font-size: 9px;

    letter-spacing: 1px;
}


.west-bengal-marker small {
    display: block;

    font-size: 9px;

    color: var(--orange);

    font-weight: 800;
}


/* ================= DISTRICTS ================= */

.district-area {
    padding-top: 0;
    margin-top: -25px;
}


.district-title {
    color: var(--yellow);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2px;

    margin-bottom: 16px;
}


.district-grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 9px;
}


.district-grid span {
    padding: 14px 10px;

    border: 1px solid rgba(255,255,255,0.16);

    border-radius: 10px;

    color: #eee7df;

    font-size: 12px;

    text-align: center;

    transition:
        background 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease;
}


.district-grid span:hover {
    background: var(--yellow);

    color: var(--charcoal);

    transform: translateY(-3px);

    border-color: var(--yellow);
}


/* ================= MAP RESPONSIVE ================= */

@media (max-width: 900px) {

    .reach-container {
        grid-template-columns: 1fr;

        gap: 50px;
    }


    .reach-heading {
        text-align: center;
    }


    .reach-heading > p:last-child {
        margin-left: auto;
        margin-right: auto;
    }


    .india-map {
        min-height: 470px;
    }

}


@media (max-width: 600px) {

    .reach-section {
        padding: 75px 0;
    }


    .india-map {
        min-height: 390px;

        border-radius: 22px;
    }


    .india-svg {
        width: 270px;
    }


    .map-label {
        top: 18px;
        right: 18px;
    }


    .map-label strong {
        font-size: 8px;
    }


    .map-label small {
        font-size: 8px;
    }


    .west-bengal-marker {
        right: 8%;
        top: 49%;

        padding: 7px 9px;
    }


    .west-bengal-marker strong {
        font-size: 8px;
    }


    .west-bengal-marker small {
        font-size: 8px;
    }


    .district-grid {
        grid-template-columns: 1fr 1fr;
    }

}

/* =====================================================
   NARISAKTI — NEW BOLD COLOUR SYSTEM
   ===================================================== */


/* ================= HERO ================= */

.hero {
    background: #FAECC3;
    color: var(--maroon);
}


.hero h1 {
    color: var(--maroon);
}


.hero .eyebrow {
    color: var(--bright-yellow);
}


.hero-intro {
    color: var(--maroon);
}

/* Hero image */

.hero-image-placeholder {
    background:
        linear-gradient(
            145deg,
            #D68B32,
            #AE4700
        );

    color: var(--maroon);

    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.28);
}


.hero-image-placeholder::before {
    background: rgba(250, 184, 0, 0.28);
}


.hero-image-placeholder::after {
    background: rgba(64, 21, 25, 0.20);
}


/* Hero badge */

.hero-badge {
    background: var(--yellow);
    color: var(--charcoal);

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.25);
}


/* Orange hero circle */

.hero-accent {
    background: var(--orange);
    color: white;
}


/* Hero buttons */

.button-primary {
    background: var(--yellow);
    color: var(--charcoal);
    border-color: var(--yellow);
}


.button-primary:hover {
    background: var(--bright-yellow);
    border-color: var(--bright-yellow);
    color: var(--charcoal);
}


.button-outline {
    border-color: var(--yellow);
    color: var(--yellow);
}


.button-outline:hover {
    background: var(--yellow);
    color: var(--charcoal);
    border-color: var(--yellow);
}


/* ================= ABOUT ================= */

.about-section {
    background: var(--charcoal);
    color: var(--cream);
}


.about-section::before {
    background: var(--yellow);
}


.about-section::after {
    border-color: var(--yellow);
}


.about-content .eyebrow {
    color: var(--yellow);
}


.about-content h2 {
    color: var(--cream);
}


.about-content p {
    color: #E5DCD3;
}


.about-content .large-text {
    color: #FFF7E8;
}


.about-content a {
    color: var(--yellow);
}


.about-content a:hover {
    color: var(--bright-yellow);
}


/* ================= BELIEF ================= */

.belief-section {
    background: var(--yellow);
    color: var(--charcoal);
}


.belief-container h2 {
    color: var(--maroon);
}


.belief-quote {
    border-left-color: var(--maroon);
}


.belief-quote p {
    color: var(--maroon);
}


/* ================= IMPACT ================= */

.impact-section {
    background: var(--charcoal);
    color: var(--cream);
}


.impact-grid {
    border-top-color: rgba(255,255,255,0.18);
    border-bottom-color: rgba(255,255,255,0.18);
}


.impact-item {
    border-right-color: rgba(255,255,255,0.18);
}


.impact-item:hover {
    background: var(--maroon);
}


.impact-item strong {
    color: var(--yellow);
}


.impact-item span {
    color: #FFF7E8;
}


/* ================= OUR WORK ================= */

.work-section {
    background: var(--cream);
}


.work-card {
    background: var(--ochre);
    border-color: var(--ochre);
}


.work-card::before {
    background: var(--yellow);
}


.work-card:hover {
    background: var(--yellow);

    box-shadow:
        0 20px 40px rgba(64, 21, 25, 0.15);
}


.work-number {
    background: var(--maroon);
}


.work-card h3 {
    color: var(--maroon);
}


/* ================= OUR REACH / MAP ================= */

.reach-section {
    background: var(--charcoal);
}


.reach-heading .eyebrow {
    color: var(--yellow);
}


.reach-heading h2 {
    color: var(--yellow);
}


.reach-heading > p:last-child {
    color: #E4DCD4;
}


.india-map {
    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(250, 184, 0, 0.16),
            transparent 45%
        ),
        var(--dark-charcoal);

    border-color: rgba(250, 184, 0, 0.18);
}


.india-svg path {
    fill: var(--yellow);
}


.west-bengal-marker {
    background: var(--cream);
    color: var(--maroon);
}


.west-bengal-marker > span {
    background: var(--orange);
}


.west-bengal-marker small {
    color: var(--orange);
}


.district-title {
    color: var(--yellow);
}


.district-grid span {
    border-color: rgba(250, 184, 0, 0.30);
    color: var(--cream);
}


.district-grid span:hover {
    background: var(--yellow);
    color: var(--charcoal);
    border-color: var(--yellow);
}


/* ================= STORIES ================= */

.stories-section {
    background: var(--maroon);
}


.stories-section .section-heading h2 {
    color: var(--yellow);
}


.stories-section .section-heading p {
    color: #F2DFD2;
}


.story-feature {
    background: var(--cream);
}


.story-label {
    color: var(--orange);
}


.story-content h3 {
    color: var(--maroon);
}


.story-content p {
    color: var(--text);
}


/* ================= BUSINESSES ================= */

.business-section {
    background: var(--cream-dark);
}


.business-card {
    background: var(--white);
    border-color: var(--border);
}


.business-card:hover {
    border-color: var(--yellow);

    box-shadow:
        0 18px 35px rgba(64, 21, 25, 0.12);
}


.business-image {
    background: var(--ochre);
    color: var(--maroon);
}


.business-card h3 {
    color: var(--maroon);
}


/* ================= EVENTS ================= */

.events-section {
    background: var(--charcoal);
}


.events-section .section-heading h2 {
    color: var(--yellow);
}


.events-section .section-heading p {
    color: #E7DDD4;
}


.event-card {
    background: var(--maroon);
    border-color: rgba(250, 184, 0, 0.20);
}


.event-card:hover {
    border-color: var(--yellow);
    background: var(--deep-red);
}


.event-card > span {
    color: var(--yellow);
}


.event-card h3 {
    color: var(--cream);
}


/* ================= GET INVOLVED ================= */

.involved-section {
    background: var(--deep-red);
}


.involved-content .eyebrow {
    color: var(--yellow);
}


.involved-content h2 {
    color: var(--cream);
}


.involved-content p {
    color: #F3DDD4;
}


.button-light {
    background: var(--yellow);
    color: var(--charcoal);
    border-color: var(--yellow);
}


.button-light:hover {
    background: var(--bright-yellow);
    border-color: var(--bright-yellow);
    color: var(--charcoal);
}


/* ================= DONATE ================= */

.donate-section {
    background: var(--yellow);
    color: var(--charcoal);
}


.donate-section::before {
    border-color: rgba(64, 21, 25, 0.18);
}


.donate-section::after {
    background: rgba(64, 21, 25, 0.10);
}


.donate-content .eyebrow {
    color: var(--orange);
}


.donate-content h2 {
    color: var(--maroon);
}


.donate-content > p:last-child {
    color: var(--charcoal);
}


.donate-circle {
    background: var(--maroon);
    color: var(--yellow);
}


.button-donate {
    background: var(--charcoal);
    color: var(--yellow);
    border-color: var(--charcoal);
}


.button-donate:hover {
    background: var(--maroon);
    border-color: var(--maroon);
    color: var(--yellow);
}


.donate-action small {
    color: var(--charcoal);
}


/* ================= GALLERY ================= */

.gallery-section {
    background: var(--charcoal);
}


.gallery-section .section-heading h2 {
    color: var(--yellow);
}


.gallery-section .section-heading p {
    color: #E5DCD3;
}


.gallery-item {
    background: var(--ochre);
    color: var(--maroon);
}


.gallery-item:hover {
    box-shadow:
        0 15px 30px rgba(0, 0, 0, 0.25);
}


/* ================= CONTACT ================= */

.contact-section {
    background: var(--cream);
}


.contact-intro h2 {
    color: var(--maroon);
}


.contact-intro > p:last-child {
    color: var(--text);
}


.contact-form label {
    color: var(--maroon);
}


.contact-form input,
.contact-form textarea {
    background: white;
    border-color: var(--border);
}


.contact-form input:focus,
.contact-form textarea:focus {
    border-color: var(--orange);

    box-shadow:
        0 0 0 3px rgba(174, 71, 0, 0.10);
}


/* ================= FOOTER ================= */

footer {
    background: var(--charcoal);
}


.footer-container h3 {
    color: var(--yellow);
}


.footer-container p {
    color: #D9D0C8;
}


.footer-links a {
    color: #EEE5DC;
}


.footer-links a:hover {
    color: var(--yellow);
}


.copyright {
    border-top-color: rgba(255,255,255,0.15);
    color: #BDB3AB;
}


/* ================= NAVBAR ================= */

.navbar {
    background: var(--cream);

    border-bottom-color: var(--border);
}


.nav-links a {
    color: var(--charcoal);
}


.nav-links a:hover,
.nav-links a.active-link {
    color: var(--orange);
}


.nav-links .nav-donate {
    background: var(--yellow);
    color: var(--charcoal);
}


.nav-links .nav-donate:hover {
    background: var(--orange);
    color: white;
}


.menu-button {
    color: var(--maroon);
}


/* ================= REVEAL EFFECT ================= */

.reveal-element {
    opacity: 0;
    transform: translateY(25px);

    transition:
        opacity 0.7s ease,
        transform 0.7s ease;
}


.reveal-element.show {
    opacity: 1;
    transform: translateY(0);
}


/* ================= NAVBAR SCROLL ================= */

.navbar-scrolled {
    box-shadow:
        0 8px 25px rgba(64, 21, 25, 0.15);
}

/* =====================================================
   NARISAKTI — PREMIUM COLOUR PALETTE
   Deep Wine • Antique Gold • Ivory
   ===================================================== */

:root {

    /* Main brand colours */
    --maroon: #5A2028;
    --dark-maroon: #321016;

    --gold: #C9972B;
    --bright-gold: #E0B84A;

    /* Dark sections */
    --charcoal: #241316;
    --dark-charcoal: #1A0D0F;

    /* Light sections */
    --cream: #F6F0E6;
    --cream-dark: #EDE3D3;

    --white: #FFFFFF;

    /* Text */
    --text: #292526;
    --light-text: #F8F2E8;

    --border: #D8CDBD;
}


/* =====================================================
   NAVBAR
   ===================================================== */

.navbar {
    background: var(--cream);
    border-bottom-color: var(--border);
}


.nav-links a {
    color: var(--dark-maroon);
}


.nav-links a:hover,
.nav-links a.active-link {
    color: var(--gold);
}


.nav-links .nav-donate {
    background: var(--maroon);
    color: var(--cream);
}


.nav-links .nav-donate:hover {
    background: var(--gold);
    color: var(--dark-maroon);
}


.menu-button {
    color: var(--maroon);
}


/* =====================================================
   HERO
   ===================================================== */

.hero {
    background: #FAECC3;
    color: var(--maroon);
}


.hero h1 {
    color: var(--maroon);
}


.hero .eyebrow {
    color: var(--gold);
}


.hero-intro {
    color: var(--maroon);
}


/* Hero image */

.hero-image-placeholder {
    background:
        linear-gradient(
            145deg,
            #D8A646,
            #B77920
        );

    color: var(--dark-maroon);

    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.30);
}


.hero-image-placeholder::before {
    background: rgba(255, 255, 255, 0.18);
}


.hero-image-placeholder::after {
    background: rgba(90, 32, 40, 0.16);
}


/* Hero badge */

.hero-badge {
    background: var(--gold);
    color: var(--dark-maroon);

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.28);
}


/* Hero accent */

.hero-accent {
    background: var(--maroon);
    color: var(--bright-gold);
}


/* Hero buttons */

.button-primary {
    background: var(--gold);
    color: var(--dark-maroon);
    border-color: var(--gold);
}


.button-primary:hover {
    background: var(--bright-gold);
    border-color: var(--bright-gold);
    color: var(--dark-maroon);
}


.button-outline {
    border-color: var(--gold);
    color: var(--gold);
}


.button-outline:hover {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--dark-maroon);
}


/* =====================================================
   ABOUT
   ===================================================== */

.about-section {
    background: var(--cream);
    color: var(--text);
}


.about-section::before {
    background: var(--gold);
    opacity: 0.08;
}


.about-section::after {
    border-color: var(--gold);
    opacity: 0.25;
}


.about-content .eyebrow {
    color: var(--gold);
}


.about-content h2 {
    color: var(--maroon);
}


.about-content p {
    color: var(--text);
}


.about-content .large-text {
    color: var(--dark-maroon);
}


.about-content a {
    color: var(--maroon);
}


.about-content a:hover {
    color: var(--gold);
}


/* About image */

.photo-placeholder {
    background: #D8B06A;
    color: var(--dark-maroon);
    border-color: transparent;
}


/* =====================================================
   BELIEF
   ===================================================== */

.belief-section {
    background: var(--gold);
    color: var(--dark-maroon);
}


.belief-container h2 {
    color: var(--dark-maroon);
}


.belief-quote {
    border-left-color: var(--dark-maroon);
}


.belief-quote p {
    color: var(--dark-maroon);
}


/* =====================================================
   IMPACT
   ===================================================== */

.impact-section {
    background: var(--charcoal);
    color: var(--ivory);
}

.impact-section h2 {
    color: var(--ivory);
}

.impact-item strong {
    color: var(--antique-gold);
}

.impact-item span {
    color: var(--ivory);
}


.impact-grid {
    border-top-color: rgba(248, 242, 232, 0.18);
    border-bottom-color: rgba(248, 242, 232, 0.18);
}


.impact-item {
    border-right-color: rgba(248, 242, 232, 0.18);
}


.impact-item:hover {
    background: var(--maroon);
}


.impact-item strong {
    color: var(--bright-gold);
}


.impact-item span {
    color: var(--light-text);
}


/* =====================================================
   OUR WORK
   ===================================================== */

.work-section {
    background: var(--cream);
}


.work-card {
    background: var(--cream-dark);
    border-color: var(--border);
}


.work-card::before {
    background: var(--gold);
    opacity: 0.12;
}


.work-card:hover {
    background: #E3C88D;
    border-color: var(--gold);

    box-shadow:
        0 20px 40px rgba(50, 16, 22, 0.12);
}


.work-number {
    background: var(--maroon);
    color: var(--bright-gold);
}


.work-card h3 {
    color: var(--maroon);
}


/* =====================================================
   OUR REACH / MAP
   ===================================================== */

.reach-section {
    background: var(--charcoal);
    color: var(--cream);
}


.reach-heading .eyebrow {
    color: var(--gold);
}


.reach-heading h2 {
    color: var(--bright-gold);
}


.reach-heading > p:last-child {
    color: var(--light-text);
}


.india-map {
    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(201, 151, 43, 0.14),
            transparent 45%
        ),
        var(--dark-charcoal);

    border-color:
        rgba(201, 151, 43, 0.20);
}


.india-svg path {
    fill: var(--gold);
}


.west-bengal-marker {
    background: var(--cream);
    color: var(--maroon);
}


.west-bengal-marker > span {
    background: var(--gold);
}


.west-bengal-marker small {
    color: var(--maroon);
}


.district-title {
    color: var(--gold);
}


.district-grid span {
    border-color:
        rgba(201, 151, 43, 0.30);

    color: var(--light-text);
}


.district-grid span:hover {
    background: var(--gold);
    color: var(--dark-maroon);
    border-color: var(--gold);
}


/* =====================================================
   STORIES
   ===================================================== */

.stories-section {
    background: var(--cream-dark);
}


.stories-section .section-heading h2 {
    color: var(--maroon);
}


.stories-section .section-heading p {
    color: var(--text);
}


.story-feature {
    background: var(--cream);
}


.story-label {
    color: var(--gold);
}


.story-content h3 {
    color: var(--maroon);
}


.story-content p {
    color: var(--text);
}


/* =====================================================
   WOMEN-LED BUSINESSES
   ===================================================== */

.business-section {
    background: var(--cream);
}


.business-card {
    background: var(--cream-dark);
    border-color: var(--border);
}


.business-card:hover {
    border-color: var(--gold);

    box-shadow:
        0 18px 35px rgba(50, 16, 22, 0.10);
}


.business-image {
    background: #D8B06A;
    color: var(--dark-maroon);
}


.business-card h3 {
    color: var(--maroon);
}


/* =====================================================
   EVENTS
   ===================================================== */

.events-section {
    background: var(--charcoal);
}


.events-section .section-heading h2 {
    color: var(--bright-gold);
}


.events-section .section-heading p {
    color: var(--light-text);
}


.event-card {
    background: var(--maroon);

    border-color:
        rgba(201, 151, 43, 0.20);
}


.event-card:hover {
    background: #6B2932;
    border-color: var(--gold);
}


.event-card > span {
    color: var(--gold);
}


.event-card h3 {
    color: var(--cream);
}


/* =====================================================
   GET INVOLVED
   ===================================================== */

.involved-section {
    background: var(--maroon);
}


.involved-content .eyebrow {
    color: var(--gold);
}


.involved-content h2 {
    color: var(--cream);
}


.involved-content p {
    color: var(--light-text);
}


.button-light {
    background: var(--gold);
    color: var(--dark-maroon);
    border-color: var(--gold);
}


.button-light:hover {
    background: var(--bright-gold);
    border-color: var(--bright-gold);
    color: var(--dark-maroon);
}


/* =====================================================
   DONATE
   ===================================================== */

.donate-section {
    background: var(--gold);
    color: var(--dark-maroon);
}


.donate-section::before {
    border-color:
        rgba(50, 16, 22, 0.15);
}


.donate-section::after {
    background:
        rgba(90, 32, 40, 0.08);
}


.donate-content .eyebrow {
    color: var(--maroon);
}


.donate-content h2 {
    color: var(--dark-maroon);
}


.donate-content > p:last-child {
    color: var(--dark-maroon);
}


.donate-circle {
    background: var(--maroon);
    color: var(--gold);
}


.button-donate {
    background: var(--dark-maroon);
    color: var(--gold);
    border-color: var(--dark-maroon);
}


.button-donate:hover {
    background: var(--maroon);
    border-color: var(--maroon);
    color: var(--bright-gold);
}


.donate-action small {
    color: var(--dark-maroon);
}


/* =====================================================
   GALLERY
   ===================================================== */

.gallery-section {
    background: var(--charcoal);
}


.gallery-section .section-heading h2 {
    color: var(--bright-gold);
}


.gallery-section .section-heading p {
    color: var(--light-text);
}


.gallery-item {
    background: #D8B06A;
    color: var(--dark-maroon);
}


.gallery-item:hover {
    box-shadow:
        0 15px 30px rgba(0, 0, 0, 0.25);
}


/* =====================================================
   CONTACT
   ===================================================== */

.contact-section {
    background: var(--cream);
}


.contact-intro h2 {
    color: var(--maroon);
}


.contact-intro > p:last-child {
    color: var(--text);
}


.contact-form label {
    color: var(--maroon);
}


.contact-form input,
.contact-form textarea {
    background: var(--white);
    border-color: var(--border);
}


.contact-form input:focus,
.contact-form textarea:focus {
    border-color: var(--gold);

    box-shadow:
        0 0 0 3px rgba(201, 151, 43, 0.12);
}


/* =====================================================
   FOOTER
   ===================================================== */

footer {
    background: var(--charcoal);
}


.footer-container h3 {
    color: var(--gold);
}


.footer-container p {
    color: var(--light-text);
}


.footer-links a {
    color: var(--cream);
}


.footer-links a:hover {
    color: var(--gold);
}


.copyright {
    border-top-color:
        rgba(248, 242, 232, 0.15);

    color: #BDB2A7;
}


/* =====================================================
   NAVBAR SCROLL
   ===================================================== */

.navbar-scrolled {
    box-shadow:
        0 8px 25px rgba(36, 19, 22, 0.15);
}



/* ===== FINAL IMPACT COLOUR FIX ===== */

.impact-section {
    background: #321016 !important;
}

.impact-section .section-heading h2 {
    color: #F6F0E6 !important;
}

.impact-section .eyebrow {
    color: #C9972B !important;
}

.impact-section .impact-item strong {
    color: #E0B84A !important;
}

.impact-section .impact-item span {
    color: #F6F0E6 !important;
}




/* =====================================================
   NARISAKTI PREMIUM DESIGN SYSTEM
   ===================================================== */

:root {
    --wine: #5A1725;
    --wine-dark: #3B0D18;
    --wine-light: #762638;

    --gold: #C9A227;
    --gold-light: #E2C45A;

    --ivory: #F8F3E7;
    --cream: #EFE5D2;

    --charcoal: #211B1D;
    --text-dark: #30282A;
    --text-light: #F8F3E7;

    --white: #FFFFFF;
}




/* =====================================================
   GLOBAL TYPOGRAPHY
   ===================================================== */

body {
    font-family: "DM Sans", Arial, sans-serif;
    background: var(--ivory);
    color: var(--text-dark);
}

h1,
h2,
h3,
h4 {
    font-family: "Playfair Display", Georgia, serif;
}

::selection {
    background: var(--gold);
    color: var(--wine-dark);
}

/* =====================================================
   NARISAKTI — WEST BENGAL MAP
   ===================================================== */

.wb-map { 
    position: relative; 
    width: 55%; 
    height: 100%; 
    margin-left: auto;
    margin-top: -50px;
 
    display: flex; 
    justify-content: center; 
    align-items: flex-start; 
 
    padding: 0 20px; 
    box-sizing: border-box; 
}

.west-bengal-map {
    width: 75%;
    max-width: 430px;
    height: auto;

    display: block;
    object-fit: contain;

    margin: 0 auto;
}

/* =====================================================
   DISTRICT PINS
   ===================================================== */

.district-pin {
    position: absolute;

    width: 18px;
    height: 18px;

    padding: 0;

    border: 3px solid var(--gold);
    border-radius: 50%;

    background: var(--wine);

    cursor: pointer;

    transform: translate(-50%, -50%);

    z-index: 10;

    box-shadow:
        0 0 0 5px rgba(201, 162, 39, 0.20);

    animation: narsaktiMapPulse 2s infinite;
}


/* =====================================================
   PIN POSITIONS
   ===================================================== */

.pin-kalimpong {
    top: 12%;
    left: 62%;
}

.pin-alipurduar {
    top: 19%;
    left: 72%;
}

.pin-jalpaiguri {
    top: 25%;
    left: 63%;
}

.pin-north24 {
    top: 55%;
    left: 57%;
}

.pin-kolkata {
    top: 62%;
    left: 55%;
}

.pin-south24 {
    top: 70%;
    left: 55%;
}

.pin-purulia {
    top: 62%;
    left: 35%;
}

.pin-jhargram {
    top: 68%;
    left: 44%;
}

.pin-medinipur {
    top: 64%;
    left: 49%;
}


/* =====================================================
   PIN PULSE
   ===================================================== */

@keyframes narsaktiMapPulse {

    0% {
        box-shadow:
            0 0 0 0 rgba(201, 162, 39, 0.45);
    }

    70% {
        box-shadow:
            0 0 0 9px rgba(201, 162, 39, 0);
    }

    100% {
        box-shadow:
            0 0 0 0 rgba(201, 162, 39, 0);
    }

}


/* =====================================================
   MOBILE
   ===================================================== */

@media (max-width: 600px) {

    .wb-map {
        width: 100%;
        margin: 20px auto;
    }

    .district-pin {
        width: 14px;
        height: 14px;
        border-width: 2px;
    }

}

/* =====================================================
   NARISAKTI WEST BENGAL MAP
   ===================================================== */

.wb-map {
    position: relative;
    width: 100%;
    max-width: 400px;
    margin: 25px auto 0;

    /* Keep the map completely still */
    transform: none;
    transition: none;
}



/* KEEP INFORMATION CARD STRAIGHT */

.district-info {
    transform: none !important;
    rotate: none !important;
}

.west-bengal-map {
    display: block;
    width: 100%;
    height: auto;
}


/* =====================================================
   MAP LOCATION PINS
   ===================================================== */

.district-pin {
    position: absolute;

    border: none;
    background: transparent;

    padding: 0;

    font-size: 22px;
    line-height: 1;

    cursor: pointer;

    transform: translate(-50%, -100%);

    z-index: 20;

    /* IMPORTANT — no dancing */
    animation: none;
    transition: transform 0.2s ease;
}

.district-pin:hover {
    transform:
        translate(-50%, -100%)
        scale(1.12);
}

.district-pin.active {
    transform:
        translate(-50%, -100%)
        scale(1.18);
}



/* =====================================================
   PIN POSITIONS
   ===================================================== */

.pin-kalimpong {
    top: 4%;
    left: 58%;
}

.pin-alipurduar {
    top: 10%;
    left: 84%;
}

.pin-jalpaiguri {
    top: 10%;
    left: 66%;
}

.pin-north24 {
    top: 77%;
    left: 82%;
}

.pin-kolkata {
    top: 82%;
    left: 70%;
}

.pin-south24 {
    top: 88%;
    left: 78%;
}

.pin-purulia {
    top: 73%;
    left: 13%;
}

.pin-jhargram {
    top: 85%;
    left: 32%;
}

.pin-medinipur {
    top: 79%;
    left: 50%;
}

/* =====================================================
   MOBILE
   ===================================================== */

@media (max-width: 600px) {

    .wb-map {
        width: 90%;
        max-width: 330px;
    }

    .district-pin {
        font-size: 20px;
    }

}

/* =====================================================
   DISTRICT INFORMATION CARD
   ===================================================== */

.district-info {
    position: relative;

    width: 100%;
    max-width: 360px;

    margin: 20px auto 0;

    padding: 24px;

    background: var(--wine-dark);
    color: var(--ivory);

    border-left: 4px solid var(--gold);

    display: none;

    box-sizing: border-box;
}

.district-info.show {
    display: block;
}

.district-close {
    position: absolute;

    top: 8px;
    right: 12px;

    border: none;
    background: transparent;

    color: var(--ivory);

    font-size: 24px;

    cursor: pointer;
}

.district-info-label {
    margin: 0 0 8px;

    color: var(--gold);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.12em;
}

.district-info h3 {
    margin: 0 0 10px;

    color: var(--ivory);

    font-family: "Playfair Display", serif;

    font-size: 28px;
}

.district-info > p:not(.district-info-label) {
    font-size: 13px;

    line-height: 1.6;
}

.district-stats {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 8px;

    margin-top: 20px;
}

.district-stats div {
    padding: 12px 6px;

    background: rgba(255,255,255,0.08);

    text-align: center;
}

.district-stats strong {
    display: block;

    color: var(--gold);

    font-size: 20px;
}

.district-stats span {
    display: block;

    margin-top: 4px;

    font-size: 9px;
}

@media (max-width: 600px) {

    .district-info {
        max-width: 100%;
    }

}

/* =====================================================
   FINAL DISTRICT PIN POSITIONS
   ===================================================== */

.pin-kalimpong {
    top: 9%;
    left: 57%;
}

.pin-jalpaiguri {
    top: 14%;
    left: 67%;
}

.pin-alipurduar {
    top: 13%;
    left: 81%;
}

.pin-north24 {
    top: 75%;
    left: 79%;
}

.pin-kolkata {
    top: 80%;
    left: 70%;
}

.pin-south24 {
    top: 87%;
    left: 76%;
}

.pin-purulia {
    top: 71%;
    left: 17%;
}

.pin-jhargram {
    top: 83%;
    left: 31%;
}

.pin-medinipur {
    top: 78%;
    left: 49%;
}
/* =====================================================
   SPACING FIX — KEEP EXISTING DESIGN
   ===================================================== */

.reach-section {
    padding-top: 55px !important;
    padding-bottom: 55px !important;
}

.reach-map-layout {
    min-height: auto !important;
    height: auto !important;
}

.stories-section {
    padding-top: 70px !important;
    padding-bottom: 70px !important;
}

.business-section {
    padding-top: 70px !important;
    padding-bottom: 70px !important;
}

.events-section {
    padding-top: 70px !important;
    padding-bottom: 70px !important;
}

.involved-section {
    padding-top: 70px !important;
    padding-bottom: 70px !important;
}

.donate-section {
    padding-top: 70px !important;
    padding-bottom: 70px !important;
}

.gallery-section {
    padding-top: 70px !important;
    padding-bottom: 70px !important;
}

.contact-section {
    padding-top: 70px !important;
    padding-bottom: 70px !important;
}

/* =====================================================
   STORIES — TWO COLUMN LAYOUT
   ===================================================== */

.stories-section .section-container {
    display: grid;
    grid-template-columns: 0.75fr 1.25fr;
    gap: 60px;
    align-items: center;
}

.stories-section .section-heading {
    margin-bottom: 0;
}

.stories-section .story-feature {
    min-height: 470px;
    margin: 0;
}

/* FINAL MAP POSITION FIX */

.reach-map-area .wb-map {
    margin-top: 10px !important;
    transform: rotate(-3deg) !important;


}

.reach-map-area .district-list {
    transform: translateY(-10px);
}

/* District description */
.district-area > p {
    font-size: 13px;
    color: #d8cfca;
    margin-top: 8px;
}
/* Selected district */
.district-grid span.active {
    background: var(--yellow);
    color: var(--charcoal);
    border-color: var(--yellow);
}

/* ================= SDG SECTION ================= */

.sdg-section {
    max-width: 1100px;
    margin: 25px auto;;
    padding: 70px 60px;

    display: flex;
    align-items: center;
    gap: 55px;

    background: var(--maroon);
    border-radius: 24px;

    box-sizing: border-box;
}


/* SDG NUMBER */

.sdg-number {
    width: 130px;
    height: 130px;

    flex-shrink: 0;

    border-radius: 50%;

    background: var(--yellow);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    color: var(--maroon);
}

.sdg-number span {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2px;
}

.sdg-number strong {
    font-size: 48px;
    line-height: 1;
    font-weight: 800;
}


/* CONTENT */

.sdg-content {
    max-width: 700px;
}

.sdg-content .section-eyebrow {
    color: var(--yellow);

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 2px;

    margin-bottom: 12px;
}

.sdg-content h2 {
    font-family: "Playfair Display", Georgia, serif;

    color: var(--cream);

    font-size: 48px;
    line-height: 1.1;

    margin: 0 0 18px;
}

.sdg-content > p:last-child {
    color: var(--cream);

    font-size: 16px;
    line-height: 1.7;

    margin: 0;
}


/* MOBILE */

@media (max-width: 700px) {

    .sdg-section {
        margin: 0 20px;
        padding: 45px 30px;

        flex-direction: column;
        text-align: center;

        gap: 30px;
    }

    .sdg-content h2 {
        font-size: 38px;
    }

}

/* ===== FINAL STORIES FIX ===== */

.stories-section {
    background: #d3a63a !important;
    padding: 70px 0 90px !important;
}

/* Keep heading ABOVE the box */
.stories-section .section-container {
    display: block !important;
}

/* Heading */
.stories-section .left-heading {
    display: block !important;
    width: 100% !important;
    margin: 0 0 45px 0 !important;
    text-align: left !important;
}

.stories-section .left-heading h2 {
    font-family: "Playfair Display", Georgia, serif !important;
    font-size: 56px !important;
    line-height: 1.1 !important;
    color: var(--maroon) !important;
    margin: 0 !important;
    white-space: nowrap !important;
}

/* Story box BELOW heading */
.stories-section .story-feature {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;

    width: 100% !important;
    max-width: 1000px !important;

    min-height: 420px !important;
    height: 420px !important;

    margin: 0 auto !important;

    background: #f4ead6 !important;

    border-radius: 24px !important;
    overflow: hidden !important;
}

/* Photo side */
.stories-section .story-image {
    width: 100% !important;
    height: 420px !important;
    min-height: 420px !important;

    background: #dfb35f !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Story text side */
.stories-section .story-content {
    width: auto !important;
    height: 100% !important;

    padding: 45px !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

/* ===== MOBILE ===== */

@media (max-width: 768px) {

    .stories-section .left-heading h2 {
        font-size: 38px !important;
        white-space: normal !important;
    }

    .stories-section .story-feature {
        grid-template-columns: 1fr !important;
        height: auto !important;
    }

    .stories-section .story-image {
        height: 300px !important;
        min-height: 300px !important;
    }

    .stories-section .story-content {
        height: auto !important;
        padding: 30px !important;
    }
}

/* FINAL 2 SMALL FIXES */

.stories-section {
    background: #e8dcc4 !important;
}

/* Make Read Her Story visible */
.stories-section .text-link {
    color: var(--maroon) !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
}

.stories-section .story-label {
    color: var(--orange) !important;
}

html {
    scroll-behavior: smooth;
}

/* =====================================================
   DISTRICT BOXES + CLICKED DISTRICT DETAILS
   ===================================================== */

/* Make the district buttons look like the existing design */
.district-select {
    width: 100%;
    padding: 14px 10px;

    border: 1px solid rgba(250, 184, 0, 0.30);
    border-radius: 10px;

    background: transparent;
    color: var(--cream);

    font-family: inherit;
    font-size: 12px;
    font-weight: 600;

    text-align: center;
    cursor: pointer;

    transition: 0.25s ease;
}

.district-select:hover {
    background: var(--yellow);
    color: var(--charcoal);
    border-color: var(--yellow);
}

/* Selected district */
.district-select.active {
    background: var(--yellow);
    color: var(--charcoal);
    border-color: var(--yellow);
}


/* =====================================================
   DISTRICT DETAILS BOX
   ===================================================== */

.india-map {
    position: relative;
}

/* Box stays hidden until a district is clicked */
.district-info {
    position: absolute;

    top: 85px;
    left: 25px;

    width: 245px;
    min-height: 245px;

    padding: 25px;

    background: var(--maroon);
    color: var(--cream);

    border: 1px solid rgba(250, 184, 0, 0.35);
    border-radius: 16px;

    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);

    display: none;

    z-index: 50;
    box-sizing: border-box;
}

.district-info.show {
    display: block;
}

.district-close {
    position: absolute;

    top: 8px;
    right: 12px;

    border: none;
    background: transparent;

    color: var(--cream);

    font-size: 22px;
    cursor: pointer;
}

.district-info-label {
    margin: 0 0 8px;

    color: var(--yellow);

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.district-info h3 {
    margin: 0 0 10px;

    color: var(--cream);

    font-family: "Playfair Display", Georgia, serif;
    font-size: 27px;
    line-height: 1.1;
}

.district-info > p:not(.district-info-label) {
    color: #e7d9c7;

    font-size: 12px;
    line-height: 1.55;
}

.district-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 6px;
    margin-top: 18px;
}

.district-stats div {
    padding: 9px 4px;

    background: rgba(255, 255, 255, 0.08);

    text-align: center;
    border-radius: 6px;
}

.district-stats strong {
    display: block;

    color: var(--yellow);

    font-size: 18px;
    line-height: 1.1;
}

.district-stats span {
    display: block;

    margin-top: 4px;

    color: var(--cream);

    font-size: 8px;
    line-height: 1.2;
}


/* Keep the map straight */
.reach-map-area .wb-map {
    transform: none !important;
}


/* MOBILE */
@media (max-width: 900px) {

    .district-info {
        position: relative;

        top: auto;
        left: auto;

        width: 100%;
        max-width: 360px;

        margin: 20px auto;
    }

}

@media (max-width: 600px) {

    .district-info {
        max-width: 100%;
    }

}

/* ===== DISTRICT DETAILS BOX ===== */

.india-map {
    position: relative;
}

.district-info {
    position: absolute;
    top: 85px;
    left: 25px;
    width: 245px;
    min-height: 245px;
    padding: 24px;
    box-sizing: border-box;

    background: var(--maroon);
    color: var(--cream);

    border-left: 4px solid var(--yellow);
    border-radius: 12px;

    display: none;
    z-index: 10;
}

.district-info.show {
    display: block;
}

.district-info-label {
    margin: 0 0 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: var(--yellow);
}

.district-info h3 {
    margin: 0 0 10px;
    font-size: 28px;
    color: var(--cream);
}

.district-info p {
    line-height: 1.5;
}

.district-close {
    position: absolute;
    top: 10px;
    right: 12px;

    border: none;
    background: none;
    color: var(--cream);

    font-size: 24px;
    cursor: pointer;
}

.district-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 18px;
}

.district-stats div {
    text-align: center;
}

.district-stats strong {
    display: block;
    font-size: 20px;
    color: var(--yellow);
}

.district-stats span {
    display: block;
    margin-top: 4px;
    font-size: 9px;
    line-height: 1.2;
    color: var(--cream);
}

/* District boxes underneath the map */
.district-select {
    border: 1px solid var(--border);
    background: var(--cream);
    color: var(--maroon);
    cursor: pointer;
    font: inherit;
}

.district-select:hover,
.district-select.active {
    background: var(--maroon);
    color: var(--cream);
}

/* Mobile */
@media (max-width: 768px) {
    .district-info {
        position: relative;
        top: auto;
        left: auto;
        width: calc(100% - 40px);
        margin: 20px auto;
    }
}

/* =====================================================
   OUR WORK MODAL
   ===================================================== */

.work-modal {
    position: fixed;
    inset: 0;
    background: rgba(37, 40, 48, 0.75);

    display: none;
    align-items: center;
    justify-content: center;

    padding: 25px;
    z-index: 9999;
}

.work-modal.show {
    display: flex;
}

.work-modal-content {
    position: relative;

    width: 100%;
    max-width: 720px;
    max-height: 85vh;

    overflow-y: auto;

    padding: 50px;

    background: var(--cream);
    color: var(--text);

    border-radius: 20px;
    box-sizing: border-box;
}

.work-modal-close {
    position: absolute;
    top: 18px;
    right: 22px;

    border: none;
    background: transparent;

    color: var(--maroon);
    font-size: 30px;

    cursor: pointer;
}

.work-modal-content .eyebrow {
    color: var(--orange);
    margin-bottom: 12px;
}

.work-modal-content h2 {
    margin: 0 0 18px;

    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(32px, 5vw, 48px);
    line-height: 1.1;

    color: var(--maroon);
}

.work-modal-content > p:not(.eyebrow) {
    max-width: 600px;
    margin-bottom: 30px;

    line-height: 1.7;
}

.work-modal-areas {
    border-top: 1px solid var(--border);
    padding-top: 25px;
}

.work-modal-areas h3 {
    margin: 0 0 18px;
    color: var(--maroon);
}

#workModalList {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

#workModalList span {
    padding: 9px 14px;

    background: var(--cream-dark);
    color: var(--maroon);

    border-radius: 20px;

    font-size: 14px;
    line-height: 1.3;
}

/* Make the Explore Area buttons look like your links */
.work-open {
    border: none;
    padding: 0;

    background: transparent;
    cursor: pointer;

    font: inherit;
    text-align: left;
}


/* MOBILE */

@media (max-width: 768px) {

    .work-modal {
        padding: 15px;
    }

    .work-modal-content {
        padding: 40px 25px 30px;
        max-height: 90vh;
    }

    .work-modal-content h2 {
        font-size: 32px;
    }

}

/* =====================================================
   ABOUT US MODAL
   ===================================================== */

.about-modal {
    position: fixed;
    inset: 0;

    background: rgba(37, 40, 48, 0.75);

    display: none;
    align-items: center;
    justify-content: center;

    padding: 25px;
    z-index: 9999;
}

.about-modal.show {
    display: flex;
}

.about-modal-content {
    position: relative;

    width: 100%;
    max-width: 720px;
    max-height: 85vh;

    overflow-y: auto;

    padding: 50px;

    background: var(--cream);
    color: var(--text);

    border-radius: 20px;
    box-sizing: border-box;
}

.about-modal-close {
    position: absolute;
    top: 18px;
    right: 22px;

    border: none;
    background: transparent;

    color: var(--maroon);
    font-size: 30px;

    cursor: pointer;
}

.about-modal-content .eyebrow {
    color: var(--orange);
    margin-bottom: 12px;
}

.about-modal-content h2 {
    margin: 0 0 18px;

    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(32px, 5vw, 48px);
    line-height: 1.1;

    color: var(--maroon);
}

.about-modal-content > p {
    line-height: 1.7;
}

.about-modal-block {
    border-top: 1px solid var(--border);
    margin-top: 25px;
    padding-top: 22px;
}

.about-modal-block h3 {
    margin: 0 0 10px;
    color: var(--maroon);
}

.about-modal-block p {
    line-height: 1.7;
}

.about-modal-block ul {
    margin: 12px 0 0;
    padding-left: 20px;
}

.about-modal-block li {
    margin-bottom: 12px;
    line-height: 1.6;
}


/* Mobile */

@media (max-width: 768px) {

    .about-modal {
        padding: 15px;
    }

    .about-modal-content {
        padding: 40px 25px 30px;
        max-height: 90vh;
    }

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

}

/* Fix Discover Our Story button */

.about-open {
    border: none;
    padding: 0;

    background: transparent;
    color: var(--orange);

    font: inherit;
    font-weight: 600;

    cursor: pointer;
    text-align: left;
}

.about-open:hover {
    color: var(--maroon);
}

/* Women-led enterprises link inside Economic Empowerment modal */

.work-business-link {
    display: inline-block;
    width: 100%;
    margin-top: 18px;
    padding-top: 18px;

    border-top: 1px solid var(--border);

    color: var(--orange);
    font-weight: 700;
    text-decoration: none;
}

.work-business-link:hover {
    color: var(--maroon);
}

/* =====================================================
   EVENTS MODAL
   ===================================================== */

.events-modal {
    position: fixed;
    inset: 0;

    background: rgba(37, 40, 48, 0.75);

    display: none;
    align-items: center;
    justify-content: center;

    padding: 25px;
    z-index: 9999;
}

.events-modal.show {
    display: flex;
}

.events-modal-content {
    position: relative;

    width: 100%;
    max-width: 650px;
    max-height: 85vh;

    overflow-y: auto;

    padding: 50px;

    background: var(--cream);
    color: var(--text);

    border-radius: 20px;
    box-sizing: border-box;
}

.events-modal-close {
    position: absolute;
    top: 18px;
    right: 22px;

    border: none;
    background: transparent;

    color: var(--maroon);
    font-size: 30px;

    cursor: pointer;
}

.events-modal-content .eyebrow {
    color: var(--orange);
    margin-bottom: 12px;
}

.events-modal-content h2 {
    margin: 0 0 18px;

    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(32px, 5vw, 48px);
    line-height: 1.1;

    color: var(--maroon);
}

.events-modal-content > p {
    line-height: 1.7;
}

.events-modal-details {
    border-top: 1px solid var(--border);
    margin-top: 25px;
    padding-top: 22px;
}

.events-modal-details h3 {
    margin: 0 0 15px;
    color: var(--maroon);
}

.events-modal-details ul {
    margin: 0;
    padding-left: 20px;
}

.events-modal-details li {
    margin-bottom: 9px;
    line-height: 1.5;
}

.events-modal-note {
    margin-top: 25px;
    padding: 15px;

    background: var(--cream-dark);
    border-left: 3px solid var(--yellow);

    font-size: 14px;
}


/* Make View Events look like a text link */

.events-open {
    border: none;
    padding: 0;

    background: transparent;
    color: var(--orange);

    font: inherit;
    font-weight: 600;

    cursor: pointer;
    text-align: left;
}

.events-open:hover {
    color: var(--maroon);
}


/* MOBILE */

@media (max-width: 768px) {

    .events-modal {
        padding: 15px;
    }

    .events-modal-content {
        padding: 40px 25px 30px;
        max-height: 90vh;
    }

    .events-modal-content h2 {
        font-size: 32px;
    }

}
/* =====================================================
   NEWS & BLOG MODAL
   ===================================================== */

.news-modal {
    position: fixed;
    inset: 0;

    background: rgba(37, 40, 48, 0.75);

    display: none;
    align-items: center;
    justify-content: center;

    padding: 25px;
    z-index: 9999;
}

.news-modal.show {
    display: flex;
}

.news-modal-content {
    position: relative;

    width: 100%;
    max-width: 650px;
    max-height: 85vh;

    overflow-y: auto;

    padding: 50px;

    background: var(--cream);
    color: var(--text);

    border-radius: 20px;
    box-sizing: border-box;
}

.news-modal-close {
    position: absolute;
    top: 18px;
    right: 22px;

    border: none;
    background: transparent;

    color: var(--maroon);
    font-size: 30px;

    cursor: pointer;
}

.news-modal-content .eyebrow {
    color: var(--orange);
    margin-bottom: 12px;
}

.news-modal-content h2 {
    margin: 0 0 18px;

    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(32px, 5vw, 48px);
    line-height: 1.1;

    color: var(--maroon);
}

.news-modal-content > p {
    line-height: 1.7;
}

.news-modal-category {
    border-top: 1px solid var(--border);
    margin-top: 25px;
    padding-top: 22px;
}

.news-modal-category h3 {
    margin: 0 0 12px;
    color: var(--maroon);
}

.news-modal-category ul {
    margin: 0;
    padding-left: 20px;
}

.news-modal-category li {
    margin-bottom: 8px;
    line-height: 1.5;
}

.news-modal-note {
    margin-top: 25px;
    padding: 15px;

    background: var(--cream-dark);
    border-left: 3px solid var(--yellow);

    font-size: 14px;
}


/* Make Read Updates look like a text link */

.news-open {
    border: none;
    padding: 0;

    background: transparent;
    color: var(--orange);

    font: inherit;
    font-weight: 600;

    cursor: pointer;
    text-align: left;
}

.news-open:hover {
    color: var(--maroon);
}


/* MOBILE */

@media (max-width: 768px) {

    .news-modal {
        padding: 15px;
    }

    .news-modal-content {
        padding: 40px 25px 30px;
        max-height: 90vh;
    }

    .news-modal-content h2 {
        font-size: 32px;
    }

}
.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: inherit;
}
.business-image {
    overflow: hidden;
}

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

.work-card {
    padding: 0 !important;
    border: none !important;
    overflow: hidden;
    border-radius: 22px;
}

.work-image {
    width: 100%;
    height: 280px;
    overflow: hidden;
}

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

.work-card .work-number {
    position: absolute;
    top: 34px;
    left: 34px;
    z-index: 2;
}

.work-card h3,
.work-card .work-open {
    margin-left: 34px;
    margin-right: 34px;
}

.work-card h3 {
    margin-top: 32px;
}
.work-card .work-open {
    color: var(--orange) !important;
}

.work-card .work-open:hover {
    color: var(--maroon) !important;
}

/* HERO BADGE — SMALL AND AT THE BOTTOM */
.hero-badge {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);

    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;

    padding: 14px 24px !important;

    background: var(--yellow) !important;
    border-radius: 30px !important;

    color: var(--maroon) !important;
    font-size: 14px !important;
    font-weight: 700 !important;

    white-space: nowrap;
    z-index: 10;
    box-sizing: border-box;
}
/* ================= HERO PHOTO + BADGE ================= */

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

.hero-image-placeholder {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 30px;
}

.hero-image-placeholder img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* WOMEN LEAD stays on the image */
.hero-image-placeholder .hero-accent {
    position: absolute;
    top: 35px;
    right: 25px;
    z-index: 5;
}

/* YELLOW BADGE BELOW PHOTO */
.hero-visual .hero-badge {
    position: static !important;
    transform: none !important;

    width: fit-content !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;

    margin-top: 14px !important;
    padding: 14px 40px !important;

    background: var(--yellow) !important;
    color: var(--maroon) !important;

    border-radius: 30px !important;

    font-size: 15px !important;
    font-weight: 700 !important;
    white-space: nowrap;

    box-sizing: border-box;
}
/* About Us photo - soft rounded corners */
.about-image {
    overflow: hidden;
    border-radius: 18px;
}

.about-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 18px;
}

/* ================= DONATION MODAL ================= */

.donation-modal {
    position: fixed;
    inset: 0;
    background: rgba(37, 40, 48, 0.75);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 25px;
    z-index: 9999;
}

.donation-modal.show {
    display: flex;
}

.donation-modal-content {
    position: relative;
    width: 100%;
    max-width: 600px;
    max-height: 85vh;
    overflow-y: auto;
    padding: 45px;
    background: var(--cream);
    color: var(--text);
    border-radius: 20px;
    box-sizing: border-box;
}

.donation-modal-content .eyebrow {
    color: var(--orange);
    margin-bottom: 12px;
}

.donation-modal-content h2 {
    margin: 0 0 18px;
    color: var(--maroon);
    font-family: "Playfair Display", Georgia, serif;
    font-size: 42px;
}

.donation-intro {
    margin-bottom: 28px;
    line-height: 1.7;
}

.donation-bank-details {
    padding: 25px;
    background: var(--white);
    border-left: 4px solid var(--yellow);
    border-radius: 12px;
}

.donation-bank-details h3 {
    margin-top: 0;
    margin-bottom: 18px;
    color: var(--maroon);
    font-family: "Playfair Display", Georgia, serif;
    font-size: 24px;
}

.donation-bank-details p {
    margin: 10px 0;
    line-height: 1.5;
}

.donation-bank-details strong {
    color: var(--maroon);
}

.donation-modal-close {
    position: absolute;
    top: 18px;
    right: 20px;
    border: none;
    background: transparent;
    color: var(--maroon);
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
}

.donation-modal-close:hover {
    color: var(--orange);
}


/* MOBILE */

@media (max-width: 768px) {

    .donation-modal {
        padding: 15px;
    }

    .donation-modal-content {
        padding: 35px 25px;
    }

    .donation-modal-content h2 {
        font-size: 34px;
    }

}
.copyright + a {
    margin-left: 72px;
}

.copyright + a + br + a {
    margin-left: 72px;
}

.registration-badge {
    display: inline-block;
    margin: 8px 0 22px;
    padding: 9px 16px;
    background: #F6E7B0;
    color: var(--maroon);
    border-radius: 20px;
    font-size: 14px;
    font-weight: 700;
}

.blue-tick {
    color: var(--maroon);
    font-weight: 900;
    font-size: 17px;
    margin-right: 6px;
}

.map-instruction {
    margin: 0 0 10px;
    color: var(--yellow);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.india-map {
    background:#FFF7E8 !important;
}

/* District info box — inside the map, left side */
.india-map {
    overflow: hidden !important;
}

.district-info {
    left: 10px !important;
    top: 105px !important;
}
.india-map {
    background: #1d1d1d !important;
}

/* ================= RUNA STORY MODAL ================= */

.story-modal {
    position: fixed;
    inset: 0;
    background: rgba(37, 40, 48, 0.78);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 25px;
    z-index: 9999;
}

.story-modal.show {
    display: flex;
}

.story-modal-content {
    position: relative;
    width: 100%;
    max-width: 850px;
    max-height: 85vh;
    overflow-y: auto;
    padding: 50px;
    background: var(--cream);
    color: var(--text);
    border-radius: 20px;
    box-sizing: border-box;
}

.story-modal-content .eyebrow {
    color: var(--orange);
    margin-bottom: 12px;
}

.story-modal-content h2 {
    margin: 0 0 20px;
    color: var(--maroon);
    font-family: "Playfair Display", Georgia, serif;
    font-size: 42px;
    line-height: 1.15;
}

.story-meta {
    margin: 6px 0;
    font-size: 14px;
    line-height: 1.6;
}

.story-full-text {
    margin-top: 28px;
}

.story-full-text p {
    margin-bottom: 18px;
    line-height: 1.75;
}

.story-ending {
    color: var(--maroon);
    font-weight: 600;
}

.story-modal-close {
    position: absolute;
    top: 18px;
    right: 22px;
    border: none;
    background: transparent;
    color: var(--maroon);
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
}

.story-modal-close:hover {
    color: var(--orange);
}

@media (max-width: 768px) {

    .story-modal {
        padding: 15px;
    }

    .story-modal-content {
        padding: 40px 25px;
    }

    .story-modal-content h2 {
        font-size: 32px;
    }

}
/* ================= STORY LINK BUTTON FIX ================= */

.story-content button.story-open {
    width: auto !important;
    display: inline-block !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    color: var(--maroon) !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: 700 !important;
    cursor: pointer;
    appearance: none;
    box-shadow: none !important;
}

.story-content button.story-open:hover {
    color: var(--orange) !important;
    text-decoration: underline;
}
.story-content button.story-open {
    margin-top: 10px !important;
}

/* =====================================================
   ACCOUNT ACCESS
   ===================================================== */

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

.nav-join,
.nav-login {
    border: 1px solid var(--maroon);
    border-radius: 999px;
    padding: 8px 14px;
    background: transparent;
    color: var(--maroon);
    font: 700 14px "DM Sans", Arial, sans-serif;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.nav-login {
    background: var(--maroon);
    color: var(--cream);
}

.nav-join:hover,
.nav-login:hover {
    transform: translateY(-2px);
    background: var(--orange);
    border-color: var(--orange);
    color: var(--white);
}

.account-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(45, 13, 17, 0.74);
}

.account-modal.show {
    display: flex;
}

body.account-modal-open {
    overflow: hidden;
}

.account-modal-content {
    position: relative;
    width: min(100%, 540px);
    max-height: min(780px, 90vh);
    overflow-y: auto;
    padding: 42px;
    background: var(--cream);
    border: 1px solid rgba(214, 139, 50, 0.5);
    border-radius: 22px;
    box-shadow: 0 24px 70px rgba(28, 11, 14, 0.35);
}

.account-modal-content .eyebrow {
    margin-bottom: 10px;
    color: var(--orange);
    font-size: 12px;
}

.account-modal-content h2,
.account-modal-content h3 {
    color: var(--maroon);
    font-family: "Playfair Display", Georgia, serif;
    line-height: 1.15;
}

.account-modal-content h2 {
    font-size: clamp(32px, 5vw, 42px);
}

.account-modal-content h3 {
    margin-bottom: 18px;
    font-size: 28px;
}

.account-modal-intro {
    margin-top: 12px;
    color: var(--text);
}

.account-modal-close {
    position: absolute;
    top: 16px;
    right: 18px;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--maroon);
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
}

.account-modal-close:hover,
.account-modal-close:focus-visible {
    background: var(--cream-dark);
    outline: none;
}

.account-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    margin: 30px 0 25px;
    padding: 5px;
    background: var(--cream-dark);
    border-radius: 12px;
}

.account-tab {
    border: 0;
    border-radius: 8px;
    padding: 10px 14px;
    background: transparent;
    color: var(--maroon);
    font: 700 15px "DM Sans", Arial, sans-serif;
    cursor: pointer;
}

.account-tab.active {
    background: var(--white);
    box-shadow: 0 2px 6px rgba(64, 21, 25, 0.12);
}

.account-form {
    display: grid;
    gap: 9px;
}

.account-form label {
    margin-top: 7px;
    color: var(--maroon);
    font-size: 14px;
    font-weight: 700;
}

.account-form label span {
    color: var(--text);
    font-weight: 400;
}

.account-form input {
    width: 100%;
    min-height: 46px;
    padding: 11px 13px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--white);
    color: var(--charcoal);
    font: inherit;
}

.account-form input:focus {
    border-color: var(--orange);
    outline: 3px solid rgba(214, 139, 50, 0.2);
}

.account-form .button {
    justify-self: start;
    margin-top: 12px;
}

.account-help {
    color: var(--text);
    font-size: 13px;
}

.login-role-choice > p {
    margin-bottom: 16px;
    color: var(--text);
}

.login-role-buttons {
    display: grid;
    gap: 12px;
}

.login-role-button {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 17px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--white);
    color: var(--maroon);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.login-role-button:hover,
.login-role-button:focus-visible {
    border-color: var(--ochre);
    box-shadow: 0 7px 18px rgba(64, 21, 25, 0.1);
    outline: none;
    transform: translateY(-2px);
}

.login-role-button span:last-child {
    display: grid;
    gap: 2px;
}

.login-role-button strong {
    font-size: 16px;
}

.login-role-button small {
    color: var(--text);
    font-size: 13px;
}

.login-role-icon {
    display: grid;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 50%;
    background: var(--cream-dark);
    color: var(--orange);
}

.back-to-roles,
.account-signout {
    justify-self: start;
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--orange);
    font: 700 14px "DM Sans", Arial, sans-serif;
    cursor: pointer;
}

.back-to-roles {
    margin-bottom: 3px;
}

.account-welcome {
    padding: 18px 0 4px;
    text-align: center;
}

.account-welcome-icon {
    display: grid;
    width: 62px;
    height: 62px;
    place-items: center;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: var(--cream-dark);
    color: var(--orange);
    font-size: 25px;
}

.account-welcome p {
    margin: 12px auto 20px;
    color: var(--text);
}

.account-welcome .button {
    margin: 0 auto 12px;
}

.account-welcome .account-signout {
    display: block;
    margin: auto;
}

.account-message {
    min-height: 1.4em;
    margin-top: 18px;
    color: #9d1c1c;
    font-size: 14px;
    font-weight: 600;
}

.account-message.success {
    color: #1b6d45;
}

.business-marketplace-link {
    display: inline-block;
    margin-top: 28px;
}

.business-card .business-product-meta {
    margin: 10px 0 0;
    color: var(--orange);
    font-size: 0.9rem;
    font-weight: 700;
}

@media (max-width: 1100px) {
    .nav-account-actions {
        gap: 5px;
    }

    .nav-join,
    .nav-login {
        padding: 7px 10px;
        font-size: 12px;
    }
}

@media (max-width: 768px) {
    .nav-account-actions {
        width: 100%;
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid var(--border);
    }

    .nav-join,
    .nav-login {
        flex: 1;
        padding: 10px 12px;
        font-size: 14px;
    }

    .account-modal {
        align-items: flex-end;
        padding: 12px;
    }

    .account-modal-content {
        max-height: 92vh;
        padding: 34px 24px 28px;
        border-radius: 18px;
    }
}
/* Hero NARISAKTI color */

.hero .eyebrow {
    color: var(--deep-red) !important;
}

/* ================= HERO BUTTON COLORS ================= */

/* Explore Our Work */
.hero .button-primary {
    background: var(--maroon) !important;
    color: var(--yellow) !important;
    border: 2px solid var(--maroon) !important;
}

.hero .button-primary:hover {
    background: var(--deep-red) !important;
    color: var(--yellow) !important;
}


/* Get Involved button */
.hero .button-outline {
    border-color: var(--maroon) !important;
    color: var(--maroon) !important;
    background: transparent !important;
}

.hero .button-outline:hover {
    background: var(--maroon) !important;
    border-color: var(--maroon) !important;
    color: var(--yellow) !important;
}


/* My Voice · My Choice · My Power */
.hero .hero-badge {
    background: var(--maroon) !important;
    color: var(--yellow) !important;

}
.hero .button-primary,
.hero .hero-badge {
    color: var(--cream) !important;
}
/* ================= SDG FINAL LAYOUT ================= */

.sdg-section {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;

    width: 100% !important;
    max-width: 1100px !important;

    margin: 40px auto !important;
    padding: 60px 50px 70px !important;

    background: var(--maroon) !important;
    color: var(--cream) !important;

    border-radius: 24px !important;
    box-sizing: border-box !important;
}


/* TOP HEADING */

.sdg-heading {
    display: block !important;

    width: 100% !important;
    max-width: 850px !important;
.sdg-heading {
    margin: 0 auto 0 !important;
}
    text-align: center !important;
}

.sdg-heading .section-eyebrow {
    color: var(--yellow) !important;
    margin-bottom: 12px !important;
}

.sdg-heading h2 {
    color: var(--cream) !important;

    font-family: "Playfair Display", Georgia, serif !important;

    font-size: 44px !important;
    line-height: 1.15 !important;

    margin: 0 0 12px !important;
}

.sdg-heading p {
    color: var(--cream) !important;
}


/* FIVE CIRCLES */

.sdg-circles {
    display: flex !important;

    flex-direction: row !important;
    justify-content: center !important;
    align-items: flex-start !important;

    width: 100% !important;

    gap: 35px !important;

    flex-wrap: nowrap !important;
}


/* CIRCLE */

.sdg-circle {
    position: relative !important;

    width: 115px !important;
    height: 115px !important;

    min-width: 115px !important;

    border-radius: 50% !important;

    background: var(--yellow) !important;
    border: 3px solid var(--yellow) !important;

    color: var(--maroon) !important;

    display: flex !important;
    flex-direction: column !important;

    align-items: center !important;
    justify-content: center !important;

    cursor: pointer !important;

    margin: 0 !important;
}


/* SDG TEXT INSIDE */

.sdg-circle span {
    color: var(--maroon) !important;

    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
}

.sdg-circle strong {
    color: var(--maroon) !important;

    font-size: 32px !important;
}


/* SDG NAME */

.sdg-circle::before {
    position: absolute !important;

    content: "" !important;

    top: 130px !important;
    left: 50% !important;

    transform: translateX(-50%) !important;

    width: 150px !important;

    color: var(--cream) !important;

    font-size: 13px !important;
    font-weight: 700 !important;

    text-align: center !important;
}


/* NAMES */

.sdg-circle[data-sdg="2"]::before {
    content: "Zero Hunger" !important;
}

.sdg-circle[data-sdg="3"]::before {
    content: "Good Health & Well-being" !important;
}

.sdg-circle[data-sdg="5"]::before {
    content: "Gender Equality" !important;
}

.sdg-circle[data-sdg="8"]::before {
    content: "Decent Work" !important;
}

.sdg-circle[data-sdg="10"]::before {
    content: "Reduced Inequalities" !important;
}
.sdg-instruction {
    margin-top: 18px !important;
    margin-bottom: 18px !important;

    color: var(--yellow) !important;

    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px;
}
/* ================= SDG MODAL ================= */

.sdg-modal {
    position: fixed;
    inset: 0;

    display: none;
    align-items: center;
    justify-content: center;

    padding: 20px;

    background: rgba(37, 13, 17, 0.75);

    z-index: 9999;
}

.sdg-modal.show {
    display: flex;
}


/* POPUP BOX */

.sdg-modal-content {
    position: relative;

    width: 100%;
    max-width: 650px;
    max-height: 80vh;

    overflow-y: auto;

    padding: 50px;

    background: var(--cream);
    color: var(--text);

    border-radius: 20px;

    box-sizing: border-box;
}


/* EYEBROW */

.sdg-modal-content .section-eyebrow {
    color: var(--orange);

    margin-bottom: 12px;
}


/* TITLE */

.sdg-modal-content h2 {
    margin: 0 0 20px;

    font-family: "Playfair Display", Georgia, serif;

    font-size: 40px;
    line-height: 1.15;

    color: var(--maroon);
}


/* DESCRIPTION */

.sdg-modal-content p:last-child {
    margin: 0;

    color: var(--text);

    font-size: 16px;
    line-height: 1.75;
}


/* CLOSE BUTTON */

.sdg-modal-close {
    position: absolute;

    top: 15px;
    right: 20px;

    width: 38px;
    height: 38px;

    border: none;
    background: transparent;

    color: var(--maroon);

    font-size: 30px;
    line-height: 1;

    cursor: pointer;
}

.sdg-modal-close:hover {
    color: var(--orange);
}


/* MOBILE */

@media (max-width: 600px) {

    .sdg-modal-content {
        padding: 40px 25px;
    }

    .sdg-modal-content h2 {
        font-size: 32px;
    }

}
/* OUR BELIEF SECTION BACKGROUND */

.belief-section {
    background: #FAECC3 !important;
}

.belief-section,
.belief-section * {
    color: var(--maroon) !important;
}
body {
    background: #FAECC3 !important;
}.about-section {
    background: #FAECC3 !important;
}
.about-section {
    background: #FFF9E8 !important;
}

/* ================= WORK VIDEOS ================= */

.work-videos-section {
    width: 100%;
    max-width: 1100px;

    margin: 70px auto;
    padding: 60px 50px;

    box-sizing: border-box;

    background: #FFF9E8;

    text-align: center;
}


/* HEADING */

.work-videos-heading {
    max-width: 700px;
    margin: 0 auto 35px;
}

.work-videos-heading .section-eyebrow {
    color: var(--orange);
    margin-bottom: 10px;
}

.work-videos-heading h2 {
    margin: 0 0 12px;

    color: var(--maroon);

    font-family: "Playfair Display", Georgia, serif;

    font-size: 44px;
}

.work-videos-heading p {
    margin: 0;

    color: var(--text);
    line-height: 1.6;
}


/* VIDEO AREA */

.work-video-placeholder {
    width: 100%;
    min-height: 400px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #E8DCC8;

    border-radius: 20px;

    border: 2px dashed var(--border);
}


/* PLAY ICON */

.video-play-icon {
    width: 65px;
    height: 65px;

    margin: 0 auto 18px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding-left: 4px;

    border-radius: 50%;

    background: var(--maroon);
    color: var(--yellow);

    font-size: 24px;
}


/* TEXT */

.work-video-placeholder-content h3 {
    margin: 0 0 8px;

    color: var(--maroon);

    font-family: "Playfair Display", Georgia, serif;

    font-size: 28px;
}

.work-video-placeholder-content p {
    margin: 0;

    color: var(--text);
}


/* MOBILE */

@media (max-width: 768px) {

    .work-videos-section {
        margin: 50px auto;
        padding: 45px 25px;
    }

    .work-videos-heading h2 {
        font-size: 36px;
    }

    .work-video-placeholder {
        min-height: 300px;
    }
}
/* =====================================================
   NARISAKTI MARKETPLACE
   ===================================================== */

.marketplace-section {
    width: 100%;
    max-width: 1200px;

    margin: 0 auto;

    padding: 80px 50px;

    box-sizing: border-box;

    background: #FFF9E8;
}


/* ================= HEADING ================= */

.marketplace-heading {
    max-width: 750px;

    margin: 0 auto 45px;

    text-align: center;
}

.marketplace-heading .eyebrow {
    color: var(--maroon);
}

.marketplace-heading h1 {
    margin: 10px 0 18px;

    color: var(--maroon);

    font-family: "Playfair Display", Georgia, serif;

    font-size: 54px;
    line-height: 1.1;
}

.marketplace-heading p:last-child {
    color: var(--text);

    font-size: 17px;

    line-height: 1.7;
}


/* ================= SEARCH + CATEGORY ================= */

.marketplace-tools {
    display: flex;

    justify-content: center;
    align-items: center;

    gap: 15px;

    margin-bottom: 50px;
}


.marketplace-search {
    display: flex;

    align-items: center;

    width: 420px;

    padding: 13px 18px;

    background: #FFFFFF;

    border: 1px solid var(--border);

    border-radius: 30px;

    box-sizing: border-box;
}


.marketplace-search i {
    margin-right: 10px;

    color: var(--maroon);
}


.marketplace-search input {
    width: 100%;

    border: none;
    outline: none;

    background: transparent;

    color: var(--text);

    font-size: 15px;
}


#productCategory {
    padding: 13px 18px;

    border: 1px solid var(--border);

    border-radius: 30px;

    background: #FFFFFF;

    color: var(--maroon);

    font-size: 15px;

    outline: none;

    cursor: pointer;
}


/* ================= PRODUCTS ================= */

.products-container {
    width: 100%;

    min-height: 250px;

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 30px;

    margin-bottom: 70px;
}


/*
    Empty state for now.
    Real products will be inserted
    here by the backend later.
*/

.products-container:empty::before {
    content:
        "Products will appear here.";

    grid-column: 1 / -1;

    display: flex;

    align-items: center;
    justify-content: center;

    min-height: 250px;

    border: 2px dashed var(--border);

    border-radius: 18px;

    color: var(--text);

    font-size: 16px;
}


/* ================= PRODUCT CARD ================= */

/*
   We are preparing the design for
   products that will come from the backend.
*/

.product-card {
    overflow: hidden;

    background: #FFFFFF;

    border-radius: 18px;

    border: 1px solid var(--border);

    box-sizing: border-box;
}


.product-image {
    width: 100%;
    height: 260px;

    overflow: hidden;

    background: #E8DCC8;
}


.product-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


.product-content {
    padding: 22px;
}


.product-content h3 {
    margin: 0 0 10px;

    color: var(--maroon);

    font-family: "Playfair Display", Georgia, serif;

    font-size: 23px;
}


.product-content p {
    color: var(--text);

    line-height: 1.6;
}


.product-price {
    color: var(--maroon) !important;

    font-weight: 700;
}


/* ================= SELLER SECTION ================= */

.seller-section {
    padding: 55px 30px;

    text-align: center;

    background: var(--maroon);

    border-radius: 22px;

    box-sizing: border-box;
}


.seller-section .eyebrow {
    color: var(--yellow);
}


.seller-section h2 {
    margin: 10px 0 12px;

    color: var(--cream);

    font-family: "Playfair Display", Georgia, serif;

    font-size: 40px;
}


.seller-section p:not(.eyebrow) {
    max-width: 600px;

    margin: 0 auto 25px;

    color: var(--cream);

    line-height: 1.7;
}


/* ================= MOBILE ================= */

@media (max-width: 768px) {

    .marketplace-section {
        padding: 55px 25px;
    }


    .marketplace-heading h1 {
        font-size: 42px;
    }


    .marketplace-tools {
        flex-direction: column;
    }


    .marketplace-search {
        width: 100%;
    }


    #productCategory {
        width: 100%;
    }


    .products-container {
        grid-template-columns: 1fr;
    }


    .seller-section {
        padding: 45px 25px;
    }


    .seller-section h2 {
        font-size: 32px;
    }

}
/* =====================================================
   NARISAKTI MARKETPLACE
   ===================================================== */

.marketplace-section {
    width: 100%;
    min-height: 100vh;

    padding: 90px 6%;

    box-sizing: border-box;

    background: #FFF9E8;
}


/* ================= HEADING ================= */

.marketplace-heading {
    max-width: 800px;

    margin: 0 auto 45px;

    text-align: center;
}

.marketplace-heading .eyebrow {
    margin-bottom: 12px;

    color: var(--orange);
}

.marketplace-heading h1 {
    margin: 0 0 18px;

    color: var(--maroon);

    font-family: "Playfair Display", Georgia, serif;

    font-size: 56px;
    line-height: 1.08;
}

.marketplace-heading p:last-child {
    margin: 0;

    color: var(--text);

    font-size: 17px;
    line-height: 1.7;
}


/* ================= SEARCH ================= */

.marketplace-tools {
    display: flex;

    justify-content: center;
    align-items: center;

    gap: 15px;

    margin-bottom: 50px;
}

.marketplace-search {
    display: flex;
    align-items: center;

    width: 420px;

    padding: 13px 18px;

    background: #FFFFFF;

    border: 1px solid var(--border);

    border-radius: 30px;

    box-sizing: border-box;
}

.marketplace-search i {
    margin-right: 10px;

    color: var(--maroon);
}

.marketplace-search input {
    width: 100%;

    border: none;
    outline: none;

    background: transparent;

    color: var(--text);

    font-size: 15px;
}

#productCategory {
    padding: 13px 18px;

    border: 1px solid var(--border);

    border-radius: 30px;

    background: #FFFFFF;

    color: var(--maroon);

    font-size: 15px;

    outline: none;

    cursor: pointer;
}


/* ================= PRODUCTS ================= */

.products-container {
    width: 100%;

    min-height: 350px;

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 30px;
}


/* ================= EMPTY STATE ================= */

.products-empty {
    grid-column: 1 / -1;

    min-height: 350px;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    padding: 40px;

    box-sizing: border-box;

    background: #F4E6D0;

    border: 2px dashed var(--border);

    border-radius: 20px;

    text-align: center;
}

.products-empty i {
    margin-bottom: 20px;

    color: var(--maroon);

    font-size: 40px;
}

.products-empty h3 {
    margin: 0 0 10px;

    color: var(--maroon);

    font-family: "Playfair Display", Georgia, serif;

    font-size: 28px;
}

.products-empty p {
    max-width: 550px;

    margin: 0;

    color: var(--text);

    line-height: 1.7;
}


/* ================= PRODUCT CARD ================= */

/*
   This is the design that will be used
   when products are loaded from the backend.
*/

.product-card {
    overflow: hidden;

    background: #FFFFFF;

    border: 1px solid var(--border);

    border-radius: 18px;
}

.product-image {
    width: 100%;
    height: 260px;

    overflow: hidden;

    background: #F4E6D0;
}

.product-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}

.product-content {
    padding: 22px;
}

.product-content h3 {
    margin: 0 0 10px;

    color: var(--maroon);

    font-family: "Playfair Display", Georgia, serif;

    font-size: 23px;
}

.product-content p {
    color: var(--text);

    line-height: 1.6;
}

.product-price {
    color: var(--maroon) !important;

    font-weight: 700;
}

.product-link {
    color: var(--orange);

    font-weight: 700;

    text-decoration: none;
}


/* ================= MOBILE ================= */

@media (max-width: 768px) {

    .marketplace-section {
        padding: 60px 25px;
    }

    .marketplace-heading h1 {
        font-size: 42px;
    }

    .marketplace-tools {
        flex-direction: column;
    }

    .marketplace-search {
        width: 100%;
    }

    #productCategory {
        width: 100%;
    }

    .products-container {
        grid-template-columns: 1fr;
    }

}
/* Fix Economic Empowerment Explore Area position */

.work-card:nth-child(3) .text-link {
    display: inline-block;
    margin-left: 35px !important;
    margin-top: 25px !important;
    color: var(--orange) !important;
    font-weight: 400 !important;
}
.work-card {
    display: flex !important;
    flex-direction: column !important;
}

.work-card .text-link {
    margin-top: auto !important;
}
/* ================= PUBLICATIONS ================= */

.publications-section {
    width: 100%;
    max-width: 1100px;

    margin: 70px auto;
    padding: 70px 50px;

    box-sizing: border-box;

    background: #FFF9E8;
}


/* HEADING */

.publications-heading {
    max-width: 750px;

    margin: 0 auto 45px;

    text-align: center;
}

.publications-heading .section-eyebrow {
    color: var(--orange);
}

.publications-heading h2 {
    margin: 10px 0 15px;

    color: var(--maroon);

    font-family: "Playfair Display", Georgia, serif;

    font-size: 44px;
    line-height: 1.15;
}

.publications-heading p {
    margin: 0;

    color: var(--text);

    line-height: 1.7;
}


/* PUBLICATION CONTAINER */

.publications-container {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 25px;
}


/* EMPTY STATE */

.publications-empty {
    grid-column: 1 / -1;

    min-height: 280px;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    padding: 40px;

    box-sizing: border-box;

    background: #F4E6D0;

    border: 2px dashed var(--border);

    border-radius: 20px;

    text-align: center;
}

.publications-empty i {
    margin-bottom: 18px;

    color: var(--maroon);

    font-size: 38px;
}

.publications-empty h3 {
    margin: 0 0 10px;

    color: var(--maroon);

    font-family: "Playfair Display", Georgia, serif;

    font-size: 27px;
}

.publications-empty p {
    max-width: 550px;

    margin: 0;

    color: var(--text);

    line-height: 1.7;
}


/* ================= PUBLICATION CARD ================= */

/*
   These cards are prepared for publications
   that will be loaded from the backend later.
*/

.publication-card {
    padding: 25px;

    background: #FFFFFF;

    border: 1px solid var(--border);

    border-radius: 18px;

    box-sizing: border-box;
}

.publication-card h3 {
    margin: 0 0 10px;

    color: var(--maroon);

    font-family: "Playfair Display", Georgia, serif;
}

.publication-card p {
    color: var(--text);

    line-height: 1.6;
}

.publication-download {
    display: inline-block;

    margin-top: 10px;

    color: var(--orange);

    font-weight: 400;

    text-decoration: none;
}


/* MOBILE */

@media (max-width: 768px) {

    .publications-section {
        padding: 55px 25px;
    }

    .publications-heading h2 {
        font-size: 36px;
    }

    .publications-container {
        grid-template-columns: 1fr;
    }

}
#workModalDescription {
    white-space: pre-line;
}

/* =====================================================
   COMPREHENSIVE RESPONSIVE DESIGN SYSTEM
   Supports: 320px, 375px, 390px, 430px, 768px, 991px, 1024px
   Preserves desktop design intact for >1024px
   ===================================================== */

/* Prevent accidental horizontal scrolling */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* Base Responsive Container & Elements */
@media (max-width: 1024px) {
    .section-container {
        width: min(100% - 40px, 1120px);
    }
}

/* ===== TABLET VIEWPORT (max-width: 991px) ===== */
@media (max-width: 991px) {
    /* Navbar & Mobile Menu */
    .navbar {
        background: #FAECC3;
    }

    .nav-container {
        min-height: 68px;
        padding: 0 16px;
    }

    .logo {
        height: 50px;
    }

    .logo img {
        height: 44px;
        width: auto;
    }

    .menu-button {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        font-size: 24px;
        background: transparent;
        border: 1px solid var(--border);
        border-radius: 8px;
        color: var(--maroon);
        cursor: pointer;
    }

    .nav-links {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        max-height: calc(100dvh - 68px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        background: #FFF7E8;
        border-bottom: 1px solid var(--border);
        box-shadow: 0 12px 30px rgba(64, 21, 25, 0.15);
        display: none;
        flex-direction: column;
        align-items: stretch;
        padding: 16px 20px 24px;
        gap: 0;
        box-sizing: border-box;
        z-index: 1000;
    }

    .nav-links.active {
        display: flex !important;
    }

    .nav-links a {
        padding: 13px 6px;
        font-size: 15px;
        font-weight: 600;
        color: var(--maroon);
        border-bottom: 1px solid rgba(216, 197, 170, 0.4);
        text-align: left;
    }

    .nav-links .nav-donate {
        margin-top: 14px;
        text-align: center;
        padding: 12px 20px;
        border-radius: 999px;
        border-bottom: none;
        background: var(--maroon);
        color: var(--cream);
        font-weight: 700;
    }

    .nav-account-actions {
        display: flex;
        gap: 10px;
        width: 100%;
        margin-top: 12px;
        padding-top: 14px;
        border-top: 1px solid rgba(216, 197, 170, 0.6);
    }

    .nav-join, .nav-login {
        flex: 1;
        text-align: center;
        padding: 11px 14px;
        font-size: 14px;
        border-radius: 999px;
    }

    /* Hero Section */
    .hero {
        min-height: auto;
    }

    .hero-container {
        grid-template-columns: 1fr;
        gap: 36px;
        padding: 100px 0 55px;
        text-align: center;
    }

    .hero-content {
        max-width: 620px;
        margin: 0 auto;
    }

    .hero h1 {
        font-size: clamp(34px, 7.5vw, 54px);
        line-height: 1.1;
    }

    .hero-intro {
        font-size: clamp(15px, 3.8vw, 18px);
        margin-left: auto;
        margin-right: auto;
        max-width: 520px;
    }

    .hero-actions {
        justify-content: center;
        gap: 12px;
    }

    .hero-visual {
        width: 100%;
        max-width: 440px;
        margin: 0 auto;
    }

    .hero-image-placeholder {
        height: auto;
        aspect-ratio: 4 / 3;
        max-height: 380px;
        border-radius: 24px;
    }

    .hero-visual .hero-badge {
        white-space: normal !important;
        max-width: 100% !important;
        margin-top: 14px !important;
        padding: 12px 24px !important;
        font-size: 14px !important;
        text-align: center;
        line-height: 1.3;
    }

    /* About Section */
    .about-section {
        padding: 60px 0;
    }

    .about-grid {
        grid-template-columns: 1fr;
        gap: 36px;
        text-align: left;
    }

    .about-image {
        width: 100%;
        height: auto;
        max-height: 380px;
        border-radius: 18px;
    }

    .about-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .about-content h2 {
        font-size: clamp(28px, 6.5vw, 44px);
    }

    .registration-badge {
        display: inline-flex;
        align-items: center;
        max-width: 100%;
        white-space: normal;
        font-size: 13px;
        line-height: 1.35;
        padding: 8px 14px;
        box-sizing: border-box;
    }

    /* SDG Section */
    .sdg-section {
        width: calc(100% - 32px) !important;
        max-width: 1100px !important;
        margin: 30px auto !important;
        padding: 45px 24px 60px !important;
        border-radius: 20px !important;
    }

    .sdg-heading h2 {
        font-size: clamp(26px, 6vw, 40px) !important;
    }

    .sdg-circles {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: flex-start !important;
        gap: 55px 24px !important;
        width: 100% !important;
    }

    .sdg-circle {
        width: 105px !important;
        height: 105px !important;
        min-width: 105px !important;
    }

    .sdg-circle strong {
        font-size: 28px !important;
    }

    .sdg-circle span {
        font-size: 11px !important;
    }

    .sdg-circle::before {
        top: 118px !important;
        width: 130px !important;
        font-size: 12px !important;
        line-height: 1.25 !important;
    }

    /* Belief & Impact */
    .belief-section {
        padding: 60px 0;
    }

    .belief-container {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .belief-quote {
        padding-left: 20px;
        border-left-width: 3px;
    }

    .belief-quote p {
        font-size: clamp(20px, 5.5vw, 30px);
    }

    .impact-section {
        padding: 60px 0;
    }

    .impact-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .impact-item {
        padding: 24px 14px;
    }

    .impact-item strong {
        font-size: clamp(32px, 8vw, 46px);
    }

    /* Core Work */
    .work-section {
        padding: 60px 0;
    }

    .work-grid {
        grid-template-columns: 1fr;
        gap: 28px;
        max-width: 580px;
        margin: 0 auto;
    }

    .work-card {
        border-radius: 20px;
    }

    .work-image {
        height: 240px;
    }

    .work-card h3 {
        font-size: clamp(22px, 5vw, 28px);
        margin: 20px 24px 10px;
    }

    .work-card .work-open {
        margin: 0 24px 24px !important;
        font-size: 15px;
    }

    /* Work Videos */
    .work-videos-section {
        width: calc(100% - 32px);
        margin: 45px auto;
        padding: 45px 22px;
        border-radius: 20px;
    }

    .work-videos-heading h2 {
        font-size: clamp(26px, 6.5vw, 38px);
    }

    /* Reach & Map */
    .reach-section {
        padding: 65px 0;
    }

    .reach-container {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .reach-heading {
        text-align: center;
    }

    .reach-heading h2 {
        font-size: clamp(28px, 6.5vw, 46px);
    }

    .reach-heading > p:last-child {
        margin-left: auto;
        margin-right: auto;
    }

    .india-map {
        min-height: auto;
        padding: 24px 16px;
        border-radius: 20px;
    }

    .india-svg, .west-bengal-map {
        width: min(280px, 75%);
        height: auto;
        margin: 16px auto;
    }

    .map-label {
        position: static;
        justify-content: center;
        margin-bottom: 12px;
    }

    .district-area {
        margin-top: 18px;
        width: 100%;
    }

    .district-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .district-select {
        padding: 12px 8px;
        font-size: 12px;
        border-radius: 8px;
    }

    .district-info {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 16px 0 !important;
        padding: 20px 16px !important;
        border-radius: 14px !important;
        box-sizing: border-box !important;
    }

    .district-stats {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px !important;
    }

    .district-stats strong {
        font-size: 16px !important;
    }

    .district-stats span {
        font-size: 8px !important;
    }

    /* Stories Section */
    .stories-section {
        padding: 55px 0 70px !important;
    }

    .stories-section .left-heading {
        margin-bottom: 28px !important;
        text-align: center !important;
    }

    .stories-section .left-heading h2 {
        font-size: clamp(28px, 6.5vw, 44px) !important;
        white-space: normal !important;
        text-align: center !important;
        line-height: 1.15 !important;
    }

    .stories-section .story-feature {
        grid-template-columns: 1fr !important;
        height: auto !important;
        min-height: auto !important;
        border-radius: 20px !important;
        max-width: 580px !important;
        margin: 0 auto !important;
    }

    .stories-section .story-image {
        height: 250px !important;
        min-height: 250px !important;
        width: 100% !important;
    }

    .stories-section .story-image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .stories-section .story-content {
        padding: 28px 22px !important;
        text-align: left !important;
    }

    .stories-section .story-content h3 {
        font-size: clamp(22px, 5.5vw, 28px) !important;
    }

    /* Businesses */
    .business-section {
        padding: 60px 0;
    }

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

    .business-image {
        height: 220px;
    }

    /* Publications */
    .publications-section {
        width: calc(100% - 32px);
        margin: 45px auto;
        padding: 45px 22px;
        border-radius: 20px;
    }

    .publications-heading h2 {
        font-size: clamp(26px, 6.5vw, 38px);
    }

    .publications-container {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    /* Events */
    .events-section {
        padding: 60px 0;
    }

    .events-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        max-width: 580px;
        margin: 0 auto;
    }

    .event-card {
        padding: 28px 22px;
        border-radius: 18px;
    }

    /* Get Involved */
    .involved-section {
        padding: 60px 0;
    }

    .involved-buttons {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }

    /* Donate */
    .donate-section {
        padding: 60px 0;
    }

    .donate-container {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 36px;
    }

    .donate-content h2 {
        font-size: clamp(30px, 7vw, 48px);
    }

    .donate-circle {
        margin: 0 auto 20px;
    }

    /* Gallery */
    .gallery-section {
        padding: 60px 0;
    }

    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
        gap: 14px;
    }

    .gallery-item {
        height: 200px;
        border-radius: 14px;
        overflow: hidden;
    }

    .gallery-item.large {
        grid-column: 1 / -1;
        grid-row: auto;
        height: 250px;
    }

    /* Contact */
    .contact-section {
        padding: 60px 0;
    }

    .contact-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .contact-intro {
        text-align: center;
        max-width: 600px;
        margin: 0 auto;
    }

    .contact-intro h2 {
        font-size: clamp(28px, 6.5vw, 44px);
    }

    .contact-form {
        max-width: 580px;
        margin: 0 auto;
        width: 100%;
    }

    /* Footer */
    .footer-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 24px;
    }

    .footer-links {
        flex-wrap: wrap;
        justify-content: center;
        gap: 14px 20px;
    }

    .copyright + a,
    .copyright + a + br + a {
        margin-left: 0 !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        margin: 6px auto;
        word-break: break-all;
    }
}

/* ===== MOBILE VIEWPORT (max-width: 768px) ===== */
@media (max-width: 768px) {
    /* All Modals */
    .work-modal, .about-modal, .events-modal, .news-modal,
    .sdg-modal, .story-modal, .donation-modal, .account-modal {
        padding: 12px !important;
        align-items: center !important;
    }

    .work-modal-content, .about-modal-content, .events-modal-content, .news-modal-content,
    .sdg-modal-content, .story-modal-content, .donation-modal-content, .account-modal-content {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 90dvh !important;
        padding: 34px 18px 24px !important;
        border-radius: 18px !important;
        box-sizing: border-box !important;
        -webkit-overflow-scrolling: touch;
    }

    .work-modal-content h2, .about-modal-content h2, .events-modal-content h2, .news-modal-content h2,
    .sdg-modal-content h2, .story-modal-content h2, .donation-modal-content h2, .account-modal-content h2 {
        font-size: clamp(24px, 6vw, 34px) !important;
        line-height: 1.2 !important;
        margin-bottom: 14px !important;
    }

    .work-modal-close, .about-modal-close, .events-modal-close, .news-modal-close,
    .sdg-modal-close, .story-modal-close, .donation-modal-close, .account-modal-close {
        top: 10px !important;
        right: 12px !important;
        width: 40px !important;
        height: 40px !important;
        font-size: 28px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .donation-bank-details {
        padding: 18px 14px !important;
    }

    .donation-bank-details p {
        word-break: break-word !important;
    }

    .account-tabs {
        margin: 20px 0 16px !important;
    }

    .account-form .button {
        width: 100% !important;
        text-align: center;
    }

    .login-role-button {
        padding: 14px 12px !important;
    }
}

/* ===== COMPACT MOBILE (max-width: 600px) ===== */
@media (max-width: 600px) {
    .section-container {
        width: min(100% - 32px, 1120px);
    }

    .business-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .business-image {
        height: 200px;
    }

    .business-marketplace-link {
        display: inline-block;
        font-size: 15px;
        margin-top: 20px;
    }

    .publications-section {
        padding: 35px 16px;
        margin: 35px auto;
    }

    .publications-empty {
        padding: 28px 16px;
        min-height: 200px;
    }

    .sdg-section {
        padding: 40px 16px 55px !important;
        margin: 25px auto !important;
    }

    .sdg-circles {
        gap: 50px 16px !important;
    }

    .sdg-circle {
        width: 92px !important;
        height: 92px !important;
        min-width: 92px !important;
    }

    .sdg-circle strong {
        font-size: 25px !important;
    }

    .sdg-circle span {
        font-size: 10px !important;
    }

    .sdg-circle::before {
        top: 102px !important;
        width: 115px !important;
        font-size: 11px !important;
    }

    .involved-buttons {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .involved-buttons .button {
        width: 100%;
        text-align: center;
    }

    .gallery-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .gallery-item {
        height: 220px;
    }

    .gallery-item.large {
        height: 240px;
    }
}

/* ===== PHONE BREAKPOINT (max-width: 480px / 430px / 390px) ===== */
@media (max-width: 480px) {
    .hero-container {
        padding: 90px 0 45px;
        gap: 28px;
    }

    .hero-actions {
        flex-direction: column;
        width: 100%;
    }

    .hero-actions .button {
        width: 100%;
        text-align: center;
        padding: 14px 20px;
    }

    .hero-image-placeholder {
        border-radius: 18px;
    }

    .hero-accent {
        width: 62px;
        height: 62px;
        font-size: 8px;
        top: 14px;
        right: 14px;
    }

    .hero-visual .hero-badge {
        font-size: 12px !important;
        padding: 10px 16px !important;
        border-radius: 20px !important;
    }

    .about-image {
        max-height: 280px;
    }

    .about-content .large-text {
        font-size: 16px;
    }

    .registration-badge {
        font-size: 12px;
        padding: 7px 12px;
    }

    .work-image {
        height: 200px;
    }

    .work-card h3 {
        margin: 16px 18px 8px;
    }

    .work-card .work-open {
        margin: 0 18px 20px !important;
    }

    .work-video-placeholder {
        min-height: 220px;
        border-radius: 14px;
    }

    .stories-section .story-image {
        height: 210px !important;
        min-height: 210px !important;
    }

    .stories-section .story-content {
        padding: 22px 16px !important;
    }

    .district-grid {
        grid-template-columns: 1fr;
    }

    .district-stats {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 4px !important;
    }

    .district-stats div {
        padding: 7px 2px !important;
    }

    .district-stats strong {
        font-size: 14px !important;
    }

    .district-stats span {
        font-size: 7.5px !important;
    }

    .contact-form input,
    .contact-form textarea {
        font-size: 16px;
        padding: 13px 14px;
    }

    .contact-form .button {
        width: 100%;
        text-align: center;
    }

    footer {
        padding: 40px 16px 30px;
    }
}

/* ===== EXTRA SMALL PHONE (max-width: 360px / 320px) ===== */
@media (max-width: 360px) {
    .section-container {
        width: min(100% - 24px, 1120px);
    }

    .hero h1 {
        font-size: 30px;
    }

    .hero-visual .hero-badge {
        font-size: 11px !important;
        padding: 8px 12px !important;
    }

    .sdg-circles {
        gap: 46px 12px !important;
    }

    .sdg-circle {
        width: 82px !important;
        height: 82px !important;
        min-width: 82px !important;
    }

    .sdg-circle strong {
        font-size: 22px !important;
    }

    .sdg-circle span {
        font-size: 9px !important;
    }

    .sdg-circle::before {
        top: 92px !important;
        width: 105px !important;
        font-size: 10px !important;
    }

    .impact-grid {
        grid-template-columns: 1fr;
    }

    .account-modal-content {
        padding: 28px 14px 20px !important;
    }
}