#services-header
{
    padding: 20px 0px 20px;
}

.services-display img
{
    width: 100%;
}

.services-main-head
{
    font-family: Staatliches;
    padding: 20px 0px 30px;
    font-size: 50px;
    text-align: center;
}

.services-head
{
    font-size: 19px;
    font-family: Bungee;
}

.services-img
{
    clip-path: polygon(25% 0%, 100% 0, 100% 100%, 75% 100%, 0 100%, 0% 50%);
    z-index: 100;
    transition: clip-path 0.3s;
}


.services-content
{
    z-index: 9;
    font-family: Roboto;
    font-weight: 500;
    transition: transform 0.3s;
    transform: translateY(-50px);
    text-align: justify;
    background-color: white;
    padding: 20px 10px 0px;
}

.services-display:hover .services-img
{
    clip-path: polygon(0 0, 100% 0, 100% 100%, 100% 100%, 0 100%, 0% 50%);
    
}

.services-display:hover .services-content
{
    transform: translateY(5px);
}