:root {
    --color1: #8F4D14;
    --color2: #F48323;
    --white: #ffffff;
    --black: #3C3D3E;
    --danger: #d53343;
    --gray: #F3F3F3;
    --gray2: #777777;
    --grayBox: #F8F8F8;
    --minimal: #F1F5F9;
    --minimal2: #9FA3BF;
    --border: #E2E2E2;
    --SemiBold: PelakSemiBold;
    --Medium: PelakMedium;
    --Regular: PelakRegular;
    --heading_h1_fontsize: 26px;
}
@media only screen and (max-width: 768px) {
    :root {
        --heading_h1_fontsize: 22px;
    }
}
@font-face {
    font-family: 'PelakSemiBold';
    font-style: normal;
    font-weight: normal;
    font-display: fallback;
    src: url('../fonts/Pelak-SemiBold.woff2') format('woff2');
    src: url('../fonts/Pelak-SemiBold.woff2') format('woff2'), url('../fonts/Pelak-SemiBold.woff2') format('truetype');
}
@font-face {
    font-family: 'PelakMedium';
    font-style: normal;
    font-weight: normal;
    font-display: fallback;
    src: url('../fonts/Pelak-Medium.woff2') format('woff2');
    src: url('../fonts/Pelak-Medium.woff2') format('woff2'), url('../fonts/Pelak-Medium.woff2') format('truetype');
}
@font-face {
    font-family: 'PelakRegular';
    font-style: normal;
    font-weight: normal;
    font-display: fallback;
    src: url('../fonts/Pelak-Regular.woff2') format('woff2');
    src: url('../fonts/Pelak-Regular.woff2') format('woff2'), url('../fonts/Pelak-Regular.woff2') format('truetype');
}
@font-face {
    font-family: 'icomoon';
    src: url('../fonts/icomoon.eot?myndct');
    src: url('../fonts/icomoon.eot?myndct#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?myndct') format('truetype'),
    url('../fonts/icomoon.woff?myndct') format('woff'),
    url('../fonts/icomoon.svg?myndct#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}
[class^="icon-"],
[class*=" icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'icomoon' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.icon-related-usage:before {
    content: "\e93f";
}
.icon-product-related:before {
    content: "\e940";
}
.icon-filter:before {
    content: "\e941";
}
.icon-description:before {
    content: "\e93e";
}
.icon-setting:before {
    content: "\e93d";
}
.icon-icon-8:before {
    content: "\e934";
}
.icon-icon-7:before {
    content: "\e935";
}
.icon-icon-6:before {
    content: "\e936";
}
.icon-icon-5:before {
    content: "\e937";
}
.icon-icon-4:before {
    content: "\e938";
}
.icon-icon-3:before {
    content: "\e939";
}
.icon-icon-2:before {
    content: "\e93a";
}
.icon-icon-1:before {
    content: "\e93b";
}
.icon-note:before {
    content: "\e93c";
}
.icon-star:before {
    content: "\e933";
}
.icon-warranty:before {
    content: "\e92f";
}
.icon-check-border:before {
    content: "\e931";
}
.icon-error-full:before {
    content: "\e932";
}
.icon-check-full:before {
    content: "\e930";
}
.icon-check:before {
    content: "\e920";
}
.icon-posts:before {
    content: "\e92d";
}
.icon-heart:before {
    content: "\e92b";
}
.icon-refresh:before {
    content: "\e92c";
}
.icon-zoom:before {
    content: "\e92a";
}
.icon-play-cta:before {
    content: "\e927";
}
.icon-minus1:before {
    content: "\e92e";
}
.icon-plus1:before {
    content: "\e922";
}
.icon-calendar:before {
    content: "\e919";
}
.icon-tag:before {
    content: "\e929";
}
.icon-comment:before {
    content: "\e928";
}
.icon-copy:before {
    content: "\e926";
}
.icon-faq:before {
    content: "\e924";
}
.icon-product:before {
    content: "\e923";
}
.icon-error:before {
    content: "\e914";
}
.icon-share:before {
    content: "\e925";
}
.icon-linkedin:before {
    content: "\e916";
}
.icon-reply:before {
    content: "\e91a";
}
.icon-user:before {
    content: "\e91f";
}
.icon-whatsapp:before {
    content: "\e917";
}
.icon-telegram:before {
    content: "\e918";
}
.icon-blockquote:before {
    content: "\e915";
}
.icon-list:before {
    content: "\e91b";
}
.icon-eye:before {
    content: "\e91c";
}
.icon-click:before {
    content: "\e91d";
}
.icon-key:before {
    content: "\e91e";
}
.icon-shape-footer:before {
    content: "\e913";
}
.icon-menu:before {
    content: "\e912";
}
.icon-play:before {
    content: "\e90b";
}
.icon-btn:before {
    content: "\e90d";
}
.icon-instagram:before {
    content: "\e902";
}
.icon-youtube:before {
    content: "\e903";
}
.icon-facebook:before {
    content: "\e904";
}
.icon-x:before {
    content: "\e905";
}
.icon-print:before {
    content: "\e906";
}
.icon-email:before {
    content: "\e907";
}
.icon-location:before {
    content: "\e908";
}
.icon-right:before {
    content: "\e909";
}
.icon-left:before {
    content: "\e90a";
}
.icon-clock:before {
    content: "\e921";
}
.icon-notes:before {
    content: "\e90c";
}
.icon-plus:before {
    content: "\e910";
}
.icon-minus:before {
    content: "\e911";
}
.icon-category:before {
    content: "\e90e";
}
.icon-call:before {
    content: "\e90f";
}
.icon-search:before {
    content: "\e900";
}
.icon-close:before {
    content: "\e901";
}
/** Main **/
html,
html *,
::before,
::after {
    box-sizing: border-box;
    scroll-behavior: smooth;
}
::-moz-selection {
    /* Code for Firefox */
    color: #fff;
    background: var(--color1);
}
::selection {
    color: #fff;
    background: var(--color1);
}
.text-center {
    text-align: center;
}
img {
    max-width: 100%;
    height: auto;
    user-select: none;
}
strong {
    font-family: var(--SemiBold);
}
video {
    width: 100%;
    border-radius: 8px;
}
a {
    transition: 0.4s ease;
    color: var(--black);
    text-decoration: none;
    &:hover {
        color: var(--color2);
    }
}
.h-100 {
    height: 100%;
}
.w-100 {
    width: 100%;
}
body {
    direction: rtl;
    text-align: right;
    font-family: var(--Regular), Arial !important;
    font-size: 14px;
    color: var(--black);
    line-height: 1.9;
}
.position-relative {
    position: relative;
}
.s-space {
    margin-block: clamp(64px, 7vw, 104px);
}
.s-space:nth-child(1) {
    margin-top: 0;
}
.s-space:nth-last-child(1) {
    margin-bottom: 0;
}
.s-padding {
    padding-top: clamp(32px, 3vw, 40px);
    padding-bottom: clamp(44px, 5vw, 72px);
}
.s-gradient-top {
    background: linear-gradient(180deg, #F1F5F9, transparent);
    padding-top: clamp(48px, 7vw, 104px);
}
.s-gradient-bottom {
    background: linear-gradient(0deg, #F1F5F9, transparent);
    padding-bottom: clamp(48px, 7vw, 104px);
}
.title-box {
    margin: 0 auto clamp(40px, 5vw, 56px);
    width: 100%;
    max-width: 750px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
}
.s-title {
    font-size: clamp(20px, 3vw, 32px);
    font-family: var(--SemiBold);
}
.s-desc {
    font-size: clamp(14px, 2vw, 16px);
    color: #707070;
}
.c-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin: 24px auto 0;
}
.btns {
    display: flex;
    align-items: center;
    position: relative;
    transition: 0.4s;
    min-width: 140px;
    justify-content: center;
    border-radius: 80px;
    gap: 8px;
    color: var(--black);
    font-family: var(--SemiBold);
    padding: 10px 24px 10px 0;
    &:hover {
        color: var(--color2);
    }
    .icon-reply {
        font-size: 9px;
        line-height: 1;
    }
}
.btn-1 {
    position: relative;
    padding: 18px 24px 18px 0;
    &:before {
        content: "\e90d";
        font-family: 'icomoon';
        position: absolute;
        font-size: 64px;
        line-height: 1;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        color: var(--color2);
    }
}
.btn-3 {
    color: var(--color1);
    padding: 10px 24px;
    cursor: pointer;
    transition: 0.4s;
    background: #F4832329;
    border: 2px solid #F4832333;
    &:hover {
        background: var(--color1);
        color: var(--white);
    }
}
.site-main {
    position: relative;
    padding-top: 40px;
    min-height: 100vh;
}
.abs-link {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 0;
}
.item-banner img {
    width: 100%;
    transition: 0.4s;
    border-radius: 16px;
}
.item-banner:hover img {
    transform: translateY(-10px);
    /*filter: drop-shadow(0px 8px 8px #00000030);*/
}
.tab-content {
    display: none;
    transform: scale(0.8) translateY(20px);
    animation: fadeEffect 0.5s ease-in-out;
}
.tab-content.active {
    display: block !important;
    animation: fadeEffect 3s ease-in-out;
    transform: scale(1) translateY(0);
}
@media only screen and (max-width: 768px) {
    .sw-pb {
        padding-bottom: 58px;
    }
}
@-webkit-keyframes fadeEffect {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes fadeEffect {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
.sidebar {
    position: sticky;
    top: 16px;
}
.sidebar-banner {
    display: flex;
    border-radius: 16px;
    overflow: hidden;
    transition: 0.4s;
    margin-top: 20px;
    margin-inline: auto;
    width: 100%;
    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    &:hover {
        transform: translateY(-10px);
    }
}
/**  socials  **/
.socials {
    display: flex;
    gap: clamp(10px, 2vw, 14px);
    justify-content: flex-start;
    flex-direction: row-reverse;
    & a {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        background: white;
        border-radius: 50%;
        color: var(--black);
        transition: 0.4s;
        &:hover {
            background: var(--color2);
            color: white;
        }
    }
}
/** Intro Page **/
.sec-intro {
    position: relative;
    .row {
        position: relative;
        margin-inline: auto;
        /*padding: 42px 24px 24px;*/
        padding: clamp(24px, 2vw, 42px) clamp(0px, 2vw, 24px) clamp(24px, 2vw, 42px);
        min-height: 250px;
        &:after {
            content: "";
            background: #FDC301;
            border-radius: clamp(36px, 5vw, 80px);
            padding: 24px;
            width: 100%;
            height: 100%;
            position: absolute;
            right: 0;
            bottom: 0;
            z-index: -1;
        }
        &:before {
            content: "";
            background-image: url(../img/pattern-intro.svg);
            background-repeat: no-repeat;
            background-size: cover;
            width: clamp(150px, 25vw, 400px);
            height: 100%;
            right: 0;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-position: left;
        }
    }
    .intro-body {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        position: relative;
        z-index: 1;
        .intro-title {
            font-size: clamp(24px, 2vw, 40px);
            font-family: var(--SemiBold);
            color: var(--black);
            margin-bottom: 16px;
        }
        .intro-desc,
        .intro-desc p {
            font-size: 15px;
            font-family: var(--SemiBold);
            color: var(--black);
            line-height: 32px;
        }
    }
    .intro-img {
        margin-top: 32px;
        display: flex;
        justify-content: center;
        position: relative;
    }
    .btn-3 {
        color: var(--color2);
        background: var(--white);
        border: 2px solid #F4832333;
        &:hover {
            background: var(--color2);
            color: var(--white);
        }
    }
}
@media only screen and (min-width: 992px) {
    .sec-intro {
        .row {
            width: 100%;
            padding: 0;
            &:after {
                height: calc(100% - 52px);
            }
        }
        .intro-body {
            align-items: flex-start;
            text-align: right;
            padding-right: clamp(40px, 7vw, 110px);
            margin: 100px 0 80px;
        }
        .intro-img {
            margin: 0;
            img {
                position: relative;
            }
            &:before {
                content: "";
                clip-path: polygon(20.9% 100.0%, 71.1% 100.0%, 81.3% 99.7%, 89.2% 98.5%, 94.9% 95.8%, 98.4% 91.1%, 100.0% 84.1%, 99.3% 76.0%, 96.3% 66.4%, 91.2% 54.9%, 84.2% 40.8%, 69.4% 11.9%, 67.7% 8.8%, 66.3% 6.2%, 65.1% 4.2%, 64.0% 2.7%, 62.9% 1.6%, 61.7% 0.8%, 60.3% 0.3%, 58.7% 0.1%, 56.8% 0.0%, 54.4% 0.0%, 18.1% 0.0%, 13.3% 0.2%, 9.4% 0.7%, 6.4% 2.0%, 4.0% 4.2%, 2.2% 7.7%, 1.0% 12.2%, 0.4% 17.9%, 0.1% 25.2%, 0.0% 34.4%, 0.0% 60.3%, 0.0% 70.5%, 0.2% 78.6%, 0.7% 85.1%, 1.6% 90.2%, 3.1% 94.2%, 5.1% 97.0%, 7.8% 98.7%, 11.2% 99.6%, 15.6% 100.0%, 20.9% 100.0%);
                width: 125%;
                height: 100%;
                position: absolute;
                left: -17px;
                /*background: linear-gradient(180deg, rgb(253 195 1 / 42%), #FDC301);*/
                /* background: linear-gradient(180deg,  #FDC301 0%,  #fff0 50%,  #fff0 100%); */
                z-index: 0;
                backdrop-filter: blur(80px);
                background: #FDC3010D;
            }
        }
    }
}
.page-sec-intro--centered .row {
    justify-content: center;
}
/* Keep intro content centered when its optional image is not available. */
.sec-intro .row:has(.intro-img):not(:has(.intro-img img)) {
    justify-content: center;
}
.sec-intro .row:has(.intro-img):not(:has(.intro-img img)) > .d-flex {
    flex: 0 0 100%;
    max-width: 100%;
}
.sec-intro .row:has(.intro-img):not(:has(.intro-img img)) .intro-body {
    align-items: center;
    width: min(100%, 760px);
    margin-inline: auto;
    padding-right: 0;
    text-align: center;
}
.sec-intro .row:has(.intro-img):not(:has(.intro-img img)) > div:has(> .intro-img) {
    display: none;
}
.page-sec-intro--centered .intro-body {
    align-items: center;
    text-align: center;
    width: 100%;
}
@media only screen and (min-width: 992px) {
    .page-sec-intro--centered .intro-body {
        padding-right: 0;
    }
}
.min-500 {
    min-height: 530px;
}
.intro-page {
    position: relative;
    .row {
        position: relative;
        background: linear-gradient(0deg, #FDC301, #FDC301),
        linear-gradient(93.45deg, rgba(244, 131, 35, 0) 19.8%, #F48323 112.05%);
        border-radius: 80px;
        min-height: 352px;
        display: flex;
        align-items: center;
    }
}
.intro-page .btns.btn-2:hover {
    background: var(--color1);
    color: var(--black);
}
.intro-page .btn-2:before,
.intro-page .btn-2:after {
    background-color: var(--black) !important;
}
.intro-page .btn-1 {
    color: var(--black);
    background-color: var(--color1);
}
.intro-page .btns.btn-1:after,
.intro-page .btns.btn-1:before {
    background-color: var(--black) !important;
}
.intro-page .btns.btn-1:hover {
    background: white;
    border-color: var(--color2);
}
.intro-page .sub-title {
    color: var(--gray3);
}
@media only screen and (min-width: 768px) {
    .intro-page .right-side .s-title {
        text-align: right;
    }
    .intro-page .right-side .sub-title {
        text-align: right;
    }
    .intro-page .right-side .c-btn {
        justify-content: flex-start;
    }
    .intro-page .content-img {
        position: absolute;
        left: 0;
        bottom: 0;
    }
}
@media only screen and (max-width: 768px) {
    .intro-page {
        padding-bottom: 0;
        h1:before {
            content: "";
            width: 8px;
            height: 26px;
            display: inline-block;
            background: var(--color1);
            margin-left: 12px;
            border-radius: 2px;
        }
    }
    .content-img {
        margin-top: 1.5rem;
    }
}
/** More Description **/
#more-tax-desc {
    padding: 54px 36px;
    border-radius: 32px;
    position: relative;
    background-image: url("../img/pattern.svg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    > * {
        position: relative;
    }
    .editor-content {
        position: relative;
    }
    &:before {
        content: "";
        width: 100%;
        height: 100%;
        position: absolute;
        right: 0;
        top: 0;
        background: radial-gradient(#f7f1e6 50%, transparent);
        z-index: 0;
    }
    p:nth-last-child(1) {
        margin: 0;
    }
}
/** page-numbers **/
ul.page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 18px;
    font-size: clamp(12px, 2vw, 16px);
    color: black;
    transition: 0.4s;
    margin-top: clamp(20px, 2vw, 28px);
    span, a {
        width: clamp(32px, 3vw, 42px);
        height: clamp(32px, 3vw, 42px);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: 0.4s;
        background: #E7E7E7;
        color: #707070;
        border-radius: 6px;
        padding-top: 3px;
        font-size: 15px;
        font-family: var(--Medium);
        &.current,
        &:hover {
            background: var(--color2);
            color: var(--white);
        }
    }
    .prev.page-numbers,
    .next.page-numbers {
        background: white;
        color: var(--minimal2);
        padding: 0;
        width: clamp(28px, 3vw, 42px);
        height: clamp(28px, 3vw, 42px);
        font-size: clamp(30px, 3vw, 44px);
        transition: 0.4s;
        &:hover {
            color: var(--color2) !important;
        }
    }
}
/** Sidebar **/
.archive--blog {
    margin-top: clamp(24px, 5vw, 90px);
}
.widget-side {
    background: var(--minimal);
    border-radius: 24px;
    padding: clamp(24px, 2vw, 32px) 24px;
    margin-bottom: 24px;
    .widget-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
        h4 {
            font-size: 18px;
            font-family: var(--Medium);
            display: flex;
            align-items: center;
            &:before {
                content: "\e90e";
                font-family: 'icomoon';
                color: var(--color2);
                display: block;
                font-size: 16px;
                margin-left: 8px;
            }
        }
    }
    > ul {
        position: relative;
        padding-top: 26px;
        > li {
            padding-bottom: 20px;
            margin-bottom: 20px;
            border-bottom: 1px solid #70707033;
            position: relative;
            > a {
                font-family: var(--Medium);
                font-size: 14px;
                color: var(--black);
                &:hover {
                    color: var(--color1);
                }
            }
            .children {
                padding: 24px 0 0;
                display: flex;
                flex-direction: column;
                gap: 8px;
                li a {
                    font-family: var(--Regular);
                    font-size: 14px;
                    color: var(--gray2);
                    padding-right: 12px;
                    position: relative;
                    &:hover {
                        color: var(--color2);
                        &:before {
                            background: var(--color2);
                        }
                    }
                    &:before {
                        content: "";
                        width: 8px;
                        height: 8px;
                        background: #E8E8E8;
                        border-radius: 50%;
                        position: absolute;
                        right: 0;
                        top: 50%;
                        transform: translateY(-50%);
                    }
                }
            }
            &:hover,
            &.active {
                > a {
                    color: var(--color2);
                }
            }
        }
        li:nth-last-child(1) {
            padding-bottom: 0;
            margin-bottom: 0;
            border-bottom: 0;
        }
    }
    .current-cat > a {
        color: var(--color2) !important;
    }
}
.caticon {
    position: absolute;
    left: 0;
    top: 4px;
    transition: 0.4s;
    cursor: pointer;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    &:before {
        content: "";
        border: solid;
        border-width: 1px 1px 0px 0;
        display: inline-block;
        padding: 4px;
        transform: rotate(135deg) translateY(50%);
        -webkit-transform: rotate(135deg) translateY(50%);
        transition: 0.4s ease;
        margin-right: 4px;
    }
    &.active:before {
        color: var(--color2) !important;
        transform: rotate(-45deg) translateY(50%);
    }
}
@media only screen and (min-width: 993px) {
    .sidebar-usage > .widget_categories > .widget-title > .caticon {
        display: none;
    }
}
@media only screen and (max-width: 992px) {
    .sidebar-usage > .widget_categories > .widget-title {
        cursor: pointer;
    }
}
@media only screen and (min-width: 768px) {
    .widget-title {
        justify-content: center !important;
        border-bottom: 1px solid #70707033;
        padding-bottom: 24px;
    }
}
/** Posts **/
.category-item {
    display: flex;
    flex-direction: column;
    text-align: center;
    padding-top: 50px;
    .category-img {
        position: relative;
        margin-bottom: clamp(18px, 2vw, 24px);
        content: "";
        width: 100%;
        height: clamp(124px, 11vw, 144px);
        /*background: var(--minimal);*/
        background: linear-gradient(0deg, #B8CBDE 0px, var(--minimal));
        border-radius: clamp(32px, 2vw, 40px);
        &:before {
            /*content: "";*/
            width: 100%;
            height: 64px;
            position: absolute;
            bottom: -32px;
            right: 0;
            border-radius: 100%;
            backdrop-filter: blur(60px);
            background: radial-gradient(#B8CBDE, transparent);
        }
        img {
            width: clamp(84px, 9vw, 112px);
            position: absolute;
            top: -37px;
            right: 50%;
            transform: translateX(50%);
        }
        &:before {
        }
    }
    .category-desc {
        position: relative;
        h4 {
            font-size: clamp(18px, 2vw, 20px);
            font-family: var(--SemiBold);
            line-height: 24px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
        }
        span {
            font-size: clamp(14px, 2vw, 18px);
            font-family: var(--Regular);
            color: #98A1AA;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
        }
    }
}
@media only screen and (min-width: 768px) {
    .category-item {
        padding-top: 58px;
        .category-img {
            img {
                top: -56px;
            }
        }
    }
}
/** Menu Mobile   *************************************/
#mask {
    position: fixed;
    z-index: 3;
    background: rgba(0, 0, 0, 0.4);
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
}
#menumobile {
    position: fixed;
    top: 0;
    bottom: 0;
    right: -300px;
    width: 250px;
    z-index: 99991;
    transition: all 0.5s;
    box-sizing: border-box;
    overflow: hidden;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .3) !important;
    overflow-y: auto;
    background-color: white;
}
#menumobile img {
    /*! filter: brightness(0)invert(1); */
    max-width: 130px;
}
.menu {
    list-style: none;
    padding: 0;
    padding-right: 1rem;
}
#nomenumobile {
    cursor: pointer;
    transition: all 0.5s;
    width: 25px;
    height: 25px;
    text-align: center;
    border-radius: 3px;
    display: inline-flex;
    color: red;
    font-size: 18px;
    align-items: center;
    justify-content: center;
}
.tel-mm a {
    color: #fff;
    padding: 10px 15px;
    display: block;
    text-align: center;
}
.tel-mm a:before {
    content: '';
    width: 6px;
    height: 6px;
    margin-left: 10px;
    display: inline-block;
    border-radius: 100%;
    animation: pulse 2s infinite;
    position: relative;
    top: -1px;
}
.come-menumobile {
    right: 0 !important;
}
.title-mm {
    background: var(--black);
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.title-mm .icon-close {
    font-size: 1rem;
    color: white;
}
.title-mm img {
    user-select: none;
}
.btn-mm {
    padding: 0 20px;
    margin-top: 20px;
}
.btn-mm a {
    display: flex;
}
.title-sub-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
    flex-flow: row-reverse;
}
.title-sub-head strong {
}
.main-mm {
    padding: 20px 12px 0;
    .header-menu li:not(:nth-last-child(1)) {
        padding-bottom: 12px;
        margin-bottom: 12px;
        border-bottom: 1px solid var(--minimal);
    }
}
.main-mm ul li a {
    color: #222 !important;
    display: block;
    padding: 4px 0;
    position: relative;
    width: 80%;
    padding-right: 1.5rem;
}
.main-mm ul li a:hover {
    color: var(--color1);
}
.main-mm ul li a::before {
    content: " ";
    background: var(--gray);
    width: 10px;
    height: 10px;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
}
.main-mm ul li > .sub-menu {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 250px;
    background: white;
    right: -250px;
    transition: 0.3s;
    z-index: 9;
    padding: 20px;
    border-radius: 1rem 0 0 1rem;
    list-style: none;
}
.sub-menu.come-submenu::before {
    content: "";
    height: 70px;
    width: 100%;
    background: #eee;
    position: absolute;
    top: 0;
    right: 0;
}
.childer i {
    display: inline-block;
    font-size: 6px;
    color: #fff;
}
.childer {
    position: absolute;
    left: -3rem;
    cursor: pointer;
    top: 50%;
    width: 25px;
    height: 25px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%);
    background: var(--color2);
}
.come-submenu {
    right: 0 !important;
}
.sub-closer {
    cursor: pointer;
    top: 10px;
    width: 25px;
    height: 25px;
    /*background: var(--color2);*/
    border-radius: 3px;
    overflow: hidden;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sub-closer i {
    cursor: pointer;
    top: -1px;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 3px;
    transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    position: relative;
    left: -1px;
    font-size: 10px;
}
.title-subcome {
    /*color: var(--color2);*/
    font-weight: normal;
    position: relative;
    top: 2px;
}
.fix-btn {
    position: fixed;
    bottom: 0;
    width: 100%;
    right: 0;
    z-index: 2;
    background: white;
    padding: 10px;
    margin: 0;
    gap: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(2px 4px 6px #89898940);
}
.fix-btn .btn-header {
    min-width: 140px;
}
/** Breadcrumbs **/
#breadcrumbs {
    position: absolute;
    top: 75px;
    margin: auto;
    right: 50%;
    transform: translateX(50%);
    width: 100%;
    line-height: 1;
    white-space: nowrap;
    overflow-x: auto;
    z-index: 1;
}
#breadcrumbs a {
    color: white;
    transition: 0.4s;
    position: relative;
}
#breadcrumbs a:hover {
    color: var(--color1);
}
#breadcrumbs span {
    color: var(--color1);
    font-size: clamp(12px, 2vw, 14px);
}
#breadcrumbs .col-12 > span a:hover {
    color: var(--color1);
}
#breadcrumbs .col-12 > span a:before {
    content: "";
    font-family: 'icomoon';
    position: absolute;
    top: calc(50% + 2px);
    transform: translateY(-50%);
    left: -12px;
    font-size: 12px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--gray1);
}
#breadcrumbs .col-12 > span {
    display: flex;
    align-items: center;
    gap: 20px;
}
@media only screen and (min-width: 768px) {
    #breadcrumbs {
        top: 112px;
    }
}
/*!** blogs **!
.post-item .project-status {
    position: absolute;
    bottom: -12px;
    right: 50%;
    transform: translateX(50%);
    background: var(--gray1);
    padding: 2px 8px;
    font-size: 12px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.post-item-hr {
    align-items: center;
    flex-direction: row;
}
.post-item-hr .post-date {
    margin-bottom: 12px;
}
.post-item {
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 2vw, 16px);
    transition: 0.4s;
}
.post-item .post-image {
    position: relative;
    display: flex;
    overflow: hidden;
    z-index: 1;
    border-radius: 8px;
    width: 100%;
}
.post-item .post-image:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    right: 50%;
    background-image: url(../img/logo-post.svg);
    background-repeat: no-repeat;
    background-position: center;
    transform: translate(50%, -50%);
    transition: 0.4s;
    opacity: 0;
}
.post-item:hover .post-image:after {
    opacity: 1;
}
.post-item .post-image:before {
    content: "";
    position: absolute;
    bottom: auto;
    border-radius: 0 0 75% 75% / 0 0 50% 50%;
    background: rgb(252 185 19 / 30%);
    width: 100%;
    left: 0;
    height: 0;
    transition: 0.4s;
    z-index: 0;
    top: 0;
    opacity: 1;
    backdrop-filter: blur(8px);
}
.post-item:hover .post-image:before {
    transition: height 0.4s ease-in-out;
    height: 150%;
}
.post-item .post-image img {
    width: 100%;
    border-radius: 8px;
}
.post-item .post-date {
    background: var(--gray4);
    display: inline-flex;
    border-radius: 4px;
    gap: 4px;
    width: fit-content;
    padding: 2px 8px;
    align-items: center;
    font-size: 14px;
    font-family: 'Rajdhani';
    color: var(--gray1);
    line-height: 1;
}
.post-item .post-date i {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    padding-bottom: 3px;
}
.post-item .post-title a {
    font-size: clamp(16px, 3vw, 18px);
    color: var(--black);
    font-family: var(--Demi);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 1;
}*/
/** About **/
.history-img {
    position: relative;
    margin-bottom: 44px;
}
.history-img .year {
    position: absolute;
    bottom: -22px;
    background: var(--color1);
    min-width: clamp(64px, 10vw, 120px);
    right: 50%;
    transform: translateX(50%);
    min-height: calc(30px, 4vw, 44px);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(18px, 2vw, 24px);
    font-family: var(--en);
}
.history-item .s-title {
    font-size: clamp(14px, 2vw, 18px);
    padding-inline: clamp(4px, 4vw, 24px);
    display: flex;
    margin: 0;
    text-align: center;
    font-family: var(--Medium);
}
/** More Text Description **/
#more-text-desc {
    border: 1px solid #E7E7E7;
    padding: 40px 55px;
    position: relative;
    text-align: center;
}
#more-text-desc p {
    text-align: center;
    margin: 0;
}
#more-text-desc:before {
    content: "\e917";
    font-family: 'icomoon';
    position: absolute;
    top: -40px;
    right: 50%;
    transform: translateX(50%);
    font-size: 50px;
    color: var(--color1);
}
#more-text-desc .s-title {
    font-size: clamp(20px, 2vw, 24px);
    margin-bottom: 2rem;
}
@media only screen and (max-width: 768px) {
    #more-text-desc {
        padding: 44px 16px 24px;
    }
}
/** Comments **/
.comment-form {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 56px;
    gap: 32px;
}
.form-submit,
.comment-form-email,
.comment-form-author {
    width: 100%;
    position: relative;
}
.form-submit {
    display: flex;
    align-items: center;
    justify-content: center;
}
.comment-form-comment {
    display: flex;
    flex-direction: column;
    width: 100%;
    position: relative;
    margin: 32px 0 0;
}
#review_form label,
#comments-single #respond label {
    position: absolute !important;
    top: -12px;
    right: 24px;
    z-index: 1;
    font-size: clamp(14px, 2vw, 16px);
    background: white;
    padding-inline: 10px;
    color: var(--black);
    line-height: 20px;
    margin: 0 !important;
    display: block;
    font-weight: 500;
    font-size: clamp(16px, 2vw, 18px);
    font-family: var(--Medium);
}
textarea::placeholder {
    font-size: 16px !important;
}
.form-submit .btns {
    padding: 14px 8px;
    min-width: 106px;
}
#respond {
    margin-bottom: 64px;
}
.item-comment {
    margin-bottom: clamp(32px, 3vw, 48px);
    position: relative;
    background: var(--minimal);
    border-radius: 40px;
    padding: clamp(24px, 2vw, 32px) clamp(24px, 3vw, 42px);
    &.byadmin {
        background: linear-gradient(90deg, #3C3D3E, #FDC301);
        .time_comment {
            color: white;
            i {
                background: #FFFFFF1A;
            }
        }
        .name_comment {
            color: white;
        }
        .text_comment p {
            color: white;
        }
    }
}
.item-comment p {
    margin-bottom: 24px !important;
    font-size: clamp(14px, 2vw, 16px) !important;
    font-family: var(--Medium);
}
.head-comment {
    font-size: clamp(14px, 2vw, 16px);
    margin-bottom: clamp(16px, 2vw, 32px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    .time_comment {
        color: var(--color2);
        font-size: 14px;
        display: flex;
        align-items: center;
        gap: 6px;
        line-height: 1;
        i {
            width: 24px;
            height: 24px;
            background: #F4832333;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            padding-top: 1px;
        }
    }
}
.comment-awaiting-moderation {
    background: var(--danger);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    margin-bottom: 24px;
    border-radius: 12px;
    font-style: normal !important;
    padding: 12px;
}
.name_comment {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--SemiBold);
    font-size: clamp(14px, 2vw, 16px);
    img {
        max-width: clamp(36px, 3vw, 44px);
    }
    i {
        width: clamp(20px, 2vw, 32px);
        height: clamp(20px, 2vw, 32px);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: clamp(16px, 2vw, 24px);
    }
}
.commentlist > .children {
    padding-right: clamp(42px, 8vw, 104px);
}
.comment-reply-link {
    width: 100%;
    display: flex;
    font-size: 16px;
    gap: 4px;
    font-family: var(--SemiBold);
    color: var(--color2);
    justify-content: flex-end;
    align-items: center;
    transition: 0.4s;
    i {
        font-size: 5px;
    }
}
.item-comment.byadmin .comment-reply-link {
    border-color: var(--color2);
    color: white;
    &:hover {
        color: var(--color2);
    }
}
.isreply {
    position: absolute;
    top: 18px;
    left: calc(100% + clamp(12px, 2vw, 28px));
    width: clamp(40px, 4vw, 52px);
    height: clamp(64px, 6vw, 84px);
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url(../img/reply.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
#reply-title {
    display: none;
}
.commentlist #reply-title {
    background: var(--minimal);
    color: var(--color2);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-radius: 8px;
}
#reply-title a {
    color: var(--color2);
    transition: 0.4s;
}
#reply-title a:hover {
    color: var(--color1);
}
@media only screen and (min-width: 992px) {
    .comment-form-rating,
    .comment-form-email,
    .comment-form-author {
        width: calc(50% - 16px);
    }
}
@media only screen and (max-width: 768px) {
    .commentlist > .children {
        padding-right: 44px;
    }
    .head-comment .time_comment {
        font-size: 12px;
    }
    .item-comment {
        padding: 12px 16px;
        margin-bottom: 1rem;
    }
    .comment-reply-link {
        font-size: 14px;
    }
    .name_comment {
        gap: 6px;
        font-size: 14px;
    }
}
/** Editor Page **/
.section-editor-inner {
    border: 1px solid var(--border);
    border-radius: clamp(14px, -25vw, 32px);
    padding: clamp(20px, 4vw, 52px) clamp(16px, 4vw, 58px);
}
/** Video **/
.video-wrapper {
    position: relative;
    display: flex;
    video {
        height: 100%;
        object-fit: cover;
        border-radius: 20px;
    }
    .play-btn {
        width: clamp(72px, 7vw, 112px);
        height: clamp(72px, 7vw, 112px);
        position: absolute;
        right: 50%;
        top: 50%;
        transform: translate(50%, -50%);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: clamp(22px, 5vw, 34px);
        color: white;
        cursor: pointer;
        &:after,
        &:before {
            content: '';
            box-sizing: border-box;
            width: clamp(72px, 7vw, 112px);
            height: clamp(72px, 7vw, 112px);
            border-radius: 50%;
            background: #D2354A80;
            position: absolute;
            left: 0;
            top: 0;
            animation: animloader 2s linear infinite;
            z-index: -1;
        }
        &:after {
            animation-delay: 1s;
        }
    }
}
@keyframes animloader {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 0;
    }
}
/* Sticky mobile */
.sticky-mobile {
    position: sticky;
    bottom: 8px;
    background: var(--color2);
    width: 304px;
    margin: auto;
    color: white;
    z-index: 2;
    border-radius: 8px;
    display: flex;
    align-items: center;
    min-height: 60px;
    justify-content: space-between;
    padding: 10px 16px;
}
.sticky-mobile .wrap-sticky {
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    row-gap: 8px;
}
.sticky-mobile .wrap-sticky:before {
    content: none;
}
.sticky-mobile .wrap-sticky:before {
    content: none;
}
.sticky-mobile .wrap-sticky span {
    display: block;
    font-size: 12px;
    margin: 0;
    line-height: 1;
}
.sticky-mobile .wrap-sticky i {
    font-size: 1rem;
}
.sticky-mobile .wrap-sticky:hover,
.sticky-mobile .wrap-sticky.active {
    color: var(--color1);
}
/* section Banner Column */
@media only screen and (max-width: 768px) {
    .section-banner_column .col-12:nth-child(2) .item-banner {
        position: fixed;
        z-index: 9;
        right: 16px;
        bottom: 12px;
        width: calc(100% - 32px);
    }
}
/* access-wrapper */
.access-wrapper {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: clamp(24px, 2vw, 32px);
    a {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: clamp(14px, 2vw, 18px);
        width: 100%;
        background: var(--color1);
        color: white;
        border-radius: 16px;
        padding: clamp(12px, 2vw, 24px);
        border: 1px solid #FF6262;
        transition: 0.4s;
        i:not(.icon-left) {
            width: clamp(24px, 3vw, 36px);
            height: clamp(24px, 3vw, 36px);
            font-size: clamp(20px, 2vw, 30px);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .icon-left {
            margin-right: auto;
            font-size: clamp(16px, 2vw, 24px);
        }
        &:hover {
            color: var(--color1);
            background: white;
        }
    }
}
/* Icon Box */
.section-iconbox {
    & .row {
        background: #F8F8F8;
        border-radius: clamp(20px, 2vw, 24px);
        padding: clamp(24px, 4vw, 48px) 28px;
    }
    & .wrap-category {
        background: white;
        border-radius: 20px;
        padding: 16px 0;
        & .swiper-slide {
            padding-block: 12px 6px;
        }
        & .category-banner {
            display: flex;
            flex-direction: column;
            gap: 12px;
            align-items: center;
            & .category-img {
                width: clamp(54px, 6vw, 75px);
                height: clamp(54px, 6vw, 75px);
                display: flex;
                align-items: center;
                justify-content: center;
            }
            & span {
                font-size: clamp(12px, 2vw, 14px);
                font-family: var(--Bold);
                transition: 0.4s;
            }
            &:hover span {
                color: var(--color1);
            }
        }
    }
    & .swiper-navigation {
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }
    & .swiper-pagination {
        margin-top: 20px;
        position: relative;
    }
}
@media only screen and (max-width: 768px) {
    .section-iconbox .row {
        width: calc(100% - 32px);
        margin-inline: auto;
    }
}
/* Cart Blog */
.post-item-blog {
    display: flex;
    gap: clamp(8px, 2vw, 12px);
    align-items: center;
    background: white;
    border-radius: 20px;
    padding: 18px 19px 18px 8px;
    margin-bottom: 12px;
    flex-direction: column;
    padding: 12px;
    background: var(--grayBox);
    & .post-image {
        border-radius: 16px;
        &:after {
            content: "";
            width: 100%;
            height: 100%;
            position: absolute;
            top: 50%;
            right: 50%;
            background-image: url(../../img/logo-post.svg);
            background-repeat: no-repeat;
            background-position: center;
            transform: translate(50%, -50%);
            background-size: 38%;
            transition: 0.4s;
            opacity: 0;
        }
        &:before {
            content: "";
            position: absolute;
            bottom: auto;
            border-radius: 0 0 75% 75% / 0 0 50% 50%;
            background: rgb(211 60 80 / 60%);
            width: 100%;
            left: 0;
            height: 0;
            transition: 0.4s;
            z-index: 0;
            top: 0;
            opacity: 1;
            backdrop-filter: blur(4px);
        }
    }
    & .post-title a {
        position: relative;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        transition: 0.4s;
        font-size: clamp(14px, 2vw, 18px);
        height: clamp(58px, 5vw, 70px);
        margin-bottom: 26px;
    }
    & .post-body {
        width: 100%;
        & .post-meta {
            display: flex;
            justify-content: space-between;
            background: white;
            padding: 16px 19px;
            border-radius: 14px;
            & .post-date {
                display: flex;
                align-items: center;
                gap: 8px;
                background: white;
                padding: 8px;
                border-radius: 8px;
                font-size: 14px;
                color: var(--gray2);
                line-height: 1;
                & i {
                    width: 20px;
                    height: 20px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 15px;
                    color: var(--color1);
                    margin-top: -4px;
                }
            }
            & .read-more {
                display: flex;
                align-items: center;
                gap: 9px;
                font-size: 16px;
                color: var(--gray2);
                & i {
                    width: 24px;
                    height: 24px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 20px;
                }
            }
        }
    }
}
@media only screen and (max-width: 768px) {
    .post-item-blog .read-more {
        color: var(--color1) !important;
    }
}
/* Gallery */
/*.gallery-item {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    a {
        width: 100%;
        height: 100%;
        border-radius: 20px;
        overflow: hidden;
        object-fit: cover;
        &:after {
            content: "\e922";
            font-family: 'icomoon';
            width: 80px;
            height: 80px;
            border-radius: 50%;
            position: absolute;
            bottom: 0;
            right: 50%;
            transform: translate(50%, 50%);
            background: #D2354A99;
            backdrop-filter: blur(4px);
            color: white;
            background-size: 80%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 40px;
            transition: 0.4s;
            opacity: 0;
        }
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
    &:hover a:after {
        bottom: 50%;
        opacity: 1;
    }
}*/
.gallery-item a {
    position: relative;
    margin: auto;
    overflow: hidden;
    height: 163px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 24px;
    &:before {
        content: "\e92a";
        font-family: 'icomoon';
        font-size: 42px;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        right: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        transition: 0.4s;
        opacity: 0;
        background: #00000033;
        backdrop-filter: blur(4px);
    }
    img {
        width: 100% !important;
        height: 100%;
        display: block;
        margin: 0 !important;
        transition: 0.4s;
        object-fit: cover;
    }
    &:hover:before {
        opacity: 1;
    }
}
.section-content_box .sw {
    margin-top: clamp(32px, 6vw, 88px);
}
/* Archive Shop */
.category-wrapper {
    position: relative;
    margin-bottom: clamp(16px, 2vw, 32px);
    .swiper-terms {
        padding: 6px;
        background: var(--minimal);
        border-radius: 80px;
        .swiper-slide a {
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 80px;
            padding: 16px clamp(6px, 2vw, 12px);
            font-size: clamp(12px, 2vw, 14px);
            font-family: var(--SemiBold);
            transition: 0.4s;
            &:hover {
                color: white !important;
                background: var(--color2);
            }
        }
    }
}
.archive--product {
    margin-top: clamp(64px, 9vw, 104px);
}
@media only screen and (min-width: 992px) {
    .category-wrapper {
        padding-inline: 150px;
        .swiper-navigation {
            position: absolute;
            width: calc(100% + 164px);
            justify-content: space-between;
            right: 50%;
            transform: translate(50%, -50%);
            top: 50%;
            margin: 0;
        }
    }
}
.usage-video {
    background: var(--minimal);
    padding: clamp(12px, 2vw, 18px);
    border-radius: 20px;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 32px;
    .video-wrapper {
        flex: unset;
        video {
            border-radius: 40px;
        }
    }
    .video-title {
        font-size: clamp(20px, 2vw, 24px);
        font-family: var(--SemiBold);
        margin-bottom: 24px;
    }
    p {
        line-height: 28px !important;
    }
}
@media only screen and (min-width: 768px) {
    .usage-video {
        flex-direction: row;
        .video-wrapper {
            flex: 0 0 50%;
        }
    }
}
/* single Product */
.product-head {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
    align-items: flex-start;
    .product-head-meta,
    .product-title-row {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
    }
    .product_title {
        font-size: clamp(24px, 3vw, 36px);
        font-family: var(--SemiBold);
        margin: 0;
        flex: 1;
    }
    .single-product-brand-badge {
        width: 98.77px;
        height: 29.76px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 3.2px;
        padding: 5px 12px 8px;
        border: 0.8px solid #D1DBE5;
        border-radius: 32.03px;
        opacity: 1;
        overflow: hidden;
        transition: border-color 0.3s ease;
        &:hover {
            border-color: var(--color2);
        }
        img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
        span {
            color: var(--black);
            font-size: 11px;
            font-family: var(--SemiBold);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }
    .single-product-rating {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        flex-shrink: 0;
        color: #FDC301;
        font-size: 16px;
        line-height: 1;
        font-family: var(--SemiBold);
        i {
            color: #FDC301;
            font-size: clamp(18px, 2vw, 22px);
            line-height: 1;
        }
    }
    .single-product-rating-mobile {
        display: none;
    }
}
@media only screen and (max-width: 767px) {
    .product-head {
        .product-head-meta {
            min-height: 30px;
        }
        .single-product-rating-desktop {
            display: none;
        }
        .single-product-rating-mobile {
            display: inline-flex;
            margin-right: auto;
        }
        .product-title-row {
            display: block;
        }
    }
}
.product_meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid #DFDFDF;
    color: #707070;
    font-size: clamp(14px, 2vw, 16px);
    font-family: var(--Medium);
    .product-meta-item {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 14px;
    }
    i {
        color: var(--color2);
        font-size: clamp(20px, 2vw, 24px);
    }
    .product-meta-label {
        color: #707070;
        white-space: nowrap;
    }
    .product-meta-values {
        display: inline-flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 4px;
    }
    a {
        color: #707070;
        transition: 0.3s ease;
        &:hover {
            color: var(--color2);
        }
    }
    .product-meta-separator {
        color: var(--color2);
        font-size: clamp(22px, 2vw, 28px);
        line-height: 1;
    }
}
@media only screen and (max-width: 768px) {
    .product_meta .product-meta-separator {
        display: none;
    }
}
.price {
    display: flex;
    flex-direction: column;
    position: relative;
    width: max-content;
    del {
        position: relative;
        .woocommerce-Price-amount bdi {
            color: #707070;
            font-size: clamp(14px, 2vw, 22px);
            font-family: var(--SemiBold);
            .woocommerce-Price-currencySymbol {
                font-size: clamp(12px, 1vw, 14px);
            }
        }
    }
    ins {
        position: relative;
        text-decoration: none !important;
        .woocommerce-Price-amount bdi {
            font-family: var(--SemiBold);
            font-size: clamp(18px, 2vw, 32px);
            .woocommerce-Price-currencySymbol {
                font-size: clamp(14px, 1vw, 20px);
            }
        }
    }
    .on-sale {
        position: absolute;
        top: 0;
        left: 0;
        width: clamp(28px, 3vw, 36px);
        height: clamp(28px, 3vw, 36px);
        background: var(--color2);
        border-radius: 50%;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 2px;
        font-size: clamp(12px, 1vw, 14px);
        font-family: var(--SemiBold);
    }
}
.quantity {
    display: flex;
    align-items: center;
    min-width: clamp(140px, 14vw, 210px);
    background: var(--minimal);
    padding: 6px 18px;
    border-radius: 100px;
    gap: 12px;
    .minus,
    .plus {
        border: 0;
        background: no-repeat;
        width: 16px;
        height: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
    }
    input {
        border-radius: 100px;
    }
}
form.cart {
    display: flex;
    gap: clamp(12px, 2vw, 16px);
    align-items: center;
}
.single_add_to_cart_button {
    display: flex;
    width: 100%;
    border: 2px solid #F4832333;
    padding: 12px;
    min-height: clamp(52px, 4vw, 60px);
    align-items: center;
    justify-content: center;
    border-radius: 100px;
    background: #F4832329;
    font-family: var(--SemiBold);
    font-size: 16px;
    transition: 0.4s;
    color: #8F4D14;
    &:hover {
        background: var(--color2);
        color: white;
    }
    &:before {
        content: "\e910";
        font-family: 'icomoon';
        margin-left: 8px;
        width: 32px;
        height: 32px;
        font-size: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
.woocommerce-tabs {
    position: relative;
    .tabs.wc-tabs {
        display: flex;
        align-items: center;
        gap: 16px;
        margin-bottom: clamp(50px, 5vw, 70px);
        background: var(--minimal);
        padding: 6px;
        border-radius: 100px;
        li {
            position: relative;
            a {
                border-radius: 100px;
                font-size: clamp(12px, 5vw, 14px);
                color: #3C3D3E;
                padding: 8px;
                min-height: 58px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-family: var(--SemiBold);
                transition: 0.4s;
                width: max-content;
                &:hover,
                &.active {
                    color: white !important;
                    background: var(--color2);
                }
            }
        }
        .icon-down {
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            &:after {
                content: "";
                border: solid;
                border-width: 1px 1px 0px 0;
                display: inline-block;
                padding: 4px;
                transform: rotate(135deg) translateY(50%);
                -webkit-transform: rotate(135deg) translateY(50%);
                transition: 0.4s ease;
            }
        }
    }
    #tab-description,
    #tab-additional_information {
        border: 1px solid #C1C1C1;
        border-radius: 24px;
        padding: 40px 24px;
    }
    .title-heading {
        font-size: 18px;
        font-family: var(--Medium);
        margin-bottom: 40px;
        display: flex;
        align-items: center;
        gap: 8px;
        i,
        .section-title-icon {
            width: 48px;
            height: 48px;
            background-color: #F1F5F9;
            font-size: 21px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            color: #3C3D3E;
        }
        .section-title-icon img {
            width: 24px;
            height: 24px;
            object-fit: contain;
            margin-bottom: 0;
        }
    }
    .woocommerce-Tabs-panel:not(:nth-last-child(1)) {
        margin-bottom: 32px;
    }
    .woocommerce-product-attributes {
        width: stretch;
        tr {
            display: flex;
            align-items: center;
            gap: 16px;
            width: 100%;
            border-bottom: 1px solid #ECECEC;
            padding-bottom: 14px;
            margin-bottom: 14px;
            th {
                min-width: clamp(120px, 10vw, 150px);
                font-size: 14px;
                font-family: var(--Medium);
                color: #707070;
            }
        }
        tr:nth-last-child(1) {
            padding-bottom: 0;
            margin-bottom: 0;
            border-bottom: 0;
        }
        p {
            margin: 0;
            font-size: 16px;
            color: var(--black);
            font-family: var(--Medium);
        }
    }
}
.product-short-attributes {
    position: relative;
    margin-top: clamp(32px, 3vw, 40px);
    .title-attributes {
        color: #707070;
        font-size: 16px;
        font-family: var(--SemiBold);
        margin-bottom: 24px;
    }
    ul {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        li {
            padding: 8px 16px;
            display: flex;
            flex-direction: column;
            border: 1px solid #E3E3E3;
            border-radius: 16px;
            strong {
                font-family: var(--Medium);
                font-size: clamp(14px, 2vw, 16px);
                color: var(--black);
                width: max-content;
            }
            span {
                font-size: 14px;
                font-family: var(--Medium);
                color: #707070;
            }
        }
    }
    .more-attributes {
        color: var(--color2);
        margin-top: 24px;
        font-size: 14px;
        font-family: var(--SemiBold);
        display: flex;
        align-items: center;
        &:after {
            content: "";
            border: solid;
            border-width: 1px 1px 0px 0;
            display: inline-block;
            padding: 3px;
            transform: rotate(135deg) translateY(50%);
            -webkit-transform: rotate(135deg) translateY(50%);
            transition: 0.4s ease;
            margin-right: 14px;
        }
    }
}
@media only screen and (max-width: 450px) {
    .product-short-attributes ul {
        grid-template-columns: repeat(1, 1fr);
    }
}
@media only screen and (min-width: 992px) {
    .scroll-top {
        width: 56px;
        height: 56px;
        background: white;
        border-radius: 50%;
        margin-right: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: 0.4s;
        cursor: pointer;
        &.active {
            transform: rotateX(180deg);
        }
    }
    .product-short-attributes {
        ul {
            grid-template-columns: repeat(3, 1fr);
        }
    }
}
.woocommerce-message {
    width: max-content;
    background: #F4832329;
    margin: 0 auto 3rem;
    border-radius: 100px;
    padding: 12px;
    color: var(--color1);
    display: flex;
    align-items: center;
    gap: 32px;
    font-family: var(--SemiBold);
    font-size: 16px;
    a {
        border-radius: 100px;
        font-size: clamp(14px, 2vw, 16px);
        color: white !important;
        padding: 12px 16px;
        min-height: 58px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: var(--SemiBold);
        transition: 0.4s;
        background: var(--color2);
        &:hover {
            background: var(--color1);
        }
    }
}
.wc-tabs-wrap {
    position: sticky;
    top: 40px;
    z-index: 3;
    transition: 0.4s ease;
    display: none;
}
.comment-notes {
    display: none !important;
}
#review_form .comment-form-rating,
#comments-single #respond .comment-form-rating {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: auto;
    label {
        position: relative !important;
        padding: 0;
        right: auto;
        top: auto;
        .required {
            display: none;
        }
    }
}
p.woocommerce-noreviews {
    text-align: center;
    margin-top: 100px;
    background: #F4832329;
    padding: 12px;
    border-radius: 12px;
    font-style: italic;
}
.woocommerce p.stars a {
    position: relative;
    height: 24px;
    width: 24px;
    text-indent: -999em;
    display: inline-block;
    text-decoration: none;
    margin-right: 1px;
    color: var(--gray2);
    font-size: 21px;
    display: flex;
    align-items: center;
    justify-content: center;
    &:before {
        font-family: 'icomoon';
        text-indent: 0;
        content: "\e933";
        transition: all 0.3s;
        position: absolute;
        top: 50%;
        right: 50%;
        transform: translate(50%, -50%);
    }
}
.woocommerce .stars span {
    display: flex;
    gap: 4px;
}
#tab-reviews .form-submit {
    float: left;
    flex: unset;
}
.stars {
    margin: 0 !important;
}
#comments-single .item-comment #respond p.stars {
    margin: 0 !important;
    font-size: inherit !important;
    font-family: inherit;
}
#comments-single .item-comment #respond .comment-form p {
    margin-bottom: 0 !important;
    font-size: inherit !important;
    font-family: inherit;
}
.woocommerce p.stars a:hover ~ a::before {
    /*content: "";*/
    color: var(--gray2);
}
.woocommerce p.stars:hover a::before {
    color: #FDC301;
}
.woocommerce p.stars.selected a.active::before {
    color: #FDC301;
}
.woocommerce p.stars.selected a.active ~ a::before {
    /*content: ""*/;
    color: var(--gray2);
}
.woocommerce p.stars.selected a:not(.active)::before {
    color: #FDC301;
}
.mobile-sticky-addcard {
    position: fixed;
    bottom: 0;
    z-index: 1;
    background: white;
    box-shadow: 0px 0px 42px 0px #00000029;
    padding: 24px;
}
@media only screen and (min-width: 992px) {
    .woocommerce-tabs .wc-tabs-wrap {
        display: block;
    }
    .form-submit {
        width: calc(50% - 16px);
        justify-content: flex-end;
    }
}
/* Gallery */
.websima-product-gallery-wrapper {
    z-index: 1;
    position: relative;
    .share-single {
        width: clamp(40px, 4vw, 54px);
        background: white;
        height: clamp(40px, 4vw, 54px);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: 0.4s;
        position: absolute;
        top: 24px;
        right: 24px;
        cursor: pointer;
        z-index: 2;
        i {
            color: var(--color2);
            transition: 0.4s;
            font-size: clamp(20px, 2vw, 26px);
        }
        &:hover {
            background: var(--color2);
            i {
                color: white;
            }
        }
    }
    .product-attrs.single-attrs a {
        width: clamp(40px, 4vw, 54px);
        background: white;
        height: clamp(40px, 4vw, 54px);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: 0.4s;
        position: absolute;
        top: 24px;
        right: clamp(72px, 6vw, 86px);
        cursor: pointer;
        z-index: 1;
        i {
            color: var(--color2);
            transition: 0.4s;
            font-size: clamp(20px, 2vw, 26px);
        }
        &:hover {
            background: var(--color2);
            i {
                color: white;
            }
        }
    }
    .wishlist-link.wishlist-item {
        width: clamp(40px, 4vw, 54px);
        background: white;
        height: clamp(40px, 4vw, 54px);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: 0.4s;
        position: absolute;
        top: 24px;
        right: clamp(120px, 10vw, 148px);
        cursor: pointer;
        z-index: 1;
        i {
            color: var(--color2);
            transition: 0.4s;
            font-size: clamp(20px, 2vw, 26px);
        }
        &.wished,
        &:hover {
            background: var(--color2);
            i {
                color: white;
            }
        }
    }
    .swiper-slide {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
.websima-product-gallery-wrapper.is-gallery-loading .websima-product-gallery {
    width: 100%;
    min-height: clamp(520px, 47vw, 720px);
    display: flex;
    flex-direction: column;
    gap: 0;
}
.websima-product-gallery-wrapper.is-gallery-loading .websima-product-gallery::before,
.websima-product-gallery-wrapper.is-gallery-loading .websima-product-gallery::after {
    content: "";
    display: block;
    background: linear-gradient(90deg, #f3f5f7 0%, #e8edf2 40%, #f3f5f7 80%);
    background-size: 240% 100%;
    animation: productGallerySkeleton 1.35s ease-in-out infinite;
}
.websima-product-gallery-wrapper.is-gallery-loading .websima-product-gallery::before {
    width: 100%;
    aspect-ratio: 1 / 1;
    min-height: 420px;
    border-radius: 20px;
}
.websima-product-gallery-wrapper.is-gallery-loading .websima-product-gallery::after {
    width: calc(100% - 24px);
    height: 112px;
    margin: -32px auto 0;
    border: 4px solid white;
    border-radius: 24px;
}
.websima-product-gallery-wrapper.is-gallery-loading .loading-wrapper {
    display: none;
}
@keyframes productGallerySkeleton {
    0% {
        background-position: 100% 0;
    }
    100% {
        background-position: -100% 0;
    }
}
.wishlist-item.loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 22px;
    height: 22px;
    border: 2px solid var(--color1);
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    transform: translate(-50%, -50%);
    background: var(--gray2);
    padding: 4px;
}
.wishlist-item.wished.loading:after {
    background: var(--color1);
    border-color: white;
    border-top-color: transparent;
}
@keyframes spin {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}
.gallery-top-wrapper {
    background: var(--minimal);
    border-radius: clamp(32px, 2vw, 48px);
    position: relative;
}
.swiper-thumbnail {
    margin-top: -32px;
    width: calc(100% - 24px);
    .item-thumbnail {
    }
}
.gallery-top {
    overflow: hidden;
    position: relative;
    transition: 0.4s ease;
}
.websima-product-gallery .for-lightgallery img,
.gallery-top .swiper-slide img {
    width: 100%;
    border-radius: clamp(32px, 2vw, 48px);
}
.gallery-bottom {
    .product-thumb-item {
        background: var(--minimal);
        border-radius: 24px;
        border: 4px solid white;
        position: relative;
        overflow: hidden;
        transition: 0.4s;
        aspect-ratio: 1/1;
        display: flex;
        align-items: center;
        justify-content: center;
        img {
            transition: 0.4s ease;
        }
        &:after {
            content: "\e92a";
            font-family: 'icomoon';
            background: #FDC3011A;
            width: 100%;
            height: 100%;
            position: absolute;
            right: 0;
            top: 0;
            font-size: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            backdrop-filter: blur(4px);
            color: #FDC301;
            opacity: 0;
            transition: 0.4s;
        }
    }
}
.gallery-bottom .swiper-slide.swiper-slide-thumb-active .product-thumb-item:before,
.gallery-bottom .swiper-slide.swiper-slide-thumb-active .product-thumb-item:after,
.gallery-bottom .swiper-slide .product-thumb-item:hover:before,
.gallery-bottom .swiper-slide .product-thumb-item:hover:after {
    opacity: 1;
    visibility: visible;
}
.swiper-pagination.product-pagination {
    bottom: 0 !important;
    margin: 20px 0 0 !important;
}
.websima-swiper-thumb {
    position: relative;
    margin-top: -75px;
    & .swiper-button-next,
    & .swiper-button-prev {
        width: 40px;
        height: 40px;
        background: var(--nature2);
        color: var(--black);
    }
    & .swiper-navigation.product-navigation {
        gap: 12px;
    }
}
@media only screen and (max-width: 992px) {
    .websima-product-gallery-wrapper {
        margin-bottom: 32px;
    }
    .product_meta {
        border-bottom: none;
    }
}
.woocommerce-product-details__short-description.editor-content ul,
.woocommerce-product-details__short-description.editor-content ul li,
.woocommerce-product-details__short-description.editor-content p {
    margin: 0;
}
.sidebar-shop {
    background: var(--minimal);
    border-radius: 24px;
    padding: clamp(24px, 2vw, 32px) 24px;
    margin-bottom: 20px;
    .caticon:before {
        color: #3C3D3E;
        content: "";
        border: solid;
        border-width: 2px 2px 0px 0;
        display: inline-block;
        padding: 4px;
        transform: rotate(135deg) translateY(50%);
        -webkit-transform: rotate(135deg) translateY(50%);
        transition: 0.4s ease;
        margin-right: 4px;
    }
    .caticon.active:before {
        transform: rotate(-45deg) translateY(50%);
    }
    .widget-side {
        background: none;
        border-radius: 0;
        padding: 0;
    }
    .title-side {
        display: flex;
        font-size: clamp(16px, 2vw, 20px);
        font-family: var(--Medium);
        display: flex;
        align-items: center;
        gap: 8px;
        i {
            color: var(--color2);
            display: block;
            font-size: 18px;
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .filter-title-icon {
            width: 24px;
            height: 24px;
            display: block;
            object-fit: contain;
            flex: 0 0 24px;
        }
    }
    & .widget-title {
        font-family: var(--Medium);
        width: 100%;
        display: flex;
        justify-content: flex-start !important;
        padding: 0;
        background: none;
        font-size: 14px;
        gap: 8px;
        line-height: 24px;
        cursor: pointer;
        transition: 0.4s ease;
        margin-block: 24px;
        padding-top: 24px;
        border: 0;
        border-top: 1px solid #D9D9D9;
        border-radius: 0;
        .caticon {
            position: absolute;
            left: 0;
            top: 25px;
            transition: 0.4s;
            cursor: pointer;
        }
        h4 {
            font-size: 15px;
            color: #0D0D0D;
            &:before {
                content: none;
            }
        }
    }
    ul {
        padding: 0;
        > li {
            padding-bottom: 0;
            margin-bottom: 24px;
            border-bottom: 0px;
            position: relative;
            a {
                color: var(--black);
                transition: 0.4s ease;
                display: flex;
                align-items: center;
            }
        }
    }
    &.open {
        max-height: max-content;
        padding-block: 24px;
        border-width: 1px;
    }
    .woocommerce-widget-layered-nav-list__item,
    .shop-filter-list-item {
        margin-bottom: 12px;
        display: block;
        a {
            background: #E8EDF3;
            padding: 9px 16px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            width: 100%;
            &:before {
                content: ' ';
                width: 20px !important;
                height: 20px !important;
                background: white !important;
                margin: 1px 0 0 8px !important;
                display: inline-block;
                border-radius: 4px;
                transition: 0.4s ease;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 10px;
                padding-top: 2px;
            }
        }
        .count {
            color: #707070;
            font-size: 12px;
            font-family: var(--Medium);
            text-align: left;
            direction: ltr;
            margin-right: auto;
        }
    }
    li.woocommerce-widget-layered-nav-list__item a:hover:before,
    li.woocommerce-widget-layered-nav-list__item.chosen a:before,
    li.shop-filter-list-item a:hover:before,
    li.shop-filter-list-item.chosen a:before,
    li.shop-filter-list-item.current-cat a:before,
    li.shop-filter-list-item.current-cat-parent a:before {
        background: var(--color2) !important;
        transition: 0.4s ease;
        content: "\e920";
        font-family: 'icomoon';
        color: white;
    }
    li.woocommerce-widget-layered-nav-list__item a:hover:after,
    li.woocommerce-widget-layered-nav-list__item.chosen a:after,
    li.shop-filter-list-item a:hover:after,
    li.shop-filter-list-item.chosen a:after,
    li.shop-filter-list-item.current-cat a:after,
    li.shop-filter-list-item.current-cat-parent a:after {
        opacity: 1 !important;
        visibility: visible !important;
        transition: 0.4s ease;
    }
    .widget_layered_nav_filters .chosen a:before {
        width: 16px !important;
        height: 16px !important;
        margin-left: 8px !important;
        border: 1px solid var(--danger) !important;
        border-radius: 4px;
        color: #fff !important;
        content: "\e901";
        font-family: 'icomoon';
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 9px;
        transition: 0.4s;
        background: var(--danger);
    }
    .widget_layered_nav {
        .widget-title.is-collapsible-filter {
            position: relative;
            padding-left: 32px;
            .filter-toggle-icon {
                position: absolute;
                left: 0;
                top: 25px;
                width: 16px;
                height: 16px;
                cursor: pointer;
                transition: 0.4s ease;
                &:before {
                    content: "";
                    color: #3C3D3E;
                    border: solid;
                    border-width: 2px 2px 0 0;
                    display: inline-block;
                    padding: 4px;
                    transform: rotate(135deg) translateY(50%);
                    transition: 0.4s ease;
                    margin-right: 4px;
                }
                &.active:before {
                    transform: rotate(-45deg) translateY(50%);
                }
            }
        }
        .layered-nav-scroll {
            max-height: 215px;
            overflow-y: auto;
            padding-left: 4px;
            scrollbar-width: thin;
            scrollbar-color: #AEBBCC #EEF3F8;
        }
        .layered-nav-scroll::-webkit-scrollbar {
            width: 4px;
        }
        .layered-nav-scroll::-webkit-scrollbar-track {
            background: #EEF3F8;
            border-radius: 10px;
        }
        .layered-nav-scroll::-webkit-scrollbar-thumb {
            background: #AEBBCC;
            border-radius: 10px;
            border: 0;
        }
        .layered-nav-scroll::-webkit-scrollbar-button {
            width: 0;
            height: 0;
            display: none;
        }
    }
}
.title-side-mobile {
    font-size: clamp(16px, 2vw, 20px);
    font-family: var(--Medium);
    display: flex;
    align-items: center;
    gap: 8px;
    background: #F1F5F9;
    padding: 21px 24px;
    margin-bottom: 32px;
    border-radius: 24px;
    position: relative;
    i {
        color: var(--color2);
        display: block;
        font-size: 18px;
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    &:before {
        content: "";
        border: solid;
        border-width: 0 1px 1px 0;
        display: inline-block;
        padding: 4px;
        transform: rotate(135deg) translateY(50%);
        -webkit-transform: rotate(135deg) translateY(50%);
        position: absolute;
        left: 30px;
        top: 50%;
        transition: 0.4s ease;
    }
}
@media only screen and (min-width: 992px) {
    .sidebar-shop {
        .title-side {
            justify-content: center !important;
        }
    }
}
@media only screen and (max-width: 992px) {
    .sidebar-shop {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        height: 100%;
        background: #fff;
        box-shadow: -2px 0 10px rgba(0, 0, 0, 0.2);
        transition: right 0.4s ease;
        padding: 20px 16px;
        overflow-y: auto;
        max-height: none !important;
        z-index: 9999;
        border-radius: 0
    }
    .sidebar-shop.show-canvas {
        right: 0;
    }
    .sidebar-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease;
        z-index: 9998;
    }
    .sidebar-overlay.active {
        opacity: 1;
        visibility: visible;
    }
}
.filter-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--Medium);
    font-size: 14px;
    margin-bottom: 24px;
    & .switch {
        position: relative;
        display: inline-block;
        width: 46px;
        height: 24px;
        & input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        & .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #E1E4E8;
            border-radius: 24px;
            transition: .4s;
            &:before {
                position: absolute;
                content: "";
                height: 20px;
                width: 20px;
                left: 2px;
                bottom: 2px;
                background-color: white;
                border-radius: 50%;
                transition: .4s;
            }
        }
    }
    & input:checked + .slider {
        background-color: var(--color2);
    }
    & input:checked + .slider:before {
        transform: translateX(20px);
        background-color: white;
    }
}
input#min_price, input#max_price {
    border: 1px solid #D9D9D9;
    background: white;
    min-height: 48px;
    padding: 12px;
    color: #121212;
    width: 100%;
    margin-bottom: 14px;
    border-radius: 12px;
    display: block !important;
    &:placeholder {
        color: #BDBDBD;
        display: flex;
    }
}
.price_slider_wrapper {
    position: relative;
    margin: 1.25rem 0 1rem;
}
.woocommerce .widget_price_filter .price_slider_wrapper .ui-widget-content {
    position: relative;
    height: 6px;
    margin: 18px 18px 65px 5px;
    background: #E8E8E8;
}
.woocommerce .widget_price_filter .ui-slider-horizontal .ui-slider-range {
    top: 0;
    height: 6px;
    background: var(--color2);
}
.woocommerce .widget_price_filter .ui-slider .ui-slider-range {
    position: absolute;
    z-index: 1;
    font-size: .7em;
    display: block;
    border: 0;
    border-radius: 1em
}
.price_slider_wrapper .ui-slider .ui-slider-handle {
    z-index: 2;
    width: 20px;
    height: 20px;
    cursor: ew-resize;
    outline: 0;
    top: -8px;
    margin-left: -5px;
    background: white;
    border-radius: 100%;
    position: absolute;
    transition: all 0.3s;
    left: 0;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border: 4px solid var(--color2);
}
.price_slider_amount {
    display: flex;
    flex-direction: column;
    text-align: right;
    font-size: 14px
}
.price_slider-text {
    font-size: 14px;
    color: var(--black);
    font-family: var(--Medium);
    margin-bottom: 10px;
}
.price_slider_wrapper button {
    height: 52px;
    margin: 0;
    background: #F4832329;
    color: var(--color1);
    border: 2px solid #F4832333 !important;
    border-radius: 100px;
    font-family: var(--Medium);
    width: max-content;
    margin: 24px auto 0;
    padding-inline: 24px;
    transition: 0.4s;
    &:hover {
        background: var(--color1);
        color: white !important;
    }
}
.price_label {
    position: absolute;
    top: 22px;
    font-size: 12px;
    display: flex;
    gap: 8px;
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
}
/*
.sidebar-shop.show-canvas * {
    display: block !important;
}*/
.head-side-shop {
    font-size: clamp(16px, 2vw, 20px);
    font-family: var(--Medium);
    display: flex;
    align-items: center;
    gap: 8px;
    background: #F1F5F9;
    padding: 21px 24px;
    margin-bottom: 20px;
    border-radius: 24px;
    position: relative;
    justify-content: space-between;
}
.error-archive {
    width: 100%;
    background: var(--danger);
    border-radius: 12px;
    padding: 12px;
    text-align: center;
    color: white;
}
@media only screen and (max-width: 768px) {
    .section-products .swiper-product {
        padding-bottom: 58px;
    }
}
/* warranty */
.ul-warranty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
    border-bottom: 1px solid #ECECEC;
    padding: 0 16px 16px;
    position: relative;
    span {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: clamp(14px, 2vw, 16px);
        font-family: var(--SemiBold);
        i {
            width: clamp(32px, 3vw, 38px);
            height: clamp(32px, 3vw, 38px);
            border-radius: 50%;
            background: #F1F5F9;
            color: #707070;
            font-size: 21px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
    & .active {
        &:before {
            content: "";
            background: var(--color2);
            position: absolute;
            right: 0;
            bottom: 0;
            height: 1px;
            width: 50%;
        }
        i {
            background: #FAB10B1A;
            color: var(--color2);
        }
        color: var(--color2);
    }
    & .step-1.active:before {
        right: 0;
    }
    & .step-2.active:before {
        right: auto;
        left: 0;
    }
}
.warranty-verify-input-step .col-lg-5 {
    margin-bottom: 48px;
}
.border-single {
    border: 1px solid #C1C1C1;
    border-radius: 24px;
    padding: 24px;
    margin-bottom: 32px;
}
.sec-galley {
    margin-block: clamp(40px, 3vw, 48px);
    position: relative;
    .title-sec-single {
        font-size: clamp(24px, 2vw, 36px);
        margin-bottom: clamp(32px, 3vw, 40px);
        font-family: var(--SemiBold);
        text-align: center;
    }
    .gallery-wrap {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: clamp(16px, 2vw, 20px);
        a {
            max-height: clamp(104px, 12vw, 170px);
        }
        img {
            border-radius: 20px;
            width: 100%;
        }
    }
}
@media only screen and (min-width: 992px) {
    .sec-galley {
        .title-sec-single {
            text-align: right;
        }
        .gallery-wrap {
            grid-template-columns: repeat(3, 1fr);
        }
    }
    .single-usage {
        .thumbnail-post-img {
            margin-block: 0;
        }
    }
}
.single-usage .thumbnail-post-img img {
    width: 100%;
}
@media only screen and (max-width: 768px) {
    .single-usage {
        .single-share {
            margin-bottom: 0;
        }
        .sidebar-post {
            margin-bottom: 32px;
        }
    }
}
.wrap-filter {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: white;
    box-shadow: 0px 0px 32px 6px #7070702E;
    border-radius: 24px;
    padding: 8px;
    margin-top: -44px;
    margin-bottom: clamp(32px, 3vw, 40px);
}
.hero-accordion {
    position: relative;
    width: 100%;
    /*max-width: clamp(280px, 34vw, 370px);
    width: 100%;*/
    &:before {
        content: "";
        border: solid;
        border-width: 1px 1px 0px 0;
        display: inline-block;
        padding: 4px;
        transform: rotate(135deg) translateY(-50%);
        -webkit-transform: rotate(135deg) translateY(50%);
        transition: 0.4s ease;
        position: absolute;
        left: 24px;
        top: 48%;
    }
    &.active {
        &:before {
            color: var(--color2) !important;
            transform: rotate(-45deg) translateY(-50%);
        }
    }
    .accordion-title {
        cursor: pointer;
        padding: clamp(10px, 2vw, 20px) clamp(14px, 2vw, 24px);
        padding-left: 48px;
        border-radius: 24px;
        background: #fff;
        position: relative;
        user-select: none;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        font-size: clamp(14px, 2vw, 16px);
        font-family: var(--SemiBold);
        border: 1px solid #E4E4E4;
        border-radius: 18px;
        transition: border-color 0.3s ease;
        &:hover {
            border-color: var(--color2);
        }
    }
    .accordion-content {
        display: none;
        position: absolute;
        top: calc(100% + 10px);
        right: 0;
        min-width: 220px;
        background: #fff;
        border-radius: 24px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, .1);
        z-index: 999;
        width: 100%;
        flex-direction: column;
        padding: 12px 24px;
        li:not(:nth-last-child(1)) {
            margin-bottom: 14px;
            padding-bottom: 14px;
            border-bottom: 1px solid #eee;
        }
        a {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 12px;
            text-decoration: none;
            color: var(--gray2);
            font-size: 16px;
            border-radius: 12px;
            padding: 8px 12px;
            margin: -8px -12px;
            &:hover {
                color: var(--color2);
            }
            &.active {
                background: #F5F8F7;
                border: 1px solid var(--color2);
                color: var(--color2);
                font-family: var(--SemiBold);
                &:after {
                    content: "\2713";
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    width: 22px;
                    height: 22px;
                    border-radius: 4px;
                    background: var(--color2);
                    color: #fff;
                    font-size: 14px;
                    line-height: 1;
                }
            }
        }
    }
}
.hero-accordion:before {
    display: none;
}
.hero-accordion .accordion-title:after {
    content: "";
    border: solid;
    border-width: 1px 1px 0 0;
    display: inline-block;
    padding: 4px;
    position: absolute;
    left: 24px;
    top: 40%;
    transform: rotate(135deg) translateY(-50%);
    transition: 0.4s ease;
}
.hero-accordion.active .accordion-title:after {
    color: var(--color2) !important;
    transform: rotate(-45deg) translateY(-50%);
    top: 45%;
}
.hero-accordion.has-selected-filter .accordion-title:after {
    display: none;
}
.hero-accordion.has-selected-filter .accordion-title {
    border-color: #E53935;
}
.hero-accordion.has-selected-filter .accordion-title:hover {
    border-color: var(--color2);
}
.hero-accordion.is-loading {
    pointer-events: none;
}
.hero-accordion.is-loading .accordion-content {
    display: none;
}
.hero-accordion.is-loading .accordion-title {
    cursor: progress;
    opacity: .6;
}
.hero-accordion.is-loading .accordion-title:after,
.hero-accordion.is-loading .filter-remove {
    display: none;
}
.hero-accordion.is-loading .accordion-title:before {
    content: "";
    position: absolute;
    left: 22px;
    top: 50%;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    border: 2px solid #D8E0DD;
    border-top-color: var(--color2);
    border-radius: 50%;
    animation: jobFilterLoading .7s linear infinite;
}
@keyframes jobFilterLoading {
    to {
        transform: rotate(360deg);
    }
}
.filter-title-label {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: inherit;
    font-size: 14px;
}
.filter-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #E53935;
    font-size: 20px;
    line-height: 1;
    text-decoration: none;
    color: #fff;
    border: 1px solid #E53935;
    transition: all 0.3s;
}
.filter-remove:hover {
    color: #C62828;
    background: #fff;
}
.hero-accordion.active .accordion-content {
    display: flex;
}
@media only screen and (min-width: 992px) {
    .wrap-filter {
        flex-direction: row;
    }
}
.job-item-hr {
    display: flex;
    align-items: center;
    gap: 20px;
    border: 1px solid #E4E4E4;
    border-radius: 32px;
    padding: 12px;
    transition: border-color 0.3s ease;
    &:hover {
        border-color: var(--color2);
        .job-title a {
            color: var(--color2);
        }
        .icon-reply {
            color: var(--color2);
        }
    }
    .job-icon {
        border-radius: clamp(18px, 2vw, 24px);
        background: #F1F5F9;
        width: clamp(72px, 7vw, 100px);
        height: clamp(72px, 7vw, 100px);
        flex: 0 0 clamp(72px, 7vw, 100px);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: clamp(24px, 3vw, 32px);
        img {
            max-width: 40px;
        }
    }
    .job-title {
        font-size: clamp(16px, 2vw, 18px);
        font-family: var(--SemiBold);
        line-height: 1.5;
        a {
            transition: color 0.3s ease;
        }
    }
    .job-category {
        font-size: clamp(14px, 2vw, 16px);
        color: #707070;
        font-family: var(--Medium);
        margin-top: 6px;
        display: inline-block;
    }
    .job-link {
        margin-right: auto;
        margin-left: 24px;
        color: inherit;
        text-decoration: none;
    }
    .icon-reply {
        display: inline-block;
        transition: color 0.3s ease;
    }
}
.process-item {
    border: 1px solid #DFE6F0;
    border-radius: clamp(24px, 2vw, 32px);
    padding: 12px 12px clamp(32px, 3vw, 42px);
    position: relative;
    height: clamp(360px, 32vw, 430px);
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: hidden;
    transition: border-color .4s ease;
    .counter {
        text-align: left;
        direction: ltr;
        color: #3C3D3E33;
        font-size: clamp(58px, 5vw, 72px);
        font-family: var(--SemiBold);
        padding: 24px 0 0 24px;
        line-height: 100px;
        position: absolute;
        left: 12px;
        top: 12px;
        z-index: 1;
        transition: opacity .4s ease, transform .4s ease;
    }
    .process-img {
        position: relative;
        height: clamp(150px, 14vw, 205px);
        margin-bottom: clamp(44px, 4vw, 60px);
        max-height: 0;
        transform: translateY(10px);
        transition: max-height .4s ease, transform .4s ease, margin-bottom .4s ease;
        i {
            width: clamp(56px, 5vw, 72px);
            height: clamp(56px, 5vw, 72px);
            background: #F1F5F9;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            font-size: 30px;
            color: #707070;
            position: absolute;
            bottom: auto;
            top: clamp(200px, 10vw, 230px);
            right: clamp(12px, 2vw, 20px);
            z-index: 2;
            opacity: 1;
            transform: translateY(0);
            transition: color .4s ease, background-color .4s ease, top .4s ease;
        }
    }
    .process-content {
        padding-inline: clamp(12px, 2vw, 20px);
        margin-top: auto;
        padding-top: clamp(56px, 5vw, 72px);
        transition: margin-top .4s ease, padding-top .4s ease;
        h4 {
            font-size: clamp(17px, 1.6vw, 20px);
            font-family: var(--SemiBold);
            line-height: 1.8;
            transition: color .4s ease;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        p {
            font-size: clamp(13px, 1.4vw, 15px);
            font-family: var(--SemiBold);
            color: #707070;
            line-height: 2;
            opacity: 0;
            transform: translateY(10px);
            transition: opacity .4s ease, transform .4s ease, max-height .4s ease, margin-top .4s ease;
            max-height: 0;
            margin-top: 0;
            overflow: hidden;
            pointer-events: none;
        }
    }
}
.sw--process {
    position: relative;
    .swiper-wrapper {
        align-items: stretch;
    }
    .swiper-slide {
        height: auto;
        display: flex;
        .process-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: clamp(18px, 2vw, 24px);
            opacity: 0;
            transform: translateY(10px);
            transition: opacity .4s ease, transform .4s ease;
            overflow: hidden;
        }
    }
    .swiper-slide:hover {
        .process-item.has-process-image {
            border-color: var(--color2);
            .counter {
                opacity: 0;
                transform: translateY(-10px);
            }
            .process-img {
                position: relative;
                max-height: clamp(150px, 14vw, 205px);
                transform: translateY(0);
                i {
                    color: var(--white);
                    background: var(--color2);
                    top: calc(clamp(150px, 14vw, 170px) - 36px);
                }
            }
            .process-content {
                margin-top: 0;
                padding-top: 0;
            }
            .process-content p {
                opacity: 1;
                transform: translateY(0);
                max-height: 145px;
                margin-top: clamp(10px, 1.4vw, 16px);
                pointer-events: auto;
            }
            .process-img img {
                opacity: 1;
                transform: translateY(0);
            }
            &.no-process-desc {
                .process-img i {
                    top: calc(clamp(150px, 14vw, 200px) - 36px);
                }
                .process-content {
                    margin-top: 0;
                    padding-top: clamp(18px, 2vw, 28px);
                }
            }
        }
        .process-item.no-process-image {
            border-color: var(--color2);
            .counter {
                opacity: .18;
            }
            .process-img {
                max-height: 0;
                transform: none;
                i {
                    color: var(--white);
                    background: var(--color2);
                    top: clamp(56px, 5vw, 72px);
                }
            }
            &.has-process-desc {
                .process-content p {
                    opacity: 1;
                    transform: translateY(0);
                    max-height: 145px;
                    margin-top: clamp(10px, 1.4vw, 16px);
                    pointer-events: auto;
                }
            }
        }
    }
}
@media only screen and (min-width: 576px) {
    .sw--process {
        .swiper-slide.is-process-active {
            .process-item.has-process-image {
                border-color: var(--color2);
                .counter {
                    opacity: 0;
                    transform: translateY(-10px);
                }
                .process-img {
                    position: relative;
                    max-height: clamp(150px, 14vw, 205px);
                    transform: translateY(0);
                    i {
                        color: var(--white);
                        background: var(--color2);
                        top: calc(clamp(150px, 14vw, 170px) - 36px);
                    }
                }
                .process-content {
                    margin-top: 0;
                    padding-top: 0;
                }
                .process-content p {
                    opacity: 1;
                    transform: translateY(0);
                    max-height: 145px;
                    margin-top: clamp(10px, 1.4vw, 16px);
                    pointer-events: auto;
                }
                .process-img img {
                    opacity: 1;
                    transform: translateY(0);
                }
                &.no-process-desc {
                    .process-img i {
                        top: calc(clamp(150px, 14vw, 200px) - 36px);
                    }
                    .process-content {
                        margin-top: 0;
                        padding-top: clamp(18px, 2vw, 28px);
                    }
                }
            }
            .process-item.no-process-image {
                border-color: var(--color2);
                .counter {
                    opacity: .18;
                }
                .process-img {
                    max-height: 0;
                    transform: none;
                    i {
                        color: var(--white);
                        background: var(--color2);
                        top: clamp(56px, 5vw, 72px);
                    }
                }
                &.has-process-desc {
                    .process-content p {
                        opacity: 1;
                        transform: translateY(0);
                        max-height: 145px;
                        margin-top: clamp(10px, 1.4vw, 16px);
                        pointer-events: auto;
                    }
                }
            }
        }
    }
}
@media only screen and (min-width: 992px) {
    .process-item {
        .process-img {
            i {
                bottom: auto;
            }
        }
    }
}
@media only screen and (max-width: 576px) {
    .sw--process {
        .swiper-slide {
            .process-item.has-process-image {
                border-color: var(--color2);
                .counter {
                    opacity: 0;
                    transform: translateY(-10px);
                }
                .process-img {
                    position: relative;
                    max-height: clamp(150px, 14vw, 205px);
                    transform: translateY(0);
                    i {
                        color: var(--white);
                        background: var(--color2);
                        top: calc(clamp(150px, 14vw, 170px) - 36px);
                    }
                }
                .process-content {
                    margin-top: 0;
                    padding-top: 0;
                }
                .process-content p {
                    opacity: 1;
                    transform: translateY(0);
                    max-height: 145px;
                    margin-top: clamp(10px, 1.4vw, 16px);
                    pointer-events: auto;
                }
                .process-img img {
                    opacity: 1;
                    transform: translateY(0);
                }
                &.no-process-desc {
                    .process-img i {
                        top: calc(clamp(150px, 14vw, 200px) - 36px);
                    }
                    .process-content {
                        margin-top: 0;
                        padding-top: clamp(18px, 2vw, 28px);
                    }
                }
            }
            .process-item.no-process-image {
                border-color: var(--color2);
                .counter {
                    opacity: .18;
                }
                .process-img {
                    max-height: 0;
                    transform: none;
                    i {
                        color: var(--white);
                        background: var(--color2);
                        top: clamp(56px, 5vw, 72px);
                    }
                }
                &.has-process-desc {
                    .process-content p {
                        opacity: 1;
                        transform: translateY(0);
                        max-height: 145px;
                        margin-top: clamp(10px, 1.4vw, 16px);
                        pointer-events: auto;
                    }
                }
            }
        }
    }
}
.usage-video-play-btn {
    width: clamp(64px, 8vw, 104px);
    height: clamp(64px, 8vw, 104px);
    position: absolute;
    right: 50%;
    transform: translate(50%, -50%);
    top: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: clamp(28px, 4vw, 48px);
    background: #FFFFFF33;
    border: 3px solid #FDC301;
    color: white;
    backdrop-filter: blur(30px);
    cursor: pointer;
}
.usage-video-play-btn > i {
    position: relative;
    z-index: 1;
}
.usage-video-play-text {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    transform-origin: center;
    animation: usage-video-text-rotate 12s linear infinite;
}
.usage-video-play-text > span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1em;
    height: 1em;
    margin: -0.5em;
    color: currentColor;
    font-family: sans-serif;
    font-size: clamp(7px, 0.8vw, 11px);
    font-weight: 700;
    line-height: 1;
    text-align: center;
    transform: rotate(calc(360deg / var(--char-count) * var(--char-index))) translateY(calc(clamp(64px, 8vw, 104px) * -0.39));
    transform-origin: center;
}
@keyframes usage-video-text-rotate {
    to {
        transform: rotate(360deg);
    }
}
@media (prefers-reduced-motion: reduce) {
    .usage-video-play-text {
        animation: none;
    }
}