@media (max-width: 768px) {

    #header-placeholder {
        background: none;
        position: unset;
        top: 0;
        width: 100%;
        z-index: 10;
    }
    
    .header {
        background-color: black;
    }

    .header-section {
        height: 7.5vh;
        width: 90%;
    }

        .menu-mobile {
        display: none;
    }

    .menu {
        display: none;
    }

    .waraich_infotech_logo img {
        height: 4.5vh;
    }

    .icon {
        display: block;
        width: 5vw;
        cursor: pointer;
        transition: transform 0.3s ease;
    }

    #cross{
        display: none;
    }

    .menu-mobile .li {
        display: none;
        font-size: 1.8rem;
        line-height: 6.5vh;
        list-style: none;
        margin-left: 5.5vw;
        text-align: left;
        color: white;
    }

    .menu-mobile.active .li {
        display: block;
            }
   
    .menu-mobile.active {
        
        position: fixed;
        animation: slideIn 0.3s ease-out;
        top: 7vh;
        right: 0;
        width: 100%;
        height: 100vh;
        background-color: black;
    }

    .menu-mobile {
        position: fixed;
        padding-top: 25px;
        animation: slideOut 0.3s ease-out forwards;
        top: 7vh;
        right: 0;
        width: 100%;
        height: 100vh;
        background-color: black;
        
    }
    
    /* Entrance animation */
    @keyframes slideIn {
        from {
            transform: translateX(100%);
        }
        to {
            transform: translateX(0);
        }
    }
    
    /* Exit animation */
    @keyframes slideOut {
        from {
            transform: translateX(0);
            opacity: 1;
        }
        to {
            transform: translateX(100%);
            opacity: 0;
        }
    }
}