* {
    box-sizing: border-box;
    padding: 0;
}

@keyframes animacionLogo {
    from {
        opacity: 0; /* Empieza invisible */
        transform: translateY(50px); /* Posición inicial */
    }
    to {
        opacity: 1; /* Se hace completamente visible */
        transform: translateY(0); /* Se mueve hacia arriba */
    }
}

/* Aplicar la animación al elemento */
.logo {
    animation: animacionLogo 2s ease-in-out;
}

.logo {
    display: block;
    width: 15%;
    padding: 15px 15px 15px 15px;
    filter: drop-shadow(2px 2px 2px blueviolet);
}

.first-img {
    width: 45%;
}

.cont-img {
    width: 30%;
    padding: 30px;

}

@media (max-width: 768px) {

    .logo {
        width: 30%;
    }

    .cont-img {
        width: 70%;
        height: auto;
    }

    .first-img {
        width: 70%;
    }
}