/*
Theme Name:  شارژر انرژی
Theme URI: https://zomorrodmedia.ir
Author: گروه توسعه کسب و کار زمــــــرد مدیـــــــــــــــــا
Author URI: https://zomorrodmedia.ir
Description: پلتفرم اختصاصی شارژر انرژی با طراحی گروهی زمرد مدیا
Version: 1.0

 ********************************************
 * Author 	: Zomorrodmedia Team			*
 * Email 	: info@zomorrodmedia.ir			*
 * Website	: www.zomorrodmedia.ir			*
 * PWA : Charger Energy team			*
 ********************************************
 */

 
 :root {
    --zmapp: linear-gradient(90deg, rgb(2 0 36 / 100%) 0%, rgb(0 93 56) 35%, rgb(0 82 99) 100%);
    --arashapp: #ceb567;
    --app: #c6a95c;
    --appfont: #4b3606;
}



/* width */
::-webkit-scrollbar {
  width: 8px;
}

/* Track */
::-webkit-scrollbar-track {
  background: rgb(0 0 0 / 10%); 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: rgb(0 0 0 / 27%); 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}

@media (width <= 1024px) {
  .hidden-mobile {
    display: none !important;
  }
}
@media (width >= 960px) {
  .hidden-desk {
    display: none !important;
  }
}



 @keyframes placeHolderShimmer{
    0% {
        background-position: -468px 0;
    }

    100% {
        background-position: 468px 0;
    }}

