.off {
    display: none;
    width: 0;
    height: 0;
    position: absolute;
    z-index: -10000;
}

.side-menu {
    position: fixed;
    top: 0;
    right: -300px;
    width: 300px;
    height: 100vh;
    box-sizing: border-box;
    background: #ffffff;
    z-index: 11;
}

.side-menu .side_header {
    background: linear-gradient(324deg, #D70D59 0%, #FC3924 100%);
    padding: 10px;
    box-sizing: border-box;
}

.side-menu .side_header .site_name {
    color: #fefefe;
    font-size: 12pt;
}

.side-menu i {
    cursor: pointer;
    width: 24px;
    height: 24px;
    color: #B2B7BD;
    font-size: 14px;
    text-align: center;
    padding-top: 5px;
    box-sizing: border-box;
    margin: 0 15px;
    vertical-align: top;
    background: #eeeeee;
    border-radius: 50%;
    float: left;
}

.side-menu i:hover {
    background: #e3e4e5;
    color: #eeeeee;
}

.side-menu .fa-times {
    display: inline-block;
    background: #f35f69;
    color: #eeeeee;
    border-radius: 5px;
    margin: 20px 0 0 0;
    vertical-align: middle;
}

.side-menu .fa-times:hover {
    background: #ffffff;
    color: #ee2937;
}

.side-menu .side_logo {
    display: inline-block;
    width: calc(100% - 30px);
    font-weight: bold;
    vertical-align: middle;
}

.side-menu .side_logo img {
    height: 60px;
    object-fit: cover;
    vertical-align: middle;
}

.side-menu .side_logo span {
    vertical-align: middle;
    color: var(--primary);
}

.side-menu .menu {
    height: calc(100vh - 125px);
    margin-top: 15px;
    overflow: auto;
}

.side-menu .menu a {
    display: block;
    padding: 10px;
    vertical-align: middle;
    color: var(--primary);
    margin-bottom: 10px;
    font-size: 10pt;
}

.side-menu .menu a:hover {
    color: #ee2937;
}

.side-menu .menu i {
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
}

.side-menu .menu .icon {
    float: none;
    margin: 0;
    background: none;
    padding: 0;
    height: auto;
}

.side-menu .menu a:hover,
.side-menu .menu a:hover i {
    color: #ee2937;
}

.side-menu .menu .menu_sub {
    display: block;
    overflow: hidden;
    height: 0;
    background: #EEEEEE;
}

.menu_bar .fa-bars {
    display: none;
    color: #ffffff;
    background: #ee2937;
    font-size: 20px;
    padding: 4px 15px;
    border-radius: 20px;
}

/************************************* MENU ******************************************/
.menu_bar {
    padding: 20px 0;
    vertical-align: middle;
    box-shadow: rgba(149, 157, 165, 0.2) 0 8px 24px;
}

.menu_bar .fa-bars {
    display: none;
    color: var(--primary);
    padding: 5px 15px;
    border-radius: 5px;
    font-size: 20px;
    vertical-align: middle;
    background: transparent;
}

.menu_bar .logo {
    display: inline-block;
    vertical-align: middle;
}

.menu_bar .logo img {
    height: 50px;
    object-fit: cover;
    display: inline-block;
    vertical-align: middle;
}

.menu_bar .logo .site_name {
    vertical-align: middle;
    font-size: 16pt;
    font-weight: 600;
    color: #fefefe;
}

.menu_bar .menu {
    display: inline-block;
    margin: 0 20px;
    vertical-align: middle;
    list-style: none;
}

.menu_bar .menu li {
    display: inline-block;
    margin: 0 5px;
    position: relative;
}

.menu_bar .menu li a i {
    display: inline-block;
    vertical-align: middle;
    font-size: 12px;
    margin: 0 8px;
}

.menu_bar .menu li a span {
    display: inline-block;
    vertical-align: middle;
}

.menu_bar .menu li a {
    display: inline-block;
    color: var(--primary);
    padding: 5px 15px;
    border-radius: 5px;
    box-sizing: border-box;
    font-size: 10pt;
    margin-bottom: 5px;
    cursor: pointer;
}

.menu_bar .menu li a:hover {
    background: var(--light);
}

.menu_bar .menu li .selected {
    color: var(--primary);
    cursor: context-menu;
    background: var(--gray_light);
}

.menu_bar .menu li ul {
    position: absolute;
    background: #ffffff;
    box-shadow: rgba(149, 157, 165, 0.2) 0 8px 24px;
    border-radius: 5px;
    min-width: 200px;
    box-sizing: border-box;
    z-index: 9;
    display: none;
    padding: 5px;
}

.menu_bar .menu li:hover ul {
    display: block;
}

.menu_bar .menu li ul li {
    display: block;
    list-style-type: none;
    width: 100%;
    margin: 2px 0;
}

.menu_bar .menu li ul li a {
    display: block;
    width: 100%;
    margin: 0;
    box-sizing: border-box;
    padding: 6px 12px;
    color: #7f8c8d;
}

.menu_bar .menu li ul li a:hover,
.menu_bar .menu li .mega .mega_sub a:hover,
.side-menu .menu .menu_sub a:hover {
    cursor: pointer;
    color: #ffffff;
    background: var(--pink);
}

.menu_bar .menu li .mega {
    position: absolute;
    background: #ffffff;
    box-shadow: rgba(149, 157, 165, 0.2) 0 8px 24px;
    border-radius: 5px;
    width: calc(100vw - 280px);
    max-width: 1200px;
    box-sizing: border-box;
    z-index: 9;
    display: none;
    padding: 5px;
    margin: auto;
    left: 0;
    right: 0;
}

.menu_bar .menu li:hover .mega {
    display: block;
}

.menu_bar .menu li .mega .mega_sub {
    display: inline-block;
    width: calc(25% - 5px);
    vertical-align: top;
}

.side-menu .menu .menu_sub {
    display: block;
}

.menu_bar .menu li .mega .mega_sub i,
.side-menu .menu .menu_sub i {
    color: #ee2937;
    margin-left: 5px;
    font-size: 15px;
}

.side-menu .menu .menu_sub i {
    color: #ee2937;
    font-size: 15px;
    float: right;
}

.side-menu .menu .menu_sub i:hover {
    background: transparent;
    cursor: context-menu;
}

.menu_bar .menu li .mega .mega_sub a,
.side-menu .menu .menu_sub a {
    display: block;
    padding: 6px 10px;
    color: #7f8c8d;
    font-weight: 400;
}

.menu_bar .menu li .mega .mega_sub .mega_title,
.side-menu .menu .menu_sub .mega_title {
    font-weight: 600;
    color: #4f4e4e;
}

.menu_bar .menu li .mega .mega_sub .mega_title:hover,
.side-menu .menu .menu_sub .mega_title:hover {
    cursor: context-menu;
    background: transparent;
    color: var(--primary);
}

.menu_bar .btn {
    display: inline-block;
    float: left;
}

.menu_bar .btn .fa-user {
    display: none;
    vertical-align: middle;
    margin: 0;
}

.btn span {
    display: inline-block;
}

.btn_main,
.side_box .btn_main {
    display: inline-block;
    text-align: center;
    margin: 0 5px;
    cursor: pointer;
    vertical-align: middle;
    color: var(--primary);
    background: var(--yellow);
    padding: 5px 15px;
    border-radius: 5px;
    box-sizing: border-box;
    font-size: 10pt;
}

.btn_main i,
.side_box .btn_main i {
    display: inline-block;
    margin-left: 5px;
    vertical-align: middle;
}

.btn_main:hover,
.side_box .btn_main:hover {
    background: var(--primary);
    color: var(--yellow);
}

.edit_btn {
    padding: 0 14px 6px 10px;
    background: #fc8f41;
    border-radius: 5px;
    color: #FFFFFF;
}

.edit_btn:hover {
    background: #f56600;
    color: #FFFFFF;
}

.delete_btn {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 5px;
    color: #FFFFFF;
    background: #fc4c4c;
    margin: 2px 5px;
    cursor: pointer;
    font-size: 9pt;
}

.delete_btn:hover {
    color: #FFFFFF;
    background: #f60707;
}

.btn_sec {
    background: none;
    color: #FFD000;
    border: solid 1px #FFD000;
}

.btn_sec:hover {
    background: #f7f1f1;
}

.menu_bar .menu_icon {
    display: inline-block;
    color: var(--primary);
    vertical-align: middle;
    cursor: pointer;
    position: relative;
    padding: 10px;
}

.menu_bar .menu_icon:hover {
    color: var(--yellow);
}

.menu_bar .menu_icon i {
    font-size: 15px;
}

.menu_bar .shop_num {
    background: var(--yellow);
    border-radius: 20px;
    padding: 0 8px;
    font-size: 9pt;
    margin-right: 5px;
    z-index: 1;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    right: -10px;
    display: ruby-text;
    color: var(--primary);
}

.search_hold {
    position: fixed;
    display: none;
    background-color: #fefefe;
    margin: auto;
    top: 25vh;
    left: 0;
    right: 0;
    width: calc(100% - 50px);
    max-width: 800px;
    height: 70px;
    border-radius: 15px;
    z-index: 11;
}

.search_hold .close {
    float: right;
    font-size: 28px;
    font-weight: bold;
    position: absolute;
    background: #f22d33 !important;
    color: #fff;
    width: 25px;
    height: 25px;
    line-height: 0;
    padding: 15px 0 5px 0;
    box-sizing: border-box;
    text-align: center;
    border-radius: 90px;
    margin-right: 20px;
    margin-top: -12px;
    box-shadow: 0 0 13px #F95E62 !important;
    cursor: pointer;
}

.search_hold .select {
    width: 140px;
    display: inline-block;
    vertical-align: middle;
    font-size: 13px;
    box-sizing: border-box;
    overflow: hidden;
    padding: 0 10px;
}

.search_hold .select select {
    border: none;
    background: none;
    width: 100%;
    font-size: 13px;
    box-shadow: none;
    margin: 0;
}

.search_hold .select option {
    background: #EEEEEE;
    color: #2c3e50;
    font-family: IRANSans;
}


.search_hold .input {
    display: inline-block;
    vertical-align: middle;
    font-size: 13px;
    box-sizing: border-box;
    background: none;
    width: calc(100% - 216px);
    margin-bottom: 0;
}

.search_hold .input input {
    width: 100%;
    background: none;
    font-size: 13px;
    box-shadow: none;
    border: none;
    margin-bottom: 0;
}

/*.search_hold input {
    width: 100%;
    border: 0;
    margin: 0;
    padding: 22px 22px 22px 82px;
    box-sizing: border-box;
    background: none;
    float: right;
    border-radius: 5px;
    font-family: iranyekan;
    font-size: 14px;
    color: #333;
}

.search_hold .search_btn {
    float: left;
    background: linear-gradient(324deg, #D70D59 0%, #FC3924 100%) !important;
    color: #fff;
    border: 0 solid !important;
    padding: 22px !important;
    border-radius: 15px 0 0 15px !important;
    box-sizing: border-box;
    margin-top: 0;
    font-size: 21px !important;
    margin-left: -1px !important;
    height: 70px !important;
    box-shadow: 0 0 #fff !important;
    position: relative;
    top: -63px;
    cursor: pointer;
    */

.search_hold .search_btn {
    display: inline-block;
    color: #fff;
    border: 0 solid !important;
    padding: 22px !important;
    border-radius: 15px 0 0 15px !important;
    box-sizing: border-box;
    margin-top: 0;
    font-size: 21px !important;
    margin-left: -1px !important;
    height: 70px !important;
    box-shadow: 0 0 #fff !important;
    background: linear-gradient(324deg, #D70D59 0%, #FC3924 100%) !important;
    vertical-align: middle;
    cursor: pointer;
}

.search_hold .search_btn:hover {
    background: linear-gradient(800deg, #D70D59 0%, #FC3924 100%) !important;
}


/*************************************** slider ********************************/
.slider {
    width: 100%;
    overflow: hidden;
    position: relative;
    height: calc(100vh - 70px);
    max-height: 650px;
}

.slider .slider_holder {
    position: absolute;
    right: -400px;
    width: calc(100% + 800px);
    height: calc(100vh - 85px);
    max-height: 650px;
    overflow: hidden;
    border-radius: 0 0 50% 50%;
    text-align: center;
}

.slider .slider_holder .img {
    display: block;
    width: 100vw;
    height: 100%;
    margin: 0 auto;
}

.slider .slider_holder img {
    display: block;
    width: 100vw;
    height: 100%;
    object-fit: cover;
    margin: 0 auto;
}

.slider .slider_holder .slider_btn {
    position: relative;
    top: -330px;
    font-size: 35px;
    cursor: pointer;
    color: var(--gray);
    text-shadow: var(--b_shadow_secondary);
    z-index: 2;
    padding: 10px;
}

.slider .slider_holder .slider_btn:hover {
    color: var(--white);
}

.slider .slider_holder .fa-chevron-left {
    float: left;
}

.slider .slider_holder .fa-chevron-right {
    float: right;
}

.slider .slider_holder .slider_text {
    display: block;
    height: 280px;
    position: relative;
    top: -380px;
    color: #ffd700;
    width: 100%;
    text-align: center;
}

.slider .slider_holder .slider_text .title {
    display: block;
    font-size: 50pt;
    font-weight: bold;
    margin-bottom: 10px;
    padding: 0;
    color: var(--white);
}

.slider .slider_holder .slider_text .text {
    display: block;
    font-size: 13pt;
    font-weight: lighter;
    width: 100%;
    text-align: center;
    line-height: 25pt;
    margin: 10px 0;
    padding: 0;
    color: var(--white);
}

.slider_dots {
    display: block;
    width: 100%;
    text-align: center;
    position: relative;
    bottom: 50px;
    left: 0;
    right: 0;
    color: var(--white);
}

.slider_dots i {
    display: inline-block;
    font-size: 12px;
    padding: 5px;
    cursor: pointer;
    text-shadow: var(--b_shadow_secondary);
}

.slider_dots .selected {
    color: var(--pink);
    cursor: context-menu;
}

/************************************ service ********/
.main_title {
    display: block;
    margin: 50px auto 30px auto;
    text-align: center;
    font-size: 14pt;
}

.sub_title {
    display: block;
    font-size: 11pt;
    font-weight: 200;
    color: var(--accsent);
    margin: 0 auto 30px auto;
    text-align: center;
}

.bold {
    font-weight: 600;
}

.title_dark {
    display: block;
    width: calc(100% - 10px);
    height: 70px;
    border-radius: 10px;
    box-shadow: rgba(149, 157, 165, 0.2) 0 8px 24px;
    background: var(--dark);
    overflow: hidden;
    position: relative;
    margin: 0 5px 20px 5px;
}

.important_section .title_dark {
    display: inline-block;
    width: calc(50% - 20px);
    height: 100px;
}

.title_dark img {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
}

.title_dark .title {
    position: absolute;
    display: block;
    text-align: center;
    width: 100%;
    top: 25px;
    color: var(--white);
    margin-bottom: 5px;
}

.title_dark .sub_title {
    position: absolute;
    display: block;
    text-align: center;
    width: 100%;
    top: 50px;
    color: var(--light);
    margin-top: 5px;
}

.service_box {
    display: inline-block;
    width: calc(32% - 5px);
    min-height: 160px;
    padding: 15px 30px;
    box-sizing: border-box;
    border-radius: 10px;
    position: relative;
    top: 0;
    overflow: hidden;
    margin: 0 5px;
    box-shadow: rgba(149, 157, 165, 0.2) 0 8px 24px;
    cursor: pointer;
    background: var(--white);
}

.service_box:hover {
    top: -15px;
}

.service_box img {
    display: inline-block;
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 10px;
    margin-left: 5px;
    vertical-align: middle;
}

.service_box .title {
    display: block;
    margin: 15px 0;
    position: relative;
    z-index: 1;
}

.service_box .title i {
    display: inline-block;
    vertical-align: middle;
    width: 60px;
    margin-left: 20px;
    text-align: center;
    padding: 20px 0;
    box-sizing: border-box;
    font-size: 20px;
    border-radius: 10px;
}

.service_box .title span,
.service_box .title a {
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 86px);
    color: var(--primary);
}

.service_box .title .date span,
.service_box .title .date i {
    color: #B2B7BD;
}

.blog_right .service_box .title .date {
    display: inline-block;
    vertical-align: middle;
    margin-right: 0;
}

.blog_right .service_box .title .date i {
    margin-left: 0;
}

.service_box .text {
    display: block;
    text-align: justify;
    color: var(--accsent);
    margin-bottom: 10px;
    font-weight: 300;
    font-size: var(--font_m);
    position: relative;
    z-index: 1;
}

.blue {
    color: var(--blue);
}

.blue_back {
    background: var(--blue_light);
}

.purple {
    color: var(--purple);
}

.purple_back {
    background: var(--purple_light);
}

.pink {
    color: var(--pink);
}

.pink_back {
    background: var(--pink_light);
}

.orange {
    color: var(--orange);
}

.orange_back {
    background: var(--orange_light);
}

.yellow {
    color: var(--yellow);
}

.yellow_back {
    background: var(--yellow_light);
}

.gray {
    color: var(--primary);
}

.gray_back {
    background: var(--light);
}

.social_blue_f {
    background: #4054B2;
}

.social_blue_t {
    background: #1994d9;
}

.social_green {
    background: #10ee69;
}

.social_red {
    background: #ff2e2e;
}

.social_purple {
    background: #f80cad;
}

.icon_background {
    font-size: 100px;
    color: var(--gray_light);
    position: absolute;
    left: -10px;
    bottom: -5px;
    transform: rotate(40deg);
    z-index: 0;
}

.holder {
    margin-bottom: 50px;
}

.holder:hover .chevron,
.product_most:hover .chevron {
    opacity: 1.0;
}

.holder .score_title .title {
    display: inline-block;
    font-size: 14pt;
    margin-bottom: 10px;
}

.chevron {
    margin-top: 8px;
    padding: 10px 10px;
    border-radius: 20px;
    position: relative;
    opacity: 0;
    z-index: 1;
    cursor: pointer;
}

.chevron i {
    display: inline-block;
    width: 55px;
    height: 55px;
    margin: 0 8px;
    color: #4f4e4e;
    background: #ffffff;
    border-radius: 50%;
    padding: 20px 23px 20px 15px;
    box-sizing: border-box;
    box-shadow: rgb(180, 180, 180) 0 8px 24px;
}

.chevron:hover i {
    box-shadow: rgb(140, 140, 140) 0 8px 24px;
}

.chevron .right {
    float: right;
    top: 250px;
    position: absolute;
    right: 0;
}

.chevron .left {
    float: left;
    top: 250px;
    position: absolute;
    left: 0;
}

.product_most .chevron .right,
.product_most .chevron .left {
    top: 150px;
}

.holder_scroll {
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    overflow: hidden;
}

.item {
    display: inline-block;
    width: 330px;
    vertical-align: top;
    border-radius: 10px;
    position: relative;
    border: 1px solid var(--gray);
    overflow: hidden;
    margin-left: 16px;
    background: var(--white);
    padding-bottom: 10px;
    box-sizing: border-box;
}

.item_small {
    display: inline-block;
    margin: 10px 0 10px 10px;
    width: 300px;
    vertical-align: top;
}

.compare_box .item_small {
    width: calc(25% - 25px);
}

.item_small .item {
    width: 100%;
}

.item_inside_post {
    width: calc(100% - 80px);
    margin: 25px auto;
    display: block;
    padding: 0;
}

.cost_red {
    color: var(--pink);
    font-weight: 400;
    font-size: 12pt;
}

.cost_red_main {
    color: #f8bcbc;
    font-weight: 400;
    font-size: 9pt;
    text-decoration: line-through;
}

.product_most .item {
    width: 100%;
}

.item .item_img {
    display: block;
    height: 280px;
}

.item_inside_post .item_img {
    display: inline-block;
    width: 350px;
    vertical-align: top;
}

.product_most .item .item_img {
    height: 140px;
    width: 100%;
}

.product_most .item .tag {
    margin-top: 12px;
}

.item_small .blog_cat .tag {
    float: none;
    margin-right: 10px;
    margin-top: 5px;
    margin-bottom: 8px;
}

.item_small .blog_cat .cost_red {
    margin-top: 5px;
    display: inline-block;
}

.item .item_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.item_inside_post .item_img img {
    width: 100% !important;
    margin: 0 !important;
}

.item .item_content .title {
    display: block;
    width: 100%;
    padding-right: 10px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--gray_light);
    text-align: right;
}

.item .discount {
    position: absolute;
    top: 5px;
    right: 5px;
}

.item .polygon {
    background: var(--white);
    padding: 12px;
    box-sizing: border-box;
}

.item .title {
    color: var(--primary);
    font-size: 12pt;
    padding: 3px 10px 3px 10px;
    font-weight: 500;
    float: right;
    box-sizing: border-box;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.item_inside_post .item_content {
    display: inline-block;
    width: calc(100% - 355px);
}

.blog_right .item_content .title {
    border-bottom: none;
}

.tag {
    display: inline-block;
    color: var(--blue);
    background: var(--blue_light);
    padding: 3px 10px;
    border-radius: 5px;
    font-size: 9pt;
    margin-top: 5px;
    margin-left: 10px;
    vertical-align: middle;
    cursor: pointer;
}

.tag i {
    margin: 0 5px;
}

.tag:hover {
    background: var(--blue);
    color: var(--blue_light);
}

.writer {
    float: left;
    text-align: left;
    font-size: 10pt;
    vertical-align: middle;
    margin-top: 5px;
}

.writer i {
    margin: 0 5px;
}

.blog_right a {

}

.item .tag {
    float: left;
}

.stars {
    float: right;
    width: 50%;
    margin-top: 5px;
    margin-right: 10px;
    vertical-align: middle;
}

.stars i {
    color: var(--gray);
}

.stars .selected {
    color: var(--yellow);
}

.item .date {
    float: left;
    font-size: 10pt;
    color: var(--accsent);
    vertical-align: middle;
    margin-top: 8px;
    margin-left: 10px;
}

.item .date i {
    margin-left: 5px;
}

.cost_holder {
    float: left;
    margin-left: 10px;
}

.cost_holder .main_cost {
    display: block;
    background: var(--green);
    text-decoration: line-through;
    color: var(--white);
    padding: 3px 5px;
    border-radius: 5px;
    font-size: 10pt;
    text-align: center;
}

.cost_holder .off_cost {
    display: block;
    color: var(--primary);
    font-size: 12pt;
    padding: 3px 5px;
}

.student_count {
    display: inline-block;
    margin-top: 15px;
    font-size: 10pt;
    color: var(--accsent);
    margin-right: 10px;
}

.item_small .student_count {
    margin-top: 15px;
    margin-right: 10px;
    vertical-align: middle;
    font-size: 9pt;
}

.item_small .student_count i {
    margin-top: 10px;
}

.item_small .cost_holder {
    margin-top: 15px;
    margin-left: 10px;
    vertical-align: middle;
    font-size: 9pt;
}

.student_count i {
    margin-left: 5px;
}

.item_content {
    padding: 5px 0;
}


.icon_holder {
    text-align: center;
    margin: 30px 0;
}

.icon_holder .circle {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 20px;
    background: linear-gradient(324deg, #eeeeee 0%, #eeeeee 100%) !important;
    margin: 0 5px;
    border: none;
    cursor: pointer;
}

.icon_holder .circle:hover {
    background: linear-gradient(324deg, #D70D59 0%, #FC3924 100%) !important;
}

.circle_selected {
    display: inline-block;
    width: 25px;
    height: 8px;
    border-radius: 20px;
    background: linear-gradient(324deg, #D70D59 0%, #FC3924 100%) !important;
    cursor: context-menu;
}

.icon_holder .circle_selected {
    width: 25px;
    background: linear-gradient(324deg, #D70D59 0%, #FC3924 100%) !important;
    cursor: context-menu;
}

.line_yellow {
    display: inline-block;
    width: 50px;
    height: 5px;
    background: var(--yellow);
    cursor: context-menu;
    margin-right: 5px;
    border-radius: 5px;
}

.circle_selected_gray {
    display: inline-block;
    width: 15px;
    height: 5px;
    border-radius: 20px;
    background: var(--light);
    cursor: context-menu;
}

.circle_yellow {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--yellow);
    margin-left: 5px;
}

.pink {
    background: var(--pink);
}

.blog_main_1 {
    width: 100%;
    overflow: hidden;
}

.blog_holder {
    padding: 30px 0 50px 0;
    background: var(--gray_light);
    position: relative;
    right: -400px;
    width: calc(100% + 800px);
    overflow: hidden;
    border-radius: 40% 40%;
    text-align: center;
}

.title_holder {
    float: right;
}

.title_holder .main_title {
    text-align: right;
    margin: 40px auto 10px auto;
}

.title_holder .sub_title {
    text-align: right;
}

.blog_holder .btn_primary,
.product_most .btn_primary,
.important_section .btn_primary {
    float: left;
    margin-top: 45px;
}

.blog_right {
    display: inline-block;
    width: calc(50% - 15px);
    margin-left: 20px;
    vertical-align: top;
}

.blog_right .item {
    width: 100%;
    height: 280px;
    border: none;
    box-shadow: rgba(149, 157, 165, 0.2) 0 8px 24px;
}

.blog_right .item .item_img {
    height: 180px;
    width: 100%;
}

.blog_left {
    display: inline-block;
    width: calc(50% - 15px);
    vertical-align: top;
}

.blog_right .service_box {
    display: inline-block;
    width: calc(50% - 15px);
    margin-top: 30px;
    padding: 5px 20px;
    min-height: 120px;
}

.important_section {
    margin: 30px 0;
}

.important_section .service_box {
    display: inline-block;
    width: calc(25% - 25px);
    margin-top: 15px;
    margin-left: 15px;
    padding: 5px 20px;
    min-height: 90px;
    box-sizing: border-box;
}

.blog_right .service_box .title,
.important_section .service_box .title {
    display: inline-block;
    width: calc(100% - 85px);
    vertical-align: middle;
    text-align: right;
    font-size: 10pt;
}

.blog_right .service_box .title span {
    width: 100%;
}

.important_section .service_box .title {
    width: calc(100% - 5px);
    font-size: 12pt;
    margin-right: 0;
}

.blog_right .service_box .title .date,
.important_section .service_box .title .date {
    color: #B2B7BD;
    cursor: context-menu;
}

.blog_right .service_box .title i {
    padding: 12px 0;
    vertical-align: middle;
    font-size: 10pt;
}

.important_section .service_box .polygon {
    padding: 15px;
    margin-left: 2px;
}

.blog_right .btn_private {
    float: right;
    margin: 0;
    padding: 5px 10px;
    font-size: 9pt;
}

.blog_left .service_box {
    width: calc(100% - 10px);
    margin-bottom: 15px;
}

.blog_left .service_box .title,
.blog_left .service_box .text {
    text-align: right;
}

.item_small .stars {
    margin-top: 12px;
}

.left {
    float: left;
}

.footer {
    display: block;
    width: 100%;
    background: url("../img/bg.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top right;
}

.footer .image_left {
    display: inline-block;
    width: calc(50% - 5px);
    vertical-align: middle;
    text-align: center;
}

.footer .image_left img {
    width: 100px;
    height: 100px;
    object-fit: contain;
    margin: 5px 20px;
}

.footer .image_right {
    display: inline-block;
    width: calc(50% - 5px);
    vertical-align: middle;
    padding: 50px 80px 10px 0;
    box-sizing: border-box;
}

.footer .footer_title_holder {
    padding-right: 100px;
}

.footer .footer_title_holder h1 {
    display: inline-block;
}

.footer .menu_address .address {
    padding-top: 10px;
    font-size: 10pt;
    margin: 5px 0 5px 20px;
}

.footer .menu_address .address,
.footer .menu_address .tel {
    color: #fefefe;
    font-weight: 200;
}

.footer .image_right img {
    display: inline-block;
    height: 40px;
    object-fit: cover;
    vertical-align: middle;
}

.footer .image_right .footer_title {
    display: inline-block;
    margin-right: 10px;
    vertical-align: middle;
}

.footer .image_right .footer_title .title {
    display: block;
    width: 100%;
    font-size: var(--font_x);
    color: var(--white);
}

.footer .image_right .footer_title .text {
    display: block;
    width: 100%;
    color: var(--white);
    font-size: 11pt;
    font-weight: 200;
    margin-top: 5px;
}

.social {
    display: inline-block;
    margin: 50px 0 0 0;
}

.side_box .social {
    display: block;
    margin: 5px 0;
    text-align: center;
}

.side_box .social a {
    padding: 8px 10px 6px 10px;
    border-radius: 10px;
    font-size: var(--font_m);
}

.social a {
    padding: 0 10px;
    font-size: var(--font_x);
    color: #ffffff;
    text-shadow: var(--b_shadow_primary);
}

.social a:hover {
    opacity: 0.5;
}

.footer .menu_address .footer_menu {
    width: calc(100% - 50px);
    border-bottom: 1px solid var(--pink_light);
    padding: 12px 0;
}

.footer .menu_address .footer_menu a {
    display: inline-block;
    padding: 5px 0 5px 20px;
    color: #fefefe;
    font-weight: 200;
    font-size: 11pt;
}

.copyright {
    color: #ffffff;
    font-size: 9pt;
    margin-top: 10px;
    padding-bottom: 15px;
}

.copyright .site_footer {
    background: #f5b9bd;
    padding: 0 5px;
    border-radius: 10px;
    color: #ee2937;
}

.copyright .site_footer:hover {
    background: #fad9dc;
}


.copyright .green {
    color: #f5b9bd;
    padding: 0 5px;
    border-radius: 10px;
}

.copyright .green:hover {
    background: #66B933;
    color: #fefefe;
}

/************************************  ARCHIVE  *************************/
/************************** filter and main ********************/
.filter_holder {
    display: inline-block;
    width: 280px;
    margin-left: 25px;
}

.filter_item {
    width: 280px;
    box-shadow: rgba(149, 157, 165, 0.2) 0 8px 24px;
    border-radius: 10px;
    padding: 10px 5px;
    margin: 20px 0;
    box-sizing: border-box;
}

.filter_item input {
    width: calc(100% - 10px);
    color: var(--primary);
    font-size: 10pt;
    margin-right: 5px;
    padding: var(--margin_s) var(--margin_l) var(--margin_s) var(--margin_x2);
}

.filter_item .icon_search {
    float: left;
    position: relative;
    top: -38px;
    left: 15px;
    cursor: pointer;
}

.filter_item .cost_item {
    text-align: center;
    padding-bottom: 10px;
}

.filter_item .header {
    padding: 8px;
    margin-bottom: 20px;
    vertical-align: middle;
}

.filter_item .header i {
    vertical-align: middle;
    font-size: 10px;
    color: #ffd000;
    margin-left: 8px;
}

.filter_item .search_holder {
    display: block;
    width: 80%;
    background: #ffffff;
    padding: 5px;
    margin: 20px auto 10px auto;
    border-bottom: 1px solid #8ed9dc;
}

.filter_item .search_holder input {
    background: #ffffff;
    width: calc(100% - 30px);
    font-family: 'iranyekan';
    color: #439a97;
}

.filter_item .search_holder i {
    color: #8ed9dc;
    text-align: left;
    padding: 5px;
    cursor: pointer;
    box-sizing: border-box;
}

.filter_item .filter_item_list {
    margin: 5px 5px;
    padding: 5px;
    box-sizing: border-box;
}

.filter_item .filter_item_sub_list {
    padding-right: 25px;
    box-sizing: border-box;
}

.circle {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    color: #ebeeef;
    border: 4px solid #ebeeef;
    vertical-align: middle;
    margin-left: 15px;
    margin-right: 8px;
}

.current .circle {
    border: 4px solid #8ed9dc;
}

.table_row .circle {
    width: 25px;
    height: 25px;
    border: none;
    margin-right: 0;
    box-shadow: inset 0 0 5px 2px var(--yellow);
}

.table_row .current .circle {
    box-shadow: inset 0 0 15px 2px var(--yellow);
}

.filter_item .filter_item_list .list {
    display: inline-block;
    font-weight: 300;
    color: #7f8c8d;
    font-size: 11pt;
    cursor: pointer;
}

.filter_item .filter_item_list .current,
.filter_item .filter_item_list .list:hover {
    color: #8ed9dc;
}

.filter_item .filter_item_list .list i {
    display: inline-block;
    vertical-align: middle;
    margin-left: 15px;
}

.filter_item .filter_item_list .list_open {
    margin-right: 30px;
}

.filter_item .filter_item_list .list_open .selected {
    color: #c4a755;
    font-weight: bold;
    cursor: context-menu;
}

.filter_item .filter_item_list .list_open span {
    display: block;
    margin: 8px 20px 8px 0;
    font-weight: 300;
    cursor: pointer;
}

.filter_item .filter_item_list .filter_row {
    display: block;
    margin: 8px 20px 8px 0;
}

.filter_item .filter_item_list .filter_row .fa-square {
    font-size: 16px;
}

.filter_item .filter_item_list .filter_row i {
    margin-left: 10px;
    vertical-align: middle;
}

.filter_item .filter_item_list .filter_row .row_item_light {
    vertical-align: middle;
    color: #989898;
    font-weight: 300;
}

.slide_container,
.range_cost {
    margin: auto;
    width: calc(100% - 20px);
    text-align: center;
    color: #868585;
    font-weight: 400;
    font-size: 10pt;
}

.range_cost {
    margin-bottom: 10px;
}

.filter_holder .card {
    display: inline-block;
    width: calc(100% - 20px);
    text-align: center;
    margin: 10px auto;
    float: none;
    background: #eeeeee;
    border-radius: 10px;
    padding: 8px 5px;
    box-sizing: border-box;
    color: #868585;
    font-weight: 300;
    cursor: pointer;
}

.filter_holder .card:hover {
    background: var(--pink_light);
    color: var(--pink_dark);
}

/********************************** main archive ********************************/
.page_holder {
    padding: 70px 0;
}

.main_holder {
    display: inline-block;
    vertical-align: top;
    width: calc(100% - 312px);
    padding: 20px 0;
}

.main_holder .sort {
    display: inline-block;
    vertical-align: top;
    width: calc(100% - 50px);
    box-shadow: rgba(149, 157, 165, 0.2) 0 8px 24px;
    padding: 15px 15px;
    border-radius: 10px;
    margin-bottom: 8px;
}

.main_holder .sort i {
    font-size: 16px;
}

.main_holder .sort .title {
    font-weight: 600;
    margin-left: 20px;
    font-size: 9pt;
}

.sort_holder {
    transition: all 0.4s ease-in-out;
}

.sort_result {
    float: left;
    display: none;
    width: 200px;
    cursor: pointer;
}

.sort_result span {
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 40px);
}

.sort_result i {
    vertical-align: middle;
    display: inline-block;
    padding: 0 10px;
}

.main_holder .sort .sort_item {
    margin-left: 10px;
    padding: 2px 8px;
    cursor: pointer;
    font-size: 9pt;
    color: #B2B7BD;
}

.main_holder .sort .sort_item:hover {
    color: #fcfcfc !important;
    background: #ee2937;
    border-radius: 10px !important;
}

.main_holder .sort .current {
    color: #fcfcfc !important;
    background: #ee2937;
    border-radius: 10px !important;
    cursor: context-menu;
}

.main_holder .archive_result_number {
    float: left;
    font-size: 9pt;
}

.main_holder .inner_main_title {
    display: inline-block;
    width: calc(100% - 236px);
    margin-right: 10px;
}

.main_holder .road_title {
    margin: 10px 10px 10px 0;
}

.filter_btn_show {
    display: none;
    position: fixed;
    bottom: 10%;
    right: 30px;
    height: 50px;
    background: #ee2937;
    color: #fcfcfc;
    padding: 10px;
    box-sizing: border-box;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 0 30px 2px rgba(0, 0, 0, 0.20);
    border: 2px solid #fcfcfc;
    z-index: 11;
    border-radius: 30px;
}

.filter_btn_show i {
    font-size: 25px;
    vertical-align: middle;
}

.close_side {
    width: 100%;
    display: block;
    text-align: left;
    padding-bottom: 10px;
    color: #b94a48;
    cursor: pointer;
    font-size: 11pt;
    border-bottom: 1px solid #ecf0f1;
}

.close_side i {
    display: inline-block;
    vertical-align: middle;
    margin-right: 15px;
}

.main_holder .item_50 {
    width: calc(50% - 25px);
    margin: 15px 10px;
}

.main_holder .item_33 {
    width: calc(33% - 21px);
    margin: 8px;
}

.main_holder .item_33 .item_img {
    height: 150px;
}

.main_holder .item .item_img {
    width: 100%;
}

.paging,
.page_number {
    display: block;
    margin: 15px 0;
    text-align: center;
}

.paging a,
.page_number a {
    margin: 0 3px;
    padding: 5px 15px;
    display: inline-block;
    box-sizing: border-box;
    color: #B2B7BD;
    border-radius: 5px;
    background: #fff;
    cursor: pointer;
    border: solid 1px #fff;
}

.paging a:hover,
.page_number a:hover {
    color: #ee2937;
    border: solid 1px #ee2937;
}

.paging .current,
.page_number .current,
.paging .page_active,
.page_number .page_active {
    color: #fff !important;
    background: #ee2937 !important;
    border: solid 1px #ee2937 !important;
    cursor: context-menu !important;
}

/******************************************* product ********************************/
.road_title {
    margin-top: 30px;
    color: #bdc3c7;
    font-weight: 300;
    font-size: 10pt;
}

.road_title .road {
    color: #bdc3c7;
    vertical-align: middle;
    font-weight: 300;
    font-size: 10pt;
}

.road_title .road i {
    margin: 0 5px;
    vertical-align: middle;
}

.road_title .title {
    color: #7f8c8d;
    font-weight: 300;
}

.road_title .title_bold {
    color: #FC3924;
    font-weight: 400;
}

.btn_tag {
    display: inline-block;
    background: linear-gradient(324deg, #D70D59 0%, #FC3924 100%) !important;
    padding: 5px 20px;
    border-radius: 20px;
    font-size: 10pt;
    color: #fefefe;
    margin: 0 8px;
}

.btn_tag:hover {
    background: linear-gradient(324deg, #FC3924 0%, #D70D59 100%) !important;
    color: #fefefe;
}

.side_box .btn_tag {
    padding: 10px 30px;
    border-radius: 50px;
}

.btn_tag_yellow {
    display: inline-block;
    background: var(--yellow);
    padding: 2px 20px;
    border-radius: 20px;
    font-size: 10pt;
    color: #fefefe;
    margin: 0 8px;
}

.inner_main_title {
    margin: 10px 0 25px 0;
}

.inner_main_title .title {
    display: inline-block;
    font-size: 20pt;
    margin-right: 5px;
}

.inner_main_title .title_m {
    display: inline-block;
    font-size: 16pt;
    margin-right: 5px;
    font-weight: 600;
}

.score_title {
    margin: 10px 0 20px 0;
    text-align: right;
}

.inner_holder .score_title .title,
.main_box .score_title .title,
.main_box .score_title a {
    display: inline-block;
    font-size: 14pt;
    color: var(--dark);
    cursor: context-menu;
}

.inner_holder .score_title .sub_title {
    font-size: 12pt;
    font-weight: 200;
    text-align: right;
    margin: 10px 0;
}

.score_title .stars {
    float: none;
    display: inline-block;
    width: 50%;
    margin-top: 5px;
    margin-right: 20px;
    vertical-align: middle;
}

.inner_side {
    display: inline-block;
    vertical-align: top;
    width: 350px;
    margin-right: 20px;
}

.inner_holder {
    display: inline-block;
    vertical-align: top;
    width: calc(100% - 400px);
}

.side_main {
    display: none;
}

.inner_side .side_box,
.side_main .side_box {
    display: inline-block;
    background: #ffffff;
    border-radius: 20px;
    width: 100%;
    box-shadow: rgba(149, 157, 165, 0.2) 0 8px 24px;
    padding: 20px 30px;
    box-sizing: border-box;
    margin-bottom: 30px;
    vertical-align: top;
}

.inner_side .side_box .btn_primary,
.inner_side .side_box .btn_primary_border {
    margin: var(--margin_m);
    width: 220px;
}

.box_holder {
    text-align: center;
    width: 100%;
}

.inline_item {
    display: inline-block;
    margin: 0 5px 20px 5px;
    text-align: center;
}

.inner_holder .inline_item {
    width: calc(25% - 30px);
    margin-bottom: 0;
    background: #fefefe;
    border-radius: 20px;
    padding: 15px 20px;
    box-sizing: border-box;
    cursor: pointer;
}

.inner_holder .inline_item:hover,
.inner_holder .inline_item_selected {
    background: #eeeeee;
}

.inline_item .icon {
    display: block;
    margin: 0 5px;
    font-size: var(--font_x);
}

.inline_item .num {
    display: block;
    width: 50px;
    height: 50px;
    padding-top: 15px;
    background: #eeeeee;
    border-radius: 50%;
    box-sizing: border-box;
    font-weight: 600;
    margin: auto;
}

.inline_item .title {
    display: inline-block;
    font-weight: 200;
    margin-top: var(--margin_s);
}

.product_cost_holder {
    display: block;
    width: 220px;
    overflow: hidden;
    margin: var(--margin_x) auto;
}

.product_cost_holder .product_cost {
    background: var(--gray_light);
    border: solid 1px var(--gray);
    border-radius: 5px;
    position: relative;
}

.product_cost_holder .product_cost::before,
.product_cost_holder .product_cost::after {
    content: "";
    position: absolute;
    display: block;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #ffffff;
    border: solid 1px var(--gray);
    bottom: calc(50% - 8px);
}

.product_cost_holder .product_cost::before {
    right: -8px;
}

.product_cost_holder .product_cost::after {
    left: -8px;
}

.product_cost_holder .cost_main {
    display: block;
    text-align: center;
    color: var(--gray);
    text-decoration: line-through;
    padding: var(--margin_m);
    border-bottom: dashed 1px var(--gray);
    font-size: 10pt;
}

.product_cost_holder .cost_off {
    display: block;
    text-align: center;
    padding: var(--margin_m);
}

.inline_item .second {
    color: var(--pink_dark);
    background: var(--pink_light);
}

.center {
    text-align: center;
}

.line {
    width: 100%;
    height: 1px;
    background: #eeeeee;
    margin: 20px 0;
}

.main_box {
    box-shadow: rgba(149, 157, 165, 0.2) 0 8px 24px;
    border-radius: 20px;
    margin: 30px 0 50px 0;
    padding: 30px 20px;
    box-sizing: border-box;
}

.cart_box {
    box-shadow: none;
    border-radius: 0;
    padding: 30px 0 0 0;
}

.lesson_holder {
    border-bottom: 1px dashed #B2B7BD;
    padding: 8px 0;
}

.lesson_holder:last-child {
    border-bottom: none;
}

.inner_holder .text {
    display: block;
    width: 100%;
    font-size: var(--margin_l);
    line-height: 2.2;
    margin: 15px 0;
}

.inner_holder .text img,
.inner_holder .text audio,
.inner_holder .text video {
    display: block;
    width: 100%;
    max-width: 800px;
    margin: 10px auto;
    object-fit: cover;
    border-radius: 20px;
    overflow: hidden;
}

.inner_holder .text .aparat {
    display: block;
    width: 100%;
    max-width: 800px;
    min-height: 500px;
    margin: 10px auto;
}

.inner_holder .text iframe {
    min-height: 500px;
    border-radius: 20px;
    overflow: hidden;
}

.inner_holder .text ul,
.inner_holder .text ol {
    display: block;
    margin-right: 25px;
}

.lesson_holder .sub_title {
    text-align: right;
    margin-top: 5px;
    margin-bottom: 0;
}

.line_title {
    display: inline-block;
    font-size: 11pt;
    font-weight: 300;
    color: #5e5e5e;
    margin: 0 10px;
}

.lesson_holder .btn_private,
.lesson_holder .btn_play_down {
    display: inline-block;
    width: 150px;
    text-align: center;
}

.lesson_holder .btn_play,
.lesson_holder .btn_download {
    display: inline-block;
    width: 60px;
    text-align: center;
    cursor: pointer;
}

.lesson_holder .lesson {
    display: inline-block;
    width: calc(100% - 180px);
    padding: 20px 0;
}

.hold_100 .lesson {
    width: 100%;
    padding: 5px 0;
}

.lesson_holder .lesson i {
    display: inline-block;
    border-radius: 50%;
    background: #eeeeee;
    padding: 15px;
    box-sizing: border-box;
    vertical-align: middle;
}

.hold_100 .lesson i {
    display: inline-block;
    border-radius: 50%;
    padding: 6px;
    font-size: 10px;
    color: #B2B7BD;
    margin-top: 8px;
}

.hold_100 .lesson .green {
    color: #20c9a6;
    background: #d5f4f5;
}

.hold_100 .lesson .red {
    color: #ee2937;
    background: #f1c9cc;
}

.lesson_holder .lesson .title_hold {
    display: inline-block;
    width: calc(100% - 70px);
    vertical-align: middle;
    margin-right: 10px;
}

.teacher_holder {
    width: 100%;
    padding: 30px 0;
    margin: 30px 0;
}

.teacher_holder p {
    font-size: 11pt;
    line-height: 2.2;
}

.teacher_holder img {
    display: inline-block;
    width: 250px;
    height: 250px;
    object-fit: cover;
    vertical-align: top;
    border-radius: 30px;
    box-shadow: rgba(149, 157, 165, 0.2) 0 8px 24px;
}

.teacher_holder .teacher_about {
    display: inline-block;
    width: calc(100% - 265px);
    padding-right: 30px;
    box-sizing: border-box;
    padding-top: 50px;
    vertical-align: top;
}

.teacher_holder .teacher_about strong {
    display: block;
    margin-bottom: 10px;
}

.teacher_holder .teacher_about .sub {
    font-size: 10pt;
    margin-bottom: 20px;
    font-weight: 200;
}

.student_holder {
    text-align: center;
}

.student_box {
    display: inline-block;
    box-shadow: rgba(149, 157, 165, 0.2) 0 8px 24px;
    padding: 20px;
    width: calc(50% - 61px);
    border-radius: 10px;
    margin: 0 8px;
    text-align: right;
}

.student_box .comment {
    border-bottom: 1px solid #eeeeee;
    padding-bottom: 15px;
    font-size: 10pt;
    line-height: 2.0;
}

.student_box img {
    display: inline-block;
    width: 70px;
    height: 70px;
    border-radius: 10px;
    object-fit: cover;
    vertical-align: middle;
    padding-top: 15px;
}

.student_box .student_name {
    display: inline-block;
    width: calc(100% - 80px);
    vertical-align: middle;
    padding-top: 15px;
}

.student_box .student_name .name {
    display: block;
    font-weight: 600;
    font-size: 11pt;
    margin: 5px 0;
}

.student_box .student_name .course {
    font-weight: 300;
    font-size: 10pt;
}

.side_box .side_row {
    margin: 10px 0;
    text-align: right;
}

.side_box .side_row .polygon {
    padding: 10px;
    background: #eeeeee;
    color: #7f8c8d;
    font-size: 12px;
}

.side_box .side_row .row_title {
    display: inline-block;
    font-size: 11pt;
    font-weight: 600;
}

.side_box .side_row .row_des {
    display: inline-block;
    font-size: 10pt;
}

.side_box .btn_private {
    width: calc(100% - 10px);
    margin: 0 0 10px 0;
}

.side_box .done_line {
    width: 100%;
    height: 10px;
    border-radius: 20px;
    background: #eeeeee;
    margin: 25px 0 10px 0;
}

.side_box .done_ok {
    float: left;
    height: 10px;
    border-radius: 20px;
    background: linear-gradient(324deg, #56d70d 0%, #24fc97 100%) !important;
}

.link_small {
    background: #fbfbfb;
    border: 1px solid #eaeaea;
    border-radius: 5px;
    padding: 5px;
    position: relative;
    z-index: 9;
    box-shadow: none;
    text-align: center;
}

.tags {
    display: inline-block;
}

.tags a {
    float: right;
    background: #F0F1F2;
    font-size: 14px;
    padding: 2px 10px;
    border-radius: 5px;
    margin: 5px 0px 5px 5px;
    color: #7b868a;
    font-weight: 400;
    padding-bottom: 4px !important;
}

/************************

  <div class="cost_off flex flex_row">
                    <span>kjhg</span>
                    <strong>kjhg</strong>
                    <span>kjhg</span>
  </div>

.divgheymat.dsfg54545g {
    border: 1px solid #eaeaea;
    background: #fbfbfb;
    border-radius: 5px;
    position: relative;
    height: 79px;
    color: #46484d;
    font-weight: 400;
    padding: 10px 0;
    margin-top: 30px;
}

.side_box .cost_off {
    width: 100%;
    box-sizing: border-box;
    justify-content: space-between;
    margin: auto auto 16px auto;
    background: #eeeeee;
    padding: 25px 10px;
    border-radius: var(--radius_10);
    border: 1px solid #B2B7BD;
    position: relative;
}

.flex {
    display: flex;
}

.flex_row {
    flex-direction: row;
}

.side_box .cost_off::before {
    content: "";
    width: 20px;
    height: 20px;
    border-radius: 10px;
    background: var(--white);
    position: absolute;
    right: -8px;
    top: 0;
    bottom: 0;
    margin: auto;
}

.side_box .cost_off::after {
    content: "";
    width: 15px;
    height: 15px;
    border-radius: var(--radius_10);
    background: var(--white);
    position: absolute;
    left: -8px;
    top: 0;
    bottom: 0;
    margin: auto;
}
********************/
.circle_border {
    display: inline-block;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: solid 1px #eeeeee;
}

.circle_border:last-child {
    margin-bottom: 0;
    border-bottom: none;
}

.circle_border img {
    width: 80px;
    height: 80px;
    border-radius: 150px;
    padding: 10px;
    background: #fff;
    box-shadow: 0 2px 8px #dfdfdf7d;
}

.circle_border .user_name {
    margin-bottom: 20px;
}

.circle_border .mini_img {
    display: inline-block;
    width: 60px;
    height: 60px;
    vertical-align: middle;
}

.circle_border .text_left {
    display: inline-block;
    width: calc(100% - 90px);
    vertical-align: middle;
}

.circle_border .text_left .title {
    display: block;
    font-size: 11pt;
}

.circle_border .text_left .date {
    display: inline-block;
    background: #000000;
    color: #eeeeee;
    border-radius: 20px;
    padding: 0 10px;
    margin-top: 5px;
}

.back_gray {
    background: #eeeeee;
    padding: 10px;
    box-sizing: border-box;
    text-align: center;
    margin-top: 15px;;
    border-radius: 10px;
}

.back_gray .score_title {
    text-align: center;
}

.back_gray .social {
    text-align: center;
}

.back_gray .social a {
    background: #ffffff;
    color: #000000;
    margin: 10px 2px;
}

.back_gray .post_link {
    width: calc(100% - 40px);
    vertical-align: middle;
    direction: ltr;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.back_gray .link_icon {
    background: #fff;
    color: #000000;
    padding: 8px 10px 6px 10px;
    border-radius: 10px;
    font-size: var(--font_m);
}

.like,
.dislike {
    cursor: pointer;
}

.like i {
    color: green;
}

.dislike i {
    color: red;
}

.star {
    color: #ee2937;
}

form .btn_primary {
    margin: var(--margin_x) 0;
}

.blog_item_hover {
    display: inline-block;
    vertical-align: top;
    width: 300px;
    height: 240px;
    margin: var(--margin_s) 0 var(--margin_s) 20px;
    position: relative;
    overflow: hidden;
    border-radius: var(--radius_10);
    text-align: right;
}

.blog_item_hover .img {
    display: block;
    width: 100%;
    height: 100%;
}

.blog_item_hover .img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog_item_hover .contents {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    background: linear-gradient(to bottom, transparent, #222f3f);
    padding: var(--margin_m);
    box-sizing: border-box;
}

.blog_item_hover:hover .contents {
    background: linear-gradient(to bottom, #222f3fcc, #222f3fcc);
}

.blog_item_hover .contents .category {
    background: var(--primary_op);
    color: var(--white);
    font-size: var(--font_s);
    padding: var(--margin_s) var(--margin_l);
    border-radius: var(--radius_5);
}

.blog_item_hover:hover .contents .category {
    background: linear-gradient(324deg, #D70D59 0%, #FC3924 100%);
}

.blog_item_hover .contents .title {
    display: block;
    font-weight: 600;
    font-size: var(--font_r);
    color: var(--white);
    width: calc(100% - var(--margin_x));
    position: absolute;
    right: var(--margin_m);
    bottom: 50px;
}

.blog_item_hover:hover .contents .title {
    bottom: 150px;
}

.blog_item_hover .contents .text {
    display: block;
    font-size: var(--font_m);
    color: var(--white);
    width: calc(100% - var(--margin_x));
    position: absolute;
    bottom: -100%;
    right: var(--margin_m);
}

.blog_item_hover:hover .contents .text {
    bottom: 100px;
}

.blog_item_hover .contents .detail {
    position: absolute;
    bottom: var(--margin_m);
    display: block;
    width: calc(100% - var(--margin_x));
}

.blog_item_hover .contents .date,
.blog_item_hover .contents .author {
    display: inline-block;
    vertical-align: middle;
    font-weight: 200;
    font-size: var(--font_s);
    color: var(--white);
    margin-left: var(--margin_m);
}

.blog_item_hover .contents .author img {
    display: inline-block;
    vertical-align: middle;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    margin-left: var(--margin_s);
}

.blog_item_hover .contents .date i {
    margin-left: var(--margin_s);
}

.blog_item_hover .contents .comment {
    color: var(--white);
    position: absolute;
    left: 0;
}

.blog_item_hover .contents .comment span {
    color: var(--white);
    background: var(--red);
    padding: 0 var(--margin_s);
    border-radius: var(--margin_m);
    font-size: var(--font_s);
    position: relative;
    top: -10px;
    left: -5px;
}

.detail_img {
    width: 400px;
    height: 250px;
    text-align: center;
    margin: 20px auto;
}

.detail_img img {
    display: inline-block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.none .btn_secondary {
    display: none;
}

.img_post {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 20px;
    overflow: hidden;
    object-fit: cover;
}

.product_gallery {
    width: calc(100% - 10px);
    display: block;
    text-align: center;
    margin-top: 15px;
}

.product_gallery img {
    width: 70px;
    height: 70px;
    object-fit: cover;
    overflow: hidden;
    margin-right: 8px;
    display: inline-block;
    border-radius: 12px;
    opacity: 0.65;
    cursor: pointer;
}

.product_gallery img:hover {
    opacity: 1.0;
}

.main_box .comment-part {
    width: calc(100% - 50px);
    margin: 20px auto;
    padding: 15px 5px;
    border-bottom: 1px solid #ff1414;
}

.main_box .comment-part .comment-part {
    border-bottom: 1px solid #505763;
}

.main_box .comment-part:last-child {
    border-bottom: none;
}

.main_box .comment-part .right {
    width: 280px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
    padding: 10px 20px;
}

.main_box .comment-part .right .Buyer {
    border: 1px solid #e6e6e6;
    padding: 10px 25px;
    font-size: 8pt;
    border-radius: 2px;
    background: #f5f5f5;
    margin-top: 5px;
    color: #00c689;
    display: block;
    width: calc(100% - 20px);
    text-align: center;
}

.main_box .comment-part .right .title {
    display: block;
    margin-top: 15px;
    font-size: 10pt;
}

.main_box .comment-part .left_com {
    display: inline-block;
    vertical-align: top;
    width: calc(100% - 295px);
    padding: 10px 20px;
    box-sizing: border-box;
}

.main_box .comment-part .left_com .head {
    display: block;
    padding: 15px;
    border-bottom: 1px solid #e6e6e6;
    font-size: 10pt;
    font-weight: normal;
}

.main_box .comment-part .left_com .text {
    display: block;
    padding: 10px;
    margin-top: 15px;
    font-size: 10pt;
}

.main_box .replay {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 10px;
    margin-top: 10px;
    font-size: 10pt;
    color: #e74c3c;
    font-weight: 400;
}

.main_box .replay:hover {
    color: #ffffff;
    background: #e74c3c;
}

.main_box .comment-form-comment .replay {
    margin-right: 10px;
}

.main_box .comment-form-comment .replay:hover {
    cursor: pointer;
    color: #e74c3caa;
    background: none;
}

.main_box .comment-part .head1 {
    display: block;
    color: #002c49;
    margin: 15px 25px;
    font-size: 14pt;
}

.main_box .comment_rate {
    margin-bottom: 25px;
    font-size: 11pt;
}

.main_box .comment_rate i {
    color: #ffb518;
    cursor: pointer;
}

.main_box .comment-part textarea {
    display: block;
    width: calc(100% - 80px);
    min-width: calc(100% - 80px);
    max-width: calc(100% - 80px);
    height: 100px;
    min-height: 100px;
    max-height: 250px;
    margin: auto;
    padding: 10px;
    border: none;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
    border-radius: 3px;
    font-family: 'IRANsans';
    color: #7f8c8d;
    font-size: 10pt;
    text-align: justify;
}

.main_box .comment-part .point {
    margin: 15px 29px;
    width: calc(100% - 60px);
    max-width: 300px;
    box-sizing: border-box;
}

.checkbox {
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    width: 25px;
    height: 25px;
    padding: 12px;
    box-sizing: border-box;
    font-size: 10pt;
    border-radius: var(--radius_10);
    border: 1px solid #FFD000;
    box-shadow: inset 0 0 0 0 #FFD000;
    transition: all 0.1s linear;
}

.checkbox_product {
    border-radius: 35px;
}

.checkbox_current {
    box-shadow: inset 0 0 0 13px #FFD000;
}

.checkbox_text {
    display: inline-block;
    cursor: pointer;
    vertical-align: middle;
    padding: 5px 10px;
    box-sizing: border-box;
    font-size: 10pt;
}

.checkbox_text .item_title {
    display: inline-block;
    vertical-align: middle;
    font-weight: 600;
}

.checkbox_text .item_title_en {
    display: inline-block;
    vertical-align: middle;
    color: #7f8c8d;
    font-size: 9pt;
    margin-right: 5px;
}

.checkbox_text_current {
    color: #FFD000;
}

/******************************************RESPONSIVE*************/

@media screen and (max-width: 1150px) {
    .service_item {
        width: calc(33% - 35px);
        margin: 20px 15px;
    }

    .service_item .title i {
        margin-right: 5px;
    }
}

@media screen and (max-width: 1050px) {
    .main_holder .item_33 {
        width: calc(50% - 21px);
    }

    .inner_side {
        display: none;
    }

    .side_post {
        display: block;
        width: 100%;
        margin: 0;
    }

    .side_main {
        display: block;
        margin-top: 15px;
    }

    .side_main .side_box .btn_primary,
    .side_main .side_box .btn_primary_border {
        width: 100%;
        margin: 15px 0;
    }

    .inner_holder {
        width: 100%;
    }

    .product_cost_holder {
        width: 100%;
    }

    .blog_right {
        display: block;
        width: calc(100% - 15px);
    }

    .blog_left {
        display: block;
        width: 100%;
    }

    .blog_right .service_box {
        margin-top: 10px;
    }

    .blog_right .service_box .title .date {
        display: block;
    }

    .blog_holder .blog_content .none .btn_secondary {
        display: inline-block;
        margin: 20px 5px;
    }

    .blog_holder .btn_secondary {
        display: none;
    }

    .blog_holder .blog_content .title_dark {
        margin-bottom: 10px;
        margin-top: 10px;
    }

    .blog_left .service_box {
        margin-bottom: 5px;
    }

    .blog_left .service_box .title {
        text-align: center;
    }
}

@media screen and (max-width: 950px) {
    .slider {
        height: 410px;
    }

    .slider .slider_holder {
        height: 400px;
    }

    .slider .slider_holder .slider_btn {
        top: -220px;
    }

    .slider .slider_holder .slider_text .title {
        font-size: 40pt;
    }

    .menu_bar .menu {
        display: none;
    }

    .menu_bar .fa-bars {
        display: inline-block;
    }

    .filter_holder {
        display: block;
        position: fixed;
        background: #ffffff;
        top: 0;
        right: -300px;
        bottom: 0;
        left: 0;
        overflow: auto;
        z-index: 11;
        width: 300px;
        padding: 0 10px;
        box-sizing: border-box;
    }

    .filter_btn_show {
        display: block;
    }

    .main_holder {
        width: 100%;
    }

    .close_side {
        display: block;
    }

    .footer {
        background: linear-gradient(324deg, #D70D59 0%, #FC3924 100%);
    }

    .footer .image_right {
        display: block;
        width: 100%;
        text-align: center;
        padding: 50px 0;
    }

    .footer .image_left {
        display: block;
        width: 100%;
        text-align: center;
        padding: 10px 0;
    }

    .footer .footer_title_holder {
        padding-right: 0;
    }

    .footer .menu_address .footer_menu {
        width: 100%;
    }

    .footer .copyright {
        margin-top: 20px;
    }
}

@media screen and (max-width: 850px) {
    .important_section .title_dark {
        display: block;
        width: calc(100% - 10px);
    }

    .important_section .service_box {
        width: calc(50% - 18px);
        margin-left: 10px;
    }
}

@media screen and (max-width: 800px) {
    .compare_box .item_small {
        width: calc(50% - 25px);
    }

    .chevron {
        display: none;
    }

    .holder_scroll {
        overflow: auto;
    }
}

@media screen and (max-width: 770px) {
    .slider {
        height: 360px;
    }

    .slider .slider_holder {
        height: 350px;
    }

    .slider .slider_holder .slider_btn {
        top: -190px;
    }

    .service_box {
        width: calc(100% - 5px);
    }

    .title_holder {
        float: none;
    }

    .title_holder .main_title,
    .title_holder .sub_title {
        display: block;
        text-align: center;
    }

    .blog_holder .btn_primary,
    .product_most .btn_primary,
    .important_section .btn_primary {
        margin: 15px;
    }

    .title_holder .sub_title {
        margin-bottom: 5px;
    }
}

@media screen and (max-width: 700px) {
    .main_holder .item_50 {
        width: calc(100% - 20px);
    }

    .main_holder .item_33 {
        width: calc(100% - 21px);
    }
}

@media screen and (max-width: 600px) {
    .slider {
        height: 260px;
    }

    .slider .slider_holder {
        height: 250px;
    }

    .slider .slider_holder .slider_btn {
        display: none;
    }

    .blog_right .service_box {
        width: calc(100% - 5px);
    }

    .main_box {
        padding: 10px 8px;
    }

    .side_main .side_box {
        padding: 10px 8px;
    }

    .lesson_holder .btn_play_down,
    .lesson_holder .btn_private {
        display: block;
    }

    .lesson_holder .lesson {
        width: 100%;
    }

    .student_box {
        width: calc(100% - 61px);
        margin: 8px;
    }

    .teacher_holder img {
        display: block;
        margin: auto;
    }

    .teacher_holder .teacher_about {
        display: block;
        width: 100%;
        text-align: center;
        padding-right: 10px;
    }

    .item_inside_post .item_img,
    .item_inside_post .item_content {
        display: block;
        width: 100%;
    }
}

@media screen and (max-width: 500px) {
    .menu_bar .btn .fa-circle-user,
    .menu_bar .btn .btn_main span {
        display: none;
    }

    .menu_bar .btn .fa-user {
        display: inline-block;

    }

    .important_section .service_box {
        width: calc(100% - 18px);
    }

    .detail_img {
        display: none;
    }
}