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

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}

html {
    scroll-behavior: smooth;
}

body {
    background: #f4f7f6;
    color: #333;
    line-height: 1.6;
}


/* =========================
   HEADER & NAVIGATION
========================= */

header {
    background: #1f7a3d;
    color: white;
    padding: 20px 0;
    box-shadow: 0 3px 10px rgba(0,0,0,.15);
}

nav {
    width: 90%;
    max-width: 1200px;
    margin: auto;

    display: flex;
    justify-content: space-between;
    align-items: center;
}

nav h1 {
    font-size: 28px;
    font-weight: bold;
}

nav ul {
    list-style: none;
    display: flex;
    gap: 25px;
}

nav ul li a {
    color: white;
    text-decoration: none;
    font-weight: bold;
    transition: .3s;
}

nav ul li a:hover {
    color: #ffdd57;
}


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

.hero {

    min-height: 85vh;

    display: flex;
    justify-content: center;
    align-items: center;

    text-align: center;

    padding: 40px;

    color: white;

    background:
    linear-gradient(
        rgba(0,0,0,.65),
        rgba(0,0,0,.65)
    ),
    url("images/hero.jpg");

    background-size: cover;
    background-position: center 40%;
background-repeat: no-repeat;

}


.hero-content {
    max-width: 850px;
}


.hero-tag {

    display: inline-block;

    background: #28a745;

    padding: 8px 20px;

    border-radius: 50px;

    margin-bottom: 25px;

    font-weight: bold;

}


.hero h2 {

    font-size: 60px;

    line-height: 1.1;

    margin-bottom: 25px;

}


.hero p {

    font-size: 22px;

    max-width: 700px;

    margin: auto auto 35px;

    color: #f1f1f1;

}


.hero-buttons {

    display: flex;

    justify-content: center;

    gap: 20px;

    flex-wrap: wrap;

}



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


.btn {

    display: inline-block;

    padding: 14px 32px;

    background: #28a745;

    color: white;

    text-decoration: none;

    border-radius: 6px;

    font-weight: bold;

    transition: .3s;

}


.btn:hover {

    background: #1d7c34;

    transform: translateY(-2px);

}


.btn-secondary {

    background: white;

    color: #1f7a3d;

}


.btn-secondary:hover {

    background: #eeeeee;

}



/* =========================
   CONTENT SECTIONS
========================= */


.container {

    width: 90%;

    max-width: 1200px;

    margin: auto;

    padding: 70px 0;

}



.section-title {

    text-align: center;

    font-size: 38px;

    margin-bottom: 45px;

    color: #1f7a3d;

}



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


.cards {

    display: grid;

    grid-template-columns:
    repeat(auto-fit, minmax(250px, 1fr));

    gap: 30px;

}



.card {

    background: white;

    padding: 35px;

    border-radius: 15px;

    text-align: center;

    box-shadow:
    0 5px 15px rgba(0,0,0,.1);

    transition: .3s;

}


.card:hover {

    transform: translateY(-10px);

    box-shadow:
    0 15px 35px rgba(0,0,0,.15);

}



.card h3 {

    color: #1f7a3d;

    margin-bottom: 15px;

    font-size: 22px;

}



.card p {

    color: #555;

}



.icon {

    font-size: 45px;

    margin-bottom: 15px;

}



/* =========================
   STATISTICS
========================= */


.stats {

    background: #1f7a3d;

    color: white;

    display: grid;

    grid-template-columns:
    repeat(auto-fit,minmax(220px,1fr));

    gap: 30px;

    padding: 70px 30px;

    text-align: center;

}



.stat h2 {

    font-size: 45px;

    margin-bottom: 10px;

}


.stat p {

    font-size: 18px;

}



/* =========================
   CALL TO ACTION
========================= */


.cta {

    background: #28a745;

    color: white;

    text-align: center;

    padding: 80px 30px;

}


.cta h2 {

    font-size: 42px;

    margin-bottom: 20px;

}


.cta p {

    font-size: 20px;

    margin-bottom: 35px;

}



/* =========================
   FORMS
========================= */


form {

    background: white;

    padding: 35px;

    border-radius: 15px;

    box-shadow:
    0 5px 15px rgba(0,0,0,.1);

}



input,
textarea {

    width: 100%;

    padding: 14px;

    margin: 10px 0 20px;

    border:

    1px solid #ccc;

    border-radius: 6px;

    font-size: 16px;

}



button {

    background: #28a745;

    color:white;

    border:none;

    padding:14px 30px;

    border-radius:6px;

    cursor:pointer;

    font-weight:bold;

}


button:hover {

    background:#1d7c34;

}



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


footer {

    background:#222;

    color:white;

    text-align:center;

    padding:25px;

}



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


@media(max-width:768px) {


    nav {

        flex-direction: column;

        gap:20px;

        text-align:center;

    }


    nav ul {

        flex-direction: column;

        gap:15px;

    }


    .hero h2 {

        font-size:40px;

    }


    .hero p {

        font-size:18px;

    }


    .section-title {

        font-size:30px;

    }


    .cta h2 {

        font-size:32px;

    }

}