/* ==========================================
   GLOBAL CSS
========================================== */

:root {
    --imm-purple: #50156f;
    --imm-dark-purple: #310641;
    --imm-pink: #e52572;
    --imm-dark-pink: #bd155c;
    --imm-green: #459d20;
    --imm-orange: #ff9f00;
    --imm-white: #ffffff;
    --imm-light: #fff8fb;
    --imm-text: #28132f;
    --imm-muted: #736a77;
    --imm-border: #ece3ef;
    --imm-shadow: 0 18px 50px rgba(61, 12, 82, 0.14);
}

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

html {
    scroll-behavior: smooth;
    margin: 0;
    padding: 0;
}

html,
body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

body {
    color: var(--imm-text);
    background: var(--imm-white);
    font-family: "Manrope", sans-serif;
}

body.imm-menu-open {
    overflow: hidden;
}

button,
input,
select,
textarea {
    font-family: inherit;
}

img {
    max-width: 100%;
}

.imm-container {
    width: min(100% - 40px, 1380px);
    margin-inline: auto;
}


/* ==========================================
   COMPLETE HEADER
========================================== */

.imm-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    display: block;
}

/* Kill any gap between topbar and page top */
body > .imm-header:first-child,
body > header:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Topbar must touch page top */
.imm-header .imm-topbar {
    margin-top: 0 !important;
    padding-top: 0;
}


/* ==========================================
   TOP CONTACT BAR
========================================== */

.imm-topbar {
    position: relative;
    overflow: hidden;
    color: var(--imm-white);
    background:
        radial-gradient(
            circle at 86% 20%,
            rgba(255, 159, 0, 0.24),
            transparent 22%
        ),
        linear-gradient(
            115deg,
            var(--imm-dark-purple) 0%,
            var(--imm-purple) 50%,
            var(--imm-pink) 100%
        );
}

.imm-topbar::before {
    content: "";
    position: absolute;
    top: -30px;
    right: 18%;
    width: 110px;
    height: 110px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
}

.imm-topbar-wrapper {
    position: relative;
    z-index: 1;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
}

.imm-topbar-left {
    display: flex;
    align-items: center;
    gap: 27px;
}

.imm-topbar-right {
    display: flex;
    align-items: center;
}

.imm-topbar-item {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--imm-white);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
}

a.imm-topbar-item {
    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}

a.imm-topbar-item:hover {
    opacity: 0.85;
    transform: translateY(-1px);
}

.imm-topbar-icon {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    color: #ffd866;
    background: rgba(255, 255, 255, 0.12);
    font-size: 11px;
}


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

.imm-navbar {
    position: relative;
    background: rgba(255, 255, 255, 0.98);
    border-bottom: 1px solid rgba(80, 21, 111, 0.08);
    box-shadow: 0 8px 30px rgba(54, 8, 74, 0.08);
}

.imm-navbar-wrapper {
    min-height: 105px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
}


/* ==========================================
   LOGO
========================================== */

.imm-logo {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 13px;
    color: var(--imm-purple);
    text-decoration: none;
}

.imm-logo-symbol {
    position: relative;
    width: 62px;
    height: 62px;
    flex: 0 0 62px;
    overflow: hidden;
    border-radius: 14px;
    background: transparent;
}

.imm-logo-symbol img {
    position: static;
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
}

.imm-logo-content {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.imm-logo-content strong {
    color: var(--imm-purple);
    font-size: 20px;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
}

.imm-logo-content small {
    color: var(--imm-pink);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.2px;
    white-space: nowrap;
}


/* ==========================================
   DESKTOP MENU
========================================== */

.imm-desktop-menu {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.imm-desktop-menu > li {
    position: relative;
}

.imm-desktop-menu > li > a,
.imm-dropdown-heading > a {
    position: relative;
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    padding: 0 11px;
    color: var(--imm-text);
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
    transition: color 0.25s ease;
}

.imm-desktop-menu > li > a:not(.imm-donate-button)::after,
.imm-dropdown-heading > a::after {
    content: "";
    position: absolute;
    right: 11px;
    bottom: 3px;
    left: 11px;
    height: 3px;
    border-radius: 10px;
    background: linear-gradient(
        90deg,
        var(--imm-pink),
        var(--imm-orange)
    );
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.25s ease;
}

.imm-desktop-menu > li > a:hover,
.imm-desktop-menu > li > a.active,
.imm-dropdown-heading > a:hover {
    color: var(--imm-pink);
}

.imm-desktop-menu > li > a:hover::after,
.imm-desktop-menu > li > a.active::after,
.imm-dropdown-heading > a:hover::after,
.imm-dropdown:hover .imm-dropdown-heading > a::after {
    transform: scaleX(1);
    transform-origin: left;
}


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

/* position:relative is essential — dropdown menu is absolutely positioned */
.imm-dropdown {
    position: relative;
}

.imm-dropdown-heading {
    display: flex;
    align-items: center;
}

.imm-dropdown-heading > a {
    padding-right: 3px;
}

.imm-dropdown-heading > a::after {
    right: 3px;
}

.imm-dropdown-toggle {
    width: 25px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    color: var(--imm-purple);
    background: transparent;
    cursor: pointer;
}

.imm-dropdown-toggle i {
    font-size: 10px;
    transition: transform 0.25s ease;
}

.imm-dropdown-menu {
    position: absolute;
    top: calc(100% + 18px);
    left: 50%;
    width: 350px;
    visibility: hidden;
    opacity: 0;
    margin: 0;
    padding: 12px;
    border: 1px solid var(--imm-border);
    border-radius: 18px;
    background: var(--imm-white);
    box-shadow: var(--imm-shadow);
    list-style: none;
    transform: translate(-50%, 12px);
    transition:
        opacity 0.25s ease,
        visibility 0.25s ease,
        transform 0.25s ease;
}

.imm-dropdown-menu::before {
    content: "";
    position: absolute;
    top: -9px;
    left: 50%;
    width: 17px;
    height: 17px;
    border-top: 1px solid var(--imm-border);
    border-left: 1px solid var(--imm-border);
    background: var(--imm-white);
    transform: translateX(-50%) rotate(45deg);
}

.imm-dropdown:hover .imm-dropdown-menu,
.imm-dropdown.dropdown-open .imm-dropdown-menu {
    visibility: visible;
    opacity: 1;
    transform: translate(-50%, 0);
}

.imm-dropdown:hover .imm-dropdown-toggle i,
.imm-dropdown.dropdown-open .imm-dropdown-toggle i {
    transform: rotate(180deg);
}

.imm-dropdown-menu li + li {
    margin-top: 5px;
}

.imm-dropdown-menu a {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 46px 1fr 20px;
    align-items: center;
    gap: 12px;
    padding: 13px;
    border-radius: 13px;
    color: var(--imm-text);
    text-decoration: none;
    transition:
        background 0.25s ease,
        transform 0.25s ease;
}

.imm-dropdown-menu a:hover {
    background: #fff4f8;
    transform: translateX(3px);
}

.imm-dropdown-icon {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 17px;
}

.imm-pink-icon {
    color: var(--imm-pink);
    background: #ffe4ef;
}

.imm-green-icon {
    color: var(--imm-green);
    background: #eaf7e5;
}

.imm-dropdown-content {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.imm-dropdown-content strong {
    color: var(--imm-text);
    font-size: 14px;
    font-weight: 800;
}

.imm-dropdown-content small {
    color: var(--imm-muted);
    font-size: 11px;
    line-height: 1.45;
}

.imm-arrow {
    color: var(--imm-pink);
    font-size: 12px;
}


/* ==========================================
   VOLUNTEER AND DONATE
========================================== */

.imm-desktop-menu .imm-volunteer-link {
    color: var(--imm-green);
}

.imm-volunteer-link i {
    margin-right: 5px;
}

.imm-desktop-menu .imm-donate-button {
    min-height: 47px;
    margin-left: 6px;
    padding: 0 20px;
    border-radius: 50px;
    color: var(--imm-white);
    background: linear-gradient(
        120deg,
        var(--imm-pink),
        var(--imm-dark-pink)
    );
    box-shadow: 0 10px 25px rgba(229, 37, 114, 0.28);
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.imm-desktop-menu .imm-donate-button:hover {
    color: var(--imm-white);
    transform: translateY(-2px);
    box-shadow: 0 15px 30px rgba(229, 37, 114, 0.38);
}

.imm-donate-button i {
    margin-right: 7px;
    color: #ffd6e6;
}


/* ==========================================
   MOBILE MENU BUTTON
========================================== */

.imm-mobile-menu-button {
    width: 48px;
    height: 48px;
    display: none;
    flex: 0 0 48px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0;
    border: 0;
    border-radius: 13px;
    background: linear-gradient(
        135deg,
        var(--imm-purple),
        var(--imm-pink)
    );
    box-shadow: 0 9px 22px rgba(80, 21, 111, 0.24);
    cursor: pointer;
}

.imm-mobile-menu-button span {
    width: 21px;
    height: 2px;
    border-radius: 5px;
    background: var(--imm-white);
}


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

.imm-mobile-overlay {
    position: fixed;
    inset: 0;
    z-index: 1098;
    visibility: hidden;
    opacity: 0;
    background: rgba(28, 4, 38, 0.69);
    backdrop-filter: blur(4px);
    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
}

body.imm-menu-open .imm-mobile-overlay {
    visibility: visible;
    opacity: 1;
}


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

.imm-mobile-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1099;
    width: min(390px, 90%);
    height: 100dvh;
    visibility: hidden;
    overflow-y: auto;
    background: var(--imm-white);
    box-shadow: -20px 0 50px rgba(31, 6, 42, 0.24);
    transform: translateX(105%);
    transition:
        transform 0.35s ease,
        visibility 0.35s ease;
}

body.imm-menu-open .imm-mobile-sidebar {
    visibility: visible;
    transform: translateX(0);
}

.imm-mobile-sidebar-header {
    min-height: 95px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 20px 22px;
    color: var(--imm-white);
    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(255, 159, 0, 0.34),
            transparent 28%
        ),
        linear-gradient(
            125deg,
            var(--imm-dark-purple),
            var(--imm-pink)
        );
}

.imm-mobile-brand {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.imm-mobile-brand strong {
    font-size: 18px;
    line-height: 1.25;
}

.imm-mobile-brand span {
    color: rgba(255, 255, 255, 0.8);
    font-size: 11px;
    font-weight: 600;
}

.imm-mobile-close {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 50%;
    color: var(--imm-white);
    background: rgba(255, 255, 255, 0.13);
    font-size: 18px;
    cursor: pointer;
}

.imm-mobile-sidebar-body {
    padding: 21px;
}


/* ==========================================
   MOBILE MENU LINKS
========================================== */

.imm-mobile-menu,
.imm-mobile-submenu {
    margin: 0;
    padding: 0;
    list-style: none;
}

.imm-mobile-menu > li {
    border-bottom: 1px solid var(--imm-border);
}

.imm-mobile-menu > li > a,
.imm-mobile-dropdown-button {
    width: 100%;
    min-height: 57px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 5px;
    border: 0;
    color: var(--imm-text);
    background: transparent;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.imm-mobile-menu > li > a > span,
.imm-mobile-dropdown-button > span {
    display: flex;
    align-items: center;
    gap: 12px;
}

.imm-mobile-menu > li > a span > i,
.imm-mobile-dropdown-button span > i {
    width: 22px;
    color: var(--imm-pink);
    text-align: center;
}

.imm-mobile-menu > li > a.active {
    color: var(--imm-pink);
}

.imm-mobile-arrow {
    color: var(--imm-purple);
    font-size: 11px;
    transition: transform 0.25s ease;
}

.imm-mobile-dropdown.open .imm-mobile-arrow {
    transform: rotate(180deg);
}


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

.imm-mobile-submenu {
    max-height: 0;
    overflow: hidden;
    border-radius: 12px;
    background: #fff1f7;
    transition:
        max-height 0.3s ease,
        margin 0.3s ease;
}

.imm-mobile-dropdown.open .imm-mobile-submenu {
    max-height: 220px;
    margin-bottom: 13px;
}

.imm-mobile-submenu a {
    position: relative;
    display: block;
    padding: 11px 15px 11px 41px;
    color: var(--imm-text);
    font-size: 13px;
    font-weight: 650;
    text-decoration: none;
}

.imm-mobile-submenu a::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 21px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--imm-pink);
    transform: translateY(-50%);
}

.imm-mobile-submenu a:hover {
    color: var(--imm-pink);
}


/* ==========================================
   MOBILE ACTION BUTTONS
========================================== */

.imm-mobile-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 24px;
}

.imm-mobile-actions a {
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
}

.imm-mobile-volunteer {
    color: var(--imm-green);
    border: 1px solid rgba(69, 157, 32, 0.3);
    background: #eef9e9;
}

.imm-mobile-donate {
    color: var(--imm-white);
    background: linear-gradient(
        120deg,
        var(--imm-pink),
        var(--imm-dark-pink)
    );
    box-shadow: 0 10px 22px rgba(229, 37, 114, 0.24);
}


/* ==========================================
   MOBILE CONTACT BOX
========================================== */

.imm-mobile-contact {
    display: flex;
    flex-direction: column;
    gap: 13px;
    margin-top: 22px;
    padding: 19px;
    border-radius: 17px;
    color: var(--imm-white);
    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(255, 159, 0, 0.25),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            var(--imm-dark-purple),
            var(--imm-purple)
        );
}

.imm-mobile-contact h4 {
    margin: 0 0 2px;
    color: #ffd46b;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.imm-mobile-contact a,
.imm-mobile-contact div {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    text-decoration: none;
    word-break: break-word;
}

.imm-mobile-contact i {
    width: 15px;
    margin-top: 3px;
    color: #ff91bc;
}


/* ==========================================
   RESPONSIVE CSS
========================================== */

@media (max-width: 1200px) {

    .imm-desktop-menu {
        display: none;
    }

    .imm-mobile-menu-button {
        display: flex;
    }

    .imm-navbar-wrapper {
        min-height: 92px;
    }
}


@media (max-width: 767px) {

    .imm-container {
        width: min(100% - 28px, 1380px);
    }

    .imm-topbar-wrapper {
        min-height: 40px;
    }

    .imm-topbar-left {
        gap: 10px;
    }

    .imm-topbar-left .imm-topbar-item:first-child {
        display: none;
    }

    .imm-topbar-item {
        font-size: 10px;
    }

    .imm-topbar-icon {
        width: 22px;
        height: 22px;
        flex-basis: 22px;
        font-size: 9px;
    }

    .imm-navbar-wrapper {
        min-height: 82px;
    }

    .imm-logo {
        min-width: 0;
        gap: 9px;
    }

    .imm-logo-symbol {
        width: 48px;
        height: 48px;
        flex-basis: 48px;
        border-radius: 11px;
    }

    .imm-logo-symbol img {
        position: static;
        width: 100%;
        height: 100%;
        top: auto;
        left: auto;
    }

    .imm-logo-content strong {
        font-size: 16px;
    }

    .imm-logo-content small {
        font-size: 10px;
    }

    .imm-mobile-menu-button {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
    }
}


@media (max-width: 480px) {

    .imm-topbar-left {
        display: none;
    }

    .imm-topbar-right {
        width: 100%;
        justify-content: center;
    }

    .imm-topbar-item {
        font-size: 11px;
    }

    .imm-logo-symbol {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
    }

    .imm-logo-symbol img {
        position: static;
        width: 100%;
        height: 100%;
        top: auto;
        left: auto;
    }

    .imm-logo-content strong {
        max-width: 180px;
        font-size: 14px;
        white-space: normal;
    }

    .imm-logo-content small {
        font-size: 9px;
    }

    .imm-mobile-actions {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 360px) {

    .imm-logo-content strong {
        max-width: 145px;
        font-size: 13px;
    }

    .imm-logo-content small {
        display: none;
    }

    .imm-mobile-sidebar-body {
        padding: 17px;
    }
}

/* =========================================
   INDIRA MAHILA MANDALI PREMIUM FOOTER
========================================= */

* {
    box-sizing: border-box;
}

.imm-footer {
    --imm-purple: #4b156f;
    --imm-purple-dark: #240b39;
    --imm-purple-light: #7c2d91;
    --imm-pink: #ed296d;
    --imm-pink-dark: #c81759;
    --imm-orange: #ff9700;
    --imm-green: #4f9f19;
    --imm-white: #ffffff;

    position: relative;
    width: 100%;
    margin-top: 70px;
    padding-top: 55px;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 10% 20%,
            rgba(237, 41, 109, 0.13),
            transparent 28%
        ),
        radial-gradient(
            circle at 90% 80%,
            rgba(79, 159, 25, 0.12),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #1d0a2d 0%,
            #321047 48%,
            #20102d 100%
        );
    color: var(--imm-white);
    font-family: "Manrope", sans-serif;
}

.imm-footer::before {
    content: "";
    position: absolute;
    top: 130px;
    right: -150px;
    width: 380px;
    height: 380px;
    border: 65px solid rgba(255, 255, 255, 0.025);
    border-radius: 50%;
    pointer-events: none;
}

.imm-footer::after {
    content: "";
    position: absolute;
    left: -130px;
    bottom: 40px;
    width: 330px;
    height: 330px;
    border: 55px solid rgba(255, 255, 255, 0.025);
    border-radius: 50%;
    pointer-events: none;
}

.imm-container {
    position: relative;
    z-index: 2;
    width: min(100% - 40px, 1280px);
    margin: 0 auto;
}


/* =========================================
   CTA SECTION
========================================= */

.imm-footer-cta-wrap {
    position: relative;
    z-index: 5;
}

.imm-footer-cta {
    position: relative;
    display: grid;
    grid-template-columns: 82px minmax(320px, 1fr) auto;
    align-items: center;
    gap: 28px;
    width: 100%;
    min-height: 190px;
    padding: 34px 38px;
    border-radius: 28px;
    overflow: hidden;
    background:
        linear-gradient(
            120deg,
            var(--imm-pink) 0%,
            #dc246b 48%,
            var(--imm-purple-light) 100%
        );
    box-shadow:
        0 28px 65px rgba(12, 2, 22, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.imm-cta-shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.imm-cta-shape-one {
    top: -115px;
    right: 16%;
    width: 240px;
    height: 240px;
    background: rgba(255, 255, 255, 0.08);
}

.imm-cta-shape-two {
    right: -65px;
    bottom: -110px;
    width: 220px;
    height: 220px;
    background: rgba(255, 151, 0, 0.18);
}

.imm-cta-icon,
.imm-cta-content,
.imm-cta-actions {
    position: relative;
    z-index: 2;
}

.imm-cta-icon {
    width: 82px;
    height: 82px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.13);
    color: #ffffff;
    font-size: 34px;
    backdrop-filter: blur(10px);
}

.imm-cta-content {
    min-width: 0;
}

.imm-cta-content span {
    display: block;
    margin-bottom: 7px;
    color: #ffe6ef;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.imm-cta-content h2 {
    max-width: 700px;
    margin: 0 0 9px;
    color: #ffffff;
    font-size: clamp(28px, 2.7vw, 41px);
    line-height: 1.23;
    font-weight: 800;
}

.imm-cta-content p {
    max-width: 700px;
    margin: 0;
    color: rgba(255, 255, 255, 0.88);
    font-size: 16px;
    line-height: 1.7;
    font-weight: 500;
}

.imm-cta-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.imm-btn {
    min-height: 54px;
    padding: 14px 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 1px solid transparent;
    border-radius: 14px;
    text-decoration: none;
    font-size: 15px;
    line-height: 1.2;
    font-weight: 800;
    white-space: nowrap;
    transition:
        transform 0.3s ease,
        background-color 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.imm-btn-light {
    border-color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

.imm-btn-light:hover {
    border-color: #ffffff;
    background: #ffffff;
    color: var(--imm-pink-dark);
    transform: translateY(-3px);
}

.imm-btn-dark {
    background: var(--imm-purple-dark);
    color: #ffffff;
    box-shadow: 0 13px 28px rgba(23, 4, 38, 0.32);
}

.imm-btn-dark:hover {
    background: #ffffff;
    color: var(--imm-purple);
    transform: translateY(-3px);
}


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

.imm-footer-main {
    position: relative;
    padding: 70px 0 60px;
}

.imm-footer-grid {
    display: grid;
    grid-template-columns: 1.35fr 0.75fr 0.9fr 1.2fr;
    gap: 55px;
}


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

.imm-footer-about {
    max-width: 430px;
}

.imm-footer-label {
    display: inline-flex;
    align-items: center;
    margin-bottom: 14px;
    padding: 8px 13px;
    border: 1px solid rgba(237, 41, 109, 0.25);
    border-radius: 30px;
    background: rgba(237, 41, 109, 0.1);
    color: #ff78a5;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.imm-footer-about h3 {
    margin: 0 0 18px;
    color: #ffffff;
    font-size: 29px;
    line-height: 1.3;
    font-weight: 800;
}

.imm-footer-about > p {
    margin: 0 0 27px;
    color: rgba(255, 255, 255, 0.76);
    font-size: 16px;
    line-height: 1.9;
    font-weight: 500;
}


/* =========================================
   SOCIAL ICONS
========================================= */

.imm-footer-social {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 11px;
}

.imm-footer-social a {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.07);
    color: #ffffff;
    text-decoration: none;
    font-size: 18px;
    transition:
        transform 0.3s ease,
        background-color 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.imm-footer-social a:nth-child(1):hover {
    background: var(--imm-purple-light);
}

.imm-footer-social a:nth-child(2):hover {
    background: var(--imm-pink);
}

.imm-footer-social a:nth-child(3):hover {
    background: #dc2424;
}

.imm-footer-social a:nth-child(4):hover {
    background: var(--imm-purple);
}

.imm-footer-social a:nth-child(5):hover {
    background: var(--imm-green);
}

.imm-footer-social a:hover {
    border-color: transparent;
    color: #ffffff;
    transform: translateY(-4px);
    box-shadow: 0 13px 27px rgba(0, 0, 0, 0.23);
}


/* =========================================
   COLUMN HEADINGS
========================================= */

.imm-footer-column h4 {
    position: relative;
    margin: 3px 0 29px;
    padding-bottom: 15px;
    color: #ffffff;
    font-size: 21px;
    line-height: 1.4;
    font-weight: 800;
}

.imm-footer-column h4::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 47px;
    height: 4px;
    border-radius: 10px;
    background: var(--imm-pink);
}

.imm-footer-column h4::after {
    content: "";
    position: absolute;
    left: 54px;
    bottom: 0;
    width: 11px;
    height: 4px;
    border-radius: 10px;
    background: var(--imm-orange);
}


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

.imm-footer-links {
    margin: 0;
    padding: 0;
    list-style: none;
}

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

.imm-footer-links li:last-child {
    margin-bottom: 0;
}

.imm-footer-links a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: rgba(255, 255, 255, 0.77);
    text-decoration: none;
    font-size: 16px;
    line-height: 1.55;
    font-weight: 500;
    transition:
        color 0.3s ease,
        transform 0.3s ease;
}

.imm-footer-links a::before {
    content: "\f061";
    font-family: "Font Awesome 6 Free";
    color: var(--imm-pink);
    font-size: 12px;
    font-weight: 900;
    transition: transform 0.3s ease;
}

.imm-footer-links a:hover {
    color: #ffffff;
    transform: translateX(6px);
}

.imm-footer-links a:hover::before {
    color: var(--imm-orange);
    transform: translateX(3px);
}


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

.imm-contact-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.imm-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.imm-contact-icon {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid rgba(237, 41, 109, 0.2);
    border-radius: 14px;
    background: rgba(237, 41, 109, 0.1);
    color: #ff70a1;
    font-size: 18px;
    transition:
        transform 0.3s ease,
        background-color 0.3s ease,
        border-color 0.3s ease,
        color 0.3s ease;
}

.imm-contact-item:nth-child(2) .imm-contact-icon {
    color: var(--imm-orange);
    background: rgba(255, 151, 0, 0.1);
    border-color: rgba(255, 151, 0, 0.2);
}

.imm-contact-item:nth-child(3) .imm-contact-icon {
    color: #70bd3d;
    background: rgba(79, 159, 25, 0.1);
    border-color: rgba(79, 159, 25, 0.2);
}

.imm-contact-item:nth-child(4) .imm-contact-icon {
    color: #bd7bdd;
    background: rgba(124, 45, 145, 0.12);
    border-color: rgba(124, 45, 145, 0.25);
}

.imm-contact-item:hover .imm-contact-icon {
    border-color: var(--imm-pink);
    background: var(--imm-pink);
    color: #ffffff;
    transform: translateY(-3px);
}

.imm-contact-content {
    min-width: 0;
    padding-top: 1px;
}

.imm-contact-content span {
    display: block;
    margin-bottom: 4px;
    color: #ff89af;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.imm-contact-content a,
.imm-contact-content p {
    display: block;
    margin: 0;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 15.5px;
    line-height: 1.7;
    font-weight: 500;
    overflow-wrap: anywhere;
    transition: color 0.3s ease;
}

.imm-contact-content a:hover {
    color: var(--imm-orange);
}


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

.imm-footer-bottom {
    position: relative;
    z-index: 2;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(8, 2, 14, 0.22);
}

.imm-footer-bottom-inner {
    min-height: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
}

.imm-footer-bottom-inner p {
    margin: 0;
    color: rgba(255, 255, 255, 0.68);
    font-size: 15px;
    line-height: 1.6;
    font-weight: 500;
}

.imm-footer-bottom-links {
    display: flex;
    align-items: center;
    gap: 15px;
}

.imm-footer-bottom-links a {
    color: rgba(255, 255, 255, 0.68);
    text-decoration: none;
    font-size: 15px;
    line-height: 1.5;
    font-weight: 500;
    transition: color 0.3s ease;
}

.imm-footer-bottom-links a:hover {
    color: #ff76a5;
}

.imm-footer-bottom-links span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--imm-orange);
}


/* =========================================
   LAPTOP RESPONSIVE
========================================= */

@media (max-width: 1160px) {

    .imm-footer-cta {
        grid-template-columns: 78px 1fr;
    }

    .imm-cta-actions {
        grid-column: 1 / -1;
        padding-left: 106px;
    }

    .imm-footer-grid {
        grid-template-columns: 1.3fr 0.75fr 0.9fr;
        gap: 45px;
    }

    .imm-footer-grid .imm-footer-column:last-child {
        grid-column: span 1;
    }
}


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

@media (max-width: 900px) {

    .imm-footer {
        margin-top: 50px;
        padding-top: 38px;
    }

    .imm-footer-cta {
        padding: 30px;
    }

    .imm-footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 48px 38px;
    }

    .imm-footer-about {
        max-width: none;
    }
}


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

@media (max-width: 650px) {

    .imm-footer {
        margin-top: 35px;
        padding-top: 24px;
    }

    .imm-container {
        width: min(100% - 28px, 1280px);
    }

    .imm-footer-cta {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 19px;
        min-height: auto;
        padding: 26px 21px;
        border-radius: 21px;
    }

    .imm-cta-icon {
        width: 65px;
        height: 65px;
        border-radius: 18px;
        font-size: 27px;
    }

    .imm-cta-content span {
        font-size: 12px;
        letter-spacing: 0.6px;
    }

    .imm-cta-content h2 {
        font-size: 26px;
        line-height: 1.3;
    }

    .imm-cta-content p {
        font-size: 15px;
        line-height: 1.7;
    }

    .imm-cta-actions {
        width: 100%;
        padding-left: 0;
        flex-direction: column;
        align-items: stretch;
    }

    .imm-btn {
        width: 100%;
        min-height: 53px;
        font-size: 15px;
    }

    .imm-footer-main {
        padding: 52px 0 45px;
    }

    .imm-footer-grid {
        grid-template-columns: 1fr;
        gap: 43px;
    }

    .imm-footer-about h3 {
        font-size: 27px;
    }

    .imm-footer-about > p {
        font-size: 16px;
        line-height: 1.85;
    }

    .imm-footer-column h4 {
        margin-bottom: 24px;
        font-size: 21px;
    }

    .imm-footer-links a {
        font-size: 16px;
    }

    .imm-contact-content a,
    .imm-contact-content p {
        font-size: 15.5px;
    }

    .imm-footer-bottom-inner {
        min-height: auto;
        padding: 23px 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .imm-footer-bottom-inner p {
        font-size: 14px;
    }

    .imm-footer-bottom-links {
        flex-wrap: wrap;
    }

    .imm-footer-bottom-links a {
        font-size: 14px;
    }
}


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

@media (max-width: 390px) {

    .imm-footer-cta {
        padding: 23px 18px;
    }

    .imm-cta-content h2 {
        font-size: 23px;
    }

    .imm-footer-about h3 {
        font-size: 24px;
    }

    .imm-footer-about > p,
    .imm-footer-links a {
        font-size: 15px;
    }

    .imm-footer-social a {
        width: 44px;
        height: 44px;
        font-size: 17px;
    }

    .imm-contact-icon {
        width: 45px;
        height: 45px;
    }

    .imm-contact-content a,
    .imm-contact-content p {
        font-size: 14.5px;
    }
}

/* =========================================
   INDIRA MAHILA MANDALI HERO SLIDER
========================================= */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

.imm-hero-slider {
    --imm-purple: #4b156f;
    --imm-purple-dark: #220a35;
    --imm-purple-light: #812e95;
    --imm-pink: #ed296d;
    --imm-pink-dark: #c81759;
    --imm-orange: #ff9700;
    --imm-green: #4f9f19;
    --imm-white: #ffffff;

    position: relative;
    width: 100%;
    height: 760px;
    min-height: 650px;
    overflow: hidden;
    background: var(--imm-purple-dark);
    color: var(--imm-white);
    font-family: "Manrope", sans-serif;
}

.imm-hero-track {
    position: relative;
    width: 100%;
    height: 100%;
}


/* =========================================
   SLIDES
========================================= */

.imm-hero-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transform: scale(1.025);
    transition:
        opacity 0.85s ease,
        visibility 0.85s ease,
        transform 1.2s ease;
}

.imm-hero-slide.active {
    z-index: 2;
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}


/* =========================================
   BACKGROUND IMAGE
========================================= */

.imm-hero-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.imm-hero-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    transform: scale(1.08);
    transition: transform 7s ease;
}

.imm-hero-slide.active .imm-hero-image img {
    transform: scale(1);
}


/* =========================================
   IMAGE OVERLAY
========================================= */

.imm-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(
            90deg,
            rgba(27, 5, 43, 0.97) 0%,
            rgba(48, 9, 65, 0.9) 34%,
            rgba(76, 14, 79, 0.65) 60%,
            rgba(35, 7, 46, 0.25) 100%
        ),
        linear-gradient(
            180deg,
            rgba(20, 3, 31, 0.12) 0%,
            rgba(20, 3, 31, 0.32) 100%
        );
}


/* =========================================
   DECORATIVE SHAPES
========================================= */

.imm-hero-shape {
    position: absolute;
    z-index: 2;
    border-radius: 50%;
    pointer-events: none;
}

.imm-hero-shape-one {
    top: -200px;
    right: -160px;
    width: 540px;
    height: 540px;
    border: 85px solid rgba(237, 41, 109, 0.13);
}

.imm-hero-shape-two {
    right: 3%;
    bottom: -210px;
    width: 480px;
    height: 480px;
    border: 75px solid rgba(79, 159, 25, 0.12);
}

.imm-hero-slide::after {
    content: "";
    position: absolute;
    z-index: 2;
    right: 14%;
    bottom: 11%;
    width: 145px;
    height: 145px;
    border: 24px solid rgba(255, 151, 0, 0.12);
    border-radius: 50%;
    pointer-events: none;
}


/* =========================================
   CONTAINER AND CONTENT
========================================= */

.imm-hero-container {
    position: relative;
    z-index: 4;
    width: min(100% - 100px, 1280px);
    height: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
}

.imm-hero-content {
    width: 100%;
    max-width: 820px;
    padding: 80px 0 120px;
}


/* =========================================
   SMALL LABEL
========================================= */

.imm-hero-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding: 10px 17px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 40px;
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    backdrop-filter: blur(12px);
    opacity: 0;
    transform: translateY(25px);
}

.imm-hero-label i {
    color: #ff8cac;
    font-size: 16px;
}

.imm-hero-slide.active .imm-hero-label {
    animation: immHeroFadeUp 0.75s ease 0.15s forwards;
}


/* =========================================
   HEADING
========================================= */

.imm-hero-content h1,
.imm-hero-content h2 {
    max-width: 820px;
    margin: 0 0 23px;
    color: #ffffff;
    font-size: clamp(47px, 5.2vw, 75px);
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -2.2px;
    opacity: 0;
    transform: translateY(28px);
}

.imm-hero-content h1 strong,
.imm-hero-content h2 strong {
    display: block;
    background:
        linear-gradient(
            90deg,
            #ff4983 0%,
            #ff9700 50%,
            #78c442 100%
        );
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.imm-hero-slide.active .imm-hero-content h1,
.imm-hero-slide.active .imm-hero-content h2 {
    animation: immHeroFadeUp 0.8s ease 0.28s forwards;
}


/* =========================================
   PARAGRAPH
========================================= */

.imm-hero-content > p {
    max-width: 720px;
    margin: 0 0 31px;
    color: rgba(255, 255, 255, 0.86);
    font-size: 18px;
    line-height: 1.8;
    font-weight: 500;
    opacity: 0;
    transform: translateY(28px);
}

.imm-hero-slide.active .imm-hero-content > p {
    animation: immHeroFadeUp 0.8s ease 0.42s forwards;
}


/* =========================================
   BUTTONS
========================================= */

.imm-hero-buttons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 39px;
    opacity: 0;
    transform: translateY(28px);
}

.imm-hero-slide.active .imm-hero-buttons {
    animation: immHeroFadeUp 0.8s ease 0.55s forwards;
}

