@font-face {
    font-family: "iran";
    src: url("./../fonts/IranSans/IranSans/IRANSans-Medium-web.eot"); /* IE9 Compat Modes */
    src: url("./../fonts/IranSans/IranSans/IRANSans-Medium-web.eot?#iefix") format("embedded-opentype"),
    /* IE6-IE8 */ url("./../fonts/IranSans/IranSans/IRANSans-Medium-web.woff2") format("woff2"),
    /* Super Modern Browsers */
    url("./../fonts/IranSans/IranSans/IRANSans-Medium-web.woff") format("woff"),
    /* Pretty Modern Browsers */
    url("./../fonts/IranSans/IranSans/IRANSans-Medium-web.ttf") format("truetype"),
    /* Safari, Android, iOS */
    url("./../fonts/IranSans/IranSans/IRANSans-Medium-web.svg#svgFontName") format("svg"); /* Legacy iOS */
}



* {
    font-family : iran;
}
body {
    background: radial-gradient(#06243B, #000) no-repeat;
    height: 100vh;
}

.btn-custom-red {
    text-align: center;
    margin: 0 auto;
    color: white;
    background: #F76864;
    box-shadow: 0 4px 93px #B93531;
    border-radius: 60px;
    font-size: 40px !important;
    padding: 10px 40px !important;
}
.btn-custom-green {
    text-align: center;
    margin: 0 auto;
    color: white;
    background: #64f776;
    box-shadow: 0 4px 93px #B93531;
    border-radius: 60px;
    font-size: 40px !important;
    padding: 10px 40px !important;
}

.mb-20 {
    margin-bottom: 150px !important;
}
.mt-20 {
    margin-top: 150px !important;
}
.mt-18 {
    margin-top: 80px !important;
}
.start-game {
position:relative;
z-index:99;
transition:1s
}

@keyframes morph {
    0% {
        box-shadow: -1px 4px 23px -2px #03121d73;
    }

    50% {
        box-shadow: -1px 4px 23px -2px #000;
    }
 
 
}




.box-shadow-image {
    box-shadow: -1px 4px 23px -2px #03121d73;
    border: 2px solid #4600223b;
    animation: morph 3s infinite;
}
.start-game:hover {
    background: #fff;
    color: #f90000;
}
.center {
    text-align: center;
    margin: 0 auto;
}

.img11 {
    position: absolute;
    right: -170px;
    bottom: 0;
    width: 100%;
}

.img12 {
    position: absolute;
    right: 160px;
    bottom: 0;
    width: 100%;
}

.img13 {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;
}

.img10 {
    position: relative;
    z-index: 9999;
}

.img21 {
    position: absolute;
    right: -20px;
    top: -220px;
    width: 100%;
}

.img22 {
    position: absolute;
    right: 135px;
    top: -183px;
    width: 100%;
}

.img23 {
    position: absolute;
    right: -155px;
    top: -193px;
    width: 100%;
}

.img1-circle {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
}

.tool-bar {
    background: #fff;
    position: absolute;
    bottom: 0;
    width: 100%;
    left: 0;
    height: 25vh;
    overflow: hidden;
}

img.img-fluid.img-s1 {
    background: #ff0202;
    border-radius: 50%;
}

.tool-box-top img, .tool-box-bot img {
    width: 50px;
}

.tool-box-top {
    position: fixed;
    left: 0;
    top: 0;
}

.tool-box-bot {
    position: fixed;
    left: 0;
    top: 50vh;
}

.p1 {
    position: absolute;
    top: -11vh;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.p2 {
    position: absolute;
    bottom: 11vh;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.wining {
    background-image: url(/img/Frame.png);
    height: 100%;
    background-repeat: repeat-x;
}

.wining-img {
    align-items: center;
    display: flex;
    justify-content: center;
}


    .wining-img img {
        max-width: 500px
    }

.phone-input {
    align-items: center;
    display: flex;
    justify-content: center;
}

    .phone-input input {
        background-color: #FFFFFF;
        max-width: 450px;
        width: 450px;
        height: 67px;
        border-radius: 42px;
        text-align:center
    }

        .phone-input input::placeholder {
            color: #AFAFAF;
            text-align: center;
        }

.message-wining {
    align-items: center;
    display: flex;
    justify-content: center;
    visibility :hidden;

}
.hidden {
    visibility: hidden
}

.message-wining span {
    background-color: #ff2929;
    max-width: 450px;
    width: 450px;
    height: 67px;
    border-radius: 42px;
    text-align: center;
    padding: 15px;
    margin-top: 10px;
    color: #fff;
}

.counter-down {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
   
    color: #fff;
    font-size: 80px;
}
.continer-message {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 80vh;
}
    .continer-message .msg {
        width: 400px;
        margin: 5px;
        text-align: center;
        color: #fff;
        z-index: 999;
        background-color: #64b948;
        border-radius: 507px;
        /* height: 65px; */
        font-size: 25px;
    }

.main-div1::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 50%;
    height: 50%;
    -webkit-box-shadow: 0 0 17px 3px #ffff01,0 0 4px 2px #ffff01;
    box-shadow: 0 0 17px 3px #ffff01,0 0 4px 2px #ffff01;
    z-index: -1;
    -webkit-animation-name: yellow-shadow;
    animation-name: yellow-shadow;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}

.main-div1::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    width: 50%;
    height: 50%;
    -webkit-box-shadow: 0 0 17px 3px #0ff,0 0 4px 2px #0ff;
    box-shadow: 0 0 17px 3px #0ff,0 0 4px 2px #0ff;
    z-index: -1;
    -webkit-animation-name: cyan-shadow;
    animation-name: cyan-shadow;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}

.main-div2::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    -webkit-box-shadow: 0 0 17px 3px #ffff01,0 0 4px 2px #ffff01;
    box-shadow: 0 0 17px 3px #ffff01,0 0 4px 2px #ffff01;
    z-index: -1;
    -webkit-animation-name: gradient-shadow;
    animation-name: gradient-shadow;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}

