@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;
    }
}