@media screen and (max-width: 1200px){
    .container{
        width: 96%;
    }
    main .container{
        grid-template-columns: 5rem auto 30vw;
        gap: 0.5;
    }
    .left{
        width: 5rem;
        z-index: 5;
    }
    main .container .left .profile{
        display: none;
    }
    .side-bar h3{
        display: none;
    }
    .left .btn{
        display: none;
    }
    .customize-theme .card{
        width: 80vw;
        height: 70vh;
    }
}
/*  -------------Media query for tablet and mobilephone------------ */
   @media screen and (max-width: 992px) {
    nav .search-bar{ 
        display: none;
    }
    main .container {
        grid-template-columns: 0 auto 5rem;
    }
    main .container .left{
        grid-column: 3/4;
        position: fixed;
        bottom: 0;
        right: 0;
        margin-top: 2rem;
    }
    .left .notification-popup{
        position: absolute;
        left: -20rem;
        width: 20rem;
    }
    .left .notification-popup::before{
        display: absolute;
        top: 1.3rem;
        left: calc(20rem - 0.6rem);
        display: block;
    }
    main .container .middle {
        grid-column: 1/3;
    }
    main .container .right{
        display: none;
    }

    
   }