@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: bold;
    src: url('../fonts/IRANSans-Bold-web.eot');
    src: url('../fonts/IRANSans-Bold-web.eot?#iefix') format('embedded-opentype'), /* IE6-8 */ url('../fonts/IRANSans-Bold-web.woff2') format('woff2'), /* Chrome36+, Opera24+*/ url('../fonts/IRANSans-Bold-web.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url('../fonts/IRANSans-Bold-web.ttf') format('truetype');
}

@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/IRANSans-Medium-web.eot');
    src: url('../fonts/IRANSans-Medium-web.eot?#iefix') format('embedded-opentype'), /* IE6-8 */ url('../fonts/IRANSans-Medium-web.woff2') format('woff2'), /* Chrome36+, Opera24+*/ url('../fonts/IRANSans-Medium-web.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url('../fonts/IRANSans-Medium-web.ttf') format('truetype');
}

@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/IRANSans-Light-web.eot');
    src: url('../fonts/IRANSans-Light-web.eot?#iefix') format('embedded-opentype'), /* IE6-8 */ url('../fonts/IRANSans-Light-web.woff2') format('woff2'), /* Chrome36+, Opera24+*/ url('../fonts/IRANSans-Light-web.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url('../fonts/IRANSans-Light-web.ttf') format('truetype');
}

@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: 200;
    src: url('../fonts/IRANSans-UltraLight-web.eot');
    src: url('../fonts/IRANSans-UltraLight-web.eot?#iefix') format('embedded-opentype'), /* IE6-8 */ url('../fonts/IRANSans-UltraLight-web.woff2') format('woff2'), /* Chrome36+, Opera24+*/ url('../fonts/IRANSans-UltraLight-web.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url('../fonts/IRANSans-UltraLight-web.ttf') format('truetype');
}

@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/IRANSans-web.eot');
    src: url('../fonts/IRANSans-web.eot?#iefix') format('embedded-opentype'), /* IE6-8 */ url('../fonts/IRANSans-web.woff2') format('woff2'), /* Chrome36+, Opera24+*/ url('../fonts/IRANSans-web.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url('../fonts/IRANSans-web.ttf') format('truetype');
}

@font-face {
    font-family: yekan;
    font-style: normal;
    font-weight: 800;
    src: url("../fonts/YekanBakh/eot/Yekan-Bakh-FA-08-Fat.eot");
    src: url("../fonts/YekanBakh/eot/Yekan-Bakh-FA-08-Fat.eot?#iefix") format("embedded-opentype"),
        /* IE6-8 */ url("../fonts/YekanBakh/woff/Yekan-Bakh-FA-08-Fat.woff") format("woff"),
        /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url("../fonts/YekanBakh/ttf/Yekan-Bakh-FA-08-Fat.ttf") format("truetype");
}

@font-face {
    font-family: yekan;
    font-style: normal;
    font-weight: 700;
    src: url("../fonts/YekanBakh/eot/Yekan-Bakh-FA-07-Heavy.eot");
    src: url("../fonts/YekanBakh/eot/Yekan-Bakh-FA-07-Heavy.eot?#iefix") format("embedded-opentype"),
        /* IE6-8 */ url("../fonts/YekanBakh/woff/Yekan-Bakh-FA-07-Heavy.woff") format("woff"),
        /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url("../fonts/YekanBakh/ttf/Yekan-Bakh-FA-07-Heavy.ttf") format("truetype");
}

@font-face {
    font-family: yekan;
    font-style: normal;
    font-weight: 600;
    src: url("../fonts/YekanBakh/eot/Yekan-Bakh-FA-06-Bold.eot");
    src: url("../fonts/YekanBakh/eot/Yekan-Bakh-FA-06-Bold.eot?#iefix") format("embedded-opentype"),
        /* IE6-8 */ url("../fonts/YekanBakh/woff/Yekan-Bakh-FA-06-Bold.woff") format("woff"),
        /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url("../fonts/YekanBakh/ttf/Yekan-Bakh-FA-06-Bold.ttf") format("truetype");
}

@font-face {
    font-family: yekan;
    font-style: normal;
    font-weight: 500;
    src: url("../fonts/YekanBakh/eot/Yekan-Bakh-FA-05-Medium.eot");
    src: url("../fonts/YekanBakh/eot/Yekan-Bakh-FA-05-Medium.eot?#iefix") format("embedded-opentype"),
        /* IE6-8 */ url("../fonts/YekanBakh/woff/Yekan-Bakh-FA-05-Medium.woff") format("woff"),
        /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url("../fonts/YekanBakh/ttf/Yekan-Bakh-FA-05-Medium.ttf") format("truetype");
}

@font-face {
    font-family: yekan;
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/YekanBakh/eot/Yekan-Bakh-FA-04-Regular.eot");
    src: url("../fonts/YekanBakh/eot/Yekan-Bakh-FA-04-Regular.eot?#iefix") format("embedded-opentype"),
        /* IE6-8 */ url("../fonts/YekanBakh/woff/Yekan-Bakh-FA-04-Regular.woff") format("woff"),
        /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url("../fonts/YekanBakh/ttf/Yekan-Bakh-FA-04-Regular.ttf") format("truetype");
}

@font-face {
    font-family: yekan;
    font-style: normal;
    font-weight: 300;
    src: url("../fonts/YekanBakh/eot/Yekan-Bakh-FA-03-Light.eot");
    src: url("../fonts/YekanBakh/eot/Yekan-Bakh-FA-03-Light.eot?#iefix") format("embedded-opentype"),
        /* IE6-8 */ url("../fonts/YekanBakh/woff/Yekan-Bakh-FA-03-Light.woff") format("woff"),
        /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url("../fonts/YekanBakh/ttf/Yekan-Bakh-FA-03-Light.ttf") format("truetype");
}

@font-face {
    font-family: yekan;
    font-style: normal;
    font-weight: 200;
    src: url("../fonts/YekanBakh/eot/Yekan-Bakh-FA-02-Thin.eot");
    src: url("../fonts/YekanBakh/eot/Yekan-Bakh-FA-02-Thin.eot?#iefix") format("embedded-opentype"),
        /* IE6-8 */ url("../fonts/YekanBakh/woff/Yekan-Bakh-FA-02-Thin.woff") format("woff"),
        /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url("../fonts/YekanBakh/ttf/Yekan-Bakh-FA-02-Thin.ttf") format("truetype");
}

@font-face {
    font-family: yekan;
    font-style: normal;
    font-weight: 100;
    src: url("../fonts/YekanBakh/eot/Yekan-Bakh-FA-01-Hairline.eot");
    src: url("../fonts/YekanBakh/eot/Yekan-Bakh-FA-01-Hairline.eot?#iefix") format("embedded-opentype"),
        /* IE6-8 */ url("../fonts/YekanBakh/woff/Yekan-Bakh-FA-01-Hairline.woff") format("woff"),
        /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url("../fonts/YekanBakh/ttf/Yekan-Bakh-FA-01-Hairline.ttf") format("truetype");
}

:root {
    --primary: #f001b6;
    --panelPrimary: #a06cd5;
    --text: #8f96a2;
}

.text-danger {
    color: #e13535;
}

/* css-reset */
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    box-sizing: inherit;
    color: #212121;
    font-size: 14px;
    line-height: 2.5;
    font-family: IRANSans, sans-serif;
    background: #f8f8f8;
    direction: rtl;
    overflow-x: hidden;
    padding: 0;
    margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: 1.7;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0;
    padding: 0;
}

ul,
li {
    margin: 0;
    padding: 0;
}

ul,
li {
    list-style: none;
}

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

a:hover {
    color: var(--primary);
}

/* custom-class */
.primary-color {
    color: #f001b6;
}

.disabled {
    cursor: not-allowed !important;
    pointer-events: none;
}

/* modal */
.modal-header {
    padding: 0;
}

.modal-content {
    border-radius: 25px;
}

.nav-tabs {
    border: 0 !important;
    width: 100%;
}

.nav-tabs .nav-item {
    width: 50%;
}

.tab-content form {
    padding: 2em;
}

.tab-content form input {
    background-color: #fbfbfb;
    box-shadow: 3px 3px 8px 0 rgba(0, 0, 0, 0.08) !important;
    font-size: 13px;
    padding: 15px 20px;
}

.tab-content .form-group {
    margin-bottom: 1.5em;
}

.tab-content form label {
    color: #131923;
    font-size: 13px;
}

.tab-content form input::placeholder {
    font-size: 12px;
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link {
    background-color: #f3f3f3;
    padding: 1em 2em;
    border: 0;
    width: 100%;
}

.nav-tabs .nav-item:first-child .nav-link {
    border-radius: 0 25px 0 0;
}

.object-fit {
    object-fit: cover !important;
}

.nav-tabs .nav-item:last-child .nav-link {
    border-radius: 25px 0 0 0 !important;
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    background-color: #f001b620;
    color: #f001b6;
}

/* sliders */
.slider .owl-stage {
    display: flex;
}

.slider .owl-stage-outer {
    overflow-x: hidden;
}

#customers-section .customer-slider .owl-nav {
    display: none;
}

#customers-section .customer-slider .owl-dots {
    position: absolute;
    right: 50%;
    transform: translateX(50%);
    padding: 1em 0;
}

#customers-section .customer-slider .owl-dot {
    padding: 2px 12px;
    border-radius: 5px;
    margin: .25em;
    border: 0;
    background-color: #e9e9ec;
}

#customers-section .customer-slider .owl-dot.active {
    background-color: var(--primary);
}

/* container */
.custom-container {
    margin: 0 auto;
    padding: 0 15px;
    max-width: 1200px;
    min-width: 1200px;
}

/* main-header */
#main-header {
    background: #fefefe;
    box-shadow: 0 3px 18px 0 rgba(0, 0, 0, 0.08);
}

#main-header .top-header {
    padding-top: 1em;
}

#main-header .top-header,
#main-header nav {
    display: flex;
    align-items: center;
}

#main-header .top-header .social-media i {
    font-size: 22px;
    color: #750059;
}

#main-header .top-header .social-media a:hover i {
    color: #121822;
}

#main-header .top-header .social-media i:first-child {
    margin-left: 0.5em;
    transition: all 0.1s;
}

#main-header .top-header .logo h1 {
    font-size: 23px;
    font-weight: 600;
    margin: 0 auto;
    text-align: center;
}

#main-header nav {
    margin-top: 8px;
}

#main-header nav form {
    position: relative;
    width: 100%;
    display: inline-table;
    transition: all .2s;
}

#main-header nav form input {
    border: none;
    background-color: #f5f5f5;
    outline: 0;
    display: inline-block;
    padding: 5px 15px;
    width: 100%;
    border-radius: 10px;
    transition: all .2s;
    font-size: 12px;
}

#main-header nav form input:focus {
    width: 300px !important;
}

#main-header nav form i {
    position: absolute;
    transition: all .2s;
    left: 1em;
    top: 50%;
    transform: translateY(-50%);
}

#main-header nav ul.desktop-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

#main-header nav ul.desktop-nav li:hover {
    border-bottom: 1px solid var(--primary);
}

