@media only screen and (max-width: 1536px) {
  section,
  .py-80 {
    padding: 70px 0;
  }
  .section-title h2 {
    font-size: 46px;
    line-height: 52px;
  }

  .card-title h3,
  .text-primary-24,
  .faq-section .accordion .accordion-item .accordion-header button span {
    font-size: 22px;
    line-height: 28px;
  }

  .game-name h3 {
    font-size: 22px;
    line-height: 28px;
  }

  .hero-section h1 {
    font-size: 64px;
    line-height: 70px;
  }

  .theme-btn,
  .simple-btn {
    padding: 11px 30px;
  }

  .store-links a img {
    height: 70px;
  }

  footer ul li a,
  footer ul li:not(:last-child)::after {
    font-size: 22px;
    line-height: 28px;
  }

  .card-right {
    margin-left: 30%;
  }
}
@media only screen and (max-width: 1440px) {
}
@media only screen and (max-width: 1400px) {
  .theme-btn,
  .simple-btn {
    padding: 11px 26px;
    font-size: 18px;
    line-height: 24px;
  }

  .section-title {
    margin-bottom: 36px;
  }

  .section-title h2 {
    font-size: 40px;
    line-height: 46px;
  }

  .nav-icon {
    width: 44px;
    height: 44px;
  }

  .header-logo img {
    height: 36px;
  }

  .real-gamers h3 {
    font-size: 22px;
    line-height: 28px;
  }

  .hero-section h1 {
    font-size: 58px;
    line-height: 64px;
  }

  .hero-section p,
  .newsletter-section .section-title p {
    font-size: 22px;
    line-height: 28px;
  }

  .game-name h3 {
    font-size: 20px;
    line-height: 26px;
  }

  .store-links a img {
    height: 64px;
  }

  .newsletter-section form input {
    padding: 10px 20px;
  }

  .footer-logo img {
    height: 54px;
  }

  .card-right {
    margin-left: 25%;
  }

  .card-right > img,
  .card-left > img {
    transform: scale(0.75);
    bottom: 55%;
  }
}
@media only screen and (max-width: 1399px) {
}
@media only screen and (max-width: 1366px) {
  section,
  .py-80 {
    padding: 60px 0;
  }
  .hero-section h1 {
    font-size: 52px;
    line-height: 58px;
  }
}
@media only screen and (max-width: 1280px) {
  .section-title {
    margin-bottom: 32px;
  }

  .section-title h2 {
    font-size: 36px;
    line-height: 42px;
  }

  .card-title h3,
  .text-primary-24,
  .faq-section .accordion .accordion-item .accordion-header button span {
    font-size: 20px;
    line-height: 26px;
  }

  .hero-section p,
  .newsletter-section .section-title p {
    font-size: 20px;
    line-height: 26px;
  }

  .hero-section h1 {
    font-size: 46px;
    line-height: 52px;
  }

  .theme-btn,
  .simple-btn {
    font-size: 18px;
    line-height: 24px;
  }

  .game-card > span {
    top: 20px;
    left: 20px;
  }

  .bonus-slider.owl-theme .owl-nav.disabled + .owl-dots,
  .slider-button-block {
    margin-top: 30px;
  }

  .bonus-slider.owl-carousel .owl-dots .owl-dot span {
    width: 14px;
    height: 14px;
  }

  .store-links a img {
    height: 60px;
  }

  .newsletter-section form input {
    padding: 10px 20px;
  }

  .footer-logo img {
    height: 50px;
  }

  footer ul li a,
  footer ul li:not(:last-child)::after {
    font-size: 20px;
    line-height: 26px;
  }
}
@media only screen and (max-width: 1200px) {
}
@media only screen and (max-width: 1199px) {
  .card-icon {
    margin-bottom: 28px;
  }

  .card-right > img {
    left: -17%;
  }

  .card-left > img {
    right: -17%;
  }
}
@media only screen and (max-width: 1024px) {
  section,
  .py-80 {
    padding: 50px 0;
  }
  .section-title {
    margin-bottom: 28px;
  }

  .section-title h2 {
    font-size: 30px;
    line-height: 36px;
  }

  .card-title h3,
  .text-primary-24,
  .faq-section .accordion .accordion-item .accordion-header button span {
    font-size: 18px;
    line-height: 24px;
  }

  .g-30 {
    --bs-gutter-x: 24px;
    --bs-gutter-y: 24px;
  }

  .header-logo img {
    height: 34px;
  }

  .nav-icon {
    width: 42px;
    height: 42px;
  }

  .header-list {
    padding: 20px;
  }

  .real-gamers h3 {
    font-size: 20px;
    line-height: 26px;
  }

  .hero-section {
    background-position: right center;
  }

  .hero-section h1 {
    font-size: 42px;
    line-height: 48px;
  }

  .hero-section p,
  .newsletter-section .section-title p {
    font-size: 18px;
    line-height: 24px;
  }

  .hero-links {
    margin-top: 24px;
  }

  .theme-btn,
  .simple-btn {
    padding: 10px 24px;
  }

  .game-card > span {
    font-size: 14px;
    line-height: 20px;
  }

  .game-name {
    bottom: 20px;
    left: 20px;
    width: calc(100% - 40px);
  }

  .game-name h3 {
    font-size: 18px;
    line-height: 24px;
  }

  .bonus-slider.owl-theme .owl-nav.disabled + .owl-dots,
  .slider-button-block {
    margin-top: 24px;
  }

  .store-links a:first-child {
    margin-right: 16px;
  }

  .store-links a img {
    height: 50px;
  }

  .winner-name {
    margin-bottom: 28px;
  }

  .newsletter-section form input {
    padding: 10px 20px;
  }

  .newsletter-section form input,
  .newsletter-section form input::placeholder {
    font-size: 16px;
    line-height: 22px;
  }

  .store-links {
    margin-top: 24px;
  }

  .footer-logo {
    margin-bottom: 24px;
  }

  .footer-logo img {
    height: 46px;
  }

  footer ul {
    flex-direction: column;
    gap: 14px;
  }

  footer ul li a {
    font-size: 18px;
    line-height: 24px;
  }

  footer ul li:not(:last-child)::after {
    display: none;
  }

  .copyright {
    flex-direction: column-reverse;
  }

  .step-card .card-icon span {
    font-size: 24px;
    line-height: 30px;
  }
}
@media only screen and (max-width: 992px) {
}
@media only screen and (max-width: 991px) {
  .games-section .row.g-30 div:nth-child(2) {
    order: -1;
  }

  .card-right > img {
    left: -22%;
  }

  .card-left > img {
    right: -22%;
  }

  .newsletter-content {
    margin-top: 0;
  }

  .hero-section {
    align-items: start;
  }

  .real-gamers {
    margin-top: 220px;
  }
}
@media only screen and (max-width: 768px) {
}
@media only screen and (max-width: 767px) {
  html,
  body {
    scroll-padding-top: 70px;
    scroll-margin-top: 70px;
  }
  section,
  .py-80 {
    padding: 40px 8px;
  }

  .section-title {
    margin-bottom: 24px;
  }

  .section-title h2 {
    font-size: 24px;
    line-height: 30px;
  }

  .card-title h3,
  .text-primary-24,
  .faq-section .accordion .accordion-item .accordion-header button span {
    font-size: 16px;
    line-height: 22px;
  }

  .g-30 {
    --bs-gutter-x: 20px;
    --bs-gutter-y: 20px;
  }

  header nav {
    flex-direction: row-reverse;
    padding: 8px;
  }

  .header-logo {
    margin-left: 10px;
  }

  .header-logo img {
    height: 30px;
  }

  .header-list {
    right: 0;
  }

  .nav-icon {
    width: 38px;
    height: 38px;
  }

  #menu-icon {
    width: 16px;
    height: 16px;
  }

  #close-icon {
    width: 14px;
    height: 14px;
  }

  .real-gamers {
    gap: 20px;
  }

  .real-gamers h3 {
    font-size: 18px;
    line-height: 24px;
  }

  .hero-section h1 {
    font-size: 36px;
    line-height: 42px;
  }

  .hero-section p,
  .newsletter-section .section-title p {
    font-size: 16px;
    line-height: 22px;
  }

  .games-section .row.g-30 div:nth-child(2) {
    order: 0;
  }

  .game-name h3 {
    font-size: 16px;
    line-height: 22px;
  }

  .second-card img:first-of-type {
    display: none;
  }

  .second-card img:last-of-type {
    display: block;
  }

  .hero-links {
    margin-top: 20px;
  }

  .theme-btn,
  .simple-btn {
    padding: 9px 20px;
    font-size: 14px;
    line-height: 20px;
  }

  .bonus-slider.owl-theme .owl-nav.disabled + .owl-dots,
  .slider-button-block {
    margin-top: 20px;
  }

  .bonus-slider.owl-carousel .owl-dots .owl-dot span {
    width: 12px;
    height: 12px;
  }

  .feature-card {
    padding: 24px;
    align-items: center;
    text-align: center;
  }

  .card-icon {
    width: 54px;
    height: 54px;
    margin-bottom: 24px;
  }

  .feature-icon img {
    width: 27px;
    height: 27px;
  }

  .store-links {
    margin-top: 20px;
  }

  .store-links a:first-child {
    margin-right: 10px;
  }

  .store-links a img {
    height: 44px;
  }

  .winner-name {
    margin-bottom: 24px;
  }

  .winner-icon {
    width: 50px;
    height: 50px;
  }

  .slider-button-block button {
    width: 38px;
    height: 38px;
  }

  .slider-button-block button::after {
    width: 40px;
    height: 40px;
  }

  .slider-button-block button svg {
    width: 16px;
    height: 14px;
  }

  .faq-section
    .accordion
    .accordion-item
    .accordion-collapse
    .accordion-body
    p {
    font-size: 14px;
    line-height: 20px;
  }

  .faq-section .accordion .accordion-item .accordion-header button {
    padding: 16px 20px;
  }

  .faq-section .accordion .accordion-item .accordion-collapse .accordion-body {
    padding: 0 20px 16px 20px;
  }

  .faq-section .accordion .accordion-item .accordion-header button::after {
    right: 20px;
  }

  .newsletter-section .section-title h2,
  .newsletter-section .section-title p {
    text-align: center;
  }

  .newsletter-section form > div {
    width: 100%;
  }

  .newsletter-section form input {
    padding: 9px 20px;
  }

  .footer-logo {
    margin-bottom: 20px;
  }

  footer ul {
    gap: 10px;
  }

  .footer-logo a img {
    height: 40px;
  }

  footer ul li a {
    font-size: 16px;
    line-height: 22px;
  }

  .copyright p {
    font-size: 14px;
    line-height: 20px;
  }

  .card-right > img {
    display: none;
  }

  .card-left > img {
    display: none;
  }

  .card-right {
    margin-left: 0;
  }

  .steps-card-wrapper .yellow-border {
    width: 100%;
  }

  .step-card .card-icon span {
    font-size: 20px;
    line-height: 26px;
  }

  .game-card::before {
    opacity: 1;
  }

  .game-card .game-name {
    opacity: 1;
    transform: translateY(0);
  }

  .header-list ul li:not(:nth-last-child(-n + 2)) {
    margin-bottom: 14px;
  }

  .steps-section .row.g-30 {
    --bs-gutter-x: 30px;
    --bs-gutter-y: 30px;
  }
}
@media only screen and (max-width: 576px) {
  .bonus-card .game-name a {
    max-height: 40px;
    padding: 9px 14px;
  }

  .bonus-card .game-name h3 {
    max-width: 50%;
  }

  .hero-section {
    background-image: url(../images/backgrounds/hero-bg-mobile.webp);
  }
}
@media only screen and (max-width: 400px) {
  .real-gamers {
    flex-direction: column;
    align-items: start !important;
    gap: 10px;
  }

  .hero-section h1 {
    font-size: 30px;
    line-height: 36px;
  }

  .copyright p {
    font-size: 12px;
    line-height: 18px;
  }
}

@media (max-width: 991px) and (orientation: landscape) {
  .header-list {
    right: 0;
  }

  .header-list ul {
    overflow: scroll;
    height: 200px;
  }

  .hero-section {
    align-items: center;
  }

  .real-gamers {
    margin-top: 0;
  }
}

@media (max-width: 767px) and (orientation: landscape) {
  .header-list ul {
    overflow: scroll;
    height: 250px;
    padding-bottom: 30px;
  }
}

@media (max-width: 991px) and (orientation: portrait) {
  .header-list ul {
    overflow: auto;
    height: auto;
  }
}

@media (min-width: 2000px) {
  .hero-section {
    background-size: contain;
  }
}

/* Toast */

@media only screen and (max-width: 991px) {
  #success-toast {
    top: 58px;
    right: 20px;
  }
}

@media only screen and (max-width: 767px) {
  #success-toast {
    top: 50px;
    right: 16px;
  }
}

@media only screen and (max-width: 576px) {
  #success-toast {
    top: auto;
    right: 16px;
    width: calc(100% - 30px);
    left: 50%;
    transform: translateX(-50%) !important;
    bottom: 20px;
  }
}