* {
    margin: 0px;
    padding: 0px;
    outline: none;
}

body {
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}

a {
    text-decoration: none;
}

@font-face {
    font-family: IRANSans;
    src: url('../font/IranSans.ttf');
}

@font-face {
    font-family: IranNastaliq;
    src: url('../font/IranNastaliq.ttf');
}

@font-face {
    font-family: tahoma;
    src: url('../font/tahoma.ttf');
}

@font-face {
    font-family: Verdana;
    src: url('../font/Verdana.ttf');
}

@font-face {
    font-family: WYekan;
    src: url('../font/WYekan.ttf');
}

div,
a,
p,
span,
label,
input,
textarea,
button,
select,
select option,
h1,
h2,
h3,
h4,
h5,
h6,
li {
    font-family: IRANSans;
    line-height: 1.9em;
}

.nastaliq {
    font-family: IRANSans;
}
.sans {
    font-family: IRANSans;;
}

a {
    font-size: 13px;
    color: inherit;
}

p {
    font-size: 13px;
}

span {
    font-size: 13px;
}

label {
    font-size: 12px;
}

input {
    font-size: 13px;
}

textarea {
    font-size: 12px;
}

button {
    font-size: 13px;
}

div {
    font-size: 13px;
}

li {
    font-size: 13px;
}

.dialog-warning-list {
    display: block;
    background-color: #f3f3f3;
    padding: 5px;
    margin: 10px 20px;
    margin-bottom: 20px;
    border-radius: 5px;
    text-align: right;
    direction: rtl;
    display: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}

.dialog-warning-list ul {
    margin: 5px 20px;
}

.dialog-warning-list ul li {
    margin: 5px 10px;
    color: #303030;
    font-size: 13px;
}

.attr-r-ti {
    direction: rtl;
}

.attr-l-ti {
    direction: ltr;
}

.attr-r-ti:hover::after {
    content: attr(data-ti);
    white-space: nowrap;
    height: auto;
    position: absolute;
    margin-top: 10px;
    margin-right: 5px;
    background-color: rgb(87, 87, 87);
    border-radius: 3px;
    padding: 5px;
    color: white;
    display: flex;
    font-family: IRANSans, tahoma, Verdana, WYekan;
    font-size: 13px;
}

.attr-l-ti:hover::after {
    content: attr(data-ti);
    white-space: nowrap;
    height: auto;
    position: absolute;
    margin-top: 10px;
    margin-left: 5px;
    background-color: rgb(87, 87, 87);
    border-radius: 3px;
    padding: 5px;
    color: white;
    display: flex;
    font-family: IRANSans, tahoma, Verdana, WYekan;
    font-size: 13px;
}

.success-full {
    background-color: rgb(0, 155, 13);
    color: white;
    padding: 7px;
    padding-right: 15px;
    padding-left: 15px;
    border: none;
    border-radius: 5px;
}

.rectangle-button {
    padding: 7px;
    padding-right: 15px;
    padding-left: 15px;
    border-radius: 5px;
    border: none;
    font-size: 12px;
    cursor: pointer;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}

.error-full {
    background-color: #ed394e;
    color: white;
    padding: 7px;
    padding-right: 15px;
    padding-left: 15px;
    border: none;
    border-radius: 5px;
}

.error-border {
    border: 2px solid #ed394e;
    color: rgb(41, 41, 41);
    padding: 7px;
    padding-right: 15px;
    padding-left: 15px;
    border-radius: 5px;
}

.warning-full {
    background-color: #f07f33;
    color: white;
    padding: 7px;
    padding-right: 15px;
    padding-left: 15px;
    border: none;
    border-radius: 5px;
}

.warning-border {
    border: 2px solid #f07f33;
    color: rgb(41, 41, 41);
    padding: 7px;
    padding-right: 15px;
    padding-left: 15px;
    border-radius: 5px;
}

.cover-page {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0px;
    background-color: black;
    z-index: 2;
    opacity: .5;
    display: none;
}

.alert-loader {
    width: calc(100% - 40px);
    height: 100%;
    position: fixed;
    text-align: center;
    top: calc(50% - 75px);
    display: none;
    z-index: 3;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}

.alert-loader div {
    max-width: 350px;
    height: 150px;
    margin: 0 auto;
    position: relative;
}

.alert-loader div span {
    width: 30px;
    height: 30px;
    display: inline-block;
    margin: 3px;
    margin-top: 50px;
    border-radius: 50%;
    position: relative;
}

@keyframes loader_anim {
    0% {
        top: -25px;
    }
    50% {
        top: 25px;
    }
    100% {
        top: -25px;
    }
}

.alert-loader div span:nth-child(2) {
    animation: loader_anim 1s infinite;
    animation-delay: 0ms;
}

.alert-loader div span:nth-child(3) {
    animation: loader_anim 1s infinite;
    animation-delay: 100ms;
}

.alert-loader div span:nth-child(4) {
    animation: loader_anim 1s infinite;
    animation-delay: 200ms;
}

