/*

@Author: Themezinho
@URL: http://www.themezinho.net

This file contains the styling for the actual theme, this
is the file you need to edit to change the look of the
theme.


// Table of contents //

	01.	GOOGLE FONTS
	02.	BODY
	03.	CUSTOM CLASSES
	04. FORM ELEMENTS
	05.	SECTIONS
	06.	HTML TAGS
	07.	LINKS
	08.	MODAL
	09.	PAGINATION
	10. PRELOADER
	11.	TRANSITION OVERLAY
	12.	SANDWICH BUTTON
	13.	SCROLL DOWN
	14.	NAVIGATION MENU
	15.	HEADER
	16.	SOCIAL MEDIA
	17.	NAVBAR
	18.	SLIDER
	19.	PAGE HEADER
	20.	VIDEO BG
	21.	WORKS
	22.	FEATURES CONTENT
	23.	LISTING CONTENT
	24.	FULL MEDIA CONTENT
	25.	INTRODUCTION
	26. OUR TEAM
	27.	NEWS
	28.	SAY HELLO
	29.	LOGOS
	30.	FOOTER
	31.	RESPONSIVE TABLET FIXES
	32. REPSONSIVE MOBILE FIXES



*/
/* GOOGLE FONTS */
@import url("https://fonts.googleapis.com/css?family=Fjalla+One|Poppins:300,400,600,800&subset=latin-ext");
* {
  outline: none !important;
}

body {
  font-size: 16px;
  background: #131313;
  font-family: "Poppins", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  height: 100%;
  overflow: hidden;
}

html {
  height: 100%;
}

/* HTML ELEMENTS */
img {
  max-width: 100%;
}

b {
  font-weight: 600;
}

strong {
  font-weight: 800;
}

/* CUSTOM CLASSES */
@media (min-width: 1200px) {
  .container {
    max-width: 1240px;
  }
}
.header-spacing {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
}

.overflow {
  overflow: hidden;
}

/* FORM ELEMENTS */
input[type=text] {
  height: 58px;
  line-height: 54px;
  display: inline-block;
  border: 2px solid #eee;
  padding: 0 20px;
}

textarea {
  height: 158px;
  line-height: 54px;
  display: inline-block;
  border: 2px solid #eee;
  padding: 20px;
}

label {
  display: block;
  font-weight: 600;
}

button[type=submit] {
  height: 58px;
  display: inline-block;
  padding: 0 40px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  background: #000;
  color: #fff;
  border: none;
}

/* SECTIONS */
main {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  z-index: 5;
  background: #e1e1d1;
}

/* LINKS */
a {
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -ms-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
  color: #000;
}
a:hover {
  text-decoration: underline;
}

/* GLITCH ANIMZ */
@keyframes noise-anim {
  0% {
    clip: rect(18px, 9999px, 16px, 0);
  }
  5% {
    clip: rect(129px, 9999px, 91px, 0);
  }
  10% {
    clip: rect(48px, 9999px, 117px, 0);
  }
  15% {
    clip: rect(19px, 9999px, 40px, 0);
  }
  20% {
    clip: rect(46px, 9999px, 53px, 0);
  }
  25% {
    clip: rect(90px, 9999px, 18px, 0);
  }
  30% {
    clip: rect(76px, 9999px, 129px, 0);
  }
  35% {
    clip: rect(48px, 9999px, 62px, 0);
  }
  40% {
    clip: rect(100px, 9999px, 80px, 0);
  }
  45% {
    clip: rect(105px, 9999px, 29px, 0);
  }
  50% {
    clip: rect(78px, 9999px, 79px, 0);
  }
  55% {
    clip: rect(7px, 9999px, 119px, 0);
  }
  60% {
    clip: rect(83px, 9999px, 108px, 0);
  }
  65% {
    clip: rect(80px, 9999px, 92px, 0);
  }
  70% {
    clip: rect(79px, 9999px, 68px, 0);
  }
  75% {
    clip: rect(14px, 9999px, 65px, 0);
  }
  80% {
    clip: rect(76px, 9999px, 78px, 0);
  }
  85% {
    clip: rect(44px, 9999px, 66px, 0);
  }
  90% {
    clip: rect(28px, 9999px, 118px, 0);
  }
  95% {
    clip: rect(125px, 9999px, 79px, 0);
  }
  100% {
    clip: rect(103px, 9999px, 15px, 0);
  }
}
@keyframes noise-anim-2 {
  0% {
    clip: rect(80px, 9999px, 50px, 0);
  }
  5% {
    clip: rect(79px, 9999px, 29px, 0);
  }
  10% {
    clip: rect(8px, 9999px, 80px, 0);
  }
  15% {
    clip: rect(69px, 9999px, 98px, 0);
  }
  20% {
    clip: rect(56px, 9999px, 95px, 0);
  }
  25% {
    clip: rect(4px, 9999px, 94px, 0);
  }
  30% {
    clip: rect(37px, 9999px, 75px, 0);
  }
  35% {
    clip: rect(91px, 9999px, 97px, 0);
  }
  40% {
    clip: rect(128px, 9999px, 127px, 0);
  }
  45% {
    clip: rect(75px, 9999px, 108px, 0);
  }
  50% {
    clip: rect(75px, 9999px, 110px, 0);
  }
  55% {
    clip: rect(94px, 9999px, 83px, 0);
  }
  60% {
    clip: rect(111px, 9999px, 112px, 0);
  }
  65% {
    clip: rect(5px, 9999px, 84px, 0);
  }
  70% {
    clip: rect(90px, 9999px, 54px, 0);
  }
  75% {
    clip: rect(10px, 9999px, 93px, 0);
  }
  80% {
    clip: rect(60px, 9999px, 47px, 0);
  }
  85% {
    clip: rect(70px, 9999px, 119px, 0);
  }
  90% {
    clip: rect(83px, 9999px, 119px, 0);
  }
  95% {
    clip: rect(55px, 9999px, 78px, 0);
  }
  100% {
    clip: rect(64px, 9999px, 91px, 0);
  }
}
/* DOTS MENU */
.dots-menu {
  float: right;
  position: relative;
  width: 20px;
  height: 20px;
  margin: 0;
  cursor: pointer;
}
.dots-menu .pix {
  position: absolute;
  width: 4px;
  height: 4px;
  background-color: #fff;
  border-radius: 100%;
  transition: 0.2s ease-in-out;
}

/* MODAL */
.modal .modal-dialog {
  width: 600px;
  max-width: 100%;
  margin: 0 auto;
}

.modal .modal-dialog .modal-content {
  width: 100%;
  height: 300px;
  margin-top: 30%;
  border-radius: 0;
  border: none;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.3);
  position: relative;
}

.modal .modal-dialog .modal-content .close {
  width: 50px;
  height: 50px;
  line-height: 50px;
  background: #33a16e;
  color: #fff;
  position: absolute;
  right: 0;
  top: 0;
  opacity: 1;
  text-align: center;
  font-size: 13px;
}

.modal #map {
  width: 100%;
  height: 300px;
  float: left;
}

/* PAGINATION */
.pagination {
  width: 100%;
  height: 40px;
  display: block;
  float: left;
  text-align: center;
  margin: 0;
}
.pagination li.page-item {
  float: none;
  display: inline-block;
}
.pagination li.page-item a.page-link {
  height: 40px;
  line-height: 36px;
  border: 2px solid #000;
  float: left;
  border-radius: 0 !important;
  font-size: 12px;
  color: #000;
  font-weight: 600;
  padding: 0 20px;
}

