/****************/


@keyframes scaleOpacity {
  0% {
      transform: scale(0.9);
      opacity: 0;
  }
  100% {
      transform: scale(1);
      opacity: 1;
  }
}

@keyframes zoomInOut {
      0%, 100% {
        transform: scale(1);
      }
      50% {
        transform: scale(0.9);
      }
    }

@media screen and (min-width: 1700px) {
	.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
		/*max-width: 1640px;*/
	}
}

@font-face {
    font-family: Aceh;
    src: url('fonts/Aceh-Medium.ttf');
    font-weight: 400;
}

@font-face {
    font-family: Heavitas;
    src: url('fonts/Heavitas.ttf');
    font-weight: 400;
}


h1, h2, h3, footer .copyright {
    font-family: "Heavitas", sans-serif;
}

body {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    background: #201E24;
    color: #FFFFFF;
    font-family: "Aceh", sans-serif;
    overflow-x: hidden;
    font-size: 18px;
    letter-spacing: 0.5px;
}

.head-btn {
    display: flex;
    gap: 15px
}

.head-btn .btnlink {
    background: linear-gradient(181.48deg, #C42126 1.46%, #FF3238 98.94%);
    box-shadow: 2px 2px 2px 0px #FFFFFF80 inset, -2px -2px 2px 0px #00000040 inset;
    padding: 14px 20px 12px;
    border-radius: 8px;
    text-decoration: unset;
    font-family: "Heavitas", sans-serif;
    color: #fff;
    font-weight: 400;
    letter-spacing: 0.2em;
    transition: transform .2s;
    text-align: center;
    line-height: 19.2px;
    font-size: 12px;
}

.head-btn .btnlink:hover {
    transform: scale(1.05);
}

.menu-wrapper {
    display: none;
}

.line {
    margin-top: 15px;
}

header#zsHead {
    border-bottom: unset;
    position: absolute;
    z-index: 1001;
    width: 100%;
    left: 0;
    top: 0;
}

