/*
Theme Name:Fajas Consulting 2
Version:1.0
License:GNU General Public License v2 or later
License URI:http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:fajas
*/

/* GENERAL
****************************************************************************************************/
@font-face {
  font-family: "Campton";
  font-weight: 300;
  src: url(fonts/campton-light.woff) format("woff");
}
@font-face {
  font-family: "Campton";
  font-weight: 400;
  src: url(fonts/campton-book.woff) format("woff");
}
@font-face {
  font-family: "Campton";
  font-weight: 600;
  src: url(fonts/campton-bold.woff) format("woff");
}
@font-face {
  font-family: "icomoon";
  src: url(fonts/icomoon.woff) format("woff"),
    url(fonts/icomoon.ttf) format("truetype");
}
[class*="icon-"] {
  font-family: "icomoon";
  font-style: normal;
}
.icon-padlook:before {
  content: "\e907";
}
.icon-envelope:before {
  content: "\f003";
}
.icon-twitter:before {
  content: "\f099";
}
.icon-facebook:before {
  content: "\f09a";
}
.icon-linkedin:before {
  content: "\f0e1";
}
.icon-pinterest:before {
  content: "\f231";
}
.icon-balance:before {
  content: "\e900";
}
.icon-check:before {
  content: "\e901";
}
.icon-graph:before {
  content: "\e902";
}
.icon-handshake:before {
  content: "\e903";
}
.icon-next:before {
  content: "\e904";
}
.icon-portfolio:before {
  content: "\e905";
}
.icon-prev:before {
  content: "\e906";
}
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {
  font-family: "Campton", sans-serif;
  color: #666;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 600;
}
a,
a:hover,
a:focus {
  color: inherit;
  text-decoration: none;
}
a,
btn {
  transition: color 0.3s, background-color 0.3s, border-color 0.3s;
}
.btn {
  cursor: pointer;
  padding: 0.6rem 2rem;
  border-radius: 0;
  border: 1px solid #b8816f;
}
.btn-primary {
  background: #b8816f;
  color: #fff;
}
.btn-primary:hover,
.btn-primary:focus {
  background: #333;
  border-color: #333;
}
.btn-secondary {
  color: #333;
  background: transparent;
}
.btn-secondary:hover,
.btn-secondary:focus {
  background: #b8816f;
  border-color: #b8816f;
  color: #fff;
}
img {
  max-width: 100%;
  height: auto;
}
.section {
  padding: 75px 0;
}
.banner {
  min-height: 500px;
  background: #eee center;
  background-size: cover;
  text-align: center;
  display: flex;
  align-items: center;
  padding: 60px 0;
}
.banner h3 {
  font-size: 45px;
  text-align: center;
  color: #333;
  margin: 0;
  font-weight: 800;
}
.check-list ul {
  list-style: none;
  padding: 0;
  margin: 30px 0;
}
.check-list ul li {
  position: relative;
  margin-bottom: 15px;
  padding-left: 60px;
}
.check-list ul li::before {
  content: "\e901";
  font-family: "icomoon";
  position: absolute;
  left: 25px;
  color: #b8816f;
}
.screen-reader-response {
  display: none;
}
.wpcf7-response-output {
  clear: both;
  margin-bottom: 30px;
}
.wpcf7-not-valid-tip {
  color: red;
  font-size: small;
}
.wpcf7 a {
  text-decoration: underline;
}
.form-control {
  padding: 1rem;
  border-radius: 0;
}
select.form-control:not([size]):not([multiple]) {
  height: 54px;
}
.fb-comments,
.fb_iframe_widget span,
.fb_iframe_widget iframe {
  width: 100% !important;
}
.swiper-container-horizontal > .swiper-pagination-bullets {
  bottom: 20px;
}
.swiper-pagination-bullet {
  background: #b8816f;
  opacity: 1;
  width: 10px;
  height: 10px;
}
.swiper-pagination-bullet-active {
  background: #fff;
}
.infoBox {
  color: #fff;
  background: #b8816f;
  padding: 15px;
  width: 180px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 4px;
  position: relative;
}
.infoBox::before {
  content: "";
  position: absolute;
  border-bottom: 30px solid #b8816f;
  border-left: 50px solid transparent;
  left: -50px;
  top: 30px;
}
@media (min-width: 576px) {
  .banner {
    height: 500px;
  }
}

