@import "/public/__Global/Styles/global.css";

/*root*/
:root {
    --color-bg: #fafafa;
    --color-bg-50: #FEFEFE;
    --color-bg-100: #FDFDFD;
    --color-bg-200: #FCFCFC;
    --color-bg-300: #FBFBFB;
    --color-bg-400: #FAFAFA;
    --color-bg-500: #F9F9F9;
    --color-bg-600: #F9F9F9;
    --color-bg-700: #F8F8F8;
    --color-bg-800: #F7F7F7;
    --color-bg-900: #F6F6F6;
    --color-primary: #4C4C4C;
    --color-primary-50: #DBDBDB;
    --color-primary-100: #B7B7B7;
    --color-primary-200: #939393;
    --color-primary-300: #6F6F6F;
    --color-primary-400: #5D5D5D;
    --color-primary-500: #3A3A3A;
    --color-primary-600: #282828;
    --color-primary-700: #040404;
    --color-primary-800: #000000;
    --color-primary-900: #000000;

    /*--base-color: #F39C12;*/
    --base-color: #019724;
    --back-color: #F2F2F2;
    --box-color: #2C3E50;
    --div-color: #ededed;

    --pop-color: #1f96fc;
    --bilt-color: #21aef1;
    --boarder-color: #033541;
    --select-color: #ffdd00;
    --hover-color: #ffa200;

    --green-color: #3cb878;
    --snow-color: #f8f8f8;
    --red-color: #cd0303;
    --yellow-color: #ffcc00;
    --gold-color: gold;

    --bg: #f2f2f2;
    --border: #dcdcdc;
    --accent: #ff8c3a;

    --thumb-size: 80px;
    --gap: 10px;
    --transition-speed: 0.3s;

    --blue: #1672dc;
    --blue-dark: #095dbf;
    --ink: #132238;
    --text: #17263b;
    --muted: #7d8795;
    --line: #e8edf5;
    --surface: #fefefe;
    --surface-soft: #f6faff;
    --surface-blue: #edf6ff;
    --footer: #146de4;
    --shadow: 0 10px 25px rgba(25, 75, 140, .08);
}

::-webkit-scrollbar-thumb {
    background: rgb(16 83 116) !important;
}

/* pages */
html, body {
    position: relative;
    display: block;
    clear: both;
    z-index: 0;
    margin: 0;
    padding: 0;
    width: min(100vW, 100%);
    height: min(100vH, 100%);;
    overflow-x: hidden;
    background: #f6f6f6;
}

body {
    overflow-y: auto;
    scroll-behavior: smooth;
    direction: ltr;
}

i svg, i img {
    width: 100%;
    height: 100%;
    display: block;
    clear: both;
    cursor: pointer;
    position: relative;
}

web {
    position: relative;
    margin: 0px auto;
    width: 100%;
    height: auto;
    min-height: 100%;
    display: block;
    z-index: 0;
    clear: both;
    background: transparent;
    transform-style: preserve-3d;
    background-blend-mode: overlay;
    perspective: 50vW;
    perspective-origin: center;
}

web section {
    position: relative;
    margin: auto;
    display: block;
    clear: both;
    direction: rtl;
}

