/* Hero Section */

#hero{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 40px 0px;
background: var(--hero-gradient);
}

#hero h1{
font-weight: 700;
font-size: 48px;
margin-bottom: 16px;
color: var(--text-light);
animation: onload 0.6s ease-in-out forwards !important;
}

#hero p{
max-width: 672px;
font-size: 20px;
color: var(--text-light);
animation: onload 0.7s ease-in-out forwards !important;
}

/* Purpose Section */

#purpose{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding-top: 64px;
padding-bottom: 64px;
background-color: #f7f5f2;
}

#purpose h2{
font-weight: 700;
font-size: 36px;
margin-bottom: 24px;
color: var(--primary-color);
animation: onload 0.8s ease-in-out forwards !important;
}

#purpose p{
text-align: start;
max-width: 904px;
font-size: 18px;
color: hsl(160 10% 40%);
padding: 0px 20px;
line-height: 1.625;
margin-bottom: 16px;
animation: onload 0.9s ease-in-out forwards !important;
}

/* Impact Section */

#impact{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding-top: 64px;
padding-bottom: 64px;
background-color: #ebe6e0;
}

#impact h2{
font-weight: 700;
font-size: 36px;
margin-bottom: 48px;
color: var(--primary-color);
animation: appear ease-in-out;
animation-timeline: view();
animation-range: entry 0% cover 30%;
}

#impact .cards-container {
display: grid;
grid-template-columns: repeat(4, 1fr); 
gap: 30px; 
width: 100%;
margin: 0 auto;
padding: 0 20px;
}

#impact .cards-container .card {
background-color: var(--background-light);
padding: 24px;
border-radius: 12px;
transition: transform 0.25s ease, box-shadow 0.25s ease;
transform: scale(1);
box-shadow: 0 6px 18px hsla(165, 75%, 25%, 0.25);
text-align: center;
animation: appear ease-in-out;
animation-timeline: view();
animation-range: entry 0% cover 30%;
}

#impact .cards-container .card:hover{
    transform: scale(1.05);
    box-shadow: 0 12px 32px hsla(165, 75%, 25%, 0.35);
}

#impact .cards-container .card svg {
background: var(--hero-gradient);
color: var(--text-light);          
border-radius: 50%;             
padding: 12px;                      
width: 60px;                          
height: 60px;                   
display: inline-block;         
margin: 0 auto; 
margin-bottom: 16px;
}

#impact .cards-container .card .init{
font-weight: 700;
font-size: 36px;
margin-bottom: 8px;
color: var(--secondary-color);
}

#impact .cards-container .card .desc{
color: hsl(160 10% 40%) !important;
margin: 0;
}

/* Value Section */

#value {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding-top: 64px;
padding-bottom: 64px;
background-color: #f7f5f2;
}
#value h2 {
font-weight: 700;
font-size: 36px;
margin-bottom: 48px;
color: var(--primary-color);
animation: appear ease-in-out;
animation-timeline: view();
animation-range: entry 0% cover 30%;
}

#value .cards-container {
display: grid;
grid-template-columns: repeat(3, 1fr); 
gap: 30px;
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}

#value .card {
background-color: var(--background-light);
padding: 24px;
border-radius: 12px;
transition: transform 0.25s ease, box-shadow 0.25s ease;
transform: scale(1);
box-shadow: 0 6px 18px hsla(165, 75%, 25%, 0.25);
animation: appear ease-in-out;
animation-timeline: view();
animation-range: entry 0% cover 30%;
}

#value .card:hover{
    transform: scale(1.05);
    box-shadow: 0 12px 32px hsla(165, 75%, 25%, 0.35);
}

#value .card h3{
font-weight: 700;
font-size: 24px;
margin-bottom: 12px;
color: var(--primary-color);
}

#value .card p{
color: var(--text-mute);
}

/* Team Section */

#team{
background: var(--hero-gradient);
padding: 64px 0px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}

#team h2{
font-weight: 700;
font-size: 36px;
margin-bottom: 24px;
color: var(--text-light);
animation: appear ease-in-out;
animation-timeline: view();
animation-range: entry 0% cover 30%;
}

#team h4{
max-width: 672px;
font-size: 20px;
margin-bottom: 32px;
color: var(--text-light);
font-weight: 400;
animation: appear ease-in-out;
animation-timeline: view();
animation-range: entry 0% cover 30%;
}

#team p{
max-width: 672px;
color: var(--text-light);
animation: appear ease-in-out;
animation-timeline: view();
animation-range: entry 0% cover 30%;
}

/* Media Query */

@media (max-width: 1024px) {
#impact .cards-container {
grid-template-columns: repeat(2, 1fr); 
}
}

@media (max-width: 768px) {
#impact .cards-container {
grid-template-columns: 1fr; 
}

#value .cards-container {
grid-template-columns: 1fr; 
}
}