@font-face {
    font-family: 'source_sans_probold';
    src: url('fonts/sourcesanspro-bold-webfont.woff2') format('woff2'),
         url('fonts/sourcesanspro-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'source_sans_proregular';
    src: url('fonts/sourcesanspro-regular-webfont.woff2') format('woff2'),
         url('fonts/sourcesanspro-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

*,::before,::after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;outline: none;}
body{overflow:hidden;overflow-y:auto;font-family: 'source_sans_proregular';}
html{scroll-behavior: smooth}
body,ul,ol,li,h1,h2,h3,h4,h5,h6,figure,p,strong{padding:0;margin:0;list-style:none;}
body,p{font-size:12px;color:#666;line-height:normal;}
h1,h2,h3,h4,h5,h6{font-weight:600}
a,.btn,button,input,select{text-decoration:none;outline:none;}
select{cursor:pointer;background: transparent;}
.container{padding:0 15px;margin:0 auto;width: 100%; max-width:1170px;}
.containerFlex{display: flex;}
.mainBox{height: 100vh;width: 100%; overflow: hidden;background-size:contain; background-position:left top,bottom right ; background-image:url('images/Asset2.png'), url('images/Asset1.png');background-repeat: no-repeat, no-repeat;position: relative;}
.imgResponsive{max-width:100%;height:auto;max-height:100%}
.mainBox::after{position: absolute;bottom: 0;top: 0;left: 0;right: 0;z-index: -1;background-image: linear-gradient(#6400A0, #20092d);content: ''}
.logoDiv{height: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;width: 100%;grid-gap: 6vw;}
.buttonBtn{height: 123px;padding: 20px 20px;background: #fff; font-family : source_sans_proregular;font-weight : bold;font-size : 61px;text-transform : uppercase;color : #6400A0;filter:drop-shadow(0px 0px 9px rgba(255, 255, 255, 0.8)); position:relative;}
.buttonBtn:before{content:"";position:absolute;right: 100%;width: 0;top:0;height: 0;border-top: 63px solid transparent;border-right: 63px solid #fff;border-bottom: 61px solid transparent;}
.buttonBtn:after{content:"";position:absolute;left: 100%;width: 0;top:0;height: 0;border-top: 63px solid transparent;border-left: 63px solid #fff;border-bottom: 61px solid transparent;}

.buttonBtn:hover{background: #45B2C5;color: #fff}
.buttonBtn:hover:before{border-right: 63px solid #45B2C5;}
.buttonBtn:hover:after{border-left: 63px solid #45B2C5;}
.header{display: flex;justify-content: space-between;padding: 30px 30px;position:relative}
.logo{max-width: 356px;}
.exitbtn{background: #F37F63;padding: 20px 20px; font-family : source_sans_proregular;font-weight :bold;font-size : 44px;color : #FFFFFF;color : rgb(255, 255, 255);}
.exitQuiz{z-index:6;padding:10px 15px;margin-left: 40px; position:relative;border:none;font-weight: bold;cursor:pointer;filter:drop-shadow(0px 0px 9px rgba(255, 255, 255, 0.8));}
.exitQuiz::after{content:'';position:absolute;width:100px;left:-98px;top:0px;height:80px;clip-path: polygon(67% 47%, 99% 0%, 99% 102%);background: #F37F63;}
.exitQuiz::before{content:'';position:absolute;width:100px;right:-99px;top:0;height:80px;clip-path: polygon(37% 48%, 0 -6%, 0 102%);background:#F37F63;}
.exitQuiz:hover,.exitQuiz:hover::before,.exitQuiz:hover::after{background:#c73f1e}


.Question{width: calc(70%);margin: 0 auto;}
.Questionans{display: flex;justify-content: space-between;align-items: center;}
.Questionans h1{font-family : source_sans_proregular;font-weight : bold;font-size : 68px;color : #FFFFFF;color : rgb(255, 255, 255);}
.timer{align-self: flex-end;}
.timer p{font-family : source_sans_proregular;font-weight : bold;font-size : 25px;color : #FFFFFF;color : rgb(255, 255, 255);margin-bottom: 17px;}
.questionBox{margin-top:20px;font-size:26px;background:#fff;color:#6400A0;height:80px;display:flex;align-items:center;margin-bottom: 80px}
.line{width: 100vw;background:rgba(255, 255, 255, 0.5) ;height: 2px;top: 50%;   position: absolute;z-index: -1;}
.lineQuestion{transform: translate(-16%, -50%);}
.boxShape{position: relative;z-index:1;}
.boxShape{padding:15px;position:relative;border:none;font-weight: bold;filter:drop-shadow(0px 0px 9px rgba(255, 255, 255, 0.8));}
.boxShape::after{content:'';position:absolute;width:100px;left:-98px;top:0px;height:80px;clip-path: polygon(50% 50%, 99% -1%, 99% 102%);background: #fff;}
.boxShape::before{content:'';position:absolute;width:100px;right:-99px;top:0;height:80px;clip-path: polygon(50% 50%, 0 -6%, 0 102%);background:#fff;}
.optios{display:flex;flex-wrap:wrap;column-gap:152px;row-gap:30px;position: relative;justify-content:center;width: 100%;}
.option{cursor:pointer;width:41%;background:#fff;height:80px;display:flex;align-items:center;gap:40px;position: relative;z-index: 2;}
.option:hover{background:#19BB7C;}
.option.active:hover{background:#19BB7C;}
.option.Inactive:hover{background:#F37F63;}

.optios .ans{font-size:20px;color:#6400A0;}
.option:hover .ans{color:#fff;}
.option:hover.boxShape::before, .option:hover.boxShape::after{background:#19BB7C;}
.boxShape .smallShaeBox {z-index: 10;background: #6400A0;color: #fff;font-size: 34px;font-weight: bold;padding: 15px;position: relative;border: none;font-weight: bold;cursor: pointer;width: 50px;height: 50px;text-align: center;}
.boxShape .smallShaeBox{z-index:10;background:#6400A0;color:#fff;font-size:34px;font-weight:bold;padding:2px;position:relative;border:none;font-weight: bold;cursor:pointer;width:50px;height:50px;text-align:center;filter:drop-shadow(0px 0px 9px rgba(255, 255, 255, 0.8));}
.boxShape .smallShaeBox::after{content:'';position:absolute;width:75px;left:-74px;top:0px;height:50px;clip-path: polygon(65% 47%, 100% 0%, 100% 102%);background: #6400A0;}
.boxShape .smallShaeBox::before{content:'';position:absolute;width:75px;right:-74px;top:0;height:50px;clip-path: polygon(35% 53%, 0 -6%, 0 102%);background:#6400A0;}
.boxShape.true,.boxShape.true::after,.boxShape.true::before{background:green;}
.boxShape.true .smallShaeBox,.boxShape.true .smallShaeBox::before,.boxShape.true .smallShaeBox::after{background:#fff;color:#6400A0;}
.boxShape.true .ans{color:#fff;}
.lineQuestion2{z-index: 1;top: 78%}
.lineQuestion1{z-index: 1;top: 21%}
.popup{position: fixed;width: 100%;top: 0;bottom: 0; z-index: 8;display: none;align-items: center;justify-content: center;backdrop-filter: blur(10px);}
.popup.active{display: flex;}

.popupBody{border: solid 5px #fff;border-radius: 25px;width: 70%;height: 270px;display: flex;align-items: center;justify-content: center;}
.popupBody p{ font-family : source_sans_proregular;font-weight : bold;font-size : 64px;color : #FFFFFF;color : rgb(255, 255, 255);text-align: center;}
.popupBody.right{background: #47C996;position: relative;}
.popupBody.WrongDD{background: #F37F63;position: relative;}
.popupBody.exitPopup{background: #45B2C5;position: relative;flex-direction: column;grid-gap:30px}
.popupBody .arrowIcon{position: absolute;top: 0;left: 50%;transform: translate(-50%, -50%);width: 100px}
.popupBody.exitPopup .arrowIcon{width: 195px}
.popup .happy1{position: fixed;left: 0%;bottom: 0%;top:0;right:0;width: 100%;}
.popup .happy1 img{object-fit:cover;width:100%}
.popup .happy2{position: fixed;right: -2%;bottom: -5%;width: 42%;transform: scale(-1, 1);}
.button-container{display: flex;justify-content: flex-end;padding: 50px 50px 0 0;position: relative;}
.button-container .skip{display:flex;align-items:center;justify-content:center;height:59px;border: none;color:#6400A0;background:#fff;font-size:24px;font-weight:bold;position: relative;padding: 0 10px;margin-right: 100px;cursor: pointer;z-index: 3;filter:drop-shadow(0px 0px 9px rgba(255, 255, 255, 0.8));}
.button-container .skip::after{content:'';position:absolute;width:85px;height:59px;clip-path: polygon(50% 50%, 98% 0%, 100% 102%);background: #fff;left:-83px;top:0px;}
.button-container .skip::before{content:'';position:absolute;width:85px;height:59px;clip-path: polygon(50% 50%, 0 -6%, 0 102%);background:#fff;right:-84px;top:0;}
.button-container .skip:hover::before,.button-container .skip:hover::after,.button-container .skip:hover{background: #45B2C5;color: #fff;}
.lineSkip{z-index: 2;width: 500px;right: -5%;top: 72%;z-index: 1}
.lineExit{z-index: 2;width: 500px;left: -15%;top: 48%;z-index: 1}
.videoWrapper{width:100vw;height:100vh;overflow:hidden}
.videoWrapper video {object-fit: cover;width:100%;height:100%;}
.buttonGroup{display:flex;grid-gap:125px}
.btnExit{display:flex;align-items:center;justify-content:center;height:59px;color:#45B2C5;background:#fff;font-size:24px;font-weight:bold;position: relative;padding: 0 10px;border:none; cursor: pointer;z-index: 3;filter:drop-shadow(0px 0px 9px rgba(255, 255, 255, 0.8));width:100px}
.btnExit::after{content:'';position:absolute;width:85px;height:59px;clip-path: polygon(50% 50%, 98% 0%, 100% 102%);background: #fff;left:-83px;top:0px;}
.btnExit::before{content:'';position:absolute;width:85px;height:59px;clip-path: polygon(50% 50%, 0 -6%, 0 102%);background:#fff;right:-84px;top:0;}
.btnExit.no:hover,.btnExit.no:hover::after,.btnExit.no:hover::before{background:#F37F63;color:#fff}
.btnExit.yes:hover,.btnExit.yes:hover::after,.btnExit.yes:hover::before{background:#19BB7C;color:#fff}
.dNone{display:none}
.lineTrue{top:49%}
.copyRigh{position:fixed;left:15px;bottom:15px;padding:10px;border-radius:10px;color:#fff;font-size:16px}
.copyRigh span{color:red;}
.copyRigh a{color:#fff;}