@charset "utf-8";

body {
    display: flex;
    flex-direction: column;
}

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

.loading {
    display: block;
    text-align: center;
    padding: 70px 0;
    box-sizing: border-box;
}

.loading i {
    display: block;
    font-size: 35px;
    color: #f34616;
}

.loading span {
    display: block;
    margin: 20px 0;
    color: #f34616;
}

nav {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 15px 0;
    box-sizing: border-box;
    z-index: 8;
    position: relative;
}

.nav .container {
    display: flex;
    flex-direction: row;
    align-items: start;
    gap: 10px;
}

.nav .menu_res_btn {
    display: none;
    color: var(--dark);
    padding: 12px 10px;
    width: 40px;
    height: 40px;
    box-sizing: border-box;
    font-size: 12pt;
    position: relative;
    cursor: pointer;
}

.logo {
    display: flex;
    align-items: center;
    height: 40px;
    gap: 5px;
}

.logo .img {
    display: flex;
    align-items: center;
}

.logo img,
.logo .img img {
    height: 40px;
    object-fit: contain;
}

.logo .title {
    font-weight: 800;
    color: var(--dark-500);
    font-size: var(--font_x);
    font-family: var(--font_head);
    line-height: 0.4;
    height: fit-content;
    text-align: center;
}

.side_menu {
    display: block;
    width: 100%;
    height: calc(100vh - 95px);
    overflow: auto;
    padding: var(--m) var(--m) var(--x) var(--m);
    box-sizing: border-box;
}

.side_menu ul {
    list-style-type: none;
}

.side_menu ul li {
    width: 100%;
    border-radius: var(--radius_25);
    margin-bottom: var(--margin_s);
}

.side_menu ul .select {
    background: var(--light);
}

.side_menu ul .select i {
    font-weight: 900 !important;
}

.side_menu ul li a {
    display: block;
    color: var(--dark2);
    font-weight: 300;
    padding: var(--m) var(--x);
    box-sizing: border-box;
}

.side_menu ul li:hover {
    background: var(--light);
}

.side_menu ul .select a span {
    font-weight: 400;
}

.side_menu ul li a i {
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    width: 25px;
    font-size: var(--l);
}

.side_menu ul li a .alert_menu {
    float: left;
    width: 20px;
    height: 20px;
    border-radius: var(--radius_15);
    background: var(--red);
    color: var(--white);
    padding: 2px;
    box-sizing: border-box;
    text-align: center;
    font-size: 8pt;
}

.nav .container .menu {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 10px;
}

.nav .menu_res {
    display: block;
    flex-direction: column;
    align-items: flex-start;
    position: fixed;
    right: -1000%;
    top: 0;
    bottom: 0;
    width: calc(100% - 80px);
    height: 100vh;
    background: var(--white);
    z-index: 22;
    overflow: hidden;
    border-left: 1px solid var(--pink);
    box-shadow: -2px -2px 0 var(--pink);
}

.nav .menu_res .logo {
    background-color: var(--white);
    width: 100%;
    height: 110px;
    padding: 24px;
    box-sizing: border-box;
    border-bottom: 1px solid var(--dark);
    box-shadow: 0 2px 0 var(--dark);
    margin-bottom: 10px;
}

.nav .menu .btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px;
    box-sizing: border-box;
    color: var(--dark);
}

.nav .menu_res .btn {
    color: var(--dark);
    width: 100%;
}

.nav .menu_res .title {
    font-weight: 600;
    margin: 15px;
}

.nav .menu_res .title i {
    text-align: center;
}

.nav .menu .btn:hover {
    color: var(--dark);
}

.nav .menu .btn i {
    margin: 4px;
    text-align: center;
}

.nav .menu .btn_list {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 8px 24px !important;
}

.nav .menu .btn_list .sub_title {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    font-weight: 500;
    cursor: pointer;
}

.menu_res .bottom_list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    background: var(--light2);
    margin-top: 10px;
    height: 0;
    overflow: hidden;
}

.menu_res .bottom_list .btn {
    box-sizing: border-box;
    color: var(--gray);
    font-weight: 500;
    padding: 8px 16px;
}

.nav_action {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 10px;
}

.nav_action .btn_primary span {
    font-weight: 700;
}

.nav_action .action_btn {
    box-sizing: border-box;
    position: relative;
    cursor: pointer;
}

.nav .nav_middle {
    align-items: center;
    gap: 5px;
}

.select_option {
    align-items: center;
    background: var(--gray_100);
    padding: 8px var(--margin_x);
    box-sizing: border-box;
    border-radius: var(--radius_10);
    cursor: pointer;
    gap: 5px;
    position: relative;
    height: 39px;
}

.select_option .btn_img {
    width: 12px;
    object-fit: contain;
}

.select_option .result {
    display: flex;
    flex-direction: column;
    gap: 5px;
    top: 50px;
    right: 0;
    margin: auto;
    position: absolute;
    background: var(--white);
    padding: var(--margin_s);
    box-sizing: border-box;
    border-radius: var(--radius_10);
    max-height: 300px;
    overflow: auto;
    width: 350px;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.15);
    scale: 0;
}

.select_option .result .item_holder {
    display: flex;
    flex-direction: column;
    gap: 5px;
    overflow: auto;
}

.select_option .result .item_holder .item {
    padding: var(--margin_m) var(--margin_x);
    box-sizing: border-box;
    border-radius: var(--radius_5);
}

.select_option .result .item_holder .item:hover {
    background: var(--blue_100);
}

.select_option .result .input {
    align-items: center;
    background: var(--light);
    padding: 5px;
    border-radius: var(--radius_5);
    justify-content: space-between;
}

.select_option .result .input input {
    width: calc(100% - 20px);
    border: none;
    font-size: var(--font_r) !important;
}

.select_option .result .input .btn_img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    padding-left: 5px;
    box-sizing: border-box;
}

.top_box {
    display: flex;
    position: fixed;
    top: -150px;
    right: 0;
    left: 0;
    width: calc(100% - 20px);
    max-width: 1280px;
    background: var(--gray_100);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.70);
    justify-content: space-between;
    align-items: center;
    padding: 10px 50px;
    box-sizing: border-box;
    border-radius: 0 0 10px 10px;
    z-index: 11;
    height: 100px;
    margin: auto;
}

.top_box_result {
    display: none;
    position: fixed;
    right: 0;
    left: 0;
    width: calc(100% - 20px);
    max-width: 1280px;
    background: var(--gray_100);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.70);
    padding: 10px;
    box-sizing: border-box;
    border-radius: 10px;
    z-index: 12;
    min-height: 350px;
    margin: auto;
}

.top_box_result .blog .blog_main .item {
    width: calc(25% - 8px);
}

.top_box .btn_img {
    width: 25px;
    cursor: pointer;
    height: 25px;
    filter: invert(50%) sepia(51%) saturate(8646%) hue-rotate(346deg) brightness(104%) contrast(97%);
}

.top_box .search_box input {
    font-size: 11pt;
    border: 1px solid var(--gray_200);
    border-radius: var(--radius_10);
}

.user_page .nav_middle {
    width: 100%;
}

.top_box .search_box {
    width: calc(100% - 150px);
}

.top_box .btn_orange {
    padding: var(--margin_m);
    margin: 0;
}

.top_box .search_box span {
    width: calc(100% - 25px);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    color: var(--gray_500);
}

.cart_notification {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 20px;
    height: 20px;
    border-radius: var(--radius_15);
    display: block;
    z-index: 1;
    background: var(--red--500);
    color: var(--light);
    font-size: 8pt;
    text-align: center;
    box-sizing: border-box;
    padding-top: 2px;
}

.search_holder_head {
    width: 900px;
    max-height: 500px;
    overflow: auto;
    border: 1px solid var(--dark-100);
    box-shadow: 2px 2px 0 var(--dark-100);
    margin: auto;
    box-sizing: border-box;
    background: var(--white);
    display: block;
    position: fixed;
    top: 97px;
    right: 0;
    left: 0;
    z-index: 20;
    padding: var(--margin_x);
    transition: all 0.2s ease-in-out;
    transform: scale(0, 0);
    border-radius: var(--radius_25);
}

.search_holder_head .head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    border-bottom: 1px solid var(--light2);
    padding-bottom: 5px;
    margin-bottom: 5px;
}

.search_holder_head .search_box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 5px 0;
}

.search_holder_head .search_box input {
    box-shadow: none !important;
    width: calc(100% - 50px);
    background: none;
}

.search_product_list {
    display: flex;
    width: 100%;
    overflow: auto;
    gap: 10px;
    align-items: start;
    flex-wrap: wrap;
    max-height: 170px;
    padding: 10px 0;
    box-sizing: border-box;
    border-bottom: 1px solid var(--red);
}

.search_product_list .card_item {
    display: flex;
    gap: 5px;
    width: calc(33% - 20px);
    height: 60px;
    align-items: center;
    border-radius: var(--radius_5);
    color: var(--dark);
    border: 1px solid var(--light);
}

.search_product_list .card_item .card_detail {
    display: flex;
    flex-direction: column;
    align-items: start;
}

.search_product_list .card_item .card_detail .title {
    color: var(--dark);
    font-weight: 500;
}

.search_product_list .card_item .card_detail .sub_title {
    color: var(--gray);
}

.search_product_list .card_item .card_img {
    width: 60px;
    height: 100%;
}

.search_product_list .card_item .card_img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.search_list_history {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 10px;
    margin-bottom: var(--margin_m);
    padding: 10px 0;
}

.search_list_history .list img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.search_list_history .list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    width: 100%;
    overflow: auto;
}

.search_holder_head .head .title,
.search_list_history .title {
    color: var(--dark);
    font-family: var(--font_primary);
    font-weight: 500;
    font-size: var(--font_r);
}

.search_holder_head .btn_img {
    cursor: pointer;
}

.search_list_history a {
    display: flex;
    align-items: center;
    gap: 5px;
    border-radius: var(--radius_25);
    color: var(--dark-500) !important;
    padding: var(--margin_s);
    border: 1px solid var(--gray_300);
    overflow: hidden;
}

.search_list_history a:hover {
    border: 1px solid var(--red--500);
}

.menu_holder ul {
    align-items: center;
    gap: 30px;
    list-style: none;
}

.menu_holder .logo {
    display: none;
    order: unset !important;
}

.menu_holder ul li {
    display: flex;
    align-items: center;
    gap: 5px;
}

.menu_holder ul li a {
    color: var(--dark-500);
}

.plane_detail .nav .menu_holder {
    width: 100%;
    padding: 20px 5px;
    box-sizing: border-box;
    gap: 20px;
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.plane_detail .nav .menu_holder .btn_border_gray {
    margin: 0;
    padding: 5px;
}

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

.hero {
    margin-bottom: 24px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    border-radius: var(--radius_10);
}

.hero .main_top_slider {
    width: 100%;
    height: 400px;
    padding: 15px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero .main_top_slider .slider_controller {
    display: block;
    position: absolute;
    top: calc(50% - 20px);
    right: 0;
    left: 0;
    width: 100%;
    height: 0;
}

.hero .main_top_slider .slider_controller i {
    color: var(--white);
    font-size: 30px;
    text-shadow: var(--box_shadow);
    cursor: pointer;
    padding: 5px 10px;
}

.hero .main_top_slider .slider_controller .left {
    float: left;
}

.hero .main_top_slider .slider_controller .right {
    float: right;
}

.hero .main_top_slider .slider_detail {
    display: block;
    width: 40%;
    border-radius: var(--radius_10);
    padding: 16px 30px;
    box-sizing: border-box;
    color: var(--dark-500);
}

.hero .main_top_slider .slider_detail .title {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 22pt;
    font-weight: 700;
    font-family: var(--kalameh);
    margin-bottom: 8px;
    color: var(--dark-500);
}

.hero .main_top_slider .slider_detail .title:before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 50px;
    background: var(--orange);
    border-radius: var(--radius_oval);
}

.hero .main_top_slider .slider_detail .title strong {
    font-weight: 700;
    color: var(--orange);
}

.hero .main_top_slider .slider_detail .text {
    display: block;
    font-weight: 400;
    font-size: 12pt;
    text-align: justify;
    font-family: var(--kalameh);
    margin-bottom: 20px;
    overflow: hidden;
}

.hero .main_top_slider .slider_detail .btn_orange {
    display: block;
    padding: 10px;
    width: 150px;
}

.hero .main_top_slider .slider_detail .dots {
    display: block;
    text-align: left;
    direction: ltr;
}

.hero .main_top_slider .slider_detail .dots span {
    display: inline-block;
    vertical-align: middle;
    margin-right: 4px;
    padding: 4px;
    box-sizing: border-box;
    width: 10px;
    height: 10px;
    border-radius: var(--radius_10);
    background: var(--light);
    cursor: pointer;
}

.hero .main_top_slider .slider_detail .dots .select {
    background: var(--orange--500);
    width: 30px;
}

.hero .main_top_slider .slider_img {
    width: calc(60% - 10px);
    height: 100%;
    border-radius: var(--radius_10);
    overflow: hidden;
}

.hero .main_top_slider .slider_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

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

/* animation line wraper */

.animation_line {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 50%;
    overflow: hidden;
    transform: translateX(-50%);
}

.animation_line span {
    position: absolute;
    z-index: 1;
    top: -275px;
    animation: star_down_one 6s infinite linear;
    opacity: 0;
}

.animation_line.dark_bg {
    max-width: 1170px;
}

.animation_line.dark_bg span {
    transform: rotate(180deg);
}

.animation_line span:first-child {
    left: -17%;
    animation-delay: 3s;
}

.animation_line span:nth-child(2) {
    left: 0;
    animation-delay: 5s;
}

.animation_line span:nth-child(3) {
    left: 17%;
    animation-delay: 1s;
}

.animation_line span:nth-child(4) {
    left: 34%;
    animation-delay: 4s;
}

.animation_line span:nth-child(5) {
    left: 51%;
    animation-delay: 7s;
}

.animation_line span:nth-child(6) {
    left: 68%;
}

.animation_line span:nth-child(7) {
    left: 85%;
    animation-delay: 3s;
}

.animation_line span:nth-child(8) {
    left: 99%;
    animation-delay: 2s;
}

.animation_line span:nth-child(9) {
    left: 117%;
    animation-delay: 5s;
}

@keyframes star_down_one {
    0% {
        opacity: 0;
        top: -250px;
    }

    10% {
        opacity: 0.25;
    }

    90% {
        opacity: 1;
    }

    100% {
        top: 100%;
        opacity: 0;
    }
}


.section {
    margin: 50px auto;
}

.section .nav {
    background: transparent;
    display: flex;
    align-items: center;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--secondary);
}

