@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap");
@import url(./root.css);

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box !important;
  list-style-type: none !important;
  text-decoration: none !important;
}

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

::-webkit-scrollbar-thumb {
  background-color: var(--color-green);
  border-radius: 10px;
}

/* ====================== BACK-TO-TOP ====================== */
.back_to_top {
  cursor: pointer;
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 6 !important;
  width: 30px !important;
  height: 30px !important;
  background-color: var(--color-green);
  border: 1px solid white;
  border-radius: 50px;
  transition: background-color 0.3s ease-in-out;
  box-shadow: 0px 5px 16px white;
  -webkit-animation: mover 3000ms infinite ease-in-out !important;
  animation: mover 3000ms infinite ease-in-out !important;
}

@keyframes mover {

  0%,
  100% {
    transform: translateY(0px);
  }

  70% {
    transform: translateY(-7px);
  }
}

.back_top_btn {
  max-width: 24px;
  max-height: 24px;
}

/* ================= FONT-FAMILY =============== */
body {
  font-family: "Roboto", sans-serif;
}

.font_ubuntu {
  font-family: "Ubuntu", sans-serif;
}

@font-face {
  font-family: jersey;
  src: url("/assets/fonts/jersey.ttf");
}

.font_jersey {
  font-family: "jersey" !important;
}

.paragraph {
  padding-top: 8px;
  font-size: var(--fs-sm);
  color: var(--color-gray);
  line-height: 150%;
}

.opacity_90 {
  opacity: 90%;
}

.event_pointer_none {
  pointer-events: none;
}

.bg_centered {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.max_w_883 {
  max-width: 883px;
}

.max_w_297 {
  max-width: 297px;
}

/* common spacing  */
.py_10 {
  padding-top: 10px;
  padding-bottom: 10px;
}

.m_1 {
  margin: 1px !important;
}

.-mt_1 {
  margin-top: -1px;
}

.-ms_12 {
  margin-left: -12px;
}

.-me_12 {
  margin-right: -12px;
}

.common_spacing {
  padding-top: 80px;
  padding-bottom: 24px;
}

/* common color  */

.green_gradient {
  background: linear-gradient(180deg, #222d1c 0%, #1e1f1e 100%);
  border: 1px solid;
  margin-top: 1px;
  border-image-source: linear-gradient(180deg,
      #48ad08 0%,
      rgba(72, 173, 8, 0) 100%);
  backdrop-filter: blur(80px);
}

.swiper-arrow {
  cursor: pointer;
  transition: all 0.3s linear;
}

.swiper-arrow svg {
  transition: all 0.3s linear;
}

.swiper-arrow:hover svg {
  fill: var(--color-green);
}

/* ===================== HEADER ===============  */
.header_mobile {
  min-height: 600px;
  background-image: url("../images/webp/hero-football-stadium.webp");
}

.xl_container_prop {
  max-width: 1920px !important;
  margin-left: auto;
  margin-right: auto;
}

.common_box_shadow {
  box-shadow: 0px -45px 40px -3px rgba(0, 0, 0, 1) inset;
  -webkit-box-shadow: 0px -45px 40px -3px rgba(0, 0, 0, 1) inset;
  -moz-box-shadow: 0px -45px 40px -3px rgba(0, 0, 0, 1) inset;
}

/* =================== NAVBAR ================  */
.nav_logo {
  width: 80px;
  height: 49px;
}

.size_14 {
  width: 14px;
  height: 14px;
}

.nav_items {
  transition: all 300ms linear;
  line-height: 18px;
}

.nav_items:hover {
  opacity: 100%;
}

.top_nav {
  background: var(--color-green);
  padding: 12px;
}

.nav_line:hover::after {
  width: 100%;
  left: 0;
  transition: all 300ms linear;
}

.nav_line::after {
  content: "";
  position: absolute;
  width: 0;
  left: 50%;
  height: 1px;
  border-radius: 15px;
  background: linear-gradient(90deg,
      rgba(72, 173, 8, 0) 2%,
      #48ad08 58%,
      rgba(72, 173, 8, 0) 100%);
  bottom: -3px;
  transition: all 300ms linear;
}

.logo {
  position: relative;
  z-index: 3;
}

.common_btn {
  position: relative;
  display: inline-block;
  padding: 16px 42px;
  border: none;
  background: transparent;
  z-index: 1;
  transition: all 0.3s linear;
}

.common_btn:hover {
  scale: 1.06;
}

.common_btn:hover::before {
  left: 120%;
  transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
}

.common_btn:hover::after {
  border: 1px solid var(--color-green);
}

.common_btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-green);
  transform: skewX(-17deg);
  transition: all 0.3s linear;
  z-index: -1;
}

