:root {
    --m-color-body: 255, 255, 255;
    --m-color-body-l-1: 255, 255, 255;
    --m-color-body-d-1: 251, 251, 251;
    --m-color-body-l-2: 255, 255, 255;
    --m-color-body-d-2: 245, 245, 245;
    --m-color-body-l-3: 255, 255, 255;
    --m-color-body-d-3: 236, 236, 236;
    --m-color-body-l-4: 255, 255, 255;
    --m-color-body-d-4: 224, 224, 224;
    --m-color-body-l-5: 255, 255, 255;
    --m-color-body-d-5: 209, 209, 209;
    --m-color-bodylight: 235, 235, 235;
    --m-color-bodylight-l-1: 243, 243, 243;
    --m-color-bodylight-d-1: 231, 231, 231;
    --m-color-bodylight-l-2: 255, 255, 255;
    --m-color-bodylight-d-2: 225, 225, 225; 
    --m-color-bodylight-l-3: 255, 255, 255;
    --m-color-bodylight-d-3: 216, 216, 216;
    --m-color-bodylight-l-4: 255, 255, 255;
    --m-color-bodylight-d-4: 204, 204, 204;
    --m-color-bodylight-l-5: 255, 255, 255;
    --m-color-bodylight-d-5: 189, 189, 189;
    --m-color-invert: 10, 10, 10;
    --m-color-invert-l-1: 18, 18, 18;
    --m-color-invert-d-1: 6, 6, 6;
    --m-color-invert-l-2: 33, 33, 33;
    --m-color-invert-d-2: 1, 1, 1;
    --m-color-invert-l-3: 56, 56, 56;
    --m-color-invert-d-3: 0, 0, 0;
    --m-color-invert-l-4: 87, 87, 87;
    --m-color-invert-d-4: 0, 0, 0;
    --m-color-invert-l-5: 125, 125, 125;
    --m-color-invert-d-5: 0, 0, 0;
    --m-color-primary: 250, 0, 0;
    --m-color-primary-l-1: 255, 8, 8;
    --m-color-primary-d-1: 243, 0, 0;
    --m-color-primary-l-2: 255, 23, 23;
    --m-color-primary-d-2: 231, 0, 0;
    --m-color-primary-l-3: 255, 46, 46;
    --m-color-primary-d-3: 213, 0, 0;
    --m-color-primary-l-4: 255, 77, 77;
    --m-color-primary-d-4: 188, 0, 0;
    --m-color-primary-l-5: 255, 115, 115;
    --m-color-primary-d-5: 158, 0, 0;
    --m-color-green: 17, 158, 95;
    --m-color-green-l-1: 25, 166, 103;
    --m-color-green-d-1: 16, 152, 91;
    --m-color-green-l-2: 40, 181, 118;
    --m-color-green-d-2: 15, 141, 84;
    --m-color-green-l-3: 63, 204, 141;
    --m-color-green-d-3: 13, 124, 75;
    --m-color-green-l-4: 94, 235, 172;
    --m-color-green-d-4: 11, 102, 61;
    --m-color-green-l-5: 132, 255, 210;
    --m-color-green-d-5: 8, 75, 45;
    --m-color-blue: 0, 98, 246;
    --m-color-blue-l-1: 8, 106, 254;
    --m-color-blue-d-1: 0, 95, 239;
    --m-color-blue-l-2: 23, 121, 255;
    --m-color-blue-d-2: 0, 90, 227;
    --m-color-blue-l-3: 46, 144, 255;
    --m-color-blue-d-3: 0, 83, 209;
    --m-color-blue-l-4: 77, 175, 255;
    --m-color-blue-d-4: 0, 73, 184;
    --m-color-blue-l-5: 115, 213, 255;
    --m-color-blue-d-5: 0, 61, 154;
    --m-color-purple: 138, 0, 255;
    --m-color-purple-l-1: 146, 8, 255;
    --m-color-purple-d-1: 134, 0, 248;
    --m-color-purple-l-2: 161, 23, 255;
    --m-color-purple-d-2: 128, 0, 236;
    --m-color-purple-l-3: 184, 46, 255;
    --m-color-purple-d-3: 118, 0, 218;
    --m-color-purple-l-4: 215, 77, 255;
    --m-color-purple-d-4: 104, 0, 193;
    --m-color-purple-l-5: 253, 115, 255;
    --m-color-purple-d-5: 88, 0, 163;
    --m-color-orange: 247, 110, 17;
    --m-color-orange-l-1: 255, 118, 25;
    --m-color-orange-d-1: 246, 106, 11;
    --m-color-orange-l-2: 255, 133, 40;
    --m-color-orange-d-2: 237, 100, 7;
    --m-color-orange-l-3: 255, 156, 63;
    --m-color-orange-d-3: 219, 93, 7;
    --m-color-orange-l-4: 255, 187, 94;
    --m-color-orange-d-4: 196, 83, 6;
    --m-color-orange-l-5: 255, 225, 132;
    --m-color-orange-d-5: 166, 70, 5;
    --m-color-yellow: 255, 195, 0;
    --m-color-yellow-l-1: 255, 203, 8;
    --m-color-yellow-d-1: 248, 190, 0;
    --m-color-yellow-l-2: 255, 218, 23;
    --m-color-yellow-d-2: 236, 180, 0;
    --m-color-yellow-l-3: 255, 241, 46;
    --m-color-yellow-d-3: 218, 166, 0;
    --m-color-yellow-l-4: 255, 255, 77;
    --m-color-yellow-d-4: 193, 148, 0;
    --m-color-yellow-l-5: 255, 255, 115;
    --m-color-yellow-d-5: 163, 124, 0;
    --m-color-invertlight: 64, 64, 64;
    --m-color-invertlight-l-1: 72, 72, 72;
    --m-color-invertlight-d-1: 60, 60, 60;
    --m-color-invertlight-l-2: 87, 87, 87;
    --m-color-invertlight-d-2: 54, 54, 54;
    --m-color-invertlight-l-3: 110, 110, 110;
    --m-color-invertlight-d-3: 45, 45, 45;
    --m-color-invertlight-l-4: 141, 141, 141;
    --m-color-invertlight-d-4: 33, 33, 33;
    --m-color-invertlight-l-5: 179, 179, 179;
    --m-color-invertlight-d-5: 18, 18, 18;
    --m-color-black: 0, 0, 0;
    --m-color-black-l-1: 8, 8, 8;
    --m-color-black-d-1: 0, 0, 0;
    --m-color-black-l-2: 23, 23, 23;
    --m-color-black-d-2: 0, 0, 0;
    --m-color-black-l-3: 46, 46, 46;
    --m-color-black-d-3: 0, 0, 0;
    --m-color-black-l-4: 77, 77, 77;
    --m-color-black-d-4: 0, 0, 0;
    --m-color-black-l-5: 115, 115, 115;
    --m-color-black-d-5: 0, 0, 0;
    --m-color-white: 255, 255, 255;
    --m-color-white-l-1: 255, 255, 255;
    --m-color-white-d-1: 251, 251, 251;
    --m-color-white-l-2: 255, 255, 255;
    --m-color-white-d-2: 245, 245, 245;
    --m-color-white-l-3: 255, 255, 255;
    --m-color-white-d-3: 236, 236, 236;
    --m-color-white-l-4: 255, 255, 255;
    --m-color-white-d-4: 224, 224, 224;
    --m-color-white-l-5: 255, 255, 255;
    --m-color-white-d-5: 209, 209, 209;
}
[m-theme="dark"] {
--m-color-body: 10, 10, 10;
    --m-color-body-l-1: 18, 18, 18;
    --m-color-body-d-1: 6, 6, 6;
    --m-color-body-l-2: 33, 33, 33;
    --m-color-body-d-2: 1, 1, 1;
    --m-color-body-l-3: 56, 56, 56;
    --m-color-body-d-3: 0, 0, 0;
    --m-color-body-l-4: 87, 87, 87;
    --m-color-body-d-4: 0, 0, 0;
    --m-color-body-l-5: 125, 125, 125;
    --m-color-body-d-5: 0, 0, 0;
    --m-color-invert: 255, 255, 255;
    --m-color-invert-l-1: 255, 255, 255;
    --m-color-invert-d-1: 251, 251, 251;
    --m-color-invert-l-2: 255, 255, 255;
    --m-color-invert-d-2: 245, 245, 245;
    --m-color-invert-l-3: 255, 255, 255;
    --m-color-invert-d-3: 236, 236, 236;
    --m-color-invert-l-4: 255, 255, 255;
    --m-color-invert-d-4: 224, 224, 224;
    --m-color-invert-l-5: 255, 255, 255;
    --m-color-invert-d-5: 209, 209, 209;
    --m-color-invertlight: 204, 204, 204;
    --m-color-invertlight-l-1: 212, 212, 212;
    --m-color-invertlight-d-1: 200, 200, 200;
    --m-color-invertlight-l-2: 227, 227, 227;
    --m-color-invertlight-d-2: 194, 194, 194;
    --m-color-invertlight-l-3: 250, 250, 250;
    --m-color-invertlight-d-3: 185, 185, 185;
    --m-color-invertlight-l-4: 255, 255, 255;
    --m-color-invertlight-d-4: 173, 173, 173;
    --m-color-invertlight-l-5: 255, 255, 255;
    --m-color-invertlight-d-5: 157, 157, 157;
    --m-color-bodylight: 39, 33, 33;
    --m-color-bodylight-l-1: 47, 41, 41;
    --m-color-bodylight-d-1: 35, 30, 30;
    --m-color-bodylight-l-2: 62, 56, 56;
    --m-color-bodylight-d-2: 29, 24, 24;
    --m-color-bodylight-l-3: 85, 79, 79;
    --m-color-bodylight-d-3: 19, 16, 16;
    --m-color-bodylight-l-4: 116, 110, 110;
    --m-color-bodylight-d-4: 5, 4, 4;
    --m-color-bodylight-l-5: 154, 148, 148;
    --m-color-bodylight-d-5: 0, 0, 0;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}
*,*::before,*::after {
    border: 0 solid #00000000;
}
html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
}
article, aside, figcaption, figure, footer, header, hgroup, main, nav, section  {
    display: block;
}
body {
    --m-bg-alpha: 1;
    --m-text-alpha: 1;
    background-color: rgba(var(--m-color-body), var(--m-bg-alpha));
    color: rgba(var(--m-color-invert), var(--m-text-alpha));
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    ;
}
body, button, input, select, textarea {
    font-family: Artin Sharp;
}
button, input, optgroup, select, textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
}
a {
    text-decoration: none;
}
p {
    margin: 0.4rem 0;
}
h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    display: block;
    font-weight: 500;
}
h1 {
    font-size: 2rem;
}
h2 {
    font-size: 1.5rem;
}
h3 {
    font-size: 1.25rem;
}
h4 {
    font-size: 1rem;
}
h5 {
    font-size: .83rem;
}
h6 {
    font-size: .67rem;
}
i {
    vertical-align: middle !important;
    user-select: none;
}
button, input, select, textarea {
    margin: 0;
}
iframe {
    margin: 0;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
td, th {
    padding: 0;
}
td:not([align]), th:not([align]) {
    text-align: right;
}
.container {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 1.5rem;
}
.container-fluid {
    width: 100%;
    margin: 0 auto;
    padding: 0 1.5rem;
}
@media only screen and (min-width: 992px) {
    .container {
        max-width: 980px 
    }
    .container-fluid {
         
    }
    
}
@media only screen and (min-width: 1296px) {
    .container {
        max-width: 1280px 
    }
    .container-fluid {
         
    }
    
}
@media only screen and (min-width: 1620px) {
    .container {
        max-width: 1600px 
    }
    .container-fluid {
         
    }
    
}
[class^="icon-"],  [class*=" icon-"] {
    font-family: 'icomoon' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}
.icon-aparat:before {
    content: "\e900"
}
.icon-at:before {
    content: "\e901"
}
.icon-attach:before {
    content: "\e902"
}
.icon-basket:before {
    content: "\e903"
}
.icon-bell:before {
    content: "\e904"
}
.icon-calendar:before {
    content: "\e906"
}
.icon-calender-2:before {
    content: "\e907"
}
.icon-car:before {
    content: "\e908"
}
.icon-cart:before {
    content: "\e909"
}
.icon-category:before {
    content: "\e90a"
}
.icon-clock:before {
    content: "\e90b"
}
.icon-comment:before {
    content: "\e90c"
}
.icon-comment-2:before {
    content: "\e90d"
}
.icon-danger:before {
    content: "\e90e"
}
.icon-down:before {
    content: "\e90f"
}
.icon-down-3:before {
    content: "\e910"
}
.icon-edit:before {
    content: "\e911"
}
.icon-edit-2:before {
    content: "\e912"
}
.icon-eye:before {
    content: "\e913"
}
.icon-fb:before {
    content: "\e914"
}
.icon-heart:before {
    content: "\e915"
}
.icon-instagram:before {
    content: "\e917"
}
.icon-key1:before {
    content: "\e918"
}
.icon-left-2:before {
    content: "\e91a"
}
.icon-left-3:before {
    content: "\e91b"
}
.icon-link:before {
    content: "\e91c"
}
.icon-list:before {
    content: "\e91d"
}
.icon-list-time:before {
    content: "\e91e"
}
.icon-location1:before {
    content: "\e91f"
}
.icon-logout:before {
    content: "\e920"
}
.icon-menu:before {
    content: "\e921"
}
.icon-moon:before {
    content: "\e922"
}
.icon-order:before {
    content: "\e923"
}
.icon-phone:before {
    content: "\e924"
}
.icon-phone-2:before {
    content: "\e925"
}
.icon-plus1:before {
    content: "\e927"
}
.icon-price:before {
    content: "\e928"
}
.icon-q:before {
    content: "\e929"
}
.icon-right-2:before {
    content: "\e92b"
}
.icon-save:before {
    content: "\e92c"
}
.icon-search:before {
    content: "\e92d"
}
.icon-share:before {
    content: "\e92e"
}
.icon-steam1:before {
    content: "\e92f"
}
.icon-sun:before {
    content: "\e930"
}
.icon-tg:before {
    content: "\e931"
}
.icon-tick:before {
    content: "\e932"
}
.icon-time:before {
    content: "\e933"
}
.icon-time-2:before {
    content: "\e934"
}
.icon-trash:before {
    content: "\e935"
}
.icon-tw:before {
    content: "\e936"
}
.icon-up:before {
    content: "\e937"
}
.icon-user-2:before {
    content: "\e939"
}
.icon-verification:before {
    content: "\e93a"
}
.icon-wallet:before {
    content: "\e93b"
}
.icon-x:before {
    content: "\e93c"
}
.icon-x-2:before {
    content: "\e93d"
}
.icon-search1:before {
    content: "\e926"
}
.icon-home3:before {
    content: "\e93e"
}
.icon-pencil:before {
    content: "\e93f"
}
.icon-image:before {
    content: "\e940"
}
.icon-play:before {
    content: "\e916"
}
.icon-folder:before {
    content: "\e941"
}
.icon-price-tags:before {
    content: "\e942"
}
.icon-location:before {
    content: "\e947"
}
.icon-display:before {
    content: "\e956"
}
.icon-mobile:before {
    content: "\e958"
}
.icon-quotes-right:before {
    content: "\e978"
}
.icon-spinner11:before {
    content: "\e984"
}
.icon-key:before {
    content: "\e98d"
}
.icon-fire:before {
    content: "\e9a9"
}
.icon-star-empty:before {
    content: "\e9d7"
}
.icon-star-half:before {
    content: "\e9d8"
}
.icon-star-full:before {
    content: "\e9d9"
}
.icon-smile:before {
    content: "\e9e1"
}
.icon-sad:before {
    content: "\e9e5"
}
.icon-plus:before {
    content: "\ea0a"
}
.icon-minus:before {
    content: "\ea0b"
}
.icon-cancel-circle:before {
    content: "\ea0d"
}
.icon-cross:before {
    content: "\ea0f"
}
.icon-checkmark:before {
    content: "\ea10"
}
.icon-play3:before {
    content: "\ea1c"
}
.icon-arrow-right2:before {
    content: "\ea3c"
}
.icon-arrow-left2:before {
    content: "\ea40"
}
.icon-circle-right:before {
    content: "\ea42"
}
.icon-circle-left:before {
    content: "\ea44"
}
.icon-facebook:before {
    content: "\ea90"
}
.icon-instagram1:before {
    content: "\ea92"
}
.icon-whatsapp:before {
    content: "\ea93"
}
.icon-telegram:before {
    content: "\ea95"
}
.icon-twitter:before {
    content: "\ea96"
}
.icon-youtube:before {
    content: "\ea9d"
}
.icon-youtube2:before {
    content: "\ea9e"
}
.icon-steam:before {
    content: "\eaac"
}
.button,  button,  .btn {
    user-select: none
}
*:focus {
    outline: none
}
ul {
    list-style: none
}
a {
    color: inherit
}
::-webkit-scrollbar {
    width: .35rem;
    height: .35rem
}
@media only screen and (max-width: 991.98px)  {
    ::-webkit-scrollbar {
        width: 0.25rem;
        height: 0.25rem
    }
}
::-webkit-scrollbar-track {
    background: rgba(var(--m-color-body-d-3), 1)
}
[m-theme="dark"] ::-webkit-scrollbar-track {
    background: rgba(var(--m-color-body-l-3), 1)
}
::-webkit-scrollbar-thumb {
    background: rgba(var(--m-color-primary), 1)
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--m-color-primary-l-4), 1)
}
@media only screen and (min-width: 1620px)  {
    html {
        font-size: 20px
    }
}
@media only screen and (max-width: 1295.98px)  {
    html {
        font-size: 12px
    }
}
@media only screen and (max-width: 991.98px)  {
    html {
        font-size: 15px
    }
}
@media only screen and (max-width: 767.98px)  {
    html {
        font-size: 14.25px
    }
}
@media (max-width: 348px) {
    html {
        font-size: 12px
    }
}
@media (max-width: 300px) {
    html {
        font-size: 11px
    }
}
@media (max-width: 270px) {
    html {
        font-size: 9px
    }
}
.ltr {
    direction: ltr
}
.button-primary {
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-primary),var(--m-bg-alpha));
    padding-top: 0.5rem;
    padding-bottom: 0.55rem;
    padding-right: 1.25rem;
    padding-left: 1.25rem;
    border-radius: 0.5rem;
    top: 50%;
    font-size: 0.9rem;
    z-index: 3;
    --m-text-alpha: 1;
    color: rgba(var(--m-color-white),var(--m-text-alpha));
    transition-duration: 250ms;
    -webkit-transition-duration: 250ms;
    -o-transition-duration: 250ms;
    white-space: nowrap;
    text-align: center;
    box-shadow: 0 3px 8px rgba(255,0,0,.5)
}
.button-primary i {
    margin: 0 .25rem
}
.button-primary.button-green {
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-green),var(--m-bg-alpha));
    box-shadow: 0 3px 8px rgba(0,150,0,.5)
}
.button-primary.button-green:hover {
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-green-l-2),var(--m-bg-alpha))
}
.button-primary.button-yellow {
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-yellow),var(--m-bg-alpha));
    box-shadow: 0 3px 8px rgba(230,170,0,.5)
}
.button-primary.button-yellow:hover {
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-yellow-d-1),var(--m-bg-alpha))
}
.button-primary.button-white {
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-white),var(--m-bg-alpha));
    --m-text-alpha: 1;
    color: rgba(var(--m-color-primary),var(--m-text-alpha));
    box-shadow: 0 3px 8px rgba(150,150,150,.5)
}
.button-primary.button-white:hover {
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-white-d-2),var(--m-bg-alpha))
}
.button-primary:hover {
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-primary-l-4),var(--m-bg-alpha))
}
@media only screen and (max-width: 575.98px)  {
    .button-primary {
        padding-right: 1rem;
        padding-left: 1rem
    }
}
:root {
    --swiper-theme-color: #007aff
}
:host {
    position: relative;
    display: block;
    margin-left: auto;
    margin-right: auto;
    z-index: 1
}
.swiper {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
    z-index: 1;
    display: block
}
.swiper-vertical > .swiper-wrapper {
    flex-direction: column
}
.swiper-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    transition-property: transform;
    transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
    box-sizing: content-box
}
.swiper-android .swiper-slide,  .swiper-ios .swiper-slide,  .swiper-wrapper {
    transform: translate3d(0px, 0, 0)
}
.swiper-horizontal {
    touch-action: pan-y
}
.swiper-vertical {
    touch-action: pan-x
}
.swiper-slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
    transition-property: transform;
    display: block
}
.swiper-slide-invisible-blank {
    visibility: hidden
}
.swiper-autoheight,  .swiper-autoheight .swiper-slide {
    height: auto
}
.swiper-autoheight .swiper-wrapper {
    align-items: flex-start;
    transition-property: transform, height
}
.swiper-backface-hidden .swiper-slide {
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}
.swiper-3d.swiper-css-mode .swiper-wrapper {
    perspective: 1200px
}
.swiper-3d .swiper-wrapper {
    transform-style: preserve-3d
}
.swiper-3d {
    perspective: 1200px
}
.swiper-3d .swiper-cube-shadow,  .swiper-3d .swiper-slide {
    transform-style: preserve-3d
}
.swiper-css-mode > .swiper-wrapper {
    overflow: auto;
    scrollbar-width: none;
    -ms-overflow-style: none
}
.swiper-css-mode > .swiper-wrapper::-webkit-scrollbar {
    display: none
}
.swiper-css-mode > .swiper-wrapper > .swiper-slide {
    scroll-snap-align: start start
}
.swiper-css-mode.swiper-horizontal > .swiper-wrapper {
    scroll-snap-type: x mandatory
}
.swiper-css-mode.swiper-vertical > .swiper-wrapper {
    scroll-snap-type: y mandatory
}
.swiper-css-mode.swiper-free-mode > .swiper-wrapper {
    scroll-snap-type: none
}
.swiper-css-mode.swiper-free-mode > .swiper-wrapper > .swiper-slide {
    scroll-snap-align: none
}
.swiper-css-mode.swiper-centered > .swiper-wrapper::before {
    content: '';
    flex-shrink: 0;
    order: 9999
}
.swiper-css-mode.swiper-centered > .swiper-wrapper > .swiper-slide {
    scroll-snap-align: center center;
    scroll-snap-stop: always
}
.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {
    margin-inline-start: var(--swiper-centered-offset-before)
}
.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper::before {
    height: 100%;
    min-height: 1px;
    width: var(--swiper-centered-offset-after)
}
.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {
    margin-block-start: var(--swiper-centered-offset-before)
}
.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper::before {
    width: 100%;
    min-width: 1px;
    height: var(--swiper-centered-offset-after)
}
.swiper-3d .swiper-slide-shadow,  .swiper-3d .swiper-slide-shadow-bottom,  .swiper-3d .swiper-slide-shadow-left,  .swiper-3d .swiper-slide-shadow-right,  .swiper-3d .swiper-slide-shadow-top {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10
}
.swiper-3d .swiper-slide-shadow {
    background: rgba(0, 0, 0, .15)
}
.swiper-3d .swiper-slide-shadow-left {
    background-image: linear-gradient(to left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}
.swiper-3d .swiper-slide-shadow-right {
    background-image: linear-gradient(to right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}
.swiper-3d .swiper-slide-shadow-top {
    background-image: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}
.swiper-3d .swiper-slide-shadow-bottom {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}
.swiper-lazy-preloader {
    width: 42px;
    height: 42px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -21px;
    margin-top: -21px;
    z-index: 10;
    transform-origin: 50%;
    box-sizing: border-box;
    border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
    border-radius: 50%;
    border-top-color: transparent
}
.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader,  .swiper:not(.swiper-watch-progress) .swiper-lazy-preloader {
    animation: swiper-preloader-spin 1s infinite linear
}
.swiper-lazy-preloader-white {
    --swiper-preloader-color: #fff
}
.swiper-lazy-preloader-black {
    --swiper-preloader-color: #000
}
@keyframes swiper-preloader-spin {
    0% {
        transform: rotate(0deg)
    }
    100% {
        transform: rotate(360deg)
    }
}
.swiper-virtual .swiper-slide {
    -webkit-backface-visibility: hidden;
    transform: translateZ(0)
}
.swiper-virtual.swiper-css-mode .swiper-wrapper::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none
}
.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after {
    height: 1px;
    width: var(--swiper-virtual-size)
}
.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after {
    width: 1px;
    height: var(--swiper-virtual-size)
}
:root {
    --swiper-navigation-size: 44px
}
.swiper-button-next,  .swiper-button-prev {
    position: absolute;
    top: var(--swiper-navigation-top-offset, 50%);
    width: calc(var(--swiper-navigation-size) / 44 * 27);
    height: var(--swiper-navigation-size);
    margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--swiper-navigation-color, var(--swiper-theme-color))
}
.swiper-button-next.swiper-button-disabled,  .swiper-button-prev.swiper-button-disabled {
    opacity: .35;
    cursor: auto;
    pointer-events: none
}
.swiper-button-next.swiper-button-hidden,  .swiper-button-prev.swiper-button-hidden {
    opacity: 0;
    cursor: auto;
    pointer-events: none
}
.swiper-navigation-disabled .swiper-button-next,  .swiper-navigation-disabled .swiper-button-prev {
    display: none !important
}
.swiper-button-next svg,  .swiper-button-prev svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform-origin: center
}
.swiper-rtl .swiper-button-next svg,  .swiper-rtl .swiper-button-prev svg {
    transform: rotate(180deg)
}
.swiper-button-prev,  .swiper-rtl .swiper-button-next {
    left: var(--swiper-navigation-sides-offset, 10px);
    right: auto
}
.swiper-button-next,  .swiper-rtl .swiper-button-prev {
    right: var(--swiper-navigation-sides-offset, 10px);
    left: auto
}
.swiper-button-lock {
    display: none
}
.swiper-button-next:after,  .swiper-button-prev:after {
    font-family: swiper-icons;
    font-size: var(--swiper-navigation-size);
    text-transform: none !important;
    letter-spacing: 0;
    font-variant: initial;
    line-height: 1
}
.swiper-button-prev:after,  .swiper-rtl .swiper-button-next:after {
    content: 'prev'
}
.swiper-button-next,  .swiper-rtl .swiper-button-prev {
    right: var(--swiper-navigation-sides-offset, 10px);
    left: auto
}
.swiper-button-next:after,  .swiper-rtl .swiper-button-prev:after {
    content: 'next'
}
.swiper-pagination {
    position: absolute;
    text-align: center;
    transition: .3s opacity;
    transform: translate3d(0, 0, 0);
    z-index: 10
}
.swiper-pagination.swiper-pagination-hidden {
    opacity: 0
}
.swiper-pagination-disabled > .swiper-pagination,  .swiper-pagination.swiper-pagination-disabled {
    display: none !important
}
.swiper-horizontal > .swiper-pagination-bullets,  .swiper-pagination-bullets.swiper-pagination-horizontal,  .swiper-pagination-custom,  .swiper-pagination-fraction {
    bottom: var(--swiper-pagination-bottom, 8px);
    top: var(--swiper-pagination-top, auto);
    left: 0;
    width: 100%
}
.swiper-pagination-bullets-dynamic {
    overflow: hidden;
    font-size: 0
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    transform: scale(.33);
    position: relative
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
    transform: scale(1)
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
    transform: scale(1)
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
    transform: scale(.66)
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
    transform: scale(.33)
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
    transform: scale(.66)
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
    transform: scale(.33)
}
.swiper-pagination-bullet {
    width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
    height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
    display: inline-block;
    border-radius: var(--swiper-pagination-bullet-border-radius, 50%);
    background: var(--swiper-pagination-bullet-inactive-color, #000);
    opacity: var(--swiper-pagination-bullet-inactive-opacity, .2)
}
button.swiper-pagination-bullet {
    border: none;
    margin: 0;
    padding: 0;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none
}
.swiper-pagination-clickable .swiper-pagination-bullet {
    cursor: pointer
}
.swiper-pagination-bullet:only-child {
    display: none !important
}
.swiper-pagination-bullet-active {
    opacity: var(--swiper-pagination-bullet-opacity, 1);
    background: var(--swiper-pagination-color, var(--swiper-theme-color))
}
.swiper-pagination-vertical.swiper-pagination-bullets,  .swiper-vertical > .swiper-pagination-bullets {
    right: var(--swiper-pagination-right, 8px);
    left: var(--swiper-pagination-left, auto);
    top: 50%;
    transform: translate3d(0px, -50%, 0)
}
.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,  .swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
    margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;
    display: block
}
.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,  .swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
    top: 50%;
    transform: translateY(-50%);
    width: 8px
}
.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,  .swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    display: inline-block;
    transition: .2s transform, .2s top
}
.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,  .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px)
}
.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic,  .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap
}
.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,  .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    transition: .2s transform, .2s left
}
.swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    transition: .2s transform, .2s right
}
.swiper-pagination-fraction {
    color: var(--swiper-pagination-fraction-color, inherit)
}
.swiper-pagination-progressbar {
    background: var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, .25));
    position: absolute
}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    background: var(--swiper-pagination-color, var(--swiper-theme-color));
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: scale(0);
    transform-origin: left top
}
.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    transform-origin: right top
}
.swiper-horizontal > .swiper-pagination-progressbar,  .swiper-pagination-progressbar.swiper-pagination-horizontal,  .swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,  .swiper-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
    width: 100%;
    height: var(--swiper-pagination-progressbar-size, 4px);
    left: 0;
    top: 0
}
.swiper-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,  .swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,  .swiper-pagination-progressbar.swiper-pagination-vertical,  .swiper-vertical > .swiper-pagination-progressbar {
    width: var(--swiper-pagination-progressbar-size, 4px);
    height: 100%;
    left: 0;
    top: 0
}
.swiper-pagination-lock {
    display: none
}
.swiper-scrollbar {
    border-radius: var(--swiper-scrollbar-border-radius, 10px);
    position: relative;
    touch-action: none;
    background: var(--swiper-scrollbar-bg-color, rgba(0, 0, 0, .1))
}
.swiper-scrollbar-disabled > .swiper-scrollbar,  .swiper-scrollbar.swiper-scrollbar-disabled {
    display: none !important
}
.swiper-horizontal > .swiper-scrollbar,  .swiper-scrollbar.swiper-scrollbar-horizontal {
    position: absolute;
    left: var(--swiper-scrollbar-sides-offset, 1%);
    bottom: var(--swiper-scrollbar-bottom, 4px);
    top: var(--swiper-scrollbar-top, auto);
    z-index: 50;
    height: var(--swiper-scrollbar-size, 4px);
    width: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%))
}
.swiper-scrollbar.swiper-scrollbar-vertical,  .swiper-vertical > .swiper-scrollbar {
    position: absolute;
    left: var(--swiper-scrollbar-left, auto);
    right: var(--swiper-scrollbar-right, 4px);
    top: var(--swiper-scrollbar-sides-offset, 1%);
    z-index: 50;
    width: var(--swiper-scrollbar-size, 4px);
    height: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%))
}
.swiper-scrollbar-drag {
    height: 100%;
    width: 100%;
    position: relative;
    background: var(--swiper-scrollbar-drag-bg-color, rgba(0, 0, 0, .5));
    border-radius: var(--swiper-scrollbar-border-radius, 10px);
    left: 0;
    top: 0
}
.swiper-scrollbar-cursor-drag {
    cursor: move
}
.swiper-scrollbar-lock {
    display: none
}
.swiper-zoom-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center
}
.swiper-zoom-container > canvas,  .swiper-zoom-container > img,  .swiper-zoom-container > svg {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain
}
.swiper-slide-zoomed {
    cursor: move;
    touch-action: none
}
.swiper .swiper-notification {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    opacity: 0;
    z-index: -1000
}
.swiper-free-mode > .swiper-wrapper {
    transition-timing-function: ease-out;
    margin: 0 auto
}
.swiper-grid > .swiper-wrapper {
    flex-wrap: wrap
}
.swiper-grid-column > .swiper-wrapper {
    flex-wrap: wrap;
    flex-direction: column
}
.swiper-fade.swiper-free-mode .swiper-slide {
    transition-timing-function: ease-out
}
.swiper-fade .swiper-slide {
    pointer-events: none;
    transition-property: opacity
}
.swiper-fade .swiper-slide .swiper-slide {
    pointer-events: none
}
.swiper-fade .swiper-slide-active {
    pointer-events: auto
}
.swiper-fade .swiper-slide-active .swiper-slide-active {
    pointer-events: auto
}
.swiper-cube {
    overflow: visible
}
.swiper-cube .swiper-slide {
    pointer-events: none;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    z-index: 1;
    visibility: hidden;
    transform-origin: 0 0;
    width: 100%;
    height: 100%
}
.swiper-cube .swiper-slide .swiper-slide {
    pointer-events: none
}
.swiper-cube.swiper-rtl .swiper-slide {
    transform-origin: 100% 0
}
.swiper-cube .swiper-slide-active,  .swiper-cube .swiper-slide-active .swiper-slide-active {
    pointer-events: auto
}
.swiper-cube .swiper-slide-active,  .swiper-cube .swiper-slide-next,  .swiper-cube .swiper-slide-prev {
    pointer-events: auto;
    visibility: visible
}
.swiper-cube .swiper-cube-shadow {
    position: absolute;
    left: 0;
    bottom: 0px;
    width: 100%;
    height: 100%;
    opacity: .6;
    z-index: 0
}
.swiper-cube .swiper-cube-shadow:before {
    content: '';
    background: #000;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    filter: blur(50px)
}
.swiper-cube .swiper-slide-next + .swiper-slide {
    pointer-events: auto;
    visibility: visible
}
.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-bottom,  .swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-left,  .swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-right,  .swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-top {
    z-index: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}
