/* =================== Font Definition =================== */
/* Untitled Sans font */
@font-face {
    font-family: 'untitled-sans';
    src: url('/fonts/Untitled Sans Regular/Web Fonts/1a3681e2cd615bd458b68dce439102a4.woff2') format('woff2'),
        url('/fonts/Untitled Sans Regular/Web Fonts/1a3681e2cd615bd458b68dce439102a4.woff') format('woff'),
        url('/fonts/Untitled Sans Regular/Web Fonts/1a3681e2cd615bd458b68dce439102a4.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'untitled-sans';
    src: url('/fonts/Untitled Sans Regular/Untitled Sans Regular.woff2') format('woff2'),
        url('/fonts/Untitled Sans Regular/Untitled Sans Regular.woff') format('woff'),
        url('/fonts/Untitled Sans Regular/Untitled Sans Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* =================== Tokens =================== */
:root {
    --fship-purple: #2E3192;
    --fship-blue: #29B6E6;
    --fship-link: #29A7E0;
    --text: #000;
    --container: 1180px;
    --shadow: 0 10px 24px rgba(0, 0, 0, .08);
    --font-family: 'untitled-sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

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

/* Apply font globally to all elements */
*,
*::before,
*::after {
    font-family: inherit;
}

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-family);
    color: var(--text);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding-top: 75px;
}

/* Responsive body padding for fixed header */
@media (max-width: 768px) {
    body {
        padding-top: 65px;
    }
}

@media (max-width: 576px) {
    body {
        padding-top: 55px;
    }
}

@media (max-width: 375px) {
    body {
        padding-top: 45px;
    }
}

/* Ensure form elements inherit font */
input,
button,
textarea,
select {
    font-family: var(--font-family);
}

.main-content {
    flex: 1 0 auto;
}

.fship-footer {
    flex-shrink: 0;
    margin-top: auto;
}

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

a:hover,
a:focus {
    text-decoration: none
}

.fship-container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 20px
}

/* =================== Header =================== */
.fship-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: #fff;
    border-bottom: 1px solid #eaeaea;
    width: 100%;
}

.fship-header__bar {
    padding: 14px 0
}

.fship-header .fship-container {
    max-width: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
}

.fship-logo img {
    margin-left: 100px;
    height: 48px;
    display: block
}

/* Right actions */
.fship-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-left: 20px;
    flex-shrink: 0;
}

.fship-donate {
    background: #2D318B;
    color: #fff;
    font-weight: 700;
    padding: 10px 18px;
    border-radius: 4px
}

@keyframes pulse-donate {

    0%,
    100% {
        box-shadow: 0 0 0 0 var(--fship-blue);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 0 0 12px rgba(220, 38, 38, 0);
        transform: scale(1.05);
    }
}

.fship-donate {
    animation: pulse-donate 2s infinite !important;
}

.fship-donate i {
    margin-right: 6px;
    display: inline-block;
    animation: heartbeat 1.2s infinite;
}

@keyframes heartbeat {

    0%,
    100% {
        transform: scale(1);
    }

    25% {
        transform: scale(1.3);
    }

    50% {
        transform: scale(1);
    }
}

.fship-donate:hover {
    filter: brightness(.95)
}

.fship-icon {
    display: inline-flex;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    color: var(--fship-purple)
}

.fship-icon svg {
    stroke: currentColor
}

/* Burger (mobile only, at far right) */
.fship-burger {
    width: 36px;
    height: 28px;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 24px;
    /* size of the bars */
    color: var(--fship-purple);
    /* match your theme color */
}


/* Nav */
.fship-nav {
    margin-left: auto;
    white-space: nowrap;
}

.fship-menu {
    list-style: none;
    display: flex;
    gap: 22px;
    margin: 0;
    padding: 0;
    flex-wrap: nowrap;
}

.fship-menu>li {
    position: relative
}

.fship-menu a {
    display: inline-block;
    padding: 8px 2px;
    color: #000;
    font-weight: 700;
    letter-spacing: .02em;
    font-size: 14px;
    text-transform: uppercase
}

.fship-menu .caret {
    margin-left: 6px;
    border: 4px solid transparent;
    border-top-color: #000;
    display: inline-block;
    transform: translateY(2px)
}

/* Dropdown (desktop) */
.dropdown {
    position: absolute;
    left: 0;
    top: calc(100% + 10px);
    min-width: 240px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    box-shadow: var(--shadow);
    padding: 10px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: all .18s ease;
    z-index: 20;
    list-style: none
}

.dropdown a {
    display: block;
    padding: 12px 16px;
    font-weight: 600;
    color: #333;
    text-transform: none
}

.dropdown a:hover {
    background: #f5f7ff
}

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

/* Mobile slide-in */
.fship-nav-toggle {
    display: none
}

.fship-dim {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .35);
    z-index: 900
}

/* Tablet devices - 768px to 1024px */
@media (max-width:1024px) {
    .fship-logo img {
        margin-left: 50px;
        height: 42px;
    }

    .fship-menu {
        gap: 16px;
    }

    .fship-menu a {
        font-size: 13px;
    }
}

/* Mobile and small tablets - below 960px */
@media (max-width:960px) {
    .fship-burger {
        display: flex
    }

    .fship-logo img {
        margin-left: 0px;
    }

    /* burger visible on mobile */
    .fship-nav {
        position: fixed;
        inset: 0 0 0 auto;
        width: min(88%, 360px);
        background: #fff;
        border-left: 1px solid #eee;
        transform: translateX(100%);
        transition: transform .25s ease;
        z-index: 950;
        padding: 18px 18px 28px;
        overflow-y: auto;
    }

    .fship-menu {
        flex-direction: column;
        gap: 0
    }

    .fship-menu>li>a {
        padding: 14px 10px;
        border-bottom: 1px solid #eee
    }

    /* Show dropdown sections expanded inside panel */
    .has-dropdown>.dropdown {
        position: static;
        left: auto;
        top: auto;
        opacity: 1;
        visibility: visible;
        transform: none;
        border: none;
        box-shadow: none;
        padding: 0
    }

    .has-dropdown>.dropdown a {
        padding: 12px 20px;
        color: #444
    }

    /* open state */
    .fship-nav-toggle:checked~.fship-header__bar .fship-container .fship-nav {
        transform: translateX(0)
    }

    .fship-nav-toggle:checked~.fship-dim {
        display: block
    }

    /* animate burger */
    .fship-nav-toggle:checked~.fship-header__bar .fship-container .fship-actions .fship-burger span:nth-child(1) {
        transform: translateY(5px) rotate(45deg)
    }

    .fship-nav-toggle:checked~.fship-header__bar .fship-container .fship-actions .fship-burger span:nth-child(2) {
        opacity: 0
    }

    .fship-nav-toggle:checked~.fship-header__bar .fship-container .fship-actions .fship-burger span:nth-child(3) {
        transform: translateY(-5px) rotate(-45deg)
    }
}

/* Small tablets - 768px */
@media (max-width:768px) {
    .fship-header__bar {
        padding: 12px 0;
    }

    .fship-actions {
        gap: 10px;
    }

    .fship-donate {
        padding: 8px 14px;
        font-size: 13px;
    }
}

/* Mobile devices - 576px and below */
@media (max-width:576px) {
    .fship-logo img {
        height: 28px;
        margin-left: 0px;
    }

    .fship-actions {
        gap: 8px;
    }

    .fship-donate {
        padding: 7px 12px;
        font-size: 12px;
    }
}

/* Extra small mobile devices - 375px and below */
@media (max-width:375px) {
    .fship-logo img {
        height: 24px;
    }

    .fship-donate {
        padding: 6px 10px;
        font-size: 11px;
    }
}

/* Very small mobile devices - 320px */
@media (max-width:320px) {
    .fship-logo img {
        height: 22px;
    }

    .fship-header .fship-container {
        padding: 0 10px;
    }
}

/* =================== Footer =================== */
.fship-footer {
    background: #f3f4f6;
    border-top: 1px solid #eaeaea;
    color: #111;
    padding: 36px 0 50px
}

.fship-footer__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 26px
}

/* Social: purple circle + white icon */
.fship-social {
    display: flex;
    gap: 14px;
    margin-left: 100px;
}

.fship-social .ico {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--fship-purple);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px
}

.fship-social .ico:hover {
    filter: brightness(.95)
}

.fship-social svg {
    width: 22px;
    height: 22px;
    fill: #fff;
    stroke: none
}

/* Newsletter button (white text as requested) */
.fship-news-btn {
    background: linear-gradient(90deg, #2e3192 0%, #30389e 100%);
    color: #fff !important;
    font-weight: 700;
    padding: 12px 22px;
    border-radius: 6px;
    display: inline-block
}

/* Columns */
.fship-footer__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 42px
}

.fship-footer h4 {
    margin: 0 0 10px 0;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .02em
}

.fship-footer li {
    margin: 8px 0
}

.fship-footer a {
    color: var(--fship-link);
    text-decoration: none
}

.fship-footer a:hover {
    text-decoration: none
}

@media (max-width:900px) {
    .fship-footer__top {
        flex-direction: column;
        align-items: flex-start
    }

    .fship-footer__grid {
        grid-template-columns: 1fr;
        gap: 26px
    }
}

@media (max-width:576px) {
    .fship-footer {
        padding: 30px 0 40px
    }

    .fship-social {
        margin-left: 0;
        gap: 12px
    }

    .fship-social .ico {
        width: 40px;
        height: 40px;
        font-size: 16px
    }

    .fship-social svg {
        width: 20px;
        height: 20px
    }

    .fship-news-btn {
        padding: 10px 18px;
        font-size: 14px
    }

    .fship-footer__grid {
        gap: 20px
    }

    .fship-footer h4 {
        font-size: 15px
    }
}

@media (max-width:375px) {
    .fship-footer {
        padding: 25px 0 35px
    }

    .fship-social {
        gap: 10px
    }

    .fship-social .ico {
        width: 38px;
        height: 38px;
        font-size: 15px
    }

    .fship-social svg {
        width: 18px;
        height: 18px
    }

    .fship-news-btn {
        padding: 9px 16px;
        font-size: 13px
    }

    .fship-footer h4 {
        font-size: 14px
    }
}

@media (max-width:320px) {
    .fship-footer {
        padding: 20px 0 30px
    }

    .fship-social {
        gap: 8px
    }

    .fship-social .ico {
        width: 36px;
        height: 36px;
        font-size: 14px
    }

    .fship-social svg {
        width: 16px;
        height: 16px
    }

    .fship-news-btn {
        padding: 8px 14px;
        font-size: 12px
    }

    .fship-footer h4 {
        font-size: 13px;
        margin-bottom: 8px
    }

    .fship-footer li {
        margin: 6px 0;
        font-size: 13px
    }
}

/* ================= Banner Slider ================= */
.banner-slider {
    position: relative;
    width: 100%;
    height: 70vh;
    overflow: hidden;
}

.banner-slider .slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: var(--bg-desktop);
    background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
}

.banner-slider .slide.active {
    opacity: 1;
    z-index: 1;
}

.banner-slider h2 {
    color: #fff;
    font-size: 2.5rem;
    font-weight: 700;
    text-align: center;
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
    padding: 0 20px;
}

/* Arrows */
.banner-slider .prev,
.banner-slider .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    font-size: 2.5rem;
    font-weight: bold;
    padding: 10px;
    cursor: pointer;
    z-index: 2;
    user-select: none;
    transition: color 0.2s;
}

.banner-slider .prev {
    left: 15px;
}

