@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@100;200;300;400;500;600;700;800;900&family=Lato:wght@100;300;400;700;900&family=Libre+Franklin:wght@100;200;300;400;500;600;700;800;900&family=Montserrat:wght@100;200;300;400;500;600;700;800;900&family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@100;200;300;400;500;600;700;800;900&family=Jost:wght@100;200;300;400;500;600;700;800;900&family=Lato:wght@100;300;400;700;900&family=Libre+Franklin:wght@100;200;300;400;500;600;700;800;900&family=Montserrat:wght@100;200;300;400;500;600;700;800;900&family=Poppins:wght@100;200;300;400;500;600;700;800;900&family=Russo+One&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Jost', sans-serif;
}





.heading01{
    color: #fff;
    font-weight: 600;
    font-size: 40px;
}
.bg-container02{
    background-color: #020C25;
    background-size: cover;
    
}
.uday01{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
}
@media screen and (min-width:415px) {
    .button03{
        width: 60% !important;
        font-size: 20px !important;
        background-color: #01162f !important;
        color: #fff !important;
    }
  }
  @media screen and (max-width:414px) {
    .button03{
        width: 100% !important;
        font-size: 20px !important;
        background-color: #01162f !important;
        color: #fff !important;
    }
  }
@media screen and (max-width:992px) {
    .card01{
        background-color: transparent !important;
        margin-top: -500px !important;

    }
    .card02{
        background-color: #01162f !important;
        border-radius: 8px !important;
        margin-top: -50px !important;
       
    }
    #timer01{
        color: #E3BC3F;
        font-size: 20px;
        font-family:sans-serif;
    }
    #timer02{
        color: #E3BC3F;
        font-size: 18px;
        padding-left: 5px;
        padding-right: 5px;
        font-family:sans-serif;
    }
    
    .dice {
        position: relative;
        width: 20px;
        height: 20px;
        transform-style: preserve-3d;
        transform-origin: center;
        /* transform: rotateX(-25deg) rotateY(-35deg); */
        animation: mahi 15s infinite linear;
        margin-top: -150px !important;
      }
    .heading02{
        color: #fff;
        font-size: 18px;
    }
    .span01{
        color:#E3BC3F;
        font-size: 18px;
    }
    .bg-container01{
        background-image: url("https://res.cloudinary.com/dqrttxm5s/image/upload/v1694174787/dice_u3kfmk.jpg");
        background-size: cover;
        height: 20vh;
        background-position: center;
        background-color: #1A1A3E;
    }
    .but01{
        background-color: #E3BC3F !important;
        font-weight: 400 !important;
        font-size: 16px !important;
        height: 30px;
    }
    .form01{
        background-color: #020C25 !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        height: 30px !important;
    }
    .form-control::placeholder {
        color: #495057 !important; /* Change the color to your desired color */
        font-weight: 600;
         font-size: 16px !important;
         /* Change the font-weight to your desired weight */
      }
      .pa01{
        color: #6c757d;
        font-family: 'Poppins', sans-serif;
        margin-top: -2.5px;
        font-size: 12px;
    }
    .span02{
        color:#E3BC3F;
        font-size: 12px;
        font-weight: 400;
    }
    .button02{
        background-color: #E3BC3F;
        width: 50%;
        height: 40px;
        border: 0px;
        font-weight: 400;
        border-radius: 8px;
        text-transform: uppercase;
        font-size: 14px;
        font-family: 'Poppins', sans-serif;
        margin-top: 25px;
    
    }
    .butn03{
        margin-top: 10px;
    }
    .butn01{
        background-color: transparent !important;
        border: 0px !important;
        color: #ffffffD9 !important;
        font-size: 16px !important;
        margin-top: 10px;
    }
    .info-solution01{
        color: #ffffffD9;
        font-size: 14px;
    }
}

