/* ==============================
   1. FUENTES PERSONALIZADAS
   ============================== */
@font-face {
  font-family: 'futura_ltbold';
  src: url('fonts/futuralt-bold-webfont.eot');
  src: url('fonts/futuralt-bold-webfontd41d.eot?#iefix') format('embedded-opentype'),
       url('fonts/futuralt-bold-webfont.woff') format('woff'),
       url('fonts/futuralt-bold-webfont.ttf') format('truetype'),
       url('fonts/futuralt-bold-webfont.svg#futura_ltbold') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'futura_ltbook';
  src: url('fonts/futuralt-book-webfont.eot');
  src: url('fonts/futuralt-book-webfontd41d.eot?#iefix') format('embedded-opentype'),
       url('fonts/futuralt-book-webfont.woff') format('woff'),
       url('fonts/futuralt-book-webfont.ttf') format('truetype'),
       url('fonts/futuralt-book-webfont.svg#futura_ltbook') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'GillSansMT-UltraBold';
  src: url('fonts/GillSansMT-UltraBoldd41d.eot?#iefix') format('embedded-opentype'),
       url('fonts/GillSansMT-UltraBold.woff') format('woff'),
       url('fonts/GillSansMT-UltraBold.ttf') format('truetype'),
       url('fonts/GillSansMT-UltraBold.svg#GillSansMT-UltraBold') format('svg');
  font-weight: normal;
  font-style: normal;
}

/* ==============================
   2. ESTILOS GENERALES
   ============================== */
body {
  font-size: 15px;
  line-height: 24px;
  font-family: 'futura_ltbook', sans-serif;
  color: #484848;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: bold;
  text-transform: uppercase;
  color: #484848;
  font-family: 'futura_ltbold', sans-serif;
}

h1 {
  font-size: 70px;
  margin: 0;
  line-height: 72px;
}

h2 {
  font-size: 30px;
  margin: 0 0 20px;
}

h3 {
  font-size: 20px;
  margin: 0 0 10px;
}

img {
  width: 100%;
}

a, button {
  outline: 0 !important;
}

a:hover, a:focus {
  text-decoration: none;
}

/* Transiciones generales */
.list-inline.info a,
.list-inline.social_icon a,
nav.navbar.bootsnav ul.nav > li > a,
.attr-nav > ul > li > a,
.btn.know_btn,
#filters > button,
.portfolio_hover_area,
.portfolio_hover_area .fa,
.testimonial_content,
.testimonial_content p:first-child::before,
#contact_form .form-control,
#contact_form .btn.submit_btn,
footer a,
.footer_social_icon .fa,
.post .date,
#scrollUp {
  transition: all 0.4s ease;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
}

/* ==============================
   3. CARGA INICIAL (LOADING)
   ============================== */
#loading {
  background-color: #ffcb0f;
  height: 100%;
  width: 100%;
  position: fixed;
  z-index: 1;
  margin-top: 0px;
  top: 0px;
  z-index: 90;
}

#loading-center {
  width: 100%;
  height: 100%;
  position: relative;
}

#loading-center-absolute {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 50px;
  width: 150px;
  margin-top: -25px;
  margin-left: -75px;
}

.object {
  width: 8px;
  height: 50px;
  margin-right: 5px;
  background-color: #FFF;
  -webkit-animation: animate 1s infinite;
  animation: animate 1s infinite;
  float: left;
}

.object:last-child {
  margin-right: 0px;
}

.object:nth-child(10) {
  -webkit-animation-delay: 0.9s;
  animation-delay: 0.9s;
}

.object:nth-child(9) {
  -webkit-animation-delay: 0.8s;
  animation-delay: 0.8s;
}

.object:nth-child(8) {
  -webkit-animation-delay: 0.7s;
  animation-delay: 0.7s;
}

.object:nth-child(7) {
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}

.object:nth-child(6) {
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}