.section .nav .btn_border_orange {
    padding: 5px 10px;
}

.section .nav .title {
    display: flex;
    align-items: center;
    font-family: var(--kalameh);
    font-weight: bold;
    font-size: 14pt;
    gap: 5px;
}

.section .nav .title:before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 30px;
    background: var(--orange);
    border-radius: var(--radius_oval);
}

.section .service {
    flex-wrap: wrap;
}

.section .service .item {
    width: calc(33% - 20px);
    padding: 16px 8px;
    box-sizing: border-box;
    background: var(--white);
    margin: 10px;
    border-radius: var(--radius_10);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    color: var(--dark);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.section .service .item:hover {
    transform: scale(1.02);
    box-shadow: 0 0 5px rgba(68, 65, 64, 0.4);
}

.section .service .item .title {
    display: flex;
    gap: 5px;
    align-items: center;
    margin-top: 10px;
    margin-bottom: 3px;
}

.section .service .item img {
    width: 100%;
    height: 100px;
    object-fit: contain;
}

.section .service .item .title span {
    font-weight: 700;
    font-family: var(--kalameh);
}

.section .service .item .text {
    display: block;
    width: 100%;
    text-align: center;
    height: 48px;
    overflow: hidden;
}

.section .service .item .btn_secondary {

}

.w_2_main {
    background-position: left;
    background-attachment: fixed;
    background-size: cover;
    width: 100%;
    overflow: hidden;
    padding: 24px;
    box-sizing: border-box;
    background-blend-mode: soft-light;
}

.w_2_white {
    width: 100%;
    overflow: hidden;
    background-image: linear-gradient(to top, var(--dark-500), var(--dark-900));
    padding: 24px;
    box-sizing: border-box;
    background-blend-mode: unset;
}

.w_2_main .container {
    justify-content: space-between;
    align-items: center;
    backdrop-filter: blur(20px);
    border-radius: var(--radius_15);
    background: #00000050;
    padding: 20px;
    box-sizing: border-box;

}

.place4 .container {
    background: #000000dd;

}

.w_2_main .wr {
    color: var(--white);
    display: flex;
    flex-direction: column;
    align-items: start;
    padding: 0 8px;
}

.bio .wr {
    width: 350px;
}

.place4 .wr {
    width: 350px;
}

.w_2_main .wr .title {
    display: block;
    width: 100%;
    font-size: 16pt;
    font-family: var(--kalameh);
    font-weight: 700;
    margin-bottom: 8px;
    border-radius: var(--radius_5);
    box-sizing: border-box;
}

.w_2_white .wr .sub_title {
    color: var(--white);
    font-size: 16pt;
    font-family: var(--kalameh);
    font-weight: 700;
    display: block;
    margin-bottom: 8px;
    box-shadow: inset -80px 0 0 var(--yellow-500);
    padding-right: 10px;
    border-radius: 0 10px 10px 0;
}

.w_2_main .wr .detail {
    padding: 16px;
    box-sizing: border-box;
    width: 100%;
    border-radius: var(--radius_10);
    margin-bottom: 16px;
}

.w_2_white .wr .detail {
    color: var(--white);
    background-color: var(--dark-500);
}

.w_2_main .wr .detail .title {
    display: block;
    font-size: 12pt;
    font-weight: 500;
    color: var(--white);
    background-color: transparent;
}

.w_2_main .wr .detail .text {
    display: block;
    text-align: justify;
}

.w_2_main .wr .detail .text a {
    font-weight: 700;
    color: var(--orange--300);
}

.w_2_main .video_img {
    display: block;
    width: calc(50% - 50px);
    height: 300px;
    overflow: hidden;
    border-radius: var(--radius_10);
    position: relative;
    justify-content: end;
}

.place4 .video_img,
.bio .video_img {
    width: calc(100% - 340px);
    height: 650px;
}

.w_2_white .video_img .img {
    height: 250px;
}

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

.w_2_main .video_img:hover .img {
    filter: blur(2px);
}

.w_2_white .video_img:hover .img {
    filter: unset !important;
}

.w_2_main .video_img .video_play_icon {
    font-size: 70px;
    width: 70px;
    height: 70px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
    cursor: pointer;
}

.w_2_main .video_img:hover .video_play_icon {
    transform: scale(1.5);
    color: var(--orange);
    text-shadow: 0 0 2px rgba(65, 68, 64, 0.7);
}

.watermark {
    position: absolute;
    bottom: 20px;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
}

.watermark .logo {
    width: 20px;
    height: 22px;
}

.watermark .duration {
    padding: 4px 8px;
    border-radius: var(--radius_10);
    background: #090B17ce;
    color: var(--white);
}

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

.archive .tutorial {
    width: calc(100% - 280px);
}

.tutorial .item {
    display: inline-block;
    vertical-align: top;
    width: 300px;
    border-radius: var(--radius_10);
    box-shadow: var(--box_shadow);
    overflow: hidden;
}

.archive .tutorial .item {
    width: calc(33% - 5px);
}

.tutorial .item .item_img {
    display: block;
    width: 100%;
    height: 100px;
}


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

.work_holder .item .item_img {
    width: 100%;
    height: 140px;
    position: relative;
}

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

.work_holder .item .item_img .profile {
    width: 60px;
    height: 60px;
    border-radius: var(--radius_oval);
    margin: auto;
    object-fit: cover;
    position: absolute;
    right: 10px;
    border: 3px solid var(--blue_100);
    bottom: -30px;
    padding: 1px;
}

.blog .blog_main .item .item_detail,
.blog .most_visit .item .item_detail,
.tutorial .item .item_detail {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    padding: 35px 10px 8px 10px;
    box-sizing: border-box;
    justify-content: space-between;
}

.blog .most_visit .item .item_detail {
    max-height: calc(100% - 100px);
    height: fit-content !important;
}

.blog .blog_main .item .blog_top,
.blog .most_visit .item .blog_top,
.tutorial .item .blog_top {
    width: 100%;
    height: 120px;
}

.blog .blog_main .item .item_detail .title,
.blog .most_visit .item .item_detail .title,
.tutorial .item .item_detail .title {
    font-family: var(--kalameh);
    color: var(--dark-500);
    margin-bottom: 8px;
    display: block;
    width: 100%;
    font-weight: 500;
    font-size: 10pt;
    text-align: justify;
}

.blog .most_visit .item .item_detail .sub_title,
.blog .blog_main .item .item_detail .sub_title,
.tutorial .item .item_detail .sub_title {
    align-items: center;
    font-size: 9pt;
    color: var(--gray_700);
}

.blog .most_visit .item .item_detail .sub_title i,
.blog .blog_main .item .item_detail .sub_title i,
.tutorial .item .item_detail .sub_title i {
    margin-left: 8px;
    color: var(--gray_500);
}

.blog .blog_main .item .item_detail .text,
.tutorial .item .item_detail .text {
    text-align: justify;
    height: 108px;
    font-size: 10pt;
    margin-bottom: 8px;
}

.blog .most_visit .item .item_detail .text {
    text-align: justify;
    height: calc(100% - 65px);
    margin-bottom: 8px;
}

.blog .most_visit .item .item_footer,
.blog .blog_main .item .item_footer,
.tutorial .item .item_footer {
    justify-content: space-between;
    width: 100%;
    align-items: center;
}

.blog_holder {
    position: relative;
}

.blog_holder .blog_back {
    display: inline-block;
    width: calc(100% - 200px);
    margin: auto;
    background: var(--dark-300);
    border-radius: 50px;
    height: 180px;
}

.blog_holder .item_holder {
    position: absolute;
    bottom: -60px;
    width: 100%;
    overflow: hidden;
    padding-bottom: 30px;
}

.blog_holder .blog_item {
    display: inline-block;
    width: 320px;
    border-radius: 20px;
    margin: 50px 8px 0 8px;
    padding: 10px;
    box-sizing: border-box;
    background: var(--white);
    box-shadow: 0 0 10px 0 var(--gray_200);
}

.blog_holder .blog_item .title {
    font-weight: 700;
    font-family: var(--kalameh);
    color: var(--dark);
    margin-bottom: 8px;
    display: block;
    margin-top: -40px;
    width: 100%;
}

.blog_holder .blog_item .sub_title {
    align-items: center;
    gap: 5px;
}

.blog_holder .blog_item .sub_title i {
    font-size: 10px;
}

.blog_holder .blog_item .btn_orange {
    margin: 0;
    float: right;
    font-size: 10pt;
}

.blog_holder .blog_item .text {
    font-weight: 200;
    text-align: left;
    color: var(--gray_400);
}

.blog_holder .blog_top {
    position: relative;
    top: -50px;
    text-align: left;
}

.blog_holder .blog_img {
    width: 170px;
    height: 100px;
    vertical-align: bottom;
    border-radius: var(--radius_25);
    border: 5px solid var(--white);
}

.blog_holder .blog_top .date {
    vertical-align: bottom;
    margin-left: 15px;
    font-size: 9pt;
}

.cost {
    color: var(--orange--500);
    text-decoration: line-through;
}

.tutorial .item .item_footer .wr {
    justify-content: flex-end;
}

.tutorial .item .item_footer .cost_off {
    font-size: 8pt;
    align-items: center;
}

.tutorial .item .item_footer .cost_off strong {
    font-size: 12pt;
    font-weight: 700;
    margin-right: 8px;
}

.blog .most_visit .item .item_footer .date,
.blog .blog_main .item .item_footer .date,
.tutorial .item .item_footer .date {
    align-items: center;
    font-size: 9pt;
}

.blog .most_visit .item .item_footer .date i,
.blog .blog_main .item .item_footer .date i,
.tutorial .item .item_footer .date i {
    margin-left: 8px;
    color: var(--gray_500);
}

.blog .most_visit .item .item_footer .btn_orange,
.blog .blog_main .item .item_footer .btn_orange {
    padding: 4px 8px;
    font-size: 10pt;
}

.holder_scroll_btn {
    display: flex;
    align-items: center;
    justify-content: end;
    width: 100%;
    margin: auto;
    height: 30px;
    gap: 10px;
}

.holder_scroll_btn i {
    width: 30px;
    height: 30px;
    text-align: center;
    padding-top: 5px;
    box-sizing: border-box;
    font-size: 20px;
    background: #090B17ce;
    border-radius: var(--radius_10);
    color: var(--white);
    cursor: pointer;
}

.holder_scroll_btn i:hover {
    background: var(--orange);
}

.main_table {
    align-items: flex-start;
    justify-content: space-between;
}

.main_table .item {
    width: calc(33% - 1px);
}

.main_table .item .table_head {
    text-align: center;
    margin-bottom: 8px;
    background: var(--green_700);
    color: var(--white);
    font-size: 8pt;
    justify-content: center;
    align-items: center;
    padding: 2px 0;
}

.main_table .item:first-child .table_head {
    border-radius: 0 5px 0 0;
}

.main_table .item:last-child .table_head {
    border-radius: 5px 0 0 0;
}

.main_table .item .table_head strong {
    display: inline-block;
    font-weight: 700;
    font-size: 12pt;
    margin: 0 5px;
}

.main_table .item .item_detail {
    padding: 8px 24px;
    align-items: center;
    background: var(--light);
    border-radius: var(--radius_10);
    margin-bottom: 8px;
}

.main_table .item .item_detail .title {
    font-weight: 700;
    font-family: var(--kalameh);
}

.main_table .item .item_detail .item_row {
    margin-top: 8px;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.main_table .item .item_detail .item_row .title {
    font-weight: 500;
}

.main_table .item .table_footer {
    display: block;
    width: 20px;
    height: 20px;
    border-radius: var(--radius_10);
    margin: auto;
}

.b_red {
    background: var(--red);
}

.b_green {
    background: var(--green);
}

.b_orange {
    background: var(--orange);
}

.b_blue {
    background: var(--blue_500);
}

.blog {
    justify-content: space-between;
    gap: 10px;
}

.blog .most_visit {
    width: 400px;
}

.blog .most_visit .item {
    width: 100%;
    height: 100%;
    box-shadow: 0 0 5px rgba(68, 65, 64, 0.2);
    border-radius: var(--radius_10);
    overflow: hidden;
    background: var(--white);
}

.blog .most_visit .item .item_img {
    display: block;
    width: 100%;
    flex: 1;
}

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

.blog .blog_main {
    width: calc(100% - 410px);
    height: 100%;
    flex-wrap: wrap;
    justify-content: start;
    gap: 10px;
}

.archive .tutorial .main {
    flex-wrap: wrap;
    justify-content: start;
    gap: 10px;
}

.blog .blog_main .main {
    flex-wrap: wrap;
    gap: 10px;
}

.blog .blog_main .item {
    width: calc(25% - 10px);
    box-shadow: 0 0 5px rgba(68, 65, 64, 0.2);
    border-radius: var(--radius_10);
    overflow: hidden;
    border-bottom: 5px solid var(--gray_200);
}

.faq_holder .item {
    width: 100% !important;
    padding: 10px;
    box-sizing: border-box;
    text-align: right;
    border: 1px solid var(--light);
    align-items: start;
    justify-content: start;
    color: var(--dark);
    gap: 10px;
}

.blog .blog_main .item .item_img {
    width: 100%;
    height: 120px;
    object-fit: cover;
}

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

.footer .footer_header {
    justify-content: space-between;
    padding: 16px 0;
}

.footer .footer_header .item {
    width: 33%;
}

.footer .footer_main .social .title,
.footer .footer_header .item .title {
    font-weight: 700;
    font-family: var(--kalameh);
    color: var(--dark);
    margin-bottom: 12px;
    display: block;
    width: 100%;
}

.footer .footer_header .item .menu a {
    color: var(--dark-300);
    margin-bottom: 8px;
}

.footer .footer_header .item .text {
    text-align: justify;
    color: var(--dark-500);
    margin-bottom: 8px;
}

.footer .footer_main {
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-top: 1px solid var(--gray_200);
    border-bottom: 1px solid var(--gray_200);
}

.footer .footer_main .logo {
    display: flex;
    align-items: center;
}

.footer .footer_main .logo img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    margin-left: 8px;
}

.footer .footer_main .logo span {
    color: var(--orange--500);
    font-family: var(--kalameh);
    font-size: 12pt;
    font-weight: 700;
}

.footer .footer_main .social .flex_row {
    gap: 8px;
}

.footer .footer_main .social .flex_row a {
    width: 40px;
    height: 40px;
    border-radius: var(--radius_10);
    display: grid;
    place-items: center;
    font-size: 22px;
    color: var(--dark-500);
    border: 1px solid var(--dark-500);
}

.footer .footer_main .social .flex_row a:hover {
    color: var(--orange);
}

.footer .footer_footer {
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    color: var(--dark-500);
}

.footer .footer_footer .copy_right strong {
    font-weight: 700;
    font-family: var(--kalameh);
    color: var(--dark-500);
}

.footer .footer_footer a {
    font-weight: 700;
    font-family: var(--kalameh);
    color: var(--orange);
}

.footer .footer_footer .copy_right_link a {
    font-weight: 700;
    font-family: var(--kalameh);
    color: var(--orange);
}

/*******************************************************/
.top_head {
    width: 100%;
    border-radius: var(--radius_10);
    align-items: center;
    justify-content: center;
    background-size: cover;
    padding: 20px 0;
    background-position: center;
}

.hero .top_head {
    padding: 25px 0;
    background-image: url("../img/top_head.webp");
}

.top_head .title {
    font-weight: 700;
    font-family: var(--kalameh);
    color: var(--white);
    margin-bottom: 8px;
    padding: 3px 5px;
    background: #2F2E2Edd;
    border-radius: var(--radius_5);
}

.top_head .bredcrumbs {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 3px 5px;
    border-radius: var(--radius_5);
    background: var(--gray_100);
}

.user_page .bredcrumbs a,
.top_head .bredcrumbs a {
    color: var(--dark-300);
}

.user_page .bredcrumbs .btn_img {
    width: 10px;
    height: 10px;
    object-fit: contain;
}

.user_page .bredcrumbs i,
.top_head .bredcrumbs i {
    color: var(--dark-300);
    font-size: 12px;
    margin-left: 4px;
}

.user_page .bredcrumbs .current,
.top_head .bredcrumbs .current {
    font-weight: 800;
    font-family: var(--font_head);
    color: var(--orange--500);
}

.user_page .bredcrumbs a:hover,
.top_head .bredcrumbs a:hover {
    color: var(--orange--500);
}

.side_bar {
    width: 270px;
    box-shadow: var(--box_shadow);
    border-radius: var(--radius_10);
    gap: 16px;
}

.side_bar .item .num {
    font-size: var(--font_x);
    font-weight: 950;
    width: 20px;
    text-align: center;
}

.side_bar .side_bar_title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--dark-500);
    margin-bottom: 12px;
    width: 100%;
    padding: 10px 10px 20px 10px;
    box-sizing: border-box;
}