/* PRELOADER */
.preloader {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 13;
  background: #33a16e;
  -webkit-transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
  -moz-transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
  -o-transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
  transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
  /* custom */
  -webkit-transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
  -moz-transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
  -o-transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
  transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
  /* custom */
}
.preloader .inner {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: url(../images/loading.gif) center no-repeat #000;
  background-size: 80px 80px;
  -webkit-transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
  -moz-transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
  -o-transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
  transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
  /* custom */
  -webkit-transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
  -moz-transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
  -o-transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
  transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
  /* custom */
}
.preloader .holder {
  width: 100%;
  height: 26px;
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: 50px;
  text-align: center;
}
.preloader .typewriter {
  height: 26px;
  line-height: 26px;
  display: inline-block;
  color: #fff;
}
.preloader .typewriter #typewriter-text {
  float: left;
  font-size: 12px;
  margin-left: 5px;
  margin-top: -2px;
  margin-right: 3px;
}
.preloader .typewriter #typewriter-suffix {
  width: 2px;
  height: 16px;
  display: inline-block;
  background: #33a16e;
  text-indent: -1000px;
  overflow: hidden;
}
.preloader .loader {
  width: 100%;
  height: 3px;
  border: none;
  border-radius: none;
  position: absolute;
  top: 0;
  left: 0;
}
.preloader .loader:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  z-index: 3;
  position: absolute;
  top: 0;
  left: 0;
}
.preloader .trackbar {
  width: 100%;
  height: 100%;
  border-radius: 0;
  color: #fff;
  text-align: center;
  position: relative;
  background: #808080;
  opacity: 0.99;
}
.preloader .loadbar {
  width: 0%;
  height: 100%;
  background: #33a16e;
  box-shadow: 0px 0px 10px #33a16e;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  animation: flicker 5s infinite;
  overflow: hidden;
}

/* PAGE LOADED */
.page-loaded {
  overflow: inherit;
}
.page-loaded .preloader {
  left: 100%;
  transition-delay: 0.5s;
}
.page-loaded .preloader .inner {
  left: 100%;
}
.page-loaded .navbar {
  transform: translateY(0);
}
.page-loaded .header {
  margin: 0;
}
.page-loaded .header .slider {
  transform: scale(1);
  opacity: 1;
}
.page-loaded .header .slider .gallery-thumbs {
  transform: translateX(0);
  opacity: 1;
}

/* TRANSITION OVERLAY */
.transition-overlay {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 13;
  visibility: hidden;
}
.transition-overlay .black-layer {
  width: 100%;
  height: 100%;
  position: absolute;
  left: -100%;
  top: 0;
  z-index: 3;
  background: #000;
  -webkit-transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
  -moz-transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
  -o-transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
  transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
  /* custom */
  -webkit-transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
  -moz-transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
  -o-transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
  transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
  /* custom */
}
.transition-overlay .green-layer {
  width: 100%;
  height: 100%;
  position: absolute;
  left: -100%;
  top: 0;
  z-index: 2;
  background: #33a16e;
  -webkit-transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
  -moz-transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
  -o-transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
  transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
  /* custom */
  -webkit-transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
  -moz-transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
  -o-transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
  transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
  /* custom */
}
.transition-overlay.open {
  visibility: visible;
}
.transition-overlay.open .green-layer {
  left: 0;
  transition-delay: 0s;
}
.transition-overlay.open .black-layer {
  left: 0;
  transition-delay: 0.4s;
}

/* SANDWICH BUTTON */
.sandwich-btn {
  width: 46px;
  height: 46px;
  float: right;
  position: relative;
  cursor: pointer;
  border-radius: 50%;
}
.sandwich-btn span {
  display: block;
  height: 2px;
  width: 18px;
  background: #fff;
  opacity: 1;
  position: absolute;
  right: 8px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}
.sandwich-btn span:nth-child(1) {
  top: 12px;
}
.sandwich-btn span:nth-child(2) {
  top: 20px;
}
.sandwich-btn.open span:nth-child(1) {
  top: 16px;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}
.sandwich-btn.open span:nth-child(2) {
  top: 16px;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

/* NAVIGATION MENU */
.navigation-menu {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 8;
  visibility: hidden;
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -ms-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}
.navigation-menu .black-layer {
  width: 100%;
  height: 100%;
  position: absolute;
  left: -100%;
  top: 0;
  z-index: 3;
  background: #000;
  -webkit-transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
  -moz-transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
  -o-transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
  transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
  /* custom */
  -webkit-transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
  -moz-transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
  -o-transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
  transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
  /* custom */
}
.navigation-menu .green-layer {
  width: 100%;
  height: 100%;
  position: absolute;
  left: -100%;
  top: 0;
  z-index: 2;
  background: #33a16e;
  -webkit-transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
  -moz-transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
  -o-transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
  transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
  /* custom */
  -webkit-transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
  -moz-transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
  -o-transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
  transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
  /* custom */
}
.navigation-menu .inner {
  color: #fff;
  position: relative;
  z-index: 4;
  text-align: center;
  -webkit-transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
  -moz-transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
  -o-transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
  transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
  /* custom */
  -webkit-transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
  -moz-transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
  -o-transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
  transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
  /* custom */
  opacity: 0;
  transform: scale(1.1);
}
.navigation-menu .inner ul {
  display: block;
  margin: 0;
  padding: 0;
}
.navigation-menu .inner ul li {
  display: block;
  margin: 0;
  padding: 0;
  position: relative;
}
.navigation-menu .inner ul li:hover ul {
  opacity: 1;
  visibility: visible;
}
.navigation-menu .inner ul li ul {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  position: absolute;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.95);
  text-align: center;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -ms-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
  transition-delay: 0s !important;
}
.navigation-menu .inner ul li ul li {
  margin: 0 20px;
  padding: 0;
  list-style: none;
  position: static;
}
.navigation-menu .inner ul li ul li a {
  float: left;
  font-size: 18px;
}
.navigation-menu .inner ul li ul li a:before {
  display: none;
}
.navigation-menu .inner ul li ul li a:hover {
  color: #33a16e;
}
.navigation-menu .inner ul li a {
  font-size: 50px;
  font-weight: 800;
  color: #fff;
  position: relative;
}
.navigation-menu .inner ul li a:before {
  content: "";
  width: 0;
  height: 10px;
  position: absolute;
  left: 0;
  bottom: 12px;
  background: #33a16e;
  z-index: -1;
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -ms-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}
.navigation-menu .inner ul li a:hover {
  text-decoration: none;
}
.navigation-menu .inner ul li a:hover:before {
  width: 100%;
}
.navigation-menu .inner address {
  margin-top: 50px;
  font-size: 18px;
  font-family: "Fjalla One", sans-serif;
}
.navigation-menu.open {
  visibility: visible;
}
.navigation-menu.open .green-layer {
  left: 0;
  transition-delay: 0s;
}
.navigation-menu.open .black-layer {
  left: 0;
  transition-delay: 0.4s;
}
.navigation-menu.open .inner {
  opacity: 1;
  transition-delay: 0.5s;
  transform: scale(1);
}


/* HEADER */
.header {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  position: fixed;
  left: 0;
  top: 0;
}

/* SOCIAL MEDIA */
.social-media {
  width: 38px;
  position: absolute;
  z-index: 7;
  right: 60px;
  top: 200px;
  text-align: center;
  margin: 0;
  padding: 0;
}
.social-media li {
  width: 100%;
  float: left;
  display: block;
  padding: 0;
  list-style: none;
}
.social-media li a {
  width: 100%;
  float: left;
  color: #fff;
  font-size: 13px;
  margin: 10px 0;
}
.social-media li a:hover {
  color: #33a16e;
}