.swiper-flip {
    overflow: visible
}
.swiper-flip .swiper-slide {
    pointer-events: none;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    z-index: 1
}
.swiper-flip .swiper-slide .swiper-slide {
    pointer-events: none
}
.swiper-flip .swiper-slide-active,  .swiper-flip .swiper-slide-active .swiper-slide-active {
    pointer-events: auto
}
.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-bottom,  .swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-left,  .swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-right,  .swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-top {
    z-index: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}
.swiper-creative .swiper-slide {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    overflow: hidden;
    transition-property: transform, opacity, height
}
.swiper-cards {
    overflow: visible
}
.swiper-cards .swiper-slide {
    transform-origin: center bottom;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    overflow: hidden
}
@media only screen and (max-width: 991.98px)  {
    body {
        padding-top: 3.86rem
    }
}
#nav {
    padding-top: 2rem;
    border-bottom: 1px solid #404040;
    z-index: 98;
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-body),var(--m-bg-alpha))
}
@media only screen and (max-width: 991.98px)  {
    #nav {
        border-bottom: 1px solid rgba(0,0,0,0.1)
    }
    [m-theme="dark"] #nav {
        border-bottom: 1px solid rgba(255,255,255,0.1)
    }
}
@media only screen and (max-width: 991.98px)  {
    #nav .container {
        display: flex
    }
}
#nav .t {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem
}
#nav .t .logo {
    width: 12rem;
    height: 2rem;
    background: url("../img/logo.png") center center no-repeat;
    background-size: 100% auto
}
@media only screen and (max-width: 991.98px)  {
    #nav .t .logo {
        height: 1rem;
        width: 6rem
    }
}
#nav .t form {
    overflow: hidden;
    display: flex
}
#nav .t input {
    height: 2.25rem;
    width: 20rem;
    padding: 0 0.75rem;
    border: 1px solid #cfcfcf;
    border-left-width: 0;
    border-radius: 0 .5rem .5rem 0;
    font-size: .9rem;
    background: none;
    transition-duration: 200ms;
    -webkit-transition-duration: 200ms;
    -o-transition-duration: 200ms
}
@media only screen and (max-width: 991.98px)  {
    #nav .t input {
        width: 2.25rem
    }
}
[m-theme="dark"] #nav .t input {
    color: #fff
}
[m-theme="dark"] #nav .t input:focus {
    --m-border-alpha: 1;
    border-color: rgba(136, 136, 136, var(--m-border-alpha))
}
#nav .t input:focus {
    --m-border-alpha: 1;
    border-color: rgba(64, 64, 64, var(--m-border-alpha))
}
[m-theme="dark"] #nav .t input {
    --m-border-alpha: 1;
    border-color: rgba(84, 84, 84, var(--m-border-alpha))
}
#nav .t button {
    border-radius: .5rem 0 0 .5rem;
    height: 2.25rem;
    width: 2.25rem;
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-primary),var(--m-bg-alpha));
    transition-duration: 200ms;
    -webkit-transition-duration: 200ms;
    -o-transition-duration: 200ms;
    margin: 0;
    padding: 0;
    color: #fff;
    font-size: .8rem
}
#nav .t button:hover {
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-primary-l-2),var(--m-bg-alpha))
}
#nav .b {
    display: flex;
    align-items: center;
    justify-content: space-between
}
@media only screen and (min-width: 992px)  {
    #nav .b > ul {
        display: flex;
        gap: 2rem
    }
    #nav .b > ul > li {
        white-space: nowrap;
        padding: 1rem 0;
        position: relative;
        margin-bottom: -1px;
        transition-duration: 300ms;
        -webkit-transition-duration: 300ms;
        -o-transition-duration: 300ms;
        --m-text-alpha: 1;
        color: rgba(var(--m-color-invert-l-5),var(--m-text-alpha))
    }
    #nav .b > ul > li::before {
        content: "";
        position: absolute;
        width: 1rem;
        height: 1px;
        --m-bg-alpha: 1;
        background-color: rgba(var(--m-color-primary),var(--m-bg-alpha));
        left: 50%;
        bottom: 0rem;
        transition-duration: 300ms;
        -webkit-transition-duration: 300ms;
        -o-transition-duration: 300ms;
        opacity: 0;
        transform: translateX(-50%);
        box-shadow: 0 0px 3px 1px rgba(255,0,0,.4)
    }
    #nav .b > ul > li:hover::before {
        width: 100%;
        opacity: 1
    }
    #nav .b > ul > li.menu-item-has-children::after {
        content: "\e910";
        font-family: 'icomoon' !important;
        display: inline-block;
        font-size: .35rem;
        margin-right: .075rem
    }
    #nav .b > ul > li:hover {
        --m-text-alpha: 1;
        color: rgba(var(--m-color-primary),var(--m-text-alpha))
    }
    #nav .b >ul li:hover .mega {
        transform: none;
        opacity: 1;
        visibility: visible;
        transition-duration: 300ms;
        -webkit-transition-duration: 300ms;
        -o-transition-duration: 300ms
    }
    #nav .b .mega {
        transition-duration: 200ms;
        -webkit-transition-duration: 200ms;
        -o-transition-duration: 200ms;
        position: absolute;
        top: 100%;
        right: 0;
        border-top: none;
        border-radius: 0 0 .75rem .75rem;
        box-shadow: 0 5px 10px 0 rgba(0,0,0,0.05);
        z-index: 96;
        --m-text-alpha: 1;
        color: rgba(var(--m-color-invert-l-1),var(--m-text-alpha));
        --m-bg-alpha: 1;
        background-color: rgba(var(--m-color-body),var(--m-bg-alpha));
        --m-bg-alpha: 0.9;
        transform: scaleY(.9);
        transform-origin: top;
        opacity: 0;
        visibility: hidden;
        backdrop-filter: blur(.5rem)
    }
    [m-theme="dark"] #nav .b .mega {
        box-shadow: 0 5px 10px 0 rgba(200,200,200,0.03)
    }
    #nav .b .mega .links {
        display: flex;
        padding: 1rem
    }
    #nav .b .mega ul {
        padding: 0rem 2.5rem
    }
    #nav .b .mega ul ul {
        padding: .75rem .75rem 0;
        color: rgba(var(--m-color-invert), 1)
    }
    #nav .b .mega ul:hover b {
        --m-text-alpha: 1;
        color: rgba(var(--m-color-primary),var(--m-text-alpha))
    }
    #nav .b .mega ul li {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        font-size: 0.85rem;
        transition-duration: 200ms;
        -webkit-transition-duration: 200ms;
        -o-transition-duration: 200ms;
        font-family: Shabnam;
    }
    #nav .b .mega ul li a:hover {
        --m-text-alpha: 1;
        color: rgba(var(--m-color-primary-l-4),var(--m-text-alpha))
    }
    #nav .b .mega ul li b {
        font-size: 0.9rem;
        display: block;
        -ms-display: block;
        --m-text-alpha: 1;
        color: rgba(var(--m-color-invert),var(--m-text-alpha));
        margin-right: -0.5rem;
        margin-left: -0.5rem
    }
    #nav .b .mega ul li .more {
        --m-text-alpha: 1;
        color: rgba(var(--m-color-primary),var(--m-text-alpha));
        transition-duration: 200ms;
        -webkit-transition-duration: 200ms;
        -o-transition-duration: 200ms
    }
    #nav .b .mega ul li .more:hover {
        --m-text-alpha: 1;
        color: rgba(var(--m-color-primary-l-4),var(--m-text-alpha))
    }
    #nav .b .mega ul li .more:hover::after {
        margin-right: 0.75rem
    }
    #nav .b .mega ul li .more::after {
        transition-duration: 200ms;
        -webkit-transition-duration: 200ms;
        -o-transition-duration: 200ms;
        content: "\e91b";
        font-family: 'icomoon' !important;
        display: inline-block;
        font-size: .5rem;
        margin-right: .5rem
    }
    #nav .b .mega .banner {
        position: relative;
        width: 100%;
        padding-top: 14%;
        border-radius: 0 0 .75rem .75rem;
        overflow: hidden
    }
    #nav .b .mega .banner .banner-cover {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        background: rgba(250,230,230,.66)
    }
    [m-theme="dark"] #nav .b .mega .banner .banner-cover {
        background: rgba(0,0,20,.5)
    }
    #nav .b .mega .banner .details {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        padding: 0 3.5rem;
        z-index: 3;
        display: flex;
        flex-direction: column;
        justify-content: center
    }
    #nav .b .mega .banner .details .t1 {
        font-size: 1.25rem;
        margin-bottom: .25rem
    }
    #nav .b .mega .banner .details .t2 {
        font-weight: bold;
        font-size: 1.5rem;
        margin-bottom: .25rem
    }
    #nav .b .mega .banner .details .t3 {
        --m-text-alpha: 1;
        color: rgba(var(--m-color-invert-l-3),var(--m-text-alpha));
        font-size: 0.8rem
    }
    #nav .b .mega .banner .button {
        --m-bg-alpha: 1;
        background-color: rgba(var(--m-color-primary),var(--m-bg-alpha));
        padding-top: 0.625rem;
        padding-bottom: 0.625rem;
        padding-right: 1.25rem;
        padding-left: 1.25rem;
        border-radius: 0.5rem;
        position: absolute;
        left: 3.5rem;
        top: 50%;
        font-size: 0.9rem;
        z-index: 3;
        --m-text-alpha: 1;
        color: rgba(var(--m-color-white),var(--m-text-alpha));
        transition-duration: 200ms;
        -webkit-transition-duration: 200ms;
        -o-transition-duration: 200ms;
        transform: translateY(-50%);
        box-shadow: 0 3px 8px rgba(255,0,0,.5)
    }
    #nav .b .mega .banner .button i {
        margin-right: .25rem
    }
    #nav .b .mega .banner .button:hover {
        --m-bg-alpha: 1;
        background-color: rgba(var(--m-color-primary-l-4),var(--m-bg-alpha))
    }
    #nav .b .mega .banner img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 0 0 .75rem .75rem
    }
}
@media only screen and (max-width: 991.98px)  {
    #nav .b .mega {
        display: none
    }
    #nav .b .mega .banner {
        display: none
    }
    #nav .b > ul {
        position: fixed;
        width: 17rem;
        right: -17rem;
        z-index: 100;
        top: 0;
        bottom: 0;
        overflow: auto;
        --m-bg-alpha: 1;
        background-color: rgba(var(--m-color-body),var(--m-bg-alpha));
        transition-duration: 500ms;
        -webkit-transition-duration: 500ms;
        -o-transition-duration: 500ms;
        padding: 1.5rem;
        box-shadow: 0 0 10px 0 rgba(0,0,0,0.05)
    }
    #nav .b > ul >li {
        padding: 0.375rem 0;
        position: relative;
        user-select: none
    }
    #nav .b > ul >li.menu-item-has-children::after {
        content: "\e910";
        font-family: 'icomoon' !important;
        display: inline-block;
        font-size: .4rem;
        margin-right: .075rem;
        position: absolute;
        width: 1rem;
        height: 1rem;
        text-align: center;
        line-height: 1rem;
        left: 0;
        top: .5rem;
        padding-top: .1rem;
        transition-duration: 300ms;
        -webkit-transition-duration: 300ms;
        -o-transition-duration: 300ms
    }
    #nav .b > ul >li.menu-item-has-children.active::after {
        transform: rotate(180deg)
    }
    #nav .b > ul >li.menu-item-has-children.active .mega {
        display: block
    }
    #nav .b > ul >li.menu-item-has-children.active .mega ul {
        padding: .5rem 1rem
    }
    #nav .b > ul >li.menu-item-has-children.active .mega ul li {
        padding: 0.375rem 0;
        position: relative;
        user-select: none
    }
    #nav .b > ul >li.menu-item-has-children.active .mega .more {
        --m-text-alpha: 1;
        color: rgba(var(--m-color-primary),var(--m-text-alpha));
        transition-duration: 200ms;
        -webkit-transition-duration: 200ms;
        -o-transition-duration: 200ms
    }
    #nav .b > ul >li.menu-item-has-children.active .mega .more:hover {
        --m-text-alpha: 1;
        color: rgba(var(--m-color-primary-l-4),var(--m-text-alpha))
    }
    #nav .b > ul >li.menu-item-has-children.active .mega .more:hover::after {
        margin-right: 0.75rem
    }
    #nav .b > ul >li.menu-item-has-children.active .mega .more::after {
        transition-duration: 200ms;
        -webkit-transition-duration: 200ms;
        -o-transition-duration: 200ms;
        content: "\e91b";
        font-family: 'icomoon' !important;
        display: inline-block;
        font-size: .5rem;
        margin-right: .5rem
    }
    [m-theme="dark"] #nav .b > ul {
        box-shadow: 0 0 10px 0 rgba(200,200,200,0.03)
    }
}
#nav .b .icons {
    direction: ltr;
    display: flex
}
#nav .b .icons .button {
    height: 2.25rem;
    line-height: 2.25rem;
    border-radius: .5rem;
    background: #404040;
    text-align: center;
    color: #fff;
    transition-duration: 300ms;
    -webkit-transition-duration: 300ms;
    -o-transition-duration: 300ms;
    display: flex;
    align-items: center;
    margin-right: .25rem;
    user-select: none;
    position: relative
}
#nav .b .icons .button .text {
    white-space: nowrap;
    width: 0;
    overflow: hidden;
    transition-duration: 300ms;
    -webkit-transition-duration: 300ms;
    -o-transition-duration: 300ms;
    text-align: left
}
#nav .b .icons .button i {
    width: 2.25rem;
    min-width: 2.25rem;
    padding-bottom: .075rem;
    font-size: .9rem
}
#nav .b .icons .button .num {
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-primary),var(--m-bg-alpha));
    --m-text-alpha: 1;
    color: rgba(var(--m-color-white),var(--m-text-alpha));
    font-size: 0.7000000000000001rem;
    position: absolute;
    height: 1rem;
    min-width: 1rem;
    border-radius: 50%;
    line-height: 1rem;
    top: -.5rem;
    left: 50%;
    transform: translateX(-50%);
    text-align: center
}
#nav .b .icons .button:hover .text {
    width: 4rem
}
#nav .b .icons .button.w5:hover .text {
    width: 5rem
}
#nav .b .icons .button.w6:hover .text {
    width: 6rem
}
#nav .b .icons .button:hover {
    background: #333
}
@media only screen and (max-width: 991.98px)  {
    #nav {
        position: fixed;
        width: 100%;
        top: 0;
        padding-top: .5rem;
        justify-content: space-between;
        align-items: center
    }
    #nav .t {
        flex-grow: 1;
        padding-top: .5rem;
        height: 2.25rem
    }
    #nav .t form {
        margin-right: auto;
        overflow: hidden
    }
    #nav .t form:before {
        font-family: 'icomoon' !important;
        content: "\e92d";
        width: 2rem;
        height: 2rem;
        line-height: 2rem;
        position: absolute;
        text-align: center;
        font-size: .8rem
    }
    #nav .t form input {
        width: 2rem;
        max-width: 2rem;
        height: 2rem;
        border-width: 1px;
        border-radius: .25rem;
        position: relative;
        z-index: 10;
        transition-duration: 0ms;
        -webkit-transition-duration: 0ms;
        -o-transition-duration: 0ms
    }
    #nav .t form input::placeholder {
        color: rgba(var(--m-color-body), 1)
    }
    #nav .t form input:focus {
        height: 100%;
        width: 100%;
        max-width: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        position: absolute;
        border: none;
        padding: 0 1.5rem;
        --m-bg-alpha: 1;
        background-color: rgba(var(--m-color-body),var(--m-bg-alpha))
    }
    #nav .t form input:focus::placeholder {
        color: rgba(var(--m-color-invert-l-5), 1)
    }
    #nav .t form button {
        display: none
    }
    #nav .b .icons {
        margin-right: auto;
        margin-top: -.5rem
    }
    #nav .b .icons .button {
        height: 2rem;
        border-radius: .25rem;
        position: relative;
        z-index: 10
    }
    #nav .b .icons .button i {
        width: 2rem;
        min-width: 2rem;
        font-size: .8rem;
        padding-bottom: 0
    }
    #nav .b .icons .button .text {
        display: none
    }
}
#nav .mob-menu {
    width: 1.5rem;
    height: 2rem;
    font-size: 2rem;
    overflow: hidden;
    margin-bottom: .5rem;
    margin-left: .5rem
}
@media only screen and (min-width: 992px)  {
    #nav .mob-menu {
        display: none
    }
}
@media only screen and (max-width: 991.98px)  {
    #nav .cover {
        position: fixed;
        z-index: 99;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        backdrop-filter: blur(.5rem);
        transition-duration: 300ms;
        -webkit-transition-duration: 300ms;
        -o-transition-duration: 300ms;
        opacity: 0;
        visibility: hidden;
        background: rgba(128,128,128,.5)
    }
    [m-theme="dark"] #nav .cover {
        backdrop-filter: blur(.5rem)
    }
}
#nav.active .b > ul {
    right: 0
}
#nav.active .cover {
    opacity: 1;
    visibility: visible
}
#nav .b .button {
    position: relative
}
#nav .b .button .border-invert {
    border-color: rgba(128,128,128,.15)
}
#nav .b .button .more {
    position: absolute;
    left: 0;
    top: 100%;
    padding-top: .6rem;
    margin-top: 1px;
    color: rgba(var(--m-color-invert), 1);
    line-height: initial;
    text-align: initial;
    z-index: 80;
    opacity: 0;
    visibility: hidden;
    transform: scaleY(.94);
    transform-origin: top;
    transition-duration: 250ms;
    -webkit-transition-duration: 250ms;
    -o-transition-duration: 250ms;
    direction: rtl;
    font-family: Shabnam
}
@media only screen and (max-width: 991.98px)  {
    #nav .b .button .more {
        left: auto;
        right: 0;
        max-width: calc(100vw - 1rem);
    }
    #nav .b .button .more .more-box {
        max-width: calc(100vw - 1rem);
    }
    #nav #header-cart .button .more {
        left: 0;
        right: auto;
    }
    #nav #header-cart .button .more .more-box {
        width: min(25rem, calc(100vw - 1rem)) !important;
    }
}
#nav .b .button .more .alert-more i {
    font-size: .7rem;
    margin: 0 .25rem
}
#nav .b .button .more .dashboard-more li a {
    transition-duration: 250ms;
    -webkit-transition-duration: 250ms;
    -o-transition-duration: 250ms
}
#nav .b .button .more .dashboard-more li a:hover {
    --m-text-alpha: 1;
    color: rgba(var(--m-color-primary),var(--m-text-alpha))
}
#nav .b .button .more .dashboard-more i {
    font-size: .7rem;
    margin: 0 .25rem
}
#nav .b .button:hover .more {
    transform: scaleY(1);
    visibility: visible;
    opacity: 1
}
#nav .b .button .more-box {
    padding: 1.25rem;
    background: rgba(var(--m-color-body), 1);
    border: 1px solid rgba(128,128,128,.15);
    border-radius: 0 0 .6rem .6rem
}
#nav .mini-cart-product {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid rgba(128,128,128,.15)
}
#nav .mini-cart-product:not(:first-child) {
    padding-top: .5rem
}
#nav .mini-cart-product img {
    width: 2.5rem;
    min-width: 2.5rem;
    aspect-ratio: 2/3;
    object-fit: cover;
    border-radius: .3rem
}
#nav .mini-cart-product .product-title {
    font-size: .85rem;
    line-height: 1.2rem;
    max-height: 2.4rem;
    flex-grow: 1;
    display: block;
    margin-bottom: .1rem;
    overflow: hidden
}
[dir="ltr"] #nav .b .button .more {
    left: auto;
    right: 0;
    direction: ltr
}
[dir="ltr"] #nav .b {
    display: flex;
    align-items: center;
    justify-content: space-between
}
@media only screen and (min-width: 992px)  {
    [dir="ltr"] #nav .b .mega {
        right: auto;
        left: 0
    }
}
[dir="ltr"] #nav .b .icons {
    direction: rtl;
    display: flex
}
[dir="ltr"] #nav .b .icons .button .text {
    text-align: right
}
@media only screen and (min-width: 992px)  {
    [dir="ltr"] #nav .t form {
        flex-direction: row-reverse
    }
    [dir="ltr"] #nav .b .mega ul li .more::after {
        margin-left: .5rem;
        margin-right: 0;
        transform: rotate(180deg);
        margin-top: -.2rem
    }
    [dir="ltr"] #nav .b .mega .banner .button {
        left: auto;
        right: 3.5rem
    }
    [dir="ltr"] #nav .b .mega .banner .button i {
        transform: rotate(180deg) !important;
        display: inline-block
    }
}
@media only screen and (max-width: 991.98px)  {
    [dir="ltr"] #nav .mob-menu {
        margin-left: 0;
        margin-right: .5rem;
        direction: rtl
    }
    [dir="ltr"] #nav .t form {
        margin-right: .5rem;
        margin-left: auto
    }
    [dir="ltr"] #nav .b > ul {
        right: auto !important;
        left: -17rem
    }
    [dir="ltr"] #nav.active .b > ul {
        left: 0
    }
    [dir="ltr"] #nav .b > ul >li.menu-item-has-children::after {
        left: auto;
        right: 0
    }
    [dir="ltr"] #nav .b > ul >li.menu-item-has-children.active .mega .more::after {
        margin-left: .5rem;
        margin-right: 0;
        transform: rotate(180deg);
        margin-top: -.2rem
    }
}
#blog {
    padding-top: 1.5rem;
    padding-bottom: 3rem
}
@media only screen and (min-width: 992px)  {
    #blog .grid.ltr {
        gap: 2rem
    }
}
#blog .grid > * {
    direction: rtl
}
#blog .navigation {
    font-size: 1.2rem;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    padding-bottom: 1rem
}
[m-theme="dark"] #blog .navigation {
    border-bottom: 1px solid rgba(255,255,255,0.1)
}
#blog .navigation >* {
    margin-left: 2rem
}
#blog .navigation a {
    --m-text-alpha: 1;
    color: rgba(var(--m-color-invert-l-4),var(--m-text-alpha));
    transition-duration: 200ms;
    -webkit-transition-duration: 200ms;
    -o-transition-duration: 200ms
}
[m-theme="dark"] #blog .navigation a {
    --m-text-alpha: 1;
    color: rgba(var(--m-color-invert-d-5),var(--m-text-alpha));
    opacity: 0.7000000000000001
}
#blog .navigation a:hover {
    --m-text-alpha: 1;
    color: rgba(var(--m-color-primary),var(--m-text-alpha));
    opacity: 1
}
@media only screen and (max-width: 575.98px)  {
    #blog .navigation {
        font-size: 1rem
    }
    #blog .navigation >* {
        margin-left: 1rem
    }
}
#blog .post {
    border-radius: .75rem;
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 3px 10px 0 rgba(0,0,0,0.05)
}
[m-theme="dark"] #blog .post {
    box-shadow: 0 3px 10px 0 rgba(200,200,200,0.05);
    border: 1px solid rgba(200,200,200,0.05)
}
@media only screen and (min-width: 768px)  {
    #blog .post {
        padding: 1.5rem;
        margin-bottom: 1rem
    }
}
@media only screen and (min-width: 768px)  {
    #blog .post .i1 {
        display: flex
    }
}
@media only screen and (max-width: 767.98px)  {
    #blog .post .i1 {
        margin-bottom: .5rem
    }
}
#blog .post .i1 .image {
    aspect-ratio: 43/30;
    border-radius: .75rem;
    height: auto;
    width: 100%
}
#blog .post .i1 .image img {
    width: 100%;
    height: 100%;
    border-radius: .75rem;
    display: block;
    object-fit: cover
}
@media only screen and (max-width: 767.98px)  {
    #blog .post .i1 .image {
        border-radius: .75rem .75rem 0 0;
        margin-bottom: .5rem
    }
}
@media only screen and (min-width: 768px)  {
    #blog .post .i1 .image {
        width: 42%;
        min-width: 42%;
        margin-left: 1rem
    }
}
#blog .post .i1 .det {
    text-overflow: ellipsis
}
#blog .post .i1 .title {
    font-weight: bold;
    overflow: hidden;
    line-height: 1.3rem;
    max-height: 2.6rem;
    font-size: .8rem
}
@media only screen and (min-width: 768px)  {
    #blog .post .i1 .title {
        --m-text-alpha: 1;
        color: rgba(var(--m-color-primary),var(--m-text-alpha));
        transition-duration: 200ms;
        -webkit-transition-duration: 200ms;
        -o-transition-duration: 200ms
    }
    #blog .post .i1 .title:hover {
        --m-text-alpha: 1;
        color: rgba(var(--m-color-primary-d-4),var(--m-text-alpha))
    }
}
@media only screen and (max-width: 767.98px)  {
    #blog .post .i1 .title {
        padding: 0rem .75rem
    }
}
@media only screen and (min-width: 768px)  {
    #blog .post .i1 .title {
        font-size: .87rem;
        line-height: 1.6rem;
        max-height: 3.2rem;
        margin-top: .5rem;
        margin-bottom: .5rem
    }
}
@media only screen and (min-width: 992px)  {
    #blog .post .i1 .title {
        line-height: 2rem;
        max-height: 4rem;
        font-size: 1.5rem;
        margin-top: .75rem;
        margin-bottom: .75rem
    }
}
#blog .post .i1 .text {
    opacity: .9;
    font-size: .9rem;
    line-height: 1.5rem;
    max-height: 10.5rem;
    overflow: hidden
}
@media only screen and (max-width: 991.98px)  {
    #blog .post .i1 .text {
        font-size: 0.8rem;
        max-height: 7.5rem
    }
}
@media only screen and (max-width: 767.98px)  {
    #blog .post .i1 .text {
        display: none;
        -ms-display: none
    }
}
#blog .post .i2 {
    padding-top: 1rem;
    font-size: .6rem
}
@media only screen and (min-width: 992px)  {
    #blog .post .i2 {
        font-size: .8rem
    }
}
@media only screen and (min-width: 768px)  {
    #blog .post .i2 {
        display: flex;
        align-items: center
    }
}
@media only screen and (max-width: 767.98px)  {
    #blog .post .i2 {
        padding: .25rem .75rem .75rem
    }
}
#blog .post .i2 >* {
    display: block;
    padding: 0 1rem;
    border-right: 1px solid rgba(var(--m-color-invert), 1)
}
@media only screen and (max-width: 767.98px)  {
    #blog .post .i2 >*:not(.button) {
        display: none
    }
}
#blog .post .i2 >*:first-child {
    padding-right: 0;
    border-right: none
}
#blog .post .i2 i {
    display: inline-block;
    margin-left: .25rem
}
#blog .post .i2 .button {
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-primary),var(--m-bg-alpha));
    padding-top: 0.5625rem;
    padding-bottom: 0.5625rem;
    padding-right: 1rem;
    padding-left: 1rem;
    border-radius: 0.5rem;
    font-size: 0.8rem;
    z-index: 3;
    --m-text-alpha: 1;
    color: rgba(var(--m-color-white),var(--m-text-alpha));
    transition-duration: 200ms;
    -webkit-transition-duration: 200ms;
    -o-transition-duration: 200ms;
    margin-right: auto;
    border-right: none;
    text-align: center;
    box-shadow: 0 3px 8px rgba(255,0,0,.5)
}
#blog .post .i2 .button i {
    margin-right: .25rem
}
#blog .post .i2 .button:hover {
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-primary-l-4),var(--m-bg-alpha))
}
@media only screen and (max-width: 767.98px)  {
    #blog .post .i2 .button {
        padding-right: 0rem;
        padding-left: 0rem
    }
}
#blog .post-single {
    border-radius: .75rem;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.05);
    padding: 1.5rem;
    margin-bottom: 2rem
}
[m-theme="dark"] #blog .post-single {
    box-shadow: 0 3px 10px 0 rgba(200, 200, 200, 0.05);
    border: 1px solid rgba(200, 200, 200, 0.05)
}
#blog .post-single .title {
    font-weight: bold;
    overflow: hidden;
    line-height: 1.3rem;
    max-height: 2.6rem;
    font-size: 1rem;
    margin-bottom: .5rem;
    --m-text-alpha: 1;
    color: rgba(var(--m-color-primary),var(--m-text-alpha));
    transition-duration: 200ms;
    -webkit-transition-duration: 200ms;
    -o-transition-duration: 200ms
}
@media only screen and (min-width: 768px)  {
    #blog .post-single .title {
        font-size: 1rem;
        line-height: 1.6rem;
        max-height: 3.2rem;
        margin-top: .5rem;
        margin-bottom: .75rem
    }
}
@media only screen and (min-width: 992px)  {
    #blog .post-single .title {
        line-height: 2rem;
        max-height: 4rem;
        font-size: 1.5rem;
        margin-top: .75rem;
        margin-bottom: 1rem
    }
}
#blog .post-single .title:hover {
    --m-text-alpha: 1;
    color: rgba(var(--m-color-primary-d-4),var(--m-text-alpha))
}
#blog .post-single img {
    width: 100%;
    border-radius: 0.75rem;
    margin: 1rem 0
}
#blog .post-single blockquote {
    background: rgba(128,128,128,.1);
    border-radius: 1rem;
    padding: 1.5rem;
    margin: 2rem;
    position: relative;
    overflow: hidden
}
@media only screen and (max-width: 767.98px)  {
    #blog .post-single blockquote {
        margin: 0;
        padding: 1rem
    }
}
#blog .post-single blockquote::before {
    position: absolute;
    content: "\e978";
    font-family: icomoon !important;
    font-size: 5rem;
    line-height: 1rem;
    right: 2rem;
    top: 2rem;
    opacity: .1
}
#blog .post-single ul {
    padding: 1rem 0
}
#blog .post-single li {
    margin-bottom: .5rem;
    list-style: disc inside
}
#blog .post-single .text {
    line-height: 1.75rem
}
#blog .post-single .i2 {
    padding-top: 1rem;
    font-size: .8rem
}
@media only screen and (min-width: 768px)  {
    #blog .post-single .i2 {
        font-size: .6rem
    }
}
@media only screen and (min-width: 992px)  {
    #blog .post-single .i2 {
        font-size: .8rem
    }
}
@media only screen and (min-width: 768px)  {
    #blog .post-single .i2 {
        display: flex;
        align-items: center
    }
}
#blog .post-single .i2 a {
    --m-text-alpha: 1;
    color: rgba(var(--m-color-primary),var(--m-text-alpha));
    transition-duration: 200ms;
    -webkit-transition-duration: 200ms;
    -o-transition-duration: 200ms
}
#blog .post-single .i2 a:hover {
    --m-text-alpha: 1;
    color: rgba(var(--m-color-primary-l-4),var(--m-text-alpha))
}
#blog .post-single .i2 >* {
    display: block;
    padding-left: 1rem;
    margin-left: 1rem;
    margin-bottom: .5rem;
    border-left: 1px solid rgba(var(--m-color-invert), 1)
}
@media only screen and (max-width: 767.98px)  {
    #blog .post-single .i2 >* {
        display: inline-block
    }
}
#blog .post-single .i2 >*:last-child {
    padding-left: 0;
    border-left: none
}
#blog .post-single .i2 i {
    display: inline-block;
    margin-left: .25rem
}
#blog .post-single .i2 .button {
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-primary),var(--m-bg-alpha));
    padding-top: 0.5625rem;
    padding-bottom: 0.5625rem;
    padding-right: 1rem;
    padding-left: 1rem;
    border-radius: 0.5rem;
    font-size: 0.8rem;
    z-index: 3;
    --m-text-alpha: 1;
    color: rgba(var(--m-color-white),var(--m-text-alpha));
    transition-duration: 200ms;
    -webkit-transition-duration: 200ms;
    -o-transition-duration: 200ms;
    margin-right: auto;
    border-right: none;
    text-align: center;
    box-shadow: 0 3px 8px rgba(255,0,0,.5)
}
#blog .post-single .i2 .button i {
    margin-right: .25rem
}
#blog .post-single .i2 .button:hover {
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-primary-l-4),var(--m-bg-alpha))
}
@media only screen and (max-width: 767.98px)  {
    #blog .post-single .i2 .button {
        padding-right: 0rem;
        padding-left: 0rem
    }
}
#blog .comments-list {
    border-radius: .75rem;
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 3px 10px 0 rgba(0,0,0,0.05);
    padding: 1.5rem;
    margin-bottom: 2rem
}
[m-theme="dark"] #blog .comments-list {
    box-shadow: 0 3px 10px 0 rgba(200,200,200,0.05);
    border: 1px solid rgba(200,200,200,0.05)
}
#blog .comments-list .title {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 1rem
}
@media only screen and (min-width: 992px)  {
    #blog .comments-list .title {
        font-size: 1.75rem
    }
}
#blog .comments-list .comment {
    margin: 1rem 0 1rem auto;
    width: 90%
}
@media only screen and (min-width: 576px)  {
    #blog .comments-list .comment {
        width: 80%
    }
}
#blog .comments-list .comment.reply {
    margin-right: auto;
    margin-left: 0
}
@media only screen and (min-width: 992px)  {
    #blog .comments-list .comment {
        display: flex
    }
}
#blog .comments-list .comment .name {
    margin-bottom: .5rem
}
@media only screen and (min-width: 992px)  {
    #blog .comments-list .comment .name {
        width: 6rem;
        min-width: 6rem;
        max-width: 6rem;
        padding-top: 1rem
    }
}
#blog .comments-list .comment .cmbox {
    flex-grow: 1;
    border-radius: .75rem;
    border: 1px solid rgba(0,0,0,0.1);
    padding: 1rem
}
[m-theme="dark"] #blog .comments-list .comment .cmbox {
    border: 1px solid rgba(200,200,200,0.1)
}
@media only screen and (min-width: 992px)  {
    #blog .comments-list .comment .cmbox {
        margin-right: 1rem
    }
}
#blog .comments-list .comment .text {
    font-size: .9rem
}
#blog .comments-list .comment .i2 {
    padding-top: 1rem;
    font-size: .6rem;
    display: flex;
    align-items: center
}
@media only screen and (min-width: 992px)  {
    #blog .comments-list .comment .i2 {
        font-size: .8rem
    }
}
#blog .comments-list .comment .i2 >* {
    display: block;
    padding: 0 1rem;
    border-right: 1px solid rgba(var(--m-color-invert), 1);
    --m-text-alpha: 1;
    color: rgba(var(--m-color-invert-l-5),var(--m-text-alpha))
}
#blog .comments-list .comment .i2 >*:first-child {
    padding-right: 0;
    border-right: none
}
[m-theme="dark"] #blog .comments-list .comment .i2 >* {
    --m-text-alpha: 1;
    color: rgba(var(--m-color-invert-d-5),var(--m-text-alpha))
}
#blog .comments-list .comment .i2 i {
    display: inline-block;
    margin-left: .25rem
}
#blog .comments-list .comment .i2 .button {
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-primary),var(--m-bg-alpha));
    padding-bottom: 0.5rem;
    padding-top: 0.3125rem;
    padding-right: 1rem;
    padding-left: 1rem;
    border-radius: 0.5rem;
    font-size: 0.8rem;
    z-index: 3;
    --m-text-alpha: 1;
    color: rgba(var(--m-color-white),var(--m-text-alpha));
    transition-duration: 200ms;
    -webkit-transition-duration: 200ms;
    -o-transition-duration: 200ms;
    margin-right: auto;
    border-right: none;
    text-align: center;
    box-shadow: 0 3px 8px rgba(255,0,0,.5)
}
#blog .comments-list .comment .i2 .button i {
    margin-right: .25rem
}
#blog .comments-list .comment .i2 .button:hover {
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-primary-l-4),var(--m-bg-alpha))
}
#blog .breadcrumb {
    padding-top: .25rem;
    padding-bottom: .5rem;
    position: relative
}
@media only screen and (max-width: 767.98px)  {
    #blog .breadcrumb::before {
        content: "";
        width: 1.5rem;
        height: 100%;
        background: linear-gradient(to right, transparent, rgba(var(--m-color-body), 1));
        position: absolute;
        top: 0;
        left: 100%
    }
    #blog .breadcrumb::after {
        content: "";
        width: 1.5rem;
        height: 100%;
        background: linear-gradient(to left, transparent, rgba(var(--m-color-body), 1));
        position: absolute;
        top: 0;
        right: 100%
    }
}
#blog .breadcrumb ol {
    list-style: none
}
@media only screen and (max-width: 767.98px)  {
    #blog .breadcrumb ol {
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        margin: 0 -1.5rem;
        padding: 0 1.5rem .5rem
    }
    #blog .breadcrumb ol::-webkit-scrollbar {
        width: 0rem;
        height: 0rem
    }
}
#blog .breadcrumb ol li {
    display: inline-block
}
#blog .breadcrumb ol li:not(:last-child)::after {
    content: "/";
    margin: 0 5px;
    --m-text-alpha: 1;
    color: rgba(var(--m-color-invert),var(--m-text-alpha))
}
#blog .breadcrumb ol li a {
    transition-duration: 200ms;
    -webkit-transition-duration: 200ms;
    -o-transition-duration: 200ms;
    --m-text-alpha: 1;
    color: rgba(var(--m-color-invert-l-5),var(--m-text-alpha))
}
[m-theme="dark"] #blog .breadcrumb ol li a {
    --m-text-alpha: 1;
    color: rgba(var(--m-color-invert-d-5),var(--m-text-alpha))
}
#blog .breadcrumb ol li a:hover {
    --m-text-alpha: 1;
    color: rgba(var(--m-color-invert),var(--m-text-alpha))
}
#blog .page-title {
    font-size: 2rem;
    font-weight: 600;
    padding-top: .5rem;
    margin-bottom: 2.25rem;
    --m-text-alpha: 1;
    color: rgba(var(--m-color-primary),var(--m-text-alpha))
}
@media only screen and (max-width: 767.98px)  {
    #blog .page-title {
        display: none
    }
}
#blog .block {
    margin-bottom: 3rem
}
#blog .block-title {
    font-size: 1.1rem;
    margin-bottom: 1rem;
    font-weight: bold
}
#blog form.search {
    overflow: hidden;
    display: flex;
    border-radius: .5rem .5rem;
    box-shadow: 0 3px 10px 0 rgba(0,0,0,0.05)
}
[m-theme="dark"] #blog form.search {
    box-shadow: 0 3px 10px 0 rgba(200, 200, 200, 0.05)
}
#blog form.search input {
    height: 3rem;
    flex-grow: 1;
    padding: 0 0.75rem;
    border-width: 0;
    border-radius: 0 .5rem .5rem 0;
    font-size: .9rem;
    background: none;
    transition-duration: 200ms;
    -webkit-transition-duration: 200ms;
    -o-transition-duration: 200ms;
    background: rgba(0,0,0,0.1)
}
#blog form.search input:focus {
    background: rgba(0,0,0,0.15)
}
[m-theme="dark"] #blog form.search input {
    background: rgba(255,255,255,0.1);
    color: #fff
}
[m-theme="dark"] #blog form.search input:focus {
    background: rgba(255,255,255,.15)
}
[m-theme="dark"] #blog form.search input {
    --m-border-alpha: 1;
    border-color: rgba(84, 84, 84, var(--m-border-alpha))
}
#blog form.search button {
    border-radius: .5rem 0 0 .5rem;
    height: 3rem;
    width: 3rem;
    min-width: 2.25rem;
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-primary),var(--m-bg-alpha));
    transition-duration: 200ms;
    -webkit-transition-duration: 200ms;
    -o-transition-duration: 200ms;
    margin: 0;
    padding: 0;
    color: #fff
}
#blog form.search button:hover {
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-primary-l-4),var(--m-bg-alpha))
}
#blog .post-list li {
    display: flex;
    margin-bottom: 1rem
}
#blog .post-list .image {
    border-radius: .75rem;
    height: auto;
    width: 6rem;
    min-width: 6rem;
    margin-left: 1rem
}
@media only screen and (min-width: 768px)  {
    #blog .post-list .image {
        display: none
    }
}
@media only screen and (min-width: 992px)  {
    #blog .post-list .image {
        display: block
    }
}
#blog .post-list .image img {
    width: 100%;
    aspect-ratio: 1/1;
    border-radius: .75rem;
    display: block;
    object-fit: cover
}
#blog .post-list .title {
    height: 1.75rem;
    line-height: 1.75rem;
    overflow: hidden;
    font-size: .9rem
}
#blog .post-list .text {
    font-size: .8rem;
    line-height: 1.3rem;
    max-height: 2.6rem;
    overflow: hidden;
    opacity: .5
}
#blog .post-list .date {
    font-size: .7rem;
    margin-top: .2rem;
    opacity: .8;
    --m-text-alpha: 1;
    color: rgba(var(--m-color-invert-l-4),var(--m-text-alpha))
}
#blog .post-list .date i {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: .1rem;
    margin-left: .1rem;
    --m-text-alpha: 1;
    color: rgba(var(--m-color-primary),var(--m-text-alpha))
}
#blog .tag-list a {
    display: inline-block;
    margin: .25rem .125rem;
    background: rgba(0,0,0,0.05);
    padding: .3rem 1rem .4rem;
    font-size: .9rem;
    border-radius: .375rem;
    transition-duration: 300ms;
    -webkit-transition-duration: 300ms;
    -o-transition-duration: 300ms
}
[m-theme="dark"] #blog .tag-list a {
    background: rgba(255,255,255,0.05)
}
#blog .tag-list a:hover {
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-primary),var(--m-bg-alpha));
    --m-text-alpha: 1;
    color: rgba(var(--m-color-white),var(--m-text-alpha))
}
.dirChange {
    position: fixed;
    z-index: 88;
    background: rgba(var(--m-color-primary), 1);
    right: 1rem;
    bottom: 1rem;
    color: #fff;
    padding: 1rem;
    border-radius: .5rem;
    cursor: pointer;
    user-select: none
}
#home-slider {
    padding: 5rem 0;
    overflow: hidden
}
@media only screen and (max-width: 767.98px)  {
    #home-slider {
        padding: 0 0 5rem;
        margin-top: -.2rem
    }
}
@media only screen and (max-width: 575.98px)  {
    #home-slider {
        padding: 0 0 3rem
    }
}
#home-slider .slider {
    aspect-ratio: 164/51;
    position: relative
}
@media only screen and (max-width: 767.98px)  {
    #home-slider .slider {
        aspect-ratio: 16/10
    }
}
#home-slider .slider-item {
    position: absolute;
    aspect-ratio: 142/51;
    border-radius: 1.75rem;
    overflow: hidden;
    transition: all .5s ease;
    width: 66%;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    box-shadow: 0 3px 5px rgba(0,0,0,0.03)
}
@media only screen and (max-width: 767.98px)  {
    #home-slider .slider-item {
        width: 100%;
        aspect-ratio: 16/10;
        border-radius: 0;
        margin-right: -10%
    }
}
#home-slider .slider-item.prev {
    z-index: 2
}
#home-slider .slider-item.next {
    margin-right: 34%;
    z-index: 3
}
@media only screen and (max-width: 767.98px)  {
    #home-slider .slider-item.next {
        margin-right: 95%
    }
}
#home-slider .slider-item.current {
    width: 86%;
    margin-right: 7%;
    z-index: 4;
    border-radius: 2rem
}
@media only screen and (max-width: 767.98px)  {
    #home-slider .slider-item.current {
        width: 100% !important;
        margin-right: 0;
        border-radius: 0rem
    }
}
#home-slider .slider-item.next-preview {
    width: 82%;
    margin-right: 5%;
    transition-duration: 300ms;
    -webkit-transition-duration: 300ms;
    -o-transition-duration: 300ms
}
@media only screen and (max-width: 767.98px)  {
    #home-slider .slider-item.next-preview {
        margin-right: -5%
    }
}
#home-slider .slider-item.prev-preview {
    width: 82%;
    margin-right: 13%;
    transition-duration: 300ms;
    -webkit-transition-duration: 300ms;
    -o-transition-duration: 300ms
}
@media only screen and (max-width: 767.98px)  {
    #home-slider .slider-item.prev-preview {
        margin-right: 5%
    }
}
#home-slider .slider-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: rgba(var(--m-color-bodylight), 1)
}
#home-slider .buttons {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0rem;
    left: 0rem;
    display: flex;
    -ms-display: flex;
    --m-box-start:flex-start;
    --m-box-end:flex-end;
    z-index: 3;
    font-size: 4.5rem;
    display: flex;
    -ms-display: flex;
    --m-box-start:flex-start;
    --m-box-end:flex-end;
    --m-text-alpha: 1;
    color: rgba(var(--m-color-primary),var(--m-text-alpha));
    padding-top: 1.375rem;
    padding-right: 3.5%;
    padding-left: 3.5%;
    align-items: center;
    justify-content: space-between;
    text-shadow: 0 .5rem 1rem rgba(var(--m-color-primary),.1)
}
#home-slider .buttons div {
    transition-duration: 250ms;
    -webkit-transition-duration: 250ms;
    -o-transition-duration: 250ms;
    cursor: pointer
}
@media only screen and (min-width: 992px)  {
    #home-slider .buttons div:hover {
        --m-text-alpha: 1;
        color: rgba(var(--m-color-primary-l-4),var(--m-text-alpha))
    }
}
#home-slider .buttons .prev {
    transform: rotateY(180deg)
}
@media only screen and (max-width: 767.98px)  {
    #home-slider .buttons {
        display: none;
        -ms-display: none
    }
}
#home-slider .next-button, #home-slider .prev-button {
    z-index: 3;
    font-size: 4.5rem;
    display: flex;
    -ms-display: flex;
    --m-box-start:flex-start;
    --m-box-end:flex-end;
    --m-text-alpha: 1;
    color: rgba(var(--m-color-primary),var(--m-text-alpha));
    padding-top: 1.375rem;
    transition-duration: 250ms;
    -webkit-transition-duration: 250ms;
    -o-transition-duration: 250ms;
    align-items: center;
    justify-content: space-between;
    text-shadow: 0 .5rem 1rem rgba(var(--m-color-primary),.1);
    cursor: pointer;
    position: absolute;
    top: 50%;
    left: 4.5%;
    transform: translateY(-50%);
    z-index: 6;
    height: 100%
}
@media only screen and (min-width: 992px)  {
    #home-slider .next-button:not(.swiper-button-disabled):hover, #home-slider .prev-button:not(.swiper-button-disabled):hover {
        --m-text-alpha: 1;
        color: rgba(var(--m-color-primary-l-4),var(--m-text-alpha))
    }
}
#home-slider .next-button.prev-button, #home-slider .prev-button.prev-button {
    transform: translateY(-50%) rotateY(180deg);
    right: 4.5%;
    left: auto
}
#home-slider .next-button::before, #home-slider .prev-button::before {
    margin-right: -0.75rem;
    margin-left: -0.75rem
}
.tab-button {
    cursor: pointer;
    user-select: none
}
.home-tab-titles .tab-button {
    opacity: .5
}
.home-tab-titles .tab-button.tab-active {
    opacity: 1;
    --m-text-alpha: 1;
    color: rgba(var(--m-color-primary),var(--m-text-alpha))
}
.home-pt-tabs {
    display: flex;
    gap: 1rem
}
.home-pt-tabs .tab-button {
    display: flex;
    align-items: center;
    gap: .5rem;
    white-space: nowrap;
    overflow: hidden;
    font-size: 1.2rem;
    font-weight: 700;
    transition-duration: 300ms;
    -webkit-transition-duration: 300ms;
    -o-transition-duration: 300ms;
    margin-bottom: -2px;
    border-bottom: 2px solid transparent;
    padding-bottom: 1rem
}
.home-pt-tabs .tab-button img {
    width: 2.75rem;
    height: 2.75rem;
    filter: grayscale(0);
    transition-duration: 300ms;
    -webkit-transition-duration: 300ms;
    -o-transition-duration: 300ms
}
.home-pt-tabs .tab-button span {
    opacity: .5
}
.home-pt-tabs .tab-button.tab-active {
    border-bottom: 2px solid rgba(var(--m-color-primary), 1)
}
.home-pt-tabs .tab-button:not(.tab-active) {
    max-width: 2.75rem
}
.home-pt-tabs .tab-button:not(.tab-active) img {
    filter: grayscale(100%);
    opacity: .6
}
[m-theme="dark"] .home-pt-tabs .tab-button:not(.tab-active) img {
    opacity: .5;
    filter: grayscale(100%) invert(100%)
}
.home-pt-tabs .tab-button:not(.tab-active):hover img {
    filter: grayscale(0%) !important;
    opacity: 1
}
.products-list-slides {
    position: relative;
    display: flex;
    margin-bottom: 5rem
}
@media only screen and (max-width: 767.98px)  {
    .products-list-slides {
        margin-bottom: 3rem
    }
}
.products-list-slides .swiper {
    width: 100%;
    padding: .25rem .5rem .5rem
}
@media only screen and (max-width: 575.98px)  {
    .products-list-slides .swiper-slide {
        width: 50%
    }
}
@media only screen and (max-width: 575.98px)  {
    .products-list-slides .swiper-slide.preview {
        width: 20%
    }
}
@media only screen and (min-width: 576px)  {
    .products-list-slides .swiper-slide.preview {
        display: none;
        -ms-display: none
    }
}
@media only screen and (max-width: 575.98px)  {
    .products-list-slides .swiper-slide {
        width: 42.682%;
        margin-left: 3.658%
    }
}
@media only screen and (min-width: 576px)  {
    .products-list-slides .swiper-slide {
        width: 31.32%;
        margin-left: 3.89%
    }
}
@media only screen and (min-width: 768px)  {
    .products-list-slides .swiper-slide {
        width: 22.64%;
        margin-left: 3.144%
    }
}
@media only screen and (min-width: 992px)  {
    .products-list-slides .swiper-slide {
        width: 15.165%;
        margin-left: 1.784%
    }
}
.products-list-slides .next, .products-list-slides .prev {
    z-index: 3;
    font-size: 4.5rem;
    display: flex;
    -ms-display: flex;
    --m-box-start:flex-start;
    --m-box-end:flex-end;
    --m-text-alpha: 1;
    color: rgba(var(--m-color-primary),var(--m-text-alpha));
    padding-top: 1.375rem;
    transition-duration: 250ms;
    -webkit-transition-duration: 250ms;
    -o-transition-duration: 250ms;
    align-items: center;
    justify-content: space-between;
    text-shadow: 0 .5rem 1rem rgba(var(--m-color-primary),.1);
    cursor: pointer
}
.products-list-slides .next.swiper-button-disabled, .products-list-slides .prev.swiper-button-disabled {
    opacity: .3;
    cursor: default
}
@media only screen and (max-width: 575.98px)  {
    .products-list-slides .next.swiper-button-disabled, .products-list-slides .prev.swiper-button-disabled {
        opacity: 0;
        visibility: hidden
    }
}
@media only screen and (min-width: 992px)  {
    .products-list-slides .next:not(.swiper-button-disabled):hover, .products-list-slides .prev:not(.swiper-button-disabled):hover {
        --m-text-alpha: 1;
        color: rgba(var(--m-color-primary-l-4),var(--m-text-alpha))
    }
}
.products-list-slides .next.prev, .products-list-slides .prev.prev {
    transform: rotateY(180deg)
}
.products-list-slides .next::before, .products-list-slides .prev::before {
    margin-right: -0.75rem;
    margin-left: -0.75rem
}
@media only screen and (max-width: 575.98px)  {
    .products-list-slides .next, .products-list-slides .prev {
        display: none;
        -ms-display: none
    }
}
@media only screen and (max-width: 575.98px)  {
    .products-list-slides .next {
        position: absolute;
        display: block;
        right: 10%;
        top: 50%;
        transform: rotateY(180deg) translateY(-50%);
        font-size: 6rem
    }
    .products-list-slides .next.disable {
        opacity: 0;
        visibility: hidden
    }
}
@media only screen and (max-width: 575.98px)  {
    .products-list-slides .prev {
        position: absolute;
        display: block;
        left: 10%;
        top: 50%;
        transform: translateY(-50%) !important;
        font-size: 6rem
    }
    .products-list-slides .prev.disable {
        opacity: 0;
        visibility: hidden
    }
}
.product-card {
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-bodylight),var(--m-bg-alpha));
    padding: 0.5rem;
    border-radius: 0.625rem;
    height: 100%;
    transition-duration: 250ms;
    -webkit-transition-duration: 250ms;
    -o-transition-duration: 250ms;
    box-shadow: 0 3px 5px rgba(0,0,0,0.07);
    display: flex;
    flex-direction: column;
    position: relative
}
.product-card .countdown-timer {
    display: flex;
    direction: ltr;
    align-items: center;
    justify-content: center;
    margin-top: -.35rem;
    padding: 0 .75rem
}
.product-card .countdown-timer div {
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-primary),var(--m-bg-alpha));
    --m-text-alpha: 1;
    color: rgba(var(--m-color-white),var(--m-text-alpha));
    text-align: center;
    margin-right: 0.0625rem;
    margin-left: 0.0625rem;
    padding-top: 0.25rem;
    padding-bottom: 0.2rem;
    margin-top: -0.25rem;
    font-family: consolas,"Courier New", Courier, monospace;
    font-weight: 600;
    font-size: .9rem;
    flex-grow: 1;
    width: 25%
}
.product-card .countdown-timer div:first-child {
    border-radius: .35rem 0 0 .35rem
}
.product-card .countdown-timer div:last-child {
    border-radius: 0 .35rem .35rem 0
}
.product-card:hover {
    box-shadow: 0 3px 5px rgba(0,0,0,0.07), 0 0 0 2px rgba(var(--m-color-invert), 1) inset
}
.product-card .image-area .image {
    display: block;
    width: 100%;
    aspect-ratio: 2/3;
    object-fit: cover;
    border-radius: 0.375rem;
    background: rgba(var(--m-color-bodylight-d-2), 1)
}
.product-card .image-area .region {
    display: block;
    position: absolute;
    z-index: 1;
    left: 1rem;
    top: 1rem;
    width: 2rem;
    height: auto
}
.product-card .image-area .icon {
    display: block;
    position: absolute;
    z-index: 1;
    left: 3rem;
    top: 1rem;
    width: 2rem;
    height: auto
}
.product-card .product-title {
    padding: .5rem;
    text-align: center;
    font-size: .8rem
}
.product-card .info {
    font-size: 0.6rem;
    --m-text-alpha: 1;
    color: rgba(var(--m-color-white),var(--m-text-alpha));
    border-radius: 0.25rem;
    display: inline-block;
    -ms-display: inline-block;
    padding-right: 0.375rem;
    padding-left: 0.375rem;
    padding-top: 0.125rem;
    padding-bottom: 0.1rem
}
.product-card .details {
    display: flex;
    flex-direction: column;
    flex-grow: 1
}
.product-card .pricing {
    /*direction: ltr;*/
    font-weight: 700;
    margin-top: auto
}
.product-card .pricing span {
    font-size: .6rem;
    vertical-align: middle;
    padding-top: .1rem;
    margin-left: .1rem;
    display: inline-block
}
.product-card .pricing .old {
    opacity: .4;
    font-size: .75rem;
    position: relative;
    font-weight: 400
}
.product-card .pricing .old::before {
    content: "";
    position: absolute;
    top: 40%;
    left: 0;
    right: 0;
    height: 2px;
    background: rgba(var(--m-color-invert), 1)
}
.news-card {
    border: 2px solid rgba(var(--m-color-bodylight), 1);
    padding: .25rem;
    border-radius: .75rem;
    display: block;
    padding-bottom: .5rem;
    transition-duration: 250ms;
    -webkit-transition-duration: 250ms;
    -o-transition-duration: 250ms
}
[m-theme="dark"] .news-card:hover {
    --m-border-alpha: 1;
    border-color: rgba(var(--m-color-bodylight-l-5),var(--m-border-alpha))
}
.news-card .image {
    width: 100%;
    height: auto;
    aspect-ratio: 4/3;
    object-fit: cover;
    border-radius: .5rem;
    display: block;
    margin-bottom: .5rem
}
.news-card .news-title {
    line-height: 1.6rem;
    font-size: .9rem;
    padding: 0 .5rem;
    display: block;
    max-height: 3.2rem;
    overflow: hidden
}
.news-card .image-area {
    position: relative
}
.news-card .category {
    position: absolute;
    top: .5rem;
    right: .5rem;
    background: rgba(var(--m-color-primary), 1);
    color: #fff;
    padding: .15rem .5rem .25rem;
    font-size: .8rem;
    border-radius: .3rem
}
.news-card:hover {
    --m-border-alpha: 1;
    border-color: rgba(var(--m-color-bodylight-d-5),var(--m-border-alpha))
}
#home-categories {
    margin-bottom: 5rem
}
@media only screen and (max-width: 575.98px)  {
    #home-categories {
        margin-bottom: 3rem
    }
}
#home-categories .swiper {
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-bodylight),var(--m-bg-alpha));
    border-radius: 1rem
}
#home-categories .swiper-slide {
    padding: 2rem 1rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 0.25s ease;
    font-size: .9rem
}
#home-categories .swiper-slide:hover {
    opacity: 1
}
#home-categories .swiper-slide:hover div, #home-categories .swiper-slide:hover img {
    opacity: 1 !important;
    filter: grayscale(0%) !important
}
#home-categories .swiper-slide:not(:last-child) {
    border-left: 1px solid rgba(var(--m-color-body), 1)
}
#home-categories .swiper-slide div {
    transition: all 0.25s ease;
    opacity: .5
}
#home-categories .swiper-slide img {
    filter: grayscale(100%);
    max-width: 100%;
    height: auto;
    width: 4rem;
    transition: all 0.25s ease;
    margin-bottom: 1rem;
    opacity: .5
}
[m-theme="dark"] #home-categories .swiper-slide img {
    opacity: .9
}
[m-theme="dark"] #home-categories .swiper-slide img.dark-invert {
    opacity: .5;
    filter: grayscale(100%) invert(100%)
}
@media only screen and (min-width: 992px)  {
    #home-categories .swiper-slide {
        width: 11.11111111%
    }
}
@media only screen and (max-width: 575.98px)  {
    #home-categories .swiper-slide {
        width: 40% !important
    }
}
@media only screen and (max-width: 991.98px)  {
    #home-categories .swiper-slide {
        width: 8.5rem
    }
}
[dir=ltr] .news-card .category {
    right: auto;
    left: .5rem
}
[dir=ltr] #home-categories .swiper-slide:not(:last-child) {
    border-left: none;
    border-right: 1px solid rgba(var(--m-color-body), 1)
}
[dir=ltr] #home-slider .next-button, [dir=ltr] #home-slider .prev-button {
    left: auto;
    right: 4.5%;
    transform: translateY(-50%) rotateY(180deg)
}
[dir=ltr] #home-slider .next-button.prev-button, [dir=ltr] #home-slider .prev-button.prev-button {
    left: 4.5%;
    right: auto;
    transform: translateY(-50%)
}
@media only screen and (max-width: 767.98px)  {
    [dir=ltr] #home-slider .slider-item {
        margin-left: -10%
    }
}
[dir=ltr] #home-slider .slider-item.next {
    margin-left: 34%;
    margin-right: 0
}
@media only screen and (max-width: 767.98px)  {
    [dir=ltr] #home-slider .slider-item.next {
        margin-right: 0;
        margin-left: 95%
    }
}
[dir=ltr] #home-slider .slider-item.current {
    margin-left: 7%;
    margin-right: 0
}
@media only screen and (max-width: 767.98px)  {
    [dir=ltr] #home-slider .slider-item.current {
        margin-left: 0;
        margin-right: 0
    }
}
[dir=ltr] #home-slider .slider-item.next-preview {
    margin-right: 0;
    margin-left: 5%
}
@media only screen and (max-width: 767.98px)  {
    [dir=ltr] #home-slider .slider-item.next-preview {
        margin-left: -5%
    }
}
[dir=ltr] #home-slider .slider-item.prev-preview {
    margin-left: 13%;
    margin-right: 0
}
@media only screen and (max-width: 767.98px)  {
    [dir=ltr] #home-slider .slider-item.prev-preview {
        margin-left: 5%;
        margin-right: 0
    }
}
[dir=ltr] #home-slider .buttons .prev {
    transform: rotateY(0deg)
}
[dir=ltr] #home-slider .buttons .next {
    transform: rotateY(180deg)
}
[dir=ltr] .products-list-slides .prev {
    transform: rotateY(0deg)
}
[dir=ltr] .products-list-slides .next {
    transform: rotateY(180deg)
}
@media only screen and (max-width: 575.98px)  {
    [dir=ltr] .products-list-slides .next {
        left: 10%;
        right: auto;
        transform: translateY(-50%)
    }
}
@media only screen and (max-width: 575.98px)  {
    [dir=ltr] .products-list-slides .prev {
        right: 10%;
        left: auto;
        transform: rotateY(180deg) translateY(-50%) !important
    }
}
@media only screen and (max-width: 575.98px)  {
    [dir=ltr] .products-list-slides .swiper-slide {
        width: 42.682%;
        margin-left: 0;
        margin-right: 3.658%
    }
}
@media only screen and (min-width: 576px)  {
    [dir=ltr] .products-list-slides .swiper-slide {
        width: 31.32%;
        margin-left: 0;
        margin-right: 3.89%
    }
}
@media only screen and (min-width: 768px)  {
    [dir=ltr] .products-list-slides .swiper-slide {
        width: 22.64%;
        margin-left: 0;
        margin-right: 3.144%
    }
}
@media only screen and (min-width: 992px)  {
    [dir=ltr] .products-list-slides .swiper-slide {
        width: 15.165%;
        margin-left: 0;
        margin-right: 1.784%
    }
}
option {
    color: #1b1b1b
}
#breadcrumb {
    padding-top: 2rem;
    padding-bottom: 2.25rem
}
@media only screen and (max-width: 575.98px)  {
    #breadcrumb .container {
        padding: 0
    }
    #breadcrumb .container ol {
        padding: 0 1.5rem
    }
}
#breadcrumb ol {
    list-style: none;
    display: flex
}
#breadcrumb li {
    padding-left: .5rem;
    position: relative;
    white-space: nowrap;
    opacity: .75
}
#breadcrumb li::after {
    content: "/";
    width: 1rem;
    height: 1rem;
    background-size: auto 50%;
    transform: rotate(180deg);
    margin-right: .5rem;
    opacity: .5
}
#breadcrumb li a {
    transition-duration: 250ms;
    -webkit-transition-duration: 250ms;
    -o-transition-duration: 250ms
}
#breadcrumb li a:hover {
    --m-text-alpha: 1;
    color: rgba(var(--m-color-primary),var(--m-text-alpha))
}
#breadcrumb li:last-child {
    padding-left: 1.5rem;
    opacity: 1
}
#breadcrumb li:last-child::after {
    display: none
}
#breadcrumb ::-webkit-scrollbar {
    height: 0rem !important
}
@media only screen and (max-width: 575.98px)  {
    #breadcrumb {
        padding-top: 1rem;
        padding-bottom: 1.25rem
    }
}
.tips-text {
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-primary),var(--m-bg-alpha));
    --m-bg-alpha: 0.1;
    font-size: 0.8rem;
    padding: 1rem;
    border-radius: 0.625rem;
    margin-top: 0.5rem;
    font-family: Shabnam
}
@media only screen and (min-width: 992px)  {
    .tips-text {
        margin-left: 5rem
    }
}
.bell,  .bell-border,  .btn-bell {
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}
.bell {
    height: .8rem;
    width: .8rem;
    background: rgba(var(--m-color-primary), 1);
    animation-name: col;
    animation-duration: 2s;
    animation-iteration-count: infinite
}
.bell-border {
    height: .8rem;
    width: .8rem;
    border: 1px solid rgba(var(--m-color-primary), 1) !important;
    animation-name: bord-pop;
    animation-duration: 2s;
    animation-iteration-count: infinite
}
.btn-bell {
    background: white;
    color: rgba(var(--m-color-primary), 1);
    box-shadow: 0 0 0 2px rgba(var(--m-color-primary), 1), 0 0 0 1px rgba(var(--m-color-primary), 1) inset;
    font-size: 1rem;
    border-radius: 50%;
    animation-name: bell-ring;
    animation-duration: 2s;
    animation-iteration-count: infinite
}
@media only screen and (max-width: 575.98px)  {
    .btn-bell {
        font-size: 1.2rem
    }
}
.stock-selector {
    align-items: center;
    display: flex;
    -ms-display: flex;
    --m-box-start:flex-start;
    --m-box-end:flex-end;
    gap: 0.25rem;
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-bodylight),var(--m-bg-alpha));
    padding-top: 0.25rem;
    padding-bottom: 0.275rem;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
    direction: ltr;
    font-family: sans-serif;
    border-radius: .3rem
}
.stock-selector >* {
    opacity: .5
}
.stock-selector input {
    width: 1.25rem;
    text-align: center;
    background: none;
    font-size: .75rem;
    color: rgba(var(--m-color-invert), 1);
    padding-bottom: .075rem
}
.stock-selector input::-webkit-outer-spin-button, .stock-selector input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0
}
.stock-selector input[type=number] {
    -moz-appearance: textfield
}
.stock-selector .decrease {
    font-size: 1.1rem;
    margin-top: -0.1875rem;
    padding-right: 0.05rem;
    padding-left: 0.05rem
}
.stock-selector .increase, .stock-selector .decrease {
    cursor: pointer;
    user-select: none
}
.stock-selector .increase:hover, .stock-selector .decrease:hover {
    opacity: .7
}
#product {
    padding-bottom: 5rem
}
@media only screen and (max-width: 575.98px)  {
    #product {
        padding-bottom: 3rem
    }
}
#product .product-image {
    width: 12rem;
    min-width: 12rem;
    aspect-ratio: 2/3;
    object-fit: cover;
    border-radius: .65rem
}
#product .product-title {
    font-size: 1.8rem;
    margin-bottom: 0.5rem
}
@media only screen and (max-width: 767.98px)  {
    #product .product-title {
        font-size: 1.3rem
    }
}
#product .product-details {
    display: flex;
    -ms-display: flex;
    --m-box-start:flex-start;
    --m-box-end:flex-end;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 1rem
}
#product .like {
    cursor: pointer;
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-primary),var(--m-bg-alpha));
    --m-text-alpha: 1;
    color: rgba(var(--m-color-white),var(--m-text-alpha));
    border-radius: 9999px;
    font-size: 0.8rem;
    display: flex;
    -ms-display: flex;
    --m-box-start:flex-start;
    --m-box-end:flex-end;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    transition-duration: 250ms;
    -webkit-transition-duration: 250ms;
    -o-transition-duration: 250ms
}
#product .like:hover {
    box-shadow: 0 0 0 3px rgba(128, 128, 128, .25)
}
#product .like svg {
    width: 1rem;
    height: 1rem
}
#product .like svg path {
    fill: #fff
}
#product .compare {
    cursor: pointer;
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-green),var(--m-bg-alpha));
    --m-text-alpha: 1;
    color: rgba(var(--m-color-white),var(--m-text-alpha));
    border-radius: 9999px;
    font-size: 0.8rem;
    display: flex;
    -ms-display: flex;
    --m-box-start:flex-start;
    --m-box-end:flex-end;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    transition-duration: 250ms;
    -webkit-transition-duration: 250ms;
    -o-transition-duration: 250ms
}
#product .compare:hover {
    box-shadow: 0 0 0 3px rgba(128, 128, 128, .25)
}
#product .compare svg {
    width: 1rem;
    height: 1rem
}
#product .compare svg path {
    fill: #fff
}
#product .share {
    cursor: pointer;
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-blue),var(--m-bg-alpha));
    --m-text-alpha: 1;
    color: rgba(var(--m-color-white),var(--m-text-alpha));
    border-radius: 9999px;
    font-size: 0.8rem;
    display: flex;
    -ms-display: flex;
    --m-box-start:flex-start;
    --m-box-end:flex-end;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    transition-duration: 250ms;
    -webkit-transition-duration: 250ms;
    -o-transition-duration: 250ms;
    margin-left: 0.5rem
}
#product .share:hover {
    box-shadow: 0 0 0 3px rgba(128, 128, 128, .25)
}
#product .share i {
    margin-left: -0.0875rem
}
#product .share svg {
    width: 1rem;
    height: 1rem
}
#product .share svg path {
    fill: #fff
}
#product .info {
    font-size: 0.9rem;
    margin-right: 0.5rem;
    margin-left: 0.5rem
}
#product .info .t, #product .info .d {
    display: inline-block
}
#product .info .t {
    opacity: .7;
    margin: .2rem 0
}
#product .info .d {
    --m-text-alpha: 1;
    color: rgba(var(--m-color-primary),var(--m-text-alpha))
}
#product .product-offer {
    box-shadow: 0 .1rem .6rem rgba(128, 128, 128, .2);
    border-radius: .75rem;
    padding: 1.25rem;
    text-align: center;
    display: flex;
    flex-direction: column
}
#product .product-offer .old {
    position: relative;
    opacity: .4
}
#product .product-offer .old::before {
    content: "";
    position: absolute;
    top: 44%;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(var(--m-color-invert), 1)
}
#product .product-offer .button-primary {
    font-size: 1.1rem;
    padding: 1rem 0 1.1rem;
    border-radius: .6rem
}
#product .product-offer .button-primary i {
    font-size: 1rem;
    margin-bottom: .05rem
}
#product .countdown-timer {
    display: inline-block;
    direction: ltr;
    vertical-align: middle
}
#product .countdown-timer * {
    display: inline-block;
    margin-left: -.15rem
}
#product .countdown-timer *:not(:last-child)::after {
    content: ":";
    margin-left: .05rem
}
#product .enabling-form {
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-bodylight),var(--m-bg-alpha));
    --m-bg-alpha: 0.5;
    padding-top: 3rem;
    padding-bottom: 3rem
}
@media only screen and (min-width: 768px)  {
    #product .enabling-form .grid {
        gap: 1.5rem
    }
}
#product .enabling-form .grid div {
    display: flex;
    gap: 1rem
}
#product .enabling-form .grid label {
    padding-top: 0.3125rem;
    padding-bottom: 0.3125rem;
    min-width: 3.5rem;
    display: block
}
@media only screen and (min-width: 576px)  {
    #product .enabling-form .grid label {
        font-size: 1.1rem
    }
}
#product .enabling-form .grid input, #product .enabling-form .grid textarea {
    flex-grow: 1;
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-body),var(--m-bg-alpha));
    border-radius: 0.5rem;
    padding-right: 1rem;
    padding-left: 1rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    --m-shadow-color: 0, 0, 0;
    --m-shadow-alpha: 0.05;
    box-shadow: 0 1px 1px rgba(var(--m-shadow-color), var(--m-shadow-alpha)),0 2px 2px rgba(var(--m-shadow-color), var(--m-shadow-alpha));
    -webkit-box-shadow: 0 1px 1px rgba(var(--m-shadow-color), var(--m-shadow-alpha)),0 2px 2px rgba(var(--m-shadow-color), var(--m-shadow-alpha));
    --m-text-alpha: 1;
    color: rgba(var(--m-color-invert),var(--m-text-alpha))
}
#product .enabling-form .button-selector .button {
    padding-right: 1rem;
    padding-left: 1rem;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
    margin-top: auto;
    margin-bottom: auto;
    cursor: pointer
}
#product .enabling-form .button-selector .button.active {
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-primary),var(--m-bg-alpha))
}
#product .enabling-form .button-selector .button:not(.active) {
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-body),var(--m-bg-alpha));
    --m-text-alpha: 1;
    color: rgba(var(--m-color-invert),var(--m-text-alpha));
    box-shadow: 0 3px 8px rgba(128,128,128,.15)
}
#product .icon-list {
    cursor: pointer;
    opacity: 1
}
@media only screen and (min-width: 576px)  {
    #product .icon-list {
        font-size: 1.25rem
    }
}
#product .icon-list.active {
    opacity: 0.5
}
#product .icon-grid {
    display: grid;
    -ms-display: grid;
    --m-box-start: start;
    --m-box-end: end;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.125rem;
    cursor: pointer;
    opacity: 1
}
#product .icon-grid.active {
    opacity: 0.5
}
#product .icon-grid div {
    width: 0.5625rem;
    height: 0.5625rem;
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-invert),var(--m-bg-alpha));
    border-radius: 0.1875rem
}
@media only screen and (max-width: 575.98px)  {
    #product .icon-grid div {
        width: 0.4375rem;
        height: 0.4375rem
    }
}
@media only screen and (max-width: 575.98px)  {
    #product .icon-grid {
        width: 1rem
    }
}
#product .product-tabs {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem
}
@media only screen and (max-width: 575.98px)  {
    #product .product-tabs {
        font-size: 1rem
    }
}
#product .product-tabs .tab-button {
    padding: 1.5rem 2rem;
    transition-duration: 250ms;
    -webkit-transition-duration: 250ms;
    -o-transition-duration: 250ms;
    font-weight: bold
}
@media only screen and (max-width: 575.98px)  {
    #product .product-tabs .tab-button {
        padding: 1rem 1rem
    }
}
#product .product-tabs .tab-button.tab-active {
    --m-text-alpha: 1;
    color: rgba(var(--m-color-primary),var(--m-text-alpha));
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-bodylight),var(--m-bg-alpha));
    --m-bg-alpha: 0.5;
    border-radius: 1rem 1rem 0 0
}
#product .questions, #product .comments {
    position: relative
}
#product .questions .question, #product .comments .question {
    border: 1px solid rgba(var(--m-color-bodylight), 1);
    padding: 1rem;
    border-radius: .5rem;
    margin-bottom: 1rem
}
#product .questions .question .answer, #product .comments .question .answer {
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-bodylight),var(--m-bg-alpha));
    padding: 1rem;
    border-radius: 0.5rem;
    --m-bg-alpha: 0.5;
    margin-top: 1rem
}
#product .questions .question .answer.accepted-answer, #product .comments .question .answer.accepted-answer {
    border-width: 2px;
    --m-border-alpha: 1;
    border-color: rgba(var(--m-color-green),var(--m-border-alpha))
}
#product .questions .pagination, #product .comments .pagination {
    display: flex;
    gap: .5rem;
    padding-top: 2rem
}
#product .questions .pagination a, #product .comments .pagination a {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: rgba(128, 128, 128, .2);
    display: flex;
    align-items: center;
    justify-content: center
}
#product .questions .pagination a.current, #product .comments .pagination a.current {
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-primary),var(--m-bg-alpha));
    --m-text-alpha: 1;
    color: rgba(var(--m-color-white),var(--m-text-alpha))
}
#product .questions .stars, #product .comments .stars {
    display: flex;
    direction: rtl;
    transform: rotateY(180deg);
    justify-content: end;
    margin-bottom: .5rem;
    margin-top: .2rem;
    color: #ed8a19;
    gap: .05rem
}
#product .questions .ratings, #product .comments .ratings {
    margin-bottom: auto
}
@media only screen and (min-width: 768px)  {
    #product .questions .ratings, #product .comments .ratings {
        position: sticky;
        top: 5rem
    }
}
@media only screen and (min-width: 992px)  {
    #product .questions .ratings, #product .comments .ratings {
        top: 1.5rem
    }
}
#product .questions .ratings ul, #product .comments .ratings ul {
    padding-top: 1rem
}
#product .questions .ratings li, #product .comments .ratings li {
    padding-top: .75rem
}
#product .questions .grade, #product .comments .grade {
    display: flex;
    align-items: center;
    margin-top: .25rem;
    font-size: 1rem
}
#product .questions .grade .bar, #product .comments .grade .bar {
    flex-grow: 1;
    height: .5rem;
    border-radius: 99rem;
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-bodylight),var(--m-bg-alpha));
    --m-bg-alpha: 0.5;
    overflow: hidden
}
#product .questions .grade .bar div, #product .comments .grade .bar div {
    background: rgba(var(--m-color-primary), 1);
    border-radius: 99rem;
    height: 100%
}
#product .questions .grade div:nth-child(2), #product .comments .grade div:nth-child(2) {
    width: 2rem;
    min-width: 2rem;
    text-align: end
}
#product .questions .comment, #product .comments .comment {
    border-bottom: 2px solid rgba(128,128,128,.4);
    padding-bottom: .85rem;
    padding-top: 1rem
}
#product .questions .comment .comment-head, #product .comments .comment .comment-head {
    border-bottom: 2px solid rgba(128,128,128,.1)
}
#product .questions .comment .comment-title, #product .comments .comment .comment-title {
    display: flex;
    font-size: 1.2rem;
    gap: 0.75rem;
    padding-bottom: .75rem
}
#product .questions .comment .comment-title .comment-rating, #product .comments .comment .comment-title .comment-rating {
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-primary),var(--m-bg-alpha));
    --m-text-alpha: 1;
    color: rgba(var(--m-color-white),var(--m-text-alpha));
    width: 3rem;
    min-width: 3rem;
    text-align: center;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    border-radius: 0.625rem;
    font-size: 1rem;
    margin-bottom: auto
}
#product .questions .comment .comment-title .comment-rating.green, #product .comments .comment .comment-title .comment-rating.green {
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-green),var(--m-bg-alpha))
}
#product .questions .comment .comment-title .comment-rating.orange, #product .comments .comment .comment-title .comment-rating.orange {
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-orange),var(--m-bg-alpha))
}
#product .questions .comment .comment-title .comment-rating.gray, #product .comments .comment .comment-title .comment-rating.gray {
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-invert),var(--m-bg-alpha));
    --m-bg-alpha: 0.5
}
#product .questions .comment .comment-title .comment-author, #product .comments .comment .comment-title .comment-author {
    margin-top: .5rem;
    display: flex;
    font-size: .8rem;
    gap: .75rem;
    align-items: center;
    --m-text-alpha: 1;
    color: rgba(var(--m-color-invert),var(--m-text-alpha));
    --m-text-alpha: 0.5
}
#product .questions .comment .comment-title .comment-author .dot, #product .comments .comment .comment-title .comment-author .dot {
    width: .25rem;
    height: .25rem;
    border-radius: 50%;
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-primary),var(--m-bg-alpha));
    margin-right: -0.25rem;
    margin-left: -0.25rem
}
#product .questions .comment .comment-title .comment-author .user-type, #product .comments .comment .comment-title .comment-author .user-type {
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-invert),var(--m-bg-alpha));
    --m-bg-alpha: 0.1;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
    border-radius: 9999px
}
#product .questions .comment .comment-title .comment-author .user-type.bought, #product .comments .comment .comment-title .comment-author .user-type.bought {
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-green),var(--m-bg-alpha));
    --m-bg-alpha: 0.1;
    --m-text-alpha: 1;
    color: rgba(var(--m-color-green),var(--m-text-alpha));
    padding-right: 0.75rem;
    padding-left: 0.75rem
}
#product .questions .comment .pros, #product .questions .comment .cons, #product .comments .comment .pros, #product .comments .comment .cons {
    --m-text-alpha: 1;
    color: rgba(var(--m-color-invert),var(--m-text-alpha));
    --m-text-alpha: 0.7000000000000001;
    margin-top: 0.5rem
}
#product .questions .comment .pros li::before, #product .comments .comment .pros li::before {
    content: "+";
    margin-inline-end: .5rem;
    font-weight: 700;
    font-size: 1.1rem;
    --m-text-alpha: 1;
    color: rgba(var(--m-color-green),var(--m-text-alpha))
}
#product .questions .comment .cons li::before, #product .comments .comment .cons li::before {
    content: "-";
    margin-inline-end: .5rem;
    font-weight: 700;
    font-size: 1.1rem;
    --m-text-alpha: 1;
    color: rgba(var(--m-color-orange),var(--m-text-alpha))
}
#product .questions .comment .text, #product .comments .comment .text {
    padding-top: .75rem
}
#product .questions .comment .agreement, #product .comments .comment .agreement {
    font-size: .9rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .75rem 0 0;
    margin-bottom: -.2rem;
    --m-text-alpha: 1;
    color: rgba(var(--m-color-invert),var(--m-text-alpha));
    --m-text-alpha: 0.5
}
#product .questions .comment .agreement.agree, #product .comments .comment .agreement.agree {
    --m-text-alpha: 1;
    color: rgba(var(--m-color-green),var(--m-text-alpha))
}
#product .questions .comment .agreement.disagree, #product .comments .comment .agreement.disagree {
    --m-text-alpha: 1;
    color: rgba(var(--m-color-orange),var(--m-text-alpha))
}
#product .questions .comment .agreement svg, #product .comments .comment .agreement svg {
    width: 0.875rem
}
#product .product-tabs-info {
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-bodylight),var(--m-bg-alpha));
    --m-bg-alpha: 0.5;
    padding-top: 3rem;
    padding-bottom: 3rem;
    margin-bottom: 4rem
}
#product .product-tabs-info table {
    width: 100%;
    overflow: hidden;
    font-size: 1rem
}

