/*  #########3 landing page start #########3  */
/* loader */
.rotate_spinner {
    display    : block;
    width      : 70px;
    margin     : auto;
    padding-top: 145px;
}

.img_logo {
    height : 140px;
    z-index: 9999;
}

.img_logo img {
    /* height: 100%; */
}

.playround_area {
    /* background-color: #fed873; */
    /* background: radial-gradient(circle, rgba(255,234,140,1) 20%, rgba(254,201,92,1) 84%); */
    /* background: radial-gradient(circle, rgba(255, 234, 140, 1) 15%, rgb(255, 184, 68) 68%); */
    background-image: url("../../img/bg-banner.jpeg");
    background-size: cover;
    height: 100vh;
    display: grid;
    place-items: center;
    overflow-y: scroll;
    overflow-x: hidden;
    background-position: center;
    background-repeat: no-repeat;
}

.question:not(.active) {
    display: none;
}
.round_no4,
.round_no3,
.round_no2,
.round_no1,
.round_no {
    position      : absolute;
    top           : 0;
    bottom        : 0;
    left          : 0;
    right         : 0;
    background    : radial-gradient(circle, rgba(255, 234, 140, 1) 12%, rgb(255, 184, 68) 34%);
    display       : grid;
    place-items   : center;
    /* transform  : scale(2.3); */
    box-shadow    : 0px 11px 20px 225px rgb(255 184 68);
}

.col_md_2 {
    width: 36%;
    flex : 0 0 auto;
}

.check_form .img_active {
    padding      : 5px !important;
    /* border    : 2px solid #f15c36;
    box-shadow   : 0px 0px 8px 4px #d5a721; */
}

.playround_area .img_active {
    width       : 300px;
    height: auto;
    aspect-ratio: 5/4;
    object-fit: contain;
    border: 8px solid #f15c36;
    padding: 0 !important;
}
.opacity {
    border: 8px solid #f15c36 !important;
    opacity: 0.5 !important;
}
.opacityDull{
    border: 1px solid #000 !important;
}
/*.Img_Opacity {*/
/*    opacity: 0.4 !important;*/
/*}*/
ol{
    justify-content: center;
    margin: 0;
}
ol li {
    width: calc(calc(100% - 10px)/8);
    background: #f7dadaa3;
    margin: 3px;
    border-radius: 3px;
}
.progBar {
    background-color: #ddd !important;
    padding: 3px;
    border-radius: 10px;
}
.Baractive{
    background-color: #000;
}

@keyframes animateleft {
    from {
        right  : -300px;
        opacity: 0
    }

    to {
        right  : 0;
        opacity: 1
    }
}

.playround_area .card_right {
    animation: slide-in-right .5s linear both
}

@keyframes slide-in-right {
    100% {
        transform: translateX(0);
        opacity  : 1
    }

    0% {
        transform: translateX(1000);
        opacity  : 0
    }
}

.playround_area .active .card_left {
    animation: slide-in-left .5s linear both
}

@keyframes slide-in-left {
    0% {
        transform: translateX(-1000px);
        opacity  : 0
    }

    100% {
        transform: translateX(0);
        opacity  : 1
    }
}

.playround_area .active .card_right {
    animation: slide-in-right .5s linear both
}

@keyframes slide-in-right {
    0% {
        transform: translateX(1000px);
        opacity  : 0
    }

    100% {
        transform: translateX(0);
        opacity  : 1
    }
}


@keyframes flip-in-ver-left {
    0% {
        transform: rotateY(80deg);
        opacity  : 0
    }

    100% {
        transform: rotateY(0);
        opacity  : 1
    }
}


.playround_area .lets_play {
    color: #fff;
    font-family: 'Popins', sans-serif;
    font-weight: 900;
    font-style: italic;
    font-size: 30px;
    background: rgb(235,48,39);
    background: linear-gradient(90deg, rgba(235,48,39,1) 0%, rgba(208,30,19,1) 299%);
    border: 2px solid #f15c36 !important;
    font-family: 'Popins', sans-serif;
    padding: 12px 64px !important;
    box-shadow: 0px 5px 0px #750000;
    background-position: center;
    width: auto !important;
    object-fit: contain;
    aspect-ratio: 0;
    opacity: 1 !important;
    cursor: pointer;
}
.playround_area .lets_play:active {
    transform: scale(1.02);
    box-shadow   : 0px 0px 8px 4px #d5a721;
}

.playround_area .next_round {
    color           : #07080e;
    font-family     : 'Popins', sans-serif;
    font-weight     : 800;
    font-style      : italic;
    font-size       : calc(2rem - 30%);
    background-color: #fed873;
    border          : 2px solid #f15c36;
    width           : 342px;

    animation: text-shadow 1.9s ease-in-out
}