/* SCROLL DOWN */
.scroll-down {
  width: 1px;
  height: 90px;
  position: absolute;
  right: 63px;
  bottom: 30px;
  z-index: 2;
}
.scroll-down b {
  width: 100px;
  font-size: 10px;
  font-weight: 600;
  color: #fff;
  transform-origin: left;
  margin-left: -15px;
  margin-top: 0;
  transform: rotate(90deg);
  float: left;
}
.scroll-down span {
  display: block;
  position: relative;
  padding-top: 79px;
  text-align: center;
}

.scroll-down span::before {
  -webkit-animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite;
  -moz-animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite;
  -o-animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite;
  animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite;
}

.scroll-down span::before {
  position: absolute;
  top: 0px;
  left: 50%;
  margin-left: -0.5px;
  width: 1px;
  height: 90px;
  background: #fff;
  content: "";
}

/* NAVBAR */
.navbar {
  width: 100%;
  height: 78px;
  display: flex;
  flex-wrap: wrap;
  padding: 20px 60px;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 11;
  background: #131b37;

  /* Transición para mostrar/ocultar */
  -webkit-transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
  -moz-transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
  -o-transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
  transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
  transition-delay: 0.8s;
}

/* Logo */
.navbar .logo {
  margin-left: 0;
  margin-right: 30px;
  display: flex;
  align-items: center;
}
.navbar .logo img {
  height: 45px;
}

/* Email y contacto */
.navbar .email-us {
  margin-left: 0;
  margin-right: auto;
  color: #fff;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px; /* espacio entre elementos */
  white-space: nowrap; /* evitar saltos */
}

.navbar .email-us a {
  color: #808080;
  text-decoration: underline;
}
.navbar .email-us a:hover {
  color: #fff;
}
.navbar .email-us a span {
  color: #fff;
  text-decoration: underline;
}

/* Imagen bandera dentro de email-us */
email-flag {
  display: flex;
  align-items: center;
  gap: 8px; /* espacio entre el correo y la bandera */
}

.email-flag a {
  text-decoration: none;
  color: #333;
  font-size: 14px;
}

.flag {
  height: 16px;
  padding-left: 6px;
}

/* Otros elementos, como idiomas */
.navbar .languages {
  margin-right: 50px;
  font-family: "Fjalla One", sans-serif;
}
.navbar .languages a {
  float: left;
  margin-left: 10px;
  color: #808080;
  font-size: 14px;
}
.navbar .languages a:hover {
  color: #33a16e;
  text-decoration: none;
}
.navbar .languages a.active {
  color: #fff;
}

/* Menú hamburguesa */
.navbar .sandwich-nav {
  margin-right: 0;
  display: flex;
  align-items: center;
}
.navbar .sandwich-nav b {
  font-size: 14px;
  line-height: 38px;
  color: #fff;
  font-weight: 400;
  font-family: "Fjalla One", sans-serif;
}
.navbar .sandwich-nav .circle {
  width: 38px;
  height: 38px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  margin-left: 10px;
  position: relative;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  float: right;
}
.navbar .sandwich-nav .circle.open {
  border-color: #fff;
  background: #fff;
}
.navbar .sandwich-nav .circle.open span {
  background: #000;
}

/* RESPONSIVE: tablets y móviles */
@media (max-width: 900px) {
  .navbar {
    padding: 15px 30px;
    height: auto;
    flex-wrap: nowrap;
  }

  /* Email ajustado para pantallas chicas */
  .navbar .email-us {
    font-size: 13px;
    gap: 6px;
    white-space: normal; /* permitir salto si es necesario */
  }

  .navbar .email-us img.flag {
    width: 18px;
  }

  /* Logo más pequeño */
  .navbar .logo img {
    height: 40px;
  }
}

@media (max-width: 600px) {
  .navbar {
    padding: 10px 20px;
    height: auto;
    flex-wrap: nowrap;
  }

  /* Email para móviles */
  .navbar .email-us {
    font-size: 12px;
    gap: 4px;
    white-space: normal;
  }

  .navbar .email-us img.flag {
    width: 16px;
  }

  .navbar .logo img {
    height: 35px;
  }

  /* Ajustar sandwich-nav para móviles */
  .navbar .sandwich-nav b {
    font-size: 12px;
    line-height: 28px;
  }
  .navbar .sandwich-nav .circle {
    width: 32px;
    height: 32px;
    margin-left: 8px;
  }
}

 .navigation-menu .inner ul li a {
  font-family: "Poppins", sans-serif;
  font-size: 16px;
}

/* SLIDER */
.header {
  margin: 0;
}
.header .slider {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  transform: scale(1.4);
  -webkit-transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
  -moz-transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
  -o-transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
  transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
  /* custom */
  -webkit-transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
  -moz-transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
  -o-transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
  transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
  /* custom */
  transition-delay: 0.6s;
  opacity: 0;
}
.header .slider:after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}
.header .gallery-top {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  background: #000;
}
.header .gallery-top .swiper-wrapper {
  opacity: 0.6;
}
.header .gallery-top .swiper-wrapper .slide-inner {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.header .gallery-thumbs {
  height: 60%;
  position: absolute;
  left: 60px;
  top: 20%;
  z-index: 2;
  overflow: hidden;
  transform: translateX(-100px);
  opacity: 0;
  -webkit-transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
  -moz-transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
  -o-transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
  transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
  /* custom */
  -webkit-transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
  -moz-transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
  -o-transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
  transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
  /* custom */
  transition-delay: 0.8s;
}
.header .gallery-thumbs .swiper-slide {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 90px;
  color: #808080;
  font-weight: 700;
}
.header .gallery-thumbs .swiper-slide.swiper-slide-active {
  color: #fff;
}
.header .gallery-thumbs .swiper-slide.swiper-slide-active a {
  display: block;
}
.header .gallery-thumbs .swiper-slide a {
  font-size: 14px;
  display: none;
  float: right;
  color: #33a16e;
  font-weight: 600;
  margin-bottom: 0;
  margin-top: -20px;
}
.header .gallery-thumbs .swiper-slide a:hover {
  text-decoration: none;
}
.header .gallery-thumbs .swiper-slide a:hover .plus {
  color: #000;
  background: #fff;
}
.header .gallery-thumbs .swiper-slide a .plus {
  width: 30px;
  height: 30px;
  display: inline-block;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  margin-left: 6px;
  text-align: center;
  line-height: 27px;
  color: #fff;
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -ms-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}

.header .swiper-pagination {
  width: auto;
  position: absolute;
  left: 60px;
  bottom: 30px;
  color: #fff;
  z-index: 99;
}

.header .swiper-pagination span:first-child {
  font-size: 56px;
  height: 50px;
  line-height: 50px;
  float: left;
  overflow: hidden;
  padding-top: 3px;
  font-weight: 600;
}

.header .swiper-pagination span:last-child {
  font-size: 14px;
}

.header .swiper-pagination span:before {
  content: "0";
}

/* PARTICLES MASK */
.particles-mask {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  background: url(../images/pattern-bg2.png) center no-repeat #131313;
  background-size: auto 100% !important;
  padding: 0 100px;
}
.particles-mask .inner {
  width: 100%;
}
.particles-mask .inner .masker {
  width: 100%;
  overflow: hidden;
  position: relative;
}
.particles-mask .inner .masker h1 {
  display: inline-block;
  margin-bottom: 15px;
  font-size: 12vw;
  font-weight: 800;
  line-height: 1;
  color: #fff;
  position: relative;
}
.particles-mask .inner .masker h1:before {
  content: attr(data-text);
  position: absolute;
  left: -2px;
  text-shadow: 1px 0 blue;
  top: 0;
  color: white;
  overflow: hidden;
  clip: rect(0, 900px, 0, 0);
  animation: noise-anim-2 3s infinite linear alternate-reverse;
}
.particles-mask .inner .masker h1:after {
  content: attr(data-text);
  position: absolute;
  left: 2px;
  text-shadow: -1px 0 red;
  top: 0;
  color: white;
  overflow: hidden;
  clip: rect(0, xw00px, 0, 0);
  animation: noise-anim 2s infinite linear alternate-reverse;
}
.particles-mask .inner h5 {
  color: #fff;
  font-weight: 300;
  font-size: 20px;
  padding: 0 30%;
  line-height: 30px;
  margin-bottom: 40px;
}
.particles-mask .inner a {
  height: 58px;
  line-height: 56px;
  display: inline-block;
  border: 1px solid #fff;
  color: #fff;
  padding: 0 45px;
  font-size: 12px;
  font-weight: 600;
}
.particles-mask .inner a:hover {
  background: #33a16e;
  color: #fff;
  border-color: #33a16e;
  text-decoration: none;
}
.particles-mask #particles-js {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  mix-blend-mode: darken;
}