#product .product-tabs-info a {
    color:blue !important;
}

#product .product-tabs-info table .title-attribute {
    --m-text-alpha: 1;
    color: rgba(var(--m-color-white),var(--m-text-alpha));
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-invert),var(--m-bg-alpha));
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    font-size: 1.1500000000000001rem;
    font-weight: 500
}
[m-theme="dark"] #product .product-tabs-info table .title-attribute {
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-primary),var(--m-bg-alpha));
    --m-bg-alpha: 0.2
}
#product .product-tabs-info table td {
    padding: .6rem 1rem
}
#product .product-tabs-info table tr:nth-child(even) {
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-bodylight),var(--m-bg-alpha));
    --m-bg-alpha: 0.4
}
[m-theme="dark"] #product .product-tabs-info table tr:nth-child(even) {
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-bodylight),var(--m-bg-alpha));
    --m-bg-alpha: 0.25
}
@media only screen and (max-width: 575.98px)  {
    #product .product-tabs-info table {
        font-size: 0.9rem
    }
}
@media only screen and (max-width: 575.98px)  {
    #product .product-tabs-info {
        margin-bottom: 2.5rem
    }
}
@media only screen and (max-width: 575.98px)  {
    #product .product-tabs-info {
        padding-top: 2rem;
        padding-bottom: 2rem
    }
}
#product .images-grid .image-preview {
    position: relative;
    cursor: pointer
}
#product .images-grid .image-preview .cover {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    border-radius: .75rem;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center
}
#product .images-grid .image-preview .cover.cover-white {
    background: rgba(255,255,255,0.75);
    backdrop-filter: blur(6px)
}
#product .images-grid .image-preview .cover .icon {
    color: #fff;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.2rem;
    padding-left: .2rem;
    overflow: hidden;
    position: relative;
    background: linear-gradient(to bottom left, rgba(var(--m-color-primary), 1) 50%, rgba(var(--m-color-primary-l-3), 1) 50%)
}
#product .images-grid .image-preview .cover .icon i {
    position: relative;
    z-index: 2
}
#product .images-grid .image-preview .cover .icon::before {
    content: "";
    background: rgba(0,0,0,0.1);
    width: 0;
    height: 0;
    top: 50%;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    z-index: 1;
    opacity: 0;
    transform: translate(-50%, -50%);
    transition-duration: 300ms;
    -webkit-transition-duration: 300ms;
    -o-transition-duration: 300ms
}
#product .images-grid .image-preview .cover .icon::after {
    content: "";
    border-top: 1.2rem solid rgba(var(--m-color-primary-d-3), 1);
    border-right: 1rem solid transparent;
    border-left: 1rem solid transparent;
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: top left;
    transform: rotate(45deg)
}
#product .images-grid .image-preview .cover:hover .icon::before {
    opacity: 1;
    width: 105%;
    height: 105%
}
#product .images-grid .image-preview img {
    width: 100%;
    aspect-ratio: 1/1;
    border-radius: .75rem;
    --m-shadow-color: 0, 0, 0;
    --m-shadow-alpha: 0.05;
    box-shadow: 0 1px 1px rgba(var(--m-shadow-color), var(--m-shadow-alpha)),0 2px 2px rgba(var(--m-shadow-color), var(--m-shadow-alpha));
    -webkit-box-shadow: 0 1px 1px rgba(var(--m-shadow-color), var(--m-shadow-alpha)),0 2px 2px rgba(var(--m-shadow-color), var(--m-shadow-alpha));
    object-fit: cover;
    display: block
}
#image-video-modal {
    position: fixed;
    z-index: 111;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all .4s ease;
    padding: 1rem
}
#image-video-modal.active {
    opacity: 1;
    visibility: visible
}
#image-video-modal .cover {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
    padding: 1.25rem 1.5rem;
    color: #fff;
    font-size: 2rem
}
#image-video-modal .cover i {
    cursor: pointer
}
#image-video-modal .next, #image-video-modal .prev {
    font-size: 4rem;
    color: #fff;
    cursor: pointer
}
#image-video-modal .next.swiper-button-disabled, #image-video-modal .prev.swiper-button-disabled {
    opacity: .5
}
@media only screen and (max-width: 991.98px)  {
    #image-video-modal .next, #image-video-modal .prev {
        margin-right: auto;
        margin-left: auto
    }
}
@media only screen and (min-width: 992px)  {
    #image-video-modal .next, #image-video-modal .prev {
        margin-right: 1rem;
        margin-left: 1rem
    }
}
#image-video-modal .swiper {
    max-width: 80%;
    max-height: 80%;
    width: auto;
    height: auto;
    --m-shadow-color: 0, 0, 0;
    --m-shadow-alpha: 0.05;
    box-shadow: 0 1px 1px rgba(var(--m-shadow-color), var(--m-shadow-alpha)),0 2px 2px rgba(var(--m-shadow-color), var(--m-shadow-alpha));
    -webkit-box-shadow: 0 1px 1px rgba(var(--m-shadow-color), var(--m-shadow-alpha)),0 2px 2px rgba(var(--m-shadow-color), var(--m-shadow-alpha));
    user-select: none
}
#image-video-modal .swiper .swiper-slide {
    margin-top: auto;
    margin-bottom: auto
}
#image-video-modal .swiper img, #image-video-modal .swiper video {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: .75rem;
    display: block
}
@media only screen and (min-width: 992px)  {
    #image-video-modal .swiper {
        max-width: 50rem;
        width: 50rem
    }
}
#image-video-modal .swiper .play-btn {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    border-radius: .75rem;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer
}
#image-video-modal .swiper .play-btn .icon {
    color: #fff;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.2rem;
    padding-left: .2rem;
    overflow: hidden;
    position: relative;
    background: linear-gradient(to bottom left, rgba(var(--m-color-primary), 1) 50%, rgba(var(--m-color-primary-l-3), 1) 50%)
}
#image-video-modal .swiper .play-btn .icon i {
    position: relative;
    z-index: 2
}
#image-video-modal .swiper .play-btn .icon::before {
    content: "";
    background: rgba(0,0,0,0.1);
    width: 0;
    height: 0;
    top: 50%;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    z-index: 1;
    opacity: 0;
    transform: translate(-50%, -50%);
    transition-duration: 300ms;
    -webkit-transition-duration: 300ms;
    -o-transition-duration: 300ms
}
#image-video-modal .swiper .play-btn .icon::after {
    content: "";
    border-top: 1.2rem solid rgba(var(--m-color-primary-d-3), 1);
    border-right: 1rem solid transparent;
    border-left: 1rem solid transparent;
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: top left;
    transform: rotate(45deg)
}
#image-video-modal .swiper .play-btn:hover .icon::before {
    opacity: 1;
    width: 105%;
    height: 105%
}
.related {
    margin-bottom: 4rem
}
.related .info {
    font-size: 0.7000000000000001rem !important;
    --m-text-alpha: 1;
    color: rgba(var(--m-color-white),var(--m-text-alpha));
    border-radius: 0.25rem;
    display: inline-block;
    -ms-display: inline-block;
    padding-right: 0.375rem;
    padding-left: 0.375rem;
    padding-top: 0.125rem;
    padding-bottom: 0.1rem;
    margin-right: 0rem !important;
    margin-left: 0rem !important
}
.related.related-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    grid-gap: 1rem;
    --m-box-start: start;
    --m-box-end: end;
    grid-template-columns: repeat(2, minmax(0, 1fr))
}
.related.related-grid.d-flex {
    display: flex
}
.related.related-grid .related-card {
    box-shadow: 0 .075rem .3rem rgba(128,128,128,.2);
    border-radius: .65rem;
    padding: 1rem
}
.related.related-grid .points {
    padding-top: 0.25rem;
    display: flex;
    -ms-display: flex;
    --m-box-start:flex-start;
    --m-box-end:flex-end;
    gap: 0.5rem;
    font-size: 0.8rem;
    opacity: 0.4
}
@media only screen and (max-width: 575.98px)  {
    .related.related-grid .points {
        justify-content: center;
        font-size: 0.7000000000000001rem
    }
}
.related.related-grid .related-title {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: .5rem;
    font-size: .9rem
}
@media only screen and (max-width: 575.98px)  {
    .related.related-grid .related-title {
        flex-direction: column;
        text-align: center;
        margin-bottom: 0.5rem
    }
    .related.related-grid .related-title .title-area {
        width: 100%
    }
}
.related.related-grid .related-title img {
    width: 3.9rem;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: .5rem
}
.related.related-grid .price-area {
    margin-bottom: .75rem
}
@media only screen and (min-width: 992px)  {
    .related.related-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr))
    }
}
.related.related-list {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    grid-gap: 1rem;
    --m-box-start: start;
    --m-box-end: end;
    grid-template-columns: repeat(1, minmax(0, 1fr))
}
.related.related-list .related-card {
    box-shadow: 0 .075rem .3rem rgba(128,128,128,.2);
    border-radius: .65rem;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem
}
@media only screen and (max-width: 575.98px)  {
    .related.related-list .related-card {
        flex-wrap: wrap
    }
}
.related.related-list .points {
    padding-top: 0.25rem;
    display: flex;
    -ms-display: flex;
    --m-box-start:flex-start;
    --m-box-end:flex-end;
    gap: 0.5rem;
    font-size: 0.8rem;
    opacity: 0.4
}
@media only screen and (max-width: 575.98px)  {
    .related.related-list .points {
        justify-content: center;
        font-size: 0.7000000000000001rem
    }
}
.related.related-list .related-title {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    font-size: .9rem;
    margin-left: auto
}
@media only screen and (max-width: 575.98px)  {
    .related.related-list .related-title {
        width: 100%
    }
}
.related.related-list .related-title img {
    width: 3.9rem;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: .5rem
}
.related.related-list .button-primary {
    width: auto
}
@media only screen and (max-width: 575.98px)  {
    .related.related-list .button-primary {
        width: 40%
    }
}
.related.related-list .price-area {
    gap: 1rem;
    flex-direction: row-reverse;
    margin-bottom: 0 !important
}
@media only screen and (max-width: 575.98px)  {
    .related.related-list .price-area {
        width: 54%
    }
    .related.related-list .price-area .pricing {
        text-align: right !important
    }
}
.related .price-area {
    display: flex;
    -ms-display: flex;
    --m-box-start:flex-start;
    --m-box-end:flex-end;
    align-items: center;
    justify-content: space-between
}
@media only screen and (max-width: 575.98px)  {
    .related .price-area {
        margin-bottom: .75rem;
        flex-direction: column-reverse;
        gap: 0.5rem
    }
}
.related .button-primary {
    margin-top: auto;
    margin-bottom: auto
}
@media only screen and (max-width: 575.98px)  {
    .related .button-primary {
        font-size: 0.8rem;
        padding-right: 0rem;
        padding-left: 0rem
    }
}
.related .pricing {
    /*direction: ltr;*/
    font-weight: 700
}
.related .pricing span {
    font-size: .6rem;
    vertical-align: middle;
    margin-left: .1rem;
    margin-right: .1rem;
    display: inline-block;
    padding-top: 0.0625rem
}
.related .pricing .old {
    opacity: .4;
    font-size: .75rem;
    position: relative;
    font-weight: 400
}
.related .pricing .old::before {
    content: "";
    position: absolute;
    top: 40%;
    left: 0;
    right: 0;
    height: 2px;
    background: rgba(var(--m-color-invert), 1)
}
@media only screen and (min-width: 992px)  {
    [dir="ltr"] .tips-text {
        margin-left: 0rem;
        margin-right: 5rem
    }
}
[dir="ltr"] #product .share {
    margin-left: 0rem;
    margin-right: 0.5rem
}
[dir="ltr"] #product .comments .stars {
    transform: none
}
[dir="ltr"] #image-video-modal .next, [dir="ltr"] #image-video-modal .prev {
    transform: rotate(180deg)
}
[dir="ltr"] #add-question .cons .icon-plus1, [dir="ltr"] #add-question .pros .icon-plus1, [dir="ltr"] #add-comment .cons .icon-plus1, [dir="ltr"] #add-comment .pros .icon-plus1 {
    left: auto;
    right: 0
}
@media only screen and (max-width: 575.98px)  {
    [dir="ltr"] .related.related-list .price-area .pricing {
        text-align: left !important
    }
}
#add-question,  #add-comment, #add-letmeknow, #add-term, #add-order-cancel, #user-level-modal, #add-order-policy, #add-order-process {
    position: fixed;
    z-index: 111;
    background: rgba(128,128,128,.5);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
    transition-duration: 400ms;
    -webkit-transition-duration: 400ms;
    -o-transition-duration: 400ms
}
#add-question .close-modal.icon-x-2, #add-comment .close-modal.icon-x-2,#add-term .close-modal.icon-x-2, #add-letmeknow .close-modal.icon-x-2, #add-order-cancel .close-modal.icon-x-2, #user-level-modal .close-modal.icon-x-2, #add-order-policy .close-modal.icon-x-2, #add-order-process .close-modal.icon-x-2 {
    cursor: pointer
}
#add-question .cover, #add-comment .cover, #add-letmeknow .cover, #add-term .cover{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1
}
#add-question.active, #add-comment.active, #add-letmeknow.active, #add-term.active, #add-order-cancel.active, #user-level-modal.active, #add-order-policy.active, #add-order-process.active {
    visibility: visible;
    opacity: 1
}
#add-question ::-webkit-scrollbar-track, #add-comment ::-webkit-scrollbar-track, #add-term ::-webkit-scrollbar-track, #add-letmeknow ::-webkit-scrollbar-track {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem
}
#add-question .box, #add-comment .box, #add-letmeknow .box, #add-term .box, #add-order-cancel .box, #user-level-modal .box, #add-order-policy .box, #add-order-process .box   {
    width: 90%;
    max-height: 80%;
    max-width: 38rem;
    overflow: auto;
    padding: 0 2.5rem 2.5rem;
    background: rgba(var(--m-color-body), 1);
    border-radius: .75rem;
    --m-shadow-color: 0, 0, 0;
    --m-shadow-alpha: 0.05;
    box-shadow: 0 1px 1px rgba(var(--m-shadow-color), var(--m-shadow-alpha)),0 2px 2px rgba(var(--m-shadow-color), var(--m-shadow-alpha)),0 4px 4px rgba(var(--m-shadow-color), var(--m-shadow-alpha));
    -webkit-box-shadow: 0 1px 1px rgba(var(--m-shadow-color), var(--m-shadow-alpha)),0 2px 2px rgba(var(--m-shadow-color), var(--m-shadow-alpha)),0 4px 4px rgba(var(--m-shadow-color), var(--m-shadow-alpha))
}
@media only screen and (max-width: 575.98px)  {
    #add-question .box, #add-comment .box, #add-letmeknow .box, #add-term .box, #add-order-cancel .box, #user-level-modal .box, #add-order-policy .box, #add-order-process .box {
        width: 100%;
        height: 100%;
        max-height: 100%;
        padding: 0 1.5rem 1.5rem;
        border-radius: 0
    }
}
#add-question .input, #add-comment .input, #add-letmeknow .input {
    margin-bottom: 1.5rem
}
#add-question textarea, #add-question input, #add-comment textarea, #add-comment input, #add-letmeknow input {
    border: 1px solid rgba(var(--m-color-bodylight), 1);
    padding: .95rem 1.25rem;
    width: 100%;
    border-radius: .5rem;
    font-size: 1rem;
    transition-duration: 250ms;
    -webkit-transition-duration: 250ms;
    -o-transition-duration: 250ms;
    background: none;
    color: rgba(var(--m-color-invert), 1);
    min-width: 100%;
    max-width: 100%
}
#add-question textarea:focus, #add-question input:focus, #add-comment textarea:focus, #add-comment input:focus, #add-letmeknow input:focus {
    border: 1px solid rgba(var(--m-color-bodylight-d-5), 1)
}
#add-question .cons, #add-question .pros, #add-comment .cons, #add-comment .pros {
    position: relative;
    margin-bottom: 1rem
}
#add-question .cons li, #add-question .pros li, #add-comment .cons li, #add-comment .pros li {
    display: flex;
    align-items: center;
    gap: .2rem
}
#add-question .cons .icon-x-2, #add-question .pros .icon-x-2, #add-comment .cons .icon-x-2, #add-comment .pros .icon-x-2 {
    --m-text-alpha: 1;
    color: rgba(var(--m-color-orange),var(--m-text-alpha));
    cursor: pointer
}
#add-question .cons .icon-plus1, #add-question .pros .icon-plus1, #add-comment .cons .icon-plus1, #add-comment .pros .icon-plus1 {
    position: absolute;
    left: 0;
    top: 0;
    padding: 1.15rem;
    font-size: .8rem;
    opacity: .5;
    cursor: pointer
}
#add-question .cons .error, #add-question .pros .error, #add-comment .cons .error, #add-comment .pros .error {
    padding: .5rem 1.25rem 0;
    --m-text-alpha: 1;
    color: rgba(var(--m-color-orange),var(--m-text-alpha));
    font-size: 0.9rem
}
#add-question .sections, #add-comment .sections, #add-letmeknow .sections{
    display: flex;
    width: 100%;
    justify-content: space-between;
    position: relative
}
#add-question .sections::before, #add-comment .sections::before, #add-term .sections::before, #add-letmeknow .sections::before {
    content: "";
    position: absolute;
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-bodylight),var(--m-bg-alpha));
    height: 2px;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    left: 0
}
#add-question .sections div, #add-comment .sections div, #add-term .sections div, #add-letmeknow .sections div {
    width: .3rem;
    height: .3rem;
    border-radius: 5rem;
    transform: rotateY(-50%);
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-bodylight-d-3),var(--m-bg-alpha));
    position: relative;
    z-index: 2
}
[m-theme="dark"] #add-question .sections div, [m-theme="dark"]  #add-comment .sections div {
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-bodylight-l-3),var(--m-bg-alpha))
}
#add-question .ranges, #add-comment .ranges {
    margin-bottom: 1.5rem;
    position: relative;
    user-select: none
}
#add-question .ranges .line, #add-comment .ranges .line {
    height: .5rem;
    background: rgba(var(--m-color-bodylight), 1);
    border-radius: 60px;
    position: relative;
    overflow: hidden
}
#add-question .ranges .line .line-max, #add-comment .ranges .line .line-max {
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-primary),var(--m-bg-alpha));
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0rem;
    top: 0rem
}
#add-question .ranges .line .line-min, #add-comment .ranges .line .line-min {
    width: 0rem;
    height: 100%;
    position: absolute;
    left: 0rem;
    top: 0rem;
    background: #eee
}
#add-question .ranges .min, #add-comment .ranges .min {
    width: 1rem;
    height: 1rem;
    border-radius: 9999px;
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-primary),var(--m-bg-alpha));
    position: absolute;
    left: 0rem;
    top: -0.25rem;
    cursor: pointer
}
#add-question .ranges .max, #add-comment .ranges .max {
    width: 1rem;
    height: 1rem;
    border-radius: 9999px;
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-primary),var(--m-bg-alpha));
    position: absolute;
    left: 100%;
    top: -0.25rem;
    cursor: pointer;
    transform: translateX(-.5rem)
}
#add-question .suggest, #add-comment .suggest {
    border: 2px solid rgba(128,128,128,.2);
    padding: 1rem .5rem;
    gap: .5rem;
    display: flex;
    font-size: .9rem;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-radius: .5rem;
    cursor: pointer
}
#add-question .suggest.active, #add-comment .suggest.active {
    --m-border-alpha: 1;
    border-color: rgba(var(--m-color-primary),var(--m-border-alpha))
}
#add-question .suggest svg, #add-comment .suggest svg {
    width: 2rem;
    display: block;
    opacity: .9
}



