@font-face {
      src: url("../font/OpenSans-Light.ttf");
      font-family: 'OpenSans-Light';
}

@font-face {
      src: url("../font/OpenSans-Medium.ttf");
      font-family: 'OpenSans-Medium';
}

@font-face {
      src: url("../font/OpenSans-Regular.ttf");
      font-family: 'OpenSans-Regular';
}

@font-face {
      src: url("../font/OpenSans-SemiBold.ttf");
      font-family: 'OpenSans-SemiBold';
}

@font-face {
      src: url("../font/OpenSans-Bold.ttf");
      font-family: 'OpenSans-Bold';
}

.HeaderNavBar {
      background-color: white;
}

.personImg {
      width: 100%;
      transition: all 0.5s;
      position: relative;
}

.detail {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
}

.allPersonDetail {
      display: flex;
      justify-content: space-around;
      align-items: flex-start;
      margin-bottom: 100px;
}

.personOne {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      width: 11%;
      gap: 30px;
}

.namePerson {
      text-align: center;
      font-size: 19px;
      font-weight: 700;
      margin: 0;
}

.aboutPerson {
      text-align: center;
      font-size: 16px;
      font-weight: 400;
      font-family: 'OpenSans-Medium';
      opacity: 80%;
      margin: 0;
}

.heading {
      margin: 90px 0px;
      text-align: center;
      font-size: 26px;
      font-family: 'OpenSans-Medium';
}

.infoOfPerson {
      width: 80%;
      margin: auto;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-start;
      height: 285px;
      position: relative;
      gap: 30px;
}

.headingAboutPerson {
      font-size: 18px;
      font-weight: 700;
      font-family: 'OpenSans-Bold';
      border-top: 2px solid #cc1521;
      padding-top: 5px;
      margin: 0;
}

.paraAboutPerson {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
      gap: 10px;
      font-size: 17px;
      min-height: 200px;
      font-weight: 500;
      font-family: 'OpenSans-Regular';
}

.infoOfOnePerson {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-start;
      position: absolute;
      gap: 40px;
      top: 0;
      left: 0;
      opacity: 0;
      z-index: 0;
      transition: all 0.5s;
}

.activePerson {
      opacity: 100%;
      z-index: 1;
}

.activePersonImg {
      transform: scale(1.2);
}

.OuerTeamFooter {
      background-color: #232323;
      padding: 40px 20px;
      padding-bottom: 70px;
}

.mediaImg {
      width: 100%;
      border-radius: 50%;
      border: 1px solid white;
}

.FollowPart {
      color: white;
      font-size: 22px;
      font-weight: 700;
      font-family: 'OpenSans-Bold';
}

.medias {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      gap: 10px;
}

.mediaLink {
      background-color: white;
      border-radius: 50%;
      width: 9.5%;
}

.mobilenum {
      font-size: 14px;
      line-height: 25px;
      font-weight: 500;
      font-family: 'OpenSans-Regular';
      text-decoration: none;
      color: white;
}

.mobilenum:hover {
      text-decoration: underline;
}

.contactDetail {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      gap: 20px;
      color: white;
}

.leftFooter {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-start;
      width: 30%;
      gap: 15px;
}

.rightFooter {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-start;
      width: 30%;
      gap: 15px;
}

.footerHeading {
      color: white;
      font-size: 20px;
      font-weight: 700;
      width: 95%;
      font-family: 'OpenSans-Bold';
}

.inputBox {
      display: flex;
      justify-content: center;
      width: 100%;
      gap: 5px;
}

.input {
      background-color: transparent;
      outline: none;
      border: none;
      border: 1px solid transparent;
      border-bottom-color: white;
      padding: 6px;
      width: 50%;
      color: white;
}

.inputBtn {
      width: 50%;
      border: none;
      font-size: 18px;
      font-weight: 300;
      font-family: 'OpenSans-Light';
}

.input:focus {
      border: 1px solid white;
}

.content {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
}

body {
      background-image: url("../assets/our-team-bg.png");
      background-position: center;
      background-size: contain;
      background-repeat: no-repeat;
      background-attachment: unset;
}

@media only screen and (min-width: 1400px) {
      .personOne {
            gap: 40px;
      }

      .paraAboutPerson {
            font-size: 23px;
      }

      .headingAboutPerson {
            font-size: 23px;
      }

      .mobilenum {
            font-size: 20px;
      }

      .FollowPart {
            font-size: 23px;
      }

      .leftFooter {
            gap: 25px;
      }

      .footerHeading {
            font-size: 23px;
      }

      .mediaLink {
            width: 6.5%;
      }

      .heading {
            font-size: 35px;
      }

      .namePerson {
            font-size: 25px;
      }

      .aboutPerson {
            font-size: 20px;
      }
}

@media only screen and (max-width: 992px) {
      .heading {
            margin: 60px 0px;
      }

      .allPersonDetail {
            display: flex;
            justify-content: space-around;
            align-items: flex-start;
            margin-bottom: 0px;
            width: 1700px;
            margin-top: 20px;
      }

      .allPersonWrapper {
            overflow-x: scroll;
            overflow-y: visible;
      }

      .allPersonWrapper::-webkit-scrollbar {
            display: none;
      }

      .infoOfPerson {
            margin-top: 100px;
      }

      .content {
            flex-direction: column;
            gap: 40px;
      }

      .leftFooter {
            width: 100%;
      }

      .rightFooter {
            width: 100%;
      }

      .mediaLink {
            width: 3.6%;
      }

      .footerHeading {
            font-size: 22px;
      }
}

@media only screen and (max-width: 768px) {
      .mediaLink {
            width: 4.1%;
      }

      .personOne {
            width: 8%;
      }

      .allPersonDetail {
            width: 1300px;
      }

      .personOne {
            width: 10%;
      }
}

@media only screen and (max-width: 576px) {
      .allPersonDetail {
            width: 1200px;
      }

      .personOne {
            width: 12%;
      }

      .infoOfPerson {
            margin-top: 70px;
      }

      .infoOfOnePerson {
            gap: 20px;
      }

      .infoOfPerson {
            width: 100%;
      }

      .heading {
            margin: 40px 0px;
      }

      .infoOfPerson {
            height: 510px;
      }

      .inputBox {
            flex-direction: column;
            gap: 20px;
      }

      .input {
            width: 100%;
            font-size: 18px;
      }

      .inputBtn {
            width: 100%;
            padding: 10px;
      }

      .OuerTeamFooter {
            padding: 30px 5px;
            padding-bottom: 50px;
      }

      .mediaLink {
            width: 9.5%;
      }

      .footerHeading {
            font-size: 19px;
      }
}