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

html, body {
    overflow-x: hidden;
}

body {
    margin: 0 auto;
    padding: 0;
    background: #F1F1F1;
  	font-family: "Montserrat", sans-serif !important;
  	color: #000;
  	position: relative
}

.space {
    padding-top: 40px;
    padding-bottom: 40px;
}

a {
	text-decoration: unset;
  	color: #000
}

button {
	border: unset;
  	box-shadow: unset;
  	padding: 0;
  	background: unset
}

button:focus, button:active {
	outline: unset;
  	box-shadow: unset
}

.gradient {
  	width: 100%;
  	height: 100vh;
 	position: fixed;
  	filter: blur(100px);
  	overflow: hidden;
    transform: scale(1.15);
  	z-index: -1
}

.gradient .gradient__blob {
    width: 550px;
    height: 350px;
    border-radius: 75%;
    position: absolute;
    background: #3372FF;
    bottom: 0;
    right: 0;
    opacity: 0.7;
    animation: blob 10s infinite alternate;
}

.gradient .gradient__blob:nth-child(2) {
     background: #FFD64D;
     left: 0;
  	 right: 0;
     animation-delay: 1s;
     margin: auto;
  	 opacity: 0.5;
 }

.gradient .gradient__blob:last-child {
     background: #FF8E27;
     left: 0;
  	 right: unset;
     animation-delay: 2s;
  	 opacity: 0.7;
}

@keyframes blob {
  	0% {
    	transform: translate(0, 0);
  	}
  	33% {
    	transform: translate(-15%, -25%);
  	}
  	66% {
    	transform: translate(10%, 20%);
  	}
  	100% {
    	transform: translate(0, 0);
  	}
}

/* -------------------------------------------------------------------------- */
/* -------------------- HEADER                 ------------------------------ */
/* -------------------------------------------------------------------------- */
header .row {
    padding: 7px 0;
}

.head_logo img {
	width: 180px
}

header .col-md-12 {
    display: flex;
    align-items: center;
    justify-content: space-between;
  	position: relative
}

.head_logo {
	width: 260px;
  	display: flex;
  	gap: 12px;
  	
}

.head_btn {
  	display: flex;
  	gap: 12px;
  	justify-content: end;
}

.head_social {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-right: 10px;
}

.head_social a {
    display: block;
    width: 45px;
    height: 45px;
    background: #fff3e5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border: 1px solid #ffd3a0;
    transition: all .3s ease;
}

.head_social a:hover {
    background: #ffd3a0;
}

.btn_menu {
	width: 124px;
}

.btn_menu a {
  	display: flex;
  	border: 1.5px solid #000000;
  	padding: 9px 10px;
  	border-radius: 6px;
  	font-weight: 600;
    align-items: center;
    justify-content: center;
    gap: 10px;
  	transition: all .3s ease;
}

.btn_menu a i {
  	width: 22px;
    height: 22px;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FF8E27;
    border-radius: 5px;
    font-size: 11px;
  	line-height: normal;
  	transition: all .3s ease;
}

.btn_menu2 a {
  	color: #fff;
  	background: #FF8E27;
  	border: 1.5px solid transparent;
}

.btn_menu a:hover {
  	background: #000000;
  	color: #fff
}

.btn_menu2 a:hover {
  	background: #D16400;
}

.btn_menu2 a:hover i {
  	transform: translateX(5px);
}

.menu-wrapper {
  	margin-right: 0;
}

#wtHead #mega-menu-wrap-primary #mega-menu-primary {
    text-align: left;
    padding: 0px;
  	display: flex;
    gap: 20px;
}

#wtHead #mega-menu-wrap-primary li a {
	font-weight: 500 !important
}

#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu {
	width: 200px;
    left: -10px;
}

#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link {
  	background: #fff;
  	padding: 0 20px 
}

header.sticky {
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 1001;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 15px 1px rgb(0 0 0 / 7%);
    transform: translateY(-100%);
    animation: slideDown 0.4s ease forwards;
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}

.head_menu {
    display: none;
}

.menumou {
    background: #ffd3a0;
}

.menumou .row {
    justify-content: center;
    padding: 5px 0 !important;
}

.counter .elementor-counter-number {
    font-size: 110px;
    font-weight: 700;
    letter-spacing: 2px;
}

/* -------------------------------------------------------------------------- */
/* -------------------- HOME                   ------------------------------ */
/* -------------------------------------------------------------------------- */
.big_title span {
    color: #FF8E27;
}

.big_title2 div {
    font-size: 65px;
    font-weight: 700;
    line-height: 1.2;
}