/* MOTION BLUR */
.motion-blur {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  position: absolute;
  left: 0;
  top: 0;
}
.motion-blur canvas {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.motion-blur .inner {
  display: inline-block;
  position: relative;
  z-index: 2;
  text-align: center;
}
.motion-blur .inner h1 {
  font-size: 10vw;
  font-weight: 800;
  color: #fff;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #fff;
  line-height: 1;
  margin-bottom: 20px;
}
.motion-blur .inner h5 {
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 40px;
}
.motion-blur .inner a {
  width: 48px;
  height: 48px;
  line-height: 46px;
  display: inline-block;
  text-align: center;
  color: #fff;
  border-radius: 50%;
  font-size: 24px;
  font-weight: 300;
  border: 2px solid #fff;
}
.motion-blur .inner a:hover {
  background: #fff;
  color: #000;
  text-decoration: none;
}

/* ANIMATION BG*/

/* FONDO CON PARALLAX */
.animation-bg {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url(../images/servicios.png) center no-repeat #131313;
  background-size: cover;
  text-align: center;
}

/* CAPA INTERNA CON PARALLAX */
.animation-bg .inner {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
}

/* IMAGEN TIPOGRAFÍA CON POSICIÓN ABSOLUTA Y RESPONSIVE */
.animation-bg .inner img.typography-img {
  position: absolute;
  top: 80%;                     /* Mueve hacia abajo */
  left: 40%;
  transform: translate(-50%, -50%);
  width: 400px;                 /* Tamaño base en desktop */
  max-width: 90vw;
  height: auto;
}

/* TABLETAS */
@media (max-width: 991px) {
  .animation-bg .inner img.typography-img {
    width: 300px; /* más pequeño en tablets */
    top: 80%;     /* aún más abajo si es necesario */
     left: 60%;
  }
}

/* CELULARES */
@media (max-width: 600px) {
  .animation-bg .inner img.typography-img {
    width: 250px; /* más pequeño en móviles */
    top: 80%;     /* ajustar posición si es necesario */
     left: 50%;
  }
}





/* VIDEO HERO */
.video-hero {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  position: absolute;
  left: 0;
  top: 0;
}
.video-hero .inner {
  display: inline-block;
  position: relative;
  z-index: 2;
  text-align: center;
}
.video-hero .inner h1 {
  font-size: 10vw;
  font-weight: 800;
  color: #fff;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #fff;
  line-height: 1;
  margin-bottom: 20px;
}
.video-hero .inner h5 {
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 40px;
}
.video-hero a {
  height: 58px;
  line-height: 56px;
  display: inline-block;
  border: 1px solid #fff;
  color: #fff;
  padding: 0 45px;
  font-size: 12px;
  font-weight: 600;
}
.video-hero a:hover {
  background: #33a16e;
  color: #fff;
  border-color: #33a16e;
  text-decoration: none;
}

/* PAGE HEADER */
.page-header {
  width: 100%;
  height: 600px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  position: relative;
  background: #000;
  position: fixed;
  left: 0;
  top: 0;
}
.page-header:after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}
.page-header .inner {
  width: 100%;
  padding: 0 60px;
  margin-top: 39px;
  position: relative;
  z-index: 3;
}
.page-header .inner h2 {
  font-size: 8em;
  font-weight: 800;
  line-height: 1;
  color: #fff;
  position: relative;
}
.page-header .inner h2:before {
  content: attr(data-text);
  position: absolute;
  left: -2px;
  text-shadow: 1px 0 blue;
  top: 0;
  color: white;
  overflow: hidden;
  clip: rect(0, 900px, 0, 0);
  animation: noise-anim-2 3s infinite linear alternate-reverse;
}
.page-header .inner h2:after {
  content: attr(data-text);
  position: absolute;
  left: 2px;
  text-shadow: -1px 0 red;
  top: 0;
  color: white;
  overflow: hidden;
  clip: rect(0, xw00px, 0, 0);
  animation: noise-anim 2s infinite linear alternate-reverse;
}
.page-header .inner p {
  font-size: 26px;
  line-height: 40px;
  color: #fff;
  font-weight: 300;
  margin-bottom: 0;
  padding-right: 40%;
}

.page-header-spacing {
  width: 100%;
  height: 600px;
  display: flex;
  flex-wrap: nowrap;
}

.video-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  z-index: -1;
}

.email-us {
  display: flex;
  align-items: center;
  gap: 8px; /* separación entre elementos */
  font-weight: 600;
  font-size: 16px;
  color: #333;
}

/* Imagen bandera */
.email-us .flag {
  width: 24px;
  height: auto;
  border-radius: 2px; /* opcional, bordes redondeados */
}

/* Enlace correo */
.email-us a {
  color: #007BFF;
  text-decoration: none;
  margin-left: 4px;
  font-weight: normal;
}

.email-us a:hover {
  text-decoration: underline;
}

/* Responsive: en pantallas pequeñas apilar y ajustar tamaño */
@media (max-width: 600px) {
  .email-us {
    flex-direction: column;
    align-items: flex-start;
    font-size: 14px;
  }
  
  .email-us .flag {
    width: 20px;
  }

  .email-us a {
    margin-left: 0;
    word-break: break-word; /* para evitar que el correo se salga */
  }
}
/* Para video */
.video-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.1;
  mix-blend-mode: luminosity;
  z-index: -1;
}

/* Para imagen */
.video-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}




/* WORKS */
.works {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding-top: 150px;
  padding-bottom: 50px;
}
.works.two-cols ul li {
  width: 50%;
}
.works.four-cols ul li {
  width: 25%;
}
.works.four-cols ul li figure figcaption {
  padding: 20px;
}
.works.four-cols ul li figure figcaption h3 {
  font-size: 20px;
  margin-left: -30px;
}
.works.four-cols ul li figure figcaption small {
  margin-bottom: 20px;
}
.works ul {
  width: 100%;
  float: left;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 20px; /* espacio entre las imágenes */
  grid-template-columns: 1fr; /* por defecto 1 columna */
  padding: 0;
  list-style: none;
}
.works ul li {
  width: 33.33333%;
  float: left;
  margin: 0;
  margin-bottom: 100px;
  padding: 0 5%;
  list-style: none;
}
.works ul li:nth-child(2n+2) {
  margin-top: 100px;
}
.works ul li:nth-child(3n+3) {
  margin-top: 50px;
}
.works ul li figure {
  position: relative;
  width: 100%;
  height: 100%;
  float: left;
  margin: 0;
  transform-style: preserve-3d;
}

