@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: 900;
    src: url('../fonts/eot/IRANSansWeb_Black.eot');
    src: url('../fonts/eot/IRANSansWeb_Black.eot?#iefix') format('embedded-opentype'),
    url('../fonts/woff2/IRANSansWeb_Black.woff2') format('woff2'),
    url('../fonts/woff/IRANSansWeb_Black.woff') format('woff'),
    url('../fonts/ttf/IRANSansWeb_Black.ttf') format('truetype');
}

@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: bold;
    src: url('../fonts/eot/IRANSansWeb_Bold.eot');
    src: url('../fonts/eot/IRANSansWeb_Bold.eot?#iefix') format('embedded-opentype'),
    url('../fonts/woff2/IRANSansWeb_Bold.woff2') format('woff2'),
    url('../fonts/woff/IRANSansWeb_Bold.woff') format('woff'),
    url('../fonts/ttf/IRANSansWeb_Bold.ttf') format('truetype');
}

@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/eot/IRANSansWeb_Medium.eot');
    src: url('../fonts/eot/IRANSansWeb_Medium.eot?#iefix') format('embedded-opentype'),
    url('../fonts/woff2/IRANSansWeb_Medium.woff2') format('woff2'),
    url('../fonts/woff/IRANSansWeb_Medium.woff') format('woff'),
    url('../fonts/ttf/IRANSansWeb_Medium.ttf') format('truetype');
}

@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/eot/IRANSansWeb_Light.eot');
    src: url('../fonts/eot/IRANSansWeb_Light.eot?#iefix') format('embedded-opentype'),
    url('../fonts/woff2/IRANSansWeb_Light.woff2') format('woff2'),
    url('../fonts/woff/IRANSansWeb_Light.woff') format('woff'),
    url('../fonts/ttf/IRANSansWeb_Light.ttf') format('truetype');
}

@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: 200;
    src: url('../fonts/eot/IRANSansWeb_UltraLight.eot');
    src: url('../fonts/eot/IRANSansWeb_UltraLight.eot?#iefix') format('embedded-opentype'),
    url('../fonts/woff2/IRANSansWeb_UltraLight.woff2') format('woff2'),
    url('../fonts/woff/IRANSansWeb_UltraLight.woff') format('woff'),
    url('../fonts/ttf/IRANSansWeb_UltraLight.ttf') format('truetype');
}

@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/eot/IRANSansWeb.eot');
    src: url('../fonts/eot/IRANSansWeb.eot?#iefix') format('embedded-opentype'),
    url('../fonts/woff2/IRANSansWeb.woff2') format('woff2'),
    url('../fonts/woff/IRANSansWeb.woff') format('woff'),
    url('../fonts/ttf/IRANSansWeb.ttf') format('truetype');
}

@font-face {
    font-family: AdobeArabic;
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/AdobeArabic-Regular.otf');
}

@font-face {
    font-family: Persian_Gulf;
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/B_Persian_Gulf.TTF');
}

:root {
    --primary: #AF5C2D;
    --font-color: #592000;
    --bg-primary: #AF5C2D;
    --new-color: #C7248F;
}

.primary-color {
    color: var(--primary);
}

.bg-primary-color {
    background-color: var(--primary);
}

.font-color {
    color: var(--font-color);
}

.new-color {
    color: var(--new-color);
}

.new-bgcolor {
    background-color: var(--new-color);
}

body {
    font-family: "IRANSans", sans-serif;
    line-height: 1.7;
    font-size: 0.9em;
    background-color: #f5f5f5;
}

header {
    max-height: 400px;
    height: 400px;
    position: relative;
}

.s-header {
    height: 100%;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(../_IMG/header.png);
    max-width: 1320px;
    margin: 0 auto;
    position: relative;
}

.s-header:after {
    content: '';
    background-image: url(../_IMG/shvz-left.png);
    background-size: contain;
    position: absolute;
    left: 0;
    bottom: -60px;
    width: 120px;
    height: 120px;
    display: block;
    background-repeat: no-repeat;
    z-index: 1;
}

.s-header:before {
    content: '';
    background-image: url(../_IMG/shvz-right.png);
    background-size: contain;
    position: absolute;
    right: 0;
    bottom: -60px;
    width: 120px;
    height: 120px;
    display: block;
    background-repeat: no-repeat;
    z-index: 1;
}

h2 {
    text-align: center;
    font-weight: 900;
    color: var(--new-color);
    font-size: 27px;
}

.logo {
    max-width: 350px;
    position: relative;
    z-index: 3;
}

