/* common-css-start */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');



@font-face {
    font-family: 'Sofia Pro Regular';
    src: url('../fonts/Sofia-Pro-Regular.woff') format('woff2'),
}

@font-face {
    font-family: 'Sofia Pro Medium';
    src: url('../fonts/Sofia-Pro-Medium.woff') format('woff2'),
}

@font-face {
    font-family: 'Sofia Pro Bold';
    src: url('../fonts/Sofia-Pro-Bold.woff') format('woff2'),
}

@font-face {
    font-family: 'Sofia Pro SemiBold';
    src: url('../fonts/Sofia-Pro-Semi-Bold.woff') format('woff2'),
}




:root {
    --color-primary: #E74C0A;
    --color-secondary: #044678;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    font-family: "Oswald", sans-serif;
}

p {
    margin: 0;
    font-weight: 500;
    font-size: 17px;
    line-height: 153%;
    font-family: 'Sofia Pro Medium';
}


body {
    overflow-x: hidden;
    font-family: 'Sofia Pro Regular';

}

section {
    position: relative;
}

.myClass {
    overflow: hidden;
}

ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

a {
    text-decoration: none;
    display: inline-block;
}

.section-heading {
    position: relative;
    z-index: 1;
}

@media (min-width: 1400px) {

    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl {
        max-width: 1170px;
    }
}

/* =========================================================
   GLOBAL BUTTON STYLES
   ========================================================= */

/* Base Button Style */
.btn-custom,
.btn-custom-primary {
    background-color: var(--color-primary);
    border: 2px solid var(--color-primary);
    padding: 12px 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: 'Sofia Pro Bold';
    font-weight: 700;
    font-size: 16px;
    line-height: normal;
    color: #fff;
    border-radius: 3px;
}

/* Primary Hover State */
.btn-custom:hover,
.btn-custom-primary:hover {
    background-color: #E04B00;
    border-color: #E04B00;
    color: #FFFFFF !important;
    transform: translateY(-2px);
}

.btn-custom:active,
.btn-custom-primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(255, 85, 0, 0.2);
}


/* Button Sizes */
.btn-custom-sm {
    padding: 8px 18px;
    font-size: 0.85rem;
}

.btn-custom-lg {
    padding: 16px 36px;
    font-size: 1.1rem;
}

/* Arrow Icon Hover Effect */
.btn-custom i,
.btn-custom-primary i,
.btn-custom-outline i {
    transition: transform 0.3s ease;
}

.btn-custom:hover i,
.btn-custom-primary:hover i {
    transform: translateX(4px);
}

.sub-heading {
    font-family: "Oswald", sans-serif;
    font-weight: 500;
    font-size: 38px;
    line-height: 121%;
    text-transform: uppercase;
    color: var(--color-secondary);
}

/* common-css-end */



/*header-css-start*/
.site-header.sticky-header {
    position: fixed;
    width: 100%;
    box-shadow: 0px 0px 30px -5px var(--color-secondary);
    animation: goDown 0.5s ease-in-out forwards;
    background: var(--color-secondary);
}


@keyframes goDown {
    0% {
        top: -60px;
    }

    100% {
        top: 0;
    }
}




/* =========================================================
       HEADER COMPONENT (SEO SEMANTIC STRUCTURE)
       ========================================================= */
.site-header {
    width: 100%;
    position: fixed;
    z-index: 1000;
    left: 0;
    right: 0;
    top: 0;
}

.site-header .navbar-nav {
    gap: 32px;
}

.site-header .btn-custom {
    background: #009edf;
    border-color: #009edf;
}

.site-header .navbar {
    padding: 20px 0;
}

/* 1. Top Announcement Bar */
.site-header .top-announcement-bar {
    background-color: var(--color-primary);
    color: #FFFFFF;
    padding: 10px 0;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    line-height: 1.2;
}

.site-header .top-announcement-link {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: opacity 0.2s ease;
    font-family: 'Sofia Pro Regular';
    font-weight: 400;
    font-size: 17px;
    color: #fff;
}

.site-header .top-announcement-link:hover {
    color: #FFFFFF;
    opacity: 0.9;
}

.site-header .top-announcement-link i {
    font-size: 13px;
    transition: transform 0.2s ease;
}

.site-header.sticky-header .top-announcement-bar {
    display: none;
}

/* Navigation Links */
.site-header .header-navbar .nav-link {
    color: #FFFFFF !important;
    padding: 0 !important;
    transition: opacity 0.2s ease, color 0.2s ease;
    font-family: 'Sofia Pro Medium';
    font-weight: 500;
    font-size: 16px;
    line-height: 163%;
}

.site-header .header-navbar .nav-link:hover,
.site-header .header-navbar .nav-link:focus {
    opacity: 0.85;
    color: #FFFFFF !important;
}

/* Language Switcher Dropdown Styling */
.site-header .lang-dropdown {
    position: relative;
}

.site-header .lang-dropdown .dropdown-toggle {
    background: transparent !important;
    border: none;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    font-family: 'Sofia Pro Regular';
    font-weight: 500;
    font-size: 15px;
    text-transform: capitalize;
    color: #fff;
}

.site-header .lang-dropdown .dropdown-toggle:hover,
.site-header .lang-dropdown .dropdown-toggle:focus {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.4);
}

.site-header .lang-dropdown .dropdown-toggle::after {
    content: '\f107';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    border: none;
    margin-left: 4px;
}

.site-header .lang-dropdown .dropdown-menu {
    min-width: 120px;
    border-radius: 4px;
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.2);
    border: none;
    padding-top: 6px;
    padding-bottom: 6px;
    margin-top: 8px;
    background-color: #FFFFFF;
}

.site-header .lang-dropdown .dropdown-item {
    font-size: 15px;
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 8px;
    padding-bottom: 8px;
    color: #1F2937;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Sofia Pro Medium';
    font-weight: 500;
    line-height: 163%;
}

.site-header .lang-dropdown .dropdown-item:hover,
.site-header .lang-dropdown .dropdown-item:focus {
    background-color: #F1F5F9;
    color: var(--color-secondary);
}

/* Donate Button */

/* Mobile Hamburger Toggler */
.site-header .navbar-toggler-custom {
    color: #FFFFFF;
    border-radius: 4px;
    border: none;
    padding: 0;
    width: 30px;
    height: 24px;
    position: relative;
    background: transparent !important;
    box-shadow: none !important;
}

.site-header .navbar-toggler-custom:focus {
    box-shadow: none;
}





/*header-css-end*/
/* START BANNER CSS ============================= */

.hero-banner-section {
    position: relative;
    height: 100vh;
    background-color: var(--color-secondary);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 80px 0;
    display: flex;
    align-items: center;
}

/* Left Text Content */
.hero-banner-section .hero-text-wrapper {
    color: #FFFFFF;
    max-width: 480px;
}

.hero-banner-section .hero-title {
    margin-bottom: 20px;
    color: #fff;

}