.title_content {
    width: 60%;
    margin: auto;
}

.menu_links {
	display: flex;
    align-items: center;
    gap: 25px;
}

.menu_links a {
	transition: all .3s ease;
  	display: block;
  	position: relative;
  	border-radius: 25px
}

.menu_links a:hover {
	transform: scale(1.05);
  	filter: drop-shadow(0 0 5px #FF8E27)
}

.banner {
    padding-top: 50px;
    padding-bottom: 10px;
}

.banner_swiper .swiper-pagination {
    position: absolute;
    margin-bottom: 5px;
}


/* -------------------------------------------------------------------------- */
/* -------------------- PROMOTION              ------------------------------ */
/* -------------------------------------------------------------------------- */
.sec_title div {
	font-weight: 700;
  	font-size: 40px;
  	margin-bottom: 25px
}

.swiper-pagination {
 	margin-top: 20px;
  	position: relative
}

.swiper {
  	padding-bottom: 0 !important;
}

.swiper img {
	border: 2px solid transparent;
}

.swiper img:hover {
	border: 2px solid #FF8E27
}

/* -------------------------------------------------------------------------- */
/* -------------------- GAMES                  ------------------------------ */
/* -------------------------------------------------------------------------- */
.game_box, .game_img {
  	position: relative;
  	border-radius: 20px
}

.game_box .fire {
  	position: absolute;
  	width: 70px !important;
  	top: -35px;
  	left: 0;
  	z-index: 10
}

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

.game_carousel .owl-stage {
	padding: 20px 0;
}

.game_box .name {
	text-align: center;
  	font-size: 16px;
  	padding-top: 10px
}

.game_img div {
	position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
  	width: 100%;
  	height: 100%;
  	display: flex;
  	align-items: center;
  	justify-content: center;
  	border-radius: 25px;
  	background: rgba(0,0,0,0.6);
    opacity: 0;
  	transition: all .3s ease
}

.game_img div img {
	border-radius: 25px;
}

.game_img:hover div {
	opacity: 1;
}

.game_img div a {
	width: 100%;
  	margin: auto;
  	font-size: 14px;
  	gap: 5px !important
}

.owl-dots {
	margin-top: 0 !important
}

.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
	background: #FF8E27;
}

.owl-theme .owl-dots .owl-dot span {
	background: #cccccc;
}

/* -------------------------------------------------------------------------- */
/* -------------------- HOW JOIN               ------------------------------ */
/* -------------------------------------------------------------------------- */
.howFlex {
	display: flex;
  	align-items: center;
	gap: 25px;
	justify-content: center;
	flex-wrap: wrap;
}

.howFlexBox {
    width: calc((100% - (25px * 3)) / 4);
}

.howBox {
	display: block;
 	position: relative;
  	transition: all .3s ease;
}

.howBox .icon {
	transition: all .3s ease;
	width: 100%;
}