.preloader {
	  display: flex;
	  animation-duration: 2s;
	  animation-fill-mode: forwards;
	  animation-iteration-count: infinite;
	  animation-name: placeHolderShimmer;
	  animation-timing-function: linear;
	  background: linear-gradient(to right, #eeeeee5c 8%, #d5d5d5a1 18%, #eeeeee17 33%);
	  background-size: 800px 104px;
	  position: relative;
	  min-height: 8px;
	  border-radius: 5px;
	  color: black;
	  flex-direction: column;
	  align-items: center;
	  align-content: space-between;
	  min-width: 80%;
}

.zmframe{border: none; height: 500px; text-align: center; width: 100%; border-radius: 10px;}



      @font-face {
                font-display: fallback;
                font-family: IRANSansXV;
                font-weight: 100 200 300 400 500 600 700 800 900;
                src: url("fonts/IRANSansXV.woff") format("woff-variations"),url("app/IRANSansXV.woff") format("woff")
            }

            @font-face {
                font-family: IRANSansX;
                src: url("app/IRANSansX-Regular.woff") format("woff")
            }

            @font-face {
                font-family: IRANSansX;
                font-weight: 700;
                src: url("app/IRANSansX-Bold.woff") format("woff")
            }

            @keyframes lazy-item {
                0% {
                    opacity: 0;
                    transform: scale(0)
                }

                100% {
                    opacity: 1;
                    transform: scale(1)
                }
            }

            html {
                text-size-adjust: 100%;
                line-height: 1.15
            }

            body {
                margin: 0
            }

            main {
                display: block
            }

            h1 {
                font-size: 2em;
                margin: .67em 0
            }

            h3 {
                font-size: 12px;
                margin: 1rem;
            }

.zmtitle {
    background: var(--arashapp);
    color: var(--wp--preset--color--black);
    border-radius: 0 0 10px 10px;
    padding: 7px 0;
    margin: -2px;
    position: absolute;
    width: -webkit-fill-available;
    bottom: 0;
}

            hr {
                box-sizing: content-box;
                height: 0;
                overflow: visible
            }

            pre {
                font-family: zomorrod,monospace;
                font-size: 1em
            }

            a {
                background-color: transparent;
                text-decoration: none;
                color: black;
            }

.logreg {}

            abbr[title] {
                border-bottom: none;
                text-decoration: underline dotted;
                text-decoration: underline dotted
            }

            b,strong {
                font-weight: bolder
            }

            code,kbd,samp {
                font-family: monospace,monospace;
                font-size: 1em
            }

            small {
                font-size: 80%
            }

            sub,sup {
                font-size: 75%;
                line-height: 0;
                position: relative;
                vertical-align: baseline
            }

            sub {
                bottom: -.25em
            }

            sup {
                top: -.5em
            }

img {
    border-style: none;
    max-width: 100%;
    border-radius: 10px;
    display: block; /* باعث می‌شود تصویر به صورت بلوکی نمایش داده شود */
    margin-left: auto; /* فاصله سمت چپ را خودکار تنظیم می‌کند */
    margin-right: auto; /* فاصله سمت راست را خودکار تنظیم می‌کند */

    /* برای مرکز کردن عمودی هم می‌توانید از flexbox یا position استفاده کنید */
}

.container {
    display: flex;
    justify-content: center; /* برای مرکز کردن افقی */
    align-items: center; /* برای مرکز کردن عمودی */
    height: 100vh; /* ارتفاع کامل صفحه */
}


            button,input,optgroup,select,textarea {
                font-family: inherit;
                font-size: 100%;
                line-height: 1.15;
                margin: 0;
                border-radius: 8px;
                padding: 8px;
            }

            button,input {
                overflow: visible;
                width: -webkit-fill-available;
                margin: 5px 0;
                !i;!;
            }

            button,select {
                text-transform: none
            }

            [type="button"],[type="reset"],[type="submit"],button {
                appearance: button;
                width: -webkit-fill-available;
                background: var(--app);
            }

input[type="submit"] {
    background: var(--app);
}

            [type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner,button::-moz-focus-inner {
                border-style: none;
                padding: 0
            }

            [type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring,button:-moz-focusring {
                outline: 1px dotted ButtonText
            }

            fieldset {
                padding: .35em .75em .625em
            }

            legend {
                box-sizing: border-box;
                color: inherit;
                display: table;
                max-width: 100%;
                padding: 0;
                white-space: normal
            }

            progress {
                vertical-align: baseline
            }

            textarea {
                overflow: auto
            }

textarea#comment {
    min-width: 100%;
    max-width: 100%;
}

            [type="checkbox"],[type="radio"] {
                box-sizing: border-box;
                padding: 0;
                position: absolute;
                right: 92%;
                top: -3px;
            }

            [type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button {
                height: auto
            }

            [type="search"] {
                appearance: textfield;
                outline-offset: -2px
            }

            [type="search"]::-webkit-search-decoration {
                appearance: none
            }

            ::-webkit-file-upload-button {
                appearance: button;
                font: inherit
            }

            details {
                display: block
            }

            summary {
                display: list-item
            }

            [hidden],template {
                display: none
            }



      

            * {
                font-feature-settings: "ss02";
                font-feature-settings: "ss02";
                box-sizing: border-box;
                font-family: IRANSansX,system-ui,tahoma
            }

h2 {
    font-size: 16px;
}

  .c-home-category__link__category-name {
    font-size: 10px;
    color: #000;
    padding: 7px;
    text-align: center;
    display: flex;
    position: absolute;
    transform: rotate(0deg);
    top: 70%;
    background: var(--arashapp);
    border-radius: 10px 0 0;
    margin: 2px -2px;
}


            .g-body,html {
                scroll-behavior: smooth
            }

            .g-body {
                background-color: #f3f3f3;
                box-sizing: border-box;
                direction: rtl;
                font-family: IRANSansX,system-ui,tahoma;
                font-size: 16px;
                margin: 0 auto;
                min-height: 100%;
                padding: 0
            }

            @supports (min-height: 100vh) {
                .g-body {
                    min-height:100vh
                }
            }

            @supports (min-height: 100svh) {
                .g-body {
                    min-height:100svh
                }
            }

.h2{font-size:12px; }

            .g-body--locked {
                height: 100vh;
                overflow: hidden
            }

            .g-body--has-mobile-nav {
                padding-bottom: 56px
            }

            @media (width >= 960px) {
                .g-body--has-mobile-nav {
                    padding-bottom:0
                }

                .g-body--has-desktop-nav {
                    padding-top: 64px
                }
            }

            @supports (display: flex) {
                .g-body {
                    display:flex;
                    flex-direction: column;
                    justify-content: start
                }
            }

            @media print {
                .g-body {
                    background-color: transparent;
                    display: block;
                    height: auto;
                    overflow: visible!important;
                    padding-top: 0;
                    width: 100%
                }
            }

            .g-hide {
                display: none!important
            }

            .g-lcp {
                animation-delay: .6s;
                animation-duration: .2s;
                animation-fill-mode: forwards;
                animation-iteration-count: 1;
                animation-name: lcp-anim;
                opacity: 0;
                transform: scale(0)
            }

            @keyframes lcp-anim {
                0% {
                    opacity: 0;
                    transform: scale(0)
                }

                100% {
                    opacity: 1;
                    transform: scale(1)
                }
            }

            #goftino_w {
                z-index: 501!important
            }

            .c-form-label {
                color: #555;
                display: block;
                font-size: 13px;
                font-weight: 400;
                line-height: 24px;
                width: 100%
            }

            .c-form-label--has-margin-bottom {
                margin-bottom: 8px
            }

            .c-form-label--fix-floated,.c-form-label--floated {
                background-color: inherit;
                font-size: 10px;
                font-weight: 400;
                line-height: 12px;
                opacity: 0;
                padding: 0 16px;
                pointer-events: none;
                position: absolute;
                right: 0;
                text-align: center;
                top: 0;
                transform: translateY(12px);
                transition: all .2s ease-in-out;
                width: 100%;
                z-index: 2
            }

            .c-form-item-group--filled .c-form-label--floated,.c-form-item-group:focus-within .c-form-label--floated {
                opacity: 1;
                text-align: right
            }

            .c-form-label--fix-floated {
                opacity: 1;
                text-align: right
            }

            @media (width >= 960px) {
                .c-form-label {
                    font-size:14px;
                    font-weight: 500;
                    line-height: 24px
                }

                .c-form-label--has-margin-bottom {
                    margin-bottom: 12px
                }

                .c-form-label--fix-floated,.c-form-label--floated {
                    font-size: 10px;
                    font-weight: 400;
                    line-height: 12px
                }
            }

            .c-form-base-input {
                background: #f3f3f3;
                border: 1px solid #d8d8d8;
                border-radius: 12px;
                color: #424242;
                contain: strict;
                display: block;
                font-size: 14px;
                font-weight: 300;
                height: 48px;
                line-height: 48px;
                outline: none;
                padding: 0 16px;
                transition: all .2s ease-in;
                width: 100%
            }

            .c-form-base-input::input-placeholder {
                color: #555;
                text-align: center;
                transition: all .1s ease-in-out;
                transition: all .1s ease-in-out
            }

            .c-form-base-input:input-placeholder {
                color: #555;
                text-align: center;
                transition: all .1s ease-in-out;
                transition: all .1s ease-in-out
            }

            .c-form-base-input::input-placeholder {
                color: #555;
                text-align: center;
                transition: all .1s ease-in-out;
                transition: all .1s ease-in-out
            }

            .c-form-base-input::placeholder {
                color: #555;
                text-align: center;
                transition: all .1s ease-in-out
            }

            .c-form-item-group:focus-within .c-form-base-input::input-placeholder {
                color: transparent
            }

            .c-form-item-group:focus-within .c-form-base-input:input-placeholder {
                color: transparent
            }

            .c-form-item-group:focus-within .c-form-base-input::input-placeholder {
                color: transparent
            }

            .c-form-item-group:focus-within .c-form-base-input::placeholder {
                color: transparent
            }

            .c-form-base-input--rtl {
                direction: rtl;
                text-align: center
            }

            .c-form-base-input--ltr {
                direction: ltr;
                text-align: center
            }

            .c-form-base-input:hover {
                border-color: #545454;
                color: #424242
            }

            .c-form-base-input:focus {
                border-color: #288557
            }

            .c-form-base-input[data-has-error="true"] {
                border-color: #ed254e
            }

            .c-form-base-input:disabled {
                border-color: #d8d8d8!important;
                color: #424242!important;
                cursor: not-allowed!important;
                opacity: .38!important
            }

            .c-form-error-message {
                color: #ed254e;
                display: none;
                font-size: 13px;
                font-weight: 300;
                line-height: 24px
            }

            .c-form-error-message[aria-hidden="false"] {
                display: block
            }

            .c-form-item-group {
                display: block;
                margin-left: auto;
                margin-right: auto;
                position: relative;
                width: 100%
            }

            .c-form-item-group--has-margin-bottom {
                margin-bottom: 12px
            }

            @keyframes btn-loading {
                0% {
                    transform: rotate(0deg)
                }

                100% {
                    transform: rotate(1turn)
                }
            }

            .c-btn {
                border: none;
                border-radius: 12px;
                cursor: pointer;
                font-size: 14px;
                font-weight: 700;
                height: 48px;
                line-height: 48px;
                overflow: hidden;
                padding: 0 24px;
                text-align: center;
                text-decoration: none;
                text-overflow: ellipsis;
                white-space: nowrap
            }

            .c-btn--primary {
                background-color: #288557;
                color: #fff
            }

            .c-btn--primary:hover {
                background-color: #4ca579;
                box-shadow: 0 1px 2px rgb(0 0 0 / 30%),0 1px 3px 1px rgb(0 0 0 / 15%)
            }

            .c-btn--primary:active,.c-btn--primary:focus {
                background-color: #4ca579;
                box-shadow: none
            }

            .c-btn--primary:disabled {
                background-color: #d8d8d8;
                box-shadow: none;
                color: #757575;
                cursor: not-allowed
            }

            .c-btn--bordered-primary {
                background-color: #fff;
                border: 1px solid #288557;
                color: #288557
            }

            .c-btn--bordered-primary:hover {
                background-color: rgb(51 153 102 / 8%);
                border-color: #bdbdbd
            }

            .c-btn--bordered-primary:active,.c-btn--bordered-primary:focus {
                background-color: rgb(51 153 102 / 12%);
                border-color: #bdbdbd
            }

            .c-btn--bordered-primary:disabled {
                background-color: transparent;
                border-color: #d8d8d8;
                box-shadow: none;
                color: #757575;
                cursor: not-allowed
            }

            .c-btn--error {
                background-color: #ed254e;
                color: #fff
            }

            .c-btn--error:hover {
                background-color: #fde1e7;
                box-shadow: 0 1px 2px rgb(0 0 0 / 30%),0 1px 3px 1px rgb(0 0 0 / 15%);
                color: #ed254e
            }

            .c-btn--error:active,.c-btn--error:focus {
                background-color: #fde1e7;
                box-shadow: none;
                color: #ed254e
            }

            .c-btn--error:disabled {
                background-color: #d8d8d8;
                box-shadow: none;
                color: #757575;
                cursor: not-allowed
            }

            .c-btn--bordered-error {
                background-color: #fff;
                border: 1px solid #ed254e;
                color: #ed254e
            }

            .c-btn--bordered-error:active,.c-btn--bordered-error:focus,.c-btn--bordered-error:hover {
                background-color: #fde1e7;
                border-color: #ed254e
            }

            .c-btn--bordered-error:disabled {
                background-color: transparent;
                border-color: #d8d8d8;
                box-shadow: none;
                color: #757575;
                cursor: not-allowed
            }

            .c-btn--invisible {
                background-color: transparent;
                border-color: transparent;
                color: #288557
            }

            .c-btn--invisible:hover {
                background-color: rgb(51 153 102 / 8%);
                border-color: transparent
            }

            .c-btn--invisible:active,.c-btn--invisible:focus {
                background-color: rgb(51 153 102 / 12%);
                border-color: transparent
            }

            .c-btn--invisible:disabled {
                background-color: transparent;
                border-color: transparent;
                box-shadow: none;
                color: #757575;
                cursor: not-allowed
            }

            .c-btn--full {
                display: block;
                width: 100%
            }

            .c-btn[data-is-loading="true"] {
                color: transparent;
                position: relative
            }

            .c-btn[data-is-loading="true"]::after {
                animation-duration: 1s;
                animation-fill-mode: forwards;
                animation-iteration-count: infinite;
                animation-name: btn-loading;
                animation-timing-function: ease-in;
                background-image: none!important;
                border: 2px solid rgb(0 0 0 / 40%);
                border-bottom-color: #fff;
                border-radius: 50%;
                content: "";
                display: block;
                height: 18px;
                position: absolute;
                right: 50%;
                top: calc(50% - 9px);
                transform: translateX(-50%);
                width: 18px
            }

            .c-base-modal {
                background-color: transparent;
                inset: 0;
                contain: strict;
                content-visibility: auto;
                display: none;
                overflow: hidden;
                position: fixed;
                transform: translateX(200%);
                z-index: 800
            }

            @supports (display: flex) {
                .c-base-modal {
                    align-items:center;
                    flex-direction: column;
                    justify-content: flex-end
                }
            }

            .c-base-modal[data-hidden="false"] {
                content-visibility: visible;
                display: block;
                transform: translateX(0)
            }

            @supports (display: flex) {
                .c-base-modal[data-hidden="false"] {
                    display:flex
                }
            }

            .c-base-modal__overlay {
                background-color: hsl(0deg 0% 5% / 66%);
                inset: 0;
                opacity: 0;
                position: absolute;
                transition: all .1s ease-in;
                z-index: 0
            }

            .c-base-modal[data-hidden="false"] .c-base-modal__overlay {
                opacity: 1;
                transition: all .4s ease-in
            }

            .c-base-modal__frame {
                background-color: #fff;
                border-top-left-radius: 24px;
                border-top-right-radius: 24px;
                bottom: 0;
                box-shadow: 0 -2px 4px rgb(0 0 0 / 12%);
                left: 0;
                max-height: 90%;
                max-height: 90vh;
                min-height: 140px;
                opacity: 0;
                overflow: hidden;
                padding-top: 16px;
                position: absolute;
                right: 0;
                transform: translateY(150%);
                transition: all .2s cubic-bezier(.17,.67,.61,1.18);
                width: 100%;
                z-index: 1
            }

            .c-base-modal--has-header .c-base-modal__frame {
                padding-top: 52px
            }

            @supports (display: flex) {
                .c-base-modal__frame {
                    margin-bottom:0;
                    margin-top: auto;
                    position: relative
                }
            }

            .c-base-modal[data-hidden="false"] .c-base-modal__frame {
                opacity: 1;
                transform: translateY(0)
            }

            .c-base-modal__header {
                background-color: #fff;
                font-size: 0;
                height: 36px;
                padding: 0 16px;
                position: absolute;
                right: 0;
                text-overflow: ellipsis;
                top: 16px;
                white-space: nowrap;
                width: 100%
            }

            .c-base-modal__title {
                color: #0c0c0c;
                font-size: 16px;
                font-weight: 700;
                line-height: 24px
            }

            .c-base-modal__close-btn {
                background-color: transparent;
                border: none;
                color: #424242;
                font-size: 28px;
                height: 48px;
                left: 0;
                line-height: 52px;
                padding: 0;
                position: absolute;
                top: -12px;
                width: 48px;
                z-index: 2
            }

            .c-base-modal__body {
                -ms-scroll-chaining: none;
                height: 100%;
                overflow-y: auto;
                overscroll-behavior: contain;
                padding: 0 16px 24px
            }

            .c-base-modal--no-padding .c-base-modal__body {
                padding: 0
            }

            @media (width >= 960px) {
                .c-base-modal {
                    padding:24px
                }

                @supports (display: flex) {
                    .c-base-modal {
                        justify-content:center
                    }
                }

                .c-base-modal__frame {
                    border-radius: 24px;
                    margin: 0 auto;
                    transform: scale(0);
                    transition: all .2s cubic-bezier(.17,.67,.61,1.18)
                }

                .c-base-modal[data-hidden="false"] .c-base-modal__frame {
                    transform: scale(1)
                }

                .c-base-modal__header {
                    padding: 0 32px;
                    top: 24px
                }

                .c-base-modal__close-btn {
                    cursor: pointer;
                    left: 16px
                }

                .c-base-modal__close-btn:hover {
                    color: #ed254e
                }

                .c-base-modal__body {
                    padding: 8px 32px 32px
                }
            }

            .c-message-modal {
                z-index: 1000
            }

            .c-message-modal__media-wrapper {
                display: block;
                margin: 0 auto;
                max-width: 200px;
                width: 100%
            }

            .c-message-modal__media-wrapper img {
                width: 100%
            }

            .c-message-modal__title {
                color: #424242;
                display: none;
                font-size: 16px;
                font-weight: 700;
                line-height: 24px;
                margin: 0 auto 12px;
                text-align: center
            }

            .c-message-modal__text {
                color: #555;
                font-size: 14px;
                font-weight: 400;
                line-height: 24px;
                text-align: center
            }

            .c-message-modal__actions-wrapper {
                padding-top: 16px;
                text-align: center
            }

            @media (width >= 960px) {
                .c-message-modal__frame {
                    width:500px
                }

                .c-message-modal__title {
                    margin-bottom: 16px
                }
            }

            .c-nav-mobile {
                background-color: #fff;
                bottom: 0;
                box-shadow: 0 -2px 4px 1px hsl(0deg 0% 76% / 20%);
                contain: strict;
                font-size: 0;
                height: 56px;
                left: 0;
                line-height: 56px;
                padding: 0 16px;
                position: fixed;
                right: 0;
                text-align: center;
                transform: translateY(100%);
                transition: all .2s ease-in;
                width: 100%;
                z-index: 500
            }

            .c-nav-mobile--fixed,.c-nav-mobile--visible {
                transform: translateY(0)
            }

            [data-pwa-installed="true"] .c-nav-mobile {
                padding-bottom: 10px;
                transform: translateY(0)
            }

            .c-nav-mobile__count {
                background-color: #ed254e;
                border: 1px solid #fff;
                border-radius: 50%;
                color: #fff;
                font-size: 0;
                height: 8px;
                line-height: 8px;
                position: absolute;
                right: 50%;
                text-align: center;
                top: 9px;
                transition: all .2s ease-in-out;
                width: 8px
            }

            @supports (transform: scale(0) translateX(90%)) {
                .c-nav-mobile__count {
                    right:calc(50% - 4px);
                    transform: scale(0)
                }
            }

            .c-nav-mobile__count--active {
                transform: scale(1)
            }

            @supports (transform: scale(1) translateX(90%)) {
                .c-nav-mobile__count--active {
                    transform:scale(1) translateX(90%)
                }
            }

            .c-nav-mobile__btn--active .c-nav-mobile__count {
                display: none
            }

            .c-nav-mobile__btn {
                background-color: transparent;
                border: none;
                contain: strict;
                display: inline-block;
                height: 48px;
                line-height: 48px;
                min-width: 22%;
                outline: none;
                padding: 0;
                position: relative;
                text-align: center;
                text-decoration: none;
                transition: all .2s ease-in-out;
                vertical-align: middle;
                width: 22%
            }

            .c-nav-mobile__btn::before {
                background: #fbde9d40;
                border-radius: 16px;
                content: "";
                display: block;
                height: 32px;
                max-width: 120px;
                position: absolute;
                right: 50%;
                top: 8px;
                transform: scale(0) translateX(50%);
                transition: transform .1s ease-in-out;
                width: 100%;
                z-index: -1
            }

            .c-nav-mobile__btn::after {
                color: var(--appfont);
                content: attr(aria-label);
                display: none;
                font-size: 12px;
                font-weight: 500;
                height: 24px;
                line-height: 24px;
                margin-right: 8px;
                min-width: 28px;
                text-align: right;
                vertical-align: middle
            }

            .c-nav-mobile__btn--big-text::after {
                min-width: 48px
            }

            .c-nav-mobile__btn--active {
                min-width: 34%;
                position: relative;
                width: 34%
            }

            .c-nav-mobile__btn--active::before {
                transform: scale(1) translateX(50%)
            }

            .c-nav-mobile__btn__icon {
                height: 28px;
                vertical-align: middle;
                width: 28px
            }

            .c-nav-mobile__btn__icon--line {
                fill: #555;
                display: inline-block
            }

            .c-nav-mobile__btn--active .c-nav-mobile__btn__icon--line {
                display: none
            }

            .c-nav-mobile__btn__icon--fill {
                fill: var(--appfont);
                display: none
            }

            .c-nav-mobile__btn--active .c-nav-mobile__btn__icon--fill {
                display: inline-block
            }

            @media (width >= 360px) {
                .c-nav-mobile__btn--active::after {
                    display:inline-block
                }
            }

            @media (width >= 768px) {
                .c-nav-mobile__btn {
                    min-width:140px;
                    width: 140px
                }
            }

            @media (width >= 960px) {
                .c-nav-mobile {
                    display:none!important
                }
            }

            @supports (display: flex) {
                .c-nav-mobile {
                    align-items:center;
                    display: flex;
                    justify-content: space-around
                }

                .c-nav-mobile__btn {
                    align-items: center;
                    display: inline-flex;
                    justify-content: center
                }

                .c-nav-mobile__btn,.c-nav-mobile__btn::after,.c-nav-mobile__btn__icon {
                    vertical-align: initial
                }
            }

            @media print {
                .c-nav-mobile {
                    display: none
                }
            }

            .c-nav-mobile-drawer {
                background-color: #fff;
                content-visibility: hidden;
                height: 100%;
                height: 100vh;
                opacity: 0;
                overflow-y: auto;
                padding-bottom: 56px;
                position: fixed;
                right: 0;
                top: 0;
                transform: translateX(100%);
                transition: all .1s ease-in;
                width: 100%;
                z-index: 499
            }

            .c-nav-mobile-drawer[aria-hidden="false"] {
                content-visibility: auto;
                opacity: 1;
                transform: translateX(0);
                transition: transform .15s ease-in,opacity .3s ease-in
            }

            .c-nav-mobile-drawer__header {
                background: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%),                radial-gradient(ellipse farthest-corner at left top, #FFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
                contain: strict;
                height: 180px;
                padding: 16px 16px 24px;
                width: 100%
            }

            .c-nav-mobile-drawer__header__icon {
                display: block;
                height: 48px;
                width: 48px
            }

            .c-nav-mobile-drawer__header__user-name {
                color: black;
                padding: 0 12px;
                border-radius: 10px;
                background: var(--app);
                font-size: 75%;
                font-weight: bold;
                line-height: 24px;
                margin: 16px auto 8px;
                display: flex;
                gap: 7px;
                justify-content: space-between;
                align-items: center;
            }

            .c-nav-mobile-drawer__header__user-phone {
                color: #fff;
                display: none;
                font-size: 16px;
                font-weight: 700;
                line-height: 24px
            }

            .c-nav-mobile-drawer__header__action {
                background-color: transparent;
                border: 1px solid #fff;
                border-radius: 12px;
                color: #fff;
                float: left;
                font-size: 12px;
                font-weight: 500;
                height: 32px;
                line-height: 32px;
                margin-top: -7px;
                max-width: 100%;
                overflow: hidden;
                padding: 0 12px;
                text-decoration: none;
                text-overflow: clip;
                white-space: nowrap
            }

            .c-nav-mobile-drawer__header__action__icon {
                display: inline-block;
                height: 24px;
                margin-left: 4px;
                vertical-align: middle;
                width: 24px
            }

            .c-nav-mobile-drawer__splitter {
                background-color: #fff;
                border-top-left-radius: 12px;
                border-top-right-radius: 12px;
                height: 28px;
                line-height: 24px;
                margin-top: -24px;
                position: relative;
                position: sticky;
                position: sticky;
                text-align: center;
                top: 0;
                z-index: 2
            }

            .c-nav-mobile-drawer__splitter::before {
                background-color: #d8d8d8;
                border-radius: 4px;
                content: "";
                display: inline-block;
                height: 4px;
                margin: 0 auto;
                width: 40px
            }

            .c-nav-mobile-drawer__body {
                box-shadow: 0 -4px 4px rgb(185 184 219 / 3.9%);
                height: auto;
                margin: 0 auto;
                min-height: 600px;
                padding: 0 16px 88px;
                width: 100%
            }

            .c-nav-mobile-drawer__root-link {
                color: #0c0c0c;
                contain: strict;
                display: block;
                font-size: 13px;
                font-weight: 500;
                height: 48px;
                line-height: 48px;
                overflow: hidden;
                text-decoration: none;
                text-overflow: clip;
                white-space: nowrap;
                width: 100%
            }

            .c-nav-mobile-drawer__root-link__icon {
                fill: #288557;
                background-color: #f3f3f3;
                border-radius: 8px;
                display: inline-block;
                height: 32px;
                margin-left: 8px;
                vertical-align: middle;
                width: 32px
            }

            .c-nav-mobile-drawer__root-link__icon--mini {
                fill: #0c0c0c;
                padding: 4px
            }

            .c-nav-mobile-drawer__links-group {
                display: block;
                max-height: 48px;
                overflow: hidden;
                position: relative;
                transition: max-height .2s ease-in-out
            }

            .c-nav-mobile-drawer__links-group::before {
                border-right: 2px solid #757575;
                border-top: 2px solid #757575;
                content: "";
                display: inline-block;
                height: 6px;
                left: 4px;
                position: absolute;
                top: 20px;
                transform: rotate(135deg);
                transition: all .2s ease-in-out;
                width: 6px;
                z-index: 1
            }

            .c-nav-mobile-drawer__links-group[aria-expanded="true"] {
                max-height: none
            }

            .c-nav-mobile-drawer__links-group[aria-expanded="true"]::before {
                border-color: #288557;
                transform: rotate(-45deg)
            }

            .c-nav-mobile-drawer__sub-link {
                color: #212121;
                display: block;
                font-size: 13px;
                font-weight: 400;
                height: 48px;
                line-height: 48px;
                overflow: hidden;
                padding-right: 16px;
                text-decoration: none;
                text-overflow: clip;
                white-space: nowrap
            }

            .c-nav-mobile-drawer__sub-link__icon {
                fill: #757575;
                display: inline-block;
                height: 32px;
                margin-left: 12px;
                vertical-align: middle;
                width: 32px
            }

            .c-nav-mobile-drawer__line {
                border: 1px solid #f3f3f3;
                border-bottom: none;
                display: block
            }

            @media (width >= 360px) {
                .c-nav-mobile-drawer__header__user-phone {
                    display:block
                }
            }

            @media (width >= 960px) {
                .c-nav-mobile-drawer {
                    display:none
                }
            }

            .c-nav-desktop {
                background-color: #fff;
                box-shadow: 0 1px 4px rgb(0 0 0 / 20%);
                contain: layout;
                height: 64px;
                line-height: 64px;
                padding: 0 16px;
                position: fixed;
                right: 0;
                top: 0;
                width: 100%
            }

            .c-nav-desktop::after {
                clear: both;
                content: "";
                display: block
            }

            @supports ((-webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2))) or (filter:drop-shadow(0 1px 4px rgba(0,0,0,0.2)))) {
                .c-nav-desktop {
                    box-shadow:none;
                    filter: drop-shadow(0 1px 4px rgb(0 0 0 / 20%));
                    filter: drop-shadow(0 1px 4px rgb(0 0 0 / 20%))
                }
            }

            .c-nav-desktop__fix-container {
                font-size: 0;
                margin: 0 auto;
                max-width: 1032px
            }

            .c-nav-desktop__logo {
                contain: strict;
                cursor: pointer;
                display: inline-block;
                height: 28px;
                line-height: 28px;
                vertical-align: middle;
                width: 65px;
            }

            .c-nav-desktop__logo__shape {
                fill: #288557;
                vertical-align: middle
            }

            .c-nav-desktop__root-link {
                border-bottom: 2px solid transparent;
                color: #212121;
                contain: strict;
                cursor: pointer;
                display: inline-block;
                font-size: 12px;
                font-weight: 400;
                height: 28px;
                line-height: 24px;
                margin-right: 24px;
                padding: 0;
                text-decoration: none;
                transition: all .2s ease-in;
                vertical-align: middle
            }

            .c-nav-desktop__root-link__icon {
                fill: #212121;
                display: inline-block;
                height: 24px;
                margin-left: 8px;
                vertical-align: middle;
                width: 24px
            }

            .c-nav-desktop__root-link--services-btn {
                background-color: transparent;
                border: none;
                margin-right: 28px
            }

            .c-nav-desktop__root-link:hover {
                border-bottom-color: #288557;
                color: #288557
            }

            .c-nav-desktop__btns-wrapper {
                float: left;
                font-size: 0;
                height: 32px;
                line-height: 32px;
                margin-top: 16px;
                position: relative
            }

            .c-nav-desktop__basket-btn,.c-nav-desktop__download-btn,.c-nav-desktop__profile-btn {
                background-color: transparent;
                border: none;
                border-radius: 8px;
                color: #212121;
                contain: strict;
                cursor: pointer;
                display: inline-block;
                font-size: 12px;
                font-weight: 400;
                height: 32px;
                line-height: 32px;
                margin-right: 20px;
                padding: 0;
                text-align: center;
                text-decoration: none;
                transition: all .2s ease-in;
                vertical-align: middle
            }

            .c-nav-desktop__basket-btn {
                position: relative
            }

            .c-nav-desktop__basket-btn__count {
                background-color: #ed254e;
                border: 1px solid rgb(51 153 102 / 20%);
                border-radius: 50%;
                color: #fff;
                font-size: 0;
                height: 8px;
                line-height: 8px;
                position: absolute;
                right: 8px;
                text-align: center;
                top: 2px;
                transform: scale(0);
                transition: all .2s ease-in-out;
                width: 8px
            }

            .c-nav-desktop__basket-btn__count--active {
                transform: scale(1)
            }

            .c-nav-desktop__profile-btn {
                position: relative
            }

            .c-nav-desktop__profile-btn__text {
                contain: strict;
                direction: ltr;
                height: 100%;
                left: 0;
                position: absolute;
                text-align: left;
                width: 100%
            }

            .c-nav-desktop__download-btn {
                background-color: rgb(51 153 102 / 20%);
                display: none;
                margin-right: 0
            }

            .c-nav-desktop__basket-btn:hover,.c-nav-desktop__download-btn:hover,.c-nav-desktop__profile-btn:hover {
                color: #288557;
                transform: scale(.9)
            }

            .c-nav-desktop__btns-icon-wrapper {
                fill: #288557;
                background-color: rgb(51 153 102 / 20%);
                border-radius: 8px;
                display: inline-block;
                height: 32px;
                padding: 3px;
                vertical-align: middle;
                margin-left: 80px;
            }

            .c-nav-desktop__btns-icon-wrapper--transparent {
                background-color: transparent
            }

            .c-nav-desktop__profile-popup {
                background-color: #fff;
                border: 1px solid #f3f3f3;
                border-radius: 16px;
                box-shadow: 0 4px 4px 0 rgb(185 184 219 / 16%);
                display: block;
                left: 0;
                max-height: 0;
                opacity: 0;
                overflow: hidden;
                padding: 16px;
                pointer-events: none;
                position: absolute;
                text-align: right;
                top: 40px;
                transform: translateX(-80%);
                transition: opacity .2s ease-in,transform .2s ease-in;
                visibility: hidden;
                width: 280px
            }

            .c-nav-desktop__profile-popup__line {
                border: none;
                border-top: 1px solid #f3f3f3;
                height: 1px
            }

            .c-nav-desktop__profile-popup__action {
                background-color: transparent;
                border: none;
                color: #0c0c0c;
                cursor: pointer;
                display: block;
                font-size: 13px;
                font-weight: 500;
                height: 32px;
                line-height: 24px;
                margin: 0 auto 12px;
                overflow: hidden;
                padding: 0;
                text-align: right;
                text-decoration: none;
                text-overflow: ellipsis;
                transition: all .2s ease-in;
                white-space: nowrap;
                width: 100%
            }

            .c-nav-desktop__profile-popup__action:hover {
                color: #288557
            }

            .c-nav-desktop__profile-popup__action--last {
                margin-bottom: 0;
                margin-top: 12px
            }

            .c-nav-desktop__profile-popup__action__icon {
                fill: #288557;
                background: #f3f3f3;
                border-radius: 8px;
                display: inline-block;
                height: 32px;
                margin-left: 8px;
                padding: 4px;
                vertical-align: middle;
                width: 32px
            }

            .c-nav-desktop__profile-popup--active {
                max-height: unset;
                opacity: 1;
                pointer-events: all;
                transform: translateX(0);
                visibility: visible
            }

            @media (width >= 1200px) {
                .c-nav-desktop {
                    padding:0
                }

                .c-nav-desktop__download-btn {
                    display: inline-block;
                    padding-left: 16px
                }

                @supports (display: flex) {
                    .c-nav-desktop__download-btn {
                        align-items:center;
                        display: inline-flex;
                        justify-content: flex-start;
                        vertical-align: initial
                    }
                }
            }

            @supports (display: flex) {
                .c-nav-desktop {
                    align-items:center;
                    flex-wrap: nowrap;
                    justify-content: center
                }

                .c-nav-desktop::after {
                    display: none
                }

                .c-nav-desktop__basket-btn,.c-nav-desktop__logo,.c-nav-desktop__profile-btn,.c-nav-desktop__root-link {
                    align-items: center;
                    display: inline-flex;
                    justify-content: center;
                    vertical-align: initial;
                    white-space: nowrap
                }

                .c-nav-desktop__logo__shape,.c-nav-desktop__root-link__icon {
                    vertical-align: initial
                }

                .c-nav-desktop__fix-container {
                    align-items: center;
                    display: flex;
                    flex-wrap: nowrap;
                    justify-content: flex-start;
                    width: 100%
                }

                .c-nav-desktop__btns-wrapper {
                    float: none;
                    justify-content: flex-end;
                    margin-left: 0;
                    margin-right: auto;
                    margin-top: auto
                }
            }

            .c-nav-desktop {
                display: none;
                z-index: 500
            }

            @media (width >= 960px) {
                .c-nav-desktop {
                    display:block
                }

                @supports (display: flex) {
                    .c-nav-desktop {
                        display:flex
                    }
                }
            }

            @media print {
                .c-nav-desktop {
                    display: none
                }
            }

            .c-nav-desktop-drawer {
                contain: strict;
                height: 100%;
                height: 100vh;
                overflow: hidden;
                position: fixed;
                right: 0;
                top: 0;
                transition: all .2s ease-in-out;
                width: 100%;
                z-index: 501
            }

            .c-nav-desktop-drawer__overlay {
                background-color: hsl(0deg 0% 5% / 66%);
                display: block;
                height: 100%;
                opacity: 0;
                position: absolute;
                right: 0;
                top: 0;
                transition: none;
                width: 100%;
                z-index: 0
            }

            [data-hidden="false"] .c-nav-desktop-drawer__overlay {
                opacity: 1;
                transition: all .7s ease-in
            }

            .c-nav-desktop-drawer__header {
                background-color: #fff;
                color: #0c0c0c;
                font-size: 16px;
                font-weight: 700;
                height: 92px;
                line-height: 24px;
                padding: 40px 40px 0;
                position: absolute;
                right: 0;
                top: 0;
                width: 368px;
                z-index: 3
            }

            .c-nav-desktop-drawer__close-btn {
                background-color: transparent;
                border: none;
                cursor: pointer;
                float: left;
                font-size: 32px;
                font-weight: 300;
                line-height: 1;
                margin-top: -4px;
                padding: 0
            }

            .c-nav-desktop-drawer__close-btn:hover {
                color: #ed254e
            }

            .c-nav-desktop-drawer__main-links-wrapper {
                background-color: #fff;
                direction: ltr;
                display: block;
                height: 100%;
                height: 100vh;
                overflow-y: auto;
                padding: 92px 0 0;
                position: relative;
                width: 370px;
                z-index: 1
            }

            .c-nav-desktop-drawer__main-links-wrapper::-webkit-scrollbar {
                height: 4px;
                padding-right: 20px;
                width: 4px
            }

            .c-nav-desktop-drawer__main-links-wrapper::-webkit-scrollbar-track {
                box-shadow: inset 0 0 3px #d8d8d8
            }

            .c-nav-desktop-drawer__main-links-wrapper::-webkit-scrollbar-thumb {
                border-radius: 4px;
                box-shadow: inset 0 0 3px #bdbdbd
            }

            .c-nav-desktop-drawer__root-link {
                color: #0c0c0c;
                cursor: pointer;
                direction: rtl;
                display: block;
                font-size: 13px;
                font-weight: 500;
                height: 42px;
                line-height: 42px;
                margin-bottom: 8px;
                overflow: hidden;
                padding: 8px 40px;
                text-decoration: none;
                text-overflow: clip;
                transition: all .2s ease-in-out;
                white-space: nowrap;
                width: 100%
            }

            .c-nav-desktop-drawer__root-link__icon {
                fill: #0c0c0c;
                background-color: #f3f3f3;
                border-radius: 8px;
                display: inline-block;
                height: 32px;
                margin-left: 8px;
                vertical-align: middle;
                width: 32px
            }

            .c-nav-desktop-drawer__root-link__icon--mini {
                padding: 4px
            }

            .c-nav-desktop-drawer__links-group:hover .c-nav-desktop-drawer__root-link,.c-nav-desktop-drawer__root-link:hover {
                background-color: rgb(51 153 102 / 8%);
                color: #288557
            }

            .c-nav-desktop-drawer__line {
                border: 1px solid #f3f3f3;
                border-bottom: none;
                display: block;
                margin: 0 auto 16px;
                width: calc(100% - 80px)
            }

            .c-nav-desktop-drawer__links-group--active,.c-nav-desktop-drawer__links-group:hover {
                z-index: 4
            }

            .c-nav-desktop-drawer__sub-menu {
                background-color: #fff;
                box-shadow: inset -1px 0 2px #f3f3f3;
                direction: ltr;
                display: block;
                height: 100%;
                height: 100vh;
                max-width: 0;
                opacity: 0;
                overflow-y: auto;
                padding: 0;
                position: fixed;
                right: 369px;
                top: 0;
                transition: all .1s ease-in-out;
                width: 370px;
                z-index: 3
            }

            .c-nav-desktop-drawer__sub-menu::-webkit-scrollbar {
                height: 4px;
                padding-right: 20px;
                width: 4px
            }

            .c-nav-desktop-drawer__sub-menu::-webkit-scrollbar-track {
                box-shadow: inset 0 0 3px #d8d8d8
            }

            .c-nav-desktop-drawer__sub-menu::-webkit-scrollbar-thumb {
                border-radius: 4px;
                box-shadow: inset 0 0 3px #bdbdbd
            }

            .c-nav-desktop-drawer__sub-menu__header {
                color: #0c0c0c;
                direction: rtl;
                font-size: 16px;
                font-weight: 700;
                height: 92px;
                line-height: 24px;
                padding: 40px 40px 0;
                right: 0;
                top: 0
            }

            .c-nav-desktop-drawer__sub-menu__body {
                direction: rtl;
                font-size: 0;
                padding: 0 40px;
                text-align: right
            }

            .c-nav-desktop-drawer__links-group:hover .c-nav-desktop-drawer__sub-menu,.c-nav-desktop-drawer__sub-menu .c-nav-desktop-drawer__links-group--active {
                max-width: none;
                opacity: 1;
                transition: max-width .4s ease-in-out,opacity .3s ease-in-out
            }

            .c-nav-desktop-drawer__sub-link {
                color: #0c0c0c;
                display: inline-block;
                font-size: 14px;
                font-weight: 400;
                line-height: 24px;
                margin-bottom: 24px;
                text-align: center;
                text-decoration: none;
                transition: all .2s ease-in;
                vertical-align: top;
                width: 33.33%
            }

            .c-nav-desktop-drawer__sub-link__icon {
                background-color: #f3f3f3;
                border-radius: 16px;
                display: block;
                height: 64px;
                margin: 0 auto 12px;
                padding: 10px;
                width: 64px
            }

            .c-nav-desktop-drawer__sub-link:hover .c-nav-desktop-drawer__sub-link__icon {
                background-color: rgb(51 153 102 / 8%)
            }

            .c-nav-desktop-drawer__sub-link:hover {
                color: #288557;
                transform: scale(.9)
            }

            @supports (display: flex) {
                .c-nav-desktop-drawer__root-link {
                    align-items:center;
                    display: flex;
                    justify-content: flex-start
                }

                .c-nav-desktop-drawer__root-link__icon {
                    vertical-align: initial
                }

                .c-nav-desktop-drawer__sub-menu__body {
                    align-items: flex-start;
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: flex-start
                }

                .c-nav-desktop-drawer__sub-link {
                    flex-basis: 33.33%
                }
            }

            .c-nav-desktop-drawer {
                display: none
            }

            @media (width >= 960px) {
                .c-nav-desktop-drawer {
                    content-visibility:hidden;
                    display: block;
                    transform: translateX(100%)
                }

                .c-nav-desktop-drawer[data-hidden="false"] {
                    content-visibility: auto;
                    transform: translateX(0)
                }

                .c-edit-profile-modal__frame {
                    width: 500px
                }
            }

            .c-home-header {
                display: block;
                font-size: 0;
                max-height: 145.6px;
                min-height: 145.6px;
                position: fixed;
                right: 0;
                text-align: center;
                top: 0;
                transition: all .4s ease;
                width: 100%;
                z-index: 300
            }

            .c-home-header[data-mini-mode="true"] {
                max-height: 104.4px;
                min-height: 104.4px
            }

            .c-home-header__fixed-clear {
                display: block;
                max-height: 145.6px;
                min-height: 145.6px;
                transition: all .4s ease;
                width: 100%
            }

            .c-home-header__texts-layer {
                background: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%),                radial-gradient(ellipse farthest-corner at left top, #FFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
                border-bottom-left-radius: 12px;
                border-bottom-right-radius: 12px;
                display: block;
                max-height: 124px;
                min-height: 124px;
                padding: 12px;
                transition: all .4s ease
            }

            [data-mini-mode="true"] .c-home-header__texts-layer {
                max-height: 90px;
                min-height: 90px
            }

            .c-home-header__logo {
                display: inline-block;
                height: 29px;
                transition: all .4s ease;
                vertical-align: middle;
                width: 44px
            }

            [data-mini-mode="true"] .c-home-header__logo {
                transform: scale(.7) translateY(-16px)
            }

            .c-home-header__title {
                color: #fff;
                display: inline-block;
                font-size: 20px;
                font-weight: 700;
                height: 30px;
                line-height: 30px;
                margin-right: 4px;
                transition: all .4s ease;
                vertical-align: middle;
                width: 100px;
            }

            [data-mini-mode="true"] .c-home-header__title {
                transform: scale(.7) translateX(20px) translateY(-15px)
            }

            .c-home-header__title--mobile {
                position: relative
            }

            .c-home-header__title--desktop {
                contain: strict;
                display: none
            }

            .c-home-header__description {
                display: none
            }

            .c-home-header__categories-layer {
                background: #fff;
                border-radius: 16px;
                box-shadow: 0 4px 2px rgb(142 141 208 / 16%);
                contain: strict;
                display: block;
                font-size: 0;
                margin: -50.4px auto 0;
                max-height: 80px;
                min-height: 78px;
                overflow: hidden;
                padding: 20px 16px 4px;
                transition: all .4s ease;
                width: calc(100% - 32px)
            }

            [data-mini-mode="true"] .c-home-header__categories-layer {
                margin-top: -33.6px;
                max-height: 48px;
                min-height: 48px
            }

            .c-home-header__category {
                display: inline-block;
                margin-left: 4px;
                min-height: 20px;
                overflow: hidden;
                position: relative;
                text-decoration: none;
                transition: all .4s ease;
                vertical-align: middle;
                white-space: nowrap;
                width: calc(25% - 3px)
            }

            .c-home-header__category::after {
                background-color: rgb(51 153 102 / 8%);
                content: "";
                display: block;
                height: 40%;
                left: 0;
                opacity: 0;
                position: absolute;
                top: 4%;
                transition: all .4s ease;
                width: 1px
            }

            .c-home-header__category--last-item {
                margin-left: 0
            }

            .c-home-header__category--last-item::after {
                display: none
            }

            .c-home-header__category__icon {
                fill: #fff;
                border-radius: 8px;
                display: block;
                height: 32px;
                margin: 0 auto;
                transition: all .4s ease;
                width: 32px
            }

            .c-home-header__category__icon--bill {
                background-color: #36a9e2
            }

            .c-home-header__category__icon--vehicle {
                background-color: #9c34e0
            }

            .c-home-header__category__icon--bank {
                background-color: #ff8700
            }

            .c-home-header__category__icon--travel {
                background-color: #29b672
            }

            .c-home-header__category__text {
                color: #0c0c0c;
                contain: strict;
                display: block;
                font-size: 11px;
                font-weight: 300;
                height: 24px;
                line-height: 24px;
                transition: all .4s ease;
                width: 100%
            }

            [data-mini-mode="true"] .c-home-header__category::after {
                opacity: 1
            }

            [data-mini-mode="true"] .c-home-header__category__icon {
                background-color: transparent;
                transform: translateY(-4px)
            }

            [data-mini-mode="true"] .c-home-header__category__icon--bill {
                fill: #36a9e2
            }

            [data-mini-mode="true"] .c-home-header__category__icon--vehicle {
                fill: #9c34e0
            }

            [data-mini-mode="true"] .c-home-header__category__icon--bank {
                fill: #ff8700
            }

            [data-mini-mode="true"] .c-home-header__category__icon--travel {
                fill: #29b672
            }

            [data-mini-mode="true"] .c-home-header__category__text {
                opacity: 0;
                transform: scale(.8) translateY(100%)
            }

            @media (width >= 360px) {
                .c-home-header__category__text {
                    font-size:12px;
                    font-weight: 300;
                    line-height: 24px
                }
            }

            @media (width >= 960px) {
                .c-home-header {
                    background-color:#f3f3f3;
                    max-height: 224px;
                    min-height: 224px;
                    padding: 32px 16px 0;
                    top: 64px;
                    transition: all .4s ease
                }

                .c-home-header[data-mini-mode="true"] {
                    max-height: 224px;
                    min-height: 224px;
                    transform: translateY(-156px)
                }

                .c-home-header__fixed-clear {
                    margin-top: 32px;
                    max-height: 224px;
                    min-height: 224px
                }

                .c-home-header__texts-layer {
                    background: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%),                radial-gradient(ellipse farthest-corner at left top, #FFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
                    border-radius: 40px;
                    margin: 0 auto;
                    max-width: 1032px;
                    padding-top: 40px
                }

                .c-home-header__texts-layer,[data-mini-mode="true"] .c-home-header__texts-layer {
                    max-height: 200px;
                    min-height: 200px
                }

                .c-home-header__title--mobile {
                    display: none
                }

                .c-home-header__title--desktop {
                    display: inline-block;
                    font-size: 28px;
                    font-weight: 700;
                    height: 38px;
                    line-height: 42px;
                    margin: 0 12px 0 auto;
                    vertical-align: middle;
                    width: 500px
                }

                .c-home-header__title__special-word {
                    color: #0c0c0c
                }

                .c-home-header__description {
                    color: #fff;
                    display: block;
                    font-size: 16px;
                    font-weight: 700;
                    line-height: 24px;
                    margin: 12px auto 0;
                    padding: 0
                }

                .c-home-header__categories-layer {
                    margin: -56px auto 0;
                    max-height: 80px;
                    max-width: 856px;
                    min-height: 80px;
                    padding: 24px
                }

                [data-mini-mode="true"] .c-home-header__categories-layer {
                    margin-top: -56px;
                    max-height: 80px;
                    min-height: 80px
                }

                .c-home-header__category::after {
                    background-color: #d8d8d8;
                    height: 32px;
                    opacity: 1;
                    top: 6%;
                    width: 1px
                }

                .c-home-header__category__icon {
                    display: inline-block;
                    height: 40px;
                    vertical-align: middle;
                    width: 40px
                }

                .c-home-header__category__text {
                    display: inline-block;
                    font-size: 14px;
                    font-weight: 500;
                    line-height: 24px;
                    margin-right: 8px;
                    vertical-align: middle;
                    width: 82px
                }

                [data-mini-mode="true"] .c-home-header__category__icon {
                    fill: #fff;
                    transform: scale(1) translateY(0)
                }

                [data-mini-mode="true"] .c-home-header__category__icon--bill {
                    background-color: #36a9e2
                }

                [data-mini-mode="true"] .c-home-header__category__icon--vehicle {
                    background-color: #9c34e0
                }

                [data-mini-mode="true"] .c-home-header__category__icon--bank {
                    background-color: #ff8700
                }

                [data-mini-mode="true"] .c-home-header__category__icon--travel {
                    background-color: #29b672
                }

                [data-mini-mode="true"] .c-home-header__category__text {
                    opacity: 1;
                    transform: scale(1) translateY(0)
                }
            }

            .c-home-banner {
                contain: layout;
                display: block;
                font-size: 0;
                margin: 12px auto;
                overflow: auto hidden;
                white-space: nowrap;
                width: 100%
            }

.c-home-banner::-webkit-scrollbar {
  height: 8px; /* تنظیم ارتفاع اسکرول بار افقی */
}

.c-home-banner::-webkit-scrollbar-track {
  background: rgb(0 0 0 / 10%);
}

.c-home-banner::-webkit-scrollbar-thumb {
  background: rgb(0 0 0 / 27%);
}

