/*
 * Autor: 
 * Correo: sergioscardigno82@gmail.com
 * Fecha de creación: 2024-10-08
 * Última modificación: 2024-10-08
 * Descripción: Estilo de la web
 * Versión: 1.0
 * Si necesita realizar alguna modificación, no dude en contactarme.
 */

html {
    width: 100%;
    height: 100%;
}

.color-blanco {
    color: white;
}

.hero-text {
    background-color: (56, 205, 231, 0.8);
}

body {
    font-family: 'Montserrat', sans-serif !important;
}
.bg-sky-400 {
    background-color: rgba(1, 106, 151, 0.5);
    padding-left: 20px;
    padding-right: 20px;
}
.div-gradiente-vertical {
    background: linear-gradient(
        to bottom,
        rgba(10, 81, 148, 0.8),
        rgba(56, 205, 231, 0.8)
    );
    height: 100%;
    width: 100%;
}

.w-10 {
    display: inline-block;
    vertical-align: middle; /* Opcional: Alinea la imagen al centro del texto */
}

#left-logo {
    margin-top: 50px;
}

.azul {
    color: #2c3e91;
}

/* .servicios{
  margin-left: 75px;
} */

.number {
    font-size: 40px;
}

.bg-custom-gradient {
    background: linear-gradient(
            to right,
            rgba(11, 61, 145, 0.5),
            rgba(30, 144, 255, 0.5)
        ),
        linear-gradient(
            to right,
            #0b3d91,
            #0b3d91,
            transparent,
            transparent,
            #add8e6,
            #add8e6,
            transparent,
            transparent,
            #0b3d91,
            #0b3d91
        ),
        linear-gradient(
            to right,
            rgba(11, 61, 145, 0.5),
            rgba(30, 144, 255, 0.5)
        );
    background-blend-mode: overlay, normal, overlay;
    background-size: 100% 100%;
    height: 100vh;
}

/* #mini-elices {
    margin-left: 75px;
}
#manos {
    margin-left: 75px;
} */

/* Media query para pantallas pequeñas */
@media (max-width: 767px) and (min-width: 100px) {
    #mini-elices {
        margin-left: 0px;
    }
    #manos {
        margin-left: 0px;
    }
    #left-logo {
        width: 400px;
    }
    #menu {
        padding: 20px;
        border-radius: 25px;
        -webkit-border-radius: 25px;
        -moz-border-radius: 25px;
        -ms-border-radius: 25px;
        -o-border-radius: 25px;
    }

    #hero-text {
        font-size: 30px;
    }

    #hero-text {
        padding-top: 20px;
        padding-bottom: 20px;
    }
}

/* Style the navbar */
#menu {
    overflow: hidden;
    background-color: #333;
}

#header {
    background: linear-gradient(to right, rgb(11, 61, 145), rgb(30, 144, 255)),
        linear-gradient(
            to right,
            #0b3d91,
            #0b3d91,
            transparent,
            transparent,
            #add8e6,
            #add8e6,
            transparent,
            transparent,
            #0b3d91,
            #0b3d91
        ),
        linear-gradient(to right, rgb(11, 61, 145), rgb(30, 144, 255));
}

body {
    transition: opacity 0.5s ease;
}

/* Estilo para el box flotante del texto */
#info {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 1000; /* Aseguramos que esté por encima del fondo */
    color: white; /* Para que el texto sea visible en caso de fondo oscuro */
    font-size: 20px;
    padding: 20px;
    margin-top: 300px;
    background-color: rgba(
        0,
        0,
        0,
        0.7
    ); /* Fondo semitransparente para el box */
    border-radius: 5px;
    max-width: 300px; /* Ancho máximo del box */
}

/* Estilo para el box flotante del texto */
#info {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 1000; /* Aseguramos que esté por encima del fondo */
    color: white; /* Para que el texto sea visible en caso de fondo oscuro */
    font-size: 20px;
    padding: 20px;
    margin-top: 300px;
    background-color: rgba(
        0,
        0,
        0,
        0.7
    ); /* Fondo semitransparente para el box */
    border-radius: 5px;
    max-width: 300px; /* Ancho máximo del box */
}

/* Fade background para el body */
.fade-background-body {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index: 0; /* Debajo del texto */
}

/* Fade background para el header */
.fade-background-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 150px; /* Altura del header */
    background-color: black;
    z-index: 999; /* Para que quede debajo del contenido del header, pero sobre el contenido del body */
}