.nav__menu a{
    color: black;
}
.about-page__container{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    /* align-items: center; */
    padding: 4rem 0 1rem 0;
}
.about__page-left h1{
    margin-bottom: 25px;
    color: var(--color-warning);
}
.about__page-left p{
    margin-right: 1.4rem;
}
.about__page-right img {
    border-radius: 8%; 
    transition: var(--transition);   
}

.about__page-right img:hover{
    box-shadow: 3px -1px 6px rgba(0,0,0,.3);
}

/* ====================== goal-page =================== */
.goal-page{
    background: var(--color-bg1);
}
.goal__container{
    display: grid;
    grid-template-columns: 60% 40%;
    gap: 1.7rem;
    align-items: center;
}
.goal__left img{
    border-radius: 8%;
}
.goal__right{
    background: var(--color-bg);
    padding: 2rem 2rem;
    border-radius:1rem;
    align-items: center;
}
.goal__right h3{
    color: var(--color-warning)
}
.goal, .vision{
    text-align: center;
    margin-bottom: 1.8rem;
}

/* ==================== objective sections ==================== */
.objective-page{
    padding: 5rem 0;
}

.objective__container{
    display: grid;
    grid-template-columns: 40% 60%;
    gap: 1.6rem;
    
}
.objective h1, .mission h1{
    margin-bottom: 2rem;
    color: var(--color-warning);
}
.mission{
    margin-right: 3rem;
}
/* ====================== EXECUTIVE MEMBER  SECTIONS ========================*/




/*  ==================== MEDIA QUERIES (TABLETS) ============================ */
@media screen and (max-width: 1024px)  {
    .about-page{
        height: fit-content;
    }
  .about-page__container{
    gap: .7rem;
  }
  /* goal page */
  .goal__container{
    grid-template-columns: 1fr 1fr;
    gap: 1.4rem;
  }
  /* objective section */
  .objective__container{
    grid-template-columns: 1fr;
  }
  .objective,.mission{
    text-align: center;
    margin: 0;
  }

}
/*  ==================== MEDIA QUERIES (PHONE) ============================ */
@media screen and (max-width: 600px) {
  .about-page__container{
    grid-template-columns: 1fr;
  }
  /* goal container */
  .goal__container{
    grid-template-columns: 1fr;
  }

}
