.ourLeaders {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ourLeaders .banner {
  width: 90%;
  height: 40vw;
  margin-top: 130px;
  border-radius: 2vh;
  background: url(/img/leader-img/leader-banner.webp) center -11vh / 100vw;
}

.ourLeaders .tital {
  margin-top: 3vh;
  color: #fff;
  font-size: 10vh;
  font-weight: 700;
  text-align: center;
}

@media (max-width: 800px) {
  .ourLeaders .tital {
    font-size: 8vh;
  }
}

.leader {
  margin: 10vh 0;
  width: 100%;
  height: 60vh;
  display: flex;
  justify-content: center;
  align-items: end;
  overflow: hidden;
}

/* remove duplicate media block */
@media (max-width: 1000px) {
  .leader {
    margin: 0;
  }
}

.leader .first {
  width: 55vh;
  height: 60vh;
  border-radius: 5vh;
  background: url(/img/leader-img/jj.webp) center / cover no-repeat;
  display: flex;
  align-items: flex-end;
}

.leader .second {
  width: 60vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-left: 3vh;
}

.leader .second .one {
  color: var(--ThemeColor-);
  font-size: 10vh;
  font-weight: 700;
}

.leader .second .two {
  color: #fff;
  font-size: 4vh;
  font-weight: 700;
  margin-bottom: 1vh;
}

.leader .second .two::before {
  content: "";
  width: 1vh;
  height: 2.7vh;
  border-radius: 20px;
  background: var(--ThemeColor-);
  display: inline-block;
  margin-right: 1vh;
}

.leader .second .three {
  color: #cecece;
  font-size: 2vh;
  margin-bottom: 2.5vh;
  text-align: justify;
}

/* images */
.aj .first {
  background-image: url(/img/leader-img/i4.jpeg);
}
.st .first {
  background-image: url(/img/leader-img/i1.webp);
}
.tj .first {
  background-image: url(/img/leader-img/i2.webp);
}
.ajj .first {
  background-image: url(/img/leader-img/i3.webp);
}

/* tablet */
@media (max-width: 900px) {
  .leader {
    transform: scale(0.8);
  }
}

/* mobile */
@media (max-width: 600px) {
  .leader {
    flex-direction: column;
    height: auto;
    gap: 3vh;
    transform: scale(1);
  }

  .leader .first {
    width: 90%;
    height: 90vw;
  }

  .leader .second {
    width: 90%;
    padding-left: 0;
  }

  .leader .second .one {
    font-size: 7vh;
  }
  .leader .second .two {
    font-size: 3vh;
  }
  .leader .second .three {
    font-size: 2.2vh;
  }
}
