@import url(style.css);
.AboutUSBody{
    margin-top: 2em;
    padding:5em;
}

/*title with underline.*/
.aboutus{
    display: flex;
    justify-content: center;
    margin-bottom: 2em;
    border-bottom: 2px solid black;
    max-width: max-content;
}

/*the box for about us and the tags in it*/
.boxcontent{
    background-color: var(--orange--);
    padding: 2em;
    display: flex;
    border-radius: 25px;
}
.box{
    height: 60%;
    max-width: 90%;
    margin: auto;
}
.content{
    max-width: 1060px;
    padding-right: 3em;
}
.pic{
    border-radius: 25px;
    max-width:500px;
    max-height: 285px;
}
/*end of about us box*/

/*start with the teammembers title*/
.teammemberTitle{
    display: flex;
    justify-content: center;
    margin-top: 3em;
    margin-bottom: 2em;
    border-bottom: 2px solid black;
    max-width: max-content; 
}
.TeamTitle{
    display: flex;
    justify-content: center;
}

/*the teammembers part*/
.team{
    display:flex;
    justify-content: space-between;
}
    /*the description of the teammembers*/
.teammember2{ 
    padding: 2em;
    border-radius: 18px;
    display: flex;
    margin-top: 18em;
    width: 90%;
    max-height: max-content;
    perspective: 1000px;
}
.teammember1{
    padding:2em;
    display: flex;
    max-width: 55%;
    border-radius: 18px;
    height: fit-content;
    margin-right: 1em;
}

.teammember3{
    padding: 2em;
    border-radius: 18px;
    display: flex;
    max-width: 50%;
    max-height: 28em;
}

    /*hovering the back*/
.overlay {
    position: absolute;
    height: 80%;
    width: 100%;
    opacity: 0;
    transition: .5s ease;
    background-color: rgba(145, 206, 255, 0.971);
    border-radius: 15px;
}

.teammember1:hover .overlay, .teammember2:hover .overlay,.teammember3:hover .overlay {
    opacity: 1;
}
  
.text {
    font-size: 20px;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
}

  /*pictures*/
.picc{
    border-radius: 25px;
    margin-top: 2em;
    max-width: 150px;
    height:200px;
}
/*end of teammembers*/


/* for smaller window sizes */
  @media screen and (max-width: 600px){
   .teammember1, .teammember2, .teammember3{flex-wrap: wrap;} 
  }