.side_bar .side_bar_title span {
    font-weight: 600;
    font-family: var(--kalameh);
}

.side_bar .side_bar_title i {
    display: none;
    font-size: 18px;
}

.side_bar {
    width: 270px;
    box-shadow: var(--box_shadow);
    border-radius: var(--radius_10);
    gap: 16px;
}

.side_bar .side_bar_title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--dark-500);
    margin-bottom: 12px;
    width: 100%;
    padding: 10px 10px 20px 10px;
    box-sizing: border-box;
}

.side_bar .side_bar_title span {
    font-weight: 600;
    font-family: var(--kalameh);
}

.side_bar .side_bar_title i {
    display: none;
    font-size: 18px;
}

.side_bar .item {
    padding: 10px !important;
    justify-content: start !important;
}

.side_bar .item .item_detail {
    align-items: center;
    margin-bottom: 8px;
    padding-right: 8px;
    box-sizing: border-box;
    cursor: pointer;
}

.side_bar .item .title {
    color: var(--dark-500);
    margin-bottom: 8px;
    display: block;
    width: 100%;
}

.side_bar .item .title span {
    font-weight: 700;
    font-family: var(--kalameh);
}

.side_bar .item .title i {
    margin-left: 8px;
}

.side_bar .item .num {
    font-size: var(--font_x);
    font-weight: 950;
}

.side_bar .item .item_detail:hover i,
.side_bar .item .item_detail:hover .title {
    color: var(--orange);
}

.side_bar .item .item_detail i {
    font-size: 10px;
    margin-left: 4px;
    color: var(--dark-500);
}

.side_bar .item .item_detail .title {
    margin-bottom: 0;
}

.side_bar .search {
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    box-shadow: inset 0 0 2px rgba(68, 65, 64, 0.2);
    border-radius: var(--radius_10);
}

.side_bar .search input {
    margin-bottom: 0;
    border: none;
    font-size: 8pt;
    font-weight: 300;
}

.side_bar .list_open {
    padding-right: 15px;
    box-sizing: border-box;
}

.side_bar .btn_primary {
    justify-content: center;
}

.side_bar .current {
    color: #2d8ac7;
    font-weight: 400;
}

.side_bar .author {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.side_bar .author .right {
    width: calc(100% - 20px);
    display: flex;
    align-items: center;
    gap: 10px;
}

.side_bar .author .right img {
    width: 65px;
    height: 65px;
    border-radius: var(--radius_50);
    object-fit: cover;
}

.side_bar .list {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 15px;
    box-sizing: border-box;
    align-items: start;
}

.side_bar .list .list_title {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--dark-700);
    font-weight: 600;
}

.side_bar .tags .text {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    font-size: var(--font_r);
    color: var(--gray_500);
    padding: 1px 3px;
    gap: 5px;
}


.side_bar .tags .text a {
    color: var(--blue_600);
}

.filter_card {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    max-height: calc(100% - 115px);
    overflow: auto;
}

.search_side {
    margin: 0 auto 10px auto;
    width: calc(100% - 24px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
    border: 1px solid transparent;

}

.search_side input {
    padding: 7px 12px;
    width: calc(100% - 32px);
}

.search_side:hover {
    border: 1px solid var(--orange--500);
    border-radius: var(--radius_10);
    transition: all 1s ease-in-out;
}

.search_side .btn_img {
    padding: 5px;
    cursor: pointer;
}

.side_bar .card_side {
    display: flex;
    flex-direction: column;
    margin-bottom: 16px;
    width: 100%;
    box-sizing: border-box;
    gap: 5px;
}

.card_side .card_title {
    display: flex;
    align-items: center;
    padding: 2px 5px;
    gap: 5px;
    font-weight: 800;
    font-family: var(--font_head);
    color: var(--dark-500);
}

.filter_card .card_side .card_title {
    padding: 10px 5px;
}

.toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--margin_m);
}

.toggle_holder {
    width: 30px;
    height: 17px;
    position: relative;
    border: 1px solid var(--secondary);
    box-shadow: 2px 2px 0 var(--secondary);
    cursor: pointer;
}

.toggle .title {
    font-family: var(--font_head);
    color: var(--dark);
}

.toggle .circle {
    display: block;
    width: 15px;
    height: 15px;
    background: var(--secondary);
    position: absolute;
    left: 1px;
    top: 0;
    bottom: 0;
    margin: auto;
}

.toggle_checked {
    border: 1px solid var(--orange--500);
}

.toggle_checked .circle {
    background: var(--orange--500);
    left: 14px;
}

.side_bar .card_side .list {
    max-height: 285px;
    overflow: auto;
    gap: 10px;
}

.side_bar .card_side .list .menu .title .list {
    width: 100%;
    padding-right: 6px;
    box-sizing: border-box;
    max-height: unset;
}