.s-header-link a {
    position: relative;
    background-color: #EDE3BE;
    border-radius: 15px;
    padding: .5em 3.5em;
    font-size: 1em;
    text-decoration: none;
    margin: 0 1rem;
    color: var(--font-color);
    z-index: 2;
    transition: all .5s;
    box-shadow: 0 15px 60px rgba(0, 0, 0, 0.15);
    text-align: center;
}

.s-header-link a:hover {
    box-shadow: none;
}

.s-header--bottom {
    max-width: 870px;
    margin: -50px auto 0;
    position: relative;
    z-index: 3;
}

.cat-card a {
    line-height: 1.5;
}

.cat-card img {
    box-shadow: 0 4px 4px rgb(253, 199, 149, .25);
}

.cat-card h2 a:hover {
    color: var(--primary);
}

.wheel {
    margin-top: -30px;
}

main .box {
    position: relative;
    background-color: #fff;
    padding: 0 30px;
}

.c_box_1 {
    top: 10px;
    right: 10px;
}

.c_box_2 {
    top: 10px;
    left: 10px;
}

.c_box_3 {
    bottom: 10px;
    left: 10px;
}

.c_box_4 {
    bottom: 10px;
    right: 10px;
}

main .box .title {
    color: #a0a0a0;
    font-size: 22px;
}


main .box img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
}

.box form {
    max-width: 390px;
    margin: 5px auto 0;
}

.box form input {
    border-radius: 10px;
    box-shadow: none;
    border: 1px solid #bfbfbf;
    padding: 12px 15px;
    color: var(--new-color);
    font-weight: 300;
    width: 100%;
    font-size: 17px;
}

.box form input:focus {
    outline: none;
}

.box form button {
    background-color: var(--primary);
    color: #fff;
    border-radius: 7px;
    border: none;
    padding: 2px 17px;
    position: absolute;
    left: -12px;
    top: 5px;
}

.mobile-form .ircode {
    position: relative;
}

.mobile-form .ircode:before {
    content: '+98 | ';
    position: absolute;
    left: 23px;
    top: -5px;
    direction: ltr;
    font-size: 20px;
    color: var(--new-color);
}

.alert {
    position: relative;
    color: #CA473A;
    padding: 0;
    padding-right: 25px;
    margin-top: 10px;
    display: block;
}

.alert:before {
    content: '';
    width: 20px;
    height: 20px;
    display: block;
    background-size: 70%;
    background-image: url(../_IMG/close.png);
    background-color: #CA473A;
    border-radius: 50%;
    background-position: center;
    position: absolute;
    right: 0;
    top: 0;
}

.resend {
    text-decoration: none;
    font-size: 13px;
}

.sping-btn {
    cursor: pointer;
    z-index: 3;
    height: 55px;
    position: relative;
    bottom: -10px;
    transition: all 0.2s;
}
.sping-btn:hover {
    transform: scale(1.02);
}
.mobile-sping-btn {
    display: block;
    margin: 0 auto;
    cursor: pointer;
}

.logo-wrapper {
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    border-radius: 30px;
    margin: 15px;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    padding: 10px;
    background-color: #fff;
    transition: all .3s;
}

.logo-wrapper:hover {
    transform: scale(1.03);
}

#canvasContainer {
    background-image: url(../_IMG/spin/Frame.png);
    background-repeat: no-repeat;
    background-position: center;
    width: 360px;
    height: 375px;
    margin: 0 auto;
    position: relative;
}

#canvasContainer:before {
    content: '';
    background-image: url(../_IMG/spin/Frame-out1.png);
    width: 360px;
    height: 375px;
    z-index: 2;
    position: absolute;
    display: block;
    background-size: 360px 377px;
    top: 2px;
}

#canvas {
    position: absolute;
    right: 0;
    left: 0;
    top: 28px;
    margin: 0 auto;
}

.pin {
    width: 14px;
    height: 75px;
    z-index: 4;
    position: absolute;
    display: block;
    right: calc(50% - 7px);
    top: 3px;
}

.centerbullet {
    width: 60px;
    height: 57px;
    z-index: 4;
    position: absolute;
    display: block;
    right: calc(50% - 30px);
    top: calc(50% - 20px);
}

.brand-img {
    width: 100%;
    height: auto;
    margin: 0 auto;
    transition: all 0.2s;
}
.brand-img:hover {
    transform: scale(1.01);
}


.table-wrapper {
    margin: 30px 0;
    max-height: 250px;
    overflow-y: scroll;
    position: relative;
    background-color: #fff;
    border-radius: 7px;
}