.howBox:hover .icon {
	filter: drop-shadow(0 0 10px #FF8E27);
	transform: scale(1.025);
}

.howBox .howTitle {
	margin: 5px 0;
  	font-weight: 700;
  	color: #20409B;
  	font-size: 34px
}

.howBox p {
	margin-bottom: 0
}

.howContent {
	padding: 25px;
  	position: absolute;
  	bottom: 0;
  	left: 0;
  	width: 100%
}

.howStep {
  	font-weight: 600;
  	font-size: 18px
}

/* -------------------------------------------------------------------------- */
/* -------------------- BLOG POST              ------------------------------ */
/* -------------------------------------------------------------------------- */
.blog_post .elementor-post__text {
	display: flex !important
}

.blog_post .elementor-posts .elementor-post__meta-data {
	order: 1;
  	color: #000 !important;
  	font-family: "Montserrat", sans-serif !important;
     margin-bottom: 10px;
}

.blog_post .elementor-posts .elementor-post__title {
	order: 2;
  	margin-bottom: 10px
}

.blog_post .elementor-posts .elementor-post__excerpt {
	order: 3;
}

.blog_post .elementor-posts .elementor-post__title a {
	color: #000 !important;
  	font-size: 24px;
  	-webkit-line-clamp: 2;
    line-clamp: 2; 
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
}

.blog_post .elementor-posts .elementor-post__excerpt p {
	-webkit-line-clamp: 2;
    line-clamp: 2; 
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
  	color: #000 !important;
}

.blog_post .elementor-posts .elementor-post__thumbnail {
	border-radius: 35px
}

.blog_post .elementor-post__thumbnail__link, .blog_post .elementor-post__thumbnail__link img {
	overflow: hidden;
  	transition: all .3s ease
}

.blog_post .elementor-post__thumbnail__link:hover img {
	transform: scale(1.1)
}

.view_more {
	padding-top: 20px;
}

.view_more a {
	border: 1.5px solid #000000;
    padding: 15px 25px;
    border-radius: 6px;
  	background: transparent !important;
  	display: block;
  	color: #000;
  	transition: all .3s ease;
  	width: fit-content !important;
    margin: auto;
}

.view_more a:hover {
	background: #000 !important;
  	color: #fff
}

.single_post img {
	width: 100%;
  	border-radius: 20px
}

.post_content {
	width: 85%;
  	margin: auto
}

.single_post header {
	text-align: center;
  	width: 85%;
  	margin: auto;
  	margin-bottom: 20px;
  	padding: 0
}

.single_post header h1 {
	font-size: 50px !important;
  	font-weight: 700;
  	margin-bottom: 15px;
  	padding-top: 0 !important
}

.single_post h1, .single_post h2 {
	color: #000 !important;
  	font-size: 30px !important;
  	font-weight: 700
}

.single_post h1, .single_post h2, .single_post h3 {
	padding-top: 10px
}

.single_post h2 {
	color: #000 !important;
  	font-size: 24px !important;
  	font-weight: 600
}

.single_post h3 {
	color: #626262 !important;
  	font-size: 18px !important;
  	font-weight: 600
}

/* -------------------------------------------------------------------------- */
/* -------------------- SEO CONTENT            ------------------------------ */
/* -------------------------------------------------------------------------- */
.seo_content {
	background: #fff;
  	border-radius: 25px;
  	padding: 30px 40px;
  	font-family: "Montserrat", sans-serif !important;
}

.seo_content h1, .seo_content h2 {
	font-size: 24px;
  	padding-top: 10px;
  	color: #ff8e27;
}

.seo_content h3 {
	font-size: 18px;
  	color: #20409b;
}

.seo_content a {
	color: #FF8E27;
  	font-weight: 600;
    word-break: break-all;
}

/* -------------------------------------------------------------------------- */
/* -------------------- DOWNLOAD               ------------------------------ */
/* -------------------------------------------------------------------------- */
.sec_app .sec_title div {
	font-size: 60px;
}

.app_content p {
	width: 90%;
}

.app_download {
	padding: 20px 0;
    display: flex;
    align-items: center;
    gap: 20px;
}

.app_download a {
	display: flex;
    border: 1.5px solid #000000;
    padding: 10px 15px;
    border-radius: 6px;
    font-weight: 600;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all .3s ease;
  	width: 130px;
 	background: #000;
  	color: #fff
}

.app_download a:hover {
	transform: scale(1.05)
}

.app_download a img {
	height: 20px
}

.app_mobile {
	position: relative;
  	text-align: center;
  	overflow: hidden
}

.app_circle {
	position: absolute;
  	left: 0;
  	right: 0;
  	margin: auto;
  	bottom: 0;
  	height: 100% !important;
  	z-index: -1;
    animation: scaleOpacity 1.5s infinite alternate;
}

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

.app_download .android {
	background: #68C10E;
  	color: #fff;
  	border: 1.5px solid #68C10E;
}

.app_phone {
	width: 420px;
  	margin: auto;
  	animation: phone 1.5s infinite alternate;
}

@keyframes phone {
  	0% {
      	transform: translateY(0) rotate(0);
  	}
  	100% {
      	transform: translateY(15px) rotate(-3deg);
  	}
}

/* -------------------------------------------------------------------------- */
/* -------------------- FOOTER                 ------------------------------ */
/* -------------------------------------------------------------------------- */
footer {
	background: #20409B;
  	color: #fff;
  	font-size: 14px;
  	font-weight: 500
}

footer .footer_logo {
	width: 150px;
  	margin-bottom: 30px
}

.footer_content .divh2 , .footer .divh4 {
	font-size: 16px;
  	font-weight: 700;
  	margin-bottom: 15px
}

.footer_contentBox {
	display: flex;
  	gap: 50px;
  	flex-wrap: nowrap
}

.footer_content {
	width: 70%
}

.footer_img {
	width: 30%;
  	display: flex;
  	flex-direction: column;
  	gap: 30px
}

.footer_img img {
	height: 45px
}

.footer_payment {
	display: flex;
  	flex-wrap: wrap;
  	gap: 12px
}

.copyright_message {
	padding-top: 20px
}

/* -------------------------------------------------------------------------- */
/* -------------------- MEDIA                  ------------------------------ */
/* -------------------------------------------------------------------------- */
@media only screen and (max-width: 1400px) {
	.container {
  		width: 100%;
      	max-width: 100%;
      	padding: 0 30px
  	}
}

@media only screen and (max-width: 1200px) {
  	.container {
  		width: 100%;
      	max-width: 100%;
      	padding: 0 25px
  	}
  
   .space {
     	padding-top: 30px;
      	padding-bottom: 30px;
   }
  
   .footer_img img {
      	height: 40px;
   }
  
   .big_title2 h2 {
    	font-size: 55px;
   }
  
  	header {
    	padding: 0;
	}
  
  	header.sticky {
		padding: 0;
	}

    .title_content {
        width: 80%;
    }
  
  	.menu_links a {
  		min-width: 160px
  	}
  
  	.menu_links::-webkit-scrollbar, .howFlex::-webkit-scrollbar  {
      	display: none
	}
  
  	.sec_title div, .sec_app .sec_title div {
    	font-size: 38px;
  	}
  
  	.gradient .gradient__blob {
    	width: 450px;
   	 	height: 300px;
  	}
  	
  	.app_phone {
    	width: 400px;
  	}
  	
  	header .head_btn {
  		padding-right: 40px;
  	}
  
  	.head_btn {
      	width: 300px
  	}
  
  	.menu-wrapper_before {
  		position: absolute;
      	right: 8px
  	}
  
  	.menuspace {
  		padding-top: 0 !important;
      	padding-bottom: 0 !important;
  	}
	
  	.menu-wrapper.active, .menu_overlay.active, .menu-wrapper {
  		height: 100vh
  	}
  
  	header.sticky {
  		animation: unset;
      	transform: unset
  	}
  
  	#wtHead #mega-menu-wrap-primary #mega-menu-primary {
  		flex-direction: column;
        align-items: center;
        gap: 10px;
  	}
  
    #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link {
      	background: #ee7c00;
      	padding: 5px 20px;
      	color: white;
      	text-align: center
  	}
  
  	#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item.mega-toggle-on > ul.mega-sub-menu {
        left: -33px;
  	}
  
  	.menu_logo img {
  		width: 220px
  	}
  
  	.menu-wrapper-inner, #wtHead #mega-menu-wrap-primary li a {
  		text-align: center !important
  	}
  
  	#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item:first-child a.mega-menu-link {
  		border-radius: 10px 10px 0 0
  	}
  
  	#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item:last-child a.mega-menu-link {
  		border-radius: 0 0 10px 10px
  	}
  
    .post_content, .single_post header {
      	width: 90%;
  	}

    .single_post header h1 {
        font-size: 45px !important;
    }

    .single_post h1, .single_post h2 {
        font-size: 28px !important;
    }

    .single_post h2 {
        font-size: 22px !important;
    }
    
    .menumou {
        display: none;
    }
    
    .head_menu {
        display: block;
    }
    
    .head_social {
        display: none;
    }
    
    .banner {
        padding-top: 30px;
        padding-bottom: 10px;
    }
    
    .counter .elementor-counter-number {
        font-size: 95px;
    }
}