.works ul li figure * {
  transition: 0.25s ease-in-out;
}

.works ul li figure:hover {
  margin: 0;
}

.works ul li figure:hover .thumb {
  box-shadow: 4px 21px 44px -13px rgba(0, 0, 0, 0.75);
}

.works ul li figure:hover figcaption {
  text-shadow: 2px 10px 10px rgba(0, 0, 0, 0.35);
}

.works ul li figure:hover figcaption a,
.works ul li figure:hover figcaption .brand {
  opacity: 1;
}

.works ul li figure .thumb {
  width: 100%;
  display: block;
  height: auto;
}

.works ul li figure figcaption {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 20px 30px 40px; /* menos padding bottom para mejor espacio */
  
  box-sizing: border-box;
  transform: translateZ(1px);
  display: flex;
  flex-direction: column;
  align-items: center; /* centrar contenido */
  color: #fff;
}

.works ul li figure figcaption .brand {
  max-width: 40%; /* control de tamaño relativo al contenedor */
  height: auto; /* altura automática para mantener proporción */
  margin-bottom: 20px;
  opacity: 0;
  transition: opacity 0.25s ease-in-out;
}

.works ul li figure figcaption h3 {
  font-weight: 800;
  margin: 0 0 10px 0; /* sin margin-left negativo */
  font-size: 1.2rem;
  text-align: center;
}

.works ul li figure figcaption small {
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 20px;
  display: block;
  text-align: center;
}

.works ul li figure figcaption a {
  display: inline-block;
  color: #fff;
  font-size: 0.9rem;
  font-family: "Fjalla One", sans-serif;
  border-bottom: 2px solid #fff;
  padding-bottom: 2px;
  opacity: 0;
  transition: opacity 0.25s ease-in-out;
  text-align: center;
}

.works ul li figure figcaption a:hover {
  text-decoration: none;
}

/* Opcional: para hacerlo aún más responsivo, puedes agregar un media query */

@media (max-width: 600px) {
  .works ul li figure figcaption .brand {
    max-width: 60%; /* logo un poco más grande en pantallas pequeñas */
  }
  .works ul li figure figcaption h3 {
    font-size: 1rem;
  }
  .works ul li figure figcaption small {
    font-size: 0.7rem;
  }
  .works ul li figure figcaption a {
    font-size: 0.8rem;
  }
}

/* WORKS FILTER */
.filter-bar {
  width: 100%;
  float: left;
  margin-bottom: 60px;
}
.filter-bar .works-filter {
  float: left;
  line-height: 20px;
  margin: 0;
  padding: 0;
}
.filter-bar .works-filter li {
  float: left;
  margin: 0;
  margin-right: 10px;
  padding: 0;
  list-style: none;
  opacity: 0;
  transform: translateY(10px);
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -ms-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}
.filter-bar .works-filter li:nth-child(1) {
  transition-delay: 0s;
}
.filter-bar .works-filter li:nth-child(2) {
  transition-delay: 0.05s;
}
.filter-bar .works-filter li:nth-child(3) {
  transition-delay: 0.1s;
}
.filter-bar .works-filter li:nth-child(4) {
  transition-delay: 0.15s;
}
.filter-bar .works-filter li:nth-child(5) {
  transition-delay: 0.2s;
}
.filter-bar .works-filter li:nth-child(6) {
  transition-delay: 0.25s;
}
.filter-bar .works-filter li:nth-child(7) {
  transition-delay: 0.3s;
}
.filter-bar .works-filter li:nth-child(8) {
  transition-delay: 0.35s;
}
.filter-bar .works-filter li:nth-child(9) {
  transition-delay: 0.4s;
}
.filter-bar .works-filter li a {
  float: left;
  font-size: 13px;
  color: #fff;
  font-family: "Fjalla One", sans-serif;
  border-bottom: 2px solid transparent;
  padding: 0 2px;
  padding-bottom: 2px;
}
.filter-bar .works-filter li a.current {
  color: #33a16e;
  border-bottom: 2px solid #33a16e;
}
.filter-bar .works-filter li a:hover {
  color: #33a16e;
  text-decoration: none;
}
.filter-bar .works-filter.active li {
  opacity: 1;
  transform: translateY(0);
}

.filter-btn {
  float: right;
}
.filter-btn span {
  float: right;
  line-height: 22px;
  font-weight: 600;
  font-size: 13px;
  margin-right: 20px;
  color: #fff;
}

/* RESPOSINVEN GSERICIOS */



/* CASE DETAIL */
.case-details {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  background: #fff;
}
.case-details figure {
  width: 100%;
  float: left;
  margin-bottom: 30px;
}
.case-details figure img {
  width: 100%;
  float: left;
}
.case-details h3 {
  font-size: 80px;
  font-weight: 800;
  margin-bottom: 20px;
  margin-top: 150px;
}
.case-details h6 {
  font-weight: 300;
  font-size: 24px;
  line-height: 34px;
  padding-right: 40%;
  margin-bottom: 20px;
}
.case-details p {
  color: #808080;
}
.case-details p:last-child {
  margin-bottom: 60px;
}
.case-details .case-navbar {
  width: 100%;
  float: left;
  margin-bottom: 0;
  background: #fff;
  padding: 0;
  text-align: center;
  z-index: 2;
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  position: sticky;
  top: 0;
}
.case-details .case-navbar ul {
  width: 100%;
  float: left;
  padding: 30px 0;
  margin: 0;
}
.case-details .case-navbar ul li {
  display: inline-block;
  margin: 0 30px;
  padding: 0;
  list-style: none;
}
.case-details .case-navbar ul li a {
  font-weight: 600;
}
.case-details .case-navbar ul li a:hover {
  color: #33a16e;
  text-decoration: none;
}

/* FEATURES CONTENT */
.features-content {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding-top: 150px;
  padding-bottom: 80px;
  background: #fff;
}
.features-content h2 {
  font-size: 50px;
  font-weight: 800;
  margin-bottom: 40px;
  margin-top: -10px;
}
.features-content h6 {
  font-size: 17px;
  font-weight: 300;
  line-height: 30px;
  color: #808080;
  padding-right: 20%;
}
.features-content h5 {
  font-size: 20px;
  font-weight: 300;
  color: #808080;
  margin-top: -20px;
  margin-bottom: 80px;
}
.features-content img {
  height: 55px;
  margin-bottom: 20px;
}
.features-content h4 {
  font-weight: 800;
  font-size: 15px;
  margin-bottom: 20px;
}
.features-content p {
  font-size: 14px;
  color: #808080;
  line-height: 22px;
}
.features-content ul {
  width: 100%;
  float: left;
  margin: 0;
  margin-top: -13px;
  margin-bottom: 70px;
  padding: 0;
}
.features-content ul li {
  width: 100%;
  float: left;
  margin: 0;
  padding: 5px 0;
  list-style: none;
  font-size: 14px;
  color: #808080;
}
.features-content a {
  font-size: 12px;
  color: #33a16e;
  display: inline-block;
  font-weight: 600;
  margin-bottom: 70px;
  position: relative;
}
.features-content a:before {
  content: "";
  width: 0;
  height: 2px;
  background: #33a16e;
  position: absolute;
  left: 0;
  bottom: 0;
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -ms-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}
.features-content a:hover {
  text-decoration: none;
}
.features-content a:hover:before {
  width: 100%;
}