.side .card_side .side_sub_title {
    font-weight: 500;
    color: var(--dark);
    padding: 8px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.side_bar .card_side .menu {
    padding: 0 8px;
    box-sizing: border-box;
    margin-bottom: 8px;
}

.side_bar .card_side .cost_select {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
    font-weight: 300;
    padding: 4px 16px;
    box-sizing: border-box;
}

.side_bar .card_side .cost_select input {
    width: calc(100% - 20px);
    font-weight: 500;
    font-size: 12pt;
    text-align: left;
}

.side_bar .card_side .menu .title {
    display: flex;
    align-items: center;
    cursor: pointer;
    width: 100%;
    flex-wrap: wrap;
    gap: 5px;
}

.side_bar .card_side .menu .title span {
    width: calc(100% - 65px);
    color: var(--gray_700);
    font-size: 10pt;
    text-align: justify;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.side_bar .card_side .menu .num {
    width: 35px;
    height: 35px;
    display: grid;
    place-items: center;
    font-size: var(--font_x);
    font-family: var(--font_primary);
    background: var(--orange--100);
    border-radius: var(--radius_10);
    color: var(--gray_500);
}

.side_bar .card_side .menu:hover .num {
    background: var(--orange--500);
    border-radius: var(--radius_15);
    color: var(--white);
}

.side_bar .card_side .title i {
    display: inline-block;
    margin-left: 5px;
    color: var(--gray);
    font-size: 12px;
}

.side_bar .card_side .select i {
    color: var(--orange--500);
}

.side_bar .card_side .menu .title:hover span {
    color: var(--blue_500);
}

.side_bar .card_side .menu .result {
    margin-top: 6px;
    height: auto;
    display: block;
    overflow: hidden;
}

.side_bar .card_side .menu .result a {
    color: var(--gray);
    display: block;
    margin-bottom: 8px;
    margin-right: 8px;
    font-size: 9pt;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.side_bar .card_side .menu .result a:before {
    content: "";
    width: 5px;
    height: 5px;
    display: inline-block;
    margin-left: 8px;
    border: 2px solid var(--dark);
}

.side_bar .search {
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    box-shadow: inset 0 0 2px rgba(68, 65, 64, 0.2);
    border-radius: var(--radius_10);
}

.side_bar .search input {
    margin-bottom: 0;
    border: none;
    font-size: 8pt;
    font-weight: 300;
}

.side_bar .list_open {
    padding-right: 15px;
    box-sizing: border-box;
}

.side_bar .btn_primary {
    justify-content: center;
}

.side_bar .current {
    color: #2d8ac7;
    font-weight: 400;
}

.archive {
    flex-direction: row !important;
}

.archive .blog_main {
    width: calc(100% - 280px) !important;
}

.Error_holder {
    display: flex;
    width: 100%;
    text-align: center;
    margin: 50px auto;
    color: var(--orange);
    flex-direction: column;
    align-items: center;
}

.Error_holder i {
    display: block;
    font-size: 70px;
    margin-bottom: 20px;
}

.Error_holder span {
    display: block;
    font-size: 14pt;
    font-weight: 500;
    font-family: var(--kalameh);
    margin-bottom: 15px;
}

.page_number {
    display: block;
    width: 100%;
    margin: auto;
    text-align: center;
    padding: 50px 0;
    box-sizing: border-box;
}

.page_number a {
    display: inline-block;
    vertical-align: middle;
    margin: 0 10px;
    min-width: 35px;
    height: 35px;
    text-align: center;
    padding: 6px 10px;
    box-sizing: border-box;
    background: var(--white);
    color: var(--dark-300);
    border-radius: var(--radius_10);
    font-size: 12pt;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}

.page_number a:hover {
    color: var(--orange);
}

.page_number .active {
    cursor: pointer;
    color: var(--white) !important;
    background: var(--orange);
}

.sort_archive {
    align-items: center;
    padding: 8px 16px;
    box-sizing: border-box;
    border-radius: 5px 5px 0 0;
    box-shadow: var(--box_shadow);
    margin-bottom: 10px;
}

.sort_archive .title {
    font-weight: 700;
    font-family: var(--kalameh);
    color: var(--dark);
    margin-left: 4px;
}

.sort_archive .list span {
    display: inline-block;
    margin-left: 8px;
    cursor: pointer;
}

.sort_archive .list span:hover {
    color: var(--orange);
}

.sort_archive .sort_selected {
    background: var(--orange);
    border-radius: var(--radius_10);
    padding: 8px 16px;
    color: var(--white);
    margin-left: 8px;
}

.sort_archive .sort_selected span {
    font-weight: 400;
}

.sort_archive .sort_selected i {
    display: none;
}

.sort_archive .sort_hidden {
    display: none;
}

.sort_archive .sort a,
.sort_archive .sort_hidden a {
    color: var(--dark);
    margin-left: 12px;
}

.product_detail_side {
    display: flex !important;
    text-align: center;
    padding: 8px;
    box-sizing: border-box;
}

.product_detail_side_hidden {
    display: none !important;
    width: 100%;
    padding: 8px 10px;
    box-shadow: var(--box_shadow);
    margin-bottom: 16px;
    box-sizing: border-box;
    border-radius: var(--radius_10);
    justify-content: space-between;
    align-items: center;
}

.product_detail_side .cost {
    display: block;
    text-align: center;
    margin-bottom: 4px;
}

.product_detail_side .cost_off {
    width: 100%;
    box-sizing: border-box;
    justify-content: space-between;
    margin: auto auto 16px auto;
    background: var(--light);
    padding: 12px;
    border-radius: var(--radius_10);
    border: 1px dashed var(--light2);
    position: relative;
}

.product_detail_side .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;
}

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

.product_detail_side .detail {
    width: 100%;
    gap: 5px;
}

.product_detail_side .detail .title {
    font-weight: 700;
    font-family: var(--kalameh);
    color: var(--dark-500);
    border-bottom: 1px dashed var(--gray_200);
    margin-bottom: 10px;
}

.product_detail_side .detail .item {
    justify-content: space-between;
    color: var(--dark-500);
    align-items: center;
    padding: 5px;
    box-sizing: border-box;
    margin-bottom: 5px;
    gap: 5px;
    cursor: pointer;
    border: 1px solid var(--gray_200);
    border-radius: var(--radius_10);
}

.product_detail_side .detail .item .text {
    color: var(--gray_700);
    text-align: justify;
    font-weight: 500;
    font-size: var(--font_r);
    font-family: var(--kalameh);
}

.product_detail_side .detail .item:hover {
    border: 1px solid var(--orange--500);
}

.product_detail_side .detail .item:hover .text {
    color: var(--orange--500);
}

.product_detail_side .detail .item img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: var(--radius_10);
}

.product_detail_side .detail strong {
    font-weight: 400;
}

.product_detail_side .detail .item_user {
    align-items: center;
    padding: 16px 0;
    color: var(--dark-500);
}

.product_detail_side .detail .item_user i {
    margin-left: 8px;
    font-size: 50px;
    color: var(--secondary);
}

.product_detail_side .detail .tags {
    align-items: center;
    padding: 16px 0;
    color: var(--dark-500);
}

.product_detail_side .detail .tags i {
    margin-left: 8px;
    color: var(--secondary);
}

.product_detail_main {
    width: calc(100% - 290px);
    margin-bottom: 24px;
}


.product_detail_main .product_img {
    width: 100%;
    height: 450px;
    display: block;
    border-radius: var(--radius_10);
    overflow: hidden;
    box-shadow: var(--box_shadow);
    margin-bottom: 16px;
}

.item_header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.item_header .header_action {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.item_header .item_cat {
    margin-bottom: 0;
    background: var(--orange--100);
    padding: 3px;
    border-radius: var(--radius_5);
}

.item_header .btn_secondary {
    margin-bottom: 0;
    padding: 3px;
    border-radius: var(--radius_5);
}

.item_header .tags {
    display: inline-block;
    margin: 0 3px;
    font-size: 8pt;
    border-radius: 5px;
    padding: 2px 5px;
    background: var(--red--100);
    color: var(--red--500);
    box-shadow: none;
    border: none;
}

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

.product_detail_main .item {
    width: 100%;
    padding: 8px 10px;
    box-shadow: var(--box_shadow);
    margin-bottom: 16px;
    box-sizing: border-box;
    border-radius: var(--radius_10);
    justify-content: flex-start;
    align-items: flex-start;
}

.product_detail_main .title {
    font-weight: 700;
    font-family: var(--kalameh);
    color: var(--dark);
    margin: 8px 0;
}

.product_detail_main .text {
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
}

.product_detail_main .text h3 {
    display: block;
    margin: 16px 0 4px 0;
    font-weight: 500;
    color: var(--dark-500);
    font-family: var(--kalameh);
    font-size: 12pt;
}

.product_detail_main .text ul,
.product_detail_main .text ol {
    display: block;
    margin: 0 24px 8px 0;
}

.product_detail_main .text ul li,
.product_detail_main .text ol li {
    color: var(--dark-500);
    text-align: justify;

}

.product_detail_main .text a {
    margin: 8px 0 24px 0;
    color: var(--orange);
}

.product_detail_main .text a span {
    font-weight: 300;
}

.product_detail_main .text a i {
    margin-left: 8px;
}

.product_detail_main .text p {
    text-align: justify;
    width: 100%;
    line-height: 1.8;
    margin: 8px auto 24px auto;
}

.product_detail_main .text p a {
    margin-bottom: 0;
    color: var(--orange);
    font-weight: 300;
}

.product_detail_main .text img {
    width: 100%;
    max-width: 800px;
    margin: 8px auto 24px auto;
    display: block;
    border-radius: var(--radius_10);
    overflow: hidden;
    object-fit: contain;
}


.post_action {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 18px;
    margin: 10px 0;
}

.post_action .action_title {
    font-weight: 400;
    color: var(--dark-300);
    margin-left: 10px;
}

.post_action .action_like {
    display: inline-block;
    vertical-align: middle;
    color: var(--dark-500);
    font-size: 18px;
    cursor: pointer;
    padding: 5px;
}

.post_action .action_dis_like span,
.post_action .action_like span {
    font-weight: 300;
    margin-right: 5px;
    color: var(--gray_500);
}

.post_action .action_dis_like {
    display: inline-block;
    vertical-align: middle;
    color: var(--danger);
    cursor: pointer;
    font-size: 18px;
    padding: 5px;
}

.comment {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: start;
    width: 100%;
    max-height: 600px;
    overflow: auto;
}

.comment .label {
    font-weight: 500;
    font-size: 12pt;
    font-family: var(--kalameh);
}

.comment .comment_item {
    display: block;
    width: 100%;
    box-sizing: border-box;
    border-bottom: 1px dashed var(--light2);
    border-bottom: unset;
    padding: 0 10px;
}

.comment .comment_item .comment_action .btn_border_blue {
    font-size: 9pt;
    padding: 2px 8px;
}

.comment .comment_item:last-child {
    border-bottom: transparent;
}

.comment .comment_replay {
    padding: 10px;
    box-sizing: border-box;
    background: var(--blue_100);
    position: relative;
    border-radius: var(--radius_10);
    margin-top: 8px;
}

.comment .comment_replay:after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    rotate: 45deg;
    top: -5px;
    right: 10px;
    background: var(--blue_100);

}

.comment .comment_item .comment_head {
    display: flex;
    flex-direction: row;
    gap: 10px;
    width: 100%;
    align-items: center;
}

.comment .comment_item .comment_head img {
    width: 35px;
    height: 35px;
    object-fit: cover;
    border-radius: var(--radius_oval);
}

.comment .comment_item .comment_head .title {
    font-family: var(--kalameh);
    font-weight: 700;
    font-size: var(--font_r);
    color: var(--gray_500);
}

.comment .comment_item .date {
    font-size: 8pt;
    word-spacing: 5px;
    color: var(--gray_500);
}

.comment .comment_item .comment_text {
    line-height: 1.7;
    display: block;
    width: 100%;
    padding: 5px 0;
    box-sizing: border-box;
    color: var(--gray_700);
    font-size: 11pt;
    text-align: justify;
}

.comment_form {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
}

.comment_form .comment_score {
    margin-bottom: 8px;
}

.comment_form .comment_score i {
    cursor: pointer;
    color: var(--yellow-500);
}

.comment_form .label {
    margin-bottom: 8px;
}

.comment_form .text_area {
    display: block;
    padding: 8px 16px;
    box-sizing: border-box;
    min-height: 50px;
    width: 100%;
    font-size: var(--font_r);
    color: var(--dark-500);
}

.item_cat {
    display: flex;
    justify-content: flex-start;
    font-size: 9pt;
    color: var(--dark-500);
    margin-bottom: 10px;
    align-items: center;
}

.item_cat i {
    font-size: 14px;
    margin-left: 8px;
    width: 14px;
    height: 14px;
    text-align: center;
    display: inline-block;
    vertical-align: unset;
}

.item_cat strong {
    font-weight: 600;
}

.item_cat i {
    font-weight: 400;
}

.item_cat span {
    color: var(--dark);
}

.product_detail_main .item .btn_primary {
    min-width: 200px;
    margin: 8px 0 16px 0;
}

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

.cart {
    padding: 16px;
    box-sizing: border-box;
    margin: 10px 0 25px 0;
    box-shadow: var(--box_shadow);
    border-radius: var(--radius_10);
}

.cart .cart_title {
    font-weight: 700;
    display: block;
    margin-bottom: 8px;
    font-size: 12pt;
}

.cart .cart_sub_title {
    display: block;
    margin-bottom: 8px;
    color: var(--gray);
}

.cart .cart_item {
    display: flex;
    width: 100%;
    align-items: flex-start;
    justify-content: space-between;
    padding-bottom: 24px;
    margin: 16px 0;
    border-bottom: 1px dashed var(--light2);
}

.cart .cart_item .item {
    justify-content: space-between;
    width: calc(100% - 50px);
}

.cart .cart_item:last-child {
    border-bottom: none;
}

.cart .cart_item .cart_image {
    width: 150px;
    height: 100px;
    background-color: var(--white);
    border-radius: var(--radius_10);
    overflow: hidden;
    border: 1px solid var(--light);
    box-shadow: var(--box_shadow);
    margin-left: 8px;
}

.cart .cart_item .cart_icon {
    width: 35px;
    height: 35px;
    background-color: var(--white);
    color: var(--gray);
    border-radius: var(--radius_25);
    overflow: hidden;
    padding: 10px 0;
    text-align: center;
    box-sizing: border-box;
    border: 1px solid var(--gray);
    box-shadow: 2px 2px 0 var(--gray);
}

.cart .cart_item .cart_image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-blend-mode: multiply;
    border-radius: var(--radius_10);
}