.warning-alarm-fixed {
    width: 320px;
    height: auto;
    position: fixed;
    bottom: 50px;
    left: 20px;
    overflow: hidden;
    text-align: right;
    direction: rtl;
    z-index: 10;
}

.warning-alarm-fixed .warning-time {
    width: 0%;
    height: 3px;
    display: block;
    font-weight: bold;
    background-color: rgb(122, 88, 23);
}

@keyframes warning_time {
    0% {
        width: 0%;
    }
    99% {
        width: 99%;
    }
    100% {
        width: 0%;
    }
}

.fwb {
    font-weight: bold;
}

.p0 {
    padding: 0px;
}

.p5 {
    padding: 5px;
}

.p7 {
    padding: 7px;
}

.p10 {
    padding: 10px;
}

.p15 {
    padding: 15px;
}

.p20 {
    padding: 20px;
}

.p25 {
    padding: 25px;
}

.p30 {
    padding: 30px;
}

.p35 {
    padding: 35px;
}

.p40 {
    padding: 40px;
}

.p45 {
    padding: 45px;
}

.p50 {
    padding: 50px;
}

.p100 {
    padding: 100px;
}

.pr0 {
    padding-right: 0px;
}

.pr5 {
    padding-right: 5px;
}

.pr10 {
    padding-right: 10px;
}

.pr15 {
    padding-right: 15px;
}

.pr20 {
    padding-right: 20px;
}

.pr25 {
    padding-right: 25px;
}

.pr30 {
    padding-right: 30px;
}

.pr40 {
    padding-right: 40px;
}

.pr50 {
    padding-right: 50px;
}

.pr100 {
    padding-right: 100px;
}

.pl0 {
    padding-left: 0px;
}

.pl5 {
    padding-left: 5px;
}

.pl10 {
    padding-left: 10px;
}

.pl15 {
    padding-left: 15px;
}

.pl20 {
    padding-left: 20px;
}

.pl25 {
    padding-left: 25px;
}

.pl30 {
    padding-left: 30px;
}

.pl40 {
    padding-left: 40px;
}

.pl50 {
    padding-left: 50px;
}

.pl100 {
    padding-left: 100px;
}

.pt0 {
    padding-top: 0px;
}

.pt5 {
    padding-top: 5px;
}

.pt10 {
    padding-top: 10px;
}

.pt15 {
    padding-top: 15px;
}

.pt20 {
    padding-top: 20px;
}

.pt25 {
    padding-top: 25px;
}

.pt30 {
    padding-top: 30px;
}

.pt40 {
    padding-top: 40px;
}

.pt50 {
    padding-top: 50px;
}

.pt100 {
    padding-top: 100px;
}

.pb0 {
    padding-bottom: 0px;
}

.pb5 {
    padding-bottom: 5px;
}

.pb10 {
    padding-bottom: 10px;
}

.pb15 {
    padding-bottom: 15px;
}

.pb20 {
    padding-bottom: 20px;
}

.pb25 {
    padding-bottom: 25px;
}

.pb30 {
    padding-bottom: 30px;
}

.pb40 {
    padding-bottom: 40px;
}

.pb50 {
    padding-bottom: 50px;
}

.pb100 {
    padding-bottom: 100px;
}

.m0 {
    margin: 0px;
}

.m3 {
    margin: 3px;
}

.m5 {
    margin: 5px;
}

.m10 {
    margin: 10px;
}

.m15 {
    margin: 15px;
}

.m20 {
    margin: 20px;
}

.m25 {
    margin: 25px;
}

.m30 {
    margin: 30px;
}

.m35 {
    margin: 35px;
}

.m40 {
    margin: 40px;
}

.m45 {
    margin: 45px;
}

.m50 {
    margin: 50px;
}

.m100 {
    margin: 100px;
}

.mr0 {
    margin-right: 0px;
}

.mr3 {
    margin-right: 3px;
}

.mr5 {
    margin-right: 5px;
}

.mr10 {
    margin-right: 10px;
}

.mr15 {
    margin-right: 15px;
}

.mr20 {
    margin-right: 20px;
}

.mr25 {
    margin-right: 25px;
}

.mr30 {
    margin-right: 30px;
}

.mr35 {
    margin-right: 35px;
}

.mr40 {
    margin-right: 40px;
}

.mr50 {
    margin-right: 50px;
}

.mr100 {
    margin-right: 100px;
}

.ml0 {
    margin-left: 0px;
}

.ml3 {
    margin-left: 3px;
}

.ml5 {
    margin-left: 5px;
}

.ml10 {
    margin-left: 10px;
}

.ml15 {
    margin-left: 15px;
}

.ml20 {
    margin-left: 20px;
}

.ml25 {
    margin-left: 25px;
}

.ml30 {
    margin-left: 30px;
}

.ml35 {
    margin-left: 35px;
}

.ml40 {
    margin-left: 40px;
}