/* HEADER & FOOTER
****************************************************************************************************/
#wrapper {
  overflow: hidden;
}
#site {
  transition: 0.3s;
  min-height: 100vh;
  position: relative;
}
#header {
  min-height: 345px;
  background: #333 url(img/bg.jpg) center top;
  padding: 30px 0;
  text-align: center;
}
#header .container {
  position: static;
}
#header .nav {
  justify-content: space-between;
  margin-bottom: 15px;
}
#header .menu {
  list-style: none;
  margin: 15px 0 0;
  padding: 0;
  color: #fff;
}
#header .menu a {
  display: block;
}
#header .menu a:hover {
  color: #b8816f;
}
#header .menu i {
  display: block;
  width: 26px;
  height: 26px;
  background: #b8816f;
  color: #fff;
  line-height: 26px;
  text-align: center;
  border-radius: 50%;
  transition: 0.3s;
}
#header .menu i.icon-linkedin {
  text-indent: 2px;
}
#header .menu li.icon {
  margin-right: 15px;
  display: inline-block;
}
#header .menu li.icon a:hover i {
  background: #fff;
  color: #b8816f;
}
#header .menu li.btn {
  padding: 0;
  color: #fff;
}
#header .menu li.btn a {
  padding: 0.6rem 2rem;
  margin: 0;
}
#header .menu li.btn a:hover {
  color: #fff;
}
#header .page-title {
  color: #b8816f;
  font-size: 38px;
  font-weight: 600;
  margin-bottom: 15px;
}
#header .page-subtitle {
  color: #b8816f;
  font-size: 26px;
  font-weight: 300;
  margin: 0;
  text-transform: uppercase;
}
#header button {
  background: none;
  border: 0;
  outline: none;
  width: 24px;
  padding: 13px 0;
  cursor: pointer;
  position: relative;
}
#header button span {
  height: 3px;
  background: #fff;
  position: relative;
  display: block;
  transition: background 0.3s 0.3s;
}
#header button span::before,
#header button span::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: #fff;
}
#header button span::before {
  top: -8px;
  transition: top 0.3s 0.3s, transform 0.3s 0s;
}
#header button span::after {
  bottom: -8px;
  transition: bottom 0.3s 0.3s, transform 0.3s 0s;
}
.open-menu #header button::before {
  visibility: visible;
  pointer-events: inherit;
  background: rgba(0, 0, 0, 0.5);
}
.open-menu #header button span {
  background: transparent !important;
  transition: background 0.3s 0s;
}
.open-menu #header button span::before {
  top: 0;
  transition: top 0.3s 0s, transform 0.3s 0.3s;
  transform: rotate(45deg);
}
.open-menu #header button span::after {
  bottom: 0;
  transition: bottom 0.3s 0s, transform 0.3s 0.3s;
  transform: rotate(-45deg);
}
.error404 {
  background: url(img/bg2.jpg) center;
  background-size: cover;
}
.error404 #header {
  background: transparent;
  min-height: 0;
}
#error404 {
  text-align: center;
}
#error404 h1 {
  text-align: center;
  color: #fff;
  font-size: 90px;
}
#error404 h1 span {
  color: #b8816f;
  display: block;
}
#footer {
  background: #333;
  color: #fff;
  text-align: center;
  padding: 30px 0;
  color: #ccc;
}
#footer .menu {
  display: inline;
  list-style: none;
  padding: 0;
  margin: 0;
}
#footer .menu li {
  display: inline;
}
#footer .menu li:before {
  content: " | ";
}
#footer .menu a:hover {
  color: #fff;
}
#cookies {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(33, 33, 33, 0.95);
  color: #fff;
  z-index: 3;
  padding: 30px 0 15px;
}
@media (max-width: 991px) {
  #wrapper {
    background: #222;
  }
  #site {
    background: #fff;
  }
  .open-menu #site {
    transform: translate3d(-260px, 0, 0);
  }
  #header .menu {
    position: absolute;
    width: 260px;
    right: -260px;
    top: 0;
    padding: 30px;
    text-align: left;
  }
  #header .menu a {
    margin-bottom: 20px;
  }
}
@media (max-width: 1199px) {
  #header .logo {
    max-width: 240px;
  }
}
@media (min-width: 778px) {
  #cookies .container {
    display: flex;
    align-items: center;
  }
  #cookies .btn {
    margin-left: 30px;
  }
}
@media (min-width: 992px) {
  #site {
    display: flex;
    flex-direction: column;
  }
  #site .main {
    flex: 1 1 0px;
  }
  #header .menu > li {
    display: inline-block;
    margin-right: 25px;
    position: relative;
  }
  #header .menu > li.current-menu-item::before,
  #header .menu > li.current-menu-parent::before {
    position: absolute;
    content: "•";
    bottom: -22px;
    left: 0;
    right: 0;
    text-align: center;
    color: #b8816f;
    font-size: 24px;
  }
  #header .menu li.btn::before {
    display: none;
  }
  #header .sub-menu {
    position: absolute;
    padding: 15px 0 0;
    margin: 0 0 0 -100px;
    width: 200px;
    left: 50%;
    z-index: 2;
    transition: 0.3s;
    opacity: 0;
    visibility: hidden;
    list-style: none;
  }
  #header .menu li:hover .sub-menu {
    opacity: 1;
    visibility: visible;
  }
  #header .sub-menu::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    border-bottom: 15px solid #222;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    margin-left: -10px;
  }
  #header .sub-menu ul {
    display: none;
  }
  #header .sub-menu a {
    padding: 5px 15px;
    background: #222;
  }
  #header .menu li.btn {
    margin: 0 0 0 10px;
  }
}
@media (min-width: 1200px) {
  #header .menu > li {
    margin-right: 20px;
  }
  #header .menu li.btn {
    margin: 0 0 0 0;
  }
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  #site {
    display: inherit;
  }
}

