/* =================================================== */
/*                  Global styling                     */
/* =================================================== */

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

html,
body {
  background-color: #ffffff;
  color: #555555;
  font-family: "Lato", "Arial", sans-serif;
  font-weight: 300;
  font-size: 20px;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1,
h2,
h3 {
  font-weight: 300;
  text-transform: uppercase;
}

h1 {
  margin-top: 0;
  margin-bottom: 20px;
  color: #fff;
  font-size: 300%;
  word-spacing: 4px;
  letter-spacing: 1px;
  font-weight: 400;
}

h2 {
  font-size: 180%;
  word-spacing: 2px;
  letter-spacing: 1px;
  text-align: center;
  margin-bottom: 30px;
}

h3 {
  font-size: 110%;
  word-spacing: 2px;
  margin-top: 15px;
  margin-bottom: 15px;
  font-weight: 400;
}

.clearfix {
  zoom: 1;
}
.clearfix:after {
  content: ".";
  clear: both;
  display: block;
  height: 0;
  visibility: hidden;
}

.pb-2 {
  padding-bottom: 2rem;
}

.pb-3 {
  padding-bottom: 3rem;
}

.no-padding {
  padding: 0 !important;
}

/* =================================================== */
/*                REUSABLE COMPONENTS                  */
/* =================================================== */

.row {
  max-width: 1140px;
  margin: 0 auto;
}

.row-clients {
  max-width: 90%;
  margin: 0 auto;
}

.input-long {
  width: 100%;
}

section {
  padding: 80px 0;
}

.box {
  padding: 1%;
}

.box p {
  font-size: 90%;
  line-height: 145%;
}

.center {
  text-align: center;
}

.aligner {
  display: flex;
  align-items: center;
  justify-content: center;
}

.align-item {
  max-width: 50%;
}

.justify-text {
  text-align: justify;
}

.w-100 {
  width: 100%;
}

/* ------------ LINKS ----------- */

a:link,
a:visited {
  text-decoration: none;
  color: #8a2b2b;
  padding-bottom: 1px;
  border-bottom: 1px solid #8a2b2b;
  -webkit-transition: color 0.2s, border-bottom 0.2s;
  transition: color 0.2s, border-bottom 0.2s;
}

a:hover,
a:active {
  color: #555555;
  border-bottom: 1px solid transparent;
}

/* ------------ ICONS ----------- */

.icon-big {
  font-size: 350%;
  display: block;
  color: #8a2b2b;
}

.icon-small {
  display: inline-block;
  width: 30px;
  text-align: center;
  color: #8a2b2b;
  font-size: 120%;
  margin-right: 10px;

  /* secrets to align text and icons */
  line-height: 120%;
  vertical-align: middle;
  margin-top: -5px;
}

/* ------------ PARAGRAPHS ----------- */

.long-copy {
  line-height: 145%;
  width: 70%;
  margin: 0 auto;
}

/* ------------- BUTTONS ------------- */

.btn:link,
.btn:visited,
input[type="submit"] {
  display: inline-block;
  padding: 10px 30px;
  font-weight: 300;
  text-decoration: none;
  color: white;
  -webkit-transition: background-color 0.4s, border 0.4s, color 0.4s;
  transition: background-color 0.4s, border 0.4s, color 0.4s;
}

.btn-full:link,
.btn-full:visited,
input[type="submit"] {
  background-color: #8a2b2b;
  border: 1px solid #8a2b2b;
  margin-right: 15px;
}


.btn-ghost:link,
.btn-ghost:visited {
  border: 1px solid #8a2b2b;
  color: #8a2b2b;
}

.btn:hover,
.btn:active,
input[type="submit"]:hover,
input[type="submit"]:active {
  background-color: #8a2b2b;
}

.btn-full:hover,
.btn-full:active {
  border: 1px solid #8a2b2b;
}

.btn-ghost:hover,
.btn-ghost:active {
  border: 1px solid #8a2b2b;
  color: #fff;
}

.btn-block {
  display: block;
  width: 100%;
}

/* =================================================== */
/*                HEADER SECTION                       */
/* =================================================== */


header {
  background-image: -webkit-gradient(
      linear,
      left top,
      left bottom,
      from(rgba(0, 0, 0, 0.7)),
      to(rgba(0, 0, 0, 0.7))
    ),
    url("./img/8-cropped.jpg");
  background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.8)),
    url("./img/8-cropped.jpg");
  background-size: 100%;
  background-position: center;

  margin-top: 120px;
  height: 90vh;
}

@media screen and (max-width: 700px) {
     header {
      background-image: -webkit-gradient(
          linear,
          left top,
          left bottom,
          from(rgba(0, 0, 0, 0.7)),
          to(rgba(0, 0, 0, 0.7))
        ),
        url("./img/mobile-header.jpg");
      background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.8)),
        url("./img/mobile-header.jpg");
      background-size: auto;
      background-position: center;
    
      margin-top: 120px;
      width: 100%;
    }
}

