/* @import url("../fonts/stylesheet.css");
@import url("../fonts/all.css"); */

@import url("https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@400..900&family=Cormorant:ital,wght@0,300..700;1,300..700&family=Noto+Sans+Arabic:wght@100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Naskh+Arabic:wght@400..700&display=swap");
/*
@import url("../css/bootstrap.min.css");
*/

:root {
  --color-red: #f44336;
  --color-red-50: #ffebee;
  --color-red-100: #ffcdd2;
  --color-red-200: #ef9a9a;
  --color-red-300: #e57373;
  --color-red-400: #ef5350;
  --color-red-500: var(----color-red);
  --color-red-600: #e53935;
  --color-red-700: #d32f2f;
  --color-red-800: #c62828;
  --color-red-900: #b71c1c;
  --color-red-a100: #ff8a80;
  --color-red-a200: #ff5252;
  --color-red-a400: #ff1744;
  --color-red-a700: #d50000;

  --color-pink: #e91e63;
  --color-pink-50: #fce4ec;
  --color-pink-100: #f8bbd0;
  --color-pink-200: #f48fb1;
  --color-pink-300: #f06292;
  --color-pink-400: #ec407a;
  --color-pink-500: var(--color-pink);
  --color-pink-600: #d81b60;
  --color-pink-700: #c2185b;
  --color-pink-800: #ad1457;
  --color-pink-900: #880e4f;
  --color-pink-a100: #ff80ab;
  --color-pink-a200: #ff4081;
  --color-pink-a400: #f50057;
  --color-pink-a700: #c51162;

  --color-purple: #9c27b0;
  --color-purple-50: #f3e5f5;
  --color-purple-100: #e1bee7;
  --color-purple-200: #ce93d8;
  --color-purple-300: #ba68c8;
  --color-purple-400: #ab47bc;
  --color-purple-500: var(--color-purple);
  --color-purple-600: #8e24aa;
  --color-purple-700: #7b1fa2;
  --color-purple-800: #6a1b9a;
  --color-purple-900: #4a148c;
  --color-purple-a100: #ea80fc;
  --color-purple-a200: #e040fb;
  --color-purple-a400: #d500f9;
  --color-purple-a700: #a0f;

  --color-deep-purple: #673ab7;
  --color-deep-purple-50: #ede7f6;
  --color-deep-purple-100: #d1c4e9;
  --color-deep-purple-200: #b39ddb;
  --color-deep-purple-300: #9575cd;
  --color-deep-purple-400: #7e57c2;
  --color-deep-purple-500: var(--color-deep-purple);
  --color-deep-purple-600: #5e35b1;
  --color-deep-purple-700: #512da8;
  --color-deep-purple-800: #4527a0;
  --color-deep-purple-900: #311b92;
  --color-deep-purple-a100: #b388ff;
  --color-deep-purple-a200: #7c4dff;
  --color-deep-purple-a400: #651fff;
  --color-deep-purple-a700: #6200ea;

  --color-indigo: #3f51b5;
  --color-indigo-50: #e8eaf6;
  --color-indigo-100: #c5cae9;
  --color-indigo-200: #9fa8da;
  --color-indigo-300: #7986cb;
  --color-indigo-400: #5c6bc0;
  --color-indigo-500: var(--color-indigo);
  --color-indigo-600: #3949ab;
  --color-indigo-700: #303f9f;
  --color-indigo-800: #283593;
  --color-indigo-900: #1a237e;
  --color-indigo-950: #0c1255;
  --color-indigo-a100: #8c9eff;
  --color-indigo-a200: #536dfe;
  --color-indigo-a400: #3d5afe;
  --color-indigo-a700: #304ffe;

  --color-blue: #2196f3;
  --color-blue-50: #e3f2fd;
  --color-blue-100: #bbdefb;
  --color-blue-200: #90caf9;
  --color-blue-300: #64b5f6;
  --color-blue-400: #42a5f5;
  --color-blue-500: var(--color-blue);
  --color-blue-600: #1e88e5;
  --color-blue-700: #1976d2;
  --color-blue-800: #1565c0;
  --color-blue-900: #0d47a1;
  --color-blue-a100: #82b1ff;
  --color-blue-a200: #448aff;
  --color-blue-a400: #2979ff;
  --color-blue-a700: #2962ff;

  --color-light-blue: #03a9f4;
  --color-light-blue-50: #e1f5fe;
  --color-light-blue-100: #b3e5fc;
  --color-light-blue-200: #81d4fa;
  --color-light-blue-300: #4fc3f7;
  --color-light-blue-400: #29b6f6;
  --color-light-blue-500: var(--color-light-blue);
  --color-light-blue-600: #039be5;
  --color-light-blue-700: #0288d1;
  --color-light-blue-800: #0277bd;
  --color-light-blue-900: #01579b;
  --color-light-blue-a100: #80d8ff;
  --color-light-blue-a200: #40c4ff;
  --color-light-blue-a400: #00b0ff;
  --color-light-blue-a700: #0091ea;

  --color-cyan: #00bcd4;
  --color-cyan-50: #e0f7fa;
  --color-cyan-100: #b2ebf2;
  --color-cyan-200: #80deea;
  --color-cyan-300: #4dd0e1;
  --color-cyan-400: #26c6da;
  --color-cyan-500: var(--color-cyan);
  --color-cyan-600: #00acc1;
  --color-cyan-700: #0097a7;
  --color-cyan-800: #00838f;
  --color-cyan-900: #006064;
  --color-cyan-a100: #84ffff;
  --color-cyan-a200: #18ffff;
  --color-cyan-a400: #00e5ff;
  --color-cyan-a700: #00b8d4;

  --color-teal: #009688;
  --color-teal-50: #e0f2f1;
  --color-teal-100: #b2dfdb;
  --color-teal-200: #80cbc4;
  --color-teal-300: #4db6ac;
  --color-teal-400: #26a69a;
  --color-teal-500: var(--color-teal);
  --color-teal-600: #00897b;
  --color-teal-700: #00796b;
  --color-teal-800: #00695c;
  --color-teal-900: #004d40;
  --color-teal-a100: #a7ffeb;
  --color-teal-a200: #64ffda;
  --color-teal-a400: #1de9b6;
  --color-teal-a700: #00bfa5;

  --color-green: #4caf50;
  --color-green-50: #e8f5e9;
  --color-green-100: #c8e6c9;
  --color-green-200: #a5d6a7;
  --color-green-300: #81c784;
  --color-green-400: #66bb6a;
  --color-green-500: var(--color-green);
  --color-green-600: #43a047;
  --color-green-700: #388e3c;
  --color-green-800: #2e7d32;
  --color-green-900: #1b5e20;
  --color-green-a100: #b9f6ca;
  --color-green-a200: #69f0ae;
  --color-green-a400: #00e676;
  --color-green-a700: #00c853;

  --color-light-green: #8bc34a;
  --color-light-green-50: #f1f8e9;
  --color-light-green-100: #dcedc8;
  --color-light-green-200: #c5e1a5;
  --color-light-green-300: #aed581;
  --color-light-green-400: #9ccc65;
  --color-light-green-500: var(--color-light-green);
  --color-light-green-600: #7cb342;
  --color-light-green-700: #689f38;
  --color-light-green-800: #558b2f;
  --color-light-green-900: #33691e;
  --color-light-green-a100: #ccff90;
  --color-light-green-a200: #b2ff59;
  --color-light-green-a400: #76ff03;
  --color-light-green-a700: #64dd17;

  --color-lime: #cddc39;
  --color-lime-50: #f9fbe7;
  --color-lime-100: #f0f4c3;
  --color-lime-200: #e6ee9c;
  --color-lime-300: #dce775;
  --color-lime-400: #d4e157;
  --color-lime-500: var(--color-lime);
  --color-lime-600: #c0ca33;
  --color-lime-700: #afb42b;
  --color-lime-800: #9e9d24;
  --color-lime-900: #827717;
  --color-lime-a100: #f4ff81;
  --color-lime-a200: #eeff41;
  --color-lime-a400: #c6ff00;
  --color-lime-a700: #aeea00;

  --color-yellow: #ffeb3b;
  --color-yellow-50: #fffde7;
  --color-yellow-100: #fff9c4;
  --color-yellow-200: #fff59d;
  --color-yellow-300: #fff176;
  --color-yellow-400: #ffee58;
  --color-yellow-500: var(--color-yellow);
  --color-yellow-600: #fdd835;
  --color-yellow-700: #fbc02d;
  --color-yellow-800: #f9a825;
  --color-yellow-900: #f57f17;
  --color-yellow-a100: #ffff8d;
  --color-yellow-a200: #ff0;
  --color-yellow-a400: #ffea00;
  --color-yellow-a700: #ffd600;

  --color-amber: #ffc107;
  --color-amber-50: #fff8e1;
  --color-amber-100: #ffecb3;
  --color-amber-200: #ffe082;
  --color-amber-300: #ffd54f;
  --color-amber-400: #ffca28;
  --color-amber-500: var(--color-amber);
  --color-amber-600: #ffb300;
  --color-amber-700: #ffa000;
  --color-amber-800: #ff8f00;
  --color-amber-900: #ff6f00;
  --color-amber-a100: #ffe57f;
  --color-amber-a200: #ffd740;
  --color-amber-a400: #ffc400;
  --color-amber-a700: #ffab00;

  --color-orange: #ff9800;
  --color-orange-50: #fff3e0;
  --color-orange-100: #ffe0b2;
  --color-orange-200: #ffcc80;
  --color-orange-300: #ffb74d;
  --color-orange-400: #ffa726;
  --color-orange-500: var(--color-orange);
  --color-orange-600: #fb8c00;
  --color-orange-700: #f57c00;
  --color-orange-800: #ef6c00;
  --color-orange-900: #e65100;
  --color-orange-a100: #ffd180;
  --color-orange-a200: #ffab40;
  --color-orange-a400: #ff9100;
  --color-orange-a700: #ff6d00;

  --color-deep-orange: #ff5722;
  --color-deep-orange-50: #fbe9e7;
  --color-deep-orange-100: #ffccbc;
  --color-deep-orange-200: #ffab91;
  --color-deep-orange-300: #ff8a65;
  --color-deep-orange-400: #ff7043;
  --color-deep-orange-500: var(--color-deep-orange);
  --color-deep-orange-600: #f4511e;
  --color-deep-orange-700: #e64a19;
  --color-deep-orange-800: #d84315;
  --color-deep-orange-900: #bf360c;
  --color-deep-orange-a100: #ff9e80;
  --color-deep-orange-a200: #ff6e40;
  --color-deep-orange-a400: #ff3d00;
  --color-deep-orange-a700: #dd2c00;

  --color-brown: #795548;
  --color-brown-50: #efebe9;
  --color-brown-100: #d7ccc8;
  --color-brown-200: #bcaaa4;
  --color-brown-300: #a1887f;
  --color-brown-400: #8d6e63;
  --color-brown-500: var(--color-brown);
  --color-brown-600: #6d4c41;
  --color-brown-700: #5d4037;
  --color-brown-800: #4e342e;
  --color-brown-900: #3e2723;

  --color-grey: #9e9e9e;
  --color-grey-50: #fafafa;
  --color-grey-100: #f5f5f5;
  --color-grey-200: #eee;
  --color-grey-300: #e0e0e0;
  --color-grey-400: #bdbdbd;
  --color-grey-500: var(--color-grey);
  --color-grey-600: #757575;
  --color-grey-700: #616161;
  --color-grey-800: #424242;
  --color-grey-900: #212121;

  --color-blue-grey: #607d8b;
  --color-blue-grey-50: #eceff1;
  --color-blue-grey-100: #cfd8dc;
  --color-blue-grey-200: #b0bec5;
  --color-blue-grey-300: #90a4ae;
  --color-blue-grey-400: #78909c;
  --color-blue-grey-500: var(--color-blue-grey);
  --color-blue-grey-600: #546e7a;
  --color-blue-grey-700: #455a64;
  --color-blue-grey-800: #37474f;
  --color-blue-grey-900: #263238;
  --color-blue-grey-950: #0c1113;
}

:root {
  --color-primary-green: #abfa03;
  --color-primary: var(--color-blue-600);
  --color-primary-hover: var(--color-blue-800);
  --color-secondry: #1d2a59;
  --color-secondry-hover: #152049;
  --color-danger-lighter: var(--color-red-400);
  --color-danger-light: var(--color-red-500);
  --color-danger: var(--color-red-400);
  --color-danger-dark: var(--color-red-700);
  --color-danger-darker: var(--color-red-800);
  --color-success-lighter: var(--color-green-300);
  --color-success-light: var(--color-green-400);
  --color-success: var(--color-primary-green);
  --color-success-dark: var(--color-green-700);
  --color-success-darker: var(--color-green-800);
  --color-purple: var(--color-purple-500);
  --color-pink: var(--color-pink-600);
  --color-warning: var(--color-yellow-500);

  --border-color-secondry: rgba(255, 255, 255, 0.2);
  --border-color-light: rgba(255, 255, 255, 0.35);
  --border-color-white: rgba(255, 255, 255, 0.6);

  --text-color-white: var(--color-blue-grey-50);
  --text-color-light: var(--color-blue-grey-200);
  --text-color-secondry: var(--color-blue-grey-600);

  --text-color-dark: var(--color-blue-grey-950);
  --text-color-black: #06090a;

  --background-color: #020617;
  --background-color-light: #0d1842;
  --background-color-lighter: #172660;
  --color-gradient-1: linear-gradient(
    80deg,
    rgb(28, 33, 153) 10%,
    rgb(167, 0, 218) 90%
  );

  --btn-height: 38px;
  --formControl-height: 38px;

  --background-color-dd: rgba(6, 13, 40, 0.9);
  --carousel-height: 570px;
  --input-background: var(--background-color);
  --body-font-size: var(--font-size);
  --chatBot-font-size: 12px;
}

:root {
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 20px;
  --space-xl: 24px;
  --space-xxl: 28px;
}

:root {
  --rounded-1: 2px;
  --rounded-2: 4px;
  --rounded-3: 8px;
  --rounded-4: 16px;
}
:root {
  --font-family: "Titillium Web";
  --font-family-eng: "Titillium Web";
  --font-size-xxxl: 43.3px;
  --font-size-xxl: 36.08px;
  --font-size-xxl: 30.07px;
  --font-size-xl: 25.06px;
  --font-size-lg: 20.88px;
  --font-size-md: 17.4px;
  --font-size: 14px;
  --font-size-en: 14px;
  --font-size-sm: small;
  --font-size-xs: x-small;
  --font-weight-bold: 600;
  --font-weight-bolder: 700;
}
html[lang="ar"] {
  &:has(.card-login) {
    width: 100vw !important;
    overflow-x: hidden !important;
    body {
      overflow-x: hidden !important;
      width: 100vw !important;
    }
    .chatgpt-sidebar {
      display: none !important;
    }
  }
  .fa-arrow-right {
    transform: rotate(180deg) !important;
  }
}

