/* ------------------------------------------------------------------------------

  Template Name: Go.arch 
  Description: Go.arch  - Architecture HTML Template
  Author: Murren
  Author URI: http://themeforest.net/user/murren20
  Version: 1.0
  
  1.  Global

      1.1 General
      1.2 Typography
      1.3 Fields
      1.4 Buttons
      1.5 Icons
      1.6 Loader
      1.7 Content styles

  2.  Header 

      2.1 Brand
      2.2 Vertical Panel
      2.3 Navbar Desctop
      2.4 Navbar Desctop Affix
      2.5 Navbar Mobile
      2.6 Navbar Mobile Affix
      

  3.  Main

      3.1 Slider

  4.  About

      4.1 Services
      4.1 Object map

  5.  Projects

      5.1 Project Carousel
      5.2 Magnific popup
      5.3 Project Details

  6.  Experience
  7.  Clients
  8   Blog

      8.1 Blog Details
      8.2 Widgets
      8.3 Widget Recent Post

  9.  Contacts  
  10. Footer
  11. Responsive styles

      11.1 Min width: 768px
      11.2 Min width 992px
      11.3 Min width 1200px 
      11.4 Max height 480px

    
    
/*-------------------------------------------------------------------------------
  1. Global
-------------------------------------------------------------------------------*/



/* 1.1 General */



@import url('bootstrap.min.css');
@import url('font-awesome.min.css');
@import url('animate.css');
@import url('hover.css');
@import url('magnific-popup.css');
@import url('owl.carousel.css');
@import url('owl.transitions.css');
@import url('settings.css');
@import url('layers.css');
@import url('navigation.css');


html{
  font-size: 75%;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
}
/* idioma */
.language-switcher {
  display: inline-block;
  margin-left: 20px;
}

