* {
   padding: 0;
   margin: 0;
   box-sizing: border-box;
}

body {
   font-family: 'Montserrat';
   font-weight: 400;
   color: #000;
   font-size: 23px;
}

/* Utilities */
.btn {
   padding: 10px 20px;
   display: inline-block;
   border: none;
   border-radius: 5px;
   margin: 20px 0;
   font-size: 20px;
}

.btn-green {
   background: #aac62f;
   color: #fff;
}

.btn-green:hover {
   background: #708c10;
}

a {
   text-decoration: none;
}

.bg-dark {
   background: #242624;
   color: #fff;
}

.bg-green {
   background: #aac62f;
   color: #fff;
}

/* Flex Columns */
.flex-column.flex-reverse .row {
   flex-direction: row-reverse;
}

.flex-column .row {
   display: flex;
   flex-direction: row;
   width: 100%;
   flex-wrap: wrap;
}

.flex-column .column{
   display: flex;
   flex-direction: column;
   flex-basis: 100%;
   width: 100%;
   flex: 1;
   align-items: center;
   justify-content: center;
}

.flex-column .column .column-1, .flex-column .column .column-2, .flex-column .column .column-3, .flex-column .column .column-4 {
   height: 100%;
}

.flex-column img{
   width: 100%;
   height: auto;
}

.flex-column .column-1{
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
}

.flex-column .column-2 {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   justify-content: center;
   padding: 30px;
}

.flex-column .column-3 {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   justify-content: center;
   padding: 30px;
}

.advantages-summary.flex-column .column-3{
   border: 2px solid #fff;
   height: 100%;
   padding: 0;
   width: 100%;
   text-align: center;
   align-items: center;
   justify-content: center;
}

.advantages-summary .column-3 img{
   height: 50%;
   width: auto;
}

ul {
   list-style: none;
}

/* navbar */
.logo {
   width: 60px;
}

.mobile-menu-toggle {
   color: #fff;
   font-size: 35px;
   cursor: pointer;
   display: none;
}

.navbar {
   display: flex;
   justify-content: space-between;
   background: rgba(0, 0, 0, 0.8);
   padding: 0 120px;
   align-items: center;
   position: fixed;
   top: 0;
   width: 100%;
}

.navbar ul {
   display: flex;
}

.navbar ul li {
   padding: 30px 30px;
   font-size: 30px;
}

.navbar ul li a{
   color: #fff;
}

.navbar ul li:hover{
   border-bottom: 3px solid #aac62f;
   padding-bottom: 0px;
}

.navbar.top {
   background: transparent;
}

/* hero */
.hero {
   background: url("../media/images/home_cover.jpg") no-repeat center center/cover;
   height: 100vh;
   position: relative;
}

.hero.company {
   background: url("../media/images/company_cover.jpg") no-repeat center center/cover;
}

.hero.products {
   background: url("../media/images/products_cover.jpg") no-repeat center center/cover;
}

.hero.gallery {
   background: url("../media/images/westfalia-1.JPG") no-repeat center center/cover;
}

.hero-content {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   height: 100%;
   padding: 0;
}

.hero-content h1 {
   font-size: 120px;
   color: #aac62f;
   font-weight: 800;
   text-align: center;
}

.hero-content h2 {
   color: #fff;
   font-weight: 400;
   text-align: center;
   font-size: 35px;
}

.hero-content .btn {
   font-size: 25px;
}

/* contact form */
#container {
   height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
   background: url("../media/images/contact_form_background.jpg") no-repeat center center/cover;
}

.contact-form {
   display: flex;
   padding: 30px 0;
   align-items: center;
   justify-content: center;
   background: url("../media/images/contact_form_background.jpg") no-repeat center center/cover;
}

.form-wrap {
   background: #242624;
   border: 1px solid #aac62f;
   padding: 20px 30px;
   color: #fff;
   max-width: 500px;
}

.form-wrap h2 {
   font-size: 60px;
   padding-bottom: 20px;;
}

.form-group {
   display: flex;
   flex-direction: column;
   padding-bottom: 15px;
}

.form-group input, textarea {
   width: 100%;
   padding: 10px;
   border: 1px solid #aac62f;
   border-radius: 5px;
}

.form-group label {
   padding-bottom: 5px;
}

.form-wrap button {
   width: 100%;
   font-family: 'Montserrat';
   font-size: 30px;
}

/* company */
.company-text {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 50vh;
   text-align: center;
   padding: 0 80px;
}

.company-images.flex-column .column{
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
}

.company-images .img-padding {
   padding: 0 5px;
}

.company-logo {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 50vh;
   padding: 50px 0;
}

.company-logo h2 {
   font-size: 90px;
   text-align: center;
   color: #aac62f;
   font-weight: 800;
}

.company-logo img {
   height: 100%;
   padding-right: 50px;
}

