/* Google Fonts */

.raleway-normal {
  font-family: "Raleway", var(--bs-body-font-family);
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

/* Variables */

:root {
  --primary-black: #000;
  --primary-white: var(--bs-white);
  --primary-grey: #333;
  --primary-orange: #f67539;

  --min-width: 368px;
  --max-width: 960px;
  --min-width-hero: 368px;
  --max-width-hero: 1400px;
  --section-width: 1400px;

  --bs-body-color: var(--primary-grey);
}

/* Global Styles */

html {
  font-size: 18px;
  scroll-behavior: smooth;
  color: var(--primary-grey);
}

.bg-dark {
  background-color: var(--primary-grey) !important;
}

.container {
  min-width: var(--min-width);
  max-width: var(--max-width);
}

.container-herowidth {
  min-width: var(--min-width-hero);
  max-width: var(--max-width-hero);
}

.container-sectionwidth {
  min-width: var(--min-width);
  max-width: var(--section-width);
}

.article {
  border-top: 1rem solid var(--primary-orange);
  padding: 6rem 1.5rem 3rem;
  /* margin-top: -3rem; */

  &:nth-child(even) {
    background-color: var(--bs-light);
  }

  &:nth-child(odd) {
    background-color: var(--bs-white);
  }

  h2,
  h3 {
    display: table;
    border-bottom: 1px solid var(--primary-orange);
    margin-left: auto;
    margin-right: auto;

    &::after {
      display: block;
      content: "";
      width: 25%;
      border-bottom: 1px solid !important;
      bottom: -1px;
      position: relative;
    }

    }
}

.icon:not(.bi),
.icon.bi::before {
    padding: 0.2em;
    color: var(--primary-orange);
    border: 0.1em solid var(--primary-orange);
    border-radius: 50%;
}

.icon-color-inverted:not(.bi),
.icon-color-inverted.bi::before {
    color: var(--primary-white);
    border: 0.1em solid var(--primary-white);
    background-color: var(--primary-orange);
}

.icon-circle {
  .icon:not(.bi),
  .icon.bi::before {
    border-radius: 50%;
  }
}

.attribution-freepik {
    position: absolute;
    color: var(--bs-gray-500);
    bottom: 0.5rem;
    right: 0.5rem;
    font-size: 0.6rem;
}

header {
  min-width: var(--min-width-hero);
  background-image: url("../img/bg.jpg");
  background-repeat: no-repeat;
  background-size: var(--max-width-hero) auto;
  background-position: center 63.5%;
  background-position: center bottom -5em;
  background-color: var(--primary-black);
  position: relative;
}

section {
  max-width: var(--section-width);
  margin-left: auto;
  margin-right: auto;
}

#navbar-top {
  min-height: 3rem;
}

#hero {
  position: relative;
  bottom: 0;
  min-width: var(--min-width-hero);
  max-width: var(--max-width-hero);
  height: 450px;
  color: var(--primary-white);
  margin: auto;
  box-shadow: inset 3em 0 3em -2em var(--primary-black), inset -3em 0 3em -2em var(--primary-black);
  display: grid;
  grid-auto-flow: row;
  align-items: top;
  justify-content: center;
  text-align: center;

  img {
    margin-top: 2.5em;
    margin-bottom: 2.15em;
    margin-left: auto;
    margin-right: auto;
    height: 100px;
    display: block;
    filter: drop-shadow(0 0 0.1em var(--primary-white));
  }

  h6 {
    height: 2.5em;
  }
}

#values {
  .icon:not(.bi),
  .icon.bi::before {
    font-size: 2.5em;
    margin-right: 0;
    margin-bottom: 0.5em;
    border-radius: 0.4em;
  }
}