.object:nth-child(5) {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

.object:nth-child(4) {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}

.object:nth-child(3) {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

.object:nth-child(2) {
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
}

@-webkit-keyframes animate {
  50% {
    -ms-transform: translateX(-25px) scaleY(0.5);
    -webkit-transform: translateX(-25px) scaleY(0.5);
    transform: translateX(-25px) scaleY(0.5);
  }
}

@keyframes animate {
  50% {
    -ms-transform: translateX(-25px) scaleY(0.5);
    -webkit-transform: translateX(-25px) scaleY(0.5);
    transform: translateX(-25px) scaleY(0.5);
  }
}

/* ==============================
   4. BARRA DE NAVEGACIÓN SUPERIOR
   ============================== */
.top_nav {
  background: #039b64 none repeat scroll 0 0;
  overflow: hidden;
  padding: 10px 0;
}

.list-inline.info {
  float: left;
  margin: 0;
}

.list-inline.info > li {
  padding: 0 20px 0 0;
}

.list-inline.info a,
.list-inline.social_icon a {
  color: #ffffff;
  font-family: 'futura_ltbook', sans-serif;
}

.list-inline.info a:hover,
.list-inline.social_icon a:hover {
  color: #555;
}

.list-inline.info a .fa,
.list-inline.social_icon a .fa {
  font-size: 20px;
  vertical-align: text-top;
}

.list-inline.social_icon {
  float: right;
  margin: 0;
}

/* ==============================
   5. NAVBAR BOOTSTRAP
   ============================== */
nav.navbar.bootsnav {
  background: #ffffff none repeat scroll 0 0;
  border: 0 none;
}

nav.navbar.bootsnav ul.nav > li > a {
  color: #0e0606;
}

nav.navbar.bootsnav ul.nav > li > a:hover,
nav.navbar.bootsnav ul.nav > li > a:focus {
  color: #aaa;
}

.navbar-brand {
  height: auto;
  padding: 20px 15px;
}

#navbar-menu {
  margin: 6px 0;
}

.nav.navbar-nav.menu {
  float: right;
}

.attr-nav {
  margin: 5px -10px 0 0;
}

.attr-nav > ul > li > a {
  color: #8247a4;
  font-size: 20px;
}

.attr-nav > ul > li > a:hover,
.attr-nav > ul > li > a:focus {
  color: #8247a4;
}

/* ==============================
   6. SLIDER PRINCIPAL
   ============================== */
.home .carousel {
  position: relative;
  height: 700px;
}

.home .carousel .item img {
  width: 100%;
  height: 700px;
}

.carousel .overlay {
  background: rgba(0, 0, 0, 0.1) none repeat scroll 0 0;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0;
}

.carousel-caption {
  left: 7%;
  right: 7%;
  top: 300px;
}

.carousel-caption h1 {
  color: #fff;
  margin-bottom: 20px;
}

.carousel-caption h1.second_heading {
  color: #039b64;
  margin-bottom: 35px;
}

.carousel-caption2 h1.second_heading {
  color: #039b64;
  margin-bottom: 35px;
}


.carousel-caption > h3 {
  color: #fff;
  font-family: "futura_ltbook", sans-serif;
  font-size: 40px;
  font-weight: normal;
  margin-bottom: 30px;
  text-transform: inherit;
}

.carousel-caption > p {
  font-size: 23px;
  line-height: 28px;
}

.btn.know_btn {
  background: #ffcb0f none repeat scroll 0 0;
  border-radius: 30px;
  color: #fff;
  font-family: "futura_ltbold", sans-serif;
  font-size: 16px;
  padding: 10px 20px;
  text-transform: uppercase;
  border: 1px solid transparent;
}

.carousel-caption .btn.know_btn {
  margin-top: 64px;
}

.carousel-caption .btn.know_btn:last-child {
  margin-left: 20px;
}

.btn.know_btn:hover,
.btn.know_btn:focus {
  background: transparent;
  color: #ffcb0f;
  border: 1px solid #ffcb0f;
}

.carousel-control {
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  margin-top: -25px;
  top: 50%;
}

/* ==============================
   7. SECCIÓN "ABOUT"
   ============================== */
.about_content {
  margin-right: 25px;
}

.about_content > h2 {
  font-size: 40px;
  margin: 90px 0 15px;
  color: #039b64;
}

.about_content > h3 {
  font-size: 30px;
  margin: 2px 0 30px;
  text-transform: inherit;
}

.about_content > p {
  line-height: 18px;
  margin-bottom: 18px;
  text-align: justify;
}

.about_content .btn.know_btn {
  margin: 18px 0 60px;
}

.about_bg {
  background: url(../images/about_bg.png) no-repeat right;
}

/* ==============================
   8. SECCIÓN "WHY US"
   ============================== */
#why_us {
  background: #f2f7fa none repeat scroll 0 0;
  padding-bottom: 50px;
  line-height: 18px;
}

#why_us h2 {
  margin: 70px 0 20px;
}

.why_us_item {
  padding-top: 55px;
}

#why_us_22 .fa {
  border-radius: 100%;
  box-shadow: 0 0 0 10px #ffcb0f, 0 0 0 20px #fad b64, 0 0 0 30px #f7e59c;
  padding: 38px;
  font-size: 45px;
}

