body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  color: rgb(54, 54, 54);
}

/* Header */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  height: 80px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);

}

header .logo img {
  height: 60px;
  margin-left: 30px;
}

header nav {
  margin-right: 30px;
  /* Añade espacio al lado derecho del menú */
}

header nav ul {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
}

header nav ul li {
  margin: 0 15px;
}

header nav ul li a {
  color: #fff;
  text-decoration: none;
  padding: 5px 10px;
  /* Espaciado interno para simular botones */
  border-radius: 5px;
  /* Bordes redondeados */
  transition: background-color 0.3s ease, color 0.3s ease;
}

header nav ul li a:hover {
  background-color: rgba(92, 173, 184, 1);
  /* Fondo dorado translúcido */
  color: #000;
  /* Texto oscuro para contraste */
}

header .menu-toggle {
  display: none;
}

.mobile-menu {
  display: none;
}

nav ul li a.active {
  font-weight: bold;
  background-color: rgba(92, 173, 184, 1);
  /* Fondo dorado translúcido */
  color: #000;
  /* Texto oscuro para contraste */

}

/*Seccion principal*/
.hero {
  position: relative;
  height: 100vh;
  /* Altura de la ventana menos el header */
  background-image: url("hero.jpg");
  background-size: cover;
  /* Asegura que la imagen cubra todo el fondo */
  background-position: center;
  background-repeat: no-repeat;
  margin: 0;
  padding: 0;
  overflow: hidden;
  transition: transform 1s ease, margin-bottom 1s ease;
  /* Añade suavidad al margen */
  margin-bottom: 0;
  /* Espacio entre `.hero` y el siguiente contenido */
}

.hero:hover {
  transform: scale(1.1);
  /* Agranda la imagen al pasar el mouse */
  margin-bottom: 1.8%;
  /* Empuja hacia abajo el contenido inferior */
}

/* Overlay para oscurecer el fondo y mejorar la legibilidad del texto */
.hero .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  /* Oscurece ligeramente el fondo */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
  padding: 20px;
}

.hero h2 {
  font-size: 3rem;
  margin-bottom: 20px;
  color: #fff;
}

.hero p {
  font-size: 1.2rem;
  margin-left: 60px;
  margin-right: 60px;
}

.hero .btn {
  background-color: rgba(92, 173, 184, 1);
  color: #000;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
  margin-top: 50px;
}

.hero .btn:hover {
  background-color: rgba(1, 155, 157, 1);
  color: #000;
  font-weight: bold;
}

.seccion_btn {
  display: flex;
  justify-content: center;
}

.seccion_btn .btn {
  background-color: rgba(92, 173, 184, 1);
  color: #000;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
  margin-top: 10px;
}

.seccion_btn .btn:hover {
  background-color: rgba(1, 155, 157, 1);
  color: #000;
  font-weight: bold;
}

.seccion1 {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: space-around;
  transition: transform 1s ease, margin-bottom 1s ease;

}



/* Overlay para oscurecer el fondo y mejorar la legibilidad del texto */
.seccion2 {
  position: relative;
  flex-direction: column;
  margin-left: 20;
  display: flex;
  justify-content: center;
  width: 40vw;

}

.seccion3 {
  position: relative;
  margin-bottom: 10px;
  display: flex;
  height: 50%;
}

.seccion3 .img {

  width: 100%;
}

.seccion5 {
  position: relative;
  margin-bottom: 10px;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  transition: transform 1s ease, margin-bottom 1s ease;

}

/*Proyectos*/
.seccion6 {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  margin: 2%;
  justify-content: space-around;
  transition: transform 1s ease, margin-bottom 1s ease;

}

.mt-5 {
  margin-top: 2rem !important;
}



.seccion7 {
  height: 100%;
  width: 30vw;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  transition: transform 1s ease, margin-bottom 1s ease;

}

.seccion8 {
  height: 40vh;
  width: 30vw;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-around;

}

.seccion8 .fachada2 {
  height: 40vh;

}

.overlay2 {
  width: 100%;
  display: flex;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.2);
  /* Oscurece ligeramente el fondo */
  justify-content: space-around;
}

.carousel {
  position: relative;
  height: 80%;
  overflow: hidden;
}

.carousel img {

  height: 100%;
}

