/* variables */
:root {
  --main-color: #ffb43a;
  --hover-color: hsl(37, 94%, 57%);
  --body-color: #1e1e2a;
  --primary-color: #015985;
  --secondary-color: #068648;
  --sky-color: #456ffa;
  --lightsky-color:#7cbeff;
  --dark-color: #17223A;
  --white-color: #fff;
  --orange-color: #fa5a2a;
  --dark-blue: #101f40;
  --text-color: #fcfeff;
  --siliguri:'Hind Siliguri', sans-serif;
  --saira: " Saira", sans-serif;
}

@font-face {
  font-family: 'BanglaFont';
  src: url('../fonts/li-ador-noirrit-bold.ttf') format('truetype');
  /* Add additional formats if available */
}

/* preloader */

#preloader {
  position: fixed;
  top: 0;
  z-index: 5000000;
  display: flex;
  justify-content: center;
  flex-direction:column;
  align-items: center;
  text-align: center;
  width: 100%;
  height: 100vh;
  background-color: var(--dark-blue);
}
.logo_image
{
  width: 500px;
  animation: logoZoom 2s linear infinite;
}
@keyframes logoZoom {
  0%,100%
  {
   transform: scale(1.1);
  
  }
  50%
  {
   transform: scale(1);
   opacity: 0.8;
  }
}
#preloader .logo_img
{
  width: 80%;
}
.preloader {
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  font-size: clamp(2rem,5vw,8rem);
  letter-spacing: 2px;
  font-weight: 700;
  color: var(--white-color);
  text-transform: uppercase;
}

.preloader span {
  animation: fade 1.5s linear infinite;
  display: flex;
  align-items: center;
  justify-content: center;
}

.preloader span:nth-child(2) { animation-delay: 0.1s; }
.preloader span:nth-child(3) { animation-delay: 0.2s; }
.preloader span:nth-child(4) { animation-delay: 0.3s; }
.preloader span:nth-child(5) { animation-delay: 0.4s; }
.preloader span:nth-child(6) { animation-delay: 0.5s; }
.preloader span:nth-child(7) { animation-delay: 0.6s; }
.preloader span:nth-child(8) { animation-delay: 0.7s; }
.preloader span:nth-child(9) { animation-delay: 0.8s; }
.preloader span:nth-child(10) { animation-delay: 0.9s; }

@keyframes fade {
  0%, 100% {
      opacity: 1;
  }
  50% {
      opacity: 0.3;
  }
}
.line_animation{
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.line{
  background-color: var(--lightsky-color);
  width: 7px;
  height: 40px;
  margin: 0px 5px;
  border: none;
  animation: size 0.8s infinite linear;
  border-radius: 20px;
}

.line-1{
  animation-delay: 0.60s;
}
.line-2{
  animation-delay: 0.30s;
}
.line-3{
  animation-delay: 0s;
  }
.line-4{
  animation-delay: 0.30s;
}
.line-5{
  animation-delay: 0.60s;
}

@keyframes size{
  0%{
      height: 40px;
  }
  25%{
      height: 60px;
  }
  50%{
      height: 90px;
  }
  75%{
      height: 60px;
  }
  100%{
      height: 40px;
  }
}
/* preloader */

/* hero part  */
#hero_part 
{
  position: relative;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(86, 4, 153, 0.8)) , url("../img/hero_bg.png");
  height: 100vh;
  width: 100%;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.hero_content , .banner_content
{
  position: relative;
  max-width: 830px;
  width: 90%;
  text-align: center;
  padding: 2rem;
  font-family: 'BanglaFont'; 
}
.hero_content h1 , .banner_content h1
{
  font-size: clamp(3rem,5vw,6rem);
  font-weight: 800;
  color: var(--white-color);
  line-height: 1.2;
  text-transform: uppercase;
}
.hero_content h1 span 
{
  font-size: clamp(3rem,5vw,7rem);
  color: var(--main-color);
  font-weight: 700;
}
.hero_content  .btn , .banner_content .btn
{
  animation: none;
  font-weight: 500;
  transition: all .2s ease-in-out;
  background: transparent;
}
.hero_content  .btn:nth-child(2), .banner_content .btn:nth-child(2)
{
  background: var(--white-color);
  color: var(--dark-color);
}
.hero_content  .btn:hover ,.banner_content .btn:hover
{
  border-color: var(--white-color);
  background: rgba(255, 255, 255, 0.8);
  color: var(--dark-color)
} 
.hero_btns 
{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}
.hero_content p 
{
  margin: 2rem 0;
  text-align: justify;
  text-align-last: center;
  color: var(--text-color);
  font-weight: 400;
  font-family: sans-serif;
  font-size: clamp(1.4rem,2vw ,2.5rem);
}
/* hero part  */
/* bottom banner */
#bottom_banner 
{
  position: relative;
  background-image:linear-gradient(to top , rgba(5, 76, 170, 0.8), rgba(0,0,0,0.6)), url("../img/abstract-bg.jpg");
  height: 500px;
  width: 100%;
  display: flex;
  align-items: center;
  background-size: cover;
  justify-content: center;
}
.banner_content h1 
{
  color: var(--white-color);
  font-size: clamp(2rem,5vw,5rem);
  margin-bottom: 3rem;
}

/* bottom banner */

/* variables */


.container_small 
{
  max-width: 80%;
  margin: 0 auto;
}
.alternative_way 
{
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-content: center;
  margin: 1rem 0;
}
.bar 
{
  width: 80px;
  height: 1px;
  background: #fff;
}
.alternative_way span 
{
  font-size: 2rem;
}
.google_verify 
{
  background: #fff;
  padding: 1rem;
  border-radius: 7px;
  width: 240px;
  margin: 0 auto;
  transition: all .3s ease-in-out;
}
.google_verify:hover 
{
  background: rgba(255, 255, 255, 0.85);
} 
.google_verify  a 
{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 2rem;
}
.google_verify img 
{
  width: 30px;
}
.google_verify span 
{
  color: #000;
  font-size: 16px;
  font-weight: 600;
  display: inline-block;
} 
/* games slider */
section#freegames {
  padding: 4rem 0;
}
.slider-items .freegamecard
{
  margin: 1rem;
  height: 150px;
}
.slider-items .slick-next
{
    right:18px !important;
    top: 50%;
    z-index: 1;
    transition: all .3s ease;
    transform: scale(0.6) translateY(-50%);
}
.slider-items .slick-prev {
  top: 50%;
  left: 10px!important;
  z-index: 1;
  transition: all .3s ease;
  transform: scale(0.6) translateY(-50%);

}
.slider-items .slick-arrow::before {
background: var(--sky-color);
color: var(--white-color);
border: 1px solid rgba(255, 255, 255, 0.2);
transition: all .3s ease-in-out;
}
.slider-items .slick-arrow:hover::before
{
  background: var(--sky-color);
}

.games_heading {
  display: flex;
  align-items: center;
  gap: 3rem;
  justify-content: space-between;
  padding-left: 1rem;
  margin: 2rem 0;
} 
.heading_title 
{
  display: flex;
  align-items: center;
}
.heading_title h2 
{
  margin-bottom: 0;
  margin-left: 1rem;
}
.games_heading .view_more_btn
{
  width: 100px;
  height: 25px;
  box-shadow: inset 0 0 10px 0 rgb(124 190 255);
  padding: 0.6rem 2rem;
  border-radius: 50px;
  color: var(--white-color);
  text-transform: uppercase;
}
.games_heading .view_more_btn:hover 
{
  box-shadow: inset 0 0 20px 0 rgb(124 190 255);
}
/* games slider */

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: transparent;
  border-radius: 8px;
}

body:is(:hover, :focus-visible)::-webkit-scrollbar-thumb {
  background-color: var(--surface-variant);
}

/* game card */

/* buttons */
.border_btn {
  padding: 0.7rem 1.5rem !important;
  background: var(--orange-color) !important;
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--white-color);
  font-size: 1.4rem;
  border-radius: 5px;
  margin-left: 1rem;
  text-transform: uppercase;
}

.border_btn:hover {

  background: var(--sky-color) !important;
  color: var(--white-color);

}

/* buttons */

/* tournament advertisement */
#tournament_advertisement 
{
  position: relative;
  background: var(--dark-blue);
  top: -3rem;
  width: 100%;
  
}
#tournament_advertisement::after 
{
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:linear-gradient(rgba(0,0,0,0.8),rgba(0,0,0,0.5)), url("../img/tournament-illustration.jpeg");
  animation: changeBg 10s linear infinite;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 1;
} 

@keyframes changeBg {
  0%, 100% {
    opacity: 1;
    background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.5)), url("../img/tournament_bg.jpeg");
  }
  25%{
    opacity: 0.4;
  }
  40% 
  {
    opacity: 1;
    background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.5)), url("../img/cinematic-illustration.jpeg");
  }
  80% 
  {
    opacity: 1;
    
  }
  75% {
    opacity: 1;
    background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.5)), url("../img/tournament-cinematic-illustration.jpeg");
  }
  50% {
    opacity: 1;
    background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.5)), url("../img/tournament-illustration.jpeg");
  }
}

#tournament_advertisement .container 
{
  width: 100% !important;
}
#tournament_advertisement ul 
{
  margin-left: 2rem;
  list-style: none;
}
#tournament_advertisement ul li 
{
  
  margin: 2rem 0;
}
#tournament_advertisement ul li h4 
{
  font-size: 3rem;
  font-weight: 400;
  font-family: serif;
}
#tournament_advertisement ul li i 
{
  color: var(--main-color);
  margin-right: 1rem;
}
.advertisement_text 
{
  font-family: 'BanglaFont';
  text-align: left;
  position: relative; 
  z-index: 10;
}
.advertisement_text h1
{
  font-size: clamp(3rem,5vw,7rem);
  font-weight: 700;
  text-transform: uppercase;
}
.advertisement_text h1 span 
{
  color: var(--main-color);
  font-weight: 700;
  font-size: clamp(3rem,5vw,6rem);
  display: block;
}
.advertisement_text h3 
{
  font-size: clamp(2rem,5vw,4rem);
  font-weight: 500;
}
.advertisement_text ul li 
{
  font-weight: 400 !important;
}
.advertisement_graphics 
{
  position: relative;
  text-align: right;
  z-index: 10;
  animation: dancing 2s ease-in-out infinite;
}
.advertisement_graphics img 
{
  width: 80%;
  margin: 0 auto;
}
@keyframes dancing {
  0%,100% 
  {
    transform: translateY(5px);
  }
  50% 
  {
    transform: translateY(-5px);
  }
}
/* tournament advertisement */

/* small card */
.small_card {
  display: flex;
  align-content: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2rem;
  margin-top: 2rem;
}

.hero {
  position: relative;
  width: 48%;
  height: 200px;
  min-height: 200px;
  display: flex;
  border-radius: 15px;
  border: 1px solid rgba(1, 114, 189, 0.4);
  overflow: hidden;
  box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.3);
}

.small_card_img {
  width: 400px;
}
.small_card_img .image {
  height: 100%;
  width: 100%;
  object-fit: cover;
} 
.navbar-brand img {
  width: 100px;
  position: relative;
  top: 2rem;
}

.small_card_content {
  background-image: linear-gradient(0deg, #032232, rgba(21, 57, 165, 0.774));
  backdrop-filter: blur(1rem);
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  padding: 1rem;
}

.logo {
  position: absolute;
  height: 100%;
  width: 100%;
  overflow: hidden;
  box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.7);
  border: 1px solid #fff2;
  z-index: -1;
  opacity: 0.5;
  filter: blur(5px);
}

.logo img {
  position: absolute;
  height: 100%;
  top: 0;
  width: 100%;
  left: 0;
}

.main-text {
  font-size: clamp(2rem,5vw,5rem);
 color: var(--white-color);
  font-weight: 900;
}

.hero-btn {
  color: var(--white-color);
  padding: 10px 20px;
  border: 1px solid #fff6;
  animation: button-anim 2s ease 0s infinite normal forwards;
  font-size: 1.6rem;
  border-radius: 5px;
  text-transform: uppercase;
  border-radius: 50px;
  box-shadow: inset 0 0 10px 0 rgb(124 190 255);
}
.view-btn 
{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 5rem auto;
  padding:1rem 3rem;
  font-size: 2rem;
}
h1.game_name {
  font-size: clamp(1.8rem, 5vw, 3rem);
  text-align: center;
}

@keyframes button-anim {
  0% {
    transform: translate(0);
  }

  20% {
    transform: translate(-2px, 2px);
  }

  40% {
    transform: translate(-2px, -2px);
  }

  60% {
    transform: translate(2px, 2px);
  }

  80% {
    transform: translate(2px, -2px);
  }

  100% {
    transform: translate(0);
  }
}

.hero-btn:hover {
  animation: none;
  box-shadow:  0 0 20px 0 rgba(124, 190, 255,0.4);
}

.hero-btn a {
  color: var(--white-color);
}

.date {
  color: var(--white-color);
}

.date p {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
}

.btn i:before {
  width: 14px;
  height: 14px;
  position: fixed;
  color: #fff;
  background: #0077B5;
  padding: 10px;
  border-radius: 50%;
  top: 5px;
  right: 5px;
}

/* small card */

/* featured */
.featuredCard {
  display: flex;
  gap: 3rem;
background: rgba(255, 255, 255, 0.1);
padding: 2rem;
align-items: center;
justify-content: center;
border-radius: 1rem;
margin-bottom: 2rem;
border: 1px solid rgba(255,255,255,0.1);
}
.featuredInfo h2 {
  color: #7cbeff;
  text-transform: uppercase;
  font-size: clamp(1.6rem,5vw,1.8rem);
  font-weight: 600;
}
.featuredInfo p 
{
  font-size: 14px;
  color: var(--text-color);
  font-weight: 400;
}
.featuredCard .icon 
{
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  box-shadow: inset 0 5px 20px 5px rgba(0, 153, 255, 0.48);
}
.featuredCard .icon img 
{
  width: 70px;
  height: 70px;
  filter: hue-rotate(180deg);
}
/* featured */

/* gallery popup */

.popup_image {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  background: rgba(0, 0, 0, 0.8);
  z-index: 10000000000000;
}

.popup_image img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 600px;
  max-width: 90%;
  height: 600px;
  max-height: 100%;
  transform: translate(-50%, -50%) scale(1);
  object-fit: contain;
  transform-origin: center;
  border-radius: 15px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.8);
  transition: all 0.5s ease;
  background: #fff;
}

.close_icon {
  position: absolute;
  right: 2rem;
  top: 0;
  font-size: 5rem;
  cursor: pointer;
  color: #fff;
  z-index: 100;
  transition: all 0.3s ease;
}

.close_icon:hover {
  color: #f00;
  transform: scale(1.2);
}

/* gallery popup */
#leader_board {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.accept_terms {
  margin-top: 3rem;
  margin-bottom: 1rem;
  font-size: 2rem;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding-left: 4rem;
}

.accept_terms input {
  width: 30px;
  height: 20px;
}

.accept_terms label {
  font-size: 1.6rem;
  margin-bottom: 0;

}

.popup-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100000;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
}

.popup-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #3C1E6E;
  text-align: center;
  padding: 2rem;
  border-radius: 15px;
  border: 1px solid #fff;
  color: #fff;
  transition: all 0.3s ease-in-out;
}

.popup-content h2 {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  margin: 1rem 0;
  color: #eaec70;
}

.popup-content span {
  font-size: 2rem;
  margin-top: 1rem;
  display: block;
}

.close-popup {
  position: absolute;
  top: -20px;
  right: -15px;

  cursor: pointer;
}

.close-popup i {
  font-size: 25px;
  color: #fff;
}

.close-popup i:hover {
  color: #f00;
}

.success_icon i {
  font-size: 3rem;
  color: #0f0;
}

/* fkjsadfjksadfsjkadf */

.comming_soon {
  position: absolute;
  top: 1rem;
  right: 0rem;
  z-index: 100;
}

b,
strong {
  font-weight: bolder;
  font-size: 18px;
}

p {
  font-size: 16px;
  font-weight: 400;
}

.comming_soon span {
  background: #000;
  color: #ffffff;
  display: inline-block;
  font-weight: 600;
  letter-spacing: 1px;
  padding: 0.5rem 1rem;
  font-size: 1.6rem;
  text-transform: uppercase;
  border-radius: 8px;
  transform: scale(0.8);
  box-shadow: 0 0 6px 2px #fff;
}

.not-allowed {
  pointer-events: auto !important;
  cursor: not-allowed !important;
}

.popup_container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.6);
  z-index: 50000000000000000;
  display: none;
}

#popup {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease-in-out;
  z-index: 999;
}

.close_popup {
  position: absolute;
  top: -1.5rem;
  right: -1rem;
  border: 0;
  outline: 0;
  font-size: 3rem;
  background: transparent;
  color: #0c357e;
  cursor: pointer;
}

.close_popup:hover {
  color: #f00;
}

/* download apps */
#download_apps {
  position: relative;
}

#download_apps h1 {
  color: #fff;
  font-size: clamp(2rem, 5vw, 6rem);
  line-height: 1.5;
}

#download_apps h2 {
  color: #fff;
  font-size: clamp(1.6rem, 5vw, 5rem);
  line-height: 1.5;
  text-transform: capitalize;
  margin: 3rem 0;
}

/* download apps */



/* socail media banner*/

/* referr friends */
#reffer_your_friend {
  position: relative;
  background: #f1f1f1;

}

#reffer_your_friend::after {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("tournament-seamless-pattern.png");
  opacity: 0.1;
}

.refeer_frinds {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5rem 0;
  flex-wrap: wrap;
  gap: 8rem;
  z-index: 1000;
  text-align: center;
}

.reffer_invitaion_text .primary_btn {
  padding: 1rem 2rem;
  width: 220px;
  font-size: 2.4rem;
  font-weight: 600;
}

.reffer_invitaion_text h2 {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 600;
  color: #3C1E6E;
  margin-bottom: 1rem;
  line-height: 1.6;
  font-family: var(--siliguri);
}

.reffer_invitaion_text h2 span {
  color: #000;
  text-transform: uppercase;
  text-shadow: 1px 3px 2px #0002;
  letter-spacing: 1px;
  background: #eaec70;
  padding: 0 1rem;
}

.reffer_invitaion_text h3 {
  font-size: clamp(2rem, 5vw, 3rem);
  color: #3C1E6E;
  margin-bottom: 1rem;
}

.game_profile {
  position: relative;
  width: 100px;
  height: 100px;
  text-align: center;
  margin: 2rem auto;
  display: block;
  border: 2px solid #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 5px 25px #0006, 0 0 0 10px #fff4;
}

.game_profile img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;

}

/* referr friends */

/* 3steps tournament */
#tournament_steps {
  text-align: center;
  margin-top: 5rem;
}

.title {
  font-size: clamp(1.6rem, 5vw, 3rem);
  padding: 0rem 0 5rem;
  color: var(--white-color);
}

.title span {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 700;
  color:var(--main-color);
  margin-top: 1rem;
  display: block;
  text-transform: uppercase;
  -webkit-text-stroke-width:10px;
  -webkit-text-stroke-color: rgba(255, 255, 252, 0.1);
  letter-spacing: 2px;
  text-shadow: 0 5px 8px rgba(0, 0, 0, 0.3);
}

.three_steps {
  padding: 5rem 0 0;
}

.steps_card {
  position: relative;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  border: 1px solid var(--lightsky-color);
  box-shadow: inset 0 5px 20px 5px rgba(0, 153, 255, 0.28);
}

.card_header {
  position: relative;
  width: 90%;
  padding: 3rem 0rem;
  background: rgb(23 34 58 / 73%);
  margin: 1rem auto 0;
  border-radius: 16px;
  backdrop-filter: blur(37px);
  color: #fff2;
  border: 1px solid rgba(73, 96, 231, 0.514);
  box-shadow: 0 0 0 2px rgba(73, 96, 231, 0.214);
}

.card_header .number {
  position: relative;
  font-size: clamp(5rem, 5vw, 6rem);
  position: absolute;
  top: -2rem;
  left: 1rem;
  font-weight: 700;
  text-shadow: 0 5px 5px rgba(255, 255, 255, 0.1);
}
.card_header .icon img {
  width: 100px;
  height: 100px;
  border-radius: 15px;
  border: 5px solid #fff2;
}

.card_body .card_body_content h2 {
  font-size: 3rem;
  margin: 2rem 0;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--lightsky-color);
}

.card_body .info_content p {
  font-size: clamp(1.2rem, 5vw, 1.8rem);
  font-weight: 500;
  text-align: center;
  color: var(--white-color);
  padding: 1rem 2rem;
}

/* 3steps tournament */

/* tournament launching text */
@keyframes confetti-slow {
  0% {
    transform: translate3d(0, 0, 0) rotateX(0) rotateY(0);
  }

  100% {
    transform: translate3d(25px, 105vh, 0) rotateX(360deg) rotateY(180deg);
  }
}

@keyframes confetti-medium {
  0% {
    transform: translate3d(0, 0, 0) rotateX(0) rotateY(0);
  }

  100% {
    transform: translate3d(100px, 105vh, 0) rotateX(100deg) rotateY(360deg);
  }
}

@keyframes confetti-fast {
  0% {
    transform: translate3d(0, 0, 0) rotateX(0) rotateY(0);
  }

  100% {
    transform: translate3d(-50px, 105vh, 0) rotateX(10deg) rotateY(250deg);
  }
}

.backindown-text {
  animation: backindown 3s ease-in-out infinite;

}

@keyframes backindown {
  0% {
    top: -20%;
    transform: translate(-50%, -50%) scale(0.5);
  }

  10% {
    top: 50%;
  }

  80% {
    transform: translate(-50%, -50%) scale(0.8);
    animation-delay: 10s;
  }

  50%,
  60%,
  70% {
    top: 50%;
    transform: translate(-50%, -50%) scale(1.1);
  }

  90%,
  100% {
    transform: translate(-50%, -50%) scale(1.4);
  }
}