#why_us .fa {
    border-radius: 100%;
    box-shadow: 0 0 0 10px #039b64, 0 0 0 20px #856995, 0 0 0 30px #a48db1;
    padding: 38px;
    font-size: 45px;
}

.why_us_item > h4 {
  font-size: 15px;
  margin: 60px 0 20px;
}

/* ==============================
   9. SECCIÓN "SERVICES"
   ============================== */
#services h2 {
  margin: 85px 0 50px;
  text-align: center;
}

.service_item > h3 {
  margin: 25px 0 15px;
}

.service_item .btn.know_btn {
  margin: 20px 0 100px;
}

/* ==============================
   10. SECCIÓN "PORTFOLIO"
   ============================== */
#portfolio {
  background-size: cover;
  position: relative;
  padding-bottom: 102px;
}

#portfolio::before {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  background: rgba(245, 245, 220, 0.85);
  top: 0;
  left: 0;
}

.portfolio_area {
  position: relative;
  color: #fff;
}

.portfolio_area h2 {
  color: #484848;
  margin: 65px 0 34px;
}

#filters {
  margin: 52px 0 38px;
}

#filters > button {
  background: transparent none repeat scroll 0 0;
  border: 1px solid transparent;
  border-radius: 18px;
  outline: 0 none;
  padding: 6px 17px 4px;
  text-transform: uppercase;
  margin-bottom: 10px;
}

#filters > button:hover {
  border: 1px solid #282828;
  color: #282828;
}

#filters > button.is-checked {
  background: #282828;
}

#filters > button.is-checked:hover {
  color: #fff;
}

.grid {
  margin: 0 -6px;
}

.grid-item {
  border: 6px solid transparent;
}

.grid-item,
.grid-sizer {
  width: 25%;
}

.grid-item {
  float: left;
  height: 255px !important;
}

.grid-item--width2 {
  width: 50%;
}

.grid-item--height2 {
  height: 510px !important;
}

.grid-item:hover img {
  transform: scale(1.1);
}

.grid-item img {
  height: 100%;
  -webkit-transition: all 0.6s;
  -moz-transition: all 0.6s;
  -o-transition: all 0.6s;
  -ms-transition: all 0.6s;
  transition: all 0.6s;
}

.portfolio_hover_area {
  background: rgba(0, 0, 0, 0.6) none repeat scroll 0 0;
  height: 100%;
  width: 100%;
  top: 0;
  position: absolute;
  text-align: center;
  opacity: 0;
}

.grid-item:hover .portfolio_hover_area {
  opacity: 1;
}

.portfolio_hover_area .fa {
  background: #ffcb0f none repeat scroll 0 0;
  border: 2px solid transparent;
  border-radius: 5px;
  color: #fff;
  font-size: 30px;
  margin-top: 215px;
  padding: 15px;
  border: 1px solid transparent;
}

.grid-item .portfolio_hover_area .fa {
  margin-top: 90px;
}

.grid-item--width2 .portfolio_hover_area .fa {
  margin-top: 217px;
}

.portfolio_hover_area > a:first-child {
  margin-right: 10px;
}

.portfolio_hover_area .fa:hover {
  border: 1px solid #ffcb0f;
  background: transparent;
  color: #ffcb0f;
}

/* ==============================
   11. SECCIÓN "TESTIMONIAL"
   ============================== */
#testimonial {
  background: url("../images/testimonial_bg.jpg") no-repeat scroll 0 0;
  background-size: cover;
  position: relative;
}

#testimonial::before {
  background: #fff;
  opacity: 0.7;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.testimonial_area {
  position: relative;
}

#testimonial h2 {
  margin-top: 63px;
}

.testimonial_item {
  padding: 0 15px;
}

.testimonial_content {
  background: #e5e5e5 none repeat scroll 0 0;
  border-radius: 18px;
  margin: 55px 0 30px;
  padding: 40px 15px 40px 70px;
  text-align: left;
  position: relative;
  color: #393939;
}

.testimonial_content::after {
  background: inherit;
  bottom: -10px;
  content: "";
  height: 20px;
  left: 47%;
  position: absolute;
  transform: rotate(45deg);
  width: 20px;
}

.testimonial_content p {
  position: relative;
}

.testimonial_content p:first-child::before {
  color: #989898;
  content: ",,";
  font-family: "GillSansMT-UltraBold";
  font-size: 60px;
  left: -54px;
  position: absolute;
  top: -24px;
  transform: rotateY(180deg);
}

#testimonial .col-sm-4:nth-child(3n+2) .testimonial_content {
  margin: 40px 0;
  padding-bottom: 70px;
}