.banner-slider .next {
    right: 15px;
}

.banner-slider .prev:hover,
.banner-slider .next:hover {
    color: var(--fship-blue);
}

/* Rotating logo only over the banner */
.fship-rotating-logo {
    position: absolute;
    top: 24px;
    /* tweak to match your screenshot */
    right: 24px;
    z-index: 20;
    /* above slides/arrows if needed */
    display: inline-block;
}

.fship-rotating-logo img {
    width: 60px;
    /* adjust size */
    height: auto;
    /* animation: fship-spin 3s linear infinite; */
    cursor: pointer;
}

/* optional: pause on hover */
/* .fship-rotating-logo img:hover { animation-play-state: paused; } */

/* @keyframes fship-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
} */

/* Responsive Banner Slider for all standard devices */
/* Tablet devices - 768px to 1024px */
@media (max-width: 1024px) {
    .banner-slider {
        height: 80vh;
    }

    .banner-slider .slide {
        background-size: 100% 100%;
    }

    .banner-slider h2 {
        font-size: 2rem;
    }
}

/* Mobile devices - aspect ratio 9:16 (portrait) */
@media (max-width: 768px) {
    .banner-slider {
        height: 80vh;
        max-height: none;
    }

    .banner-slider .slide {
        background-image: var(--bg-mobile, var(--bg-desktop));
        background-size: 100% 100%;
        background-position: center center;
    }

    .banner-slider h2 {
        font-size: 1.75rem;
    }

    .fship-rotating-logo {
        top: 12px;
        right: 12px;
    }

    .fship-rotating-logo img {
        width: 70px;
    }

    .banner-slider .prev,
    .banner-slider .next {
        font-size: 2rem;
        padding: 8px;
    }
}

/* Small mobile devices - 576px */
@media (max-width: 576px) {
    .banner-slider {
        height: 25vh;
        max-height: none;
    }

    .banner-slider h2 {
        font-size: 1.5rem;
        padding: 0 15px;
    }

    .banner-slider .prev {
        left: 8px;
    }

    .banner-slider .next {
        right: 8px;
    }
}

/* Extra small mobile devices - 375px */
@media (max-width: 375px) {
    .banner-slider h2 {
        font-size: 1.25rem;
        padding: 0 10px;
    }

    .fship-rotating-logo img {
        padding: 5px;
        width: 50px;
    }
}

/* Very small mobile devices - 320px */
@media (max-width: 320px) {
    .banner-slider h2 {
        font-size: 1.1rem;
    }

    .banner-slider .prev,
    .banner-slider .next {
        font-size: 1.5rem;
        padding: 5px;
    }
}


/* If your arrows overlap, you can lower their z-index or raise the logo’s */
.prev,
.next {
    z-index: 15;
}

/* ================= Scrolling News Section ================= */
.scrolling-news-section {
    width: 100%;
    background: linear-gradient(135deg, var(--fship-purple) 0%, var(--fship-blue) 100%);
    padding: 0.5rem 0;
    overflow: hidden;
}

.scrolling-news-wrapper {
    width: 100%;
    max-width: 100%;
}

.scrolling-news-content {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 0 2rem;
}

.news-label {
    color: #fff;
    font-size: 0.25rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    white-space: nowrap;
    flex-shrink: 0;
}

.scrolling-text-container {
    flex: 1;
    overflow: hidden;
    /* background: rgba(255, 255, 255, 0.1); */
    /* padding: 1rem; */
    border-radius: 4px;
    display: flex;
    align-items: center;
}

.scrolling-text {
    color: #fff;
    font-size: 0.875rem;
    white-space: nowrap;
    margin: 0;
    padding: 0;
    animation: scroll-left 35s linear infinite;
}

.scrolling-text:hover {
    animation-play-state: paused;
    cursor: pointer;
}

@keyframes scroll-left {
    0% {
        transform: translateX(65%);
    }

    100% {
        transform: translateX(-100%);
    }
}

.scroll-title {
    font-size: 0.9rem;
    margin: 0px;
    ;
}

/* Responsive Scrolling News */
@media (max-width: 1024px) {
    .scrolling-news-content {
        gap: 1.5rem;
        padding: 0 1.5rem;
    }

    .scrolling-text {
        font-size: 0.875rem;
    }

    .news-label {
        font-size: 1.1rem;
    }
}

@media (max-width: 768px) {
    .scrolling-news-section {
        padding: 0.5rem 0;
    }

    .scrolling-news-content {
        gap: 1rem;
        /* padding: 0 1rem; */
        flex-direction: column;
        align-items: flex-start;
    }

    .news-label {
        font-size: 1rem;
        margin-bottom: 0.5rem;
    }

    .scrolling-text-container {
        width: 100%;
        /* padding: 0.75rem; */
    }

    .scrolling-text {
        font-size: 0.95rem;
        animation: scroll-left 25s linear infinite;
    }
}

@media (max-width: 576px) {
    .scrolling-news-section {
        padding: 0.5rem 0;
    }

    /* .scrolling-news-content {
        gap: 0.75rem;
        padding: 0 0.75rem;
    } */

    .news-label {
        font-size: 0.9rem;
    }

    /* .scrolling-text-container {
        padding: 0.5rem;
    } */

    .scrolling-text {
        font-size: 0.9rem;
        animation: scroll-left 40s linear infinite;
    }


    @keyframes scroll-left {
        0% {
            transform: translateX(25%);
        }

        100% {
            transform: translateX(-100%);
        }
    }
}



.fship-fixed-icon {
    position: fixed;
    bottom: 20px;
    /* distance from bottom */
    right: 20px;
    /* distance from right */
    z-index: 2000;
    /* keep above other elements */
    display: inline-block;
}

.fship-fixed-icon img {
    width: 48px;
    /* adjust size */
    height: auto;
    cursor: pointer;
    transition: transform 0.3s ease;
}

/* ================= NEWS SECTION ================= */
.news-section {
    padding: 60px 0;
    background: #fff;
}

.news-section h3,
.news-section p {
    text-transform: uppercase;
}

.section-title {
    text-align: center;
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 40px;
    position: relative;
}

.section-title::after {
    content: "";
    display: block;
    width: 60px;
    height: 3px;
    background: var(--fship-purple);
    margin: 12px auto 0;
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 32px;
}

.news-item img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    margin-bottom: 12px;
}

.news-item h3 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.news-item .tags {
    font-size: 13px;
    line-height: 1.4;
    color: var(--fship-link);
}

.read-more {
    text-align: center;
    margin-top: 40px;
}

.btn-more {
    background: var(--fship-purple);
    color: #fff;
    padding: 12px 20px;
    border-radius: 4px;
    font-weight: 700;
    display: inline-block;
}

.btn-more:hover {
    filter: brightness(0.9);
}

/* =============== OUR VISION =============== */
.vision-section {
    background: #ffffff;
    /* page background behind the card */
    padding: 70px 0;
    margin: auto auto;

}

.vision-wrapper {
    display: flex;
    align-items: center;
    gap: 8rem;
    background: #fff;
    /* white card like on the site */
    border-radius: 8px;
    /* box-shadow: 0 36px 72px rgba(0, 0, 0, .07); */
    padding-right: 2rem;
    max-width: 1000px;
    margin: auto auto;
    box-shadow: 0px 40px 50px -6px rgba(0, 0, 0, 0.1)
}

/* Photo + layered gradient bars */
.vision-figure {
    position: relative;
    flex: 0 0 auto;
    max-width: 420px;
    /* keeps the image smaller */
    width: 100%;
    padding-left: 48px;
    /* space so left bar peeks out */
    isolation: isolate;
    margin: 0px !important;
    margin: auto auto;

}

/* .vision-figure::before,
.vision-figure::after {
    content: "";
    position: absolute;
    inset: auto;
    z-index: 0;
    border-radius: 2px;
    background: linear-gradient(180deg, #2E3192 0%, #1595D3 100%);
} */

/* .vision-figure::before {
  
    left: 0;
    top: 0px;
    bottom: 0px;
    width: 210px;
    filter: drop-shadow(0 22px 40px rgba(15, 32, 80, .25));
} */

.vision-figure::after {
    /* right gradient bar */
    right: -2.1rem;
    top: 0px;
    bottom: 0px;
    width: 180px;
    filter: drop-shadow(0 22px 40px rgba(15, 32, 80, .20));

}

.vision-figure img {
    position: relative;
    z-index: 1;
    /* sits above the bars */
    width: 90%;
    height: 430px;
    object-fit: cover;
    display: block;
    border-radius: 2px;
    transform: scale(.92);
    /* start smaller for animation */
    opacity: 0;
    transition: transform 2000ms ease, opacity 900ms ease;
}

.vision-figure.show img {
    transform: scale(1.1);
    opacity: 1;
}

.vision-content {
    flex: 1 1 auto;
    max-width: 640px;
}

.vision-title {
    font-size: 40px;
    font-weight: 700;
    letter-spacing: .01em;
    color: #111;
    margin: 0 0 10px 0;
}

.vision-underline {
    display: block;
    width: 86px;
    height: 4px;
    background: #2E3192;
    border-radius: 2px;
    margin: 8px 0 22px 0;
}

.vision-content p {
    color: #1a1a1a;
    font-size: 18px;
    line-height: 1.9;
    margin: 0 0 28px 0;
    line-height: 32px;
    font-weight: 500;
}