.cart .cart_item .cart_detail {
    color: var(--dark-500);

}

.cart .cart_item .cart_detail .title {
    font-weight: 700;
    display: block;
    margin-bottom: 4px;
    color: var(--dark);
    font-family: var(--kalameh);
}

.cart .cart_item .cart_detail .sub_title {
    margin-bottom: 8px;
}

.product_cost .cost_off {
    display: flex;
    align-items: center;
    margin: 8px 0;
}

.product_cost .cost_off strong {
    font-size: 14pt;
    font-weight: 300;
    color: var(--dark);
}

.cart .cart_item .cart_detail .sub_title {
    display: flex;
    align-items: center;
}

.cart .cart_item .cart_detail .sub_title i {
    margin-left: 8px;
}

.cart .cart_item .cart_detail .sub_title .label {
    min-width: 60px;
    font-weight: 300;
}

.cart_form .btn_primary {
    width: 150px;
    justify-content: center;
}

.cart_form .discount_code {
    display: flex;
    padding: 20px 0;
    margin-bottom: 8px;
    align-items: center;
    justify-content: flex-start;
    border-bottom: 1px dashed var(--light2);
}

.cart_form .discount_code input {
    margin: 0 16px;
    max-width: 350px;
    padding: 6px 12px;
}

.cost_total {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 10px 0 15px 0;
    box-sizing: border-box;
    align-items: center;
    margin-bottom: 16px;
    border-bottom: 1px dashed var(--light2);
}

.cart .cost_total span {
    margin-left: 8px;
    color: var(--dark-500);
}

.cart .cost_total img {
    margin-right: 8px;
}

.cart .cost_total strong {
    font-size: 14pt;
    font-weight: 400;
}

.filter_btn {
    margin-left: 24px;
    display: none;
    align-items: baseline;
    flex-direction: row;
    cursor: pointer;
    padding: 8px 16px;
    box-sizing: border-box;
}

.filter_btn i {
    margin-left: 4px;
}

.filter_btn span {
    font-family: var(--kalameh);
    font-weight: 400;
}

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

.print_holder {
    border: solid 2px #000000;
    margin: 15px;
}

.print_holder .print_header {
    padding: 8px 0;
    text-align: center;
    background: #000000;
    color: #ffffff;
    font-weight: bold;
    font-size: 12pt;
}

.print_holder .print_top {
    padding: 0 15px 15px 15px;
    font-size: 10pt;
}

.print_holder .print_table .head {
    padding: 8px 0;
    text-align: center;
    color: #000000;
    font-weight: bold;
    font-size: 10pt;
    border-top: solid 2px #000000;
}

.print_holder .print_table .table_header {
    display: block;
    background: #000000;
    color: #ffffff;
}

.print_holder .print_table .table_header span {
    display: inline-block;
    vertical-align: middle;
    font-size: 10pt;
    font-weight: bold;
    border-left: solid 1px #ffffff;
    padding: 8px 5px;
    box-sizing: border-box;
}

.print_holder .print_table .table_header span:last-child {
    border-left: none;
}

.print_holder .print_table .table_order_image {
    display: inline-block;
    vertical-align: middle;
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 5px;
    margin: 2px;
    filter: grayscale(100%);
}

.print_holder .print_table .table_row {
    display: block;
    border-bottom: 1px solid #000000;
}

.print_holder .print_table .table_row:last-child {
    border-bottom: none;
}

.print_holder .print_table .table_row div {
    padding: 8px 5px;
}

.print_holder .print_table .table_row .t_title {
    display: none;
    font-size: 16px;
    width: 100px;
    border: none;
    white-space: initial;
    text-overflow: initial;
    overflow: initial;
}

.print_holder .print_table .table_row .t_text {
    display: inline-block;
    width: 100%;
}

.print_holder .print_table .table_row div {
    display: inline-block;
    vertical-align: middle;
    font-weight: 400;
    font-size: 14px;
}

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

.img-post {
    width: calc(100% - 10px);
    display: block;
    cursor: pointer;
    text-align: center;
}

.img-post img {
    width: 70px;
    height: 70px;
    object-fit: cover;
    overflow: hidden;
    margin-right: 8px;
    padding: 5px;
    box-sizing: border-box;
    display: inline-block;
    border-radius: 5px;
    opacity: 0.65;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.35);
}

.img-post img:hover {
    opacity: 1.0;
}

.input_image {
    display: block;
    width: 150px;
    height: 150px;
    cursor: pointer;
    overflow: hidden;
    border-radius: 15px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
    text-align: center;
    position: relative;
}

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

.input_image .btn_img {
    display: block;
    position: absolute;
    place-items: center;
    width: 35px;
    height: 35px;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    filter: invert(20%) sepia(51%) saturate(8646%) hue-rotate(346deg) brightness(104%) contrast(97%);
}

.file_item {
    display: inline-block;
    vertical-align: top;
    width: calc(20% - 15px);
    min-width: 100px;
    background-color: #ecf0f1;
    margin: 5px;
}

.file_item img {
    display: block;
    width: 100%;
    object-fit: contain;
}

.file_item i {
    display: block;
    width: 100%;
    padding: 50px 0;
    text-align: center;
    color: #2c3e50;
    font-size: 30px;
}

.progress_bar {
    display: block;
    position: relative;
    width: 100%;
    height: 35px;
    background-color: #2c3e50;
    border-radius: 5px;
    overflow: hidden;
    margin: 10px 0;
}

.progress_bar .bar_yellow,
.progress_bar .bar_red,
.progress_bar .bar_green {
    display: block;
    position: absolute;
    height: 35px;
}

.progress_bar .bar_yellow {
    background-color: #e67e22;
}

.progress_bar .bar_red {
    background-color: #b94a48;
}

.progress_bar .bar_green {
    background-color: #28a745;
}

.progress_bar .title {
    display: block;
    position: absolute;
    top: 0;
    height: 35px;
    color: #ffffff;
    width: 100%;
    text-align: center;
    padding-top: 5px;
}

.category_holder {
    gap: 8px;
    align-items: start;
    justify-content: end;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    grid-template-rows: repeat(6, 1fr);
}

.category_holder .item {
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
    border-radius: var(--radius_10);
    overflow: hidden;
    text-align: center;
    height: 200px;
    position: relative;
}

.shadow {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-image: linear-gradient(to top, #020202, #02020288, transparent);
}

.category_holder .item1 {
    grid-area: 1 / 1 / 4 / 4;
}

.category_holder .item2 {
    grid-area: 1 / 4 / 4 / 8;
}

.category_holder .item3 {
    grid-area: 1 / 8 / 4 / 10;
}

.category_holder .item4 {
    grid-area: 4 / 1 / 7 / 3;
}

.category_holder .item5 {
    grid-area: 4 / 6 / 7 / 3;
}

.category_holder .item6 {
    grid-area: 4 / 6 / 7 / 9;
}

.category_holder .item7 {
    grid-area: 4 / 9 / 7 / 10;

}

.category_holder .item img {
    display: block;
    width: 100%;
    height: 100%;
    margin-bottom: 5px;
    object-fit: cover;
}

.category_holder .item .title {
    font-weight: 700;
    font-family: var(--kalameh);
    color: var(--white);
    text-shadow: 0 0 5px rgba(50, 30, 50, 0.9);
    margin-bottom: 8px;
    display: block;
    font-size: var(--font_l);
    width: 100%;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 30px;
}

.faq_holder {
    margin-bottom: 80px;
}

.faq_grid {
    align-items: center;
    gap: 10px;
}

.faq_grid .card {
    width: 700px;
    background: var(--gray_100);
    border: 1px solid var(--gray_300);
    border-radius: var(--radius_10);
    align-items: start;
    padding: 10px;
    box-sizing: border-box;
    cursor: pointer;
}

.blog_main .faq_grid .card {
    width: 100%;
}

.faq_grid .select {
    background: var(--orange--100);
    border: 1px solid var(--dark-500);
}

.faq_grid .card .card_img {
    width: 70px;
    display: grid;
    place-items: center;
}

.faq_grid .card .card_img .num {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    font-size: var(--font_x);
    font-family: var(--font_primary);
    background: var(--dark_green_100);
    border-radius: var(--radius_10);
}

.faq_grid .select .card_img .num {
    background: var(--orange--500);
    color: var(--white);
}

.faq_grid .card .card_detail {
    width: calc(100% - 75px);
}

.faq_grid .card .card_detail .card_head {
    align-items: center;
    justify-content: space-between;
}

.faq_grid .card .card_detail .card_head .btn_text {
    margin: 0;
    padding: 5px;
}

.faq_grid .card .card_detail .card_head .title {
    width: calc(100% - 40px);
    color: var(--dark-500);
    font-weight: 800;
    font-size: var(--font_r);
    font-family: var(--font_primary);
}

.faq_grid .card .card_detail .text {
    transform: scale(0);
    overflow: hidden;
    height: 0;
    align-items: flex-start;
}

.bottom_nav {
    display: none;
    align-items: center;
    justify-content: space-between;
    background: var(--white);
    border-top: 1px solid var(--gray);
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    padding: var(--margin_m) 0 var(--margin_l) 0;
    z-index: 5;
}

.bottom_nav .item {
    text-align: center;
    font-size: 18px;
    color: var(--dark2);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    cursor: pointer;
    position: relative;
}

.bottom_nav .item .cart_notification {
    border-radius: var(--radius_10);
    left: 25px;
    margin: auto;
    top: -7px;
    right: 0;
}

.bottom_nav .select {
    color: var(--blue_500);
    font-weight: 500;
}

.bottom_nav .item span {
    font-size: 8px;
}

.bottom_nav .item i {
    width: 20px;
    height: 20px;
    font-size: 20px;
}

.bottom_nav .item .item_img {
    width: 19px;
    height: 19px;
    border-radius: var(--radius_20);
    overflow: hidden;
    border: 1px solid var(--dark3);
}

.bottom_nav .item .item_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius_20);
}

.register_holder {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: 375px;
    height: fit-content;
    margin: auto;
    border: 1px solid var(--gray_200);
    padding: 10px;
    box-sizing: border-box;
}

.panel_holder_title {
    display: block;
    margin-bottom: 10px;
    font-size: 12pt;
    font-weight: bold;
    color: var(--gray_700);
    /*backdrop-filter: drop-shadow(10px);*/
}

.panel_holder_sub_title {
    display: block;
    margin-bottom: 15px;
    font-size: 10pt;
    color: var(--gray_700);
}

.panel_holder_title i {
    margin-left: 10px;
}

.register_holder .form_btn_holder {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 10px;
}

.work_holder .form_btn_holder {
    display: flex;
    flex-direction: row;
    gap: 10px;
    width: 100%;
    justify-content: center;
    margin-bottom: 0;
}

.register_holder .frm .input input {
    width: 100%;
}

.register_holder .form_btn_holder .text_btn,
.register_holder .form_btn_holder .btn_primary,
.register_holder .form_btn_holder .btn_border_gray {
    text-align: center;
    justify-content: center;
    width: 100%;
    margin: 0;
}

.work_holder .form_btn_holder .text_btn,
.work_holder .form_btn_holder .btn_secondary,
.work_holder .form_btn_holder .btn_primary,
.work_holder .form_btn_holder .btn_border_gray {
    text-align: center;
    justify-content: center;
    width: calc(50% - 10px);
    margin: 0;
}

.register_holder .logo {
    margin: 20px auto;
}

.register_holder .logo a {
    position: unset;
    background: transparent;
}

.register_holder .logo:after {
    content: unset;
    position: unset;
    width: unset;
    height: unset;
    background: transparent;
}

.register_holder .form_title {
    color: var(--gray);
}

.register_holder .form_title a {
    color: var(--orange--500);
}

/*********************************************************/
.image_gallery_panel {
    width: 100%;
    gap: 10px;
    flex-wrap: wrap;
}

.image_gallery_panel {
    width: 100%;
    gap: 10px;
    flex-wrap: wrap;
}

.btn_upload_icon {
    display: grid;
    place-items: center;
    width: 150px;
    height: 150px;
    border: 1px dashed var(--gray_400);
    border-radius: var(--radius_10);
    position: relative;
    cursor: pointer;
}

.btn_upload_icon:hover {
    background: var(--gray_100);
}

.btn_upload_icon img {
    width: 50px;
    height: 50px;
}

.btn_upload_icon .fa-plus {
    font-size: 26px;
    position: absolute;
    top: 25%;
    right: 20%;
}

