/*
=========================================================
ROOTS OF HOPE FOUNDATION UGANDA
Main Website Stylesheet

Purpose:
Custom branding, layout, animations and responsive design.

CUSTOMIZE HERE:
You can change colors, fonts, spacing and visual identity.
=========================================================
*/


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

:root {

    /* CUSTOMIZE HERE:
       Main organization colors
    */

    --hope-green: #2f6b3b;
    --deep-green: #184d2a;
    --earth-brown: #8b5e3c;
    --warm-gold: #d4a017;
    --cream: #faf7ef;
    --light-green: #eaf3e5;

    --dark-text: #222222;
    --soft-text: #666666;

    --white: #ffffff;

}


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

* {

    margin: 0;
    padding: 0;
    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    font-family:
    "Poppins",
    "Segoe UI",
    Arial,
    sans-serif;

    background: var(--cream);

    color: var(--dark-text);

    line-height: 1.7;

}



/* =========================
   GENERAL ELEMENTS
========================= */


img {

    max-width:100%;

    display:block;

}


a {

    text-decoration:none;

    color:inherit;

}


.container {

    width:90%;

    max-width:1200px;

    margin:auto;

}


.section {

    padding:90px 0;

}



.section-title {

    text-align:center;

    margin-bottom:55px;

}


.section-title h2 {

    font-size:2.5rem;

    color:var(--deep-green);

    margin-bottom:15px;

}


.section-title p {

    max-width:700px;

    margin:auto;

    color:var(--soft-text);

}



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


.btn {


    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:14px 30px;

    border-radius:50px;

    font-weight:600;

    transition:.3s ease;

    cursor:pointer;

}



.btn-primary {


    background:var(--hope-green);

    color:white;

}


.btn-primary:hover {

    background:var(--deep-green);

    transform:translateY(-3px);

}



.btn-gold {


    background:var(--warm-gold);

    color:white;

}


.btn-gold:hover {


    opacity:.85;

}



/* =========================
   NAVIGATION
========================= */


.navbar {


    position:fixed;

    top:0;

    width:100%;

    z-index:999;

    background:white;

    box-shadow:
    0 2px 20px rgba(0,0,0,.08);


}



.nav-container {


    height:80px;

    display:flex;

    align-items:center;

    justify-content:space-between;


}


.logo {


    font-size:1.4rem;

    font-weight:700;

    color:var(--deep-green);


}


.logo span {


    color:var(--warm-gold);


}


.nav-links {


    display:flex;

    gap:30px;

    list-style:none;


}


.nav-links a {


    font-weight:500;

}


.nav-links a:hover {


    color:var(--hope-green);


}



.menu-toggle {


    display:none;

    font-size:2rem;

    cursor:pointer;


}



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


.hero {


    min-height:100vh;

    display:flex;

    align-items:center;

    color:white;

    position:relative;

    background-size:cover;

    background-position:center;


    /*
    CUSTOMIZE HERE:

    Replace image with your own:

    images/hero.jpg

    */

    background-image:

    linear-gradient(

    rgba(0,0,0,.55),

    rgba(0,0,0,.55)

    ),

    url("../images/hero.jpg");


}



.hero-content {


    max-width:850px;

}



.hero h1 {


    font-size:4rem;

    line-height:1.15;

    margin-bottom:25px;


}



.hero p {


    font-size:1.3rem;

    margin-bottom:35px;

}



/* =========================
   STORY SECTION
========================= */


.story-grid {


    display:grid;

    grid-template-columns:

    repeat(2,1fr);

    gap:50px;

    align-items:center;


}



.story-image img {


    border-radius:20px;

    box-shadow:

    0 15px 35px rgba(0,0,0,.15);


}


.story-content h3 {


    font-size:2rem;

    color:var(--deep-green);

    margin-bottom:20px;


}




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


.cards {


    display:grid;

    grid-template-columns:

    repeat(auto-fit,minmax(260px,1fr));

    gap:30px;


}



.card {


    background:white;

    border-radius:20px;

    overflow:hidden;

    box-shadow:

    0 10px 30px rgba(0,0,0,.08);

    transition:.3s;


}



.card:hover {


    transform:translateY(-8px);


}



.card img {


    height:220px;

    width:100%;

    object-fit:cover;


}


.card-content {


    padding:30px;


}


.card h3 {


    color:var(--deep-green);

    margin-bottom:15px;


}



/* =========================
   VISION SECTION
========================= */


.vision {


    background:

    var(--deep-green);

    color:white;

    text-align:center;


}



.vision h2 {


    font-size:2.8rem;

}



/* =========================
   NEEDS SECTION
========================= */


.need-box {


    background:white;

    padding:30px;

    border-left:

    6px solid var(--hope-green);

    border-radius:15px;

    margin-bottom:20px;


}


.need-box h3 {


    color:var(--deep-green);

}



/* =========================
   DONATION SECTION
========================= */


.donation-card {


    background:white;

    padding:35px;

    border-radius:20px;

    box-shadow:

    0 10px 25px rgba(0,0,0,.08);

    margin-bottom:30px;


}



.donation-card h3 {


    color:var(--deep-green);

}



/* =========================
   CONTACT
========================= */


.contact-form input,

.contact-form textarea {


    width:100%;

    padding:15px;

    margin-bottom:15px;

    border-radius:10px;

    border:1px solid #ddd;


}



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


footer {


    background:#161616;

    color:white;

    padding:50px 0;

    text-align:center;


}



/* =========================
   ANIMATIONS
========================= */


.fade-up {


    animation:

    fadeUp 1s ease forwards;


}



@keyframes fadeUp {


    from {

        opacity:0;

        transform:translateY(30px);

    }


    to {

        opacity:1;

        transform:translateY(0);

    }


}




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


@media(max-width:900px){


.nav-links {


    position:absolute;

    top:80px;

    left:0;

    width:100%;

    background:white;

    flex-direction:column;

    padding:30px;

    display:none;


}


.nav-links.active {


    display:flex;


}



.menu-toggle {


    display:block;


}



.hero h1 {


    font-size:2.5rem;


}


.story-grid {


    grid-template-columns:1fr;


}


}
/* Mobile spacing fix */
@media (max-width: 768px) {

    body {
        overflow-x: hidden;
    }

    section {
        padding-left: 20px;
        padding-right: 20px;
    }

    h1, h2, h3, p {
        max-width: 100%;
        word-wrap: break-word;
    }

    .container {
        width: 100%;
        padding-left: 20px;
        padding-right: 20px;
    }
}