/*
Theme Name: آکادمی مگنت
Theme URI: https://www.webinseo.com
Author: webinseo
Author URI: https://www.webinseo.com
Version: 1.0.0
Text Domain: magnet-academy
*/
html {
    scroll-behavior: smooth
}

*,
*::after,
*::before {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    list-style: none;
    font-family: inherit;
}

a {
    color: inherit;
    text-decoration: none;
}

a:hover,
a:active,
a:focus {
    text-decoration: none;
}

img,
video {
    max-width: 100%;
    height: auto;
}

*::after,
*::before {
    transition: all 0.3s ease-in-out;
}

i::after,
i::before {
    transition: 0s;
}
html{
    position: relative;
    overflow-x: hidden;
}
body {
    font-size: 16px;
    font-weight: 400;
    color: #3e3e3e;
    line-height: 2;
    background-color: var(--bg_color);
    text-align: right;
    overflow-x: hidden;
    position: relative;
}
.modal-open{
    padding-right: 0 !important;
}

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

button {
    background-color: transparent;
    border: none;
    outline: none;
    cursor: pointer;
}

@font-face {
    font-family: 'playfair';
    src: url(assets/fonts/PlayfairDisplay-Medium.woff2) format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/***********************************************************************/ /*Global*/
/*.fixed-top {*/
/*    z-index: 99;*/
/*}*/

.customize-support .fixed-top {
    top: var(--wp-admin--admin-bar--height);
}

.text-red *,
.text-red:hover,
.text-red {
    color: var(--discount_color) !important;
}

.dropdown-toggle::after {
    content: "\eb75";
    font-family: "iconsax";
    border: 0;
    color: rgba(0, 7, 10, 0.5);
    font-size: 16px;
    margin: 0 0 0 10px;
}

.show.dropdown-toggle::after {
    transform: rotate(180deg);
}

.dropdown-menu {
    --bs-dropdown-border-radius: 12px;
    transform: translateY(83px) !important;
    width: 213px;
    border: 0;
    box-shadow: 0 12px 56px 0 rgba(0, 0, 0, 0.08);
    --bs-dropdown-divider-bg: color-mix(in srgb, var(--dark_gray_color) 20%, transparent);
}

.btn {
    --bs-btn-padding-x: 16px;
    --bs-btn-padding-y: 8px;
    --bs-btn-font-size: 1rem;
    --bs-btn-font-weight: 400;
    --bs-btn-line-height: 1.9;
    --bs-btn-border-radius: 100px;
    font-weight: 500;
}

.btn i {
    vertical-align: middle;
    font-size: 20px;
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--primary_color);
    --bs-btn-border-color: var(--primary_color);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--secondary_color);
    --bs-btn-hover-border-color: var(--secondary_color);
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--primary_color);
    --bs-btn-active-border-color: var(--primary_color);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #6c757d;
    --bs-btn-disabled-border-color: #6c757d;
}

.btn-secondary {
    --bs-btn-color: var(--bg_header_color);
    --bs-btn-bg: var(--secondary_color);
    --bs-btn-border-color: var(--secondary_color);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--primary_color);
    --bs-btn-hover-border-color: var(--primary_color);
    --bs-btn-focus-shadow-rgb: 130, 138, 145;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--secondary_color);
    --bs-btn-active-border-color: var(--secondary_color);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #6c757d;
    --bs-btn-disabled-border-color: #6c757d;
}

.btn-outline-secondary {
    --bs-btn-color: var(--secondary_color);;
    --bs-btn-border-color: var(--secondary_color);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--secondary_color);
    --bs-btn-hover-border-color: var(--secondary_color);
    --bs-btn-focus-shadow-rgb: 108, 117, 125;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--secondary_color);
    --bs-btn-active-border-color: var(--secondary_color);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #6c757d;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #6c757d;
    --bs-gradient: none;
}

.btn-outline-primary{
    --bs-btn-color: var(--primary_color);
    --bs-btn-border-color: var(--primary_color);
    --bs-btn-bg: color-mix(in srgb, var(--primary_color) 6%, transparent);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--primary_color);
    --bs-btn-hover-border-color: var(--primary_color);
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: color-mix(in srgb, var(--primary_color) 6%, transparent);;
    --bs-btn-active-bg: var(--primary_color);
    --bs-btn-active-border-color: var(--primary_color);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--primary_color);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--primary_color);
    --bs-gradient: none;
}

.btn-light {
    --bs-btn-color: var(--secondary_color);
    --bs-btn-bg: var(--bg_color);
    --bs-btn-border-color: var(--bg_color);
    --bs-btn-hover-color: var(--bg_color);
    --bs-btn-hover-bg: var(--secondary_color);
    --bs-btn-hover-border-color: var(--secondary_color);
    --bs-btn-focus-shadow-rgb: 211, 212, 213;
    --bs-btn-active-color: var(--secondary_color);
    --bs-btn-active-bg: #c6c7c8;
    --bs-btn-active-border-color: #babbbc;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: var(--bg_color);
    --bs-btn-disabled-border-color: var(--bg_color);
}

.btn-warning {
    --secondary_color_light: color-mix(in srgb, var(--secondary_color) 10%, transparent);
    --primary_color_light: color-mix(in srgb, var(--primary_color) 10%, transparent);
    --bs-btn-color: var(--secondary_color);
    --bs-btn-bg: var(--secondary_color_light);
    --bs-btn-border-color: var(--secondary_color_light);
    --bs-btn-hover-color: var(--primary_color);
    --bs-btn-hover-bg: var(--primary_color_light);
    --bs-btn-hover-border-color: var(--primary_color_light);
    --bs-btn-focus-shadow-rgb: 217, 164, 6;
    --bs-btn-active-color: var(--secondary_color);
    --bs-btn-active-bg: var(--secondary_color_light);
    --bs-btn-active-border-color: var(--secondary_color_light);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--secondary_color);
    --bs-btn-disabled-bg: var(--secondary_color_light);
    --bs-btn-disabled-border-color: var(--secondary_color_light);
    align-items: center;
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.btn-success{
    --bs-btn-color: var(--bg_color);
    --bs-btn-bg: var(--complete_color);
    --bs-btn-border-color: var(--complete_color);
    --bs-btn-hover-color: var(--bg_color);
    --bs-btn-hover-bg: #157347;
    --bs-btn-hover-border-color: #146c43;
    --bs-btn-focus-shadow-rgb: 60, 153, 110;
    --bs-btn-active-color: var(--bg_color);
    --bs-btn-active-bg: #146c43;
    --bs-btn-active-border-color: #13653f;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--bg_color);
    --bs-btn-disabled-bg: var(--complete_color);
    --bs-btn-disabled-border-color: var(--complete_color);
}

.btn-warning i {
    height: 18px;
    font-size: 18px;
}

.btn-2-icon {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 8px 8px 13px;
}

.btn-2-icon i {
    font-size: 20px;
    height: 20px;
}

.btn-2-icon div {
    display: flex;
    align-items: center;
}

.btn-2-icon div i {
    background: var(--bs-btn-color);
    color: var(--bs-btn-bg);
    width: 40px;
    height: 40px;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
    margin-right: 0;
}

.btn-2-icon:hover div i {
    color: var(--bs-btn-hover-bg);
}

.btn-outline-secondary i {
    margin-right: 10px;
    height: 16px;
}

.title-shape {
    position: relative;
    padding-right: 58px;
}

.title-shape:before {
    content: " ";
    width: 10px;
    height: 10px;
    background: var(--secondary_color);
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}

