/* font Chakra Petch */
@import url("https://fonts.googleapis.com/css2?family=Chakra+Petch:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap");
/* font Days One */
@import url("https://fonts.googleapis.com/css2?family=Days+One&family=Play:wght@400;700&display=swap");
/*  global rules */
*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none !important;
  scroll-behavior: smooth;
}
body {
  font-family: "Chakra Petch", sans-serif;
  list-style: none;
  line-height: 1.5;
  background-color: var(--black);
}
body::selection {
  background-color: var(--yellow);
  color: var(--black);
}
/* colors */
:root {
  --black: #0b0e13;
  --black-opacity-50: #0b0e1380;
  --yellow: #c9fe1c;
}
/* ----------------------------------------------------------------- */
/* background color */
.BG-black {
  background-color: var(--black);
}
.BG-black-50 {
  background-color: var(--black-opacity-50);
}
.BG-yellow {
  background-color: var(--yellow);
}
.BG-gray {
  background-color: #1e2939;
}
/* font color */
.white {
  color: white;
}
.black {
  color: var(--black);
}
.yellow {
  color: var(--yellow);
}
.gray {
  color: #99a1af;
}
/* ----------------------------------------------------------------- */
/* tags */
h1 {
  font-family: "Days One", sans-serif;
  font-size: 60px;
  font-weight: 700;
  color: white;
}
h2 {
  font-family: "Days One", sans-serif;
  font-size: 48px;
  font-weight: 700;
  color: white;
}
h4 {
  font-family: "Days One", sans-serif;
  font-size: 20px;
}
p,
article {
  color: #d1d5db;
}
section,
footer {
  scroll-margin: 50px;
  padding-block: 100px;
  background-color: var(--black);
}
img {
  width: 100%;
}
/* ----------------------------- classes ------------------------------ */
/* --------------------------- main-title ------------------------------ */
.main-title {
  text-align: center;
  margin-bottom: 64px;
}
.main-title p {
  position: relative;
  color: var(--yellow);
  font-weight: 700;
}
.main-title p::after {
  content: "";
  position: absolute;
  left: 39%;
  top: 10px;
  height: 2px;
  width: 70px;
  background: linear-gradient(
    90deg,
    rgba(11, 14, 19, 1) 0%,
    rgba(203, 254, 28, 1) 100%
  );
  border-top-left-radius: 50%;
  border-bottom-left-radius: 50%;
}
.main-title p::before {
  content: "";
  position: absolute;
  right: 39%;
  top: 10px;
  height: 2px;
  width: 70px;
  background: linear-gradient(
    -90deg,
    rgba(11, 14, 19, 1) 0%,
    rgba(203, 254, 28, 1) 100%
  );
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
}
/* ------------------------- shiny button ----------------------------- */
.shiny {
  position: relative;
  overflow: hidden;
}
.shiny::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -55%;
  width: 50%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.7) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-20deg);
  transition: 0.3s ease-in-out;
}
.shiny::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  left: -100%;
  background-color: rgba(0, 0, 0, 0.1);
  transition: 0.3s ease-in-out;
}
.shiny:hover::after {
  left: 105%;
}
.shiny:hover::before {
  left: 0;
}
/* ----------------------------------------------------------------- */
/* font size*/
.f12 {
  font-size: 12px;
}
.f14 {
  font-size: 14px;
}
.f18 {
  font-size: 18px;
}
.f48 {
  font-size: 48px;
}
/* ----------------------------------------------------------------- */
/* font weight*/
.w600 {
  font-weight: 600;
}
.w700 {
  font-weight: 700;
}
/* ----------------------------------------------------------------- */
/* sizing */
.w-25px {
  width: 25px;
}
.W-94 {
  width: 94%;
}
/* ----------------------------------------------------------------- */
/* ------------------------- header ------------------------------- */
header {
  position: fixed;
  z-index: 999;
  width: 100%;
  padding-block: 5px;
  box-shadow: 0 1px 1px 0 #1e2939;
}
/* #1 */
/* .navbar-nav {
  scroll-target-group: auto;
  a:target-current{
    color: var(--yellow);
  }
} */
/* links & button */
.bell,
.message {
  cursor: pointer;
}
.bell:hover,
.message:hover {
  color: var(--yellow);
}
.navbar .collapse div[class^="d-flex"] {
  align-items: center;
  justify-content: space-between;
}
.navbar .collapse div[class^="d-flex"] div[class="d-flex"] {
  align-items: center;
}
/* navbar-toggler */
button.navbar-toggler {
  border: none;
  color: var(--yellow);
}
button.navbar-toggler:hover i {
  color: var(--yellow);
}
.navbar-toggler:focus {
  box-shadow: none;
}
.nav-item .nav-link {
  color: white;
}
.nav-item .nav-link:hover {
  color: var(--yellow);
}
.nav-item .nav-link.active {
  color: var(--yellow);
}
button.shiny {
  padding: 8px 22px;
  border: none;
}
/* ----------------------------------------------------------------- */
/* ------------------------- main ------------------------------- */
main {
  background-image: url(../images/hero-bg.jpg);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  overflow: hidden;
}
main .overlay {
  background-color: #000000d9;
  height: calc(100vh - 67px);
  margin-top: 67px;
}
main .overlay .container {
  grid-template-columns: repeat(12, 1fr);
}
main .content,
main .image {
  grid-column: span 6;
}
/* content */
main .content div[class^="d-flex"] {
  width: 75%;
}
main .content div[class^="d-flex"] .btn:first-child {
  border: 2px solid var(--yellow);
  background-color: var(--yellow);
  font-weight: 700;
}
main .content div[class^="d-flex"] .btn:last-child {
  background-color: transparent;
  border: 2px solid var(--yellow);
  color: var(--yellow);
  font-weight: 700;
}
main .content div[class^="d-flex"] .btn:last-child:hover {
  background-color: var(--yellow);
  color: var(--black);
}
/* image */
main .image {
  position: relative;
  width: 575px;
  height: 400px;
  background: linear-gradient(
    90deg,
    rgba(199, 253, 36, 1) 0%,
    rgba(37, 223, 109, 1) 100%
  );
  padding: 3px;
  border-radius: 16px;
}
main .image .img {
  width: 100%;
  height: 100%;
  background-image: url(../images/hero-img.png);
  background-size: cover;
  background-position: center;
  border-radius: 16px;
}
main .image div[class^="position-absolute"] {
  box-shadow: 0 0 1px 1px #1e2939;
  bottom: -30px;
  left: -30px;
}
/* ----------------------------------------------------------------- */
/* ------------------------- OUR GAMES ----------------------------- */
/* card items */
.OurGames .card-items {
  grid-template-columns: repeat(12, 1fr);
  gap: 48px;
}
.OurGames .card-items .card-item {
  border: 2px solid transparent;
  grid-column: span 4;
  height: 300px;
  cursor: pointer;
}
.OurGames .card-items .card-item,
.OurGames .card-items .card-item .category,
.OurGames .card-items .card-item img,
.OurGames .card-items .card-item .text {
  transition: 0.4s ease-in-out;
}
.OurGames .card-items .card-item .text {
  padding: 0 0 16px 24px;
}
.OurGames .card-items .card-item:hover {
  border: 2px solid var(--yellow);
}
.OurGames .card-items .card-item:hover img {
  transform: scale(1.1);
}
.OurGames .card-items .card-item:hover .category {
  z-index: 1;
  top: 0px;
}
.OurGames .card-items .card-item:hover .text {
  bottom: 0px;
}
/* category */
.OurGames .category {
  top: -60px;
}
.OurGames .category div {
  padding: 2px 12px;
}
/* text */
.OurGames .text {
  bottom: -110px;
  box-shadow: inset 0 -100px 20px -10px rgba(201, 254, 28, 0.6);
}
/* buttons */
/* arrows */
.OurGames .arrows button {
  width: 70px;
  height: 70px;
  border: 2px solid #303a4a;
  cursor: pointer;
  transition: 0.2s ease-in-out;
}
.OurGames .button .carousel-control-prev:hover,
.OurGames .button .carousel-control-next:hover {
  border: 2px solid var(--yellow);
}
.OurGames .button .arrow-left:hover i,
.OurGames .button .arrow-right:hover i {
  color: var(--yellow);
}
/* button */
.OurGames button {
  padding: 16px 32px;
  border: 2px solid var(--yellow);
  transition: 0.2s ease-in-out;
}
.OurGames button[class*="BG-black"]:hover {
  background-color: var(--yellow);
  color: var(--black);
}
/* ----------------------------------------------------------------- */
/* ------------------------- What We Do ----------------------------- */
/* card items */
.WhatWeDo .card-items {
  grid-template-columns: repeat(12, 1fr);
  gap: 48px;
}
.WhatWeDo .card-items .card-item {
  background-color: #1a1a1a;
  padding-block: 70px;
  border: 2px solid #303a4a;
  cursor: pointer;
  grid-column: span 3;
}
.WhatWeDo .card-items .card-item-img {
  cursor: pointer;
  grid-column: span 3;
}
.WhatWeDo .card-items .card-item,
.WhatWeDo .card-items .card-item .icon,
.WhatWeDo .card-items .card-item .icon .fa-display,
.WhatWeDo .card-items .card-item .fa-sort-up,
.WhatWeDo .card-items .card-item .fa-sort-down {
  transition: 0.3s ease-in-out;
}
.WhatWeDo .card-items .card-item .icon {
  width: 64px;
  height: 64px;
}
.WhatWeDo .card-items .card-item .fa-sort-up {
  top: -25px;
  left: -30px;
}
.WhatWeDo .card-items .card-item .fa-sort-down {
  bottom: -25px;
  right: -30px;
}
.WhatWeDo .card-items .card-item:hover {
  border: 2px solid var(--yellow);
}
.WhatWeDo .card-items .card-item:hover .icon {
  background-color: var(--yellow);
}
.WhatWeDo .card-items .card-item:hover .icon i {
  color: var(--black);
}
.WhatWeDo .card-items .card-item:hover .fa-sort-up {
  top: 8px;
  left: 3px;
}
.WhatWeDo .card-items .card-item:hover .fa-sort-down {
  bottom: 8px;
  right: 3px;
}
.WhatWeDo .line {
  height: 2px;
  background: radial-gradient(
    circle,
    rgba(203, 254, 28, 1) 43%,
    rgba(11, 14, 19, 1) 100%
  );
  border-radius: 50%;
}
/* ----------------------------------------------------------------- */
/* ------------------------- animation ----------------------------- */
.animation::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 35%;
  height: 100px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background-color: #aad51b;
  box-shadow: 0 0 80px 100px #aad51b;
}
.animation img {
  width: 100px;
}
.animation .container::before {
  content: "";
  position: absolute;
  height: 100%;
  top: 0;
  right: 0;
  box-shadow: -20px 0 20px 50px #0b0e13e6;
  z-index: 1;
}
.animation .container::after {
  content: "";
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
  box-shadow: 20px 0 20px 50px #0b0e13e6;
}
.animation .leftToRight {
  animation: spin-ltr 40s infinite linear;
}
.animation .rightToLeft {
  animation: spin-rtl 40s infinite linear;
}
@keyframes spin-ltr {
  0% {
    transform: translate(0);
  }
  50% {
    transform: translate(-100%);
  }
  100% {
    transform: translate(0);
  }
}
@keyframes spin-rtl {
  0% {
    transform: translate(-100%);
  }
  50% {
    transform: translate(0);
  }
  100% {
    transform: translate(-100%);
  }
}
/* ----------------------------------------------------------------- */
/* ------------------------- Our Team ----------------------------- */
.gamers .row {
  grid-template-columns: repeat(12, 1fr);
}
.gamer {
  cursor: pointer;
  grid-column: 3 span;
}
.gamer img {
  object-fit: cover;
}
.gamer .text {
  height: 120px;
  box-shadow: inset 0 -115px 20px -10px rgba(0, 0, 0, 0.6);
}
.gamer .rotate {
  transform: rotate(90deg);
}
.gamer::before {
  content: "";
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: grayscale(100%);
  z-index: 1;
  transition: 0.5s ease-in-out;
}
.gamer:hover::before {
  top: -100%;
}
/* ----------------------------------------------------------------- */
/* ------------------------- Contact Us ----------------------------- */
.ContactUs {
  background: linear-gradient(
    90deg,
    rgba(14, 21, 33, 1) 0%,
    rgba(13, 17, 26, 1) 100%
  );
}
.ContactUs .icon {
  width: 64px;
  height: 64px;
}
.ContactUs .item {
  padding: 32px;
  background-color: #1e2939;
}
.gradient {
  background: linear-gradient(
    90deg,
    rgba(202, 254, 29, 1) 0%,
    rgba(26, 224, 114, 1) 100%
  );
}
.ContactUs .gradient .icon {
  width: 48px;
  height: 48px;
}
form {
  border-bottom: 1px solid #99a1af54;
}
.form-control,
.select {
  color: #f1f1f1;
  background-color: #364153;
  padding: 12px 16px;
  border: none;
  box-shadow: 0 0 0 1px #99a1af80;
}
.form-select::placeholder {
  color: #f1f1f1;
}
.form-control::placeholder {
  color: #99a1af;
}
.select:focus,
.form-control:focus {
  color: white;
  background-color: #364153;
  border-color: var(--yellow);
  box-shadow: 0 0 0 2px #c9fe1b;
}
textarea {
  resize: none;
}
.form-check-input {
  width: 20px;
  height: 20px;
  border: none;
  box-shadow: 0 0 0 1px #99a1af80;
}
.form-check-input:focus {
  border-color: var(--yellow);
  box-shadow: 0 0 0 2px #c9fe1b;
}
.form-check-input:checked {
  background-color: #4c4a48;
}
/* ----------------------------------------------------------------- */
/* ------------------------- footer ----------------------------- */
footer div[class="row d-grid gap-5"] {
  grid-template-columns: repeat(4, 1fr);
}
footer i {
  cursor: pointer;
  transition: 0.2s ease-in-out;
}
footer a {
  width: fit-content;
  transition: 0.2s ease-in-out;
}
footer a:hover,
footer i:hover {
  color: var(--yellow);
}
.footer {
  border-top: 1px solid #1e2939;
}