/* Override template colors with brand colors */
.theme-btn,
.btn-donate,
.btn-style-one {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.theme-btn:hover,
.btn-donate:hover,
.btn-style-one:hover {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
}

.main-menu .navigation > li > a:hover,
.main-menu .navigation > li.current > a,
.main-menu .navigation > li:hover > a {
    color: var(--primary-color);
}

a:hover,
a:focus {
    color: var(--primary-color);
}

.social-links-one a:hover,
.social-links-two a:hover {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.scroll-to-top {
    background-color: var(--primary-color);
}

.scroll-to-top:hover {
    background-color: var(--accent-color);
}
.recent-projects .row.clearfix {
    display: flex;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px;
}
.recent-projects .column {
    display: flex;
    flex-direction: column;
    margin-bottom: 30px;
}
.recent-projects .project-box {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    border: 1px solid #e1e1e1;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    transition: transform .2s ease-in-out, box-shadow .2s ease-in-out;
    margin: 0 15px;
}
.recent-projects .project-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.1);
}
.recent-projects .project-box .image {
    margin: 0;
    padding: 0;
    line-height: 0;
}
.recent-projects .project-box .image img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}
.recent-projects .project-box .lower-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.recent-projects .project-box .lower-content .inner {
    padding: 25px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.recent-projects .project-box .lower-content .text {
    flex-grow: 1;
}
.projects-section .row.clearfix,
.recent-projects .row.clearfix {
    display: flex;
    flex-wrap: wrap;
}
.projects-section .column,
.recent-projects .column {
    display: flex;
    flex-direction: column;
    margin-bottom: 30px;
}
.projects-section .project-box,
.recent-projects .project-box {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    border: 1px solid #e1e1e1;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    transition: transform .2s ease-in-out, box-shadow .2s ease-in-out;
}
.projects-section .project-box:hover,
.recent-projects .project-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.1);
}
.projects-section .project-box .image img,
.recent-projects .project-box .image img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}
.projects-section .project-box .lower-content,
.recent-projects .project-box .lower-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.projects-section .project-box .lower-content .inner,
.recent-projects .project-box .lower-content .inner {
    padding: 25px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.projects-section .project-box .project-stats,
.recent-projects .project-box .project-stats {
    list-style: none;
    padding: 0;
    margin: 15px 0;
}
.projects-section .project-box .project-stats li,
.recent-projects .project-box .project-stats li {
    margin-bottom: 5px;
}
.projects-section .project-box .link-box,
.recent-projects .project-box .link-box {
    margin-top: auto;
    padding-top: 15px; /* Some space above the button */
}

/* Styles for Action Blocks */
.sponsors-section .row.clearfix {
    display: flex;
    flex-wrap: wrap;
}
.sponsors-section .col-md-3 {
    display: flex;
    flex-direction: column;
    margin-bottom: 30px;
    padding: 0 15px;
}
.sponsors-section .action-block {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    padding: 30px;
    border: 1px solid #e1e1e1;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    transition: transform .2s ease-in-out, box-shadow .2s ease-in-out;
    text-align: center;
}
.sponsors-section .action-block:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.1);
}
.sponsors-section .action-block .icon-box {
    font-size: 50px;
    color: var(--primary-color);
    margin-bottom: 20px;
    line-height: 1;
}
.sponsors-section .action-block h4 {
    font-size: 20px;
    font-weight: 700;
}
.sponsors-section .action-block p {
    flex-grow: 1;
    margin-bottom: 20px;
}

/* Impact Cards Section */
.impact-section .row {
    display: flex;
    flex-wrap: wrap;
}
.impact-section .impact-card-column {
    display: flex;
    flex-direction: column;
    margin-bottom: 30px;
    padding: 0 15px;
}
.impact-section .impact-card {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    padding: 30px;
    border: 1px solid #e1e1e1;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    transition: transform .2s ease-in-out, box-shadow .2s ease-in-out;
    text-align: center;
}
.impact-section .impact-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.1);
}
.impact-section .impact-card .icon {
    font-size: 50px;
    color: var(--primary-color);
    margin-bottom: 20px;
    line-height: 1;
}
.impact-section .impact-card h4 {
    font-size: 20px;
    font-weight: 700;
}
.impact-section .impact-card p {
    flex-grow: 1;
}

/* Sidebar Fact Counter */
.sidebar .fact-counter.style-two .inner {
    display: flex;
    align-items: center;
    padding: 20px;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    margin-bottom: 20px;
    background-color: #ffffff;
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.sidebar .fact-counter.style-two .inner:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.1);
}

.sidebar .fact-counter.style-two .inner:last-child {
    margin-bottom: 0;
}

.sidebar .fact-counter.style-two .icon {
    font-size: 40px;
    line-height: 1;
    color: var(--primary-color);
    margin-right: 20px;
}