.c-home-banner::-webkit-scrollbar-thumb:hover {
  background: #555;
}


            .c-home-banner__item {
                animation-delay: .4s;
                animation-duration: .2s;
                animation-fill-mode: forwards;
                animation-iteration-count: 1;
                animation-name: banner-transition;
                background-color: #bdbdbd;
                border-radius: 16px;
                contain: layout;
                display: inline-block;
                margin-right: 16px;
                max-width: 320px;
                min-width: 75%;
                opacity: 0;
                overflow: hidden;
                position: relative;
                transform: scale(0);
                transition: opacity;
                vertical-align: top;
                margin: 10px 4px;
            }

            .c-home-banner__item::after {
                content: "";
                display: block;
                padding-top: 33.33%;
                width: 100%
            }

            .c-home-banner__item__img {
                border-radius: 16px;
                display: block;
                height: 100%;
                object-fit: cover;
                object-fit: cover;
                position: absolute;
                right: 0;
                top: 0;
                width: 100%
            }

            @supports (aspect-ratio: 320/107) {
                .c-home-banner__item {
                    aspect-ratio:320/107
                }

                .c-home-banner__item::after {
                    display: none
                }
            }

            @media (width >= 360px) {
                .c-home-banner {
                    contain:strict;
                    height: 175px;
                }

                .c-home-banner__item {
                    height: 150px;
                    min-width: 330px;
                    width: 330px;
                }
            }

            @media (width >= 960px) {
                .c-home-banner {
                    height: 198px;
                    margin: 16px auto 0;
                    max-width: 856px;
                    overflow: auto hidden
                }

                .c-home-banner::-webkit-scrollbar {
                    background-color: #d8d8d8;
                    height: 8px
                }

                .c-home-banner::-webkit-scrollbar-track {
                    border-radius: 4px;
                    box-shadow: inset 0 0 20px #f3f3f3
                }

                .c-home-banner::-webkit-scrollbar-thumb {
                    border-radius: 4px;
                    box-shadow: inset 0 0 100px #288557
                }

                .c-home-banner__item {
                    height: 170px;
                    margin-right: 24px;
                    max-width: calc(50% - 12px);
                    min-width: calc(50% - 12px);
                    width: calc(50% - 12px)
                }

                .c-home-banner__item--first {
                    margin-right: 0
                }
            }

            @keyframes banner-transition {
                0% {
                    opacity: 0;
                    transform: scale(0)
                }

                100% {
                    opacity: 1;
                    transform: scale(1)
                }
            }

            .c-home-category {
                background-color: #fff;
                border-radius: 16px;
                content-visibility: auto;
                display: block;
                margin: 12px auto 0;
                padding: 16px 24px;
                width: 100%;
                position: relative;
            }

            .c-home-category--above-fold {
                content-visibility: visible
            }

            .c-home-category__title {
                color: #0c0c0c;
                display: block;
                font-size: 12px;
                font-weight: 700;
                line-height: 24px;
                margin: 0 auto 12px;
                padding: 0
            }

            .c-home-category__links-wrapper {
                font-size: 0;
                margin-top: -16px;
            }

            .c-home-category__link {
                display: flex;
                height: 176px;
                position: relative;
                text-align: center;
                text-decoration: none;
                transition: all .2s ease-in;
                vertical-align: top;

                /* From https: //css.glass */
                background: rgb(255 255 255 / 20%);
                border-radius: 16px;
                box-shadow: 0 4px 30px rgb(0 0 0 / 10%);
                backdrop-filter: blur(5px);
                backdrop-filter: blur(5px);
                border: 1px solid rgb(255 255 255 / 30%);
                width: calc(33.33% - 12px);
                flex-flow: column wrap;
                justify-content: center;
            }

            .c-home-category__link__icon {
                background-color: #f3f3f3;
                border-radius: 12px;
                contain: strict;
                display: block;
                height: 60px;
                width: 60px;
                margin: 0 auto 4px;
                padding: 5px;
                z-index: 0
            }

            .c-home-category__link__badge {
                background-color: #f3f3f3;
                border-radius: 10px 0;
                contain: layout;
                display: inline-block;
                height: 24px;
                left: -1px;
                padding: 0 4px;
                position: absolute;
                text-align: center;
                top: -7px;
                width: 75%;
                z-index: 1
            }

            .c-home-category__link__badge,.c-home-category__link__text {
                color: #0c0c0c;
                font-size: 11px;
                font-weight: 400;
                line-height: 24px
            }

            .c-home-category__link__text {
                display: block;
                text-decoration: none
            }

            .c-home-category__link:hover .c-home-category__link__text {
                color: #288557
            }

            .c-home-category__link:hover {
                transform: scale(.9);
            }

            @supports (display: flex) {
                .c-home-category__links-wrapper {
                    display: flex;
                    align-items: center;
                    flex-flow: row wrap;
                    row-gap: 18px;
                }
            }

/* حالت پایه برای مرورگرهای خیلی قدیمی */
.c-home-category__link {
    margin: 16px 6px 0;
    width: 100%; /* پیش‌فرض: یک ستون */
}

.c-home-category__link__text {
    padding: 0 4px;
}

/* از 300px به بالا: دو ستون */
@media (width >= 270px) {
    .c-home-category__link {
        width: 50%;
    }
}

/* از 320px به بالا: دقیق‌تر - فاصله بهتر بین دو ستون */
@media (width >= 310px) {
    .c-home-category__link {
        width: calc(49% - 12px);
    }
}

/* از 360px به بالا: سه ستون */
@media (width >= 360px) {
    .c-home-category__link {
        width: calc(33.33% - 12px);
    }
}

/* از 480px به بالا: فونت بهتر برای متن */
@media (width >= 480px) {
    .c-home-category__link__text {
        font-size: 13px;
        font-weight: 400;
        line-height: 24px;
    }
}

/* از 768px به بالا: هشت ستون */
@media (width >= 768px) {
    .c-home-category__link {
        width: calc(20% - 12px);
    }
}






            @media (width >= 960px) {
                .c-home-category {
                    margin: 16px auto 20px;
                    max-width: 856px;
                    padding: 24px;
                    position: relative;
                }

                .c-home-category__title {
                    font-size: 16px;
                    font-weight: 700;
                    line-height: 24px;
                    margin: 0 auto 16px
                }

                .c-home-category__title::before {
                    background-color: #0c0c0c;
                    border-radius: 50%;
                    content: "";
                    display: inline-block;
                    height: 8px;
                    margin-left: 8px;
                    vertical-align: middle;
                    width: 8px
                }

                .c-home-category__links-wrapper {
                    margin-top: -24px
                }

                .c-home-category__link {
                    height: 165px;
                    margin-top: 24px
                }

                .c-home-category__link__icon {
                    height: 60px;
                    margin-bottom: 12px;
                    width: 60px;
                }

                .c-home-category__link__text {
                    font-size: 14px;
                    font-weight: 400;
                    line-height: 24px
                }
            }

            .c-home-about {
                content-visibility: auto;
                font-size: 0;
                margin: 0 auto;
                padding: 32px 16px;
                width: 100%
            }

            .c-home-about__title {
                color: #0c0c0c;
                display: block;
                font-size: 16px;
                font-weight: 700;
                height: 24px;
                line-height: 24px;
                margin: 0 auto 8px
            }

            .c-home-about__text {
                color: #555;
                font-size: 14px;
                font-weight: 400;
                line-height: 24px;
                margin: 0 auto;
                padding: 0;
                text-align: justify;
                text-align-last: right
            }

            .c-home-about__media {
                display: block;
                margin: 24px auto 0;
                max-width: 416px;
                overflow: hidden;
                position: relative
            }

            .c-home-about__media__image {
                height: auto;
                width: 100%
            }

            .c-home-about__media::after {
                content: "";
                display: block;
                padding-top: 53.65%
            }

            @supports (aspect-ratio: 328/217) {
                .c-home-about__media {
                    aspect-ratio:328/217
                }

                .c-home-about__media::after {
                    display: none
                }
            }

            @media (width >= 960px) {
                .c-home-about {
                    contain:strict;
                    height: 544px;
                    max-width: 856px;
                    padding: 24px 0
                }

                .c-home-about__title {
                    margin-bottom: 16px
                }

                .c-home-about__media,.c-home-about__texts-group {
                    display: inline-block;
                    vertical-align: middle;
                    width: 416px
                }

                .c-home-about__media {
                    margin-right: calc(100% - 832px)
                }

                @supports (display: flex) {
                    .c-home-about {
                        align-items:center;
                        display: flex;
                        justify-content: space-between
                    }
                }
            }

            [data-pwa-installed="true"] .c-home-about {
                display: none!important
            }

            .c-download-section {
                content-visibility: auto;
                font-size: 0;
                margin: 0 auto;
                padding: 32px 16px;
                width: 100%
            }

            .c-download-section__title {
                color: #0c0c0c;
                display: block;
                font-size: 16px;
                font-weight: 700;
                height: 24px;
                line-height: 24px;
                margin: 0 auto 8px
            }

            .c-download-section__text {
                color: #555;
                font-size: 14px;
                font-weight: 400;
                line-height: 24px;
                margin: 0 auto;
                padding: 0;
                text-align: justify;
                text-align-last: right
            }

            .c-download-section__desktop-actions-row,.c-download-section__qr-code,.c-download-section__screen {
                display: none
            }

            .c-download-section__links {
                display: block;
                font-size: 0;
                margin: 0 auto;
                padding-top: 48px
            }

            .c-download-section__links__action {
                background-color: #0c0c0c;
                border-radius: 12px;
                contain: strict;
                display: block;
                height: 48px;
                margin: 0 auto 16px;
                overflow: hidden;
                width: 156px
            }

            .c-download-section__links__action--11 {
                margin-bottom: 0
            }

            .c-download-section__links__img {
                display: block;
                height: auto;
                width: 100%
            }

            .c-download-section__links__img--2 {
                transform: translateY(-56px)
            }

            .c-download-section__links__img--3 {
                transform: translateY(-112px)
            }

            .c-download-section__links__img--4 {
                transform: translateY(-168px)
            }

            .c-download-section__links__img--5 {
                transform: translateY(-398px)
            }

            .c-download-section__links__img--6 {
                transform: translateY(-514px)
            }

            .c-download-section__links__img--7 {
                transform: translateY(-225px)
            }

            .c-download-section__links__img--8 {
                transform: translateY(-455px)
            }

            .c-download-section__links__img--9 {
                transform: translateY(-340px)
            }

            .c-download-section__links__img--10 {
                transform: translateY(-282px)
            }

            @media (width >= 360px) {
                .c-download-section__links {
                    text-align:center;
                    width: 328px
                }

                .c-download-section__links__action {
                    display: inline-block;
                    vertical-align: top
                }

                .c-download-section__links__action--1,.c-download-section__links__action--3,.c-download-section__links__action--5,.c-download-section__links__action--7,.c-download-section__links__action--9 {
                    margin-left: 8px
                }
            }

            @media (width >= 768px) {
                .c-download-section__text {
                    min-height:auto
                }

                .c-download-section__links {
                    width: 740px
                }
            }

            @media (width >= 960px) {
                .c-download-section {
                    contain:strict;
                    max-width: 856px;
                    min-height: 375px;
                    padding: 24px 0
                }

                [data-big-section="true"] .c-download-section {
                    height: 400px;
                    max-width: 1032px;
                    padding: 32px 16px
                }

                .c-download-section__links {
                    display: none
                }

                .c-download-section__title {
                    margin-bottom: 16px
                }

                .c-download-section__screen {
                    display: inline-block;
                    overflow: hidden;
                    position: relative;
                    vertical-align: middle;
                    width: 416px
                }

                .c-download-section__screen::after {
                    content: "";
                    display: block;
                    padding-top: 66.06%
                }

                .c-download-section__screen__img {
                    height: auto;
                    max-width: 100%;
                    position: absolute;
                    right: 0;
                    top: 0
                }

                @supports (aspect-ratio: 445/294) {
                    .c-download-section__screen {
                        position:static
                    }

                    .c-download-section__screen::after {
                        display: none
                    }

                    .c-download-section__screen__img {
                        aspect-ratio: 445/294;
                        margin: 0 auto;
                        position: static
                    }
                }

                .c-download-section__desktop-left-side {
                    display: inline-block;
                    margin-right: calc(100% - 832px);
                    vertical-align: middle;
                    width: 416px
                }

                .c-download-section__desktop-actions-row {
                    display: block;
                    margin-top: 16px;
                    position: relative
                }

                .c-download-section__desktop-actions-row::after {
                    background: #bdbdbd;
                    content: "";
                    display: block;
                    height: 50%;
                    position: absolute;
                    right: 164px;
                    top: 25%;
                    width: 1px
                }

                .c-download-section__qr-code {
                    background-color: #fff;
                    border-radius: 16px;
                    display: inline-block;
                    padding: 16px 0;
                    text-align: center;
                    vertical-align: middle;
                    width: 140px
                }

                .c-download-section__qr-code__img {
                    contain: strict;
                    display: block;
                    height: auto;
                    margin: 0 auto;
                    max-width: 107px
                }

                .c-download-section__qr-code__text {
                    color: #757575;
                    display: block;
                    font-size: 13px;
                    font-weight: 500;
                    height: 24px;
                    line-height: 24px;
                    margin-top: 12px
                }

                .c-download-section__desktop-action {
                    background-color: #288557;
                    border-radius: 12px;
                    color: #fff;
                    display: inline-block;
                    font-size: 14px;
                    font-weight: 700;
                    height: 48px;
                    line-height: 48px;
                    margin-right: 44px;
                    text-align: center;
                    text-decoration: none;
                    vertical-align: middle;
                    width: 230px
                }

                .c-download-section__desktop-action:hover {
                    background-color: #4ca579;
                    box-shadow: 0 1px 2px rgb(0 0 0 / 30%),0 1px 3px 1px rgb(0 0 0 / 15%)
                }

                @supports (display: flex) {
                    .c-download-section {
                        align-items:center;
                        display: flex;
                        justify-content: space-between;
                        width: 100%
                    }

                    .c-download-section__desktop-action,.c-download-section__desktop-actions-row,.c-download-section__qr-code,.c-download-section__screen {
                        vertical-align: initial
                    }

                    .c-download-section__desktop-actions-row {
                        align-items: center;
                        display: flex;
                        justify-content: space-between;
                        width: 100%
                    }
                }
            }

            [data-pwa-installed="true"] .c-download-section {
                display: none!important
            }

            @media print {
                .c-download-section {
                    display: none
                }
            }

            .c-organization-section {
                content-visibility: auto;
                font-size: 0;
                margin: 0 auto;
                padding: 32px 16px 64px;
                width: 100%
            }

            .c-organization-section__mini-title {
                color: #0c0c0c;
                font-size: 14px;
                font-weight: 500;
                line-height: 24px;
                margin-bottom: 4px
            }

            .c-organization-section__title {
                color: #0c0c0c;
                display: block;
                font-size: 16px;
                font-weight: 700;
                line-height: 24px;
                margin: 0 auto 8px
            }

            .c-organization-section__text {
                color: #555;
                font-size: 14px;
                font-weight: 400;
                line-height: 24px;
                margin: 0 auto;
                padding: 0;
                text-align: justify;
                text-align-last: right
            }

            .c-organization-section__media {
                display: block;
                margin: 24px auto;
                max-width: 416px;
                overflow: hidden;
                position: relative;
                text-align: center
            }

            .c-organization-section__media::after {
                content: "";
                display: block;
                padding-top: 56.09%
            }

            .c-organization-section__media__img {
                display: block;
                height: 100%;
                margin: 0 auto;
                max-width: 100%;
                position: absolute;
                right: 0;
                top: 0;
                width: 100%
            }

            @supports (aspect-ratio: 416/328) {
                .c-organization-section__media,.c-organization-section__media__img {
                    aspect-ratio:416/328;
                    position: static
                }

                .c-organization-section__media::after {
                    display: none
                }
            }

            .c-organization-section__action {
                background: #288557;
                border-radius: 12px;
                color: #fff;
                display: block;
                font-size: 14px;
                font-weight: 700;
                height: 48px;
                line-height: 48px;
                margin: 0 auto;
                max-width: 416px;
                text-align: center;
                text-decoration: none;
                width: 100%
            }

            .c-organization-section__action:hover {
                background-color: #4ca579;
                box-shadow: 0 1px 2px rgb(0 0 0 / 30%),0 1px 3px 1px rgb(0 0 0 / 15%)
            }

            .c-organization-section__action--desktop-only {
                display: none
            }

            @media (width >= 960px) {
                .c-organization-section {
                    contain:strict;
                    height: 400px;
                    max-width: 856px;
                    padding: 32px 0
                }

                .c-organization-section__mini-title {
                    font-size: 16px;
                    font-weight: 700;
                    line-height: 24px;
                    margin-bottom: 8px
                }

                .c-organization-section__title {
                    font-size: 20px;
                    font-weight: 700;
                    line-height: 30px;
                    margin-bottom: 16px
                }

                .c-organization-section__texts-group {
                    display: inline-block;
                    vertical-align: middle;
                    width: 416px
                }

                .c-organization-section__action--mobile-only {
                    display: none
                }

                .c-organization-section__action--desktop-only {
                    display: block;
                    margin-top: 24px
                }

                .c-organization-section__media {
                    display: inline-block;
                    margin-right: calc(100% - 832px);
                    transform: translateY(16px);
                    vertical-align: middle;
                    width: 416px
                }
            }

            [data-pwa-installed="true"] .c-organization-section {
                display: none!important
            }

            .c-blog-slider-section,.c-home-blog-section {
                content-visibility: auto
            }

            .c-blog-slider-section {
                display: none;
                height: 440px;
                overflow: hidden;
                width: 100%
            }

            @supports (display: flex) {
                .c-blog-slider-section {
                    display:block
                }
            }

            .c-home-blog-section .c-blog-slider-section,.c-landings-blog-section .c-blog-slider-section {
                margin: 0 auto;
                padding: 0 16px 32px
            }

            @media (width >= 960px) {
                .c-home-blog-section .c-blog-slider-section {
                    height:350px;
                    margin-bottom: 24px;
                    max-width: 856px;
                    padding: 32px 0;
                    width: 100%
                }

                .c-landings-blog-section .c-blog-slider-section {
                    contain: strict;
                    height: 460px;
                    margin-bottom: 24px;
                    max-width: 1032px;
                    padding: 32px 0;
                    width: 100%
                }
            }

            [data-pwa-installed="true"] .c-blog-slider-section {
                display: none!important
            }

            .c-blog-slider-section__items-wrapper {
                display: block;
                height: 100%;
                overflow: hidden;
                position: relative;
                width: 100%
            }

            .c-blog-slider-section__slides {
                display: flex;
                overflow: scroll hidden;
                position: relative;
                scroll-behavior: smooth;
                scroll-snap-type: x mandatory;
                scroll-snap-type: x mandatory;
                scroll-snap-type: x mandatory;
                z-index: 1
            }

            @media (width >= 960px) {
                .c-blog-slider-section__slides {
                    padding-bottom:25px
                }
            }

            .c-blog-slider-section__nav {
                max-width: 416px;
                pointer-events: none;
                position: absolute;
                right: 50%;
                text-align: center;
                transform: translateX(50%);
                width: 100%;
                z-index: 2
            }

            .c-blog-slider-section__nav::before {
                content: "";
                display: block;
                padding-top: calc(62.5% + 40px);
                width: 100%
            }

            .c-landings-blog-section .c-blog-slider-section__nav {
                max-width: 592px
            }

            .c-blog-slider-section__nav__item {
                background-color: #d8d8d8;
                border: none;
                border-radius: 50%;
                display: inline-block;
                height: 10px;
                line-height: 2;
                margin: 0 2px;
                outline: none;
                overflow: hidden;
                padding: 0;
                pointer-events: all;
                white-space: nowrap;
                width: 10px
            }

            .c-blog-slider-section__nav__item--active {
                background-color: #288557
            }

            @media (width >= 960px) {
                .c-blog-slider-section__nav {
                    right:0;
                    transform: translateX(0)
                }

                .c-blog-slider-section__nav::before {
                    padding-top: calc(62.5% + 8px)
                }
            }

            @media print {
                .c-blog-slider-section {
                    display: none
                }
            }

            .c-blog-slide {
                animation-duration: .2s;
                animation-fill-mode: forwards;
                animation-iteration-count: 1;
                animation-name: blog-post-transition;
                display: block;
                font-size: 0;
                height: 100%;
                margin-left: 12px;
                min-width: 100%;
                scroll-snap-align: center;
                transform: scale(0);
                transform-origin: center center;
                width: 100%
            }

            .c-blog-slide:last-child {
                margin-left: 0
            }

            .c-blog-slide__title {
                display: block;
                font-size: 16px;
                font-weight: 700;
                line-height: 24px;
                margin: 0 auto 8px
            }

            .c-blog-slide__title--desktop {
                display: none
            }

            .c-blog-slide__title--mobile {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap
            }

            .c-blog-slide__title__link {
                color: #0c0c0c;
                text-decoration: none
            }

            .c-blog-slide__media-column {
                background-color: #fff;
                border-radius: 24px;
                contain: strict;
                display: block;
                filter: drop-shadow(0 4px 4px rgb(185 184 219 / 16.1%));
                filter: drop-shadow(0 4px 4px rgb(185 184 219 / 16.1%));
                margin: 0 auto;
                max-width: 416px;
                position: relative;
                z-index: 3
            }

            .c-blog-slide__media-column::after {
                content: "";
                display: block;
                padding-top: 62.5%;
                width: 100%
            }

            .c-blog-slide__media-column__img {
                contain: strict;
                display: block;
                height: 100%;
                object-fit: cover;
                object-fit: cover;
                position: absolute;
                right: 0;
                top: 0;
                width: 100%
            }

            @supports (aspect-ratio: 768/480) {
                .c-blog-slide__media-column {
                    aspect-ratio:768/480;
                    position: static
                }

                .c-blog-slide__media-column::after {
                    display: none
                }

                .c-blog-slide__media-column__img {
                    aspect-ratio: 768/480
                }
            }

            .c-blog-slide__text-column {
                margin-top: 32px;
                width: 100%
            }

            .c-blog-slide__description {
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical;
                color: #545454;
                display: block;
                display: -webkit-box;
                font-size: 14px;
                font-weight: 400;
                line-height: 24px;
                overflow: hidden;
                text-align: justify;
                white-space: normal
            }

            .c-blog-slide__description p {
                margin: 0;
                padding: 0
            }

            .c-blog-slide__more-link {
                color: #288557;
                font-size: 14px;
                font-weight: 700;
                height: 48px;
                line-height: 48px;
                text-decoration: none
            }

            .c-blog-slide__more-link::after {
                border: 2px solid #288557;
                border-bottom: none;
                border-left: none;
                content: "";
                display: inline-block;
                height: 6px;
                margin-right: 12px;
                transform: rotate(-135deg);
                vertical-align: middle;
                width: 6px
            }

            @media (width >= 960px) {
                .c-blog-slide__media-column {
                    display:inline-block;
                    max-width: none;
                    vertical-align: middle
                }

                .c-home-blog-section .c-blog-slide__media-column {
                    width: 416px
                }

                .c-landings-blog-section .c-blog-slide__media-column {
                    width: 592px
                }

                .c-blog-slide__text-column {
                    display: inline-block;
                    max-width: none;
                    vertical-align: middle
                }

                .c-home-blog-section .c-blog-slide__text-column {
                    margin-right: calc(100% - 832px);
                    margin-top: 0;
                    width: 416px
                }

                .c-landings-blog-section .c-blog-slide__text-column {
                    margin-right: calc(100% - 1008px);
                    margin-top: 0;
                    width: 416px
                }

                .c-blog-slide__title {
                    display: block;
                    margin: 0 auto 16px
                }

                .c-blog-slide__title--mobile {
                    display: none
                }

                .c-blog-slide__title--desktop {
                    display: block
                }

                .c-blog-slide__title__link {
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    display: -webkit-box;
                    overflow: hidden;
                    white-space: normal
                }

                .c-blog-slide__description {
                    -webkit-line-clamp: 5
                }

                .c-blog-slide__more-link {
                    display: none
                }
            }

            @keyframes blog-post-transition {
                0% {
                    opacity: 0;
                    transform: scale(0)
                }

                100% {
                    opacity: 1;
                    transform: scale(1)
                }
            }

            .c-download-notif {
                background-color: #fff;
                border: 1px solid var(--app);
                bottom: 0;
                contain: strict;
                display: block;
                font-size: 0;
                height: 48px;
                left: 0;
                line-height: 48px;
                opacity: 0;
                padding-left: 48px;
                padding-right: 16px;
                position: fixed;
                right: 0;
                transform: translateY(0);
                transition: all .4s cubic-bezier(.17,.67,.56,1.32);
                width: 100%;
                z-index: 280
            }

            .c-download-notif[data-visible="true"] {
                opacity: 1;
                transform: translateY(-56px)
            }

            .c-download-notif__logo {
                display: none;
                height: 48px;
                margin-left: 12px;
                vertical-align: middle;
                width: 77px
            }

            .c-download-notif__text {
                color: #545454;
                font-size: 13px;
                font-weight: 700;
                margin-left: 16px
            }

            .c-download-notif__action,.c-download-notif__text {
                display: inline-block;
                line-height: 24px;
                vertical-align: middle
            }

            .c-download-notif__action {
                background-color: var(--app);
                border: none;
                border-radius: 8px;
                color: #fff;
                font-size: 12px;
                font-weight: 500;
                height: 24px;
                padding: 0 16px;
                text-align: center;
                text-decoration: none
            }

            .c-download-notif__close-btn {
                background-color: transparent;
                border: none;
                color: #757575;
                display: block;
                font-size: 32px;
                height: 48px;
                left: 0;
                line-height: 52px;
                padding: 0;
                position: absolute;
                text-align: center;
                top: 0;
                width: 48px
            }

            @supports (display: flex) {
                .c-download-notif {
                    align-items:center;
                    display: flex;
                    justify-content: flex-start
                }

                .c-download-notif__action,.c-download-notif__logo,.c-download-notif__text {
                    vertical-align: initial
                }
            }

            @media (width >= 360px) {
                .c-download-notif {
                    padding-right:0
                }

                .c-download-notif__logo {
                    display: inline-block
                }
            }

            @media (width >= 960px) {
                .c-download-notif {
                    display:none
                }
            }

            [data-pwa-installed="true"] .c-download-notif {
                display: none!important
            }

            .c-download-redirect-modal__message {
                color: #555;
                font-size: 13px;
                font-weight: 400;
                line-height: 24px
            }

            .c-download-redirect-modal__action {
                margin-top: 16px
            }

            @media (width >= 960px) {
                .c-download-redirect-modal__message {
                    font-size:12px;
                    font-weight: 500;
                    line-height: 24px
                }

                .c-download-redirect-modal__action {
                    margin-top: 12px
                }

                .c-download-redirect-modal__frame {
                    width: 500px
                }
            }

            .default-footer {
                background-color: #288557;
                content-visibility: auto;
                display: block;
                margin-bottom: 0;
                margin-top: auto;
                padding: 32px 16px
            }




            @media (width <= 960px) {
                .default-footer {
                    display:none!important
                }
            }

            .default-footer__fix-wrapper {
                display: block;
                font-size: 0
            }

            .default-footer__group-title {
                background-color: #288557;
                color: #fff;
                display: block;
                font-size: 14px;
                font-weight: 700;
                line-height: 24px;
                text-overflow: clip;
                white-space: nowrap
            }

            .default-footer__group-title--hidden-mobile {
                display: none
            }

            .default-footer__group-title::before {
                border: 2px solid #fff;
                border-bottom: 0;
                border-left: 0;
                content: "";
                display: block;
                float: left;
                height: 6px;
                margin-left: 4px;
                margin-top: 8px;
                transform: rotate(135deg);
                transform-origin: center;
                transition: transform .1s ease-in-out;
                width: 6px
            }

            .default-footer__links-group--expanded .default-footer__group-title {
                padding-bottom: 4px
            }

            .default-footer__links-group--expanded .default-footer__group-title::before {
                margin-top: 12px;
                transform: rotate(-45deg);
                transition: transform .2s ease-in-out
            }

            .default-footer__links-group {
                height: 24px;
                margin: 0 auto 16px;
                overflow: hidden;
                padding: 0;
                transition: all .1s ease-in-out
            }

            .default-footer__links-group[data-expanded="true"] {
                height: auto;
                transition: all .2s ease-in-out
            }

            .default-footer__links-group__row {
                margin-right: 24px;
                margin-top: 8px;
                text-overflow: clip;
                white-space: nowrap
            }

            .default-footer__links-group__row::marker {
                color: #fff;
                font-size: 12px
            }

            .default-footer__links-group__action {
                color: #fff;
                font-size: 13px;
                font-weight: 400;
                line-height: 24px;
                text-decoration: none
            }

            .default-footer__contact-row {
                color: #fff;
                font-size: 13px;
                font-weight: 400;
                line-height: 24px;
                margin-top: 8px;
                padding-bottom: 4px
            }

            .default-footer__contact-row__label::before {
                background: #fff;
                border-radius: 50%;
                content: "";
                display: inline-block;
                height: 4px;
                margin-left: 4px;
                vertical-align: middle;
                width: 4px
            }

            .default-footer__contact-row__value {
                direction: ltr;
                float: left;
                font-size: 14px;
                font-weight: 400;
                line-height: 24px
            }

            .default-footer__contact-row__value--full {
                direction: rtl;
                float: none
            }

            .default-footer__contact-row__link {
                background-color: #288557;
                color: #fff;
                direction: ltr;
                text-decoration: none
            }

            .default-footer__contact-row::after {
                clear: both;
                content: "";
                display: block
            }

            .default-footer__logos-row {
                margin-top: 24px;
                text-align: center
            }

            .default-footer__social-row {
                display: block;
                margin-bottom: 12px;
                text-align: center
            }

            .default-footer__social-link {
                background-color: #288557;
                border-radius: 8px;
                contain: strict;
                display: inline-block;
                height: 32px;
                line-height: 32px;
                margin: 0 8px;
                text-align: center;
                vertical-align: middle;
                width: 32px
            }

            .default-footer__social-link__icon {
                fill: #fff;
                display: inline-block;
                height: 24px;
                vertical-align: middle;
                width: 24px
            }

            .default-footer__license-item {
                background-color: #288557;
                border-radius: 8px;
                contain: strict;
                display: inline-block;
                height: 65px;
                margin: 0 8px;
                overflow: hidden;
                vertical-align: top;
                width: 50px
            }

            .default-footer__license-item__img {
                display: block;
                height: auto;
                margin: 0 auto;
                max-width: 100%
            }

            .default-footer__copyright-row {
                background-color: #288557;
                color: #fff;
                font-size: 12px;
                font-weight: 300;
                line-height: 24px;
                padding: 16px 0 4px;
                text-align: center
            }

            .default-footer__copyright-row__action {
                color: #fff;
                font-size: 14px;
                font-weight: 700;
                line-height: 24px;
                text-decoration: underline
            }

            @media (width >= 360px) {
                .default-footer__logos-row {
                    text-align:right
                }

                .default-footer__social-row {
                    float: left
                }

                .default-footer__social-link {
                    margin: 0 16px 0 auto
                }

                .default-footer__license-item {
                    margin: 0 auto 0 16px
                }
            }

            @media (width >= 960px) {
                .default-footer {
                    contain:strict;
                    height: 410px;
                    min-height: auto;
                    padding: 24px 16px
                }

                .default-footer__fix-wrapper {
                    margin: 0 auto;
                    max-width: 1032px
                }

                .default-footer__column {
                    display: inline-block;
                    min-width: 25%;
                    vertical-align: top;
                    width: 25%
                }

                .default-footer__group-title {
                    font-size: 16px;
                    font-weight: 700;
                    line-height: 24px;
                    padding-bottom: 4px
                }

                .default-footer__group-title::before {
                    display: none
                }

                .default-footer__group-title--hidden-mobile {
                    display: block
                }

                .default-footer__links-group {
                    height: auto
                }

                .default-footer__links-group--mini-margin {
                    margin-bottom: 8px
                }

                .default-footer__links-group__action {
                    font-size: 14px;
                    font-weight: 400;
                    line-height: 24px;
                    transition: all .2s ease
                }

                .default-footer__links-group__action:hover {
                    color: #ffa800
                }

                .default-footer__links-group--has-desktop-margin {
                    margin-top: 40px
                }

                .default-footer__contact-row {
                    padding-bottom: 0
                }

                .default-footer__contact-row__label--hidden-desktop {
                    display: none
                }

                .default-footer__contact-row__value {
                    float: none;
                    font-size: 13px;
                    font-weight: 400;
                    line-height: 24px
                }

                .default-footer__contact-row__value--block-desktop {
                    display: block;
                    margin-top: 12px;
                    text-align: right
                }

                .default-footer__contact-row__link {
                    display: inline-block;
                    transition: all .2s ease
                }

                .default-footer__contact-row__link:hover {
                    color: #ffa800
                }

                .default-footer__contact-row::after {
                    display: none
                }

                .default-footer__logos-row {
                    margin-top: 16px;
                    text-align: right
                }

                .default-footer__social-row {
                    float: none;
                    margin-bottom: 8px;
                    text-align: right
                }

                .default-footer__license-item,.default-footer__social-link {
                    margin: 0 auto 0 8px;
                    transition: all .2s ease
                }

                .default-footer__license-item:hover,.default-footer__social-link:hover {
                    background-color: #2d8659
                }

                .default-footer__copyright-row {
                    font-size: 14px;
                    font-weight: 300;
                    line-height: 24px;
                    padding: 4px 0 8px
                }
            }

            @media print {
                .default-footer {
                    display: none
                }
            }