.hero-title {
    margin-bottom: 20px;
    font-family: "Oswald", sans-serif;
    font-weight: 500;
    font-size: 49px;
    line-height: 118%;
    text-transform: uppercase;
}

.hero-banner-section .hero-subtitle,
.page-banner .hero-subtitle {
    margin-bottom: 28px;
    color: #fff;
}

/* Right Side Widget Card */
.hero-banner-section .donation-widget-card {
    border-radius: 8px;
    background: #004263;
    padding: 28px;
}

.hero-banner-section .widget-heading {
    font-family: "Oswald", sans-serif;
    font-weight: 300;
    font-size: 30px;
    line-height: 113%;
    color: #fff;
}

.hero-banner-section .widget-desc {
    margin: 20px 0;
    font-weight: 400;
    font-size: 15px;
    line-height: 147%;
    color: #fff;
}

/* Amount Buttons Grid */
.hero-banner-section .amount-btn-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.hero-banner-section .amount-btn {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding-top: 8px;
    padding-bottom: 8px;
    border-radius: 4px;
    transition: all 0.2s ease;
    font-size: 16px;
    line-height: 150%;
    text-align: center;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    font-family: 'Sofia Pro SemiBold';
}

.hero-banner-section .amount-btn:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.hero-banner-section .amount-btn.active {
    background-color: #FFFFFF;
    border-color: #FFFFFF;
    color: #102d38;
}

.hero-banner-section .amount-select-btn {
    background: rgba(255, 255, 255, 0.08);
    color: #FFF;
}

.hero-banner-section .amount-select-btn.active {
    background: #FFF;
    color: var(--color-secondary);
}

/*====================================================================END BANNER CSS*/

/* DONATION BANNER STRIP SECTION START  ========================================================= */
.donation-strip-section {
    position: relative;
    overflow: hidden;
    padding: 55px 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.donation-strip-section .strip-subtext {
    margin: 20px 0 0;
    font-family: 'Sofia Pro Regular';
    font-size: 18px;
    line-height: 122%;
    color: #3a5d78;
}

/* Right Side Amount Selector & Action Box */
.strip-action-box {
    max-width: 310px;
    margin-left: auto;
}

/* Amount Buttons Grid */
.amount-btn-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.amount-select-btn {
    border: none;
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 4px;
    transition: all 0.2s ease;
    outline: none;
    font-weight: 600;
    font-size: 16px;
    line-height: 150%;
    text-align: center;
    text-transform: uppercase;
    font-family: 'Sofia Pro SemiBold';
    background: rgba(0, 0, 0, 0.08);
    color: var(--color-secondary);
}

.amount-select-btn:hover {
    background-color: #E2E8F0;
}

/* Selected Active State */
.amount-select-btn.active {
    background-color: var(--color-secondary);
    color: #FFFFFF;
    border-color: var(--color-secondary);
}

/* Custom Input Box for "Other" Amount */
.other-input-wrapper {
    display: none;
    margin-top: 10px;
}

.other-input-wrapper.show {
    display: block;
}

.other-amount-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--color-secondary);
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    outline: none;
}

.donation-strip-section .sub-heading {
    font-size: 34px;
    line-height: 100%;
}

/* =========================================================  DONATION BANNER STRIP SECTION END   */
/* IMPACT STATS SECTION START=========================================================     */

.impact-stats-section {
    /* Light Blue Background */
    padding: 80px 0;
    background: #d0e4ff;
}

.impact-stats-section .impact-header {
    text-align: center;
    max-width: 50%;
    margin: 0 auto 25px;
}

.impact-stats-section .impact-subtitle {
    margin-bottom: 32px;
    font-family: 'Sofia Pro Regular';
    font-style: italic;
    font-size: 20px;
    line-height: 190%;
    text-align: center;
    color: #3a5d78;
}

.impact-stats-section .highlight-link {
    color: var(--color-primary);
    /* Orange Highlight Link */
    text-decoration: underline;
    font-style: italic;
    font-weight: 500;
    transition: opacity 0.2s ease;
}

.impact-stats-section .highlight-link:hover {
    color: #C83E00;
    opacity: 0.85;
}

.impact-stats-section .heart-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 0 auto 40px;
    width: 100%;
}

.impact-stats-section .heart-divider svg {
    width: 100%;
}

/* 4 Cards Grid Layout */
.impact-stats-section .stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 15px;
}

.impact-stats-section .stat-card {
    background-color: #FFFFFF;
    padding: 28px;
    border-radius: 2px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    transition: transform 0.2s ease;
}

.impact-stats-section .stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0px 8px 20px rgba(4, 70, 120, 0.1);
}

.impact-stats-section .stat-number-box {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    font-family: "Oswald", sans-serif;
    font-weight: 500;
    font-size: 38px;
    line-height: 121%;
    text-transform: uppercase;
    color: var(--color-secondary);
}

.impact-stats-section .stat-label {
    font-size: 18px;
    line-height: 144%;
    color: #3a5d78;
}




/* =========================================================  IMPACT STATS SECTION END   */
/* =========================================================  IMPACT STATS SECTION END   */
.feature-cards-section {
    padding: 100px 0;
}


/* Header Styles */
.feature-cards-section .feature-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: flex-start;
    margin-bottom: 45px;
}


.feature-cards-section .feature-main-description {
    font-weight: 400;
    line-height: 178%;
    color: #3a5d78;
}

.feature-cards-section .cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.feature-cards-section .card-item {
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.08);
    background: #fff;
    border-radius: 3px;
}

.feature-cards-section .card-image-wrapper a {
    width: 100%;
    overflow: hidden;
}

.feature-cards-section .card-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.feature-cards-section .card-item:hover .card-image-wrapper img {
    transform: scale(1.03);
}

.feature-cards-section .card-content {
    padding: 20px;
}

.feature-cards-section .card-title {
    font-family: "Oswald", sans-serif;
    font-weight: 500;
    font-size: 26px;
    line-height: normal;
    color: var(--color-secondary);
}

.feature-cards-section .card-text {
    color: #3a5d78;
    font-family: 'Sofia Pro Regular';
    margin-top: 10px;
}



/* =========================================================  IMPACT STATS SECTION END   */
/* =========================================================  IMPACT STATS SECTION END   */

.projects-section {
    background: #e5eef7;
    padding: 75px 0;
}

.projects-section .donating-para {
    font-family: 'Sofia Pro Medium';
    font-weight: 500;
    font-size: 18px;
    line-height: 156%;
    text-align: center;
    color: #3a5d78;
    width: 60%;
    margin: 15px auto 30px;
}

.projects-section .projects-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin-bottom: 35px;
}

.projects-section .project-card {
    background-color: #FFFFFF;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.3s ease;
    height: 100%;
}

.projects-section .project-img-box {
    width: 100%;
    overflow: hidden;
}

.projects-section .project-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.projects-section .project-card:hover .project-img-box img {
    transform: scale(1.04);
}

