body {
    margin: 0;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif

}

/*NAV BAR (top section aesthetics)*/
header {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    background: white;

} 

/* LOGO (Leeds Aid Network)*/ 
    .logo {
        display: flex; /*(side by side instead of stacked)*/ 
        align-items: center;
        gap: 10px; 
        color:#589458; 
        font-weight: 400;
        font-size: 16px;
        line-height: 1.0;
    }

    /* LOGO (emojs at the side)*/ 
.logo-icon {
    font-size: 18px;                                                  
}

nav a { /*(styles links inside the <a> bar)*/ 
margin-left: 25px;
text-decoration: none; 
color: black; /*(makes text black)*/ 
font-weight: 600; 
font-size: 16px; 

} 
/* HERO */ /*(main section of site)*/ 
.hero {
min-height: 550px; 
padding: 90px 70px 0; 

background:
linear-gradient(to right, #f7f3ee 45%, rgba(247,243,238,0.5) 60%, rgba(247,243,238,0) 75%),/*(rgba lets you make gradient - 60% = fading)*/ 
url("https://nonprofitpoint.com/wp-content/uploads/2025/03/image-197.png");

background-size: cover; 
background-position: center right;
background-repeat: no-repeat;
}

/* TEXT */
.hero-content h1 { /*(styling the 'we're here to solve hunger..' text )*/
font-size: 55px;
font-weight: 800;
max-width: 520px;
margin-bottom: 20px;
}

.hero-content p { /*(info underneath)*/ 
font-size: 18px;
line-height: 1.0;
max-width: 430px;
margin-bottom: 15px;
}


/* CARDS (boxes underneath)*/
.card {
background: white;  
width: 180px;
min-height: 180px;
border-radius: 15px;
text-align: center;
text-decoration: none; /*(visible links)*/ 
color: #222;
padding: 20px 20px;
box-shadow: 0 30px 20px rgba(0,0,0,0.15);
} 

.cards {
display: flex;
gap: 25px;
margin-top: 50px;
justify-content: flex-start; 
}

.icon {
font-size: 25px;
margin-bottom: 18px;
}

/*(little text inside the boxes)*/ 
.card p {
font-size: 15px;
}

/* FOOTER */
footer {
    background:white
    color: white
    padding: 20px;
    text-align: center; 
    font-size: 15px; 
}

/* EMERGENCY PAGE ONLY */ 
.emergency-page .hero {
position: relative;
min-height: 500px;
background: #f7f3ee;

min-height: 500px; 
padding: 90px 70px 0; 

background:
linear-gradient(to right, #f7f3ee 45%, rgba(247,243,238,0.5) 60%, rgba(247,243,238,0) 75%),/*(rgba lets you make gradient - 60% = fading)*/ 
url("https://images.stockcake.com/public/7/3/d/73d0bc78-9317-41c7-a6e0-3dc4d385270e_large/food-bank-service-stockcake.jpg"); 

background-size: cover; 
background-position: center right;
background-repeat: no-repeat;
}

.emergency-page .hero-content {
max-width: 550px;
}

.emergency-page .emergency-features {
width: 1000px; 
margin-left: -8px; 
margin-top: 60px;
display: block; 
}

.emergency-page .features-container {
display: flex; 
gap:40px;
}

/* Emojis */
.emergency-page .feature .icon {
font-size: 20px;
margin-bottom: 10px;
}

/* Titles */
.emergency-page .feature h3 {
font-size: 20px; 
margin-bottom: 8px; 
}

/* Smaller text */
.emergency-page .feature p {
font-size: 15px;
color: black;
line-height: 0.5;
}

/* Button */
.emergency-page .cta-button {
display:block;
background:white; 
color: black; 
padding: 15px 15px;
border-radius: 15px;
text-decoration: none;
font-size: 18px;
margin-top: 30px; 
width: fit-content; 
}

.emergency-page .footer {
background:white; 
color:black; 
padding: 20px;
text-align: center; 
}

/* DONATIONS PAGE ONLY */ 
.donations-page .hero {
position: relative;
min-height: 500px;
background: #f7f3ee;

min-height: 500px; 
padding: 90px 70px 0; 

background:
linear-gradient(to right, #f7f3ee 45%, rgba(247,243,238,0.5) 60%, rgba(247,243,238,0) 75%),/*(rgba lets you make gradient - 60% = fading)*/ 
url("https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/food-bank-donations-1636994752.jpg?crop=1.00xw:0.753xh;0,0.160xh&resize=1200:*"); 

background-size: cover; 
background-position: center right;
background-repeat: no-repeat;
}

.donations-page .hero-content {
max-width: 550px;
}

.donations-page .donations-features {
width: 1000px; 
margin-left: -8px; 
margin-top: 60px;
display: block; 
}

.donations-page .features-container {
display: flex;
flex-direction: column;
gap: -5px; 
}

/* Emojis */
.donations-page .feature .icon {
font-size: 20px;
margin-bottom: 20px;
}

/* Titles */
.donations-page .feature h3 {
font-size: 20px; 
margin-bottom: 8px; 
}

/* Smaller text */
.donations-page .feature p {
font-size: 15px;
color: black;
line-height: 0.5;
}

/* Button */
.donations-page .cta-button {
display:inline-block;
background:white; 
color: black; 
padding: 15px 15px;
border-radius: 15px;
text-decoration: none;
font-size: 18px;
margin-top: 30px; 
margin-bottom: 100px; 
width: fit-content; 
margin-left: -10px; 
}

.donations-page .footer {
background:white; 
color:black; 
padding: 20px;
text-align: center; 
}

/* SUPPORT PAGE  ONLY */

.support-page .hero {
position: relative;
min-height: 500px;
background: #f7f3ee;

min-height: 500px; 
padding: 90px 70px 0; 

background:
linear-gradient(to right, #f7f3ee 45%, rgba(247,243,238,0.5) 60%, rgba(247,243,238,0) 75%),/*(rgba lets you make gradient - 60% = fading)*/ 
url("https://img.freepik.com/premium-photo/women-holding-hands-closeup-therapy-mental-health-support-consultation-problem-sofa-woman-helping-hand-psychologist-wellness-conversation-advice-care-depression_590464-134727.jpg"); 

background-size: cover; 
background-position: center right;
background-repeat: no-repeat;
} 

.support-page .hero-content {
max-width: 550px;
} 

.support-page h1 {
font-size: 55px; 
}

.support-page p {
font-size: 18px; 
}

.support-page .card {
background: white;  
width: 180px;
min-height: 180px;
border-radius: 15px;
text-align: center;
text-decoration: none; /*(visible links)*/ 
color: #222;
padding: 20px 20px;
box-shadow: 0 30px 20px rgba(0,0,0,0.15);
} 

.support-page .cards {
display: flex;
flex-direction: row; 
gap: 25px;
margin-top: 50px;
justify-content: flex-start; 
}

.support-page .card h3 {
font-size: 18px;
margin-bottom: 10px;
}

/*(little text inside the boxes)*/ 
.support-page .card p {
font-size: 14px;
line-height: 1.2; 
}

.support-page .footer {
background:white; 
color:black; 
padding: 20px;
text-align: center; 
}

/* ABOUT US PAGE ONLY */ 
.aboutus-page .hero {
position: relative;
min-height: 500px;
background: #f7f3ee;

min-height: 500px; 
padding: 90px 70px 0; 

background:
linear-gradient(to right, #f7f3ee 45%, rgba(247,243,238,0.5) 60%, rgba(247,243,238,0) 75%),/*(rgba lets you make gradient - 60% = fading)*/ 
url("https://nonprofitpoint.com/wp-content/uploads/2025/03/image-197.png"); 

background-size: cover; 
background-position: center right;
background-repeat: no-repeat;
}

.aboutus-page .hero-content h1 {  
font-size: 55px;
font-weight: 800;
max-width: 520px;
margin-bottom: 20px;
}

.aboutus-page .hero-content p {  
font-size: 13px;
line-height: 1.0;
max-width: 430px;
margin-bottom: 15px;
}

@media (max-width: 768px) {

body {
overflow-x: hidden;
}

section, .hero {
width: 100%;
padding: 30px 15px;
}

.cards,
.features,
.donation-options,
.support-cards {
display: flex;
flex-direction: column;
align-items: center;
}

.card,
.feature,
.donation-option,
.support-card {
width: 90%;
max-width: 300px;
margin-bottom: 15px;
}

h1 {
font-size: 28px;
}

p {
font-size: 14px;
}

footer {
padding: 15px;
font-size: 12px;
}
}