.main-div3::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 50%;
    height: 100%;
    -webkit-box-shadow: 0 0 17px 3px #ffff01,0 0 4px 2px #ffff01;
    box-shadow: 0 0 17px 3px #ffff01,0 0 4px 2px #ffff01;
    z-index: -1;
    -webkit-animation-name: half-yellow-shadow;
    animation-name: half-yellow-shadow;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease;
    -webkit-animation-duration: 5s;
    animation-duration: 5s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}

.main-div3::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    width: 50%;
    height: 100%;
    -webkit-box-shadow: 0 0 17px 3px #0ff,0 0 4px 2px #0ff;
    box-shadow: 0 0 17px 3px #0ff,0 0 4px 2px #0ff;
    z-index: -1;
    -webkit-animation-name: half-cyan-shadow;
    animation-name: half-cyan-shadow;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease;
    -webkit-animation-duration: 5s;
    animation-duration: 5s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}

h1 {
    font-size: 50px;
    margin: 0;
    position: relative;
    z-index: 3;
    padding: 20px;
    background-color: #060C1F;
    color: #fff;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}

@-webkit-keyframes yellow-shadow {
    0% {
        top: 0;
        left: 0;
    }

    25% {
        top: 50%;
        left: 0;
    }

    50% {
        top: 50%;
        left: 50%;
    }

    75% {
        top: 0;
        left: 50%;
    }

    100% {
        top: 0;
        left: 0;
    }
}

@keyframes yellow-shadow {
    0% {
        top: 0;
        left: 0;
    }

    25% {
        top: 50%;
        left: 0;
    }

    50% {
        top: 50%;
        left: 50%;
    }

    75% {
        top: 0;
        left: 50%;
    }

    100% {
        top: 0;
        left: 0;
    }
}

@-webkit-keyframes cyan-shadow {
    0% {
        right: 0;
        bottom: 0;
    }

    25% {
        right: 0;
        bottom: 50%;
    }

    50% {
        right: 50%;
        bottom: 50%;
    }

    75% {
        right: 50%;
        bottom: 0;
    }

    100% {
        right: 0;
        bottom: 0;
    }
}

@keyframes cyan-shadow {
    0% {
        right: 0;
        bottom: 0;
    }

    25% {
        right: 0;
        bottom: 50%;
    }

    50% {
        right: 50%;
        bottom: 50%;
    }

    75% {
        right: 50%;
        bottom: 0;
    }

    100% {
        right: 0;
        bottom: 0;
    }
}

@-webkit-keyframes gradient-shadow {
    0% {
        -webkit-box-shadow: 0 0 17px 3px #C586C0,0 0 4px 2px #C586C0;
        box-shadow: 0 0 17px 3px #C586C0,0 0 4px 2px #C586C0;
    }

    20% {
        -webkit-box-shadow: 0 0 17px 3px #0ff,0 0 4px 2px #0ff;
        box-shadow: 0 0 17px 3px #0ff,0 0 4px 2px #0ff;
    }

    40% {
        -webkit-box-shadow: 0 0 17px 3px #0f0,0 0 4px 2px #0f0;
        box-shadow: 0 0 17px 3px #0f0,0 0 4px 2px #0f0;
    }

    60% {
        -webkit-box-shadow: 0 0 17px 3px #ffff01,0 0 4px 2px #ffff01;
        box-shadow: 0 0 17px 3px #ffff01,0 0 4px 2px #ffff01;
    }

    80% {
        -webkit-box-shadow: 0 0 17px 3px #f00,0 0 4px 2px #f00;
        box-shadow: 0 0 17px 3px #f00,0 0 4px 2px #f00;
    }

    100% {
        -webkit-box-shadow: 0 0 17px 3px #C586C0,0 0 4px 2px #C586C0;
        box-shadow: 0 0 17px 3px #C586C0,0 0 4px 2px #C586C0;
    }
}

@keyframes gradient-shadow {
    0% {
        -webkit-box-shadow: 0 0 17px 3px #C586C0,0 0 4px 2px #C586C0;
        box-shadow: 0 0 17px 3px #C586C0,0 0 4px 2px #C586C0;
    }

    20% {
        -webkit-box-shadow: 0 0 17px 3px #0ff,0 0 4px 2px #0ff;
        box-shadow: 0 0 17px 3px #0ff,0 0 4px 2px #0ff;
    }

    40% {
        -webkit-box-shadow: 0 0 17px 3px #0f0,0 0 4px 2px #0f0;
        box-shadow: 0 0 17px 3px #0f0,0 0 4px 2px #0f0;
    }

    60% {
        -webkit-box-shadow: 0 0 17px 3px #ffff01,0 0 4px 2px #ffff01;
        box-shadow: 0 0 17px 3px #ffff01,0 0 4px 2px #ffff01;
    }

    80% {
        -webkit-box-shadow: 0 0 17px 3px #f00,0 0 4px 2px #f00;
        box-shadow: 0 0 17px 3px #f00,0 0 4px 2px #f00;
    }

    100% {
        -webkit-box-shadow: 0 0 17px 3px #C586C0,0 0 4px 2px #C586C0;
        box-shadow: 0 0 17px 3px #C586C0,0 0 4px 2px #C586C0;
    }
}

@-webkit-keyframes half-yellow-shadow {
    0% {
        top: 0;
        left: 0;
        height: 50%;
        width: 50%;
    }

    16.66% {
        top: 0;
        left: 0;
        height: 50%;
        width: 100%;
    }

    32.32% {
        top: 0;
        left: 50%;
        height: 50%;
        width: 50%;
    }

    49.98% {
        top: 50%;
        left: 50%;
        height: 50%;
        width: 50%;
    }

    66.64% {
        top: 50%;
        left: 0;
        height: 50%;
        width: 100%;
    }

    83.3% {
        top: 50%;
        left: 0;
        height: 50%;
        width: 50%;
    }

    100% {
        top: 0;
        left: 0;
        height: 50%;
        width: 50%;
    }
}

@keyframes half-yellow-shadow {
    0% {
        top: 0;
        left: 0;
        height: 50%;
        width: 50%;
    }

    16.66% {
        top: 0;
        left: 0;
        height: 50%;
        width: 100%;
    }

    32.32% {
        top: 0;
        left: 50%;
        height: 50%;
        width: 50%;
    }

    49.98% {
        top: 50%;
        left: 50%;
        height: 50%;
        width: 50%;
    }

    66.64% {
        top: 50%;
        left: 0;
        height: 50%;
        width: 100%;
    }

    83.3% {
        top: 50%;
        left: 0;
        height: 50%;
        width: 50%;
    }

    100% {
        top: 0;
        left: 0;
        height: 50%;
        width: 50%;
    }
}

@-webkit-keyframes half-cyan-shadow {
    0% {
        bottom: 0;
        right: 0;
        height: 50%;
        width: 50%;
    }

    16.66% {
        bottom: 0;
        right: 0;
        height: 50%;
        width: 100%;
    }

    32.32% {
        bottom: 0;
        right: 50%;
        height: 50%;
        width: 50%;
    }

    49.98% {
        bottom: 50%;
        right: 50%;
        height: 50%;
        width: 50%;
    }

    66.64% {
        bottom: 50%;
        right: 0;
        height: 50%;
        width: 100%;
    }

    83.3% {
        bottom: 50%;
        right: 0;
        height: 50%;
        width: 50%;
    }

    100% {
        bottom: 0;
        right: 0;
        height: 50%;
        width: 50%;
    }
}

@keyframes half-cyan-shadow {
    0% {
        bottom: 0;
        right: 0;
        height: 50%;
        width: 50%;
    }

    16.66% {
        bottom: 0;
        right: 0;
        height: 50%;
        width: 100%;
    }

    32.32% {
        bottom: 0;
        right: 50%;
        height: 50%;
        width: 50%;
    }

    49.98% {
        bottom: 50%;
        right: 50%;
        height: 50%;
        width: 50%;
    }

    66.64% {
        bottom: 50%;
        right: 0;
        height: 50%;
        width: 100%;
    }

    83.3% {
        bottom: 50%;
        right: 0;
        height: 50%;
        width: 50%;
    }

    100% {
        bottom: 0;
        right: 0;
        height: 50%;
        width: 50%;
    }
}
@keyframes anim-glow {
    0% {
        box-shadow: 0 0 rgba(97, 239, 97, 1);
    }

    100% {
        box-shadow: 0 0 10px 8px transparent;
        border-width: 2px;
    }
}



.icon {
    border-radius: 50%;
    border: 2px solid #61ef61;
    width: 10px;
    height: 10px;
    text-align: center;
    position: relative;
    animation: anim-glow 2s ease infinite;
}

    .icon i {
        border-radius: 50%;
        border: 2px solid #61ef61;
        width: 2px;
        height: 2px;
        display: inline-block;
        vertical-align: 6px;
        background-color: #61ef61;
    }