.projects-section .project-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.projects-section .project-card-title {
    margin-bottom: 12px;
    font-family: "Oswald", sans-serif;
    font-weight: 500;
    font-size: 22px;
    line-height: 112%;
    color: var(--color-secondary);
}

.projects-section .project-card-desc {
    margin-bottom: 15px;
    flex-grow: 1;
    font-size: 16px;
    line-height: 150%;
    color: #3a5d78;
    font-family: 'Sofia Pro Regular';
}

.projects-section .project-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    transition: gap 0.2s ease, color 0.2s ease;
    font-family: 'Sofia Pro SemiBold';
    font-size: 16px;
    line-height: 120%;
    color: var(--color-primary);
}

.projects-section .project-link i {
    font-size: 13px;
}

.projects-section .projects-btn-wrapper {
    text-align: center;
}

.projects-section .sub-heading {
    margin-bottom: 35px;
}

.projects-section .projects-btn-wrapper a.btn-custom {
    font-family: 'Sofia Pro Bold';
    font-weight: 700;
    font-size: 16px;
    line-height: 150%;
    color: #fff;
}

.projects-section .pro-image {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.projects-section .pro-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


.projects-section .projects-nav-tabs {
    border-bottom: none;
    background-color: #FFFFFF;
    padding: 5px;
    border-radius: 8px;
    display: inline-flex;
    box-shadow: 0 2px 8px rgba(4, 70, 120, 0.05);
}

.projects-section .projects-nav-tabs .nav-link {
    border: none !important;
    border-radius: 6px !important;
    padding: 8px 16px;
    transition: all 0.2s ease;
    font-family: 'Sofia Pro Medium';
    font-weight: 500;
    font-size: 15px;
    line-height: 133%;
    text-align: center;
    color: #3a5d78;
}

.projects-section .projects-nav-tabs .nav-link:hover {
    color: #EE5A24;
}

.projects-section .projects-nav-tabs .nav-link.active {
    background-color: #EE5A24 !important;
    color: #FFFFFF !important;
}


.projects-section .full-img-card {
    border-radius: 8px;
    overflow: hidden;
    height: 100%;
}

.projects-section .full-img-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* =========================================================  IMPACT STATS SECTION END   */
/* STORY SECTION START  =========================================================  */
.story-section {
    padding: 100px 0;
}

.story-section .media-box-large {
    position: relative;
    height: 310px;
    border-radius: 8px 8px 0 0;
    overflow: hidden;
}

.story-section .media-box-large img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.story-section .media-box-small {
    height: 180px;
    border-radius: 0 0 8px 8px;
    overflow: hidden;
}

.story-section .media-box-small img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.story-section .media-box-blue {
    background-color: #388EEB;
    display: flex;
    align-items: center;
    justify-content: center;
}


.story-section .story-description {
    margin: 20px 0;
    font-size: 18px;
    line-height: 178%;
    color: #3a5d78;
    font-family: 'Sofia Pro Regular';
}



/* =========================================================  STORY SECTION END   */
/* HELP SECTION END  =========================================================    */
.help-section {
    /* Exact Soft Blue Background */
    padding: 75px 0;
    background: #bad6eb;
}

.help-section .help-description {
    margin: 22px 0;
    font-size: 18px;
    line-height: 156%;
    color: #3a5d78;
}

.help-section .help-image-wrapper {
    position: relative;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
}

.help-section .help-image-box {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(4, 70, 120, 0.08);
}

.help-section .help-image-box img {
    width: 100%;
    object-fit: cover;
    display: block;
}

.help-section .doodle-sparkles {
    position: absolute;
    top: -24px;
    right: -84px;
    pointer-events: none;
    z-index: 2;
}


/* =========================================================  HELP SECTION END   */
/* DONATION SECTION START =========================================================     */
.donation-section {
    padding: 80px 0;
    background: #e5eef7;
}


.donation-section .donation-description {
    margin: 15px 0 15px;
    font-family: 'Sofia Pro Medium';
    font-weight: 500;
    font-size: 18px;
    line-height: 156%;
    color: var(--color-secondary);
}

.donation-section .donation-left-btns {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}



.donation-section .donation-card {
    padding: 32px;
    margin: 0 auto;
    border: 1px solid #f5f5f4;
    border-radius: 6px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.06);
    background: rgb(255 255 255);
}

.donation-section .donation-tabs {
    display: flex;
    background-color: #F3F4F6;
    border-radius: 6px;
    padding: 4px;
    margin-bottom: 24px;
}

.donation-section .tab-btn {
    flex: 1;
    padding: 10px 15px;
    border: none;
    background: transparent;
    border-radius: 4px;
    transition: all 0.2s ease;
    font-family: 'Sofia Pro SemiBold';
    font-weight: 600;
    font-size: 14px;
    line-height: 114%;
    text-align: center;
}

.donation-section .tab-btn.active {
    background-color: #EE5A24;
    color: #FFFFFF;
}

.donation-section .amount-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}

.donation-section .amount-btn {
    background-color: #FFFFFF;
    border: 2px solid #E2E8F0;
    border-radius: 6px;
    padding: 10px 0;
    transition: all 0.2s ease;
    font-family: 'Sofia Pro Bold';
    font-weight: 700;
    font-size: 14px;
    line-height: 143%;
    text-align: center;
    color: #44403c;
}

.donation-section .amount-btn:hover {
    border-color: #EE5A24;
    color: #EE5A24;
}

.donation-section .amount-btn.active {
    border: 2px solid #EE5A24;
    color: #EE5A24;
    background-color: #FFF6F3;
}

/* Custom Amount Input Field */
.donation-section .amount-input-box {
    position: relative;
    margin-bottom: 24px;
}

.donation-section .currency-symbol {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    font-weight: 600;
    color: #64748B;
}

.donation-section .custom-amount-input {
    width: 100%;
    padding: 12px 16px 12px 36px;
    border: 1px solid #E2E8F0;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    color: #1E293B;
    outline: none;
    transition: border-color 0.2s ease;
}

.donation-section .custom-amount-input:focus {
    border-color: #EE5A24;
}

.donation-section .donation-left-btns button {
    padding: 10px 15px;
    border: none;
    background: transparent;
    border-radius: 4px;
    transition: all 0.2s ease;
    font-family: 'Sofia Pro SemiBold';
    font-weight: 600;
    font-size: 14px;
    line-height: 114%;
    text-align: center;
    background-color: #EE5A24;
    color: #FFFFFF;
}


/* =========================================================  DONATION SECTION END   */
/* =========================================================  DONATION SECTION END   */
.site-footer {
    background-color: #0A1E52;
    /* Deep Navy Blue Background */
    color: #FFFFFF;
    font-family: 'Plus Jakarta Sans', sans-serif;
    padding-top: 60px;
    padding-bottom: 30px;
}

.site-footer .footer-top-bar {
    padding-bottom: 40px;
}



.site-footer .social-icons-wrapper {
    display: flex;
    gap: 12px;
    align-items: center;
}