.testimonial_item:hover .testimonial_content {
  background: #ffcb0f none repeat scroll 0 0;
}

.testimonial_item:hover .testimonial_content::after {
  width: 22px;
  height: 22px;
  bottom: -11px;
}

.testimonial_item:hover .testimonial_content {
  color: #fff;
}

.testimonial_item:hover .testimonial_content p:first-child::before {
  color: inherit;
}

.testimonial_item > img {
  border-radius: 100%;
  height: 80px;
  width: 80px;
}

.worker_name {
  font-family: "futura_ltbold", sans-serif;
  margin: 10px 0 45px;
  text-transform: uppercase;
}

/* ==============================
   12. SECCIÓN "CONTACT FORM"
   ============================== */ 
#contact_form {
  background: #2f8748 none repeat scroll 0 0;
  padding: 27px 0 32px;
}

#contact_form h2 {
  margin: 20px 0 0;
  color: #fffe;
}

#contact_form .second_heading {
  font-size: 40px;
  font-family: "futura_ltbook", sans-serif;
  margin: 8px 0;
}

#contact_form form.form-inline {
  padding-right: 27px;
}

#contact_form .form-inline .form-control {
  border: 2px solid transparent;
  border-radius: 10px;
  font-size: 15px;
/* height: 45px; */
  margin: 8px;
  padding: 10px 20px;
  width: 250px;
  box-shadow: none;
}

#contact_form2 .form-inline .form-control {
  border: 2px solid transparent;
  border-radius: 10px;
  font-size: 15px;
/* height: 45px; */
  margin: 8px;
  padding: 10px 20px;
  width: 250px;
  box-shadow: none;
}


#contact_form .form-inline textarea.form-control {
  width: 388px;
  resize: none;
}

#contact_form .form-control:focus {
  border: 2px solid #ffcb0f;
  box-shadow: 0px 0px 5px 1px #ffcb0f;
}

#contact_form .btn.submit_btn {
  background: #73757e none repeat scroll 0 0;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  text-transform: uppercase;
  height: 45px;
  width: 120px;
  border-radius: 10px;
  margin: 6px 8px 6px 0;
}

.form-control::-moz-placeholder {
  color: #adadad;
}

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

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

#contact_form .btn.submit_btn:hover {
  background: #555 none repeat scroll 0 0;
}

/* ==============================
   13. FOOTER
   ============================== */
footer {
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), 
                url(../images/footer_bg2.png) no-repeat;
    background-size: cover;
    position: relative;
    padding-top: 45px;
}
footer::before { 
  background: rgba(255, 255, 255, 0.33) none repeat scroll 0 0;
  content: "";
  height: 45px;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
}

footer::after {
  background: rgba(34, 37, 51, 0.9) none repeat scroll 0 0;
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.footer_top,
.footer_bottom {
  position: relative;
  z-index: 1;
  color: #fff;
}

.footer_item {
  margin-top: 75px;
}

.footer_item > h4 {
  color: #fff;
  font-family: "futura_ltbook", sans-serif;
  font-size: 25px;
  margin-bottom: 34px;
  text-transform: inherit;
}

.footer_item .list-unstyled > li a {
  color: #fff;
}

.footer_item .logo {
  margin-bottom: 15px;
  width: 150px;
}

.list-inline.footer_social_icon {
  margin: 32px 0 0;
}

.footer_social_icon .fa {
  background: #0c5bd1 none repeat scroll 0 0;
  border-radius: 100%;
  color: #222;
  font-size: 20px;
  height: 45px;
  padding: 12px;
  text-align: center;
  width: 45px;
}

.footer_item .footer_social_icon .fa:hover,
.footer_item .footer_social_icon .fa:focus {
  background: #d7a300 none repeat scroll 0 0;
}

.footer_menu .fa {
  font-size: 10px;
  margin-right: 18px;
}

.list-unstyled.footer_menu > li {
  padding: 4px 0;
}

.list-unstyled.post,
.list-unstyled.footer_contact {
  margin-top: -14px;
}

.post .date {
  border: 2px solid #fff;
  border-radius: 100%;
  display: block;
  float: left;
  font-size: 20px;
  height: 50px;
  line-height: 12px;
  margin-right: 15px;
  padding: 10px;
  text-align: center;
  width: 50px;
}

.footer_item li a:hover .date,
.footer_item li a:focus .date {
  border: 2px solid #aaa;
}

.footer_item li a:hover,
.footer_item li a:focus {
  color: #aaa;
}

.post .date small {
  font-size: 12px;
}

.list-unstyled.post > li,
.list-unstyled.footer_contact > li {
  padding: 14px 0;
  overflow: hidden;
}

.footer_contact .fa {
  margin-right: 25px;
  text-align: center;
  width: 15px;
  float: left;
  font-size: 18px;
}

.list-unstyled.footer_contact p {
  overflow: hidden;
}

.footer_bottom {
  background: #1a1c27 none repeat scroll 0 0;
  padding: 28px 0 18px;
  margin-top: 55px;
}

.footer_bottom a {
  color: #ffcb0f;
}

.footer_bottom a:hover,
.footer_bottom a:focus {
  color: #d7a300;
}

/* ==============================
   14. BOTÓN SCROLL UP
   ============================== */
#scrollUp {
  background: url(../images/top.png) no-repeat scroll 0 0;
  bottom: 20px;
  color: #000;
  height: 40px;
  right: 20px;
  width: 40px;
  opacity: 0.7;
}

