h5 {
    .title-span {
        width: 100%;
        float: left;
        -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%);
        clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%);
        transform: translateY(-50px);
        opacity: 0;
        animation-name: titleAnimation;
        animation-timing-function: ease;
        animation-duration: 2.0s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
        /* White stroke */
        /*text-shadow: 1px 1px 1px white;*/
        -webkit-text-stroke: 1.5px #055499;
        text-stroke: 1.5px #055499;
        font-size: 35px; 
        
        /* color: #fff;
        
        text-stroke: 0.2px #fff; */
        
    }


    h5 .title-span {
        
        animation-delay: 0.6s;
        -webkit-animation-fill-mode: forwards;
        animation-iteration-count: infinite;
        /* Repeat forever */
        animation-direction: alternate;
        /* Optional: reverse every other cycle */

        &:first-child {
            animation-delay: 0.7s;

        }

        &:last-child {
            animation-delay: 0.5s;
        }
    }
}

.title-span {
    font-family: 'BeachDayRegular', sans-serif !important;
}


.usechrome {
    font-size: 10px;
    color: #fff;
    font-family: helvetica, arial;
    position: absolute;
    bottom: 20px;
    width: 100%;
    text-align: center;
    left: 0;
}

@keyframes titleAnimation {
    0% {
        transform: translateY(-50px);
        opacity: 0;
        -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%);
        clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%);
    }

    20% {
        transform: translateY(0);
        opacity: 1;
        -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 15%);
        clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 15%);
    }

    80% {
        transform: translateY(0);
        opacity: 1;
        -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 15%);
        clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 15%);
    }

    100% {
        transform: translateY(50px);
        opacity: 0;
        -webkit-clip-path: polygon(100% 0, 100% -0%, 0 100%, 0 100%);
        clip-path: polygon(100% 0, 100% -0%, 0 100%, 0 100%);

    }
}


@keyframes scale {
    100% {
        transform: scale(1);
    }
}

.content {
    display: inline-block;
    opacity: 0;
    filter: blur(4px);
    animation: fade-in-out 10s linear both;
    /* Increased duration for slower animation */
}

@keyframes fade-in-out {
    0% {
        opacity: 0;
        filter: blur(4px);
    }

    20% {
        opacity: 1;
        filter: blur(0);
    }

    80% {
        opacity: 1;
        filter: blur(0);
    }

    100% {
        opacity: 0;
        filter: blur(4px);
    }
}