/* Stylesheet voor Eindwerk: Wagener-Cars */
/* Box-sizing */
html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  *, *:before, *:after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
    }
/* ________________________ */

/* Code om alle outlines te zien */
/* * {
  outline: 1px solid red;
} */

@font-face {
  font-family: 'Mercedes';
  src: url(../fonts/Mercedes.ttf);
}

@font-face {
  font-family: 'MercedesBold';
  src: url(../fonts/MercedesBold.otf);
}

/* Onnodige witruimte onder footer en boven nav weghalen */
body, html {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  background-color: #F7F8F9;
}

h1, h2, h3, a {
  font-family: MercedesBold;
}

p, li {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

nav {
  display: flex;
  height: 85px;
box-shadow: 2px 0px 11px 2px rgba(0,0,0,0.26);
-webkit-box-shadow: 2px 0px 11px 2px rgba(0,0,0,0.26);
-moz-box-shadow: 2px 0px 11px 2px rgba(0,0,0,0.26);
}

.logo {
    height: 100%;
}

nav ul {
  display: flex;
  gap: 35px;
  list-style-type: none;
  align-items: center;
  position: relative;
}

.nava::after{
  content: '';
  background-color: #353535;
  width: 0%;
  height: 3%;
  position: absolute;
  bottom: 8px;
  transition: 1s ;
}

.nava:hover::after{
  transition: 1s;
  width: 10%;
}

.nava {
  text-decoration: none;
  color: #353535;
  padding: 6px 10px;
}

li {
  font-family: MercedesBold;
  font-size: 1.2rem;
}

.icoon {
  height: 50%;
  padding-left: 5px;
}

.iconen {
  margin-left: auto;
  padding-right: 20px;
  margin-top: 25px;
}

.Deal img{
  width: 100%;
  padding: 0 25px;
}

.Deal h2 {
  display: inline-block;
  position: absolute;
  font-size: 5rem;
  top: 5rem;
  color: #353535;
  left: 3.8rem;
  max-width: 60%;
}

.Deal a {
  display: inline-block;
  position: absolute;
  text-decoration: none;
  color: #F7F8F9;
  background-color: #3C6E71;
  padding: 20px 50px;
  top: 14.5rem;
  left: 3.8rem;
  border-radius: 25px;
}

.Brands {
  position: absolute;
  left: 50%; /* Brengt linkerzeide van box naar 50*/
  transform: translateX(-50%); /* Brengt de container 50% van zichzelf naar links */
  margin-top: -4rem;
  border: #353535 3px solid;
  padding: 2% 3%;
  background-color: #F7F8F9;
  color: #3C6E71;
  box-shadow: 0px 0px 14px 6px rgba(0,0,0,0.25);
  -webkit-box-shadow: 0px 0px 14px 6px rgba(0,0,0,0.25);
  -moz-box-shadow: 0px 0px 14px 6px rgba(0,0,0,0.25);
}

.textMain {
  font-family: MercedesBold;
  font-size: 1.5em;
  font-weight: 200;
  font-style: italic;
  text-align: center;
  color: #284B63;
  margin-top: 4em;
}

.VoorbeeldenBoven, .VoorbeeldenBeneden {
  display: flex;
  gap: 4rem;
  padding-top: 5rem;
  align-items: center;
  justify-content: space-around;
}

.VoorbeeldenBeneden {
  padding-bottom: 8rem;
}

.VoorbeeldenBoven .InfoVoorbeelden {
  right: 12rem;
}

.VoorbeeldenBeneden .InfoVoorbeelden {
  left: 12rem;
}

.VoorbeeldenBoven img, .VoorbeeldenBeneden img {
  width: 33.33%;
  box-shadow: 0px 0px 14px 6px rgba(0,0,0,0.25);
-webkit-box-shadow: 0px 0px 14px 6px rgba(0,0,0,0.25);
-moz-box-shadow: 0px 0px 14px 6px rgba(0,0,0,0.25);
  border-radius: 2px;
}

.InfoVoorbeelden {
  position: relative;
  padding: 3rem 5rem;
  text-align: center;
  background-color: #D9D9D9;
  border: #284B63 solid 2px;
}

.InfoVoorbeelden h2, .InfoVoorbeelden h3, .InfoVoorbeelden p {
  width: 20rem;
}

.InfoVoorbeelden a {
  padding: 1rem 2rem;
  background-color: #284B63;
  display: block;
  text-decoration: none;
  color: #D9D9D9;
}

footer {
  background-color: #353535;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem 0;
}

.Boven {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.Boven img {
  height: 2.5rem;
  width: 2.5rem;
}

.Boven p {
  color: #F7F8F9;
  margin-top: -0.2rem;
}

.foot {
  position: relative;
  display: flex;
  gap: 5rem;
}

.foot::before {
  content: "";
  height: 1px;
  width: 100%;
  background-color: #D9D9D9;
  position: absolute;
}

.foot::after {
  content: "";
  height: 1px;
  width: 100%;
  background-color: #D9D9D9;
  position: absolute;
  margin-top: 17rem;
}

.foot a {
  text-decoration: none;
  color: #D9D9D9;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.foot a:hover {
  color: #F7F8F9;
}

.foot p {
  color: #D9D9D9;
}

.footCat {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  color: #F7F8F9;
}

.socials {
  display: flex;
  gap: 5rem;
  margin-top: 2rem;
}

.socials p {
  color: #D9D9D9;
}

.socials img {
  max-width: 2rem;
  width: 100%;
  margin-top: 0.7rem;
}