.imm-hero-btn {
    min-height: 57px;
    padding: 15px 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    border: 1px solid transparent;
    border-radius: 14px;
    text-decoration: none;
    font-size: 15px;
    line-height: 1.2;
    font-weight: 800;
    white-space: nowrap;
    transition:
        transform 0.3s ease,
        background 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.imm-hero-btn-primary {
    background:
        linear-gradient(
            135deg,
            var(--imm-pink),
            var(--imm-purple-light)
        );
    color: #ffffff;
    box-shadow: 0 16px 38px rgba(237, 41, 109, 0.35);
}

.imm-hero-btn-primary:hover {
    color: #ffffff;
    transform: translateY(-4px);
    box-shadow: 0 21px 42px rgba(237, 41, 109, 0.44);
}

.imm-hero-btn-primary i {
    transition: transform 0.3s ease;
}

.imm-hero-btn-primary:hover i {
    transform: translateX(5px);
}

.imm-hero-btn-outline {
    border-color: rgba(255, 255, 255, 0.38);
    background: rgba(255, 255, 255, 0.09);
    color: #ffffff;
    backdrop-filter: blur(10px);
}

.imm-hero-btn-outline:hover {
    border-color: #ffffff;
    background: #ffffff;
    color: var(--imm-purple);
    transform: translateY(-4px);
}


/* =========================================
   FEATURE CARDS
========================================= */

.imm-hero-features {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    max-width: 810px;
    opacity: 0;
    transform: translateY(28px);
}

.imm-hero-slide.active .imm-hero-features {
    animation: immHeroFadeUp 0.8s ease 0.68s forwards;
}

.imm-hero-feature {
    min-width: 0;
    min-height: 82px;
    padding: 13px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 15px;
    background: rgba(37, 8, 49, 0.55);
    backdrop-filter: blur(12px);
}

.imm-feature-icon {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 13px;
    color: #ffffff;
    font-size: 17px;
}

.imm-feature-pink {
    background:
        linear-gradient(
            135deg,
            #ed296d,
            #bd1757
        );
}

.imm-feature-orange {
    background:
        linear-gradient(
            135deg,
            #ffab20,
            #f17c00
        );
}

.imm-feature-green {
    background:
        linear-gradient(
            135deg,
            #70bd34,
            #3e8f14
        );
}

.imm-hero-feature div {
    min-width: 0;
}

.imm-hero-feature strong {
    display: block;
    margin-bottom: 3px;
    color: #ffffff;
    font-size: 14px;
    line-height: 1.35;
    font-weight: 800;
}

.imm-hero-feature small {
    display: block;
    color: rgba(255, 255, 255, 0.65);
    font-size: 11px;
    line-height: 1.45;
    font-weight: 500;
}


/* =========================================
   ARROWS
========================================= */

.imm-hero-arrow {
    position: absolute;
    top: 50%;
    z-index: 10;
    width: 56px;
    height: 56px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    background: rgba(37, 8, 49, 0.5);
    color: #ffffff;
    font-size: 17px;
    cursor: pointer;
    transform: translateY(-50%);
    backdrop-filter: blur(12px);
    transition:
        transform 0.3s ease,
        background 0.3s ease,
        border-color 0.3s ease;
}

.imm-hero-prev {
    left: 24px;
}

.imm-hero-next {
    right: 24px;
}

.imm-hero-arrow:hover {
    border-color: var(--imm-pink);
    background: var(--imm-pink);
}

.imm-hero-prev:hover {
    transform: translateY(-50%) translateX(-4px);
}

.imm-hero-next:hover {
    transform: translateY(-50%) translateX(4px);
}


/* =========================================
   BOTTOM NAVIGATION
========================================= */

.imm-hero-navigation {
    position: absolute;
    z-index: 11;
    right: max(50px, calc((100% - 1280px) / 2));
    bottom: 30px;
    display: flex;
    align-items: center;
    gap: 35px;
}

.imm-hero-dots {
    display: flex;
    align-items: center;
    gap: 10px;
}

.imm-hero-dot {
    width: 13px;
    height: 13px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
}

.imm-hero-dot span {
    display: block;
    width: 5px;
    height: 5px;
    margin: auto;
    border-radius: 50%;
    background: transparent;
}

.imm-hero-dot.active {
    width: 38px;
    border-color: var(--imm-pink);
    border-radius: 20px;
}

.imm-hero-dot.active span {
    width: 26px;
    background:
        linear-gradient(
            90deg,
            var(--imm-pink),
            var(--imm-orange)
        );
}

.imm-hero-counter {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    font-weight: 700;
}

.imm-current-slide {
    color: #ffffff;
    font-size: 19px;
    font-weight: 800;
}

.imm-counter-line {
    width: 38px;
    height: 1px;
    background: rgba(255, 255, 255, 0.35);
}


/* =========================================
   SCROLL INDICATOR
========================================= */

.imm-hero-scroll {
    position: absolute;
    z-index: 11;
    left: max(50px, calc((100% - 1280px) / 2));
    bottom: 29px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.imm-hero-scroll i {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    color: #ff9f21;
    animation: immScrollBounce 1.8s infinite;
}


/* =========================================
   ANIMATIONS
========================================= */

@keyframes immHeroFadeUp {

    from {
        opacity: 0;
        transform: translateY(28px);
    }

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

@keyframes immScrollBounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(5px);
    }
}


/* =========================================
   LAPTOP
========================================= */

@media (max-width: 1200px) {

    .imm-hero-slider {
        height: 730px;
    }

    .imm-hero-container {
        width: min(100% - 125px, 1120px);
    }

    .imm-hero-content {
        max-width: 760px;
    }

    .imm-hero-content h1,
    .imm-hero-content h2 {
        font-size: clamp(45px, 5vw, 64px);
    }

    .imm-hero-navigation {
        right: 65px;
    }

    .imm-hero-scroll {
        left: 65px;
    }
}


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

@media (max-width: 900px) {

    .imm-hero-slider {
        height: 720px;
        min-height: 720px;
    }

    .imm-hero-container {
        width: min(100% - 70px, 820px);
    }

    .imm-hero-content {
        max-width: 700px;
        padding-bottom: 110px;
    }

    .imm-hero-content h1,
    .imm-hero-content h2 {
        font-size: 52px;
    }

    .imm-hero-content > p {
        max-width: 650px;
        font-size: 17px;
    }

    .imm-hero-features {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .imm-hero-feature:last-child {
        grid-column: span 2;
        max-width: 50%;
    }

    .imm-hero-prev {
        left: 8px;
    }

    .imm-hero-next {
        right: 8px;
    }

    .imm-hero-arrow {
        width: 47px;
        height: 47px;
    }

    .imm-hero-navigation {
        right: 35px;
    }

    .imm-hero-scroll {
        left: 35px;
    }
}


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

@media (max-width: 650px) {

    .imm-hero-slider {
        height: auto;
        min-height: 790px;
    }

    .imm-hero-track,
    .imm-hero-slide {
        min-height: 790px;
    }

    .imm-hero-container {
        width: min(100% - 30px, 600px);
        min-height: 790px;
        align-items: flex-end;
    }

    .imm-hero-image img {
        object-position: 63% center;
    }

    .imm-hero-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(32, 5, 43, 0.2) 0%,
                rgba(40, 7, 53, 0.54) 25%,
                rgba(43, 8, 55, 0.93) 52%,
                rgba(30, 5, 42, 0.99) 100%
            );
    }

    .imm-hero-content {
        width: 100%;
        max-width: none;
        padding: 135px 0 88px;
    }

    .imm-hero-label {
        margin-bottom: 15px;
        padding: 9px 13px;
        font-size: 11px;
        letter-spacing: 0.5px;
    }

    .imm-hero-content h1,
    .imm-hero-content h2 {
        margin-bottom: 17px;
        font-size: 38px;
        line-height: 1.13;
        letter-spacing: -1.2px;
    }

    .imm-hero-content > p {
        margin-bottom: 24px;
        font-size: 16px;
        line-height: 1.7;
    }

    .imm-hero-buttons {
        width: 100%;
        margin-bottom: 25px;
        flex-direction: column;
        align-items: stretch;
        gap: 11px;
    }

    .imm-hero-btn {
        width: 100%;
        min-height: 53px;
        font-size: 15px;
    }

    .imm-hero-features {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .imm-hero-feature,
    .imm-hero-feature:last-child {
        grid-column: auto;
        max-width: none;
        min-height: 69px;
    }

    .imm-hero-arrow {
        top: 30%;
        width: 42px;
        height: 42px;
        font-size: 14px;
    }

    .imm-hero-prev {
        left: 7px;
    }

    .imm-hero-next {
        right: 7px;
    }

    .imm-hero-navigation {
        right: auto;
        left: 50%;
        bottom: 21px;
        transform: translateX(-50%);
    }

    .imm-hero-counter,
    .imm-hero-scroll {
        display: none;
    }

    .imm-hero-shape,
    .imm-hero-slide::after {
        display: none;
    }
}


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

@media (max-width: 390px) {

    .imm-hero-slider,
    .imm-hero-track,
    .imm-hero-slide,
    .imm-hero-container {
        min-height: 820px;
    }

    .imm-hero-content {
        padding-top: 125px;
        padding-bottom: 80px;
    }

    .imm-hero-content h1,
    .imm-hero-content h2 {
        font-size: 33px;
    }

    .imm-hero-content > p {
        font-size: 15px;
    }

    .imm-hero-feature {
        padding: 11px;
    }

    .imm-feature-icon {
        width: 43px;
        height: 43px;
    }
}


/* =========================================
   REDUCED MOTION
========================================= */

@media (prefers-reduced-motion: reduce) {

    .imm-hero-slide,
    .imm-hero-image img,
    .imm-hero-label,
    .imm-hero-content h1,
    .imm-hero-content h2,
    .imm-hero-content > p,
    .imm-hero-buttons,
    .imm-hero-features {
        animation: none !important;
        transition: none !important;
    }

    .imm-hero-slide.active .imm-hero-label,
    .imm-hero-slide.active .imm-hero-content h1,
    .imm-hero-slide.active .imm-hero-content h2,
    .imm-hero-slide.active .imm-hero-content > p,
    .imm-hero-slide.active .imm-hero-buttons,
    .imm-hero-slide.active .imm-hero-features {
        opacity: 1;
        transform: none;
    }
}

/* =========================================
   BHARATI FOUNDATION PREMIUM ABOUT SECTION
========================================= */

.bf-about-section {
    --bf-purple: #4b156f;
    --bf-purple-dark: #250b3a;
    --bf-purple-light: #812e95;
    --bf-pink: #ed296d;
    --bf-pink-dark: #c81759;
    --bf-orange: #ff9700;
    --bf-green: #4f9f19;
    --bf-text: #30143f;
    --bf-muted: #6f6675;
    --bf-light: #fff8fc;

    position: relative;
    width: 100%;
    padding: 95px 0;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 6% 15%,
            rgba(237, 41, 109, 0.08),
            transparent 25%
        ),
        radial-gradient(
            circle at 92% 85%,
            rgba(79, 159, 25, 0.07),
            transparent 24%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fffafd 100%
        );
    font-family: "Manrope", sans-serif;
}

.bf-about-section::before {
    content: "";
    position: absolute;
    top: 70px;
    right: -140px;
    width: 320px;
    height: 320px;
    border: 50px solid rgba(129, 46, 149, 0.045);
    border-radius: 50%;
    pointer-events: none;
}

.bf-about-section::after {
    content: "";
    position: absolute;
    left: -130px;
    bottom: -110px;
    width: 280px;
    height: 280px;
    border: 42px solid rgba(255, 151, 0, 0.05);
    border-radius: 50%;
    pointer-events: none;
}

.bf-about-container {
    position: relative;
    z-index: 2;
    width: min(100% - 40px, 1280px);
    margin: 0 auto;
}

.bf-about-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    align-items: center;
    gap: 80px;
}


/* =========================================
   IMAGE SIDE
========================================= */

.bf-about-visual {
    position: relative;
    min-height: 610px;
}

.bf-about-main-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 82%;
    height: 520px;
    border-radius: 34px;
    overflow: hidden;
    box-shadow: 0 30px 70px rgba(50, 13, 65, 0.18);
}

.bf-about-main-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    transition: transform 0.6s ease;
}

.bf-about-main-image:hover img {
    transform: scale(1.05);
}

.bf-about-image-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            transparent 45%,
            rgba(38, 8, 51, 0.6) 100%
        );
}

.bf-about-image-badge {
    position: absolute;
    left: 24px;
    bottom: 24px;
    display: flex;
    align-items: center;
    gap: 13px;
    max-width: calc(100% - 48px);
    padding: 14px 17px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 16px;
    background: rgba(35, 8, 47, 0.72);
    color: #ffffff;
    backdrop-filter: blur(12px);
}

.bf-about-badge-icon {
    width: 47px;
    height: 47px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 14px;
    background:
        linear-gradient(
            135deg,
            var(--bf-pink),
            var(--bf-purple-light)
        );
    color: #ffffff;
    font-size: 18px;
}

.bf-about-image-badge strong {
    display: block;
    margin-bottom: 3px;
    color: #ffffff;
    font-size: 15px;
    line-height: 1.35;
    font-weight: 800;
}

.bf-about-image-badge small {
    display: block;
    color: rgba(255, 255, 255, 0.72);
    font-size: 12px;
    line-height: 1.45;
}

.bf-about-small-image {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 43%;
    height: 255px;
    padding: 9px;
    border-radius: 27px;
    background: #ffffff;
    box-shadow: 0 24px 55px rgba(55, 12, 72, 0.18);
    z-index: 3;
}

.bf-about-small-image img {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 20px;
    object-fit: cover;
    object-position: center;
}

.bf-about-experience-card {
    position: absolute;
    left: 5%;
    bottom: 18px;
    z-index: 4;
    width: 185px;
    padding: 20px;
    border-radius: 20px;
    background:
        linear-gradient(
            135deg,
            var(--bf-orange),
            #f36b13
        );
    color: #ffffff;
    box-shadow: 0 20px 40px rgba(242, 112, 12, 0.25);
}

.bf-about-experience-card strong {
    display: block;
    margin-bottom: 5px;
    font-size: 23px;
    line-height: 1.2;
    font-weight: 800;
}

.bf-about-experience-card span {
    display: block;
    font-size: 13px;
    line-height: 1.5;
    font-weight: 700;
}

.bf-about-shape {
    position: absolute;
    display: block;
    border-radius: 50%;
    pointer-events: none;
}

.bf-about-shape-one {
    top: -25px;
    right: 7%;
    width: 100px;
    height: 100px;
    border: 18px solid rgba(237, 41, 109, 0.12);
}

.bf-about-shape-two {
    right: -15px;
    top: 37%;
    width: 70px;
    height: 70px;
    background: rgba(79, 159, 25, 0.12);
}


/* =========================================
   CONTENT SIDE
========================================= */

.bf-about-content {
    max-width: 650px;
}

.bf-about-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 17px;
    padding: 9px 15px;
    border: 1px solid rgba(237, 41, 109, 0.18);
    border-radius: 30px;
    background: rgba(237, 41, 109, 0.07);
    color: var(--bf-pink-dark);
    font-size: 14px;
    line-height: 1.5;
    font-weight: 800;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

.bf-about-subtitle i {
    color: var(--bf-pink);
}

.bf-about-content h2 {
    margin: 0 0 24px;
    color: var(--bf-text);
    font-size: clamp(37px, 4vw, 55px);
    line-height: 1.17;
    font-weight: 800;
    letter-spacing: -1.5px;
}

.bf-about-content h2 span {
    display: block;
    background:
        linear-gradient(
            90deg,
            var(--bf-pink) 0%,
            var(--bf-purple-light) 55%,
            var(--bf-green) 100%
        );
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.bf-about-content > p {
    margin: 0 0 17px;
    color: var(--bf-muted);
    font-size: 16.5px;
    line-height: 1.85;
    font-weight: 500;
}

.bf-about-content > p:last-of-type {
    margin-bottom: 29px;
}


/* =========================================
   FEATURE CARDS
========================================= */

.bf-about-feature-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
    margin-bottom: 31px;
}

.bf-about-feature-card {
    min-width: 0;
    min-height: 91px;
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 13px;
    border: 1px solid rgba(75, 21, 111, 0.09);
    border-radius: 17px;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(56, 16, 72, 0.07);
    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.bf-about-feature-card:hover {
    border-color: rgba(237, 41, 109, 0.23);
    transform: translateY(-5px);
    box-shadow: 0 18px 35px rgba(56, 16, 72, 0.11);
}

.bf-about-feature-icon {
    width: 49px;
    height: 49px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 14px;
    color: #ffffff;
    font-size: 18px;
}

.bf-about-pink {
    background:
        linear-gradient(
            135deg,
            var(--bf-pink),
            var(--bf-pink-dark)
        );
}

.bf-about-orange {
    background:
        linear-gradient(
            135deg,
            #ffad22,
            var(--bf-orange)
        );
}

.bf-about-green {
    background:
        linear-gradient(
            135deg,
            #75bd3b,
            var(--bf-green)
        );
}

.bf-about-purple {
    background:
        linear-gradient(
            135deg,
            var(--bf-purple-light),
            var(--bf-purple)
        );
}

.bf-about-feature-card div {
    min-width: 0;
}

.bf-about-feature-card strong {
    display: block;
    margin-bottom: 4px;
    color: var(--bf-text);
    font-size: 15px;
    line-height: 1.4;
    font-weight: 800;
}

.bf-about-feature-card small {
    display: block;
    color: var(--bf-muted);
    font-size: 12px;
    line-height: 1.5;
    font-weight: 500;
}


/* =========================================
   BOTTOM AREA
========================================= */

.bf-about-bottom {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
}

.bf-about-btn {
    min-height: 56px;
    padding: 15px 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    border-radius: 14px;
    background:
        linear-gradient(
            135deg,
            var(--bf-pink),
            var(--bf-purple-light)
        );
    color: #ffffff;
    text-decoration: none;
    font-size: 15px;
    line-height: 1.2;
    font-weight: 800;
    box-shadow: 0 15px 35px rgba(210, 32, 102, 0.25);
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.bf-about-btn:hover {
    color: #ffffff;
    transform: translateY(-4px);
    box-shadow: 0 20px 42px rgba(210, 32, 102, 0.34);
}

.bf-about-btn i {
    transition: transform 0.3s ease;
}

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

.bf-about-trust {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bf-about-trust > span {
    width: 45px;
    height: 45px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(79, 159, 25, 0.1);
    color: var(--bf-green);
    font-size: 19px;
}

.bf-about-trust strong {
    display: block;
    margin-bottom: 3px;
    color: var(--bf-text);
    font-size: 14px;
    line-height: 1.35;
    font-weight: 800;
}

.bf-about-trust small {
    display: block;
    color: var(--bf-muted);
    font-size: 12px;
    line-height: 1.45;
}


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

@media (max-width: 1050px) {

    .bf-about-section {
        padding: 80px 0;
    }

    .bf-about-grid {
        gap: 50px;
    }

    .bf-about-visual {
        min-height: 560px;
    }

    .bf-about-main-image {
        width: 86%;
        height: 470px;
    }

    .bf-about-small-image {
        width: 45%;
        height: 225px;
    }

    .bf-about-content h2 {
        font-size: 42px;
    }

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


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

@media (max-width: 850px) {

    .bf-about-grid {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .bf-about-visual {
        width: min(100%, 680px);
        min-height: 590px;
        margin: 0 auto;
    }

    .bf-about-main-image {
        width: 80%;
        height: 500px;
    }

    .bf-about-small-image {
        width: 42%;
        height: 240px;
    }

    .bf-about-content {
        max-width: 760px;
        margin: 0 auto;
    }

    .bf-about-feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


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

@media (max-width: 650px) {

    .bf-about-section {
        padding: 65px 0;
    }

    .bf-about-container {
        width: min(100% - 28px, 1280px);
    }

    .bf-about-grid {
        gap: 45px;
    }

    .bf-about-visual {
        min-height: auto;
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .bf-about-main-image {
        position: relative;
        width: 100%;
        height: 390px;
        border-radius: 24px;
    }

    .bf-about-image-badge {
        left: 15px;
        right: 15px;
        bottom: 15px;
        max-width: none;
        padding: 12px;
    }

    .bf-about-small-image {
        position: relative;
        right: auto;
        bottom: auto;
        width: 65%;
        height: 190px;
        margin-top: -48px;
        margin-left: auto;
        border-radius: 22px;
    }

    .bf-about-experience-card {
        left: 10px;
        bottom: 22px;
        width: 160px;
        padding: 16px;
    }

    .bf-about-experience-card strong {
        font-size: 20px;
    }

    .bf-about-shape {
        display: none;
    }

    .bf-about-subtitle {
        font-size: 11px;
        letter-spacing: 0.4px;
    }

    .bf-about-content h2 {
        margin-bottom: 20px;
        font-size: 34px;
        line-height: 1.2;
        letter-spacing: -0.8px;
    }

    .bf-about-content > p {
        font-size: 15.5px;
        line-height: 1.8;
    }

    .bf-about-feature-grid {
        grid-template-columns: 1fr;
        gap: 11px;
    }

    .bf-about-feature-card {
        min-height: 83px;
    }

    .bf-about-bottom {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
    }

    .bf-about-btn {
        width: 100%;
        min-height: 54px;
    }

    .bf-about-trust {
        align-items: flex-start;
    }
}


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

@media (max-width: 390px) {

    .bf-about-main-image {
        height: 350px;
    }

    .bf-about-small-image {
        width: 72%;
        height: 170px;
    }

    .bf-about-experience-card {
        width: 145px;
    }

    .bf-about-content h2 {
        font-size: 30px;
    }

    .bf-about-content > p {
        font-size: 15px;
    }

    .bf-about-feature-icon {
        width: 46px;
        height: 46px;
    }
}

/* =========================================
   OUR FOCUS AREAS PREMIUM SLIDER
========================================= */

.bf-focus-section {
    --bf-purple: #4b156f;
    --bf-purple-dark: #260b3b;
    --bf-purple-light: #812e95;
    --bf-pink: #ed296d;
    --bf-pink-dark: #c81759;
    --bf-orange: #ff9700;
    --bf-green: #4f9f19;
    --bf-dark: #32143f;
    --bf-muted: #716779;
    --bf-light: #fff8fc;

    position: relative;
    width: 100%;
    padding: 95px 0;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 5% 15%,
            rgba(237, 41, 109, 0.08),
            transparent 25%
        ),
        radial-gradient(
            circle at 94% 82%,
            rgba(79, 159, 25, 0.08),
            transparent 24%
        ),
        linear-gradient(
            180deg,
            #fffafd 0%,
            #ffffff 100%
        );
    font-family: "Manrope", sans-serif;
}

.bf-focus-section::before {
    content: "";
    position: absolute;
    top: -120px;
    right: -120px;
    width: 330px;
    height: 330px;
    border: 52px solid rgba(129, 46, 149, 0.05);
    border-radius: 50%;
    pointer-events: none;
}

.bf-focus-section::after {
    content: "";
    position: absolute;
    left: -100px;
    bottom: -130px;
    width: 290px;
    height: 290px;
    border: 45px solid rgba(255, 151, 0, 0.055);
    border-radius: 50%;
    pointer-events: none;
}

.bf-focus-container {
    position: relative;
    z-index: 2;
    width: min(100% - 40px, 1280px);
    margin: 0 auto;
}


/* =========================================
   SECTION HEADING
========================================= */

.bf-focus-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0;
    margin-bottom: 40px;
}

.bf-focus-heading-content {
    max-width: 640px;
}

/* =========================================
   FOCUS GRID (replaces slider)
========================================= */

.bf-focus-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
}

.bf-focus-grid .bf-focus-card {
    height: 100%;
}

/* Hide slider controls */
.bf-focus-controls {
    display: none !important;
}

.bf-focus-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 16px;
    padding: 9px 15px;
    border: 1px solid rgba(237, 41, 109, 0.18);
    border-radius: 30px;
    background: rgba(237, 41, 109, 0.07);
    color: var(--bf-pink-dark);
    font-size: 14px;
    line-height: 1.5;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.bf-focus-subtitle i {
    color: var(--bf-green);
}

.bf-focus-heading h2 {
    margin: 0 0 18px;
    color: var(--bf-dark);
    font-size: clamp(38px, 4vw, 55px);
    line-height: 1.16;
    font-weight: 800;
    letter-spacing: -1.5px;
}

.bf-focus-heading h2 span {
    display: block;
    background:
        linear-gradient(
            90deg,
            var(--bf-pink) 0%,
            var(--bf-purple-light) 55%,
            var(--bf-green) 100%
        );
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.bf-focus-heading p {
    max-width: 700px;
    margin: 0;
    color: var(--bf-muted);
    font-size: 16.5px;
    line-height: 1.8;
    font-weight: 500;
}


/* =========================================
   NAVIGATION BUTTONS
========================================= */

.bf-focus-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.bf-focus-arrow {
    width: 54px;
    height: 54px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(75, 21, 111, 0.12);
    border-radius: 50%;
    background: #ffffff;
    color: var(--bf-purple);
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 12px 28px rgba(55, 14, 72, 0.09);
    transition:
        transform 0.3s ease,
        background 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease;
}

.bf-focus-arrow:hover {
    border-color: transparent;
    background:
        linear-gradient(
            135deg,
            var(--bf-pink),
            var(--bf-purple-light)
        );
    color: #ffffff;
    transform: translateY(-4px);
}

.bf-focus-arrow.swiper-button-disabled {
    opacity: 0.4;
    cursor: not-allowed;
}


/* =========================================
   SLIDER
========================================= */

.bf-focus-slider {
    width: 100%;
    overflow: visible;
    padding: 5px 3px 55px;
}

.bf-focus-slider .swiper-slide {
    height: auto;
}


/* =========================================
   FOCUS CARD
========================================= */

.bf-focus-card {
    position: relative;
    height: 100%;
    min-height: 510px;
    overflow: hidden;
    border: 1px solid rgba(75, 21, 111, 0.09);
    border-radius: 25px;
    background: #ffffff;
    box-shadow: 0 18px 45px rgba(56, 15, 73, 0.09);
    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

.bf-focus-card:hover {
    border-color: rgba(237, 41, 109, 0.22);
    transform: translateY(-10px);
    box-shadow: 0 28px 58px rgba(56, 15, 73, 0.15);
}


/* =========================================
   CARD IMAGE
========================================= */

.bf-focus-card-image {
    position: relative;
    width: 100%;
    height: 245px;
    overflow: hidden;
}

.bf-focus-card-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    transition: transform 0.6s ease;
}

.bf-focus-card:hover .bf-focus-card-image img {
    transform: scale(1.08);
}

.bf-focus-image-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            transparent 48%,
            rgba(37, 8, 49, 0.68) 100%
        );
}

.bf-focus-number {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 14px;
    background: rgba(40, 7, 52, 0.55);
    color: #ffffff;
    font-size: 14px;
    font-weight: 800;
    backdrop-filter: blur(10px);
}


/* =========================================
   CARD CONTENT
========================================= */

.bf-focus-card-content {
    position: relative;
    padding: 38px 25px 27px;
}

.bf-focus-card-icon {
    position: absolute;
    top: -29px;
    left: 25px;
    width: 58px;
    height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 5px solid #ffffff;
    border-radius: 17px;
    color: #ffffff;
    font-size: 21px;
    box-shadow: 0 12px 28px rgba(52, 12, 68, 0.16);
}

.bf-focus-pink {
    background:
        linear-gradient(
            135deg,
            var(--bf-pink),
            var(--bf-pink-dark)
        );
}

.bf-focus-orange {
    background:
        linear-gradient(
            135deg,
            #ffad27,
            var(--bf-orange)
        );
}

.bf-focus-green {
    background:
        linear-gradient(
            135deg,
            #77bf3d,
            var(--bf-green)
        );
}

.bf-focus-purple {
    background:
        linear-gradient(
            135deg,
            var(--bf-purple-light),
            var(--bf-purple)
        );
}

.bf-focus-card-content h3 {
    margin: 12px 0 13px;
    color: var(--bf-dark);
    font-size: 23px;
    line-height: 1.35;
    font-weight: 800;
}

.bf-focus-card-content p {
    min-height: 86px;
    margin: 0 0 21px;
    color: var(--bf-muted);
    font-size: 15.5px;
    line-height: 1.75;
    font-weight: 500;
}

.bf-focus-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--bf-pink-dark);
    text-decoration: none;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 800;
    transition:
        color 0.3s ease,
        gap 0.3s ease;
}

.bf-focus-link i {
    transition: transform 0.3s ease;
}

.bf-focus-link:hover {
    color: var(--bf-purple);
    gap: 13px;
}

.bf-focus-link:hover i {
    transform: translateX(3px);
}


/* =========================================
   PAGINATION
========================================= */

.bf-focus-pagination {
    bottom: 0 !important;
}

.bf-focus-pagination .swiper-pagination-bullet {
    width: 9px;
    height: 9px;
    margin: 0 5px !important;
    background: rgba(75, 21, 111, 0.28);
    opacity: 1;
    transition:
        width 0.3s ease,
        border-radius 0.3s ease,
        background 0.3s ease;
}

.bf-focus-pagination .swiper-pagination-bullet-active {
    width: 33px;
    border-radius: 20px;
    background:
        linear-gradient(
            90deg,
            var(--bf-pink),
            var(--bf-orange)
        );
}


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

@media (max-width: 1050px) {

    .bf-focus-section {
        padding: 80px 0;
    }

    .bf-focus-heading h2 {
        font-size: 44px;
    }

    .bf-focus-card {
        min-height: 500px;
    }
}


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

@media (max-width: 800px) {

    .bf-focus-heading {
        align-items: center;
    }

    .bf-focus-controls {
        padding-top: 8px;
    }

    .bf-focus-arrow {
        width: 49px;
        height: 49px;
    }
}


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

@media (max-width: 650px) {

    .bf-focus-section {
        padding: 65px 0;
    }

    .bf-focus-container {
        width: min(100% - 28px, 1280px);
    }

    .bf-focus-heading {
        flex-direction: column;
        align-items: center;
        gap: 24px;
        margin-bottom: 35px;
    }

    .bf-focus-subtitle {
        font-size: 11px;
        letter-spacing: 0.5px;
    }

    .bf-focus-heading h2 {
        font-size: 34px;
        line-height: 1.2;
        letter-spacing: -0.8px;
    }

    .bf-focus-heading p {
        font-size: 15.5px;
        line-height: 1.75;
    }

    .bf-focus-controls {
        align-self: flex-end;
    }

    .bf-focus-arrow {
        width: 47px;
        height: 47px;
    }

    .bf-focus-slider {
        padding-bottom: 50px;
    }

    .bf-focus-card {
        min-height: 485px;
        border-radius: 22px;
    }

    .bf-focus-card-image {
        height: 230px;
    }

    .bf-focus-card-content {
        padding: 37px 21px 24px;
    }

    .bf-focus-card-icon {
        left: 21px;
        width: 56px;
        height: 56px;
    }

    .bf-focus-card-content h3 {
        font-size: 22px;
    }

    .bf-focus-card-content p {
        min-height: auto;
        font-size: 15px;
    }
}


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

@media (max-width: 390px) {

    .bf-focus-heading h2 {
        font-size: 30px;
    }

    .bf-focus-heading p {
        font-size: 15px;
    }

    .bf-focus-card-image {
        height: 210px;
    }

    .bf-focus-card-content h3 {
        font-size: 20px;
    }

    .bf-focus-number {
        width: 44px;
        height: 44px;
    }
}

/* ==========================================
   OVERRIDE - REDUCE FOCUS SLIDER SPACING
   Add this at the END of your CSS
========================================== */

.bf-focus-section{
    padding:60px 0 !important;
}

.bf-focus-heading{
    margin-bottom:28px !important;
}

.bf-focus-heading h2{
    margin-bottom:12px !important;
}

.bf-focus-heading p{
    margin-bottom:0 !important;
    line-height:1.7 !important;
}

.bf-focus-slider{
    padding:0 2px 35px !important;
}

.bf-focus-card{
    min-height:450px !important;
}

.bf-focus-card-image{
    height:215px !important;
}

.bf-focus-card-content{
    padding:35px 22px 22px !important;
}

.bf-focus-card-content p{
    min-height:auto !important;
    margin-bottom:15px !important;
}

/* Tablet */

@media (max-width:991px){

    .bf-focus-section{
        padding:50px 0 !important;
    }

    .bf-focus-heading{
        margin-bottom:22px !important;
    }

    .bf-focus-slider{
        padding-bottom:30px !important;
    }

    .bf-focus-card{
        min-height:435px !important;
    }

}

/* Mobile */

@media (max-width:767px){

    .bf-focus-section{
        padding:40px 0 !important;
    }

    .bf-focus-heading{
        margin-bottom:20px !important;
        gap:15px !important;
    }

    .bf-focus-slider{
        padding-bottom:28px !important;
    }

    .bf-focus-card{
        min-height:420px !important;
    }

    .bf-focus-card-image{
        height:190px !important;
    }

    .bf-focus-card-content{
        padding:32px 18px 20px !important;
    }

}

/*=========================================
VISION & MISSION
=========================================*/

.bf-vm-section{

    padding:70px 0;

    background:
    radial-gradient(circle at top left,
    rgba(237,41,109,.06),
    transparent 35%),

    radial-gradient(circle at bottom right,
    rgba(79,159,25,.06),
    transparent 35%),

    #fff;

    overflow:hidden;

    position:relative;

}

.bf-vm-container{

    width:min(1280px,calc(100% - 40px));

    margin:auto;

}

.bf-vm-heading{

    text-align:center;

    max-width:760px;

    margin:0 auto 40px;

}

.bf-vm-heading span{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:10px 18px;

    border-radius:40px;

    background:rgba(237,41,109,.08);

    color:#c81759;

    font-weight:800;

    text-transform:uppercase;

    font-size:13px;

    letter-spacing:.8px;

}

.bf-vm-heading span i{

    color:#4f9f19;

}

.bf-vm-heading h2{

    margin:20px 0 0;

    font-size:48px;

    font-weight:800;

    color:#32143f;

    line-height:1.2;

}

.bf-vm-heading h2 strong{

    display:block;

    background:linear-gradient(90deg,#ed296d,#812e95,#4f9f19);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

.bf-vm-grid{

    display:grid;

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

    gap:30px;

}

.bf-vm-card{

    position:relative;

    overflow:hidden;

    padding:40px;

    border-radius:28px;

    color:#fff;

    transition:.4s;

    min-height:260px;

}

.bf-vm-card:hover{

    transform:translateY(-8px);

}

.bf-vm-vision{

    background:linear-gradient(135deg,#ed296d,#812e95);

}

.bf-vm-mission{

    background:linear-gradient(135deg,#4b156f,#4f9f19);

}

.bf-vm-card::before{

    content:"";

    position:absolute;

    width:260px;

    height:260px;

    border-radius:50%;

    background:rgba(255,255,255,.08);

    top:-120px;

    right:-80px;

}

.bf-vm-icon{

    width:72px;

    height:72px;

    border-radius:20px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(255,255,255,.16);

    backdrop-filter:blur(10px);

    font-size:28px;

    margin-bottom:24px;

}

.bf-vm-card h3{

    font-size:32px;

    margin:0 0 16px;

    font-weight:800;

}

.bf-vm-card p{

    margin:0;

    font-size:17px;

    line-height:1.9;

    color:rgba(255,255,255,.92);

}

/*==========================
Responsive
==========================*/

@media(max-width:992px){

.bf-vm-heading h2{

font-size:40px;

}

.bf-vm-grid{

grid-template-columns:1fr;

}

}

@media(max-width:767px){

.bf-vm-section{

padding:55px 0;

}

.bf-vm-container{

width:calc(100% - 24px);

}

.bf-vm-heading{

margin-bottom:30px;

}

.bf-vm-heading h2{

font-size:31px;

}

.bf-vm-card{

padding:28px;

min-height:auto;

}

.bf-vm-icon{

width:60px;

height:60px;

font-size:22px;

margin-bottom:18px;

}

.bf-vm-card h3{

font-size:25px;

}

.bf-vm-card p{

font-size:15px;

line-height:1.8;

}

}

/* =========================================
   WHY BHARATI FOUNDATION
========================================= */

.bf-why-section {
    --bf-purple: #4b156f;
    --bf-purple-dark: #250b3a;
    --bf-purple-light: #812e95;
    --bf-pink: #ed296d;
    --bf-pink-dark: #c81759;
    --bf-orange: #ff9700;
    --bf-green: #4f9f19;
    --bf-dark: #32143f;
    --bf-muted: #706776;

    position: relative;
    width: 100%;
    padding: 58px 0;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 4% 18%,
            rgba(237, 41, 109, 0.08),
            transparent 24%
        ),
        radial-gradient(
            circle at 94% 82%,
            rgba(79, 159, 25, 0.08),
            transparent 24%
        ),
        linear-gradient(
            135deg,
            #fff9fc 0%,
            #ffffff 52%,
            #fbfff8 100%
        );
    font-family: "Manrope", sans-serif;
}

.bf-why-section::before {
    content: "";
    position: absolute;
    top: -120px;
    right: -110px;
    width: 300px;
    height: 300px;
    border: 48px solid rgba(129, 46, 149, 0.05);
    border-radius: 50%;
    pointer-events: none;
}

.bf-why-section::after {
    content: "";
    position: absolute;
    left: -100px;
    bottom: -120px;
    width: 270px;
    height: 270px;
    border: 42px solid rgba(255, 151, 0, 0.05);
    border-radius: 50%;
    pointer-events: none;
}

.bf-why-container {
    position: relative;
    z-index: 2;
    width: min(100% - 40px, 1280px);
    margin: 0 auto;
}

.bf-why-grid {
    display: grid;
    grid-template-columns: 0.92fr 1.35fr;
    align-items: center;
    gap: 58px;
}


/* =========================================
   LEFT CONTENT
========================================= */

.bf-why-content {
    max-width: 520px;
}

.bf-why-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 14px;
    padding: 8px 14px;
    border: 1px solid rgba(237, 41, 109, 0.18);
    border-radius: 30px;
    background: rgba(237, 41, 109, 0.07);
    color: var(--bf-pink-dark);
    font-size: 13px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

.bf-why-subtitle i {
    color: var(--bf-pink);
}

.bf-why-content h2 {
    margin: 0 0 17px;
    color: var(--bf-dark);
    font-size: clamp(36px, 4vw, 51px);
    line-height: 1.16;
    font-weight: 800;
    letter-spacing: -1.3px;
}

.bf-why-content h2 span {
    display: block;
    background:
        linear-gradient(
            90deg,
            var(--bf-pink) 0%,
            var(--bf-purple-light) 55%,
            var(--bf-green) 100%
        );
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.bf-why-content p {
    margin: 0 0 24px;
    color: var(--bf-muted);
    font-size: 16px;
    line-height: 1.8;
    font-weight: 500;
}

.bf-why-btn {
    min-height: 52px;
    padding: 13px 21px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 13px;
    background:
        linear-gradient(
            135deg,
            var(--bf-pink),
            var(--bf-purple-light)
        );
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 800;
    box-shadow: 0 14px 30px rgba(210, 32, 102, 0.22);
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.bf-why-btn:hover {
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 18px 36px rgba(210, 32, 102, 0.3);
}

.bf-why-btn i {
    transition: transform 0.3s ease;
}

.bf-why-btn:hover i {
    transform: translateX(4px);
}


/* =========================================
   POINTS GRID
========================================= */

.bf-why-points {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.bf-why-point {
    min-width: 0;
    min-height: 108px;
    padding: 17px;
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid rgba(75, 21, 111, 0.08);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.93);
    box-shadow: 0 12px 28px rgba(55, 14, 72, 0.07);
    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.bf-why-point:hover {
    border-color: rgba(237, 41, 109, 0.22);
    transform: translateY(-5px);
    box-shadow: 0 18px 36px rgba(55, 14, 72, 0.11);
}

.bf-why-icon {
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 15px;
    color: #ffffff;
    font-size: 19px;
}

.bf-why-pink {
    background:
        linear-gradient(
            135deg,
            var(--bf-pink),
            var(--bf-pink-dark)
        );
}

.bf-why-purple {
    background:
        linear-gradient(
            135deg,
            var(--bf-purple-light),
            var(--bf-purple)
        );
}

.bf-why-orange {
    background:
        linear-gradient(
            135deg,
            #ffb128,
            var(--bf-orange)
        );
}

.bf-why-green {
    background:
        linear-gradient(
            135deg,
            #76bd3b,
            var(--bf-green)
        );
}

.bf-why-point div {
    min-width: 0;
}

.bf-why-point strong {
    display: block;
    margin-bottom: 4px;
    color: var(--bf-dark);
    font-size: 15.5px;
    line-height: 1.35;
    font-weight: 800;
}

.bf-why-point small {
    display: block;
    color: var(--bf-muted);
    font-size: 12.5px;
    line-height: 1.5;
    font-weight: 500;
}


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

@media (max-width: 1000px) {

    .bf-why-section {
        padding: 52px 0;
    }

    .bf-why-grid {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .bf-why-content {
        max-width: 760px;
    }
}


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

@media (max-width: 650px) {

    .bf-why-section {
        padding: 42px 0;
    }

    .bf-why-container {
        width: min(100% - 28px, 1280px);
    }

    .bf-why-grid {
        gap: 28px;
    }

    .bf-why-subtitle {
        font-size: 11px;
        letter-spacing: 0.4px;
    }

    .bf-why-content h2 {
        font-size: 33px;
        line-height: 1.2;
        letter-spacing: -0.7px;
    }

    .bf-why-content p {
        font-size: 15.5px;
        line-height: 1.75;
    }

    .bf-why-btn {
        width: 100%;
        min-height: 52px;
    }

    .bf-why-points {
        grid-template-columns: 1fr;
        gap: 11px;
    }

    .bf-why-point {
        min-height: auto;
        padding: 15px;
    }

    .bf-why-icon {
        width: 48px;
        height: 48px;
        border-radius: 14px;
        font-size: 17px;
    }

    .bf-why-point strong {
        font-size: 15px;
    }

    .bf-why-point small {
        font-size: 12px;
    }
}


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

@media (max-width: 390px) {

    .bf-why-section {
        padding: 36px 0;
    }

    .bf-why-content h2 {
        font-size: 29px;
    }

    .bf-why-content p {
        font-size: 15px;
    }

    .bf-why-point {
        align-items: flex-start;
    }
}

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

.bf-impact-section {
    --bf-purple: #4b156f;
    --bf-purple-dark: #240a38;
    --bf-purple-light: #812e95;
    --bf-pink: #ed296d;
    --bf-pink-dark: #c81759;
    --bf-orange: #ff9700;
    --bf-green: #4f9f19;

    position: relative;
    width: 100%;
    padding: 58px 0;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 8% 25%,
            rgba(237, 41, 109, 0.16),
            transparent 26%
        ),
        radial-gradient(
            circle at 92% 75%,
            rgba(79, 159, 25, 0.13),
            transparent 26%
        ),
        linear-gradient(
            135deg,
            #20082f 0%,
            #421255 52%,
            #250c36 100%
        );
    color: #ffffff;
    font-family: "Manrope", sans-serif;
}

.bf-impact-section::before {
    content: "";
    position: absolute;
    top: -125px;
    right: -100px;
    width: 310px;
    height: 310px;
    border: 50px solid rgba(255, 255, 255, 0.035);
    border-radius: 50%;
    pointer-events: none;
}

.bf-impact-section::after {
    content: "";
    position: absolute;
    left: -95px;
    bottom: -135px;
    width: 280px;
    height: 280px;
    border: 44px solid rgba(255, 151, 0, 0.06);
    border-radius: 50%;
    pointer-events: none;
}

.bf-impact-container {
    position: relative;
    z-index: 2;
    width: min(100% - 40px, 1280px);
    margin: 0 auto;
}


/* =========================================
   SECTION HEADING
========================================= */

.bf-impact-heading {
    max-width: 760px;
    margin: 0 auto 34px;
    text-align: center;
}

.bf-impact-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 13px;
    padding: 8px 15px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.08);
    color: #ff91b7;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
}

.bf-impact-subtitle i {
    color: var(--bf-orange);
}

.bf-impact-heading h2 {
    margin: 0 0 12px;
    color: #ffffff;
    font-size: clamp(35px, 4vw, 51px);
    line-height: 1.16;
    font-weight: 800;
    letter-spacing: -1.3px;
}

.bf-impact-heading h2 strong {
    display: block;
    background:
        linear-gradient(
            90deg,
            #ff4f89 0%,
            #ffad26 52%,
            #7ec746 100%
        );
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.bf-impact-heading p {
    max-width: 650px;
    margin: 0 auto;
    color: rgba(255, 255, 255, 0.72);
    font-size: 15.5px;
    line-height: 1.7;
    font-weight: 500;
}


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

.bf-impact-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}


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

.bf-impact-card {
    position: relative;
    min-width: 0;
    min-height: 135px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 17px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.075);
    box-shadow: 0 15px 35px rgba(8, 1, 14, 0.16);
    backdrop-filter: blur(12px);
    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        background 0.3s ease,
        box-shadow 0.3s ease;
}

.bf-impact-card::after {
    content: "";
    position: absolute;
    top: -55px;
    right: -55px;
    width: 125px;
    height: 125px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.045);
    pointer-events: none;
}

.bf-impact-card:hover {
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.11);
    transform: translateY(-6px);
    box-shadow: 0 22px 42px rgba(8, 1, 14, 0.24);
}


/* =========================================
   ICON
========================================= */

.bf-impact-icon {
    position: relative;
    z-index: 2;
    width: 62px;
    height: 62px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 18px;
    color: #ffffff;
    font-size: 23px;
    box-shadow: 0 13px 27px rgba(0, 0, 0, 0.18);
}

.bf-impact-pink .bf-impact-icon {
    background:
        linear-gradient(
            135deg,
            var(--bf-pink),
            var(--bf-pink-dark)
        );
}

.bf-impact-purple .bf-impact-icon {
    background:
        linear-gradient(
            135deg,
            #9b45ae,
            var(--bf-purple)
        );
}

.bf-impact-orange .bf-impact-icon {
    background:
        linear-gradient(
            135deg,
            #ffb42c,
            var(--bf-orange)
        );
}

.bf-impact-green .bf-impact-icon {
    background:
        linear-gradient(
            135deg,
            #7cc744,
            var(--bf-green)
        );
}


/* =========================================
   NUMBER AND TEXT
========================================= */

.bf-impact-content {
    position: relative;
    z-index: 2;
    min-width: 0;
}

.bf-impact-content h3 {
    margin: 0 0 5px;
    color: #ffffff;
    font-size: clamp(29px, 3vw, 39px);
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -0.8px;
}

.bf-impact-content p {
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 14.5px;
    line-height: 1.5;
    font-weight: 600;
}


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

@media (max-width: 1000px) {

    .bf-impact-section {
        padding: 52px 0;
    }

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


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

@media (max-width: 650px) {

    .bf-impact-section {
        padding: 42px 0;
    }

    .bf-impact-container {
        width: min(100% - 28px, 1280px);
    }

    .bf-impact-heading {
        margin-bottom: 27px;
    }

    .bf-impact-subtitle {
        font-size: 11px;
        letter-spacing: 0.5px;
    }

    .bf-impact-heading h2 {
        font-size: 32px;
        line-height: 1.2;
        letter-spacing: -0.7px;
    }

    .bf-impact-heading p {
        font-size: 15px;
    }

    .bf-impact-grid {
        grid-template-columns: 1fr;
        gap: 11px;
    }

    .bf-impact-card {
        min-height: 110px;
        padding: 16px;
        border-radius: 17px;
    }

    .bf-impact-icon {
        width: 55px;
        height: 55px;
        border-radius: 16px;
        font-size: 20px;
    }

    .bf-impact-content h3 {
        font-size: 31px;
    }

    .bf-impact-content p {
        font-size: 14px;
    }
}


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

@media (max-width: 390px) {

    .bf-impact-section {
        padding: 36px 0;
    }

    .bf-impact-heading h2 {
        font-size: 28px;
    }

    .bf-impact-card {
        gap: 13px;
        padding: 14px;
    }

    .bf-impact-icon {
        width: 51px;
        height: 51px;
    }

    .bf-impact-content h3 {
        font-size: 28px;
    }

    .bf-impact-content p {
        font-size: 13.5px;
    }
}

/* =========================================
   FEATURED PROGRAMS PREMIUM SLIDER
========================================= */

.bf-programs-section {
    --bf-purple: #4b156f;
    --bf-purple-dark: #250b3a;
    --bf-purple-light: #812e95;
    --bf-pink: #ed296d;
    --bf-pink-dark: #c81759;
    --bf-orange: #ff9700;
    --bf-green: #4f9f19;
    --bf-dark: #32143f;
    --bf-muted: #716779;

    position: relative;
    width: 100%;
    padding: 58px 0;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 7% 18%,
            rgba(237, 41, 109, 0.08),
            transparent 25%
        ),
        radial-gradient(
            circle at 94% 85%,
            rgba(79, 159, 25, 0.08),
            transparent 24%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fff9fc 100%
        );
    font-family: "Manrope", sans-serif;
}

.bf-programs-section::before {
    content: "";
    position: absolute;
    top: -120px;
    right: -110px;
    width: 320px;
    height: 320px;
    border: 50px solid rgba(129, 46, 149, 0.05);
    border-radius: 50%;
    pointer-events: none;
}

.bf-programs-section::after {
    content: "";
    position: absolute;
    left: -100px;
    bottom: -130px;
    width: 280px;
    height: 280px;
    border: 44px solid rgba(255, 151, 0, 0.055);
    border-radius: 50%;
    pointer-events: none;
}

.bf-programs-container {
    position: relative;
    z-index: 2;
    width: min(100% - 40px, 1280px);
    margin: 0 auto;
}


/* =========================================
   SECTION HEADING
========================================= */

.bf-programs-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 35px;
    margin-bottom: 30px;
}

.bf-programs-heading-content {
    max-width: 760px;
}

.bf-programs-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 13px;
    padding: 8px 15px;
    border: 1px solid rgba(237, 41, 109, 0.18);
    border-radius: 30px;
    background: rgba(237, 41, 109, 0.07);
    color: var(--bf-pink-dark);
    font-size: 13px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.bf-programs-subtitle i {
    color: var(--bf-green);
}

.bf-programs-heading h2 {
    margin: 0 0 12px;
    color: var(--bf-dark);
    font-size: clamp(36px, 4vw, 52px);
    line-height: 1.16;
    font-weight: 800;
    letter-spacing: -1.3px;
}

.bf-programs-heading h2 span {
    display: block;
    background:
        linear-gradient(
            90deg,
            var(--bf-pink) 0%,
            var(--bf-purple-light) 55%,
            var(--bf-green) 100%
        );
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.bf-programs-heading p {
    max-width: 700px;
    margin: 0;
    color: var(--bf-muted);
    font-size: 15.5px;
    line-height: 1.7;
    font-weight: 500;
}


/* =========================================
   SLIDER CONTROLS
========================================= */

.bf-programs-controls {
    display: flex;
    align-items: center;
    gap: 11px;
    flex-shrink: 0;
}

.bf-program-arrow {
    width: 52px;
    height: 52px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(75, 21, 111, 0.12);
    border-radius: 50%;
    background: #ffffff;
    color: var(--bf-purple);
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 12px 28px rgba(55, 14, 72, 0.09);
    transition:
        transform 0.3s ease,
        background 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease;
}

.bf-program-arrow:hover {
    border-color: transparent;
    background:
        linear-gradient(
            135deg,
            var(--bf-pink),
            var(--bf-purple-light)
        );
    color: #ffffff;
    transform: translateY(-3px);
}


/* =========================================
   SWIPER
========================================= */

.bf-programs-slider {
    width: 100%;
    overflow: visible;
    padding: 3px 3px 42px;
}

.bf-programs-slider .swiper-slide {
    height: auto;
}


/* =========================================
   PROGRAM CARD
========================================= */

.bf-program-card {
    position: relative;
    height: 100%;
    min-height: 455px;
    overflow: hidden;
    border: 1px solid rgba(75, 21, 111, 0.09);
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 17px 42px rgba(56, 15, 73, 0.09);
    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

.bf-program-card:hover {
    border-color: rgba(237, 41, 109, 0.22);
    transform: translateY(-8px);
    box-shadow: 0 27px 55px rgba(56, 15, 73, 0.15);
}


/* =========================================
   PROGRAM IMAGE — 480 × 320 RATIO
========================================= */

.bf-program-image {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: #eee4f0;
}

.bf-program-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    transition: transform 0.6s ease;
}

.bf-program-card:hover .bf-program-image img {
    transform: scale(1.08);
}

.bf-program-image-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            rgba(37, 8, 49, 0.06) 25%,
            rgba(37, 8, 49, 0.72) 100%
        );
}