.user_page {
    display: flex;
    align-items: start;
}

.plane_image {
    width: calc(100% - 500px);
    height: 100vh;
    border-radius: var(--radius_10) 0 0 var(--radius_10);
    overflow: hidden;
}

.plane_image .close_map {
    top: -100%;
    display: none;
}

.mapp-container .mapp-footer,
.mapp-container .mapp-footer .triggers {
    z-index: 6 !important;
}

.mapp-logo {
    display: none !important;
}

.plane_image .mapp-loader,
.plane_image .mapp-container .mapp-overlay {
    z-index: 9 !important;
}

.plane_detail {
    display: flex;
    flex-direction: column;
    width: 500px;
    height: 100vh;
    overflow: hidden;
    padding: 0 10px;
    background: var(--white);
    box-shadow: var(--b_shadow_primary);
    border-left: none;
    box-sizing: border-box;
}

.plane_detail .plane_detail_scroll {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: calc(100% - 160px);
    overflow: auto;
}

.profile_img {
    display: flex;
    flex-direction: column;
    justify-content: center !important;
    align-items: center !important;
    width: 100%;
    margin-bottom: 10px;
}

.profile_img .detail {
    gap: 20px;
}

.panel_analytics .profile_img {
    width: 250px;
    height: unset;
    margin-top: unset;
    margin-bottom: unset;
}

.plane_detail .nav {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;
    box-sizing: border-box;
    position: relative;
}

.plane_detail .top_box_result {
    position: absolute;
}

.plane_detail .top_box {
    position: absolute;
    padding: 10px;
}

.plane_detail .top_box .search_box {
    width: calc(100% - 35px);
}

.plane_detail .nav .head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.plane_detail .nav .head .btn_border_gray,
.plane_detail .nav .head .btn_orange,
.plane_detail .nav .head .btn_secondary_gray,
.plane_detail .nav .head .btn_primary {
    font-size: 10px;
    font-weight: 500;
}

.plane_detail .nav .head .btn_orange .btn_img,
.plane_detail .nav .head .btn_border_gray .btn_img,
.plane_detail .nav .head .btn_secondary_gray .btn_img,
.plane_detail .nav .head .btn_primary .btn_img {
    width: 12px;
    height: 12px;
}


.user_page .header {
    display: flex;
    width: 100%;
    flex-direction: column;
}

.user_page .nav .menu_holder {
    display: flex !important;
    flex-direction: column;
    align-items: start;
    position: fixed;
    right: -100%;
    top: 0;
    bottom: 0;
    width: 90%;
    height: 100vh;
    overflow: auto;
    background: var(--white);
    padding: 10px 15px;
    justify-content: start;
    box-sizing: border-box;
}

.user_page .nav .menu_holder_open {
    right: 0;
}

.user_page .nav .menu_res_btn {
    display: inline-block;
}

.user_page .top_nav {
    flex-wrap: wrap;
    align-items: center;
}

.user_page .nav_middle {
    order: 3;
}

.plane_detail .nav_middle {
    justify-content: center;
    box-sizing: border-box;
}

/*.plane_detail .nav_middle .search_box {*/
/*    width: calc(100% - 10px);*/
/*    margin: auto;*/
/*}*/

.plane_detail .nav .logo {
    margin: 15px 0;
}

.plane_detail .footer .footer_footer,
.plane_detail .footer .footer_header {
    flex-direction: column !important;
}

.plane_detail .footer .footer_header .item {
    width: 100%;
}

.plane_detail .profile_img {
    flex-direction: row !important;
    align-items: start !important;
    justify-content: space-between !important;
    gap: 10px;
    height: unset;
    width: 100%;
    margin-top: 15px;
    box-sizing: border-box;
}

.profile_img .user_img {
    position: relative;
    top: -60px;
    width: 150px;
    height: 150px;
    cursor: pointer;
    margin-bottom: -60px;
    box-shadow: none;
}

.work_holder .profile_img .user_img {
    position: relative;
    top: unset;
    width: 150px;
    height: 150px;
    cursor: pointer;
    margin-bottom: 15px;
}

.work_holder .profile_img .user_img i {
    color: var(--gray_200);
    position: absolute;
    width: 15px;
    height: 15px;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

.profile_img .background_img {
    width: 100%;
    position: relative;
    height: 150px;
    border-radius: 10px 10px 0 0;
    overflow: hidden;
    box-shadow: none;
    margin-top: 7px;
}

.profile_img .background_img .btn_img {
    position: absolute;
    left: 20px;
    bottom: 20px;
    width: 40px;
    height: 40px;
    background: var(--light);
    box-shadow: var(--b_shadow_primary);
    padding: 5px;
    box-sizing: border-box;
    border-radius: var(--radius_15);
    border: 1px solid var(--gray_400);
    cursor: pointer;
    opacity: 0.9;
}

.profile_img .background_img .background {
    width: 100%;
    height: 150px;
    object-fit: cover;
}

.plane_detail .form_btn_holder {
    margin: 10px 0;
}

.plane_detail .form_btn_holder .btn_orange {
    margin-right: auto;
    margin-left: 10px;
}

.plane_detail .profile_img .user_img {
    width: 75px;
    height: 75px;
    position: unset;
    margin-bottom: 0;
}

.footer {
    order: 5;
}

.plane_detail .item_action {
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 0;
    background: var(--blue_100);
    box-sizing: border-box;
    order: 2;
}

.plane_detail .item_action .img {
    width: 100%;
    height: 200px;
    object-fit: contain;
}

.plane_detail .item_action .detail {
    width: 100%;
    justify-content: space-between;
    padding: 0 10px;
    box-sizing: border-box;
}

.plane_detail .item_action .title {
    display: flex;
    align-items: center;
    gap: 5px;
}

.plane_detail .item_action .title .btn_img {
    width: 20px;
    height: 20px;
}

.plane_detail .item_action .title span {
    font-weight: 700;
}

.profile_img .user_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius_oval);
}

.profile_img .user_img .btn_img {
    width: 35px;
    height: 35px;
    object-fit: cover;
    position: absolute;
    left: 0;
    bottom: 20px;
    background: var(--light);
    box-shadow: var(--b_shadow_primary);
    padding: 5px;
    box-sizing: border-box;
    border-radius: var(--radius_15);
    border: 1px solid var(--gray_400);
    cursor: pointer;
    opacity: 0.9;
}

.profile_img .title {
    color: var(--dark-500);
    font-family: var(--YekanBakh);
    font-weight: 800;
    align-items: center;
    gap: 5px;
}

.profile_img .sub_title {
    display: flex;
    color: var(--dark-500);
    margin-bottom: 5px;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
}

.profile_img .sub_title a {
    background: var(--orange--100);
    border-radius: var(--radius_5);
    padding: 2px 5px;
    box-sizing: border-box;
    font-size: var(--font_r);
    font-family: var(--YekanBakh);
    color: var(--gray_500);
}

.profile_img .sub_title a:hover {
    color: var(--orange--500);
}

.profile_head .profile_detail {
    gap: 20px;
    padding: 20px;
    box-sizing: border-box;
}

.profile_head .profile_detail .nav {
    gap: 20px;
    align-items: center;
}

.profile_head .profile_detail .address {
    gap: 5px;
    align-items: start;
}

.holder_nav {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid var(--gray_200);
    position: sticky;
    top: 0;
    background: var(--white);
    z-index: 1;
}

.holder_nav .item {
    padding: 15px 0;
    flex: 1;
    box-sizing: border-box;
    text-align: center;
    border-bottom: 3px solid transparent;
    font-weight: 700;
    font-size: var(--font_r);
    cursor: pointer;
    color: var(--gray_700);
}

.holder_nav .current {
    padding: 15px 0;
    flex: 1;
    box-sizing: border-box;
    text-align: center;
    border-bottom: 3px solid var(--dark-500);
}

.plane_detail_result {
    display: flex;
    flex-direction: column;
}

.plane_gallery {
    position: relative;
}

.plane_gallery .image {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: var(--white);
    position: relative;
    cursor: pointer;
}

.plane_gallery .image .product_big_image {
    width: 100%;
    height: 300px;
    position: relative;
    overflow: hidden;
}

.plane_gallery .image .product_big_image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.plane_gallery .card_img_list {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    overflow: auto;
    max-width: 100%;
    margin: auto;
    gap: 10px;
    background: #ffffff88;
}

.plane_gallery .card_img_list img {
    width: 70px;
    height: 70px;
    object-fit: cover;
    cursor: pointer;
}

.full_img {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    margin: auto;
    transform: scale(0.9);
    z-index: -1;
    overflow: hidden;
    background: var(--dark-900);
}

.full_img .head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    border-bottom: 1px solid var(--dark-700);
    color: var(--white);
}

.full_img .head span {
    font-weight: 600;
}

.full_img .head .btn_img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    padding: 5px;
    box-sizing: border-box;
    filter: invert(90%) sepia(51%) saturate(8646%) hue-rotate(346deg) brightness(104%) contrast(97%);
}

.full_img .gallery_image {
    height: 80px;
    margin: auto;
    gap: 10px;
    overflow: auto;
}

.full_img .product_big_image {
    display: block;
    width: 100% !important;
    height: calc(100% - 140px) !important;
    object-fit: contain !important;
    margin-left: 0 !important;
}

.full_img .holder_scroll_btn_right {
    width: 45%;
    height: calc(100% - 140px);
    background: transparent;
    display: grid;
    place-items: center;
    cursor: pointer;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

.full_img .holder_scroll_btn_left {
    width: 45%;
    height: calc(100% - 140px);
    background: transparent;
    display: grid;
    place-items: center;
    cursor: pointer;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

.full_img_show {
    display: block;
    transform: scale(1.0) !important;
    z-index: 1451 !important;
}

.card_head {
    padding: 10px 0;
    box-sizing: border-box;
    border-bottom: 1px solid var(--gray_200);
    gap: 5px;
}

.card_head .btn_img {
    /*filter: invert(0%) sepia(11%) saturate(8646%) hue-rotate(346deg) brightness(104%) contrast(97%)*/
    width: 24px;
    height: 24px;
}

.card_head .title {
    font-size: var(--font_l);
    display: flex;
    gap: 5px;
    color: var(--dark-500);
    font-weight: 500;
    align-items: center;
}

.card_head .sub_title {
    align-items: center;
    gap: 5px;
}

.card_head .sub_title img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.card_head .action_head {
    align-items: center;
    gap: 10px;
}

.card_head .btn_green {
    margin: 0;
}

.plan_btn_res {
    display: none;
}

.plan_information {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 10px 0;
}

.plan_information .social_select .item .social_logo {
    width: 35px;
    height: 35px;
}

.plan_information .item .item_detail {
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 20px;
    /*border-bottom: 1px solid var(--gray_200);*/
}

.plan_information .item .item_detail .label {
    color: var(--gray_500);
}

.plan_information .item .item_detail .text {
    font-weight: 400;
    width: 100%;
    text-align: justify;
    line-height: 1.9;
    color: var(--gray_700);
}

.social_select {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 10px 0;
}

.social_select .item {
    align-items: center;
    gap: 5px;
    justify-content: space-between;
    width: calc(33% - 15px);
    padding-right: 5px;
    border: 1px solid var(--gray_200);
    border-radius: var(--radius_10);
}

.social_select .item i {
    color: var(--gray_700);
    cursor: pointer;
}

.social_select .item i:hover {
    color: var(--orange--500);
}

.social_select .item div {
    width: calc(100% - 50px);
    overflow: hidden;
    text-align: left;
    align-items: center;
    justify-content: end;
}

.social_select .item .title {
    color: var(--dark-500);
    direction: ltr;
    font-size: 10pt;
}

.social_select .item div span {
    width: calc(100% - 20px);
    align-items: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    text-align: left;
    direction: ltr;
    padding: var(--margin_l) var(--margin_x);
    box-sizing: border-box;
}

.social_select .item .social_logo {
    display: grid;
    place-items: center;
    width: 45px;
    height: 45px;
    object-fit: contain;
    box-shadow: var(--b_shadow_primary);
    border-radius: var(--radius_5);
    padding: 5px;
    box-sizing: border-box;
    cursor: pointer;
}

.orange_item {
    color: var(--white);
    background-image: linear-gradient(-45deg, var(--orange--700), var(--orange--200), var(--orange--700));
}

.orange_item2 {
    color: var(--white);
    background-image: linear-gradient(-45deg, var(--orange--700), var(--orange--300), var(--orange--700));
}

.blue_item {
    color: var(--white);
    background-image: linear-gradient(-45deg, var(--blue_500), var(--blue_800), var(--blue_500));
}

.red_item {
    color: var(--white);
    background-image: linear-gradient(-45deg, var(--red--500), var(--red_hover), var(--red--700));
}

.green_item {
    color: var(--white);
    background-image: linear-gradient(-45deg, var(--green_700), var(--green_900), var(--green_700));
}

.user_card {
    display: flex;
    flex-direction: column;
    align-items: start;
    width: 100%;
    gap: 10px;
    padding: 10px 0;
    box-sizing: border-box;
}

.user_card:last-child {
    border-bottom: 5px solid transparent;
}

.user_card .title {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    gap: 5px;
    padding: 0 10px;
    box-sizing: border-box;
}

.user_card .user_img {
    width: 35px;
    height: 35px;
    border-radius: var(--radius_oval);
    border: 2px solid var(--gray_100);
    overflow: hidden;
}

.user_card .user_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user_card .title .fa-badge-check {
    color: var(--blue_500);
}

.user_card .title .user_name {
    font-weight: 800;
    color: var(--dark-500);
    align-items: center;
    gap: 5px;
}

.user_card .status {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    gap: 10px;
    padding: 0 15px;
    box-sizing: border-box;
}

.user_card .status .middle {
    font-size: 8px;
}

.user_card .status .item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
}

.user_card .card_text {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.user_card .card_text .text {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--gray_700);
    text-align: justify;
    font-size: var(--font_r);
    padding: 0 10px;
    box-sizing: border-box;
}

.user_card .card_text .btn_red_secondary {
    display: none;
    margin-right: 10px;
    padding: 7px;
}

.user_card .gallery_image {
    gap: 5px;
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
    overflow: auto;
}

.user_card .gallery_image .img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: var(--radius_10);

}