@media screen and (min-width:993px) {
    .card01{
        background-color: #01162f !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        border-radius: 8px !important;
        height: 500px;
        margin-top: 25px;
    }
    #timer01{
        color: #E3BC3F;
        font-size: 27px;
        font-family:sans-serif;
    }
    #timer02{
        color: #E3BC3F;
        font-size: 25px;
        padding-left: 5px;
        padding-right: 5px;
        font-family:sans-serif;
    }
    
    .dice {
        position: relative;
        width: 100px;
        height: 100px;
        transform-style: preserve-3d;
        transform-origin: center;
        /* transform: rotateX(-25deg) rotateY(-35deg); */
        animation: mahi 15s infinite linear;
      }
    .bg-container01{
        background-image: url("https://res.cloudinary.com/dqrttxm5s/image/upload/v1694174787/dice_u3kfmk.jpg");
        background-size: cover;
        height: 40vh;
        background-position: center;
        background-color: #1A1A3E;
    }
    .card02{
        background-color: #01162f !important;
        /* border: 1px solid rgba(255, 255, 255, 0.15) !important; */
        border-radius: 8px !important;
        height: 500px;
        margin-top: 25px;
    }
    .heading02{
        color: #fff;
        font-size: 26px;
    }
    .span01{
        color:#E3BC3F;
        font-size: 26px;
    }
    .but01{
        background-color: #E3BC3F !important;
        font-weight: 400 !important;
        font-size: 18px !important;
        height: 40px;
    }
    .form01{
        background-color: #020C25 !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        height: 40px !important;
    }
    .form-control::placeholder {
        color: #495057 !important; /* Change the color to your desired color */
        font-weight: 600;
         font-size: 18px !important;
         /* Change the font-weight to your desired weight */
      }
      .pa01{
        color: #6c757d;
        font-family: 'Poppins', sans-serif;
        margin-top: -2.5px;
        font-size: 14px;
    }
    .span02{
        color:#E3BC3F;
        font-size: 14px;
        font-weight: 400;
    }
    .button02{
        background-color: #E3BC3F;
        width: 50%;
        height: 40px;
        border: 0px;
        font-weight: 400;
        border-radius: 8px;
        text-transform: uppercase;
        font-size: 16px;
        font-family: 'Poppins', sans-serif;
        margin-top: 25px;
    
    }
    .butn03{
        margin-top: 3px;
    }
    .butn01{
        background-color: transparent !important;
        border: 0px !important;
        color: #ffffffD9 !important;
        font-size: 18px !important;
        margin-top: 5px;
    }
    .info-solution01{
        color: #ffffffD9;
        font-size: 16px;
    }
}


.form-control:focus{
    border: 2px solid #E3BC3F !important;
}
.info-solution{
    color: #6c757d;
}

.himage , .h01{
    width: 75%;
    height: 75%;
}
.timage, .h02{
    width: 75%;
    height: 75%;
}


.modal-title{
    color: #000 !important;
}
.modal-header{
    background-color: #E3BC3F !important;
    border:0px !important;
}
.modal-content{
    background-color: #09224a !important;
}
.heading04{
    color: #fff;
    font-size: 38px;
}
.pa02{
    color: #fff;
    font-size: 18px;
    font-weight: 400;
}
.butn02{
    background-color: #323f4b !important;
    border: 0px !important;
}
.heads01{
    color:#fff;
    margin-top: -10px;
}
.heads02{
    color:#fff;
    margin-top: -10px;
}

.selected {
    border: 1px solid #E3BC3F;
  }

#manu{
    font-size: 25px;
    font-weight: 700;
}
.paused {
    animation-play-state: paused !important;
  }

.dice {
    position: relative;
    width: 100px;
    height: 100px;
    transform-style: preserve-3d;
    transform-origin: center;
    /* transform: rotateX(-25deg) rotateY(-35deg); */
    animation: mahi 15s infinite linear;
  }

  
  .face {
    position: absolute;
    width: 100px;
    height: 100px;
    border: 1px solid #e81c1c;
    line-height: 100px;
    font-size: 30px;
    font-weight: 600;
    text-align: center;
    background-color: red;
    color:#fff;
    border-radius: 10px;
  
  }

#number01{
    width:50px;
    height: 50px;
}
#number02{
    width:50px;
    height: 50px;
}
#number03{
    width:50px;
    height: 50px;
}
#number04{
    width:50px;
    height: 50px;
}
#number05{
    width:50px;
    height: 50px;
}
#number06{
    width:50px;
    height: 50px;
}