#scrollUp:hover {
  background: url(../images/top.png) no-repeat scroll 0 -40px;
}

/* ==============================
   15. MEDIA QUERIES
   ============================== */
@media (min-width: 1600px) {
  .container {
    width: 1200px;
  }

  .carousel-inner > .item > a > img,
  .carousel-inner > .item > img {
    height: 740px;
  }

  .carousel-caption {
    left: 18%;
    right: 18%;
    top: 300px; 
  }

  .about_content {
    margin-right: 50px;
  }
}

@media (max-width: 1199px) {
  h1 {
    font-size: 50px;
    line-height: 55px;
  }

  h2 {
    font-size: 25px;
  }

  .carousel-inner > .item > a > img,
  .carousel-inner > .item > img {
    height: 550px;
  }

  .carousel-caption {
    left: 3%;
    right: 3%;
    top: 300px;
  }

  .about_banner > img {
    width: 334px;
    display: block;
    margin: 0 auto;
  }

  .grid-item {
    height: 220px !important;
  }

  .grid-item--height2 {
    height: 440px !important;
  }

  .grid-item .portfolio_hover_area .fa {
    margin-top: 73px;
  }

  .grid-item--width2 .portfolio_hover_area .fa {
    margin-top: 183px;
  }

  #contact_form .second_heading {
    font-size: 30px;
  }

  #contact_form .form-inline .form-control {
    width: 202px;
  }

  #contact_form .form-inline textarea.form-control {
    width: 317px;
  }

  #contact_form .btn.submit_btn {
    width: 95px;
  }
}

@media (max-width: 991px) {
  .list-inline.info > li {
    padding: 0 12px 0 0;
  }

  .list-inline.social_icon > li {
    padding: 0 2px;
  }

  nav.navbar.bootsnav .navbar-header {
    padding: 0;
  }

  nav.navbar.bootsnav .navbar-toggle {
    margin-top: 32px;
  }

  .attr-nav {
    right: 25px;
    top: 15px;
  }

  nav.navbar.bootsnav ul.nav > li > a {
    padding: 12px 0;
  }

  .container.about_bg {
    background-position: bottom 100px center;
  }

  .grid-item {
    height: 255px !important;
    width: 50%;
  }

  .grid-item--height2 {
    height: 500px !important;
    width: 100%;
  }

  .grid-item .portfolio_hover_area .fa {
    margin-top: 90px;
  }

  .grid-item--width2 .portfolio_hover_area .fa {
    margin-top: 217px;
  }

  #contact_form {
    text-align: center;
  }

  #contact_form form.form-inline {
    margin: 0 -8px;
    padding-right: 15px;
  }

  #contact_form .form-inline .form-control {
    width: 349px;
  }

  #contact_form .form-inline textarea.form-control {
    width: 538px;
  }

  #contact_form .btn.submit_btn {
    width: 168px;
  }
}

