/* @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap');

:root {
  --btn-bg-gradiant: linear-gradient(180deg, #86DEF9 0%, rgba(28, 186, 233, 0) 100%);
  --primary-font-family:'Aladin';
  --secondary-font-family: 'Poppins', sans-serif;
  --question-bg: rgba(0, 65, 122, 0.6);
  --question-bg-hover :rgb(20 127 193);
  --heading :3rem;
  --pera :1.2rem;
  --h1 :2rem;
  --h2 :1.6rem;
  
}

body{
  font-family: 'proxima_novaregular';
  font-style:normal;
  font-weight:400;
  font-size: 20px;
  line-height: 30px;
  color: #555555;
}
 
.main-header.nav{padding-top: 88px;}
.gameIntro .game-into{min-height: calc(100vh - 88px);display: flex;justify-content: center;align-items: center;text-align: center;}
.gameIntro .game-into .inner-view{background: linear-gradient(99.63deg, #E3E3E3 0%, #FFFFFF 100%);box-shadow: -16px -16px 40px #F3F3F3, 16px 16px 40px #E3E3E3, inset -16px -16px 40px #F3F3F3, inset 16px 16px 40px #FFFFFF;border-radius: 25px;padding: 3rem;}


.LevelIntro.comman_view .container-fluid {text-align: center;background-size: contain;}
.LevelIntro.comman_view .container-fluid .level-intro{min-height: calc(100vh - 175px);display: flex;justify-content: center;align-items: center;}
.LevelIntro.comman_view .container-fluid .level-intro .intro-view  img{ max-width: 600px; display: block; }
.LevelIntro.comman_view .container-fluid .level-intro .intro-view .btn.btn-primary{ margin: 1rem 0;}

.stageIntro.comman_view .container-fluid {text-align: center;background-size: contain;}
.stageIntro.comman_view .container-fluid .stage-intro{min-height: calc(100vh - 175px);display: flex;justify-content: center;align-items: center;}

.ReadContent.comman_view .container-fluid {text-align: center;background-size: contain;}
.ReadContent.comman_view .container-fluid .read-view{min-height: calc(100vh - 175px);display: flex;justify-content: center;align-items: center;}

.stagecompleted.comman_view .container-fluid {text-align: center;background-size: contain;}
.stagecompleted.comman_view .container-fluid .intro-view{min-height: calc(100vh - 175px);display: flex;justify-content: center;align-items: center;}
.stagecompleted.comman_view .container-fluid .intro-view .btn.btn-primary{ margin: 2rem 0;}

.question.comman_view .container-fluid {text-align: center;background-size: contain; background-position: center;}
.question.comman_view .container-fluid .question-view{min-height: calc(100vh - 175px);display: flex;justify-content: center;align-items: flex-start;}
.question.comman_view .container-fluid .question-view .intro-view{ width: 100%;}
.question.comman_view .container-fluid .question-view .intro-view .q-title {border: 5px solid rgba(14, 168, 255, 0.6);border-radius: 27px; padding: 2rem; margin: 3rem auto; font-size: 2rem;}

.question.comman_view .container-fluid .question-view .intro-view  .option-list {display: flex;flex-wrap: wrap;justify-content: center; padding: 0;}
.question.comman_view .container-fluid .question-view .intro-view  .option-list li{ display: inline;
    width: 22%; list-style: none;  margin: 1rem;}
.question.comman_view .container-fluid .question-view .intro-view  .option-list li label{display: block; margin: 0; height: 100%;    display: flex;justify-content: center;align-items: center;}
.question.comman_view .container-fluid .question-view .intro-view  .option-list li  input[type=radio]{ visibility: hidden;}
.question.comman_view .container-fluid .question-view .intro-view  .option-list li label span{
    display: block; padding: 1rem; font-size: 1.5rem; color: #F5F5F5; font-family: var( --primary-font-family);}
.question.comman_view .container-fluid .question-view .intro-view  .option-list li label {background:var(--question-bg);border: 6px solid #00417A;border-radius: 16px;color: #fff;}
.question.comman_view .container-fluid .question-view .intro-view .option-list li input:checked ~ label, .question.comman_view .container-fluid .question-view .intro-view .option-list li label:hover{ background: var(--question-bg-hover);}
.question.comman_view .container-fluid .question-view .intro-view .btn.btn-primary{ margin: 2rem 0;}


.comman_view .container-fluid{ background-size: cover;}
.comman_view .container-fluid  .game_introduction{ color: #fff;}
.audio__box{ display: none;}

.intro-view.level_intro{height: calc(100vh - 175px);}
.intro-view.level_intro .media{ height: 100%;flex-direction: column;justify-content: center;align-items: center;}
.level_intro .media img{ max-width: 600px;}


.intro-view .main-nav .item p{background: radial-gradient(59.09% 66.71% at 50% 50%, #FFF200 0%, #F6871F 100%);}

.LevelComplete.comman_view{background-size: cover;}
.LevelComplete.comman_view  .Level-comp  {display: flex; justify-content: center; padding: 2rem;}
.LevelComplete.comman_view .Level-comp  .inner-view{min-height: calc(100vh - 175px);display: flex;justify-content: center;align-items: center; text-align: center;}

.stageSelector.comman_view{background-size: cover;}
.stageSelector.comman_view .intro-view {display: flex; justify-content: center; padding: 2rem;}
.stageSelector.comman_view .intro-view .stage-view{min-height: calc(100vh - 175px);display: flex;justify-content: center;align-items: center; text-align: center;}
.stageSelector.comman_view .intro-view .stage-view .title{ margin: 1rem 0; text-align: center;}
.stageSelector.comman_view .intro-view .stage-view .stage-list{list-style: none;padding: 0;display: flex;justify-content: center;flex-wrap: wrap;}
.stageSelector.comman_view .intro-view .stage-view .stage-list li{width: 40%;float: left;margin-top: 2rem;}
.stageSelector.comman_view .intro-view .stage-view .stage-list li .item p{background: radial-gradient(59.09% 66.71% at 50% 50%, #FFF200 0%, #F6871F 100%);width: 50%;display: inline-block;padding: .5rem;min-height: 70px;color: #000;font-family: var( --primary-font-family);}
.stageSelector.comman_view .intro-view .stage-view .stage-list li .item span{ display: block;}

.custom-modal .modal-content{background-size: 100%;background-color: transparent;background-position: center top;background-repeat: no-repeat; padding: 3rem;}
.custom-modal .modal-content h2{ font-size:2.5rem; margin: 1rem 0; color: #fff;}
.custom-modal.wrong .modal-content h2{  color: #FF1111;}
.custom-modal .modal-content i img{ max-height: 240px;}
.custom-modal.wrong .modal-content .ans{background:rgba(0, 65, 122, 0.6);border: 6px solid #00417A;border-radius: 16px;color: #fff; font-size: 1.2rem;}
.custom-modal .modal-content .btn{  margin-top: 1rem;}
 

.comman_view .score-bar{position: absolute;color: #fff; font-size: 3rem; line-height: 60px;
text-align: left;background-image: url('../img/cyber-sidebar.png'); background-repeat: no-repeat; 
background-size: 60px;margin: 2rem 1rem; padding-left: 65px;}
.right-bar .score-bar{ right: 0; }
.left-bar .score-bar{ left: 0; }
.btn.back-link{ margin: 1rem; display: inline-block; width: 32px; height: 32px; background-image: url(../img/backlink.png); background-repeat: no-repeat; background-size: 26px;}
.btn.back-link *{ display: none;}

.comman_view .score-bar small{ display: none;}

.outer-progress{  position: relative; margin: 2rem 0;}
.outer-progress .progress{ background: linear-gradient(90deg, #a497b7 0%, #412D73 14.34%); border: 3px solid #2E6FAA;border-radius: 15px; height: 1.4rem; overflow: inherit;  position: relative;}

.outer-progress .progress > .progress-bar.primary{ background: linear-gradient(0deg, #FF2E00 -0.01%, #FF7D1F 99.99%);}

.outer-progress .progress .secondary.progress-bar{z-index: 9;}
.outer-progress .progress .secondary.progress-bar::before{  background-image: url('../img/progress-primary-icon.png'); background-size: cover;  }
.outer-progress .progress-bar{ background: linear-gradient(0deg, #009EFF -0.01%, #1FFBFF 99.99%);;
position: relative; overflow: inherit; border-radius: 15px; position: absolute; height: 18px;}
 .outer-progress .progress .progress-bar::before{  content: ""; position: absolute; width: 44px; height: 44px; background-image: url('../img/progress-icon.png'); z-index: 9;  border-radius: 100%; right: -20px;}


 */