.btnlink-animate {
    background: linear-gradient(181.48deg, #C42126 1.46%, #FF3238 98.94%);
    box-shadow: 2px 2px 2px 0px #FFFFFF80 inset, -2px -2px 2px 0px #00000040 inset, 0px 0px 10px 0px #F6F6F6;
    color: #fff;
    text-decoration: unset;
    padding: 20px 30px 16px;
    border-radius: 8px;
    margin-top: 50px;
    letter-spacing: 0.2em;
    font-family: "Heavitas", sans-serif;
    color: #fff;
    font-weight: 400;
}

.btnlink-animate br {
    display: none;
}

.btn-box {
    padding-left: 3px;
    padding-right: 3px;
    margin: 30px auto;
}

.clear {
    clear: both;
}

h1, h2 {
    background: linear-gradient(89.93deg, #C42126 11.41%, #FF3238 88.78%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 45px;
    text-align: center;
}

h4 {
    color: #FFF0D4;
    font-size: 32px;
    font-weight: 700;
    margin-top: 5px;
    text-align: center;
}

.btn-a {
    margin: 30px 0;
}

.btn-a br {
    display: none;
}

.btn-a .shimmer {
    color: #383346;
}

.scrollmou {
    margin-top: -20px;
}

.scroll {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 80px;
    position: relative;
    z-index: 1001;
}


/* ========================================================================== */
/* ================= BANNER               =================================== */
/* ========================================================================== */
.bannermou {
    transition: unset !important;
    opacity: 1;
}

.banner-slider {
    position: relative;
    background: #383346;
}

.banner-title {
    position: absolute;
    top: 0;
    height: 100%;
    bottom: 0;
    margin: auto;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

.banner-box .owl-nav {
    position: absolute;
    width: 100%;
    top: 0;
    bottom: 0;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.banner-box .owl-nav span {
    display: none;
}

.banner-box .owl-nav .owl-prev, .swiper-button-prev:after {
    content: '';
    position: relative;
    left: 0px;
    background-image: url('img/banner-arrow.png') !important;
    width: 60px;
    height: 60px;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat;
    transform: rotate(180deg);
    opacity: 0.7;
}

.banner-box .owl-nav .owl-next, .swiper-button-next:after {
    content: '';
    position: relative;
    right: 0px;
    background-image: url('img/banner-arrow.png') !important;
    width: 60px;
    height: 60px;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat;
    opacity: 0.7;
}

.banner-box .owl-nav .owl-prev:hover, .banner-box .owl-nav .owl-next:hover, .swiper-button-next:hover:after, .swiper-button-prev:hover:after  {
    background: unset;
    opacity: 1
}

.swiper-button-next, .swiper-button-prev {
    width: 60px;
    height: 60px;
}


.swiper {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.offer {
    position: absolute;
    bottom: 0;
    z-index: 99;
    text-align: center;
    margin-left: 35px;
}

.offer h4 {
    background: linear-gradient(90deg, #A73D00 0%, #CA7F34 18%, #FFBB57 39%, #FFD36E 51%, #FFA347 87%, #FFF9CE 100%);
    box-shadow: 0px 0px 12.307951927185059px 0px #00000080;
    border-radius: 8px;
    color: #000;
    font-size: 26px;
    padding: 15px 20px;
    font-family: "Heavitas", sans-serif;
    box-shadow: 0px 0px 12px 0px #00000080;
}

.offer p {
    font-size: 26px;
    padding-top: 5px;
    padding-bottom: 15px;
    line-height: 1.3;
}


.offer img {
    position: absolute;
    z-index: -1;
    bottom: 0;
    max-width: 120%;
    left: -10%;
}

.offer {
    -webkit-animation: offer 1s infinite alternate;
    animation: offer 1s infinite alternate;
}

@-webkit-keyframes offer {
    0% { transform: translateY(20); }
    100% { transform: translateY(-20px); }
}

@keyframes offer {
    0% { transform: translateY(20); }
    100% { transform: translateY(-20px); }
}

.swiper-pagination {
    display: none;
}

.preloader img {
    max-width: 200px;
}

.banner-title {
    width: 420px;
    padding-bottom: 100px;
}

.banner-title h3 {
    background: linear-gradient(90deg, #A73D00 0%, #CA7F34 18%, #FFBB57 39%, #FFD36E 51%, #FFA347 87%, #FFF9CE 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 40px;
    filter: drop-shadow(0px 0px #000);
    line-height: 1.1;
}

.banner-title h3 .big {
    font-size: 140px;
}

.banner-title p {
    font-size: 28px;
    letter-spacing: 0.2em;
    font-weight: 600;
    line-height: 1.2;
}

.banner-title a {
    margin-top: 0;
    /*padding: 15px 30px 13px;*/
}

#slide-2 .banner-title h3 {
    font-size: 30px !important;
}

#slide-2 .banner-title h3 .big {
    font-size: 120px !important;
}

.m-banner, .lm-banner {
    display: none !important;
}


/* ========================================================================== */
/* ================= GAME PLAY            =================================== */
/* ========================================================================== */
.game-play {
    text-align: center;
    /*padding-top: 30px;*/
    margin-top: -10px;
}

.gameplay-list {
    margin-top: 50px;
}

.game-box {
    background: linear-gradient(181.48deg, #670C8A 1.46%, #F0894B 98.94%);
    padding: 120px 30px 30px;
    box-shadow: 0px 0px 20px 0px #DEBCE8;
    border-radius: 24px;
    margin-top: -110px;
    margin-bottom: 30px !important;
    transition: 0.3s;
    /*min-height: 440px;*/
}

.gameplay-list .col-md-6:hover {
    transform: scale(1.015);
}

.gameplay-list .col-md-6:nth-child(2) .game-box {
    background: linear-gradient(181.48deg, #131024 1.46%, #282457 98.94%);
    box-shadow: 0px 0px 20px 0px #BFB2FD;
}

.gameplay-list .col-md-6:nth-child(3) .game-box {
    background: linear-gradient(181.48deg, #322323 1.46%, #957E71 98.94%);
    box-shadow: 0px 0px 20px 0px #D4B6A6;
}

.gameplay-list .col-md-6:nth-child(4) .game-box {
    background: linear-gradient(181.48deg, #8C3E09 1.46%, #E3A303 98.94%);
    box-shadow: 0px 0px 20px 0px #FEEFCA;
}

.gameplay-list .col-md-6:nth-child(odd) {
    padding-right: 20px;
    transition: 0.3s;
}

.gameplay-list .col-md-6:nth-child(even) {
    padding-left: 20px;
    transition: 0.3s;
}

.game-box h3 {
    font-size: 22px;
    margin-bottom: 10px;
}

.game-box p, .discover-box p {
    font-size: 16px;
}

.discover-join {
    padding: 30px 0 0;
}

.game-box p {
    height: 180px;
}


/* ========================================================================== */
/* ================= DISCOVER             =================================== */
/* ========================================================================== */
.discover-list {
    padding: 35px 0 0;
}

.discover-list .container, .gameplay-list .container {
    padding: 0;
}

.discover-box {
    background: #383346;
    padding: 20px 15px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    margin-bottom: 20px !important;
}

.discover-box h3 {
    color: #FFD689;
    font-size: 16px;
}

.discover-box p {
    line-height: 21.6px;
}

.discover-box img {
    margin-right: 15px;
}

.join-now h2 {
    background: linear-gradient(90deg, #A73D00 0%, #CA7F34 18%, #FFBB57 39%, #FFD36E 51%, #FFA347 87%, #FFF9CE 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 50px;
}

.join-now h4 {
    color: #fff;
    position: relative;
    width: max-content;
    margin: auto;
    margin-bottom: 5px;
}

.join-now h4:before {
    content: '';
    width: 20px;
    height: 2px;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    background: #fff;
    left: -40px;
}

.join-now h4:after {
    content: '';
    width: 20px;
    height: 2px;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    background: #fff;
    right: -40px;
}

.join-now img {
    width: 240px;
}

.join-now a br, .join-now a p {
    display: none;
}


/* ========================================================================== */
/* ================= APP                  =================================== */
/* ========================================================================== */
.app {
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.app h2 {
    text-align: left;
    color: #fff;
    background: unset;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
}

.app img {
    -webkit-animation: mover 2s infinite alternate;
    animation: mover 2s infinite alternate;
}

@-webkit-keyframes mover {
    0% { transform: translateY(10); }
    100% { transform: translateY(-10px); }
}

@keyframes mover {
    0% { transform: translateY(10); }
    100% { transform: translateY(-10px); }
}


/* ========================================================================== */
/* ================= SERVICE              =================================== */
/* ========================================================================== */
.bg-color {
    margin-top: -178px;
}

.service-box {
    display: flex;
    align-items: center;
}

.service-box img {
    min-width: 400px;
    max-width: 400px;
    padding: 30px;
}

.service-box h3 {
    color: #FFD689;
    font-size: 45px;
}

.service-box .service-h3 {
    background: linear-gradient(90deg, #A73D00 0%, #CA7F34 18%, #FFBB57 39%, #FFD36E 51%, #FFA347 87%, #FFF9CE 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.service-box .btn-box {
    margin-bottom: 10px;
}


/* ========================================================================== */
/* ================= FAQ                  =================================== */
/* ========================================================================== */
.faq h2 {
    color: #fff;
    background: unset;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    margin-bottom: 30px !important;
}

.faq .faq-box {
    margin-bottom: 20px;
}

.faq .accordion {
    background-color: #383346;
    color: #444;
    cursor: pointer;
    padding: 18px 20px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    transition: 0.4s;
    border-radius: 8px;
    position: relative;
}

.faq .accordion h4 {
    color: #FFF0D4;
    font-size: 24px;
    text-align: left;
    padding-left: 40px;
}

.faq .accordion.active {
    border-radius: 8px 8px 0 0;
}

.faq .accordion.active h4, .faq .accordion:hover h4 {
    color: #FFB201;
}

.faq .accordion:after {
    content: '';
    position: absolute;
    left: 17px;
    top: 0;
    bottom: 0;
    margin: auto;
    background: url('img/faq-arrow.png');
    display: block;
    width: 32px;
    height: 32px;
    background-size: contain;
}

.faq .accordion:hover:after {
    content: '';
    background: url('img/faq--arrow-active.png');
    display: block;
    width: 32px;
    height: 32px;
    background-size: contain;
    background-repeat: no-repeat;
    transform: rotate(180deg);
}

.faq .accordion.active:after, .faq .accordion.active:hover:after {
    content: '';
    background: url('img/faq--arrow-active.png');
    display: block;
    width: 32px;
    height: 32px;
    background-size: contain;
    background-repeat: no-repeat;
    transform: rotate(0deg);
}

.faq .panel {
    padding: 0 20px;
    background-color: #383346;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    border-radius: 0 0 8px 8px;
}

.faq .panel p {
    margin-bottom: 20px !important;
}

.faq-list .btn-box {
    text-align: center;
}

.faq-list a {
    width: 100%;
    margin: auto;
    display: block;
    text-align: center;
    padding-top: 10px;
}


/* ========================================================================== */
/* ================= FOOTER               =================================== */
/* ========================================================================== */
footer {
    background: linear-gradient(181.48deg, #C42126 1.46%, #FF3238 98.94%);
    padding: 20px 0;
}

footer .copyright {
    border-top: unset;
    font-size: 12px;
}

.fixed-offer {
    display: none;
}

.chevron {
  position: absolute;
  width: 28px;
  height: 8px;
  opacity: 0;
  transform: scale3d(0.5, 0.5, 0.5);
  animation: move 3s ease-out infinite;
}

.chevron:first-child {
  animation: move 3s ease-out 1s infinite;
}

.chevron:nth-child(2) {
  animation: move 3s ease-out 2s infinite;
}

.chevron:before,
.chevron:after {
  content: ' ';
  position: absolute;
  top: 0;
  height: 100%;
  width: 51%;
  background: #fff;
}

.chevron:before {
  left: 0;
  transform: skew(0deg, 30deg);
}

.chevron:after {
  right: 0;
  width: 50%;
  transform: skew(0deg, -30deg);
}

@keyframes move {
  25% {
    opacity: 1;

  }
  33% {
    opacity: 1;
    transform: translateY(30px);
  }
  67% {
    opacity: 1;
    transform: translateY(40px);
  }
  100% {
    opacity: 0;
    transform: translateY(55px) scale3d(0.5, 0.5, 0.5);
  }
}

/****************NEw Close Page******************/
#bg-close{background:url('https://www.22fun.website/wp-content/uploads/2025/06/bg-01.webp') no-repeat top center;background-size:cover;}
#img01{position:relative;z-index:2;}
#img02{position:absolute;top:0;z-index:1;}
#img01 img, #img02 img{max-width:85%;}
.title_img img{max-width:100%;}
.btn01 img{ animation: zoomInOut 2s infinite ease-in-out;}

#img02 img{ animation: scaleOpacity 1s infinite alternate;}
.title_img{margin-bottom:15px;}
#bg-close .left_box{padding-left:30px;}
/* ========================================================================== */
/* ================= MEDIA                =================================== */
/* ========================================================================== */
@media only screen and (min-width: 1800px) {
    .banner-title h3 .big {
        font-size: 180px;
    }
    
    .banner-title h3 {
        font-size: 50px;
    }
    
    .banner-title p {
        font-size: 34px;
    }
    
    .app-content {
        margin-bottom: 50px;
    }
    
    .service-box img {
        padding: 15px 30px;
    }
    
    .join-now img {
        width: 280px;
    }
    
    .join-now h2 {
        font-size: 60px;
    }
    
    .join-now h4 {
        font-size: 36px;
    }
    
    .offer h4 {
        font-size: 30px;
    }
    
    .offer p {
        font-size: 28px;
    }
    
    .banner-title {
        width: 450px;
    }
    
    button .text {
        font-size: 20px;
    }
    
    #slide-2 .banner-title h3 .big {
        font-size: 150px !important;
    }
    
    #slide-2 .banner-title h3 {
        font-size: 40px !important;
    }
    
    .scrollmou {
        margin-top: -60px;
    }
}


@media only screen and (max-width: 1800px) {
    h1, h2 {
        font-size: 40px;
    }

    h4 {
        font-size: 28px;
    }
    
    .game-box p, .discover-box p {
        font-size: 15px;
    }
    
    .faq .accordion h4 {
        font-size: 22px;
    }
}


@media only screen and (max-width: 1550px) {
    .app {
        background-size: 100% 80%;
        padding-bottom: 100px;
    }
    
    .m-faq .wt_empty_space {
        display: none;
    }
    
    .bg-color .wt_empty_space {
        height: 40px !important;
    }
    
}

@media only screen and (max-width: 1200px) {
    body {
        font-size: 16px;
    }
    
    .logo {
        width: 140px;
    }
    
    .game-box h3 {
        font-size: 20px;
    }
    
    h4 {
        font-size: 24px;
    }
    
    .gameplay-list .col-md-6 img {
        width: 300px;
    }
    
    .game-box p {
        height: 220px;
    }
    
    h1, h2 {
        font-size: 36px;
    }
    
    .faq .accordion h4 {
        font-size: 20px;
    }
    
    .service-box h3 {
        font-size: 34px;
    }
    
    .service-box img {
        padding: 20px 30px;
    }
    
    .btn-a {
        margin: 20px 0;
    }
    
    .game-box {
        padding: 120px 20px 30px;
    }
    
    .join-now img {
        width: 200px;
    }
    
    .discover-join .vc_col-sm-8 {
        width: 60%;
    }
    
    .discover-join .vc_col-sm-4 {
        width: 40%;
    }
    
    .join-now h2 {
        font-size: 45px;
    }
    
    .offer h4 {
        font-size: 20px;
    }
    
    .offer p {
        font-size: 22px;
    }
    
    .offer {
        display: none;
    }
    
    .fixed-offer {
        display: block;
        position: fixed;
        bottom: 0;
        margin: 0;
        width: 100%;
        left: 0;
        right: 0;
        animation: none;
    }
    
    .fixed-offer h4 {
        font-size: 20px;
        width: fit-content;
        margin: auto;
        margin-bottom: 5px;
    }
    
    .fixed-offer img {
        display: none;
    }
    
    .fixed-offer p {
        background: linear-gradient(181.48deg, #000000 1.46%, #5C5571 98.94%);
        margin-bottom: 0;
        padding: 40px 10px 15px;
        margin-top: -30px;
        z-index: -1;
        position: relative;
    }
    
    footer {
        padding-bottom: 170px;
    }
    
    .banner-title h3 .big {
        font-size: 100px;
    }
    
    .banner-title h3 {
        font-size: 30px;
    }
    
    .banner-title p {
        font-size: 20px;
    }
    
    .banner-title {
        padding-bottom: 20px;
    }
    
    #slide-2 .banner-title h3 .big {
        font-size: 80px !important;
    }
    
    #slide-2 .banner-title h3 {
        font-size: 24px !important;
    }
    
    .menu-hamburger {
        display: none;
    }
    
    .swiper-button-next, .swiper-button-prev {
        width: 50px;
        height: 50px;
    }
    
    .game-play {
        margin-top: -40px;
    }
    
    .scrollmou {
        display: none;
    }
}


@media only screen and (max-width: 991px) {
    body {
        font-size: 15px;
    }
    
    .faq .accordion h4 {
        font-size: 18px;
    }
    
    h1, h2 {
        font-size: 34px;
    }
    
    h1 br, h2 br {
        display: none;
    } 
    
    .service-box h3 {
        font-size: 26px;
    }
    
    .service-box img {
        max-width: 280px;
        min-width: 280px;
        padding: 15px 10px 15px 0;
    }
    
    .discover-list .col-md-6 {
        width: 100%;
    }
    
    .discover-box {
        padding: 20px 25px;
    }
    
    .discover-box img {
        margin-right: 20px;
    }
    
    h4 {
        font-size: 22px;
    }
    
    .discover-join .vc_col-sm-8, .discover-join .vc_col-sm-4 {
        width: 50%;
    }
    
    .gameplay-list .row {
        flex-wrap: unset;
        overflow-x: auto;
        padding: 0 10px;
    }
    
    .game-box p {
        height: 320px;
    }
    
    .game-box h3 {
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .gameplay-list .col-md-6:nth-child(odd), .gameplay-list .col-md-6:nth-child(even) {
        padding: 0 15px;
    }
    
    .gameplay-list ::-webkit-scrollbar {
        width: 0;
        background: transparent;
    }
    
    .gameplay-list ::-webkit-scrollbar-track {
        background: transparent;
    }
    
    .gameplay-list ::-webkit-scrollbar-thumb {
        background: transparent;
    }
    
    .gameplay-list ::-webkit-scrollbar-thumb:hover {
        background: transparent;
    }
    
    .join-now img {
        width: 160px;
    }
    
    .join-now h2 {
        font-size: 38px;
    }
    
    .app .vc_col-sm-6 {
        width: 100%;
    }
    
    .app h2 {
        text-align: center;
    }
    
    .app {
        text-align: center;
        padding-top: 40px;
        background-size: cover;
        padding-bottom: 0;
    }
    
    .bg-color .wt_empty_space {
        height: 100px !important;
    }
    
    .m-faq .wt_empty_space {
        display: block;
    }
    
    .swiper-button-next, .swiper-button-prev {
        width: 40px;
        height: 40px;
    }
    
    .logo {
        width: 120px;
    }
    
    .head-btn .btnlink {
        padding: 10px 15px 8px;
    }
    
    .banner-title h3 .big {
        font-size: 90px;
    }
    
    .banner-title h3 {
        font-size: 30px;
    }
    
    .banner-title p {
        font-size: 20px;
    }
    
    .banner-title {
        padding-bottom: 0px;
    }
    
    #slide-2 .banner-title h3 .big {
        font-size: 70px !important;
    }
    
    #slide-2 .banner-title h3 {
        font-size: 20px !important;
    }
    
    .banner-title {
        width: 250px;
    }
    
    button.button2 {
        padding: 15px 30px 13px;
        font-size: 12px;
    }
	
	
	
	#bg-close .left_box,#bg-close .right_box{width:100%;padding:0;}

	#img01 img, #img02 img{max-width:100%;}
}

@media only screen and (max-width: 850px) {
    .banner-title h3 .big {
        font-size: 70px;
    }
    
    .banner-title h3 {
        font-size: 20px;
    }
    
    .banner-title p {
        font-size: 16px;
    }
    
    .banner-title {
        padding-bottom: 0px;
    }
    
    #slide-2 .banner-title h3 .big {
        font-size: 60px !important;
    }
    
    #slide-2 .banner-title h3 {
        font-size: 20px !important;
    }
    
    .banner-title {
        width: 320px;
    }
    
    button.button2 {
        padding: 15px 30px 13px;
        font-size: 12px;
    }
}


@media only screen and (max-width: 767px) {
    html, body {
        overflow-x: hidden;
    }
    
    body, .game-box p, .discover-box p {
        font-size: 14px;
    }

    .gameplay-list .col-md-6 {
        width: 350px;
    }
    
    h1, h2 {
        font-size: 26px;
    }
    
    h4 {
        font-size: 18px;
    }
    
    .game-box p {
        height: 300px;
    }
    
    .discover-join .vc_col-sm-8, .discover-join .vc_col-sm-4 {
        width: 100%;
    }
    
    .discover-join {
        flex-direction: column-reverse;
        gap: 30px
    }
    
    .discover-box {
        padding: 20px 20px;
    }
    
    .faq .accordion {
        padding: 15px 20px;
        font-size: 17px;
    }
    
    .preloader img {
        max-width: 160px;
    }
    
    .service-box {
        display: block;
        text-align: center;
        margin-bottom: 20px !important;
    }
    
    .service-box img {
        padding: 15px;
    }
    
    .service-box h3 {
        font-size: 26px;
    }
    
    .app h2 {
        text-align: center;
    }
    
    .app {
        text-align: center;
        padding-top: 40px;
        padding-bottom: 20px;
    }
    
    .bg-color {
        display: none !important;
    }
    
    button {
        padding: 20px 60px 16px;
    }
    
    .offer p {
        font-size: 20px;
    }
    
    .fixed-offer h4 {
        font-size: 18px;
        margin-bottom: 5px;
    }
    
    footer {
        padding-bottom: 160px;
    }
    
    .game-box h3 {
        font-size: 18px;
    }
    
    .head-btn .btnlink {
        font-size: 10px;
    }
    
    .banner-title {
        width: 100%;
        justify-content: start;
        padding-top: 90px;
        left: 0;
    }
    
    #slide-2 .banner-title {
        padding-top: 100px;
    }
    
    .banner-title h3 .big {
        font-size: 100px;
        display: block;
    }
    
    .banner-title h3 {
        font-size: 40px;
    }
    
    .banner-title p {
        font-size: 26px;
    }
    
    .banner-title h3 br, .banner-title p br {
        display: none;
    }
    
    button.button2 {
        padding: 15px 30px 13px;
        font-size: 18px;
    }
    
    #slide-2 .banner-title h3 .big {
        font-size: 110px !important;
    }
    
    #slide-2 .banner-title h3 {
        font-size: 30px !important;
    }
    
    .swiper-button-next, .swiper-button-prev {
        width: 35px;
        height: 35px;
    }
    
    .swiper-button-prev {
        left: 0;
    }
    
    .swiper-button-next {
        right: 0
    }
    
    .game-play {
        margin-top: 0;
    }
    
    .d-banner {
        display: none !important;
    }
    
    .lm-banner {
        display: block !important;
    }
	
	.button_box {display:flex;gap:5px;}
	.button_box .vc_column-inner{padding:0;}
}


@media only screen and (max-width: 700px) {
    #slide-2 .banner-title h3 .big {
        font-size: 90px !important;
    }
    
    #slide-2 .banner-title h3 {
        font-size: 28px !important;
    }
    
}



@media only screen and (max-width: 650px) {
    .banner-title h3 .big {
        font-size: 90px;
    }
    
    .banner-title h3 {
        font-size: 36px;
    }
    
    .banner-title p {
        font-size: 24px;
    }
    
    #slide-2 .banner-title {
        padding-top: 90px;
    }
    
    #slide-2 .banner-title h3 {
        font-size: 26px !important;
    }
    
    
    .banner-title {
        padding-top: 80px;
    }
}

@media only screen and (max-width: 600px) {
    .banner-title h3 .big {
        font-size: 80px;
    }
    
    .banner-title h3 {
        font-size: 34px;
    }
    
    .banner-title p {
        font-size: 22px;
    }
    
    #slide-2 .banner-title h3 .big {
        font-size: 80px !important;
    }
    
    #slide-2 .banner-title h3 {
        font-size: 24px !important;
    }
    
    .banner-title {
        padding-top: 80px;
    }
    
    #slide-2 .banner-title {
        padding-top: 80px;
    }
}