#main-header nav ul.desktop-nav li:hover a {
    color: var(--primary);
}

#main-header nav ul.desktop-nav li {
    border-bottom: 1px solid transparent;
    padding: .65em 1em;
    margin: 0;
}

#main-header nav ul.desktop-nav li.active {
    color: var(--primary);
    border-bottom: 1px solid var(--primary);
}

#main-header nav .shopping-cart {
    background: #f3f3f3;
    color: #13192390;
    padding: 5px;
    border-radius: 10px;
    transition: all 0.2s;
    font-size: 12px;
}

#main-header nav .shopping-cart:hover {
    background: var(--primary);
}

#main-header nav ul li {
    position: relative;
}

#main-header nav .shopping-cart:hover a {
    color: #fff;
}

#main-header .dropdown {
    z-index: 999;
}

#main-header nav ul li > ul {
    display: none;
    background: #fff;
    padding: .5em;
    text-align: right;
}

#main-header nav ul li:hover > i {
    color: var(--primary);
}

#main-header nav ul li:hover > ul li {
    color: #0b0e18 !important;
    border: 0 !important;
}

#main-header nav ul li:hover > ul li a {
    color: #0b0e18 !important;
}

#main-header nav ul li:hover > ul li:hover a {
    border: 0 !important;
    color: var(--primary) !important;
}

#main-header nav ul li:hover > ul {
    display: block;
    position: absolute;
    width: 185px;
    -webkit-box-shadow: 0 0 25px rgba(0, 0, 0, .17);
    -moz-box-shadow: 0 0 25px rgba(0, 0, 0, .17);
    box-shadow: 0 0 25px rgba(0, 0, 0, .17);
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    top: 3em;
    right: .5em;
}

/* header-section */
#header-section {
    padding: 1em 0 3em 0;
}

#header-section img {
    width: 100%;
    min-height: 500px !important;
    max-height: 500px;
    border-radius: 20px;
}

#header-section .col-12 {
    padding: .25em;
}

#header-section .image-card::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-image: linear-gradient(
            180deg,
            rgba(117, 0, 89, 0.09),
            rgba(59, 0, 45, 0.6)
    );
    border-radius: 20px;
    opacity: 0.8;
}

#header-section .image-card-info {
    bottom: 2em;
    z-index: 1;
    color: #fff;
}

#header-section .image-card-info h2 {
    font-size: 29px;
    margin-bottom: 0.25em;
}

#header-section .image-card-info p {
    font-size: 12px;
}

/* about-section */
#about-section {
    padding-bottom: 3em;
}

#about-section .lines,
#about-section .lines .circles {
    margin: 0 auto;
    padding: 0 15px;
    max-width: 1200px;
    min-width: 1200px;
    position: relative;
}

#about-section .lines .circles .polygons::after {
    content: "";
    background-image: url("../img/main-page/polygon-icon.svg");
    transform: rotate(20deg);
    display: block;
    width: 60px;
    height: 60px;
    position: absolute;
    left: 0;
    top: 0;
}

#about-section .lines .circles .polygons::before {
    content: "";
    background-image: url("../img/main-page/x-icon.svg");
    display: block;
    width: 38px;
    height: 32px;
    position: absolute;
    left: 0;
    bottom: 0;
}

#about-section .lines .circles::after {
    content: "";
    background-image: url("../img/main-page/circle-icon.svg");
    display: block;
    width: 53px;
    height: 52px;
    position: absolute;
    right: 30em;
    bottom: 0;
}

#about-section .lines .circles::before {
    content: "";
    background-image: url("../img/main-page/polygon-icon.svg");
    display: block;
    width: 60px;
    height: 60px;
    position: absolute;
    right: -4em;
    bottom: 9em;
}

#about-section .lines::before {
    content: "";
    display: block;
    height: 5px;
    width: 100%;
    background: var(--primary);
    position: absolute;
    border-radius: 25px;
    right: -84em;
    top: 7em;
}

#about-section .container::before {
    content: "";
    display: block;
    height: 5px;
    width: 100%;
    background: var(--primary);
    position: absolute;
    border-radius: 25px;
    left: -39em;
    bottom: 12em;
}

#about-section .right-side h2 {
    font-weight: 600;
    margin-bottom: 0.25em;
}

#about-section .left-side img {
    width: 450px;
    height: 550px;
    max-width: 100%;
    margin-right: 1.5em;
    max-height: 100%;
    border-radius: 20px;
    box-shadow: 0 0 0 15px #fff;
    -moz-outline-radius: 25px;
    z-index: 1;
}

#about-section .sub-image {
    bottom: 3em;
    left: 1em;
    z-index: 2;
}

#about-section .sub-image img {
    width: 250px;
    height: 300px;
}

/* coaching-section */
#coach-section {
    padding-bottom: 4em;
}

#coach-section .right-side img {
    width: 100%;
    border-radius: 15px;
}

#coach-section .left-side h2 {
    font-weight: 600;
    margin-bottom: 0.25em;
}

#coach-section .left-side p {
    line-height: 2.6;
}

/* courses-section */
#courses-section {
    padding-bottom: 3em;
}

/* extra-code (refactor) */
#courses-section .row,
#customers-section .row,
#articles-section .row {
    padding-top: 3em;
    border-top: 3px dashed #8f96a290;
    position: relative;
}

#courses-section .row h2,
#customers-section .row h2,
#articles-section .row h2 {
    right: 0;
    background: #f8f8f8;
    top: -25px;
    position: absolute;
    font-size: 28px;
    font-weight: 600;
}

#courses-section .row > a,
#customers-section .row > a,
#articles-section .row > a {
    left: 0;
    background: #f8f8f8;
    top: -21px;
    position: absolute;
    width: 114px;
}

/* end-extra-code (refactor) */
#courses-section .row h2 {
    width: 135px;
}

#courses-section h3 {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 0.5em;
}

#courses-section p {
    font-size: 11px;
    color: #6d7682;
    font-weight: 300;
    margin-bottom: 0.75em;
}

#courses-section .course-card,
#product-page .course-card,
.user-panel .course-card {
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    margin-bottom: 1.5em;
    background: #fefefe;
    position: relative;
    height: 500px;
}

#courses-section .course-card .course-img img,
#product-page .course-card .course-img img,
.user-panel .course-card .course-img img {
    border-radius: 10px 10px 0 0;
    height: 200px;
    max-height: 200px;
}

#courses-section .course-card .course-img .course-like {
    left: .75em;
    top: 3px;
    color: #fff;
    font-size: 22px;
    cursor: pointer;
    z-index: 22;
}

.article-badge {
    color: #fff;
    cursor: pointer;
    background-color: rgba(109, 118, 130, 0.251);
    padding: 3px 15px;
    font-size: 11px;
    border-radius: 5px;
    z-index: 22;
    transition: all .2s;
}

#courses-section .course-card .course-img .course-badge {
    right: .75em;
    top: 12px;
    color: #fff;
    cursor: pointer;
    background-color: rgba(109, 118, 130, 0.251);
    padding: .25em 1em;
    font-size: 10px;
    border-radius: 5px;
    z-index: 22;
    transition: all .2s;
}

#courses-section .course-card .course-img .course-badge:hover,
.user-panel .course-card .course-img .course-badge:hover,
.article-badge:hover {
    background-color: #6d7682;
}

#courses-section .course-body,
#product-page .course-body,
.user-panel .course-body {
    background-color: #fefefe;
    padding: 1.5em;
}

#courses-section .course-body span,
#product-page .course-body span,
.user-panel .course-body span {
    font-size: 11px;
    color: var(--primary);
}

#courses-section .course-footer,
#product-page .course-footer,
.user-panel .course-footer {
    background: #f8f8f8;
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 0.75em;
    border-radius: 0 0 10px 10px;
}

#courses-section .course-footer span,
#product-page .course-footer span,
.user-panel .course-footer span {
    font-size: 12px;
}

/* customer-card */
#customers-section {
    padding-bottom: 4em;
}

#customers-section .row h2 {
    width: 120px;
}

#customers-section .customer-card {
    display: flex;
    align-items: center;
    background-color: #fff;
    height: 100%;
    border-radius: 15px;
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.08);
    padding: 1em;
}

#customers-section .customer-card img {
    width: 100px !important;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 3px 3px 8px 0 rgba(0, 0, 0, 0.1);
}

#customers-section .customer-card .customer-body {
    border-right: 1px solid #6d768280;
    padding-right: 1em;
    margin-right: 1em;
}

#customers-section .customer-card .customer-title {
    margin-bottom: 0.5em;
}

#customers-section .customer-card h3 {
    font-size: 17px;
}

#customers-section .customer-card p {
    font-size: 13px;
    color: var(--text);
    font-weight: 300;
    margin-bottom: 0.5em;
}

/* articles-section */
#articles-section {
    padding-bottom: 4em;
}

#articles-section .row h2 {
    width: 145px;
}

#articles-section .article-card:hover {
    transform: translateY(-10px);
}

#articles-section .article-card:hover .article-img::after {
    background-color: #13192360;
}

#articles-section .article-card .article-img:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    background: #13192330;
    transition: all .2s;
}

#articles-section .article-card .article-img img {
    width: 100%;
    border-radius: 10px;
    max-height: 100% !important;
}

#articles-section .article-card {
    cursor: pointer;
    padding: 0 !important;
    transition: all .2s;
}

#articles-section .article-card .article-img .article-body {
    position: absolute;
    text-align: center;
    bottom: 1em;
    background-color: #fff;
    padding: 1em .5em;
    right: 0.75em;
    left: 0.75em;
    z-index: 99;
    border-radius: 10px;
}

#articles-section .article-card .article-img .article-body h3 {
    font-size: 14px;
    margin-bottom: 0.25em;
    font-weight: 500;
}

#articles-section .article-card .article-img .article-body p {
    font-size: 12px;
    font-weight: 300;
    color: #131923;
    margin-bottom: 0.25em;
}

#articles-section .article-card .article-img .article-badge-parent {
    z-index: 99;
    position: absolute;
    top: .75em;
    right: .75em;
}

#articles-section .article-card .article-img .article-badge {
    padding: 0.5em 1em;
}

#articles-section .article-card .article-img .article-body a {
    font-size: 13px;
}

#articles-section .article-card .article-likes {
    position: absolute;
    left: 1em;
    top: 1em;
    color: #fff;
    font-size: 20px;
    z-index: 99;
}

#articles-section .article-card .article-save {
    position: absolute;
    left: 1em;
    top: 2.5em;
    color: #fff;
    font-size: 22px;
    z-index: 99;
}

/* main-footer */
#main-footer {
    position: relative;
    height: 33em;
    /* max-width: 1366px; */
    /* margin: 0 auto; */
    overflow: hidden;
}

#main-footer .up-script {
    position: absolute;
    bottom: 0;
    left: 1em;
    width: 50px;
    height: 100px;
    font-size: 24px;
    text-align: center;
    color: #fff;
    background-color: #131923;
    border-radius: 10px 10px 0 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    cursor: pointer;
    padding: 0.5em;
    z-index: 999;
    transition: all .2s;
    transform: translateY(2em);
}