.carousel .controls {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  border: none;
  cursor: pointer;
}

.carousel-button:hover,
.carousel-button:active,
.carousel-button {
  position: absolute;
  /* Ubicación dentro del carrusel */
  bottom: 20px;
  /* Espaciado desde el borde inferior */
  left: 50%;
  /* Centramos horizontalmente */
  transform: translateX(-50%);
  /* Ajuste para centrar realmente */
  z-index: 10;
  /* Asegura que el botón esté encima de las imágenes */
  background-color: rgba(92, 173, 184, 1) !important;
  /* Color de fondo (azul Bootstrap) */
  color: black !important;
  /* Texto en blanco */
  padding: 10px 20px;
  /* Espaciado interno del botón */
  font-size: 18px;
  /* Tamaño del texto */
  border: none !important;
  /* Sin borde */
  border-radius: 5px;
  /* Bordes redondeados */
  text-decoration: none;
  /* Sin subrayado */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  /* Sombra suave */
  transition: all 0.3s ease;
  /* Transiciones suaves */
}

.fachada2 {
  width: 100%;
  color: #000;
}

#map {
  height: 400px;
  width: 100%;
}

/*empresa*/
.seccion9 {
  position: relative;
  width: 100vw;
  height: auto;
  display: flex;
  justify-content: space-around;

  transition: transform 1s ease, margin-bottom 1s ease;
}

.seccion9 p {
  width: 45vw;
}

.seccion9 h2 {
  width: 45vw;
  font-size: 2em;
  display: flex;
  align-items: center;
  justify-content: center;

}

.seccion10 {
  font-size: 1.25em;
  position: relative;
  height: auto;
  width: 85vw;
  display: flex;
  justify-content: space-between;
  ;
  flex-direction: row;
  align-items: center;
}

.seccion10 img {
  height: 85vh;
  width: auto;


}

.historiaYEquipo {

  position: relative;
  height: auto;
  width: 85vw;
  display: flex;
  justify-content: space-between;
  ;
  flex-direction: row;
  align-items: start;
}

.historiaYEquipo p {
  font-size: 1.25em;
  width: 40vw;
  display: flex;
  justify-content: space-between;
  ;
  flex-direction: row;
  align-items: center;
}

.historia {
  position: relative;
  height: auto;
  width: 40vw;
  display: flex;
  justify-content: space-between;
  ;
  flex-direction: column;
  align-items: center;
}

.historia h2 {
  font-size: 2em;
  width: 40vw;
}

.equipo h2 {
  font-size: 2em;
  width: 40vw;
}

.seccion13 h1 {
  font-size: 2rem;
  width: auto;
}

.seccion11 {
  position: relative;
  height: auto;
  display: flex;
  margin-bottom: 60px;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  transition: transform 1s ease, margin-bottom 1s ease;
}


.seccion11 p {
  height: auto;
  width: 45vw;
  margin: 2vw;
  font-size: 1.25em;
}

.seccion11 h2 {
  height: auto;
  width: auto;
  margin-left: 30px;
}