.sidebar .fact-counter.style-two .icon .flaticon:before {
    margin: 0;
}

.sidebar .fact-counter.style-two .content h4 {
    font-size: 24px;
    font-weight: 700;
    color: #333333;
    margin: 0 0 5px;
    line-height: 1.2;
}

.sidebar .fact-counter.style-two .content .text {
    font-size: 15px;
    color: #666666;
    line-height: 1.4;
    margin: 0;
}

/* FAQ Page Styles */
.faqs-section .faq-group {
    background: #fff;
    border-radius: 8px;
    border: 1px solid #e1e1e1;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    margin-bottom: 30px;
    padding: 30px;
    transition: all .2s ease-in-out;
}
.faqs-section .faq-group:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.1);
}
.faqs-section .faq-group .faq-group-title {
    font-size: 22px;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
    color: var(--primary-color);
}
.faqs-section .faq-group .accordion-box {
    border: none;
    box-shadow: none;
    background: none;
    padding: 0;
}
.faqs-section .faq-group .accordion-box .accordion-block:last-child {
    border-bottom: none;
}

.contact-form select {
    display: block;
    width: 100%;
    padding: 10px 20px;
    font-size: 15px;
    line-height: 1.846;
    color: #666666;
    background-color: #ffffff;
    background-image: none;
    border: 1px solid #e5e5e5;
    border-radius: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23666666%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 10px;
    height: 50px;
}

.main-header .header-upper {
    padding: 10px 0px;
}

.main-header .header-upper .nav-outer {
    margin-top: 50px;
}

.main-header .header-upper .logo img {
    height: 110px;
    width: auto;
}

.fixed-header .header-upper .logo img {
    display: none;
}

.fixed-header.main-header .header-upper .nav-outer {
    margin-top: 0;
}

.main-slider li:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1;
    transition: background-color 0.3s ease-in-out;
}
.main-slider li:hover:before {
    background-color: rgba(0, 0, 0, 0.4);
}
.main-slider h1, .main-slider .text, .main-slider .theme-btn {
    position: relative;
    z-index: 2;
}

.sponsors-section {
    margin-top: 30px;
}

.role-block h4 {
    margin-top: 16px;
    margin-bottom: 14px;
}

.fact-counter {
    margin-bottom: 40px;
}

/* Make .two-column-fluid sections have equal height columns */
.two-column-fluid .outer.clearfix {
    display: flex;
    flex-wrap: wrap;
}

.two-column-fluid .column {
    display: flex;
    flex-direction: column;
    float: none; /* Override float from style.css */
}

.two-column-fluid .left-column {
    align-items: flex-end; /* Aligns content to the right */
}

.two-column-fluid .right-column {
    align-items: flex-start; /* Aligns content to the left */
}

.two-column-fluid .column .content-box {
    flex: 1; /* Allow the content box to grow to fill the column */
    float: none !important; /* Override .pull-right and .pull-left */
}

/* Stacking for tablet and mobile */
@media (max-width: 991px) {
    .two-column-fluid .column {
        width: 100% !important; /* Ensure columns stack on smaller screens */
    }
}

/*
   ==========================================================================
   Mobile Header & Navigation Styles
   ==========================================================================
*/

@media only screen and (max-width: 767px) {
    /* Hide desktop top bar on mobile */
    .top-bar {
        display: none;
    }

    /* --- General Mobile Header Structure --- */
    .main-header .header-upper {
        position: relative;
        padding: 0;
    }

    .main-header .header-upper .auto-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 15px;
    }

    /* --- Logo --- */
    .main-header .header-upper .logo {
        width: auto;
        text-align: left;
        margin-bottom: 0;
        padding: 0;
    }

    .main-header .header-upper .logo img {
        height: 100px !important;
        width: auto !important;
        max-width: none;
    }

    /* --- Navigation Elements --- */
    .main-header .header-upper .nav-outer {
        position: static;
        width: auto;
        margin-top: 0;
    }

    .main-menu {
        position: static !important;
    }

    .main-menu .navbar-header {
        padding: 0;
        margin: 0;
    }

    /* --- Fix for Collapsible Menu --- */
    .main-menu .collapse.in,
    .main-menu .collapsing {
        position: absolute;
        z-index: 1000;
        top: 100%;
        left: 0;
        width: 100%;
        margin: 0;
        border-radius: 0;
        border-left: none;
        border-right: none;
        border-bottom: 1px solid #006838;
    }

    .main-header .header-upper .nav-outer .btn-donate {
        right: 10px;
        top: 10px;
        left: unset;
    }

    .main-menu .navbar-header .navbar-toggle {
        margin-top: 30px;
        margin-left: 120px;
    }

    .main-slider {
        display: none;
    }

    .main-features .features-column {
        display: none;
    }
}