.table {
    background-color: #fff;
    padding: 0 1em;
    border-radius: 10px;
    max-height: 250px;
    overflow-y: scroll;
}

.table td,.table th {
    padding-right: 20px !important;
}

.scroll {
    position: absolute;
    background-color: #ddd;
    padding: 2px 30px;
    border-radius: 3px;
    bottom: 40px;
    left: 0;
    right: -20px;
    margin: 0 auto;
    max-width: 180px;
    opacity: 0.4;
}


.shake-slow {
    display: inherit;
    transform-origin: center center;
}


.shake-slow:hover,
.shake-trigger:hover .shake-slow, .shake-slow.shake-freeze, .shake-slow.shake-constant {
    animation-name: shake-slow;
    animation-duration: 105s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.shake-slow1:hover,
.shake-trigger1:hover .shake-slow1, .shake-slow1.shake-freeze, .shake-slow1.shake-constant {
    animation-name: shake-slow;
    animation-duration: 85s;
    animation-timing-function: ease-in;
    animation-iteration-count: infinite;
}

.shake-slow2, .shake-slow2.shake-constant {
    animation-name: shake-slow;
    animation-duration: 120s;
    animation-timing-function: ease-in;
    animation-iteration-count: infinite;
    animation-delay: 2s;
}

@keyframes shake-slow {
    2% {
        transform: translate(20px, 10px) rotate(-0.5deg);
    }
    4% {
        transform: translate(-5px, -9px) rotate(-2.5deg);
    }
    6% {
        transform: translate(25px, 13px) rotate(2.5deg);
    }
    8% {
        transform: translate(5px, 4px) rotate(1.5deg);
    }
    10% {
        transform: translate(-4px, -8px) rotate(-0.5deg);
    }
    12% {
        transform: translate(-20px, -30px) rotate(1.5deg);
    }
    14% {
        transform: translate(0px, 6px) rotate(3.5deg);
    }
    16% {
        transform: translate(8px, 2px) rotate(2.5deg);
    }
    18% {
        transform: translate(-4px, -1px) rotate(1.5deg);
    }
    20% {
        transform: translate(10px, 2px) rotate(-2.5deg);
    }
    22% {
        transform: translate(-2px, -4px) rotate(1.5deg);
    }
    24% {
        transform: translate(-8px, 5px) rotate(-0.5deg);
    }
    26% {
        transform: translate(-3px, -5px) rotate(3.5deg);
    }
    28% {
        transform: translate(6px, 2px) rotate(2.5deg);
    }
    30% {
        transform: translate(-5px, -2px) rotate(2.5deg);
    }
    32% {
        transform: translate(5px, -6px) rotate(-2.5deg);
    }
    34% {
        transform: translate(5px, -7px) rotate(-1.5deg);
    }
    36% {
        transform: translate(3px, -9px) rotate(0.5deg);
    }
    38% {
        transform: translate(6px, -2px) rotate(-0.5deg);
    }
    40% {
        transform: translate(-4px, -2px) rotate(0.5deg);
    }
    42% {
        transform: translate(7px, -8px) rotate(1.5deg);
    }
    44% {
        transform: translate(-4px, 10px) rotate(-1.5deg);
    }
    46% {
        transform: translate(-3px, 8px) rotate(-1.5deg);
    }
    48% {
        transform: translate(3px, 6px) rotate(-0.5deg);
    }
    50% {
        transform: translate(4px, -1px) rotate(-2.5deg);
    }
    52% {
        transform: translate(1px, 5px) rotate(-0.5deg);
    }
    54% {
        transform: translate(-3px, 7px) rotate(-2.5deg);
    }
    56% {
        transform: translate(3px, 3px) rotate(-2.5deg);
    }
    58% {
        transform: translate(-8px, -5px) rotate(-1.5deg);
    }
    60% {
        transform: translate(1px, -9px) rotate(3.5deg);
    }
    62% {
        transform: translate(0px, -3px) rotate(-0.5deg);
    }
    64% {
        transform: translate(4px, 2px) rotate(2.5deg);
    }
    66% {
        transform: translate(4px, 10px) rotate(1.5deg);
    }
    68% {
        transform: translate(1px, 2px) rotate(-2.5deg);
    }
    70% {
        transform: translate(-9px, 10px) rotate(0.5deg);
    }
    72% {
        transform: translate(-5px, -8px) rotate(0.5deg);
    }
    74% {
        transform: translate(-3px, -8px) rotate(3.5deg);
    }
    76% {
        transform: translate(-1px, 8px) rotate(3.5deg);
    }
    78% {
        transform: translate(-5px, -4px) rotate(0.5deg);
    }
    80% {
        transform: translate(-6px, 1px) rotate(1.5deg);
    }
    82% {
        transform: translate(-5px, -7px) rotate(1.5deg);
    }
    84% {
        transform: translate(1px, -6px) rotate(-0.5deg);
    }
    86% {
        transform: translate(-8px, -4px) rotate(3.5deg);
    }
    88% {
        transform: translate(-6px, 7px) rotate(-1.5deg);
    }
    90% {
        transform: translate(9px, 6px) rotate(-2.5deg);
    }
    92% {
        transform: translate(9px, -8px) rotate(3.5deg);
    }
    94% {
        transform: translate(3px, 3px) rotate(2.5deg);
    }
    96% {
        transform: translate(-6px, -7px) rotate(2.5deg);
    }
    98% {
        transform: translate(5px, -2px) rotate(-0.5deg);
    }
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
}


.shake-horizontal {
    display: inherit;
    transform-origin: center center;
}

.shake-freeze,
.shake-constant.shake-constant--hover:hover,
.shake-trigger:hover .shake-constant.shake-constant--hover {
    animation-play-state: paused;
}

.shake-freeze:hover,
.shake-trigger:hover .shake-freeze, .shake-horizontal:hover,
.shake-trigger:hover .shake-horizontal {
    animation-play-state: running;
}

@keyframes shake-horizontal {
    2% {
        transform: translate(-50px, 0) rotate(0);
    }
    4% {
        transform: translate(-50px, 0) rotate(0);
    }
    6% {
        transform: translate(30px, 0) rotate(0);
    }
    8% {
        transform: translate(10px, 10px) rotate(0);
    }
    10% {
        transform: translate(10px, 0) rotate(0);
    }
    12% {
        transform: translate(60px, 0) rotate(0);
    }
    14% {
        transform: translate(-20px, 0) rotate(0);
    }
    16% {
        transform: translate(50px, 0) rotate(0);
    }
    18% {
        transform: translate(70px, 0) rotate(0);
    }
    20% {
        transform: translate(3px, 0) rotate(0);
    }
    22% {
        transform: translate(-1px, 0) rotate(0);
    }
    24% {
        transform: translate(-7px, 0) rotate(0);
    }
    26% {
        transform: translate(1px, 0) rotate(0);
    }
    28% {
        transform: translate(6px, 0) rotate(0);
    }
    30% {
        transform: translate(10px, 0) rotate(0);
    }
    32% {
        transform: translate(6px, 0) rotate(0);
    }
    34% {
        transform: translate(5px, 0) rotate(0);
    }
    36% {
        transform: translate(-1px, 0) rotate(0);
    }
    38% {
        transform: translate(1px, 0) rotate(0);
    }
    40% {
        transform: translate(-9px, 0) rotate(0);
    }
    42% {
        transform: translate(5px, 0) rotate(0);
    }
    44% {
        transform: translate(-9px, 0) rotate(0);
    }
    46% {
        transform: translate(4px, 0) rotate(0);
    }
    48% {
        transform: translate(0px, 0) rotate(0);
    }
    50% {
        transform: translate(-7px, 0) rotate(0);
    }
    52% {
        transform: translate(8px, 0) rotate(0);
    }
    54% {
        transform: translate(7px, 0) rotate(0);
    }
    56% {
        transform: translate(9px, 0) rotate(0);
    }
    58% {
        transform: translate(10px, 0) rotate(0);
    }
    60% {
        transform: translate(-6px, 0) rotate(0);
    }
    62% {
        transform: translate(8px, 0) rotate(0);
    }
    64% {
        transform: translate(8px, 0) rotate(0);
    }
    66% {
        transform: translate(-9px, 0) rotate(0);
    }
    68% {
        transform: translate(-2px, 0) rotate(0);
    }
    70% {
        transform: translate(-8px, 0) rotate(0);
    }
    72% {
        transform: translate(4px, 0) rotate(0);
    }
    74% {
        transform: translate(4px, 0) rotate(0);
    }
    76% {
        transform: translate(-9px, 0) rotate(0);
    }
    78% {
        transform: translate(-9px, 0) rotate(0);
    }
    80% {
        transform: translate(7px, 0) rotate(0);
    }
    82% {
        transform: translate(-5px, 0) rotate(0);
    }
    84% {
        transform: translate(-5px, 0) rotate(0);
    }
    86% {
        transform: translate(4px, 0) rotate(0);
    }
    88% {
        transform: translate(9px, 0) rotate(0);
    }
    90% {
        transform: translate(-6px, 0) rotate(0);
    }
    92% {
        transform: translate(2px, 0) rotate(0);
    }
    94% {
        transform: translate(8px, 0) rotate(0);
    }
    96% {
        transform: translate(-1px, 0) rotate(0);
    }
    98% {
        transform: translate(-3px, 0) rotate(0);
    }
    0%, 100% {
        transform: translate(0, 0) rotate(0);
    }
}

.shake-horizontal:hover,
.shake-trigger:hover .shake-horizontal, .shake-horizontal.shake-freeze, .shake-horizontal.shake-constant {
    animation-name: shake-horizontal;
    animation-duration: 120s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.shake-rotate {
    display: inherit;
    transform-origin: center center; }

.shake-freeze,
.shake-constant.shake-constant--hover:hover,
.shake-trigger:hover .shake-constant.shake-constant--hover {
    animation-play-state: paused; }

.shake-freeze:hover,
.shake-trigger:hover .shake-freeze, .shake-rotate:hover,
.shake-trigger:hover .shake-rotate {
    animation-play-state: running; }


.banner a {
    display: block;
    width: 100%;
}

.t_info {
    color: #788af6;
}

@media screen and (min-width: 600px) {
    .brand-logo {
        position: relative;
        max-width: 516px;
        margin: 0 auto;
    }

    .brand-logo:before {
        content: '';
        background-image: url(../_IMG/Frame.png);
        background-size: 100%;
        width: 103px;
        height: 105px;
        position: absolute;
        right: -70px;
        top: 0;
    }

    .brand-logo:after {
        content: '';
        background-image: url(../_IMG/Frame-1.png);
        background-size: 100%;
        width: 103px;
        height: 105px;
        position: absolute;
        left: -70px;
        top: 0;
    }

}

@media screen and (min-width: 768px) {
    .wheel {
        margin-top: 35px;
    }

    .s-header--bottom {
        margin: -90px auto 0;
    }

    .sping-btn {
        bottom: -30px;
    }
}

@media screen and (min-width: 992px) {
    .s-header {
        background-size: contain;
    }

    .leaf {
        background-size: auto;
    }

    .logo {
        max-width: 600px;
    }

    #canvasContainer {
        width: 400px;
        height: 405px;
        background-size: 400px 405px;
    }

    #canvasContainer::before {
        width: 400px;
        height: 405px;
        background-size: 400px 405px;
    }

    #canvas {
        width: 365px !important;
    }

    .wheel {
        margin-top: 0;
    }
}