.vision-content .btn-more {
    background: linear-gradient(90deg, #2E3192 0%, #313b9f 100%);
    color: #fff;
    font-weight: 700;
    padding: 14px 22px;
    border-radius: 6px;
    display: inline-block;
}

/* ---------- Responsive ---------- */
@media (max-width:1100px) {
    .vision-title {
        font-size: 36px
    }

    .vision-content p {
        font-size: 17px;
    }

    .vision-wrapper {
        gap: 44px;
        padding: 40px
    }

    .vision-figure {
        max-width: 480px
    }
}

@media (max-width:900px) {
    .vision-wrapper {
        flex-direction: column;
        /* stack */

        padding: 34px 22px;
        text-align: left;
        /* keep left-aligned like site */
    }

    .vision-content {
        order: -1;
        width: 100%;
    }

    /* text ABOVE image on mobile */
    .vision-title {
        font-size: 32px
    }

    .vision-figure {
        padding-left: 34px;
        max-width: 420px;
        /* nice readable size on mobile */
        width: 100%;
        margin: 0 auto;
    }

    .vision-figure::before {
        left: 0;
        top: 0px;
        bottom: 0px;
        width: 170px;
    }

    .vision-figure::after {
        right: 0;
        top: 0px;
        bottom: 0px;
        width: 150px
    }
}

@media (max-width:520px) {
    .vision-title {
        font-size: 28px
    }

    .vision-content p {
        font-size: 16px;
    }

    .vision-figure {
        padding-left: 20px;
    }

    .vision-figure::before {
        width: 140px
    }

    .vision-figure::after {
        right: -18px;
        width: 120px
    }

    .vision-figure img {
        position: relative;
        z-index: 1;
        /* sits above the bars */
        width: 100%;
        height: auto;
        object-fit: cover;
        display: block;
        border-radius: 2px;
        transform: scale(.92);
        /* start smaller for animation */
        opacity: 0;
        transition: transform 2000ms ease, opacity 900ms ease;
    }

    .vision-figure::before,
    .vision-figure::after {
        content: "";
        position: absolute;
        inset: auto;
        z-index: 0;
        border-radius: 2px;
        background: linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
    }

}

/* =============== OUR MISSION (mirrors your Vision tweaks) =============== */
.mission-section {
    background: #ffffff;
    padding: 70px 0;
}

.mission-wrapper {
    display: flex;
    align-items: center;
    gap: 8rem;
    background: #fff;
    /* white card like on the site */
    border-radius: 8px;
    /* box-shadow: 0 36px 72px rgba(0, 0, 0, .07); */
    padding-right: 2rem;
    max-width: 1000px;
    margin: auto auto;
    box-shadow: 0px 40px 50px -6px rgba(0, 0, 0, 0.1);
    padding: 1rem;

}

/* Text */
.mission-content {
    flex: 1 1 auto;
    max-width: 640px;
    padding-left: 2.5rem;
}

.mission-title {
    font-size: 40px;
    font-weight: 700;
    letter-spacing: .01em;
    color: #111;
    margin: 0 0 10px 0;
}

.mission-underline {
    display: block;
    width: 86px;
    height: 4px;
    background: #2E3192;
    border-radius: 2px;
    margin: 8px 0 22px 0;
}

.mission-content p {
    color: #1a1a1a;
    font-size: 18px;
    line-height: 1.9;
    margin: 0 0 28px 0;
    line-height: 32px;
    font-weight: 500;
}

.mission-content .btn-more {
    background: linear-gradient(90deg, #2E3192 0%, #313b9f 100%);
    color: #fff;
    font-weight: 700;
    padding: 14px 22px;
    border-radius: 6px;
    display: inline-block;
}

/* Photo on the right + layered gradient bars (same measurements as your Vision) */
.mission-figure {
    position: relative;
    flex: 0 0 auto;
    max-width: 420px;
    /* matches your Vision max-width */
    width: 100%;
    padding-right: 48px;
    /* space so right bar peeks out */
    isolation: isolate;
    margin: auto auto;
    /* margin: 0px !important; */

}

/* .mission-figure::before,
.mission-figure::after {
    content: "";
    position: absolute;
    inset: auto;
    z-index: 0;
    border-radius: 2px;
    background: linear-gradient(180deg, #2E3192 0%, #1595D3 100%);
} */

/* .mission-figure::before {
    
    right: 0px;
    top: 0px;
    bottom: 0px;
    width: 210px;
    filter: drop-shadow(0 22px 40px rgba(15, 32, 80, .25));
} */

/* .mission-figure::after {
   
    left: -34px;
    top: 0px;
    bottom: 0px;
    width: 180px;
    filter: drop-shadow(0 22px 40px rgba(15, 32, 80, .20));
} */

.mission-figure img {
    position: relative;
    z-index: 1;
    /* sits above the bars */
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    border-radius: 2px;
    transform: scale(.92);
    padding-left: 2rem !important;
    /* start smaller for animation */
    opacity: 0;
    transition: transform 2000ms ease, opacity 900ms ease;
}

.mission-figure.show img {
    transform: scale(1.3);
    opacity: 1;
}

/* ---------- Responsive (mirrors your Vision breakpoints) ---------- */
@media (max-width:1100px) {
    .mission-title {
        font-size: 36px
    }

    .mission-content p {
        font-size: 17px
    }

    .mission-wrapper {
        gap: 44px;
        padding: 40px
    }

    .mission-figure {
        max-width: 480px;
        padding: 0px
    }

    /* same bump as your Vision at 1100px */
}

@media (max-width:900px) {
    .mission-wrapper {
        flex-direction: column;
        /* stack */
        /* gap: 28px; */
        padding: 34px 22px;
        text-align: left;
    }

    .mission-content {
        order: -1;
        width: 100%
    }

    /* text ABOVE image on mobile */
    .mission-title {
        font-size: 32px
    }

    .mission-figure img {
        width: 100%;
    }

    .mission-figure {

        padding: 0px;
        max-width: 420px;
        /* same as your Vision on mobile */
        width: 100%;
        margin-left: -13px;
    }

    /* .mission-figure::before {
        right: 0;
        top: 0px;
        bottom: 0px;
        width: 170px
    }

    .mission-figure::after {
        left: 0px;
        top: 0px;
        bottom: 0px;
        width: 150px
    } */
}

@media (max-width:520px) {
    .mission-title {
        font-size: 28px
    }

    .mission-content p {
        font-size: 16px
    }

    .mission-figure::before {
        width: 140px
    }

    .mission-figure::after {
        left: 0px;
        width: 120px
    }

    .mission-figure img {
        position: relative;
        z-index: 1;
        /* sits above the bars */
        width: 100%;
        height: auto;
        object-fit: cover;
        display: block;
        border-radius: 2px;
        transform: scale(.92);
        /* start smaller for animation */
        opacity: 0;
        transition: transform 2000ms ease, opacity 900ms ease;
    }

    /* .mission-figure::before,
.mission-figure::after {
    content: "";
    position: absolute;
    inset: auto;
    z-index: 0;
    border-radius: 2px;
    background: linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
} */


}

/* =============== OUR VALUES =============== */
.values-section {
    background: #ffffff;
    /* page background behind the card */
    padding: 70px 0;
    margin: auto auto;
}

.values-wrapper {
    display: flex;
    align-items: center;
    gap: 5rem;
    background: #fff;
    /* white card like on the site */
    border-radius: 8px;
    /* box-shadow: 0 36px 72px rgba(0, 0, 0, .07); */
    padding-right: 2rem;
    max-width: 1000px;
    margin: auto auto;
    box-shadow: 0px 40px 50px -6px rgba(0, 0, 0, 0.1);
    padding: 0px;

}

/* Image with gradient bars (same sizing as your Vision/Mission tweaks) */
.values-figure {
    position: relative;
    flex: 0 0 auto;
    max-width: 420px;
    /* keeps the image smaller */
    width: 100%;
    padding-left: 48px;
    /* space so left bar peeks out */
    isolation: isolate;
    margin: 0px !important;
    margin: auto auto;
}

.values-figure::before,
.values-figure::after {
    content: "";
    position: absolute;
    inset: auto;
    z-index: 0;
    border-radius: 2px;
    background: linear-gradient(180deg, #2E3192 0%, #1595D3 100%);
}

.values-figure::before {
    left: 0;
    top: 0px;
    bottom: 0px;
    width: 210px;
    filter: drop-shadow(0 22px 40px rgba(15, 32, 80, .25))
}

.values-figure::after {
    right: -34px;
    top: 0px;
    bottom: 0px;
    width: 180px;
    filter: drop-shadow(0 22px 40px rgba(15, 32, 80, .20))
}

.values-figure img {
    position: relative;
    z-index: 1;
    width: 90%;
    height: auto;
    display: block;
    border-radius: 2px;
    transform: scale(.92);
    opacity: 0;
    transition: transform 900ms ease, opacity 900ms ease;
}

.values-figure.show img {
    transform: scale(1.1);
    opacity: 1
}

/* Text */
.values-content {
    flex: 1 1 auto;
    max-width: 640px
}

.values-title {
    font-size: 40px;
    font-weight: 700;
    letter-spacing: .01em;
    color: #111;
    margin: 0 0 10px 0
}

.values-underline {
    display: block;
    width: 86px;
    height: 4px;
    background: #2E3192;
    border-radius: 2px;
    margin: 8px 0 22px 0
}

.values-list {
    list-style: none;
    padding: 0;
    margin: 0 0 28px 0
}

.values-list li {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.0;
    color: #111
}

.values-content .btn-more {
    background: linear-gradient(90deg, #2E3192 0%, #313b9f 100%);
    color: #fff;
    font-weight: 700;
    padding: 14px 22px;
    border-radius: 6px;
    display: inline-block;
}

/* Responsive */
@media (max-width:1100px) {
    .values-title {
        font-size: 36px
    }

    .values-list li {
        font-size: 24px;
        /* much larger, close to headline size */
        font-weight: 700;
        line-height: 1.6;
        color: #111;
    }

    .values-wrapper {
        gap: 44px;
        padding: 40px
    }

    .values-figure {
        max-width: 480px
    }
}

@media (max-width:900px) {
    .values-wrapper {
        flex-direction: column;
        /* gap: 28px; */
        padding: 34px 22px;
        text-align: left
    }

    .values-content {
        order: -1;
        width: 100%
    }

    .values-title {
        font-size: 32px
    }

    .values-figure {
        padding-left: 34px;
        max-width: 420px;
        width: 100%;
        margin: 0 auto
    }

    .values-figure::before {
        left: 0;
        top: 24px;
        bottom: 24px;
        width: 170px
    }

    .values-figure::after {
        right: -24px;
        top: 24px;
        bottom: 24px;
        width: 150px
    }
}

@media (max-width:520px) {
    .values-title {
        font-size: 28px
    }

    .values-list li {
        font-size: 20px
    }

    .values-figure {
        padding-left: 26px
    }

    .values-figure::before {
        width: 140px
    }

    .values-figure::after {
        right: -18px;
        width: 120px
    }

    .mission-content {
        padding: 0px;

    }


    .values-figure img {
        position: relative;
        z-index: 1;
        /* sits above the bars */
        width: 90%;
        height: auto;
        object-fit: cover;
        display: block;
        border-radius: 2px;
        transform: scale(.92);
        /* start smaller for animation */
        opacity: 0;
        transition: transform 2000ms ease, opacity 900ms ease;
    }

    .values-figure::before,
    .values-figure::after {
        content: "";
        position: absolute;
        inset: auto;
        z-index: 0;
        border-radius: 2px;
        background: linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
    }
}

/* =============== OUR COMMITMENTS (grid) =============== */
.commitments-section {
    background: #fff;
    padding: 80px 0 70px;
}

.commitments-wrap {
    display: grid;
    grid-template-columns: 0.8fr 1fr;
    /* left copy wider */
    gap: 56px 80px;
    align-items: start;
}

/* Left copy */
.commitments-title {
    font-size: 40px;
    line-height: 1.1;
    letter-spacing: .01em;
    font-weight: 700;
    color: #111;
    margin: 0 0 8px 0;
}

.commitments-sub {
    display: block;
    font-size: 22px;
    color: #222;
    margin-bottom: 10px;
    font-style: italic;
}

.commitments-underline {
    display: block;
    width: 110px;
    height: 4px;
    background: #2E3192;
    border-radius: 2px;
    margin: 12px 0 26px 0;
}

.commitments-copy p {
    font-size: 17px;
    line-height: 28px;
    color: #1a1a1a;
    margin: 0 0 28px 0;
}

/* Right grid of items */
.commitments-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(180px, 1fr));
    grid-auto-rows: minmax(160px, auto);
    gap: 70px 90px;
    align-items: start;
    justify-items: center;
}

.commitment {
    text-align: center;
    text-decoration: none;
    color: inherit;
}

.commitment img {
    width: 132px;
    height: 132px;
    object-fit: contain;
    display: block;
    margin: 0 auto 16px auto;
    transition: transform .25s ease, filter .25s ease;
}

.commitment .label {
    display: inline-block;
    font-weight: 700;
    font-size: 26px;
    line-height: 1.15;
    letter-spacing: .01em;
    text-transform: uppercase;
    text-align: center;
}

.commitment .label.red {
    color: #E2392E;
}

.commitment .label.blue {
    color: #3A8EE7;
}

.commitment .label.teal {
    color: #149C8F;
}

.commitment .label.orange {
    color: #F0821E;
}

/* Hover */
.commitment:hover img {
    transform: scale(1.04);
    filter: contrast(1.05)
}

/* Buttons reuse */
.commitments-copy .btn-more {
    background: linear-gradient(90deg, #2E3192 0%, #313b9f 100%);
    color: #fff;
    font-weight: 700;
    padding: 14px 22px;
    border-radius: 6px;
    display: inline-block;
}

/* Responsive */
@media (max-width:1200px) {
    .commitments-title {
        font-size: 48px
    }

    .commitments-sub {
        font-size: 24px
    }

    .commitments-copy p {
        font-size: 18px
    }

    .commitments-grid {
        gap: 56px 60px
    }
}

@media (max-width:900px) {
    .commitments-wrap {
        grid-template-columns: 1fr;
        /* stack */
        gap: 34px;
    }

    .commitments-title {
        font-size: 40px
    }

    .commitments-sub {
        font-size: 20px
    }

    .commitments-grid {
        gap: 42px 36px;
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width:560px) {
    .commitments-title {
        font-size: 32px;
    }

    .commitments-sub {
        font-size: 18px;
    }

    .commitments-grid {
        grid-template-columns: repeat(2, 1fr);
        /* 2 per row on mobile devices */
        gap: 30px 20px;
    }

    .commitment img {
        width: 110px;
        height: 110px;
    }

    .commitment .label {
        font-size: 18px;
    }
}

/* Extra small mobile devices */
@media (max-width:375px) {
    .commitments-grid {
        gap: 24px 16px;
    }

    .commitment img {
        width: 90px;
        height: 90px;
    }

    .commitment .label {
        font-size: 16px;
    }
}

/* Very small mobile devices - 320px */
@media (max-width:320px) {
    .commitments-grid {
        gap: 20px 12px;
    }

    .commitment img {
        width: 80px;
        height: 80px;
    }

    .commitment .label {
        font-size: 14px;
    }
}

/* =============== INSTAGRAM SECTION =============== */
.instagram-section {
    background: #fff;
    padding: 70px 0;
    text-align: center;
}

.insta-title {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: .02em;
    color: #111;
    margin: 0;
}

.insta-underline {
    display: block;
    width: 60px;
    height: 3px;
    background: #2E3192;
    border-radius: 2px;
    margin: 14px auto 0;
}

/* =============== DONATE SECTION =============== */
.donate-section {
    background: #2E3192;
    /* purple background */
    color: #fff;
    padding: 56px 0 70px;
    /* smaller */
    text-align: center;
}

.donate-title {
    font-size: 28px;
    /* smaller */
    line-height: 1.35;
    font-weight: 800;
    letter-spacing: .02em;
    margin: 0 0 22px 0;
}

.donate-step {
    margin: 8px 0 12px;
    font-size: 16px;
    font-weight: 700;
}

.donate-step .req {
    color: #ffcccc
}

/* Amounts row */
.donate-amounts {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.amount {
    background: #0a0a0a;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 10px 18px;
    /* smaller */
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: transform .12s ease, background .12s ease, color .12s ease;
}

.amount.is-active {
    background: #fff;
    color: #000;
}

/* requested selected style */
.amount:hover {
    transform: translateY(-1px);
}

.amount.other {
    background: #fff;
    color: #111;
    padding: 0;
    display: flex;
    align-items: center;
    border-radius: 6px;
}

.amount.other input {
    width: 110px;
    height: 40px;
    border: 0;
    padding: 0 10px;
    font-size: 16px;
    font-weight: 700;
    color: #111;
    background: #fff;
    border-radius: 6px;
    outline: none;
}

/* Countries grid */
.donate-countries {
    display: grid;
    grid-template-columns: repeat(3, minmax(220px, 1fr));
    /* smaller */
    gap: 12px;
    max-width: 900px;
    margin: 8px auto 22px;
}

.country {
    background: #0a0a0a;
    color: #fff;
    border: 0;
    border-radius: 8px;
    height: 62px;
    /* smaller */
    padding: 0 16px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: transform .12s ease, background .12s ease, color .12s ease;
}

.country:hover {
    transform: translateY(-1px);
}

.country.is-active {
    background: #fff;
    color: #000;
}

/* requested selected style */

/* CTA */
.donate-cta {
    margin-top: 12px;
}

.donate-now {
    background: #0a0a0a;
    color: #fff;
    border: 0;
    border-radius: 6px;
    padding: 12px 22px;
    /* smaller */
    font-size: 16px;
    font-weight: 800;
    letter-spacing: .08em;
    cursor: pointer;
    transition: opacity .12s ease, transform .12s ease;
}

.donate-now:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.donate-now:not(:disabled):hover {
    transform: translateY(-1px);
}

/* Bangladesh (BDT) extra options */
.bdt-options {
    max-width: 900px;
    margin: 10px auto 6px;
}

.bdt-methods {
    display: grid;
    grid-template-columns: repeat(3, minmax(220px, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}

.bdt-method {
    position: relative;
    display: block;
}

.bdt-method input {
    position: absolute;
    inset: 0;
    opacity: 0;
}

.bdt-method .card {
    background: #0a0a0a;
    /* match country default */
    color: #fff;
    border-radius: 10px;
    padding: 18px 16px;
    height: 100%;
    display: grid;
    place-content: center;
    gap: 6px;
    border: 0;
    box-shadow: 0 6px 14px rgba(0, 0, 0, .18);
    transition: transform .12s ease, background .12s ease, color .12s ease, box-shadow .12s ease;
    text-align: center;
}

.bdt-method .card i {
    font-size: 22px;
    color: #fff;
}

.bdt-method .card .title {
    font-weight: 700;
}

.bdt-method .card .hint {
    color: #ddd;
}

.bdt-method:hover .card {
    transform: translateY(-1px);
}

.bdt-method input:checked+.card {
    background: #fff;
    /* selected like country */
    color: #000;
    box-shadow: 0 6px 14px rgba(0, 0, 0, .12);
}

.bdt-method input:checked+.card i {
    color: #000;
}

.bdt-method input:checked+.card .hint {
    color: #555;
}

.bdt-online-wrap {
    margin-top: 12px;
}

.donor-card {
    background: rgba(255, 255, 255, .96);
    color: #111;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, .06);
    padding: 14px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .10);
}

.donor-fields-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.donor-input {
    width: 100%;
    height: 44px;
    border: 1px solid #dcdcdc;
    border-radius: 10px;
    padding: 10px 12px;
    outline: none;
}

.donor-input:focus {
    border-color: #29B6E6;
    box-shadow: 0 0 0 3px rgba(41, 182, 233, .18);
}

/* Modals — improve readability + responsiveness */
.modal-responsive {
    max-width: 640px;
}

.modal-body.readable {
    white-space: pre-line;
    line-height: 1.5;
}

/* Responsive */
@media (max-width:1024px) {
    .donate-title {
        font-size: 24px
    }

    .donate-countries {
        grid-template-columns: repeat(2, minmax(220px, 1fr));
    }

    .bdt-methods {
        grid-template-columns: repeat(2, minmax(220px, 1fr));
    }

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

@media (max-width:768px) {
    .donate-section {
        padding: 48px 0 60px;
    }

    .donate-title {
        font-size: 22px;
    }

    .donate-amounts {
        gap: 8px;
    }

    .amount {
        padding: 9px 16px;
        font-size: 15px;
    }

    .amount.other input {
        width: 100px;
        font-size: 15px;
    }
}

@media (max-width:576px) {
    .donate-section {
        padding: 40px 0 50px;
    }

    .donate-title {
        font-size: 20px;
        margin-bottom: 18px;
    }

    .donate-step {
        font-size: 15px;
    }

    .donate-countries {
        grid-template-columns: 1fr;
    }

    .country {
        height: 56px;
        font-size: 15px
    }

    .bdt-methods {
        grid-template-columns: 1fr;
    }

    .donor-fields-grid {
        grid-template-columns: 1fr;
    }

    .modal-responsive {
        margin: 0 12px;
    }

    .donate-now {
        padding: 11px 20px;
        font-size: 15px;
    }

    .amount {
        padding: 8px 14px;
        font-size: 14px;
    }
}

@media (max-width:375px) {
    .donate-section {
        padding: 35px 0 45px;
    }

    .donate-title {
        font-size: 18px;
        margin-bottom: 16px;
    }

    .donate-step {
        font-size: 14px;
    }

    .country {
        height: 52px;
        font-size: 14px;
        padding: 0 14px;
    }

    .donate-now {
        padding: 10px 18px;
        font-size: 14px;
    }

    .amount {
        padding: 7px 12px;
        font-size: 13px;
    }

    .amount.other input {
        width: 90px;
        font-size: 14px;
        height: 36px;
    }

    .bdt-method .card {
        padding: 14px 12px;
    }

    .bdt-method .card i {
        font-size: 20px;
    }

    .donor-input {
        height: 40px;
        font-size: 14px;
    }
}

@media (max-width:320px) {
    .donate-section {
        padding: 30px 0 40px;
    }

    .donate-title {
        font-size: 16px;
        margin-bottom: 14px;
    }

    .donate-step {
        font-size: 13px;
        margin: 6px 0 10px;
    }

    .donate-amounts {
        gap: 6px;
    }

    .amount {
        padding: 6px 10px;
        font-size: 12px;
    }

    .amount.other input {
        width: 80px;
        font-size: 13px;
        height: 32px;
    }

    .donate-countries {
        gap: 8px;
    }

    .country {
        height: 48px;
        font-size: 13px;
        padding: 0 12px;
    }

    .donate-now {
        padding: 9px 16px;
        font-size: 13px;
    }

    .bdt-methods {
        gap: 8px;
    }

    .bdt-method .card {
        padding: 12px 10px;
    }

    .bdt-method .card i {
        font-size: 18px;
    }

    .bdt-method .card .title {
        font-size: 14px;
    }

    .bdt-method .card .hint {
        font-size: 12px;
    }

    .donor-input {
        height: 38px;
        font-size: 13px;
        padding: 8px 10px;
    }

    .donor-card {
        padding: 12px;
    }
}

/* ===================== ABOUT PAGE (ap-*) ===================== */
/* HERO */
.ap-hero {
    background: #2E3192;
    color: #fff;
    padding: 80px 0
}

.ap-hero__wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px
}

.ap-hero__title {
    font-size: 64px;
    font-weight: 600;
    margin: 0
}

.ap-hero__underline {
    display: block;
    width: 80px;
    height: 4px;
    background: #fff;
    margin: 16px 0
}

.ap-hero__img img {
    max-width: 520px;
    width: 100%;
    border-radius: 4px
}

/* VISION */
.ap-vision {
    background: #fff;
    color: #111;
    justify-content: left;
    padding: 80px 0;
}

.ap-vision__wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 20px;
}

.ap-ttl {
    font-size: 40px;
    /* font-weight: 0; */
    margin: 0
}

.ap-udl {
    display: block;
    width: 80px;
    height: 3px;
    background: #2E3192;
    margin: 12px 0 26px
}

.ap-lead {
    font-size: 18px;
    font-weight: 620;
    margin-bottom: 20px
}

.ap-vision p {
    line-height: 1.75;
    color: #222;
    margin-bottom: 18px
}

/* MISSION */
.ap-mission {
    background: #fff;
    padding: 80px 0
}

.ap-mission__wrap {
    display: flex;
    align-items: center;
    gap: 60px;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 20px;
}

.ap-mission__fig {
    flex: 0 0 auto;
    max-width: 420px;
    position: relative;
    padding-left: 40px
}

.ap-mission__fig::before {
    content: "";
    position: absolute;
    left: 0;
    top: 28px;
    bottom: -28px;
    width: 400px;
    background: linear-gradient(180deg, #2E3192 0%, #1595D3 100%);
    border-radius: 2px;
    z-index: 0
}

.ap-mission__fig img {
    position: relative;
    z-index: 1;
    width: 100%;
    border-radius: 4px
}

.ap-mission__content {
    flex: 1
}

.ap-mission__content p {
    line-height: 1.75;
    color: #222;
    margin-bottom: 18px
}

/* Responsive */
@media (max-width:960px) {
    .ap-hero__wrap {
        flex-direction: column;
        text-align: center
    }

    .ap-hero__title {
        font-size: 48px
    }

    .ap-vision__wrap {
        padding: 0 20px;
    }

    .ap-ttl {
        font-size: 32px
    }

    .ap-mission__wrap {
        flex-direction: column;
        padding: 0 20px;
    }

    .ap-mission__content {
        order: -1;
        width: 100%
    }

    .ap-mission__fig {
        order: 0;
        padding-left: 20px;
        max-width: 100%;
    }

    .ap-mission__fig::before {
        width: 90%;
        max-width: 350px;
    }
}

@media (max-width:576px) {
    .ap-hero__title {
        font-size: 36px;
    }

    .ap-ttl {
        font-size: 28px;
    }

    .ap-mission__fig {
        padding-left: 10px;
    }

    .ap-mission__fig::before {
        width: 85%;
        max-width: 280px;
        bottom: -20px;
    }
}

/* === tiny container helper (feel free to remove if you already have one) === */
.ap-container {
    max-width: 900px;
    /* margin: 0 auto; */
    /* padding: 0 24px */
}

/* shared title + underline */
.ap-ttl {
    font: 700 40px/1.15 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial
}

.ap-udl {
    display: block;
    width: 86px;
    height: 4px;
    background: #2E3192;
    border-radius: 2px;
    margin: 14px 0 26px
}

/* button */
.ap-btn {
    display: inline-block;
    background: #2E3192;
    color: #fff;
    text-decoration: none;
    font-weight: 800;
    padding: 12px 22px;
    border-radius: 6px;
    letter-spacing: .04em
}

/* 1) CORE VALUES */
.ap-values {
    padding: 80px 0;
    padding-right: 0px !important;
}

.ap-values__wrap {
    display: flex;
    border-radius: 0px;
    overflow: hidden;
    box-shadow: 0 36px 72px rgba(0, 0, 0, .1);
}

.ap-values__content {
    flex: 1;
    background: #fff;
    padding: 40px;
}

.ap-values__list {
    list-style: none;
    margin: 22px 0 0;
    padding: 0;
}

.ap-values__list li {
    font-weight: 700;
    font-size: 36px;
    color: #111;
    /* margin: 01px 0; */
    line-height: 1.1;
}

.ap-values__bg {
    flex: 1;
    background: linear-gradient(180deg, #0d7fbf 0%, #2E3192 100%);
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    box-shadow: 0 36px 72px rgba(0, 0, 0, .1);
}


/* 2) HISTORY */
.ap-history {
    background: #fff;
    padding: 80px 0
}

.ap-history__wrap {
    display: flex;
    border-radius: 0px;
    overflow: hidden;
    box-shadow: 0 36px 72px rgba(0, 0, 0, .1);
}

.ap-history__bg {
    flex: 1;
    background: linear-gradient(180deg, #0d7fbf 0%, #2E3192 100%);
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

.ap-history__content {
    flex: 1;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 36px 72px rgba(0, 0, 0, .07);
    padding: 40px
}

.ap-history__lead {
    font-size: 20px;
    margin: 0 0 18px;
    color: #111
}

/* 3) STRUCTURE & LEADERSHIP */
.ap-structure {
    background: #fff;
    padding: 80px 0;
    padding-right: 0px !important;
}

.ap-structure__wrap {
    display: flex;
    border-radius: 0px;
    overflow: hidden;
    box-shadow: 0 36px 72px rgba(0, 0, 0, .1);
}

.ap-structure__content {
    flex: 1;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 36px 72px rgba(0, 0, 0, .07);
    padding: 40px
}

.ap-structure__content p {
    color: #222;
    line-height: 1.75;
    margin: 0 0 16px
}

.ap-structure__bg {
    flex: 1;
    background: linear-gradient(180deg, #0d7fbf 0%, #2E3192 100%);
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    height: 5px !important;
    box-shadow: 0 36px 72px rgba(0, 0, 0, .08)
}

/* 4) INTERNATIONAL ORG */
.ap-intl {
    background: #fff;
    padding: 80px 0;
    padding-right: 0px !important;
}

.ap-intl__wrap {
    display: flex;
    border-radius: 0px;
    overflow: hidden;
    box-shadow: 0 36px 72px rgba(0, 0, 0, .1);
}

.ap-intl__content {
    flex: 1;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 36px 72px rgba(0, 0, 0, .07);
    padding: 40px
}

.ap-intl__panel {
    flex: 1;
    /* border-radius: 8px; */
    box-shadow: 0 36px 72px rgba(0, 0, 0, .08);
    background: linear-gradient(180deg, #2E3192 0%, #1f3b73 50%, #2b2b2b 100%);
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    color: #fff
}

.ap-intl__label {
    margin: 0 0 18px;
    padding: 30px 0 0 30px;
    font: 600 36px/1.2 ui-sans-serif, system-ui
}

.ap-intl__links {
    list-style: none;
    margin: 0;
    /* line-height: .2; */
    padding-left: 30px;
}

.ap-intl__links li {
    margin: 14px 0
}

.ap-intl__links a {
    font-weight: 900;
    font-size: 32px;
    line-height: 1.05;
    color: #00C2FF;
    text-decoration: none
}

/* ===================== Responsives ===================== */

/* tablets & down */
@media (max-width:960px) {
    .ap-ttl {
        font-size: 32px
    }

    .ap-values__wrap,
    .ap-history__wrap,
    .ap-structure__wrap,
    .ap-intl__wrap {
        flex-direction: column
    }

    /* remove decorative boxes on small devices (but NOT discover panel) */
    .ap-values__bg,
    .ap-history__bg,
    .ap-structure__bg {
        display: none
    }

    /* International panel stays, just adjust padding & spacing */
    .ap-intl__panel {
        padding: 24px
    }

    .ap-intl__label {
        font-size: 18px
    }

    .ap-intl__links a {
        font-size: 26px
    }
}

/* small phones */
@media (max-width:520px) {
    .ap-container {
        padding: 0 16px
    }

    .ap-ttl {
        font-size: 26px
    }

    .ap-udl {
        width: 60px;
        height: 2px;
        margin: 10px 0 16px
    }

    .ap-values__content,
    .ap-history__content,
    .ap-structure__content,
    .ap-intl__content {
        padding: 22px
    }

    .ap-values__list li {
        font-size: 22px;
        margin: 8px 0
    }

    .ap-history__lead {
        font-size: 16px
    }

    /* keep gradient for discover, just shrink text */
    .ap-intl__panel {
        padding: 20px
    }

    .ap-intl__links a {
        font-size: 20px
    }

    .ap-btn {
        width: 100%;
        text-align: center;
        font-size: 15px;
        padding: 10px 16px
    }
}

/* container helper (use your project container if you already have one) */
.ap-container {
    max-width: 1000px;
    margin: 0 auto;
    /* padding: 0 24px */
}

/* shared title + underline + button (kept consistent with your site) */
.ap-ttl {
    font: 700 40px/1.15 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial
}

.ap-udl {
    display: block;
    width: 86px;
    height: 4px;
    background: #2E3192;
    border-radius: 2px;
    margin: 14px 0 24px
}

.ap-btn {
    display: inline-block;
    background: #2E3192;
    color: #fff;
    text-decoration: none;
    font-weight: 800;
    padding: 12px 22px;
    border-radius: 6px;
    letter-spacing: .04em
}

/* =============== SUPPORT =============== */
.ap-support {
    background: #fff;
    padding: 80px 0;
    padding-right: 0px !important;
}

.ap-support__wrap {
    display: flex;
    border-radius: 0px;
    overflow: hidden;
    box-shadow: 0 36px 72px rgba(0, 0, 0, .1);
}

/* left gradient panel */
.ap-support__bg {
    flex: 1;
    min-height: 360px;
    /* border-radius: 8px; */
    background: linear-gradient(180deg, #0D7FBF 0%, #2E3192 100%);
    box-shadow: 0 36px 72px rgba(0, 0, 0, .08);
}

/* right content card */
.ap-support__card {
    flex: 1;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 36px 72px rgba(0, 0, 0, .07);
    padding: 40px;
}

.ap-support__text p {
    color: #222;
    line-height: 1.75;
    margin: 0 0 16px
}

/* =============== REPORTS =============== */
.ap-reports {
    background: #fff;
    padding: 80px 0
}

.ap-reports__wrap {
    display: grid;
    grid-template-columns: 1.1fr 16px 1.2fr;
    /* card | bar | image */
    align-items: center;
    gap: 40px;
}

/* left white card */
.ap-reports__card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 36px 72px rgba(0, 0, 0, .07);
    padding: 40px;
}

/* middle gradient bar */
.ap-reports__bar {
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #2E3192 0%, #1595D3 100%);
    border-radius: 6px;
    box-shadow: 0 36px 72px rgba(0, 0, 0, .06);
}

/* right image block (overlaps slightly for depth) */
.ap-reports__figure {
    margin: 0;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 36px 72px rgba(0, 0, 0, .12);
}

.ap-reports__figure img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* =============== Responsive =============== */
@media (max-width:960px) {

    /* SUPPORT: stack, keep gradient panel on top */
    .ap-support__wrap {
        flex-direction: column
    }

    .ap-support__bg {
        min-height: 220px
    }

    /* REPORTS: stack – card, bar, image */
    .ap-reports__wrap {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .ap-reports__bar {
        height: 10px;
        border-radius: 5px
    }
}

@media (max-width:520px) {
    .ap-ttl {
        font-size: 26px
    }

    /* reuse from earlier set */
    .ap-udl {
        width: 60px;
        height: 2px;
        margin: 10px 0 16px
    }

    .ap-support__card,
    .ap-reports__card {
        padding: 22px
    }

    .ap-support__bg {
        min-height: 160px
    }

    .ap-btn {
        width: 100%;
        text-align: center;
        font-size: 15px;
        padding: 10px 16px
    }
}


/* COUNTRY HERO (Unique styles for country pages) */
.country-hero {
    background: linear-gradient(135deg, #2E3192 0%, #29B6E6 100%);
    padding: 6rem 1rem;
    text-align: center;
    color: #fff;
}


.country-hero__title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.country-hero__underline {
    display: block;
    width: 70px;
    height: 3px;
    background: #fff;
    margin: 0 auto;
    border-radius: 2px;
}

/* ===========================
   SUPPORT LOGOS SECTION (spx-*)
   Namespaced to avoid conflicts
   =========================== */
.spx-support {
    background: #f3f4f6;
    /* light gray panel */
    padding: 4rem 0;
    color: var(--dark, #1f2937);
}

.spx-wrap {
    width: min(1200px, 92%);
    margin-inline: auto;
    text-align: center;
}

.spx-title {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: .04em;
}

.spx-title-underline {
    display: block;
    width: 64px;
    height: 2px;
    margin: .5rem auto 0;
    background: currentColor;
    opacity: .25;
    border-radius: 2px;
}

.spx-subtitle {
    margin: .75rem auto 2rem;
    max-width: 60ch;
    font-size: .98rem;
    color: #6b7280;
    /* slate-500 */
}

/* Grid */
.spx-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(120px, 1fr));
    gap: 1.5rem;
    align-items: stretch;
}

/* Card = perfect square; centers the logo inside */
.spx-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
    display: grid;
    place-items: center;
    aspect-ratio: 1 / 1;
    padding: 1rem;
    transition: transform .2s ease, box-shadow .2s ease;
}

.spx-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .10);
}

.spx-card img {
    width: 100%;
    height: 100%;
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
}

/* Empty state (rare) */
.spx-empty {
    grid-column: 1 / -1;
    margin: 1rem 0 0;
    color: #9ca3af;
}

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
    .spx-grid {
        grid-template-columns: repeat(5, minmax(110px, 1fr));
    }
}

@media (max-width: 900px) {
    .spx-grid {
        grid-template-columns: repeat(4, minmax(100px, 1fr));
    }
}

@media (max-width: 560px) {
    .spx-grid {
        grid-template-columns: repeat(3, minmax(90px, 1fr));
        gap: 1rem;
    }
}

@media (max-width: 520px) {
    .spx-wrap {
        width: 94%;
    }

    .spx-title {
        font-size: 1.3rem;
    }

    .spx-grid {
        grid-template-columns: repeat(2, minmax(120px, 1fr));
    }
}



.content-highlight-card {
    border: none;
    text-align: left;
    transition: transform 0.3s ease;
}

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

.content-highlight-img {
    width: 100%;
    height: 160px;
    object-fit: cover;
}

.content-toggle-title {
    font-size: 1.05rem;
    font-weight: bold;
    cursor: pointer;
}

.content-toggle-icon {
    min-height: 20px;
    min-width: 20px;
    background-color: #2D318B;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    color: white;
    margin-left: 8px;
}

.content-card-text {
    font: ui-sans-serif, system-ui;
    font-size: 17px;
    font-weight: 500;
    line-height: 28.9px;
    color: rgb(0, 0, 0);
}

/* container */
.dx-wrap {
    width: min(900px, 86%);
    margin-inline: auto
}

/* HERO band (keep tall bg) */
.dx-hero {
    background: linear-gradient(180deg, #2E3192 0%, #3b3f9e 100%);
    color: #fff;
    padding: 66px 0 120px;
}

.dx-hero-title {
    /* bigger but still not ultra-bold */
    font: 700 58px/1.22 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.dx-hero-udl {
    display: block;
    width: 70px;
    height: 3px;
    background: #fff;
    border-radius: 2px;
    margin-top: 16px
}

/* MAIN area */
.dx-donate {
    background: linear-gradient(180deg, #ffffff 0%, #ffffff 70%, #f8f9fb 100%);
    padding: 0 0 160px;
    /* extra room below for more vertical breathing */
}

.dx-grid {
    display: grid;
    grid-template-columns: 0.8fr 1fr;
    gap: 0px;
    align-items: start;
    position: relative;
}

/* Left copy */
.dx-left {
    padding-top: 38px
}

.dx-title {
    /* larger headline */
    font: 700 38px/1.22 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
    color: #111;
    letter-spacing: .01em;
    text-transform: uppercase;
    margin: 0;
}

.dx-udl {
    display: block;
    width: 76px;
    height: 3px;
    background: #2E3192;
    border-radius: 2px;
    margin: 16px 0 24px
}

.dx-copy {
    /* slightly larger text */
    font-size: 18px;
    line-height: 1.95;
    color: #1a1a1a;
    margin: 0 0 16px;
}

/* Buttons */
.dx-ctas {
    display: flex;
    gap: 20px;
    margin-top: 20px
}

.dx-btn {
    display: inline-block;
    padding: 14px 20px;
    border-radius: 6px;
    font: 800 14px/1 ui-sans-serif, system-ui;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: filter .15s ease, transform .15s ease;
}

.dx-btn:hover {
    filter: brightness(.95);
    transform: translateY(-1px)
}

.dx-btn-primary {
    background: #2E3192;
    color: #fff
}

/* Logos */
.dx-logos {
    display: flex;
    gap: 30px;
    align-items: center;
    margin-top: 28px
}

.dx-logos img {
    width: 44px;
    height: auto;
    display: block
}

/* Right figure — smaller image, more vertical spacing, overlap retained */
.dx-figure {
    position: relative;
    margin: 0;
    align-self: start;
    justify-self: end;
    margin-top: -160px;
    /* increased lift into hero (more vertical separation) */
    margin-bottom: 38px;
    /* more space under the image block */
}

.dx-photo {
    display: block;
    width: min(420px, 36vw);
    /* decreased image size further */
    height: auto;
    object-fit: cover;
    box-shadow: 0 36px 72px rgba(0, 0, 0, .18);

    /* one-time, slight drop on load (about ~0.5in visually on common DPIs) */
    transform: translateY(-10px);
    animation: dxDropOnce 1.6s ease-out 0.15s 1 forwards;
    will-change: transform;
}

/* one-way (up -> down) only, no reverse, no loop */
@keyframes dxDropOnce {
    from {
        transform: translateY(-10px);
    }

    to {
        transform: translateY(0);
    }
}

/* Responsive */
@media (max-width:1100px) {
    .dx-hero-title {
        font-size: 52px
    }

    .dx-figure {
        margin-top: -120px
    }

    .dx-photo {
        width: min(400px, 42vw)
    }
}

@media (max-width:920px) {
    .dx-grid {
        grid-template-columns: 1fr;
        gap: 30px
    }

    .dx-figure {
        order: -1;
        justify-self: center;
        margin-top: -90px;
        margin-bottom: 26px
    }

    .dx-left {
        padding-top: 0
    }

    .dx-photo {
        width: min(480px, 92vw)
    }
}

@media (max-width:768px) {
    .dx-donate {
        padding: 0 0 120px;
    }

    .dx-figure {
        margin-top: -70px;
        margin-bottom: 20px;
    }

    .dx-photo {
        width: min(420px, 90vw);
        box-shadow: 0 28px 56px rgba(0, 0, 0, .16);
    }

    .dx-title {
        font-size: 30px;
    }

    .dx-copy {
        font-size: 17px;
        line-height: 1.85;
    }

    .dx-logos {
        gap: 24px;
        margin-top: 24px;
    }

    .dx-logos img {
        width: 40px;
    }
}

@media (max-width:576px) {
    .dx-hero-title {
        font-size: 42px;
        line-height: 1.25
    }

    .dx-donate {
        padding: 0 0 100px;
    }

    .dx-title {
        font-size: 28px;
        line-height: 1.25
    }

    .dx-udl {
        width: 64px;
        height: 2.5px;
        margin: 14px 0 20px;
    }

    .dx-copy {
        font-size: 16px;
        line-height: 1.75;
        margin: 0 0 14px;
    }

    .dx-ctas {
        flex-wrap: wrap;
        gap: 14px;
        margin-top: 16px;
    }

    .dx-btn {
        padding: 12px 18px;
        font-size: 13px;
    }

    .dx-figure {
        margin-top: -60px;
        margin-bottom: 16px;
    }

    .dx-photo {
        width: min(360px, 88vw);
        box-shadow: 0 24px 48px rgba(0, 0, 0, .14);
    }

    .dx-logos {
        gap: 20px;
        margin-top: 20px;
    }

    .dx-logos img {
        width: 36px;
    }
}

@media (max-width:375px) {
    .dx-hero-title {
        font-size: 36px;
    }

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

    .dx-title {
        font-size: 24px;
    }

    .dx-udl {
        width: 56px;
        height: 2px;
        margin: 12px 0 18px;
    }

    .dx-copy {
        font-size: 15px;
        line-height: 1.7;
    }

    .dx-btn {
        padding: 11px 16px;
        font-size: 12px;
    }

    .dx-figure {
        margin-top: -50px;
        margin-bottom: 14px;
    }

    .dx-photo {
        width: min(320px, 86vw);
        box-shadow: 0 20px 40px rgba(0, 0, 0, .12);
    }

    .dx-logos {
        gap: 16px;
        margin-top: 18px;
    }

    .dx-logos img {
        width: 32px;
    }

    .dx-ctas {
        gap: 12px;
    }
}

@media (max-width:320px) {
    .dx-hero-title {
        font-size: 32px;
    }

    .dx-donate {
        padding: 0 0 70px;
    }

    .dx-title {
        font-size: 22px;
    }

    .dx-udl {
        width: 48px;
        height: 2px;
        margin: 10px 0 16px;
    }

    .dx-copy {
        font-size: 14px;
        line-height: 1.65;
        margin: 0 0 12px;
    }

    .dx-btn {
        padding: 10px 14px;
        font-size: 11px;
        letter-spacing: 0.04em;
    }

    .dx-figure {
        margin-top: -40px;
        margin-bottom: 12px;
    }

    .dx-photo {
        width: min(280px, 84vw);
        box-shadow: 0 16px 32px rgba(0, 0, 0, .10);
    }

    .dx-logos {
        gap: 14px;
        margin-top: 16px;
        flex-wrap: wrap;
    }

    .dx-logos img {
        width: 30px;
    }

    .dx-ctas {
        gap: 10px;
        width: 100%;
    }

    .dx-btn {
        flex: 1 1 100%;
        text-align: center;
    }
}

/* =========================
   FRIENDSHIP Support Page
   ========================= */

.support-page {
    background: #fff;
    color: #111;
    padding: clamp(28px, 3vw, 48px) 0 clamp(44px, 5vw, 72px);
    font-family: var(--font-family);
}

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

.support-title {
    font-weight: 700;
    letter-spacing: 0.3px;
    line-height: 1.2;
    margin: 0 0 12px;
    font-size: clamp(22px, 2.8vw, 30px);
    /* smaller than before */
}

.support-lead {
    font-size: clamp(13px, 1.3vw, 16px);
    /* reduced */
    line-height: 1.7;
    color: #222;
    max-width: 100%;
    margin: 0 0 clamp(24px, 3vw, 36px);
}

/* Single grid */
.support-grid {
    display: grid;
    grid-gap: clamp(20px, 2.8vw, 40px) clamp(22px, 3vw, 50px);
    justify-items: center;
    align-items: center;
    margin-bottom: clamp(32px, 5vw, 60px);
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

/* Each logo cell */
.support-logo {
    margin: 0;
    padding: 0;
    display: grid;
    place-items: center;
    width: 100%;
}

.support-logo img {
    display: block;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    filter: none;
    max-height: clamp(60px, 7vw, 100px);
    /* smaller logo size */
}

/* Footnote */
.support-note {
    max-width: 900px;
    margin: clamp(20px, 3.5vw, 36px) auto 0;
    font-size: clamp(12px, 1.1vw, 15px);
    /* slightly smaller */
    line-height: 1.8;
    color: #333;
    font-style: italic;
}

.support-asterisk {
    font-weight: 700;
    margin-right: 5px;
}

/* Subtle image smoothing on high-dpi displays (optional) */
@supports (image-rendering: -webkit-optimize-contrast) {
    .support-logo img {
        image-rendering: -webkit-optimize-contrast;
    }
}

/* On very small screens */
@media (max-width: 420px) {
    .support-grid {
        grid-gap: 16px 16px;
    }
}



/* Where We Work Page */

/* ===============================
   FEATURED VIDEOS (fv- namespace)
   =============================== */

.fv-section {
    background: #f2f4f7;
    /* light gray like screenshot */
    padding: clamp(36px, 6vw, 90px) 0;
}

.fv-container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 22px;
}

.fv-title {
    margin: 0;
    text-align: center;
    font-family: var(--font-family);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .5px;
    line-height: 1.1;
    font-size: clamp(26px, 5.6vw, 44px);
    /* large, as in screenshot */
    color: #111;
}

.fv-underline {
    display: block;
    width: 130px;
    height: 3px;
    background: #2e3192;
    /* subtle brand accent */
    margin: 18px auto 34px;
    border-radius: 999px;
    opacity: .9;
}

/* Grid for videos */
.fv-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(22px, 3vw, 36px);
    align-items: start;
}

/* Video wrapper keeps 16:9 ratio and makes iframes responsive */
.fv-video {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    /* modern browsers */
    background: #000;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .14);
}

/* Fallback for older browsers (if aspect-ratio unsupported) */
@supports not (aspect-ratio: 16 / 9) {
    .fv-video::before {
        content: "";
        display: block;
        padding-top: 56.25%;
        /* 16:9 */
    }

    .fv-video iframe {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }
}

.fv-video iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

/* Responsive */
@media (max-width: 900px) {
    .fv-grid {
        grid-template-columns: 1fr;
    }
}

/* ===============================
   CHARS SECTION (gallery + lightbox)
   =============================== */

.chars-section {
    background: #f4f4f4;
    padding: clamp(40px, 6vw, 80px) 0;
    text-align: center;
    font-family: var(--font-family);
}

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

.chars-title {
    font-size: clamp(24px, 5vw, 40px);
    font-weight: 800;
    margin: 0 0 8px;
    letter-spacing: .5px;
}

.chars-underline {
    display: block;
    width: 66px;
    height: 2px;
    background: #111;
    margin: 10px auto 18px;
    border-radius: 999px;
}

.chars-description {
    max-width: 900px;
    margin: 0 auto 36px;
    font-size: 15px;
    line-height: 1.75;
    color: #333;
}

/* ===== Grid: 4 per row on desktop; 3/2/1 on smaller screens ===== */
.chars-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* desktop: 4 per row */
    gap: 20px;
}

@media (max-width: 1100px) {
    .chars-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* tablets: 3 */
}

@media (max-width: 820px) {
    .chars-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* small tablets: 2 */
}

@media (max-width: 520px) {
    .chars-grid {
        grid-template-columns: 1fr;
    }

    /* phones: 1 */
}

/* ===== Items ===== */
.chars-item {
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    background: #e9e9e9;
}

.chars-item img {
    width: 100%;
    height: 180px;
    /* uniform tile height; adjust if you want taller cards */
    object-fit: cover;
    display: block;
    transition: transform .28s ease;
}

.chars-item:hover img {
    transform: scale(1.05);
}

/* ===== Hover overlay + plus button ===== */
.chars-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, .7);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .25s ease;
}

.chars-item:hover .chars-overlay {
    opacity: 1;
}

.chars-plus {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #2E3192;
    color: #fff;
    border: none;
    font-size: 30px;
    line-height: 1;
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(46, 49, 146, .28);
}

/* ===============================
   LIGHTBOX
   =============================== */
.chars-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .88);
    display: none;
    /* toggled to flex in JS */
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 4vmin;
    /* breathing room on very small screens */
}

.chars-lightbox-img {
    /* IMPORTANT: force upscaling relative to viewport */
    width: 92vw;
    /* fill viewport width */
    max-width: 1600px;
    /* avoid absurdly large upscaling on huge screens */
    height: auto;
    max-height: 92vh;
    /* but never exceed viewport height */
    object-fit: contain;
    /* keep aspect ratio inside the box */
    border-radius: 6px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .45);
}

/* Close button */
.chars-close {
    position: absolute;
    top: 14px;
    right: 18px;
    color: #fff;
    font-size: 34px;
    font-weight: 800;
    cursor: pointer;
    line-height: 1;
    user-select: none;
    text-shadow: 0 2px 6px rgba(0, 0, 0, .5);
}

/* Optional: slight zoom-in animation when opening */
.chars-lightbox[style*="display: flex"] .chars-lightbox-img {
    animation: chars-zoom .18s ease-out;
}

@keyframes chars-zoom {
    from {
        transform: scale(.94);
        opacity: .7;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* ===============================
   MANGROVE PHOTO EXHIBITION SECTION
   =============================== */

.mangrove-section {
    background: #fff;
    padding: clamp(40px, 6vw, 80px) 20px;
    text-align: center;
    font-family: var(--font-family);
}

.mangrove-container {
    max-width: 960px;
    margin: 0 auto;
}

.mangrove-title {
    font-size: clamp(22px, 4.2vw, 30px);
    font-weight: 600;
    margin: 0 0 12px;
    line-height: 1.3;
}

.mangrove-title a {
    color: #111;
    text-decoration: none;
    transition: color 0.2s ease;
}


.mangrove-subtitle {
    font-size: clamp(14px, 2vw, 18px);
    font-weight: 400;
    color: #333;
    margin: 0;
    line-height: 1.6;
}

.mangrove-subtitle a {
    color: #333;
    text-decoration: none;
    transition: color 0.2s ease;
}

/* ===============================
   DONATE (Belgium) — compact version
   =============================== */
.donatebe-section {
    background: var(--donatebe-bg) center/cover no-repeat fixed;
    padding: clamp(32px, 5vw, 60px) 0 clamp(32px, 6vw, 70px);
    color: #0f0f0f;
    position: relative;
}

.donatebe-container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 22px;
}

.donatebe-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* equal halves */
    gap: 12px;
    /* small gap */
}

.donatebe-card {
    background: rgba(255, 255, 255, .75);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    border-radius: 6px;
    box-shadow: 0 16px 32px rgba(0, 0, 0, .12);
    padding: clamp(14px, 2.2vw, 18px);
    line-height: 1.6;
    font-size: 13px;
    width: 100%;
    /* take full column */
    max-width: none;
    /* remove the 420px limit */
    margin: 0;
    /* no auto margin */
}


.donatebe-card__title {
    font-weight: 700;
    font-size: clamp(13px, 1.6vw, 16px);
    /* smaller */
    margin: 0 0 6px;
}

.donatebe-link {
    color: #2E3192;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color .2s ease, border-color .2s ease;
    font-size: 13px;
}

.donatebe-link:hover {
    color: #2130b8;
    border-color: #2130b8;
}

.donatebe-note {
    max-width: 780px;
    /* narrower note */
    margin: 0 auto;
    background: rgba(255, 255, 255, .75);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    border-radius: 6px;
    box-shadow: 0 16px 32px rgba(0, 0, 0, .12);
    padding: clamp(12px, 1.8vw, 16px);
    text-align: center;
    line-height: 1.6;
    font-size: 12px;
    /* smaller note */
    font-style: italic;
}

/* Responsive */
@media (max-width: 1000px) {
    .donatebe-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .donatebe-section {
        padding: clamp(28px, 5vw, 50px) 0;
        background-attachment: scroll;
    }

    .donatebe-card {
        font-size: 12px;
        padding: 16px;
    }

    .donatebe-card__title {
        font-size: 15px;
    }

    .donatebe-link {
        font-size: 12px;
    }

    .donatebe-note {
        font-size: 11px;
        padding: 14px;
    }
}

@media (max-width: 576px) {
    .donatebe-section {
        padding: 24px 0;
    }

    .donatebe-container {
        padding: 0 18px;
    }

    .donatebe-card {
        font-size: 11px;
        padding: 14px;
    }

    .donatebe-card__title {
        font-size: 14px;
        margin-bottom: 5px;
    }

    .donatebe-link {
        font-size: 11px;
    }

    .donatebe-note {
        font-size: 10px;
        padding: 12px;
    }
}

@media (max-width: 375px) {
    .donatebe-section {
        padding: 20px 0;
    }

    .donatebe-container {
        padding: 0 16px;
    }

    .donatebe-card {
        font-size: 10px;
        padding: 12px;
        border-radius: 4px;
    }

    .donatebe-card__title {
        font-size: 13px;
    }

    .donatebe-grid {
        gap: 10px;
    }
}

@media (max-width: 320px) {
    .donatebe-section {
        padding: 18px 0;
    }

    .donatebe-container {
        padding: 0 14px;
    }

    .donatebe-card {
        font-size: 9px;
        padding: 10px;
    }

    .donatebe-card__title {
        font-size: 12px;
    }

    .donatebe-link {
        font-size: 10px;
    }

    .donatebe-note {
        font-size: 9px;
        padding: 10px;
    }
}


/* ===============================
   DONATION (Bangladesh) — donatebd-
   =============================== */

.donatebd-section {
    background: var(--donatebd-bg) center/cover no-repeat fixed;
    padding: clamp(28px, 5vw, 56px) 0 clamp(28px, 6vw, 64px);
    color: #0f0f0f;
}

.donatebd-container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 22px;
}

.donatebd-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    /* tight like screenshot */
    margin-bottom: clamp(20px, 4vw, 32px);
}

.donatebd-card {
    background: rgba(255, 255, 255, .74);
    /* translucent */
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    border-radius: 8px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .16);
    padding: clamp(16px, 2.2vw, 22px);
    line-height: 1.65;
    font-size: 14px;
}

.donatebd-title {
    font-weight: 700;
    font-size: 18px;
    margin: 0 0 10px;
}

.donatebd-btn {
    display: block;
    width: 240px;
    max-width: 100%;
    height: 48px;
    line-height: 48px;
    margin: 14px auto 10px;
    /* <-- auto centers the button */
    text-align: center;
    font-weight: 800;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: #fff;
    background: #2E3192;
    border-radius: 3px;
    box-shadow: 0 10px 20px rgba(46, 49, 146, .25);
    transition: opacity .2s ease, transform .06s ease;
    text-decoration: none;
}


.donatebd-btn:hover {
    opacity: .95;
}

.donatebd-btn:active {
    transform: translateY(1px);
}

.donatebd-btn--secondary {
    background: #3B4BC6;
    /* slightly different hue for USD */
}

/* Bottom note */
.donatebd-note {
    background: rgba(255, 255, 255, .74);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    border-radius: 8px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .16);
    padding: clamp(14px, 2vw, 18px);
    text-align: center;
    line-height: 1.8;
    font-size: 14px;
    max-width: 980px;
    margin: 0 auto;
}