.bf-program-category {
    position: absolute;
    left: 17px;
    bottom: 17px;
    max-width: calc(100% - 90px);
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 30px;
    background: rgba(42, 8, 55, 0.62);
    color: #ffffff;
    font-size: 11px;
    line-height: 1.3;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    backdrop-filter: blur(9px);
}

.bf-program-number {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 45px;
    height: 45px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 13px;
    background: rgba(42, 8, 55, 0.58);
    color: #ffffff;
    font-size: 13px;
    line-height: 1;
    font-weight: 800;
    backdrop-filter: blur(9px);
}


/* =========================================
   CARD CONTENT
========================================= */

.bf-program-content {
    position: relative;
    padding: 37px 23px 23px;
}

.bf-program-icon {
    position: absolute;
    top: -29px;
    left: 23px;
    width: 58px;
    height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 5px solid #ffffff;
    border-radius: 17px;
    color: #ffffff;
    font-size: 20px;
    box-shadow: 0 12px 27px rgba(52, 12, 68, 0.17);
}

.bf-program-pink {
    background:
        linear-gradient(
            135deg,
            var(--bf-pink),
            var(--bf-pink-dark)
        );
}

.bf-program-purple {
    background:
        linear-gradient(
            135deg,
            var(--bf-purple-light),
            var(--bf-purple)
        );
}

.bf-program-orange {
    background:
        linear-gradient(
            135deg,
            #ffb128,
            var(--bf-orange)
        );
}

.bf-program-green {
    background:
        linear-gradient(
            135deg,
            #79c340,
            var(--bf-green)
        );
}

.bf-program-content h3 {
    margin: 11px 0 12px;
    color: var(--bf-dark);
    font-size: 21px;
    line-height: 1.35;
    font-weight: 800;
}

.bf-program-content p {
    min-height: 78px;
    margin: 0 0 17px;
    color: var(--bf-muted);
    font-size: 14.5px;
    line-height: 1.7;
    font-weight: 500;
}

.bf-program-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--bf-pink-dark);
    text-decoration: none;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 800;
    transition:
        color 0.3s ease,
        gap 0.3s ease;
}

.bf-program-link:hover {
    color: var(--bf-purple);
    gap: 13px;
}

.bf-program-link i {
    transition: transform 0.3s ease;
}

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


/* =========================================
   PAGINATION
========================================= */

.bf-programs-pagination {
    bottom: 0 !important;
}

.bf-programs-pagination .swiper-pagination-bullet {
    width: 9px;
    height: 9px;
    margin: 0 5px !important;
    background: rgba(75, 21, 111, 0.27);
    opacity: 1;
    transition:
        width 0.3s ease,
        border-radius 0.3s ease,
        background 0.3s ease;
}

.bf-programs-pagination .swiper-pagination-bullet-active {
    width: 33px;
    border-radius: 20px;
    background:
        linear-gradient(
            90deg,
            var(--bf-pink),
            var(--bf-orange)
        );
}


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

@media (max-width: 991px) {

    .bf-programs-section {
        padding: 50px 0;
    }

    .bf-programs-heading {
        margin-bottom: 25px;
    }

    .bf-program-card {
        min-height: 445px;
    }
}


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

@media (max-width: 650px) {

    .bf-programs-section {
        padding: 42px 0;
    }

    .bf-programs-container {
        width: min(100% - 28px, 1280px);
    }

    .bf-programs-heading {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
        margin-bottom: 23px;
    }

    .bf-programs-subtitle {
        font-size: 11px;
        letter-spacing: 0.4px;
    }

    .bf-programs-heading h2 {
        font-size: 33px;
        line-height: 1.2;
        letter-spacing: -0.7px;
    }

    .bf-programs-heading p {
        font-size: 15px;
        line-height: 1.7;
    }

    .bf-programs-controls {
        align-self: flex-end;
    }

    .bf-program-arrow {
        width: 47px;
        height: 47px;
    }

    .bf-programs-slider {
        padding-bottom: 36px;
    }

    .bf-program-card {
        min-height: 430px;
        border-radius: 21px;
    }

    .bf-program-content {
        padding: 35px 20px 21px;
    }

    .bf-program-icon {
        left: 20px;
        width: 55px;
        height: 55px;
    }

    .bf-program-content h3 {
        font-size: 21px;
    }

    .bf-program-content p {
        min-height: auto;
        font-size: 14.5px;
    }
}


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

@media (max-width: 390px) {

    .bf-programs-section {
        padding: 36px 0;
    }

    .bf-programs-heading h2 {
        font-size: 29px;
    }

    .bf-program-category {
        left: 13px;
        bottom: 13px;
        font-size: 10px;
    }

    .bf-program-number {
        top: 13px;
        right: 13px;
        width: 42px;
        height: 42px;
    }

    .bf-program-content h3 {
        font-size: 19px;
    }
}

/* =========================================
   BHARATI FOUNDATION GALLERY
========================================= */

.bf-gallery-section {
    --bf-purple: #4b156f;
    --bf-purple-dark: #250b3a;
    --bf-purple-light: #812e95;
    --bf-pink: #ed296d;
    --bf-pink-dark: #c81759;
    --bf-orange: #ff9700;
    --bf-green: #4f9f19;
    --bf-dark: #32143f;
    --bf-muted: #716779;

    position: relative;
    width: 100%;
    padding: 58px 0;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 7% 18%,
            rgba(237, 41, 109, 0.08),
            transparent 25%
        ),
        radial-gradient(
            circle at 94% 85%,
            rgba(79, 159, 25, 0.08),
            transparent 24%
        ),
        linear-gradient(
            180deg,
            #fffafd 0%,
            #ffffff 100%
        );
    font-family: "Manrope", sans-serif;
}

.bf-gallery-section::before {
    content: "";
    position: absolute;
    top: -120px;
    right: -110px;
    width: 320px;
    height: 320px;
    border: 50px solid rgba(129, 46, 149, 0.05);
    border-radius: 50%;
    pointer-events: none;
}

.bf-gallery-container {
    position: relative;
    z-index: 2;
    width: min(100% - 40px, 1280px);
    margin: 0 auto;
}


/* =========================================
   HEADING
========================================= */

.bf-gallery-heading {
    max-width: 780px;
    margin: 0 auto 28px;
    text-align: center;
}

.bf-gallery-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 13px;
    padding: 8px 15px;
    border: 1px solid rgba(237, 41, 109, 0.18);
    border-radius: 30px;
    background: rgba(237, 41, 109, 0.07);
    color: var(--bf-pink-dark);
    font-size: 13px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.bf-gallery-subtitle i {
    color: var(--bf-orange);
}

.bf-gallery-heading h2 {
    margin: 0 0 12px;
    color: var(--bf-dark);
    font-size: clamp(36px, 4vw, 52px);
    line-height: 1.16;
    font-weight: 800;
    letter-spacing: -1.3px;
}

.bf-gallery-heading h2 span {
    display: block;
    background:
        linear-gradient(
            90deg,
            var(--bf-pink),
            var(--bf-purple-light),
            var(--bf-green)
        );
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.bf-gallery-heading p {
    max-width: 680px;
    margin: 0 auto;
    color: var(--bf-muted);
    font-size: 15.5px;
    line-height: 1.7;
    font-weight: 500;
}


/* =========================================
   FILTER BUTTONS
========================================= */

.bf-gallery-filters {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 9px;
    margin-bottom: 25px;
}

.bf-gallery-filter {
    min-height: 43px;
    padding: 10px 17px;
    border: 1px solid rgba(75, 21, 111, 0.12);
    border-radius: 30px;
    background: #ffffff;
    color: var(--bf-purple);
    font-family: inherit;
    font-size: 13px;
    line-height: 1.2;
    font-weight: 750;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(55, 14, 72, 0.06);
    transition: all 0.3s ease;
}

.bf-gallery-filter:hover,
.bf-gallery-filter.active {
    border-color: transparent;
    background:
        linear-gradient(
            135deg,
            var(--bf-pink),
            var(--bf-purple-light)
        );
    color: #ffffff;
    transform: translateY(-2px);
}


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

.bf-gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 220px;
    grid-auto-flow: dense;
    gap: 15px;
}

.bf-gallery-item {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border-radius: 20px;
    background: #eee5f0;
    box-shadow: 0 15px 35px rgba(54, 14, 72, 0.1);
    transition:
        opacity 0.35s ease,
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

.bf-gallery-item.bf-gallery-hidden {
    display: none;
}

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

.bf-gallery-tall {
    grid-row: span 2;
}

.bf-gallery-wide {
    grid-column: span 2;
}

.bf-gallery-item img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    transition: transform 0.65s ease;
}

.bf-gallery-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 23px 48px rgba(54, 14, 72, 0.16);
}

.bf-gallery-item:hover img {
    transform: scale(1.08);
}


/* =========================================
   IMAGE OVERLAY
========================================= */

.bf-gallery-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 15px;
    padding: 20px;
    background:
        linear-gradient(
            180deg,
            rgba(35, 7, 47, 0.04) 25%,
            rgba(35, 7, 47, 0.82) 100%
        );
    opacity: 0;
    transition: opacity 0.35s ease;
}

.bf-gallery-item:hover .bf-gallery-overlay {
    opacity: 1;
}

.bf-gallery-content {
    min-width: 0;
    transform: translateY(16px);
    transition: transform 0.35s ease;
}

.bf-gallery-item:hover .bf-gallery-content {
    transform: translateY(0);
}

.bf-gallery-content span {
    display: block;
    margin-bottom: 5px;
    color: #ff9f25;
    font-size: 11px;
    line-height: 1.3;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.bf-gallery-content h3 {
    margin: 0;
    color: #ffffff;
    font-size: 18px;
    line-height: 1.35;
    font-weight: 800;
}

.bf-gallery-view {
    width: 46px;
    height: 46px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.13);
    color: #ffffff;
    font-size: 16px;
    cursor: pointer;
    backdrop-filter: blur(9px);
    transform: translateY(16px);
    transition:
        transform 0.35s ease,
        background 0.3s ease,
        color 0.3s ease;
}

.bf-gallery-item:hover .bf-gallery-view {
    transform: translateY(0);
}

.bf-gallery-view:hover {
    background: #ffffff;
    color: var(--bf-pink);
}


/* =========================================
   BOTTOM BUTTON
========================================= */

.bf-gallery-bottom {
    display: flex;
    justify-content: center;
    margin-top: 28px;
}

.bf-gallery-btn {
    min-height: 52px;
    padding: 13px 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 13px;
    background:
        linear-gradient(
            135deg,
            var(--bf-pink),
            var(--bf-purple-light)
        );
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 800;
    box-shadow: 0 14px 30px rgba(210, 32, 102, 0.22);
    transition: all 0.3s ease;
}

.bf-gallery-btn:hover {
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 19px 38px rgba(210, 32, 102, 0.3);
}

.bf-gallery-btn i {
    transition: transform 0.3s ease;
}

.bf-gallery-btn:hover i {
    transform: translateX(4px);
}


/* =========================================
   LIGHTBOX
========================================= */

.bf-gallery-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    padding: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(22, 4, 31, 0.94);
    opacity: 0;
    visibility: hidden;
    backdrop-filter: blur(10px);
    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
}

.bf-lightbox-backdrop {
    position: absolute;
    inset: 0;
    cursor: pointer;
    z-index: 0;
}

.bf-gallery-lightbox.active {
    opacity: 1;
    visibility: visible;
}

.bf-lightbox-content {
    width: min(100%, 1050px);
    transform: scale(0.94);
    transition: transform 0.35s ease;
}

.bf-gallery-lightbox.active .bf-lightbox-content {
    transform: scale(1);
}

.bf-lightbox-image {
    width: 100%;
    max-height: 76vh;
    display: block;
    border-radius: 20px;
    object-fit: contain;
    background: #180520;
    box-shadow: 0 30px 75px rgba(0, 0, 0, 0.4);
}

.bf-lightbox-caption {
    padding-top: 16px;
    text-align: center;
}

.bf-lightbox-caption span {
    display: block;
    margin-bottom: 4px;
    color: #ff9f25;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.bf-lightbox-caption h3 {
    margin: 0;
    color: #ffffff;
    font-size: 22px;
    line-height: 1.4;
    font-weight: 800;
}

.bf-lightbox-close {
    position: absolute;
    top: 22px;
    right: 22px;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    font-size: 20px;
    cursor: pointer;
}

.bf-lightbox-arrow {
    position: absolute;
    top: 50%;
    width: 52px;
    height: 52px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    font-size: 17px;
    cursor: pointer;
    transform: translateY(-50%);
}

.bf-lightbox-prev {
    left: 22px;
}

.bf-lightbox-next {
    right: 22px;
}

.bf-lightbox-close:hover,
.bf-lightbox-arrow:hover {
    border-color: var(--bf-pink);
    background: var(--bf-pink);
}


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

@media (max-width: 991px) {

    .bf-gallery-section {
        padding: 50px 0;
    }

    .bf-gallery-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-auto-rows: 205px;
    }
}


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

@media (max-width: 650px) {

    .bf-gallery-section {
        padding: 42px 0;
    }

    .bf-gallery-container {
        width: min(100% - 28px, 1280px);
    }

    .bf-gallery-heading {
        margin-bottom: 23px;
    }

    .bf-gallery-subtitle {
        font-size: 11px;
        letter-spacing: 0.4px;
    }

    .bf-gallery-heading h2 {
        font-size: 33px;
        line-height: 1.2;
        letter-spacing: -0.7px;
    }

    .bf-gallery-heading p {
        font-size: 15px;
    }

    .bf-gallery-filters {
        justify-content: flex-start;
        flex-wrap: nowrap;
        margin-right: -14px;
        padding-right: 14px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .bf-gallery-filters::-webkit-scrollbar {
        display: none;
    }

    .bf-gallery-filter {
        flex-shrink: 0;
    }

    .bf-gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 175px;
        gap: 10px;
    }

    .bf-gallery-large,
    .bf-gallery-wide {
        grid-column: span 2;
    }

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

    .bf-gallery-tall {
        grid-row: span 2;
    }

    .bf-gallery-overlay {
        padding: 14px;
        opacity: 1;
        background:
            linear-gradient(
                180deg,
                transparent 35%,
                rgba(35, 7, 47, 0.82) 100%
            );
    }

    .bf-gallery-content {
        transform: none;
    }

    .bf-gallery-content h3 {
        font-size: 15px;
    }

    .bf-gallery-view {
        width: 40px;
        height: 40px;
        border-radius: 12px;
        transform: none;
    }

    .bf-gallery-lightbox {
        padding: 18px;
    }

    .bf-lightbox-arrow {
        top: auto;
        bottom: 20px;
        width: 46px;
        height: 46px;
    }

    .bf-lightbox-prev {
        left: calc(50% - 57px);
    }

    .bf-lightbox-next {
        right: calc(50% - 57px);
    }

    .bf-lightbox-close {
        top: 14px;
        right: 14px;
        width: 44px;
        height: 44px;
    }

    .bf-lightbox-caption {
        padding-bottom: 65px;
    }
}


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

@media (max-width: 390px) {

    .bf-gallery-section {
        padding: 36px 0;
    }

    .bf-gallery-heading h2 {
        font-size: 29px;
    }

    .bf-gallery-grid {
        grid-auto-rows: 155px;
    }

    .bf-gallery-content span {
        font-size: 9px;
    }

    .bf-gallery-content h3 {
        font-size: 13px;
    }
}


/* =========================================
   GALLERY MASONRY GRID
========================================= */

.bf-gallery-masonry {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 240px;
    gap: 14px;
}

/* Tall item spans 2 rows */
.bf-gm-item.bf-gm-tall {
    grid-row: span 2;
}

/* Wide item spans 2 columns */
.bf-gm-item.bf-gm-wide {
    grid-column: span 2;
}

/* Each item */
.bf-gm-item {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    background: #e8dff0;
    cursor: pointer;
}

.bf-gm-item img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.bf-gm-item:hover img {
    transform: scale(1.07);
}

/* Overlay */
.bf-gm-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 20px;
    background: linear-gradient(
        180deg,
        rgba(30, 6, 42, 0) 35%,
        rgba(30, 6, 42, 0.78) 100%
    );
    opacity: 0;
    transition: opacity 0.35s ease;
}

.bf-gm-item:hover .bf-gm-overlay {
    opacity: 1;
}

.bf-gm-info {
    flex: 1;
    padding-right: 12px;
}

.bf-gm-info h3 {
    margin: 0 0 5px;
    color: #ffffff;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.2px;
}

.bf-gm-info span {
    display: inline-block;
    padding: 4px 10px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
    color: rgba(255, 255, 255, 0.88);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.bf-gm-zoom {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(10px);
    color: #ffffff;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.25s ease, transform 0.25s ease;
}

.bf-gm-zoom:hover {
    background: var(--bf-pink, #ed296d);
    border-color: transparent;
    transform: scale(1.1);
}

/* Tablet: 3 cols */
@media (max-width: 1100px) {
    .bf-gallery-masonry {
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: 210px;
        gap: 12px;
    }
}

/* Phablet: 2 cols */
@media (max-width: 720px) {
    .bf-gallery-masonry {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 190px;
        gap: 10px;
    }

    .bf-gm-item.bf-gm-tall {
        grid-row: span 2;
    }

    .bf-gm-item.bf-gm-wide {
        grid-column: span 2;
    }
}

/* Mobile: 1 col — drop spanning */
@media (max-width: 480px) {
    .bf-gallery-masonry {
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: 160px;
        gap: 8px;
    }

    .bf-gm-item.bf-gm-tall,
    .bf-gm-item.bf-gm-wide {
        grid-row: span 1;
        grid-column: span 1;
    }
}


/* =========================================
   PREMIUM EVENTS SLIDER
========================================= */

.bf-events-premium-section {
    --bf-purple: #4b156f;
    --bf-purple-dark: #250b3a;
    --bf-purple-light: #812e95;
    --bf-pink: #ed296d;
    --bf-pink-dark: #c81759;
    --bf-orange: #ff9700;
    --bf-green: #4f9f19;
    --bf-dark: #32143f;
    --bf-muted: #716779;

    position: relative;
    width: 100%;
    padding: 58px 0;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 6% 17%,
            rgba(237, 41, 109, 0.08),
            transparent 25%
        ),
        radial-gradient(
            circle at 94% 84%,
            rgba(79, 159, 25, 0.07),
            transparent 25%
        ),
        linear-gradient(
            180deg,
            #fffafd 0%,
            #ffffff 100%
        );
    font-family: "Manrope", sans-serif;
}

.bf-events-premium-section::before {
    content: "";
    position: absolute;
    top: -120px;
    right: -110px;
    width: 320px;
    height: 320px;
    border: 50px solid rgba(129, 46, 149, 0.05);
    border-radius: 50%;
    pointer-events: none;
}

.bf-events-premium-section::after {
    content: "";
    position: absolute;
    left: -100px;
    bottom: -130px;
    width: 280px;
    height: 280px;
    border: 44px solid rgba(255, 151, 0, 0.05);
    border-radius: 50%;
    pointer-events: none;
}

.bf-events-premium-container {
    position: relative;
    z-index: 2;
    width: min(100% - 40px, 1280px);
    margin: 0 auto;
}


/* =========================================
   HEADING
========================================= */

.bf-events-premium-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 35px;
    margin-bottom: 30px;
}

.bf-events-premium-title {
    max-width: 760px;
}

.bf-events-premium-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 13px;
    padding: 8px 15px;
    border: 1px solid rgba(237, 41, 109, 0.18);
    border-radius: 30px;
    background: rgba(237, 41, 109, 0.07);
    color: var(--bf-pink-dark);
    font-size: 13px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.bf-events-premium-subtitle i {
    color: var(--bf-orange);
}

.bf-events-premium-title h2 {
    margin: 0 0 11px;
    color: var(--bf-dark);
    font-size: clamp(36px, 4vw, 52px);
    line-height: 1.16;
    font-weight: 800;
    letter-spacing: -1.3px;
}

.bf-events-premium-title h2 span {
    display: block;
    background:
        linear-gradient(
            90deg,
            var(--bf-pink),
            var(--bf-purple-light),
            var(--bf-green)
        );
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.bf-events-premium-title p {
    max-width: 680px;
    margin: 0;
    color: var(--bf-muted);
    font-size: 15.5px;
    line-height: 1.7;
    font-weight: 500;
}


/* =========================================
   CONTROLS
========================================= */

.bf-events-premium-controls {
    display: flex;
    align-items: center;
    gap: 11px;
    flex-shrink: 0;
}

.bf-events-premium-arrow {
    width: 52px;
    height: 52px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(75, 21, 111, 0.12);
    border-radius: 50%;
    background: #ffffff;
    color: var(--bf-purple);
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 12px 28px rgba(55, 14, 72, 0.09);
    transition: all 0.3s ease;
}

.bf-events-premium-arrow:hover {
    border-color: transparent;
    background:
        linear-gradient(
            135deg,
            var(--bf-pink),
            var(--bf-purple-light)
        );
    color: #ffffff;
    transform: translateY(-3px);
}


/* =========================================
   SLIDER
========================================= */

.bf-events-premium-slider {
    width: 100%;
    overflow: visible;
    padding: 3px 3px 42px;
}

.bf-events-premium-slider .swiper-slide {
    height: auto;
}


/* =========================================
   EVENT CARD
========================================= */

.bf-events-premium-card {
    height: 100%;
    min-height: 455px;
    overflow: hidden;
    border: 1px solid rgba(75, 21, 111, 0.09);
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 17px 42px rgba(56, 15, 73, 0.09);
    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

.bf-events-premium-card:hover {
    border-color: rgba(237, 41, 109, 0.22);
    transform: translateY(-8px);
    box-shadow: 0 27px 55px rgba(56, 15, 73, 0.15);
}


/* =========================================
   IMAGE
========================================= */

.bf-events-premium-image {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #eee5f0;
}

.bf-events-premium-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            rgba(37, 8, 49, 0.04) 35%,
            rgba(37, 8, 49, 0.7) 100%
        );
}

.bf-events-premium-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    transition: transform 0.6s ease;
}

.bf-events-premium-card:hover .bf-events-premium-image img {
    transform: scale(1.08);
}

.bf-events-premium-status {
    position: absolute;
    z-index: 2;
    left: 16px;
    bottom: 16px;
    min-height: 32px;
    padding: 7px 11px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 30px;
    color: #ffffff;
    font-size: 11px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    backdrop-filter: blur(9px);
}

.bf-events-status-upcoming {
    background: rgba(237, 41, 109, 0.82);
}

.bf-events-status-live {
    background: rgba(79, 159, 25, 0.88);
}

.bf-events-status-live i {
    font-size: 7px;
    animation: bfEventPulse 1.4s infinite;
}

.bf-events-status-past {
    background: rgba(50, 20, 63, 0.78);
}

.bf-events-premium-number {
    position: absolute;
    z-index: 2;
    top: 15px;
    right: 15px;
    width: 45px;
    height: 45px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 13px;
    background: rgba(42, 8, 55, 0.58);
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
    backdrop-filter: blur(9px);
}


/* =========================================
   CONTENT
========================================= */

.bf-events-premium-content {
    padding: 22px 22px 24px;
}

.bf-events-premium-category {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 12px;
    padding: 7px 11px;
    border-radius: 30px;
    font-size: 11px;
    line-height: 1.3;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.bf-events-category-pink {
    background: rgba(237, 41, 109, 0.09);
    color: var(--bf-pink-dark);
}

.bf-events-category-green {
    background: rgba(79, 159, 25, 0.1);
    color: #3d8312;
}

.bf-events-category-purple {
    background: rgba(129, 46, 149, 0.1);
    color: var(--bf-purple);
}

.bf-events-category-orange {
    background: rgba(255, 151, 0, 0.11);
    color: #d57900;
}

.bf-events-premium-content h3 {
    min-height: 58px;
    margin: 0 0 15px;
    color: var(--bf-dark);
    font-size: 22px;
    line-height: 1.35;
    font-weight: 800;
}

.bf-events-premium-meta {
    margin-bottom: 18px;
}

.bf-events-premium-meta p {
    margin: 0 0 9px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: var(--bf-muted);
    font-size: 13.5px;
    line-height: 1.55;
    font-weight: 500;
}

.bf-events-premium-meta p:last-child {
    margin-bottom: 0;
}

.bf-events-premium-meta i {
    width: 17px;
    margin-top: 3px;
    flex-shrink: 0;
    color: var(--bf-pink);
    text-align: center;
}

.bf-events-premium-meta p:last-child i {
    color: var(--bf-green);
}

.bf-events-premium-meta p span {
    width: 4px;
    height: 4px;
    margin-top: 8px;
    border-radius: 50%;
    background: var(--bf-orange);
}

.bf-events-premium-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--bf-pink-dark);
    text-decoration: none;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 800;
    transition:
        color 0.3s ease,
        gap 0.3s ease;
}

.bf-events-premium-link:hover {
    color: var(--bf-purple);
    gap: 13px;
}

.bf-events-premium-link i {
    transition: transform 0.3s ease;
}

.bf-events-premium-link:hover i {
    transform: translateX(3px);
}


/* =========================================
   PAGINATION
========================================= */

.bf-events-premium-pagination {
    bottom: 0 !important;
}

.bf-events-premium-pagination .swiper-pagination-bullet {
    width: 9px;
    height: 9px;
    margin: 0 5px !important;
    background: rgba(75, 21, 111, 0.27);
    opacity: 1;
    transition: all 0.3s ease;
}

.bf-events-premium-pagination .swiper-pagination-bullet-active {
    width: 33px;
    border-radius: 20px;
    background:
        linear-gradient(
            90deg,
            var(--bf-pink),
            var(--bf-orange)
        );
}


/* =========================================
   VIEW ALL
========================================= */

.bf-events-premium-bottom {
    display: flex;
    justify-content: center;
    margin-top: 18px;
}

.bf-events-premium-view-all {
    min-height: 52px;
    padding: 12px 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border-radius: 13px;
    background:
        linear-gradient(
            135deg,
            var(--bf-pink),
            var(--bf-purple-light)
        );
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 800;
    box-shadow: 0 14px 30px rgba(210, 32, 102, 0.22);
    transition: all 0.3s ease;
}

.bf-events-premium-view-all span {
    min-width: 27px;
    height: 27px;
    padding: 0 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.18);
    font-size: 12px;
}

.bf-events-premium-view-all:hover {
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 19px 37px rgba(210, 32, 102, 0.3);
}


/* =========================================
   ANIMATION
========================================= */

@keyframes bfEventPulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.35;
    }
}


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

@media (max-width: 991px) {

    .bf-events-premium-section {
        padding: 50px 0;
    }

    .bf-events-premium-heading {
        margin-bottom: 25px;
    }

    .bf-events-premium-card {
        min-height: 440px;
    }
}


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

@media (max-width: 650px) {

    .bf-events-premium-section {
        padding: 42px 0;
    }

    .bf-events-premium-container {
        width: min(100% - 28px, 1280px);
    }

    .bf-events-premium-heading {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
        margin-bottom: 23px;
    }

    .bf-events-premium-subtitle {
        font-size: 11px;
        letter-spacing: 0.4px;
    }

    .bf-events-premium-title h2 {
        font-size: 33px;
        line-height: 1.2;
        letter-spacing: -0.7px;
    }

    .bf-events-premium-title p {
        font-size: 15px;
    }

    .bf-events-premium-controls {
        align-self: flex-end;
    }

    .bf-events-premium-arrow {
        width: 47px;
        height: 47px;
    }

    .bf-events-premium-slider {
        padding-bottom: 36px;
    }

    .bf-events-premium-card {
        min-height: 420px;
        border-radius: 21px;
    }

    .bf-events-premium-content {
        padding: 20px;
    }

    .bf-events-premium-content h3 {
        min-height: auto;
        font-size: 21px;
    }
}


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

@media (max-width: 390px) {

    .bf-events-premium-section {
        padding: 36px 0;
    }

    .bf-events-premium-title h2 {
        font-size: 29px;
    }

    .bf-events-premium-content h3 {
        font-size: 19px;
    }

    .bf-events-premium-meta p {
        font-size: 13px;
    }
}

/* =========================================
   EVENTS PREMIUM GRID (replaces slider)
========================================= */

.bf-events-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-bottom: 40px;
}

.bf-events-grid .bf-events-premium-card {
    height: 100%;
    min-height: 455px;
}

@media (max-width: 1100px) {
    .bf-events-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 22px;
    }
}

@media (max-width: 650px) {
    .bf-events-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .bf-events-grid .bf-events-premium-card {
        min-height: auto;
    }
}


/* =========================================
   PROGRAMS GRID (replaces slider)
========================================= */

.bf-programs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.bf-programs-grid .bf-program-card {
    height: 100%;
    min-height: 455px;
}

@media (max-width: 1100px) {
    .bf-programs-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 22px;
    }
}

@media (max-width: 650px) {
    .bf-programs-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .bf-programs-grid .bf-program-card {
        min-height: auto;
    }
}

/* Also hide slider arrow controls since we no longer use slider */
.bf-events-premium-controls,
.bf-programs-controls {
    display: none;
}


/* =========================================
   BHARATI FOUNDATION BLOG SECTION
========================================= */