.title-shape:after {
    content: " ";
    width: 42px;
    height: 1px;
    background: var(--primary_color);
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

:root {
    --bs-gutter-x: 1.5rem;
}

.page-space-top{
    padding-top: 204px;
}
.woocommerce-breadcrumb{
    position: relative;
    padding-right: 34px;
    color: var(--primary_color);
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-y: auto;
    white-space: nowrap;
}
.woocommerce-breadcrumb::-webkit-scrollbar {
    display: none
}
.woocommerce-breadcrumb i{
    color: var(--text_color);
}
.woocommerce-breadcrumb a{
    color: var(--dark_gray_color);
}
.woocommerce-breadcrumb:before{
    content: " ";
    width: 16px;
    height: 1px;
    background: var(--primary_color);
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}
.woocommerce-breadcrumb:after{
    content: " ";
    width: 10px;
    height: 10px;
    background: var(--secondary_color);
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}
.woocommerce-pagination ul,
.nav-links{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 24px auto;
    gap: 8px;
}

.woocommerce-pagination ul .page-numbers,
.nav-links .page-numbers{
    width: 32px;
    height: 32px;
    color: var(--dark_gray_color);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.woocommerce-pagination ul .page-numbers:hover,
.woocommerce-pagination ul .page-numbers.current,
.nav-links .page-numbers:hover,
.nav-links .page-numbers.current{
    background: var(--primary_color);
    color: var(--bg_color);
}


.social-banner,
section {
    padding-bottom: 91px;
}

.arrows {
    position: absolute;
    left: 50%;
    bottom: -43px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
}

.arrows i {
    color: var(--secondary_color);
    font-size: 45px;
    vertical-align: middle;
    height: 13px;
}

.arrows i:first-child {
    opacity: 0.5;
}

.section-head {
    padding-bottom: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.section-head > .d-flex{
    align-items: center;
}

.section-title-wrap {
    padding-right: 21px;
    height: 49px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    margin-left: 15px;
}

.section-title-wrap:before {
    content: " ";
    width: 9px;
    height: 9px;
    background: var(--secondary_color);
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 2;
}

.section-title-wrap:after {
    content: " ";
    width: 1px;
    height: 49px;
    background: var(--primary_color);
    position: absolute;
    right: 4px;
    bottom: 0;
    z-index: 1;
}

.section-title {
    font-size: 22px;
    font-weight: 500;
    line-height: 1;
    color: var(--primary_color);
    position: relative;
    display: table;
    width: max-content;
}
.section-title *{
    font-size: 22px;
    font-weight: 500;
    line-height: 1;
    color: var(--primary_color);
    margin: 0;
}

.section-title:after {
    content: " ";
    background-color: var(--secondary_color);
    -webkit-mask-image: url(assets/img/3line-vector.svg);
    mask-image: url(assets/img/3line-vector.svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    width: 28px;
    height: 27px;
    position: absolute;
    top: -11px;
    left: -20px;
    -webkit-mask-size: calc(100% - 10px) auto;
    mask-size: calc(100% - 10px) auto;
}



.section-sub-title {
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    font-family: Montserrat;
    color: color-mix(in srgb, var(--primary_color) 36%, transparent);
}

.text-light .section-sub-title {
    color: color-mix(in srgb, var(--bg_color) 60%, transparent);;
}

.text-light .section-title-wrap:after {
    background: var(--bg_color);
}

.text-light .section-title * {
    color: var(--bg_color);
}

.text-light .section-title:after {
    background: var(--bg_color);
}
.text-light .section-title em,
.section-title em {
    font-style: normal;
    color: var(--secondary_color);
}
.section-head-btns-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mid-line {
    position: relative;
    height: 1px;
    width: 35%;
    background: #F6F7F980;
}

.mid-line:before {
    content: " ";
    width: 5px;
    height: 5px;
    background: #F6F7F980;
    border-radius: 100%;
    position: absolute;
    bottom: -2px;
    right: -5px;
}

.mid-line:after {
    content: " ";
    width: 5px;
    height: 5px;
    background: #F6F7F980;
    border-radius: 100%;
    position: absolute;
    bottom: -2px;
    left: -5px;
}

.section-head-btns-wrap .swiper-button-prev {
    position: relative;
    width: 48px;
    height: 48px;
    background: transparent;
    border: 1px solid var(--gray_color);
    border-radius: 100%;
    margin: 0 0 0 8px;
    left: unset;
    right: unset;
    transition: all .3s ease;
}

.section-head-btns-wrap .swiper-button-next {
    position: relative;
    width: 48px;
    height: 48px;
    background: transparent;
    border: 1px solid var(--gray_color);
    border-radius: 100%;
    margin: 0;
    left: unset;
    right: unset;
    transition: all .3s ease;
}

.section-head-btns-wrap .swiper-button-next:after,
.section-head-btns-wrap .swiper-button-prev:after {
    font-size: 20px;
    color: var(--gray_color);
}

.section-head-btns-wrap .btn {
    position: relative;
    margin-right: 40px;
    z-index: 2;
}

.section-head-btns-wrap .btn:before {
    content: " ";
    width: 1px;
    height: 24px;
    background: var(--gray_color);
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
}

.section-head-btns-wrap .swiper-button-prev:hover,
.section-head-btns-wrap .swiper-button-next:hover {
    color: var(--bg_color);
    background: var(--secondary_color);
    border-color: var(--secondary_color);
}

.section-head-btns-wrap .swiper-button-prev:hover:before {
    content: " ";
    width: 30px;
    height: 58px;
    background-color: transparent;
    border-top-right-radius: 48px;
    border-bottom-right-radius: 48px;
    border: 2px solid orange;
    border-left: 0;
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
}

.section-head-btns-wrap .swiper-button-next:hover:before {
    content: " ";
    width: 30px;
    height: 58px;
    background-color: transparent;
    border-top-left-radius: 48px;
    border-bottom-left-radius: 48px;
    border: 2px solid orange;
    border-right: 0;
    position: absolute;
    left: -6px;
    top: 50%;
    transform: translateY(-50%);
}

.section-head-btns-wrap.text-dark .swiper-button-prev,
.section-head-btns-wrap.text-dark .swiper-button-next {
    border-color: var(--dark_gray_color);
}

.section-head-btns-wrap.text-dark .swiper-button-prev:after,
.section-head-btns-wrap.text-dark .swiper-button-next:after {
    color: var(--dark_gray_color);
}

.section-head-btns-wrap.text-dark .swiper-button-prev:hover,
.section-head-btns-wrap.text-dark .swiper-button-next:hover {
    color: var(--bg_color);
    background: var(--secondary_color);
    border-color: var(--secondary_color);
}

.section-head-btns-wrap.text-dark .swiper-button-next:hover:after,
.section-head-btns-wrap.text-dark .swiper-button-prev:hover:after {
    color: var(--gray_color);
}

.section-head-btns-wrap.text-dark .btn:before {
    background: var(--dark_gray_color);
    opacity: 0.45;
}

.section-head .section-mid-text {
    max-width: 410px;
    font-size: 16px;
    font-weight: 400;
    line-height: 32px;
    color: var(--dark_gray_color);
    padding-right: 80px;
    position: relative;
}
.section-head .section-mid-text p{
    margin-bottom: 0;
}
.section-head .section-mid-text em {
    color: var(--primary_color);
    font-weight: 500;
    font-style: normal;
}

.section-head .section-mid-text:before {
    content: " ";
    width: 1px;
    height: 24px;
    background: var(--dark_gray_color);
    opacity: 0.45;
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
}

.section-head.section-head-center {
    padding: 0;
    position: relative;
    justify-content: center;
}

.section-head.section-head-center .section-head-inner-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: 0 auto;
    position: relative;
    width: 30%;
}

.dot-line {
    content: " ";
    display: block;
    width: calc(30% - 3px);
    height: 1px;
    --line-color: color-mix(in srgb, var(--dark_gray_color) 24%, transparent);
    background: var(--line-color);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.dot-line.left {
    left: 3px;
}

.dot-line.right {
    right: 3px;
}

.dot-line:before {
    content: " ";
    width: 5px;
    height: 5px;
    background: var(--line-color);
    border-radius: 100%;
    position: absolute;
    bottom: -2px;
    left: -3px;
}

.dot-line:after {
    content: " ";
    width: 5px;
    height: 5px;
    background: var(--line-color);
    border-radius: 100%;
    position: absolute;
    bottom: -2px;
    right: -3px;
}

.section-head.section-head-center .section-title-wrap {
    padding: 0;
    /*justify-content: center;*/
    align-items: center;
    margin-bottom: 32px;
}

.section-head.section-head-center .section-mid-text:before,
.section-head.section-head-center .section-title-wrap:after,
.section-head.section-head-center .section-title-wrap:before {
    display: none;
}

.section-head.section-head-center .section-mid-text {
    padding: 0;
    text-align: center;
}

.left-line {
    position: relative;
}

.left-line:after {
    content: " ";
    width: 1px;
    height: 24px;
    background: color-mix(in srgb, var(--dark_gray_color) 45%, transparent);
    position: absolute;
    left: -20px;
    top: 50%;
    transform: translateY(-50%);
}
/***********************************************************************/ /*Header*/
header{
    z-index: 99999;
}
header nav {
    position: relative;
    border-radius: 0 0 32px 32px;
    padding: 0 !important;
    background: linear-gradient(var(--bg_header_color), var(--bg_header_color)) padding-box,
    linear-gradient(to right, var(--bg_header_color) 50%, var(--secondary_color) 100%) border-box;
    border: 1px solid transparent;
}

.navbar-brand {
    background-color: var(--secondary_color);
    border-radius: 0 0 32px 0;
    padding: 30px 24px;
    position: relative;
    margin-left: 16px;
}

.navbar-brand:before {
    content: " ";
    background: url("assets/img/logo-vector.svg");
    position: absolute;
    left: 0;
    bottom: 0;
    width: 122px;
    height: 68px;
}

header .navbar-brand img {
    height: 28px;
    width: auto;
}

.left-header .search-btn {
    margin-left: 8px;
    padding: 8px;
    border-radius: 100%;
    width: 48px;
    height: 48px;
    background-color: color-mix(in srgb, var(--primary_color) 6%, transparent);
    display: flex;
    justify-content: center;
    align-items: center;
}

.left-header .search-btn i {
    vertical-align: middle;
    height: 24px;
    font-size: 24px;
    color: var(--primary_color);
}

.left-header .mini-cart {
    background-color: color-mix(in srgb, var(--primary_color) 6%, transparent);;
    padding: 8px 12px;
    height: 48px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.left-header .mini-cart i {
    vertical-align: middle;
    height: 24px;
    font-size: 24px;
    color: var(--primary_color);
}

.left-header .mini-cart .count {
    width: 18px;
    height: 18px;
    border-radius: 100%;
    background-color: var(--secondary_color);
    border: 1px solid #ffffff;
    color: #ffffff;
    margin-left: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 500;
}

.left-header .line {
    width: 1px;
    height: 26px;
    background-color: var(--dark_gray_color);
    opacity: 24%;
    margin: 0 24px;
}

.left-header .btn-secondary i {
    font-size: 22px;
    height: 22px;
}

.left-header .btn-secondary {
    margin-left: 24px;
}

.left-header .btn-secondary span {
    margin-right: 8px;
}

.left-header .btn-group {
    margin-left: 24px;
}

.btn.btn-logged-in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid color-mix(in srgb, var(--dark_gray_color) 20%, transparent);
    padding: 6px;
    --bs-btn-active-border-color: color-mix(in srgb, var(--dark_gray_color) 20%, transparent);
}

.btn-logged-in img {
    border-radius: 100%;
    border: 1px solid #ffffff;
}

.btn-logged-in .img-box {
    position: relative;
    margin-left: 10px;
}

.online {
    background: var(--complete_color);
    width: 9px;
    height: 9px;
    border: 1px solid #ffffff;
    position: absolute;
    left: 3px;
    bottom: 0;
    border-radius: 100%;
}

.btn-logged-in .name-box {
    display: flex;
    flex-direction: column;
    height: 36px;
    justify-content: space-between;
    align-items: center;
    margin-left: 15px;
}

.btn-logged-in span {
    font-size: 12px;
    font-weight: 400;
    color: var(--dark_gray_color);
    line-height: 1.3;
}

.btn-logged-in span.name {
    font-size: 14px;
    font-weight: 500;
    color: var(--text_color);
}

.user-account .dropdown-menu {
    padding: 0;
}

.user-account .dropdown-menu li {
    font-size: 14px;
    line-height: 1.2;
    font-weight: 500;
    color: var(--dark_gray_color);
}

.user-account .dropdown-menu li .dropdown-divider {
    margin: 8px 0;
}

.user-account .dropdown-menu li .user-mail {
    padding-top: 12px;
    font-weight: 400;
    padding-bottom: 8px;
    display: block;
    text-align: center;
}

.user-account .dropdown-menu li .user-name {
    padding-top: 12px;
    font-weight: 500;
    display: block;
    text-align: center;
    color: var(--text_color);
}

.user-account .dropdown-menu li a {
    display: flex;
    padding: 8px 12px;
    align-items: center;
    justify-content: start;
    color: var(--dark_gray_color);
    font-weight: 400;
    font-size: 14px;
}

.user-account .dropdown-menu li i {
    margin-left: 6px;
    vertical-align: middle;
    height: 16px;
    font-size: 16px;
    color: var(--dark_gray_color);
}

.user-account .dropdown-menu li span {
    display: block;
}

.user-account .dropdown-menu li:last-child {
    padding-top: 8px;
    padding-bottom: 12px;
}

.mobile-menu .navbar-collapse {
    background: #ffffff;
    position: fixed !important;
    width: 280px;
    border-radius: 24px 0 0 24px;
    height: calc(100vh - 128px);
    --bs-dropdown-border-radius: 12px;
    transform: translateY(83px) !important;
    border: 0;
    box-shadow: 0 12px 56px 0 rgba(0, 0, 0, 0.08);
    z-index: 99;
    right: 0 !important;
}

.customize-support .mobile-menu .navbar-collapse {
    height: calc(100vh - (128px + 46px));
}

.customize-support .mobile-menu .navbar-collapse.show {
    top: 46px !important;
}

.menus-wrapper .buttons {
    display: flex;
    margin-top: 32px;
}

.menus-wrapper button {
    width: 50%;
    font-size: 14px;
    font-weight: 400;
    padding-bottom: 8px;
    color: color-mix(in srgb, var(--dark_gray_color) 16%, transparent);
    border-bottom: 2px solid color-mix(in srgb, var(--dark_gray_color) 16%, transparent);
}

.menus-wrapper button.active {
    font-weight: 500;
    color: var(--primary_color);
    border-color: var(--primary_color);
}

.menus-wrapper .menus-content {
    display: none;
}

.menus-wrapper .menus-content.active {
    display: block;
}

.main-menu-wrapper {
}

.main-menu-wrapper .main-menu {
    padding: 0;
    margin: 0;
}

.main-menu-wrapper .main-menu > li {
    padding: 16px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid color-mix(in srgb, var(--dark_gray_color) 10%, transparent);
}

.main-menu-wrapper .main-menu > li a {
    padding-right: 6px;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: var(--dark_gray_color);
    font-family: 'Peyda';
}

.main-menu-wrapper .main-menu > li:before {
    color: var(--dark_gray_color);
    font-family: 'iconsax' !important;
}

.main-menu-wrapper .main-menu > li.current_page_item:before,
.main-menu-wrapper .main-menu > li.current_page_item > a {
    color: var(--secondary_color);
}

.main-menu-wrapper .main-menu > li.menu-item-has-children {
    display: flex;
    justify-content: start;
    align-items: center;
    flex-wrap: wrap;
}

.main-menu-wrapper .main-menu > li.menu-item-has-children > a {
    display: block;
    width: 60%;
    order: 1;
}

.main-menu-wrapper .main-menu > li.menu-item-has-children > i {
    font-size: 14px;
    width: 28px;
    height: 28px;
    color: var(--primary_color);
    background: color-mix(in srgb, var(--primary_color) 6%, transparent);
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .3s ease;
    order: 2;
    margin-right: auto;
}

.main-menu-wrapper .main-menu > li.menu-item-has-children.open > i {
    transform: rotate(180deg);
}

.main-menu-wrapper .main-menu .sub-menu {
    width: 100%;
    height: 0;
    visibility: hidden;
    opacity: 0;
    background: color-mix(in srgb, var(--dark_gray_color) 6%, transparent);
    margin: 0;
    transition: height .5s ease;
    order: 3;
}

.main-menu-wrapper .main-menu .open .sub-menu {
    display: block;
    padding: 0 16px;
    height: auto;
    visibility: visible;
    opacity: 1;
    margin: 16px -16px -16px;
    width: calc(100% + 32px);
}

.main-menu-wrapper .main-menu .sub-menu li {
    padding: 16px;
}

.main-menu-wrapper .main-menu .sub-menu a {
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    padding: 10px 0;
}

.mega-mobile-menu-wrapper {
    position: relative;
}

.mega-mobile-menu-wrapper .mega-menu {
    margin: 24px 16px;
    white-space: nowrap;
    display: block !important;
    overflow: auto;
}

.mega-mobile-menu-wrapper .mega-menu:before {
    content: " ";
    width: 40px;
    height: 100%;
    background: linear-gradient(to right, transparent 0%, #ffffff 100%);
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
}

.mega-mobile-menu-wrapper .mega-menu:after {
    content: " ";
    width: 40px;
    height: 100%;
    background: linear-gradient(to left, transparent 0%, #ffffff 100%);
    position: absolute;
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
}

.mega-mobile-menu-wrapper .mega-menu .mega-col {
    background: color-mix(in srgb, var(--primary_color) 6%, transparent);
    border: 0;
    padding: 12px 5px;
    display: inline-block;
    width: auto;
}

.mega-mobile-menu-wrapper .mega-menu .mega-col.open > a:before,
.mega-mobile-menu-wrapper .mega-menu .mega-col.open > a:after {
    content: none;
    display: none;
}

.mega-mobile-menu-wrapper .mega-menu .mega-col .mega-col-title {
    display: inline-block;
    background: transparent;
    color: var(--dark_gray_color);
    padding: 12px 16px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    border-radius: 100px;
}

.mega-mobile-menu-wrapper .mega-menu .mega-col.open .mega-col-title {
    background: #ffffff;
    color: var(--primary_color);
    font-weight: 500;
}

.mega-mobile-menu-wrapper .mega-menu .mega-col .mega-col-list-wrap {
    top: auto;
    right: 0;
    width: 100%;
    padding: 13px 16px 16px;
}

.mega-mobile-menu-wrapper .mega-menu .mega-col .mega-col-list-wrap .mega-fixed-header {
    padding: 20px 0;
    margin: 0;
}

.mega-mobile-menu-wrapper .mega-menu .mega-col .mega-col-list-wrap .mega-fixed-header b {
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
}

.mega-mobile-menu-wrapper .mega-menu .mega-col .mega-col-list-wrap .mega-fixed-header span {
    font-weight: 500;
    font-size: 14px;
    line-height: 1;
}

.mega-mobile-menu-wrapper .mega-menu .mega-col .mega-col-list-wrap .mega-col-list {
    display: block;
    padding: 20px 0;
    height: 100%;
}

.mega-mobile-menu-wrapper .mega-menu .mega-col .mega-col-list-wrap .mega-col-list li {
    width: 100%;
    height: auto;
    line-height: 1;
    margin-bottom: 16px;
}

.mega-mobile-menu-wrapper .mega-menu .mega-col.open .mega-col-list-wrap {
    display: flex;
}

.mobile-menu .search-box-form {
    background: color-mix(in srgb, var(--primary_color) 6%, transparent);
    padding: 11px 16px;
    margin: 16px;
    border-radius: 100px;
}

.mobile-menu .search-box-form input {
    background: transparent !important;
}

.mobile-menu .search-result-box {
    position: absolute;
    background: #fff;
    right: 16px !important;
    top: auto;
    border-radius: 12px;
    width: calc(100vw - 32px) !important;
    box-shadow: 0 12px 56px 0 rgba(0, 0, 0, 0.08);
    z-index: 99;
}

.mobile-menu .search-box .filters {
    border-top: 0;
}

.mobile-menu .search-box .results .btn {
    margin-top: 28px;
}

.mobile-menu .search-result-box .filters .form-group {
    display: flex;
    align-items: center;
    justify-content: start;
    font-size: 14px;
    font-weight: 400;
}

.mobile-menu .search-result-box .filters .form-group .form-select {
    color: var(--primary_color);
    font-weight: 500;
    padding: 0 0 0 15px;
    border: 0;
    width: auto;
    margin-right: 5px;
}

.mobile-menu .search-result-box .filters .form-group label {
    font-size: 14px;
    font-weight: 400;
    display: flex;
    align-items: center;
}

.mobile-menu .search-result-box .filters .form-group label i {
    color: var(--primary_color);
    font-size: 20px;
    height: 20px;
}

.mobile-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1; /* بالاتر از بقیه */
    display: none; /* پیش‌فرض مخفی */
}

/***********************************************************************/ /*Mini Cart*/
.mini-cart-wrap .dropdown-toggle::after {
    content: none;
}

.mini-cart-wrap .dropdown-menu {
    width: 306px;
    padding: 0;
}

.dropdown-menu-head {
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    color: var(--text_color);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 20px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--dark_gray_color) 16%, transparent);
}

.dropdown-menu-head i {
    font-size: 20px;
    height: 20px;
}

.woocommerce-mini-cart__empty-message {
    text-align: center;
    font-size: 14px;
    line-height: 1;
    margin: 0;
    padding: 24px 12px;
}

.woocommerce-mini-cart {
    padding: 12px 0;
    margin: 0;
}

.woocommerce-mini-cart li {
    padding: 12px;
    display: flex;
    align-items: center;
}

.woocommerce-mini-cart li a.remove {
    color: var(--secondary_color);
    border: 1px solid var(--secondary_color);
    width: 14px;
    height: 14px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    line-height: 1;
    font-size: 12px;
}

.woocommerce-mini-cart li img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 100%;
    margin: 0 12px;
}

.woocommerce-mini-cart li div {
    display: flex;
    flex-direction: column;
}

.woocommerce-mini-cart li .product-name {
    font-size: 12px;
    line-height: 2;
    font-weight: 500;
    color: var(--dark_gray_color);
    display: block;
    width: 100%;
}

.woocommerce-mini-cart li .quantity {
    font-size: 12px;
    line-height: 2;
    font-weight: 500;
    display: block;
    width: 100%;
}

.woocommerce-mini-cart li .price,
.woocommerce-mini-cart li .price ins {
    font-size: 12px;
    font-weight: bold;
    color: var(--primary_color);
    text-decoration: none;
}

.woocommerce-mini-cart li .price bdi {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.woocommerce-mini-cart li .price del bdi {
    display: inline;
}

.woocommerce-mini-cart li .price del {
    font-size: 10px;
    font-weight: 400;
    color: var(--dark_gray_color);
    padding-left: 6px;
}

.woocommerce-mini-cart li .price .woocommerce-Price-currencySymbol {
    font-size: 0;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    height: 20px;
    line-height: 1.1;
}

.woocommerce-mini-cart li .price .woocommerce-Price-currencySymbol:before {
    content: "تو";
    display: block;
    font-size: 6px;
    font-weight: bold;
    width: 10px;
    color: var(--primary_color);
}

.woocommerce-mini-cart li .price .woocommerce-Price-currencySymbol:after {
    content: "مان";
    display: block;
    font-size: 6px;
    font-weight: bold;
    width: 10px;
    color: var(--primary_color);
}

.woocommerce-mini-cart li .price del .woocommerce-Price-currencySymbol:before,
.woocommerce-mini-cart li .price del .woocommerce-Price-currencySymbol:after,
.woocommerce-mini-cart li .price del .woocommerce-Price-currencySymbol {
    display: none;
    font-size: 0;
}

.woocommerce-mini-cart__total {
    margin: 0;
    padding: 24px 12px 7px;
    border-top: 1px solid color-mix(in srgb, var(--dark_gray_color) 16%, transparent);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.woocommerce-mini-cart__total strong {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.1;
    color: var(--dark_gray_color);
}

.woocommerce-mini-cart__total bdi:before {
    content: " ";
    width: 53px;
    height: 8px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--primary_color) 12%, transparent);;
    position: absolute;
    left: 13px;
    bottom: 0;
}

.woocommerce-mini-cart__total bdi {
    position: relative;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.1;
    color: var(--primary_color);
    display: inline-flex;
    align-items: center;
}

.woocommerce-mini-cart__total bdi .woocommerce-Price-currencySymbol {
    font-size: 6px;
    line-height: 0.5;
    transform: rotate(-90deg);
    display: inline-block;
}

.woocommerce-mini-cart__buttons {
    margin: 0;
    padding: 12px;
    display: flex;
    flex-direction: column-reverse;
    gap: 10px;
}

.woocommerce-mini-cart__buttons .button {
    background-color: var(--secondary_color);
    color: #ffffff;
    font-size: 16px;
    font-weight: 500;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100px;
}

.woocommerce-mini-cart__buttons .button.checkout {
    background-color: var(--primary_color);
}

/***********************************************************************/ /*Search Box*/
#ajax-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid #f3f3f3; /* رنگ پس‌زمینه */
    border-top: 3px solid var(--primary_color); /* رنگ چرخان */
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 8px auto;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.search-box .dropdown-toggle::after {
    content: none;
}

.left-header .search-btn.show i {
    height: 30px;
    font-size: 30px;
}

.search-btn.show i:before {
    content: "\eb93";
    transform: rotate(45deg);
}

.search-box .dropdown-menu {
    width: 606px;
    max-width: 100vw;
    padding: 0;
}
.search-box .dropdown-menu.show{
    display: block;
    position: absolute;
    inset: 0 auto auto 0;
    margin: 0;
}
.search-box-form {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 16px;
}

.search-box-form i {
    height: 16px;
    font-size: 16px;
    color: var(--dark_gray_color);
}

.search-box-form input {
    border: 0;
    outline: none;
    padding: 0;
    color: var(--dark_gray_color);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    width: calc(100% - 24px);
    height: 20px;
}

.search-box-form input::placeholder {
    color: color-mix(in srgb, var(--dark_gray_color) 50%, transparent);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
}

.search-box .filters {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 16px;
    border-top: 1px solid color-mix(in srgb, var(--dark_gray_color) 16%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--dark_gray_color) 16%, transparent);
}

.search-box .result-count {
    color: var(--primary_color);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
}

.search-box .filters ul {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 24px;
}

.search-box .filters ul li button {
    color: var(--dark_gray_color);
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    position: relative;
}

.search-box .filters ul li button:after {
    content: " ";
    width: 6px;
    height: 6px;
    border-radius: 100%;
    background: transparent;
    position: absolute;
    left: 50%;
    bottom: -13px;
    transform: translateX(-50%);
}

.search-box .filters ul li button.active {
    color: var(--secondary_color);
}

.search-box .filters ul li button.active:after {
    background: var(--secondary_color);
}

.search-box .results {
    padding: 20px 16px;
}

.search-box .results .btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 500;
}