.data2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-block-end: 20px;
    place-items: stretch;
    place-content: center;
}

@media (width <= 768px) {
    .data2 {
        grid-template-columns: repeat(1, 1fr);
    }
}

.menu-label {
    text-transform: uppercase;
    white-space: nowrap;
    font-weight: 600;
    font-size: 13px;
    line-height: 22px;
    border-radius: 10px  20px  25px;
    position: sticky;
    margin: -3% 0 0;
    left: 90%;
    display: inline-block !important;
    padding: 2px 10px !important;
    color: rgb(255 255 255) !important;
    vertical-align: middle !important;
    background-color: var(--zmapp);
    min-width: 100px;
    z-index: 100;
    text-align-last: center;
}

.bdes {
    text-align: end; text-decoration: line-through; font-size: 14px; font-family: auto; color: gray;
}

.zsubx {
        border: 1px solid transparent;
        transition: border-color 0.3s;
        margin-bottom: 13px;
        background: #ffffffb5;
        border-radius: 10px;
        padding: 7px 10px;
        position: relative;
        margin: 5% 0;
    }

.zsubx:hover {
        border-color: #ffe773; /* تغییر رنگ کادر به زرد هنگام رفتن موس */
    }

    /* کادر زرد برای گزینه انتخاب‌شده */
.zsubx.selected {
        border-color: #ffe773;
    }

.subscription-products {
            border: 1px solid #cbcbcb;
            padding: 20px;
            margin: 0 auto;
            background-color: #efefef94;
            border-radius: 10px;
            width: 100%;
        }

.subscription-products h3 {
            text-align: center;
            margin-bottom: 20px;
        }

.subscription-products input[type="submit"] {
            width: 100%;
            background-color: var(--app);
            color: black;
            border: none;
            padding: 15px;
            cursor: pointer;
            text-align-last: center;
            font-weight: bold;
        }

.subscription-products input[type="submit"]:hover {
            background-color: #005177;
        }


select.pricesellfiltering {
	min-width: 135px;}

.infox {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    background: aliceblue;
    padding: 10px;
    border-radius: 10px 10px  0 0;
}

.filekonloginbtn {
            position: relative;
            display: inline-block;
            padding: 2px 40px;
            background: var(--zmapp);
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            outline: none;
            box-shadow: 0 0 0 rgb(24 94 65);
            animation: alarm-pulse 2s infinite;
        }

        @keyframes alarm-pulse {
            0% {
                box-shadow: 0 0 0 0 rgb(26 49 55);
            }

            70% {
                box-shadow: 0 0 0 20px rgb(255 61 0 / 0%);
            }

            100% {
                box-shadow: 0 0 0 0 rgb(255 61 0 / 0%);
            }
        }




.zhello {
    width: -webkit-fill-available;
    padding: 0 15%;
    display: flex;
    flex-direction: column;
    row-gap: 15px;
    text-align-last: center;
    font-size: 18px;
}

@media (width <= 768px) {
    .zhello {
    width: -webkit-fill-available;
    padding: 0;
    }
}

#notes-list {
    padding: 0;
}

div#registration-form {
    width: 90%;
}


.zuserform {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 50%;
    min-height: 55%;
    background: rgb(231 231 231 / 46%);
    box-shadow: 0 4px 30px rgb(0 0 0 / 41%);
    backdrop-filter: blur(10px);
    border: 1px solid rgb(255 255 255 / 21%);
    border-radius: 20px;
}

@media (width <= 768px) {
    .zuserform {
    width: 95%;
    }
}

.mce-i-custom_h3_button { background: #4CAF50; color: white; font-size: 16px; }

#custom-login-form {
    width: 90%;
}

input[type="text"] {
    margin: 0;
}

#mobile, #login_mobile , #login_password {
    text-align: -webkit-center;
    letter-spacing: 6px;
    font-size: 16px;
    font-weight: bold;
}


#verification-code, #verification-sms {
    display: flex;
    justify-content: center;
    gap: 10px; /* فاصله بین مربعات */
    flex-direction: row-reverse;
    font-family: auto;
}

.userlr {
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center;     /* Center vertically */
    height: 100vh;           /* Full viewport height */
    width: 100%;             /* Full width */
    position: relative;      /* Ensure it respects parent dimensions */
}

.zlogreg {position: fixed;height: 100vh;width: 100%;background: linear-gradient(rgb(0 0 0 / 6%), rgb(255 255 255 / 14%)), url("https://zm1.ir/ex/wp-content/themes/arash/app/cdn/bg.jpg");background-size: cover;background-position: center;animation: animatedBackground 80s ease-in-out infinite alternate;}

@keyframes animatedBackground {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 100% 100%;
    }
}


#custom-login-form {
    width: 100%;
}

input[type="text"] {
    margin: 0;
}

#mobile, #login_mobile , #login_password {
    text-align: -webkit-center;
    font-size: 16px;
    font-weight: bold;
}


#verification-code, #verification-sms {
    display: flex;
    justify-content: center;
    gap: 10px; /* فاصله بین مربعات */
    flex-direction: row-reverse;
    font-family: auto;
}

.code-input {
    width: 50px;
    height: 50px;
    font-size: 24px;
    border: 2px solid #ccc;
    border-radius: 5px;
    outline: none;
    justify-items: center;
}

.code-input:focus {
    border-color: #007bff;
}

.code-input.error {
    border-color: red;
}

#verify-code {
    margin-left: 20px;
}




.zbutton {
    background: aliceblue;
    color: black;
    display: flex;
    font-size: 12px;
    padding: 12px;
    border-radius: 10px;
    justify-content: center;
    gap: 5px;
    margin: 0;
}







/* width */
::-webkit-scrollbar {
  width: 8px;
}

/* Track */
::-webkit-scrollbar-track {
  background: rgb(0 0 0 / 10%); 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: rgb(0 0 0 / 27%); 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}



 @keyframes placeHolderShimmer{
    0% {
        background-position: -468px 0;
    }

    100% {
        background-position: 468px 0;
    }}