/* HOME
****************************************************************************************************/
.home #header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2;
  background: none;
  min-height: 0;
  padding-bottom: 0;
}
#home #slider .swiper-slide {
  height: 700px;
  background: #333 center;
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 60px 0 0;
  text-align: center;
}
#home #slider .swiper-slide h1 {
  max-width: 580px;
  margin: 0 auto 30px;
  color: #fff;
  font-size: 45px;
}
#home #slider .swiper-slide h2 {
  max-width: 580px;
  margin: 0 auto 0;
  line-height: 1.5;
  color: #b8816f;
  font-size: 26px;
  text-transform: uppercase;
  font-weight: 400;
}
#home .services {
  text-align: center;
  padding-bottom: 45px;
}
#home .services .col-md-4 {
  margin-bottom: 30px;
}
#home .services i {
  color: #333;
  background: #b8816f;
  display: inline-block;
  font-size: 7rem;
  padding: 7px;
  line-height: 1;
  border-radius: 50%;
}
#home .services h3 {
  font-weight: 300;
  color: #333;
  margin: 15px 0;
  font-size: 24px;
  letter-spacing: -2px;
}
#home .services p {
  line-height: normal;
  margin-bottom: 7px;
}
#home .services a {
  font-weight: 600;
  color: #b8816f;
}
#home .blog {
  background: #e1dad8;
  text-align: center;
}
#home .blog h2 {
  font-size: 50px;
  color: #333;
  font-weight: 300;
  margin-bottom: 15px;
}
#home .blog .buttons {
  margin-bottom: 15px;
}
#home .blog .buttons a {
  display: inline-block;
  font-size: 32px;
  color: #b8816f;
  margin: 0 5px;
  cursor: pointer;
}
#home .blog .buttons a:hover {
  color: #333;
}
#home .blog .post {
  display: block;
  position: relative;
  background: #333;
}
#home .blog .post .image {
  padding-bottom: 50%;
  background: center;
  background-size: cover;
  transition: 0.3s;
}
#home .blog .post:hover .image {
  opacity: 0.8;
}
#home .blog .post h3 {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  font-size: 18px;
  margin: 0;
  padding: 15px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  text-align: left;
}
@media (min-width: 1200px) {
  #home .services .col-md-4 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 20%;
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
  }
}

/* ABOUT
****************************************************************************************************/
#about .banner {
  background-image: url(img/banner-about.jpg);
}

/* TEAM
****************************************************************************************************/
#team {
  text-align: center;
}
#team .section {
  padding-bottom: 30px;
}
#team img {
  border-radius: 50%;
  margin-bottom: 15px;
}
#team h3 {
  font-size: 20px;
  color: #4d4d4d;
}
#team p {
  margin-bottom: 7.5px;
}
#team a {
  font-weight: 600;
  color: #b8816f;
}
#team .row > div {
  margin:0 auto;
  margin-bottom: 60px;
}
@media (min-width: 992px) {
  #team .row {
    margin-left: -30px;
    margin-right: -30px;
  }
  #team .row > div {
    padding-left: 30px;
    padding-right: 30px;
  }
}

