@media (min-width: 300px) and (max-width: 768px){
    body.ns .main-top .title-box .box-right{
        width: 60% !important;
    }
    body.ns .main-top .title-box .box-right .main-title{
        width: 34% !important;
    }
    body.ns .main-top .title-box .box-right .Direction{
        width: 66% !important;
    }
    body.ns .main-top .title-box .box-left{
        width: 30% !important;
    }
    body.ns .main-top .title-box .box-left>div{
        width: 100% !important;
    }
    body.ns .main-right, body.ns .picture-box .picture{
        cursor: pointer;
    }
    body.ns>.main-box>.main-right{
    min-height: 80vh !important;
    height: 1000px;
    
    -moz-transition-property: width;
    -moz-transition-duration: 1s;
    -moz-transition-timing-function: ease-in;
    transition-property: width;
    transition-duration: 1s;
    transition-timing-function: ease-in;
    position: absolute;
    z-index: 1000;
    width: 70%;
    }
    body.ns>.main-box>.main-right.invisible{
      width: 0;  
    }
    body.ns>.main-box>.main-right .right-menu{
        clear: both;
    }
    body.ns>.main-box>.main-top{
        width: 100%;
    }
    body.ns>.main-box>.main-top .main-top2 .right-box{
        width: 50% !important;
    }
    body.ns>.main-box>.main-top .main-top2 .picture-box{
        width: 18% !important;
    }
    body.ns>.main-box>.main-top .main-top2 .email-box{
        width: 30% !important;
    }
    body.ns>.main-box>.main-top .main-top2 .email-box .email,  body.ns>.main-box>.main-top .main-top2 .email-box .tick{
        width: 50% !important;
    }
    body.ns>.main-box .main-top #main-page .menu-border{
        width: 100% !important;
        min-height: 80vh !important;
    }
    body.ns>.main-box .main-top #main-page>div{
        width: unset !important;
    }
    
    body.ns>.main-box .main-top #main-page .menu-border .chart-box .chart-box2{
        width: 100%;
        margin-right: 0;
        margin-bottom: 10px;
        height: 600px !important;
    }
    
    body.ns>.main-box .main-top #main-page .menu-border .chart-box .chart-box2 .chart-main{
        height: 100% !important;
    }
    
    body.ns>.main-box .main-top #main-page .menu-border .chart-box .Report-box{
       width: 100%;
       margin-left: 0;
    }
}
@media (min-width: 769px) and (max-width: 1279px){
    body.ns .main-top .title-box .box-right{
        width: 60% !important;
    }
    body.ns .main-top .title-box .box-right .main-title{
        width: 34% !important;
    }
    body.ns .main-top .title-box .box-right .Direction{
        width: 66% !important;
    }
    body.ns .main-top .title-box .box-left{
        width: 30% !important;
    }
    body.ns .main-top .title-box .box-left>div{
        width: 100% !important;
    }
    body.ns>.main-box>.main-right{
    width: 27%;
    min-height: 80vh !important;
    height: 1000px;
    }
    body.ns>.main-box>.main-right .right-menu{
        clear: both;
    }
    body.ns>.main-box>.main-top{
        width: 73%;
    }
    body.ns>.main-box>.main-top .main-top2 .right-box{
        width: 50% !important;
    }
    body.ns>.main-box>.main-top .main-top2 .picture-box{
        width: 18% !important;
    }
    body.ns>.main-box>.main-top .main-top2 .email-box{
        width: 30% !important;
    }
    body.ns>.main-box>.main-top .main-top2 .email-box .email,  body.ns>.main-box>.main-top .main-top2 .email-box .tick{
        width: 50% !important;
    }
    body.ns>.main-box .main-top #main-page .menu-border{
        width: 100% !important;
        min-height: 80vh !important;
    }
    body.ns>.main-box .main-top #main-page>div{
        width: unset !important;
    }
    
    body.ns>.main-box .main-top #main-page .menu-border .chart-box .chart-box2{
        width: 100%;
        margin-right: 0;
        margin-bottom: 10px;
        height: 600px !important;
    }
    
    body.ns>.main-box .main-top #main-page .menu-border .chart-box .chart-box2 .chart-main{
        height: 100% !important;
    }
    
    body.ns>.main-box .main-top #main-page .menu-border .chart-box .Report-box{
       width: 100%;
       margin-left: 0;
    }
}
@media(min-width: 1280px){
    body.ns>.main-box>.main-right{
    width: 19%;
    min-height: 80vh !important;
    }
    body.ns>.main-box>.main-right .right-menu{
        clear: both;
    }
    body.ns>.main-box>.main-top{
        width: 81%;
    }
    body.ns>.main-box .main-top #main-page .menu-border{
        width: 100% !important;
        min-height: 80vh !important;
    }
    
    body.ns>.main-box .main-top #main-page .menu-border .chart-box .chart-box2{
        width: 70%;
        margin-right: 0;
    }
    
    body.ns>.main-box .main-top #main-page .menu-border .chart-box .chart-box2 .chart-main{
        height: 100% !important;
    }
    
    body.ns>.main-box .main-top #main-page .menu-border .chart-box .Report-box{
       width: 30%; 
        margin-left: 0;
    }
}

.ns.signup{
    margin-right: auto;
    margin-left: auto;
}

@media(max-width: 1280px){
    .ns.signup .signup-right, .ns.signup .signup-left{
        width: 96%;
        margin-right: 2%;
        margin-left: 2%;
    }
}

@media(min-width: 1281px){
    .ns.signup{
        width: 90%;
    }
    .ns.signup .signup-right{
        width: 65%;
    }
    
    .ns.signup .signup-left{
        width: 30%;
    }
}

.ns.contact{
    max-width: 100%;
    overflow: hidden;
}

.ns.contact{
    border-radius:10px;
    direction:rtl;
    padding:26px;
    margin:0px auto;
}

.ns.contact .form-box #contact-form, .ns.contact .form-box #abuse-form{
    width: 100%;
    margin:0px auto;
}
.ns.contact .form-box{
    background:#FFF;
    border-radius:10px;
    direction:rtl;
    padding:26px;
    float:right;
    margin-bottom: 20px;
}
.ns.contact .help-box{
   background:#FFF;
   border-radius:10px;
   direction:rtl;
   padding:26px;
   float:left; 
}
@media(max-width: 1100px){
    .ns.contact .form-box, .ns.contact .help-box{
        width: 96%;
        margin-right: 2%;
        margin-left: 2%;
    }   
}

@media(min-width: 1101px){
    .ns.contact .form-box{
        width: 60%;
    }   
    .ns.contact .help-box{
        width: 37%;
    }
}

.ns.about{
    width:90%;
    height:100vh;
    background:#FFF;
    border-radius:10px;
    direction:rtl;
    padding:26px;
    margin: 25px 5%;  
}

.ns.education{
    max-width: 95%;
}
.ns.education img{
    max-width: 90%;
}

.ns.education p{
    word-wrap: break-word;
    max-width: 100%;
}

@media(max-width: 768px){
  .ns.dowload-data{
    width: 93% !important;
    margin-top: 10px;
  }  
}