/* ===========================
   Justice Bridge Project
   Main Stylesheet
=========================== */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{
font-family:'Inter',sans-serif;
background:#f8f6f3;
color:#333;
line-height:1.7;
}

.container{
width:min(1200px,90%);
margin:auto;
}

/* ===========================
   Navigation
=========================== */
/* ===========================
   Announcement Bar
=========================== */

.announcement-bar{
    background:#b08d57;
    color:white;
    text-align:center;
    padding:10px 20px;
    font-size:15px;
    font-weight:500;
    letter-spacing:.3px;
}

.navbar{
    position:sticky;
    top:0;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:16px 40px;
    background:#0f2942;
    z-index:1000;
    box-shadow:0 5px 20px rgba(0,0,0,.12);
}

.navbar ul{
    display:flex;
    align-items:center;
    list-style:none;
    gap:22px;
    margin:0;
    padding:0;
}

.logo{
    display:flex;
    align-items:center;
    gap:15px;
    font-family:'Cormorant Garamond',serif;
    font-size:30px;
    font-weight:700;
    color:white;
}

.logo-img{
    width:60px;
    height:60px;
    object-fit:contain;
    display:block;
    flex-shrink:0;
}

.logo span{
    color:white;
    font-size:28px;
    font-weight:700;
    font-family:'Cormorant Garamond', serif;
}

.navbar ul{
display:flex;
list-style:none;
gap:30px;
}

.navbar a{
color:white;
text-decoration:none;
font-weight:500;
transition:.3s;
}

.navbar a:hover{
color:#d4af37;
}

.donate-button{
background:#b08d57;
padding:12px 24px;
border-radius:8px;
font-weight:600;
}

.donate-button:hover{
background:#c9a86a;
color:white;
}

/* ===========================
   Hero
=========================== */

.hero{
height:100vh;
background:
linear-gradient(rgba(60,42,28,.60),rgba(60,42,28,.60)),
url("https://images.unsplash.com/photo-1589829545856-d10d557cf95f?auto=format&fit=crop&w=1800&q=80");
background-size:cover;
background-position:center;
display:flex;
align-items:center;
}

.hero-overlay{
width:100%;
}

.hero-content{
max-width:700px;
margin-left:8%;
color:white;
}

.hero-tag{
display:inline-block;
background:rgba(255,255,255,.15);
padding:10px 18px;
border-radius:40px;
margin-bottom:25px;
font-size:14px;
}

.hero h1{
font-family:'Cormorant Garamond',serif;
font-size:72px;
line-height:1.05;
margin-bottom:25px;
}

.hero p{
font-size:21px;
margin-bottom:35px;
max-width:600px;
}

.hero-buttons{
display:flex;
gap:15px;
flex-wrap:wrap;
}

.primary-btn,
.secondary-btn,
.card-button{

display:inline-block;
padding:15px 28px;
border-radius:8px;
text-decoration:none;
font-weight:600;
transition:.3s;

}

.primary-btn{
background:#b08d57;
color:white;
}

.secondary-btn{
background:white;
color:#0f2942;
}

.primary-btn:hover,
.secondary-btn:hover,
.card-button:hover{

transform:translateY(-4px);

}

/* ===========================
   Sections
=========================== */

section{
padding:100px 0;
}

section h2{
font-family:'Cormorant Garamond',serif;
font-size:48px;
text-align:center;
color:#0f2942;
margin-bottom:20px;
}

.section-intro{
text-align:center;
max-width:750px;
margin:0 auto 50px;
font-size:19px;
}

/* ===========================
   Cards
=========================== */

.cards{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:30px;
}

.card{

background:white;
padding:35px;
border-radius:18px;
box-shadow:0 15px 35px rgba(0,0,0,.08);
transition:.35s;

}

.card:hover{

transform:translateY(-10px);

}

.card h3{

font-size:24px;
margin-bottom:15px;
color:#0f2942;

}

.card p{

color:#555;

}

.card-button{

margin-top:20px;
background:#0f2942;
color:white;

}

/* ===========================
   Mission / Founder
=========================== */

.mission,
.founder,
.why-exists,
.vision,
.our-values{

text-align:center;

}

.mission p,
.founder p,
.why-exists p,
.vision p{

max-width:850px;
margin:auto;
font-size:20px;

}

/* ===========================
   Footer
=========================== */

footer{

background:#0f2942;
color:white;
text-align:center;
padding:70px 20px;

}

footer h2{

color:white;
margin-bottom:20px;

}

footer p{

margin-bottom:12px;

}

/* ===========================
   Contact Form
=========================== */

.contact-form{

display:flex;
flex-direction:column;
gap:20px;
max-width:700px;
margin:40px auto;

}

.contact-form input,
.contact-form textarea{

padding:16px;
border-radius:10px;
border:1px solid #ddd;
font-size:16px;

}

.contact-form button{

background:#b08d57;
color:white;
padding:16px;
border:none;
border-radius:10px;
font-size:18px;
cursor:pointer;

}

.contact-form button:hover{

background:#9c7846;

}

/* ===========================
   Responsive
=========================== */

@media(max-width:900px){

.navbar{

flex-direction:column;
gap:20px;
padding:20px;

}

.navbar ul{

flex-wrap:wrap;
justify-content:center;

}

.hero h1{

font-size:50px;

}

.hero-content{

margin:0 30px;

}

section{

padding:70px 20px;

}

}
/* ===========================
   Impact Section
=========================== */

.impact{
    background:#f2efe9;
}

.impact .card{
    transition:transform .3s ease, box-shadow .3s ease;
}

.impact .card:hover{
    transform:translateY(-8px);
    box-shadow:0 18px 35px rgba(0,0,0,.12);
}
/* ===========================
   Find Help Section
=========================== */

.help-topics{
    background:#ffffff;
}

.help-topics .card{
    border-top:5px solid #b08d57;
}