.user_card .card_footer {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
    padding: 3px 10px;
    box-sizing: border-box;
}

.user_card .btn_card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100% !important;
    padding: 5px 10px;
    box-sizing: border-box;
    font-size: var(--font_r);
    background: var(--gray_100);
    border-radius: var(--radius_10);
    border: 1px solid var(--gray_300);
    color: var(--blue_500);
}

.user_card .btn_card .btn {
    display: flex;
    align-items: center;
    gap: 10px;
}

.user_card .btn_card .card_footer_icon {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--gray_500);
}

.user_card .card_footer .social_select .item {
    border: 1px solid transparent;
    border-radius: 0;
}

.scroll_holder {
    align-items: start;
    justify-content: start;
}

.scroll_holder .scroller {
    gap: 15px;
    padding: 5px;
    box-sizing: border-box;
}

.scroll_holder .card_holder {
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    overflow: hidden;
    margin: 35px auto;
    position: relative;
}

.holder_scroll_btn_right {
    display: grid;
    place-items: center;
    width: 50px;
    height: 270px;
    position: absolute;
    font-size: 30px;
    bottom: 0;
    right: 0;
    text-align: center;
    color: var(--primary);
    -webkit-text-stroke: 1px var(--light);
    cursor: pointer;
    z-index: 1;
}

.holder_scroll_btn_left {
    z-index: 1;
    display: grid;
    place-items: center;
    width: 50px;
    height: 270px;
    position: absolute;
    font-size: 30px;
    bottom: 0;
    left: 0;
    text-align: center;
    color: var(--primary);
    -webkit-text-stroke: 1px var(--light);
    cursor: pointer;
}

.blog_card {
    width: 450px;
    border-radius: var(--radius_25);
    overflow: hidden;
    align-items: start;
    justify-content: space-between;
    box-shadow: var(--b_shadow_primary);
}

.blog_card:hover {
    box-shadow: var(--b_shadow_secondary);
}

.blog_card .card_img {
    width: 100%;
    height: 215px;
    overflow: hidden;
}

.blog_card .card_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog_card:hover .card_img img {
    transform: scale(1.05);
}

.blog_card .card_detail {
    width: 100%;
    height: 130px;
    padding: 10px;
    align-items: start;
    justify-content: space-between;
    gap: 10px;
    box-sizing: border-box;
}

.blog_card .card_detail .btn_primary {
    padding: 5px;
}

.blog_card .card_detail .title {
    width: 100%;
    color: var(--dark-700);
    font-family: var(--font_head);
    font-weight: 700;
}

.blog_card .card_detail .text {
    display: block;
    width: 100%;
    font-size: var(--font_r);
    line-height: 1.5;
    text-align: justify;
    overflow: hidden;
    color: var(--gray_500);
}

.blog_card .card_header {
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.blog_card .card_header .card_result {
    display: flex;
    align-items: center;
    gap: 5px;
    border-radius: var(--radius_5);
    background: var(--secondary);
    padding: 3px;
    color: var(--dark-500);
}

.blog_card .card_header .card_result span {
    font-size: var(--font_s);
}

.blog_card .card_header .btn_orange {
    padding: 5px;
}

.blog_card .card_header .card_result i {
    font-size: 10px;
}

.w_holder {
    padding: 50px 0;
}

.w_holder .container {
    gap: 20px;
    align-items: center;
    justify-content: center;
}

.w_holder .holder_header {
    flex-direction: row;
    align-items: center;
    gap: 5px;
}

.w_holder .holder_header .title {
    width: unset;
    display: unset;
}

.w_holder .holder_header .img {
    width: 35px;
    height: 35px;
    object-fit: contain;
    scale: 1;
    animation: scale 500ms infinite alternate;
}

@keyframes scale {
    0% {
        scale: 0.8;
    }
    100% {
        scale: 1.2;
    }
}

.w_holder .w_list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.w_list .card_item {
    width: calc(33% - 20px);
    border: 1px solid var(--gray_200);
    height: 100px;
    display: flex;
    align-items: center;
    gap: 2px;
    flex-direction: row;
    border-radius: var(--radius_10);
    background-image: linear-gradient(to right, var(--gray_100), var(--light));
    position: relative;
    padding-left: 5px;
    box-sizing: border-box;
}

.w_list .card_item .card_img {
    display: flex;
    align-items: center;
    gap: 5px;
    width: calc(100% - 55px);
    height: 100px;
    background: transparent;
    overflow: hidden;
    border-radius: var(--radius_10);
}

.w_list .card_item .card_img .img {
    width: 100px;
    height: 100%;
    object-fit: cover;
}

.w_list .card_item .card_img .img img {
    width: 100px;
    height: 100%;
    object-fit: cover;
}

.w_list .card_item .card_title {
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 105px);
}

.w_list .card_item .img_no {
    padding: 10px;
    box-sizing: border-box;
    width: 100%;
}

.w_list .card_item .card_title .title {
    display: block;
    font-size: var(--font_r);
    font-weight: 700;
    color: var(--dark-500);
    font-family: var(--font_head);
}

.w_list .card_item .card_title .sub_title {
    align-items: center;
    font-size: 9pt;
    color: var(--gray_700);
    gap: 5px;
    margin: 5px 0;
}

.w_list .card_item .card_title .cost_holder {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 3px;
}

.w_list .card_item .cost_holder {
    font-weight: 800;
    font-size: 11pt;
    font-family: var(--font_head);
    color: var(--dark-500);
}

.w_list .card_item .cost_holder .cost {
    color: var(--red--500);
    font-size: 10pt;
    text-decoration: line-through;
}

.w_list .card_item .btn_red {
    gap: 5px;
}

.post_number {
    font-size: 18pt;
    font-weight: 900;
    margin-left: 0;
}

.user_page .bredcrumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    gap: 5px;
    padding: 10px;
    box-sizing: border-box;
}

.user_page .bredcrumbs i {
    font-size: 8px;
}

.text_open {
    display: block;
    padding: 10px;
    box-sizing: border-box;
    overflow: hidden;
    margin-bottom: 10px;
    position: relative;
}

.input_holder .text_open {
    transform: scale(1, 0);
    position: absolute;
    top: 65px;
    background: var(--white);
    width: 100%;
    border: 1px solid var(--gray_200);
    border-radius: var(--radius_10);
    z-index: 2;
}

.text_open .text_head {
    display: block;
    margin: 3px 10px;
    font-weight: 600;
    cursor: pointer;
}

.text_open .detail_ask {
    display: flex;
    flex-direction: column;
    max-height: 200px;
    width: 100%;
    gap: 5px;
    overflow: auto;
    transition: all 0.4s ease-in-out;
    opacity: 0;
    box-sizing: border-box;
}

.search_result {
    width: 100%;
    background: var(--blue_100);
    border-radius: var(--radius_5);
    padding: 5px 10px;
    box-sizing: border-box;
    gap: 10px;
    cursor: pointer;
}


.blog {
    margin-top: 20px;
    align-items: start;
    gap: 20px;
}

.blog .holder_nav {
    align-items: center;
    border-bottom: none;
    margin: 0 0 30px 0;
}

.blog .holder_nav .title {
    font-size: 25px;
}

.blog .holder_nav .line {
    height: 2px;
    width: 66%;
    background: var(--gray_100);
}

.blog .holder_nav .scroll_btn {
    display: flex;
    align-items: center;
    gap: 15px;
}

.blog .holder_nav .scroll_btn i {
    background: #f5f6f7;
    color: #6a7076;
    border-radius: 8px;
    font-size: 18px;
    display: grid;
    place-items: center;
    width: 35px;
    height: 35px;
    cursor: pointer;
}

.blog .holder_nav .scroll_btn .back_blue {
    color: var(--white);
}

.blog .card_holder {
    width: calc(100% - 420px);
}

.blog .card_holder .holder {
    width: 100%;
    overflow: hidden;
}

