@import url(../font/stylesheet.css);

body {
    background-color: #f5f5f5;
    position:relative;
}

/* Estilos base para la animación del texto */
.slide-text {
    opacity: 0;
    transition: all 2s ease-in-out;
}

/* Animación para el texto que baja desde arriba */
.text-top {
    transform: translateY(-50%);
}

.slide-active .text-top {
    opacity: 1;
    transform: translateY(0);
}

/* Animación para el texto que viene desde la izquierda */
.text-left {
    transform: translateX(-40%);
}

.slide-active .text-left {
    opacity: 1;
    transform: translateX(0);
}

/* Animación para el texto con efecto zoom */
.text-zoom {
    transform: scale(0.8);
}

.slide-active .text-zoom {
    opacity: 1;
    transform: scale(1);
}

.menu {
    /* backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.2);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
    transition: all 0.3s ease-in-out; */
    background-color: #fff;
}

.menu.fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.main-text-color {
    color: #0a1f8f;
}

.second-text-color {
    color: #ff671d;
}

.gb-second {
    background-color: #ff671d;
}

.carousel-container {
    overflow: hidden;
    position: relative;
    background: #f5f5f5;
    padding: 20px 0;
    width: 100%;
}

.carousel {
    display: flex;
    gap: 30px;
    animation: scroll 20s linear infinite;
    width: max-content;
}

.carousel img {
    transition: transform 1s ease-in-out;
}

.carousel img:hover {
    transform: rotateY(180deg);
    transition: transform 1s ease-in-out;
}

@keyframes scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

.rotate-img {
    transition: transform 1s ease;
}

.rotate-img:hover {
    transform: rotate(360deg);
}

#menu-responsive {
    position: fixed;
    left: -100%;
    top: 0;
    width: 250px;
    height: 100%;
    background-color: #0a1e8f;
    padding-top: 20px;
    transition: left 0.5s ease-in-out;
    z-index: 30;
}

#menu-responsive.show {
    left: 0 !important;
}

#menu-responsive li {
    opacity: 0;
    transform: translateX(-20px);
    /* Comienza movido hacia la izquierda */
    animation: slideIn 0.5s forwards;
}

/* Animación para los enlaces */
@keyframes slideIn {
    to {
        opacity: 1;
        transform: translateX(0);
        /* Los enlaces se mueven a su posición final */
    }
}

.contenedor-servicios {
    width: 100%;
    float: left;
    border: 1px solid #0a1e8f;
}

.titulo:hover {
    background-color: #0a1e8f;
    color: white
}

.info {
    display: none;
}
.image-list {
    columns: 4 200px;
    column-gap: 5px;
  }
  
.image-list img {
    width: 100%;
  }
    .contain-preloader {
    position: fixed;
    width: 100%;
    top: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #87CEEB;
    z-index: 30;
}

        .preloader {
            position: relative;
            width: 100px;
            height: 100px;
        }

        .wave-container {
            position: absolute;
            bottom: 10px;
            left: 40%;
            transform: translateX(-60%);
            width: 100%;
        }

        #barco {
            width: 200px;
            animation: moveBarco 5s linear infinite, waveAnimation 3s ease-in-out infinite;
        }

        /* Animación para mover el barco de lado a lado */
        @keyframes moveBarco {
            0% {
                transform: translateX(-150px);
                /* Empieza fuera de la pantalla a la izquierda */
            }

            50% {
                transform: translateX(0);
                /* En el medio */
            }

            100% {
                transform: translateX(150px);
                /* Va hacia la derecha fuera de la pantalla */
            }
        }

        /* Animación para simular las olas */
        @keyframes waveAnimation {
            0% {
                transform: rotate(0deg);
                /* Sin rotación al inicio */
            }

            50% {
                transform: rotate(5deg);
                /* Hacia un lado, como si fuera una ola */
            }

            100% {
                transform: rotate(0deg);
                /* Vuelve a la posición original */
            }
        }