.aboutHeroBg {
  font-family: "Outfit", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  background-color: #eaefec4d;
  padding: 80px 0px;
  /* margin-bottom: 50px; */
}
.aboutHeroTitle {
  font-size: 40px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 15px;
}
.aboutHeroSubTitle {
  color: #737373;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  margin-bottom: 35px;
}
.heroBtnContainer {
  display: flex;
  justify-content: center;
}
.aboutHeroContact button {
  color: #D4AF37;
  background-color: transparent;
  border: 1px solid #D4AF37;
  font-size: 16px;
  font-weight: 500;
  padding: 5px 10px;
  border-radius: 5px;
}
.aboutHeroBrowse button {
  color: #ffffff;
  background-color: #D4AF37;
  font-size: 16px;
  font-weight: 500;
  border: none;
  border-radius: 5px;
  padding: 5px 10px;
}

/* who we are  */
.whoContainer {
  font-family: "Outfit", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  padding: 50px 0px;
  margin-bottom: 50px;
}

.whoGrid {
  display: grid;
  grid-template-columns: 6fr 6fr;
  gap: 20px;
  align-items: center;
}
.whoLeft div {
  margin-bottom: 15px;
}
.whoTitle {
  color: #2e2e2e;
  font-size: 40px;
  font-weight: 500;
}
.whoDesc {
  color: #737373;
  font-size: 16px;
  font-weight: 500;
}
.whoRight img {
  width: 100%;
  object-fit: contain;
}

/* our values  */
.ourValuesContainer {
  font-family: "Outfit", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  background-color: #eaefec4d;
  padding: 50px 0px;
  margin-bottom: 50px;
}
.ourValueGrid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 20px;
  align-items: center;
}
.ourTitle {
  color: #2e2e2e;
  font-size: 40px;
  font-weight: 500;
}
.ourDesc {
  color: #737373;
  font-size: 16px;
  font-weight: 500;
}
.ourValueRight-Content {
  background-color: #ffffff;
  border: 1px solid #dadada;
  border-radius: 10px;
}
.ourValueRight-Grid {
  display: grid;
  grid-template-columns: 6fr 6fr;
  /* gap: 30px; */
}
.ourValue-borderbottom {
  border-bottom: 1px solid #dadada;
}
.ourValueCard {
  margin: 15px 0px;
  padding: 10px 20px;
}
.valueIconContainer {
  display: grid;
  grid-template-columns: 2fr 10fr;
  gap: 10px;
}
.valueIcon {
  background-color: #D4AF37;
  color: white;
  width: 40px;
  height: 40px;
  font-size: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.valueCardTitle {
  color: #2e2e2e;
  font-size: 20px;
  font-weight: 600;
}
.valueCardDesc {
  color: #737373;
  font-size: 16px;
  font-weight: 400;
  margin: 5px 0px;
}

/* our achievemtents  */
.achievementContainer {
  font-family: "Outfit", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  margin-bottom: 50px;
}
.achieveTitle {
  color: #2e2e2e;
  font-size: 40px;
  font-weight: 500;
}
.achieveDesc {
  color: #737373;
  font-size: 16px;
  font-weight: 500;
}
.achievementGrid {
  display: grid;
  grid-template-columns: repeat(3, 4fr);
  gap: 20px;
  margin: 30px 0px;
}
.achieveCard {
  background-color:#FBF7EB;
  border: 1px solid #F2E6C1;
  padding: 20px;
  border-radius: 10px;
}
.achieveCard > :first-child {
  color: #1E1E1E;
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 20px;
}
.achieveCard > :last-child {
  color: #6E6E6E;
  font-size: 16px;
  font-weight: 500;
}

@media screen and (max-width: 992px) {
  .whoGrid {
    display: grid;
    grid-template-columns: 12fr;
  }
  .ourValueGrid {
    display: grid;
    grid-template-columns: 12fr;
  }
  .achievementGrid {
    display: grid;
    grid-template-columns: 6fr 6fr;
  }
}
@media screen and (max-width: 776px) {
  .aboutHeroTitle {
    font-size: 35px;
  }
  .whoTitle {
    font-size: 35px;
  }
  .ourTitle {
    font-size: 35px;
  }
  .achieveTitle {
    font-size: 35px;
  }
}
@media screen and (max-width: 556px) {
  .aboutHeroTitle {
    font-size: 25px;
  }
  .aboutHeroContact button {
    font-size: 14px;
  }
  .aboutHeroBrowse button {
    font-size: 14px;
  }
  .whoTitle {
    font-size: 25px;
  }
  .whoDesc {
    font-size: 14px;
  }
  .ourTitle {
    font-size: 25px;
  }
  .ourDesc {
    font-size: 14px;
  }
  .ourValueRight-Grid {
    display: grid;
    grid-template-columns: 12fr;
    border-bottom: none;
  }
  .ourValue-borderbottom {
    border-bottom: none;
  }
  .valueIconContainer {
    display: grid;
    grid-template-columns: 1fr 11fr;
    gap: 10px;
  }
  .valueCardTitle {
    font-size: 18px;
  }
  .valueCardDesc {
    font-size: 14px;
  }

  .valueIcon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
  }
  .achieveTitle {
    font-size: 25px;
  }
  .achieveDesc {
    font-size: 14px;
  }
  .achievementGrid {
    display: grid;
    grid-template-columns: 12fr;
  }
  .achieveCard > :first-child {
    font-size: 18px;
    margin-bottom: 10px;
  }
   .achieveCard > :last-child{
    font-size: 14px;
  }
}
@media screen and (max-width: 456px) {
  .aboutHeroTitle {
    font-size: 20px;
  }
  .aboutHeroSubTitle {
    font-size: 14px;
  }
  .whoTitle {
    font-size: 20px;
  }

  .ourTitle {
    font-size: 20px;
  }

  .valueCardTitle {
    font-size: 16px;
  }
  .valueCardDesc {
    font-size: 12px;
  }
  .achieveTitle {
    font-size: 20px;
  }
  .achieveCard > :first-child {
    font-size: 16px;
  }
  .achieveCard > :last-child{
    font-size: 12px;
  }
}