@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@200;400;700');

body {
  font-family: 'Outfit', sans-serif;
}
h1 {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 2.5rem;
  color: #444;
}
p {
  font-family: 'Outfit', sans-serif;
  font-weight: 400;
  font-size: 1.4rem;
}
.btn-lg {
  padding: 10px 32px 10px 32px;
}

/* header */
.header {
  background: rgb(255,110,89);
  background: linear-gradient(114deg, rgba(255,110,89,1) 0%, rgba(255,149,85,1) 100%);
  color: #fff;
}
.header__page--blue {
  background: rgb(77,181,217);
  background: linear-gradient(97deg, rgba(77,181,217,1) 0%, rgba(102,219,242,1) 100%);
}
.header__page--green {
  background: rgb(88,193,176);
  background: linear-gradient(90deg, rgba(88,193,176,1) 0%, rgba(99,215,185,1) 100%);
}

/* navigation */
.navbar {
  /* background-color: #353537;
  border-bottom: 4px solid #f25656; */
}
.navbar-brand {
  width: 25%;
}
.navbar-dark .navbar-toggler {
  color: #f25656;
  border: none;
}
.mmd-navbar-logo {
  width: 8rem;
}

/* intro text */
.header__intro {}
.header__intro h1 {
  color: #fff;
  font-size: 2.5rem;
  padding: 0;
  margin-bottom: 32px;ß
}
@media (min-width: 768px) {
  .header__intro {
    padding-top: 75px;
    padding-bottom: 75px;
  }
  .header__intro h1 {
    color: #fff;
    font-size: 4.0rem;
    padding: 0;
    margin-bottom: 32px;
  }
  .header__intro p {
    margin-bottom: 32px;
  }
}

.header__intro__cdemo {}

/* main */
.main {}

/* main about home  */
.main__about {
  padding-top: 90%;
  padding-bottom: 50px;
  background-position: 0% 0%;
  background-repeat:no-repeat;
  background-size: 100%;
  background-image: url(/assets/img/home-intro-hero.jpg);
}
.main__about h2 {
  color: #484848;
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 32px;
}
.main__about h3 {
  color: #de5656;
  font-size: 1.1rem;
  font-weight: 200;
  text-transform: uppercase;
  margin-top: 32px;
  margin-bottom: 18px;
}
@media (min-width: 768px) {
  .main__about {
    padding-top: 100px;
    padding-bottom: 100px;
    background-position: left;
    background-repeat:no-repeat;
    background-size: 50%;
  }
  .main__about--last {
    padding-bottom: 100px;
  }
  .main__about h2 {
    font-size: 3.8rem;
  }
  .main__about p {
    margin-bottom: 32px;
  }
}

/* MAIN CLIENTLIST */
.main__clientlist {
  background: rgb(255,110,89);
  background: linear-gradient(90deg, rgba(255,110,89,1) 0%, rgba(255,150,85,1) 100%);
}
.main__clientlist h2 {
  color: #fff;
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 32px;
}
.main__clientlist h3 {
  color: #fff;
  font-size: 1.1rem;
  font-weight: 200;
  text-transform: uppercase;
  margin-top: 32px;
  margin-bottom: 18px;
}
.main__clientlist p {
  color: #fff;
  margin-bottom: 32px;
}

@media (min-width: 768px) {
  .main__clientlist {
    padding-top: 100px;
    padding-bottom: 100px;
    background: rgb(255,110,89);
    background: linear-gradient(90deg, rgba(255,110,89,1) 0%, rgba(255,150,85,1) 100%);
  }
  .main__clientlist--last {
    padding-bottom: 100px;
  }
  .main__clientlist h2 {
    font-size: 3.8rem;
  }
  .main__clientlist p {
    color: #fff;
    margin-bottom: 32px;
  }
}

/* main - home - services */
.main__services {
  background-color: #f7f7f7;
  padding-top: 50px;
  padding-bottom: 50px;
}
.main__services a {
  text-decoration: none;
}
@media (min-width: 768px) {
  .main__services {
    padding-top: 100px;
    padding-bottom: 100px;
  }
}

.main__service__category {
  padding-bottom: 20px;;
}