.donatebd-link {
    color: #2E3192;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.donatebd-link:hover {
    color: #2130b8;
    border-color: #2130b8;
}

/* Responsive */
@media (max-width: 1024px) {
    .donatebd-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .donatebd-section {
        padding: clamp(24px, 5vw, 48px) 0;
        background-attachment: scroll;
    }

    .donatebd-card {
        font-size: 13px;
        padding: 18px;
    }

    .donatebd-title {
        font-size: 17px;
        margin-bottom: 9px;
    }

    .donatebd-btn {
        width: 220px;
        height: 44px;
        line-height: 44px;
        font-size: 13px;
        margin: 12px auto 9px;
    }

    .donatebd-note {
        font-size: 13px;
        padding: 16px;
    }
}

@media (max-width: 576px) {
    .donatebd-section {
        padding: 20px 0;
    }

    .donatebd-container {
        padding: 0 18px;
    }

    .donatebd-card {
        font-size: 12px;
        padding: 16px;
        border-radius: 6px;
    }

    .donatebd-title {
        font-size: 16px;
        margin-bottom: 8px;
    }

    .donatebd-btn {
        width: 200px;
        height: 42px;
        line-height: 42px;
        font-size: 12px;
        margin: 10px auto 8px;
    }

    .donatebd-note {
        font-size: 12px;
        padding: 14px;
    }

    .donatebd-grid {
        gap: 12px;
        margin-bottom: 18px;
    }
}

