: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;
}

.about-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/about/about-hero.png);
  background-repeat: no-repeat;
  background-size: cover;
}

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

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

/* Our mission */
.left-no {
  font-size: 100px;
  color: var(--neutral-300);
}

/* Team */
.our-team {
  background-color: white;
  font-family: montserrat;
  padding: 100px 152px;
}

.profile-img {
  width: 140px;
  height: 140px;
  border-radius: 100px;
  margin-bottom: 10px;
}

.custom-btn {
  font-family: montserrat;
  font-weight: 600;
  font-size: 18px;
  color: var(--primary-700);
  display: inline-flex;
  align-content: center;
  justify-content: center;
  text-align: center;
  padding: 6px;
  gap: 6px;
  margin-top: 50px !important;
}

/* our approach */

.our-approach-bg {
  background-image: url(assets/about/approach_bg.png);
  background-repeat: no-repeat;
  background-size: contain;
}

.our-appr-part .sub-heading {
  font-family: montserrat;
  font-size: 24px !important;
  font-weight: 700;
  color: var(--shades-400);
}

.our-appr-part .heading {
  font-family: montserrat;
  font-size: 32px !important;
  font-weight: 600;
}

.about-card-img {
  display: flex;
}

.about-card-img img {
  max-width: 558px;
  height: fit-content;
}

/* about cta */
.about-cta {
  background-image: url(assets/about/about-cta-image.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.about-cta p {
  font-size: 32px;
}

/* media queries */
@media (max-width: 1200px) {
  .about-hero,
  .our-team,
  .custom-padding {
    padding: 72px;
  }

  .about-card-img img {
    max-width: 450px;
    height: fit-content;
  }
}

@media (max-width: 992px) {
  .about-card-img {
    display: flex;
    justify-content: center !important;
  }

  .card-container {
    max-width: 1280px;
    margin-top: 0px !important;
  }
}

@media (max-width: 552px) {
  .about-hero,
  .our-team,
  .custom-padding {
    padding: 36px;
  }

  .about-hero {
    background-position: center;
  }

  .our-approach-bg {
    background: none;
  }

  .about-card-img img {
    max-width: 350px;
    height: fit-content;
    margin-bottom: 16px;
  }

  .card-container {
    padding: 0;
  }

  .left-no {
    font-size: 40px !important;
    color: var(--neutral-300);
  }

  .about-cta p {
    font-size: 20px !important;
  }
}