.prelanching_text {
  position: relative;
  overflow: hidden;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  background: var(--primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 4rem;
  padding: 5rem 0 0 0;

}

.prelanching_text::after {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("../img/gaming-patterns.jpg");
  opacity: 0.2;
  background-size: 700px ;
}

.free_tournament_content 
{
  font-family: 'BanglaFont', sans-serif !important;
  position: relative;
  z-index: 10;
  padding-left: 5rem;
  display: flex;
  flex-direction: column;
  justify-content: center; 
  align-items: center;
}
.free_tournament_content h1 
{
  
  font-size: clamp(3rem,5vw,6rem);
}
.free_tournament_content .btn 
{
  width: 200px;
  animation: none ;
  margin-top: 3rem;
}
.free_tournament_content h1 span 
{
  color: var(--main-color);
  font-size: clamp(3.5rem,5vw,7rem);
}
.free_tournament_illustration 
{
  position: relative;
  z-index: 10 ;
  text-align: center;
}
.free_tournament_illustration img 
{
  width: 75%;
}
.confetti {
  position: absolute;
  z-index: 1;
  top: -10px;
  border-radius: 0%;
}

.confetti--animation-slow {
  animation: confetti-slow 2.25s linear 1 forwards;
}

.confetti--animation-medium {
  animation: confetti-medium 1.75s linear 1 forwards;
}

.confetti--animation-fast {
  animation: confetti-fast 1.25s linear 1 forwards;
}

/* tournament launching text */



/* prizes */
.prizes_header {
  position: relative;
}

.single_game_prizes {
  position: relative;
  display: flex;
  align-items: center;
}

.single_game_prizes .prizes_inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  flex-wrap: wrap;
  padding: 4rem 0 8rem;
}

.prize_card {
  width: 33%;
  padding: 1rem;
  border-radius: 15px;
  border: 1px solid #3C1E6E;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  flex-wrap: wrap;
}

.prize_card:nth-child(even) {
  transform: scale(0.8);
}

.game_prizes .prizes_inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
}

.game_prizes {
  padding: 3rem 0;
  text-align: center;
}

.prizes_card {
  position: relative;
  width: 300px;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
  background: var(--white-color);
}

.prizes_card:hover .zoom_overlay {
  opacity: 1;
}

.zoom_overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all 0.54s ease;
  cursor: pointer;
}

.zoom_overlay i {
  color: var(--white-color);
  font-size: 3rem;
}


.prizes_card .prizes_img img {
  width: 80%;
  height: 300px;
  display: block;
  margin: 0 auto;
  object-fit: contain;
}

.prizes_card .prize_name {
  background: var(--primary-color);
  padding: 1rem;
  color: var(--white-color) ;
  text-align: center;
}

.prizes_card:nth-child(even) {
  position: relative;
  transform: scale(1);
}

.prize_card .prizes_position h2 {
  position: relative;
  font-size: clamp(1.6rem, 5vw, 3rem);
  padding: 1rem 3rem;
  margin: 2rem 0;
  color: #fff;
  font-weight: 700;
  background: #3C1E6E;
  transform: scale(0.8);
  border-radius: 5px;
}

.prize_card .prizes_position h2::after {
  content: '';
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%) rotate(60deg);
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 25px solid #3c1e6e;
}

.prize_card .prizes_img img {
  width: 200px;
  height: 200px;
  background: #ddd;
  padding: 1rem;
  border-radius: 15px;
  display: block;
  margin-bottom: 2rem;
}

.prize_card .prize_name h3 {
  font-size: clamp(1.4rem, 5vw, 2rem);
  color: #000;
  padding-bottom: 1rem;
}

.prizes_slider {
  position: relative;
  padding: 3rem;
  padding-left: 20rem;
}

.prizes_slider .slick-dots {
  bottom: -10px;
  left: 0;
}

.prize_item {
  position: relative;
  background: var(--sky-color);
  border-radius: 15px;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
  height: auto;
  margin: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 1rem;
  text-align: center;
  border: 1px solid rgba(61, 30, 110, 0.459);
}

.prize_badge {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
}

.prize_badge img {
  width: 80px !important;
  height: 80px !important;
  margin: 0 !important;
}

.prize_item:last-child {
  margin-right: 0;
}

.prize_item img {
  width: 150px;
  height: 150px;
  margin: 2rem auto;
  object-fit: contain;
}

.prize_item h3 {
  text-align: center;
  color: var(--white-color);
}

.prizes_gift {
  position: relative;
}

.prizes_box {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 100%;
  background: #fff;
  display: flex;
  align-items: center;
  box-shadow: 1px 0px 0px 0 rgba(0, 0, 0, 0.1);
  border-right: 1px solid #0001;
}

.prizes_box img {
  width: 100%;
}

/* prizes */

/* referral dasboard */
/* referral dasboard */
.reffaral_dashboard {
  background: #fff;
  padding: 0 3rem 3rem 3rem;
  margin-top: 3rem;
  width: 500px;
  max-width: 100%;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  border-radius: 15px;
}

.referral_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.refferal_text h2 {
  margin: 2rem 0 !important;
  font-size: clamp(1.6rem, 5vw, 2.5rem) !important;
  font-weight: 500 !important;

}

.refferal_point {
  position: relative;
  display: block;
  border: 1px solid #0c357e;
  padding: 0.5rem 2rem;
  width: 120px;
  margin-left: auto;
  border-radius: 50px;
}

.refferal_score {
  position: absolute;
  left: 0;
  top: 0;
  transform: scale(1.2);
}

.refferal_score img {
  width: 35px;
}

.all_points {
  font-size: 1.6rem;
  display: block;
  text-align: center;
  padding-left: 2rem;
}

.referral_info {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.referral_card {
  border: 1px solid #3C1E6E;
  width: 150px;
  height: auto;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 1rem;
}

.referral_card h3 {
  font-size: clamp(1.4rem, 5vw, 1.6rem);
  color: #3C1E6E;
}

.referral_card .number {
  font-size: clamp(1.6rem, 5vw, 3rem);
  font-weight: 600;
  color: rgba(61, 30, 110, 0.678);
}

/* rewardcard */
.rewardcard {
  position: relative;
}

.reaward_box {
  background: #eee;
  padding: 0.8rem 1rem;
  margin-bottom: 1rem;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.gift_intro {
  display: flex;
  align-items: center;
}

.gift_intro .gift_img img {
  width: 40px;
}

.gift_intro .gift_info p {
  font-size: 1.6rem;
  margin-bottom: 0;
}

.gift_claimed .gift_point .referall_points {
  display: flex;
  justify-content: space-between;
  width: 100%;
  gap: 1rem;
}

.gift_claimed .gift_point .referall_points img {
  width: 20px;
}

.claim_btn {
  background: #7d41dd;
  color: #fff;
  padding: 0rem 1rem;
  border-radius: 50px;
  width: 100%;
  display: block;
  margin-top: 1rem;
  text-align: center;
  font-size: 12px;
  border: 2px solid transparent;
  transition: all .3s ease;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 2px;
}

.claim_btn:hover {
  background: #ddd;
  color: #55328f;
  border: 2px solid #7d41dd;
}

/* rewardcard */
/* referral dasboard */
/* referral dasboard */




/* profile */
.contant_body__logo {
  align-items: center;
  text-align: center;
}

.imgUpload {
  position: relative;
}

.upload_icon {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 80%;
  padding: 1rem 0;
  background: rgba(0, 0, 0, 0.2);
  text-align: center;
  transform: translateX(-50%) scale(0.6);
  margin: 0 auto;
  border-radius: 50px;
}

.contant_body__logo:hover .upload_icon i {
  color: #fff;
}

.contant_body__logo:hover .upload_icon {
  background: rgba(0, 0, 0, 0.6);
}

.upload_icon i {
  font-size: 3rem;
  color: #fff9;
}

/* profile */



#Pages {
  padding: 8rem 2rem !important;
  min-height: 100vh;
}
#Pages .title {
  font-weight: 700;
 color: var(--main-color);
}
#Pages ol 
{
  position: relative;
  padding-left: 1rem;
}
#Pages ol > li
{
  font-size: clamp(1.8rem,5vw,2rem);
  font-weight: 600;
  margin: 1.5rem 0;
}
#Pages ul 
{
  list-style: disc !important;
  font-size: 1.6rem;
}
#Pages ul li 
{
  font-weight: 400;
  color: var(--text-color) ;
}
#Pages ul li strong 
{
  color: var(--main-color);
}
#Pages p 
{
  font-weight: 400 !important;
  color: var(--text-color);
}
#Pages  a 
{
  color: var(--lightsky-color);
}
#Pages  a:hover 
{
  text-decoration: underline !important;
  color: var(--main-color)
} 
#Pages h3 
{
  color: var(--main-color);
  margin: 1rem 0;
}
.termsofuse ul 
{
  padding-left: 3rem;
}


/* referral page */
/* referral page */
#referr_header {
  position: relative;
  width: 100%;
  height: 700px;
  background: #F8F8F8;
  display: flex;
  /* align-items: center; */
  padding-top: 10rem;
}

.common_padding {
  padding-top: 8rem;
  padding-bottom: 5rem;
}

.color_shape {
  position: absolute;
  bottom: 0;
  left: -15rem;
  width: 1000px;
  opacity: 0.1;
}

.color_shape img {
  width: 100%;
}

#referr_header .referral_content {
  padding-left: 35%;
  text-align: left;
}

#referr_header .referral_content h1 {
  font-size: clamp(4rem, 5vw, 8rem);
  color: #3C1E6E;
  line-height: 1;
  text-transform: uppercase;
}

#referr_header .referral_content h3 {
  font-size: clamp(2rem, 5vw, 3rem);
  color: #333;
  line-height: 1;
  max-width: 400px;
  margin: 2rem 0;
  line-height: 1.3;
}

#referr_header .referral_content h1 span {
  font-size: clamp(3rem, 5vw, 6rem);
  display: block;
  margin-top: 1rem;
}

/* reffer section */
.reffer_section {
  /* background: #3C1E6E; */
  padding: 5rem 0 2rem;
}

.inputbx {
  border-radius: 5px;
  overflow: hidden;
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  flex-direction: column;
}

.inputbx label {
  display: block;
  font-size: 2rem;
  margin: 1rem 0;
}

.other_option {
  font-size: 3rem;
  margin: 2rem 0 0;
  display: block;
  text-align: center;
}

.socail_share {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}

.socail_share a {
  width: 50px;
  height: 50px;
  border: 1px solid #3C1E6E;
  border-radius: 50%;
  background: #fff;
}

.socail_share a img {
  width: 100%;
  height: 100%;
  transform: scale(0.6);
  transition: all .3s ease;
}

.socail_share a:hover img {
  transform: scale(0.7);
}

.inputbx span {
  font-size: 1.8rem;
  margin: 0 0 1rem;
}

.referral_input {
  display: flex;
}

.refferBox {
  position: relative;
  padding: 3rem;
  border-radius: 15px;
  max-width: 100%;
  margin: -25rem auto 0;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-around;
  border: 1px solid rgba(158, 105, 250, 0.425);
  z-index: 10000;
  background: #fff;
  flex-wrap: wrap;
}

.refferBox::after {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("Asset\ 4-8.png");
  background-size: cover;
  background-position: center top;
  z-index: -1;
  opacity: 0.1;
}

.refferBox h2 {
  font-size: clamp(1.6rem, 5vw, 3rem);
  font-weight: 500;
  font-family: sans-serif;
  margin: 3rem 0;
  color: #222;
  line-height: 1.2;
}

.refferBox h2 span {
  color: #3C1E6E;
  font-weight: 600;
}

.refferBox #inputBox {
  padding: 0.8rem 1rem;
  border: 0;
  outline: none;
  width: 100%;
  border: 1px solid #3C1E6E;
  font-size: 1.6rem;
  border-radius: 5px;

}

.refferBox #btn {
  padding: 0.8rem 1rem;
  border: 0;
  position: relative;
  left: -10px;
  cursor: pointer;
  outline: none;
  width: 120px;
  background: #3C1E6E;
  border-radius: 0 5px 5px 0;
  color: #fff;
  font-size: 1.4rem;

}

.refferBox #btn.active {
  color: #0f0;
}

.refferal_img {
  text-align: center;
}

.refferal_img img {
  width: 50%;
}

/* rewards */
.reaward_box {
  background: #eee;
  padding: 0.5rem 1rem;
  margin-bottom: 1rem;
  border-radius: 8px;
}

/* rewards */
/* reffer section */
/* profile user */
#profile_pic {
  position: relative;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  border: 2px solid #fff;
  margin-left: 2rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

#profile_pic:hover {
  transform: scale(1.1);
}

.active_status {
  position: absolute;
  width: 10px;
  height: 10px;
  background: #0f0;
  border-radius: 50%;
  top: -3px;
  right: 0px;
  border: 1px solid #3c1e6e;
}

#profile_pic img {
  position: absrolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.sidebar {
  position: fixed;
  top: 0;
  right: -400px;
  /* Initially hidden */
  width: 400px;
  max-width: 100%;
  height: 100%;
  background-color: var(--dark-blue);
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5);
  overflow-y: auto;
  transition: right 0.3s;
  z-index: 20000000;
  color: #fff;
  border-left: 2px solid #fff4;
}

.sidebar::-webkit-scrollbar {
  width: 0 !important
}

.close_icon {
  position: absolute;
  right: 1.5rem;
  top: 1rem;
  height: 3rem;
  font-size: 8rem;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.close_icon img {
  width: 15px;
  height: 15px;
}

.profile_edits {
  padding: 1rem;
}

.profile_edits ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.profile_edits ul li {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #fff2;
}

.profile_edits ul li a {
  font-size: 1.6rem;
  padding: 1rem 0;
  display: block;
  cursor: pointer;
}

.profile_edits ul li span {
  color: #fff;
}

.profile_edits ul li span i {
  font-size: 1.6rem;
  width: 3.5rem;
  color: var(--lightsky-color);
  transition: color 0.3s ease;
}

.profile_edits ul li:hover a {
  left: 8px;
  color: var(--lightsky-color);
}

.profile_edits ul li a {
  position: relative;
  left: 5px;
  width: 100%;
  color: #fff8;
  transition: all .3s ease;
}

#tournament_rules {
  position: relative;
}

#tournament_rules p {
  font-size: 16px;
  font-family: sans-serif;

}
.tournament_rules p 
{
  font-weight: 400 !important;
}
#tournament_rules ol {
  padding-left: 3rem;
}

#tournament_rules ol li {
  font-size: 1.6rem;
}

#tournament_rules ol li:last-child {
  margin-bottom: 2rem;
}

.tournamnet_title {
  font-size: clamp(2rem, 5vw, 3rem);
  color: #3C1E6E;
  text-align: center;
  margin-bottom: 10rem;
}

.tournament_heding_secondary {
  font-size: clamp(1.6rem, 5vw, 2rem);
  color: var(--lightsky-color);
  margin: 1rem 0;
}
.profile_form 
{
  position: relative;
  width: 500px;
  max-width: 500px;
  padding: 2rem;
  background: rgb(21 68 223 / 22%);
  border-radius: 15px;
  border: 2px solid #456ffa85;
  box-shadow: inset 0px 1px 20px 10px rgb(69 111 250 / 27%);
  backdrop-filter: blur(1rem);
}
.short_links {
  display: flex;
  justify-content: space-around;
}

.short_links a {
  font-size: 1.2rem;
  display: block;
  color: #fff8;
  padding: 0.5rem 0;
  transition: color .3s ease;
}

.short_links a:hover {
  color: var(--lightsky-color);
}

.socail_icons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
  border-top: 1px solid #fff2;
  padding-bottom: 2rem;
}

.socail_icons .icon a {
  width: 4rem;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0.2rem solid #fff8;
  border-radius: 50%;
  margin-top: 2rem;
  background: var(--i);
}

.socail_icons .icon a:hover {
  background: transparent;
  border-color: var(--i);
  box-shadow: 0 0 8px 2px var(--i);
}

.socail_icons .icon a {
  color: #fff;
  font-size: 1.6rem;
  transition: all .3s ease;

}

.socail_icons .icon:hover a {
  color: #fff;
}

/* Styling for the overlay */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  z-index: 200000;
}

.sidebar-content {
  margin-top: 5rem;
}

.sidebar-content .profile_pic {
  position: relative;
  width: 100px;
  height: 100px;
  border: 2px solid #fff;
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.2);
  border-radius: 50%;
}

.sidebar-content .profile_pic img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.sidebar-content h2 {
  margin: 2rem 0 1rem;
}

.sidebar-content p {
  font-size: 14px;
  color: var(--lightsky-color);
}

/* Styling for the close icon */
.close {
  position: absolute;
  top: 20px;
  right: 20px;
  cursor: pointer;
}

/* Styling for the content inside the sidebar */
.sidebar-content {
  padding: 20px;
}

/* profile user */
/* custom btn */
.custom_btn {
  background: var(--sky-color);
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 1rem 2rem;
  text-transform: uppercase;
  color: var(--white-color);
  font-size: 1.4rem;
  letter-spacing: 0.3px;
  transition: all .5s ease-in-out;
}

.sign_in_btn {
  border-color: var(--sky-color);
  background: transparent;
}

.sign_in_btn:hover {
  border-color: transparent;
}

.custom_btn:hover {
  background: var(--sky-color);
  color: var(--white-color) !important;
  box-shadow: 0 0 10px 4px var(--sky-color);
}

#support {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 600px;
}

.language {
  position: relative;
  text-align: center;
  cursor: pointer;
}

#language {

  padding: 0.5rem 2rem;
  font-size: 2rem;
  border-radius: 5px;
  background: transparent;
  color: #fff;
  border: 0.2rem solid #fff4;
  outline: 0;
}

#language option {
  color: #000;
}

/* custom btn */

#login_page {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 400px;
  max-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 12rem;
  text-align: center;

}


#login_page form {
  width: 500px;
  max-width: 500px;
  padding: 1rem;
  background: rgb(21 68 223 / 22%);
  border-radius: 15px;
  border: 2px solid #456ffa85;
  box-shadow: inset 0px 1px 20px 10px rgb(69 111 250 / 27%);
  backdrop-filter: blur(1rem);

}

#login_page form label {
  margin: .8rem 0;
  text-align: left;
  display: block;
  font-size: 1.6rem;
  color: #000;
  display: none;
}

.login_body__logo {
  margin: 1rem 0 0.5rem;
}
.login_body__logo img {
  width: 50px;
  margin: 2rem;
}
.login_body__inputs {
  padding: 3rem 1.5rem 2rem;
}

#login_page input {
  border: 0.1rem solid rgba(255, 255, 255, 0.2);
  outline: 0;
  padding: 1rem;
  width: 100%;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.4);
  font-size: 1.6rem;
  transition: opacity 1s ease;
  background: transparent;
  color: var(--white-color);
  box-shadow: inset 0px 1px 20px  rgba(116, 147, 250, 0.27);

}

#login_page input:focus::placeholder {
  opacity: 0;
}

#login_page form button {
  background: var(--orange-color);
  font-size: 1.6rem;
  padding: 1rem;
  width: 150px;
  font-weight: 500;
  color: #fff;
  border: 0;
  outline: 0;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .3s ease;
  border-radius: 5px;
  letter-spacing: 0.1rem;
  margin: 2rem 0 0;
}

#login_page form button:hover {
  background: var(--main-color);
  color: var(--dark-blue);
}

.nav-link {
  position: relative !important;
  z-index: 100 !important;
  font-size: 1.6rem;
  font-weight: 500;
  padding: 0.5rem 2rem;
}

#social-links ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.refferBox h5 {
  font-size: 20px;
  font-weight: 600;
}

#social-links ul li {
  display: inline-block;
  width: 50px;
  height: 50px;
  line-height: 50px;
  border-radius: 50%;
  border: 1px solid #ddd;
  text-align: center;
  margin: 0 0.5rem;
}

div#social-links ul li a {
  border: 0 !important;
  margin: 0 !important;
  font-size: 22px !important;
  color: #0c357e;
  text-align: center !important;
}

.nav-link:hover {
  color: #3c1e6e;
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
  color: #3c1e6e;
  background-color: #fff;
  border-color: #dee2e6 #dee2e6 #fff;
}

/* tournament details */
#leaderBoardModel {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: auto;
  z-index: 2560;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-in-out;
  background-color: rgba(60, 5, 133, 0.848);
  backdrop-filter: blur(1rem);
}

#howtoplayModal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  overflow-x: auto;
  overflow-y: auto;
  z-index: 20000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-in-out;
  background-color: var(--dark-blue);
  backdrop-filter: blur(1rem);
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

#howtoplayModal h1 {
  font-size: clamp(2rem, 5vw, 5rem);
  padding: 3rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--white-color);
  text-align: center;
}

#howtoplayModal ol {
  display: block;
  list-style-type: decimal !important;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
  padding-left: 40px;

}

#howtoplayModal ol li {
  font-size: 2rem;
  color: #222;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

#howtoplayModal ol li:last-child {
  border-bottom: 0;
}

#leaderBoardModel::-webkit-scrollbar,
#howtoplayModal::-webkit-scrollbar {
  width: 0rem;
}

.modalclose_btn {
  position: absolute;
  top: 30px;
  right: 30px;
  cursor: pointer;
  width: 5rem;
  height: 5rem;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 3rem;
  color: #fff;
}

#leaderBoardModel.active,
#howtoplayModal.active {
  opacity: 1;
  visibility: visible;
}

.modalclose_btn:hover {
  background: rgba(0, 0, 0, 0.6);
  color: red;
}

.modal-open .modal {
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 0 !important;
}

#tournament_deatils {
  position: relative;
}