/* products */
.product-summary h2 {
   font-size: 60px;
}

.products-summary .column-1 {
   flex-direction: column;
}

/* contact */
.contact {
   background: url("../media/images/contact_cover.jpg") no-repeat center center/cover;
   /* height: 100vh; */
   position: relative;
   color: #fff;
   overflow: hidden;
}

.navbar-contact {
   position: fixed;
   top: 0;
}

.contact-wrap {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-template-rows: repeat(4, 1fr);
   grid-gap: 20px;
   align-items: center;
   justify-items: center;
   justify-content: center;
   align-content: center;
}

.content {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100%;
   padding-bottom: 50px;
   padding-top: 180px;
}

.limpopo {
   display: flex;
   flex-direction:column;
   grid-area: 1 / 1 / 3 / 2;
   background: #242624;
   border: solid 1px #aac62f;
   width: 100%;
   height: 100%;
   text-align: center;
   align-items: center;
   justify-content: center;
}

.limpopo h5, .cape h5 {
   color: #aac62f;
   padding: 15px 0;
   font-size: 25px;
}

.limpopo h6, .cape h6 {
   padding: 15px 20px;
   font-size: 20px;
   font-weight: 400;
   text-align: left;
}

.cape {
   grid-area: 3 / 1 / 5 / 2;
   background: #242624;
   border: solid 1px #aac62f;
   width: 100%;
   height: 100%;
   text-align: center;
   display: flex;
   flex-direction:column;
   align-items: center;
   justify-content: center;
}

.contact-form-wrap {
   grid-area: 1 / 2 / 5 / 3;
}

hr {
   border: 0.5px solid #aac62f;
   width: 80%;
}

/* Gallery */
.container1 {
   width: 98%;
   margin: 20px auto;
}

.grid img {
   width: 100%;
}

.grid-col--2, .grid-col--3 {
   display: none;
}

.grid {
   display: flex;
}

.grid-col {
   flex: 1;
   padding: 0 .2em;
}

@media (min-width: 768px) {
   .container {
      width: 98%;
   }

   .grid-col--2 {
      display: block;
   }
}

@media (min-width: 1170px) {
   .grid-col--2, .grid-col--3 {
      display: block;
   }
}

@media (max-width: 1170px) and (min-width: 878px) {
   .navbar {
      flex-direction: column;
   }
}

@media screen and (max-width: 878px) {
   .advantages-summary.flex-column .column-3 {
      padding: 30px;
   }

   .products-summary-home .column-1 {
      flex-direction: column;
   }

   .hero-content h1 {
      font-size: 40px;
   }
   
   .hero-content h2 {
      font-size: 25px;
   }
   
   .hero-content .btn {
      font-size: 20px;
   }

   .mobile-menu-toggle {
      display: flex;
      padding-right: 35px;
      padding-top: 10px;
   }

   .logo {
      padding-left: 35px;
      padding-top: 10px;
      width: 80px;
   }

   .navbar {
      padding: 0;
   }

   .navbar ul {
      position: absolute;
      width: 100%;
      top: 58px;
      background: rgba(0, 0, 0, 0.8);
      display: flex;
      flex-direction: column;
      align-items: center;
   }

   .nav-list {
      left: -100%;
      transition: 0.5s;
   }

   .nav-list.active {
      left: 0;
   }

   .navbar ul li {
      padding: 10px 20px;
      font-size: 25px;
      border-bottom: 1px #aac62f solid;
      width: 100%;
      text-align: center;
   }

   .contact-form {
      height: auto;
      padding: 20px 0;
   }

   .form-wrap h2 {
      font-size: 30px;
      text-align: center;
   }

   .form-wrap button {
      font-size: 20px;
   }

   .btn {
      font-size: 15px;
   }

   .advantages-summary.flex-column .column-3{
      font-size: 15px;
   }
   
   .advantages-summary .column-3 img{
      height: 50%;
   }

   .company-text {
      height: auto;
      padding: 20px;
      font-size: 15px;
   }

   .company-images.flex-column .column{
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
   }

   .company-images .img-padding {
      padding: 0;
   }

   .company-logo {
      display: none;
   }

   .product-summary h2 {
      font-size: 30px;
   }

   .content .contact-wrap {
      display: flex;
      flex-direction: column;
      padding: 10px;
   }

   .contact {
      height: auto;
      overflow: visible;
   }

   /* .navbar-contact nav {
      display: none;
   } */

   .content {
      flex-direction: column;
   }

   .limpopo, .cape {
      margin-bottom: 15px;
   }

   .limpopo h5, .cape h5 {
      font-size: 15px;
   }
   
   .limpopo h6, .cape h6 {
      padding: 15px 10px;
      font-size: 15px;
   }

   .flex-column .column {
      flex: auto;
   }
}