@media only screen and (max-width: 991px) {
  	.container {
  		width: 100%;
      	max-width: 100%;
      	padding: 0 20px
  	}
  
  	.sec_title div, .sec_app .sec_title div {
    	font-size: 34px;
        margin-bottom: 20px;
  	}
  
  	.head_logo img {
  		margin-left: -15px
  	}
  
    .howFlexBox {
        width: calc((100% - (25px * 2)) / 3);
    }
  
  	.howBox h3 {
  		font-size: 30px
  	}
  
  	.seo_content {
    	padding: 25px 30px;
  	}
  
  	.big_title2 h2 {
        font-size: 5.7vw;
    }
  
    .title_content, .app_content p {
        width: 95%;
    }
  
  	.gradient .gradient__blob {
        width: 300px;
        height: 35%;
    }
  
  	.app_phone {
        width: 350px;
    }
  
  	.blog_post article:nth-child(5), .blog_post article:nth-child(6) {
  		display: none
  	}
  	
  	.post_content, .single_post header {
      	width: 95%;
  	}
  
  	.single_post header h1 {
        font-size: 38px !important;
    }

    .single_post h1, .single_post h2 {
        font-size: 26px !important;
    }

    .single_post h2 {
        font-size: 20px !important;
    }
    
    .counter .elementor-counter-number {
        font-size: 85px;
    }
    
    .app_download {
        padding: 10px 0;
    }
}