/* Solo afecta a .listing-section y sus hijos */
.listing-section {
  width: 100%;
  background: linear-gradient(135deg, #1c1c1e, #2c2c2e);
  padding: 100px 20px;
  color: #fff;
  font-family: 'Segoe UI', sans-serif;
}

.listing-section .listing-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 60px;
}

.listing-section .info-box {
  display: flex;
  align-items: flex-start;
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  padding: 40px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  gap: 30px;
  flex-wrap: wrap;
}

.listing-section .info-title {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  min-width: 150px;
}

.listing-section .info-title h3 {
  font-size: 32px;
  font-weight: bold;
  margin: 0;
  color: #00d8ff;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.listing-section .info-title .line {
  height: 60px;
  width: 4px;
  background-color: #00d8ff;
  margin-left: 15px;
  border-radius: 2px;
}

.listing-section .info-text {
  flex: 1;
  font-size: 18px;
  line-height: 1.7;
  text-align: justify;
}

@media (max-width: 768px) {
  .listing-section .info-box {
    flex-direction: column;
    align-items: flex-start;
  }

  .listing-section .info-title {
    margin-bottom: 20px;
  }

  .listing-section .info-title .line {
    height: 4px;
    width: 50px;
    margin-left: 10px;
  }
}


/* FULL MEDIA CONTENT */
.full-media-content {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  background-size: cover !important;
  position: relative;
}
.full-media-content .video-bg video {
  opacity: 1;
}
.full-media-content .sides {
  flex: 1;
  padding: 150px 0;
  position: relative;
}
.full-media-content .sides figure {
  width: 50%;
  position: relative;
  z-index: 2;
  float: right;
  margin-bottom: 0;
  margin-right: -40px;
  border: 10px solid #fff;
}
.full-media-content .sides figure img {
  width: 100%;
}
.full-media-content .inner-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
}
.full-media-content .inner-content .inner {
  max-width: 700px;
  padding: 0 100px;
}
.full-media-content .inner-content h5 {
  font-family: "Fjalla One", sans-serif;
  font-size: 20px;
  line-height: 1;
  text-transform: uppercase;
}
.full-media-content .inner-content h2 {
  font-weight: 800;
  font-size: 60px;
  margin-bottom: 40px;
}
.full-media-content .inner-content p {
  color: #fff;
  margin-bottom: 40px;
  font-weight: 300;
}
.full-media-content .inner-content a {
  height: 58px;
  line-height: 54px;
  display: inline-block;
  border: 2px solid #fff;
  color: #fff;
  font-weight: 600;
  font-size: 12px;
  padding: 0 50px;
}
.full-media-content .inner-content a:hover {
  background: #fff;
  color: #000;
  text-decoration: none;
}

/* INTRODCUTION */
.introduction {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 150px 0;
  background: #fff;
}
.introduction h2 {
  font-weight: 800;
  margin-bottom: 30px;
}
.introduction h6 {
  font-weight: 600;
  margin-bottom: 10px;
}
.introduction h4 {
  font-weight: 300;
  margin-bottom: 30px;
  margin-top: 5px;
  line-height: 34px;
}
.introduction p {
  display: block;
  color: #808080;
  line-height: 26px;
}
.introduction p:last-child {
  margin-bottom: 0;
}
.introduction p span {
  position: relative;
  display: inline-block;
}
.introduction p span:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 3px;
  width: 100%;
  height: 5px;
  mix-blend-mode: hard-light;
  background: #33a16e;
}

/* OUR TEAM */
.our-team {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding-top: 150px;
  background: #f3f3f3;
}
.our-team * {
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -ms-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}
.our-team figure {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  position: relative;
  margin: 0;
  overflow: hidden;
}
.our-team figure img {
  width: 100%;
  float: left;
  mix-blend-mode: multiply;
}
.our-team figure figcaption {
  width: 100%;
  text-align: center;
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 20px;
  opacity: 0;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
}
.our-team figure figcaption h4 {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 0;
}
.our-team figure figcaption small {
  font-size: 12px;
  color: #fff;
}
.our-team figure:hover {
  background: url(../images/team-splash.png) center no-repeat;
  background-size: cover;
}
.our-team figure:hover img {
  transform: translateY(20px);
}
.our-team figure:hover figcaption {
  opacity: 1;
}

/* NEWS */
.news {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 150px 0;
  background: #fff;
}
.news .post {
  width: 100%;
  float: left;
  margin-bottom: 60px;
}
.news .post.post-single {
  margin-bottom: 0;
}
.news .post.post-single .post-content .post-title {
  font-size: 60px;
  line-height: 70px;
}
.news .post.post-single p:last-child {
  margin-bottom: 0;
}
.news .post .post-image {
  width: 100%;
  float: left;
  margin-bottom: 30px;
}
.news .post .post-image img {
  width: 100%;
}
.news .post .post-content {
  width: 100%;
  float: left;
  padding: 0 50px;
}
.news .post .post-content .social-share {
  width: 100%;
  float: left;
  padding: 0;
  margin-bottom: 40px;
}
.news .post .post-content .social-share li {
  float: left;
  margin-right: 5px;
  padding: 0;
  list-style: none;
  text-align: center;
}
.news .post .post-content .social-share li.facebook a {
  background: #475993;
}
.news .post .post-content .social-share li.twitter a {
  background: #76a9ea;
}
.news .post .post-content .social-share li.google-plus a {
  background: #f34a38;
}
.news .post .post-content .social-share li.linkedin a {
  background: #0077b7;
}
.news .post .post-content .social-share li.youtube a {
  background: #f61c0d;
}
.news .post .post-content .social-share li a {
  width: 44px;
  height: 44px;
  line-height: 44px;
  float: left;
  background: #33a16e;
  color: #fff;
  border: none;
  border-radius: 0;
}
.news .post .post-content .author {
  width: 100%;
  float: left;
  margin-bottom: 30px;
}
.news .post .post-content .author img {
  height: 40px;
  float: left;
  margin-right: 15px;
  border-radius: 50%;
}
.news .post .post-content .author span {
  float: left;
  line-height: 40px;
  font-size: 13px;
  color: #808080;
}
.news .post .post-content .author span b {
  font-weight: 600;
}
.news .post .post-content .post-categories {
  width: 100%;
  float: left;
  font-size: 13px;
  margin: 0;
  padding: 0;
  margin-bottom: 10px;
}
.news .post .post-content .post-categories li {
  float: left;
  margin: 0;
  margin-right: 7px;
  padding: 0;
  list-style: none;
}
.news .post .post-content .post-categories li a {
  float: left;
  color: #808080;
  text-decoration: underline;
}
.news .post .post-content .post-categories li a:hover {
  color: #33a16e;
}
.news .post .post-content .post-title {
  display: block;
  font-weight: 800;
  font-size: 40px;
  line-height: 50px;
  margin-bottom: 20px;
}
.news .post .post-content h5 {
  font-weight: 600;
  color: #33a16e;
  margin-bottom: 15px;
}
.news .post .post-content .post-date {
  display: block;
  margin-bottom: 20px;
  color: green;
  font-weight: 600;
}
.news .post .post-content p {
  display: block;
  margin-bottom: 20px;
  color: #808080;
  line-height: 27px;
}
.news .post .post-content blockquote {
  width: 100%;
  display: block;
  background: #33a16e;
  padding: 20px;
  color: #fff;
}
.news .post .post-content blockquote p {
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  line-height: 30px;
}
.news .post .post-content blockquote h5 {
  color: #fff;
  font-weight: 400;
  font-family: "Fjalla One", sans-serif;
  margin: 0;
  text-transform: uppercase;
  opacity: 0.7;
}
.news .post .post-content ul {
  width: 100%;
  display: block;
  margin-bottom: 20px;
  padding-left: 20px;
}
.news .post .post-content ul li {
  color: #808080;
  margin: 0;
  padding: 4px 0;
}
.news .post .post-content .post-link {
  font-size: 15px;
  color: #33a16e;
  display: inline-block;
  font-family: "Fjalla One", sans-serif;
  font-weight: 400;
  margin-bottom: 70px;
  position: relative;
  padding-bottom: 3px;
}
.news .post .post-content .post-link:before {
  content: "";
  width: 100%;
  height: 2px;
  background: #33a16e;
  position: absolute;
  left: 0;
  bottom: 0;
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -ms-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}
.news .post .post-content .post-link:hover {
  text-decoration: none;
}
.news .post .post-content .post-link:hover:before {
  width: 0;
}

