@media(min-width: 768px) {

    @font-face {
        font-family: 'myfont';
        src: url('../fonts/IRANSansWeb.eot');
        src: url('../fonts/IRANSansWeb.eot?#iefix') format('embedded-opentype'),
            url('../fonts/IRANSansWeb.woff2') format('woff2'),
            url('../fonts/IRANSansWeb.woff') format('woff'),
            url('../fonts/IRANSansWeb.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
    }

    body {
        font-family: 'myfont' !important;
    }

    .no_pc_mode {
        position: fixed;
        width: 100%;
        height: 100%;
        background: #f0f0f0;
        display: flex;
        justify-content: center;
        flex-direction: column;
        text-align: center;
    }

    .no_pc_mode div {
        background: white;
        width: 375px;
        margin: auto;
        font-size: 13px;
        padding: 20px;
        border: 1px solid gainsboro;
        border-radius: 4px;
    }
}

@media(max-width: 767px) {
    @import "animation.css";

    @font-face {
        font-family: 'myfont';
        src: url('../fonts/IRANSansWeb.eot');
        src: url('../fonts/IRANSansWeb.eot?#iefix') format('embedded-opentype'),
            url('../fonts/IRANSansWeb.woff2') format('woff2'),
            url('../fonts/IRANSansWeb.woff') format('woff'),
            url('../fonts/IRANSansWeb.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
    }

    @font-face {
        font-family: 'myfont2';
        src: url('../fonts/Av.eot');
        src: url('../fonts/Av.eot') format('embedded-opentype'),
            url('../fonts/Av.woff2') format('woff2'),
            url('../fonts/Av.woff') format('woff'),
            url('../fonts/Av.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
    }

    img {
        max-width: 100%;
        width: 100%;
    }

    .myfont2 {
        font-family: 'myfont2' !important;
        font-size: 30px !important;
    }

    body {
        font-family: 'myfont' !important;
        background-color: #210535;
    }

    a {
        color: black;
        text-decoration: none;
        transition: all 0.3s;
    }

    a:hover {
        color: black;
    }

    .dir-right {
        direction: rtl !important;
    }

    .dir-left {
        direction: ltr !important;
    }

    .text-justi {
        text-align: justify !important;
        direction: rtl !important;
    }

    .l-n {
        line-height: 30px !important;
    }

    .p-r {
        position: relative !important;
    }

    .c-p {
        cursor: pointer;
    }

    .d-n {
        display: none;
    }

    .fs-10 {
        font-size: 10px !important;
    }

    .fs-13 {
        font-size: 13px !important;
    }

    .fs-15 {
        font-size: 15px !important;
    }

    .fs-17 {
        font-size: 17px !important;
    }

    .fs-20 {
        font-size: 20px !important;
    }

    .fs-25 {
        font-size: 25px !important;
    }

    .fs-30 {
        font-size: 30px !important;
    }

    .toman {
        font-size: 10px;
        margin-right: 5px;
    }

    .lh-25 {
        line-height: 25px;
    }

    .d-ib {
        display: inline-block !important;
    }

    .width-100 {
        width: 100% !important;
    }

    .row {
        margin: 0;
    }

    .container_mind {
        margin: 0 20px;
    }

    .top_header {
        direction: rtl;
        padding: 20px 0;
    }

    .top_header .menu_icon {
        width: 30px;
        display: inline-block;
        cursor: pointer;
    }

    .top_header .middle {
        width: calc(100% - 70px);
        display: inline-block;
        text-align: center;
        color: #F5D5E0;
        font-size: 21px;
        font-weight: bolder;
    }

    .top_header .bell_icon {
        width: 30px;
        display: inline-block;
        cursor: pointer;
        position: relative;
    }

    .top_header .bell_icon span {
        position: absolute;
        font-size: 10px;
        top: 4px;
        right: 4px;
        color: white;
        font-weight: 900;
    }

    .user_find {
        direction: rtl;
        text-align: right;
    }

    .user_find .name {
        color: white;
        font-size: 15px;
        margin-top: 10px;
    }

    .user_find .welcome {
        color: #b7b7b7;
        font-size: 13px;
        margin-top: 10px;
    }

    .search_header {
        direction: rtl;
        text-align: center;
        margin-top: 10px;
    }

    .search_header {
        position: relative;
    }

    .search_header input {
        width: 100%;
        padding: 10px 20px;
        border: none;
        background: #F9F9F9;
        border-radius: 50px;
        padding-right: 50px;
        border: 1px solid gainsboro;
    }

    .search_header img {
        width: 20px;
        right: 40px;
        position: absolute;
        top: 13px;
    }

    .middle_slider .image {
        display: inline-block;
        width: 250px;
    }

    .middle_slider .more {
        display: inline-block;
        width: calc(100% - 255px);
        height: 100%;
        margin: auto;
    }

    .middle_slider .item {
        direction: rtl;
        border: 2px solid #E9A401;
        border-radius: 10px;
        margin-top: 20px;
        padding: 10px;
        display: flex;
        justify-content: center;
    }

    .middle_slider .more .title {
        color: white;
        font-size: 15px;
    }

    .middle_slider .more .description {
        color: white;
        font-size: 15px;
        text-align: justify;
        margin-top: 20px;
    }

    .services .title_parent {
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .services .title_parent .title_in {
        display: inline-block;
        direction: rtl;
        text-align: right;
        width: calc(100% - 100px);
        color: white;
        font-size: 15px;
        font-weight: 900;
    }

    .services .title_parent .more_parent {
        display: inline-block;
        width: 95px;
        color: #b7b7b7;
        font-size: 15px;
    }

    .services {
        direction: rtl;
    }

    .services .body.bg1 {
        /*background: linear-gradient(0deg, rgb(96, 36, 124) 0%, rgb(99, 39, 127) 51%, rgb(172, 114, 198) 100%);*/
        background: linear-gradient(140deg,#7B337DF5,#7B337D);
    }

    .services .body.bg2 {
        background: #F5D5E0;
    }

    .services .body {
        padding: 20px;
        border-radius: 10px;
        direction: rtl;
        margin-bottom: 20px;
    }

    .services .body .img {
        display: inline-block;
        width: 70px;
    }

    .services .body .date {
        font-size: 15px;
        margin-bottom: 30px;
    }

    .services .body .more {
        display: inline-block;
        width: calc(100% - 75px);
        padding-right: 10px;
        margin: auto;
    }

    .services .body .info {
        display: flex;
        justify-content: center;
    }

    .services .body .more .title {
        font-size: 15px;
    }

    .services .body .more .description {
        font-size: 15px;
        margin-top: 10px;
    }

    .services .body .range {
        font-size: 15px;
        margin-top: 40px;
    }

    .services .body .range .range_show {
      margin-top: 10px;
      position: relative;
      margin-left: 5px;
      margin-right: 5px;
    }

    .services .body .range .range_show .back {
      background: white;
      height: 7px;
      border-radius: 20px;
      width: 100%;
    }

    .services .body.bg1 .range .range_show .on {
        background: #F5D5E0;
    }

    .services .body.bg2 .range .range_show .on {
        background: #7B337D;
    }

    .services .body .range .range_show .on {
      position: absolute;
      top: 0;
      left: 0;
      height: 7px;
      width: 50%;
      background: #BE99CF;
      border-radius: 20px;
    }

    .services .body.bg1 .more .description, .services .body.bg1 .more .title, .services .body.bg1 .date, .services .body.bg1 .range_info {
        color: white;
    }

    .services .body.bg2 .more .description, .services .body.bg2 .more .title, .services .body.bg2 .date, .services .body.bg2 .range_info {
        color: #552a77;
    }

    .menu_buttom {
        position: fixed;
        bottom: 0;
        width: 100%;
        z-index: 10;
        height: 60px;
        display: flex;
        justify-content: center;
        /* overflow: hidden; */
    }

    .menu_buttom .roll {
        width: 170px;
        display: inline-block;
        height: 141px;
        margin: 0 -2px;
        max-width: 170px;
        min-width: 170px;
        z-index: 1;
        position: relative;
        top: -17.3px;
    }

    .menu_buttom .beafore {
        background: white;
        width: 40%;
        height: 100px;
        display: inline-block;
        box-shadow: 0 0 25px 0 gainsboro;
    }

    .menu_buttom .after {
        background: white;
        width: 40%;
        height: 100px;
        display: inline-block;
        box-shadow: 0 0 25px 0 gainsboro;
    }

    body {
        /* background: black; */
    }


    .menu_buttom .roll div {
        background: white;
        width: 100%;
        height: 35px;
        margin-top: -2px;
    }

    .menu_buttom .in {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 7px;
        text-align: center;
        z-index: 2;
    }

    .menu_buttom .in img {
        width: 20px;
    }

    .menu_buttom .in .col .title {
        font-size: 12px;
        color: #542978;
    }


    .menu_buttom .middle {
      background: #E9A401;
      position: absolute;
      top: -30px;
      left: 0;
      right: 0;
      width: 60px;
      margin: auto;
      height: 60px;
      border-radius: 100px;
      line-height: 60px;
      box-shadow: 0 10px 10px 0 gainsboro;
    }

    .header_menu {
        width: 375px;
        position: fixed;
        background: white;
        z-index: 10;
        top: 0;
        padding: 20px;
        box-shadow: 0 0 10px gainsboro;
        border-left: 1px solid gainsboro;
        height: 100%;
        right: -390px;
        transition: all 0.5s;
    }

    .header_menu.show {
        right: 0;
    }

    .header_menu .logo img {
        width: 100px;
    }

    .header_menu .logo {
        text-align: center;
        border-bottom: 3px solid gainsboro;
        padding-bottom: 10px;
        margin-bottom: 10px;
    }

    .header_menu .menu ul {
        padding: 0;
        margin: 0;
        direction: rtl;
        list-style: none;
    }

    .header_menu .menu ul li a {
        display: block;
        padding: 10px 0;
        border-bottom: 1px solid gainsboro;
    }

    .header_menu .menu ul li:last-child a {
        border: none;
    }

    .header_menu .menu ul li {
        position: relative;
    }

    .header_menu .menu ul li i {
        position: absolute;
        left: 0;
        top: 0;
        padding: 15px;
        cursor: pointer;
        color: #777;
    }

    .header_menu .menu ul li ul {
        background: #ececec;
        padding: 0 20px;
        display: none;
    }

    .header_menu .blackup {
        direction: rtl;
    }

    .header_menu .blackup ul {
        padding: 0;
        margin: 0;
        list-style: none;
    }

    .header_menu .blackup {
        direction: rtl;
        border-top: 3px solid gainsboro;
        padding-top: 10px;
        margin-top: 10px;
    }

    .header_menu .blackup ul li {
        padding: 10px 0;
    }

    .header_menu .social ul {
        padding: 0;
        margin: 0;
        list-style: none;
        direction: rtl;
        display: flex;
        justify-content: center;
        margin-top: 20px;
    }

    .header_menu .social ul a {
        display: block;
        width: 40px;
        border: 1px solid gainsboro;
        height: 40px;
        text-align: center;
        line-height: 40px;
        margin: 0 10px;
        border-radius: 5px;
    }

    .header_menu .social {
        border-top: 3px solid gainsboro;
        margin-top: 10px;
    }

    .header_menu .close {
        position: absolute;
        left: 10px;
        top: 10px;
        border: 1px solid gainsboro;
        width: 30px;
        height: 30px;
        text-align: center;
        line-height: 29px;
        border-radius: 4px;
        background: #fd9393;
        color: white;
        cursor: pointer;
    }

    .bell_alert {
        width: 375px;
        position: fixed;
        height: 100%;
        z-index: 11;
        background: white;
        box-shadow: 0 0 10px 0 gainsboro;
        border-right: 1px solid gainsboro;
        left: -390px;
        top: 0;
        padding: 20px;
        transition: all 0.5s;
    }

    .bell_alert.show {
        left: 0;
    }

    .bell_alert ul {
        padding: 0;
        margin: 0;
        list-style: none;
    }

    .bell_alert ul li {
        border-bottom: 1px solid gainsboro;
        direction: rtl;
        text-align: justify;
        transition: all 0.5s;
        padding: 20px 10px;
        border-radius: 5px;
        cursor: pointer;
    }

    .bell_alert ul li:hover {
        background-color: #f4f4f4;
    }

    .bell_alert ul li:last-child {
        border-bottom: none;
    }

    .bell_alert ul li .title {
        font-size: 15px;
        font-weight: 900;
        color: #552a77;
        margin-bottom: 10px;
    }

    .bell_alert ul li .short {
        font-size: 13px;
        line-height: 30px;
        margin-bottom: 10px;
    }

    .bell_alert ul li .date {
        display: inline-block;
        width: calc(100% - 40px);
        font-size: 13px;
    }

    .bell_alert ul li .more {
        display: inline-block;
        width: 35px;
        text-align: center;
        font-size: 13px;
        font-weight: 900;
        color: #552a77;
    }

    .bell_alert .title_parent {
        text-align: center;
        font-size: 15px;
        font-weight: 900;
        border-bottom: 3px solid gainsboro;
        padding-bottom: 10px;
        margin-bottom: 10px;
        color: #606369;
    }

    .bell_alert .close {
        position: absolute;
        right: 10px;
        top: 10px;
        border: 1px solid gainsboro;
        width: 30px;
        height: 30px;
        text-align: center;
        line-height: 29px;
        border-radius: 4px;
        background: #fd9393;
        color: white;
        cursor: pointer;
    }

    #bell_modalLabel {
        font-size: 15px;
        font-weight: 900;
        color: #542978;
    }

    #bell_modal .date {
        direction: rtl;
        text-align: right;
        font-size: 13px;
        display: inline-block;
        margin-left: calc(100% - 70px);
        width: 70px;
        border-bottom: 1px solid gainsboro;
        margin-bottom: 5px;
        padding-bottom: 5px;
    }

    #bell_modal .descripton {
        direction: rtl;
        text-align: justify;
        font-size: 15px;
        line-height: 30px;
    }
    .col-6 {
      padding: 0 5px;
    }
























}