#main-footer .up-script i {
    padding-bottom: .5em;
}

#main-footer .up-script:hover {
    transform: translateY(0);
}

#main-footer .right-side {
    background-color: #131923;
    border-radius: 25px 0 0 0;
    width: 25%;
    height: 425px;
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 3em;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#main-footer .origin {
    position: absolute;
    bottom: 1em;
    font-size: 11px;
    right: 27%;
}

#main-footer .right-side .small-kit {
    margin-bottom: 2em;
    align-items: center;
}

#main-footer .right-side .small-kit span {
    font-weight: 600;
    font-size: 16px;
}

#main-footer .right-side img {
    width: 70px;
    margin-left: 1em;
}

#main-footer .right-side span {
    color: #fff;
    text-align: center;
}

#main-footer .left-side {
    background-color: #fff;
    width: 78%;
    padding: 3em;
    left: 0;
    position: absolute;
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.08);
    bottom: 4em;
    border-radius: 0 25px 25px 0;
}

#main-footer .left-side .contact-us {
    text-align: center;
}

#main-footer .left-side .contact-us h3 {
    margin-bottom: .25em;
    font-size: 24px;
}

#main-footer .left-side img {
    width: 85px;
    height: 100%;
}

#main-footer .left-side .location,
#main-footer .left-side .phone {
    display: flex;
    align-items: center;
}

#main-footer .left-side .location i,
#main-footer .left-side .phone i {
    color: var(--primary);
    margin-left: 0.5em;
    margin-bottom: 0.25em;
    font-size: 19px;
}

#main-footer .left-side .phone {
    font-weight: 500;
}

#main-footer .left-side .social-icons i {
    color: var(--primary);
    font-size: 26px;
    transition: all .2s;
}

#main-footer .left-side .contact-us .title {
    padding-bottom: 1em;
    text-align: right;
}

#main-footer .left-side .contact-us .title p {
    font-weight: 300;
    font-size: 12px;
}

#main-footer .left-side .location {
    padding-bottom: 1em;
    font-weight: 300;
    font-size: 11px;
}

#main-footer .left-side .social-icons {
    transition: all .2s;
    display: flex;
    justify-content: center;
}

#main-footer .left-side .social-icons a:not(:last-child) {
    margin-left: 3em;
}

#main-footer .left-side .social-icons a:hover i {
    color: #121822;
}

#main-footer .left-side .enamad h3 {
    font-size: 18px;
    margin-bottom: .75em;
}

#main-footer .left-side .enamad ul li {
    padding-bottom: 1em;
    font-weight: 300;
    font-size: 12px;
}

#main-footer .left-side .organ a:first-child {
    margin-bottom: 2em;
}

/* about-us page */
#about-page {
    padding: 2em 0 3em 0;
}

#about-page .right-side {
    position: relative;
    z-index: 99;
    left: -2.75em;
}

#about-page img {
    border-radius: 25px;
    width: 100%;
    max-height: 680px;
}

#about-page .about-body {
    position: absolute;
    bottom: 1em;
    padding: 2em;
    color: #fff;
    z-index: 99;
    text-align: center;
}

#about-page .about-body h2 {
    margin-bottom: 0.5em;
}

#about-page .about-image::after {
    content: '';
    background-image: linear-gradient(to top, #13192350 114%, rgba(19, 25, 35, 0.1));
    position: absolute;
    border-radius: 25px;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

#about-page .bg-white {
    padding: 3em 4em;
    box-shadow: 0 0 18px 0 rgba(0, 0, 0, 0.08);
    border-radius: 25px;
}

#about-page .left-side {
    z-index: 9;
}

#about-page .top-section {
    margin-bottom: 4em;
}

#about-page .container:first-child::after,
#about-page .container:first-child::before {
    content: url('../img/bill.png');
    display: block;
    position: absolute;
    bottom: -7.5em;
}

#about-page .container:first-child::after {
    left: 12em;
}

#about-page .container:first-child::before {
    right: 12em;
}

#about-page .attribute:not(:last-child) {
    padding-bottom: 2em;
}

#about-page .attribute h3 {
    font-size: 16px;
    margin-bottom: 0.5em;
    color: #131923;
}

#about-page .attribute p {
    font-size: 11px;
    color: #6d7682;
    line-height: 2;
}

#about-page .about-us h3 {
    font-weight: 500;
    margin-bottom: 0.5em;
    font-size: 23px;
}

#about-page .bg-white .about-us {
    text-align: center;
}

#about-page .about-us p {
    color: #6d7682;
    font-weight: 300;
    font-size: 14px;
    line-height: 2.5 !important;
    text-align: justify;
}

/* contact-page */
#contact-page {
    padding: 2em 0 3em 0;
}

#contact-page .top-section {
    padding: 1em 0 4em 0;
    margin: 0 auto !important;
    max-width: 1200px !important;
}

#contact-page .top-section h2 {
    font-size: 26px;
    margin-bottom: 2em;
}

#contact-page .top-section h2::after {
    content: '';
    position: absolute;
    display: block;
    height: 5px;
    width: 100px;
    background-color: var(--primary);
    top: 1.75em;
    border-radius: 25px;
}

#contact-page .top-section form input,
#contact-page .top-section form textarea {
    box-shadow: none !important;
    border: 0;
    outline: 0 !important;
}

#contact-page .top-section form input,
#contact-page .top-section form textarea {
    margin-bottom: 1em;
    padding: 14px;
    border-radius: 10px;
    font-size: 13px;
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.08) !important;
}

#contact-page .top-section .contact-info p {
    font-size: 14px;
}

#contact-page .top-section form button {
    width: 100%;
    padding: 15px;
    border-radius: 10px;
    border: 1px solid transparent;
}

#contact-page .top-section form .btn-dark:hover {
    background: transparent !important;
    border: 1px solid #121822 !important;
    color: #121822 !important;
}

#contact-page .social-medias {
    left: -5em;
    background: #f8f8f8;
    display: flex;
    flex-direction: column;
    z-index: 99999;
    bottom: 8em;
}

#contact-page .social-desc,
#meeting-page .social-desc {
    position: absolute;
    transform: rotate(270deg);
    color: #6d7682;
    left: -8.75em;
    font-weight: 600;
    background: #f8f8f8;
    z-index: 99999;
    top: 5.5em;
    width: 135px;
}

#contact-page .social-medias i,
#meeting-page .social-medias i {
    padding: .5em 0;
    font-size: 22px;
    color: #6d7682;
}

#contact-page .social-medias a:hover i,
#meeting-page .social-medias a:hover i {
    color: var(--primary);
}

#contact-page .top-section::after,
#meeting-page .top-section .container::after {
    content: '';
    display: block;
    position: absolute;
    left: -57px;
    height: 400px;
    width: 2px;
    background-color: #6d7682;
    top: 4em;
}

#meeting-page .top-section h2 {
    font-size: 25px;
    color: #212121;
    padding: 1em 0 .25em 0;
}

#meeting-page .title span {
    color: #6d7682;
    font-size: 12px;
}

#meeting-page .title h2 {
    font-size: 32px;
}

#meeting-page .title {
    padding-top: 2em;
}

#contact-page .contact-image img {
    width: 100%;
    height: 405px;
    border-radius: 20px;
}

#contact-page .contain {
    width: 100%;
}

#contact-page .contain .contact-image .contact-info {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
    font-size: 18px;
    color: #fff;
    text-align: center;
}

#contact-page .contain .contact-image::after {
    display: block;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 20px;
}

#contact-page .contain .contact-image::before {
    content: '';
    display: block;
    left: -3em;
    top: -3em;
    position: absolute;
    z-index: -1;
    background-color: #131923;
    border-radius: 20px;
    width: 400px;
    height: 320px;
}

/* bottom-section */
#contact-page .bottom-section .bg-white,
.bottom-section .bg-white {
    padding: 2em 3em;
    text-align: center;
    border-radius: 25px;
    box-shadow: 0 0 18px 0 rgba(0, 0, 0, 0.08);
}

#contact-page .bottom-section h3 {
    padding-bottom: .75em;
    font-size: 21px;
    font-weight: 500;
}

#contact-page .bottom-section p,
.bottom-section p {
    color: #6d7682;
    padding-bottom: 1.25em;
    font-size: 18px;
    line-height: 46px !important;

}

.btn-pink {
    background-color: var(--primary);
    color: #fff;
    border: 1px solid transparent;
    padding: 10px 30px;
    font-size: 13px;
}

.btn-pink:hover {
    background-color: transparent;
    border: 1px solid var(--primary);
    color: var(--primary);
}

#contact-page .mid-section {
    padding-bottom: 4em;
}

#contact-page .mid-section .item {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
}

#contact-page .mid-section .item i {
    margin-left: .75em;
    font-size: 26px;
}

/* product-page */
#product-header {
    padding: 1em 0 0 0;
}

#product-header .img-box-slider .owl-nav button:first-child,
#product-header .img-box-slider .owl-nav button:last-child {
    position: absolute;
    top: 50%;
    background-color: rgba(255, 255, 255, .5);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 0;
    font-size: 22px;
    color: #fff;
    transform: translateY(-50%);
}

#product-header .owl-nav button:last-child {
    left: .5em;
}

#product-header .owl-nav button:first-child {
    right: .5em;
}

#product-header .img-box-slider .owl-dots {
    position: absolute;
    bottom: 1em;
    left: 50%;
    transform: translateX(-50%);
}

#product-header .img-box-slider .owl-dot {
    background-color: rgba(255, 255, 255, .5);
    border: 0;
    height: 3px;
    margin-right: 10px;
    width: 25px;
    border-radius: 10px;
}

#product-header .img-box-slider .owl-dot.active {
    background-color: #f001b6;
}

#product-header .img-box-slider .img-box {
    margin-left: .5em;
}

#product-header .img-box-slider .img-box .img-body {
    position: absolute;
    bottom: 3.5em;
    z-index: 99;
    color: #fff;
    padding: 0 4em;
}

#product-header .img-box-slider .img-body h2 {
    font-size: 17px;
    font-weight: 600;
    display: inline-block;
    padding: 10px;
    border-radius: 7px;
    background-color: rgba(142, 0, 108, .8);
    margin-bottom: 0.5em;
}

#product-header .img-body p {
    font-size: 11px;
    background-color: rgba(143, 150, 162, .7);
    padding: 8px 10px;
    line-height: 2;
    border-radius: 7px;
}

#product-header .img-box::after {
    content: '';
    background-color: rgba(142, 0, 108, 0.125);
    top: 0;
    right: 0;
    left: 0;
    z-index: -1;
    bottom: 0;
    position: absolute;
    height: 300px;
    margin: .75em .25em;
    border-radius: 15px;
    display: block;
    width: 100%;
}

#product-header img {
    width: 100%;
    border-radius: 15px;
    margin: .75em .25em;
    height: 300px;
}

#product-page {
    padding: 2em 0;
}