.search-box .search-results {
    margin: 0;
    padding: 0;
}

.search-box .search-results li {
    margin-bottom: 12px;
}

.search-box .search-results li.no-result,
.search-box .search-results li a {
    padding: 10px;
    background-color: color-mix(in srgb, var(--primary_color) 6%, transparent);
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 10px;
    border-radius: 100px;
}

.search-box .search-results li img {
    width: 24px;
    height: 24px;
    object-fit: cover;
    border-radius: 100%;
}

.search-box .search-results li b {
    display: block;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.1;
    color: var(--text_color);
}

.search-box .search-results li b span {
    color: var(--primary_color);
}

/***********************************************************************/ /*Mega Menu*/
.mega-menu {
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: row;
}

ul.mega-menu > li {
    display: inline-block;
}

ul.mega-menu > li > a {
    padding: 32px 16px;
    position: relative;
    color: var(--dark_gray_color);
}

ul.mega-menu > li:hover > a {
    color: var(--secondary_color);
}

ul.mega-menu > li > a:before {
    content: " ";
    width: 6px;
    height: 6px;
    border-radius: 100%;
    background: transparent;
    position: absolute;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
}

ul.mega-menu > li.menu-item-has-children {
    padding-left: 36px;
}

ul.mega-menu > li.menu-item-has-children > a:after {
    content: "\eb75";
    font-family: iconsax;
    position: absolute;
    left: -4px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    vertical-align: middle;
}