.about-product table {
    width: 100%;
    border-radius: .5rem;
    box-shadow: 0 0 0 1px rgba(128,128,128,.2);
    margin: 1rem 0
}
.about-product h1, .about-product h2, .about-product h3, .about-product h4, .about-product h5, .about-product h6 {
    font-weight: 700
}
.about-product h1:not(:first-child), .about-product h2:not(:first-child), .about-product h3:not(:first-child), .about-product h4:not(:first-child), .about-product h5:not(:first-child), .about-product h6:not(:first-child) {
    margin-top: 1rem
}
.about-product blockquote {
    padding: .8rem 1rem;
    margin: 1rem 0;
    border-radius: .5rem;
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-bodylight),var(--m-bg-alpha));
    --m-bg-alpha: 0.25
}
.about-product {
  font-family: Shabnam;
  font-size: 0.85rem;
  line-height: 170%;
}
.about-product img {
    max-width: 100%;
    display: block;
    margin: 1rem auto;
    border-radius: .5rem
}
@keyframes bord-pop {
    0% {
        transform: translate(-50%, -50%)
    }
    50% {
        transform: translate(-50%, -50%) scale(3.5);
        opacity: 0.1
    }
    100% {
        transform: translate(-50%, -50%) scale(3.5);
        opacity: 0
    }
}
@keyframes col {
    0% {
        transform: scale(1.1) translate(-50%, -50%)
    }
    10% {
        transform: scale(1.1) translate(-50%, -50%)
    }
    75% {
        transform: scale(1.1) translate(-50%, -50%)
    }
    100% {
        transform: scale(1.1) translate(-50%, -50%)
    }
}
@keyframes bell-ring {
    0% {
        transform: translate(-50%, -50%)
    }
    5%,  15% {
        transform: translate(-50%, -50%) rotate(25deg)
    }
    10%,  20% {
        transform: translate(-50%, -50%) rotate(-25deg)
    }
    25% {
        transform: translate(-50%, -50%) rotate(0deg)
    }
    100% {
        transform: translate(-50%, -50%) rotate(0deg)
    }
}
@keyframes blink-animation {
    35% {
        opacity: 1
    }
    50% {
        opacity: .5
    }
    65% {
        opacity: 1
    }
}
.blink-animation {
    animation: blink-animation 3s infinite linear
}
.input-group {
    border-radius: 0.625rem;
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-body),var(--m-bg-alpha));
    padding-right: 1rem;
    padding-left: 1rem;
    display: flex;
    -ms-display: flex;
    --m-box-start:flex-start;
    --m-box-end:flex-end;
    align-items: center;
    gap: 0.75rem;
    box-shadow: 0 2px .5rem rgba(128,128,128,.2)
}
.input-group.disabled {
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-bodylight),var(--m-bg-alpha));
    --m-bg-alpha: 0.5
}
.input-group .input-title {
    width: 5.875rem;
    min-width: 5.875rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    border-left-width: 1px;
    border-color: rgba(128,128,128,.15)
}
.input-group textarea, .input-group input {
    background: none;
    border: none;
    color: rgba(var(--m-color-invert), 1);
    height: 100%;
    flex-grow: 1;
    /*width: 0;*/
    position: relative;
    z-index: 80
}
.input-group textarea {
    /*padding: 1rem 0*/
}
.input-group .select {
    background: none !important;
    box-shadow: none;
    margin-right: -1rem;
    margin-left: -1rem;
    flex-grow: 1
}
.input-group .select select {
    font-size: 1rem;
    padding-top: 1.1625rem;
    padding-bottom: 1.1625rem
}
.seo-hidden-h1 {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important
}
#dashboard {
   padding: 2rem 0 !important;
}
@media only screen and (max-width: 575.98px)  {
    #dashboard {
        /*padding: 2rem 0*/
    }
}
#dashboard .dashboard-nav {
    font-size: 1rem
}
@media only screen and (min-width: 992px)  {
    #dashboard .dashboard-nav ul {
        position: sticky;
        top: 1.5rem
    }
    #dashboard .dashboard-nav .mob-dash-menu {
        display: none
    }
}
@media only screen and (max-width: 991.98px)  {
    #dashboard .dashboard-nav .mob-dash-menu {
        font-size: 1rem;
        background: rgba(var(--m-color-body), 1);
        position: fixed;
        z-index: 80;
        right: 0;
        left: 0;
        top: 3.6rem;
        height: 3.5rem;
        display: flex;
        gap: .5rem;
        align-items: center;
        --m-shadow-color: 0, 0, 0;
        --m-shadow-alpha: 0.05;
        box-shadow: 0 1px 1px rgba(var(--m-shadow-color), var(--m-shadow-alpha)),0 2px 2px rgba(var(--m-shadow-color), var(--m-shadow-alpha));
        -webkit-box-shadow: 0 1px 1px rgba(var(--m-shadow-color), var(--m-shadow-alpha)),0 2px 2px rgba(var(--m-shadow-color), var(--m-shadow-alpha));
        padding-right: 1.5rem;
        padding-left: 1.5rem;
        cursor: pointer;
        border: 1px solid rgba(128,128,128,.03)
    }
    #dashboard .dashboard-nav .mob-dash-menu span {
        width: 1.5rem;
        height: 2rem;
        font-size: 2rem;
        overflow: hidden;
        margin-bottom: .5rem;
        margin-left: .5rem;
        display: block;
        margin-top: .2rem
    }
    [m-theme="dark"] #dashboard .dashboard-nav .mob-dash-menu {
        --m-bg-alpha: 1;
        background-color: rgba(var(--m-color-bodylight),var(--m-bg-alpha))
    }
    #dashboard .dashboard-nav ul {
        top: 0;
        position: fixed;
        right: 0rem;
        width: 17rem;
        z-index: 101;
        background: rgba(var(--m-color-body), 1);
        padding: 1.5rem;
        height: 100%;
        overflow: auto;
        transition-duration: 400ms;
        -webkit-transition-duration: 400ms;
        -o-transition-duration: 400ms
    }
    #dashboard .dashboard-nav .cover {
        position: fixed;
        background: rgba(128,128,128,.5);
        backdrop-filter: blur(.5rem);
        width: 100%;
        height: 100%;
        position: fixed;
        left: 0;
        top: 0;
        z-index: 100;
        transition-duration: 400ms;
        -webkit-transition-duration: 400ms;
        -o-transition-duration: 400ms
    }
    #dashboard .dashboard-nav:not(.active) ul {
        right: -18rem
    }
    #dashboard .dashboard-nav:not(.active) .cover {
        opacity: 0;
        visibility: hidden
    }
}
#dashboard .dashboard-nav a {
    display: flex;
    align-items: center;
    gap: .25rem;
    padding: .6rem 1.25rem .7rem;
    border-radius: 999rem
}
#dashboard .dashboard-nav a.active {
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-primary),var(--m-bg-alpha));
    color: #fff;
    box-shadow: 0 0 .4rem rgba(var(--m-color-primary), 1);
    position: relative;
    z-index: 1;
    margin: .5rem 0
}
#dashboard .dashboard-nav a.active::before {
    content: "";
    position: absolute;
    top: -.5rem;
    left: -.5rem;
    right: -.5rem;
    bottom: -.5rem;
    z-index: -1;
    background: linear-gradient(to right, rgba(var(--m-color-body), 1), transparent )
}
#dashboard .dashboard-nav a i {
    width: 1.5rem;
    text-align: center
}
#dashboard .orders-lists-titles {
    white-space: nowrap;
    overflow: auto;
    display: flex;
    gap: 2rem;
    padding: .5rem 0
}
#dashboard .orders-lists-titles a {
    opacity: .7
}
#dashboard .orders-lists-titles a.active {
    opacity: 1;
    color: rgba(var(--m-color-primary), 1)
}
#dashboard .order-list {
    display: flex;
    -ms-display: flex;
    --m-box-start:flex-start;
    --m-box-end:flex-end;
    flex-direction: column;
    gap: 1rem
}
#dashboard .order-details-body-toggle {
    user-select: none
}
#dashboard .order-details-body:not(.active) {
    display: none
}
#dashboard .order-details-body-toggle svg {
    transition-duration: 300ms;
    -webkit-transition-duration: 300ms;
    -o-transition-duration: 300ms
}
#dashboard .order-details-body-toggle svg.active {
    transform: rotate(180deg)
}
#dashboard .order-details-body-1 {
    padding: 1rem;
    --m-text-alpha: 1;
    color: rgba(var(--m-color-primary),var(--m-text-alpha));
    --m-border-alpha: 1;
    border-color: rgba(var(--m-color-bodylight),var(--m-border-alpha));
    text-align: center;
    min-width: 10rem;
    display: flex;
    -ms-display: flex;
    --m-box-start:flex-start;
    --m-box-end:flex-end;
    align-items: center;
    justify-content: center;
    flex-direction: column
}
@media only screen and (min-width: 576px)  {
    #dashboard .order-details-body-1 {
        border-left-width: 1px
    }
}
#dashboard .order-details-body-2 {
    padding: 1rem;
    --m-border-alpha: 1;
    border-color: rgba(var(--m-color-bodylight),var(--m-border-alpha));
    min-width: 10rem;
    display: flex;
    -ms-display: flex;
    --m-box-start:flex-start;
    --m-box-end:flex-end;
    align-items: center;
    flex-grow: 1;
    gap: 0.75rem
}
#dashboard .order-details-body-2 .price {
    margin-right: auto
}
@media only screen and (max-width: 575.98px)  {
    #dashboard .order-details-body-2 {
        padding-top: 0rem;
        padding-bottom: 0rem
    }
}
#dashboard .order-details-body-3 {
    padding: 1rem;
    --m-text-alpha: 1;
    color: rgba(var(--m-color-primary),var(--m-text-alpha));
    --m-border-alpha: 1;
    border-color: rgba(var(--m-color-bodylight),var(--m-border-alpha));
    text-align: center;
    min-width: 10rem;
    display: flex;
    -ms-display: flex;
    --m-box-start:flex-start;
    --m-box-end:flex-end;
    justify-content: center;
    flex-direction: column
}
@media only screen and (min-width: 576px)  {
    #dashboard .order-details-body-3 {
        border-right-width: 1px
    }
}
#dashboard .auth-grid {
    text-align: center
}
#dashboard .auth-grid .image {
    height: 8rem;
    width: 6rem;
    margin: 0 auto 1rem
}
@media only screen and (max-width: 575.98px)  {
    #dashboard .auth-grid .image {
        width: 4rem;
        height: 3rem
    }
}
#dashboard .auth-grid img {
    object-fit: contain;
    width: 100%;
    height: 100%
}
#dashboard .auth-grid .box {
    border: 1px solid rgba(128,128,128,.25);
    padding: .75rem .2rem;
    border-radius: .75rem;
    box-shadow: 0 0 15px rgba(128,128,128,.1) , 0 0 15px rgba(128,128,128,.1) inset;
    width: 10rem
}
#dashboard .auth-grid .box.green {
    border: 1px solid rgba(var(--m-color-green), 1);
    box-shadow: 0 0 15px rgba(128,255,128,.1) , 0 0 15px rgba(128,255,128,.1) inset
}
#dashboard .auth-grid .box.orange {
    border: 1px solid rgba(var(--m-color-orange), 1);
    box-shadow: 0 0 15px rgba(255,200,128,.2) , 0 0 15px rgba(255,200,128,.2) inset
}
#dashboard .auth-grid .box.red {
    border: 1px solid rgba(var(--m-color-primary), 1);
    box-shadow: 0 0 15px rgba(255,128,128,.2) , 0 0 15px rgba(255,128,128,.2) inset
}
@media only screen and (max-width: 991.98px)  {
    #dashboard .auth-grid .box {
        width: 7.5rem
    }
}
@media only screen and (max-width: 575.98px)  {
    #dashboard .auth-grid .box {
        width: 5rem;
        font-size: 0.7000000000000001rem;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem
    }
}
#dashboard .auth-grid .line {
    flex-grow: 1;
    box-shadow: 0 0 15px rgba(128,128,128,.2) , 0 0 15px rgba(128,128,128,.2) inset;
    border-bottom: 1px solid rgba(128,128,128,.25);
    margin-top: auto;
    margin-bottom: 2.3rem
}
@media only screen and (max-width: 575.98px)  {
    #dashboard .auth-grid .line {
        margin-bottom: 1.5rem
    }
}
#dashboard .auth-grid .line.green {
    border-bottom: 1px solid rgba(var(--m-color-green), 1);
    box-shadow: 0 0 15px rgba(128,255,128,.2) , 0 0 15px rgba(128,255,128,.2) inset
}
#dashboard .auth-grid .line.orange {
    border-bottom: 1px solid rgba(var(--m-color-orange), 1);
    box-shadow: 0 0 15px rgba(255,200,128,.3) , 0 0 15px rgba(255,200,128,.3) inset
}
#dashboard .auth-grid .line.red {
    border-bottom: 1px solid rgba(var(--m-color-primary), 1);
    box-shadow: 0 0 15px rgba(255,128,128,.2) , 0 0 15px rgba(255,128,128,.2) inset
}
#dashboard .address {
    border-radius: 0.625rem;
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-body),var(--m-bg-alpha));
    padding: 1.25rem;
    box-shadow: 0 2px .5rem rgba(128,128,128,.2)
}
#dashboard .address:not(:last-child) {
    margin-bottom: 1.5rem
}
#dashboard .modal-form {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(128,128,128,.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 90
}
#dashboard .modal-form .cover {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1
}
#dashboard .modal-form:not(.active) {
    opacity: 0;
    visibility: hidden
}
#dashboard .modal-form .box {
    width: 85%;
    max-width: 25rem;
    background: rgba(var(--m-color-body), 1);
    border-radius: .75rem;
    padding: 1rem
}