#tournament_deatils h3 {
  font-size: clamp(1.6rem, 5vw, 3rem);
  margin: 4rem 0 3rem 0;
  text-align: center;
}

.tournament_singlebanner {
  position: relative;
  width: 100%;
  min-height: 500px;
  height: 100vh;
  z-index: 1;
  padding-top: 2rem;

}

.tournament_singlebanner::after {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(16, 31, 64, 0.685), rgba(0, 0, 0, 0.68));
  z-index: 10;

}

.tournament_singlebanner .game_details-banner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.game_content {
  position: absolute;
  top: -8rem;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.gamePlaybtn {
  position: relative;
  z-index: 500;
  margin: 3rem auto;
  width: 200px;
}

.prizes {
  display: flex;
  gap: 2.5rem;
  justify-content: center;
}

.play_btn {

  margin: 2rem auto;
  background: rgba(0, 0, 0, 0.1);
  color: var(--white-color);
  letter-spacing: 0.15rem;
  font-weight: 500;
  box-shadow: 3px 7px 25px rgba(5, 5, 5, 0.5) , 0 0 2px 5px rgba(0, 153, 255, 0.255) ;
  border: 1px solid var(--lightsky-color);
  padding: 1.2rem 3rem;
  font-size: 1.6rem;
  text-align: center;
  border-radius: 50px;
  transition: all 0.3s ease-in-out;
  text-transform: uppercase;
}

#reason option {
  color: #000;
}

.play_btn:hover {
  background: var(--lightsky-color);
  color: var(--dark-color);
  animation: dancing 0.8s ease-in-out forwards;
}

.entry_label {
  display: block;
  background: var(--sky-color);
  width: 100%;
  padding: 1rem;
  border: 0.1rem solid #fff8;
  border-radius: 8px;
  font-size: 2.5rem;
  color: #fff !important;
  backdrop-filter: blur(2rem);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  text-align: center;
}
.circle_btn 
{
  width: 5rem;
  height: 5rem;
  font-size: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;

}
.circle_btn i {
  color: var(--lightsky-color);
}
.circle_btn i:hover 
{
  color: var(--text-color);
}
.entry_cost {
  margin: 2rem 0;
}

.game_content .game_name a {
  font-size: clamp(3rem, 5vw, 5rem);
  color: #fff;
  font-weight: 600;
  display: block;
  margin: 1rem 0;
}

.game_content .gameImg {
  position: relative;
  top: 8rem;
  z-index: 10;
  width: 180px;
  height: 180px;
  box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.1), 0 0 0 15px rgb(97 153 250 / 12%), 0 0 20px 20px rgb(34 87 175 / 86%);
  border-radius: 50%;
  transform: scale(0.8);
  border: 2px solid rgba(255, 255, 255, 0.2);
}

.game_content .gameImg img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0.2rem;
  object-fit: cover;
  border-radius: 50%;
}

.game_content .game_info .game_date {
  position: relative;
  font-size: 1.6rem;
  color: #fff;
  text-align: center;
  background: rgba(61, 30, 110, 0.2);
  border-radius: 8px;
  backdrop-filter: blur(2rem);
  border: 2px solid rgba(255, 255, 255, 0.4);

}

.game_content .game_info .game_date .date {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.1rem 1rem 0.2rem;
}

.game_content .game_info .game_date .date:first-child {
  border-bottom: 1px solid #fff6;
}

#tournament_prizes {
  padding: 5rem 0;
}

#tournament_prizes .prize_inner {
  position: relative;
  background: linear-gradient(rgba(255, 255, 255, 0.1), #686EF9);
  border-radius: 25px;
  border: 0.1rem solid #fff2;
}

#tournament_prizes .prize_inner .prize_header {
  display: flex;
  padding: 5rem 3rem;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

#tournament_prizes .prize_inner .prize_header .trophy_icon {
  font-size: 10rem;
  width: 15rem;
  height: 15rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.1),
    0 0 0 50px rgba(255, 255, 255, 0.1), 0 0 0 100px rgba(255, 255, 255, 0.1);
  transform: scale(0.5);
}

#tournament_prizes .prize_inner .prize_header .prizes_title {
  font-size: clamp(3rem, 5vw, 25rem);
  color: rgba(255, 255, 255, 0.6);
  font-weight: 900;
}

.trophy_board {
  display: flex;
  padding: 1rem 2rem;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.trophy_board:last-child {
  border-bottom: 0;
}

.trophy_board .trophy_icon {
  position: relative;
  width: 8rem;
  height: 8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 0;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  box-shadow: 0 0 15px rgba(0, 153, 255, 0.68);
  transform: scale(0.8);
}

.trophy_board .trophy_icon.first_prize {
  box-shadow: 0 0 15px rgba(9, 236, 43, 0.656);

}

.trophy_board .trophy_icon.first_prize i {
  color: rgba(9, 236, 43, 0.656);
}

.trophy_board .trophy_icon.second_prize {
  box-shadow: 0 0 15px rgba(149, 255, 0, 0.68);
}

.trophy_board .trophy_icon.second_prize i {
  color: rgba(149, 255, 0, 0.68);
  ;
}

.trophy_board .trophy_icon.third_prize {
  box-shadow: 0 0 15px rgba(255, 213, 0, 0.68);
}

.trophy_board .trophy_icon.third_prize i {
  color: rgba(9, 236, 43, 0.656);
  color: rgba(255, 213, 0, 0.68);
}

.prizes_ammount {
  display: flex;
  color: #fff;
  gap: 1rem;
}

.prizes_ammount h4 {
  font-size: 3rem;
}

.prizes_ammount span {
  font-size: 1.6rem;
}

.trophy_board .trophy_icon i {
  font-size: 4rem;
  color: rgba(255, 255, 255, 0.4);
}

.trophy_board .rank_number {
  position: absolute;
  width: 4rem;
  height: 4rem;
  text-align: center;
  line-height: 4rem;
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
  background: rgba(0, 153, 255, 0.68);
  top: 0;
  right: -2rem;
  border-radius: 50%;
  box-shadow: 0 0 15px rgba(0, 153, 255, 0.68);
}

.single_slider-item {
  position: relative;
  background-size: cover;
  background-position: center;
  z-index: 2;
  height: 600px;
  border-radius: 0;
  overflow: hidden;
}

/* .single_slider-item::before {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(100deg, rgba(0, 0, 0, 1), transparent 64%);
  opacity: 0.80;
  z-index: -1;
} */

.slider_content {
  position: absolute;
  transform:  scale(1);
  transition: all 1s ease-in-out;
  transform-origin: bottom;
  bottom: 3rem;
  right: 3rem;
}

.slider_content .hero-btn {
  font-size: 2rem;
  background: var(--sky-color);
  animation: none;
  padding: 1.5rem 3rem;
  width: 200px;
  text-align: center;
  opacity: 0;
  transform: scale(0);
  border: none;
}
.slider_content .hero-btn:hover 
{
 filter: hue-rotate(135deg);
}

.slick-active .slider_content .hero-btn {
  opacity: 1;
  transform: scale(1);
  animation: dancing 0.5S ease-in-out;

}

.slick-active .slider_content h1 {
  animation: bounce-in 1s ease-in-out;
}

.slider_content h1 a {
  font-size: clamp(1.6rem, 5vw, 4rem);
  color: #fff;
  margin-bottom: 2rem;
  font-weight: 700;
  display: block;
}

.slider_content h2 {
  font-size: clamp(1.6rem, 5vw, 2.2rem);
  color: #fff;
  max-width: 368px;
  line-height: 1.5;
}

.bangla_font {
  font-size: clamp(1.6rem, 5vw, 3rem) !important;
  line-height: 1.8 !important;
}


/* leaderboard */
#tournament_leaderborad {
  padding: 8rem 0;
  min-height: 100vh;
}

#tournament_leaderborad .tournamnet_title h1 {
  position: relative;
  font-size: clamp(3rem, 5vw, 6rem);
  text-align: center;
  text-transform: uppercase;
  color: var(--lightsky-color);
  letter-spacing: 0.2rem;
  font-weight: 700;
  text-shadow: 3px 5px 2px rgba(0, 0, 0, 0.1);
}

.top_scorer {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 8rem;
  padding: 2rem 0 15rem;
}

.rank-card {
  position: relative;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.user_info {
  position: absolute;
  left: -5px;
  bottom: -9rem;
  width: 100%;
  text-align: center;
  font-size: 18px;
}

.user_info a,
.user_name a {
  font-size: 2rem;
  color: #fff ;
  width: 100%;
  font-weight: 600;
  line-height: 0;
  margin: 1.8rem 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: inline-block;

}

.points {
  font-size: 1.8rem;
  color: var(--white-color);
  margin-top: 0.8rem;
 
}

.points b {
  color: #323232;
  background: var(--sky-color);
  padding: 0.2rem 1.2rem;
  border-radius: 15px;
  color: #fff;
  letter-spacing: 2px;
  margin-top: 1rem;
}

.points span {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--white-color);
  margin-left: 0.5rem;

}

.rank-01 {
  z-index: 10;
  top: -5rem;

}

.profile_part {
  position: relative;
  width: 100%;
  height: 100%;
}

.profile_part .user_pic {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.rank-02 {
  z-index: 1;
  top: 2rem;
  left: -17rem;
}

.rank-03 {
  z-index: 1;
  top: 2rem;
  right: -17rem;
}

.rank_image img {
  position: absolute;
  width: 80px;
}

.user_profile {
  position: absolute;
  width: 175px;
  height: 175px;
  border-radius: 50%;
  background: #fff;
  padding: 1rem;
  box-shadow: 0 0 0 5px rgba(61, 30, 110, 0.205), 0 0 0px 15px rgba(61, 30, 110, 0.205);
}

.user_profile .badge_img {
  position: absolute;
  bottom: -35px;
  right: 0;
  transform: rotate(0deg);
  width: 60px;
  filter: saturate(1.2) brightness(1.1) contrast(1);
}

.rank-card {
  position: relative;
}

.rank-card .rank_badge {
  position: absolute;
  top: -3rem;
}

.rank_badge {
  width: 4rem;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border-radius: 50%;
  margin-bottom: 1rem;
  background: var(--primary-color);
  color: #fff;
  border: 2px solid rgb(96 165 250 / 66%);
  padding: 1rem;
  box-shadow: 0 0 10px 5px rgb(69 111 250 / 50%);
}
.your_badge 
{
  background: var(--main-color);
  box-shadow: 0 0 10px 5px rgba(198, 219, 6, 0.5);
  border-color: var(--main-color);
  color: var(--body-color);
}
.your_badge_column 
{
  border-color: var(--main-color) !important;
  background: rgba(198, 219, 6, 0.1) !important;
}
.rank_badge .rank_number {
  font-size: 1.8rem;
  font-weight: 600;
}

/* top10 */
#top_10 {
  max-width: 100%;
  width: 90%;
  margin: 20rem auto;
  background: rgba(0, 0, 0, 0.18);
  padding: 3rem;
  border-radius: 15px;
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.1);
  border: 1px solid #fff1;
}

.top_users {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.glass_btn {
  display: block;
  background: rgba(255, 255, 255, 0.2);
  padding: 1rem 2rem;
  color: #fff;
  width: 200px;
  margin: 3rem auto 0;
  font-size: 1.6rem;
  border-radius: 5rem;
  cursor: pointer;
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.1);
  text-align: center;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 1px;
  transition: all .3s;
}

.glass_btn:hover {
  animation: dancing 0.8s ease-in-out forwards;
  background: rgba(255, 255, 255, 0.6);
  color: #000;
}

.ranking {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.top_card {
  position: relative;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  width: 100%;
  gap: 2rem;
  align-items: center;
  backdrop-filter: blur(1rem);
  margin-bottom: 1rem;
  border-radius: 5px;
  border-left: 0;

}

.top_card-user {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  flex: 1;
  padding: 0 3rem 0 2rem;
  border-radius: 8px;
  border: 1px solid var(--lightsky-color);
  background: rgb(69 111 250 / 10%);
}

.rank_title {
  font-size: clamp(1.6rem, 2vw, 2.5rem);
  font-weight: 500;
  color: var(--text-color);
  padding: 1rem 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin: 3rem 0;
  background: rgba(0, 0, 0, 0.267);
}
.profile_img {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.37);
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-left: 1rem;
}

.profile_img img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.user_highscore .points {
  font-size: 4rem;
}

.user_highscore .points sub {
  font-size: 1.4rem;
  font-weight: 600;
}

.top_card h2 {
  color: #fff;
}

.top_card .rank_badge {
  margin-bottom: 0;
}

.column {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
}
.allusers 
{
  position: relative;
}
.allusers::after
{
  position: absolute;
  content: '';
  top: 50%;
  transform: translateY(-50%);
  left: -2rem;
  height: 2px;
  width: 50px;
  background: var(--lightsky-color);
  z-index: -1;
}
.user_name {
  display: flex;
  align-items: center;
  margin-left: 50px;
}

.user_name a {
  width: 100%;
  font-size: 2rem;
}

/* leaderboard */

/* tournament card */
#tournament_card {
  padding: 5rem 0 8rem;
}
.tournament_card {
  position: relative;
  border-radius: 25px;
  overflow: hidden;
  box-shadow: 0px 12px 28px 0px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(60, 30, 110, 0.4);
  background: var(--dark-color);
  box-shadow: inset 0 5px 20px 5px rgba(0, 153, 255, 0.48);
  border: 3px solid rgba(255, 255, 255, 0.1);
}

.tournament_card .card_img {
  position: relative;
  background: #000;

}

.tournament_card .card_img .cover_img {
  position: relative;
  background: #000;
  height: 250px;
  filter: saturate(1.2);
}

.tournament_card .card_img .cover_img img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card_body {
  padding: 1rem 2rem 2rem;
}

.tournament_card .date {
  font-size: 1.6rem;
  margin-bottom: 3rem;
  display: block;
}

.tournament_card .date img {
  width: 25px;
  margin-right: 4px;
}

.card_body .game_title a {
  font-size: 2rem;
  text-transform: uppercase;
  text-align: center;
  display: block;
  margin: 2rem 0;
  color: var(--white-color);
  font-weight: 600;
}

.card_body .play_now-btn .primary_btn {
  background: var(--sky-color);
  color: #fff;
  width: 150px;
  font-size: 1.4rem;
}

.card_body .play_now-btn .primary_btn:hover {
  background: var(--lightsky-color);
  color: var(--dark-blue);
}

.entry_fee h3 {
  font-size: clamp(1.4rem, 5vw, 1.8rem);
  font-weight: 500;
  color: #3C1E6E;
}
.freegamecard 
{
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 10px 0 var(--sky-color) , 0 5px 20px rgba(0, 0, 0, 0.1);
  border-radius: 15px;
  overflow: hidden;
  transition: 0.8s ease;
  margin-bottom: 2rem;
}
.freegamecard::after
{
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(transparent 30% , #000);
  transition: 0.8s ease;
  z-index: 1;
}
.freegamecard:hover::after 
{
  background: rgba(0, 0, 0, 0.8); 
  filter: blur(2px);
  backdrop-filter: blur(1px);

} 
.freegamecard .gameImg {
  position: relative;
  width: 100%;
  height: 160px;
}

.freegamecard .gameImg img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 0 0;
}
.freegamecard .game_name
{
  position: absolute;
  bottom: 1.3rem;
  width: 100%;
  text-align: center;
  padding: 0 2rem;
  z-index: 10;
  transition: .3s ease-in-out;
}
.freegamecard:hover  .game_name 
{
  bottom: -5rem;
  transition: .3s ease-in-out;
  transform: scale(0);
}
.freegamecard .game_name a 
{
  font-size: 1.8rem;
  color: var(--white-color);
  font-weight: 500;
}
.freegamecard .playbtn 
{
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%,-50%);
  box-shadow: inset 0 0 10px 0 var(--sky-color) , 0 5px 20px rgba(0, 0, 0, 0.1);
  color: var(--white-color);
  padding: 1rem;
  border-radius: 50px;
  text-align: center;
  font-size: 2rem;
  width: 150px;
  transition: .3s ease-in-out;
  background: rgba(63, 135, 252, 0.199);
  backdrop-filter: blur(3px);
  opacity: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.freegamecard:hover .playbtn 
{
  top: 50%;
  transform:translate(-50%,-50%);
  opacity: 1;
  z-index: 12;
}
.upcoming_games::after {
  position: absolute;
  top: 0;
  left: 0;
  content: 'Comming Soon';
  font-size: clamp(1.6rem, 5vw, 1.8rem);
  font-weight: 700;
  width: 100%;
  height: 100%;
  color: var(--white-color);
  z-index: 10;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  border-radius: 8px;
  padding: 2rem 0 0 2rem;
  text-transform: uppercase;
  letter-spacing: 1px;  
  backdrop-filter: blur(2px);
}

.card_footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card_footer .primary_btn {
  margin: 0;
}

/* tournament card */

/* gameplay screen */
.gameplay {
  position: relative;
  padding-top: 50px;
}

.game-iframe {
  width: 100%;
  height: 600px;
  border-radius: 15px 15px 0 0;
}
.iframe_bottom .game_info 
{
  display: flex;
  align-items: center;
  gap: 1rem;
}
.game_name a 
{
  color: var(--white-color);
  font-size: 2rem;
}
.iframe_bottom 
{
  position: absolute;
  top: 99.30%;
  background: rgba(255, 255, 252, 0.1);
  z-index: 1000;
  width: 100%;
  border-radius: 0 0 15px 15px;
  padding: 0.8rem 2rem;
  display: flex;
  justify-content: space-between;
  backdrop-filter: blur(2rem);
  border-top: 1px solid rgba(255, 255, 252, 0.1);
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.iframe_bottom .game_img 
{
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--white-color);
}
.iframe_bottom .game_img img 
{
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
#related_game 
{
  margin-top: 6rem;
}
.game_fullscreen svg 
{
  position: relative;
  top: 3px;
  transition: all .2s ease-in-out;
}
.game_fullscreen:hover svg 
{
  transform: scale(1.1);
}
/* gameplay screen */

main#questions {
  display: block;
  position: relative;
  box-sizing: border-box;
  padding: 30px;
  width: 100%;
  margin: 0 auto;
  margin-top: 50px;
}

.live-search-box {
  width: 100%;
  margin: 50px 0px;
  font-size: 16px !important;
  display: block;
  padding: 1em;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid #232323 !important;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

.live-search-box:focus {
  border: 1px solid #502989 !important;
}

.topic {
  padding: 20px;
  padding-top: 0px;
  padding-bottom: 0px;
  background: #fff;
  margin: 5px 0px;
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}

.topic h2.question {
  padding-bottom: 20px;
}

.open {
  cursor: pointer;
  display: block;
  padding: 0px;
}

.open:hover {
  opacity: 0.7;
}

.expanded {
  background-color: #fff;
  transition: all .3s ease-in-out;
}

.ptag {
  display: none;
}

.question {
  padding-top: 30px;
  padding-right: 40px;
  font-size: 18px;
  font-weight: 500;
  color: #888dff;
}

.answer {
  font-size: 16px;
  line-height: 16px;
  display: none;
  margin-bottom: 30px;
  text-align: justify;
  padding-bottom: 20px !important;
}

.faq-t {
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  display: block;
  float: right;
  position: relative;
  top: -55px;
  right: 10px;
  width: 10px;
  height: 10px;
  background: transparent;
  border-left: 2px solid #686EF9;
  border-bottom: 2px solid #686EF9;
  transition: all .3s ease-in-out;
}

.faq-o {
  top: -50px;
  -moz-transform: rotate(-224deg);
  -ms-transform: rotate(-224deg);
  -webkit-transform: rotate(-224deg);
  transform: rotate(-224deg);
}

/* common animation */

/* leaderboard */

/* leaderboard */


/* common animation */

.primary_btn {
  display: block;
  padding: 1.2rem 2rem;
  text-decoration: none;
  text-align: center;
  background: #fff;
  border-radius:8px;
  box-shadow: 0 2px 25px rgba(0, 0, 0, 0.2);
  color: #000;
  font-weight: 700;
  text-transform: uppercase;
  transition: all 0.3s ease-in-out;
  width: 180px;
  font-size: 1.6rem;
  margin: 0 auto;
}

.games_infoormation {
  background: rgba(0, 153, 255, 0.225);
  padding: 5rem 0 2rem 0;
  border-radius: 8px;
  width: 500px;
  max-width: 500px;
  backdrop-filter: blur(2px);
  box-shadow: 0 5px 8px rgba(0,0,0,0.2);
  border: 2px solid rgba(255,255,255,0.1);
  box-shadow:  0 0 0 10px rgb(97 153 250 / 12%), inset 0 0 20px 0px rgb(34 87 175 / 86%);
}
.games_content {
  margin-top: 10rem;
  background: rgba(255,255,255,0.1);
  padding: 2rem;
  border-radius: 15px;
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 5px 10px rgba(0,0,0,0.1);
}
.games_content .title {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 2rem;
  font-weight: 700;
  color: var(--main-color);
}
.games_content .games_content_header {
 padding: 2rem;
}
.prizes .primary_btn {
  background: rgb(43 29 66 / 27%);
  color: #fff;
  border-radius: 8px;
  padding: 0.8rem 2rem;
  border: 1px solid #fff2;
  font-weight: 400;
  backdrop-filter: blur(1rem);
  box-shadow: 0 0 5px #fff;
  margin: 2rem 0 1.5rem;
}

.prizes .primary_btn:hover {
  animation: dancing 1s ease-in-out forwards;
}

.primary_btn:hover {
  background: #fff;
  color: #3C1E6E;
}


.bounce-in-text {
  animation: bounce-in 1s ease-in-out;
}

@keyframes bounce-in {
  0% {
    opacity: 0;
    transform: translateY(-200px);
  }

  60% {

    transform: translateY(30px);
  }

  80% {
    transform: translateY(-10px);
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.slide-in-text {
  animation: slide-in 1s ease-in-out;
  animation-delay: 1s;
  /* Delay the animation start by 1 second */
}

@keyframes slide-in {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(0);
  }
}

/* common animation */






.slick-dots {
  bottom: 35px;
}

.slick-dots li {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--sky-color);
  z-index: 1000;
  transition: transform 500ms ease-in-out;
  outline: 2px solid #fff;

}

.slick-dots li.slick-active {
  background: #fff;
  outline: 2px solid #fff;
  outline-offset: 3px;
  transform: scale(1.1);
  box-shadow: 0 0 0 2px var(--orange-color);

}

#tournament .tournament_slide .slide-bg {
  background: #3C1E6E;
  position: relative;
  width: 100%;
  height: 720px;
}