#product-page aside .btn-pink,
#article-page aside .btn-pink {
    border-radius: 10px 10px 0 0;
    width: 100%;
    height: 47px;
    margin-bottom: 1em;
    box-shadow: 0 0 18px 0 rgba(240, 1, 182, 0.06);
}

#product-page aside .categories,
#product-page aside .filters,
#article-page aside .categories,
#article-page aside .filters {
    margin-bottom: 1em;
    box-shadow: 0 0 15px 0 rgba(240, 1, 182, 0.06);
}

#product-page aside .categories h2,
#product-page aside .filters h2,
#article-page aside .categories h2,
#article-page aside .filters h2 {
    font-size: 17px;
    text-align: center;
    margin-bottom: .5em;
    padding-bottom: .75em;
    position: relative;
}

#product-page aside .categories h2::after,
#product-page aside .filters h2::after,
#article-page aside .categories h2::after,
#article-page aside .filters h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 50%;
    border-radius: 25px;
    transform: translateX(50%);
    width: 40px;
    height: 3px;
    background-color: var(--primary);
}

#product-page aside .bg-white .item,
#article-page aside .bg-white .item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-size: 12px;
    line-height: 3;
    color: rgba(109, 118, 130, .8);
}

#product-page aside .bg-white .item:not(:last-child),
#article-page aside .bg-white .item:not(:last-child) {
    border-bottom: 1px solid rgba(109, 118, 130, 0.2);
}

#product-page aside .bg-white .item:hover,
#article-page aside .bg-white .item:hover {
    color: var(--primary) !important;
}

#product-page aside .filters .item:hover i,
#article-page aside .filters .item:hover i {
    display: block;
}

#product-page aside .filters .item i,
#article-page aside .filters .item i {
    font-size: 9px;
    display: none;
    transition: all .2s;
}

#product-page aside .categories .item.active,
#product-page aside .filters .item.active,
#article-page aside .filters .item.active {
    color: var(--primary);
}

#product-page aside .filters .item.active i,
#article-page aside .filters .item.active i {
    display: block;
}

#product-page .search,
.search {
    margin-bottom: 1em;
    box-shadow: 0 0 15px 0 rgba(240, 1, 182, 0.08);
    border-radius: 10px;
}

#product-page .search input,
.input-search {
    border-radius: 10px;
    font-size: 13px;
    height: 47px;
    color: var(--primary);
}

#product-page .search i,
#article-page .search i {
    position: absolute;
    left: 1em;
    top: 50%;
    transform: translateY(-50%);
    color: var(--primary);
}

#product-page .search input::placeholder {
    color: rgba(240, 1, 182, .3);
    font-size: 13px;
}

#product-page .course-body h3,
.user-panel .course-body h3 {
    font-size: 15px;
    margin-bottom: 0.5em;
}

#product-page .course-body p,
.user-panel .course-body p {
    font-size: 11px;
    color: rgba(109, 118, 130, .8);
}

#product-page .course-like,
.user-panel .course-like {
    left: 1em;
    top: 1em;
}

#product-page .course-save,
.user-panel .course-save {
    left: 1em;
    top: 3.75em;
}

#product-page .course-badge,
.user-panel .course-badge {
    right: 1em;
    top: 1.5em;
    cursor: pointer;
    padding: 2px 10px;
    font-size: 9px;
    border-radius: 5px;
    transition: all .2s;
    background-color: rgba(109, 118, 130, 0.251);
    color: #fff;
}

#product-page .course-badge:hover,
.user-panel .course-badge:hover {
    background-color: #6d7682;
}

#product-page .course-save:hover i,
#product-page .course-like:hover i,
.user-panel .course-like:hover i,
.user-panel .course-save:hover i {
    color: #fff !important;
    background-color: var(--primary);
}

#product-page .course-save i,
.user-panel .course-save i {
    background-color: #fff;
    color: var(--primary);
    border-radius: 5px;
    cursor: pointer;
    padding: 7px 9.5px;
    transition: all .2s;
    font-size: 18px;
}

#product-page .course-like i,
.user-panel .course-like i {
    background-color: #fff;
    transition: all .2s;
    color: var(--primary);
    border-radius: 5px;
    cursor: pointer;
    padding: 7px 7px;
    font-size: 18px;
}

.form-control {
    border: 0;
    outline: 0;
    box-shadow: none !important;
}

/* meeting-page */
#meeting-page .top-section .bg-white {
    padding: 4em;
    margin: 2em 0 4em 0;
    border-radius: 25px;
    display: block;
    background: url('../img/main-page/matthew-sleeper-Spdu7YT1O00-unsplash.jpg') center, #00000020 !important;
    height: 100%;
    width: 100%;
}

#meeting-page .title h2::after {
    display: block;
    content: '';
    height: 3px;
    margin-top: .25em;
    width: 100px;
    border-radius: 20px;
    background-color: var(--primary);
}

#meeting-page .bottom-section {
    margin-bottom: 3em;
}

#meeting-page .bottom-section h3 {
    font-size: 23px;
    margin-bottom: .5em;
}

#meeting-page .social-medias {
    left: -5em;
    background: #f8f8f8;
    display: flex;
    flex-direction: column;
    z-index: 99999;
    bottom: -3em;
}

#meeting-page .top-section input,
#meeting-page .top-section textarea,
#meeting-page .top-section select {
    padding: 10px;
    border-radius: 7px;
    color: #8f96a2;
    margin-bottom: .5em;
    font-size: 14px;
}

#meeting-page .top-section input::placeholder,
#meeting-page .top-section textarea::placeholder {
    color: #8f96a2;
    font-size: 12px;
}

#meeting-page .top-section label {
    color: #fff;
}

/* single-product-page */
#single-product {
    padding-bottom: 4em;
}

.layer {
    background-color: #00000070;
    border-radius: 0 0 100px 100px;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 5em 5em;
}

#single-product .product-header {
    position: relative;
    background: url('../img/main-page/matthew-sleeper-Spdu7YT1O00-unsplash.jpg') center;
    color: #fff;
    height: 500px;
    vertical-align: middle;
    border-radius: 0 0 100px 100px;
}

#single-product .videos .cam video {
    max-height: 900px !important;
}

#single-product .accordion-collapse {
    padding: 1.5em 1.5em 0;
}

#single-product .product-header p {
    font-weight: 300;
}

#single-product .product-header h1 {
    margin-bottom: .5em;
}

#single-product .product-info {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

#single-product .product-info {
    margin-top: -5em;
}

#single-product .product-info .box {
    z-index: 99;
    box-shadow: 0 0 15px 0 rgba(19, 25, 35, 0.08);
    width: 200px;
    height: 186px;
    display: flex;
    border-radius: 15px;
    background-color: #fefefe;
    flex-direction: column;
    align-items: center;
    font-size: 14px;
    justify-content: center;
}

#single-product .product-info .box:not(:last-child) {
    margin-left: 1em;
}

#single-product .product-info .box-comment {
    color: #70e000;
}

#single-product .product-info .box-contributer {
    color: #2ec4b6;
}

#single-product .product-info .box-session {
    color: #a06cd5;
}

#single-product .product-info .box img {
    width: auto;
    margin: 0.5em 0;
}

#single-product .product-info .box-watch-time {
    color: #ff5d8f;
}

#single-product .product-info .box span:last-child {
    font-weight: 900;
    font-size: 18px;
}

#single-product .main-content {
    margin-bottom: 3em;
}

#single-product .product-status .status {
    color: var(--text);
}

#single-product .product-status,
#single-product .product-author,
#single-product .share-card,
#single-product .new-courses {
    background-color: #fff;
    overflow: hidden;
    margin-bottom: 1em;
    border-radius: 15px;
    box-shadow: 0 0 15px 0 rgba(19, 25, 35, 0.08);
}

#single-product .product-status h2 {
    font-size: 14px;
    padding: 1.5em;
    border-bottom: 1px solid #8f96a240;
}

#single-product .product-status .status {
    padding: .5em 1.5em .5em;
}

#single-product .product-status .status .item {
    display: flex;
    font-size: 12px;
    padding-bottom: .5em;
    justify-content: space-between;
    align-items: center;
}

#single-product .product-status .btn-purple {
    padding: .5em;
    margin: 1em 0;
    border-radius: 7px;
    width: 100%;
    font-size: 13px;
}

#single-product .product-author {
    font-size: 12px;
}

#single-product .teacher {
    border-bottom: 1px solid #8f96a240;
    padding: 1em 1.5em;
}

#single-product .product-author img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
}

#single-product .author-info {
    margin-right: .75em;
}

#single-product .author-info span {
    margin-right: 0.5em;
}

#single-product .author-info span:first-child {
    font-size: 13px;
    font-weight: 600;
}

#single-product .author-body {
    padding: 1em 1.5em;
    color: #131923;
}

#single-product .author-body .author-properties {
    margin-bottom: .5em;
}

#single-product .author-body .author-properties .property {
    display: flex;
    align-items: center;
    justify-content: center;
}

#single-product .author-body .author-properties i {
    font-size: 8px;
    margin-left: 1em;
    color: var(--primary);
}

#single-product .author-body p {
    margin-bottom: 0.5em;
    font-size: 10px;
}

#single-product .author-body .btn-pink {
    padding: 6px 30px;
    font-size: 12px;
}

#single-product .share-card .social-icons {
    display: flex;
    align-items: center;
    gap: .75em;
}

#single-product .share-card {
    padding: 1em;
}

#single-product .share-card i {
    font-size: 22px;
}

#single-product .courses-new {
    padding: 1em;
    font-size: 12px;
}

#single-product .new-courses .course-header span {
    font-weight: 600;
    font-size: 14px;
}

#single-product .new-courses .course-header {
    padding: .5em 1.5em;
    border-bottom: 1px solid #8f96a240;
}

#single-product .courses-new .courses {
    display: flex;
    align-items: center;
    font-weight: 300;
}

#single-product .courses-new .courses i {
    color: var(--primary);
    margin-left: .25em;
    font-size: 9px;
}

#single-product .contact-us {
    margin-bottom: 1em;
}

#single-product .contact-us a {
    display: block;
    border-radius: 8px;
    padding: 1em 0;
    font-size: 13px;
}

#single-product .product,
#single-product .videos,
.comment-read {
    background-color: #fff;
    padding: 1em;
    border-radius: 10px;
    margin-bottom: 1em;
    box-shadow: 0 0 15px 0 rgba(19, 25, 35, 0.08);
}

#single-product .product .header > span {
    font-size: 16px;
    font-weight: 500;
}

#single-product .product img {
    width: 100%;
    display: flex;
    margin: 0 auto;
    height: auto;
    border-radius: 10px;
    margin-bottom: 2em;
}

#single-product .product h2 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: .5em;
    top: -.75em;
}

#single-product .product .left {
    background-color: rgba(143, 150, 162, 0.13);
    color: var(--text);
    padding: 3px 10px;
    width: 200px;
    border-radius: 7px;
    font-size: 11px;
}

#single-product .product p {
    font-size: 12px;
    margin-bottom: 2em;
    color: #1e232c;
}