#dashboard .modal-form.modal-form-wide .box {
  max-width: 50rem;
  max-height: 83vh;
  overflow: auto;
}


#dashboard .modal-form .box.has-overflow {
    max-height: 70%;
    overflow: auto
}
#dashboard .modal-form .box.has-overflow::-webkit-scrollbar-track {
    margin: 1rem 0;
    background: none
}
@media only screen and (max-width: 991.98px)  {
    #dashboard .modal-form .box.has-overflow {
        margin-top: 3.5rem
    }
}
#dashboard .modal-form.modal-address .box {
    max-width: 60rem
}
#dashboard .level {
    margin: 0 auto;
    background: #FF9000;
    display: inline-block;
    padding: .85rem 1.25rem;
    border-radius: .6rem;
    color: #fff;
    box-shadow: 0 0 10px #FF9000
}
#dashboard .level.green {
    background: rgba(var(--m-color-green), 1);
    box-shadow: 0 0 10px rgba(var(--m-color-green), 1);
    font-size: 1.1rem
}
@media only screen and (max-width: 991.98px)  {
    #dashboard {
        padding-top: 5.5rem
    }
}
.file-select {
    border: 2px solid rgba(128,128,128,.15);
    width: 100%;
    padding: 1rem;
    border-radius: 0.5rem;
    --m-text-alpha: 1;
    color: rgba(var(--m-color-invert),var(--m-text-alpha));
    display: flex;
    -ms-display: flex;
    --m-box-start:flex-start;
    --m-box-end:flex-end;
    gap: 0.5rem;
    align-items: center;
    justify-content: space-between;
    position: relative;
    overflow: hidden
}
.file-select h4 {
    padding-top: 0;
    padding-bottom: .1rem
}
.file-select.disabled {
    cursor: not-allowed !important;
    opacity: .5
}
.file-select.disabled * {
    cursor: not-allowed !important
}
.file-select p {
    opacity: .4;
    margin-bottom: 0;
    padding-bottom: 0
}
.file-select svg {
    opacity: 0.25;
    margin-left: .5rem
}
.file-select input {
    position: absolute;
    width: 500%;
    height: 500%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    z-index: 20;
    opacity: .01;
    color: rgba(var(--m-color-body), 1)
}
.pin-first {
    border-top-right-radius: 0.625rem;
    border-bottom-right-radius: 0.625rem
}
.pin-last {
    border-top-left-radius: 0.625rem;
    border-bottom-left-radius: 0.625rem
}
@media only screen and (max-width: 991.98px)  {
    .pin-first-i-lg {
        border-top-right-radius: 0.625rem;
        border-bottom-right-radius: 0.625rem
    }
}
@media only screen and (max-width: 991.98px)  {
    .pin-last-i-lg {
        border-top-left-radius: 0.625rem;
        border-bottom-left-radius: 0.625rem
    }
}
.order-filter-input {
    --m-text-alpha: 1;
    color: rgba(var(--m-color-invert),var(--m-text-alpha))
}
[dir=ltr] .pin-first {
    border-top-right-radius: 0rem;
    border-bottom-right-radius: 0rem;
    border-top-left-radius: 0.625rem;
    border-bottom-left-radius: 0.625rem
}
@media only screen and (max-width: 991.98px)  {
    [dir=ltr] .pin-first-i-lg {
        border-top-right-radius: 0rem;
        border-bottom-right-radius: 0rem;
        border-top-left-radius: 0.625rem;
        border-bottom-left-radius: 0.625rem
    }
}
[dir=ltr] .pin-last {
    border-top-right-radius: 0.625rem;
    border-bottom-right-radius: 0.625rem
}
@media only screen and (max-width: 991.98px)  {
    [dir=ltr] .pin-last-i-lg {
        border-top-right-radius: 0.625rem;
        border-bottom-right-radius: 0.625rem
    }
}
[dir=ltr] .ltr-rotate {
    transform: rotate(180deg)
}
[dir=ltr] .input-group .input-title {
    border-left-width: 0;
    border-right-width: 1px;
    --m-border-alpha: 1;
    border-color: rgba(var(--m-color-bodylight),var(--m-border-alpha))
}
[dir=ltr] .input-group .ml-auto {
    margin-left: 0;
    margin-right: auto
}
[dir=ltr] #dashboard th, [dir=ltr] #dashboard td {
    text-align: left
}
@media only screen and (min-width: 576px)  {
    [dir=ltr] #dashboard .order-details-body-1 {
        border-right-width: 1px
    }
}
[dir=ltr] #dashboard .order-details-body-2 .price {
    margin-right: 0.25rem;
    margin-left: auto
}
@media only screen and (min-width: 576px)  {
    [dir=ltr] #dashboard .order-details-body-3 {
        border-left-width: 1px
    }
}
@media only screen and (min-width: 576px)  {
    [dir=ltr] #dashboard .dash-wallet-button {
        margin-right: 0;
        margin-left: auto
    }
}
[dir=ltr] #dashboard .dashboard-nav a.active::before {
    background: linear-gradient(to left, rgba(var(--m-color-body), 1), transparent)
}
@media only screen and (max-width: 991.98px)  {
    [dir=ltr] #dashboard .dashboard-nav ul {
        right: auto;
        left: 0
    }
    [dir=ltr] #dashboard .dashboard-nav:not(.active) ul {
        left: -18rem
    }
}
.form-select {
    position: relative;
    cursor: pointer
}
.form-select::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 55
}
.form-select label {
    cursor: pointer !important
}
.form-select .select {
    z-index: -1
}
.form-select .select-options {
    position: absolute;
    padding: .5rem 0;
    border-radius: .625rem;
    background: rgba(var(--m-color-body), 1);
    box-shadow: 0 .5rem 1rem 0px #80808030;
    right: -1px;
    left: -1px;
    top: 90%;
    font-size: .93rem;
    font-weight: 600;
    transform: scaleY(0);
    opacity: 0;
    visibility: hidden;
    transition-duration: 300ms;
    -webkit-transition-duration: 300ms;
    -o-transition-duration: 300ms;
    transform-origin: top;
    cursor: default;
    z-index: 90;
    margin-top: .75rem
}
.form-select .select-options li {
    opacity: 0;
    transition: all .3s ease
}
[m-theme="dark"] .form-select .select-options {
    background: rgba(var(--m-color-bodylight), 1)
}
.form-select .select-options >ul {
    padding: 0;
    overflow: hidden
}
.form-select .select-options .scroll {
    overflow: auto;
    scroll-behavior: smooth;
    scroll-snap-type: y mandatory;
    max-height: 11.7rem
}
.form-select .select-options .scroll.large {
    max-height: 12.3rem
}
.form-select .select-options .scroll::-webkit-scrollbar-track {
    margin: 0;
    background: none
}
.form-select .select-options .scroll::-webkit-scrollbar-thumb {
    border-radius: 1rem
}
.form-select .select-options li {
    color: rgba(var(--m-color-invert), 1);
    padding: .75rem 1rem;
    transition-duration: 300ms;
    -webkit-transition-duration: 300ms;
    -o-transition-duration: 300ms;
    cursor: pointer;
    scroll-snap-align: start;
    display: flex;
    align-items: center;
    gap: .5rem
}
.form-select .select-options li .desc {
    font-size: .8rem;
    font-weight: 400;
    opacity: .5
}
.form-select .select-options li .img-icon {
    width: 1.25rem;
    height: auto;
    margin-top: auto;
    margin-bottom: auto
}
.form-select .select-options li:not(:last-child) {
    border-bottom: 1px solid #80808020
}
.form-select .select-options li:hover {
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-invert),var(--m-bg-alpha));
    --m-bg-alpha: 0.05
}
.form-select.select-active .select-options {
    visibility: visible;
    transform: none;
    opacity: 1
}
.form-select.select-active .select-options li {
    opacity: 1;
    transition: all .3s ease .2s
}
.form-select.wide-select .select-options {
    min-width: 12rem
}
.phone-form {
    flex-grow: 1;
    display: flex;
    -ms-display: flex;
    --m-box-start:flex-start;
    --m-box-end:flex-end;
    align-items: center;
    direction: ltr
}
#cart {
    padding: 3rem 0
}
#cart .cart-nav {
    display: flex;
    align-items: center;
    box-shadow: 0 3px 10px rgba(130, 130, 130, .2)
}
#cart .preview-image {
    width: 5rem;
    aspect-ratio: 2/3;
    object-fit: cover;
    border-radius: .5rem;
    display: block;
    margin-bottom: .1rem
}
@media only screen and (max-width: 575.98px)  {
    #cart .preview-image {
        width: 3rem
    }
}
#cart .nav-item {
    width: 25%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1rem 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: #c7c7c7
}
#cart .nav-item.done, #cart .nav-item.current {
    background: linear-gradient(to left, rgba(var(--m-color-primary), 1) 25%, transparent);
    color: #fff
}
#cart .nav-item.done.done, #cart .nav-item.current.done {
    --m-bg-alpha: 1 !important;
    background-color: rgba(var(--m-color-primary),var(--m-bg-alpha)) !important
}
#cart .nav-item.done .num, #cart .nav-item.current .num {
    --m-text-alpha: 1;
    color: rgba(var(--m-color-primary),var(--m-text-alpha))
}
#cart .nav-item .num {
    box-shadow: 0 3px 10px rgba(130, 130, 130, .2);
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: .1rem;
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-body),var(--m-bg-alpha))
}
@media only screen and (max-width: 991.98px)  {
    #cart .nav-item .num {
        width: 2.5rem;
        height: 2.5rem
    }
}
@media only screen and (max-width: 575.98px)  {
    #cart .nav-item .num {
        width: 1.25rem;
        height: 1.25rem
    }
}
[m-theme="dark"] #cart .nav-item {
    --m-text-alpha: 1;
    color: rgba(var(--m-color-invert-d-5),var(--m-text-alpha))
}
@media only screen and (min-width: 1296px)  {
    #cart .nav-item {
        font-size: 1.3rem
    }
}
@media only screen and (max-width: 991.98px)  {
    #cart .nav-item {
        font-size: 1rem;
        padding-top: 2rem;
        padding-bottom: 2rem
    }
}
@media only screen and (max-width: 575.98px)  {
    #cart .nav-item {
        font-size: 0.6rem;
        gap: 0.25rem
    }
}
#cart .sbox {
    box-shadow: 0 3px 10px rgba(130, 130, 130, .2)
}
#cart .spec {
    opacity: .5
}
#cart .spec li {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin-bottom: .25rem
}
#cart .spec li svg {
    margin-bottom: .2rem
}
#cart .cart-item {
    box-shadow: 0 3px 10px rgba(130, 130, 130, .2);
    padding: 1.5rem;
    border-radius: .75rem;
    margin-bottom: 1.5rem;
    display: flex;
    gap: 1.5rem
}
@media only screen and (min-width: 992px)  {
    #cart .cart-item .tips-text {
        margin-left: 0rem
    }
}
#cart .cart-item .stock-selector {
    box-shadow: 0 3px 10px rgba(130, 130, 130, .2);
    gap: .5rem
}
#cart .cart-item .product-image {
    width: 6rem;
    min-width: 6rem;
    aspect-ratio: 2/3;
    object-fit: cover;
    border-radius: .65rem;
    display: block;
    margin-bottom: 1rem
}
@media only screen and (max-width: 767.98px)  {
    #cart .cart-item .product-image {
        width: 4rem;
        min-width: 4rem
    }
}
#cart .add-address-button svg {
    transition-duration: 250ms;
    -webkit-transition-duration: 250ms;
    -o-transition-duration: 250ms
}
#cart .add-address-button.active svg {
    transform: rotate(180deg)
}
#cart .add-address {
    padding: 1.25rem !important;
    margin-right: -1.25rem;
    margin-left: -1.25rem;
    transition-duration: 300ms;
    -webkit-transition-duration: 300ms;
    -o-transition-duration: 300ms;
    display: none;
    transform: scaleY(.75);
    transform-origin: top;
    opacity: 0
}
#cart .add-address.active {
    display: block
}
#cart .address {
    padding: 1rem;
    border-radius: .75rem;
    border: 2px solid rgba(var(--m-color-bodylight), 1);
    margin-top: 1.25rem;
    display: flex;
    gap: 1rem;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    user-select: none
}
#cart .address .icon-tick {
    opacity: 0;
    position: absolute;
    right: .5rem;
    color: #fff;
    top: 50%;
    transform: translateY(-50%) scale(0);
    transition-duration: 200ms;
    -webkit-transition-duration: 200ms;
    -o-transition-duration: 200ms;
    transition-delay: 100ms;
    -webkit-transition-delay: 100ms;
    -o-transition-delay: 100ms
}
#cart .address::before {
    content: "";
    width: 2rem;
    height: 100%;
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-primary),var(--m-bg-alpha));
    position: absolute;
    right: 0rem;
    top: 0rem;
    transition-duration: 200ms;
    -webkit-transition-duration: 200ms;
    -o-transition-duration: 200ms;
    opacity: 0
}
#cart .address.active {
    border-color: rgba(var(--m-color-primary), 1)
}
#cart .address.active .icon-tick {
    opacity: 1;
    transform: translateY(-50%) scale(1)
}
#cart .address.active::before {
    opacity: 1
}
@media only screen and (max-width: 575.98px)  {
    #cart .address.active {
        padding-inline-start: 3rem
    }
}
#cart .address .location {
    width: 2.5rem;
    min-width: 2.5rem;
    height: 3rem;
    background: url("../img/location.png") center center no-repeat;
    background-size: contain;
    margin-inline-start: 2rem;
    margin-top: .2rem
}
@media only screen and (max-width: 575.98px)  {
    #cart .address .location {
        display: none;
        -ms-display: none
    }
}
#cart .delivery-company {
    position: relative
}
#cart .delivery-company input {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    margin: 0 .5rem;
    display: none
}
#cart .delivery-company label {
    border: 2px solid rgba(var(--m-color-bodylight), 1);
    border-radius: .5rem;
    padding: .5rem 1rem;
    display: block;
    transition-duration: 300ms;
    -webkit-transition-duration: 300ms;
    -o-transition-duration: 300ms;
    cursor: pointer
}
#cart .delivery-company input:checked + label {
    --m-border-alpha: 1;
    border-color: rgba(var(--m-color-primary),var(--m-border-alpha));
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-primary),var(--m-bg-alpha));
    --m-text-alpha: 1;
    color: rgba(var(--m-color-white),var(--m-text-alpha))
}
#cart .pay-method {
    position: relative;
    box-shadow: 0 3px 10px rgba(130, 130, 130, .2);
    padding: .5rem;
    border-radius: .75rem;
    aspect-ratio: 1/1
}
#cart .pay-method input {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    margin: 0 .5rem;
    display: none
}
#cart .pay-method label {
    border: 3px solid transparent;
    border-radius: .5rem;
    transition-duration: 300ms;
    -webkit-transition-duration: 300ms;
    -o-transition-duration: 300ms;
    width: 100%;
    height: 100%;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    padding: 10px;
    user-select: none
}
@media only screen and (max-width: 1295.98px)  {
    #cart .pay-method label {
        border-width: 2px
    }
}
#cart .pay-method input:checked + label {
    --m-border-alpha: 1;
    border-color: rgba(var(--m-color-primary),var(--m-border-alpha));
    box-shadow: 0 0 10px rgba(255, 0, 0, .5), 0 0 10px rgba(255, 0, 0, .5) inset
}
@media only screen and (max-width: 991.98px)  {
    #cart {
        padding-top: 0rem
    }
}
.archive-offer {
    background: url("../img/offer-bg.jpg") center center;
    background-size: cover;
    padding: 2rem 0
}
#archive {
    padding: 3rem 0
}
@media only screen and (max-width: 991.98px)  {
    #archive {
        padding: 1.5rem 0 2rem
    }
}
.pagination {
    display: flex;
    gap: .5rem;
    padding-top: 2rem;
    justify-content: center;
    /*direction: ltr*/
}
.pagination a {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: .5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(var(--m-color-bodylight), 1);
    transition-duration: 250ms;
    -webkit-transition-duration: 250ms;
    -o-transition-duration: 250ms
}
.pagination li {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: .5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(var(--m-color-bodylight), 1);
    transition-duration: 250ms;
    -webkit-transition-duration: 250ms;
    -o-transition-duration: 250ms
}
.pagination a.current {
    --m-bg-alpha: 1 !important;
    background-color: rgba(var(--m-color-primary),var(--m-bg-alpha)) !important;
    --m-text-alpha: 1;
    color: rgba(var(--m-color-white),var(--m-text-alpha));
    --m-border-alpha: 1;
    border-color: rgba(var(--m-color-primary),var(--m-border-alpha))
}
.pagination .active {
    --m-bg-alpha: 1 !important;
    background-color: rgba(var(--m-color-primary),var(--m-bg-alpha)) !important;
    --m-text-alpha: 1;
    color: rgba(var(--m-color-white),var(--m-text-alpha));
    --m-border-alpha: 1;
    border-color: rgba(var(--m-color-primary),var(--m-border-alpha))
}
.pagination a:hover {
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-bodylight),var(--m-bg-alpha))
}
#archive .show-more {
    color: rgba(var(--m-color-primary), 1);
    background: none;
    cursor: pointer;
    padding: .35rem .75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    font-size: .9rem;
    margin-inline-start: auto;
    border: 2px solid rgba(var(--m-color-bodylight), 1);
    border-radius: .4rem;
    transition-duration: 250ms;
    -webkit-transition-duration: 250ms;
    -o-transition-duration: 250ms
}
#archive .show-more:hover {
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-primary),var(--m-bg-alpha));
    --m-text-alpha: 1;
    color: rgba(var(--m-color-white),var(--m-text-alpha));
    --m-border-alpha: 1;
    border-color: rgba(var(--m-color-primary),var(--m-border-alpha))
}
#archive .show-more svg {
    margin-top: .1rem
}
#archive .sub-categories {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    grid-gap: 1rem;
    --m-box-start: start;
    --m-box-end: end;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-column: 1rem;
    grid-row-gap: 0.35rem
}
@media (min-width: 400px) {
    #archive .sub-categories {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }
}
#archive .sub-categories li {
    margin-bottom: .25rem;
    position: relative;
    --m-text-alpha: 1;
    color: rgba(var(--m-color-invert-l-4),var(--m-text-alpha));
    padding-right: .9rem
}
#archive .sub-categories li::before {
    content: "";
    position: absolute;
    width: .25rem;
    height: .25rem;
    right: 0;
    top: 55%;
    transform: translateY(-50%);
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-primary),var(--m-bg-alpha));
    border-radius: 9999px;
    transition-duration: 200ms;
    -webkit-transition-duration: 200ms;
    -o-transition-duration: 200ms
}
#archive .sub-categories li:hover::before {
    width: .5rem
}
[m-theme="dark"] #archive .sub-categories li {
    --m-text-alpha: 1;
    color: rgba(var(--m-color-invert-d-5),var(--m-text-alpha))
}
#archive .sub-categories li:hover {
    --m-text-alpha: 1;
    color: rgba(var(--m-color-invert),var(--m-text-alpha))
}
@media only screen and (min-width: 576px)  {
    #archive .sub-categories {
        grid-template-columns: repeat(4, minmax(0, 1fr))
    }
}
@media only screen and (min-width: 992px)  {
    #archive .sub-categories {
        grid-template-columns: repeat(5, minmax(0, 1fr))
    }
}
#archive .category-image {
    border-radius: 1rem;
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    font-family: Shabnam
}
#archive .has-more-content {
    line-height: 2rem;
    text-align: justify;
    position: relative;
      font-family: Shabnam;
}
#archive .has-more-content h1 {
    padding:20px 0px;
}
#archive .has-more-content.active .more-cover {
    height: .5rem
}
#archive .has-more-content.active img {
   max-width: 100%;
  height: auto;
}
#archive .has-more-content:not(.active) {
    max-height: 6rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis
}
#archive .has-more-content:not(.active) .more-cover {
    content: "";
    background: linear-gradient(to bottom, transparent, rgba(var(--m-color-body), 1));
    width: 100%;
    height: 5rem;
    position: absolute;
    right: 0;
    bottom: -.5rem;
    z-index: 2;
    cursor: default
}
#archive .has-more-content p {
    margin: 0
}
#archive .top-btn {
    display: flex;
    -ms-display: flex;
    --m-box-start:flex-start;
    --m-box-end:flex-end;
    align-items: center;
    gap: 1rem;
    font-size: 1rem;
    margin-bottom: 1rem;
    position: relative
}
@media only screen and (min-width: 992px)  {
    #archive .top-btn.not-lg {
        display: none;
        -ms-display: none
    }
}
#archive .top-btn .btn {
    display: flex;
    -ms-display: flex;
    --m-box-start:flex-start;
    --m-box-end:flex-end;
    font-weight: 500;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.1rem
}
@media only screen and (max-width: 991.98px)  {
    #archive .top-btn .btn {
        --m-bg-alpha: 1;
        background-color: rgba(var(--m-color-bodylight),var(--m-bg-alpha));
        border-radius: 0.375rem;
        padding-right: 0.75rem;
        padding-left: 0.75rem;
        padding-top: 0.375rem;
        padding-bottom: 0.375rem;
        font-size: 1rem
    }
}
#archive .top-btn ul {
    display: flex;
    -ms-display: flex;
    --m-box-start:flex-start;
    --m-box-end:flex-end;
    align-items: center;
    gap: 1rem;
    --m-text-alpha: 1;
    color: rgba(var(--m-color-invert),var(--m-text-alpha));
    --m-text-alpha: 0.5;
    font-size: 0.9rem;
    transition-duration: 300ms;
    -webkit-transition-duration: 300ms;
    -o-transition-duration: 300ms;
    transition-delay: 100ms;
    -webkit-transition-delay: 100ms;
    -o-transition-delay: 100ms
}
@media only screen and (max-width: 991.98px)  {
    #archive .top-btn ul {
        flex-direction: column;
        position: absolute;
        top: 100%;
        z-index: 25;
        background: rgba(var(--m-color-bodylight), 1);
        align-items: start;
        padding: .7rem 1rem;
        gap: .25rem;
        border-radius: .5rem;
        min-width: 8rem;
        margin-top: .5rem;
        opacity: 0;
        visibility: hidden
    }
}
@media only screen and (max-width: 991.98px)  {
    #archive .top-btn:hover ul {
        transition-delay: 0ms;
        -webkit-transition-delay: 0ms;
        -o-transition-delay: 0ms;
        opacity: 1;
        visibility: visible
    }
}
@media only screen and (max-width: 991.98px)  {
    #archive .filters {
        background: rgba(var(--m-color-body), 1);
        position: fixed;
        z-index: 110;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        overflow: auto;
        padding: 1.25rem;
        transition-duration: 400ms;
        -webkit-transition-duration: 400ms;
        -o-transition-duration: 400ms
    }
    #archive .filters:not(.active) {
        opacity: 0;
        transform: translateY(10%);
        visibility: hidden
    }
}
#archive .filters .box {
    padding: 1rem 1.25rem 1.25rem;
    background: rgba(var(--m-color-bodylight), 1);
    border-radius: 1rem;
    width: 100%;
    margin-bottom: 1rem;
    margin-top: .5rem
}
#archive .filters .checkboxes {
    max-height: 13.5rem;
    overflow: auto;
    position: relative
}
#archive .filters .checkboxes div {
    margin-top: 0.1625rem;
    margin-bottom: 0.1625rem
}
#archive .filters .checkboxes::-webkit-scrollbar-track {
    border-radius: 10px;
    background: rgba(var(--m-color-primary), 1);
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-body),var(--m-bg-alpha))
}
#archive .filters .checkboxes::-webkit-scrollbar-thumb {
    border-radius: 10px
}
#archive .filters .checkboxes::-webkit-scrollbar-thumb:hover {
    border-radius: 10px
}
#archive .filters .checkboxes input {
    vertical-align: middle;
    margin-bottom: .06rem
}
#archive .filters .checkboxes label {
    vertical-align: middle;
    padding: 0 .25rem;
    --m-text-alpha: 1;
    color: rgba(var(--m-color-invert),var(--m-text-alpha));
    --m-text-alpha: 0.7000000000000001
}
#archive .filters .ranges {
    margin-bottom: 0.75rem;
    position: relative;
    user-select: none
}
#archive .filters .ranges .line {
    height: .25rem;
    background: #f7f7f7;
    border-radius: 60px;
    transform: translateX(.5rem);
    position: relative;
    overflow: hidden
}
#archive .filters .ranges .line .line-max {
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-primary-l-5),var(--m-bg-alpha));
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0rem;
    top: 0rem;
    opacity: 0.4
}
#archive .filters .ranges .line .line-min {
    width: 0rem;
    height: 100%;
    position: absolute;
    left: 0rem;
    top: 0rem;
    background: #eee
}
#archive .filters .ranges .min {
    width: 1rem;
    height: 1rem;
    border-radius: 9999px;
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-primary),var(--m-bg-alpha));
    position: absolute;
    left: 0rem;
    top: -0.375rem;
    cursor: pointer
}
#archive .filters .ranges .max {
    width: 1rem;
    height: 1rem;
    border-radius: 9999px;
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-primary),var(--m-bg-alpha));
    position: absolute;
    left: 100%;
    top: -0.375rem;
    cursor: pointer
}
#archive .filters .ranges-text {
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
    font-weight: 500;
    font-size: .8rem;
    user-select: none
}
#archive .filters .ranges-text .min {
    text-align: left
}
[dir=ltr] #archive .sub-categories li {
    padding-right: 0;
    padding-left: 0.9rem
}
[dir=ltr] #archive .sub-categories li::before {
    right: auto;
    left: 0
}
[dir=ltr] #cart .nav-item.done, [dir=ltr] #cart .nav-item.current {
    background: linear-gradient(to right, rgba(var(--m-color-primary), 1) 25%, transparent)
}
[dir=ltr] #cart .address .icon-tick {
    right: auto;
    left: 0.5rem
}
[dir=ltr] #cart .address::before {
    right: auto;
    left: 0
}
@media only screen and (max-width: 767.98px) {
    [dir=ltr] #cart [\i-md~="-mr-24"] {
        margin-right: auto;
        margin-left: -6rem
    }
}
#footer {
    padding: 3rem 0 2rem;
    background: #f5f5f5;
    border-top: 1px solid transparent
}
[m-theme="dark"] #footer {
    background: rgba(var(--m-color-body), 1);
    border-top-color: #707070
}
@media only screen and (max-width: 991.98px)  {
    #footer {
        text-align: center
    }
}
#footer .logo {
    width: 6rem;
    height: 1rem;
    background: url("../img/logo.png") center center no-repeat;
    background-size: 100% auto;
    margin: .25rem auto 1rem
}
@media only screen and (max-width: 991.98px)  {
    #footer .logo {
        height: 1rem;
        width: 6rem
    }
}
#footer .social {
    direction: ltr;
    text-align: center;
    padding-top: 0.75rem;
    margin-bottom: 1rem
}
#footer .social i {
    display: inline-block;
    padding: .25rem;
    font-size: .8rem;
    --m-text-alpha: 1;
    color: rgba(var(--m-color-invert-l-4),var(--m-text-alpha));
    transition-duration: 200ms;
    -webkit-transition-duration: 200ms;
    -o-transition-duration: 200ms
}
#footer .social i:hover {
    --m-text-alpha: 1 !important;
    color: rgba(var(--m-color-primary),var(--m-text-alpha)) !important;
    text-shadow: 0 3px 8px rgba(255,0,0,.5)
}
[m-theme="dark"] #footer .social i {
    --m-text-alpha: 1;
    color: rgba(var(--m-color-invert-d-5),var(--m-text-alpha))
}
#footer .section-title {
    font-size: 1.1rem;
    font-weight: bold;
    margin-bottom: .5rem
}
#footer li {
    font-size: .8rem;
    margin-bottom: .25rem;
    position: relative;
    --m-text-alpha: 1;
    color: rgba(var(--m-color-invert-l-4),var(--m-text-alpha))
}
@media only screen and (min-width: 992px)  {
    #footer li {
        padding-right: 0.75rem
    }
    #footer li::before {
        content: "";
        position: absolute;
        width: .25rem;
        height: .25rem;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        --m-bg-alpha: 1;
        background-color: rgba(var(--m-color-primary),var(--m-bg-alpha));
        border-radius: 9999px;
        transition-duration: 200ms;
        -webkit-transition-duration: 200ms;
        -o-transition-duration: 200ms
    }
    #footer li:hover::before {
        width: .5rem
    }
}
[m-theme="dark"] #footer li {
    --m-text-alpha: 1;
    color: rgba(var(--m-color-invert-d-5),var(--m-text-alpha))
}
#footer li:hover {
    --m-text-alpha: 1;
    color: rgba(var(--m-color-invert),var(--m-text-alpha))
}
#footer .wbg {
    background: white;
    padding: .5rem;
    border-radius: .5rem;
    transition-duration: 200ms;
    -webkit-transition-duration: 200ms;
    -o-transition-duration: 200ms;
    box-shadow: 0 3px 10px 0 rgba(0,0,0,0.05);
    width: auto;
}
[m-theme="dark"] #footer .wbg {
    background: #444;
    box-shadow: 0 3px 10px 0 rgba(200, 200, 200, 0.05)
}
#footer .wbg img {
    width: 100%;
    display: block
}
#footer .wbg > div {
    font-size: .75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .25rem 0
}
#footer .wbg > div:not(:last-child) {
    border-bottom: 1px solid rgba(128,128,128,.1)
}
#footer .wbg > div >div:last-child {
    font-weight: bold
}
#footer .wbg > div i {
    --m-text-alpha: 1;
    color: rgba(var(--m-color-primary),var(--m-text-alpha));
    margin-left: 0.125rem
}
#footer .select {
    direction: ltr
}
#footer .copyright {
    font-size: .8rem;
    padding-top: 2rem
}
@media only screen and (max-width: 991.98px)  {
    #footer .grid>div {
        margin-bottom: 1rem
    }
}
.select {
    background: #ebebeb;
    box-shadow: 0 3px 10px 0 rgba(0,0,0,0.05);
    border-radius: 100rem;
    display: inline-block;
    position: relative;
    font-size: .9rem;
    transition-duration: 200ms;
    -webkit-transition-duration: 200ms;
    -o-transition-duration: 200ms
}
.select:hover {
    background: #ccc;
    box-shadow: 0 3px 10px 0 rgba(0,0,0,0.1)
}
[m-theme="dark"] .select {
    background: #444;
    box-shadow: 0 3px 10px 0 rgba(255,255,255,0.05)
}
[m-theme="dark"] .select:hover {
    background: #333;
    box-shadow: 0 3px 10px 0 rgba(255,255,255,0.1)
}
.select::before {
    content: "\e910";
    font-family: 'icomoon' !important;
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: .35rem
}
[m-theme="dark"] .select {
    box-shadow: 0 3px 10px 0 rgba(200, 200, 200, 0.05)
}
.select select::-ms-expand {
    display: none
}
.select button, .select select {
    padding: .5rem 1rem .5rem 2rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    text-overflow: '';
    background: none;
    position: relative;
    z-index: 1;
    cursor: pointer;
    color: rgba(var(--m-color-invert), 1)
}
.select button:focus, .select select:focus {
    outline: none
}
#lang-selector {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.5);
    z-index: 1000
}
#lang-selector .box {
    background: rgba(var(--m-color-body), 1);
    width: 90%;
    max-width: 40rem;
    padding: 1.25rem 1.5rem;
    border-radius: .75rem;
    max-height: 80%;
    overflow: auto
}
.modal {
    opacity: 0;
    visibility: hidden;
    transition: all .3s
}
.modal.active {
    opacity: 1;
    visibility: visible
}
@media only screen and (min-width: 992px)  {
    [dir=ltr] #footer li {
        padding-right: 0;
        padding-left: 0.75rem
    }
    [dir=ltr] #footer li::before {
        right: auto;
        left: 0
    }
}
.form-control label {
    display: block;
    margin-bottom: .5rem;
    padding: 0 1rem
}
.form-control input, .form-control textarea {
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: .75rem;
    width: 100%;
    background: none;
    color: rgba(var(--m-color-invert), 1);
    transition-duration: 200ms;
    -webkit-transition-duration: 200ms;
    -o-transition-duration: 200ms
}
[m-theme="dark"] .form-control input, [m-theme="dark"]  .form-control textarea {
    border: 1px solid rgba(200,200,200,0.1)
}
.form-control input:focus, .form-control textarea:focus {
    border: 1px solid rgba(0,0,0,0.3)
}
[m-theme="dark"] .form-control input:focus, [m-theme="dark"]  .form-control textarea:focus {
    border: 1px solid rgba(200,200,200,0.3)
}
.form-control input {
    height: 3.5rem;
    padding: 0 1rem
}
.form-control textarea {
    max-width: 100%;
    min-width: 100%;
    padding: 1rem;
    min-height: 15rem
}
.form-control button {
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-primary),var(--m-bg-alpha));
    padding-bottom: 0.6875rem;
    padding-top: 0.625rem;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
    border-radius: 0.5rem;
    z-index: 3;
    --m-text-alpha: 1;
    color: rgba(var(--m-color-white),var(--m-text-alpha));
    transition-duration: 200ms;
    -webkit-transition-duration: 200ms;
    -o-transition-duration: 200ms;
    display: inline-block;
    -ms-display: inline-block;
    border-right: none;
    text-align: center;
    box-shadow: 0 3px 8px rgba(255,0,0,.5)
}
.form-control button i {
    margin-right: .25rem
}
.form-control button:hover {
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-primary-l-4),var(--m-bg-alpha))
}
@media only screen and (min-width: 992px) {
    [lg~="grid"][lg~="cols-5"] {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important
    }
}
.bg-bodylight {
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-bodylight),var(--m-bg-alpha))
}
.pb-12 {
    padding-bottom: 3rem
}
.grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    grid-gap: 1rem;
    --m-box-start: start;
    --m-box-end: end
}
.cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr))
}
.gap-8 {
    gap: 2rem
}
.a-items-center {
    align-items: center
}
.mb-12 {
    margin-bottom: 3rem
}
.text-150 {
    font-size: 1.5rem
}
.text-w-bold {
    font-weight: 700
}
.mb-4 {
    margin-bottom: 1rem
}
.text-primary {
    --m-text-alpha: 1;
    color: rgba(var(--m-color-primary),var(--m-text-alpha)) !important;
}
.w-full {
    width: 100%
}
.-mb-2 {
    margin-bottom: -0.5rem
}
.cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr))
}
.pa-5 {
    padding: 1.25rem
}
.pb-6 {
    padding-bottom: 1.5rem
}
.d-flex {
    display: flex;
    -ms-display: flex;
    --m-box-start:flex-start;
    --m-box-end:flex-end
}
.flex-col {
    flex-direction: column
}
.shadow-1 {
    --m-shadow-color: 0, 0, 0;
    --m-shadow-alpha: 0.05;
    box-shadow: 0 1px 1px rgba(var(--m-shadow-color), var(--m-shadow-alpha)),0 2px 2px rgba(var(--m-shadow-color), var(--m-shadow-alpha));
    -webkit-box-shadow: 0 1px 1px rgba(var(--m-shadow-color), var(--m-shadow-alpha)),0 2px 2px rgba(var(--m-shadow-color), var(--m-shadow-alpha))
}
.j-content-center {
    justify-content: center
}
.gap-1 {
    gap: 0.25rem
}
.rounded-5 {
    border-radius: 0.625rem
}
.ts-300 {
    transition-duration: 300ms;
    -webkit-transition-duration: 300ms;
    -o-transition-duration: 300ms
}
.-bg-bodylight-1 {
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-bodylight-d-1),var(--m-bg-alpha))
}
.text-200 {
    font-size: 2rem
}
.bg-primary {
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-primary),var(--m-bg-alpha))
}
.text-white {
    --m-text-alpha: 1;
    color: rgba(var(--m-color-white),var(--m-text-alpha))
}
.py-12 {
    padding-top: 3rem;
    padding-bottom: 3rem
}
.text-center {
    text-align: center
}
.max-w-full {
    max-width: 100%
}
.w-10 {
    width: 2.5rem
}
.mt-4 {
    margin-top: 1rem
}
.mt-9 {
    margin-top: 2.25rem
}
.text-120 {
    font-size: 1.2rem
}
.mb-3\.5 {
    margin-bottom: 0.875rem
}
.j-content-between {
    justify-content: space-between
}
.gap-2 {
    gap: 0.5rem
}
.text-130 {
    font-size: 1.3rem
}
.text-w-medium {
    font-weight: 500
}
.text-80 {
    font-size: 0.8rem
}
.-mx-0\.5 {
    margin-right: -0.125rem;
    margin-left: -0.125rem
}
.pr-4 {
    padding-right: 1rem
}
.px-10 {
    padding-right: 2.5rem;
    padding-left: 2.5rem
}
.py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem
}
.text-100 {
    font-size: 1rem
}
.cursor-pointer {
    cursor: pointer
}
.gap-4 {
    gap: 1rem
}
.text-90 {
    font-size: 0.9rem
}
.-mx-1\.5 {
    margin-right: -0.375rem;
    margin-left: -0.375rem
}
.w-5 {
    width: 1.25rem
}
.h-5 {
    height: 1.25rem
}
.mb-0\.25 {
    margin-bottom: 0.0625rem
}
.mb-2 {
    margin-bottom: 0.5rem
}
.pt-2 {
    padding-top: 0.5rem
}
.p-relative {
    position: relative
}
.j-content-end {
    justify-content: var(--m-box-end)
}
.w-4 {
    width: 1rem
}
.h-4 {
    height: 1rem
}
.-mx-1 {
    margin-right: -0.25rem;
    margin-left: -0.25rem
}
.mb-3 {
    margin-bottom: 0.75rem
}
.mb-8 {
    margin-bottom: 2rem
}
.gap-6 {
    gap: 1.5rem
}
.bg-body {
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-body),var(--m-bg-alpha))
}
.text-110 {
    font-size: 1.1rem
}
.pt-0\.5 {
    padding-top: 0.125rem
}
.min-w-6 {
    min-width: 1.5rem
}
.h-10 {
    height: 2.5rem
}
.rounded-6 {
    border-radius: 0.75rem
}
.overflow-hidden {
    overflow: hidden
}
.gap-0 {
    gap: 0rem
}
.mb-6 {
    margin-bottom: 1.5rem
}
.h-20 {
    height: 5rem
}
.pa-4 {
    padding: 1rem
}
.flex-grow-1 {
    flex-grow: 1
}
.border-1 {
    border-width: 1px
}
.border-bodylight {
    --m-border-alpha: 1;
    border-color: rgba(var(--m-color-bodylight),var(--m-border-alpha))
}
.px-4 {
    padding-right: 1rem;
    padding-left: 1rem
}
.py-3\.5 {
    padding-top: 0.875rem;
    padding-bottom: 0.875rem
}
.rounded-4 {
    border-radius: 0.5rem
}
.ts-200 {
    transition-duration: 200ms;
    -webkit-transition-duration: 200ms;
    -o-transition-duration: 200ms
}
.gap-3 {
    gap: 0.75rem
}
.border-bottom-1 {
    border-bottom-width: 1px
}
.opacity-60 {
    opacity: 0.6
}
.text-invert {
    --m-text-alpha: 1;
    color: rgba(var(--m-color-invert),var(--m-text-alpha))
}
.pt-3\.25 {
    padding-top: 0.8125rem
}
.pb-3\.5 {
    padding-bottom: 0.875rem
}
.px-5 {
    padding-right: 1.25rem;
    padding-left: 1.25rem
}
.-mx-2 {
    margin-right: -0.5rem;
    margin-left: -0.5rem
}
.d-none {
    display: none;
    -ms-display: none
}
.flex-wrap {
    flex-wrap: wrap
}
.d-inline-block {
    display: inline-block;
    -ms-display: inline-block
}
.-mt-3 {
    margin-top: -0.75rem
}
.shadow-soft-1 {
    --m-shadow-color: 0, 0, 0;
    --m-shadow-alpha: 0.07;
    box-shadow: 0 0 8px 1px rgba(var(--m-shadow-color), var(--m-shadow-alpha));
    -webkit-box-shadow: 0 0 8px 1px rgba(var(--m-shadow-color), var(--m-shadow-alpha))
}
.rounded-full {
    border-radius: 9999px
}
.ml-1 {
    margin-left: 0.25rem
}
.mb-1 {
    margin-bottom: 0.25rem
}
.text-85 {
    font-size: 0.85rem
}
.border-top-1 {
    border-top-width: 1px
}
.pt-9 {
    padding-top: 2.25rem
}
.mt-5 {
    margin-top: 1.25rem
}
.mt-1 {
    margin-top: 0.25rem
}
.mt-6 {
    margin-top: 1.5rem
}
.pt-4 {
    padding-top: 1rem
}
.pb-3 {
    padding-bottom: 0.75rem
}
.bg-none {
    background: none
}
.py-5 {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem
}
.px-2 {
    padding-right: 0.5rem;
    padding-left: 0.5rem
}
.w-12 {
    width: 3rem
}
.w-24 {
    width: 6rem
}
.\!text-80 {
    font-size: 0.8rem !important
}
.\!gap-0 {
    gap: 0rem !important
}
.text-green {
    --m-text-alpha: 1;
    color: rgba(var(--m-color-green),var(--m-text-alpha))
}
.text-170 {
    font-size: 1.7rem
}
.bg-orange {
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-orange),var(--m-bg-alpha))
}
.border-orange {
    --m-border-alpha: 1;
    border-color: rgba(var(--m-color-orange),var(--m-border-alpha))
}
.ts-250 {
    transition-duration: 250ms;
    -webkit-transition-duration: 250ms;
    -o-transition-duration: 250ms
}
.pb-4 {
    padding-bottom: 1rem
}
.max-w-80 {
    max-width: 20rem
}
.text-orange {
    --m-text-alpha: 1;
    color: rgba(var(--m-color-orange),var(--m-text-alpha))
}
.text-\(\#5eac24\) {
    --m-text-alpha: 1;
    color: rgba(94, 172, 36, var(--m-text-alpha))
}
.py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem
}
.px-8 {
    padding-right: 2rem;
    padding-left: 2rem
}
.max-w-150 {
    max-width: 37.5rem
}
.mx-auto {
    margin-right: auto;
    margin-left: auto
}
.shadow-5 {
    --m-shadow-color: 0, 0, 0;
    --m-shadow-alpha: 0.05;
    box-shadow: 0 1px 1px rgba(var(--m-shadow-color), var(--m-shadow-alpha)),0 2px 2px rgba(var(--m-shadow-color), var(--m-shadow-alpha)),0 4px 4px rgba(var(--m-shadow-color), var(--m-shadow-alpha)),0 8px 8px rgba(var(--m-shadow-color), var(--m-shadow-alpha)),0 16px 16px rgba(var(--m-shadow-color), var(--m-shadow-alpha)),0 32px 32px rgba(var(--m-shadow-color), var(--m-shadow-alpha));
    -webkit-box-shadow: 0 1px 1px rgba(var(--m-shadow-color), var(--m-shadow-alpha)),0 2px 2px rgba(var(--m-shadow-color), var(--m-shadow-alpha)),0 4px 4px rgba(var(--m-shadow-color), var(--m-shadow-alpha)),0 8px 8px rgba(var(--m-shadow-color), var(--m-shadow-alpha)),0 16px 16px rgba(var(--m-shadow-color), var(--m-shadow-alpha)),0 32px 32px rgba(var(--m-shadow-color), var(--m-shadow-alpha))
}
.shadow-primary {
    --m-shadow-color: var(--m-color-primary)
}
.mb-16 {
    margin-bottom: 4rem
}
.min-w-10 {
    min-width: 2.5rem
}
.pt-1\.5 {
    padding-top: 0.375rem
}
.pr-1 {
    padding-right: 0.25rem
}
.mt-16 {
    margin-top: 4rem
}
.mb-0\.5 {
    margin-bottom: 0.125rem
}
.mt-20 {
    margin-top: 5rem
}
.pr-10 {
    padding-right: 2.5rem
}
.pt-16 {
    padding-top: 4rem
}
.h-80 {
    height: 20rem
}
.border-none {
    border-width: 0
}
.opacity-70 {
    opacity: 0.7000000000000001
}
.d-block {
    display: block;
    -ms-display: block
}
.pt-3 {
    padding-top: 0.75rem
}
.opacity-50 {
    opacity: 0.5
}
.text-70 {
    font-size: 0.7000000000000001rem
}
.mx-1 {
    margin-right: 0.25rem;
    margin-left: 0.25rem
}
.ml-auto {
    margin-left: auto
}
.mt-0\.5 {
    margin-top: 0.125rem
}
.opacity-40 {
    opacity: 0.4
}
.min-w-20 {
    min-width: 5rem
}
.max-w-20 {
    max-width: 5rem
}
.mr-auto {
    margin-right: auto
}
.mt-2 {
    margin-top: 0.5rem
}
.w-7 {
    width: 1.75rem
}
.min-w-7 {
    min-width: 1.75rem
}
.w-14 {
    width: 3.5rem
}
.min-w-14 {
    min-width: 3.5rem
}
.h-14 {
    height: 3.5rem
}
.obj-fit-cover {
    object-fit: cover
}
.z-21 {
    z-index: 21
}
.border-2 {
    border-width: 2px
}
.rounded-3 {
    border-radius: 0.375rem
}
.mx-2 {
    margin-right: 0.5rem;
    margin-left: 0.5rem
}
.text-blue {
    --m-text-alpha: 1;
    color: rgba(var(--m-color-blue),var(--m-text-alpha))
}
.w-\(1px\) {
    width: 1px
}
.h-21 {
    height: 5.25rem
}
.h-12 {
    height: 3rem
}
.a-items-end {
    align-items: var(--m-box-end)
}
.px-1\.5 {
    padding-right: 0.375rem;
    padding-left: 0.375rem
}
.py-0 {
    padding-top: 0rem;
    padding-bottom: 0rem
}
.text-lh-1 {
    line-height: 1.25
}
.-mb-4 {
    margin-bottom: -1rem
}
.py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem
}
.ml-4 {
    margin-left: 1rem
}
.col-2 {
    grid-column: auto / span 2
}
.overflow-auto {
    overflow: auto
}
.min-w-\(600px\) {
    min-width: 600px
}
.\!text-center {
    text-align: center !important
}
.-mt-0\.5 {
    margin-top: -0.125rem
}
.gap-\(1px\) {
    gap: 1px
}
.min-h-full {
    min-height: 100%
}
.min-w-80 {
    min-width: 20rem
}
.h-full {
    height: 100%
}
.w-half {
    width: 50%
}
.h-24 {
    height: 6rem
}
.text-line-through {
    text-decoration: line-through
}
.min-w-40 {
    min-width: 10rem
}
.w-30 {
    width: 7.5rem
}
.h-30 {
    height: 7.5rem
}
.d-inline-flex {
    display: inline-flex;
    -ms-display: inline-flex;
    --m-box-start:flex-start;
    --m-box-end:flex-end
}
.px-6 {
    padding-right: 1.5rem;
    padding-left: 1.5rem
}
.rounded-7 {
    border-radius: 0.875rem
}
.shadow-3 {
    --m-shadow-color: 0, 0, 0;
    --m-shadow-alpha: 0.05;
    box-shadow: 0 1px 1px rgba(var(--m-shadow-color), var(--m-shadow-alpha)),0 2px 2px rgba(var(--m-shadow-color), var(--m-shadow-alpha)),0 4px 4px rgba(var(--m-shadow-color), var(--m-shadow-alpha)),0 8px 8px rgba(var(--m-shadow-color), var(--m-shadow-alpha));
    -webkit-box-shadow: 0 1px 1px rgba(var(--m-shadow-color), var(--m-shadow-alpha)),0 2px 2px rgba(var(--m-shadow-color), var(--m-shadow-alpha)),0 4px 4px rgba(var(--m-shadow-color), var(--m-shadow-alpha)),0 8px 8px rgba(var(--m-shadow-color), var(--m-shadow-alpha))
}
.text-w-semibold {
    font-weight: 600
}
.min-w-58 {
    min-width: 14.5rem
}
.shadow-orange {
    --m-shadow-color: var(--m-color-orange)
}
.bg-blue {
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-blue),var(--m-bg-alpha))
}
.shadow-blue {
    --m-shadow-color: var(--m-color-blue)
}
.mt-3 {
    margin-top: 0.75rem
}
.pt-1 {
    padding-top: 0.25rem
}
.my-auto {
    margin-top: auto;
    margin-bottom: auto
}
.pa-1 {
    padding: 0.25rem
}
.rounded-2 {
    border-radius: 0.25rem
}
.min-w-12 {
    min-width: 3rem
}
.pb-1 {
    padding-bottom: 0.25rem
}
.bg-green {
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-green),var(--m-bg-alpha))
}
.bg-purple {
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-purple),var(--m-bg-alpha))
}
.text-purple {
    --m-text-alpha: 1;
    color: rgba(var(--m-color-purple),var(--m-text-alpha))
}
.cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr))
}
.border-bottom-2 {
    border-bottom-width: 2px
}
.mb-11 {
    margin-bottom: 2.75rem
}
.-mx-4 {
    margin-right: -1rem;
    margin-left: -1rem
}
.pa-8 {
    padding: 2rem
}
.pb-0\.2 {
    padding-bottom: 0.05rem
}
.w-40 {
    width: 10rem
}
.text-yellow {
    --m-text-alpha: 1;
    color: rgba(var(--m-color-yellow),var(--m-text-alpha))
}
.text-w-thin {
    font-weight: 200
}
.text-140 {
    font-size: 1.4000000000000001rem
}
.opacity-20 {
    opacity: 0.2
}
.h-40 {
    height: 10rem
}
.bg-invert {
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-invert),var(--m-bg-alpha))
}
.gap-12 {
    gap: 3rem
}
.px-12 {
    padding-right: 3rem;
    padding-left: 3rem
}
.-mx-3 {
    margin-right: -0.75rem;
    margin-left: -0.75rem
}
.mb-0 {
    margin-bottom: 0rem
}
.\!opacity-100 {
    opacity: 1 !important
}
.mb-10 {
    margin-bottom: 2.5rem
}
.text-160 {
    font-size: 1.6rem
}
.ts-400 {
    transition-duration: 400ms;
    -webkit-transition-duration: 400ms;
    -o-transition-duration: 400ms
}
.text-invertlight {
    --m-text-alpha: 1;
    color: rgba(var(--m-color-invertlight),var(--m-text-alpha))
}
.overflow-x-auto {
    overflow-x: auto
}
.mb-14 {
    margin-bottom: 3.5rem
}
.pb-2 {
    padding-bottom: 0.5rem
}
.\!py-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important
}
.\!bg-none {
    background: none !important
}
.\!gap-2 {
    gap: 0.5rem !important
}
.pt-0\.75 {
    padding-top: 0.1875rem
}
.text-71 {
    font-size: 0.71rem
}
.mt-auto {
    margin-top: auto
}
.text-125 {
    font-size: 1.25rem
}
.w-16 {
    width: 4rem !important
}
.mb-20 {
    margin-bottom: 5rem
}
.mt-12 {
    margin-top: 3rem
}
.pb-3\.2 {
    padding-bottom: 0.8rem
}
.my-2 {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem
}
.mr-4 {
    margin-right: 1rem
}
.w-8 {
    width: 2rem !important
}
.p-sticky {
    position: sticky
}
.top-0 {
    top: 0rem
}