.blog .card {
    display: inline-block;
    vertical-align: top;
    width: 282px;
    margin-left: 30px;
    border-radius: 24px;
    border: 2px solid #fff;
    padding: 13px;
    box-sizing: border-box;
    background: linear-gradient(180deg, var(--gray_100) 0%, #fff 100%);
    box-shadow: 0 16px 32px 0 rgba(43, 55, 66, 0.1);
    position: relative;
    transition: all ease 0.3s;
}

.blog .card .card_img {
    width: 100%;
    height: 175px;
    border-radius: 8px;
    overflow: hidden;
}

.blog .card .card_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog .card .card_detail .title {
    font-family: var(--kalameh);
    color: var(--dark-500);
    margin-bottom: 8px;
    display: block;
    width: 100%;
    font-weight: 500;
    font-size: 10pt;
    text-align: justify;
}

.blog .card .card_detail .text {
    text-align: justify;
    font-size: 10pt;
    margin-bottom: 8px;
}

.blog .card .card_detail .sub_title {
    align-items: center;
    font-size: 9pt;
    color: var(--gray_700);
    gap: 5px;
    margin: 3px 0;
}

.blog .card .card_footer {
    display: flex;
    margin-top: 20px;
    justify-content: space-between;
}

.blog .card .card_time {
    display: flex;
    align-items: center;
    padding: 0 15px;
    gap: 10px;
    justify-content: center;
    border-radius: 8px;
    background: var(--gray_100);
    text-align: center;
}

.blog .card .card_time i {
    font-size: 18px;
    color: var(--dark-500);
}

.blog .card .card_time span {
    font-size: 12px;
    color: var(--dark-500);
}

.blog .card .btn_primary {
    transition: all 0.3s ease;
    display: flex;
    background-color: var(--blue_500);
    border-radius: 8px;
    gap: 8px;
    color: var(--white);
    padding: 8px 12px;
    align-items: center;
    justify-content: center;
    align-content: center;
}

.blog .card .btn_primary i {
    font-size: 15px;
}

.blog .list_holder {
    width: 400px;
    border-radius: 16px;
    background: var(--gray_100);
    padding: 15px;
    box-sizing: border-box;
}

.blog .list_holder .holder_nav {
    justify-content: space-between !important;
    align-items: start;
    margin: 0;
    background: transparent;
}

.blog .list_holder .holder_nav .title {
    color: var(--dark-500);
    font-size: 16pt;
    font-weight: 900;
    position: relative;
    word-wrap: break-word;
    z-index: 1;
}

.blog .list_holder .holder_nav .title:before {
    content: "";
    width: 66px;
    height: 13px;
    background: var(--orange--500);
    position: absolute;
    top: 0;
    z-index: -1;
}

.blog .list_holder .holder_nav .text {
    color: var(--gray_500);
    font-size: 14px;
    font-weight: 500;
    text-align: right;
}

.blog .list_holder .holder_nav .nav_date {
    background: var(--orange--500);
    padding: 5px 8px;
    border-radius: 4px;
    font-size: 13px;
    display: inline;
    height: 20px;
    line-height: 1.2em;
    color: var(--white);
    font-weight: 500;
    word-wrap: break-word;
    box-sizing: border-box;
}

.blog .list_holder .list .list_card {
    color: #2B3742;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    margin-top: 10px;
    transition: transform 0.3s;
    border-bottom: #C1C1C1 2px solid;
    padding: 4px 0;
    display: flex;
    align-items: center;
    width: 100%;
}

.blog .list_holder .list .list_card .title {
    color: #2b3742;
    font-size: 14px;
    font-weight: 700;
    line-height: 24px;
    text-align: right;
    direction: rtl;
    margin-right: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.blog .list_holder .list .list_card .title:before {
    content: "";
    width: 8px;
    height: 8px;
    display: inline-block;
    vertical-align: middle;
    background-color: var(--secondary);
    border-radius: 2px;
    margin-left: 10px;
}

.blog .list_holder .list .btn_primary {
    transition: all 0.3s ease;
    display: flex;
    background-color: var(--blue_500);
    border-radius: 8px;
    color: #fff;
    padding: 9px 15px;
    align-items: center;
    justify-content: center;
    align-content: center;
    flex-direction: row-reverse;
    margin: 15px auto 0 auto;
}

.filter_holder {
    display: block;
    width: 100%;
    overflow: hidden;
    padding: 10px 0;
    box-sizing: border-box;
    position: relative;
}

.filter_scroller {
    overflow: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 25px;
    box-sizing: border-box;
}

.filter_holder .filter {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--dark-500);
    border-radius: var(--radius_5);
    border: 1px solid var(--gray_200);
    padding: 1px 5px;
    cursor: pointer;
    box-sizing: border-box;
}

.filter_holder .scroll_btn_right {
    display: grid;
    place-items: center;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 35px;
    cursor: pointer;
    margin: auto;
    background-image: linear-gradient(to left, var(--white), var(--white), transparent);
}

.filter_holder .scroll_btn_left {
    display: grid;
    place-items: center;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 35px;
    margin: auto;
    cursor: pointer;
    background-image: linear-gradient(to right, var(--white), var(--white), transparent);
}

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

@media screen and (max-width: 1080px) {
    .nav .wr .logo {
        margin-left: 16px;
    }

    .user_page .nav {
        padding: 0;
    }

    .nav .container .top_nav {
        flex-wrap: wrap;
        align-items: center;
        padding: 5px 0;
    }

    .nav .container .menu {
        display: none;
    }

    .nav .menu .btn {
        padding: 8px 13px;
    }

    .nav .menu_res {
        display: flex !important;
    }

}

@media screen and (max-width: 950px) {
    .nav .wr .logo {
        margin-left: 16px;
    }

    .nav .wr .menu {
        display: none;
    }

    .nav .menu_res {
        display: flex !important;
    }

    .blog {
        flex-direction: column !important;
    }

    .blog .list_holder,
    .blog .card_holder {
        width: 100%;
    }

    .product {
        flex-direction: row;
    }

    .blog .most_visit {
        width: 100%;
    }

    .blog .blog_main {
        width: 100%;
    }

    .archive .blog_main {
        width: 100% !important;
    }

    .product_detail_main .text img {
        max-width: 100%;
    }

    .archive .blog_main .main {
        justify-content: unset;
    }

    .archive .blog_main .item {
        width: calc(33% - 5px);
    }

    .archive .tutorial .main .item {
        width: calc(50% - 5px);
    }

    .sort_archive .sort {
        display: flex;
        position: absolute;
        top: 50px;
        left: 0;
        width: 150px;
        height: 0;
        flex-direction: column;
        background-color: var(--white);
        z-index: 11;
        padding: 0;
        box-sizing: border-box;
        border-radius: var(--radius_10);
        border: 1px solid var(--light);
        box-shadow: var(--box_shadow);
        transform: scale(0, 9);
        opacity: 0;
    }

    .sort_archive .sort_hidden_open {
        transform: scale(1, 1) !important;
        opacity: 1 !important;
        height: auto !important;
        padding: 8px 16px;
    }

    .sort_archive .sort a {
        margin-bottom: 8px;
        margin-left: unset;
    }

    .sort_archive .sort_selected {
        display: flex;
        min-width: 100px;
        justify-content: space-between;
        align-items: center;
        margin-left: 0;
    }

    .sort_archive .sort_selected i {
        display: inline-block;
    }

    .category_holder {
        position: unset;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .product_detail_side,
    .blog .product_detail_main {
        width: 100%;
    }

    .faq_grid .card {
        width: 100%;
    }
}

@media screen and (max-width: 768px) {

    .nav_action .btn_border_gray {
        display: none;
    }

    .nav_action .btn_cart_top {
        display: none;
    }

    .nav_action {
        order: 2;
    }

    .nav .nav_middle {
        width: 100%;
        justify-content: space-between;
        padding: 10px 0;
    }

    .header .nav .nav_middle {
        order: 3;
    }

    .top_box .search_box {
        width: calc(100% - 150px);
    }

    .nav_action .search_box {
        width: calc(100% - 10px);
    }

    .bottom_nav {
        display: flex;
    }

    .hero .main_top_slider {
        flex-direction: column;
        height: auto;
    }

    .hero .main_top_slider .slider_img {
        width: 100%;
        height: 350px;
    }

    .hero .main_top_slider .slider_detail {
        left: 20px;
        margin: auto;
        width: calc(100% - 40px);
        height: auto;
    }

    .hero .main_top_slider .slider_detail .title {
        font-size: 14pt;
    }

    .hero .main_top_slider .slider_detail .text {
        font-size: 9pt;
        height: auto;
    }

    .hero .main_top_slider .slider_detail .btn_orange {
        width: fit-content;
    }

    .category_holder {
        display: flex;
    }

    .category_holder .item {
        flex: 1 0 calc(33% - 5px);
    }

    .section .service {
        justify-content: space-between;
    }

    .section .service .item {
        width: calc(50% - 20px);
    }

    .section .service .item .title i {
        font-size: 30px;
    }

    .w_2_main {
        padding: 16px 0;
    }

    .w_2_main .container {
        flex-direction: column !important;
    }

    .w_2_main .w50 {
        order: 2;
        width: 100%;
    }

    .w_2_main .video_img {
        order: 1;
        width: 100%;
        height: fit-content;
        margin-bottom: 24px;
    }

    .tutorial .item {
        max-width: calc(100vw - 120px);
    }

    .tutorial .holder_scroll_btn {
        display: none;
    }

    .holder_scroll {
        overflow: auto;
    }

    .main_table {
        flex-direction: column;
    }

    .main_table .item {
        width: 100%;
        margin-bottom: 16px;
    }

    .archive .side_bar {
        position: fixed;
        display: block;
        width: 100%;
        height: 100vh;
        bottom: -1000%;
        background: var(--white);
        z-index: 12;
        right: 0;
        left: 0;
        margin: auto;
        overflow: auto;
        padding: 0 16px;
        box-sizing: border-box;
    }

    .side_bar .side_bar_title i {
        display: inline;
        padding: 5px;
        cursor: pointer;
        color: var(--red);
    }

    .archive .tutorial .main .item,
    .archive .blog_main .item {
        width: calc(50% - 10px);
    }

    .archive .tutorial,
    .archive .tutorial .main,
    .archive .blog_main .main,
    .archive .blog_main {
        width: 100% !important;
    }

    .filter_btn {
        display: flex;
    }

    .product .product_detail_main {
        width: 100%;
    }

    .product_detail_side {
        display: none !important;
    }

    .product_detail_side_hidden {
        display: flex !important;
    }

    .product_detail_side .btn_primary {
        min-width: 200px;
    }

    .product_detail_side .detail {
        width: 100%;
    }

    .product_detail_main .product_img {
        height: auto;
    }

    .bredcrumbs {
        padding: 0 16px;
        box-sizing: border-box;
    }

    .cart .cost_total {
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
    }

    .cart_form .discount_code {
        flex-direction: column;
        align-items: flex-start;
    }

    .cart_form .discount_code input {
        margin: 8px 0 16px 0;
        min-width: 100%;
    }

    .cart .cart_item .item {
        flex-direction: column;
    }

    .cart .cart_item .cart_image,
    .cart .cart_item .cart_detail {
        margin-bottom: 8px;
    }

    .panel_body .panel_side {
        position: fixed;
        width: calc(100% - 100px);
        right: -1000%;
        top: 0;
        bottom: 0;
        z-index: 12;
        background: var(--white);
        border-radius: 10px 0 0 10px;
        overflow: hidden;
    }

    .footer .footer_main,
    .footer .footer_header {
        flex-direction: column !important;
        align-items: center;
    }

    .footer .footer_main .logo,
    .footer .footer_main .social,
    .footer .footer_main .namad,
    .footer .footer_header .item {
        width: 100% !important;
        margin-bottom: 24px;
        justify-content: center;
    }

    .footer .footer_main .social .flex {
        justify-content: center;
    }

    .footer .footer_main .social .title {
        width: auto;
        margin-bottom: 0;
        text-align: center;
    }

    .footer .footer_footer {
        flex-direction: column !important;
        align-items: center;
    }

    .bottom_nav {
        display: flex;
    }

    .menu_holder {
        display: flex !important;
        flex-direction: column;
        align-items: start;
        position: fixed;
        right: -100%;
        top: 0;
        bottom: 0;
        width: 90%;
        height: 100vh;
        overflow: auto;
        background: var(--white);
        padding: 10px 15px;
        box-sizing: border-box;
    }

    .menu_holder ul {
        flex-direction: column !important;
        align-items: start;
        gap: 30px;
        width: 100%;
        padding: 15px;
        box-sizing: border-box;
    }

    .menu_holder ul li {
        font-size: var(--font_l);
    }

    .menu_holder .logo {
        display: flex !important;
        text-align: center;
        width: 100%;
    }

    .menu_holder .logo .btn_img {
        width: 25px;
        cursor: pointer;
        height: 25px;
        filter: invert(50%) sepia(51%) saturate(8646%) hue-rotate(346deg) brightness(104%) contrast(97%);
    }

    .menu_holder_open {
        right: 0;
    }

    .menu_res_btn {
        display: inline-block !important;
    }

    .archive .blog_main .item {
        width: calc(50% - 5px) !important;
    }

    .w_list .card_item {
        width: calc(50% - 20px);
    }

    .plane_detail {
        width: 100%;
    }

    .plane_image {
        position: fixed;
        left: 0;
        right: 0;
        bottom: -100%;
        width: 100%;
        height: calc(100vh - 70px);
        margin: auto;
        border-radius: 10px 10px 0 0;
        z-index: 12;
    }

    .close_map {
        display: block !important;
        position: fixed;
        left: 20px;
        z-index: 8;
        width: 25px;
        cursor: pointer;
        height: 25px;
        filter: invert(50%) sepia(51%) saturate(8646%) hue-rotate(346deg) brightness(104%) contrast(97%);
    }

    .plan_holder .plan_card {
        flex-direction: column !important;
    }

    .social_select {
        flex-direction: column;
        align-items: start;
    }

    .social_select .item {
        width: 100%;
    }

    .user_card .card_text .btn_red_secondary {
        display: grid;
        place-items: center;
    }

    .top_box {
        padding: 10px;
    }

    .top_box .search_box {
        width: calc(100% - 50px);
    }

    .top_box_result {
        height: calc(100vh - 220px);
    }

    .top_box_result .blog {
        margin-top: 0;
        height: calc(100% - 25px);
    }

    .top_box_result .blog .blog_main {
        overflow: auto;
        height: 100%;
    }

    .top_box_result .blog .blog_main .item {
        width: calc(33% - 5px);
    }

    .plan_btn_res {
        display: flex;
    }

}

@media screen and (max-width: 650px) {
    .blog .blog_main .item {
        width: calc(50% - 5px);
    }

    .archive .tutorial .main .item {
        width: calc(50% - 5px) !important;
    }

    .category_holder .item {
        flex: 1 0 calc(50% - 5px);
    }

    .hero .main_top_slider .slider_detail {
        width: 100%;
        padding: 10px 0;
    }

    .w_list .card_item {
        width: 100%;
    }

    .profile_img .detail {
        flex-direction: column;
        align-items: center;
        gap: 5px;
    }

    .nav_action .btn_secondary_gray,
    .nav_action .btn_primary span {
        display: none;
    }
}

@media screen and (max-width: 550px) {

    body {
        font-size: var(--font_r);
    }

    .section .service .item {
        width: calc(100% - 20px);
    }

    .archive .tutorial .main .item,
    .archive .blog_main .item {
        margin-left: 0 !important;
        max-width: unset;
    }

    .sort_archive {
        justify-content: space-between;
    }

    .top_head {
        padding: 8px;
        box-sizing: border-box;
        height: auto;
        min-height: 100px;
    }

    .product_detail_side .btn_primary {
        width: 100%;
        box-sizing: border-box;
    }

    .logo span {
        font-size: var(--font_m);
    }

    .top_box_result .blog .blog_main .item {
        width: calc(50% - 5px);
    }
}