:root {
  /* Primary Colors */
  --primary-50: #fcfdff;
  --primary-100: #f3f7fe;
  --primary-200: #e5eefd;
  --primary-300: #d0e1fc;
  --primary-400: #b6d0fb;
  --primary-500: #95bbf9;
  --primary-600: #6fa3f7;
  --primary-700: #4387f4;
  --primary-800: #09429d;
  --primary-900: #04204c;
  --primary-950: #031430;

  /* Secondary Colors */
  --secondary-50: #fcfefc;
  --secondary-100: #f1fbf4;
  --secondary-200: #e0f5e5;
  --secondary-300: #c7eed1;
  --secondary-400: #a8e4b7;
  --secondary-500: #82d998;
  --secondary-600: #55cb72;
  --secondary-700: #34a851;
  --secondary-800: #1e602e;
  --secondary-900: #10351a;
  --secondary-950: #0c2713;

  /* Shades */
  --shades-50: #fbfbfb;
  --shades-100: #efefef;
  --shades-200: #dbdbdb;
  --shades-300: #bfbfbf;
  --shades-400: #9b9b9b;
  --shades-500: #707070;
  --shades-600: #3c3c3c;
  --shades-700: #000000;
  --shades-800: #000000;
  --shades-900: #000000;
  --shades-950: #000000;

  /* Neutral Colors */
  --neutral-50: #fcfdfd;
  --neutral-100: #f4f6f8;
  --neutral-200: #e6eaef;
  --neutral-300: #d3dae2;
  --neutral-400: #bac5d2;
  --neutral-500: #9cabbe;
  --neutral-600: #788da7;
  --neutral-700: #576b85;
  --neutral-800: #323d4c;
  --neutral-900: #1c222a;
  --neutral-950: #14191f;
}

.custom-padding {
  padding: 100px 152px 100px 152px;
  font-family: montserrat;
}

/* hero */
.team-hero {
  font-family: montserrat;
  text-align: center;
  color: white;
  padding: 100px 152px 100px 152px;
  min-height: 788px;
  align-items: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
  height: auto;
  background-image: url(assets/team/team-hero.png);
  background-repeat: no-repeat;
  background-size: cover;
}

.team-hero .green-text {
  color: var(--secondary-700);
  font-weight: 700;
}

.team-hero .blue-text {
  color: var(--primary-700);
  font-weight: 700;
}

/* our team */
.btn-primary {
  display: inline-flex;
  width: 100% !important;
  background: var(--primary-700);
  color: white;
  font-family: Montserrat;
  font-weight: 600;
  justify-content: center;
  align-items: center;
  gap: 4px;
  text-decoration: none;
}

.btn-secondary {
  display: inline-flex;
  width: 100% !important;
  background: white;
  color: var(--shades-700) !important;
  border: 1px var(--shades-700) solid !important;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  font-weight: 600;
  gap: 4px;
}

.btn-secondary:hover {
  background-color: var(--secondary-700);
  border: 1px var(--secondary-700) solid !important;
  color: white !important;
}

.teams .card {
  border: 1px var(--shades-200) solid;
  border-radius: 0;
}

.teams .profile {
  margin-bottom: 16px;
  width: 140px;
  height: auto;
  border-radius: 100px;
}

.teams .designation {
  font-size: 16px;
  color: var(--neutral-600);
  font-style: italic;
}

.teams .bio {
  font-size: 14px;
}

.team-cta {
  background-image: url(assets/why-us-img.png);
  background-repeat: no-repeat;
  background-size: cover;
  padding: 80px 152px 80px 0px;
  font-family: montserrat;
}

.team-cta .btn-primary {
  max-width: 200px;
}

.teams button a {
  margin-top: 8px;
}

/* media queries */
@media (max-width: 1440px) {
  .teams .bio {
    display: -webkit-box;
    display: box;
    -webkit-box-orient: vertical;
    box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 6;
    line-clamp: 3;
  }

  .teams .card {
    padding: 20px !important;
  }
}

@media (max-width: 1200px) {
  .custom-padding,
  .teams {
    padding: 80px 72px;
  }
}

@media (max-width: 992px) {
  .custom-padding,
  .team-hero {
    padding: 100px 72px 100px 72px;
  }

  .team-cta {
    padding: 80px 72px 80px 72px;
    text-align: center;
  }

  .team-cta .img-col {
    display: none;
  }
}

@media (max-width: 552px) {
  .teams img {
    width: 100px;
    height: auto;
  }

  .custom-padding,
  .team-hero {
    padding: 100px 36px 100px 36px;
  }

  .team-cta {
    padding: 80px 36px 80px 36px;
    text-align: center;
  }
}