/*
  Josh's Custom CSS Reset
  https://www.joshwcomeau.com/css/custom-css-reset/
*/
*, *::before, *::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}
html, body {
  height: 100%;
}
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}
input, button, textarea, select {
  font: inherit;
}
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}
#root, #__next {
  isolation: isolate;
}

/* Fonts */
.header-font-bold {
  font-family: "Aleo", serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}


/*
@font-face {
  font-family: 'zulu-partners';
  src:  url('../fonts/zulu-partners.eot?z3o5ur');
  src:  url('../fonts/zulu-partners.eot?z3o5ur#iefix') format('embedded-opentype'),
    url('../fonts/zulu-partners.ttf?z3o5ur') format('truetype'),
    url('../fonts/zulu-partners.woff?z3o5ur') format('woff'),
    url('../fonts/zulu-partners.svg?z3o5ur#zulu-partners') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts *//*
  font-family: 'zulu-partners' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== *//*
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
*/
.icon-linkedin:before {
  content: "\eac9";
}
.icon-facebook:before {
  content: "\ea91";
}
.icon-instagram:before {
  content: "\ea92";
}

/* Flexbox */
.flex {display: flex; flex-direction: row;}
.flex-center {justify-content: center;}
.flex-align-center {align-items: center;}
.flex-space-between {justify-content: space-between;}
.flex-wrap {flex-wrap: wrap;}
.flex-50vw {width: 50%;}
.flex-100vw {width: 100%;}

/* Headings */
h1, h2, h3 {font-weight: 700; font-family: 'Aleo', serif;}
h1 {font-size: 3.2em; line-height: 1.15em;}

/* Animation */
.animate-1 {transition-property: all; transition-timing-function: ease-in; transition-duration: 0.3s;}

