/*===== color =====*/

 :root {
     --primary: #0035ff;
     --bg-color: radial-gradient(50% 50% at 50% 50%, #2A2E67 0%, #141635 100%);
     --bg-white: #fff;
     --transparent: rgba(0, 0, 0, 0);
     --text-light: #797691;
     --text-light2: #bbc1cd;
     --text-dark: #45464a;
     --text-dark2: #5a5f65;
     --card-bg: #26295C;
     --text-white: #fff;
     --secondary-font: 'Inter 24pt';
 }





 *,
 body,
 html,
 p,
 span,
 h1,
 h2,
 h3,
 h4,
 h5,
 h6,
 strong,
 li {
     font-family: 'Bungee';
     font-weight: 500;
     font-style: normal;
     box-sizing: border-box;
 }



 /* 
 .font-family2 {
     font-family: 'Inter 18pt' !important;
     font-weight: normal !important;
     font-style: normal !important;
 } */

 form .form-group {
     margin-bottom: 10px;
 }

 form .form-group .inputBox {
     background: var(--white);
     border-radius: 6px;
     padding: 0px 10px;
     border: 1px solid var(--border-line-color);
 }

 form .form-group .inputBox img {
     min-width: 15px;
     margin-right: 10px;
     max-height: 18px;
     max-width: fit-content;
 }

 form .form-group .inputBox input {
     padding: 0;
     background: none !important;
     box-shadow: none !important;
     border: 0 !important;
     height: 45px;
     font-size: 12px;
     width: 100%;
     min-width: 100%;
     cursor: text;
 }


 .form-check {
     background: #0000006e;
     position: relative;
     padding: 0px;
     backdrop-filter: blur(10px);
     border-radius: 5px;
     max-width: 100%;
     overflow: hidden;
 }

 .form-check input {
     cursor: pointer;
 }

 .form-check input.form-check-input {
     right: 12px;
     position: absolute;
     display: block;
     margin: 0;
     border-width: 2px;
     border-color: var(--text-light);
     box-shadow: none !important;
     transition: all 0.3s;
     border-radius: 50% !important;
     border-style: solid !important;
     max-width: 18px !important;
     max-height: 18px !important;
     padding: 0 !important;
     top: 0px !important;
     background: transparent !important;
     width: 18px;
     height: 18px;
     bottom: 0;
     margin: auto 0;
     appearance: none;
     -webkit-appearance: none;
     outline: none;
 }

 .form-check input.form-check-input::before {
     display: none !important;
 }

 .form-check input.form-check-input::after {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     margin: auto;
     width: 10px;
     height: 10px;
     border-radius: 50%;
     /* border: 2px solid var(--text-white); */
     transition: all 0.1s;
     background: var(--primary);
     opacity: 0;

 }


 .form-check input.form-check-input:checked::after {
     opacity: 1;
 }

 .form-check .form-check-label {
     padding: 0;
     color: var(--text-white) !important;
     cursor: pointer;
     font-size: 0.9rem;
     font-weight: 500 !important;
     font-family: var(--secondary-font);
     padding: 15px 20px;
     display: block;
     width: 100%;
     max-width: 100%;
     overflow: hidden;
     box-sizing: border-box;
     background: none !important;
 }



 .form-check.checkbox input.form-check-input:checked::before {
     border-color: var(--primary);
     background: var(--primary);
     opacity: 1;
 }

 .form-check.checkbox input.form-check-input:checked::after {
     opacity: 1;
 }


 .form-check.radio .form-check-input:checked {
     border-color: var(--primary) !important;
     background: transparent !important;
 }



 .text-start {
     text-align: left;
 }

 .text-end {
     text-align: right;
 }

 .text-center {
     text-align: center;
 }

 .w-100 {
     width: 100%;
 }

 button.btn {
     border: 0;
     box-shadow: none !important;
     position: relative;
     display: block;
     text-transform: unset;
     flex: 0 !important;
     border-radius: 50px;
     cursor: pointer;
     width: 100% !important;
 }

 button.btn:hover {
     box-shadow: rgb(100 100 111 / 20%) 0px 0px 10px 0px !important;
 }


 .center_img {
     position: relative;
     overflow: hidden;
     object-fit: contain;
 }

 .center_img img.crop_img {
     display: block;
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: inherit;
     border-radius: 0px;
 }

 body {
     letter-spacing: 0px;
     padding: 0px;
     max-width: 100%;
     background: var(--bg-color);
     margin: 0;
     width: 100%;
     position: relative;
     padding-top: 70px;
     height: 100vh;
     overflow: hidden;
 }

 body::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     width: 100%;
     max-width: 768px;
     height: 100%;
     background-image: url(../images/head.png);
     background-size: contain;
     background-repeat: no-repeat;
     margin: 0 auto;
 }

 img {
     max-width: 100%;
 }

 .container {
     max-width: 768px;
     margin: 0 auto;
     padding: 0;
     position: relative;
     z-index: 99;
 }

 button.btn-primary,
 a.btn-primary {
     text-decoration: none;
     color: var(--text-white);
     display: flex;
     align-items: center;
     background: linear-gradient(180deg, rgba(169, 122, 254, 0.6) 0%, rgba(73, 111, 255, 0.6) 100%);
     width: fit-content;
     border-radius: 50px;
     min-height: 45px;
     padding: 0 20px;
     font-size: 18px;
 }

 button.btn-primary span,
 a.btn-primary span {
     display: flex;
     align-items: center;
     width: fit-content;
     margin: auto;
 }

 a.btn-primary img {
     display: block;
     width: 18px;
     min-width: 18px;
 }

 header {
     position: fixed;
     top: 0;
     left: 0;
     z-index: 999;
     width: 100%;
     background-color: var(--transparent);

 }

 header .navbar {
     width: 100%;
     padding: 0 10px;
     min-height: 70px;
 }

 header nav .navbar-brand img {
     width: 180px;
 }


 header button.btn {
     width: fit-content;
     min-width: 45px;
     background: none !important;
     border-radius: 0;
     padding: 0;

 }

 header button.btn img {
     display: block;
     margin: auto;
     width: 25px;
 }

 header .navbar-brand {
     width: fit-content;
     margin: 0;
 }

 header .navbar-brand a {
     width: fit-content;
     margin: 0 auto;
     text-decoration: none;
 }

 header .navbar-brand a h3 {
     margin: 0;
     color: var(--text-white);
     font-size: 22px;
     font-weight: 400;
 }

 .body_wrapper {
     position: relative;
     z-index: 9;
     max-height: calc(100vh - 70px);
     overflow: hidden;
     overflow-y: auto;
 }

 .menu {
     position: fixed;
     top: 0;
     left: -100%;
     width: 330px;
     height: 100vh;
     z-index: 999;
     background: rgb(4 6 47 / 71%);
     backdrop-filter: blur(25px);
     transition: all .3s;

 }

 .menu.menu-visible {
     left: 0;
 }

 .menu .menu_header button.btn {
     padding: 0;
     min-width: 45px;
     height: 45px;
     display: flex;
     background: #ffffff4d !important;
     backdrop-filter: blur(5px);
     align-items: center;
     width: fit-content !important;
 }

 .menu .menu_header button.btn img {
     display: block;
     margin: auto;
 }

 .menu .title h3 {
     margin: 0;
     color: var(--text-white);
     font-family: Bungee;
     font-weight: 400;
     font-size: 26px;
     padding-bottom: 6px;
 }

 .menu .title h5 {
     margin: 0;
     color: #b0aec7;
     font-family: var(--secondary-font);
     font-size: 15px;
 }

 .menu .menu_content {
     max-height: calc(100vh - 95px);
     overflow: hidden;
     overflow-y: auto;
 }

 .menu .menu_content ul {
     margin: 0;
     list-style: none;
     padding: 0;
 }

 .menu .menu_content ul li a {
     text-decoration: none;
     align-items: center;
     color: var(--text-white);
     font-size: 20px;
     font-weight: 400;
     padding: 0 15px 35px;
 }

 .menu .menu_content ul li a span {
     display: block;
     min-width: 40px;
 }

 .menu .menu_content ul li a span img {
     display: block;
     width: 25px;
 }

 .home-page .card {
     display: inline-block;
     margin: 0 7px;
     overflow: hidden;
     border-radius: 12px;
     width: 280px;
     background: var(--card-bg);
     white-space: normal;
 }

 .home-page .card .card-img {
     position: relative;
     width: 100%;
     height: 300px;
 }

 .home-page .card .card-img::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 120px;
     background: linear-gradient(0deg, rgba(38, 41, 92, 1) 0%, rgba(38, 41, 92, 0) 100%);
 }

 .home-page .card:first-child {
     margin-left: 25px;
 }

 .home-page .card:last-child {
     margin-right: 25px;
 }

 .home-page .card .card-body {
     padding: 0 20px 20px;
 }

 .home-page .card .card-body h2 {
     font-weight: 400;
     font-size: 20px;
     line-height: 24px;
     margin: 0;
     padding-bottom: 10px;
     color: var(--text-white);
     letter-spacing: 1px;
 }

 .home-page .card .card-body p {
     font-size: 15px;
     line-height: 22px;
     color: var(--text-light);
     font-family: var(--secondary-font);
     font-weight: 600;
     margin: 0;
     padding-bottom: 15px;
 }


 .drag-scroll {
     overflow: auto;
     white-space: nowrap;
     cursor: grab;
     width: 100%;
     -ms-overflow-style: none;
     scrollbar-width: none;

 }

 .drag-scroll::-webkit-scrollbar {
     display: none;
 }

 .dragging {
     cursor: grabbing;
 }

 footer p {
     font-family: var(--secondary-font);
     font-weight: 600;
     font-size: 12px;
     line-height: 22px;
     margin: 0;
     color: var(--text-light);
 }

 .item_row h3 {
     margin: 0;
     font-weight: 400;
     font-size: 18px;
     line-height: 100%;
     color: var(--text-white);
     align-items: center;
 }

 .item_row h3 img {
     display: block;
     width: 25px;
     min-width: 25px;
 }

 .item_row .item {
     position: relative;
     margin-bottom: 5px;
 }

 .item_row .item h3 {
     position: absolute;
     top: 142px;
     z-index: 99;
     right: 10px;
     padding: 0;
     width: 33px;
     height: 33px;
     min-height: 33px;
     margin: 0;
     display: flex;
     align-items: center;
     background: linear-gradient(180deg, rgba(169, 122, 254, 0.6) 0%, rgba(73, 111, 255, 0.6) 100%);
     border-radius: 50px;
 }

 .item_row .item h3 img {
     display: block;
     width: 18px;
     min-width: 18px;
     margin: auto;
 }

 .item_row .item .item_img {
     width: 100%;
     height: 165px;
     border-radius: 10px;
     margin-bottom: 10px;
 }

 .item_row .item h2 {
     margin: 0;
     font-weight: 400;
     font-size: 16px;
     color: var(--text-white);
 }

 .game_info {
     width: calc(100% - 45px);
     margin: 0 auto;
     position: relative;
     background: none;
     /* padding: 0 20px 20px; */
     overflow: hidden;
 }

 .game_info::before {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     height: calc(100% - 70px);
     background: var(--card-bg);
     border-radius: 15px;
 }

 .game_info .card-body {
     position: relative;
     z-index: 99;
 }

 .game_info .card-img {
     height: 290px;
     max-width: 290px;
     border-radius: 15px;
     margin: 0 auto 15px;
 }

 .game_info .card-body h2 {
     font-weight: 400;
     font-size: 20px;
     line-height: 24px;
     color: var(--text-white);
 }

 .game_info .card-body p {
     font-size: 15px;
     line-height: 22px;
     color: var(--text-light);
     font-family: var(--secondary-font);
     font-weight: 600;
     margin: 0;
     padding-bottom: 15px;
 }

 .game_info .card-body a.btn-primary {
     width: calc(100% - 40px);
     margin: 0 auto;
 }

 .language-page h3 {
     margin: 0;
     font-weight: 400;
     font-size: 18px;
     line-height: 100%;
     color: var(--text-white);
 }

 .copyrightContent {
     position: fixed;
     bottom: 0;
     left: 0;
     right: 0;
     width: 100%;
     max-width: 786px;
     margin: 0 auto;
     padding: 10px 0;
     background: linear-gradient(0deg, rgb(0 0 0 / 48%) 0%, rgba(87, 199, 133, 0) 100%);
     backdrop-filter: blur(5px);
     z-index: 999;
 }

 .copyrightContent p {
     font-family: var(--secondary-font);
     font-weight: 600;
     font-size: 12px;
     line-height: 22px;
     margin: 0;
     color: var(--text-light);
 }

 form .form_inner .form-group label {
     width: 100%;
     color: var(--text-white);
     font-weight: 500;
     font-family: var(--secondary-font);
     font-size: 18px;
     padding-bottom: 10px;
 }

 form .input_box {
     position: relative;
     width: 100%;
     transition: all 0.4s;
     background: #0000006e;
     position: relative;
     padding: 0px;
     backdrop-filter: blur(10px);
     border-radius: 5px;
     max-width: 100%;
     overflow: hidden;
 }

 form .input_box select,
 form .input_box textarea,
 form .input_box input {
     background: none !important;
     border: 0 !important;
     border-radius: 0 !important;
     color: var(--text-white) !important;
     box-shadow: none !important;
     min-height: 50px;
     font-weight: 500;
     font-size: 18px;
     letter-spacing: 0;
     resize: unset;
     padding: 0px 15px;
     outline: none !important;
     font-family: var(--secondary-font);
 }

 form .input_box input::placeholder {
     color: var(--text-light2) !important;
     font-weight: 500;
 }

 form .input_box input:-ms-input-placeholder {
     color: var(--text-light2) !important;
     font-weight: 500;
 }

 form .input_box input::-ms-input-placeholder {
     color: var(--text-light2) !important;
     font-weight: 500;
 }

 form .input_box input::-webkit-outer-spin-button,
 form .input_box input::-webkit-inner-spin-button {
     -webkit-appearance: none;
     margin: 0;
 }

 form .input_box input[type=number] {
     -moz-appearance: textfield;
     appearance: textfield;
 }

 form .input_box input:hover,
 form .input_box input:focus {
     box-shadow: 0px 2px 6px 0px #0000000F !important;
 }

 form .input_box h4 {
     margin: 0;
     color: var(--text-white);
     font-family: var(--secondary-font);
     margin-left: 12px;
     min-width: fit-content;
     font-weight: 500;
     font-size: 18px;
 }

 .login-page form h2 {
     margin: 0;
     color: var(--text-white);
     font-family: var(--secondary-font);
     font-size: 18px;
 }

 .login-page form h3 {
     margin: 0;
     color: var(--text-white);
     font-size: 14px;
     font-weight: 500;
     font-family: var(--secondary-font);
 }

 .login-page form h3 span {
     text-transform: uppercase;
     color: var(--primary);
     cursor: pointer;
     font-weight: 600;
     font-family: inherit;
     letter-spacing: .5px;
 }

 .subscription-plans-page .banner {
     position: relative;
     margin: 0 auto 17px;
     width: calc(100% - 40px);
     border-radius: 10px;
     overflow: hidden;
     background: var(--bg-color);
     padding: 12px;
 }

 .subscription-plans-page .banner .bannerImage {
     width: 100%;
     height: 350px;
     border-radius: 10px;
 }

 .subscription-plans-page .banner .bannerText {
     padding: 20px 0px 0;
 }

 .subscription-plans-page .banner .bannerText h2 {
     color: var(--text-white);
     font-size: 22px;
     font-weight: 600;
     margin: 0;
     padding-bottom: 8px;
 }

 .subscription-plans-page .banner .bannerText h3 {
     margin: 0;
     color: var(--text-light2);
     font-weight: 400;
     font-size: 18px;
 }



 .subscription-plans-page ul {
     padding: 0;
     list-style: none;
 }

 .subscription-plans-page ul li {
    background: #00000061;
    border-radius: 8px;
    padding: 17px;
    position: relative;
    overflow: hidden !important;
    width: calc(100% - 40px);
    margin: 0 auto 10px;
    cursor: pointer;
    backdrop-filter: blur(5px);
 }

 .subscription-plans-page ul li .text_box {
     width: 100%;
 }

 .subscription-plans-page ul li .text_box h3 {
     font-weight: 500;
     font-size: 13px;
     text-transform: uppercase;
     color: var(--text-white);
     margin: 0;
     padding-bottom: 8px;
     font-family: var(--secondary-font);
     opacity: .8;
     letter-spacing: 1px;
 }


 .subscription-plans-page ul li .text_box h2 {
     font-weight: 600;
     font-size: 17px;
     color: var(--text-white);
     margin: 0;
     font-family: var(--secondary-font);
 }

 .subscription-plans-page ul li h4 {
     margin: 0;
     color: var(--text-white);
     min-width: fit-content;
     font-size: 22px;
     font-family: var(--secondary-font);
 }