@media (max-width: 375px) {
    .donatebd-section {
        padding: 18px 0;
    }

    .donatebd-container {
        padding: 0 16px;
    }

    .donatebd-card {
        font-size: 11px;
        padding: 14px;
    }

    .donatebd-title {
        font-size: 15px;
        margin-bottom: 7px;
    }

    .donatebd-btn {
        width: 180px;
        height: 40px;
        line-height: 40px;
        font-size: 11px;
        margin: 9px auto 7px;
    }

    .donatebd-note {
        font-size: 11px;
        padding: 12px;
    }

    .donatebd-grid {
        gap: 10px;
    }
}

@media (max-width: 320px) {
    .donatebd-section {
        padding: 16px 0;
    }

    .donatebd-container {
        padding: 0 14px;
    }

    .donatebd-card {
        font-size: 10px;
        padding: 12px;
    }

    .donatebd-title {
        font-size: 14px;
        margin-bottom: 6px;
    }

    .donatebd-btn {
        width: 160px;
        height: 38px;
        line-height: 38px;
        font-size: 10px;
        margin: 8px auto 6px;
        letter-spacing: 0.3px;
    }

    .donatebd-note {
        font-size: 10px;
        padding: 10px;
        line-height: 1.6;
    }

    .donatebd-link {
        font-size: 10px;
    }

    .donatebd-grid {
        gap: 8px;
        margin-bottom: 16px;
    }
}



