/*
Template Name: Nonprofitx | Charity & Donation Website Template
Author: Pillarix
Author URI: https://wrapbootstrap.com/user/pillarix
Version: 1.0
*/


/*
-- Body
-- Custom Classes
-- Side Navbar
-- Index 
-- Projects
-- About
-- Volunteer
-- Contact
-- Post-1
-- Post-2
-- Post-3
-- Admin
-- Footer
*/

@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@100;200;300;400;500;600;700;800&family=DM+Sans:opsz,wght@9..40,100;9..40,200;9..40,300;9..40,400;9..40,500;9..40,600&family=Homemade+Apple&display=swap');

/* Body */

body {
    font-family: 'DM Sans', sans-serif;
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Barlow', sans-serif;
}

.handwriting-font {
    font-family: 'Homemade Apple', cursive;
}

a {
    text-decoration: none;
    color: #1b1b1b;
}

a:hover {
    color: green;
}


/* Custom Classes */

.charity-nav a.nav-link {
    padding-top: 29px !important;
    padding-bottom: 29px !important;
    color: #000 !important;
}

.w-15 {
    width: 15% !important;
}


/* Side Navbar */

.sidebar-nav .nav-link.active {
    color: #ffc107;
}

p {
    font-size: 18px;
}


/* Index */

.carousel-item img {
    max-height: 60vh;
    object-fit: cover;
}

.bg-homepage {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../img/bg-baner.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.provide-img {
    width: 50px;
}

.provide {
    /* margin-top: -8rem; */
}

.card-container {
    background-color: #e9ffd1;
    position: relative;
}

.card-container-section {
    background-color: #fff0;
}

.card-container-section::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: linear-gradient( 316deg, rgba(59, 90, 60, 0) 45%, var(--e-global-color-secondary, #3b5a3c) 45%);
    opacity: 1;
    left: 0;
    width: 50%;
}

.card-container-Gallery {
    background-color: #fff0;
}

.card-container-Gallery::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: linear-gradient(316deg, rgba(59, 90, 60, 0) 45%, var(--e-global-color-secondary, #3b5a3c) 45%);
    opacity: 1;
    left: 0;
    width: 50%;
}

.bg-secondary-subtle {
    background-image: linear-gradient(rgba(233, 255, 209, 0.85), rgba(233, 255, 209, 0.85)), url(../img/gsa-doodle.png);
}

.bg-secondary-subtle p {
    font-size: 20px !important;
}

#grm img {
    width: 100%;
    height: 200px;
}

.school-video {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../img/bgHome.jpg);
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    height: 800px;
}


/* Projects */

.bg-project {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../img/bg-project.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.bg-volunteer {
    background-image: linear-gradient(rgb(0 0 0 / 0%), rgb(0 0 0 / 39%)), url(../img/Awards.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.overlay {
    content: '';
    position: absolute;
    inset: 0;
    background-color: #3b5a3c96;
    mix-blend-mode: multiply;
    z-index: 1;
}

.bg-volunteer .container {
    z-index: 2;
    position: relative;
}


/* About */

.bg-about {
    height: 85vh;
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../img/about-gsa.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.work-img {
    width: 70px;
}


/* Volunteer */

.bg-volunteer-page {
    height: 85vh;
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../img/Gallery.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.bg-volunteer-page2 {
    height: 85vh;
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../img/photo/102.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}


/* Contact */

.bg-contact {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../img/bg-contact.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}


/* Post-1 */

.bg-post-1 {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://iamosahan.com/wrapbootstrap-pillarix/nonprofitx/img/post/post-1.jpg);
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
}

.b-icon {
    height: 25px;
    width: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* Post-2 */

.bg-post-2 {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://iamosahan.com/wrapbootstrap-pillarix/nonprofitx/img/post/post-2.jpg);
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
}


/* Post-3 */

.bg-post-3 {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://iamosahan.com/wrapbootstrap-pillarix/nonprofitx/img/post/post-3.jpg);
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
}

.comment-img {
    width: 60px;
}


/* Admin */

.icon-sm {
    height: 30px;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* Footer */

.social-icon {
    height: 35px;
    width: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

footer .footer-top a {
    color: #6c757d;
}

footer .footer-top a:hover {
    color: green;
}

footer .footer-top .social-icon {
    border: 1px solid #6c757d;
}

footer .footer-top .social-icon:hover {
    border: 1px solid green;
}

.logo-text {
    font-size: 24px;
    line-height: 40px;
    font-weight: 800;
}

.logo-text-span {
    font-size: 22px !important;
}

.tobacco-control-p {
    font-size: 20px;
}

@media screen and (max-width: 769px) {
    .card-container-section::before {
        background-image: inherit;
    }
    .logo-text {
        font-size: 10px;
    }
    .bg-volunteer-page {
        height: 50vh;
        background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../img/Team-Members.jpg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
    .bg-volunteer-page2 {
        height: 50vh;
        background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../img/photo/102.jpg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
    .gallery {
        column-count: 4;
        --webkit-column-count: 4;
        --moz-column-count: 4;
        gap: 1rem;
        padding: 1rem !important;
    }
}

#Initiatives img {
    width: 100%;
    height: 300px;
}

@media (min-width: 1200px) {
    .display-1 {
        font-size: 60px !important;
    }
}