/* Custom CSS */
body {
    background-color: #000; /* Fondo negro */
    color: #fff; /* Texto blanco para contraste */
}
.navbar-dark .navbar-nav .nav-link {
    color: #fff; /* Texto blanco */
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link.active {
    color: #ff0000; /* Enlaces en rojo al pasar el ratón o si están activos */
}

.navbar-brand img {
    max-width: 50px; /* Tamaño del logo en el navbar */
}

li.servicio i{
    color: #cc0000;
}

li.servicio:hover {
    cursor: pointer;
    background-color: red;
    font-weight: bold;
    color: #fff;
    transform: scale(1.05);
}

li.servicio:hover i{
    color:#fff;
}

#hero {
    position: relative;
    overflow: hidden; /* Asegura que la imagen no salga del contenedor */
}

.hero-background img {
    /*position: absolute;*/
    top: 0;
    left: 0;
    height: 500px; /* Asegura que la imagen cubra toda la altura */
    width: 100%; /* Asegura que la imagen cubra todo el ancho */
    object-fit: cover; /* Hace que la imagen se recorte para ajustarse al contenedor sin deformarse */
    z-index: -1; /* Envía la imagen al fondo */
}

.hero-logo img {
    max-height: 100px; /* Tamaño del logo */
    width: auto; /* Mantiene la proporción del logo */
    z-index: 2; /* Asegura que el logo esté sobre la imagen de fondo */
}

.hero-logo {
    top: 0;
    left: 50%; /* Centra el logo horizontalmente */
    transform: translateX(-50%); /* Ajusta la posición para que esté perfectamente centrado */
}

.hero-content {
    z-index: 1; /* Asegura que el contenido esté por encima de la imagen */
}

#hero h1 {
    font-weight: bold;
    color: #ff0000; /* Título en rojo */
}

#hero p {
    color: #fff; /* Texto en blanco */
    font-size: larger;
    font-weight: bold;
}

#hero .btn-danger {
    background-color: #ff0000; /* Botón de llamada a la acción en rojo */
    border-color: #ff0000;
    font-weight: bold;
}

#hero .btn-danger:hover {
    background-color: #d40000; /* Botón de llamada a la acción en rojo oscuro cuando se pasa el ratón */
}

#benefits, #showcase, #cta, footer {
    background-color: #000; /* Fondo negro para todas las secciones */
}

.btn-primary {
    background-color: #ff0000; /* Botones en rojo */
    border-color: #ff0000;
}

.btn-primary:hover {
    background-color: #cc0000; /* Un tono más oscuro de rojo al pasar el ratón */
    border-color: #cc0000;
}


#services h2 {
    color: #ff0000; /* Título en rojo */
    text-transform: uppercase;
    font-weight: bold;
}

#services ul {
    padding-left: 0; /* Quitar sangría del listado */
}

#services li {
    font-size: 1.1rem;
}

#services img {
    width: 100%; /* Asegura que la imagen ocupe el ancho completo de la columna */
    height: auto; /* Mantiene la proporción de la imagen */
    max-width: 750px; /* Limita el ancho máximo a 750px */
    max-height: 100%; /* Asegura que la imagen no exceda la altura de la columna */
    object-fit: cover; /* Hace que la imagen se recorte para ajustarse al contenedor si es necesario */
    border: 2px solid #ff0000; /* Borde rojo alrededor de la imagen */
    border-radius: 5px; /* Bordes ligeramente redondeados */
}

#services .col-md-6 {
    display: flex;
    align-items: center;
    justify-content: center;
    max-height: 600px; /* Limita la altura máxima de la columna */
}

#services img {
    max-height: 100%; /* Limita la altura de la imagen al tamaño del contenedor */
    width: auto; /* Mantiene la proporción de la imagen */
    object-fit: cover; /* Recorta la imagen si es necesario */
}

#showcase .carousel-item img {
    height: 560px; /* Altura fija de las imágenes */
    object-fit: cover; /* Asegura que la imagen se recorte para ajustarse al contenedor */
    width: 100%; /* Hace que la imagen ocupe todo el ancho del carrusel */
    border: 2px solid #ff0000; /* Borde rojo alrededor de la imagen */
}

#cta h2 {
    color: #ff0000; /* Títulos en rojo */
    text-transform: uppercase;
    font-weight: bold;
    margin-bottom: 30px;
}

#cta .form-control {
    background-color: #333; /* Fondo oscuro para los campos del formulario */
    color: #fff; /* Texto en blanco */
    border: 1px solid #ff0000; /* Bordes en rojo */
}

#cta .form-control::placeholder {
    color: #ccc; /* Color del placeholder en gris claro */
}

#cta .btn-danger {
    background-color: #ff0000; /* Botón de enviar en rojo */
    border-color: #ff0000; /* Borde del botón en rojo */
}

#cta .btn-danger:hover {
    background-color: #d40000; /* Color más oscuro en hover */
    border-color: #d40000; /* Borde más oscuro en hover */
}

#map-container {
    background-color: #333; /* Fondo oscuro antes de que el mapa se cargue */
    border: 2px solid #ff0000; /* Borde rojo alrededor del mapa */
    border-radius: 5px; /* Bordes redondeados */
    overflow: hidden; /* Asegura que el mapa no se salga de su contenedor */
}

@media (max-width: 767.98px) {
    #cta .row {
        flex-direction: column;
    }

    #cta .col-md-6 {
        max-width: 100%;
    }

    #map-container {
        height: 300px; /* Altura del mapa reducida en pantallas pequeñas */
    }
}



footer {
    background-color: #111; /* Un tono ligeramente más claro que el fondo principal */
}

footer a {
    color: #ff0000; /* Enlaces en rojo */
}

footer a:hover {
    color: #cc0000; /* Color rojo más oscuro al pasar el ratón */
}

#hixih .carousel-item img {
    height: 560px; /* Altura fija de las imágenes */
    object-fit: cover; /* Asegura que la imagen se recorte para ajustarse al contenedor */
    width: 100%; /* Hace que la imagen ocupe todo el ancho del carrusel */
    border: 2px solid #ff0000; /* Borde rojo alrededor de la imagen */
}