#single-product .product ul {
    margin-bottom: 2em;
    font-size: 12px;
    color: var(--panelPrimary);
    padding-right: 2em;
}

#single-product .product ul li::marker,
.article-content ul li::marker {
    content: "\f177";
    font-family: 'Font Awesome 5 Pro', serif;
    font-weight: 400;
    display: inline-block !important;
    margin-left: -1em;
    width: 1em;
}

#single-product .product li {
    padding: 0.5em;
}

#single-product .product ul li,
#single-product .product ul {
    list-style: unset !important;
}

#single-product .product a {
    color: var(--primary);
}

#single-product .product .header {
    margin-bottom: 2em;
    flex-wrap: wrap;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#single-product .videos .header {
    display: flex;
    align-items: center;
    margin-bottom: 2em;
}

#single-product .videos .header h3 {
    font-size: 18px !important;
    margin-right: .5em;
}

#single-product .videos .video-box {
    margin-bottom: 1.5em;
    box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.16);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: .5em 1em;
    align-items: center;
    background-color: #f3f3f3;
}

#single-product .videos .video-box .circle {
    background-color: #8f96a2;
    margin-left: 1em;
    width: 30px;
    height: 30px;
    position: relative;
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.16);
    border-radius: 50%;
}

#single-product .videos .video-box .circle span {
    position: absolute;
    color: #fff;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

#single-product .videos .video-box .right-side,
#single-product .videos .video-box .left-side {
    display: flex;
    align-items: center;
    color: #131923;
    font-weight: 500;
}

#single-product .videos .video-box .left-side div:not(:last-child) {
    margin-left: 1em;
}

#single-product .videos .video-box .left-side .status {
    border-left: 1px solid #13192350;
    padding-left: 1em;
}

#single-product .videos .video-box .left-side .time span {
    margin-left: .5em;
    font-weight: 400;
}

#single-product .videos .video-box .left-side {
    font-size: 15px;
    font-weight: 300;
}

#single-product .videos .video-box .left-side i {
    font-size: 20px;
}

#single-product .videos .cam video {
    width: 100%;
    max-height: 380px !important;
    border-radius: 10px;
    margin-bottom: 1em;
}

.comment-read .comment-box.children {
    margin-right: 4em;
}

.comment-read .header {
    font-size: 22px;
    font-weight: 500;
    margin-bottom: 1em;
}

.comment-read .comment-box {
    display: flex;
    align-items: center;
    padding: 1.5em;
    margin-bottom: 1em;
    background-color: rgba(233, 233, 236, 0.3);
    border-radius: 25px;
}

.comment-read .comment-box-parent {
    border-right: 1px solid #e9e9ec;
    padding-right: 5em;
    position: relative;
}

.comment-read .comment-box.children::before {
    content: '';
    width: 100px;
}

.comment-read .header i {
    font-size: 22px;
}

.comment-read .comment-box::before {
    height: 2px;
    width: 50px;
    position: absolute;
    right: 0;
    background-color: #e9e9ec;
    content: '';
}

.comment-read .comment-box .user-info {
    display: flex;
}

.comment-read .comment-box .user-info img {
    width: 100px;
    object-fit: cover;
    height: 100px;
    box-shadow: 0 0 0 10px rgb(255, 255, 255);
    border-radius: 50%;
}

.comment-read .comment-box .user-info .text {
    margin-right: 1.5em;
}

#single-product #name {
    font-weight: 600;
}

.comment-read .comment-box .user-info span,
.comment-read .comment-box .user-info p {
    font-size: 13px;
    font-weight: 300;
}

#single-product .comment-box .widget,
.comment-box .widget {
    display: flex;
    align-items: center;
}

#single-product .comment-box .widget .like,
.comment-box .widget .like {
    display: flex;
    align-items: center;
    margin-right: 1em;
}

#single-product .comment-box .widget .like span,
.comment-box .widget .like span {
    margin-left: 0.5em;
}

.comment-write {
    background-color: #fff;
    border-radius: 10px;
    margin-bottom: 1em;
    box-shadow: 0 0 15px 0 rgba(19, 25, 35, 0.08);
}

.comment-write form {
    padding: 2em 0 2em 1.5em;
}

.comment-write form button {
    display: flex;
    margin: 0 auto 0 0;
    font-size: 13px;
    padding: 5px 20px;
}

.comment-write .bg-dark {
    position: relative;
    border-radius: 0 10px 10px 0;
    height: 100%;
}

.comment-write .col-11 .row {
    padding-left: 1.5em;
}

.comment-write .right-side {
    width: 10%;
}

.comment-write .bg-dark .type {
    width: 160px;
    display: block;
    color: #fff;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%) rotate(90deg);
    left: 50%;
}

.comment-write .left-side {
    width: 90%;
}

.comment-write input::placeholder,
.comment-write textarea::placeholder {
    font-weight: 300;
    font-size: 12px;
}

.comment-write input {
    padding: 10px 15px;
}

.comment-write form input,
.comment-write form textarea {
    background-color: #f5f5f5;
    font-size: 13px;
    padding: 1em;
    border-radius: 8px;
}

.comment-write input {
    color: #131923;
}

.comment-write .form-group {
    margin-bottom: 1em;
}

.btn-purple {
    background-color: var(--panelPrimary);
    color: #fff;
    border: 1px solid transparent;
}

#green {
    color: #38b000;
}

.btn-purple:hover {
    color: var(--panelPrimary);
    background-color: transparent;
    border: 1px solid var(--panelPrimary);
}

/* article-page */
#article-header {
    position: relative;
    margin-bottom: 7em;
}

#article-header .img-container img {
    width: 100%;
    object-fit: cover;
    height: 450px;
}

#article-header .article-slider {
    position: absolute;
    bottom: -4em;
    left: 1em;
    direction: ltr;
}

#article-header .article-slider img {
    width: 160px;
    height: 130px;
    margin-right: 1em;
    margin-left: .25em;
    border-radius: 10px;
}

#article-header .article-slider button:first-child {
    display: none;
}

#article-header .owl-nav button:last-child {
    position: absolute;
    right: -2em;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.3);
    width: 40px;
    height: 40px;
    color: #fff;
    border: 0;
    border-radius: 50%;
    font-size: 17px;
}

#article-header .owl-stage-outer {
    width: 38em;
}

#article-header .content {
    border-radius: 15px;
    position: absolute;
    right: 1em;
    bottom: 4em;
    width: 400px;
    color: #fff;
    background-color: #8e006c80;
    padding: 2em;
    filter: blur(100%);
}

#article-header .content h2 {
    font-size: 22px;
    margin-bottom: .5em;
}

#article-header .content p {
    font-size: 11px;
}

.article-card {
    position: relative;
    background-color: #fff;
    box-shadow: 0 0 18px 0 rgba(240, 1, 182, 0.1);
    border-radius: 15px;
    padding: 1em;
    height: 100%;
}

.article-badge {
    left: 1em;
    top: 1em;
}

.article-like:hover {
    background-color: var(--primary);
    border: 1px solid var(--primary);
    color: #fff;
}

.article-like {
    display: flex;
    justify-content: center;
    align-items: center;
    right: .75em;
    top: .75em;
    background-color: #fff;
    transition: all .2s;
    color: var(--primary);
    border-radius: 5px;
    width: 30px;
    height: 30px;
    text-align: center;
    cursor: pointer;
    font-size: 17px;
}

.article-img {
    margin-bottom: 2em;
}

.article-category {
    background-color: #fff;
    border-radius: 7px;
    padding: 1px 16px;
    text-align: center;
    z-index: 99;
    position: absolute;
    bottom: 70px;
    font-size: 11px;
    margin-bottom: 0;
    right: 50%;
    transform: translateX(50%);
}

.article-img .article-category {
    bottom: -1em;
    box-shadow: 0 0 20px 0 rgba(240, 1, 182, 0.2);
}

.article-img img {
    border-radius: 15px;
    width: 100%;
    min-height: 200px;

}

.article-body {
    text-align: center;
}

.article-body h3 {
    font-size: 15px;
    padding-bottom: .5em;
}

.article-body p {
    font-size: 10px;
    padding-bottom: 0.5em;
}

.article-body a {
    font-size: 12px;
    font-weight: 500;
}

/* single-article */
#single-article {
    margin: 1em 0;
}

#single-article > .header {
    z-index: -1;
    position: relative;
}

#single-article .header img {
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    height: 400px;
    filter: brightness(.7);
    border-radius: 25px;
}

#single-article .content {
    position: absolute;
    right: 50%;
    top: 50%;
    transform: translate(50%, -50%);
    width: 90%;
    text-align: center;
    color: #fff;
}

#single-article .content h1 {
    margin-bottom: 0.25em;
}

#single-article .content p {
    font-weight: 300;
}

#single-article .content-wrapper {
    background-color: #fff;
    z-index: 9999;
    border-radius: 35px;
    margin-top: -4em;
}

#single-article .main-content .content-wrapper {
    padding: 2em;
}

#single-article .box img {
    margin-bottom: .25em;
    width: 70px;
}

#single-article .box {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 1.5em;
}

.box span {
    font-size: 13px;
}

.box span:last-child {
    font-size: 22px;
    font-weight: 900;
}

#single-article .box-time {
    color: #EB5890;
}

#single-article .box-chat {
    color: #76E000;
}

#single-article .box-share .social-icons {
    margin-top: .5em;
}

#single-article .box-share i {
    font-size: 24px;
}

#single-article .box-share .social-icons {
    display: flex;
    align-items: center;
}

#single-article .box-share a {
    transition: all .2s;
}

#single-article .box-share .social-icons a:not(:last-child) {
    margin-left: 1em;
}

#single-article .box-related-article span {
    margin-bottom: .5em;
    padding-bottom: 0.5em;
    border-bottom: 1px solid #8f96a240;
}

#single-article .box ul li {
    font-size: 12px;
    text-align: center;
    padding: .25em 0;
}

#single-article .box-info .author-pic {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #8f96a240;
    padding-bottom: 0.5em;
    margin-bottom: 0.5em;
    align-items: center;
}

#single-article .box-info .author-pic img {
    border-radius: 50%;
    height: 70px;
    width: 70px;
}

#single-article .box-info .author-pic span {
    font-size: 15px;
}

#single-article .box-info .author-info p {
    font-size: 10px;
    color: #13192390;
    text-align: center;
}

#single-article .box-info .author-info a {
    font-size: 12px;
}

#single-article .main-content {
    margin-bottom: 3em;
}

.article-content img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    margin-bottom: 1em;
    border-radius: 20px;
}

.article-content a {
    color: var(--primary);
    font-weight: 500;
}

.article-content ul li {
    color: #38b000;
}

.article-content h2,
.article-content h3 {
    margin-bottom: 0.5em;
    color: #131923;
}

.article-content h2 {
    font-size: 22px;
}

.article-content h3 {
    font-size: 18px;
}

.article-content h4 {
    font-size: 14px;
}

.article-content p {
    font-size: 12px;
    margin-bottom: 1em;
    color: #1e232c;
    font-weight: 300;
}

