:root {
  --neutral-900: #2B2B2B;
  --neutral-500: #595959;
  --neutral-400: #9B9B9B;
  --neutral-300: #BFBFBF;
  --neutral-200: #E6E6E6;
  --neutral-100: #F7F7F7;
  --neutral-50: #FFFFFF;

  --primary-main: #FF4086;
  --primary-dark: #B02C5C;
  --secondary-main: #368CF5;
  --secondary-dark: #235CA1;
  --tertiary-main: #272976;
  --tertiary-dark: #1A1C5E;

  --green-dark: #00923F;
  --green-light: #7ABC30;
  --yellow-light: #FFCD00;
  --yellow-dark: #FB8F00;
  --red-light: #F44910;
  --red-dark: #C02220;
}

:host {
  --swiper-theme-color: var(--primary-main)
}

h1 {
  font-size: initial;
}

div#content {
  z-index: 0;

  margin-top: calc(-7rem - 1px);
}

div#content section {
  display: flex;
  width: 100%;
  min-height: 38rem;
}

section div.section-content h1 {
  color: var(--tertiary-main);
  margin-top: 3rem;
  text-align: center;
}

main#introduction {
  display: flex;
  justify-content: center;

  background-image: url("/assets/mutual-ajuda-bg.jpg");
  background-size: cover;
  background-position: 50%;

  color: var(--neutral-50);

  height: calc(38rem + 7rem);
  padding-top: calc(7rem + 1px);
}

main#introduction .section-content {
  display: flex;
  align-items: center;
}

main#introduction .section-content>div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2rem;
  align-items: flex-start;

  align-self: stretch;

  width: 100%;
  height: 100%;
}

section#categories {
  background-color: var(--neutral-100);
}

div.category-card-container {
  width: 100%;
  height: 100%;

  display: grid;
  align-items: center;
  justify-content: center;
  grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));

  gap: 2rem;

  padding: 4rem 0;
}

div.category-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  width: 100%;
  height: 25rem;

  background: var(--neutral-50);

  border-radius: 8px;

  padding: 1rem;

  gap: 1rem;
}

div.category-card-cover {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  flex: 1;

  border-radius: 8px;

  font-size: 3rem;
  line-height: normal;
  font-weight: 700;
  color: var(--neutral-50);
  text-align: center;

  padding: 1rem;
}

#investments .category-card-cover {
  background: url("../../assets/investments.png");

  background-position: 40%;
  background-size: cover;
}

#personal-loan .category-card-cover {
  background: url("../../assets/personal-loan.png");

  background-position: 40%;
  background-size: cover;
}

#company-loan .category-card-cover {
  background: url("../../assets/company-loan.png");

  background-position: 40%;
  background-size: cover;
}

#investor .category-card-cover {
  background: url("../../assets/investor.png");

  background-position: 40%;
  background-size: cover;
}

#mutual-app .category-card-cover {
  background: url("../../assets/mutual-app.png");

  background-position: 70%;
  background-size: cover;
}

section#contact-us {
  background: var(--tertiary-main);
  min-height: auto !important;
}

section#contact-us .section-content {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem;

  gap: 2rem;
}

section#contact-us .section-content h1 {
  color: var(--neutral-50);
  margin-top: 0;
}

/* sm */
@media (min-width: 640px) {}

/* md */
@media (min-width: 768px) {
  #warnings {
    align-items: center;
  }
}

@media (min-width: 993px) {
  div#content {
    margin-top: calc(-8rem - 1px);
  }

  main#introduction {
    height: calc(38rem + 8rem);
    padding-top: calc(8rem + 1px);
  }
}

/* lg */
@media (min-width: 1024px) {}

/* xl */
@media (min-width: 1280px) {
  main#introduction .section-content>div {
    width: 50%;
  }
}

/* 2xl */
@media (min-width: 1536px) {}