.bf-blog-section {
    --bf-purple: #4b156f;
    --bf-purple-dark: #250b3a;
    --bf-purple-light: #812e95;
    --bf-pink: #ed296d;
    --bf-pink-dark: #c81759;
    --bf-orange: #ff9700;
    --bf-green: #4f9f19;
    --bf-dark: #32143f;
    --bf-muted: #716779;

    position: relative;
    width: 100%;
    padding: 58px 0;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 7% 18%,
            rgba(237, 41, 109, 0.08),
            transparent 25%
        ),
        radial-gradient(
            circle at 94% 84%,
            rgba(79, 159, 25, 0.07),
            transparent 24%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fff9fc 100%
        );
    font-family: "Manrope", sans-serif;
}

.bf-blog-section::before {
    content: "";
    position: absolute;
    top: -120px;
    right: -110px;
    width: 320px;
    height: 320px;
    border: 50px solid rgba(129, 46, 149, 0.05);
    border-radius: 50%;
    pointer-events: none;
}

.bf-blog-section::after {
    content: "";
    position: absolute;
    left: -100px;
    bottom: -130px;
    width: 280px;
    height: 280px;
    border: 44px solid rgba(255, 151, 0, 0.05);
    border-radius: 50%;
    pointer-events: none;
}

.bf-blog-container {
    position: relative;
    z-index: 2;
    width: min(100% - 40px, 1280px);
    margin: 0 auto;
}


/* =========================================
   HEADING
========================================= */

.bf-blog-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 35px;
    margin-bottom: 30px;
}

.bf-blog-heading-content {
    max-width: 760px;
}

.bf-blog-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 13px;
    padding: 8px 15px;
    border: 1px solid rgba(237, 41, 109, 0.18);
    border-radius: 30px;
    background: rgba(237, 41, 109, 0.07);
    color: var(--bf-pink-dark);
    font-size: 13px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.bf-blog-subtitle i {
    color: var(--bf-orange);
}

.bf-blog-heading h2 {
    margin: 0 0 11px;
    color: var(--bf-dark);
    font-size: clamp(36px, 4vw, 52px);
    line-height: 1.16;
    font-weight: 800;
    letter-spacing: -1.3px;
}

.bf-blog-heading h2 span {
    display: block;
    background:
        linear-gradient(
            90deg,
            var(--bf-pink),
            var(--bf-purple-light),
            var(--bf-green)
        );
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.bf-blog-heading p {
    max-width: 680px;
    margin: 0;
    color: var(--bf-muted);
    font-size: 15.5px;
    line-height: 1.7;
    font-weight: 500;
}


/* =========================================
   VIEW ALL BUTTON
========================================= */

.bf-blog-view-all {
    min-height: 52px;
    padding: 13px 21px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-shrink: 0;
    border-radius: 13px;
    background:
        linear-gradient(
            135deg,
            var(--bf-pink),
            var(--bf-purple-light)
        );
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 800;
    box-shadow: 0 14px 30px rgba(210, 32, 102, 0.22);
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.bf-blog-view-all:hover {
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 19px 38px rgba(210, 32, 102, 0.31);
}

.bf-blog-view-all i {
    transition: transform 0.3s ease;
}

.bf-blog-view-all:hover i {
    transform: translateX(4px);
}


/* =========================================
   BLOG LAYOUT
========================================= */

.bf-blog-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    gap: 22px;
}

.bf-blog-side-list {
    display: grid;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 18px;
}


/* =========================================
   BLOG CARD
========================================= */

.bf-blog-card {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(75, 21, 111, 0.09);
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 17px 42px rgba(56, 15, 73, 0.09);
    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

.bf-blog-card:hover {
    border-color: rgba(237, 41, 109, 0.22);
    transform: translateY(-7px);
    box-shadow: 0 27px 55px rgba(56, 15, 73, 0.15);
}


/* =========================================
   FEATURED BLOG
========================================= */

.bf-blog-featured {
    display: flex;
    flex-direction: column;
}

.bf-blog-featured .bf-blog-image {
    height: 345px;
}

.bf-blog-featured .bf-blog-content {
    padding: 25px;
}

.bf-blog-featured .bf-blog-content h3 {
    margin: 0 0 13px;
    font-size: 27px;
}


/* =========================================
   SIDE BLOG
========================================= */

.bf-blog-small {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    min-height: 245px;
}

.bf-blog-small .bf-blog-image {
    height: 100%;
}

.bf-blog-small .bf-blog-content {
    padding: 20px;
}

.bf-blog-small .bf-blog-content h3 {
    margin: 0 0 10px;
    font-size: 20px;
}

.bf-blog-small .bf-blog-content p {
    margin-bottom: 13px;
    font-size: 14px;
}


/* =========================================
   BLOG IMAGE
========================================= */

.bf-blog-image {
    position: relative;
    overflow: hidden;
    background: #eee5f0;
}

.bf-blog-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    transition: transform 0.65s ease;
}

.bf-blog-card:hover .bf-blog-image img {
    transform: scale(1.07);
}

.bf-blog-image-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            transparent 45%,
            rgba(37, 8, 49, 0.55) 100%
        );
}

.bf-blog-category {
    position: absolute;
    z-index: 2;
    left: 16px;
    bottom: 16px;
    max-width: calc(100% - 32px);
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.26);
    border-radius: 30px;
    color: #ffffff;
    font-size: 11px;
    line-height: 1.3;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    backdrop-filter: blur(9px);
}

.bf-blog-small .bf-blog-category {
    left: 12px;
    bottom: 12px;
    padding: 7px 10px;
    font-size: 9px;
}

.bf-blog-category-pink {
    background: rgba(237, 41, 109, 0.85);
}

.bf-blog-category-orange {
    background: rgba(255, 151, 0, 0.88);
}

.bf-blog-category-green {
    background: rgba(79, 159, 25, 0.88);
}


/* =========================================
   BLOG CONTENT
========================================= */

.bf-blog-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 11px;
}

.bf-blog-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--bf-muted);
    font-size: 12.5px;
    line-height: 1.4;
    font-weight: 600;
}

.bf-blog-meta i {
    color: var(--bf-pink);
}

.bf-blog-content h3 {
    color: var(--bf-dark);
    line-height: 1.35;
    font-weight: 800;
}

.bf-blog-content h3 a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}

.bf-blog-content h3 a:hover {
    color: var(--bf-pink-dark);
}

.bf-blog-content p {
    margin: 0 0 17px;
    color: var(--bf-muted);
    font-size: 15px;
    line-height: 1.7;
    font-weight: 500;
}

.bf-blog-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--bf-pink-dark);
    text-decoration: none;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 800;
    transition:
        color 0.3s ease,
        gap 0.3s ease;
}

.bf-blog-link:hover {
    color: var(--bf-purple);
    gap: 13px;
}

.bf-blog-link i {
    transition: transform 0.3s ease;
}

.bf-blog-link:hover i {
    transform: translateX(3px);
}


/* =========================================
   MOBILE BOTTOM BUTTON
========================================= */

.bf-blog-mobile-bottom {
    display: none;
    justify-content: center;
    margin-top: 24px;
}


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

@media (max-width: 1050px) {

    .bf-blog-section {
        padding: 50px 0;
    }

    .bf-blog-grid {
        grid-template-columns: 1fr;
    }

    .bf-blog-side-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: auto;
    }

    .bf-blog-small {
        display: flex;
        flex-direction: column;
    }

    .bf-blog-small .bf-blog-image {
        height: 220px;
    }
}


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

@media (max-width: 650px) {

    .bf-blog-section {
        padding: 42px 0;
    }

    .bf-blog-container {
        width: min(100% - 28px, 1280px);
    }

    .bf-blog-heading {
        margin-bottom: 23px;
    }

    .bf-blog-heading > .bf-blog-view-all {
        display: none;
    }

    .bf-blog-subtitle {
        font-size: 11px;
        letter-spacing: 0.4px;
    }

    .bf-blog-heading h2 {
        font-size: 33px;
        line-height: 1.2;
        letter-spacing: -0.7px;
    }

    .bf-blog-heading p {
        font-size: 15px;
    }

    .bf-blog-featured .bf-blog-image {
        height: 245px;
    }

    .bf-blog-featured .bf-blog-content {
        padding: 21px;
    }

    .bf-blog-featured .bf-blog-content h3 {
        font-size: 22px;
    }

    .bf-blog-side-list {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .bf-blog-small .bf-blog-image {
        height: 220px;
    }

    .bf-blog-small .bf-blog-content {
        padding: 19px;
    }

    .bf-blog-small .bf-blog-content h3 {
        font-size: 20px;
    }

    .bf-blog-mobile-bottom {
        display: flex;
    }

    .bf-blog-mobile-bottom .bf-blog-view-all {
        width: 100%;
    }
}


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

@media (max-width: 390px) {

    .bf-blog-section {
        padding: 36px 0;
    }

    .bf-blog-heading h2 {
        font-size: 29px;
    }

    .bf-blog-featured .bf-blog-image,
    .bf-blog-small .bf-blog-image {
        height: 205px;
    }

    .bf-blog-featured .bf-blog-content h3 {
        font-size: 20px;
    }

    .bf-blog-content p {
        font-size: 14.5px;
    }
}

/*=========================================
ABOUT PAGE BANNER - VERSION 2
=========================================*/

.bf-about-banner{

    position:relative;
    width:100%;
    height:520px;

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

    overflow:hidden;

    background-image:
    linear-gradient(rgba(33,12,54,.72),rgba(33,12,54,.72)),
    url("https://images.unsplash.com/photo-1529156069898-49953e39b3ac?auto=format&fit=crop&w=1920&q=80");

    background-size:cover;
    background-position:center;
    background-attachment:fixed;

}

.bf-about-banner::before{

    content:"";

    position:absolute;

    width:520px;
    height:520px;

    left:-180px;
    top:-180px;

    border-radius:50%;

    background:rgba(237,41,109,.18);

    filter:blur(40px);

}

.bf-about-banner::after{

    content:"";

    position:absolute;

    width:450px;
    height:450px;

    right:-120px;
    bottom:-120px;

    border-radius:50%;

    background:rgba(79,159,25,.15);

    filter:blur(40px);

}

.bf-about-banner .container{

    position:relative;

    z-index:5;

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

}

.bf-about-banner-content{

    max-width:850px;

    text-align:center;

    padding:45px 60px;

    border-radius:28px;

    background:rgba(255,255,255,.08);

    border:1px solid rgba(255,255,255,.15);

    backdrop-filter:blur(12px);

}

.bf-banner-subtitle{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 22px;

    border-radius:50px;

    background:linear-gradient(135deg,#ed296d,#812e95);

    color:#fff;

    font-size:14px;

    font-weight:700;

    margin-bottom:22px;

}

.bf-banner-subtitle i{

    color:#ff9700;

}

.bf-about-banner-content h1{

    font-size:68px;

    font-weight:800;

    color:#fff;

    margin-bottom:15px;

    line-height:1.1;

}

.bf-about-banner-content p{

    font-size:20px;

    color:#f2f2f2;

    line-height:1.8;

    margin-bottom:28px;

}

.bf-banner-breadcrumb{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:12px 24px;

    border-radius:50px;

    background:#fff;

}

.bf-banner-breadcrumb a{

    color:#4b156f;

    text-decoration:none;

    font-weight:700;

}

.bf-banner-breadcrumb strong{

    color:#ed296d;

}

.bf-banner-breadcrumb i{

    color:#ff9700;

}


/*========================
Responsive
========================*/

@media(max-width:991px){

.bf-about-banner{

height:430px;

}

.bf-about-banner-content{

padding:35px;

}

.bf-about-banner-content h1{

font-size:52px;

}

.bf-about-banner-content p{

font-size:18px;

}

}

@media(max-width:767px){

.bf-about-banner{

height:360px;

background-attachment:scroll;

}

.bf-about-banner-content{

padding:25px 20px;

width:100%;

}

.bf-about-banner-content h1{

font-size:38px;

}

.bf-about-banner-content p{

font-size:16px;

margin-bottom:20px;

}

.bf-banner-subtitle{

font-size:12px;

}

.bf-banner-breadcrumb{

font-size:13px;

padding:10px 18px;

}

}

@media(max-width:480px){

.bf-about-banner{

height:320px;

}

.bf-about-banner-content h1{

font-size:32px;

}

.bf-about-banner-content{

padding:20px 15px;

}

}

/* =========================================
   WHAT WE DO SLIDER
========================================= */

.bf-work-section {
    --bf-purple: #4b156f;
    --bf-purple-dark: #250b3a;
    --bf-purple-light: #812e95;
    --bf-pink: #ed296d;
    --bf-pink-dark: #c81759;
    --bf-orange: #ff9700;
    --bf-green: #4f9f19;
    --bf-dark: #32143f;
    --bf-muted: #716779;

    position: relative;
    width: 100%;
    padding: 52px 0;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 5% 18%,
            rgba(237, 41, 109, 0.07),
            transparent 24%
        ),
        radial-gradient(
            circle at 94% 82%,
            rgba(79, 159, 25, 0.07),
            transparent 24%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fffafd 100%
        );
    font-family: "Manrope", sans-serif;
}

.bf-work-section::before {
    content: "";
    position: absolute;
    top: -110px;
    right: -100px;
    width: 285px;
    height: 285px;
    border: 44px solid rgba(129, 46, 149, 0.045);
    border-radius: 50%;
    pointer-events: none;
}

.bf-work-container {
    position: relative;
    z-index: 2;
    width: min(100% - 40px, 1280px);
    margin: 0 auto;
}


/* Heading */

.bf-work-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0;
    margin-bottom: 40px;
}

.bf-work-heading-content {
    max-width: 620px;
}

/* =========================================
   WORK GRID (replaces slider)
========================================= */

.bf-work-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.bf-work-grid .bf-work-card {
    height: 100%;
}

/* Hide slider controls */
.bf-work-controls {
    display: none !important;
}

.bf-work-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 12px;
    padding: 8px 14px;
    border: 1px solid rgba(237, 41, 109, 0.18);
    border-radius: 30px;
    background: rgba(237, 41, 109, 0.07);
    color: var(--bf-pink-dark);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

.bf-work-subtitle i {
    color: var(--bf-orange);
}

.bf-work-heading h2 {
    margin: 0 0 10px;
    color: var(--bf-dark);
    font-size: clamp(35px, 4vw, 50px);
    line-height: 1.16;
    font-weight: 800;
    letter-spacing: -1.2px;
}

.bf-work-heading h2 span {
    display: block;
    background:
        linear-gradient(
            90deg,
            var(--bf-pink),
            var(--bf-purple-light),
            var(--bf-green)
        );
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.bf-work-heading p {
    max-width: 700px;
    margin: 0;
    color: var(--bf-muted);
    font-size: 15.5px;
    line-height: 1.65;
    font-weight: 500;
}


/* Controls */

.bf-work-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.bf-work-arrow {
    width: 50px;
    height: 50px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(75, 21, 111, 0.12);
    border-radius: 50%;
    background: #ffffff;
    color: var(--bf-purple);
    font-size: 15px;
    cursor: pointer;
    box-shadow: 0 11px 25px rgba(55, 14, 72, 0.08);
    transition: all 0.3s ease;
}

.bf-work-arrow:hover {
    border-color: transparent;
    background:
        linear-gradient(
            135deg,
            var(--bf-pink),
            var(--bf-purple-light)
        );
    color: #ffffff;
    transform: translateY(-3px);
}


/* Slider */

.bf-work-slider {
    width: 100%;
    overflow: visible;
    padding: 3px 3px 38px;
}

.bf-work-slider .swiper-slide {
    height: auto;
}


/* Card */

.bf-work-card {
    position: relative;
    height: 100%;
    min-height: 255px;
    padding: 24px;
    overflow: hidden;
    border: 1px solid rgba(75, 21, 111, 0.09);
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 15px 36px rgba(55, 14, 72, 0.08);
    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

.bf-work-card::before {
    content: "";
    position: absolute;
    top: -65px;
    right: -60px;
    width: 145px;
    height: 145px;
    border-radius: 50%;
    background: rgba(129, 46, 149, 0.045);
}

.bf-work-card:hover {
    border-color: rgba(237, 41, 109, 0.22);
    transform: translateY(-7px);
    box-shadow: 0 23px 48px rgba(55, 14, 72, 0.13);
}

.bf-work-icon {
    position: relative;
    z-index: 2;
    width: 58px;
    height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    border-radius: 17px;
    color: #ffffff;
    font-size: 21px;
    box-shadow: 0 12px 27px rgba(40, 8, 52, 0.16);
}

.bf-work-pink {
    background:
        linear-gradient(
            135deg,
            var(--bf-pink),
            var(--bf-pink-dark)
        );
}

.bf-work-purple {
    background:
        linear-gradient(
            135deg,
            var(--bf-purple-light),
            var(--bf-purple)
        );
}

.bf-work-orange {
    background:
        linear-gradient(
            135deg,
            #ffb12b,
            var(--bf-orange)
        );
}

.bf-work-green {
    background:
        linear-gradient(
            135deg,
            #79c341,
            var(--bf-green)
        );
}

.bf-work-number {
    position: absolute;
    top: 21px;
    right: 21px;
    color: rgba(75, 21, 111, 0.18);
    font-size: 28px;
    line-height: 1;
    font-weight: 800;
}

.bf-work-card h3 {
    position: relative;
    z-index: 2;
    margin: 0 0 11px;
    color: var(--bf-dark);
    font-size: 20px;
    line-height: 1.35;
    font-weight: 800;
}

.bf-work-card p {
    position: relative;
    z-index: 2;
    margin: 0;
    color: var(--bf-muted);
    font-size: 14.5px;
    line-height: 1.65;
    font-weight: 500;
}


/* Pagination */

.bf-work-pagination {
    bottom: 0 !important;
}

.bf-work-pagination .swiper-pagination-bullet {
    width: 9px;
    height: 9px;
    margin: 0 5px !important;
    background: rgba(75, 21, 111, 0.26);
    opacity: 1;
    transition: all 0.3s ease;
}

.bf-work-pagination .swiper-pagination-bullet-active {
    width: 33px;
    border-radius: 20px;
    background:
        linear-gradient(
            90deg,
            var(--bf-pink),
            var(--bf-orange)
        );
}


/* Tablet */

@media (max-width: 991px) {

    .bf-work-section {
        padding: 47px 0;
    }

    .bf-work-heading {
        margin-bottom: 24px;
    }

    .bf-work-card {
        min-height: 245px;
    }
}


/* Mobile */

@media (max-width: 650px) {

    .bf-work-section {
        padding: 40px 0;
    }

    .bf-work-container {
        width: min(100% - 28px, 1280px);
    }

    .bf-work-heading {
        flex-direction: column;
        align-items: flex-start;
        gap: 17px;
        margin-bottom: 22px;
    }

    .bf-work-subtitle {
        font-size: 11px;
        letter-spacing: 0.4px;
    }

    .bf-work-heading h2 {
        font-size: 32px;
        line-height: 1.2;
    }

    .bf-work-heading p {
        font-size: 15px;
    }

    .bf-work-controls {
        align-self: flex-end;
    }

    .bf-work-arrow {
        width: 46px;
        height: 46px;
    }

    .bf-work-slider {
        padding-bottom: 34px;
    }

    .bf-work-card {
        min-height: 225px;
        padding: 21px;
        border-radius: 20px;
    }

    .bf-work-icon {
        width: 54px;
        height: 54px;
        margin-bottom: 16px;
        font-size: 19px;
    }

    .bf-work-card h3 {
        font-size: 19px;
    }

    .bf-work-card p {
        font-size: 14px;
    }
}


/* Small Mobile */

@media (max-width: 390px) {

    .bf-work-section {
        padding: 35px 0;
    }

    .bf-work-heading h2 {
        font-size: 28px;
    }

    .bf-work-card {
        min-height: 215px;
    }
}

/* =========================================
   OUR COMMITMENT - VERSION 2
========================================= */

.bf-commitment-v2 {
    --bf-purple: #4b156f;
    --bf-purple-dark: #21082f;
    --bf-purple-light: #812e95;
    --bf-pink: #ed296d;
    --bf-pink-dark: #c81759;
    --bf-orange: #ff9700;
    --bf-green: #4f9f19;

    position: relative;
    width: 100%;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 8% 20%,
            rgba(237, 41, 109, 0.17),
            transparent 28%
        ),
        radial-gradient(
            circle at 92% 80%,
            rgba(79, 159, 25, 0.14),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #21082f 0%,
            #3c1050 52%,
            #250b36 100%
        );
    color: #ffffff;
    font-family: "Manrope", sans-serif;
}

.bf-commitment-v2::before {
    content: "";
    position: absolute;
    top: -130px;
    right: -110px;
    width: 320px;
    height: 320px;
    border: 52px solid rgba(255, 255, 255, 0.035);
    border-radius: 50%;
    pointer-events: none;
}

.bf-commitment-v2-inner {
    position: relative;
    z-index: 2;
    width: min(100% - 40px, 1280px);
    margin: 0 auto;
    padding: 64px 0;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    align-items: center;
    gap: 58px;
}


/* Content */

.bf-commitment-v2-content {
    max-width: 700px;
}

.bf-commitment-v2-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 14px;
    padding: 8px 15px;
    border: 1px solid rgba(255, 255, 255, 0.17);
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.08);
    color: #ff8caf;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    backdrop-filter: blur(9px);
}

.bf-commitment-v2-subtitle i {
    color: var(--bf-orange);
}

.bf-commitment-v2-content h2 {
    margin: 0 0 18px;
    color: #ffffff;
    font-size: clamp(37px, 4vw, 54px);
    line-height: 1.14;
    font-weight: 800;
    letter-spacing: -1.4px;
}

.bf-commitment-v2-content h2 span {
    display: block;
    background:
        linear-gradient(
            90deg,
            #ff4f88 0%,
            #ffad24 52%,
            #7bc644 100%
        );
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.bf-commitment-v2-intro {
    max-width: 680px;
    margin: 0 0 25px;
    color: rgba(255, 255, 255, 0.77);
    font-size: 16px;
    line-height: 1.8;
    font-weight: 500;
}


/* Checklist */

.bf-commitment-v2-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
    margin-bottom: 27px;
}

.bf-commitment-v2-item {
    min-width: 0;
    min-height: 70px;
    padding: 13px 14px;
    display: flex;
    align-items: center;
    gap: 11px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(10px);
    transition:
        transform 0.3s ease,
        background 0.3s ease,
        border-color 0.3s ease;
}

.bf-commitment-v2-item:hover {
    border-color: rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.11);
    transform: translateY(-4px);
}

.bf-commitment-v2-check {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 10px;
    color: #ffffff;
    font-size: 12px;
}

.bf-check-pink {
    background:
        linear-gradient(
            135deg,
            var(--bf-pink),
            var(--bf-pink-dark)
        );
}

.bf-check-orange {
    background:
        linear-gradient(
            135deg,
            #ffb127,
            var(--bf-orange)
        );
}

.bf-check-purple {
    background:
        linear-gradient(
            135deg,
            #a249b6,
            var(--bf-purple)
        );
}

.bf-check-green {
    background:
        linear-gradient(
            135deg,
            #7bc441,
            var(--bf-green)
        );
}

.bf-commitment-v2-item p {
    margin: 0;
    color: rgba(255, 255, 255, 0.88);
    font-size: 14px;
    line-height: 1.5;
    font-weight: 650;
}


/* Bottom area */

.bf-commitment-v2-bottom {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 22px;
}

.bf-commitment-v2-btn {
    min-height: 53px;
    padding: 13px 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 13px;
    background:
        linear-gradient(
            135deg,
            var(--bf-pink),
            var(--bf-purple-light)
        );
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 800;
    box-shadow: 0 15px 33px rgba(237, 41, 109, 0.27);
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.bf-commitment-v2-btn:hover {
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 20px 40px rgba(237, 41, 109, 0.36);
}

.bf-commitment-v2-note {
    display: flex;
    align-items: center;
    gap: 11px;
}

.bf-commitment-v2-note > i {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(79, 159, 25, 0.16);
    color: #83cf4b;
    font-size: 18px;
}

.bf-commitment-v2-note strong {
    display: block;
    margin-bottom: 2px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 800;
}

.bf-commitment-v2-note span {
    display: block;
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
}


/* Image side */

.bf-commitment-v2-visual {
    position: relative;
    min-height: 500px;
}

.bf-commitment-v2-image {
    position: absolute;
    inset: 0 0 20px 35px;
    overflow: hidden;
    border-radius: 30px;
    box-shadow: 0 30px 70px rgba(5, 1, 9, 0.34);
}

.bf-commitment-v2-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            transparent 45%,
            rgba(34, 5, 45, 0.7) 100%
        );
}

.bf-commitment-v2-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    transition: transform 0.6s ease;
}

.bf-commitment-v2-image:hover img {
    transform: scale(1.06);
}

.bf-commitment-v2-floating-card {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 3;
    width: 235px;
    padding: 17px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 19px;
    background: rgba(237, 41, 109, 0.93);
    box-shadow: 0 20px 45px rgba(16, 2, 24, 0.27);
}

.bf-commitment-v2-floating-card > span {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.17);
    color: #ffffff;
    font-size: 19px;
}

.bf-commitment-v2-floating-card strong {
    display: block;
    margin-bottom: 3px;
    color: #ffffff;
    font-size: 15px;
    font-weight: 800;
}

.bf-commitment-v2-floating-card small {
    display: block;
    color: rgba(255, 255, 255, 0.75);
    font-size: 11px;
}

.bf-commitment-v2-badge {
    position: absolute;
    top: 22px;
    right: -12px;
    z-index: 3;
    padding: 11px 15px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 30px;
    background:
        linear-gradient(
            135deg,
            var(--bf-orange),
            #f06d00
        );
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
    box-shadow: 0 15px 32px rgba(255, 151, 0, 0.24);
}


/* Tablet */

@media (max-width: 1000px) {

    .bf-commitment-v2-inner {
        padding: 54px 0;
        gap: 42px;
    }

    .bf-commitment-v2-list {
        grid-template-columns: 1fr;
    }

    .bf-commitment-v2-visual {
        min-height: 450px;
    }
}


/* Small tablet */

@media (max-width: 850px) {

    .bf-commitment-v2-inner {
        grid-template-columns: 1fr;
    }

    .bf-commitment-v2-content {
        max-width: none;
    }

    .bf-commitment-v2-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bf-commitment-v2-visual {
        width: min(100%, 680px);
        min-height: 490px;
        margin: 0 auto;
    }
}


/* Mobile */

@media (max-width: 650px) {

    .bf-commitment-v2-inner {
        width: min(100% - 28px, 1280px);
        padding: 42px 0;
        gap: 35px;
    }

    .bf-commitment-v2-subtitle {
        font-size: 11px;
    }

    .bf-commitment-v2-content h2 {
        font-size: 33px;
        line-height: 1.2;
    }

    .bf-commitment-v2-intro {
        font-size: 15.5px;
        line-height: 1.75;
    }

    .bf-commitment-v2-list {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .bf-commitment-v2-item {
        min-height: auto;
        padding: 12px;
    }

    .bf-commitment-v2-bottom {
        flex-direction: column;
        align-items: stretch;
    }

    .bf-commitment-v2-btn {
        width: 100%;
    }

    .bf-commitment-v2-visual {
        min-height: auto;
    }

    .bf-commitment-v2-image {
        position: relative;
        inset: auto;
        width: 100%;
        height: 370px;
        border-radius: 23px;
    }

    .bf-commitment-v2-floating-card {
        position: relative;
        left: auto;
        bottom: auto;
        width: calc(100% - 30px);
        margin: -30px 0 0 15px;
    }

    .bf-commitment-v2-badge {
        top: 14px;
        right: 12px;
    }
}


/* Small mobile */

@media (max-width: 390px) {

    .bf-commitment-v2-inner {
        padding: 36px 0;
    }

    .bf-commitment-v2-content h2 {
        font-size: 29px;
    }

    .bf-commitment-v2-image {
        height: 330px;
    }

    .bf-commitment-v2-item p {
        font-size: 13.5px;
    }
}

/* =========================================
   OUR APPROACH SECTION
========================================= */

.bf-approach-section {
    --bf-purple: #4b156f;
    --bf-purple-dark: #250b3a;
    --bf-purple-light: #812e95;
    --bf-pink: #ed296d;
    --bf-pink-dark: #c81759;
    --bf-orange: #ff9700;
    --bf-green: #4f9f19;
    --bf-dark: #32143f;
    --bf-muted: #716779;

    position: relative;
    width: 100%;
    padding: 58px 0;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 6% 18%,
            rgba(237, 41, 109, 0.08),
            transparent 25%
        ),
        radial-gradient(
            circle at 94% 82%,
            rgba(79, 159, 25, 0.08),
            transparent 24%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fff9fc 100%
        );
    font-family: "Manrope", sans-serif;
}

.bf-approach-section::before {
    content: "";
    position: absolute;
    top: -120px;
    right: -110px;
    width: 310px;
    height: 310px;
    border: 48px solid rgba(129, 46, 149, 0.05);
    border-radius: 50%;
    pointer-events: none;
}

.bf-approach-container {
    position: relative;
    z-index: 2;
    width: min(100% - 40px, 1280px);
    margin: 0 auto;
}

.bf-approach-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    align-items: center;
    gap: 65px;
}


/* =========================================
   CONTENT SIDE
========================================= */

.bf-approach-content {
    max-width: 700px;
}

.bf-approach-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 14px;
    padding: 8px 15px;
    border: 1px solid rgba(237, 41, 109, 0.18);
    border-radius: 30px;
    background: rgba(237, 41, 109, 0.07);
    color: var(--bf-pink-dark);
    font-size: 13px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

.bf-approach-subtitle i {
    color: var(--bf-orange);
}

.bf-approach-content h2 {
    margin: 0 0 18px;
    color: var(--bf-dark);
    font-size: clamp(36px, 4vw, 52px);
    line-height: 1.16;
    font-weight: 800;
    letter-spacing: -1.3px;
}

.bf-approach-content h2 span {
    display: block;
    background:
        linear-gradient(
            90deg,
            var(--bf-pink),
            var(--bf-purple-light),
            var(--bf-green)
        );
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.bf-approach-content > p {
    margin: 0 0 23px;
    color: var(--bf-muted);
    font-size: 16px;
    line-height: 1.8;
    font-weight: 500;
}


/* =========================================
   COLLABORATION LIST
========================================= */

.bf-approach-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
    margin-bottom: 24px;
}

.bf-approach-item {
    min-width: 0;
    min-height: 70px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 11px;
    border: 1px solid rgba(75, 21, 111, 0.08);
    border-radius: 15px;
    background: #ffffff;
    box-shadow: 0 10px 25px rgba(55, 14, 72, 0.06);
    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.bf-approach-item:hover {
    border-color: rgba(237, 41, 109, 0.2);
    transform: translateY(-4px);
    box-shadow: 0 16px 32px rgba(55, 14, 72, 0.1);
}

.bf-approach-wide {
    grid-column: 1 / -1;
}

.bf-approach-icon {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 12px;
    color: #ffffff;
    font-size: 15px;
}

.bf-approach-pink {
    background:
        linear-gradient(
            135deg,
            var(--bf-pink),
            var(--bf-pink-dark)
        );
}

.bf-approach-purple {
    background:
        linear-gradient(
            135deg,
            var(--bf-purple-light),
            var(--bf-purple)
        );
}

.bf-approach-orange {
    background:
        linear-gradient(
            135deg,
            #ffb129,
            var(--bf-orange)
        );
}

.bf-approach-green {
    background:
        linear-gradient(
            135deg,
            #79c341,
            var(--bf-green)
        );
}

.bf-approach-item strong {
    color: var(--bf-dark);
    font-size: 14px;
    line-height: 1.45;
    font-weight: 800;
}


/* =========================================
   BOTTOM MESSAGE
========================================= */

.bf-approach-message {
    padding: 16px 18px;
    display: flex;
    align-items: flex-start;
    gap: 13px;
    border-left: 4px solid var(--bf-green);
    border-radius: 0 15px 15px 0;
    background:
        linear-gradient(
            90deg,
            rgba(79, 159, 25, 0.09),
            rgba(237, 41, 109, 0.04)
        );
}

.bf-approach-message > span {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(79, 159, 25, 0.12);
    color: var(--bf-green);
    font-size: 17px;
}

.bf-approach-message p {
    margin: 0;
    color: var(--bf-dark);
    font-size: 14.5px;
    line-height: 1.7;
    font-weight: 650;
}


/* =========================================
   VISUAL SIDE
========================================= */

.bf-approach-visual {
    position: relative;
    min-height: 520px;
}

.bf-approach-image {
    position: absolute;
    inset: 15px 20px 35px 35px;
    overflow: hidden;
    border-radius: 50% 50% 30px 30px;
    box-shadow: 0 30px 68px rgba(55, 14, 72, 0.18);
}

.bf-approach-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    transition: transform 0.6s ease;
}

.bf-approach-image:hover img {
    transform: scale(1.06);
}

.bf-approach-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            rgba(37, 8, 49, 0.03) 35%,
            rgba(37, 8, 49, 0.68) 100%
        );
}

.bf-approach-center-card {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 4;
    width: 265px;
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 20px;
    background:
        linear-gradient(
            135deg,
            var(--bf-pink),
            var(--bf-purple-light)
        );
    color: #ffffff;
    box-shadow: 0 21px 45px rgba(210, 32, 102, 0.27);
}

.bf-approach-center-card > span {
    width: 50px;
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.16);
    font-size: 20px;
}

.bf-approach-center-card strong {
    display: block;
    margin-bottom: 3px;
    font-size: 16px;
    line-height: 1.35;
    font-weight: 800;
}

.bf-approach-center-card small {
    display: block;
    color: rgba(255, 255, 255, 0.78);
    font-size: 11px;
    line-height: 1.45;
}

.bf-approach-floating {
    position: absolute;
    z-index: 4;
    padding: 11px 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 30px;
    color: #ffffff;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 800;
    box-shadow: 0 15px 30px rgba(31, 6, 42, 0.18);
}

.bf-approach-floating-one {
    top: 45px;
    right: 0;
    background:
        linear-gradient(
            135deg,
            var(--bf-orange),
            #ef6e00
        );
}

.bf-approach-floating-two {
    right: -5px;
    bottom: 90px;
    background:
        linear-gradient(
            135deg,
            #77c13e,
            var(--bf-green)
        );
}

.bf-approach-shape {
    position: absolute;
    display: block;
    border-radius: 50%;
    pointer-events: none;
}

.bf-approach-shape-one {
    top: -15px;
    left: 5%;
    width: 95px;
    height: 95px;
    border: 17px solid rgba(237, 41, 109, 0.12);
}

.bf-approach-shape-two {
    right: 6%;
    bottom: 10px;
    width: 68px;
    height: 68px;
    background: rgba(255, 151, 0, 0.12);
}


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

@media (max-width: 1050px) {

    .bf-approach-section {
        padding: 52px 0;
    }

    .bf-approach-grid {
        gap: 45px;
    }

    .bf-approach-list {
        grid-template-columns: 1fr;
    }

    .bf-approach-wide {
        grid-column: auto;
    }

    .bf-approach-visual {
        min-height: 470px;
    }
}


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

@media (max-width: 850px) {

    .bf-approach-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .bf-approach-content {
        max-width: 760px;
    }

    .bf-approach-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bf-approach-wide {
        grid-column: 1 / -1;
    }

    .bf-approach-visual {
        width: min(100%, 680px);
        min-height: 500px;
        margin: 0 auto;
    }
}


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

@media (max-width: 650px) {

    .bf-approach-section {
        padding: 42px 0;
    }

    .bf-approach-container {
        width: min(100% - 28px, 1280px);
    }

    .bf-approach-grid {
        gap: 36px;
    }

    .bf-approach-subtitle {
        font-size: 11px;
        letter-spacing: 0.4px;
    }

    .bf-approach-content h2 {
        font-size: 33px;
        line-height: 1.2;
        letter-spacing: -0.7px;
    }

    .bf-approach-content > p {
        font-size: 15.5px;
        line-height: 1.75;
    }

    .bf-approach-list {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .bf-approach-wide {
        grid-column: auto;
    }

    .bf-approach-item {
        min-height: auto;
        padding: 12px;
    }

    .bf-approach-visual {
        min-height: auto;
    }

    .bf-approach-image {
        position: relative;
        inset: auto;
        width: 100%;
        height: 380px;
        border-radius: 24px;
    }

    .bf-approach-center-card {
        position: relative;
        left: auto;
        bottom: auto;
        width: calc(100% - 30px);
        margin: -30px auto 0;
    }

    .bf-approach-floating-one {
        top: 14px;
        right: 12px;
    }

    .bf-approach-floating-two {
        right: 12px;
        bottom: 105px;
    }

    .bf-approach-shape {
        display: none;
    }
}


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

@media (max-width: 390px) {

    .bf-approach-section {
        padding: 36px 0;
    }

    .bf-approach-content h2 {
        font-size: 29px;
    }

    .bf-approach-image {
        height: 335px;
    }

    .bf-approach-item strong {
        font-size: 13.5px;
    }

    .bf-approach-floating {
        font-size: 10px;
    }
}

/* =========================================
   BUILDING A BETTER FUTURE SECTION
========================================= */

.bf-future-section {
    --bf-purple: #4b156f;
    --bf-purple-dark: #240a38;
    --bf-purple-light: #812e95;
    --bf-pink: #ed296d;
    --bf-pink-dark: #c81759;
    --bf-orange: #ff9700;
    --bf-green: #4f9f19;
    --bf-dark: #32143f;
    --bf-muted: #716779;

    position: relative;
    width: 100%;
    padding: 58px 0;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 7% 20%,
            rgba(237, 41, 109, 0.09),
            transparent 24%
        ),
        radial-gradient(
            circle at 94% 80%,
            rgba(79, 159, 25, 0.08),
            transparent 24%
        ),
        linear-gradient(
            135deg,
            #fff9fc 0%,
            #ffffff 52%,
            #fbfff8 100%
        );
    font-family: "Manrope", sans-serif;
}

.bf-future-section::before {
    content: "";
    position: absolute;
    top: -120px;
    right: -110px;
    width: 310px;
    height: 310px;
    border: 48px solid rgba(129, 46, 149, 0.05);
    border-radius: 50%;
    pointer-events: none;
}

.bf-future-section::after {
    content: "";
    position: absolute;
    left: -95px;
    bottom: -125px;
    width: 275px;
    height: 275px;
    border: 42px solid rgba(255, 151, 0, 0.05);
    border-radius: 50%;
    pointer-events: none;
}

.bf-future-container {
    position: relative;
    z-index: 2;
    width: min(100% - 40px, 1280px);
    margin: 0 auto;
}