/* SAY HELLO */
.say-hello {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 150px 0;
  background: #fff;
}
.say-hello h3 {
  font-size: 50px;
  font-weight: 800;
  margin-bottom: 40px;
}
.say-hello .contact-box {
  width: 100%;
  float: left;
  margin-bottom: 30px;
}
.say-hello .contact-box span {
  display: block;
  color: #808080;
  font-size: 13px;
  font-weight: 600;
}
.say-hello .contact-box a {
  display: inline-block;
  color: #000;
}
.say-hello .map-link {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 40px;
  text-decoration: underline;
  color: #33a16e;
}
.say-hello .alert {
  width: 100%;
  float: left;
  border-radius: 0;
  border: none;
  padding: 30px 20px;
}
.say-hello .alert-danger {
  background: red;
  color: #fff;
}
.say-hello .alert-success {
  background: green;
  color: #fff;
}
.say-hello form {
  width: 100%;
  padding-right: 40%;
}
.say-hello form input[type=text] {
  width: 100%;
  float: left;
}
.say-hello form textarea {
  width: 100%;
  float: left;
}
.say-hello form label {
  font-size: 13px;
  color: #808080;
}
.say-hello #success, .say-hello #error {
  display: none;
}
.say-hello #success, .say-hello #error {
  float: left;
}
.say-hello #contact label.error {
  width: 100%;
  float: left;
  color: #f50c1a;
  margin-top: 10px;
}
.say-hello #contact input.error {
  width: 100%;
  border: 2px solid #f50c1a;
}
.say-hello #contact textarea.error {
  width: 100%;
  border: 2px solid #f50c1a;
}

/* LOGOS */
.logos {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 50px 0;
  background: #fff;
}
.logos * {
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -ms-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}
.logos ul {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  margin: 0;
  padding: 0;
}
.logos ul li {
  width: 20%;
  margin: 25px 0;
  padding: 0;
  list-style: none;
  text-align: center;
  position: relative;
}
.logos ul li:hover img {
  opacity: 0;
  transform: scale(1.1);
}
.logos ul li:hover h6 {
  opacity: 1;
  margin-top: -10px;
}
.logos ul li figure {
  margin: 0;
}
.logos ul li figure img {
  height: 80px;
}
.logos ul li figure h6 {
  width: 100%;
  height: 20px;
  line-height: 20px;
  position: absolute;
  top: 50%;
  margin-top: 0;
  font-size: 13px;
  font-weight: 600;
  opacity: 0;
}

/* FOOTER */
.footer {
  width: 100%;
  display: flex;
  color: #fff;
  background: url(../images/anim-hero.gif) center no-repeat #131313;
  text-align: center;
  padding-top: 150px;
  padding-bottom: 50px;
  position: relative;
}
.footer img {
  height: 55px;
  display: inline-block;
  margin-bottom: 20px;
}
.footer h2 {
  font-size: 60px;
  font-weight: 700;
  margin-bottom: 30px;
}
.footer h5 {
  font-family: "Fjalla One", sans-serif;
  text-transform: uppercase;
  margin-bottom: 50px;
  color: #808080;
}
.footer ul {
  display: inline-block;
  margin-bottom: 20px;
  padding: 0;
}
.footer ul li {
  float: left;
  margin: 0 10px;
  padding: 0;
  list-style: none;
}
.footer ul li a {
  font-size: 12px;
  color: #fff;
}
.footer ul li a:hover {
  color: #33a16e;
}
.footer span {
  display: block;
  font-size: 11px;
  color: #989898;
}

/* RESPONSIVE FIXES */

@media (max-width: 768px) {
  .footer {
    flex-direction: column !important;
    text-align: center !important;
    padding: 40px 20px !important;
  }

  .footer .container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* Logo más grande sin aumentar espacio */
  .footer img {
    max-width: 200px; /* más grande que antes */
    height: auto;
    margin-bottom: 10px;
    object-fit: contain;
  }

  /* Servicios en 2 filas */
  .footer .servicios-lista {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 100%;
    padding-left: 0;
    list-style: none;
    text-align: center;
    font-size: 16px;
    line-height: 1.8;
    margin: 0 auto;
  }

  .footer .servicios-lista li {
    width: 45%;
    margin: 5px 10px;
  }

.footer .redes-sociales {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  padding-left: 0;
  list-style: none;
  margin: 30px auto 0 auto;
  width: fit-content;
}


  .footer .redes-sociales li {
    display: inline-block;
  }

  .footer .redes-sociales li a {
    font-size: 24px;
    color: #fff;
    transition: color 0.3s ease;
  }

  .footer .redes-sociales li a:hover {
    color: #33a16e;
  }

  .footer h3, .footer h4 {
    font-size: 20px;
  }

  .footer div, .footer ul, .footer span {
    width: 100%;
    text-align: center;
  }

  .footer span {
    font-size: 12px;
  }
}

