.custom-heading {
    color: #333333; /* Cambia el color a gris */
    font-family: Helvetica, Arial, sans-serif;
    font-size: 24px; /* Tamaño de fuente en pantallas grandes */
}

/* Estilo para pantallas pequeñas (móviles) */
@media (max-width: 767px) {
    .custom-heading {
        font-size: 18px; /* Tamaño de fuente más pequeño en móviles */
    }
}


.custom-title {
    color: #ff0000; /* Color del texto rojo */
    text-shadow: 1px 1px 2px #ffffff; /* Sombra blanca para simular un borde */
    transition: color 0.3s ease; /* Transición suave al pasar el mouse */
}

.custom-text {
    color: #ff0000; /* Color del texto rojo */
    text-shadow: 1px 1px 2px #ffffff; /* Sombra blanca para simular un borde */
    transition: color 0.3s ease; /* Transición suave al pasar el mouse */
}

/* Cambia el color a gris cuando se pasa el mouse */
.custom-title:hover, .custom-text:hover {
    color: #333333; /* Color gris oscuro */
    transition: color 0.3s ease; /* Transición suave al cambiar el color */
}


/* Color gris del texto por defecto */
.navbar-nav .nav-link {
    color: #333333 !important; /* Color gris */
    transition: color 0.3s ease, transform 0.3s ease; /* Transición suave para color y zoom */
}

/* Color rojo para los íconos por defecto */
.navbar-nav .nav-link i {
    color: #FF0000 !important; /* Color rojo para los íconos */
    transition: transform 0.3s ease; /* Transición suave para zoom de íconos */
}

/* Efecto hover: cambia a un gris más oscuro y aplica zoom */
.navbar-nav .nav-link:hover {
    color: #1a1a1a !important; /* Gris más oscuro al pasar el mouse */
    transform: scale(1.1); /* Efecto de zoom */
}

/* Aplica zoom a los íconos también cuando se pasa el mouse */
.navbar-nav .nav-link:hover i {
    transform: scale(1.2); /* Zoom ligeramente mayor para los íconos */
}


.carousel-item img {
     width: 100%;
    height: 400px; /* Cambia este valor a la altura que desees */
    object-fit: cover; /* Asegura que la imagen mantenga su proporción */
}


@media screen and (max-width: 576px) {
  /* Estilos responsivos para pantallas pequeñas */
  .carousel-item img {
      width: 100%;
      height: auto;
  }
}



/* Estilo base de la card */
.card {
position: relative; /* Para posicionar la capa con el texto sobre la imagen */
overflow: hidden; /* Para ocultar partes de la imagen que se salgan de la card */
}

.card-img {
  max-height: 200px; /* Altura máxima de la imagen */
  width: auto; /* Ancho automático para mantener la proporción */
  transition: transform 0.3s ease-in-out; /* Transición para suavizar el efecto de zoom */
}
/* Contenedor de las flechas del carrusel */
.carousel-control-prev, .carousel-control-next {
    display: flex; /* Usar flexbox para centrar */
    align-items: center; /* Centrar verticalmente */
    justify-content: center; /* Centrar horizontalmente */
    display: none; 
}

/* Estilo de las flechas */
.carousel-control-prev-icon, .carousel-control-next-icon {
    background-image: none; /* Elimina la flecha predeterminada */
}

/* Estilo de los indicadores (puntos) del carrusel */
.carousel-indicators li {
    background-color: #003399; /* Azul para los puntos */
    width: 12px;
    height: 12px;
    border-radius: 50%; /* Forma redonda */
}

/* Puntos activos */
.carousel-indicators .active {
    background-color: #FF0000; /* Rojo para el punto activo */
}


.carousel-content {
position: relative;
display: inline-block;
}

.carousel-button {
position: absolute;
top: 75%; /* Posición vertical centrada */
left: 80%; /* Posición horizontal centrada */
transform: translate(-50%, -50%); /* Centra el botón */
background-color: rgba(0, 0, 0, 0.5);
color: blue;
padding: 5px 15px;
border-radius: 6px; /* Borde redondeado */
text-decoration: none;
transition: background-color 0.3s;
}

.carousel-button:hover {
background-color: #fff;
color: black;
}

