html {
  scroll-behavior: smooth;
}

body::selection{
    background-color: #CBFE1C;
    color: black;

}
body{
    background-color:#0B0E15;
}
:root{
    --main-color: #CBFE1C;
--section-padding:5rem 0;
}
.main-color{
    color: var(--main-color) !important;
}

.primary-title{
    color: var(--main-color ) !important;
}
h1 ,h2 ,h3 ,h4{
  
     font-family: 'Days One', sans-serif;
}
P, button{
        font-family: "Chakra Petch", sans-serif;
       /* line-height: 1.5rem; */
}
P{
    color: #99a1af
;
}
/* ===start nav==== */
.first-button{
    background-color:var(--main-color) ;
    color: black;
    width: 9%;
    padding-block: .4375rem;
}
@media (max-width: 992px) {
  .first-button {
    width: 100% !important;
     display: block !important;
    margin-top: 10px;
  }
}
nav{
    background-color: #0B0E15 !important;
    font-family: "Chakra Petch", sans-serif;
}
.first-button:hover {
background-color: #A4CE1A;
color: black;

}
.nav-item button i:hover{
  color: var(--main-color) !important;
}
.active ,a:hover{
    color: var(--main-color) !important;
}

.navbar-border {
 width: 100%;             
  height: .0125rem;        
  background-color: #7A818C;

}

nav .my-bar:hover{
color: var(--main-color);
border: none;
}

.nav-item .nav-link.active{
  color: var(--main-color);
}
/* ====end nav===== */
/* ====start header==== */
header h1{
    font-size: 3.75rem;
    line-height: 4.6875rem;
    font-weight: 700;

}
header{
   min-height:100vh;
    background-image:linear-gradient( rgba(0, 0, 0, 0.9) ,  rgba(0, 0, 0, 0.9)) , url(images/hero-bg.jpg);
 background-size:cover;              
  background-position:50% 60%;        
  background-repeat: no-repeat;   
  display: flex;
  align-items: center;
  justify-content: center;
      font-family: "Chakra Petch", sans-serif;
 margin-top: 40px;
padding: var(--section-padding);

}

header h1:nth-child(2){
    color: #CBFE1C;
}

.btn-two
{
    color:#CBFE1C !important ;
    background-color: transparent !important;
border:2px solid #CBFE1C;
}
.btn-two:hover{
    background-color: #CBFE1C !important ;
    color: black !important ; 
border:2px solid #CBFE1C !important;
}
.btn-one{
background-color: #CBFE1C;
color: black;
  border: none;
}
.btn-one:hover{
    background-color: #CBFE1C !important;
color: black !important;
}
.common-button{
    position: relative;
outline-style: none;
overflow: hidden;
border: 1px solid  #CBFE1C;
}
.common-button::before{
content: "";
position: absolute;
width: 100%;
height:100%;
top: 0;
left: 0;
transition: 0.5s;
transform: translatex(-100%);
background: linear-gradient(120deg, transparent, rgba(255,255,255,0.7) , transparent);
}
.common-button:hover::before{
content: "";
left: 100%;
transform: translate(-100%);
}

.hero-image {
  width: 91%;
  height: 53vh;
  border: 4px solid #CBFE1C;
  border-radius: 16px;
  overflow: hidden;
  background-image: url(../style/images/hero-img\ \(1\).png);
  background-size: cover;
  background-position: center;
  position: relative;
  margin-top: 10px;
}
/* @media screen and(max-width:1200px){
    .hero-image{
        width:80%;
    }
} */
.active-players{
    background-color: #0B0E13 !important;
    position: absolute;
    top:75%;
    left: 48%;
  align-items: center;
  justify-content: center;
width:11%;
height:94.9px;
  gap: 15px;
    border-radius: 8px;
    border:  1px solid #282C34;
    font-family: "Chakra Petch", sans-serif;
}
.active-players span{
    color: var(--main-color);

font-size: 1.125rem;
}
.players-numbers .first-child{
    font-size: .75rem !important;
    color: #99a1af !important ;
    font-weight: 400 !important;
}