.site-footer .social-icon-link {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.15);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.site-footer .social-icon-link:hover {
    background-color: #EE5A24;
    color: #FFFFFF;
    transform: translateY(-2px);
}

.site-footer .footer-heading {
    margin-bottom: 20px;
    font-family: 'Sofia Pro Bold';
    font-weight: 700;
    font-size: 18px;
    line-height: normal;
    color: #fff;
}

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

.site-footer .footer-links li {
    margin-bottom: 12px;
}

.site-footer .footer-links a {
    transition: color 0.2s ease;
    font-family: 'Sofia Pro Regular';
    font-weight: 400;
    font-size: 16px;
    line-height: 141%;
    color: rgba(255, 255, 255, 0.9);
}

.site-footer .footer-links a:hover {
    color: #FFFFFF;
}

.site-footer .contact-info-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.site-footer .contact-info-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
    font-family: 'Sofia Pro Regular';
    font-weight: 400;
    font-size: 16px;
    line-height: 141%;
    color: rgba(255, 255, 255, 0.8);
}

.site-footer .contact-info-list i {
    color: #B0C4DE;
    font-size: 15px;
    margin-top: 3px;
}

.site-footer .contact-info-list a {
    color: #B0C4DE;
    text-decoration: none;
    transition: color 0.2s ease;
}

.site-footer .contact-info-list a:hover {
    color: #FFFFFF;
}

.site-footer .newsletter-desc {
    margin-bottom: 18px;
    font-size: 14px;
    font-family: 'Sofia Pro Regular';
    line-height: 163%;
    color: rgba(255, 255, 255, 0.8);
}

.site-footer .newsletter-form {
    display: flex;
    gap: 8px;
}

.site-footer .newsletter-input {
    border: none;
    border-radius: 4px;
    padding: 10px 14px;
    outline: none;
    width: 100%;
    background: #172f71;
    font-family: 'Sofia Pro Regular';
    font-weight: 400;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.6);
}

.site-footer .newsletter-input::placeholder {
    color: #8A9CB7;
}

.site-footer .newsletter-input:focus {
    border-color: #EE5A24;
}

.site-footer .btn-signup {
    background-color: var(--color-primary);
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.site-footer .btn-signup:hover {
    background-color: #D64917;
}

.site-footer .footer-divider {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin: 40px 0 25px;
}

.site-footer .copyright-text {
    margin: 0;
    font-family: 'Sofia Pro Regular';
    font-size: 16px;
    line-height: 141%;
    color: rgba(255, 255, 255, 0.9);
}

.site-footer .payment-badges {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.col-lg-4.col-12.custom-last {
    border-left: 1px solid #ffffff29 !important;
    padding-left: 35px;
}



/* =========================================================  DONATION SECTION END   */
/*PAGE BANNER SECTION END  =========================================================    */


.page-banner {
    position: relative;
    width: 100%;
    min-height: 62vh;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 40px 0;
    margin-top: 40px;
}

.page-banner .location-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    backdrop-filter: blur(12px);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    padding: 8px 16px;
    font-family: 'Sofia Pro SemiBold';
    line-height: 133%;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 24px;
}



.page-banner::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: linear-gradient(180deg, rgba(33, 25, 19, 0.7) 0%, rgba(33, 25, 19, 0) 21.33%, rgba(33, 25, 19, 0) 100%);
}


.page-banner .hero-title {
    color: #fff;
    margin-bottom: 20px;
}

/* Dark Overlay gradient */
.page-banner::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: linear-gradient(90deg, rgba(11, 1, 0, 0.82) 0%, rgba(11, 1, 0, 0.52) 41.06%, rgba(11, 1, 0, 0.42) 48.17%, rgba(11, 1, 0, 0) 54.66%, rgba(11, 1, 0, 0) 64.6%, rgba(11, 1, 0, 0) 100%);
}

/* Banner Content Area */
.page-banner .banner-inner {
    position: relative;
    z-index: 2;
}

.page-banner .banner-content {
    max-width: 80%;
}


/* =========================================================  PAGE BANNER SECTION END   */
/*  ABOUT BEGEN SECTION START =========================================================     */
.about-began-section {
    padding: 78px 0 37px;
}

.about-began-section .btn-custom {
    border-radius: 20px;
}

.about-began-section .left-media-wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.about-began-section .began-img-box {
    width: 100%;
    overflow: hidden;
    border-radius: 20px;
}

.about-began-section .began-img-box img {
    width: 100%;
    object-fit: cover;
    display: block;
}

.about-began-section .began-content-card {
    position: relative;
    background-color: #E6F0FA;
    /* Soft Light Blue Background */
    border-radius: 20px;
    padding: 40px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}


.about-began-section .began-text {
    font-family: 'Sofia Pro Regular';
    font-size: 18px;
    line-height: 178%;
    color: #3a5d78;
    margin-top: 15px;
}

.about-began-section .began-text:last-of-type {
    margin-bottom: 0;
}

.about-began-section .paw-watermark {
    position: absolute;
    color: #044678;
    pointer-events: none;
}

.about-began-section .paw-top-right {
    top: 24px;
    right: 28px;
}

.about-began-section .paw-bottom-right {
    bottom: 24px;
    right: 28px;
}




/* =========================================================  ABOUT BEGEN SECTION END   */
/* FIRST STEPS SECTION START =========================================================    */

.first-steps-section {
    padding: 37px 0 78px;
}


.first-steps-section .steps-text {
    margin-top: 22px;
    font-size: 18px;
    line-height: 178%;
    color: #3a5d78;
    font-family: 'Sofia Pro Regular';
}



.first-steps-section .image-grid-wrapper {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 20px;
    align-items: center;
}

.first-steps-section .grid-img-card {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(4, 70, 120, 0.08);
}

.first-steps-section .grid-img-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.first-steps-section .img-card-top-right {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    width: 327px;
}

.first-steps-section .img-card-mid-left {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    align-self: center;
    width: 229px;
    height: 235px;
}

.first-steps-section .img-card-bottom-right {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    width: 275px;
    height: 212px;
    margin: 0 auto;
}




/* =========================================================  FIRST STEPS SECTION END   */
/* FUND WORK SECTION END  =========================================================    */
.fund-work-section {
    background-color: #BAD6EB;
    padding: 75px 0;
}

.fund-work-section .fund-gallery-grid {
    display: grid;
    grid-template-columns: 1fr 1.8fr;
    gap: 16px;
    position: relative;
}

.fund-work-section .gallery-left-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.fund-work-section .gallery-img-box {
    overflow: hidden;
    border-radius: 10px;
}

.fund-work-section .gallery-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.fund-work-section .orange-doodle-accent {
    position: absolute;
    top: -50px;
    right: -83px;
    pointer-events: none;
}

.fund-work-section .fund-text {
    margin-top: 18px;
    font-size: 18px;
    line-height: 156%;
    color: #3a5d78;
}