/*Servicios*/
.seccion12 {

  position: relative;
  height: auto;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

.seccion15 {

  position: relative;
  height: auto;
  width: 100%;
  background-color: rgba(238, 240, 240, 1);
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

.seccion13 {

  position: relative;
  height: auto;
  width: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

.seccion12 img {
  height: auto;
  width: 360px;
  margin: 2vw;
}

.seccion15 img {
  height: auto;
  width: 360px;
  margin: 20px;
}

/*contactos*/
.seccion14 {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 20px;
  background-color: #f4f4f4;
}

form {
  background: #fff;
  padding: 20px;
  border-radius: 5px;
  max-width: 400px;
  margin: auto;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

input,
textarea {
  width: 95%;
  padding: 10px;
  margin: 10px 0;
  border: 1px solid #ccc;
  border-radius: 5px;
}

/* Footer */
footer {
  position: relative;
  text-align: center;
  padding: 20px;
  background-color: #000000;
  color: #ffffff;
}

footer .social a {
  margin: 0 25px;
  color: #fff;
  text-decoration: none;
}

/*Inicio media de 600 a 1200*/
@media (max-width: 1200px) {
  header {
    height: 80px;
  }

  header nav ul li {
    margin: 0 1.5px;
  }

  header nav ul li a.active {
    margin: 0 1.5px;
  }

  header nav ul li a {
    padding: 2px 5px;

  }

  .seccion1 {
    position: relative;
    height: auto;
    margin-top: 20px;
    display: flex;
    justify-content: space-around;
    transition: transform 1s ease, margin-bottom 1s ease;
    flex-direction: column;
  }

  .hero:hover {

    transform: scale(1.05);
    /* Agranda la imagen al pasar el mouse */
    margin-bottom: 4.8%;
    margin-bottom: 4.8%;
    /* Empuja hacia abajo el contenido inferior */
    margin-top: 3.8%
  }

  .seccion2 {
    width: 80vw;
  }

  .seccion_btn .btn {
    background-color: rgba(92, 173, 184, 1);
    color: #000;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    margin-top: 10px;
    margin-bottom: 20px;
  }

  .seccion6 {
    height: auto;
    flex-direction: column;
    align-items: normal;
  }

  .seccion7 {
    width: auto;
    flex-direction: row;
  }

  .seccion8 {
    height: auto;
    width: 45vw;
    justify-content: flex-start;
  }

  .seccion8 .fachada2 {
    height: auto;
  }

  .seccion8 img {
    height: 35vw;
    width: 45vw;
  }

  .seccion9 p {
    width: 90vw;
  }

  .seccion9 {
    display: flex;
    justify-content: center;
    width: 100vw;

  }

  .seccion9 h2 {
    width: 90vw;
  }

  .seccion10 {
    display: flex;
    flex-direction: column;
    width: 100vw;
  }

  .seccion11 p {
    margin: 2vw;
  }

  .seccion10 img {
    height: auto;
    width: 90vw;
  }

  .seccion10b {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    width: 100vw;
  }

  .historiaYEquipo {
    flex-direction: column;
    width: 100vw;
    align-items: center;
  }

  .historia {
    width: 100vw;
  }

  .equipo p {
    width: 90vw;
  }

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

  .seccion11 {
    align-items: normal;
  }

  .seccion11 h2 {
    height: auto;
    width: auto;
    margin: 2vw;
  }

  .seccion12 {
    width: 95vw;
  }

  .seccion12 img {
    height: auto;
    width: 40vw;
  }


  .seccion15 {
    width: 95vw;
    height: auto;

  }

  .seccion15 img {
    height: auto;
    width: 45vw;
    margin: 2vw;
  }

}

/* Ocultar header y mostrar botón en pantallas pequeñas */
@media (max-width: 768px) {
  .logo {
    display: none;
  }

  header nav {
    display: none;
  }

  .menu-toggle {
    display: block !important;
    font-size: 24px;
    cursor: pointer;
    padding: 10px;
  }

  .mobile-menu {
    display: none;
    background-color: #000000;
    color: #ffffff;
    font-weight: bold;
    position: absolute;
    top: 80px;
    left: 0;
    width: 100%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }

  .mobile-menu ul li a.active {
    font-weight: bold;
    padding: 2px;
    background-color: rgba(92, 173, 184, 1);
    /* Fondo dorado translúcido */
    color: #000;
    /* Texto oscuro para contraste */

  }

  .mobile-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .mobile-menu ul li {
    padding: 10px;
    border-bottom: 1px solid #ddd;
  }

  .mobile-menu ul li a {
    text-decoration: none;
    color: #ffffff;
  }

  .mobile-menu ul li a:hover {
    text-decoration: none;
    padding: 10px;
    background-color: #02b1cf;
    color: #000000;
  }

  .mobile-menu.show {
    display: block;
  }
  .seccion6 {
    margin: 0%;
  }
  .seccion6 img{
    width: 95vw;
    margin:2vw;
    
  }
  .seccion7{
    flex-direction:column;
  }
   
  .seccion8 {
    width: 98vw;
    align-items: center;
  }
  .seccion11 {
    width: 98vw;
    align-items: center;
  }

  .seccion11 p {
    width: 80vw;
    margin: 2vw;
    font-size: 1em;
  }

  .seccion11 img {
    width: 80vw;
    margin: 2vw;
  }

  .seccion12 {
    flex-direction: column;
    align-items: center;
  }

  .seccion15 {
    flex-direction: column-reverse;
    align-items: center;
  }
}