.common_btn::after {
  content: "";
  transition: all 0.3s linear;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transform: skewX(-17deg) !important;
  z-index: -1;
}

.play_now_btn {
  padding: 16px 39px !important;
}

.mission_group {
  max-width: 306px;
}

.rating_bg {
  background-image: url("/assets/images/webp/rating-bg.webp");
  background-repeat: no-repeat;
  background-size: cover;
  padding: 100px 0 0;
}

.introducing_bg {
  background-image: url("/assets/images/webp/introduction-bg.webp");
  background-repeat: no-repeat;
  background-size: cover;
  padding: 64px 0 10px 0;
}

.play_bg {
  background-image: url("/assets/images/webp/play-bg.webp");
  background-repeat: no-repeat;
  background-size: cover;
  padding: 0 0 52px 0;
}

.strikeria_bg {
  background-image: url(../images/webp/soccer-ground.webp);
}

.mission_btn {
  padding: 13px 43px !important;
}

.mission_bg {
  background-image: url("/assets/images/webp/mission-bg.webp");
  background-repeat: no-repeat;
  background-size: cover;
  padding: 80px 0;
}

.play_to_win_btn {
  padding: 13px 42px !important;
}

.play_btn {
  padding: 17px 58px !important;
}

.introducing_img {
  max-width: 300px;
}

.play_img {
  max-width: 100%;
}

.translate_next_arrow {
  transform: rotate(180deg);
}

.swiper_arrow {
  padding-top: 30px;
  padding-bottom: 30px;
  max-width: 100px;
  margin-left: auto;
  margin-right: auto;
}

/* ======================= STRIKERIA PLAYER RATINGS ========================= */
.tactics_board_img {
  max-width: 332px;
  width: 100%;
}