@media only screen and (max-width: 550px) {
    #slide-2 .banner-title h3 .big {
        font-size: 60px !important;
    }
    
    #slide-2 .banner-title h3 {
        font-size: 22px !important;
    }
}

@media only screen and (max-width: 500px) {
    .banner-title h3 .big {
        font-size: 70px;
    }
    
    #slide-2 .banner-title h3 {
        font-size: 20px !important;
    }
}

@media only screen and (max-width: 470px) {
    .banner-title {
        padding-top: 110px;
    }
    
    .banner-title h3 .big {
        font-size: 130px;
    }
    
    .banner-title h3 {
        font-size: 40px;
    }
    
    .banner-title p {
        font-size: 27px;
    }
    
    button.button2 {
        padding: 15px 30px 13px;
        font-size: 18px;
    }
    
    #slide-2 .banner-title h3 .big {
        font-size: 110px !important;
    }
    
    #slide-2 .banner-title h3 {
        font-size: 34px !important;
    }
    
    #slide-2 .banner-title {
        padding-top: 130px;
    }
    
    .d-banner, .lm-banner {
        display: none !important;
    }
    
    .m-banner {
        display: block !important;
    }
    
    .banner-title h3 br, .banner-title p br {
        display: block;
    }
    
    .banner-title h3 .big {
        display: unset;
    }
}