.btn-language {
  padding: 5px 10px;
  margin: 0 5px;
  border: none;
  background-color: #fff;
  color: #000;
  cursor: pointer;
  font-size: 14px;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.btn-language:hover {
  background-color: rgb(255, 144, 76);
  color: #fff;
}

/*  */
body{
  font-family: 'Oswald', sans-serif !important;
  font-size: 1em;
  line-height: 1.65;
  color: rgba(255,255,255,0.5);
  background-color: #2b2b2b;
}

::-webkit-scrollbar{
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-thumb {
  cursor: pointer;
  background: #c5a47e;
}

::selection{
  background-color:#c5a47e;
  color:#fff;
}

-webkit-::selection{
    background-color:#c5a47e;
    color:#fff;
}

::-moz-selection{
    background-color:#c5a47e;
    color:#fff;
}



/* 1.2 Typography */



@font-face {
  font-family: 'Oswald', sans-serif !important;
  src: url('../fonts/montserrat/Montserrat-Light.ttf');
  font-weight: normal;
  font-style: normal;

}

@font-face {
  font-family: 'montserratsemibold';
  src: url('../fonts/montserrat/Montserrat-SemiBold.ttf');
  font-weight: normal;
  font-style: normal;

}

h1,
.h1{ 
  font-family: 'Oswald', sans-serif !important;
  font-weight: 400;
  font-size: 8vmin;
  line-height: 1.2;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #fff;
}

h2,
.h2{ 
  font-family: 'Oswald', sans-serif;
  font-weight: 400;
  font-size: 2.1875em;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #fff;
}

h3,
.h3{
  font-family: 'montserratsemibold';
  font-size: 1.875em;
  line-height: 1.1;
  font-weight: normal;
  color:#fff;
}

h4,
.h4{
  font-family: 'montserratsemibold';
  font-size: 1.125em;
  line-height: 1.35;
  font-weight: normal;
  color:#fff;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

h1 a,
.h1 a,
h2 a,
.h2 a,
h3 a,
.h3 a,
h4 a,
.h4 a{
  color:inherit;
}

h1 a:hover,
.h1 a:hover,
h2 a:hover,
.h2 a:hover,
h3 a:hover,
.h3 a:hover,
h4 a:hover,
.h4 a:hover{
  text-decoration: none;
}

p{
  margin-bottom: 1.6em;
}

b, strong{
  font-family: 'Montserrat', sans-serif;
}

ul{
  list-style: none;
  padding-left: 0;
}

a {
  color:#c5a47e;
  -webkit-transition: color .3s ease-out;
       -o-transition: color .3s ease-out;
          transition: color .3s ease-out;
}

a:hover,
a:focus {
  color:#c5a47e;
  outline: none;
}

a:focus{
  text-decoration: none;
}



/* 1.3 Fields */



.form-control,
textarea.form-control{
  font-size: 1em;
  height: 3.625em;
  border-radius: 0.75em;
  padding-left: 22px;
  color: #fff;
  background-color: #323232;
  border:1px solid #323232;
  -webkit-box-shadow:none;
          box-shadow:none;
      -webkit-appearance: none;
  -webkit-transition: all .15s;
       -o-transition: all .15s;
          transition: all .15s;
}

textarea.form-control{
  height: 7.9em;
  padding-top:1.1em;
  resize:none;
}

.form-control:focus{
  border-color:#c5a47e;
  outline: 0;
  -webkit-box-shadow:none;
          box-shadow:none;
}

.form-control::-moz-placeholder {
  color: #fff;
  opacity: 1;
}

.form-control:-ms-input-placeholder {
  color: #fff;
}

.form-control::-webkit-input-placeholder {
  color: #fff;
}

.form-control.error{
  border-color:#c5a47e;
}

.form-group{
  margin-bottom: 10px;
}

.wobble-error{
  -webkit-animation: hvr-wobble-horizontal 1s ease-in-out 0s 1 normal;
           animation: hvr-wobble-horizontal 1s ease-in-out 0s 1 normal;
}

label.error{
  display: none!important;
}



/* 1.4 Buttons */



.btn{
  font-family: 'montserratsemibold';
  position: relative;
  display: inline-block;
  border:0.2em solid #c5a47e;
  border-radius: 30px;
  padding:1.1em 2.2em 1.05em;
  font-size: 0.875em;
  color:#fff;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  background-color:rgb(255, 144, 76);
  border:0;
  -webkit-transition: all .3s ease-out!important;
          transition: all .3s ease-out!important;
}

.btn:hover,
.btn:focus{
  color: #fff;
  background-color: #323232;
  -webkit-box-shadow:none;
  box-shadow: none;
  outline: none!important;
}

.btn .icon-next{
  position: relative;
  top:-0.1em;
  margin-left: 0.6em;
  vertical-align: middle;
}

.btn-gray{
  background-color: #323232;
  border-color: #323232;
}

.btn-gray:hover{

  background-color: #c5a47e;
}

.btn-shadow-1{
  box-shadow:0 15px 34px rgba(0,0,0,0.18);
}

.btn-shadow-2{
  box-shadow:0 15px 34px rgba(0,0,0,0.18);
}



/* 1.5 Icons */



.icon-next{
  display: inline-block;
  width:0.94em;
  height: 0.75em;
  background:url(../img/img-icon/next.png) 0 0 no-repeat;
  background-size:0.94em 0.75em;
}



/* 1.6 Loader */



.loader{
  position: fixed;
  overflow: hidden;
  z-index: 100;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background:#272727;
  color:#fff;
  text-align: center;
}

.loader-brand{
  position: absolute;
  left:0;
  width: 100%;
  top:50%;
  -webkit-transform: translate(0, -50%);
      -ms-transform: translate(0, -50%);
       -o-transform: translate(0, -50%);
          transform: translate(0, -50%);
}

.sk-folding-cube {
  margin: 20px auto;
  width: 40px;
  height: 40px;
  position: relative;
  -webkit-transform: rotateZ(45deg);
          transform: rotateZ(45deg);
}

.sk-folding-cube .sk-cube {
  float: left;
  width: 50%;
  height: 50%;
  position: relative;
  -webkit-transform: scale(1.1);
      -ms-transform: scale(1.1);
          transform: scale(1.1); 
}

.sk-folding-cube .sk-cube:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #c5a47e;
  -webkit-animation: sk-foldCubeAngle 2.4s infinite linear both;
          animation: sk-foldCubeAngle 2.4s infinite linear both;
  -webkit-transform-origin: 100% 100%;
      -ms-transform-origin: 100% 100%;
          transform-origin: 100% 100%;
}

.sk-folding-cube .sk-cube2 {
  -webkit-transform: scale(1.1) rotateZ(90deg);
          transform: scale(1.1) rotateZ(90deg);
}

.sk-folding-cube .sk-cube3 {
  -webkit-transform: scale(1.1) rotateZ(180deg);
          transform: scale(1.1) rotateZ(180deg);
}

.sk-folding-cube .sk-cube4 {
  -webkit-transform: scale(1.1) rotateZ(270deg);
          transform: scale(1.1) rotateZ(270deg);
}

.sk-folding-cube .sk-cube2:before {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}

.sk-folding-cube .sk-cube3:before {
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s; 
}

.sk-folding-cube .sk-cube4:before {
  -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
}

@-webkit-keyframes sk-foldCubeAngle {
  0%, 10% {
    -webkit-transform: perspective(140px) rotateX(-180deg);
            transform: perspective(140px) rotateX(-180deg);
    opacity: 0; 
  } 25%, 75% {
    -webkit-transform: perspective(140px) rotateX(0deg);
            transform: perspective(140px) rotateX(0deg);
    opacity: 1; 
  } 90%, 100% {
    -webkit-transform: perspective(140px) rotateY(180deg);
            transform: perspective(140px) rotateY(180deg);
    opacity: 0; 
  } 
}

@keyframes sk-foldCubeAngle {
  0%, 10% {
    -webkit-transform: perspective(140px) rotateX(-180deg);
            transform: perspective(140px) rotateX(-180deg);
    opacity: 0; 
  } 25%, 75% {
    -webkit-transform: perspective(140px) rotateX(0deg);
            transform: perspective(140px) rotateX(0deg);
    opacity: 1; 
  } 90%, 100% {
    -webkit-transform: perspective(140px) rotateY(180deg);
            transform: perspective(140px) rotateY(180deg);
    opacity: 0; 
  }
}



/* 1.7 Content styles */



.layout{
  position: relative;
  overflow: hidden;

}

.text-primary{
  color:rgb(255, 144, 76);
}

.page-lines{
  position: absolute;
  z-index: -1;
  left: 0;
  top:0;
  width: 100%;
  height: 100%;
}

.page-lines .col-line{
  padding: 0;
}

.page-lines .line{
  position: absolute;
  left: 0;
  width: 1px;
  height: 3550px;
  background-color:rgba(255,255,255,0.08);
}

.page-lines .col-line:last-child .line:last-child{
  left: auto;
  right: 0;
}

.row-base{
  margin-top: -3em;
}

.col-base{
  margin-top: 3em;
  padding: 0 2em;
}

.section{
  position: relative;
  margin-top: 7.1em;
  margin-bottom: 7.1em;
}

.section-header{
  margin-bottom: 1px; /* Reduce la separación del header */
  
}

.section-title{
  text-align: center;
  margin:0;
  margin-left: 0.32em;
}

.fade-title-left,
.fade-title-right{
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 10.8em;
  line-height: 1;
  color: #fff;
  position: absolute;
  left: 0;
  top:0.03em;
  opacity: 0.03;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.fade-title-right{
  left:100%;
}

.section-content{
  margin-top: 2.1em;
}



/*-------------------------------------------------------------------------------
  2. Header
-------------------------------------------------------------------------------*/



.header-inner .vertical-panel-content{
  bottom:auto;
  top:12.2vmin;
}



/* 2.1 Brand */



.brand-panel{
  position: absolute;
  z-index: 4;
  left: 0;
  top:0;
  width: 41.47vmin;
  height: 42.7vmin;
  padding: 4.8vmin 2em 4.8vmin;
  background-color: #2b2b2b;
  text-align: center;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

.brand{
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size:4vmin;
  line-height: 1;
  color: #fff;
}

.brand:hover,
.brand:focus{
  color: #fff;
  text-decoration: none;
}

.brand-name{
  position: absolute;
  z-index: -1;
  bottom: -0.4em;
  right:-0.38em;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 8.75em;
  line-height: 1;
  opacity: 0.04;
  color: #fff;
}

.slide-number{
  font-family: 'Oswald', sans-serif;
  margin-top: 8vmin;
}

.slide-number .current-number{
  font-size: 8vmin;
  letter-spacing: 0.1em;
  line-height: 1;
  position: relative; /* Habilita el uso de top */
  left: 120px; /* Mueve el número 10px hacia la derecha */
  top: 280px; /* Ajusta el valor según necesites */
}

.slide-number sup{
  display: inline-block;
  position: relative;
  
  top:290px;
  left: 120px; /* Mueve el número 10px hacia la derecha */
  font-size: 2vmin;
  letter-spacing: 0.1em;
  color:white;
  vertical-align: top;
  margin-left: 0.46em;
}

.slide-number sup .delimiter{
  display: inline-block;
  margin-right: 0.4em;
}

.header-phone{
  font-family: 'Oswald', sans-serif;
  font-weight: 300;
  font-size: 0.81em;
  letter-spacing: 0.32em;
  position: absolute;
  z-index: 3;
  color: #fff;
  left: 50vmin;
  top:5.9vmin;
}

@media (width<= 360px){
  .slide-number .current-number{
    font-size: 14vmin;
    left: 55px; /* Mueve el número 10px hacia la derecha */
    top: 400px; /* Ajusta el valor según necesites */
  }

  .arrow-left{
    left: 20px;
    top: 400px;
    display:block;
    height: 50px;
  }
  .arrow-right{
    left: 180px;
    top: 400px;
    display:block;
    height: 50px;
  }
  
  .slide-number sup{
    
    top:415px;
    left: 45px; /* Mueve el número 10px hacia la derecha */
  }
}

@media(width>=360px) and (width< 390px){
  .slide-number .current-number{
    font-size: 14vmin;
    left: 90px; /* Mueve el número 10px hacia la derecha */
    top: 400px; /* Ajusta el valor según necesites */
  }
  .arrow-left{
    left: 0px;
    top: 330px;
    display:block;
    height: 50px;
    z-index: 5;
  }
  .arrow-right{
    left: 160px;
    top: 330px;
    display:block;
    height: 50px;
  }
  
  .slide-number sup{
    font-size: 3vmin;
    top:415px;
    left: 80px; /* Mueve el número 10px hacia la derecha */
  }
}


@media(width>=390px) and (width< 410px){
  .slide-number .current-number{
    font-size: 14vmin;
    left: 90px; /* Mueve el número 10px hacia la derecha */
    top: 555px; /* Ajusta el valor según necesites */
  }
  .arrow-left{
    left: 20px;
    top: 500px;
    display:block;
    height: 50px;
    z-index: 5;
  }
  .arrow-right{
    left: 170px;
    top: 500px;
    display:block;
    height: 50px;
  }
  
  .slide-number sup{
    font-size: 3vmin;
    top:570px;
    left: 90px; /* Mueve el número 10px hacia la derecha */
  }
}

@media(width>=410px) and (width<= 480px){
  .slide-number .current-number{
    font-size: 14vmin;
    left: 95px; /* Mueve el número 10px hacia la derecha */
    top: 615px; /* Ajusta el valor según necesites */
  }
  .arrow-left{
    left: 20px;
    top: 560px;
    display:block;
    height: 50px;
  }
  .arrow-right{
    left: 180px;
    top: 560px;
    display:block;
    height: 50px;
  }
  
  .slide-number sup{
    font-size: 3vmin;
    top:635px;
    left: 95px; /* Mueve el número 10px hacia la derecha */
  }
}
 @media (widh<= 480px){
  .header-phone{
    display: none;
  }

  .slide-number {
    position: absolute;

  }
  .slide-number .current-number{
    font-size: 14vmin;
    left: 105px; /* Mueve el número 10px hacia la derecha */
    top: 620px; /* Ajusta el valor según necesites */
    background-color: red;
  }

  .arrow-left{
    left: 20px;
    top: 570px;
    display:block;
    height: 50px;
  }
  .arrow-right{
    left: 180px;
    top: 570px;
    display:block;
    height: 50px;
  }
  
  .slide-number sup{
    
    top:627px;
    left: 105px; /* Mueve el número 10px hacia la derecha */
  }
 }

 @media (min-width: 480px) and (max-width: 768px){
  .slide-number .current-number{
    font-size: 11vmin;
    left: 80px; /* Mueve el número 10px hacia la derecha */
    top: 350px; /* Ajusta el valor según necesites */
  }
  .arrow-left{
    left: 20px;
    top: 400px;
    display:block;
    height: 50px;
  }
  .arrow-right{
    left: 250px;
    top: 400px;
    display:block;
    height: 50px;
  }
  .slide-number sup{
    
    top:360px;
    left: 80px; /* Mueve el número 10px hacia la derecha */
  }
 }
  @media (min-width: 992px) and (max-width: 1200px){
  .header-phone{
    display: none;
  }
 }



/* 2.2 Vertical Panel */



.vertical-panel,
.vertical-panel-content{
  position: absolute;
  width: 19.735vmin;
  left: 0;
  bottom: 0;
  text-align: center;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

.vertical-panel{
  z-index: 3;
  height: 10000px;
  background-color: #2b2b2b;
}

.vertical-panel-content{
  z-index: 4;
}

.vertical-panel-info{
  margin-bottom: 3.5vmin;
}

.vertical-panel-info .line{
  height: 5vmin;
  width: 1px;
  margin:15px auto 0;
  background-color:#646464;
}

.vertical-panel-title{
  font-family: 'montserratsemibold';
  font-size: 10px;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 1em;
  color: #fff;
  position: relative;
  left: -6px;
  margin:0 auto;
  width: 1px;
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
   -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}

@media (max-height: 850px){
  .vertical-panel-title{
    display: none;
  }

  
}

.social-list{
  margin-bottom: 3.5vmin;
}

.social-list li{
  margin-top: 3.8vmin;
}

.social-list .fa{
  font-size: 2.4vmin;
  color: #606060;
}

.social-list .fa:hover{
  color:#c5a47e;
  text-decoration: none;
}



/* 2.3 Navbar Desctop */



.navbar-desctop{
  display: block; /* Asegúrate de que sea visible */
  position: absolute;
  z-index: 2;
  top:0;
  left:0;
  width: 100%;
  padding:5.9vmin 0 0;
  background-color: rgba(0, 0, 0, 0.5); /* Fondo negro semi-transparente */
  
}

.navbar-desctop .brand{
  display: block;
  float:left;
  position: relative;
  top:-0.22em;
  font-size: 1.6em;
}

.navbar-desctop-menu{
  float: right;
  font-family: 'Oswald', sans-serif;
  font-weight: 300;
  font-size: 0.81em;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  margin-bottom: 0;
}

.navbar-desctop-menu li{
  position: relative;
  -webkit-perspective: 2000px;
  perspective: 2000px;
}

.navbar-desctop-menu li a {
  display: block;
  text-decoration: none;
  color: #fff;
}

.navbar-desctop-menu li a:hover,
.navbar-desctop-menu .active > a{
  color:  rgb(255, 144, 76);
}

.navbar-desctop-menu  > li{
  float: left;
  margin-left: 5.1em;
}

.navbar-desctop-menu > li > a{
  color: #fff;
  background-color: transparent;
  margin-bottom: 1.5em;
  
  

}

.navbar-desctop-menu li ul{
  position: absolute;
  z-index: 10;
  left: 100%;
  top:60%;
  visibility: hidden;
  min-width: 200px;
  opacity: 0;
  box-shadow: 0 15px 35px rgba(0,0,0,0.1);
  background:rgba(50, 50, 50, 0.95);
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  transition: all .3s ease-out;
}

.navbar-desctop-menu > li > ul{
  left: -20px;
  margin-top: 0;
}

.navbar-desctop-menu li:hover > ul{
  top:0;
  visibility: visible;
  opacity: 1;
}

.navbar-desctop-menu > li:hover > ul{
  top:100%;
}

.navbar-desctop-menu li li{
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.navbar-desctop-menu li li:last-child{
  border-bottom: 0;
}

.navbar-desctop-menu li li a{
  color: #fff;
  padding: 12px 20px 10px;
}



/* 2.4 Navbar Desctop Affix */



.navbar-desctop.affix{
  position: fixed;
  z-index: 5;
  top:0;
  background-color:rgba(50, 50, 50, 0.95);
  padding:1.3em 0 0;
  box-shadow: 0 0 35px rgba(0,0,0,0.1);
}

.navbar-desctop.affix.affix-top{
  padding-top:2.2em;
}

.navbar-desctop.affix .brand{
  display: inline-block;
}

.navbar-desctop.affix .navbar-desctop-menu li a{
  color: #fff;
}

.navbar-desctop.affix .navbar-desctop-menu li > a:hover,
.navbar-desctop.affix .navbar-desctop-menu .active > a{
  color:rgb(255, 144, 76);
}



/* 2.5 Navbar Mobile */



.navbar-mobile{
  position: absolute;
  z-index: 2;
  left: 0;
  top:0;
  width: 100%;
  padding:6vmin 0;
}

.navbar-mobile .brand{
  display: none;
  margin-left: 15px;
  font-size: 1.6em;
}

.navbar-collapse{
  border:0;
  background-color: rgba(50, 50, 50, 0.95);
  -webkit-box-shadow:none;
  box-shadow:none;
}

@media (max-height: 320px ){
  .navbar-collapse{
    max-height: 240px;
  }
}

.navbar-toggle{
  padding: 0;
  margin-top:0;
  margin-bottom: 0;
  border-radius: 0;
  border:0;
}

.navbar-toggle .icon-bar{
  background-color:#fff;
  height: 2px;
  width: 30px; 
}

.navbar-toggle .icon-bar + .icon-bar{
  margin-top:5px;
}

.navbar-toggle.collapsed .icon-bar{
  background-color: #fff;
}

.navbar-nav-mobile{
  font-family: 'Oswald', sans-serif;
  font-weight: 300;
  font-size: 0.9em;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  padding-top: 1.2em;
  margin-bottom: 0;
}

.navbar-nav-mobile li{
  position: relative;
  border-top:1px solid rgba(255,255,255,0.1);
}

.navbar-nav-mobile li a{
  display: block;
  padding: 1em 1em;
  color: #fff;
  text-decoration: none;
}

.navbar-nav-mobile > .current > a{
  color: #c5a47e;
}

.navbar-nav-mobile li a .fa-angle-down{
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.navbar-nav-mobile > .current > a .fa-angle-down{
  top:-0.2em;
  left:-0.3em;
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

.navbar-nav-mobile > .active > a,
.navbar-nav-mobile > .active > a:hover{
  background-color: #c5a47e;
  color: #fff;
  -webkit-transition: none;
  -o-transition: none;
  transition: none;
}

.navbar-nav-mobile ul{
  display: none;
}

.navbar-nav-mobile li a:hover,
.navbar-nav-mobile li .active > a{
  color: #c5a47e;
}



/* 2.6 Navbar Mobile Affix */



.navbar-mobile.affix{
  position: fixed;
  z-index: 5;
  background-color:rgba(50, 50, 50, 0.95);
  box-shadow: 0 0 35px rgba(0,0,0,0.1);
  padding: 1.2em 0;
}

.navbar-mobile.affix .brand{
  display: inline-block;
}

.navbar-mobile.affix .navbar-toggle .icon-bar{
  background-color:#c5a47e;
}



/*-------------------------------------------------------------------------------
  3. Main
-------------------------------------------------------------------------------*/



.main{
  position: relative;
  overflow: hidden;
  min-height: 420px;
}

.main-inner{
  position: relative;
  z-index: 1;
  min-height: 0;
  padding: 33.7vmin 0 33.7vmin;
}


.main-inner .page-lines{
  z-index: 1;
}

.main-inner:after{
  content:'';
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  top:0;
  background: -webkit-linear-gradient(bottom,  rgba(39,39,39,1) 0%,rgba(39,39,39,0.95) 26%,rgba(39,39,39,0.6) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to top,  rgba(39,39,39,1) 0%,rgba(39,39,39,0.95) 26%,rgba(39,39,39,0.6) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

.main-projects,
.main-contacts{
  padding: 34.2vmin 0 34vmin;
}

.main-project{
  padding: 33.7vmin 0 11vmin;
  background-size: cover;
  background-position: center 0;
}

.main-header{
  position: relative;
  z-index: 2;
  color: #fff;
  text-align: right;
  padding-left: 38.5vmin;
}

.main-header h1{
  color: #fff;
  margin:0;
  margin-right: -0.32em;
}



/* 3.1 Slider */



.rev_slider {
  color: #0c0c0c; /* Color del texto */
  font-size: 24px; /* Tamaño de la letra */
  font-weight: bold; /* Grosor del texto */
  text-transform: uppercase; /* Convertir a mayúsculas */
  letter-spacing: 2px; /* Espaciado entre letras */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* Sombra del texto */
  font-family: 'Oswald', sans-serif; /* Cambia la fuente si lo necesitas */
}

.rev_slider .btn{
  -webkit-transition: background-color .3s ease-out!important;
          transition: background-color .3s ease-out!important;

}


.tp-caption{
  padding: 0 20px;
  text-align: right;
  
}
.rev_slider_wrapper {
  position: relative; /* Asegura que las flechas se posicionen dentro de este contenedor */
}
.arrow-left,
.arrow-right{
  position: absolute;
  z-index: 4;
  bottom: 4vh;
  cursor: pointer;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

.arrow-left{
  left: 20vmin;
 
}

.arrow-right{
  right: 50px;
}


.arrow-left:after,
.arrow-right:before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  background-color: transparent;
  font-family: 'Oswald', sans-serif;
  font-size: 1em;
  line-height: 1;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: black;
  font-weight: bold; 
  /* Para mover en el eje y */
  position: relative; /* Habilita top y bottom */
  top: 300px; /* Ajusta el valor según necesites */
}

.arrow-left:after{
  content:'Prev';
}

.arrow-right:before{
  content:'Next';
}

.arrow-left:before,
.arrow-right:after{
  content:'';
  display: inline-block;
  vertical-align: middle;
  width:1.3em;
  height: 1em;
  opacity: 0.25;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

.arrow-left:hover:before,
.arrow-right:hover:after{
  opacity: 1;
}

.arrow-left:before{
  background: url(../img/img-icon/prev.png) 0 0 no-repeat;
  background-size: 1.3em 1em;
  margin-right: 0.82em;
  position: relative; /* Para habilitar top */
  top: 300px; /* Mueve 10px hacia abajo */
}

.arrow-right:after{
  background: url(../img/img-icon/next.png) 0 0 no-repeat;
  background-size: 1.3em 1em;
  margin-left: 0.72em;
  position: relative; /* Para habilitar top */
  top: 300px; /* Mueve 10px hacia abajo */
}

.slide-title {
  display: inline-block; /* Permite ajustar el tamaño al contenido */
  background: rgba(255, 255, 255, 0.4); /* Fondo semitransparente */
  padding: 15px 30px; /* Espaciado interno */
  border-radius: 10px; /* Bordes redondeados */
  border: 2px solid rgba(255, 255, 255, 0.3); /* Borde sutil */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra */
 
  text-transform: uppercase; /* Convierte el texto en mayúsculas */
  font-weight: bold; /* Hace el texto más grueso */
  text-align: center; /* Centra el texto */
  color: #080808; /* Asegura que el texto sea visible */
}

.slide-subtitle{
  
  font-size: 18px;
  line-height: 1.7;
  background: rgba(0, 0, 0, 0.4);
  letter-spacing: 1px;
  padding: 20px 20px;
  color: #fff;
}

.tp-caption .slide-subtitle {
  position: absolute;
  bottom: 20px;  /* Ajusta la distancia desde la parte inferior */
  right: 20px;   /* Ajusta la distancia desde la parte derecha */
  font-size: 18px;
  line-height: 1.7;
  color: #fff;  /* Cambia el color del texto */
  text-align: right;
  font-family: 'Oswald', sans-serif;
  letter-spacing: 1px;
  text-transform: none;
  padding: 20px;  /* Agrega padding si es necesario */
  z-index: 10;  /* Asegura que se muestre por encima de otros elementos */
}
.tp-mask-wrap > .child {
 top: 100px;
}



/* ------------------------------------------------------------------------------- */
/*  4. About
/* ------------------------------------------------------------------------------- */



#about {
  position: relative;
  
  
  color: rgb(121, 21, 21);
  padding: 50px 0;
  margin-top: 10px;
  margin-bottom: 40px;

}

#services {
  margin-top: 10px;
  margin-bottom: 40px;
}

#about::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('../img/enviarfires.png') no-repeat center center;
  background-size: cover;
  opacity: 0.2;
  z-index: 1;
}
#about-title {
  margin-bottom: 1px; /* Reduce el espacio debajo del título */
 
}
/* Estilos generales del texto en About */
.about .col-about-info p {
  font-size: 19px; /* Tamaño del texto */
  line-height: 1.8; /* Mejora la legibilidad */
  color:white; /* Color del texto */
  
  text-align: justify; /* Justifica el texto */
}

/* Aplicar solo a la sección "About" */
.about .section-content {
  position: relative;
  z-index: 2; /* Mantiene el texto sobre el fondo */
  padding-top: 0px; /* Elimina espacio extra arriba */
  margin-top: -30px; /* Solo afecta a la sección "About" */
}


.section-content {
  position: relative;
  z-index: 2; /* Asegura que el texto esté por encima del fondo */
  padding-top: 0px; /* Elimina espacio extra en la parte superior */

}

/* Alineación y disposición de la sección Misión y Visión */
.col-mission-vision {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px; /* Espacio entre Misión y Visión */
  margin-top: -20px; /* Ajuste de margen superior */
}

/* Estilos para el recuadro con transparencia */
#mission-info,
#vision-info {
  
  padding: 20px; /* Espaciado interno */
 
 
   /* Sombra para darle relieve */
  
  width: 2000px; /* Ajuste de ancho para mayor responsividad */
  max-width: 1200px; /* Evita que se expanda demasiado */
  text-align: justify; /* Justifica el texto */
}

.col-about-title {
  font-size: 24px;
  font-weight: bold;
}

.col-about-info p {
  font-size: 16px;
  max-width: 1000px;
}

/* Ocultar la imagen ya que ahora está como fondo */
.col-about-img {
  display: none;
}


/* 4.1 Services */



.row-services{
  margin-left: -4.1em;
  margin-right: -4.1em;
}

.col-service{
  padding: 0 4.1em;
}

.service-item{
  margin-bottom:2em; 
}

.service-item:last-child{
  margin-bottom: 0;
}

.service-item h4{
  margin-top: 0.8em;
  margin-bottom: 1.1em;
}

.services .service-item h4{
  margin-top: 1.25em;
}

.service-item p:last-child{
  margin-bottom: 0;
}


/* 4.2 Object Map */



.objects{
  position: relative;
}

.object-label{
  position: absolute;
  width: 1em;
  height: 1em;
  background-color: #e5bf93;
  box-shadow:0  0  70px 8px rgba(197,164,126,0.75);
  border-radius: 50%;
  cursor: pointer;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

.object-label:hover{
  box-shadow:none;
}

.popover.top{
  margin-top: -20px;
}

.object-info{
  position: absolute;
  display: none;
  z-index: 1;
  left: 50%;
  bottom: 40px;
  width: 12.4em;
  margin-left: -6.2em;
  padding: 1.1em 1.3em 3em;
  border:0;
  background-color: rgba(0,0,0,0.3);
  border-radius: 4px;
  -webkit-box-shadow: none;
  box-shadow:none;
}

.object-info.in{
  display: block;
}

.object-info:before{
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -16px;
  width: 0;
  height: 0;
  border: 16px solid transparent;
  border-top: 14px solid rgba(0,0,0,0.3);
}

.object-title{
  font-size: 1em;
  font-family: 'montserratsemibold';
  font-weight: normal;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color:#c5a47e;
  padding: 0 0 1em;
  border-bottom:1px solid rgba(249,249,249,0.2);
  margin: 0 0 .5em;
}

.object-content{
  font-family: 'montserratlight', sans-serif;
  font-size: 0.75em;
  line-height: 2.6;
  color: #fff;
  padding: 0;
}

.popover.top>.arrow{
  border-top-color: transparent;
}

.popover.top>.arrow:after{
  border-top-color:rgba(0,0,0,0.6);
}




/* ------------------------------------------------------------------------------- */
/*  5. Projects
/* ------------------------------------------------------------------------------- */



.bg-projects{
  position: relative;
  background:url(../img/bg/projects.jpg) 50% 0 no-repeat;
  background-size: cover;
}

.project{
  padding: 0;
  overflow: hidden;
}


.projects-carousel {
  position: relative;
  height: 100%; /* Aseguramos que el contenedor ocupe todo el alto disponible */
}

.projects-carousel .project {
  position: relative;
  height: 100%; /* Asegura que cada proyecto ocupe todo el alto del contenedor */
  overflow: hidden; /* Ocultar lo que se recorte */
}

.projects-carousel .project img {
  width: 100%; /* Hacer que la imagen ocupe todo el ancho */
  height: 100%; /* Asegurarse de que la imagen cubra todo el alto */
  object-fit: cover; /* Hacer que la imagen cubra el contenedor sin perder calidad */
  object-position: center; /* Centra la imagen dentro del contenedor */
}

.project-zoom {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10; /* Asegura que el zoom se quede visible sobre la imagen */
}

.project figure{
  position: relative;
}

.owl-item{
  height: 100%;
}

.project figure img{
  display: block;
  width: 100%;
  -webkit-transition: all 8s linear;
  -o-transition: all 8s linear;
  transition: all 8s linear;
}

.project figure:after{
  content:'';
  position: absolute;
  left: 0;
  top:0;
  width: 100%;
  height: 100%;
  background-color: #111;
  opacity: 0.7;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

.project.project-light figure:after{
  opacity: 0.4;
}
    
.project figcaption{
  position: absolute;
  z-index: 1;
  left: 0;
  top:0;
  right:0;
  bottom:0;
  margin: 3.2em 3.6em;
}

.project-title{
  position: relative;
  top:0;
  left:0;
  margin:0;
  font-family: 'Oswald', sans-serif;
  font-weight: normal;
  font-size: 1.56em;
  line-height: 1.45;
  letter-spacing: 0.07em;
  color: #fff;
  text-transform: uppercase;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

.project-category{
  position: absolute;
  left: 0;
  bottom: 0;
  margin:0 0 -0.8em;
  font-family: 'Oswald', sans-serif;
  font-weight: normal;
  font-size: 14px;
  color: #fff;
  letter-spacing: 0.8em;
  -webkit-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

.project-zoom{
  position: absolute;
  left: 50%;
  top:50%;
  width: 9em;
  height: 9em;
  margin:-4.5em;
  border-radius: 50%;
  background-color: rgba(197,164,126,0.84);
  overflow: hidden;
  opacity: 0;
  -webkit-transform: scale(0.5);
  -ms-transform:scale(0.5);
  -o-transform:scale(0.5);
  transform:scale(0.5);
  -webkit-transition: all 0.7s;
  -o-transition: all 0.7s;
  transition: all 0.7s;
}

.project-zoom:after{
  content: '';
  position: absolute;
  left: 50%;
  top:50%;
  width: 2.625em;
  height:2.625em;
  background:url(../img/img-icon/zoom.png) 0 0 no-repeat;
  background-size: cover;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.project figure:hover:after{
  opacity: 0;
}

.project figure:hover img{
  -webkit-transform: scale(1.4);
  transform: scale(1.4);
}

.project figure:hover .project-title{
  top:30px;
  opacity: 0;
}

.project figure:hover .project-category{
  opacity: 0;
  letter-spacing: 2em;
}

.project figure:hover .project-zoom{
  opacity: 1;
  -webkit-transform: scale(1);
  -ms-transform:scale(1);
  -o-transform:scale(1);
  transform:scale(1);
}

/* Este es el estilo específico para el botón "View Project" */
#view-project-btn {
  display: block;
  margin: 20px auto;  /* Esto centra el botón horizontalmente */
  padding: 10px 20px;
  background-color: rgb(255, 144, 76);  /* Ajusta el color de fondo */
  color: #fff;  /* Color del texto */
  text-align: center;
  border-radius: 5px;
  text-decoration: none;
  font-size: 16px;
  transition: background-color 0.3s ease;  /* Añade transición suave al color de fondo */
}

/* Efecto hover para el botón */
#view-project-btn:hover {
  background-color: #272727;  /* Cambia el color del fondo al pasar el mouse */
}

/* Si quieres mover el botón en relación a su contenedor, usa position absolute */
.project figure {
  position: relative;  /* Asegura que el botón se posicione en relación a su contenedor */
}

#view-project-btn {
  position: absolute;
  bottom: 20px;  /* Ajusta la distancia desde el fondo del contenedor */
  left: 50%;  /* Centra el botón horizontalmente */
  transform: translateX(-50%);  /* Corrección para centrarlo exactamente */
}


/* 5.1 Carousel */



.owl-prev,
.owl-next{
  position: absolute;
  top:50%;
  font-family: 'Oswald', sans-serif;
  font-size:1em;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #fff;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  opacity: 0.7;
}

.owl-prev:hover,
.owl-next:hover{
  opacity: 1;
}

.owl-prev{
  left: 0.8em;
  padding-left: 35px;
  background:url(../img/img-icon/prev.png) left 50% no-repeat;
  background-size: 1.3em 1em;
  
}

.owl-next{
  left: auto;
  right: 0.8em;
  padding-right: 35px;
  background:url(../img/img-icon/next.png) right 50% no-repeat;
  background-size: 1.3em 1em;
}



/* 5.2 Magnific popup */



.mfp-figure{
  box-shadow: none;
}

.mfp-iframe-scaler{
  overflow: visible;
}

.mfp-image-holder .mfp-close, 
.mfp-iframe-holder .mfp-close{
  padding: 0;
  margin-top: -10px;
  font-family: inherit;
  font-size: 40px;
  font-weight: 300;
  line-height: 0;
}

img.mfp-img{
  min-height: 460px;
}


.mfp-title{
  padding-right: 40px;
  font-size:1.2em;
  line-height: 1.2;
  margin-top: 3px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding-bottom: 10px;
}

.mfp-counter{
  top:5px;
}

.mfp-bg{
  background-color: #141414;
}

.mfp-arrow-left:before, .mfp-arrow-left .mfp-b{
  display: none;
}

.mfp-arrow-right:before, .mfp-arrow-right .mfp-b{
  display: none;
}

.mfp-wrap .mfp-content {
  -webkit-perspective: 1300px;
          perspective: 1300px
}

.mfp-wrap .mfp-figure,
.mfp-wrap .mfp-iframe-scaler {
  opacity: 0;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform:scale(0) rotateY(60deg);
  -o-transform:scale(0) rotateY(60deg);
  transform:scale(0) rotateY(60deg);
}

.mfp-bg {
  opacity: 0;
  -webkit-transition: .5s;
       -o-transition: .5s;
          transition: .5s;
}

.mfp-wrap .mfp-figure,
.mfp-wrap .mfp-iframe-scaler {
  opacity: 0;
  -webkit-transition: .3s ease-in-out;
       -o-transition: .3s ease-in-out;
          transition: .3s ease-in-out;
  -webkit-transform: rotateY(-60deg);
      -ms-transform: rotateY(-60deg);
       -o-transform: rotateY(-60deg);
          transform: rotateY(-60deg);
}

.mfp-bg {
  opacity: 0;
  -webkit-transition: .5s;
       -o-transition: .5s;
          transition: .5s;
}

.mfp-wrap.mfp-ready .mfp-figure,
.mfp-wrap.mfp-ready .mfp-iframe-scaler {
  opacity: 1;
  -webkit-transform:rotateX(0);
      -ms-transform:rotateX(0);
       -o-transform:rotateX(0);
          transform:rotateX(0);
}

.mfp-ready.mfp-bg {
  opacity: 0.8;
}

.mfp-wrap.mfp-removing .mfp-figure ,
.mfp-wrap.mfp-removing .mfp-iframe-scaler {
  opacity: 0;
  -webkit-transform: rotateX(-60deg);
      -ms-transform: rotateX(-60deg);
       -o-transform: rotateX(-60deg);
          transform: rotateX(-60deg);
  
}

.mfp-zoom-out-cur, 
.mfp-zoom-out-cur 
.mfp-image-holder .mfp-close{
  cursor:url(../img/zoom-out.cur), zoom-out;
}

.mfp-removing.mfp-bg {
  opacity: 0;
}



/* 5.3 Project Details */



.project-title-info{
  font-family: 'Montserrat', sans-serif;
  font-weight: bold;
  font-size: 2vmin;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin-top: 2.2em;
  margin-left: -1.8em;
}

.project-title-info .project-info-item{
  display: inline-block;
  margin-left: 1.8em;
}

.project-details-item{
  position: relative;
}

.project-details-img{
  position: relative;
  padding: 0;
}

.project-details-info{
  background-color: #c5a47e;
  padding: 4.8em 3.1em 4.8em;
  color:#fff;
}

.project-details-title{
  position: relative;
  font-family: 'Oswald', sans-serif;
  font-weight: 400;
  font-size: 1.9em;
  line-height: 1.5;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 0.7em;
}

.project-details-title:before{
  content: '';
  position: absolute;
  bottom: -0.35em;
  width: 10em;
  border-top: 1px solid #ededed;
  left: -4.4em;
  width: 5.5em;
}

.project-details-descr{
  font-size: 1.1em;
  line-height: 1.62;
}

.project-details-descr p:last-child{
  margin-bottom: 0;
}

.project-details-item:nth-child(even) .project-details-info{
  right:0;
  left: auto;
  top:13%;
  background-color: #212121;
}



/* ------------------------------------------------------------------------------- */
/*  6. Experience
/* ------------------------------------------------------------------------------- */



.experience{
  text-align: center;
}

.text-parallax {
  background: no-repeat 0 0;
  display: inline-block;
}

.text-parallax-content{
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 21.8em;
  line-height: 1;
  overflow: hidden;
  margin-bottom: 0;
  background: #2b2b2b;
  color:#fff;
  mix-blend-mode: darken;
  -ms-mix-blend-mode:darken;
}

.experience-info{
  position: relative;
  top: -0.75em;
  font-family: 'Oswald', sans-serif;
  font-size: 1.5625em;
  line-height: 1.45;
  letter-spacing: 0.06em;
  display: inline-block;
  text-align: left;
  margin:0 0 0 0.5em;
}



/* ------------------------------------------------------------------------------- */
/*  7. Clients
/* ------------------------------------------------------------------------------- */

.clients {
  text-align: center;
  margin: 0.6em;
}

.clients-list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding: 4px;
  margin: 0;
  gap: 10px;
  row-gap: 20px;
}

.clients-container {
  background: transparent; /* Fondo transparente para el contenedor general */
  padding: 20px; /* Espaciado alrededor de las imágenes */
  border: 2px solid #ccc; /* Borde que envuelve todo el contenedor */
  border-radius: 8px; /* Bordes redondeados */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra para dar profundidad */
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 900px; /* Tamaño máximo para el contenedor que contiene las imágenes */
  margin: 0 auto; /* Centra el contenedor en la página */
}

.clients-list {
  display: flex;
  justify-content: space-between;
  gap: 10px; /* Espacio entre las imágenes */
}

.clients-list .client {
  background: #fff; /* Fondo blanco para cada cuadro de imagen */
 
  padding: 10px; /* Espaciado dentro del borde */
  border-radius: 8px; /* Bordes redondeados */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra para darle un efecto de profundidad */
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px; /* Tamaño fijo para que todos los cuadros tengan el mismo tamaño */
  height: 200px; /* Tamaño fijo para que todos los cuadros tengan el mismo tamaño */
}

.clients-list .client img {
  opacity: 1;
  display: block;
  transition: opacity 0.5s ease;
  max-width: 100%;
  max-height: 100%;
}

.clients-list .client a:hover img {
  opacity: 1;
}

@media (max-width: 768px) {
  .clients-list .client img {
    width: 100%;
    max-width: 400px;
  }
}





/* ------------------------------------------------------------------------------- */
/*  8. Blog
/* ------------------------------------------------------------------------------- */



.bg-blog{
  background: url(../img/bg/blog.jpg) 50% 0 no-repeat;
  background-size: cover;
}

.blog{
  position: relative;
  margin-bottom: 3em;
  margin-right: 1px;
  background-color: #373737;
  box-shadow:0 1px 15px rgba(0,0,0,0.08);
}

.blog:last-child{
  margin-bottom: 0;
}

.blog-thumbnail{
  position: static;
}

.blog-thumbnail-bg {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 5px;
  padding: 0;
  border-radius: 0.25em 0 0 0.25em;
  overflow: hidden;
  background-size: cover;
  background-position: 50% 0;
}

.blog-thumbnail-img img{
  border-radius: 0.25em 0.25em 0 0;
}

.blog-info{
  padding: 3.3em 3em;
}

.blog-info .blog-tags a{
  background-color: #434343;
}

.blog-tags{
  font-family: 'montserratsemibold';
  margin-top:-0.8em;
}

.blog-tags a{
  display: inline-block;
  font-size: 0.75em;
  line-height: 1;
  padding: 0.77em 1.1em 0.77em;
  border-radius: 2em;
  background-color: #333333;
  text-transform: uppercase;
  color:#6f6f6f;
  margin-top: 0.8em;
  margin:0.8em 0.7em 0 0;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

.blog-tags a:hover{
  background-color:#c5a47e;
  text-decoration: none;
  color: #fff;
}

.blog-title{
  font-family: 'Oswald', sans-serif;
  font-weight: 400;
  font-size: 1.5em;
  line-height: 1.333;
  margin: 1.8em 0 0.8em;
}

.blog-info p{
  margin-bottom: 0;
  color:#fff;
}

.blog-meta{
  font-size: 0.88em;
  color:#b4b4b4;
  overflow: hidden;
}

.blog-meta .author{
  color: #686868;
  float: left;
}

.blog-meta .author a{
  font-family: 'montserratsemibold';
  color:#686868;
}

.blog-meta .author a:hover{
  text-decoration: none;
  color:#c5a47e;
}

.blog-meta .time{
  float: right;
  color:#686868;
}

.blog-info .blog-meta{
  border-top:1px solid #474747;
  margin-top: 1.7em;
  padding-top: 1.7em;
}

.read-more{
  display: inline-block;
  font-family: 'montserratsemibold';
  font-size: 0.88em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.read-more{
  padding-right: 2em;
  background:url(../img/img-icon/read-more.png) right 50% no-repeat;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

.read-more:hover{
  text-decoration: none;
  background-position: 95% 50%;
}

.blog-info .read-more{
  margin-top: 2.8em;
}



/* 8.1 Blog Details */



.blog-details{
  margin-bottom:8.3em;
}

.col-secondary{
  margin-top: 7.1em;
}

.post-header{
  margin-bottom: 5em;
}

.post-header h3{
  font-family: 'Oswald', sans-serif;
  font-weight: 400;
  font-size: 2.2em;
  line-height: 1.43;
  margin:0 0 0 0;
}

.post-header .blog-meta{
  margin-top: 2.45em;
}

.post-thumbnail{
  margin-bottom: 2.5em;
}

.post-thumbnail img{
  width: 100%;
  border-radius: 0.25em;
}

.post .blog-tags{
  margin-top: 5.4em;
}



/* 8.2 Widgets */



.widget{
  margin-bottom: 3.65em;
}

.widget-title{
  font-family: 'montserratsemibold';
  font-weight: normal;
  font-size: 1.3em;
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 2.25em 0;
}



/* 8.3 Widget Recent Post */



.recent-post{
  margin-bottom: 1.7em;
  overflow: hidden;
}

.recent-post:last-child{
  margin-bottom: 0;
}

.recent-post-thumbnail{
  width: 9.32em;
  float: left;
}

.recent-post-thumbnail img{
  border-radius: 0.25em;
  max-width: 100%;
}

.recent-post-body{
  padding-left: 11.2em;
}

.recent-post-title{
  font-family: 'Oswald', sans-serif;
  font-weight: 400;
  font-size: 1.1em;
  line-height: 1.45;
  text-transform: none;
  letter-spacing: 0;
  margin:0;
  position: relative;
}

.recent-post-time{
  font-size: 0.88em;
  color:#b4b4b4;
  margin-top: 0.9em;
}



/* ------------------------------------------------------------------------------- */
/*  9. Contacts
/* ------------------------------------------------------------------------------- */



.bg-contacts{
  background: url(../img/bg/contacts.jpg) 50% 0 no-repeat;
  background-size: cover;
}

.contacts .fade-title-right{
  left: 90%;
}

.row-field{
  margin-left: -5px;
  margin-right:-5px;
}

.col-field{
  padding: 0 5px;
}

.col-message{
  display: none;
  margin-top: 20px;
}

.col-address{
  font-size: 1.125em;
  line-height: 2.1;
  margin-top: 2em;
}

.form-submit{
  margin-top: 1.2em;
}

.success-message{
  display: none;
}

.error-message{
  display: none;
}

.success-message .fa{
  margin-right: 7px;
  font-size: 1.5em;
}

.contact-details{
  position: relative;
  overflow: hidden;
  margin-top: -1px;
}

.col-map{
  height: 35em;
}

.gmap{
  position: absolute;
  top:0;
  left: 0;
  right: 0;
  padding: 0;
  height: 100%;
}

.map-info{
  padding: 1.2em;
}
.map-title{
  margin-bottom: 2em;
}

.map-title h3{
  margin:0;
}

.map-address-row{
  margin-top: 1em;
}

.map-address-row .fa{
  float: left;
  margin: 0.35em 0.6em 0 0;
  width: 1.1em;
  text-align: center;
  color: #c5a47e;
  font-size: 1.2em;
}

.map-address-row  .text{
  display: block;
  overflow: hidden;
  font-size: 1.15em;
}

.contact-info{
  color:#fff;
  padding:0;
  background:url(../img/bg/contact-details.jpg) 50% no-repeat;
  background-size: cover;
}

.contact-info-content{
  padding: 5.5em 5.6em;
  background-color:rgba(197,164,125, 0.95);
}

.contact-info-title{
  font-family: 'Oswald', sans-serif;
  font-size: 80px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color:#fff;
  opacity: 0.1;
  position: absolute;
  top:100%;
  left: 100%;
  margin-top: -0.5em;
  margin-left: -2.3em;
  -webkit-transform:rotate(-90deg);
  transform:rotate(-90deg);
   -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}

.contact-row{
  position: relative;
  z-index: 1;
  margin-bottom: 2.3em;
}

.contact-row:last-child{
  margin-bottom: 0;
}

.contact-row h4{
  margin:0 0 0.8em;
  color:#fff;
}

.contact-row .fa{
  float: left;
  width: 1.1em;
  margin-top: -0.15em;
  padding: 1px;
  text-align: center;
  font-size: 1.3em;
  line-height: 1.25;
}

.contact-body{
  padding-left: 2.6em;
}

.contact-content{
  font-size: 1.3em;
}

.phone-row{
  font-size: 1.3em;
  letter-spacing: 0.2em;
  margin-top: 0.5em;
}



/*  servicios */

.services-section {
  /* Container holding the image and the text */
  .image-card {
    position: relative;

    img {
      width: 100%;
      height: 320px;
      object-fit: cover;
    }

    /* Bottom right text */
    .text-block {
      position: absolute;
      bottom: 20px;
      left: 0;
      border-top-right-radius: 6px;
      border-bottom-right-radius: 6px;
    }

    .overlay {
      position: absolute;
      bottom: 100%;
      left: 0;
      right: 0;
      background-color: #ffecec;
      color: black;
      overflow: hidden;
      width: 100%;
      height: 0;
      transition: .5s ease;
      opacity: 0.5;

      .middle {
        width: 95%;
        transition: .5s ease;
        opacity: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        text-align: center;

        .text {
          background-color: #04AA6D;
          font-size: 16px;
          padding: 16px 32px;
        }
      }
    }

    &:hover {
      .overlay {
        bottom: 0;
        height: 100%;

        .middle {
          opacity: 1;
        }
      }
    }
  }
}


.services-section .image-card {
  position: relative;
  /* Bottom right text */
}
.services-section .image-card img {
  width: 100%;
  height: 320px;
  object-fit: cover;
}
.services-section .image-card .text-block {
  position: absolute;
  bottom: 20px;
  left: 0;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}
.services-section .image-card .overlay {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background-color: #ffecec;
  color: black;
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: 0.5s ease;
  opacity: 0.8;
  
}
.services-section .image-card .overlay .middle {
  width: 95%;
  transition: 0.5s ease;
  opacity: 10;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}
.services-section .image-card .overlay .middle .text {
  background-color: #04AA6D;
  font-size: 16px;
  padding: 16px 32px;
}
.services-section .image-card:hover .overlay {
  bottom: 0;
  height: 100%;
}
.services-section .image-card:hover .overlay .middle {
  opacity: 1;
}


.row {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--bs-gutter-y));
  margin-right: calc(-.5 * var(--bs-gutter-x));
  margin-left: calc(-.5 * var(--bs-gutter-x)); /* Ajustado para que las imágenes no se desborden */

  .col {
    padding-left: var(--bs-gutter-x);
    padding-right: var(--bs-gutter-x);
    width: 33.33%; /* Esto asegura que haya 3 columnas, cada una con un 33.33% del ancho */
    box-sizing: border-box;
    
    /* Garantiza que las imágenes sean de igual tamaño */
    .image-card {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 8px;
      }
    }
  }
  /* para servuicios */
  .card:hover .card-text {
    display: block;
    opacity: 1;
    transition: opacity 0.3s;
  }
  
  .card-text {
    display: none;
    opacity: 0;
  }

  .card {
    position: relative;
    overflow: hidden;
    border: 1px solid #ddd;
    transition: transform 0.3s, box-shadow 0.3s;
  }
  
  .card:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  }
  
  .card-title {
    font-size: 1.25rem;
    font-weight: bold;
    margin-bottom: 1rem;
  }
  
  .card-overlay {
    transition: opacity 0.3s ease-in-out;
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1rem;
  }
  
  .card:hover .card-overlay {
    opacity: 1;
  }
  

  /*  */

  /* Se asegura de que no haya margen horizontal adicional en la última columna */
  @media (max-width: 768px) {
    .col {
      width: 100%; /* En pantallas pequeñas, las imágenes ocupan el 100% del ancho */
    }
  }
}



.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    width: 100%;
    padding-right: calc(var(--bs-gutter-x)* .5);
    padding-left: calc(var(--bs-gutter-x)* .5);
    margin-right: auto;
    margin-left: auto;
}

.mb-0 {
  margin-bottom: 0 !important;
}
h6, .h6 {
  font-size: 1rem;
}

.text-block {
  background-color: rgb(255, 144, 76); /* Fondo con un color primario */
  color: white; /* Color del texto */
  display: flex; /* Flexbox para alineación */
  align-items: center; /* Alineación vertical */
  justify-content: center; /* Alineación horizontal */
  gap: 1rem; /* Espaciado entre el ícono y el texto */
  padding: 1rem 1rem; /* Reducido el padding para hacerlo más angosto */
  border-radius: 10px; /* Bordes redondeados */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */
  position: relative; /* Necesario para posicionar elementos dentro si es necesario */
  margin-left: 10px; /* Mueve todo el bloque 20px a la derecha */
  transition: all 0.3s ease; /* Transición para el efecto hover */
}


.text-block:hover {
  background-color: #f06543; /* Fondo más oscuro al pasar el mouse */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Aumento de sombra al hacer hover */
}

.text-block i {
  margin-right: 0.5rem; /* Espaciado entre el ícono y el texto */
  font-size: 1.5rem; /* Aumentar tamaño del ícono para hacerlo más visible */
}

.text-block h6 {
  margin: 0; /* Elimina márgenes extra alrededor del texto */
  text-align: center; /* Centra el texto dentro del bloque */
  font-weight: bold; /* Destacar el texto */
  color: white; /* Mantener el texto en blanco */
}

/*  */


/* ------------------------------------------------------------------------------- */
/*  10. Footer
/* ------------------------------------------------------------------------------- */



.footer{
  text-align: center;
  margin:7.1em 0 5.5em;
  font-size: 12px;
  color: #aaa;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.footer .brand{
  margin-top: -0.45em;
  font-size: 3.4em;
}

.author-link{
  font-family: 'Montserrat', sans-serif;
  color: #d0d0d0;
}

.author-link:hover{
  text-decoration: none;
}



/* ------------------------------------------------------------------------------- */
/*  11. Responsive styles
/* ------------------------------------------------------------------------------- */



/* 11.1 Min width 768px */



@media (min-width: 768px){



  html{
    font-size: 85%;
    scroll-behavior: smooth;
  }



  /* Slider */



  .arrow-left{
    top: 43.5vmin;
    bottom: auto;
  }

  .arrow-right{
    left: 28vmin;
    right: auto;
    margin-left: 5em;
    top: 43.5vmin;
    bottom: auto;
  }



  /* About */



  .entry{
    padding: 0 7.5em;
  }

  .col-about-spec{
    padding: 0 4.4em;
  }



  /* Project Carousel */



  .owl-prev{
    left: 3.6em
  }

  .owl-next{
    right:3.6em;
  }



  /* Projects Deatails */



  .project-details{
    margin-top: 7.1em;
  }


  .project-details-item{
    margin-bottom: 7.1em;
  }

 .project-details-info{
    position: absolute;
    z-index: 1;
    left: 0;
    top:13%;
    bottom: 13%;
    width: 55%;
  }

  .project-details-item:nth-child(odd) .project-details-img{
    padding-left: 15px;
    padding-right: 15px;
  }

  .project-details-item:nth-child(even) .project-details-img{
    padding-right:15px;
    padding-left: 15px;
  }

}



/* 11.2 Min width 992px */



@media (min-width: 992px){



  html{
    font-size: 92%;
    scroll-behavior: smooth;
  }



  /* Content styles */



  .text-center-md{
    text-align: center;
  }

  .text-right-md{
    text-align: right;
  }

  .text-left-md{
    text-align: left;
  }



  /* Navbar Mobile */


  .navbar-mobile{
    position: absolute;
    left: -50000px;
    top: -50000px;
  }



  /* About */



  .col-about-img{
    padding-left: 0;
    left: -5px;
  }

  .col-about-img img{
    max-width: calc(100% + 5px);
  }



  /* Project Details */



  .project-details-item:nth-child(odd) .project-details-img{
    padding-left: 5px;
    padding-right: 15px;
  }

  .project-details-item:nth-child(even) .project-details-img{
    padding-right:5px;
    padding-left: 15px;
  }



  /* Blog Details */


  
  .col-primary{
    padding-right: 2.2em;
  }

  .col-secondary{
    margin-top: 10.62em;
    margin-left: -5px;
    padding:0 10px 0 0;
  }



  /* Contacts */


  .row-field{
    margin-left: -15px;
  }

  .col-map{
    position:static;
    height: 100%;
  }
}


/* 11.3 Min width 1200px */



@media (min-width: 1200px){


   html{
    font-size: 100%;
    scroll-behavior: smooth;
  }



   /* Header */



  .main-header{
    padding-left: 0;
  }



  /* Project Details */


  .project-details-info{
    width: 44%;
  }

}



/* 11.4 Max height 480px  */



  @media (max-height: 480px){



  /* Slider */



  .arrow-left{
    top: 45.5vmin;
    bottom: auto;
  }

  .arrow-right{
    left: 28vmin;
    right:auto;
    margin-left: 5em;
    top: 43.5vmin;
    bottom: auto;
  }
}