.strikeria_card {
  padding: 38px 33px;
  height: 100%;
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
  background: #ffffff1a;
  border: 1px solid transparent;
  border-image-source: linear-gradient(180deg,
      rgba(72, 173, 8, 0) 0%,
      #48ad08 100%);
  border-image-slice: 1;
  animation: borderAnimation 3s infinite;
  -webkit-animation-duration: 3s;
}

.strikeria_card:nth-child(2) {
  animation: borderAnimationDelay 5s infinite !important;
  -webkit-animation: borderAnimationDelay 5s infinite !important;
}

.strikeria_card img {
  max-height: 66px;
}

@keyframes borderAnimationDelay {

  0% {
    border-image-source: linear-gradient(180deg,
        rgba(72, 173, 8, 0) 0%,
        #48ad08 100%);
  }

  50% {
    border-image-source: linear-gradient(180deg,
        #48ad08 0%,
        rgba(72, 173, 8, 0) 100%);
  }

  100% {
    border-image-source: linear-gradient(180deg,
        rgba(72, 173, 8, 0) 0%,
        #48ad08 100%);
  }
}

@keyframes borderAnimation {
  0% {
    border-image-source: linear-gradient(180deg,
        rgba(72, 173, 8, 0) 0%,
        #48ad08 100%);
  }

  50% {
    border-image-source: linear-gradient(180deg,
        #48ad08 0%,
        rgba(72, 173, 8, 0) 100%);
  }

  100% {
    border-image-source: linear-gradient(180deg,
        rgba(72, 173, 8, 0) 0%,
        #48ad08 100%);
  }
}

.max_w_282 {
  max-width: 282px;
}

.pt_20 {
  padding-top: 20px;
}

.tactic_btn {
  padding: 13px 33px !important;
}

.max_w_558 {
  max-width: 558px;
}

.tactic_padding {
  padding-top: 80px;
}

.max_w_793 {
  max-width: 793px;
}

.border_rating {
  border: 20px solid var(--light-green);
}

.rating_luca {
  background-image: url("/assets/images/webp/rating-luca-bg.webp");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: 325px;
  min-width: 291px;
}

.rating_usa {
  background-image: url("/assets/images/webp/rating-luca-bg.webp");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: 400px;
  width: 327px;
  padding-bottom: 80px;
}

.my_12 {
  margin-top: 12px;
  margin-bottom: 12px;
}

.luca_img {
  height: 188px;
  right: 9px;
  max-width: 240px;
  position: absolute;
  top: -40px;
  left: 9%;
}

.usa_img {
  height: 227px;
  right: 9px;
  max-width: 269px;
  position: absolute;
  top: -40px;
  left: 9%;
}

.pb_43 {
  padding-bottom: 43px;
}

.pb_53 {
  padding-bottom: 53px;
}

.my_9 {
  margin-top: 9px !important;
  margin-bottom: 9px !important;
}

.maaxon_container {
  padding: 0 6px;
  height: 40px;
  width: 189px;
  background: var(--color-gray);
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  border: 1px solid var(--color-green);
  position: absolute;
  top: 35%;
  left: 50%;
  right: 50%;
  transform: translateX(-50%);
}

.ryde_container {
  left: 50% !important;
  transform: translateX(-50%) !important;
}

.luca_container {
  padding: 0 6px;
  height: 29px;
  width: 169px;
  background: var(--color-gray);
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  border: 1px solid var(--color-green);
  position: absolute;
  top: 37%;
  left: 50%;
  right: 50%;
  transform: translateX(-49%);
}

.rating_ball {
  position: absolute;
  top: 20px;
  left: 0;
  width: 70px;
}

.rating_bg {
  background-image: url("/assets/images/webp/rating-bg.webp");
  background-repeat: no-repeat;
  background-size: cover;
  padding: 70px 0 0;
}

.tactic_ellipse {
  width: 131px;
  height: 131px;
  background: var(--color-green);
  position: absolute;
  filter: blur(150px);
  right: -7%;
  pointer-events: none;
  top: 13%;
}

.tactic_left_ellipse {
  width: 138px;
  height: 138px;
  background: var(--color-green);
  position: absolute;
  filter: blur(150px);
  left: -5%;
  pointer-events: none;
  bottom: 15%;
}

.gap_10 {
  gap: 10px;
}

/* ================================= PLAY TO EARN ========================== */
.play_group {
  max-width: 170px;
  height: 131px;
  opacity: 0.2;
  bottom: 17%;
}

.read_more_btn {
  padding: 13px 34px !important;
}

.start_earning_btn {
  padding: 13px 51px !important;
}

/* =============================== UPGRADE ============================= */
.upgrade_bg {
  background-image: url("/assets/images/webp/why-strikeria-bg.webp");
  padding: 80px 0;
}

.introducing_ellipse {
  width: 250px;
  height: 150px;
  top: 20%;
  background: var(--color-green);
  left: 2%;
  filter: blur(260px);
  position: absolute;
  pointer-events: none;
  z-index: -1;
}

.shadow_why_section {
  box-shadow: 0px -45px 40px -3px rgba(0, 0, 0, 1) inset;
  -webkit-box-shadow: 0px -45px 40px -3px rgba(0, 0, 0, 1) inset;
  -moz-box-shadow: 0px -45px 40px -3px rgba(0, 0, 0, 1) inset;
}

.why_section_top_shadow {
  box-shadow: 0px 45px 40px 0px rgba(0, 0, 0, 1) inset;
  -webkit-box-shadow: 0px 45px 40px 0px rgba(0, 0, 0, 1) inset;
  -moz-box-shadow: 0px 45px 40px 0px rgba(0, 0, 0, 1) inset;
}

.footer_bg,
.upgrade_bg {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.upgrade_heading {
  max-width: 543px;
}

.common_btn {
  position: relative;
  display: inline-block;
  padding: 16px 42px;
  border: none;
  background: transparent;
  z-index: 1;
}

.common_btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-green);
  transform: skewX(-17deg);
  z-index: -1;
}

.upgrade_btn {
  background: linear-gradient(180deg,
      rgba(217, 217, 217, 0.1) 0%,
      rgba(217, 217, 217, 0) 100%);
}

.upgrade_today_btn {
  padding: 13px 36px !important;
}

.score_btn {
  max-width: 143px;
}

.lights_btn,
.pitch_btn {
  max-width: 90px;
}

.lights_btn_line {
  max-width: 123px;
}

.score_btn_group {
  margin-bottom: 38px;
}

.sitting_area_btn {
  max-width: 100px;
}

.score_btn_line,
.sitting_btn_line {
  max-width: 120px;
}

.upgrade_pitch_btn_group,
.score_btn_group {
  gap: 100px;
}

/* ================================== JOIN-US ================================ */

.green_gradient {
  background: linear-gradient(180deg,
      rgba(72, 173, 8, 0.1) 0%,
      rgba(72, 173, 8, 0) 100%);

  border: 1px solid;
  margin-top: 1px;
  border-image-source: linear-gradient(180deg,
      #48ad08 0%,
      rgba(72, 173, 8, 0) 100%);
  border-image-slice: 1;
  backdrop-filter: blur(80px);
}

.join_us_card {
  padding: 40px 0;
  max-width: 1320px;
}

.Journey_img {
  max-width: 450px;
}

.join_now_btn {
  padding: 13px 37px !important;
}

/* =========================== FOOTER ======================= */

.footer_bg {
  margin-top: -1px;
  padding: 40px 0 52px 0;
  background-image: url("/assets/images/webp/footer-bg.webp");
}

.footer_logo {
  max-width: 120px;
}

.mb_14 {
  margin-bottom: 14px;
}

.opacity_70 {
  opacity: 0.7;
}

.opacity_80 {
  opacity: 0.8;
}

.gap-14 {
  gap: 14px;
}

.mt-18 {
  margin-top: 18px;
}

.social_icon rect,
.social_icon path {
  transition: fill 0.3s ease;
}

.social_icon:hover rect {
  fill: white;
}

.social_icon:hover path {
  fill: #48ad08;
}

.gap-12 {
  gap: 12px;
}

.footer_border {
  height: 2px;
  background: linear-gradient(90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.7) 47%,
      rgba(255, 255, 255, 0) 100%);
}

.footer_cartoon {
  max-width: 150px;
  opacity: 0.2;
}

.social_link {
  transition: all 300ms linear;
}

.social_link:hover {
  opacity: 100%;
  color: var(--color-green) !important;
}

.container {
  padding-left: 16px !important;
  padding-right: 16px !important;
}

.gap_12 {
  gap: 12px;
}

.back_to_top:hover {
  background-color: #333;
  transition: background-color 0.3s ease-in-out;
  -webkit-transition: background-color 0.3s ease-in-out;
  -moz-transition: background-color 0.3s ease-in-out;
  -ms-transition: background-color 0.3s ease-in-out;
  -o-transition: background-color 0.3s ease-in-out;
}

/* -------====navbar====-----*/
@media (max-width: 992px) {
  .mobile_view {
    position: fixed;
    top: 0;
    right: -100% !important;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    background-color: black;
    transition: right 300ms linear;
    display: flex;
    flex-direction: column;
    z-index: 2;
  }

  .line1,
  .line2,
  .line3 {
    width: 29px;
    min-height: 3px;
    border-radius: 20px;
    background-color: white;
    /* transition: 300ms linear; */
  }

  .end-0 {
    right: 0 !important;
  }

  .w_lg_100 {
    width: 100%;
  }

  .h_lg_auto {
    height: auto;
  }

  .overflow_hidden {
    overflow: hidden;
  }

  #menubtn-icon {
    cursor: pointer;
  }

  .cross {
    position: relative;
    width: 30px;
    height: 30px;
  }

  .top_cross {
    transform: translateY(10px);
  }

  .cross div {
    position: absolute;
    width: 29px;
    height: 3px;
    border-radius: 20px;
    background-color: white;
    transition: transform 300ms linear;
  }

  .cross .line1 {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
  }

  .cross .line2 {
    transform: translate(0, -7px)rotate(-45deg);
    -webkit-transform: translate(0, -7px)rotate(-45deg);
    -moz-transform: translate(0, -7px)rotate(-45deg);
    -ms-transform: translate(0, -7px)rotate(-45deg);
    -o-transform: translate(0, -7px)rotate(-45deg);
  }

  .cross .line3 {
    display: none;
  }
}


@media (min-width: 576px) {
  .rating_usa {
    padding-bottom: 63px;
  }

  .padding_join {
    padding-top: 60px !important;
  }

  .header_mobile {
    min-height: 610px;
  }

  .nav_logo {
    width: 97px;
    height: 60px;
  }

  .top_nav {
    padding: 15px;
  }

  .common_spacing {
    padding-top: 32px;
    padding-bottom: 32px;
  }

  .rating_ball {
    width: 100px;
  }

  .play_to_win_btn {
    padding: 16px 42px !important;
  }

  .read_more_btn {
    padding: 16px 34px !important;
  }

  .tactic_btn {
    padding: 16px 33px !important;
  }

  .mission_btn {
    padding: 16px 43px !important;
  }

  .start_earning_btn {
    padding: 16px 51px !important;
  }

  .upgrade_today_btn {
    padding: 16px 36px !important;
  }

  .join_now_btn {
    padding: 16px 37px !important;
  }

  .maaxon_container {
    padding: 0 6px;
    height: 40px;
    width: 233px;
    background: var(--color-gray);
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    border: 1px solid var(--color-green);
    position: absolute;
    top: 35%;
    left: 50%;
    right: 50%;
    transform: translateX(-50%);
  }

  .usa_img {
    height: 227px;
    right: 9px;
    max-width: 335px;
    position: absolute;
    top: -40px;
    left: 9%;
  }

  .rating_usa {
    background-image: url("/assets/images/webp/rating-luca-bg.webp");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 449px;
    width: 401px;
    padding-bottom: 95px;
  }

  .upgrade_pitch_btn_group,
  .score_btn_group {
    gap: 120px;
  }

  .score_btn_line {
    max-width: 185px;
  }

  .sitting_area_btn {
    max-width: 183px;
  }

  .sitting_btn_line {
    max-width: 224px;
  }

  .lights_btn,
  .pitch_btn {
    max-width: 112px;
  }

  .lights_btn_line {
    max-width: 154px;
  }

  .footer_cartoon {
    max-width: 180px;
  }
}

@media (min-width: 768px) {
  .max_w_505 {
    max-width: 505px;
  }

  .pitch_btn {
    transform: translateY(60px);
  }

  .footer_logo {
    max-width: 200px;
  }

  .upgrade_bg {
    background-size: 100% 100%;
  }

  .introducing_bg {
    padding: 80px 0 69px;
  }

  .play_bg {
    padding: 80px 0 76px;
  }

  .mission_bg {
    padding: 80px 0 240px;
  }

  .common_spacing {
    padding-top: 38px;
    padding-bottom: 38px;
  }

  .mission_player {
    position: absolute;
    bottom: 7%;
    right: 10px;
    max-width: 203px;
  }

  .max_w_895 {
    max-width: 895px;
  }

  .max_w_603 {
    max-width: 603px;
  }

  .mission_group {
    position: absolute;
    bottom: 0;
    left: 8px;
    max-width: 266px;
  }

  .paragraph {
    padding-top: 16px;
  }

  .tactics_board_img {
    max-width: 532px;
    height: 432px;
    width: 100%;
  }

  .play_earn {
    position: absolute;
    bottom: 17%;
    right: 0;
    pointer-events: none;
  }

  .rating_bg {
    padding: 80px 0 0;
  }

  .play_group {
    opacity: 100%;
  }

  .mt_40 {
    margin-top: 40px !important;
  }

  .footer_bg {
    padding-bottom: 66px;
  }

  .upgrade_bg {
    background-image: url("/assets/images/webp/why-strikeria-bg.webp");
    padding: 80px 0;
    background-position: 0 58px;
    box-shadow: 0px -30px 40px -3px rgba(0, 0, 0, 1) inset;
    -webkit-box-shadow: 0px -30px 40px -3px rgba(0, 0, 0, 1) inset;
    -moz-box-shadow: 0px -30px 40px -3px rgba(0, 0, 0, 1) inset;
  }

  .upgrade_pitch_btn_group {
    transform: translateX(21px);
    gap: 32px;
  }

  .score_btn_group {
    transform: translateX(48px);
    gap: unset;
  }

  .upgrade_btn_group {
    margin-top: 67px !important;
  }

  .score_btn_group {
    margin-bottom: 38px;
  }

  .upgrade_heading {
    margin-bottom: 40px !important;
  }

  .join_us_card {
    padding: 70px 38px;
  }

  .introducing_ellipse {
    width: 250px;
    height: 150px;
    top: 20%;
    background: var(--color-green);
    left: 2%;
    filter: blur(210px);
    position: absolute;
    pointer-events: none;
    z-index: -1;
  }
}

@media (min-width: 992px) {
  .max_w_614 {
    max-width: 614px;
  }

  .pitch_btn {
    transform: translateY(24px);
  }

  .introducing_img {
    max-width: 416px;
    transform: translateX(-10%);
  }

  .lights_btn {
    transform: translateY(34px);
  }

  .play_img {
    max-width: 100%;
    transform: translateX(-10%);
  }

  .upgrade_bg {
    box-shadow: unset !important;
  }

  .gap_lg_32 {
    gap: 32px !important;
  }

  .position_lg_absolute {
    position: absolute;
  }

  .header_mobile {
    min-height: 810px;
  }

  .common_spacing {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .me_lg_86 {
    margin-right: 86px !important;
  }

  .-bottom_lg_40 {
    bottom: -40px;
  }

  .mission_bg {
    padding: 110px 0 245px;
  }

  .introducing_bg {
    padding: 116px 0 69px;
  }

  .mt-lg-card-second-rank {
    margin-top: 64px !important;
  }

  .back_top_btn {
    max-width: 32px !important;
    max-height: 32px !important;
  }

  .back_to_top {
    width: 50px !important;
    height: 50px !important;
  }

  .rating_bg {
    padding: 100px 0 0;
  }

  .tactic_padding {
    padding-top: 100px;
  }

  .footer_bg {
    padding: 98px 0 75px 0 !important;
  }

  .footer_cartoon {
    max-width: 297px !important;
    opacity: 100%;
  }

  .footer_logo {
    max-width: 230px;
  }

  .upgrade_pitch_btn_group {
    max-width: 578px;
    gap: 76px;
  }

  .score_btn_group {
    max-width: 630px;
  }

  .footer_bg {
    background-size: 100% 100%;
  }

  .Journey_img {
    max-width: 555px;
    max-height: 310px;
  }

  .padding_join {
    padding-top: 90px !important;
  }

  .sitting_area_btn {
    transform: translateY(34px);
  }

  .size_soccer {
    width: 37px;
    height: 35px;
  }

  .upgrade_bg {
    background-position: unset;
  }

  .img_prop_header {
    width: 600px;
    height: auto;
  }

  .max_w_416 {
    max-width: 416px;
  }
}

@media (min-width: 1200px) {
  .upgrade_bg {
    padding: 120px 0 59px 0 !important;
  }

  .footer_logo {
    max-width: 287px !important;
  }

  .introducing_ellipse {
    width: 176px;
    height: 249px;
    background: var(--color-green);
    filter: blur(130px);
    position: absolute;
    pointer-events: none;
    top: 10%;
    left: 30%;
    z-index: -1;
  }

  .py_xl_120 {
    padding-top: 120px !important;
    padding-bottom: 120px !important;
  }

  .lights_btn {
    transform: unset;
  }

  .mission_group {
    max-width: 366px;
  }

  .play_img {
    transform: translateX(-97px);
  }

  .mission_player {
    max-width: 273px;
  }

  .introducing_img {
    max-width: 516px;
    max-height: 533px;
    transform: translateX(-86px);
  }

  .container {
    max-width: 1164px !important;
  }

  .rating_ball {
    width: 180px;
    top: 5%;
  }

  .tactics_board_img {
    width: 532px;
    height: 532px;
  }

  .pitch_btn {
    transform: translateY(-10px);
  }
}

@media (min-width: 1320px) {
  .translate_prev_arrow {
    transform: translateX(-67px);
  }

  .position_xl_absolute {
    position: absolute;
  }

  .max_xl_w_full {
    max-width: 100%;
  }

  .swiper_arrow {
    top: 50%;
    max-width: 100%;
    transform: translateY(-50%);
    padding-top: 0;
    padding-bottom: 0;
  }

  .translate_next_arrow {
    transform: translateX(67px) rotate(180deg);
  }

  .bottom_140 {
    bottom: 140px !important;
  }

  .transform_upgrade_porp {
    transform: translateX(-46px);
  }
}

@media (min-width: 1400px) {
  .join_us_card {
    padding: 120px 88px !important;
  }

  .padding_join {
    padding-top: 100px !important;
  }

  .max_w_569 {
    max-width: 569px;
  }

  .img_prop_header {
    width: 682px !important;
    height: 671px !important;
  }
}

@media (min-width: 1600px) {
  .score_btn_group {
    transform: translateX(-127px);
  }
}

@media (min-width: 1441px) and (max-width: 1920px) {
  .header_xl {
    min-height: calc(100vh - 130px);
    max-height: 1200px !important;
  }

  .header_height_prop {
    max-height: 1260px !important;
  }

  .position_lg_absolute {
    position: unset !important;
  }

  .img_prop_header {
    width: 100% !important;
    height: 100% !important;
  }
}