.preloader {
	  display: flex;
	  animation-duration: 2s;
	  animation-fill-mode: forwards;
	  animation-iteration-count: infinite;
	  animation-name: placeHolderShimmer;
	  animation-timing-function: linear;
	  background: linear-gradient(to right, #eeeeee5c 8%, #d5d5d5a1 18%, #eeeeee17 33%);
	  background-size: 800px 104px;
	  position: relative;
	  min-height: 8px;
	  border-radius: 5px;
	  color: black;
	  flex-direction: column;
	  align-items: center;
	  align-content: space-between;
	  min-width: 80%;
}





      @font-face {
                font-display: fallback;
                font-family: IRANSansXV;
                font-weight: 100 200 300 400 500 600 700 800 900;
                src: url("fonts/IRANSansXV.woff") format("woff-variations"),url("app/IRANSansXV.woff") format("woff")
            }

            @font-face {
                font-family: IRANSansX;
                src: url("app/IRANSansX-Regular.woff") format("woff")
            }

            @font-face {
                font-family: IRANSansX;
                font-weight: 700;
                src: url("app/IRANSansX-Bold.woff") format("woff")
            }

            @keyframes lazy-item {
                0% {
                    opacity: 0;
                    transform: scale(0)
                }

                100% {
                    opacity: 1;
                    transform: scale(1)
                }
            }

            html {
                text-size-adjust: 100%;
                line-height: 1.15
            }

            body {
                margin: 0
            }

            main {
                display: block
            }

            h1 {
                font-size: 1.1em;
                margin: .67em 0;
                font-weight: bold;
            }

            h3 {
                font-size: 12px;
                margin: 1rem;
            }

.zmtitle {
    background: var(--arashapp);
    border-radius: 0 0 10px 10px;
    padding: 7px 0;
    margin: -2px;
    position: absolute;
    width: -webkit-fill-available;
    bottom: 0;
    font-size: 12px;
}

            hr {
                box-sizing: content-box;
                height: 0;
                overflow: visible
            }

            pre {
                font-family: zomorrod,monospace;
                font-size: 1em
            }

            a {
                background-color: transparent;
                text-decoration: none;
                color: black;
            }

.logreg {}

            abbr[title] {
                border-bottom: none;
                text-decoration: underline dotted;
                text-decoration: underline dotted
            }

            b,strong {
                font-weight: bolder
            }

            code,kbd,samp {
                font-family: monospace,monospace;
                font-size: 1em
            }

            small {
                font-size: 80%
            }

            sub,sup {
                font-size: 75%;
                line-height: 0;
                position: relative;
                vertical-align: baseline
            }

            sub {
                bottom: -.25em
            }

            sup {
                top: -.5em
            }

img {
    border-style: none;
    max-width: 100%;
    border-radius: 10px;
    display: block; /* باعث می‌شود تصویر به صورت بلوکی نمایش داده شود */
    margin-left: auto; /* فاصله سمت چپ را خودکار تنظیم می‌کند */
    margin-right: auto; /* فاصله سمت راست را خودکار تنظیم می‌کند */

    /* برای مرکز کردن عمودی هم می‌توانید از flexbox یا position استفاده کنید */
}

.container {
    display: flex;
    justify-content: center; /* برای مرکز کردن افقی */
    align-items: center; /* برای مرکز کردن عمودی */
    height: 100vh; /* ارتفاع کامل صفحه */
}


            button,input,optgroup,select,textarea {
                font-family: inherit;
                font-size: 100%;
                line-height: 1.15;
                margin: 0;
                border-radius: 8px;
                padding: 8px;
            }

            button,input {
                overflow: visible;
                width: -webkit-fill-available;
                margin: 5px 0;
                !i;!;
            }

            button,select {
                text-transform: none
            }

.zfrl {
    display: flex;
    font-weight: bold;
    justify-content: center;
}

            [type="button"],[type="reset"],[type="submit"],button {
                appearance: button;
                width: -webkit-fill-available;
                background: var(--app);
            }

input[type="submit"] {
    background: var(--app);
}

            [type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner,button::-moz-focus-inner {
                border-style: none;
                padding: 0
            }

            [type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring,button:-moz-focusring {
                outline: 1px dotted ButtonText
            }

            fieldset {
                padding: .35em .75em .625em
            }

            legend {
                box-sizing: border-box;
                color: inherit;
                display: table;
                max-width: 100%;
                padding: 0;
                white-space: normal
            }

            progress {
                vertical-align: baseline
            }

            textarea {
                overflow: auto
            }

textarea#comment {
    min-width: 100%;
    max-width: 100%;
}

            [type="checkbox"],[type="radio"] {
                box-sizing: border-box;
                padding: 0;
                position: absolute;
                right: 92%;
                top: -3px;
            }

            [type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button {
                height: auto
            }

            [type="search"] {
                appearance: textfield;
                outline-offset: -2px
            }

            [type="search"]::-webkit-search-decoration {
                appearance: none
            }

            ::-webkit-file-upload-button {
                appearance: button;
                font: inherit
            }

            details {
                display: block
            }

            summary {
                display: list-item
            }

            [hidden],template {
                display: none
            }



      

            * {
                font-feature-settings: "ss02";
                font-feature-settings: "ss02";
                box-sizing: border-box;
                font-family: IRANSansX,system-ui,tahoma
            }

.subtime {
    border-radius: 10px;
    padding: 0 5px;
    display: flex;
    justify-content: center;
    font-weight: bold;
    font-size: 10px;
    align-items: center;
    margin: 0;
}

#weekday {
    grid-column: span 2 / span 2;
    font-weight: bold;
}

.zmhead {
    font-size: 12px;
}



.zomorrodmedia {
    font-size: 10px;
    place-content: center center;
    text-align: center;
    position: relative;
    place-items: center center;
    border: 2px solid var(--arashapp); /* رنگ سبز زمردی */
    box-shadow: 0 4px 8px rgb(0 0 0 / 10%); /* سایه ملایم */
    border-radius: 10px;
    background: white;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(1, 1fr);
    gap: 0;
}

h2 {
    font-size: 16px;
}

  .c-home-category__link__category-name {
    font-size: 10px;
    color: #000;
    padding: 7px;
    text-align: center;
    display: flex;
    position: absolute;
    transform: rotate(0deg);
    top: 70%;
    background: var(--arashapp);
    border-radius: 10px 0 0;
    margin: 2px -2px;
}


            .g-body,html {
                scroll-behavior: smooth
            }

            .g-body {
                background-color: #f3f3f3;
                box-sizing: border-box;
                direction: rtl;
                font-family: IRANSansX,system-ui,tahoma;
                font-size: 16px;
                margin: 0 auto;
                min-height: 100%;
                padding: 0
            }

            @supports (min-height: 100vh) {
                .g-body {
                    min-height:100vh
                }
            }

            @supports (min-height: 100svh) {
                .g-body {
                    min-height:100svh
                }
            }

.h2{font-size:12px; }

            .g-body--locked {
                height: 100vh;
                overflow: hidden
            }

            .g-body--has-mobile-nav {
                padding-bottom: 56px
            }

            @media (width >= 960px) {
                .g-body--has-mobile-nav {
                    padding-bottom:0
                }

                .g-body--has-desktop-nav {
                    padding-top: 64px
                }
            }

            @supports (display: flex) {
                .g-body {
                    display:flex;
                    flex-direction: column;
                    justify-content: start
                }
            }

            @media print {
                .g-body {
                    background-color: transparent;
                    display: block;
                    height: auto;
                    overflow: visible!important;
                    padding-top: 0;
                    width: 100%
                }
            }

            .g-hide {
                display: none!important
            }

            .g-lcp {
                animation-delay: .6s;
                animation-duration: .2s;
                animation-fill-mode: forwards;
                animation-iteration-count: 1;
                animation-name: lcp-anim;
                opacity: 0;
                transform: scale(0)
            }

            @keyframes lcp-anim {
                0% {
                    opacity: 0;
                    transform: scale(0)
                }

                100% {
                    opacity: 1;
                    transform: scale(1)
                }
            }

            #goftino_w {
                z-index: 501!important
            }

            .c-form-label {
                color: #555;
                display: block;
                font-size: 13px;
                font-weight: 400;
                line-height: 24px;
                width: 100%
            }

            .c-form-label--has-margin-bottom {
                margin-bottom: 8px
            }

            .c-form-label--fix-floated,.c-form-label--floated {
                background-color: inherit;
                font-size: 10px;
                font-weight: 400;
                line-height: 12px;
                opacity: 0;
                padding: 0 16px;
                pointer-events: none;
                position: absolute;
                right: 0;
                text-align: center;
                top: 0;
                transform: translateY(12px);
                transition: all .2s ease-in-out;
                width: 100%;
                z-index: 2
            }

            .c-form-item-group--filled .c-form-label--floated,.c-form-item-group:focus-within .c-form-label--floated {
                opacity: 1;
                text-align: right
            }

            .c-form-label--fix-floated {
                opacity: 1;
                text-align: right
            }

            @media (width >= 960px) {
                .c-form-label {
                    font-size:14px;
                    font-weight: 500;
                    line-height: 24px
                }

                .c-form-label--has-margin-bottom {
                    margin-bottom: 12px
                }

                .c-form-label--fix-floated,.c-form-label--floated {
                    font-size: 10px;
                    font-weight: 400;
                    line-height: 12px
                }
            }

            .c-form-base-input {
                background: #f3f3f3;
                border: 1px solid #d8d8d8;
                border-radius: 12px;
                color: #424242;
                contain: strict;
                display: block;
                font-size: 14px;
                font-weight: 300;
                height: 48px;
                line-height: 48px;
                outline: none;
                padding: 0 16px;
                transition: all .2s ease-in;
                width: 100%
            }

            .c-form-base-input::input-placeholder {
                color: #555;
                text-align: center;
                transition: all .1s ease-in-out;
                transition: all .1s ease-in-out
            }

            .c-form-base-input:input-placeholder {
                color: #555;
                text-align: center;
                transition: all .1s ease-in-out;
                transition: all .1s ease-in-out
            }

            .c-form-base-input::input-placeholder {
                color: #555;
                text-align: center;
                transition: all .1s ease-in-out;
                transition: all .1s ease-in-out
            }

            .c-form-base-input::placeholder {
                color: #555;
                text-align: center;
                transition: all .1s ease-in-out
            }

            .c-form-item-group:focus-within .c-form-base-input::input-placeholder {
                color: transparent
            }

            .c-form-item-group:focus-within .c-form-base-input:input-placeholder {
                color: transparent
            }

            .c-form-item-group:focus-within .c-form-base-input::input-placeholder {
                color: transparent
            }

            .c-form-item-group:focus-within .c-form-base-input::placeholder {
                color: transparent
            }

            .c-form-base-input--rtl {
                direction: rtl;
                text-align: center
            }

            .c-form-base-input--ltr {
                direction: ltr;
                text-align: center
            }

            .c-form-base-input:hover {
                border-color: #545454;
                color: #424242
            }

            .c-form-base-input:focus {
                border-color: #288557
            }

            .c-form-base-input[data-has-error="true"] {
                border-color: #ed254e
            }

            .c-form-base-input:disabled {
                border-color: #d8d8d8!important;
                color: #424242!important;
                cursor: not-allowed!important;
                opacity: .38!important
            }

            .c-form-error-message {
                color: #ed254e;
                display: none;
                font-size: 13px;
                font-weight: 300;
                line-height: 24px
            }

            .c-form-error-message[aria-hidden="false"] {
                display: block
            }

            .c-form-item-group {
                display: block;
                margin-left: auto;
                margin-right: auto;
                position: relative;
                width: 100%
            }

            .c-form-item-group--has-margin-bottom {
                margin-bottom: 12px
            }

            @keyframes btn-loading {
                0% {
                    transform: rotate(0deg)
                }

                100% {
                    transform: rotate(1turn)
                }
            }

            .c-btn {
                border: none;
                border-radius: 12px;
                cursor: pointer;
                font-size: 14px;
                font-weight: 700;
                height: 48px;
                line-height: 48px;
                overflow: hidden;
                padding: 0 24px;
                text-align: center;
                text-decoration: none;
                text-overflow: ellipsis;
                white-space: nowrap
            }

            .c-btn--primary {
                background-color: #288557;
                color: #fff
            }

            .c-btn--primary:hover {
                background-color: #4ca579;
                box-shadow: 0 1px 2px rgb(0 0 0 / 30%),0 1px 3px 1px rgb(0 0 0 / 15%)
            }

            .c-btn--primary:active,.c-btn--primary:focus {
                background-color: #4ca579;
                box-shadow: none
            }

            .c-btn--primary:disabled {
                background-color: #d8d8d8;
                box-shadow: none;
                color: #757575;
                cursor: not-allowed
            }

            .c-btn--bordered-primary {
                background-color: #fff;
                border: 1px solid #288557;
                color: #288557
            }

            .c-btn--bordered-primary:hover {
                background-color: rgb(51 153 102 / 8%);
                border-color: #bdbdbd
            }

            .c-btn--bordered-primary:active,.c-btn--bordered-primary:focus {
                background-color: rgb(51 153 102 / 12%);
                border-color: #bdbdbd
            }

            .c-btn--bordered-primary:disabled {
                background-color: transparent;
                border-color: #d8d8d8;
                box-shadow: none;
                color: #757575;
                cursor: not-allowed
            }

            .c-btn--error {
                background-color: #ed254e;
                color: #fff
            }

            .c-btn--error:hover {
                background-color: #fde1e7;
                box-shadow: 0 1px 2px rgb(0 0 0 / 30%),0 1px 3px 1px rgb(0 0 0 / 15%);
                color: #ed254e
            }

            .c-btn--error:active,.c-btn--error:focus {
                background-color: #fde1e7;
                box-shadow: none;
                color: #ed254e
            }

            .c-btn--error:disabled {
                background-color: #d8d8d8;
                box-shadow: none;
                color: #757575;
                cursor: not-allowed
            }

            .c-btn--bordered-error {
                background-color: #fff;
                border: 1px solid #ed254e;
                color: #ed254e
            }

            .c-btn--bordered-error:active,.c-btn--bordered-error:focus,.c-btn--bordered-error:hover {
                background-color: #fde1e7;
                border-color: #ed254e
            }

            .c-btn--bordered-error:disabled {
                background-color: transparent;
                border-color: #d8d8d8;
                box-shadow: none;
                color: #757575;
                cursor: not-allowed
            }

            .c-btn--invisible {
                background-color: transparent;
                border-color: transparent;
                color: #288557
            }

            .c-btn--invisible:hover {
                background-color: rgb(51 153 102 / 8%);
                border-color: transparent
            }

            .c-btn--invisible:active,.c-btn--invisible:focus {
                background-color: rgb(51 153 102 / 12%);
                border-color: transparent
            }

            .c-btn--invisible:disabled {
                background-color: transparent;
                border-color: transparent;
                box-shadow: none;
                color: #757575;
                cursor: not-allowed
            }

            .c-btn--full {
                display: block;
                width: 100%
            }

            .c-btn[data-is-loading="true"] {
                color: transparent;
                position: relative
            }

            .c-btn[data-is-loading="true"]::after {
                animation-duration: 1s;
                animation-fill-mode: forwards;
                animation-iteration-count: infinite;
                animation-name: btn-loading;
                animation-timing-function: ease-in;
                background-image: none!important;
                border: 2px solid rgb(0 0 0 / 40%);
                border-bottom-color: #fff;
                border-radius: 50%;
                content: "";
                display: block;
                height: 18px;
                position: absolute;
                right: 50%;
                top: calc(50% - 9px);
                transform: translateX(-50%);
                width: 18px
            }

            .c-base-modal {
                background-color: transparent;
                inset: 0;
                contain: strict;
                content-visibility: auto;
                display: none;
                overflow: hidden;
                position: fixed;
                transform: translateX(200%);
                z-index: 800
            }

            @supports (display: flex) {
                .c-base-modal {
                    align-items:center;
                    flex-direction: column;
                    justify-content: flex-end
                }
            }

            .c-base-modal[data-hidden="false"] {
                content-visibility: visible;
                display: block;
                transform: translateX(0)
            }

            @supports (display: flex) {
                .c-base-modal[data-hidden="false"] {
                    display:flex
                }
            }

            .c-base-modal__overlay {
                background-color: hsl(0deg 0% 5% / 66%);
                inset: 0;
                opacity: 0;
                position: absolute;
                transition: all .1s ease-in;
                z-index: 0
            }

            .c-base-modal[data-hidden="false"] .c-base-modal__overlay {
                opacity: 1;
                transition: all .4s ease-in
            }

            .c-base-modal__frame {
                background-color: #fff;
                border-top-left-radius: 24px;
                border-top-right-radius: 24px;
                bottom: 0;
                box-shadow: 0 -2px 4px rgb(0 0 0 / 12%);
                left: 0;
                max-height: 90%;
                max-height: 90vh;
                min-height: 140px;
                opacity: 0;
                overflow: hidden;
                padding-top: 16px;
                position: absolute;
                right: 0;
                transform: translateY(150%);
                transition: all .2s cubic-bezier(.17,.67,.61,1.18);
                width: 100%;
                z-index: 1
            }

            .c-base-modal--has-header .c-base-modal__frame {
                padding-top: 52px
            }

            @supports (display: flex) {
                .c-base-modal__frame {
                    margin-bottom:0;
                    margin-top: auto;
                    position: relative
                }
            }

            .c-base-modal[data-hidden="false"] .c-base-modal__frame {
                opacity: 1;
                transform: translateY(0)
            }

            .c-base-modal__header {
                background-color: #fff;
                font-size: 0;
                height: 36px;
                padding: 0 16px;
                position: absolute;
                right: 0;
                text-overflow: ellipsis;
                top: 16px;
                white-space: nowrap;
                width: 100%
            }

            .c-base-modal__title {
                color: #0c0c0c;
                font-size: 16px;
                font-weight: 700;
                line-height: 24px
            }

            .c-base-modal__close-btn {
                background-color: transparent;
                border: none;
                color: #424242;
                font-size: 28px;
                height: 48px;
                left: 0;
                line-height: 52px;
                padding: 0;
                position: absolute;
                top: -12px;
                width: 48px;
                z-index: 2
            }

            .c-base-modal__body {
                -ms-scroll-chaining: none;
                height: 100%;
                overflow-y: auto;
                overscroll-behavior: contain;
                padding: 0 16px 24px
            }

            .c-base-modal--no-padding .c-base-modal__body {
                padding: 0
            }

            @media (width >= 960px) {
                .c-base-modal {
                    padding:24px
                }

                @supports (display: flex) {
                    .c-base-modal {
                        justify-content:center
                    }
                }

                .c-base-modal__frame {
                    border-radius: 24px;
                    margin: 0 auto;
                    transform: scale(0);
                    transition: all .2s cubic-bezier(.17,.67,.61,1.18)
                }

                .c-base-modal[data-hidden="false"] .c-base-modal__frame {
                    transform: scale(1)
                }

                .c-base-modal__header {
                    padding: 0 32px;
                    top: 24px
                }

                .c-base-modal__close-btn {
                    cursor: pointer;
                    left: 16px
                }

                .c-base-modal__close-btn:hover {
                    color: #ed254e
                }

                .c-base-modal__body {
                    padding: 8px 32px 32px
                }
            }

            .c-message-modal {
                z-index: 1000
            }

            .c-message-modal__media-wrapper {
                display: block;
                margin: 0 auto;
                max-width: 200px;
                width: 100%
            }

            .c-message-modal__media-wrapper img {
                width: 100%
            }

            .c-message-modal__title {
                color: #424242;
                display: none;
                font-size: 16px;
                font-weight: 700;
                line-height: 24px;
                margin: 0 auto 12px;
                text-align: center
            }

            .c-message-modal__text {
                color: #555;
                font-size: 14px;
                font-weight: 400;
                line-height: 24px;
                text-align: center
            }

            .c-message-modal__actions-wrapper {
                padding-top: 16px;
                text-align: center
            }

            @media (width >= 960px) {
                .c-message-modal__frame {
                    width:500px
                }

                .c-message-modal__title {
                    margin-bottom: 16px
                }
            }

            .c-nav-mobile {
                background-color: #fff;
                bottom: 0;
                box-shadow: 0 -2px 4px 1px hsl(0deg 0% 76% / 20%);
                contain: strict;
                font-size: 0;
                height: 56px;
                left: 0;
                line-height: 56px;
                padding: 0 16px;
                position: fixed;
                right: 0;
                text-align: center;
                transform: translateY(100%);
                transition: all .2s ease-in;
                width: 100%;
                z-index: 500
            }

            .c-nav-mobile--fixed,.c-nav-mobile--visible {
                transform: translateY(0)
            }

            [data-pwa-installed="true"] .c-nav-mobile {
                padding-bottom: 10px;
                transform: translateY(0)
            }

            .c-nav-mobile__count {
                background-color: #ed254e;
                border: 1px solid #fff;
                border-radius: 50%;
                color: #fff;
                font-size: 0;
                height: 8px;
                line-height: 8px;
                position: absolute;
                right: 50%;
                text-align: center;
                top: 9px;
                transition: all .2s ease-in-out;
                width: 8px
            }

            @supports (transform: scale(0) translateX(90%)) {
                .c-nav-mobile__count {
                    right:calc(50% - 4px);
                    transform: scale(0)
                }
            }

            .c-nav-mobile__count--active {
                transform: scale(1)
            }

            @supports (transform: scale(1) translateX(90%)) {
                .c-nav-mobile__count--active {
                    transform:scale(1) translateX(90%)
                }
            }

            .c-nav-mobile__btn--active .c-nav-mobile__count {
                display: none
            }

            .c-nav-mobile__btn {
                background-color: transparent;
                border: none;
                contain: strict;
                display: inline-block;
                height: 48px;
                line-height: 48px;
                min-width: 22%;
                outline: none;
                padding: 0;
                position: relative;
                text-align: center;
                text-decoration: none;
                transition: all .2s ease-in-out;
                vertical-align: middle;
                width: 22%
            }

            .c-nav-mobile__btn::before {
                background: #fbde9d40;
                border-radius: 16px;
                content: "";
                display: block;
                height: 32px;
                max-width: 120px;
                position: absolute;
                right: 50%;
                top: 8px;
                transform: scale(0) translateX(50%);
                transition: transform .1s ease-in-out;
                width: 100%;
                z-index: -1
            }

            .c-nav-mobile__btn::after {
                color: var(--appfont);
                content: attr(aria-label);
                display: none;
                font-size: 12px;
                font-weight: 500;
                height: 24px;
                line-height: 24px;
                margin-right: 8px;
                min-width: 28px;
                text-align: right;
                vertical-align: middle
            }

            .c-nav-mobile__btn--big-text::after {
                min-width: 48px
            }

            .c-nav-mobile__btn--active {
                min-width: 34%;
                position: relative;
                width: 34%
            }

            .c-nav-mobile__btn--active::before {
                transform: scale(1) translateX(50%)
            }

            .c-nav-mobile__btn__icon {
                height: 28px;
                vertical-align: middle;
                width: 28px
            }

            .c-nav-mobile__btn__icon--line {
                fill: #555;
                display: inline-block
            }

            .c-nav-mobile__btn--active .c-nav-mobile__btn__icon--line {
                display: none
            }

            .c-nav-mobile__btn__icon--fill {
                fill: var(--appfont);
                display: none
            }

            .c-nav-mobile__btn--active .c-nav-mobile__btn__icon--fill {
                display: inline-block
            }

            @media (width >= 360px) {
                .c-nav-mobile__btn--active::after {
                    display:inline-block
                }
            }

            @media (width >= 768px) {
                .c-nav-mobile__btn {
                    min-width:140px;
                    width: 140px
                }
            }

            @media (width >= 960px) {
                .c-nav-mobile {
                    display:none!important
                }
            }

            @supports (display: flex) {
                .c-nav-mobile {
                    align-items:center;
                    display: flex;
                    justify-content: space-around
                }

                .c-nav-mobile__btn {
                    align-items: center;
                    display: inline-flex;
                    justify-content: center
                }

                .c-nav-mobile__btn,.c-nav-mobile__btn::after,.c-nav-mobile__btn__icon {
                    vertical-align: initial
                }
            }

            @media print {
                .c-nav-mobile {
                    display: none
                }
            }

            .c-nav-mobile-drawer {
                background-color: #fff;
                content-visibility: hidden;
                height: 100%;
                height: 100vh;
                opacity: 0;
                overflow-y: auto;
                padding-bottom: 56px;
                position: fixed;
                right: 0;
                top: 0;
                transform: translateX(100%);
                transition: all .1s ease-in;
                width: 100%;
                z-index: 499
            }

            .c-nav-mobile-drawer[aria-hidden="false"] {
                content-visibility: auto;
                opacity: 1;
                transform: translateX(0);
                transition: transform .15s ease-in,opacity .3s ease-in
            }

            .c-nav-mobile-drawer__header {
                background: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%),                radial-gradient(ellipse farthest-corner at left top, #FFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
                contain: strict;
                height: 180px;
                padding: 16px 16px 24px;
                width: 100%
            }

            .c-nav-mobile-drawer__header__icon {
                display: block;
                height: 48px;
                width: 48px
            }

            .c-nav-mobile-drawer__header__user-name {
                color: black;
                padding: 0 12px;
                border-radius: 10px;
                background: var(--app);
                font-size: 75%;
                font-weight: bold;
                line-height: 24px;
                margin: 16px auto 8px;
                display: flex;
                gap: 7px;
                justify-content: space-between;
                align-items: center;
            }

            .c-nav-mobile-drawer__header__user-phone {
                color: #fff;
                display: none;
                font-size: 16px;
                font-weight: 700;
                line-height: 24px
            }

            .c-nav-mobile-drawer__header__action {
                background-color: transparent;
                border: 1px solid #fff;
                border-radius: 12px;
                color: #fff;
                float: left;
                font-size: 12px;
                font-weight: 500;
                height: 32px;
                line-height: 32px;
                margin-top: -7px;
                max-width: 100%;
                overflow: hidden;
                padding: 0 12px;
                text-decoration: none;
                text-overflow: clip;
                white-space: nowrap
            }

            .c-nav-mobile-drawer__header__action__icon {
                display: inline-block;
                height: 24px;
                margin-left: 4px;
                vertical-align: middle;
                width: 24px
            }

            .c-nav-mobile-drawer__splitter {
                background-color: #fff;
                border-top-left-radius: 12px;
                border-top-right-radius: 12px;
                height: 28px;
                line-height: 24px;
                margin-top: -24px;
                position: relative;
                position: sticky;
                position: sticky;
                text-align: center;
                top: 0;
                z-index: 2
            }

            .c-nav-mobile-drawer__splitter::before {
                background-color: #d8d8d8;
                border-radius: 4px;
                content: "";
                display: inline-block;
                height: 4px;
                margin: 0 auto;
                width: 40px
            }

            .c-nav-mobile-drawer__body {
                box-shadow: 0 -4px 4px rgb(185 184 219 / 3.9%);
                height: auto;
                margin: 0 auto;
                min-height: 600px;
                padding: 0 16px 88px;
                width: 100%
            }

            .c-nav-mobile-drawer__root-link {
                color: #0c0c0c;
                contain: strict;
                display: block;
                font-size: 13px;
                font-weight: 500;
                height: 48px;
                line-height: 48px;
                overflow: hidden;
                text-decoration: none;
                text-overflow: clip;
                white-space: nowrap;
                width: 100%
            }

            .c-nav-mobile-drawer__root-link__icon {
                fill: #288557;
                background-color: #f3f3f3;
                border-radius: 8px;
                display: inline-block;
                height: 32px;
                margin-left: 8px;
                vertical-align: middle;
                width: 32px
            }

            .c-nav-mobile-drawer__root-link__icon--mini {
                fill: #0c0c0c;
                padding: 4px
            }

            .c-nav-mobile-drawer__links-group {
                display: block;
                max-height: 48px;
                overflow: hidden;
                position: relative;
                transition: max-height .2s ease-in-out
            }

            .c-nav-mobile-drawer__links-group::before {
                border-right: 2px solid #757575;
                border-top: 2px solid #757575;
                content: "";
                display: inline-block;
                height: 6px;
                left: 4px;
                position: absolute;
                top: 20px;
                transform: rotate(135deg);
                transition: all .2s ease-in-out;
                width: 6px;
                z-index: 1
            }

            .c-nav-mobile-drawer__links-group[aria-expanded="true"] {
                max-height: none
            }

            .c-nav-mobile-drawer__links-group[aria-expanded="true"]::before {
                border-color: #288557;
                transform: rotate(-45deg)
            }

            .c-nav-mobile-drawer__sub-link {
                color: #212121;
                display: block;
                font-size: 13px;
                font-weight: 400;
                height: 48px;
                line-height: 48px;
                overflow: hidden;
                padding-right: 16px;
                text-decoration: none;
                text-overflow: clip;
                white-space: nowrap
            }

            .c-nav-mobile-drawer__sub-link__icon {
                fill: #757575;
                display: inline-block;
                height: 32px;
                margin-left: 12px;
                vertical-align: middle;
                width: 32px
            }

            .c-nav-mobile-drawer__line {
                border: 1px solid #f3f3f3;
                border-bottom: none;
                display: block
            }

            @media (width >= 360px) {
                .c-nav-mobile-drawer__header__user-phone {
                    display:block
                }
            }

            @media (width >= 960px) {
                .c-nav-mobile-drawer {
                    display:none
                }
            }

            .c-nav-desktop {
                background-color: #fff;
                box-shadow: 0 1px 4px rgb(0 0 0 / 20%);
                contain: layout;
                height: 64px;
                line-height: 64px;
                padding: 0 16px;
                position: fixed;
                right: 0;
                top: 0;
                width: 100%
            }

            .c-nav-desktop::after {
                clear: both;
                content: "";
                display: block
            }

            @supports ((-webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2))) or (filter:drop-shadow(0 1px 4px rgba(0,0,0,0.2)))) {
                .c-nav-desktop {
                    box-shadow:none;
                    filter: drop-shadow(0 1px 4px rgb(0 0 0 / 20%));
                    filter: drop-shadow(0 1px 4px rgb(0 0 0 / 20%))
                }
            }

            .c-nav-desktop__fix-container {
                font-size: 0;
                margin: 0 auto;
                max-width: 1032px
            }

            .c-nav-desktop__logo {
                contain: strict;
                cursor: pointer;
                display: inline-block;
                height: 28px;
                line-height: 28px;
                vertical-align: middle;
                width: 65px;
            }

            .c-nav-desktop__logo__shape {
                fill: #288557;
                vertical-align: middle
            }

            .c-nav-desktop__root-link {
                border-bottom: 2px solid transparent;
                color: #212121;
                contain: strict;
                cursor: pointer;
                display: inline-block;
                font-size: 12px;
                font-weight: 400;
                height: 28px;
                line-height: 24px;
                margin-right: 24px;
                padding: 0;
                text-decoration: none;
                transition: all .2s ease-in;
                vertical-align: middle
            }

            .c-nav-desktop__root-link__icon {
                fill: #212121;
                display: inline-block;
                height: 24px;
                margin-left: 8px;
                vertical-align: middle;
                width: 24px
            }

            .c-nav-desktop__root-link--services-btn {
                background-color: transparent;
                border: none;
                margin-right: 28px
            }

            .c-nav-desktop__root-link:hover {
                border-bottom-color: #288557;
                color: #288557
            }

            .c-nav-desktop__btns-wrapper {
                float: left;
                font-size: 0;
                height: 32px;
                line-height: 32px;
                margin-top: 16px;
                position: relative
            }

            .c-nav-desktop__basket-btn,.c-nav-desktop__download-btn,.c-nav-desktop__profile-btn {
                background-color: transparent;
                border: none;
                border-radius: 8px;
                color: #212121;
                contain: strict;
                cursor: pointer;
                display: inline-block;
                font-size: 12px;
                font-weight: 400;
                height: 32px;
                line-height: 32px;
                margin-right: 20px;
                padding: 0;
                text-align: center;
                text-decoration: none;
                transition: all .2s ease-in;
                vertical-align: middle
            }

            .c-nav-desktop__basket-btn {
                position: relative
            }

            .c-nav-desktop__basket-btn__count {
                background-color: #ed254e;
                border: 1px solid rgb(51 153 102 / 20%);
                border-radius: 50%;
                color: #fff;
                font-size: 0;
                height: 8px;
                line-height: 8px;
                position: absolute;
                right: 8px;
                text-align: center;
                top: 2px;
                transform: scale(0);
                transition: all .2s ease-in-out;
                width: 8px
            }

            .c-nav-desktop__basket-btn__count--active {
                transform: scale(1)
            }

            .c-nav-desktop__profile-btn {
                position: relative
            }

            .c-nav-desktop__profile-btn__text {
                contain: strict;
                direction: ltr;
                height: 100%;
                left: 0;
                position: absolute;
                text-align: left;
                width: 100%
            }

            .c-nav-desktop__download-btn {
                background-color: rgb(51 153 102 / 20%);
                display: none;
                margin-right: 0
            }

            .c-nav-desktop__basket-btn:hover,.c-nav-desktop__download-btn:hover,.c-nav-desktop__profile-btn:hover {
                color: #288557;
                transform: scale(.9)
            }

            .c-nav-desktop__btns-icon-wrapper {
                fill: #288557;
                background-color: rgb(51 153 102 / 20%);
                border-radius: 8px;
                display: inline-block;
                height: 32px;
                padding: 3px;
                vertical-align: middle;
                margin-left: 80px;
            }

            .c-nav-desktop__btns-icon-wrapper--transparent {
                background-color: transparent
            }

            .c-nav-desktop__profile-popup {
                background-color: #fff;
                border: 1px solid #f3f3f3;
                border-radius: 16px;
                box-shadow: 0 4px 4px 0 rgb(185 184 219 / 16%);
                display: block;
                left: 0;
                max-height: 0;
                opacity: 0;
                overflow: hidden;
                padding: 16px;
                pointer-events: none;
                position: absolute;
                text-align: right;
                top: 40px;
                transform: translateX(-80%);
                transition: opacity .2s ease-in,transform .2s ease-in;
                visibility: hidden;
                width: 280px
            }

            .c-nav-desktop__profile-popup__line {
                border: none;
                border-top: 1px solid #f3f3f3;
                height: 1px
            }

            .c-nav-desktop__profile-popup__action {
                background-color: transparent;
                border: none;
                color: #0c0c0c;
                cursor: pointer;
                display: block;
                font-size: 13px;
                font-weight: 500;
                height: 32px;
                line-height: 24px;
                margin: 0 auto 12px;
                overflow: hidden;
                padding: 0;
                text-align: right;
                text-decoration: none;
                text-overflow: ellipsis;
                transition: all .2s ease-in;
                white-space: nowrap;
                width: 100%
            }

            .c-nav-desktop__profile-popup__action:hover {
                color: #288557
            }

            .c-nav-desktop__profile-popup__action--last {
                margin-bottom: 0;
                margin-top: 12px
            }

            .c-nav-desktop__profile-popup__action__icon {
                fill: #288557;
                background: #f3f3f3;
                border-radius: 8px;
                display: inline-block;
                height: 32px;
                margin-left: 8px;
                padding: 4px;
                vertical-align: middle;
                width: 32px
            }

            .c-nav-desktop__profile-popup--active {
                max-height: unset;
                opacity: 1;
                pointer-events: all;
                transform: translateX(0);
                visibility: visible
            }

            @media (width >= 1200px) {
                .c-nav-desktop {
                    padding:0
                }

                .c-nav-desktop__download-btn {
                    display: inline-block;
                    padding-left: 16px
                }

                @supports (display: flex) {
                    .c-nav-desktop__download-btn {
                        align-items:center;
                        display: inline-flex;
                        justify-content: flex-start;
                        vertical-align: initial
                    }
                }
            }

            @supports (display: flex) {
                .c-nav-desktop {
                    align-items:center;
                    flex-wrap: nowrap;
                    justify-content: center
                }

                .c-nav-desktop::after {
                    display: none
                }

                .c-nav-desktop__basket-btn,.c-nav-desktop__logo,.c-nav-desktop__profile-btn,.c-nav-desktop__root-link {
                    align-items: center;
                    display: inline-flex;
                    justify-content: center;
                    vertical-align: initial;
                    white-space: nowrap
                }

                .c-nav-desktop__logo__shape,.c-nav-desktop__root-link__icon {
                    vertical-align: initial
                }

                .c-nav-desktop__fix-container {
                    align-items: center;
                    display: flex;
                    flex-wrap: nowrap;
                    justify-content: flex-start;
                    width: 100%
                }

                .c-nav-desktop__btns-wrapper {
                    float: none;
                    justify-content: flex-end;
                    margin-left: 0;
                    margin-right: auto;
                    margin-top: auto
                }
            }

            .c-nav-desktop {
                display: none;
                z-index: 500
            }

            @media (width >= 960px) {
                .c-nav-desktop {
                    display:block
                }

                @supports (display: flex) {
                    .c-nav-desktop {
                        display:flex
                    }
                }
            }

            @media print {
                .c-nav-desktop {
                    display: none
                }
            }

            .c-nav-desktop-drawer {
                contain: strict;
                height: 100%;
                height: 100vh;
                overflow: hidden;
                position: fixed;
                right: 0;
                top: 0;
                transition: all .2s ease-in-out;
                width: 100%;
                z-index: 501
            }

            .c-nav-desktop-drawer__overlay {
                background-color: hsl(0deg 0% 5% / 66%);
                display: block;
                height: 100%;
                opacity: 0;
                position: absolute;
                right: 0;
                top: 0;
                transition: none;
                width: 100%;
                z-index: 0
            }

            [data-hidden="false"] .c-nav-desktop-drawer__overlay {
                opacity: 1;
                transition: all .7s ease-in
            }

            .c-nav-desktop-drawer__header {
                background-color: #fff;
                color: #0c0c0c;
                font-size: 16px;
                font-weight: 700;
                height: 92px;
                line-height: 24px;
                padding: 40px 40px 0;
                position: absolute;
                right: 0;
                top: 0;
                width: 368px;
                z-index: 3;
                display: flex;
                justify-content: space-between;
            }

            .c-nav-desktop-drawer__close-btn {
                background-color: transparent;
                border: none;
                cursor: pointer;
                display: flex;
                font-size: 32px;
                font-weight: 300;
                line-height: 1;
                margin-top: -4px;
                padding: 0;
                justify-content: flex-end;
            }

            .c-nav-desktop-drawer__close-btn:hover {
                color: #ed254e
            }

            .c-nav-desktop-drawer__main-links-wrapper {
                background-color: #fff;
                direction: ltr;
                display: block;
                height: 100%;
                height: 100vh;
                overflow-y: auto;
                padding: 92px 0 0;
                position: relative;
                width: 370px;
                z-index: 1
            }

            .c-nav-desktop-drawer__main-links-wrapper::-webkit-scrollbar {
                height: 4px;
                padding-right: 20px;
                width: 4px
            }

            .c-nav-desktop-drawer__main-links-wrapper::-webkit-scrollbar-track {
                box-shadow: inset 0 0 3px #d8d8d8
            }

            .c-nav-desktop-drawer__main-links-wrapper::-webkit-scrollbar-thumb {
                border-radius: 4px;
                box-shadow: inset 0 0 3px #bdbdbd
            }

            .c-nav-desktop-drawer__root-link {
                color: #0c0c0c;
                cursor: pointer;
                direction: rtl;
                display: block;
                font-size: 13px;
                font-weight: 500;
                height: 42px;
                line-height: 42px;
                margin-bottom: 8px;
                overflow: hidden;
                padding: 8px 40px;
                text-decoration: none;
                text-overflow: clip;
                transition: all .2s ease-in-out;
                white-space: nowrap;
                width: 100%
            }

            .c-nav-desktop-drawer__root-link__icon {
                fill: #0c0c0c;
                background-color: #f3f3f3;
                border-radius: 8px;
                display: inline-block;
                height: 32px;
                margin-left: 8px;
                vertical-align: middle;
                width: 32px
            }

            .c-nav-desktop-drawer__root-link__icon--mini {
                padding: 4px
            }

            .c-nav-desktop-drawer__links-group:hover .c-nav-desktop-drawer__root-link,.c-nav-desktop-drawer__root-link:hover {
                background-color: rgb(51 153 102 / 8%);
                color: #288557
            }

            .c-nav-desktop-drawer__line {
                border: 1px solid #f3f3f3;
                border-bottom: none;
                display: block;
                margin: 0 auto 16px;
                width: calc(100% - 80px)
            }

            .c-nav-desktop-drawer__links-group--active,.c-nav-desktop-drawer__links-group:hover {
                z-index: 4
            }

            .c-nav-desktop-drawer__sub-menu {
                background-color: #fff;
                box-shadow: inset -1px 0 2px #f3f3f3;
                direction: ltr;
                display: block;
                height: 100%;
                height: 100vh;
                max-width: 0;
                opacity: 0;
                overflow-y: auto;
                padding: 0;
                position: fixed;
                right: 369px;
                top: 0;
                transition: all .1s ease-in-out;
                width: 370px;
                z-index: 3
            }

            .c-nav-desktop-drawer__sub-menu::-webkit-scrollbar {
                height: 4px;
                padding-right: 20px;
                width: 4px
            }

            .c-nav-desktop-drawer__sub-menu::-webkit-scrollbar-track {
                box-shadow: inset 0 0 3px #d8d8d8
            }

            .c-nav-desktop-drawer__sub-menu::-webkit-scrollbar-thumb {
                border-radius: 4px;
                box-shadow: inset 0 0 3px #bdbdbd
            }

            .c-nav-desktop-drawer__sub-menu__header {
                color: #0c0c0c;
                direction: rtl;
                font-size: 16px;
                font-weight: 700;
                height: 92px;
                line-height: 24px;
                padding: 40px 40px 0;
                right: 0;
                top: 0
            }

            .c-nav-desktop-drawer__sub-menu__body {
                direction: rtl;
                font-size: 0;
                padding: 0 40px;
                text-align: right
            }

            .c-nav-desktop-drawer__links-group:hover .c-nav-desktop-drawer__sub-menu,.c-nav-desktop-drawer__sub-menu .c-nav-desktop-drawer__links-group--active {
                max-width: none;
                opacity: 1;
                transition: max-width .4s ease-in-out,opacity .3s ease-in-out
            }

            .c-nav-desktop-drawer__sub-link {
                color: #0c0c0c;
                display: inline-block;
                font-size: 14px;
                font-weight: 400;
                line-height: 24px;
                margin-bottom: 24px;
                text-align: center;
                text-decoration: none;
                transition: all .2s ease-in;
                vertical-align: top;
                width: 33.33%
            }

            .c-nav-desktop-drawer__sub-link__icon {
                background-color: #f3f3f3;
                border-radius: 16px;
                display: block;
                height: 64px;
                margin: 0 auto 12px;
                padding: 10px;
                width: 64px
            }

            .c-nav-desktop-drawer__sub-link:hover .c-nav-desktop-drawer__sub-link__icon {
                background-color: rgb(51 153 102 / 8%)
            }

            .c-nav-desktop-drawer__sub-link:hover {
                color: #288557;
                transform: scale(.9)
            }

            @ (display: flex) {
                .c-nav-desktop-drawer__root-link {
                    align-items:center;
                    display: flex;
                    justify-content: flex-start
                }

                .c-nav-desktop-drawer__root-link__icon {
                    vertical-align: initial
                }

                .c-nav-desktop-drawer__sub-menu__body {
                    align-items: flex-start;
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: flex-start
                }

                .c-nav-desktop-drawer__sub-link {
                    flex-basis: 33.33%
                }
            }

            .c-nav-desktop-drawer {
                display: none
            }

            @media (width >= 960px) {
                .c-nav-desktop-drawer {
                    content-visibility:hidden;
                    display: block;
                    transform: translateX(100%)
                }

                .c-nav-desktop-drawer[data-hidden="false"] {
                    content-visibility: auto;
                    transform: translateX(0)
                }

                .c-edit-profile-modal__frame {
                    width: 500px
                }
            }

            .c-home-header {
                display: block;
                font-size: 0;
                max-height: 145.6px;
                min-height: 145.6px;
                position: fixed;
                right: 0;
                text-align: center;
                top: 0;
                transition: all .4s ease;
                width: 100%;
                z-index: 300
            }

            .c-home-header[data-mini-mode="true"] {
                max-height: 104.4px;
                min-height: 104.4px
            }

            .c-home-header__fixed-clear {
                display: block;
                max-height: 145.6px;
                min-height: 145.6px;
                transition: all .4s ease;
                width: 100%
            }

            .c-home-header__texts-layer {
                background: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%),                radial-gradient(ellipse farthest-corner at left top, #FFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
                border-bottom-left-radius: 12px;
                border-bottom-right-radius: 12px;
                display: block;
                max-height: 130px;
                min-height: 130px;
                padding: 12px;
                transition: all .4s ease
            }

            [data-mini-mode="true"] .c-home-header__texts-layer {
                max-height: 90px;
                min-height: 90px
            }

            .c-home-header__logo {
                display: inline-block;
                height: 29px;
                transition: all .4s ease;
                vertical-align: middle;
                width: 44px
            }

            [data-mini-mode="true"] .c-home-header__logo {
                transform: scale(.7) translateY(-16px)
            }

            .c-home-header__title {
                color: #fff;
                display: inline-block;
                font-size: 20px;
                font-weight: 700;
                height: 30px;
                line-height: 30px;
                margin-right: 4px;
                transition: all .4s ease;
                vertical-align: middle;
                width: 100px;
            }

            [data-mini-mode="true"] .c-home-header__title {
                transform: scale(.7) translateX(20px) translateY(-15px)
            }

            .c-home-header__title--mobile {
                position: relative
            }

            .c-home-header__title--desktop {
                contain: strict;
                display: none
            }

            .c-home-header__description {
                display: none
            }

            .c-home-header__categories-layer {
                background: #fff;
                border-radius: 16px;
                box-shadow: 0 4px 2px rgb(142 141 208 / 16%);
                contain: strict;
                display: block;
                font-size: 0;
                margin: -50.4px auto 0;
                max-height: 80px;
                min-height: 78px;
                overflow: hidden;
                padding: 20px 16px 4px;
                transition: all .4s ease;
                width: calc(100% - 32px)
            }

            [data-mini-mode="true"] .c-home-header__categories-layer {
                margin-top: -33.6px;
                max-height: 55px;
                min-height: 55px;
                padding: 3%;
            }

            .c-home-header__category {
                display: inline-block;
                margin-left: 4px;
                min-height: 20px;
                overflow: hidden;
                position: relative;
                text-decoration: none;
                transition: all .4s ease;
                vertical-align: middle;
                white-space: nowrap;
                width: calc(25% - 3px)
            }

            .c-home-header__category::after {
                background-color: rgb(51 153 102 / 8%);
                content: "";
                display: block;
                height: 40%;
                left: 0;
                opacity: 0;
                position: absolute;
                top: 4%;
                transition: all .4s ease;
                width: 1px
            }

            .c-home-header__category--last-item {
                margin-left: 0
            }

            .c-home-header__category--last-item::after {
                display: none
            }

            .c-home-header__category__icon {
                fill: #fff;
                border-radius: 8px;
                display: block;
                height: 32px;
                margin: 0 auto;
                transition: all .4s ease;
                width: 32px
            }

            .c-home-header__category__icon--bill {
                background-color: var(--arashapp);
            }

            .c-home-header__category__icon--vehicle {
                background-color: var(--arashapp);
            }

            .c-home-header__category__icon--bank {
                background-color: var(--arashapp);
            }

            .c-home-header__category__icon--travel {
                background-color: #29b672
            }

            .c-home-header__category__text {
                color: #0c0c0c;
                contain: strict;
                display: block;
                font-size: 11px;
                font-weight: 300;
                height: 24px;
                line-height: 24px;
                transition: all .4s ease;
                width: 100%
            }

            [data-mini-mode="true"] .c-home-header__category::after {
                opacity: 1
            }

            [data-mini-mode="true"] .c-home-header__category__icon {
                background-color: var(--arashapp);
                transform: translateY(0);
            }

            [data-mini-mode="true"] .c-home-header__category__icon--bill {
                fill: #36a9e2
            }

            [data-mini-mode="true"] .c-home-header__category__icon--vehicle {
                fill: #9c34e0
            }

            [data-mini-mode="true"] .c-home-header__category__icon--bank {
                fill: #ff8700
            }

            [data-mini-mode="true"] .c-home-header__category__icon--travel {
                fill: #29b672
            }

            [data-mini-mode="true"] .c-home-header__category__text {
                opacity: 0;
                transform: scale(.8) translateY(100%)
            }

            @media (width >= 360px) {
                .c-home-header__category__text {
                    font-size:12px;
                    font-weight: 300;
                    line-height: 24px
                }
            }

            @media (width >= 960px) {
                .c-home-header {
                    background-color:#f3f3f3;
                    max-height: 224px;
                    min-height: 224px;
                    padding: 32px 16px 0;
                    top: 64px;
                    transition: all .4s ease
                }

                .c-home-header[data-mini-mode="true"] {
                    max-height: 224px;
                    min-height: 224px;
                    transform: translateY(-156px)
                }

                .c-home-header__fixed-clear {
                    margin-top: 32px;
                    max-height: 224px;
                    min-height: 224px
                }

                .c-home-header__texts-layer {
                    background: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%),                radial-gradient(ellipse farthest-corner at left top, #FFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
                    border-radius: 40px;
                    margin: 0 auto;
                    max-width: 1032px;
                    padding-top: 40px
                }

                .c-home-header__texts-layer,[data-mini-mode="true"] .c-home-header__texts-layer {
                    max-height: 200px;
                    min-height: 200px
                }

                .c-home-header__title--mobile {
                    display: none
                }

                .c-home-header__title--desktop {
                    display: inline-block;
                    font-size: 28px;
                    font-weight: 700;
                    height: 38px;
                    line-height: 42px;
                    margin: 0 12px 0 auto;
                    vertical-align: middle;
                    width: 500px
                }

                .c-home-header__title__special-word {
                    color: #0c0c0c
                }

                .c-home-header__description {
                    color: #fff;
                    display: block;
                    font-size: 16px;
                    font-weight: 700;
                    line-height: 24px;
                    margin: 12px auto 0;
                    padding: 0
                }

                .c-home-header__categories-layer {
                    margin: -56px auto 0;
                    max-height: 80px;
                    max-width: 856px;
                    min-height: 80px;
                    padding: 24px
                }

                [data-mini-mode="true"] .c-home-header__categories-layer {
                    margin-top: -56px;
                    max-height: 80px;
                    min-height: 80px
                }

                .c-home-header__category::after {
                    background-color: #d8d8d8;
                    height: 32px;
                    opacity: 1;
                    top: 6%;
                    width: 1px
                }

                .c-home-header__category__icon {
                    display: inline-block;
                    height: 40px;
                    vertical-align: middle;
                    width: 40px
                }

                .c-home-header__category__text {
                    display: inline-block;
                    font-size: 14px;
                    font-weight: 500;
                    line-height: 24px;
                    margin-right: 8px;
                    vertical-align: middle;
                    width: 82px
                }

                [data-mini-mode="true"] .c-home-header__category__icon {
                    fill: #fff;
                    transform: scale(1) translateY(0)
                }

                [data-mini-mode="true"] .c-home-header__category__icon--bill {
                    background-color: #fdbd31;
                }

                [data-mini-mode="true"] .c-home-header__category__icon--vehicle {
                    background-color: #9c34e0
                }

                [data-mini-mode="true"] .c-home-header__category__icon--bank {
                    background-color: #ff8700
                }

                [data-mini-mode="true"] .c-home-header__category__icon--travel {
                    background-color: #29b672
                }

                [data-mini-mode="true"] .c-home-header__category__text {
                    opacity: 1;
                    transform: scale(1) translateY(0)
                }
            }

            .c-home-banner {
                contain: layout;
                display: block;
                font-size: 0;
                margin: 12px auto;
                overflow: auto hidden;
                white-space: nowrap;
                width: 100%;
                scrollbar-width: thin;
                scrollbar-color: var(--arashapp) transparent;
            }

