@media only screen and (max-width: 1200px) {
    .right-box {
        padding: 40px 40px;
    }
    .form-white-bg {
        padding: 20px;
    }
    .navbar-toggler{
        border: unset;
    }
    .navbar-toggler-icon{
        background-image: url(../assets/icon/burger-ic.svg);
    }
    .navbar-toggler:focus {

        box-shadow: unset ;
    }
    header .navbar-collapse{
        padding: 4px 12px 20px 12px;
        position: absolute;
        width: 100%;
        top: 35px;
        background: #F2000B;
        right: -100%;
        z-index: 9999;
        transition: 0.3s;
        min-height: calc(100vh - 35px);
        max-width: 300px;
        &.show{
            right: 0px;
        }
    }
    header .navbar .brand-block{
        flex-direction: row-reverse;
        justify-content: flex-end;
        gap: 8px;
    }
    main {
        padding-left: 54px;
    }
    .sidebar{
        position: absolute;
        left: 0px;
        z-index: 8;
        min-height: calc(100vh - 36px);
        border-right: 1px solid #e8e8e8;
    }
    .user-dropdown .dropdown-menu{
        right: inherit;
    }
    
}
@media only screen and (min-width: 1200px) {
.container{
        margin-left: 0px;
    }
}
@media only screen and (max-width: 992px) {
    
   
    .right-box .navbar-link {
        padding: 20px;
        align-items: flex-start;
        gap: 24px;
        flex-wrap: wrap;
        background: #eee;
        position: fixed;
        width: 100%;
        top: 0px;
        right: -100%;
        height: 100%;
        z-index: 2;
        transition: 0.3s;
    }
    
    .navbar-collapse.show .navbar-link {
        right: 0px;
    }
    
}

@media only screen and (max-width: 767px) {
    
    .right-box {
        padding: 20px;
    }
    .box-body .title .smile::after {
        right: -16px;
        top: -4px;
    }
    .box-body .title {
        font-size: 42px;
    }
    .right-box .navbar-link {
        gap: 20px;
    }
    .right-box .navbar-link .nav-link {
        min-width: 45%;
    }
}


@media only screen and (min-width: 1800px) {
    .right-box {
        max-width: 1000px;
        margin: auto;
    }
    
}
@media only screen and (min-width: 1280px) {
    .right-box {
        padding: 40px 80px 0px 80px;
        
    }
    
}

@media only screen and (min-width: 992px) {
    .left-box{
        position: relative;
        min-height: 100vh;
    }
    .left-img{
        position: absolute;
        bottom: 0px;
        left: 0px;
    }
   
   
}