.article-content ul {
    padding-right: 2em;
    margin-bottom: 1em;
    font-size: 13px;
}

.article-content ul li {
    padding: .5em;
}

/* box-login */
.authentication-box {
    background-color: #fff !important;
    text-align: center;
    border: 1px solid var(--panelPrimary);
    border-radius: 15px;
}

#product-page .course-like.active i, .user-panel .course-like.active i {
    color: #fff;
    background-color: var(--primary);
}

.accordion-button:not(.collapsed) {
    color: unset;
    box-shadow: none !important;
    background: unset;
}

.accordion-item {
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

.accordion-item:last-of-type .accordion-button.collapsed,
.accordion-item:last-of-type {
    border-top: 1px solid #21212166 !important;

}

.accordion-button,
.accordion-button:focus,
.accordion-button:not(.collapsed) {
    border-bottom: none;
    background: rgba(131, 123, 123, 0.2);
    padding: 30px;
}

.accordion-button:focus {
    border-color: unset;
    box-shadow: unset;
}

.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.authentication-box .auth-head {
    border-radius: 15px 15px 0 0;
    padding: .5em 0;
    background-color: var(--panelPrimary);
    color: #fff;
}

.authentication-box .auth-head a {
    color: #364153;
}

.authentication-box .auth-info {
    padding: 1em 4em;
}

.authentication-box .auth-info a {
    padding: 5px 30px !important;
    font-size: 13px;
    font-weight: 300;
    color: #fff;
}

.authentication-box .auth-info a:hover {
    color: var(--panelPrimary);
}

.ads-small img {
    width: 100%;
    border-radius: 10px;
    height: auto;
}

#single-article .sticky-top {
    top: 1em !important;
}

.ads {
    box-shadow: 0 0 15px 0 rgba(19, 25, 35, 0.08);
    border-radius: 10px;
}

/* endbox-login */

/* profiles */
/* profile */
#user-panel .profile form {
    background-color: #fff;
    padding: 2em;
    border-radius: 3px;
    font-size: 12px;
    color: #6d7682;
}

#user-panel .profile form label {
    margin-bottom: 0.5em;
}

#user-panel .profile form input {
    color: rgba(143, 150, 162, 0.7);
    font-size: 12px;
    padding: 12px;
    border: 1px solid rgba(238, 238, 238, 0.5);
}

#user-panel .profile form input::placeholder {
    font-size: 12px;
    color: rgba(143, 150, 162, 0.7);
}

#user-panel .profile form .form-select {
    font-size: 13px;
    line-height: 2.5;
    outline: 0;
    color: rgba(143, 150, 162, 0.7);
    border: 1px solid rgba(238, 238, 238, 0.5);
    box-shadow: none;
}

#user-panel .profile form button {
    padding: 5px 25px;
    margin-top: 1.5em;
    box-shadow: 0 10px 45px 0 rgba(173, 97, 211, 0.3);
    font-size: 12px;
    background-color: #ad61d3;
    transition: all .2s;
}

#user-panel .profile form button:hover {
    background-color: transparent;
    border: 1px solid #ad61d3;
}

/* user-panel-factors */
.btn-panel {
    background-color: #ad61d3;
    padding: 12px 25px;
    border: 1px solid transparent;
    color: #fff;
    border-radius: 3px;
    box-shadow: 0 15px 30px 0 rgba(173, 97, 211, 0.51);
}

.btn-panel:hover {
    border: 1px solid #ad61d3;
    background-color: transparent;
    color: #ad61d3;
}

#panel-factors,
.user-panel {
    padding: 2em 0;
}

#panel-factors .sidebar-bg,
.sidebar-bg {
    background-color: #fff;
    padding: 2em;
    overflow: hidden;
    box-shadow: 0 10px 35px 0 rgba(0, 0, 0, 0.08);
    border-radius: 5px;
    margin-bottom: 1em;
}

#panel-factors .user-info,
.user-panel .user-info {
    text-align: center;
}

#panel-factors .user-info img,
.user-panel .user-info img {
    box-shadow: 0 15px 35px 0 rgba(0, 0, 0, 0.1);
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 50%;
    margin-bottom: 0.5em;
}

#panel-factors .user-info .user-pic,
.user-panel .user-info .user-pic {
    display: inline-block;
}

#panel-factors .user-info .user-pic label i,
.user-panel .user-info .user-pic label i {
    background-color: #fff;
    color: #ad61d3;
    padding: .5em;
    position: absolute;
    right: 0;
    border-radius: 50%;
    transition: all .2s;
    cursor: pointer;
    bottom: .5em;
    font-size: 14px;
}

#panel-factors .user-info .user-pic label i:hover,
.user-panel .user-info .user-pic label i:hover {
    background-color: #ad61d3;
    color: #fff;
}

#panel-factors .user-info a,
.user-panel .user-info a {
    display: flex;
}

#panel-factors .user-info a i,
.user-panel .user-info a i {
    margin-left: .75em;
    font-size: 18px;
}

#panel-factors .user-info span,
.user-panel .user-info span {
    display: block;
    font-size: 14px;
}

#panel-factors .user-info .price,
.user-panel .user-info .price {
    font-size: 11px !important;
}

#panel-factors .user-info .btn-panel,
.user-panel .user-info .btn-panel {
    font-size: 13px;
    margin-top: 1em;
    justify-content: center;
}

#panel-factors .menu h2,
.user-panel .menu h2 {
    font-size: 16px;
    margin-bottom: 1em;
    color: #1b212c;
    background-color: #fff;
    position: absolute;
    width: 100%;
    display: block;
    top: -.95em;
    padding: 0 12px;
    right: 2em;
}

#panel-factors .menu ul,
.user-panel .menu ul {
    position: relative;
    border-top: 2px solid #ad61d3;
    padding-top: 2em;
}

#panel-factors .menu li,
.user-panel .menu li {
    margin: .5em 0;
    padding: .25em .5em;
    display: flex;
    align-items: center;
}

#panel-factors .menu .logout,
.user-panel .menu .logout {
    display: flex;
    align-items: center;
    padding: 1em .5em 0 1em;
    border-top: 1px solid rgba(199, 199, 199, 0.5);
}

#panel-factors .menu .logout:hover a,
.user-panel .menu .logout:hover a {
    color: #ad61d3;
}

#panel-factors .menu .logout i,
.user-panel .menu .logout i {
    margin-left: 1em;
}

#panel-factors .menu li:hover,
#panel-factors .menu li.active,
.user-panel .menu li.active,
.user-panel .menu li:hover {
    background-color: #c7c7c7;
    box-shadow: 0 10px 35px 0 rgba(0, 0, 0, 0.1);
    border-radius: 5px;
}

#panel-factors .menu li:hover i,
#panel-factors .menu li.active i,
.user-panel .menu li:hover i,
.user-panel .menu li.active i {
    color: #fff !important;
}

#panel-factors .menu li:hover a,
#panel-factors .menu li.active a,
.user-panel .menu li.active a,
.user-panel .menu li:hover a {
    color: #fff;
}

#panel-factors .menu a,
#panel-factors .menu .logout a,
.user-panel .menu a,
.user-panel .menu .logout a {
    color: #1b212c;
    align-items: center;
}

#panel-factors .menu li i,
#panel-factors .menu .logout i,
.user-panel .menu li i,
.user-panel .menu .logout i {
    color: #ad61d3 !important;
    font-size: 22px;
    margin-left: .5em;
}

#panel-factors .left-side h2,
.user-panel .left-side .border-b {
    font-size: 14px;
    padding-bottom: .5em;
    margin-bottom: 1em;
    border-bottom: 1px solid #ad61d3;
}

.user-panel .left-side h2 {
    font-size: 14px;
}

#panel-factors .product-factor {
    background-color: #fff;
    box-shadow: 0 15px 35px 0 rgba(0, 0, 0, 0.08);
    padding: 1em;
    margin-bottom: 1em;
    border-radius: 5px;
}

#panel-factors .product-factor .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 3px;
}

#panel-factors .product-factor h3 {
    font-size: 14px;
    color: #1b212c;
}

#panel-factors .product-factor .header span {
    color: rgba(199, 199, 199, 0.8);
    font-size: 12px;
}

#panel-factors .product-factor .header {
    margin-bottom: 1em;
}

#panel-factors .product-factor .body {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
}

#panel-factors .product-factor .body .right-side {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

#panel-factors .product-factor .body .right-side .property span {
    font-size: 12px;
}

#panel-factors .product-factor .body .btn-panel {
    padding: 4px 10px;
    font-size: 13px;
    display: flex;
    align-items: center;
}

#panel-factors .product-factor .body .btn-panel::after {
    content: '';
    width: 25px;
    margin-right: .5em;
    height: 1px;
    display: flex;
    background-color: #fff;
}

#panel-factors .product-factor .body .btn-panel:hover::after {
    background-color: #ad61d3;
}

#panel-factors .product-factor .body .right-side .property i {
    color: #ad61d3;
}

#panel-factors .product-factor .body .right-side .property:not(:last-child) {
    margin-left: 1em;
}

/* tickets */
.text-purple {
    color: #ad61d3;
}

.user-panel .left-side .ticket {
    box-shadow: 0 15px 35px 0 rgba(0, 0, 0, 0.08);
    background-color: #fff;
    border-radius: 3px;
    padding: 1.5em 2em;
    margin-bottom: 1.5em;
}

.user-panel .left-side .ticket-parent {
    display: flex;
    justify-content: space-between;
}

.user-panel .left-side .ticket-content {
    margin-right: 2em;
    width: 100%;
}

.mobile-nav .left-side {
    position: relative;
}

.mobile-nav .left-side i {
    color: rgba(0, 0, 0, .5);
    font-size: 20px;
}

.mobile-nav .left-side .circle-count {
    position: absolute;
    left: 0;
    top: 1em;
}

.mobile-nav .left-side .circle-count .circle-background {
    background: #867f7f;
    width: 15px;
    height: 15px;
    position: relative;
    border-radius: 50%;
}

.mobile-nav .left-side .circle-count .circle-background span {
    position: absolute;
    font-size: 12px;
    bottom: 50%;
    right: 50%;
    color: white;
    transform: translate(50%, 50%);
}

.user-panel .left-side .ticket-title {
    display: flex;
    margin-right: 1em;
    align-items: flex-start;
    width: 100% !important;
}

.user-panel .left-side .ticket img {
    display: inline;
    -o-object-fit: cover;
    object-fit: cover;
    width: 80px;
    height: 80px;
    border-radius: 50%;
}

.text-success {
    color: #38b000;
}

.text-paragraph {
    color: var(--text);
}

.user-panel .ticket-activity span {
    display: block;
}

.user-panel .ticket-activity span {
    font-size: 11px;
}

.user-panel .ticket-info > a span {
    font-size: 14px !important;
    font-weight: 500;
}

.user-panel .ticket-content p {
    font-size: 12px;
    font-weight: 300;
}

.user-panel .ticket-content a {
    font-size: 11px !important;
}

