.service-header-overlay{
    position: absolute;
    bottom: 0;
    /* background-color: #fa2851; */
    top: 100%;
    left: 0;
    right: 0;
    z-index: -1;
    background-color: #fa2851; /* red type */  
}
.service-header{
    margin: 0%;
    z-index: 10;
    padding: 40px;
}
.service-content-overlay{
    position: absolute;
    bottom             : 100%;
    /* background-color: #fa2851; */
    top                : 0;
    left               : 0;
    right              : 0;
    z-index            : -1;
    background-color: #350d82;  /* orange */
}
.service-content{
    padding: 20px 40px 40px 40px;
}
.service-container{
    /* border-radius: 20px; */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);;
}
.service-container .service-header-overlay{
    animation: mymoveOUT .5s;
    animation-fill-mode: forwards;
}

.service-container .service-content-overlay{
    animation: mymove2OUT .5s;
    animation-fill-mode: forwards;
}
.service-container:hover .service-header-overlay{
    animation: mymoveIN .5s;
    animation-fill-mode: forwards;
}

.service-container:hover .service-content-overlay{
    animation: mymove2IN .5s;
    animation-fill-mode: forwards;
}

.service-container:hover .service-header {
    color: white;
}
.service-container:hover .service-content {
    color: white;
}
#myBtn-up {
    display         : none;
    position        : fixed;
    bottom          : 20px;
    left           : 30px;
    z-index         : 99;
    font-size       : 18px;
    border          : none;
    outline         : none;
    background-color: red;
    color           : white;
    cursor          : pointer;
    width: 35px;
    height: 35px;
    font-weight: bold;
    padding         : 5;
    border-radius   : 4px;
}

#myBtn-up:hover {
    background-color: #555;
}
#myBtn-down {
    display         : none;
    position        : fixed;
    bottom          : 60px;
    left           : 30px;
    z-index         : 99;
    font-size       : 18px;
    border          : none;
    outline         : none;
    background-color: red;
    color           : white;
    cursor          : pointer;
    font-weight: bold;
    width: 35px;
    height: 35px;
    padding         : 5px;
    border-radius   : 4px;
}

#myBtn-down:hover {
    background-color: #555;
}
@keyframes mymoveIN {
    from {
        top: 100%;
        /* background-color: white; */
        
    }

    to {
        top        : 0%;
        /* background-color: #fa2851; */
        
    }
}
@keyframes mymove2IN {
    from {
        bottom: 100%;
        /* background-color: white; */
        
    }

    to {
        bottom        : 0%;
        /* background-color: #350d82; */
        /* background-color:  linear-gradient(30deg, #350d82 0%, #8021b5 100%); */
        
    }
}
@keyframes mymoveOUT {
    from {
        top             : 0%;
        /* background-color: #fa2851; */

    }

    to {
        top             : 100%;
        /* background-color: white; */

    }
}

@keyframes mymove2OUT {
    from {
        bottom          : 0%;
        /* background-color: #350d82; */

    }

    to {
        bottom             : 100%;
        /* background-color   : white; */
        /* background-color:  linear-gradient(30deg, #350d82 0%, #8021b5 100%); */

    }
}