body {
  font-family: var(--font-family);
  background: var(--background-color);
  color: var(--text-color-white);
  font-size: var(--body-font-size);
  min-height: 100vh;
  /*
  background-image: radial-gradient(
      circle at 0 0,
      rgb(0 77 255 / 65%) 1px,
      rgba(0, 77, 255, 0) 151px
    ),
    radial-gradient(
      circle at 100% 6%,
      rgb(0 77 255 / 19%) 0px,
      rgba(0, 77, 255, 0) 200px
    ),
    radial-gradient(
      circle at right 710px,
      rgb(0 77 255 / 22%) 0%,
      rgba(0, 77, 255, 0) 400px
    ),
    radial-gradient(
      circle at 88% 110%,
      rgb(0 59 255 / 40%) 0%,
      rgba(181, 0, 0, 0) 390px
    ),
    radial-gradient(
      circle at 20% 110%,
      rgb(0 20 255 / 48%) 0%,
      rgba(181, 0, 0, 0) 390px
    );
  background-blend-mode: hard-light;
  background-repeat: no-repeat;

  &::before {
    content: "";
    display: block;
    width: 1500px;
    height: 300px;
    position: absolute;
    background-image: linear-gradient(
      45deg,
      rgb(157, 44, 247) 0%,
      rgb(247, 144, 212) 100%
    );

    background-image: linear-gradient(
      -45deg,
      #ff0000,
      #5900ff,
      #2344d5,
      #ff00a1
    );
    background-size: 400% 400%;
    right: 10px;
    top: -150px;
    z-index: -1;
    filter: blur(85px);
    opacity: 0.45;
    animation: gradient1 8s ease infinite;
  }

  &::after {
    content: "";
    display: block;
    width: 1500px;
    height: 300px;
    position: absolute;
    background-image: linear-gradient(
      45deg,
      rgb(11, 168, 118) 0%,
      rgb(0, 89, 183) 100%
    );
    background-image: linear-gradient(
      -45deg,
      #ff0000,
      #0031ff,
      #00a2ff,
      #ff0000
    );
    background-size: 400% 400%;
    left: -500px;
    top: -150px;
    z-index: -1;
    filter: blur(70px);
    opacity: 0.45;
    animation: gradient1 12s ease infinite;
    border-radius: 40%;
  }*/
}

[lang="ar"] body {
  font-family: "Noto Naskh Arabic", var(--font-family);
  font-optical-sizing: auto;
  font-style: normal;
  --font-size: 16px;
  --body-font-size: var(--font-size);
}

.font-body {
  font-family: var(--font-family);
}

.h6,
.h5,
.h4,
.h3,
.h2,
.h1,
h6,
h5,
h4,
h3,
h2,
h1 {
  font-family: var(--font-family);
  font-style: normal;
  font-weight: var(--font-weight-bold);
}

.container-body {
  min-height: 660px;
}

.container-checkout {
  border-radius: var(--rounded-4);
  overflow: hidden;
  background-color: black;
}

.bg-success {
  background-color: var(--color-primary-green) !important;
}

.text-danger {
  color: var(--color-danger) !important;
}

.text-success {
  color: var(--color-primary-green) !important;
}

.bg-danger {
  background-color: var(--color-danger) !important;
}

.bg-warning {
  background-color: var(--color-warning) !important;
}

.bg-gradient-1 {
  background: var(--color-gradient-1) !important;
}

a:not([href]):not([class]),
a {
  color: var(--color-primary);
  text-decoration: none;
  cursor: pointer;
}

app-navbar + .container {
  padding-top: 86px;
}

[lang="ar"] .dropdown-navbar-user > ul.dropdown-menu {
  right: -107px !important;
}

@media (max-width: 1400px) {
  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl,
  .container-xxl {
    max-width: 96% !important;
  }
}

/** {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 255, 0.5) rgba(25, 0, 255, 0.06);
  border-radius: 4px;
}*/
/* width */
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

/* Track */
*::-webkit-scrollbar-track {
  background: rgb(15 21 84 / 0%);
  border-radius: 4px;
  background-image: none;
}

/* Handle */
*::-webkit-scrollbar-thumb {
  background: rgb(2 6 47);
  border-radius: 4px;
  /* background-image: radial-gradient(circle at 0 0%, rgb(0 77 255), rgba(0, 77, 255, 0) 50%), radial-gradient(circle at 100% 178%, rgb(0 77 255), rgb(0 17 55 / 4%) 6%), radial-gradient(circle at 23% -300%, rgb(0 59 255 / 62%), rgba(0, 80, 255, 0) 20%) !important; */
  transition: all 0.3s;
  background-repeat: no-repeat;
  cursor: pointer;
  border: solid 2px rgba(0, 76, 255, 0.3);
  overflow: hidden;
  transition: all 0.3s;
}

*::-webkit-scrollbar-thumb:hover {
  border: solid 1px rgba(21, 80, 218, 0.48);
  background: #071067;
}

*::-webkit-scrollbar-thumb:active {
  border: solid 1px rgba(21, 80, 218, 0.48);
  background: #071067;
}

.stageType {
  padding-block: 14px;
  border-bottom: solid 1px var(--border-color-light);
  color: var(--color-primary);
  position: relative;
}

.bracket-box > strong {
  display: none;
}

/*
.bracket-box::before {
  content: "";
  display: block;
  width: 100px;
  height: 100px;
  position: absolute;
  background: #3fd8c9;
  border-radius: 50%;
  filter: blur(80px);
  right: -80px;
  top: -50px;
  opacity: 0.6;
}

.bracket-box::after {
  content: "";
  display: block;
  width: 100px;
  height: 100px;
  position: absolute;
  background: #c5d83f;
  border-radius: 50%;
  filter: blur(40px);
  left: -50px;
  top: -100px;
  opacity: 0.6;
}
*/
.brackets-round > h5 {
  margin-bottom: 8px;
  padding-bottom: 8px;
}

.bracket-box-opponentScore {
  font-weight: 700;
}
.bracket-box-opponent {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: small;
  font-weight: 600;
  font-family: var(--font-family-eng);
}
.bracket-box > div {
  padding: 0px;
  z-index: 1;
}