.bf-future-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.25fr);
    align-items: center;
    gap: 60px;
}


/* =========================================
   LEFT CONTENT
========================================= */

.bf-future-content {
    max-width: 540px;
}

.bf-future-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 14px;
    padding: 8px 15px;
    border: 1px solid rgba(237, 41, 109, 0.18);
    border-radius: 30px;
    background: rgba(237, 41, 109, 0.07);
    color: var(--bf-pink-dark);
    font-size: 13px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

.bf-future-subtitle i {
    color: var(--bf-orange);
}

.bf-future-content h2 {
    margin: 0 0 18px;
    color: var(--bf-dark);
    font-size: clamp(36px, 4vw, 52px);
    line-height: 1.16;
    font-weight: 800;
    letter-spacing: -1.3px;
}

.bf-future-content h2 span {
    display: block;
    background:
        linear-gradient(
            90deg,
            var(--bf-pink),
            var(--bf-purple-light),
            var(--bf-green)
        );
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.bf-future-content p {
    margin: 0 0 15px;
    color: var(--bf-muted);
    font-size: 16px;
    line-height: 1.8;
    font-weight: 500;
}

.bf-future-content p:last-of-type {
    margin-bottom: 24px;
}

.bf-future-btn {
    min-height: 53px;
    padding: 13px 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 13px;
    background:
        linear-gradient(
            135deg,
            var(--bf-pink),
            var(--bf-purple-light)
        );
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 800;
    box-shadow: 0 14px 31px rgba(210, 32, 102, 0.23);
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.bf-future-btn:hover {
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 19px 38px rgba(210, 32, 102, 0.31);
}

.bf-future-btn i {
    transition: transform 0.3s ease;
}

.bf-future-btn:hover i {
    transform: translateX(4px);
}


/* =========================================
   RIGHT LIST
========================================= */

.bf-future-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
}

.bf-future-item {
    position: relative;
    min-width: 0;
    min-height: 126px;
    padding: 17px;
    display: flex;
    align-items: center;
    gap: 14px;
    overflow: hidden;
    border: 1px solid rgba(75, 21, 111, 0.08);
    border-radius: 19px;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(55, 14, 72, 0.07);
    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.bf-future-item::after {
    content: "";
    position: absolute;
    top: -45px;
    right: -45px;
    width: 105px;
    height: 105px;
    border-radius: 50%;
    background: rgba(75, 21, 111, 0.035);
    pointer-events: none;
}

.bf-future-item:hover {
    border-color: rgba(237, 41, 109, 0.2);
    transform: translateY(-5px);
    box-shadow: 0 18px 38px rgba(55, 14, 72, 0.11);
}

.bf-future-wide {
    grid-column: 1 / -1;
}

.bf-future-icon {
    position: relative;
    z-index: 2;
    width: 54px;
    height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 16px;
    color: #ffffff;
    font-size: 20px;
    box-shadow: 0 12px 25px rgba(41, 8, 54, 0.15);
}

.bf-future-pink .bf-future-icon {
    background:
        linear-gradient(
            135deg,
            var(--bf-pink),
            var(--bf-pink-dark)
        );
}

.bf-future-orange .bf-future-icon {
    background:
        linear-gradient(
            135deg,
            #ffb128,
            var(--bf-orange)
        );
}

.bf-future-green .bf-future-icon {
    background:
        linear-gradient(
            135deg,
            #79c341,
            var(--bf-green)
        );
}

.bf-future-purple .bf-future-icon {
    background:
        linear-gradient(
            135deg,
            var(--bf-purple-light),
            var(--bf-purple)
        );
}

.bf-future-wide .bf-future-icon {
    background:
        linear-gradient(
            135deg,
            var(--bf-green),
            var(--bf-purple-light)
        );
}

.bf-future-item div {
    position: relative;
    z-index: 2;
    min-width: 0;
}

.bf-future-item strong {
    display: block;
    margin-bottom: 4px;
    color: var(--bf-dark);
    font-size: 15px;
    line-height: 1.4;
    font-weight: 800;
}

.bf-future-item small {
    display: block;
    color: var(--bf-muted);
    font-size: 12.5px;
    line-height: 1.5;
    font-weight: 500;
}


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

@media (max-width: 1000px) {

    .bf-future-section {
        padding: 52px 0;
    }

    .bf-future-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .bf-future-content {
        max-width: 760px;
    }
}


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

@media (max-width: 650px) {

    .bf-future-section {
        padding: 42px 0;
    }

    .bf-future-container {
        width: min(100% - 28px, 1280px);
    }

    .bf-future-grid {
        gap: 28px;
    }

    .bf-future-subtitle {
        font-size: 11px;
        letter-spacing: 0.4px;
    }

    .bf-future-content h2 {
        font-size: 33px;
        line-height: 1.2;
        letter-spacing: -0.7px;
    }

    .bf-future-content p {
        font-size: 15.5px;
        line-height: 1.75;
    }

    .bf-future-btn {
        width: 100%;
    }

    .bf-future-list {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .bf-future-wide {
        grid-column: auto;
    }

    .bf-future-item {
        min-height: auto;
        padding: 15px;
    }

    .bf-future-icon {
        width: 49px;
        height: 49px;
        border-radius: 14px;
        font-size: 18px;
    }

    .bf-future-item strong {
        font-size: 14.5px;
    }

    .bf-future-item small {
        font-size: 12px;
    }
}


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

@media (max-width: 390px) {

    .bf-future-section {
        padding: 36px 0;
    }

    .bf-future-content h2 {
        font-size: 29px;
    }

    .bf-future-content p {
        font-size: 15px;
    }

    .bf-future-item {
        align-items: flex-start;
    }
}

/* =========================================
   OUR CORE VALUES SECTION
========================================= */

.bf-values-section {
    --bf-purple: #4b156f;
    --bf-purple-dark: #250b3a;
    --bf-purple-light: #812e95;
    --bf-pink: #ed296d;
    --bf-pink-dark: #c81759;
    --bf-orange: #ff9700;
    --bf-green: #4f9f19;
    --bf-dark: #32143f;
    --bf-muted: #716779;

    position: relative;
    width: 100%;
    padding: 58px 0;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 6% 18%,
            rgba(237, 41, 109, 0.08),
            transparent 25%
        ),
        radial-gradient(
            circle at 94% 82%,
            rgba(79, 159, 25, 0.08),
            transparent 25%
        ),
        linear-gradient(
            180deg,
            #fffafd 0%,
            #ffffff 100%
        );
    font-family: "Manrope", sans-serif;
}

.bf-values-section::before {
    content: "";
    position: absolute;
    top: -125px;
    right: -110px;
    width: 320px;
    height: 320px;
    border: 50px solid rgba(129, 46, 149, 0.05);
    border-radius: 50%;
    pointer-events: none;
}

.bf-values-section::after {
    content: "";
    position: absolute;
    left: -100px;
    bottom: -125px;
    width: 280px;
    height: 280px;
    border: 44px solid rgba(255, 151, 0, 0.05);
    border-radius: 50%;
    pointer-events: none;
}

.bf-values-container {
    position: relative;
    z-index: 2;
    width: min(100% - 40px, 1280px);
    margin: 0 auto;
}


/* =========================================
   HEADING
========================================= */

.bf-values-heading {
    max-width: 780px;
    margin: 0 auto 30px;
    text-align: center;
}

.bf-values-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 13px;
    padding: 8px 15px;
    border: 1px solid rgba(237, 41, 109, 0.18);
    border-radius: 30px;
    background: rgba(237, 41, 109, 0.07);
    color: var(--bf-pink-dark);
    font-size: 13px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.bf-values-subtitle i {
    color: var(--bf-orange);
}

.bf-values-heading h2 {
    margin: 0 0 12px;
    color: var(--bf-dark);
    font-size: clamp(36px, 4vw, 52px);
    line-height: 1.16;
    font-weight: 800;
    letter-spacing: -1.3px;
}

.bf-values-heading h2 span {
    display: block;
    background:
        linear-gradient(
            90deg,
            var(--bf-pink),
            var(--bf-purple-light),
            var(--bf-green)
        );
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.bf-values-heading p {
    max-width: 680px;
    margin: 0 auto;
    color: var(--bf-muted);
    font-size: 15.5px;
    line-height: 1.7;
    font-weight: 500;
}


/* =========================================
   VALUES GRID
========================================= */

.bf-values-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 28px;
}

.bf-value-card {
    position: relative;
    min-width: 0;
    min-height: 225px;
    padding: 22px;
    overflow: hidden;
    border: 1px solid rgba(75, 21, 111, 0.09);
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 15px 36px rgba(55, 14, 72, 0.08);
    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

.bf-value-card::before {
    content: "";
    position: absolute;
    top: -60px;
    right: -55px;
    width: 135px;
    height: 135px;
    border-radius: 50%;
    background: rgba(75, 21, 111, 0.04);
    pointer-events: none;
}

.bf-value-card:hover {
    border-color: rgba(237, 41, 109, 0.22);
    transform: translateY(-7px);
    box-shadow: 0 23px 48px rgba(55, 14, 72, 0.13);
}

.bf-value-wide {
    grid-column: span 4;
    min-height: 165px;
    display: flex;
    align-items: center;
    gap: 18px;
}


/* =========================================
   VALUE ICON
========================================= */

.bf-value-icon {
    position: relative;
    z-index: 2;
    width: 58px;
    height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    border-radius: 17px;
    color: #ffffff;
    font-size: 21px;
    box-shadow: 0 12px 27px rgba(40, 8, 52, 0.16);
}

.bf-value-pink .bf-value-icon {
    background:
        linear-gradient(
            135deg,
            var(--bf-pink),
            var(--bf-pink-dark)
        );
}

.bf-value-purple .bf-value-icon {
    background:
        linear-gradient(
            135deg,
            var(--bf-purple-light),
            var(--bf-purple)
        );
}

.bf-value-orange .bf-value-icon {
    background:
        linear-gradient(
            135deg,
            #ffb22c,
            var(--bf-orange)
        );
}

.bf-value-green .bf-value-icon {
    background:
        linear-gradient(
            135deg,
            #7bc442,
            var(--bf-green)
        );
}

.bf-value-wide .bf-value-icon {
    flex-shrink: 0;
    margin-bottom: 0;
    background:
        linear-gradient(
            135deg,
            var(--bf-green),
            var(--bf-purple-light)
        );
}


/* =========================================
   VALUE CONTENT
========================================= */

.bf-value-content {
    position: relative;
    z-index: 2;
}

.bf-value-content h3 {
    margin: 0 0 10px;
    color: var(--bf-dark);
    font-size: 21px;
    line-height: 1.35;
    font-weight: 800;
}

.bf-value-content p {
    margin: 0;
    color: var(--bf-muted);
    font-size: 14.5px;
    line-height: 1.65;
    font-weight: 500;
}

.bf-value-number {
    position: absolute;
    top: 20px;
    right: 20px;
    color: rgba(75, 21, 111, 0.16);
    font-size: 29px;
    line-height: 1;
    font-weight: 800;
}


/* =========================================
   BOTTOM CTA
========================================= */

.bf-values-cta {
    position: relative;
    padding: 26px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    overflow: hidden;
    border-radius: 24px;
    background:
        linear-gradient(
            120deg,
            var(--bf-pink) 0%,
            var(--bf-purple-light) 55%,
            var(--bf-purple) 100%
        );
    box-shadow: 0 22px 50px rgba(55, 14, 72, 0.18);
}

.bf-values-cta::before {
    content: "";
    position: absolute;
    top: -90px;
    right: 18%;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
}

.bf-values-cta-content,
.bf-values-actions {
    position: relative;
    z-index: 2;
}

.bf-values-cta-content {
    max-width: 760px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.bf-values-cta-icon {
    width: 62px;
    height: 62px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.13);
    color: #ffffff;
    font-size: 24px;
}

.bf-values-cta-content h3 {
    margin: 0 0 6px;
    color: #ffffff;
    font-size: 24px;
    line-height: 1.35;
    font-weight: 800;
}

.bf-values-cta-content p {
    margin: 0;
    color: rgba(255, 255, 255, 0.84);
    font-size: 14.5px;
    line-height: 1.65;
    font-weight: 500;
}

.bf-values-actions {
    display: flex;
    align-items: center;
    gap: 11px;
    flex-shrink: 0;
}

.bf-values-btn {
    min-height: 52px;
    padding: 13px 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 1px solid transparent;
    border-radius: 13px;
    text-decoration: none;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 800;
    white-space: nowrap;
    transition:
        transform 0.3s ease,
        background 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease;
}

.bf-values-btn-primary {
    background: #ffffff;
    color: var(--bf-purple);
}

.bf-values-btn-primary:hover {
    background: var(--bf-orange);
    color: #ffffff;
    transform: translateY(-3px);
}

.bf-values-btn-outline {
    border-color: rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.bf-values-btn-outline:hover {
    border-color: #ffffff;
    background: #ffffff;
    color: var(--bf-purple);
    transform: translateY(-3px);
}


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

@media (max-width: 1050px) {

    .bf-values-section {
        padding: 50px 0;
    }

    .bf-values-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bf-value-wide {
        grid-column: span 2;
    }

    .bf-values-cta {
        align-items: flex-start;
    }

    .bf-values-actions {
        flex-direction: column;
        align-items: stretch;
    }
}


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

@media (max-width: 650px) {

    .bf-values-section {
        padding: 42px 0;
    }

    .bf-values-container {
        width: min(100% - 28px, 1280px);
    }

    .bf-values-heading {
        margin-bottom: 24px;
    }

    .bf-values-subtitle {
        font-size: 11px;
        letter-spacing: 0.4px;
    }

    .bf-values-heading h2 {
        font-size: 33px;
        line-height: 1.2;
        letter-spacing: -0.7px;
    }

    .bf-values-heading p {
        font-size: 15px;
    }

    .bf-values-grid {
        grid-template-columns: 1fr;
        gap: 11px;
    }

    .bf-value-card,
    .bf-value-wide {
        grid-column: auto;
        min-height: auto;
        padding: 20px;
        display: block;
    }

    .bf-value-wide .bf-value-icon {
        margin-bottom: 16px;
    }

    .bf-values-cta {
        padding: 23px 20px;
        flex-direction: column;
        align-items: stretch;
        gap: 22px;
    }

    .bf-values-cta-content {
        align-items: flex-start;
    }

    .bf-values-cta-content h3 {
        font-size: 21px;
    }

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

    .bf-values-btn {
        width: 100%;
    }
}


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

@media (max-width: 390px) {

    .bf-values-section {
        padding: 36px 0;
    }

    .bf-values-heading h2 {
        font-size: 29px;
    }

    .bf-value-content h3 {
        font-size: 19px;
    }

    .bf-values-cta-content {
        flex-direction: column;
    }

    .bf-values-cta-content h3 {
        font-size: 20px;
    }
}
/* About Banner */
.bf-about-banner{
    background-image:
    linear-gradient(rgba(33,12,54,.72),rgba(33,12,54,.72)),
    url("images/about-banner.jpg");
}

/* Vision Banner */
.bf-vision-banner{
    background-image:
    linear-gradient(rgba(33,12,54,.72),rgba(33,12,54,.72)),
    url("images/vision-banner.jpg");
}

/* Gallery Banner */
.bf-gallery-banner{
    background-image:
    linear-gradient(rgba(33,12,54,.72),rgba(33,12,54,.72)),
    url("images/gallery-banner.jpg");
}

/* Contact Banner */
.bf-contact-banner{
    background-image:
    linear-gradient(rgba(33,12,54,.72),rgba(33,12,54,.72)),
    url("images/contact-banner.jpg");
}

/* Volunteer Banner */
.bf-volunteer-banner{
    background-image:
    linear-gradient(rgba(33,12,54,.72),rgba(33,12,54,.72)),
    url("images/volunteer-banner.jpg");
}

.bf-about-banner,
.bf-vision-banner,
.bf-gallery-banner,
.bf-contact-banner,
.bf-volunteer-banner{

    position:relative;
    width:100%;
    height:520px;

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

    overflow:hidden;

    background-size:cover;
    background-position:center;
    background-attachment:fixed;

}

/* =========================================
   OUR VISION - PREMIUM DESIGN V2
========================================= */

.bf-vision-v2 {
    --bf-purple: #4b156f;
    --bf-purple-dark: #21082f;
    --bf-purple-light: #812e95;
    --bf-pink: #ed296d;
    --bf-pink-dark: #c81759;
    --bf-orange: #ff9700;
    --bf-green: #4f9f19;

    position: relative;
    width: 100%;
    padding: 60px 0;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 8% 18%,
            rgba(237, 41, 109, 0.17),
            transparent 28%
        ),
        radial-gradient(
            circle at 92% 82%,
            rgba(79, 159, 25, 0.13),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #21082f 0%,
            #3c1050 52%,
            #250b36 100%
        );
    font-family: "Manrope", sans-serif;
}

.bf-vision-v2::before {
    content: "";
    position: absolute;
    top: -135px;
    right: -115px;
    width: 330px;
    height: 330px;
    border: 52px solid rgba(255, 255, 255, 0.03);
    border-radius: 50%;
    pointer-events: none;
}

.bf-vision-v2-container {
    position: relative;
    z-index: 2;
    width: min(100% - 40px, 1280px);
    margin: 0 auto;
}

.bf-vision-v2-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
    align-items: center;
    gap: 64px;
}


/* =========================================
   IMAGE SIDE
========================================= */

.bf-vision-v2-visual {
    position: relative;
    min-height: 560px;
}

.bf-vision-v2-image {
    position: absolute;
    inset: 10px 20px 40px 35px;
    overflow: hidden;
    border-radius: 32px;
    box-shadow: 0 30px 70px rgba(7, 1, 12, 0.36);
}

.bf-vision-v2-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    transition: transform 0.65s ease;
}

.bf-vision-v2-image:hover img {
    transform: scale(1.06);
}

.bf-vision-v2-image-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            rgba(32, 5, 43, 0.06) 35%,
            rgba(32, 5, 43, 0.78) 100%
        );
}

.bf-vision-v2-image-content {
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 22px;
    padding: 15px 17px;
    display: flex;
    align-items: center;
    gap: 13px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 17px;
    background: rgba(34, 7, 46, 0.72);
    backdrop-filter: blur(12px);
}

.bf-vision-v2-image-content > span {
    width: 50px;
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 15px;
    background:
        linear-gradient(
            135deg,
            var(--bf-pink),
            var(--bf-purple-light)
        );
    color: #ffffff;
    font-size: 19px;
}

.bf-vision-v2-image-content strong {
    display: block;
    margin-bottom: 3px;
    color: #ffffff;
    font-size: 16px;
    line-height: 1.35;
    font-weight: 800;
}

.bf-vision-v2-image-content small {
    display: block;
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    line-height: 1.45;
}

.bf-vision-v2-floating-card {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 4;
    width: 255px;
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 13px;
    border-radius: 20px;
    background:
        linear-gradient(
            135deg,
            var(--bf-green),
            #77be39
        );
    color: #ffffff;
    box-shadow: 0 21px 45px rgba(6, 2, 10, 0.28);
}

.bf-vision-v2-floating-card > i {
    font-size: 27px;
    flex-shrink: 0;
}

.bf-vision-v2-floating-card strong {
    display: block;
    margin-bottom: 3px;
    color: #ffffff;
    font-size: 15px;
    font-weight: 800;
}

.bf-vision-v2-floating-card span {
    display: block;
    color: rgba(255, 255, 255, 0.78);
    font-size: 11px;
    line-height: 1.45;
}

.bf-vision-v2-shape {
    position: absolute;
    display: block;
    border-radius: 50%;
    pointer-events: none;
}

.bf-vision-v2-shape-one {
    top: -10px;
    right: 2%;
    width: 92px;
    height: 92px;
    border: 17px solid rgba(237, 41, 109, 0.18);
}

.bf-vision-v2-shape-two {
    right: -5px;
    bottom: 90px;
    width: 65px;
    height: 65px;
    background: rgba(255, 151, 0, 0.16);
}


/* =========================================
   CONTENT SIDE
========================================= */

.bf-vision-v2-content {
    max-width: 720px;
}

.bf-vision-v2-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 14px;
    padding: 8px 15px;
    border: 1px solid rgba(255, 255, 255, 0.17);
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.08);
    color: #ff8caf;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    backdrop-filter: blur(9px);
}

.bf-vision-v2-subtitle i {
    color: var(--bf-orange);
}

.bf-vision-v2-content h2 {
    margin: 0 0 18px;
    color: #ffffff;
    font-size: clamp(38px, 4vw, 55px);
    line-height: 1.14;
    font-weight: 800;
    letter-spacing: -1.4px;
}

.bf-vision-v2-content h2 span {
    display: block;
    background:
        linear-gradient(
            90deg,
            #ff4f88 0%,
            #ffad24 52%,
            #7bc644 100%
        );
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.bf-vision-v2-intro {
    margin: 0 0 23px;
    color: rgba(255, 255, 255, 0.77);
    font-size: 16px;
    line-height: 1.8;
    font-weight: 500;
}


/* =========================================
   SMALL HEADING
========================================= */

.bf-vision-v2-heading-small {
    margin-bottom: 17px;
}

.bf-vision-v2-heading-small span {
    display: block;
    margin-bottom: 5px;
    color: #ff8caf;
    font-size: 12px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.bf-vision-v2-heading-small h3 {
    margin: 0;
    color: #ffffff;
    font-size: 24px;
    line-height: 1.35;
    font-weight: 800;
}


/* =========================================
   VISION LIST
========================================= */

.bf-vision-v2-list {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
}

.bf-vision-v2-item {
    min-width: 0;
    min-height: 82px;
    padding: 13px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(10px);
    transition:
        transform 0.3s ease,
        background 0.3s ease,
        border-color 0.3s ease;
}

.bf-vision-v2-item:hover {
    border-color: rgba(255, 255, 255, 0.24);
    background: rgba(255, 255, 255, 0.11);
    transform: translateY(-4px);
}

.bf-vision-v2-marker {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 13px;
    color: #ffffff;
    font-size: 16px;
}

.bf-marker-pink {
    background:
        linear-gradient(
            135deg,
            var(--bf-pink),
            var(--bf-pink-dark)
        );
}

.bf-marker-orange {
    background:
        linear-gradient(
            135deg,
            #ffb028,
            var(--bf-orange)
        );
}

.bf-marker-green {
    background:
        linear-gradient(
            135deg,
            #7bc441,
            var(--bf-green)
        );
}

.bf-marker-purple {
    background:
        linear-gradient(
            135deg,
            #a44bb8,
            var(--bf-purple)
        );
}

.bf-vision-v2-item strong {
    display: block;
    color: rgba(255, 255, 255, 0.9);
    font-size: 13.5px;
    line-height: 1.55;
    font-weight: 700;
}


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

@media (max-width: 1050px) {

    .bf-vision-v2 {
        padding: 52px 0;
    }

    .bf-vision-v2-grid {
        gap: 44px;
    }

    .bf-vision-v2-visual {
        min-height: 510px;
    }

    .bf-vision-v2-list {
        grid-template-columns: 1fr;
    }
}


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

@media (max-width: 850px) {

    .bf-vision-v2-grid {
        grid-template-columns: 1fr;
        gap: 46px;
    }

    .bf-vision-v2-content {
        max-width: none;
    }

    .bf-vision-v2-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bf-vision-v2-visual {
        width: min(100%, 680px);
        min-height: 520px;
        margin: 0 auto;
    }
}


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

@media (max-width: 650px) {

    .bf-vision-v2 {
        padding: 42px 0;
    }

    .bf-vision-v2-container {
        width: min(100% - 28px, 1280px);
    }

    .bf-vision-v2-grid {
        gap: 36px;
    }

    .bf-vision-v2-content {
        order: 1;
    }

    .bf-vision-v2-visual {
        order: 2;
        min-height: auto;
    }

    .bf-vision-v2-subtitle {
        font-size: 11px;
        letter-spacing: 0.4px;
    }

    .bf-vision-v2-content h2 {
        font-size: 33px;
        line-height: 1.2;
        letter-spacing: -0.7px;
    }

    .bf-vision-v2-intro {
        font-size: 15.5px;
        line-height: 1.75;
    }

    .bf-vision-v2-heading-small h3 {
        font-size: 21px;
    }

    .bf-vision-v2-list {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .bf-vision-v2-item {
        min-height: auto;
        padding: 12px;
    }

    .bf-vision-v2-image {
        position: relative;
        inset: auto;
        width: 100%;
        height: 380px;
        border-radius: 24px;
    }

    .bf-vision-v2-floating-card {
        position: relative;
        left: auto;
        bottom: auto;
        width: calc(100% - 30px);
        margin: -30px auto 0;
    }

    .bf-vision-v2-shape {
        display: none;
    }
}


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

@media (max-width: 390px) {

    .bf-vision-v2 {
        padding: 36px 0;
    }

    .bf-vision-v2-content h2 {
        font-size: 29px;
    }

    .bf-vision-v2-image {
        height: 335px;
    }

    .bf-vision-v2-item strong {
        font-size: 13px;
    }
}

/* =========================================
   OUR MISSION PREMIUM SECTION
========================================= */

.bf-mission-section {
    --bf-purple: #4b156f;
    --bf-purple-dark: #250b3a;
    --bf-purple-light: #812e95;
    --bf-pink: #ed296d;
    --bf-pink-dark: #c81759;
    --bf-orange: #ff9700;
    --bf-green: #4f9f19;
    --bf-dark: #32143f;
    --bf-muted: #706776;

    position: relative;
    width: 100%;
    padding: 58px 0;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 6% 18%,
            rgba(237, 41, 109, 0.08),
            transparent 25%
        ),
        radial-gradient(
            circle at 94% 82%,
            rgba(79, 159, 25, 0.08),
            transparent 24%
        ),
        linear-gradient(
            135deg,
            #fff9fc 0%,
            #ffffff 52%,
            #fbfff8 100%
        );
    font-family: "Manrope", sans-serif;
}

.bf-mission-section::before {
    content: "";
    position: absolute;
    top: -120px;
    right: -110px;
    width: 310px;
    height: 310px;
    border: 48px solid rgba(129, 46, 149, 0.05);
    border-radius: 50%;
    pointer-events: none;
}

.bf-mission-section::after {
    content: "";
    position: absolute;
    left: -100px;
    bottom: -130px;
    width: 280px;
    height: 280px;
    border: 44px solid rgba(255, 151, 0, 0.05);
    border-radius: 50%;
    pointer-events: none;
}

.bf-mission-container {
    position: relative;
    z-index: 2;
    width: min(100% - 40px, 1280px);
    margin: 0 auto;
}

.bf-mission-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.35fr);
    align-items: center;
    gap: 55px;
}


/* =========================================
   LEFT CONTENT
========================================= */

.bf-mission-content {
    max-width: 540px;
}

.bf-mission-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 14px;
    padding: 8px 15px;
    border: 1px solid rgba(237, 41, 109, 0.18);
    border-radius: 30px;
    background: rgba(237, 41, 109, 0.07);
    color: var(--bf-pink-dark);
    font-size: 13px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

.bf-mission-subtitle i {
    color: var(--bf-orange);
}

.bf-mission-content h2 {
    margin: 0 0 18px;
    color: var(--bf-dark);
    font-size: clamp(36px, 4vw, 52px);
    line-height: 1.16;
    font-weight: 800;
    letter-spacing: -1.3px;
}

