@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap');
*,ul{padding: 0; margin: 0;}
body{font-family: 'Poppins', sans-serif; color: #241F36;}
h1,h2,h3,h4,h5,h6,p,ul,ul li,ul li a,ol li,div{font-family: 'Poppins', sans-serif;}
.sec-gamification{height: 100vh;}

.gamification-dv{max-width: 70vh; box-shadow: 0px 0 0 2px #ccc; height: 100vh; margin: 0 auto;}
.srceen{height: 100vh; position: relative; z-index: 2;}
.srceen1-img{height: 50vh;
    display: inline-block;
    width: 100%;
    text-align: center;
    padding: 15px;}
.texthd1{height: 50vh; display: flex; justify-content: center;
    align-items: flex-end; padding: 5vh;}
.srceen1-img span{display: inline-block; height: 100%;}
.srceen1-img span img{display: inline-block; height: 100%;}

.get-started{display: inline-block; width: 30vh; transition: 0.6s; height: 8vh; background: #7552FF; text-align: center; line-height: 8vh; border-radius:100px; text-decoration: none; color: #fff; font-size: 3vh;}
.get-started:hover{color: #fff; box-shadow: 0 10px 10px #7552FF}


.texthd1 h1{font-size: 5vh; color: #241F36; font-weight: 600;}
.texthd1 p{font-size: 2vh; color: #808080;}

.doteds1 ul{display: flex; justify-content: center; align-items: center;}
.doteds1 ul li{display: inline-block;}
.doteds1 ul li a{width:3vh; height: 1.5vh; margin:1vh 0.5vh 3vh 0.5vh; display: inline-block; background: #CCCCFF; border-radius: 50px;}
.doteds1 ul li a.active{width:6vh; height: 1.5vh; display: inline-block; background: #7552FF; border-radius: 50px;}
.doteds1 ul li p{width:3vh; height: 1.5vh; margin:1vh 0.5vh 3vh 0.5vh; display: inline-block; background: #CCCCFF; border-radius: 50px;}
.doteds1 ul li p.active{width:6vh; height: 1.5vh; display: inline-block; background: #7552FF; border-radius: 50px;}
.srceen2 .srceen1-img img{filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.1));}
.img2-insb{position: absolute; top: 0; left: 0;  display: inline-block; width: 95%; z-index: -1;}
.lavel{height: 15vh; padding:2vh 2vh; display: flex;}
.lavel ul li{display: inline-block; margin: 1vh;}
/*.lavel ul li:nth-child(1){background: #7552FF; color: #fff; font-size: 1.5vh; font-weight: 600; }*/
.lavel .lavel-num{    background: #7552FF;
    color: #fff;
    font-size: 2vh;
    font-weight: 400;
    width: 10vh;
    height: 10vh;
    text-align: center;
     border-radius: 2vh; padding-top: 1.5vh;}
.lavel .lavel-num span{display: block; font-size: 4vh; font-weight:700; line-height: 4vh;}
.lavel .score-numbg{border: 2px solid #FFCAB0;
    padding: 1.5vh;
    border-radius: 2vh;
    width: 22vh;
    height: 10vh; margin: 0 1vh;}
.score-num,.score-total{display: flex; justify-content: space-between; align-items: center; font-size: 2vh; font-weight: 500; color: #414141;}
.score-total span{font-size: 1.8vh;}
.score-num img{width: 3vh; margin-right: 0.5vh;}
.lavel .score-numbg .score-num{font-weight: 800; color: #414141; font-size: 2vh;}

.lavel .time-clock{border: 2px solid #FFCAB0;
    padding: 1.5vh;
    border-radius: 2vh;
    width: 26vh;
    height: 10vh;
	display: flex; justify-content: space-between; align-items: center; font-weight: 800; color: #414141; font-size: 2vh;}
 
.lavel .time-clock img{width: 5vh; margin-right: 0.5vh;}


.texthd2{height: 85vh; text-align: center; background: url("../images/lavel-bg.svg") no-repeat center top / cover; padding: 1.5vh; }

.texthd2 h1{font-size: 6vh; font-weight: 800; color: #fff; }
.texthd2 h2{font-size: 3vh; font-weight: 700;  color: #fff;}
.gamebgcl{background: #7552FF; border-radius: 8vh; padding: 3.5vh; height: 55vh; display: flex; justify-content: center; align-items: center;  width: 90%; margin: 2vh auto 4vh auto;}

.gamebgclb1{display: flex; justify-content: center; align-items: center;}
.gamebgclb2{display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap:0rem;
    justify-content: center;
    align-items: center; padding: 4vh;
    width: 100%;}
.gamebgclb2 .lavel-img2{ padding: 1vh; margin: auto;     width: 12vh;}
/*
.gamebgclb1{display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 1rem;
    justify-content: center;
    align-items: center;
    width: 100%;}
*/
.lavel-img1{width: 15vh; margin: 2vh;}
.gamebgclb3{display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap:0rem;
    justify-content: center;
    align-items: center; padding:6vh 0;
    width: 100%;}
.gamebgclb3 .lavel-img3{ padding: 1vh; width: 10vh; margin: auto;}
 
.lavel-last{height: 40vh; padding: 2vh 2vh; background: #CCCCFF; border-radius:0 0 8vh 8vh}
.yourscrn1{font-size: 2vh; font-weight: 500;}
.score-nums1 span{display: flex; align-items: center; font-size:4vh; font-weight: 500; margin-right: 1vh;}
.outoffv{ font-size:1.5vh; font-weight: 500; margin-right: 1vh; margin-top:1.5vh;}
.score-nums1{display:flex; align-items: center;font-size:10vh; line-height: 11vh; font-weight: 700;}
.score-nums1 span img{width:9vh; margin:0.2vh;}

.congratulationhd{position: relative; z-index: 2;}
.congratulationhd h2{font-size:5.5vh; font-weight: 800; color: #fff; text-shadow:0 9px 13px #b3adff; padding: 4vh 0;}
.congratulationhd span{position: absolute; top: 0; left: 0; z-index: -1;}
.yourscrnbd{display: flex; justify-content: center; align-items: center;}

.totacloctime{border-radius: 4vh; background: #FF6699; padding: 2.5vh; color: #fff; width: 80%; margin:3vh auto;}
.totacloctime .time{font-size: 4vh; font-weight: 700;}
.totacloctime .tottime{font-size: 2vh; font-weight: 500;}
.totacloctime span{display: inline-block; width: 8vh;}

.lavescn1{display: flex; justify-content: center; align-items: center;}
.lavescn1 .progress{width: 100%; height: 1.5vh;}

.lavescnNum {
    width: 10vh; font-weight: 700; color: #414141; font-size:1.5vh;
}
.lavescnCnt {
    width: 10vh;
    display: inline-block;
    text-align: right; font-size: 1.8vh;color: #414141;
}
.lavescn1bg{border-radius: 4vh; border: 1px solid #FFCAB0; background: #FFF6EB; padding: 2.5vh; width: 80%; margin: 0 auto 3vh auto;} 
.lavescnCnt span{font-weight: 700; color: #414141;}

.pron1,.pron2,.pron3{border-radius: 50px;}
.pron1 .bg-succes{background:#009933; border-radius: 50px;}
.pron2{background:#FFEADC;}
.pron2 .bg-orang{background:#FF9966;border-radius: 50px;}
.pron3 {background:#D0BEF2;}
.pron3 {background:#D0BEF2;}
.pron3 .bg-blu{background:#7552FF;border-radius: 50px;}


/* suman */
.hoverable {
    cursor: pointer;
}

.counters {
    display: flex;
}

.counter {
    position: relative;
    display: flex;
    overflow: hidden;
    align-items: center;
    color: #333;
    margin: 0 1.25rem 0.625rem;
}
.counter > span {
    z-index: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: -webkit-transform 2s ease;
    transition: transform 2s ease;
    transition: transform 2s ease, -webkit-transform 2s ease;
    -webkit-transform: translateY(0);
    transform: translateY(0);
    line-height: 1;
}
.counter > span span {
    flex: 0 0 100%;
    height: 100%;
}
.counter:nth-child(1) > span {
    transition-delay: 1s;
}
.counter:nth-child(2) > span {
    transition-delay: 2.5s;
}
.counter:nth-child(3) > span {
    transition-delay: 4s;
}
.counter:nth-child(4) > span {
    transition-delay: 5.5s;
}
.counter:nth-child(1) {
    color: #EF8354;
}

.counter:nth-child(2) {
    color: #0EB1D2;
}

.counter:nth-child(3) {
    color: #2D3142;
}

.counter:nth-child(4) {
    color: #698F3F;
}

.text-center.fxnbotmbtn {
    position: absolute;
    bottom: 2vh;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}


.correct-ans{
    background: #543dae;
    border-radius: 2vh;
}
.wrong-ans{
    background: #ff4141;
    border-radius: 2vh;
}