@media only screen and (max-width: 400px) {
    .faq .accordion h4 {
        font-size: 16px;
    }
    
    .service-box h3 {
        font-size: 24px;
    }
    
    .service-box img {
        max-width: 250px;
        min-width: 250px;
    }
    
    .discover-box img {
        width: 70px;
    }
    
    .offer p {
        font-size: 18px;
    }
    
    .fixed-offer h4 {
        font-size: 16px;
    }
    
    .gameplay-list .col-md-6 {
        width: 320px;
    }
    
    .banner-title h3 .big {
        font-size: 100px;
    }
    
    .banner-title h3 {
        font-size: 30px;
    }
    
    .banner-title p {
        font-size: 22px;
    }
    
    button.button2 {
        font-size: 16px;
    }
    
    #slide-2 .banner-title h3 .big {
        font-size: 80px !important;
    }
    
    #slide-2 .banner-title h3 {
        font-size: 28px !important;
    }
}

@media only screen and (max-width: 340px) {
    .discover-box {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 10px;
        text-align: center
    }
    
    .discover-box img {
        margin-right: 0;
    }
    
    .game-box p {
        height: 330px;
    }
    
    .gameplay-list .col-md-6 {
        width: 280px;
    }
    
    .game-box {
        padding: 120px 10px 30px;
    }
    
    .join-now img {
        width: 140px;
    }
    
    h1, h2 {
        font-size: 22px;
    }
    
    .service-box h3 {
        font-size: 20px;
    }
    
    .faq .accordion:after {
        width: 30px;
        height: 30px;
    }
    
    .join-now h2 {
        font-size: 36px;
    }
    
    .head-btn {
        gap: 5px
    }
    
    .banner-title {
        padding-top: 80px;
    }
    
    .banner-title h3 .big {
        font-size: 80px;
    }
    
    .banner-title h3 {
        font-size: 28px;
    }
    
    .banner-title p {
        font-size: 20px;
    }
    
    button.button2 {
        font-size: 14px;
    }
    
    #slide-2 .banner-title h3 .big {
        font-size: 60px !important;
    }
    
    #slide-2 .banner-title h3 {
        font-size: 24px !important;
    }
    
    #slide-2 .banner-title {
        padding-top: 100px;
    }
}