/* tournament slider */

.inputBox {
  position: relative;
  margin-top: 1.2rem;
}

.toggle-password {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 15px;
  font-size: 16px;
  color: #fff8;
  cursor: pointer;
}
.account_policy a {
  color: var(--main-color);
  text-decoration: underline;
  font-weight: 600;
}
.account_policy a:hover 
{
  color: var(--white-color);
} 
.forget_password a {
  font-size: 1.4rem;
  margin-top: 1rem;
  color: var(--main-color);
  font-weight: 600;
}
.forget_password a:hover 
{
  color: var(--white-color);
} 
.toggle-password:hover 
{
  color: var(--white-color);
}
.play_icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;

}

.play_icon::after {
  position: absolute;
  content: "";
  width: calc(100% + 10px);
  height: calc(100% + 10px);
  background: rgba(255, 255, 255, 0.5);
  z-index: 1;
  border-radius: 50%;
  animation: pulse1 2s ease infinite;
}

@keyframes pulse1 {
  0% {
    transform: scale(1, 1);
  }

  25% {
    transform: scale(1, 1);
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.2);
  }

  50% {
    transform: scale(1.1, 1.1);
  }

  80% {
    transform: scale(1.1, 1.1);
  }
}

.play_icon i {
  font-size: 2.5rem;
  position: relative;
  left: 2px;
  /*   color: #3c1e6e; */
  color: var(--orange-color);

  z-index: 10;
  transition: 0.5s ease;
}

.play_icon:hover i {
  color: #f00;
  transform: scale(1.1);
}

#support_header {
  position: relative;
  width: 100%;
   background-image:linear-gradient(rgba(16, 6, 153, 0.9 ),rgba(44, 6, 114, 0.805)), url("../../frontend/img/customer-background.jpg"); 
  background-size: cover;
  background-position: 0% 40%; 
  border-bottom: 1px solid #fff2;

}

.support_text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: left;
  width: 100%;
  

}

.support_text h1 {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 500;
  color: var(--main-color);
}

.support-customer img {
  width: 100%;
  text-align: center;
  margin: 0 auto;
  display: block;
}

.support_text p {
  font-size: clamp(1.6rem, 5vw, 2rem);
  margin: 1rem 0;
  color: var(--white-color);
}

.support_btn {
  padding: 1rem 3rem;
  background: #fff;
  background: var(--sky-color);
  font-size: 2rem;
  color: #fff;
  border-radius: 8px;
  transition: all 0.3s ease;
  cursor: pointer;
  border: 0;
}

.support_btn:hover {
  background: var(--orange-color);
  color: #000;
}

.support-customer {
  display: flex;
  height: 700px;
  align-items: center;
}

#support_contact {
  padding: 10rem 0;
  font-size: 1.6rem;
}

.support_form h2 {
  font-size: clamp(2rem, 5vw, 4rem);
}

.support_form h3 {
  font-size: clamp(1.6rem, 5vw, 2rem);
  margin: 1rem 0 3rem;
}

.support_form .inputBx input,
.support_form textarea {
  width: 100%;
  background: rgba(0, 0, 0, 0.1);
  border: 1px solid #ddd6;
  border-radius: 5px;
  padding: 1rem;
  color: #fff;
}

.support_form textarea {
  padding: 1rem;
  min-height: 100px;
}

::placeholder {
  font-size: 1.4rem;
  color: var(--white-color);
}

.support_form label {
  font-size: 1.6rem;
  display: block;
  margin: 1rem 0;
  color: var(--lightsky-color);
  font-weight: 500;
}

.support_form #reason {
  width: 100%;
  padding: 1rem;
  font-size: 1.4rem;
  background: transparent;
  color: #fff;
  border: 1px solid #ddd6;
  border-radius: 5px;
}
.support_form #send_btn {
  text-transform: uppercase;
  margin-top: 2rem;
}

.support_info {
  position: relative;
  background: #3c1e6e;
  width: 100%;
  height: 550px;
  padding: 2rem;
  overflow: hidden;
  margin-top: 5rem;
  border-radius: 25px;
  margin-left: 5rem;
}

.support_info::after {
  position: absolute;
  content: '';
  background: rgba(18, 171, 248, 0.473);
  width: 100%;
  height: 100px;
  top: 0;
  left: 0;
  border-radius: 0 0 50% 50%;
  z-index: 1;
  transform: scale(2);
  border-bottom: 5px solid #fff2;

}

.support_info h1 {
  position: relative;
  z-index: 2;
  color: #fff;
  font-size: clamp(2rem, 5vw, 4rem);
}

.support_info img {
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.2;
  transform: scale(0.8);
}

.support_contact {
  padding: 1rem 0;
}

.support_contact ul li {
  list-style: none;
}

.support_contact ul li a {
  font-size: 2.5rem;
  color: var(--lightsky-color);
  text-decoration: none;
  display: flex;
  gap: 2rem;
  margin-top: 2rem;
  align-items: center;
}

.support_contact ul li a .icon {
  width: 5rem;
  height: 5rem;
  background: var(--main-color);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;

}

.support_contact ul li a .icon i {
  color: #000;
}


.collapsing {
  -webkit-transition: none !important;
  transition: none !important;
  display: none !important;
}

#forgot_password {
  position: relative;
  width: 100%;
  min-height: 40vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.text-danger {
  display: block;
  text-align: center;
  margin-top: 1rem;
}

.verify_number {
  width: 100%;
  height: 100vh;
  display: flex;
  min-height: 800px;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.forgotpass_form {
  background: rgb(21 68 223 / 22%);
  border-radius: 15px;
  border: 2px solid #456ffa85;
  box-shadow: inset 0px 1px 20px 10px rgb(69 111 250 / 27%);
  backdrop-filter: blur(1rem);
  backdrop-filter: blur(40px);
  padding: 10rem 3rem;
  width: 90%;
  max-width: 500px;
}

.forgotpass_form h2 {
  font-size: clamp(1.6rem, 2vw, 2.5rem);
  font-weight: 500;
  margin-bottom: 1.5rem;
  color: var(--main-color);
}

.forgotpass_form p {
  font-size: 1.4rem;
  color: var(--text-color);
  max-width: 380px;
}

.forgotpass_form form {
  padding: 2rem 0;
}

.forgotpass_form input {
  width: 100%;
  padding: 1rem;
  border: 1px solid #fff2;
  background: transparent;
  outline: none;
  border-radius: 5px;
  font-size: 1.6rem;
  color: var(--white-color);
}
.forgotpass_form input:focus 
{
  border-color: var(--white-color);
} 
.form_btn {
  padding: 1rem 5rem;
  border: 0;
  outline: 0;
  color:var(--white-color);
  font-size: 1.8rem;
  background: var(--orange-color);
  margin-top: 3rem;
  cursor: pointer;
  text-transform: uppercase;
  border-radius: 5px;
  font-weight: 500;
}

.form_btn:hover {
  background: var(--main-color);
  color: var(--dark-color);
}

.forget_password a {
  font-size: 1.4rem;
  margin-top: 1rem;
}

#temspolicy_content p {
  font-size: 16px;
  margin-bottom: 2rem;
  display: block;
  text-align: justify;
}

#temspolicy_content h2 {
  color: #3c1e6e;
  font-weight: 600;
}

#temspolicy_content ul {
  margin: 0;
  padding: 0;
  padding-left: 2rem;
}

#temspolicy_content ul li {
  font-size: 16px;
  margin: 0;
  padding: 0;
  font-weight: 500;
  list-style-type: disc;
  margin-bottom: 1rem;
}

#temspolicy_content ol ul li {
  list-style-type: disc;
  font-weight: 400;
  margin-bottom: 1rem;
}

#temspolicy_content ol li {
  font-size: 16px;
  margin: 0;
  padding: 0;
  font-weight: 600;
  list-style-type: upper-roman;
  color: #3c1e6e;
  margin-left: 1rem;
}

#temspolicy_content h4 {
  font-weight: 600;
}


.heading-primary {
  font-size: 5.5rem;
  font-weight: 600;
  letter-spacing: 0.1rem;
  color: #ffffff;
  margin-bottom: 2rem;
}

body {
  -ms-overflow-style: none;
  /* for Internet Explorer, Edge */
  scrollbar-width: none;
  /* for Firefox */
  overflow-y: none;
  background: var(--body-color);
  color: var(--text-color);

}

.nav-link {
  position: relative !important;
  z-index: 100 !important;
}

/* body::-webkit-scrollbar {
  display: none; 
} */
.section-top {
  padding: 5rem 0 0;
}

.section-bottom {
  padding: 0 0 1rem;
}

.section {
  padding: 5rem 0;
}

.section_margin {
  margin: 0 auto 3rem !important;
}

/* JUMP */
button a {
  color: #000;
}

.custom_container {
  width: 90%;
  margin: 0 auto;
}

#youTube {
  position: relative;
  z-index: 1;
}

#free_access {
  padding-top: 5rem;
}

#bounceText span {
  position: relative;
  top: 20px;
  display: inline-block;
  font-size: clamp(4rem, 4vw, 10rem) !important;
  color: #fff;
  text-shadow: 0 1px 0 #ccc, 0 2px 0 #ccc, 0 3px 0 #ccc, 0 4px 0 #ccc,
    0 5px 0 #ccc, 0 6px 0 transparent, 0 7px 0 transparent, 0 8px 0 transparent,
    0 9px 0 transparent, 0 10px 10px rgba(0, 0, 0, 0.4);
  font-family: "Luckiest Guy", cursive;
  z-index: 100;
}

.loop_dance span {
  animation-iteration-count: infinite;
}

.bounceText span,
.loop_dance span {
  animation-name: bounce;
  animation-duration: 1s;
  animation-iteration-count: 2;
}

#bounceText span:nth-child(1) {
  animation-delay: 0s;
  -webkit-animation-delay: 0s;
}

#bounceText span:nth-child(2) {
  animation-delay: 0.1s;
  -webkit-animation-delay: 0.1s;
}

#bounceText span:nth-child(3) {
  animation-delay: 0.2s;
  -webkit-animation-delay: 0.2s;
}

#bounceText span:nth-child(4) {
  animation-delay: 0.3s;
  -webkit-animation-delay: 0.3s;
}

#bounceText span:nth-child(5) {
  animation-delay: 0.4s;
  -webkit-animation-delay: 0.4s;
}

#bounceText span:nth-child(6) {
  animation-delay: 0.5s;
  -webkit-animation-delay: 0.5s;
}

#bounceText span:nth-child(7) {
  animation-delay: 0.6s;
  -webkit-animation-delay: 0.6s;
}

#bounceText span:nth-child(8) {
  animation-delay: 0.7s;
  -webkit-animation-delay: 0.7s;
}

#bounceText span:nth-child(9) {
  animation-delay: 0.8s;
  -webkit-animation-delay: 0.8s;
}




/* ANIMATION */
@keyframes bounce {

  0%,
  100% {
    top: 20px;
    text-shadow: 0 1px 0 #ccc, 0 2px 0 #ccc, 0 3px 0 #ccc, 0 4px 0 #ccc,
      0 5px 0 #ccc, 0 6px 0 transparent, 0 7px 0 transparent, 0 8px 0 transparent,
      0 9px 0 transparent, 0 10px 10px rgba(0, 0, 0, 0.4);
  }

  50% {
    top: -20px;
    text-shadow: 0 1px 0 #ccc, 0 2px 0 #ccc, 0 3px 0 #ccc, 0 4px 0 #ccc,
      0 5px 0 #ccc, 0 6px 0 #ccc, 0 7px 0 #ccc, 0 8px 0 #ccc, 0 9px 0 #ccc,
      0 50px 25px rgba(0, 0, 0, 0.2);
  }
}

@-webkit-keyframes bounce {

  0%,
  100% {
    top: 20px;
    text-shadow: 0 1px 0 #ccc, 0 2px 0 #ccc, 0 3px 0 #ccc, 0 4px 0 #ccc,
      0 5px 0 #ccc, 0 6px 0 transparent, 0 7px 0 transparent, 0 8px 0 transparent,
      0 9px 0 transparent, 0 10px 10px rgba(0, 0, 0, 0.4);
  }

  50% {
    top: -20px;
    text-shadow: 0 1px 0 #ccc, 0 2px 0 #ccc, 0 3px 0 #ccc, 0 4px 0 #ccc,
      0 5px 0 #ccc, 0 6px 0 #ccc, 0 7px 0 #ccc, 0 8px 0 #ccc, 0 9px 0 #ccc,
      0 50px 25px rgba(0, 0, 0, 0.2);
  }
}

.mobile_footer {
  display: none;
  background: #EDE9F3;
  padding: 2rem 0;
  width: 100%;
  text-align: center;
}

.mobile_footer p {
  text-align: center;
}

.eyes {
  position: relative;
}

.eyes::after,
.eyes::before {
  position: absolute;
  content: '';
  width: 15px;
  height: 15px;
  top: -3px;
  border: 3px solid #fff;
  border-radius: 50%;
  animation: eyes 1.5s linear forwards;
  transform: translateY(-100px);
  opacity: 0;
}

@keyframes eyes {
  0% {
    transform: translateY(-100px);
  }

  80% {
    transform: translateY(3px) skew(5deg, 5deg) rotate(45deg);
  }

  100% {
    transform: translateY(-3px);
    opacity: 1;
  }
}

.eyes::after {
  left: -1px;
}

.eyes::before {
  right: -1px;
}

#square_animation {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 60vh;
  overflow: hidden !important;
}

#square_animation label {
  position: absolute;
  width: 100px;
  height: 100px;
  background: transparent;
  background-size: cover;
  pointer-events: none;
  animation: animate1 5s linear infinite;
  z-index: 10;
}

@keyframes animate1 {
  0% {
    transform: scale(0) translateY(0) rotate(0deg);
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  100% {
    transform: scale(1) translateY(-500%) rotate(360deg);
    opacity: 0;
  }
}

.shake {
  animation: shake 0.82s cubic-bezier(.36, .07, .19, .97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}


@keyframes shake {

  10%,
  90% {
    transform: translate3d(-1px, 0, 0);
  }

  20%,
  80% {
    transform: translate3d(2px, 0, 0);
  }

  30%,
  50%,
  70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%,
  60% {
    transform: translate3d(4px, 0, 0);
  }
}

.slide-bottom {
  animation: slideBottom 0.5s linear forwards;
}

.slide-top {
  animation: slideTop 1.2s linear forwards;
  opacity: 0;

}

@keyframes slideTop {
  from {
    transform: translateY(1000px);
    opacity: 0;
  }

  to {
    transform: translateY(0px);
    opacity: 1;

  }
}

@keyframes slideBottom {
  from {
    transform: translateY(-100px);
    opacity: 0;
    transform: scale(0.8);
  }

  to {
    transform: translateY(0px);
    opacity: 1;
    transform: scale(1);

  }
}

.accordion .accordion-item {
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0.5rem 1rem;
  font-size: 2rem;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
  margin-bottom: 1rem;
  background: rgba(255, 255, 252, 0.1);
  border-radius: 5px;
}

.accordion .accordion-item button[aria-expanded="true"] {
  border-bottom: 1px solid var(--lightsky-color);
}

.accordion button {
  position: relative;
  display: block;
  text-align: left;
  width: 100%;
  padding: 1rem;
  color: var(--text-color);
  font-size: 1.15rem;
  font-weight: 400;
  border: none;
  background: transparent;
  outline: none;
}

.accordion button:hover,
.accordion button:focus {
  cursor: pointer;
  color: var(--main-color);
}

.accordion button:hover::after,
.accordion button:focus::after {
  cursor: pointer;
  color: #3C1E6E;

}

.accordion button .accordion-title {
  padding: 1em 1.5em 1em 0;
  font-size: 2rem;
}

.accordion button .icon {
  display: inline-block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 1rem;
  width: 22px;
  height: 22px;
  border: 1px solid;
  border-radius: 22px;
}

.accordion button .icon::before {
  display: block;
  position: absolute;
  content: "";
  top: 9px;
  left: 5px;
  width: 10px;
  height: 2px;
  background: currentColor;
}

.accordion button .icon::after {
  display: block;
  position: absolute;
  content: "";
  top: 5px;
  left: 9px;
  width: 2px;
  height: 10px;
  background: currentColor;
}

.accordion button[aria-expanded="true"] {
  color: var(--lightsky-color);
}

.accordion button[aria-expanded="true"] .icon::after {
  width: 0;
}

.accordion button[aria-expanded="true"]+.accordion-content {
  opacity: 1;
  max-height: 9em;
  transition: all 200ms linear;
  will-change: opacity, max-height;
}

.accordion .accordion-content {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 200ms linear, max-height 200ms linear;
  will-change: opacity, max-height;
}

.accordion .accordion-content p {
  font-size: 1.6rem;
  font-weight: 300;
  margin: 2em 0;
}

.heading-quaternary {
  font-family: "Poppins", sans-serif;
  font-size: 1.9rem;
  font-weight: 500;
  letter-spacing: 0.4px;
  color: #ffffff;
}

.modal {
  background: rgba(60, 30, 110, 0.35);
}

.modal-content {
  background-color: transparent;
}

.paragraph {
  font-family: "Poppins", sans-serif;
  font-size: 1.6rem;
  letter-spacing: 0.4px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
  scroll-padding-top: 2rem;
}

html {
  font-size: 62.5%;
  overflow: scroll;
  overflow-x: hidden;
}

html,
body {
  overflow-x: hidden;
  overflow-y: auto;
  scroll-behavior: smooth;

}

input {
  padding: 0.6rem 1rem;
}

p {
  font-weight: 500 !important;
}

body {
  
  font-family: "Saira", sans-serif;
  font-weight: 400;
  line-height: 1.7;
  box-sizing: border-box;
  /* transition: margin 0.9s; */
  padding-right: 0 !important;
  background: var(--dark-color);
}

button:focus {
  border: 0;
  outline: 0;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}


@-webkit-keyframes animate {

  0%,
  100% {
    text-shadow: 0px 0px rgba(255, 255, 255, 1);
  }

  50% {
    text-shadow: 8px -5px rgba(255, 255, 255, 1);
  }
}

@keyframes animate {

  0%,
  100% {
    text-shadow: 0px 0px rgba(255, 255, 255, 1);
  }

  50% {
    text-shadow: 8px -5px rgba(255, 255, 255, 1);
  }
}

.textshadow_animation {
  animation: animate 1.5s linear infinite;
}

.card__wrapper .card__body {
  position: relative;
  border-radius: 5%;
  overflow: hidden;
  margin: 1rem;
  box-shadow: 0px 4px 9px -2px #b7b6b6;
  transition: 0.2s;
  border: none;
  cursor: pointer;
  z-index: 10;

}

.badge {
  position: absolute;
  width: 0;
  height: 0;
  border-top: 78px solid #773cd9ab;
  border-right: 73px solid transparent;
  text-align: center;
  display: block;
  z-index: 50;
  transform: scale(1.2);
}

.badge .star {
  position: absolute;
  top: -62px;
  left: 12px;
  transform: rotate(-45deg);
  font-size: 2.5rem;
  color: white;
}

.card__wrapper .card__body .reating__icon__body {
  position: relative;
  margin-left: 10px;
  transition: all 0.5s;
  color: #432574 !important;
}

.card__wrapper .card__body .card__text {
  color: #fff !important;
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
  line-height: 21px;
  letter-spacing: 0em;
  text-align: left;
  margin-left: 10px;
  transition: all 0.5s;
}

.card__wrapper .card__body .card__text__body {
  transition: all 0.5s;
  background-color: #582f9b;
}

.card__wrapper .card__body:hover {
  transform: translateY(-10px);
  box-shadow: 0px 4px 9px -2px #6d6b6b;
}

.card__wrapper .card__body:hover .card__text__body {
  background-color: #432574;
}

.card__wrapper .card__body:hover .card__text {
  color: #ffffff !important;
}

.card__wrapper .card__body:hover .reating__icon__body {
  color: #ffffff !important;
}

.footer_wrapper {
  padding: 2rem 0 0;
  position: relative;
  background: #2f4eaf;
  width: 100%;
}

.footer .footer__information__title {
  position: relative;
  color: #fff;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 19px;
  letter-spacing: 0em;
  text-align: left;
}

.footer .footer__information__title::after {
  position: absolute;
  content: '';
  top: 50%;
  transform: translateY(-50%);
  left: -25px;
  width: 5px;
  height: 5px;
  background: transparent;
  border-radius: 5%;
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.8), 0 0 0 10px rgba(255, 255, 255, 0.4);
}

.footer .footer__information .list-item {
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0em;
  text-align: left;
  margin: 20px 0px;

}

.footer .footer__information .list-item .footer_icon {
  color: #fff;
  margin-right: 0.5rem;
}

.footer .footer__information .list-item a {
  color: rgba(255, 255, 255, 0.8) !important;
  text-decoration: none;
  transition: all 0s ease-in-out;
  font-weight: 700;
}

.footer .footer__information .list-item a:hover {
  position: relative;
  color: #fff !important;
  left: 2px;
  transition: all 0.2s ease-in-out;
}

.footer__border {
  margin: 15px 12px 0px 28px;
  padding-top: 0;
}

.footer .footer__end__body {
  color: rgba(255, 255, 255, 0.6);
  flex-wrap: wrap-reverse;
}

.footer .footer__end__body .copyRight {
  margin-right: 20px !important;
  margin-bottom: 0px !important;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 14px;
  letter-spacing: 0em;
  text-align: left;
  color: #fff;
}

.footer .footer__end__body .copyRight a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: underline;
}

