: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 */
.contact-hero {
  font-family: montserrat;
  text-align: center;
  color: white;
  padding: 100px 152px 100px 152px;
  min-height: 600px;
  align-items: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
  height: auto;
  background-color: var(--primary-800);
}

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

@media (max-width: 552px) {
  .custom-padding,
  .contact-hero {
    padding: 100px 36px 100px 36px;
  }
}