ul.mega-menu > li.current_page_item > a {
    color: var(--secondary_color);
}

ul.mega-menu > li.current_page_item > a:before {
    background: var(--secondary_color);
}

/* مگا — هم‌عرضِ کانتینر */
.mega-submenu {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%; /* هم‌عرضِ .site-header .container */
    background: #F6F7F9;
    box-shadow: 0 12px 56px 0 rgba(0, 0, 0, .08);
    padding: 0;
    border-radius: 24px;
    z-index: 120;
    flex-direction: row-reverse;
    justify-content: start;
    overflow: hidden;
    transform: translateY(20px);
}

/* نمایش مگا وقتی روی آیتم والد هاور یا کلاس فعال اضافه شده */
/*.mega-menu > li:hover > .mega-submenu,*/
.mega-menu > li .mega-submenu.open {
    display: flex;
}

/* هدر ثابت داخل مگا */
.mega-fixed-header {
    padding: 32px 0;
    margin: 0 32px 0 24px;
    background: transparent;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid color-mix(in srgb, var(--dark_gray_color) 20%, transparent);
}

.mega-fixed-header:before {
    content: " ";
    width: 5px;
    height: 5px;
    background: color-mix(in srgb, var(--dark_gray_color) 20%, transparent);
    border-radius: 100%;
    position: absolute;
    bottom: -3px;
    left: -5px;
}

.mega-fixed-header:after {
    content: " ";
    width: 5px;
    height: 5px;
    background: color-mix(in srgb, var(--dark_gray_color) 20%, transparent);
    border-radius: 100%;
    position: absolute;
    bottom: -3px;
    right: -5px
}

.mega-fixed-header a {
    color: var(--primary_color);
    text-decoration: none;
    font-size: 16px;
    line-height: 1;
    gap: 8px;
    display: flex;
    align-items: center;
}

.mega-fixed-header a i {
    font-size: 16px;
    vertical-align: middle;
    height: 16px;
    color: var(--primary_color);
    background: transparent;
}

.mega-fixed-header b {
    font-size: 18px;
    line-height: 1;
    font-weight: bold;
    color: var(--text_color);
    padding-left: 32px;
}

.mega-fixed-header span {
    color: var(--dark_gray_color);
    font-size: 14px;
    line-height: 1;
    font-weight: 500;
    padding-right: 16px;
    position: relative;
}

