html {
    position: relative;
    min-height: 100%;
}



footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    /* Set the fixed height of the footer here */
    height: 60px;
    line-height: 60px; /* Vertically center the text there */
    background-color: #f5f5f5;
}

@media (max-width: 767px) {
    footer {
        height: 30px;
        line-height: 30px; /* Vertically center the text there */
        background-color: yellow;
    }
    .main-content::after {
        content: '';
        display: block;
        height: 30px; /* Set same as footer's height */
    }
}

.main-content::after {
    content: '';
    display: block;
    height: 65px; /* Set same as footer's height */
}

.cursor-pointer 
{
    cursor:pointer;
}