.fund-work-section .trust-card-wrapper {
    border-radius: 8px;
    padding: 40px;
    margin-top: 48px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    background: #e5eef7;
}

.fund-work-section .badge-pill-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    font-family: 'Sofia Pro Medium';
    font-weight: 500;
    font-size: 16px;
    line-height: 99%;
    color: #044678;
    background: #fff;
    border-radius: 100px;
    padding: 5px 11px;
}

.fund-work-section .badge-pill-item i {
    color: #044678;
    font-size: 14px;
}

.badge-note-text {
    margin-top: 14px;
    margin-bottom: 0;
    font-family: 'Sofia Pro Regular';
    font-weight: 400;
    font-size: 15px;
    line-height: 145%;
    color: #3a5d78;
}

.fund-work-section .btn-custom {
    font-size: 14px;
}

.fund-work-section .btn-custom:last-child {
    background: #FFF;
    border-color: #FFF;
    color: #044678;
}

.fund-work-section .btn-custom:last-child:hover {
    background: #044678;
    border-color: #044678;
}

/* =========================================================  FUND WORK SECTION END   */
/* BOARD SECTION END =========================================================     */
.board-section {
    padding: 80px 0;
}

.board-section .board-card-wrapper {
    position: relative;
    padding: 0 55px;
}

.board-section .board-img-container {
    width: 60%;
    border-radius: 20px;
    overflow: hidden;
}

.board-section .board-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.board-section .board-info-card {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 50%;
    background-color: #E6F0FA;
    /* Soft Light Blue Background */
    border-radius: 16px;
    padding: 65px 45px;
    z-index: 2;
}


.board-section .member-name {
    margin-bottom: 2px;
    font-family: 'Sofia Pro Medium';
    font-weight: 500;
    font-size: 18px;
    line-height: 178%;
    color: #044678;
}

.board-section .member-role {
    font-family: 'Sofia Pro Medium';
    font-weight: 500;
    font-size: 18px;
    line-height: 178%;
    color: #044678;
}

.board-section .board-quote {
    margin-bottom: 0;
    font-family: 'Oswald';
    font-weight: 400;
    font-size: 24px;
    line-height: 150%;
    color: #3a5d78;
}

.board-section .member-info {
    margin: 20px 0;
}


/* =========================================================  BOARD SECTION END   */
/* VISION SECTION START =========================================================     */
.vision-section {
    /* Light Soft Blue Background */
    padding: 75px 0;
    background: #bad6eb;
}


.vision-section .vision-text {
    margin: 22px 0;
    font-size: 18px;
    line-height: 156%;
    color: #3a5d78;
}

.vision-section .vision-collage-wrapper {
    position: relative;
    max-width: 480px;
    margin: 0 auto;
    padding-top: 120px;
}

.vision-section .vision-img-small {
    position: absolute;
    top: 0;
    right: 20px;
    width: 200px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(4, 70, 120, 0.12);
    z-index: 2;
}

.vision-section .vision-img-small img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.vision-section .vision-img-large {
    width: 320px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(4, 70, 120, 0.1);
    z-index: 1;
}

.vision-section .vision-img-large img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.vision-section .white-doodle-accent {
    position: absolute;
    top: -54px;
    right: -60px;
    pointer-events: none;
    z-index: 3;
}



/* =========================================================  VISION SECTION END   */
/* VISION SECTION START   =========================================================    */
.ready-help-section {
    background-color: #E5EEF7;
    /* Soft Light Blue Background */
    padding: 100px 0;
    /* Dark Blue Bottom Border */
}

.ready-help-section .btn-custom:last-child {
    background: #fff;
    color: #044678 !important;
    border-color: #FFF;
}

.ready-help-section .help-subtitle {
    max-width: 90%;
    margin: 15px auto 25px auto;
    font-family: 'Sofia Pro Medium';
    font-weight: 500;
    font-size: 18px;
    line-height: 156%;
    text-align: center;
    color: #044678;
}

.ready-help-section .help-btn-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* =========================================================  VISION SECTION END   */
/* QUOTE DIVIDER SECTION START =========================================================    */
.quote-divider-section {
    padding: 50px 0;
}

.quote-divider-section .quote-statement-text {
    max-width: 71%;
    margin: 0 auto 36px auto;
    font-family: 'Sofia Pro Regular';
    font-weight: 400;
    font-style: italic;
    font-size: 20px;
    line-height: 200%;
    text-align: center;
    color: #3a5d78;
}

.quote-divider-section .heart-divider-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 480px;
    margin: 0 auto;
}

.quote-divider-section .heart-divider-wrapper::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 100%;
    height: 1px;
    background-color: var(--color-primary);
    /* Soft Light Red/Orange Line */
    z-index: 1;
}

.quote-divider-section .heart-divider-icon {
    position: relative;
    z-index: 2;
    padding: 0 16px;
    color: var(--color-primary);
    /* Accent Orange Heart */
    font-size: 14px;
}


/* ========================================================= QUOTE DIVIDER SECTION END   */
/*CHOOSE PROJECTS SECTION START   =========================================================   */
.choose-projects-section {
    padding: 80px 0;
    background-color: #FFFFFF;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.choose-projects-section .choose-card-wrapper {
    position: relative;
    padding: 0 55px;
}

.choose-projects-section .choose-img-container {
    width: 65%;
    border-radius: 20px;
    overflow: hidden;
    margin-left: auto;
    /* Aligns image to the right */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.choose-projects-section .choose-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.choose-projects-section .choose-info-card {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 48%;
    /* Soft Light Blue Background */
    border-radius: 16px;
    padding: 85px 55px;
    z-index: 2;
    background: #e5eef7;
}

.choose-projects-section .choose-title {
    margin-bottom: 15px;
    font-family: 'Oswald';
    line-height: 141%;
    text-transform: uppercase;
    color: #044678;
    font-size: 34px;
}

.choose-projects-section .choose-text {
    font-size: 18px;
    line-height: 156%;
    color: #3a5d78;
}




/* ========================================================= CHOOSE PROJECTS SECTION END   */
/* WHY PROJECTS SECTION START =========================================================    */

.why-project-section {
    padding: 75px 0;
}

.why-project-section .why-project-desc {
    margin: 15px 0 20px;
    font-family: 'Sofia Pro Medium';
    font-weight: 500;
    font-size: 18px;
    line-height: 156%;
    color: #3a5d78;
}

.why-project-section .compliance-badges-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.why-project-section .compliance-badge-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: 'Sofia Pro Regular';
    font-weight: 500;
    font-size: 16px;
    line-height: 125%;
    color: #044678;
}

.why-project-section .compliance-badge-item i {
    color: #EE5A24;
    font-size: 15px;
}

.why-project-section .stats-card-wrapper {
    /* Soft Light Blue Background */
    border-radius: 10px;
    padding: 40px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    background: #e5eef7;
}