.mega-fixed-header span:before {
    content: " ";
    height: 22px;
    width: 1px;
    background: linear-gradient(to bottom, transparent 0%, rgba(0, 7, 10, 1) 50%, transparent 100%);
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

/* ستون‌ها (flex — تعداد ستون منعطف است) */
.mega-columns {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    width: 282px;
    background: #ffffff;
}

.mega-col {
    padding: 17px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    border-bottom: 1px solid color-mix(in srgb, var(--dark_gray_color) 16%, transparent);
    cursor: pointer;
}

.mega-col:first-child {
    padding-top: 25px;
}

.mega-col:last-child {
    border: 0;
    padding-bottom: 32px;
}

.mega-col i {
    color: var(--dark_gray_color);
    background: color-mix(in srgb, var(--dark_gray_color) 12%, transparent);
    font-size: 14px;
    width: 28px;
    height: 28px;
    border-radius: 100%;
    vertical-align: middle;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mega-col.open > i {
    color: var(--bg_header_color);
    background: var(--primary_color);
    transform: rotate(180deg);
}

.mega-col > a {
    position: relative;
    transition: all 0.5s ease;
}

.mega-col.open > a {
    padding-right: 38px;
    color: var(--primary_color);
}

.mega-col.open > a:before {
    content: " ";
    width: 6px;
    height: 6px;
    background: var(--secondary_color);
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}

.mega-col.open > a:after {
    content: " ";
    width: 21px;
    height: 1px;
    background: var(--primary_color);
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

/* هر ستون پهنای حداقلی دارد و سپس مساوی کشیده می‌شود */
.mega-col-title {
    display: block;
    text-decoration: none;
    color: var(--dark_gray_color);
    font-size: 16px;
    font-weight: 400;
    line-height: 28px;
    padding-right: 12px;
}

.mega-col-list-wrap {
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    width: calc(100% - 282px);
    height: 100%;
    flex-direction: column;
}

/* لیست داخل هر ستون */
.mega-col-list {
    list-style: none;
    margin: 0;
    display: flex;
    padding: 32px;
    flex-flow: column wrap;
    height: calc(100% - 98px);
}

.mega-col-list li {
    width: 25%;
    height: 22px;
    margin-bottom: 15px;
}

.mega-col.open .mega-col-list-wrap {
    display: flex;
}

.mega-col-list li a {
    text-decoration: none;
    color: var(--text_color);
}

/* بولت/مربع نارنجی */
.mega-col-list li a::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    background: var(--secondary_color);
    margin-left: 10px;
    vertical-align: middle;
    border-radius: 2px;
}

/***********************************************************************/ /*Product Content*/
.product-box {
    background: #ffffff;
    padding: 16px;
    border-radius: 16px;
    position: relative;
    border: 1px solid #ffffff;
    transition: all .3s ease;
}

.product-box:hover {
    border-color: var(--primary_color);
}

.product-box .complete {
    background: var(--complete_color);
    color: var(--bg_color);
    font-size: 14px;
    line-height: 1;
    font-weight: 500;
    padding: 8px 12px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100px;
    position: absolute;
    left: 28px;
    top: 28px;
}

.product-box .product-cat {
    background: var(--bg_color);
    color: var(--primary_color);
    font-size: 14px;
    line-height: 1;
    font-weight: 500;
    padding: 8px 12px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100px;
    position: absolute;
    left: 127px;
    top: 28px;
}

.product-box .product-cat i {
    padding-left: 4px;
    font-size: 16px;
    height: 16px;
}

.product-box .product-img img {
    border-radius: 16px;
    margin-bottom: 20px;
    width: 100%;
}

.product-detail {
    background: #F6F7F9;
    color: var(--dark_gray_color);
    padding: 10px 12px;
    height: 36px;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    margin-bottom: 16px;
}

.product-detail span {
    display: flex;
    align-items: center;
}

.product-detail i {
    padding-left: 4px;
    font-size: 16px;
    height: 16px;
}

.product-title-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    padding-bottom: 20px;
    border-bottom: 1px solid color-mix(in srgb, var(--dark_gray_color) 20%, transparent);
}

.product-title-wrap:before {
    content: " ";
    width: 5px;
    height: 5px;
    background: color-mix(in srgb, var(--dark_gray_color) 20%, transparent);
    border-radius: 100%;
    position: absolute;
    bottom: -3px;
    left: -5px;
}

.product-title-wrap:after {
    content: " ";
    width: 5px;
    height: 5px;
    background: color-mix(in srgb, var(--dark_gray_color) 20%, transparent);
    border-radius: 100%;
    position: absolute;
    bottom: -3px;
    right: -5px;
}

.product-box-title {
    font-size: 18px;
    font-weight: 500;
    line-height: 22px;
    color: var(--primary_color);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.score {
    color: #F2BF1A;
    background: #F2BF1A1F;
    height: 26px;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 8px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
}

.star-rating {
    position: relative;
    width: 14px;
}

/*.star-rating:before{*/
/*    content: " ";*/
/*    width: 12px;*/
/*    height: 13px;*/
/*    background: url(assets/img/star.svg);*/
/*    position: absolute;*/
/*    left: 50%;*/
/*    top: 50%;*/
/*    transform: translate(-50%,-50%);*/
/*}*/
.product-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    margin-bottom: 20px;
    position: relative;
    border-bottom: 1px solid color-mix(in srgb, var(--dark_gray_color) 20%, transparent);
}

.product-meta:before {
    content: " ";
    width: 5px;
    height: 5px;
    background: color-mix(in srgb, var(--dark_gray_color) 20%, transparent);
    border-radius: 100%;
    position: absolute;
    bottom: -3px;
    left: -5px;
}

.product-meta:after {
    content: " ";
    width: 5px;
    height: 5px;
    background: color-mix(in srgb, var(--dark_gray_color) 20%, transparent);
    border-radius: 100%;
    position: absolute;
    bottom: -3px;
    right: -5px;
}

.teacher {
    display: flex;
    align-items: center;
    gap: 6px;
}

.teacher .img-wrap {
    max-width: 60px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: start;
}

.teacher .img-wrap img {
    width: 40px;
    height: 40px;
    border-radius: 100%;
    border: 2px solid var(--bg_color);
    z-index: 3;
}

.teacher .img-wrap img:nth-child(2) {
    margin-right: -20px;
    z-index: 2;
}

.teacher .teacher-name {
    height: 40px;
    display: flex;
    align-items: start;
    flex-direction: column;
    justify-content: center;
}

.teacher .teacher-name b {
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
}

.teacher .teacher-name span {
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    color: var(--dark_gray_color);
    margin-top: 12px;
}

.product-box .btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px;
}

.product-box .btn div {
    display: flex;
    align-items: center;
}

.product-box .btn span {
    padding-right: 8px;
}

.product-box .btn i {
    vertical-align: middle;
    height: 20px;
    font-size: 20px;
    margin-left: 10px;
}

.product-box:hover .btn {
    background: var(--bs-btn-hover-bg);
    color: var(--bs-btn-hover-color);
    border-color: var(--bs-btn-hover-border-color);
}

.product-box .btn i:first-child {
    font-size: 18px;
    background: var(--bs-btn-color);
    color: var(--bs-btn-bg);
    width: 36px;
    height: 36px;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}

.product-box:hover .btn i:first-child {
    color: var(--bs-btn-hover-bg);
}

.product-box-price .price {
    display: flex;
    flex-direction: column;
    align-items: end;
    justify-content: space-between;
    height: 54px;
    gap: 10px;
}

.product-box-price .price del,
.product-box-price .price ins {
    line-height: 1;
}

.product-box-price .price bdi:before {
    content: " ";
    width: calc(88% - 15px);
    height: 8px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--primary_color) 12%, transparent);;
    position: absolute;
    left: 13px;
    bottom: 0;
}

.product-box-price .price bdi {
    position: relative;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.1;
    color: var(--primary_color);
    display: inline-flex;
    /*align-items: center;*/
}

.product-box-price .price bdi .woocommerce-Price-currencySymbol {
    font-size: 10px;
    line-height: 10px;
    font-weight: bold;
    transform: rotate(-90deg);
    display: inline-block;
}

.product-box-price .price .discount {
    font-size: 12px;
    font-weight: bold;
    line-height: 18px;
    color: #ffffff;
    background: var(--discount_color);
    height: 18px;
    padding: 0 5px;
    border-radius: 100px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 4px;
}

.product-box-price .price del .amount {
    position: relative;
}

.product-box-price .price del .amount:before {
    content: " ";
    height: 1px;
    width: 100%;
    background: var(--dark_gray_color);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(170deg);
}

.product-box-price .price del .woocommerce-Price-currencySymbol {
    display: none;
}

.product-box-price .price del bdi {
    font-size: 14px;
    font-weight: 500;
    color: var(--dark_gray_color);
}

.product-box-price .price del bdi:before {
    content: none;
}

.product-box-free {
    width: 277px;
    height: 297px;
    overflow: hidden;
    border-radius: 24px;
    position: relative;
    cursor: pointer;
    transition: all .3s ease;
}

.play-video {
    width: 100%;
    height: 100%;
    background: rgba(1, 4, 9, 0.5);
    position: absolute;
    inset: 0;
    transition: all .3s ease;
}

.product-box-free .play-video {
    visibility: hidden;
    opacity: 0;
}

.product-box-free:hover .play-video {
    visibility: visible;
    opacity: 1;
}


.play-video i.play:before {
    content: " ";
    display: block;
    background: white;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="18" viewBox="0 0 16 18" fill="none"><path d="M15 7.26795C16.3333 8.03775 16.3333 9.96225 15 10.7321L3 17.6603C1.66667 18.4301 -8.94676e-07 17.4678 -8.27378e-07 15.9282L-2.21695e-07 2.0718C-1.54397e-07 0.532196 1.66667 -0.430055 3 0.339746L15 7.26795Z" fill="%23F9FAFB"/> </svg>');
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.play-video i.play {
    width: 48px;
    height: 48px;
    border-radius: 100%;
    background: #EFEFF166;
    filter: blur(8);
    border: 1px solid #EFEFF166;
    position: absolute;
    left: 50%;
    top: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    transform: translate(-50%, -50%);
}

.product-box-free img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left;
}

.product-free-wrap {
    background: #ffffff;
    border-radius: 16px;
    width: calc(100% - 24px);
    height: 128px;
    position: absolute;
    bottom: 12px;
    left: 12px;
    padding: 12px;
    transition: all .3s ease;
    visibility: visible;
    opacity: 1;
}