.hero-text-box {
  position: absolute;
  width: 1140px;
  top: 80%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.arrow-down {
  text-align: center;
  color: #ddd;
}

.arrow-down a:link,
.arrow-down a:visited {
  text-decoration: none;
  border: none;
  cursor: pointer;
  color: rgb(187, 187, 187);
}

.arrow-down a:hover,
.arrow-down a:focus {
  color: #fff;
}

.header-logo {
  height: 100px;
  width: auto;
  float: left;
  margin-top: 20px;
}

.header-logo-black {
  display: none;
  height: 50px;
  width: auto;
  float: left;
  margin: 5px 0;
}

/* =================================================== */
/*                Navigation Bar                       */
/* =================================================== */

nav {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #ffffff;
}

.main-nav {
  float: right;
  list-style: none;
  margin-top: 55px;
}

.main-nav li {
  display: inline-block;
  margin-left: 40px;
}

.main-nav li a:link,
.main-nav li a:visited {
  padding: 8px 0px;
  color: #555;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 90%;
  border-bottom: 2px solid transparent;
  -webkit-transition: border-bottom 0.2s;
  transition: border-bottom 0.2s;
}

.main-nav li a:hover,
.main-nav li a:active {
  border-bottom: 2px solid #2b2d8a;
}

/* -------- mobile navi --------- */
.mobile-nav-icon {
  float: right;
  margin-top: 30px;
  cursor: pointer;
  display: none;
}

.mobile-nav-icon i {
  font-size: 200%;
  color: #555;
}

/* -------- Sticky navi --------- */
.sticky {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.98);
  box-shadow: 0 2px 2px #e7e7e7;
  z-index: 9999;
}

.sticky .main-nav {
  margin-top: 18px;
}

.sticky .main-nav li a:link,
.sticky .main-nav li a:visited {
  padding: 18px 0px;
  color: #555;
}

.sticky .header-logo {
  display: none;
}
.sticky .header-logo-black {
  display: block;
}

/* =================================================== */
/*              TEAM PHOTO SECTION                     */
/* =================================================== */

.section-photos {
  padding: 0;
}

.team-showcase {
  list-style: none;
  width: 100%;
}

.team-showcase li {
  display: block;
  float: left;
  width: 25%;
}

.team-photo {
  width: 100%;
  margin: 0;
  overflow: hidden;
  background: #000;
}

.team-photo img {
  opacity: 0.7;
  width: 100%;
  height: auto;
  -webkit-transform: scale(1.15);
  transform: scale(1.15);
  -webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
  transition: opacity 0.5s, -webkit-transform 0.5s;
  transition: transform 0.5s, opacity 0.5s;
  transition: transform 0.5s, opacity 0.5s, -webkit-transform 0.5s;
}

.team-photo img:hover {
  -webkit-transform: scale(1.03);
  transform: scale(1.03);
  opacity: 1;
}

/* =================================================== */
/*                   How it works                      */
/* =================================================== */

.steps img {
  height: 50px;
}

/* =================================================== */
/*             Featured Products                         */
/* =================================================== */

.section-feature-products {
  background-color: #f5f5f5;
}

.feature-products {
  margin-bottom: 5px;
}

.product {
  text-align: center;
}
.product img {
  height: 200px;
  margin-bottom: 20px;
}

.action-buttons {
  margin-top: 30px;
}

/* =================================================== */
/*                  Our clients                      */
/* =================================================== */

.section-clients {
  padding-top: 40px;
  padding-bottom: 60px;
}

.client-showcase {
  list-style: none;
  width: 100%;
}

.client-showcase li {
  display: block;
  float: left;
  width: 20%;
}

.client-logo {
  width: 100%;
  margin: 0;
  overflow: hidden;
  background: #fff;
}

.client-logo img {
  opacity: 0.7;
  width: 100%;
  height: auto;
  -webkit-transform: scale(1.03);
  transform: scale(1.03);
  -webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
  transition: opacity 0.5s, -webkit-transform 0.5s;
  transition: transform 0.5s, opacity 0.5s;
  transition: transform 0.5s, opacity 0.5s, -webkit-transform 0.5s;
}

.client-logo img:hover {
  -webkit-transform: scale(1.15);
  transform: scale(1.15);
  opacity: 1;
}

/* =================================================== */
/*                   Testimonials                      */
/* =================================================== */

.section-testimonials {
  background-image: -webkit-gradient(
      linear,
      left top,
      left bottom,
      from(rgba(0, 0, 0, 0.8)),
      to(rgba(0, 0, 0, 0.8))
    ),
    url("./img/back-customers.jpg");
  background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)),
    url("./img/back-customers.jpg");
  background-size: cover;
  color: #ffffff;
  background-attachment: fixed;
}

blockquote {
  padding: 2%;
  font-style: italic;
  line-height: 145%;
  position: relative;
  margin-top: 40px;
}

cite {
  font-size: 90%;
  font-weight: 700;
  margin-top: 25px;
  display: block;
}

blockquote:before {
  content: "\201C";
  font-size: 500%;
  display: block;
  position: absolute;
  top: -5px;
  left: -10px;
}

cite img {
  height: 45px;
  border-radius: 50%;
  margin-right: 10px;
  vertical-align: middle;
}
/* =================================================== */
/*                  About Us                        */
/* =================================================== */

