*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;

}
:root{
    --tw-text-opacity: 1;
    --text-whte:#fff;
    --primary-color:#f0ba33;
    --text-light:#808699;
}
.btn{  

    margin: 0.5rem;
    border-radius: 0.5rem;
    --tw-bg-opacity: 1;
    background-color: hsl(43 86% 57% / var(--tw-bg-opacity));
    padding: 0.75rem 2rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(0 0 0 / var(--tw-text-opacity));
    outline: transparent solid 2px;
    outline-offset: 2px;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1rem;
    display: block;
    border-radius: 0.75rem;
    text-align: center;
    font-size: 0.875rem;
    line-height: 1.25rem;
}
.btn-primary{
    background-color: var(--primary-color)!important;
    border-color:var(--primary-color)!important;
}
.btn-secondary{
  background-color: #27282b!important;
  border-color: #2d2e34!important;
  color:var(--text-whte);
}


body{
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 400;
    --tw-text-opacity: 1;
    color: hsl(0 0% 49% / var(--tw-text-opacity));
    background-color: rgba(255, 255, 255, 0.13);
    background-repeat: no-repeat;
    background-size: auto, cover;
    background-attachment: fixed;
    font-family: 'Inter', sans-serif;
}
h1{
    font-size: 3rem!important;
}
h1,h2,h3,h4,h5,h6,h6{
    color:var(--text-whte)!important;
   
    font-weight: 600;

}
.font-w700{
    font-weight:700!important;
}
.font-w600{
    font-weight:600;
}
p{
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 400;
}
.header_main{
    position: relative;
    width: 100%;
   border-bottom: 1px solid hsl(210, 1%, 65%, 0.1); ;
    background-color: hsl(231, 7%, 19%, 0.3);

}
.header_main:before{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(2px);

}
.logo{
  width: 130px;
}

.navbar-collapse {
    flex-grow: 1;
    align-items: center;
}

.justify-content-center{
  justify-content: center !important;
}
.header_main nav ul li a{
    color:rgba(255, 255, 255, 0.6)
}
.header_main .navbar-nav .nav-link.active{
    color:var(--text-whte);
}
.header_main .navbar-nav .nav-link{
    font-size: 0.9rem;
    padding: 10px 20px;

}
.header_main .navbar-nav .nav-link:hover{
    color:var(--text-whte);
}
.header_main .container-fluid{
    margin-left: auto;
    margin-right: auto;
    width: min(90vw, 1200px);
}
.hero-main-box{
    padding-top: 7rem;
}
.main-letter{
    letter-spacing: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--primary-color);
    

}
.main-content{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    max-width: 677px;
    text-align: center;
    position: relative;
    
}
.text-primary-1{
    color:var(--primary-color)!important;
}
.w-250{
    width:250px;
}
.w-90{
    width: 90%;
}
.w-16{
    width:16%;
}
.logo-footer{
  width: 100px;
}
.bg-after-effect{
    position: absolute;
    right: 25%;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: hsl(43 86% 57% / var(--tw-bg-opacity));
    -webkit-filter: blur(200px);
    filter: blur(200px);
    height: 200px;
    width: 200px;
}
.section-title h2{
    margin-bottom: 1.5rem;
    text-align: center;
    font-size: 1.875rem;
    line-height: 2.25rem;
    font-weight: 600;
}

