@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');
}

@font-face {
    font-family: "Yekan-Bakh";
    src: url(../fonts/YekanBakhFaNum-VF.woff),
    src: url(../fonts/YekanBakhFaNum-VF.woff2);
}

:root {
    --color1: #033f7a;
    --color2: #ce2e52;
    --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: "Yekan-Bakh";
    line-height: 1.7;
    font-size: 0.9em;
    background-color: #f5f5f5;
}

header {
    max-width: 1200px;
    margin: 0 auto;
}

header img {
    width: 100%;
    height: auto;
}

.s-header {

}

.h2 {
    max-width: 335px;
}

.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 {

}

main .box {
    position: relative;
    background: #EAECEE;
    border-radius: 37px;
    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 {
    font-weight: 900;
    font-size: 26px;
    color: var(--color1);
}


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

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

.box form.mobile-entry input {
    border-radius: 10px;
    box-shadow: none;
    border: 1px solid #bfbfbf;
    padding: 12px 15px;
    color: var(--color1);
    width: 100%;
    font-size: 17px;
    text-align: center;
    padding-left: 50px;
    font-weight: 500;
}

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

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

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

.alert {
    position: relative;
    color: var(--color2);
    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: var(--color2);
    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;
    background-repeat: no-repeat;
    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: 55px;
}

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

.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: var(--color2);
    font-weight: 500;
    font-size: 13px;
}

.wheel-back {
    background: #CE2E52;
    margin-top: 170px;
    height: 790px;
}

.wheel-back > .container {
    position: relative;
    top: -230px;
}

.custom-btn {
    background-color: var(--color1);
    padding: 14px 0;
    max-width: 390px;
    display: block;
    margin: 0 auto;
    text-align: center;
    color: #fff;
    text-decoration: none;
    border-radius: 20px;
    font-size: 25px;
    font-weight: 500;
    transition: all .3s;
    cursor: pointer;
    width: 100%;
    box-shadow: none;
    border: 0;
}

.custom-btn:hover {
    background-color: var(--color2);
    color: #fff;
}

.wheel-btn {
    display: block;
    width: 100%;
    max-width: 470px;
    text-align: center;
    font-size: 36px;
    font-weight: 700;
    text-decoration: none;
    color: #fff;
    position: relative;
    margin: 0 auto;
    transition: all .2s;
}

.accordion-button::after {
    content: '';
    background: url("../_IMG/Vector.png");
    width: 18px;
    height: 28px;
    display: block;
    position: absolute;
    top: calc(50% - 14px);
    right: 45px;
    transition: all .3s;
}

.accordion-button:not(.collapsed)::after {
    background: url("../_IMG/Vector.png");
    transform: rotate(-90deg);

}

.wheel-btn:hover {
    color: #fff;
}

.wheel-btn:hover:before {
    transform: translateX(-5px);
}

.info {
    display: block;
    text-align: center;
    margin: 0 auto;
    background-color: #fff;
    padding: 15px 40px;
    border-radius: 32px;
    font-size: 14px;
    font-weight: 700;
    color: var(--color1);
}

.info-mobile {
    background-color: #fff;
    padding: 15px 40px;
    border-radius: 32px;
    font-size: 14px;
    list-style-type: none;
    color: var(--color1);
    font-weight: 500;
    line-height: 1.8;
}

.info-mobile li {
    margin: 17px 0;
    font-size: 15px;
}

.accordion-item {
    background: transparent !important;
    border: none !important;
    color: #fff;
}

.accordion-button {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    color: #fff;
    font-size: 25px;
    font-weight: 500;
    padding-right: 80px;
}

.accordion-button:not(.collapsed) {
    color: #fff;
}

.banners {
    background: #F0F0F0;
    border-radius: 38px;
    padding-top: 50px;
    margin-top: -40px;
    box-shadow: 0 2px 25px 0 rgba(0, 0, 0, .07);
}

footer {
    background-color: var(--color1);
    margin-top: 100px;
    position: relative;
}

footer:before {
    content: '';
    width: 100%;
    height: 360px;
    display: block;
    background-image: url('../_IMG/pattern-footer.png');
    position: absolute;
    bottom: 0;
    right: 0;
}

.links {
    margin-top: -60px;
}

.footer-logo-mobile img {
    display: block;
    margin: 0 auto;
    width: 171px;
}

.app-links {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    margin: 15px 0;
    max-width: 350px;
    margin: 0 auto;
}

.download-app-text {
    text-align: center;
    color: #fff;
    font-weight: bold;
    font-size: 20px;
}

.appbox {
    width: 45%;
    margin: 5px 0;
}

.appbox img {
    width: 100%;
    height: auto;
    display: block;
    overflow: hidden;
}