@media (max-width: 767px) {
  h1 {
    font-size: 32px;
    line-height: 35px;
  }

  .list-inline.info {
    width: 60%;
  }

  .list-inline.social_icon {
    width: 40%;
    text-align: right;
  }

  nav.navbar.bootsnav .navbar-toggle {
    margin-left: 15px;
  }

  .carousel-caption {
    top: 300px;
  }

  .carousel-inner > .item > a > img,
  .carousel-inner > .item > img {
    height: 450px;
  }

  .carousel-caption > h3 {
    font-size: 26px;
    margin-bottom: 10px;
  }

  .carousel-caption > p {
    font-size: 18px;
    line-height: 22px;
  }

  .carousel-caption .btn.know_btn {
    margin-top: 35px;
  }

  .carousel-caption .btn.know_btn:last-child {
    margin-left: 30px;
  }

  .about_content > h2 {
    font-size: 26px;
    margin-top: 70px;
  }

  .about_content > h3 {
    font-size: 26px;
  }

  .service_item .btn.know_btn {
    margin-bottom: 80px;
  }

  #contact_form h2 {
    margin-top: 10px;
  }

  #contact_form .second_heading {
    margin: 8px 0 20px;
  }

  #contact_form form.form-inline {
    margin: 0;
  }

  #contact_form .form-inline .form-control,
  #contact_form .form-inline textarea.form-control {
    margin: 0;
    width: 100%;
  }

  #contact_form .btn.submit_btn {
    float: left;
    margin: 0;
    width: 145px;
  }
}

@media (max-width: 479px) {
  h1 {
    font-size: 30px;
    line-height: 32px;
  }

  h3 {
    font-size: 17px;
  }

  .list-inline.info {
    margin-bottom: 10px;
    text-align: center;
    width: 100%;
  }

  .list-inline.info > li {
    padding: 0 8px;
  }

  .list-inline.social_icon {
    text-align: center;
    width: 100%;
    padding: 0 8px;
  }

  .carousel-inner > .item > a > img,
  .carousel-inner > .item > img {
    height: 420px;
  }

  .carousel-caption {
    top: 300px;
  }

  .carousel-caption h1.second_heading {
    margin-bottom: 10px;
  }

  .carousel-caption > h3 {
    font-size: 20px;
    margin-bottom: 10px;
  }

  .carousel-caption > p { 
    font-size: 16px;
    line-height: 20px;
  }

  .btn.know_btn {
    font-size: 14px;
    padding: 8px 14px;
  }

  .carousel-caption .btn.know_btn {
    margin-top: 10px;
  }

  .carousel-caption .btn.know_btn:last-child {
    margin-left: 10px;
  }

  .about_content > h3 {
    font-size: 24px;
  }

  .about_banner > img { 
    width: 100%;
  }

  #filters > button {
    font-size: 14px;
  }

  .grid-item {
    width: 100%;
  }

  .grid-item--height2 {
    height: 255px !important;
  }

  .grid-item--width2 .portfolio_hover_area .fa {
    margin-top: 90px;
  }

  .list-inline.footer_social_icon > li {
    padding: 8px 3px;
  }
} 

.float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 70px;
    right: 10px;
    background-color: #25d366;
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 2px 2px 3px #999;
    z-index: 100;
}





/* ------------------------------
   1. RESETS Y ESTILOS GENERALES
------------------------------ */
html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* Evita el desplazamiento horizontal */
  width: 100%;
  max-width: 100%; /* Asegura que el contenido no exceda el ancho de la pantalla */
}

img, svg {
  vertical-align: middle;
}

a {
  color: var(--color-primary);
  text-decoration: none;
}

/* ------------------------------
   2. FOOTER
------------------------------ */
#freecssfooter {
  display: block;
  width: 100%;
  padding: 120px 0 20px;
  overflow: hidden;
  background-color: transparent;
  z-index: 5000;
  text-align: center;
}

#freecssfooter div#fcssholder div {
  display: none;
}

#freecssfooter div#fcssholder div:first-child {
  display: block;
}

#freecssfooter div#fcssholder div:first-child a {
  float: none;
  margin: 0 auto;
}

/* ------------------------------
   3. SWIPER SLIDER (CORREGIDO)
------------------------------ */

/* 1. Contenedor Principal del Slider */
.gallery .swiper {
  height: auto !important; /* FORZAR altura automática */
  max-height: 400px;       /* Límite máximo de altura */
  padding-bottom: 20px;    /* Espacio para la paginación */
}

/* 2. Wrapper (Eliminamos el height: 100% por defecto) */
.gallery .swiper-wrapper {
  height: auto !important; /* CLAVE: Sobrescribe el 100% de Swiper */
  align-items: center;     /* Centra los slides verticalmente */
  padding: 20px 0;         /* Espacio arriba y abajo */
}

