@font-face {
    font-family: 'regular';
    src: url('fonts/OpenSans-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
  }
  @font-face {
    font-family: 'negrita';
    src: url("fonts/OpenSans-Bold.ttf");
}
  @font-face {
    font-family: 'papu';
    src: url('fonts/OpenSans-ExtraBold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
  }
  @font-face {
    font-family: 'semibold';
    src: url('fonts/OpenSans-SemiBold.ttf') format('truetype');
    
  }
  @keyframes aparecer{
    0%{
        opacity: 0%;  
    }20%{
      opacity: 0%;  
  }
    100%{
        opacity: 100%;
    }
}
@keyframes animacionColor{
  0%{
      background-color: rgba(0, 0, 0, 0.3);
      color:#ededed
  }
  100%{
      background-color: rgba(0, 0, 0, 0.5);
      color:#ededed
  }
}
@keyframes animacionColor2{
  0%{
      background-color: rgba(255, 255, 255, 0.2);
      color:#ededed
      
  }
  100%{
    background-color: rgba(242, 183, 5, 0.2);
      color: #212529;
  }
 
}
* {
    margin: 0;
    padding: 0;
    font-family:regular;
  }
  header {
    text-align: center;
    position: relative; 
    z-index: 1; 
  }
  

header {
  background-color: rgba(38, 35, 35, 0);
  padding: .8em; /* Espaciado interno */
  position: fixed; /* Fija el encabezado en la parte superior */
  width: 100%; /* Ocupa todo el ancho */
  z-index: 1000; /* Asegura que esté por encima del resto de contenido */
  transition: height 0.3s ease; /* Transición suave al cambiar la altura */
}

/* Estilos para el logo */
header img {
  height: 110px; /* Tamaño inicial del logo */
  transition: height 0.3s ease; /* Transición suave al cambiar el tamaño */
  margin-right: 20%;
}

/* Cuando te desplazas hacia abajo, el logo se hace más pequeño */
/* Cambia el tamaño del logo y/o otros estilos según tu preferencia */
/* Puedes ajustar el valor del height para que se adapte a tu diseño */
header.scrolled {
  background-color: #212529; /* Cambia el color de fondo cuando se desplaza */
  height: 90px; /* Cambia la altura del encabezado al desplazarse */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra sutil */
}

header.scrolled #logo{
  height: 60px; /* Tamaño más pequeño del logo al desplazarse */

}

/* Estilos para el menú de navegación */
nav {
    display: inline-block; /* Permite centrar el menú */
    margin: 0px; /* Ajusta el espacio a la derecha */
    padding: 0px;
  }
  
  nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
  
  nav ul li {
    display: inline-block;
  }
  
  nav ul li a {
    text-decoration: none;
    padding: 15px 10px;
    color: white;
    font-family: 'negrita', sans-serif;
    font-size: .8em;
    
  }
  nav ul li a:hover {
    text-decoration: none;
    color: #f2b705;
  }
  
  @keyframes tracking-in-expand{0%{letter-spacing:.4em;opacity:0}40%{opacity:.3}100%{opacity:1}}
  @keyframes blur-in{0%{filter:blur(30px);opacity:0}100%{filter:blur(0);opacity:1}}
  @keyframes scale-down-center{0%{transform:scale(1.5)}100%{transform:scale(1)}}
  @keyframes scale-pngs{0%{transform:scale(1)}50%{transform:scale(.98)}100%{transform:scale(1)}}
  @keyframes slide-top{0%{transform:translateY(0)}
                      50%{transform:translateY(-15%)}
                      100%{transform:translateY(0)}}
 

.tracking-in-expand-forward-top{animation:tracking-in-expand-forward-top 2.5s cubic-bezier(0.25, 0.1, 0.25, 1)} @keyframes tracking-in-expand-forward-top{0%{letter-spacing:.2em;transform:translateZ(700px) translateY(100px);opacity:0}20%{opacity:.6}100%{transform:translateZ(0) translateY(0);opacity:1}}

.troll { 
  animation:blur-in 1.5s cubic-bezier(0.25, 0.1, 0.25, 1), tracking-in-expand 1s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.oculto {
  display: none;
}

.scale-down-center{
  animation:scale-down-center 0.4s cubic-bezier(0.25, 0.1, 0.25, 1); 
} 
.anim{
  animation: scale-down-center 2s cubic-bezier(0.25, 0.1, 0.25, 1);
  animation-delay: 5s;
}

.aparecer{
  animation:aparecer 2.5s cubic-bezier(0.25, 0.1, 0.25, 1); 

} 


/* Definición de la animación de desplazamiento hacia arriba */
@keyframes fadeInUp {
  from {
      opacity: 0;
      transform: translateY(20px);
  }
  to {
      opacity: 1;
      transform: translateY(0);
  }
}

/* Definición de la animación de desplazamiento de abajo hacia arriba */
@keyframes slideInFromBottom {
  from {
      opacity: 0;
      transform: translateY(20px);
  }
  to {
      opacity: 1;
      transform: translateY(0);
  }
}

/* Aplica la animación al elemento que se mostrará */
.fadeInUp {
  animation-name: fadeInUp;
  animation-duration: 1s; /* Duración de la animación */
  animation-fill-mode: both;
}

/* Aplica la animación de abajo hacia arriba al enlace "Y MÁS" */
.slideInFromBottom {
  animation-name: slideInFromBottom;
  animation-duration: 1s; /* Duración de la animación */
  animation-fill-mode: both;
}


/* Estilo básico para la animación */
.typewriter h1 {
  overflow: hidden; 
  white-space: nowrap; /* Evita saltos de línea */
  margin: 0 auto;
  letter-spacing: .15em; /* Espaciado entre letras */
  animation: typing 2s steps(40, end); /* Duración de la animación */
}

/* Animación de escribir */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}


.btnPortaescaleras:hover{
  color: #a12025!important;
  animation: slide-top .5s cubic-bezier(0.25, 0.1, 0.25, 1); 

}
 .dropbtn{
    cursor: pointer;
    background-color: transparent;
    color:#ededed;
    box-shadow: none;
  }
  
  nav ul li button {
    text-decoration: none;
    padding: 15px 10px;
    color: white;
    font-family: 'negrita', sans-serif;
    box-shadow: none;
    font-size: .8em!important;
  }
  .btn:hover {
    color: #f2b705;
  }
  .btn:focus  {
    box-shadow: none!important;
  }
  
  .dropdown-content {
  
    background-color: #212529;
    margin-top: 15px;
    padding-top: 10px;
    box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }

  .dropdown-content a {
  font-size: 1em;
  width: 100%;
  color: #ededed!important;
  
  } 
  .dropdown-content a:hover {
    
    font-size: 1em;
    width: 100%;
    color: #ededed!important;
    background-color: #323538;
    } 

  /* Estilos para los botones con iconos */
  .icon-buttons {
    display: inline-block; /* Permite centrar los botones con iconos */
    
  }
  
  .icon-buttons a {
    margin-left: 10px;
    display: inline-block;
  }
  
  .icon-buttons img {
    height: 30px; /* Tamaño de los iconos */
    width: auto;
  }

  li {
    margin-left: 10px;
  }
  /* Estilos para el botón hamburguesa */
.hamburger-btn {
  display: none; /* Inicialmente oculto en dispositivos grandes */
  font-size: 1.5em;
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  padding: 10px;
  position: absolute;
  right: 10px;
  top: 10px;
}
  /* Estilos para el texto superpuesto */
.hero-text {
    text-align: center;
    color: #ffffff; /* Color del texto */
    background-image: url('img/fabricacion-de-portaequipajes.webp'); 
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    width: 100%;
    max-height: 100vw;
    height: 80vh;
 
  }
  
  .hero-text .fabrica-de {
    padding-top: 3.5em;
    font-size: 5em; /* Tamaño del texto más grande */
    margin-bottom: 10px; /* Espaciado inferior */
    
  }
  
  .hero-text p {
    font-size: 1.5em; /* Tamaño del texto más pequeño */
    margin-bottom:2em;
    font-family: regular;
    
  }

  .hero-text a {
    font-size: 1em; /* Tamaño del texto más pequeño */
    margin:2em;
    text-decoration: none;
    padding: .9em 2em;
  
  }
  
  .hero-text a:hover {
    background-color: #631517;
    color: #f2f2f2;
  }

  p {
    font-family: 'OpenSans', sans-serif;
    font-size: 1.2em;
  }

  .fabrica-de {
    font-family: 'papu', sans-serif;
    font-size: 2.5em;
    line-height: 1em;
  }
  /* Estilos para el texto superpuesto */
  .hero-text2 {
    text-align: center;
    color: #ffffff; /* Color del texto */
    background: url('img/portaequipajes-portaescaleras-para-utilitarios.webp') no-repeat center center fixed;
    background-size: cover;
    background-attachment: fixed;
    width: 100%;
    max-height: 60%;
    height: 40vh;
  }
  .portaequipajes-y-portaescaleras, .equipamiento-otros {
    padding-top: 5.7em;
    font-size: 2em; /* Tamaño del texto más grande */
    margin-bottom: 10px; /* Espaciado inferior */
    line-height: 1.5;
  }
  .hero-text3 {
    text-align: center;
    color: #212529;/* Color del texto */
    background-color: #212529;
    width: 100%;
    height: 16vh;
  }
section{
  width: 100%;
}
.article1{
  padding:7em;
  text-align: center;
}
.article1 p{
  font-size: 1.5em;
  line-height: 1.5em;
  padding: 0 7em 0 7em;
}
.article1 h2{
  font-size: 2em;
}
.article2 {
 display: flex;
  background-color: #f2f2f2;
  padding: 5em;
  justify-content: center;
  align-items: center;
}
.texto-logo2{
  width: 65%;
  box-sizing: border-box;
  justify-content: center;
  padding: 2em 3em;
  }
.article2-porta{
  display: flex;
  background-color: #f2f2f2;
  padding: 2em;
  justify-content: center;
  align-items: center;
}
.texto-logo2-porta{
width: 60%;
box-sizing: border-box;
justify-content: center;
}
.texto-logo2-porta .texto2{
  padding-top: 0px;
  margin-bottom: 5px;
  }
.logo2{
  padding: 2em;
  width: 35%;
}
.logo2 img{
  justify-content: center;
}
.texto2{
  color: grey ;
  line-height: 1.5em;
  padding-top: .5em;
}
.tic{
  margin:0 1em;
}
.nuestrosproductos h4{
  font-size: 1.2em;
  font-family: semibold;
  margin-top: .5em;
}
.nuestrosproductos h2{
  font-size: 1.7em;
  text-align: left;
}
.taller{
text-align: center;
background: url(img/banner-abajo.png) no-repeat center center;
background-size: cover;
padding: 3em 7em;
margin-top: 7em;
}
.taller2{
  text-align: center;
  background: url(img/banner-abajo.png) no-repeat center center;
  background-size: cover;
  padding: 3em 7em;
}
.taller button{
  text-align: center;
  background-color:rgba(0,0,0,0.8);
  padding: 1em 2em;
  border-color: #ffffff;
  font-family: semibold;
}
  .taller button img{
    width: 1em;
    margin-right: .5em;
}
.taller p{
  font-size: 1.3em;
  margin: 1.5 em 3em;
}
.taller h2{
  font-size: 2em;
}
footer {
  background-color: #8a2529;
  width: 100%;
  padding: 20px 0;
  text-align: center;
}
.bloque-redes {
  display: flex;
  justify-content: center;
}
.redes {
  background-color: rgba(255, 255, 255, 0.2);
  border: none;
  border-radius: 50%;
  margin: 0 10px;
  padding: 10px;
  cursor: pointer;
}
.redes:hover {
  animation: animacionColor2 .5s forwards;
  }
.redes img {
  opacity: 100%;
  width: 40px;
}
#footer {
  background: #212529;
  border-top: 4px solid #212529;
  font-size: 0.9em;
  margin-top: 50px;
  color: #ededed;
  position: relative;
  clear: both;
}
.boton-contactar{
  display:inline-block;
  width: 10em;
  padding-bottom: 10px;
  padding-top: 10px;
  text-align: center;
  font-family: semibold;
  text-decoration: none;
  background-color: rgba(0, 0, 0, 0.3);
  border: 2px solid #ededed;
}
.boton-contactar:hover{
  text-decoration: none;
  animation: animacionColor .5s forwards;
}
.boton-contactar img{
  width: 20px;
  padding-right: 3px;
}
.boton-contactar img:hover{
  filter: brightness(0) invert(1);
}
.moveteloco {
  text-align: left;
}
h2 {
  text-align: center;
}
.whatsapp-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 60px;
  height: 60px;
  background-color: #25d366; 
  border-radius: 50%; 
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
  transition: transform 0.3s ease;
  z-index:1000;
}
.whatsapp-btn:hover {
    filter: brightness(1.2); /* Modifica el brillo para hacerlo más amarillento */
}
.whatsapp-btn img {
  width: 30px; 
}
html .text-color-light, html .text-light {
  color: #FFF !important;
}
.textofooter {
  color: #777;
  line-height: 26px;
  margin: 0 0 20px;
}
.article3 {
  display: flex;
  padding: 0 .3em;
  justify-content: space-around;
  align-items: center;
}
.card {
  position: relative;
padding: 10px;
margin: 0;
border: none;
transition: transform 0.3s ease;
width: 30%;
}
.card:hover {
  transform: scale(1.03); 
}
.card h3{
  position: absolute;
  background-color: rgba(0,0,0,0.8);
  color: #ededed;
  bottom: 20%;
  font-size: 1em;
  padding: 15px 20px;
  font-family: negrita;
}
.botones {
  position: absolute;
  bottom: 11%;
  border-radius: 0px 0px 0px 0px;
  z-index: 1; 
  font-size: .8em;
  padding:6px 10px;
  cursor:pointer;
} 
.experteanos img {
  width: 21px;
}
.contactbtn {
  padding:14px;
}
.ourclients {
  margin-top: 100px;
  margin-left: auto;
  margin-right: auto;
  width:500px;
}
.marronazo {
  color: #212529;
}
.carrusel {
  position: relative;
  width: 500px; 
  overflow: hidden;
  margin-right: 30px;
}
.logos {
  display: flex;
  transition: transform 0.3s ease;
}
.logo {
  flex: 0 0 auto;
  width: 125px; 
  padding: 5px;
  overflow: hidden;
}
.logo img {
  width: 100%; 
  height: auto;
}
.flechita {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.5);
  border: none;
  cursor: pointer;
}
.anterior {
  left: 0;
}
.siguiente {
  right: 0;
}
.carrusel2 {
  position: relative;
  width: 500px; /* Ancho del carrusel */
  overflow: hidden;
}
.logos2 {
  display: flex;
  transition: transform 0.3s ease;
}
.anterior2 {
  left: 0;
}
.siguiente2 {
  right: 0;
}
.clientes {
  display: flex;
  margin-left: 130px;
  margin-right: 10px;
}
.ourclients h2 {
  font-size: 1.5em;
  text-align:left;
}
.nuestrosproductos {
  margin-top: 150px;
}
.color1{background-color: #ededed ;}
.color2{background-color: #212529 ;}
.titulo1{color: #a12025;}
.titulo2{color: #212529 ;}
.titulo3{color: grey;}
.titulo4{color: #ffffff;}
.titulo5{color: #f2b705;}
.titulo6{color: #e6b114;}
.strong1{font-family:papu;}
.font1{font-family:papu;}
.font2{font-family: negrita;}
.font3{font-family: semibold;}
.font4{font-family: regular;}
.fondo1 {background-color: #ffffff;}
.fondo2 {background-color: #ededed;}
.fondo3 {background-color: #212529;}
.fondo4{background-color: #ffbc1c;}
.fondo5{background-color: #c18f16;}
.fondo6{background-color: #a12025;}
.fondo7{background-color: #631517;}
.gallery-container {
margin-top: 10px;
margin-bottom: 10px;
  width: 100%;
  white-space: nowrap;
  align-items: center;
  text-align: center;
}
.gallery {
  display: inline-block;

}

.gallery img {
  max-width: 15.7%;
  height: auto;
  cursor: pointer;
  margin-right: 2px; /* Espacio entre imágenes */
  margin-left: 2px;
  transition: transform 1s ease; /* Efecto de transición suave de 1 segundo */
  transform-origin: center center; /* Punto de origen de la transformación */
}
.gallery img:hover {
  transform: scale(0.97); /* Ajusta el valor según el nivel de zoom deseado */
}
.gallery-container2 {
  margin-top: 10px;
  margin-bottom: 10px;
    width: 100%;
    white-space: initial;
    align-items: center;
    text-align: center;
    display: flex;
  }
.gallery2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* Centra las imágenes horizontalmente */
}
.gallery2 img {
  max-width: 18%;
  height: auto;
  cursor: pointer;
  margin: 8px; /* Espacio entre imágenes */
  transition: transform 1s ease; /* Efecto de transición suave de 1 segundo */
  transform-origin: center center; /* Punto de origen de la transformación */
}
.gallery2 img:hover {
  transform: scale(0.97); /* Ajusta el valor según el nivel de zoom deseado */
}
.pngs:hover{
  animation: scale-pngs 0.8s cubic-bezier(0.25, 0.1, 0.25, 1); 
}
/* Estilos para el modal */
.modal {
  position: fixed;
  z-index: 1;
  left: 0;
  top: 1;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.8);
  display: none;
  align-items: center;
  justify-content: center;
}

.modal-content {
  top:14%;
  display: block;
  margin: auto;
  max-width: 50%;
}

.modal-content img {

  max-width: auto;
  max-height: auto;
}

.prev,
.next {
  color: white;
  font-size: 30px;
  position: absolute;
  top: 50%;
  cursor: pointer;
  user-select: none;
}

.prev {
  left: 20px;
}

.next {
  right: 20px;
}

.prev, .next {
  padding:25px;
}

/* Estilos para ocultar la flecha derecha o izquierda si no hay más imágenes */
.prev.disabled,
.next.disabled {
  display: none;
}

.contacto-texto{
  text-decoration: none;
  color: #631517!important;
  font-family: semibold;
}
.contacto-texto:hover{
  text-decoration: none;
  color: #c18f16!important;
}
.icono-contacto{
  
  padding-right: 5px;
  padding-bottom: 5px;
}
ul li{
  list-style-type: none;
}

.textoOtros {
  padding: 45px;
  text-align: left;
  margin-left: 17%;
}

.lcdtm:hover {
  text-decoration: none;
}
#ymas {
 cursor: pointer; 
}
.puto{
  font-size: 1.6em;
}

.close {
  color: white;
  opacity: 100%;
  font-size: 45px;
  font-weight: bold;
  position: absolute;
  top: 16%;
  right: 22%;
  cursor: pointer;
  z-index: 1;
}
.close:hover {
  text-decoration: none;
  color: #ffc414;
}

/*---------------------------------------------------MEDIA QUERY LAPTOP-----------------------------------------------------*/
/*---------------------------------------------------MEDIA QUERY LAPTOP-----------------------------------------------------*/
/*---------------------------------------------------MEDIA QUERY LAPTOP-----------------------------------------------------*/
@media screen and (max-width:1366px){
  .hero-text{
    height: 50em;
    max-height: 50em;
  }
  .hero-text .fabrica-de {
    padding-top: 5em;
    font-size: 4em; /* Tamaño del texto más grande */
    margin-bottom: 10px; /* Espaciado inferior */
  }
  .hero-text p {
    font-size: 1.2em; /* Tamaño del texto más pequeño */
    margin-bottom:3em;
    font-family: negrita;
  }
  .hero-text a {
    font-size: .9em; /* Tamaño del texto más pequeño */
    margin:em;
    text-decoration: none;
    padding: 1em 2em;
  }
  
  .article1{
    padding:3em;
  }
  .article1 p{
    font-size: 1.3em;
    line-height: 1.5em;
    padding: 0.2em 3em;
  
  }
  .article1 h2{
    font-size: 2em;
}
.logo2 img{
  padding: 0 2em;
  justify-content: center;

}
.nuestrosproductos h2{
  font-size: 1.5em;
  text-align: center;
}
.nuestrosproductos h4{
  font-size: 1em;
  padding-top: .5em;
  font-family: semibold;
}

.article2 {
  display: inline-block;
  background-color: #f2f2f2;
  padding: 5em 0;
  justify-content: center;
  align-items: center;
  
}
.article2-porta{
  display: flex;
  background-color: #f2f2f2;
  padding: 2em;
  justify-content: center;
  align-items: center;
}
.puto{
  font-size: 1.5em!important;
  margin-bottom: .6em;
}
.texto-logo2-porta{
width: 75%;
box-sizing: border-box;
justify-content: center;

}
.texto-logo2-porta .texto2{
  padding-top: 0px;
  margin-bottom: 5px;
  }
.texto-logo2{
  width: 70%;
  box-sizing: border-box;
  text-align: left;
  padding: 2em 3em;

}
.logo2{
  padding: 2em;
  width: 60%;
  vertical-align: middle;
}
.logo2 img{
  justify-content: center;
}
.taller{
  padding: 2em;
  margin-top: 4em;
  
  }
.taller p{
  font-size: 1.2em;
  margin: 1em;
 
}
.boton-contactar{
  margin-bottom: 20px;
}

.card:hover {
  transform: scale(1.03); /* Hace que la card sea un 10% más grande al hacer hover */
}

.article3 {
  display: flex;
  flex-wrap: wrap; /* Permite que los elementos se envuelvan en una nueva línea */
  padding: 0 .3em;
  justify-content: space-around;
  align-items: center;
 
}
.card h3{
  position: absolute;
  background-color: rgba(0,0,0,0.8);
  color: #ededed;
  bottom: 20%;
  font-size: 1.2em;
  padding: 15px 20px;
  font-family: negrita;
 }
 
 
.card {
  flex: 0 0 calc(33.333% - 15px); /* Utiliza flex para establecer el ancho deseado con un pequeño espacio entre las imágenes */
  position: relative;
  padding: 10px;
  margin: 0;
  border: none;
  transition: transform 0.3s ease;
  width: 33%;
}

.botones {
  position: absolute;
  bottom: 11%;
  border-radius: 0px 0px 0px 0px;
  font-size: 1em;
  padding:10px 15px;
  cursor:pointer;
} 

.article2 {
  display: flex;
  background-color: #f2f2f2;
  padding: 5em 0;
  justify-content: center;
  align-items: center;
  
}

.logo2{
  padding: 2em;
  width: 40%;
  vertical-align: middle;
}

.nuestrosproductos {
  margin-top: 2.5em;
}
.ourclients {
  margin-top: 2.5em;
}
.clientes {
  display: flex;
  margin-left: 50px;
  margin-right: 0px;

}
.carrusel {
  position: relative;
  width: 375px; /* Ancho del carrusel */
  overflow: hidden;
  margin-right: 30px;
}
.carrusel2 {
  position: relative;
  width: 375px; /* Ancho del carrusel */
  overflow: hidden;
}
.hero-text2 {
  width: 100%;
  max-height: 60%;
  height: 40vh;
}
.portaequipajes-y-portaescaleras {
  padding-top: 5em;
  font-size: 2em;
  margin-bottom: 10px; 

}
.equipamiento-otros {
  padding-top: 5em;
  font-size: 2em; 
  margin-bottom: 10px;
}

}
/*  --------------------------------------------------------------------------------------- */
/*  --------------------------------------------------------------------------------------- */
@media screen and (max-width:850px){

  .dropbtn{
    cursor: pointer;
    background-color: transparent;
    color:#ededed;
    box-shadow: none;
  }
  
  nav ul li button {
    text-decoration: none;
    padding: 15px 10px;
    color: white;
    font-family: negrita!important;
    box-shadow: none;
    font-size: 1.5em!important;
  }
  nav ul li a {
    font-family: negrita!important;
  }
  .btn:hover {
    color: #f2b705;
  }
  .btn:focus  {
    box-shadow: none!important;
  }

.ourclients {
  margin-top: 2em;
  width:100%;
}
.carrusel {
  width: 500px; /* Ancho del carrusel */
  margin-right: 25px;
}

.logos {
  display: flex;
  transition: transform 0.3s ease;
}

.logo {
  flex: 0 0 auto;
  width: 125px; /* Tamaño de los logos */
  padding: 5px;
  overflow: hidden; /* Evitar que los logos se desborden */
}

.logo img {
  width: 100%; /* Asegura que la imagen se ajuste al contenedor */
  height: auto;
}

.flechita {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.5);
  border: none;
  cursor: pointer;
}

.anterior {
  left: 0;
}

.siguiente {
  right: 0;
}

.carrusel2 {
  position: relative;
  width: 500px; /* Ancho del carrusel */
  overflow: hidden;
}

.logos2 {
  display: flex;
  transition: transform 0.3s ease;
}


.anterior2 {
  left: 0;
}

.siguiente2 {
  right: 0px;
}

.clientes {
  display: inline-block;
  margin-left: 0px;
  margin-right: 5px!important;
  width: 90%;

}
header{
  padding-left: 0px;
  padding-right: 0px;
  width: 100%;
}
.ourclients h2 {
  font-size: 1.5em; 
}

.card h3{
  font-size: 1em;
  padding: 15px 20px;
}
.botones {
  font-size: .8em;
  padding:7px 10px;
} 
/*-------------------------------------------------MENU HAMBURGUESA----------------------------------------------*/
/* Oculta el logotipo y los enlaces de navegación en dispositivos pequeños */
.icon-buttons, nav {
  display: none;
}
#logo{
  margin-left: auto;
  margin-right: auto;
}
/* Muestra el botón hamburguesa en dispositivos pequeños */
.hamburger-btn {
  display: block;
  width: 60px;
}

/* Estilos adicionales para el menú desplegable en dispositivos pequeños */
nav {
  position: fixed;
  top: 80px; /* Ajusta según el tamaño del encabezado */
  right: 0;
  width: 100%;
  background-color: #212529;
  z-index: 999;
  text-align: center;
  display: none; /* Inicialmente oculto */
}
nav ul {
  display: block;
  padding-inline-start: 0;
}

nav ul li {
  display: block;
  margin: 10px 0;
}

nav ul li a {
  font-size: 1.5em;
  padding: 10px;
  display: block;
  text-decoration: none;
  color: #ededed;
}

.dropdown-container {
  
  position: relative;
  width: 100%;
}
.dropdown-content {
  
  position: relative;
  background-color:#323538;
  color: #c18f16;
  width: 100%;
  height: auto; /* Ajusta según tus necesidades */
  box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2);
  z-index: 1;
  text-align: center;
  font-size: 1.5em;
}


}
/*---------------------------------------------------MEDIA QUERY CELULAR-----------------------------------------------------*/
/*---------------------------------------------------MEDIA QUERY CELULAR-----------------------------------------------------*/
/*---------------------------------------------------MEDIA QUERY CELULAR-----------------------------------------------------*/

@media screen and (max-width:480px){

  .close {
    color: white;
    font-size: 30px;
    font-weight: bold;
    position: absolute;
    top: 31%;
    right: 3%;
    cursor: pointer;
    z-index: 1;
  }
  .close:hover {
    text-decoration: none;
    color: #f2b705;
  }
  
  .ourclients {
    margin-top: 1.5em;
    width:100%;
  }

  .equipamiento-otros, .portaequipajes-y-portaescaleras {
    padding-top: 6.8em;
    font-size: 1.8em; /* Tamaño del texto más grande */
    margin-bottom: 10px; /* Espaciado inferior */
    line-height: 1.5em;
    margin-left: 2%;
    margin-right: 2%;
  }

  .experteanos .nav {
  margin-bottom: 10px;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: space-around;
  justify-content: space-between;
  align-items: center;
  }

  .modal-content {
    top:35%;
    max-width: 98%;
    vertical-align: middle;
  }

  .prev,
  .next {
    color: white;
    font-size: 20px;
    position: absolute;
    top: 46%;
    cursor: pointer;
    user-select: none;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.4);
  
  }

  .prev {
    left: 0px;
  }
  
  .next {
    right: 0px;
  }

  .gallery-container {
    margin-top: 10px;
    margin-bottom: 10px;
      width: 100%;
      white-space: initial;
      align-items: center;
      text-align: center;
    }
    
    .gallery {
      display: block;
    }
    
    .gallery img {
      max-width: 45%;
      height: auto;
      cursor: pointer;
     
      margin: 6px;
    }
    .gallery-container2 {
      margin-top: 10px;
      margin-bottom: 10px;
        width: 100%;
        white-space: initial;
        align-items: center;
        text-align: center;
      }
      
      .gallery2 {
        display: block;
      }
      
      .gallery2 img {
        max-width: 45%;
        height: auto;
        cursor: pointer;
       
        margin: 6px;
      }
  
  .carrusel {
    position: relative;
    width: 100%; /* Ancho del carrusel */
    overflow: hidden;
    margin-right: 30px;
  }
  
  .logos {
    display: flex;
    transition: transform 0.3s ease;
  }
  
  .logo {
    flex: 0 0 auto;
    width: 125px; /* Tamaño de los logos */
    padding: 5px;
    overflow: hidden; /* Evitar que los logos se desborden */
  }
  
  .logo img {
    width: 100%; /* Asegura que la imagen se ajuste al contenedor */
    height: auto;
  }
  
  .flechita {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.5);
    border: none;
    cursor: pointer;
  }
  
  .anterior {
    left: 0;
    display:none;
  }
  
  .siguiente {
    right: 0;
    display:none;
  }
  
  .carrusel2 {
    position: relative;
    width: 100%; /* Ancho del carrusel */
    overflow: hidden;
  }
  
  .logos2 {
    display: flex;
    transition: transform 0.3s ease;
  }
  
  
  .anterior2 {
    left: 0;
display:none;
  }
  
  .siguiente2 {
    right: 0;
display:none;
  }
  
  .clientes {
    display: inline-block;
    margin-left: 10px;
    margin-right: 10px;
  
  }
  
  .ourclients h2 {
    font-size: 1.2em;
    text-align:left;
    padding-left: 15px;
  }
  
#footer {
  text-align: left;
   display:list-item;
   box-sizing: unset;
   display: inline-block;
}

#footer .row{
  display: inline-block;
}

.tdfooter {
  margin-right: auto;
  margin-left:auto;
  text-align: left;
  justify-content: center;
  padding-left: 50px;
  }

  .hero-text{
    height: 70em;
    max-height: 30em;
  }
  .hero-text .fabrica-de {
    padding-top: 5em;
    font-size: 2.5em; /* Tamaño del texto más grande */
    margin-bottom: 10px; /* Espaciado inferior */
  }
  .hero-text p {
    font-size: 1em; /* Tamaño del texto más pequeño */
    margin-bottom:1.8em;
    font-family: negrita;
  }
  .hero-text a {
    font-size: .9em; /* Tamaño del texto más pequeño */
    margin:em;
    text-decoration: none;
    padding: .9em 2em;
  }
  .hero-text2 {
    height: 45vh;
    max-height: 30%;
  }
  .texto-logo2{
    font-size:.8em ;
    padding: .5em 1em;
    width:100%;
    text-align: center;
  }
  .logo2{
    width: 100%;
  }
  section{
    width: 100%;
  }
  .article1{
    padding: 0 3em 0 2em;
    margin: 1.5em 0;
  }
  
  .article1 p{
    font-size: 1em;
    line-height: 1em;
    padding: 0em;
  
  }
  .article1 h2{
    font-size: 1.5em;
    line-height: 1.3em;
  
  }

  .article2 {
    display: block;
    width: 100%;
    margin:0px;
    justify-content: center;
    align-items: center;
    padding: 25px 10px;
  }

  .titulo3{
   font-size: 1.4em!important;
  }

  .moveteloco {
    text-align: center;
  }

.taller{
  background-image: url(img/banner-abajo-cel.png);
  background-size: cover;
  background-repeat:no-repeat ;
  padding: 1em;
  margin-top: 4em;
  
  }
  .taller button{
    text-align: center;
    background-color:rgba(0,0,0,0.8);
    padding: 1em 2em;
    border-color: #ffffff;
    font-family: negrita;
  }
   
  .taller p{
    font-size: 1em;
    margin: 1em;
  }
  .taller h2{
    font-size: 1.5em;
    line-height: 1.2em;
    
  }
  .article3 {
    display: inline-block;
    padding: 0 .3em;
    justify-content: space-around;
    align-items: center;
   
  }
  .card h3{
    position: absolute;
    background-color: rgba(0,0,0,0.8);
    color: #ededed;
    bottom: 20%;
    font-size: 1.2em;
    padding: 15px 20px;
    font-family: negrita;
   }
   
   
  .card {
    position: relative;
    padding: 10px;
    margin: 0;
    border: none;
    transition: transform 0.3s ease;
    width: 100%;
  }
  
  .botones {
    font-size: .9em;
    padding:10px 15px;
  } 

  .nuestrosproductos {
    margin-top: 50px;
  }
  .nuestrosproductos h2{
    margin-bottom: 0px !important;  
  }
  .nuestrosproductos h4{
  
    margin-top: 0em;
  }
  .texto1{
    font-size: 1.2em!important;
    line-height: 1.3em!important;
    padding-bottom: 15px!important;
  }

  .textoOtros {
    padding: 45px 20px;
    text-align: center;
    margin-left: 0;
  }

  .article2-porta{
    display: block;
    padding: .2em;
    justify-content: center;
    align-items: center;
    padding-top: 20px;
    padding-bottom: 25px;
  }
  .puto{
    font-size: 1.5em!important;
    margin-bottom: .5em;
  }
  .texto-logo2-porta{
  width: 100%;
  box-sizing: border-box;
  justify-content: center;
  padding-left: 15px;
  
  }
  .texto-logo2-porta .texto2{
    padding-top: 0px;
    margin-bottom: 5px;
    }


    
}
/*--------------------------------------------------------------------------------------------------------------------------------------------- */

h2 {
  line-height: 42px;
  margin: 0 0 20px 0;
  text-align: center;
}
.feature-box-icon {
  display: flex;
  align-items: center;
  margin-bottom: 10px; /* Espacio entre los elementos */
}

.icon-check {
  color: #8a2529; /* Color del checkmark */
  font-size: 24px; /* Tamaño del checkmark */
  margin-right: 10px; /* Espacio entre el checkmark y el texto */
}

/* Opcional: Estilos para el círculo alrededor del checkmark */
.icon-check::before {
  content: '\2713'; /* Código Unicode del checkmark */
  border-radius: 50%; /* Hace que el borde sea redondeado para formar un círculo */
  border: 2px solid #8a2529; /* Color y grosor del borde */
  display: inline-block;
  width: 34px; 
  height: 34px; 
  text-align: center;
  line-height: 30px;
  margin-right: 10px; 
}

.text-center {
  text-align: center!important;
}