@import url('https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i');
        @import url('https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i');
        @import url('https://fonts.googleapis.com/css?family=Great+Vibes');
        @import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap');

        body {
            font-family: 'Montserrat';
            background: #fffada;
        }

        /* canvas {
            overflow: hidden;
            height: 100vh;
            width: 100%;
        } */

        .fireworks-container {
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
        }
        
        div#app {
            margin-top: 14rem;
            position: relative;
        }

        .diwaliHead {
            margin-top: 2rem;
        }

        .spinandWinhead {
            max-width: 868px;
            margin: auto;
        }

        .spinandWinhead h2,
        .termAndCondition h2 {
            font-weight: 700;
            color: #521407;
            font-family: 'Abril Fatface', cursive;
            font-size: 35px;
        }

        .spinandWinhead img {
            width: 45%;
            margin-bottom: 2rem;
        }

        .wheel {
            position: absolute;
            width: 368px;
            height: 368px;
            top: calc(50% - 201px/2);
            left: calc(50% - 351px/2);
            border-radius: 50%;
            border: 8px solid #fff;
            margin: -8px;
            box-shadow: 0 0 6px 6px #000;
            overflow: hidden;
        }

        .wheel:before {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            box-shadow: 0 0 5px 10px rgba(0, 0, 0, 0.4) inset;
            z-index: 1;
        }

        .wheel .inner {
            width: 100%;
            height: 100%;
            transition: 5s;
        }

        .wheel .inner .slice {
            position: absolute;
            width: 0;
            height: 0;
            left: 75px;
            top: -5px;
            border-width: 180px 50px 0 100px;
            border-style: solid;
            transform-origin: 67% 100%;
        }

        .wheel .inner .slice .prize {
            position: relative;
            display: block;
            transform: rotateZ(84deg);
            left: 8px;
            text-align: center;
            font-size: 15px;
            margin-top: -133px;
            margin-left: -67px;
            font-weight: 800;
            color: #fff;
            width:100px;
            text-shadow: -1px -1px 0 #585651, 1px -1px 0 #585651, -1px 1px 0 #585651, 1px 1px 0 #585651;
        }

        .slice:nth-child(1) {
            border-color: #16a085 transparent;
            transform: rotate(0deg);
        }

        .slice:nth-child(2) {
            border-color: #962bc0 transparent;
            transform: rotate(-45deg);
        }

        .slice:nth-child(3) {
            border-color: #34495e transparent;
            transform: rotate(-90deg);
        }

        .slice:nth-child(4) {
            border-color: #d35400 transparent;
            transform: rotate(-135deg);
        }

        .slice:nth-child(5) {
            border-color: #f39c12 transparent;
            transform: rotate(-180deg);
        }

        .slice:nth-child(6) {
            border-color: #c02b58 transparent;
            transform: rotate(-225deg);
        }

        .slice:nth-child(7) {
            border-color: #2980b9 transparent;
            transform: rotate(-270deg);
        }

        .slice:nth-child(8) {
            border-color: #50c556 transparent;
            transform: rotate(-315deg);
        }

        .wheel-outer {
            position: absolute;
            width: 500px;
            height: 500px;
            top: calc(50% - 350px/2);
            left: calc(50% - 500px/2);
            border-radius: 50%;
            box-shadow:0 0 45px 5px #f1f1f1, 0 0 15px 10px rgba(58, 68, 89, 0.2) inset;
        }

        #svg-arrow {
            position: absolute;
            top: calc(50% - 160px);
            left: calc(50% - 101px);
            z-index: 1;
        }

        #svg-dotted {
            position: absolute;
            width: 470px;
            height: 500px;
            top: calc(50% - 370px/2);
            left: calc(50% - 473px/2);
        }

        #svg-dotted #circle-dotted {
            fill: transparent;
            stroke: #c8c8c8;
            stroke-width: 4;
            stroke-dasharray: 0.1 23;
            stroke-dashoffset: 19.5;
            stroke-linecap: round;
        }

        button#spinButton {
            position: absolute;
            width: 80px;
            height: 80px;
            top: calc(50% - -80px/2);
            left: calc(50% - 70px/2);
            border-radius: 50%;
            border: none;
            outline: none;
            box-shadow: 0 0 5px 2px #000;
            z-index: 10;
            background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 30%, #b3bead 100%);
        }

        button#spinButton:active {
            transform: scale(0.9);
        }

        .howToWin h2 {
            font-size: 35px;
            color: #521407;
            font-weight: 900;
            margin-bottom: 0px;
            font-family: 'Abril Fatface', cursive;
            margin-bottom: 2rem;
        }

        .howToWin p{
            margin-top: 5px;
            margin-bottom: 1rem;
            font-size: 20px;
            font-weight: 300;
            line-height: 28px;
            padding-right: 20px;
            color: #836d69;
        }

        .yourWishes {
            margin-top: 10rem;
        }

        .yourWishes ol li {
            margin-bottom: 1rem;
        }

        .termAndCondition {
            margin: 5rem;
        }

        .hanginDiyaLeft{
            position: absolute;
            width: 350px;
            top: 0;
            left:0;
        }


        .hanginDiyaRight{
            position: absolute;
            width: 350px;
            top: 0;
            right:0;
        }

        @media(max-width:767px) {
            .hanginDiyaLeft,
            .hanginDiyaRight,
            #svg-dotted,
            .wheel-outer{
                display: none;
            }

            .termAndCondition {
                margin: 0;
            }

            .yourWishes {
                margin-top: 3rem;
            }

            #app {
                height: 260px;
            }

            .spinandWinhead h2,
            .howToWin h2,
            .termAndCondition h2 {
                font-size: 26px;
            }

            .spinandWinhead img {
                width: 85%;
            }
        }



        
 
