*{
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    text-decoration: none;
    list-style: none;
    box-sizing: border-box;
}

:root {
    --color-primary: #1b684a;
    --color-success: #00bf8e;
    --color-warning: #f7c94b;
    --color-danger: #f75843;
    --color-white: #fff;
    --color-light: rgba(255,255,255, 0.7);
    --color-black: #000;
    --color-bg: #1f2641;
    --color-bg1: #e8f5ee;
    --color-bg2: #424890;
    --color-bg3: #daeeda;
    --color-bg4: #e2e2e2;


    --fontsize-min: 1.2rem;

    --container-width-lg: 75%;
    --container-width-md: 78%;
    --container-width-sm: 94%;

    --transition:all 400ms ease;

}




/* hero section  */
header {
    position: relative;
    overflow: hidden;
    height: 50vh;
    margin-bottom: 5rem;
    background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.1)) , url(/Images/plantation.webp);
    background-size: cover;
    background-repeat: no-repeat;
    color: var(--color-white);
}

/* about us section */
.aboutus__container {
  display: grid;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  text-align: center ;
  margin-top: 8rem;
  
}

.aboutus__section h1 {
    line-height: 1;
    margin-bottom: 1rem;

}
.aboutus__section p {
    margin: 1rem 0 3rem;
    
}

/* our img section */

.ourimg {
    border-radius: 2%;
}

/* our mission section */

.ourmission {
    background-color:var(--color-white);
}
.ourmission__left h1 {
    line-height: 1;
    margin-bottom: 1rem;
}
.ourmission__left p {
    margin: 1rem 0 3rem;
}
.ourmission__container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 6rem;
}



/* Our Vision Section */

.ourvision {
    background-color:var(--color-white);
}


.ourvision__right h1{
    line-height: 1;
    margin-bottom: 1rem;
}

.ourvision__right P {
    margin: 1rem 0 3rem;
}
.ourvision__container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 6rem;
}

/* Join Our Mission Section */

.joinmission {
    background-color: var(--color-bg4);
}
.joinmission__container {
    display: grid;
    flex-direction: column;
}
.joinmission__text h1 {
    line-height: 1;
    margin-bottom: 1rem;
}
.joinmission__text p {
    margin: 1rem 0 3rem;
}
.joinmission__text {
    display: grid;
    align-content: center;
    text-align: center;
}


/* Our Team Section */
.team {
    background-color: var(--color-white);
    box-shadow:  rgba(0, 0, 0, 0.5);
 
}
.team p {
    text-align: center;
    margin: 1rem 0 0;
    
}
.team__container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.team__member {
    background-color: var(--color-bg3);
    padding: 1rem;
    border: 1px solid transparent;
    transition: var(--transition);
    margin-top: 4rem;
}
.team__member-image img {
    width: 100%;
    height: 25rem;
}
.team__member:hover {
    background: transparent;
    border-color: var(--color-primary);
}
.team__member-info {
    text-align: center;
}
.team__member-socials {
    text-align: center;
}


/* =====================
TABLET MEDIA QUERIES RESPONSIVENSS
=======================*/


@media screen and (max-width: 1024px) {
    .container {
     width: var(--container-width-md);
    }
    
/* Our Team Section */
.team__container {
    gap: 1rem;
}

.team__member {
    padding: 1rem;
}
.team__member-image img {
    width: 90%;
    height: 15rem;
}

/* footer section */

.footer__container {
    text-align: center;
}


}





/* =====================
MOBILE  MEDIA QUERIES RESPONSIVENSS
=======================*/

@media screen and (max-width:600px) {
    .container {
        width: var(--container-width-sm);
    }

  
/* hero section  */
header {
    height: 70vh;
}
.aboutus__section a {
    margin-bottom: 1rem;
}

/* about us section */


/* our mission section */


.ourmission__container {
    grid-template-columns: 1fr;
    gap: 6rem;
}



/* Our Vision Section */


.ourvision__container {
    grid-template-columns: 1fr;
    gap: 6rem;
}

/* Join Our Mission Section */



/* Our Team Section */

.team__container {
    grid-template-columns: 1fr;
}

.team__member {
    padding: 1rem !important;
}
.team__member-image img {
    width: 100%;
    height: 15rem;
}
/* footer section */

.footer__container {
    text-align: center;
}


}