@media only screen and (max-width: 767px) {
	.footer_contentBox {
  		flex-direction: column;
      	gap: 15px
  	}
  	
  	.footer_img, .footer_content {
  		width: 100%
  	}
  
  	.copyright_message {
  		padding-top: 40px
  	}
  
    footer .footer_logo {
      	width: 140px;
      	margin-bottom: 25px;
  	}
  
  	.elementor-posts-container.elementor-has-item-ratio .elementor-post__thumbnail img {
  		transform: unset;
        left: 0;
        top: 0;
      	position: relative
  	}
  
  	.blog_post .elementor-posts .elementor-post__thumbnail {
  		padding-bottom: 0 !important
  	}
  
  	.big_title2 h2 br {
  		display: none
  	}
  
  	.big_title2 h2 {
        font-size: 6.1vw;
    }
  
  	.gradient .gradient__blob {
        width: 250px;
        height: 25%;
    }
  
 	.post_content, .single_post header {
      	width: 100%;
  	}

    .single_post h2 {
        font-size: 20px !important;
    }
    
    .app_download {
        justify-content: center;
    }
    
    .sec_app .sec_title, .sec_app p {
        text-align: center !important;
    }
    
    .m_appimg img {
        width: 80%;
        margin: auto;
    }
}

@media only screen and (max-width: 576px) {
	footer {
  		text-align: center
  	}
  
  	.footer_payment {
    	justify-content: center;
  	}
  
    .app_phone {
        width: 300px;
    }
  
  	.title_content, .app_content p {
        width: 100%;
    }
  
  	.app_download button {
  		flex: 1
  	}
  
  	.app_download button a {
  		width: 100%
  	}
  
    .seo_content {
        padding: 20px 25px;
       	border-radius: 20px
    }
  
    .seo_content h1, .seo_content h2 {
      	font-size: 22px;
  	}
  
  	.seo_content h3 {
    	font-size: 16px;
  	}
  
  	body, .seo_content p {
  		font-size: 15px
  	}
  
  	.app_download {
        width: 80%;
        margin: auto;
  	}
  
  	.blog_post .elementor-posts .elementor-post__title a {
    	font-size: 20px;
  	}
  
  	.ctaButton {
        width: 80%;
        margin: auto;
  	}
  	
  	.head_btn {
        width: 100%;
    }
  
  	header .head_btn {
        width: 300px;
    }
  
  	.big_title2 h2 {
        font-size: 6vw;
    }
  
  	.single_post header h1 {
        font-size: 28px !important;
    }

    .single_post h1, .single_post h2 {
        font-size: 22px !important;
    }
    
    .howFlex {
        gap: 20px;
    }
    
    .howFlexBox {
        width: calc((100% - (20px * 1)) / 2);
    }
    
    .btn_menu {
        width: 100%;
    }
    
    .counter .elementor-counter-number {
        font-size: 15vw;
    }
    
    .m_appimg img {
        width: 90%;
        margin: auto;
    }
}

@media only screen and (max-width: 500px) {
	.app_download, .ctaButton {
        width: 100%;
  	}
  
    header .head_btn {
        width: 100%;
      	padding-right: 0
    }
  
    header .col-md-12 {
      	flex-direction: column;
      	gap: 5px
  	}
  
  	.head_logo img {
        margin-left: 0;
        width: 160px;
    }
  
  	.head_logo {
  		justify-content: center
  	}
  
  	.menu-wrapper_before {
        top: 5px;
    }
  
  	.big_title2 h2 {
        font-size: 8.5vw;
    }
  
  	.game_box h4 {
    	font-size: 15px;
  	}
  	
  	.m_appimg img {
        width: 100%;
        margin: auto;
    }
}

@media only screen and (max-width: 360px) {
	.seo_content {
        padding: 15px 20px;
    }
  
  	.app_download {
  		gap: 15px
  	}
  
    .sec_title div, .sec_app .sec_title div {
        font-size: 30px;
  	}
  
  	.space {
     	padding-top: 20px;
      	padding-bottom: 20px;
   	}
  
  	.howFlexBox {
        width: 100%;
    }
  
    .menu_links a {
        min-width: 150px;
    }
  
  	.game_box h4 {
    	font-size: 14px;
  	}
  
  	.single_post header h1 {
        font-size: 24px !important;
    }
}

@media only screen and (max-height: 700px) {
	#wtHead #mega-menu-wrap-primary #mega-menu-primary {
  		overflow-y: auto;
      	max-height: 300px
  	}
}