/* Efecto de zoom al hacer hover en la card */
.card-link:hover .card-img {
  transform: scale(1.1); /* Aumentar el tamaño de la imagen al 110% */
}

.card-img-obras {
  max-height: 240px; /* Altura máxima de la imagen */
  width: 348px; /* Ancho automático para mantener la proporción */
}

.card-link:hover .card {
  color: #fff;
  background-color: #1b1b32;
  
}

.card-link:active .card {
  transition: all 0.2s ease-in;
}

/*Sombreado de las cards*/
.card.reveal {
  box-shadow: 0px 6px 14px rgba(0, 0, 0, 0.4); /* Cambia los valores para ajustar la intensidad y el color */
  transition: box-shadow 0.3s ease-in-out;
}

.card.reveal:hover {
  box-shadow: 0px 14px 22px rgba(0, 0, 0, 0.6); /* Cambia los valores para ajustar la intensidad y el color al pasar el cursor */
}

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

.whatsapp-float i {
  margin-top: 17px;
}

.whatsapp-float:hover {
  background-color: #128c7e;
  color: #fff;
  text-decoration: none;
}  

/* Centrar verticalmente el modal */
.modal-centered {
  display: flex;
  align-items: center;
  min-height: 100vh;
}

.img-fondo-modal {
background-size: cover;
background-repeat: no-repeat;
min-height: 500px; /* Ajusta la altura del modal según tus necesidades */
width: 100%; /* Ajusta el ancho de la imagen de fondo para que ocupe todo el ancho del modal */
}

/* Estilo para el contenido del modal */
.modal-correo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-66%, -25%);
padding: 50px;
background-size: cover;
background-repeat: no-repeat;
min-height: 0px; /* Ajusta la altura del modal según tus necesidades */
position: left;
border-radius: 5px;
width: 70%; /* Ajusta el ancho del contenido del modal según tus necesidades */
}

.container-formulario {
  max-width: 800px;
  margin: 40px auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}






/* Estilo para las cajas de texto */
.form-control {
  border: 2px solid #ccc;
  border-radius: 5px;
  padding: 15px; /* para el alto de la caja de texto del formulario*/
  margin-bottom: 15px;
  width: 100%;
}

/* Estilo para los nombres de los campos */
.form-label {
  font-weight: bold;
}

/* Centra verticalmente el contenido del modal */
.modal-contenido {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100%;
}

/* Ajusta el tamaño del GIF cargando según sea necesario */
#enviandoDialog img {
  max-width: 100px;
  max-height: 100px;
}

@media (max-width: 768px) {
  /* Estilos responsivos para pantallas pequeñas */
  .container-formulario .row {
    flex-direction: column;
  }

  .container-formulario .col-md-6 {
    width: 100%;
  }

  .container-formulario .cotiza-btn {
    width: 100%;
  }
  .modal-pc {
  display: none !important;
}
}

/* Animación del banner */
.banner {
animation: fadeInDown 1s ease;
}



/* Estilo personalizado para la nueva sección en el pie de página */
.custom-footer {
background-color: transparent; /* Cambia el fondo a transparente */
padding: 5px 10px; /* Ajusta el espacio vertical según tus preferencias */
text-align: center;
}

.custom-footer p {
font-size: 12px;
color: #333333; /* Cambia el color del texto a blanco */
display: flex;
align-items: center;
justify-content: center;
}

.custom-footer p i {
margin-right: 5px;
}

.small-footer {
font-size: 9px; /* Tamaño de fuente más pequeño */
margin-top: 5px; /* Espacio superior reducido */
margin-bottom: 0px; /* Espacio inferior reducido */
}

.small-footer p {
margin-bottom: 0;
}



  h2.text-danger {
    color: #333333;
    font-size: 36px;
  }
  


/* Definición de las animaciones */
@keyframes fadeInDown {
0% {
  opacity: 0;
  transform: translateY(-20px);
}
100% {
  opacity: 1;
  transform: translateY(0);
}
}

@keyframes fadeInUp {
0% {
  opacity: 0;
  transform: translateY(20px);
}
100% {
  opacity: 1;
  transform: translateY(0);
}
}