.footer__form {
  position: relative;
}

.footer__form::after {
  color: black;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  margin-right: 10px;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f078";
  pointer-events: none;
  position: absolute;
  font-size: 16px;
}

.footer__form .lng__selection {
  padding: 10px 50px;
  border-radius: 10px;
  background-color: transparent;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0em;
  text-align: left;
  color: rgba(0, 0, 0, 0.6);
  padding-right: 6rem;
  -moz-appearance: none;
  -webkit-appearance: none;
}

.footer__form .lng__icon {
  position: absolute;
  left: 20px;
  top: 9px;
  z-index: 999;
}

#header {
  height: 70px;
  position: relative;
  width: 100%;
  z-index: 20000;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  background: rgba(255, 255, 252, 0.1);
  border-bottom: 0.1rem solid #fff2;
  backdrop-filter: blur(2rem);
  transition: all 0.5s ease;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}


#header .navbar #sidebar__toggle--btn {
  cursor: pointer;
  display: none;
  transition: 0.3s ease;
}

#header .navbar #sidebar__toggle--btn:hover {
  transition: 0.3s ease;
  transform: scale(1.1);
}

#header .navbar ul {
  float: left;
}

#header .navbar li {
  position: relative;
  filter: contrast(1);
  transition: filter 0.3s ease;
  list-style: none;
}

#header .navbar li a {
  position: relative;
  font-size: 1.7rem;
  color: #fff;
  padding: 0 20px 0px 10px;
  font-weight: 400;
  border-left: 0.5rem solid transparent;
  transition: all 0.3s ease;
}

#header .navbar li a img {
  padding: 0 5px;
}

#header .navbar li a:hover {
  color: var(--main-color);
  transition: 0.3s ease;
  border-left: 0.5rem solid var(--main-color);
}

#header .navbar form input {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  outline: 0;
  padding: 10px 30px 10px 20px;
  color: rgba(255, 255, 255, 0.8);
  opacity: 1;
  font-size: 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(1rem);
  width: 350px;
  transition: 0.3s ease;
  box-shadow: none;
}

#header .navbar form input:focus {
  background: rgba(255, 255, 255, 0.2);
  padding: 10px 30px 10px 22px;
  border-color: rgba(255, 255, 255, 0.1);
}

#header .navbar form input::-moz-placeholder {
  color: var(--white-color);
  opacity: 1;
  font-size: 1.5rem;
}

#header .navbar form input:-ms-input-placeholder {
  color: var(--white-color);
  opacity: 1;
  font-size: 1.5rem;
}

#header .navbar form input::placeholder {
  color: var(--white-color);
  opacity: 1;
  font-size: 1.5rem;
}

#header .navbar form button {
  outline: 0;
  border: 0;
  background-color: transparent;
  cursor: pointer;
  margin-left: -40px;
  z-index: 2;
}

#header .navbar form button i {
  font-size: 20px;
  color: var(--sky-color);
}

#header .navbar form button:hover i {
  color: var(--orange-color);
}

#header .navbar .header__navbar-collapse {
  display: flex;
  flex-grow: 1;
  justify-content: end;
  align-items: center;
}

#header .navbar .header__right {
  display: flex;
  justify-content: flex-end;
  float: right;
}

#header .navbar .header__right img {
  height: 25px;
  width: 25px;
  margin: 0 10px;
  position: relative;
  cursor: pointer;
  transition: 0.3s ease;
}

#header .navbar .header__right img:hover {
  transition: 0.3s ease;
  transform: scale(1.1);
}

#header .header__notification {
  position: fixed;
  top: 60px;
  right: 100;
  padding: 15px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background: #eaeaea;
  border: 1px solid #c7d8e2;
  width: 600px;
  z-index: 99999;
  height: 80vh;
  overflow: auto;
  display: none;
  border-radius: 3px;
}

#header .header__notification::before {
  content: "";
  position: absolute;
  top: -20px;
  z-index: 999999;
  right: 56px;
  border: 10px solid;
  border-color: transparent transparent #eaeaea transparent;
}

#header .header__notification h3 {
  font-size: 20px;
  font-weight: 700;
  color: #3c1e6e;
}

#header .header__notification p {
  font-size: 17px;
  color: rgba(0, 0, 0, 0.768627451);
  font-weight: 600;
  padding: 10px 0;
}

#header .header__notification--item {
  background-color: #fff;
  padding: 15px 10px;
  border-radius: 10px;
  margin: 10px 0;
  position: relative;
}

#header .header__notification--item h6 {
  font-size: 14px;
  padding-bottom: 10px;
  color: #3c1e6e;
}

#header .header__notification--item h6 i {
  padding: 0 5px 0 8px;
}

#header .header__notification--item h6 span {
  padding-right: 15px;
}

#header .header__notification--item h1 {
  padding: 5px 0;
  font-size: 18px;
  color: #3c1e6e;
  font-weight: 600;
}

#header .header__notification--item h1 img {
  width: 50px !important;
  height: 50px !important;
}

#header .header__notification--item p {
  font-size: 16px;
  color: rgba(0, 0, 0, 0.768627451);
  padding-left: 10px;
}

#header .header__notification--item a {
  font-weight: 600;
  background-color: #502989;
  font-size: 12px;
  padding: 8px 12px;
  color: #ffffff;
  border-radius: 5px;
  outline: none;
  border: none;
  margin-top: 68px;
  transition: 1s;
}

#header .header__sidebar {
  position: fixed;
  display: none;
  z-index: 999999;
  top: 80px;
  bottom: 0;
  height: 100vh;
  right: -1000px;
  overflow: scroll;
  transition: 0.5s ease;
  max-width: 100%;
  width: 100%;
  /* background-color: #EDE9F3; */
  /* box-shadow: 0 0.5rem 4rem rgba(0,0,0,0.6), -200px 0 rgb(57 29 105 / 72%); */
  background: linear-gradient(to right, transparent 30%, #EDE9F3 0%);
  backdrop-filter: blur(2px);
  padding-bottom: 20rem;
}

#sidebar__close,
#close_icon,
#close_search {
  position: absolute;
  width: 3.5rem;
  height: 3.5rem;
  background: #3c1e6e;
  right: 1rem;
  top: 1rem;
  text-align: center;
  color: #fff;
  font-size: 2rem;
  display: flex;
  align-items: center;
  border-radius: 50%;
  justify-content: center;
  cursor: pointer;
}

#header .header__sidebar #sidebar__close:hover {
  background-color: #f00;
  transition: 0.3s ease;
}

#sidebar__close i {
  color: #fff;
  font-size: 1.6rem;
}

#header .header__sidebar--listItems {
  padding: 50px 20px;
}

#header .header__sidebar--listItems ul {
  list-style: none;
  overflow: hidden;
}

#header .header__sidebar--listItems ul li {
  padding: 1px 0;
  position: relative;
  width: 100%;
  left: 30%;
}

#header .header__sidebar--listItems ul li a {
  font-size: 15px;
  font-weight: bold;
  color: #3d1e6ed8;
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 0px 1px rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  padding: 1rem 0;
}

#header .header__sidebar--listItems ul li a::before {
  content: "";
  position: absolute;
  display: block;
  width: 100px;
  height: 3px;
  opacity: 0;
  transition: 0.3s ease;
  background: var(--sky-color);
  bottom: 0;
  left: 20px;
}

#header .header__sidebar--listItems ul li a:hover::before {
  opacity: 1;
  transition: 0.3s ease;
}

#header .header__sidebar--listItems ul li a img {
  height: 20px;
  margin: 0 10px;
}

#header .header__sidebar--listItems .collapse__item .collapse__items {
  transition: 0.5s ease;
  display: none;
}

#header .header__sidebar--listItems .collapse__item ul li {
  padding: 0.5rem 0 0 5rem;
}

#header .header__sidebar--listItems .collapse__item ul li a {
  font-size: 14px !important;
  padding: 0;
}

#header .header__sidebar .subscription__section h3 {
  color: var(--sky-color);
}

#header .header__sidebar .subscription__section button {
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: 0em;
  text-align: center;
  background-color: var(--sky-color);
  border-radius: 10px;
  border: 2px solid var(--sky-color) !important;
  outline: none;
  padding: 10px 50px;
  transition: 1s;
  cursor: pointer;
}

.common_btn {
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: 0em;
  text-align: center;
  background-color: var(--sky-color);
  border-radius: 10px;
  border: 2px solid var(--sky-color) !important;
  outline: none;
  padding: 10px 20px;
  display: inline-block;
  color: #fff;
  transition: 1s;
  cursor: pointer;
  margin-bottom: 1rem;
}

.common_btn:hover {
  background-color: var(--secondary-color);
  color: #000;
}

#header .header__sidebar .subscription__section button a {
  color: #fff;
}

.pb-80px {
  padding-bottom: 80px !important;
}


.slick-arrow::before {
  font-size: 33px !important;
  z-index: 9999;
  opacity: 1;
  background: var(--sky-color);
  border-radius: 10px;
}

.slick-prev {
  left: -60px !important;
  z-index: 1;
  transition: all .3s ease;
}

.tournament_slider {
  overflow: hidden;
}

.tournament_slider:hover .slick-prev {
  left: 29px !important;
  z-index: 1;
}

.slick-next {
  right: -53px !important;
  z-index: 1;
  transition: all .3s ease;
}

.tournament_slider:hover .slick-next {
  right: 53px !important;
  z-index: 1;
}

.slick-prev::before,
.slick-next::before {
  color: #3C1E6E !important;
  font-family: inherit !important;
}

.slick-next::before {
  padding: 6px 17px 3px 17px;
}

.slick-prev::before {
  padding: 6px 17px 3px 17px;
}


.bannar__body {
  position: relative;
  background-image: url("header-banner.webp");
  height: 70vh;
  min-height: 720px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background-size: cover;
  background-position: left;
  animation: moveBg 60s linear infinite alternate;
  /* background: rgb(60 30 110 / 92%); */
}

.bannar__body::after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #3C1E6E;
  opacity: 0.8;
  z-index: 10;
}

.bannar__body__text {
  position: relative;
  text-align: center;
  font-weight: bold !important;
  padding: 6rem 0;
  z-index: 100;
}

.bannar__body__text__title {
  font-size: clamp(2rem, 5vw, 8rem) !important;
  color: transparent;
  font-weight: 600;
  -webkit-text-stroke: 1px #ffffff;
  text-shadow: 5px -2px rgba(255, 255, 255, 0.6);
  line-height: 112px;
}

.bannar__body__text__description {
  font-size: 2.5rem;
  line-height: 45px;
  color: #ffffff;
  margin-top: 0;
  font-weight: 500;
}

.bannar__body__btn button {
  position: relative;
  width: 220px;
  height: 50px;
  outline: none;
  background: transparent;
  cursor: pointer;
  font-size: 1.8rem;
  border-radius: 10px;
  text-transform: uppercase;
  border: 0.1rem solid rgba(255, 255, 255, 0.1);
  color: #000;
  font-weight: 500;
  margin-top: 3rem;
  z-index: 100;
}

.pulse {
  animation: pulse 2s infinite;
  box-shadow: 0 0 0 1rem transparent;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 #fff2;
  }
}

.bannar__body__btn button::before {
  content: '';
  /* background: linear-gradient(45deg, #12ACF8, #9f69fa ,#aa7cf5,#12ACF8); */
  background: linear-gradient(120deg, #12ACF8, #eaec70, rgb(241, 165, 165), #9f69fa, #aa7cf5, rgb(114, 238, 141));
  position: absolute;
  top: -2px;
  left: -2px;
  background-size: 400%;
  z-index: -1;
  filter: blur(5px);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  animation: glowing 20s linear infinite;
  opacity: 1;
  transition: opacity .3s ease-in-out;
  border-radius: 8px;
}

.bannar__body__btn button:after {
  z-index: -1;
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.1);
  left: 0;
  top: 0;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

@keyframes glowing {

  0%,
  100% {
    background-position: 0 0;
  }

  50% {
    background-position: 800% 0;
  }
}

.bannar__body__btn button:hover::before {
  background: #12ACF8 !important;
  cursor: pointer;
  color: #000 !important;
  animation: none !important;
}

a:hover {
  text-decoration: none !important;
}

.mostPopular {
  position: relative;
  z-index: 10;
  padding: 50px 0px;
}

.mostPopular__title__text {
  color: var(--main-color);
  font-size: clamp(1.8rem, 5vw, 3.5rem);
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0em;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.title_bar {
  position: relative;
  top: -10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
h1.mostPopular__title__text svg {
  margin-right: 0.5rem;
}
.title_bar img {
  width: 130px;
}

.title_bar .bar {
  background: var(--main-color);
  height: 2px;
  width: 100px;
}

.subheading_common {
  font-size: 1.6rem;
  font-weight: 500;
  text-align: center;
  margin: 2rem 0;
  color: var(--white-color);
}

.mostPopular__title__text--font-width span {
  font-weight: normal !important;
}

.more_icon {
  width: 45px;
  margin: auto;
  margin-top: 20px;
}

.more_icon a :hover {
  filter: brightness(1.5);
}

.slider {
  margin: 50px 0px;
}

.slider__items {
  padding: 20px;
}

.slider__item--banner {
  width: 100%;
  height: 100%;
  position: relative;
  opacity: 0.8;
  filter: brightness(0.6);
}

.slider__item--banner i {
  font-size: 5rem;
  color: red;
}

.slider__item--icon {
  width: 80px;
  height: auto;
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: 0.5s ease-in-out;
}

.slider__item .icon-opacity {
  opacity: 0;
}

.slider__card__title {
  color: #ffffff;
  font-size: 2rem;
  border-top: 2px solid #ffffff;
  padding-top: 10px;
  position: absolute;
  left: 0;
  width: 100%;
  bottom: 0;
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(1px);
}

.slider__card__title__text {
  margin-left: 5px;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: 0em;
  text-align: left;
}

.card__height {
  position: relative;
  height: 246px;
  border-radius: 15px;
  overflow: hidden;
}

.icon__card__main {
  background-color: #ffffff;
  box-shadow: 0px 4px 20px rgba(80, 41, 137, 0.1);
  padding: 10px 0px;
  height: auto;
}

.icon__card__main .slick-list.draggable {
  margin-left: 70px;
  margin-right: 70px;
}

.icon__card__main .slick-prev:before {
  padding: 1px 10px 2px 9px !important;
  content: "<";
  font-size: 23px !important;
}

.icon__card__main .slick-next:before {
  padding: 1px 7px 2px 11px !important;
  content: ">";
  font-size: 23px !important;
}

.icon__card__items {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.icon__card__body {
  background-color: #502989;
  padding: 7px 10px;
  color: #ffffff;
  width: 80px;
  height: 55px;
  border-radius: 8px;
  margin: 0rem auto;
  transition: 0.3s;
}

.icon__card__body__img {
  margin: auto;
  width: 30%;
  margin-bottom: 2px;
}

.icon__card__body__img-size {
  width: 23%;
}

.icon__card__body__img-sizeS {
  width: 45%;
}

.icon__card__body__text {
  font-size: 10px;
  font-style: normal;
  font-weight: bold;
  line-height: 19px;
  letter-spacing: 0em;
  text-align: center;
}

.icon__card__body:hover {
  transform: scale(1.1);
  background-color: #9f69fa;
}

.bg-color {
  background-color: #e5e5e5;
  overflow: hidden;
}

.bannar__subcription {
  margin: 50px 0px;
}

.bannar__subcription__body {
  background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(../../img/bannar-sub-page.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 10rem;
  border-radius: 32px;
  color: #ffffff;
}

.bannar__subcription__body__text {
  width: 45%;
}

.bannar__subcription__body__text__title {
  font-size: 40px;
  font-style: normal;
  font-weight: 700;
  line-height: 56px;
  letter-spacing: 0em;
  text-align: left;
  margin-bottom: 2rem;
}

.bannar__subcription__body__text__description {
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: 0em;
  text-align: left;
}

.all__game {
  background-color: rgba(80, 41, 137, 0.1215686275);
  padding: 20px 0px 50px 0px;
}

.playbtn__bannar {
  position: relative;
  overflow: hidden;
  border-radius: 15px;
  z-index: 5;
  width: 60%;
  margin: 0 auto;
}

.playbtn__bannar img::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(0, 0, 0, 0.6), rgb(119 52 231 / 79%));
}

.playbtn__bannar img {
  border-radius: 15px;
  filter: brightness(0.8) blur(5px);
}

.playbtn__bannar__body {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgb(119 52 231 / 49%));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 10;
}

.playbtn__bannar__body__title {
  font-size: clamp(2rem, 5vw, 5rem);
  font-style: normal;
  font-weight: bold;
  line-height: 56px;
  letter-spacing: 0em;
  text-align: left;
  color: #fff;
}

.playbtn__bannar__body__list {
  margin-bottom: 3rem;
}

.playbtn__bannar__body__list li {
  list-style: none;
  font-size: 2.2rem;
  font-style: normal;
  line-height: 42px;
  letter-spacing: 0em;
  text-align: left;
  color: rgba(0, 0, 0, 0.6980392157);
  margin: 5px 0px;
}

.playbtn__bannar__body .play__btn {
  border: none;
  width: 100%;
  border-radius: 5px;
  padding: 1.5rem;
  display: block;
  font-size: 22px;
  font-style: normal;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: 0em;
  text-align: center;
  transition: all 0.5s;
}

.playbtn__bannar__body .play__btn--playnow {
  color: #ffffff;
  background-color: #12ACF8;
  width: 200px;
  box-shadow: inset 0 2px 4px 0 #ffffff60, inset 0 -3px 3px 0 #00000031, 0 8px 15px 0 #061d6280;
  display: block;
  transition: 0.3s ease-in-out;
}

.playbtn__bannar__body .play__btn--playnow:hover {
  background-color: #502989;
}

.playbtn__bannar__body .play__btn--playnow:focus {

  transform: translateY(-3px);
  box-shadow: inset 0 4px 8px 0 #ffffff60, inset 0 -3px 3px 0 #00000031, 0 8px 15px 0 #061d6280;
}

.playbtn__bannar__body .play__btn--leaderBoard {
  color: rgba(0, 0, 0, 0.8980392157);
  border: 1.5px solid #502989;
}

.copyRight {
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 14px;
  letter-spacing: 0em;
  color: rgba(0, 0, 0, 0.6);
}

.footer__list__coustomize ul li {
  border-right: 1px solid rgba(0, 0, 0, 0.8);
  padding: 0px 15px;
}

.footer__list__coustomize ul li:last-child {
  border-right: none;
  margin-left: 10px;
}

.footer__list__coustomize ul li:last-child .footer__form .lng__icon {
  top: 4px;
}

.footer__list__coustomize ul li:last-child .footer__form .lng__selection--height {
  padding: 5px 50px;
  border-radius: 7px;
  background-color: transparent;
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0em;
  text-align: left;
  padding-right: 4rem;
  background: transparent url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat 100% center;
}

.footer__list__coustomize ul li a {
  color: rgba(0, 0, 0, 0.8);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0em;
  text-align: left;
}

.footer__list__coustomize ul li a:hover {
  text-decoration: none;
  color: rgba(0, 0, 0, 0.6);
}

.game__description__body {
  background: rgba(80, 41, 137, 0.2);
  border-radius: 8px;
  padding: 5rem;
}

.game__description__body__title {
  font-size: 28px;
  font-style: normal;
  font-weight: bold;
  line-height: 33px;
  letter-spacing: 0em;
  text-align: left;
  margin: 1.5rem 0rem;
}

.game__description__body__text {
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 25px;
  letter-spacing: 0em;
  text-align: left;
  color: rgba(0, 0, 0, 0.5)
}

.bannar__body--bg {
  position: relative;
  background-image: url("about_banner.webp");
  height: 60vh;
  min-height: 500px;
  background-position: left;
  background-size: contain;
  animation: moveBg 20s linear infinite alternate;
}


@keyframes moveBg {
  from {
    background-position: left;
  }

  to {
    background-position: right;
  }
}

.bannar__body--bg::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background: linear-gradient(rgb(60 30 110 / 70%), rgb(60 30 110 / 71%));
}

.bannar__body--bg .bannar__body__text {
  position: relative;
  z-index: 25;
}

.bannar__body--bg .bannar__body__text__title a {
  font-size: clamp(2rem, 4vw, 6rem);
  font-weight: 500;
  color: #ffffff !important;
  text-decoration: none;
}

.bannar__body--bg .bannar__body__text__title a:hover {
  color: #ffffff;
}

.bannar__body--bg .bannar__body__text__subtitle {
  font-size: clamp(1.6rem, 2vw, 3rem);
  font-weight: 400;
  color: #e5e5e5;
  text-transform: capitalize;
}

.sm__bannar__icon {
  margin: auto;
  width: 10%;
  padding: 2rem 0rem;
}

.sm__bannar__title {
  font-size: 20px;
  font-style: normal;
  font-weight: bold;
  line-height: 21px;
  color: #3c1e6e;
  margin-bottom: 2rem;
  letter-spacing: 0em;
  text-align: center;
}

.about_us__title__text {
  color: #3c1e6e;
  font-size: 45px;
  font-style: normal;
  font-weight: bold;
  line-height: 56px;
  letter-spacing: 0em;
  text-align: left;
}

.about_us__describson__body__text {
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 30px;
  letter-spacing: 0em;
  text-align: left;
  margin: 6rem 0rem;
  color: rgba(0, 0, 0, 0.8980392157);
}

.contact_us__position {
  margin-left: 19%;
}

.contact_us__position .contact_us__inpute__body {
  margin: 0% 22%;
}

.contact_us__position .contact_us__inpute__body .contact_us__title .m {
  margin-top: 6rem;
  margin-bottom: 5rem;
}

.contact_us__position .contact_us__inpute__body .contact_us__title__item__icon {
  width: 20px;
  float: left;
  margin-right: 2%;
}

.contact_us__position .contact_us__inpute__body .contact_us__title__item__text {
  overflow: hidden;
}

.contact_us__position .contact_us__inpute__body .contact_us__title__item__text h5 {
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: 0em;
  text-align: left;
  color: rgba(0, 0, 0, 0.8980392157);
}

.contact_us__position .contact_us__inpute__body__form {
  margin-left: 4%;
}

.contact_us__position .contact_us__inpute__body__form__item {
  width: 100%;
  margin: 5% 0%;
}

.contact_us__position .contact_us__inpute__body__form__item input,
.contact_us__position .contact_us__inpute__body__form__item textarea {
  padding: 3%;
  padding-left: 3%;
  width: 99.5%;
  border: 1px solid #3c1e6e;
  border-radius: 4px;
  color: #3c1e6e;
  font-weight: bold;
  font-size: 16px;
}

.contact_us__position .contact_us__inpute__body__form__btn {
  width: 30%;
  padding: 2.2% 0%;
  font-size: 24px;
  font-style: normal;
  font-weight: bold;
  color: #ffffff;
  line-height: 28px;
  letter-spacing: 0em;
  text-align: center;
  background: #3c1e6e;
  border-radius: 7px;
  border: none;
  text-transform: uppercase;
}

.contact_us__position .contact_us__inpute__body__form__btn:hover {
  background: #12ACF8;
}

.contact_us__position .contact_us__inpute__body__form ::-moz-placeholder {
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 19px;
  letter-spacing: 0em;
  text-align: left;
}

.contact_us__position .contact_us__inpute__body__form :-ms-input-placeholder {
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 19px;
  letter-spacing: 0em;
  text-align: left;
}

.contact_us__position .contact_us__inpute__body__form ::placeholder {
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 19px;
  letter-spacing: 0em;
  text-align: left;

}

.accordion .card-header:after {
  font-family: 'FontAwesome';
  content: "\f068";
  float: right;
}

.accordion .card-header.collapsed:after {
  /* symbol for "collapsed" panels */
  content: "\f067";
}

.iframe__body {
  box-shadow: 0px 8px 8px rgba(60, 30, 110, 0.12);
  border-radius: 16px;
  overflow: hidden;
  background: #dcd4e7;
  width: 80%;
  margin: 0 auto;
}

.iframe__body__iframe {
  height: 70vh;
  min-height: 300px;
}

.iframe__body__t {
  margin: 1% 2%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.iframe__body__t__title {
  color: #3c1e6e;
  font-size: 25px;
  font-style: normal;
  font-weight: 600;
  line-height: 42px;
  letter-spacing: 0em;
  text-align: left;
}

.iframe__body__t__description p {
  float: left;
  width: 50%;
}

.iframe__body__t__description p img {
  width: 14px;
  margin-bottom: 1%;
}

.iframe__body__t__description p a {
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 21px;
  letter-spacing: 0em;
  text-align: center;
  color: rgba(0, 0, 0, 0.8980392157);
}

.iframe__body__t__description p a:hover {
  text-decoration: none;
  color: rgba(0, 0, 0, 0.8980392157);
}

.iframe__body__t__description span {
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: 0em;
  text-align: center;
  float: right;
  color: rgba(0, 0, 0, 0.8980392157);
  cursor: pointer;
}



#permissionModal #textContent {
  font-size: 20px;
  color: black;
  display: block;
  margin: 30px 0 0 25px;
  font-family: "Roboto", sans-serif;
}

#permissionModal #textContent .popup_title {
  font-size: 22px;
  color: #3c1e6e;
  display: block;
  margin-bottom: 20px;
  font-weight: bold;
}