.why-project-section .stat-mini-card {
    background-color: #FFFFFF;
    border-radius: 10px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.why-project-section .stat-icon-box {
    background-color: #FCEBE6;
    /* Light Orange Soft Tint */
    color: #EE5A24;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    border-radius: 12px;
    width: 48px;
    height: 48px;
}

.why-project-section .stat-info-content h4 {
    margin: 0 0 8px 0;
    font-family: 'Oswald';
    font-weight: 400;
    font-size: 24px;
    line-height: 135%;
    color: #044678;
}

.why-project-section .stat-info-content p {
    font-family: 'Sofia Pro Regular';
    font-weight: 400;
    font-size: 14px;
    line-height: 143%;
    color: #044678;
}

.why-project-section .progress-bar-wrapper {
    margin-top: 24px;
}

.why-project-section .progress-meta-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 8px;
}

.why-project-section .progress-meta-label {
    font-family: 'Sofia Pro SemiBold';
    font-weight: 600;
    font-size: 12px;
    line-height: 133%;
    color: #044678;
}

.why-project-section .progress-meta-value {
    font-family: 'Sofia Pro Bold';
    font-weight: 700;
    font-size: 12px;
    line-height: 133%;
    color: var(--color-primary);
}

.why-project-section .custom-progress-bg {
    height: 12px;
    background-color: #FFFFFF;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 8px;
}

.why-project-section .custom-progress-fill {
    height: 100%;
    background: var(--color-primary);
    border-radius: 10px;
    transition: width 0.4s ease;
}

.why-project-section .progress-subtext {
    margin: 0;
    font-family: 'Sofia Pro SemiBold';
    font-weight: 600;
    font-size: 11px;
    line-height: 127%;
    color: #044678;
}


/* ========================================================= WHY PROJECTS SECTION END   */
/*  WHAT WE DO SECTION START =========================================================  */
.what-we-do-section {
    padding: 75px 0;
    background: #BAD6EB;
}


.what-we-do-section .what-we-do-subtitle {
    max-width: 80%;
    margin: 20px auto 38px auto;
    font-size: 18px;
    line-height: 156%;
    text-align: center;
    color: #3a5d78;
}

.what-we-do-section .wwd-card {
    background-color: #FFFFFF;
    padding: 40px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.what-we-do-section .wwd-icon-box {
    width: 48px;
    height: 48px;
    background-color: #EBF3FA;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #EE5A24;
    font-size: 20px;
}

.what-we-do-section .wwd-card-title {
    font-family: 'Oswald';
    font-weight: 400;
    font-size: 24px;
    line-height: 115%;
    color: #044678;
    margin: 20px 0 15px;
}

.what-we-do-section .wwd-card-desc {
    margin-bottom: 24px;
    flex-grow: 1;
    font-family: 'Sofia Pro Regular';
    font-weight: 400;
    font-size: 16px;
    line-height: 156%;
    color: #3a5d78;
}

.what-we-do-section .wwd-card-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-family: 'Sofia Pro Bold';
    font-weight: 600;
    font-size: 13px;
    line-height: 133%;
    color: var(--color-primary);
}



/* ========================================================= WHAT WE DO SECTION END   */
/* DONATION ACHIEVES SECTION END =========================================================  */
.donation-achieves-section {
    background-color: #E5EEF7;
    /* Soft Light Blue Background */
    padding: 80px 0;
}

.donation-achieves-section .pro-image {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    z-index: 1;
}

.donation-achieves-section .pro-image img {
    width: 100%;
    object-fit: cover;
    height: 100%;
}

.donation-achieves-section .donation-heart-divider {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 360px;
    margin: 30px auto;
}

.donation-achieves-section .donation-heart-divider::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #D9AFAC;
    /* Soft Line Color */
    z-index: 1;
    transform: translateY(-50%);
}

.donation-achieves-section .donation-heart-icon {
    position: relative;
    z-index: 2;
    background-color: transparent;
    padding: 0 14px;
    color: #E74C0A;
    font-size: 13px;
}

.donation-achieves-section .donation-card {
    background-color: #FFFFFF;
    padding: 30px;
    height: 100%;
    text-align: left;
    transition: transform 0.2s ease;
}

.donation-achieves-section .donation-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(4, 70, 120, 0.08);
}

.donation-achieves-section .donation-amount {
    margin-bottom: 12px;
    font-family: 'Oswald';
    font-weight: 500;
    font-size: 38px;
    line-height: 121%;
    text-transform: uppercase;
    color: #044678;
}

.donation-achieves-section .donation-desc {
    margin-bottom: 0;
    font-size: 18px;
    line-height: 144%;
    color: #3a5d78;
}







/* ========================================================= DONATION ACHIEVES SECTION END   */
/* SHELTER GALLERY SECTION START  =========================================================  */
.shelter-gallery-section {
    padding: 0 0 80px 0;
}


.shelter-gallery-section .gallery-subtitle {
    max-width: 65%;
    margin: 15px auto 30px auto;
    font-size: 18px;
    line-height: 156%;
    text-align: center;
    color: #3a5d78;
}

.shelter-gallery-section .gallery-card {
    position: relative;
    overflow: hidden;
    background-color: #F0F4F8;
    box-shadow: 0 4px 16px rgba(4, 70, 120, 0.05);
    display: block;
    text-decoration: none;
    border-radius: 3px;
}

.shelter-gallery-section .gallery-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.shelter-gallery-section .gallery-card:hover img {
    transform: scale(1.05);
}


.shelter-gallery-section .gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(4, 70, 120, 0.35);
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-size: 24px;
    transition: opacity 0.3s ease;
}

.shelter-gallery-section .gallery-overlay i {
    transform: scale(0.8);
    transition: transform 0.3s ease;
}

.shelter-gallery-section .gallery-card:hover .gallery-overlay {
    opacity: 1;
}

.shelter-gallery-section .gallery-card:hover .gallery-overlay i {
    transform: scale(1);
}

/* ========================================================= SHELTER GALLERY SECTION END   */
/* ========================================================= SHELTER GALLERY SECTION END   */

.news-section {
    padding: 90px 0;
}

.news-section .news-filter-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #E2E8F0;
    padding-bottom: 12px;
    margin-bottom: 22px;
}

.news-section .news-filter-tabs {
    display: flex;
    align-items: center;
    gap: 24px;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
}

.news-section .news-filter-tabs .nav-link {
    padding: 0 0 12px 0;
    border: none;
    background: transparent;
    position: relative;
    text-decoration: none;
    transition: color 0.2s ease;
    font-family: 'Sofia Pro Regular';
    font-weight: 400;
    font-size: 18px;
    line-height: normal;
    color: #3a5d78;
}

.news-section .news-filter-tabs .nav-link.active,
.news-section .news-filter-tabs .nav-link:hover {
    color: #e74c0a;
}

.news-section .news-filter-tabs .nav-link.active::after {
    content: '';
    position: absolute;
    bottom: -13px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #EE5A24;
}

.news-section .news-arrow-nav {
    display: flex;
    align-items: center;
    gap: 8px;
}