/* 3. Slides Individuales */
.swiper-slide {
  width: 100%;
  height: auto !important; /* Evita que se estiren */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 4. Imágenes */
.swiper-slide img {
  width: 100%;
  max-width: 350px;  /* Ajusta este valor para cambiar el tamaño */
  height: auto;      /* Mantiene la proporción */
  max-height: 250px; /* Límite de altura para que no sean gigantes */
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

/* 5. Estilo del Slide Activo (Desktop) */
@media (min-width: 992px) {
  .gallery .swiper-slide-active {
    border: 4px solid var(--color-primary);
    padding: 4px;
    background: #fff;
    z-index: 1;
    transform: scale(1.1); /* Zoom moderado (1.1 en vez de 1.2) */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  }
}

/* 6. Paginación (Puntos) */
.gallery .swiper-pagination {
  margin-top: 10px;
  position: relative;
  bottom: 0 !important; /* Asegura que se quede abajo del todo */
}

.gallery .swiper-pagination .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background-color: #0a8a1a;
  opacity: 0.5;
}

.gallery .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--color-primary);
  opacity: 1;
}
/* ------------------------------
   4. RESPONSIVE DESIGN
------------------------------ */
@media only screen and (max-width: 768px) {

/* 
  .carousel img {
    width: 80%;
    height: 200px; /* Define una altura fija para móviles */
    object-fit: cover; /* Asegura que la imagen no se distorsione */
    margin: 0 auto;
  }

  .home .carousel .item img {
    width: 100%;
    height: 400px; /* Puedes ajustar esto si lo deseas */
    margin: 0 auto;
    object-fit: cover;
  }
*/

  .about_banner img {
    width: 80%; /* Reduce el tamaño de la imagen en dispositivos móviles */
    margin: 0 auto; /* Centra la imagen si es más pequeña */
    display: block; /* Asegura que la imagen se centre como bloque */
  }

  .second_heading {
    font-size: 2.2rem; /* Reduce el tamaño del texto en móviles */
  }

  .carousel-caption {
    margin-top: -130px;
  }

  .home {
    height: 400px;
  }
}

/* ------------------------------
   5. EFECTO PARALAJE
------------------------------ */
.carousel-inner {
  overflow: hidden;
  position: relative;
}

.carousel-img {
  width: 100%;
  height: auto;
  animation: parallaxEffect 10s infinite alternate;
}

@keyframes parallaxEffect {
  0% {
    transform: translateY(0) scale(1); /* Tamaño normal */
  }
  100% {
    transform: translateY(-50px) scale(1.2); /* Movimiento hacia arriba + zoom */
  }
}

.carousel-img:nth-child(1) {
  animation: parallaxEffect 8s infinite alternate;
}

.carousel-img:nth-child(2) {
  animation: parallaxEffect 12s infinite alternate;
}

.carousel-img:nth-child(3) {
  animation: parallaxEffect 10s infinite alternate;
}

/* ------------------------------
   6. ELEMENTOS DE SERVICIO
------------------------------ */
.service_item {
  position: relative; /* Permite posicionar elementos dentro del contenedor */
  text-align: center; /* Centra el contenido */
  margin-bottom: 20px; /* Espacio entre los elementos */
}

.image-container {
  width: 100%; /* El contenedor ocupa todo el ancho */
  height: 266px; /* Altura fija para el contenedor */
  overflow: hidden; /* Recorta la imagen si se desborda */
  position: relative; /* Permite animaciones dentro del contenedor */
}

.image-container img {
  width: 100%; /* La imagen ocupa todo el ancho del contenedor */
  height: 100%; /* La imagen ocupa toda la altura del contenedor */
  object-fit: cover; /* Recorta la imagen sin deformarla */
  animation: parallaxEffect 10s infinite alternate; /* Animación de paralaje */
}

.service_content {
  position: absolute; /* Posiciona el contenido sobre la imagen */
  bottom: 10px; /* Coloca el contenido cerca del borde inferior de la imagen */
  left: 0; /* Alinea al inicio */
  right: 0; /* Alinea al final */
  background: rgba(0, 0, 0, 0.6); /* Fondo semitransparente para mejorar la legibilidad */
  color: white; /* Color del texto */
  padding: 10px; /* Espaciado interno */
  border-radius: 5px; /* Bordes redondeados */
  z-index: 2; /* Asegura que el contenido esté encima de la imagen */
  text-align: center; /* Alinea el texto al centro */
}

.service_content h3 {
  margin: 0; /* Elimina márgenes adicionales del título */
  font-size: 1.2rem; /* Ajusta el tamaño del título */
}

.service_content p {
  margin: 5px 0 0; /* Espaciado entre el título y la descripción */
  font-size: 0.9rem; /* Ajusta el tamaño de la descripción */
}

/* Personalización para cada imagen */
.service_item:nth-child(1) img {
  animation: parallaxEffect1 8s infinite alternate;
}

.service_item:nth-child(2) img {
  animation: parallaxEffect2 12s infinite alternate;
}

