.body-web{
  background-color: var(--background-secondary);
}
.our-team {
  position: relative;
  width: 100%;
  padding: 5px;
}
.our-team > div {
  position: relative;
  padding: 10px;
  width: 100%;
  border-bottom: 2px solid black;
  background-color: var(--background-tertiary);
  scale: 0.98;
}
.team-img {
  position: relative;
  width: 240px;
  margin: 0 auto;
}
.team-img .img-1 {
  opacity: 0;
  position: absolute;
  /* object-fit: cover;
  height: 200px;
  width: 100%;
  transition: transform 0.3s ease, opacity 0.3s ease; */
}
/* .team-img:hover .img-1,
.team-img .img-1:hover {
  opacity: 0;
  transform: scale(0.5);
} */
.team-img > .img-2 {
  width: 240px;
  margin-left: -20px;
  top: 0;
  filter: drop-shadow(5px 0px 0px rgb(0, 0, 0));
  transition: all 0.3s ease-in-out;
}
/* .team-img:hover .img-2 {
  opacity: 1;
  z-index: 1;
  transform: scale(1);
} */
.our-team .content {
  position: relative;
  direction: rtl;
  text-align: right;
  color: var(--black);
}
.our-team .content h2{
  padding: 10px;
  font-size: 40px;
}
.our-team .content h3{
  font-size: 35px;
  padding: 10px;
}
.our-team .content h4 {
  font-size: 30px;
  padding: 10px;
}
.years{
  direction: rtl;
}

/*=============== responsive for larger than 550px screen ===============*/
@media (min-width: 300px) {
}

@media (min-width: 550px) {
}

/*=============== responsive for larger than 650px screen ===============*/

@media (min-width: 650px) {
  .our-team > div {
    min-height: 250px;
  }

  .team-img {
    float: right;
    top: 20px;
    width: 200px;
    height: 100%;
  }
/* 
            .team-img>.img-2 {
              position: absolute;
              width: 240px;
              margin-left: -20px;
              bottom: 0;
              opacity: 0;
              z-index: -1;
              transform: scale(0.5);
              filter: drop-shadow(20px 0px 1px rgb(0, 0, 0));
              transition: all 0.3s ease-in-out;
            }
      
            .team-img:hover .img-2 {
              opacity: 1;
              z-index: 1;
              transform: scale(1);     } */

  .our-team .content {
    width: calc(100% - 220px);
    float: left;
    margin-top: 10px;
  }
}
/*=============== responsive for larger than 768px screen  ===============*/
@media (min-width: 768px) {
}
/*=============== responsive for larger than 1024px screen  ===============*/
@media (min-width: 1024px) {
  .our-team {
    display: flex;
    flex-wrap: wrap;
  }
  .our-team > div {
    width: 49.9%;
    border-right: 1px solid black;
    scale: 0.98;
  }

  .team-img .img-2 {
    margin-bottom: 35px;
  }

  /*=============== REUSED STYLE   ===============*/

  /*=============== HEADER ===============*/
}