#diwali-popup .modal-content,
#exampleModalCenter .modal-content{
    background-color: #18468c;
}

#diwali-popup .border-none,
#exampleModalCenter .border-none{
    border: none !important;
}

#diwali-popup .modal-body h3,
#exampleModalCenter .modal-body h3{
    font-weight: 700;
    font-size: 22px;
    line-height: 28px;
    color: #ffffff;
}

#diwali-popup .custom-white-btn,
#exampleModalCenter .custom-white-btn {
    background-color: #ffffff;
    color: #f68b29;
}

#diwali-popup .custom-ornge-btn,
#exampleModalCenter .custom-ornge-btn{    
    background-color: #f68b29;
    color: #ffffff;
}

#diwali-popup .custom-white-btn,
#diwali-popup .custom-ornge-btn,
#exampleModalCenter .custom-white-btn,
#exampleModalCenter .custom-ornge-btn   {
    border-radius: 50px;
    padding: 10px 40px;
    text-transform: uppercase;
}

#diwali-popup .close ,
#exampleModalCenter .close {
    position: absolute;
    background-color: #ffffff;
    opacity: 1;
    height: 30px;
    width: 30px;
    text-align: center;
    padding:0 10px;
    border-radius: 20px;
    margin: 0;
    right: -12px;
    top: -16px;
    border: 0;
}

#diwali-popup .close span,
#exampleModalCenter .close span {    
    position: relative;
    left: -3px;
    top: -4px;
    font-size: 26px;
}

.dash-border {
    border: dashed 2px #ffffff;
    cursor: pointer;
}

.orange-bg {
    background-color: #f68b29;
}

.blink-background {
    animation: background-change 1s infinite;
}

.diwali_text {
    padding: 10px 0 30px;
}

.pdf_download_diwali {
    padding: 0 0 24px;
    background-color:transparent;
}

.terms_conditions {
    margin-top:1rem;
    padding:20px;
    border-radius:1rem;
    background-color: #dce7f8;
}

.terms_conditions h2 {
    font-size:2rem;
}

.terms_conditions ol{
    margin-left: 20px;
    margin-top: 15px;
    padding:0;
}

.terms_conditions ol li{
    padding-bottom:1rem;
}

.choose_cracker{
    margin-top:3rem;
}

.sadImageSection {
    margin: auto;
    margin-top: 20px;
}

h3.userCouponCode {
    padding: 2rem;
    text-align: center;
    color: #fff;
    line-height: 2.2rem;
    font-size: 1.4rem;
}

h3.userCouponCode a{
    color: #ffd24a;
    font-weight: 800;
}

h3.userCouponCode a:hover {
    font-weight: 800;
}


h3.userCouponCode a:hover {
    color: #ffac00;
}

section.howToWin {
    margin-top: 35rem;
}

@keyframes  background-change {   
  0% { background-color: #ffa03c; }
  50% { background-color: #18468c; color:#ffffff; }
  100% { background-color: #ffa03c; }
}

@media(max-width:568px) {
    #diwali-popup .modal-body h3 {
        font-size: 16px;
        line-height: 25px;
    }

    #diwali-popup .custom-white-btn, 
    #diwali-popup .custom-ornge-btn {
        padding: 8px 20px;
    }

    .diwali-dhamaka {
        width: 80%;
    }

    .main_heading span {
        top: 0;
        font-size: 24px;
        display: block;
    }

    .get-diwali-offer h3{
        font-size:20px;
    }

    .terms_conditions h2 {
        font-size: 1.6rem;
    }
    section.howToWin {
        margin-top: 10rem;
    }

    div#app {
        margin-top: 2rem;
    }
}