.ml50 {
    margin-left: 50px;
}

.ml100 {
    margin-left: 100px;
}

.mt0 {
    margin-top: 0px;
}

.mt3 {
    margin-top: 3px;
}

.mt5 {
    margin-top: 5px;
}

.mt7 {
    margin-top: 7px;
}

.mt10 {
    margin-top: 10px;
}

.mt15 {
    margin-top: 15px;
}

.mt20 {
    margin-top: 20px;
}

.mt25 {
    margin-top: 25px;
}

.mt30 {
    margin-top: 30px;
}

.mt35 {
    margin-top: 35px;
}

.mt40 {
    margin-top: 40px;
}

.mt50 {
    margin-top: 50px;
}

.mt100 {
    margin-top: 100px;
}

.mb0 {
    margin-bottom: 0px;
}

.mb3 {
    margin-bottom: 3px;
}

.mb5 {
    margin-bottom: 5px;
}

.mb10 {
    margin-bottom: 10px;
}

.mb15 {
    margin-bottom: 15px;
}

.mb20 {
    margin-bottom: 20px;
}

.mb25 {
    margin-bottom: 25px;
}

.mb30 {
    margin-bottom: 30px;
}

.mb35 {
    margin-bottom: 35px;
}

.mb40 {
    margin-bottom: 40px;
}

.mb50 {
    margin-bottom: 50px;
}

.mb100 {
    margin-bottom: 100px;
}

.radius50d {
    border-radius: 50%
}

.radius0 {
    border-radius: 0px;
}

.radius5 {
    border-radius: 5px;
}

.radius7 {
    border-radius: 7px;
}

.radius10 {
    border-radius: 10px;
}

.radius15 {
    border-radius: 15px;
}

.radius20 {
    border-radius: 20px;
}

.radius25 {
    border-radius: 25px;
}

.radius30 {
    border-radius: 30px;
}

.radius40 {
    border-radius: 40px;
}

.radius50 {
    border-radius: 50px;
}

.radius-tr5 {
    border-top-right-radius: 5px;
}

.radius-tr7 {
    border-top-right-radius: 7px;
}

.radius-tr10 {
    border-top-right-radius: 10px;
}

.radius-tr15 {
    border-top-right-radius: 15px;
}

.radius-tr20 {
    border-top-right-radius: 20px;
}

.radius-tl5 {
    border-top-left-radius: 5px;
}

.radius-tl7 {
    border-top-left-radius: 7px;
}

.radius-tl10 {
    border-top-left-radius: 10px;
}

.radius-tl15 {
    border-top-left-radius: 15px;
}

.radius-tl20 {
    border-top-left-radius: 20px;
}

.radius-br5 {
    border-bottom-right-radius: 5px;
}

.radius-br7 {
    border-bottom-right-radius: 7px;
}

.radius-br10 {
    border-bottom-right-radius: 10px;
}

.radius-br15 {
    border-bottom-right-radius: 15px;
}

.radius-br20 {
    border-bottom-right-radius: 20px;
}

.radius-bl5 {
    border-bottom-left-radius: 5px;
}

.radius-bl7 {
    border-bottom-left-radius: 7px;
}

.radius-bl10 {
    border-bottom-left-radius: 10px;
}

.radius-bl15 {
    border-bottom-left-radius: 15px;
}

.radius-bl20 {
    border-bottom-left-radius: 20px;
}

.border-radius-br5 {
    border-bottom-right-radius: 5px;
}

.border-radius-br7 {
    border-bottom-right-radius: 7px;
}

.border-radius-br10 {
    border-bottom-right-radius: 10px;
}

.border-radius-br15 {
    border-bottom-right-radius: 15px;
}

.border-radius-br20 {
    border-bottom-right-radius: 20px;
}

.border-radius-bl5 {
    border-bottom-left-radius: 5px;
}

.border-radius-bl7 {
    border-bottom-left-radius: 7px;
}

.border-radius-bl10 {
    border-bottom-left-radius: 10px;
}

.border-radius-bl15 {
    border-bottom-left-radius: 15px;
}

.border-radius-bl20 {
    border-bottom-left-radius: 20px;
}