@keyframes gradient1 {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.small,
small {
  font-size: 0.9em;
}
.navbar-brand img {
  width: auto;
  height: 41px;
  object-fit: contain;
  @media screen and (max-width: 550px) {
    height: 36px;
  }
}

.user-setting-wrap {
  display: flex;
  gap: 8px;
}

.dropdown-navbar-userImg {
  width: 30px;
  height: 30px;
  object-fit: cover;
  border-radius: 20px;
  border: solid 1px var(--border-color-light);
  @media screen and (max-width: 550px) {
    & + span {
      display: none;
      & + i {
        display: none;
      }
    }
  }
}

.card-login-logo img {
  height: 41px;
  margin-inline: auto;
}

.dropdown-navbar-user i {
  font-size: smaller;
  padding-inline: 4px;
}
.dropdown-navbar-user a.btn {
  border-radius: 20px;
  padding-inline: 4px;
  font-weight: var(--font-weight-bold);
  font-size: small;
  color: var(--text-color-white);
  background-color: rgba(0, 0, 0, 0.11);
  border: solid 1px rgb(22 62 134);
  background-image: radial-gradient(
    circle at center right,
    rgb(83 234 255 / 41%),
    rgb(255 0 0 / 0%) 30%
  );
  background-repeat: no-repeat;
  box-shadow: 3px 3px 11px rgba(0, 0, 0, 0.5);
}
.logoFooter {
  width: 50px;
  object-fit: cover;
}

.navbar-dark .navbar-nav .nav-link {
  color: var(--text-color-white);
}
.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .nav-link:hover {
  color: var(--color-primary);
}
.navbar-expand-md .navbar-nav .nav-link {
  text-transform: capitalize;
  padding-inline-end: 0.75rem;
  padding-inline-start: 0.75rem;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
}
nav.mainNav .dropdown-toggle::after {
  display: none;
}

.nav-pills,
.nav-tabs {
  .nav-link {
    border-radius: var(--rounded-2);
    font-size: var(--font-size-md);
    font-weight: 700;
    text-transform: uppercase;
  }
}

.nav-pills {
  gap: 12px;
  .nav-link {
    text-transform: uppercase;
    border: solid 2px var(--color-primary);
    background-color: transparent;
    &:active {
      background-color: var(--color-primary);
      border-color: var(--color-primary);
      color: var(--text-color-white);
    }
  }
}

@keyframes navStreak {
  0% {
    background-position: 0% 0%;
  }

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

nav.mainNav li.nav-item i.fas {
  font-size: 8px;
}

.navbar-collapse {
  gap: 12px;
}

.rightNav a.signIn,
.rightNav a.buy {
  color: #fff;
}
.rightNav .buyCont {
  padding: 5px;
}
.rightNav {
  position: relative;
}
app-slider {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 6px;
  overflow-x: clip;
}

.header-img {
  max-height: var(--carousel-height);
  flex-grow: 1;
  flex-basis: 0;
  height: 480px;
  transition: all 0.6s;
  min-width: 50px;
  overflow: hidden;
  position: relative;
  mix-blend-mode: normal;
  border-radius: 0;
  /* mix-blend-mode: luminosity;*/
  opacity: 0.65;
  border-radius: 16px;
}

.tournament-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}
.tournament-summary > div {
  border-inline-end: solid 1px rgba(255, 255, 255, 0.129);
  padding-inline-end: 8px;
  text-align: start;
  @media screen and (max-width: 768px) {
    min-width: 100px;
  }
}
.tournament-summary > div:last-child {
  border: none;
}
.overViewDesc,
.rulesDetail {
  font-size: var(--font-size-lg);
  font-weight: 400;
}

.overViewDesc {
  /* direction: rtl; */
  /* text-align: right; */
  white-space: pre-wrap;
  line-height: 1.8;
}

.header-img::before {
  content: "";
  display: block;
  background-image: linear-gradient(0deg, #020617 10%, #02061700 90%);
  height: 310px;
  position: absolute;
  bottom: 0;
  z-index: 1;
  width: 100%;
  opacity: 1;
  /* mix-blend-mode: hard-light; */
}
.header-img:hover,
.header-img-selected {
  /*
  flex-grow: 1.8;
  min-width: 600px;
  border-radius: var(--rounded-3);
  opacity: 1;
  mix-blend-mode: normal;
  .header-img-txt {
    opacity: 1;
  }
  &::before {
    opacity: 0;
  }
  .header-img-thumbArea {
    opacity: 0;
  }*/
}

.header-img-selected {
  opacity: 1;
  mix-blend-mode: normal;
}

.header-img .header-img-bg {
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center;
  transition: all 0.6s;
  min-height: 100%;
}
/*
.header-img:hover .header-img-bg {
  object-position: top;
}

app-slider:has(.header-img:hover) .header-img:not(:hover),
app-slider:has(.header-img-selected) .header-img:not(.header-img-selected) {
  opacity: 0.5;
  transform: scale(0.6);
  filter: blur(5px);
  mix-blend-mode: luminosity;
}
*/

app-slider:has(.header-img-selected) .header-img:not(.header-img-selected) {
  opacity: 0.5;
  filter: blur(2px);
  mix-blend-mode: luminosity;
}

.col-md-2:has(.card-topGame:hover) + .col-md-2 > .card-topGame:not(:hover) {
  transform: scale(0.85) !important;
}

.col-md-2:has(+ .col-md-2 .card-topGame:hover) .card-topGame:not(:hover) {
  transform: scale(0.85) !important;
}

.header {
  position: relative;
}
.header::before {
  content: "";
  display: block;
  background-image: linear-gradient(0deg, #020617 21%, #02061700 90%);
  height: 310px;
  position: absolute;
  bottom: 0;
  z-index: 1;
  width: 100%;
  display: none;
}

.discount {
  background-color: #fff;
  display: none;
}
.discount h2 {
  color: #00163e;
}

.topContent {
  position: relative;
}

.secNav {
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#00163e+0,fe0000+100 */
  background: #00163e;
  /* Old browsers */
  background: -moz-linear-gradient(left, #00163e 0%, #fe0000 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(left, #00163e 0%, #fe0000 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, #00163e 0%, #fe0000 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00163e', endColorstr='#fe0000', GradientType=1);
  /* IE6-9 */
}
.secNav a,
.secNav .dropdown a {
  font-family: "Proxima Nova Rg";
  font-weight: normal;
  font-style: normal;
  font-size: 1.125rem;
  color: #d1d1d1;
  opacity: 0.67;
  padding: 15px 25px;
  border-bottom: 2px solid transparent;
}
.secNav a:hover,
.secNav a.active {
  opacity: 1;
  color: #fff;
  border-bottom: 2px solid #fff;
}
.secNav .dropdown a {
  background-color: transparent;
  color: #fff;
  opacity: 1;
}
.secNav .dropdown a .fa-cog {
  margin-right: 10px;
}
.secNav .dropdown a:hover {
  border-bottom-color: transparent;
  color: #fff;
}
.secNav .dropdown ul li a:hover {
  background-color: #1e2126;
}

.section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1;
  position: relative;
  margin-bottom: 16px;
  min-height: 38px;
}
.section-title-left {
  display: flex;
  align-items: center;
  gap: 4px;
}
.section-title-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.section-title-text {
  margin: 0;
}
.page-section-heading {
  margin: 0;
}
.badge-participant-name {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-family-eng);
  i {
    font-size: xx-small;
  }
}

.badge-participant-status {
  max-width: fit-content;
  margin: auto;
}

.card.card-participant {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block: 1.5rem;
  margin-bottom: 24px;
  gap: 12px;
  text-align: center;
  background-color: var(--background-color);
}

.card-participant-img {
  border-radius: 50%;
  width: 42px;
  object-fit: cover;
  aspect-ratio: 1;
}

.card-participant-list-lineup {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.card-participant-list-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}

.card-participant-list-name {
  font-family: var(--font-family-eng);
  margin-bottom: 4px;
}
.card-participant-list-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.card-participant-list-item {
  display: flex;
  align-items: center;
  gap: 8px;
}
i.card-participant-avatar {
  display: block;
  width: 30px;
  height: 30px;
  display: flex;
  background: rgba(0, 0, 0, 0.439);
  align-items: center;
  justify-content: center;
  font-size: small;
  border-radius: 50%;
}

.highlight-tile .card.card-participant {
  border-color: var(--color-primary);
}
.tounramentListing-header img {
  width: 100%;
  object-fit: cover;
  height: 250px !important;
  @media screen and (max-width: 550px) {
    height: 65px !important;
  }
}

.carousel.carousel-tournamentListing {
  border-radius: 12px !important;
  overflow: hidden;
}
.carousel-tournamentListing .carousel-indicators {
  margin: 0;
  padding: 8px 16px;
  justify-content: start;
}
.carousel-tournamentListing .carousel-indicators button {
  border-radius: 8px !important;
  overflow: hidden !important;
}
.carousel-tournamentListing
  :where(.carousel-control-prev, .carousel-control-next) {
  display: none;
}

.carousel-tournamentListing .carousel-caption {
  left: 0;
  display: flex;
  justify-content: start;
  text-align: start;
  padding-inline-start: 18px;
  max-width: fit-content;
}

.carousel-tournamentListing .carousel-indicators {
  max-width: fit-content;
}

.upcomingTournaments {
  position: relative;
  z-index: 1;
  .section-title {
    @media screen and (max-width: 400px) {
      flex-direction: column;
      align-items: flex-start;
    }
  }
}
.upcomingTournaments::before {
  content: "";
  position: absolute;
  top: -180px;
  left: -88px;
  width: 400px;
  height: 100%;
  background-image: url(../images/img-homepage-body.png);
  background-repeat: no-repeat;
  background-size: contain;
  filter: brightness(0.95) contrast(1.1);
  @media screen and (max-width: 400px) {
    width: 300px;
  }
}
html[dir="rtl"] .upcomingTournaments::before {
  left: unset;
  right: -88px;
  transform: scaleX(-1);
}
.upcomingTournaments h3 {
  font-style: normal;
}
.langSel a.nav-link {
  position: absolute;
  z-index: 99;
  top: -35px;
  right: 0px;
  font-size: 1.2rem !important;
}
.langSel .dropdown-menu[data-bs-popper] {
  top: -6%;
  left: -170px;
  margin-top: 0.125rem;
}
p.infoTxt {
  font-size: 13px;
  margin: 5px 0px 0px 0px;
  color: #5c657c;
}
:focus {
  box-shadow: none !important;
}
body.userLoggedin .rightNav .signInCont {
  padding: 5px 15px 5px 100px;
}
.dropdown a.signIn {
  background-color: transparent;
  opacity: 1;
  padding: 0px;
}
.dropdown a.signIn .fas {
  font-size: 14px;
  margin-left: 5px;
  position: relative;
  top: -3px;
}
.playBottomLinks {
  background-color: #101112;
  margin: 2rem -2rem 0rem -2rem;
  padding: 1rem;
}
.playBottomLinks a {
  text-decoration: none;
  color: #787878;
  font-style: normal;
  font-size: 1.4rem;
  margin: 0 2rem;
}
a:hover {
  transition: all 0.3s ease;
}
.langSel a.nav-link i.fas {
  margin-left: 10px;
}
.playBottomLinks a:hover {
  color: #fff;
}
.gameImg {
  height: 286px;
}
.gameImgSmall {
  height: 183px;
}

.tounrament-head {
  border-radius: var(--rounded-3);
  overflow: hidden;
  margin: 8px;
  margin-bottom: 0;
  min-height: 170px;
  background-color: rgba(255, 255, 255, 0.03);
  mix-blend-mode: normal;
  position: relative;
}
.card-tournament-gameImgTitle {
  position: absolute;
  top: 50%;
  width: 100%;
  text-align: center;
  font-size: 28px;
  font-weight: 600;
  /* mix-blend-mode: color-burn; */
  background-image: linear-gradient(45deg, #31bbff, #1af9ba, #fd00ed);
  background-size: 100%;
  background-repeat: repeat;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-background-clip: text;
  -moz-text-fill-color: transparent;
  left: 0;
  z-index: -1;
}
.card-tournament-img {
  width: 100%;
  object-fit: cover;
}
.card-tournament-gameTitle {
  margin: 0;
  margin-block: 4px;
}
.gameImg.lego {
  background-image: url(../images/img-game-lego.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
.gameImg.apex {
  background-image: url(../images/img-game-apex.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
.gameImgSmall.game1 {
  background-image: url(../images/img-game-3.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
.gameImgSmall.game2 {
  background-image: url(../images/img-game-4.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
.gameImgSmall.game3 {
  background-image: url(../images/img-game-5.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

.upcomingTournaments .actionBtns,
.actionBtns {
  text-align: center;
}
.bg-light {
  background-color: var(--background-color-light) !important;
}
.bg-lighter {
  background-color: var(--background-color-lighter) !important;
}

.border-bottom,
.border-top,
.border-start,
.border-end,
.border {
  border-color: var(--border-color-secondry) !important;
}

.border-secondary {
  border-color: var(--border-color-secondry) !important;
}
.border-opacity-25 {
  border-color: rgba(222, 227, 232, 0.2) !important;
}
.text-nowrap {
  white-space: nowrap;
}

.badge {
  border-radius: 14px;
  padding-block: 6px;
  gap: 4px;
  display: flex;
  align-items: center;
  &.bg-secondary,
  &.bg-info,
  &.bg-success,
  &.bg-warning,
  &.bg-danger {
    color: var(--text-color-dark);
  }
}

.badge.badge-lg {
  font-size: var(--font-size);
}

.badge.badge-black50 {
  background: rgba(0, 0, 0, 0.78);
}

.fw-bold {
  font-weight: 700 !important;
}

.modal.modal-vidAd {
  display: block;
  display: flex;
  align-items: center;
}

.modal.modal-vidAd .modal-body {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
}
.modal.modal-vidAd .modal-body .volume-control {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 20px;
  height: 20px;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal.modal-vidAd .modal-body .remaining-time {
  position: absolute;
  bottom: 10px;
  left: 10px;
}

.modal.modal-vidAd .modal-content {
  border: none;
  background: transparent;
}

.modal.modal-vidAd .modal-header {
  text-align: center;
}

.modal {
  backdrop-filter: blur(3.5px);
  background-color: rgba(2, 6, 23, 0.82);
}

.modal.show {
  display: flex !important;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}

.modal-content {
  background-color: var(--background-color-lighter);
  background-color: transparent;
  border-radius: var(--rounded-4);
  border: 1px solid rgba(255, 255, 255, 0.06);
  background-color: rgba(255, 255, 255, 0.012);
  background-color: rgba(2, 6, 23, 0.35);
}

.modal-header {
  border-color: var(--border-color-secondry);
  border-color: transparent;
  .btn-close {
    filter: brightness(0) invert(1);
    margin: 0;
  }
}
.modal-footer {
  border-color: var(--border-color-secondry);
  border-color: transparent;
  justify-content: center;
  /*padding-bottom: 0;
  padding-top: 2rem;*/
}

.modal-footer .btn {
  flex-grow: 1;
  max-width: 50%;
}

.modal-backdrop {
  background-color: var(--background-color);
}
.modal-backdrop.show {
  opacity: 0.85;
}
.modal-title {
  font-size: 24px;
}
.card-latestArticles {
  cursor: pointer;
  transition: all 0.3s;
}
.card-latestArticles:hover {
  border-color: var(--border-color-light);
}
.card {
  background: var(--color-background-light, #091130);
  background-image: linear-gradient(
    -45deg,
    #0081ff30,
    #5900ff00 20%,
    #237ad500 80%,
    #006cfe2e
  );
  background-repeat: no-repeat;
  border-radius: var(--rounded-4);
  border-style: solid;
  border-color: #0f172a;
  border-width: 1px;
  border-color: var(--border-color-secondry);
}
.card-img,
.card-img-top {
  border-top-left-radius: var(--rounded-4);
  border-top-right-radius: var(--rounded-4);
}
.card-header {
  padding-inline: 1rem;
  padding-top: 1.25rem;
  padding-bottom: 0;
  /*border-bottom: 1px solid var(--border-color-secondry);*/
}

.card.card-transparent {
  background: transparent;
  border-width: 1px;
}

.card.card-dark {
  background-color: var(--background-color);
  overflow: hidden;
}

.card.card-dark::after {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  background: #02abd2;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.4;
  left: -100px;
  top: -100px;
  z-index: 0;
}
.card.card-dark::before {
  content: "";
  width: 100px;
  height: 100px;
  background: #6ae3ff;
  position: absolute;
  filter: blur(100px);
  opacity: 0.4;
  border-radius: 50%;
  right: 10px;
  top: 190px;
}
.card-body {
  padding: 1.5rem 1.5rem;
  @media screen and (max-width: 768px) {
    padding: 1rem;
  }
}
.card-footer {
  padding: 1.5rem;
  background: transparent;
  padding-top: 0;
}

.pastMatches-row {
  display: flex;
  gap: 12px;
}

.card.card-pastMatch {
  overflow: hidden;
  max-height: 139px;
  overflow-y: scroll;
}

.card-pastMatch {
  border: solid 1px var(--border-color-light);
  border-radius: var(--rounded-3);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  margin-bottom: 20px;
  min-width: 248px;
  position: relative;
  overflow: hidden;
  max-height: 290px;
  overflow-y: auto;
}
.card-pastMatch::before {
  content: "";
  display: block;
  width: 100px;
  height: 100px;
  position: absolute;
  background: #3fd8c9;
  border-radius: 50%;
  filter: blur(80px);
  right: -80px;
  top: -50px;
  opacity: 0.6;
}
.card-pastMatch::after {
  content: "";
  display: block;
  width: 200px;
  height: 200px;
  position: absolute;
  background: #d83f3f4d;
  border-radius: 50%;
  filter: blur(47px);
  left: -110px;
  top: -50px;
  opacity: 0.5;
  z-index: -2;
}
.pastMatch-opponents {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: small;
  font-weight: 600;
  /* mix-blend-mode: color-dodge; */
}

.pastMatches-dates {
  display: flex;
  font-size: x-small;
  gap: 8px;
  font-weight: 700;
  padding-block: 8px;
  mix-blend-mode: color-dodge;
}
.card-pastMatch > h6 {
  margin: 0;
}
.pastMatches-dates > span {
  background-color: #ffffff1c;
  padding: 2px 6px;
  border-radius: 8px;
  display: flex;
  gap: 4px;
  color: white;
  font-size: 8px;
}
.card-matchResult {
  flex-grow: 1;
  display: flex;
  padding: 4px 12px;
  align-items: center;
  font-size: small;
  border-bottom: solid 1px #13204d;
}
.card-matchResult-opponent {
  width: 50%;
}
i.card-matchResult-avatar {
  border: solid 1px rgba(255, 255, 255, 0.42);
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  /* mix-blend-mode: color-dodge; */
  opacity: 0.25;
  font-size: 11px;
}

.card-matchResults-list::before {
  content: "";
  display: block;
  width: 100px;
  height: 100px;
  position: absolute;
  background: #843fd8;
  border-radius: 50%;
  filter: blur(56px);
  right: -50px;
  bottom: -50px;
  opacity: 0.6;
  display: none;
}

.card-matchResults-list::after {
  content: "";
  display: block;
  width: 150px;
  height: 220px;
  position: absolute;
  background: #3fd8ad;
  border-radius: 50%;
  filter: blur(56px);
  left: 50px;
  top: 50px;
  opacity: 0.6;
  display: none;
}

.card-matchResult {
  display: grid;
  grid-template-columns: 1fr 0.5fr 1fr;
  background-color: var(--background-color-light);
  border-radius: var(--rounded-4);
  padding: 8px 14px;
  align-items: center;
  border: var(--border-color-light);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--background-color);
  background-image: radial-gradient(
      circle at 100% 0,
      rgba(62, 0, 234, 0.75),
      rgba(247, 6, 255, 0) 30%
    ),
    radial-gradient(
      circle at 0 100%,
      rgb(130 0 234 / 55%),
      rgba(195, 0, 234, 0) 30%
    );
}

.card-matchResult-opponentImg {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}
.card-matchResult-opponentImg-wrap {
  position: relative;
  &::after {
    --width: 130px;
    --height: 300px;
    content: "";
    display: block;
    width: var(--width);
    height: var(--height);
    position: absolute;
    background-image: radial-gradient(
      circle at 50% 50%,
      rgb(39 227 4) 20%,
      rgb(0 81 0) 50%
    );

    top: 0px;
    z-index: -1;
    margin-left: calc(-1 * var(--width) / 2);
    margin-top: calc(-1 * var(--height) / 2);
    left: 50%;
    top: 50%;
    rotate: 15deg;
    transform-origin: center;
  }
}

.card-matchResult-opponent-loser {
  .card-matchResult-opponentImg-wrap {
    &::after {
      background-image: radial-gradient(
        circle at 50% 50%,
        rgb(255 52 6) 16%,
        rgb(145 0 0) 43%
      );
    }
  }
}

.card-matchResult-opponent-draw {
  .card-matchResult-opponentImg-wrap {
    &::after {
      background-image: radial-gradient(
        circle at 50% 50%,
        rgba(200, 200, 200, 1) 16%,
        rgb(100, 100, 100) 43%
      );
    }
  }
}

.card-matchResult-opponentInfo {
  position: relative;
}

.card-matchResult-opponentName {
  font-family: var(--font-family-eng);
}
.card-matchResult-opponentStatus {
  position: absolute;
  text-transform: uppercase;
  font-size: var(--font-size-sm);
  position: relative;
  text-align: start;
}

.card-matchResult-opponent2 {
  .card-matchResult-opponentStatus {
    right: 0;
    text-align: end;
  }
}

.card-matchResult-Score {
  align-items: center;
  font-size: var(--font-size-xl);
  letter-spacing: 3px;
  text-align: center;
  position: relative;
  font-weight: 600;
  &::before,
  &::after {
    content: "";
    display: block;
    width: 1px;
    height: 100%;
    position: absolute;
    background: #fff;
    top: 0px;
    rotate: 15deg;
  }
  &::after {
    left: 0px;
  }
  &::before {
    right: 0px;
  }
}

i.card-matchResult-avatar {
  border: solid 1px rgba(255, 255, 255, 0.42);
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  /* mix-blend-mode: color-dodge; */
  opacity: 0.25;
  font-size: 11px;
}

.card-matchResult-opponent {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  text-align: center;
  display: flex;
  align-items: center;
  gap: 60px;
  width: auto !important;
}
.card-matchResult-opponent2 {
  justify-content: end;
}

.card-matchResult.card-matchResult-nd {
  .card-matchResult-opponentStatus {
    display: none;
  }
  .card-matchResult-Score {
    font-size: var(--font-size-lg);
  }
  .card-matchResult-opponentImg-wrap::after {
    background-image: radial-gradient(
      circle at 50% 50%,
      rgb(0 0 0 / 4%) 20%,
      rgb(0 0 0 / 36%) 50%
    );
  }
}

.card-matchResult.card-matchResult-pending {
  .card-matchResult-Score {
    font-size: var(--font-size-lg);
  }
  .card-matchResult-opponentImg-wrap::after {
    background-image: radial-gradient(
      circle at 50% 50%,
      rgb(0 0 0 / 4%) 20%,
      rgb(0 0 0 / 36%) 50%
    );
  }
}

select.select-ouline-primary {
  border-radius: 22px;
  border: solid 2px var(--color-primary);
  font-size: var(--font-size-md);
  font-weight: 600;
}
.card-matchResult {
  @media screen and (max-width: 600px) {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    &::after {
      left: 0px;
    }
    &::before {
      right: 0px;
    }

    .card-matchResult-Score {
      border-top: solid 1px rgba(255, 255, 255, 0.35);
      border-bottom: solid 1px rgba(255, 255, 255, 0.35);
      &::before,
      &::after {
        opacity: 0;
      }
    }

    .card-matchResult-opponentImg-wrap::after {
      left: -50%;
    }

    .card-matchResult-opponentImg-wrap::after {
      left: -50%;
    }

    .card-matchResult-opponent2 {
      & .card-matchResult-opponentImg-wrap {
        &::after {
          left: auto;
          right: -90px;
        }
      }
    }
    .card-matchResult-opponent {
      gap: 20px;
    }

    .card-matchResult-opponent {
      font-size: var(--font-size-lg);
      font-weight: var(--font-weight-bold);
      gap: 18px;
    }
    .card-matchResult-Score {
      text-align: center;
      position: relative;
      padding-block: 6px;
      width: 170px;
      margin: auto;
    }
  }
}

html[lang="ar"] {
  .card-matchResult {
    @media screen and (max-width: 600px) {
      & .card-matchResult-opponent2 {
        & .card-matchResult-opponentImg-wrap {
          &::after {
            right: auto;
            left: -14px;
            top: 4px;
          }
        }
      }
    }
  }
  .card-matchResult {
    @media screen and (max-width: 600px) {
      .card-matchResult-opponentImg-wrap::after {
        right: -79px;
        top: 37px;
      }
    }
  }
}
.card-matchResult-details {
  flex-grow: 1;
  white-space: nowrap;
}
.card-matchResult.card-matchResult-1 {
  background: rgba(30, 145, 6, 0.11);
}
.card-matchResult-1 .card-matchResult-details {
  color: var(--color-success);
}
.progress {
  display: flex;
  background-color: #334072;
  border-radius: 4px;
  overflow: visible;
}
.progress-bar {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: visible;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  background-color: #0d6efd;
  transition: width 0.6s ease;
  background: linear-gradient(
    270deg,
    rgba(56, 189, 248, 0.43) 17.1875%,
    rgba(56, 189, 248, 0.11) 100%
  );
  border-radius: 6px;
  background: linear-gradient(80deg, rgb(0 149 255) -20%, rgb(171 255 6) 100%);
  filter: contrast(1.4) brightness(0.95);
}

[dir="rtl"] .progress-bar {
  rotate: 180deg;
}

.progress-bar-point {
  position: absolute;
  width: 10px;
  background: #f730e1;
  background: #cae7b9;
  right: revert;
  right: 0;
  top: 0;
  bottom: 0;
  border-radius: 4px;
  box-shadow: 0 0 5px 4px #75ff0099;
}
.text-secondary {
  color: var(--text-color-secondry) !important;
}

.fileSelectionWrap {
  border: solid 1px var(--border-color-secondry);
  border-radius: var(--rounded-3);
  padding: 28px 18px;
  background-color: var(--background-color-light);
  text-align: center;
  background-image: radial-gradient(
    circle at 50% 0%,
    rgb(0 93 255 / 37%) 0%,
    rgb(255 244 0 / 0%) 40%
  );
}
.btn {
  font-family: var(--font-family);
  font-size: var(--body-font-size);
  color: var(--text-color-white);
  background-color: var(--color-secondry);
  border-radius: var(--rounded-2);
  height: var(--btn-height);
  min-width: var(--btn-height);
  border: solid 0px var(--border-color-secondry);
  padding-block: 0;
  padding-inline: 28px;
  line-height: var(--btn-height);
  white-space: nowrap;
  gap: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
  text-decoration: none;
  font-weight: var(--font-weight-bold);
  filter: contrast(1.2);
  @media screen and (max-width: 600px) {
    padding-inline: 14px;
  }
}

.btn.btn-disabled,
.btn-disabled,
.btn[disabled],
button[disabled] {
  background: rgb(255 255 255 / 10%) !important;
  color: rgb(255 255 255 / 60%) !important;
  border-color: rgb(255 255 255 / 0%) !important;
  pointer-events: none !important;
}

.btn,
.btn.btn-secondary {
  color: var(--text-color-white);
  background-color: var(--color-primary);
  border: solid 1px var(--color-primary);
}

.btn:hover,
.btn.btn-secondary:hover {
  color: var(--text-color-white);
  background-color: var(--color-primary-hover);
  border: solid 1px var(--color-primary-hover);
}
.btn.btn-danger {
  color: var(--text-color-dark);
  background-image: radial-gradient(
    circle at 0% 0%,
    rgb(255 208 208),
    rgb(254 88 88) 50%,
    rgb(183 2 2) 80%
  );
  border-color: #ff2c2c;
}
.btn.btn-danger:hover {
  background-image: radial-gradient(
    circle at 0% 0%,
    rgb(255 208 208),
    rgb(238, 76, 76) 50%,
    rgb(165, 4, 4) 80%
  );
  border-color: #ff2c2c;
}

.btn.btn-warning {
  color: var(--text-color-dark);

  background-color: var(--color-warning);
  background-image: radial-gradient(
    circle at 0% 0%,
    rgb(255 242 179),
    rgb(255 204 4) 30%,
    rgb(219 143 3) 70%
  );
  border-color: rgb(255 204 4);
}

.btn.btn-warning:hover {
  color: var(--text-color-black);
  background-color: var(--color-warning);
  background-image: radial-gradient(
    circle at 0% 0%,
    rgb(255 242 179),
    rgb(255 204 4) 30%,
    rgb(184, 119, 0) 70%
  );
}
.btn-close {
  color: var(--text-color-white);
  color: #000;
}
.btn .fa-arrow-right {
  transition: all 0.3s;
}

.btn:hover .fa-arrow-right {
  transform: translateX(5px);
}

.btn.btn-success {
  /*color: var(--text-color-dark);*/
  background-image: radial-gradient(
    circle at 0% 0%,
    rgb(244 253 17),
    rgb(171 250 3) 30%,
    rgb(71 185 0) 70%
  );
  background-image: linear-gradient(90deg, #aeff00 -50%, #428c00 80%);
  border: solid 0px #abfa03;
}
.btn.btn-success:hover {
  background-image: radial-gradient(
    circle at 0% 0%,
    rgb(244 253 17),
    rgb(171 250 3) 30%,
    rgb(66, 172, 0) 70%
  );
  /*  color: var(--text-color-black);*/
}
.btn.btn-light {
  color: #000;
  background-color: white;
  border-color: white;
}
.btn.btn-light:hover {
  color: var(--color-primary-hover);
}
.btn.btn-link {
  background: transparent;
  border-color: transparent;
  color: var(--color-primary);
}

.btn.btn-link:hover {
  background: transparent;
  border-color: transparent;
  color: var(--color-primary-hover);
}

.btn.btn-outline-secondary {
  background: transparent;
  border-color: var(--color-primary);
  color: var(--text-color);
}

.btn.btn-outline-secondary:hover {
  color: var(--text-color);
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

.btn.btn-primary {
  background-image: radial-gradient(
    circle at 0% 0%,
    rgb(255 255 255) 0%,
    rgb(3 198 250) 40%,
    rgb(0 85 181) 90%
  );
  background-image: linear-gradient(90deg, #2095d9 0, #5c35ee 100%);
  border: solid 0px #02bcf3;
  /*color: var(--text-color-dark);*/
  transition: all 0.3s;
}

.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:active {
  background-image: radial-gradient(
    circle at 0% 0%,
    rgb(255 255 255) 0%,
    rgb(3 198 250) 40%,
    rgb(0, 57, 181) 90%
  );
  /* color: var(--text-color-black);*/
  border-color: #02bcf3;
}

.btn-link {
  text-decoration: none;
}

.btn.btn-outline-light {
  color: var(--text-color-white);
  background-color: transparent;
  border-color: var(--border-color-secondry);
  /*  background-image: radial-gradient(
    circle at 0% 0%,
    rgb(255 255 255 / 62%) 0%,
    rgb(255 255 255 / 14%) 30%,
    rgb(255 255 255 / 5%) 90%
  );*/
  background-repeat: no-repeat;
}

.btn.btn-outline-light:hover {
  border-color: var(--border-color-light);
  background-image: radial-gradient(
    circle at 0% 0%,
    rgb(255 255 255 / 80%) 0%,
    rgb(255 255 255 / 25%) 30%,
    rgb(255 255 255 / 5%) 90%
  );
  background-repeat: no-repeat;
  background-color: transparent;
}
.card.card-topGame {
  position: relative;
  overflow: hidden;
  transition: all 0.2s;
  /* cursor: pointer; */
  overflow: hidden;
  min-height: 250px;
}
.topGameImg-top {
  position: absolute;
  display: flex;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 1;
}

img.topGameImg {
  width: 100%;
  object-fit: cover;
  min-height: 250px;
  transition: all 10s;
}
.card.card-topGame:hover > img {
  rotate: 10deg;
  scale: 1.5;
}
.row-topGames:has(.card-topGame:hover) .card-topGame:not(:hover) {
  opacity: 0.5;
  transform: scale(0.6);
  filter: blur(0px);
}

.col-md-2:has(.card-topGame:hover) + .col-md-2 > .card-topGame:not(:hover) {
  transform: scale(0.85) !important;
}

.col-md-2:has(+ .col-md-2 .card-topGame:hover) .card-topGame:not(:hover) {
  transform: scale(0.85) !important;
}

.card.card-topGame:hover {
  transform: scale(1.1);
  border-color: var(--border-color-light);
}

.card-topGame:hover .fal.fa-play {
  background-color: rgba(0, 0, 0, 0.8);
  transition: all 0.2s;
  scale: 1.5;
}

.card-topGame:hover .topGame-playNow {
  margin-bottom: 120px;
}

.topGame-playNow {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}
.topGame-playNow .fal.fa-play {
  background-color: rgba(0, 0, 0, 0.6);
  width: 50px;
  height: 50px;
  display: flex;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  transition: all 0.25s;
}

.totGame-footer {
  text-align: center;
}

.dropdown-menu {
  color: var(--text-color-white);
}
.nav-item.nav-item-play.dropdown {
  position: initial;
}
.nav-item.nav-item-play .dropdown-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: 64px;
  background: var(--background-color-dd);
  padding: 24px 16px;
  border-radius: 0;
  transition: all 0.3s;
  transform: scaleY(1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  li {
    display: flex;
    justify-content: start;
  }
}

.nav-item.nav-item-play .dropdown-menu.show {
  opacity: 1;
  transform: scaleY(1);
}
.playDropdown-head {
  display: flex;
  gap: 12px;
  align-items: end;
  flex-grow: 1;
  overflow-x: auto;
}

.nav-item-play-game {
  position: relative;
  background: black;
  border-radius: var(--rounded-4) !important;
  overflow: hidden;
}
.nav-link .nav-item-play-gameImg {
  width: 220px;
  height: 150px;
  object-fit: cover;
  opacity: 0.65;
  mix-blend-mode: luminosity;
  transition: all 2s;
}

.nav-item.viewallgames {
  margin-left: auto;
}
.nav-item-play-ctrls {
  position: absolute;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  text-align: center;
  justify-content: space-between;
  inset: 0;
}
.nav-item-play-gameTitle {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: end;
  min-height: 40px;
  background: linear-gradient(0deg, rgb(0, 0, 0), rgba(0, 0, 0, 0));
  padding-bottom: 6px;
  font-weight: var(--font-weight-bold);
}

.nav-item-play-playNow {
  background: rgba(0, 0, 0, 0.75);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 40px;
  transition: all 0.3s;
}

.nav-item.nav-item-play .dropdown-menu .nav-link {
  padding: 0;
}

.nav-item.nav-item-play .dropdown-menu .nav-link:hover .nav-item-play-playNow {
  scale: 1.5;
}

.nav-item.nav-item-play .dropdown-menu .nav-link:hover .nav-item-play-gameImg {
  transform: scale(1);
  opacity: 1;
  background: rgba(0, 0, 0, 0.75);
  transform: scale(1.5);
  rotate: 10deg;
  mix-blend-mode: normal;
}
.playGame-details {
  display: flex;
  justify-content: center;
  gap: 18px;
  padding-block: 24px;
}
.playGame-details img {
  width: 100px;
  border-radius: var(--rounded-3);
}
.playGame-details-right {
  min-width: 400px;
}
.playGame-details-right h5 {
  font-weight: var(--font-weight-bold);
}
.playGame-details-right {
  min-width: 400px;
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 12px;
}
.card-tournament-body-midItem img {
  max-width: 34px;
  object-fit: cover;
  filter: brightness(1.2) contrast(1.12);
}
.card.card-tournament {
  overflow: hidden;
  margin-bottom: 22px;
  min-height: 356px;
  transition: all 0.2s;
  cursor: pointer;
  isolation: isolate;
}
.card.card-tournament::before {
  content: "";
  width: 300px;
  height: 200px;
  background: #c26aff;
  position: absolute;
  filter: blur(55px);
  opacity: 0;
  border-radius: 50%;
  right: -60px;
  top: 210px;
  z-index: -1;
  transition: all 0.5s;
}
.card.card-tournament::after {
  content: "";
  position: absolute;
  width: 350px;
  height: 180px;
  background: #0237d2;
  border-radius: 50%;
  filter: blur(69px);
  opacity: 0;
  left: -100px;
  top: 60px;
  z-index: -1;
  transition: all 0.5s;
}
.card.card-tournament:hover::before {
  opacity: 0.5;
  right: 100px;
}
.card.card-tournament:hover::after {
  opacity: 0.6;
  left: 100px;
}
.card-tournament.card-tournament-transparent {
  background-color: var(--background-color);
}
.row-cards-tournament:has(div .card-tournament:hover)
  .card-tournament:not(:hover) {
  opacity: 0.5;
}

.card.card-tournament:hover {
  border-color: var(--border-color-light) !important;
  background-color: var(--background-color);
  transform: scale(1.05);
}

.card-tournament-time {
  display: flex;
  gap: 8px;
  white-space: nowrap;
}

.card-tournament-time-wrap {
  background: var(--background-color);
  flex-direction: column;
  padding: 2px;
  border-radius: var(--rounded-4);
  text-align: center;
  padding-inline: 10px;
  border: solid 2px var(--border-color-secondry);
  padding-block: 6px;
  background-image: radial-gradient(
    circle at 50% 0%,
    rgb(20 20 20 / 75%) 0%,
    rgb(0 0 0 / 75%) 40%,
    rgb(0 0 0 / 75%) 100%
  );
  padding-block: 6px;
  backdrop-filter: blur(6px);
  /* min-height: 90px; */
  min-width: 216px;
  align-items: center;
  justify-content: center;
  display: flex;
}
.card-tournament-time-wrap,
.badge-tournament-card.badge {
  position: absolute;
  transform: translateX(-50%);
  left: 50%;
  bottom: 10px;
}

.card-tournament-time > div {
  display: flex;
  gap: 4px;
  font-size: small;
  font-weight: var(--font-weight-bold);
}
.card-tournament-body-top {
  min-height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  padding-inline: 12px;
  border-bottom: solid 1px rgba(255, 255, 255, 0.071);
}
.card-tournament-body-mid {
  display: flex;
  font-size: var(--font-size-sm);
  align-items: center;
  padding: 12px;
}

.card-tournament-body-footer {
  border-top: solid 1px rgba(255, 255, 255, 0.071);
  display: flex;
  align-items: center;
  padding: 12px 12px;
}
.card-tournament-body-midItem {
  display: flex;
  align-items: center;
  justify-content: start;
  flex-grow: 1;
  gap: 4px;
  @media screen and (max-width: 450px) {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }
}
.card-tournament-body-midItem > span {
  display: flex;
  flex-direction: column;
  justify-content: start;
}

.card-tournament-gameDates {
  display: flex;
  justify-content: space-between;
  @media screen and (max-width: 550px) {
    justify-content: space-between;
    font-size: var(--font-size-en);
  }
}

.card-tournament-body-top i {
  font-size: smaller;
}
.card-tournament-body-midItem {
  display: flex;
  align-items: center;
  justify-content: start;
}
.card-tournament-time-wrap.card-tournament-time-closed {
}
.card-tournament-time-wrap.card-tournament-time-closed > label {
  color: var(--color-danger);
  margin: 0;
  white-space: nowrap;
}
.card-tournament-time-wrap > label {
  margin-bottom: 8px;
  font-size: var(--font-size);
  font-weight: var(--font-weight-bold);
  color: var(--color-success);
  display: flex;
  justify-content: center;
  gap: 4px;
  align-items: center;
}

.card-tournament-prize {
  background: linear-gradient(
    103.59deg,
    rgba(163, 59, 0, 1) 0%,
    rgba(242, 88, 1, 1) 30.186927318572998%,
    rgba(255, 184, 0, 1) 100%
  );
  background-size: 140%;
  border-radius: var(--rounded-4);
  border-style: solid;
  border-color: var(--color-warning);
  border-width: 3px;
  padding: 6px;
  display: flex;
  flex-direction: row;
  gap: 5px;
  align-items: center;
  justify-content: center;
  z-index: 1;
  color: var(--text-color-black);
  position: absolute;
  left: 50%;
  font-weight: var(--font-weight-bolder);
  transform: translate(-50%, 30%);
}

.card-Kpi-prize-pool {
  position: relative;
  text-align: center;
}

.card-Kpi-prize-pool label {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-yellow);
  background-clip: unset;
}

.card-Kpi-prize-pool h3 {
  position: relative;
  font-size: 38px;
  color: var(--color-yellow);
  /*
  filter: brightness(1) contrast(1.1) saturate(1.2) hue-rotate(-18deg);
  background: radial-gradient(
    circle farthest-corner at top left,
    rgb(255 252 0) 30%,
    #ffb861 55%,
    #f05b01 60%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;*/
  font-weight: 500;
}

.card-Kpi-prize {
  min-width: fit-content;
}

.btn-kpi-dicord {
  width: fit-content;
}

.profile-kpis .card-Kpi {
  min-width: fit-content;
}

.card-Kpi-fee {
  .profile-kpis .card-kpi-val.h3 {
    font-size: var(--font-size-xxl);
  }
  .card-Kpi-fee-usd {
    font-size: var(--font-size-lg);
    color: var(--color-blue-200);
  }
}

.card-tournament-players-wrap {
  display: flex;
  gap: 4px;
  font-size: smaller;
  align-items: center;
}
.card-tournament-players {
  display: flex;
}
.card-tournament-player {
  width: 30px;
  height: 30px;
  border: solid 2px var(--border-color-secondry);
  border-radius: 50%;
  background: var(--background-color-light);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--background-color);
}

.card-tournament-player i {
  color: var(--text-color-secondry);
}

.card-tournament-player + .card-tournament-player {
  margin-inline-start: -12px;
}

.inviteTxt {
  text-align: center;
}

.inviteTxt .bdrDiv {
  border-left: 3px solid #1800ff;
  border-top: 3px solid #1800ff;
  border-right: 3px solid #fe0000;
  border-bottom: 3px solid #fe0000;
  padding: 2rem;
}

.inviteTxt .bdrDiv p span {
  color: #fff;
}
.signUpCont {
  text-align: center;
}

.banner-betaWait {
  border-radius: var(--rounded-4);
  overflow: hidden;
  position: relative;
}

.banner-betaWait h1 {
  font-weight: var(--font-weight-bold);
  text-transform: capitalize;
  margin: 0;
}

.banner-betaWait p {
  font-weight: var(--font-weight-bold);
}

.banner-betaWait-txt {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-inline-start: 24px;
  align-items: center;
  gap: 8px;
}

.banner-favGame {
  border-radius: var(--rounded-4);
  overflow: hidden;
  position: relative;
}

.banner-favGame-txt {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  left: 50%;
  flex-direction: column;
  transform: translate(-50%, -50%);
  top: 50%;
  background-color: rgba(0, 0, 0, 0.7);
  padding: 4px 18px;
  border-radius: 13px;
}
.img-banner-favGame {
  width: 100%;
  max-width: 100%;
  object-fit: cover;
  height: 150px;
  @media screen and (max-width: 650px) {
    height: 35px;
  }
}

.banner-favGame p {
  margin: 0;
  font-size: 14px;
}

.banner-favGame h1 {
  margin: 0;
  font-size: 24px;
}

.img-banner-betaWait {
  max-width: 100%;
  object-fit: cover;
}

.header-img-txt {
  h1 {
    font-weight: var(--font-weight-bold);
    font-size: 26px;
    margin: 0;
    transition: all 0.3s;
  }
  p {
    font-weight: var(--font-weight-bold);
    padding: 0;
    transition: all 0.3s;
  }
}

.header-img-thumbArea {
  opacity: 1;
  transition: all 0.3s;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 18px;
  z-index: 1;
}

.header-img-title {
  white-space: nowrap;
  font-size: 22px;
  margin: 0;
}

.header-img-logo {
  object-fit: contain;
  mix-blend-mode: inherit;
  background-color: white;
  border-radius: 8px;
  max-height: 50px;
  width: auto;
}
.header-img-logo-wrap {
  display: inline-block;
  border: solid 2px #ffffff40;
  border-radius: 12px;
  overflow: hidden;
  padding: 6px;
  mix-blend-mode: overlay;
}
.header-img-txt {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 8px;
  padding-inline: 10px;
  left: 50%;
  translate: -50%;
  min-width: 90%;
  padding-block: 4px;
  transition: all 0.5s ease;
  align-items: center;
  opacity: 0;
  background-color: rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(10px);
  border-radius: 13px;
} /*
.card.card-Kpi::before {
  content: "";
  display: block;
  width: 100px;
  height: 100px;
  position: absolute;
  background: #3fd8c9;
  border-radius: 50%;
  filter: blur(56px);
  right: -50px;
  bottom: -50px;
  opacity: 0.6;
}
.card.card-Kpi::after {
  content: "";
  display: block;
  width: 100px;
  height: 100px;
  position: absolute;
  background: #d8c13f;
  border-radius: 50%;
  filter: blur(56px);
  left: -50px;
  top: -50px;
  opacity: 0.6;
}*/
.adBanner-side {
  border-radius: var(--rounded-4);
  overflow: hidden;
  position: relative;
}

.adBanner-side-content {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.631);
  top: 50%;
  transform: translateY(-50%);
  border-radius: 8px;
  padding-inline: 10px;
  left: 50%;
  translate: -50%;
  min-width: 90%;
  text-align: center;
  padding-block: 4px;
}

.adBanner-side-content h1 {
  font-weight: var(--font-weight-bold);
  font-size: 26px;
  margin: 0;
}

.adBanner-side-content p {
  font-weight: var(--font-weight-bold);
  padding: 0;
}
.adBanner-side-img {
  max-width: 100%;
  object-fit: cover;
  min-height: 150px;
}
.card-newFeature-ico {
  width: 64px;
  height: 64px;
  border: solid 2px var(--border-color-secondry);
  border-radius: var(--rounded-4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-pink);
  margin-inline: auto;
  font-size: 18px;
}

.card-newFeature {
  padding: 24px;
}
.card-newFeature .card-title {
  margin-block: 24px;
}
.card-newFeature p {
  margin: 0;
}

.topGames .title {
  background-color: #fff;
  padding: 3rem;
  text-align: center;
}
.topGames .title h3 {
  font-weight: normal;
  font-style: normal;
}

.badge.badge-topGames {
  margin-bottom: 8px;
}

.featureBox {
  border: 2px solid #fff;
  text-align: center;
  padding: 3rem 2rem;
  margin-top: 8rem;
}
.featureBox h2 {
  color: #fff;
  font-size: 1.2rem;
}
.card.card-companyLatest {
  overflow: hidden;
  padding: 24px;
  cursor: pointer;
  transition: all 0.3s;
}

.card.card-companyLatest:hover {
  border-color: var(--border-color-light) !important;
}

.card-companyLatest-img {
  display: flex;
  justify-content: center;
  width: 80px;
  height: 80px;
  margin-bottom: 24px;
  margin-inline: auto;
  border-radius: var(--rounded-3);
  overflow: hidden;
  transition: all 0.3s;
}

.card.card-companyLatest:hover .card-companyLatest-img {
  rotate: 45deg;
}
.card-companyLatest-img > img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  mix-blend-mode: luminosity;
  transition: all 0.3s;
}
.card.card-companyLatest:hover img {
  mix-blend-mode: normal;
  rotate: -45deg;
  scale: 1.5;
}
.companyLatest .title {
  padding: 5rem 3rem;
}
.companyLatest .title h3 {
  font-size: 2.4rem;
}
.companyLatest .title h3 span {
  color: #404040;
}
.latestNews .card p {
  color: #404040;
  font-size: 1.4rem;
  font-family: "Century Gothic";
  font-weight: bold;
  font-style: normal;
}
.latestNews .card {
  min-height: 120px;
}

.gamedetail-endTime {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: flex-start;
  @media screen and (min-width: 768px) {
    padding-inline: 22px;
  }
}
.gamedetail-endDate {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: start;

  @media screen and (min-width: 1000px) {
    padding-inline: 22px;
  }
}

.gamedetail-endDate-txt {
  max-width: fit-content;
}

.gamedetail-endTime small,
.gamedetail-endDate small {
  margin-bottom: 6px;
  display: block;
}

.gamedetail-endDate::before,
.gamedetail-endTime::before {
  @media screen and (min-width: 1000px) {
    content: "";
    display: block;
    width: 1px;
    height: 48px;
    position: absolute;
    top: 4px;
    left: 0;
    background: var(--color-danger);
  }
}
.days-format {
  display: flex;
  font-weight: var(--font-weight-bold);
  text-align: center;
  opacity: 0.7;
  justify-content: space-around;
  font-size: small;
  letter-spacing: 0.5px;
}
.gamedetail-gameImg {
  position: relative;
  width: 100%;
  min-width: 150px;
  height: 225px;
  background: #ffffff1a;
  border-radius: var(--rounded-4);
  overflow: hidden;

  span {
    position: absolute;
    width: 100%;
    text-align: center;
    top: 40%;
    font-size: 14px;
    font-weight: 600;
    padding-inline: 8px;
    z-index: 1;
  }
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--rounded-4);
    z-index: 2;
    position: relative;
  }
  &::after {
    content: "";
    position: absolute;
    width: 150px;
    height: 150px;
    background: #02abd2;
    border-radius: 50%;
    filter: blur(36px);
    opacity: 0.8;
    left: -40px;
    top: -50px;
    /* z-index: 0; */
  }
  &::before {
    content: "";
    width: 150px;
    height: 140px;
    background: #c96aff;
    position: absolute;
    filter: blur(35px);
    opacity: 1;
    border-radius: 50%;
    right: -63px;
    bottom: -50px;
  }
}

.gamedetail-dateTime {
  display: flex;
  margin-block: 47px;
  @media screen and (max-width: 575px) {
    flex-direction: column;
    margin-bottom: 0px;
  }
}

.btn-regSoon {
  @media screen and (max-width: 768px) {
    min-width: 100%;
  }
}

.dropdown.playLink a {
  position: relative;
}
.dropdown.playLink .dropdown-menu {
  min-width: 20rem;
  top: 75px;
}
/*.dropdown.playLink .dropdown-menu a.game {position: relative;display: block;opacity: .75;transition: all .3s ease;}*/
.dropdown.playLink .dropdown-menu li {
  border-bottom: 1px solid #202020;
}
.dropdown.playLink .dropdown-menu li a {
  padding: 0.75rem;
  color: #787878;
}
.dropdown.playLink .dropdown-menu li.viewallgames {
  text-align: center;
  border-color: #101010;
}
.dropdown.playLink .dropdown-menu li.viewallgames a,
.dropdown.playLink .dropdown-menu li.viewallgames a:hover {
  background-color: #101010;
}
.dropdown.playLink .dropdown-menu li a:hover {
  background-color: #1e2126;
  color: #fff;
}
.dropdown.playLink .dropdown-menu a img {
  margin-right: 1rem;
}
.dropdown-menu {
  background-color: var(--background-color-dd);
  padding: 0px;
  border-radius: var(--rounded-3);
  border: none;
}

.innerLogoArea {
  text-align: center;
  padding: 4rem 0 6rem 0;
}
.greyBox {
  width: 760px;
  margin: 0 auto 5rem auto;
  background-color: #0f1934;
}
.greyBox .head {
  text-align: center;
}
.card.card-login {
  background: radial-gradient(
      farthest-corner at bottom -150px right -150px,
      rgb(39 2 254 / 15%) 0%,
      rgba(197, 38, 5, 0) 60%
    ),
    radial-gradient(
      farthest-corner at top -100px left -100px,
      rgba(2, 40, 254, 0.28) 0%,
      rgba(197, 38, 5, 0) 50%
    ),
    radial-gradient(
      farthest-corner at bottom -150px left -150px,
      rgba(6, 2, 254, 0.48) 0%,
      rgba(197, 38, 5, 0) 50%
    ),
    linear-gradient(to left, #020617ba, #02061700);
  max-width: 1000px;
  min-height: 550px;
  margin-inline: auto;
  border-width: 0;
  margin-block: 80px;
  background-color: transparent;
  @media screen and (max-width: 768px) {
    margin-block: 0px;
  }
}

.card.card-login .form-check {
  max-width: fit-content;
}
.card-login-logo {
  text-align: center;
  margin-bottom: 18px;
  margin-top: 8px;
}

.card-login .card-body::before {
  background-image: url(../images/img-login.png);
  background-position: left center;
  background-repeat: no-repeat;
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 50%;
  border-radius: var(--rounded-4);
  filter: drop-shadow(37px 0px 80px rgba(245, 139, 0, 0.122) 48%, 0.122);
  mix-blend-mode: revert;
  background-position: left -330px top -290px;
}

[lang="ar"] .card-login .card-body::before {
  right: 0;
  left: unset;
  background-position: right center;
  background-position: right -330px top -290px;
}

.card-login-head {
  text-align: center;
  margin-bottom: 18px;
}
.card-login-head h3 {
  margin: 0;
  margin-bottom: 16px;
}
.card-login-head p {
  margin: 0;
}
.card.card-login::before {
  content: "";
  display: block;
  position: absolute;
  width: 600px;
  height: 600px;
  z-index: 2;
  right: 0;
  bottom: 0;
  background: #00cfff;
  border-radius: 50%;
  filter: blur(121px);
  z-index: -1;
  opacity: 0;
}
.card.card-login::before {
  content: "";
  display: block;
  position: absolute;
  width: 600px;
  height: 600px;
  z-index: 2;
  right: 0;
  bottom: 0;
  background: #0070ff;
  border-radius: 50%;
  filter: blur(121px);
  z-index: -1;
  opacity: 0;
}

.formContent {
  padding: 4rem 8rem 1rem 8rem;
}
.greyBoxContent {
  padding: 4rem 4rem 1rem 4rem;
}

.form-control,
.form-select {
  background-color: var(--input-background);
  border-radius: var(--rounded-2);
  border: 1px solid var(--border-color-secondry);
  color: var(--text-color-white);
  font-family: var(--font-family);
  font-size: var(--body-font-size);
  min-height: var(--formControl-height);
  transition: all 0.25s;
}

.form-check {
  display: flex;
  align-items: center;
  gap: 8px;
}
.form-check .form-check-input {
  float: none;
  margin: 0;
}

.form-select {
  font-weight: var(--font-weight-bold);
  background-image: url(../images/ico-arrowDown.png);
  background-position: right 8px center;
  background-size: 16px;
}

.form-control:hover {
  background-color: var(--input-background);
  color: var(--text-color-white);
  border: 1px solid var(--border-color-light);
}

.form-control:active,
.form-control:focus {
  border: 1px solid var(--border-color-white);
}

.form-control:disabled,
.form-control[readonly] {
  color: var(--text-color-secondry);
  background-color: var(--input-background);
  border: 1px solid var(--border-color-secondry);
}
.form-control.form-control-verifyCode {
  padding-block: 18px;
}
.form-check-input {
  background-color: var(--input-background);
  border: 1.7px solid var(--border-color-secondry);
}

.form-check-input:checked {
  background-color: var(--input-background);
  border: 1.7px solid var(--border-color-secondry);
}

input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: 0.3;
}

body.LoginPg .actionBtns {
  border-bottom: 1px solid #384d70;
  padding-bottom: 2.5rem;
  margin-bottom: 0.5rem;
}
.formContent .socialBar {
  padding: 0px;
  margin: 0px;
}

.footer {
  padding-top: 38px;
  min-height: 260px;
  position: relative;
  isolation: isolate;
  background-image: radial-gradient(
    ellipse at top center,
    rgb(255 255 255 / 11%),
    rgb(255 255 255 / 0%) 50%
  );
}

.footer-left {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
}

.FooterNav {
  display: flex;
  flex-direction: column;
  gap: 24px;
  ul {
    padding: 0;
    margin: 0;
    list-style: none;
  }
  a {
    white-space: nowrap;
    margin-bottom: 6px;
    display: inline-block;
    font-size: var(--font-size);
  }
  h5 {
    margin-bottom: 12px;
    text-transform: capitalize;
  }
}

.socialBar ul li.twitter a {
  background-color: #1da1f2;
}
.socialBar ul li.facebook a {
  background-color: #3b5998;
}
.socialBar ul li.instagram a {
  background-color: #f001d1;
}
.socialBar ul li.youtube a {
  background-color: #ff0000;
}
.socialBar ul li.discord a {
  background-color: #5562ea;
}
.socialBar ul li.twitch a {
  background-color: #653da8;
}

.socialBar {
  a {
    color: var(--text-color);
    background-color: rgb(0 0 255 / 0%);
    background-image: linear-gradient(
      40.17deg,
      rgb(255 255 255 / 10%) 10%,
      rgb(255 255 255 / 10%) 80%
    );
    -webkit-border-radius: 50%;
    border-radius: 14px;
    width: 40px;
    height: 40px;
    display: flex;
    font-size: small;
    text-align: center;
    justify-content: center;
    align-items: center;
    transition: all 0.3s;
    i {
      transition: all 0.2s;
    }
    &:hover {
      background-color: rgb(0 0 255 / 50%);
      scale: 0.8;
      i {
        scale: 1.4;
      }
    }
  }
  ul {
    white-space: nowrap;
    padding: 0;
  }
}

.datepicker-dropdown {
  background-color: #fff !important;
}
.input-group.date .form-control {
  border-right: none;
}
.input-group.date .input-group-text {
  background-color: #051024;
  border: 1px solid #12203a;
  border-left: none;
  -webkit-border-radius: 0;
  border-radius: 0;
  color: #fff;
}

.alert.is-invalid:has(.list-password-valid) {
  @media screen and (max-width: 1024px) {
    position: relative;
  }
}

.list-password-valid {
  list-style: none;
  margin: 0;
  padding: 0;
}

.list-password-valid {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--background-color);
  padding: 10px 16px;
  z-index: 20;
  position: absolute;
  min-width: 200px;
  border-radius: var(--rounded-4);
  margin-left: 350px;
  margin-top: -39px;
  @media screen and (max-width: 1024px) {
    margin-left: 0px;
    margin-top: 10px;
    position: relative;
  }
}

.alert.alert-validation {
  padding: 0;
  background: transparent;
  border: none;
  color: var(--color-danger);
  font-size: smaller;
  margin: 0;
  position: absolute;
}
.form-control.is-invalid {
  transition: none;
}
.alert.alert-primary .fa-info-circle {
  margin-right: 10px;
}

textarea {
  resize: none;
}
body.verifyCodePg .formContent {
  padding: 4rem 6rem 0.5rem 6rem;
}

/*.codeCont {width: 520px;margin: 0 auto;}*/
.codeCont .form-control {
  min-height: 90px;
  width: 90px;
  text-align: center;
}
.codeCont {
  text-align: center;
}
.codeCont label {
  color: #fff;
  margin-top: 2rem;
}
.packages {
  display: grid;
  grid-auto-flow: column;
  gap: 12px;
  justify-content: center;
  margin-bottom: 32px;
}

.package.package-switch {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  li {
    padding: 0;
  }
}

.package .list-group .list-group-item span {
  margin: 0px 5px;
}

.package {
  background: radial-gradient(
      farthest-corner at bottom -50px left -50px,
      rgba(2, 194, 254, 0.25) 0%,
      rgba(197, 38, 5, 0) 60%
    ),
    radial-gradient(
      farthest-corner at bottom -50px right -50px,
      rgba(2, 194, 254, 0.25) 0%,
      rgba(197, 38, 5, 0) 60%
    ),
    radial-gradient(
      farthest-corner at top 30px left 80px,
      rgba(254, 237, 2, 0.15) 0%,
      rgba(197, 38, 5, 0) 60%
    ),
    linear-gradient(to left, #020617, #020617);
  min-width: 160px;
  transition: all 0.3s;
  border: solid 2px var(--border-color-secondry);
  border-radius: var(--rounded-4);
  overflow: hidden;
  text-align: center;
  padding: 1rem;
  mix-blend-mode: lighten;
  width: 270px;
}

.package .list-group-item {
  background-color: transparent;
  border: none;
  color: var(--text-color-white);
}
.package:hover {
  cursor: pointer;
}

/*.package {width: 33.33%;float: left;}*/
.package.one .list-group {
  -webkit-border-radius: 4px 0 0 4px;
  border-radius: 4px 0 0 4px;
}
.package.three .list-group {
  -webkit-border-radius: 0 4px 4px 0;
  border-radius: 0 4px 4px 0;
}
.package.two .list-group {
  -webkit-border-radius: 0;
  border-radius: 0;
}

.package:hover,
.package.selected {
  border-color: var(--color-warning);
}

.mdc-slider div.mdc-slider__track {
  top: 40%;
}

.mat-mdc-slider div.mdc-slider__thumb-knob {
  background-color: var(--color-purple-500);
  border-color: white;
  border-width: 5px !important;
  outline: solid 10px rgba(128, 0, 128, 0.412);
}
.mat-mdc-slider div.mdc-slider__track--inactive,
.mat-mdc-slider div.mdc-slider__track--active {
  height: 16px;
}
.mat-mdc-slider div.mdc-slider__track--active_fill {
  border-top-width: 16px;
}
.mat-mdc-slider div.mdc-slider__tick-marks {
  padding-top: 7px;
}

.mat-mdc-slider div.mdc-slider__track--active_fill {
  border-image: linear-gradient(
    79.52deg,
    rgba(28, 33, 153, 1) 0%,
    rgba(128, 11, 163, 1) 100%
  );
  border-image-slice: 1;
}

.mdc-slider div.mdc-slider__value-indicator-container {
  bottom: 60px;
}

.mat-mdc-slider div.mdc-slider__value-indicator {
  background-color: rgba(37, 99, 235, 0.3);
  opacity: 1;
  border-radius: 18px;
  text-align: center;
  padding: 8px 16px;
  min-height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: var(--font-weight-bold);
}

.mdc-slider div.mdc-slider__value-indicator::before {
  border-top: 6px solid rgba(37, 99, 235, 0.3);
}

.hour-slider-wrap {
  background-image: url(../images/img-coins-bars.png);
  background-position: top center;
  background-repeat: no-repeat;
  padding-top: 160px;
  background-size: 200px;
}
.slider-tokkens-info {
  background: linear-gradient(
    0deg,
    rgba(253, 224, 71, 0.26) 0%,
    rgba(253, 224, 71, 0.06) 100%
  );
  border-radius: var(--rounded-5, 16px);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: var(--canvas-gap-3, 16px);
  align-items: center;
  justify-content: flex-start;
  position: relative;
  min-width: 110px;
  mix-blend-mode: lighten;
}

body.pricingPg .greyBoxContent {
  padding: 4rem 4rem 5rem 4rem;
}
body.pricingPg .greyBoxContent .alert-primary {
  margin-bottom: 3rem;
}
body.pricingPg .greyBoxContent .alert-primary .fa-circle-info {
  font-size: 1.3rem;
  margin-right: 10px;
}

.btn.white {
  border: 1px solid #fff;
  font-size: 1.4rem;
  padding: 0.75rem 3rem;
}

.pageSeprator {
  height: 16px !important;
  opacity: 1;
  background-color: #000;
}
.blogImg {
  position: relative;
  overflow: hidden;
  max-height: 500px;
}
.blogImg.bigImage {
  position: relative;
  overflow: hidden;
  height: 500px;
}
.blogImg .info {
  position: absolute;
  bottom: 0px;
  left: 0px;
  right: 0px;
  padding: 30px 0px 10px 20px;
}
.shadowBlack {
  background: -moz-linear-gradient(
    top,
    rgba(255, 255, 255, 0) 0%,
    rgba(11, 11, 11, 0) 38%,
    rgba(0, 0, 0, 1) 100%
  );
  background: -webkit-linear-gradient(
    top,
    rgba(255, 255, 255, 0) 0%,
    rgba(11, 11, 11, 0) 38%,
    rgba(0, 0, 0, 1) 100%
  );
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(11, 11, 11, 0) 38%,
    rgba(0, 0, 0, 1) 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#000000',GradientType=0 );
}

.blogImg .info h5 {
  font-size: 1.8rem;
  color: #fff;
  padding-inline-end: 6rem;
}
.blogImg img {
  width: 100%;
}
.blogImg.small h5 {
  font-size: 1.05rem;
  color: #fff;
  padding-inline-end: 0.5rem;
}
.blogImg.small .info p {
  font-size: 0.75rem;
}
.followgamesaibar {
  background: rgb(254, 4, 2);
  background: -moz-linear-gradient(
    left,
    rgba(254, 4, 2, 1) 0%,
    rgba(66, 49, 253, 1) 100%
  );
  background: -webkit-linear-gradient(
    left,
    rgba(254, 4, 2, 1) 0%,
    rgba(66, 49, 253, 1) 100%
  );
  background: linear-gradient(
    to right,
    rgba(254, 4, 2, 1) 0%,
    rgba(66, 49, 253, 1) 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fe0402', endColorstr='#4231fd',GradientType=1 );
}
.followgamesaibar a.white,
.popularArticles a.white {
  opacity: 1;
}
.followgamesaibar a.white:hover,
.popularArticles a.white:hover {
  opacity: 0.75;
}
.followgamesaibar a .fab,
.popularArticles a .fab {
  margin-right: 15px;
}
.followgamesaibar h5 {
  font-size: 1.6rem;
}

.infoRight h5 {
  font-size: 1.6rem;
  padding-inline-end: 3rem;
}
.latestNews .blogImg.big {
  height: 291px;
  overflow: hidden;
}
section.footerInner {
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#00163e+0,fe0000+100 */
  background: #00163e;
  /* Old browsers */
  background: -moz-linear-gradient(left, #00163e 0%, #fe0000 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(left, #00163e 0%, #fe0000 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, #00163e 0%, #fe0000 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00163e', endColorstr='#fe0000', GradientType=1);
  margin-top: 6rem;
}
section.footerInner .bgImg {
  background-image: url(../images/img-innerfooter-bg.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
.popularArticles {
  padding-inline-start: 5rem;
  padding-top: 2rem;
}
.popularArticles .head h5 {
  font-size: 2rem;
}
.followBox {
  background: rgb(254, 4, 2);
  background: -moz-linear-gradient(
    left,
    rgba(254, 4, 2, 1) 0%,
    rgba(66, 49, 253, 1) 100%
  );
  background: -webkit-linear-gradient(
    left,
    rgba(254, 4, 2, 1) 0%,
    rgba(66, 49, 253, 1) 100%
  );
  background: linear-gradient(
    to right,
    rgba(254, 4, 2, 1) 0%,
    rgba(66, 49, 253, 1) 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fe0402', endColorstr='#4231fd',GradientType=1 );
  color: #fff;
  text-align: center; /*max-width: 375px;*/
}
.followBox h5 {
  font-size: 1.4rem;
}
.contentShort h5 {
  font-size: 2rem;
}
.contentShort p.date {
  font-size: 1.1rem;
  opacity: 0.67;
}

.headerInner {
  text-align: center;
  padding-top: 7rem;
  min-height: 305px;
}
.watchUsPg .headerInner {
  background-image: url(../images/watchus-bg.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.dashboardPg .headerInner {
  background-image: url(../images/dashboard-bg.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.leaderboardPg .headerInner {
  background-image: url(../images/leaderboard-bg.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.contentPg .headerInner {
  background-image: url(../images/contentpages-bg.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.metaversePg .headerInner {
  background-image: url(../images/metaverse-bg.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.toomicsPg .headerInner {
  background-image: url(../images/toomics-bg.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.toomicsPg2 .headerInner {
  background-image: url(../images/toomics-bg2.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.tournamentsPg .headerInner {
  background-image: url(../images/tournaments-bg.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.metaversePg2 .headerInner {
  background-image: url(../images/metaverse-bg2.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.gamedevPg .headerInner {
  background-image: url(../images/gamedev-bg.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.recentTournamenets .card,
.recentGames .card {
  margin: 0px;
}
.headerInner h5 {
  font-size: 4rem;
}
.watchBox {
  background-color: #070c21;
  text-align: center;
}
.watchBox .contentArea p {
  background-color: #653da8;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  text-align: center;
  margin: 0 auto;
  padding-top: 31px;
}
.watchBox .contentArea.youtube p {
  background-color: #ca2527;
}
.watchBox .contentArea p .fab {
  font-size: 2.5rem;
}
.watchBox .contentArea h5 {
  font-size: 2.2rem;
}
.watchBox .bottomContent a {
  display: block;
  background: rgb(254, 4, 2);
  background: -moz-linear-gradient(
    left,
    rgba(254, 4, 2, 1) 0%,
    rgba(66, 49, 253, 1) 100%
  );
  background: -webkit-linear-gradient(
    left,
    rgba(254, 4, 2, 1) 0%,
    rgba(66, 49, 253, 1) 100%
  );
  background: linear-gradient(
    to right,
    rgba(254, 4, 2, 1) 0%,
    rgba(66, 49, 253, 1) 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fe0402', endColorstr='#4231fd',GradientType=1 );
  color: #fff;
  text-align: center;
  font-size: 1.4rem;
}

.vdoPlay {
  text-align: center;
  min-height: 352px;
  background-position: center center;
  background-size: cover;
  padding-top: 7rem;
}
.vdoPlay a {
  background-color: #fff;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  width: 130px;
  height: 130px;
  text-align: center;
  margin: 0 auto;
  padding-top: 50px;
  display: block;
}
.vdoPlay a:hover {
  transform: scale(0.9);
}
.vdoPlay a .fas {
  font-size: 2rem;
  color: #fe0402;
}
.vdoPlay.game1 {
  background-image: url(../images/img-watchus-1.jpg);
}
.vdoPlay.game2 {
  background-image: url(../images/img-watchus-2.jpg);
}

body.blogPg .blogImg.bigImage {
  background-image: url(../images/img-blog-header.jpg);
  background-position: top center;
  background-size: cover;
  width: 100%;
  height: 516px;
}
body.blogPg .blogImg.small {
  width: 100%;
  height: 238px;
  background-position: top center;
  background-size: cover;
}
body.blogPg .blogImg.smalllatest {
  width: 100%;
  height: 319px;
  background-position: top center;
  background-size: cover;
}
body.blogPg .blogImg.game1 {
  background-image: url(../images/img-blog-header2.jpg);
}
body.blogPg .blogImg.game2 {
  background-image: url(../images/img-blog-header3.jpg);
}
body.blogPg .blogImg.game3 {
  background-image: url(../images/img-blog-header4.jpg);
}
body.blogPg .blogImg.game4 {
  background-image: url(../images/img-blog-header5.jpg);
}
body.blogPg .blogImg.game5 {
  background-image: url(../images/img-blog-header6.jpg);
}
body.blogPg .blogImg.newsbig {
  width: 100%;
  height: 291px;
  background-position: top center;
  background-size: cover;
  background-image: url(../images/img-blog-news-big.jpg);
}

.card.card-profile {
  background-color: rgba(0, 0, 0, 0.25);
  background-image: url(../images/right-side-circles.png),
    url(../images/left-side-circles.png);
  background-position: right -110px top -133px, left -66px top -40px;
  background-repeat: no-repeat, no-repeat;
  border: 2px solid var(--border-color-secondry);
  min-height: 490px;
}

.card-profile-img {
  object-fit: cover;
  border-radius: 50%;
  border: solid 3px var(--border-color-light);
  height: 89px;
  width: 89px;
  max-width: 89px;
  max-height: 89px;
}

.card-profile .card-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1.5rem 2rem;
  border: none;
}
.card-profile-imgWrap {
  position: relative;
}
.card-profile-status {
  gap: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-profile .card-body {
  padding: 1.5rem 2rem;
}

.card-profile-kpi {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.profile-kpis {
  /*
  display: flex;
  gap: var(--space-lg);
  */
}

.card-kpi-val ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 0px;
  font-weight: 600;
  flex-direction: column;
  position: absolute;
  right: 48px;
  top: 61px;
  letter-spacing: 0.75px;
  text-transform: capitalize;
  font-size: 16px;
}

.card-kpi-val > div > span {
  font-size: var(--font-size-xxl);
}

.card-Kpi-prize {
  min-width: fit-content;
}

.profile-kpis .card-kpi-val.h3 {
  font-size: var(--font-size-xxl);
}

.card-profile-kpi-val {
  border: solid 2px rgba(154, 173, 179, 0.25);
  padding: 0.75rem 0.5rem;
  border-radius: var(--rounded-4);
  width: 100%;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.25);
}
.card.card-Kpi.card-Kpi-success {
  background-color: var(--color-success);
  border-color: var(--color-success) !important;
}
.card-header.profileCardHead > a {
  background: var(--background-color-lighter);
  width: 30px;
  display: inline-block;
  height: 30px;
  display: flex;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: 14px;
  top: 14px;
  color: var(--text-color-white);
  transition: all 0.25s;
}
.card-header.profileCardHead > a:hover {
  transform: scale(1.3);
}
.card.card-Kpi.card-Kpi-success::before {
  content: "";
  background: #76e2c3;
  opacity: 1;
  right: -20px;
}
.card.card-Kpi {
  background: rgb(0 0 0);
  background-image: radial-gradient(
      circle at top left,
      rgb(0 0 255 / 30%),
      rgba(247, 6, 255, 0) 30%
    ),
    radial-gradient(
      circle at bottom right,
      rgb(0 0 255 / 55%),
      rgba(195, 0, 234, 0) 50%
    );
  padding: 2rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  /* overflow: hidden; */
  position: relative;
  border: solid 2px #01041100;
  min-height: 192px;
  background-repeat: no-repeat;

  &::before {
    content: "";
    position: absolute;
    /* left: 0; */
    /* right: 0; */
    /* bottom: 0; */
    background-image: linear-gradient(
      -45deg,
      #ffffff 0%,
      #0081ff 10%,
      #f900ff00 30%,
      #f900ff00 70%,
      #006cfe 90%
    );
    background-repeat: no-repeat;
    /* opacity: 0; */
    inset: -5px;
    z-index: -1;
    border-radius: 12px;
  }
}

.card-kpi-top {
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 14px;
  i {
    font-size: var(--font-size-xxl);
  }
  > label {
    white-space: nowrap;
    font-size: var(--font-size-xxl);
  }
}
.card-kpi-bottom {
  display: flex;
  justify-content: center;

  .card-kpi-val {
    text-align: center;
  }
}
.card.card-leaderBoard {
  mix-blend-mode: plus-lighter;
}
.profileCard.package {
  border-color: #4231fd;
}

.profileCard .pic a.edit {
  background-color: #29406a;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  color: #fff;
  -webkit-box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.02);
  box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.02);
  position: absolute;
  right: 0px;
  top: 0px;
  padding: 10px 12px;
}

.form-select.form-select-leaderboard {
  mix-blend-mode: plus-lighter;
}

.card-leaderBoard-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.card-leaderBoard-head {
  margin-bottom: 24px;
}

.card-leaderBoard-userImg {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 50%;
  border: solid 2px var(--border-color-light);
}
.card-leaerBoard-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.notifier__container {
  position: fixed;
  top: 14px;
  display: flex;
  justify-content: center;
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--font-size-sm);
  width: 96%;
  max-width: 400px;
  z-index: 10000;
  font-weight: var(--font-weight-bold);
  color: var(--text-color-dark);
  @media screen and (max-width: 768px) {
    top: 60px;
  }
}

.notifier__container-list {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

.alert {
  font-family: var(--font-family);
}

.notifier__notification,
.alert-fixed,
.alert {
  font-weight: 600;
  display: flex;
  align-items: center;

  border-radius: var(--rounded-3);
  padding: 8px 8px;
  gap: 12px;
  background: rgb(0 0 0 / 60%);
  background-image: radial-gradient(
    circle at 0% 0%,
    rgb(106 106 106 / 90%) 0%,
    rgb(0 0 0 / 65%) 10%,
    rgb(0 0 0 / 61%) 60%
  );
  color: var(--color-cyan);
  border: solid 2px var(--color-cyan);
  &.notifier__notification--success,
  &.alert-success {
    color: var(--color-green);
    border-color: var(--color-green);
  }

  &.alert-danger,
  &.notifier__notification--danger,
  &.notifier__notification--error {
    border-color: var(--color-pink-500);
    color: var(--color-pink-500);
  }
  &.alert-info,
  &.notifier__notification--info {
    border-color: var(--color-cyan-400);
    color: var(--color-cyan);
  }
}

.notifier__notification {
  transform: none !important;
}
.alert.alert-fixed {
  position: fixed;
  justify-content: center;
  top: 10px;
  z-index: 9999;
  left: 50%;
  transform: translateX(-50%);
  max-width: 90%;
  transform: translateX(-50%);
  max-width: fit-content;
  @media screen and (max-width: 768px) {
    width: 90%;
    min-width: 370px;
  }
}

.notifier__notification-message {
  flex-grow: 1;
  padding: 0;
  margin: 0;
}

button.notifier__notification-button {
  background: none;
  border: none;
}

.notifier__notification-button-icon path {
  fill: white;
}

.card-leaerBoard-info .badge {
  width: 33px;
  height: 33px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.388);
  padding: 0;
}

.card-leaerBoard-footer {
  display: flex;
  gap: 24px;
}

.card-leaderBoard-badge {
  position: absolute;
  right: 20px;
  top: 0;
  background: rgba(255, 255, 255, 0.11);
  border-bottom-right-radius: 9px;
  border-bottom-left-radius: 9px;
  padding-inline: 8px;
  padding-top: 20px;
  padding-bottom: 8px;
}

.card-leaderBoard-rank {
  font-weight: 800;
  width: 30px;
  height: 30px;
  display: flex;
  border-radius: 50%;
  background: var(--color-amber-400);
  justify-content: center;
  align-items: center;
  color: var(--text-color-dark);
}
.card-leaderBoard-rank.card-leaderBoard-rank-2 {
  background: var(--color-grey-300);
}
.card-leaderBoard-rank.card-leaderBoard-rank-3 {
  background: var(--color-grey-300);
}
.card-leaderBoard-rank.card-leaderBoard-rank-3 {
  background: var(--color-orange-800);
}
.sectionSep {
  background: -moz-linear-gradient(
    left,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 1) 19%,
    rgba(255, 255, 255, 1) 82%,
    rgba(255, 255, 255, 1) 83%,
    rgba(255, 255, 255, 0) 100%
  );
  background: -webkit-linear-gradient(
    left,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 1) 19%,
    rgba(255, 255, 255, 1) 82%,
    rgba(255, 255, 255, 1) 83%,
    rgba(255, 255, 255, 0) 100%
  );
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 1) 19%,
    rgba(255, 255, 255, 1) 82%,
    rgba(255, 255, 255, 1) 83%,
    rgba(255, 255, 255, 0) 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 );
  height: 4px !important;
  margin: 0px;
}
.profileCard .bottomContent {
  text-align: left;
  padding: 2rem 3rem;
}
.profileCard.rankTwo .bottomContent,
.profileCard.rankOne .bottomContent,
.profileCard.rankThree .bottomContent {
  text-align: left;
  padding: 0rem 3rem 2rem 3rem;
}
.btn.purple {
  background: rgb(254, 4, 2);
  background: -moz-linear-gradient(
    left,
    rgba(254, 4, 2, 1) 0%,
    rgba(66, 49, 253, 1) 100%
  );
  background: -webkit-linear-gradient(
    left,
    rgba(254, 4, 2, 1) 0%,
    rgba(66, 49, 253, 1) 100%
  );
  background: linear-gradient(
    to right,
    rgba(254, 4, 2, 1) 0%,
    rgba(66, 49, 253, 1) 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fe0402', endColorstr='#4231fd',GradientType=1 );
  color: #fff;
  width: 100%;
  display: block;
  font-weight: 300;
  font-style: normal;
  color: #fff;
  margin-bottom: 35px;
}
.profileCard.package {
}
.profileCard.package h5 {
  font-size: 2.625rem;
}
.profileCard.package h6 {
  font-size: 2.25rem;
  font-weight: 300;
  font-style: normal;
}
.btn.purple span {
  font-weight: bold;
  font-style: normal;
  font-size: 2rem;
  margin: 0 1rem;
}
.bottomContent h6 {
  font-size: 1rem !important;
  font-family: "Proxima Nova Rg" !important;
  font-weight: normal !important;
  font-style: normal !important;
}
.recentGames {
  margin-top: 4rem !important;
}
.recentTournamenets {
  text-align: left;
  margin-top: 4rem !important;
}

.nav.nav-tabs.nav-tabs-custom {
  z-index: 1000;
  padding-inline: 0;
  position: relative;
  flex-wrap: nowrap;
  overflow-x: scroll;
  overflow-y: clip;
  border-image: linear-gradient(
      to right,
      #ffffff00 0%,
      #ffffffab 10%,
      #ffffffab 90%,
      #ffffff00 100%
    )
    1;
  border-bottom: solid 2px;
  &::-webkit-scrollbar {
    display: none !important;
  }
}

.nav-tabs-custom.nav-tabs .nav-link {
  color: var(--text-color-white);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0.5rem 0.5rem;
  position: relative;
  &::after {
    content: "";
    display: block;
    width: 80%;
    height: 50%;
    position: absolute;
    background: #0097ff;
    border-radius: 50%;
    filter: blur(9px);
    left: 12%;
    bottom: -103%;
    /* opacity: 0; */
    border-color: transparent;
    transition: all 0.3s;
  }

  &.active {
    color: var(--color-primary);
    &::after {
      opacity: 1;
      border-color: var(--color-primary);
      bottom: -40%;
    }
  }

  @media screen and (max-width: 768px) {
    flex-direction: column;
    white-space: nowrap;
  }
}

.nav-tabs-custom.nav-tabs .nav-link i {
}

.nav-tabs-custom.nav-tabs .nav-link:focus,
.nav-tabs-custom.nav-tabs .nav-link:hover,
.nav-tabs-custom.nav-tabs .nav-item.show .nav-link,
.nav-tabs-custom.nav-tabs .nav-link.active {
  color: var(--color-primary);
  background-color: transparent;
  border-color: transparent;
  border-bottom-color: var(--color-primary);
}

.nav-tabs-custom.nav-tabs + .tab-content {
  padding-block: 20px;
}
table {
  width: 100%;
}
.table-striped thead {
  color: #fff;
}
.table-striped thead tr th {
  border-bottom: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.071) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.071);
  padding-block: 16px;
}
.table tr td {
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.071);
  padding-block: 14px;
  color: var(--text-color-light);
  vertical-align: middle;
}
.ngx-pagination {
  margin-left: 0;
  margin-bottom: 1rem;
  padding: 0;
  margin: 0;
}

.ngx-pagination a:hover,
.ngx-pagination button:hover {
  color: var(--text-color-light) !important;
  background: var(--color-primary) !important;
}

.ngx-pagination .current {
  background: transparent !important;
}
.ngx-pagination li {
  display: inline-block;
  color: var(--text-color-light);
}
.ngx-pagination .pagination-next a:after,
.ngx-pagination .pagination-previous a:before,
.ngx-pagination .pagination-previous.disabled:before {
  display: none !important;
}
.ngx-pagination .pagination-next a:after,
.ngx-pagination .pagination-next.disabled:after {
  display: none !important;
}
.ngx-pagination a,
.ngx-pagination button {
  border-radius: var(--rounded-3) !important;
  color: white !important;
}
.ngx-pagination {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
}
.rankTwo .contentArea .fa-chess-king {
  font-size: 1.5rem;
  color: #fff;
}
.profileCard.rankTwo .pic {
  width: 75px;
  height: 75px;
  padding-top: 1.5rem;
}
.profileCard.rankTwo .pic .fa-user {
  font-size: 1.875rem;
}
.profileCard.rankTwo .pic span {
  background-image: url(../images/badge-white.png);
  background-repeat: no-repeat;
  background-position: center center;
  width: 22px;
  height: 23px;
  color: #162541;
  position: absolute;
  top: 0px;
  right: 0px;
  display: inline-block;
  font-size: 0.75rem;
  font-family: "Proxima Nova Rg";
  font-weight: normal;
  font-style: normal;
  font-weight: bold;
  padding-top: 4px;
}
.rankTwo .bottomContent p {
  font-family: "Proxima Nova Rg";
  font-weight: normal;
  font-style: normal;
  font-size: 1.2rem;
  position: relative;
  top: 8px;
}
.rankTwo .bottomContent img.leaderboardSep {
  margin: 0px 20px;
}
.rankTwo .bottomContent p.won {
  color: #16bb48;
}
.rankTwo .bottomContent p.loss {
  color: #fe0402;
}

.rankOne .contentArea .fa-chess-king {
  font-size: 2.5rem;
  color: #ffe352;
}
.profileCard.rankOne .pic {
  width: 125px;
  height: 125px;
  padding-top: 1.5rem;
}
.profileCard.rankOne .pic .fa-user {
  font-size: 3.5rem;
}
.profileCard.rankOne .pic span {
  background-image: url(../images/badge-yellow.png);
  background-repeat: no-repeat;
  background-position: center center;
  width: 41px;
  height: 42px;
  color: #162541;
  position: absolute;
  top: 0px;
  right: 0px;
  display: inline-block;
  font-size: 1.5rem;
  font-family: "Proxima Nova Rg";
  font-weight: normal;
  font-style: normal;
  font-weight: bold;
  padding-top: 4px;
}
.rankOne .bottomContent p {
  font-family: "Proxima Nova Rg";
  font-weight: normal;
  font-style: normal;
  font-size: 1.2rem;
  position: relative;
  top: 8px;
}
.rankOne .bottomContent img.leaderboardSep {
  margin: 0px 20px;
}
.rankOne .bottomContent p.won {
  color: #16bb48;
}
.rankOne .bottomContent p.loss {
  color: #fe0402;
}
.rankOne {
  border-color: #ffe352;
}

.rankTwo,
.rankThree {
  margin-top: 8rem !important;
}

.rankThree .contentArea .fa-chess-king {
  font-size: 1.5rem;
  color: #f3ac63;
}
.profileCard.rankThree .pic {
  width: 75px;
  height: 75px;
  padding-top: 1.5rem;
}
.profileCard.rankThree .pic .fa-user {
  font-size: 1.875rem;
}
.profileCard.rankThree .pic span {
  background-image: url(../images/badge-rankThree.png);
  background-repeat: no-repeat;
  background-position: center center;
  width: 22px;
  height: 23px;
  color: #162541;
  position: absolute;
  top: 0px;
  right: 0px;
  display: inline-block;
  font-size: 0.75rem;
  font-family: "Proxima Nova Rg";
  font-weight: normal;
  font-style: normal;
  font-weight: bold;
  padding-top: 4px;
}
.rankThree .bottomContent p {
  font-family: "Proxima Nova Rg";
  font-weight: normal;
  font-style: normal;
  font-size: 1.2rem;
  position: relative;
  top: 8px;
}
.rankThree .bottomContent img.leaderboardSep {
  margin: 0px 20px;
}
.rankThree .bottomContent p.won {
  color: #16bb48;
}
.rankThree .bottomContent p.loss {
  color: #fe0402;
}
.grid .pic {
  width: 55px;
  height: 55px;
  text-align: center;
  padding-top: 10px;
  margin-right: 20px;
}
.table.userPic .name {
  padding-top: 11px;
}
.table.userPic tr td.green {
  color: #16bb48;
}
.table.userPic tr td.red {
  color: #fe0402;
}
.metaverse .txtBlock {
  padding-top: 0px;
}
.metaverse h3 {
  font-size: 1.875rem !important;
  font-weight: normal !important;
  font-style: normal !important;
}
.metaverse .txtBlock p {
  padding-inline-end: 12rem;
}
.contentShort p {
  font-size: 1.2rem;
}

/* Pricing Slider */

@media (max-width: 1024px) {
  .nav-item.nav-item-play .dropdown-menu {
    top: 32px;
  }
  .card.card-companyLatest {
    padding: 0px;
  }
  .card-login .card-body::before {
    width: 43%;
    background-position: right -88px top -290px;
  }
  .navbar-expand-md .navbar-collapse,
  .navbar-collapse {
    position: absolute;
    top: 65px;
    left: 0px;
    right: 0px;
    z-index: 9999;
    background: var(--color-grey-900);
    display: block !important;
  }

  body::after {
    width: 70%;
    left: 0px;
  }
  body::before {
    width: 50%;
    height: 300px;
    right: 10px;
    /* overflow: hidden; */
  }
  .navbar-toggler {
    border-radius: var(--rounded-3);
  }
  .user-setting-wrap {
    position: absolute;
    top: -54px;
    left: 58px;
  }
  html[lang="en"] .user-setting-wrap {
    left: auto;
    right: 58px;
  }
  .navbar-toggler {
    padding: 0.25rem;
  }
  .collapse:not(.show) {
    display: initial;
  }
  .collapse:not(.show) {
    .navbar-nav,
    .user-signin {
      display: none;
    }
  }
  .dropdown-menu {
    display: none;
  }
  .banner-favGame-txt p {
    font-size: smaller;
    margin: 0;
  }
  .banner-favGame-txt {
    text-align: center;
    min-width: 90%;
  }
  .banner-betaWait-txt {
    text-align: center;
  }
  .banner-betaWait p {
    font-size: smaller;
    margin: 0;
  }
  .playDropdown-head {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .nav-link .nav-item-play-gameImg {
    width: 100%;
    height: 140px;
  }
  .nav-item-play-game {
    width: 100%;
  }
}

@media (min-width: 320px) and (max-width: 767px) {
  .footer {
    text-align: center;
  }
  .FooterNav a {
    margin-bottom: 6px;
  }
  .tournament-summary {
    gap: 12px;
  }

  .tournament-summary > div {
    border: none;
  }

  .card-login .card-body::before {
    display: none;
  }
  nav.mainNav {
    height: auto;
  }
  nav.mainNav li.nav-item.playLink i.fas,
  nav.mainNav li.nav-item.corporateLink i.fas {
    bottom: auto;
    right: 16px;
    opacity: 0.85;
    left: auto;
  }

  .navbar-collapse ul.navbar-nav li:last-child.nav-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  }
  .langSel a.nav-link {
    font-size: 1.4rem !important;
    position: static;
  }

  .langSel .dropdown-menu[data-bs-popper] {
    top: 40px;
    left: -40px;
    margin-top: 0.125rem;
  }

  .discount h2 {
    font-size: 1.5rem;
  }
  .favGame img {
    width: 100%;
    margin-top: 50px;
  }

  .upcomingTournaments h3 {
    font-size: 2rem;
  }
  .inviteTxt .bdrDiv {
    margin-bottom: 30px;
  }
  .upcomingTournaments .card .bd-highlight {
    padding: 0px !important;
  }
  .favGame .txtBlock {
    padding-inline-start: 0px;
    padding-top: 6rem;
  }
  .favGame {
    padding: 2rem;
  }
  .favGame .txtBlock::before,
  .favGame .txtBlock::after {
    height: 71px;
    width: 92px;
    background-size: 100%;
  }
  .favGame .txtBlock h3 br,
  .favGame .txtBlock p br {
    display: none;
  }
  .favGame .txtBlock::after {
    bottom: -50px;
    right: 0px;
  }
  .topGames .title h3 {
    font-size: 2.6rem;
  }
  .topGame .card {
    text-align: center;
  }
  .howthisWorks {
    padding: 2rem;
  }
  .howthisWorks .feature {
    text-align: center;
  }
  .featureBox {
    margin-top: 2rem;
  }

  .footer {
    margin-top: 0rem;
  }
  .footer .footerLogoCont {
    min-height: auto;
    padding-top: 2rem;
    background-image: none !important;
    text-align: center;
  }
  .socialBar .d-flex {
    display: block !important;
  }

  body.blogPg .blogImg.bigImage {
    height: 365px;
  }
  .blogImg.small h5 {
    font-size: 1.8rem;
  }
  .blogImg.small .info p {
    font-size: 1rem;
  }
  section.footerInner {
    padding: 1rem !important;
  }
  .popularArticles {
    padding: 0px !important;
    text-align: center;
  }
  .followBox {
    max-width: 100%;
  }
  .secNav .d-flex {
    display: block !important;
  }
  .secNav .d-flex a {
    width: 100%;
    display: block;
    text-align: left;
  }
  .secNav a:hover,
  .secNav a.active {
    border-bottom: 2px solid rgba(255, 255, 255, 0.3);
  }
  body.userLoggedin .rightNav .signInCont {
    padding: 5px 15px 5px 53px;
  }
  .formContent,
  body.pricingPg .greyBoxContent,
  body.verifyCodePg .formContent {
    padding: 1rem;
  }
  .formContent label {
    text-align: left;
  }
  .metaverse .txtBlock p {
    padding: 0px;
  }
  .codeCont .form-control {
    min-height: 60px;
    width: 60px;
  }
  .rightNav .signUpCont {
    padding: 8px 10px;
  }
  .rightNav .buyCont {
    padding: 8px 5px 5px 5px;
  }
  body.homePg .content {
    background-image: none !important;
  }

  .upcomingTournaments .card p.prize {
    text-align: center !important;
  }

  .favGame .txtBlock p {
    font-size: 1.25rem;
  }
}

@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .card-body {
    padding: 1rem;
  }

  .card.card-newFeature {
    background-color: var(--background-color);
    height: 100%;
    padding: 0;
  }
  .card.card-companyLatest {
    padding: 0px;
    height: 100%;
  }
  .banner-betaWait-txt {
    text-align: center;
  }
  .img-banner-favGame {
    min-height: 170px;
  }

  .navbar-expand-md .navbar-toggler {
    display: block !important;
  }

  nav.mainNav li.nav-item.playLink i.fas,
  nav.mainNav li.nav-item.corporateLink i.fas {
    bottom: auto;
    right: 16px;
    opacity: 0.85;
    left: auto;
  }

  /*    .navbar-expand-md .navbar-collapse {display: auto !important;}*/
  .followgamesaibar h5 {
    font-size: 1.4rem;
  }
  .followgamesaibar a.white,
  .popularArticles a.white {
    padding: 0.75rem 1rem;
    margin-right: 30px;
  }
  .infoRight h5 {
    font-size: 0.95rem;
    padding-inline-end: 0px;
  }
  body.blogPg .blogImg.newsbig {
    height: 175px;
  }

  .logoFooter {
    width: 150px;
  }

  .popularArticles {
    padding: 0px;
  }
  .followBox {
    padding: 19px !important;
    margin-top: 20px !important;
  }
  .popularArticles .head h5 {
    font-size: 1.4rem;
    margin-bottom: 10px !important;
  }
  .followBox h5 {
    font-size: 1.2rem;
  }
  .secNav a,
  .secNav .dropdown a {
    font-size: 1rem;
    padding: 15px 10px;
  }
  .grid {
    overflow: auto;
  }

  .upcomingTournaments {
    margin-top: 9rem;
  }

  .upcomingTournaments .card p.prize {
    text-align: center !important;
  }
  .upcomingTournaments .card .bd-highlight {
    padding: 5px !important;
  }
  .inviteTxt .bdrDiv p br {
    display: none;
  }
  .signUpCont img {
    width: 100%;
    position: relative;
    top: 50px;
  }
  .inviteTxt .bdrDiv p {
    font-size: 1.2rem;
  }
  .favGame .txtBlock {
    padding-inline-start: 0px;
    padding-top: 6rem;
  }
  .favGame .txtBlock h3 {
    font-size: 1.2rem;
  }
  .favGame .txtBlock::after {
    bottom: -70px;
    right: 0px;
  }
  img.gamePadImg {
    width: 100%;
    position: relative;
    top: 50px;
  }
  .favGame .txtBlock p {
    font-size: 1.2rem;
  }
  .favGame {
    padding: 3rem 3rem 5rem 3rem;
  }
  .howthisWorks h3 {
    font-size: 2rem;
  }
  .howthisWorks {
    padding: 2rem;
  }
  .howthisWorks h4 {
    font-size: 1.4rem;
    margin: 0px 20px;
  }
  .howthisWorks .feature p {
    font-size: 1.1rem;
  }
  .featureBox {
    padding: 1rem;
    margin-top: 4rem;
  }
  .featureBox h2 {
    font-size: 0.75rem;
    margin-top: 10px;
    min-height: 170px;
  }
  .companyLatest .title {
    padding: 2rem;
  }
  .latestNews .card p {
    font-size: 1.1rem;
  }
  .greyBox {
    width: 100%;
  }
  .formContent {
    padding: 4rem 4rem 1rem 4rem;
  }
  .watchBox .bottomContent a {
    font-size: 1.1rem;
  }
  .vdoPlay {
    min-height: 348px;
  }
  body.homePg .content {
    background-image: none !important;
  }
}

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  nav.mainNav .navbar-brand {
    margin-left: 20px;
    margin-right: 3rem;
  }
  nav.mainNav a.nav-link {
    font-size: 1.1rem;
    padding-inline-end: 0.3rem;
    padding-inline-start: 0.3rem;
  }
  .rightNav a.signIn,
  .rightNav a.buy,
  .rightNav a.signUp,
  .dropdown-menu li a {
    font-size: 1.1rem;
  }
  .rightNav .signInCont {
    padding: 5px 30px 5px 50px;
  }

  .favGame .txtBlock {
    padding-inline-start: 0px;
    padding-top: 6rem;
  }
  .favGame .txtBlock::before,
  .favGame .txtBlock::after {
    height: 71px;
    width: 92px;
    background-size: 100%;
  }
  .favGame .txtBlock::after {
    bottom: -50px;
    right: 0px;
  }
  .metaverse .txtBlock p {
    padding-inline-end: 6rem;
  }
  img.gamePadImg {
    width: 100%;
    position: relative;
    top: 50px;
  }

  .upcomingTournaments .card p.format,
  .upcomingTournaments em {
    font-size: 1.2rem;
  }
  .upcomingTournaments .card p.prize {
    font-size: 1.3rem;
  }
  .favGame .txtBlock h3 {
    font-size: 1.8rem;
  }
  .featureBox h2 {
    font-size: 1rem;
  }
  .featureBox {
    padding: 2rem;
    margin-top: 5rem;
    min-height: 190px;
  }
  .followgamesaibar a.white,
  .popularArticles a.white {
    margin-right: 15px;
  }
  .infoRight h5 {
    font-size: 1.35rem;
    padding-inline-end: 0rem;
  }
  .blogImg .info h5 {
    font-size: 1.4rem;
    padding-inline-end: 2rem;
  }
  body.blogPg .blogImg.newsbig {
    height: 210px;
  }
}

@media (min-width: 1200px) and (max-width: 1300px) and (orientation: landscape) {
  img.gamePadImg {
    width: 100%;
  }
  .favGame .txtBlock::after {
    right: 20px;
  }
  .favGame .txtBlock p {
    font-size: 1.4rem;
  }
  .favGame .txtBlock h3 {
    font-size: 1.5rem;
  }
}

@media (min-width: 1301px) and (max-width: 1400px) and (orientation: landscape) {
  img.gamePadImg {
    width: 100%;
  }
  .favGame .txtBlock::after {
    right: 20px;
  }
  .favGame .txtBlock p {
    font-size: 1.4rem;
  }
  .favGame .txtBlock h3 {
    font-size: 1.5rem;
  }
}

@media (min-width: 1401px) and (max-width: 1500px) and (orientation: landscape) {
  img.gamePadImg {
    width: 100%;
  }
  .favGame .txtBlock::after {
    right: 20px;
  }
  .favGame .txtBlock p {
    font-size: 1.4rem;
  }
  .favGame .txtBlock h3 {
    font-size: 1.5rem;
  }
}

/* plp page for tournaments*/

.registration-opening-text {
  background-color: #fe0402;
  padding: 10px;
  display: inline-block;
  font-weight: bold;
  width: 50%;
  text-align: center;
  font-family: Century Gothic;
  padding-top: 20px;
}
.registration-time {
  color: #fff;
  background-color: #202020;
  font-weight: bold;
  font-size: 12px;
}
.registration-opened-text {
  background-color: #198754;
  font-weight: bold;
  font-family: Century Gothic;
}
.registration-closed {
  background-color: #6c757d;
  font-family: Century Gothic;
  padding: 21px;
  display: inline-block;
  font-weight: bold;
  width: 100%;
  text-align: center;
}
.days span {
  font-family: Century Gothic;
  margin-right: 10px;
  font-size: 11px;
}

/* pdp page for tournament*/
.days-format span {
  margin-right: 23px;
  font-size: 9px;
}

.days-format span:first-child {
  margin-left: 24px;
}

.days-format span:nth-last-child(2) {
  margin-right: 15px;
}

.time-format {
  word-spacing: 0.3cm;
  font-weight: 500;
  font-size: 18px;
}

.join-now {
  width: 236px;
  margin-bottom: 10px;
}
.popularArticles .head h5 {
  width: 236px;
}

.popularArticles .head h5 {
  text-align: center;
  padding-top: 90px;
}

.registration-text,
.registration-closed-text {
  margin-top: 10px;
  font-size: 12px;
}

.registration-closed-text {
  max-width: 236px;
  text-align: center;
  margin-bottom: 30px;
}

.popularArticles {
  padding-top: 10px;
}
.disable {
  pointer-events: none;
  background-color: #6c757d;
}
.cursor-pointer {
  cursor: pointer;
}
div.reemo-webclient {
  position: absolute;
  width: 100vw;
  top: 0;
  left: 0;
  font-family: "Eina", Arial, Helvetica, sans-serif;
}

.ng-image-slider {
  display: none;
}

.reemo-withAd .ng-image-slider {
  display: block;
}

.ng-image-slider > img,
.ng-image-slider,
.ng-image-slider .ng-image-slider-container .main {
  height: 120px !important;
}

.ng-image-slider > img {
  object-fit: cover;
}

.reemo-withAd .reemo-video > canvas,
.reemo-withAd div.reemo-webclient,
.reemo-withAd .rdesktop,
.reemo-withAd .rdesktop .reemo-main-loader,
.reemo-withAd .reemo-video,
.reemo-withAd .reemo-column {
  height: calc(100vh - 120px) !important;
}

.reemo-withAd .reemo-video {
  display: flex;
  justify-content: center;
  align-items: center;
}

.reemo-withAd .reemo-video > canvas {
  transform: scale(1) !important;
}

body:has(body) {
  overflow-x: hidden !important;
  overflow-y: hidden !important;
}

.card.card-Kpi.card-Kpi-platform {
  padding-bottom: 0;
  .card-kpi-val {
    text-transform: capitalize;
    font-size: var(--font-size-xxl);
  }
}
.card.card-Kpi.card-Kpi-prize {
  padding-block: 0px !important;
  justify-content: center;

  &::after {
    content: "";
    position: absolute;
    display: block;
    inset: 0;
    background-image: radial-gradient(
      circle at 50% 0%,
      rgb(255 210 0 / 55%),
      rgba(255 210 0 / 0%) 60%
    );
    background-repeat: no-repeat;
    /* opacity: 0; */
    inset: 0px;
    z-index: 0;
    border-radius: 12px;
  }
}

.card-Kpi-prize-single {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.card-Kpi-prize-all {
  display: flex;
  align-items: stretch;
  justify-content: space-around;
}

span.card-Kpi-prize-sep {
  background: white;
  /* height: 100%; */
  opacity: 0.2;
  width: 1px;
}

.card-Kpi-prize-single h5 {
  margin: 0;
}