@media (max-width: 1195px){
.hero-content {
 text-align: center !important;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
    }

.button {
flex-direction:row;
 align-items: center;
 }
.btn-one, .btn-two {
margin-top: .625rem;
 margin-bottom: 1.25rem;
}

 .backege {
 display: flex;
flex-direction: column;
align-items: center;
 text-align: center;

 }
.active-players {
 position:absolute;
 top:118%;
 left: 6%;
width:15%;
height:5.9313rem;
    }
}
/* ===end header==== */
/* =====start our-games-section ====*/
.our-games{
    padding:var(--section-padding);

}
.main-title h2{
    font-size: 3rem;
    font-family: 700;
    line-height: 3rem;
    color: #f1f1f1;
}
.main-title .border-title{
    color: #CBFE1C;
   position: relative;
  padding: 0 20px;
      display: inline-block;
      align-items: center ;
}
.border-title::before,
.border-title::after{
    content: "";
    position: absolute;
    width: 64px;
    height: .125rem;
margin-top: 10px;
border-radius: 2px;
transform: translateY(-50%);
}

.border-title::after{
right: -42%;
    background: linear-gradient(to left, rgba(203,254,28,0), var(--main-color) );
}

.border-title::before{
    left: -43%;
 background: linear-gradient(to right, rgba(203,254,28,0), var(--main-color));
}

/* start sliders */
.active img{
 object-fit: cover;
 height: 40vh;
border-radius: 1rem;
}

.our-games .carousel-indicators [data-bs-target]{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    text-indent: unset;
    background-color: transparent;
    
}

.our-games .diffrent-btn
{
    color:#CBFE1C !important ;
    background-color: transparent !important;
border:2px solid #CBFE1C;
transition: all 0.2s;
}
.diffrent-btn:hover{
    background-color: #CBFE1C !important ;
    color: black !important ; 
border:2px solid #CBFE1C !important;
}
.arrow{
  transition: 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
opacity: 1!important;
}
.arrow:hover {
border:2px solid var(--main-color) !important;
    color: var(--main-color)
    
}
.arrow:hover i {
  color: var(--main-color);
}

.layer-1{
 position: absolute;
top: 0; 
  width: 100%;
opacity: 0;
  transition: 0.3s ;
}

.layer-1 .layer-text{
  font-size: .75rem;
  font-weight: 700;
  background-color: #364B1F;
  border-radius: 1rem;
  width: 124.875px;
text-align: center;
margin-top: .125rem;
}
.layer-2{
 position: absolute;
bottom: 0; 
  width: 100%;
font-size: 1.125rem;
opacity: 0;
  transition: 0.3s ;
}

.game-card:hover{
  transform: scale(1.02);
outline: 3px solid #CBFE1C;
  outline-offset: 0;
}


.game-card{
  transition:all 0.4s;
  overflow: hidden;
  border-radius: 1rem;
   transition: transform 0.3s ;
}

.over-lay{
  transition: 0.8s;
}
.game-card:hover .over-lay{
    position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 1rem;
 background: linear-gradient(
  to top,
  rgba(203, 254, 28, 0.8) 0%,    
  rgba(203, 254, 28, 0.4) 20%,  
  rgba(203, 254, 28, 0.15) 30%,  
  transparent 70%             
);
}
.game-card:hover .layer-1,
.game-card:hover .layer-2 {
  opacity: 1 !important;

}
 /* =====end our-games-section ====*/
/* start what we do section  */
.what-we-do-section{
    margin-top: .625rem;
    padding: var(--section-padding);
    font-family: "Days One", sans-serif;
    position: relative;
}
.what-we-do-section .main-title p{
    font-size: 3rem;
     line-height: 3rem;
}
.what-we-do-section .card{
    background-color: #1A1A1A;
    height: 18.129rem;
    width: 18.125rem;
    position: relative;
/* padding: .9375rem; */

    transition: 0.3s;
    border: 2px solid rgba(0, 0, 255, 0.138);
}
 
.what-we-do-section .card .card-title:not(.tv-icon){
    font-size: 1.25rem;
    line-height: 1.5625rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -40%);
  

}
.what-we-do-section .card .tv-icon{
    color: var(--main-color);
    text-align: center;
align-items: center;
justify-content: center;
}

.what-we-do-section .row .card span:nth-child(1){
    width: 64px;
    height: 64px;
display: flex;
background-color: #0B0E15; 
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
transition:  0.2s;
}
.what-we-do-section .card:hover span:nth-child(1){
    background-color: #CBFE1C;
    color: black;
}
.what-we-do-section .card:hover{
    border: 1px solid #CBFE1C;
 
}