.user-panel .ticket-body {
    margin-top: .5em;
    background-color: #fff;
    border-radius: 5px;
    font-weight: 100;
    font-size: 12px;
    padding: 2em;
    box-shadow: 0 0 25px, rgba(0, 0, 0, .02);
    color: #131923;
}

.user-panel .ticket-body a {
    font-size: 11px;
    color: var(--primary);
}

.pagination {
    display: flex;
    padding: 1em 0;
    direction: rtl;
    justify-content: center;
}

.pagination a {
    background-color: #fff;
    box-shadow: 0 0 15px 0 rgba(240, 1, 182, 0.08);
    width: 35px;
    font-size: 17px;
    border-radius: 7px;
    height: 35px;
    text-align: center;
    transition: all .2s;
    align-items: center;
    display: flex;
    justify-content: center;
    margin: 0 10px;
}

.pagination a.active {
    background-color: var(--primary);
    color: #ffffff;
}

.pagination a:hover {
    background-color: var(--primary);
    color: #ffffff;
}

.user-panel .bullet {
    margin-right: .5em;
}

.user-panel .bullet i {
    color: var(--text);
    font-size: 7px;
}

.user-panel .pagination a:hover i {
    color: #fff;
}

.user-panel .pagination a i {
    color: var(--text);
    font-weight: 700;
}

.user-panel .pagination a:not(:last-child) {
    margin-right: .5em;
}

.user-panel .user-save ul li:not(:last-child) {
    margin-left: 1em;
}

.user-panel .user-save ul li a.active {
    color: #ad61d3;
    font-weight: 500;
}

.user-panel .poshtibani .bg-white {
    padding: 1em 2em;
    border-radius: 5px;
}

.user-panel .poshtibani form .form-group {
    margin-bottom: 1em;
}

.user-panel .poshtibani form button {
    margin: 1em 0;
    padding: 5px 35px;
    font-size: 12px;
    box-shadow: 0 10px 45px 0 rgb(173, 97, 211);
    border-radius: 2px;
}

.user-panel .poshtibani form label {
    color: #6d7682;
    font-size: 13px;
}

.user-panel .poshtibani form .form-control::placeholder {
    color: rgba(143, 150, 162, 0.7);
    font-size: 11px;
}

.user-panel .poshtibani form select {
    color: rgba(143, 150, 162, 0.7);
    font-size: 11px;
    padding: .95em;
}

.user-panel .poshtibani form .form-control {
    border: 1px solid rgba(143, 150, 162, 0.3);
}

/* card-basket */
.user-panel .card-basket .basket {
    display: flex;
    background-color: #fff;
    border-radius: 10px;
    justify-content: space-between;
    height: 80px;
    max-height: 80px;
    box-shadow: 0 15px 35px 0 rgba(143, 150, 162, 0.1);
}

.user-panel .card-basket .basket img {
    width: 130px;
    border-radius: 0 10px 10px 0;
    height: 80px;
    max-height: 80px;
}

.user-panel .ticket-cancel {
    margin: .5em 0;
    font-size: 9px;
}

.user-panel .time {
    color: var(--text);
    font-size: 9px;
}

.user-panel .card-basket .product-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.user-panel .card-basket .product-desc {
    display: flex;
    margin-right: 1em;
    flex-direction: column;
}

.user-panel .card-basket .product-desc a {
    font-size: 13px;
}

.user-panel .card-basket .product-desc span {
    font-size: 11px;
}

.user-panel .card-basket .product-type {
    font-size: 18px;
    color: #ad61d3;
}

.user-panel .card-basket .product {
    width: 200px;
}

.user-panel .card-basket .product-status {
    display: flex;
    padding: 1em;
    align-items: center;
}

.user-panel .card-basket .product-status a {
    font-size: 13px;
}

.user-panel .card-basket .product-status .price-number {
    font-size: 24px !important;
}

.user-panel .card-basket .product-status span {
    font-size: 13px !important;
    margin-right: .25em;
}

.user-panel .card-basket .product-status .price {
    margin-left: 2em;
    display: flex;
    align-items: center;
}

.user-panel .card-basket .product-prices {
    background-color: #fff;
    box-shadow: 0 15px 35px 0 rgba(143, 150, 162, 0.08);
    padding: 1em;
    border-radius: 10px;
}

.user-panel .card-basket .product-prices .item {
    display: flex;
    justify-content: space-between;
    color: #13192399;
    font-size: 13px;
    margin-bottom: 0.5em;
}

.user-panel .card-basket .product-prices .button-parent {
    padding-top: 1em;
    margin-top: 1em;
    border-top: 1px solid #f3f3f3;
}

.user-panel .card-basket .product-prices .btn-pink {
    border-radius: 8px;
    padding: 10px 20px;
}

/* profile */
.user-panel .profile .checkout {
    background-color: #fff;
    box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.06);
    padding: 2em;
}

.user-panel .profile .checkout h2 {
    font-size: 16px;
    margin-bottom: 1em;
}

.user-panel .profile .checkout label {
    color: #6d7682;
}

.user-panel .profile .checkout input {
    border: 1px solid rgba(143, 150, 162, 0.3);
    font-size: 13px;
    padding: .75em;
}

.user-panel .profile .checkout input::placeholder {
    color: rgba(143, 150, 162, 0.3);
}

/* profile header */
.user-loged {
    justify-content: flex-end;
    display: flex;
    align-items: center;
}

.user-loged img {
    width: 40px;
    height: 40px;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 50%;
    margin-left: 0.5em;
}

.user-loged .dropdown-menu.show {
    margin-top: .5em !important;
}

.user-loged .dropdown-menu li:hover {
    background-color: rgba(109, 118, 130, 0.1);
    border-radius: 5px;
}

.dropdown-toggle::after {
    content: "\f078";
    font-family: 'Font Awesome 5 Pro', serif;
    border: 0 !important;
}

.user-loged .dropdown-toggle {
    display: flex;
    align-items: center;
}

.user-loged .dropdown-item:focus, .dropdown-item:hover {
    background-color: transparent;
}

.user-loged .dropdown-item {
    padding: .25em .5em;
    display: flex;
    align-items: center;
}

.user-loged .dropdown-menu {
    padding: 1em;
    min-width: 12rem;
    border-radius: 10px;
    bottom: 1em;
    font-size: 14px;
    box-shadow: 0 0 35px 0 rgba(143, 150, 162, 0.08);
    border: solid 1px #e9e9ec;
}

.user-loged .dropdown-menu li {
    line-height: 2;
}

.user-loged .dropdown-menu li a i {
    margin-left: 10px;
}

.user-loged .dropdown-menu li a {
    font-weight: 300;
}

/* success payment */
#success-payment {
    padding: 3em 0;
}

#success-payment .success-payment .payment-header {
    background-color: #53d397;
    padding: .5em;
    font-size: 17px;
    border-radius: 10px 10px 0 0;
    text-align: center;
    color: #fff;
    font-weight: 500;
}

#success-payment .unsuccess-payment .payment-header {
    background-color: #e13535;
    padding: .5em;
    font-size: 17px;
    border-radius: 10px 10px 0 0;
    text-align: center;
    color: #fff;
    font-weight: 500;
}

#success-payment .payment .item {
    color: #131923;
    display: flex;
    padding: .25em;
    align-items: center;
    font-size: 16px;
    justify-content: space-between;
}

#success-payment .payment .item:not(:last-child) {
    border-bottom: 1px solid #8f96a260;
}

#success-payment .payment-info {
    padding: 1em 2em;
}

#success-payment .payment {
    border-radius: 10px;
    box-shadow: 0 15px 35px 0 rgba(0, 0, 0, 0.08);
    background-color: #fff;
}

.text-red {
    margin: 1em 0;
    color: #e13535;
    font-weight: 900;
}

.text-green {
    color: #53d397;
    font-weight: 900;
    margin: 1em 0;
}

.text-green-500 {
    color: #38b000;
}

/* ticket answer modal */
.user-panel .ticket-answer-modal .modal-header {
    padding: 1em;
    border-color: var(--primary);
}

.user-panel .ticket-answer-modal form label {
    color: #6d768280;
}

.user-panel .ticket-answer-modal .modal-content {
    border-radius: 2px;
}

.user-panel .ticket-answer-modal .modal-body {
    font-size: 13px;
    color: #131923;
    font-weight: 300;
}

.user-panel .ticket-answer-modal form textarea {
    border: 1px solid rgba(143, 150, 162, 0.3);
    font-size: 14px;
    padding: .5em 1em;
    width: 100%;
    outline: 0;
}

.user-panel .ticket-answer-modal form textarea::placeholder {
    font-size: 12px;
}

.user-panel .ticket-answer-modal form button {
    display: block;
    margin: 0 auto 0 0;
    padding: 4px 35px;
    outline: 0;
}

.user-panel .ticket-answer-modal .modal-dialog {
    max-width: 700px !important;
    margin: 1.75rem auto;
}

/* wallet */
#user-panel .wallet .item:hover,
#user-panel .wallet .item.active {
    background: var(--primary) !important;
    padding: 1em;
    transform: translateY(-1em);
    border-radius: 10px;
    box-shadow: 0 15px 35px 0 rgba(0, 0, 0, .08);
    color: #fff;
}

#user-panel .wallet .item:hover .btn-pink,
#user-panel .wallet .item.active .btn-pink {
    background: #fff;
    color: var(--primary);
}

#user-panel .wallet .item:hover span,
#user-panel .wallet .item.active span {
    color: #fff;
}

#user-panel .wallet .item {
    padding: 1em;
    cursor: pointer;
    transition: all .2s;
    border-radius: 10px;
    height: 210px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#user-panel .wallet .bg-white {
    padding: 2em;
    border-radius: 5px;
    box-shadow: 0 15px 35px 0 rgba(173, 97, 211, 0.1);
}

#user-panel .wallet .price {
    font-size: 48px;
    font-weight: 700;
}

#user-panel .wallet .wallet-price {
    position: relative;
}

#user-panel .wallet i {
    position: absolute;
    left: -1em;
    top: 1.75em;
    font-size: 18px;
}

#user-panel .wallet .item-title {
    width: 140px;
    position: absolute;
    top: -14px;
    left: -3.75em !important;
}

#user-panel .wallet .wallet-price .price-text {
    color: #8f96a280;
    position: absolute;
    bottom: 3px;
    right: 0.75em;
}

#user-panel .wallet .item .btn-pink {
    padding: 8px 70px;
}

#user-panel .wallet form {
    margin-top: 3em;
    align-items: flex-end;
    justify-content: space-between;
}

#user-panel .wallet form label {
    margin-bottom: 0.5em;
    color: #131923;
    font-weight: 300;
}

#user-panel .wallet form button {
    border-radius: 5px;
    padding: 8.5px 30px;
}

#user-panel .wallet form input {
    width: 100%;
    border: 1px solid rgba(173, 97, 211, 0.5);
    font-size: 12px;
    padding: .25em .5em;
    border-radius: 5px;
    outline: 0;
    box-shadow: 0 10px 30px 0 rgba(173, 97, 211, 0.1);
}