.product-free-title {
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    text-align: center;
    color: var(--primary_color);
    margin-bottom: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-free-detail {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 16px;
    position: relative;
    border-bottom: 1px solid color-mix(in srgb, var(--dark_gray_color) 20%, transparent);
}

.product-free-detail:before {
    content: " ";
    width: 5px;
    height: 5px;
    background: color-mix(in srgb, var(--dark_gray_color) 20%, transparent);
    border-radius: 100%;
    position: absolute;
    bottom: -3px;
    left: -5px;
}

.product-free-detail:after {
    content: " ";
    width: 5px;
    height: 5px;
    background: color-mix(in srgb, var(--dark_gray_color) 20%, transparent);
    border-radius: 100%;
    position: absolute;
    bottom: -3px;
    right: -5px;
}

.product-free-detail .product-cat {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    line-height: 1;
    font-weight: 500;
    color: var(--dark_gray_color);
}

.product-free-detail .product-cat i {
    font-size: 16px;
    height: 16px;
}

.product-free-detail .score {
    background: transparent;
    padding: 0;
}

.product-box-free .btn {
    margin-top: 16px;
    color: var(--secondary_color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    font-size: 16px;
    line-height: 1;
    font-weight: 500;
    width: 100%;
    font-style: normal;
    text-decoration: none;
}

.product-box-free .btn i {
    font-size: 16px;
    height: 16px;
    transform: rotate(45deg);
}

.product-box-free:hover .product-free-wrap {
    visibility: hidden;
    opacity: 0;
}
.video-modal {
    backdrop-filter: blur(60px);
}

.video-modal .btn-close {
    --bs-btn-close-opacity: 1;
    margin-right: auto;
    filter: var(--bs-btn-close-white-filter);
    padding: 10px;
    border: 1px solid #000;
    border-radius: 100%;
}

.video-modal .modal-dialog {
    max-width: 100%;
    width: 1000px;
}

.video-modal .modal-content {
    background: transparent;
    border: 0;
}

.video-modal .video-wrapper {
    position: relative;
    border: 5px solid var(--bg_color);
    border-radius: 24px;
    overflow: hidden;
}

.video-modal video {
    width: 100%;
    height: auto;
}

.video-modal .video-wrapper .play-video {
    background: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    transition: all .3s ease;
    visibility: visible;
    opacity: 1;
    z-index: 9;
    cursor: pointer;
}

.video-modal .video-wrapper .play-video i.play:before {
    content: " ";
    display: block;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="18" viewBox="0 0 16 18" fill="none"><path d="M15 7.26795C16.3333 8.03775 16.3333 9.96225 15 10.7321L3 17.6603C1.66667 18.4301 -8.94676e-07 17.4678 -8.27378e-07 15.9282L-2.21695e-07 2.0718C-1.54397e-07 0.532196 1.66667 -0.430055 3 0.339746L15 7.26795Z" fill="%23F9FAFB"/> </svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 25px;
    height: 25px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.video-modal .video-wrapper .play-video i.play {
    width: 75px;
    height: 75px;
    border-radius: 100%;
    background: #EFEFF166;
    filter: blur(9);
    border: 1px solid #EFEFF166;
    position: absolute;
    left: 50%;
    top: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    transform: translate(-50%, -50%);
    transition: all .3s ease;
    visibility: visible;
    opacity: 1;
}

.video-modal .video-wrapper .play-video.close,
.video-modal .video-wrapper .play-video.close i {
    visibility: hidden;
    opacity: 0;
}

.product-box2 {
    margin-top: 56px;
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid #ffffff;
    padding: 20px 20px 0;
}

.product-box2 .product-img {
    display: block;
    margin-top: -74px;
    margin-bottom: 24px;
}

.product-box2 .product-img img {
    width: 100%;
    height: auto;
    border-radius: 20px;
}

.product-box2 .product-box-title {
    font-weight: bold;
    color: var(--text_color);
    text-align: center;
    margin-bottom: 12px;
}

.product-box2 .product-tag {
    font-size: 14px;
    font-weight: 500;
    height: 28px;
    margin-bottom: 16px;
    color: var(--dark_gray_color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

.product-box2 .product-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 0 33px;
    margin: 0;
}

.product-time {
    background: color-mix(in srgb, var(--secondary_color) 8%, transparent);
    color: var(--secondary_color);
    padding: 10px 12px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    width: 70%;
    text-align: center;
}

.product-type {
    background: color-mix(in srgb, var(--complete_color) 8%, transparent);
    color: var(--complete_color);
    padding: 10px 12px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
}

.product-box2 .product-box-price .price {
    flex-direction: row;
    align-items: center;
}

.product-box2 .product-box-price .price .amount {
    margin-right: auto;
}

.product-box2-wrap {
    cursor: pointer;
    transition: all .3s ease;
}

.product-box2-wrap .btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all .3s ease;
    padding: 6px;
}

.product-box2-wrap .product-box2-foot {
    padding: 16px 20px 20px;
    background: #ffffff;
    border-radius: 0 0 20px 20px;
    border: 1px solid var(--primary_color);
    border-top: 0;
    transition: all .3s ease;
    visibility: hidden;
    opacity: 0;
}

.product-box2-wrap:hover .product-box2 {
    border-bottom: 0;
    border-radius: 20px 20px 0 0;
    border-color: var(--primary_color);
}

.product-box2-wrap:hover .product-box2-foot {
    visibility: visible;
    opacity: 1;
}

.product-box3,
.product-box3:hover {
    border: 0;
    padding: 0;
    background: transparent;
}

.product-box3 .product-img {
    position: relative;
    width: 100%;
    height: auto;
    display: block;
}

.product-box3 .product-img img {

    margin-bottom: 0;
    border-radius: 20px;
    border: 8px solid var(--bg_color);
}

.product-box3 .product-img .discount {
    position: absolute;
    left: 25px;
    top: 0;
    width: 39px;
    height: 43px;
    background: var(--discount_color);
    color: var(--bg_color);
    font-size: 14px;
    font-weight: bold;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 0 50% 50%;
}

.product-box3 .product-img .product-info {
    position: absolute;
    top: 24px;
    right: 24px;
    display: flex;
    gap: 8px;
}

.product-box3 .product-img .product-cat,
.product-box3 .product-img .complete {
    position: unset;
    top: unset;
    left: unset;
}

.product-box3 .product-box-price .price .discount {
    display: none;
}

.product-box3 .product-box-price .price del {
    padding-left: 5px;
}

.product-box3 .btn-wrapper,
.product-box3 .product-meta,
.product-box3 .product-title-wrap {
    margin-right: 32px;
}

.product-box3 .product-meta {
    background: #ffffff;
    padding: 16px;
    border-radius: 20px;
    margin-bottom: 32px;
    border: 0;
}

.product-box3 .product-title-wrap {
    border: 0;
    display: block;
    padding-bottom: 32px;
}

.product-box3 .product-box-title {
    font-size: 24px;
    margin-bottom: 32px;
    line-height: 1.5;
}

.product-box3 .product-box-summary {
    font-size: 18px;
    font-weight: 500;
    line-height: 36px;
    color: var(--dark_gray_color);
}

.product-box3 .product-box-summary p {
    margin: 0;
}

.product-box3 .btn-wrapper {
    gap: 16px;
}

.product-box3 .btn-wrapper .btn {
    display: inline-flex;
    width: auto;
    min-width: 215px;
    height: 50px;
}

.product-box3 .product-title-wrap:after,
.product-box3 .product-title-wrap:before,
.product-box3 .product-meta:before,
.product-box3 .product-meta:after {
    display: none;
}

.product-meta ul {
    padding: 0;
    margin: 0;
    display: flex;
    gap: 16px;
}

.product-meta ul li {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-width: 72px;
    height: 72px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--secondary_color) 8%, transparent);
}

.product-meta ul li b {
    color: var(--dark_gray_color);
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
}

.product-meta ul li span {
    color: var(--secondary_color);
    font-size: 14px;
    font-weight: bold;
    line-height: 1;
}

.product-meta ul li.gray {
    background: #F6F7F9;
}

.product-meta ul li.green {
    background: color-mix(in srgb, var(--complete_color) 8%, transparent);
}

.product-meta ul li.green span {
    color: var(--complete_color);
}

.product-box4 {
    display: flex;
    background: #ffffff;
    padding: 16px;
    border-radius: 24px;
    border: 1px solid color-mix(in srgb, var(--dark_gray_color) 24%, transparent);
}

.product-box4:hover {
    border-color: var(--primary_color);
}

.product-box4 .product-img {
    display: block;
    width: 140px;
    height: 130px;
    border-radius: 16px;
    overflow: hidden;
}

.product-box4 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left center;
}

.product-box4 .product-meta:after,
.product-box4 .product-meta:before,
.product-box4 .product-title-wrap:after,
.product-box4 .product-title-wrap:before {
    display: none;
}

.product-box4 .product-meta {
    border: 0;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.product-box4 .product-title-wrap {
    width: calc(100% - 140px);
    display: flex;
    flex-direction: column;
    border: 0;
    padding: 0 24px 0 0;
    justify-content: space-between;
    align-items: start;
}

.product-box4 .product-box-title {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--text_color);
    white-space: normal;
}

.product-box4 .product-meta .btn {
    width: 48px;
    height: 48px;
    background: var(--gray_color);
    border-radius: 100%;
    color: var(--dark_gray_color);
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-box4 .product-meta .btn i {
    font-size: 24px;
    height: 24px;
    margin: 0;
}

.product-box4:hover .product-meta .btn,
.product-box4 .product-meta .btn:hover {
    background: var(--secondary_color);
    color: var(--bg_color);
}

.product-box4 .product-box-price .price {
    justify-content: center;
}

.product-box4 .product-meta ul {
    display: none;
}


/********************************************************************************/ /* post-box */
.post-box {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--dark_gray_color) 10%, transparent);
    padding: 16px;
    transition: all .2s ease;
}

