<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">/* ------------------------------------------------------------------------------

  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&lt;= 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&gt;=360px) and (width&lt; 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&gt;=390px) and (width&lt; 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&gt;=410px) and (width&lt;= 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&lt;= 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 &gt; a{
  color:  rgb(255, 144, 76);
}

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

.navbar-desctop-menu &gt; li &gt; 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 &gt; li &gt; ul{
  left: -20px;
  margin-top: 0;
}

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

.navbar-desctop-menu &gt; li:hover &gt; 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 &gt; a:hover,
.navbar-desctop.affix .navbar-desctop-menu .active &gt; 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 &gt; .current &gt; a{
  color: #c5a47e;
}

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

.navbar-nav-mobile &gt; .current &gt; 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 &gt; .active &gt; a,
.navbar-nav-mobile &gt; .active &gt; 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 &gt; 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 &gt; .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&gt;.arrow{
  border-top-color: transparent;
}

.popover.top&gt;.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;
        }
      }
    }

    &amp;: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;
  }
}


</pre></body></html>