/* SERVICE 1
****************************************************************************************************/
#service1 .section {
  padding-bottom: 60px;
}
#service1 .image {
  background: #eee center;
  background-size: cover;
  margin: 0 0 30px;
  padding-bottom: 50%;
}
#service1 .image1 {
  background-image: url(img/service1.jpg);
}
#service1 .image2 {
  background-image: url(img/service2.jpg);
}
#service1 .title {
  font-size: 38px;
  color: #b8816f;
}
@media (min-width: 992px) {
  #service1 .image {
    width: 960px;
    width: calc(100vw / 2);
    height: 415px;
    padding: 0;
  }
  #service1 .image1 {
    float: left;
  }
  #service1 .image2 {
    float: right;
  }
}

/* SERVICE 2
****************************************************************************************************/
#service2 .banner {
  background-image: url(img/banner-service2.jpg);
}
#service2 .section {
  padding-bottom: 60px;
}
@media (min-width: 992px) {
  #service2 .section ul {
    column-count: 2;
    column-gap: 90px;
  }
}

/* SERVICE 3
****************************************************************************************************/
#service3 .section {
  padding-bottom: 60px;
}
#service3 .image {
  background: #eee url(img/service3.jpg) center;
  background-size: cover;
  margin: 30px 0;
  padding-bottom: 50%;
}
@media (min-width: 992px) {
  #service3 .image {
    width: 960px;
    width: calc(100vw / 2);
    height: 415px;
    padding: 0;
  }
}

/* SERVICE 4
****************************************************************************************************/
#service4 .banner {
  background-image: url(img/banner-service4.jpg);
}
#service4 .section {
  padding-bottom: 60px;
}

/* SERVICE 5
****************************************************************************************************/
#service5 .banner {
  background-image: url(img/banner-service5.jpg);
}
#service5 .section {
  padding-bottom: 60px;
}

/* CONTACT
****************************************************************************************************/
#contact #map {
  display: grid;
  gap: 60px;
  margin-top: 60px;
}
#contact #map iframe {
  width: 100%;
  border: 0;
  background: #eee;
  border-radius: 1rem;
  aspect-ratio: 3 / 2;
}
#contact .text {
  font-size: 20px;
  font-weight: 300;
}
#contact .text a {
  color: #b8816f;
}
#contact .text strong {
  font-weight: 600;
}
@media (min-width: 992px) {
  #contact #map {
    grid-template-columns: 1fr 1fr;
  }
  #contact .row {
    margin-left: -30px;
    margin-right: -30px;
  }
  #contact .row > div {
    padding-left: 30px;
    padding-right: 30px;
  }
}

/* BLOG
****************************************************************************************************/
#blog .post {
  border-bottom: 1px solid #eee;
  margin-bottom: 30px;
  padding-bottom: 30px;
  text-align: center;
}
#blog .post h2 {
  font-size: 21px;
  color: #333;
  margin: 15px 0;
}
#blog .post h2 a:hover {
  color: #b8816f;
}
#blog .pagination {
  text-align: center;
  display: block;
}
#blog .pagination .btn {
  margin: 0 7px;
}
#blog .blog-title {
  font-size: 28px;
  color: #333;
  margin-bottom: 30px;
}
#blog .article .wp-post-image {
  margin-bottom: 30px;
}
#blog .share {
  text-align: center;
}
#blog .share a {
  display: inline-block;
  background: #ccc;
  color: #333;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  line-height: 28px;
  margin: 0 2px;
}
#blog .date {
  background: #ccc;
  color: #333;
  display: inline-block;
  padding: 0 5px;
}
#blog .more-posts h4 {
  color: #333;
  text-align: center;
  text-transform: uppercase;
  margin: 30px 0;
  font-size: 18px;
}
#blog .more-posts h3 {
  font-size: 18px;
  color: #333;
}
#blog .more-posts img {
  margin-bottom: 15px;
}

#button-whatsapp {
  position: fixed;
  right: 2rem;
  bottom: 2rem;
  z-index: 10;
  width: 4rem;
  height: 4rem;
  border-radius: 100%;
  background: #39d466;
  color: #fff;
  padding: 0.75rem;
}