/* Estilos generales */
*{
  font-family: 'Open Sans', sans-serif;
}
body {
    background-color: #fff;
    
    margin: 0;
    padding: 0;
  }
  
  header {
    background-color: #fff;
    color: #293133;
    padding: 10px;
  }
  
  .nav-container {
    display: flex; /* Utilizamos flexbox para alinear los elementos horizontalmente */
    justify-content: space-between;
    align-items: center;
    max-width: 1500px; /* Puedes ajustar el ancho máximo según tus necesidades */
    margin: 0 auto; /* Centramos la barra de navegación en el contenedor */
    padding: 0; /* Espaciado interno */
  }
  
  .nav-container img {
    margin-right: 5px; /* Espaciado entre la imagen y los enlaces */
  }
  
  .nav-container ul {
    align-items: end;
    list-style: none; /* Quitamos las viñetas de la lista */
    display: flex; /* Alineamos los elementos de la lista horizontalmente */
  }
  
  .nav-container li {
    margin-right: 20px; /* Espaciado entre los elementos de la lista */
  }
  
  .nav-container a {
    text-decoration: none; /* Quitamos la decoración de los enlaces */
    color: #333; /* Color de los enlaces */
  }
  
  
  /* Estilo del banner */
  .contenido-banner {
    top: 0;
    position: relative; /* Establecemos posición relativa para poder posicionar elementos internos */
    height: 500px; /* Establecemos la altura deseada para el banner */
    background-image: url("Imagenes/sombrilla.jpg"); /* Ruta a la imagen de fondo */
    background-size: cover; /* Ajustamos la imagen para cubrir todo el fondo */
    background-position: center; /* Centramos la imagen */
    text-align: center; /* Alineamos el texto al centro */
    font-size: 36px;
    color: rgb(255, 255, 255); /* Color del texto (negro) */
    text-shadow: 
      -1px -1px 0 #000, /* Borde superior-izquierdo */
      1px -1px 0 #000,  /* Borde superior-derecho */
      -1px 1px 0 #000,  /* Borde inferior-izquierdo */
      1px 1px 0 #000;   /* Borde inferior-derecho */
  }
  
  /* Estilo del contenido del banner */
.contenido-banner img{
    margin-top: 100px;
}
  
  /* Estilos para los elementos de texto dentro del banner */
  .contenido-banner h1 {
    font-size: 36px;
    margin: 0;
  }
  
  .contenido-banner p {
    font-size: 18px;
  }
  .overlay {
    position: relative; /* Establecemos posición absoluta para superponer el rectángulo */
    top: 90px; /* Colocamos el rectángulo en la parte superior */
    left: 0; /* Colocamos el rectángulo en la esquina izquierda */
    width: 100%; /* Ancho completo del rectángulo */
    height: 60%; /* Altura completa del rectángulo */
    background-color: rgba(128, 128, 128, 0.5); /* Color gris con opacidad */
  }
  
  #servicios {
    /* Estilos para la sección de servicios */
    margin: 60px auto;
    max-width: 1260px;
    text-align: center; /* Alineamos el texto al centro */
    color: rgb(118, 118, 118); /* Color del texto (negro) */
  }

  .h2{
    font-size: 80px;
    font-weight: bolder;
  }


  .contenedor {
    display: flex; /* Utilizamos flexbox para alinear los cuadrados */
    justify-content: space-between; /* Alineamos los cuadrados en el espacio disponible */
    max-width: 1260px; /* Ancho máximo del contenedor */
    margin: 10px auto; /* Centramos el contenedor en la página */
  }
  
  .cuadrado {
    height: 250px;
    width: 400px; /* Ancho de cada cuadrado */
    margin: 10px;
    text-align: center; /* Centramos el contenido del cuadrado horizontalmente */
  }
  
  .cuadrado img {
    width: 100%; /* La imagen ocupa todo el espacio del cuadrado */
    height: 100%; /* La altura se ajusta proporcionalmente */
  }
  
  .cuadrado p {
    font-size: 20px;
    margin-top: 5px; /* Espaciado entre la imagen y el texto */
  }
  .Alquiler{
    font-size: 5px;
    color: rgb(118, 118, 118);
  }
  
  #productos {
    /* Estilos para la sección de productos */
  }
  