.p-3 {
  padding: 1rem !important;
}
.end-0 {
  right: 0 !important;
}
.top-0 {
  top: 0 !important;
}
.position-fixed {
  position: fixed !important;
}
.z-10 {
    z-index: 10
}
.pt-3\.5 {
    padding-top: 0.875rem
}
.pb-3\.7 {
    padding-bottom: 0.925rem
}
.p-absolute {
    position: absolute
}
.left-0 {
    left: 0rem
}
.right-0 {
    right: 0rem
}
.bottom-0 {
    bottom: 0rem
}
.-z-1 {
    z-index: -1
}
.mb-5 {
    margin-bottom: 1.25rem
}
.cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr))
}
.pb-5 {
    padding-bottom: 1.25rem !important
}
.col-3 {
    grid-column: auto / span 3
}
.w-100 {
    width: 25rem !important
}
.max-h-56 {
    max-height: 14rem
}
.-mt-1 {
    margin-top: -0.25rem
}
.cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr))
}
.w-70 {
    width: 17.5rem !important
}
.border-invert {
    --m-border-alpha: 1;
    border-color: rgba(var(--m-color-invert),var(--m-border-alpha))
}
.\!text-white {
    --m-text-alpha: 1 !important;
    color: rgba(var(--m-color-white),var(--m-text-alpha)) !important
}
.mb-3\.75 {
    margin-bottom: 0.9375rem
}
.pb-3\.75 {
    padding-bottom: 0.9375rem
}
.opacity-75 {
    opacity: 0.75
}
.pb-0\.5 {
    padding-bottom: 0.125rem
}
.-mt-2 {
    margin-top: -0.5rem
}
.py-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem
}
.ma-4 {
    margin: 1rem
}
.bg-alpha-50 {
    --m-bg-alpha: 0.5
}
.text-alpha-50 {
    --m-text-alpha: 0.5
}
.bg-alpha-10 {
    --m-bg-alpha: 0.1
}
.border-alpha-20 {
    --m-border-alpha: 0.2
}
.shadow-alpha-30 {
    --m-shadow-alpha: 0.3
}
.text-alpha-75 {
    --m-text-alpha: 0.75
}
.bg-alpha-90 {
    --m-bg-alpha: 0.9
}
.bg-alpha-5 {
    --m-bg-alpha: 0.05
}
[hover~="-bg-bodylight-2"]:hover {
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-bodylight-d-2),var(--m-bg-alpha))
}
[hover~="bg-primary-3"]:hover {
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-primary-l-3),var(--m-bg-alpha))
}
[hover~="text-primary-3"]:hover {
    --m-text-alpha: 1;
    color: rgba(var(--m-color-primary-l-3),var(--m-text-alpha))
}
[hover~="bg-primary-2"]:hover {
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-primary-l-2),var(--m-bg-alpha))
}
[hover~="bg-orange-2"]:hover {
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-orange-l-2),var(--m-bg-alpha))
}
[hover~="bg-blue-2"]:hover {
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-blue-l-2),var(--m-bg-alpha))
}
[hover~="bg-orange"]:hover {
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-orange),var(--m-bg-alpha))
}
[hover~="opacity-70"]:hover {
    opacity: 0.7000000000000001
}
[hover~="bg-alpha-10"]:hover {
    --m-bg-alpha: 0.1
}
[m-theme="dark"] [dark\:hover~="bg-bodylight-2"]:hover {
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-bodylight-l-2),var(--m-bg-alpha))
}
[focus~="border-invert-5"]:focus {
    --m-border-alpha: 1;
    border-color: rgba(var(--m-color-invert-l-5),var(--m-border-alpha))
}
[not-last~="mb-6"]:not(:last-child) {
    margin-bottom: 1.5rem
}
[not-last~="border-bottom-1"]:not(:last-child) {
    border-bottom-width: 1px
}
[not-last~="border-bodylight"]:not(:last-child) {
    --m-border-alpha: 1;
    border-color: rgba(var(--m-color-bodylight),var(--m-border-alpha))
}
@media only screen and (min-width: 576px) {
    [sm~="cols-4"] {
        grid-template-columns: repeat(4, minmax(0, 1fr))
    }
    [sm~="text-140"] {
        font-size: 1.4000000000000001rem
    }
    [sm~="mb-4"] {
        margin-bottom: 1rem
    }
    [sm~="text-200"] {
        font-size: 2rem
    }
    [sm~="mb-6"] {
        margin-bottom: 1.5rem
    }
    [sm~="text-120"] {
        font-size: 1.2rem
    }
    [sm~="pt-3"] {
        padding-top: 0.75rem
    }
    [sm~="pb-3\.25"] {
        padding-bottom: 0.8125rem
    }
    [sm~="px-8"] {
        padding-right: 2rem;
        padding-left: 2rem
    }
    [sm~="cols-3"] {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }
    [sm~="w-20"] {
        width: 5rem !important
    }
    [sm~="d-none"] {
        display: none;
        -ms-display: none
    }
    [sm~="mx-2"] {
        margin-right: 0.5rem;
        margin-left: 0.5rem
    }
    [sm~="-mx-2"] {
        margin-right: -0.5rem;
        margin-left: -0.5rem
    }
    [sm~="mb-0\.5"] {
        margin-bottom: 0.125rem
    }
    [sm~="d-flex"] {
        display: flex;
        -ms-display: flex;
        --m-box-start:flex-start;
        --m-box-end:flex-end
    }
    [sm~="mr-auto"] {
        margin-right: auto
    }
    [sm~="pt-0\.5"] {
        padding-top: 0.125rem
    }
    [sm~="text-110"] {
        font-size: 1.1rem
    }
    [sm~="text-130"] {
        font-size: 1.3rem
    }
    [sm~="cols-2"] {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}
@media only screen and (min-width: 768px) {
    [md~="cols-3"] {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }
    [md~="col-2"] {
        grid-column: auto / span 2
    }
    [md~="cols-5"] {
        grid-template-columns: repeat(5, minmax(0, 1fr))
    }
    [md~="col-3"] {
        grid-column: auto / span 3
    }
    [md~="cols-4"] {
        grid-template-columns: repeat(4, minmax(0, 1fr))
    }
    [md~="gap-8"] {
        gap: 2rem
    }
    [md~="cols-10"] {
        grid-template-columns: repeat(10, minmax(0, 1fr))
    }
    [md~="mb-8"] {
        margin-bottom: 2rem
    }
    [md~="col-7"] {
        grid-column: auto / span 7
    }
    [md~="cols-1"] {
        grid-template-columns: repeat(1, minmax(0, 1fr))
    }
    [md~="cols-2"] {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
    [md~="col-4"] {
        grid-column: auto / span 4
    }
    [md~="w-24"] {
        width: 6rem
    }
    [md~="w-36"] {
        width: 9rem !important
    }
    [md~="pb-20"] {
        padding-bottom: 5rem
    }
    [md~="cols-9"] {
        grid-template-columns: repeat(9, minmax(0, 1fr))
    }
    [md~="col-9"] {
        grid-column: auto / span 9
    }
    [md~="j-content-end"] {
        justify-content: var(--m-box-end)
    }
    [md~="pt-1"] {
        padding-top: 0.25rem
    }
    [md~="bg-primary-1"] {
        --m-bg-alpha: 1;
        background-color: rgba(var(--m-color-primary-l-1),var(--m-bg-alpha))
    }
}
@media only screen and (min-width: 992px) {
    [lg~="-mt-4"] {
        margin-top: -1rem
    }
    [lg~="px-24"] {
        padding-right: 6rem;
        padding-left: 6rem
    }
    [lg~="gap-8"] {
        gap: 2rem
    }
    [lg~="px-30"] {
        padding-right: 7.5rem;
        padding-left: 7.5rem
    }
    [lg~="text-190"] {
        font-size: 1.9000000000000001rem
    }
    [lg~="w-20"] {
        width: 5rem !important
    }
    [lg~="text-350"] {
        font-size: 3.5rem
    }
    [lg~="cols-4"] {
        grid-template-columns: repeat(4, minmax(0, 1fr))
    }
    [lg~="d-none"] {
        display: none;
        -ms-display: none
    }
    [lg~="col-3"] {
        grid-column: auto / span 3
    }
    [lg~="cols-5"] {
        grid-template-columns: repeat(5, minmax(0, 1fr))
    }
    [lg~="cols-7"] {
        grid-template-columns: repeat(7, minmax(0, 1fr))
    }
    [lg~="col-5"] {
        grid-column: auto / span 5
    }
    [lg~="col-2"] {
        grid-column: auto / span 2
    }
    [lg~="text-120"] {
        font-size: 1.2rem
    }
    [lg~="text-180"] {
        font-size: 1.8rem
    }
    [lg~="pr-30"] {
        padding-right: 7.5rem
    }
    [lg~="col-4"] {
        grid-column: auto / span 4
    }
    [lg~="a-items-center"] {
        align-items: center
    }
    [lg~="max-w-half"] {
        max-width: 50%
    }
    [lg~="grid"] {
        display: grid;
        grid-template-columns: repeat(1, minmax(0, 1fr));
        grid-gap: 1rem;
        --m-box-start: start;
        --m-box-end: end
    }
    [lg~="gap-12"] {
        gap: 3rem
    }
    [lg~="pr-6"] {
        padding-right: 1.5rem
    }
    [lg~="cols-3"] {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }
    [lg~="pt-8"] {
        padding-top: 2rem
    }
    [lg~="cols-6"] {
        grid-template-columns: repeat(6, minmax(0, 1fr))
    }
    [lg~="gap-16"] {
        gap: 4rem
    }
    [lg~="mr-4"] {
        margin-right: 1rem
    }
}
@media only screen and (max-width: 991.98px) {
    [\i-lg~="d-none"] {
        display: none;
        -ms-display: none
    }
    [\i-lg~="border-bottom-none"] {
        border-bottom-width: 0
    }
    [\i-lg~="p-fixed"] {
        position: fixed
    }
    [\i-lg~="z-50"] {
        z-index: 50
    }
    [\i-lg~="bottom-0"] {
        bottom: 0rem
    }
    [\i-lg~="left-0"] {
        left: 0rem
    }
    [\i-lg~="right-0"] {
        right: 0rem
    }
    [\i-lg~="bg-body"] {
        --m-bg-alpha: 1;
        background-color: rgba(var(--m-color-body),var(--m-bg-alpha))
    }
    [\i-lg~="border-top-2"] {
        border-top-width: 2px
    }
    [\i-lg~="border-bodylight"] {
        --m-border-alpha: 1;
        border-color: rgba(var(--m-color-bodylight),var(--m-border-alpha))
    }
    [\i-lg~="flex-col"] {
        flex-direction: column
    }
    [\i-lg~="py-1"] {
        padding-top: 0.25rem;
        padding-bottom: 0.25rem
    }
    [\i-lg~="flex-grow-1"] {
        flex-grow: 1
    }
    [\i-lg~="text-center"] {
        text-align: center
    }
    [\i-lg~="border-alpha-50"] {
        --m-border-alpha: 0.5
    }
}
@media only screen and (max-width: 767.98px) {
    [\i-md~="d-none"] {
        display: none;
        -ms-display: none
    }
    [\i-md~="text-center"] {
        text-align: center
    }
    [\i-md~="j-content-center"] {
        justify-content: center
    }
    [\i-md~="-mr-24"] {
        margin-right: -6rem
    }
    [\i-md~="flex-col"] {
        flex-direction: column
    }
    [\i-md~="-mx-6"] {
        margin-right: -1.5rem;
        margin-left: -1.5rem
    }
    [\i-md~="px-6"] {
        padding-right: 1.5rem;
        padding-left: 1.5rem
    }
    [\i-md~="pa-5"] {
        padding: 1.25rem
    }
    [\i-md~="gap-4"] {
        gap: 1rem
    }
    [\i-md~="text-80"] {
        font-size: 0.8rem
    }
    [\i-md~="text-100"] {
        font-size: 1rem
    }
    [\i-md~="mb-0"] {
        margin-bottom: 0rem
    }
    [\i-md~="p-absolute"] {
        position: absolute
    }
    [\i-md~="left-4"] {
        left: 1rem
    }
    [\i-md~="h-\(1px\)"] {
        height: 1px
    }
    [\i-md~="w-full"] {
        width: 100%
    }
    [\i-md~="mx-0"] {
        margin-right: 0rem;
        margin-left: 0rem
    }
    [\i-md~="mb-6"] {
        margin-bottom: 1.5rem
    }
    [\i-md~="px-0"] {
        padding-right: 0rem;
        padding-left: 0rem
    }
    [\i-md~="\!d-none"] {
        display: none !important;
        -ms-display: none !important
    }
    [\i-md~="pt-4"] {
        padding-top: 1rem
    }
    [\i-md~="pt-2"] {
        padding-top: 0.5rem
    }
}
@media only screen and (max-width: 575.98px) {
    [\i-sm~="mb-2"] {
        margin-bottom: 0.5rem
    }
    [\i-sm~="text-150"] {
        font-size: 1.5rem
    }
    [\i-sm~="mb-4"] {
        margin-bottom: 1rem
    }
    [\i-sm~="d-none"] {
        display: none;
        -ms-display: none
    }
    [\i-sm~="gap-1"] {
        gap: 0.25rem
    }
    [\i-sm~="text-60"] {
        font-size: 0.6rem
    }
    [\i-sm~="px-1"] {
        padding-right: 0.25rem;
        padding-left: 0.25rem
    }
    [\i-sm~="text-50"] {
        font-size: 0.5rem
    }
    [\i-sm~="gap-3"] {
        gap: 0.75rem
    }
    [\i-sm~="w-15"] {
        width: 3.75rem
    }
    [\i-sm~="text-100"] {
        font-size: 1rem
    }
    [\i-sm~="text-85"] {
        font-size: 0.85rem
    }
    [\i-sm~="flex-col"] {
        flex-direction: column
    }
    [\i-sm~="mb-8"] {
        margin-bottom: 2rem
    }
    [\i-sm~="mx-auto"] {
        margin-right: auto;
        margin-left: auto
    }
    [\i-sm~="w-3"] {
        width: 0.75rem
    }
    [\i-sm~="-mx-6"] {
        margin-right: -1.5rem;
        margin-left: -1.5rem
    }
    [\i-sm~="\!px-6"] {
        padding-right: 1.5rem !important;
        padding-left: 1.5rem !important
    }
    [\i-sm~="text-110"] {
        font-size: 1.1rem
    }
    [\i-sm~="px-0"] {
        padding-right: 0rem;
        padding-left: 0rem
    }
    [\i-sm~="text-120"] {
        font-size: 1.2rem
    }
    [\i-sm~="px-6"] {
        padding-right: 1.5rem;
        padding-left: 1.5rem
    }
    [\i-sm~="gap-4"] {
        gap: 1rem
    }
    [\i-sm~="pt-5"] {
        padding-top: 1.25rem
    }
    [\i-sm~="gap-2"] {
        gap: 0.5rem
    }
    [\i-sm~="w-88"] {
        width: 22rem
    }
    [\i-sm~="text-center"] {
        text-align: center
    }
}
[m-theme="dark"] [dark~="bg-bodylight-1"] {
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-bodylight-l-1),var(--m-bg-alpha))
}
[m-theme="dark"] [dark~="bg-bodylight"] {
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-bodylight),var(--m-bg-alpha))
}
#loading{width:100%;height:100%;position:fixed;z-index:9999999;top:0;left:0;display:flex;background:#fff;align-items:center;justify-content:center;transition:.3s}#loading.disabled{opacity:0;visibility:hidden}.loader{width:48px;height:48px;display:block;margin:15px auto;position:relative;color:#0a0a0a;box-sizing:border-box;animation:1s linear infinite rotation}.loader::after,.loader::before{content:'';box-sizing:border-box;position:absolute;width:22px;height:22px;top:0;background-color:#0a0a0a;border-radius:50%;animation:1s ease-in-out infinite scale50}.loader::before{top:auto;bottom:0;background-color:#fa0000;animation-delay:.5s}@media (prefers-color-scheme:dark){#loading{background:#0a0a0a}.loader::after{background-color:#fff}}@keyframes rotation{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes scale50{0%,100%{transform:scale(0)}50%{transform:scale(1)}}

