/*
Theme Name: Lucky
Theme URI: 
Author: 
Author URI: 
Description: 
Text Domain: 

*/


.paddingl-none { padding-left: 0px;}
.paddingr-none { padding-right: 0px;}

.sep-10 {
	display:block;
	clear:both;
	width:100%;
	height:10px;
}
.sep-20 {
	display:block;
	clear:both;
	width:100%;
	height:20px;
}
.sep-30 {
	display:block;
	clear:both;
	width:100%;
	height:30px;
}
.sep-40 {
	display:block;
	clear:both;
	width:100%;
	height:40px;
}
.sep-50 {
	display:block;
	clear:both;
	width:100%;
	height:50px;
}
.smooth { opacity: 0; position: relative; top: 50px; }
.fadein { opacity: 0; }



@charset "utf-8";

/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
/******* Fonts Face CSS Start **********/
@font-face {
    font-family: 'Bebas Kai';
    src: url('fonts/BebasKai.eot');
    src: url('fonts/BebasKai%EF%B9%96.eot#iefix') format('embedded-opentype'),
        url('fonts/BebasKai.woff2') format('woff2'),
        url('fonts/BebasKai.woff') format('woff'),
        url('fonts/BebasKai.ttf') format('truetype'),
        url('fonts/BebasKai.svg#BebasKai') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
/********* Fonts Face CSS End **********/

/******* Common Element CSS Start ******/
:root{
	--primary-color: #eed56f;
	--secondary-color: #000;
}

*							{ margin: 0px; padding: 0px;}
body						{ font-family: 'Poppins', sans-serif; background: var(--secondary-color); font-weight: 400; font-size: 18px; line-height: 30px; color: #fff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-y: auto; overflow-x: hidden !important; width: 100vw; }
img							{ border: 0px; max-width: 100%;}
ul,ol						{ list-style: none;}
a							{ text-decoration: none; outline: none; color: inherit; display: inline-block; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; }
a:hover,
a:focus, a:active,a:visited,button:focus	{ outline: none; text-decoration: none;}
a:hover,
a:focus                     { color: var(--primary-color);}
h1,h2,h3			        { font-family: 'Bebas Kai'; }
h1,h2                       { text-transform: uppercase; }
h1							{ margin-bottom: 22px; font-size: 80px; line-height: 64px; }
h1 span                     { color: var(--primary-color); }
h2							{ margin-bottom: 28px; font-size: 82px; line-height: 64px; }
h3							{ margin: 0 0 20px; font-size: 60px; line-height: 50px; color: var(--primary-color); }
h4							{ margin: 0 0 24px; font-size: 30px; line-height: 40px; font-weight: 600; }
h5							{ margin: 0 0 6px; font-size: 22px; line-height: 28px; font-weight: 600; }
p                           { margin-bottom: 24px;}
b                           { font-weight: 700; }
.large-link                 { word-break: break-all; }
.animated                   { -webkit-animation-duration: 1.36s; animation-duration: 1.36s; }
/* Button Style */
.theme-btn 					{ padding: 12px 20px; min-width: 167px; background: transparent; border: 2px dotted #fff; font-size: 24px; line-height: 20px; color: #fff; font-family: 'Bebas Kai'; text-transform: uppercase; display: inline-block; cursor: pointer; transition-duration: 0.3s; -webkit-transition-duration: 0.3s; text-align: center; border-radius: 6px; }
.theme-btn:hover,
.theme-btn:focus 			{ border-color: var(--primary-color); color: var(--primary-color); }

/* Title Style */
.back-title                 { margin: 0; background: -webkit-linear-gradient(rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 20%, rgba(255, 255, 255, 0) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
h2.back-title               { font-size: 230px; line-height: 170px; }
.back-title ~ h2            { margin-top: -104px; }

/******* Common Element CSS End *********/

/******* Header Section CSS Start *******/
header                      { margin: 0px 0px; position: fixed; width: calc(100%); top: 0; left: 0; z-index: 5; }
Xheader::after, 
Xheader::before              { content: ""; width: 80px; height: calc(100%); position: absolute; border-bottom: 2px solid #fff; background: var(--secondary-color); top: 0; z-index: -1; } 
Xheader::before              { left: 0; transform: translateX(-40%) skewX(45deg); -webkit-transform: translateX(-40%) skewX(45deg); border-left: 3px solid #fff; }
Xheader::after               { right: 0; transform: translateX(40%) skewX(-45deg); -webkit-transform: translateX(40%) skewX(-45deg); border-right: 3px solid #fff; }
.navbar 				    { padding: 12px 0; background-color: var(--secondary-color); border-bottom: 2px solid #fff; transition: all linear 0.5s; -moz-transition: all linear 0.5s; -webkit-transition: all linear 0.5s; }
/* .navbar.navbar-shadow 		{ background-color:rgba(2, 29, 48, 0.95); } */
.navbar .logo-item              { width: 44px; margin-right: 30px; }
.navbar .navbar-nav .nav-link   { margin: 0 32px; padding: 0; font-size: 20px; line-height: 24px; font-family: 'Bebas Kai'; color: #fff; text-transform: uppercase; }
.navbar .navbar-nav .active .nav-link,
.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav li a.mPS2id-highlight,
.mobile-menu a.mPS2id-highlight   { color: var(--primary-color); }
.navbar .navbar-nav li:last-child a.mPS2id-highlight { color: var(--primary-color);}
.navbar .navbar-nav .theme-btn { margin-left: 30px;} 
.navbar .header-social-nav a    { margin: 4px 4px 0px 4px; font-size: 22px; line-height: 24px; }
.navbar .header-social-nav :last-child a { margin-right: 0; }
/******* Header Section CSS End *********/

/******* Banner section CSS Start *******/
.banner 					{ padding: 80px 0 180px; min-height: calc(100vh + 100px); position: relative; z-index: 1; color: #fff;}
.banner:after,
.banner:before				{ content: ""; width: 100%; height: 100%; display: block; position: absolute; top: 0; left: 0; }
.banner:before	            { background: var(--secondary-color); opacity: 0.4; z-index: 0; }
.banner:after	            { z-index: 1;
background: -moz-linear-gradient(top,  rgba(0,0,0,0) 38%, rgba(0,0,0,1) 100%);
background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 38%,rgba(0,0,0,1) 100%);
background: linear-gradient(to bottom,  rgba(0,0,0,0) 38%,rgba(0,0,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 );
}
.banner .banner-inner       { position: relative; z-index: 2; font-weight: 500; }
.banner .banner-logo        { margin: 0 auto 18vh; width: 240px; height: 240px; background: rgba(0,0,0,0.4); border: 3px solid #fff; border-radius: 50%; }
.banner .banner-logo img    { max-width: 80%; }
.banner .banner-list li     { margin: 0px 12px;}
.banner .banner-list li img { height: 32px; width: auto; }
/******* Banner section CSS End *********/

/******* Middle section CSS Start ******/
.common-bg                      { background: no-repeat center center / cover; }
.row.row-10                     { margin-right: -10px; margin-left: -10px;}
.row.row-10 [class*="col-"]     { padding-right: 10px; padding-left: 10px;}
.common-title                   { text-align: center; }
section                         { overflow: hidden; }
/******* Home *******/
/* Taste Of Peace Section */
.taste-of-peace                  { margin-top: -100px; margin-bottom: -24px; padding: 0px; position: relative; z-index: 2; width: 100vw; overflow: hidden; }
.taste-of-peace .desc-block      { padding-right: 5.6%; }

/* Game Development Section */
.game-dev-section                   { padding: 190px 0px 200px; position: relative; background-position: bottom center; width: 100vw; overflow: hidden; }
.game-dev-section:after,
.game-dev-section:before	        { content: ""; width: 100%; height: 100%; display: block; position: absolute; top: 0; left: 0; }
.game-dev-section:before	        { background: var(--secondary-color); opacity: 0.4; z-index: 0; }
.game-dev-section:after	            { z-index: 1;
    background: -moz-linear-gradient(top,  rgba(0,0,0,1) 0%, rgba(0,0,0,0) 50%);
    background: -webkit-linear-gradient(top,  rgba(0,0,0,1) 0%,rgba(0,0,0,0) 50%);
    background: linear-gradient(to bottom,  rgba(0,0,0,1) 0%,rgba(0,0,0,0) 50%);
}
.game-dev-section > *               { position: relative; z-index: 2; }
.game-dev-list                      { margin: 54px 0px 32px; }
.game-dev-list .item                { transform: skewX(-16deg); -webkit-transform: skewX(-16deg); border: 2px solid #fff; overflow: hidden; }            
.game-dev-list .item-img            { transform: skewX(16deg) scale(1.26); -webkit-transform: skewX(16deg) scale(1.26); padding-bottom: 90%; }

/* Tokenomics Section */
.tokenomics-section                 { padding: 90px 0px 40px; font-size: 17px; width: 100vw; overflow: hidden; }
.tokenomics-section .common-title   { margin-bottom: 90px; }
.tokenomics-section h4              { font-family: 'Bebas Kai'; }
.tokenomics-section h5              { margin-bottom: 16px; }
.tokenomics-section .gray-block     { margin: 20px 0 20px 8%; padding: 24px 24px; background: #151515; border-radius: 10px; }
.tokenomics-section .gray-block p   { margin-bottom: 20px; }
.tokenomics-section .title          { margin-bottom: 20px; }
.tokenomics-section .title img      { margin-right: 16px; width: 60px; }
.tokenomics-section .title p        { margin-bottom: 4px; }
.tokenomics-section .more-list a    { margin-right: 36px; }
.tokenomics-section .more-list a:last-child    { margin-right: 0px; }
.tokenomics-section .more-list img  { max-height: 90px; }
.shadow-title-list                  { margin-top: 70px; overflow: hidden; }
.shadow-title-list .title           { margin-top: 70px; width: 50%; text-align: center; }
.shadow-title-list .back-title      { transform: scale(1.4); -webkit-transform: scale(1.4); margin-bottom: -24px;}
.shadow-title-list h3               { margin: 0; }
.shadow-title-list .title:nth-child(even) { margin-left: auto;}

/* Road Map Section */
.road-map-section                   { padding: 220px 0px 220px; background-position: bottom center; position: relative; width: 100vw; overflow: hidden; }
.road-map-section:after,
.road-map-section:before	        { content: ""; width: 100%; height: 100%; display: block; position: absolute; top: 0; left: 0; }
.road-map-section:before	        { background: var(--secondary-color); opacity: 0.4; z-index: 0; }
.road-map-section:after	            { z-index: 1;
    background: -moz-linear-gradient(top,  rgba(0,0,0,1) 0%, rgba(0,0,0,0) 50%);
    background: -webkit-linear-gradient(top,  rgba(0,0,0,1) 0%,rgba(0,0,0,0) 50%);
    background: linear-gradient(to bottom,  rgba(0,0,0,1) 0%,rgba(0,0,0,0) 50%);
}
.road-map-section > *               { position: relative; z-index: 2; }
.road-map-list                      { margin-top: 32px; }
.road-map-list h5                   { margin-bottom: 32px; font-size: 26px; line-height: 34px; }
.road-map-list .item                { margin: 0 2px 24px; min-height: calc(100% - 24px); padding: 32px 16px; background: rgba(0, 0, 0, 0.5); border: 2px dashed #fff; border-radius: 10px; }
.road-map-list .item ul li          { margin-bottom: 15px; font-size: 15px; font-weight: 500; }

/* Whitepaper Section */
.whitepaper-section 					{ padding: 120px 0px 40px; }
.whitepaper-section .whitepaper-img     { margin: 32px auto 0; width: 300px; max-width: 70%; }
.whitepaper-section .whitepaper-img img { width: 100%; }
.whitepaper-section p                   { font-size: 15px; line-height: 24px; font-weight: 500; }

/* Mini Game Section */
.mini-game-section                  { padding: 220px 0px 180px; background-position: bottom center; position: relative; }
.mini-game-section:after,
.mini-game-section:before	        { content: ""; width: 100%; height: 100%; display: block; position: absolute; top: 0; left: 0; }
.mini-game-section:before	        { background: var(--secondary-color); opacity: 0.4; z-index: 0; }
.mini-game-section:after	        { z-index: 1;
    background: -moz-linear-gradient(top,  rgba(0,0,0,1) 0%, rgba(0,0,0,0) 50%);
    background: -webkit-linear-gradient(top,  rgba(0,0,0,1) 0%,rgba(0,0,0,0) 50%);
    background: linear-gradient(to bottom,  rgba(0,0,0,1) 0%,rgba(0,0,0,0) 50%);
}
.mini-game-section > *              { position: relative; z-index: 2; }
.mini-game-list                     { margin-top: 48px; }
.mini-game-list .item               { margin-bottom: 24px; }
.mini-game-list .item-img           { margin-bottom: 32px; padding-bottom: 105%; border: 2px solid #fff; border-radius: 10px; }
.mini-game-list .item .play-link    { font-size: 13px; }

/* About Section */
.about-section 					    { padding: 120px 0px; position: relative; }
.about-section:before				{ content: ""; width: 100%; height: 100%; display: block; position: absolute; top: 0; left: 0; background: var(--secondary-color); opacity: 0.5; z-index: 0; }
.about-section .about-img           { margin: 32px auto; width: 300px; height: 300px; border: 2px solid #fff; }
.about-section p                    { font-size: 15px; line-height: 24px; font-weight: 500; }

/* Charity Section */
.charity-section                    { padding: 120px 0px 90px; background-color: var(--secondary-color); overflow: hidden; }
.charity-section p                  { font-size: 16px; line-height: 24px; }
.charity-img-list                   { margin-top: 48px; }
.charity-img-list .item             { padding-bottom: 80%; border-radius: 8px; }
/******** Middle section CSS End *******/ 

/******** Footer Section CSS Start *******/ 
footer                  { padding: 80px 0px 60px; background-color: #212121; border-top: 14px solid var(--primary-color);}
footer p                { margin-bottom: 8px; font-size: 16px; line-height: 24px; }
footer p:last-child     { margin-bottom: 0px; }
/******** footer section CSS End *******/ 

/****** Responsive CSS Start *******/
@media(min-width: 1500px) and (max-width: 1599px){

/******* Header Section CSS Start *******/
    .navbar .logo-item              { margin-right: 24px; }
    .navbar .navbar-nav .nav-link   { margin: 0 24px;}
}

@media(min-width: 1200px) and (max-width: 1499px){
    h2                          { font-size: 72px; line-height: 54px; }
/* Title Style */
    h2.back-title               { font-size: 200px; line-height: 150px; }
    .back-title ~ h2            { margin-top: -84px; }
/******* Header Section CSS Start *******/
    .navbar .logo-item              { margin-right: 15px; }
    .navbar .navbar-nav .nav-link   { margin: 0 15px; font-size: 18px; line-height: 22px; }
    .navbar .header-social-nav a    { font-size: 19px; line-height: 22px; }
}

@media(min-width: 1360px) and (max-width: 1499px){ 
    .navbar .navbar-nav .nav-link   { margin: 0 22px; font-size: 19px; line-height: 22px; }
}


@media(min-width: 992px) and (max-width: 1199px){
    body                        { font-size: 16px; line-height: 28px; }
    h1                          { font-size: 68px; line-height: 54px; }
    h2                          { font-size: 68px; line-height: 54px; }
    h3                          { margin: 0 0 18px; font-size: 54px; line-height: 44px; }
    h4                          { margin: 0 0 18px; font-size: 27px; line-height: 37px; }
    h5                          { font-size: 20px; line-height: 26px; }
    p                           { margin-bottom: 22px; }
/* Title Style */
    h2.back-title               { font-size: 172px; line-height: 120px; }
    .back-title ~ h2            { margin-top: -74px; }
/******* Header Section CSS *******/
    header                          { margin: 0px 70px; width: calc(100% - 140px); }
    header::after, 
    header::before                  { width: 70px; } 
    header::before                  { transform: translateX(-40%) skewX(45deg); -webkit-transform: translateX(-40%) skewX(45deg); border-left: 3px solid #fff; }
    header::after                   { transform: translateX(40%) skewX(-45deg); -webkit-transform: translateX(40%) skewX(-45deg); border-right: 3px solid #fff; }
    .navbar .logo-item              { width: 40px; margin-right: 10px; }
    .navbar .navbar-nav .nav-link   { margin: 0 10px; font-size: 17px; line-height: 20px; }
    .navbar .header-social-nav a    { margin: 4px 3px 0px 3px; font-size: 17px; line-height: 20px; }
/******* Banner section CSS *******/
    .banner                         { padding: 80px 0 160px; }
    .banner .banner-logo            { width: 200px; height: 200px;}
/* Taste Of Peace Section */
    .taste-of-peace { margin-top: -80px; }
/* Game Development Section */
    .game-dev-section               { padding: 160px 0px 170px; }
    .game-dev-list                  { margin: 34px 0px 32px; padding: 0px 25px; }
/* Tokenomics Section */
    .tokenomics-section             { padding: 80px 0px 40px; font-size: 15px; }
    .tokenomics-section .common-title { margin-bottom: 60px; }
    .tokenomics-section .gray-block { margin: 16px 0 16px 8%; padding: 20px 20px; }
    .tokenomics-section .more-list img { max-height: 70px; }
    .shadow-title-list              { margin-top: 50px; }
    .shadow-title-list .title       { margin-top: 50px;}
/* Road Map Section */
    .road-map-section               { padding: 170px 0px;}
    .road-map-list h5               { margin-bottom: 28px; font-size: 24px; line-height: 32px; }
    .road-map-list .item ul li      { margin-bottom: 12px; line-height: 24px; }
/* Whitepaper Section */
    .whitepaper-section 			{ padding: 100px 0px 40px; }
    .whitepaper-section .whitepaper-img { margin: 24px auto 0; width: 260px; }
/* Mini Game Section */
    .mini-game-section              { padding: 160px 0px 130px; }
    .mini-game-list                 { margin-top: 36px; }
/* About Section */
    .about-section                  { padding: 90px 0px; }
    .about-section .about-img       { width: 270px; height: 270px; }
/* Charity Section */
    .charity-section                { padding: 100px 0px 80px; }
    .charity-img-list               { margin-top: 36px; }
/******** Footer Section CSS Start *******/ 
    footer                          { padding: 50px 0px 40px; border-top-width: 12px;}
    footer p                        { font-size: 15px; line-height: 22px; }
}

@media(max-width: 991px){
/* Header */
    header                      { margin: 0px; width: 100%; }
    header::after, 
    header::before              { display: none; }
    .navbar                     { padding: 10px 10%; }
    .navbar-header              { width: 100%; text-align: center; }
    .navbar-toggler-btn         { padding: 0; font-size: 20px; line-height: 20px; color: #fff; background: transparent;  font-family: 'Bebas Kai'; border: none; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; }
    .navbar-toggler-btn:hover   { color: var(--primary-color);}
    .navbar-toggler             { padding: 0; border-radius: 0; display: block; }
    .navbar-toggler-icon        { display: block; width: 22px; height: 3px; background-color: #fff; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; }
    .navbar-toggler-icon:nth-child(2) { margin: 5px 0; }
    .navbar-toggler-btn:hover .navbar-toggler-icon { background-color: var(--primary-color); }
    .navbar-toggler-btn .btn-text  { margin-left: 8px;  }
    .navbar .header-social-nav a    { margin: 4px 6px 0px 6px; font-size: 22px; line-height: 24px; }
/******* Common CSS Start ******/

}

@media(min-width: 768px) and (max-width: 991px){
    body                        { font-size: 14px; line-height: 24px; }
    h1                          { font-size: 54px; line-height: 44px; }
    h2                          { margin-bottom: 20px; font-size: 54px; line-height: 44px; }
    h3                          { margin: 0 0 18px; font-size: 44px; line-height: 36px; }
    h4                          { margin: 0 0 14px; font-size: 24px; line-height: 32px; }
    h5                          { font-size: 18px; line-height: 24px; }
    p                           { margin-bottom: 18px; }
/* Title Style */
    h2.back-title               { font-size: 130px; line-height: 96px; }
    .back-title ~ h2            { margin-top: -60px; }

/******* Banner section CSS *******/
    .banner                         { padding: 80px 0 140px; }
    .banner .banner-logo            { width: 180px; height: 180px; margin: 0 auto 15vh; }
/* Taste Of Peace Section */
    .taste-of-peace                 { margin-top: -60px; }
/* Game Development Section */
    .game-dev-section               { padding: 130px 0px 120px; }
    .game-dev-list                  { margin: 34px 0px 32px; padding: 0px 25px; }
/* Tokenomics Section */
    .tokenomics-section             { padding: 80px 0px 40px; font-size: 13px; line-height: 22px; }
    .tokenomics-section .common-title { margin-bottom: 50px; }
    .tokenomics-section .gray-block { margin: 14px 0 14px 8%; padding: 16px 18px; }
    .tokenomics-section .gray-block p { margin-bottom: 16px; }
    .tokenomics-section .title      { margin-bottom: 10px; }
    .tokenomics-section .title img  { margin-right: 14px; width: 50px; }
    .tokenomics-section .title p    { margin-bottom: 10px; }
    .tokenomics-section .more-list img { max-height: 54px; }
    .shadow-title-list              { margin-top: 30px; }
    .shadow-title-list .title       { margin-top: 44px;}
/* Road Map Section */
    .road-map-section               { padding: 90px 0px 120px; }
    .road-map-list                  { margin-top: 28px; }
    .road-map-list .item            { padding: 24px 12px; }
    .road-map-list h5               { margin-bottom: 24px; font-size: 22px; line-height: 30px; }
    .road-map-list .item ul li      { margin-bottom: 10px; font-size: 14px; line-height: 22px; }
/* Whitepaper Section */
    .whitepaper-section 			{ padding: 90px 0px 40px; }
    .whitepaper-section .whitepaper-img { margin: 22px auto 0; width: 220px; }
/* Mini Game Section */
    .mini-game-section              { padding: 110px 0px 100px; }
    .mini-game-list                 { margin-top: 32px; }
    .mini-game-list .item-img       { margin-bottom: 24px; }
/* About Section */
    .about-section                  { padding: 80px 0px; }
    .about-section .about-img       { width: 220px; height: 220px; }
/* Charity Section */
    .charity-section                { padding: 90px 0px 70px; }
    .charity-section p              { font-size: 14px; line-height: 23px; }
    .charity-img-list               { margin-top: 30px; }
/******** Footer Section CSS Start *******/ 
    footer                          { padding: 40px 0px 36px; border-top-width: 10px;}
    footer p                        { font-size: 15px; line-height: 22px; }
}

@media(max-width: 767px){
    body                        { font-size: 14px; line-height: 24px; }
    h1                          { font-size: 42px; line-height: 44px; }
    h2                          { margin-bottom: 16px; font-size: 42px; line-height: 44px; }
    h3                          { margin: 0 0 16px; font-size: 40px; line-height: 36px; }
    h4                          { margin: 0 0 12px; font-size: 21px; line-height: 30px; }
    h5                          { font-size: 18px; line-height: 24px; }
    p                           { margin-bottom: 18px; }
/* Title Style */
    h2.back-title               { font-size: 62px; line-height: 52px; }
    .back-title ~ h2            { margin-top: -30px; }
    .theme-btn                  { padding: 10px 20px 11px; font-size: 22px; line-height: 18px; }
/******* Banner section CSS *******/
    .banner                         { padding: 120px 0 140px; min-height: 100vh; align-items: center !important; -webkit-align-items: center !important; }
    .banner .banner-logo            { width: 160px; height: 160px; margin: 0 auto 48px; }
    .banner .banner-list            { margin: 0px -14px; }
    .banner .banner-list li         { margin: 0px 7px; font-size: 13px; }
    .banner .banner-list li img     { height: 18px; }
/* Taste Of Peace Section */
    .taste-of-peace                 { margin-top: -60px; text-align: center; }
    .taste-of-peace .theme-btn      { margin-top: 10px; }
    .taste-of-peace img             { margin-top: 48px; }
/* Game Development Section */
    .game-dev-section               { padding: 100px 0px 90px; }
    .game-dev-list                  { margin: 34px 0px 32px; padding: 0px 25px; }
    .game-dev-list .item            { margin: 0px auto 32px; width: 320px; max-width: 80%; }
/* Tokenomics Section */
    .tokenomics-section             { padding: 30px 0px 40px; font-size: 13px; line-height: 22px; }
    .tokenomics-section .common-title { margin-bottom: 42px; }
    .tokenomics-section .chart-img  { margin: 0px auto 32px; display: block; width: 320px; max-width: 80%; }
    .tokenomics-section .gray-block { margin: 14px 0; padding: 16px 18px; }
    .tokenomics-section .gray-block p { margin-bottom: 16px; }
    .tokenomics-section .title      { margin-bottom: 10px; width: 100%; }
    .tokenomics-section .title img  { margin-right: 14px; width: 50px; }
    .tokenomics-section .title p    { margin-bottom: 10px; }
    .tokenomics-section .more-list img { max-height: 50px; }
    .shadow-title-list              { margin-top: 30px; }
    .shadow-title-list .title       { margin-top: 44px;}
    .shadow-title-list .back-title { transform: scale(1.3); -webkit-transform: scale(1.3); margin-bottom: -20px;}
/* Road Map Section */
    .road-map-section               { padding: 70px 0px 110px; }
    .road-map-list                  { margin-top: 28px; }
    .road-map-list .item            { padding: 24px 12px; }
    .road-map-list h5               { margin-bottom: 24px; font-size: 22px; line-height: 30px; }
    .road-map-list .item ul li      { margin-bottom: 10px; font-size: 14px; line-height: 22px; }
/* Whitepaper Section */
    .whitepaper-section 			{ padding: 70px 0px 40px; }
    .whitepaper-section .whitepaper-img { margin: 22px auto 0; width: 200px; }
/* Mini Game Section */
    .mini-game-section              { padding: 80px 0px 60px; }
    .mini-game-list                 { margin-top: 32px; }
    .mini-game-list .item           { margin: 0px auto 32px; width: 320px; max-width: 95%; }
    .mini-game-list .item-img       { margin-bottom: 18px; }
/* About Section */
    .about-section                  { padding: 70px 0px 40px; }
    .about-section p                { font-size: 13px; line-height: 20px; }
    .about-section .about-img       { width: 220px; height: 220px; }
/* Charity Section */
    .charity-section                { padding: 80px 0px 50px; }
    .charity-section p              { font-size: 14px; line-height: 23px; }
    .charity-img-list               { margin-top: 30px; }
    .charity-img-list .item         { margin-bottom: 24px; }

/******** Footer Section CSS Start *******/ 
    footer                          { padding: 30px 0px 24px; border-top-width: 8px;}
    footer p                        { font-size: 13px; line-height: 20px; }
}

@media(max-width: 575px){
    .navbar                         { padding: 10px 15px; }
    .navbar .header-social-nav a    { margin: 3px 5px 0px 5px; font-size: 20px; line-height: 24px; }
}

@media(max-width: 367px){
    h2                  { font-size: 38px; line-height: 42px; }
    h2.back-title       { font-size: 53px; line-height: 40px; }
}
/****** Responsive CSS End *******/



.wpcf7 .form-control {
padding: 10px!important;
background: #202020!important;
border-radius: 0px;
border: 1px solid #292929;
color: #fff;
}


.wpcf7 [type="submit"] {
-webkit-appearance: button;
background: var(--primary-color);
border-radius: 0px;
border: 1px solid var(--primary-color);
padding: 15px 30px;
display: inline-block;
color: #000;
font-weight: 700;
cursor: pointer;
width: 100%;
}

.wpcf7 label {
display: inline-block;
margin-bottom: 0px;
font-size: 18px;
font-weight: 600;
}