/*SEGOEUI*/
@font-face {
    font-family: SEGOEUI;
    src: url(../font/Segoe-UI-Font/SEGOEUI.ttf);
    font-display:swap;
}
 
@font-face {
    font-family: berlin-sans-fb;
    src: url(../font/berlin-sans-fb/Berlin_Sans_FB.ttf);
    font-display:swap;
}

.hidden {
    display: none !important;
}

/*slider switch css */
.theme-switch-wrapper {
    display: flex;
    align-items: center;
  }
  .theme-switch-wrapper em {
    margin-left: 10px;
    font-size: 1rem;
  }
  
  .theme-switch {
    display: inline-block;
      height: 21px;
      position: relative;
      width: 49px;
  }
  
  .theme-switch input {
    display: none;
  }
  
  .slider {
    background-color: #ccc;
    bottom: 0;
    cursor: pointer;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: 0.4s;
  }
  
  .slider:before {
    background-color: #fff;
    bottom: 2px;
    content: "";
    height: 17px;
    left: 2px;
    position: absolute;
    transition: 0.4s;
    width: 17px;
  }
  
  input:checked + .slider {
    background-color: #7E3EEF;
  }
  
  input:checked + .slider:before {
    transform: translateX(26px);
  }
  
  .slider.round {
    border-radius: 34px;
  }
  
  .slider.round:before {
    border-radius: 50%;
  }
  