#add-reply,  #add-comment {
    position: fixed;
    z-index: 111;
    background: rgba(128,128,128,.5);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
    transition-duration: 400ms;
    -webkit-transition-duration: 400ms;
    -o-transition-duration: 400ms
}
#add-reply .close-modal.icon-x-2, #add-comment .close-modal.icon-x-2 {
    cursor: pointer
}
#add-reply .cover, #add-comment .cover {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1
}
#add-reply.active, #add-comment.active {
    visibility: visible;
    opacity: 1
}
#add-reply ::-webkit-scrollbar-track, #add-comment ::-webkit-scrollbar-track {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem
}
#add-reply .box, #add-comment .box {
    width: 90%;
    max-height: 80%;
    max-width: 38rem;
    overflow: auto;
    padding: 0 2.5rem 2.5rem;
    background: rgba(var(--m-color-body), 1);
    border-radius: .75rem;
    --m-shadow-color: 0, 0, 0;
    --m-shadow-alpha: 0.05;
    box-shadow: 0 1px 1px rgba(var(--m-shadow-color), var(--m-shadow-alpha)),0 2px 2px rgba(var(--m-shadow-color), var(--m-shadow-alpha)),0 4px 4px rgba(var(--m-shadow-color), var(--m-shadow-alpha));
    -webkit-box-shadow: 0 1px 1px rgba(var(--m-shadow-color), var(--m-shadow-alpha)),0 2px 2px rgba(var(--m-shadow-color), var(--m-shadow-alpha)),0 4px 4px rgba(var(--m-shadow-color), var(--m-shadow-alpha))
}
@media only screen and (max-width: 575.98px)  {
    #add-reply .box, #add-comment .box {
        width: 100%;
        height: 100%;
        max-height: 100%;
        padding: 0 1.5rem 1.5rem;
        border-radius: 0
    }
}
#add-reply .input, #add-comment .input {
    margin-bottom: 1.5rem
}
#add-reply textarea, #add-reply input, #add-comment textarea, #add-comment input {
    border: 1px solid rgba(var(--m-color-bodylight), 1);
    padding: .95rem 1.25rem;
    width: 100%;
    border-radius: .5rem;
    font-size: 1rem;
    transition-duration: 250ms;
    -webkit-transition-duration: 250ms;
    -o-transition-duration: 250ms;
    background: none;
    color: rgba(var(--m-color-invert), 1);
    min-width: 100%;
    max-width: 100%
}
#add-reply textarea:focus, #add-reply input:focus, #add-comment textarea:focus, #add-comment input:focus {
    border: 1px solid rgba(var(--m-color-bodylight-d-5), 1)
}
#add-reply .cons, #add-reply .pros, #add-comment .cons, #add-comment .pros {
    position: relative;
    margin-bottom: 1rem
}
#add-reply .cons li, #add-reply .pros li, #add-comment .cons li, #add-comment .pros li {
    display: flex;
    align-items: center;
    gap: .2rem
}
#add-reply .cons .icon-x-2, #add-reply .pros .icon-x-2, #add-comment .cons .icon-x-2, #add-comment .pros .icon-x-2 {
    --m-text-alpha: 1;
    color: rgba(var(--m-color-orange),var(--m-text-alpha));
    cursor: pointer
}
#add-reply .cons .icon-plus1, #add-reply .pros .icon-plus1, #add-comment .cons .icon-plus1, #add-comment .pros .icon-plus1 {
    position: absolute;
    left: 0;
    top: 0;
    padding: 1.15rem;
    font-size: .8rem;
    opacity: .5;
    cursor: pointer
}
#add-reply .cons .error, #add-reply .pros .error, #add-comment .cons .error, #add-comment .pros .error {
    padding: .5rem 1.25rem 0;
    --m-text-alpha: 1;
    color: rgba(var(--m-color-orange),var(--m-text-alpha));
    font-size: 0.9rem
}
#add-reply .sections, #add-comment .sections {
    display: flex;
    width: 100%;
    justify-content: space-between;
    position: relative
}
#add-reply .sections::before, #add-comment .sections::before {
    content: "";
    position: absolute;
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-bodylight),var(--m-bg-alpha));
    height: 2px;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    left: 0
}
#add-reply .sections div, #add-comment .sections div {
    width: .3rem;
    height: .3rem;
    border-radius: 5rem;
    transform: rotateY(-50%);
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-bodylight-d-3),var(--m-bg-alpha));
    position: relative;
    z-index: 2
}
[m-theme="dark"] #add-reply .sections div, [m-theme="dark"]  #add-comment .sections div {
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-bodylight-l-3),var(--m-bg-alpha))
}
#add-reply .ranges, #add-comment .ranges {
    margin-bottom: 1.5rem;
    position: relative;
    user-select: none
}
#add-reply .ranges .line, #add-comment .ranges .line {
    height: .5rem;
    background: rgba(var(--m-color-bodylight), 1);
    border-radius: 60px;
    position: relative;
    overflow: hidden
}
#add-reply .ranges .line .line-max, #add-comment .ranges .line .line-max {
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-primary),var(--m-bg-alpha));
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0rem;
    top: 0rem
}
#add-reply .ranges .line .line-min, #add-comment .ranges .line .line-min {
    width: 0rem;
    height: 100%;
    position: absolute;
    left: 0rem;
    top: 0rem;
    background: #eee
}
#add-reply .ranges .min, #add-comment .ranges .min {
    width: 1rem;
    height: 1rem;
    border-radius: 9999px;
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-primary),var(--m-bg-alpha));
    position: absolute;
    left: 0rem;
    top: -0.25rem;
    cursor: pointer
}
#add-reply .ranges .max, #add-comment .ranges .max {
    width: 1rem;
    height: 1rem;
    border-radius: 9999px;
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-primary),var(--m-bg-alpha));
    position: absolute;
    left: 100%;
    top: -0.25rem;
    cursor: pointer;
    transform: translateX(-.5rem)
}
#add-reply .suggest, #add-comment .suggest {
    border: 2px solid rgba(128,128,128,.2);
    padding: 1rem .5rem;
    gap: .5rem;
    display: flex;
    font-size: .9rem;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-radius: .5rem;
    cursor: pointer
}
#add-reply .suggest.active, #add-comment .suggest.active {
    --m-border-alpha: 1;
    border-color: rgba(var(--m-color-primary),var(--m-border-alpha))
}
#add-reply .suggest svg, #add-comment .suggest svg {
    width: 2rem;
    display: block;
    opacity: .9
}   

.select-zone {
    border-radius: .625rem;
  background: rgba(var(--m-color-body), 1) !important;
  box-shadow: 0 .5rem 1rem 0px #80808030;
}

.invalid-feedback{
    color: red;
    padding-block : 5px;
}

.bg-none{
    background: none;
}

.alert {
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
}
.alert h4 {
  margin-top: 0;
  color: inherit;
}
.alert .alert-link {
  font-weight: bold;
}
.alert > p,
.alert > ul {
  margin-bottom: 0;
}
.alert > p + p {
  margin-top: 5px;
}
.alert-dismissable,
.alert-dismissible {
  padding-right: 35px;
}
.alert-dismissable .close,
.alert-dismissible .close {
  position: relative;
  top: -2px;
  right: -21px;
  color: inherit;
}
.alert-success {
  color: #3c763d;
  background-color: #dff0d8;
  border-color: #d6e9c6;
}
.alert-success hr {
  border-top-color: #c9e2b3;
}
.alert-success .alert-link {
  color: #2b542c;
}
.alert-info {
  color: #31708f;
  background-color: #d9edf7;
  border-color: #bce8f1;
}
.alert-info hr {
  border-top-color: #a6e1ec;
}
.alert-info .alert-link {
  color: #245269;
}
.alert-warning {
  color: #8a6d3b;
  background-color: #fcf8e3;
  border-color: #faebcc;
}
.alert-warning hr {
  border-top-color: #f7e1b5;
}
.alert-warning .alert-link {
  color: #66512c;
}
.alert-danger {
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
}
.alert-danger hr {
  border-top-color: #e4b9c0;
}
.alert-danger .alert-link {
  color: #843534;
}


.loading-box {
position: absolute;
right: 0;
left: 0;
top: 0;
bottom: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background: rgba(255,255,255,0.8);
z-index: 100000;
border-radius: 16px;
display: none;
}