.section-about {
  margin-top: 180px;
  padding:0;
}

.bullet-points {
  margin-left: 20px;
}

.section-values {
  margin: 0;
  padding: 0;
  background: #fff;
}

.section-supplier-program {
  padding: 20px 0 60px 0;
  
}

/* =================================================== */
/*                  Our Process                        */
/* =================================================== */

.section-process {
  margin-top: 120px;
  padding: 50px 0;
}

.process-step {
  margin: 20px 0;
}

.process-step div img {
  height: 50px;
}

.process-step .span-1-of-5 {
  text-align: center;
}

.process-step .span-1-of-3 {
  text-align: center;
}

/* =================================================== */
/*                  Contact Us                         */
/* =================================================== */

.bottom-line {
  border-bottom: 1px solid rgb(197, 197, 197);
}

.top-line {
  border-top: 1px solid rgb(197, 197, 197);
}

.section-help {
  padding-top: 180px;
  padding-bottom: 20px;
  width: 45%;
  margin: 0 auto;
}

.section-contact {
  padding: 0;
  padding-bottom: 20px;
  width: 45%;
  margin: 0 auto;
}

.details {
  width: 80%;
  margin: 0 auto;
}

.contact-details {
  text-align: center;
}

.row .button {
  text-align: center;
}

#map {
  height: 400px; /* The height is 400 pixels */
  width: 100%; /* The width is the width of the web page */
}

.section-map {
  padding: 0;
  margin-top: 40px;
  color: #555;
}

.map-heading {
  margin-bottom: 15px;
  padding: 0;
}

.section-what-we-offer {
  padding-top: 60px;
  padding-bottom: 40px;
  margin: 0 auto;
  color: #555;
}

.bullet-points-services {
  text-decoration: none;
  list-style: none;
  text-align: center;
  
}

.bullet-points-services li {
  margin-bottom: 10px;
}

.address-link a:link,
.address-link a:visited {
  font-size: 130%;
  line-height: 150%;
  border-bottom: none;
}

.form-messages {
  text-align: center;
  padding: 15px;
  border-radius: 3px;
  margin-bottom: 15px;
}

.success {
  background:  #6bc95b;
  color: #fff;
}

.error {
  background: #ff5353;
  color: #fff;
}

a:link,
a:visited {
  text-decoration: none;
  color: #2b2d8a;
  padding-bottom: 1px;
  border-bottom: 1px solid #2b2d8a;
  -webkit-transition: color 0.2s, border-bottom 0.2s;
  transition: color 0.2s, border-bottom 0.2s;
}

a:hover,
a:active {
  color: #555555;
  border-bottom: 1px solid transparent;
}

input[type="text"],
input[type="email"],
select,
textarea {
  width: 100%;
  padding: 7px;
  border-radius: 3px;
  border: 1px solid #ccc;
  font-size: 14px;
}

textarea {
  height: 100px;
}

input[type="checkbox"] {
  margin: 10px 5px 10px 0;
}

*:focus {
  outline: none;
}

/* =================================================== */
/*                  Footer                         */
/* =================================================== */

footer {
  background: #fff;
  padding: 50px;
  font-size: 80%;
}

.footer-nav {
  list-style: none;
  float: left;
}

.social-links {
  list-style: none;
  float: right;
}


.social-links li,
.footer-nav li {
  display: inline-block;
  margin-right: 20px;
}

.footer-nav li:last-child,
.social-links li:last-child {
  margin: 0;
}

.footer-nav li a:link,
.footer-nav li a:visited,
.social-links li a:link,
.social-links li a:visited {
  text-decoration: none;
  border: 0;
  color: #888;
  -webkit-transition: color 0.2s;
  transition: color 0.2s;
}

.social-links li a:link,
.social-links li a:visited {
  font-size: 160%;
}

.ion-logo-facebook,
.ion-logo-twitter,
.ion-logo-googleplus,
.ion-logo-instagram {
  -webkit-transition: color 0.2s;
  transition: color 0.2s;
}

.ion-logo-facebook:hover {
  color: #3b5998;
}

.ion-logo-twitter:hover {
  color: #55acee;
}

.ion-logo-googleplus:hover {
  color: #dd4b39;
}

.ion-logo-instagram:hover {
  color: #e95950;
}

.footer-nav li a:hover,
.footer-nav li a:active {
  color: rgb(0, 0, 0);
}

footer p {
  color: #888;
  text-align: center;
  margin-top: 20px;
}

/* =================================================== */
/*                  animations                         */
/* =================================================== */

.js--wp-1,
.js--wp-2,
.js--wp-3 {
  opacity: 0;
  animation-duration: 1s;
}

.js--wp-4 {
  animation-duration: 1s;
}

.js--wp-1.animated,
.js--wp-2.animated,
.js--wp-3.animated {
  opacity: 1;
}

/* =================================================== */
/*                  terms                              */
/* =================================================== */
.terms {
    /*padding:150px 150px 0px;*/
}

@media screen and (max-width: 700px) {
     terms {
      padding:10px 10px 0px;
    }
}