body{

margin:0;
font-family:Arial;

background:#f5f5f5;

}

header{

background:#00695c;

color:white;

padding:50px;

text-align:center;

}

nav{

background:#004d40;

padding:15px;

text-align:center;

}

nav a{

color:white;

margin:20px;

text-decoration:none;

font-weight:bold;

}

.header{

    background:#0b6b5a;
    color:white;
    padding:25px;

}

.logo-area{

    display:flex;
    align-items:center;
    justify-content:center;
    gap:20px;

}

.logo-area img{

    width:90px;
    height:90px;

}

.logo-area h1{

    margin:0;
    font-size:42px;

}

.logo-area p{

    margin-top:8px;
    font-size:18px;

}

/* ===========================
   MAIN CONTENT
   =========================== */

.container{
    width:90%;
    max-width:1200px;
    margin:auto;
}

section{
    padding:70px 0;
}

section h2{
    color:#065f46;
    margin-bottom:20px;
    font-size:32px;
}

section p{
    line-height:1.8;
    color:#444;
}

/* HERO */

.hero{

background:linear-gradient(
rgba(0,90,70,.75),
rgba(0,90,70,.75)
),

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

background-size:cover;

background-position:center;

color:white;

text-align:center;

padding:150px 20px;

}

.hero h2{

font-size:52px;

margin-bottom:20px;

color:white;

}

.hero p{

font-size:22px;

color:white;

max-width:700px;

margin:auto;

line-height:1.8;

}

.hero-content{

max-width:900px;

margin:auto;

}

.btn{

display:inline-block;

margin-top:40px;

padding:15px 35px;

background:#FFD54F;

color:#065f46;

text-decoration:none;

font-weight:bold;

border-radius:8px;

transition:.3s;

}

.btn:hover{

background:#FFC107;

transform:translateY(-3px);

}

/* PROGRAM */

#program{
    background:white;
}

.program-list{
    display:flex;
    justify-content:center;
    gap:30px;
    flex-wrap:wrap;
}

.card{
    width:250px;
    padding:30px;
    background:white;
    border-radius:10px;
    box-shadow:0 4px 12px rgba(0,0,0,.1);
    text-align:center;
    font-size:22px;
    font-weight:bold;
    transition:.3s;
}

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

#berita,
#ppdb,
#donasi,
#galeri,
#kontak{
    background:#f8fafc;
}