.bf-mission-content h2 span {
    display: block;
    background:
        linear-gradient(
            90deg,
            var(--bf-pink),
            var(--bf-purple-light),
            var(--bf-green)
        );
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.bf-mission-intro {
    margin: 0 0 22px;
    color: var(--bf-muted);
    font-size: 16px;
    line-height: 1.8;
    font-weight: 500;
}


/* =========================================
   COMMITMENT HIGHLIGHT
========================================= */

.bf-mission-highlight {
    margin-bottom: 24px;
    padding: 17px;
    display: flex;
    align-items: flex-start;
    gap: 13px;
    border-left: 4px solid var(--bf-green);
    border-radius: 0 17px 17px 0;
    background:
        linear-gradient(
            90deg,
            rgba(79, 159, 25, 0.1),
            rgba(237, 41, 109, 0.04)
        );
}

.bf-mission-highlight-icon {
    width: 45px;
    height: 45px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 14px;
    background:
        linear-gradient(
            135deg,
            var(--bf-green),
            #79c341
        );
    color: #ffffff;
    font-size: 17px;
}

.bf-mission-highlight strong {
    display: block;
    margin-bottom: 4px;
    color: var(--bf-dark);
    font-size: 16px;
    line-height: 1.4;
    font-weight: 800;
}

.bf-mission-highlight p {
    margin: 0;
    color: var(--bf-muted);
    font-size: 13.5px;
    line-height: 1.65;
    font-weight: 500;
}


/* =========================================
   BUTTON
========================================= */

.bf-mission-btn {
    min-height: 53px;
    padding: 13px 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 13px;
    background:
        linear-gradient(
            135deg,
            var(--bf-pink),
            var(--bf-purple-light)
        );
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 800;
    box-shadow: 0 14px 31px rgba(210, 32, 102, 0.23);
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.bf-mission-btn:hover {
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 19px 38px rgba(210, 32, 102, 0.31);
}

.bf-mission-btn i {
    transition: transform 0.3s ease;
}

.bf-mission-btn:hover i {
    transform: translateX(4px);
}


/* =========================================
   MISSION POINTS GRID
========================================= */

.bf-mission-points {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
}

.bf-mission-card {
    position: relative;
    min-width: 0;
    min-height: 145px;
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    overflow: hidden;
    border: 1px solid rgba(75, 21, 111, 0.08);
    border-radius: 19px;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(55, 14, 72, 0.07);
    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.bf-mission-card::after {
    content: "";
    position: absolute;
    top: -45px;
    right: -45px;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: rgba(75, 21, 111, 0.035);
}

.bf-mission-card:hover {
    border-color: rgba(237, 41, 109, 0.2);
    transform: translateY(-5px);
    box-shadow: 0 19px 39px rgba(55, 14, 72, 0.11);
}

.bf-mission-card-icon {
    position: relative;
    z-index: 2;
    width: 53px;
    height: 53px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 16px;
    color: #ffffff;
    font-size: 19px;
    box-shadow: 0 11px 24px rgba(41, 8, 54, 0.15);
}

.bf-mission-pink .bf-mission-card-icon {
    background:
        linear-gradient(
            135deg,
            var(--bf-pink),
            var(--bf-pink-dark)
        );
}

.bf-mission-orange .bf-mission-card-icon {
    background:
        linear-gradient(
            135deg,
            #ffb12b,
            var(--bf-orange)
        );
}

.bf-mission-purple .bf-mission-card-icon {
    background:
        linear-gradient(
            135deg,
            var(--bf-purple-light),
            var(--bf-purple)
        );
}

.bf-mission-green .bf-mission-card-icon {
    background:
        linear-gradient(
            135deg,
            #7bc442,
            var(--bf-green)
        );
}

.bf-mission-card div {
    position: relative;
    z-index: 2;
    min-width: 0;
}

.bf-mission-card h3 {
    margin: 0 0 5px;
    color: var(--bf-dark);
    font-size: 16px;
    line-height: 1.4;
    font-weight: 800;
}

.bf-mission-card p {
    margin: 0;
    color: var(--bf-muted);
    font-size: 13px;
    line-height: 1.55;
    font-weight: 500;
}

.bf-mission-number {
    position: absolute;
    top: 15px;
    right: 16px;
    color: rgba(75, 21, 111, 0.13);
    font-size: 24px;
    line-height: 1;
    font-weight: 800;
}


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

@media (max-width: 1050px) {

    .bf-mission-section {
        padding: 52px 0;
    }

    .bf-mission-grid {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .bf-mission-content {
        max-width: 760px;
    }
}


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

@media (max-width: 650px) {

    .bf-mission-section {
        padding: 42px 0;
    }

    .bf-mission-container {
        width: min(100% - 28px, 1280px);
    }

    .bf-mission-grid {
        gap: 28px;
    }

    .bf-mission-subtitle {
        font-size: 11px;
        letter-spacing: 0.4px;
    }

    .bf-mission-content h2 {
        font-size: 33px;
        line-height: 1.2;
        letter-spacing: -0.7px;
    }

    .bf-mission-intro {
        font-size: 15.5px;
        line-height: 1.75;
    }

    .bf-mission-btn {
        width: 100%;
    }

    .bf-mission-points {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .bf-mission-card {
        min-height: auto;
        padding: 15px;
    }

    .bf-mission-card-icon {
        width: 49px;
        height: 49px;
        border-radius: 14px;
        font-size: 17px;
    }

    .bf-mission-card h3 {
        font-size: 15px;
    }

    .bf-mission-card p {
        font-size: 12.5px;
    }
}


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

@media (max-width: 390px) {

    .bf-mission-section {
        padding: 36px 0;
    }

    .bf-mission-content h2 {
        font-size: 29px;
    }

    .bf-mission-highlight {
        padding: 14px;
    }

    .bf-mission-card {
        align-items: flex-start;
    }
}

/* =========================================
   OUR GOALS PREMIUM SLIDER
========================================= */

.bf-goals-section {
    --bf-purple: #4b156f;
    --bf-purple-dark: #250b3a;
    --bf-purple-light: #812e95;
    --bf-pink: #ed296d;
    --bf-pink-dark: #c81759;
    --bf-orange: #ff9700;
    --bf-green: #4f9f19;
    --bf-dark: #32143f;
    --bf-muted: #716779;

    position: relative;
    width: 100%;
    padding: 54px 0;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 6% 18%,
            rgba(237, 41, 109, 0.08),
            transparent 25%
        ),
        radial-gradient(
            circle at 94% 82%,
            rgba(79, 159, 25, 0.08),
            transparent 24%
        ),
        linear-gradient(
            180deg,
            #fffafd 0%,
            #ffffff 100%
        );

    font-family: "Manrope", sans-serif;
}

.bf-goals-section::before {
    content: "";
    position: absolute;
    top: -120px;
    right: -110px;
    width: 310px;
    height: 310px;
    border: 48px solid rgba(129, 46, 149, 0.05);
    border-radius: 50%;
    pointer-events: none;
}

.bf-goals-container {
    position: relative;
    z-index: 2;
    width: min(100% - 40px, 1280px);
    margin: 0 auto;
}


/* =========================================
   HEADING
========================================= */

.bf-goals-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 35px;
    margin-bottom: 27px;
}

.bf-goals-heading-content {
    max-width: 760px;
}

.bf-goals-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 12px;
    padding: 8px 15px;

    border: 1px solid rgba(237, 41, 109, 0.18);
    border-radius: 30px;

    background: rgba(237, 41, 109, 0.07);
    color: var(--bf-pink-dark);

    font-size: 13px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

.bf-goals-subtitle i {
    color: var(--bf-orange);
}

.bf-goals-heading h2 {
    margin: 0 0 10px;
    color: var(--bf-dark);
    font-size: clamp(36px, 4vw, 51px);
    line-height: 1.16;
    font-weight: 800;
    letter-spacing: -1.3px;
}

.bf-goals-heading h2 span {
    display: block;

    background:
        linear-gradient(
            90deg,
            var(--bf-pink),
            var(--bf-purple-light),
            var(--bf-green)
        );

    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.bf-goals-heading p {
    margin: 0;
    color: var(--bf-muted);
    font-size: 15.5px;
    line-height: 1.7;
    font-weight: 500;
}


/* =========================================
   CONTROLS
========================================= */

.bf-goals-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.bf-goals-arrow {
    width: 50px;
    height: 50px;
    padding: 0;

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

    border: 1px solid rgba(75, 21, 111, 0.12);
    border-radius: 50%;

    background: #ffffff;
    color: var(--bf-purple);

    font-size: 15px;
    cursor: pointer;

    box-shadow: 0 11px 25px rgba(55, 14, 72, 0.08);

    transition:
        transform 0.3s ease,
        background 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease;
}

.bf-goals-arrow:hover {
    border-color: transparent;

    background:
        linear-gradient(
            135deg,
            var(--bf-pink),
            var(--bf-purple-light)
        );

    color: #ffffff;
    transform: translateY(-3px);
}


/* =========================================
   SLIDER
========================================= */

.bf-goals-slider {
    width: 100%;
    overflow: visible;
    padding: 3px 3px 38px;
}

.bf-goals-slider .swiper-slide {
    height: auto;
}


/* =========================================
   GOAL CARD
========================================= */

.bf-goal-card {
    position: relative;
    height: 100%;
    min-height: 390px;
    padding: 23px;
    overflow: hidden;

    border: 1px solid rgba(75, 21, 111, 0.09);
    border-radius: 23px;

    background: #ffffff;

    box-shadow:
        0 16px 38px rgba(55, 14, 72, 0.085);

    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

.bf-goal-card::before {
    content: "";
    position: absolute;
    top: -65px;
    right: -60px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: rgba(75, 21, 111, 0.04);
    pointer-events: none;
}

.bf-goal-card:hover {
    border-color: rgba(237, 41, 109, 0.22);
    transform: translateY(-7px);

    box-shadow:
        0 24px 50px rgba(55, 14, 72, 0.14);
}


/* =========================================
   CARD TOP
========================================= */

.bf-goal-card-top {
    position: relative;
    z-index: 2;

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

    margin-bottom: 18px;
}

.bf-goal-icon {
    width: 58px;
    height: 58px;

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

    border-radius: 17px;
    color: #ffffff;
    font-size: 21px;

    box-shadow:
        0 12px 27px rgba(40, 8, 52, 0.16);
}

.bf-goal-number {
    color: rgba(75, 21, 111, 0.17);
    font-size: 29px;
    line-height: 1;
    font-weight: 800;
}

.bf-goal-pink .bf-goal-icon {
    background:
        linear-gradient(
            135deg,
            var(--bf-pink),
            var(--bf-pink-dark)
        );
}

.bf-goal-orange .bf-goal-icon {
    background:
        linear-gradient(
            135deg,
            #ffb12b,
            var(--bf-orange)
        );
}

.bf-goal-green .bf-goal-icon {
    background:
        linear-gradient(
            135deg,
            #7bc442,
            var(--bf-green)
        );
}

.bf-goal-purple .bf-goal-icon {
    background:
        linear-gradient(
            135deg,
            var(--bf-purple-light),
            var(--bf-purple)
        );
}


/* =========================================
   CARD CONTENT
========================================= */

.bf-goal-card h3 {
    position: relative;
    z-index: 2;

    min-height: 58px;
    margin: 0 0 15px;

    color: var(--bf-dark);
    font-size: 21px;
    line-height: 1.35;
    font-weight: 800;
}

.bf-goal-list {
    position: relative;
    z-index: 2;

    margin: 0;
    padding: 0;
    list-style: none;
}

.bf-goal-list li {
    position: relative;
    margin-bottom: 11px;
    padding-left: 25px;

    color: var(--bf-muted);
    font-size: 14px;
    line-height: 1.6;
    font-weight: 500;
}

.bf-goal-list li:last-child {
    margin-bottom: 0;
}

.bf-goal-list li::before {
    content: "\f00c";

    position: absolute;
    top: 2px;
    left: 0;

    width: 17px;
    height: 17px;

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

    border-radius: 50%;
    background: rgba(79, 159, 25, 0.11);
    color: var(--bf-green);

    font-family: "Font Awesome 6 Free";
    font-size: 8px;
    font-weight: 900;
}


/* =========================================
   PAGINATION
========================================= */

.bf-goals-pagination {
    bottom: 0 !important;
}

.bf-goals-pagination .swiper-pagination-bullet {
    width: 9px;
    height: 9px;
    margin: 0 5px !important;

    background: rgba(75, 21, 111, 0.26);
    opacity: 1;

    transition:
        width 0.3s ease,
        border-radius 0.3s ease,
        background 0.3s ease;
}

.bf-goals-pagination .swiper-pagination-bullet-active {
    width: 33px;
    border-radius: 20px;

    background:
        linear-gradient(
            90deg,
            var(--bf-pink),
            var(--bf-orange)
        );
}


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

@media (max-width: 991px) {

    .bf-goals-section {
        padding: 48px 0;
    }

    .bf-goals-heading {
        margin-bottom: 24px;
    }

    .bf-goal-card {
        min-height: 375px;
    }
}


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

@media (max-width: 650px) {

    .bf-goals-section {
        padding: 40px 0;
    }

    .bf-goals-container {
        width: min(100% - 28px, 1280px);
    }

    .bf-goals-heading {
        flex-direction: column;
        align-items: flex-start;
        gap: 17px;
        margin-bottom: 22px;
    }

    .bf-goals-subtitle {
        font-size: 11px;
        letter-spacing: 0.4px;
    }

    .bf-goals-heading h2 {
        font-size: 32px;
        line-height: 1.2;
        letter-spacing: -0.7px;
    }

    .bf-goals-heading p {
        font-size: 15px;
    }

    .bf-goals-controls {
        align-self: flex-end;
    }

    .bf-goals-arrow {
        width: 46px;
        height: 46px;
    }

    .bf-goals-slider {
        padding-bottom: 34px;
    }

    .bf-goal-card {
        min-height: 360px;
        padding: 21px;
        border-radius: 20px;
    }

    .bf-goal-card h3 {
        min-height: auto;
        font-size: 20px;
    }

    .bf-goal-list li {
        font-size: 13.5px;
    }
}


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

@media (max-width: 390px) {

    .bf-goals-section {
        padding: 35px 0;
    }

    .bf-goals-heading h2 {
        font-size: 28px;
    }

    .bf-goal-card {
        min-height: 350px;
    }

    .bf-goal-icon {
        width: 54px;
        height: 54px;
        font-size: 19px;
    }
}

/* =========================================
   LONG-TERM OBJECTIVE SECTION
========================================= */

.bf-objective-section {
    --bf-purple: #4b156f;
    --bf-purple-dark: #21082f;
    --bf-purple-light: #812e95;
    --bf-pink: #ed296d;
    --bf-pink-dark: #c81759;
    --bf-orange: #ff9700;
    --bf-green: #4f9f19;

    position: relative;
    width: 100%;
    padding: 52px 0;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 7% 20%,
            rgba(237, 41, 109, 0.08),
            transparent 25%
        ),
        radial-gradient(
            circle at 94% 80%,
            rgba(79, 159, 25, 0.08),
            transparent 25%
        ),
        linear-gradient(
            180deg,
            #fffafd 0%,
            #ffffff 100%
        );
    font-family: "Manrope", sans-serif;
}

.bf-objective-container {
    width: min(100% - 40px, 1280px);
    margin: 0 auto;
}


/* =========================================
   OBJECTIVE BOX
========================================= */

.bf-objective-box {
    position: relative;
    min-height: 260px;
    padding: 34px 38px;
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr) auto;
    align-items: center;
    gap: 28px;
    overflow: hidden;
    border-radius: 28px;
    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(255, 151, 0, 0.14),
            transparent 28%
        ),
        linear-gradient(
            125deg,
            var(--bf-purple-dark) 0%,
            var(--bf-purple) 48%,
            var(--bf-purple-light) 100%
        );
    box-shadow:
        0 26px 60px rgba(41, 8, 54, 0.22);
}

.bf-objective-box::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 5px;
    background:
        linear-gradient(
            90deg,
            var(--bf-pink),
            var(--bf-orange),
            var(--bf-green)
        );
}


/* =========================================
   DECORATIVE SHAPES
========================================= */

.bf-objective-shape {
    position: absolute;
    display: block;
    border-radius: 50%;
    pointer-events: none;
}

.bf-objective-shape-one {
    top: -105px;
    right: 14%;
    width: 220px;
    height: 220px;
    background: rgba(255, 255, 255, 0.06);
}

.bf-objective-shape-two {
    right: -65px;
    bottom: -100px;
    width: 210px;
    height: 210px;
    border: 34px solid rgba(79, 159, 25, 0.12);
}


/* =========================================
   MAIN ICON
========================================= */

.bf-objective-icon {
    position: relative;
    z-index: 2;
    width: 82px;
    height: 82px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 23px;
    background:
        linear-gradient(
            135deg,
            rgba(237, 41, 109, 0.95),
            rgba(255, 151, 0, 0.92)
        );
    color: #ffffff;
    font-size: 32px;
    box-shadow:
        0 17px 35px rgba(10, 2, 16, 0.25);
}


/* =========================================
   CONTENT
========================================= */

.bf-objective-content {
    position: relative;
    z-index: 2;
    min-width: 0;
    max-width: 820px;
}

.bf-objective-subtitle {
    display: block;
    margin-bottom: 8px;
    color: #ff98ba;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.bf-objective-content h2 {
    margin: 0 0 13px;
    color: #ffffff;
    font-size: clamp(29px, 3vw, 43px);
    line-height: 1.18;
    font-weight: 800;
    letter-spacing: -1px;
}

.bf-objective-content h2 span {
    display: block;
    background:
        linear-gradient(
            90deg,
            #ff5b90 0%,
            #ffb22c 52%,
            #83ce4e 100%
        );
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.bf-objective-content > p {
    max-width: 790px;
    margin: 0 0 18px;
    color: rgba(255, 255, 255, 0.79);
    font-size: 15.5px;
    line-height: 1.75;
    font-weight: 500;
}


/* =========================================
   HIGHLIGHTS
========================================= */

.bf-objective-highlights {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.bf-objective-highlights span {
    min-height: 39px;
    padding: 8px 13px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.9);
    font-size: 12.5px;
    line-height: 1.3;
    font-weight: 700;
    backdrop-filter: blur(8px);
}

.bf-objective-highlights span:nth-child(1) i {
    color: #ff6b9b;
}

.bf-objective-highlights span:nth-child(2) i {
    color: #ffad27;
}

.bf-objective-highlights span:nth-child(3) i {
    color: #82cc4d;
}


/* =========================================
   BUTTON
========================================= */

.bf-objective-action {
    position: relative;
    z-index: 2;
    flex-shrink: 0;
}

.bf-objective-btn {
    min-height: 54px;
    padding: 14px 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 14px;
    background: #ffffff;
    color: var(--bf-purple);
    text-decoration: none;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 800;
    white-space: nowrap;
    box-shadow:
        0 15px 30px rgba(8, 1, 13, 0.2);
    transition:
        transform 0.3s ease,
        background 0.3s ease,
        color 0.3s ease,
        box-shadow 0.3s ease;
}

.bf-objective-btn:hover {
    background:
        linear-gradient(
            135deg,
            var(--bf-pink),
            var(--bf-orange)
        );
    color: #ffffff;
    transform: translateY(-4px);
    box-shadow:
        0 20px 38px rgba(8, 1, 13, 0.28);
}

.bf-objective-btn i {
    transition: transform 0.3s ease;
}

.bf-objective-btn:hover i {
    transform: translateX(4px);
}


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

@media (max-width: 1050px) {

    .bf-objective-section {
        padding: 46px 0;
    }

    .bf-objective-box {
        grid-template-columns: 74px minmax(0, 1fr);
        padding: 30px;
    }

    .bf-objective-icon {
        width: 74px;
        height: 74px;
        font-size: 28px;
    }

    .bf-objective-action {
        grid-column: 1 / -1;
        padding-left: 102px;
    }
}


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

@media (max-width: 650px) {

    .bf-objective-section {
        padding: 38px 0;
    }

    .bf-objective-container {
        width: min(100% - 28px, 1280px);
    }

    .bf-objective-box {
        min-height: auto;
        padding: 25px 20px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 19px;
        border-radius: 22px;
    }

    .bf-objective-icon {
        width: 64px;
        height: 64px;
        border-radius: 18px;
        font-size: 25px;
    }

    .bf-objective-subtitle {
        font-size: 11px;
        letter-spacing: 0.6px;
    }

    .bf-objective-content h2 {
        font-size: 28px;
        line-height: 1.22;
        letter-spacing: -0.6px;
    }

    .bf-objective-content > p {
        font-size: 15px;
        line-height: 1.7;
    }

    .bf-objective-highlights {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .bf-objective-highlights span {
        width: 100%;
        border-radius: 12px;
    }

    .bf-objective-action {
        width: 100%;
        padding-left: 0;
    }

    .bf-objective-btn {
        width: 100%;
    }

    .bf-objective-shape {
        display: none;
    }
}


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

@media (max-width: 390px) {

    .bf-objective-section {
        padding: 33px 0;
    }

    .bf-objective-box {
        padding: 22px 17px;
    }

    .bf-objective-content h2 {
        font-size: 25px;
    }

    .bf-objective-content > p {
        font-size: 14.5px;
    }
}

/* Main Menu */

.imm-desktop-menu>li>a.active{

    color:#ed296d !important;

    font-weight:700;

}

.imm-desktop-menu>li>a.active::after{

    width:100%;

}


/* Parent Dropdown */

.imm-dropdown>a.active,
.imm-dropdown-heading>a.active{

    color:#ed296d !important;

    font-weight:700;

}


/* Dropdown Item */

.imm-dropdown-menu a.active{

    background:linear-gradient(135deg,#ed296d,#812e95);

    color:#fff !important;

    border-radius:12px;

}

.imm-dropdown-menu a.active strong,
.imm-dropdown-menu a.active small,
.imm-dropdown-menu a.active i{

    color:#fff !important;

}

/* =========================================
   BHARATI FOUNDATION CONTACT SECTION V2
========================================= */

.bf-contact-v2-section {
    --bf-purple: #4b156f;
    --bf-purple-dark: #21082f;
    --bf-purple-light: #812e95;
    --bf-pink: #ed296d;
    --bf-pink-dark: #c81759;
    --bf-orange: #ff9700;
    --bf-green: #4f9f19;
    --bf-dark: #32143f;
    --bf-muted: #716779;
    --bf-border: rgba(75, 21, 111, 0.12);

    position: relative;
    width: 100%;
    padding: 60px 0;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 5% 20%,
            rgba(237, 41, 109, 0.08),
            transparent 25%
        ),
        radial-gradient(
            circle at 95% 80%,
            rgba(79, 159, 25, 0.08),
            transparent 25%
        ),
        #fffafd;
    font-family: "Manrope", sans-serif;
}

.bf-contact-v2-container {
    width: min(100% - 40px, 1280px);
    margin: 0 auto;
}

.bf-contact-v2-wrapper {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    overflow: hidden;
    border: 1px solid rgba(75, 21, 111, 0.08);
    border-radius: 30px;
    background: #ffffff;
    box-shadow: 0 28px 70px rgba(55, 14, 72, 0.14);
}


/* =========================================
   LEFT INFORMATION PANEL
========================================= */

.bf-contact-v2-info {
    position: relative;
    padding: 44px 38px;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 12% 12%,
            rgba(237, 41, 109, 0.23),
            transparent 32%
        ),
        radial-gradient(
            circle at 88% 88%,
            rgba(79, 159, 25, 0.18),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            var(--bf-purple-dark) 0%,
            var(--bf-purple) 48%,
            var(--bf-purple-light) 100%
        );
    color: #ffffff;
}

.bf-contact-v2-tag {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 18px;
    padding: 9px 15px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.1);
    color: #ff99b9;
    font-size: 12px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    backdrop-filter: blur(10px);
}

.bf-contact-v2-tag i {
    color: var(--bf-orange);
}

.bf-contact-v2-info h2 {
    position: relative;
    z-index: 2;
    margin: 0 0 17px;
    color: #ffffff;
    font-size: clamp(34px, 3.6vw, 49px);
    line-height: 1.16;
    font-weight: 800;
    letter-spacing: -1.2px;
}

.bf-contact-v2-info h2 span {
    display: block;
    background:
        linear-gradient(
            90deg,
            #ff5e91,
            #ffb02a,
            #82cc4c
        );
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.bf-contact-v2-intro {
    position: relative;
    z-index: 2;
    margin: 0 0 27px;
    color: rgba(255, 255, 255, 0.76);
    font-size: 15px;
    line-height: 1.75;
    font-weight: 500;
}


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

.bf-contact-v2-details {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 11px;
}

.bf-contact-v2-detail {
    min-width: 0;
    min-height: 74px;
    padding: 13px;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.075);
    color: #ffffff;
    text-decoration: none;
    backdrop-filter: blur(10px);
    transition:
        transform 0.3s ease,
        background 0.3s ease,
        border-color 0.3s ease;
}

a.bf-contact-v2-detail:hover {
    border-color: rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    transform: translateX(5px);
}

.bf-contact-v2-detail-icon {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 14px;
    color: #ffffff;
    font-size: 17px;
}

.bf-detail-pink {
    background: linear-gradient(135deg, var(--bf-pink), var(--bf-pink-dark));
}

.bf-detail-orange {
    background: linear-gradient(135deg, #ffb027, var(--bf-orange));
}

.bf-detail-green {
    background: linear-gradient(135deg, #7cc644, var(--bf-green));
}

.bf-detail-purple {
    background: linear-gradient(135deg, #a24ab6, var(--bf-purple));
}

.bf-contact-v2-detail div {
    min-width: 0;
}

.bf-contact-v2-detail small {
    display: block;
    margin-bottom: 3px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 11px;
    line-height: 1.3;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bf-contact-v2-detail strong {
    display: block;
    overflow-wrap: anywhere;
    color: #ffffff;
    font-size: 13.5px;
    line-height: 1.5;
    font-weight: 750;
}

.bf-contact-v2-arrow {
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
    transition: transform 0.3s ease;
}

a.bf-contact-v2-detail:hover .bf-contact-v2-arrow {
    transform: translateX(4px);
}


/* =========================================
   SOCIAL LINKS
========================================= */

.bf-contact-v2-social {
    position: relative;
    z-index: 2;
    margin-top: 26px;
    padding-top: 23px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.bf-contact-v2-social > span {
    color: rgba(255, 255, 255, 0.76);
    font-size: 13px;
    font-weight: 750;
}

.bf-contact-v2-social > div {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bf-contact-v2-social a {
    width: 39px;
    height: 39px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.17);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    transition:
        transform 0.3s ease,
        background 0.3s ease,
        color 0.3s ease;
}

.bf-contact-v2-social a:hover {
    background: #ffffff;
    color: var(--bf-purple);
    transform: translateY(-4px);
}


/* Decorative shapes */

.bf-contact-v2-shape {
    position: absolute;
    display: block;
    border-radius: 50%;
    pointer-events: none;
}

.bf-contact-v2-shape-one {
    top: -100px;
    right: -85px;
    width: 235px;
    height: 235px;
    border: 38px solid rgba(255, 255, 255, 0.045);
}

.bf-contact-v2-shape-two {
    left: -75px;
    bottom: -100px;
    width: 220px;
    height: 220px;
    border: 35px solid rgba(255, 151, 0, 0.08);
}


/* =========================================
   RIGHT FORM PANEL
========================================= */

.bf-contact-v2-form-panel {
    padding: 44px;
    background:
        radial-gradient(
            circle at 95% 5%,
            rgba(237, 41, 109, 0.055),
            transparent 26%
        ),
        #ffffff;
}

.bf-contact-v2-form-heading {
    margin-bottom: 27px;
}

.bf-contact-v2-form-heading > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    color: var(--bf-pink-dark);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

.bf-contact-v2-form-heading > span i {
    color: var(--bf-orange);
}

.bf-contact-v2-form-heading h3 {
    margin: 0 0 7px;
    color: var(--bf-dark);
    font-size: 30px;
    line-height: 1.3;
    font-weight: 800;
}

.bf-contact-v2-form-heading p {
    margin: 0;
    color: var(--bf-muted);
    font-size: 14.5px;
    line-height: 1.65;
}


/* =========================================
   FORM GRID
========================================= */

.bf-contact-v2-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 17px;
}

.bf-contact-v2-field {
    min-width: 0;
}

.bf-contact-v2-full {
    grid-column: 1 / -1;
}

.bf-contact-v2-field label {
    display: block;
    margin-bottom: 8px;
    color: var(--bf-dark);
    font-size: 13px;
    line-height: 1.4;
    font-weight: 750;
}

.bf-contact-v2-input {
    position: relative;
}

.bf-contact-v2-input > i {
    position: absolute;
    top: 50%;
    left: 17px;
    z-index: 2;
    color: var(--bf-purple-light);
    font-size: 14px;
    transform: translateY(-50%);
    pointer-events: none;
}

.bf-contact-v2-input input,
.bf-contact-v2-input select,
.bf-contact-v2-input textarea {
    width: 100%;
    min-height: 55px;
    padding: 13px 16px 13px 46px;
    border: 1px solid var(--bf-border);
    border-radius: 14px;
    outline: none;
    background: #fffafd;
    color: var(--bf-dark);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
    transition:
        border-color 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease;
}

.bf-contact-v2-input select {
    cursor: pointer;
}

.bf-contact-v2-input input::placeholder,
.bf-contact-v2-input textarea::placeholder {
    color: #9c929f;
}

.bf-contact-v2-input input:focus,
.bf-contact-v2-input select:focus,
.bf-contact-v2-input textarea:focus {
    border-color: rgba(237, 41, 109, 0.48);
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(237, 41, 109, 0.08);
}

.bf-contact-v2-textarea > i {
    top: 19px;
    transform: none;
}

.bf-contact-v2-input textarea {
    min-height: 135px;
    resize: vertical;
}


/* =========================================
   FORM BOTTOM
========================================= */

.bf-contact-v2-form-bottom {
    margin-top: 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.bf-contact-v2-submit {
    min-height: 54px;
    padding: 14px 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 0;
    border-radius: 14px;
    background:
        linear-gradient(
            135deg,
            var(--bf-pink),
            var(--bf-purple-light)
        );
    color: #ffffff;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 15px 32px rgba(210, 32, 102, 0.24);
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.bf-contact-v2-submit:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(210, 32, 102, 0.33);
}

.bf-contact-v2-submit i {
    transition: transform 0.3s ease;
}

.bf-contact-v2-submit:hover i {
    transform: translateX(4px);
}

.bf-contact-v2-form-bottom p {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--bf-muted);
    font-size: 12px;
    line-height: 1.5;
    font-weight: 600;
}

.bf-contact-v2-form-bottom p i {
    color: var(--bf-green);
}


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

@media (max-width: 991px) {

    .bf-contact-v2-section {
        padding: 50px 0;
    }

    .bf-contact-v2-wrapper {
        grid-template-columns: 1fr;
    }

    .bf-contact-v2-info,
    .bf-contact-v2-form-panel {
        padding: 38px;
    }
}


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

@media (max-width: 650px) {

    .bf-contact-v2-section {
        padding: 40px 0;
    }

    .bf-contact-v2-container {
        width: min(100% - 28px, 1280px);
    }

    .bf-contact-v2-wrapper {
        border-radius: 23px;
    }

    .bf-contact-v2-info,
    .bf-contact-v2-form-panel {
        padding: 27px 20px;
    }

    .bf-contact-v2-info h2 {
        font-size: 32px;
        line-height: 1.2;
    }

    .bf-contact-v2-intro {
        font-size: 14.5px;
    }

    .bf-contact-v2-social {
        align-items: flex-start;
        flex-direction: column;
    }

    .bf-contact-v2-form-heading h3 {
        font-size: 25px;
    }

    .bf-contact-v2-form-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .bf-contact-v2-full {
        grid-column: auto;
    }

    .bf-contact-v2-form-bottom {
        align-items: stretch;
        flex-direction: column;
    }

    .bf-contact-v2-submit {
        width: 100%;
    }
}


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

@media (max-width: 390px) {

    .bf-contact-v2-section {
        padding: 34px 0;
    }

    .bf-contact-v2-info h2 {
        font-size: 28px;
    }

    .bf-contact-v2-detail {
        grid-template-columns: 43px minmax(0, 1fr);
    }

    .bf-contact-v2-detail-icon {
        width: 43px;
        height: 43px;
    }

    .bf-contact-v2-arrow {
        display: none;
    }

    .bf-contact-v2-form-heading h3 {
        font-size: 23px;
    }
}

/* =========================================
   WHY DONATE SECTION
========================================= */

.bf-donate-why-section {
    --bf-purple: #4b156f;
    --bf-purple-dark: #230934;
    --bf-purple-light: #812e95;
    --bf-pink: #ed296d;
    --bf-pink-dark: #c81759;
    --bf-orange: #ff9700;
    --bf-green: #4f9f19;
    --bf-dark: #32143f;
    --bf-muted: #716779;

    position: relative;
    width: 100%;
    padding: 58px 0;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 6% 18%,
            rgba(237, 41, 109, 0.08),
            transparent 25%
        ),
        radial-gradient(
            circle at 94% 82%,
            rgba(79, 159, 25, 0.08),
            transparent 25%
        ),
        linear-gradient(
            180deg,
            #fffafd 0%,
            #ffffff 100%
        );
    font-family: "Manrope", sans-serif;
}

.bf-donate-why-section::before {
    content: "";
    position: absolute;
    top: -130px;
    right: -110px;
    width: 320px;
    height: 320px;
    border: 50px solid rgba(129, 46, 149, 0.05);
    border-radius: 50%;
    pointer-events: none;
}

.bf-donate-why-container {
    position: relative;
    z-index: 2;
    width: min(100% - 40px, 1280px);
    margin: 0 auto;
}

.bf-donate-why-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: center;
    gap: 64px;
}


/* =========================================
   IMAGE SIDE
========================================= */

.bf-donate-why-visual {
    position: relative;
    min-height: 520px;
}

.bf-donate-why-image {
    position: absolute;
    inset: 0 35px 35px 0;
    overflow: hidden;
    border-radius: 30px;
    box-shadow: 0 28px 65px rgba(55, 14, 72, 0.17);
}

.bf-donate-why-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    transition: transform 0.65s ease;
}

.bf-donate-why-image:hover img {
    transform: scale(1.06);
}

.bf-donate-why-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            rgba(35, 7, 47, 0.04) 35%,
            rgba(35, 7, 47, 0.78) 100%
        );
}

.bf-donate-why-image-card {
    position: absolute;
    left: 21px;
    right: 21px;
    bottom: 21px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 17px;
    background: rgba(38, 8, 51, 0.72);
    backdrop-filter: blur(12px);
}

.bf-donate-why-image-card > span {
    width: 49px;
    height: 49px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 15px;
    background:
        linear-gradient(
            135deg,
            var(--bf-pink),
            var(--bf-purple-light)
        );
    color: #ffffff;
    font-size: 19px;
}

.bf-donate-why-image-card strong {
    display: block;
    margin-bottom: 3px;
    color: #ffffff;
    font-size: 15px;
    line-height: 1.35;
    font-weight: 800;
}

.bf-donate-why-image-card small {
    display: block;
    color: rgba(255, 255, 255, 0.72);
    font-size: 12px;
    line-height: 1.45;
}

.bf-donate-impact-card {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 4;
    width: 240px;
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 19px;
    background:
        linear-gradient(
            135deg,
            var(--bf-orange),
            #ef6d00
        );
    color: #ffffff;
    box-shadow: 0 20px 42px rgba(255, 151, 0, 0.25);
}

.bf-donate-impact-card > i {
    font-size: 26px;
    flex-shrink: 0;
}

.bf-donate-impact-card strong {
    display: block;
    margin-bottom: 3px;
    font-size: 15px;
    line-height: 1.35;
    font-weight: 800;
}

.bf-donate-impact-card span {
    display: block;
    color: rgba(255, 255, 255, 0.8);
    font-size: 11px;
    line-height: 1.45;
}


/* =========================================
   CONTENT SIDE
========================================= */

.bf-donate-why-content {
    max-width: 700px;
}

.bf-donate-why-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 14px;
    padding: 8px 15px;
    border: 1px solid rgba(237, 41, 109, 0.18);
    border-radius: 30px;
    background: rgba(237, 41, 109, 0.07);
    color: var(--bf-pink-dark);
    font-size: 13px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

.bf-donate-why-subtitle i {
    color: var(--bf-pink);
}

.bf-donate-why-content h2 {
    margin: 0 0 17px;
    color: var(--bf-dark);
    font-size: clamp(36px, 4vw, 52px);
    line-height: 1.16;
    font-weight: 800;
    letter-spacing: -1.3px;
}

.bf-donate-why-content h2 span {
    display: block;
    background:
        linear-gradient(
            90deg,
            var(--bf-pink),
            var(--bf-purple-light),
            var(--bf-green)
        );
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.bf-donate-why-content > p {
    margin: 0 0 21px;
    color: var(--bf-muted);
    font-size: 16px;
    line-height: 1.8;
    font-weight: 500;
}


/* =========================================
   SMALL TITLE
========================================= */

.bf-donate-help-title {
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 11px;
}

.bf-donate-help-title > span {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 12px;
    background: rgba(79, 159, 25, 0.11);
    color: var(--bf-green);
    font-size: 16px;
}

.bf-donate-help-title strong {
    color: var(--bf-dark);
    font-size: 18px;
    line-height: 1.4;
    font-weight: 800;
}


/* =========================================
   HELP LIST
========================================= */

.bf-donate-help-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
    margin-bottom: 25px;
}

.bf-donate-help-item {
    min-width: 0;
    min-height: 72px;
    padding: 12px 13px;
    display: flex;
    align-items: center;
    gap: 11px;
    border: 1px solid rgba(75, 21, 111, 0.08);
    border-radius: 15px;
    background: #ffffff;
    box-shadow: 0 10px 25px rgba(55, 14, 72, 0.06);
    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.bf-donate-help-item:hover {
    border-color: rgba(237, 41, 109, 0.22);
    transform: translateY(-4px);
    box-shadow: 0 16px 33px rgba(55, 14, 72, 0.1);
}

.bf-donate-help-wide {
    grid-column: 1 / -1;
}

.bf-donate-help-icon {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 13px;
    color: #ffffff;
    font-size: 16px;
}

.bf-donate-pink {
    background:
        linear-gradient(
            135deg,
            var(--bf-pink),
            var(--bf-pink-dark)
        );
}

.bf-donate-purple {
    background:
        linear-gradient(
            135deg,
            var(--bf-purple-light),
            var(--bf-purple)
        );
}

.bf-donate-orange {
    background:
        linear-gradient(
            135deg,
            #ffb02a,
            var(--bf-orange)
        );
}

.bf-donate-green {
    background:
        linear-gradient(
            135deg,
            #79c341,
            var(--bf-green)
        );
}

.bf-donate-help-item p {
    margin: 0;
    color: var(--bf-dark);
    font-size: 13.5px;
    line-height: 1.5;
    font-weight: 700;
}


/* =========================================
   BOTTOM AREA
========================================= */

.bf-donate-why-bottom {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.bf-donate-now-btn {
    min-height: 54px;
    padding: 14px 23px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 14px;
    background:
        linear-gradient(
            135deg,
            var(--bf-pink),
            var(--bf-purple-light)
        );
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 800;
    box-shadow: 0 15px 32px rgba(210, 32, 102, 0.24);
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.bf-donate-now-btn:hover {
    color: #ffffff;
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(210, 32, 102, 0.33);
}

.bf-donate-now-btn i:last-child {
    transition: transform 0.3s ease;
}

.bf-donate-now-btn:hover i:last-child {
    transform: translateX(4px);
}

.bf-donate-secure-note {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--bf-muted);
    font-size: 12.5px;
    line-height: 1.5;
    font-weight: 650;
}

.bf-donate-secure-note i {
    color: var(--bf-green);
    font-size: 18px;
}


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

@media (max-width: 1000px) {

    .bf-donate-why-section {
        padding: 50px 0;
    }

    .bf-donate-why-grid {
        gap: 45px;
    }

    .bf-donate-why-visual {
        min-height: 470px;
    }
}


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

@media (max-width: 850px) {

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

    .bf-donate-why-visual {
        width: min(100%, 680px);
        min-height: 500px;
        margin: 0 auto;
    }

    .bf-donate-why-content {
        max-width: 760px;
    }
}


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

@media (max-width: 650px) {

    .bf-donate-why-section {
        padding: 42px 0;
    }

    .bf-donate-why-container {
        width: min(100% - 28px, 1280px);
    }

    .bf-donate-why-grid {
        gap: 38px;
    }

    .bf-donate-why-visual {
        min-height: auto;
    }

    .bf-donate-why-image {
        position: relative;
        inset: auto;
        width: 100%;
        height: 370px;
        border-radius: 23px;
    }

    .bf-donate-impact-card {
        position: relative;
        right: auto;
        bottom: auto;
        width: calc(100% - 30px);
        margin: -28px auto 0;
    }

    .bf-donate-why-subtitle {
        font-size: 11px;
        letter-spacing: 0.4px;
    }

    .bf-donate-why-content h2 {
        font-size: 33px;
        line-height: 1.2;
        letter-spacing: -0.7px;
    }

    .bf-donate-why-content > p {
        font-size: 15.5px;
        line-height: 1.75;
    }

    .bf-donate-help-list {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .bf-donate-help-wide {
        grid-column: auto;
    }

    .bf-donate-help-item {
        min-height: auto;
    }

    .bf-donate-why-bottom {
        flex-direction: column;
        align-items: stretch;
    }

    .bf-donate-now-btn {
        width: 100%;
    }

    .bf-donate-secure-note {
        justify-content: center;
    }
}


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

@media (max-width: 390px) {

    .bf-donate-why-section {
        padding: 36px 0;
    }

    .bf-donate-why-image {
        height: 330px;
    }

    .bf-donate-why-content h2 {
        font-size: 29px;
    }

    .bf-donate-help-item p {
        font-size: 13px;
    }
}

/* =========================================
   DONATION IMPACT MESSAGE
========================================= */

.bf-donation-impact-section {
    --bf-purple: #4b156f;
    --bf-purple-dark: #21082f;
    --bf-purple-light: #812e95;
    --bf-pink: #ed296d;
    --bf-orange: #ff9700;
    --bf-green: #4f9f19;

    position: relative;
    width: 100%;
    padding: 48px 0;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 5% 20%,
            rgba(237, 41, 109, 0.08),
            transparent 25%
        ),
        radial-gradient(
            circle at 95% 80%,
            rgba(79, 159, 25, 0.08),
            transparent 25%
        ),
        #fffafd;
    font-family: "Manrope", sans-serif;
}

.bf-donation-impact-container {
    width: min(100% - 40px, 1280px);
    margin: 0 auto;
}

.bf-donation-impact-box {
    position: relative;
    min-height: 270px;
    padding: 34px 38px;
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr) auto;
    align-items: center;
    gap: 28px;
    overflow: hidden;
    border-radius: 28px;
    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(255, 151, 0, 0.14),
            transparent 28%
        ),
        linear-gradient(
            125deg,
            var(--bf-purple-dark) 0%,
            var(--bf-purple) 48%,
            var(--bf-purple-light) 100%
        );
    box-shadow: 0 26px 60px rgba(41, 8, 54, 0.22);
}

.bf-donation-impact-box::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 5px;
    background:
        linear-gradient(
            90deg,
            var(--bf-pink),
            var(--bf-orange),
            var(--bf-green)
        );
}


/* Main icon */

.bf-donation-impact-icon {
    position: relative;
    z-index: 2;
    width: 82px;
    height: 82px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 23px;
    background:
        linear-gradient(
            135deg,
            var(--bf-pink),
            var(--bf-orange)
        );
    color: #ffffff;
    font-size: 31px;
    box-shadow: 0 17px 35px rgba(10, 2, 16, 0.25);
}


/* Content */

.bf-donation-impact-content {
    position: relative;
    z-index: 2;
    min-width: 0;
    max-width: 830px;
}

.bf-donation-impact-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 9px;
    color: #ff9fbc;
    font-size: 12px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.bf-donation-impact-tag i {
    color: var(--bf-orange);
}

.bf-donation-impact-content h2 {
    margin: 0 0 13px;
    color: #ffffff;
    font-size: clamp(30px, 3vw, 43px);
    line-height: 1.18;
    font-weight: 800;
    letter-spacing: -1px;
}

.bf-donation-impact-content h2 span {
    display: block;
    background:
        linear-gradient(
            90deg,
            #ff5b90,
            #ffb22c,
            #83ce4e
        );
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.bf-donation-impact-content > p {
    margin: 0 0 17px;
    color: rgba(255, 255, 255, 0.79);
    font-size: 15px;
    line-height: 1.75;
    font-weight: 500;
}

.bf-donation-impact-message {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.92);
}

.bf-donation-impact-message i {
    color: #83ce4e;
    font-size: 18px;
}

.bf-donation-impact-message strong {
    font-size: 13.5px;
    line-height: 1.55;
    font-weight: 750;
}


/* Action */

.bf-donation-impact-action {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 11px;
    flex-shrink: 0;
}

.bf-donation-impact-btn {
    min-height: 54px;
    padding: 14px 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 14px;
    background: #ffffff;
    color: var(--bf-purple);
    text-decoration: none;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 800;
    white-space: nowrap;
    box-shadow: 0 15px 30px rgba(8, 1, 13, 0.2);
    transition:
        transform 0.3s ease,
        background 0.3s ease,
        color 0.3s ease,
        box-shadow 0.3s ease;
}

.bf-donation-impact-btn:hover {
    background:
        linear-gradient(
            135deg,
            var(--bf-pink),
            var(--bf-orange)
        );
    color: #ffffff;
    transform: translateY(-4px);
    box-shadow: 0 20px 38px rgba(8, 1, 13, 0.28);
}

.bf-donation-impact-btn i:last-child {
    transition: transform 0.3s ease;
}

.bf-donation-impact-btn:hover i:last-child {
    transform: translateX(4px);
}

.bf-donation-impact-action > span {
    display: flex;
    align-items: center;
    gap: 7px;
    color: rgba(255, 255, 255, 0.63);
    font-size: 11.5px;
    line-height: 1.4;
    font-weight: 600;
}

.bf-donation-impact-action > span i {
    color: #83ce4e;
}


/* Shapes */

.bf-donation-impact-shape {
    position: absolute;
    display: block;
    border-radius: 50%;
    pointer-events: none;
}

.bf-impact-shape-one {
    top: -105px;
    right: 14%;
    width: 220px;
    height: 220px;
    background: rgba(255, 255, 255, 0.06);
}

.bf-impact-shape-two {
    right: -65px;
    bottom: -100px;
    width: 210px;
    height: 210px;
    border: 34px solid rgba(79, 159, 25, 0.12);
}


/* Tablet */

@media (max-width: 1050px) {

    .bf-donation-impact-section {
        padding: 44px 0;
    }

    .bf-donation-impact-box {
        grid-template-columns: 74px minmax(0, 1fr);
        padding: 30px;
    }

    .bf-donation-impact-icon {
        width: 74px;
        height: 74px;
        font-size: 28px;
    }

    .bf-donation-impact-action {
        grid-column: 1 / -1;
        padding-left: 102px;
        align-items: flex-start;
    }
}


/* Mobile */

@media (max-width: 650px) {

    .bf-donation-impact-section {
        padding: 38px 0;
    }

    .bf-donation-impact-container {
        width: min(100% - 28px, 1280px);
    }

    .bf-donation-impact-box {
        min-height: auto;
        padding: 25px 20px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 19px;
        border-radius: 22px;
    }

    .bf-donation-impact-icon {
        width: 64px;
        height: 64px;
        border-radius: 18px;
        font-size: 25px;
    }

    .bf-donation-impact-tag {
        font-size: 10.5px;
    }

    .bf-donation-impact-content h2 {
        font-size: 28px;
        line-height: 1.22;
        letter-spacing: -0.6px;
    }

    .bf-donation-impact-content > p {
        font-size: 15px;
        line-height: 1.7;
    }

    .bf-donation-impact-message {
        align-items: flex-start;
    }

    .bf-donation-impact-action {
        width: 100%;
        padding-left: 0;
        align-items: stretch;
    }

    .bf-donation-impact-btn {
        width: 100%;
    }

    .bf-donation-impact-action > span {
        justify-content: center;
    }

    .bf-donation-impact-shape {
        display: none;
    }
}


/* Small mobile */

@media (max-width: 390px) {

    .bf-donation-impact-section {
        padding: 33px 0;
    }

    .bf-donation-impact-box {
        padding: 22px 17px;
    }

    .bf-donation-impact-content h2 {
        font-size: 25px;
    }

    .bf-donation-impact-content > p {
        font-size: 14.5px;
    }
}

/* =========================================
   AREAS YOU CAN SUPPORT SLIDER
========================================= */

.bf-support-section {
    --bf-purple: #4b156f;
    --bf-purple-dark: #250b3a;
    --bf-purple-light: #812e95;
    --bf-pink: #ed296d;
    --bf-pink-dark: #c81759;
    --bf-orange: #ff9700;
    --bf-green: #4f9f19;
    --bf-dark: #32143f;
    --bf-muted: #716779;

    position: relative;
    width: 100%;
    padding: 52px 0;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 6% 20%,
            rgba(237, 41, 109, 0.08),
            transparent 25%
        ),
        radial-gradient(
            circle at 94% 80%,
            rgba(79, 159, 25, 0.08),
            transparent 25%
        ),
        linear-gradient(
            180deg,
            #fffafd 0%,
            #ffffff 100%
        );
    font-family: "Manrope", sans-serif;
}

.bf-support-section::before {
    content: "";
    position: absolute;
    top: -120px;
    right: -110px;
    width: 310px;
    height: 310px;
    border: 48px solid rgba(129, 46, 149, 0.05);
    border-radius: 50%;
    pointer-events: none;
}