.news-section .news-arrow-btn {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    border: 1px solid #E2E8F0;
    background-color: #FFFFFF;
    color: #044678;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.news-section .news-arrow-btn:hover {
    border-color: #044678;
    background-color: #044678;
    color: #FFFFFF;
}

.news-section .news-main-title {
    margin-bottom: 26px;
    font-family: 'Oswald';
    font-weight: 400;
    font-size: 34px;
    line-height: normal;
    color: #044678;
}

.news-section .news-card {
    background: transparent;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.news-section .news-card-img-wrapper {
    overflow: hidden;
    margin-bottom: 16px;
    background-color: #F1F5F9;
    border-radius: 15px;
}

.news-section .news-card-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.news-section .news-card:hover .news-card-img-wrapper img {
    transform: scale(1.04);
}

.news-section .news-date {
    margin-bottom: 8px;
    font-family: 'Sofia Pro Medium';
    font-weight: 500;
    font-size: 14px;
    line-height: normal;
    letter-spacing: 0.11em;
    color: #3a5d78;
}

.news-section .news-card-title {
    margin: 10px 0 20px;
    flex-grow: 1;
    font-family: 'Oswald';
    font-weight: 400;
    font-size: 20px;
    line-height: 130%;
    color: #044678;
}

.news-section .news-read-more {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: gap 0.2s ease;
    font-family: 'Sofia Pro SemiBold';
    font-weight: 600;
    font-size: 16px;
    line-height: 120%;
    text-transform: capitalize;
    color: #e74c0a;
}

.news-section .news-read-more:hover {
    color: #D64917;
    gap: 10px;
}



/* ========================================================= SHELTER GALLERY SECTION END   */
/* QUOTE BANNER SECTION START =========================================================    */
.quote-banner-section {
    background: #e5eef7;
    padding: 60PX 0;
}

.quote-banner-section .quote-banner-text {
    max-width: 80%;
    margin: 0 auto;
    font-family: 'Sofia Pro Regular';
    font-weight: 400;
    font-style: italic;
    font-size: 22px;
    line-height: 173%;
    text-align: center;
    color: #044678;
}


/* ========================================================= QUOTE BANNER SECTION END   */
/* FOUNDATION BOARD SECTION START   =========================================================  */
.foundation-board-section {
    padding: 80px 0;
}



 .board-card {
    overflow: hidden;
    height: 100%;
    display: flex;
    border-radius: 3px;
    flex-direction: column;
    background: #e5eef7;
    border: none;
}

  .board-img-wrapper {
    width: 100%;
    overflow: hidden;
    background-color: #CBD5E1;
}

 .board-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

  .board-card:hover .board-img-wrapper img {
    transform: scale(1.03);
}

  .board-content {
    padding: 20px 17px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

  .board-member-name {
    margin-bottom: 4px;
    font-family: 'Oswald';
    font-weight: 400;
    font-size: 20px;
    line-height: normal;
    color: #044678;
}

  .board-member-role {
    margin-bottom: 10px;
    flex-grow: 1;
    font-family: 'Sofia Pro Medium';
    font-weight: 500;
    font-size: 16px;
    line-height: 150%;
    color: #3a5d78;
}

 .board-social-links {
    display: flex;
    align-items: center;
    gap: 12px;
    list-style: none;
    padding: 0;
    margin: 0;
}

  .board-social-links a {
    color: #044678;
    font-size: 14px;
    text-decoration: none;
    transition: color 0.2s ease;
}

  .board-social-links a:hover {
    color: #EE5A24;
}

 
  /* Custom Carousel Nav Arrows (Top Right) */
  .board-nav-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid #044678;
    background-color: transparent;
    color: #044678;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .board-nav-btn:hover {
    background-color: #044678;
    color: #FFFFFF;
  }

/* ========================================================= FOUNDATION BOARD SECTION END   */
/*  VOLUNTEERS SECTION START  =========================================================  */

.volunteers-partners-section {
    padding: 80px 0;
    background: #e5eef7;
}


.volunteers-partners-section .partners-subtitle {
    max-width: 70%;
    margin: 20px auto 30px auto;
    font-size: 18px;
    line-height: 156%;
    text-align: center;
    color: #3a5d78;
}

.volunteers-partners-section .partner-card {
    background-color: #FFFFFF;
    border-radius: 3px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 25px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

.volunteers-partners-section .partner-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.volunteers-partners-section .partner-card img {
    max-width: 100%;
    max-height: 40px;
    object-fit: contain;
}

/* ========================================================= VOLUNTEERS SECTION END   */
/* LIKE SECTION END  =========================================================   */
.like-section {
    padding: 80px 0;
}

.like-section .help-card {
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    border: none;
    text-align: center;
    border-radius: 3px;
    background: #e5eef7;
}

.like-section .help-img-wrapper {
    width: 100%;
    height: 220px;
    overflow: hidden;
    background-color: #CBD5E1;
}

.like-section .help-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.like-section .help-card:hover .help-img-wrapper img {
    transform: scale(1.04);
}

.like-section .help-content {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.like-section .help-card-title {
    font-family: 'Oswald';
    font-weight: 400;
    font-size: 22px;
    line-height: 115%;
    text-align: center;
    color: #044678;
}

.help-card-text {
    margin: 10px 0;
    font-family: 'Sofia Pro Regular';
    font-weight: 400;
    font-size: 15px;
    line-height: 147%;
    text-align: center;
    color: #3a5d78;
}

.like-section .help-card-link {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: gap 0.2s ease, color 0.2s ease;
    font-family: 'Sofia Pro SemiBold';
    font-weight: 600;
    font-size: 16px;
    line-height: 120%;
    text-align: center;
    color: #e74c0a;
}

.like-section .help-card-link:hover {
    color: #D64917;
    gap: 10px;
}




/* ========================================================= LIKE SECTION END   */
/* SPONSOR SECTION START =========================================================    */
.sponsor-section  .sponsor-img-card img {
    width: 100%;
    object-fit: cover;
    height: 100%;
}

.sponsor-section  .sponsor-img-card {
    width: 100%;
    height: 100%;
    border-radius: 20px;
    overflow: hidden;
}

.sponsor-section  .sponsor-text {
    font-size: 18px;
    line-height: 156%;
    color: #3a5d78;
    margin-top: 20px;
}

.sponsor-section {
    padding: 0 0 78px 0;
}
/* ========================================================= SPONSOR SECTION END   */
/*  ADOPATION BANNER SECTION START   ========================================================= */

  .adoption-banner-section {
    background-color: #BAD6EB;  
    padding: 70px 0;
  }

 
   .adoption-banner-section .adoption-banner-text {
    margin: 25px auto;
    font-weight: 500;
    font-size: 18px;
    width: 70%;
    line-height: 156%;
    text-align: center;
    color: #3a5d78;
  }
   .adoption-banner-section .pro-image {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
}

 .adoption-banner-section .pro-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

 
/* ========================================================= ADOPATION BANNER SECTION END   */
/* LEGACY SECTION START  =========================================================   */
.legacy-section {
    padding: 80px 0;
  }
 

 .legacy-section .legacy-text {
    margin: 22px 0;
    max-width: 85%;
    font-family: 'Sofia Pro Medium';
    font-weight: 500;
    font-size: 18px;
    line-height: 156%;
    color: #3a5d78;
  }

   
.legacy-section  .legacy-img-wrapper {
    width: 100%; 
    border-radius: 12px;
    overflow: hidden;
    background-color: #CBD5E1;
  }

.legacy-section  .legacy-img-wrapper img {
    width: 100%; 
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
  }
.legacy-section .legacy-bxx {
    padding: 0 74px;
}
.legacy-section  .legacy-img-wrapper:hover img {
    transform: scale(1.03);
  }

/* ========================================================= LEGACY SECTION END   */
/* FOUND ANIMAL SECTION START  =========================================================   */
  .found-animal-section { 
    padding: 80px 0;
    background: #e5eef7;
  }

 .found-animal-section .found-animal-img-wrapper {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    background-color: #CBD5E1;
  }

   .found-animal-section .found-animal-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
  }

   .found-animal-section .found-animal-img-wrapper:hover img {
    transform: scale(1.03);
  }

  .found-animal-section  .found-animal-text {
    margin: 25px 0;
    font-family: 'Sofia Pro Medium';
    font-weight: 500;
    font-size: 18px;
    line-height: 156%;
    color: #3a5d78;
  }
  .found-animal-section .found-main {
    padding: 0 75px;
}

/* ========================================================= FOUND ANIMAL SECTION END   */
/*  MISSION SECTION START =========================================================    */
  .mission-section {
    padding: 80px 0;
  }

  /* Image Container with Top-Right SVG Doodles */
   .mission-section .mission-img-container {
    position: relative;
    padding-top: 20px;
    padding-right: 20px;
  }

  .mission-section  .mission-doodle {
    position: absolute;
    top: -35px;
    right: -55px;
    z-index: 2;
    pointer-events: none;
  }

  .mission-section  .mission-img-wrapper {
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    background-color: #CBD5E1;
    position: relative;
    z-index: 1;
  }

   .mission-section .mission-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
  }

  .mission-section  .mission-img-wrapper:hover img {
    transform: scale(1.03);
  }
 

  .mission-section  .mission-text {
    font-family: 'Sofia Pro Medium';
    font-weight: 500;
    font-size: 18px;
    line-height: 156%;
    color: #3a5d78;
    margin-top: 25px;
  }

/* ========================================================= MISSION SECTION END   */
/*  VALUES SECTION START =========================================================   */

  .values-section {
    background-color: #BAD6EB; /* Light blue section background */
    padding: 80px 0;
  }

  .values-section   .value-card {
    background-color: #FFFFFF;
    border-radius: 3px;
    padding: 24px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .values-section   .value-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
  }

  .values-section   .value-icon-box {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: rgba(4, 70, 120, 0.1);
    padding: 12px;
  }

 
  .values-section  .value-card-title {
    margin: 15px 0;
    font-family: 'Oswald';
    font-weight: 400;
    font-size: 24px;
    line-height: 115%;
    color: #044678;
  }

  .values-section   .value-card-text {
    margin-bottom: 0;
    font-family: 'Sofia Pro Regular';
    font-weight: 400;
    font-size: 16px;
    line-height: 156%;
    color: #3a5d78;
  }
/* ========================================================= VALUES SECTION END   */
/*  HOW WE WORK SECTION START =========================================================   */
.how-we-work-section { 
    padding: 80px 0;
    background: #e5eef7;
  }

 

   .how-we-work-section  .how-we-work-subtitle {
    max-width: 57%;
    margin: 30px auto;
    font-family: 'Sofia Pro Medium';
    font-weight: 500;
    font-size: 18px;
    line-height: 156%;
    text-align: center;
    color: #3a5d78;
  }

  .how-we-work-section   .work-step-card {
    background-color: #FFFFFF;
    padding: 40px;
    height: 100%;
    border-radius: 3px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .how-we-work-section   .work-step-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(4, 70, 120, 0.06);
  }

   .how-we-work-section  .work-step-number { 
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Oswald';
    font-weight: 500;
    font-size: 24px;
    line-height: 115%;
    color: #e74c0a;
    border-radius: 16px;
    width: 55px;
    height: 55px;
    background: rgba(4, 70, 120, 0.1);
  }

   .how-we-work-section  .work-step-title {
    margin: 20px 0 15px 0;
    font-family: 'Oswald';
    font-size: 24px;
    line-height: 115%;
    color: #044678;
    font-weight: 400;
  }

   .how-we-work-section  .work-step-text {
    margin-bottom: 0;
    font-family: 'Sofia Pro Regular';
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    color: #3a5d78;
  }

/* ========================================================= HOW WE WORK SECTION END   */
/*  VERIFY SECTION START =========================================================   */
  .verify-section {
    padding: 80px 0;
  }
 
  .verify-section  .verify-text {
    font-family: 'Sofia Pro Medium';
    font-weight: 500;
    font-size: 18px;
    line-height: 156%;
    color: #3a5d78;
  }

  .verify-section .verify-badges-wrapper {
    margin-top: 36px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
  }

    .verify-section .verify-pill-badge {
    background-color: #E6F0F9;  
    padding: 10px 22px;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    font-family: 'Sofia Pro Medium';
    font-weight: 500;
    font-size: 17px;
    line-height: 93%;
    color: #044678;
  }
/* ========================================================= VERIFY SECTION END   */
/*  CONTACT INFO SECTION START =========================================================   */
 .contact-info-section { 
    padding: 80px 0;
    background: #e5eef7;
  }

 
  .contact-info-section .contact-info-text {
    margin: 20px 0;
    max-width: 440px;
    font-family: 'Sofia Pro Medium';
    font-weight: 500;
    font-size: 18px;
    line-height: 156%;
    color: #3a5d78;
  }

   
  .contact-info-section .contact-info-info-card {
    padding: 32px;
    background: #fff;
    border-radius: 6px;
  }

  .contact-info-section .contact-info-item {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 24px;
  }

 .contact-info-section  .contact-info-item:last-child {
    margin-bottom: 0;
  }

 .contact-info-section  .contact-info-icon-box {
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 14px;
    border-radius: 16px;
    background: rgba(4, 70, 120, 0.1);
  }

 .contact-info-section .contact-info-details {
    font-family: 'Sofia Pro Regular';
    font-weight: 400;
    font-size: 20px;
    line-height: 138%;
    color: #044678;
  }

  .contact-info-section .contact-info-details a {
    color: #044678;
    text-decoration: none;
    transition: color 0.2s ease;
  }

 .contact-info-section  .contact-info-details a:hover {
    color: #EE5A24;
  }

/* ========================================================= CONTACT INFO SECTION END   */