/* media-query */
@media only screen and (max-width: 1365px) {
    .comment-write .bg-dark {
        display: none !important;
    }

    .comment-write form {
        padding: 2em;
    }

    .comment-write .left-side {
        width: 100%;
    }

    #main-footer {
        height: unset !important;
    }

    #about-page .top-section {
        margin-bottom: 4em;
    }

    #about-page .container:first-child::after,
    #about-page .container:first-child::before {
        display: none !important;
    }

    #about-section .lines {
        max-width: unset !important;
        min-width: unset !important;
    }

    #about-section .lines .circles {
        max-width: unset !important;
        min-width: unset !important;
    }

    #about-section::after,
    #about-section::before,
    #about-section .container::after,
    #about-section .container::before,
    #about-section .lines::after,
    #about-section .lines::before,
    #about-section .lines .circles::after,
    #about-section .lines .circles::before,
    #about-section .lines .circles .polygons::after,
    #about-section .lines .circles .polygons::before {
        display: none;
    }

    #contact-page .top-section::after,
    #contact-page .social-medias,
    #contact-page .social-desc,
    #meeting-page .top-section .container::after,
    #meeting-page .social-medias,
    #meeting-page .social-desc {
        display: none;
    }

    /* footer */
    #main-footer {
        overflow: unset !important;
    }

    #main-footer .right-side,
    #main-footer .origin,
    #main-footer .up-script {
        display: none;
    }

    #main-footer .left-side {
        width: 100%;
        height: unset !important;
        position: unset !important;
        border-radius: 0;
    }
}

@media only screen and (min-width: 992px) {
    #main-footer .enamad .row {
        max-width: 380px !important;
    }

    #main-header .desktop-nav {
        display: block;
    }

    #main-header .mobile-nav {
        display: none;
    }

    #about-page .container:first-child {
        max-width: 992px !important;
    }
}

@media only screen and (max-width: 992px) {
    .comment-read .comment-box .user-info {
        flex-wrap: wrap;
        justify-content: center;
    }

    .comment-read .comment-box .user-info img {
        margin-bottom: 1.5em;
    }

    #main-header .desktop-nav {
        display: none;
    }

    #main-header .mobile-nav {
        display: block;
    }

    #main-header .mobile-nav .burger-menu {
        font-size: 32px;
        padding: .5em 0;
    }

    #main-header .mobile-nav .sidebar {
        position: fixed;
        right: 0;
        top: 0;
        height: 100vh;
        width: 260px;
        background-color: #ffffff;
        transform: translateX(350px);
        z-index: 99999;
        padding: 1em;
        transition: all .4s;
    }

    #main-header .mobile-nav .logo {
        padding-bottom: 0.5em;
        border-bottom: 1px solid rgba(109, 118, 130, 0.31);
    }

    #main-header .mobile-nav .logo span {
        font-size: 25px;
        font-weight: 600;
    }

    #main-header .mobile-nav .sidebar .mobile-menu ul li i {
        position: absolute;
        left: 0;
        top: 1.5em;
    }

    #main-header .mobile-nav .sidebar .mobile-menu ul li i {
        transition: .2s;
    }

    .toggle90deg {
        transform: rotate(90deg);
    }

    #main-header .mobile-nav .sidebar .mobile-menu ul li > ul {
        padding-right: 1em;
    }

    #main-header .mobile-nav .sidebar .mobile-menu ul li {
        line-height: 4;
        position: relative;
    }

    #main-header .mobile-nav .blackscreen {
        display: block;
        position: fixed;
        background-color: rgba(0, 0, 0, 0.56);
        transition: all .2s;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        z-index: 9999;
    }

    #customers-section .customer-card {
        flex-wrap: wrap;
        flex-direction: column !important;
        display: flex;
        text-align: center;
    }

    #customers-section .customer-card .customer-img {
        margin-bottom: .5em;
    }

    #customers-section .customer-card .customer-body {
        margin-right: 0;
        padding-right: 0;
        border-right: 0;
    }

    /* about-page */
    #about-page .right-side {
        position: unset !important;
    }

    /* contact-page */
    #contact-page .top-section h2::after,
    #contact-page .contain .contact-image::before {
        display: none;
    }

    #contact-page .top-section .left-side {
        padding: .5em 0 3em 0;
    }

    #contact-page .top-section .left-side {
        order: -1;
    }

    #contact-page .top-section h2 {
        margin-bottom: 1em !important;
    }

    /* basket-card */
    #user-panel .card-basket .left-side {
        order: -1;
        margin-bottom: 1em;
    }
}

@media only screen and (max-width: 768px) {
    #header-section img {
        width: 100%;
        max-height: 300px !important;
        min-height: 300px !important;
    }

    .main-content .row aside,
    #article-page .row aside {
        order: 1;
    }

    .layer {
        padding: 0 2em;
    }

    #single-article .content-wrapper .col-md-2 {
        order: 1;
        margin-top: 2em;
    }

    .user-panel .card-basket .basket {
        display: block !important;
        height: auto;
        max-height: unset;
    }

    .user-panel .card-basket .basket img {
        height: 250px !important;
        width: 100%;
        border-radius: 8px 8px 0 0;
        max-height: unset;
    }

    .user-panel .card-basket .product-info {
        display: block;
    }

    .user-panel .card-basket .product-desc {
        margin-top: 1em;
    }

    .user-panel .card-basket .product {
        width: 97%;
    }

    .user-panel .card-basket .product-status {
        justify-content: space-between !important;
    }

    .user-panel .card-basket .product-status {
        padding: 0 1em;
    }

    .user-panel .card-basket .product-type {
        display: none;
    }

    #article-header .content {
        width: 292px;
        bottom: 12em;
    }

    #article-header .article-slider {
        position: unset !important;
        margin: 1em 0;
    }

    #article-header .owl-stage-outer {
        width: 100%;
    }
}

@media only screen and (max-width: 576px) {
    #single-product .product-info {
        margin: 2em 0 0 0;
    }

    #single-product .product-header {
        border-radius: 0;
    }

    #single-product .layer {
        border-radius: 0;
    }

    #single-product .product-header p {
        font-size: 12px;
    }

    .article-img img {
        min-height: auto;
    }
    .article-body h3 {
        font-size: 11px;
    }
    .article-category {
         position: relative;
         margin-bottom: 0;
         right: 0;
         transform: none;
    }
}

@media only screen and (max-width: 525px) {
    #about-section .left-side img {
        height: 100%;
        margin: 0;
    }

    #single-product .product-info .box img {
        width: 30px;
        height: 30px;
    }

    #single-product .product-info .box {
        z-index: 99;
        box-shadow: 0 0 15px 0 rgba(19, 25, 35, 0.08);
        width: 100px;
        height: 100px;
        display: unset;
        border-radius: 15px;
        background-color: #fefefe;
        font-size: 14px;
        text-align: center;
    }

    #single-product .box span {
        display: block;
        font-size: 11px !important;
    }

    #about-section .sub-image {
        display: none;
    }

    #about-section .lines,
    #about-section .circles {
        padding: 0 !important;
    }

    #about-page .bg-white {
        padding: 2em !important;
    }

    /* contact-page */
    #contact-page .top-section .left-side .contain {
        padding: 0 1em;
    }

    /* single-article */
    .authentication-box .auth-info {
        padding: 1em;
    }
}

@media only screen and (max-width: 425px) {
    #main-footer .left-side .contact-us .title h3 {
        font-size: 18px;
    }

    .comment-write form {
        padding: 1em;
    }

    .user-panel .left-side .ticket-title {
        flex-wrap: wrap;
        margin: 0 auto;
        display: block !important;
        text-align: center;
    }

    .user-panel .left-side .ticket-content {
        margin-right: 0;
    }

    .comment-read .comment-box::before {
        display: none;
    }

    .comment-read .comment-box-parent {
        border: none;
        padding: 0;
    }

    .comment-read .comment-box.children {
        margin-right: 0;
    }

    .comment-read .comment-box .user-info .text {
        margin-right: 0;
    }

    #meeting-page .top-section .bg-white {
        padding: 2em;
    }

    #main-footer .left-side .contact-us .title p {
        font-size: 14px;
    }

    #main-footer .left-side .contact-us .title {
        padding-bottom: 2em !important;
    }

    #main-footer .left-side .location {
        padding-bottom: 2em;
    }

    #main-footer .left-side .location,
    #main-footer .left-side .phone {
        text-align: center;
        flex-wrap: wrap;
        margin: 0 auto;
        flex-direction: column;
    }

    #main-footer .enamad .d-flex {
        align-items: center !important;
    }

    #main-footer .enamad {
        text-align: center !important;
    }

    #about-page .about-body {
        padding: 1em !important;
    }

    /* contact-page */
    #contact-page .top-section .left-side p {
        font-size: 13px;
    }

    #contact-page .contact-image img {
        height: 250px !important;
    }

    #single-article .content-wrapper {
        margin-top: 1em;
    }

    #success-payment .unsuccess-payment .payment-header {
        font-size: 14px;
    }

    #success-payment .payment .item {
        font-size: 11px;
    }
}

@media only screen and (max-width: 321px) {
    #main-footer .left-side .location i {
        margin: 5px auto !important;
    }

    #product-header img {
        height: 200px !important;
    }

    #product-header .img-box::after {
        height: 200px;
    }
}

.expanded {
    transform: translateX(0) !important;
}

table tbody tr:first-child {
    border-radius: 25px 25px 0 0;
}

table tbody tr:last-child {
    border-radius: 0 0 25px 25px;
}

.table-success {
    --bs-table-bg: #e6fff4;
    --bs-table-striped-bg: #c7dbd2;
    --bs-table-striped-color: #000;
    --bs-table-active-bg: #bcd0c7;
    --bs-table-active-color: #000;
    --bs-table-hover-bg: #c1d6cc;
    --bs-table-hover-color: #000;
    color: #000;
    border-color: #bcd0c7;
}

.table-danger {
    --bs-table-bg: #ffdadd !important;
}

/* login */

#login-page {
    background: linear-gradient(to right, var(--primary) 50%, #fff 50%) !important;
    position: relative;
    height: 100vh;
}

#login-page .bg-white {
    width: 100%;
    max-width: 400px;
    position: absolute;
    top: 50%;
    right: 50%;
    height: auto;
    border-radius: 20px;
    box-shadow: 3px 3px 15px 0 rgba(0, 0, 0, 0.08);
    transform: translate(50%, -50%);
    padding: 2em;
}

#login-page .bg-white h2 {
    text-align: center;
    font-size: 24px;
    margin-bottom: 1em;
}

#login-page .bg-white form .form-group {
    margin-bottom: 1.75em;
}

#login-page .bg-white form .form-group label {
    margin-bottom: .75em;
    color: #131923;
}

#login-page .bg-white form input {
    padding: 1em;
    font-size: 13px;
    background-color: #fbfbfb;
    box-shadow: 3px 3px 8px 0 rgba(0, 0, 0, 0.08) !important;
    border-radius: 8px;
}

#login-page .bg-white form button {
    margin: 0 auto 0 0;
    text-align: left;
    display: flex;
}