@font-face {
font-family: 'acrobat';
src: url(/fonts/Akrobat-Regular.otf);
}
@font-face {
font-family: 'acrobatBold';
src: url(/fonts/Akrobat-ExtraBold.otf);
}
html { font-size: 16px; }
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: linear-gradient(#000000 0%, #2c2c2c 100%);
isolation: isolate;
font-family: 'acrobat';
min-height: 100vh;
padding-top: clamp(60px, 8vh, 120px);
padding-bottom: 0;
margin: 0 auto;
}
body img { pointer-events: none; }
.navbar {
font-family: 'acrobatBold';
background: linear-gradient(to top, rgba(128, 128, 128, 0) 10%, black 90%);
backdrop-filter: blur(10px);
text-wrap: nowrap;
display: flex;
justify-content: center;
}
.navbar .container {
position: relative;
display: flex;
justify-content: space-between;
padding: 0;
margin: 0;
gap: 10rem;
}
.navbar-brand {
color: #fc9b00;
font-weight: 700;
letter-spacing: 1px;
display: flex;
align-items: center;
position: relative;
flex-shrink: 0;
}
.navbar-brand img {
width: 3.5vw;
min-width: 45px;
height: auto;
}
.navbar-brand strong p {
display: flex;
align-items: center;
justify-content: center;
font-family: 'acrobatBold';
font-size: 1.7rem;
letter-spacing: 1px;
margin-top: -0.5rem;
}
.navbar-brand:hover { color: #fc9b00; }
.collapse { display: flex; gap: 10rem; }
.navbar-nav { display: flex; gap: 5rem; }
.navbar-nav .nav-link {
color: #e0e0e0;
font-weight: 500;
transition: all 0.2s ease;
position: relative;
font-size: 1.2rem;
padding: 1rem 1.5rem;
}
.navbar-nav .nav-link:hover {
color: #fc9b00;
transform: scale(1.1);
}
.nav-link::after {
content: '';
position: absolute;
bottom: -5px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 2px;
background: #fc9b00;
transition: width 0.4s ease;
}
.nav-link:hover::after { width: 70%; }
.social-menu {
display: flex;
flex-direction: row;
flex-shrink: 0;
}
.social-menu .nav-item {
display: flex;
align-items: center;
margin-left: 10px;
}
.social-menu .nav-link img { width: 2.5rem; height: auto; }
.social-menu .nav-link::after { display: none; }
.mainBlock {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
gap: 2rem;
max-width: 1900px;
margin: 0 auto;
padding: 0 3rem;
}
.mainBlock .man {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 2rem;
animation: fadeInUp 0.5s ease-out;
}
.mainBlock .man img {
min-width: 500px;
max-width: 650px;
mask-image: linear-gradient(to bottom, black 0%, black 15%, rgba(0,0,0,0.5) 35%, rgba(0,0,0,0.2) 60%, transparent 80%);
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 15%, rgba(0,0,0,0.5) 35%, rgba(0,0,0,0.2) 60%, transparent 80%);
filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.4));
}
.mainBlock .man .sellBlock {
background: linear-gradient(to top, #fc9b00 10%, #ffcc26 80%);
text-align: center;
position: relative;
bottom: 11rem;
left: 1rem;
padding: 1rem 1.5rem;
margin: 0 auto;
box-shadow: 0 5px 15px rgba(255, 193, 7, 0.3);
color: #ffffff;
transition: all 0.5s ease;
border-radius: 2rem;
width: 34rem;
}
.mainBlock .man .sellBlock:hover {
transform: scale(1.02);
box-shadow: 0 4px 12px rgba(255, 193, 7, 0.5);
}
.mainBlock .man .sellBlock h2 {
font-size: clamp(1.2rem, 1.8vw, 2.8rem);
margin: 0;
}
.container { background: none; margin-top: 30px; }
.mainBlock .col-lg-6 {
max-width: 1000px;
max-height: fit-content;
width: 100%;
}
.form-card {
backdrop-filter: blur(12px);
border-radius: 1.5rem;
border: 1px solid #ffffff40;
border-top: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 20px 40px #58585866, 0 0 0 1px #fc9b0030;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
animation: fadeInUp 0.5s ease-out;
padding: 4rem 3rem;
box-sizing: border-box;
max-height: fit-content;
}
.form-card:hover { border-color: rgba(255, 193, 7, 0.5); }
.form-header {
background: linear-gradient(90deg, #fc8200, #ffcc26);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-weight: 800;
border-left: 0.3rem solid #fc9b00;
padding-left: 1rem;
font-size: 2rem;
}
.form-label {
color: #fc9b00;
font-weight: 600;
margin-bottom: 1rem;
font-size: 1.1rem;
letter-spacing: 0.3px;
}
.form-control, .form-select {
background: transparent;
border: 1px solid #ffffff40;
color: #ffffff;
border-radius: 1rem;
padding: 0.6rem 1.5rem;
font-size: 1rem;
transition: all 0.3s;
}
.form-select option { background-color: #1a1a1a; color: #fff; }
.form-control:focus, .form-select:focus {
border-color: #fc9b00;
box-shadow: 0 0 3px 3px rgba(255, 193, 7, 0.2);
outline: none;
color: #ffffff;
background-color: transparent;
}
.form-control::placeholder { color: #ffffff40; }
.text-muted {
color: #ffffff72 !important;
font-size: clamp(0.6rem, 0.7vw, 0.9rem);
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0 30px transparent inset;
-webkit-text-fill-color: #ffffffb8;
transition: background-color 5000s ease-in-out 0s;
}
.btn-recharge {
background: linear-gradient(135deg, #fc8200, #ffcc26);
background-size: 200% auto;
border: none;
padding: 1rem 1.5rem;
font-weight: 700;
font-size: clamp(0.85rem, 1.1vw, 1.5rem);
border-radius: 20px;
color: #ffffff;
width: 100%;
transition: 0.25s;
box-shadow: 0 5px 15px rgba(255, 193, 7, 0.3);
}
.btn-recharge:hover {
background-position: right center;
transform: scale(1.02);
box-shadow: 0 4px 12px rgba(255, 193, 7, 0.5);
color: #ffffff;
}
.amount-preset {
display: flex;
gap: 1rem;
flex-wrap: wrap;
margin-top: 0.3rem;
}
.amount-badge {
background: transparent;
border: 1px solid #ffffff40;
border-radius: 45px;
padding: 0.4rem 0.8rem;
font-weight: 600;
color: #ccc;
cursor: pointer;
transition: 0.2s;
font-size: 0.8rem;
}
.amount-badge:hover, .amount-badge.active {
background: #fc9b00;
color: #0a0f1e;
border-color: #fc9b00;
box-shadow: 0 0 8px rgba(255, 193, 7, 0.6);
}
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
footer {
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: flex-start;
color: #ffffff;
font-size: 1rem;
flex-wrap: wrap;
width: 100%;
margin: 0;
margin-top: 40px;
text-wrap: nowrap;
text-align: center;
}
footer h4 {
font-family: 'acrobatBold';
color: #fc9b00;
margin-bottom: 20px;
font-size: 1.3rem;
}
footer li {
list-style-type: none;
line-height: 1.6rem;
}
footer a {
text-decoration: none;
color: white;
transition: all 0.5s ease;
}
footer a:hover { text-shadow: 0 0 10px #ffffff88; }
.brand-footer {
position: absolute;
color: #fc9b00;
font-weight: 700;
letter-spacing: 1px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.brand-footer img {
width: 3rem;
height: auto;
}
.brand-footer strong {
font-family: 'acrobatBold';
font-size: 1.4rem;
position: absolute;
left: 3.2rem;
bottom: 0.5rem;
}
footer .information{ text-align: start;}
.brand-footer:hover { text-shadow: none; }
.social-menu-footer { display: none; }
@media (max-width: 991px) {
.navbar .container { padding-left: 15px; }
.navbar-toggler {
position: absolute;
right: 15px;
top: 30px;
transform: translateY(-50%);
margin-left: 0;
z-index: 1100;
outline: none;
border: none;
}
.navbar-toggler:focus,
.navbar-toggler:focus-visible {
outline: none;
box-shadow: none;
border-color: transparent;
}
.navbar-toggler-icon {
width: 40px;
height: 40px;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,193,7,1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");}
.navbar-collapse {
position: fixed;
top: 10px;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100vh;
background: rgba(0, 0, 0, 0.853);
backdrop-filter: blur(25px);
-webkit-backdrop-filter: blur(25px);
z-index: 1050;
padding: 80px 20px 20px 20px;
margin-top: 0;
overflow-y: auto;
transition: all 0.3s ease;
}
.navbar-collapse .navbar-nav:first-child {
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 60%;
gap: 25px;
margin: 80px 0 0;
line-height: 100px;
}
.navbar-nav { margin: 0 auto !important; }
.social-menu { display: none; }
.nav-link::after { display: none; }
.mainBlock {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
}
.mainBlock .man { display: none; }
footer {
flex-direction: row;
align-items: start;
text-align: center;
flex-wrap: nowrap;
padding: 0 20px;
margin-left: 2rem;
gap: 7rem;
}
footer .information { text-align: start; }
footer .social-menu-footer {
display: flex;
flex-direction: column;
gap: 0;
margin: 0;
}
}
@media (max-width: 576px) {
footer {
flex-direction: column;
justify-content: start;
text-align: left;
text-align: start;
gap: 0;
padding: 0;
margin: 0;
}
footer .information { margin-left: 25px; }
footer .gameInformation, footer .impotaninpotant-information{
    text-align: start;
}
footer .social-menu-footer {
margin: 0;
padding: 0;
flex-direction: row;
margin: 0px !important;
}
}