/*Sección para modificacion del carousel*/
/* Estilos para el carousel */
.carousel {
  margin: 70px auto 0 auto;
  background-color: #f2f2f2; /* Cambia el color de fondo según tus preferencias */
  display: flex; /* Utiliza flexbox para centrar el carousel */
  justify-content: center; /* Centra horizontalmente el carousel */
  align-items: center; /* Centra verticalmente el carousel */
  height: 300; /* Ajusta la altura del carousel a 250px */
  width: 400px;
}

/* Estilos de los botones de control */
.carousel-control-prev,
.carousel-control-next {
  width: 30px; /* Cambia el tamaño del botón previo y siguiente */
  height: 30px;
  background-color: #ccc; /* Cambia el color de fondo del botón según tus preferencias */
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-color: #333; /* Cambia el color del icono del botón según tus preferencias */
}

/* Estilos del texto del botón de control */
.carousel-control-prev span,
.carousel-control-next span {
  font-size: 18px; /* Cambia el tamaño del texto del botón según tus preferencias */
  color: #333; /* Cambia el color del texto del botón según tus preferencias */
}

/* Estilos de las imágenes */
.carousel-inner .carousel-item img {
  max-width: 400px; /* Ajusta el tamaño máximo de las imágenes al ancho del contenedor */
  max-height: 400px; /* Ajusta el tamaño máximo de las imágenes al alto del contenedor */
  display: block; /* Asegura que la imagen sea un elemento en línea */
  margin: 0 auto; /* Centra horizontalmente la imagen utilizando márgenes automáticos */
}

/* Estilos de los indicadores (puntos) */
.carousel-indicators li {
  width: 10px; /* Cambia el tamaño de los puntos según tus preferencias */
  height: 10px;
  background-color: #ccc; /* Cambia el color de los puntos según tus preferencias */
}
/*Fin de modificación del carousel*/  

  #contacto {
    /* Estilos para la sección de contacto */
  }
  .container {
    max-width: 1060px;
    margin: 0 auto;
    padding: 20px;
  }
  
  /* Estilos del apartado de contacto */
  .contacto {
    background-color: #fff;
    color: #5f5f5f;
    padding: 40px 0;
  }
  
  .contacto h1 {
    text-align: center;
    margin-bottom: 20px;
  }
  
  .contacto p {
    text-align: center;
  }
  
  .formulario-contacto {
    max-width: 1000px;
    margin: 40px auto;
    text-align: center;
    border: 2px solid #bababa; /* Cambia "green" por el color deseado */
    padding: 20px;
  }
  
  .formulario-contacto label,
  .formulario-contacto input,
  .formulario-contacto textarea{
    display: flex;
    width: 97%;
    margin-bottom: 10px;
    flex-direction: column;
    align-items: center;
  }
  
  .formulario-contacto label {
    font-weight: bold;
  }
  
  .formulario-contacto input,
  .formulario-contacto textarea {
    padding: 10px;
    border: 1px solid #bababa;
    border-radius: 5px;
  }
  
  .formulario-contacto button {
    background-color: #bababa;
    color: #fff;
    width: 94%;
    padding: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }
  
  .formulario-contacto button:hover {
    background-color: #343434;
  }
  
  .informacion-contacto {
    max-width: 1000px;
    margin: 0px auto;
    text-align: center;
    border: 1px solid #bababa;
    padding: 20px;
  }
  /*
  .redes-sociales {
    display: flex;
    font-size: 30px;
    margin: 0 auto;
    justify-content: center;
  }
  */
  /*
  .redes-sociales a {
    margin-right: 10px; 
    color: #636363; 
  }*/
  /* Estilos para la sección de redes sociales */
.redes-sociales {
  position: fixed; /* Fija la sección al lado derecho de la ventana del navegador */
  top: 50%; /* Ajusta la posición vertical de la sección en el centro de la ventana */
  right: 20px; /* Ajusta la posición horizontal de la sección desde el lado derecho */
  transform: translateY(-50%); /* Ajusta la posición vertical final usando transform */
  display: flex; /* Utiliza flexbox para alinear los iconos verticalmente */
  flex-direction: column; /* Coloca los iconos uno encima del otro */
}

/* Estilos para los iconos */
.redes-sociales a {
  display: block; /* Asegura que los iconos sean elementos en bloque */
  margin-bottom: 10px; /* Ajusta el espaciado vertical entre los iconos */
  font-size: 30px; /* Ajusta el tamaño de los iconos */
  color: #2affdc; /* Ajusta el color de los iconos */
}
  footer {
    /* Estilos para el pie de página */
  }