.card-image{
    width: 18.6875rem;
    height: 39vh !important;
    background-image: url(../style/images/what-we-do-1-DuZnkwGW.png);
   background-size: cover;
    background-repeat: no-repeat;
   background-position:10% 60%;      
  border-radius: 1rem;

}
.card-image-2{
     width: 18.6875rem;
    height: 39vh !important;
    background-image: url(../style/images/what-we-do-2-DVAo6agz.png);
   background-size: cover;
    background-repeat: no-repeat;
   background-position:10% 60%;      
  border-radius: 1rem;

}


.what-we-do-border{
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
    width: 40%;
    height: 2px;
 background: linear-gradient(90deg, transparent, var(--color-primary) 20%, var(--color-primary) 80%, transparent);
     box-shadow: 0 0 10px #CBFE1C;
     background-color: #CBFE1C;
}

.shape-1{
  width: 0;
  height: 0;
  border-right: 30px solid transparent;
  border-top: 30px solid #CBFE1C;
  top: -13%;
  left: -13%;
  position: absolute;
  transition: 0.5s;
}

#What-We-Do .card:hover .shape-1{
  top: 8%;
  left: 8%;
}

.shape-2{
  width: 0;
  height: 0;
  border-left: 30px solid transparent;
  border-bottom: 30px solid #CBFE1C;
   right: -30%;
  bottom: -30%;
  position: absolute;
  transition: 0.5s;
}