.main__services__heading {
  padding-bottom: 50px;
}
@media (min-width: 768px) {
  .main__services__heading {
    padding-bottom: 50px;
  }
}
.main__services__heading h2 {
  color: #484848;
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 32px;
}
@media (min-width: 768px) {
  .main__services__heading h2 {
    font-size: 3.8rem;
  }
}
.main__services__heading h3 {
  color: #de5656;
  font-size: 1.1rem;
  font-weight: 200;
  text-transform: uppercase;
  margin-top: 32px;
  margin-bottom: 18px;
}
.main__services__block {
  display: flex;
  align-items: flex-end;
  height: 300px;
  color: #fff;
  padding: 25px;
}
@media (min-width: 768px){
  .main__services__block {
    height: 400px;
  }
}
.main__services-subtext h2 {
  color: #fff;
}
.main__services__block--orange {
  background-image: url(/assets/img/product-configurators-hero-home.png), linear-gradient(90deg, rgba(255,110,89,1) 0%, rgba(255,150,85,1) 100%);
  background-repeat: no-repeat;
  background-size: 100%;
  background-color: rgb(255,110,89);
}
.main__services__block--blue {
  background-image: url(/assets/img/systems-configurators-hero-home.png), linear-gradient(97deg, rgba(77,181,217,1) 0%, rgba(102,219,242,1) 100%);
  background-repeat: no-repeat;
  background-size: 100%;
  background-color: rgb(77,181,217);
}
.main__services__block--green {
  background-image: url(/assets/img/app-development-hero-home.png),linear-gradient(90deg, rgba(88,193,176,1) 0%, rgba(99,215,185,1) 100%);
  background-repeat: no-repeat;
  background-size: 100%;
  background-color: rgb(88,193,176);
}
.main__services__block--purp {
  background: rgb(140,113,200);
  background: linear-gradient(97deg, rgba(140,113,200,1) 0%, rgba(159,141,218,1) 100%);
}

/* main page */
.main__page {}

.main__page--feature {
  padding-top: 65%;
  margin-top: 40px;
}
.main__page--feature h2 {
  color: #484848;
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 32px;
}
.main__page--feature h3 {
  color: #de5656;
  font-size: 1.1rem;
  font-weight: 200;
  text-transform: uppercase;
  margin-top: 32px;
  margin-bottom: 18px;
}
@media (min-width: 768px){
  .main__page--feature {
    margin-top: 0px;
    padding-top: 100px;
    padding-bottom: 100px;
  }
  .main__page--feature h2 {
    font-size: 3.8rem;
  }
  .main__page--feature p {
    margin-bottom: 32px;
  }
}

/* FEATURE IMAGE CLASSES */
.feature-img__left {
  background-position: 0% 0%;
  background-repeat:no-repeat;
  background-size: 100%;
}
.feature-img__right {
  background-position: 100% 0%;
  background-repeat:no-repeat;
  background-size: 100%;
}
@media (min-width: 768px){
  .feature-img__left {
    background-position: left;
    background-repeat:no-repeat;
    background-size: 50%;
  }
  .feature-img__right {
    background-position: right;
    background-repeat:no-repeat;
    background-size: 50%;
  }
}

.feature-img__right--gen-1 {
  background-image: url(/assets/img/feature-generic-mmd-logo.jpg);
}
@media (min-width: 768px){
  .feature-img__right--gen-1 {
    background-image: url(/assets/img/mmd-emblem-3d.jpg);
  }
}
.feature-img__right--pc-1 {
  background-image: url(/assets/img/product-configurators-feature-worktable-in-browser.jpg);
}
.feature-img__left--pc-2 {
  background-image: url(/assets/img/product-configurators-feature-mobile-hat-configurator.jpg);
}
.feature-img__right--pc-3 {
  background-image: url(/assets/img/product-configurators-feature-moji-moji-showcase.jpg);
}
.feature-img__right--sc-1 {
  background-image: url(/assets/img/systems-configurators-large-screen-augmented-options.jpg);
}
.feature-img__right--sc-2 {
  background-image: url(/assets/img/systems-configurators-configure-price-quote.jpg);
}
.feature-img__right--sc-3 {
  background-image: url(/assets/img/systems-configurators-devices.jpg);
}
.feature-img__right--ad-1 {
  background-image: url(/assets/img/app-development-apps-showcase.jpg);
}
.feature-img__right--ad-2 {
  background-image: url(/assets/img/app-development-web-development.jpg);
}
.feature-img__right--ad-3 {
  background-image: url(/assets/img/app-development-digital-design.jpg);
}

/* FOOTER */
.footer {
  background-color: #1b1b1b;
  color: #ccc;
  font-size: 0.9rem;
}
.footer a {
 text-decoration: none;
 color: #ccc;;
}
.footer a:hover {
  color: #EB4940;
}
.footer ul {
  list-style-type: none;
  padding-left: 0;
}
.footer__details {
  padding-top: 80px;
  padding-bottom: 80px;
}
.footer__details h3 {
  color: #de5656;
  font-size: 1.1rem;
  font-weight: 200;
  text-transform: uppercase;
}