.c-home-banner::-webkit-scrollbar {
  height: 8px; /* تنظیم ارتفاع اسکرول بار افقی */
}

.c-home-banner::-webkit-scrollbar-track {
  background: rgb(0 0 0 / 10%);
}

.c-home-banner::-webkit-scrollbar-thumb {
  background: rgb(0 0 0 / 27%);
}

.c-home-banner::-webkit-scrollbar-thumb:hover {
  background: #555;
}


            .c-home-banner__item {
                animation-delay: .4s;
                animation-duration: .2s;
                animation-fill-mode: forwards;
                animation-iteration-count: 1;
                animation-name: banner-transition;
                background-color: #bdbdbd;
                border-radius: 16px;
                contain: layout;
                display: inline-block;
                margin-right: 16px;
                max-width: 320px;
                min-width: 75%;
                opacity: 0;
                overflow: hidden;
                position: relative;
                transform: scale(0);
                transition: opacity;
                vertical-align: top;
                margin: 10px 4px;
            }

            .c-home-banner__item::after {
                content: "";
                display: block;
                padding-top: 33.33%;
                width: 100%
            }

            .c-home-banner__item__img {
                border-radius: 16px;
                display: block;
                height: 100%;
                object-fit: cover;
                object-fit: cover;
                position: absolute;
                right: 0;
                top: 0;
                width: 100%
            }

            @supports (aspect-ratio: 320/107) {
                .c-home-banner__item {
                    aspect-ratio:320/107;
                }

                .c-home-banner__item::after {
                    display: none
                }
            }

@media (width >= 320px) and (width <= 359px){
                .c-home-banner {
                    contain:strict;
                    height: 180px;
                    scrollbar-width: thin;
                    scrollbar-color: var(--arashapp) transparent;
                }

                .c-home-banner__item {
                    height: 160px;
                    min-width: 335px;
                    width: 320px
                }
            }



            @media (width <= 320px) {
                .c-home-banner {
                    contain:strict;
                    height: 141px;
                    scrollbar-width: thin;
                    scrollbar-color: var(--arashapp) transparent;
                }

                .c-home-banner__item {
                    height: 131px;
                    min-width: 275px;
                    width: 275px;
                }
            }


            @media (width >= 960px) {
                .c-home-banner {
                    height: 250px;
                    margin: 16px auto 0;
                    max-width: 856px;
                    overflow: auto hidden;
                    scrollbar-width: thin; /* For Firefox */
                    scrollbar-color: var(--arashapp) transparent; /* For Firefox */
                }

                .c-home-banner::-webkit-scrollbar {
                    background-color: #d8d8d8;
                    height: 8px
                }

                .c-home-banner::-webkit-scrollbar-track {
                    border-radius: 4px;
                    box-shadow: inset 0 0 20px #f3f3f3
                }

                .c-home-banner::-webkit-scrollbar-thumb {
                    border-radius: 4px;
                    box-shadow: inset 0 0 100px #288557
                }

                .c-home-banner__item {
                    height: 220px;
                    margin-right: 24px;
                    max-width: calc(55% - 12px);
                    min-width: calc(55% - 12px);
                    width: calc(55% - 12px);
                }

                .c-home-banner__item--first {
                    margin-right: 0
                }
            }

            @keyframes banner-transition {
                0% {
                    opacity: 0;
                    transform: scale(0)
                }

                100% {
                    opacity: 1;
                    transform: scale(1)
                }
            }

            .c-home-category {
                background-color: #fff;
                border-radius: 16px;
                content-visibility: auto;
                display: block;
                margin: 25px auto 0;
                padding: 16px 24px;
                width: 100%;
                position: relative;
            }

            .c-home-category--above-fold {
                content-visibility: visible
            }

            .c-home-category__title {
                color: #0c0c0c;
                display: block;
                font-size: 12px;
                font-weight: 700;
                line-height: 24px;
                margin: 0 auto 12px;
                padding: 0
            }

            .c-home-category__links-wrapper {
                font-size: 0;
                margin-top: -16px;
            }

            .c-home-category__link {
                display: flex;
                height: 176px;
                position: relative;
                text-align: center;
                text-decoration: none;
                transition: all .2s ease-in;
                vertical-align: top;

                /* From https: //css.glass */
                background: rgb(255 255 255 / 20%);
                border-radius: 16px;
                box-shadow: 0 4px 30px rgb(0 0 0 / 10%);
                border: 1px solid rgb(255 255 255 / 30%);
                width: calc(33.33% - 12px);
                flex-flow: column wrap;
                justify-content: center;
            }

            .c-home-category__link__icon {
                background-color: #f3f3f3;
                border-radius: 12px;
                contain: strict;
                display: block;
                height: 60px;
                width: 60px;
                margin: -20px  auto 4px;
                padding: 5px;
                z-index: 0
            }

            .c-home-category__link__badge {
                background-color: #f3f3f3;
                border-radius: 10px 0;
                contain: layout;
                display: inline-block;
                height: 24px;
                left: -1px;
                padding: 0 4px;
                position: absolute;
                text-align: center;
                top: -7px;
                width: 75%;
                z-index: 1
            }

            .c-home-category__link__badge,.c-home-category__link__text {
                color: #0c0c0c;
                font-size: 11px;
                font-weight: 400;
                line-height: 24px
            }

            .c-home-category__link__text {
                display: block;
                text-decoration: none
            }

            .c-home-category__link:hover .c-home-category__link__text {
                color: #288557
            }

            .c-home-category__link:hover {
                transform: scale(.9);
            }

            @supports (display: flex) {
                .c-home-category__links-wrapper {
                    display: flex;
                    align-items: center;
                    flex-flow: row wrap;
                    row-gap: 18px;
                }
            }

/* حالت پایه برای مرورگرهای خیلی قدیمی */
.c-home-category__link {
    margin: 16px 6px 0;
    width: 100%; /* پیش‌فرض: یک ستون */
}

.c-home-category__link__text {
    padding: 0 4px;
}

/* از 300px به بالا: دو ستون */
@media (width >= 270px) {
    .c-home-category__link {
        width: 50%;
    }
}

/* از 320px به بالا: دقیق‌تر - فاصله بهتر بین دو ستون */
@media (width >= 310px) {
    .c-home-category__link {
        width: calc(49% - 12px);
    }
}

/* از 360px به بالا: سه ستون */
@media (width >= 360px) {
    .c-home-category__link {
        width: calc(33.33% - 12px);
    }
}

/* از 480px به بالا: فونت بهتر برای متن */
@media (width >= 480px) {
    .c-home-category__link__text {
        font-size: 13px;
        font-weight: 400;
        line-height: 24px;
    }
}