/* Layout */
html {font-size: 16px;}
body {background-color: #f2f2f2; color: #ddd; font-family: 'Noto Sans', sans-serif;}
header, main, footer {width: 100%;}
header.temp {display: block; height: 100px;}
section {margin: 0 auto; position: relative;}
.pw-720 section, section.pw-720 {width: 720px;}
.pw-960 section, section.pw-960 {width: 960px;}
.pw-1120 section, section.pw-1120 {width: 1120px;}
section article {}

/** Header **/
#header {position: relative; z-index: 200; border-top: 4px solid #333;}
#header-logo {width: 30%;}
#header-logo .logo {width: 105px; padding-top: 15px;}
#header-nav {width: 70%;}
#header-nav nav {}
#header-nav nav ul {list-style: none; width: 100%; padding: 0; margin: 0;}
#header-nav nav ul > li {display: flex; align-items: center; justify-content: center; font-family: 'Aleo'; font-weight: 400; color: #333; width: 25%; height: 110px; text-align: center; cursor: pointer;}
#header-nav nav ul > li:hover {font-weight: 700; color: #eee; height: 110px; background-image: url("../img/nav-item-bg.png"); background-size: cover; background-position: bottom 0 right 0; background-repeat: no-repeat;}


/** Main **/
main .headline-hint {display: inline-block; text-transform: uppercase; font-weight: 700; color: #c90015; padding: 0 0 10px 0;}
main p {font-size: 1rem; color: #444; line-height: 1.7em;}

#main {position: relative; top: -10px; z-index: 100; background-color: #eaeaea; background-image: url("../img/headliner-icon-alt-bg.png"); background-repeat: repeat; background-size: 8%; padding: 20px 0 0 0; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; color: #333;}
main section.hero {min-height: 300px; position: relative;}
#main-headliner {width: 50%; padding: 3rem 0 2rem 0;}
#main-headliner .headline-hint {display: inline-block; text-transform: uppercase; font-weight: 700; color: #c90015; padding: 0 0 10px 0;}
#main-headliner h1 {padding-bottom: 15px;}
#main-headliner p {border-left: 5px solid #c90015; padding-left: 15px;}
#main-headliner .action {padding: 2rem 0 1rem 0;}
#main-headliner .action button {font-size: 1.2rem; font-weight: 500; background-color: #eeeeee; color: #333; border: 1px solid #333; padding: 0.8em 2em; cursor: pointer;}
#main-headliner .action button.red {background-color: #c90015; border: 1px solid #c90015; color: #eee;}
#main-headliner .action button:hover {background-color: #333; border: 1px solid #333; color: #eeeeee;}
#main-headliner .action button.red:hover {background-color: #eee; border: 1px solid #333; color: #333;}
#main-hero-image {position: absolute; width: 56%; bottom: 0; right: -50px; height: 400px; background-image: url("../img/hero-image.png"); background-size: 100%; background-position: bottom 0 right 0; background-repeat: no-repeat;}

main section.about {min-height: 300px; position: relative; padding: 80px 0;}
#main-about-image {padding: 5px 30px 20px 10px;}
#main-about-image .image {background-image: url("../img/image-about-01.jpg"); background-size: cover; background-position: center; width: 100%; height: 100%;}
#main-about-body {color: #333;}
#main-about-body h2 {font-size: 2rem; line-height: 1.2em; padding-bottom: 15px;}
#main-about-body p {padding-bottom: 20px; color: #777;}
#main-about-body ul {list-style: none; margin: 0; padding: 0;}
#main-about-body ul li {display: block; padding: 15px 0;}
#main-about-body ul li .item {padding: 25px 20px;}
#main-about-body ul li .item:hover {box-shadow: 2px 2px 15px 3px #bbb;}
#main-about-body ul li .item > div {display: inline-block;}
#main-about-body ul li .image {width: 100px; padding: 10px 20px 0 0;}
#main-about-body ul li .blurb {width: 99%;}
#main-about-body ul li .blurb .title {font-size: 1.2rem; font-weight: 700; padding: 0 0 5px 0;}
#main-about-body ul li .blurb .body {color: #777;}
#main-about-body-2 {color: #333; padding-top: 40px;}
#main-about-body-2 h3 {font-size: 1.6rem; text-align: center; line-height: 1.1em; padding-bottom: 20px;}
#main-about-body-2 ul {list-style: none; margin: 0; padding: 0;}
#main-about-body-2 ul li {display: flex; padding: 15px 0; width: 50%;}
#main-about-body-2 ul li .title {font-weight: bold; font-size: 1.2rem;}
#main-about-body-2 ul li .text {color: #777;}
#main-about-body-2 ul li:before {content: '\2714'; margin: 0 0.6em 0 0; color: #c90015;}

#main-3 {background-color: #ddd; color: #333;}
#main-services {text-align: center;}
main section.services {min-height: 300px; position: relative; padding: 60px 0;}
#main-services h1 {text-align: center; padding-bottom: 3rem;}
#main-services h2 {text-align: center; font-size: 2rem; line-height: 1.2em; text-align: center; padding: 40px 0 30px 0;}
#main-services ul {list-style: none; padding: 0; margin: 0; flex-wrap: wrap;}
#main-services ul li {width: 50%; padding: 0px 8px 30px 8px;}
#main-services ul li .item {background-color: #eee; padding: 40px 20px; min-height: 375px;}
#main-services ul li .item .image {width: 100px; margin: 0 auto;}
#main-services ul li .item p {color: #777;}

#main-4 {background-color: #eee; color: #333; padding-bottom: 120px;}
#main-properties {text-align: center; width: 100%;}
main section.properties {min-height: 300px; position: relative; padding: 40px 0;}
#main-properties .swiper {width: 960px; height: 560px;}
#main-properties .swiper-button-prev, #main-properties .swiper-button-next {color: #c90015;}
#main-properties .swiper-pagination-bullet-active {background-color: #c90015;}
#main-properties .swiper-slide {}
#main-properties .swiper-slide .image {width: 760px; margin: 0 auto;}
#main-properties .swiper-slide .label {padding: 5px 0 15px 0;}
#main-properties .swiper-slide .label h3 {font-weight: 700; font-size: 1.5rem; color: #333;}
#main-properties .swiper-slide .label .hint {font-weight: 500; font-size: 1rem; color: #777;}
#main-properties h1 {text-align: center; padding-bottom: 3rem;}

#main-5 {background-color: #333;}
main section.call-to-action {position: relative; padding: 40px 0;}
#main-call {width: 100%; min-height: 200px; position: absolute; top: -100px; background-color: #c90015; padding: 35px 40px;}
#main-call .call-to-action {width: 65%;}
#main-call .call-to-action h2 {font-size: 2.5rem; font-weight: 700; color: #eee; line-height: 1.2em; padding-bottom: 10px;}
#main-call .call-to-action p {font-size: 1.6rem; font-weight: 400; color: #eee; opacity: 0.8;}
#main-call .contact {width: 35%;}
#main-call .contact .whatsapp::before {content: ''; display: block; margin: 0 auto; background-image: url("../img/icon-whatsapp-white.png"); background-position: center; background-size: cover; width: 60px; height: 60px; margin-bottom: 20px;}
#main-call .contact .whatsapp {font-weight: 700; font-size: 2rem;}

footer {background-color: #333;}
footer section.footer {position: relative; padding: 40px 0 10px 0; flex-wrap: wrap;}
#footer-logo {width: 25%; padding: 80px 0 50px 20px;}
#footer-nav {width: 75%; padding-top: 110px;}
#footer-nav .empty {display: none;}
#footer-nav ul {list-style: none; margin: 0; padding: 0;}
#footer-nav ul li {padding: 5px 0;}
#footer-nav ul li .item {position: relative; height: 24px; padding-left: 30px; font-size: 0.9rem;}
#footer-nav ul li .item a {display: inline-block; text-decoration: none; color: #eee;}
#footer-nav ul li .item a:hover {border-bottom: 3px solid #777;}
#footer-nav ul li .item::before {position: absolute; left: 0; top: 2px; display: block; content: ''; width: 20px; height: 20px; background-position: center; background-size: cover;}
#footer-nav ul li.address .item::before {background-image: url("../img/icon-address-grey.png"); height: 25px;}
#footer-nav ul li.email .item::before {background-image: url("../img/icon-email-grey.png");}
#footer-nav ul li.phone .item::before {background-image: url("../img/icon-phone-grey.png");}
#footer-nav ul li.whatsapp .item::before {background-image: url("../img/icon-whatsapp-grey.png");}
#footer-nav ul li.linkedin .item::before {background-image: url("../img/icon-linkedin-grey.png");}
#footer-nav ul li.facebook .item::before {background-image: url("../img/icon-facebook-grey.png");}
#footer-nav ul li.instagram .item::before {background-image: url("../img/icon-instagram-grey.png");}
#footer-nav .contact {width: 55%; padding-left: 50px;}
#footer-nav .social {width: 45%;}
#footer-logo .logo {opacity: 0.3; width: 150px; margin: 0 auto;}
#footer-logo .blurb {font-size: 0.9rem; font-weight: 400; color: #999; text-align: justify; padding: 20px 0 0 0;}
#footer-copyright {font-size: 0.9rem; width: 100%; text-align: center; padding: 1rem 0; color: #777;}