.section-box.bg-banner-about {
    position: relative; /* Ensure the section is positioned relative for absolute children */
    overflow: hidden; /* Prevent overflow of the overlay */
}

.section-box.bg-banner-about::before {
    content: ""; /* Required to display the pseudo-element */
    position: absolute; /* Position it absolutely */
    top: 0; /* Align to the top */
    left: 0; /* Align to the left */
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    background-image: url('https://hands.vnz.org.zw/public/assets/imgs/theme/volunteers.jpg');  /* Set your background image */
    background-size: cover; /* Cover the entire section */
    background-position: center; /* Center the background image */
    opacity: 0.5; /* Set the opacity of the background image (adjust as needed) */
    z-index: 1; /* Place it below the content */
}

.banner-hero {
    position: relative; /* Position it relative to place content above the overlay */
    z-index: 2; /* Place it above the overlay */
}

/* Optional: Style adjustments */
.heading-banner {
    color: white; /* Adjust text color for better visibility */
}


.form-find .wow {
    display: flex; /* Use flexbox for the button container */
    justify-content: space-between; /* Distribute buttons evenly */
    align-items: center; /* Center items vertically */
}

.form-find .btn {
    flex: 1; /* Allow buttons to grow and fill the space */
    margin: 0 5px; /* Add some space between buttons */
    text-align: center; /* Center text inside buttons */
}

.form-find .btn:first-child {
    margin-left: 0; /* Remove left margin for the first button */
}

.form-find .btn:last-child {
    margin-right: 0; /* Remove right margin for the last button */
}

/* Force override Bootstrap styles */
.btn-primary {
    color: #fff !important;
    background-color: #28a745 !important; /* Green */
    border-color: #28a745 !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: #218838 !important; /* Darker green */
    border-color: #1e7e34 !important;
}

.btn-primary:active,
.btn-primary:focus-visible {
    background-color: #1e7e34 !important; /* Even darker green */
    border-color: #1c7430 !important;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125) !important;
}

.btn-primary:disabled {
    background-color: #28a745 !important;
    border-color: #28a745 !important;
    color: #fff !important;
    opacity: 0.65 !important;
}

/* Remove any border around the reaction buttons */
.reaction-btn {
    border: none;
    background: none;
    padding: 0; /* Remove padding to prevent extra space */
    font-size: 24px; /* Adjust the font size for emojis */
    cursor: pointer;
    display: flex;
    align-items: center; /* Align emoji and count nicely */
}

/* Optional: Style for the span (emoji count) */
.reaction-btn span {
    margin-left: 8px; /* Space between emoji and count */
}

/* Add hover effect (optional) */
.reaction-btn:hover {
    opacity: 0.8;
}

/* Remove focus outline (if you don't want focus rings on buttons) */
.reaction-btn:focus {
    outline: none;
}


    /* Brand Colors */
    .text-black {
        color: #000000; /* Black */
    }

    .bg-green {
        background-color: #28a745; /* Green */
    }

    .bg-red {
        background-color: #dc3545; /* Red */
    }

    .btn-outline-green {
        border-color: #28a745; /* Green border */
        color: #28a745; /* Green text */
        font-size: 0.875rem; /* Reduced font size */
        padding: 0.25rem 0.5rem; /* Reduced padding */
    }

    .btn-outline-green:hover {
        background-color: #28a745;
        color: white;
    }

    .badge {
        font-size: 0.875rem; /* Reduced font size for badges */
        padding: 0.25rem 0.5rem; /* Reduced padding */
    }

    .badge.bg-green {
        background-color: #28a745;
        color: white;
    }

    /* Adjusting the text color */
    h1, h5 {
        color: #000000; /* Ensure text is black */
    }

    /* Adjust margins and spacing */
    .list-group-item {
        border: 1px solid #ddd; /* Light border for items */
    }

    .list-group-item-action {
        transition: background-color 0.3s ease, border-color 0.3s ease;
    }

    .list-group-item-action:hover {
        background-color: #f8f9fa; /* Light background on hover */
        border-color: #28a745; /* Green border on hover */
    }