.dot01{
    margin-top: -30px;
    font-size: 100px;
    color:#000;
}
.dot02{
    font-size: 100px;
    color:#000;
    text-align: left;
    margin-top: -52px;
    margin-right: 10px;
}
.dot03{
    font-size: 100px;
    color:#000;
    text-align: right;
    margin-top: -50px;
    margin-left: -20px;
}
.dot04{
    font-size: 100px;
    color:#000;
    text-align: right;
    margin-right: 5px;
}
.dot05{
    font-size: 100px;
    color:#000;
    position: relative;
    margin-top: -130px;
    margin-left: -10px;
}
.dot06{
    font-size: 100px;
    color:#000;
    margin-top: -130px;
    text-align: left;
}
.dot07{
    font-size: 100px;
    color:#000;
    text-align: left;
    margin-top: -55px;
}

.dot08{
    font-size: 100px;
    color:#000;
    text-align: right;
    margin-top: -100px;
}
.dot09{
    font-size: 100px;
    color:#000;
    text-align: left;
    margin-top: -45px;
}
.dot10{
    font-size: 100px;
    color:#000;
    text-align: right;
    margin-top: -100px;
}
.dot11{
    font-size: 100px;
    color:#000;
    text-align: right;
}
.dot12{
    font-size: 100px;
    color:#000;
    text-align: right;
    margin-top: -132px;
}
.dot13{
    font-size: 100px;
    color:#000;
    text-align: right;
    margin-top: -132px;
}
.dot14{
    font-size: 100px;
    color:#000;
    text-align: left;
    margin-top: -37px;
}
.dot15{
    font-size: 100px;
    color:#000;
    text-align: left;
    margin-top: -132px;
}
.dot16{
    font-size: 100px;
    color:#000;
    text-align: left;
    margin-top: -132px;
}
.dot17{
    font-size: 100px;
    color:#000;
    text-align: right;
}
.dot18{
    font-size: 100px;
    color:#000;
    text-align: right;
    margin-top: -160px;
}
.dot19{
    font-size: 100px;
    color:#000;
    text-align: center;
    margin-top: -70px;
}
.dot20{
    font-size: 100px;
    color:#000;
    text-align: left;
    margin-top: -70px;
}
.dot21{
    font-size: 100px;
    color:#000;
    text-align: left;
    margin-top: -160px;
}



  .front {
    transform: translateZ(50px);
  }
  
  .back {
    transform: rotateX(180deg) translateZ(50px);
  }
  
  .right {
    transform: rotateY(90deg) translateZ(50px);
  }
  
  .left {
    transform: rotateY(-90deg) translateZ(50px);
  }
  
  .top {
    transform: rotateX(90deg) translateZ(50px);
  }
  
  .bottom {
    transform: rotateX(-90deg) translateZ(50px);
  }

  
  @keyframes mahi {
    0% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
      }
      100% {
        transform: rotateX(360deg) rotateY(520deg) rotateZ(520deg);
      }
  }

  @keyframes rotate {
    0% {
      transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }
    20% {
      transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
    }
    40% {
      transform: rotateX(720deg) rotateY(720deg) rotateZ(720deg);
    }
    60% {
      transform: rotateX(1080deg) rotateY(1080deg) rotateZ(1080deg);
    }
    80% {
      transform: rotateX(1440deg) rotateY(1440deg) rotateZ(1440deg);
    }
    100% {
      transform: rotateX(1800deg) rotateY(1800deg) rotateZ(1800deg);
    }
  }

.rotate01{
  animation: rotate 5s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
}

.close01{
    color:#fff !important;
    padding: 10px !important;
}
#resim{
    width:60% !important;
    height: auto !important;
}



#timer01{
    color: #E3BC3F;
    font-size: 27px;
    font-family:sans-serif;
}
#timer02{
    color: #E3BC3F;
    font-size: 25px;
    padding-left: 5px;
    padding-right: 5px;
    font-family:sans-serif;
}

  .opacity-05{
    opacity: 0.5;
  }
  .opacity-01{
    opacity: 1;
  }


  .rules{
    color:#fff;
    font-size: 18px;
}

li{
    color: #fff;
    margin-left: 25px !important;
    margin-bottom: 15px !important;
}

@media screen and (max-width:991px){
    .card01{
        margin-top: 0px !important;
    }
}