#permissionModal #textContent .differ {
  color: black;
  font-size: 22px;
  font-weight: 500;
  text-transform: uppercase;
}

#permissionModal .buttons {
  float: right;
  margin: 30px 10px;
}

#permissionModal .buttons button {
  padding: 2px 25px;
  margin: 0 5px;
  font-size: 18px;
  border-radius: 3px;
  cursor: pointer;
  outline: none;
  border: none;
}

#permissionModal .buttons .yes_btn {
  color: white;
  background-color: #3c1e6e;
}

#permissionModal .buttons .no_btn {
  color: #3c1e6e;
  background-color: #d9d9d9;
}

#subscriptionModal {
  font-family: "Roboto", sans-serif;
  background: #F8F8F8;
  box-shadow: 0px 8px 10px rgba(60, 30, 110, 0.4);
  border-radius: 8px;
}

#subscriptionModal .header_title {
  text-align: center;
  margin: 30px auto 40px;
  width: 180px;
}

#subscriptionModal .header_title div {
  font-size: 35px;
  color: #3c1e6e;
  font-weight: 600;
}

#subscriptionModal .header_title span {
  font-size: 16px;
  border: 1px solid #3c1e6e;
  display: block;
  font-weight: 600;
  padding: 0.5rem;
  border-radius: 5px;
  margin-top: 10px;
}

#subscriptionModal div.choose_plan {
  margin: 10px 10px 30px;
}

#subscriptionModal div.choose_plan h5 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 0;
}

#subscriptionModal div.choose_plan .plan_cards {
  display: flex;
  justify-content: space-around;
  padding: 3rem;
}

#subscriptionModal div.choose_plan .plan_card {
  border: 1px solid;
  border-color: transparent;
  background: #FFFFFF;
  box-shadow: 0px 6px 8px rgba(60, 30, 110, 0.12);
  border-radius: 8px;
  transition: 0.5s ease-in-out;
  min-height: 250px;
}

#subscriptionModal div.choose_plan .plan_card .package {
  margin-top: 10px;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
}

#subscriptionModal div.choose_plan .plan_card .package div label {
  height: 12px;
  width: 12px;
  background: #3c1e6e;
  border-radius: 50%;
  position: relative;
  top: 6px;
  margin-right: 0.5rem;
}

#subscriptionModal div.choose_plan .plan_card section h5 {
  margin-bottom: -2px;
  color: #3c1e6e;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
}

#subscriptionModal div.choose_plan .plan_card section small {
  font-size: 24px;
  font-weight: 600;
  margin: 1rem 0;
  display: block;
  text-align: center;
  color: #7454a9;
}

#subscriptionModal div.choose_plan .plan_card section button {
  width: 100%;
  font-size: 16px;
  border-width: 1px;
  color: white;
  background: #3c1e6e;
  cursor: pointer;
  padding: 5px;
  border-radius: 5px;
}

#subscriptionModal div.choose_plan .plan_card section button:hover {
  color: black;
  background: transparent;
  border-color: #3c1e6e;
  border-radius: 3px;
}

#subscriptionModal div.choose_plan .plan_card:hover {
  box-shadow: 0px 6px 15px rgba(60, 30, 110, 0.12);
  border-color: #3c1e6e;
  transition: 0.6s;
  transform: translateY(-5px);
}

.modal_width {
  min-width: 460px;
  max-width: 800px !important;
}


.rightTickMinW {
  min-width: 399;
  font-family: "Roboto", sans-serif;
}

#rightTick_modal {
  height: 220px;
}

#rightTick_modal img {
  height: 100px;
  border-radius: 50%;
  display: block;
  margin: 50px auto 0;
}

#rightTick_modal p {
  display: block;
  margin: 10px auto;
  font-size: 16px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

#containerBody {
  height: auto;
  font-family: "Roboto", sans-serif;
}

.containerBody #contant_body {
  margin-top: 50px;
  margin-bottom: 50px;
}

.containerBody .contant_body {
  height: 415px;
  width: 236px;
  background-color: #ffffff;
  margin: auto;
  margin-top: 150px;
}

.containerBody .contant_body .contant_body__logo {
  height: 90px;
  width: 133px;
  margin: auto;
}

.containerBody .contant_body .contant_body__logo img {
  height: 53px;
  width: 56px;
  margin: auto;
  display: block;
}

.containerBody .contant_body .contant_body__logo span {
  font-family: "Roboto", sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: 0em;
  text-align: center;
  color: #3c1e6e;
  display: block;
  margin-top: 8px;
}

.containerBody .contant_body .contant_body__contant {
  width: 236px;
  height: 46px;
  margin-top: 50px;
  text-align: center;
  font-weight: 400;
  font-size: 18px;
  font-family: "Roboto", sans-serif;
}

.containerBody .contant_body .contant_body__contant p,
.containerBody .contant_body .contant_body__contant span {
  margin: 0;
}

.containerBody .contant_body .contant_body__contant p {
  color: #3c1e6e;
}

.containerBody .contant_body .contant_body__input {
  height: 73px;
  display: block;
  margin: 70px auto 40px;
}

.containerBody .contant_body .contant_body__input small {
  font-size: 12px;
  font-weight: 400;
  font-family: "Roboto", sans-serif;
  text-align: center;
  display: block;
  color: #3c1e6e;
  margin-bottom: 4px;
}

.containerBody .contant_body .contant_body__input div {
  display: flex;
  margin: auto;
  width: 226px;
}

.containerBody .contant_body .contant_body__input div img {
  width: 60px;
  height: 47px;
  border-radius: 0 3px 3px 0;
}

.containerBody .contant_body .contant_body__input div img:hover {
  cursor: pointer;
}

.containerBody .contant_body .contant_body__input div input {
  border-radius: 3px 0 0 3px;
  border-right: hidden;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.8);
  width: 100%;
  font-size: 18px;
  font-weight: 400;
  padding: 0 1rem;
}

.containerBody .contant_body .contant_body__input div input:focus-visible {
  outline: 0;
  border-color: #3c1e6e;
  transition: 0.5s;
}

.containerBody .contant_body .contant_body__footer {
  width: 222px;
  height: 36px;
  text-align: center;
  margin: auto;
  color: rgba(0, 0, 0, 0.8980392157);
}

.containerBody .contant_body .contant_body__footer span {
  color: #3c1e6e;
}

.containerBody .contant_body .contant_body__footer small,
.containerBody .contant_body .contant_body__footer span {
  font-size: 12px;
  display: block;
  font-weight: 400;
  font-style: normal;
  text-align: center;
}

#wAuto {
  width: auto;
}


.contant_body__inputs {
  display: block;
  margin: 30px auto 40px;
}

.contant_body__inputs div {
  display: grid;
}

.contant_body__inputs div label {
  font-size: 16px;
  color: #3c1e6e;
}

.contant_body__inputs div input {
  height: 42px;
  margin-bottom: 18px;
  font-size: 18px;
  border: 1px solid #3c1e6e;
  border-radius: 3px;
}

.contant_body__inputs div button {
  height: 42px;
  font-size: 18px;
  font-family: "Roboto", sans-serif;
  color: #ffffff;
  background-color: #3c1e6e;
  border-radius: 3px;
  border: none;
  outline: none;
}

.contant_body__inputs div button:hover {
  cursor: pointer;
  background: #12ACF8;
}

.containerBody #contant_body {
  margin-top: 50px;
  margin-bottom: 50px;
}

.containerBody .contant_body_signin {
  height: 415px;
  width: 341px;
  background-color: #ffffff;
  margin: auto;
  margin-top: 150px;
}

.containerBody .contant_body_signin .contant_body__logo {
  width: 180px;
  margin: auto;
}

.containerBody .contant_body_signin .contant_body__logo img {
  width: 100%;
}

.containerBody .contant_body_signin .contant_body__contant {
  text-align: center;
  margin-top: 20px;
}

.account_policy {
  display: flex !important;
  align-items: center;
  margin-top: 1rem;
  justify-content: center;
}

.account_policy span {
  font-size: 1.6rem;
  margin-right: 1rem;
}

.account_policy a {
  font-size: 1.6rem;
  display: inline-block !important;
}

#subscriptionMobile {
  width: 375px;
  margin: auto;
}

#subscriptionMobile .header_title {
  text-align: center;
  margin: 30px auto 40px;
  width: 180px;
}

#subscriptionMobile .header_title div {
  font-size: 28px;
  color: #3c1e6e;
}

#subscriptionMobile .header_title span {
  font-size: 16px;
  border: 1px solid #3c1e6e;
  display: block;
  height: 32px;
  font-family: "Roboto", sans-serif;
  font-weight: 600;
  padding: 3px;
  border-radius: 3px;
  margin-top: 10px;
}

#subscriptionMobile div.choose_plan {
  margin: 10px 10px 30px;
}

#subscriptionMobile div.choose_plan h5 {
  font-size: 2rem;
  font-weight: 700;
}

#subscriptionMobile div.choose_plan .plan_cards {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
}

#subscriptionMobile div.choose_plan .plan_card {
  width: 80%;
  height: auto;
  border: 1px solid;
  border-color: transparent;
  background: rgba(0, 0, 0, 0.0274509804);
  box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 15px;
}

#subscriptionMobile div.choose_plan .plan_card .package {
  margin-top: 10px;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
}

#subscriptionMobile div.choose_plan .plan_card .package div label {
  height: 10px;
  width: 10px;
  background: #3c1e6e;
  border-radius: 50%;
  position: relative;
  top: 5px;
  margin-right: 1rem;
}

#subscriptionMobile div.choose_plan .plan_card .package span {
  font-size: 1.6rem;
}

#subscriptionMobile div.choose_plan .plan_card section h5 {
  margin-bottom: 1px;
  color: #3c1e6e;
  font-size: 2rem;
  font-weight: 700;
}

#subscriptionMobile div.choose_plan .plan_card section small {
  font-size: 1.4rem;
}

#subscriptionMobile div.choose_plan .plan_card section button {
  width: 100%;
  font-size: 12px;
  border-width: 1px;
  color: white;
  background: #3c1e6e;
  cursor: pointer;
  padding: 5px;
  font-weight: 600;
  font-family: "Roboto", sans-serif;
  border-radius: 3px;
}

#subscriptionMobile div.choose_plan .plan_card:hover {
  box-shadow: none;
  border-color: #3c1e6e;
  transition: 0.6s;
  border: 1px solid #0c357e;
}

#subscriptionMobile div.choose_plan .plan_card:hover button {
  color: black;
  background: transparent;
  border-color: #3c1e6e;
}

.modal_width {
  min-width: 460px;
}

#mainBody {
  height: 100%;
  font-family: "Roboto", sans-serif;
  width: 100%;
  background: rgba(80, 41, 137, 0.2);
  margin: 0;
  padding: 0;
  position: absolute;
}

.contant_body_manually_verify {
  height: auto;
  width: 341px;
  margin: auto;
  margin-top: 50px;
}

.contant_body_manually_verify .contant_body__logo {
  height: 90px;
  width: 133px;
  margin: auto;
}

.contant_body_manually_verify .contant_body__logo img {
  height: 53px;
  width: 56px;
  margin: auto;
  display: block;
}

.contant_body_manually_verify .contant_body__logo span {
  font-family: "Roboto", sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: 0em;
  text-align: center;
  color: rgba(80, 41, 137, 0.3215686275);
  display: block;
  margin-top: 8px;
}

#verifyModal {
  width: 334px;
  height: 328px;
  margin: auto;
  border-radius: 3px;
  border: 1px solid #ffffff;
  background: #fff;
  margin-top: 35px;
  box-shadow: 0.2px 8px 6px -6px rgba(0, 0, 0, 0.3137254902);
}

#verifyModal div {
  margin-top: 35px;
}

#verifyModal div span {
  width: 235px;
  color: #3c1e6e;
  text-align: center;
  font-size: 18px;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  margin-top: 20px;
  display: block;
  margin: auto;
}

#verifyModal div img {
  width: 52px;
  height: 54px;
  margin: auto;
  display: block;
  margin-top: 35px;
}

#verifyModal div button {
  background-color: #3c1e6e;
  color: #ffffff;
  width: 283px;
  height: 46px;
  border-radius: 3px;
  font-size: 18px;
  text-align: center;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  margin: auto;
  margin-top: 45px;
  display: block;
}

#signIn {
  margin-top: 60px;
}

#wAuto {
  width: auto;
}

.signin__title {
  font-size: 14px;
  font-weight: 400;
  text-transform: capitalize;
}
.text-danger {
  color: var(--main-color) !important;
}
.contant_body__inputs {
  display: block;
  margin: 30px auto 40px;
}

.contant_body__inputs div {
  display: grid;
}

.contant_body__inputs div label {
  font-size: 16px;
  color: #3c1e6e;
}

.contant_body__inputs div input {
  height: 42px;
  margin-bottom: 18px;
  font-size: 18px;
  border: 1px solid #3c1e6e;
  border-radius: 3px;
}

.contant_body__inputs div button {
  height: 42px;
  font-size: 18px;
  font-family: "Roboto", sans-serif;
  color: #ffffff;
  background-color: #3c1e6e;
  border-radius: 3px;
  border: none;
  outline: none;
}

.contant_body__inputs div button:hover {
  cursor: pointer;
}

.contant_body__inputs div div span {
  font-size: 16px;
  margin: 12px auto;
}

.contant_body__inputs div div span#differ {
  font-size: 12px;
  margin-bottom: -1px;
}

.contant_body__inputs div div button {
  height: 42px;
  font-size: 18px;
  font-family: "Roboto", sans-serif;
  color: black;
  background-color: #ffffff;
  border-radius: 3px;
  border: 1px solid #3c1e6e;
  outline: none;
}

.contant_body__inputs div div button:hover {
  color: #fff;
  background: #12ACF8;
  border: transparent;
}

.containerBody {
  min-height: 770px;
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.containerBody #contant_body {
  margin-top: 50px;
  margin-bottom: 50px;
}

.containerBody .contant_body_signin_2 {
  height: 415px;
  max-width: 340px;
  margin: auto;
  margin-top: 25px;
}

.containerBody .contant_body_signin_2 .contant_body__logo {
  width: 133px;
  margin: auto;
}

.containerBody .contant_body_signin_2 .contant_body__logo img {
  height: 178px;
  width: 136px;
  margin: auto;
  display: block;
}

.containerBody .contant_body_signin_2 .contant_body__logo span {
  font-family: "Roboto", sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  text-align: center;
  color: #3c1e6e;
  display: block;
  margin: 30px auto;
}

.containerBody .contant_body_signin_2 .contant_body__contant {
  text-align: center;
  margin-top: 30px;
}

#containerBody_signIn2 {
  min-height: 630px;
  height: 715px;
}

#wAuto {
  width: auto;
}

.containerBody {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border-radius: 15px;
  padding-top: 2rem;
  min-height: 100vh;
}

.containerBody #contant_body {
  margin-top: 50px;
  margin-bottom: 50px;
}

.containerBody .contant_body_profile {
  width: 450px;
  max-width: 450px;
  background-color: transparent;
  margin: 8rem auto 0;
}

.containerBody .contant_body_profile .contant_body__logo {
  margin: auto;
}

.containerBody .contant_body_profile .contant_body__logo img {
  height: 110px;
  width: 110px;
  margin: auto;
  display: block;
  object-fit: cover;
  box-shadow: 0 0 0 8px rgba(61, 30, 110, 0.3);
  border: 5px solid #fff;
}

.containerBody .contant_body_profile .contant_body__logo span {
  font-family: "Roboto", sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  text-align: center;
  color: #3c1e6e;
  display: block;
  margin: 20px auto;
}

.containerBody .contant_body_profile .contant_body__logo p {
  text-align: center;
  display: block;
  color: var(--lightsky-color);
  display: block;
  margin: 0px auto 1px;
  font-size: 1.6rem;
  font-weight: 700;
}

.containerBody .contant_body_profile .contant_body__logo small {
  text-align: center;
  display: block;
  font-size: 1.6rem;
}

.containerBody .contant_body_profile .contant_body__logo button {
  background: #3c1e6e;
  color: #ffffff;
  text-align: center;
  height: 40px;
  border-radius: 3px;
  display: block;
  margin: 5px auto;
  padding: 5px 30px;
  font-size: 14px;
  font-family: "Roboto", sans-serif;
  width: 153px;
  opacity: 0.7;
  cursor: pointer;
  border: none;
}

.containerBody .contant_body_profile .contant_body__logo button:hover {
  background: #12ACF8;
}

.containerBody .contant_body_profile .contant_body__logo #beforeBtn {
  opacity: 1;
}

.containerBody .contant_body_profile .contant_body__contant {
  text-align: center;
  margin-top: 30px;
}

.containerBody .contant_body_profile .contant_body__inputs {
  display: block;
  margin: 30px auto 40px;
}

.containerBody .contant_body_profile .contant_body__inputs div {
  display: grid;
  position: relative;
}

.containerBody .contant_body_profile .contant_body__inputs div label {
  font-size: 16px;
  color: #3c1e6e;
}

.containerBody .contant_body_profile .contant_body__inputs div input {
  height: 42px;
  margin-bottom: 18px;
  font-size: 18px;
  border: 1px solid #3c1e6e;
  border-radius: 3px;
}

.containerBody .contant_body_profile .contant_body__inputs div button {
  height: 42px;
  font-size: 18px;
  font-family: "Roboto", sans-serif;
  color: var(--dark-color);
  background-color: var(--lightsky-color);
  border-radius: 3px;
  border: none;
  outline: none;
  width: 200px;
  margin: 15px auto;
}

.containerBody .contant_body_profile .contant_body__inputs div button:hover {
  cursor: pointer;
  background: #12ACF8;
}

.containerBody .contant_body_profile .contant_body__inputs .input-icons {
  width: 100%;
  margin-bottom: 10px;
}