/* RESPONSIVE TABLET FIXES */
@media only screen and (max-width: 991px), only screen and (max-device-width: 991px) {
  input[type=text], input[type=search], input[type=email], input[type=password], input[type=submit], textarea {
    border-radius: 0 !important;
    box-shadow: none !important;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
  }

  .header .gallery-thumbs {
    height: 60%;
    top: 20%;
  }

  .header .gallery-thumbs .swiper-slide {
    font-size: 70px;
  }

  .works ul li {
    width: 50%;
  }

  .works.four-cols ul li {
    width: 33.33333%;
  }

  .features-content h6 {
    margin-bottom: 50px;
    margin-top: -30px;
  }

  .full-media-content {
    flex-direction: column;
  }

  .full-media-content .sides figure {
    float: none;
    margin: 0 auto;
  }

  .full-media-content .inner-content {
    flex: none;
  }

  .page-header .inner h2 {
    font-size: 5em;
  }

  .page-header .inner p {
    padding-right: 20%;
  }

  .say-hello form {
    padding-right: 0;
    width: auto;
  }

  .say-hello form .form-group:last-child {
    margin-bottom: 0;
  }
}
@media only screen and (max-width: 767px), only screen and (max-device-width: 767px) {
  .hide-mobile {
    display: none;
  }

  .navbar {
    padding: 20px 30px;
  }

}


  .navigation-menu .inner ul li a {
    font-size: 40px;
  }

  .navigation-menu .inner ul li ul li {
    margin: 0 15px;
  }

  .navigation-menu .inner address {
    font-size: 16px;
  }

  .header .swiper-pagination {
    left: 30px;
  }

  .header .gallery-thumbs {
    left: 30px;
    height: 30%;
    top: 35%;
  }

  .header .gallery-thumbs .swiper-slide {
    font-size: 50px;
  }

  .header .gallery-thumbs .swiper-slide a {
    margin-top: 0;
  }

  .particles-mask {
    padding: 0 30px;
  }

  .particles-mask .inner .masker h1 {
    font-size: 15vw;
  }

  .particles-mask .inner h5 {
    padding: 0;
  }

  .video-hero .inner h1 {
    font-size: 15vw;
  }

  .motion-blur .inner h1 {
    font-size: 14vw;
  }

  .page-header .inner {
    padding: 0 30px;
  }

  .page-header .inner h2 {
    font-size: 3em;
  }

  .page-header .inner p {
    font-size: 22px;
    line-height: 34px;
    padding-right: 0;
  }

  .introduction {
    padding: 80px 0;
  }

  .listing-content {
    padding: 80px 0;
  }

  .listing-content .mobile-spacing {
    margin-bottom: 50px;
  }

  .social-media {
    display: none;
  }

  .scroll-down {
    display: none;
  }

  .our-team {
    padding-top: 80px;
  }

  .works {
    padding-top: 80px;
    padding-bottom: 0;
  }


  .works ul li figure figcaption {
    padding-bottom: 30px;
  }

  .works.two-cols ul li {
    width: 100%;
  }

  .works.four-cols ul li {
    width: 100%;
  }

  .works.four-cols ul li figure figcaption {
    padding-bottom: 30px;
  }

  .features-content {
    text-align: center;
    padding-top: 80px;
    padding-bottom: 10px;
  }

  .features-content h2 {
    font-size: 40px;
  }

  .features-content h6 {
    padding-right: 0;
  }

  .full-media-content .sides {
    padding: 80px 0;
  }

  .full-media-content .sides figure {
    width: 50%;
    position: static;
    margin: 0 auto;
  }

  .full-media-content .inner-content .inner {
    max-width: 100%;
    padding: 0 30px;
  }

  .full-media-content .inner-content h2 {
    font-size: 44px;
  }

  .news {
    padding: 80px 0;
  }

  .news .post {
    margin-bottom: 10px;
  }

  .news .post .post-content {
    padding: 0;
  }

  .news .post .post-content .post-title {
    font-size: 30px;
    line-height: 40px;
  }

  .news .post.post-single .post-content .post-title {
    font-size: 36px;
    line-height: 46px;
  }

  .logos {
    padding: 30px 0;
  }

  .logos ul li {
    width: 33.33333%;
    margin: 25px auto;
  }

  .filter-bar {
    text-align: center;
  }

  .filter-bar .works-filter {
    width: 100%;
    float: left;
    margin-top: 20px;
    padding: 0 20px;
  }

  .filter-bar .works-filter li {
    float: none;
    display: inline-block;
    margin: 0 10px;
  }

  .filter-btn {
    float: none;
    margin: 0 auto;
    display: inline-block;
  }

  .case-details .case-navbar ul li {
    margin: 0 12px;
  }

  .case-details h3 {
    font-size: 60px;
  }

  .case-details h6 {
    padding-right: 0;
  }

  .say-hello {
    padding: 80px 0;
  }

  .say-hello h3 {
    font-size: 38px;
  }

  .footer {
    padding-top: 80px;
  }

  .footer h2 {
    font-size: 40px;
  }

.proceso-pasos {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.proyectos {
  padding: 60px 0;
}

.columna-izquierda {
  text-align: center;
}

.columna-izquierda img {
  border-radius: 10px;
  margin-bottom: 20px;
}

.columna-izquierda h2 {
  font-size: 28px;
  font-weight: bold;
  color: #333;
}

.pasos-columna .paso {
  display: flex;
  align-items: flex-start;
  margin-bottom: 25px;
  padding: 15px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0px 4px 10px rgba(0,0,0,0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pasos-columna .paso:hover {
  transform: translateY(-5px);
  box-shadow: 0px 6px 15px rgba(0,0,0,0.1);
}

.icono {
  font-size: 28px;
  color: #ff6f3c;
  margin-right: 15px;
}

.contenido h4 {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 8px;
}

.contenido p {
  font-size: 15px;
  color: #666;
}

.left-column img {
  margin-top: 120px; /* Ajusta el valor según lo que necesites */
}

.container h2 {
  margin-top: 40px;
  font-size: 2.2rem;            /* Tamaño grande */
  font-weight: bold;            /* Negrita */
  color: #131b37;               /* Azul profesional */
  text-transform: uppercase;    /* Mayúsculas */
  letter-spacing: 2px;          /* Espaciado entre letras */
  text-align: center;           /* Centrado */
  margin-bottom: 20px;          /* Espacio debajo */
  position: relative;
}

.container h3 {
  margin-top: 40px;
  font-size: 2.2rem;            /* Tamaño grande */
  font-weight: bold;            /* Negrita */
  color: #fff;               /* Azul profesional */
  text-transform: uppercase;    /* Mayúsculas */
  letter-spacing: 2px;          /* Espaciado entre letras */
  text-align: center;           /* Centrado */
  margin-bottom: 20px;        /* Espacio debajo */
  position: relative;
}


.container h2::after {
  content: '';
  display: block;
  width: 60px;                   /* Largo de la línea decorativa */
  height: 4px;                   /* Grosor */
  background-color: #fbbc05;     /* Amarillo dorado */
  margin: 8px auto 0;            /* Centrado y espacio */
  border-radius: 2px;            /* Bordes redondeados */
}

.our-team {
    padding: 40px 0;
}

@media (max-width: 992px) {
  .features-content h2 {
    padding-bottom: 30px;
  }
}

  /* SECION VISION Y MISION */

  /* Sección Misión y Visión */
.mv-section {
  background-color: #111;
  padding: 80px 0;
  color: #fff;
  width: 100%;
}

.mv-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 30px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
}


.mv-box {
  background-color: #1c1c1c;
  border-radius: 10px;
  padding: 30px;
  flex: 1 1 48%;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.mv-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(51, 161, 110, 0.3);
}

.mv-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.mv-header h3 {
  font-size: 24px;
  margin: 0;
  font-weight: 700;
}

.mv-line {
  height: 3px;
  width: 100%;
  background-color: #2e8b57; /* Verde oscuro */
  margin-left: 15px;
  border-radius: 2px;
}

.mv-box p {
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .mv-section .container {
    flex-direction: column;
  }

  .mv-box {
    flex: 1 1 100%;
  }

  .mv-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .mv-line {
    width: 50px;
    height: 3px;
    margin: 10px 0 0 0;
  }
}

/* Tablet */
@media (max-width: 992px) {
  .inner h2 {
    margin-top: 50px;
    font-size: 100px !important;
  }

  .inner p {
    font-size: 18px; /* un poco más pequeño */
    text-align: center; /* centrado */
  }
}

/* Celular */
@media (max-width: 600px) {
  .inner h2 {
    margin-top: 50px;
    font-size: 60px !important;
  }

  .inner p {
    font-size: 16px; /* más pequeño en móvil */
    text-align: center; /* centrado */
  }
}

/*NUEVA SECCION*/

.clean-service {
  background-color: #fff;
  padding: 80px 0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.clean-service .section-title {
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 15px;
  color: #2c3e50;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.clean-service .subtitle {
  font-size: 18px;
  color: #16a085;
  margin-bottom: 25px;
}

.clean-service .description {
  font-size: 16px;
  line-height: 1.7;
  color: #555;
  margin-bottom: 35px;
}

.clean-service .services-list ul {
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 20px 40px;
  justify-content: flex-start;
}

.clean-service .services-list ul li {
  font-size: 16px;
  color: #2d3436;
  position: relative;
  padding-left: 10px;
  font-weight: 500;
  transition: color 0.3s ease;
}

.clean-service .services-list ul li:hover {
  color: #16a085;
}




/*# sourceMappingURL=style.css.map */