.appbox .cont {
    position: relative;
    display: flex;
    flex-direction: column;
    text-align: left;
    margin-left: 35px;
    color: #fff;
}

.footer-about p {
    color: #fff;
    margin: 50px 0;
    padding: 0 20px;
    font-weight: 300;
    line-height: 30px;
}

.social ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    list-style-type: none;
    justify-content: space-around;
    padding: 0;
}

.jvz {
    margin-top: 50px;
    display: flex;
    justify-content: space-around;
}

.jvz img {
    width: 101px;
    height: 101px;
    background: #fff;
    border-radius: 10px;
    padding: 5px;
}

.contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 30px;
}

.contact-info {
    text-align: center;
    color: #fff;
    margin-top: 20px;
    font-weight: 300;
    margin-bottom: 30px;
}

.contact-info span {
    display: block;
    font-size: 13px;
}

.download-app {
    display: block;
    margin: 0 auto;
}

.sms-code-verification input {
    border-radius: 10px;
    box-shadow: none;
    border: 1px solid #bfbfbf;
    padding: 12px 15px;
    color: var(--color1);
    width: 100%;
    font-size: 17px;
    text-align: center;
    font-weight: 500;
    margin: 0 5px;
}

.sms-code-verification .inputs {
    display: flex;
    flex-direction: row-reverse;
    margin: 20px 0;
}

.under {
    padding: 25px;
}

.under img {
    width: 100%;
    max-width: 460px;
    margin: 10px auto 0;
    display: block;
}

.under h2 {
    text-align: center;
    font-weight: 800;
    font-size: 27px;
    color: #154077;
}

.under h3 {
    font-size: 18px;
    text-align: center;
    margin-block: 15px 25px;
    color: #154077;
}

.under p {
    text-align: center;
    font-size: 15px;
}

.under a {
    background-color: #ce2e52;
    transition-duration: 0.5s;
    border-radius: 10px 10px 10px 10px;
    padding: 15px 20px 15px 20px;
    display: block;
    text-align: center;
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    font-size: 18px;
}



@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;
    }

    .pin {
        top: 55px !important;
    }

    .wheel-back {
        height: 500px;
    }
}

@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;
    }

    .wheel-back {
        margin-top: 0;
        height: auto;
        padding-bottom: 80px;
    }

    .wheel-back > .container {
        position: relative;
        top: 0;
    }

    .accordion-item {
        padding-right: 60px;
    }

    .banners {
        margin-top: 30px;
        padding-bottom: 70px;
    }

    footer {
        margin-top: 110px;
    }

    .information {
        position: relative;
    }

    .information:after {
        content: '';
        display: block;
        width: 1px;
        height: 90%;
        background-color: #fff;
        position: absolute;
        top: 5%;
        left: 10px;
        opacity: .4;
    }

    .footer-nav {
        margin-top: 70px;
        padding: 0;
    }

    .footer-nav li {
        list-style-type: none;
        margin-left: 40px;
    }

    .footer-nav li a {
        color: #fff;
        text-decoration: none;
        font-weight: 300;
    }

    .footer-logo {
        margin-top: 70px;
    }

    .social {
        margin-top: 40px;
    }

    .social ul {
        padding-right: 0;
        justify-content: flex-start;
    }

    .social ul li {
        margin-left: 20px;
    }

    .contact {
        flex-direction: row;
        align-items: center;
    }

    .contact-info {
        text-align: right;
        margin-top: 0;
        margin-right: 10px;
    }

    .footer-about {
        margin: 30px 0;
        font-weight: 200;
        padding-left: 40px;
    }

    .appbox a {
        width: 120px;
    }

    .appbox a p {
        display: none;
    }

    /*  .appbox img {
          width: 25px;
          height: auto;
      }*/
    .appbox .cont {
        margin-left: 20px;
    }

    .appbox .cont::before {
        left: -10px;
    }

    .jvz {
        margin-top: 20px;
    }

    .copyright p {
        color: #fff;
        text-align: center;
        margin-top: 10px;
        font-weight: 200;
    }

}

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

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

    #canvasContainer::before {
        width: 478px;
        height: 495px;
        background-size: 478px 483px;
        right: -4px;
        top: -2px;
    }

    #canvas {
        width: 452px !important;
    }

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

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

    .pin {
        top: 64px !important;
    }

    .accordion-item {
        padding-right: 60px;
    }
}

@media screen and (min-width: 1400px) {
    .s-header::before {
        right: -40px;
    }

    .s-header::after {
        left: -40px;
    }

    .accordion-item {
        padding-right: 24%;
    }

    footer {
        padding-inline: 50px;
    }
}

.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;
}