.banner {
    /* background-color: #0a0a5b; */
    /* background-color: #0aaaa0; */
    background-image: url('../img/header.jpg');

    color: #f0f0f0;
    padding: 40px 20px;
    font-family: Arial, sans-serif;
}

.banner-content {
    text-align: left;
    max-width: 1200px;
    margin: 0 auto;
}

.banner h1 {
    font-size: 2.5em;
    margin: 0;
    font-weight: 900;
    color: #1a1b1e;
}

.breadcrumb {
    margin-top: 10px !important;
    font-size: 1em !important;
    color: #564c4c !important;
}

.breadcrumb a {
   color: #a5b7d2;
    text-decoration: none;
}

.breadcrumb a:hover {
    color: #0096d1
    /* Optional hover effect */
}

.more {
    text-align: justify;
}

.row-outer {
    padding: 20px 0;
}
.heading {
    text-align: center;
}
.container {
    width: 95%;
    max-width: 1160px;
    margin: auto;
}
.heading {
    text-align: center;
    padding: 20px 0;
}
.grid-gallery {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-areas: 'item1 item1 item2 item3'
                         'item4 item4 item2 item5'
                         'item4 item4 item2 item6';
    grid-gap: 8px;
    padding: 0 45px 0 45px;
}
.item {
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center !important;
    min-height: 12rem;
    cursor: pointer;
    /* background: red; */
}
.item1 {
    grid-area: item1;
background-image: url('../img/24.jpeg');
background-size: cover; /* This will cover the entire area */
background-repeat: no-repeat;
background-position: center;

}
.item2 {
   
    grid-area: item2;
    background-image: url('../img/21.jpg');
    background-size: cover; /* This will cover the entire area */
    background-repeat: no-repeat;
    background-position: center;
}
.item3 {
    
    grid-area: item3;
    background-image: url('../img/22.jpg');
    background-size: cover; 
    background-repeat: no-repeat;
    background-position: center;
}
.item4 {
    grid-area: item4;
    background-image: url('../img/25.jpeg');
    background-size: cover; /* This will cover the entire area */
    background-repeat: no-repeat;
    background-position: center;
}
.item5 {
    grid-area: item5;
    background-image: url('../img/23.jpeg');
    background-size: cover; /* This will cover the entire area */
    background-repeat: no-repeat;
    background-position: center;
}
.item6 {
    grid-area: item6;
    background-image: url('../img/24.jpeg');
    background-size: cover; /* This will cover the entire area */
    background-repeat: no-repeat;
    background-position: center;
}

@media (max-width: 768px) {
    .grid-gallery { 
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-areas: "item1 item1 item2"
                             "item3 item4 item2"
                             "item5 item6 item2";
    }
    .payment-icons {
        flex-wrap: wrap;
        justify-content: center;
    }

    .donate-content {
        padding: 20px;
    }

    /* .decadeLink a {
        padding: 0.22em 0.10em 0.20em 0.10em !important;
        font-size: 16px !important;

        margin-top: 11px !important;
    } */
}
@media (max-width: 620px) {
    .grid-gallery { 
        grid-template-columns: 1fr 1fr;
        grid-template-areas: "item1 item3"
                             "item2 item4"
                             "item2 item5" 
                             "item2 item6";
    }
}
@media (max-width: 360px) {
    .grid-gallery { 
        grid-template-columns: 1fr;
        grid-template-areas: "item1"
                             "item2"
                             "item3" 
                             "item4"
                             "item5"
                             "item6";
    }
    .item2 {
        background-position: top;
    }
}