#What-We-Do .card:hover .shape-2{
  right: 8%;
  bottom: 8%;
}
/* end what we do section */
/* ==start animation section===== */
.animation-section {
  position: relative;
  overflow: hidden;
  margin-top: 3.875rem;
  background: radial-gradient( #CBFE1C 0% , transparent 70%);
   padding: 70px;
}

.slider-track {
  display: flex;
  width: max-content;
}
.animation-slide {
  margin-right: .9375rem;
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.animation-slide img {
  max-width: 100%;
  max-height: 100%;
    border-radius: 1rem;
  object-fit: cover;
}


.slider-track.left {
  animation: scroll-left 40s linear infinite;
}
.slider-track.right {
  animation: scroll-left 40s linear infinite reverse; 
}

@keyframes scroll-left {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
/* ==end animation section===== */



/* =====start members section====== */
.member-overlay{
  width: 100%;
  height: 100%;
bottom :0;
  left: 0;
color: white !important;
  transition:all 0.5s;
 background: rgba(0, 0, 0, 0.2); 
  backdrop-filter: grayscale(100%); 

}
.member-card:hover .member-overlay{
bottom: 100%;

}
.member-card:hover .diff-color {
  color: var(--main-color);
}
.member-card:hover h3{
  color: white;
}
.diff-color ,h3 {
  color: rgba(255, 255, 255, 0.886);
}
 #our-team{
      margin-top: .625rem;
    padding: var(--section-padding);
    font-family: "Days One", sans-serif;
 }
.member-card {
  /* width: 100%;
    height: 100%; */
border-radius: .9375rem;
overflow: hidden;
background-color: none;
} 
.member-card img{
  z-index: 0;
}
.about-member{
    display: flex;
top: 50%;

 padding: 0px; 
 width: 80%; 


  transition: transform 0.5s ease;
}
.rotate-text{
    transform: rotate(90deg);

}
h1, h2, h3, p, span {
  margin: 0;
  padding: 0;
}
/* .filter {
  background: rgba(0, 0, 0, 0.2); 
  backdrop-filter: grayscale(100%); 
  z-index: 1;
   transition: backdrop-filter 0.5s ease;

} */
 .about-member h3 {
    font-size: 0.8rem ;
        white-space: nowrap !important;
  }
  .about-member p {
    font-size: 0.7rem;
    white-space: nowrap !important;
  }
/* .about-member h3,
.about-member p,
.about-member .rotate-text {
  color: rgba(255, 255, 255, 0.911) !important;
} */

@media (max-width: 768px) {
  .about-member {
    bottom: 5%;
    width: 100%;
  }

  .about-member h3 {
    font-size: 0.9rem;
  }

  .about-member p {
    font-size: 0.75rem;
  }

  .rotate-text {
    right: 0;
    font-size: 0.7rem;
  }
}
@media (max-width: 576px) {
  .about-member h3 {
    font-size: 0.8rem;
  }
  .about-member p {
    font-size: 0.7rem;
  }
}


/* 


.member-card:hover .filter {
  backdrop-filter: none;

} */

    /* =====end members section====== */                                


    /* ====start form====== */

     #contact-us{
      margin-top: .625rem;
    padding: var(--section-padding);
    font-family: "Days One", sans-serif;
    background-color: #101625;
 }

.contact{
  width: 37rem;
  height: 9.375rem;
  border-radius: 1rem;
  background-color: #1E2939;
}
.contact-us-text h4{
  font-size: 1.25rem;
  font-weight: 700;
  color: #f1f1f1 !important;
    font-family: "Days One", sans-serif;
}
.contact-us-icon{
  color: black;
  background-color: #CBFE1C;
  width: 4.9rem;
  height: 4.9rem;
  border-radius: 50%;
}
.our-community{
  width: 37rem;
  height: 13.125rem;
  border-radius: 1rem;
  background: linear-gradient(to right,#C7FD23,#33E16F);

}
.our-community-brands .brand-icon{
color: var(--main-color);
background-color: black;
width: 3rem;
height: 3rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-left: .625rem;
transition: 0.2s;
  cursor: pointer;
}
.our-community h3{
font-size: 1.5rem;
font-weight: 700;
line-height: 2rem;
color: #0b0e13
;
}
.our-community-brands .brand-icon:hover{
  background-color: #273B20;
}



form{
 border-radius: 1rem;
  background-color: #1E2939;
  /* width: 36.875rem; */
  /* height: 53.125rem; */
  padding:30px;
  font-family: "Chakra Petch", sans-serif
;
}
form h3{
  font-family: "Days One", sans-serif;
  font-size: 1.5rem;
  font-weight: 700;

}
input{
  background-color: #364153 !important;
  width: 15.625rem;
  height: 3.125rem;
  border: 1px solid #404B5C !important;
 margin-bottom: .9375rem;

}
label{
   color: #d1d5dc !important;
    font-size:  .875rem !important;
    font-weight: 700;
    margin-bottom: .9375rem;
}
::placeholder{
     color:#7A818C !important;
     font-size:  .875rem !important;
     font-weight: 400;
}
select{
  width: 37rem !important;
  height: 3rem;
    background-color: #364153 !important;
     color:#f1f1f1 !important;
     font-weight: 400 !important;
     font-size: 1rem;
       border: 1px solid #404B5C !important;
}


.custom-select{
  position: relative;
}
.custom-select span{
   position: absolute;
  right: 40px;
  top: 66%;
  transform: translateY(-50%);
  color: #d1d1d1;
  pointer-events: none; 
  font-size: .75rem;
}


textarea{
height: 145px;
width: 33rem;
 background-color: #364153 !important;
     color:#f1f1f1 !important;
            border: 1px solid #404B5C !important;
}

textarea::placeholder{
     color:#7A818C !important;
     font-size:  1rem !important;
     font-weight: 400 !important;
     line-height: 1.5rem !important;
}


.form-check input{
  background-color: white !important ;
  border-radius: none !important;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: .5rem;
}
.form-check label{
  font-size: .875rem;
  font-weight: 400;
  color: #99a1af
!important;
}


form .btn{
  width: 34.379rem !important;
  height: 3.75rem !important;
font-size: 1.125rem;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus{
  outline: 2px solid var(--main-color) !important;
    box-shadow: none !important;
      outline-offset: 0rem !important;
}

form .form-border{

  width: 95%;
  height: .02rem;
    background-color: #404B5C !important;
}
.statisticks p{
font-size: .875rem;
}
 /* =====end form====== */


 /* start footer  */

footer{
  background-color: black;
  /* height: 300.8px; */
  padding-bottom: 40px;
}
 footer .footer-one p{
font-size: 1rem !important;
font-weight: 400;
line-height: 1.5rem !important;
 }
 .footer-barnds{
  color: #99a1af ;
  transition: 0.2s;
 }
.footer-one a:hover{
color: var(--main-color);
 }
 .footer-one a{
   color: #99a1af ;
 } 

 ul{
 list-style: none;
 padding: 0;
 margin: 0;
 }
 a{
text-decoration: none;

 }
 li{
  font-size: 1rem;
  font-weight: 400;
   color:  #99a1af;
 }
 .footer-two h4{
  font-size: 1.25rem;
  font-weight: 700;
  color: #f1f1f1
;
 }

 footer a{
  font-size: 1rem;
  font-weight: 400;
   color:  #99a1af;

 }

.lower-footer a{
text-decoration: none;

}
.footer-border{
  
  width: 97%;
  height: .02rem;
    background-color: #404B5C !important;
}
/* end footer */