/* ==========================================
   Responsive
========================================== */

/* Large Laptop */

@media (max-width:1400px){

    .grid-4{

        grid-template-columns:repeat(2,1fr);

    }

}

/* Laptop */

@media (max-width:1200px){

    .app{

        grid-template-columns:90px 1fr;

    }

    .logo-text{

        display:none;

    }

    .nav-item span{

        display:none;

    }

    .office-card{

        display:none;

    }

    .nav-item{

        justify-content:center;

        padding:0;

    }

}

/* Tablet */

@media (max-width:992px){

    .app{

        grid-template-columns:1fr;

    }

    .sidebar{

        position:fixed;

        left:-280px;

        top:0;

        width:270px;

        height:100vh;

        z-index:999;

        transition:.3s;

    }

    .sidebar.active{

        left:0;

    }

    .header{

        padding:0 20px;

    }

    .search-box{

        width:240px;

    }

    .grid-4,
    .grid-3,
    .grid-2{

        grid-template-columns:1fr;

    }

}

/* Mobile */

@media (max-width:768px){

    .header{

        flex-direction:column;

        align-items:flex-start;

        height:auto;

        gap:15px;

        padding:20px;

    }

    .header-actions{

        width:100%;

        justify-content:space-between;

        flex-wrap:wrap;

    }

    .search-box{

        width:100%;

    }

    .profile div{

        display:none;

    }

    .content{

        padding:20px;

    }

}

/* Small Mobile */

@media (max-width:480px){

    .content h1{

        font-size:28px;

    }

    .placeholder{

        height:250px;

        font-size:16px;

    }

    .icon-btn{

        width:42px;

        height:42px;

    }

    .header select{

        height:42px;

    }

}