@media screen and (max-width: 768px) {
    .download-file-btn {
        position: absolute;
        top: 17% !important;
        right: 60px !important;
    }
    .inspration .ayah{
        font-size:40px;
    }
    header span {
        font-size: 14px
    }
    .change-mode {
        /* background-color: rgba(0, 0, 0, 0.795); */
        width: 100%;
        font-size: 18px;
        text-align: center;
        /* background-color: white; */
        padding: 10px;
        transition: all .3s ease-in-out 0;
        -o-transition: all .3s ease-in-out 0;
        -ms-transition: all .3s ease-in-out 0;
        -moz-transition: all .3s ease-in-out 0;
        -webkit-transition: all .3s ease-in-out 0;
    }
    nav.active ul {
        background-color: black;
    }
    nav.active li {
        background-color: #242526;
    }
    nav.active li .active {
        background-color: black;
    }
    nav.active li:hover a {
        color: #242526;
    }
    nav.active li:hover {
        background-color: yellowgreen;
    }
    nav ul {
        position: fixed;
        display: block;
        left: 0;
        top: 50px;
        margin: 0;
        padding: 0;
        height: 100%;
        width: 0;
        background-color: rgba(121, 223, 47, 0.911);
    }
    nav li {
        display: flex;
        width: 100%;
        height:50px;
        text-align: center;
        border-radius: 3px;
    }
    nav li:hover {
        background-color: #fff;
    }
    nav li a,
    .change-mode {
        color: #fff;
        border-top: 1px solid #fff;
    }
    li .active {
        background-color: #fff;
        color: #000;
    }
    nav a:hover {
        color: #000
    }
    nav .navbar {
        display: none;
        transition: all .8s linear
    }
    nav .navbar.opened {
        display: block;
        width: 200px
    }
    nav .logo p {
        color: #9acd32
    }
    .menu {
        display: block;
        position: absolute;
        padding: 16px 10px;
        margin: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        cursor: pointer;
        background-color: #9acd32
    }
    .menu-btn {
        width: 25px;
        height: 2px;
        background-color: #fff;
        transition: all .3s ease-in-out
    }
    .menu-btn::before,
    .menu-btn::after {
        content: '';
        position: absolute;
        width: 25px;
        height: 2px;
        background-color: #fff;
        border-radius: 5px;
        transition: all .3s ease-in-out
    }
    .menu-btn::before {
        transform: translateY(-7px)
    }
    .menu-btn::after {
        transform: translateY(7px)
    }
    .menu:hover {
        background-color: #000
    }
    .menu:active {
        opacity: .8
    }
    .menu.opened .menu-btn {
        background: transparent;
        transform: translateX(-50px)
    }
    .menu.opened .menu-btn::before {
        transform: rotate(45deg) translate(35px, -35px)
    }
    .menu.opened .menu-btn::after {
        transform: rotate(-45deg) translate(35px, 35px)
    }
    nav.mini-nav {
        background-color: rgba(0, 0, 0, 0.911)
    }
    .mini-nav .logo a {
        color: #fff
    }
    main.content {
        width: 95%;
   }
   .wrapper {
    
  min-height: 80vh;
}
    footer {
        position: relative;
  left: 0;
  bottom: 0;
  width: 100%;
        padding: 10px;
        display: inline-block;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
    .add-user-card {
        width: 95%
    }
    .login-content .login-form {
        width: 90%!important;
        display: block;
        margin: 0 auto;
        margin-top: 150px!important
    }
    .modals .articles-form {
        width: 97%!important
    }
    .display-table {
        width: 100%;
        margin: 2px 5px;
    }
    article{
        width:100% !important;
    }
}