header.desktop {
    position: relative;
    margin: 0px auto 30px auto;
    display: block;
    clear: both;
    width: calc(100% - 6%);
    background: #fafafa;
    border-bottom: 1px solid #e8e8e8;
    direction: rtl;
    padding: 1.5%;
    z-index: 100;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

header.desktop .line_bar span.btn1 {
    position: relative;
    margin: 15px 25px 15px 5px;
    padding: 15px 45px 15px 50px;
    border: 1px solid #c6c7c8;
    color: #212529;
    display: inline-block;
    font-size: 13px;
    font-family: var(--font-family, 'sans');
    border-radius: 12px;
    cursor: pointer;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

header.desktop .line_bar span.btn1:hover {
    border: 1px solid #161616;
}

header.desktop img.head_immg {
    position: absolute;
    margin: auto;
    display: block;
    left: 10%;
    top: 0;
    bottom: 0;
    height: 90%;
    width: auto;
    max-width: 256px;
    max-height: 110px;
}

header.desktop .line_bar span.btn1 i {
    width: 25px;
    height: 25px;
    top: 0;
    bottom: 0;
    right: 15px;
}

header.desktop .line_bar span.btn1 contbask {
    position: absolute;
    margin: auto;
    padding: 5px;
    font-size: 8px;
    min-width: 15px;
    height: 15px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #212529;
    background: #e8e8e8;
    top: 0;
    bottom: 0;
    left: 10px;
    font-family: var(--font-family, 'sans');
}

header.desktop .line_bar span.btn2 {
    position: relative;
    margin: 15px 5px 15px 20px;
    padding: 15px 45px 15px 50px;
    border: 1px solid #c6c7c8;
    color: #f8f8f8;
    display: inline-block;
    font-size: 14px;
    font-family: var(--font-family, 'sans');
    cursor: pointer;
    align-items: center;
    justify-content: center;
    background: var(--color-accent);
    border-radius: 12px;
    overflow: unset !important;
    z-index: 11;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

header.desktop .line_bar span.btn2:hover {
    background: var(--color-accent-400);
}

header.desktop .line_bar span.btn2 i {
    top: 0;
    bottom: 0;
    width: 25px;
    height: 25px;
    right: 10px;
}

header.desktop .line_bar {
    position: relative;
    display: flex;
    clear: both;
    width: 100%;
    margin: 5px auto;
}

header.desktop .line_bar span.search_box {
    position: relative;
    margin: 15px 5px 15px 20px;
    display: inline-block;
    font-size: 14px;
    font-family: var(--font-family, 'sans');
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    width: 30%;
}

header.desktop .line_bar span.search_box input {
    position: relative;
    width: calc(100% - 74px);
    height: calc(100% - 24px);
    border-radius: 12px;
    background-color: #f0f0f1;
    border: none;
    padding: 14px 64px 14px 10px;
    font-weight: 400;
    color: #212529;
    font-family: var(--font-family, 'sans');
    font-size: 14px;
}

header.desktop .line_bar span.search_box input::placeholder {
    color: #5c5e60;
}

header.desktop .line_bar span.search_box i {
    top: 0;
    bottom: 0;
    width: 25px;
    height: 25px;
    right: 20px;
}

header.desktop .line_bar h1.list {
    position: relative;
    display: inline-block;
    margin: 5px 10px;
    direction: rtl;
    font-size: 15px;
    padding: 5px;
    font-family: var(--font-family, 'sans');
    font-weight: 500;
    right: 15px;
    text-decoration: none;
    cursor: pointer;
}


header.desktop .line_bar h1.list::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 2px;
    background: rgba(30, 30, 30, 0.68);
    transition: width 0.3s ease;
}

header.desktop .line_bar h1.list:hover::after {
    width: 100%;
}

header.desktop .line_bar span.btn2 i:nth-of-type(2) {
    right: unset;
    left: 10px;
    cursor: pointer;
}

header .minimal_menu {
    position: absolute;
    margin: auto;
    display: none;
    width: 200px;
    max-width: 90vW;
    height: auto;
    direction: ltr;
    padding: 20px;
    background: #f8f8f8;
    border-radius: 10px;
    left: -100px;
    top: 70px;
    z-index: 50;
    animation: floatText 12s ease-in-out infinite;
    transform: rotateX(0deg) rotateY(0deg);
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

header .minimal_menu li {
    position: relative;
    display: block;
    margin: auto;
    clear: both;
    padding: 10px;
    direction: rtl;
    cursor: pointer;
    color: #181818;
    font-family: var(--font-family, 'sans');
    font-size: 14px;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

header .minimal_menu li:hover {
    color: #181818;
    font-family: var(--font-family);
    font-weight: 900;
}

header .menu-item {
    position: relative;
    display: block;
    margin: auto;
    clear: both;
    padding: 10px;
    direction: rtl;
    cursor: pointer;
    color: #181818;
    font-family: var(--font-family, 'sans');
    font-size: 14px;
    transition: all 0.5s ease;
}

header .menu-item:hover {
    color: #181818;
    font-family: var(--font-family);
    font-weight: 900;
}

header .menu-item .minimal_menu {
    right: 180px;
    top: 0;
    background: #ffffff;
    border: 1px solid #e0e0e0;
}

header.mobile {
    grid-template-columns: 20% 20% 20% 20% 20%;
    direction: rtl;
    clear: both;
    margin: auto;
    position: fixed;
    width: auto;
    bottom: -5px;
    right: 0;
    left: 0;
    border-top-right-radius: 0;
    border-top-left-radius: 0;
    border-top: 1px solid #e8e8e8;
    background: #fff;
    z-index: 100;
    padding: 5px 0px 7px 0px;
    min-height: 30px;
}

header.mobile {
    display: none;
    opacity: 0;
}

header.mobile .line_bar {
    position: relative;
    display: block;
    margin: 10px;
    text-align: center;
    justify-content: center;
    padding-top: 40px;
    font-size: 12px;
    font-family: var(--font-family, 'sans');
    width: calc(100% - 20px);
    cursor: pointer;
    height: calc(100% - 20px);
}

header.mobile .line_bar contbask {
    position: absolute;
    margin: auto;
    display: block;
    width: 15px;
    height: 15px;
    font-size: 10px;
    padding: 5px;
    background: var(--base-color);
    color: #f8f8f8;
    border-radius: 50%;
    top: -10%;
    left: 0px;
    right: 15%;
    opacity: 0.7;
    overflow: hidden;
    cursor: pointer;
}

header.mobile .line_bar i {
    width: 25px;
    height: 25px;
    top: 2px;
    right: 0px;
    left: 0px;
    cursor: pointer;
}

header.mobile .line_bar i svg path, header.mobile .line_bar i svg circle {
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

header.mobile .line_bar.active {
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    color: #89c67b !important;
}

header.mobile .line_bar.active i svg path, header.mobile .line_bar.active i svg circle {
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    stroke: #3fb524 !important;
    fill: #89c67b !important;
}

@keyframes floatText {
    0% {
        transform: translateY(0) rotateY(0deg);
    }
    25% {
        transform: translateY(-8px) rotateY(5deg);
    }
    50% {
        transform: translateY(0) rotateY(0deg);
    }
    75% {
        transform: translateY(8px) rotateY(-5deg);
    }
    100% {
        transform: translateY(0) rotateY(0deg);
    }
}

footer {
    background: var(--color-bg, #fafafa);
    color: #212529;
    border-top: 1px solid #E5E5E5;
    position: relative;
    margin: auto;
    display: block;
    clear: both;
    z-index: 50;
    direction: rtl;
}

footer .foot_line {
    border-bottom: 1px solid #e5e5e5;
    display: flex;
    text-align: center;
    justify-content: center;
    position: relative;
    margin: auto;
    direction: rtl;
}

footer .foot_line h1 {
    position: relative;
    display: inline-block;
    margin: 10px 15px;
    padding: 15px 5px;
    font-family: var(--font-family, 'sans');
    font-size: 12px;
    cursor: pointer;
    color: #181818;
}

footer .foot_line h1:hover {
    font-family: var(--font-family);
    font-weight: 900;
}

footer .lin_f {
    display: flex;
    text-align: right;
    justify-content: right;
    position: relative;
    margin: 20px auto 10px auto;
    direction: rtl;
    width: 90%;
}

footer .lin_f span {
    position: relative;
    display: inline-block;
    margin: 10px 15px;
    padding: 5px 20px 5px 5px;
    font-family: var(--font-family, 'sans');
    font-size: 12px;
    cursor: pointer;
    color: #848488;
    direction: rtl;
    cursor: pointer;
    opacity: 0.8;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

footer .lin_f span:hover {
    color: #575760;
    opacity: 1;
}

footer .lin_f span i {
    width: 15px;
    height: 15px;
    right: 0px;
    top: 0;
    bottom: 0;
}

footer .text_bil {
    padding: 10px 15px;
    display: block;
    margin: auto 5% 20px auto;
    position: relative;
    direction: rtl;
    width: 90%;
    font-family: var(--font-family);
    font-size: 14px;
}

footer .foot_line {
    position: relative;
    margin: auto;
    display: block;
    clear: both;
    width: 100%;
    height: auto;
    border-bottom: 1.4px solid #eeeeeea1;
}

footer .foot_line lable {
    position: relative;
    margin: auto;
    display: block;
    width: 100%;
    height: 100%;
    text-align: center;
    justify-content: center;
}

footer .foot_line lable h3 {
    color: #f8f8f8;
    font-family: 'stedad_b';
    direction: rtl;
}

footer .foot_line lable i {
    position: relative;
    display: block;
    margin: 35px auto 10px auto;
    justify-content: center;
    text-align: center;
    padding: 25px;
    border: 1.5px solid #f8f8f8;
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

footer span.up {
    position: absolute;
    margin: auto;
    display: block;
    color: #2C3E50;
    background: var(--back-color);
    left: 5%;
    text-align: center;
    top: -55px;
    width: 64px;
    height: 64px;
    font-size: 14px;
    font-family: 'sans_b';
    border-radius: 8px 8px 0px 0px;
    cursor: pointer;
    z-index: -1;
}

footer span.up svg, footer span.what svg, footer span.insta svg {
    position: absolute;
    display: block;
    width: 60%;
    height: 60%;
    cursor: pointer;
    margin: auto;
    top: 0px;
    bottom: 0px;
    right: 0px;
    left: 0px;
}


footer .foot_line lable h1 {
    width: 100%;
    font-family: 'stedad_b';
    text-align: right;
    font-weight: 900;
    background: transparent;
    font-size: 16px;
    margin: 10px 15px;
}

lable ul.foot_ul {
    position: relative;
    margin: auto;
    display: block;
    width: 100%;
    height: auto;
    max-height: 100%;
    overflow: hidden;
}

lable ul.foot_ul li {
    position: relative;
    display: grid;
    margin: 10px 5px;
    clear: both;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 0;
    width: 95%;
    height: 100px;
}

lable ul.foot_ul li img {
    position: relative;
    display: block;
    grid-row: 1 / span 2;
    max-width: 100%;
    max-height: 100%;
    cursor: pointer;
    border-radius: 10px;
}

lable ul.foot_ul li h2, lable ul.foot_ul li h3 {
    position: relative;
    margin: auto;
    display: block;
    text-align: right;
    font-family: 'stedad';
    width: 90%;
    padding: 5%;
    direction: rtl;
}

lable ul.foot_ul li h2 {
    font-size: 13px;
    color: #c3c3c3;
    cursor: pointer;
}

lable ul.foot_ul li h3 {
    font-size: 12px;
    color: var(--base-color);
}

footer .foot_line text {
    position: relative;
    display: block;
    margin: 10px 15px;
    padding: 10px 40px 10px 10px;
    font-size: 16px;
    font-family: 'stedad';
    color: #969fa1;
}

footer .foot_line text i {
    position: absolute;
    margin: auto;
    display: block;
    width: 30px;
    height: 30px;
    font-size: 30px;
    top: 0;
    bottom: 0;
    right: 5px;
    color: #969fa1;
}

footer .foot_line b {
    position: relative;
    display: block;
    margin: 10px 15px;
    padding: 10px 10px 10px 10px;
    font-size: 14px;
    font-family: 'system-ui';
    color: #777e80;
}

footer .foot_line list {
    position: relative;
    margin: 10px auto;
    text-align: center;
    justify-content: center;
    display: flex;
    max-width: 80%;
}

footer .foot_line list li {
    position: relative;
    display: block;
    margin: auto;
    padding: 5px;
    width: 30px;
    height: 30px;
    cursor: pointer;
}

footer .foot_line list li i {
    position: relative;
    margin: auto;
    display: block;
    width: 100%;
    height: 100%;
    font-size: 30px;
    cursor: pointer;
}

.enemad_foot {
    position: absolute;
    margin: auto;
    display: block;
    clear: both;
    height: 80px;
    bottom: 5%;
    left: 5%;
    cursor: pointer;
}

.enemad_foot img {
    position: relative;
    display: block;
    margin: auto;
    width: auto;
    height: 100%;
    cursor: pointer;
}


slider {
    position: relative;
    margin: 35px auto;
    display: block;
    clear: both;
    width: 100%;
    height: auto;
    z-index: 1;
    opacity: 1;
    /*overflow: hidden;*/
    /*overflow-x: auto;*/
    /*white-space: nowrap;*/
    -webkit-animation-name: start;
    -webkit-animation-duration: 0.2s;
    -webkit-animation-iteration-count: 1;
    -moz-animation-name: start;
    -moz-animation-duration: 0.2s;
    -moz-animation-iteration-count: 1;
    animation-name: start;
    animation-duration: 0.2s;
    animation-iteration-count: 1;
}

slider::-webkit-scrollbar, slider::-webkit-scrollbar:hover, slider::-webkit-scrollbar-thumb, slider::-webkit-scrollbar-corner, slider::-webkit-scrollbar-track, slider::-webkit-scrollbar-thumb:hover, slider::-webkit-scrollbar:hover, slider::-webkit-scrollbar-thumb:active, slider::-moz-scrollbar, slider::-moz-scrollbar:hover, slider::-moz-scrollbar-thumb, slider::-moz-scrollbar-corner, slider::-moz-scrollbar-track, slider::-moz-scrollbar-thumb:hover, slider::-moz-scrollbar:hover, slider::-moz-scrollbar-thumb:active,
.box_list::-webkit-scrollbar, .box_list::-webkit-scrollbar:hover, .box_list::-webkit-scrollbar-thumb, .box_list::-webkit-scrollbar-corner, .box_list::-webkit-scrollbar-track, .box_list::-webkit-scrollbar-thumb:hover, .box_list::-webkit-scrollbar:hover, .box_list::-webkit-scrollbar-thumb:active, .box_list::-moz-scrollbar, .box_list::-moz-scrollbar:hover, .box_list::-moz-scrollbar-thumb, .box_list::-moz-scrollbar-corner, .box_list::-moz-scrollbar-track, .box_list::-moz-scrollbar-thumb:hover, .box_list::-moz-scrollbar:hover, .box_list::-moz-scrollbar-thumb:active {
    visibility: hidden;
    height: 0px;
    width: 0px;
    opacity: 0;
    display: none;
}

slider img {
    display: none;
    position: relative;
    text-align: center;
    margin: auto auto 15px auto;
    text-decoration: none;
    max-width: calc(95% - 30px);
    max-height: calc(95% - 30px);
    width: auto;
    height: auto;
    min-height: 100%;
    overflow: hidden;
    -webkit-user-drag: none;
    box-shadow: 0px 0px 5px #3e3e3e54;
    -webkit-animation-name: start;
    -webkit-animation-duration: 0.2s;
    -webkit-animation-iteration-count: 1;
    -moz-animation-name: start;
    -moz-animation-duration: 0.2s;
    -moz-animation-iteration-count: 1;
    animation-name: start;
    animation-duration: 0.2s;
    animation-iteration-count: 1;
}

.slide_right {
    -webkit-animation-name: slide_right;
    -webkit-animation-duration: 0.2s;
    -webkit-animation-iteration-count: 1;
    -moz-animation-name: slide_right;
    -moz-animation-duration: 0.2s;
    -moz-animation-iteration-count: 1;
    animation-name: slide_right;
    animation-duration: 0.2s;
    animation-iteration-count: 1;
}

@-moz-keyframes slide_right {
    0% {
        opacity: 0.2;
        right: -180px;
        zoom: 0;
        filter: blur(5px);
    }
    100% {
        opacity: 1;
        right: 0px;
        zoom: 1;
        filter: blur(0px);
    }
}

@-webkit-keyframes slide_right {
    0% {
        opacity: 0.2;
        right: -180px;
        zoom: 0;
        filter: blur(5px);
    }
    100% {
        opacity: 1;
        right: 0px;
        zoom: 1;
        filter: blur(0px);
    }
}

@keyframes slide_right {
    0% {
        opacity: 0.2;
        right: -180px;
        zoom: 0;
        filter: blur(5px);
    }
    100% {
        opacity: 1;
        right: 0px;
        zoom: 1;
        filter: blur(0px);
    }
}

.slide_left {
    -webkit-animation-name: slide_left;
    -webkit-animation-duration: 0.2s;
    -webkit-animation-iteration-count: 1;
    -moz-animation-name: slide_left;
    -moz-animation-duration: 0.2s;
    -moz-animation-iteration-count: 1;
    animation-name: slide_left;
    animation-duration: 0.2s;
    animation-iteration-count: 1;
}

@-moz-keyframes slide_left {
    0% {
        opacity: 0.2;
        left: -180px;
        zoom: 0;
        filter: blur(5px);
    }
    100% {
        opacity: 1;
        left: 0px;
        zoom: 1;
        filter: blur(0px);
    }
}

@-webkit-keyframes slide_left {
    0% {
        opacity: 0.2;
        left: -180px;
        zoom: 0;
        filter: blur(5px);
    }
    100% {
        opacity: 1;
        left: 0px;
        zoom: 1;
        filter: blur(0px);
    }
}

@keyframes slide_left {
    0% {
        opacity: 0.2;
        left: -180px;
        zoom: 0;
        filter: blur(5px);
    }
    100% {
        opacity: 1;
        left: 0px;
        zoom: 1;
        filter: blur(0px);
    }
}

slider .slideshow-container {
    width: 100vW;
    height: 60vW;
    position: relative;
    margin: auto;
}

slider .mySlides {
    margin: auto;
    position: relative;
    display: none;
    width: 100%;
    height: 100%;
    z-index: 0;
}

slider .dot {
    border-radius: 3px;
    position: relative;
    display: inline-block;
    margin: auto;
    width: 28px;
    height: 4px;
    background: rgb(198 198 198 / 45%);
    cursor: pointer;
    border: 1px solid white;
    box-shadow: 0px 0px 0px #efefef;
    -moz-transition: all 1s ease;
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
}

slider .dot.active {
    width: 30px;
    height: 5px;
    background: rgba(217, 93, 17, 0.75);
    box-shadow: -1px -1px 1px #efefef;
    -moz-transition: all 1.5s ease;
    -webkit-transition: all 1.5s ease;
    transition: all 1.5s ease;
}

.fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
}

slider lable {
    position: relative;
    margin: auto;
    display: none;
    visibility: hidden;
    clear: both;
    background: #3a3a3c;
    width: 100%;
    height: 100%;
    z-index: 1;
    text-align: center;
    justify-content: center;
    overflow: hidden;
}

slider lable.active {
    display: block;
    visibility: visible;
    -moz-transition: all 1s ease;
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
}

slider lable img {
    position: relative;
    margin: auto;
    display: block;
    clear: both;
    width: 100%;
    height: 100%;
}


h1.titr {
    position: relative;
    margin: 30px auto;
    display: block;
    text-align: center;
    font-size: 21px;
}

gride {
    max-width: 85%;
}

.ingrid {
    position: relative;
    display: block;
    margin: 5%;
    width: 90%;
    height: 90%;
    clear: both;
    overflow: hidden;
    border-radius: 15px;
    border: 0 solid #e5e7eb;
    background: #fff;
    box-shadow: 0px 0px 1px #1818188f;
}

.ingrid .picbox {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    margin: auto;
    border-radius: 15px;
    z-index: 1;
    border: 0.5px solid #e8e8e8;
    overflow: hidden;
}

.ingrid .picbox img.base {
    position: relative;
    display: block;
    width: 95%;
    border-radius: 15px;
    margin: 2.5%;
    z-index: 0;
    cursor: pointer;
    background: #fff;
}

.ingrid .picbox:hover * {
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.ingrid .picbox .list_pic {
    position: absolute;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.3), transparent);
    display: grid;
    opacity: 0;
    grid-template-columns: 25% 25% 25% 25%;
    bottom: -100px;
    width: 100%;
    height: 25%;
    overflow: hidden;
    direction: rtl;
    z-index: 5;
    padding-top: 5px;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.ingrid .picbox:hover .list_pic {
    opacity: 1;
    bottom: 0px;
}

.ingrid .picbox .list_pic img {
    position: relative;
    margin: 10px;
    width: calc(100% - 20px);
    border-radius: 10px;
    height: calc(100% - 20px);
    display: block;
    cursor: pointer;
}

.ingrid .picbox .list_pic span {
    position: relative;
    padding: 15px;
    border-radius: 10px;
    display: block;
    text-align: center;
    background: #f6f6f6;
    cursor: pointer;
}

.ingrid .picbox basket, .cover basket {
    position: absolute;
    width: 30px;
    height: 30px;
    font-size: 30px;
    display: none;
    opacity: 0;
    background: var(--base-color);
    color: #f8f8f8;
    z-index: 5;
    border-radius: 9px;
    text-align: center;
    padding: 5px;
    top: 15px;
    right: 15px;
    cursor: pointer;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.ingrid .picbox:hover basket, .cover:hover basket {
    opacity: 1;
    display: block;
}

.ingrid .picbox basket:hover, .cover basket:hover {
    background: var(--color-accent);
}

.ingrid .picbox basket i, .ingrid .picbox love i, .cover basket i {
    width: 13px;
    height: 13px;
    font-size: 13px;
    color: #f6f6f6;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    cursor: pointer;
}

.ingrid .picbox love {
    position: absolute;
    width: 30px;
    height: 30px;
    display: none;
    opacity: 0;
    font-size: 30px;
    background: var(--red-color);
    color: #f8f8f8;
    z-index: 5;
    border-radius: 9px;
    text-align: center;
    padding: 5px;
    top: 60px;
    right: 15px;
    cursor: pointer;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.ingrid .picbox:hover love {
    opacity: 1;
    display: block;
}

.ingrid .picbox love:hover {
    background: #ED2424FF;
}

.ingrid .picbox off {
    position: absolute;
    width: 60px;
    height: 30px;
    display: block;
    font-size: 16px;
    background: var(--base-color);
    color: #f8f8f8;
    z-index: 5;
    border-radius: 0px 12px 12px 0px;
    text-align: center;
    padding: 10px 10px 5px 10px;
    top: 20px;
    left: -2px;
    cursor: pointer;
    direction: rtl;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.ingrid h1, .nx-card h1 {
    position: relative;
    display: block;
    margin: 10px;
    clear: both;
    font-family: 'iran' !important;
    font-size: 14px !important;
    font-weight: 800;
}

.ingrid h2, .nx-card h2 {
    position: relative;
    display: block;
    margin: 10px;
    clear: both;
    font-family: 'iran';
    font-size: 13px;
    font-weight: 500;
    direction: rtl;
}

h2.ty1 {
    color: var(--red-color);
}

h2.ty2 {
    color: #959595;
    text-decoration: line-through;
}

gride.redded {
    background: #d22c4e;
    border-radius: 15px;
    margin: 50px auto;
}

gride.redded .ingrid {
    background: #f8f8f8;
}

.ingrid.texty {
    background: transparent !important;
}

.ingrid.texty p {
    position: absolute;
    margin: auto;
    display: block;
    text-align: center;
    font-size: max(23px, min(3vW, 4vH));
    font-family: 'iran_b';
    color: #f6f6f6;
    width: 100%;
    height: 20%;
    right: 0;
    left: 0;
    top: 0%;
    bottom: 0%;
}

.about_box {
    position: relative;
    margin: 10px auto;
    padding: 2% 5%;
    text-align: justify;
    direction: rtl;
    font-size: 15px;
    background: #fff;
    display: block;
    clear: both;
    line-height: 30px;
    color: #6c6c6c;
    font-family: 'iran';
}

span.btn-in {
    position: relative;
    margin: auto;
    display: inline-block;
    padding: 10px 15px;
    cursor: pointer;
    background: var(--color-accent-500);
    color: #f8f8f8;
    border-radius: 7px;
    font-size: 14px;
}

span.btn-in:hover {
    background: var(--color-accent-200);
    color: #f4f4f4;
}

.right_tolbar {
    position: fixed;
    display: block;
    clear: both;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #87878775;
    width: 100vW;
    height: 100vH;
    opacity: 0;
    z-index: 1000;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.right_tolbar object.box_show_link {
    position: absolute;
    margin: auto;
    display: block;
    overflow: hidden;
    width: 0%;
    max-width: 457px;
    background: #fff;
    height: 100%;
    right: 0px;
    opacity: 0.5;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.right_tolbar object.box_show_link .close.icon.fui-cross {
    position: absolute;
    top: 10px;
    right: 10px;
    margin: auto;
    border-bottom: unset;
    box-shadow: unset;
    color: transparent;
    font-size: 0px;
    width: 40px;
    height: 40px;
    font-weight: 900;
    overflow: hidden;
    text-align: center;
    display: block;
    z-index: 2;
    border-radius: 50%;
}

.right_tolbar object.box_show_link .close.icon.fui-cross:before {
    color: #181818;
    position: absolute;
    width: 20px;
    height: 20px;
    margin: auto;
    top: 0;
    bottom: 0;
    font-weight: 100;
    font-size: 20px;
    cursor: pointer;
    left: 0;
    right: 0;
}

.right_tolbar object.box_show_link .show_responsive {
    position: absolute;
    margin: auto;
    display: block;
    clear: both;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

.basket_box {
    position: relative;
    display: block;
    margin: auto;
    clear: both;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.basket_box .header_box {
    position: relative;
    margin: auto;
    display: block;
    width: 96%;
    height: 60px;
    overflow: hidden;
    border-bottom: 1px solid #68686885;
}

.basket_box .header_box h1 {
    position: relative;
    margin: auto;
    display: block;
    padding: 20px;
    text-align: center;
    font-size: 20px;
    font-family: 'iran_b';
    color: var(--color-primary-700);
}

.basket_box .header_box span {
    position: absolute;
    margin: auto;
    width: 20px;
    height: 20px;
    padding: 5px;
    border-radius: 50%;
    background-color: var(--color-primary, #4C4C4C);
    color: #fff;
    top: 0;
    bottom: 0;
    font-family: 'iran';
    text-align: center;
    font-size: 13px;
    left: 20px;
}

.basket_box .header_box span i {
    width: 20px;
    height: 20px;
    font-size: 20px;
    color: #f8f8f8;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    cursor: pointer;
}

.basket_box .listb_box {
    position: relative;
    margin: auto;
    display: block;
    width: 96%;
    height: calc(100% - 200px);
    overflow: hidden;
    border-bottom: 1px solid #68686885;
    overflow-y: auto;
    direction: rtl;
}

.basket_box .listb_box p {
    position: absolute;
    margin: auto;
    display: block;
    width: 95%;
    padding: 10px;
    text-align: center;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    font-size: 14px;
    height: 15px;
}

.basket_box .jame_box {
    position: relative;
    margin: auto;
    display: grid;
    grid-template-columns: auto auto;
    width: 98%;
    height: 60px;
    overflow: hidden;
    border-bottom: 1px solid #68686885;
    direction: rtl;
}

.basket_box .jame_box span {
    position: relative;
    margin: auto;
    display: block;
    padding: 10px;
    text-align: right;
    width: 85%;
    height: auto;
    font-family: 'iran';
    font-size: 14px;
    font-weight: 700;
}

.basket_box .jame_box span:nth-of-type(2) {
    text-align: left;
}

.takmil_box {
    position: relative;
    margin: auto;
    display: block;
    width: 96%;
    height: 80px;
    overflow: hidden;
}

.btn-basket {
    background: var(--color-accent, #4C4C4C);
    color: #fff;
    -webkit-transition: background 0.3s;
    -moz-transition: background 0.3s;
    -ms-transition: background 0.3s;
    -o-transition: background 0.3s;
    transition: background 0.3s;
    position: relative;
    padding: 10px 15px;
    display: block;
    max-width: 85%;
    border-radius: 12px;
    margin: 10px auto;
    cursor: pointer;
    text-align: center;
    font-size: 15px;
    font-weight: 800;
}

.takmil_box span.btn-basket:hover {
    background: var(--color-accent-400, #5a5a5a);
    color: #fff;
}

.disable {
    background: #e8e8e8 !important;
    color: #B9B9B9 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    -webkit-transition: background 0.3s;
    -moz-transition: background 0.3s;
    -ms-transition: background 0.3s;
    -o-transition: background 0.3s;
    transition: background 0.3s;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none !important;
}

.tower_box {
    position: relative;
    display: grid;
    width: 90%;
    grid-template-columns: 20% 80%;
    direction: rtl;
    height: 100%;
    margin: auto;
}

.tower_box .listen_cats {
    position: relative;
    margin: auto;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    overflow-y: auto;
    opacity: 1;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.tower_box .infor_ajax {
    position: relative;
    margin: auto;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    overflow-y: auto;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}


line-bar {
    position: relative;
    margin: 10px auto;
    display: block;
    padding: 10px 15px;
    direction: rtl;
    font-size: 14px;
    font-family: 'iran';
    color: #686868;
    width: 95%;
    max-width: 1280px;
}

line-bar a {
    position: relative;
    display: inline-block;
    padding: 5px 10px;
    cursor: pointer;
}


.box-controller .fil_tix .switch-box {
    display: flex;
    overflow: hidden;
    cursor: pointer;
    font-family: Vazirmatn, sans-serif;
    direction: rtl;
    position: relative;
    background-color: white;
    color: rgb(51, 51, 51);
    font-weight: bold;
    padding: 0px 0px;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(229, 229, 229);
    border-image: initial;
    border-radius: 30px;
    margin: 10px auto;
}

.box-controller .fil_tix .switch-box .option {
    flex: 1;
    text-align: center;
    padding: 8px 0;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    font-weight: bold;
}

.box-controller .fil_tix .switch-box .option.active {
    background-color: #4caf50;
    color: white;
    border-radius: 50px;
}

.box-controller .fil_tix .switch-box .option:not(.active) {
    background-color: white;
    color: #686868;
}

.status-label {
    margin-top: 15px;
    font-weight: bold;
    font-size: 16px;
    color: #333;
}

.custom-select {
    width: auto;
    position: relative;
    font-family: Vazirmatn, sans-serif;
    direction: rtl;
    user-select: none;
    margin: 10px auto;
}

.custom-select .selected {
    position: relative;
    padding: 8px 15px;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    background-color: white;
    color: #333;
    font-weight: bold;
    cursor: pointer;
    display: block;
}


.custom-select .selected i {
    width: 20px;
    height: 20px;
    font-size: 20px;
    top: 0;
    bottom: 0;
    left: 20px;
    color: #686868;
}

.custom-select .options {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    border: 1px solid #686868;
    border-top: none;
    background-color: white;
    z-index: 10;
    color: #686868;
    display: none;
    border-radius: 0 0 6px 6px;
    overflow: hidden;
    max-height: 200px;
    overflow-y: auto;
}

.option {
    padding: 10px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.custom-select .options .option:hover {
    background-color: #f0f0f0;
}

.custom-select .options .option.active {
    background-color: #4caf50;
    color: white;
}

.box-controller {
    font-size: 14px;
    background: #fafafa;
    position: relative;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    -ms-border-radius: 16px;
    -o-border-radius: 16px;
    border-radius: 16px;
    margin-bottom: 30px;
    display: flex;
    border: 1px solid #e5e5e5;
    width: 95%;
    max-width: 1280px;
    direction: rtl;
}

.box-controller .fil_tix {
    position: relative;
    margin: auto;
    padding: 15px;
    width: 90%;
    height: 90%;
    direction: rtl;
}

.ajaxer_cat_box {
    position: relative;
    margin: 10px auto;
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
    clear: both;
    max-width: 1280px;
    min-height: 150px;
}


.btn-sub {
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield;
    position: relative;
    margin: 50px auto;
    padding: 10px 15px;
    font-size: 16px;
    font-family: 'sans_b';
    color: #ffffff;
    width: calc(100% - 120px - 5%);
    height: auto;
    border: unset;
    border-radius: 6px;
    background: var(--base-color);
    display: block;
    text-align: center;
    cursor: pointer;
    box-shadow: 0px 0px 0px transparent, inset 0px 0px 0px transparent;
    -webkit-transition: all 1.5s ease;
    -moz-transition: all 1.5s ease;
    -o-transition: all 1.5s ease;
    transition: all 1.5s ease;
}

.btn-sub.baraks {
    width: calc(100% - 160px - 5%);
    padding: 10px 40px;
    color: var(--base-color);
    border: 1px solid var(--base-color);
    background: rgba(255, 255, 255, 1);
}

#inphone {
    display: none;
    opacity: 0;
}


.page_numshow {
    grid-column: 1 / -1;
    font-size: 14px;
    background: #fafafa;
    position: relative;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    -ms-border-radius: 16px;
    -o-border-radius: 16px;
    border-radius: 16px;
    margin-bottom: 30px;
    display: grid;
    grid-template-columns: 30% 40% 30%;
    border: 1px solid #e5e5e5;
    width: 95%;
    max-width: 1280px;
    direction: ltr;
    justify-content: center;
    text-align: center;
}

.page_numshow .btn-nextpage, .page_numshow .btn-lastpage {
    position: relative;
    margin: 10px;
    text-align: center;
    padding: 10px 15px;
    width: auto;
    background: #019724;
    color: #f8f8f8;
    font-family: 'iran_b';
    font-size: 18px;
    border-radius: 10px;
    cursor: pointer;
}

.page_numshow .btn-nextpage.disable, .page_numshow .btn-lastpage.disable {
    background: #606060;
    color: #1e1e1e;
}

.page_numshow .this-page {
    position: relative;
    margin: 10px auto;
    display: block;
    max-width: 150px;
    width: 90%;
    direction: rtl;
    font-size: 18px;
}

.page_numshow .this-page a {
    position: relative;
    margin: auto 5px;
    font-size: 18px;
    font-family: 'iran';
    text-align: center;
}

.page_numshow .this-page b {
    position: relative;
    margin: auto 5px;
    font-size: 18px;
    font-family: 'iran_b';
    text-align: center;
}

.m_head_top {
    display: none;
    width: 0px;
    height: 0px;
    opacity: 0;
    overflow: hidden;
}

.m_head_top img.head_img {
    display: none;
    width: 0px;
    height: 0px;
    opacity: 0;
    overflow: hidden;
}


div.list_cats {
    width: 100%;
    max-width: min(90%, 700px);
    margin: 25px auto;
    border: 1px solid #9f9f9f;
    border-radius: 8px;
    overflow: hidden;
    font-family: "IRANSans", sans-serif;
    position: relative;
    background: #f8f8f8;
}

div.list_cats div.cat {
    border-bottom: 1px solid #939393;
    cursor: pointer;
    transition: background 0.3s ease;
    padding: 20px 15px;
    position: relative;
    margin: auto;
    display: block;
}

div.list_cats div.cat:last-child {
    border-bottom: none;
}

div.list_cats div.cat h1 {
    font-size: clamp(16px, 2vw, 20px);
    color: #333;
    font-weight: 600;
    position: relative;
    display: block;
    margin: auto;
    cursor: pointer;
}

div.list_cats div.cat:hover {
    /*background: var(--base-color);*/
}

div.list_cats div.cat div.listen {
    height: 0;
    opacity: 0;
    padding: 15px;
    background: #7b7b7b;
    border-top: 1px dashed #7b7b7b;
    position: relative;
    margin: 15px auto;
    display: none;
    width: calc(100% - 30px);
    border-radius: 5px;
    -webkit-animation-name: start;
    -webkit-animation-duration: 0.3s;
    -webkit-animation-iteration-count: 1;
    -moz-animation-name: start;
    -moz-animation-duration: 0.3s;
    -moz-animation-iteration-count: 1;
    animation-name: start;
    animation-duration: 0.3s;
    animation-iteration-count: 1;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

div.list_cats div.cat div.listen h2 {
    font-size: clamp(190%, 1.9vw, 19px);
    color: #181818;
    position: relative;
    display: block;
    margin: 10px auto;
    cursor: pointer;
    padding: 15px 3px;
    border-radius: 15px;
    background: #f8f8f8;
    text-align: center;
}

div.list_cats div.cat.active div.listen {
    display: block;
    opacity: 1;
    height: auto;
    -webkit-animation-name: start;
    -webkit-animation-duration: 0.3s;
    -webkit-animation-iteration-count: 1;
    -moz-animation-name: start;
    -moz-animation-duration: 0.3s;
    -moz-animation-iteration-count: 1;
    animation-name: start;
    animation-duration: 0.3s;
    animation-iteration-count: 1;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.port_grid {
    position: relative;
    margin: 10px auto;
    width: 1280px;
    max-width: 95%;
    display: grid;
    grid-template-columns: 40% 30% 30%;
    justify-content: center;
    direction: rtl;
}


.port_grid .right_line, .port_grid .center_line, .port_grid .left_line {
    position: sticky;
    margin: auto;
    display: block;
    align-items: flex-start;
    width: 100%;
    height: 100%;
    overflow: hidden;
    overflow-y: auto;
}

.port_grid .center_line {
    position: relative;
    margin: auto;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    overflow-y: auto;
}

.left_line .price_bar {
    position: sticky;
    display: block;
    flex: 1;
    margin: 10px;
    margin-bottom: 15px;
    border: 1px solid #e8e8e8;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    -ms-border-radius: 16px;
    -o-border-radius: 16px;
    border-radius: 16px;
    padding: 15px;
    background: #fff;
}

.left_line .price_bar h2 {
    position: relative;
    display: block;
    margin: 10px;
    clear: both;
    font-family: 'iran';
    font-size: 13px;
    font-weight: 500;
    direction: rtl;
}

h2.ty1 {
    color: var(--red-color);
}

h2.ty2 {
    color: #959595;
    text-decoration: line-through;
}

.slider-container {
    /*max-width: 400px;*/
    width: 95%;
    position: sticky;
    flex: 1;
    padding: 10px;
    overflow: hidden;
    margin: 0px auto;
    display: block;
}

.main-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 12px;
    transition: transform var(--transition-speed);
    cursor: zoom-in;
    margin: 0px auto;
    position: relative;
    display: block;
}

.nav-buttons {
    position: absolute;
    top: 35%;
    height: 50px;
    margin: auto;
    width: 100%;
    display: block;
    justify-content: space-between;
    right: 0;
    left: 0;
}

.nav-buttons button {
    position: absolute;
    background: #f8f8f8;
    border: none;
    color: #181818;
    width: 24px;
    height: 24px;
    font-size: 24px;
    padding: 10px;
    cursor: pointer;
    border-radius: 50%;
    border: 1px solid #b5b5b5;
    transition: background var(--transition-speed);
}

.nav-buttons button:hover {
    background: rgba(0, 0, 0, 0.6);
    color: #c8c8c8;
}

.nav-buttons button#prevBtn {
    right: 20px;
    top: 0;
    bottom: 0;
}

.nav-buttons button#nextBtn {
    left: 20px;
    top: 0;
    bottom: 0;
}

.thumbnail-row {
    display: flex;
    overflow-x: auto;
    gap: var(--gap);
    margin-top: 15px;
    padding: 5px 25px 5px 25px;
}

.thumbnail-row::-webkit-scrollbar {
    display: none;
}

.thumbnail {
    flex: 0 0 auto;
    width: var(--thumb-size);
    height: var(--thumb-size);
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity var(--transition-speed), transform var(--transition-speed);
}

.thumbnail.active {
    opacity: 1;
    transform: scale(1);
    border: 2px solid #e8e8e8;
}

.port_grid .center_line h1 {
    position: relative;
    display: block;
    margin: auto;
    padding: 10px;
    font-size: 20px;
    font-family: 'iran_b';
}

.port_grid .center_line .list_size, .port_grid .center_line .list_color {
    position: relative;
    margin: auto;
    display: block;
}

.port_grid .center_line .list_size li {
    position: relative;
    margin: 10px 3px;
    padding: 7px;
    display: inline-block;
    border: 1px solid var(--color-accent-300);
    background: #ffffff;
    border-radius: 8px;
    cursor: pointer;
    font-size: 12px;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.port_grid .center_line .list_color li {
    position: relative;
    margin: 10px 3px;
    padding: 7px;
    display: inline-block;
    border: 1px solid #686868;
    background: transparent;
    width: 12px;
    height: 12px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 12px;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.port_grid .center_line .list_size li.this {
    font-weight: 800;
    border: 1px solid #676767;
}

.port_grid .center_line .list_color li.this {
    border: 1px solid #676767;
}

.port_grid .center_line .list_color li:hover {
    border: 1px solid var(--color-accent-900);
}

.port_grid .center_line .list_size li:hover {
    font-weight: bolder;
    border: 1px solid var(--color-accent-900);
}

.port_grid .center_line h2 {
    position: relative;
    margin: auto;
    display: block;
    clear: both;
    padding: 5px;
    font-size: 14px;
    font-family: 'iran';
    color: #686868;
}

.port_grid .center_line .document_t {
    position: relative;
    margin: 5px auto;
    text-align: justify;
    font-size: 14px;
    font-family: 'iran';
    color: #181818;
    padding: 5px;
    line-height: 25px;
}

.foot_mob {
    display: none;
}

.foot_mob h2 {
    position: absolute;
    display: block;
    margin: auto;
    clear: both;
    font-family: 'iran';
    font-size: 13px;
    font-weight: 500;
    direction: rtl;
    width: 45%;
    text-align: left;
    padding: 10px;
    top: 10px;
}

.foot_mob h2.ty2 {
    top: 30px;
}

gride.redded .ingrid.texty i {
    width: 90px;
    height: 90px;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

.about {
    position: relative;
    margin: 1% auto;
    padding: 4%;
    display: block;
    border-radius: 12px;
    color: #686868;
    max-width: 600px;
    border: 2px solid #686868;
}

.about h1 {
    position: relative;
    display: block;
    margin: 5px auto;
    font-size: 20px;
    font-family: 'stedad_b';
    font-weight: 900;
}

.about h3 {
    position: relative;
    display: block;
    margin: 10px auto;
    font-size: 17px;
    font-family: 'stedad';
    font-weight: 300;
    text-align: justify;
    direction: rtl;
}

.about h2 {
    position: relative;
    display: block;
    margin: 20px 1%;
    font-size: 12px;
    font-family: 'stedad';
    font-weight: 600;
    direction: rtl;
    text-align: right;
    padding: 5px 40px 5px 5px;
}

.about h2 i {
    position: absolute;
    margin: auto;
    width: 30px;
    height: 30px;
    font-size: 30px;
    top: 0;
    bottom: 0;
    right: 0;
}

span.lin_text {
    display: block;
    margin: 2% auto !important;
    clear: both;
    width: calc(90% - 60px);
    max-width: min(1200px, 95vW);
    direction: rtl;
    padding: 10px 55px 10px 5px !important;
    /*padding: 10px 5px 10px 5px;*/
    font-size: 14px;
    font-family: 'stedad_b';
    color: #333333;
    position: relative;
    font-weight: 600;
    text-align: right;
}

span.lin_text i {
    font-size: 30px !important;
    width: 30px !important;
    height: 30px !important;
    right: 10px !important;
    left: unset !important;
    top: 0 !important;
    bottom: 0 !important;
    color: #333333 !important;
    /*display: none !important;*/
}

/*span.lin_text i svg, span.lin_text i svg * {*/
/*    fill: #2392f1 !important;*/
/*    stroke: #2392f1 !important;*/
/*}*/


span.lin_text i svg, span.lin_text i img, span.lin_text i image {
    transform: rotateY(180deg);
}


span.lin_text b.asee {
    position: absolute;
    font-size: max(10px, min(2.9vW, 1.6vH));
    color: var(--base-color) !important;
    margin: auto;
    height: 18px;
    top: 0;
    bottom: 0;
    left: -2.5%;
    cursor: pointer;
    font-weight: 300;
    background: transparent !important;
    font-family: 'stedad' !important;
    padding: 13px 15px 10px 15px;
}

span.lin_text b.asee i {
    top: 5px;
    width: max(13px, min(3.9vW, 1.9vH));
    height: max(13px, min(3.9vW, 1.9vH));
    font-size: max(13px, min(3.9vW, 1.9vH));
    right: 100%;
    bottom: 0;
    left: unset;
    color: var(--base-color);
    cursor: pointer;
}


img.logo_log {
    position: relative;
    margin: 0px auto;
    max-width: 70%;
    max-height: 25%;
    display: block;
    clear: both;
    -webkit-user-drag: none;
}

input {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
    outline: unset !important;
}

input[type="text"], input[type="search"], textarea {
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -o-user-select: text;
    user-select: text;
}

form, .form {
    position: relative;
    margin: 5px auto;
    z-index: 0;
    display: block;
    max-width: 420px;
}

form label, .form label {
    position: relative;
    display: block;
    margin: 8px auto;
    padding: 0px;
    direction: rtl;
}

form label input[type="text"], form label input[type="file"], form label input[type="search"], form label input[type="tel"], form label input[type="email"], form label input[type="password"], .form label input[type="text"], .form label input[type="file"], .form label input[type="search"], .form label input[type="tel"], .form label input[type="email"], .form label input[type="password"], .form label textarea, form label textarea {
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield;
    position: relative;
    display: block;
    margin: auto;
    padding: 10px 35px 10px 10px;
    font-size: 12px;
    font-family: 'sans';
    text-align: right;
    color: #333333;
    width: calc(100% - 45px - 5%);
    height: auto;
    border-radius: 6px;
    border: 1px solid #9a9a9a3b;
    background: #f5f5f5;
}


.form label textarea, form label textarea {
    resize: vertical;
    max-height: 400px;
    min-height: 100px;
}

.form label textarea::placeholder, form label textarea::placeholder, form label input::placeholder, .form label input::placeholder {
    color: #9A9A9A;
}

pre.inlog {
    position: relative;
    display: block;
    margin: 5px auto;
    font-size: 11px;
    font-family: 'sans_b';
    text-align: right;
    color: #747474;
    width: calc(100% - 120px - 2%);
    direction: rtl;
}

pre.inlog b {
    color: var(--base-color);
    cursor: pointer;
    font-size: 12px;
    direction: rtl;
}

form label i, .form label i {
    font-size: 20px;
    top: 0;
    bottom: 0;
    width: 20px;
    height: 20px;
    right: calc(0% + 15px);
    color: #383838;
    text-shadow: 0px 0px 1px #383838;
}

form label i.sender, .form label i.sender {
    left: 3%;
    right: unset;
    width: 35px;
    height: 35px;
    transform: rotate(-90deg);
    cursor: pointer;
}

form label i img, .form label i img {
    position: absolute;
    max-width: 100%;
    max-height: 100%;
    display: block;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
}

form label input[type="submit"], .form label input[type="submit"] {
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield;
    position: relative;
    margin: 30px auto;
    padding: 10px 15px;
    font-size: 16px;
    font-family: 'sans_b';
    color: #ffffff;
    width: calc(100% - 50px - 5%);
    height: auto;
    border: unset;
    border-radius: 6px;
    background: var(--base-color);
    display: block;
    text-align: center;
    cursor: pointer;
    box-shadow: 0px 0px 0px transparent, inset 0px 0px 0px transparent;
    -webkit-transition: all 1.5s ease;
    -moz-transition: all 1.5s ease;
    -o-transition: all 1.5s ease;
    transition: all 1.5s ease;
}

form label select, .form label select {
    cursor: pointer;
    display: block;
    margin: 7px auto 7px auto;
    border-radius: 6px;
    border: 1px solid #9a9a9a3b;
    background: #f5f5f5;
    direction: ltr;
    padding: 10px 35px 10px 10px;
    font-size: 12px;
    font-family: 'sans';
    text-align: right;
    color: #333333;
    width: calc(100% - 45px - 5%);
}

form label select option, .form label select option {
    border: none;
    padding: 10px 15px 10px 15px;
    font-family: 'stedad';
    font-size: 12px;
    cursor: pointer;
    direction: rtl;
}

form label select optgroup, .form label select optgroup {
    padding: 10px;
    position: relative;
    font-family: 'stedad';
    padding: 10px 15px 10px 15px;
    cursor: none;
    direction: rtl;
}

form svg.icon path, .form svg.icon path {
    fill: #f8f8f8;
    stroke: #d8d8d8;
}

input:-internal-autofill-selected {
    background-color: unset !important;
    background: none !important;
    color: rgb(133, 133, 133) !important;
}

input[type="file"]::before {
    content: attr(placeholder);
    display: inline-block;
    background: -webkit-linear-gradient(top, var(--base-color), var(--hover-color));
    background: linear-gradient(top, var(--base-color), var(--hover-color));
    background: -moz-linear-gradient(top, var(--base-color), var(--hover-color));
    border: 1px solid #999;
    border-radius: 3px;
    padding: 5px 8px;
    outline: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    -webkit-user-select: none;
    cursor: pointer;
    text-shadow: 1px 1px #fff;
    font-weight: 700;
    font-size: 10pt;
    direction: rtl;
}

input[type="file"]::-webkit-file-upload-button {
    visibility: hidden;
    display: none;
}

input[type="file"]:active::before {
    background-color: #f9f9f9;
    background: linear-gradient(to bottom, #f9f9f9 0%, #e3e3e3 100%);
}

input[type="checkbox"], input[type="radio"] {
    position: absolute;
    overflow: hidden;
    clip: rect(0 0 0 0);
    height: 0.01px;
    width: 0.01px;
    margin: auto;
    padding: 0;
}

input[type="radio"] + span {
    box-shadow: 3px 3px 3px #00000091;
    position: relative;
    display: inline-block;
    text-indent: 0px;
    background: #e7e5e566;
    border: 1px solid #0b0b0b;
    width: 24px;
    height: 24px;
    border-radius: 3px;
    cursor: pointer;
    top: 7px;
    margin: 0px 5px;
    -webkit-transition: all 0.3s cubic-bezier(1, 0.1, 0, 0.9);
    transition: all 0.3s cubic-bezier(1, 0.1, 0, 0.9);
}

input[type="radio"] + span i {
    display: none !important;
    position: absolute;
    color: var(--gold-color) !important;
    font-size: 0% !important;
    text-align: center;
    z-index: 10;
    top: -20px !important;
    bottom: 0 !important;
    height: 105% !important;
    width: 105% !important;
    right: -15px;
    left: 0 !important;
    margin: 10px auto;
    -webkit-transition: all 0.3s cubic-bezier(1, 0.1, 0, 0.9);
    transition: all 0.3s cubic-bezier(1, 0.1, 0, 0.9);
}

input[type="radio"]:checked + span i {
    display: block !important;
    font-size: 220% !important;
}

input[type="checkbox"] + span {
    position: relative;
    display: inline-block;
    overflow: hidden;
    text-indent: -9999px;
    background: #ccc;
    width: 60px;
    height: 20px;
    border-radius: 100px;
    margin: 0px 10px;
    top: 0px;
    cursor: pointer;
    -webkit-transition: all 0.3s cubic-bezier(1, 0.1, 0, 0.9);
    transition: all 0.3s cubic-bezier(1, 0.1, 0, 0.9);
}

input[type="checkbox"] + span:before {
    content: '';
    position: absolute;
    display: block;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: var(--pop-color);
    color: #f8f8f8;
    border-radius: 100px;
    -webkit-transition: all 0.3s cubic-bezier(1, 0.1, 0, 0.9) 0.1s;
    transition: all 0.3s cubic-bezier(1, 0.1, 0, 0.9) 0.1s;
    -webkit-transform: translateZ(0) scale(0);
    transform: translateZ(0) scale(0);
}

input[type="checkbox"] + span:after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    display: block;
    height: 26px;
    width: 26px;
    background: white;
    border-radius: 100%;
    -webkit-box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
    -webkit-transition: all 0.3s cubic-bezier(1, 0.1, 0, 0.9);
    transition: all 0.3s cubic-bezier(1, 0.1, 0, 0.9);
    -webkit-transform: translateZ(0) translateX(0);
    transform: translateZ(0) translateX(0);
}

input[type="checkbox"]:checked + span, span[checked="checked"], span:checked {
    background: #1f5823;
}

input[type="checkbox"]:checked + span:after, span[checked="checked"]:after, span:checked:after {
    left: calc(100% - 28px);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation-name: start;
    -webkit-animation-duration: 0.3s;
    -webkit-animation-iteration-count: 1;
    -moz-animation-name: start;
    -moz-animation-duration: 0.3s;
    -moz-animation-iteration-count: 1;
    animation-name: start;
    animation-duration: 0.3s;
    animation-iteration-count: 1;
}

input[type="file"] {
    direction: rtl;
    text-align: right;
}

textarea {
    direction: rtl;
}

form label div, .form label div {
    direction: rtl;
    margin: 10px 15px;
    display: block;
    font-family: 'iran';
    padding: 5px;
    font-size: 16px;
    color: #f8f8f8;
    text-align: right;
}

form label div span, .form label div span {
    top: 10px !important;
}


form label span, .form label span {
    position: absolute;
    margin: auto;
    display: block;
    font-family: 'stedad';
    font-size: 12px;
    z-index: 10;
    padding: 5px 7px;
    border-radius: 5px;
    top: -30px;
    right: 5%;
    width: 100%;
    max-width: 80%;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

form label span.rol::after, .form label span.rol::after {
    content: '*';
    display: inline-block;
    position: relative;
    color: red;
    width: 14px;
    height: 14px;
    font-size: 14px;
    top: 4px;
    margin: auto 5px;
}

input.roler, textarea.roler {
    border: unset !important;
    background: rgba(245, 245, 245, 1) !important;
    padding: 13px 13px 10px 10px !important;
}

input.roler svg, textarea.roler svg, input.roler i, textarea.roler i {
    display: none !important;
}

form label h1, .form label h1 {
    position: relative;
    display: block;
    margin: 1% auto !important;
    clear: both;
    font-size: 15px;
    font-family: 'stedad_b';
    padding: 15px 5px;
    color: #333333;
    font-weight: 700;
}

form label h2, .form label h2 {
    position: relative;
    display: block;
    margin: 1% auto !important;
    clear: both;
    font-size: 11px;
    font-family: 'stedad';
    padding: 5px 5px;
    color: #333333b3;
}

form label h3, .form label h3 {
    position: relative;
    display: block;
    margin: 1% auto !important;
    clear: both;
    font-size: 13px;
    font-family: 'stedad';
    padding: 10px 5px;
    color: #333333c3;
}


form label .container {
    display: flex;
    gap: 10px;
    direction: ltr;
    margin: auto;
    width: 90%;
}

/*.container input {*/
/*    text-align: center !important;*/
/*    font-size: 20px !important;*/
/*    -webkit-appearance: textfield !important;*/
/*    -moz-appearance: textfield !important;*/
/*    appearance: textfield !important;*/
/*    position: relative !important;*/
/*    display: block !important;*/
/*    margin: auto !important;*/
/*    padding: 10px 10px 10px 10px !important;*/
/*    font-family: 'per_add' !important;*/
/*    color: #383838 !important;*/
/*    width: calc(100% - 100px - 15%) !important;*/
/*    border-radius: 6px !important;*/
/*    border: 1px solid #9A9A9A !important;*/
/*    background: #ededed !important;*/
/*}*/


form label h2 a, .form label h2 a {
    position: relative;
    margin: auto 5px;
    display: inline-block;
    font-family: 'stedad_b';
    font-weight: 800;
    cursor: pointer;
    text-decoration: none;
    color: #333333;
}

.loginbox {
    position: relative;
    margin: 10px auto;
    padding: 5px;
    display: block;
    clear: both;
    max-width: 450px;
    border: 1px solid #686868;
    border-radius: 12px;
}

.towbox_show {
    position: relative;
    display: grid;
    grid-template-columns: 50% 50%;
    clear: both;
    margin: auto;
}

.box-search_info {
    font-size: 14px;
    background: #fafafa;
    position: relative;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    -ms-border-radius: 16px;
    -o-border-radius: 16px;
    border-radius: 16px;
    margin-bottom: 30px;
    display: block;
    border: 1px solid #e5e5e5;
    width: 95%;
    max-width: 1280px;
    direction: rtl;
}

.injnix_box {
    position: relative;
    display: block;
    margin: auto;
    clear: both;
}

.box-search_info span {
    padding: 5px;
    margin: 10px;
    display: block;
    position: relative;
}

.box-search_info span.search_box {
    position: relative;
    margin: 20px auto;
    display: block;
    font-size: 14px;
    font-family: var(--font-family, 'sans');
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    width: 90%;
}

.box-search_info span.search_box input {
    position: relative;
    width: calc(100% - 74px);
    height: calc(100% - 28px);
    border-radius: 12px;
    background-color: #f0f0f1;
    border: none;
    padding: 25px 64px 25px 25px;
    font-weight: 400;
    color: #212529;
    font-family: var(--font-family, 'sans');
    font-size: 14px;
}

.box-search_info span.search_box input::placeholder {
    color: #5c5e60;
}

.box-search_info span.search_box i {
    top: 0;
    bottom: 0;
    width: 25px;
    height: 25px;
    right: 20px;
}

.left_bar.big[role="2"] .baxel .injnix_box .box-search_info span.search_box i {
    right: 10px;
    left: unset;
    width: 3.5vW;
    height: 3.5vW;
    font-size: 3.5vW;
}


.basket_box ul.bask_list {
    position: relative;
    display: block;
    margin: 5px auto;
    clear: both;
}

.basket_box ul.bask_list li {
    position: relative;
    display: grid;
    grid-template-columns: 80px auto 80px;
    background: #fff;
    border-radius: 14px;
    padding: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
    align-items: center;
    transition: .2s ease;
    gap: 5px;
    width: 90%;
}

.basket_box ul.bask_list li span {
    position: relative;
    margin: auto;
    display: block;
    max-width: 100%;
    min-width: 100%;
    max-height: 100%;
    min-height: 100%;
    overflow: hidden;
}

.basket_box ul.bask_list li span img {
    position: relative;
    display: block;
    margin: 2%;
    max-width: 96%;
    max-height: 96%;
    box-shadow: 0px 3px 5px rgb(0 0 0 / 22%);
    border-radius: 10px;
    overflow: hidden;
}

.basket_box ul.bask_list li span h1 {
    position: relative;
    margin: 5px;
    font-size: 13px;
    font-family: 'sans_b';
    color: #181818 !important;
}

.basket_box ul.bask_list li span h3 {
    position: relative;
    margin: 2px 5px;
    font-size: 11px;
    font-family: 'sans' !important;
    padding: 2px !important;
    color: #464646 !important;
}

.basket_box ul.bask_list li span.inf {
    padding: 20% 0px 2% 0px;
}

.basket_box ul.bask_list li span.inf h3:nth-child(1) {
    color: var(--base-color) !important;
    font-size: 11.5px;
    font-family: 'sans_b' !important;
}

.basket_box ul.bask_list li span.inf h3:nth-child(2) {
    color: rgb(16 83 116) !important;
    font-size: 11.5px;
}


h3.box_color_2 {
    border-radius: 5px;
    background: #ffffff;
    box-shadow: 0px 3px 3px rgb(20 19 19 / 25%);
    font-size: 12px;
    margin: 10px 5px 30px 5px;
    padding: 10px;
    color: var(--boarder-color);
    text-align: center;
}

h3.box_color_2 b {
    color: var(--base-color);
}


b.color {
    background: transparent;
    position: relative;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    display: inline-block;
    margin: 2px;
    top: 5px;
}


.list_agance li img {
    width: 36px;
    height: 36px;
    position: absolute;
    margin: auto;
    display: block;
    top: 0;
    bottom: 0;
    right: 10px;
}

.list_agance li i {
    width: 18px;
    height: 18px;
    font-size: 18px;
    position: absolute;
    margin: auto;
    display: block;
    top: 0;
    bottom: 0;
    left: 5px;
}

.user_M_dashboard {
    position: relative;
    margin: auto;
    display: block;
    clear: both;
    padding: 10px 0px;
}

.user_M_dashboard center {
    overflow: hidden;
    position: relative;
    margin: auto;
    background: center center repeat;
    background-size: calc(100px * 3) calc(57.5px * 3);
    z-index: 0;
    box-shadow: 0px 0px 10vW rgb(43 41 41 / 86%) inset;
    width: 120px;
    height: 120px;
    border-radius: 50%;
}

.user_M_dashboard center img {
    position: relative;
    display: block;
    margin: auto;
    border-radius: 50%;
    max-width: 100%;
    width: 120px;
    height: 120px;
    max-height: 100%;
}

.user_M_dashboard ul.pro_file {
    position: relative;
    margin: 10px 15px;
    padding: 2px;
    display: block;
    z-index: 0;
}

.user_M_dashboard ul.pro_file li {
    position: relative;
    margin: 10px auto;
    padding: 15px 50px 15px 20px;
    font-family: 'sans_b';
    font-size: 15px;
    direction: rtl;
    display: block;
    text-align: right;
    border: 3px solid #f8f8f8;
    border-radius: 12px;
    background: #272727;
    color: #eee;
}

.user_M_dashboard ul.pro_file li i {
    width: 25px !important;
    height: 25px !important;
    font-size: 25px !important;
    color: #f8f8f8;
    top: 0;
    bottom: 0;
    right: 10px !important;
}

.user_M_dashboard ul.pro_file li svg.icon {
    width: 25px;
    height: 25px;
    font-size: 25px;
    color: #f8f8f8;
    top: 0;
    bottom: 0;
    right: 10px;
}

.user_M_dashboard ul.pro_file li span[for] {
    position: absolute !important;
    margin: auto !important;
    font-size: 25px !important;
    top: 0;
    bottom: 0;
    left: 10px !important;
}

.fui-noty {
    background: center center no-repeat;
    background-size: cover;
}


.list_agance {
    position: relative;
    margin: 20px auto;
    display: block;
    clear: both;
    background: #ffffff;
    padding: 5px 10px 5px 10px;
    text-align: center;
    justify-content: center;
    border-radius: 0px;
}

.list_agance li {
    position: relative;
    display: block;
    clear: both;
    margin: 3px auto;
    z-index: auto;
    font-size: 14px;
    font-family: 'sans_b';
    text-align: right;
    padding: 15px 65px 15px 20px;
}

.list_agance li:not(:last-child) {
    border-bottom: 2px solid rgb(189 189 189 / 38%);
}

.menu_agance li:not(:last-child) {
    border-right: 2px solid rgb(189 189 189 / 38%);
}

.menu_agance {
    position: relative;
    margin: 20px auto;
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
    clear: both;
    background: #ffffff;
    padding: 20px 10px 20px 10px;
    text-align: center;
    justify-content: center;
    border-bottom: 2px solid rgb(189 189 189 / 38%);
    border-radius: 0px;
    direction: rtl;
}

.menu_agance li {
    position: relative;
    display: block;
    clear: both;
    margin: auto;
    padding: 0;
    z-index: auto;
    width: 100%;
    height: 100%;
    text-align: center;
    justify-content: center;
}

.menu_agance li i, .menu_agance li svg, .menu_agance li img {
    position: relative;
    margin: auto;
    display: block;
    width: 70%;
    height: auto;
    font-size: 25px;
    text-align: center;
    justify-content: center;
    overflow: hidden;
}


.user_info {
    position: relative;
    margin: auto;
    display: block;
    clear: both;
    background: #ffffff;
    padding: 50px 10px 20px 10px;
    text-align: center;
    justify-content: center;
    border-bottom: 2px solid rgb(189 189 189 / 38%);
}

.user_info i {
    position: absolute;
    margin: auto;
    width: 25px;
    height: 25px;
    font-size: 25px;
    color: #585858;
    top: 20px;
    right: 40px;
    cursor: pointer;
    z-index: 5;
}

.user_info h1 {
    position: relative;
    margin: 5px auto;
    font-family: 'kalame_b';
    font-size: 30px;
    display: block;
    color: #2e2e2e;
}

.user_info h3 {
    position: relative;
    margin: 5px auto;
    font-family: 'per_add';
    font-size: 14px;
    font-weight: 900;
    display: block;
    color: #2e2e2e;
}

h3 {
    position: relative;
    font-family: 'sans_b';
    font-size: 14px;
    direction: rtl;
    display: block;
    clear: both;
}

h3.box_color_1 {
    border-radius: 5px;
    background: #d9d9d9;
    box-shadow: 0px 3px 3px rgb(20 19 19 / 25%);
}

.towline {
    position: relative;
    margin: auto;
    display: block;
    max-width: 1000px;
}

.towline .left_line {
    position: relative;
    display: block;
    width: calc(100%);
    margin: auto;
}

.towline .left_line hover {
    position: absolute;
    margin: auto;
    width: 100px;
    height: 100px;
    max-width: 95vW;
    max-height: 95vH;
    top: 10px;
    right: 10px;
    z-index: 150;
    display: none !important;
    opacity: 0;
    border: 0px solid #181818;
    background-color: #f8f8f8de;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0px 0px 5px rgb(24 24 24 / 55%);
}

.towline .left_line .big_demo:hover > hover, .towline .left_line .big_demo:hover ~ hover, .towline .left_line hover:hover {
    display: block;
    -moz-transition: all 0s ease !important;
    -webkit-transition: all 0s ease !important;
    transition: all 0s ease !important;
}

.towline .right_line {
    position: relative;
    display: block;
    width: calc(100%);
    margin: auto;
}

.towline h3 {
    display: block;
    position: relative;
    margin: 5px auto;
    font-family: 'sans_b';
    font-size: 18px;
    direction: rtl;
    padding: 10px 10px;
    width: calc(90% - 20px);
}

.towline .right_line span[role="size"], .towline .right_line span[role="colori"] {
    position: relative;
    display: inline-block;
    margin: 10px 7.5px 15px 7.5px;
    padding: 10px 10px;
    font-family: 'per_add';
    font-size: 18px;
    font-weight: 900;
    cursor: pointer;
    direction: ltr;
    background: #FFFFFF;
    box-shadow: 0px 3px 5px rgb(0 0 0 / 52%);
    border-radius: 12px;
    text-align: center;
    justify-content: center;
    min-width: 35px;
    max-height: 35px;
    line-height: 35px;
}

.towline .right_line span[role="size"].selected, .towline .right_line span[role="colori"].selected {
    border: 2px solid #181818;
}

.towline .right_line span[role="size"] span[role="color"] {
    position: absolute;
    display: block;
    margin: auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #f8f8f8;
    cursor: pointer;
    bottom: -35px;
    left: 0px;
    right: 0px;
}

.towline .right_line span.selected span[role="color"] {
    border: 1px solid var(--base-color);
}

.towline .right_line input[type="number"] {
    position: relative;
    margin: 10px;
    padding: 10px 15px;
    border: unset;
    background: #f8f8f8;
    border-radius: 50px;
    text-align: center;
    justify-content: center;
    display: block;
    width: calc(100% - 50px);
    font-size: 20px;
    font-family: 'per_add';
    font-weight: 900;
}

.towline .right_line h1#pirce {
    border-radius: 5px;
    position: relative;
    margin: 10px;
    padding: 5px 20px;
    text-align: right;
    justify-content: right;
    display: block;
    font-size: 20px;
    font-family: 'per_add';
    font-weight: 900;
    color: #181818;
    background: #f8f8f8;
}

.towline .right_line h1#pirce::before {
    position: absolute;
    display: block;
    font-size: 12px;
    height: 12px;
    top: 0;
    bottom: 0;
    content: "قیمت این محصول";
    direction: rtl;
    font-family: 'sans';
    color: var(--base-color);
    margin: auto;
    left: 20px;
}

.towline .left_line img.big_demo {
    position: relative;
    display: block;
    margin: 5% auto;
    width: calc(90%);
    height: auto;
}

.towline .left_line img.small_demo {
    position: relative;
    display: inline-block;
    margin: 10px;
    width: calc(24% - 24px);
    min-height: 15vW;
    height: auto;
    cursor: pointer;
    border-radius: 3px;
    background: url('/storage/app/public/image/shakilid/1645344814index.png') center center no-repeat;
    background-size: cover;
    box-shadow: 0px 2px 3px rgb(0 0 0 / 40%);
    border-radius: 12px;
    border: 2px solid transparent;
}

.towline .p {
    clear: both;
    color: #706b6b;
    position: relative;
    display: block;
    margin: 10px;
    padding: 10px 10px;
    font-family: 'list';
    font-size: 15px;
    font-weight: 900;
    cursor: pointer;
    CONTAIN-INTRINSIC-BLOCK-SIZE: AUTO 100PX;
    border-bottom: 1px solid rgb(0 0 0 / 52%);
}

.show_responsive h3 {
    padding: 10px 20px;
    width: auto;
    color: #181818;
    direction: rtl;
    text-align: justify;
}

.lin_over {
    position: relative;
    display: block;
    margin: auto;
    padding-bottom: 15px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    overflow-y: auto;
}

.user_info h3, .menu_agance h3 {
    text-align: center;
}


span.lin_text[role="inline"] {
    text-align: right;
    justify-content: right;
}

span.lin_text[role="inline"] i {
    position: absolute;
    display: inline-block;
    top: 0;
    bottom: 0;
    right: 10px;
}

span.lin_text[role="inline"] b.asee {
    position: absolute;
    font-size: 13px;
    color: #f8f8f8;
    margin: auto;
    height: 18px;
    top: 0;
    bottom: 0;
    left: 5%;
    cursor: pointer;
    font-weight: 300;
    /* background: #2c3e50 !important; */
    font-family: 'stedad', 'sans' !important;
}

span.lin_text[role="inline"] b.asee i {
    top: 0px;
    width: 13px;
    height: 13px;
    font-size: 13px;
    right: 100%;
    bottom: 0;
    left: unset;
    color: var(--base-color);
    cursor: pointer;
}

.about_text {
    position: relative;
    display: block;
    direction: rtl;
    clear: both;
    text-align: right;
    -webkit-animation-name: start;
    -webkit-animation-duration: 5s;
    -webkit-animation-iteration-count: 1;
    -moz-animation-name: start;
    -moz-animation-duration: 5s;
    -moz-animation-iteration-count: 1;
    animation-name: start;
    animation-duration: 5s;
    animation-iteration-count: 1;
}

.about_text h1 {
    position: relative;
    display: block;
    margin: 10px;
    font-size: 17px;
    font-family: 'sans_b';
    padding: 3px 25px 3px 5px;
    color: #5e5d5d;
}

.about_text h1 svg, .about_text h1 i {
    position: absolute;
    width: 18px;
    height: 18px;
    font-size: 17px;
    margin: auto;
    right: 0px;
    top: 0px;
    bottom: 0px;
}

.about_text p {
    position: relative;
    display: block;
    margin: 10px;
    font-size: 13px;
    color: #181818;
    font-family: 'sans';
    padding: 3px 5px;
    justify-content: right;
    text-align: justify;
}


.basket_box ul.bask_list {
    position: relative;
    display: block;
    margin: 5px auto;
    clear: both;
}

.basket_box ul.bask_list li {
    position: relative;
    display: grid;
    grid-template-columns: 29% 41% 29%;
    margin: 5px auto 10px auto;
}

.basket_box ul.bask_list li span {
    position: relative;
    margin: auto;
    display: block;
    max-width: 100%;
    min-width: 100%;
    max-height: 100%;
    min-height: 100%;
    overflow: hidden;
}

.basket_box ul.bask_list li span img {
    position: relative;
    display: block;
    margin: 2%;
    max-width: 96%;
    max-height: 96%;
    box-shadow: 0px 3px 5px rgb(0 0 0 / 22%);
    border-radius: 10px;
    overflow: hidden;
}

.basket_box ul.bask_list li span h1 {
    position: relative;
    margin: 5px;
    font-size: 13px;
    font-family: 'sans_b';
    color: #181818 !important;
}

.basket_box ul.bask_list li span h3 {
    position: relative;
    margin: 2px 5px;
    font-size: 11px;
    font-family: 'sans' !important;
    padding: 2px !important;
    color: #464646 !important;
}

.basket_box ul.bask_list li span.inf {
    padding: 20% 0px 2% 0px;
}

.basket_box ul.bask_list li span.inf h3:nth-child(1) {
    color: var(--base-color) !important;
    font-size: 11.5px;
    font-family: 'sans_b' !important;
}

.basket_box ul.bask_list li span.inf h3:nth-child(2) {
    color: rgb(16 83 116) !important;
    font-size: 11.5px;
}


h3.box_color_2 {
    border-radius: 5px;
    background: #ffffff;
    box-shadow: 0px 3px 3px rgb(20 19 19 / 25%);
    font-size: 12px;
    margin: 10px 5px 30px 5px;
    padding: 10px;
    color: var(--boarder-color);
}

h3.box_color_2 b {
    color: var(--base-color);
}


.basket_box ul.bask_list li pre {
    position: relative;
    display: block;
    margin: auto;
    text-align: center;
    justify-content: center;
    padding: 5px 15px;
    font-size: 13px;
    color: var(--red-color);
}

.basket_box ul.bask_list li pre i {
    width: 15px;
    height: 15px;
    font-size: 15px;
    top: 0;
    right: -1px;
    bottom: 0;
}


table {
    direction: rtl;
    border-spacing: 1px;
    border-collapse: collapse;
    overflow: hidden;
    max-width: 1000px;
    width: 99%;
    min-width: 85%;
    margin: 0 auto;
    position: relative;
    border-radius: 5px;
}

table * {
    position: relative;
}

table tbody {
    border-bottom: var(--base-color) 3px solid;
    box-shadow: 0px 0px 5px #231f1fa1;
}

table td, table th {
    min-width: 30px;
    max-height: 200px;
    overflow: hidden;
    overflow-y: auto;
    padding: 10px;
    font-family: 'iran';
}

table thead tr {
    padding: 10px;
    border: 2px solid var(--base-color);
    font-size: 14px;
    min-height: 45px;
}

table thead th {
    font-family: 'iran_b';
    font-size: 16px;
}

table tbody td {
    font-family: 'iran';
    font-size: 14px;
}

table tbody tr:nth-of-type(2n) {
    background: #2c3e5026;
}

table tbody tr:nth-child(2n) {
    background: #442c5026;
}

table tbody tr:nth-child(2n) td {
    color: #7d7d7b;
}

table tbody tr {
    min-height: 48px;
    border-bottom: 1px solid var(--base-color);
    background: #0197240a;
}

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

table td, table th {
    text-align: center;
    border-right: var(--base-color) 1.5px solid;
    border-left: var(--base-color) 1.5px solid;
}


table th {
    color: var(--base-color);
    text-align: center;
}

table td {
    font-family: naz_500;
    color: #7b7b7b;
    font-size: 16px;
    direction: rtl;
}

table td img {
    display: table;
    position: relative;
    margin: auto;
    max-width: 100px;
    max-height: 100px;
    width: 100%;
    height: 100%;
    padding: 5px;
}

table td i.icon {
    position: relative !important;
    display: inline-block;
    width: 25px;
    height: 25px;
    font-size: 25px;
    color: #626262;
    cursor: pointer;
    padding: 5px;
    right: unset !important;
    left: unset !important;
    -webkit-transition: all 0.3s cubic-bezier(1, 0.1, 0, 0.9);
    transition: all 0.3s cubic-bezier(1, 0.1, 0, 0.9);
}

table td i.icon:hover {
    color: var(--back-color);
}

table tfoot td {
    background: #535758 !important;
    color: #f7f7f7 !important;
}

.linebar_war {
    position: relative;
    display: block;
    margin: auto;
    padding: 10px;
    text-align: center;
    font-family: 'kalame_b';
    /*background: #ffdd82;*/
    background: linear-gradient(118.96deg, var(--boarder-color, #65cce6), var(--base-color, #1b7c94));
    color: #f8f8f8;
    text-shadow: 0px 0px 1.5px #181818;
}

chatli {
    position: fixed;
    margin: auto;
    padding: 10px;
    width: 20px;
    height: 20px;
    font-size: 20px;
    cursor: pointer;
    background: var(--base-color);
    border-radius: 50%;
    display: block;
    bottom: 5%;
    right: 5%;
    z-index: 90;
    text-align: center;
    box-shadow: 2px 2px 2px #1818185e;
    animation: floatText 12s ease-in-out infinite;
    transform: rotateX(0deg) rotateY(0deg);
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

chatli i {
    width: 20px;
    height: 20px;
    font-size: 20px;
    color: #f8f8f8 !important;
    text-shadow: 0px 0px 1px #181818;
    top: 2px;
    bottom: 0;
    right: 0;
    left: 0;
    cursor: pointer;
}

.minipopup_box {
    position: fixed;
    width: 300px;
    max-width: 100%;
    height: 600px;
    max-height: 100%;
    top: 0;
    right: 0;
    display: block;
    margin: 5px;
    z-index: 100;
    border: 2px solid rgba(44, 62, 80, 0.8);
    border-radius: 15px;
    overflow: hidden;
    background: rgba(44, 62, 80, 0.39);
}

.minipopup_box object.box_show_link {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    margin: auto;
    opacity: 1;
    overflow: hidden;
    border-radius: 15px;
}

.minipopup_box object.box_show_link .close {
    position: relative !important;
    background: transparent;
    display: block;
    margin: 0px auto auto 0px;
    font-size: 17px;
    font-weight: 100;
    padding: 15px 20px;
    border-radius: 3px 3px 0px 0px;
    text-align: left;
    direction: ltr;
    color: var(--red-color);
    text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;
    z-index: 520;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.minipopup_box object.box_show_link .close:before {
    cursor: pointer;
}

.minipopup_box object.box_show_link .show_responsive {
    position: relative;
    width: 100%;
    height: calc(100% - 47px);
    margin: auto;
    display: block;
    direction: ltr;
    overflow: auto;
}

.minipopup_box object.box_show_link .show_responsive iframe {
    position: relative;
    overflow: hidden;
    display: block;
    clear: both;
    width: 100%;
    margin: auto;
    height: 100%;
    z-index: 0;
}

.rowlist {
    position: relative;
    margin: 20px auto;
    padding: 15px;
    width: 90%;
    height: auto;
    direction: rtl;
    text-align: center;
}

.rowlist span {
    position: relative;
    padding: 10px 15px;
    font-size: 12px;
    font-family: 'iran';
    background: #ffffff;
    border: 1px solid #8787877d;
    text-align: center;
    cursor: pointer;
    border-radius: 10px;
    margin: 5px;
}

.vibe_box {
    background: linear-gradient(118.96deg, #65cce6, #1b7c94);
    display: block;
    padding: 15px;
    position: relative;
    height: auto;
    border-radius: 5px;
    opacity: 0.8;
}

.prot_bar {
    position: relative;
    display: block;
    margin: 2% auto;
    width: 90%;
    height: 90px;
    border-radius: 15px;
    overflow: hidden;
    cursor: pointer;
    direction: rtl;
    z-index: 0;
    top: 15px;
}

.basket_box > .prot_bar:nth-child(2) {
    background: linear-gradient(118.96deg, rgb(101 204 230 / 0%) 30%, rgb(27 124 148 / 90%)) 60%;
}

.basket_box > .prot_bar:nth-child(3) {
    background: linear-gradient(118.96deg, rgb(255 255 255 / 0%) 30%, var(--base-color)) 60%;
}

.basket_box > .prot_bar:nth-child(4) {
    background: linear-gradient(118.96deg, rgb(255 255 255 / 0%) 30%, rgb(27 148 35 / 90%)) 60%;
}

.prot_bar img {
    position: absolute;
    width: auto;
    max-width: 80px;
    margin: auto;
    height: auto;
    max-height: 80px;
    cursor: pointer;
    z-index: 0;
    top: 0;
    bottom: 0;
    right: 10px;
}

.prot_bar h1 {
    position: relative;
    color: #181818;
    display: block;
    width: calc(100% - 120px);
    padding: 5px;
    overflow: hidden;
    border-radius: 15px;
    cursor: pointer;
    font-family: 'stedad_b';
    font-size: 15px;
    text-shadow: 0px 0px 1px #f8f8f8;
    margin: 10px 100px auto auto;
}

.prot_bar h2 {
    position: relative;
    color: #555555;
    display: block;
    width: calc(100% - 120px);
    padding: 5px;
    overflow: hidden;
    border-radius: 15px;
    cursor: pointer;
    font-family: 'stedad';
    font-size: 13px;
    text-shadow: 0px 0px 1px #f8f8f8;
    margin: 0px 100px auto auto;
}

.prot_bar.disable * {
    cursor: not-allowed;
}

._audio, ._video, ._img, ._file, ._embed {
    max-width: 95%;
    clear: both;
    display: block;
    margin: auto auto 10px auto;
    position: relative;
    max-height: min(95%, 84vH);
    overflow: hidden;
    border-radius: 15px;
    direction: rtl;
    text-align: center;
    height: auto;
}

.infor_mal {
    clear: both;
    position: relative;
    margin: auto;
    display: block;
    width: 100%;
    max-width: 92vW;
    height: 30px;
    overflow: hidden;
    text-align: right;
    direction: rtl;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.infor_mal span {
    position: relative;
    display: inline-block;
    margin: 7.5px 15px;
    font-size: 15px;
    direction: rtl;
    text-align: right;
    max-width: 49%;
    max-height: 100%;
    overflow: hidden;
    padding-right: 30px;
    cursor: pointer;
    color: #585858;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    animation: infoDrop 3s ease forwards 1;
}

@keyframes infoDrop {
    0% {
        opacity: 0;
        top: -35px;
    }
    100% {
        opacity: 1;
        top: 0px;
    }
}

.infor_mal span i {
    top: 0;
    bottom: 0;
    width: 25px;
    height: 25px;
    right: 0px;
    cursor: pointer;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.infor_mal span b {
    font-family: 'kalame_b';
    font-size: 16px;
    color: #181818;
    cursor: pointer;
}

.left_bar .baxel .tvslid-box {
    position: absolute;
    margin: auto;
    display: block;
    top: 45%;
    width: min(70%, 55vW);
    height: min(45vH, 45%, 450px);
    right: -40%;
    left: 0;
    z-index: 1;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.left_bar.big .baxel .tvslid-box {
    right: 0%;
    left: 5%;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

neo-rotator {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}

neo-rotator .nr-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    perspective: 1600px;
}

neo-rotator .nr-carousel {
    width: 100%;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
}

neo-rotator .nr-item {
    width: 58%;
    height: 58%;
    min-width: 100px;
    min-height: 100px;
    background: linear-gradient(135deg, #1c1c1c, #333);
    border-radius: 14px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    transform-style: preserve-3d;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: clamp(16px, 3vw, 26px);
    font-weight: bold;
    user-select: none;
    overflow: hidden;
    transition: filter 0.25s ease, opacity 0.25s ease, transform 0.25s ease;
}

neo-rotator .nr-item img {
    position: relative;
    margin: auto;
    display: block;
    clear: both;
    width: 100%;
    height: auto;
}

neo-rotator .nr-item i {
    width: 60px;
    height: 60px;
    top: 5%;
    right: 5%;
    border-radius: 50%;
    padding: 10px;
    z-index: 2;
    overflow: hidden;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    transition: filter 0.25s ease, opacity 0.25s ease, transform 0.25s ease;
    box-shadow: -4px 3px 10px #221f1f;
    background: var(--base-color);
    animation: floatText 7s ease-in-out infinite;
}

neo-rotator .nr-item i img {
    width: 100%;
    height: 100%;
    display: block;
    clear: both;
    cursor: pointer;
    position: relative;
    border-radius: 50%;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    transition: filter 0.25s ease, opacity 0.25s ease, transform 0.25s ease;
}

neo-rotator .nr-item ios-26 {
    width: 60%;
    height: auto;
    position: absolute;
    display: block;
    text-align: center;
    padding: 3%;
    bottom: 5%;
    left: 5%;
    font-size: 20px;
    font-family: titr_r;
    font-weight: bold;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    animation: floatText 15s ease-in-out infinite;
    text-shadow: 0px 0px 2px #181818;
}

.right_bar {
    display: block;
    position: fixed;
    margin: auto;
    clear: both;
    height: 100%;
    width: 15%;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 5;
    background: var(--color-accent-400) !important;
    -moz--moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    -webkit--moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.left_bar {
    display: block;
    position: fixed;
    margin: auto;
    clear: both;
    height: 100%;
    width: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: 0;
    background: var(--color-accent-400) !important;
    -moz--moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    -webkit--moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.left_bar *, .right_bar * {
    -moz--moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    -webkit--moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.icon {
    position: absolute;
    margin: auto;
    display: block;
    color: rgb(16 83 116);
}

.right_bar menu {
    position: absolute;
    margin: auto;
    display: block;
    clear: both;
    width: 200%;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
}

.right_bar menu li {
    position: relative;
    display: block;
    margin: 1vH 0px auto auto;
    padding: 2.5vH 2.5vW;
    width: 25vW;
    opacity: 0;
    border-radius: 1.5vW 0px 0px 1.5vW;
    height: calc((100% / 5) - 12%);
    cursor: pointer;
    right: 0;
}

.right_bar menu li:nth-child(1) {
    margin-top: 10vH;
}

.right_bar menu li:nth-child(4) {
    background: var(--hover-color);
}

.right_bar menu li:hover {
    background: var(--select-color);
}


.right_bar menu li:hover, .right_bar menu li.active {
    height: calc((100% / 5) - 6%);
    border-radius: 2vW 0px 0px 2vW;
}

.right_bar menu li:hover b, .right_bar menu li.active b {
    padding: 5% 5% 0% 5%;
    font-size: 1.8vW !important;
}

.right_bar menu li:hover c, .right_bar menu li.active c {
    padding: 1% 5% 0% 5%;
    font-size: 1.5vW !important;
}

.right_bar menu li i {
    top: 0;
    bottom: 0;
    right: 15%;
    max-width: 25%;
    height: auto;
    max-height: 60%;
    font-size: 4vW;
    width: 4vW;
    height: 4vW;
    cursor: pointer;
}

.right_bar menu li b {
    font-size: 1.5vW;
    font-family: 'sans_b';
    text-align: left;
    clear: both;
    padding: 3% 3% 0% 3%;
    margin: -1% auto -3% auto;
    display: block;
    cursor: pointer;
}

.right_bar menu li c {
    font-size: 0.9vW;
    font-family: 'sans';
    text-align: left;
    clear: both;
    padding: 2% 3% 0% 3%;
    margin: auto;
    display: block;
    color: rgb(0 0 0 / 50%);
    cursor: pointer;
}

.right_bar.mini menu li {
    width: 8vW;
}

.right_bar.mini menu li b, .right_bar.mini menu li c {
    display: none !important;
}

.right_bar.mini menu li i {
    top: 0;
    bottom: 0;
    right: 35%;
    max-width: 90%;
    max-height: 90%;
    font-size: 4vW;
    width: 5vW;
    height: 5vW;
    cursor: pointer;
}


.right_bar menu li min {
    position: absolute;
    display: block;
    opacity: 0;
    margin: auto;
    margin-right: 0px;
    top: 0;
    bottom: 0;
    right: 0;
    width: 0%;
    z-index: -1;
}

.right_bar menu li.active min {
    opacity: 1;
    width: 100%;
}

.right_bar menu li.active min.animation {
    opacity: 1;
    width: 145%;
}

.right_bar menu li min lable {
    position: absolute;
    display: block;
    height: calc(100% - 30px);
    width: auto;
    padding: 15px 25vW 15px 30px;
    cursor: pointer;
    margin: auto 0px auto auto;
    top: 0;
    bottom: 0;
    right: 0;
}

.right_bar menu li min lable:nth-child(1) {
    background: #cecece;
    width: 45%;
    z-index: 3;
    font-size: 1.7vW;
    font-family: 'sans_b';
    font-weight: 900;
    text-align: left;
}

.right_bar menu li min lable:nth-child(2) {
    background: #fefefe;
    width: 75%;
    z-index: 2;
    font-size: 1.7vW;
    font-family: 'sans_b';
    font-weight: 900;
    text-align: left;
}

.right_bar menu li min lable:nth-child(3) {
    background: #FDC533;
    width: 120%;
    z-index: 1;
    font-size: 1.15vW;
    font-family: 'sans';
    font-weight: 900;
    text-align: left;
}

.right_bar menu li min lable {
    line-height: 8vH;
}

.right_bar menu li.active min lable {
    line-height: 16vH;
}

.right_bar menu li min lable {
    border-radius: 30px 0px 0px 30px;
}

.right_bar menu li.active min lable {
    border-radius: 40px 0px 0px 40px;
}

.right_bar menu li min lable i {
    width: 3vW !important;
    height: 3vW !important;
    font-size: 3vW !important;
    right: unset !important;
    left: 10% !important;
    cursor: pointer;
}

.right_bar.mini menu li.active min {
    opacity: 0;
    width: 0%;
}

.right_bar.mini menu {
    width: 100% !important;
    overflow: hidden;
}


.left_bar .baxel {
    position: absolute;
    width: 80vW;
    height: 80vW;
    display: block;
    margin: auto;
    left: -25%;
    top: 0;
    bottom: 0;
    background: rgb(231 231 231 / 15%);
    border-radius: 50%;
}

.left_bar.big .baxel {
    background: rgb(231 231 231 / 65%);
}

.left_bar .baxel .bak_re {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    display: block;
    border-radius: 50%;
    margin: auto;
    z-index: -1;
    overflow: hidden;
}

.left_bar .baxel img.bk_bax, .left_bar .baxel loading {
    position: absolute;
    width: 105%;
    height: auto;
    min-height: 105%;
    display: block;
    margin: auto;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    border-radius: 50%;
    filter: contrast(1);
}

.left_bar.big .baxel img.bk_bax, .left_bar.big .baxel loading {
    filter: contrast(0.7);
}

.left_bar.big[role="1"] .baxel {
    width: 95vW;
    height: 95vW;
    left: -15%;
    border-radius: 50%;
}

.left_bar.big[role="2"] .baxel {
    width: calc(100vW - 15%);
    height: 100vH;
    left: 0%;
    border-radius: 0px;
}

.left_bar.big[role="2"] .baxel .injnix_box {
    position: absolute !important;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0;
    overflow: hidden;
    overflow-y: auto;
}

.left_bar .baxel img.bk_bax, .left_bar .baxel loading {
    position: absolute;
    width: 100%;
    height: auto;
    min-height: 100%;
    display: block;
    margin: auto auto auto 0px;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 2;
    transform: translateZ(2px);
    border-radius: 50%;
    filter: contrast(0.7);
}

.left_bar .baxel span:not([class]),
.left_bar .baxel span[class=""] {
    position: absolute;
    background: var(--color-accent-600);
    width: 6vW;
    height: 6vW;
    display: block;
    text-align: center;
    border-radius: 50%;
    margin: auto;
    cursor: pointer;
    z-index: 10;
}

.left_bar .baxel span tred {
    position: absolute;
    z-index: -1;
    background: var(--color-accent-900);
    width: 300%;
    height: 120%;
    top: -10%;
    right: -10%;
    border-radius: 5vW;
    cursor: pointer;
}

.left_bar .baxel span tred c, .left_bar .baxel span tred d {
    position: absolute;
    color: #f8f8f8;
    font-family: 'naz_500';
    width: 50%;
    left: 10%;
    top: 25%;
    font-size: 1.2vW;
}

.left_bar .baxel span tred d {
    top: 55%;
    font-size: 0.8vW;
    opacity: 0.8;
}

.left_bar .baxel span.search, .left_bar .baxel span.login, .left_bar .baxel span.basket {
    position: absolute;
    background: var(--color-accent-600);
    width: 6vW;
    height: 6vW;
    display: block;
    text-align: center;
    border-radius: 50%;
    margin: auto;
    cursor: pointer;
    z-index: 10;
}

.left_bar .baxel span.search {
    top: 24%;
    right: 1%;
    opacity: 1;
    display: block;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.left_bar .baxel span.login {
    top: 33%;
    right: -2%;
    opacity: 1;
    display: block;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.left_bar .baxel span.basket {
    top: 42.5%;
    right: -3.5%;
    opacity: 1;
    display: block;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.left_bar .baxel span i {
    width: 3.8vW;
    height: 3.8vW;
    font-size: 3.8vW;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    cursor: pointer;
    position: absolute;
}

.left_bar.big .baxel span.search {
    opacity: 0;
    display: none;
}

.left_bar.big .baxel span.login {
    opacity: 0;
    display: none;
}

.left_bar.big .baxel span.basket {
    opacity: 0;
    display: none;
}

.left_bar.big .baxel slider {
    opacity: 0;
    display: none;
}


.left_bar.big .text {
    position: absolute;
    margin: auto;
    max-width: 78%;
    max-height: 40%;
    overflow: hidden;
    overflow-y: auto;
    top: 0;
    right: 5%;
    bottom: 0;
    display: block;
    padding: 2%;
    direction: rtl;
}

.left_bar .text {
    position: absolute;
    margin: auto;
    max-width: 50%;
    max-height: 40%;
    overflow: hidden;
    overflow-y: auto;
    top: 0;
    right: 5%;
    bottom: 0;
    display: block;
    padding: 2%;
    direction: rtl;
}

.text h1 {
    position: relative;
    display: block;
    margin: 5px auto;
    direction: ltr;
}

.text h1 img {
    position: relative;
    margin: 5px auto;
    clear: both;
    max-width: 35%;
}

.text p {
    position: relative;
    display: block;
    margin: 5px auto;
    direction: rtl;
    font-size: 16px;
    font-family: 'sans_b';
    text-align: justify;
    padding: 10px 5px;
}

.text h3 {
    clear: both;
    display: block;
    position: relative;
    text-align: left;
    direction: rtl;
    font-family: 'titr';
    font-size: 20px;
    font-weight: 900;
    margin: 10px auto -5px auto;
    padding: 0px 15px;
}


.right_bar menu li min lable.golder {
    background: var(--hover-color);
    width: 100%;
    z-index: 3;
    font-size: 17px;
    font-family: 'sans_b';
    font-weight: 900;
    text-align: left;
    padding-right: 2%;
    padding-left: 2%;
}

.right_bar menu li min lable.golder a {
    position: relative;
    display: inline;
    margin: 5px;
    text-decoration-line: blink;
    color: #181818;
    padding: 3% 4% 3% 4%;
    text-align: center;
    justify-content: center;
    cursor: pointer;
}

.right_bar menu li min lable.golder a:nth-child(1) {
    border-left: 2px solid #181818;
}

.left_bar .row_set {
    position: absolute;
    margin: auto;
    display: block;
    width: 55%;
    height: 45%;
    overflow: hidden;
    overflow-y: auto;
    top: 0;
    bottom: 0;
    right: 7%;
    z-index: 5;
    background: transparent;
    direction: ltr;
}

.left_bar.big .row_set {
    width: 72%;
    height: 40%;
    right: 5%;
}


.left_bar .baxel slider {
    position: absolute;
    margin: auto;
    width: 60%;
    height: 45%;
    overflow: hidden;
    top: 0;
    bottom: 0;
    right: 0%;
    left: 25%;
    border: 3px solid var(--color-accent-600);
    border-left: unset;
    border-bottom: unset;
    border-radius: 0px 15% 0px 15px;
}

.left_bar .baxel slider slide img {
    box-shadow: -4px 3px 10px #221f1f;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.left_bar .box-search_info {
    background: transparent;
    border: 1px solid transparent;
}

.book3d basket {
    display: none;
    opacity: 0;
    background: var(--green-color);
    top: unset;
    padding: 5px;
    bottom: -25px;
    right: 10px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 1px solid rgba(0, 255, 255, .25);
    box-shadow: inset 8px -4px 8px rgb(0 0 0 / 53%), inset -4px -4px 8px rgb(255 255 255 / 60%), 0 0 30px rgba(0, 255, 255, .08);
    animation: floatText 12s ease-in-out infinite;
    transform: rotateX(0deg) rotateY(0deg) translateX(15px);
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    z-index: 5;
    position: absolute;
    overflow: hidden;
}

.book3d:hover basket {
    display: block;
    opacity: 1;
}

.nx-card h2:not([class]),
.nx-card h2[class=""] {
    color: #5bdaff;
    text-shadow: 0px 0px 3px #004859;
}

.book3d {
    width: 88%;
    aspect-ratio: 260 / 340;
    position: relative;
    perspective: 1600px;
    cursor: pointer;
    overflow: visible;
    border-radius: 10px 3px 3px 10px;
    z-index: 0;
    box-shadow: -4px -4px 10px rgba(0, 0, 0, 0.65), 2px 2px 6px rgb(255 255 255 / 20%), 0 5px 12px rgba(0, 0, 0, 0.55);
}

.book3d:hover {
    z-index: 10;
}

.page {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    transform-origin: right;
    border-radius: 15px 3px 3px 15px;
    backface-visibility: hidden;
}

.cover {
    background: var(--color-accent-600);
    transform: rotateY(3deg) translateZ(3px);
    background-image: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.15), transparent 40%), radial-gradient(circle at 80% 80%, rgba(0, 0, 0, 0.25), transparent 50%), repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.05) 0px, rgba(0, 0, 0, 0.05) 2px, rgba(255, 255, 255, 0.05) 2px, rgba(255, 255, 255, 0.05) 4px);
    background-blend-mode: overlay;
    transition: .6s ease;
}

.inner {
    background: #ffe9d6;
    transform: rotateY(2deg) translateZ(2px);
    border-radius: 15px 3px 3px 85px;
    transition: .6s ease .05s;
}

.inner2 {
    background: #efefef url('/public/files/icons/headbg5.png') !important;
    transform: rotateY(1deg) translateZ(1px);
    transition: .6s ease .1s;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.book3d:hover .cover {
    transform: rotateY(80deg) translateZ(3px);
}

.book3d:hover .inner {
    transform: rotateY(30deg) translateZ(2px);
}

.book3d:hover .inner2 {
    transform: rotateY(10deg) translateZ(1px);
}

.book3d .inner2 * {
    visibility: hidden;
    opacity: 0;
}

.inner2:hover ~ .inner {
    transform: rotateY(78deg) translateZ(2px) !important;
}

.inner2:hover * {
    visibility: visible;
    opacity: 1;
}

.spiral {
    position: absolute;
    right: 1%;
    top: 5%;
    width: 10px;
    height: 90%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    pointer-events: none;
    z-index: 2;
    transform: rotateY(1deg) translateY(4px);
    -moz-transition: all 0.8s ease;
    -webkit-transition: all 0.8s ease;
    transition: all 0.8s ease;
}

.book3d:hover .spiral {
    z-index: -1;
    transform: rotateY(-5deg) translateY(2px);
}

.spiral svg {
    width: 30px;
    height: 30px;
    fill: #7a7a7a;
    filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.45));
    transform: rotateY(180deg) rotateX(45deg);
}

.badgeed {
    background: linear-gradient(145deg, #f1f1f140, #e6e6e645);
    box-shadow: inset 4px 4px 8px rgba(0, 0, 0, 0.18), inset -4px -4px 8px rgb(255 255 255 / 32%);
    font-weight: 600;
    letter-spacing: 0.2px;
}

.postse_list {
    position: absolute;
    top: 10%;
    right: 0px;
    left: 0px;
    width: 82%;
    height: 45%;
    margin: auto;
    display: block;
    clear: both;
    padding: 10px;
    text-align: center;
    background: rgb(231 231 231 / 73%);
    box-shadow: inset 6px 6px 10px rgb(0 0 0 / 34%), inset -6px -6px 10px rgb(255 255 255 / 32%);
    padding-top: 40px !important;
    border-radius: 12px !important;
    padding-bottom: 25px !important;
}

.postse_list span.title {
    position: absolute;
    margin: auto;
    display: block;
    color: #686868;
    right: 20px;
    text-align: center;
    top: -20px;
    width: 150px;
    font-size: 16px;
    font-family: 'sans_b';
    padding: 10px 10px 10px 10px;
    background: rgb(222 210 194);
    box-shadow: inset 4px 4px 8px rgb(0 0 0 / 53%), inset -4px -4px 8px rgb(255 255 255 / 60%);
    z-index: 0;
    border-radius: 60px;
    direction: rtl;
}

.cover .postse_list img {
    position: relative;
    margin: auto;
    display: block;
    padding: 2.5%;
    max-width: 95%;
    max-height: 95%;
    border-radius: 15px;
    box-shadow: inset -4px -4px 8px rgb(0 0 0 / 53%), inset 4px 4px 8px rgb(255 255 255 / 60%);
}

.nx-showcase {
    position: absolute;
    width: 150%;
    height: 150%;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    font-family: 'sans';
    direction: ltr;
}

.nx-left {
    width: 60%;
    height: 60%;
    display: flex;
    flex-direction: column;
    gap: 5px;
    z-index: 2;
}

.nx-card {
    padding: 5px 15px;
    border-radius: 20px;
    background: rgb(19 19 19 / 70%);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 255, 255, .25);
    box-shadow: 0 0 30px rgba(0, 255, 255, .08);
    transition: .4s;
    transform: translateX(-10px);
    width: 50%;
    direction: rtl;
    min-height: 20%;
}

.nx-card:hover {
    transform: translateX(20px);
    box-shadow: 0 0 40px rgba(0, 255, 255, .25);
}

.nx-card h3 {
    margin: 0 0 3px;
    color: var(--base-color);
}

.nx-card p {
    margin: 0;
    color: #cfd8dc;
}

.nx-large {
    padding: 25px 17px;
}

.nx-product {
    position: relative;
    width: 20%;
    height: 60%;
    border-radius: 350px 0 0 350px;
    overflow: hidden;
    border: 2px solid rgba(0, 255, 255, .4);
    display: flex;
    align-items: center;
    justify-content: center;
}

.nx-product img {
    width: 150px;
    height: 150px;
    position: relative;
    border-radius: 50%;
    z-index: 2;
    background: radial-gradient(circle at 30% 25%, #ffffff33, #0b0b0b);
    box-shadow: inset -8px -8px 18px rgba(0, 0, 0, 0.65), inset 4px 4px 12px rgba(255, 255, 255, 0.18), 0 3px 10px rgba(0, 0, 0, 0.55);
    animation: nxFloat 4s ease-in-out infinite;
}

.nx-glow {
    position: absolute;
    width: 110%;
    height: 110%;
    background: rgba(0, 255, 255, .4);
    filter: blur(120px);
    opacity: .25;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
}

.nx-lines {
    position: absolute;
    inset: 0;
    width: 95%;
    height: 90%;
    pointer-events: none;
    right: -20%;
}

.nx-lines path {
    fill: none;
    stroke: var(--base-color);
    stroke-width: 2;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: nxDraw 3s forwards;
}

svg.gosheh {
    position: absolute;
    width: 60px;
    height: 60px;
    bottom: 0px;
    margin: auto;
    left: 0px;
    z-index: 2;
    -webkit-animation-name: peypar;
    -webkit-animation-duration: 1.5s;
    -webkit-animation-iteration-count: 1;
    -moz-animation-name: peypar;
    -moz-animation-duration: 1.5s;
    -moz-animation-iteration-count: 1;
    animation-name: peypar;
    animation-duration: 1.5s;
    animation-iteration-count: 1;
    background: linear-gradient(45deg, #212121 50%, transparent 50%);
    border-radius: 15px 0px 0px 15px;
}


@-moz-keyframes peypar {
    0% {
        bottom: -2px;
        left: -2px;
    }
    100% {
        bottom: 0px;
        left: 0px;
    }
}

@-webkit-keyframes peypar {
    0% {
        bottom: -2px;
        left: -2px;
    }
    100% {
        bottom: 0px;
        left: 0px;
    }
}

@keyframes peypar {
    0% {
        bottom: -2px;
        left: -2px;
    }
    100% {
        bottom: 0px;
        left: 0px;
    }
}

@keyframes nxDraw {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes nxFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-15px);
    }
}

@keyframes nxPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.08);
    }
}

.imag_listin {
    position: relative;
    margin: auto;
    width: 80%;
    height: calc(100% - 60px);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 5px;
    overflow: hidden;
}

.imag_listin img {
    width: auto;
    height: auto;
    max-width: calc(95% - 20px);
    max-height: calc(95% - 20px);
    margin: auto;
    position: relative;
    border: 2px solid var(--base-color);
    border-radius: 15px;
    box-shadow: inset -4px -4px 8px rgb(0 0 0 / 53%), inset 4px 4px 8px rgb(124 124 124 / 60%);
    padding: 10px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.book3d .inner h1 {
    position: relative !important;
    margin: 5px auto !important;
    text-align: center !important;
    font-size: 14px !important;
    padding: 10px !important;
    border: 1px solid var(--base-color) !important;
    max-width: 85% !important;
    border-radius: 15px !important;
    background: var(--color-accent-500) !important;
    color: var(--color-accent-50) !important;
    text-shadow: 0px 0px 1px #181818 !important;
}

.book3d .cover off {
    position: absolute;
    margin: auto;
    display: block;
    padding: 15px 15px;
    background: var(--red-color);
    background-image: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.15), transparent 40%), radial-gradient(circle at 80% 80%, rgba(0, 0, 0, 0.25), transparent 50%), repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.05) 0px, rgba(0, 0, 0, 0.05) 2px, rgba(255, 255, 255, 0.05) 2px, rgba(255, 255, 255, 0.05) 4px);
    background-blend-mode: overlay;
    bottom: 7px;
    left: 15px;
    color: #f8f8f8;
    font-size: 16px;
    border-radius: 50%;
    box-shadow: inset 8px -4px 8px rgb(0 0 0 / 53%), inset -4px -4px 8px rgb(255 255 255 / 60%), -2px -2px 4px rgb(0 0 0 / 53%), 2px 2px 4px rgb(255 255 255 / 60%);
    text-shadow: 1px -1px 1px #181818;
    Z-INDEX: 2;
    cursor: pointer;
}

.book3d .cover h3 {
    position: absolute;
    padding: 8px 12px;
    margin: auto;
    display: block;
    text-align: center !important;
    align-items: center;
    width: calc(100% - 24px);
    font-family: "kalame_b";
    font-size: clamp(95%, 1.6vw, 16px);
    color: var(--color-accent-100);
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.4), -1px -1px 1px rgba(0, 0, 0, 0.2), 0 0 1px rgba(0, 0, 0, 0.2);
    bottom: 5%;
    right: 0;
    left: 0;
}

.book3d basket i {
    width: 40px;
    height: 40px;
    font-size: 40px;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    cursor: pointer;
    text-shadow: 2px 2px 3px #181818, -2px -2px 3px #f8f8f8;
    filter: drop-shadow(2px 2px 3px #181818) drop-shadow(-2px -2px 3px #f8f8f8);
}

.ajaxer_cat_box {
    gap: 25px 10px;
}

crycle {
    position: absolute;
    margin: auto;
    width: 40vW;
    height: 40vW;
    border-radius: 50%;
    box-shadow: 2px 2px 28px 3px rgba(0, 0, 0, 0.25);
    display: block;
    z-index: 2;
    top: 0;
    bottom: 0;
    right: 12vW;
    background: #f8f8f8;
    -moz-transition: all 0.8s ease;
    -webkit-transition: all 0.8s ease;
    transition: all 0.8s ease;
}

other_cry {
    position: absolute;
    margin: auto;
    background: #f8f8f8;
    width: 12vW;
    height: 12vW;
    border-radius: 50%;
    box-shadow: 2px 2px 28px 3px rgba(0, 0, 0, 0.25);
    display: none;
    opacity: 0;
    z-index: 0;
    top: -70vH;
    bottom: 0;
    right: unset;
    left: 55vW;
    -moz-transition: all 1s ease;
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
}

.left_bar[role="2"] crycle {
    right: 35vW;
}

crycle img.pro_img, other_cry img.pro_img {
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    width: 88%;
    height: 88%;
    border-radius: 50% 20% 30% 20%;
    -webkit-animation-name: pro_img !important;
    -moz-animation-name: pro_img !important;
    animation-name: pro_img !important;
    -webkit-animation-direction: alternate-reverse !important;
    -webkit-animation-duration: 7s !important;
    -webkit-animation-iteration-count: infinite !important;
    -webkit-animation-timing-function: ease !important;
    -moz-animation-direction: alternate-reverse !important;
    -moz-animation-duration: 7s !important;
    -moz-animation-iteration-count: infinite !important;
    -moz-animation-timing-function: ease !important;
    animation-direction: alternate-reverse !important;
    animation-duration: 7s !important;
    animation-iteration-count: infinite !important;
    animation-timing-function: ease !important;
    -moz-transition: all 0.5s ease !important;
    -webkit-transition: all 0.5s ease !important;
    transition: all 0.5s ease !important;
}

@-webkit-keyframes pro_img {
    0% {
        transform: translateY(-20px);
    }
    50% {
        transform: translateY(10px);
    }
    100% {
        transform: translateY(-20px);
    }
}

@-moz-keyframes pro_img {
    0% {
        transform: translateY(-20px);
    }
    50% {
        transform: translateY(10px);
    }
    100% {
        transform: translateY(-20px);
    }
}

@keyframes pro_img {
    0% {
        transform: translateY(-20px);
    }
    50% {
        transform: translateY(10px);
    }
    100% {
        transform: translateY(-20px);
    }
}

other_cry titr {
    position: absolute;
    cursor: pointer;
    display: block;
    margin: auto;
    background: var(--bilt-color);
    border-radius: 2vW;
    font-family: 'sans_b';
    bottom: -2vW;
    text-align: center;
    justify-content: center;
    padding: 1vH 1vW;
    font-size: 1.2vW;
    right: 0;
    left: 0;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
}

other_cry titr i {
    position: relative !important;
    display: block;
    font-size: 1.7vW;
    width: 1.7vW;
    height: 1.7vW;
}

crycle mil, crycle mili {
    position: absolute;
    z-index: 3;
    cursor: pointer;
    display: block;
    margin: auto;
    background: var(--bilt-color);
    width: 4vW;
    height: 4vW;
    border-radius: 50%;
    opacity: 1;
}

crycle mil h1 {
    position: absolute;
    font-family: 'sans';
    font-size: 17px;
    text-align: center;
    justify-content: center;
    bottom: -3.5vH;
    right: -2.5vW;
    margin: auto;
    display: none;
    padding: 2px;
    opacity: 0;
}

crycle mil:hover h1 {
    opacity: 1;
    display: block;
}

crycle mil:nth-child(1) {
    top: -1%;
    left: 27%;
}

crycle mil:nth-child(2) {
    top: 5%;
    left: 14%;
}

crycle mil:nth-child(3) {
    top: 15%;
    left: 4%;
}

crycle mil:nth-child(4), crycle mili:nth-child(1), crycle mili:nth-child(5) {
    top: 27%;
    left: -1%;
}

crycle mili:nth-child(1), crycle mili:nth-child(5) {
    background: var(--base-color);
}

crycle mili:nth-child(1) i, crycle mili:nth-child(5) i {
    width: 2vW;
    height: 2vW;
    font-size: 2vW;
    color: #f8f8f8;
    background: var(--color-accent-900);
}

crycle mili:nth-child(2), crycle mili:nth-child(6) {
    top: 45%;
    right: -5%;
    border-radius: 45%;
}

crycle mili:nth-child(3), crycle mili:nth-child(7) {
    top: 45%;
    left: -5%;
    border-radius: 45%;
}

crycle mili:nth-child(3) i, crycle mili:nth-child(7) i, crycle mili:nth-child(2) i, crycle mili:nth-child(6) i {
    color: #0a0a0a;
    width: 1.5vW;
    height: 1.5vW;
    font-size: 1.5vW;
}


crycle mili {
    z-index: -2;
    opacity: 0;
}

crycle mil i, crycle mili i {
    width: 3vW;
    height: 3vW;
    font-size: 3vW;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    cursor: pointer;
}

crycle titr {
    position: absolute;
    cursor: pointer;
    display: block;
    margin: auto;
    background: var(--color-accent-400);
    border-radius: 2vW;
    padding: min(4vH, 30px) 1.5vW;
    font-family: 'sans_b';
    font-size: 1.4vW;
    bottom: -1vW;
    right: -10vW;
    left: 0;
    width: 85%;
    box-shadow: -10px 2px 4px 0px rgba(0, 0, 0, 0.25);
    text-align: center;
    justify-content: center;
}

crycle titr spiler {
    position: absolute;
    padding: 10px;
    width: 60px;
    height: 60px;
    font-size: 20px;
    display: block;
    margin: auto;
    background: var(--red-color);
    border-radius: 50%;
    color: #f8f8f8;
    text-align: center;
    top: -45px;
    right: 19px;
    z-index: -1;
    box-shadow: -4px -4px 4px 0px rgba(0, 0, 0, 0.25);
}


crycle titr::after {
    content: attr(title);
    display: block;
    position: absolute;
    margin: auto;
    z-index: -1;
    cursor: pointer;
    background: var(--color-accent-700);
    border-radius: 2vW 0px 0px 2vW;
    padding: min(4vH, 30px) 5vW min(4vH, 30px) 1.5vW;
    font-family: 'm3dfont';
    font-size: 1.6vW;
    bottom: 0;
    top: 0;
    right: 88%;
    text-align: center;
    justify-content: center;
    opacity: 1;
}

.text-cyr-box {
    position: absolute;
    right: -75%;
    top: 0;
    bottom: 0;
    width: 58%;
    height: 85%;
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    overflow-y: auto;
    direction: rtl;
    padding: 2vH 2vW;
    color: #535353;
    font-size: 1vW;
    line-height: 2;
    font-family: 'iran_b';
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.5) transparent;
    text-align: justify;
    display: none;
}

.text-cyr-box::-webkit-scrollbar {
    width: 6px;
}

.text-cyr-box::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.5);
    border-radius: 3px;
}

.text-cyr-box::-webkit-scrollbar-track {
    background: transparent;
}


crycle mil i, crycle mili i {
    width: 3.5vW;
    height: 3.5vW;
    padding: 10px;
    border-radius: 50%;
    background: #f1f1f1;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 10;
    cursor: pointer;
    box-shadow: 5px 2px 5px 0px rgba(0, 0, 0, 0.25);
}

crycle.mindal {
    width: 12vW;
    height: 12vW;
    border-radius: 50%;
    box-shadow: 2px 2px 28px 3px rgba(0, 0, 0, 0.25);
    display: block;
    z-index: 2;
    top: -70vH;
    bottom: 0;
    right: unset;
    left: 0vW;
    -moz-transition: all 1s ease;
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
}

crycle.mindal mil {
    opacity: 0;
    z-index: -10;
}

crycle.mindal titr {
    padding: 1.5vH 1.5vW;
    font-size: 1vW;
    right: 0;
    left: 0;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    direction: rtl;
}

crycle.mindal titr::after {
    opacity: 0;
}

.popup_box object.box_show_link .show_responsive .row_set {
    position: relative;
    display: block;
    margin: 0% auto;
    padding: 3% 5px;
    clear: both;
    max-width: 75%;
    height: auto;
}

.popup_box object.box_show_link .show_responsive .row_set .grid .gid h1 {
    background: #00800D;
    direction: rtl;
}


.popup_box object.box_show_link {
    width: 97% !important;
    max-width: 98vW !important;
    min-width: 200px !important;
    opacity: 1 !important;
}

other_cry p, crycle p {
    position: absolute;
    margin: auto;
    display: block;
    overflow: hidden;
    overflow-y: auto;
    width: 160%;
    background: #f8f8f8;
    border: 10px solid var(--hover-color);
    border-radius: 2.5vW;
    right: 0px;
    left: -40%;
    bottom: calc(-55% - 55vH);
    padding: 6%;
    height: 55vH;
    direction: rtl;
    font-family: 'sans';
}

crycle.mindal .text-cyr-box {
    display: none !important;
}


.left_bar .baxel .listen_cater {
    position: absolute;
    margin: auto;
    display: block;
    top: 27%;
    width: min(70%, 55vW);
    height: auto;
    right: -40%;
    left: 0;
    background: var(--color-accent-400);
    border-radius: 100px;
    z-index: 1;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    overflow: hidden;
    box-shadow: inset -8px -8px 18px rgba(0, 0, 0, 0.65), 4px 4px 12px rgba(256, 255, 255, 0.18), 0 10px 22px rgba(0, 0, 0, 0.55);
}

.left_bar.big .baxel .listen_cater {
    right: 0%;
    left: 5%;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

neo-list {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding: 20px 0px;
    margin: auto;
    position: relative;
}

neo-list .nl-container {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    overflow-x: auto;
    gap: 10px;
    padding: 10px;
    scrollbar-width: none;
    height: 100%;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

neo-list .nl-container::-webkit-scrollbar {
    display: none;
}

neo-list .nl-item {
    flex: 0 0 auto;
    width: 100px;
    height: 100px;
    text-align: center;
    cursor: pointer;
    position: relative;
    opacity: 0;
    transform: scale(0.3) translateY(40px);
    animation: nlPopIn 0.6s cubic-bezier(.25, 1.4, .45, 1) forwards;
}

@keyframes nlPopIn {
    0% {
        opacity: 0;
        transform: scale(0.3) translateY(40px);
    }
    60% {
        opacity: 1;
        transform: scale(1.25) translateY(-6px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

neo-list .nl-circle {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 25%, #ffffff33, #0b0b0b);
    box-shadow: inset -8px -8px 18px rgba(0, 0, 0, 0.65), inset 4px 4px 12px rgba(255, 255, 255, 0.18), 0 3px 10px rgba(0, 0, 0, 0.55);
    display: block;
    justify-content: center;
    align-items: center;
    font-size: 28px;
    color: #fff;
    font-weight: 600;
    user-select: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

neo-list .nl-circle:hover {
    transform: scale(1.12);
    box-shadow: inset -6px -6px 14px rgba(0, 0, 0, 0.55),
    inset 4px 4px 10px rgba(255, 255, 255, 0.22),
    0 12px 26px rgba(0, 0, 0, 0.6);
}

neo-list .nl-circle img {
    width: 95%;
    height: 95%;
    border-radius: 50%;
    margin: auto;
    display: block;
    position: relative;
    cursor: pointer;
    z-index: -1;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

neo-list .nl-title {
    margin: auto;
    margin-top: 70%;
    width: 120%;
    position: relative;
    height: 26px;
    right: 10%;
    overflow: hidden;
    direction: rtl;
    background: linear-gradient(135deg, #05070a, #101622);
    border-radius: 8px;
    border: 1px solid rgba(0, 255, 200, 0.4);
    box-shadow: 0 0 8px rgba(0, 255, 200, 0.35), inset 0 0 6px rgba(0, 255, 200, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(5px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

neo-list .nl-title.active {
    opacity: 1;
    transform: translateY(0);
}

neo-list .nl-title-text {
    white-space: nowrap;
    font-size: 13px;
    color: #0ff;
    display: inline-block;
    font-family: 'sans';
}

neo-list .nl-title-text.scroll {
    animation: nlMarquee 4s linear infinite;
}

@keyframes nlMarquee {
    0% {
        transform: translateX(-100%) scale(0.1);
    }
    100% {
        transform: translateX(0%) scale(1);
    }
}

.pagercat {
    background: #f8f8f86e;
    position: relative;
    margin: 2% auto auto auto;
    display: block;
    width: 92%;
    height: 92%;
    border-radius: 15px;
    overflow: hidden;
    z-index: 0;
}

.pagercat .towgriderb .r_bixer h1 {
    position: relative;
    display: block;
    direction: rtl;
    margin: 2% auto;
    clear: both;
    width: calc(93% - 60px);
    max-width: min(1200px, 95vW);
    font-size: 19px;
    font-family: 'stedad_b';
}

.pagercat .towgriderb {
    position: relative;
    display: grid;
    margin: auto;
    grid-template-columns: 75% 25%;
    width: 100%;
    direction: rtl;
    height: 100%;
}

.pagercat .towgriderb .r_bixer, .pagercat .towgriderb .l_bixer {
    position: relative;
    margin: auto;
    width: 100%;
    height: 100%;
    display: block;
    clear: both;
    border-radius: 15px;
}

.pagercat .towgriderb .l_bixer {
    background: rgb(16 9 9 / 0.2);
    height: 100%;
}

.pagercat .towgriderb .l_bixer::before {
    content: '';
    position: absolute;
    margin: auto;
    z-index: -1;
    width: 100%;
    min-height: 100%;
    display: block;
    opacity: 0.02;
    background: var(--base-color);
}

.pagercat .towgriderb .l_bixer .image_box {
    position: relative;
    margin: 10%;
    display: block;
    height: min(40%, 400px, 40vH);
    overflow: hidden;
    border-radius: 15px;
    background: #f8f8f8b8;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.pagercat .towgriderb .l_bixer .image_box .img_ind {
    position: relative;
    margin: auto;
    width: 100%;
    height: 65%;
    overflow: hidden;
    display: block;
    box-shadow: inset 0 4px 12px rgb(0 0 0 / 21%);
}

.pagercat .towgriderb .l_bixer .image_box .img_ind img {
    max-width: 170%;
    width: auto;
    max-height: 170%;
    height: auto;
    position: absolute;
    margin: auto;
    display: block;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

.pagercat .towgriderb .l_bixer .image_box .icon_ind {
    position: absolute;
    display: block;
    width: min(35%, 70px, 15vW);
    height: auto;
    max-height: min(70px, 15vW);
    border-radius: 5px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    top: 50%;
    left: 10%;
    background: var(--base-color);
    padding: 5px;
}

.pagercat .towgriderb .l_bixer .image_box .icon_ind img {
    max-width: 100%;
    width: auto;
    max-height: 100%;
    height: auto;
    position: relative;
    margin: auto;
    display: block;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    border-radius: 6px 3px 6px 3px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.pagercat .towgriderb .l_bixer .image_box h2 {
    position: relative;
    margin: 10px 8px;
    padding: 10px 8px;
    font-size: 20px;
    font-family: 'titr_r';
    display: block;
    top: 15px;
    font-weight: bolder;
    color: var(--base-color);
    text-shadow: 0px 0px 1px rgba(0, 0, 0, 1);
}

.pagercat .towgriderb .l_bixer ul.foot_ul {
    position: relative;
    margin: auto;
    display: block;
    width: 100%;
    height: auto;
    max-height: 100%;
}

.pagercat .towgriderb .l_bixer ul.foot_ul li {
    position: relative;
    display: grid;
    margin: 15px 5px;
    clear: both;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 0;
    width: 95%;
    height: 100px;
}

.pagercat .towgriderb .l_bixer ul.foot_ul li img {
    position: relative;
    display: block;
    grid-row: 1 / span 2;
    max-width: 100%;
    max-height: 100%;
    cursor: pointer;
    border-radius: 15px;
    border-left: 3px solid var(--base-color);
}

.pagercat .towgriderb .l_bixer ul.foot_ul li h2, .pagercat .towgriderb .l_bixer ul.foot_ul li h3 {
    position: relative;
    margin: auto;
    display: block;
    text-align: right;
    font-family: 'stedad';
    width: 95%;
    padding: 5%;
    direction: rtl;
    right: -15%;
}

.pagercat .towgriderb .l_bixer ul.foot_ul li h2 {
    font-size: 13px;
    color: #181818;
    cursor: pointer;
    border-bottom: 2px solid var(--base-color);
}

.pagercat .towgriderb .l_bixer ul.foot_ul li h3 {
    font-size: 12px;
    color: #373737;
}

.pagercat .towgriderb .r_bixer .box-controller {
    background: #2221211f;
    border: 1px solid transparent;
    width: 90%;
}

.pagercat .towgriderb .r_bixer .box-controller .fil_tix .switch-box .option.active {
    background-color: var(--color-accent-700);
}

.pagercat .towgriderb .r_bixer .box-controller .fil_tix .switch-box .option {
    margin: 5px;
}

.pagercat .towgriderb .r_bixer .custom-select .selected {
    margin: auto;
    padding: 13px 15px;
}

.pagercat .towgriderb .r_bixer .custom-select .options .option.active {
    background-color: var(--color-accent-600);
    color: white;
}

.pagercat .towgriderb .r_bixer .ajaxer_cat_box, .pagercat .towgriderb .l_bixer .ajaxer_cat_box {
    grid-template-columns: 33.3% 33.3% 33.3%;
    width: 85%;
}

slider .bak_re {
    position: absolute;
    margin: auto;
    display: block;
    width: 105%;
    height: 105%;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: -1;
    text-align: center;
    opacity: 0.5;
}

slider .bak_re img {
    position: relative;
    margin: auto;
    display: block;
    min-width: 100%;
    min-height: 100%;
    direction: ltr;
}

header.dextop_x {
    position: relative;
    margin: 5% auto 2% auto;
    display: block;
    background: linear-gradient(0deg, #f8f8f8 100%, #fff 0%);
    border-radius: 10px;
    width: min(90%, 90vW, 1280px);
    height: min(10%, 70px, 10vH);
    box-shadow: 4px 4px 8px #181818c2, -4px -4px 8px #f8f8f8a1, inset 4px 4px 8px #1818185c, inset -4px -4px 8px #f8f8f857;
}

header.dextop_x::before {
    content: "";
    position: absolute;
    background: radial-gradient(circle at 40% 30%, var(--base-color), transparent 70%);
    position: absolute;
    inset: 0;
    mix-blend-mode: screen;
    opacity: 0.5;
    margin: auto;
    width: 106%;
    height: 160%;
    z-index: -2;
    display: block;
    top: 0;
    bottom: 0;
    right: 0;
    left: -3%;
}

header.dextop_x::after {
    content: "";
    position: absolute;
    background: transparent;
    border: 3px solid #f8f8f866;
    width: 104%;
    height: 145%;
    margin: auto;
    z-index: -1;
    top: 0;
    bottom: 0;
    right: 0;
    left: -2%;
    border-radius: 15px;
}

header.dextop_x i {
    width: min(2.9vW, 45px);
    height: min(2.9vW, 45px);
    font-size: 45px;
    top: 0;
    bottom: 0px;
    cursor: pointer;
}

header.dextop_x i svg {
    filter: drop-shadow(-1px -2px 2px rgba(24, 24, 24, 0.40));
}

header.dextop_x i#basketer {
    right: 3%;
}

header.dextop_x i#user {
    right: 10%;
}

header.dextop_x i#search {
    right: 16%;
    z-index: 50;
}

header.dextop_x c.logo-bar {
    position: absolute;
    height: 85%;
    width: auto;
    display: block;
    top: 0;
    bottom: 0;
    left: 8%;
}

header.dextop_x c.logo-bar img {
    position: relative;
    margin: auto;
    height: 100%;
    width: auto;
    max-width: 100%;
}


header.dextop_x i#like {
    left: 8%;
}


header.dextop_x i#basketer contbask {
    position: absolute;
    margin: auto;
    padding: 5px 5px 10px 5px;
    background: var(--red-color);
    color: #f8f8f8;
    font-size: 15px;
    width: min(25px, 1.1vW);
    height: min(25px, 1.1vW);
    text-align: center;
    border-radius: 5px;
    overflow: hidden;
    font-family: 'per_add';
    top: 10px;
    left: -20px;
    box-shadow: -1px -2px 2px rgba(24, 24, 24, 0.40);
    cursor: pointer;
    opacity: 0.95;
}


header.dextop_x label {
    position: absolute;
    display: block;
    width: min(2.9vW, 45px);
    height: min(2.9vW, 45px);
    margin: auto;
    text-align: center;
    justify-content: center;
    min-height: 32px;
    top: 0;
    bottom: 0;
    left: 2.5%;
}

header.dextop_x label .menofot {
    display: block;
    position: relative;
    margin: auto;
    cursor: pointer;
    z-index: 400;
    padding: 5px;
    border-radius: 7px;
    width: 35px;
    height: 35px;
    right: 10px;
}

header.dextop_x label .menofot .menubar {
    position: relative;
    box-sizing: border-box;
    color: #3e3e3e;
    transition: 0.7s cubic-bezier(0.53, 0, 0.15, 1.3);
    z-index: 100;
    width: 100%;
    height: 100%;
    display: block;
    margin: auto;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
}

header.dextop_x label .menofot .containerz {
    position: absolute;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    top: 0px;
    bottom: 0;
    display: block;
    right: 0;
    left: 0;
    margin: auto;
    height: 100%;
    width: 100%;
}

header.dextop_x label .menofot .toggle {
    position: absolute;
    height: 30px;
    width: 30px;
    top: 0;
    bottom: 0;
    margin: auto;
    right: 0;
    left: 0;
}

header.dextop_x label .menofot .toggle:before {
    top: -20px !important;
}

header.dextop_x label .menofot .toggle:after {
    top: 20px !important;
}

header.dextop_x label .menofot .toggle:after, .toggle:before, span#line_3 {
    content: '';
    cursor: pointer;
    background: #3b3b3b;
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    transition: 0.6s cubic-bezier(0.53, 0, 0.15, 1.3);
    -webkit-transition: 0.6s cubic-bezier(0.53, 0, 0.15, 1.3);
    -moz-transition: 0.6s cubic-bezier(0.53, 0, 0.15, 1.3);
    width: 100%;
    height: 5px;
    border-radius: 3px;
}

header.dextop_x label .menofot .toggle.close:before {
    transform: rotate(-225deg);
    -webkit-transform: rotate(-225deg);
    top: 0 !important;
}

header.dextop_x label .menofot .toggle.close:after {
    transform: rotate(225deg);
    -webkit-transform: rotate(225deg);
    top: 0 !important;
}


.back_fix {
    position: absolute;
    width: 100%;
    height: auto;
    z-index: -2;
    margin: 0 auto auto auto;
    display: block;
    top: 0;
    right: 0;
    left: 0;
    background-image: -webkit-linear-gradient(to bottom, rgba(255, 122, 0, 0.40) 0%, rgba(255, 210, 150, 0.30) 50%, rgba(225, 225, 225, 0.20) 100%), url("/public/__Global/Files/image/ui/backheader.png");
    background-image: -moz-linear-gradient(to bottom, rgba(255, 122, 0, 0.40) 0%, rgba(255, 210, 150, 0.30) 50%, rgba(225, 225, 225, 0.20) 100%), url("/public/__Global/Files/image/ui/backheader.png");
    background-image: -o-linear-gradient(to bottom, rgba(255, 122, 0, 0.40) 0%, rgba(255, 210, 150, 0.30) 50%, rgba(225, 225, 225, 0.20) 100%), url("/public/__Global/Files/image/ui/backheader.png");
    background-image: linear-gradient(to bottom, rgba(255, 122, 0, 0.40) 0%, rgba(255, 210, 150, 0.30) 50%, rgba(225, 225, 225, 0.20) 100%), url("/public/__Global/Files/image/ui/backheader.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}


.infor_wallpaper {
    position: relative;
    margin: 19px auto auto auto;
    display: block;
    border-radius: 10px;
    width: min(90%, 90vW, 1280px);
    height: auto;
    background: url(/public/__Global/Files/image/ui/eiurytortrtrt.png) center 158% no-repeat;
    background-size: 92% auto;
}

.infor_wallpaper::after {
    content: "";
    position: absolute;
    background: transparent;
    border: 19px solid #E8C27A;
    width: 95%;
    height: 100%;
    margin: auto;
    z-index: -1;
    top: 5%;
    bottom: 0;
    right: 0;
    left: 0%;
    border-radius: 3px;
    box-shadow: 5px 5px 10px #18181885, -5px -5px 10px #85858585;
    transform: rotateZ(1deg) rotateX(10deg) translateZ(-1px);
}


.infor_wallpaper img.left_img {
    position: relative;
    margin: 0px 0px auto auto;
    display: block;
    max-width: 45%;
    z-index: 2;
}

.infor_wallpaper object {
    position: absolute;
    margin: auto;
    display: block;
    width: 55%;
    height: 55%;
    top: 0;
    background: transparent;
    opacity: 0.7;
    bottom: 0;
    z-index: 0;
    left: 5%;
}

.infor_wallpaper textbox {
    position: absolute;
    margin: auto;
    display: block;
    width: 55%;
    height: 50%;
    top: -5%;
    background: #ffffff9c;
    opacity: 1;
    bottom: 0;
    z-index: 1;
    left: 8%;
    border-radius: 15px;
    backdrop-filter: blur(5px) saturate(200%);
    -webkit-backdrop-filter: blur(5px) saturate(200%);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: inset 1px 1px 3px rgba(255, 255, 255, 0.4), inset -1px -1px 3px rgba(0, 0, 0, 0.2), 0 8px 24px rgba(0, 0, 0, 0.25);
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 30px rgba(0, 0, 0, 0.2);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    transform: rotateY(0.5deg) rotateX(0.5deg) rotateZ(2.5deg) translateZ(5px);
}

.infor_wallpaper textbox h1 {
    position: absolute;
    margin: auto;
    display: block;
    font-size: min(190%, 25px, 2vW);
    font-family: 'iran_b';
    font-weight: bolder;
    width: 90%;
    height: auto;
    right: 0;
    left: 0;
    text-align: center;
    padding: 10px;
    top: 5%;
    direction: rtl;
}

.infor_wallpaper textbox h1 b {
    position: relative;
    display: inline-block;
    direction: rtl;
    font-size: min(190%, 25px, 2vW);
    font-family: 'homa';
    font-weight: bolder;
    margin: auto 5px auto 5px;
    color: var(--base-color);
    text-shadow: 0px 0px 1px var(--color-accent-900);
}

.infor_wallpaper textbox h3 {
    position: absolute;
    margin: auto;
    display: block;
    font-size: min(140%, 16px, 1.1vW);
    font-family: 'stedad';
    width: 90%;
    height: auto;
    right: 0;
    left: 0;
    text-align: center;
    padding: 10px;
    top: 25%;
    direction: rtl;
    opacity: 0.7;
}

.infor_wallpaper textbox span {
    text-align: center;
    position: absolute;
    margin: auto;
    border: 1px solid #18181878;
    padding: 10px 20px;
    font-size: min(124%, 15px, 1.3vW);
    border-radius: 5px;
    cursor: pointer;
    font-family: 'naz_900';
    color: #f8f8f8;
    text-shadow: 0px 0px 1px #181818;
    bottom: 25%;
    box-shadow: 0 0 14px rgb(0 0 0 / 55%), 0 4px 12px rgb(0 0 0 / 27%);
}

.infor_wallpaper textbox span.waib-box {
    background: linear-gradient(118.96deg, #65cce6, #1b7c94);
    width: min(15%, 120px);
    left: 23%;
}

.infor_wallpaper textbox span.wallet-box {
    background: linear-gradient(118.96deg, var(--color-accent-100), var(--color-accent-700));
    width: min(20%, 135px);
    right: 23%;
}

.infor_wallpaper textbox span.wallet-box::before, .infor_wallpaper textbox span.waib-box::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 40% 30%, rgba(255, 255, 255, 0.25), transparent 70%);
    mix-blend-mode: screen;
    opacity: 0.6;
}

.infor_wallpaper textbox span.wallet-box::after, .infor_wallpaper textbox span.waib-box::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.3);
    opacity: 0.8;
}

.box3-textno {
    position: relative;
    margin: 55px auto;
    display: grid;
    width: min(90%, 90vW, 1280px);
    grid-template-columns: 33% 34% 33%;
    direction: rtl;
    justify-content: center;
}

.right_bit .box3-textno {
    margin: 5px auto 40px auto;
    grid-template-columns: 100%;
}

.box3-textno label {
    position: relative;
    margin: auto;
    display: block;
    width: calc(70% - 19px);
    padding: 25px;
    background: var(--base-color) url(/public/__Global/Files/image/ui/backheader.png) right center no-repeat;
    background-size: 500%;
}

.box3-textno label::after {
    content: "";
    position: absolute;
    background: transparent;
    border: 19px solid #E8C27A;
    width: 112%;
    height: 140%;
    margin: auto;
    z-index: -1;
    top: 10%;
    bottom: 0;
    right: -6%;
    left: 0%;
    border-radius: 3px;
    transform: rotateZ(0deg) rotateX(0deg) translateZ(5px);
    box-shadow: 5px 5px 10px #18181885, -5px -5px 10px #85858585;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.box3-textno label:nth-child(1)::after {
    transform: rotateZ(-3deg) rotateX(3deg) translateZ(3px);
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.box3-textno label:nth-child(3)::after {
    transform: rotateZ(3deg) rotateX(-3deg) translateZ(3px);
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.box3-textno label i {
    width: 40px;
    height: 40px;
    font-size: 40px;
    top: 0;
    bottom: 0;
    right: 10px;
    padding: 15px;
    background: rgba(24, 24, 24, 0.24);
    border-radius: 50%;
    border: 2px dashed var(--base-color);
    backdrop-filter: blur(5px) saturate(200%);
    -webkit-backdrop-filter: blur(5px) saturate(200%);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: inset 1px 1px 3px rgba(255, 255, 255, 0.4), inset -1px -1px 3px rgba(0, 0, 0, 0.2), 0 8px 24px rgba(0, 0, 0, 0.25);
    color: var(--base-color);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 30px rgba(0, 0, 0, 0.2);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.right_bit .box3-textno label i {
    width: 45px;
    height: 45px;
    font-size: 45px;
}

.right_bit .box3-textno label i img {
    border-radius: 25%;
}

.box3-textno label h3, .box3-textno label h1 {
    position: relative;
    margin: auto;
    display: block;
    padding: 5px 65px 5px 5px;
}

.box3-textno label h1 {
    color: #181818;
    font-size: min(16px, 1.1vW, 135%);
    font-family: 'naz_900';
    text-shadow: 0px 0px 1.5px #f8f8f8;
    direction: rtl;
}

.box3-textno label h3 {
    color: #3a3a3a;
    font-size: min(13px, 0.9vW, 115%);
    font-family: 'sans';
    text-shadow: 0px 0px 1.5px #acacac;
    direction: ltr;
    text-align: center;
}

.box2-textno {
    position: relative;
    margin: 90px auto 20px auto;
    display: grid;
    width: min(90%, 90vW, 1280px);
    grid-template-columns: 25% 75%;
    direction: rtl;
    justify-content: center;
}

.box2-textno ui.lister_mohtava, .right_bit ui.lister_mohtava {
    position: relative;
    display: block;
    margin: 2%;
    padding: 5%;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    width: 85%;
    border-left: 4px dashed #181818;
    border-radius: 0px 0px 0px 30%;
}

.right_bit ui.lister_mohtava {
    min-height: 300px;
}

.box2-textno ui.lister_mohtava li, .right_bit ui.lister_mohtava li {
    position: relative;
    display: block;
    margin: 10px 5px;
    padding: 10px 45px 10px 5px;
    text-align: right;
    font-size: 16px;
    font-family: 'homa';
    font-weight: 900;
    cursor: pointer;
    background: #E8C27A;
    border-radius: 5% 5px 7% 10px;
    border: 1px solid #9a9a9a;
    box-shadow: 5px 5px 10px #18181885, -5px -5px 10px #85858585;
    border-bottom: 2px solid #00477b5c;
    text-shadow: 0px 0px 1px #00477b;
    border-radius: 3px 3px 5px 25px;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.box2-textno ui.lister_mohtava li i, .right_bit ui.lister_mohtava li i {
    width: 20px;
    height: 20px;
    font-size: 20px;
    color: var(--base-color);
    top: 0;
    bottom: 0;
    right: 10px;
    cursor: pointer;
}

.right_bit ui.lister_mohtava li i {
    width: 28px;
    height: 28px;
    font-size: 28px;
    right: 5px;
    border-radius: 50%;
    overflow: hidden;
}

@keyframes pinHit {
    0% {
        transform: translateY(-40px) scale(1.2);
        filter: drop-shadow(0 10px 6px rgba(0, 0, 0, 0.3));
    }
    60% {
        transform: translateY(0) scale(0.9);
        filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.4));
    }
    80% {
        transform: translateY(-5px) scale(1.05);
        filter: drop-shadow(0 6px 4px rgba(0, 0, 0, 0.3));
    }
    100% {
        transform: translateY(0) scale(1);
        filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.35));
    }
}

slider pin {
    position: absolute;
    margin: auto;
    display: block;
    background: url(/public/__Global/Files/icon/Pinner.png) center center no-repeat;
    background-size: cover;
    width: calc(100px / 1.7);
    height: calc(165px / 1.7);
    z-index: 2;
    left: 10px;
    top: -75px;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.3));
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

slider pin.animation {
    animation: pinHit 0.3s ease-out 1;
}


.box2-textno ui.lister_mohtava li:hover, .right_bit ui.lister_mohtava li:hover {
    background: var(--color-accent-700);
    border-radius: 14% 17px 6px 54%;
    box-shadow: inset 0px 0px 5px #181818;
    color: #eee;
}

.box2-textno ui.lister_mohtava li.active, .right_bit ui.lister_mohtava li.active {
    background: var(--color-accent-900);
    border-radius: 60% 5px 26px 24%;
    box-shadow: 0px 0px 5px #181818;
    color: #fff;
}

.right_bit ui.lister_mohtava li.active small {
    color: #c8c3c3;
}

.box2-textno .righterbox {
    position: relative;
    margin: auto;
    display: block;
    width: calc(85% - 19px);
}

.slider_bix {
    position: relative;
    margin: auto;
    display: block;
    width: calc(100%);
    /*padding: 25px;*/
    /*background: #f8f8f8;*/
}

.slider_bix::after {
    content: "";
    position: absolute;
    background: transparent;
    border: 19px solid #E8C27A;
    width: 104%;
    height: 106%;
    margin: auto;
    z-index: -1;
    top: 1%;
    bottom: 0;
    right: -2%;
    left: 0%;
    border-radius: 3px;
    transform: rotateZ(0deg) rotateX(0deg) translateZ(-1px);
    box-shadow: 5px 5px 10px #18181885, -5px -5px 10px #85858585;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.slider_bix slider img {
    max-width: 100%;
    max-height: calc(100%);
    border-radius: 5px;
    transform: rotateZ(3deg) rotateX(-3deg) translateZ(3px);
}

.slider_bix slider:nth-child(2) span.dot {
    cursor: pointer;
    width: 18px;
    height: 18px;
    border: 4px solid #E8C27A;
    margin: auto 0.5%;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.slider_bix slider:nth-child(2) span.dot.active {
    cursor: pointer;
    width: 18px;
    height: 18px;
    border: 4px solid var(--base-color);
    background: #E8C27A;
    margin: auto 0.5%;
    border-radius: 50%;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.cathead .left_bit .slider_bix, .cathead .right_bit .slider_bix {
    max-width: min(90%, 770px, 70vW);
}


.cathead {
    position: relative;
    margin: 5% auto 2% auto;
    display: grid;
    width: min(90%, 90vW, 1280px);
    grid-template-columns: 70% 30%;
    direction: ltr;
}

.cathead .left_bit, .cathead .right_bit {
    position: relative;
    margin: auto;
    width: 100%;
    clear: both;
    height: auto;
    min-height: 100%;
}


header.dextop_x ul {
    position: absolute;
    display: flex;
    margin: auto;
    padding: 5px;
    top: 0;
    bottom: 0;
    right: 22%;
    direction: rtl;
}

header.dextop_x li {
    font-size: 18px;
    position: relative;
    margin: auto;
    padding: 10px 15px;
    font-family: 'homa';
    display: block;
    font-weight: 400;
    cursor: pointer;
    z-index: 2;
    color: #3B3B3C;
    text-shadow: 1px 1px 1px #181818;
}


titrer {
    position: relative;
    display: grid;
    margin: 35px auto 5px auto;
    clear: both;
    padding: 15px 45px 15px 15px;
    white-space: nowrap;
    overflow: hidden;
    direction: rtl;
}

titrer i {
    width: 25px;
    height: 25px;
    font-size: 25px;
    color: var(--base-color) !important;
    text-shadow: 0px 0px 1.5px #181818;
    top: 0;
    bottom: 0;
    right: 10px;
}

titrer b {
    position: relative;
    display: inline-block;
    margin: auto 5px;
    font-size: 18px;
    font-family: 'homa';
    color: #181818;
    top: -3px;
}

titrer::after {
    content: "";
    position: relative;
    display: inline-block;
    width: 100%;
    height: 1px;
    border-bottom: 4px dashed #181818;
    margin: auto;
    top: -4px;
}


.list_product {
    position: relative;
    margin: 10px auto 20px auto;
    width: min(90%, 90vW, 1280px);
    display: block;
}


.list_product.shegeft {
    background: #9b8e84a3;
    padding: 20px;
    border-radius: 5px;
    transform: rotateZ(0deg);
    margin: 170px auto 30px auto;
    z-index: 2;
    transform: rotateZ(0deg) rotateX(0deg) translateZ(2px);
}

.list_product.shegeft::after {
    content: "";
    position: absolute;
    background: transparent;
    border: 19px solid #E8C27A;
    width: 103%;
    height: 103%;
    margin: auto;
    z-index: -1;
    top: 0%;
    bottom: 0;
    right: 0%;
    left: -1.5%;
    border-radius: 3px;
    transform: rotateZ(-1deg) rotateX(-1deg) translateZ(-1px);
    box-shadow: 5px 5px 10px #18181885, -5px -5px 10px #85858585;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.list_product i.badbadak {
    width: 100px;
    height: 100px;
    display: block;
    top: -10%;
    background: #c80404;
    padding: 22px;
    z-index: 5;
    right: -5%;
    border-radius: 50%;
    border: 2px dashed var(--base-color);
    backdrop-filter: blur(5px) saturate(200%);
    -webkit-backdrop-filter: blur(5px) saturate(200%);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: inset 1px 1px 3px rgba(255, 255, 255, 0.4), inset -1px -1px 3px rgba(0, 0, 0, 0.2), 0 8px 24px rgba(0, 0, 0, 0.25);
    color: var(--base-color);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 30px rgba(0, 0, 0, 0.2);
}

.gridebox {
    position: relative;
    margin: auto auto 20px auto;
    display: grid;
    grid-template-columns: calc(25% - 5px) calc(25% - 5px) calc(25% - 5px) calc(25% - 5px);
    gap: 35px 5px;
    padding: 0px;
    border-radius: 18px;
}

.grden {
    border-radius: 10px;
    border-left: 1px solid #afaca9;
    border-bottom: 1px solid #b9b7b3;
    width: 93%;
    position: relative;
    margin: auto auto calc(10% + 25px) auto;
    clear: both;
    height: 92%;
    background: #e2e2e2;
    box-shadow: 6px 6px 12px rgb(0 0 0 / 18%), -5px -5px 10px rgb(255 255 255 / 20%), 4px 4px 8px #18181870, -4px -4px 8px #f8f8f83d;
    padding: 1.8% 1.8% calc(1.8% + 25px) 1.8%;
}

.grden .imger {
    position: relative;
    margin: 5%;
    padding: 2%;
    clear: both;
    /*background: var(--base-color) url(/public/__Global/Files/image/ui/backheader.png) 0% 50% no-repeat;*/
    border-radius: 20px;
    background-size: auto;
    transform-style: preserve-3d;
    background-blend-mode: overlay;
    perspective: 50vW;
    perspective-origin: center;
}

.grden .imger::after {
    content: "";
    position: absolute;
    background: transparent;
    border-top: 19px solid #fdd1a9;
    border-bottom: 19px solid #d4ad89;
    border-left: 19px solid #eeb785;
    border-right: 19px solid #fbe2cc;
    width: 101%;
    height: 101%;
    margin: auto;
    z-index: 1;
    top: 2%;
    bottom: 0;
    right: 0%;
    left: -2%;
    opacity: 0;
    display: none;
    border-radius: 3px;
    transform: rotateZ(1deg) rotateX(0deg) translateZ(10px);
    box-shadow: 5px 5px 10px #18181885, -5px -5px 10px #1d1d1d85, inset 5px 5px 10px #18181885, inset -5px -5px 10px #1d1d1d85;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.grden h3 {
    overflow: hidden;
}

.grden .imger:hover::after {
    width: 95%;
    height: 95%;
    top: 0%;
    bottom: 0%;
    right: 0%;
    left: 0%;
    border-radius: 50%;
    opacity: 0.1;
    transform: rotateZ(360deg) rotateX(0deg) translateZ(1px) scale(0.4);
}

.grden .imger img {
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    position: relative;
    margin: auto;
    display: block;
    padding: 5px;
    box-shadow: 0px 0px 10px #181818 inset;
    border: 2px solid #989898;
    border-radius: 30px 15px 30px 15px;
    corner-shape: bevel notch scoop notch;
    transform: rotateZ(0deg) rotateX(0deg) translateZ(4px) scale(1.0);
    background-blend-mode: color;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.grden .imger:hover {
    padding: 0%;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.grden .imger:hover img {
    transform: rotateZ(-2deg) rotateX(0deg) translateZ(8px) scale(1.2);
    background: transparent !important;
    border: 2px solid transparent !important;
    box-shadow: 0px 0px 0px transparent inset !important;
    border-radius: 50%;
    corner-shape: round;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    filter: drop-shadow(-10px 10px 5px #181818);
}

.grden h1 {
    position: relative;
    margin: 10px auto;
    padding: 10px 15px;
    text-align: right;
    direction: rtl;
    font-family: 'homa';
    font-size: min(122%, 1.1vW, 17px);
    font-weight: bolder;
    color: #181818;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.grden:hover h1 {
    color: var(--color-accent-900);
}

.grden p {
    position: absolute;
    margin: 20px auto 20px auto;
    background: radial-gradient(circle at 40% 30%, #707070, #5d5d5d 70%);
    box-shadow: 0px 4px 8px #181818b8, 0px -4px 8px #2e2e2e70;
    text-align: center;
    display: block;
    padding: 10px 15px 10px 35px;
    font-size: min(120%, 16px, 1.1vW);
    font-family: 'iran_b';
    text-shadow: 0px 0px 2px #e2e2e2;
    max-width: min(170px, 75%);
    border: 1px solid #e2e2e2;
    border-radius: 10px;
    cursor: pointer;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    color: #f8f8f8;
    right: 19px;
    bottom: -40px;
}

.grden:hover p {
    background: radial-gradient(circle at 40% 30%, var(--color-accent-500), var(--color-accent-800) 70%);
    box-shadow: 0px 4px 8px #181818b8, 0px -4px 8px var(--color-accent-700);
    border: 1px solid var(--base-color);
    text-shadow: 0px 0px 2px #f8f8f8;
    color: #181818;

}

.grden p:hover {
    background: radial-gradient(circle at 40% 30%, var(--color-accent-800), var(--color-accent-500) 70%);
    box-shadow: 0px -4px 8px #181818b8, 0px 4px 8px var(--color-accent-700);
}

.grden p i {
    width: 15px;
    height: 15px;
    font-size: 15px;
    top: 0;
    bottom: 0;
    left: 5%;
    text-shadow: 0px 0px 2px #000000ba;
    color: #f8f4f0f7;
    cursor: pointer;
}

.grden h3 e {
    position: relative;
    margin: 2% auto;
    padding: 5px 10px;
    text-align: left;
    display: block;
    direction: rtl;
    font-family: 'homa';
    font-size: 16px;
    color: var(--green-color);
}

.grden h3 d.nomojod {
    position: relative;
    margin: 2% auto;
    padding: 5px 10px;
    text-align: right;
    display: block;
    direction: rtl;
    font-family: 'homa';
    font-size: 16px;
    color: var(--red-color);
}

.grden h3 d.adminer, article d.adminer {
    position: relative;
    margin: 15px auto 10px auto;
    background: radial-gradient(circle at 40% 30%, #329cd1, #07a6aa 70%);
    box-shadow: 0px 4px 8px #181818b8, 0px -4px 8px #0997b5;
    text-align: center;
    display: block;
    padding: 10px;
    font-size: min(120%, 16px, 1.1vW);
    font-family: 'iran_b';
    text-shadow: 0px 0px 2px #f8f8f8;
    max-width: min(170px, 75%);
    border: 1px solid #009fff;
    border-radius: 10px;
    cursor: pointer;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    color: #f8f8f8;
}

.grden h3 d.adminer:hover {
    background: radial-gradient(circle at 40% 30%, #07a6aa, #329cd1 70%);
    box-shadow: 0px -4px 8px #181818b8, 0px 4px 8px #0997b5;
}

.grden h3 d.adminer i {
    width: 15px;
    height: 15px;
    font-size: 15px;
    top: 0;
    bottom: 0;
    left: 5%;
    text-shadow: 0px 0px 2px #000000ba;
    color: #f8f4f0f7;
    cursor: pointer;
}

.grden h3 d.offed {
    position: relative;
    margin: 2% auto;
    padding: 0px 10px;
    text-align: left;
    display: block;
    direction: rtl;
    font-family: 'homa';
    font-size: 13px;
    color: #646464;
    text-decoration-line: line-through;
    text-decoration-color: #ff0000;
}

.grden off::before {
    content: "";
    position: absolute;
    inset: -10px;
    background: radial-gradient(circle at 30% 0%, #22d3ee, transparent 60%),
    radial-gradient(circle at 80% 100%, #a855f7, transparent 60%);
    filter: blur(14px);
    opacity: .7;
    z-index: -1;
}

.grden off:hover {
    transform: scale(1.05);
    box-shadow: 0 26px 40px rgba(15, 23, 42, 1), 0 0 40px rgba(129, 140, 248, 0.9);
    filter: saturate(1.3);
}

.grden off {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 70px;
    height: 70px;
    font-size: 20px;
    font-family: 'stedad_b';
    font-weight: 700;
    color: #fff;
    z-index: 5;
    background: linear-gradient(135deg, #e90e0e, #f16363, #f75555);
    clip-path: polygon(0% 0%, 100% 0%, 115% 100%, 50% 75%, 0% 100%, 9% 70%);
    box-shadow: 0 18px 30px rgba(15, 23, 42, 0.9), 0 0 25px rgb(248 56 56 / 60%), -2px 2px 4px #181818a3;
    position: absolute;
    cursor: pointer;
    transition: .25s;
    direction: ltr;
    border-radius: 15%;
    margin: auto;
    top: -1%;
    left: 10%;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.grden:hover off {
    transform: translateY(5px) scale(1.02);
    background: linear-gradient(70deg, #e90e0e, #f16363, #f75555);
    clip-path: polygon(0% 0%, 130% 0%, 100% 117%, 42% -5%, 140% 96%, -36% 136%);
}

.grden .addbasketer {
    position: absolute;
    margin: auto;
    padding: 5px;
    width: 40px;
    height: 40px;
    background: var(--green-color);
    border-radius: 50%;
    top: 5%;
    right: 5%;
    box-shadow: 0px 0px 5px #181818;
    cursor: pointer;
    z-index: 10;
    display: none;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.grden:hover .addbasketer {
    display: block;
}

.grden .addbasketer i {
    width: 35px;
    height: 35px;
    font-size: 35px;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    filter: drop-shadow(-2px -2px 4px #181818);
    cursor: pointer;
    z-index: 2;
}

ul.panel_menu {
    position: relative;
    margin: auto;
    display: block;
    height: auto;
    width: 100%;
    clear: both;
    z-index: 0;
    left: -39px;
    overflow: hidden;
    overflow-y: auto;
    height: calc(100% - 50px);
}

ul.panel_menu li {
    position: relative;
    direction: rtl;
    display: block;
    margin: 10px 15px;
    font-family: 'sans_b';
    text-align: right;
    padding: 5px 30px 5px 20px;
    color: #161616;
    font-size: 15px;
    border-radius: 5px;
    cursor: pointer;
    border-bottom: 2px solid #eee;
    -moz-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

ul.panel_menu li:hover {
    color: #181818;
    border-bottom: 2px solid #626262;
    background: #f0f0f0;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

ul.panel_menu li i {
    top: -3px;
    bottom: 0;
    width: 16px;
    height: 16px;
    font-size: 16px;
    color: #171717;
    right: 7px;
}

ul.panel_menu li ul.in_menu {
    position: relative;
    margin: auto;
    display: none;
    height: auto;
    width: 100%;
    clear: both;
    z-index: 0;
    -webkit-animation-name: rot_alrt;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-iteration-count: 1;
    -moz-animation-name: rot_alrt;
    -moz-animation-duration: 0.5s;
    -moz-animation-iteration-count: 1;
    animation-name: rot_alrt;
    animation-duration: 0.5s;
    animation-iteration-count: 1;
}

ul.panel_menu li ul.in_menu li {
    position: relative;
    direction: rtl;
    display: block;
    margin: 10px 0px;
    font-family: naz_300;
    text-align: right;
    padding: 5px 10px 5px 25px;
    color: #2e2e2e;
    font-size: 14px;
    border-right: 2px solid var(--base-color);
    border-radius: 3px;
    cursor: pointer;
    background: #f6f6f6;
}

ul.panel_menu li ul.in_menu li:hover {
    border-right: 3px solid var(--base-color);
}

ul.panel_menu li ul.in_menu li i {
    color: var(--base-color);
    width: 15px;
    height: 15px;
    font-size: 15px;
    top: 0;
    right: unset;
    left: 10px;
}

/*ul.bask_list li pre {*/
/*    position: relative;*/
/*    display: block;*/
/*    margin: auto;*/
/*    text-align: center;*/
/*    justify-content: center;*/
/*    padding: 5px 15px;*/
/*    font-size: 13px;*/
/*    color: var(--red-color);*/
/*}*/

/*ul.bask_list li pre i {*/
/*    width: 15px;*/
/*    height: 15px;*/
/*    font-size: 15px;*/
/*    top: 0;*/
/*    right: -1px;*/
/*    bottom: 0;*/
/*}*/

.basket_box ul.bask_list {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 10px auto;
    padding: 0 5px;
}

.basket_box ul.bask_list li {
    position: relative;
    display: grid;
    grid-template-columns: 80px auto 80px;
    background: #fff;
    border-radius: 14px;
    padding: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
    align-items: center;
    transition: .2s ease;
}

.basket_box ul.bask_list li:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .12);
}

.basket_box ul.bask_list li span {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.basket_box ul.bask_list li span img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .18);
}

.basket_box ul.bask_list li span h1 {
    margin: 4px 0 6px 0;
    font-size: 14px;
    font-family: 'sans_b';
    color: #222;
    line-height: 1.4;
}

.basket_box ul.bask_list li span h3 {
    margin: 2px 0;
    font-size: 12px;
    font-family: 'sans';
    color: #555;
}

.basket_box ul.bask_list li span.inf {
    text-align: center;
    padding: 0;
}

.basket_box ul.bask_list li span.inf h3:nth-child(1) {
    color: var(--base-color);
    font-size: 13px;
    font-family: 'sans_b';
}

.basket_box ul.bask_list li span.inf h3:nth-child(2) {
    color: var(--box-color);
    font-size: 12px;
}

h3.box_color_2 {
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .15);
    font-size: 13px;
    margin: 10px 5px 25px 5px;
    padding: 12px;
    color: var(--boarder-color);
}

h3.box_color_2 b {
    color: var(--base-color);
}

.basket_box ul.bask_list li pre {
    display: flex;
    justify-content: center;
    padding: 6px 15px;
    font-size: 13px;
    color: var(--red-color);
}

.basket_box ul.bask_list li pre i {
    width: 16px;
    height: 16px;
    font-size: 16px;
}

.basket_box ul.bask_list li span:last-child {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
}

.basket_box ul.bask_list li span:last-child i,
.basket_box ul.bask_list li span:last-child svg {
    cursor: pointer;
    transition: .15s ease;
}

.basket_box ul.bask_list li span:last-child i:hover,
.basket_box ul.bask_list li span:last-child svg:hover {
    transform: scale(1.2);
}


.cathead .right_bit .box-controller {
    display: block;
    background: #E8C27A;
    width: 70%;
    margin: 30px auto;
    box-shadow: 5px 5px 10px #18181885, -5px -5px 10px #85858585;
    border-radius: 15px 15%;
}


.cathead .right_bit .box-controller::after {
    content: "";
    position: absolute;
    background: transparent;
    border: 19px solid #E8C27A;
    width: 118%;
    height: 122%;
    margin: auto;
    z-index: -1;
    top: 1%;
    bottom: 0;
    right: -9%;
    left: 0%;
    border-radius: 3px;
    box-shadow: 5px 5px 10px #18181885, -5px -5px 10px #85858585, inset 5px 5px 10px #18181885, inset -5px -5px 10px #85858585;
    transform: rotateZ(-1.2deg) rotateX(3deg) translateZ(-1px);
}

.cathead .left_bit .gridebox {
    width: 100%;
    grid-template-columns: calc(33.33% - 15px) calc(33.33% - 15px) calc(33.33% - 15px);
    gap: 35px 15px;
}

.cathead .left_bit .list_product {
    margin-top: 60px;
    margin-bottom: 40px;
}

.cathead .left_bit .listen_cater {
    position: relative;
    margin: 40px auto;
    width: 85%;
    border: 19px solid #E8C27A;
    box-shadow: 5px 5px 10px #18181885, -5px -5px 10px #85858585;
    right: -2%;
    background: var(--base-color) url('/public/__Global/Files/image/ui/backheader.png') right center no-repeat;
    background-size: 500%;
}

.wallmenu {
    position: absolute;
    display: block;
    width: min(6%, 6vW, 60px);
    height: auto;
    box-shadow: rgba(24, 24, 24, 0.76) 4px 4px 8px, rgba(248, 248, 248, 0.63) -4px -4px 8px, rgba(24, 24, 24, 0.36) 4px 4px 8px inset, rgba(248, 248, 248, 0.34) -4px -4px 8px inset;
    margin: 10% auto;
    background: linear-gradient(0deg, rgb(248, 248, 248) 100%, rgb(255, 255, 255) 0%);
    border-radius: 0px 10px 10px 0px;
    top: 0%;
    left: 0%;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    -webkit-animation-name: gotosh;
    -webkit-animation-duration: 1.5s;
    -webkit-animation-iteration-count: 1;
    -moz-animation-name: gotosh;
    -moz-animation-duration: 1.5s;
    -moz-animation-iteration-count: 1;
    animation-name: gotosh;
    animation-duration: 1.5s;
    animation-iteration-count: 1;
}


@-webkit-keyframes gotosh {
    0% {
        left: -50%;
    }
    100% {
        left: 0%;
    }
}

@-moz-keyframes gotosh {
    0% {
        left: -50%;
    }
    100% {
        left: 0%;
    }
}

@keyframes gotosh {
    0% {
        left: -50%;
    }
    100% {
        left: 0%;
    }
}


.wallmenu label {
    position: relative;
    margin: auto;
    display: block;
    clear: both;
    width: 100%;
    height: auto;
    border-bottom: 1px solid #5b5b5b85;
}

.wallmenu label i {
    position: relative;
    margin: auto;
    display: block;
    padding: 10px;
    width: 70%;
    height: auto;
    cursor: pointer;
    color: #181818
}

.wallmenu label i * {
    cursor: pointer;
}

.wallmenu cloud {
    position: absolute;
    top: 10px;
    left: 80%;
    transform: translateX(-5%) translateY(-100%);
    background: #414141;
    padding: 10px 14px;
    border-radius: 30px 30px 30px 3px;
    box-shadow: rgba(0, 0, 0, 0.25) 0 4px 12px;
    font-size: 0.80rem;
    color: #f8f8f8;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: all .35s ease;
    z-index: 100;
}

.wallmenu cloud::after {
    content: "";
    position: absolute;
    bottom: -35%;
    left: 8px;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: #414141 transparent transparent transparent;
}

.wallmenu label.show-cloud cloud {
    opacity: 1;
    transform: translateX(0%) translateY(-120%);
}

.wallmenu label:hover cloud {
    opacity: 1;
    transform: translateX(0%) translateY(-120%);
}


.img_boxer {
    position: relative;
    margin: auto;
    display: grid;
    grid-template-columns: 50% 50%;
    clear: both;
    width: min(90%, 90vw, 1280px);
    height: auto;
    direction: rtl;
}

.img_boxer .imgtres {
    position: relative;
    margin: 20px;
    display: block;
    clear: both;
    width: 70%;
    transform-style: preserve-3d;
    background-blend-mode: overlay;
    perspective: 50vW;
    perspective-origin: center;
}

.img_boxer .imgtres img.big_imager {
    position: relative;
    display: block;
    width: calc(100% - 4% - 40px);
    height: auto;
    padding: 2%;
    border-radius: 20px;
    margin: auto;
    transform: rotateZ(0deg) rotateX(0deg) rotateY(0deg) translateZ(5px);
    Z-INDEX: 0;
}

.img_boxer .imgtres::after {
    content: "";
    position: absolute;
    background: transparent;
    border-top: 19px solid #fdd1a9;
    border-bottom: 19px solid #d4ad89;
    border-left: 19px solid #eeb785;
    border-right: 19px solid #fbe2cc;
    width: 105%;
    height: 110%;
    margin: auto;
    z-index: 0;
    top: 1%;
    bottom: 0;
    right: -2.5%;
    left: 0%;
    border-radius: 3px;
    box-shadow: 5px 5px 10px #18181885, -5px -5px 10px #85858585, inset 5px 5px 10px #18181885, inset -5px -5px 10px #85858585;
    transform: rotateZ(5deg) rotateX(0deg) rotateY(0deg) translateZ(-2px);
    pointer-events: none;
    box-sizing: border-box;
}

magnifier-box {
    position: absolute;
    inset: 0;
    pointer-events: none;
    transform: rotateZ(0deg) rotateX(0deg) translateZ(10px);
    Z-INDEX: 10;
}

.m-big {
    position: absolute;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.4), 0 0 25px rgba(0, 0, 0, 0.8);
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s ease-out;
    z-index: 200;
    background-repeat: no-repeat;
}

.img_boxer .other_images {
    position: absolute;
    margin: auto;
    display: block;
    width: 30%;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
}

.img_boxer .other_images {
    position: absolute;
    margin: auto;
    display: block;
    width: 30%;
    height: 100%;
    top: 5%;
    bottom: 0;
    left: -40%;
    z-index: 2;
    scrollbar-color: transparent transparent;
}

.img_boxer .other_images img {
    position: relative;
    border: 12px solid #E8C27A;
    border-radius: 50%;
    margin: 10px auto;
    width: calc(90% - 44px);
    height: auto;
    max-height: 30%;
    padding: 10px;
    background: #fff;
    cursor: pointer;
    box-shadow: 4px 4px 8px #1818188c, -4px -4px 8px #c58f3087, inset -4px -4px 8px #1818188c, inset 4px 4px 8px #b8855387;
    display: block;
}


.img_boxer .imgtres .nav-buttons {
    top: unset;
    bottom: -5%;
    z-index: 5;
    right: -7%;
    transform: translateZ(6px);
    width: 110%;
}

.img_boxer .imgtres .nav-buttons button {
    border: 3px solid var(--base-color);
    cursor: pointer;
    padding: 15px;
    -moz-transition: all 1.5s ease;
    -webkit-transition: all 1.5s ease;
    transition: all 1.5s ease;
    animation: floatText 7s ease-in-out infinite;
}

.ifor_boxer {
    position: relative;
    display: block;
    width: 90%;
    min-height: 90%;
    height: auto;
    margin: auto;
}

svg foreignObject p span {
    position: relative;
    display: block;
    margin: auto 5px;
    font-size: 15px;
}

svg foreignObject p span i {
    position: relative;
    display: inline-block;
    width: 25px;
    height: 25px;
    margin: auto 5px;
    top: 6px;
}

.img_boxer .ifor_boxer pin {
    position: absolute;
    margin: auto;
    display: block;
    background: url(/public/__Global/Files/icon/Pinner.png) center center no-repeat;
    background-size: cover;
    width: calc(100px / 3);
    height: calc(165px / 3);
    z-index: 2;
    left: 45px;
    top: 10px;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.3));
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

ui.lister_mohtava li b.takhfif {
    position: absolute;
    margin: auto;
    padding: 7px;
    font-size: 16px;
    border-radius: 10px 50% 10px 50%;
    background: red;
    color: #f8f8f8;
    left: 15px;
    top: 0px;
    height: 30px;
    bottom: 0;
    box-shadow: 3px 3px 6px #18181899;
    width: 30px;
    text-align: center;
}

ui.lister_mohtava li b.pricee {
    left: 20%;
    position: absolute;
    font-size: 13px;
    color: #ececec;
    top: 3px;
    direction: ltr;
    text-decoration: line-through;
    text-decoration-color: red;
    text-shadow: 0px 0px 1px #181818;
    opacity: 0.8;
}

ui.lister_mohtava li b.unpirce {
    position: relative;
    font-size: 16px;
    direction: ltr;
    display: block;
    color: #fff;
    text-align: right;
}

.loader#lodingir {
    position: relative;
    margin: 5% auto;
    display: block;
    width: 100%;
    height: auto;
    min-height: max(100%, 80vH, 300px);
    clear: both;
}

.box3d {
    position: relative;
    width: 95%;
    max-width: 1024px;
    height: auto;
    min-height: min(85px, 8vH);
    margin: auto auto 5% auto;
    padding: 0;
    display: block;
}

.box3d__panel {
    position: absolute;
    display: block;
    left: 0;
    right: 0;
    top: 0px;
    bottom: 0px;
    width: 102%;
    height: 50%;
    opacity: 1;
    border-radius: 14px;
    background: radial-gradient(circle at top, var(--color-accent-300) 0%, var(--color-accent-500) 40%, var(--color-accent-800) 100%);
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.9);
}

.box3d__panel::before, .box3d__panel::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.9) 40%, rgba(255, 255, 255, 0.9) 60%, transparent 100%);
    opacity: 0.9;
    filter: blur(1px);
}

.box3d__panel::before {
    top: -3px;
}

.box3d__panel::after {
    bottom: -3px;
}

.box3d__tip {
    position: absolute;
    margin: auto;
    right: 10%;
    top: 50%;
    width: 15%;
    height: 95%;
    transform: translateY(-50%) rotateY(180deg);
    background: linear-gradient(135deg, var(--color-accent-400), var(--base-color));
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.box3d__orbit {
    position: absolute;
    right: 8px;
    top: 0;
    margin: auto;
    bottom: 0;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 30% 20%, #ffb347 0%, #ff8a2a 40%, #e0242b 100%);
    box-shadow: 0 18px 32px rgba(0, 0, 0, 0.8), 0 0 0 2px rgba(255, 255, 255, 0.12), inset 0 0 24px rgba(0, 0, 0, 0.7);
}

.box3d__orbit::before {
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 0 18px rgba(255, 255, 255, 0.25), 0 0 32px rgba(255, 138, 42, 0.4);
}

.box3d__orbit-inner {
    position: relative;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 20%, #ffffff 0%, #f5f5f5 40%, #e0e0e0 100%);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.5), inset 0 0 10px rgba(255, 255, 255, 0.9);
}

.box3d__orbit i, .box3d__title i {
    position: absolute;
    width: 55%;
    height: 55%;
    margin: auto;
    padding: 2%;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 10;
    border-radius: 50%;
}

.box3d__orbit-inner::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 6px;
    width: 16px;
    height: 10px;
    border-radius: 999px;
    background: radial-gradient(circle at 0 0, rgba(255, 255, 255, 0.95) 0%, transparent 70%);
    opacity: 0.9;
}

.box3d__orbit::after {
    content: "";
    position: absolute;
    inset: 18px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 20%, #ffe9c7 0%, #ffc46b 40%, #ff8a2a 100%);
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.6), inset 0 0 16px rgba(255, 255, 255, 0.7);
}

.box3d__title {
    position: absolute;
    left: 5px;
    top: 0;
    bottom: 0;
    width: 40px;
    height: 40px;
    font-size: 1rem;
    font-weight: 600;
    color: #333333;
}

.box3d__title i {
    right: unset;
    left: 5px;
    width: 70%;
    height: 70%;
}

.box3d__content {
    position: relative;
    margin: 20px auto;
    height: 75px;
    width: 75%;
    padding: 10px 16px;
    right: 5%;
    border-radius: 10px;
    background: linear-gradient(145deg, #ffe9c6, #be6920);
    box-shadow: 0 14px 26px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.06);
    color: #e9ecf5;
    font-size: 0.9rem;
}

.box3d__content ul.colorbind, .box3d__content ul.sizerbind {
    position: relative;
    display: flex;
    margin: auto 0;
    height: 100%;
    width: 100%;
    flex-direction: row-reverse;
    flex-wrap: nowrap;
    align-content: space-around;
    justify-content: right;
    align-items: center;
    text-align: right;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.box3d__content ul.colorbind::-webkit-scrollbar, .box3d__content ul.sizerbind::-webkit-scrollbar {
    display: none;
}

.box3d__content ul.colorbind li {
    position: relative;
    max-height: 80%;
    max-width: 40%;
    width: 50px;
    height: 50px;
    background: #f8f8f8;
    border: 8px solid #E8C27A;
    display: block;
    box-shadow: 4px 4px 6px #18181896, inset 4px 4px 6px #181818a3;
    cursor: pointer;
    border-radius: 5px;
    margin: auto 8px;
    flex: 0 0 auto;
}

.box3d__content ul.colorbind li.this {
    border: 8px solid #e4fcd4;
    box-shadow: -4px -4px 6px #18181896, inset -4px -4px 6px #181818a3;
    cursor: help;
}

.box3d__content ul.sizerbind li {
    position: relative;
    max-height: 80%;
    max-width: 30%;
    width: auto;
    height: auto;
    background: #f8f8f87a;
    border: 8px solid #E8C27A;
    display: block;
    box-shadow: 4px 4px 6px #18181896, inset 4px 4px 6px #181818a3;
    cursor: pointer;
    font-size: 20px;
    color: #181818;
    text-shadow: 0px 0px 1px #f8f8f8;
    text-align: center;
    padding: 5px 10px 0px 10px;
    top: 0px;
    border-radius: 5px;
    margin: auto 8px;
    flex: 0 0 auto;
}

.box3d__content ul.sizerbind li.this {
    border: 8px solid #e4fcd4;
    box-shadow: -4px -4px 6px #18181896, inset -4px -4px 6px #181818a3;
    cursor: help;
    background: var(--green-color);
    color: #f8f8f8;
    text-shadow: 0px 0px 1px #181818;
}

.box3d__more {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 26px;
    height: 26px;
    background: #ffffffcc;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    z-index: 20;
    backdrop-filter: blur(4px);
    transition: all .25s ease;
}

.box3d__more:hover {
    background: #f2f2f2;
}

.box3d__popover {
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translate(-50%, -100%);
    min-width: 160px;
    max-width: 240px;
    background: #ffffffee;
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(6px);
    opacity: 0;
    pointer-events: none;
    transition: all .25s ease;
    z-index: 30;
}

.box3d__popover.show {
    opacity: 1;
    pointer-events: auto;
}

.box3d__popover ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.box3d__popover ul li {
    padding: 6px 10px;
    margin: 4px 0;
    background: #f7f7f7;
    border-radius: 6px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    transition: all .2s ease;
}

.box3d__popover ul li:hover {
    background: #eaeaea;
}


.video_player {
    position: relative;
    display: block;
    margin: 25px auto;
    width: calc(100% - 16px);
    max-width: min(1280px, 97vW);
    max-height: min(calc(100% - 16px), 97vH);
    clear: both;
    height: calc(100% - 16px);
    border-radius: 9px;
    z-index: 1;
    transform: translateZ(1px);
    /*background: var(--surface) url('/public/Myball/Scripts/front/others/old projects/jalebsource/Copilot_20260719_000450.jpg') center center repeat;*/
    /*box-shadow: inset 6px 6px 10px rgba(0, 0, 0, 0.16), inset -6px -6px 10px rgb(13 12 12 / 68%);*/
    padding: 8px;
}

.manbase {
    position: relative;
    margin: auto;
    display: block;
    width: 100%;
    /*height: 200px;*/
}


#divLawyer {
    height: 240px;
    width: 240px;
    background: url('/public/Myball/Scripts/front/others/old projects/jalebsource/files_chamancanvas/lawyer_sprite.png') no-repeat 0;
    position: absolute;
    bottom: -5%;
    left: 5%;
    background-position: -250px 0px;
    cursor: pointer;
    z-index: 10;
    -moz-transition: all 0s ease;
    -webkit-transition: all 0s ease;
    transition: all 0s ease;
}

.formbayse {
    position: relative;
    display: block;
    margin: 10px 2%;
    clear: both;
}

.formbayse input {
    position: relative;
    border: unset;
    background: var(--bg);
    border-radius: 15px;
    margin: 15px 20px;
    color: #181818;
    width: calc(100% - 125px);
    display: block;
    font-size: 14px;
    font-family: 'stedad';
    text-align: right;
    direction: rtl;
    box-shadow: 6px 6px 10px rgba(0, 0, 0, 0.16), -6px -6px 10px rgb(0 0 0 / 35%);
    padding: 15px 60px 15px 15px;
    text-shadow: 1px -1px 1px #f8f8f8;
    -moz-transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
    z-index: 25;
}

.formbayse input::placeholder {
    color: #636363;
    text-shadow: 1px -1px 1px #f8f8f8, -1px 1px 1px #181818;
}

.formbayse i {
    width: 30px;
    height: 30px;
    font-size: 30px;
    top: 0;
    bottom: 0;
    right: 50px;
}

.box_aitext {
    width: 88%;
    height: 253px;
    background-color: #506c55;
    border: 12px solid #ce935f;
    border-right: 12px solid #a4693c;
    border-bottom: 12px solid #a4693c;
    box-shadow: inset 0px 0px 15px #101010c9, 0 10px 20px rgba(0, 0, 0, 0.5);
    display: block;
    justify-content: center;
    align-items: center;
    color: #ecd5b8;
    margin: 15px auto;
    border-radius: 5px;
}

.box_aitext h1 {
    position: relative;
    margin: 10px 5%;
    padding: 5px;
    font-family: 'kalame_b';
    font-size: 22px;
    text-align: right;
    direction: rtl;
    color: rgb(225 223 195);
    text-shadow: 1px -1px 1px #000, -1px 1px #fff;
}

.box_aitext div#AIqustion_text {
    position: relative;
    margin: 10px 5%;
    padding: 5px;
    font-family: 'stedad_b';
    font-size: 18px;
    text-align: right;
    direction: rtl;
    color: rgb(199 198 180);
    text-shadow: 1px -1px 1px #000, -1px 1px #fff;
    height: 65%;
    user-select: text;
    overflow: hidden;
}

.box_aitext div#AIqustion_text a {
    color: #ffd700;
    text-decoration: underline;
    cursor: pointer;
}

.nx-footer {
    background: linear-gradient(135deg, #ff7a00, #ff4f00);
    padding: 10px 8vw 15px;
    color: #fff;
    font-family: 'IRANSans', sans-serif;
    position: relative;
    overflow: hidden;
}

.nx-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.25), transparent 60%),
    radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.18), transparent 60%);
    opacity: 0.25;
    mix-blend-mode: screen;
    pointer-events: none;
}

.nx-footer-col h4 {
    font-size: 17px;
    margin-bottom: 14px;
    font-weight: bold;
}

.nx-footer-col ul {
    list-style: none;
    padding: 0;
}

.nx-footer-col ul li {
    margin-bottom: 10px;
}

.nx-footer-col a {
    color: #fff;
    opacity: 0.85;
    text-decoration: none;
    font-size: 14px;
    transition: 0.3s;
}

.nx-footer-col a:hover {
    opacity: 1;
    transform: translateX(-4px);
}

.nx-footer-news input {
    flex: 1;
    padding: 12px;
    border-radius: 10px;
    border: none;
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

.nx-footer-news input::placeholder {
    color: #fff;
    opacity: 0.7;
}

.nx-footer-news button {
    padding: 12px 18px;
    border-radius: 10px;
    border: none;
    background: #fff;
    color: #ff4f00;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}

.nx-footer-news button:hover {
    background: #ffe1d1;
}

.nx-footer-bottom {
    margin-top: 2px;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
    padding-top: 16px;
    display: flex;
    justify-content: space-between;
    font-size: 13px;
}

.nx-footer-badges span {
    background: rgba(255, 255, 255, 0.18);
    padding: 6px 12px;
    border-radius: 8px;
    margin-left: 10px;
}

.box3d__content h1 {
    position: relative;
    display: block;
    text-align: right;
    direction: rtl;
    padding: 15px 15px;
    margin: auto;
    font-size: 16px;
    color: #181818c9;
    text-shadow: 0px 0px 1px #f8f8f8ba;
    font-family: 'iran';
}

.owl-prev, .owl-next {
    background-color: #e8c27a;
    transform: rotateZ(0deg) rotateX(0deg) rotateY(0deg) translateZ(3px);
    z-index: 2;
}

.owl-prev {
    left: -40px;
}

.owl-next {
    right: -40px;
}

.pishnedp {
    background: var(--base-color) url(/public/__Global/Files/image/ui/backheader.png) right center no-repeat;
    background-size: 1000%;
    position: relative;
    margin: auto;
    display: block;
    width: 100%;
    height: calc(95% - min(40%, 15vH));
    padding: min(40%, 17vH) 0;
}

.pishnedp i {
    position: relative;
    margin: auto;
    padding: 5%;
    background: #4e040496;
    border-radius: 15%;
    width: 80%;
    box-shadow: 4px 4px 8px #181818db;
}

.box_lists {
    position: relative;
    margin: auto;
    display: block;
    clear: both;
    width: 100%;
    height: auto;
}

.grid {
    max-width: min(90%, 90vw, 1280px);
    padding: 10px 0px;
    margin: 50px auto;
    border: 1px solid #ceac8c;
    border-radius: 5px;
    z-index: 0;
    transform: rotateZ(0deg) rotateX(0deg) rotateY(0deg) translateZ(0px)
}

.grid::after {
    content: "";
    position: absolute;
    background: transparent;
    border-top: 17px solid #666666;
    border-bottom: 17px solid #555555;
    border-left: 17px solid #444444;
    border-right: 17px solid #666666;
    width: 100%;
    height: 107%;
    margin: auto;
    z-index: 0;
    top: 0%;
    bottom: 3.5%;
    right: 0%;
    left: 0%;
    border-radius: 3px;
    box-shadow: 5px 5px 10px #18181885, -5px -5px 10px #85858585, inset 5px 5px 10px #18181885, inset -5px -5px 10px #85858585;
    transform: rotateZ(0deg) rotateX(0deg) rotateY(0deg) translateZ(-2px);
    pointer-events: none;
    box-sizing: border-box;
}

.box2-textno .righterbox .gridebox {
    grid-template-columns: calc(33% - 5px) calc(33% - 5px) calc(33% - 5px);
}

svg[role="intext"] {
    position: relative;
    margin: auto 2px;
    display: inline-block;
    max-width: 50%;
    max-height: 100%;
    top: 5px;
    width: 20px;
    height: 20px;
}

svg[role="intext"] path {
    fill: var(--base-color) !important;
}

svg[role="intext"] rect {
    stroke: transparent !important;
}

.slider_bix .timer_off {
    position: absolute;
    margin: auto;
    display: block;
    width: 50%;
    height: auto;
    bottom: -15%;
    z-index: 20;
}

.minimal_menu .serchbixer {
    background: #fff;
    border-radius: 12px;
    padding: 6px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    width: 90%;
    position: relative;
}

.minimal_menu .serchbixer input {
    border: none;
    outline: none;
    font-size: 15px;
    flex: 1;
    color: #333;
}

.minimal_menu .serchbixer input::placeholder {
    color: #999;
}

.minimal_menu .serchbixer i {
    align-items: center;
    justify-content: center;
    cursor: pointer;
    width: min(2.5vW, 35px);
    height: min(2.5vW, 35px);
    font-size: 35px;
    top: 0;
    bottom: 0px;
    right: 5px;
}


.minimal_menu .title-floating {
    position: absolute;
    top: -14px;
    right: 18px;
    background: #fff;
    padding: 6px 12px;
    font-size: 16px;
    font-weight: 700;
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
}

.minimal_menu .image-box {
    width: 100%;
    height: 190px;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 18px;
    border: 4px solid #f3f3f3;
}

.minimal_menu .image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.minimal_menu .info-list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
}

.minimal_menu .info-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 4px;
    font-size: 15px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    position: relative;
}

.minimal_menu .info-list li::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 40%;
    height: 1px;
    background: rgba(0, 0, 0, 0.12);
}

.minimal_menu .label {
    font-weight: 600;
    color: #444;
}

.minimal_menu .value {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #333;
}

.minimal_menu .old-price {
    color: #999;
    text-decoration: line-through;
    font-size: 14px;
}

.minimal_menu .new-price {
    color: #ff7a00;
    font-weight: 700;
    font-size: 16px;
}

.minimal_menu .toman-icon {
    width: 15px;
    height: 15px;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.minimal_menu .view-btn {
    width: 100%;
    padding: 12px;
    background: #f5f5f5;
    color: #333;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    transition: 0.25s;
}

.minimal_menu .view-btn:hover {
    background: #e9e9e9;
}

.minimal_menu .arrow-icon {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.product-popup-card {
    width: 100%;
    max-width: 420px;
    background: #ffffff;
    border-radius: 18px;
    padding: 18px;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    gap: 18px;
    animation: fadeIn .3s ease;
}

.ppc-image {
    width: 100%;
    height: 220px;
    border-radius: 14px;
    overflow: hidden;
    background: #f2f2f2;
    box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.1);
}

.ppc-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ppc-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ppc-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #333;
    line-height: 1.4;
}

.ppc-prices {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ppc-price-old {
    font-size: .9rem;
    color: #888;
    text-decoration: line-through;
}

.ppc-price-new {
    font-size: 1.1rem;
    font-weight: 700;
    color: #e63946;
}

.ppc-discount {
    font-size: .85rem;
    background: #e63946;
    color: #fff;
    padding: 4px 10px;
    border-radius: 8px;
    width: fit-content;
}

.ppc-stock {
    font-size: .95rem;
    padding: 6px 10px;
    border-radius: 8px;
    width: fit-content;
}

.ppc-stock.ok {
    background: #d4f8d4;
    color: #0a7a0a;
}

.ppc-stock.no {
    background: #ffe1e1;
    color: #b30000;
}

.ppc-expert {
    font-size: .9rem;
    padding: 6px 10px;
    border-radius: 8px;
    width: fit-content;
}

.ppc-expert.ok {
    background: #d4e8ff;
    color: #0057b3;
}

.ppc-expert.no {
    background: #f0f0f0;
    color: #777;
}

.ppc-view {
    width: 100%;
    padding: 12px;
    background: #ff8a00;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
    transition: .2s;
}

.ppc-view:hover {
    background: #ff7300;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.gallery-wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.gallery-wrap .gallery {
    display: flex;
    flex-direction: column;
    gap: 18px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    padding: 10px 0;
}

.gallery::-webkit-scrollbar {
    display: none;
}

.gallery-wrap .gallery .row {
    display: flex;
    gap: 14px;
}

.gallery-wrap .gallery .item {
    position: relative;
    cursor: pointer;
}

.gallery-wrap .gallery .item img {
    display: block;
    width: auto;
    height: min(260px, 26vH);
    max-height: 100%;
    border-radius: 14px;
    border: 2px solid rgba(255, 140, 0, 0.35);
    object-fit: cover;
    transition: transform .25s ease;
}

.gallery-wrap .gallery .item:hover img {
    transform: scale(1.03);
}

.gallery-wrap .gallery .title {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 14px;
    border-radius: 0 0 14px 14px;
    opacity: 0;
    transform: translateY(10px);
    transition: all .25s ease;
    text-align: center;
}

.gallery-wrap .gallery .item:hover .title {
    opacity: 1;
    transform: translateY(0);
}


.gallery-wrap .scroll-left,
.gallery-wrap .scroll-right {
    position: absolute;
    top: 0;
    width: 60px;
    height: 100%;
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
    background: linear-gradient(to right, rgba(0, 0, 0, 0.25), transparent);
    opacity: 0;
    transition: opacity .3s;
}

.gallery-wrap .scroll-right {
    right: 0;
    background: linear-gradient(to left, rgba(0, 0, 0, 0.25), transparent);
}

.gallery-wrap:hover .scroll-left,
.gallery-wrap:hover .scroll-right {
    opacity: 1;
}

.scroll-left::after,
.scroll-right::after {
    content: '';
    width: 22px;
    height: 22px;
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
    transform: rotate(-135deg);
}

.scroll-right::after {
    transform: rotate(45deg);
}


body.dark-mode {
    --text: #eef5ff;
    --ink: #fefefe;
    --muted: #9eacbe;
    --line: #233043;
    --surface: #101821;
    --surface-soft: #131f2e;
    --surface-blue: #16283c;
    --footer: #0a4fae;
    background: #0a1118;
    color: var(--text)
}

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

button, input {
    font: inherit
}

button {
    cursor: pointer
}

a svg, button svg {
    width: 20px;
    height: 20px;
    display: block
}

.container {
    width: min(100% - 34px, 1230px);
    margin-inline: auto
}

.site-header {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 50;
    direction: ltr;
}

.header-main {
    min-height: 82px;
    display: grid;
    grid-template-columns: 300px 1fr 155px;
    align-items: stretch;
    gap: 24px;
    grid-auto-flow: column;
    align-content: space-around;
    justify-content: space-evenly;
    justify-items: stretch;
}

.header-side {
    display: flex;
    align-items: center;
    gap: 22px
}

.header-side-right {
    grid-column: 1;
    justify-content: flex-start
}

.header-user, .header-cart {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #0e233c;
    font-size: 11px;
    position: relative;
    white-space: nowrap
}

.dark-mode .header-user, .dark-mode .header-cart {
    color: #ecf5ff
}

.header-user svg, .header-cart svg {
    width: 25px;
    height: 25px
}

.header-cart contbask {
    position: absolute;
    top: -10px;
    left: -10px;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--blue);
    color: #fff;
    font-size: 10px;
    font-family: 'per_add';
}


header .minimal_menu {
    position: absolute;
    margin: auto;
    display: none;
    width: 200px;
    max-width: 90vW;
    height: auto;
    direction: ltr;
    padding: 20px;
    background: #f8f8f8;
    border-radius: 10px;
    left: -100px;
    top: 70px;
    z-index: 50;
    animation: floatText 12s ease-in-out infinite;
    transform: rotateX(0deg) rotateY(0deg);
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

header .minimal_menu li {
    position: relative;
    display: block;
    margin: auto;
    clear: both;
    padding: 10px;
    direction: rtl;
    cursor: pointer;
    color: #181818;
    font-family: var(--font-family, 'sans');
    font-size: 14px;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

header .minimal_menu li:hover {
    color: #181818;
    font-family: var(--font-family);
    font-weight: 900;
}

header .menu-item {
    position: relative;
    display: block;
    margin: auto;
    clear: both;
    padding: 10px;
    direction: rtl;
    cursor: pointer;
    color: #181818;
    font-family: var(--font-family, 'sans');
    font-size: 14px;
    transition: all 0.5s ease;
}

header .menu-item:hover {
    color: #181818;
    font-family: var(--font-family);
    font-weight: 900;
}

header .menu-item .minimal_menu {
    right: 180px;
    top: 0;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    overflow: hidden;
    overflow-y: auto;
    height: auto;
    max-height: 60vH;
}

.brand {
    grid-column: 3;
    justify-self: end;
    display: flex;
    align-items: center
}

.brand img {
    width: 112px;
    height: 50px;
    object-fit: contain;
    display: block
}

.search-box {
    grid-column: 2;
    display: flex;
    height: 46px;
    position: relative
}

.search-box input {
    flex: 1;
    border: 1px solid #e2e8f1;
    border-left: none;
    border-radius: 8px 0 0 8px;
    background: #fbfdff;
    color: var(--text);
    padding: 0 18px;
    outline: none;
    font-size: 11px;
    direction: rtl;
}

.dark-mode .search-box input {
    background: #0e1722;
    border-color: #27384b
}

.search-box input::placeholder {
    color: #0e1722;
}

.dark-mode .search-box input::placeholder {
    color: #818d9c;
}

.search-box input:focus {
    border-color: #9cc7f5;
    box-shadow: 0 0 0 4px rgba(35, 146, 241, .08)
}

.search-box button {
    width: 52px;
    border: 0;
    border-radius: 0 8px 8px 0;
    background: var(--blue);
    color: #fefefe;
    display: grid;
    place-items: center;
    transition: .2s
}

.search-box button:hover {
    background: var(--blue-dark);
    transform: translateY(-1px)
}

.search-box button svg {
    width: 21px;
    height: 21px
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 34px;
    height: 48px;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: stretch;
    text-align: center;
    justify-content: center;
    direction: rtl;
}

.main-nav a {
    font-size: 12px;
    color: #2c3d52;
    position: relative;
    padding: 13px 0;
    font-weight: 800 !important;
}

.dark-mode .main-nav a {
    color: #dde9f7
}

.main-nav a:first-child, .main-nav a:hover {
    color: var(--blue)
}

.main-nav a::after {
    content: "";
    position: absolute;
    right: 0;
    left: 0;
    bottom: 2px;
    height: 2px;
    border-radius: 8px;
    background: currentColor;
    transform: scaleX(0);
    transition: .2s
}

.main-nav a:hover::after, .main-nav a:first-child::after {
    transform: scaleX(1)
}

.down {
    font-size: 14px;
    vertical-align: -1px;
    margin-right: 3px
}

.hero-wrap {
    padding: 14px 0 0
}

.hero-slider {
    position: relative;
    overflow: hidden;
    border: 1px solid #dce7f3;
    border-radius: 14px;
    background: #cbd5e1;
    box-shadow: var(--shadow)
}

.dark-mode .hero-slider {
    background: #4e5257;
}

.hero-slide {
    display: none;
    position: relative;
    min-height: 330px;
    padding: 38px 60px 45px;
    overflow: hidden
}

.hero-slide.is-active {
    display: flex;
    animation: fadeIn .5s ease
}

.hero-copy {
    width: 46%;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start
}

ios-26.hero-copy {
    background: #f8f8f8a1;
    backdrop-filter: blur(5px) saturate(20%);
    transform: rotateZ(6deg);
    right: -4%;
}

.dark-mode ios-26.hero-copy {
    background: #181818a1;
}

.hero-copy h1 {
    font-size: 29px;
    line-height: 1.45;
    margin: 0 0 12px;
    color: #10213a;
    font-weight: 900;
    letter-spacing: -.4px
}

.dark-mode .hero-copy h1 {
    color: #f6f9ff
}

.hero-copy p {
    font-size: 13px;
    line-height: 2;
    margin: 0 0 18px;
    color: #4f6279
}

.dark-mode .hero-copy p {
    color: #b7c4d3
}

.btn-primary {
    height: 44px;
    padding: 0 22px;
    background: var(--blue);
    color: #fefefe;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 8px 17px rgba(22, 114, 220, .2);
    transition: .2s;
    cursor: pointer
}

.btn-primary:hover {
    background: var(--blue-dark);
    transform: translateY(-2px);
    box-shadow: 0 14px 23px rgba(22, 114, 220, .25)
}

.btn-primary svg {
    width: 15px;
    height: 15px
}

.hero-image-placeholder {
    position: absolute;
    inset: 0 0 0 35%;
    background: radial-gradient(circle at 31% 48%, rgba(45, 132, 234, .22) 0 105px, transparent 107px), linear-gradient(135deg, rgba(255, 255, 255, 0) 0 23%, rgba(35, 146, 241, .08) 23% 28%, transparent 28%), repeating-linear-gradient(135deg, rgba(35, 146, 241, .035) 0 2px, transparent 2px 9px);
    opacity: .9
}

.hero-image-placeholder img {
    position: absolute;
    margin: auto;
    display: block;
    max-width: 90%;
    top: 0;
    bottom: 0;
    max-height: 90%;
    opacity: 0.95;
    right: 60%;
    border-radius: 15px;
}

.hero-image-placeholder::after {
    content: "";
    position: absolute;
    left: 11%;
    bottom: 28px;
    width: 235px;
    height: 235px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .33)
}

.hero-image-placeholder-alt {
    background: radial-gradient(circle at 38% 45%, rgba(35, 146, 241, .18) 0 120px, transparent 123px), linear-gradient(135deg, rgba(255, 255, 255, 0) 0 19%, rgba(35, 146, 241, .08) 19% 32%, transparent 32%)
}

.hero-image-placeholder-soft {
    background: radial-gradient(circle at 32% 43%, rgba(255, 255, 255, .7) 0 120px, transparent 123px), linear-gradient(145deg, #eaf4ff, #dceeff)
}

.hero-decor {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, .25);
    filter: blur(.2px)
}

.hero-decor-1 {
    width: 105px;
    height: 105px;
    top: -40px;
    left: 22%
}

.hero-decor-2 {
    width: 75px;
    height: 75px;
    bottom: 28px;
    left: 33%
}

.hero-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 50%;
    background: #fefefe;
    color: #6482a4;
    z-index: 4;
    display: grid;
    place-items: center;
    box-shadow: 0 6px 14px rgba(31, 67, 117, .1);
    transition: .2s
}

.hero-arrow:hover {
    color: var(--blue);
    transform: translateY(-50%) scale(1.07)
}

.hero-arrow-right {
    left: 14px
}

.hero-arrow-left {
    right: 14px
}

.hero-arrow svg {
    width: 16px;
    height: 16px
}

.hero-dots {
    position: absolute;
    left: 50%;
    bottom: 13px;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    direction: ltr
}

.hero-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #bfd8f5;
    transition: .2s
}

.hero-dots span.active {
    width: 19px;
    border-radius: 999px;
    background: #2f86df
}

.quick-cats {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    padding: 18px 0 13px;
    align-content: space-evenly;
    grid-auto-flow: column dense;
    align-items: stretch;
    justify-items: stretch;
    direction: ltr;
    text-align: center;
    justify-content: center;
    width: 95%;
    margin: 20px auto;
}

.quick-cat {
    background: var(--surface-blue);
    border-radius: 9px;
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    color: #30475e;
    font-size: 11px;
    transition: .2s;
    border: 1px solid rgba(35, 146, 241, .06)
}

.dark-mode .quick-cat {
    color: #dce9f5
}

.quick-cat:hover {
    transform: translateY(-3px);
    border-color: #bcd8f7;
    box-shadow: var(--shadow);
    color: var(--blue)
}

.quick-icon {
    width: 35px;
    height: 35px;
    display: grid;
    place-items: center;
    color: #a1b4c5;
    margin-bottom: 5px;
}

.dark-mode .quick-icon {
    filter: invert(1);
}

.quick-icon svg {
    width: 35px;
    height: 35px;
}

.cat-all {
    background: linear-gradient(180deg, #1478df, #1b91ec);
    color: #fefefe
}

.cat-all:hover {
    color: #fefefe
}

.cat-all .quick-icon {
    color: #fefefe
}

.service-strip {
    display: grid;
    grid-template-columns:repeat(4, 1fr);
    background: var(--surface-blue);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #deebf7;
    margin: 0 0 12px
}

.service-item {
    display: flex;
    gap: 11px;
    align-items: center;
    justify-content: center;
    padding: 15px 12px;
    min-height: 72px;
    border-left: 1px solid #d8e6f3
}

.service-item:last-child {
    border-left: 0
}

.service-item svg {
    width: 31px;
    height: 31px;
    color: #376f9e;
    flex: none
}

.service-item strong {
    display: block;
    font-size: 14px;
    margin-bottom: 1px;
    color: #263d55
}

.dark-mode .service-item strong {
    color: #edf5ff
}

.service-item small {
    display: block;
    font-size: 10.5px;
    color: #7a8798
}

.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0 8px;
    margin: 10px auto;
    direction: ltr;
}

.section-head h2, .section-title-center h2 {
    font-size: 15px;
    margin: 0;
    color: #182b42;
    font-weight: 900;
    direction: rtl;
}

.dark-mode .section-head h2, .dark-mode .section-title-center h2 {
    color: #eef6ff
}

.view-all {
    font-size: 11px;
    color: var(--blue);
    display: flex;
    align-items: center;
    gap: 3px;
    direction: rtl;
}

.view-all svg {
    width: 13px;
    height: 13px
}

.section-head.compact {
    padding-top: 12px
}

.products-row {
    display: grid;
    grid-template-columns:repeat(5, 1fr);
    gap: 10px
}

section.products-row[class^="owl"], .products-row[class*="owl"] {
    grid-template-columns: repeat(1, 1fr) !important;
}

.product-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 9px;
    padding: 9px;
    transition: .25s;
    min-width: 0;
    box-shadow: 0 4px 14px rgba(50, 90, 135, .035)
}

.product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 13px 25px rgba(50, 90, 135, .11);
    border-color: #d2e2f5
}

.product-image {
    height: 280px;
    background: var(--surface-soft);
    border-radius: 7px;
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.product-image img {
    width: 100%;
    max-height: 100%;
    display: block;
    clear: both;
    margin: auto;
    position: relative;
}

.discount {
    position: absolute;
    top: 7px;
    left: 7px;
    padding: 5px 7px 3px 7px;
    background: var(--base-color);
    color: #fefefe;
    font-size: 16px;
    z-index: 2;
    border-radius: 5px;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.product-card:hover .discount {
    background: var(--red-color);
}

.heart {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 25px;
    height: 25px;
    border: 0;
    background: transparent;
    color: #7d8ca1;
    padding: 0;
    display: grid;
    place-items: center;
    z-index: 2
}

.heart svg {
    width: 30px;
    height: 30px;
}

.heart svg.this * {
    fill: var(--red-color) !important;
    stroke: var(--surface) !important;
}

.product-placeholder {
    position: absolute;
    display: block;
    width: 60px;
    height: 106px;
    border-radius: 8px;
    background: linear-gradient(100deg, #6f8498, #25384d);
    box-shadow: 0 12px 20px rgba(35, 54, 80, .18);
    opacity: 0.1;
}

.product-placeholder::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -12px;
    transform: translateX(-50%);
    width: 25px;
    height: 13px;
    border-radius: 2px 2px 3px 3px;
    background: #182433
}

.shoe-shape {
    width: 117px;
    height: 45px;
    border-radius: 52% 57% 40% 18%;
    background: linear-gradient(180deg, #fefefe, #e5e8ed);
    box-shadow: 0 11px 17px rgba(53, 73, 93, .12);
    transform: rotate(-4deg)
}

.shoe-shape::before {
    content: "";
    position: absolute;
    left: 14px;
    right: 17px;
    bottom: 9px;
    height: 3px;
    background: #cfd7df;
    border-radius: 999px
}

.shoe-shape::after {
    content: "";
    position: absolute;
    left: 55px;
    top: 9px;
    width: 28px;
    height: 2px;
    background: #c6ced7;
    box-shadow: 0 7px 0 #c6ced7, 0 14px 0 #c6ced7
}

.shirt-shape {
    width: 89px;
    height: 105px;
    border-radius: 8px 8px 10px 10px;
    background: #507a9d
}

.shirt-shape::after {
    content: "";
    position: absolute;
    left: -18px;
    top: 12px;
    width: 30px;
    height: 52px;
    border-radius: 10px;
    background: #507a9d;
    box-shadow: 95px 0 0 #507a9d
}

.tee-shape {
    width: 84px;
    height: 104px;
    border-radius: 4px;
    background: #1984ea
}

.tee-shape::after {
    content: "";
    position: absolute;
    left: -18px;
    top: 14px;
    width: 26px;
    height: 45px;
    background: #1984ea;
    border-radius: 8px;
    box-shadow: 94px 0 0 #1984ea
}

.bottle-shape {
    width: 51px;
    height: 94px;
    background: linear-gradient(180deg, #171717, #273547);
    border-radius: 4px 4px 7px 7px
}

.bottle-shape::before {
    width: 22px;
    height: 14px;
    background: #111;
    top: -10px
}

.product-card h3 {
    font-size: 10px;
    margin: 8px 2px 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--color-accent-900);
}

.dark-mode .product-card h3 {
    color: #f8f8f8;
}

.stars {
    font-size: 9px;
    color: #f0b822;
    direction: ltr;
    unicode-bidi: embed
}

.stars span {
    color: #8b95a2;
    margin-right: 3px
}

.price {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
    margin-top: 3px
}

.price strong {
    font-size: 15px;
    color: var(--blue)
}

.price del {
    font-size: 11px;
    color: #a1a9b4
}

.add-cart {
    margin-top: 7px;
    border: 1px solid #dde7f3;
    height: 30px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--blue);
    font-size: 12px;
    transition: .2s;
    cursor: pointer;
}

.add-cart:hover {
    background: #edf6ff;
    border-color: #cbe0f7
}

.add-cart svg {
    width: 14px;
    height: 14px
}

.promo-placeholder {
    margin-top: 17px;
    min-height: 170px;
    background: linear-gradient(100deg, #0335ae, #2b8fea);
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    color: #fefefe;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 60px;
}

.promo-media img {
    position: relative;
    width: 90%;
    margin: 15px auto;
    border-radius: 10px;
}

.promo-placeholder::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 83% 20%, rgba(255, 255, 255, .12), transparent 22%), radial-gradient(circle at 73% 84%, rgba(255, 255, 255, .12), transparent 25%)
}

.promo-copy {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 4px
}

.promo-copy strong {
    font-size: 21px
}

.promo-copy span {
    font-size: 10px;
    opacity: .93
}

.promo-copy a {
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 122px;
    height: 34px;
    border-radius: 6px;
    background: #fefefe;
    color: #186fd7;
    font-size: 10px
}

.promo-media {
    position: relative;
    width: 42%;
    height: 100%;
    opacity: .9
}

.promo-media::before {
    content: "";
    position: absolute;
    left: 9%;
    bottom: -30px;
    width: 180px;
    height: 230px;
    border-radius: 24px 24px 0 0;
    background: rgba(255, 255, 255, .12);
    transform: rotate(7deg)
}

.promo-media::after {
    content: "";
    position: absolute;
    left: 46%;
    bottom: -28px;
    width: 150px;
    height: 180px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .15)
}

.brands-row {
    display: grid;
    grid-template-columns:repeat(7, 1fr);
    gap: 8px
}

.brands-row a {
    height: 52px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    display: grid;
    place-items: center;
    font-family: 'Iran', Georgia, serif;
    font-size: 17px;
    color: #282d34;
    transition: .2s
}

.dark-mode .brands-row a {
    color: #f3f7fb
}

.brands-row a:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
    color: var(--blue)
}

.category-tiles {
    display: grid;
    grid-template-columns:repeat(4, 1fr);
    gap: 10px
}

.category-tile {
    background: var(--surface-blue);
    border-radius: 8px;
    min-height: 112px;
    padding: 10px 12px;
    display: grid;
    grid-template-columns:1fr auto;
    align-items: end;
    column-gap: 10px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(35, 146, 241, .05);
    transition: .2s
}

.category-tile:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow)
}

.category-tile b {
    font-size: 13px;
    position: relative;
    z-index: 10;
    font-family: 'sans_b';
    color: #0a4fae;
}

.dark-mode .category-tile b {
    color: #f8f8f8;
}



.category-tile em {
    font-style: normal;
    font-size: 12px;
    color: var(--blue);
    background: #fefefe;
    padding: 3px 7px;
    border-radius: 5px;
    cursor: pointer;
}

.dark-mode .category-tile em {
    background: #122131
}

.cat-tile-art {
    position: absolute;
    right: 8px;
    top: 8px;
    bottom: 30px;
    width: 110px
}

.cat-tile-art img {
    position: relative;
    max-height: 80%;
    width: auto;
    display: block;
    padding: 10%;
    border-radius: 14px;
    box-shadow: var(--shadow);
    corner-shape: bevel scoop notch notch;
}

.tile-bottle {
    width: 33px;
    right: 25px;
    top: 12px;
    background: linear-gradient(180deg, #1a202a, #596677);
    border-radius: 4px 4px 6px 6px;
    box-shadow: 25px 0 0 -15px #d7e2ef
}

.tile-bottle::before {
    content: "";
    position: absolute;
    left: 6px;
    top: -7px;
    width: 14px;
    height: 8px;
    background: #101720;
    border-radius: 2px;
    opacity: 0.4;
}

.tile-tee {
    width: 70px;
    right: 18px;
    top: 10px;
    background: #177edf;
    border-radius: 4px 4px 8px 8px;
    opacity: 0.6;
}

.tile-tee::before, .tile-tee::after {
    content: "";
    position: absolute;
    top: 10px;
    width: 24px;
    height: 42px;
    background: #177edf;
    border-radius: 8px;
    opacity: 0.4;
}

.tile-tee::before {
    right: -16px
}

.tile-tee::after {
    left: -16px
}

.tile-shirt {
    width: 72px;
    right: 22px;
    top: 10px;
    background: #526f8b;
    border-radius: 6px
}

.tile-shirt::before, .tile-shirt::after {
    content: "";
    position: absolute;
    top: 8px;
    width: 22px;
    height: 44px;
    background: #526f8b;
    border-radius: 8px
}

.tile-shirt::before {
    right: -15px
}

.tile-shirt::after {
    left: -15px
}

.tile-shoe {
    width: 91px;
    height: 35px;
    right: 12px;
    top: 47px;
    border-radius: 55% 55% 25% 12%;
    background: linear-gradient(180deg, #fefefe, #dfe5ea);
    transform: rotate(-6deg)
}

.why-section {
    display: grid;
    grid-template-columns:repeat(4, 1fr);
    gap: 9px;
    padding: 26px 0 10px
}

.why-card {
    text-align: center;
    padding: 3px 10px
}

.why-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    margin: auto;
    color: #2c7ac3
}

.why-icon svg {
    width: 25px;
    height: 25px
}

.why-card strong {
    display: block;
    font-size: 12px;
    margin-top: 3px;
    color: var(--color-accent-900);
}

.dark-mode .why-card strong {
    color: #f8f8f8;
}

.why-card p {
    font-size: 10px;
    color: var(--muted);
    margin: 2px 0 0
}

.section-title-center {
    text-align: center;
    padding: 10px 0 9px
}

.testimonials {
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    gap: 11px
}

.testimonial {
    background: #f4f9ff;
    border-radius: 8px;
    padding: 13px 17px;
    position: relative;
    min-height: 125px
}

.dark-mode .testimonial {
    background: #132233
}

.quote {
    position: absolute;
    top: 4px;
    right: 13px;
    color: #9ec6ec;
    font-size: 32px;
    font-family: Georgia, serif
}

.testimonial p {
    font-size: 9px;
    line-height: 1.9;
    margin: 5px 0 8px;
    color: #46586d
}

.dark-mode .testimonial p {
    color: #bdc9d7
}

.testimonial strong {
    font-size: 10px
}

.testimonial .stars {
    margin-top: 1px;
    font-size: 9px
}

.blog-row {
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    gap: 11px;
    padding: 22px 0 12px
}

.blog-card {
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--surface);
    overflow: hidden;
    transition: .2s
}

.blog-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow)
}

.blog-image {
    height: 112px;
    background: linear-gradient(145deg, #abd1f3, #e9f5ff);
    position: relative
}

.blog-image::before {
    content: "";
    position: absolute;
    bottom: 18px;
    left: 16%;
    width: 48px;
    height: 72px;
    background: linear-gradient(180deg, #4d769a, #304d68);
    border-radius: 12px 12px 9px 9px;
    opacity: 0.7;
}

.blog-image::after {
    content: "";
    position: absolute;
    bottom: 28px;
    left: 23%;
    width: 95px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .5);
    opacity: 0.7;
}

.blog-image-2::before {
    width: 60px;
    height: 60px;
    left: 19%;
    background: linear-gradient(180deg, #8a5b38, #472914);
    border-radius: 50% 50% 10px 10px;
    opacity: 0.4;
}

.blog-image-3::before {
    width: 98px;
    height: 33px;
    left: 21%;
    bottom: 25px;
    border-radius: 60% 55% 24% 17%;
    background: linear-gradient(180deg, #fefefe, #d8e0e7);
    transform: rotate(-7deg);
    opacity: 0.4;
}

.blog-body {
    padding: 9px 11px
}

.blog-body b {
    font-size: 13px;
    display: block;
    color: #0c6ddd;
}

.dark-mode .blog-body b {
    color: #f8f8f8;
}

.blog-body small {
    font-size: 11px;
    color: var(--muted)
}

.newsletter-wrap {
    margin-top: 10px;
    padding: 0 0 14px
}

.newsletter {
    min-height: 78px;
    border-radius: 9px;
    background: linear-gradient(90deg, #0c6ddd, #2c8ee9);
    color: #fefefe;
    display: grid;
    grid-template-columns:54px 1fr 1.1fr;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    direction: rtl;
}

.newsletter-art {
    width: 43px;
    height: 43px;
    display: grid;
    place-items: center
}

.newsletter-art svg {
    width: 38px;
    height: 38px
}

.newsletter-copy strong {
    display: block;
    font-size: 15px
}

.newsletter-copy span {
    display: block;
    font-size: 8.5px;
    margin-top: 1px;
    opacity: .93
}

.newsletter-form {
    display: flex;
    gap: 6px;
    justify-content: flex-start;
    width: 100%;
}

.newsletter-form input {
    flex: 1;
    min-width: 0;
    height: 38px;
    border: 0;
    border-radius: 6px;
    padding: 0 11px;
    background: #fefefe;
    color: #16283e;
    outline: none;
    font-size: 10px
}

.newsletter-form button {
    height: 38px;
    padding: 0 15px;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 6px;
    background: transparent;
    color: #fefefe;
    font-size: 10px
}

.site-footer {
    background: linear-gradient(120deg, #0d68d9, #2a86e5);
    color: #fefefe;
    margin-top: 0
}

.footer-grid {
    display: grid;
    grid-template-columns:1.45fr repeat(4, 1fr);
    gap: 25px;
    padding: 31px 0 24px
}

.footer-logo {
    width: 128px;
    height: 48px;
    object-fit: contain;
    filter: grayscale(1) brightness(0) invert(1);
    display: block;
    margin-bottom: 9px
}

.footer-logo-col p {
    font-size: 11px;
    line-height: 1.9;
    opacity: .92;
    margin: 0 0 9px
}

.footer-col h3 {
    font-size: 14px;
    margin: 0 0 9px
}

.footer-col a, .footer-col p, .footer-col small {
    display: block;
    font-size: 10.5px;
    line-height: 2.25;
    color: #f8fbff;
    opacity: .9
}

.contact-line {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 10px;
    margin: 4px 0
}

.contact-line svg {
    width: 14px;
    height: 14px
}

.socials {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: 10px
}

.socials a {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .4);
    color: #fefefe;
    transition: .2s
}

.socials a:hover {
    transform: translateY(-2px);
    background: #fefefe;
    color: #146de4
}

.socials svg {
    width: 13px;
    height: 13px
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .16);
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 7.5px;
    color: #eaf4ff
}

.theme-switch {
    position: fixed;
    left: 18px;
    bottom: 18px;
    width: 43px;
    height: 43px;
    border-radius: 50%;
    background: var(--surface);
    color: var(--blue);
    border: 1px solid var(--line);
    box-shadow: 0 10px 20px rgba(0, 0, 0, .12);
    z-index: 60;
    display: grid;
    place-items: center
}

.theme-switch svg {
    width: 20px;
    height: 20px
}

.moon-svg {
    display: none
}

.dark-mode .sun-svg {
    display: none
}

.dark-mode .moon-svg {
    display: block
}

.button-ripple {
    position: fixed;
    z-index: 1000;
    pointer-events: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--blue);
    transform: translate(-50%, -50%) scale(.35);
    opacity: 0
}

.button-ripple.show {
    animation: ripple .55s ease-out
}

@keyframes ripple {
    0% {
        opacity: .75;
        transform: translate(-50%, -50%) scale(.35)
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(3.8)
    }
}

@keyframes fadeIn {
    from {
        opacity: .1;
        transform: translateX(10px)
    }
    to {
        opacity: 1;
        transform: none
    }
}

/* v2 precision fixes: all interface icons are inline SVG; no icon-font glyphs. */
.main-nav .nav-chevron {
    width: 12px;
    height: 12px;
    display: inline-block;
    flex: none;
    color: currentColor
}

.stars {
    display: flex;
    align-items: center;
    gap: 1px;
    direction: ltr;
    unicode-bidi: isolate
}

.rating-star {
    width: 11px;
    height: 11px;
    display: block;
    fill: currentColor;
    color: #f0b822
}

.quote {
    display: grid;
    place-items: center
}

.quote-svg {
    width: 22px;
    height: 22px;
    display: block;
    color: #9ec6ec
}

/* The supplied favicon is the source of truth for the brand mark. */
.brand img, .footer-logo {
    object-fit: contain;
    object-position: center
}

.footer-logo {
    filter: grayscale(1) brightness(0) invert(1)
}


@media (max-width: 1250px) {

    .box2-textno .righterbox .gridebox {
        grid-template-columns: calc(50% - 5px) calc(50% - 5px);
    }

    @media (max-width: 1150px) {

        *::after {
            box-shadow: unset;
            border: unset;
            opacity: 0;
        }

        :root {
            --thumb-size: 60px;
        }

        .img_boxer {
            grid-template-columns: 100%;
        }

        header.desktop {
            display: none;
            opacity: 0;
        }

        header.mobile {
            display: grid;
            opacity: 1;
            -moz-transition: all 0.5s ease;
            -webkit-transition: all 0.5s ease;
            transition: all 0.5s ease;
        }

        footer {
            visibility: hidden;
            margin-bottom: 85px;
            height: 40px;
            overflow: hidden
        }

        footer * {
            display: none;
            opacity: 0;
        }


        slider {
            margin: 30px auto;
        }

        gride {
            max-width: 95%;
        }

        .tower_box {
            width: 95%;
            grid-template-columns: 100%;
        }

        .tower_box .listen_cats, .box-controller {
            opacity: 0;
            display: none;
        }

        .downe-poper-content .box-controller {
            opacity: 1;
            display: grid;
            grid-template-columns: 100%;
        }

        #inphone {
            display: block;
            opacity: 1;
        }

        .ajaxer_cat_box {
            grid-template-columns: 50% 50%;
        }

        .page_numshow {
            justify-content: center;
            grid-template-columns: 100%;
            text-align: center;
        }


        .m_head_top {
            position: relative;
            display: block;
            margin: auto;
            padding: 10px;
            border-bottom: 1px solid #c6c7c8;
            width: calc(100% - 20px);
            height: 60px;
            text-align: center;
            overflow: hidden;
            opacity: 1;
            z-index: 50;
            top: 0;
            right: 0;
            left: 0;
            background: #f8f8f8;
            -moz-transition: all 0.5s ease;
            -webkit-transition: all 0.5s ease;
            transition: all 0.5s ease;
        }

        .m_head_top img.head_img {
            position: relative;
            display: block;
            margin: auto;
            padding: 10px;
            max-height: calc(100% - 20px);
            max-width: 100%;
            width: auto;
            height: auto;
            opacity: 1;
            -moz-transition: all 0.5s ease;
            -webkit-transition: all 0.5s ease;
            transition: all 0.5s ease;
        }

        web {
            margin-top: 10px;
            transform-style: unset;
            background-blend-mode: unset;
            perspective: unset;
            perspective-origin: unset;
        }

        .port_grid {
            grid-template-columns: 100%;
        }

        .m_head_top i.icon.fui-arrow-right {
            width: 25px;
            height: 25px;
            font-size: 25px;
            top: 0;
            bottom: 0;
            right: 20px;
            color: #686868;
            cursor: pointer;
            display: none;
        }

        .m_head_top .line_bar {
            position: absolute;
            width: 30px;
            height: 30px;
            font-size: 30px;
            top: 0;
            bottom: 0;
            left: 40px;
            color: #686868;
            cursor: pointer;
            margin: auto;
            display: none;
        }

        .m_head_top .line_bar contbask {
            position: absolute;
            display: block;
            width: 12px;
            height: 12px;
            font-size: 8px;
            padding: 2px;
            background: var(--base-color);
            color: #f8f8f8;
            border-radius: 50%;
            top: 50%;
            left: 0px;
            right: -50%;
            opacity: 0.7;
            overflow: hidden;
            cursor: pointer;
        }

        .left_line .price_bar {
            display: none;
        }

        .foot_mob {
            position: fixed;
            display: block;
            margin: auto;
            padding: 10px;
            border-top: 1px solid #c6c7c8;
            width: calc(100% - 20px);
            height: 60px;
            text-align: center;
            overflow: hidden;
            opacity: 1;
            bottom: 0;
            right: 0;
            left: 0;
            z-index: 50;
            background: #f8f8f8;
            -moz-transition: all 0.5s ease;
            -webkit-transition: all 0.5s ease;
            transition: all 0.5s ease;
        }

        .foot_mob .takmil_box {
            position: absolute;
            width: 40%;
            min-width: 190px;
            right: 10px;
            top: 0;
            bottom: 0;
            height: 60px;
        }

        .ingrid .picbox off {
            width: 30px;
            height: 20px;
            font-size: 12px;
        }

        .about, .loginbox {
            border: 2px solid transparent;
        }

        .ingrid .picbox basket {
            width: 20px;
            height: 20px;
            font-size: 20px;
            border-radius: 50%;
            display: block;
            opacity: 1;
        }

        .ingrid .picbox love {
            width: 20px;
            height: 20px;
            font-size: 20px;
            border-radius: 50%;
        }

        .ingrid .picbox basket i, .ingrid .picbox love i {
            width: 10px;
            height: 10px;
            font-size: 10px;
        }

        chatli {
            bottom: 15%;
            z-index: 105;
        }

        .minipopup_box {
            position: fixed;
            width: 100%;
            height: 100%;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
            z-index: 110;
            margin: auto;
            border: 0px solid transparent;
        }

        .pagercat .towgriderb {
            grid-template-columns: auto;
        }

        .pagercat .towgriderb .r_bixer .ajaxer_cat_box, .pagercat .towgriderb .l_bixer .ajaxer_cat_box {
            grid-template-columns: 50% 50%;
            width: 100%;
            gap: 10px 0px;
        }

        .pagercat .towgriderb .l_bixer {
            display: none;
        }

        .cathead {
            grid-template-columns: 100%;
        }

        .cathead .left_bit .gridebox {
            grid-template-columns: calc(50% - 28.5px) calc(50% - 28.5px);
            gap: 10px 27px;
        }

        .gallery-wrap .gallery .item img {
            height: min(150px, 15vH);
        }

        @media (max-width: 1050px) {
            .header-main {
                grid-template-columns:250px 1fr 125px;
                gap: 14px;
                grid-auto-flow: unset;
                align-content: unset;
                justify-content: unset;
                justify-items: unset;
            }

            .main-nav {
                gap: 23px
            }

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

            .product-image {
                height: 185px
            }

            .promo-placeholder {
                padding: 0 34px
            }
        }

        @media (max-width: 820px) {
            .container {
                width: min(100% - 20px, 760px)
            }

            .site-header {
                position: relative
            }

            .header-main {
                grid-template-columns:1fr auto;
                grid-template-areas:"side brand" "search search";
                padding: 10px 0
            }

            .header-side-right {
                grid-area: side
            }

            .brand {
                grid-area: brand
            }

            .search-box {
                grid-area: search
            }

            .brand img {
                width: 102px;
                height: 46px
            }

            .main-nav {
                justify-content: flex-start;
                gap: 25px;
                height: 43px
            }

            .hero-slide {
                min-height: 300px;
                padding: 30px 45px
            }

            .hero-copy {
                width: 55%
            }

            .hero-copy h1 {
                font-size: 24px
            }

            .hero-image-placeholder {
                inset: 0 0 0 32%
            }

            .service-strip {
                grid-template-columns:repeat(2, 1fr)
            }

            .service-item:nth-child(2) {
                border-left: 0
            }

            .service-item:nth-child(-n+2) {
                border-bottom: 1px solid #d8e6f3
            }

            .products-row {
                grid-template-columns:repeat(3, 1fr)
            }

            .product-card:nth-child(4), .product-card:nth-child(5) {
                display: none
            }

            .brands-row {
                grid-template-columns:repeat(4, 1fr)
            }

            .category-tiles {
                grid-template-columns:repeat(2, 1fr)
            }

            .why-section {
                grid-template-columns:repeat(2, 1fr)
            }

            .newsletter {
                grid-template-columns:40px 1fr;
            }

            .newsletter-form {
                grid-column: 1/3
            }

            .footer-grid {
                grid-template-columns:repeat(2, 1fr)
            }
        }

        @media (max-width: 768px) {

            .box2-textno .righterbox .gridebox {
                grid-template-columns: calc(100% - 5px);
            }

            .basket_box ul.bask_list li {
                grid-template-columns: 70px auto;
                grid-template-rows: auto auto;
                padding: 12px;
                gap: 10px;
            }

            .basket_box ul.bask_list li span.inf {
                grid-column: 2;
                text-align: left;
                padding: 0;
            }

            .basket_box ul.bask_list li span:last-child {
                grid-column: 2;
                justify-content: flex-start;
                margin-top: 8px;
            }

            .basket_box ul.bask_list li span h1 {
                font-size: 13px;
            }

            .basket_box ul.bask_list li span h3 {
                font-size: 11px;
            }


            @media (max-width: 400px) {
                .pagercat .towgriderb .r_bixer .ajaxer_cat_box, .pagercat .towgriderb .l_bixer .ajaxer_cat_box {
                    grid-template-columns: 100%;
                    width: 100%;
                    gap: 10px 0px;
                }

                .cathead .left_bit .gridebox {
                    grid-template-columns: 100%;
                    gap: 15px 0px;
                }

            }

            @media (max-width: 560px) {
                body {
                    font-size: 12px
                }

                .container {
                    width: min(100% - 14px, 520px)
                }

                .header-user span, .header-cart span {
                    display: none
                }

                .header-side {
                    gap: 10px
                }

                .header-user svg, .header-cart svg {
                    width: 25px;
                    height: 25px
                }

                .header-cart b {
                    right: 12px
                }

                .brand img {
                    width: 88px;
                    height: 40px
                }

                .main-nav {
                    gap: 18px;
                    overflow: auto;
                    white-space: nowrap;
                }

                .main-nav a {
                    font-size: 10px
                }

                .hero-slide {
                    padding: 28px 33px 37px;
                    min-height: 250px
                }

                .hero-copy {
                    width: 100%;
                    align-items: flex-start
                }

                .hero-copy h1 {
                    font-size: 21px
                }

                .hero-copy p {
                    font-size: 10px
                }

                .hero-image-placeholder {
                    inset: 0 0 0 45%;
                    opacity: .55
                }

                .hero-arrow {
                    width: 26px;
                    height: 26px
                }

                .hero-arrow-right {
                    right: 9px
                }

                .hero-arrow-left {
                    left: 9px
                }

                .quick-cats {
                    grid-template-columns:repeat(2, 1fr)
                }

                .quick-cat:last-child {
                    grid-column: 1/3
                }

                .service-strip {
                    grid-template-columns:1fr
                }

                .service-item {
                    border-left: 0;
                    border-bottom: 1px solid #d8e6f3
                }

                .service-item:last-child {
                    border-bottom: 0
                }

                .products-row {
                    grid-template-columns:repeat(2, 1fr);
                    gap: 7px
                }

                .product-card:nth-child(4) {
                    display: block
                }

                .product-image {
                    height: 145px
                }

                .price {
                    flex-direction: column;
                    gap: 0
                }

                .price strong {
                    font-size: 10px
                }

                .promo-placeholder {
                    height: 128px;
                    padding: 0 18px
                }

                .promo-copy strong {
                    font-size: 16px
                }

                .promo-copy span {
                    font-size: 8px
                }

                .promo-copy a {
                    width: 102px;
                    height: 30px
                }

                .promo-media {
                    width: 36%
                }

                .brands-row {
                    grid-template-columns:repeat(3, 1fr)
                }

                .category-tiles {
                    grid-template-columns:repeat(2, 1fr)
                }

                .why-section {
                    grid-template-columns:repeat(2, 1fr);
                    gap: 4px
                }

                .testimonials {
                    grid-template-columns:1fr
                }

                .blog-row {
                    grid-template-columns:1fr
                }

                .newsletter {
                    grid-template-columns:1fr;
                    padding: 16px
                }

                .newsletter-art {
                    display: none
                }

                .newsletter-copy {
                    grid-column: 1
                }

                .newsletter-form {
                    grid-column: 1
                }

                .newsletter-form input {
                    width: 100%
                }

                .footer-grid {
                    grid-template-columns:1fr 1fr;
                    gap: 18px
                }

                .footer-logo {
                    width: 108px
                }

                .footer-bottom {
                    flex-direction: column;
                    justify-content: center;
                    gap: 1px;
                    padding: 8px 0
                }

                .theme-switch {
                    left: 12px;
                    bottom: 12px
                }
            }

            @media (max-width: 390px) {
                .products-row {
                    grid-template-columns:1fr 1fr
                }

                .product-card {
                    padding: 7px
                }

                .product-image {
                    height: 134px
                }

                .product-card h3 {
                    font-size: 9px
                }

                .add-cart {
                    font-size: 8px
                }

                .footer-grid {
                    grid-template-columns:1fr
                }
            }

        }
    }
}