@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

:root {
  /*--primary: #00A0E4;*/
  --bs-body-color: #333333;
}

body {
  font-family: "Roboto", sans-serif;
}

.motive__background {
  background-position: top right;
}

/*.motive__overlay {
opacity: 0.5;
}*/

/*.main {
font-family: "Roboto", sans-serif;
}

.motto {
font-family: "Roboto", sans-serif;
}*/

/*@media (min-width: 576px) {
.section-3-col-bottom-text.cell-borders .section-cell-item.col-sm-6 {
width: calc(25% - 2 * var(--section-item-margin));
}
}*/

h6, .h6, h5, .h5, h4, .cart-form__title, .account-form__title, .h4, h3, .h3, h2, .h2, h1, .h1 {
  font-weight: 800;
  font-family: "Roboto", sans-serif;
}

@media (min-width: 576px) {
  .motive__motto {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    text-align: left;
  }
}

.motto__title {
  text-wrap: balance;
  max-width: 800px;
  font-size: 4.5rem;
}

.navbar {
  max-width: 1400px;
  margin: auto;
}

.section-3-col-bottom-text.cell-borders .section-cell-item, .section-3-col-top-text.cell-borders .section-cell-item {
  text-align: center;
}

.text-balance {
  text-wrap: balance;
}

.text-pretty {
  text-wrap: pretty;
}

@media (min-width: 1200px) {
  .menu-horizontal .navbar__brand-logo-img {
    max-width: 20rem;
    max-height: 4rem;
  }
}

@media (min-width: 576px) {
  .motive {
    position: relative;
    height: 55rem;
  }
}



@media (min-width: 992px) {
  .article-item-wrapper {
    width: 25%;
  }
}

.article-item__img {
  object-fit: contain;
  padding: 1rem;
}

.article-item__img-wrapper {
  background-color: white;
}

/* ----- HEADING ----- */
/*===========================================================================*/
.section-container h1, .section-container .h1 {
  font-size: calc(3rem + 1.5vw);
  font-weight: 600;
}

@media (min-width: 1200px) {
  .section-container h1, .section-container .h1 {
    font-size: 4rem;
  }
}

.section-title h1 {
  font-size: calc(2rem + 2.7vw);
}

@media (min-width: 1200px) {
  .section--header h1, .section--header .h1, .section-title h1, .section-title .h1 {
    font-size: 4rem;
  }
}

.section-container h2, .section-container .h2 {
  font-size: calc(2rem + 0.9vw);
  font-weight: 800;
  line-height: 1.3;
}

@media (min-width: 1200px) {
  .section-container h2, .section-container .h2 {
    font-size: 2.5rem;
  }
}

.pre-heading {
  font-size: 20px;
  font-weight: 300;
  text-transform: uppercase;
}

/* ----- FOOTER ----- */
/*===========================================================================*/
.footer {
  background: black;
  font-size: 16px;
}

.footer p {
  margin: 0;

}

.footer, .footer a {
  color: rgba(var(--bs-light-rgb), 0.7);
}

.footer h5 {
  color: var(--bs-light);
  font-size: 18px;
}

.footer a:hover {
  color: var(--bs-light);
  text-decoration: underline;
  -webkit-text-decoration-color: var(--primary);
  text-decoration-color: var(--primary);
  text-underline-offset: 3px;
}

.footer .social-icons > li > a > img {
  -webkit-filter: saturate(0%) brightness(0%) invert(100%) opacity(0.7);
  filter: saturate(0%) brightness(0%) invert(100%) opacity(0.7);
  -webkit-transition: all 100ms ease-in;
  -o-transition: all 100ms ease-in;
  transition: all 100ms ease-in;
}

.footer .social-icons > li > a:hover > img {
  -webkit-filter: saturate(0%) brightness(0%) invert(100%) opacity(1);
  filter: saturate(0%) brightness(0%) invert(100%) opacity(1);
}