/* Privacy Policy Page */
.privacy-section {
    background: #fff;
    padding: 30px 20px;
    color: #222;
    line-height: 1.65;
}

.privacy-container {
    max-width: 950px;
    margin: 0 auto;
}

.privacy-container h2 {
    font-size: 1.4rem;
    font-weight: 500;
    margin: 1em 0 0.5em;
    color: #000;
    text-transform: uppercase;
}

.privacy-container p {
    font-size: 1.1rem;
    margin-bottom: 1em;
    color: #333;
}

.privacy-container a {
    color: #0077cc;
    text-decoration: none;
}

.privacy-container a:hover {
    text-decoration: underline;
}

/* Responsive */
@media (max-width: 768px) {
    .privacy-container {
        padding: 0 10px;
    }

    .privacy-container h2 {
        font-size: 1.15rem;
    }

    .privacy-container p {
        font-size: 0.9rem;
    }
}


.media-hero {
    background: linear-gradient(135deg, #3b3e9d 0%, #2e3192 100%);
    color: #fff;
    padding: 42px 20px 36px;
}

.media-hero__wrap {
    max-width: 1000px;
    margin: 0 auto;
}

.media-hero__title {
    font-size: clamp(26px, 3.2vw, 72px);
    font-weight: 600;
    letter-spacing: .6px;
    text-transform: uppercase;
    margin: 0 0 14px;
}

.media-hero__rule {
    display: inline-block;
    width: 56px;
    height: 3px;
    background: #cfd2ff;
}

.media-grid {
    background: #fff;
    padding: 40px 20px 70px;
    color: #1c1c1c;
}

.media-grid__wrap {
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 42px 54px;
}

.media-card {
    text-align: center;
}

.media-icon {
    width: 128px;
    height: 128px;
    color: #2e3192;
    display: block;
    margin: 0 auto 12px;
}

.media-card__title {
    margin: 8px 0 12px;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: .6px;
    text-transform: uppercase;
}

.media-card__title a {
    color: #2b2b2b;
    text-decoration: none;
}

.media-card__title a:hover {
    text-decoration: none;
}

.media-card__btn {
    display: inline-block;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .6px;
    text-transform: uppercase;
    background: #2e3192;
    color: #fff;
    text-decoration: none;
    transition: transform .08s ease, opacity .2s ease;
}

.media-card__btn:hover {
    opacity: .92;
    transform: translateY(-1px);
}

.media-card__btn:active {
    transform: translateY(0);
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
    .media-grid__wrap {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .media-icon {
        width: 140px;
        height: 140px;
    }

    .media-card__title {
        font-size: 20px;
    }

    .media-card__btn {
        font-size: 17px;
        padding: 12px 22px;
    }
}

@media (max-width: 768px) {
    .media-grid__wrap {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 34px 28px;
    }

    .media-hero {
        padding: 34px 16px 28px;
    }

    .media-icon {
        width: 150px;
        height: 150px;
    }

    .media-card__title {
        font-size: 22px;
    }

    .media-card__btn {
        font-size: 18px;
        padding: 14px 24px;
    }
}

@media (max-width: 500px) {
    .media-grid__wrap {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .media-icon {
        width: 160px;
        height: 160px;
    }

    .media-card__title {
        font-size: 24px;
    }

    .media-card__btn {
        font-size: 20px;
        padding: 16px 26px;
    }

    .media-hero__title {
        font-size: clamp(28px, 7vw, 54px);
    }
}


/* Wrapper */
.cp-section {
    padding: 100px 0
}

.cp-wrap {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px
}

/* Tabs */
.cp-tabs {
    display: flex;
    gap: 0;
    border: 1px solid #e3e3e3;
    border-radius: 6px;
    overflow: hidden;
    width: max-content;
    margin: 0 0 24px
}

.cp-tab {
    appearance: none;
    background: #fff;
    border: 0;
    border-right: 1px solid #ececec;
    padding: 10px 18px;
    cursor: pointer;
    text-transform: uppercase;
    font: 600 14px/1 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    color: #111
}

.cp-tab:last-child {
    border-right: 0
}

.cp-tab.is-active {
    background: #f7f7f7
}

/* Grid */
.cp-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 34px
}

@media (max-width:900px) {
    .cp-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media (max-width:560px) {
    .cp-grid {
        grid-template-columns: 1fr
    }
}

/* Card */
.cp-card {}

.cp-thumb {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16/10;
    overflow: hidden;
    background: #eee
}

.cp-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: filter .2s ease, transform .2s ease
}

.cp-thumb:hover img {
    filter: blur(2px) brightness(.92)
}

/* Plus button */
.cp-plus {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    opacity: 0;
    transition: opacity .18s ease;
}

.cp-thumb:hover .cp-plus {
    opacity: 1
}

.cp-plus svg {
    width: 56px;
    height: 56px
}

.cp-plus circle {
    fill: #2e3192;
    opacity: .95
}

.cp-plus path {
    stroke: #fff;
    stroke-linecap: round;
    stroke-width: 3
}

/* Title */
.cp-title {
    margin: .55em 0 0;
    font-weight: 600;
    font-size: 22px;
    line-height: 1.1;
    letter-spacing: .2px;
    text-transform: uppercase
}

.cp-title a {
    color: #111;
    text-decoration: none
}

.cp-title a:hover {
    text-decoration: none
}

.cp-divider {
    margin: 30px 0 0;
    border: 0;
    border-top: 2px solid #313030;
    padding: 30px 0;
}


/* ===== Stand with Bangladesh (Flood 2022) ===== */
.swb-hero {
    padding: 60px 0 80px;
}

.swb-hero__wrap {
    margin: 0 auto;
    padding: 0 20px;

    display: grid;
    grid-template-columns: 1.1fr 1fr;
    /* image a bit wider */
    gap: 36px;
    align-items: start;
}

/* Left visual */
.swb-visual {
    position: relative;
    margin: 0;
    overflow: hidden;
    border-radius: 2px;
    background: #f2f2f2;
    aspect-ratio: 16 / 10;
    /* keep proportions like your screenshot */
}

.swb-visual__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Blue band on the left with headline */
.swb-visual__band {
    position: absolute;
    inset: 0 auto 0 0;
    width: min(34%, 320px);
    /* band width; tweak if needed */
    background: #29B6E6;
    /* Friendship blue */
    display: grid;
    place-items: center;
    text-align: center;
    padding: 16px;
}

.swb-visual__title {
    color: #fff;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: .3px;
    font-size: clamp(22px, 3.3vw, 44px);
}

/* Corner badge */
.swb-visual__badge {
    position: absolute;
    right: 16px;
    bottom: 14px;
    width: clamp(90px, 18%, 160px);
    height: auto;
    display: block;
}

/* Right donation panel container (your component renders inside) */
.swb-donate {
    background: #2e3192;
    /* your component likely paints its own bg; this is a fallback */
    background: none;
    /* keep transparent so the component controls styling */
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
    .swb-hero__wrap {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .swb-donate {
        order: 2;
    }

    .swb-visual {
        order: 1;
    }
}

@media (max-width: 520px) {
    .swb-visual__band {
        width: 42%;
    }

    .swb-visual__title {
        font-size: clamp(22px, 7vw, 38px);
    }

    .swb-visual__badge {
        right: 10px;
        bottom: 10px;
        width: clamp(80px, 26%, 140px);
    }
}

/* ===== Stand With Bangladesh – Intro ===== */
.swb-intro {
    padding: 24px 0 56px;
}

.swb-intro__wrap {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

.swb-intro__title {
    font-size: clamp(32px, 6vw, 60px);
    line-height: 1.05;
    font-weight: 400;
    letter-spacing: .5px;
    text-transform: uppercase;
    margin: 10px 0 28px;
    color: #111;
}

.swb-intro__subtitle {
    font-size: clamp(20px, 2.6vw, 28px);
    font-weight: 700;
    color: #2e3192;
    /* Friendship purple */
    margin: 0 0 18px;
}

.swb-intro__body {
    color: #222;
    font-size: clamp(15px, 1.3vw, 18px);
    line-height: 1.75;
}

.swb-intro__body p {
    margin: 0 0 18px;
}

/* CTA button centered */
.swb-intro__cta {
    display: flex;
    justify-content: center;
    margin-top: 36px;
}

.swb-btn {
    display: inline-block;
    background: #2e3192;
    color: #fff;
    text-decoration: none;
    padding: 14px 28px;
    font-weight: 800;
    letter-spacing: .6px;
    text-transform: uppercase;
    border-radius: 4px;
    box-shadow: 0 2px 0 rgba(0, 0, 0, .25) inset;
    transition: transform .08s ease, opacity .2s ease;
}

.swb-btn:hover {
    opacity: .95;
    transform: translateY(-1px);
}

.swb-btn:active {
    transform: translateY(0);
}

/* Category link hover effects */
.category-link {
    transition: text-decoration 0.2s ease;
}

.category-link:hover {
    text-decoration: underline !important;
}

/* Spacing tweaks on small screens */
@media (max-width: 560px) {
    .swb-intro {
        padding-bottom: 44px;
    }

    .swb-intro__title {
        margin-bottom: 22px;
    }
}

/* =============== PAGINATION GLOBAL STYLES =============== */
.pagination .page-link {
    color: #2E3192 !important;
}

.pagination .page-item.active .page-link {
    background-color: #2E3192 !important;
    border-color: #2E3192 !important;
    color: white !important;
}

.pagination .page-link:hover {
    color: #252a7a !important;
    background-color: rgba(46, 49, 146, 0.1) !important;
}





@media (max-width: 1300px) {

    .fship-logo img {
        margin: 0px !important;
        width: 150px !important;

    }

    .fship-menu {
        gap: 10px !important
    }

    .fship-menu li a {
        font-size: 10px !important;

    }


    .fship-donate {

        padding: 6px 15px;

    }




}