.custom-section {
    position: relative;
    margin: 10px;
    border-radius: 10px;
    background-color: #EDEDED;
    overflow: hidden; /* Asegura que los efectos de fondo se mantengan dentro del contenedor */
}

.custom-container {
    padding: 50px 50px 75px 50px;
    background-color: #000000;
    border-radius: 10px 10px 0 0;
    color: white;
    background-image: linear-gradient(60deg, #000000, #000000, #000000, #299e27, #000000, #000000, #000000); /* Degradado original */
    background-size: 400% 100%;
    transition: background-position 1.5s ease-in-out; /* Transición suave para el fondo */
    background-position: 0% 0; /* Posición inicial del degradado */
}

.fade-in {
    background-position: 100% 0; /* Cambia la posición del degradado cuando el contenido es visible */
}


.page-header::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(0deg, rgba(0,17,22,1) 0%, rgba(0,17,22,.8) 25%, rgba(0,0,0,0) 100%);
        z-index: 1;
        border-radius: 10px 10px 0 0;
    }

    .page-header .post-header {
        position: relative;
        z-index: 2;
    }