.containerBody .contant_body_profile .contant_body__inputs .input-icons input::-moz-placeholder {
  color: var(--white-color);
  top: 5px;
  font-family: "Roboto", sans-serif;
}

.containerBody .contant_body_profile .contant_body__inputs .input-icons input:-ms-input-placeholder {
  color: var(--white-color);
  top: 5px;
  font-family: "Roboto", sans-serif;
}

.containerBody .contant_body_profile .contant_body__inputs .input-icons input::placeholder {
  color: var(--white-color);
  top: 5px;
  font-family: "Roboto", sans-serif;
}

.containerBody .contant_body_profile .contant_body__inputs .input-icons input:focus-visible {
  outline: none;
  border-color: var(--white-color);
  border-width: 1px;
  transition: 0.5s;
}


.containerBody .contant_body_profile .contant_body__inputs .input-icons p {
  width: 100%;
  padding: 6px;
  text-indent: 25px;
  font-size: 16px;
  color: var(--orange-color);
  font-family: "Roboto", sans-serif;
  font-weight: 500;
}

.containerBody .contant_body_profile .contant_body__inputs .input-icons #signOut_btn {
  margin-top: 20px;
}

.containerBody .contant_body_profile .contant_body__inputs .icon {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  left: 3%;
  color: var(--lightsky-color);
  text-align: center;
}

.containerBody .contant_body_profile .contant_body__inputs .icon i {
  font-size: 2rem;
}

.containerBody .contant_body_profile .contant_body__inputs .input-field {
  border: 0.1rem solid rgba(255, 255, 255, 0.2);
    outline: 0;
    padding:2.5rem 4rem;
    width: 100%;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.4);
    font-size: 1.6rem;
    transition: opacity 1s ease;
    background: transparent;
    color: var(--white-color);
    box-shadow: inset 0px 1px 20px  rgba(116, 147, 250, 0.27);
}

.containerBody .contant_body_profile .contant_body__inputs h2 {
  color: green;
}

.user_control-btn .user_btn {
  padding: 0.3rem 1rem;
  font-size: 1.4rem;
  border: 0.1rem solid #3c1e6e;
  border-radius: 0.5rem;
  color: var(--dark-blue);
  background: var(--lightsky-color);
}

.user_control-btn .user_btn:hover {
  background: #12ACF8;
}

.eroor_text {
  color: red !important;
}


#subscriptionMobile_confirmation {
  width: 375px;
  margin: auto;
}

#subscriptionMobile_confirmation .header_title {
  text-align: center;
  margin: 30px auto 40px;
  width: 180px;
}

#subscriptionMobile_confirmation .header_title div {
  font-size: 28px;
  color: #3c1e6e;
}

#subscriptionMobile_confirmation .header_title span {
  font-size: 16px;
  border: 1px solid #3c1e6e;
  display: block;
  height: 32px;
  font-family: "Roboto", sans-serif;
  font-weight: 600;
  line-height: 32px;
  border-radius: 3px;
  letter-spacing: 1px;
  margin-top: 10px;
}

#subscriptionMobile_confirmation div.choose_plan {
  font-family: "Roboto", sans-serif;
  margin: 10px 10px 0px;
  display: grid;
  text-align: center;
}

#subscriptionMobile_confirmation div.choose_plan span {
  font-size: 18px;
  font-weight: 600;
}

#subscriptionMobile_confirmation div.choose_plan small {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 2rem;
}

#subscriptionMobile_confirmation div.choose_plan .choose_plan__logo {
  margin: 20px auto;
  display: grid;
}

#subscriptionMobile_confirmation div.choose_plan .choose_plan__logo img {
  width: 114px;
  height: 108px;
  margin: auto;
}

#subscriptionMobile_confirmation div.choose_plan .choose_plan__logo span {
  color: #3c1e6e;
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  margin: 10px auto;
}

#subscriptionMobile_confirmation .package__info {
  margin: 0px auto;
  display: block;
}

#subscriptionMobile_confirmation .package__info .package__info__package {
  font-family: "Roboto", sans-serif;
  width: 140px;
  margin: auto;
}

#subscriptionMobile_confirmation .package__info .package__info__package div {
  margin: 8px auto;
}

#subscriptionMobile_confirmation .package__info .package__info__package span {
  font-size: 14px;
  margin-left: 5px;
}

#subscriptionMobile_confirmation .package__info .package__info__btn {
  width: 215px;
  margin: 20px auto 20px;
}

#subscriptionMobile_confirmation .package__info .package__info__btn div {
  display: flex;
}

#subscriptionMobile_confirmation .package__info .package__info__btn div div {
  background: #3c1e6e;
  border-radius: 3px 0 0 3px;
  border: 1px solid #3c1e6e;
  width: 83px;
  height: 43px;
  font-size: 12px;
  color: #ffffff;
}

#subscriptionMobile_confirmation .package__info .package__info__btn div div img {
  width: 24px;
  height: 22px;
  align-self: center;
  margin-left: 5px;
}

#subscriptionMobile_confirmation .package__info .package__info__btn div div span {
  font-size: 16px;
  margin: 5px;
  align-self: center;
}

#subscriptionMobile_confirmation .package__info .package__info__btn div input {
  height: 43px;
  width: 100%;
  border-radius: 0 3px 3px 0;
  border: 1px solid #3c1e6e;
  border-left: none;
  font-size: 18px;
}

#subscriptionMobile_confirmation .package__info .package__info__btn div input:focus-visible {
  outline: none;
}

#subscriptionMobile_confirmation .package__info .package__info__btn div button {
  width: 170px;
  height: 32px;
  margin: 20px auto 30px;
  background: #3c1e6e;
  color: #ffffff;
  border-radius: 3px;
  font-size: 16px;
  cursor: pointer;
  letter-spacing: 1px;
  border: none;
}

#subscriptionMobile_confirmation .package__info .package__info__btn div button:hover {
  background: #12ACF8;
}

#subscriptionMobile_confirmation .package__info .package__info__btn div button:focus {
  outline: none;
}

#subscriptionMobile_confirmation .package__info .package__info__btn div button:hover {
  cursor: pointer;
}

#subscriptionMobile_confirmation .package__info .package__info__footer {
  width: 250px;
  margin: 10px auto;
  font-family: "Roboto", sans-serif;
}

#subscriptionMobile_confirmation .package__info .package__info__footer .package__info__footer__checkbox {
  font-size: 16px;
  position: relative;
  display: flex;
  align-items: center;
  /* Hide the browser's default checkbox */
  /* Create a custom checkbox */
  /* On mouse-over, add a grey background color */
  /* When the checkbox is checked, add a blue background */
  /* Create the checkmark/indicator (hidden when not checked) */
  /* Show the checkmark when checked */
  /* Style the checkmark/indicator */
}

#subscriptionMobile_confirmation .package__info .package__info__footer .package__info__footer__checkbox label {
  font-size: 14px;
  margin-left: 20px;
}

#subscriptionMobile_confirmation .package__info .package__info__footer .package__info__footer__checkbox .container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

#subscriptionMobile_confirmation .package__info .package__info__footer .package__info__footer__checkbox .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: #eee;
  border: 1px solid #3c1e6e;
}

#subscriptionMobile_confirmation .package__info .package__info__footer .package__info__footer__checkbox .container:hover input~.checkmark {
  background-color: #ccc;
}

#subscriptionMobile_confirmation .package__info .package__info__footer .package__info__footer__checkbox .container input:checked~.checkmark {
  background-color: #3c1e6e;
}

#subscriptionMobile_confirmation .package__info .package__info__footer .package__info__footer__checkbox .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

#subscriptionMobile_confirmation .package__info .package__info__footer .package__info__footer__checkbox .container input:checked~.checkmark:after {
  display: block;
}

#subscriptionMobile_confirmation .package__info .package__info__footer .package__info__footer__checkbox .container .checkmark:after {
  left: 7px;
  top: 3px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

#subscriptionMobile_confirmation .package__info .package__info__footer .package__info__footer__note {
  font-size: 14px;
  width: 215px;
  margin: 8px auto;
  text-align: justify;
}

/*# sourceMappingURL=main.css.map */

/* =========================== */
/* MEDIA QUERY */
/* =========================== */
@media only screen and (max-width:1440px) {
  #square_animation {
    height: 500px;
  }
  .featuredCard {
    gap: 2rem;
    padding: 1.5rem;
    
}
.logo_image
{
  width: 400px;
}
.card_body .info_content p {
  font-size: clamp(1.2rem, 5vw, 1.4rem);
  padding: 0rem 0rem;
}
.container_small {
  max-width: 90%;
}
.image {
  height: 58%;
}
  .section-top {
    padding: 5rem 0 0;
  }

  .single_slider-item {
    height: 450px;
  }

  .confetti-container {
    height: 150px;
  }

  .socail_media_character img {
    width: 400px;
  }

  #socail_media h1 {
    font-size: clamp(2rem, 5vw, 3rem);
  }

  .socail_media_character {
    top: -35px;
  }

  .reffer_img {
    width: 350px;
  }

  .reffer_invitaion_text h2 {
    font-size: clamp(2rem, 5vw, 2.5rem);
  }

  .reffer_invitaion_text h3 {
    font-size: clamp(2rem, 5vw, 2.5rem);
  }

  .reffer_invitaion_text .primary_btn {
    padding: 1rem 1rem;
    width: 180px;
    font-size: 1.8rem;
  }

  .mobile_gift img {
    width: 130px;
  }

  .refeer_frinds {
    justify-content: space-around;
    gap: 3rem;
  }

  .mt-5,
  .my-5 {
    margin-top: 2rem !important;
  }

  .prizes_card {
    width: 250px;
  }

  .prizes_card .prizes_img img {
    height: 250px;
  }
  .title {
    padding: 0rem 0 0rem;
}

  .common_padding {
    padding-top: 10rem;
  }

  .support-customer {
    height: 600px;
  }

  #support_contact {
    padding: 4rem 0;
  }

  .tournament_singlebanner {
    height: 650px;
  }

  .game_content {
    top: 2rem;
    transform: scale(0.8);
  }

  #howtoplayModal h1 {
    font-size: clamp(2rem, 5vw, 3rem);
  }

  .containerBody .contant_body_profile {
    height: 100vh;
    width: 340px;
  }

  .containerBody {
    padding-top: 3rem;
  }
}

@media (min-width: 1200px) {
  .custom_container {
    max-width: 100%;
    width: 100%;
    padding: 0 4rem;
  }

}


@media only screen and (min-width: 575.99px) {
  .modal_width {
    max-width: 560px;
  }

  .card-body {
    padding: 1.25rem 0.5rem;
  }

  div.choose_plan {
    margin: 10px 10px;
  }

  div.choose_plan .h5 {
    margin: 0 0 30px 8px;
  }

  div.choose_plan .plan_cards {
    display: flex;
    justify-content: space-around;
  }

  div.choose_plan .plan_cards .plan_card {
    width: 31%;
    height: 210px;
  }

  div.choose_plan .plan_cards .plan_card .package {
    font-size: 14px;
  }

  div.choose_plan .plan_cards .plan_card section {
    margin: 10px 10px;
  }

  div.choose_plan .plan_cards .plan_card section button {
    margin: 20px 0 0;
  }

  .playbtn__bannar {
    width: 100%;
  }
}

@media only screen and (min-width: 991.98px) {
  .modal_width {
    max-width: 620px;
  }

  div.choose_plan {
    margin: 10px 10px;
  }

  div.choose_plan .h5 {
    margin: 0 0 30px 10px;
  }

  div.choose_plan .plan_cards {
    display: flex;
    justify-content: space-around;
  }

  div.choose_plan .plan_cards .plan_card {
    width: 30%;
  }

  div.choose_plan .plan_cards .plan_card section {
    margin: 15px 20px;
  }

  .playbtn__bannar {
    width: 70%;
  }
}

@media screen and (max-width: 1024px) {
  .refferal_img img {
    width: 100%;
  }

  .mobile_gift img {
    display: none;
  }

  #referr_header .referral_content {
    padding-left: 0;
    text-align: center;
  }

  #referr_header .referral_content {
    text-align: center;
  }

  #referr_header .referral_content h3 {
    max-width: 500px;
    margin: 2rem auto;
    text-align: center;
    width: 100%;
  }

  #referr_header {
    position: relative;
    width: 100%;
    height: 600px;
    background: #F8F8F8;
    display: flex;

  }
}

@media screen and (max-width: 575.98px) {
  .card__wrapper .card__body {
    margin: 1rem 1rem !important;
  }
  #tournament_advertisement ul {
    width: 85%;
    margin: 0 auto;
}
.gamePlaybtn {

    text-align: center;
}
.accordion button .accordion-title {
    padding: 1em 2em 1em 0;
    font-size: 1.2rem;
}
.accordion .accordion-item {
    padding: 0.5rem 0rem;
}
  .top_card .rank_badge {
    margin-left: 0.5rem;
  }

  .top_card {
    gap: 0.5rem;
  }

  .support_text p {
    padding: 0 4rem;
  }

  .refeer_frinds {
    gap: 3rem;
  }

  .support_contact ul li a .icon {
    width: 4rem;
    height: 4rem;
  }
#Pages {
    padding: 4rem 0rem !important;
    min-height: 100vh;
}
  .support_contact ul li a {
    font-size: 2rem;
    gap: 1rem;
    margin-top: 1rem;

  }

  .prizes_box {
    display: none;
  }

  .prizes_slider {
    padding-left: 0 !important;
    padding: 0rem 0 2rem;

  }

  .prizes_slider .slick-dots {
    bottom: -14px;
  }

  .steps_card {
    padding: 1rem;
    min-width: 90%;
    margin: 0 auto 2rem;
  }

  .title {
    padding: 0rem 0 0rem;
  }
  .freegamecard .gameImg {
    height: 125px;
}
.freegamecard .game_name {
  bottom: 1.5rem;
  padding: 0 1rem;
  line-height: 1.2;
}
.freegamecard .game_name a {
  font-size: 1.4rem;
  font-weight: 600;
}
  .three_steps {
    padding: 3rem 0 0;
  }
  .pt-5, .py-5 {
    padding-top: 0rem!important;
}
.freegamecard .gameImg {
  height: 125px;
}
  .modalclose_btn {
    top: 10px;
    right: 10px;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 8px;
    font-size: 2rem;
  }

  .refferBox {

    padding: 2rem;
    margin: -32rem auto 0;
  }

  .refferBox h2 {
    font-size: clamp(2.5rem, 5vw, 3rem);
    margin: 2rem 0;
    text-align: center;
  }

  .refferBox #btn {

    left: -3px;
    width: 41%;
    font-size: 1rem;
  }

  .socail_share a {
    width: 35px;
    height: 35px;
  }

  .refferBox #inputBox {
    padding: 0.8rem 1rem;
    font-size: 1.1rem;
    border-radius: 5px;
  }

  .refferBox::after {
    background-position: -56px 46px;

  }

  #social-links ul {
    gap: 0rem;
  }

  .reffaral_dashboard {
    padding: 0 1rem 1rem 1rem;
  }

  .color_shape {
    display: none;
  }

  .refferal_img img {
    width: 80%;
  }

  #referr_header .referral_content {
    padding-left: 0;
    text-align: center;
  }

  .top_card-user {

    padding: 0.6rem 1rem 0.6rem 0rem;
  }

  .user_highscore .points {
    font-size: 1.6rem;
  }

  .top_card .rank_badge {
    transform: scale(0.8);
  }

  .user_name {
    display: flex;
    align-items: center;
    margin-left: 35px;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .user_name a {
    font-size: 1.4rem;
  }

  .profile_img {
    width: 30px;
    height: 30px;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2);
    gap: 1rem;
    margin-left: 0.5rem;
  }

  #tournament_prizes {
    padding: 0rem 0;
  }

  .rank-03 {
    z-index: 1;
    right: -12rem;
  }

  #tournament_prizes .prize_inner .prize_header .trophy_icon {
    font-size: 7rem;
    width: 10rem;
    height: 10rem;
    box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.1), 0 0 0 20px rgba(255, 255, 255, 0.1), 0 0 0 54px rgba(255, 255, 255, 0.1);
  }

  .prizes_ammount h4 {
    font-size: 2rem;
  }

  .trophy_board {
    padding: 1rem 1rem;
  }

  .trophy_board .trophy_icon i {
    font-size: 2.5rem;
  }

  .trophy_board .trophy_icon {
    width: 6rem;
    height: 6rem;
    padding: 1rem 0;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.68);

  }

  .trophy_board .rank_number {
    width: 4rem;
    height: 4rem;
    font-size: 1.6rem;
    font-weight: 500;
    top: -10px;
    right: -2rem;

  }

  .top_scorer {
    transform: scale(0.8);
  }

  #tournament_leaderborad {
    padding: 3rem 0 0;
  }

  #tournament_prizes .prize_inner .prize_header {
    padding: 2rem 1rem;
  }

  .primary_btn {
    padding: 1rem 1.5rem;
    font-weight: 600;
    width: 150px;
    font-size: 1.4rem;
    letter-spacing: 1px;
  }

  .bannar__body__text__description {
    font-size: 1.8rem;
    line-height: 30px;
    margin-top: 6px;
  }

  .bannar__body {
    height: 100vh;
    min-height: 100vh;
  }

  #tournament_deatils .primary_btn {
    padding: 1rem 1rem;
    font-weight: 600;
    width: 150px;
    font-size: 1.2rem;
  }

.play_btn {
    padding: 1rem 2rem;
    font-size: 1.6rem;
}

  .tournament_singlebanner {
    height: 75vh;
    min-height: 75vh;
  }

  .game_content {
    transform: scale(0.9);
  }

  .game_content .gameImg {
    width: 150px;
    height: 150px;
    border: 4px solid rgba(63, 135, 252, 0.686);
    box-shadow: 0 0 20px #3f89fc;

  }

  .user_profile {
    width: 110px;
    height: 110px;
  }

  #tournament_leaderborad .tournamnet_title h1::after {
    letter-spacing: 0.5rem;

  }

  .rank-02 {
    left: -12rem;
  }

  .entry_label {
    width: 80%;
    margin: 0 auto;
    font-size: 2rem;
  }

  .topic h2.question {
    padding-bottom: 20px;
  }

  main#questions {

    padding: 0 !important;
    margin-top: 0 !important;
  }

  .question {
    padding-top: 20px;
    padding-right: 25px;
    font-size: 12px;
    font-weight: 500;
  }

  .answer {
    font-size: 14px;
    margin-bottom: 10px;
  }

  .faq-t {
    top: -42px;
    right: 0;
  }

  .section-bottom {
    padding: 0 0 1rem;
  }

  .header_content h1 {
    font-size: clamp(2.5rem, 5vw, 5rem);
    margin-bottom: 1rem;
  }

  .mostPopular__title__text {
    font-size: clamp(2rem, 5vw, 5rem);
    margin-top: 2rem;
    margin-bottom: 1rem;
    text-align: center;
  }

  #questions .mostPopular__title__text {
    font-size: 17px;
    margin-top: 0%;
    margin-bottom: 2rem;
    text-align: center;
  }

  .subheading_common {
    font-size: 1.2rem;
    text-align: center;
  }

  .tournament_card {
    width: 95%;
    margin: 0 auto;
    margin-bottom: 2rem;

  }

  .card_body {
    padding: 2rem 0;
  }

  .card__wrapper .card__body .card__text {
    margin-left: 5px;
    line-height: 15px;
    font-size: 12px;
    margin-bottom: 0px !important;
  }

  .contact_us__position .contact_us__inpute__body__form__btn {
    width: 64%;
    padding: 4% 0%;
    font-size: 17px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: block;
    margin: 0 auto;
  }

  .slick-prev::before,
  .slick-next::before {
    padding: 9px 10px 6px 9px;
    line-height: 0;
    font-size: 15px !important;
  }

  .slick-next:before {
    content: url(../img/Vector.svg);
  }

  .slick-prev::before {
    content: url(../img/Group.svg);
  }

  .slick-next {
    right: 18px !important;
    z-index: 9999;
  }

  .slick-prev {
    left: 15px !important;
    z-index: 1;
  }


  .more_icon {
    width: 30px;
    margin: auto;
    margin-top: 20px;
  }

  .mostPopular__title__text--font-size {
    font-size: 20px;
  }

  .lock {
    overflow: unset;
  }

  .box {
    left: 0;
    width: 100%;
  }

  .card__height {
    height: 175px;
  }

  .slider__item--icon {
    width: 60px !important;
  }

  .game__description__body {
    padding: 3rem;
  }

  .game__description__body__title {
    font-size: 22px;
    line-height: 25px;
    margin: 1rem 0rem;
  }

  .game__description__body__text {
    font-size: 12px;
    line-height: 18px;
  }

  .contact_us__position {
    margin-left: 0%;
  }

  .contact_us__position .contact_us__inpute__body {
    margin: 0% !important;
  }

  .contact_us__position .m {
    margin-top: 4rem !important;
    margin-bottom: 4.5rem !important;
  }

  .faq__list {
    margin: 0% !important;
    font-size: 12px !important;
    line-height: 16px !important;
  }

  .iframe__body__iframe {
    height: 340px;
  }

  .iframe__body__t__description p {
    float: unset;
  }

  .mostPopular {
    padding: 15px 0px;
  }
}

@media only screen and (max-width:1536px) {
  .card_full_width {
    background-position: 0;
  }

  .game_content {
    top: 2rem;
    transform: scale(0.8);
  }

  .tournament_singlebanner {
    padding-top: 4rem;
  }

  .socail_media_character img {
    width: 490px;
  }

  #socail_media h1 {
    font-size: clamp(2rem, 5vw, 3.5rem);
  }
}

@media only screen and (max-width:1446px) {
  .card_full_width {
    background-position: 0;
  }
}