.post-box * {
    transition: all .2s ease;
}

.post-box .post-link {
    display: block;
}

.post-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    visibility: hidden;
    opacity: 0;
    position: absolute;
    inset: 0;
}

.post-box .post-box-top {
    display: flex;
    align-items: center;
    margin-bottom: 24px;
    gap: 12px
}

.post-box .post-box-cat {
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    border-radius: 100px;
    color: var(--primary_color);
    background: color-mix(in srgb, var(--primary_color) 8%, transparent);
}

.post-box .post-box-date {
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    border-radius: 100px;
    color: var(--complete_color);
    background: color-mix(in srgb, var(--complete_color) 8%, transparent);
}

.post-box .post-box-title {
    font-size: 20px;
    font-weight: 500;
    line-height: 38px;
    margin-bottom: 32px;
    height: 75px;
}

.post-box .post-boxt-summary {
    font-size: 14px;
    font-weight: 400;
    line-height: 28px;
    color: var(--dark_gray_color);
    margin-bottom: 32px;
}

.post-box .btn {
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    padding: 0;
    gap: 12px;
    display: flex;
    align-items: center;
    color: var(--secondary_color);
}

.post-box .btn i {
    font-size: 20px;
    height: 20px;
}


.post-box:hover {
    background: color-mix(in srgb, var(--primary_color) 76%, transparent);
}

.post-box:hover .post-box-title {
    color: var(--bg_color);
}

.post-box:hover .post-boxt-summary {
    visibility: hidden;
    opacity: 0;
}

.post-box:hover .btn {
    color: var(--bg_color);
    margin-bottom: 32px;
    margin-top: -32px;
}

.post-box:hover .post-box-date {
    color: var(--bg_color);
    background: var(--complete_color);
}

.post-box:hover .post-box-cat {
    background: var(--bg_color);
}

.post-box:hover img {
    visibility: visible;
    opacity: 1;
}

/***********************************************************************/ /*Footer*/
.shape {
    background: var(--bg_color);
    mask-image: url("assets/img/bottom.svg");
    width: 2016px;
    height: 108px;
    position: absolute;
    left: 50%;
    top: -1px;
    transform: translateX(-50%);
    mask-position: top center;
    mask-repeat: no-repeat;
    mask-size: contain;
}

.bottom-shape {
    position: relative;
    height: 80px;
}

.shape-bg {
    background: var(--bg_color);
    mask-image: url("assets/img/bottom2.svg");
    width: 398px;
    height: 74px;
    left: 50%;
    top: 95px;
    position: absolute;
    transform: translateX(-50%);
    background-repeat: no-repeat;
}

.shape-line {
    background: var(--secondary_color);
    mask-image: url("assets/img/bottom-line.svg");
    width: 398px;
    height: 68px;
    left: 50%;
    top: 115px;
    position: absolute;
    transform: translateX(-50%);
    background-repeat: no-repeat;
}

footer {
    position: relative;
    background: var(--primary_color);
    color: var(--bg_color);
}

footer .shape-line {
    background: var(--bg_color);
}

.get-top {
    position: absolute;
    left: 50%;
    bottom: -62px;
    transform: translateX(-50%);
    width: 64px;
    height: 64px;
    background: transparent;
    border-radius: 100%;
    margin: 7px 0 0 0;
    transition: all .3s ease;
    color: var(--bg_color);
    background: var(--secondary_color);
    display: flex;
    align-items: center;
    justify-content: center;
}

.get-top:before {
    content: " ";
    width: 78px;
    height: 40px;
    background-color: transparent;
    border-top-right-radius: 64px;
    border-top-left-radius: 64px;
    border: 2px solid var(--secondary_color);;
    border-bottom: 0;
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
}

.get-top i {
    font-size: 24px;
    height: 24px;
}

.get-top:hover i {
    animation: animate-box 1s infinite ease-in-out !important;
}

@-webkit-keyframes animate-box {
    0% {
        -webkit-transform: translateY(0);
    }

    50% {
        -webkit-transform: translateY(-5px);
    }

    100% {
        -webkit-transform: translateY(0);
    }
}

.footer {
    padding-top: 160px;
}

.menu-title {
    padding-right: 21px;
    height: 32px;
    position: relative;
    margin-bottom: 24px;
}

.menu-title:before {
    content: " ";
    width: 9px;
    height: 9px;
    background: var(--secondary_color);
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 2;
}

.menu-title:after {
    content: " ";
    width: 1px;
    height: 32px;
    background: var(--bg_color);
    position: absolute;
    right: 4px;
    bottom: 0;
    z-index: 1;
}

.menu-title b {
    font-size: 22px;
    font-weight: 500;
    line-height: 1;
    position: relative;
    padding-left: 17px;
}

.menu-title b em {
    font-weight: bold;
    color: var(--secondary_color);
    font-style: normal;
}

.menu-title b:before {
    content: " ";
    width: 50%;
    max-width: 94px;
    height: 23px;
    border-radius: 100px;
    background: var(--bg_color);
    opacity: 0.08;
    position: absolute;
    left: 10px;
    bottom: 0;
}