.section-padding{
    padding-bottom: 6rem;
    padding-top: 2.5rem;
}
.table{
    overflow: hidden;
    border-radius: 1.5rem;
    border-width: 1px;
    border-color: rgba(255, 255, 255, 0.06);
    background-color: hsl(210 3 12%);
    --tw-bg-opacity: 0.2;
    --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

 


.table-content{
    display: flex;
    align-items: center;
}
.coin-media{
    width:2rem;
    height:2rem;
    margin-right:1rem;
}
.sub-content p{
   padding: 0;
   font-size: 1rem;
   line-height: 1.5rem;
   font-weight: 500;
   text-transform: uppercase;
}
.sub-content small{
    font-size: 0.75rem;
    line-height: 1rem;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
    opacity: 0.6;
}
.bg-effect-2{
    position: absolute;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: hsl(43 86% 57% / var(--tw-bg-opacity));
    -webkit-filter: blur(300px);
    filter: blur(300px);
    height: 400px;
    left: 30%;
    top: 0px;
    width: 400px;
}
.section-title h5{
    margin-left: auto;
    margin-right: auto;
    max-width: 600px;
    text-align: center;


}
.brand-box{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 2rem;
    margin-top: 1.5rem;
}
.barand-media{
    padding: 0 2rem;
}
.barand-media img{
    opacity: 0.4;
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    width: 100%;
}
.barand-media img:hover{
    opacity: 1;
    transition: all 0.5s;
}
/* counter-section */
.counter-box{
    text-align: center;
}
.counter-box h3{
    font-size: 3rem;
    color: var(--primary-color)!important;
}
.counter-box p{
    font-size: 1.125rem;
    line-height: 1.5rem;
    font-weight: 600;
    color: var(--text-whte);
}
.section-padding.style-1{
    padding-top: 5rem;

}
.youtube_box iframe{
    width: 100%;
    height: 450px;
    border-radius:10px;
}
.section-align{
    margin: 0 auto;
    max-width: 950px;
}
.neon-effect-box{
    display: flex;
    align-items: center;
}


.neon-icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    color: currentColor;
    background: #81702e;
    box-shadow: 0px 0px 40px 2px rgb(152 152 73 / 45%);
       transition: all 0.3s ease-in-out;
    height: 4rem;
    width: 4rem;
    margin-right: 1rem;
}
.neon-icon svg path{
    stroke: var(--primary-color);
}
.shadow-style-1{
    box-shadow: 0px 0px 46px 2px rgb(51 86 194 / 46%)!important;
    background: #384b7e!important;
}
.shadow-style-1 svg path{
    stroke: #3b82f6;
}
.vip-pool-box{
    margin-top: 3rem;
    margin-bottom: 3rem;
    border-radius: 1.5rem;
    border-width: 1px;
    padding-left: 6rem;
    padding-right: 6rem;
    padding-top: 4rem;
    padding-bottom: 4rem;
    background-color: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);

}
.vip-pool-box p{
    margin-bottom: 3rem;
}
.card-box{
    height: 230px;
    opacity: 1;
    transform: translate(0px, 0px);
    display: flex;
    flex-direction: column;
    align-items: center; /* equivalent to -webkit-box-align: center */
    padding: 1.5rem 0;
    text-align: center;
  
    /* Ring shadow */
    --tw-ring-color: hsl(43 86% 57% / 0.2);
    --tw-ring-offset-width: 0px; /* You can adjust this if needed */
    --tw-ring-offset-color: #fff; /* Default value or adjust */
    --tw-ring-inset: '';
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  
    padding-left: 0;
    padding-right: 0;
    border: 1px solid #edb83357;
  
    animation-duration: 300ms;
    transition:
      color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0.1s,
      background-color,
      border-color,
      text-decoration-color,
      fill,
      stroke,
      opacity,
      box-shadow,
      transform,
      filter,
      backdrop-filter;
  
    border-radius: 0.5rem;
  
    background: radial-gradient(
      at 100% 0px,
      rgba(224, 153, 21, 0.4) -15%,
      rgba(68, 68, 68, 0.72) 78%
    );
  }
  .card-box h3{
    font-size: 1.25rem;
    margin-bottom:0;
  }
  .card-box p{
    font-size:1rem;
    color:hsl(231 7% 19%);
  }
  .card-box p:hover{
    color: var(--text-whte);
  }
  .feature-media img{
    width: 100%;
  }
  .feature-box{
    margin-top: 4rem;
  }
  .feaure-content{
    padding-left: 3rem;
    padding-right: 3rem;
  }
  .feaure-content h3{
    font-size: 1.875rem;
  }
  .check-flex{
    display: flex;
    align-items: center;
    justify-content: start;
  }
  .check-icon{
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    color: currentColor;
    background: #81702e;
    box-shadow: 0px 0px 40px 2px rgb(152 152 73 / 45%);
    transition: all 0.3s ease-in-out;
    height: 2.5rem;
    width: 2.5rem;
    margin-right: 1rem;
  }
  .check-icon img{
    width: 1.25rem;
  }
  .see_all{
    display: flex;
    justify-content: center;
    margin-top:3rem;
  }
  .question-box{
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
    background: radial-gradient(circle, rgba(33, 34, 36, 0.2) 0%, rgba(240, 187, 49, 0.2) 70%);
  }
  .question-box h2{
    font-size: 2.25rem;
  }

  
  .custom-button {
    margin: 0.5rem;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    border-radius: 0.5rem;
    padding: 0.68rem 2rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 1);
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 1);
    outline: 2px solid transparent;
    text-decoration: none;
    outline-offset: 2px;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }
  .footer-section{
    position: relative;
    background-image: url(images/);
  }
  .footer-section section{
    padding: 2rem;
  }
  .footer-light-effect{
    position: absolute;
    bottom: 13rem;
    left: 2.5rem;
    height: 0px;
    width: 0px;
      background-color: hsl(43 86% 57% / var(--tw-bg-opacity));
    box-shadow: -2px 1px 400px 400px rgba(240, 187, 49, 0.1);
   
  }
  .footer-light-effect-1{
    position: absolute;
    bottom: 13rem;
    right: 2.5rem;
    top: 1.25rem;
    height: 0px;
    width: 0px;
    --tw-bg-opacity: 1;
    background-color: hsl(43 86% 57% / var(--tw-bg-opacity));
    box-shadow: -2px 1px 400px 400px rgba(240, 187, 49, 0.1);
    -webkit-box-shadow: -2px 1px 400px 400px rgba(240, 187, 49, 0.1);
    -webkit-appearance: none;
  }
  ul li{
    list-style-type: none;
  }
  ul{
    padding-left: 0;
  }
  .social-media{
    margin-top: 2rem;
    display: flex;
    align-items: center;
   
  }
  .social-media li{
    margin-right: 8px;
  }
  .scale{
    transform: scale(1.4) translateY(6%);
  }
  a{
    text-decoration: none;
    font-size: 1rem;
    color:hsl(0 0% 49% / var(--tw-text-opacity));
  }
  .footer-widget h6{
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-weight: 700;
  }
  .footer-widget ul li{
    margin-bottom: 1rem;
  }
  .footer-offical-text{
    font-size: 1.125rem;
    margin-top: 3rem;
  }
  .footer-offical-media{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .footer-offical-media img{
    opacity: 0.6;
  }
  .footer-offical-media img:hover{
opacity: 1;
  }
  .footer-bottom p{
    margin-left: auto;
    margin-right: auto;
    margin-top: 2rem;
    margin-bottom: 0rem;
    text-align: center;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
    opacity: 0.7;
  }
  .neon-effect-box{
    float: right;
  }
  /* login-css-start */
  .login-box{
    display: flex;
    align-items: center;
    justify-content: space-between;
   
  }
  .text-muted{
    color:var(--text-light)!important;
  }
  .login-left-box{
    width: 55%;
    height: 100vh;
    position: relative;
    background-color: #000;
    overflow: hidden;
    min-height: 414px;
  }
  .sub-login-box{
    position: absolute;
    bottom: 0;
    left: 0;
  }
  .sub-login-box-1{
    position: absolute;
    top: 0;
    right: -51%;
  }
  .sub-login-box img,
  .sub-login-box-1 img{
    width: 50%;
  }
  
  .login-logo{
    width:20%;
  }
  .login-media{
    display: flex;
    align-items: center;
    justify-content: center;
    height:100vh;
  }
  .login-right-box{
    background-color: #1d1e20;
    width: 45%;
  }
  .login-right-box .form-control,
  .login-right-box .form-select{
    background-color:#1d1e20;
    font-size: .875rem;
    line-height: 1.25rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
    padding-left: .75rem;
    padding-right: .75rem;
    border: 1px solid #2d2e34;
    height: 3rem;
    color: var(--text-light);

  }
  .login-right-box .form-control:focus{
    box-shadow: unset;
    border: 2px solid var(--primary-color);
  }
  .login-right-box .form-control::placeholder{
    color: var(--text-light);
  }
  .resister-s{
    min-height: 606px!important;
  }
  /* responsive-strat */

  @media screen and (max-width: 1024px) {
    .footer-offical-media{
        
            flex-wrap: wrap;
            justify-content: center;
    }
    .sub-login-box-1{
      display: none;
    }
    
  }
/* 991 */
  @media screen and (max-width: 991px) {
    .navbar-toggler{
       
        border: 0;
        padding: 0;
    
    }
    .navbar-toggler-icon{
        filter: brightness(55.5);
    }
    .barand-media{
        padding: 0;
    }
    .container{
        max-width: 900px;
    }
    .vip-pool-box{
       padding: 2rem;
    }
    .card-box p{
        font-size: 0.9rem;
    }
    .card-box h3{
        font-size:1rem;
    }
    .section-padding {
        padding-bottom: 2rem;
        padding-top: 2.5rem;
    }
    .question-box h2 {
        font-size: 1.65rem;
    }
    .footer-box{
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
    }
    .login-left-box,
    .login-right-box{
      width: 100%;
    }
    .login-box{
      flex-wrap: wrap;
    }
    .login-media,
    .login-left-box{
      height: 100%;
    }
    .login-left-box,
    .resister-s{
      min-height: 100%!important;
    }
  }
  /* 600 */
  @media screen and (max-width: 600px) {
    h1{
        font-size: 2.5rem;
    }
    .counter-box h3{
        font-size: 2rem;
    }
    .neon-effect-box{
        float: left;
    }
    .box-scroll{
        flex-wrap: nowrap;
        overflow-x: scroll;

    }
    .feaure-content{
        padding-left: 0;
    }
    .feature-media img{
        margin-bottom: 1rem;
    }
    .question-box{
        display: flex;
        justify-content: center;
        flex-direction: column;
    }
    .footer-offical-media{
        gap: 16px;
    }

  }
  /* phone */
  @media screen and (max-width: 575px) {
    .bg-effect-2{
            width: 200px
    }
    .hero-main-box{
        padding-top: 3rem;
    }
    .main-letter{
        letter-spacing: 0.55rem;
    }
    h1 {
        font-size: 1.7rem;
    }
    .counter-box h3{
        font-size: 1.5rem;
    }
    .counter-box p {
        font-size: 0.925rem;
    }
    .youtube_box iframe{
        height: 250px;
    }
    .w-90{
        width: 100%;
    }
    .login-right-box{
      padding: 20px;
    }
    .feature-box{
        margin-top: 0rem;
    }
    .sub-login-box-1 {
      display: block;
      right: -135%;
  }

  }