.loading-box span.spinner {

  width: 80px;
  height: 80px;
  border: 2px solid;
      border-top-color: currentcolor;
      border-right-color: currentcolor;
      border-bottom-color: currentcolor;
      border-left-color: currentcolor;
  border-color: #6f7377 #6f7377 #6f7377 #f6f6f6;
  border-radius: 50%;
  -webkit-animation: spinner 1s linear infinite;
  animation: spinner 1s linear infinite;
  z-index:100000;

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

.text-end{
    text-align: end;
}

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

.input-search{
border: 1px solid rgba(var(--m-color-bodylight), 1);
  padding: .95rem 1.25rem;
  border-radius: .5rem;
  font-size: 1rem;
  transition-duration: 250ms;
  -webkit-transition-duration: 250ms;
  -o-transition-duration: 250ms;
  background: none;
  color: rgba(var(--m-color-invert), 1);
  min-width: 100%;
  max-width: 100%;
  margin-bottom: 20px;
}
.half-width{
    width: 50%;
}

.min-width-50{
    min-width: 50% !important;
}

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

#product-search .search-filters {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1rem;
}

#product-search .search-filters > .half-width,
#product-search .search-filters > .col,
#product-search .search-filters > .search-action {
    min-width: 0;
}

#product-search .search-filters > .half-width {
    width: 50%;
}

#product-search .search-filters > .col {
    flex: 1 1 14rem;
}

#product-search .search-filters > .search-action {
    flex: 0 0 auto;
}

@media only screen and (max-width: 767.98px)  {
    #product-search .search-filters {
        display: block;
    }

    #product-search .search-filters > .half-width,
    #product-search .search-filters > .col,
    #product-search .search-filters > .search-action {
        width: 100%;
    }

    #product-search .search-filters > .search-action #button-search {
        width: 100%;
    }
}


.justify-end{
    justify-content: end;
}

.m-in{
    margin-inline: 15px;
}

.text-secondary{
    
    color: rgba(var(--m-color-invert-l-5),var(--m-text-alpha)) !important;
}
.pb-none{
    padding-bottom: 0px !important;
}

.pt-none{
    padding-top: 0px !important;
}

.btn-group{
    display:flex;
    gap: 0.5rem;
}

.related-item{
  display: flex;
  gap: 1.5rem;
}
.image-region{
    position: absolute;
  left: 0;
}
.pos-relative{
    position: relative;
}
.w100{
    width:100%;
}


#product .product-features, #product .product-details {
    display: flex;
    -ms-display: flex;
    --m-box-start:flex-start;
    --m-box-end:flex-end;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 1rem
}
#product .product-features {
    margin-bottom: .75rem
}
#product .product-features-table {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    grid-gap: 1rem;
    --m-box-start: start;
    --m-box-end: end;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0rem;
    margin-bottom: 0.75rem;
    background: none;
    padding: 0;
    outline: 2px solid #ddd;
    overflow: hidden
}
#product .product-features-table > div {
    display: flex;
    align-items: center;
    font-size: .75rem;
    justify-content: space-between;
    padding: .35rem .5rem;
    outline: 1px solid #ddd
}
#product .product-features-table .t {
    display: flex;
    align-items: center;
    gap: .2rem
}
#product .product-features-table svg {
    width: 1rem;
    height: 1rem;
    opacity: 0.5
}
#product .feature-item {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    background: rgba(128,128,128,0.2);
    padding: .125rem .3rem .15rem;
    border-radius: .25rem;
    gap: .125rem
}
#product .feature-item:hover {
    background: rgba(128,128,128,0.3)
}
#product .feature-item svg {
    width: 1rem;
    height: 1rem;
    opacity: 0.5
}

.notfound-box{
    border: solid 2px;
    border-radius: 20px;
    border-color: lightgray;
    padding-bottom: 20px;
}

.input-option{
    border: solid black 1px;
  border-radius: 6px;
  padding: 5px;
}

.margintb20{
    margin: 20px 0px; 
}

.bg-presale{
    background-color: rgba(136 171 12);
}
.bg-ani{
    background-color: rgba(0 98 246);
}

.bg-13hour{
    background-color: rgba(17 158 95);
}

.bg-out{
    background-color: rgba(250 0 0);
}

.bg-posti{
    background-color: rgba(247 110 17);
}
.bg-tamas{
    background-color: rgba(71 71 71);
}
.font-shabnam{
font-family: Shabnam;
}
.text-align-justify{
    text-align:justify;
}
}
}


#product {
    padding-bottom: 5rem
}
@media only screen and (max-width: 575.98px)  {
    #product {
        padding-bottom: 3rem
    }
}
#product .product-image {
    width: 12rem;
    min-width: 12rem;
    aspect-ratio: 2/3;
    object-fit: cover;
    border-radius: .65rem
}
#product .product-title {
    font-size: 1.8rem;
    margin-bottom: 0.5rem
}
@media only screen and (max-width: 767.98px)  {
    #product .product-title {
        font-size: 1.3rem
    }
}
#product .product-features, #product .product-details {
    display: flex;
    -ms-display: flex;
    --m-box-start:flex-start;
    --m-box-end:flex-end;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 1rem
}
#product .product-features {
    margin-bottom: .75rem
}
#product .product-features-table {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    grid-gap: 1rem;
    --m-box-start: start;
    --m-box-end: end;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0rem;
    margin-bottom: 0.75rem;
    background: none;
    padding: 0;
    outline: 2px solid #ddd;
    overflow: hidden
}
#product .product-features-table > div {
    display: flex;
    align-items: center;
    font-size: .75rem;
    justify-content: space-between;
    padding: .35rem .5rem;
    outline: 1px solid #ddd
}
#product .product-features-table .t {
    display: flex;
    align-items: center;
    gap: .2rem
}
#product .product-features-table svg {
    width: 1rem;
    height: 1rem;
    opacity: 0.5
}
#product .feature-item {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    background: rgba(128,128,128,0.2);
    padding: .125rem .3rem .15rem;
    border-radius: .25rem;
    gap: .125rem
}
#product .feature-item:hover {
    background: rgba(128,128,128,0.3)
}
#product .feature-item svg {
    width: 1rem;
    height: 1rem;
    opacity: 0.5
}
#product .like {
    cursor: pointer;
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-primary),var(--m-bg-alpha));
    --m-text-alpha: 1;
    color: rgba(var(--m-color-white),var(--m-text-alpha));
    border-radius: 9999px;
    font-size: 0.8rem;
    display: flex;
    -ms-display: flex;
    --m-box-start:flex-start;
    --m-box-end:flex-end;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    transition-duration: 250ms;
    -webkit-transition-duration: 250ms;
    -o-transition-duration: 250ms
}
#product .like:hover {
    box-shadow: 0 0 0 3px rgba(128, 128, 128, .25)
}
#product .like svg {
    width: 1rem;
    height: 1rem
}
#product .like svg path {
    fill: #fff
}
#product .compare {
    cursor: pointer;
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-green),var(--m-bg-alpha));
    --m-text-alpha: 1;
    color: rgba(var(--m-color-white),var(--m-text-alpha));
    border-radius: 9999px;
    font-size: 0.8rem;
    display: flex;
    -ms-display: flex;
    --m-box-start:flex-start;
    --m-box-end:flex-end;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    transition-duration: 250ms;
    -webkit-transition-duration: 250ms;
    -o-transition-duration: 250ms
}
#product .compare:hover {
    box-shadow: 0 0 0 3px rgba(128, 128, 128, .25)
}
#product .compare svg {
    width: 1rem;
    height: 1rem
}
#product .compare svg path {
    fill: #fff
}
#product .share {
    cursor: pointer;
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-blue),var(--m-bg-alpha));
    --m-text-alpha: 1;
    color: rgba(var(--m-color-white),var(--m-text-alpha));
    border-radius: 9999px;
    font-size: 0.8rem;
    display: flex;
    -ms-display: flex;
    --m-box-start:flex-start;
    --m-box-end:flex-end;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    transition-duration: 250ms;
    -webkit-transition-duration: 250ms;
    -o-transition-duration: 250ms;
    margin-left: 0.5rem
}
#product .share:hover {
    box-shadow: 0 0 0 3px rgba(128, 128, 128, .25)
}
#product .share i {
    margin-left: -0.0875rem
}
#product .share svg {
    width: 1rem;
    height: 1rem
}
#product .share svg path {
    fill: #fff
}
#product .info {
    font-size: 0.9rem;
    margin-right: 0.5rem;
    margin-left: 0.5rem
}
#product .info .t, #product .info .d {
    display: inline-block
}
#product .info .t {
    opacity: .7;
    margin: .2rem 0
}
#product .info .d {
    --m-text-alpha: 1;
    color: rgba(var(--m-color-primary),var(--m-text-alpha))
}
#product .product-offer {
    box-shadow: 0 .1rem .6rem rgba(128, 128, 128, .2);
    border-radius: .75rem;
    padding: 1.25rem;
    text-align: center;
    display: flex;
    flex-direction: column
}
#product .product-offer .old {
    position: relative;
    opacity: .4
}
#product .product-offer .old::before {
    content: "";
    position: absolute;
    top: 44%;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(var(--m-color-invert), 1)
}
#product .product-offer .button-primary {
    font-size: 1.1rem;
    padding: 1rem 0 1.1rem;
    border-radius: .6rem
}
#product .product-offer .button-primary i {
    font-size: 1rem;
    margin-bottom: .05rem
}
#product .countdown-timer {
    display: inline-block;
    direction: ltr;
    vertical-align: middle
}
#product .countdown-timer * {
    display: inline-block;
    margin-left: -.15rem
}
#product .countdown-timer *:not(:last-child)::after {
    content: ":";
    margin-left: .05rem
}
#product .enabling-form {
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-bodylight),var(--m-bg-alpha));
    --m-bg-alpha: 0.5;
    padding-top: 3rem;
    padding-bottom: 3rem
}
@media only screen and (min-width: 768px)  {
    #product .enabling-form .grid {
        gap: 1.5rem
    }
}
#product .enabling-form .grid div {
    display: flex;
    gap: 1rem
}
#product .enabling-form .grid label {
    padding-top: 0.3125rem;
    padding-bottom: 0.3125rem;
    min-width: 3.5rem;
    display: block
}
@media only screen and (min-width: 576px)  {
    #product .enabling-form .grid label {
        font-size: 1.1rem
    }
}
#product .enabling-form .grid input, #product .enabling-form .grid textarea {
    flex-grow: 1;
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-body),var(--m-bg-alpha));
    border-radius: 0.5rem;
    padding-right: 1rem;
    padding-left: 1rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    --m-shadow-color: 0, 0, 0;
    --m-shadow-alpha: 0.05;
    box-shadow: 0 1px 1px rgba(var(--m-shadow-color), var(--m-shadow-alpha)),0 2px 2px rgba(var(--m-shadow-color), var(--m-shadow-alpha));
    -webkit-box-shadow: 0 1px 1px rgba(var(--m-shadow-color), var(--m-shadow-alpha)),0 2px 2px rgba(var(--m-shadow-color), var(--m-shadow-alpha));
    --m-text-alpha: 1;
    color: rgba(var(--m-color-invert),var(--m-text-alpha))
}
#product .enabling-form .button-selector .button {
    padding-right: 1rem;
    padding-left: 1rem;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
    margin-top: auto;
    margin-bottom: auto;
    cursor: pointer
}
#product .enabling-form .button-selector .button.active {
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-primary),var(--m-bg-alpha))
}
#product .enabling-form .button-selector .button:not(.active) {
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-body),var(--m-bg-alpha));
    --m-text-alpha: 1;
    color: rgba(var(--m-color-invert),var(--m-text-alpha));
    box-shadow: 0 3px 8px rgba(128,128,128,.15)
}
#product .icon-list {
    cursor: pointer;
    opacity: 1
}
@media only screen and (min-width: 576px)  {
    #product .icon-list {
        font-size: 1.25rem
    }
}
#product .icon-list.active {
    opacity: 0.5
}
#product .icon-grid {
    display: grid;
    -ms-display: grid;
    --m-box-start: start;
    --m-box-end: end;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.125rem;
    cursor: pointer;
    opacity: 1
}
#product .icon-grid.active {
    opacity: 0.5
}
#product .icon-grid div {
    width: 0.5625rem;
    height: 0.5625rem;
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-invert),var(--m-bg-alpha));
    border-radius: 0.1875rem
}
@media only screen and (max-width: 575.98px)  {
    #product .icon-grid div {
        width: 0.4375rem;
        height: 0.4375rem
    }
}
@media only screen and (max-width: 575.98px)  {
    #product .icon-grid {
        width: 1rem
    }
}
#product .product-tabs {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem
}
@media only screen and (max-width: 575.98px)  {
    #product .product-tabs {
        font-size: 1rem
    }
}
#product .product-tabs .tab-button {
    padding: 1.5rem 2rem;
    transition-duration: 250ms;
    -webkit-transition-duration: 250ms;
    -o-transition-duration: 250ms;
    font-weight: bold
}
@media only screen and (max-width: 575.98px)  {
    #product .product-tabs .tab-button {
        padding: 1rem 1rem
    }
}
#product .product-tabs .tab-button.tab-active {
    --m-text-alpha: 1;
    color: rgba(var(--m-color-primary),var(--m-text-alpha));
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-bodylight),var(--m-bg-alpha));
    --m-bg-alpha: 0.5;
    border-radius: 1rem 1rem 0 0
}
#product .questions, #product .comments {
    position: relative
}
#product .questions .question, #product .comments .question {
    border: 1px solid rgba(var(--m-color-bodylight), 1);
    padding: 1rem;
    border-radius: .5rem;
    margin-bottom: 1rem
}
#product .questions .question .answer, #product .comments .question .answer {
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-bodylight),var(--m-bg-alpha));
    padding: 1rem;
    border-radius: 0.5rem;
    --m-bg-alpha: 0.5;
    margin-top: 1rem
}
#product .questions .question .answer.accepted-answer, #product .comments .question .answer.accepted-answer {
    border-width: 2px;
    --m-border-alpha: 1;
    border-color: rgba(var(--m-color-green),var(--m-border-alpha))
}
#product .questions .pagination, #product .comments .pagination {
    display: flex;
    gap: .5rem;
    padding-top: 2rem
}
#product .questions .pagination a, #product .comments .pagination a {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: rgba(128, 128, 128, .2);
    display: flex;
    align-items: center;
    justify-content: center
}
#product .questions .pagination a.current, #product .comments .pagination a.current {
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-primary),var(--m-bg-alpha));
    --m-text-alpha: 1;
    color: rgba(var(--m-color-white),var(--m-text-alpha))
}
#product .questions .stars, #product .comments .stars {
    display: flex;
    direction: rtl;
    transform: rotateY(180deg);
    justify-content: end;
    margin-bottom: .5rem;
    margin-top: .2rem;
    color: #ed8a19;
    gap: .05rem
}
#product .questions .ratings, #product .comments .ratings {
    margin-bottom: auto
}
@media only screen and (min-width: 768px)  {
    #product .questions .ratings, #product .comments .ratings {
        position: sticky;
        top: 5rem
    }
}
@media only screen and (min-width: 992px)  {
    #product .questions .ratings, #product .comments .ratings {
        top: 1.5rem
    }
}
#product .questions .ratings ul, #product .comments .ratings ul {
    padding-top: 1rem
}
#product .questions .ratings li, #product .comments .ratings li {
    padding-top: .75rem
}
#product .questions .grade, #product .comments .grade {
    display: flex;
    align-items: center;
    margin-top: .25rem;
    font-size: 1rem
}
#product .questions .grade .bar, #product .comments .grade .bar {
    flex-grow: 1;
    height: .5rem;
    border-radius: 99rem;
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-bodylight),var(--m-bg-alpha));
    --m-bg-alpha: 0.5;
    overflow: hidden
}
#product .questions .grade .bar div, #product .comments .grade .bar div {
    background: rgba(var(--m-color-primary), 1);
    border-radius: 99rem;
    height: 100%
}
#product .questions .grade div:nth-child(2), #product .comments .grade div:nth-child(2) {
    width: 2rem;
    min-width: 2rem;
    text-align: end
}
#product .questions .comment, #product .comments .comment {
    border-bottom: 2px solid rgba(128,128,128,.4);
    padding-bottom: .85rem;
    padding-top: 1rem
}
#product .questions .comment .comment-head, #product .comments .comment .comment-head {
    border-bottom: 2px solid rgba(128,128,128,.1)
}
#product .questions .comment .comment-title, #product .comments .comment .comment-title {
    display: flex;
    font-size: 1.2rem;
    gap: 0.75rem;
    padding-bottom: .75rem
}
#product .questions .comment .comment-title .comment-rating, #product .comments .comment .comment-title .comment-rating {
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-primary),var(--m-bg-alpha));
    --m-text-alpha: 1;
    color: rgba(var(--m-color-white),var(--m-text-alpha));
    width: 3rem;
    min-width: 3rem;
    text-align: center;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    border-radius: 0.625rem;
    font-size: 1rem;
    margin-bottom: auto
}
#product .questions .comment .comment-title .comment-rating.green, #product .comments .comment .comment-title .comment-rating.green {
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-green),var(--m-bg-alpha))
}
#product .questions .comment .comment-title .comment-rating.orange, #product .comments .comment .comment-title .comment-rating.orange {
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-orange),var(--m-bg-alpha))
}
#product .questions .comment .comment-title .comment-rating.gray, #product .comments .comment .comment-title .comment-rating.gray {
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-invert),var(--m-bg-alpha));
    --m-bg-alpha: 0.5
}
#product .questions .comment .comment-title .comment-author, #product .comments .comment .comment-title .comment-author {
    margin-top: .5rem;
    display: flex;
    font-size: .8rem;
    gap: .75rem;
    align-items: center;
    --m-text-alpha: 1;
    color: rgba(var(--m-color-invert),var(--m-text-alpha));
    --m-text-alpha: 0.5
}
#product .questions .comment .comment-title .comment-author .dot, #product .comments .comment .comment-title .comment-author .dot {
    width: .25rem;
    height: .25rem;
    border-radius: 50%;
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-primary),var(--m-bg-alpha));
    margin-right: -0.25rem;
    margin-left: -0.25rem
}
#product .questions .comment .comment-title .comment-author .user-type, #product .comments .comment .comment-title .comment-author .user-type {
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-invert),var(--m-bg-alpha));
    --m-bg-alpha: 0.1;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
    border-radius: 9999px
}
#product .questions .comment .comment-title .comment-author .user-type.bought, #product .comments .comment .comment-title .comment-author .user-type.bought {
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-green),var(--m-bg-alpha));
    --m-bg-alpha: 0.1;
    --m-text-alpha: 1;
    color: rgba(var(--m-color-green),var(--m-text-alpha));
    padding-right: 0.75rem;
    padding-left: 0.75rem
}
#product .questions .comment .pros, #product .questions .comment .cons, #product .comments .comment .pros, #product .comments .comment .cons {
    --m-text-alpha: 1;
    color: rgba(var(--m-color-invert),var(--m-text-alpha));
    --m-text-alpha: 0.7000000000000001;
    margin-top: 0.5rem
}
#product .questions .comment .pros li::before, #product .comments .comment .pros li::before {
    content: "+";
    margin-inline-end: .5rem;
    font-weight: 700;
    font-size: 1.1rem;
    --m-text-alpha: 1;
    color: rgba(var(--m-color-green),var(--m-text-alpha))
}
#product .questions .comment .cons li::before, #product .comments .comment .cons li::before {
    content: "-";
    margin-inline-end: .5rem;
    font-weight: 700;
    font-size: 1.1rem;
    --m-text-alpha: 1;
    color: rgba(var(--m-color-orange),var(--m-text-alpha))
}
#product .questions .comment .text, #product .comments .comment .text {
    padding-top: .75rem
}
#product .questions .comment .agreement, #product .comments .comment .agreement {
    font-size: .9rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .75rem 0 0;
    margin-bottom: -.2rem;
    --m-text-alpha: 1;
    color: rgba(var(--m-color-invert),var(--m-text-alpha));
    --m-text-alpha: 0.5
}
#product .questions .comment .agreement.agree, #product .comments .comment .agreement.agree {
    --m-text-alpha: 1;
    color: rgba(var(--m-color-green),var(--m-text-alpha))
}
#product .questions .comment .agreement.disagree, #product .comments .comment .agreement.disagree {
    --m-text-alpha: 1;
    color: rgba(var(--m-color-orange),var(--m-text-alpha))
}
#product .questions .comment .agreement svg, #product .comments .comment .agreement svg {
    width: 0.875rem
}
#product .product-tabs-info {
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-bodylight),var(--m-bg-alpha));
    --m-bg-alpha: 0.5;
    padding-top: 3rem;
    padding-bottom: 3rem;
    margin-bottom: 4rem
}
#product .product-tabs-info table {
    width: 100%;
    overflow: hidden;
    font-size: 1rem
}
#product .product-tabs-info table .title-attribute {
    --m-text-alpha: 1;
    color: rgba(var(--m-color-white),var(--m-text-alpha));
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-invert),var(--m-bg-alpha));
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    font-size: 1.1500000000000001rem;
    font-weight: 500
}
[m-theme="dark"] #product .product-tabs-info table .title-attribute {
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-primary),var(--m-bg-alpha));
    --m-bg-alpha: 0.2
}

table {
    width: 100%;
    overflow: hidden;
    font-size: 1rem
}

 table .title-attribute {
    --m-text-alpha: 1;
    color: rgba(var(--m-color-white),var(--m-text-alpha));
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-invert),var(--m-bg-alpha));
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    font-size: 1.1500000000000001rem;
    font-weight: 500
}
[m-theme="dark"]  table .title-attribute {
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-primary),var(--m-bg-alpha));
    --m-bg-alpha: 0.2
}

#product .product-tabs-info table td {
    padding: .6rem 1rem
}
#product .product-tabs-info table tr:nth-child(even) {
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-bodylight),var(--m-bg-alpha));
    --m-bg-alpha: 0.4
}
[m-theme="dark"] #product .product-tabs-info table tr:nth-child(even) {
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-bodylight),var(--m-bg-alpha));
    --m-bg-alpha: 0.25
}
@media only screen and (max-width: 575.98px)  {
    #product .product-tabs-info table {
        font-size: 0.9rem
    }
}
#product .product-tabs-info .related {
    font-size: 0.8rem;
    line-height: 1.5;
    font-family: Artin Sharp;
    margin-bottom: 1rem
}
#product .product-tabs-info .related img {
    margin: 0
}
#product .product-tabs-info .product-card {
    font-size: 0.8rem;
    line-height: 1.5;
    padding: .5rem
}
#product .product-tabs-info .product-card img {
    margin: 0
}
#product .product-tabs-info .product-card .info {
    font-size: .6rem
}
#product .product-tabs-info .product-card .product-title {
    font-size: .8rem;
    padding: .5rem;
    margin: 0
}
#product .product-tabs-info .products-list-slides {
    margin-bottom: 1rem
}
@media only screen and (max-width: 575.98px)  {
    #product .product-tabs-info {
        margin-bottom: 2.5rem
    }
}
@media only screen and (max-width: 575.98px)  {
    #product .product-tabs-info {
        padding-top: 2rem;
        padding-bottom: 2rem
    }
}
#product .images-grid .image-preview {
    position: relative;
    cursor: pointer
}
#product .images-grid .image-preview .cover {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    border-radius: .75rem;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center
}
#product .images-grid .image-preview .cover.cover-white {
    background: rgba(255,255,255,0.75);
    backdrop-filter: blur(6px)
}
#product .images-grid .image-preview .cover .icon {
    color: #fff;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.2rem;
    padding-left: .2rem;
    overflow: hidden;
    position: relative;
    background: linear-gradient(to bottom left, rgba(var(--m-color-primary), 1) 50%, rgba(var(--m-color-primary-l-3), 1) 50%)
}
#product .images-grid .image-preview .cover .icon i {
    position: relative;
    z-index: 2
}
#product .images-grid .image-preview .cover .icon::before {
    content: "";
    background: rgba(0,0,0,0.1);
    width: 0;
    height: 0;
    top: 50%;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    z-index: 1;
    opacity: 0;
    transform: translate(-50%, -50%);
    transition-duration: 300ms;
    -webkit-transition-duration: 300ms;
    -o-transition-duration: 300ms
}
#product .images-grid .image-preview .cover .icon::after {
    content: "";
    border-top: 1.2rem solid rgba(var(--m-color-primary-d-3), 1);
    border-right: 1rem solid transparent;
    border-left: 1rem solid transparent;
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: top left;
    transform: rotate(45deg)
}
#product .images-grid .image-preview .cover:hover .icon::before {
    opacity: 1;
    width: 105%;
    height: 105%
}
#product .images-grid .image-preview img {
    width: 100%;
    aspect-ratio: 1/1;
    border-radius: .75rem;
    --m-shadow-color: 0, 0, 0;
    --m-shadow-alpha: 0.05;
    box-shadow: 0 1px 1px rgba(var(--m-shadow-color), var(--m-shadow-alpha)),0 2px 2px rgba(var(--m-shadow-color), var(--m-shadow-alpha));
    -webkit-box-shadow: 0 1px 1px rgba(var(--m-shadow-color), var(--m-shadow-alpha)),0 2px 2px rgba(var(--m-shadow-color), var(--m-shadow-alpha));
    object-fit: cover;
    display: block
}
#product .info-box {
    width: 100%;
    aspect-ratio: 1/1;
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center
}
#product .info-box::before {
    content: "";
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    z-index: -1;
    background: linear-gradient(to bottom, rgba(0,0,0,0.25), rgba(255,255,255,0.75))
}
#product .info-box .background {
    width: 1000%;
    height: 1000%;
    filter: blur(100px);
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    position: absolute;
    z-index: -2
}
#product .info-box .image {
    padding: 35%;
    transition-duration: 300ms;
    -webkit-transition-duration: 300ms;
    -o-transition-duration: 300ms;
    object-fit: contain;
    aspect-ratio: 1/1
}
#product .info-box .desc {
    width: 80%;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    position: absolute;
    z-index: 2;
    text-align: center;
    color: #fff;
    opacity: 0;
    transition-duration: 300ms;
    -webkit-transition-duration: 300ms;
    -o-transition-duration: 300ms;
    font-size: 0.9rem
}
@media only screen and (max-width: 575.98px)  {
    #product .info-box .desc {
        font-size: .7rem;
        line-height: 1.5
    }
}
#product .info-box:nth-child(even)::before {
    background: linear-gradient(to top, rgba(0,0,0,0.25), rgba(255,255,255,0.75))
}
#product .info-box:nth-child(even) .background {
    transform: translate(-50%,-50%) rotate(180deg)
}
#product .info-box:hover .image {
    opacity: 0;
    transform: scale(2)
}
#product .info-box:hover .desc {
    opacity: 1
}
#product .pi-grid img {
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 1rem;
    margin: 0;
    transition-duration: 250ms;
    -webkit-transition-duration: 250ms;
    -o-transition-duration: 250ms
}
#product .pi-grid img:hover {
    transform: scale(1.03)
}


.blink-animation {
    animation: blink-animation 3s infinite linear
}
.accordion {
    width: 100%;
    margin: 20px auto;
    border: 1px solid rgba(128,128,128,.2);
    border-radius: .5rem;
    overflow: hidden;
    font-size: 1rem;
    text-align: start;
    --m-shadow-color: 0, 0, 0;
    --m-shadow-alpha: 0.05;
    box-shadow: 0 1px 1px rgba(var(--m-shadow-color), var(--m-shadow-alpha)),0 2px 2px rgba(var(--m-shadow-color), var(--m-shadow-alpha));
    -webkit-box-shadow: 0 1px 1px rgba(var(--m-shadow-color), var(--m-shadow-alpha)),0 2px 2px rgba(var(--m-shadow-color), var(--m-shadow-alpha))
}
.accordion .icon {
    transition-duration: 300ms;
    -webkit-transition-duration: 300ms;
    -o-transition-duration: 300ms
}
.accordion .icon svg {
    width: 1rem;
    display: block
}
.accordion .accordion-item {
    border-bottom: 1px solid rgba(128,128,128,.2)
}
.accordion .accordion-item:last-child {
    border-bottom: none
}
.accordion .accordion-header {
    border: none;
    cursor: pointer;
    padding: 15px;
    width: 100%;
    outline: none;
    transition: background-color 0.3s ease;
    text-align: start;
    display: flex;
    justify-content: space-between;
    align-items: center;
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-bodylight),var(--m-bg-alpha));
    --m-bg-alpha: 0.4;
    --m-text-alpha: 1;
    color: rgba(var(--m-color-invert),var(--m-text-alpha))
}
[m-theme="dark"] .accordion .accordion-header {
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-bodylight),var(--m-bg-alpha));
    --m-bg-alpha: 0.25
}
.accordion .accordion-header:hover {
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-bodylight),var(--m-bg-alpha))
}
.accordion .accordion-content {
    padding: 15px;
    display: none;
    border-top: 1px solid rgba(128,128,128,.2)
}
.accordion .accordion-item.show .accordion-content {
    display: block
}
.accordion .accordion-item.show .icon {
    transform: rotate(180deg)
}

.content-tab {
    margin: 1rem auto;
    font-size: 1rem
}
.content-tab-header {
    display: flex;
    font-family: Artin Sharp;
    font-weight: 700;
    padding-inline-start: 1rem;
    gap: .25rem;
    overflow: auto
}
.content-tab-button {
    padding: .6rem 1.25rem;
    cursor: pointer;
    border: none;
    text-align: center;
    outline: none;
    transition: background-color 0.3s ease, color 0.3s ease;
    border-radius: .5rem .5rem 0 0;
    background: rgba(var(--m-color-bodylight), 1);
    color: rgba(var(--m-color-invert), 1)
}
.content-tab-button.active {
    background: rgba(var(--m-color-primary), 1) !important;
    color: white
}
.content-tab-content-container {
    padding: 20px;
    border: 1px solid rgba(128, 128, 128, .25);
    border-radius: .75rem;
    --m-shadow-color: 0, 0, 0;
    --m-shadow-alpha: 0.05;
    box-shadow: 0 1px 1px rgba(var(--m-shadow-color), var(--m-shadow-alpha)),0 2px 2px rgba(var(--m-shadow-color), var(--m-shadow-alpha));
    -webkit-box-shadow: 0 1px 1px rgba(var(--m-shadow-color), var(--m-shadow-alpha)),0 2px 2px rgba(var(--m-shadow-color), var(--m-shadow-alpha))
}
.content-tab-content {
    display: none
}
.content-tab-content.active {
    display: block
}
.input-group {
    border-radius: 0.625rem;
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-body),var(--m-bg-alpha));
    padding-right: 1rem;
    padding-left: 1rem;
    display: flex;
    -ms-display: flex;
    --m-box-start:flex-start;
    --m-box-end:flex-end;
    align-items: center;
    gap: 0.75rem;
    box-shadow: 0 2px .5rem rgba(128,128,128,.2)
}
.input-group.disabled {
    --m-bg-alpha: 1;
    background-color: rgba(var(--m-color-bodylight),var(--m-bg-alpha));
    --m-bg-alpha: 0.5
}
.input-group .input-title {
    width: 5.875rem;
    min-width: 5.875rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    border-left-width: 1px;
    border-color: rgba(128,128,128,.15)
}
.input-group .bs-none {
    box-shadow: none !important
}
.input-group textarea, .input-group input {
    background: none;
    border: none;
    color: rgba(var(--m-color-invert), 1);
    height: 100%;
    flex-grow: 1;
    width: 0;
    position: relative;
    z-index: 80
}
.input-group textarea {
    padding: 1rem 0
}
.input-group .select {
    background: none !important;
    box-shadow: none;
    margin-right: -1rem;
    margin-left: -1rem;
    flex-grow: 1
}
.input-group .select select {
    font-size: 1rem;
    padding-top: 1.1625rem;
    padding-bottom: 1.1625rem
}
#dashboard {
#dashboard {