@media screen and (min-width: 1200px) {

    header {
        height: 500px;
        max-height: 500px;
    }

    #canvasContainer {
        width: 470px;
        height: 475px;
        background-size: 470px 475px;
        margin-top: -30px;
    }

    #canvasContainer::before {
        width: 472px;
        height: 476px;
        background-size: 478px 483px;
        right: 2px;
        top: 0;
    }

    #canvas {
        width: 437px !important;
    }

    .s-header::before {
        right: 0;
        bottom: -40px;
        width: 160px;
        height: 160px;
    }
    .s-header::after {
        left: 0;
        bottom: -40px;
        width: 160px;
        height: 160px;
    }

    h2 {
        font-size: 30px;
    }
}
@media screen and (min-width: 1400px){
    .s-header::before {
        right: -40px;
    }
    .s-header::after {
        left: -40px;
    }
}
@media screen and (min-width: 1600px) {
    .leaf:after {
        content: '';
        background-image: url('../_IMG/leaf.png');
        width: 100%;
        height: 100%;
        display: block;
        background-repeat: no-repeat;
        position: absolute;
        right: 20%;
        top: 0;
    }

    .leaf:before {
        content: '';
        background-image: url('../_IMG/leaf.png');
        width: 100%;
        height: 100%;
        display: block;
        background-repeat: no-repeat;
        position: absolute;
        right: -80%;
        top: 0;
    }
}
.buy-btn {
    margin-right: 25px;
    margin-left: 25px
}
@media screen and (min-width: 600px) {
    .buy-btn {
        margin-right: 155px;
        margin-left: 155px
    }
}
@media screen and (max-width: 600px) {
    .button-text{
        margin-bottom: 3rem !important;
    }
}
.s-header-link a{
    padding:.5em 2.5em !important;
}