/* ============================
   NGO FRONTEND STYLE
============================ */


/* ============================
   BRAND COLORS
============================ */

:root {
    --ngo-green: #0F766E;
    --ngo-yellow: #F59E0B;
    --ngo-red: #DC2626;
    --ngo-blue: #2563EB;
    --ngo-dark: #1F2937;
    --ngo-light: #f8f9fa;
}



/* ============================
   GLOBAL
============================ */

body {
    font-family: "Poppins", Arial, sans-serif;
    background:#fff;
}


.card {
    transition:.3s ease;
}


.card:hover {
    transform:translateY(-5px);
}



/* ============================
   NAVBAR
============================ */

.navbar-brand {
    font-size:24px;
    font-weight:700;
}


.nav-link {
    font-weight:500;
    margin:0 5px;
}


.nav-link:hover {
    color:var(--ngo-yellow)!important;
}



/* ============================
   HERO
============================ */

.hero-section {

    min-height:550px;

    background:
    linear-gradient(
        rgba(25,135,84,.85),
        rgba(25,135,84,.85)
    ),
    url('/images/ngo-banner.jpg');


    background-size:cover;
    background-position:center;

    display:flex;
    align-items:center;
}


.hero-section h1 {
    font-size:48px;
    font-weight:700;
}


.hero-section p {
    font-size:18px;
}



/* ============================
   SECTION TITLE
============================ */

.section-title h2 {

    font-weight:700;

}


.section-title h2:after {

    content:"";

    display:block;

    width:60px;

    height:3px;

    background:var(--ngo-green);

    margin:15px auto;

}



/* ============================
   NGO CARDS
============================ */

.ngo-card {

    border:0;

    border-radius:15px;

}


.ngo-icon {

    width:70px;

    height:70px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:30px;

    margin:auto;

}



/* ============================
   BUTTONS
============================ */

.btn-donate {

    background:var(--ngo-yellow);

    color:#000;

    border-radius:30px;

    padding:12px 30px;

    font-weight:600;

}


.btn-donate:hover {

    background:#ffca2c;

    transform:scale(1.05);

}



/* ============================
   PROJECT / GALLERY / NEWS
============================ */

#gallery .card,
#project .card,
#subscription .card,
#newspost .card,
#contact .card {

    border-radius:15px;

    overflow:hidden;

}


#gallery img,
#project img,
#newspost img {

    width:100%;

    object-fit:cover;

}


#gallery img {

    height:250px;

    transition:.4s;

}


#gallery .card:hover img {

    transform:scale(1.08);

}


#project img {

    height:230px;

}


#newspost img {

    height:220px;

}



/* ============================
   DONATION PROGRESS
============================ */

.progress-bar {

    transition:1s ease;

}



/* ============================
   BENEFICIARY / IMPACT
============================ */

.counter-box {

    text-align:center;

}


.counter-box h2 {

    color:var(--ngo-green);

    font-size:42px;

    font-weight:700;

}



/* ============================
   SOCIAL ICON
============================ */

.social-icon {

    width:40px;

    height:40px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

}



/* ============================
   FOOTER
============================ */

footer {

    background:var(--ngo-dark);

}


footer a {

    transition:.3s;

}


footer a:hover {

    color:var(--ngo-yellow)!important;

    padding-left:5px;

}



/* ============================
   MOBILE
============================ */

@media(max-width:768px){


.hero-section {

    min-height:450px;

    text-align:center;

}


.hero-section h1 {

    font-size:32px;

}


.hero-section p {

    font-size:16px;

}


.counter-box h2 {

    font-size:32px;

}


}