.bf-support-container {
    position: relative;
    z-index: 2;
    width: min(100% - 40px, 1280px);
    margin: 0 auto;
}


/* Heading — centered for grid layout */

.bf-support-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0;
    margin-bottom: 40px;
}

.bf-support-heading-content {
    max-width: 620px;
}

.bf-support-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 12px;
    padding: 8px 15px;
    border: 1px solid rgba(237, 41, 109, 0.18);
    border-radius: 30px;
    background: rgba(237, 41, 109, 0.07);
    color: var(--bf-pink-dark);
    font-size: 13px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

.bf-support-subtitle i {
    color: var(--bf-orange);
}

.bf-support-heading h2 {
    margin: 0 0 10px;
    color: var(--bf-dark);
    font-size: clamp(36px, 4vw, 51px);
    line-height: 1.16;
    font-weight: 800;
    letter-spacing: -1.3px;
}

.bf-support-heading h2 span {
    display: block;
    background:
        linear-gradient(
            90deg,
            var(--bf-pink),
            var(--bf-purple-light),
            var(--bf-green)
        );
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.bf-support-heading p {
    margin: 0;
    color: var(--bf-muted);
    font-size: 15.5px;
    line-height: 1.7;
    font-weight: 500;
}


/* Grid — replaces slider */

.bf-support-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* Card */

.bf-support-card {
    position: relative;
    height: 100%;
    min-height: 275px;
    padding: 23px;
    overflow: hidden;
    border: 1px solid rgba(75, 21, 111, 0.09);
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 16px 38px rgba(55, 14, 72, 0.085);
    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

.bf-support-card::before {
    content: "";
    position: absolute;
    top: -65px;
    right: -60px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: rgba(75, 21, 111, 0.04);
}

.bf-support-card:hover {
    border-color: rgba(237, 41, 109, 0.22);
    transform: translateY(-7px);
    box-shadow: 0 24px 50px rgba(55, 14, 72, 0.14);
}

.bf-support-card-top {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.bf-support-icon {
    width: 58px;
    height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 17px;
    color: #ffffff;
    font-size: 21px;
    box-shadow: 0 12px 27px rgba(40, 8, 52, 0.16);
}

.bf-support-number {
    color: rgba(75, 21, 111, 0.16);
    font-size: 29px;
    line-height: 1;
    font-weight: 800;
}

.bf-support-pink .bf-support-icon {
    background:
        linear-gradient(
            135deg,
            var(--bf-pink),
            var(--bf-pink-dark)
        );
}

.bf-support-orange .bf-support-icon {
    background:
        linear-gradient(
            135deg,
            #ffb12b,
            var(--bf-orange)
        );
}

.bf-support-green .bf-support-icon {
    background:
        linear-gradient(
            135deg,
            #7bc442,
            var(--bf-green)
        );
}

.bf-support-purple .bf-support-icon {
    background:
        linear-gradient(
            135deg,
            var(--bf-purple-light),
            var(--bf-purple)
        );
}

.bf-support-card h3 {
    position: relative;
    z-index: 2;
    margin: 0 0 11px;
    color: var(--bf-dark);
    font-size: 21px;
    line-height: 1.35;
    font-weight: 800;
}

.bf-support-card p {
    position: relative;
    z-index: 2;
    min-height: 72px;
    margin: 0 0 17px;
    color: var(--bf-muted);
    font-size: 14.5px;
    line-height: 1.65;
    font-weight: 500;
}

.bf-support-link {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--bf-pink-dark);
    text-decoration: none;
    font-size: 13.5px;
    line-height: 1.4;
    font-weight: 800;
    transition:
        color 0.3s ease,
        gap 0.3s ease;
}

.bf-support-link:hover {
    color: var(--bf-purple);
    gap: 13px;
}


/* Tablet */

@media (max-width: 991px) {

    .bf-support-section {
        padding: 47px 0;
    }

    .bf-support-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .bf-support-card {
        min-height: 265px;
    }
}


/* Mobile */

@media (max-width: 650px) {

    .bf-support-section {
        padding: 40px 0;
    }

    .bf-support-container {
        width: min(100% - 28px, 1280px);
    }

    .bf-support-heading {
        align-items: flex-start;
        text-align: left;
        margin-bottom: 26px;
    }

    .bf-support-subtitle {
        font-size: 11px;
        letter-spacing: 0.4px;
    }

    .bf-support-heading h2 {
        font-size: 32px;
        line-height: 1.2;
    }

    .bf-support-heading p {
        font-size: 15px;
    }

    .bf-support-grid {
        grid-template-columns: 1fr 1fr;
        gap: 14px;
    }

    .bf-support-card {
        min-height: 250px;
        padding: 21px;
        border-radius: 20px;
    }

    .bf-support-card p {
        min-height: auto;
    }
}


/* Small mobile */

@media (max-width: 480px) {

    .bf-support-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}

@media (max-width: 390px) {

    .bf-support-section {
        padding: 35px 0;
    }

    .bf-support-heading h2 {
        font-size: 28px;
    }

    .bf-support-card {
        min-height: 240px;
    }
}

/* =========================================
   DONATION FORM AND BANK DETAILS
========================================= */

.bf-donation-form-section {
    --bf-purple: #4b156f;
    --bf-purple-dark: #21082f;
    --bf-purple-light: #812e95;
    --bf-pink: #ed296d;
    --bf-pink-dark: #c81759;
    --bf-orange: #ff9700;
    --bf-green: #4f9f19;
    --bf-dark: #32143f;
    --bf-muted: #716779;
    --bf-border: rgba(75, 21, 111, 0.12);

    position: relative;
    width: 100%;
    padding: 60px 0;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 4% 18%,
            rgba(237, 41, 109, 0.08),
            transparent 24%
        ),
        radial-gradient(
            circle at 96% 82%,
            rgba(79, 159, 25, 0.08),
            transparent 25%
        ),
        linear-gradient(
            180deg,
            #fffafd 0%,
            #ffffff 100%
        );
    font-family: "Manrope", sans-serif;
}

.bf-donation-form-section::before {
    content: "";
    position: absolute;
    top: -130px;
    right: -110px;
    width: 320px;
    height: 320px;
    border: 50px solid rgba(129, 46, 149, 0.05);
    border-radius: 50%;
    pointer-events: none;
}

.bf-donation-form-container {
    position: relative;
    z-index: 2;
    width: min(100% - 40px, 1280px);
    margin: 0 auto;
}


/* =========================================
   SECTION HEADING
========================================= */

.bf-donation-section-heading {
    max-width: 780px;
    margin: 0 auto 32px;
    text-align: center;
}

.bf-donation-heading-tag {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 13px;
    padding: 8px 15px;
    border: 1px solid rgba(237, 41, 109, 0.18);
    border-radius: 30px;
    background: rgba(237, 41, 109, 0.07);
    color: var(--bf-pink-dark);
    font-size: 13px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

.bf-donation-heading-tag i {
    color: var(--bf-orange);
}

.bf-donation-section-heading h2 {
    margin: 0 0 11px;
    color: var(--bf-dark);
    font-size: clamp(36px, 4vw, 52px);
    line-height: 1.16;
    font-weight: 800;
    letter-spacing: -1.3px;
}

.bf-donation-section-heading h2 span {
    background:
        linear-gradient(
            90deg,
            var(--bf-pink),
            var(--bf-purple-light),
            var(--bf-green)
        );
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.bf-donation-section-heading p {
    max-width: 670px;
    margin: 0 auto;
    color: var(--bf-muted);
    font-size: 15.5px;
    line-height: 1.7;
}


/* =========================================
   MAIN LAYOUT — full-width stacked form,
   bank panel revealed below after submit
========================================= */

.bf-donation-layout {
    display: flex;
    flex-direction: column;
    gap: 32px;
    max-width: 860px;
    margin: 0 auto;
}


/* =========================================
   FORM CARD
========================================= */

.bf-donation-form-card {
    padding: 48px 52px;
    border: 1px solid var(--bf-border);
    border-radius: 28px;
    background: #ffffff;
    box-shadow:
        0 4px 6px rgba(55,14,72,0.03),
        0 24px 60px rgba(55,14,72,0.10);
}

.bf-donation-card-heading {
    margin-bottom: 32px;
    display: flex;
    align-items: center;
    gap: 18px;
    padding-bottom: 28px;
    border-bottom: 1px solid rgba(75,21,111,0.08);
}

.bf-donation-heading-icon {
    width: 58px;
    height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 17px;
    background:
        linear-gradient(
            135deg,
            var(--bf-pink),
            var(--bf-purple-light)
        );
    color: #ffffff;
    font-size: 21px;
    box-shadow: 0 12px 28px rgba(210, 32, 102, 0.22);
}

.bf-donation-card-heading div > span {
    display: block;
    margin-bottom: 3px;
    color: var(--bf-pink-dark);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

.bf-donation-card-heading h3 {
    margin: 0 0 3px;
    color: var(--bf-dark);
    font-size: 27px;
    line-height: 1.3;
    font-weight: 800;
}

.bf-donation-card-heading p {
    margin: 0;
    color: var(--bf-muted);
    font-size: 13.5px;
    line-height: 1.5;
}


/* =========================================
   FORM
========================================= */

.bf-donation-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 17px;
}

.bf-donation-field {
    min-width: 0;
}

.bf-donation-full-field {
    grid-column: 1 / -1;
}

.bf-donation-field label {
    display: block;
    margin-bottom: 8px;
    color: var(--bf-dark);
    font-size: 13px;
    line-height: 1.4;
    font-weight: 750;
}

.bf-donation-field label sup {
    color: var(--bf-pink);
    font-size: 13px;
}

.bf-donation-field label span {
    color: var(--bf-muted);
    font-size: 11px;
    font-weight: 600;
}

.bf-donation-input-wrap {
    position: relative;
}

.bf-donation-input-wrap > i {
    position: absolute;
    top: 50%;
    left: 17px;
    z-index: 2;
    color: var(--bf-purple-light);
    font-size: 14px;
    transform: translateY(-50%);
    pointer-events: none;
}

.bf-donation-input-wrap input,
.bf-donation-input-wrap select,
.bf-donation-input-wrap textarea {
    width: 100%;
    min-height: 55px;
    padding: 13px 16px 13px 46px;
    border: 1px solid var(--bf-border);
    border-radius: 14px;
    outline: none;
    background: #fffafd;
    color: var(--bf-dark);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
    transition:
        border-color 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease;
}

.bf-donation-input-wrap select {
    cursor: pointer;
}

.bf-donation-input-wrap input::placeholder,
.bf-donation-input-wrap textarea::placeholder {
    color: #9d929f;
}

.bf-donation-input-wrap input:focus,
.bf-donation-input-wrap select:focus,
.bf-donation-input-wrap textarea:focus {
    border-color: rgba(237, 41, 109, 0.48);
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(237, 41, 109, 0.08);
}

.bf-donation-textarea-wrap > i {
    top: 19px;
    transform: none;
}

.bf-donation-input-wrap textarea {
    min-height: 125px;
    resize: vertical;
}


/* Submit area */

.bf-donation-submit-row {
    margin-top: 23px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.bf-donation-submit-btn {
    min-height: 54px;
    padding: 14px 23px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 0;
    border-radius: 14px;
    background:
        linear-gradient(
            135deg,
            var(--bf-pink),
            var(--bf-purple-light)
        );
    color: #ffffff;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 15px 32px rgba(210, 32, 102, 0.24);
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.bf-donation-submit-btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(210, 32, 102, 0.33);
}

.bf-donation-submit-row p {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--bf-muted);
    font-size: 11.5px;
    line-height: 1.5;
}

.bf-donation-submit-row p i {
    color: var(--bf-green);
}


/* =========================================
   BANK DETAILS CARD — full-width horizontal
   two-col: QR left, bank info right
========================================= */

.bf-bank-details-card {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    background:
        radial-gradient(
            circle at 92% 8%,
            rgba(237, 41, 109, 0.22),
            transparent 28%
        ),
        radial-gradient(
            circle at 8% 92%,
            rgba(79, 159, 25, 0.18),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            var(--bf-purple-dark) 0%,
            var(--bf-purple) 55%,
            var(--bf-purple-light) 100%
        );
    color: #ffffff;
    box-shadow: 0 28px 65px rgba(41, 8, 54, 0.26);
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 0;
}

/* Left QR column */
.bf-bank-qr-col {
    padding: 38px 34px;
    border-right: 1px solid rgba(255,255,255,0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    background: rgba(0,0,0,0.12);
}

/* Right bank info column */
.bf-bank-info-col {
    padding: 38px 40px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.bf-bank-card-top {
    position: relative;
    z-index: 2;
    margin-bottom: 22px;
    display: flex;
    align-items: center;
    gap: 13px;
}

.bf-bank-main-icon {
    width: 55px;
    height: 55px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 16px;
    background:
        linear-gradient(
            135deg,
            var(--bf-pink),
            var(--bf-orange)
        );
    color: #ffffff;
    font-size: 20px;
}

.bf-bank-card-top div > span {
    display: block;
    margin-bottom: 2px;
    color: #ff9fbd;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

.bf-bank-card-top h3 {
    margin: 0;
    color: #ffffff;
    font-size: 25px;
    line-height: 1.3;
    font-weight: 800;
}


/* =========================================
   QR CODE — inside left col
========================================= */

.bf-donation-qr-box {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.bf-donation-qr-heading {
    margin-bottom: 0;
    display: flex;
    align-items: center;
    gap: 11px;
}

.bf-donation-qr-heading > span {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.12);
    color: var(--bf-orange);
    font-size: 18px;
}

.bf-donation-qr-heading strong {
    display: block;
    margin-bottom: 2px;
    color: #ffffff;
    font-size: 15px;
    font-weight: 800;
}

.bf-donation-qr-heading small {
    display: block;
    color: rgba(255, 255, 255, 0.62);
    font-size: 11px;
}

.bf-donation-qr-image {
    width: min(100%, 200px);
    margin: 0 auto;
    padding: 10px;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 15px 35px rgba(5, 1, 8, 0.3);
}

.bf-donation-qr-image img {
    width: 100%;
    display: block;
    border-radius: 9px;
}

.bf-donation-qr-box > p {
    margin: 0;
    color: rgba(255, 255, 255, 0.68);
    font-size: 11.5px;
    line-height: 1.6;
    text-align: center;
    max-width: 200px;
}


/* =========================================
   BANK INFORMATION — inside right col
========================================= */

.bf-bank-information {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 0;
}

.bf-bank-detail-row {
    min-width: 0;
    min-height: 62px;
    padding: 10px 11px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.07);
}

.bf-bank-detail-icon {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: #ffffff;
    font-size: 15px;
}

.bf-bank-pink {
    background: linear-gradient(135deg, var(--bf-pink), var(--bf-pink-dark));
}

.bf-bank-purple {
    background: linear-gradient(135deg, #a44bb8, var(--bf-purple));
}

.bf-bank-orange {
    background: linear-gradient(135deg, #ffb12a, var(--bf-orange));
}

.bf-bank-green {
    background: linear-gradient(135deg, #7bc442, var(--bf-green));
}

.bf-bank-detail-row div {
    min-width: 0;
}

.bf-bank-detail-row small {
    display: block;
    margin-bottom: 2px;
    color: rgba(255, 255, 255, 0.57);
    font-size: 9.5px;
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.bf-bank-detail-row strong {
    display: block;
    overflow-wrap: anywhere;
    color: #ffffff;
    font-size: 12.5px;
    line-height: 1.45;
    font-weight: 750;
}


/* Copy button */

.bf-copy-bank-btn {
    width: 35px;
    height: 35px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    cursor: pointer;
    transition:
        transform 0.3s ease,
        background 0.3s ease,
        color 0.3s ease;
}

.bf-copy-bank-btn:hover {
    background: #ffffff;
    color: var(--bf-purple);
    transform: translateY(-2px);
}


/* Bank notice */

.bf-bank-notice {
    position: relative;
    z-index: 2;
    margin-top: 16px;
    padding: 13px 15px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border-left: 3px solid var(--bf-orange);
    border-radius: 0 12px 12px 0;
    background: rgba(255, 151, 0, 0.1);
    grid-column: 1 / -1;
}

.bf-bank-notice i {
    margin-top: 2px;
    color: var(--bf-orange);
}

.bf-bank-notice p {
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 10.5px;
    line-height: 1.55;
}


/* =========================================
   COPY TOAST
========================================= */

.bf-copy-toast {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 99999;
    padding: 13px 18px;
    display: flex;
    align-items: center;
    gap: 9px;
    border-radius: 13px;
    background: var(--bf-purple-dark, #21082f);
    color: #ffffff;
    font-family: "Manrope", sans-serif;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
    opacity: 0;
    visibility: hidden;
    transform: translateY(18px);
    transition: 0.3s ease;
}

.bf-copy-toast.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.bf-copy-toast i {
    color: #83ce4e;
}


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

@media (max-width: 1000px) {

    .bf-donation-form-section {
        padding: 50px 0;
    }

    .bf-donation-layout {
        max-width: 100%;
    }

    .bf-bank-details-card {
        grid-template-columns: 280px 1fr;
    }
}


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

@media (max-width: 750px) {

    .bf-bank-details-card {
        grid-template-columns: 1fr;
    }

    .bf-bank-qr-col {
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        padding: 30px 24px;
    }

    .bf-bank-info-col {
        padding: 28px 24px;
    }

    .bf-bank-information {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 650px) {

    .bf-donation-form-section {
        padding: 40px 0;
    }

    .bf-donation-form-container {
        width: min(100% - 28px, 1280px);
    }

    .bf-donation-section-heading {
        margin-bottom: 25px;
    }

    .bf-donation-heading-tag {
        font-size: 11px;
    }

    .bf-donation-section-heading h2 {
        font-size: 32px;
        line-height: 1.2;
    }

    .bf-donation-section-heading p {
        font-size: 15px;
    }

    .bf-donation-form-card {
        padding: 28px 22px;
        border-radius: 22px;
    }

    .bf-donation-card-heading {
        align-items: flex-start;
    }

    .bf-donation-card-heading h3 {
        font-size: 23px;
    }

    .bf-donation-form-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .bf-donation-full-field {
        grid-column: auto;
    }

    .bf-donation-submit-row {
        align-items: stretch;
        flex-direction: column;
    }

    .bf-donation-submit-btn {
        width: 100%;
    }

    .bf-donation-submit-row p {
        justify-content: center;
        text-align: center;
    }

    .bf-bank-detail-row {
        grid-template-columns: 40px minmax(0, 1fr) auto;
    }
}


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

@media (max-width: 390px) {

    .bf-donation-form-section {
        padding: 34px 0;
    }

    .bf-donation-section-heading h2 {
        font-size: 28px;
    }

    .bf-donation-heading-icon {
        width: 52px;
        height: 52px;
    }

    .bf-donation-card-heading h3 {
        font-size: 21px;
    }

    .bf-bank-detail-row strong {
        font-size: 11.5px;
    }

    .bf-copy-toast {
        right: 14px;
        bottom: 14px;
        left: 14px;
        justify-content: center;
    }
}

/*====================================
  TRANSPARENCY / DONATION SPLIT SECTION
=====================================*/

.bf-change-section{
    padding:85px 20px;
    background:#f5f3fa;
    position:relative;
    overflow:hidden;
}

.bf-change-section::before{
    content:"";
    position:absolute;
    width:380px;
    height:380px;
    border-radius:50%;
    background:rgba(255,126,92,.12);
    top:-190px;
    right:-150px;
}

.bf-change-section::after{
    content:"";
    position:absolute;
    width:280px;
    height:280px;
    border-radius:50%;
    background:rgba(100,43,173,.10);
    left:-140px;
    bottom:-140px;
}

.bf-change-container{
    max-width:1240px;
    margin:auto;
    display:grid;
    grid-template-columns:1.12fr .88fr;
    background:#fff;
    border-radius:32px;
    overflow:hidden;
    box-shadow:0 28px 80px rgba(40,22,74,.13);
    position:relative;
    z-index:2;
}

/*====================================
  LEFT SIDE
=====================================*/

.bf-change-left{
    min-height:660px;
    padding:70px 65px;
    background:
        linear-gradient(
            135deg,
            rgba(38,15,74,.98),
            rgba(89,32,148,.96)
        );
    position:relative;
    overflow:hidden;
    display:flex;
    align-items:center;
}

.bf-change-pattern{
    position:absolute;
    inset:0;
    opacity:.12;
    background-image:
        radial-gradient(
            circle at 2px 2px,
            #fff 1.5px,
            transparent 1.5px
        );
    background-size:28px 28px;
}

.bf-change-left::before{
    content:"";
    position:absolute;
    width:330px;
    height:330px;
    border-radius:50%;
    border:75px solid rgba(255,255,255,.06);
    right:-170px;
    top:-130px;
}

.bf-change-left::after{
    content:"";
    position:absolute;
    width:180px;
    height:180px;
    border-radius:50%;
    background:linear-gradient(
        135deg,
        rgba(255,200,85,.25),
        rgba(255,120,95,.08)
    );
    left:-75px;
    bottom:-65px;
}

.bf-change-left-content{
    position:relative;
    z-index:2;
    max-width:650px;
}

.bf-change-label{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:11px 20px;
    border:1px solid rgba(255,255,255,.25);
    background:rgba(255,255,255,.09);
    border-radius:50px;
    color:#fff;
    font-size:14px;
    font-weight:700;
    letter-spacing:.4px;
    margin-bottom:28px;
}

.bf-change-label i{
    color:#ffd468;
    font-size:16px;
}

.bf-change-left h2{
    color:#fff;
    font-size:51px;
    line-height:1.13;
    font-weight:800;
    margin:0 0 18px;
    letter-spacing:-1.5px;
}

.bf-change-left h3{
    color:#ffd468;
    font-size:25px;
    font-weight:700;
    margin:0 0 24px;
}

.bf-change-left-content > p{
    color:rgba(255,255,255,.84);
    font-size:17px;
    line-height:1.85;
    margin:0;
    max-width:600px;
}

.bf-change-message{
    display:flex;
    align-items:flex-start;
    gap:18px;
    margin-top:32px;
    padding:24px 25px;
    border-left:4px solid #ffd468;
    background:rgba(255,255,255,.09);
    border-radius:0 18px 18px 0;
}

.bf-change-message-icon{
    color:#ffd468;
    font-size:23px;
    flex-shrink:0;
}

.bf-change-message p{
    color:#fff;
    font-size:17px;
    font-weight:600;
    line-height:1.65;
    margin:0;
}

.bf-change-values{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
    margin-top:34px;
}

.bf-change-values div{
    min-height:105px;
    padding:18px 12px;
    border:1px solid rgba(255,255,255,.18);
    background:rgba(255,255,255,.08);
    border-radius:18px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:10px;
    color:#fff;
    transition:.35s ease;
}

.bf-change-values div:hover{
    transform:translateY(-6px);
    background:rgba(255,255,255,.15);
    border-color:rgba(255,212,104,.65);
}

.bf-change-values i{
    color:#ffd468;
    font-size:24px;
}

.bf-change-values span{
    font-size:15px;
    font-weight:700;
}

/*====================================
  RIGHT SIDE
=====================================*/

.bf-change-right{
    padding:70px 52px;
    display:flex;
    align-items:center;
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbf9ff 100%
        );
}

.bf-change-right-content{
    width:100%;
}

.bf-change-small-title{
    display:inline-block;
    color:#672bad;
    font-size:14px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:1.8px;
    margin-bottom:12px;
}

.bf-change-right h3{
    color:#24113e;
    font-size:37px;
    line-height:1.25;
    font-weight:800;
    margin:0 0 16px;
}

.bf-change-right-content > p{
    color:#716b79;
    font-size:16px;
    line-height:1.75;
    margin:0 0 30px;
}

.bf-change-contact-list{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.bf-change-contact-item{
    display:grid;
    grid-template-columns:34px 54px minmax(0,1fr) 34px;
    align-items:center;
    gap:14px;
    padding:18px 16px;
    border:1px solid #e9e2f3;
    border-radius:18px;
    text-decoration:none;
    background:#fff;
    transition:.35s ease;
}

.bf-change-contact-item:hover{
    transform:translateX(8px);
    border-color:#7132b6;
    box-shadow:0 14px 30px rgba(77,34,129,.10);
}

.bf-change-number{
    color:#b7aabf;
    font-size:13px;
    font-weight:800;
}

.bf-change-contact-icon{
    width:52px;
    height:52px;
    border-radius:15px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#f1e8fb;
    color:#6428aa;
    font-size:19px;
    transition:.35s ease;
}

.bf-change-contact-item:hover .bf-change-contact-icon{
    color:#fff;
    background:linear-gradient(135deg,#672bad,#ff7c62);
}

.bf-change-contact-info{
    min-width:0;
}

.bf-change-contact-info small{
    display:block;
    color:#918999;
    font-size:12px;
    font-weight:600;
    margin-bottom:4px;
}

.bf-change-contact-info strong{
    display:block;
    color:#2e1946;
    font-size:14px;
    font-weight:750;
    overflow-wrap:anywhere;
}

.bf-change-arrow{
    width:32px;
    height:32px;
    border-radius:50%;
    background:#f5f0fa;
    color:#7132b6;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:12px;
    transition:.35s ease;
}

.bf-change-contact-item:hover .bf-change-arrow{
    color:#fff;
    background:#7132b6;
    transform:rotate(-35deg);
}

/* Donate Button */

.bf-change-donate-btn{
    margin-top:26px;
    padding:18px 20px 18px 24px;
    border-radius:18px;
    background:linear-gradient(135deg,#6327aa,#fa745f);
    color:#fff;
    text-decoration:none;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    box-shadow:0 16px 35px rgba(99,39,170,.25);
    transition:.35s ease;
}

.bf-change-donate-btn span{
    display:flex;
    flex-direction:column;
    font-size:18px;
    font-weight:800;
}

.bf-change-donate-btn small{
    color:rgba(255,255,255,.75);
    font-size:11px;
    font-weight:600;
    margin-bottom:3px;
}

.bf-change-donate-btn i{
    width:48px;
    height:48px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,.18);
    font-size:19px;
}

.bf-change-donate-btn:hover{
    color:#fff;
    transform:translateY(-5px);
    box-shadow:0 22px 42px rgba(99,39,170,.32);
}

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

@media(max-width:1100px){

    .bf-change-left{
        padding:60px 42px;
    }

    .bf-change-right{
        padding:60px 35px;
    }

    .bf-change-left h2{
        font-size:43px;
    }

    .bf-change-right h3{
        font-size:32px;
    }

}

@media(max-width:900px){

    .bf-change-container{
        grid-template-columns:1fr;
    }

    .bf-change-left{
        min-height:auto;
        padding:60px 45px;
    }

    .bf-change-right{
        padding:55px 45px;
    }

}

@media(max-width:576px){

    .bf-change-section{
        padding:55px 14px;
    }

    .bf-change-container{
        border-radius:23px;
    }

    .bf-change-left{
        padding:42px 22px;
    }

    .bf-change-right{
        padding:42px 20px;
    }

    .bf-change-label{
        font-size:12px;
        padding:9px 14px;
    }

    .bf-change-left h2{
        font-size:33px;
        letter-spacing:-.8px;
    }

    .bf-change-left h3{
        font-size:21px;
    }

    .bf-change-left-content > p,
    .bf-change-message p{
        font-size:15px;
    }

    .bf-change-message{
        padding:20px 17px;
    }

    .bf-change-values{
        grid-template-columns:1fr;
    }

    .bf-change-values div{
        min-height:80px;
        flex-direction:row;
    }

    .bf-change-right h3{
        font-size:29px;
    }

    .bf-change-contact-item{
        grid-template-columns:45px minmax(0,1fr) 30px;
        gap:12px;
        padding:15px 12px;
    }

    .bf-change-number{
        display:none;
    }

    .bf-change-contact-icon{
        width:45px;
        height:45px;
        border-radius:13px;
    }

    .bf-change-contact-info strong{
        font-size:13px;
    }

    .bf-change-donate-btn{
        padding:16px 16px 16px 20px;
    }

}

/*=========================================
    VOLUNTEER INTRO SECTION
=========================================*/

.bf-volunteer-intro{
    padding:100px 0;
    background:#f8f9fc;
    position:relative;
    overflow:hidden;
}

.bf-volunteer-intro::before{
    content:"";
    position:absolute;
    width:320px;
    height:320px;
    background:rgba(123,31,162,.06);
    border-radius:50%;
    top:-140px;
    left:-120px;
}

.bf-volunteer-intro::after{
    content:"";
    position:absolute;
    width:260px;
    height:260px;
    background:rgba(255,152,0,.08);
    border-radius:50%;
    bottom:-120px;
    right:-80px;
}

/*--------------------------
Section Heading
--------------------------*/

.bf-section-subtitle{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:10px 22px;
    background:linear-gradient(135deg,#6a1b9a,#ff6b6b);
    color:#fff;
    border-radius:50px;
    font-size:14px;
    font-weight:700;
    margin-bottom:22px;
    letter-spacing:.5px;
}

.bf-section-subtitle i{
    color:#ffd54f;
}

.bf-section-title{
    font-size:52px;
    font-weight:800;
    color:#2c0b4f;
    line-height:1.2;
    margin-bottom:25px;
}

.bf-section-title span{
    display:block;
    color:#ff6b35;
}

.bf-volunteer-intro p{
    font-size:17px;
    color:#666;
    line-height:1.9;
    margin-bottom:22px;
}

/*--------------------------
Button
--------------------------*/

.bf-primary-btn{
    display:inline-flex;
    align-items:center;
    gap:12px;
    padding:16px 34px;
    background:linear-gradient(135deg,#6a1b9a,#ff6b35);
    color:#fff;
    text-decoration:none;
    border-radius:60px;
    font-size:16px;
    font-weight:700;
    transition:.35s;
    box-shadow:0 15px 35px rgba(106,27,154,.25);
}

.bf-primary-btn:hover{
    color:#fff;
    transform:translateY(-5px);
}

.bf-primary-btn i{
    transition:.35s;
}

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

/*--------------------------
Right Card
--------------------------*/

.bf-volunteer-card{
    background:#fff;
    border-radius:25px;
    padding:45px;
    box-shadow:0 20px 60px rgba(0,0,0,.08);
    border-top:6px solid #6a1b9a;
    position:relative;
    overflow:hidden;
}

.bf-volunteer-card::before{
    content:"";
    position:absolute;
    width:130px;
    height:130px;
    background:rgba(255,107,53,.08);
    border-radius:50%;
    top:-40px;
    right:-40px;
}

.bf-volunteer-card h3{
    font-size:32px;
    font-weight:800;
    color:#2c0b4f;
    margin-bottom:30px;
}

.bf-volunteer-list{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.bf-volunteer-item{
    display:flex;
    align-items:flex-start;
    gap:16px;
    padding:16px 18px;
    background:#faf8fd;
    border:1px solid #ece8f5;
    border-radius:15px;
    transition:.35s;
}

.bf-volunteer-item:hover{
    transform:translateX(8px);
    border-color:#6a1b9a;
    box-shadow:0 12px 25px rgba(106,27,154,.08);
}

.bf-volunteer-item i{
    color:#28a745;
    font-size:22px;
    margin-top:2px;
    flex-shrink:0;
}

.bf-volunteer-item span{
    font-size:16px;
    color:#444;
    line-height:1.7;
    font-weight:500;
}

/*--------------------------
Responsive
--------------------------*/

@media(max-width:991px){

    .bf-volunteer-intro{
        padding:80px 0;
    }

    .bf-section-title{
        font-size:40px;
    }

    .bf-volunteer-card{
        margin-top:20px;
        padding:35px;
    }

}

@media(max-width:767px){

    .bf-volunteer-intro{
        padding:60px 0;
    }

    .bf-section-title{
        font-size:32px;
    }

    .bf-section-title span{
        display:inline;
    }

    .bf-volunteer-intro p{
        font-size:16px;
    }

    .bf-primary-btn{
        width:100%;
        justify-content:center;
    }

    .bf-volunteer-card{
        padding:25px;
    }

    .bf-volunteer-card h3{
        font-size:26px;
    }

    .bf-volunteer-item{
        padding:14px;
    }

    .bf-volunteer-item span{
        font-size:15px;
    }

}

/* =========================================
   COMMON VOLUNTEER STYLES
========================================== */

.bf-volunteer-story,
.bf-volunteer-benefits{
    position:relative;
    overflow:hidden;
}

.bf-volunteer-story *,
.bf-volunteer-benefits *{
    box-sizing:border-box;
}

.bf-volunteer-tag{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:10px 19px;
    border-radius:50px;
    background:linear-gradient(135deg,#6826a5,#ed6c68);
    color:#fff;
    font-size:14px;
    font-weight:700;
    letter-spacing:.4px;
    margin-bottom:20px;
    box-shadow:0 10px 25px rgba(104,38,165,.18);
}

.bf-volunteer-tag i{
    color:#ffe06b;
}

.bf-volunteer-tag-light{
    background:#f1e9fb;
    color:#6526a1;
    box-shadow:none;
}

.bf-volunteer-tag-light i{
    color:#ed6b68;
}


/* =========================================
   SECTION ONE
========================================== */

.bf-volunteer-story{
    padding:95px 0;
    background:
        radial-gradient(circle at 8% 10%,rgba(105,39,164,.08),transparent 28%),
        radial-gradient(circle at 95% 85%,rgba(241,111,91,.10),transparent 26%),
        #ffffff;
}

.bf-volunteer-story-grid{
    display:grid;
    grid-template-columns:1fr .92fr;
    align-items:center;
    gap:75px;
}

.bf-volunteer-story-content h2{
    margin:0 0 24px;
    color:#291041;
    font-size:52px;
    line-height:1.15;
    font-weight:850;
    letter-spacing:-1.4px;
}

.bf-volunteer-story-content h2 span{
    display:block;
    color:#ef6c59;
}

.bf-volunteer-story-content > p{
    margin:0 0 18px;
    color:#665f6b;
    font-size:17px;
    line-height:1.85;
}

.bf-volunteer-story-content strong{
    color:#4f1e7c;
}

.bf-volunteer-highlights{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:15px;
    margin:30px 0;
}

.bf-volunteer-highlight-item{
    min-height:92px;
    display:flex;
    align-items:center;
    gap:14px;
    padding:16px;
    border:1px solid #eee6f5;
    background:#fbf9fd;
    border-radius:18px;
    transition:.35s ease;
}

.bf-volunteer-highlight-item:hover{
    transform:translateY(-5px);
    border-color:#c9aee4;
    box-shadow:0 15px 30px rgba(80,32,125,.08);
}

.bf-volunteer-highlight-icon{
    width:50px;
    height:50px;
    flex-shrink:0;
    border-radius:15px;
    background:linear-gradient(135deg,#6928a8,#ef705e);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:19px;
}

.bf-volunteer-highlight-item strong{
    display:block;
    color:#321548;
    font-size:15px;
    margin-bottom:4px;
}

.bf-volunteer-highlight-item small{
    display:block;
    color:#847c89;
    font-size:12px;
    line-height:1.5;
}

.bf-volunteer-btn{
    display:inline-flex;
    align-items:center;
    gap:15px;
    padding:10px 11px 10px 26px;
    border-radius:60px;
    background:linear-gradient(135deg,#6425a2,#ef705e);
    color:#fff;
    text-decoration:none;
    font-size:16px;
    font-weight:750;
    box-shadow:0 15px 35px rgba(100,37,162,.23);
    transition:.35s ease;
}

.bf-volunteer-btn span{
    width:43px;
    height:43px;
    border-radius:50%;
    background:#fff;
    color:#6526a2;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.35s ease;
}

.bf-volunteer-btn:hover{
    color:#fff;
    transform:translateY(-5px);
    box-shadow:0 21px 40px rgba(100,37,162,.30);
}

.bf-volunteer-btn:hover span{
    transform:translateX(4px);
}


/* Section One Image */

.bf-volunteer-story-visual{
    position:relative;
    max-width:530px;
    margin-left:auto;
    padding:25px 22px 32px 32px;
}

.bf-volunteer-image-shape{
    position:absolute;
    inset:0 20px 15px 5px;
    border-radius:45px 120px 45px 45px;
    background:linear-gradient(135deg,#6827a5,#ec6b69,#f1a64a);
    transform:rotate(-4deg);
}

.bf-volunteer-main-image{
    position:relative;
    height:510px;
    border-radius:42px 110px 42px 42px;
    overflow:hidden;
    box-shadow:0 28px 60px rgba(55,22,81,.22);
    z-index:2;
}

.bf-volunteer-main-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:.6s ease;
}

.bf-volunteer-story-visual:hover .bf-volunteer-main-image img{
    transform:scale(1.05);
}

.bf-volunteer-main-image::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,transparent 55%,rgba(44,13,67,.35));
}

.bf-volunteer-impact-card{
    position:absolute;
    z-index:4;
    background:rgba(255,255,255,.96);
    box-shadow:0 18px 40px rgba(36,13,53,.18);
}

.bf-impact-card-one{
    left:-15px;
    bottom:72px;
    max-width:285px;
    padding:16px;
    border-radius:18px;
    display:flex;
    align-items:center;
    gap:13px;
}

.bf-impact-card-one .bf-impact-card-icon{
    width:52px;
    height:52px;
    flex-shrink:0;
    border-radius:15px;
    background:linear-gradient(135deg,#6928a8,#ef705e);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
}

.bf-impact-card-one strong{
    display:block;
    color:#301344;
    font-size:15px;
    margin-bottom:3px;
}

.bf-impact-card-one small{
    display:block;
    color:#7d7581;
    font-size:11px;
    line-height:1.45;
}

.bf-impact-card-two{
    top:0;
    right:0;
    padding:13px 17px;
    border-radius:50px;
    display:flex;
    align-items:center;
    gap:7px;
    color:#6526a2;
    font-size:11px;
}

.bf-impact-card-two strong{
    color:#6526a2;
}


/* =========================================
   SECTION TWO
========================================== */

.bf-volunteer-benefits{
    padding:100px 0;
    background:#f7f4fb;
}

.bf-volunteer-benefits::before{
    content:"";
    position:absolute;
    width:370px;
    height:370px;
    top:-190px;
    right:-180px;
    border-radius:50%;
    background:rgba(237,108,89,.08);
}

.bf-volunteer-benefits-grid{
    display:grid;
    grid-template-columns:.83fr 1.17fr;
    align-items:center;
    gap:70px;
    position:relative;
    z-index:2;
}


/* Section Two Image */

.bf-volunteer-benefits-visual{
    position:relative;
    max-width:470px;
}

.bf-benefits-image{
    position:relative;
    height:630px;
    border-radius:120px 34px 120px 34px;
    overflow:hidden;
    box-shadow:0 28px 65px rgba(48,22,67,.18);
    z-index:2;
}

.bf-benefits-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:.6s ease;
}

.bf-volunteer-benefits-visual:hover .bf-benefits-image img{
    transform:scale(1.05);
}

.bf-benefits-image::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,transparent 60%,rgba(43,13,62,.45));
}

.bf-benefits-floating-box{
    position:absolute;
    left:30px;
    right:-35px;
    bottom:35px;
    z-index:4;
    padding:17px;
    border-radius:19px;
    background:#fff;
    display:flex;
    align-items:center;
    gap:14px;
    box-shadow:0 18px 40px rgba(39,13,55,.20);
}

.bf-benefits-floating-box > span{
    width:55px;
    height:55px;
    flex-shrink:0;
    border-radius:17px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    background:linear-gradient(135deg,#4aa76e,#73c78f);
    font-size:22px;
}

.bf-benefits-floating-box strong{
    display:block;
    color:#301345;
    font-size:16px;
    margin-bottom:4px;
}

.bf-benefits-floating-box small{
    display:block;
    color:#7c7480;
    font-size:12px;
    line-height:1.5;
}

.bf-benefits-decoration{
    position:absolute;
    width:150px;
    height:150px;
    left:-45px;
    top:-35px;
    border-radius:50%;
    border:30px solid rgba(105,40,168,.10);
}


/* Section Two Content */

.bf-volunteer-benefits-content h2{
    margin:0 0 18px;
    color:#291041;
    font-size:46px;
    line-height:1.2;
    font-weight:850;
    letter-spacing:-1px;
}

.bf-volunteer-benefits-content h2 span{
    display:block;
    color:#ef6c59;
}

.bf-benefits-intro{
    max-width:690px;
    margin:0 0 28px;
    color:#6e6773;
    font-size:16px;
    line-height:1.8;
}

.bf-benefits-list{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
}

.bf-benefit-card{
    min-height:128px;
    display:flex;
    align-items:flex-start;
    gap:14px;
    padding:18px;
    background:#fff;
    border:1px solid #e9e2ef;
    border-radius:18px;
    transition:.35s ease;
}

.bf-benefit-card:hover{
    transform:translateY(-6px);
    border-color:#b78bd5;
    box-shadow:0 16px 35px rgba(91,36,135,.10);
}

.bf-benefit-icon{
    width:49px;
    height:49px;
    flex-shrink:0;
    border-radius:15px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#f0e7fa;
    color:#6726a4;
    font-size:18px;
    transition:.35s ease;
}

.bf-benefit-card:hover .bf-benefit-icon{
    color:#fff;
    background:linear-gradient(135deg,#6928a8,#ef705e);
}

.bf-benefit-card h3{
    margin:0 0 6px;
    color:#311646;
    font-size:16px;
    font-weight:750;
}

.bf-benefit-card p{
    margin:0;
    color:#7c7580;
    font-size:13px;
    line-height:1.55;
}


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

@media(max-width:1100px){

    .bf-volunteer-story-grid,
    .bf-volunteer-benefits-grid{
        gap:45px;
    }

    .bf-volunteer-story-content h2{
        font-size:44px;
    }

    .bf-volunteer-benefits-content h2{
        font-size:39px;
    }

    .bf-volunteer-main-image{
        height:470px;
    }

    .bf-benefits-image{
        height:600px;
    }

}

@media(max-width:991px){

    .bf-volunteer-story,
    .bf-volunteer-benefits{
        padding:80px 0;
    }

    .bf-volunteer-story-grid,
    .bf-volunteer-benefits-grid{
        grid-template-columns:1fr;
    }

    .bf-volunteer-story-visual{
        width:100%;
        max-width:650px;
        margin:20px auto 0;
    }

    .bf-volunteer-benefits-visual{
        width:100%;
        max-width:620px;
        margin:0 auto;
    }

    .bf-benefits-image{
        height:520px;
    }

    .bf-volunteer-benefits-content{
        order:-1;
    }

}

@media(max-width:767px){

    .bf-volunteer-story,
    .bf-volunteer-benefits{
        padding:65px 0;
    }

    .bf-volunteer-story-content h2,
    .bf-volunteer-benefits-content h2{
        font-size:34px;
    }

    .bf-volunteer-story-content > p,
    .bf-benefits-intro{
        font-size:15px;
        line-height:1.75;
    }

    .bf-volunteer-highlights,
    .bf-benefits-list{
        grid-template-columns:1fr;
    }

    .bf-volunteer-highlight-item{
        min-height:82px;
    }

    .bf-volunteer-story-visual{
        padding:20px 5px 20px 12px;
    }

    .bf-volunteer-main-image{
        height:420px;
        border-radius:30px 75px 30px 30px;
    }

    .bf-volunteer-image-shape{
        border-radius:34px 85px 34px 34px;
    }

    .bf-impact-card-one{
        left:0;
        bottom:45px;
    }

    .bf-impact-card-two{
        right:5px;
    }

    .bf-benefits-image{
        height:470px;
        border-radius:75px 28px 75px 28px;
    }

    .bf-benefits-floating-box{
        left:15px;
        right:15px;
        bottom:20px;
    }

    .bf-benefit-card{
        min-height:auto;
    }

}

@media(max-width:480px){

    .bf-volunteer-story-content h2,
    .bf-volunteer-benefits-content h2{
        font-size:30px;
    }

    .bf-volunteer-tag{
        font-size:12px;
        padding:9px 14px;
    }

    .bf-volunteer-btn{
        width:100%;
        justify-content:space-between;
    }

    .bf-volunteer-main-image{
        height:360px;
    }

    .bf-impact-card-one{
        max-width:245px;
        padding:12px;
    }

    .bf-impact-card-two{
        display:none;
    }

    .bf-benefits-image{
        height:410px;
    }

    .bf-benefits-floating-box{
        padding:13px;
    }

    .bf-benefits-floating-box > span{
        width:48px;
        height:48px;
    }

}
/*==========================================
  VOLUNTEER SECTION - FINAL SPACING FIX
==========================================*/

.bf-volunteer-story .container,
.bf-volunteer-benefits .container{
    max-width:1320px;
    margin:0 auto;
    padding-left:30px;
    padding-right:30px;
}

.bf-volunteer-story-grid,
.bf-volunteer-benefits-grid{
    max-width:1180px;
    margin:0 auto;
}

.bf-volunteer-story-content,
.bf-volunteer-benefits-content{
    max-width:560px;
}

.bf-volunteer-story-visual,
.bf-volunteer-benefits-visual{
    max-width:500px;
    width:100%;
    margin-left:auto;
    margin-right:auto;
}

/* Tablet */

@media (max-width:991px){

    .bf-volunteer-story .container,
    .bf-volunteer-benefits .container{
        padding-left:25px;
        padding-right:25px;
    }

    .bf-volunteer-story-grid,
    .bf-volunteer-benefits-grid{
        max-width:100%;
    }

    .bf-volunteer-story-content,
    .bf-volunteer-benefits-content{
        max-width:100%;
    }

    .bf-volunteer-story-visual,
    .bf-volunteer-benefits-visual{
        max-width:650px;
        margin:40px auto 0;
    }

}

/* Mobile */

@media (max-width:767px){

    .bf-volunteer-story .container,
    .bf-volunteer-benefits .container{
        padding-left:18px;
        padding-right:18px;
    }

    .bf-volunteer-story-visual,
    .bf-volunteer-benefits-visual{
        max-width:100%;
        margin-top:35px;
    }

}

/* Small Mobile */

@media (max-width:480px){

    .bf-volunteer-story .container,
    .bf-volunteer-benefits .container{
        padding-left:15px;
        padding-right:15px;
    }

}

/*==========================================
  COMMON VOLUNTEER SECTION STYLES
==========================================*/

.bf-volunteer-areas,
.bf-volunteer-join{
    position:relative;
    overflow:hidden;
}

.bf-volunteer-areas *,
.bf-volunteer-join *{
    box-sizing:border-box;
}

.bf-volunteer-areas .container,
.bf-volunteer-join .container{
    width:100%;
    max-width:1240px;
    margin:0 auto;
    padding-left:24px;
    padding-right:24px;
}

.bf-volunteer-section-tag{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:10px 19px;
    border-radius:50px;
    background:linear-gradient(135deg,#6728a3,#ee705f);
    color:#fff;
    font-size:14px;
    font-weight:700;
    letter-spacing:.4px;
    box-shadow:0 12px 28px rgba(103,40,163,.18);
}

.bf-volunteer-section-tag i{
    color:#ffe16b;
}

.bf-volunteer-section-tag-light{
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.18);
    box-shadow:none;
}


/*==========================================
  SECTION ONE: VOLUNTEER AREAS
==========================================*/

.bf-volunteer-areas{
    padding:95px 0;
    background:
        radial-gradient(circle at 10% 8%,rgba(103,40,163,.08),transparent 25%),
        radial-gradient(circle at 92% 85%,rgba(238,112,95,.10),transparent 26%),
        #f8f6fb;
}

.bf-volunteer-areas::before{
    content:"";
    position:absolute;
    width:330px;
    height:330px;
    top:-185px;
    right:-150px;
    border-radius:50%;
    border:70px solid rgba(103,40,163,.05);
}

.bf-volunteer-areas-header{
    max-width:760px;
    margin:0 auto 48px;
    text-align:center;
    position:relative;
    z-index:2;
}

.bf-volunteer-areas-header h2{
    margin:19px 0 16px;
    color:#29103f;
    font-size:49px;
    line-height:1.16;
    font-weight:850;
    letter-spacing:-1.3px;
}

.bf-volunteer-areas-header h2 span{
    color:#ef6e59;
}

.bf-volunteer-areas-header p{
    margin:0 auto;
    color:#716a76;
    font-size:17px;
    line-height:1.8;
}

.bf-volunteer-areas-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px;
    position:relative;
    z-index:2;
}

.bf-volunteer-area-card{
    min-height:275px;
    padding:30px 26px 26px;
    position:relative;
    overflow:hidden;
    border-radius:24px;
    border:1px solid #e9e2ef;
    background:rgba(255,255,255,.96);
    box-shadow:0 13px 35px rgba(61,27,85,.07);
    transition:.4s ease;
}

.bf-volunteer-area-card::before{
    content:"";
    position:absolute;
    inset:auto 0 0 0;
    height:5px;
    background:linear-gradient(90deg,#6728a3,#ee705f,#efa83f);
    transform:scaleX(0);
    transform-origin:left;
    transition:.4s ease;
}

.bf-volunteer-area-card::after{
    content:"";
    position:absolute;
    width:120px;
    height:120px;
    top:-65px;
    right:-55px;
    border-radius:50%;
    background:rgba(103,40,163,.05);
    transition:.4s ease;
}

.bf-volunteer-area-card:hover{
    transform:translateY(-9px);
    border-color:rgba(103,40,163,.28);
    box-shadow:0 24px 50px rgba(61,27,85,.13);
}

.bf-volunteer-area-card:hover::before{
    transform:scaleX(1);
}

.bf-volunteer-area-card:hover::after{
    transform:scale(1.25);
    background:rgba(238,112,95,.08);
}

.bf-volunteer-area-number{
    position:absolute;
    right:23px;
    top:20px;
    color:#d8cedf;
    font-size:15px;
    font-weight:850;
    letter-spacing:1px;
}

.bf-volunteer-area-icon{
    width:66px;
    height:66px;
    margin-bottom:22px;
    border-radius:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#f1e8fa;
    color:#6728a3;
    font-size:25px;
    transition:.4s ease;
}

.bf-volunteer-area-card:hover .bf-volunteer-area-icon{
    background:linear-gradient(135deg,#6728a3,#ee705f);
    color:#fff;
    transform:rotate(-5deg) scale(1.06);
    box-shadow:0 13px 26px rgba(103,40,163,.2);
}

.bf-volunteer-area-card h3{
    margin:0 0 11px;
    color:#301444;
    font-size:20px;
    line-height:1.35;
    font-weight:800;
}

.bf-volunteer-area-card p{
    margin:0;
    color:#766f7b;
    font-size:14px;
    line-height:1.7;
}


/*==========================================
  SECTION TWO: WHO CAN JOIN
==========================================*/

.bf-volunteer-join{
    padding:100px 0;
    background:
        linear-gradient(
            135deg,
            #2e1052 0%,
            #5e2392 48%,
            #bb477c 100%
        );
}

.bf-volunteer-join::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:
        radial-gradient(
            circle at 2px 2px,
            rgba(255,255,255,.11) 1.3px,
            transparent 1.3px
        );
    background-size:31px 31px;
    opacity:.25;
}

.bf-volunteer-join::after{
    content:"";
    position:absolute;
    width:390px;
    height:390px;
    right:-190px;
    bottom:-210px;
    border-radius:50%;
    background:rgba(246,178,73,.12);
}

.bf-volunteer-join-wrapper{
    display:grid;
    grid-template-columns:.88fr 1.12fr;
    align-items:center;
    gap:75px;
    position:relative;
    z-index:2;
}

.bf-volunteer-join-content h2{
    margin:20px 0 21px;
    color:#fff;
    font-size:50px;
    line-height:1.16;
    font-weight:850;
    letter-spacing:-1.2px;
}

.bf-volunteer-join-content h2 span{
    display:block;
    color:#ffe16b;
}

.bf-volunteer-join-content > p{
    margin:0 0 17px;
    color:rgba(255,255,255,.84);
    font-size:17px;
    line-height:1.82;
}

.bf-volunteer-join-note{
    display:flex;
    align-items:center;
    gap:15px;
    margin:30px 0;
    padding:20px;
    border-radius:19px;
    border:1px solid rgba(255,255,255,.17);
    background:rgba(255,255,255,.10);
    backdrop-filter:blur(10px);
}

.bf-volunteer-join-note > span{
    width:55px;
    height:55px;
    flex-shrink:0;
    border-radius:17px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#ffe16b;
    color:#5c228e;
    font-size:21px;
}

.bf-volunteer-join-note strong{
    display:block;
    color:#fff;
    font-size:15px;
    line-height:1.45;
    margin-bottom:4px;
}

.bf-volunteer-join-note small{
    display:block;
    color:rgba(255,255,255,.72);
    font-size:12px;
    line-height:1.55;
}

.bf-volunteer-join-btn{
    display:inline-flex;
    align-items:center;
    gap:17px;
    padding:10px 11px 10px 26px;
    border-radius:60px;
    background:#fff;
    color:#5d228e;
    text-decoration:none;
    font-size:16px;
    font-weight:800;
    box-shadow:0 16px 35px rgba(28,7,47,.22);
    transition:.35s ease;
}

.bf-volunteer-join-btn > span{
    width:43px;
    height:43px;
    border-radius:50%;
    background:linear-gradient(135deg,#6728a3,#ee705f);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.35s ease;
}

.bf-volunteer-join-btn:hover{
    color:#5d228e;
    transform:translateY(-5px);
}

.bf-volunteer-join-btn:hover > span{
    transform:translateX(4px);
}


/* Who Can Join Cards */

.bf-volunteer-join-types{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
}

.bf-volunteer-join-card{
    min-height:145px;
    padding:22px;
    border-radius:21px;
    border:1px solid rgba(255,255,255,.17);
    background:rgba(255,255,255,.11);
    backdrop-filter:blur(12px);
    color:#fff;
    transition:.4s ease;
}

.bf-volunteer-join-card:hover{
    transform:translateY(-7px);
    background:rgba(255,255,255,.18);
    border-color:rgba(255,225,107,.55);
    box-shadow:0 18px 38px rgba(30,7,50,.18);
}

.bf-volunteer-join-card-icon{
    width:51px;
    height:51px;
    margin-bottom:16px;
    border-radius:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,225,107,.16);
    color:#ffe16b;
    font-size:20px;
    transition:.4s ease;
}

.bf-volunteer-join-card:hover .bf-volunteer-join-card-icon{
    background:#ffe16b;
    color:#5d228e;
    transform:rotate(-5deg);
}

.bf-volunteer-join-card strong{
    display:block;
    margin-bottom:6px;
    color:#fff;
    font-size:17px;
    font-weight:800;
}

.bf-volunteer-join-card small{
    display:block;
    color:rgba(255,255,255,.72);
    font-size:12px;
    line-height:1.55;
}

.bf-volunteer-join-card-wide{
    grid-column:1 / -1;
    min-height:115px;
    display:flex;
    align-items:center;
    gap:18px;
}

.bf-volunteer-join-card-wide .bf-volunteer-join-card-icon{
    margin:0;
    flex-shrink:0;
}


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

@media(max-width:1100px){

    .bf-volunteer-areas-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .bf-volunteer-join-wrapper{
        gap:45px;
    }

    .bf-volunteer-join-content h2{
        font-size:43px;
    }

}

@media(max-width:991px){

    .bf-volunteer-areas,
    .bf-volunteer-join{
        padding:80px 0;
    }

    .bf-volunteer-join-wrapper{
        grid-template-columns:1fr;
    }

    .bf-volunteer-join-content{
        max-width:760px;
    }

    .bf-volunteer-join-types{
        width:100%;
    }

}

@media(max-width:767px){

    .bf-volunteer-areas,
    .bf-volunteer-join{
        padding:65px 0;
    }

    .bf-volunteer-areas .container,
    .bf-volunteer-join .container{
        padding-left:18px;
        padding-right:18px;
    }

    .bf-volunteer-areas-header{
        margin-bottom:35px;
    }

    .bf-volunteer-areas-header h2,
    .bf-volunteer-join-content h2{
        font-size:35px;
    }

    .bf-volunteer-areas-header p,
    .bf-volunteer-join-content > p{
        font-size:15px;
        line-height:1.75;
    }

    .bf-volunteer-area-card{
        min-height:auto;
    }

}

@media(max-width:600px){

    .bf-volunteer-areas-grid,
    .bf-volunteer-join-types{
        grid-template-columns:1fr;
    }

    .bf-volunteer-join-card-wide{
        grid-column:auto;
    }

    .bf-volunteer-join-card{
        min-height:auto;
    }

}

@media(max-width:480px){

    .bf-volunteer-section-tag{
        padding:9px 14px;
        font-size:12px;
    }

    .bf-volunteer-areas-header h2,
    .bf-volunteer-join-content h2{
        font-size:30px;
    }

    .bf-volunteer-area-card{
        padding:25px 21px 22px;
    }

    .bf-volunteer-area-icon{
        width:58px;
        height:58px;
        font-size:22px;
    }

    .bf-volunteer-join-note{
        align-items:flex-start;
        padding:16px;
    }

    .bf-volunteer-join-btn{
        width:100%;
        justify-content:space-between;
    }

    .bf-volunteer-join-card-wide{
        align-items:flex-start;
    }

}

/*==========================================
  VOLUNTEER FINAL CTA
==========================================*/

.bf-volunteer-cta{
    padding:80px 0;
    position:relative;
    overflow:hidden;
    background:#f7f4fb;
}

.bf-volunteer-cta *,
.bf-volunteer-cta *::before,
.bf-volunteer-cta *::after{
    box-sizing:border-box;
}

.bf-volunteer-cta .container{
    width:100%;
    max-width:1240px;
    margin:0 auto;
    padding-left:24px;
    padding-right:24px;
}

.bf-volunteer-cta-wrapper{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:1.25fr .75fr;
    align-items:center;
    gap:55px;
    padding:58px 62px;
    border-radius:32px;
    overflow:hidden;
    background:
        linear-gradient(
            135deg,
            #321055 0%,
            #67259c 48%,
            #c44e7b 78%,
            #ef785d 100%
        );
    box-shadow:0 28px 70px rgba(58,20,89,.22);
}

.bf-volunteer-cta-wrapper::before{
    content:"";
    position:absolute;
    width:360px;
    height:360px;
    top:-230px;
    right:-120px;
    border-radius:50%;
    border:75px solid rgba(255,255,255,.07);
}

.bf-volunteer-cta-wrapper::after{
    content:"";
    position:absolute;
    width:230px;
    height:230px;
    bottom:-140px;
    left:-90px;
    border-radius:50%;
    background:rgba(78,196,126,.13);
}

.bf-volunteer-cta-content,
.bf-volunteer-cta-action{
    position:relative;
    z-index:2;
}

.bf-volunteer-cta-tag{
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin-bottom:20px;
    padding:10px 18px;
    border:1px solid rgba(255,255,255,.2);
    border-radius:50px;
    background:rgba(255,255,255,.11);
    color:#fff;
    font-size:14px;
    font-weight:700;
    letter-spacing:.3px;
}

.bf-volunteer-cta-tag i{
    color:#ffe16b;
}

.bf-volunteer-cta-content h2{
    margin:0 0 18px;
    color:#fff;
    font-size:48px;
    line-height:1.16;
    font-weight:850;
    letter-spacing:-1.2px;
}

.bf-volunteer-cta-content h2 span{
    display:block;
    color:#ffe16b;
}

.bf-volunteer-cta-content p{
    max-width:700px;
    margin:0;
    color:rgba(255,255,255,.85);
    font-size:17px;
    line-height:1.8;
}

.bf-volunteer-cta-action{
    padding:30px;
    border:1px solid rgba(255,255,255,.17);
    border-radius:24px;
    background:rgba(255,255,255,.1);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
}

.bf-volunteer-register-btn{
    width:100%;
    min-height:78px;
    padding:14px 16px 14px 23px;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    background:#fff;
    color:#5e218f;
    text-decoration:none;
    box-shadow:0 16px 38px rgba(34,8,53,.2);
    transition:.35s ease;
}

.bf-volunteer-register-btn span{
    display:flex;
    flex-direction:column;
    font-size:17px;
    font-weight:800;
    line-height:1.3;
}

.bf-volunteer-register-btn small{
    margin-bottom:3px;
    color:#93869c;
    font-size:11px;
    font-weight:650;
}

.bf-volunteer-register-btn > i{
    width:48px;
    height:48px;
    flex-shrink:0;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,#67259c,#ef785d);
    color:#fff;
    font-size:15px;
    transition:.35s ease;
}

.bf-volunteer-register-btn:hover{
    color:#5e218f;
    transform:translateY(-5px);
    box-shadow:0 22px 45px rgba(34,8,53,.27);
}

.bf-volunteer-register-btn:hover > i{
    transform:translateX(4px);
}

.bf-volunteer-cta-action > p{
    margin:17px 0 0;
    color:rgba(255,255,255,.8);
    font-size:13px;
    line-height:1.6;
    text-align:center;
}

.bf-volunteer-cta-action > p i{
    margin-right:6px;
    color:#ffe16b;
}

/* Tablet */

@media(max-width:991px){

    .bf-volunteer-cta{
        padding:70px 0;
    }

    .bf-volunteer-cta-wrapper{
        grid-template-columns:1fr;
        gap:32px;
        padding:50px 42px;
    }

    .bf-volunteer-cta-content{
        max-width:760px;
    }

    .bf-volunteer-cta-action{
        max-width:520px;
        width:100%;
    }

}

/* Mobile */

@media(max-width:767px){

    .bf-volunteer-cta{
        padding:55px 0;
    }

    .bf-volunteer-cta .container{
        padding-left:18px;
        padding-right:18px;
    }

    .bf-volunteer-cta-wrapper{
        padding:40px 24px;
        border-radius:24px;
    }

    .bf-volunteer-cta-content h2{
        font-size:35px;
    }

    .bf-volunteer-cta-content p{
        font-size:15px;
        line-height:1.75;
    }

    .bf-volunteer-cta-action{
        padding:22px;
    }

}

/* Small Mobile */

@media(max-width:480px){

    .bf-volunteer-cta-wrapper{
        padding:34px 18px;
    }

    .bf-volunteer-cta-tag{
        padding:9px 13px;
        font-size:12px;
    }

    .bf-volunteer-cta-content h2{
        font-size:30px;
    }

    .bf-volunteer-register-btn{
        min-height:72px;
        padding-left:18px;
    }

    .bf-volunteer-register-btn span{
        font-size:15px;
    }

    .bf-volunteer-register-btn > i{
        width:43px;
        height:43px;
    }

}

/*==========================================
  GLOBAL WHITE SPACE / SECTION GAP FIX
==========================================*/

html,
body{
    margin:0 !important;
    padding:0 !important;
    width:100%;
    overflow-x:hidden;
}

/* Remove default paragraph and heading bottom gaps */
h1,
h2,
h3,
h4,
h5,
h6,
p{
    margin-top:0;
}

/* Remove accidental space between sections */
section{
    margin-top:0 !important;
    margin-bottom:0 !important;
}

/* Remove empty sections creating height */
section:empty {
    display: none;
}

/* Remove Bootstrap top and bottom margin utilities */
.mt-1,
.mt-2,
.mt-3,
.mt-4,
.mt-5,
.mb-1,
.mb-2,
.mb-3,
.mb-4,
.mb-5,
.my-1,
.my-2,
.my-3,
.my-4,
.my-5{
    margin-top:0 !important;
    margin-bottom:0 !important;
}

/* Remove extra Bootstrap vertical padding when required */
.py-1,
.py-2,
.py-3,
.py-4,
.py-5{
    padding-top:0 !important;
    padding-bottom:0 !important;
}

/* Prevent images from creating inline bottom gaps */
img{
    display:block;
    max-width:100%;
}

/* Remove spacing around footer */
footer{
    margin-top:0 !important;
}

/* Fix gap before footer */
main,
.page-wrapper,
.site-content,
.content-wrapper{
    margin-bottom:0 !important;
    padding-bottom:0 !important;
}

/* Remove last section bottom spacing */
main > section:last-child,
.page-wrapper > section:last-child,
.site-content > section:last-child{
    margin-bottom:0 !important;
    padding-bottom:0 !important;
}


/* ==========================================
   VOLUNTEER REGISTRATION FORM  —  bf-vf-*
   Full-width two-panel layout
========================================== */

.bf-vf-section {
    position: relative;
    width: 100%;
    padding: 0;
    background: #faf6fc;
    overflow: hidden;
}

.bf-vf-section::before {
    content: "";
    position: absolute;
    top: -120px;
    right: -120px;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(237,41,109,0.07) 0%, transparent 70%);
    pointer-events: none;
}

/* ---- Two-panel wrapper ---- */
.bf-vf-wrap {
    display: grid;
    grid-template-columns: 380px 1fr;
    min-height: 100%;
}

/* ---- LEFT PANEL ---- */
.bf-vf-left {
    position: relative;
    background: linear-gradient(160deg, #2d0845 0%, #50156f 55%, #7b1fa2 100%);
    padding: 64px 48px;
    display: flex;
    align-items: flex-start;
}

.bf-vf-left::after {
    content: "";
    position: absolute;
    bottom: -60px;
    right: -60px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    border: 40px solid rgba(255,255,255,0.05);
    pointer-events: none;
}

.bf-vf-left-inner {
    position: relative;
    z-index: 2;
}

.bf-vf-left-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 30px;
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.9);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    margin-bottom: 22px;
}

.bf-vf-left h2 {
    margin: 0 0 16px;
    color: #ffffff;
    font-size: 32px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -0.8px;
}

.bf-vf-left h2 strong {
    display: block;
    color: #ffce54;
    font-weight: 800;
}

.bf-vf-left > div > p,
.bf-vf-left-inner > p {
    margin: 0 0 28px;
    color: rgba(255,255,255,0.75);
    font-size: 14.5px;
    line-height: 1.75;
    font-weight: 500;
}

/* checklist */
.bf-vf-left-points {
    list-style: none;
    margin: 0 0 36px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.bf-vf-left-points li {
    display: flex;
    align-items: center;
    gap: 11px;
    color: rgba(255,255,255,0.88);
    font-size: 14px;
    font-weight: 600;
}

.bf-vf-left-points li span {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    color: #ffce54;
    font-size: 11px;
}

/* security badge */
.bf-vf-left-badge {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 16px 18px;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 14px;
    background: rgba(255,255,255,0.07);
    backdrop-filter: blur(6px);
}

.bf-vf-left-badge > i {
    font-size: 22px;
    color: #ffce54;
    flex-shrink: 0;
}

.bf-vf-left-badge strong {
    display: block;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 2px;
}

.bf-vf-left-badge small {
    color: rgba(255,255,255,0.6);
    font-size: 12px;
    line-height: 1.4;
}

/* ---- RIGHT FORM PANEL ---- */
.bf-vf-right {
    background: #ffffff;
    padding: 52px 56px;
    overflow-y: auto;
}

/* ---- FORM SHELL ---- */
.bf-vf-form {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ---- ROWS ---- */
.bf-vf-row {
    display: grid;
    gap: 20px;
    margin-bottom: 20px;
}

.bf-vf-row-2 {
    grid-template-columns: 1fr 1fr;
}

/* ---- FIELD ---- */
.bf-vf-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 20px;
}

/* reset margin when field is inside a row */
.bf-vf-row .bf-vf-field {
    margin-bottom: 0;
}

.bf-vf-field > label {
    color: #2d0845;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.2px;
}

.bf-vf-field > label em,
.bf-vf-consent-label em {
    color: #e52572;
    font-style: normal;
    margin-left: 2px;
}

.bf-vf-optional {
    color: #9e8ea8;
    font-size: 11.5px;
    font-weight: 500;
    margin-left: 4px;
}

/* ---- INPUT WRAPPER ---- */
.bf-vf-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.bf-vf-input-wrap > i:first-child {
    position: absolute;
    left: 14px;
    color: #9e8ea8;
    font-size: 14px;
    pointer-events: none;
    transition: color 0.25s;
    z-index: 1;
}

.bf-vf-input-wrap input,
.bf-vf-input-wrap select {
    width: 100%;
    height: 48px;
    padding: 0 14px 0 42px;
    border: 1.5px solid #e3d8ec;
    border-radius: 12px;
    background: #fdf9ff;
    color: #2d0845;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    outline: none;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
    -webkit-appearance: none;
    appearance: none;
}

.bf-vf-input-wrap input::placeholder {
    color: #c0b0cc;
    font-weight: 400;
}

.bf-vf-input-wrap input:focus,
.bf-vf-input-wrap select:focus {
    border-color: #7b1fa2;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(123,31,162,0.1);
}

.bf-vf-input-wrap:focus-within > i:first-child {
    color: #7b1fa2;
}

/* Select chevron */
.bf-vf-select-wrap {
    position: relative;
}

.bf-vf-chevron {
    position: absolute !important;
    right: 14px !important;
    left: auto !important;
    font-size: 11px !important;
    color: #9e8ea8 !important;
    pointer-events: none;
}

/* ---- TEXTAREA ---- */
.bf-vf-textarea-wrap {
    position: relative;
}

.bf-vf-textarea-wrap > i {
    position: absolute;
    top: 14px;
    left: 14px;
    color: #9e8ea8;
    font-size: 14px;
    pointer-events: none;
    transition: color 0.25s;
    z-index: 1;
}

.bf-vf-textarea-wrap textarea {
    width: 100%;
    padding: 12px 14px 12px 42px;
    border: 1.5px solid #e3d8ec;
    border-radius: 12px;
    background: #fdf9ff;
    color: #2d0845;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    line-height: 1.65;
    resize: vertical;
    min-height: 100px;
    outline: none;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.bf-vf-textarea-wrap textarea::placeholder {
    color: #c0b0cc;
    font-weight: 400;
}

.bf-vf-textarea-wrap textarea:focus {
    border-color: #7b1fa2;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(123,31,162,0.1);
}

.bf-vf-textarea-wrap:focus-within > i {
    color: #7b1fa2;
}

/* ---- CHECKBOX GROUP (interests) ---- */
.bf-vf-checks {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 4px;
}

.bf-vf-check {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 13px;
    border: 1.5px solid #e3d8ec;
    border-radius: 10px;
    background: #fdf9ff;
    color: #2d0845;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.22s, background 0.22s, box-shadow 0.22s;
    user-select: none;
    position: relative;
}

.bf-vf-check input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.bf-vf-checkmark {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border: 2px solid #c0b0cc;
    border-radius: 5px;
    background: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.22s, background 0.22s;
    position: relative;
}

.bf-vf-checkmark::after {
    content: "";
    width: 5px;
    height: 9px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg) scale(0);
    transition: transform 0.18s ease;
    margin-top: -2px;
}

.bf-vf-check input:checked ~ .bf-vf-checkmark {
    border-color: #7b1fa2;
    background: #7b1fa2;
}

.bf-vf-check input:checked ~ .bf-vf-checkmark::after {
    transform: rotate(45deg) scale(1);
}

.bf-vf-check:has(input:checked) {
    border-color: #7b1fa2;
    background: rgba(123,31,162,0.06);
    box-shadow: 0 0 0 3px rgba(123,31,162,0.09);
}

.bf-vf-check:hover {
    border-color: #c07ad8;
    background: #fef5ff;
}

/* ---- FILE UPLOAD ---- */
.bf-vf-upload {
    position: relative;
}

.bf-vf-upload input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

.bf-vf-upload-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 22px 16px;
    border: 2px dashed #d4bfe0;
    border-radius: 12px;
    background: #fdf9ff;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.25s, background 0.25s;
}

.bf-vf-upload:hover .bf-vf-upload-label,
.bf-vf-upload input:focus ~ .bf-vf-upload-label {
    border-color: #7b1fa2;
    background: rgba(123,31,162,0.04);
}

.bf-vf-upload-label i {
    font-size: 22px;
    color: #7b1fa2;
}

.bf-vf-upload-label span {
    color: #2d0845;
    font-size: 13px;
    font-weight: 700;
}

.bf-vf-upload-label small {
    color: #9e8ea8;
    font-size: 11.5px;
}

/* ---- CONSENT ---- */
.bf-vf-consent {
    margin-bottom: 28px;
    margin-top: 4px;
}

.bf-vf-consent-label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    color: #4a3558;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.6;
    user-select: none;
}

.bf-vf-consent-label input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.bf-vf-consent-box {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    border: 2px solid #c0b0cc;
    border-radius: 6px;
    background: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.22s, background 0.22s;
    position: relative;
}

.bf-vf-consent-box::after {
    content: "";
    width: 5px;
    height: 10px;
    border-right: 2.5px solid #fff;
    border-bottom: 2.5px solid #fff;
    transform: rotate(45deg) scale(0);
    transition: transform 0.18s ease;
    margin-top: -2px;
}

.bf-vf-consent-label input:checked ~ .bf-vf-consent-box {
    border-color: #50156f;
    background: #50156f;
}

.bf-vf-consent-label input:checked ~ .bf-vf-consent-box::after {
    transform: rotate(45deg) scale(1);
}

/* ---- SUBMIT BUTTON ---- */
.bf-vf-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    min-height: 56px;
    padding: 0 32px;
    border: none;
    border-radius: 14px;
    background: linear-gradient(135deg, #e52572 0%, #50156f 100%);
    color: #ffffff;
    font-size: 15px;
    font-weight: 800;
    font-family: inherit;
    letter-spacing: 0.2px;
    cursor: pointer;
    box-shadow: 0 14px 34px rgba(229, 37, 114, 0.32);
    transition: transform 0.28s ease, box-shadow 0.28s ease, background 0.28s ease;
    position: relative;
    overflow: hidden;
}

.bf-vf-submit::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #50156f 0%, #e52572 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.bf-vf-submit span,
.bf-vf-submit i {
    position: relative;
    z-index: 1;
}

.bf-vf-submit:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 42px rgba(229,37,114,0.38);
}

.bf-vf-submit:hover::before {
    opacity: 1;
}

.bf-vf-submit:active {
    transform: translateY(0);
}

/* ---- DIVIDER between rows ---- */
.bf-vf-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, #ede0f5, transparent);
    margin: 8px 0 24px;
}

/* ==========================================
   RESPONSIVE — VOLUNTEER FORM
========================================== */

@media (max-width: 1100px) {
    .bf-vf-wrap {
        grid-template-columns: 320px 1fr;
    }

    .bf-vf-left {
        padding: 52px 36px;
    }

    .bf-vf-right {
        padding: 48px 40px;
    }
}

@media (max-width: 900px) {
    .bf-vf-wrap {
        grid-template-columns: 1fr;
    }

    .bf-vf-left {
        padding: 48px 32px;
    }

    .bf-vf-left::after {
        display: none;
    }

    .bf-vf-right {
        padding: 44px 32px;
    }
}

@media (max-width: 650px) {
    .bf-vf-left {
        padding: 40px 22px;
    }

    .bf-vf-left h2 {
        font-size: 26px;
    }

    .bf-vf-right {
        padding: 36px 20px;
    }

    .bf-vf-row-2 {
        grid-template-columns: 1fr;
    }

    .bf-vf-checks {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 420px) {
    .bf-vf-checks {
        grid-template-columns: 1fr;
    }
}


/* ==========================================
   DONATE — bank panel reveal + success msg
========================================== */

/* Bank panel hidden by default */
.bf-bank-hidden {
    opacity: 0;
    transform: translateY(28px);
    pointer-events: none;
    visibility: hidden;
    max-height: 0;
    overflow: hidden;
    transition:
        opacity 0.55s ease,
        transform 0.55s ease,
        max-height 0.6s ease,
        visibility 0s linear 0.55s;
}

.bf-bank-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    visibility: visible;
    max-height: 2000px;
    transition:
        opacity 0.55s ease,
        transform 0.55s ease,
        max-height 0.7s ease,
        visibility 0s linear 0s;
}

/* Success banner */
.bf-donate-success {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 22px 24px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(79,159,25,0.1), rgba(79,159,25,0.06));
    border: 1.5px solid rgba(79,159,25,0.3);
    margin-top: 8px;
    animation: bfSuccessFadeIn 0.5s ease forwards;
}

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

.bf-donate-success-icon {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(79,159,25,0.15);
    color: #3a8a0e;
    font-size: 20px;
    margin-top: 2px;
}

.bf-donate-success strong {
    display: block;
    color: #1e4d08;
    font-size: 15px;
    font-weight: 800;
    margin-bottom: 5px;
}

.bf-donate-success p {
    margin: 0;
    color: #3a6b14;
    font-size: 13.5px;
    line-height: 1.6;
    font-weight: 500;
}


/* ==========================================
   FOCUS GRID — responsive
========================================== */

@media (max-width: 1050px) {
    .bf-focus-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 22px;
    }
}

@media (max-width: 600px) {
    .bf-focus-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }
}

/* ==========================================
   WORK GRID — responsive
========================================== */

@media (max-width: 1050px) {
    .bf-work-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
    }
}

@media (max-width: 800px) {
    .bf-work-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .bf-work-heading {
        align-items: flex-start;
        text-align: left;
    }
}

@media (max-width: 480px) {
    .bf-work-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}