@keyframes text-shadow {
    0% {
        transform: translateY(-1000);
        opacity  : 0;
    }

    20% {
        transform: translateY(-1em);

    }

    40% {
        transform: translateY(0.5em);


    }

    60% {
        transform: translateY(-0.25em);

    }


    100% {
        transform: translateY(0);
        opacity  : 1;
    }
}

.playround_area .active .next_round {
    /* animation: slide-in-top .5s cubic-bezier(.25, .46, .45, .94) both; */

}


@keyframes slide-in-top {
    0% {
        transform: translateY(-1000px);
        opacity  : 0
    }

    100% {
        transform: translateY(0);
        opacity  : 1
    }
}

.round_1 {
    left  : 0;
    right : 0;
    bottom: 10%;
}

/* text animation */
.startgame_text {
    font-family    : 'Popins', sans-serif;
    display        : flex;
    flex-direction : column;
    justify-content: center;
    align-items    : center;
    gap            : 53px;
}

.startgame_text h2 {
    font-family: 'Popins', sans-serif;
    font-style: italic;
    font-size  : 30px;
    font-weight: 600;
    text-shadow:
        0px 5px 7px #ffffff,
        -2px 0px 18px #e9e9e9,
        3px 1px 2px #c3c3c3,
        0px 0px 3px #750000;
}

.heading_1 {
    animation         : slide-in-left .5s cubic-bezier(.25, .46, .45, .94) both;
    /* width          : 200px; */
    position          : relative;
    margin            : auto;
    animation-delay   : 0ms;
}

.heading_2 {
    animation         : slide-in-left .5s cubic-bezier(.25, .46, .45, .94) both;
    /* width          : 200px; */
    position          : relative;
    margin            : auto;
    animation-delay   : 100ms;
}

.heading_3 {
    animation         : slide-in-left .5s cubic-bezier(.25, .46, .45, .94) both;
    /* width          : 200px; */
    position          : relative;
    margin            : auto;
    animation-delay   : 200ms;
}

@keyframes slide-in-left {
    0% {
        transform: translateX(-1000px);
        opacity  : 0
    }

    100% {
        transform: translateX(0);
        opacity  : 1
    }
}

/* #### */
.playround_area input[type=radio] {
    display: none;
}

.playround_area input[type=radio]:not(:disabled)~label {
    cursor       : pointer;
    /* border    : unset !important;
    box-shadow   : unset !important;
    padding      : 0px !important; */
}

.playround_area input[type=radio]:not(:disabled)~label:hover {
    cursor   : pointer;
    /* border: unset !important; */
}

.playround_area input[type=radio]:checked+label {
    transform            : scale(1.06);
    /* border               : 2px solid #f15c36; */
    /* box-shadow           : 0px 0px 8px 4px #d5a721; */
    /* outline:0px 0px 8px 4px #d5a721 ; */
    /* animation         : slide-in-left_rem .5s cubic-bezier(.25, .46, .45, .94) both; */
}

.playround_area .rem_ani {
    animation: slide-in-left_rem .2s cubic-bezier(.25, .46, .45, .94) !important;

}

@keyframes slide-in-left_rem {
    100% {
        transform   : translateX(-1000px);
        /* opacity  : 0 */
    }

    0% {
        transform   : translateX(0px);
        /* opacity  : 1 */
    }
}

.playround_area .rem_select.rem_ani {
    animation: slide-in-left_rem1 .2s cubic-bezier(.25, .46, .45, .94) !important;
}

@keyframes slide-in-left_rem1 {
    100% {
        transform   : translateX(0px);
        /* opacity  : 0 */
    }

    0% {
        transform   : translateX(-1000px);
        /* opacity  : 1 */
    }
}

/*  #########3 landing page End #########3  */


/* media query */
@media screen and (max-width:800px) {
    .playround_area .ImgCS {
        width: 170px;
        height: auto;

    }
}
@media screen and (max-width:575px) {
    .playround_area .row.question {
        flex-direction: column;
    }
    .col_md_2 {
        width: 75%;
        flex : 0 0 auto;
    }
    .playround_area .img_active img {
        height : auto;
         width: 100%;
        /*aspect-ratio: 5/4 !important;*/
        object-fit: contain;
    }

    .playround_area .next_round {
        font-weight: 700;
        font-size: calc(2rem - 50%);
        width: 90%;
        padding: 4px 31px;
    }

    .playround_area .lets_play {
        width: 100% !important;
        padding: 12px 33px !important;
    }
    .round_no4,
    .round_no3,
    .round_no2,
    .round_no1,
    .round_no {
        box-shadow: 0px 11px 20px 3000px rgb(255 184 68);
        /* transform : scale(0.8) !important; */
        height: 180px;
    }
    .img_logo{
        height: auto;
    }
    .img_logo img{
        /*height: 80px;*/
    }
    .playround_area .ImgCS {
        width: 170px;
        height: auto;

    }
    .startgame_text{
        gap: 30px;
    }
    .startgame_text h2{
        font-size: 25px;
    }
}