/* از 768px به بالا: هشت ستون */
@media (width >= 768px) {
    .c-home-category__link {
        width: calc(20% - 12px);
    }
}






            @media (width >= 960px) {
                .c-home-category {
                    margin: 16px auto 20px;
                    max-width: 856px;
                    padding: 24px;
                    position: relative;
                }

                .c-home-category__title {
                    font-size: 16px;
                    font-weight: 700;
                    line-height: 24px;
                    margin: 0 auto 16px
                }

                .c-home-category__title::before {
                    background-color: #0c0c0c;
                    border-radius: 50%;
                    content: "";
                    display: inline-block;
                    height: 8px;
                    margin-left: 8px;
                    vertical-align: middle;
                    width: 8px
                }

                .c-home-category__links-wrapper {
                    margin-top: -24px
                }

                .c-home-category__link {
                    height: 165px;
                    margin-top: 24px
                }

                .c-home-category__link__icon {
                    height: 70px;
                    margin-bottom: 12px;
                    width: 70px;
                }

                .c-home-category__link__text {
                    font-size: 14px;
                    font-weight: 400;
                    line-height: 24px
                }
            }

            .c-home-about {
                content-visibility: auto;
                font-size: 0;
                margin: 0 auto;
                padding: 32px 16px;
                width: 100%
            }

            .c-home-about__title {
                color: #0c0c0c;
                display: block;
                font-size: 16px;
                font-weight: 700;
                height: 24px;
                line-height: 24px;
                margin: 0 auto 8px
            }

            .c-home-about__text {
                color: #555;
                font-size: 14px;
                font-weight: 400;
                line-height: 24px;
                margin: 0 auto;
                padding: 0;
                text-align: justify;
                text-align-last: right
            }

            .c-home-about__media {
                display: block;
                margin: 24px auto 0;
                max-width: 416px;
                overflow: hidden;
                position: relative
            }

            .c-home-about__media__image {
                height: auto;
                width: 100%
            }

            .c-home-about__media::after {
                content: "";
                display: block;
                padding-top: 53.65%
            }

            @supports (aspect-ratio: 328/217) {
                .c-home-about__media {
                    aspect-ratio:328/217
                }

                .c-home-about__media::after {
                    display: none
                }
            }

            @media (width >= 960px) {
                .c-home-about {
                    contain:strict;
                    height: 544px;
                    max-width: 856px;
                    padding: 24px 0
                }

                .c-home-about__title {
                    margin-bottom: 16px
                }

                .c-home-about__media,.c-home-about__texts-group {
                    display: inline-block;
                    vertical-align: middle;
                    width: 416px
                }

                .c-home-about__media {
                    margin-right: calc(100% - 832px)
                }

                @supports (display: flex) {
                    .c-home-about {
                        align-items:center;
                        display: flex;
                        justify-content: space-between
                    }
                }
            }

            [data-pwa-installed="true"] .c-home-about {
                display: none!important
            }

            .c-download-section {
                content-visibility: auto;
                font-size: 0;
                margin: 0 auto;
                padding: 32px 16px;
                width: 100%
            }

            .c-download-section__title {
                color: #0c0c0c;
                display: block;
                font-size: 16px;
                font-weight: 700;
                height: 24px;
                line-height: 24px;
                margin: 0 auto 8px
            }

            .c-download-section__text {
                color: #555;
                font-size: 14px;
                font-weight: 400;
                line-height: 24px;
                margin: 0 auto;
                padding: 0;
                text-align: justify;
                text-align-last: right
            }

            .c-download-section__desktop-actions-row,.c-download-section__qr-code,.c-download-section__screen {
                display: none
            }

            .c-download-section__links {
                display: block;
                font-size: 0;
                margin: 0 auto;
                padding-top: 48px
            }

            .c-download-section__links__action {
                background-color: #0c0c0c;
                border-radius: 12px;
                contain: strict;
                display: block;
                height: 48px;
                margin: 0 auto 16px;
                overflow: hidden;
                width: 156px
            }

            .c-download-section__links__action--11 {
                margin-bottom: 0
            }

            .c-download-section__links__img {
                display: block;
                height: auto;
                width: 100%
            }

            .c-download-section__links__img--2 {
                transform: translateY(-56px)
            }

            .c-download-section__links__img--3 {
                transform: translateY(-112px)
            }

            .c-download-section__links__img--4 {
                transform: translateY(-168px)
            }

            .c-download-section__links__img--5 {
                transform: translateY(-398px)
            }

            .c-download-section__links__img--6 {
                transform: translateY(-514px)
            }

            .c-download-section__links__img--7 {
                transform: translateY(-225px)
            }

            .c-download-section__links__img--8 {
                transform: translateY(-455px)
            }

            .c-download-section__links__img--9 {
                transform: translateY(-340px)
            }

            .c-download-section__links__img--10 {
                transform: translateY(-282px)
            }

            @media (width >= 360px) {
                .c-download-section__links {
                    text-align:center;
                    width: 328px
                }

                .c-download-section__links__action {
                    display: inline-block;
                    vertical-align: top
                }

                .c-download-section__links__action--1,.c-download-section__links__action--3,.c-download-section__links__action--5,.c-download-section__links__action--7,.c-download-section__links__action--9 {
                    margin-left: 8px
                }
            }

            @media (width >= 768px) {
                .c-download-section__text {
                    min-height:auto
                }

                .c-download-section__links {
                    width: 740px
                }
            }

            @media (width >= 960px) {
                .c-download-section {
                    contain:strict;
                    max-width: 856px;
                    min-height: 375px;
                    padding: 24px 0
                }

                [data-big-section="true"] .c-download-section {
                    height: 400px;
                    max-width: 1032px;
                    padding: 32px 16px
                }

                .c-download-section__links {
                    display: none
                }

                .c-download-section__title {
                    margin-bottom: 16px
                }

                .c-download-section__screen {
                    display: inline-block;
                    overflow: hidden;
                    position: relative;
                    vertical-align: middle;
                    width: 416px
                }

                .c-download-section__screen::after {
                    content: "";
                    display: block;
                    padding-top: 66.06%
                }

                .c-download-section__screen__img {
                    height: auto;
                    max-width: 100%;
                    position: absolute;
                    right: 0;
                    top: 0
                }

                @supports (aspect-ratio: 445/294) {
                    .c-download-section__screen {
                        position:static
                    }

                    .c-download-section__screen::after {
                        display: none
                    }

                    .c-download-section__screen__img {
                        aspect-ratio: 450/440;
                        margin: 0 auto;
                        position: static;
                    }
                }

                .c-download-section__desktop-left-side {
                    display: inline-block;
                    margin-right: calc(100% - 832px);
                    vertical-align: middle;
                    width: -webkit-fill-available;
                }

                .c-download-section__desktop-actions-row {
                    display: block;
                    margin-top: 16px;
                    position: relative
                }

                .c-download-section__desktop-actions-row::after {
                    background: #bdbdbd;
                    content: "";
                    display: block;
                    height: 50%;
                    position: absolute;
                    right: 164px;
                    top: 25%;
                    width: 1px
                }

                .c-download-section__qr-code {
                    background-color: #fff;
                    border-radius: 16px;
                    display: inline-block;
                    padding: 16px 0;
                    text-align: center;
                    vertical-align: middle;
                    width: 140px
                }

                .c-download-section__qr-code__img {
                    contain: strict;
                    display: block;
                    height: auto;
                    margin: 0 auto;
                    max-width: 107px
                }

                .c-download-section__qr-code__text {
                    color: #757575;
                    display: block;
                    font-size: 13px;
                    font-weight: 500;
                    height: 24px;
                    line-height: 24px;
                    margin-top: 12px
                }

                .c-download-section__desktop-action {
                    background-color: var(--arashapp);
                    border-radius: 12px;
                    color: var(--wp--preset--color--black);
                    display: inline-block;
                    font-size: 14px;
                    font-weight: 700;
                    height: 48px;
                    line-height: 48px;
                    margin-right: 44px;
                    text-align: center;
                    text-decoration: none;
                    vertical-align: middle;
                    width: 230px
                }

                .c-download-section__desktop-action:hover {
                    background-color: #4ca579;
                    box-shadow: 0 1px 2px rgb(0 0 0 / 30%),0 1px 3px 1px rgb(0 0 0 / 15%)
                }

                @supports (display: flex) {
                    .c-download-section {
                        align-items:center;
                        display: flex;
                        justify-content: space-between;
                        width: 100%
                    }

                    .c-download-section__desktop-action,.c-download-section__desktop-actions-row,.c-download-section__qr-code,.c-download-section__screen {
                        vertical-align: initial
                    }

                    .c-download-section__desktop-actions-row {
                        align-items: center;
                        display: flex;
                        justify-content: space-between;
                        width: 100%
                    }
                }
            }

            [data-pwa-installed="true"] .c-download-section {
                display: none!important
            }

            @media print {
                .c-download-section {
                    display: none
                }
            }

            .c-organization-section {
                content-visibility: auto;
                font-size: 0;
                margin: 0 auto;
                padding: 32px 16px 64px;
                width: 100%
            }

            .c-organization-section__mini-title {
                color: #0c0c0c;
                font-size: 14px;
                font-weight: 500;
                line-height: 24px;
                margin-bottom: 4px
            }

            .c-organization-section__title {
                color: #0c0c0c;
                display: block;
                font-size: 16px;
                font-weight: 700;
                line-height: 24px;
                margin: 0 auto 8px
            }

            .c-organization-section__text {
                color: #555;
                font-size: 14px;
                font-weight: 400;
                line-height: 24px;
                margin: 0 auto;
                padding: 0;
                text-align: justify;
                text-align-last: right
            }

            .c-organization-section__media {
                display: block;
                margin: 24px auto;
                max-width: 416px;
                overflow: hidden;
                position: relative;
                text-align: center
            }

            .c-organization-section__media::after {
                content: "";
                display: block;
                padding-top: 56.09%
            }

            .c-organization-section__media__img {
                display: block;
                height: 100%;
                margin: 0 auto;
                max-width: 100%;
                position: absolute;
                right: 0;
                top: 0;
                width: 100%
            }

            @supports (aspect-ratio: 416/328) {
                .c-organization-section__media,.c-organization-section__media__img {
                    aspect-ratio:416/328;
                    position: static
                }

                .c-organization-section__media::after {
                    display: none
                }
            }

            .c-organization-section__action {
                background: #288557;
                border-radius: 12px;
                color: #fff;
                display: block;
                font-size: 14px;
                font-weight: 700;
                height: 48px;
                line-height: 48px;
                margin: 0 auto;
                max-width: 416px;
                text-align: center;
                text-decoration: none;
                width: 100%
            }

            .c-organization-section__action:hover {
                background-color: #4ca579;
                box-shadow: 0 1px 2px rgb(0 0 0 / 30%),0 1px 3px 1px rgb(0 0 0 / 15%)
            }

            .c-organization-section__action--desktop-only {
                display: none
            }

            @media (width >= 960px) {
                .c-organization-section {
                    contain:strict;
                    height: 400px;
                    max-width: 856px;
                    padding: 32px 0
                }

                .c-organization-section__mini-title {
                    font-size: 16px;
                    font-weight: 700;
                    line-height: 24px;
                    margin-bottom: 8px
                }

                .c-organization-section__title {
                    font-size: 20px;
                    font-weight: 700;
                    line-height: 30px;
                    margin-bottom: 16px
                }

                .c-organization-section__texts-group {
                    display: inline-block;
                    vertical-align: middle;
                    width: 416px
                }

                .c-organization-section__action--mobile-only {
                    display: none
                }

                .c-organization-section__action--desktop-only {
                    display: block;
                    margin-top: 24px
                }

                .c-organization-section__media {
                    display: inline-block;
                    margin-right: calc(100% - 832px);
                    transform: translateY(16px);
                    vertical-align: middle;
                    width: 416px
                }
            }

            [data-pwa-installed="true"] .c-organization-section {
                display: none!important
            }

            .c-blog-slider-section,.c-home-blog-section {
                content-visibility: auto
            }

            .c-blog-slider-section {
                display: none;
                height: 440px;
                overflow: hidden;
                width: 100%
            }

            @supports (display: flex) {
                .c-blog-slider-section {
                    display:block
                }
            }

            .c-home-blog-section .c-blog-slider-section,.c-landings-blog-section .c-blog-slider-section {
                margin: 0 auto;
                padding: 0 16px 32px
            }

            @media (width >= 960px) {
                .c-home-blog-section .c-blog-slider-section {
                    height:350px;
                    margin-bottom: 24px;
                    max-width: 856px;
                    padding: 32px 0;
                    width: 100%
                }

                .c-landings-blog-section .c-blog-slider-section {
                    contain: strict;
                    height: 460px;
                    margin-bottom: 24px;
                    max-width: 1032px;
                    padding: 32px 0;
                    width: 100%
                }
            }

            [data-pwa-installed="true"] .c-blog-slider-section {
                display: none!important
            }

            .c-blog-slider-section__items-wrapper {
                display: block;
                height: 100%;
                overflow: hidden;
                position: relative;
                width: 100%
            }

            .c-blog-slider-section__slides {
                display: flex;
                overflow: scroll hidden;
                position: relative;
                scroll-behavior: smooth;
                scroll-snap-type: x mandatory;
                scroll-snap-type: x mandatory;
                scroll-snap-type: x mandatory;
                z-index: 1
            }

            @media (width >= 960px) {
                .c-blog-slider-section__slides {
                    padding-bottom:25px
                }
            }

            .c-blog-slider-section__nav {
                max-width: 416px;
                pointer-events: none;
                position: absolute;
                right: 50%;
                text-align: center;
                transform: translateX(50%);
                width: 100%;
                z-index: 2
            }

            .c-blog-slider-section__nav::before {
                content: "";
                display: block;
                padding-top: calc(62.5% + 40px);
                width: 100%
            }

            .c-landings-blog-section .c-blog-slider-section__nav {
                max-width: 592px
            }

            .c-blog-slider-section__nav__item {
                background-color: #d8d8d8;
                border: none;
                border-radius: 50%;
                display: inline-block;
                height: 10px;
                line-height: 2;
                margin: 0 2px;
                outline: none;
                overflow: hidden;
                padding: 0;
                pointer-events: all;
                white-space: nowrap;
                width: 10px
            }

            .c-blog-slider-section__nav__item--active {
                background-color: #288557
            }

            @media (width >= 960px) {
                .c-blog-slider-section__nav {
                    right:0;
                    transform: translateX(0)
                }

                .c-blog-slider-section__nav::before {
                    padding-top: calc(62.5% + 8px)
                }
            }

            @media print {
                .c-blog-slider-section {
                    display: none
                }
            }

            .c-blog-slide {
                animation-duration: .2s;
                animation-fill-mode: forwards;
                animation-iteration-count: 1;
                animation-name: blog-post-transition;
                display: block;
                font-size: 0;
                height: 100%;
                margin-left: 12px;
                min-width: 100%;
                scroll-snap-align: center;
                transform: scale(0);
                transform-origin: center center;
                width: 100%
            }

            .c-blog-slide:last-child {
                margin-left: 0
            }

            .c-blog-slide__title {
                display: block;
                font-size: 16px;
                font-weight: 700;
                line-height: 24px;
                margin: 0 auto 8px
            }

            .c-blog-slide__title--desktop {
                display: none
            }

            .c-blog-slide__title--mobile {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap
            }

            .c-blog-slide__title__link {
                color: #0c0c0c;
                text-decoration: none
            }

            .c-blog-slide__media-column {
                background-color: #fff;
                border-radius: 24px;
                contain: strict;
                display: block;
                filter: drop-shadow(0 4px 4px rgb(185 184 219 / 16.1%));
                filter: drop-shadow(0 4px 4px rgb(185 184 219 / 16.1%));
                margin: 0 auto;
                max-width: 416px;
                position: relative;
                z-index: 3
            }

            .c-blog-slide__media-column::after {
                content: "";
                display: block;
                padding-top: 62.5%;
                width: 100%
            }

            .c-blog-slide__media-column__img {
                contain: strict;
                display: block;
                height: 100%;
                object-fit: cover;
                object-fit: cover;
                position: absolute;
                right: 0;
                top: 0;
                width: 100%
            }

            @supports (aspect-ratio: 768/480) {
                .c-blog-slide__media-column {
                    aspect-ratio:768/480;
                    position: static
                }

                .c-blog-slide__media-column::after {
                    display: none
                }

                .c-blog-slide__media-column__img {
                    aspect-ratio: 768/480
                }
            }

            .c-blog-slide__text-column {
                margin-top: 32px;
                width: 100%
            }

            .c-blog-slide__description {
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical;
                color: #545454;
                display: block;
                display: -webkit-box;
                font-size: 14px;
                font-weight: 400;
                line-height: 24px;
                overflow: hidden;
                text-align: justify;
                white-space: normal
            }

            .c-blog-slide__description p {
                margin: 0;
                padding: 0
            }

            .c-blog-slide__more-link {
                color: #288557;
                font-size: 14px;
                font-weight: 700;
                height: 48px;
                line-height: 48px;
                text-decoration: none
            }

            .c-blog-slide__more-link::after {
                border: 2px solid #288557;
                border-bottom: none;
                border-left: none;
                content: "";
                display: inline-block;
                height: 6px;
                margin-right: 12px;
                transform: rotate(-135deg);
                vertical-align: middle;
                width: 6px
            }

            @media (width >= 960px) {
                .c-blog-slide__media-column {
                    display:inline-block;
                    max-width: none;
                    vertical-align: middle
                }

                .c-home-blog-section .c-blog-slide__media-column {
                    width: 416px
                }

                .c-landings-blog-section .c-blog-slide__media-column {
                    width: 592px
                }

                .c-blog-slide__text-column {
                    display: inline-block;
                    max-width: none;
                    vertical-align: middle
                }

                .c-home-blog-section .c-blog-slide__text-column {
                    margin-right: calc(100% - 832px);
                    margin-top: 0;
                    width: 416px
                }

                .c-landings-blog-section .c-blog-slide__text-column {
                    margin-right: calc(100% - 1008px);
                    margin-top: 0;
                    width: 416px
                }

                .c-blog-slide__title {
                    display: block;
                    margin: 0 auto 16px
                }

                .c-blog-slide__title--mobile {
                    display: none
                }

                .c-blog-slide__title--desktop {
                    display: block
                }

                .c-blog-slide__title__link {
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    display: -webkit-box;
                    overflow: hidden;
                    white-space: normal
                }

                .c-blog-slide__description {
                    -webkit-line-clamp: 5
                }

                .c-blog-slide__more-link {
                    display: none
                }
            }

            @keyframes blog-post-transition {
                0% {
                    opacity: 0;
                    transform: scale(0)
                }

                100% {
                    opacity: 1;
                    transform: scale(1)
                }
            }

            .c-download-notif {
                background-color: #fff;
                border: 1px solid var(--app);
                bottom: 0;
                contain: strict;
                display: block;
                font-size: 0;
                height: 48px;
                left: 0;
                line-height: 48px;
                opacity: 0;
                padding-left: 48px;
                padding-right: 16px;
                position: fixed;
                right: 0;
                transform: translateY(0);
                transition: all .4s cubic-bezier(.17,.67,.56,1.32);
                width: 100%;
                z-index: 280
            }

            .c-download-notif[data-visible="true"] {
                opacity: 1;
                transform: translateY(-56px)
            }

            .c-download-notif__logo {
                display: none;
                height: 48px;
                margin-left: 12px;
                vertical-align: middle;
                width: 77px
            }

            .c-download-notif__text {
                color: #545454;
                font-size: 13px;
                font-weight: 700;
                margin-left: 16px
            }

            .c-download-notif__action,.c-download-notif__text {
                display: inline-block;
                line-height: 24px;
                vertical-align: middle
            }

            .c-download-notif__action {
                background-color: var(--app);
                border: none;
                border-radius: 8px;
                color: #fff;
                font-size: 12px;
                font-weight: 500;
                height: 24px;
                padding: 0 16px;
                text-align: center;
                text-decoration: none
            }

            .c-download-notif__close-btn {
                background-color: transparent;
                border: none;
                color: #757575;
                display: block;
                font-size: 32px;
                height: 48px;
                left: 0;
                line-height: 52px;
                padding: 0;
                position: absolute;
                text-align: center;
                top: 0;
                width: 48px
            }

            @supports (display: flex) {
                .c-download-notif {
                    align-items:center;
                    display: flex;
                    justify-content: flex-start
                }

                .c-download-notif__action,.c-download-notif__logo,.c-download-notif__text {
                    vertical-align: initial
                }
            }

            @media (width >= 360px) {
                .c-download-notif {
                    padding-right:0
                }

                .c-download-notif__logo {
                    display: inline-block
                }
            }

            @media (width >= 960px) {
                .c-download-notif {
                    display:none
                }
            }

            [data-pwa-installed="true"] .c-download-notif {
                display: none!important
            }

            .c-download-redirect-modal__message {
                color: #555;
                font-size: 13px;
                font-weight: 400;
                line-height: 24px
            }

            .c-download-redirect-modal__action {
                margin-top: 16px
            }

            @media (width >= 960px) {
                .c-download-redirect-modal__message {
                    font-size:12px;
                    font-weight: 500;
                    line-height: 24px
                }

                .c-download-redirect-modal__action {
                    margin-top: 12px
                }

                .c-download-redirect-modal__frame {
                    width: 500px
                }
            }

            .default-footer {
                background-color: #288557;
                content-visibility: auto;
                display: block;
                margin-bottom: 0;
                margin-top: auto;
                padding: 32px 16px
            }




            @media (width <= 960px) {
                .default-footer {
                    display:none!important
                }
            }

            .default-footer__fix-wrapper {
                display: block;
                font-size: 0
            }

            .default-footer__group-title {
                background-color: #288557;
                color: #fff;
                display: block;
                font-size: 14px;
                font-weight: 700;
                line-height: 24px;
                text-overflow: clip;
                white-space: nowrap
            }

            .default-footer__group-title--hidden-mobile {
                display: none
            }

            .default-footer__group-title::before {
                border: 2px solid #fff;
                border-bottom: 0;
                border-left: 0;
                content: "";
                display: block;
                float: left;
                height: 6px;
                margin-left: 4px;
                margin-top: 8px;
                transform: rotate(135deg);
                transform-origin: center;
                transition: transform .1s ease-in-out;
                width: 6px
            }

            .default-footer__links-group--expanded .default-footer__group-title {
                padding-bottom: 4px
            }

            .default-footer__links-group--expanded .default-footer__group-title::before {
                margin-top: 12px;
                transform: rotate(-45deg);
                transition: transform .2s ease-in-out
            }

            .default-footer__links-group {
                height: 24px;
                margin: 0 auto 16px;
                overflow: hidden;
                padding: 0;
                transition: all .1s ease-in-out
            }

            .default-footer__links-group[data-expanded="true"] {
                height: auto;
                transition: all .2s ease-in-out
            }

            .default-footer__links-group__row {
                margin-right: 24px;
                margin-top: 8px;
                text-overflow: clip;
                white-space: nowrap
            }

            .default-footer__links-group__row::marker {
                color: #fff;
                font-size: 12px
            }

            .default-footer__links-group__action {
                color: #fff;
                font-size: 13px;
                font-weight: 400;
                line-height: 24px;
                text-decoration: none
            }

            .default-footer__contact-row {
                color: #fff;
                font-size: 13px;
                font-weight: 400;
                line-height: 24px;
                margin-top: 8px;
                padding-bottom: 4px
            }

            .default-footer__contact-row__label::before {
                background: #fff;
                border-radius: 50%;
                content: "";
                display: inline-block;
                height: 4px;
                margin-left: 4px;
                vertical-align: middle;
                width: 4px
            }

            .default-footer__contact-row__value {
                direction: ltr;
                float: left;
                font-size: 14px;
                font-weight: 400;
                line-height: 24px
            }

            .default-footer__contact-row__value--full {
                direction: rtl;
                float: none
            }

            .default-footer__contact-row__link {
                background-color: #288557;
                color: #fff;
                direction: ltr;
                text-decoration: none
            }

            .default-footer__contact-row::after {
                clear: both;
                content: "";
                display: block
            }

            .default-footer__logos-row {
                margin-top: 24px;
                text-align: center
            }

            .default-footer__social-row {
                display: block;
                margin-bottom: 12px;
                text-align: center
            }

            .default-footer__social-link {
                background-color: #288557;
                border-radius: 8px;
                contain: strict;
                display: inline-block;
                height: 32px;
                line-height: 32px;
                margin: 0 8px;
                text-align: center;
                vertical-align: middle;
                width: 32px
            }

            .default-footer__social-link__icon {
                fill: #fff;
                display: inline-block;
                height: 24px;
                vertical-align: middle;
                width: 24px
            }

            .default-footer__license-item {
                background-color: #288557;
                border-radius: 8px;
                contain: strict;
                display: inline-block;
                height: 65px;
                margin: 0 8px;
                overflow: hidden;
                vertical-align: top;
                width: 50px
            }

            .default-footer__license-item__img {
                display: block;
                height: auto;
                margin: 0 auto;
                max-width: 100%
            }

            .default-footer__copyright-row {
                background-color: #288557;
                color: #fff;
                font-size: 12px;
                font-weight: 300;
                line-height: 24px;
                padding: 16px 0 4px;
                text-align: center
            }

            .default-footer__copyright-row__action {
                color: #fff;
                font-size: 14px;
                font-weight: 700;
                line-height: 24px;
                text-decoration: underline
            }

            @media (width >= 360px) {
                .default-footer__logos-row {
                    text-align:right
                }

                .default-footer__social-row {
                    float: left
                }

                .default-footer__social-link {
                    margin: 0 16px 0 auto
                }

                .default-footer__license-item {
                    margin: 0 auto 0 16px
                }
            }

            @media (width >= 960px) {
                .default-footer {
                    contain:strict;
                    height: 410px;
                    min-height: auto;
                    padding: 24px 16px
                }

                .default-footer__fix-wrapper {
                    margin: 0 auto;
                    max-width: 1032px
                }

                .default-footer__column {
                    display: inline-block;
                    min-width: 25%;
                    vertical-align: top;
                    width: 25%
                }

                .default-footer__group-title {
                    font-size: 16px;
                    font-weight: 700;
                    line-height: 24px;
                    padding-bottom: 4px
                }

                .default-footer__group-title::before {
                    display: none
                }

                .default-footer__group-title--hidden-mobile {
                    display: block
                }

                .default-footer__links-group {
                    height: auto
                }

                .default-footer__links-group--mini-margin {
                    margin-bottom: 8px
                }

                .default-footer__links-group__action {
                    font-size: 14px;
                    font-weight: 400;
                    line-height: 24px;
                    transition: all .2s ease
                }

                .default-footer__links-group__action:hover {
                    color: #ffa800
                }

                .default-footer__links-group--has-desktop-margin {
                    margin-top: 40px
                }

                .default-footer__contact-row {
                    padding-bottom: 0
                }

                .default-footer__contact-row__label--hidden-desktop {
                    display: none
                }

                .default-footer__contact-row__value {
                    float: none;
                    font-size: 13px;
                    font-weight: 400;
                    line-height: 24px
                }

                .default-footer__contact-row__value--block-desktop {
                    display: block;
                    margin-top: 12px;
                    text-align: right
                }

                .default-footer__contact-row__link {
                    display: inline-block;
                    transition: all .2s ease
                }

                .default-footer__contact-row__link:hover {
                    color: #ffa800
                }

                .default-footer__contact-row::after {
                    display: none
                }

                .default-footer__logos-row {
                    margin-top: 16px;
                    text-align: right
                }

                .default-footer__social-row {
                    float: none;
                    margin-bottom: 8px;
                    text-align: right
                }

                .default-footer__license-item,.default-footer__social-link {
                    margin: 0 auto 0 8px;
                    transition: all .2s ease
                }

                .default-footer__license-item:hover,.default-footer__social-link:hover {
                    background-color: #2d8659
                }

                .default-footer__copyright-row {
                    font-size: 14px;
                    font-weight: 300;
                    line-height: 24px;
                    padding: 4px 0 8px
                }
            }

            @media print {
                .default-footer {
                    display: none
                }
            }

.data2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-block-end: 20px;
    place-items: stretch;
    place-content: center;
    text-align-last: center;
}

@media (width <= 768px) {
    .data2 {
        grid-template-columns: repeat(1, 1fr);
        text-align: center;
    }
}

.menu-label {
    text-transform: uppercase;
    white-space: nowrap;
    font-weight: 600;
    font-size: 13px;
    line-height: 22px;
    border-radius: 10px  20px  25px;
    position: sticky;
    margin: -3% 0 0;
    left: 90%;
    display: inline-block !important;
    padding: 2px 10px !important;
    color: rgb(255 255 255) !important;
    vertical-align: middle !important;
    background-color: var(--zmapp);
    min-width: 100px;
    z-index: 100;
    text-align-last: center;
}

.bdes {
    text-align: end; text-decoration: line-through; font-size: 14px; font-family: auto; color: gray;
}

.zsubx {
        border: 1px solid transparent;
        transition: border-color 0.3s;
        margin-bottom: 13px;
        background: #ffffffb5;
        border-radius: 10px;
        padding: 7px 10px;
        position: relative;
        margin: 5% 0;
    }

.zsubx:hover {
        border-color: #ffe773; /* تغییر رنگ کادر به زرد هنگام رفتن موس */
    }

    /* کادر زرد برای گزینه انتخاب‌شده */
.zsubx.selected {
        border-color: #ffe773;
    }

.subscription-products {
            border: 1px solid #cbcbcb;
            padding: 20px;
            margin: 0 auto;
            background-color: #efefef94;
            border-radius: 10px;
            width: 100%;
        }

.subscription-products h3 {
            text-align: center;
            margin-bottom: 20px;
        }

.subscription-products input[type="submit"] {
            width: 100%;
            background-color: var(--app);
            color: black;
            border: none;
            padding: 15px;
            cursor: pointer;
            text-align-last: center;
            font-weight: bold;
        }

.subscription-products input[type="submit"]:hover {
            background-color: #005177;
        }


select.pricesellfiltering {
	min-width: 135px;}

.infox {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    background: aliceblue;
    padding: 10px;
    border-radius: 10px 10px  0 0;
}

.filekonloginbtn {
            position: relative;
            display: inline-block;
            padding: 2px 40px;
            background: var(--zmapp);
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            outline: none;
            box-shadow: 0 0 0 rgb(24 94 65);
            animation: alarm-pulse 2s infinite;
        }

        @keyframes alarm-pulse {
            0% {
                box-shadow: 0 0 0 0 rgb(26 49 55);
            }

            70% {
                box-shadow: 0 0 0 20px rgb(255 61 0 / 0%);
            }

            100% {
                box-shadow: 0 0 0 0 rgb(255 61 0 / 0%);
            }
        }




.zhello {
    width: -webkit-fill-available;
    padding: 0 15%;
    display: flex;
    flex-direction: column;
    row-gap: 15px;
    text-align-last: center;
    font-size: 18px;
}

@media (width <= 768px) {
    .zhello {
    width: -webkit-fill-available;
    padding: 30px;
    }
}

#notes-list {
    padding: 0;
}

div#registration-form {
    width: 100%;
}


.zuserform {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 50%;
    min-height: 55%;
    background: rgb(231 231 231 / 46%);
    box-shadow: 0 4px 30px rgb(0 0 0 / 41%);
    backdrop-filter: blur(10px);
    border: 1px solid rgb(255 255 255 / 21%);
    border-radius: 20px;
}

@media (width <= 768px) {
    .zuserform {
    width: 95%;
    }
}

.mce-i-custom_h3_button { background: #4CAF50; color: white; font-size: 16px; }

#custom-login-form {
    width: 90%;
}

input[type="text"] {
    margin: 0;
}

#mobile, #login_mobile , #login_password {
    text-align: -webkit-center;
    letter-spacing: 6px;
    font-size: 16px;
    font-weight: bold;
}


#verification-code, #verification-sms {
    display: flex;
    justify-content: center;
    gap: 10px; /* فاصله بین مربعات */
    flex-direction: row-reverse;
    font-family: auto;
}

.userlr {
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center;     /* Center vertically */
    height: 100vh;           /* Full viewport height */
    width: 100%;             /* Full width */
    position: relative;      /* Ensure it respects parent dimensions */
}

.zlogreg {position: fixed;height: 100vh;width: 100%;background: linear-gradient(rgb(0 0 0 / 6%), rgb(255 255 255 / 14%)), url("https://zm1.ir/ex/wp-content/themes/arash/app/cdn/bg.jpg");background-size: cover;background-position: center;animation: animatedBackground 80s ease-in-out infinite alternate;}

@keyframes animatedBackground {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 100% 100%;
    }
}


#custom-login-form {
    width: 100%;
}

input[type="text"] {
    margin: 0;
}

#mobile, #login_mobile , #login_password {
    text-align: -webkit-center;
    font-size: 16px;
    font-weight: bold;
}


#verification-code, #verification-sms {
    display: flex;
    justify-content: center;
    gap: 10px; /* فاصله بین مربعات */
    flex-direction: row-reverse;
    font-family: auto;
}

.code-input {
    width: 50px;
    height: 50px;
    font-size: 24px;
    border: 2px solid #ccc;
    border-radius: 5px;
    outline: none;
    justify-items: center;
}

.code-input:focus {
    border-color: #007bff;
}

.code-input.error {
    border-color: red;
}

#verify-code {
    margin-left: 20px;
}




.zbutton {
    background: aliceblue;
    color: black;
    display: flex;
    font-size: 12px;
    padding: 12px;
    border-radius: 10px;
    justify-content: center;
    gap: 5px;
    margin: 0;
}


/* Styles for comments section */
.comments-area {
    max-height: 500px;
    overflow-x: auto;
    margin-block-end: 3rem;
    border-radius: 10px;
    background: white;
    scrollbar-width: thin;
    scrollbar-color: var(--arashapp) transparent;
}

.commentform {
    margin: 0 auto;
    position: relative;
    margin-bottom: 20px;
}

.comment-list {
    list-style: none;
    padding: 0;
}

label, #reply-title , .logged-in-as {
    display: none;
}

.comment {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 0.75rem 2rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
}




.comment-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 1rem 0;
    justify-content: space-between;
    font-size: 13px;
}

.comment-author {
    font-weight: 700;
    color: #2d3436;
}

.comment-date {
    color: #636e72;
    font-size: 0.9em;
}

.comment-content {
    color: #2d3436;
    line-height: 1.6;
    margin-bottom: 0.5rem;
    background: white;
    border-radius: 10px;
    padding: 1px 10px;
    font-size: 14px;
}

.comment-actions {
    display: flex;
    gap: 20px;
    color: #636e72;
    font-size: 0.9em;
}

.comment-action {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: color 0.3s;
}

.comment-action:hover {
    color: #0984e3;
}

/* پاسخ‌ها */
.reply-form-container {
    display: none;
    margin-top: 15px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
}

.ajax-reply-form textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-bottom: 10px;
    resize: vertical;
    min-height: 80px;
}

.ajax-reply-form button {
    background: var(--app);
    color: black;
    border: none;
    padding: 8px 20px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.3s;
}

.ajax-reply-form button:hover {
    background: #0873c4;
}

.children {
    margin-right: 3px;
    border-right: 2px solid #eee;
    padding-right: 15px;
    margin-top: 15px;
}

    .live-button {
      display: inline-flex;
      align-items: center;
      background-color: var(--appfont);
      color: white;
      font-weight: bold;
      font-size: 10px;
      border: none;
      border-radius: 10px;
      padding: 4px 14px;
      position: absolute;
      top: 9px;
      left: 7px;
      z-index: 1111;
      justify-content: space-between;
      column-gap: 6px;
    }

    .live-dot {
      width: 10px;
      height: 10px;
      background-color: white;
      border-radius: 50%;
      margin-left: 0;
      animation: blink 1s infinite;
    }

    @keyframes blink {
      0%, 100% { opacity: 1; }
      50% { opacity: 0; }
    }

.postertitel {
    position: absolute;
    top: 55%;
    right: -20px;
    z-index: 2;
    background: var(--appfont);
    color: white;
    padding: 10px;
    border-radius: 10px 0;
    box-shadow: rgb(0 0 0 / 72%) 0 2px 4px 0, rgb(0 0 0 / 36%) 0 2px 2px 0, rgb(0 0 0 / 14%) 0 0 2px 0;
    
}    





/* ______________________________پلیر___________________________________ */
 
 :root {
    --zmapp: linear-gradient(90deg, rgb(2 0 36 / 100%) 0%, rgb(0 93 56) 35%, rgb(0 82 99) 100%);
}