@media only screen and (max-width:1366px) {
  .tournament_card .card_img .cover_img {
    height: 200px;
  }
  .container_small {
    max-width: 90%;
    margin: 0 auto;
}
.logo_image {
  width: 300px;
}
.featuredCard {
  gap: 2rem;
  padding: 1.5rem;
  margin-bottom: 2rem;

}
.featuredCard .icon {
  width: 100px;
  height: 100px;
}
.featuredCard .icon img {
  width: 60px;
  height: 60px;
}
  #login_page {
    height: 100vh;
    min-height: 600px;
    max-height: 100vh;
    padding-top: 5rem;
  }
  .image {
    height: 57%;
  }
  .reffer_img img {
    width: 300px;
  }

  .mobile_gift img {
    width: 125px;
  }

  .reffer_invitaion_text .primary_btn {
    padding: 1rem 0rem;
    width: 180px;
    font-size: 2rem;
    font-weight: 600;
  }

  .prizes_box {
    width: 100px;
  }

  .prizes_slider {
    padding-left: 10rem;
  }

  #header {
    height: 60px;
  }

  .navbar {
    transform: scale(0.9);
  }

  .card_body .play_now-btn .primary_btn {
    width: 130px;
    font-size: 1.2rem;
  }

  .single_slider-item {
    height: 400px;
  }

  .section {
    padding: 3rem 0;
  }

  .entry_fee h3 {
    font-size: clamp(1.4rem, 5vw, 1.6rem);
  }

  .tournament_card .date {
    font-size: 1.4rem;
  }

  .support-customer {
    display: flex;
    height: 500px;
    align-items: center;
  }
}

@media only screen and (max-width:1280px) {
  .playbtn__bannar {
    width: 80%;
  }

.logo_image 
{
  width: 200px;
}
.image {
  height: 56%;
}
.logo {
  height: 70px;
  width: 70px;
  bottom: 42%;
  right: 25px;

}
  .game_content {
    justify-content: flex-start;
    transform: scale(0.85);
    padding-top: 3rem;
  }
}

@media screen and (max-width: 1199.98px) {
  .card__wrapper .card__body .card__text {
    font-size: 16px;
    line-height: 10px;
  }

  #bounceText {
    height: 94px;
  }

  #header .navbar .logo__img {
    margin-right: 20px;
  }

  .box .lock__body .lock__icon svg {
    width: 200px;
  }
}

@media screen and (max-width: 992px) {
  .navbar-collapse {
    display: flex !important;
    flex-basis: 0 !important;
    justify-content: space-between;
  }

  #header .navbar .header__navbar-collapse {
    flex-grow: 0;
  }

  .navbar-nav,
  .header__form {
    display: none !important;
  }

  .header__sidebar {
    display: block !important;
  }

  #header .navbar #sidebar__toggle--btn {
    cursor: pointer;
    display: block;
    margin-left: auto;
    transition: 0.3s ease;
  }

  .playbtn__bannar {
    width: 90%;
  }
}

@media screen and (max-width: 991.98px) {
  .card__wrapper .card__body .card__text {
    font-size: 16px;
  }
  .logo_image 
  {
    width: 150px;
  }
  .steps_card {
    margin-bottom: 1.5rem;
  }
  .featuredCard 
  {
    flex-direction: column;
    text-align: center;
  }
  .socail_media_character img {
    width: 100%;
  }

  #social-links ul li {
    width: 40px;
    height: 40px;
    line-height: 40px;
  }

  div#social-links ul li a {
    font-size: 14px !important;
  }

  .socail_media_character {
    position: relative;
    top: -20px;
  }

  #socail_media {
    padding: 5rem 0;
  }

  .socail_media_inner {
    justify-content: center;
  }

  .card_body {
    padding: 1rem 2rem 2rem;
  }

  .prize_card .prizes_img img {
    width: 150px;
    height: 150px;
  }

  .single_game_prizes .prizes_inner {
    padding: 4rem 0;
  }

  .support-customer img {
    display: none;
  }

  .support_text {
    padding-top: 16rem;
    text-align: center;
  }

  .support-customer {
    height: 350px;
  }

  #support_contact {
    padding: 3rem 0;
    font-size: 1.6rem;
  }

  .support_contact {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .slider_content {
    width: 90%;
    margin: 0 auto;
  }
  

  .single_slider-item {
    height: 380px;
  }

  .bannar__body__text__title {
    font-size: 6rem;
    color: #ffffff;
    line-height: 60px;
  }

  .bannar__body__text__description {
    font-size: 2.5rem;
    line-height: 50px;
    margin-top: 8px;
  }

  .bannar__body__btn button {
    font-size: 13px;
    padding: 10px 50px;
    margin-top: 40px;
  }

  .card__height {
    height: 210px;
  }

  .bannar__subcription__body {
    padding: 5rem;
  }

  .bannar__subcription__body__text {
    width: 60%;
  }

  .contact_us__position {
    margin-left: 15%;
  }

  .contact_us__position .contact_us__inpute__body {
    margin: 0% 18%;
  }

  .faq__list--margin {
    margin: 0% 5% !important;
  }

  .faq__list__item__discription {
    font-size: 12px;
  }

  .faq__list {
    font-size: 15px !important;
  }

  .faq__list--margin .faq__list__item .faq__icon img {
    width: 16px;
  }
}


@media screen and (max-width: 768px) {
  #support_header {
    background-position: 50% 100%;
  }
  #tournament_advertisement ul li h4 {
    font-size: 2rem;
    font-weight: 400;
}
.logo_image 
{
  width: 120px;
}
.border_btn 
{
  display: none;
}

  .single_game_prizes .prizes_inner {
    flex-direction: column;
  }

  .prize_card:nth-child(even) {
    transform: scale(1);
  }

  .prize_card {
    margin-bottom: 2rem;
    width: 80%;
  }

  .support_contact ul li a {
    font-size: 1.6rem !important;
  }
  .support_contact ul li:hover a 
  {
    color: #fff;
    text-decoration: underline;
  }
  .play_icon {
    transform: translate(-50%, -50%) scale(0.6);
  }

  .support_btn {
    font-size: 1.6rem;
    margin: 0 auto;
    display: block;
    width: 134px;
}

  .bannar__body__text__title {
    font-size: 4rem;
    color: #ffffff;
    line-height: 56px;
  }

  .container {
    max-width: 98%;
  }

  .bannar__body__text__description {
    font-size: 2rem;
    line-height: 40px;
    margin-top: 6px;
  }

  .bannar__body__btn button {
    font-size: 13px;
    padding: 10px 50px;
    margin-bottom: 20px;
    margin-top: 10px;
    border: 1px solid #3c1e6e;
    margin-right: 1rem;
  }

  .playbtn__bannar {
    width: 100%;
  }

  .slider__card__title__text {
    font-size: 17px;
  }

  .bannar__subcription__body__text {
    width: 70%;
  }

  .bannar__subcription__body__text__title {
    font-size: 30px;
  }

  .about_us__title__text {
    font-size: 25px;
  }

  .about_us__describson__body__text {
    font-size: 14px;
    margin: 4rem 0rem;
  }

  .contact_us__position {
    margin-left: 0%;
  }

  .contact_us__position .contact_us__inpute__body {
    margin: 0% 0% !important;
  }
}

@media screen and (max-width: 768px) {
  .header__notification {
    width: 350px !important;
  }
  .hero 
  {
    width: 95%;
  }
  #hero_part {
    background-position: 52% 100%;
    height: 70vh;
}
  .hero_btns 
  {
    flex-direction: column;
  }
  .hero_btns .btn 
  {
    font-size: 1.2rem;
  }
  .google_verify {
    width: 230px;
    transform: scale(0.85);
}
.subheading_common {
    font-size: 1.2rem;
    text-align: center;
    max-width: 250px;
    margin: 0 auto 2rem auto;
}
  .bangla_font {
    font-size: clamp(1.6rem, 5vw, 2rem) !important;
}
.single_slider-item::before {
  background: linear-gradient(100deg, rgba(0, 0, 0, 1), transparent 164%);
}
  .featuredCard {
    flex-direction: column;
  }
  .slider_content h1 a {
    margin-bottom: 0rem;
  }
  #tournament_advertisement ul {
    margin-left: 0rem;
}
.hero-btn {
  padding: 10px 25px;
  font-size: 1.4rem;
  text-align: center;
  margin: 0 auto;
}
  .slider_content .primary_btn {
    width: 118px;
    letter-spacing: 0.1rem;
    font-size: 14px;
    padding: 0.8rem;
}
.advertisement_text {
  padding-top: 4rem;
}
  .mobile_footer {
    display: block;
  }

  .slider__items {
    padding: 0 0;
  }

  .support_info {
    margin-left: 0;
  } 
  
#tournament_card {
    padding: 0rem 0 3rem;
    justify-content: center;
    align-items: center;
    display: flex;
    width: 100%;
}

h1.mostPopular__title__text svg {
  width: 25px;
}
}


@media screen and (max-width: 576px) {
  .footer__end__body .copyRight {
    margin-top: 15px;
  }
  .title_bar img {
    width: 60px;
}
.slider_content {
  transform: scale(0.5);
  bottom: 4rem;
  right: 3rem;
}
.date p {
  font-size: 13px;
}
.hero {
  width: 95%;
  flex-direction: column;
  height: auto;
}
.small_card_content {
  padding: 3rem 0;
}
.small_card_img {
  width: 100%;
  height: 250px;
}
.slider_content .primary_btn {
  width: 110px !important;
}
  .advertisement_graphics img {
    width: 100%;
}
  .footer__end__body__form .lng__selection {
    padding-right: 4rem;
  }

  .mobile_gift {
    display: none;
  }

  .section {
    padding: 1rem 0;
  }

  #referr_header {
    height: 800px;
  }

  .playbtn__bannar {
    width: 100%;
  }

  #header .header__sidebar .subscription__section button {
    font-size: 16px;
    position: relative;
    left: 15%;
    font-weight: 500;
    line-height: 16px;
    border-radius: 5px;
    padding: 10px 27px;
  }

  .sm-hide {
    display: none !important;
  }

  .slider_content .primary_btn {
    display: block !important;
    position: absolute;
    left: 2rem;
    bottom: 2rem;
    font-size: 12px;
    width: 130px;
  }

  .single_slider-item {
    height: 180px;
    background-size: 500px;
    background-position: 0 0;
  }
  .free_tournament_illustration img {
    width: 100%;
}
}


@media only screen and (max-width: 575.98px) {
  .modal_width {
    max-width: 500px;
    margin: auto;
  }
  #tournament_advertisement ul li h4 {
    font-size: 1.6rem;
}
.advertisement_graphics img {
  display: none;
}
  .free_tournament_content  
  {
    padding-left: 0;
  }
  .prizes_card {
    width: 175px;
}
.prizes_card .prizes_img img {
  height: 180px;
}
.game_prizes {
  padding: 0rem 0 3rem;
  text-align: center;
}
.containerBody {
    min-height:80vh !important;
    height: 75vh !important;
    padding: 0rem 0;
    margin-top: 3rem;
}
#tournament_advertisement ul {
  width: 90%;
  margin: 0 auto;
}
.game_prizes .prizes_inner {
    gap: 1rem;
}
  .line_animation{
    width: 80px;
    height:120px;
    transform: scale(0.5);
  }
  .games_infoormation {
    width: 90%;
}
.navbar-brand img {
  width: 80px;
  position: relative;
  top: 1rem;
}
.game_content {
  top: 0;
  transform: scale(1);
  padding-top: 0rem;
}
  .line{
    width: 5px;
    height: 10px;
    margin: 0px 3px;
  }
  .logo {
    right: 25px;
}
  .image {
    height: 57%;
}
  .advertisement_text h1
  {
    text-align: center;
  }
  .slick-prev, .slick-next 
  {
    display: none !important;
  }
 

  #howtoplayModal ol li {
    font-size: 1.6rem;
    color: #222;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  #howtoplayModal ol {
    display: block;
    list-style-type: decimal !important;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: 0;
    margin-right: 0;
    padding-left: 10px !important;
  }

  .card_body .info_content p {
    text-align: center !important;
  }

  section#header .custom_container {
    width: 100%;
  }

  .sign_in_btn {
    display: none;
  }

  .section-top {
    padding: 0rem 0 0;
  }

  #login_page {
    height: auto;
    min-height: 85vh;
    max-height: 100vh;
    padding-top: 3rem;
  }

  .card_full_width {
    height: 350px;
    overflow: hidden;
  }

  .comming_soon {
    position: absolute;
    top: 1rem;
    right: -2rem;
    z-index: 100;
  }

  .prelanching_text {
    margin-top: 2.3rem !important;
  }

  .game_content .game_info .game_date .date {

    justify-content: space-around;
    font-size: 1.6rem;
  }

  .sidebar-content .profile_pic {
    text-align: center;
    margin: 0 auto;
  }

  .reffer_invitaion_text .primary_btn {
    padding: 1rem 2rem;
    width: 180px;
    font-size: 1.8rem;
    font-weight: 600;

  }

  .apps_mockup img {
    width: 200px;
    margin-top: 3rem;
  }

  .user_name {
    text-align: center;
    justify-content: center;
  }

  .sidebar-content p {
    text-align: center;
  }

  .user_profile .badge_img {
    right: -1px;
    width: 40px;
    bottom: -22px;
  }

  .user_profile {
    padding: 0.2rem;
    box-shadow: 0 0 0 5px rgba(61, 30, 110, 0.205), 0 0 5px 13px rgba(61, 30, 110, 0.205);
  }

  #top_10 {
    width: 100%;
    padding: 2rem;
  }

  .top_scorer {
    gap: 2rem;
    padding: 0rem 0;
  }

  #login_page form {
    padding: 0.3rem;
    margin: 1rem auto 5rem;
    width: 90%;
  }

  .card_body .game_title a {
    font-size: 1.6rem;
  }

  .tournament_card .date {
    font-size: 1.1rem;
    margin-bottom: 2rem;
  }

  .tournament_card .date img {
    width: 18px;
  }

  .card_body {
    padding: 1rem 1rem 2rem;
  }

  .tournament_card .card_img .cover_img {
    height: 150px;
    filter: saturate(1.2);
  }

  .card_footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    gap: 1.1rem;
  }

  .card_body .play_now-btn .primary_btn {
    width: 130px;
    font-size: 1.1rem;
  }

  .mostPopular__title__text img {
    width: 30px;
  }
  .freegamecard:hover .playbtn {
    top: 50%;
    transform: translate(-50%,-50%) scale(0.7);
    opacity: 1;
    z-index: 12;
}
.common_padding {
    padding-top: 3rem;
}

}

.navbar-brand {
  margin-right: 0 !important;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}


.pb-80px {
  padding-bottom: 0px !important;
}

#header .header__sidebar {
  top: 0;
}

div.choose_plan {
  margin: 10px 10px;
}

#subscriptionMobile .header_title span {
  height: auto;
  font-weight: 500;
  padding: 3px;
  border-radius: 3px;
  margin-top: 5px;
  letter-spacing: 1.1px;
  color: #55328f;
}

div.choose_plan .h5 {
  margin: 0 10px 20px;
}

.card__wrapper .card__body .card__text {
  font-size: 14px !important;
}

.mostPopular__title__text--font-size {
  font-size: 25px;
}



@media screen and (max-width: 440px) {
  .card__height {
    height: 108px;
  }

  #referr_header {
    height: 750px;
  }

  #faq .container {
    padding-right: 10px !important;
    padding-left: 10px !important;
  }

  #top_10 {
    padding: 1rem;
  }

  .containerBody .contant_body_signin .contant_body__logo {
    width: 150px;
    margin: auto;
  }

  .toggle-password {
    top: 47%;
  }

  .card__wrapper .card__body .card__text {
    font-size: 12px !important;
  }

  .contant_body__inputs {
    display: block;
    margin: 10px auto 0;
  }
  .containerBody #contant_body {
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .containerBody .contant_body_signin .contant_body__contant {
    margin-top: 10px !important;
  }

  .signUp .contant_body_signin .contant_body__logo {
    margin: 3rem auto !important;
  }

  .signin__title {
    display: block !important;
    margin-top: 2rem !important;
    font-size: 14px !important;
  }

  .contant_body__inputs div label {
    font-size: 14px !important;
  }

  .account_policy span {
    font-size: 1.4rem !important;
  }

  .account_policy a {
    font-size: 1.4rem !important;
  }

  #subscriptionMobile_confirmation .package__info .package__info__btn div button {
    width: 120px !important;
    height: 35px !important;
    margin: 20px auto 20px !important;
    font-size: 16px !important;
  }

  #subscriptionMobile_confirmation {
    width: 100% !important;
  }

  .containerBody .contant_body_signin {
    height: 100vh !important;
    width: 90% !important;
    background-color: transparent;
    margin: auto;
    margin-top: 0px;
  }

  #signIn {
    margin-top: 40px;
  }

  .contant_body__inputs div input {
    height: 40px !important;
    margin-bottom: 10px !important;
    font-size: 14px !important;
  }

  .contant_body__inputs div button {
    height: 40px !important;
    font-size: 16px !important;
    width: 140px !important;
    margin: 15px auto !important;
  }

  .containerBody .contant_body_profile .contant_body__inputs .input-field {
    text-indent: 20px !important;
    font-size: 13px !important;
  }

  #subscriptionMobile {
    width: 100% !important;
  }

  .containerBody .contant_body_profile .contant_body__inputs div input {
    height: 40px !important;
    margin-bottom: 10px !important;
  }

  .containerBody .contant_body_profile .contant_body__inputs .icon i {
    font-size: 1.6rem !important;
  }

  .containerBody .contant_body_profile .contant_body__logo img {
    height: 100px !important;
    width: 100px !important;
  }

  .containerBody .contant_body_profile .contant_body__logo p {
    font-size: 1.6rem !important;
  }

  .containerBody .contant_body_profile .contant_body__logo small {
    font-size: 1.4rem !important;
  }

  .user_control-btn .user_btn {
    font-size: 1.2rem !important;
  }

  .containerBody .contant_body_profile .contant_body__inputs {
    width: 90%;
  }

  .containerBody .contant_body_profile .contant_body__inputs div button {
    height: 40px !important;
    font-size: 16px !important;
    width: 150px !important;
  }

  #subscriptionMobile_confirmation {
    width: 100%;
  }

  .slider__item--icon {
    width: 40px !important;
  }

  #subscriptionMobile_confirmation div.choose_plan .choose_plan__logo img {
    width: 75px !important;
    height: 75px !important;
  }

  #subscriptionMobile_confirmation div.choose_plan .choose_plan__logo {
    margin: 0 auto !important;
  }

  .slider__card__title {
    padding: 0 !important;
    bottom: 0px !important;
  }

  .slider__card__title__text {
    margin-bottom: 0;
    padding: 0;
    font-size: 1rem !important;
    margin-left: 8%;
  }
  .games_content {
    margin-top: 9rem;
}
.games_content .games_content_header {
    padding: 1rem;
}
.game-iframe {
    width: 100%;
    height: 60vh;
    border-radius: 15px 15px 0 0;
}
}

@media screen and (max-width:400px) {
  .bannar__body {

    animation: moveBg 80s linear infinite alternate;
    /* background: rgb(60 30 110 / 92%); */
  }

  .reffer_invitaion_text h2 {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 600;
    color: #3C1E6E;
    margin-bottom: 1rem;
  }

  .inputBox {
    margin-bottom: 0.5rem;
  }

  .bannar__body__btn button {
    font-size: 16px;
    padding: 10px 0;
    width: 175px;
    height: 50px;

  }

  .support_info::after {
    height: 70px;
    border-bottom: 2px solid #fff2;
  }

  .support_contact ul li a .icon {
    width: 3rem;
    height: 3rem;

  }

  .support_contact ul li a .icon i {
    color: #000;
    font-size: 1.6rem;
  }

  .support_contact ul li a {
    font-size: 2rem;
    gap: 1rem;
    margin-top: 1rem;
  }

  .support_info {
    height: 320px;
  }

  .card-body {
    padding: 1.25rem 0.5rem;
  }

  #faq {
    padding: 2rem 0 2rem;
  }

  #header .header__sidebar--listItems {
    padding: 50px 0px 20px;
  }

  .faq .card {
    width: 100%;
    margin-left: 0;
    font-size: 14px;
    margin-bottom: 2rem;
  }

  .container {
    padding-right: 20px !important;
    padding-left: 20px !important;
  }

  .contact_us__position .contact_us__inpute__body__form__btn {
    width: 40%;
    padding: 2.3% 0%;
    font-size: 16px;
  }

  .eyes::after,
  .eyes::before {
    width: 10px;
    height: 10px;

  }

  .about_us__describson__body__text {
    font-size: 14px;
    margin: 0rem 0rem;
    text-align: justify;
  }

  .badge {
    transform: scale(1.2);
  }

  .sm-hide {
    display: none;
  }

}

@media screen and (max-width: 375px) {
  .box {
    width: 100%;
  }
.prizes_card {
    width: 160px;
}
  .card__wrapper .card__body .card__text {
    font-size: 13px;
  }

  .card_body .info_content p {
    text-align: center !important;
  }
}

@media screen and (max-width: 365px) {
  .container {
    padding-right: 10px !important;
    padding-left: 10px !important;
  }

  #header .navbar .logo__img {
    margin-right: 0 !important;
    width: 80px;
  }

  .bannar__body__btn button {
    font-size: 16px;
    padding: 10px 0;
    width: 175px;
    height: 50px;

  }

  #profile_pic {
    width: 30px;
    height: 30px;
    margin-left: 1rem;
  }

  .custom_btn {
    padding: 0.5rem 1.5rem;
    font-size: 14px !important;
  }
}

@media screen and (max-width: 340px) {
  .single_slider-item {
    height: 200px;
    background-position: 70% center;
  }
}

@media screen and (max-width: 312.98px) {
  .playbtn__bannar {
    height: 30rem;
  }
}