/* HERO SECTION */
#Hero-Section {
position: relative;

width: 100dvw;
height: 95lvh;

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

#Hero-Background, #Hero-Background img {
position: absolute;
height: 100%;
width: 100%;

top: 0;
left: 0;

z-index: -2;
object-fit: cover; /* Ensure the image covers the container while maintaining aspect ratio */
object-position: center; 
}


#Hero-Background:before {
content: "";

position: absolute;
height: 100%;
width: 100%;

top: 0;
left: 0;

background-color: #000000;
opacity: 0.4;

z-index: 1;
}

#Hero-Text {
display: flex;
flex-direction: column;

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

height: 100%;
width: 80%;
text-align: center;

z-index: 1;
}

#Hero-Text h1 {
font-size: clamp(3.5rem, 5vw, 8rem);
}

#Hero-Text h2 {
    color: var(--acorn);
}

#Hero-Text h3 {
    font-size: clamp(2rem, 2vw, 2rem);
    font-weight: normal;

    color: var(--acorn);
    margin-bottom: 0.25rem;
}

#Hero-Text button {
    margin-top: 1rem;

    padding: 1rem 2rem;
    background-color: green;

    font-size: 1.25rem;
    font-weight: bold;

    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

/* Services */
#Services {
    background-color: var(--offwhite);
}


h2  {
    font-weight: bold;
}

#Services-Cards {
    margin-bottom: 5rem;
    padding-bottom: 2rem;
}

#Services-Cards h3 {
    color: black;
    margin-bottom: 1rem;
    font-size: 1.5rem;
    font-weight: bold;
}

#Services-Cards p {
    font-size: 1.25rem;
    text-align: center;
}

#Services-Cards a {
    font-size: 1.5rem;
    text-decoration: none;
    color: #38642A;
    font-weight: bold;

    margin-bottom: 0.5rem;
}


#Service-Heading {
    text-align: center;
    font-size: clamp(3rem, 4vw, 4rem);

    padding: 2rem;
    color: #38642A;
}

#Services-Cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;

    gap: 3rem;
}

.Service-Card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    height: 28rem;
    width: 21rem;
}

.Service-Image {
    width: 100%;    
    height: 70%;

    border-radius: 5px;
}

.Service-Info-Box {
    min-height: 50%;
    width: 75%;

    margin-top: -20%;
    padding: 0 1rem;
    background-color: white;
    
    border-radius: 5px;

    display: flex;
    flex-direction: column;
    align-items: center;

    filter: drop-shadow(0.35rem 0.35rem 0.6rem rgba(26, 48, 20, 0.05));
}

.Icon-Circle {
    margin-top: -50px;

    height: 100px;
    width: 100px;

    border-radius: 50%;
    background-color: white;

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

.Icon {
    height: 100px;
    width: auto;

    z-index: 20;
}

.Service-Text {
    text-align: center;
    height: 100%;

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

/* About Us */
#About-Us-Container {
    display: flex;
    justify-content: center;
    align-items: center;
}


.About-Us-Section {
    display: flex;
    flex-wrap: wrap;
    align-items: space-around;
    justify-content: space-between;
    padding: 0px 20px;

    max-width: 100rem;
}

.About-Us-Content {
    flex: 1;
    padding: 20px;
}


.About-Us-Content h3 {
    margin-bottom: 0.5rem;

    font-size: clamp(3rem, 6vw, 4rem);
    color: #38642A;
}

.About-Us-Content p {
    margin-bottom: 1rem;
}

.About-Us-Image {
    flex: 1;
    padding: 20px;
    border-radius: 10px; /* Rounded corners for the image */
    overflow: hidden; /* Ensures rounded corners are applied */
}

.About-Us-Image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px; /* Rounded corners for the image */
}

.About-Us-Content button {
    width: fit-content;

    padding: 1rem 1rem;
    cursor: pointer;
    
    border: none;
    border-radius: 5px;
    
    font-weight: bold;
    font-size: 1.1rem;

    color: white;
    background-color: #38642A;
}

@media (max-width: 56rem) {
    .About-Us-Section {
        flex-direction: column-reverse;
    }

    .About-Us-Content, .About-Us-Image {
        flex: 1 1 100%;
        padding: 10px;
    }
}

/* Gallery */
#Gallery-Container {
    display: flex;
    justify-content: center;
    align-items: center;

    background-color: var(--offwhite);
    margin-top: 2rem;
    margin-bottom: 4rem;
}


.Gallery-Section {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    align-items: space-around;
    justify-content: space-between;
    padding: 1rem 0rem;


    max-width: 100rem;
}

.Gallery-Content {
    flex: 1;
    padding: 20px;
}

.Gallery-Content h3 {
    margin-bottom: 0.5rem;
    font-size: clamp(3rem, 6vw, 4rem);
    color: #38642A;
}

.Gallery-Content p {
    margin-bottom: 1rem;
}

.Gallery-Image {
    flex: 1;
    padding: 20px;
    border-radius: 10px; /* Rounded corners for the image */
    overflow: hidden; /* Ensures rounded corners are applied */
}

.Gallery-Image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px; /* Rounded corners for the image */
}

.Gallery-Content button {
    width: fit-content;
    padding: 1rem 1rem;
    cursor: pointer;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    font-size: 1.1rem;
    color: white;
    background-color: #38642A;
}

@media (max-width: 56rem) {
    .Gallery-Section {
        flex-direction: column-reverse;
    }

    .Gallery-Content, .Gallery-Image {
        flex: 1 1 100%;
        padding: 10px;
    }
}

/* Causes Important To Us */
#Causes-Container {
    width: 100%;
    text-align: center;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;

    gap: 2rem;
}

#Causes-Container h3 {
    margin-bottom: 0.5rem;
    font-size: clamp(3rem, 6vw, 4rem);
    color: #38642A;
}

#Causes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;

    column-gap: 4rem;
    row-gap: 3rem;
}

.Cause {
    display: block;
    height: 23rem;

    font-size: 1.5rem;
    width: 290px;

    padding: 1rem;
    border-radius: 5px;

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

    border: solid;
    border-width: 1px;
    border-color: silver;
}

.Cause img {
    max-height: 15rem;
    max-width: 281px;
}

.Cause button {
    font-size: 1.2rem;
    font-weight: bold;

    color: white;
    cursor: pointer;
    
    border: none;
    border-radius: 5px;
    
    padding: 1rem 1.5rem;
    background-color: #38642A;
}