@keyframes ai-spin {
    0% {
        transform: rotate(0deg);
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@keyframes ai-spin {
    0% {
        transform: rotate(0deg);
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@keyframes backgroundPosition {
    0% {
        background-position: -140px 0
    }

    100% {
        background-position: 140px 0
    }
}

@keyframes backgroundPosition {
    0% {
        background-position: -140px 0
    }

    100% {
        background-position: 140px 0
    }
}

.ai-wrap {
    padding: 20px;
    background-color: #202020;
    color: #fff;
    max-width: 100%;
    box-sizing: border-box;
    box-sizing: border-box;
    margin-bottom: 20px
}

.ai-wrap::after,.ai-wrap::before {
    box-sizing: border-box;
    box-sizing: border-box
}

.ai-wrap * {
    box-sizing: border-box;
    box-sizing: border-box
}

.ai-wrap *::after,.ai-wrap *::before {
    box-sizing: border-box;
    box-sizing: border-box
}

.ai-wrap img {
    max-width: 100%;
    height: auto;
    border: 0;
    box-shadow: none;
    box-shadow: none;
    margin: 0;
    padding: 0
}

.ai-wrap p {
    margin: 0;
    padding: 0 10px;
    font-weight: normal;
    line-height: normal
}

.ai-wrap span {
    margin: 0;
    padding: 0;
    font-weight: normal;
    line-height: normal
}

.ai-wrap a {
    font-weight: normal;
    box-shadow: none;
    box-shadow: none;
    border: 0;
    text-decoration: none;
    text-transform: none
}

.ai-wrap svg {
    display: inline-block
}

.ai-wrap .ai-btn,.ai-wrap .ai-audio-control {
    display: inline-block;
    font-weight: normal;
    margin: 0;
    padding: 0;
    line-height: normal;
    border: 0;
    appearance: none;
    appearance: none;
    appearance: none;
    text-align: center;
    box-shadow: none;
    box-shadow: none;
    vertical-align: middle;
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
    user-select: none;
    user-select: none;
    user-select: none;
    border-radius: 0;
    min-width: 0;
    max-width: 100%;
    min-height: 0;
    width: auto;
    height: auto;
    background-image: none;
    background-color: rgb(0 0 0 / 0%)
}

.ai-wrap .ai-btn::before,.ai-wrap .ai-btn::after,.ai-wrap .ai-audio-control::before,.ai-wrap .ai-audio-control::after {
    display: none
}

.ai-wrap .ai-control-wrap {
    display: -webkit-box;
    display: flexbox;
    display: flex;
    min-height: 130px
}

.ai-wrap .ai-control-wrap-thumb {
    width: 345px;
    height: 100%;
    -webkit-box-flex: 0;
    flex: none;
    flex: none;
    overflow: hidden;
    margin: 10px 0 0 10px;
    position: relative;
    line-height: 0;
    border-radius: 10px;
}

.ai-wrap .ai-control-wrap-thumb::after {
    inset: 0;
    transition: opacity 1.5s ease;
    transition: opacity 1.5s ease;
    content: "";
    width: 300%;
    height: 100%;
    background: -webkit-gradient(linear, left top, right top, color-stop(8%, #3e3e3e), color-stop(18%, #4d4d4d), color-stop(33%, #3e3e3e));
    background: linear-gradient(to right, #3e3e3e 8%, #4d4d4d 18%, #3e3e3e 33%);
    background-size: 500px;
    position: absolute;
    animation-duration: 1s;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    animation-name: backgroundPosition;
    animation-name: backgroundPosition;
    animation-timing-function: linear;
    animation-timing-function: linear;
    opacity: 0
}

.ai-wrap .ai-control-wrap-thumb img {
    margin: 0;
    border: 0;
    box-shadow: none;
    box-shadow: none;
    width: -webkit-fill-available;
}

.ai-wrap .ai-control-wrap-controls {
    position: relative;
    width: 100%;
    padding: 0 10px;
}

.ai-wrap .ai-audio-controls-main {
    display: -webkit-box;
    display: flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    margin-bottom: 16px
}

.ai-wrap .ai-audio-control {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    -webkit-box-flex: 0;
    flex: none;
    flex: none;
    vertical-align: middle !important;!i;!;
    color: #fff;
    background-color: var(--arashapp);
    opacity: 1;
    transition: opacity 1.5s ease;
    transition: opacity 1.5s ease;
    padding: 0;
    position: relative;
    align-items: center;
    justify-content: center;
}

.ai-wrap .ai-audio-control:hover,.ai-wrap .ai-audio-control:focus {
    border: 0;
    background-color: black;
}

.ai-wrap .ai-audio-control:focus,.ai-wrap .ai-audio-control:active {
    outline: 0
}

.ai-wrap .ai-audio-control.ai-audio-playing svg {
    left: 0
}

.ai-wrap .ai-audio-control svg {
    fill: #fff;
    height: 16px;
    position: relative;
    left: 2px;
    top: 1px
}

.ai-wrap .ai-track-info {
    display: -webkit-box;
    display: flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    padding-left: 20px;
    -webkit-box-flex: 1;
    flex: auto;
    flex: auto;
    width: 0;
    align-items: flex-start;
    justify-content: center;
}

.ai-wrap .ai-track-title {
    /* margin:0 0 4px; */
    line-height: normal;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 10px;
}

.ai-wrap .ai-track-title span {
    opacity: 1;
    transition: opacity 1.5s ease;
    transition: opacity 1.5s ease;
    letter-spacing: 0 !important;
    font-size: 90%;
}

.ai-wrap .ai-track-subtitle {
    margin: 0;
    line-height: normal;
    opacity: .7;
    font-size: .8125em
}

.ai-wrap .ai-track-subtitle span {
    opacity: 1;
    transition: opacity 1.5s ease;
    transition: opacity 1.5s ease;
    letter-spacing: 0 !important;
    font-size: 95%;
}

.ai-wrap .ai-audio-controls-progress {
    display: -webkit-box;
    display: flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 15px;
    justify-content: space-between;
    en; */}

.ai-wrap .ai-track-progress-bar {
    display: block;
    -webkit-box-flex: 1;
    flex: 1;
    flex: 1;
    position: relative;
    height: 5px;
    cursor: pointer;
    background-color: #3e3e3e;
}

.ai-wrap .ai-track .ai-track-progress-bar {
    position: absolute;
    top: auto;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: rgb(0 0 0 / 0%)
}

.ai-wrap .ai-track .ai-track-progress-bar:hover {
    background-color: rgb(255 255 255 / 30%)
}

.ai-wrap .ai-track-progress {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    pointer-events: none;
    background-color: var(--arashapp);
    transition: width .28s ease;
    transition: width .28s ease;
    border-radius: 5px;
}

.ai-wrap .ai-track .ai-track-progress {
    background-color: #fff;
    opacity: .5
}

.ai-wrap .ai-track-time {
    -webkit-box-flex: 0;
    flex: none;
    flex: none;
    font-size: 13px;
    opacity: .7;
    text-align: right;
    cursor: pointer;
    margin-right: 5px;
}

.ai-wrap .ai-audio-volume-control {
    display: -webkit-box;
    display: flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.ai-wrap .ai-audio-volume-bars {
    float: left;
    margin-right: 3px;
    height: 34px
}

.ai-wrap .ai-audio-volume-bars::after {
    content: "";
    display: table;
    clear: both
}

.ai-wrap .ai-volume-bar {
    float: left;
    position: relative;
    width: 4px;
    height: 100%;
    background-color: #3e3e3e;
    cursor: pointer;
    border-right: 1px solid #202020
}

.ai-wrap .ai-volume-bar::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    transition: background-color .18s ease;
    transition: background-color .18s ease
}

.ai-wrap .ai-volume-bar.ai-volume-bar-active::before {
    background-color: var(--app);
}

.ai-wrap .ai-volume-bar:nth-child(1)::before {
    height: 0%
}

.ai-wrap .ai-volume-bar:nth-child(2)::before {
    height: 10%
}

.ai-wrap .ai-volume-bar:nth-child(3)::before {
    height: 20%
}

.ai-wrap .ai-volume-bar:nth-child(4)::before {
    height: 30%
}

.ai-wrap .ai-volume-bar:nth-child(5)::before {
    height: 40%
}

.ai-wrap .ai-volume-bar:nth-child(6)::before {
    height: 50%
}

.ai-wrap .ai-volume-bar:nth-child(7)::before {
    height: 60%
}

.ai-wrap .ai-volume-bar:nth-child(8)::before {
    height: 70%
}

.ai-wrap .ai-volume-bar:nth-child(9)::before {
    height: 80%
}

.ai-wrap .ai-volume-bar:nth-child(10)::before {
    height: 90%
}

.ai-wrap .ai-volume-bar:nth-child(11)::before {
    height: 100%
}

.ai-wrap .ai-audio-volume-control-btns {
    display: -webkit-box;
    display: flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    flex-direction: column;
    height: 100%
}

.ai-wrap .ai-audio-volume-control-btns .ai-btn {
    height: 50%;
    font-size: 10px
}

.ai-wrap .ai-audio-volume-control-btns .ai-btn:first-child {
    margin-bottom: 1px
}

.ai-wrap .ai-audio-volume-control-btns .ai-btn:last-child {
    margin-top: 1px
}

.ai-wrap .ai-audio-volume-control-btns .ai-btn svg {
    height: 6px
}

.ai-wrap .ai-audio-controls-meta {
    display: -webkit-box;
    display: flexbox;
    display: flex;
    width: 100%;
    opacity: 1;
    transition: opacity .36s ease;
    transition: opacity .36s ease
}

.ai-wrap .ai-audio-controls-meta::after {
    content: "";
    display: table;
    clear: both
}

.ai-wrap .ai-audio-controls-meta .ai-btn {
    margin-right: 4px;
}

.ai-wrap .ai-btn {
    width: 32px;
    border-radius: 5px;
    height: 34px;
    font-size: 14px;
    padding: 0;
    background-image: none;
    background-color: #3e3e3e;
    color: #fff;
    transition: color .18s ease;
    transition: color .18s ease;
    box-shadow: none;
    box-shadow: none;
    text-decoration: none;
    font-style: normal;
    text-transform: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ai-wrap .ai-btn svg {
    position: relative;
    fill: #fff;
    height: 10px;
    transition: fill .18s ease;
    transition: fill .18s ease
}

.ai-wrap .ai-btn:hover {
    background-color: #3e3e3e;
    border: 0
}

.ai-wrap .ai-btn.ai-btn-active {
    color: #fff;
    background-color: var(--arashapp);
}

.ai-wrap .ai-btn.ai-btn-active svg {
    fill: #fff
}

.ai-wrap .ai-btn-repeat svg {
    height: 17px;
    top: 2px
}

.ai-wrap .ai-btn-shuffle svg {
    height: 14px;
    top: 2px;
    left: -1px
}

.ai-wrap .ai-tracklist-toggle {
    margin-left: auto;
    margin-right: 0
}

.ai-wrap .ai-tracklist-toggle svg {
    height: 16px;
    top: 2px
}

.ai-wrap .ai-btn-skip-position,.ai-wrap .ai-btn-playback-rate {
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: -0.05em
}

.ai-wrap .ai-tracklist-wrap {
    opacity: 1;
    transition: opacity 1.5s ease;
    transition: opacity 1.5s ease
}

.ai-wrap .ai-tracklist-open {
    margin-top: 20px
}

.ai-wrap .ai-tracklist-open+.ai-footer {
    margin-top: -1px;
    border-top: 0
}

.ai-wrap .ai-tracklist {
    margin: 0;
    padding: 0;
    list-style: none
}

.ai-wrap .ai-track {
    display: -webkit-box;
    display: flexbox;
    display: flex;
    position: relative;
    margin: 0 0 8px;
    padding: 0;
    list-style: none;
    height: 50px;
    cursor: pointer;
    background-color: #3e3e3e;
    transition: background-color .18s ease;
    transition: background-color .18s ease;
    border-radius: 10px;
}

.ai-wrap .ai-track:hover,.ai-wrap .ai-track.ai-track-active {
    background-color: var(--arashapp);
    color: black;
    border-radius: 10px;
}

.ai-wrap .ai-track:hover .ai-track-btn,.ai-wrap .ai-track.ai-track-active .ai-track-btn {
    color: #fff
}

.ai-wrap .ai-track:hover .ai-track-btn svg,.ai-wrap .ai-track.ai-track-active .ai-track-btn svg {
    fill: #fff
}

.ai-wrap .ai-track-control {
    display: -webkit-box;
    display: flexbox;
    display: flex;
    height: 100%;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-flex: 1;
    flex: 1;
    flex: 1;
    overflow: hidden;
    border-left: 1px solid #202020;
    margin: 0;
}

.ai-wrap .ai-track-control:first-child {
    border-left: 0
}

.ai-wrap .ai-track-thumb {
    display: flex;
    width: 40px;
    max-height: 100%;
    overflow: hidden;
    border-radius: 10px;
    align-items: center;
    justify-content: center;
    margin: 0 6px;
}

.ai-wrap .ai-track-thumb img {
    width: 40px;
    max-height: 100%;
    box-shadow: none;
    box-shadow: none;
    border: 0;
    margin: 0;
    filter: opacity(0.7);
}

.ai-wrap .ai-track-no-thumb {
    display: flex;
    width: 130px;
    height: 130px;
    line-height: 150px;
    text-align: center;
    background-color: #3e3e3ea3;
    align-items: center;
    justify-content: center;
}

.ai-wrap .ai-track-no-thumb svg {
    fill: var(--arashapp);
    height: 40px;
    opacity: .6
}

.ai-wrap .ai-track-no-thumb.ai-track-thumb {
    width: 50px;
    height: 50px;
    line-height: 56px;
}

.ai-wrap .ai-track-no-thumb.ai-track-thumb svg {
    height: 16px
}

.ai-wrap .ai-track-name {
    display: inline-block;
    padding: 0 10px;
    font-size: 12px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: normal;
    font-weight: bold;
}

.ai-wrap .ai-track-control-buttons {
    margin-left: auto;
    display: -webkit-box;
    display: flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.ai-wrap .ai-track-btn {
    display: flex;
    width: 40px;
    height: 40px;
    text-align: center;
    font-size: 13px;
    line-height: 40px;
    box-shadow: none;
    box-shadow: none;
    border: 0;
    border-left: 1px solid #202020;
    color: #fff;
    background: none;
    cursor: pointer;
    margin: 0;
    padding: 0;
    align-items: center;
    justify-content: center;
}

.ai-wrap .ai-track-btn svg {
    position: relative;
    fill: #fff;
    height: 15px;
    transition: fill .18s ease;
    transition: fill .18s ease;
    top: 3px
}

.ai-wrap .ai-track-btn-repeat:hover span {
    opacity: 1 !important
}

.ai-wrap .ai-track-inline-play-btn {
    position: relative
}

.ai-wrap .ai-track-inline-play-btn:first-child {
    border-left: 0
}

.ai-wrap .ai-track-inline-play-btn.ai-is-loading svg {
    opacity: 0
}

.ai-wrap .ai-player-buttons {
    display: -webkit-box;
    display: flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    flex-wrap: wrap;
    flex-wrap: wrap;
    line-height: normal;
    grid-gap: 10px;
    margin-top: 20px
}

.ai-wrap .ai-player-button {
    display: -webkit-box;
    display: flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    grid-gap: 6px;
    font-size: 13px;
    color: currentcolor;
    width: auto;
    padding-left: 15px;
    padding-right: 15px
}

.ai-wrap .ai-player-button-icon-only {
    padding: 0;
    width: 32px
}

.ai-wrap .ai-player-button-icon {
    width: 18px;
    height: 18px;
    display: block
}

.ai-wrap .ai-player-button-icon svg {
    width: 100%;
    height: 100%;
    fill: currentcolor
}

.ai-wrap .ai-player-button-icon svg rect,.ai-wrap .ai-player-button-icon svg path {
    fill: currentcolor
}

.ai-wrap .ai-footer {
    border-top: 1px solid #3e3e3e;
    margin-top: 20px;
    padding-top: 20px;
    text-align: center;
    font-size: 11px
}

.ai-wrap .ai-footer a {
    color: #f70f5d;
    text-decoration: none;
    box-shadow: none;
    box-shadow: none;
    border: 0;
    opacity: 1
}

.ai-wrap .ai-footer a:hover {
    color: #f70f5d;
    border: 0;
    opacity: 1
}

.ai-wrap .ai-footer p {
    opacity: .7;
    margin: 0;
    font-size: 12px
}

.ai-wrap.ai-is-loading .ai-track-title {
    position: relative
}

.ai-wrap.ai-is-loading .ai-track-title span {
    opacity: 0
}

.ai-wrap.ai-is-loading .ai-track-title::after {
    content: "";
    width: 140px;
    height: 8px;
    background: -webkit-gradient(linear, left top, right top, color-stop(8%, #3e3e3e), color-stop(18%, #4d4d4d), color-stop(33%, #3e3e3e));
    background: linear-gradient(to right, #3e3e3e 8%, #4d4d4d 18%, #3e3e3e 33%);
    background-size: 500px;
    position: absolute;
    top: -10px;
    left: 0;
    opacity: 1;
    animation-duration: 1s;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    animation-name: backgroundPosition;
    animation-name: backgroundPosition;
    animation-timing-function: linear;
    animation-timing-function: linear
}

.ai-wrap.ai-is-loading .ai-track-subtitle {
    position: relative
}

.ai-wrap.ai-is-loading .ai-track-subtitle span {
    opacity: 0
}

.ai-wrap.ai-is-loading .ai-track-subtitle::after {
    content: "";
    width: 100px;
    height: 6px;
    background: -webkit-gradient(linear, left top, right top, color-stop(8%, #3e3e3e), color-stop(18%, #4d4d4d), color-stop(33%, #3e3e3e));
    background: linear-gradient(to right, #3e3e3e 8%, #4d4d4d 18%, #3e3e3e 33%);
    background-size: 500px;
    position: absolute;
    top: 2px;
    left: 0;
    opacity: 1;
    animation-duration: 1s;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    animation-name: backgroundPosition;
    animation-name: backgroundPosition;
    animation-timing-function: linear;
    animation-timing-function: linear
}

.ai-wrap.ai-is-loading .ai-audio-controls-meta {
    opacity: 0
}

.ai-wrap.ai-is-loading .ai-audio-control {
    opacity: .5
}

.ai-wrap.ai-is-loading .ai-control-wrap-thumb::after {
    opacity: 1
}

.ai-wrap.ai-is-loading .ai-tracklist-wrap {
    opacity: 1
}

.ai-wrap .ai-tracklist-enter {
    opacity: 0
}

.ai-wrap .ai-tracklist-enter.ai-tracklist-enter-active {
    opacity: 1;
    transition: opacity .5s ease-in;
    transition: opacity .5s ease-in
}

.ai-wrap .ai-scroll-wrap .ai-tracklist {
    margin-right: 20px;
}

.ai-wrap .ai-scroll-wrap>div:last-child {
    top: 0 !important;
    bottom: 0 !important;
    background-color: rgb(206 181 103 / 15%);
}

.ai-wrap .ai-scroll-wrap>div:last-child div {
    background-color: var(--app) !important;
}

.ai-wrap.ai-type-global-footer {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0;
    margin: 0;
    z-index: 999
}

.ai-wrap.ai-type-global-footer .ai-control-wrap {
    min-height: 70px
}

.ai-wrap.ai-type-global-footer .ai-control-wrap-thumb {
    width: 80px;
    height: 80px;
    margin: 0;
    line-height: 115px
}

.ai-wrap.ai-type-global-footer .ai-control-wrap-controls {
    display: -webkit-box;
    display: flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    flex-direction: column
}

.ai-wrap.ai-type-global-footer .ai-audio-controls-main {
    padding: 0 25px;
    margin: 0;
    -webkit-box-flex: 1;
    flex: auto;
    flex: auto
}

.ai-wrap.ai-type-global-footer .ai-audio-controls-meta {
    width: auto;
    margin-left: 20px;
    -webkit-box-flex: 0;
    flex: none;
    flex: none
}

.ai-wrap.ai-type-global-footer .ai-audio-controls-meta-right {
    margin-left: auto
}

.ai-wrap.ai-type-global-footer .ai-track-progress-bar {
    -webkit-box-flex: initial;
    flex: initial;
    flex: initial
}

.ai-wrap.ai-type-global-footer .ai-tracklist-toggle {
    margin-left: 15px
}

.ai-wrap.ai-type-global-footer .ai-audio-controls-progress {
    margin-bottom: 0
}

.ai-wrap.ai-type-global-footer .ai-tracklist-wrap {
    position: absolute;
    bottom: 100%;
    width: 100%;
    padding: 20px;
    background-color: inherit;
    margin: 0
}

.ai-control-spinner {
    border-radius: 50%;
    position: absolute;
    top: -5px;
    left: -5px;
    width: calc(100% + 10px);
    height: calc(100% + 10px);
    font-size: 10px;
    text-indent: -9999em;
    border-top: 5px solid rgb(255 255 255 / 20%);
    border-right: 5px solid rgb(255 255 255 / 20%);
    border-bottom: 5px solid rgb(255 255 255 / 20%);
    border-left: 5px solid currentcolor;
    transform: translateZ(0);
    transform: translateZ(0);
    animation: ai-spin 1.1s infinite linear;
    animation: ai-spin 1.1s infinite linear;
    z-index: 1;
    opacity: 0;
    transition: opacity .18s ease;
    transition: opacity .18s ease;
    transition-delay: .2s;
    transition-delay: .2s
}

.ai-audio-loading .ai-control-spinner {
    opacity: .8
}

.ai-control-spinner::after {
    border-radius: 50%;
    position: absolute;
    width: 100%;
    height: 100%
}

.ai-track-spinner {
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -10px !important;
    margin-top: -10px !important;
    width: 20px;
    height: 20px;
    font-size: 10px;
    text-indent: -9999em;
    border-top: 3px solid rgb(255 255 255 / 20%);
    border-right: 3px solid rgb(255 255 255 / 20%);
    border-bottom: 3px solid rgb(255 255 255 / 20%);
    border-left: 3px solid currentcolor;
    transform: translateZ(0);
    transform: translateZ(0);
    animation: ai-spin 1.1s infinite linear;
    animation: ai-spin 1.1s infinite linear;
    z-index: 1;
    opacity: 0
}

.ai-track-loading .ai-track-spinner {
    opacity: .8
}

.ai-track-spinner::after {
    border-radius: 50%;
    position: absolute;
    width: 100%;
    height: 100%
}

.ReactModal__Body--open {
    overflow: hidden
}

.ai-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background-color: rgb(0 0 0 / 30%)
}

.ai-modal {
    position: absolute;
    top: 15%;
    width: 460px;
    max-width: calc(100% - 30px);
    left: 50%;
    transform: translateX(-50%);
    transform: translateX(-50%);
    background-color: #fff;
    color: #000;
    border-radius: 10px;
    border: 1px solid rgb(62 62 62 / 40%);
    outline: 0;
    max-height: calc(100vh - 50px);
    overflow-y: auto;
    box-sizing: border-box;
    box-sizing: border-box
}

.ai-modal-header {
    display: -webkit-box;
    display: flexbox;
    display: flex;
    padding: 5px;
    margin-bottom: 10px
}

.ai-modal-dismiss {
    display: inline-block;
    font-weight: normal;
    margin: 0;
    padding: 0;
    border: 0;
    appearance: none;
    appearance: none;
    appearance: none;
    text-align: center;
    box-shadow: none;
    box-shadow: none;
    vertical-align: middle;
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
    user-select: none;
    user-select: none;
    user-select: none;
    border-radius: 0;
    min-width: 0;
    max-width: 100%;
    min-height: 0;
    width: auto;
    height: auto;
    background-image: none;
    background-color: rgb(0 0 0 / 0%);
    font-size: 30px;
    margin-left: auto;
    padding-left: 5px;
    padding-right: 5px;
    line-height: 1;
    color: #000
}

.ai-modal-dismiss::before,.ai-modal-dismiss::after {
    display: none
}

.ai-modal-dismiss:hover,.ai-modal-dismiss:active,.ai-modal-dismiss:focus {
    background: none;
    box-shadow: none;
    box-shadow: none;
    border: 0;
    color: #000
}

.ai-modal-content {
    padding: 0 20px 20px;
    white-space: pre-wrap
}

.ai-with-typography {
    font-family: sans-serif;
    font-weight: normal;
    line-height: normal;
    letter-spacing: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    border-radius: 10px;
}

.ai-with-typography .ai-track-subtitle {
    font-size: 13px
}

.ai-with-typography .ai-track-title {
    font-size: 16px;
}

.ai-modal-with-typography {
    font-family: sans-serif;
    font-weight: normal;
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.45;
    letter-spacing: 0
}

.ai-narrow .ai-control-wrap {
    height: auto;
    flex-wrap: wrap;
    flex-wrap: wrap
}

.ai-narrow .ai-control-wrap-thumb {
    width: 100%;
    margin: 0 0 20px
}

.ai-narrow .ai-audio-controls-meta {
    position: relative
}

.ai-narrow .ai-track-thumb {
    display: none
}

@media(width <= 767px) {
    .ai-wrap.ai-type-global-footer .ai-track-time,.ai-wrap.ai-type-global-footer .ai-thumb,.ai-wrap.ai-type-global-footer .ai-btn-repeat,.ai-wrap.ai-type-global-footer .ai-audio-volume-control,.ai-wrap.ai-type-global-footer .ai-btn-skip-position {
        display:none
    }

    .ai-wrap.ai-type-global-footer .ai-track-title {
        font-size: 15px
    }

    .ai-wrap.ai-type-global-footer .ai-audio-controls-main {
        padding-left: 10px;
        padding-right: 10px
    }

    .ai-wrap.ai-type-global-footer .ai-track-info {
        padding-left: 10px
    }

    .ai-wrap.ai-type-global-footer .ai-audio-controls-meta {
        margin-left: 10px
    }

    .ai-wrap .ai-audio-volume-control .ai-btn {
        display: none
    }
}

@media(width <= 480px) {
    .ai-wrap .ai-control-wrap {
        height:auto;
        flex-wrap: wrap;
        flex-wrap: wrap
    }

    .ai-wrap .ai-control-wrap-thumb {
        width: 100%;
        margin: 0 0 20px;
        border-radius: 10px;
        filter: brightness(0.8);
        min-height: 140px;
    }

    .ai-wrap .ai-audio-controls-meta {
        position: relative
    }

    .ai-wrap .ai-audio-volume-control {
        display: none
    }

    .ai-wrap .ai-scroll-wrap .ai-tracklist {
        margin-right: 18px;
        border-radius: 10px;
    }
}

@media(width <= 320px) {
    .ai-wrap .ai-track-thumb {
        display:none
    }
}


.live-search {
    position: relative;
    max-width: 400px;
    margin: 20px auto;
}

.live-search .search-input {
    width: 100%;
    padding: 8px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    text-align: center;
    direction: rtl;
}

.live-search .search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #ccc;
    z-index: 999;
    max-height: 300px;
    overflow-y: auto;
    border-top: none;
}

.live-search .search-results ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.live-search .search-results li {
    padding: 10px;
    border-bottom: 1px solid #eee;
    text-align: center;
    background: var(--app);
}

.live-search .search-results li a {
    text-decoration: none;
    color: #333;
    display: block;
}