<style>
    @keyframes fadeInLeft {
        from {
            opacity: 0;
            transform: translateX(-50px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }
    
    @keyframes fadeInLeft {
        from {
            opacity: 0;
            transform: translateX(-50px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(50px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes fadeInRight {
        from {
            opacity: 0;
            transform: translateX(50px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }
    
    .img-fluid {
        transition: transform 0.3s ease-in-out;
    }

    .img-fluid:hover {
        transform: scale(1.1);
    }
    
    .col-md-4 {
        position: relative;
        overflow: hidden;
    }

    .col-md-4:hover::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5); /* Fondo oscuro */
        z-index: 1;
        transition: background 0.3s ease;
    }

    .col-md-4:hover {
        border-radius: 15px; /* Borde redondo */
        border: 2px solid #003785; /* Línea de borde color azul oscuro */
    }

    .col-md-4 .card {
        transition: transform 0.3s ease-in-out;
    }

    .col-md-4:hover .card {
        transform: scale(1.1); /* Efecto de zoom */
    }
    
    </style>