.shadow-hover:hover {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.shadow {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.shadow-top {
    box-shadow: 0px -4px 5px rgba(0, 0, 0, 0.2);
}

.c-eggplant {
    color: #ef394e;
}

.c-red {
    color: red;
}

.c-red-dark {
    color: #9a0000;
}

.c-purple {
    color: #da25ac;
}

.c-orange {
    color: #f87000;
}

.c-blue-light {
    color: #47c7ee;
}

.c-blue {
    color: #0288d1;
}

.c-blue-beautiful {
    color: rgb(23, 154, 172);
}

.c-blue-dark {
    color: rgb(45, 46, 56);
}

.c-white {
    color: #ffffff;
}

.c-black {
    color: #000000;
}

.c-pencil {
    color: rgb(33, 33, 37);
}

.c-green {
    color: #54a10b;
}

.c-green-light {
    color: #7dfd05;
}

.c-lemon {
    color: #a1cf22;
}

.c-lemon-light {
    color: #eef8d5;
}

.c-olive-light {
    color: #b1af46;
}

.c-olive {
    color: #807e1a;
}

.c-gray-dark {
    color: #303030;
}

.c-gray {
    color: #5f5f5f;
}

.c-gray-middle {
    color: #dfdfdf;
}

.c-gray-light {
    color: #f3f3f3;
}

.b-eggplant {
    background-color: #ef394e;
}

.b-red {
    background-color: red;
}

.b-red-dark {
    background-color: #9a0000;
}

.b-purple {
    background-color: #da25ac;
}

.b-orange-light {
    background-color: #ffe5b4;
}

.b-orange {
    background-color: #f87000;
}

.b-blue-light {
    background-color: #47c7ee;
}

.b-blue {
    background-color: #0288d1;
}

.b-blue-beautiful {
    background-color: rgb(23, 154, 172)
}

.b-blue-dark {
    background-color: rgb(45, 46, 56);
}

.b-white {
    background-color: #ffffff;
}

.b-black {
    background-color: #000000;
}

.b-pencil {
    background-color: rgb(33, 33, 37);
}

.b-green-light {
    background-color: #85ec23;
}

.b-green {
    background-color: #54a10b;
}

.b-lemon-light {
    background-color: #eef8d5;
}

.b-lemon {
    background-color: #a1cf22;
}

.b-olive-light {
    background-color: #b1af46;
}

.b-olive {
    background-color: #807e1a;
}

.b-gray-dark {
    background-color: #303030;
}

.b-gray {
    background-color: #474747;
}

.b-gray-middle {
    background-color: #dfdfdf;
}

.b-gray-light {
    background-color: #f3f3f3;
}






.back-glass {
    background: rgb(142, 20, 20);
    background: linear-gradient(90deg, rgba(142, 20, 20, 1) 0%, rgba(203, 37, 96, 1) 49%, rgba(143, 20, 140, 1) 100%);
    text-align: left;
    direction: ltr;
}

.back-glass .span1 {
    width: 15%;
    height: 25%;
    display: inline-block;
    background-color: white;
    border-radius: 7px;
    transform: rotate(45deg);
    margin-top: 100px;
    opacity: 0.05;
    position: absolute;
}

.back-glass .span2 {
    width: 130px;
    height: 90px;
    display: inline-block;
    background-color: white;
    border-radius: 7px;
    transform: rotate(90deg);
    margin-top: 140px;
    margin-left: 150px;
    opacity: 0.05;
    position: absolute;
}

.back-glass .span3 {
    width: 3px;
    height: 200px;
    display: inline-block;
    background-color: white;
    border-radius: 5px;
    transform: rotate(55deg);
    margin-top: 10px;
    margin-left: 300px;
    opacity: 0.07;
    position: absolute;
}

.back-glass .span4 {
    width: 3px;
    height: 200px;
    display: inline-block;
    background-color: white;
    border-radius: 5px;
    transform: rotate(55deg);
    margin-top: 10px;
    margin-left: 310px;
    opacity: 0.07;
    position: absolute;
}

.back-glass .span5 {
    width: 3px;
    height: 200px;
    display: inline-block;
    background-color: white;
    border-radius: 5px;
    transform: rotate(55deg);
    margin-top: 10px;
    margin-left: 320px;
    opacity: 0.07;
    position: absolute;
}


.app-slide-container {
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden;
    text-align: center;
}

.wgh-slider {
    position: relative;
    top: 50%;
    width: 100%;
    transform: translateY(-50%);
}

.wgh-slider__viewport {
    position: relative;
    height: 100%;
    width: 100%;
}

.wgh-slider__viewbox {
    display: block;
    position: relative;
    perspective: 100vw;
    margin: 0 auto;
    width: 33.3333333333%;
    max-width: 330px;
    transform-style: preserve-3d;
    z-index: 0;
}

.wgh-slider__viewbox::before {
    position: relative;
    top: 0;
    left: 0;
    display: block;
    content: "";
    height: 0;
    padding-bottom: 100%;
    width: 100%;
}

.wgh-slider__container {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    transition: transform 0.3s cubic-bezier(0.62, 0.28, 0.23, 0.99) 0.3s;
    transform-style: preserve-3d;
}

.wgh-slider-target {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    visibility: hidden;
}

input.wgh-slider-target {
    display: none;
}

.wgh-slider-target:first-of-type:last-of-type~.wgh-slider__viewport .wgh-slider-item:nth-child(1) .wgh-slider-item__trigger {
    display: none;
}

.wgh-slider-target:nth-of-type(1):checked~.wgh-slider__viewport .wgh-slider__container {
    transform: translateX(0%);
}

.wgh-slider-target:nth-of-type(2):checked~.wgh-slider__viewport .wgh-slider__container {
    transform: translateX(-40%);
}

.wgh-slider-target:nth-of-type(3):checked~.wgh-slider__viewport .wgh-slider__container {
    transform: translateX(-80%);
}

.wgh-slider-target:nth-of-type(4):checked~.wgh-slider__viewport .wgh-slider__container {
    transform: translateX(-120%);
}

.wgh-slider-target:nth-of-type(5):checked~.wgh-slider__viewport .wgh-slider__container {
    transform: translateX(-160%);
}

.wgh-slider-target:nth-of-type(6):checked~.wgh-slider__viewport .wgh-slider__container {
    transform: translateX(-200%);
}

.wgh-slider-target:nth-of-type(7):checked~.wgh-slider__viewport .wgh-slider__container {
    transform: translateX(-240%);
}

.wgh-slider-target:nth-of-type(8):checked~.wgh-slider__viewport .wgh-slider__container {
    transform: translateX(-280%);
}

.wgh-slider-item {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    transform: translate3d(0, 0, 0) rotateY(45deg);
    transition: transform 0.6s cubic-bezier(0.62, 0.28, 0.23, 0.99) 0.15s;
}

.wgh-slider-item:nth-child(1) {
    left: 0%;
}

.wgh-slider-item:nth-child(2) {
    left: 40%;
}

.wgh-slider-item:nth-child(3) {
    left: 80%;
}

.wgh-slider-item:nth-child(4) {
    left: 120%;
}

.wgh-slider-item:nth-child(5) {
    left: 160%;
}

.wgh-slider-item:nth-child(6) {
    left: 200%;
}

.wgh-slider-item:nth-child(7) {
    left: 240%;
}

.wgh-slider-item:nth-child(8) {
    left: 280%;
}

.wgh-slider-item__trigger {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    cursor: pointer;
}

.wgh-slider-target:nth-of-type(8):checked~.wgh-slider__viewport .wgh-slider-item:nth-child(8) .wgh-slider-item__trigger,
.wgh-slider-target:nth-of-type(7):checked~.wgh-slider__viewport .wgh-slider-item:nth-child(7) .wgh-slider-item__trigger,
.wgh-slider-target:nth-of-type(6):checked~.wgh-slider__viewport .wgh-slider-item:nth-child(6) .wgh-slider-item__trigger,
.wgh-slider-target:nth-of-type(5):checked~.wgh-slider__viewport .wgh-slider-item:nth-child(5) .wgh-slider-item__trigger,
.wgh-slider-target:nth-of-type(4):checked~.wgh-slider__viewport .wgh-slider-item:nth-child(4) .wgh-slider-item__trigger,
.wgh-slider-target:nth-of-type(3):checked~.wgh-slider__viewport .wgh-slider-item:nth-child(3) .wgh-slider-item__trigger,
.wgh-slider-target:nth-of-type(2):checked~.wgh-slider__viewport .wgh-slider-item:nth-child(2) .wgh-slider-item__trigger,
.wgh-slider-target:nth-of-type(1):checked~.wgh-slider__viewport .wgh-slider-item:nth-child(1) .wgh-slider-item__trigger {
    display: none;
}

.wgh-slider-item__inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-origin: center center;
    transform: scale(0.75);
    transition: transform 0.3s cubic-bezier(0.62, 0.28, 0.23, 0.99) 0s;
    z-index: 10;
}

.wgh-slider-item__inner::before,
.wgh-slider-item__inner::after {
    display: block;
    position: absolute;
    content: "";
}

.wgh-slider-item__inner::before {
    top: 24px;
    left: 24px;
    bottom: 24px;
    right: 24px;
    z-index: 0;
    transition: transform 0.3s cubic-bezier(0.62, 0.28, 0.23, 0.99) 0.15s;
    transform: translate(-24px, 12px);
    /* box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); */
}

.wgh-slider-item__inner::after {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    /* background-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #000 50%, rgba(0, 0, 0, 0) 100%); */
    background-repeat: repeat-x;
    background-size: 200% 100%;
    background-position: 0% 0%;
    transition: background-position 0.3s linear;
}

.wgh-slider-target:nth-of-type(8):checked~.wgh-slider__viewport .wgh-slider-item:nth-child(8) .wgh-slider-item__inner,
.wgh-slider-target:nth-of-type(7):checked~.wgh-slider__viewport .wgh-slider-item:nth-child(7) .wgh-slider-item__inner,
.wgh-slider-target:nth-of-type(6):checked~.wgh-slider__viewport .wgh-slider-item:nth-child(6) .wgh-slider-item__inner,
.wgh-slider-target:nth-of-type(5):checked~.wgh-slider__viewport .wgh-slider-item:nth-child(5) .wgh-slider-item__inner,
.wgh-slider-target:nth-of-type(4):checked~.wgh-slider__viewport .wgh-slider-item:nth-child(4) .wgh-slider-item__inner,
.wgh-slider-target:nth-of-type(3):checked~.wgh-slider__viewport .wgh-slider-item:nth-child(3) .wgh-slider-item__inner,
.wgh-slider-target:nth-of-type(2):checked~.wgh-slider__viewport .wgh-slider-item:nth-child(2) .wgh-slider-item__inner,
.wgh-slider-target:nth-of-type(1):checked~.wgh-slider__viewport .wgh-slider-item:nth-child(1) .wgh-slider-item__inner {
    transform: scale(1);
    transition-delay: 0.6s;
}

.wgh-slider-target:nth-of-type(8):checked~.wgh-slider__viewport .wgh-slider-item:nth-child(8) .wgh-slider-item__inner::before,
.wgh-slider-target:nth-of-type(7):checked~.wgh-slider__viewport .wgh-slider-item:nth-child(7) .wgh-slider-item__inner::before,
.wgh-slider-target:nth-of-type(6):checked~.wgh-slider__viewport .wgh-slider-item:nth-child(6) .wgh-slider-item__inner::before,
.wgh-slider-target:nth-of-type(5):checked~.wgh-slider__viewport .wgh-slider-item:nth-child(5) .wgh-slider-item__inner::before,
.wgh-slider-target:nth-of-type(4):checked~.wgh-slider__viewport .wgh-slider-item:nth-child(4) .wgh-slider-item__inner::before,
.wgh-slider-target:nth-of-type(3):checked~.wgh-slider__viewport .wgh-slider-item:nth-child(3) .wgh-slider-item__inner::before,
.wgh-slider-target:nth-of-type(2):checked~.wgh-slider__viewport .wgh-slider-item:nth-child(2) .wgh-slider-item__inner::before,
.wgh-slider-target:nth-of-type(1):checked~.wgh-slider__viewport .wgh-slider-item:nth-child(1) .wgh-slider-item__inner::before {
    transform: translate(0, 24px);
}

.wgh-slider-target:nth-of-type(8):checked~.wgh-slider__viewport .wgh-slider-item:nth-child(8) .wgh-slider-item__inner::after,
.wgh-slider-target:nth-of-type(7):checked~.wgh-slider__viewport .wgh-slider-item:nth-child(7) .wgh-slider-item__inner::after,
.wgh-slider-target:nth-of-type(6):checked~.wgh-slider__viewport .wgh-slider-item:nth-child(6) .wgh-slider-item__inner::after,
.wgh-slider-target:nth-of-type(5):checked~.wgh-slider__viewport .wgh-slider-item:nth-child(5) .wgh-slider-item__inner::after,
.wgh-slider-target:nth-of-type(4):checked~.wgh-slider__viewport .wgh-slider-item:nth-child(4) .wgh-slider-item__inner::after,
.wgh-slider-target:nth-of-type(3):checked~.wgh-slider__viewport .wgh-slider-item:nth-child(3) .wgh-slider-item__inner::after,
.wgh-slider-target:nth-of-type(2):checked~.wgh-slider__viewport .wgh-slider-item:nth-child(2) .wgh-slider-item__inner::after,
.wgh-slider-target:nth-of-type(1):checked~.wgh-slider__viewport .wgh-slider-item:nth-child(1) .wgh-slider-item__inner::after {
    background-position: -50% 0%;
}

.wgh-slider-target:nth-of-type(8):checked~.wgh-slider__viewport .wgh-slider-item:nth-child(8)~.wgh-slider-item .wgh-slider-item__inner::before,
.wgh-slider-target:nth-of-type(7):checked~.wgh-slider__viewport .wgh-slider-item:nth-child(7)~.wgh-slider-item .wgh-slider-item__inner::before,
.wgh-slider-target:nth-of-type(6):checked~.wgh-slider__viewport .wgh-slider-item:nth-child(6)~.wgh-slider-item .wgh-slider-item__inner::before,
.wgh-slider-target:nth-of-type(5):checked~.wgh-slider__viewport .wgh-slider-item:nth-child(5)~.wgh-slider-item .wgh-slider-item__inner::before,
.wgh-slider-target:nth-of-type(4):checked~.wgh-slider__viewport .wgh-slider-item:nth-child(4)~.wgh-slider-item .wgh-slider-item__inner::before,
.wgh-slider-target:nth-of-type(3):checked~.wgh-slider__viewport .wgh-slider-item:nth-child(3)~.wgh-slider-item .wgh-slider-item__inner::before,
.wgh-slider-target:nth-of-type(2):checked~.wgh-slider__viewport .wgh-slider-item:nth-child(2)~.wgh-slider-item .wgh-slider-item__inner::before,
.wgh-slider-target:nth-of-type(1):checked~.wgh-slider__viewport .wgh-slider-item:nth-child(1)~.wgh-slider-item .wgh-slider-item__inner::before {
    transform: translate(24px, 12px);
}

.wgh-slider-target:nth-of-type(8):checked~.wgh-slider__viewport .wgh-slider-item:nth-child(8)~.wgh-slider-item .wgh-slider-item__inner::after,
.wgh-slider-target:nth-of-type(7):checked~.wgh-slider__viewport .wgh-slider-item:nth-child(7)~.wgh-slider-item .wgh-slider-item__inner::after,
.wgh-slider-target:nth-of-type(6):checked~.wgh-slider__viewport .wgh-slider-item:nth-child(6)~.wgh-slider-item .wgh-slider-item__inner::after,
.wgh-slider-target:nth-of-type(5):checked~.wgh-slider__viewport .wgh-slider-item:nth-child(5)~.wgh-slider-item .wgh-slider-item__inner::after,
.wgh-slider-target:nth-of-type(4):checked~.wgh-slider__viewport .wgh-slider-item:nth-child(4)~.wgh-slider-item .wgh-slider-item__inner::after,
.wgh-slider-target:nth-of-type(3):checked~.wgh-slider__viewport .wgh-slider-item:nth-child(3)~.wgh-slider-item .wgh-slider-item__inner::after,
.wgh-slider-target:nth-of-type(2):checked~.wgh-slider__viewport .wgh-slider-item:nth-child(2)~.wgh-slider-item .wgh-slider-item__inner::after,
.wgh-slider-target:nth-of-type(1):checked~.wgh-slider__viewport .wgh-slider-item:nth-child(1)~.wgh-slider-item .wgh-slider-item__inner::after {
    background-position: -100% 0%;
}

.wgh-slider-item-figure {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.wgh-slider-item-figure__image {
    position: absolute;
    display: block;
    max-width: 100%;
    max-height: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: 0 auto;
    z-index: 1;
    opacity: 1;
}

.wgh-slider-item-figure__caption {
    position: absolute;
    display: block;
    overflow: hidden;
    left: 0;
    right: 0;
    bottom: 0;
    color: #fff;
    padding: 24px;
    background-image: linear-gradient(0deg, #3f3f3f 0%, transparent 100%);
    z-index: 2;
}

.wgh-slider-item-figure__caption a {
    display: inline-block;
    text-decoration: none;
    font-size: 11px;
    /* line-height: 20px; */
    font-weight: bold;
    color: #fff;
}

.wgh-slider-item-figure__caption span {
    display: block;
    font-size: 10px;
    line-height: 16px;
}

.wgh-slider-target:nth-of-type(8):checked~.wgh-slider__viewport .wgh-slider-item:nth-child(8),
.wgh-slider-target:nth-of-type(7):checked~.wgh-slider__viewport .wgh-slider-item:nth-child(7),
.wgh-slider-target:nth-of-type(6):checked~.wgh-slider__viewport .wgh-slider-item:nth-child(6),
.wgh-slider-target:nth-of-type(5):checked~.wgh-slider__viewport .wgh-slider-item:nth-child(5),
.wgh-slider-target:nth-of-type(4):checked~.wgh-slider__viewport .wgh-slider-item:nth-child(4),
.wgh-slider-target:nth-of-type(3):checked~.wgh-slider__viewport .wgh-slider-item:nth-child(3),
.wgh-slider-target:nth-of-type(2):checked~.wgh-slider__viewport .wgh-slider-item:nth-child(2),
.wgh-slider-target:nth-of-type(1):checked~.wgh-slider__viewport .wgh-slider-item:nth-child(1) {
    transform: translate3d(0, 0, 0) rotateY(0deg);
    z-index: 9999;
}

.wgh-slider-target:nth-of-type(8):checked~.wgh-slider__viewport .wgh-slider-item:nth-child(8)~.wgh-slider-item,
.wgh-slider-target:nth-of-type(7):checked~.wgh-slider__viewport .wgh-slider-item:nth-child(7)~.wgh-slider-item,
.wgh-slider-target:nth-of-type(6):checked~.wgh-slider__viewport .wgh-slider-item:nth-child(6)~.wgh-slider-item,
.wgh-slider-target:nth-of-type(5):checked~.wgh-slider__viewport .wgh-slider-item:nth-child(5)~.wgh-slider-item,
.wgh-slider-target:nth-of-type(4):checked~.wgh-slider__viewport .wgh-slider-item:nth-child(4)~.wgh-slider-item,
.wgh-slider-target:nth-of-type(3):checked~.wgh-slider__viewport .wgh-slider-item:nth-child(3)~.wgh-slider-item,
.wgh-slider-target:nth-of-type(2):checked~.wgh-slider__viewport .wgh-slider-item:nth-child(2)~.wgh-slider-item,
.wgh-slider-target:nth-of-type(1):checked~.wgh-slider__viewport .wgh-slider-item:nth-child(1)~.wgh-slider-item {
    transform: translate3d(0, 0, 0) rotateY(-45deg) !important;
}






/* product slider style */

.wrapper {
    position: relative;
}

.wrapper .arrow {
    top: calc(50% - 50px);
    height: 50px;
    width: 50px;
    cursor: pointer;
    font-size: 1.25rem;
    position: absolute;
    text-align: center;
    line-height: 50px;
    border-radius: 50%;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.23);
    transform: translateY(-50%);
    transition: transform 0.1s linear;
    z-index: 2;
}

.wrapper .arrow:active {
    transform: translateY(-50%) scale(0.85);
}

.wrapper .arrow:first-child {
    right: calc(100% - 50px);
    transform: rotate(90deg);
}

.wrapper .arrow:last-child {
    right: 0px;
    transform: rotate(-90deg);
}

.wrapper .carousel-product {
    width: calc(100% - 0px);
    display: grid;
    grid-auto-flow: column;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 0px;
    border-radius: 8px;
    scroll-behavior: smooth;
    scrollbar-width: none;
    direction: rtl;
}

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

.carousel-product.no-transition {
    scroll-behavior: auto;
}

.carousel-product.dragging {
    scroll-snap-type: none;
    scroll-behavior: auto;
}

.carousel-product.dragging .card {
    cursor: grab;
    user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    text-align: right;
}

.carousel-product :where(.card, .img) {
    display: flex;
    justify-content: center;
    align-items: center;
}
.carousel-product :where(.img) {
    display: flex;
}

.carousel-product .card {
    scroll-snap-align: start;
    /* height: 342px; */
    list-style: none;
    cursor: pointer;
    padding-bottom: 15px;
    flex-direction: column;
    border-radius: 20px;
}

@media screen and (max-width: 350px) {
    .wrapper .carousel-product {
        grid-auto-columns: calc((100% / 1) - 9px);
    }
}

@media screen and (min-width: 351px) {
    .wrapper .carousel-product {
        grid-auto-columns: calc((100% / 2) - 9px);
    }
}

@media screen and (min-width: 650px) {
    .wrapper .carousel-product {
        grid-auto-columns: calc((100% / 3) - 9px);
    }
}

@media screen and (min-width: 900px) {
    .wrapper .carousel-product {
        grid-auto-columns: calc((100% / 4) - 9px);
    }
}


@media screen and (min-width: 1100px) {
    .wrapper .carousel-product {
        grid-auto-columns: calc((100% / 5) - 9px);
    }
}

@media screen and (min-width: 1300px) {
    .wrapper .carousel-product {
        grid-auto-columns: calc((100% / 6) - 2px);
    }
}

@media screen and (min-width: 1500px) {
    .wrapper .carousel-product {
        grid-auto-columns: calc((100% / 7) - 2px);
    }
}

@media screen and (min-width: 1750px) {
    .wrapper .carousel-product {
        grid-auto-columns: calc((100% / 8) - 2px);
    }
}

@media screen and (min-width: 1950px) {
    .wrapper .carousel-product {
        grid-auto-columns: calc((100% / 9) - 2px);
    }
}

@media screen and (min-width: 2200px) {
    .wrapper .carousel-product {
        grid-auto-columns: calc((100% / 10) - 2px);
    }
}

@media screen and (min-width: 2400px) {
    .wrapper .carousel-product {
        grid-auto-columns: calc((100% / 11) - 2px);
    }
}


/* loader animation */


.circle-rotate-anim {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin: 0px 5px;
    animation: big_small_anim 2s infinite;
}

.circle-rotate-loader {
    animation: rotate_anim 4s infinite;
}

@keyframes big_small_anim {
    0% {
        width: 20px;
        height: 20px;
    }
    50% {
        width: 30px;
        height: 30px;
    }
    100% {
        width: 20px;
        height: 20px;
    }
}

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





p {
    margin-bottom: 0px;
    line-height: 1.8rem;
}


.b-main {
    background-color: #e1d5b7;
}

.c-main-color {
    color: rgb(48, 48, 48);
}

.c-title {
    color: #afa385;
}

.white-mode {
    background-color: white;
    color: rgb(36, 36, 36);
}

.light-mode {
    background-color: rgb(250, 250, 250);
    color: rgb(36, 36, 36);
}

.light-mode-2 {
    background-color: rgb(240, 240, 240);
    color: rgb(80, 80, 80);
}

.b-light-mode {
    background-color: rgb(250, 250, 250);
}

.b-light-mode-2 {
    background-color: rgb(240, 240, 240);
}

.c-light-mode {
    color: rgb(56, 56, 56);
}

.c-light-mode-2 {
    color: rgb(80, 80, 80);
}

.black-mode {
    background-color: rgb(14, 14, 14);
    color: rgb(255, 255, 255);
}

.dark-mode {
    background-color: rgb(36, 36, 36);
    color: rgb(255, 255, 255);
}

.dark-mode-2 {
    background-color: rgb(80, 80, 80);
    color: rgb(255, 255, 255);
}

.b-dark-mode {
    background-color: rgb(36, 36, 36);
}

.b-dark-mode-2 {
    background-color: rgb(80, 80, 80);
}

.c-dark-mode {
    color: rgb(255, 255, 255);
}

.c-dark-mode-2 {
    color: rgb(255, 255, 255);
}