@font-face {
    font-family: IRANSansX;
    font-weight: 900;
    src: url("fonts/YekanBakh-Black.woff2") format("woff2");
}

@font-face {
    font-family: IRANSansX;
    font-weight: 800;
    src: url("fonts/YekanBakh-Black.woff2") format("woff2");
}

@font-face {
    font-family: IRANSansX;
    font-weight: 700;
    src: url("fonts/YekanBakh-ExtraBold.woff2") format("woff2");
}

@font-face {
    font-family: IRANSansX;
    font-weight: 600;
    src: url("fonts/YekanBakh-Bold.woff2") format("woff2");
}

@font-face {
    font-family: IRANSansX;
    font-weight: 500;
    src: url("fonts/YekanBakh-SemiBold.woff2") format("woff2");
}

@font-face {
    font-family: IRANSansX;
    font-weight: 400;
    src: url("fonts/YekanBakh-Regular.woff2") format("woff2");
}

@font-face {
    font-family: IRANSansX;
    font-weight: 300;
    src: url("fonts/YekanBakh-Light.woff2") format("woff2");
}

@font-face {
    font-family: IRANSansX;
    font-weight: 200;
    src: url("fonts/YekanBakh-Thin.woff2") format("woff2");
}

@font-face {
    font-family: IRANSansX;
    font-weight: 100;
    src: url("fonts/YekanBakh-Thin.woff2") format("woff2");
}

::selection {
    background: rgba(152, 185, 255, 0.18);
    color: #2563eb;
}

*,
::before,
::after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: #e5e7eb;
}

::before,
::after {
    --tw-content: "";
}

html,
:host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    font-family: iransansx;
    font-feature-settings: normal;
    font-variation-settings: normal;
    -webkit-tap-highlight-color: transparent;
}

body {
    margin: 0;
    line-height: inherit;
}

hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
}

abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: inherit;
    font-weight: inherit;
}

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

b,
strong {
    font-weight: bolder;
}

code,
kbd,
samp,
pre {
    font-family: Roboto Mono, monospace;
    font-feature-settings: normal;
    font-variation-settings: normal;
    font-size: 1em;
}

small {
    font-size: 80%;
}

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

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
}

button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    font-size: 100%;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: inherit;
    margin: 0;
    padding: 0;
}

button,
select {
    text-transform: none;
}

button,
input:where([type="button"]),
input:where([type="reset"]),
input:where([type="submit"]) {
    -webkit-appearance: button;
    background-color: transparent;
    background-image: none;
}

:-moz-focusring {
    outline: auto;
}

:-moz-ui-invalid {
    box-shadow: none;
}

progress {
    vertical-align: baseline;
}

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
    height: auto;
}

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

::-webkit-search-decoration {
    -webkit-appearance: none;
}

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

summary {
    display: list-item;
}

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
    margin: 0;
}

fieldset {
    margin: 0;
    padding: 0;
}

legend {
    padding: 0;
}

ol,
ul,
menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

dialog {
    padding: 0;
}

textarea {
    resize: vertical;
}

input::-moz-placeholder,
textarea::-moz-placeholder {
    opacity: 1;
    color: #9ca3af;
}

input::placeholder,
textarea::placeholder {
    opacity: 1;
    color: #9ca3af;
}

button,
[role="button"] {
    cursor: pointer;
}

:disabled {
    cursor: default;
}

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
    display: block;
    vertical-align: middle;
}

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

[hidden] {
    display: none;
}

[type="text"],
input:where(:not([type])),
[type="email"],
[type="url"],
[type="password"],
[type="number"],
[type="date"],
[type="datetime-local"],
[type="month"],
[type="search"],
[type="tel"],
[type="time"],
[type="week"],
[multiple],
textarea,
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #fff;
    border-color: #6b7280;
    border-width: 1px;
    border-radius: 0px;
    padding-top: 0.5rem;
    padding-right: 0.75rem;
    padding-bottom: 0.5rem;
    padding-left: 0.75rem;
    font-size: 1rem;
    line-height: 1.5rem;
    --tw-shadow: 0 0 #0000;
}

[type="text"]:focus,
input:where(:not([type])):focus,
[type="email"]:focus,
[type="url"]:focus,
[type="password"]:focus,
[type="number"]:focus,
[type="date"]:focus,
[type="datetime-local"]:focus,
[type="month"]:focus,
[type="search"]:focus,
[type="tel"]:focus,
[type="time"]:focus,
[type="week"]:focus,
[multiple]:focus,
textarea:focus,
select:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/
    );
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: #2563eb;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
    var(--tw-shadow);
    border-color: #2563eb;
}

input::-moz-placeholder,
textarea::-moz-placeholder {
    color: #6b7280;
    opacity: 1;
}

input::placeholder,
textarea::placeholder {
    color: #6b7280;
    opacity: 1;
}

::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
}

::-webkit-date-and-time-value {
    min-height: 1.5em;
    text-align: inherit;
}

::-webkit-datetime-edit {
    display: inline-flex;
}

::-webkit-datetime-edit,
::-webkit-datetime-edit-year-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-minute-field,
::-webkit-datetime-edit-second-field,
::-webkit-datetime-edit-millisecond-field,
::-webkit-datetime-edit-meridiem-field {
    padding-top: 0;
    padding-bottom: 0;
}

select {
    background-image: url(data:image/svg+xml,%3csvg\ xmlns=\'http://www.w3.org/2000/svg\'\ fill=\'none\'\ viewBox=\'0\ 0\ 20\ 20\'%3e%3cpath\ stroke=\'%236b7280\'\ stroke-linecap=\'round\'\ stroke-linejoin=\'round\'\ stroke-width=\'1.5\'\ d=\'M6\ 8l4\ 4\ 4-4\'/%3e%3c/svg%3e);
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

[multiple],
[size]:where(select:not([size="1"])) {
    background-image: initial;
    background-position: initial;
    background-repeat: unset;
    background-size: initial;
    padding-right: 0.75rem;
    -webkit-print-color-adjust: unset;
    print-color-adjust: unset;
}

[type="checkbox"],
[type="radio"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 0;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    display: inline-block;
    vertical-align: middle;
    background-origin: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    flex-shrink: 0;
    height: 1rem;
    width: 1rem;
    color: #2563eb;
    background-color: #fff;
    border-color: #6b7280;
    border-width: 1px;
    --tw-shadow: 0 0 #0000;
}

[type="checkbox"] {
    border-radius: 0px;
}

[type="radio"] {
    border-radius: 25%;
}

[type="checkbox"]:focus,
[type="radio"]:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/
    );
    --tw-ring-offset-width: 2px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: #2563eb;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
    var(--tw-shadow);
}

[type="checkbox"]:checked,
[type="radio"]:checked {
    border-color: transparent;
    background-color: currentColor;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}

[type="checkbox"]:checked {
    background-image: url(data:image/svg+xml,%3csvg\ viewBox=\'0\ 0\ 16\ 16\'\ fill=\'white\'\ xmlns=\'http://www.w3.org/2000/svg\'%3e%3cpath\ d=\'M12.207\ 4.793a1\ 1\ 0\ 010\ 1.414l-5\ 5a1\ 1\ 0\ 01-1.414\ 0l-2-2a1\ 1\ 0\ 011.414-1.414L6.5\ 9.086l4.293-4.293a1\ 1\ 0\ 011.414\ 0z\'/%3e%3c/svg%3e);
}

@media (forced-colors: active) {
    [type="checkbox"]:checked {
        -webkit-appearance: auto;
        -moz-appearance: auto;
        appearance: auto;
    }
}

[type="radio"]:checked {
    background-image: url(data:image/svg+xml,%3csvg\ viewBox=\'0\ 0\ 16\ 16\'\ fill=\'white\'\ xmlns=\'http://www.w3.org/2000/svg\'%3e%3ccircle\ cx=\'8\'\ cy=\'8\'\ r=\'3\'/%3e%3c/svg%3e);
}

@media (forced-colors: active) {
    [type="radio"]:checked {
        -webkit-appearance: auto;
        -moz-appearance: auto;
        appearance: auto;
    }
}

[type="checkbox"]:checked:hover,
[type="checkbox"]:checked:focus,
[type="radio"]:checked:hover,
[type="radio"]:checked:focus {
    border-color: transparent;
    background-color: currentColor;
}

[type="checkbox"]:indeterminate {
    background-image: url(data:image/svg+xml,%3csvg\ xmlns=\'http://www.w3.org/2000/svg\'\ fill=\'none\'\ viewBox=\'0\ 0\ 16\ 16\'%3e%3cpath\ stroke=\'white\'\ stroke-linecap=\'round\'\ stroke-linejoin=\'round\'\ stroke-width=\'2\'\ d=\'M4\ 8h8\'/%3e%3c/svg%3e);
    border-color: transparent;
    background-color: currentColor;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}

@media (forced-colors: active) {
    [type="checkbox"]:indeterminate {
        -webkit-appearance: auto;
        -moz-appearance: auto;
        appearance: auto;
    }
}

[type="checkbox"]:indeterminate:hover,
[type="checkbox"]:indeterminate:focus {
    border-color: transparent;
    background-color: currentColor;
}

[type="file"] {
    background: unset;
    border-color: inherit;
    border-width: 0;
    border-radius: 0;
    padding: 0;
    font-size: unset;
    line-height: inherit;
}

[type="file"]:focus {
    outline: 1px solid ButtonText;
    outline: 1px auto -webkit-focus-ring-color;
}

*,
::before,
::after {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x: ;
    --tw-pan-y: ;
    --tw-pinch-zoom: ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position: ;
    --tw-gradient-via-position: ;
    --tw-gradient-to-position: ;
    --tw-ordinal: ;
    --tw-slashed-zero: ;
    --tw-numeric-figure: ;
    --tw-numeric-spacing: ;
    --tw-numeric-fraction: ;
    --tw-ring-inset: ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur: ;
    --tw-brightness: ;
    --tw-contrast: ;
    --tw-grayscale: ;
    --tw-hue-rotate: ;
    --tw-invert: ;
    --tw-saturate: ;
    --tw-sepia: ;
    --tw-drop-shadow: ;
    --tw-backdrop-blur: ;
    --tw-backdrop-brightness: ;
    --tw-backdrop-contrast: ;
    --tw-backdrop-grayscale: ;
    --tw-backdrop-hue-rotate: ;
    --tw-backdrop-invert: ;
    --tw-backdrop-opacity: ;
    --tw-backdrop-saturate: ;
    --tw-backdrop-sepia: ;
    --tw-contain-size: ;
    --tw-contain-layout: ;
    --tw-contain-paint: ;
    --tw-contain-style: ;
}

::backdrop {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x: ;
    --tw-pan-y: ;
    --tw-pinch-zoom: ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position: ;
    --tw-gradient-via-position: ;
    --tw-gradient-to-position: ;
    --tw-ordinal: ;
    --tw-slashed-zero: ;
    --tw-numeric-figure: ;
    --tw-numeric-spacing: ;
    --tw-numeric-fraction: ;
    --tw-ring-inset: ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur: ;
    --tw-brightness: ;
    --tw-contrast: ;
    --tw-grayscale: ;
    --tw-hue-rotate: ;
    --tw-invert: ;
    --tw-saturate: ;
    --tw-sepia: ;
    --tw-drop-shadow: ;
    --tw-backdrop-blur: ;
    --tw-backdrop-brightness: ;
    --tw-backdrop-contrast: ;
    --tw-backdrop-grayscale: ;
    --tw-backdrop-hue-rotate: ;
    --tw-backdrop-invert: ;
    --tw-backdrop-opacity: ;
    --tw-backdrop-saturate: ;
    --tw-backdrop-sepia: ;
    --tw-contain-size: ;
    --tw-contain-layout: ;
    --tw-contain-paint: ;
    --tw-contain-style: ;
}

.cb3uk {
    width: 100%;
}

@media (min-width: 640px) {
    .cb3uk {
        max-width: 640px;
    }
}

@media (min-width: 768px) {
    .cb3uk {
        max-width: 768px;
    }
}

@media (min-width: 1024px) {
    .cb3uk {
        max-width: 1024px;
    }
}

@media (min-width: 1280px) {
    .cb3uk {
        max-width: 1280px;
    }
}

@media (min-width: 1536px) {
    .cb3uk {
        max-width: 1536px;
    }
}

.c8okn,
.cab5a,
.cfv5y,
.caf7b {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #fff;
    border-color: #6b7280;
    border-width: 1px;
    border-radius: 0px;
    padding-top: 0.5rem;
    padding-right: 0.75rem;
    padding-bottom: 0.5rem;
    padding-left: 0.75rem;
    font-size: 1rem;
    line-height: 1.5rem;
    --tw-shadow: 0 0 #0000;
}

.c8okn:focus,
.cab5a:focus,
.cfv5y:focus,
.caf7b:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/
    );
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: #2563eb;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
    var(--tw-shadow);
    border-color: #2563eb;
}

.c8okn::-moz-placeholder,
.cab5a::-moz-placeholder {
    color: #6b7280;
    opacity: 1;
}

.c8okn::placeholder,
.cab5a::placeholder {
    color: #6b7280;
    opacity: 1;
}

.c8okn::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
}

.c8okn::-webkit-date-and-time-value {
    min-height: 1.5em;
    text-align: inherit;
}

.c8okn::-webkit-datetime-edit {
    display: inline-flex;
}

.c8okn::-webkit-datetime-edit,
.c8okn::-webkit-datetime-edit-year-field,
.c8okn::-webkit-datetime-edit-month-field,
.c8okn::-webkit-datetime-edit-day-field,
.c8okn::-webkit-datetime-edit-hour-field,
.c8okn::-webkit-datetime-edit-minute-field,
.c8okn::-webkit-datetime-edit-second-field,
.c8okn::-webkit-datetime-edit-millisecond-field,
.c8okn::-webkit-datetime-edit-meridiem-field {
    padding-top: 0;
    padding-bottom: 0;
}

.cfv5y {
    background-image: url(data:image/svg+xml,%3csvg\ xmlns=\'http://www.w3.org/2000/svg\'\ fill=\'none\'\ viewBox=\'0\ 0\ 20\ 20\'%3e%3cpath\ stroke=\'%236b7280\'\ stroke-linecap=\'round\'\ stroke-linejoin=\'round\'\ stroke-width=\'1.5\'\ d=\'M6\ 8l4\ 4\ 4-4\'/%3e%3c/svg%3e);
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

.cfv5y:where([size]:not([size="1"])) {
    background-image: initial;
    background-position: initial;
    background-repeat: unset;
    background-size: initial;
    padding-right: 0.75rem;
    -webkit-print-color-adjust: unset;
    print-color-adjust: unset;
}

.camn3,
.cpoml {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 0;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    display: inline-block;
    vertical-align: middle;
    background-origin: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    flex-shrink: 0;
    height: 1rem;
    width: 1rem;
    color: #2563eb;
    background-color: #fff;
    border-color: #6b7280;
    border-width: 1px;
    --tw-shadow: 0 0 #0000;
}

.camn3 {
    border-radius: 0px;
}

.cpoml {
    border-radius: 100%;
}

.camn3:focus,
.cpoml:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/
    );
    --tw-ring-offset-width: 2px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: #2563eb;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
    var(--tw-shadow);
}

.camn3:checked,
.cpoml:checked {
    border-color: transparent;
    background-color: currentColor;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}

.camn3:checked {
    background-image: url(data:image/svg+xml,%3csvg\ viewBox=\'0\ 0\ 16\ 16\'\ fill=\'white\'\ xmlns=\'http://www.w3.org/2000/svg\'%3e%3cpath\ d=\'M12.207\ 4.793a1\ 1\ 0\ 010\ 1.414l-5\ 5a1\ 1\ 0\ 01-1.414\ 0l-2-2a1\ 1\ 0\ 011.414-1.414L6.5\ 9.086l4.293-4.293a1\ 1\ 0\ 011.414\ 0z\'/%3e%3c/svg%3e);
}

@media (forced-colors: active) {
    .camn3:checked {
        -webkit-appearance: auto;
        -moz-appearance: auto;
        appearance: auto;
    }
}

.cpoml:checked {
    background-image: url(data:image/svg+xml,%3csvg\ viewBox=\'0\ 0\ 16\ 16\'\ fill=\'white\'\ xmlns=\'http://www.w3.org/2000/svg\'%3e%3ccircle\ cx=\'8\'\ cy=\'8\'\ r=\'3\'/%3e%3c/svg%3e);
}

@media (forced-colors: active) {
    .cpoml:checked {
        -webkit-appearance: auto;
        -moz-appearance: auto;
        appearance: auto;
    }
}

.camn3:checked:hover,
.camn3:checked:focus,
.cpoml:checked:hover,
.cpoml:checked:focus {
    border-color: transparent;
    background-color: currentColor;
}

.camn3:indeterminate {
    background-image: url(data:image/svg+xml,%3csvg\ xmlns=\'http://www.w3.org/2000/svg\'\ fill=\'none\'\ viewBox=\'0\ 0\ 16\ 16\'%3e%3cpath\ stroke=\'white\'\ stroke-linecap=\'round\'\ stroke-linejoin=\'round\'\ stroke-width=\'2\'\ d=\'M4\ 8h8\'/%3e%3c/svg%3e);
    border-color: transparent;
    background-color: currentColor;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}

@media (forced-colors: active) {
    .camn3:indeterminate {
        -webkit-appearance: auto;
        -moz-appearance: auto;
        appearance: auto;
    }
}

.camn3:indeterminate:hover,
.camn3:indeterminate:focus {
    border-color: transparent;
    background-color: currentColor;
}

.cslfv {
    color: var(--tw-prose-body);
    max-width: 65ch;
}

.cslfv :where(p):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-top: 1.25em;
    margin-bottom: 1.25em;
}

.cslfv :where([class~="lead"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    color: var(--tw-prose-lead);
    font-size: 1.25em;
    line-height: 1.6;
    margin-top: 1.2em;
    margin-bottom: 1.2em;
}

.cslfv :where(a):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    color: var(--tw-prose-links);
    text-decoration: underline;
    font-weight: 500;
}

.cslfv :where(strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    color: var(--tw-prose-bold);
    font-weight: 600;
}

.cslfv :where(a strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    color: inherit;
}

.cslfv :where(blockquote strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    color: inherit;
}

.cslfv :where(thead th strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    color: inherit;
}

.cslfv :where(ol):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    list-style-type: decimal;
    margin-top: 1.25em;
    margin-bottom: 1.25em;
    padding-inline-start: 1.625em;
}

.cslfv :where(ol[type="A"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    list-style-type: upper-alpha;
}

.cslfv :where(ol[type="a"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    list-style-type: lower-alpha;
}

.cslfv :where(ol[type="A" s]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    list-style-type: upper-alpha;
}

.cslfv :where(ol[type="a" s]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    list-style-type: lower-alpha;
}

.cslfv :where(ol[type="I"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    list-style-type: upper-roman;
}

.cslfv :where(ol[type="i"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    list-style-type: lower-roman;
}

.cslfv :where(ol[type="I" s]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    list-style-type: upper-roman;
}

.cslfv :where(ol[type="i" s]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    list-style-type: lower-roman;
}

.cslfv :where(ol[type="1"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    list-style-type: decimal;
}

.cslfv :where(ul):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    list-style-type: disc;
    margin-top: 1.25em;
    margin-bottom: 1.25em;
    padding-inline-start: 1.625em;
}

.cslfv :where(ol > li):not(:where([class~="not-prose"], [class~="not-prose"] *))::marker {
    font-weight: 400;
    color: var(--tw-prose-counters);
}

.cslfv :where(ul > li):not(:where([class~="not-prose"], [class~="not-prose"] *))::marker {
    color: var(--tw-prose-bullets);
}

.cslfv :where(dt):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    color: var(--tw-prose-headings);
    font-weight: 600;
    margin-top: 1.25em;
}

.cslfv :where(hr):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    border-color: var(--tw-prose-hr);
    border-top-width: 1px;
    margin-top: 3em;
    margin-bottom: 3em;
}

.cslfv :where(blockquote):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    font-weight: 500;
    font-style: italic;
    color: var(--tw-prose-quotes);
    border-inline-start-width: 0.25rem;
    border-inline-start-color: var(--tw-prose-quote-borders);
    quotes: "“" "”" "‘" "’";
    margin-top: 1.6em;
    margin-bottom: 1.6em;
    padding-inline-start: 1em;
}

.cslfv :where(blockquote p:first-of-type):not(:where([class~="not-prose"], [class~="not-prose"] *))::before {
    content: open-quote;
}

.cslfv :where(blockquote p:last-of-type):not(:where([class~="not-prose"], [class~="not-prose"] *))::after {
    content: close-quote;
}

.cslfv :where(h1):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    color: var(--tw-prose-headings);
    font-weight: 800;
    font-size: 2.25em;
    margin-top: 0;
    margin-bottom: 0.8888889em;
    line-height: 1.1111111;
}

.cslfv :where(h1 strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    font-weight: 900;
    color: inherit;
}

.cslfv :where(h2):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    color: var(--tw-prose-headings);
    font-weight: 700;
    font-size: 1.5em;
    margin-top: 2em;
    margin-bottom: 1em;
    line-height: 1.3333333;
}

.cslfv :where(h2 strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    font-weight: 800;
    color: inherit;
}

.cslfv :where(h3):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    color: var(--tw-prose-headings);
    font-weight: 600;
    font-size: 1.25em;
    margin-top: 1.6em;
    margin-bottom: 0.6em;
    line-height: 1.6;
}

.cslfv :where(h3 strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    font-weight: 700;
    color: inherit;
}

.cslfv :where(h4):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    color: var(--tw-prose-headings);
    font-weight: 600;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    line-height: 1.5;
}

.cslfv :where(h4 strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    font-weight: 700;
    color: inherit;
}

.cslfv :where(img):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-top: 2em;
    margin-bottom: 2em;
}

.cslfv :where(picture):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    display: block;
    margin-top: 2em;
    margin-bottom: 2em;
}

.cslfv :where(video):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-top: 2em;
    margin-bottom: 2em;
}

.cslfv :where(kbd):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    font-weight: 500;
    font-family: inherit;
    color: var(--tw-prose-kbd);
    box-shadow: 0 0 0 1px rgb(var(--tw-prose-kbd-shadows) / 10%),
    0 3px 0 rgb(var(--tw-prose-kbd-shadows) / 10%);
    font-size: 0.875em;
    border-radius: 0.3125rem;
    padding-top: 0.1875em;
    padding-inline-end: 0.375em;
    padding-bottom: 0.1875em;
    padding-inline-start: 0.375em;
}

.cslfv :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    color: var(--tw-prose-code);
    font-weight: 600;
    font-size: 0.875em;
}

.cslfv :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *))::before {
    content: "`";
}

.cslfv :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *))::after {
    content: "`";
}

.cslfv :where(a code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    color: inherit;
}

.cslfv :where(h1 code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    color: inherit;
}

.cslfv :where(h2 code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    color: inherit;
    font-size: 0.875em;
}

.cslfv :where(h3 code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    color: inherit;
    font-size: 0.9em;
}

.cslfv :where(h4 code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    color: inherit;
}

.cslfv :where(blockquote code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    color: inherit;
}

.cslfv :where(thead th code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    color: inherit;
}

.cslfv :where(pre):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    color: var(--tw-prose-pre-code);
    background-color: var(--tw-prose-pre-bg);
    overflow-x: auto;
    font-weight: 400;
    font-size: 0.875em;
    line-height: 1.7142857;
    margin-top: 1.7142857em;
    margin-bottom: 1.7142857em;
    border-radius: 0.375rem;
    padding-top: 0.8571429em;
    padding-inline-end: 1.1428571em;
    padding-bottom: 0.8571429em;
    padding-inline-start: 1.1428571em;
}

.cslfv :where(pre code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    background-color: transparent;
    border-width: 0;
    border-radius: 0;
    padding: 0;
    font-weight: inherit;
    color: inherit;
    font-size: inherit;
    font-family: inherit;
    line-height: inherit;
}

.cslfv :where(pre code):not(:where([class~="not-prose"], [class~="not-prose"] *))::before {
    content: none;
}

.cslfv :where(pre code):not(:where([class~="not-prose"], [class~="not-prose"] *))::after {
    content: none;
}

.cslfv :where(table):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    width: 100%;
    table-layout: auto;
    text-align: start;
    margin-top: 2em;
    margin-bottom: 2em;
    font-size: 0.875em;
    line-height: 1.7142857;
}

.cslfv :where(thead):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    border-bottom-width: 1px;
    border-bottom-color: var(--tw-prose-th-borders);
}

.cslfv :where(thead th):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    color: var(--tw-prose-headings);
    font-weight: 600;
    vertical-align: bottom;
    padding-inline-end: 0.5714286em;
    padding-bottom: 0.5714286em;
    padding-inline-start: 0.5714286em;
}

.cslfv :where(tbody tr):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    border-bottom-width: 1px;
    border-bottom-color: var(--tw-prose-td-borders);
}

.cslfv :where(tbody tr:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    border-bottom-width: 0;
}

.cslfv :where(tbody td):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    vertical-align: baseline;
}

.cslfv :where(tfoot):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    border-top-width: 1px;
    border-top-color: var(--tw-prose-th-borders);
}

.cslfv :where(tfoot td):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    vertical-align: top;
}

.cslfv :where(figure > *):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-top: 0;
    margin-bottom: 0;
}

.cslfv :where(figcaption):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    color: var(--tw-prose-captions);
    font-size: 0.875em;
    line-height: 1.4285714;
    margin-top: 0.8571429em;
}

.cslfv {
    --tw-prose-body: #374151;
    --tw-prose-headings: #111827;
    --tw-prose-lead: #4b5563;
    --tw-prose-links: #111827;
    --tw-prose-bold: #111827;
    --tw-prose-counters: #6b7280;
    --tw-prose-bullets: #d1d5db;
    --tw-prose-hr: #e5e7eb;
    --tw-prose-quotes: #111827;
    --tw-prose-quote-borders: #e5e7eb;
    --tw-prose-captions: #6b7280;
    --tw-prose-kbd: #111827;
    --tw-prose-kbd-shadows: 17 24 39;
    --tw-prose-code: #111827;
    --tw-prose-pre-code: #e5e7eb;
    --tw-prose-pre-bg: #1f2937;
    --tw-prose-th-borders: #d1d5db;
    --tw-prose-td-borders: #e5e7eb;
    --tw-prose-invert-body: #d1d5db;
    --tw-prose-invert-headings: #fff;
    --tw-prose-invert-lead: #9ca3af;
    --tw-prose-invert-links: #fff;
    --tw-prose-invert-bold: #fff;
    --tw-prose-invert-counters: #9ca3af;
    --tw-prose-invert-bullets: #4b5563;
    --tw-prose-invert-hr: #374151;
    --tw-prose-invert-quotes: #f3f4f6;
    --tw-prose-invert-quote-borders: #374151;
    --tw-prose-invert-captions: #9ca3af;
    --tw-prose-invert-kbd: #fff;
    --tw-prose-invert-kbd-shadows: 255 255 255;
    --tw-prose-invert-code: #fff;
    --tw-prose-invert-pre-code: #d1d5db;
    --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
    --tw-prose-invert-th-borders: #4b5563;
    --tw-prose-invert-td-borders: #374151;
    font-size: 1rem;
    line-height: 1.75;
}

.cslfv :where(picture > img):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-top: 0;
    margin-bottom: 0;
}

.cslfv :where(li):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

.cslfv :where(ol > li):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    padding-inline-start: 0.375em;
}

.cslfv :where(ul > li):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    padding-inline-start: 0.375em;
}

.cslfv :where(.cslfv > ul > li p):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-top: 0.75em;
    margin-bottom: 0.75em;
}

.cslfv :where(.cslfv > ul > li > p:first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-top: 1.25em;
}

.cslfv :where(.cslfv > ul > li > p:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-bottom: 1.25em;
}

.cslfv :where(.cslfv > ol > li > p:first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-top: 1.25em;
}

.cslfv :where(.cslfv > ol > li > p:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-bottom: 1.25em;
}

.cslfv :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-top: 0.75em;
    margin-bottom: 0.75em;
}

.cslfv :where(dl):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-top: 1.25em;
    margin-bottom: 1.25em;
}

.cslfv :where(dd):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-top: 0.5em;
    padding-inline-start: 1.625em;
}

.cslfv :where(hr + *):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-top: 0;
}

.cslfv :where(h2 + *):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-top: 0;
}

.cslfv :where(h3 + *):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-top: 0;
}

.cslfv :where(h4 + *):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-top: 0;
}

.cslfv :where(thead th:first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    padding-inline-start: 0;
}

.cslfv :where(thead th:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    padding-inline-end: 0;
}

.cslfv :where(tbody td, tfoot td):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    padding-top: 0.5714286em;
    padding-inline-end: 0.5714286em;
    padding-bottom: 0.5714286em;
    padding-inline-start: 0.5714286em;
}

.cslfv :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    padding-inline-start: 0;
}

.cslfv :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    padding-inline-end: 0;
}

.cslfv :where(figure):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-top: 2em;
    margin-bottom: 2em;
}

.cslfv :where(.cslfv > :first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-top: 0;
}

.cslfv :where(.cslfv > :last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-bottom: 0;
}

.cayql,
.c2htu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    border-radius: 0.5rem;
    font-size: 12px;
    line-height: 1.5715;
    font-weight: 500;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.cayql {
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 8px;
    padding-bottom: 8px;
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),
    0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),
    0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.c2htu {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 5px;
    padding-bottom: 5px;
    --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color),
    0 1px 2px -1px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance: none;
}

.c8okn,
.cab5a,
.caf7b,
.cfv5y,
.camn3,
.cpoml {
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

.c8okn:focus,
.cab5a:focus,
.caf7b:focus,
.cfv5y:focus,
.camn3:focus,
.cpoml:focus {
    --tw-border-opacity: 1;
    border-color: rgb(147 197 253 / var(--tw-border-opacity));
}

.c8okn,
.cab5a,
.caf7b,
.cfv5y,
.camn3 {
    border-radius: 0.5rem;
}

.c8okn,
.cab5a,
.caf7b,
.cfv5y {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
    padding-left: 1rem;
    padding-right: 1rem;
    font-size: 0.875rem;
    line-height: 1.5715;
    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.c8okn::-moz-placeholder,
.cab5a::-moz-placeholder {
    --tw-placeholder-opacity: 1;
    color: rgb(156 163 175 / var(--tw-placeholder-opacity));
}

.c8okn::placeholder,
.cab5a::placeholder {
    --tw-placeholder-opacity: 1;
    color: rgb(156 163 175 / var(--tw-placeholder-opacity));
}

.cfv5y {
    padding-right: 2.5rem;
}

.camn3,
.cpoml {
    border-radius: 0.125rem;
    --tw-text-opacity: 1;
    color: rgb(31 41 55 / var(--tw-text-opacity));
}

.c8okn:focus,
.cab5a:focus,
.caf7b:focus,
.cfv5y:focus,
.camn3:focus,
.cpoml:focus {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
    var(--tw-shadow, 0 0 #0000);
}

[data-scrollspy-link].scrollspy-active {
    font-weight: 500;
    --tw-text-opacity: 1;
}

[data-aos="zoom-y-out"] {
    transform: scaleX(1.03);
    opacity: 0;
    transition-property: transform, opacity;
}

@media screen {
    html:not(.c9dao) [data-aos="fade-up"] {
        transform: translate3d(0, 10px, 0);
    }

    html:not(.c9dao) [data-aos="fade-down"] {
        transform: translate3d(0, -10px, 0);
    }

    html:not(.c9dao) [data-aos="fade-right"] {
        transform: translate3d(-10px, 0, 0);
    }

    html:not(.c9dao) [data-aos="fade-left"] {
        transform: translate3d(10px, 0, 0);
    }

    html:not(.c9dao) [data-aos="fade-up-right"] {
        transform: translate3d(-10px, 10px, 0);
    }

    html:not(.c9dao) [data-aos="fade-up-left"] {
        transform: translate3d(10px, 10px, 0);
    }

    html:not(.c9dao) [data-aos="fade-down-right"] {
        transform: translate3d(-10px, -10px, 0);
    }

    html:not(.c9dao) [data-aos="fade-down-left"] {
        transform: translate3d(10px, -10px, 0);
    }

    html:not(.c9dao) [data-aos="zoom-in-up"] {
        transform: translate3d(0, 10px, 0) scale(0.6);
    }

    html:not(.c9dao) [data-aos="zoom-in-down"] {
        transform: translate3d(0, -10px, 0) scale(0.6);
    }

    html:not(.c9dao) [data-aos="zoom-in-right"] {
        transform: translate3d(-10px, 0, 0) scale(0.6);
    }

    html:not(.c9dao) [data-aos="zoom-in-left"] {
        transform: translate3d(10px, 0, 0) scale(0.6);
    }

    html:not(.c9dao) [data-aos="zoom-out-up"] {
        transform: translate3d(0, 10px, 0) scale(1.2);
    }

    html:not(.c9dao) [data-aos="zoom-out-down"] {
        transform: translate3d(0, -10px, 0) scale(1.2);
    }

    html:not(.c9dao) [data-aos="zoom-out-right"] {
        transform: translate3d(-10px, 0, 0) scale(1.2);
    }

    html:not(.c9dao) [data-aos="zoom-out-left"] {
        transform: translate3d(10px, 0, 0) scale(1.2);
    }
}

.c55m0 {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.cc8v2 {
    pointer-events: none;
}

.coprw {
    visibility: visible;
}

.c7n5q {
    visibility: collapse;
}

.celt3 {
    position: static;
}

.cr6bd {
    position: fixed;
}

.cxj2n {
    position: absolute;
}

.c0vjw {
    position: relative;
}

.c4sie {
    position: sticky;
}

.cogum {
    inset: 0px;
}

.ckk6a {
    left: 0px;
    right: 0px;
}

.cy2uf {
    left: 200px;
    right: 200px;
}

.c0zts {
    left: 300px;
    right: 300px;
}

.c0u45 {
    top: 0px;
    bottom: 0px;
}

.ci9en {
    bottom: -2.5rem;
}

.cro3x {
    left: -5rem;
}

.caxyn {
    left: -7rem;
}

.czhda {
    left: -1.25rem;
}

.cmb90 {
    left: -1.5rem;
}

.cbtny {
    right: -16rem;
}

.covyf {
    top: -0.5rem;
}

.c8r9s {
    top: -5rem;
}

.cxj7m {
    top: -8rem;
}

.cvros {
    bottom: 0px;
}

.c5dv1 {
    bottom: 5rem;
}

.cgh7d {
    bottom: 6rem;
}

.c2okp {
    bottom: 8rem;
}

.cynql {
    left: 0px;
}

.cynqll {
    left: -80px;
}

.c82xa {
    left: 50%;
}

.c6nmb {
    left: 8rem;
}

.cl3uy {
    left: 14rem;
}

.ciq2k {
    left: 16rem;
}

.cj78a {
    right: 0px;
}

.cbms2 {
    right: 1.25rem;
}

.cvd4p {
    top: 0px;
}

.ciebj {
    top: 50%;
}

.cj9zb {
    top: 4rem;
}

.cvyg4 {
    top: 0.5rem;
}

.cerht {
    top: 5rem;
}

.cqlrd {
    top: 6rem;
}

.cz877 {
    top: 40px;
}

.c76qb {
    top: 1.75rem;
}

.cfkl5 {
    top: 420px;
}

.cinxm {
    top: 640px;
}

.cqzdr {
    top: 100%;
}

.ci34p {
    z-index: -10;
}

.cztq3 {
    z-index: 10;
}

.c3w9h {
    z-index: 20;
}

.cein3 {
    z-index: 30;
}

.c7kjd {
    z-index: 50;
}

.cgn13 {
    order: -9999;
}

.cbm9i {
    margin: 0.25rem;
}

.c5k8p {
    margin: auto;
}

.c54pb {
    margin-left: 0.5rem !important;
    margin-right: 0.5rem !important;
}

.cz689 {
    margin-left: -0px;
    margin-right: -0px;
}

.c4quo {
    margin-left: -0.125rem;
    margin-right: -0.125rem;
}

.c82w3 {
    margin-left: 1.5rem;
    margin-right: 1.5rem;
}

.cqcwp {
    margin-left: auto;
    margin-right: auto;
}

.cv8bq {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

.cv8bq1 {
    margin-top: 5rem;
    margin-bottom: 5rem;
}

.cmyp3 {
    margin-left: -6rem;
}

.c2l8u {
    margin-left: -300px;
}

.cyf4s {
    margin-top: -4rem;
}

.c0dxj {
    margin-bottom: 0.25rem;
}

.cwdf1 {
    margin-bottom: 2.5rem;
}

.c2nr4 {
    margin-bottom: 4rem;
}

.cd57x {
    margin-bottom: 0.5rem;
}

.cnrbi {
    margin-bottom: 0.75rem;
}

.c1ncu {
    margin-bottom: 8rem;
}

.cnv5k {
    margin-bottom: 1rem;
}

.cnv5k1 {
    margin-bottom: 2rem;
}

.cvf40 {
    margin-bottom: 1.25rem;
}

.cruyu {
    margin-bottom: 1.5rem;
}

.c60f3 {
    margin-bottom: 2rem;
}

.c5a5e {
    margin-bottom: 3.5%;
}

.cw2au {
    margin-bottom: 7%;
}

.cr1y2 {
    /*margin-left: unset;*/
    margin-right: 0.25rem;

}

.c70yl {
    margin-right: 0.5rem;
}

.cobp1 {
    margin-left: 0.75rem;
}

.cza7u {
    margin-left: 1rem;
}

.cq5x6 {
    margin-right: 1.5rem;
    /*margin-left: 1.5rem;*/
}

.c62az {
    margin-left: 2rem;
}

.cvizd {
    margin-left: 380px;
}

.cscpp {
    margin-left: 580px;
}

.c7kzf {
    margin-left: auto;
}

.c26le {
    margin-right: 0.25rem;
}

.cf22q {
    margin-right: 0.5rem;
}

.c2eey {
    margin-right: 0.75rem;
}

.cctk4 {
    margin-right: 1rem;
}

.cx4ty {
    margin-right: 1.5rem;
}

.cj7lf {
    margin-top: 0px;
}

.cwqdn {
    margin-top: 0.25rem;
}

.cu42g {
    margin-top: 2.5rem;
}

.cu8qb {
    margin-top: 3rem;
}

.cjlvo {
    margin-top: 0.5rem;
}

.ce61f {
    margin-top: 1rem;
}

.cebr1 {
    margin-top: 1.25rem;
}

.cichh {
    margin-top: 1.5rem;
}

.c969c {
    margin-top: 2rem;
}

.caf8r {
    box-sizing: content-box;
}

.cskbc {
    display: block;
}

.ccgep {
    display: inline;
}

.c4a2s {
    display: flex;
}

.cdrak {
    display: inline-flex;
}

.cu48v {
    display: table;
}

.c9k3o {
    display: grid;
}

.c9gtw {
    display: none;
}

.cxs6k {
    aspect-ratio: 16/9;
}

.c0rh9 {
    height: 3rem;
}

.cpzr5 {
    height: 3.5rem;
}

.cc61o {
    height: 4rem;
}

.ci2lm {
    height: 5rem;
}

.c61hs {
    height: 6rem;
}

.c7f5w {
    height: 0.75rem;
}

.ct7tn {
    height: 1rem;
}

.c7fu8 {
    height: 1.25rem;
}

.cozgt {
    height: 14rem;
}

.c3ksr {
    height: 1.5rem;
}

.cb3iw {
    height: 15rem;
}

.cbkjh {
    height: 2rem;
}

.c5uon {
    height: 20rem;
}

.cahd5 {
    height: 324px;
}

.cg0u5 {
    height: 100%;
}

.cmce1 {
    height: 1px;
}

.c5yva {
    max-height: 100%;
}

.crocn {
    min-height: 100vh;
}

.cq3mk {
    width: 50%;
}

.c4brf {
    width: 2.5rem;
}

.cr97w {
    width: 3rem;
}

.ct4tf {
    width: 4rem;
}

.cju07 {
    width: 5rem;
}

.cfonf {
    width: 6rem;
}

.cy7qa {
    width: 0.75rem;
}

.caqcf {
    width: 9rem;
}

.cdkxo {
    width: 1rem;
}

.cumc8 {
    width: 1.25rem;
}

.ca62l {
    width: 14rem;
}

.c7iri {
    width: 1.5rem;
}

.cgat7 {
    width: 15rem;
}

.cgat8 {
    width: 18rem;
}

.cgat7-1 {
    width: 24rem;
}

.cj90k {
    width: 2rem;
}

.czfz1 {
    width: 20rem;
}

.csqkd {
    width: 12.5rem;
}

.cboar {
    width: 22rem;
}

.cp32p {
    width: 268px;
}

.cmwh7 {
    width: 480px;
}

.cutxa {
    width: 500px;
}

.cjn1u {
    width: 572px;
}

.c07cc {
    width: 100%;
}

.cr0pe {
    width: 1px;
}

.cbkv7 {
    min-width: 0px;
}

.c9yjg {
    min-width: 220px;
}

.cf2y5 {
    max-width: 53rem;
}

.c441s {
    width: 100%;
    max-width: 53rem;
}

.cebq7 {
    max-width: 56rem;
}

.cxbfd {
    max-width: 90rem;
    /*max-width: 72rem;*/
}

.cq6pt {
    max-width: 500px;
}

.chai9 {
    max-width: 740px;
}

.cappb {
    max-width: 94rem;
}

.c0fvn {
    max-width: 28rem;
}

.c13of {
    max-width: none;
}

.csnm3 {
    max-width: 25rem;
}

.czxde {
    max-width: 36rem;
}

.c6dyc {
    max-width: 20rem;
}

.cfxr2 {
    flex: 1 1 0%;
}

.cfufg {
    flex-shrink: 0;
}

.c7fsb {
    flex-grow: 1;
}

.c7fcq {
    transform-origin: center;
}

.cm9sj {
    transform-origin: top left;
}

.c38j2 {
    --tw-translate-x: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.ccthb {
    --tw-translate-x: -33.333333%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.ckmem {
    --tw-translate-x: -9rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.c1fmc {
    --tw-translate-x: -136px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.cgj8i {
    --tw-translate-x: -216px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.c3kcn {
    --tw-translate-x: -292px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.c670p {
    --tw-translate-x: -100%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.cx9qa {
    --tw-translate-y: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.color {
    --tw-translate-y: -0.5rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.cqqni {
    --tw-translate-y: -5px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.cao07 {
    --tw-translate-y: -82px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.cif4v {
    --tw-translate-y: -100%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.cmbih {
    --tw-translate-x: 0px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.czing {
    --tw-translate-x: 136px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.cd2xo {
    --tw-translate-x: 216px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.c782f {
    --tw-translate-x: 292px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.cawtk {
    --tw-translate-x: 7px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.corjj {
    --tw-translate-x: 100%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.c2rsc {
    --tw-translate-y: 0px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.cxr5k {
    --tw-translate-y: 0.25rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.cydfs {
    --tw-translate-y: 50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.cffni {
    --tw-translate-y: 0.5rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.cmxyr {
    --tw-translate-y: 66.666667%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.chlal {
    --tw-translate-y: 1rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.c1w3t {
    --tw-translate-y: 5px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.cufgj {
    --tw-translate-y: 82px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.ccaoh {
    --tw-rotate: 180deg !important;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
}

.co6sa {
    --tw-rotate: -1deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.c5l9j {
    --tw-rotate: -2deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.czt6h {
    /*--tw-rotate: -90deg;*/
    --tw-rotate: 90deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.czmvk {
    --tw-rotate: -20deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.c5trk {
    --tw-rotate: 180deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.cozp9 {
    --tw-rotate: 20deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.ch07w {
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.ce1bf {
    --tw-scale-x: 1.25;
    --tw-scale-y: 1.25;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.cj4vu {
    --tw-scale-x: 0.9;
    --tw-scale-y: 0.9;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.c3mi3 {
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

@keyframes breath {

    0%,
    100% {
        transform: scale(0.95);
    }

    50% {
        transform: scale(1.1);
    }
}

.cf2in {
    animation: breath 6s ease-in-out 1.5s infinite both;
}

@keyframes breath {

    0%,
    100% {
        transform: scale(0.95);
    }

    50% {
        transform: scale(1.1);
    }
}

.cimwk {
    animation: breath 6s ease-in-out 2.5s infinite both;
}

@keyframes breath {

    0%,
    100% {
        transform: scale(0.95);
    }

    50% {
        transform: scale(1.1);
    }
}

.cdnce {
    animation: breath 6s ease-in-out 2s infinite both;
}

@keyframes breath {

    0%,
    100% {
        transform: scale(0.95);
    }

    50% {
        transform: scale(1.1);
    }
}

.cb1mz {
    animation: breath 6s ease-in-out 3.5s infinite both;
}

@keyframes breath {

    0%,
    100% {
        transform: scale(0.95);
    }

    50% {
        transform: scale(1.1);
    }
}

.ckf6a {
    animation: breath 6s ease-in-out 4s infinite both;
}

@keyframes breath {

    0%,
    100% {
        transform: scale(0.95);
    }

    50% {
        transform: scale(1.1);
    }
}

.c2kdw {
    animation: breath 7s ease-in-out 3.5s infinite both;
}

@keyframes breath {

    0%,
    100% {
        transform: scale(0.95);
    }

    50% {
        transform: scale(1.1);
    }
}

.cv954 {
    animation: breath 7s ease-in-out 3s infinite both;
}

@keyframes breath {

    0%,
    100% {
        transform: scale(0.95);
    }

    50% {
        transform: scale(1.1);
    }
}

.c509s {
    animation: breath 8s ease-in-out infinite both;
}

@keyframes code-1 {
    0% {
        opacity: 0;
    }

    2.5% {
        opacity: 1;
    }

    97.5% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.cuxmm {
    animation: code-1 10s infinite;
}

@keyframes code-2 {
    16.2% {
        opacity: 0;
    }

    18.75% {
        opacity: 1;
    }

    97.5% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.cvl7v {
    animation: code-2 10s infinite;
}

@keyframes code-3 {
    32.5% {
        opacity: 0;
    }

    35% {
        opacity: 1;
    }

    97.5% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.cpik1 {
    animation: code-3 10s infinite;
}

@keyframes code-4 {
    48.75% {
        opacity: 0;
    }

    51.25% {
        opacity: 1;
    }

    97.5% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.cor66 {
    animation: code-4 10s infinite;
}

@keyframes code-5 {
    65% {
        opacity: 0;
    }

    72.5% {
        opacity: 1;
    }

    97.5% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.cfsl6 {
    animation: code-5 10s infinite;
}

@keyframes code-6 {
    81.25% {
        opacity: 0;
    }

    83.75% {
        opacity: 1;
    }

    97.5% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.cgmt8 {
    animation: code-6 10s infinite;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

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

.c4m9r {
    animation: float 4s ease-in-out infinite 1s both;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

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

.c7dag {
    animation: float 4s ease-in-out infinite 2s both;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

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

.c5vd6 {
    animation: float 4s ease-in-out infinite 3s both;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

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

.cfvlc {
    animation: float 4s ease-in-out infinite both;
}

@keyframes infinite-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

.cmpl0 {
    animation: infinite-scroll 60s linear infinite;
}

.cnq6o {
    cursor: help;
}

.cgfbk {
    cursor: pointer;
}

.c2ovw {
    resize: both;
}

.ckr06 {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.c420h {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.cz5uw {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ca4cx {
    grid-template-rows: 0fr;
}

.cgcmd {
    grid-template-rows: 1fr;
}

.cl8ef {
    flex-direction: column;
}

.c81cr {
    flex-wrap: wrap;
}

.cn8zx {
    flex-wrap: nowrap;
}

.ctoov {
    align-items: flex-start;
}

.cwdc0 {
    align-items: flex-end;
}

.cdrow {
    align-items: center;
}

.c6u7t {
    align-items: baseline;
}

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

.cxbhj {
    justify-content: center;
}

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

.ck0fp {
    gap: 0px;
}

.c3o7t {
    gap: 0.125rem;
}

.cd48q {
    gap: 0.25rem;
}

.c96k8 {
    gap: 2.5rem;
}

.c4w4q {
    gap: 0.5rem;
}

.cgvdk {
    gap: 0.625rem;
}

.cnzyi {
    gap: 0.75rem;
}

.cnss4 {
    gap: 1rem;
}

.cyw8w {
    gap: 1.5rem;
}

.c7ff1 {
    gap: 2rem;
}

.czxkc > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(-0.75rem * var(--tw-space-x-reverse));
    margin-left: calc(-0.75rem * calc(1 - var(--tw-space-x-reverse)));
}

.ciy3m > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.5rem * var(--tw-space-x-reverse));
    margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}

.c67rt > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(1rem * var(--tw-space-x-reverse));
    margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
}

.cqffx > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(3.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(3.5rem * var(--tw-space-y-reverse));
}

.cl74u > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(3rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(3rem * var(--tw-space-y-reverse));
}

.cih6g > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}

.cfrd0 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}

.cw6xm > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}

.c84r8 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}

.c0jvt > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}

.clqyg > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-y-reverse: 0;
    border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}

.c6z6i {
    overflow: auto;
}

.overflow-hidden {
    overflow: hidden;
}

.cgaa4 {
    overflow-x: auto;
}

.chk42 {
    overflow-y: auto;
}

.cguq1 {
    scroll-behavior: smooth;
}

.c073h {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cyywn {
    white-space: nowrap;
}

.cwcj6 {
    border-radius: 0.25rem;
}

.ciff0 {
    border-radius: 1rem;
}

.csv9q {
    border-radius: 9999px;
}

.cl954 {
    border-radius: 10px;
}

.cyttz {
    border-radius: 0.375rem;
}

.chcxa {
    border-radius: 0.75rem;
}

.c3ytk {
    border-width: 1px;
}

.c7jo5 {
    border-width: 0px;
}

.c9xsv {
    border-width: 2px;
}

.ciq4z {
    border-width: 20px;
}

.chf5m {
    border-top-width: 1px;
    border-bottom-width: 1px;
}

.cr56b {
    border-bottom-width: 1px;
}

.c0nok {
    border-bottom-width: 2px;
}

.csv41 {
    border-left-width: 1px;
}

.c07w0 {
    border-right-width: 1px;
}

.crm25 {
    border-top-width: 1px;
}

.cr95s {
    border-style: dashed;
}

.ci2i6 {
    --tw-border-opacity: 1;
    border-color: rgb(59 130 246 / var(--tw-border-opacity));
}

.cggjr {
    --tw-border-opacity: 1;
    border-color: rgb(29 78 216 / var(--tw-border-opacity));
}

.c4vql {
    --tw-border-opacity: 1;
    border-color: rgb(243 244 246 / var(--tw-border-opacity));
}

.c52y0 {
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity));
}

.cf84e {
    border-color: rgb(229 231 235/0.6);
}

.c62zp {
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity));
}

.cf4eh {
    --tw-border-opacity: 1;
    border-color: rgb(249 250 251 / var(--tw-border-opacity));
}

.cwbov {
    --tw-border-opacity: 1;
    border-color: rgb(75 85 99 / var(--tw-border-opacity));
}

.c01nn {
    border-color: transparent;
}

.c1r3z {
    --tw-border-opacity: 1;
    border-color: rgb(255 255 255 / var(--tw-border-opacity));
}

.c52qd {
    --tw-bg-opacity: 1;
    background-color: rgb(239 246 255 / var(--tw-bg-opacity));
}

.cyqet {
    --tw-bg-opacity: 1;
    background-color: rgb(59 130 246 / var(--tw-bg-opacity));
}

.cj8rw {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity));
}

.cn9wy {
    --tw-bg-opacity: 1;
    background-color: rgb(229 231 235 / var(--tw-bg-opacity));
}

.csjju {
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}

.cbzch {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity));
}

.chf7m {
    --tw-bg-opacity: 1;
    /*background-color: rgb(17 24 39 / var(--tw-bg-opacity));*/
    background-color: rgb(226 240 255 / 34%);
}

.cgwj6 {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

.c73aj {
    background-color: rgb(255 255 255/0.7);
}

.czdar {
    background-color: rgb(255 255 255/0.9);
}

.co1q4 {
    --tw-bg-opacity: 0.2;
}

.cm27f {
    background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}

.c7pbn {
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.cnky1 {
    background-image: linear-gradient(to top, var(--tw-gradient-stops));
}

.cwgyo {
    background-image: linear-gradient(to top right, var(--tw-gradient-stops));
}

.cmxwm {
    --tw-gradient-from: #3b82f6 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.cfdqu {
    --tw-gradient-from: #2563eb var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(37 99 235 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.c2zxn {
    --tw-gradient-from: #e5e7eb var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(229 231 235 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.c2nk0 {
    --tw-gradient-from: #111827 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(17 24 39 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.cev45 {
    --tw-gradient-from: transparent var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.c1xou {
    --tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from),
    rgb(59 130 246 / 0.6) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.cniyu {
    --tw-gradient-to: rgb(229 231 235 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from),
    #e5e7eb var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.c8tf8 {
    --tw-gradient-to: #3b82f6 var(--tw-gradient-to-position);
}

.crqqx {
    --tw-gradient-to: #374151 var(--tw-gradient-to-position);
}

.cx349 {
    --tw-gradient-to: #111827 var(--tw-gradient-to-position);
}

.cedzu {
    --tw-gradient-to: transparent var(--tw-gradient-to-position);
}

.cnbzd {
    background-size: 100% 100%;
}

.cw1xo {
    background-position: bottom;
}

.c93t0 {
    fill: #fbbf24;
}

.cfix0 {
    fill: #93c5fd;
}

.c4ow8 {
    fill: #3b82f6;
}

.cturl {
    fill: currentColor;
}

.clnes {
    fill: #10b981;
}

.ck0aw {
    fill: #e5e7eb;
}

.clcg2 {
    fill: #9ca3af;
}

.cca42 {
    fill: #6b7280;
}

.c2aj1 {
    padding: 0.25rem;
}

.ckuz5 {
    padding: 0.5rem;
}

.cgafo {
    padding: 1.25rem;
}

.c3woy {
    padding-left: 0px;
    padding-right: 0px;
}

.cgus1 {
    padding-left: 0.125rem;
    padding-right: 0.125rem;
}

.cb51q {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.cblyd {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.cn7jq {
    padding-left: 1rem;
    padding-right: 1rem;
}

.c0dhx {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

.chf4b {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.cti13 {
    padding-left: 2rem;
    padding-right: 2rem;
}

.cogr4 {
    padding-top: 0px;
    padding-bottom: 0px;
}

.c88zw {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

.cwmyr {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
}

.c1gwx {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.c5yxd {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.c37mk {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.c1fmi {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.clsa6 {
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
}

.cfa00 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.c3lfu {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.c6cri {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.cx9dd {
    padding-bottom: 2.5rem;
}

.cb4uz {
    padding-bottom: 3rem;
}

.cx4ct {
    padding-bottom: 4rem;
}

.cxkvs {
    padding-bottom: 6rem;
}

.c117c {
    padding-bottom: 0.75rem;
}

.cfjwl {
    padding-bottom: 1rem;
}

.cbyz9 {
    padding-bottom: 2rem;
}

.coyb7 {
    padding-left: 0.25rem;
}

.c7lfv {
    padding-left: 2.5rem;
}

.cbcdv {
    padding-left: 0.5rem;
}

.cj5o2 {
    padding-left: 1rem;
}

.ci3un {
    padding-left: 1.5rem;
}

.ca8w1 {
    padding-right: 0.75rem;
}

.cst3t {
    padding-right: 1rem;
}

.cviqh {
    padding-top: 2.5rem;
}

.covvi {
    padding-top: 3rem;
}

.cbgts {
    padding-top: 8rem !important;
}

.cgb6c {
    text-align: left;
}

.cczaz {
    text-align: center;
}

.co5fe {
    font-family: IRANSansX, sans-serif;
}

.cwzxh {
    font-family: Roboto Mono, monospace;
}

.ci34f {
    font-size: 1.5rem !important;
    line-height: 1.415;
    letter-spacing: -0.037em;
}

.c0clt {
    font-size: 1.875rem;
    line-height: 1.3333;
    letter-spacing: -0.037em;
}

@media (max-width: 768px) {
    .c0clt {
        font-size: 1.5rem !important;
    }
}

.cq262 {
    font-size: 2.25rem;
    line-height: 1.2777;
    letter-spacing: -0.037em;
}

.c9s5u {
    font-size: 2rem;
    line-height: 1;
    letter-spacing: -0.037em;
}

.czz77 {
    font-size: 13px;
}

.cfl62 {
    font-size: 15px;
}

.cy5k3 {
    font-size: 348px;
}


.cprne {
    font-size: 16px;
    line-height: 2.2;
    letter-spacing: -0.017em;
}

.cnrm4 {
    font-size: 0.875rem;
    line-height: 2;
}

.cnrm41 {
    font-size: 16px;
}

.c3dci {
    font-size: 1.25rem;
    line-height: 1.5;
    letter-spacing: -0.017em;
}

.cipq7 {
    font-size: 0.75rem;
    line-height: 1.5;
}

.cep6s {
    font-weight: 700;
}

.cc7ls {
    font-weight: 500;
}

.clutn {
    font-weight: 400;
}

.ck08h {
    font-weight: 600;
}

.cpiio {
    font-style: italic;
}

.c8jte {
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}

.cf7z5 {
    line-height: 2.5rem;
}

.c1yep {
    line-height: 1;
}

.ck2l5 {
    letter-spacing: 0em;
}

.cbyl4 {
    letter-spacing: -0.025em;
}

.cun6s {
    --tw-text-opacity: 1;
    color: rgb(0 0 0 / var(--tw-text-opacity));
}

.ck05u {
    --tw-text-opacity: 1;
    color: rgb(147 197 253 / var(--tw-text-opacity));
}

.crnka {
    --tw-text-opacity: 1;
    color: rgb(59 130 246 / var(--tw-text-opacity));
}

.cy056 {
    --tw-text-opacity: 1;
    color: rgb(16 185 129 / var(--tw-text-opacity));
}

.ctwfu {
    --tw-text-opacity: 1;
    color: rgb(229 231 235 / var(--tw-text-opacity));
}

.c1gto {
    --tw-text-opacity: 1;
    color: rgb(209 213 219 / var(--tw-text-opacity));
}

.chql7 {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity));
}

.cn0bb {
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity));
}

.ciqaw {
    color: rgb(107 114 128/0.8);
}

.c34vk {
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity));
}

.ce0zw {
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity));
}

.c3ns1 {
    --tw-text-opacity: 1;
    color: rgb(31 41 55 / var(--tw-text-opacity));
}

.ctwbb {
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity));
}

.cvmwc {
    --tw-text-opacity: 1;
    color: rgb(79 70 229 / var(--tw-text-opacity));
}

.c8aqa {
    --tw-text-opacity: 1;
    color: rgb(168 85 247 / var(--tw-text-opacity));
}

.chlhu {
    --tw-text-opacity: 1;
    color: rgb(239 68 68 / var(--tw-text-opacity));
}

.cnbyk {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
}

.cmnlh {
    text-decoration-line: underline;
}

.cvmy1 {
    text-decoration-color: #d1d5db;
}

.cwxyd {
    text-decoration-color: #4b5563;
}

.cfgv9 {
    text-decoration-style: dotted;
}

.c7sfa {
    text-underline-offset: 4px;
}

.c8l5g {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.cx8xf::-moz-placeholder {
    --tw-placeholder-opacity: 1;
    color: rgb(156 163 175 / var(--tw-placeholder-opacity));
}

.cx8xf::placeholder {
    --tw-placeholder-opacity: 1;
    color: rgb(156 163 175 / var(--tw-placeholder-opacity));
}

.cio1t {
    opacity: 0;
}

.c8bnb {
    opacity: 1;
}

.czeo4 {
    opacity: 0.25;
}

.cga69 {
    opacity: 0.3;
}

.co8qp {
    opacity: 0.4;
}

.ca7zz {
    opacity: 0.5;
}

.c0c31 {
    opacity: 0.7;
}

.cr8os {
    opacity: 0.8;
}

.cxju3 {
    mix-blend-mode: multiply;
}

.cwq93 {
    --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color),
    0 1px 2px -1px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.cwoyc {
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),
    0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),
    0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.cu39d {
    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.cncjq {
    --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1),
    0 8px 10px -6px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color),
    0 8px 10px -6px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.cy259 {
    --tw-shadow-color: rgb(0 0 0 / 0.03);
    --tw-shadow: var(--tw-shadow-colored);
}

.cioog {
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.cjw6g {
    --tw-blur: blur(64px);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.cjgwc {
    --tw-blur: blur(160px);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.cynbf {
    --tw-blur: blur(20px);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.c76rr {
    --tw-blur: blur(80px);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.cjin1 {
    --tw-blur: blur(4px);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.cxgxk {
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.ccd0d {
    --tw-backdrop-blur: blur(4px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.cwcpl {
    transition-property: color, background-color, border-color,
    text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter,
    -webkit-backdrop-filter;
    transition-property: color, background-color, border-color,
    text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter,
    backdrop-filter;
    transition-property: color, background-color, border-color,
    text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter,
    backdrop-filter, -webkit-backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.c54ql {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.cv7k7 {
    transition-property: color, background-color, border-color,
    text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.cwmoh {
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.ceifv {
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.cjjqo {
    transition-delay: 100ms;
}

.cclvm {
    transition-duration: 100ms;
}

.ccybt {
    transition-duration: 200ms;
}

.coclo {
    transition-duration: 300ms;
}

.c4giq {
    transition-duration: 500ms;
}

.cuwe0 {
    transition-duration: 700ms;
}

.cdgbu {
    transition-timing-function: cubic-bezier(0.5, 0.85, 0.25, 1.1);
}

.cl4gy {
    transition-timing-function: cubic-bezier(0.5, 0.85, 0.25, 1.8);
}

.crmdp {
    transition-timing-function: cubic-bezier(0.38, 0, 0.32, 1);
}

.c0lz8 {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.chyvu {
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.cjxwv {
    will-change: filter;
}

.c0puo {
    -o-border-image: linear-gradient(to bottom, #e2e8f0, #cbd5e1, transparent) 1;
    border-image: linear-gradient(to bottom, #e2e8f0, #cbd5e1, transparent) 1;
}

.cw7kv {
    -o-border-image: linear-gradient(to bottom,
    transparent,
    rgb(203 213 225/0.5),
    transparent) 1;
    border-image: linear-gradient(to bottom,
    transparent,
    rgb(203 213 225/0.5),
    transparent) 1;
}

.co46j {
    -o-border-image: linear-gradient(to right,
    transparent,
    rgb(59 130 246/0.25),
    transparent) 1;
    border-image: linear-gradient(to right,
    transparent,
    rgb(59 130 246/0.25),
    transparent) 1;
}

.cl3v7 {
    -o-border-image: linear-gradient(to right, transparent, #e2e8f0, transparent) 1;
    border-image: linear-gradient(to right, transparent, #e2e8f0, transparent) 1;
}

.cqzis {
    -o-border-image: linear-gradient(to right,
    transparent,
    rgb(203 213 225/0.8),
    transparent) 1;
    border-image: linear-gradient(to right,
    transparent,
    rgb(203 213 225/0.8),
    transparent) 1;
}

.cy4m1 {
    -o-border-image: linear-gradient(to right,
    transparent,
    rgb(51 65 85/0.7),
    transparent) 1;
    border-image: linear-gradient(to right,
    transparent,
    rgb(51 65 85/0.7),
    transparent) 1;
}

.c641p {
    -webkit-mask-image: linear-gradient(to right,
    transparent 0,
    black 10%,
    black 90%,
    transparent 100%);
    mask-image: linear-gradient(to right,
    transparent 0,
    black 10%,
    black 90%,
    transparent 100%);
}

.ccavq {
    -webkit-mask-image: linear-gradient(to top,
    rgb(255 255 255/0.3),
    black 800px);
    mask-image: linear-gradient(to top, rgb(255 255 255/0.3), black 800px);
}

[x-cloak=""] {
    display: none;
}

.carbw::before {
    content: var(--tw-content);
    pointer-events: none;
}

.c2xfw::before {
    content: var(--tw-content);
    position: absolute;
}

.c2mkf::before {
    content: var(--tw-content);
    inset: -0.75rem;
}

.cjq0v::before {
    content: var(--tw-content);
    inset: -1.25rem;
}

.cnbst::before {
    content: var(--tw-content);
    inset: 0px;
}

.csljt::before {
    content: var(--tw-content);
    top: 0px;
    bottom: 0px;
}

.cx10p::before {
    content: var(--tw-content);
    left: -1.5rem;
}

.czqz3::before {
    content: var(--tw-content);
    left: 0px;
}

.cvyxc::before {
    content: var(--tw-content);
    top: 50%;
}

.cvbjy::before {
    content: var(--tw-content);
    z-index: -10;
}

.crlr7::before {
    content: var(--tw-content);
    z-index: -20;
}

.c9x43::before {
    content: var(--tw-content);
    margin: 8.334%;
}

.c82yt::before {
    content: var(--tw-content);
    margin-left: -1px;
}

.cu52c::before {
    content: var(--tw-content);
    display: block;
}

.cgoh2::before {
    content: var(--tw-content);
    height: 0.75rem;
}

.cuhzn::before {
    content: var(--tw-content);
    height: 120%;
}

.cgijw::before {
    content: var(--tw-content);
    height: 9px;
}

.cpnre::before {
    content: var(--tw-content);
    min-height: 4rem;
}

.c1hbo::before {
    content: var(--tw-content);
    width: 6rem;
}

.cjpz9::before {
    content: var(--tw-content);
    width: 41px;
}

.c3uwq::before {
    content: var(--tw-content);
    width: 1px;
}

.ce3b0::before {
    content: var(--tw-content);
    flex: 1 1 0%;
}

.ccr3v::before {
    content: var(--tw-content);
    --tw-translate-y: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.cqswb::before {
    content: var(--tw-content);
    --tw-scale-x: 0.85;
    --tw-scale-y: 0.85;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

@keyframes line {

    0%,
    100% {
        content: var(--tw-content);
        left: 0;
        opacity: 0;
    }

    50% {
        content: var(--tw-content);
        left: 100%;
        transform: translateX(-100%);
    }

    10%,
    40%,
    60%,
    90% {
        content: var(--tw-content);
        opacity: 0;
    }

    25%,
    75% {
        content: var(--tw-content);
        opacity: 1;
    }
}

.crjfc::before {
    content: var(--tw-content);
    animation: line 10s ease-in-out infinite 5s both;
}

@keyframes line {

    0%,
    100% {
        content: var(--tw-content);
        left: 0;
        opacity: 0;
    }

    50% {
        content: var(--tw-content);
        left: 100%;
        transform: translateX(-100%);
    }

    10%,
    40%,
    60%,
    90% {
        content: var(--tw-content);
        opacity: 0;
    }

    25%,
    75% {
        content: var(--tw-content);
        opacity: 1;
    }
}

.clxah::before {
    content: var(--tw-content);
    animation: line 10s ease-in-out infinite both;
}

@keyframes pulse {
    50% {
        content: var(--tw-content);
        opacity: 0.5;
    }
}

.cfpsu::before {
    content: var(--tw-content);
    animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes spin {
    to {
        content: var(--tw-content);
        transform: rotate(360deg);
    }
}

.cpa9v::before {
    content: var(--tw-content);
    animation: spin 3s linear infinite;
}

.cx1xp::before {
    content: var(--tw-content);
    border-radius: 1rem;
}

.cynyd::before {
    content: var(--tw-content);
    border-radius: inherit;
}

.ck41d::before {
    content: var(--tw-content);
    border-radius: 9999px;
}

.cpous::before {
    content: var(--tw-content);
    border-width: 1px;
}

.cgkcp::before {
    content: var(--tw-content);
    border-top-width: 1px;
    border-bottom-width: 1px;
}

.cdol0::before {
    content: var(--tw-content);
    border-color: rgb(55 65 81/0.05);
}

.cv5x1::before {
    content: var(--tw-content);
    border-color: transparent;
}

.c0wan::before {
    content: var(--tw-content);
    --tw-bg-opacity: 1;
    background-color: rgb(59 130 246 / var(--tw-bg-opacity));
}

.cwsa9::before {
    content: var(--tw-content);
    background-color: rgb(229 231 235/0.6);
}

.c9hb9::before {
    content: var(--tw-content);
    --tw-bg-opacity: 1;
    background-color: rgb(209 213 219 / var(--tw-bg-opacity));
}

.c2bmm::before {
    content: var(--tw-content);
    --tw-bg-opacity: 1;
    background-color: rgb(17 24 39 / var(--tw-bg-opacity));
}

.clrg9::before {
    content: var(--tw-content);
    background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}

.cet77::before {
    content: var(--tw-content);
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.c02lw::before {
    content: var(--tw-content);
    --tw-gradient-from: #1e3a8a var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(30 58 138 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.cn8c0::before {
    content: var(--tw-content);
    --tw-gradient-from: #f3f4f6 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(243 244 246 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.clb9z::before {
    content: var(--tw-content);
    --tw-gradient-from: #e5e7eb var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(229 231 235 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.cihmh::before {
    content: var(--tw-content);
    --tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from),
    #3b82f6 var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.cigw0::before {
    content: var(--tw-content);
    --tw-gradient-to: rgb(243 244 246 / 0.3) var(--tw-gradient-to-position);
}

.c77fw::before {
    content: var(--tw-content);
    --tw-gradient-to: rgb(3 105 161 / 0.5) var(--tw-gradient-to-position);
}

.czznb::before {
    content: var(--tw-content);
    --tw-gradient-to-position: 80%;
}

.cvvf7::before {
    content: var(--tw-content);
    background-size: 16px 9px;
}

.cleqp::before {
    content: var(--tw-content);
    -webkit-background-clip: text;
    background-clip: text;
}

.cvw27::before {
    content: var(--tw-content);
    color: transparent;
}

.c7wav::before {
    content: var(--tw-content);
    --tw-blur: blur(64px);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.cy5yu::before {
    --tw-content: "ALVAND";
    content: var(--tw-content);
}

.ch676::before {
    content: var(--tw-content);
    background-image: radial-gradient(circle at 4.5px 4.5px,
    #4b5563 4.5px,
    transparent 0);
}

.ckmxx::before {
    content: var(--tw-content);
    background: conic-gradient(from 180deg, transparent, #3b82f6) border-box;
}

.csoaf::before {
    content: var(--tw-content);
    background: linear-gradient(#f3f4f6, #e5e7eb) border-box;
}

.csw7z::before {
    content: var(--tw-content);
    -o-border-image: linear-gradient(to right,
    transparent,
    rgb(203 213 225/0.8),
    transparent) 1;
    border-image: linear-gradient(to right,
    transparent,
    rgb(203 213 225/0.8),
    transparent) 1;
}

.cnpw6::before {
    content: var(--tw-content);
    -webkit-mask-composite: xor !important;
    mask-composite: exclude !important;
}

.cab6c::before {
    content: var(--tw-content);
    -webkit-mask-image: linear-gradient(to bottom, black, transparent);
    mask-image: linear-gradient(to bottom, black, transparent);
}

.cdouf::before {
    content: var(--tw-content);
    -webkit-mask: linear-gradient(white 0 0) padding-box,
    linear-gradient(white 0 0);
    mask: linear-gradient(white 0 0) padding-box, linear-gradient(white 0 0);
}

.c030e::after {
    content: var(--tw-content);
    position: absolute;
}

.cxhrx::after {
    content: var(--tw-content);
    inset: -1.25rem;
}

.c4m92::after {
    content: var(--tw-content);
    inset: 0px;
}

.cl5e2::after {
    content: var(--tw-content);
    z-index: -10;
}

.c7uuq::after {
    content: var(--tw-content);
    width: 41px;
}

.c5fai::after {
    content: var(--tw-content);
    flex: 1 1 0%;
}

.ca99c::after {
    content: var(--tw-content);
    border-radius: inherit;
}

.c5nka::after {
    content: var(--tw-content);
    border-left-width: 1px;
    border-right-width: 1px;
}

.cf9nj::after {
    content: var(--tw-content);
    background-color: rgb(209 213 219/0.7);
}

.c2jz9::after {
    content: var(--tw-content);
    -webkit-background-clip: text;
    background-clip: text;
}

.cj3qy::after {
    content: var(--tw-content);
    color: transparent;
}

.csrml::after {
    content: var(--tw-content);
    mix-blend-mode: darken;
}

.cdm9m::after {
    --tw-content: "ALVAND";
    content: var(--tw-content);
}

.ce6as::after {
    content: var(--tw-content);
    background: radial-gradient(closest-side, #3b82f6, transparent);
}

.ci4ez::after {
    content: var(--tw-content);
    -o-border-image: linear-gradient(to bottom,
    transparent,
    rgb(203 213 225/0.8),
    transparent) 1;
    border-image: linear-gradient(to bottom,
    transparent,
    rgb(203 213 225/0.8),
    transparent) 1;
}

.caynm::after {
    content: var(--tw-content);
    text-shadow: 0 1px 0 white;
}

.cfswz:first-child::before {
    content: var(--tw-content);
    display: none;
}

.czthg:first-child::before {
    content: var(--tw-content);
    width: 0px;
}

.cmk0x:nth-child(odd) {
    --tw-rotate: 1deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.c3pm7:nth-child(even) {
    --tw-rotate: -1deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.cg95q:focus-within {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity));
}

.chpyv:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity));
}

.c2np1:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}

.cc3qo:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(17 24 39 / var(--tw-bg-opacity));
}

.c3irf:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

.cdnfp:hover {
    background-size: 100% 150%;
}

.cztsb:hover {
    --tw-text-opacity: 1;
    color: rgb(37 99 235 / var(--tw-text-opacity));
}

.c1iai:hover {
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity));
}

.cgq07:hover {
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity));
}

.c5i88:hover {
    text-decoration-line: underline;
}

.captn:hover {
    text-decoration-line: none;
}

.cvxx3:focus {
    --tw-border-opacity: 1;
    border-color: rgb(0 0 0 / var(--tw-border-opacity));
}

.c7zew:focus {
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity));
}

.crv45:focus {
    --tw-border-opacity: 1;
    border-color: rgb(107 114 128 / var(--tw-border-opacity));
}

.cifyq:focus {
    --tw-border-opacity: 1;
    border-color: rgb(165 180 252 / var(--tw-border-opacity));
}

.cq1y9:focus {
    border-color: transparent;
}

.cqjoa:focus {
    --tw-bg-opacity: 1;
    background-color: rgb(229 231 235 / var(--tw-bg-opacity));
}

.c2owt:focus {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

.c5bx6:focus {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
    var(--tw-shadow, 0 0 #0000);
}

.cexdt:focus {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
    var(--tw-shadow, 0 0 #0000);
}

.cs19g:focus {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
    var(--tw-shadow, 0 0 #0000);
}

.chdjh:focus {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(0 0 0 / var(--tw-ring-opacity));
}

.cnic6:focus {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(107 114 128 / var(--tw-ring-opacity));
}

.cphdf:focus {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(199 210 254 / var(--tw-ring-opacity));
}

.cepid:focus {
    --tw-ring-color: transparent;
}

.ccqp0:focus {
    --tw-ring-opacity: 0.5;
}

.c7lre:focus {
    --tw-ring-offset-width: 0px;
}

.c89sw:focus {
    --tw-ring-offset-width: 2px;
}

.cs5wq:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.c5dhx:focus-visible {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
    var(--tw-shadow, 0 0 #0000);
}

.cdlu6:focus-visible {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(147 197 253 / var(--tw-ring-opacity));
}

.codvp:hover .c0b1x {
    --tw-translate-x: 0px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.codvp:hover .cvsu8 {
    --tw-translate-x: 0.125rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.codvp:hover .cq9di {
    --tw-translate-y: 0px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.codvp:hover .ctgt9 {
    --tw-rotate: -0deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.codvp:hover .c8782 {
    --tw-rotate: 0deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.codvp:hover .cnfys {
    --tw-rotate: -45deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.codvp:hover .cbk0m {
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity));
}

.codvp:hover .cxiaq {
    opacity: 0;
}

.codvp:hover .c862v {
    --tw-blur: blur(0);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.codvp:hover .cnboj {
    animation-play-state: paused;
}

.codvp[aria-expanded="true"] .cd5ia {
    --tw-translate-x: 0px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.codvp[aria-expanded="true"] .ctqdg {
    --tw-translate-y: 0px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.codvp[aria-expanded="true"] .cllhq {
    --tw-rotate: 45deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.codvp[aria-expanded="true"] .cggs3 {
    --tw-rotate: 135deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.codvp[aria-expanded="true"] .c2848 {
    --tw-rotate: 315deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.clym0 :is(:where(h1, h2, h3, h4, h5, h6, th):not(:where([class~="not-prose"], [class~="not-prose"] *))) {
    scroll-margin-top: 6rem;
}

.c6lho :is(:where(h1, h2, h3, h4, h5, h6, th):not(:where([class~="not-prose"], [class~="not-prose"] *))) {
    font-weight: 700;
}

.cpojg :is(:where(h1, h2, h3, h4, h5, h6, th):not(:where([class~="not-prose"], [class~="not-prose"] *))) {
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity));
}

.c08h7 :is(:where(a):not(:where([class~="not-prose"], [class~="not-prose"] *))) {
    font-weight: 500;
}

.cypog :is(:where(a):not(:where([class~="not-prose"], [class~="not-prose"] *))) {
    --tw-text-opacity: 1;
    color: rgb(59 130 246 / var(--tw-text-opacity));
}

.ckp67 :is(:where(a):not(:where([class~="not-prose"], [class~="not-prose"] *))) {
    text-decoration-line: none;
}

.cm2lc :is(:where(a):not(:where([class~="not-prose"], [class~="not-prose"] *))):hover {
    text-decoration-line: underline;
}

.cs28c :is(:where(blockquote):not(:where([class~="not-prose"], [class~="not-prose"] *))) {
    border-left-width: 2px;
}

.c9x7i :is(:where(blockquote):not(:where([class~="not-prose"], [class~="not-prose"] *))) {
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity));
}

.cm20a :is(:where(blockquote):not(:where([class~="not-prose"], [class~="not-prose"] *))) {
    padding-left: 1rem;
}

.c8v03 :is(:where(blockquote):not(:where([class~="not-prose"], [class~="not-prose"] *))) {
    font-weight: 500;
}

.ceza5 :is(:where(blockquote):not(:where([class~="not-prose"], [class~="not-prose"] *))) {
    font-style: italic;
}

.csh0m :is(:where(blockquote):not(:where([class~="not-prose"], [class~="not-prose"] *))) {
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity));
}

.c14kv :is(:where(strong):not(:where([class~="not-prose"], [class~="not-prose"] *))) {
    font-weight: 500;
}

.cy0yf :is(:where(strong):not(:where([class~="not-prose"], [class~="not-prose"] *))) {
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity));
}

.cnjc3 :is(:where(code):not(:where([class~="not-prose"], [class~="not-prose"] *))) {
    border-radius: 0.25rem;
}

.cye3l :is(:where(code):not(:where([class~="not-prose"], [class~="not-prose"] *))) {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity));
}

.crage :is(:where(code):not(:where([class~="not-prose"], [class~="not-prose"] *))) {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}

.c3zm8 :is(:where(code):not(:where([class~="not-prose"], [class~="not-prose"] *))) {
    padding-top: 0px;
    padding-bottom: 0px;
}

.cyxqf :is(:where(code):not(:where([class~="not-prose"], [class~="not-prose"] *))) {
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
}

.cvnd1 :is(:where(code):not(:where([class~="not-prose"], [class~="not-prose"] *))) {
    font-family: Roboto Mono, monospace;
}

.c8ext :is(:where(code):not(:where([class~="not-prose"], [class~="not-prose"] *))) {
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity));
}

.cxoaf :is(:where(code):not(:where([class~="not-prose"], [class~="not-prose"] *)))::before {
    --tw-content: "";
    content: var(--tw-content);
}

.cp3mj :is(:where(code):not(:where([class~="not-prose"], [class~="not-prose"] *)))::after {
    --tw-content: "";
    content: var(--tw-content);
}

.ctui6 :is(:where(pre):not(:where([class~="not-prose"], [class~="not-prose"] *))) {
    border-width: 1px;
}

.cot66 :is(:where(pre):not(:where([class~="not-prose"], [class~="not-prose"] *))) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity));
}

.c75lq :is(:where(pre):not(:where([class~="not-prose"], [class~="not-prose"] *))) {
    --tw-bg-opacity: 1;
    background-color: rgb(17 24 39 / var(--tw-bg-opacity));
}

@supports (overflow: clip) {
    .cuwej {
        overflow: clip;
    }
}

@media not all and (min-width: 1024px) {
    .cby2r {
        display: none;
    }

    .chndg::before {
        content: var(--tw-content);
        display: none;
    }
}

@media not all and (min-width: 768px) {
    .cwdhk {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border-width: 0;
    }

    .cf4to {
        position: fixed;
    }

    .c5l27 {
        top: 0px;
        bottom: 0px;
    }

    .c4loa {
        left: 0px;
    }

    .cmg8w {
        z-index: 50;
    }

    .ctwym {
        display: none;
    }

    .c2d86 {
        height: 100vh;
    }

    .crnl7 {
        width: 268px;
    }

    .citxu {
        gap: 1.5rem;
    }

    .c5x5x {
        --tw-bg-opacity: 1;
        background-color: rgb(249 250 251 / var(--tw-bg-opacity));
    }
}

@media (max-width: 480px) {
    .cimn0 {
        max-width: 180px;
    }
}

@media (min-width: 480px) {
    .cz62q {
        margin-bottom: 3rem;
    }
}

@media (min-width: 640px) {
    .cu88u {
        grid-column: span 12 / span 12;
    }

    .c6dpm {
        grid-column: span 6 / span 6;
    }

    .cg07b {
        margin-bottom: 0px;
    }

    .c2mml {
        margin-left: unset;
        margin-right: 1rem;
    }

    .cy98b {
        margin-right: 0.5rem;
    }

    .c84kc {
        display: inline;
    }

    .cdj6q {
        display: flex;
    }

    .cwxvv {
        width: 50%;
    }

    .c8slg {
        width: auto;
    }

    .cfq13 {
        min-width: 340px;
    }

    .citj5 {
        max-width: none;
    }

    .cg3qe {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    .c6ai0 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cqtp0 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .c5ivn {
        flex-direction: row;
    }

    .c0ix1 {
        justify-content: center;
    }

    .c73tv > :not([hidden]) ~ :not([hidden]) {
        --tw-space-x-reverse: 0;
        margin-right: calc(1rem * var(--tw-space-x-reverse));
        margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
    }

    .c7yso > :not([hidden]) ~ :not([hidden]) {
        --tw-space-y-reverse: 0;
        margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
        margin-bottom: calc(0px * var(--tw-space-y-reverse));
    }

    .cx5hs {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .ckxmo {
        padding-left: 2.5rem;
    }

    .chpcy::before {
        content: var(--tw-content);
        left: -2.5rem;
    }
}

@media (min-width: 768px) {
    .cs3xx {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border-width: 0;
    }

    .c096b {
        top: 26rem;
    }

    .cwa0a {
        top: 1.5rem;
    }

    .c6aff {
        order: 1;
    }

    .crdm2 {
        order: 10;
    }

    .cae82 {
        order: 11;
    }

    .cl2q4 {
        order: 12;
    }

    .ckkd1 {
        order: 2;
    }

    .cpzdu {
        order: 3;
    }

    .cf4ry {
        order: 4;
    }

    .csukf {
        order: 5;
    }

    .crkjb {
        order: 6;
    }

    .cod63 {
        order: 7;
    }

    .ck058 {
        order: 8;
    }

    .c0idt {
        order: 9;
    }

    .ca8p4 {
        order: 13;
    }

    .cc16l {
        grid-column: span 3 / span 3;
    }

    .cnbr8 {
        margin-left: -1.5rem;
        margin-right: -1.5rem;
    }

    .cdffh {
        margin-bottom: 3rem;
    }

    .ckh15 {
        margin-bottom: 9rem;
    }

    .c36ns {
        margin-bottom: 2rem;
    }

    .cis82 {
        display: block !important;
    }

    .chpvb {
        display: block;
    }

    .cbj0o {
        display: flex;
    }

    .cisbu {
        display: contents;
    }

    .cyv1b {
        display: none;
    }

    .ceuc7 {
        height: 5rem;
    }

    .cg3ls {
        max-width: 42rem;
    }

    .cwx3x {
        max-width: 56rem;
    }

    .cy3ro {
        max-width: none;
    }

    .cctp0 {
        flex-shrink: 0;
    }

    .cppca {
        flex-grow: 1;
    }

    .cs87o {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cx5ni {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .cx5ec {
        justify-content: flex-start;
    }

    .ccund {
        gap: 1.5rem;
    }

    .ctika {
        border-right-width: 1px;
    }

    .c9u6s {
        padding-left: 3rem;
        padding-right: 3rem;
    }

    .c0vez {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .ca3sx {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    .cj4i1 {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    .ck5d4 {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }

    .ce84p {
        padding-bottom: 4rem;
    }

    .ccd2c {
        padding-bottom: 5rem;
    }

    .cbjga {
        padding-bottom: 7rem;
    }

    .cr5gh {
        padding-left: 1.5rem;
    }

    .ctw0e {
        padding-top: 5rem;
    }

    .c71n8 {
        padding-top: 10rem;
    }

    .cnquk {
        text-align: left;
    }

    .cmrh3 {
        font-size: 2.25rem;
        line-height: 1.2777;
        letter-spacing: -0.037em;
    }

    .c9f55 {
        font-size: 3rem;
        line-height: 1.5;
        letter-spacing: -0.037em;
    }

    .cmoad {
        opacity: 1 !important;
    }

    .cjmss::before {
        content: var(--tw-content);
        min-height: 5rem;
    }

    .c5ja2:nth-child(odd) {
        --tw-rotate: -1deg;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    }

    .ctws5:nth-child(even) {
        --tw-rotate: 1deg;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    }

    .codvp:nth-child(odd) .c9tj1 {
        --tw-rotate: -1deg;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    }

    .codvp:nth-child(even) .cy0hv {
        --tw-rotate: 1deg;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    }
}

@media (min-width: 1024px) {
    .cpgwb {
        grid-column: span 2 / span 2;
    }

    .cjouy {
        grid-column: span 4 / span 4;
    }

    .ct3oa {
        display: block;
    }

    .csreq {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .ccywq {
        gap: 2rem;
    }

    .cqta9 {
        padding-left: 3rem;
        padding-right: 3rem;
    }

    .ckuy1 {
        padding-left: 3rem;
    }
}

@media (min-width: 1280px) {
    .cp216 {
        max-width: none;
    }

    .c8in0 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .cwjyc {
        gap: 1.5rem;
    }

    .cde1a :is(:where(blockquote):not(:where([class~="not-prose"], [class~="not-prose"] *))) {
        margin-left: -1rem;
    }
}

.cck0n > * {
    position: relative;
}

.cbrx1 > * {
    margin-left: 0.75rem;
    margin-right: 0.75rem;
}

.cf8cj > * {
    padding: 1.5rem;
}

.cai21 > *::before {
    content: var(--tw-content);
    position: absolute;
}

.cdjdr > *::before {
    content: var(--tw-content);
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity));
}

.ct4ae > *::before {
    content: var(--tw-content);
    background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}

.cow1n > *::before {
    content: var(--tw-content);
    --tw-gradient-from: transparent var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.c5bsq > *::before {
    content: var(--tw-content);
    --tw-gradient-to: rgb(229 231 235 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from),
    #e5e7eb var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.ccfly > *::before {
    content: var(--tw-content);
    block-size: 100%;
}

.crp5p > *::before {
    content: var(--tw-content);
    block-size: 100vh;
}

.c0rmx > *::before {
    content: var(--tw-content);
    inline-size: 1px;
}

.cpdf8 > *::before {
    content: var(--tw-content);
    inset-block-start: 0;
}

.cw82x > *::before {
    content: var(--tw-content);
    inset-inline-start: -1px;
}

.ced8l > *::after {
    content: var(--tw-content);
    position: absolute;
}

.cfmt7 > *::after {
    content: var(--tw-content);
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity));
}

.cf3dk > *::after {
    content: var(--tw-content);
    block-size: 1px;
}

.ckpfk > *::after {
    content: var(--tw-content);
    inline-size: 100vw;
}

.cjhg0 > *::after {
    content: var(--tw-content);
    inset-block-start: -1px;
}

.covse > *::after {
    content: var(--tw-content);
    inset-inline-start: 0;
}

@media (min-width: 768px) {
    .cj4bx > * {
        padding: 2.5rem;
    }

    .c0crf > * {
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }

    .cz0hi > * {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
}

.ckhse > div:first-child {
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
}

.c0c28 > div:first-child {
    padding-top: 1.25rem;
}

@media (min-width: 768px) {
    .c4so7 > div:last-child > div {
        border-style: none;
    }
}

.cdwc1 > div:last-child {
    border-bottom-right-radius: 1rem;
    border-bottom-left-radius: 1rem;
}

.ch8or > div {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity));
}

.cj4iq span {
    opacity: 0;
}

.blog-card-cover {
    width: 100%;
    height: 500px;
    object-position: center;
    border-radius: 1rem;
    object-fit: cover;
}

@media (max-width: 768px) {
    .blog-card-cover {
        object-fit: cover;
        object-position: center;
        border-radius: 1rem;
        width: 100%;
        height: 250px;
    }
}

.pt05 {
    padding-top: 0.5rem;
}

.lable {
    background: rgb(220 233 255 / 50%);
    padding: 0px 10px;
    border-radius: 8px;
    font-size: 12px;
    color: #2563ebc9;
}

.fz8 {
    font-size: 8px;
}

.fz12 {
    font-size: 12px;
}

.plr8 {
    padding-left: 5px;
    padding-right: 5px;

}

.pt10 {
    padding-top: 10px;
}


.dleft {
    display: flex;
    flex-direction: row-reverse;
}

@media (max-width: 768px) {
    .ci34f {
        font-size: 1.2rem;
    }
}

.center {
    text-align: center;
}

@media (max-width: 768px) {
    .c9s5u {
        font-size: 1.5rem;
        line-height: 1.5;
    }
}

/* Pagination container */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

/* Base button */
.pg-btn {
    min-width: 30px;
    height: 30px;
    padding: 0 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    line-height: 1;
    border-radius: 0.5rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    color: #374151;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
    transition: all .15s ease;
    cursor: pointer;
}

/* Hover */
.pg-btn:hover {
    border-color: #93c5fd;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .06);
}

/* Active page */
.pg-btn.active {
    border-color: #3b82f6;
    color: #2563eb;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(37, 99, 235, .15);
}

/* Prev / Next */
.pg-prev,
.pg-next {
    padding: 0 1rem;
}

/* Disabled */
.pg-btn.disabled {
    opacity: .45;
    pointer-events: none;
}

/* Dots */
.pg-dots {
    padding: 0 .25rem;
    color: #9ca3af;
    user-select: none;
}

/* ===============================
   SEARCH OVERLAY (HEADER SEARCH)
================================ */

[x-cloak] {
    display: none !important;
}

/* overlay blur */
.search-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

/* search box */
.search-box {
    display: flex;
    align-items: center;
    width: 90%;
    max-width: 520px;
    padding: 20px;
    gap: 6px;

    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

/* search icon (left) */
.search-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px;
    color: #9ca3af;
}

.search-icon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

/* input */
.search-box input {
    flex: 1;
    outline: none;
    background: transparent;
    padding: 10px 10px;
    font-size: 15px;
    color: #111827;
    border-radius: 6px;
    height: 40px;
}

.search-box input::placeholder {
    color: #9ca3af;
}

/* search button INSIDE box */
.search-btn {
    border: none;
    outline: none;
    cursor: pointer;

    background: #2563eb;
    color: #ffffff;

    padding: 10px 18px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;

    transition: background 0.15s ease, transform 0.1s ease;
}

.search-btn:hover {
    background: #1d4ed8;
}

.search-btn:active {
    transform: translateY(1px);
}

/* header search icon hover */
.c2htu.cgwj6:hover {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 8px;
}

/* mobile full screen */
@media (max-width: 768px) {
    .search-box {
        width: calc(100% - 24px);
        max-width: none;
    }
}

.search-box a {
    white-space: nowrap;
}

@media (max-width: 768px) {

    .search-box {
        padding: 15px;
    }

    /* دکمه جستجو کوچک و کنترل‌شده */
    .search-box a {
        padding: 13px 12px !important;
        font-size: 12px !important;
        line-height: 1.2 !important;
        height: auto !important;
        min-height: unset !important;
        border-radius: 8px !important;
    }

    /* حذف استایل‌های CTA بزرگ قالب */
    .search-box a.cayql {
        box-shadow: none !important;
    }

    /* فلش -> کوچیک‌تر یا حذف */
    .search-box a .cvsu8 {
        font-size: 11px;
        margin-left: 4px;
    }

    /* جلوگیری از گرفتن عرض زیاد */
    .search-box a,
    .search-box span {
        max-width: max-content;
        flex-shrink: 0;
    }

    /* input فضای بیشتری بگیرد */
    .search-box input {
        padding: 10px 8px;
        font-size: 14px;
    }
}

.search-boxsearch-box a {
    padding: 10px 8px;
    font-size: 14px;
}

.cayql-c {
    padding-left: 0.9rem;
    padding-right: 0.9rem;
    padding-top: 10px;
    padding-bottom: 10px;
}

.cgwj6-c {
    background-color: none;
}

.c2htu-c {
    --tw-shadow: none;
}

.pt20 {
    padding-top: 20px;
}

.mt30 {
    margin-top: 30px;
}

.mb16 {
    margin-bottom: 1rem;
}

.pt50 {
    padding-top: 50px;
}

.row-comment {
    display: flex;
    justify-content: space-between;
}

.row-comment {
    display: flex;
    justify-content: space-between;
}

.comment-bg {
    background-color: #ffffff;
    padding: 25px;
    border-radius: 15px;
}

.left {
    text-align: left;
}

.h90 {
    height: 90px;
}

@media (max-width: 768px) {
    .comment-bg {
        padding: 15px;
    }
}

.mb16 {
    margin-bottom: 16px;
}

.reply-commetnt {
    background: #f7faff;
    padding: 15px;
    border-radius: 15px;
}

.m5-5 {
    margin: 5px 5px;
}

/* Related posts carousel */
.related-carousel-wrapper {
    overflow: hidden;
}

.related-carousel {
    display: flex;
    gap: 1.25rem;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding-bottom: 4rem;
}

.related-carousel::-webkit-scrollbar {
    display: none;
}


.related-card {
    flex: 0 0 calc((100% - 2.5rem) / 3);
    max-width: calc((100% - 2.5rem) / 3);
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 5px 10px rgba(0, 0, 0, .06);
}

@media (max-width: 768px) {
    .related-card {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

.related-card img {
    width: 100%;
    height: 250px;
    object-fit: cover;
}

.related-content {
    padding: 14px;
}

.related-tag {
    background: rgb(220 233 255 / 50%);
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 12px;
    color: #2563ebc9;
    line-height: 2.7;
}

.related-title {
    font-size: 20px !important;
    font-weight: 600;
    margin-bottom: 6px;
}

.related-excerpt {
    font-size: 16px;
    color: #6b7280;
    line-height: 2.2;
}

/* Controls */
.carousel-btn {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgb(220 233 255 / 50%);
    border: none;
    font-size: 20px;
    cursor: pointer;
}

.d-flexsb {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mtb {
    margin: 8px 0px;
}

.blog-share {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    flex-direction: row;
}

.share-label {
    font-size: 14px;
    color: #6b7280;
}

.share-icons {
    display: flex;
    gap: .5rem;
}

.share-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgb(220 233 255 / 50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .25s ease;
}

.share-btn svg {
    width: 18px;
    height: 18px;
    fill: #374151;
}

.share-btn:hover {
    background: #2563eb;
}


/* Mobile */
@media (max-width: 768px) {
    .blog-share {
        flex-direction: row;
        align-items: center;
        display: flex;
    }
}

.center {
    text-align: center;
}

.cza7u {
    margin-right: 1rem;
    margin-left: unset;
}

.c2eey {
    margin-right: unset;
    margin-left: 0.75rem;
}

.cf22q {
    margin-right: unset;
    margin-left: 0.5rem;
}

.fs27 {
    font-size: 27px !important;
}

.left {
    left: 1.25rem;
}

/* Blog-only layer (هم‌خانواده با قالب: radius نرم + سایه لطیف + حس شیشه‌ای) */
.blog-page {
    padding: 3rem 0
}

.blog-container {
    max-width: 90rem;
    margin: 0 auto;
}

.blog-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap
}

.blog-breadcrumb {
    display: flex;
    gap: .5rem;
    align-items: center;
    font-size: .875rem;
    color: #6b7280
}

.blog-breadcrumb a {
    color: inherit;
    text-decoration: none
}

.blog-breadcrumb a:hover {
    color: #111827
}

.blog-hero {
    margin-top: 1.25rem;
    border-radius: 1rem;
    border: 1px solid rgba(229, 231, 235, .9);
    background: rgba(255, 255, 255, .72);
    backdrop-filter: blur(10px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .06);
    padding: 1.25rem
}

.blog-hero .kicker {
    font-size: .875rem;
    color: #6b7280
}

.blog-hero h1 {
    margin: .4rem 0 .6rem;
    font-weight: 700;
    color: #111827;
    font-size: 1.6rem;
    line-height: 1.35
}

.blog-hero p {
    margin: 0;
    color: #374151;
    max-width: 46rem;
    line-height: 1.9
}

.blog-hero-meta {
    margin-top: 1rem;
    display: flex;
    gap: .6rem;
    flex-wrap: wrap
}

.blog-pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border: 1px solid rgba(229, 231, 235, .9);
    background: rgba(255, 255, 255, .8);
    border-radius: .75rem;
    padding: .35rem .6rem;
    font-size: .8rem;
    color: #374151
}

.blog-pill b {
    font-weight: 600;
    color: #111827
}

.blog-layout {
    margin-top: 1.25rem;
    display: grid;
    grid-template-columns:1fr;
    gap: 1rem
}

@media (min-width: 1024px) {
    .blog-layout {
        grid-template-columns:1fr 25rem;
        gap: .8rem
    }
}

.blog-toolbar {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between
}

.blog-search {
    flex: 1;
    min-width: 16rem;
    position: relative
}

.blog-search input {
    width: 100%;
    border: 1px solid #e5e7eb;
    border-radius: .75rem;
    padding: .7rem 2.6rem .7rem .9rem;
    font-size: .9rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
    outline: none
}

.blog-search input:focus {
    /*border-color: rgb(147 197 253)*/
}

.blog-search svg {
    position: absolute;
    right: .8rem;
    top: 50%;
    transform: translateY(-50%);
    opacity: .55
}

.blog-sort {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap
}

.blog-sort a {
    border: 1px solid rgba(229, 231, 235, .95);
    background: rgba(255, 255, 255, .75);
    border-radius: .75rem;
    padding: .55rem .7rem;
    font-size: .75rem;
    color: #374151;
    text-decoration: none
}

.blog-sort a:hover {
    color: #111827
}

.blog-sort a.is-active {
    border-color: rgb(147 197 253);
    color: #111827;
}

.blog-grid {
    margin-top: 1rem;
    display: grid;
    grid-template-columns:1fr;
    gap: 1rem
}

@media (min-width: 768px) {
    .blog-grid {
        grid-template-columns:repeat(2, 1fr)
    }
}

.blog-card {
    border-radius: 1rem;
    border: 1px solid rgba(229, 231, 235, .9);
    background: rgba(255, 255, 255, .82);
    overflow: hidden;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .05);
    transition: transform .15s ease, box-shadow .15s ease
}

.blog-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(0, 0, 0, .08)
}

.blog-thumb {
    aspect-ratio: 16/9;
    background: #f3f4f6;
    position: relative;
    overflow: hidden
}

.blog-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.blog-badge {
    position: absolute;
    right: .8rem;
    bottom: .8rem;
    border-radius: .75rem;
    background: rgba(17, 24, 39, .78);
    color: #fff;
    font-size: .78rem;
    padding: .35rem .6rem;
    backdrop-filter: blur(8px)
}

.blog-body {
    padding: 1rem
}

.blog-meta {
    display: flex;
    gap: 1.2rem;
    flex-wrap: wrap;
    align-items: center;
    font-size: 14px;
    color: #a1a1a1;
    padding: 7px 0px 2px 0px;
}

.blog-meta .dot {
    width: .25rem;
    height: .25rem;
    border-radius: 999px;
    background: #d1d5db
}

.blog-title {
    margin: .55rem 0 .5rem;
    font-weight: 650;
    color: rgb(55 65 81 / var(--tw-text-opacity));
    font-size: 23px !important;
    line-height: 1.8;
}

.blog-excerpt {
    margin: 0;
    color: #6b7280;
    line-height: 2.2;
    font-size: 16px;
}


.blog-save {
    border: 1px solid rgba(229, 231, 235, .95);
    background: rgba(255, 255, 255, .85);
    border-radius: .75rem;
    padding: .45rem .55rem;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .85rem;
    color: #374151
}

.blog-save:hover {
    color: #111827
}

.blog-side {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 29%;
}


.blog-side1 {
    display: flex;
    flex-direction: column;
    gap: .8rem;
    width: 100%;
}

.blog-box {
    border-radius: 1rem;
    border: 1px solid rgba(229, 231, 235, .9);
    background: rgba(255, 255, 255, .75);
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .05);
    padding: 1rem
}

.blog-box h3 {
    margin: 0 0 .75rem;
    font-size: 1rem;
    color: rgb(31 41 55 / var(--tw-text-opacity));
    font-weight: 600
}

.blog-cats {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem
}

.blog-tag {
    border: 1px solid rgba(229, 231, 235, .95);
    background: rgba(255, 255, 255, .85);
    border-radius: 8px;
    padding: .45rem .6rem;
    font-size: .75rem;
    color: #374151;
    text-decoration: none
}

.blog-tag:hover {
    color: #111827;
    border-color: rgb(147 197 253)
}

.blog-tag.is-active {
    border-color: rgb(147 197 253);
    color: #111827
}

.blog-mini {
    display: flex;
    gap: .75rem;
    align-items: center;
}

.blog-mini .ph {
    width: 4.2rem;
    height: 3.1rem;
    border-radius: 8px;
    background: #f3f4f6;
    flex: 0 0 auto;
    overflow: hidden
}

.blog-mini .ph img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.blog-mini a {
    color: rgb(55 65 81 / var(--tw-text-opacity)) !important;
    text-decoration: none;
    font-weight: 500;
    line-height: 1.7;
    font-size: .9rem
}

.blog-mini a:hover {
    color:: rgb(49 53 61) !important;
}

.blog-mini .sub {
    margin-top: .15rem;
    font-size: .8rem;
    color: #6b7280
}

.blog-pagination {
    margin: 1.25rem;
    display: flex;
    justify-content: center;
    gap: .5rem;
    flex-wrap: wrap
}


.blog-thumb {
    position: relative;
    overflow: hidden;
}

.blog-label {
    position: absolute;
    bottom: .5rem;
    right: .5rem;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    padding: 7px;
    font-size: .75rem;
    line-height: 1;
    border-radius: 5px;
    background: rgb(220 233 255 / 40%);
    color: #ffffffc9;
    backdrop-filter: blur(8px);
    text-decoration: none;
}


.p7 {
    padding: 7px 0px 2px 0px;
}


.account-page {
    padding: 2.5rem 0;
}

.account-side {
    border: 1px solid #e5e7eb;
    border-radius: 1rem;
    padding: 1.5rem;
    background: #fff;
}

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

.account-avatar {
    height: 70px;
    margin: 0 auto;
}

.account-name {
    margin: 1rem 0 .2rem;
    font-size: 1rem;
}

.account-role {
    font-size: .85rem;
    color: #6b7280;
}

.account-menu {
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.account-menu a {
    padding: .55rem .75rem;
    border-radius: .6rem;
    color: #374151;
    text-decoration: none;
}

.account-menu a.is-active {
    background: #eff6ff;
    color: #2563eb;
}

.account-menu a.logout {
    color: #dc2626;
}

.account-main {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.account-stats {
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    gap: 1rem;
}

.account-stat {
    /*border-radius: .9rem;*/
    padding: 1rem;
    background: #fff;
}

.account-stat span {
    font-size: .8rem;
    color: #6b7280;
}

.account-stat strong {
    display: block;
    margin-top: .3rem;
}


.muted {
    color: #6b7280;
    font-size: .85rem;
}

.btn-primary {
    display: inline-block;
    margin-top: .8rem;
    padding: .55rem 1rem;
    border-radius: .6rem;
    background: #2563eb;
    color: #fff;
    text-decoration: none;
}

/* =====================
   Account Responsive
   ===================== */

@media (max-width: 1024px) {
    .account-container {
        grid-template-columns:1fr;
    }

    .account-side {
        order: -1;
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
}

@media (max-width: 768px) {

    .account-page {
        padding: 1.25rem 0;
    }

    /* User card */
    .account-user {
        display: flex;
        align-items: center;
        gap: .75rem;
        text-align: right;
    }

    .account-avatar {
        height: 60px;
        margin: 0;
        flex-shrink: 0;
    }

    .account-name {
        margin: 0;
        font-size: .95rem;
    }

    .account-role {
        font-size: .75rem;
    }

    /* Menu → horizontal scroll */
    .account-menu {
        flex-direction: row;
        overflow-x: auto;
        padding-bottom: .25rem;
    }

    .account-menu a {
        white-space: nowrap;
        font-size: .85rem;
    }

    .account-menu::-webkit-scrollbar {
        display: none;
    }

    /* Stats */
    .account-stats {
        grid-template-columns:1fr;
    }

    .account-stat {
        padding: .8rem;
    }

    .account-stat strong {
        font-size: 0.85rem;
    }

    .btn-primary {
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 480px) {

    .account-container {
        gap: 1rem;
    }

    .account-side {
        padding: 1rem;
    }

    .account-main {
        gap: 1rem;
    }

    .account-card h4 {
        font-size: .95rem;
    }

    .muted {
        font-size: .8rem;
    }
}

.account-container {
    width: 100%;
}

.account-side, .account-main {
    min-width: 0;
}

.account-menu {
    min-width: 0;
    max-width: 100%;
    font-size: 0.875rem;
}

/* ===== Premium License Card ===== */
.account-card {
    position: relative;
    /*background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);*/
    background: #fff;
    border-radius: 20px;
    padding: 1.75rem;
    box-shadow: 0 20px 40px rgba(15, 23, 42, .08),
    0 8px 16px rgba(15, 23, 42, .05);
    border: 1px solid rgba(229, 231, 235, .9);
    overflow: hidden;
}


.mt20 {
    margin-top: 20px;
}

/* subtle accent */
.account-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(600px 120px at top right,
    rgba(59, 130, 246, .08),
    transparent 60%);
    pointer-events: none;
    border-radius: 1rem;
}

/* Header */
.account-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .75rem;
}

/* Status badge */
.badge {
    font-size: .7rem;
    padding: .3rem .7rem;
    border-radius: 999px;
    font-weight: 500;
    backdrop-filter: blur(6px);
}

.badge.active {
    background: rgba(16, 185, 129, .15);
    color: #047857;
    border: 1px solid rgba(16, 185, 129, .25);
}

/* More button */
.account-card .more {
    background: rgba(0, 0, 0, .04);
    border: none;
    width: 34px;
    height: 34px;
    border-radius: .75rem;
    cursor: pointer;
    font-size: 1.1rem;
    color: #475569;
    transition: .2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.account-card .more:hover {
    background: rgba(0, 0, 0, .08);
}

/* Title */
.account-card h3 {
    margin: 1rem 0;
    font-weight: 600;
    font-size: 18px !important;
}

/* Meta box */
.license-meta {
    display: flex;
    gap: .6rem;
    padding: 1rem;
    border-radius: 10px;
    background: linear-gradient(180deg, #f8fafc, #f1f5f9);
    border: 1px dashed #e5e7eb;
    margin: auto;
    justify-content: space-between;
}

/* CTA wrapper */
.account-card .c0ix1 {
    padding: 0;
}

/* Meta items */
.license-meta .muted {
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: .82rem;
    color: #475569;
}

.license-meta .muted::before {
    content: "•";
    color: #3b82f6;
    margin-left: .4rem;
}

@media (max-width: 768px) {

    .license-meta {
        display: flex;
        flex-direction: column;
        gap: .9rem;
        padding: .75rem .25rem;
        background: none;
        border: none;
    }

    .license-meta .muted {
        position: relative;
        padding-right: 1.25rem;
        font-size: .85rem;
        color: #475569;
        line-height: 1.6;
        background: none;
        border: none;
    }

    /* vertical soft line */
    .license-meta .muted::before {
        content: "";
        position: absolute;
        right: 0;
        top: .35rem;
        width: 3px;
        height: 70%;
        border-radius: 999px;
        background: linear-gradient(
                180deg,
                rgba(59, 130, 246, .55),
                rgba(59, 130, 246, .15));
    }
}

.account-stats {
    display: flex;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: .75rem;
    overflow: hidden;
    padding: 12px 0px;
    align-items: center;
}

.account-stat {
    flex: 1;
    text-align: center;
}

.account-stat:not(:last-child) {
    border-left: 1px solid #e5e7eb !important;
}

.account-stat span {
    display: block;
    font-size: .75rem;
    color: #6b7280;
    margin-bottom: .35rem;
}

.account-stat strong {
    font-size: .95rem;
    font-weight: 700;
    color: #111827;
}

@media (max-width: 768px) {
    .account-stat strong {
        font-size: .8rem;
    }
}

/* فقط همون سبز ظریف مثل عکس */
.account-stat:first-child span {
    color: #16a34a;
}


display: flex

;
justify-content: space-between

;
align-items: center

;
text-align: right

;
padding:

1
rem

;
flex-direction: column

;

.account-stat:not(:last-child) {
    border-left: none;
    /*border-bottom: 1px solid #e5e7eb;*/
}

}

.more-wrap {
    position: relative;
    z-index: 2;
}

.account-card .license-meta > .muted {
    position: relative;
    padding-right: 1.25rem;
    line-height: 1.6;
}

.account-card .license-meta > .muted::before {
    content: "";
    position: absolute;
    right: 0;
    top: .35rem;
    width: 3px;
    height: 70%;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(59, 130, 246, .55), rgba(59, 130, 246, .15));
}

.account-card .license-meta > .muted::before {
}

@media (max-width: 768px) {
    .account-card .license-meta {
        display: flex;
        flex-direction: column;
        gap: .9rem;
        padding: .75rem 0;
        background: none;
        border: none;
    }
}

.license-item {
    padding: 27px 0;
}

.license-item + .license-item {
    border-top: 1px solid #e5e7eb;
}

.badge {
    font-size: .7rem;
    padding: 8px;
    border-radius: 8px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    border: 1px solid transparent;
}

.badge.active {
    background: rgba(16, 185, 129, .12);
    color: #047857;
    border-color: rgba(16, 185, 129, .25);
}

.badge.pending {
    background: rgba(234, 179, 8, .15);
    color: #92400e;
    border-color: rgba(234, 179, 8, .35);
}

.badge.inactive {
    background: rgba(239, 68, 68, .12);
    color: #b91c1c;
    border-color: rgba(239, 68, 68, .35);
}

/* وقتی بیش از 3 لایسنس داریم */
.licenses-list.is-scrollable {
    max-height: 520px; /* دسکتاپ */
    overflow-y: auto;
    scrollbar-gutter: stable;
}

@media (max-width: 768px) {
    .licenses-list.is-scrollable {
        max-height: 65vh;
    }
}

.licenses-list.is-scrollable::-webkit-scrollbar {
    width: 3px;
}

.licenses-list.is-scrollable::-webkit-scrollbar-track {
    background: transparent;
}

.licenses-list.is-scrollable::-webkit-scrollbar-thumb {
    background: rgba(59, 130, 246, .35);
    border-radius: 5px;
}

.licenses-list.is-scrollable::-webkit-scrollbar-thumb:hover {
    background: rgba(59, 130, 246, .55);
}

.licenses-list.is-scrollable {
    scrollbar-width: thin;
    scrollbar-color: rgba(59, 130, 246, .45) transparent;
}


/* Scrollable licenses list */
.licenses-list.is-scrollable {
    max-height: 520px;
    overflow-y: auto;
    scrollbar-gutter: stable;

    /* Firefox */
    scrollbar-width: none;
}

/* WebKit (Chrome, Edge, Safari) */
.licenses-list.is-scrollable::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.licenses-wrap {
    position: relative;
}

/* bottom black gradient – FIXED */
.licenses-wrap::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 0 0 13px 13px;
    height: 40px;
    background: linear-gradient(
            to top,
            rgba(0, 0, 0, .08),
            rgba(0, 0, 0, 0)
    );

    pointer-events: none;
}

.licenses-wrap:not(.has-scroll)::after {
    display: none;
}

.account-tab {
    display: none;
}

.account-tab.is-active {
    display: block;
}


/* base tab state */
.account-tab {
    display: none;
    opacity: 0;
    transform: translateY(10px);
}

.account-tab.is-active {
    display: block;
    animation: tabFade .45s cubic-bezier(.22, .61, .36, 1) forwards;
}

@keyframes tabFade {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

animation:tabFade

.6
s
cubic-bezier

(
.22
,
.61
,
.36
,
1
)
forwards

;
/* container */
.license-details {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e5e7eb;
    display: none;
}

.license-item.is-open .license-details {
    display: block;
}


/* ===== GRID ===== */
.license-grid {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

@media (max-width: 768px) {
    .license-grid {
        grid-template-columns:1fr;
    }
}

.license-box h4 {
    font-size: .85rem;
    margin-bottom: .5rem;
}


/* به‌صورت پیش‌فرض مخفی */
.license-item .license-details {
    display: none;
}

/* فقط وقتی آیتم باز است */
.license-item.is-open .license-details {
    display: block;
}

.license-details {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e5e7eb;
    display: none;
}

.license-item.is-open .license-details {
    display: block;
}

.license-box {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: .85rem;
    padding: 1rem;
}

.license-box h4 {
    font-size: .85rem;
    font-weight: 600;
    margin-bottom: .75rem;
    padding-bottom: .5rem;
    border-bottom: 1px dashed #e5e7eb;
    color: #111827;
}

.kv-list {
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.kv-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .8rem;
}

.kv-list span {
    color: #6b7280;
}

.kv-list strong {
    font-weight: 500;
    color: #111827;
}

.ok {
    color: #16a34a;
    font-weight: 600;
}

.btn-outline {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-top: .75rem;
    padding: .45rem .75rem;
    font-size: .75rem;
    border-radius: .6rem;
    border: 1px solid #e5e7eb;
    transition: .15s ease;
}

.btn-outline:hover {
    background: #f9fafb;
}

.btn-outline.full {
    width: 100%;
}

.license-alert {
    padding: .75rem 1rem;
    border-radius: .75rem;
    font-size: .8rem;
    line-height: 1.5;
}

.license-alert.warning {
    background: #fff7ed;
    color: #9a3412;
    border: 1px solid #fed7aa;
}

/* header */
.support-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
}

.support-head h3 {
    font-size: 1.2rem !important;
    font-weight: 600;
}

.support-head .muted {
    font-size: .8rem;
}

/* table */
.support-table {
    width: 100%;
    text-align: center;
    background: #fbfcfe;
    border: 1px solid #eef2f7;
    border-radius: 16px;
    padding: 18px;
}

.support-row {
    display: grid;
    grid-template-columns: 50px 1.4fr 1.6fr 140px 80px 110px 110px 140px 90px;
    align-items: center;
    gap: 10px;
    padding: 20px 0;
    border-bottom: 1px solid #e5e7eb;
    font-size: .85rem;
    color: #374151;
    justify-content: stretch;
    /*justify-items: center;*/
}


.support-header {
    font-weight: 600;
    color: #374151;
    border-bottom: 1px solid #d1d5db;
    border-radius: 10px;

}

.support-row:last-child {
    border-bottom: none;
}

/* status */
.ticket-status {
    font-size: .75rem;
    display: inline-block;
    text-align: center;
}

/* در انتظار پاسخ */
.ticket-status.pending {
    color: #9a3412;
    font-weight: 500;
}

/* پاسخ داده شده */
.ticket-status.answered {
    color: #3b82f6;
    font-weight: 500;
}

/* بسته شده */
.ticket-status.closed {
    color: #9b9b9b;
    font-weight: 500;
}

/* تایید شده / حل شده */
.ticket-status.resolved {
    color: #047857;
    font-weight: 500;
}


.btn-primary {
    font-size: .75rem;
    padding: .45rem .8rem;
    border-radius: .6rem;
    background: #2563eb;
    color: #fff;
}

@media (max-width: 768px) {

    .dashbord-support-row.support-header {
        display: none;
    }

    /* حذف هدر جدول */
    .support-header {
        display: none;
    }

    /* هر ردیف = کارت */
    .support-row {
        grid-template-columns:1fr;
        gap: .5rem;
        padding: 1rem;
        margin-bottom: .75rem;
        border: 1px solid #e5e7eb;
        border-radius: .75rem;
        background: #fff;
        font-weight: 400;
    }

    /* label / value layout */
    .support-row span {
        display: flex;
        font-size: .8rem;
        padding: 1px 0px;
        justify-content: space-between;
    }

    .support-row span:nth-child(1)::before {
        content: "شناسه";
    }

    /* موضوع */
    .support-row span:nth-child(2)::before {
        content: "موضوع";
    }

    /* محصول */
    .support-row span:nth-child(3)::before {
        content: "محصول";
    }

    /* واحد */
    .support-row span:nth-child(4)::before {
        content: "واحد";
    }

    /* اولویت */
    .support-row span:nth-child(5)::before {
        content: "اولویت";
    }

    /* تاریخ ثبت */
    .support-row span:nth-child(6)::before {
        content: "تاریخ ثبت";
    }

    /* آخرین پاسخ */
    .support-row span:nth-child(7)::before {
        content: "آخرین پاسخ";
    }

    /* وضعیت */
    .support-row span:nth-child(8)::before {
        content: "وضعیت";
    }


    .support-row span::before {
        color: #6b7280;
        font-size: .75rem;
    }

    /* وضعیت */
    .ticket-status {
        align-self: flex-start;
    }


}

@media (max-width: 768px) {

    /* فقط داخل تب پشتیبانی */
    .account-tab[data-tab-content="support"]
    .support-head > a {

        width: 36px;
        height: 36px;
        padding: 0;
        border-radius: 10px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* مخفی کردن متن */
    .account-tab[data-tab-content="support"]
    .support-head > a span {
        display: none;
    }

    /* افزودن علامت + */
    .account-tab[data-tab-content="support"]
    .support-head > a::before {
        content: "+";
        font-size: 1.4rem;
        font-weight: 500;
        line-height: 1;
    }
}

.tx {
    text-align: center;
}


.revenue-info {
    padding: 3rem 3rem 3rem 0rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /*align-items: flex-start;*/
}


@media (max-width: 768px) {
    .revenue-info {
        padding: 2rem .5rem 0rem .5rem;
    }

    .checkout-edit-btn {
        padding: 0 10px 0 0;
    }

    .alvand-cart-sidebar-title {
        font-size: 16px;
        font-weight: 500;
    }
}


.revenue-badge {
    display: inline-flex;
    align-self: flex-start;
    font-size: .75rem;
    padding: .25rem .6rem;
    border-radius: 999px;
    background: #ffffff;
    color: #3980f5;
    margin-bottom: 1rem;
}


.revenue-title {
    font-size: 1.9rem;
    line-height: 1.45;
    margin-bottom: 1.25rem;
    font-weight: 600;
}

@media (max-width: 768px) {
    .revenue-title {
        font-size: 1.3rem !important;
    }
}

.revenue-desc {
    font-size: 16px !important;
    color: #6b7280;
    max-width: 600px;
    font-size: 1rem;
    line-height: 1.9;
    margin-bottom: 2rem;
    text-align: justify;
}

.revenue-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .85rem;
    font-weight: 500;
    background: #ffffff;
    border-radius: 45px;
    padding: 10px;
}

.activity-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.activity-header h3 {
    font-size: 1.05rem;
    font-weight: 600;
}

.profit {
    font-size: .85rem;
    color: #6b7280;
}

.profit.negative {
    color: #ef4444;
}

/* Activity List */
.activity-stream {
    display: flex;
    flex-direction: column;
    gap: .35rem; /* فاصله دقیق آیتم‌ها */
    /*margin-top:.5rem;*/
}

.activity-item {
    display: grid;
    grid-template-columns:1fr auto auto;
    gap: .75rem;
    padding: .65rem .75rem;
    background: #f3f4f6;
    border-radius: .5rem;
    font-size: .8rem;
    align-items: center;


}

.activity-item .label {
    font-weight: 500;
}

.activity-item .date {
    color: #6b7280;
    font-size: .75rem;
}

.activity-item .amount {
    font-weight: 500;
}

.activity-item.positive .amount {
    color: #16a34a;
}

/* OUTER WRAPPER (کل سکشن) */
.revenue-wrapper {
    background: #e5e7eb82;
    border-radius: 1rem;
    padding: .5rem;
    min-height: 470px;
    display: flex;
    align-items: center;
}

/* Grid داخل باکس */
.revenue-grid {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 3rem; /* فاصله واقعی مثل نمونه */
    width: 100%;
    align-items: stretch;
}

@media (max-width: 768px) {
    .revenue-grid {
        grid-template-columns:1fr;
    }
}


/* Right */
.activity-card {
    background: #f9fafb;
    border-radius: .8rem;
    padding: 1.5rem;
    height: 452px;
}


@media (max-width: 768px) {
    .dn-mob {
        display: none !important;
    }
}

.c4a2s1 {
    display: flex;
    flex-direction: row;
    align-items: center !important;
}

.activity-mask {
    overflow: hidden;
    height: 360px; /* مناسب 8 آیتم */
}

.activity-stream.stack {
    display: flex;
    flex-direction: column;
    /*gap:.7rem;*/
}

.activity-item {
    opacity: 0;
    transform: translateY(-14px) scale(.985);
    will-change: transform, opacity;
}

/* خنثی‌سازی overflow والدهای قالب */
.blog-rail-safe {
    overflow: visible !important;
}

/* wrapper محافظ */
.blog-rail-wrapper {
    overflow: visible;
    position: relative;
}

/* rail (Fix: استانداردسازی اسکرول برای موبایل در حالت RTL) */
.blog-rail {
    display: flex;

    /* فاصله عمداً صفر است؛ فاصله از padding کارت‌ها می‌آید */
    gap: 0;

    /* Fix اصلی */
    direction: ltr; /* اسکرول افقی همیشه یکسان */
    overflow-x: auto;
    overflow-y: hidden;

    padding-bottom: .5rem;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory; /* اختیاری */
}

.blog-rail::-webkit-scrollbar {
    display: none;
}

/* کارت‌ها */
.blog-rail-item {
    direction: rtl;

    /* 🖥️ دسکتاپ: 3 کارت */
    flex: 0 0 calc(100% / 3);

    display: flex;
    flex-direction: column;
    gap: .6rem;

    /* فاصله استاندارد بین کارت‌ها (برای وسط‌افتادن بردر) */
    padding-right: 1.25rem;
    padding-left: 1.25rem;

    border-right: 1px solid transparent;
    border-image: linear-gradient(
            to bottom,
            transparent 0%,
            #e5e7eb 40%,
            #e5e7eb 60%,
            transparent 100%
    ) 1;

    scroll-snap-align: start;
}

.blog-rail-item:last-child {
    border-right: none;
}

/* 📱 موبایل: 1.5 کارت */
@media (max-width: 768px) {
    .blog-rail-item {
        flex: 0 0 calc(100% / 1);
    }

}

/* تصویر */
.blog-rail-thumb {
    width: 100%;
    height: 270px;
    border-radius: 15px;
    object-fit: cover;
}

/* متا */
.blog-rail-meta {
    font-size: .75rem;
    color: #6b7280;
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: 7px 0px 2px 0px;
}

.blog-rail-tag {
    font-size: .65rem;
    font-weight: 500;
    color: #2563ebc9;
    padding: 3px 7px;
    background: rgb(220 233 255 / 50%);
    border-radius: 5px;
}

/* خلاصه */
.blog-rail-excerpt {
    font-size: .920rem;
    line-height: 1.9;
    color: #374151;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-align: justify;
}

/* هدر */
.detail-header-blog {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* کارت باید مرجع position باشد */
.blog-rail-item {
    position: relative;
}

/* لینک سراسری کارت */
.blog-card-link {
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* تمام محتوای کارت کلیک را عبور می‌دهد */
.blog-rail-item > *:not(.blog-card-link) {
    pointer-events: none;
}

/* فقط این‌ها کلیک مستقل دارند */
.blog-rail-tag {
    pointer-events: auto;
    position: relative;
    z-index: 2;
}


.pr0 {
    padding-right: 0;
}

.pl0 {
    padding-left: 0;
}


.container_container__18uat {
    max-width: var(--container);
    margin: auto;
    position: relative;
    padding: 0 var(--container-sides-px)
}

.container_container__18uat {
    max-width: 100%
}

.feature-desc {
    max-height: 0;
    opacity: 0;
    transition: max-height 450ms ease,
    opacity 250ms ease;
}


@media (max-width: 1024px) {
    .container_container__18uat {
        max-width: 100%
    }
}


/* ===========================
Mobile-only overrides
=========================== */
@media (max-width: 767px) {

    /* 1) کل سکشن: دیگه ارتفاع 3600px نخوره و sticky خاموش بشه */
    .scroll-features-container {
        height: auto !important;
        min-height: auto !important;
    }

    /* 2) هر چیزی که sticky و h-dvh گرفته، تو موبایل معمولی بشه */
    .scroll-features-container .sticky {
        position: relative !important;
        top: auto !important;
        height: auto !important;
        min-height: auto !important;
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }

    /* 3) فلکس دو ستونه تو موبایل ستونی بشه */
    .scroll-features-container .sticky > .flex {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 16px !important;
    }

    /* 4) ستون‌ها (md:w-1/2) در موبایل فول‌ویدث */
    .scroll-features-container .md\:w-1\/2 {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
    }

    /* 5) پنل تصویر سمت راست: اولویت با نمایش درست و ریسپانسیو */
    .scroll-features-container .md\:w-1\/2:last-child {
        order: 2 !important;
    }

    /* 6) لایه‌های تصویر (div های background-image) ارتفاع مناسب بگیرن */
    .scroll-features-container [style*="background-image"] {
        width: 100% !important;
        min-height: 240px !important;
        height: 240px !important;
        background-size: contain !important;
        background-position: center !important;
    }

    /* 7) لیست استپ‌ها زیرش بیاد و فاصله‌ها کم بشه */
    .scroll-features-container .md\:w-1\/2:first-child {
        order: 1 !important;
    }

    /* 8) کارت‌های سمت چپ: پدینگ و گردی و بوردر */
    .scroll-features-container [data-active] {
        border-radius: 16px !important;
        padding: 14px !important;
    }

    /* 9) تیترها: سایز مناسب موبایل */
    .scroll-features-container [data-active] h3 {
        font-size: 16px !important;
        line-height: 1.4 !important;
    }

    /* 10) متن زیر عنوان: چون تو HTML بعضی‌ها h-0 دارن،
           تو موبایل اجازه بده متن با اندازه طبیعی نمایش داده بشه
           (صرفاً CSS ریسپانسیو؛ بدون درگیر شدن با JS) */
    .scroll-features-container [data-active] .overflow-hidden.transition-height {
        height: auto !important; /* اگر h-0 باشد این override لازم است */
        max-height: none !important; /* محدودیت برداشته شود */
        opacity: 1 !important;
    }

    /* 11) نوار progress کناری: تو موبایل بهتره یا حذف شود یا افقی شود
           اینجا مخفیش می‌کنیم تا لایه بهم نریزد */
    .scroll-features-container [data-progress-bar="true"],
    .scroll-features-container .w-\[4px\] {
        display: none !important;
    }

    /* 12) فاصله کانتینر (اگر container کلاس دارد) */
    .scroll-features-container.container,
    .scroll-features-container .container_container__18uat {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* 13) جلوگیری از اسکرول افقی ناخواسته */
    .scroll-features-container,
    .scroll-features-container * {
        max-width: 100%;
    }
}

.bg-section {
    background: #000;
    border-radius: 1.5rem;
    width: 95%;
    margin: auto;
}
.bg-dark{
    background: #000;
}
.bg-dark1{
    background-color: #19191a;
}
.text-dark{
    color: #fff;
}
article.bg-neutral-900 a {
    color: gray;
}

.article-btn-f {
    display: flex;
    flex-direction: row-reverse;
}

/* لایه سایه گرادینتی */
.image-gradient-shadow {
    position: absolute;
    inset: 0;
    z-index: 0;

    background: conic-gradient(
            from var(--from-angle),
            #ef4444,
            #f97316,
            #eab308,
            #22c55e,
            #3b82f6,
            #6366f1,
            #a855f7,
            #ef4444
    );

    opacity: .22;
    filter: blur(18px);
    transform: scale(1.08);
    pointer-events: none;
}

/* خود استیج تصویر دقیقاً مثل قبل */
.image-stage {
    position: relative;
    z-index: 1;
}

/* لایه‌های تصویر */
.image-stack > div {
    z-index: 1;
}

.pb-0 {
    padding-bottom: 0px !important;
}

/* Grid background – ultra subtle */
.grid-overlay-light {
    background-image: linear-gradient(to right, rgba(0, 0, 0, .04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 0, 0, .04) 1px, transparent 1px);
    background-size: 140px 140px;
    mask-image: radial-gradient(circle at center, black 35%, transparent 75%);
}

/* =========================
   VIDEO LAYER
========================= */
.frame-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;

    opacity: 0;
    pointer-events: none;
    transition: opacity 450ms ease;
}

.frame-video.active {
    opacity: 1;
    pointer-events: auto;
}

/* =========================
   GLASS FRAME
========================= */
.glass-frame {
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(22px) saturate(140%);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    box-shadow: 0 40px 120px rgba(0, 0, 0, 0.18),
    inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

/* =========================
   BLUE BLOBS
========================= */
.glass-blobs {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
}

.blob {
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .55;
    background: radial-gradient(
            circle at center,
            rgba(96, 165, 250, .65),
            rgba(96, 165, 250, .15),
            transparent 70%
    );
}

/* Blob positions */
.blob-1 {
    top: -140px;
    left: -120px;
}

.blob-2 {
    bottom: -160px;
    right: -140px;
}

.blob-3 {
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 360px;
    height: 360px;
    opacity: .35;
}

/* =========================
   TABS (Clickable + Clear)
========================= */
.frame-tab {
    display: inline-flex;
    align-items: center;
    gap: .5rem;

    font-size: .8rem;
    padding: .55rem 1.1rem;
    border-radius: .5rem;

    color: #525252;
    background: rgb(255 255 255 / 3%);
    border: 1px solid rgba(0, 0, 0, 0.06);

    cursor: pointer;
    transition: background .25s ease,
    border-color .25s ease,
    color .25s ease,
    transform .15s ease;
}

.frame-tab svg {
    width: 16px;
    height: 16px;
    stroke-width: 1.6;
    flex-shrink: 0;
    opacity: .75;
}

/* Hover → affordance */
.frame-tab:hover {
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.12);
    color: #111827;
    transform: translateY(-1px);
}

.frame-tab:hover svg {
    opacity: 1;
}

/* Active → dominant */
.frame-tab.active-tab {
    background: #111827;
    color: #ffffff;
    border-color: #111827;
}

.frame-tab.active-tab svg {
    opacity: 1;
}

/* =========================
   MOBILE TUNING
========================= */
@media (max-width: 768px) {
    .detail-header-blog {
        flex-direction: column;
        gap: 20px;
    }

    .glass-frame {
        border-radius: 14px;
    }

    .blob {
        width: 260px;
        height: 260px;
        filter: blur(70px);
        opacity: .45;
    }

    .blob-1 {
        top: -120px;
        left: -100px;
    }

    .blob-2 {
        bottom: -140px;
        right: -120px;
    }

    .blob-3 {
        display: none; /* موبایل شلوغ نشود */
    }

    .frame-tab {
        font-size: .75rem;
        padding: .45rem .9rem;
    }

    .frame-tab svg {
        width: 14px;
        height: 14px;
    }
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* =========================
   TAB SIZE – MOBILE PEEK
========================= */
@media (max-width: 640px) {

    .frame-tab {
        min-width: 92px; /* 👈 کلید 3.5 دکمه */
        padding: .45rem .6rem;
        font-size: .7rem;

        justify-content: center;
        white-space: nowrap;
    }

    .frame-tab svg {
        width: 14px;
        height: 14px;
    }
}

@media (max-width: 640px) {
    .tabs-fade {
        position: relative;
    }

    .tabs-fade::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0; /* 👈 فید سمت چپ */
        width: 32px;
        height: 100%;
        pointer-events: none;
        z-index: 5;
        background: linear-gradient(
                to right, /* 👈 جهت صحیح */ rgba(255, 255, 255, .9),
                rgba(255, 255, 255, 0)
        );
    }
}

.hero-light {
    position: relative;
    /*max-width: 1000px;*/
    margin: 0 auto;
    text-align: center;
    padding: 2rem 0rem;
}

/* subtle glow background */
.hero-light::before {
    content: "";
    position: absolute;
    inset: -100px;
    background: radial-gradient(circle at center, rgb(92 115 246 / 18%), transparent 60%);
    filter: blur(60px);
    z-index: -1;
}

/* Badge */
.hero-badge {
    padding: 0.4rem 0.2rem 0.4rem 0.6rem;
    border-radius: 999px;
    background: rgb(255 255 255 / 12%);
    backdrop-filter: blur(12px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.45);
    box-shadow: 0 8px 30px rgb(99 193 241 / 18%), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    font-weight: 600;
}


/* inner noise / light reflection */
.hero-badge::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
            120deg,
            rgba(255, 255, 255, 0.55),
            rgba(255, 255, 255, 0.05),
            rgba(255, 255, 255, 0.35)
    );
    opacity: .35;
    pointer-events: none;
}

/* ensure text stays above glass layers */
.hero-badge {
    position: relative;
    z-index: 1;
}


/* Title */
.hero-title {
    font-size: clamp(2.2rem, 4vw, 2.8rem);
    /*font-size: clamp(2.2rem, 4vw, 3.4rem);*/
    font-weight: 600;
    line-height: 1.3;
    color: #1f2937;
    margin-bottom: 1.25rem;
    margin-top: 2.75rem;
}

@media (max-width: 768px) {
    .hero-title {
        font-size: 32px;
        font-weight: 800;
        line-height: 1.5;
    }

    .hero-typing-label{
        color: #5f6b7a;
        font-size: 20px;
        font-weight: 300;
    }

    .typing-word.hero-highlight {
        font-size: 22px;
        font-weight: 400;
    }
    .hero-badge {
        font-weight: 400;
    }

    .hero-desc1{
        line-height: 1.8;
        font-size: 15px !important;
    }
}

@media (max-width: 500px){
    .hero-typing {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        font-size: 25px;
        font-weight: 500;
        margin: 18px 0;
        flex-direction: column;`
    }
}

.hero-typing {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 25px;
    font-weight: 500;
    margin: 18px 0;
}

.hero-typing-label {
    color: #5f6b7a;
}

.hero-highlight {
    color: var(--primary-color);
    font-weight: 700;
}

.hero-highlight {
    display: block;
    /*margin-top: .5rem;*/
    background: linear-gradient(90deg, #05a1ee, #272d6b, #272d6b);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    position: relative;
    font-size: 45px;
    /*font-size: 52px;*/
    font-weight: 600;
    line-height: 1.5;
}

.hero-highlight::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -6px;
    transform: translateX(-50%);
    width: 65%;
    height: 6px;
    background: linear-gradient(90deg, #b5d8fd, #a5b4fc);
    border-radius: 999px;
    filter: blur(8px);
    opacity: .7;
}

/* Description */
.hero-desc {
    max-width: 700px;
    margin: 1.75rem auto;
    font-size: 16px !important;
    line-height: 2.1;
    color: #fff;
    text-align: justify;
    text-align: center;
}

.hero-desc1{
    max-width: 700px;
    margin: 1.75rem auto;
    font-size: 16px !important;
    line-height: 2.1;
    color: #475569;
    text-align: center;
}
.hero-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    flex-wrap: nowrap; /* مهم: جلوگیری از رفتن زیر هم */
}

/* دکمه‌ها */
.hero-actions a {
    white-space: nowrap; /* متن نشکند */
}

/* موبایل */
@media (max-width: 640px) {
    .hero-highlight {
        font-size: 26px;
    }

    .hero-actions {
        gap: .6rem;
    }

    .hero-actions a {
        font-size: .85rem;
        padding: .6rem .7rem;
    }

    /* آیکن‌ها کمی کوچک‌تر شوند */
    .hero-actions svg {
        width: 20px;
        height: 20px;
    }
}


/* Secondary Button */
.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .75rem;
    font-size: .95rem;
    font-weight: 600;
    color: #334155;
    transition: all .25s ease;
}

.btn-secondary:hover {
    transform: translateY(-2px);
}

.play-icon {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .7rem;
    color: #fff;
    border-radius: 50%;
}


.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .85rem;
    color: #28303F;
}

@media (max-width: 768px) {
    .hero-badge {
        font-size: .7rem;
    }
}

/* دایره ماسک */
.hero-badge-circle {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #47556929;
    background: #ffffffb0;
}

/* رانر */
.hero-badge-runner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(110%) translateY(-50%);
    will-change: transform;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-badge-runner img {
    display: block;

    width: auto !important;
    height: 14px !important;
    max-width: none !important;
    max-height: none !important;

    object-fit: contain;
}

/* ورود: شتاب → ترمز */
.runner-in {
    animation: runnerIn 0.55s cubic-bezier(.15, .9, .35, 1) forwards;
}

/* خروج: شروع نرم → شتاب */
.runner-out {
    animation: runnerOut 0.55s cubic-bezier(.6, 0, .85, .4) forwards;
}

@keyframes runnerIn {
    from {
        transform: translateX(110%) translateY(-50%);
    }
    to {
        transform: translateX(-50%) translateY(-50%);
    }
}

@keyframes runnerOut {
    from {
        transform: translateX(-50%) translateY(-50%);
    }
    to {
        transform: translateX(-180%) translateY(-50%);
    }
}

/* مخفی کردن آیکن‌های تب‌ها فقط در موبایل */
@media (max-width: 640px) {
    [role="tablist"] > button > svg {
        display: none;
    }
}

@media (max-width: 768px) {
    .c-c1gwx {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
}

@media (max-width: 768px) {
    .pt-5 {
        padding-top: 5rem;
    }
}

.cxj2n-c {
    --tw-scale-x: -1;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.video-grid {
    display: flex;
    gap: 1.25rem;
}

.video-card {
    position: relative;
    flex: 1;
    height: 360px;
    border-radius: 2.25rem;
    overflow: hidden;
    cursor: pointer;
    transition: flex 450ms ease;
    background: #ffffff;
}

.video-card.active {
    flex: 3;
}

/* ویدئو */
.video-card video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    z-index: 0;
}

/* تصویر کاور موقت (تا آماده‌شدن ویدئوی واقعی) */
.video-card .video-cover-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    z-index: 0;
}

/* گرادینت */
.video-card::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 45%;
    background: linear-gradient(
            to top,
            rgba(0, 0, 0, 0.55),
            rgba(0, 0, 0, 0)
    );
    opacity: 0;
    transition: opacity 300ms ease;
    z-index: 1;
}

.video-card.active::after {
    opacity: 1;
}

/* overlay (متن + دکمه پلی) */
.card-overlay {
    position: absolute;
    inset: 0;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /*color: rgb(55 65 81 / var(--tw-text-opacity));*/
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 300ms ease, transform 300ms ease;
    z-index: 2;
}

.video-card.active .card-overlay {
    opacity: 1;
    transform: translateY(0);
}

/* دکمه پلی */
.play-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, .9);
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* متن و چینش */
.card-text {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;

    opacity: 0;
    transform: translateY(8px);

    transition: opacity 300ms ease,
    transform 300ms ease;
}

.video-card.active .card-text {
    opacity: 1;
    transform: translateY(0);

    transition-delay: 180ms; /* ← اینجا مهمه */
}

/* لوگو */
.video-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 110px;
    height: auto;
    pointer-events: none;
    z-index: 3;

    transition: transform 400ms ease,
    top 400ms ease,
    left 400ms ease,
    width 300ms ease,
    opacity 300ms ease;
}

.video-card.active .video-logo {
    top: auto;
    left: auto;
    right: 1.5rem;
    bottom: 2.5rem;
    transform: none;
    width: 100px;
    opacity: 1;
}

/* عنوان */
.video-card .card-overlay h4 {
    font-size: 1.3rem;
    color: #fff;
}

/* کارت‌های غیر active: کمی بلر + تیره‌تر */
.video-card:not(.active) video {
    filter: blur(1.6px) brightness(0.75);
    transition: filter 300ms ease;
}

/* روی hover: شفاف و روشن */
.video-card:not(.active):hover video {
    filter: blur(0) brightness(1);
}

/* تصویر کاور موقت: همین رفتار */
.video-card:not(.active) .video-cover-img {
    filter: blur(1.6px) brightness(0.75);
    transition: filter 300ms ease;
}

.video-card:not(.active):hover .video-cover-img {
    filter: blur(0) brightness(1);
}

/* =========================
   Video Modal – Glass Style
   ========================= */

/* قفل اسکرول صفحه */
body.modal-open {
    overflow: hidden;
}

/* کانتینر اصلی مودال */
.video-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;

    display: flex;
    align-items: center;
    justify-content: center;
}

/* حالت مخفی */
.video-modal[hidden] {
    display: none;
}

/* بک‌گراند – فقط این بخش blur دارد */
.video-modal-backdrop {
    position: absolute;
    inset: 0;

    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    opacity: 0;
    transition: opacity 300ms ease;
}

/* باکس نمایش ویدئو (Glass بدون blur) */
.video-modal-content {
    position: relative;
    z-index: 1;

    width: min(92vw, 1100px);
    max-height: 85vh;
    padding: 1rem;

    background: rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.18);

    box-shadow: 0 40px 120px rgba(0, 0, 0, 0.35),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05);

    transform: scale(0.94) translateY(10px);
    opacity: 0;

    transition: transform 350ms cubic-bezier(.16, 1, .3, 1),
    opacity 300ms ease;
}

/* خود ویدئو – کاملاً شفاف */
.video-modal-player {
    width: 100%;
    max-height: 75vh;

    border-radius: 14px;
    background: #000;

    filter: none;
    backdrop-filter: none;
}

/* دکمه بستن */
.video-modal-close {
    position: absolute;
    top: 30px;
    right: 30px;
    z-index: 2;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: rgb(255 255 255 / 55%);
    color: #fff;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
}

/* حالت فعال + انیمیشن */
.video-modal.show .video-modal-backdrop {
    opacity: 1;
}

.video-modal.show .video-modal-content {
    opacity: 1;
    transform: scale(1) translateY(0);
}

.video-modal-close {
    display: flex;
    align-items: center;
    justify-content: center;

    transition: background-color 200ms ease,
    transform 200ms ease;
}

.video-modal-close:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: scale(1.05);
}

.video-modal-close:active {
    transform: scale(0.96);
}

.play-btn {
    display: flex;
    align-items: center;
    justify-content: center;
}

.play-btn svg {
    pointer-events: none;
}

@media (max-width: 767px) {
    .video-showcase {
        display: none !important;
    }
}

.h80 {
    height: 80px;
}

.h100 {
    height: 100px;
}

.mnuli {
    left: unset;
    width: fit-content;
    position: fixed;
    top: 50px;
    min-width: 180px;
}

.msgping {
    position: relative;
    top: -30px;
    left: 5px;
    height: 0;
    display: block;
}

.p-0 {
    padding: 0px;
}

.mt-2 {
    margin-top: 20px;
}

.user-fact span svg {
    width: 20px;
}

.mb-2 {
    margin-bottom: 20px;
}

.is-disabled {
    pointer-events: none; /* جلوگیری از کلیک */
    opacity: .5; /* ظاهر غیرفعال */
    cursor: not-allowed;
    text-decoration: none;
}

.hidden {
    display: none;
}

.fs45 {
    font-size: 45px !important;
}

@media (max-width: 768px) {
    .fs45 {
        font-size: 29px !important;
    }
}

:root {
    --page-bg: #ffffff;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
}

body {
    background: var(--page-bg);
}

/* ===== HERO (clip) ===== */
.slk-hero {
    position: relative;
    overflow: visible;
    padding: 86px 0 190px;
    background: /*radial-gradient(1200px 650px at 50% 0%, rgb(240 250 255 / 16%), transparent 62%),*/ /*linear-gradient(180deg, #0090ff00 0%, #0082ff3b 100%);*/ radial-gradient(1200px 650px at 50% 0%, rgb(240 250 255 / 16%), transparent 62%), linear-gradient(180deg, #0090ff00 0%, #eaf5fe 100%)
}

.slk-hero--clip {
    clip-path: ellipse(110% 200% at 50% -105%);
}

@supports not (clip-path: ellipse(60% 200% at 50% -105%)) {
    .slk-hero--clip {
        clip-path: none;
        overflow: hidden;
    }

    .slk-hero--clip::after {
        content: "";
        position: absolute;
        left: -15%;
        right: -15%;
        bottom: -220px;
        height: 340px;
        background: var(--page-bg);
        border-radius: 9999px;
        pointer-events: none;
    }
}

.slk-hero__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 100px 28px 30px;
}

.slk-hero__grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 30px;
    align-items: center;
}

.slk-media {
    position: relative;
    width: 100%;
    max-width: 560px;
    margin-inline-start: auto;
}

/* ===== Video Cover Card ===== */
.slk-videoCard {
    position: relative;
    display: block;
    width: 100%;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 30px 70px rgba(0, 0, 0, .18), 0 6px 18px rgba(0, 0, 0, .12);
    border: 1px solid rgba(17, 24, 39, .08);
}

.slk-videoCard__img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 16/10;
    object-fit: cover;
}

.slk-videoCard::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .10), rgba(0, 0, 0, .22));
    pointer-events: none;
}

.slk-videoCard__play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .92);
    color: #111;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .22);
    transition: transform .18s ease, background-color .18s ease;
    z-index: 2;
}

.slk-videoCard:hover .slk-videoCard__play {
    transform: translate(-50%, -50%) scale(1.05);
    background: #fff;
}

/* ===== Responsive hero ===== */
@media (max-width: 980px) {
    .slk-hero {
        padding: 64px 0 220px;
    }

    .slk-hero__grid {
        grid-template-columns:1fr;
        gap: 28px;
    }

    .slk-media {
        max-width: 720px;
        margin: 0 auto;
    }

    .slk-hero--clip {
        clip-path: ellipse(85% 220% at 50% -125%);
    }
}

@media (max-width: 520px) {
    .slk-hero__container {
        padding: 80px 15px 0;
    }

    .slk-hero {
        padding: 52px 0 140px;
    }

    .slk-hero--clip {
        clip-path: ellipse(230% 240% at 50% -140%);
    }

    .slk-videoCard__play {
        width: 56px;
        height: 56px;
    }
}

/* =========================
   ✅ MODAL
========================== */
.slk-vmodal {
    position: fixed;
    inset: 0;
    display: none;
    z-index: 2147483647;
    isolation: isolate;
}

.slk-vmodal.is-open {
    display: block;
}

.slk-vmodal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .35);
    backdrop-filter: blur(8px);
}

.slk-vmodal__frame {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(1100px, calc(100% - 34px));
    height: min(700px, 85vh);
    border-radius: 22px;
    padding: 14px;
    background: rgba(210, 210, 210, .46);
    border: 1px solid rgba(255, 255, 255, .22);
    box-shadow: 0 40px 120px rgba(0, 0, 0, .30);
}

.slk-vmodal__stage {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: #000;
    height: 100%;
}

.slk-vmodal__close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 38px;
    height: 38px;
    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, .22);
    background: rgba(0, 0, 0, .45);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
}

.slk-vmodal__close:hover {
    background: rgba(0, 0, 0, .6);
}

.slk-vmodal__ratio {
    position: relative;
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
}

.slk-vmodal__ratio video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
    object-fit: contain; /* ✅ no stretching */
    background: #000;
}

@media (max-width: 520px) {
    .slk-vmodal__frame {
        width: calc(100% - 18px);
        padding: 10px;
        border-radius: 18px;
        height: auto; /* ✅ allow ratio-driven height */
    }

    .slk-vmodal__stage {
        height: auto;
    }

    .slk-vmodal__ratio {
        height: auto;
        aspect-ratio: 16 / 9;
    }

    .slk-vmodal__close {
        top: 10px;
        right: 10px;
        width: 34px;
        height: 34px;
    }
}

html.slk-modal-lock,
body.slk-modal-lock {
    overflow: hidden !important;
}

/* فقط به اندازه محتوا */
.slk-label-fit {
    display: inline-flex; /* یا inline-block */
    width: fit-content;
    max-width: 100%;
}

.mt16 {
    margin-top: 1rem;
}

.mt20 {
    margin-top: 1rem !important;
}

/* =========================
Light Problem Section
========================== */

.slk-problem {
    position: relative;
    padding: 120px 0;
    color: #0f172a;
    overflow: hidden;

    /* light + subtle halo like your hero */
    background: radial-gradient(900px 420px at 50% 0%, rgba(0, 130, 255, .10), transparent 60%),
    radial-gradient(700px 360px at 12% 65%, rgba(17, 24, 39, .06), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.slk-problem::before {
    content: "";
    position: absolute;
    inset: -1px;
    pointer-events: none;
    /* faint grid/noise feel without image */
    background: linear-gradient(to right, rgba(15, 23, 42, .03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15, 23, 42, .03) 1px, transparent 1px);
    background-size: 70px 70px;
    opacity: .18;
    mask-image: radial-gradient(60% 60% at 50% 25%, #000 40%, transparent 70%);
}

.slk-problem__container {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 28px;
}


.slk-problem__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.slk-problem-card--wide {
    grid-column: span 2; /* دو ستون را می‌گیرد */
}

/* Card */
.slk-problem-card {
    position: relative;
    padding: 32px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 10px 30px rgba(2, 6, 23, 0.05);
    backdrop-filter: blur(12px);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.slk-problem-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(500px 220px at 20% 0%, rgba(0, 130, 255, .10), transparent 55%);
    opacity: .65;
}

.slk-problem-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(2, 6, 23, 0.1);
}

.slk-problem-card__bg {
    position: absolute;
    bottom: -25px;;
    right: 14px;
    font-size: 80px;
    font-weight: 900;
    letter-spacing: -.04em;
    color: rgba(2, 6, 23, .08); /* light watermark */
    pointer-events: none;
    user-select: none;
}

.slk-problem-card h3 {
    position: relative;
    font-size: 20px;
    margin: 0 0 10px;
    font-weight: 700;
    color: #0f172a;
}

.slk-problem-card p {
    position: relative;
    font-size: 14.5px;
    line-height: 1.95;
    color: #475569;
    margin: 0;
    text-align: justify;
}

/* Responsive */
@media (max-width: 900px) {
    .slk-problem {
        padding: 90px 0;
    }

    .slk-problem__grid {
        grid-template-columns:1fr;
    }

}

@media (max-width: 520px) {
    .slk-problem__container {
        padding: 0 15px;
    }

    .slk-problem-card {
        padding: 22px 18px 18px;
        border-radius: 16px;
    }

    .slk-problem-card__bg {
        font-size: 74px;
        top: 165px;
        right: 12px;
    }
}

/* icon bottom-left inside card */
.slk-problem-card {
    padding-bottom: 54px; /* جا برای آیکن */
}

.slk-problem-card__icon {
    position: absolute;
    left: 16px;
    bottom: 14px;
    width: 34px;
    height: 34px;
    object-fit: contain;
    opacity: .9;
    pointer-events: none;
    user-select: none;
    filter: drop-shadow(0 8px 18px rgba(2, 6, 23, .12));
}

[dir="rtl"] .slk-problem-card__icon {
    left: 16px;
    right: auto; /* اگر RTL واقعی می‌خوای */
}

[dir="ltr"] .slk-problem-card__icon {
    left: auto;
    right: 16px; /* اگر RTL واقعی می‌خوای */
}

/* استایل‌های عمومی و چیدمان */
.slk-centerBlock {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.slk-centerBlock .hero-desc {
    text-align: center;
    max-width: 700px;

}

.mt-0 {
    margin-top: 0 !important;
}

.mb-0 {
    margin-bottom: 0 !important;
}

.mb-20 {
    margin-bottom: 20px;
}

/* استایل دکمه */
.slk-btn-inline {
    display: inline-flex;
    width: auto;
}

.slk-btn-inline1 {
    display: inline-flex;
    width: 100%;
}

@media (max-width: 768px) {
    .slk-btn-wrap {
        text-align: center;
    }

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

/* استایل باکس‌ها */
.bg-gray100 {
    background-color: #f9fafc;
    border-radius: 20px;
    transition: all 0.3s ease;
}

/* افکت هاور روی باکس */
.box-des:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgb(37 42 61 / 6%);
    border: 1px solid #dbe9ff;
}

/* استایل آیکون */
.svg-word {
    background: rgb(220 233 255 / 50%);
    width: fit-content;
    padding: 12px;
    border-radius: 10px;
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

/* افکت هاور روی آیکون (تغییر پس‌زمینه) */
.group:hover .svg-word {
    background: linear-gradient(135deg, rgb(78 173 255) 0%, rgb(20 51 121) 100%);
    transform: scale(1.05);
}

/* --- تغییر رنگ آیکون به سفید --- */
/* این بخش اضافه شده است */
.group:hover .svg-word svg path {
    fill: #ffffff !important;
}

.revenue-desc1 {
    font-size: 16px;
    color: #6b7280;
    line-height: 2.2;
    font-weight: 500;
    text-align: justify;

}

.fs20 {
    font-size: 20px !important;
}

.fw5 {
    font-weight: 500 !important;
}

.fw6 {
    font-weight: 600 !important;
}

.fw7 {
    font-weight: 700 !important;
}

.fw8 {
    font-weight: 800 !important;
}

.slk-card-number {
    position: absolute;
    inset-inline-start: -20px;
    bottom: 10px;
    display: flex;
    justify-content: flex-end;
    width: 100%;
    font-size: 4rem;
    font-weight: 900;
    line-height: 1;
    color: rgba(37, 99, 235, 0.08);
    z-index: 0;
    pointer-events: none;
    transition: all 0.4s ease;
}

.group:hover .slk-card-number {
    transform: scale(1.02);
    color: rgba(37, 99, 235, 0.15);
}

/* استایل‌های ریسپانسیو برای موبایل و تبلت */
@media (max-width: 1024px) {
    /* تغییر گرید به تک ستونه */
    .grid.grid-cols-3 {
        display: flex;
        flex-direction: column;
        gap: 1.5rem; /* فاصله بین باکس‌ها در حالت عمودی */
    }

    /* تمام باکس‌ها (چه بزرگ چه کوچک) تمام عرض را بگیرند */
    .grid.grid-cols-3 > div {
        width: 100% !important;
        max-width: 100%;
    }

    /* تنظیم پدینگ برای موبایل تا باکس‌ها به دیواره نچسبند */
    .mx-auto {
        padding-inline-start: 0;
        padding-inline-end: 0;
    }
}


/* کانتینر اصلی سکشن راه‌حل */
.slk-solution-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4rem;
}

/* ستون سمت راست (متن‌ها) */
.slk-solution-content {
    flex: 1;
    max-width: 600px;
}

/* استایل آیتم‌های لیست (۴ مورد) */
.slk-solution-list {
    list-style: none;
    padding: 0;
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.slk-solution-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    background-color: #ffffff;
    padding: 12px;
    border-radius: 50px;
    border: 1px solid;
    border-color: rgb(242, 242, 242);
    box-shadow: rgb(113 142 204 / 9%) -4px 8px 40px;
}

/* آیکون تیک یا دایره کنار آیتم‌ها */
.slk-item-icon {
    min-width: 35px;
    height: 35px;
    background: linear-gradient(135deg, rgb(78 173 255) 0%, rgb(20 51 121) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 14px;
    margin-top: 2px;
    box-shadow: 0 0 14px 3px rgb(64 142 221 / 50%);
}

.slk-item-text {
    font-size: 15px;
    color: #334155;
    font-weight: 600;
}

/* ستون سمت چپ (تصویر) */
.slk-solution-image-wrapper {
    flex: 1;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* افکت بلور و شیشه‌ای پشت تصویر */
.slk-glass-effect {
    position: absolute;
    width: 80%;
    height: 80%;
    /*background: rgba(255, 255, 255, 0.4);*/
    /*backdrop-filter: blur(40px); !* شدت بلور *!*/
    /*-webkit-backdrop-filter: blur(40px);*/
    border-radius: 30px;
    z-index: 0;
    border: 1px solid rgba(255, 255, 255, 0.5);
    /*box-shadow: 0 20px 50px rgba(37, 99, 235, 0.15);*/
}

/* خود تصویر */
.slk-solution-image {
    position: relative;
    z-index: 1; /* قرارگیری روی شیشه */
    max-width: 95%;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(37, 99, 235, 0.15);
    transition: transform 0.3s ease;
}

.slk-solution-image:hover {
    transform: scale(1.02);
}

/* ریسپانسیو برای موبایل */
@media (max-width: 768px) {
    .slk-solution-section {
        flex-direction: column-reverse;
        text-align: right;
        gap: 3rem;
    }

    .slk-item-text {
        font-size: 14px;
        font-weight: normal;
    }

    .slk-solution-content {
        max-width: 100%;
    }

    h2 {
        font-size: 20px !important;
    }

    .fs20 {
        font-size: 17px !important;
    }

    .slk-solution-list {
        align-items: center; /* وسط چین کردن آیتم‌ها در موبایل */
    }

    .slk-solution-item {
        flex-direction: row;
        align-items: center;
        text-align: center;
        display: flex;
        justify-content: flex-start;
        width: 100%;
    }
}

h2 {
    color: #1f2937;
    font-size: 29px !important;
}

h3 {
    color: #1f2937;
    font-size: 27px !important;
}

h4 {
    color: #1f2937;
    font-size: 24px !important;
}

h5 {
    color: #1f2937;
    font-size: 22px !important;
}

h6 {
    color: #1f2937;
    font-size: 20px !important;
}


/* کانتینر اصلی مقایسه */
.slk-compare-container {
    position: relative;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 30px rgb(37 99 235 / 7%);
    cursor: col-resize;

    /* --- اصلاحیه ۱: جلوگیری از انتخاب متن و آبی شدن هنگام درگ کردن --- */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* تصویر پایین (After) - این تصویر همیشه کامل دیده می‌شود */
.slk-img-after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 1;
    pointer-events: none;
}

/* تصویر بالا (Before) - این تصویر با اسلایدر برش می‌خورد */
.slk-img-before-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
    transition: clip-path 0.05s linear;
}

.slk-img-before {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}

/* خط جداکننده (Handle) */
.slk-slider-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 4px;
    background: #ffffff;
    z-index: 10;
    cursor: col-resize;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    /* جلوگیری از انتخاب خط */
    user-select: none;
}

/* دایره وسط خط جداکننده */
.slk-slider-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    background: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    color: #2563eb;
    pointer-events: none;
}

/* برچسب‌های روی تصویر (Before / After) */
.slk-label {
    position: absolute;
    top: 20px;
    padding: 6px 16px;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
    z-index: 5; /* بالاتر از هر دو تصویر */
    pointer-events: none;
    backdrop-filter: blur(4px);
    white-space: nowrap; /* جلوگیری از شکستن متن */
}

.slk-label-before {
    right: 20px; /* همیشه سمت راست */
}

.slk-label-after {
    left: 20px; /* همیشه سمت چپ */
}

@media (max-width: 768px) {
    .slk-compare-container {
        aspect-ratio: 1 / 1;
    }

    .df-center1 {
        align-items: center;
        display: flex;
        flex-direction: column;
    }

    .slk-stat-box {
        padding: 1.5rem .6rem;
    }
}

.df-center {
    display: flex;
    justify-content: center;
}


.slk-stats-wrapper {
    width: 100%;
    /*background: linear-gradient(135deg, rgb(78 173 255) 0%, rgb(0 22 71) 100%);*/
    padding-top: 5rem;
    padding-bottom: 5rem;
    background: linear-gradient(90deg, #05a1ee, #000535, #010740);
}


.slk-stats-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4rem;
}

/* ستون باکس‌ها */
.slk-stats-grid {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

/* استایل باکس‌ها */
.slk-stat-box {
    background: #ffffff;
    padding: 2rem;
    border-radius: 20px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
    display: flex;
    border: 1px solid #e2e8f0;
    flex-direction: column;
    align-items: center;
}

.slk-stat-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.1);
    border-color: #bfdbfe;
}

/* عدد و متن */
.slk-stat-number {
    display: block;
    font-size: 2.5rem;
    font-weight: 800;
    background: linear-gradient(135deg, rgba(37, 99, 235, 1) 0%, rgba(21, 56, 133, 1) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 0.5rem;
}

.slk-stat-desc {
    font-size: 1rem;
    color: #64748b;
    font-weight: 500;
}

/* ستون تصویر */
.slk-stats-image-wrapper {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.slk-stats-image {
    /*max-width: 100%;*/
    max-width: 600px;
    height: auto;
    border-radius: 20px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.slk-stats-image:hover {
    transform: rotate(2deg);
}

@media (max-width: 900px) {
    .slk-stats-container {
        flex-direction: column-reverse;
        gap: 3rem;
    }
}

/* ریسپانسیو */
@media (max-width: 768px) {
    .slk-stats-image {
        max-width: 100%;
    }
}

.title-white {
    color: #fff;
    margin-bottom: 40px;
}

.df-column {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.c-white {
    color: #fff !important;
}


/* کانتینر اصلی سکشن ۳ بخشی */
.slk-features-grid-section {
    width: 100%;
}

/* گرید اصلی با نسبت ۵، ۲، ۳ */
.slk-grid-layout {
    display: grid;
    grid-template-columns: 5fr 2fr 3fr; /* نسبت دقیق ۵ به ۲ به ۳ */
    gap: 1.5rem; /* فاصله بین باکس‌ها */
    max-width: 1400px; /* حداکثر عرض برای مانیتورهای بزرگ */
    margin: 0 auto;
    height: 300px; /* ارتفاع ثابت برای سکشن (قابل تغییر) */
}

.slk-feature-box {
    background-color: #f9fafc;
    border-radius: 24px;
    overflow: hidden;
    position: relative;
    transition: transform 0.3s ease;
}

/* افکت هاور ساده برای تست */
.slk-feature-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgb(37 42 61 / 6%);
    border: 1px solid #dbe9ff;
}

/* ریسپانسیو برای موبایل و تبلت */
@media (max-width: 1024px) {
    .slk-grid-layout {
        /* در تبلت: باکس اول تمام عرض، دو باکس دیگر زیر هم نصف عرض */
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        height: auto;
    }

    /* باکس اول (۵ واحد) را ببریم ردیف اول تمام عرض */
    .slk-box-1 {
        grid-column: span 2;
    }
}

@media (max-width: 768px) {
    .slk-grid-layout {
        /* در موبایل: همه زیر هم */
        grid-template-columns: 1fr;
        height: auto;
        display: flex;
        flex-direction: column;
    }

    .slk-feature-box {
        min-height: 300px; /* ارتفاع حداقل در موبایل */
    }
}

.slk-box1-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding: 2rem;
    gap: 2rem;
}

/* ستون نمودار */
.slk-chart-side {
    flex: 0 0 30%; /* عرض ثابت 40 درصد */
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.slk-donut-chart {
    position: relative;
    width: 180px;
    height: 180px;
}

.slk-chart-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg); /* چرخش برای شروع از بالا */
}

.slk-chart-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.slk-percent {
    display: block;
    font-size: 1.8rem;
    font-weight: 800;
    color: #1e293b;
}


/* ستون اطلاعات */
.slk-info-side {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.slk-title {
    font-size: 1.2rem !important;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 0.5rem;
}

/* راهنما */
.slk-legend {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-bottom: 2rem;
}

.slk-legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 12px;
    color: #475569;
}

.slk-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.slk-dot-blue {
    background: linear-gradient(135deg, rgba(37, 99, 235, 1), rgba(21, 56, 133, 1));
}

.slk-dot-gray {
    background-color: #e2e8f0;
}

/* نوار پیشرفت */
.slk-progress-container {
    width: 100%;
}

.slk-progress-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 0.5rem;
}

.slk-progress-bar-bg {
    width: 100%;
    height: 10px;
    background-color: #e2e8f0; /* رنگ خالی (صرفه‌جویی) */
    border-radius: 10px;
    overflow: hidden;
}

.slk-progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, rgba(37, 99, 235, 1), rgb(1 7 63));
    border-radius: 10px;
}

@media (max-width: 768px) {
    .slk-box1-content {
        flex-direction: column;
        text-align: center;
    }

    .slk-legend {
        justify-content: center;
    }
}

.df-space-between {
    display: flex;
    justify-content: space-between;
}

/* استایل نمودار دایره‌ای */
.slk-chart-value {
    /* انیمیشن برای تغییر stroke-dasharray */
    transition: stroke-dasharray 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* استایل نوار پیشرفت */
.slk-progress-bar-fill {
    /* انیمیشن برای تغییر عرض */
    transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);
    width: 0%; /* شروع از صفر */
}


/* استایل اختصاصی باکس دوم (Speedometer) */
.slk-box2-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 1.5rem;
    gap: 1rem;
}

/* گروه هر سرعت‌سنج */
.slk-meter-group {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.slk-meter-label {
    font-size: 0.9rem;
    color: #64748b;
    font-weight: 600;
}

/* کادر سرعت‌سنج */
.slk-speedometer {
    position: relative;
    width: 140px;
    height: 80px; /* افزایش از 70px به 80px */
    background: #f1f5f9;
    border-radius: 100px 100px 0 0;
    overflow: visible; /* تغییر از hidden به visible */
    border-bottom: 4px solid #e2e8f0;
}

/* گرادینت پس‌زمینه برای سرعت‌سنج سریع */
.slk-speedometer.slk-fast {
    background: linear-gradient(180deg, rgba(37, 99, 235, 0.1) 0%, rgba(255, 255, 255, 1) 100%);
    border-bottom-color: #3b82f61f;
}

/* عقربه */
.slk-needle {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 4px;
    height: 60px;
    background: #94a3b8;
    transform-origin: bottom center; /* چرخش از پایین */
    transform: translateX(-50%) rotate(-90deg); /* شروع از صفر */
    border-radius: 2px;
    transition: transform 1.5s cubic-bezier(0.34, 1.56, 0.64, 1); /* انیمیشن فنری */
    z-index: 2;
}

/* عقربه آبی برای الوند */
.slk-fast .slk-needle {
    background: #3b82f6;
    box-shadow: 0 0 10px rgba(37, 99, 235, 0.5);
}

/* دایره وسط عقربه */
.slk-needle::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 12px;
    background: inherit;
    border-radius: 50%;
}

/* مقدار عددی */
.slk-meter-value {
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.2rem;
    font-weight: 800;
    color: #475569;
    z-index: 3;
}

.slk-meter-value.highlight {
    color: #3b82f6;
    font-size: 1.4rem;
}

/* فلش وسط */
.slk-divider-arrow {
    color: #cbd5e1;
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-5px);
    }
    60% {
        transform: translateY(-3px);
    }
}

/* باکس سوم: امنیت - نسخه ۲ */
.slk-box-3 {
    background: #0f172a;
    overflow: hidden;
    position: relative;
}

/* المان‌های دکوراتیو پس‌زمینه */
.slk-box-3::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -30%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgb(59 130 246 / 21%) 0%, transparent 70%);
    pointer-events: none;
}

.slk-box-3::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -20%;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgb(59 130 246 / 33%) 0%, transparent 70%);
    pointer-events: none;
}

/* کانتینر اصلی */
.slk-security-v2 {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 2rem 1.5rem;
    text-align: center;
    gap: 1.5rem;
}

/* چشم انتزاعی */
.slk-abstract-eye {
    width: 120px;
    height: 60px;
    animation: eyeFloat 4s ease-in-out infinite;
}

.slk-abstract-eye svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 20px rgba(59, 130, 246, 0.5));
}

@keyframes eyeFloat {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-8px) scale(1.02);
    }
}

/* متن */
.slk-security-text {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.slk-security-headline {
    font-weight: 800;
    line-height: 1.2;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.slk-line {
    color: #f8fafc;
    letter-spacing: -0.02em;
    font-weight: 600;
    font-size: 1.1rem;
}

.slk-line.accent {
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.slk-security-sub {
    font-size: 0.85rem;
    color: #64748b;
    margin: 0;
    font-weight: 400;
}

/* المان دکوراتیو */
.slk-security-decor {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    opacity: 0.5;
}

.slk-decor-dot {
    width: 4px;
    height: 4px;
    background: #3b82f6;
    border-radius: 50%;
}

.slk-decor-line {
    width: 30px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #3b82f6, transparent);
}

/* آمار */
.slk-security-stats {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: .5rem;
    backdrop-filter: blur(10px);
}

.slk-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.slk-stat-val {
    font-size: 1.25rem;
    font-weight: 700;
    color: #f8fafc;
    font-variant-numeric: tabular-nums;
}

.slk-stat-name {
    font-size: 0.7rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.slk-stat-divider {
    width: 1px;
    height: 30px;
    background: rgba(255, 255, 255, 0.1);
}

/* ریسپانسیو */
@media (max-width: 768px) {
    .slk-security-v2 {
        padding: 1.5rem 1rem;
    }

    .slk-abstract-eye {
        width: 100px;
        height: 50px;
    }
}


/* سکشن تیکر */
.slk-features-ticker-section {
    width: 100%;
    padding: 3rem 0;
    background: #0f172a;
    overflow: hidden;
    position: relative;
}

/* دایره وسط */
.slk-ticker-center-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    pointer-events: none;
}

.slk-center-circle-inner {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1e293b, #0f172a);
    border: 2px solid rgba(59, 130, 246, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 30px rgba(59, 130, 246, 0.2),
    inset 0 0 20px rgba(59, 130, 246, 0.1);
}

.slk-center-circle-inner svg {
    color: #3b82f6;
}

/* رپر */
.slk-ticker-wrapper {
    width: 100%;
    overflow: hidden;
    padding: 0.5rem 0;
}

/* مسیر تیکر */
.slk-ticker-track {
    display: flex;
    gap: 1rem;
    width: max-content;
}

/* کارت */
.slk-feature-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: .5rem;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.slk-feature-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(59, 130, 246, 0.3);
}

/* آیکون */
.slk-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    border-radius: 10px;
    flex-shrink: 0;
}

.slk-card-icon svg {
    color: white;
}

/* رنگ‌های آیکون */
.slk-icon-blue {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
}

.slk-icon-green {
    background: linear-gradient(135deg, #10b981, #059669);
}

.slk-icon-orange {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.slk-icon-pink {
    background: linear-gradient(135deg, #ec4899, #db2777);
}

.slk-icon-purple {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}

.slk-icon-cyan {
    background: linear-gradient(135deg, #06b6d4, #0891b2);
}

.slk-icon-red {
    background: linear-gradient(135deg, #ef4444, #dc2626);
}

.slk-icon-teal {
    background: linear-gradient(135deg, #14b8a6, #0d9488);
}

.slk-icon-indigo {
    background: linear-gradient(135deg, #6366f1, #3b82f6);
}

/* متن */
.slk-card-text {
    font-size: 0.8rem;
    font-weight: 500;
    color: #e2e8f0;
}

/* ریسپانسیو */
@media (max-width: 768px) {
    .slk-feature-card {
        padding: 0.6rem;
    }

    .slk-card-icon {
        display: none;
    }

    .slk-card-text {
        font-size: 0.7rem;
    }

    .slk-center-circle-inner {
        width: 80px;
        height: 80px;
    }

    .slk-center-circle-inner svg {
        width: 20px;
        height: 20px;
    }
}


.slk-business-container {
    position: relative;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 28px;
}

.slk-business-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.slk-business-card {
    position: relative;
    background: #ffffff;
    border-radius: 24px;
    padding: 40px 32px;
    border: 1px solid #dbe9ff;
    box-shadow: 0 4px 30px rgba(2, 6, 23, 0.06);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    min-height: 280px;
    display: flex;
    flex-direction: column;
}

/* پس‌زمینه عکس - مخفی در حالت عادی */
.slk-business-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    z-index: 0;
    transition: opacity 0.5s ease;
}


/* هاور - نمایش عکس با پس‌زمینه سیاه */
.slk-business-card:hover .slk-business-bg {
    display: block;
    opacity: 1;
}

.slk-business-card:hover {
    background: #000000;
    transform: translateY(-10px);
    box-shadow: 0 25px 50px rgba(2, 6, 23, 0.15);
    border-color: transparent;
}

.slk-business-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    flex: 1;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    justify-content: center;
}

/* تغییر رنگ متن در هاور */
.slk-business-card:hover .slk-business-icon {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.slk-business-card:hover .slk-business-title {
    color: #ffffff;
}

.slk-business-card:hover .slk-business-desc {
    color: rgba(255, 255, 255, 0.85);
}

.slk-business-icon {
    width: 60px;
    height: 60px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    color: #1e293b;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.slk-business-title {
    font-size: 1.2rem !important;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 0.5rem;
    transition: color 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.slk-business-desc {
    font-size: 16px;
    color: #64748b;
    line-height: 1.75;
    margin: 0;
    text-align: justify;
    transition: color 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ریسپانسیو */
@media (max-width: 1200px) {
    .slk-business-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .slk-business-card {
        min-height: 340px;
    }
}

@media (max-width: 768px) {
    .slk-business-container {
        padding: 0px;
    }

    .slk-business-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .slk-business-card {
        padding: 24px;
        min-height: 250px;
    }

    .slk-business-icon {
        width: 70px;
        height: 70px;
    }

    .slk-business-icon svg {
        width: 32px;
        height: 32px;
    }

    .slk-business-title {
        font-size: 18px !important;
    }

    .slk-business-desc {
        font-size: 15px;
    }
}

/* فیلتر سورمه‌ای روی عکس در هاور */
.slk-business-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
    rgba(0, 20, 60, 0.75) 0%,
    rgba(0, 30, 60, 0.65) 100%);
    opacity: 0;
    transition: opacity 0.5s ease;
}

.slk-business-card:hover .slk-business-bg::after {
    opacity: 1;
}

.slk-business-card:hover .slk-business-icon svg {
    stroke: #ffffff !important;
}

.slk-business-card:hover .slk-business-icon svg path,
.slk-business-card:hover .slk-business-icon svg polygon,
.slk-business-card:hover .slk-business-icon svg polyline,
.slk-business-card:hover .slk-business-icon svg line,
.slk-business-card:hover .slk-business-icon svg rect {
    fill: #ffffff !important;
    stroke: #ffffff !important;
}


/* ========================= مراحل آماده‌سازی الوند ========================= */
.slk-setup-section {
    position: relative;
    padding: 80px 0 100px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    overflow: hidden;
}

.slk-setup-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(800px 380px at 50% 0%, rgba(0, 130, 255, .08), transparent 60%);
    pointer-events: none;
}

.slk-setup-container {
    position: relative;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 28px;
}

.slk-setup-header {
    text-align: center;
    margin-bottom: 60px;
}

.slk-setup-steps {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    padding: 0 40px;
}

/* خط اصلی پیشرفت */
.slk-progress-line {
    position: absolute;
    top: 60px;
    left: 80px;
    right: 80px;
    height: 4px;
    background: #e2e8f0;
    border-radius: 2px;
    z-index: 0;
}

.slk-progress-line-fill {
    position: absolute;
    top: 0;
    right: 0; /* تغییر از left به right */
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, rgba(37, 99, 235, 1), rgba(21, 56, 133, 1));
    border-radius: 2px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* هر مرحله */
.slk-setup-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
    cursor: pointer;
    max-width: 220px;
}

/* باکس هر مرحله */
.slk-step-box {
    width: 180px;
    height: 140px;
    background: #ffffff;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(2, 6, 23, 0.06);
    border: 1px solid transparent;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.slk-step-box::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(100px 60px at 50% 0%, rgba(0, 130, 255, .08), transparent 60%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.slk-step-box:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 30px rgba(2, 6, 23, 0.1);
    border-color: rgba(37, 99, 235, 0.3);
}

.slk-step-box:hover::before {
    opacity: 1;
}

/* آیکون مرحله */
.slk-step-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    transition: transform 0.3s ease;
}

.slk-step-box:hover .slk-step-icon {
    transform: scale(1.1);
}

.slk-step-icon svg {
    width: 40px;
    height: 40px;
}

/* عنوان مرحله */
.slk-step-title {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    text-align: center;
    position: relative;
    z-index: 1;
}

/* شماره مرحله (دایره زیر باکس) */
.slk-step-number {
    width: 40px;
    height: 40px;
    background: #f1f5f9;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 24px;
    font-weight: 700;
    font-size: 14px;
    color: #64748b;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid transparent;
}

/* هاور روی کل آیتم - تغییرات */
.slk-setup-step:hover .slk-step-number {
    background: linear-gradient(135deg, rgba(37, 99, 235, 1), rgba(21, 56, 133, 1));
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.4);
    transform: scale(1.1);
}

/* هاور روی هر مرحله - رنگی شدن بخش مربوطه از خط */
.slk-setup-step:nth-child(1):hover ~ .slk-progress-line .slk-progress-line-fill {
    width: 5%;
}

.slk-setup-step:nth-child(2):hover ~ .slk-progress-line .slk-progress-line-fill {
    width: 33%;
}

.slk-setup-step:nth-child(3):hover ~ .slk-progress-line .slk-progress-line-fill {
    width: 62%;
}

.slk-setup-step:nth-child(4):hover ~ .slk-progress-line .slk-progress-line-fill {
    width: 95%;
}

/* ریسپانسیو - طرح جدید */
@media (max-width: 768px) {
    .slk-step-title {
        font-size: 16px;
    }

    .slk-setup-steps {
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 0;
        padding: 0 15px;
        justify-content: flex-start;
        align-items: stretch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .slk-setup-steps::-webkit-scrollbar {
        display: none;
    }

    .slk-progress-line {
        display: none;
    }

    .slk-setup-step {
        flex: 0 0 85%;
        max-width: 85%;
        scroll-snap-align: center;
        padding: 0 10px;
    }

    .slk-step-box {
        width: 85%;
        height: 160px;
    }

    .slk-step-number {
        display: none;
    }

    .slk-slider-dots {
        display: none;
    }

    .slk-slider-dots {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-top: 25px;
    }

    .slk-slider-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #e2e8f0;
        transition: all 0.3s ease;
        cursor: pointer;
    }

    .slk-slider-dot.active {
        background: linear-gradient(135deg, rgba(37, 99, 235, 1), rgba(21, 56, 133, 1));
        width: 30px;
        border-radius: 5px;
    }
}

/* پس‌زمینه دکوراتیو */
.slk-faq-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(800px 380px at 50% 0%, rgba(0, 130, 255, .08), transparent 60%);
    pointer-events: none;
}

.slk-faq-container {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 28px;
}

/* هدر بخش */
.slk-faq-header {
    text-align: center;
    margin-bottom: 60px;
}

.slk-faq-header p {
    max-width: 700px;
    margin: 16px auto 0;
}

/* لیست سوالات */
.slk-faq-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* آیتم سوال */
.slk-faq-item {
    position: relative;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    backdrop-filter: blur(12px);
}

.slk-faq-item::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(500px 220px at 20% 0%, rgba(0, 130, 255, .08), transparent 55%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.slk-faq-item:hover::before {
    opacity: 1;
}

.slk-faq-item:hover {
    border-color: rgba(37, 99, 235, 0.2);
    box-shadow: 0 8px 30px rgba(2, 6, 23, 0.08);
}

/* دکمه سوال */
.slk-faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 24px 28px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: start;
    transition: all 0.3s ease;
}

.slk-faq-question:hover {
    background: rgba(0, 130, 255, 0.02);
}

.slk-faq-question-text {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 16px;
    font-weight: 600;
    color: #475569;
    line-height: 1.5;
}

.slk-faq-icon {
    flex-shrink: 0;
    color: #1a3f87;
    opacity: 0.8;
}

/* فلش باز شدن */
.slk-faq-arrow {
    flex-shrink: 0;
    color: #64748b;
    transition: transform 0.3s ease;
}

/* حالت باز شده */
.slk-faq-item.is-active .slk-faq-arrow {
    transform: rotate(180deg);
    color: #1a3f87;
}

.slk-faq-item.is-active .slk-faq-question-text {
    color: #1a3f87;
}

/* پاسخ سوال */
.slk-faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.slk-faq-answer-content {
    padding: 0 28px 24px 28px;
}

.slk-faq-answer-content p {
    font-size: 16px;
    line-height: 2.1;
    font-weight: 400;
    color: #475569;
    margin: 0;
    text-align: justify;
}

/* حالت باز */
.slk-faq-item.is-active {
    border-color: rgba(37, 99, 235, 0.3);
    box-shadow: 0 12px 40px rgba(2, 6, 23, 0.1);
}

.slk-faq-item.is-active::before {
    opacity: 1;
}

/* پیام پایان */
.slk-faq-footer {
    text-align: center;
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.slk-faq-footer p {
    font-size: 15px;
    color: #64748b;
    margin: 0;
}

.slk-faq-footer a {
    color: #1a3f87;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease;
}

.slk-faq-footer a:hover {
    color: #2563eb;
    text-decoration: underline;
}

/* ریسپانسیو */
@media (max-width: 768px) {
    .slk-faq-section {
        padding: 70px 0;
    }

    .slk-faq-container {
        padding: 0 15px;
    }

    .slk-faq-header {
        margin-bottom: 40px;
        padding: 0px 15px;
    }

    .slk-faq-question {
        padding: 18px 20px;
        gap: 12px;
    }

    .slk-faq-question-text {
        font-size: 14px;
        gap: 10px;
    }

    .slk-faq-question-text svg {
        width: 18px;
        height: 18px;
    }

    .slk-faq-answer-content {
        padding: 0 20px 20px 48px;
    }

    .slk-faq-answer-content p {
        font-size: 14px;
    }

    .slk-faq-arrow {
        width: 18px;
        height: 18px;
    }
}

/* انیمیشن ورود */
.slk-faq-item {
    opacity: 0;
    transform: translateY(20px);
}

.slk-faq-item.animate-in {
    animation: faqItemIn 0.5s ease forwards;
}

@keyframes faqItemIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.slk-cta-section {
    position: relative;
    padding: 100px 0;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
    overflow: hidden;
}

/* پس‌زمینه دکوراتیو */
.slk-cta-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.slk-cta-circle {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.4;
}

.slk-cta-circle-1 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.4) 0%, transparent 70%);
    top: -200px;
    right: -100px;
    animation: ctaFloat 8s ease-in-out infinite;
}

.slk-cta-circle-2 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.3) 0%, transparent 70%);
    bottom: -150px;
    left: -50px;
    animation: ctaFloat 10s ease-in-out infinite reverse;
}

.slk-cta-circle-3 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(96, 165, 250, 0.2) 0%, transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: ctaPulse 6s ease-in-out infinite;
}

@keyframes ctaFloat {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-30px) rotate(5deg);
    }
}

@keyframes ctaPulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.3;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 0.5;
    }
}

.slk-cta-container {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 28px;
    z-index: 1;
}

.slk-cta-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

/* بخش متن */
.slk-cta-content {
    color: #fff;
}


@keyframes ctaBlink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.4;
    }
}

.slk-cta-title {
    font-size: 36px !important;
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 20px;
    color: #fff !important;
}

.slk-cta-highlight {
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.slk-cta-desc {
    font-size: 16px;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 32px;
}

/* آیتم‌های اعتماد */
.slk-cta-trust {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 36px;
}

.slk-cta-trust-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
}

.slk-cta-trust-item svg {
    color: #3b82f6;
    flex-shrink: 0;
}

/* اطلاعات تماس */
.slk-cta-contact {
    display: flex;
    gap: 24px;
}

.slk-cta-contact-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: .5rem;
    transition: all 0.3s ease;
}

.slk-cta-contact-item:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(59, 130, 246, 0.3);
}

.slk-cta-contact-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.3), rgba(21, 56, 133, 0.3));
    border-radius: 10px;
    color: #60a5fa;
}

.slk-cta-contact-icon1 {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgb(154 185 255 / 30%), rgb(164 192 255 / 19%));
    border-radius: 10px;
    color: #60a5fa;
}


.slk-cta-contact-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.slk-cta-contact-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
}

.slk-cta-contact-value {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    transition: color 0.2s ease;
}

.slk-cta-contact-value:hover {
    color: #60a5fa;
}

/* بخش فرم */
.slk-cta-form-wrapper {
    perspective: 1000px;
}

.slk-cta-form-card {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 24px;
    padding: 40px;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.4);
}

.slk-cta-form-card:hover {
    transform: rotateY(0) rotateX(0);
}


/* فیلدهای فرم */
.slk-form-group {
    margin-bottom: 20px;
}

.slk-form-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
}

.slk-form-input {
    padding-right: 40px !important;
    direction: rtl;
    padding: 10px 16px 10px 44px;
}


.slk-form-select {
    padding-right: 40px !important;

}

.slk-form-input-wrapper,
.slk-form-select-wrapper,
.slk-form-textarea-wrapper {
    position: relative;
}

.slk-form-input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    pointer-events: none;
}

.slk-form-input-icon-right {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    pointer-events: none;
}

.slk-form-input,
.slk-form-select,
.slk-form-textarea {
    width: 100%;
    font-size: 12px;
    color: #1e293b;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: .5rem;
    outline: none;
    transition: all 0.3s ease;
}

.slk-form-input:focus,
.slk-form-select:focus,
.slk-form-textarea:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}

.slk-form-input::placeholder,
.slk-form-textarea::placeholder {
    color: #94a3b8;
}

.slk-form-select {
    appearance: none;
    cursor: pointer;
}

.slk-form-select-arrow {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    pointer-events: none;
}

.slk-form-textarea {
    resize: vertical;
    min-height: 100px;
}

/* متن حریم خصوصی */
.slk-form-privacy {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 16px;
    font-size: 12px;
    color: #94a3b8;
}

/* ریسپانسیو */
@media (max-width: 768px) {
    .slk-cta-wrapper {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .slk-cta-form-card {
        transform: none;
    }

    .slk-cta-title {
        font-size: 28px !important;
    }
}

@media (max-width: 768px) {
    .slk-cta-section {
        padding: 70px 0;
    }

    .slk-cta-container {
        padding: 0 15px;
    }

    .slk-cta-title {
        font-size: 24px !important;
    }

    .slk-cta-contact-item {
        padding: 12px 16px;
    }

    .slk-cta-form-card {
        padding: 28px 20px;
    }

    /*.c38j2 {*/
    /*    --tw-translate-x: -209px;*/
    /*}*/
    .c2l8u {
        margin-left: unset;
    }

}

.slk-custom-select {
    position: relative;
    width: 100%;
}

/* Trigger - قسمت قابل کلیک */
.slk-custom-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 14px;
    font-size: 12px;
    font-weight: 400;
    min-height: 40px;
    color: #1e293b;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.slk-custom-select.active .slk-custom-select-trigger {
    border: 1px solid #3b82f6;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}

.slk-custom-select-placeholder {
    color: #94a3b8;
    font-weight: 400;
}

.slk-custom-select-arrow {
    color: #6366f1;
    transition: transform 0.3s ease;
}

.slk-custom-select.active .slk-custom-select-arrow {
    transform: rotate(180deg);
}

/* Dropdown - لیست گزینه‌ها */
.slk-custom-select-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    max-width: 300px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1),
    0 10px 20px rgba(0, 0, 0, 0.05);
    z-index: 1000;
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
    pointer-events: none;
    visibility: hidden;
    transition: opacity 160ms ease,
    transform 160ms ease,
    visibility 0s linear 160ms;
}

.slk-custom-select.active .slk-custom-select-dropdown {
    opacity: 1;
    max-height: 300px;
    min-width: 180px;
    overflow-y: auto;
    transform: translateY(0) scale(1);
    pointer-events: auto;
    visibility: visible;
    transition-delay: 0s;
}

/* گزینه‌های داخل لیست */
.slk-custom-select-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    margin: 10px;
    font-size: 14px;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s ease;
}

.slk-custom-select-option:hover {
    background: linear-gradient(135deg, #edf4ff 0%, #edf4ff 100%);
    color: #4289f7;
    margin: 15px;
    border-radius: 10px;
}

.slk-custom-select-option.selected {
    background: linear-gradient(135deg, #edf4ff 0%, #edf4ff 100%);
    color: #4289f7;
    border-radius: 10px;
    font-size: 12px;
}

.slk-custom-select-option-icon {
    font-size: 18px;
}

/* اسکرول بار سفارشی */
.slk-custom-select-dropdown::-webkit-scrollbar {
    width: 6px;
}

.slk-custom-select-dropdown::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 3px;
}

.slk-custom-select-dropdown::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

.slk-custom-select-dropdown::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* مخفی کردن select اصلی */
.slk-form-select-hidden {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.cbgts3 {
    padding-top: 3rem;
}

/* پس‌زمینه تیره */
.slk-popup-overlay {
    display: none;
    border-radius: 23px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(188 188 188 / 60%);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.slk-popup-overlay.slk-popup-active {
    display: flex;
    opacity: 1;
}

/* محتوای پاپ‌آپ */
.slk-popup-content {
    background: white;
    display: flex;
    text-align: center;
    padding: 40px 50px;
    border-radius: 20px;
    text-align: center;
    max-width: 400px;
    width: 90%;
    transform: scale(0.8);
    transition: transform 0.3s ease;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    flex-direction: column;
    align-items: center;
}

.slk-popup-overlay.slk-popup-active .slk-popup-content {
    transform: scale(1);
}

/* آیکون */
.slk-popup-icon {
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
}

.slk-popup-icon svg {
    animation: slk-popup-bounce 0.6s ease;
}

@keyframes slk-popup-bounce {
    0% {
        transform: scale(0);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

/* عنوان و متن */
.slk-popup-title {
    font-size: 20px !important;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 10px 0;
}

.slk-popup-text {
    font-size: 14px;
    color: #475569;
    margin: 0 0 25px 0;
    font-weight: 500;
    line-height: 1.6;
}

/* دکمه بستن */
.slk-popup-close {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: white;
    border: none;
    padding: 12px 40px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.slk-popup-close:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(16, 185, 129, 0.4);
}


/* استایل پاپ‌آپ دمو */
.slk-demo-popup-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity 0.3s ease;
    padding: 20px;
}

.slk-demo-popup-overlay.slk-popup-active {
    display: flex;
    opacity: 1;
}

/* محتوای پاپ‌آپ */
.slk-demo-popup-content {
    background: #fff;
    border-radius: 24px;
    padding: 40px;
    max-width: 480px;
    width: 100%;
    transform: scale(0.9) translateY(20px);
    transition: transform 0.3s ease;
    box-shadow: 0 30px 80px rgba(15, 23, 42, 0.25);
    border: 1px solid rgba(226, 232, 240, 0.9);
    position: relative;
    max-height: 90vh;
    overflow-y: auto;
}

.slk-demo-popup-overlay.slk-popup-active .slk-demo-popup-content {
    transform: scale(1) translateY(0);
}

/* دکمه بستن */
.slk-demo-popup-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    background: #f1f5f9;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #64748b;
}

.slk-demo-popup-close:hover {
    background: #e2e8f0;
    color: #1e293b;
}

.slk-demo-popup-close svg {
    width: 20px;
    height: 20px;
}

/* هدر پاپ‌آپ */
.slk-demo-popup-header {
    text-align: center;
    margin-bottom: 28px;
}

.slk-demo-popup-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    box-shadow: 0 10px 25px rgba(37, 99, 235, 0.35);
}

.slk-demo-popup-icon svg {
    width: 32px;
    height: 32px;
    color: #fff;
}

.slk-demo-popup-title {
    font-size: 20px !important;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 8px 0;
}

.slk-demo-popup-desc {
    font-size: 14px;
    color: #64748b;
    margin: 0;
    line-height: 1.6;
}

/* فیلدهای فرم در پاپ‌آپ */
.slk-demo-form .slk-form-group {
    margin-bottom: 16px;
}

.slk-demo-form .slk-form-label {
    font-size: 12px;
    margin-bottom: 6px;
}

.slk-demo-form .slk-form-input {
    padding: 10px 16px 10px 44px;
    font-size: 12px;
    border-radius: 10px;
}

.slk-demo-form .slk-custom-select-trigger {
    padding: 12px 14px;
    font-size: 12px;
    border-radius: 10px;
}

.slk-demo-form .slk-custom-select-dropdown {
    border-radius: .5rem;
}

.slk-demo-form .slk-custom-select-option {
    padding: 12px 16px;
    font-size: 13px;
}

.slk-demo-form .slk-form-textarea {
    padding: 12px 14px;
    font-size: 13px;
    border-radius: 10px;
    min-height: 80px;
}

/* متن حریم خصوصی */
.slk-demo-form-privacy {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 14px;
    font-size: 11px;
    color: #94a3b8;
}

.slk-demo-form-privacy svg {
    width: 12px;
    height: 12px;
}

/* ریسپانسیو */
@media (max-width: 480px) {
    .slk-demo-popup-content {
        padding: 28px 20px;
        border-radius: 20px;
    }

    .slk-demo-popup-title {
        font-size: 18px !important;
    }

    .slk-demo-request-btn {
        padding: 12px 20px;
        font-size: 13px;
    }
}


/* پیام خطای اعتبارسنجی */
.slk-demo-error {
    display: none;
    margin-top: 6px;
    font-size: 12px;
    color: #ef4444;
}

.slk-demo-error.show {
    display: block;
}

/* حالت موفقیت */
.slk-demo-success {
    text-align: center;
    padding: 12px 0 4px;
}

.slk-demo-success .slk-demo-popup-icon {
    margin-bottom: 18px;
    background: linear-gradient(180deg, #4ade80 0%, #16a34a 100%);
    box-shadow: 0 10px 25px rgba(22, 163, 74, 0.35);
}

.slk-demo-success .slk-demo-popup-icon svg {
    color: #16a34a;
}

.slk-demo-success .slk-demo-popup-desc {
    max-width: 300px;
    margin: 0 auto;
}

.pt-section {
    padding-top: 6rem !important;
}

.mt-section {
    margin-top: 6rem !important;
}


.mt-60 {
    margin-top: 60px;
}

/* Floating Contact Widget */
.fcw-container {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

/* Main Square Button */
.fcw-main-btn {
    width: 60px;
    height: 60px;
    border-radius: 15px;
    background: linear-gradient(135deg, rgb(78 173 255) 0%, rgb(20 51 121) 100%);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    color: white;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
}

.fcw-main-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 15px;
    background: linear-gradient(135deg, rgb(78 173 255) 0%, rgb(20 51 121) 100%);
    z-index: -1;
    opacity: 0;
    animation: fcwPulse 6s ease-in-out infinite;
}


@keyframes fcwPulse {
    0% {
        transform: scale(1);
        opacity: 0.6;
        box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.7);
    }
    50% {
        transform: scale(1.15);
        opacity: 0;
        box-shadow: 0 0 0 20px rgba(102, 126, 234, 0);
    }
    100% {
        transform: scale(1);
        opacity: 0;
        box-shadow: 0 0 0 0 rgba(102, 126, 234, 0);
    }
}

/* Stop pulse on hover or when active */
.fcw-main-btn:hover::before,
.fcw-main-btn.active::before {
    animation: none;
    opacity: 0;
}

/* Subtle scale pulse effect */
.fcw-main-btn {
    animation: fcwScale 4s ease-in-out infinite;
}

@keyframes fcwScale {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

/* Stop on hover or active */
.fcw-main-btn:hover,
.fcw-main-btn.active {
    animation: none;
    transform: scale(1);
}

.fcw-main-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 12px 35px rgba(102, 126, 234, 0.6);
}

.fcw-main-btn:active {
    transform: scale(0.95);
}

/* Icons */
.fcw-icon-open,
.fcw-icon-close {
    position: absolute;
    transition: all 0.3s ease;
}

.fcw-icon-close {
    opacity: 0;
    transform: rotate(-90deg) scale(0.5);
}

.fcw-main-btn.active .fcw-icon-open {
    opacity: 0;
    transform: rotate(90deg) scale(0.5);
}

.fcw-main-btn.active .fcw-icon-close {
    opacity: 1;
    transform: rotate(0) scale(1);
}

.fcw-panel {
    background: white;
    border-radius: 25px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    width: 340px;
    right: 0px;
    opacity: 0;
    transform: translateY(20px) scale(0.9);
    transition: all 0.4s cubic-bezier(0.68, -0.2, 0.265, 1.2);
    transform-origin: bottom center;
    margin-bottom: 0;
    visibility: hidden;
    position: absolute;
    bottom: 75px;
}

.fcw-panel.active {
    opacity: 1;
    transform: translateY(0) scale(1);
    visibility: visible;
}

/* Items - More spacing */
.fcw-item {
    display: flex;
    padding: 8px;
    text-decoration: none;
    color: #333;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    flex-direction: row;
    align-items: center;
}

.fcw-item:last-child {
    border-bottom: none;
}

.fcw-item::before {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 0;
    background: #f3f4f6;
    border-radius: 20px;
    transition: all 0.3s ease;
}

.fcw-item:hover::before {
    width: 100%;
}


.fcw-item-text {
    font-size: 13px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.fcw-item:hover .fcw-item-text {
    transform: translateX(-5px);
}

.fcw-item-icon {
    width: 55px;
    height: 55px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: all 0.3s ease;
    transform: scale(0.8);
}


/* Item Colors */
.fcw-item:nth-child(1) .fcw-item-icon {
    background: #228B22;
}

/* Stagger Animation - From Bottom to Top */
.fcw-panel.active .fcw-back {
    animation: fcwSlideIn 0.4s ease forwards;
    opacity: 0;
}

.fcw-panel.active .fcw-back:nth-of-type(1) {
    animation-delay: 0.08s;
}

.fcw-panel.active .fcw-back:nth-of-type(2) {
    animation-delay: 0.1s;
}

.fcw-panel.active .fcw-back:nth-of-type(3) {
    animation-delay: 0.12s;
}

.fcw-panel.active .fcw-back:nth-of-type(4) {
    animation-delay: 0.14s;
}

.fcw-panel.active .fcw-back:nth-of-type(5) {
    animation-delay: 0.16s;
}

@keyframes fcwSlideIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .fcw-container {
        bottom: 20px;
        right: 20px;
    }

    .fcw-main-btn {
        width: 50px;
        height: 50px;
    }

    .fcw-panel {
        width: 390px;
        bottom: 65px;
    }

    .fcw-item {
        padding: 14px 15px;
    }

    .p-rl15 {
        padding: 0 15px !important;
    }

    .support-table {
        padding: 10px;
    }
}

.fcw-back {
    background: #f9fafb;
    margin: 15px;
    border-radius: 20px;
}

.bg-insta {
    background: linear-gradient(90deg, #8224E3 0%, #DD3333 100%) !important;
}

.bg-tel {
    background-color: #20AFDE !important;
}

.bg-mail {
    background-color: #d53243 !important;
}

/* Panel Header */
.fcw-panel-header {
    color: #475569;
    padding: 20px 15px 5px 15px;
    display: flex;
    gap: 3px;
    align-items: center;
    flex-direction: column;
}

.fcw-panel-header span:first-child {
    font-weight: 700;
    font-size: 16px;
}

.fcw-panel-subtitle {
    font-size: 12px;
    opacity: 0.85;
    margin-top: 5px;
    padding-top: 8px;
    border-top: 1px dashed #dee6ed;
}

.ticket-search-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin: 18px 0 12px;
}

.search-group {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 35%;
    min-width: 260px;
}

.ticket-search-box {
    flex: 1;
}

.ticket-search-box input {
    width: 100%;
    height: 42px;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 0 14px;
    font-size: 14px;
    outline: none;
    transition: .2s;
}

.ticket-search-box input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, .08);
}

.ticket-search-btn {
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 10px;
    background: rgb(220 233 255 / 50%);
    cursor: pointer;
    transition: .2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ticket-search-btn:hover {
    opacity: .9;
}

@media (max-width: 768px) {

    .ticket-search-wrap {
        align-items: stretch;
        flex-direction: column-reverse;
        gap: 10px;
        margin: 0 0 10px;
        /*padding: 0px 15px;*/
        display: flex;
    }

    .search-group {
        width: 100%;
        min-width: auto;
    }

    .support-head h3 {
        font-size: 1.1rem !important;
    }

    .support-head {
        margin-bottom: .5rem;
    }

    .fs12 {
        font-size: 12px !important;
    }


    .account-card {
        padding: 1rem;
    }

    .file-upload-box {
        width: 100% !important;
    }

    .btn-upload-send {
        flex-direction: column;
        gap: 10px;
    }

    .ticket-meta-item strong {
        font-size: 12px !important;
    }

    .ticket-meta-item span {
        font-size: 12px !important;
    }

    .ticket-meta-grid {
        padding: 15px !important;
    }

    .chat-item p {
        font-size: 12px !important;
    }

    .df {
        flex-direction: column;
    }
}


.fs20 {
    font-size: 20px !important;
}

.df {
    display: flex;
}

.border-gray {
    margin: 20px 0px;
    border: 1px solid #f0f0f0;
}

.file-upload-box {
    border: 1px dashed #dadada;
    padding: 6px;
    border-radius: .5rem;
    min-width: 260px;
    width: 35%;
    min-width: 260px;
    text-align: start;
}

.file-input {
    display: none;
}

/* دکمه فایل */
.file-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 35px;
    padding: 0 14px;
    border-radius: .3rem;
    background: #f3f4f6;
    font-size: 13px;
    cursor: pointer;
    transition: .2s;
    white-space: nowrap;
}

.file-label:hover {
    background: rgb(220 233 255 / 50%);
    color: #2563ebc9:
}

/* نام فایل */
.file-name {
    font-size: 12px;
    color: #6b7280;
}

.btn-upload-send {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.btn-upload-send1 {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
}

/* ===============================
   Shared Support / Ticket UI
================================= */

/* اعلان پیام جدید */
.msg-ping {
    position: relative;
    display: inline-flex;
    width: 8px;
    height: 8px;
    margin-inline-start: 6px;
}

.msg-ping::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: #ef4444;
    animation: ping 1.3s cubic-bezier(0, 0, .2, 1) infinite;
}

.msg-ping::after {
    content: "";
    position: absolute;
    inset: 2px;
    border-radius: 999px;
    background: #dc2626;
}

@keyframes ping {
    75%, 100% {
        transform: scale(2);
        opacity: 0;
    }
}

/* ===============================
   User Overview Box
================================= */

.user-overview {
    margin-top: 16px;
    padding: 16px;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.user-overview h4 {
    margin: 0 0 12px;
    font-size: .85rem;
    font-weight: 700;
    color: #0f172a;
}

.user-facts {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.user-fact {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding-top: 8px;
    border-top: 1px dashed #eef2f7;
}

.user-fact:first-child {
    border-top: none;
    padding-top: 0;
}

.user-fact .label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .78rem;
    color: #6b7280;
}

.user-fact .label i {
    width: 14px;
    height: 14px;
    color: #2563eb;
}

.user-fact strong {
    font-size: .82rem;
    font-weight: 700;
    color: #111827;
}

/* ===============================
   Ticket Form
================================= */

.ticket-form {
    display: grid;
    gap: 18px;
}

.ticket-form-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    background: #fbfcfe;
    border-radius: 16px;
    padding: 18px;
    border: 1px solid #eef2f7;
    display: grid;
    gap: 12px
}

.ticket-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ticket-form-group.full {
    grid-column: 1 / -1;
}

.ticket-form-label {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 5px;
}

.ticket-form-control {
    width: 100%;
    min-height: 40px;
    padding: 10px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    color: #111827;
    font-size: .88rem;
    line-height: 1.5;
    transition: border-color .2s ease, box-shadow .2s ease;
    font-size: 12px;
    font-weight: 400;
}

.ticket-form-control:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .10);
}

.ticket-form-control::placeholder {
    color: #9ca3af;
}

textarea.ticket-form-control {
    min-height: 140px;
    resize: vertical;
}

.ticket-form-hint {
    font-size: .75rem;
    color: #6b7280;
}

.ticket-form-check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: .8rem;
    color: #4b5563;
}

.ticket-form-check input {
    margin-top: 3px;
}

@media (max-width: 768px) {

    .ticket-form-grid {
        grid-template-columns:1fr;
        padding: 20px 10px;
    }

    .ticket-form-group.full {
        grid-column: auto;
    }

    .user-fact {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .ticket-form-label {
        font-size: 13px;
    }

    .ticket-form-control {
        font-size: 12px !important;
    }

    .slk-custom-select-placeholder {
        font-size: 12px;
    }
}

/* ===============================
   Custom Select Style
================================= */

select.ticket-form-control {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    height: 48px;
    padding: 0 14px 0 42px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background-color: #fff;
    background-image: url("data:image/svg+xml;utf8,<svg fill='none' stroke='%234f46e5' stroke-width='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'></path></svg>");
    background-repeat: no-repeat;
    background-size: 18px;
    background-position: left 14px center;

    font-size: 14px;
    color: #0f172a;
    cursor: pointer;
    transition: all .25s ease;
}

/* hover */
select.ticket-form-control:hover {
    border-color: #cbd5e1;
    background-color: #f8fafc;
}

/* focus */
select.ticket-form-control:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, .10);
    background-color: #fff;
}

/* disabled option */
select.ticket-form-control:invalid {
    color: #94a3b8;
}

/* موبایل */
@media (max-width: 768px) {
    select.ticket-form-control {
        font-size: 13px;
    }
}

.stack-cards-section {
    height: 400vh;
    position: relative;
    background: #050505;
}

.stack-wrap {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.stack-card {
    width: min(720px, 90%);
    min-height: 380px;
    border-radius: 28px;
    padding: 40px;
    position: absolute;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .45),
    inset 0 0 0 1px rgba(255, 255, 255, .03);
    transition: transform .15s linear,
    opacity .15s linear;
    will-change: transform;
}

.stack-card h2 {
    margin: 20px 0 14px;
    font-size: 38px;
    line-height: 1.4;
}

.stack-card p {
    margin: 0;
    color: #b5b5b5;
    font-size: 18px;
    line-height: 2;
}

.badge {
    display: inline-flex;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .08);
    font-weight: 700;
}

.card-1 {
    background: linear-gradient(135deg, #111, #191919);
    z-index: 1;
}

.card-2 {
    background: linear-gradient(135deg, #151515, #202020);
    z-index: 2;
}

.card-3 {
    background: linear-gradient(135deg, #191919, #252525);
    z-index: 3;
}

.card-4 {
    background: linear-gradient(135deg, #1d1d1d, #2b2b2b);
    z-index: 4;
}

@media (max-width: 768px) {

    .stack-card {
        min-height: 320px;
        padding: 28px;
        width: 92%;
    }

    .stack-card h2 {
        font-size: 28px;
    }

    .stack-card p {
        font-size: 16px;
        line-height: 1.9;
    }

    .mb4r {
        margin-bottom: 0rem !important;
    }

    .d-none {
        display: none !important;
    }

    .blog-rail-interact {
        min-height: 300px !important;
    }

    .border-title {
        font-size: 20px !important;
    }

    .btn-crusle {

        justify-content: center;
        margin-top: 1.5rem !important;
    }

}

@media (min-width: 769px) {
    .dmd-none {
        display: none !important;
    }
}

/*.typing-word{*/
/*    display:inline-block;*/
/*    min-width:110px;*/
/*    color:#ff7a00;*/
/*    font-weight:700;*/
/*    transition:opacity .25s ease, transform .25s ease;*/
/*}*/
/*.typing-word.hide{*/
/*    opacity:0;*/
/*    transform:translateY(-8px);*/
/*}*/
/*.typing-word.show{*/
/*    opacity:1;*/
/*    transform:translateY(0);*/
/*}*/

.typing-word {
    display: inline-block;
    min-width: 280px;
    color: #272d6b;
    font-weight: 700;
    position: relative;
}

.typing-word.hero-highlight {
    display: inline-block;
}

.typing-word.hero-highlight::after {
    content: "|";
    margin-right: 4px;
    animation: blink .7s infinite;
    position: static;
    width: auto;
    height: auto;
    background: none;
    filter: none;
    opacity: 1;
    transform: none;
}

.typing-word::after {
    content: "|";
    margin-right: 4px;
    animation: blink .7s infinite;
}

@keyframes blink {
    0%, 50% {
        opacity: 1;
    }
    51%, 100% {
        opacity: 0;
    }
}

.mb4r {
    margin-bottom: 4rem;
}


.b-rl {
    padding: 0 1.5rem;
}

.text-white {
    color: #fff !important;
}

.gray-light {
    color: #5d5d5d !important;
}

[data-active="true"] h6 {
    color: #128fe8;
    font-weight: 600;
    opacity: 1;
}


[data-active="true"] .svg-word1 svg path {
    fill: #128fe8;
}

.bgsq{
    background: #128fe8 !important;
}

.ttvg{
    padding-bottom: 65px;
    font-size: 40px !important;
}

[data-active="false"] h6 {
    color: #ffffff;
    opacity: .5;
    font-size: 18px !important;
}


.blog-rail {

    direction: rtl;
}

.blog-rail-item {
    transition: opacity .25s ease, transform .25s ease;
}

.blog-rail-item.is-hidden {
    display: none; /* مهم‌ترین تغییر */
}

/* حالت مخفی (بدون display none) */
.blog-rail-item.is-hidden {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
    pointer-events: none;
    max-height: 0;
    overflow: hidden;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

/* حالت جمع شدن نرم */
.blog-rail-item.is-leaving {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
    pointer-events: none;
}

/* تب‌های فیلتر مجله */
.blog-filters .blog-filter-btn {
    cursor: pointer;
    transition: background-color .25s ease, color .25s ease;
}

.blog-filters .blog-filter-btn.active,
.blog-filters .blog-filter-btn.active:hover {
    background-color: rgb(31 41 55 / 1);
    color: rgb(229 231 235 / 1);
}

.blog-rail-interact {
    min-height: 450px; /* یا بر اساس کارت */
}

.cart-title {
    font-size: 20px !important;
}

.btn-crusle {
    display: flex;
    align-items: center;
    gap: 10px;
}

.border-title {
    position: relative;
    padding-right: 10px;
}

.border-title::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 60%;
    background: linear-gradient(to bottom, #377cf4, #2867ec);
    border-radius: 2px;
}


.alvand-versions-section {
    position: relative;
    padding: 0px 0 140px 0;
    background: #f8fafc;
    overflow: hidden;
}

/* ===== CONTAINER ===== */
.alvand-versions-container {
    max-width: 1200px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

/* ===== MEDIA (RIGHT) ===== */
.alvand-versions-media {
    position: relative;
    width: 38%;
    top: 100px;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 1px 15px rgb(218 218 218 / 43%), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.alvand-versions-media img {
    width: 100%;
    display: block;
    border-radius: 40px;
    background-color: #fff;
    padding: 20px;
    z-index: 2;
    position: relative;
}

.alvand-versions-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: linear-gradient(135deg, rgb(78 173 255) 0%, rgb(20 51 121) 100%);

    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);

    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);

    animation: alvandPlayScale 4s ease-in-out infinite;
    z-index: 2;
    overflow: visible;
}

.alvand-versions-play::before {
    content: '';
    position: absolute;

    /* بزرگ‌تر از دکمه */
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;

    border-radius: 20px;
    background: inherit;

    z-index: -1;

    opacity: 0.5;

    animation: alvandPlayPulse 2s ease-out infinite;
}

/* SVG تنظیم */
.alvand-versions-play svg {
    width: 45px;
    height: 45px;
    z-index: 2;
}

.alvand-versions-play path {
    stroke: #fff;
    stroke-width: 2;
}

/* هاور */
.alvand-versions-play:hover {
    transform: translate(-50%, -50%) scale(1.08);
    box-shadow: 0 12px 35px rgba(20, 51, 121, 0.5);
}

@keyframes alvandPlayScale {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.08);
    }
}

@keyframes alvandPlayPulse {
    0% {
        transform: scale(1);
        opacity: 0.5;
    }
    60% {
        transform: scale(1.4);
        opacity: 0.2;
    }
    100% {
        transform: scale(1.4); /* بزرگ‌تر */
        opacity: 0;
    }
}

/* ===== CONTENT (LEFT) ===== */
.alvand-versions-content {
    width: 50%;
    margin-top: 70px;
}

.alvand-title {
    position: relative;
    font-size: 28px !important;
    color: #6b7280;
    margin-bottom: 20px;
    font-weight: 700;
    z-index: 2;
}

.alvand-title-en {
    position: absolute;
    top: -20px;
    right: 0;
    font-size: 38px;
    font-weight: 800;
    letter-spacing: 2px;
    white-space: nowrap;
    z-index: -1;
    background: linear-gradient(to bottom, #e6e6e6 1%, rgb(255 255 255));
    -webkit-background-clip: text;
    -webkit-text-fill-color: #ffffff00;
}

/* رنگ الوند */
.alvand-title span:last-child {
    color: #111827;
    font-weight: initial;
}

.alvand-versions-content p {
    color: #475569;
    line-height: 2.1;
    margin-bottom: 25px;
    font-size: 17px;
    text-align: justify;
}


.alvand-versions-strip {
    position: absolute;
    bottom: 75px;
    width: 72%;
    height: 100px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 20px;
    z-index: 1;
    overflow: hidden;
    background: linear-gradient(135deg, #2f71f0, #5291ff);
    box-shadow: 0 3px 25px rgb(49 115 241 / 43%), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.alvand-versions-strip::after {
    content: "";
    position: absolute;
    inset: 0;

    background-image: url("./images/alvand-pattern.png"); /* تصویر خودت */
    background-size: cover; /* یا contain / 200px */
    background-repeat: repeat; /* اگر pattern هست */
    background-position: center;

    opacity: 0.15; /* خیلی مهم: کم باشه */
    mix-blend-mode: overlay; /* حرفه‌ای‌تر */

    pointer-events: none;
}

/* ===== CARDS ===== */
.alvand-versions-cards {
    position: absolute;
    bottom: 39px;
    width: 100%;
    display: flex;
    gap: 20px;
    z-index: 2;
    justify-content: flex-end;
    margin-inline-end: 645px;
}

.alvand-version-card {
    width: 190px;
    height: 115px;
    background: #ffffff;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 18px 10px;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 15px rgb(218 218 218 / 43%), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.alvand-version-card h5 {
    font-size: 20px !important;
    margin-bottom: 6px;
    color: #0f172a;
}

.alvand-version-card p {
    font-size: 11px;
    color: #64748b;
}


/* SVG گوشه بالا چپ */
.alvand-card-icon {
    position: absolute;
    top: 10px;
    left: 10px;
    border-radius: 12px;
    width: 35px;
    height: 35px;
    background: #d4e9ff;
    pointer-events: none;
    padding: 7px;
}


@media (max-width: 768px) {

    .alvand-versions-container {
        display: flex;
        flex-direction: column;
        gap: 15px;
        padding: 0;
    }

    /* ترتیب درست */
    .alvand-versions-content {
        order: 1;
        width: 100%;
        margin-top: unset;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .alvand-versions-content h2 {
        margin-bottom: 12px;
    }

    .alvand-versions-content p {
        margin-bottom: 1rem;
        text-align: center;
    }

    .alvand-versions-media {
        order: 3;
        width: 100%;
        top: unset;
    }

    .alvand-versions-media img {
        width: 100%;
        height: auto;
        display: block;
    }

    .alvand-versions-cards {
        order: 4;
        margin-inline-end: unset;
        position: unset;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .alvand-version-card:nth-child(3) {
        grid-column: 1 / -1;
    }

    .alvand-version-card {
        width: 100%;
        height: 120px;
    }

    /* بهتر شدن spacing کل سکشن */
    .alvand-versions-section {
        padding: 60px 16px;
        overflow: unset;
    }

    /* متن انگلیسی مزاحم نشه */
    .alvand-title-en {
        font-size: 34px;
        text-align: center;

        top: -18px;
    }

    /* دکمه اگر بزرگه */
    .alvand-versions-content a {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .alvand-card-icon {

        width: 40px;
        height: 40px;
    }
}


/* استایل آیکون */
.svg-word1 {
    background-color: #2c2c2d;
    width: 45px;
    height: 45px;
    padding: 12px;
    border-radius: 10px;
    margin-bottom: 20px;
    transition: all 0.3s ease;
    top: 20px;
    /* margin-bottom: 95px; */
    position: absolute;
    margin-right: 5px;
}

.svg-word2 {
    background: rgb(220 233 255 / 50%);
    width: fit-content;
    padding: 12px;
    border-radius: 10px;
    transition: all 0.3s ease;
    margin-inline-end: 15px;
}

/* استایل باکس نگهدارنده عکس */
.img-word2 {
    width: 45px;
    height: 45px;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 20px;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 10px;
    transition: all 0.3s ease;
    margin-inline-end: 15px;
}

/* استایل خود عکس داخل باکس */
.img-word2 img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 15px 0;
    font-size: 0.95rem;
    line-height: 1.7;
    background: #ffffff;
    color: #111827;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

/* ===== HEADER ===== */
table thead th {
    background: #f9fafb;
    padding: 14px 16px;
    text-align: right;
    font-weight: 700;
    color: #111827;
    border-bottom: 1px solid #e5e7eb;
    border-right: 1px solid #e5e7eb;
}

table thead th:first-child {
    border-left: none;
}

/* ===== BODY ===== */
table tbody td {
    padding: 14px 16px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
    border-right: 1px solid #e5e7eb;
    font-weight: 400;
    font-size: 14px;
}

table tbody td:first-child {
    border-left: none;
}

/* ===== ROW HOVER ===== */
table tbody tr:hover {
    background: #f3f4f6;
}


/* ===== LAST ROW ===== */
table tbody tr:last-child td {
    border-bottom: none;
}

/* ===== LINKS ===== */
table a {
    color: #2563eb;
    text-decoration: none;
}

table a:hover {
    text-decoration: underline;
}

/* ===== CODE ===== */
table code {
    background: #f3f4f6;
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 0.85rem;
}

/* ===== MOBILE SCROLL FIX ===== */
@media (max-width: 768px) {
    table {
        display: block;
        width: 100%;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    table tbody td {
        font-size: 13px;
    }
}

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


.alvDocs {
    max-width: 85rem;
    margin: auto;
}

/* HEADER */
.alvDocs__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 2rem;
}

.alvDocs__title {
    font-size: 2.4rem;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.alvDocs__subtitle {
    color: #374151 !important;
    margin-top: 6px;
    font-size: 1.1rem;
    line-height: 2;
    text-align: right;
}

/* STATS */
.alvDocs__stats {
    display: flex;
    gap: 1rem;
}

.alvDocs__stat {
    background: #f6f6f6;
    padding: 10px 14px;
    border-radius: 12px;
    text-align: center;
    min-width: 70px;
}

.alvDocs__stat .num {
    font-weight: 700;
    display: block;
}

.alvDocs__stat .lbl {
    font-size: 11px;
    color: #6b7280;
}


.alvDocs__filters {
    display: flex;
    gap: 8px;
}

.alvDocs__filter {
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    cursor: pointer;
    font-size: 14px;
}

.alvDocs__filter.is-active {
    background: #2563ebc9;
    color: #fff !important;
}

/* LIST */
.alvDocs__list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ITEM */
.alvDocs__item {
    border: 1px solid #eef0f3;
    border-radius: 16px;
    padding: 30px;
    background: #fff;
    transition: .2s;
    z-index: 1;
}

.alvDocs__item:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
}


.alvDocs__left h3 {
    font-size: 22px !important;
    margin: 25px 0px 12px 0px;
    font-weight: 600;
}

.alvDocs__left p {
    font-size: 0.9rem;
    color: #6b7280;
}


/* META */
.alvDocs__meta {
    display: flex;
    gap: 10px;
    font-size: 16px;
    color: #6b7280;
}

/* BADGES */
.badge-api {
    font-size: 11px;
    padding: 6px 10px;
    border-radius: 6px;
    font-weight: 600;
    min-height: 33px;
}

.badge--new {
    background: rgb(220 233 255 / 50%);
    color: #2563ebc9;
}

.badge--updated {
    background: #dcfce7a8;
    color: #19ba54;
}

.badge--deprecated {
    background: rgb(220 220 220 / 50%);
    color: #767676c9;
}

.badge--beta {
    background: #ffd04640;
    color: #ffbe00;
}

.row-reverse {
    display: flex;
    flex-direction: row-reverse;
}

.ml03 {
    margin-left: 5px;
}

.mb-1 {
    margin-bottom: 10px;
}

.blog-excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.df-c-tag {
    display: flex;
    justify-content: space-between;
    align-items: center;
}


@media (max-width: 768px) {
    .alvDocs__head {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }

    .alvDocs__title {
        font-size: 1.5rem;
        text-align: center;
    }

    .alvDocs__stat {
        background: #edededb5;
    }

    .df-c-tag {
        flex-direction: column;
        align-items: flex-start;
    }

    .alvDocs__item {
        border-radius: 13px;
        padding: 15px;
    }

    .alvDocs__left h3 {
        font-size: 19px !important;
        margin: 20px 0px 5px 0px;
    }

    .blog-meta {
        gap: .6rem;
        font-size: 13px;
        padding: 10px 0px 0px 0px;
        margin-inline-start: 192px;
    }

    .blog-meta svg {
        display: none;
    }

    .alvDocs__list {
        gap: 14px;
    }

    .blog-excerpt {
        display: -webkit-box;
        -webkit-line-clamp: 2;
    }

    .alvDocs__subtitle {
        text-align: center;
    }

    .alvDocs__stat {
        background: #f9fafb;
    }
}


.alv-page {
    direction: rtl;
    background: #0f172a;
    color: #e5e7eb;
}

.alv-section {
    padding: 60px 20px;
    border-bottom: 1px solid #1f2937;
}

.alv-container {
    max-width: 1100px;
    margin: 0 auto;
}

/* HERO */
.alv-hero-title {
    font-size: 40px;
    font-weight: bold;
    margin-bottom: 10px;
}

.alv-hero-subtitle {
    color: #9ca3af;
}

/* TEXT */
.alv-text {
    color: #d1d5db;
    line-height: 1.8;
}

/* FEATURES */
.alv-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.alv-card {
    background: #111827;
    padding: 20px;
    border-radius: 12px;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .alv-grid {
        grid-template-columns: 1fr;
    }

    .alv-hero-title {
        font-size: 28px;
    }
}

.df-center-section {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}

.c442s {
    width: 70%;
    max-width: 90rem;
}

.blog-card-cover1 {
    width: 100%;
    height: 500px;
    object-position: center;
    border-radius: 1rem;
    object-fit: cover;
}

.intro-box {
    width: 100%;
    display: flex;
    justify-content: center;
}

.intro-box__inner {
    width: 100%;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 14px;
    padding: 25px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
    transition: all 0.2s ease;
    border-right: 2px solid #93c5fd;
}


.intro-box__text {
    font-size: 17px;
    line-height: 2.2;
    color: #555;
    margin: 0;
}

/* responsive */
@media (max-width: 768px) {
    .intro-box__inner {
        padding: 14px 14px;
        border-radius: 12px;
    }

    .intro-box__text {
        font-size: 15px;
    }

    .df-center-section {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
    }

    .c442s {
        width: 100%;
    }

    .blog-card-cover1 {
        width: 100%;
        height: 250px;
    }

    .cu8qb {
        margin-top: 2rem;
    }

    .cnv5k1 {
        margin-bottom: 1.5rem;
    }

    .c9s5u {
        font-size: 22px;
    }

    .cprne {
        font-size: 15px;
    }

    .mtop30 {
        margin-top: 30px;
    }

    .w-100 {
        width: 100% !important;
    }

    .mr10 {
        margin-right: unset !important;
    }

    .revenue-desc1 {
        font-size: 15px;
    }

    .text-c-mob {
        text-align: center !important;
    }

    .slk-legend {
        flex-direction: row;
    }

    .slk-cta-form-card1 {
        padding: 20px !important;
    }

    .cnrm4 {
        line-height: 1.8;
    }

    .slk-faq-item {
        border-radius: 10px;
    }
}

.mr10 {
    margin-right: 10px;
}

.text-r {
    text-align: right !important;
}

.mx1400 {
    max-width: 1400px;
    margin: auto;
}

.slk-cta-form-card1 {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 15px;
    padding: 40px;
    box-shadow: 0 3px 5px rgb(187 187 187 / 40%);
}

.templates-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin: auto;
}

/* کارت */
.template-card {
    display: flex;
    flex-direction: row-reverse;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
    transition: 0.3s ease;
    align-items: center;
    min-height: 360px;
}

.template-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.1);
}

/* ستون تصویر */
.template-image {
    width: 50%;
    min-width: 260px;
    flex-shrink: 0;
    padding: 10px;
}

/* viewport اسکرول */
.image-scroll {
    width: 100%;
    height: 340px;
    overflow: hidden;
    position: relative;
    border-radius: 10px;
}

/* خود تصویر */
.image-scroll img {
    width: 100%;
    height: auto;
    display: block;

    transform: translateY(0);
    transition: transform 7s linear;
}

/* hover */
.template-card:hover .image-scroll img {
    transform: translateY(calc(-100% + 400px));
}

/* محتوا */
.template-content {
    width: 50%;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.template-meta {
    display: flex;
    gap: 10px;
    font-size: 12px;
    opacity: 0.7;
    margin-bottom: 10px;
}

.template-title {
    font-size: 23px !important;
    font-weight: 700;
    margin-bottom: 10px;
    line-height: 1.7;
}

.template-desc {
    font-size: 15px;
    color: #6b7280;
    line-height: 1.9;
    opacity: 0.8;
    margin-bottom: 16px;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* تعداد خطوط */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: justify;
}

/* ریسپانسیو */
@media (max-width: 768px) {

    .templates-container {
        grid-template-columns: 1fr;
        padding: 0 15px;

    }

    .template-card {
        flex-direction: column;
    }

    .template-image,
    .template-content {
        width: 100%;
    }

    .image-scroll {
        height: 320px;
    }

    .template-card:hover .image-scroll img {
        transform: translateY(calc(-100% + 320px));
    }

    .template-title {
        font-size: 18px !important;
    }

    .w-30-mob {
        width: 30%;
    }

    .blog-title {
        font-size: 18px !important;
    }
}

.p-btn {
    padding: 7px 10px !important;
}

.blog-meta1 {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    align-items: center;
    font-size: 13px;
    color: #a1a1a1;
    padding: 7px 0px 2px 0px;
}

.blog-meta1 .dot {
    width: .25rem;
    height: .25rem;
    border-radius: 999px;
    background: #d1d5db;
}

.template-price {
    display: flex;
    gap: 5px;
    margin-top: 14px;
    margin-bottom: 14px;
    flex-direction: column-reverse;
    align-items: flex-end;
}

/* قیمت اصلی (خط خورده) */
.price-old {
    display: flex;
    font-size: 13px;
    opacity: 0.5;
    text-decoration: line-through;
    flex-direction: row-reverse;
    align-items: center;
}

/* قیمت جدید */
.price-new {
    font-size: 17px;
    font-weight: 700;
    color: #202e41;
}

.svg-theme {
    background: #79a4ff;
    border-radius: 5px;
    margin-right: 5px;
    padding: 3px;
    opacity: 100% !important;
}

.df-row {
    display: flex;
    flex-direction: row !important;
}

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

.m-auto {
    margin: auto !important;
}

.gap10 {
    gap: 10px;
}

.p-2 {
    padding: 10px;
}

.bg {
    background-color: #e5e7eb82;
}

.p-section {
    padding: 0px 15px;
}

.reply-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 8px 0px;
    padding: 5px 10px;
    font-size: 13px;
    color: #6b7280;
    background-color: transparent;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.reply-btn:hover {
    color: #4f46e5;
    border-color: #4f46e5;
    background-color: #eef2ff;
}

/* استایل پاپ آپ (مدال) */
.reply-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.reply-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.reply-modal-content {
    background: #ffffff;
    width: 90%;
    max-width: 500px;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    transform: scale(0.95) translateY(10px);
    transition: transform 0.3s ease;
}

.reply-modal-overlay.active .reply-modal-content {
    transform: scale(1) translateY(0);
}

.reply-modal-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f3f4f6;
    flex-direction: row-reverse;
}

.reply-modal-title {
    font-weight: 600;
    font-size: 16px;
    color: #111827;
}

.reply-modal-close {
    background: none;
    border: none;
    font-size: 24px;
    line-height: 1;
    color: #9ca3af;
    cursor: pointer;
    transition: color 0.2s;
}

.reply-modal-close:hover {
    color: #111827;
}

/* استایل باکس نمایش نظری که به آن پاسخ داده می‌شود */
.reply-target-box {
    background: #f9fafb;
    border-right: 3px solid #6366f1; /* در راست راست با بوردر راست مشخص می‌شود */
    padding: 12px;
    border-radius: 8px;
}

.reply-target-text {
    font-size: 14px;
    color: #4b5563;
    margin: 0;
    line-height: 1.6;
}

/* استایل دکمه انصراف */
.cancel-btn-modal {
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    color: #6b7280;
    background-color: #f3f4f6;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.cancel-btn-modal:hover {
    background-color: #e5e7eb;
}

.btn-reply-back {
    display: flex;
    justify-content: flex-start;
    flex-direction: row-reverse;
}


.versions-container {
    max-width: 80rem;
    margin: 40px auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* استایل کارت ورژن */
.version-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 30px;
    display: flex;
    align-items: center;
    gap: 40px;
    position: relative; /* الزامی برای Stretched Link */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
    flex-direction: row-reverse;
}

.version-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
    border-color: #cbd5e1;
}

/* بخش محتوا */
.version-content {
    flex: 1;
    z-index: 2;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 10px;
}

.version-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 12px;
}

.version-badge {
    background-color: #2563ebc9;
    color: white;
    padding: 4px 12px;
    border-radius: 7px;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    position: relative;
    z-index: 3; /* بالاتر از Stretched Link */
    transition: background 0.3s;
}

.version-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: #1e293b;
}

/* متا دیتا (استاد و تاریخ) */
.version-meta {
    display: flex;
    gap: 20px;
    margin-bottom: 15px;
    font-size: 0.9rem;
    color: #64748b;
}

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

/* توضیحات */
.version-excerpt {
    color: #475569;
    font-size: 0.95rem;
    margin-bottom: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* حداکثر 3 خط */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* دکمه مطالعه بیشتر */
.version-read-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #6366f1;
    font-weight: 600;
    text-decoration: none;
    font-size: 0.95rem;
    position: relative;
    z-index: 3; /* بالاتر از Stretched Link */
    transition: gap 0.3s;
}

.version-read-more:hover {
    gap: 12px;
}

/* بخش تصویر */
.version-illustration {
    width: 220px;
    flex-shrink: 0;
    border-radius: 12px;
    overflow: hidden;
}

.version-card:hover .version-illustration img {
    transform: scale(1.05);
}

/* لینک کشیده (کلیک پذیر شدن کل کارت) */
.stretched-link {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    text-decoration: none;
}

/* ریسپانسیو برای موبایل */
@media (max-width: 768px) {
    .version-card {
        flex-direction: column;
        padding: 20px 15px;
        gap: 20px;
    }

    .version-illustration {
        width: 100%;
        height: 200px;
    }

    .version-illustration img {
        height: 100%;
        object-fit: contain
    }

    .version-content {
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        gap: 20px;
    }

    .versions-container {
        gap: 15px;
        padding: 0px 15px;
    }
}

/* ۱. کانتینر اصلی: ایجاد خط عمودی سمت راست */
.versions-container {
    position: relative;
    padding-right: 60px; /* فاصله از سمت راست برای جا دادن تایم‌لاین */
}

/* خط عمودی تایم‌لاین */
.versions-container::before {
    content: '';
    position: absolute;
    right: 24px; /* جایگاه خط عمودی */
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: #e2e8f0; /* رنگ خط تایم‌لاین */
}


.timeline-marker {
    position: absolute;
    right: -60px;
    top: 120px;
    width: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 3;
}

/* نقطه تایم‌لاین */
.timeline-dot {
    width: 16px;
    height: 16px;
    background-color: #ffffff;
    border: 2px solid #2563ebc9; /* رنگ بج (بنفش) */
    border-radius: 50%;
    box-shadow: 0 0 0 3px #e2e8f0; /* حلقه بیرونی نقطه */
    margin-bottom: 6px;
    transition: all 0.3s ease;
    cursor: pointer;
}


.version-card:hover .timeline-dot {
    transform: scale(1.3);
    background: rgb(0 95 255 / 79%);
    box-shadow: 0 0 0 3px #c7d2fe;
}

.timeline-version {
    font-size: 15px;
    font-weight: 500;
    color: #4f82ef;
    padding: 5px 10px;
    border-radius: 8px;
    white-space: nowrap;
    transform: rotate(90deg);
    margin-top: 5px;
    margin-right: 5px;
}

@media (max-width: 768px) {
    timeline-marker {
        display: none;
    }

    .timeline-dot {
        display: none;

    }

    .timeline-version {
        display: none;
    }

    .versions-container::before {
        display: none;
    }

    .versions-container {
        padding-right: 15px;
    }

    .flex-direction {
        display: flex;
        flex-direction: column;
    }

    .box-detail-author {
        gap: 5px !important;
        align-items: center;
    }

    .sm-none {
        display: none !important;
    }

    .w-mob-100 {
        width: 100%;
    }
}

.version-illustration {
    position: relative;
    overflow: hidden;
}

.version-illustration img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: opacity 0.4s ease-in-out;
    border-radius: 12px;
}

/* عکس دوم در حالت عادی مخفی است */
.version-illustration .hover-img {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

/* وقتی موس روی کل کارت می‌رود (به لطف stretched-link) */
.version-card:hover .version-illustration .default-img {
    opacity: 0;
}

.version-card:hover .version-illustration .hover-img {
    opacity: 1;
}


.blog-grid1 {
    margin-top: 1rem;
    display: grid;
    gap: 1rem;
}

@media (min-width: 768px) {
    .blog-grid1 {
        grid-template-columns: repeat(3, 1fr);
    }
}

.blog-meta3 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    font-size: 14px;
    color: #a1a1a1;
}

@media (max-width: 768px) {
    .blog-meta3 {
        gap: .6rem;
        font-size: 13px;
        padding: 10px 0px 0px 0px;
    }

    .none-md-mt2 {
        margin-top: unset;
    }
}

.md-mt2 {
    margin-top: 2rem;
}

.bg-btn-blue {
    background: linear-gradient(10deg, #2760de, #3578ee) !important;
}

.p10 {
    padding: 10px !important;
}

.msg-ping {
    position: relative;
    display: inline-flex;
    width: 8px;
    height: 8px;
    margin-inline-start: 6px
}

.msg-ping::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: #ef4444;
    animation: ping 1.3s cubic-bezier(0, 0, .2, 1) infinite
}

.msg-ping::after {
    content: "";
    position: absolute;
    inset: 2px;
    border-radius: 999px;
    background: #dc2626
}

.user-overview {
    margin-top: 16px;
    padding: 14px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%)
}

.user-overview h4 {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #0f172a
}

.user-facts {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.user-fact {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px
}

.user-fact .label {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #6b7280;
    font-size: 12px
}

.user-fact .label i {
    width: 14px;
    height: 14px;
    color: #2563eb
}

.user-fact strong {
    font-size: 13px;
    color: #111827
}

@keyframes ping {
    75%, 100% {
        transform: scale(2);
        opacity: 0
    }
}


.ticket-form {
    display: grid;
    gap: 16px
}


.ticket-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.ticket-form-group.full {
    grid-column: 1/-1
}

.ticket-form-label {
    font-size: 14px;
    color: #374151;
    font-weight: 600
}

.ticket-form-control {
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    padding: 10px 12px;
    background: #fff;
    color: #111827;
    font-size: 13px;
    line-height: 1.5;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;

}

.ticket-form-control:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

.ticket-form-control::placeholder {
    color: #9ca3af
}

textarea.ticket-form-control {
    min-height: 140px;
    resize: vertical
}

.ticket-form-hint {
    font-size: 11px;
    color: #6b7280
}

.ticket-form-check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12px;
    color: #4b5563
}


@media (max-width: 768px) {
    .ticket-form-grid {
        grid-template-columns: 1fr
    }
}


.ticket-detail-wrap {
    --apple-border: #eceef2;
    --apple-bg: #ffffff;
    --apple-soft: #f8fafc;
    --apple-text: #1f2937;
    --apple-muted: #6b7280;
    --apple-blue: #2563eb;
    display: grid;
    gap: 22px;
    background: var(--apple-bg);
    border: none;
    border-radius: 0;
    padding: 0;
}


.ticket-state {
    display: inline-flex;
    border-radius: 999px;
    font-size: 12px;
    padding: 6px 12px;
    font-weight: 600
}

.ticket-state.answered {
    color: #1f6f43;
    background: rgba(52, 199, 89, .12)
}

.ticket-state.pending {
    color: #8a5c00;
    background: rgba(255, 159, 10, .16)
}

.ticket-state.closed {
    color: #8e1d17;
    background: rgba(255, 59, 48, .13)
}

.ticket-meta-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding-bottom: 15px;
    background: #eff6ff;
    padding: 25px;
    border-radius: .7rem;
}

.ticket-meta-item {
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    gap: 5px;
    justify-content: flex-start;
}

.ticket-meta-item span {
    font-size: 14px;
    color: var(--apple-muted);
}

.ticket-meta-item strong {
    font-size: 14px;
    color: var(--apple-text);
    font-weight: 400;
    text-align: start;
}

/* گفتگو */
.ticket-chat {
    display: grid;
    gap: 14px;
    max-height: 460px;
    overflow-y: auto;
    padding-left: 10px;
    padding-right: 10px;
    scroll-behavior: smooth;
}

.ticket-chat {
    scrollbar-width: thin;
    scrollbar-color: #f3f9ff transparent;
}

/* Chrome / Edge / Safari */
.ticket-chat::-webkit-scrollbar {
    width: 8px;
}

.ticket-chat::-webkit-scrollbar-track {
    background: transparent;
}

.ticket-chat::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 999px;
    border: 1px solid transparent;
    background-clip: content-box;
    transition: background .2s ease;
}

.ticket-chat::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* وقتی کاربر اسکرول می‌کنه حس نرم‌تر */
.ticket-chat:hover::-webkit-scrollbar-thumb {
    background: #94a3b8;
}

.chat-item {
    background: #f8fafc;
    border: none;
    border-radius: .5rem;
    padding: 14px 16px;
    max-width: 49%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
}

.chat-item.user {
    justify-self: end;
    background: #eff6ff;
}

.chat-item.support {
    justify-self: start;
    background: #f9fafb;
}

.chat-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.chat-head strong {
    font-size: 13px;
    color: var(--apple-text);
}

.chat-head span {
    font-size: 13px;
    color: var(--apple-muted);
}

.chat-item p {
    margin: 0;
    font-size: 14px;
    line-height: 2;
    color: #1f2937;
    text-align: start;
}

.ticket-reply-form {
    display: grid;
    gap: 10px;
    padding-top: 12px;
    justify-items: start;
}

.ticket-form-control {
    border: 1px solid #e5e7eb;
    border-radius: .6rem;
    padding: 10px 14px;
    background: #fff;
    text-align: right;
}

.ticket-form-control:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .08);
}

.chat-attach {
    margin: 5px 0px 5px 10px;
    display: inline-flex;
    font-size: 12px;
    color: var(--apple-blue)
}

.ticket-reply-form {
    display: grid;
    gap: 10px;
    padding-top: 12px
}

.ticket-reply-row {
    display: grid;
    gap: 6px
}

.ticket-action-secondary {
    background: #f5f5f7 !important;
    color: #1f2937 !important;
    border: 1px solid #d2d2d7;
    border-radius: 0.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 11px;
    padding-bottom: 11px;
    font-size: 0.875rem;
}

.ticket-action-secondary[disabled] {
    opacity: .6
}

.ticket-action-secondary:hover {
    color: #f5f5f7 !important;
    background: #1f2937 !important;
}

@media (max-width: 960px) {
    .ticket-meta-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media (max-width: 768px) {
    .ticket-meta-grid {
        grid-template-columns: 1fr
    }

    .chat-item {
        max-width: 100%
    }

    .ticket-chat {
        max-height: 380px;
    }
}

@media (max-width: 960px) {
    .ticket-meta-grid {
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {


    .ticket-meta-grid {
        grid-template-columns:1fr;
        gap: 12px;
    }

    .chat-item {
        max-width: 100%;
    }
}

.msg-ping {
    position: relative;
    display: inline-flex;
    width: 8px;
    height: 8px;
    margin-inline-start: 6px
}

.msg-ping::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: #ef4444;
    animation: ping 1.3s cubic-bezier(0, 0, .2, 1) infinite
}

.msg-ping::after {
    content: "";
    position: absolute;
    inset: 2px;
    border-radius: 999px;
    background: #dc2626
}

.user-overview {
    margin-top: 16px;
    padding: 14px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%)
}

.user-overview h4 {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #0f172a
}

.user-facts {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.user-fact {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px
}

.user-fact .label {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #6b7280;
    font-size: 12px
}

.user-fact .label i {
    width: 14px;
    height: 14px;
    color: #2563eb
}

.user-fact strong {
    font-size: 13px;
    color: #111827
}

@keyframes ping {
    75%, 100% {
        transform: scale(2);
        opacity: 0
    }
}

.checkout-layout {
    display: grid;
    grid-template-columns:1fr 440px;
    gap: 32px;
    align-items: start;
}

@media (max-width: 900px) {
    .checkout-layout {
        grid-template-columns:1fr;
        gap: 20px;
    }
}

.checkout-box {
    padding: 30px 0px;
}

.checkout-title {
    font-size: 18px;
    color: #0f172a;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
}

/* ===== INPUTS (match coupon input exactly) ===== */
.checkout-input {
    width: 100%;
    height: 48px;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    padding: 0 16px;
    font-size: 14px;
    background: #fff;
    margin-bottom: 12px;
}

.checkout-input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
    outline: none;
}

/* textarea consistency */
textarea.checkout-input {
    height: 110px;
    padding-top: 12px;
}

/* ===== ROWS ===== */
.checkout-row {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 10px;
    padding: 0px 10px;
}

@media (max-width: 768px) {
    .checkout-row {
        grid-template-columns:1fr;
    }
}

.pay-method {
    display: flex;
    flex-direction: row;
    gap: 10px;
}


.pay-method label {
    display: flex;
    gap: 15px;
    align-items: center;
    justify-content: flex-start;
    flex-direction: row;
    padding: 14px 16px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    font-size: 14px;
    cursor: pointer;
    background: #fff;
    transition: all 0.2s ease;
    width: 50%;
}

.pay-title {
    color: #0f172a;
}

.wallet-price {
    margin-right: auto;
    font-size: 14px;
    color: #64748b;
    white-space: nowrap;
}

.pay-method label:hover {
    border-color: #cbd5e1;
    background: #f8fafc;
}

/* radio style */
.pay-method input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: #2563eb;
    cursor: pointer;
}

.pay-method label:has(input:checked) {
    border-color: #2563eb;
    background: #f0f6ff;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);

}

.pay-method input[type="radio"]:focus {
    outline: none;
    box-shadow: none;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
    font-size: 16px;
    font-weight: 500;
    color: #1f2937;
}

.summary-row span {
    font-size: 16px;
}

.summary-row strong {
    font-size: 18px;
    font-weight: 400;
}

.summary-total {
    display: flex;
    justify-content: space-between;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #e2e8f0;
    font-size: 20px;
    font-weight: 800;
    color: #0f172a;
}

/* ===== BUTTON (same feel as cart button) ===== */
.btn-pay {
    margin-top: 20px;
    width: 100%;
    border: none;
    border-radius: 12px;
    padding: 12px 16px;
    background: #2563eb;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 10px 20px rgba(37, 99, 235, 0.2);
}

.btn-pay:active {
    transform: scale(0.98);
}

/* ===== MOBILE ALIGNMENT (mirror cart behavior) ===== */
@media (max-width: 768px) {
    .checkout-input {
        width: 100%;
        height: 40px;
        border-radius: 7px;
        font-size: 12px;
    }

    .checkout-box {
        padding: 0px;
        border: none;
        margin-top: 40px !important;
    }

    .checkout-title {
        font-size: 15px;
        margin-bottom: 18px;
    }

    .summary-total {
        font-size: 17px;
    }

    .summary-row {
        font-size: 14px;
    }

    .summary-row span {
        font-size: 13px;
    }

    .summary-row strong {
        font-size: 14px;
        font-weight: 400;
    }
}

.alvand-cart-layout {
    display: grid;
    grid-template-columns: 1fr 440px;
    gap: 32px;
    align-items: start;
}

/* Tablet */
@media (max-width: 900px) {
    .alvand-cart-layout {
        grid-template-columns: 1fr;
    }
}


/* Info */
.alvand-cart-item-info {
    flex: 1;
}

.alvand-cart-item-title {
    font-size: 16px !important;
    color: #1f2937;
    margin: 0 0 4px;
}

.alvand-cart-item-subtitle {
    font-size: 14px;
    color: #94a3b8;
}

/* Price */
.alvand-cart-item-price {
    font-size: 16px;
    color: #1f2937;
    margin-left: 10px;
}

/* Remove button */
.alvand-cart-item-remove {
    width: 32px;
    height: 32px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 8px;
    border: none;

    background: #f8fafc;
    color: #cbd5e1;

    cursor: pointer;
    transition: 0.2s ease;
}

.alvand-cart-item-remove:hover {
    background: #e2e8f0;
    color: #666;
}

/* =========================
   Sidebar
========================= */
.alvand-cart-sidebar {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 15px;
    padding: 30px 20px;
    position: sticky;
    top: 15px;
    box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.08);
}

.alvand-cart-sidebar-title {
    font-size: 18px;
    color: #0f172a;
    margin-bottom: 28px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
}

.alvand-cart-sidebar-title1 {
    font-size: 18px;
    color: #0f172a;
    margin-bottom: 28px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
}

.alvand-cart-total-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
    font-size: 16px;
    font-weight: 500;
    color: #1f2937;
}

.alvand-cart-total-row span {
    font-size: 16px;
}

.alvand-cart-total-row strong {
    font-size: 18px;
    font-weight: 400;
}

.alvand-cart-total-main {
    display: flex;
    justify-content: space-between;

    margin-top: 24px;
    padding-top: 24px;

    border-top: 1px solid #e2e8f0;

    font-size: 20px;
    font-weight: 800;
    color: #0f172a;
}

/* =========================
   Coupon
========================= */
.alvand-cart-coupon-outside {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
    width: 100%;
}

.alvand-coupon-title {
    font-size: 14px;
    color: #1f293766;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}

/* hidden state */
.alvand-cart-coupon-box {
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: 0.3s ease;
    flex: 1;
}

/* active state */
.alvand-cart-coupon-box.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

#couponInput {
    height: 48px;
    flex: 1;
    min-width: 0;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    padding: 0 16px;
    font-size: 14px;
}

#couponInput:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
    outline: none;
}

#couponButton {
    height: 48px;
    font-size: 13px;
    border: none;
    border-radius: 10px;
    padding: 0 16px;
    background: #eef5ff;
    color: #367bf4;
    cursor: pointer;
}

@media (max-width: 768px) {

    .alvand-cart-layout {
        gap: 20px;
    }

    .alvand-cart-sidebar {
        position: static;
        padding: 20px 15px;

    }

    .alvand-cart-coupon-outside {
        flex-wrap: wrap;
    }

    .alvand-cart-coupon-box {
        flex-direction: row;
        width: 100%;
    }

    #couponInput {
        height: 40px;
        flex: 1;
        min-width: 0;
    }

    #couponButton {
        height: 40px;
    }
}

/* کارت اصلی فقط container باشد */
.alvand-cart-item {
    padding: 15px;
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #f1f5f9;
    border-radius: 16px;
    margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

/* اینجا محور واقعی flex است */
.alvand-cart-item-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
}

/* جلوگیری از له شدن محتوا */
.alvand-cart-item-info {
    flex: 1;
    min-width: 0;
}

/* قیمت ثابت */
.alvand-cart-item-price {
    white-space: nowrap;
    flex-shrink: 0;
}

/* دکمه حذف */
.alvand-cart-item-remove {
    flex-shrink: 0;
}

/* موبایل: اسکرول فقط روی آیتم داخلی */
@media (max-width: 768px) {
    .alvand-cart-item-inner {
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .alvand-cart-item-inner > * {
        flex: 0 0 auto;
    }

    .alvand-cart-item-price {
        font-size: 13px;
    }

    .alvand-cart-item-title {
        font-size: 13px !important;
    }

    .alvand-cart-item-subtitle {
        font-size: 12px;
    }

    .alvand-cart-item {
        padding: 12px 10px;
        border-radius: 12px;
    }

    .alvand-cart-total-row {
        font-size: 134px;
        font-weight: 400;
    }

    #couponMessage {
        font-size: 12px;
    }

    .alvand-cart-total-row span {
        font-size: 13px;
    }

    .alvand-cart-total-row strong {
        font-size: 14px;
        font-weight: 400;
    }

    .field label {
        font-size: 14px !important;
    }
}

.total-fix {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.end-price {
    font-size: 17px;
}

#couponMessage {
    font-size: 14px;
    color: #1f293766;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.field label {
    font-size: 15px;
    color: #1f2937;
    display: flex;
    align-items: center;
    gap: 4px;
}

.req {
    color: #7ea6ff; /* آبی هماهنگ با دکمه‌ها و focus */
    font-size: 14px;
    line-height: 1;
    transform: translateY(-1px);
}

.checkout-user-card {
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 18px;
    background: #fff;
}

.checkout-user-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 30px;
}

.checkout-user-name {
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
}

.checkout-user-mobile {
    font-size: 14px;
    color: #64748b;
}

.checkout-edit-btn {
    height: 40px;
    padding: 0 16px;
    border-radius: 10px;
    border: 1px solid #dbeafe;
    background: #eff6ff;
    color: #2563eb;
    font-size: 13px;
    cursor: pointer;
    transition: .2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.checkout-edit-btn:hover {
    background: #dbeafe;
}

.checkout-user-details {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 0px 5px;
}

.checkout-user-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.checkout-user-item span {
    color: #64748b;
}

.checkout-user-item strong {
    color: #0f172a;
    font-weight: 500;
}

.checkout-user-item.address {
    align-items: flex-start;
}

.legal-toggle {
    margin-top: 20px;
    margin-bottom: 40px;
}

.legal-switch {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    cursor: pointer;
    color: #0f172a;
    padding: 0px 10px;
}

.legal-switch input {
    width: 15px;
    height: 15px;
    accent-color: #2563eb;
    border-radius: 5px;
}

.legal-fields {
    display: none;
    margin-top: 20px;
}

.legal-fields.active {
    display: block;
}

/* موبایل */
@media (max-width: 768px) {


    .checkout-user-name {
        font-size: 14px;
    }

    .checkout-user-item {
        font-size: 13px;
        flex-wrap: wrap;
    }

    .checkout-user-details {
        flex-direction: column;
    }

    .legal-switch {
        padding: 0px;
    }

    .checkout-row {

        padding: 0px;
    }

    .pay-method label {
        width: 100%;
    }

    .pay-method {
        flex-direction: column;
    }

    .alvand-cart-sidebar-title1 {
        font-size: 16px;
    }
}

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

.payment-callback {
    max-width: 760px;
    margin: 40px auto;
    background: #fff;
    border: 1px solid #edf2f7;
    border-radius: 24px;
    padding: 42px 36px;
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.06);
    text-align: center;
}

/* =========================
   ICON + PULSE
========================= */

.callback-icon {
    position: relative;
    width: 90px;
    height: 90px;
    margin: 0 auto 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.callback-icon svg {
    width: 90px;
    height: 90px;
    position: relative;
    z-index: 3;
    display: block;
}

/* pulse circles */
.callback-icon::before,
.callback-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;

    width: 90px;
    height: 90px;

    border-radius: 999px;

    transform: translate(-50%, -50%) scale(1);

    z-index: 1;
    opacity: 0;
}

/* success */
.success-icon::before,
.success-icon::after {
    background: rgba(34, 197, 94, 0.14);
}

/* failed */
.failed-icon::before,
.failed-icon::after {
    background: rgba(239, 68, 68, 0.14);
}

.callback-icon::before {
    animation: pulseWave 2.4s infinite;
}

.callback-icon::after {
    animation: pulseWave 2.4s infinite 1s;
}

@keyframes pulseWave {

    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: .65;
    }

    70% {
        transform: translate(-50%, -50%) scale(1.75);
        opacity: 0;
    }

    100% {
        transform: translate(-50%, -50%) scale(1.95);
        opacity: 0;
    }
}

/* =========================
   STATUS
========================= */

.callback-status {
    font-size: 23px;
    font-weight: 700;
    margin-bottom: 14px;
    line-height: 1.8;
}

.success-text {
    color: #16a34a;
}

.failed-text {
    color: #dc2626;
}

/* =========================
   DESCRIPTION
========================= */

.callback-desc {
    font-size: 16px;
    color: #64748b;
    line-height: 2.1;
    max-width: 560px;
    margin: 0 auto 30px;
}

/* =========================
   DETAILS BOX
========================= */

.callback-detail-box {
    border: 1px solid #f1f5f9;
    background: #f8fafc;
    border-radius: 18px;
    padding: 10px 22px;
    margin-bottom: 30px;
}

.callback-detail-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 0;
    border-bottom: 1px solid #e2e8f0;
    gap: 20px;
}

.callback-detail-item:last-child {
    border-bottom: none;
}

.callback-detail-item span {
    font-size: 14px;
    color: #64748b;
}

.callback-detail-item strong {
    font-size: 15px;
    color: #0f172a;
    font-weight: 700;
}

/* =========================
   ACTIONS
========================= */

.callback-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

.callback-btn {
    min-width: 190px;
    height: 50px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    transition: .2s ease;
    text-decoration: none;
}

.primary-btn {
    background: #2563eb;
    color: #fff;
    box-shadow: 0 12px 30px rgba(37, 99, 235, .18);
}

.primary-btn:hover {
    transform: translateY(-2px);
}

.retry-btn {
    background: #dc2626;
    color: #fff;
    box-shadow: 0 12px 30px rgba(220, 38, 38, .18);
}

.retry-btn:hover {
    transform: translateY(-2px);
}

.secondary-btn {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #334155;
}

.secondary-btn:hover {
    background: #f1f5f9;
}

/* =========================
   MOBILE
========================= */

@media (max-width: 768px) {

    .payment-callback {
        padding: 26px 18px;
        border-radius: 18px;
    }

    .callback-icon {
        width: 78px;
        height: 78px;
    }

    .callback-icon svg {
        width: 78px;
        height: 78px;
    }

    .callback-icon::before,
    .callback-icon::after {
        width: 78px;
        height: 78px;
    }

    .callback-status {
        font-size: 21px;
    }

    .callback-desc {
        font-size: 13px;
        line-height: 2;
    }

    .callback-detail-item {
        padding: 14px 0;
    }

    .callback-detail-item span,
    .callback-detail-item strong {
        font-size: 13px;
    }

    .callback-btn {
        height: 48px;
        font-size: 13px;
        min-width: 175px;
    }

    .callback-actions {
        gap: 10px;
        display: flex;
        flex-wrap: nowrap;
        flex-direction: row;
    }
}

.dashboard-grid {
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: 16px;
    margin-top: 20px;
}


.dashboard-grid1 {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 16px;
    margin-top: 20px;
}

.swiper-card {
    overflow: hidden;
}

.dashboardSwiper {
    width: 100%;
    height: 100%;
    border-radius: 16px;
    overflow: hidden;
    margin-top: 15px;
}

.dashboardSwiper .swiper-slide {
    width: 100%;
}

.dashboardSwiper .swiper-slide a {
    display: block;
    width: 100%;
}

.dashboardSwiper .swiper-slide img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    display: block;
    border-radius: 14px;
}


@media (max-width: 768px) {

    .dashboardSwiper .swiper-slide img {
        height: 190px;
    }
}

.dashboardSwiper .swiper-slide {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
}

.dashboardSwiper .swiper-slide a {
    display: block;
    position: relative;
}

.slide-content {
    position: absolute;
    bottom: 15px;
    right: 15px;
    left: 15px;
    padding: 20px 25px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .12);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, .15);
    box-shadow: 0 8px 32px rgba(0, 0, 0, .15);
    z-index: 3;
}

.slide-content-title {
    margin: 0 0 8px;
    color: #fff;
    font-size: 23px !important;
    font-weight: 700;
}

.slide-content-doc {
    margin: 0;
    color: rgba(255, 255, 255, .9);
    font-size: 14px;
    line-height: 2;
}

.dashboardSwiper .swiper-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .5), transparent 45%);
    z-index: 1;
}

.dashboardSwiper img {
    position: relative;
    z-index: 0;
}

@media (max-width: 768px) {

    .slide-content {
        padding: 12px;
        left: 10px;
        right: 10px;
        bottom: 10px;
    }

    .slide-content h3 {
        font-size: 14px;
    }

    .slide-content p {
        font-size: 12px;
    }

}

.btn-link {
    border: 1px solid #d1d5db;
    padding: 7px 13px;
    border-radius: 6px;
    font-size: 12px;
    color: #929292;
}

.dash-card {
    background: #fff;
    border: 1px solid #eef2f7;
    border-radius: 15px;
    padding: 16px;
    box-shadow: 0 10px 25px rgba(15, 23, 42, .04);
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

/* responsive */
@media (max-width: 1100px) {
    .dashboard-grid {
        grid-template-columns:1fr 1fr;
    }
}

@media (max-width: 700px) {
    .dashboard-grid {
        grid-template-columns:1fr;
    }
}

/* PROFILE */
.profile-top {
    display: flex;
    gap: 12px;
    align-items: center;
}

.avatar-dashboard {
    border: 1px solid #dbe8f9;
    border-radius: 50%;
    width: 55px;
    height: 55px;
    padding: 5px;
    background: #eff6ff;
}

.name {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 5px;
    color: #374151;
}

.role {
    font-size: 12px;
    color: #64748b;
    font-weight: 400;
}

.progress-label {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    margin-top: 25px;
    margin-bottom: 15px;
    color: #64748b;
}

/* progress-bar removed – replaced by SVG gauge */

.dashbord-support-row {
    display: grid;
    grid-template-columns: 50px 140px 1.6fr 140px 80px;
    align-items: center;
    gap: 10px;
    padding: 20px 0;
    border-bottom: 1px solid #e5e7eb;
    font-size: .85rem;
    color: #374151;
    justify-content: stretch;
    justify-items: center;
}

/* actions */
.actions-grid {
    display: grid;
    grid-template-columns:2fr 2fr  2fr;
    gap: 8px;
}

.actions-grid button {
    padding: 10px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: #fff;
    font-size: 13px;
    height: 52px;
}


.progress-wrap {
    margin-bottom: 15px;
}

.dash-progress-track {
    position: relative;
    height: 10px;
    background: #f1f5f9;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
}

.dash-progress-fill {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    background: linear-gradient(90deg, #0072ff, #38bdf8);
    border-radius: 20px;
    transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    filter: drop-shadow(0 2px 6px rgba(0, 114, 255, 0.35));
}

.dash-progress-gloss {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.1) 100%);
    border-radius: 20px 20px 0 0;
    pointer-events: none;
}

.quick-row {
    display: flex;
    justify-content: flex-end;
}

.btn-fast {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.wallet-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    padding: 22px 24px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    color: #111827;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.wallet-actions {
    display: flex;
    gap: 10px;
}

.wallet-actions button {
    padding: 11px 18px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
    background: linear-gradient(135deg, #2563eb, #3b82f6);
    color: #fff;
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.2);
}

.wallet-actions button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(37, 99, 235, 0.25);
}

.int-wallet {
    font-size: 15px;
}

@media (max-width: 1024px) {
    .wallet-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .wallet-actions {
        width: 100%;
    }

    .wallet-actions button {
        width: 100%;
    }

    .actions-grid {
        grid-template-columns: 2fr 2fr;
        margin-top: 15px;
    }

    .actions-grid button {
        font-size: 11px;
    }

    .df-flex-mob {
        display: flex;
    }

    .int-wallet {
        font-size: 13px;
    }
}

.bg-wallet {
    background: #eff6ff !important;
}

.fs15 {
    font-size: 15px !important;
}

.ticket-table {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

/* ردیف ها */
.dashbord-support-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    padding: 10px 5px;
    border-bottom: 1px solid #e0e0e0;
}


/* --- حالت موبایل --- */
@media (max-width: 768px) {
    .dashbord-support-row {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(6, auto);
        gap: .5rem;
        border: 1px solid #ececec;
        padding: 1rem;
        border-radius: 10px;
        background: #fff;
    }

    .dashbord-support-row span,
    .dashbord-support-row a {
        display: flex;
        justify-content: space-between;
        width: 100%;
        font-size: 13px;
        color: #3c4656;
    }

    .dashbord-support-row span::before {
        color: #6b7280;
        font-size: .75rem;
    }

    /* اضافه کردن label قبل از محتوا */
    .dashbord-support-row span:nth-child(1)::before {
        content: "شناسه: ";
    }

    .dashbord-support-row span:nth-child(2)::before {
        content: "موضوع: ";
    }

    .dashbord-support-row span:nth-child(3)::before {
        content: "تاریخ ثبت: ";
    }

    .dashbord-support-row span:nth-child(4)::before {
        content: "آخرین پاسخ: ";
    }

    .dashbord-support-row span:nth-child(5)::before {
        content: "وضعیت: ";
    }


    .ticket-scroll {
        overflow-x: hidden;
    }

    .dashboard-grid1 {
        display: grid;
        grid-template-columns: 1fr;
    }

    *در انتظار پاسخ */ . ticket-status . pending {
    color: #9a3412;
    font-weight: 600;
    font-size: 11px;
}

    /* پاسخ داده شده */
    .ticket-status.answered {
        color: #3b82f6;
        font-weight: 600;
        font-size: 11px;
    }

    /* بسته شده */
    .ticket-status.closed {
        color: #9b9b9b;
        font-weight: 600;
        font-size: 11px;
    }

    /* تایید شده / حل شده */
    .ticket-status.resolved {
        color: #047857;
        font-weight: 600;
        font-size: 11px;
    }
}

.accounting-invoices-card .invoice-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;

    /* مخفی کردن اسکرول‌بار در مرورگرهای جدید */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge قدیمی */
}

/* مخفی کردن اسکرول‌بار در WebKit (Chrome / Safari) */
.accounting-invoices-card .invoice-scroll::-webkit-scrollbar {
    display: none;
}

/* جدول اصلی */
.invoice-table {
    width: 100%;
    border-collapse: collapse;
    /*min-width: 600px;*/
    border-radius: 15px;
    margin: 5px 0px;
}

/* هدر */
.invoice-table th {
    text-align: center;
    font-weight: 600;
    font-size: 14px;
    padding: 15px 20px;
    color: #444;
    white-space: nowrap;
}

/* سلول‌ها */
.invoice-table td {
    text-align: center;
    font-size: 14px;
    padding: 14px 18px;
    color: #1f2937;
    white-space: nowrap;
    font-weight: 400;
}


/* وضعیت‌ها فقط با رنگ متن */
.invoice-status.paid {
    color: #1a7f37;
    font-weight: 600;
}

.invoice-status.pending {
    color: #b26a00;
    font-weight: 600;
}

/* موبایل */
@media (max-width: 768px) {
    .invoice-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .invoice-table td {
        font-size: 12px;
    }

    .invoice-table th {
        font-size: 11px;
        padding: 10px 12px;
    }

    .search-group {
        gap: 3px;
    }

    .ticket-search-btn {
        width: 40px;
        height: 40px;
    }

    .ticket-search-box input {
        height: 40px;
    }
}

/* حالت بسته */
.ticket-search-box {
    flex: 0 0 auto;
    max-width: 0;
    overflow: hidden;
    transition: max-width 0.3s ease, padding 0.3s ease;
    padding: 0;
}

/* حالت باز */
.ticket-search-box.open {
    flex: 0 0 33%;
    max-width: 33%;
}

.alvand-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 30px;
    flex-wrap: wrap;
}

.alvand-pagination button {
    border: none;
    background: none;
    font-family: inherit;
}

.page-item,
.page-nav {
    width: 35px;
    height: 35px;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f7f8fa;
    color: #555;
    font-size: 11px;
    font-weight: 400;
    transition: .25s;
}

.page-item:hover,
.page-nav:hover {
    transform: translateY(-2px);
    background: #eef2f7;
}

.page-item.active {
    background: #edf4ff;
    color: #2563eb;
}

.page-dots {
    padding: 0 4px;
    color: #999;
}

/* موبایل */
@media (max-width: 768px) {

    .alvand-pagination {
        gap: 7px;
    }

    .page-item,
    .page-nav {
        width: 38px;
        height: 38px;
        border-radius: 10px;
        font-size: 13px;
    }
}

.ticket-meta-wrapper {
    display: flex;
    gap: 30px;
    margin-top: 25px;
    flex-wrap: wrap; /* برای موبایل */
}

.ticket-meta-column {
    flex: 1;
    min-width: 250px;
    padding: 16px 20px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ticket-meta-column h4 {
    margin-bottom: 10px;
    font-size: 15px !important;
    color: #1f2937;
    font-weight: 700;
    text-align: right;
    margin-right: 6px;
}


/* موبایل */
@media (max-width: 768px) {
    .ticket-meta-wrapper {
        flex-direction: column;
        gap: 15px;
    }
}

.bg-blue {
    background: #eff6ff;
    border-radius: 15px;
}

.alv-finance-summary {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #eff6ff;
}

.alv-finance-header {
    display: grid;
    grid-template-columns: 1fr 300px;
    padding: 18px;
    background: #f5f6f8;
    font-size: 15px;
    font-weight: 600;
    justify-items: start;
}

.alv-finance-row {
    display: grid;
    grid-template-columns:1fr 300px;
    align-items: center;
    padding: 20px 18px;
    border-bottom: 1px solid rgba(0, 0, 0, .05);
    justify-items: start;
}

.alv-finance-title {
    line-height: 1.8;
    color: #2d3748;
    text-align: start;
    font-size: 15px;
}

.alv-finance-title span {
    display: block;
    margin-top: 4px;
    color: #94a3b8;
    font-size: 12px;
}

.alv-finance-price {
    text-align: left;
    font-weight: 500;
    font-size: 15px;
}

.alv-payable {
    background: #edf7f0;
}

.alv-payable .alv-finance-price,
.alv-payable .alv-finance-title {
    font-weight: 700;
}


/* موبایل */

@media (max-width: 768px) {
    .alv-finance-header {
        padding: 18px;
        background: #f5f6f8;
        font-size: 12px;
        font-weight: 600;
        display: flex;
        justify-content: space-between;
    }

    .alv-finance-header {
        grid-template-columns: 1fr 100px;
    }

    .alv-finance-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 20px;
        padding: 12px 6px;
    }

    .alv-finance-title {
        font-size: 12px;
        flex: 1;
        text-align: start;
    }

    .alv-finance-price {
        text-align: left;
        font-size: 12px;
        white-space: nowrap;
    }

}

.alv-download-wrap {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}

.alv-download-btn {
    color: #2563eb;
    border: 1px solid #2563eb;
    border-radius: 9px;
    padding: 10px;
    font-size: 11.5px;
    cursor: pointer;
    transition: 0.2s;
}

.alv-download-btn:hover {
    background: rgb(220 233 255 / 50%);
}

/* موبایل */
@media (max-width: 768px) {
    .alv-download-wrap {
        justify-content: stretch;
    }

    .alv-download-btn {
        width: 100%;
    }
}

/* سکشن */
.alv-payment-section {
    /*margin-top: 30px;*/
}

/* اسکرول */
.alv-payment-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;
    -ms-overflow-style: none;
}

.alv-payment-scroll::-webkit-scrollbar {
    display: none;
}

/* جدول */
.alv-payment-table {
    min-width: 100%;
    border-collapse: collapse;
    margin: 10px 0px 5px 0px;
}

/* هدر */
.alv-payment-table th {
    padding: 16px;

    font-size: 14px;
    font-weight: 600;

    text-align: center;

    background: #f7f8fa;

    color: #444;

    white-space: nowrap;
}

/* سلول */
.alv-payment-table td {
    padding: 18px 16px;
    text-align: center;
    font-size: 14px;
    color: #333;
    white-space: nowrap;
}

.alv-payment-table tr:not(:last-child) {
    border-bottom: 1px solid rgba(0, 0, 0, .05);
}

.alv-payment-table th,
.alv-payment-table td {
    padding: 18px 16px;
    text-align: center;
    white-space: nowrap;
}

/* موبایل */
@media (max-width: 768px) {
    .alv-payment-table th {
        font-size: 11px;
    }

    .alv-payment-table td {
        font-size: 11px;
    }
}

/* ---------------- TABS ---------------- */

.account-tabs-wrap {
    display: flex;
    gap: 10px;
    overflow: auto;
    margin-bottom: 24px;
    padding-bottom: 4px;
    scrollbar-width: none;
}

.account-tabs-wrap::-webkit-scrollbar {
    display: none;
}

.account-tab-btn {
    border: none;
    background: #f3f5f9;
    height: 46px;
    padding: 0 20px;
    border-radius: 8px;
    white-space: nowrap;
    cursor: pointer;
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 500;
    transition: background .25s ease,
    color .25s ease,
    transform .2s ease;
    display: flex;
    align-items: center;
}

.account-tab-btn:hover {
    transform: translateY(-1px);
}

.account-tab-btn.active {
    background: #eff6ff;
    color: #2563eb;
}

/* ---------------- SLIDER ---------------- */

.account-tabs-container {
    overflow: hidden;
    width: 100%;
    position: relative;
}

.account-tabs-slider {
    display: flex;
    width: 100%;

    transition: transform 1.05s cubic-bezier(.22, .61, .36, 1);

    will-change: transform;
}

.account-tab-slide {
    min-width: 100%;
    width: 100%;
    flex-shrink: 0;

    opacity: .45;
    transform: scale(.985);

    transition: opacity .35s ease,
    transform .35s ease;

    padding-bottom: 5px;
}

.account-tab-slide.active {
    opacity: 1;
    transform: scale(1);
}

/* ---------------- USER TYPE ---------------- */

.user-type-selector {
    display: flex;
    gap: 12px;
    margin-top: 28px;
}

.user-type-item {
    position: relative;

    height: 52px;

    padding: 0;

    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    color: #64748b;

    transition: color .25s ease,
    opacity .25s ease;
}

.user-type-item::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .35s ease;
}

.user-type-item:hover {
    transform: translateY(-2px);
}

.user-type-item input {
    display: none;
}

.user-type-item span {
    position: relative;

    font-size: 14px;
    font-weight: 600;

    transition: color .25s ease;
}

.user-type-item.active {
    color: #377cf4;
}

.user-type-item.active::after {
    transform: scaleX(1);
}

/* remove old styles */
.user-type-item.active {
    background: none;
    border: none;
    box-shadow: none;
}

.user-type-item.active::before {
    opacity: 1;
}

.user-type-item.active span {
    color: #377cf4;
}

/* active line */
.user-type-item::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -1px;
    width: 100%;
    height: 2px;
    background: #377cf4;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .3s ease;
}

/* ---------------- FIELDS ---------------- */

.fields-wrap {
    position: relative;
    overflow: hidden;
}

.fields {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateY(14px) scale(.985);

    transform-origin: top center;

    transition: opacity .45s ease,
    transform .45s cubic-bezier(.16, 1, .3, 1),
    visibility .45s ease;

    position: absolute;
    inset: 0;

    width: 100%;
}


.fields.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: translateY(0) scale(1);

    position: relative;
}

.account-form-section-head {
    display: flex;
    gap: 8px;
    font-size: 14px;
    flex-direction: row;
    align-items: flex-start;
    margin-top: 30px;
    /*margin-bottom: 10px;*/
}

.section-mini-title {
    font-size: 15px !important;
    color: #b6b6b6;
}

@media (max-width: 768px) {

    .user-type-selector {
        display: grid;
        grid-template-columns:1fr 1fr;
    }

    .user-type-item {
        min-width: unset;
        width: 100%;
    }

}

.is-hidden {
    display: none;
}

@keyframes fadeBlock {

    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}

/* ---------------- MOBILE ---------------- */

@media (max-width: 768px) {

    .account-tab-btn {
        height: 42px;
        padding: 0 16px;
        font-size: 13px;
    }

    .user-type-selector {
        flex-wrap: wrap;
    }

    .user-type-item {
        flex: 1;
        justify-content: center;
    }

}

/* =========================
   ACTIVE SESSIONS (ULTRA LIGHT LIST)
========================= */

.account-security-sessions {
    margin-top: 8px;

    /* بدون باکس */
    background: transparent;
    border: none;

    display: flex;
    flex-direction: column;
}

/* =========================
   HEADER (MINIMAL)
========================= */

.account-security-sessions-head {
    padding: 0 0 10px 0;
    margin-bottom: 6px;
}

.account-security-sessions-title {
    margin-bottom: 5px;
    font-size: 16px !important;
    font-weight: 700;
    color: #0f172a;
}

.account-security-sessions-desc {
    margin: 3px 0 0;
    font-size: 13px !important;
    line-height: 1.6;
    color: #94a3b8;
}

/* =========================
   ITEM (NO BOX, ONLY ROW)
========================= */

.account-session-item {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 12px 0;

    border-bottom: 1px solid #f1f5f9;

    transition: opacity .2s ease;
}

.account-session-item:last-child {
    border-bottom: none;
}

.account-session-item:hover {
    opacity: .85;
}

/* =========================
   DEVICE
========================= */

.account-session-device {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.account-session-device-icon {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
}

.account-session-device-name {
    margin: 0;
    font-size: 13px !important;
    font-weight: 600;
    color: #0f172a;
}

.account-session-device-meta {
    margin: 2px 0 0;
    font-size: 11px !important;
    color: #94a3b8;
}


.account-session-badge {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 400;
    color: #10b981;
    padding: 8px 10px;
    background: #10b98112;
    border-radius: 8px;
}

.account-session-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10b981;
    margin-left: 6px;
}

.account-session-remove-btn {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 400;
    color: #ef4444;
    padding: 8px 10px;
    background: #ef444412;
    border-radius: 8px;
}

.account-session-remove-btn:hover {
    opacity: .55;
    color: #dc2626;
}

.account-session-item {
    position: relative;
}

.account-session-item .account-session-badge,
.account-session-item .account-session-remove-btn {
    white-space: nowrap;
}

/* =========================
   MOBILE
========================= */

@media (max-width: 768px) {

    .account-session-item {
        align-items: flex-start;
        gap: 10px;
    }

    .account-session-remove-btn,
    .account-session-badge {
        margin-top: 6px;
    }

}

.account-section-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

.account-section-icon {
    width: 44px;
    height: 44px;

    border-radius: 14px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: linear-gradient(135deg, rgba(37, 99, 235, .10), rgba(37, 99, 235, .02));

    color: #2563eb;
    flex-shrink: 0;
}

.account-section-title {
    margin: 0 0 6px;
    font-size: 16px !important;
    font-weight: 700;
    color: #0f172a;
}

.account-section-desc {
    margin: 0;
    font-size: 13px !important;
    line-height: 1.7;
    font-weight: 400;
    color: #64748b;
}

.sub-user-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sub-user-card {
    display: grid;
    grid-template-columns:auto auto auto 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 12px 18px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    transition: box-shadow .2s ease, border-color .2s ease;
}

.sub-user-card:hover {
    box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
    border-color: #d1d9e6;
}

.sub-user-avatar {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
}

.sub-user-name {
    font-size: 13px;
    font-weight: 600;
    color: #0f172a;
    white-space: nowrap;
}

.sub-user-badges {
    display: flex;
    gap: 6px;
    align-items: center;
}

.sub-user-details {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 12px;
    justify-content: space-evenly;
}

.sub-user-detail {
    font-size: 12.5px;
    font-weight: 400;
    color: #64748b;
    white-space: nowrap;
    line-height: 1.4;
}

.sub-user-badge {
    font-size: 11px;
    font-weight: 400;
    padding: 5px 15px;
    border-radius: 8px;
}

.sub-user-badge.admin {
    background: #eff6ff;
    color: #2563eb;
}

.sub-user-badge.editor {
    background: #f0fdf4;
    color: #16a34a;
}

.sub-user-badge.viewer {
    background: #f8fafc;
    color: #64748b;
}

.sub-user-status {
    font-size: 11px;
    font-weight: 400;
    padding: 5px 15px;
    border-radius: 8px;
}

.sub-user-status.active {
    background: #10b98112;
    color: #10b981;
}

.sub-user-status.inactive {
    color: #ef4444;
    background: #ef444412;
}

.sub-user-actions {
    display: flex;
    gap: 4px;
    align-items: center;
    opacity: 0;
    transition: opacity .2s ease;
}

.sub-user-card:hover .sub-user-actions {
    opacity: 1;
}

.sub-user-edit-btn,
.sub-user-del-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .2s ease;
    background: none;
}

.sub-user-edit-btn {
    color: #64748b;
}

.sub-user-edit-btn:hover {
    background: #eff6ff;
    color: #2563eb;
}

.sub-user-del-btn {
    color: #94a3b8;
}

.sub-user-del-btn:hover {
    background: #fef2f2;
    color: #dc2626;
}

.sub-user-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    background: none;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    font-family: inherit;
    color: #64748b;
    transition: all .25s ease;
    white-space: nowrap;
    margin-right: auto;
}

.sub-user-add-btn:hover {
    border-color: #2563eb;
    color: #2563eb;
    background: #f0f5ff;
}

.sub-user-add-btn svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

/* --------------- SUB-USER ITEM WRAPPER --------------- */

.sub-user-item {
    overflow: hidden;
    transition: margin .3s ease;
}

.sub-user-item.deleting .sub-user-card {
    transform: translateX(-120%);
    opacity: 0;
    transition: transform .35s ease, opacity .35s ease;
}

.sub-user-item.deleting .sub-user-edit-form {
    display: none;
}

.sub-user-item.deleting + .sub-user-item {
    margin-top: -58px;
}

/* --------------- SUB-USER EDIT FORM --------------- */

.sub-user-edit-form {
    display: grid;
    grid-template-rows:0fr;
    transition: grid-template-rows .35s ease;
    border-radius: 0 0 12px 12px;
    border: 1px solid transparent;
}

.sub-user-edit-form.open {
    grid-template-rows:1fr;
    border-color: #e2e8f0;
    border-top: 0;
}

.sub-user-edit-inner {
    overflow: hidden;
}

.sub-user-edit-form .sub-user-edit-inner {
    padding: 0 16px;
}

.sub-user-edit-form.open .sub-user-edit-inner {
    padding: 18px 16px 20px;
}

.sub-user-edit-row {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 14px;
    margin-bottom: 12px;
}

.sub-user-edit-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.sub-user-edit-field label {
    font-size: 11.5px;
    font-weight: 600;
    color: #475569;
}

.sub-user-edit-field input,
.sub-user-edit-field select {
    width: 100%;
    padding: 8px 12px;
    font-size: 13px;
    font-family: inherit;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
    color: #0f172a;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.sub-user-edit-field input:focus,
.sub-user-edit-field select:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .1);
    background: #fff;
}

.sub-user-edit-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 6px;
}

.sub-user-edit-save {
    padding: 8px 20px;
    font-size: 12.5px;
    font-weight: 600;
    font-family: inherit;
    border: none;
    border-radius: 8px;
    background: #2563eb;
    color: #fff;
    cursor: pointer;
    transition: background .2s ease;
}

.sub-user-edit-save:hover {
    background: #1d4ed8;
}

.sub-user-edit-cancel {
    padding: 8px 20px;
    font-size: 12.5px;
    font-weight: 500;
    font-family: inherit;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    color: #64748b;
    cursor: pointer;
    transition: all .2s ease;
}

.sub-user-edit-cancel:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
}

/* --------------- SUB-USER RESPONSIVE --------------- */

@media (max-width: 768px) {
    .account-form-section-head {
        gap: 8px;
        margin-top: 20px;
        align-items: flex-start;
        font-size: 13px;
    }

    .file-label {
        font-size: 11px;
        padding: 0 10px;
    }

    .file-name {
        font-size: 10px;
    }

    .section-mini-title {
        font-size: 14px !important;
    }

    .sub-user-add-btn {
        padding: 5px 12px;
        font-size: 11.5px;
    }

    .sub-user-add-btn svg {
        width: 13px;
        height: 13px;
    }

    .sub-user-card {
        display: flex;
        flex-wrap: wrap;
        gap: 6px 10px;
        padding: 14px;
        align-items: center;
    }

    .sub-user-avatar {
        width: 36px;
        height: 36px;
        border-radius: 10px;
    }

    .sub-user-name {
        font-size: 13px;
        white-space: normal;
        word-break: break-word;
    }

    .sub-user-badges {
        display: flex;
        gap: 4px;
        margin-inline-start: auto;
    }

    .sub-user-actions {
        opacity: 1;
        margin-inline-start: auto;
    }

    .sub-user-details {
        flex: 1 1 100%;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 12px;
        margin-top: 6px;
        padding-top: 8px;
        border-top: 1px solid #f1f5f9;
        justify-content: flex-start;
    }

    .sub-user-detail {
        font-size: 11.5px;
        color: #64748b;
        white-space: nowrap;

    }

    .sub-user-badge,
    .sub-user-status {
        display: inline-flex;
        align-items: center;
    }

    .sub-user-edit-row {
        grid-template-columns:1fr;
        gap: 10px;
        margin-bottom: 10px;
    }

    .sub-user-edit-form.open .sub-user-edit-inner {
        padding: 14px 12px 16px;
    }

    .sub-user-edit-field input,
    .sub-user-edit-field select {
        padding: 7px 10px;
        font-size: 12.5px;
    }
}

@media (max-width: 768px) {

    .sub-user-add-btn {
        font-size: 11px;
        padding: 4px 10px;
    }

    .sub-user-card {
        padding: 12px;
        gap: 4px 8px;
    }

    .sub-user-avatar {
        width: 30px;
        height: 30px;
    }

    .sub-user-name {
        font-size: 12.5px;
    }

    .sub-user-details {
        gap: 5px 15px;
        margin-top: 10px;
        padding-top: 15px;
        padding-bottom: 12px;
        justify-content: center;
    }

    .sub-user-badges {
        gap: 3px;
    }

    .sub-user-edit-btn,
    .sub-user-del-btn {
        width: 28px;
        height: 28px;
    }

    .sub-user-edit-btn svg,
    .sub-user-del-btn svg {
        width: 15px;
        height: 15px;
    }
}

/* ---------------- NTF CARDS ---------------- */

.ntf-card-list {
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    gap: 12px;
}

@media (max-width: 768px) {
    .ntf-card-list {
        grid-template-columns:1fr;
    }

    .cayql {
        font-size: 11px;
    }
}

.ntf-card {
    display: flex;
    overflow: visible;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    background: #fff;
    cursor: pointer;
    position: relative;
    transition: border-color .25s ease, box-shadow .25s ease;
}

.ntf-card:has(input:checked) {
    border-color: #bfdbfe;
    background: #f8faff;
    box-shadow: 0 0 0 1px rgba(37, 99, 235, .08);
}

.ntf-card:hover {
    border-color: #cbd5e1;
}

.ntf-card-tip {
    position: absolute;
    top: -6px;
    left: -6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #e2e8f0;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    cursor: help;
    z-index: 2;
    transition: background .2s ease, color .2s ease;
}

.ntf-card-tip:hover {
    background: #64748b;
    color: #fff;
}

.ntf-card-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    background: #0f172a0d;
    color: #606060;
    font-size: 10px;
    padding: 5px 9px;
    border-radius: 7px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all .2s ease;
    z-index: 10;
    font-weight: 400;
    line-height: 1.4;
}

.ntf-card-tip:hover .ntf-card-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


.ntf-card-body {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    min-height: 52px;
}

.ntf-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ntf-card-info {
    flex: 1;
    min-width: 0;
}

.ntf-card-label {
    font-size: 13px;
    font-weight: 600;
    color: #0f172a;
}

/* ---------------- NTF SWITCH ---------------- */

.ntf-switch {
    position: relative;
    width: 30px;
    height: 16px;
    flex-shrink: 0;
}

.ntf-switch input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
    width: 100%;
    height: 100%;
}

.ntf-switch-track {
    display: block;
    width: 30px;
    height: 16px;
    border-radius: 8px;
    background: #e9edf4;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .06);
    position: relative;
    transition: all .4s cubic-bezier(.34, 1.56, .64, 1);
}

.ntf-switch-track::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .08), 0 0 0 1px rgba(0, 0, 0, .02);
    transition: all .4s cubic-bezier(.34, 1.56, .64, 1);
}

.ntf-switch input:checked + .ntf-switch-track {
    background: linear-gradient(135deg, #60a5fa, #3b82f6);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .06), 0 0 10px rgba(59, 130, 246, .12);
}

.ntf-switch input:checked + .ntf-switch-track::after {
    left: 15px;
    box-shadow: 0 1px 4px rgba(59, 130, 246, .15), 0 0 0 1px rgba(59, 130, 246, .03);
}

/* --------------- NOTIFICATIONS PAGE --------------- */

.ntf-toolbar {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 18px;
    background: #f9fafb;
    border-radius: 14px;
    border: 1px solid #eef2f7;
}

.ntf-toolbar-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.ntf-toolbar-top {
    justify-content: space-between;
}

.ntf-toolbar-bottom {
    flex-wrap: wrap;
}

/* Override search from support/list.html for notifications */
.ntf-search-box {
    flex: 1;
    max-width: 0;
    overflow: hidden;
    transition: max-width .3s ease;
}

.ntf-search-box.open {
    max-width: 260px;
}

.ntf-search-btn {
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .ntf-search-box.open {
        max-width: 100%;
    }
}

.ntf-cat-filters {
    display: flex;
    gap: 4px;
    background: #f1f4f9;
    border-radius: 10px;
    padding: 3px;
}

.ntf-cat-btn {
    font-size: 12.5px;
    font-weight: 500;
    font-family: inherit;
    padding: 6px 16px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    transition: all .2s ease;
    white-space: nowrap;
}

.ntf-cat-btn:hover {
    color: #334155;
}

.ntf-cat-btn.active {
    background: #fff;
    color: #2563eb;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}

.ntf-date-range {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ntf-date-label {
    font-size: 12px;
    font-weight: 500;
    color: #94a3b8;
}

.ntf-date-input {
    padding: 6px 10px;
    font-size: 12px;
    font-family: inherit;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    color: #334155;
    outline: none;
    transition: border-color .2s ease;
    max-width: 140px;
    direction: ltr;
}

.ntf-date-input:focus {
    border-color: #3b82f6;
}

.ntf-mark-read-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    font-family: inherit;
    color: #2563eb;
    background: #eff6ff;
    border: none;
    border-radius: 8px;
    padding: 8px 14px;
    cursor: pointer;
    transition: all .2s ease;
    white-space: nowrap;
}

.ntf-mark-read-btn:hover {
    background: #dbeafe;
    color: #1d4ed8;
}

.ntf-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ntf-item {
    background: #fff;
    border: 1px solid #eef2f7;
    border-radius: 12px;
    overflow: hidden;
    transition: box-shadow .2s ease, border-color .2s ease;
}

.ntf-item:hover {
    border-color: #d1d9e6;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
}

.ntf-item.unread {
    border-color: #bfdbfe;
    background: #fafcff;
}

.ntf-item-inner {
    display: flex;
    cursor: pointer;
    user-select: none;
}

.ntf-item-bar {
    width: 4px;
    flex-shrink: 0;
}

.ntf-item-bar.urgent {
    background: #dc2626;
}

.ntf-item-bar.important {
    background: #d97706;
}

.ntf-item-bar.general {
    background: #3b82f6;
}

.ntf-item-body {
    flex: 1;
    min-width: 0;
    padding: 14px 16px;
}

.ntf-item-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.ntf-item-info {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.ntf-item-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 6px;
    white-space: nowrap;
    flex-shrink: 0;
}

.ntf-item-badge.urgent {
    background: #fef2f2;
    color: #dc2626;
}

.ntf-item-badge.important {
    background: #fffbeb;
    color: #d97706;
}

.ntf-item-badge.general {
    background: #eff6ff;
    color: #2563eb;
}

.ntf-item-title {
    font-size: 13.5px;
    font-weight: 600;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-top: 6px;
}

.ntf-item.unread .ntf-item-title {
    font-weight: 700;
}

.ntf-item-dept {
    font-size: 11.5px;
    color: #94a3b8;
    white-space: nowrap;
}

.ntf-item-meta-top {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.ntf-item-date {
    font-size: 12px;
    color: #94a3b8;
    white-space: nowrap;
}

.ntf-item-arrow {
    transition: transform .25s ease;
    flex-shrink: 0;
}

.ntf-item.open .ntf-item-arrow {
    transform: rotate(180deg);
}

.ntf-item-preview {
    padding: 2px 0 0;
    font-size: 13px;
    line-height: 1.7;
    color: #64748b;
}

.ntf-item-text {
    max-height: 22px;
    overflow: hidden;
    transition: max-height .35s ease;
}

.ntf-item-details {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    background: #f8fafc;
    border-radius: 10px;
    padding: 10px 14px;
    margin-top: 4px;
}

.ntf-detail-row {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 50%;
    min-width: 0;
}

.ntf-detail-label {
    font-size: 11px;
    font-weight: 500;
    color: #94a3b8;
    white-space: nowrap;
}

.ntf-detail-value {
    font-size: 12px;
    font-weight: 600;
    color: #334155;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ntf-badge-sm {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 5px;
}

.ntf-badge-sm.urgent {
    background: #fef2f2;
    color: #dc2626;
}

.ntf-badge-sm.important {
    background: #fffbeb;
    color: #d97706;
}

.ntf-badge-sm.general {
    background: #eff6ff;
    color: #2563eb;
}

@media (max-width: 900px) {
    .ntf-toolbar-top {
        flex-wrap: wrap;
    }
}

@media (max-width: 768px) {
    .ntf-toolbar-row {
        flex-wrap: wrap;
    }

    .ntf-toolbar-bottom {
        flex-direction: column;
        align-items: stretch;
    }

    .ntf-cat-filters {
        width: 100%;
        justify-content: center;
    }

    .ntf-date-range {
        justify-content: center;
        flex-wrap: wrap;
    }

    .ntf-date-input {
        max-width: 120px;
    }

    .ntf-search-box {
        flex: 0;
        max-width: 0;
        overflow: hidden;
        transition: max-width .3s ease;
    }

    .ntf-search-box.open {
        flex: 1;
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .ntf-toolbar {
        padding: 12px;
    }

    .ntf-date-input {
        max-width: 100px;
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    .ntf-toolbar {
        padding: 12px;
    }

    .ntf-date-input {
        max-width: 100px;
        font-size: 11px;
    }
}


/* ===== Wallet Top Row ===== */
.wallet-top-row {
    display: flex;
    align-items: center;
    gap: 24px;
}

.wallet-balance-box {
    flex-shrink: 0;
    padding-left: 24px;
    border-left: 1px solid #e5e7eb;
}

.wallet-balance-label {
    font-size: 12px;
    font-weight: 400;
    color: #64748b;
    margin-bottom: 4px;
    display: flex;
    gap: 5px;
    align-items: center;
}

.wallet-balance-amount {
    font-size: 17px;
    font-weight: 600;
    margin-top: 10px;
    color: #1f2937;
    letter-spacing: -0.5px;
    line-height: 1.2;
}

.wallet-balance-amount span {
    font-size: 14px;
    font-weight: 400;
    color: #64748b;
    margin-right: 4px;
}

/* Stats Row */
.wallet-stats-row {
    display: flex;
    gap: 12px;
    flex: 1;
}

.ws-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    flex: 1;
    min-width: 0;
}

.ws-item-blue {
    background: #f8faff;
}

.ws-item-red {
    background: #ff909012;
}

.ws-item-green {
    background: #f6fef9;
}

.ws-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ws-item-blue .ws-icon {
    background: #e9f2ff;
    color: #2563eb;
}

.ws-item-red .ws-icon {
    background: #ef444412;
    color: #dc2626;
}

.ws-item-green .ws-icon {
    background: #dcfce5;
    color: #16a34a;
}

.ws-body {
    flex: 1;
    min-width: 0;
}

.ws-label {
    font-size: 12px;
    color: #64748b;
    margin-bottom: 5px;
    font-weight: 400;
}

.ws-value {
    font-size: 13px;
    font-weight: 600;
    color: #0f172a;
}

.ws-amount {
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
}

.ws-up {
    color: #2563eb;
}

.ws-down {
    color: #dc2626;
}

.ws-green {
    color: #16a34a;
}

/* Type Badges (matching account-session-badge style) */
.wallet-type-badge {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 400;
    padding: 5px 15px;
    border-radius: 6px;
}

.wallet-type-badge.type-deposit {
    color: #10b981;
    background: #10b98112;
}

.wallet-type-badge.type-deposit::before {
    background: #10b981;
}

.wallet-type-badge.type-withdraw {
    color: #ef4444;
    background: #ef444412;
}

.wallet-type-badge.type-withdraw::before {
    background: #ef4444;
}

.wallet-type-badge.type-transfer {
    color: #3b82f6;
    background: #3b82f612;
}

.wallet-type-badge.type-transfer::before {
    background: #3b82f6;
}

.wallet-txn-credit {
    color: #16a34a;
    font-weight: 600;
    font-size: 14px;
    direction: ltr;
}

.wallet-txn-debit {
    color: #dc2626;
    font-weight: 600;
    font-size: 14px;
    direction: ltr;
}


/* ===== Modal ===== */
.wallet-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.wallet-modal-open {
    opacity: 1 !important;
    visibility: visible !important;
}

.wallet-modal {
    background: #fff;
    border-radius: 20px;
    width: 460px;
    max-width: 92vw;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 25px 60px rgba(15, 23, 42, 0.25);
    transform: translateY(20px) scale(0.97);
    transition: transform 0.3s ease;
}

.wallet-modal-open .wallet-modal {
    transform: translateY(0) scale(1);
}

.wallet-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 22px 28px 0;
}

.wallet-modal-header h3 {
    font-size: 18px !important;
    font-weight: 600;
    color: #0f172a;
}

.wallet-modal-close {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: none;
    background: #f1f5f9;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    transition: all 0.2s;
}

.wallet-modal-close:hover {
    background: #e2e8f0;
    color: #0f172a;
}

.wallet-modal-body {
    padding: 20px 28px;
}

.wallet-modal-desc {
    font-size: 14px;
    color: #64748b;
    margin-bottom: 20px;
}

.wallet-amount-preset {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
    margin-bottom: 4px;
}

.wallet-preset-btn {
    padding: 4px 10px;
    border-radius: 8px;
    font-weight: 400 !important;
    border: 1px solid #9595954d;
    font-size: 12px;
    font-weight: 400;
    color: #727272;
    cursor: pointer;
    transition: all 0.2s;
}

.wallet-preset-btn:hover {
    background: #ffffff;
    border-color: #60a5fa38;
    color: #2e5bd9cf;
}

.wallet-card-section {
    display: none;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e2e8f0;
}

.wallet-card-section.active {
    display: block;
}

.wallet-company-card {
    background: linear-gradient(135deg, #1e3a5f 0%, #2563eb 100%);
    border: none;
    border-radius: 14px;
    padding: 20px;
    color: #fff;
}

.wallet-modal-amount-section {
    margin-bottom: 18px;
}

.wallet-company-card-title {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 16px;
    font-weight: 400;
    text-align: center;
}

.wallet-company-card-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.wallet-company-card-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.wallet-company-card-label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    white-space: nowrap;
    min-width: 65px;
}

.wallet-company-card-value {
    font-size: 13px;
    font-weight: 500;
    color: #fff;
    direction: ltr;
    text-align: left;
    flex: 1;
}

.wallet-company-card-number {
    font-weight: 700;
    letter-spacing: 0.5px;
}

.wallet-company-card-iban,
.wallet-company-card-acct {
    font-size: 14px;
    font-weight: 400;
}

.wallet-card-divider {
    height: 1px;
    background: #e2e8f0;
    margin: 18px 0;
}

.wallet-card-section .file-upload-box {
    width: 100%;
}

.wallet-cancel-btn {
    background: #f1f5f9 !important;
    color: #64748b !important;
    box-shadow: none !important;
}

.wallet-cancel-btn:hover {
    background: #e2e8f0 !important;
}

.wallet-modal-footer button {
    flex: 1;
}

.wallet-input-group {
    margin-bottom: 18px;
}

.wallet-input-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    margin-bottom: 8px;
}

.wallet-amount-input {
    width: 100%;
    height: 40px;
    border: 1px solid #e2e8f0;
    border-radius: .5rem;
    padding: 0 16px;
    font-size: 12px;
    font-weight: 400;
    color: #0f172a;
    outline: none;
    transition: border-color 0.2s;
}

.wallet-amount-input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}

.wallet-pay-methods {
    display: flex;
    gap: 10px;
}

.wallet-pay-option {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: #fff;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
}

.wallet-pay-option.active,
.wallet-pay-option:has(input:checked) {
    border-color: #2563eb;
    background: #eff6ff;
    color: #2563eb;
}

.wallet-pay-option input[type="radio"] {
    display: none;
}

.wallet-modal-footer {
    display: flex;
    gap: 10px;
    padding: 0 28px 22px;
}

.wallet-modal-cancel,
.wallet-modal-submit {
    flex: 1;
    padding: 14px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    border: none;
}

.wallet-modal-cancel {
    background: #f1f5f9;
    color: #64748b;
}

.wallet-modal-cancel:hover {
    background: #e2e8f0;
}

.wallet-modal-submit {
    background: #2563eb;
    color: #fff;
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.2);
}

.wallet-modal-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.3);
}

/* Responsive */
@media (max-width: 1024px) {
    .wallet-top-row {
        flex-wrap: wrap;
    }

    .wallet-balance-box {
        border-left: none;
        padding-left: 0;
        width: 100%;
    }

    .wallet-stats-row {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .wallet-top-row {
        align-items: flex-start;
        flex-direction: column-reverse;
        gap: 15px;
    }

    .wallet-balance-box {
        flex: 1;
        border-left: none;
        padding-left: 0;
        min-width: 0;
    }

    .wallet-balance-amount {
        font-size: 20px;
        margin-top: 6px;
    }

    .wallet-stats-row {
        flex: 0 0 100%;
        flex-direction: column;
        gap: 8px;
    }

    .ws-item {
        padding: 10px 12px;
    }


    .support-head > div:first-child {
        width: 100%;
    }

    .slk-custom-select[data-name="wallet-filter"] {
        width: 100% !important;
    }

    .wallet-amount-preset {
        gap: 4px;
    }

    .alvand-pagination {
        gap: 4px;
        margin-top: 16px;
    }

    .alvand-pagination .page-item,
    .alvand-pagination .page-nav {
        width: 32px;
        height: 32px;
        font-size: 11px;
    }

    .wallet-modal {
        max-width: 96vw;
    }

    .wallet-modal-header {
        padding: 16px 18px 0;
    }

    .wallet-modal-body {
        padding: 16px 18px;
    }

    .wallet-modal-footer {
        padding: 0 18px 16px;
    }

    .cy5k3 {
        font-size: 135px;
    }

    .big-title-footer1 {
        position: absolute;
        bottom: -30px;
    }
}

#alvand-auth-root {
    display: none !important;
}


.title-footer {
    font-size: 16px;
    font-weight: 600;
    line-height: 2;
    color: #111827;
    position: relative;
    padding-bottom: 12px;
}

.title-footer::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 28px;
    height: 2px;
    background: linear-gradient(90deg, #3B82F6, #214384);
    border-radius: 2px;
    transition: width 0.3s ease;
}

.c6dpm:hover .title-footer::after {
    width: 48px;
}

.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.footer-contact-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #f5f7fa;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: .25s;
}


.footer-contact-value {
    display: block;
    font-size: 14px;
    color: #6b7280;
    line-height: 1.7;
}

@property --beam-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

.footer-call {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding: 24px 28px;
    border-radius: 16px;
    margin-bottom: 35px;
    z-index: 0;
    background: linear-gradient(135deg, #F8FAFC, #F1F5F9);
    isolation: isolate;
}

/* پرتو نوری دور کامل */
.footer-call::before {
    content: '';
    position: absolute;
    inset: -1.5px;
    border-radius: 16.5px;
    background: conic-gradient(
            from var(--beam-angle) at 50% 50%,
            transparent 0deg,
            rgba(59, 130, 246, 0.04) 15deg,
            rgba(59, 130, 246, 0.18) 30deg,
            rgba(59, 130, 246, 0.4) 40deg,
            #3B82F6 45deg,
            #60A5FA 46deg,
            #3B82F6 47deg,
            rgba(59, 130, 246, 0.4) 50deg,
            rgba(59, 130, 246, 0.18) 60deg,
            rgba(59, 130, 246, 0.04) 75deg,
            transparent 90deg,
            transparent 360deg
    );
    z-index: -2;
    animation: beamRotate 10s linear infinite;
}

/* ماسک داخلی */
.footer-call::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #F8FAFC, #F1F5F9);
    border-radius: 16px;
    z-index: -1;
}

@keyframes beamRotate {
    from {
        --beam-angle: 0deg;
    }
    to {
        --beam-angle: 360deg;
    }
}

.footer-call-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.footer-call-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.footer-call-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid #E2E8F0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.footer-call-text {
    font-size: 18px;
    color: #111827;
    line-height: 2.5;
    font-weight: 700;
}

.footer-call-phone {
    text-decoration: none;
    direction: rtl;
    white-space: nowrap;
    font-size: 20px;
    color: #111827;
    line-height: 2.5;
    font-weight: 700;
    display: flex;
    justify-content: flex-end;
    transition: color 0.25s ease;
}

.footer-call-phone:hover {
    color: #3B82F6;
}

.footer-divider {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, #D6DEE8 30%, #D6DEE8 70%, transparent);
}

.footer-brand {
    display: flex;
    flex-direction: column;
}

.footer-brand-logo {
    margin-bottom: 15px;
    display: inline-block;
}

.footer-brand-logo img {
    transition: transform 0.3s ease;
}

.footer-brand-logo:hover img {
    transform: scale(1.03);
}

.footer-brand-description {
    color: #6F7787;
    line-height: 2.1;
    font-size: 15px;
    margin-bottom: 30px;

}

.trust-section {
    /*margin-top: 3rem;*/
    /*margin-bottom: 3rem;*/
    padding: 2rem 0;
}

.trust-section-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 28px;
}

.trust-section-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, #D6DEE8, transparent);
}

.trust-section-title {
    font-size: 14px;
    font-weight: 600;
    color: #9CA3AF;
    white-space: nowrap;
    letter-spacing: 0.5px;
}

.footer-trust {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
}

.trust-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
    padding: 16px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid #E7ECF2;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.03);
    transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    overflow: hidden;
}

.trust-badge::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(147, 51, 234, 0.05));
    opacity: 0;
    transition: opacity 0.35s ease;
}

.trust-badge:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
    border-color: #C7D2DE;
}

.trust-badge:hover::before {
    opacity: 1;
}

.trust-badge img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: relative;
    z-index: 1;
    filter: grayscale(20%);
    transition: filter 0.35s ease;
}

.trust-badge:hover img {
    filter: grayscale(0%);
}

.footer-social {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 28px;
    padding-top: 10px;
    /*border-top:1px solid #ECEFF4;*/
}

.footer-social-link {

    width: 42px;
    height: 42px;

    border: 1px solid #E7ECF2;
    border-radius: 12px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #28303F;
    background: #fff;

    transition: all .3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.footer-social-link:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    background: linear-gradient(135deg, #3B82F6, #214384);
    /*border-color: transparent;*/
    color: #fff;
}

.footer-social-link svg {
    opacity: .7;
    transition: .3s;
}

.footer-social-link svg path,
.footer-social-link svg circle {
    transition: fill .3s ease;
}

.footer-social-link:hover svg {
    opacity: 1;
}

.footer-social-link:hover svg path,
.footer-social-link:hover svg circle {
    fill: #fff;
}

.location-text {
    font-size: 14px;
    color: #6F7787;
}

/* ============================
   Footer Responsive – Mobile
   ============================ */

@media (max-width: 768px) {
    /* --- آیکون‌ها کنار متن --- */
    .footer-call-right {
        flex-direction: row;
        align-items: flex-start;
        gap: 12px;
    }

    .footer-call-left {
        gap: 12px;
        flex-direction: row-reverse;
        justify-content: flex-end;
    }

    .footer-call {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        padding: 20px;
    }

    .footer-call-icon {
        width: 42px;
        height: 42px;
        border-radius: 10px;
    }

    .footer-call-text {
        font-size: 15px;
        line-height: 2;
    }

    .footer-call-phone {
        font-size: 17px;
        justify-content: flex-start;
    }

    /* گرید ۲ ستونه روی موبایل */
    .cg3qe {
        grid-template-columns: repeat(2, 1fr);
    }

    /* بلاک برند تمام عرض */
    .cu88u {
        grid-column: span 2 / span 2;
    }

    /* سایز کوچک‌تر لوگوی الوند */
    .footer-brand-logo img {
        width: 120px;
    }

    .footer-brand-description {
        font-size: 13px;
        line-height: 2;
        margin-bottom: 20px;
    }

    .title-footer {
        font-size: 15px;
        line-height: 2;
    }

    .footer-social {
        margin-top: 20px;
        padding-top: 18px;
    }

    .footer-social-link {
        width: 38px;
        height: 38px;
    }

    .footer-social-link svg {
        width: 20px;
        height: 20px;
    }

    .big-title-footer {
        font-size: 70px;
        bottom: -15px;
    }

    .location-text {
        font-size: 13px;
    }

    /* نمادهای اعتماد ۴ تا در هر ردیف */
    .trust-section-header {
        margin-bottom: 20px;
    }

    .trust-section-title {
        font-size: 12px;
    }

    .footer-trust {
        gap: 5px;
    }

    .trust-badge {
        width: calc(20% - 8px);
        height: auto;
        aspect-ratio: 1/1;
        padding: 5px;
        border-radius: 12px;
    }

    .trust-badge::before {
        border-radius: 12px;
    }

    .cyf4s {
        margin-top: -8rem;
    }

    .svc-detail-btn {
        font-size: 0.7rem !important;
        gap: 0.1rem !important;
        padding: 0.25rem 0.4rem !important;
    }

    .svc-status {
        font-size: 0.7rem !important;
        padding: 0.3rem 0.5rem !important;
    }

}

/* ==============================
Services Table
============================== */

.svc-table-wrap {
    overflow-x: auto;
}

.svc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    border: none;
}

.svc-th-num,
.svc-td-num {
    width: 40px;
    text-align: center;
    color: #94a3b8;
    font-size: 0.75rem;
    font-weight: 400;
}

.svc-table thead th {
    text-align: center;
    padding: 1.5rem 0.75rem;
    font-size: .85rem;
    border: none;
    border-bottom: 1px solid #e2e8f0;
    white-space: nowrap;
    font-weight: 600;
    color: #374151;
}

.svc-table tbody td {
    padding: 0.625rem 0.75rem;
    border: none;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
    vertical-align: middle;
    text-align: center;
}

.svc-table tbody tr:last-child td {
    border-bottom: none;
}

.svc-table tbody tr:hover {
    background: #f8fafc;
}

.svc-name {
    font-weight: 400;
    color: #374151;
    display: block;
}

.svc-sub {
    font-size: 0.75rem;
    color: #94a3b8;
    display: block;
    margin-top: 0.1rem;
}

.svc-link {
    color: #3B82F6;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 500;
}

.svc-link:hover {
    color: #214384;
    text-decoration: underline;
}

.svc-toolbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    /*margin-bottom: 1rem;*/
    flex-wrap: wrap;
}

.svc-toolbar .search-group {
    flex: 1;
    min-width: 200px;
}

/* ---- Status column ---- */

.svc-status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    font-weight: 400;
    padding: 0.3rem 0.7rem;
    border-radius: 7px;
    white-space: nowrap;
}

.svc-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.svc-status.active {
    background: rgba(16, 185, 129, 0.08);
    color: #10b981;
}

.svc-status.active .svc-dot {
    background: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

.svc-status.pending {
    background: rgba(234, 179, 8, 0.1);
    color: #92400e;
}

.svc-status.pending .svc-dot {
    background: #eab308;
    box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.15);
}

.svc-status.expired {
    background: rgba(239, 68, 68, 0.08);
    color: #b91c1c;
}

.svc-status.expired .svc-dot {
    background: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

/* ---- Due date column ---- */

.svc-due {
    display: block;
    font-size: 0.75rem;
    color: #334155;
}

.svc-due-note {
    display: block;
    font-size: 0.72rem;
    color: #94a3b8;
    margin-top: 0.15rem;
}

.svc-due-note.expiring {
    color: #d97706;
}

.svc-due-note.expired {
    color: #dc2626;
}

/* ---- Detail button ---- */

.svc-detail-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.78rem;
    font-weight: 400;
    color: #3B82F6;
    text-decoration: none;
    padding: 0.35rem 0.75rem;
    border-radius: 8px;
    background: rgba(59, 130, 246, 0.06);
    border: 1px solid rgba(59, 130, 246, 0.15);
    transition: all 0.2s ease;
    white-space: nowrap;
}

.svc-detail-btn svg {
    width: 14px;
    height: 14px;
    transition: transform 0.2s ease;
}

.svc-detail-btn:hover {
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.3);
    text-decoration: none;

}

.svc-detail-btn:hover svg {
    transform: translateX(-3px);
}

/* ---- Mobile ---- */
@media (max-width: 768px) {
    .svc-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    .svc-toolbar .search-group {
        min-width: 0;
        width: 100%;
    }

    .svc-toolbar .ticket-search-box {
        flex: 1;
    }

    .svc-toolbar .ticket-search-box.open {
        max-width: 100%;
    }

    .svc-toolbar .ticket-search-btn {
        width: 38px;
        height: 38px;
        flex-shrink: 0;
    }

    .svc-toolbar .slk-custom-select {
        width: auto !important;
        align-self: flex-start;
    }

    .svc-toolbar .slk-custom-select-trigger {
        height: 32px;
        min-height: 32px;
        padding: 0 10px;
        font-size: 0.75rem;
        border-radius: 8px;
        border: 1px solid #e5e5e5;
    }

    .svc-toolbar .slk-custom-select.active .slk-custom-select-trigger {
        border: 1px solid #3b82f6;
    }

    .svc-toolbar .slk-custom-select-arrow {
        width: 14px;
        height: 14px;
    }
}

/* ============================================
   License Detail
   ============================================ */

/* license meta grid */
.svc-license-meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px 16px;
    padding: 1rem;
    border-radius: 10px;
    background: linear-gradient(180deg, #f8fafc, #f1f5f9);
    border: 1px dashed #e5e7eb;
    margin: 1.25rem 0;
}

/* two-column row: key + support */
.svc-row-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

/* license key section */
.svc-license-key-section {
    padding: 1rem;
    background: linear-gradient(180deg, #f8fafc, #f1f5f9);
    border: 1px dashed #e5e7eb;
    border-radius: 10px;
}

.svc-key-title {
    font-size: .85rem;
    font-weight: 600;
    color: #374151;
    margin: 0 0 8px;
}

.svc-key-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    direction: ltr;
}

.svc-key-text {
    flex: 1;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.5px;
    color: #2563eb;
    word-break: break-all;
    user-select: all;
    margin: 0;
    background: none;
    border: none;
    padding: 0;
}

.svc-key-hint {
    font-size: 11px;
    color: #6b7280;
    margin-top: 6px;
}

.svc-key-copy-btn {
    width: 30px;
    height: 30px;
    border: 1px solid #e5e7eb;
    background: #fff;
    border-radius: 8px;
    cursor: pointer;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .2s;
    flex-shrink: 0;
    padding: 0;
}

.svc-key-copy-btn:hover {
    border-color: #3b82f6;
    color: #3b82f6;
}

.svc-key-copy-btn .icon-check {
    display: none;
    color: #10b981;
}

.svc-key-copy-btn.done .icon-copy {
    display: none;
}

.svc-key-copy-btn.done .icon-check {
    display: block;
}

.svc-key-copy-btn.done {
    border-color: #10b981;
    background: #ecfdf5;
    color: #10b981;
}

/* support section - glass card */
.svc-support-glass {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
}

.svc-support-glass-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #2563eb 0%, #3b82f6 40%, #60a5fa 100%);
    opacity: .08;
    border-radius: 10px;
}

.svc-support-glass-content {
    position: relative;
    padding: 1rem;
    background: rgba(37, 99, 235, .04);
    border: 1px solid rgba(59, 130, 246, .15);
    border-radius: 10px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.svc-support-glass-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.svc-support-glass-title {
    font-size: .85rem;
    font-weight: 600;
    color: #1e40af;
    margin: 0;
}

.svc-support-badge {
    font-size: .65rem;
    padding: .25rem .6rem;
    border-radius: 999px;
    font-weight: 600;
    background: rgba(59, 130, 246, .12);
    color: #2563eb;
    border: 1px solid rgba(59, 130, 246, .2);
}

.svc-support-glass-body {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

/* donut */
.svc-support-glass-donut {
    position: relative;
    width: 68px;
    height: 68px;
    flex-shrink: 0;
}

.svc-support-glass-donut svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.svc-glass-donut-track {
    stroke: rgba(59, 130, 246, .1);
}

.svc-glass-donut-fill {
    stroke: #3b82f6;
    transition: stroke-dashoffset .8s ease;
}

.svc-glass-donut-glow {
    stroke: #3b82f6;
    opacity: .25;
    filter: blur(4px);
    stroke-dasharray: 125.66;
    stroke-dashoffset: 12.57;
    stroke-linecap: round;
}

.svc-glass-donut-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: baseline;
    gap: 1px;
    line-height: 1;
}

.svc-glass-donut-pct {
    font-size: 16px;
    font-weight: 800;
    color: #1e40af;
}

.svc-glass-donut-unit {
    font-size: 10px;
    font-weight: 600;
    color: #3b82f6;
}

/* info rows */
.svc-support-glass-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.svc-glass-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.svc-glass-info-label {
    font-size: 12px;
    color: #64748b;
}

.svc-glass-info-val {
    font-size: 12px;
    font-weight: 600;
    color: #1e293b;
    direction: ltr;
}

/* stat active color */
.svc-stat-active {
    color: #047857 !important;
}

/* responsive */
@media (max-width: 768px) {
    .svc-row-2col {
        grid-template-columns: 1fr;
    }

    .svc-license-meta {
        display: flex;
        flex-direction: column;
        gap: .9rem;
        padding: .75rem .25rem;
        background: none;
        border: none;
    }

    .svc-license-meta .muted {
        position: relative;
        padding-right: 1.25rem;
        font-size: .85rem;
        color: #475569;
        line-height: 1.6;
        background: none;
        border: none;
    }

    .svc-license-meta .muted::before {
        content: "";
        position: absolute;
        right: 0;
        top: .35rem;
        width: 3px;
        height: 70%;
        border-radius: 999px;
        background: linear-gradient(180deg, rgba(59, 130, 246, .55), rgba(59, 130, 246, .15));
    }

    .svc-key-text {
        font-size: 11px;
        letter-spacing: 1px;
    }


}

.lic-dashboard-wrapper * {
    box-sizing: border-box;
}

.lic-dashboard-wrapper {
    width: 100%;
    margin: 0 auto;
    padding: 20px;
}

.lic-grid {
    display: grid;
    grid-template-columns: minmax(0, 540px) 1fr;
    gap: 28px;
    align-items: start;
    justify-content: center;
}

@media (max-width: 850px) {
    .lic-grid {
        grid-template-columns: 1fr;
    }
}

.lic-left-column {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    justify-self: center;
}

.lic-card {
    background: #f5faff;
    width: 100%;
    border-radius: 30px;
    padding: 36px 28px 32px 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.lic-gift-ribbon {
    position: absolute;
    top: 16px;
    right: 16px;
    background: linear-gradient(90deg, rgb(40 47 108), rgb(53 157 215));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #fff;
    font-size: 11px;
    font-weight: 300;
    padding: 8px 12px 8px 12px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 4px 15px rgba(0, 114, 255, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
}

.lic-gift-ribbon::before {
    content: '';
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent);
    transform: skewX(-20deg);
    animation: lic-sheen 3s ease-in-out infinite;
}

@keyframes lic-sheen {
    0%, 70%, 100% {
        left: -60%;
        opacity: 0;
    }
    80% {
        opacity: 1;
    }
    90% {
        left: 120%;
        opacity: 0;
    }
}

.lic-gift-ribbon svg {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    fill: none;
    stroke: #fff;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.chart-container {
    position: relative;
    width: 100%;
    max-width: 380px;
    height: 280px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    margin-bottom: -30px;
    z-index: 2;
}

.chart-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.glass-tube-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.65);
    stroke-width: 12;
    stroke-linecap: round;
    filter: drop-shadow(0px 8px 16px rgba(0, 0, 0, 0.05));
}

.chart-progress {
    fill: none;
    stroke: url(#mainGradient);
    stroke-width: 8;
    stroke-linecap: round;
    transition: stroke-dashoffset 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    filter: drop-shadow(0px 6px 12px rgba(53, 157, 215, 0.45));
}

.glass-reflection {
    fill: none;
    stroke: url(#glassGloss);
    stroke-width: 12;
    stroke-linecap: round;
    pointer-events: none;
}

.glass-specular {
    fill: none;
    stroke: rgba(255, 255, 255, 0.9);
    stroke-width: 2;
    stroke-linecap: round;
    filter: blur(1px);
}

.chart-text {
    position: absolute;
    text-align: center;
    bottom: 100px;
}

.percentage {
    font-size: 25px;
    font-weight: 500;
    color: #627387;
    letter-spacing: -1px;
    line-height: 1;
}

.stats-box {
    width: 100%;
    max-width: 350px;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 15px;
    padding: 12px 0px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.03), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    z-index: 2;
    position: relative;
    bottom: 25px;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

.stat-item:first-child {
    border-left: 1px solid rgba(210, 220, 233, 0.6);
}

.stat-value {
    margin-top: 4px;
    font-size: 13px;
    color: #374151;
    font-weight: 400;
}

.stat-title {
    font-size: 12px;
    color: #374151;
    font-weight: 400;
}

.btn-renew {
    width: 100%;
    margin-top: 22px;
    padding: 15px;
    border: none;
    border-radius: 50px;
    background: linear-gradient(90deg, #282e6b 0%, #359dd7 100%);
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    box-shadow: 0 12px 25px rgba(45, 85, 155, 0.35);
    transition: all 0.2s ease;
}

.btn-renew:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 30px rgba(45, 85, 155, 0.45);
}

.btn-renew:active {
    transform: translateY(1px);
}

.btn-renew svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: #ffffff;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lic-key-standalone-card {
    /*background: #eef2f7;*/
    width: 100%;
    border-radius: 30px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    overflow: hidden;
}

.lic-key-header-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: #4b5d73;
}

.lic-key-header-title svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: #359dd7;
    stroke-width: 2;
}

.lic-v2-key-bar {
    display: flex;
    align-items: center;
    justify-content: space-around;
    background: #f5faff;
    padding: 7px 20px 7px 10px;
    border-radius: 12px;
    box-shadow: inset 4px 4px 8px #d6ebff, inset -4px -4px 8px #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.6);
}

.lic-v2-key-code {
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 14px;
    font-weight: 700;
    color: #1e255e;
    direction: ltr;
    letter-spacing: 1px;
    user-select: all;
}

.lic-v2-btn-copy {
    position: relative;
    overflow: hidden;
    padding: 8px 12px !important;
}

.lic-v2-btn-copy svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.3s ease;
}

.lic-v2-btn-copy .ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    transform: scale(0);
    animation: ripple-animation 0.6s linear;
    pointer-events: none;
}

@keyframes ripple-animation {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

.lic-v2-btn-copy.copied {
    background: #0072ff !important;
}

.lic-v2-btn-copy.copied svg {
    transform: rotate(360deg) scale(1.2);
}

.lic-v2-card {
    width: 100%;
    border-radius: 40px;
    padding: 36px 32px 36px 0px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.lic-v2-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 16px;
    border-bottom: 2px dashed rgba(210, 220, 233, 0.8);
}

.lic-v2-order-title {
    font-size: 15px;
    color: #374151;
    font-weight: 500;
}

.lic-v2-order-num {
    font-size: 18px;
    font-weight: 500;
    color: #374151;
    letter-spacing: -0.5px;
}

.lic-v2-info-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.lic-v2-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.lic-v2-info-row:not(:last-child) {
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(210, 220, 233, 0.5);
}

.lic-v2-label {
    font-size: 14px;
    color: #374151;
    font-weight: 400;
}

.lic-v2-value {
    font-size: 14px;
    color: #374151;
    font-weight: 500;
}


.lic-v2-badge-fixed {
    font-size: 11px;
    color: #d97706;
    background: rgba(217, 119, 6, 0.12);
    padding: 3px 10px;
    border-radius: 20px;
    font-weight: 700;
}

.lic-key-row {
    flex-wrap: nowrap;
    align-items: center;
}

.lic-key-row .lic-v2-label {
    flex-shrink: 0;
    white-space: nowrap;
}

.lic-key-row .lic-v2-key-bar {
    width: auto;
    gap: 10px;
    padding: 6px 8px 6px 8px;
}

.lic-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 5px 12px 5px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 400;
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
}

.lic-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
    position: relative;
}

.lic-status-dot::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 2px solid #10b981;
    opacity: 0;
    animation: lic-pulse 2s ease-out infinite;
}

@keyframes lic-pulse {
    0% {
        opacity: 0.6;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(1.8);
    }
}

.lic-status-active .lic-status-dot {
    background: #10b981;
}

.lic-status-active .lic-status-dot::after {
    border-color: #10b981;
}

.lic-status-active {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
}

.lic-status-expired .lic-status-dot {
    background: #ef4444;
}

.lic-status-expired .lic-status-dot::after {
    border-color: #ef4444;
}

.lic-status-expired {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

.lic-status-inactive .lic-status-dot {
    background: #f97316;
}

.lic-status-inactive .lic-status-dot::after {
    border-color: #f97316;
}

.lic-status-inactive {
    background: rgba(249, 115, 22, 0.1);
    color: #ea580c;
}

.lic-dashboard-wrapper {
    padding: 20px 10px;
}

@media (max-width: 768px) {
    .lic-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .lic-left-column {
        width: 100%;
    }

    .lic-card {
        padding: 28px 16px 24px 16px;
    }

    .chart-container {
        max-width: 280px;
        height: 220px;
    }

    .stats-box {
        min-width: unset;
        padding: 10px 0;
    }

    .lic-v2-card {
        padding: 24px 5px;
    }

    .lic-key-row {
        flex-wrap: wrap;
        gap: 8px;
    }

    .lic-key-row .lic-v2-key-bar {
        width: 100%;
        padding: 5px 8px 5px 6px;
        gap: 4px;
    }

    .lic-v2-key-code {
        font-size: 11px;
        letter-spacing: 0;
    }

    .lic-v2-btn-copy {
        padding: 5px 8px !important;
    }

    .lic-v2-info-row {
        gap: 80px;
    }

    .lic-v2-header {
        flex-wrap: wrap;
        gap: 10px;
    }

    .account-tab[data-tab-content="license-detail"] .support-head {
        flex-direction: row;
        align-items: center;
    }

    .lic-dashboard-wrapper {
        padding: 20px 0px;
    }

    .lic-v2-label {
        font-size: 13px;
    }

    .lic-v2-value {
        font-size: 13px;
    }

    .lic-v2-key-bar {
        justify-content: space-around;
    }

    .lic-key-row .lic-v2-key-bar {
        width: auto;
        gap: 10px;
        padding: 6px 10px 6px 10px;
    }

    .chart-text {
        bottom: 80px;
    }

    .lic-gift-ribbon {
        font-size: 10px;
        font-weight: 300;
        padding: 5px 8px;
    }

}

/* ==================== Hosting Detail ==================== */

.hs-hero {
    position: relative;
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    border-radius: 20px;
    padding: 15px 20px;
    margin-bottom: 24px;
    overflow: hidden;
}

.hs-hero-glow {
    position: absolute;
    g
    top: -60px;
    right: -60px;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(0, 114, 255, 0.1) 0%, transparent 70%);
    pointer-events: none;
}

.hs-hero-content {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
}

.hs-hero-domain {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hs-hero-icon {
    width: 36px;
    height: 36px;
    color: #0072ff;
}

.hs-hero-domain-text {
    font-size: 18px;
    font-weight: 500;
    color: #374151;
    letter-spacing: -0.5px;
}

.hs-hero-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}


.hs-hero-sep {
    color: #cbd5e1;
    font-size: 10px;
}

.hs-body {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 0 4px 24px 4px;
}

/* Usage Gauge Cards */
.hs-usage-section {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.hs-gauge-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 20px 16px;
    background: #ffffff;
    border: 1px solid #f1f5f9;
    border-radius: 16px;
    transition: all 0.3s ease;
}

.hs-gauge-card:hover {
    border-color: #e2e8f0;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
    transform: translateY(-3px);
}

.hs-gauge-wrap {
    position: relative;
    width: 100%;
    max-width: 180px;
}

.hs-gauge-svg {
    width: 100%;
    height: auto;
    display: block;
}

.hs-tube-bg {
    fill: none;
    stroke: #f1f5f9;
    stroke-width: 12;
    stroke-linecap: round;
    filter: drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.03));
}

.hs-tube-fill {
    fill: none;
    stroke-width: 12;
    stroke-linecap: round;
    transition: stroke-dashoffset 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.hs-tube-reflect {
    fill: none;
    stroke: url(#hsGloss1);
    stroke-width: 12;
    stroke-linecap: round;
    pointer-events: none;
}

.hs-tube-spec {
    fill: none;
    stroke: rgba(255, 255, 255, 0.85);
    stroke-width: 2;
    stroke-linecap: round;
    filter: blur(1px);
}

.hs-gauge-text {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: 10px;
}

.hs-gauge-pct {
    font-size: 18px;
    font-weight: 600;
    color: #1e293b;
    line-height: 1;
}

.hs-gauge-label {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 4px;
}

.hs-gauge-meta {
    display: flex;
    align-items: center;
    gap: 2px;
    text-align: center;
}

.hs-gauge-used {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
}

.hs-gauge-total {
    font-size: 12px;
    color: #64748b;
}

/* Info Cards */
.hs-info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.hs-info-card {
    background: #ffffff;
    border: 1px solid #f1f5f9;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.hs-info-card:hover {
    border-color: #e2e8f0;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
}

.hs-info-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    background: #f8fafc;
    border-bottom: 1px solid #f1f5f9;
    font-size: 15px;
    font-weight: 500;
    color: #374151;
}

.hs-info-card-header svg {
    width: 18px;
    height: 18px;
    color: #0072ff;
}

.hs-info-card-body {
    padding: 4px 0;
}

.hs-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
}

.hs-info-label {
    font-size: 14px;
    color: #374151;
}

.hs-info-value {
    font-size: 14px;
    font-weight: 500;
    color: #374151;
}

.hs-info-value.hs-ltr {
    direction: ltr;
    font-size: 14px;
}

.hs-info-divider {
    height: 1px;
    background: #f8fafc;
    margin: 0 20px;
}

/* Quick Links */
.hs-quick-section,
.hs-features-section {
    background: #ffffff;
    border-radius: 16px;
    padding: 15px 5px;
}

.hs-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.hs-section-header h4 {
    font-size: 17px !important;
    font-weight: 500;
    color: #1e293b;
    margin: 0;
}

.hs-quick-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.hs-quick-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: #ffffff;
    border: 1px solid #f1f5f9;
    border-radius: 14px;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hs-quick-card:hover {
    border-color: #e2e8f0;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
    transform: translateY(-3px);
}

.hs-quick-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s ease;
}


.hs-quick-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.hs-quick-name {
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hs-quick-desc {
    font-size: 12px;
    color: #374151;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hs-quick-arrow {
    width: 18px;
    height: 18px;
    color: #cbd5e1;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.hs-quick-arrow svg {
    width: 100%;
    height: 100%;
}

.hs-quick-card:hover .hs-quick-arrow {
    color: #64748b;
    transform: translateX(-3px);
}

@media (max-width: 768px) {
    .hs-hero {
        padding: 20px 14px;
        border-radius: 16px;
    }

    .hs-hero-content {
        gap: 12px;
        align-items: flex-start;
    }

    .hs-hero-domain-text {
        font-size: 16px !important;
    }

    .hs-body {
        gap: 16px;
        padding: 0;
    }

    .hs-usage-section {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .hs-gauge-card {
        padding: 14px 8px;
    }

    .hs-gauge-wrap {
        max-width: 140px;
    }

    .hs-gauge-meta {
        gap: 4px;
    }

    .hs-gauge-used {
        font-size: 13px;
    }

    .hs-gauge-total {
        font-size: 11px;
    }

    .hs-section-header h4 {
        font-size: 16px !important;
    }

    .hs-info-grid {
        grid-template-columns: 1fr;
    }

    .hs-info-card-body {
        padding: 14px;
    }

    .hs-info-card-header {
        padding: 14px 16px;
        gap: 10px;
    }

    .hs-info-card-header svg {
        width: 20px;
        height: 20px;
    }

    .hs-info-row {
        padding: 10px 16px;
    }

    .hs-info-label {
        font-size: 12px;
    }

    .hs-info-value {
        font-size: 12px;
    }

    .hs-quick-section {
        padding: 15px 0px;
        overflow: hidden;
    }

    .hs-quick-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .hs-quick-card {
        padding: 14px 12px;
    }

    .hs-quick-arrow {
        display: none;
    }

    .support-head .border-title {
        font-size: 18px;
    }
}


/* ===================================================================
   AFZODANI DETAIL — Refined
   =================================================================== */

/* ── Keyframes ─────────────────────────────────────────────────── */
@keyframes afz-float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-6px);
    }
}

@keyframes afz-pulse-dot {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(34, 197, 94, 0);
    }
}

/* ── Hero Section ──────────────────────────────────────────────── */
.afz-hero-section {
    padding-bottom: 48px;
}

.afz-hero {
    background: #fff;
    border: 1px solid #e8ecf1;
    border-radius: 22px;
    padding: 44px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03), 0 8px 24px rgba(0, 0, 0, 0.02);
    transition: box-shadow 0.3s ease;
}

.afz-hero:hover {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03), 0 12px 32px rgba(0, 0, 0, 0.04);
}

.afz-hero-top {
    display: flex;
    align-items: center;
    gap: 36px;
}

.afz-hero-icon-area {
    position: relative;
    flex-shrink: 0;
}

.afz-hero-icon-ring {
    width: 116px;
    height: 116px;
    border-radius: 28px;
    background: linear-gradient(145deg, #eef4ff 0%, #ecfdf5 50%, #f5f0ff 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #dde5f5;
    animation: afz-float 4s ease-in-out infinite;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.afz-hero-icon-ring:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.12);
}

.afz-hero-icon {
    width: 58px;
    height: 58px;
}

.afz-hero-badge {
    position: absolute;
    bottom: -4px;
    right: -4px;
}

.afz-hero-text {
    flex: 1;
    min-width: 0;
}

/* Tags */
.afz-hero-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.afz-tag {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 14px;
    border-radius: 20px;
    letter-spacing: 0.01em;
    transition: transform 0.2s ease;
}

.afz-tag:hover {
    transform: scale(1.04);
}

.afz-tag-cat {
    background: #eef4ff;
    color: #3b6df0;
}

.afz-tag-ver {
    background: #ecfdf5;
    color: #059669;
}

.afz-tag-wp {
    background: #fef9ec;
    color: #b45309;
}

/* Title & Description */
.afz-hero-title {
    font-size: 26px;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 12px;
    line-height: 1.25;
    letter-spacing: -0.02em;
}

.afz-hero-desc {
    font-size: 15px;
    color: #6b7280;
    line-height: 1.9;
    margin: 0 0 18px;
    max-width: 560px;
}



/* ── Stats Bar ─────────────────────────────────────────────────── */
.afz-hero-stats {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 28px;
    border-top: 1px solid #eef1f6;
    flex-wrap: wrap;
}

/* Buy Group */
.afz-hero-buy-group {
    display: flex;
    gap: 10px;
    margin-right: auto;
    flex-wrap: wrap;
    align-items: flex-end;
    flex-direction: column;
}

.afz-tag svg {
    flex-shrink: 0;
    margin-left: 4px;
}

.afz-hero-price {
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-end;
    gap: 4px;
}

.afz-hero-price .price-old {
    display: flex;
    font-size: 13px;
    opacity: 0.5;
    text-decoration: line-through;
    flex-direction: row-reverse;
    align-items: center;
}

.afz-hero-price .price-new {
    font-size: 17px;
    font-weight: 700;
    color: #202e41;
}

.afz-hero-buy-btn {
    font-size: 13px !important;
    gap: 6px;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(6px);
    transition: all 0.3s ease;
}

.afz-hero-buy-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.12);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.afz-hero-buy-btn:hover::before {
    opacity: 1;
}

.afz-hero-buy-btn:hover {
    transform: translateY(-1px);
}

/* ── Tab Navigation (template pattern) ──────────────────────── */
.afz-tab-nav {
    position: relative;
    display: inline-flex;
    gap: 8px;
    background: rgb(243 244 246 / 80%);
    backdrop-filter: blur(8px);
    padding: 6px;
    border-radius: 12px;
    border: 1px solid rgb(229 231 235 / 50%);
    margin-bottom: 32px;
}

.afz-tab-btn {
    position: relative;
    padding: 6px 20px;
    font-size: 14px;
    font-weight: 600;
    color: #6b7280;
    border-radius: 12px;
    transition: all 0.3s ease;
    z-index: 10;
    background: transparent;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    font-family: inherit;
}

.afz-tab-btn:hover {
    color: #1e3a8a;
}

.afz-tab-btn.active {
    color: #2563eb;
}

.afz-tab-indicator {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    background: rgb(239 246 255 / 70%);
    border: 1px solid rgb(191 219 254 / 50%);
    border-radius: 12px;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1;
}

.afz-tab-content {
    display: none;
    animation: afzFadeInTab 0.4s ease forwards;
}

.afz-tab-content.active {
    display: block;
}

@keyframes afzFadeInTab {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Glass Panel (template pattern) ─────────────────────────── */
.afz-glass-panel {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(12px);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 40px -10px rgba(37, 99, 235, 0.1);
    padding: 50px;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.afz-glass-panel:hover {
    box-shadow: 0 5px 20px -5px rgba(37, 99, 235, 0.2);
}

/* ── Screenshot Grid ─────────────────────────────────────────── */
.afz-screenshot-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.afz-screenshot-item {
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    cursor: pointer;
    aspect-ratio: 16/10;
    box-shadow: 0 4px 15px -3px rgba(0, 0, 0, 0.08);
}

.afz-screenshot-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.afz-screenshot-item:hover img {
    transform: scale(1.08);
}

.afz-screenshot-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 50%);
    display: flex;
    align-items: flex-end;
    padding: 1rem 1.25rem;
    opacity: 0;
    transition: opacity 0.35s ease;
}

.afz-screenshot-item:hover .afz-screenshot-overlay {
    opacity: 1;
}

.afz-screenshot-overlay span {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

/* ── Specs Grid ─────────────────────────────────────────────── */
.afz-specs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.afz-specs-col {
    display: flex;
    flex-direction: column;
}

.afz-specs-heading {
    font-size: 17px;
    color: #4b5563;
    margin-bottom: 16px;
    font-weight: 600;
}

.afz-specs-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid rgb(243 244 246);
    font-size: 14px;
}

.afz-specs-row:last-child {
    border-bottom: none;
}

.afz-specs-label {
    color: #6b7280;
}

.afz-specs-value {
    font-weight: 600;
    color: #1f2937;
}

.afz-val-green {
    color: #22c55e;
}

/* ── Description Text ───────────────────────────────────────── */
.afz-desc-text p {
    font-size: 16px;
    color: #475569;
    line-height: 2.1;
    text-align: justify;
    margin-bottom: 18px;
}

.afz-desc-text p:last-child {
    margin-bottom: 0;
}

/* ── Review Form ────────────────────────────────────────────── */
.afz-review-form {
    margin-bottom: 32px;
}

.afz-review-form textarea {
    width: 100%;
}

.afz-submit-btn {
    padding: 12px 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #fff;
    font-size: 14px;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
    transition: all 0.2s ease;
    cursor: pointer;
    border: none;
    font-family: inherit;
}

.afz-submit-btn:hover {
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.35);
    transform: translateY(-1px);
}

.afz-submit-btn:active {
    transform: scale(0.97);
}

/* ── Section Header ─────────────────────────────────────────── */
.flex.items-center.mb-8 {
    display: flex;
    align-items: center;
    margin-bottom: 32px;
}

.w-1\.5 {
    width: 6px;
}

.h-7 {
    height: 28px;
}

.bg-gradient-to-b {
    background: linear-gradient(to bottom, #3b82f6, #6366f1);
}

.rounded-full {
    border-radius: 9999px;
}

/* ── Timeline Changelog ────────────────────────────────────────── */
.afz-timeline {
    position: relative;
    padding-right: 30px;
}

.afz-timeline::before {
    content: '';
    position: absolute;
    right: 7px;
    top: 10px;
    bottom: 10px;
    width: 2px;
    background: linear-gradient(to bottom, #e2e8f0, #f1f5f9);
    border-radius: 2px;
}

.afz-timeline-item {
    position: relative;
    margin-bottom: 32px;
}

.afz-timeline-item:last-child {
    margin-bottom: 0;
}

.afz-timeline-dot {
    position: absolute;
    right: -30px;
    top: 22px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 3px solid #fff;
    transition: transform 0.3s ease;
}

.afz-timeline-item:first-child .afz-timeline-dot {
    animation: afz-pulse-dot 2s ease-in-out infinite;
}

.afz-dot-green {
    background: #22c55e;
    box-shadow: 0 0 0 2px #22c55e;
}

.afz-dot-blue {
    background: #3b82f6;
    box-shadow: 0 0 0 2px #3b82f6;
}

.afz-timeline-card {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #eef1f6;
    overflow: hidden;
    transition: box-shadow 0.3s ease;
}

.afz-timeline-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.afz-timeline-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 22px;
    background: #f8fafb;
    border-bottom: 1px solid #eef1f6;
}

.afz-timeline-ver {
    font-weight: 800;
    font-size: 15px;
    color: #2563eb;
    letter-spacing: -0.01em;
}

.afz-timeline-date {
    font-size: 13px;
    color: #94a3b8;
}

.afz-timeline-list {
    list-style: none;
    margin: 0;
    padding: 18px 22px;
}

.afz-timeline-list li {
    position: relative;
    padding: 7px 0 7px 26px;
    font-size: 14px;
    color: #475569;
    line-height: 1.85;
}

.afz-timeline-list li::before {
    content: '';
    position: absolute;
    right: 0;
    top: 14px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.afz-ch-added::before {
    background: #22c55e;
}

.afz-ch-fixed::before {
    background: #ef4444;
}

.afz-ch-improved::before {
    background: #3b82f6;
}

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .afz-hero {
        padding: 28px;
        border-radius: 18px;
    }

    .afz-hero-top {
        flex-direction: column;
        text-align: center;
        align-items: center;
        gap: 24px;
    }

    .afz-hero-icon-ring {
        width: 100px;
        height: 100px;
        border-radius: 24px;
    }

    .afz-hero-icon {
        width: 50px;
        height: 50px;
    }

    .afz-hero-tags {
        justify-content: center;
    }

    .afz-hero-title {
        font-size: 24px;
    }

    .afz-hero-desc {
        margin-left: auto;
        margin-right: auto;
        font-size: 15px;
    }


    .afz-hero-stats {
        justify-content: center;
        gap: 10px;
    }

    .afz-hero-buy-group {
        justify-content: center;
        width: 100%;
    }

    .afz-screenshot-grid {
        grid-template-columns: 1fr;
    }

    .afz-specs-grid {
        grid-template-columns: 1fr;
    }

    .afz-tab-btn {
        padding: 8px 14px;
        font-size: 13px;
    }

    .afz-tab-nav {
        gap: 0;
        padding: 3px;
        border-radius: 12px;
    }

    .afz-glass-panel {
        padding: 28px;
    }

    .afz-timeline {
        padding-right: 26px;
    }

    .afz-timeline-dot {
        right: -26px;
        width: 16px;
        height: 16px;
        top: 20px;
    }
}
.border-arrow{
    border: 1px solid #d7dde5;
    border-radius: 15px;
    padding: 8px;
}

/* اخبار الوند: اسلایدر - چیدمان و تصویر */
#company-news-slider-track > div {
    grid-template-columns: 340px 1fr;
    gap: 16px;
}

#company-news-slider-track > div > div:first-child {
    width: 340px;
    height: 340px;
    overflow: hidden;
    background-color: #f1f5f9;
}

#company-news-slider-track img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

@media (max-width: 767px) {
    #company-news-slider-track > div {
        grid-template-columns: 1fr;
    }
    #company-news-slider-track > div > div:first-child {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
    }
}

/* اخبار الوند: دکمه‌های اسلایدر */
#company-news-prevBtn,
#company-news-nextBtn {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.1s ease;
}


#company-news-prevBtn:active,
#company-news-nextBtn:active {
    transform: scale(0.9);
}

#company-news-prevBtn svg,
#company-news-nextBtn svg {
    transition: color 0.3s ease;
}

/* اخبار الوند: ستون عنوان سمت راست */
.alvand-news-watermark {
    position: absolute;
    top: -10px;
    right: 0px;
    font-size: 150px;
    font-weight: 900;
    line-height: 1;
    color: rgba(33, 67, 132, 0.06);
    z-index: 0;
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
}

.alvand-news-kicker {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #214384;
    position: relative;
    z-index: 1;
}

.alvand-news-kicker-line {
    width: 26px;
    height: 1px;
    background-color: #214384;
}

.alvand-news-title {
    font-size: clamp(1.9rem, 2.8vw, 2.7rem);
    font-weight: 800;
    color: #0f172a;
    line-height: 1.25;
    position: relative;
    z-index: 1;
}

.alvand-news-accent {
    color: #214384;
    position: relative;
}

.alvand-news-accent::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -3px;
    height: 2px;
    background-color: #214384;
}

.alvand-news-divider {
    width: 52px;
    height: 1px;
    background-color: #e2e8f0;
    position: relative;
    z-index: 1;
}

.alvand-news-desc {
    font-size: 14px;
    line-height: 2;
    color: #64748b;
    max-width: 36ch;
    position: relative;
    z-index: 1;
}

.alvand-news-meta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 12.5px;
    font-weight: 500;
    color: #94a3b8;
    position: relative;
    z-index: 1;
}

.alvand-news-live {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #22c55e;
    position: relative;
    flex-shrink: 0;
}

.alvand-news-live::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background-color: #22c55e;
    animation: alvand-news-pulse 1.8s ease-out infinite;
}

@keyframes alvand-news-pulse {
    0% {
        transform: scale(1);
        opacity: 0.7;
    }
    100% {
        transform: scale(2.6);
        opacity: 0;
    }
}

/* اخبار الوند: عنوان اسلایدر */
.alvand-news-slide-title {
    font-size: 22px !important;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.6;
    position: relative;
    padding-right: 18px;
    transition: color 0.3s ease;
    margin-bottom: 20px;
}

.alvand-news-slide-title::before {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 26px;
    border-radius: 2px;
    background-color: #214384;
}

.alvand-news-slide-title:hover {
    color: #214384;
}

@media (min-width: 768px) {
    .alvand-news-slide-title {
        font-size: 26px;
    }
}

/* اخبار الوند: افکت حرکت کارت‌ها (کراس‌فید) */
#company-news-slider-track {
    display: grid;
    grid-template-columns: 1fr;
}

#company-news-slider-track > div {
    grid-area: 1 / 1;
    opacity: 0;
    transition: opacity 0.9s ease;
}

#company-news-slider-track > div.cn-slide-active {
    opacity: 1;
}

#company-news-slider-track > div.cn-slide-active img {
    animation: alvand-kenburns 6s ease-out forwards;
}

@keyframes alvand-kenburns {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.08);
    }
}

.container-8x{
    width: 86rem;
}