@import url('https://fonts.googleapis.com/css?family=Cairo:400,600,700&diaplay=swap&subset=arabic');
    @import url('https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css');
    @import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css");
    @import url('https://fonts.googleapis.com/css2?family=Allerta+Stencil&display=swap');

    .--main-container {
        width: 100%;
        position: relative;
        overflow: hidden;
        font-family: 'Cairo', sans-serif;
    }

    .--row {
        width: 100%;
        position: relative;
        display: block;
    }

    .header-bg {
        position: relative;
    }

    .header-bg img {
        max-width: 100%;
        width: 100%;
        height: 200px;
        min-height: 200px;
        padding: 10px;
    }

    .-header {
        display: flex;
        z-index: 1;
    }

    .-logo {
        width: 15%;
        margin: 6% 6% 0 0;
    }

    .-slogan {
        width: 42%;
        margin-right: 6%;
    }

    .-slogan img {
        margin-top: 26%;
    }

    .-live-section {
        margin: 0 auto;
        width: 98%;
        position: relative;
        margin-top: -4.5%;
    }

    .main-image {
        position: absolute;
        width: 100%;
    }

    .video-image {
        width: 100%;
    }

    .main-image img,
    .video-image {
        width: 100%;
    }

    .social-links {
        display: flex;
        position: absolute;
        top: 20%;
        left: 15%;
        width: 15%;
        direction: ltr;
    }

    .social-links a:first-of-type {
        margin-right: 5px;
    }

    .social-links a {
        display: block;
    }

    .social-links a img {
        width: 100%;
    }

    .-giveawayes {
        display: flex;
        flex-wrap: wrap;
        margin: 0 auto;
        width: 90%;
        padding-bottom: 20px;
    }

    .-giveawayes>div {
        width: 23.5%;
        margin-right: 2%;
        padding: .1em;
        z-index: 2;
        background-image: linear-gradient(180deg, black 21%, #ff333d, #ffcf08);
        border-radius: 5px;
    }

    .-giveawayes>div:nth-child(4n) {
        margin-right: 0;
    }

    .-giveawayes>div>div {
        background: black;
    }

    .-giveawayes>div>div:last-of-type {
        border-radius: 0 0 5px 5px;
        text-align: center;
    }

    .-giveawayes>div p {
        padding: 3px;
        margin: 0;
        font-size: 18px;
        font-weight: 900;
        color: white;
    }

    .-giveawayes>div>div>img {
        width: 90%;
        margin-left: 5%;
    }

    .-giveawyes-title {
        width: fit-content;
        margin: 0 auto;
        padding: 8px 9px;
    }

    .-giveawyes-title h1 {
        width: fit-content;
        color: #661ac2;
        margin-top: 30px;
        font-size: 6.5vw;
        margin-bottom: 0;
    }

    .footer-bg {
        overflow: hidden;
    }

    .footer-bg img {
        width: 120%;
        margin-left: -10%;
        max-width: 1000%;
    }

    .video-bg1 {
        position: absolute;
        top: 5%;
        left: 57%;
        width: 65% !important;
    }

    .video-bg2 {
        position: absolute;
        top: 51%;
        left: 5%;
        width: 79% !important;
        opacity: 0.8;
    }

    .-giveawyes-title2 h1 {
        width: fit-content;
        color: #d80206;
        margin: 0;
        font-size: 5vw;
        padding: 2px 5px;
    }

    .t-c-2 .-giveawyes-title2 {
        width: 86%;
        margin: 0 auto;
        padding: 8px 9px;
        border: 1px solid #b17a32;
        border-radius: 16px;
        margin-top: -41px;
        background: linear-gradient(45deg, #fc8416, #ffd020, #f9790e);
        margin-bottom: 20px;
        text-align: center;
    }

    .t-c-2 ul li::before {
        content: "\2022";
        color: #b17a32;
        font-weight: bold;
        display: inline-block;
        width: 1em;
        margin-left: 6px;
    }

    .t-c-2 {
        margin: 0 auto;
        margin-top: 60px;
        border: 1px solid #b17a32;
        border-radius: 16px;
        width: 90%;
    }

    .t-c-2 h2 {
        color: white;
        font-size: 25px;
    }

    .t-c-2 ul {
        color: #282626;
        font-size: 4.2vw;
        list-style: none;
        margin: 15px 20px;
        padding: 0;
    }

    .t-c-2 ul li {
        margin-bottom: 6px;
    }

    .t-c {
        margin-right: 20px;
        margin-top: 25px;
    }

    .t-c h2 {
        color: #3c3a3a;
        font-size: 5vw;
    }

    .t-c ul {
        color: #3c3a3a;
        font-size: 4.2vw;
    }

    .wheel-container {
        width: 100%;
        position: relative;
        margin: 20px 0;
    }

    .wheel-box {
        width: 95%;
        margin: 0 auto;
        position: relative;
        z-index: 1;
    }

    .wheel-container img {
        width: 100%;
        height: auto;
    }

    .spin-container {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2;
    }

    .wheel {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: -1;
        transition: 6.5s;
        transition-timing-function: ease-out;
    }

    #spin-now {
        background: url(https://eg.jumia.is/cms/6-20/wheel-of-fortune/Wheel-of-fortune-3-EN.png) !important;
        border: none !important;
        background-color: transparent !important;
        height: 100% !important;
        width: 100% !important;
        background-size: contain !important;
    }

    #spin-now:hover,
    #spin-now:active,
    #spin-now:visited,
    #spin-now:focus,
    #spin-now:focus-within {
        border: none;
        background: none;
    }

    #spinningWheel {
        transform: rotate(0deg);
    }

    .speech-bubble {
        background: #efefef;
        -webkit-border-radius: 4px;
        border-radius: 4px;
        font-size: 1.2rem;
        line-height: 1.3;
        margin: 0 auto 40px;
        max-width: 400px;
        padding: 15px;
        position: relative;
        display: none;
    }

    .speech-bubble p {
        margin: 0 0 10px;
    }

    .speech-bubble p:last-of-type {
        margin-bottom: 0;
    }

    .speech-bubble::after {
        border-left: 20px solid transparent;
        border-top: 20px solid #efefef;
        bottom: -20px;
        content: "";
        position: absolute;
        right: 20px;
    }

    .header-bg {
        height: 100px;
        min-height: 100px;
        padding: 10px;
    }

    tr>td {
        border: 1px solid #dddd;
        text-align: center;
    }

    div.form-group {
        padding: 10px 5px;
    }

    input.form-control {
        width: 94%;
        border: 1px solid #6ac1d5;
        border-radius: 5px;
        padding: 10px;
        height: auto;
        font-size: 14px;
    }

    input.form-control:focus {
        border: 1px solid #6ac1d5;
    }

    div.custom {
        padding: 5px;
        font-size: 14px;
        background: #fff;
        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2);
        margin: 10px;
    }

    input[type="submit"] {
        background: #6ac1d5;
        color: #fff;
        box-shadow: 0 0 .2em #ddd;
        padding: 10px 20px;
        border-radius: 5px;
        border: none;
        width: 50%;
        font-size: 14px;
        font-weight: bold;
    }

    .formDiv {
        display: block;
    }

    .keyboard-line {
        width: 100%;
        display: flex;
        flex-flow: row nowrap;
        justify-content: center;
        margin: 2px 0px;
    }

    div.keyboard {
        background: #fe9900;
    }

    .keyboard-button {
        width: calc(100vw/10);
        height: calc(100vw/10);
        color: #fff;
        background: transparent;
        border: none;
        box-shadow: 0 0 0.1em rgba(0, 0, 0, 0.6);
        transition: .1s;
    }

    button.space {
        width: 50vw;
        display: block;
        margin: auto;
        padding: 2px 34px;
        background: transparent;
        border: none;
        box-shadow: 0 0 0.1em rgba(0, 0, 0, 0.6);
    }

    div.space-bar {
        color: #fff;
        padding: 2px;
    }

    .highlighted {
        -webkit-animation: highlight .1s linear;
        -moz-animation: highlight .1s linear;
        -ms-animation: highlight .1s linear;
        -o-animation: highlight .1s linear;
        animation: highlight .1s linear;
    }

    @keyframes highlight {
        0% {
            background: rgba(0, 0, 0, .3);
        }

        50% {
            background: rgba(0, 0, 0, .6);
        }

        100% {
            background: rgba(0, 0, 0, .3);
        }
    }

    #playButton {
        -webkit-animation: colorized .1s linear;
        -moz-animation: colorized .1s linear;
        -ms-animation: colorized .1s linear;
        -o-animation: colorized .1s linear;
        animation: colorized .1s linear;
    }

    @keyframes colorized {
        0% {
            font-weight: normal;
        }

        50% {
            font-weight: bold;
        }

        100% {
            font-weight: normal;
        }
    }

    .error {
        color: red;
        font-size: 10px;
        display: none;
    }