:root {
    --dark-bg:#fff;
    --full-dark-bg:#111827;
    --min-dark:#1F2937;
    --mild-dark:#374151;
    --purple:#7E3EEF;
    --purple-shade:#8A5AF6; 
    --body-color:#000;
  }
  [data-theme=dark] {
     --dark-bg:#171F2E;
     --full-dark-bg:#111827;
     --min-dark:#1F2937;
     --mild-dark:#374151;
     --purple:#7E3EEF;
     --purple-shade:#8A5AF6;
     --body-color:#fff;
  }
  body{
    font-family: "-apple-system,BlinkMacSystemFont,avenir next,avenir,segoe ui,helvetica neue,helvetica,Ubuntu,roboto,noto,arial,sans-serif";
    background-color: var(--dark-bg); 
    color: var(--body-color) !important;
    font-size:18px;
  }
  p, li{
    font-family:  SEGOEUI; 
  }
  .navbar-brand img{
      width: 100px !important;
  }
  .navbar-brand span{
    font-family: berlin-sans-fb;  color: var( --body-color);
  }
  .bg-light{
    background-color: var(--dark-bg) !important;
  }
  .navbar-brand {
      width: 200px;
  }
  .navbar-brand img{
      width: 100%;
  }
  .navbar{
      border-bottom: 1px solid #374151;
  }
  a {
      color:#fff;  
      text-decoration: none;
    }
    a :hover{
        color: #fff !important;
        text-decoration: none !important;
    }

    .aclass{
        color: #7e3eef !important;
    }

  .top-section{
    background: rgb(17,24,39);
    background: -moz-linear-gradient(0deg, rgba(17,24,39,1) 59%, rgba(23,31,46,1) 59%);
    background: -webkit-linear-gradient(0deg, rgba(17,24,39,1) 59%, rgba(23,31,46,1) 59%);
    background: linear-gradient(0deg, rgba(17,24,39,1) 59%, rgba(23,31,46,1) 59%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#111827",endColorstr="#171f2e",GradientType=1);
  }

  .action-box{
      background-color: var(  --min-dark); padding: 20px;
      height: auto; border-radius:20px; width: 90%; margin: 0 auto;    border: 1px solid  var(--mild-dark)
  }


  .sub-min-box{ 
      border: 1px solid #374151;  border-radius:10px;  background-color:var(--min-dark) ; position: relative; top:-60px;
  } 
  .sub-box-data{height: 70px;
    background-color: var( --purple);
     border-radius:10px; margin: 5px;
  }
.btn-section{
    width: 100%;
}
  .btn-inner{padding: 4px;
    border: 1px solid #374151;  border-radius:10px;  background-color:var(--min-dark) ; 
  }
  .btn-bg-inner{
    background-color: var( --purple);
    border-radius:10px; margin: 2px;  
  }
  .mid-scroll {
      text-align: center;
  }
  .mid-scroll img{
    width: 80px; 
  }

  .btn-bar{

    background-image: url(../images/spacebar.png); width: 80%;
    background-size: contain;
    height: 68px;
    /* background: red; */box-shadow: 0px 9px 51px #171f2e;
    background-repeat: no-repeat;
    background-clip: border-box;
  }
 .btn-bar span{
     color: #576882; 
 }
 .icon-div img {
    float: left;
    width: 43px;
    
 }
 .icon-div {
     margin: 8px;
 }
 .btn-text{ margin-bottom: 10px;
     color: #fff; float: left; font-size: 25px; margin-left: 20px;
 }

 .bullet-box{ width: 300px; margin-left: 60px;
     background:var(--min-dark); padding:10px; border-radius: 10px;     border: 1px solid #374151;  
 }
 .box-heading span{
     font-size: 25px;
 }

 .box-heading li{
     line-height: 20px;line-height: 34px;
 }
 .divider{
    width: 83px;
    margin: 0 auto;
 }
 .min-sub-divider{
     position: relative;
 }
.divider:after {
   
    content: '';
    width: 100%;
    height: 2px;
    display: block;
    background: #343e4e;
    position: absolute;
    left: 0px;
    z-index: -1;
    top: 26px;
}

.updated{
     width: 100%; padding: 20px; margin-left: 0px;
}
.updated .box-heading span{
    border-bottom: 1px solid #374151; padding-bottom: 8px; display: block;
}
.custom-bullet li:before { content:'';
    margin: 0;
    padding: 36px 0 37px 32px;
	list-style: none !important;
	background-image: url(../images/bull-icon.svg);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 20px;
 
}

.custom-bullet li{ margin-left: -34px;
    list-style: none !important;
}
.custom-bullet li a{
    color: #CCB8F1; font-weight: 500; text-decoration: underline;
}


/*Footer*/
footer{
    background-image: url(../images/footer-bg.svg);
    height: 200px; background-size: cover;
}

.footer-logo{
    text-align: center;     padding-top: 5%;
} 
.social-icon{
text-align: center; margin-top: 20px;
}
.social-icon span img{ width: 25px; height: 25px;

}
.social-icon span {
    margin-right: 20px;
}
.text-bottom span{
    color: #B3B3B3;
}

.action-sub-bar  ul{
    list-style: none; margin-bottom: 0px;
}
.action-sub-bar  ul li{
    display: inline-block; margin-right: 30px; font-weight: 600;
}
.action-sub-bar{text-align: center;
    border: 1px solid #374151; border-radius: 8px; padding: 5px;
}
.action-sub-bar  ul li.active{
    border-bottom: 2px solid var(--purple);
}
.que-alt-section{
    width: 50%; margin: 0 auto; padding: 20px; border: 2px solid var(--purple); border-radius: 20px;     padding-left: 100px;
}
.que-alt-section:before {
    content: '';
    margin: 0;
    padding: 37px 58px 37px 32px;
    list-style: none !important;
    background-image: url(../images/question-info.svg);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 86px;
    position: relative;
    left: -145px;
    top:40px;
 
}

.modal-popup-div {
    background-image: url(../images/popup-main.svg); height: 462px; 
    box-shadow: 0px 0px 5px var(--purple-shade); border-radius: 20px;
    background-size: cover;
    width: 100%;
    background-position: center;
}



.bg-change-div{
    background-image: url(../images/popup-purple.svg);
}    
.bg-change-div .info-chat{
background: #171f2e;
}
 
.turtle  img{ margin-top: 63px;
    width: 186px;
    float: left;
    margin-left: 17px;

}

.turtle-text-sub{
    font-size: 18px;
    margin-bottom: 0px;
}
.info-chat{ text-align: center;
    background:#633EB3; 
}
.btn-try-again{
    background:#633EB3;  color: #fff; font-size: 12px;
}
.popup-data{
    float: left;margin-left:50px;
    text-align: center;
    margin-top: 0px;
}
.input-sub-box{
    background:var(--min-dark);
    color: #F2C145; font-size: 25px; 
}
.sub-divider{
    width: 50px; height: 2px; background:#F2C145; margin: 0 auto; display: block;
}
/* .input-sub-box span{
    font-size: 12px;
} */
.info-chat{
    width: 250px; border-radius: 5px;
}
.input-sub-box {
    width: 80%; margin: 0 auto; text-align: center;border-radius: 5px;

}
.popup-data p + span{
    font-size: 50px;
    font-weight: 600;
}

.popup-data:before {
    content: '';
    margin: 0;
    padding: 37px 58px 37px 32px;
    list-style: none !important;
    background-image: url(../images/corner.svg);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 38px;
    position: relative;
    left: -115px;
    top: 204px;
}

.bg-change-div .popup-data:before{
    background-image: url(../images/corner-black.svg);
}
.bg-change-div .modal-top-section .btn{
    background:#F2C145;  color: var(--min-dark);
}
.modal-top-section{
    clear: both;    overflow: auto;
}
.modal-footer-div{
    text-align: center;
}
.modal-footer-div .btn{
    font-size: 15px;
}
.digit{
    font-size: 45px;
    text-align: center;
    width: 82px;
    text-shadow: 3px 2px 0px #2c2b2b87;
    line-height: 65px;
}
.info{
    width: 85px;
    text-align: center;
    margin-top: 23px;
    font-size: 15px;
}
.round-icon{
    width: 31px;
    height: 31px;
    background: var(--min-dark);
    border: 1px solid var(--mild-dark);
    border-radius: 50px;
    position: absolute;
    right: -11px;
    top: -11px;
}
.round-icon img{
width: 80%; padding: 3px;
}

@media (max-width:768px) 
{
    .btn-bar{
        height: auto;
    }
    
 
.action-sub-bar ul li {
    display: inline-block;
    margin-right: 9px;
    font-weight: 600;
}.btn-text {
  
     
    font-size: 22px;
 
}
.bullet-box{
    margin-left: 0px;
}
.h2, h2{
    font-size: 1.5rem;
}
.box-heading span {
    font-size: 21px;
}
.que-alt-section{
    width: 100%;
}
.que-alt-section:before{
    left: 0%;
    top: -32px;
}
.que-alt-section{
    padding-left: 10px;text-align: center;
}
.modal-popup-div{
    height: auto; margin-bottom: 21px;
}
.modal-footer-div .btn{
    margin-bottom: 20px;
}
.turtle{
    text-align: center;
}
.turtle img{
    float: none;
}
.text-bottom{
    text-align: center; margin-top: 10px;

}
.text-bottom .float-left,.text-bottom .float-right{
    float: none !important; display: block; 
}
.sub-min-box{

    top: 0px!important;
}
.mid-scroll img {
    width: 72px;
    margin-top: 17px;
}
}
.scroll-btn {text-decoration-line: none;}
.scroll-btn:hover {color: #fff;}
.mode-btn a:hover{color: #fff;text-underline-offset: 5px;text-decoration: underline 0.13rem;}
.custom-time{background: transparent;border: none;color: #fff;font-size: 35px;width: 90px;}
.timer-div{width: 120px;}
.time-div{width: 55px;}