.service_item:nth-child(3) img {
  animation: parallaxEffect3 10s infinite alternate;
}

@keyframes parallaxEffect1 {
  0% {
    transform: translateY(0) scale(1);
  }
  100% {
    transform: translateY(-30px) scale(1.1);
  }
}

@keyframes parallaxEffect2 {
  0% {
    transform: translateY(0) scale(1);
  }
  100% {
    transform: translateY(-20px) scale(1.1);
  }
}

@keyframes parallaxEffect3 {
  0% {
    transform: translateY(0) scale(1);
  }
  100% {
    transform: translateY(-40px) scale(1.2);
  }
}

/* ------------------------------
   7. FORMULARIOS
------------------------------ */
.form-group {
  margin-bottom: 15px; /* Espaciado entre los campos */
}

.form-control {
  width: 100%; /* Ancho completo del contenedor */
  padding: 10px; /* Espaciado interno */
  font-size: 1rem; /* Tamaño de fuente */
  border-radius: 5px; /* Bordes redondeados */
  border: 1px solid #ccc; /* Borde suave */
  box-sizing: border-box; /* Incluye padding y borde en el ancho total */
}

#email {
  width: calc(100% + 30px); /* Alarga el campo hacia la izquierda */
  margin-left: -30px; /* Mueve el campo hacia la izquierda */
}

/* ------------------------------
   8. BOTONES
------------------------------ */
.ready-btn {
  border: 1px solid #fff;
  border-radius: 30px;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-size: 17px;
  font-weight: 600;
  margin-top: 30px;
  padding: 12px 40px;
  text-align: center;
  text-transform: uppercase;
  transition: all 0.4s ease 0s;
  z-index: 222;
}

.ready-btn.right-btn {
  margin-right: 15px;
  background: #039b64;
  border: 1px solid #039b64 !important;
}

.ready-btn.left-btn {
  margin-right: 15px;
  background: #039b64;
  border: 1px solid #039b64 !important;
}

/* ------------------------------
   9. ICONOS Y VIDEOS
------------------------------ */
.video-item {
  position: relative;
  display: inline-block;
}

.play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 50px; /* Tamaño del icono */
  color: white;
  background: rgba(0, 0, 0, 0.6); /* Fondo oscuro semitransparente */
  border-radius: 50%;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none; /* No interfiere con el clic */
}

.plyr__video-wrapper {
  background: #000;
  height: 100vh; /* Ajusta el alto al 100% de la altura de la ventana */
  width: 100%; /* Ancho completo */
  margin: auto;
  overflow: hidden;
  position: relative;
}

.plyr__video-wrapper iframe,
.plyr__video-wrapper video {
  width: 100%; /* Ancho completo */
  height: 100%; /* Alto completo */
  object-fit: cover; /* Asegura que el video se ajuste sin deformarse */
}

@media (max-width: 768px) {
  .plyr__video-wrapper {
    height: 100vh; /* Alto completo de la pantalla */
  }

  .plyr__video-wrapper iframe,
  .plyr__video-wrapper video {
    width: 100%; /* Ocupa todo el ancho */
    height: auto; /* Mantiene la relación de aspecto */
  }
}

@media (min-width: 1024px) {
  .plyr__video-wrapper {
    max-width: 640px; /* Limita el ancho máximo del video */
    margin: 0 auto; /* Centra el video */
  }

  .plyr__video-wrapper iframe,
  .plyr__video-wrapper video {
    width: 100%;
    height: auto; /* Mantiene la relación de aspecto */
    object-fit: contain; /* Asegura que el video no se distorsione */
  }
}

/* ------------------------------
   10. IMÁGENES ESPECÍFICAS
------------------------------ */
.my-image {
  min-width: 100px; /* mínimo */
  max-width: 200px; /* máximo */
  height: auto;
}

.icon-image {
  width: 250px; /* Ancho deseado */
  height: auto; /* Mantener proporción */
  margin-bottom: 15px; /* Espacio entre la imagen y el texto */
  display: block; /* Centrar correctamente */
  margin-left: auto;
  margin-right: auto;
}


.about_bg {
  position: relative; /* Necesario para el pseudo-elemento */
  background: transparent; /* Quitamos la imagen del contenedor */
}

.about_bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../images/about_bg.png) no-repeat right;
  background-size: cover; /* Opcional: para que cubra todo */
  opacity: 0.5; /* AJUSTA ESTE VALOR (0.1 a 1.0) */
  z-index: 0;
}

/* Asegura que el contenido esté encima del fondo */
.about_bg > * {
  position: relative;
  z-index: 1;
}