.menu-title b:after {
    content: " ";
    background-color: var(--secondary_color);
    -webkit-mask-image: url(assets/img/3line-vector.svg);
    mask-image: url(assets/img/3line-vector.svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    width: 28px;
    height: 27px;
    position: absolute;
    top: -7px;
    left: -1px;
    -webkit-mask-size: calc(100% - 10px) auto;
    mask-size: calc(100% - 10px) auto;
}

.footer-top .col-12.menus {
    padding-left: 80px;
    display: flex;
    justify-content: space-between;
}

ul.footer-menu {
    padding-right: 20px;
}

.footer-menu li {
    list-style: disc;
    color: var(--secondary_color);
}

.footer-menu li a {
    color: var(--bg_color);
    display: block;
    font-size: 18px;
    font-weight: 500;
    line-height: 36px;
}

.footer-support-text {
    font-size: 18px;
    font-weight: 400;
    line-height: 36px;
    margin-bottom: 32px;
}

.footer-top .col-12.footer-support .btn-light {
    --bs-btn-color: var(--primary_color);
    min-width: 200px;
    justify-content: space-between;
    display: flex;
    width: max-content;
    align-items: center;
}

.footer-top {
    padding-bottom: 64px;
    position: relative;
    --border-color: color-mix(in srgb, var(--bg_color) 50%, transparent);
    border-bottom: 1px solid var(--border-color);
}

.footer-middle:before,
.footer-top:before {
    content: " ";
    width: 5px;
    height: 5px;
    background: var(--border-color);
    border-radius: 100%;
    position: absolute;
    bottom: -3px;
    right: -5px;
}

.footer-middle:after,
.footer-top:after {
    content: " ";
    width: 5px;
    height: 5px;
    background: var(--border-color);
    border-radius: 100%;
    position: absolute;
    bottom: -3px;
    left: -5px;
}

.footer-middle {
    padding: 40px 0;
    position: relative;
    --border-color: color-mix(in srgb, var(--bg_color) 50%, transparent);
    border-bottom: 1px solid var(--border-color);
    justify-content: space-between;
    align-items: center;
}

.footer-bottom {
    padding: 64px 0 40px;
}

.footer-middle .socials {
    display: flex;
    align-items: center;
    gap: 16px;
}

.footer-middle .contacts {
    display: flex;
    align-items: center;
}

.footer-middle .contacts .call span,
.footer-middle .contacts .mail span {
    direction: ltr;
    display: inline-block;
    font-size: 22px;
    font-weight: 500;
}

.footer-middle .contacts .call span span,
.footer-middle .contacts .mail span span {
    color: var(--secondary_color);
}

.footer-middle .contacts .call i,
.footer-middle .contacts .mail i {
    font-size: 32px;
    height: 32px;
}

.footer-middle .contacts .mail,
.footer-middle .contacts .call {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    padding-left: 3px;
}

.footer-middle .contacts .mail:before,
.footer-middle .contacts .call:before {
    content: " ";
    width: 32px;
    height: 32px;
    border-radius: 100%;
    background: var(--bg_color);
    opacity: 0.12;
    position: absolute;
    left: 0;
    bottom: 0
}

.footer-middle .contacts .line {
    width: 1px;
    height: 24px;
    background: var(--bg_color);
    margin: 0 24px;
}

.social-list {
    display: flex;
    align-items: center;
    gap: 12px;
}

.social-list a {
    width: 48px;
    height: 48px;
    background: var(--secondary_color);
    border-radius: 100%;
    color: var(--bg_color);
    display: flex;
    align-items: center;
    justify-content: center;
}

.social-list a i {
    font-size: 18px;
    line-height: 1;
    vertical-align: middle;
}

.social-text {
    font-size: 18px;
    font-weight: 400;
    line-height: 36px;
}

.social-text em {
    color: var(--secondary_color);
    font-style: normal;
}

.footer-bottom {
}

.footer-bottom .footer_text {
    background: var(--bg_color);
    border-radius: 16px;
    /*overflow: hidden;*/
    display: flex;
    align-items: center;
    position: relative;
}
.footer-bottom .footer_text:before{
    content: " ";
    width: 106px;
    height: 106px;
    border-radius: 100%;
    background: var(--bg_color);
    opacity: 0.1;
    position: absolute;
    right: -35px;
    bottom: -36px;
    z-index: 1;
}

.footer-bottom .footer_text .navbar-brand {
    border-radius: 0 16px 16px 0;
    margin: 0;
    width: 238px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 26px;
    z-index: 2;
}

.footer-bottom .footer_text .navbar-brand img {
    width: auto;
    max-height: 44px;
}

.footer-bottom .footer_text .navbar-brand:before {
    width: 175px;
    height: 109px;
    bottom: unset;
    top: 0;
    background-repeat: no-repeat;
    background-position: bottom left;
    transform: scaleY(-1);
    background-size: contain;
}

.footer-bottom .footer_text .text {
    width: calc(100% - 238px);
    padding: 20px 32px;
    font-size: 16px;
    font-weight: 500;
    line-height: 32px;
    color: var(--dark_gray_color);
}

.footer-bottom .footer_text .text a {
    color: var(--primary_color);
}

.footer-bottom .footer_namads {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 16px;
    gap: 16px;
}

.footer-bottom .footer_namads a {
    background: var(--bg_color);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    width: 33%;
    height: 100%;
}

.footer-bottom .footer_namads a img {
    width: auto;
    height: 56px;
}

.footer-end {
    padding-bottom: 40px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    color: var(--bg_color);
}

.footer-end .copy-right {

}

.footer-end .rules {
    display: flex;
    align-items: center;
    gap: 40px;
}

.footer-end .rules a {
    position: relative;
}

.footer-end .rules a:before {
    content: " ";
    width: 1px;
    height: 16px;
    background: var(--bg_color);
    position: absolute;
    right: -20px;
    top: 0;
}

.footer:before {
    content: " ";
    background-color: color-mix(in srgb, var(--bg_color) 40%, transparent);;
    -webkit-mask-image: url(assets/img/wave.svg);
    mask-image: url(assets/img/wave.svg);
    width: 71px;
    height: 86px;
    position: absolute;
    top: 60px;
    right: 20%;
    box-shadow: 0 4px 26px 0 color-mix(in srgb, var(--primary_color) 36%, transparent);
}
.footer:after{
    content: " ";
    background-color: #ffffff;
    -webkit-mask-image: url(assets/img/vector-hero-2.svg);
    mask-image: url(assets/img/vector-hero-2.svg);
    width: 368px;
    height: 288px;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: top;
    position: absolute;
    left: 0;
    top: 30px;
    transform: scaleX(-1);
}
/***********************************************************************/ /*Responsive*/

@media (max-width: 1399px) {
    .product-box2 .product-meta {
        gap: 8px;
    }

    .product-time,
    .product-type {
        padding: 8px;
    }

    /*.btn span {*/
    /*    font-size: 16px;*/
    /*}*/
}

@media (max-width: 1199px) {
    .left-line:after {
        left: -10px;
    }

    .section-head > .section-title-wrap,
    .section-head > .d-flex {
        max-width: 50%;
    }

    .section-head .section-mid-text {
        padding: 32px 0 0;
        text-align: center;
        max-width: 100%;
        width: 410px;
    }

    .section-head .mid-line,
    .section-head .section-mid-text:before {
        content: none;
        display: none;
    }
    .left-header .line {
        display: none;
    }

    .left-header .btn-group {
        margin-left: 8px;
    }

    .left-header .btn-group.user-account {
        margin-left: 16px;
    }

    .left-header .search-btn,
    .left-header .mini-cart {
        width: 36px;
        height: 36px;
        padding: 0;
    }

    .left-header .search-btn i,
    .left-header .mini-cart i {
        height: 18px;
        font-size: 18px;
    }

    .btn.btn-logged-in {
        padding: 0;
        border: 0;
        background: transparent;
    }

    .btn.btn-logged-in:after,
    .btn.btn-logged-in .name-box {
        display: none;
    }

    .btn-logged-in .img-box {
        margin: 0;
        width: 36px;
        height: 36px;
    }

    .left-header .mini-cart .count {
        position: absolute;
        left: -5px;
        top: -1px;
    }

    .left-header .btn-secondary {
        background-color: color-mix(in srgb, var(--primary_color) 6%, transparent);
        border-radius: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        padding: 0;
        margin-left: 16px;
        border: 0;
    }

    .left-header .btn-secondary span {
        display: none;
    }

    .left-header .btn-secondary i {
        height: 18px;
        font-size: 18px;
        color: var(--primary_color);
    }

    .product-box3 .product-title-wrap {
        margin-top: 32px;
    }

    .product-box3 .btn-wrapper,
    .product-box3 .product-meta,
    .product-box3 .product-title-wrap {
        margin-right: 0;
    }

    .footer-top {
        flex-direction: column-reverse;
        padding-bottom: 48px;
    }

    .footer-top .col-12.menus {
        padding: 48px 0 0;
    }

    .footer-middle .socials {
        flex-direction: column-reverse;
    }

    .footer-bottom .footer_text {
        margin-bottom: 16px;
    }
}

@media (max-width: 991px) {
    .social-banner,
    section {
        padding-bottom: 71px;
    }

    .page-space-top {
        padding-top: 104px;
    }
    .shape {
        height: 53px;
        background-position: bottom center;
        mask-position: bottom center;
        width: 991px;
        mask-size: contain;
    }
    .bottom-shape {
        height: 30px;
    }

    .shape-bg {
        top: 33px;
        transform: translateX(-50%) scale(0.8);
    }

    .shape-line {
        top: 49px;
        transform: translateX(-50%) scale(0.8);
    }
    .arrows {
        bottom: -31px;
    }

    .arrows i {
        font-size: 33px;
        height: 10px;
    }
    .section-head > .d-flex {
        max-width: 100%;
        width: 100%;
        display: block !important;
    }

    .section-head .section-head-btns-wrap {
        display: none;
    }

    .section-head-btns-wrap.text-dark > div {
        /*width: 104px;*/
        display: flex;
    }

    .section-head-btns-wrap.text-dark {
        justify-content: center;
        margin-bottom: 10px;
    }

    .section-head-btns-wrap .btn {
        width: calc(100% - 140px);
    }

    .section-head > .section-title-wrap {
        width: auto;
        margin: 0 auto;
        max-width: 100%;
    }

    .section-title-wrap {
        display: table;
        margin: 0 auto;
    }

    .section-head .section-mid-text {
        margin: 0 auto;
    }

    .camp-course .section-head {
        padding-bottom: 32px;
    }

    .section-head.section-head-center .section-head-inner-wrap {
        width: 100%;
    }

    .section-head.section-head-center .dot-line {
        display: none;
    }
    .section-head-btns-wrap.text-dark > div {
        display: flex;
        justify-content: center;
    }

    .section-head .section-head-btns-wrap.text-dark > div.section-left-text {
        display: block;
        margin: 32px auto;
        text-align: center;
    }

    .left-header .btn-group.search-box,
    header .navbar-brand:before,
    .mega-menu-wrapper {
        display: none;
    }

    header .navbar-brand {
        padding: 0;
        margin: 0;
        background: transparent;
    }

    .btn-menu-bar {
        background: var(--primary_color);
        margin: 14px;
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 100%;
    }

    .btn-menu-bar svg {
        fill: var(--bg_color);
    }

    .btn-menu-bar:after {
        display: none;
    }

    .product-box2-wrap {
        margin-bottom: 0;
    }

    .product-box2-wrap:hover .product-box2 {
        border-bottom: 1px solid var(--primary_color);
        border-radius: 20px;
    }

    .product-box2-wrap .product-box2-foot {
        display: none;
    }

    .product-box3 .btn-wrapper {
        flex-direction: column;
    }

    .product-box4 {
        flex-direction: column;
    }

    .product-box4 .product-img {
        width: 100%;
        height: auto;
    }

    .product-box4 .product-title-wrap {
        width: 100%;
        padding: 0;
    }

    .product-box4 .product-box-title {
        text-align: center;
        padding: 16px 0;
        margin: 0 auto;
        white-space: normal;
        color: var(--primary_color);
    }

    .product-box4 .product-meta {
        flex-direction: row-reverse;
    }

    .product-box4 .product-meta ul {
        display: flex;
    }

    .product-box4 .product-meta .btn {
        display: none;
    }

    .footer-middle .contacts .line {
        display: none;
    }

    .footer-middle .contacts {
        flex-direction: column-reverse;
    }

    .footer-end {
        flex-direction: column;
        gap: 24px;
        align-items: center;
    }

    .video-modal .btn-close{
        margin-left: 1rem;
    }
}

@media (max-width: 767px) {
    .free-course-list .product-box-free {
        width: 298px;
        height: 297px;
    }

    .product-box3 .product-title-wrap {
        margin-top: 24px;
    }

    .product-box3 .product-box-title {
        font-size: 22px;
    }

    .product-box3 .product-box-summary {
        font-size: 16px;
    }

    .product-box3 .btn-wrapper .btn {
        width: 100%;
    }

    .footer-middle {
        flex-direction: column-reverse;
        gap: 25px;
    }

    .footer-top .col-12.menus {
        flex-direction: column;
        gap: 48px;
    }

    .footer-bottom .footer_text {
        flex-direction: column;
    }

    .footer-bottom .footer_text .navbar-brand {
        width: 100%;
        height: 82px;
        border-radius: 16px 16px 0 0;
    }

    .footer-bottom .footer_text .text {
        width: 100%;
        padding: 20px;
    }

    .footer-bottom {
        padding: 48px 0;
    }

    .footer-middle {
        padding: 32px 0;
    }

    .footer:before,
    .footer:after,
    .footer-bottom .footer_text:before{
        content: unset;
    }
}

@media (max-width: 575px) {
    .page-space-top{
        padding-top: 80px;
    }
    .container, :root {
        --bs-gutter-x: 2rem;
    }

    .product-box3 .product-meta {
        padding: 12px;
    }

    .product-meta ul {
        gap: 8px;
    }

    .product-meta ul li {
        min-width: 58px;
        height: 58px;
    }

    .product-meta ul li span,
    .product-meta ul li b {
        font-size: 14px;
    }
}

@media (max-width: 400px) {
    .product-meta ul {
        gap: 3px;
    }
}

@media screen and (max-width: 600px) {
    #wpadminbar {
        position: fixed !important;
    }
}