/*====================================================
GTRADES-AXIS™
Professional Trading Framework
Author: GTRADES
====================================================*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

:root{

--primary:#0A84FF;
--primary-light:#38A3FF;
--secondary:#101722;
--background:#07090D;
--background2:#0E1522;
--card:#121A29;
--white:#ffffff;
--text:#C9D3DD;
--border:rgba(255,255,255,.08);
--shadow:0 15px 40px rgba(0,0,0,.35);

}

*{

margin:0;
padding:0;
box-sizing:border-box;
scroll-behavior:smooth;

}

html{

overflow-x:hidden;

}

body{

font-family:'Poppins',sans-serif;
background:var(--background);
color:var(--white);
overflow-x:hidden;
line-height:1.7;

}

img{

max-width:100%;
display:block;

}

a{

text-decoration:none;

}

ul{

list-style:none;

}

.container{

width:90%;
max-width:1400px;
margin:auto;

}

/*================ HEADER ================*/

header{

position:fixed;
top:0;
left:0;
width:100%;
height:90px;
display:flex;
align-items:center;
background:rgba(7,9,13,.92);
backdrop-filter:blur(16px);
border-bottom:1px solid var(--border);
z-index:9999;

}

header .container{

display:flex;
justify-content:space-between;
align-items:center;

}

.logo{

display:flex;
align-items:center;
gap:15px;

}

.logo img{

width:60px;
height:60px;
object-fit:contain;

}

.logo h2{

font-size:30px;
font-weight:800;
letter-spacing:1px;

}

.logo span{

color:var(--primary);

text-shadow:
0 0 12px var(--primary),
0 0 28px var(--primary),
0 0 60px var(--primary);

}
/* =======================================
HEADER ACTIONS
======================================= */

.nav-buttons{

display:flex;

align-items:center;

gap:14px;

margin-left:auto;

}

.nav-buttons a{

white-space:nowrap;

}

.login-btn{

background:transparent;

border:2px solid #0A84FF;

padding:10px 20px;

border-radius:8px;

font-weight:600;

color:#fff;

text-decoration:none;

transition:.3s;

}

.login-btn:hover{

background:#0A84FF;

}

.register-btn{

background:#0A84FF;

padding:10px 20px;

border-radius:8px;

color:#fff;

text-decoration:none;

font-weight:600;

transition:.3s;

}

.register-btn:hover{

background:#006be0;

}

.dashboard-btn{

display:none;

background:#FFD700;

padding:10px 20px;

border-radius:8px;

font-weight:700;

color:#111;

text-decoration:none;

}

.nav-buttons i{

font-size:20px;

}

@media(max-width:992px){

.nav-buttons{

flex-wrap:wrap;

justify-content:center;

margin-top:20px;

}

}
/*================ NAVIGATION ================*/

nav ul{

display:flex;
gap:35px;

}

nav a{

color:var(--white);
font-size:16px;
font-weight:500;
transition:.35s;

}

nav a:hover{

color:var(--primary);

}

.nav-buttons{

display:flex;
align-items:center;
gap:12px;

}

.nav-buttons a{

display:flex;
justify-content:center;
align-items:center;

}

.youtube,
.telegram,
.whatsapp,
.tiktok{

width:42px;
height:42px;
border-radius:50%;
background:#151E2E;
color:#fff;
font-size:18px;
transition:.35s;

}

.youtube:hover{

background:#ff0000;
transform:translateY(-4px);

}

.telegram:hover{

background:#229ED9;
transform:translateY(-4px);

}

.whatsapp:hover{

background:#25D366;
transform:translateY(-4px);

}

.tiktok:hover{

background:#111;
transform:translateY(-4px);

}

.join-btn{

padding:13px 28px;
background:var(--primary);
border-radius:8px;
color:#fff;
font-weight:600;
margin-left:12px;
transition:.35s;

}

.join-btn:hover{

background:var(--primary-light);

box-shadow:

0 0 15px var(--primary),
0 0 40px var(--primary);

}

/*================ HERO ================*/

.hero{

min-height:100vh;

display:flex;
align-items:center;

background:

radial-gradient(circle at top right,
rgba(10,132,255,.18),
transparent 35%),

linear-gradient(180deg,
#07090D 0%,
#101722 100%);

position:relative;

padding-top:90px;

overflow:hidden;

}

.hero-overlay{

position:absolute;

inset:0;

background:

linear-gradient(rgba(0,0,0,.15),
rgba(0,0,0,.55));

}

.hero-grid{

position:relative;

display:grid;

grid-template-columns:1.1fr .9fr;

gap:80px;

align-items:center;

z-index:5;

}

.subtitle{

display:inline-block;

padding:8px 18px;

background:rgba(10,132,255,.12);

border:1px solid rgba(10,132,255,.3);

border-radius:40px;

color:var(--primary);

font-size:14px;

letter-spacing:2px;

margin-bottom:25px;

}

.hero h1{

font-size:74px;

font-weight:800;

line-height:1.05;

margin-bottom:10px;

}

.hero h1 span{

color:var(--primary);

text-shadow:

0 0 15px var(--primary),

0 0 35px var(--primary),

0 0 70px var(--primary);

animation:glow 2s infinite alternate;

}

.hero h2{

font-size:48px;

font-weight:700;

margin-bottom:25px;

}

.hero-description{

font-size:20px;

color:var(--text);

max-width:720px;

margin-bottom:40px;

}
/*================ HERO BUTTONS ================*/

.hero-buttons{

display:flex;

gap:20px;

margin-bottom:50px;

flex-wrap:wrap;

}

.primary-btn,
.secondary-btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:16px 34px;

border-radius:10px;

font-size:17px;

font-weight:600;

transition:.35s;

}

.primary-btn{

background:var(--primary);

color:#fff;

box-shadow:0 10px 30px rgba(10,132,255,.35);

}

.primary-btn:hover{

transform:translateY(-5px);

background:var(--primary-light);

box-shadow:
0 0 20px var(--primary),
0 0 45px rgba(10,132,255,.6);

}

.secondary-btn{

border:2px solid var(--primary);

color:var(--white);

background:transparent;

}

.secondary-btn:hover{

background:var(--primary);

transform:translateY(-5px);

}

/*================ HERO STATS ================*/

.hero-stats{

display:flex;

gap:40px;

margin-top:40px;

flex-wrap:wrap;

}

.hero-stats div{

text-align:left;

}

.hero-stats h3{

font-size:36px;

color:var(--primary);

font-weight:700;

}

.hero-stats p{

color:var(--text);

font-size:15px;

}

/*================ GLASS CARD ================*/

.glass-card{

background:rgba(18,26,41,.75);

backdrop-filter:blur(18px);

border:1px solid rgba(255,255,255,.08);

padding:40px;

border-radius:20px;

box-shadow:var(--shadow);

animation:float 5s ease-in-out infinite;

}

.glass-card h3{

font-size:28px;

margin-bottom:25px;

color:var(--primary);

}

.glass-card ul{

display:flex;

flex-direction:column;

gap:18px;

}

.glass-card li{

font-size:18px;

color:var(--text);

}

/*================ GENERAL SECTIONS ================*/

section{

padding:110px 0;

position:relative;

}

.section-title{

text-align:center;

margin-bottom:70px;

}

.section-title h2{

font-size:50px;

font-weight:800;

margin-bottom:18px;

color:var(--white);

}

.section-title p{

font-size:19px;

color:var(--text);

max-width:760px;

margin:auto;

}

/*================ ABOUT ================*/

.about{

background:#0B1018;

}

.section-text{

max-width:900px;

margin:0 auto 70px;

font-size:19px;

text-align:center;

color:var(--text);

}

.about-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:30px;

}

.about-card{

background:var(--card);

padding:40px;

border-radius:18px;

text-align:center;

border:1px solid var(--border);

transition:.35s;

}

.about-card:hover{

transform:translateY(-10px);

border-color:var(--primary);

box-shadow:0 18px 40px rgba(10,132,255,.15);

}

.about-card i{

font-size:48px;

margin-bottom:25px;

color:var(--primary);

}

.about-card h3{

font-size:28px;

margin-bottom:18px;

}

.about-card p{

color:var(--text);

}

/*================ ACADEMY ================*/

.academy{

background:linear-gradient(180deg,#0B1018,#111827);

}

.academy-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:30px;

}

.academy-card{

background:var(--card);

padding:35px;

border-radius:18px;

border:1px solid var(--border);

transition:.35s;

position:relative;

overflow:hidden;

}

.academy-card::before{

content:"";

position:absolute;

left:0;

top:0;

width:4px;

height:100%;

background:var(--primary);

transform:scaleY(0);

transition:.35s;

transform-origin:top;

}

.academy-card:hover::before{

transform:scaleY(1);

}

.academy-card:hover{

transform:translateY(-8px);

box-shadow:0 20px 45px rgba(10,132,255,.15);

}

.academy-card .icon{

width:70px;

height:70px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:rgba(10,132,255,.12);

margin-bottom:25px;

}

.academy-card i{

font-size:30px;

color:var(--primary);

}

.academy-card h3{

font-size:25px;

margin-bottom:15px;

}

.academy-card p{

color:var(--text);

font-size:16px;

}

/*================ GENERIC CARD ================*/

.card{

background:var(--card);

border:1px solid var(--border);

border-radius:18px;

padding:35px;

transition:.35s;

}

.card:hover{

transform:translateY(-8px);

border-color:var(--primary);

box-shadow:0 15px 40px rgba(10,132,255,.15);

}
/*================ STRATEGY =================*/

.strategy{

background:#07090D;

}

.strategy-flow{

display:flex;

justify-content:center;

align-items:center;

flex-wrap:wrap;

gap:18px;

margin-top:60px;

}

.flow-box{

width:180px;

background:var(--card);

padding:28px 20px;

border-radius:18px;

text-align:center;

border:1px solid var(--border);

transition:.35s;

}

.flow-box:hover{

transform:translateY(-8px);

border-color:var(--primary);

box-shadow:0 20px 40px rgba(10,132,255,.15);

}

.flow-number{

width:55px;

height:55px;

margin:auto;

margin-bottom:20px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

background:var(--primary);

font-weight:700;

font-size:20px;

}

.flow-box h3{

font-size:22px;

margin-bottom:15px;

}

.flow-box p{

color:var(--text);

font-size:15px;

}

.flow-arrow{

font-size:34px;

color:var(--primary);

}

/*================ WHY US =================*/

.why{

background:#0B1018;

}

.features-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:30px;

margin-top:60px;

}

.feature{

background:var(--card);

padding:40px;

border-radius:18px;

border:1px solid var(--border);

transition:.35s;

text-align:center;

}

.feature:hover{

transform:translateY(-8px);

border-color:var(--primary);

box-shadow:0 20px 45px rgba(10,132,255,.15);

}

.feature i{

font-size:50px;

margin-bottom:25px;

color:var(--primary);

}

.feature h3{

font-size:24px;

margin-bottom:15px;

}

.feature p{

color:var(--text);

}

/*================ COMMUNITY =================*/

.community{

background:#07090D;

}

.community-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:30px;

margin-top:60px;

}

.community-card{

background:var(--card);

border-radius:18px;

padding:45px 30px;

text-align:center;

border:1px solid var(--border);

transition:.35s;

color:white;

}

.community-card:hover{

transform:translateY(-10px);

box-shadow:0 20px 45px rgba(10,132,255,.18);

}

.community-card i{

font-size:60px;

margin-bottom:25px;

}

.community-card h3{

font-size:28px;

margin-bottom:15px;

}

.community-card p{

color:var(--text);

margin-bottom:20px;

}

.community-card span{

font-weight:600;

color:var(--primary);

}

.youtube i{

color:#FF0000;

}

.telegram i{

color:#229ED9;

}

.whatsapp i{

color:#25D366;

}

.tiktok i{

color:#ffffff;

}

/*================ STATS =================*/

.stats{

background:linear-gradient(180deg,#0E1522,#07090D);

padding:90px 0;

}

.stats-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:30px;

}

.stat-card{

background:var(--card);

padding:45px 25px;

text-align:center;

border-radius:18px;

border:1px solid var(--border);

transition:.35s;

}

.stat-card:hover{

transform:translateY(-8px);

border-color:var(--primary);

}

.stat-card h2{

font-size:52px;

font-weight:800;

color:var(--primary);

margin-bottom:10px;

}

.stat-card p{

color:var(--text);

font-size:17px;

}
/*================ TESTIMONIALS =================*/

.testimonials{

background:#0B1018;

}

.testimonial-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:30px;

margin-top:60px;

}

.testimonial-card{

background:var(--card);

padding:40px;

border-radius:18px;

border:1px solid var(--border);

transition:.35s;

font-size:22px;

color:#FFD700;

}

.testimonial-card:hover{

transform:translateY(-8px);

border-color:var(--primary);

box-shadow:0 20px 45px rgba(10,132,255,.18);

}

.testimonial-card p{

margin:25px 0;

font-size:17px;

color:var(--text);

line-height:1.8;

}

.testimonial-card h4{

font-size:18px;

color:var(--primary);

}

/*================ FAQ =================*/

.faq{

background:#07090D;

}

.faq-item{

background:var(--card);

margin-bottom:22px;

padding:28px 35px;

border-radius:15px;

border-left:5px solid var(--primary);

transition:.35s;

}

.faq-item:hover{

transform:translateX(8px);

box-shadow:0 12px 30px rgba(10,132,255,.15);

}

.faq-item h3{

font-size:22px;

margin-bottom:15px;

}

.faq-item p{

color:var(--text);

}

/*================ CTA =================*/

.cta{

padding:120px 0;

text-align:center;

background:

linear-gradient(rgba(7,9,13,.85),

rgba(7,9,13,.95)),

url("../images/hero-bg.jpg");

background-size:cover;

background-position:center;

}

.cta h2{

font-size:58px;

margin-bottom:25px;

}

.cta p{

max-width:700px;

margin:auto;

color:var(--text);

font-size:20px;

margin-bottom:45px;

}

.cta-buttons{

display:flex;

justify-content:center;

gap:25px;

flex-wrap:wrap;

}

/*================ FOOTER =================*/

/* ================= FOOTER ================= */

footer{
background:#05070b;
padding:80px 8% 30px;
border-top:1px solid rgba(255,255,255,.08);
}

.footer-grid{
display:grid;
grid-template-columns:2fr 1fr 1fr 1fr;
gap:50px;
}

.footer-logo{
width:70px;
margin-bottom:15px;
}

.footer-about h2{
font-size:30px;
margin-bottom:15px;
}

.footer-about span{
color:#0A84FF;
}

.footer-about p{
color:#bfc8d4;
line-height:1.8;
}

.footer-links h3,
.footer-contact h3{
margin-bottom:20px;
color:#0A84FF;
}

.footer-links ul{
list-style:none;
padding:0;
}

.footer-links li{
margin-bottom:12px;
}

.footer-links a{
text-decoration:none;
color:#d0d8e4;
transition:.3s;
}

.footer-links a:hover{
color:#0A84FF;
padding-left:6px;
}

.footer-contact p{
margin-bottom:12px;
color:#d0d8e4;
}

.footer-contact i{
color:#0A84FF;
width:25px;
}

footer hr{
margin:40px 0 20px;
border:0;
border-top:1px solid rgba(255,255,255,.08);
}

.copyright{
text-align:center;
color:#9aa8bb;
line-height:2;
}

.copyright strong{
color:#0A84FF;
font-size:18px;
}

#scrollTop{
position:fixed;
right:25px;
bottom:25px;
width:50px;
height:50px;
border:none;
border-radius:50%;
background:#0A84FF;
color:#fff;
cursor:pointer;
font-size:18px;
box-shadow:0 0 20px rgba(10,132,255,.4);
display:none;
z-index:999;
}

#scrollTop:hover{
transform:translateY(-5px);
}

@media(max-width:900px){

.footer-grid{
grid-template-columns:1fr;
text-align:center;
}

.footer-logo{
margin:auto;
margin-bottom:20px;
}

.footer-contact i{
width:auto;
margin-right:8px;
}

}
/*================ SCROLL BUTTON =================*/

#scrollTop{

position:fixed;

right:30px;

bottom:30px;

width:55px;

height:55px;

border:none;

border-radius:50%;

background:var(--primary);

color:#fff;

cursor:pointer;

display:flex;

align-items:center;

justify-content:center;

font-size:22px;

box-shadow:0 0 25px rgba(10,132,255,.4);

opacity:0;

visibility:hidden;

transition:.35s;

z-index:999;

}

#scrollTop.show{

opacity:1;

visibility:visible;

}

#scrollTop:hover{

transform:translateY(-5px);

}

/*================ LOADER =================*/

#loader{

position:fixed;

inset:0;

background:#07090D;

display:flex;

justify-content:center;

align-items:center;

z-index:99999;

transition:.6s;

}

.loader-logo{

text-align:center;

animation:pulse 1.8s infinite;

}

.loader-logo img{

width:90px;

margin:auto;

margin-bottom:20px;

}

.loader-logo h2{

font-size:34px;

}

.loader-logo span{

color:var(--primary);

}

/*================ ANIMATIONS =================*/

@keyframes glow{

from{

text-shadow:
0 0 10px #0A84FF,
0 0 25px #0A84FF,
0 0 45px #0A84FF;

}

to{

text-shadow:
0 0 18px #38A3FF,
0 0 40px #38A3FF,
0 0 70px #38A3FF,
0 0 100px #38A3FF;

}

}

@keyframes float{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-18px);

}

100%{

transform:translateY(0px);

}

}

@keyframes pulse{

0%{

transform:scale(1);

}

50%{

transform:scale(1.06);

}

100%{

transform:scale(1);

}

}

/*================ UTILITIES =================*/

.hidden{

opacity:0;

transform:translateY(50px);

transition:all .8s ease;

}

.show{

opacity:1;

transform:translateY(0);

}

.text-center{

text-align:center;

}

.mt-50{

margin-top:50px;

}

.mb-50{

margin-bottom:50px;

}
/* ================= LOGIN SYSTEM ================= */

.login-container{
min-height:100vh;
display:flex;
justify-content:center;
align-items:center;
padding:40px;
background:
linear-gradient(rgba(7,9,13,.92),rgba(7,9,13,.95)),
url("../images/login-bg.jpg") center/cover;
}

.login-card{

width:430px;
max-width:100%;

background:#111827;

padding:45px;

border-radius:20px;

border:1px solid rgba(255,255,255,.08);

text-align:center;

box-shadow:0 20px 60px rgba(0,0,0,.45);

}

.login-logo{

width:90px;

margin-bottom:20px;

}

.login-card h1{

font-size:34px;

margin-bottom:10px;

}

.login-card p{

color:#bfc7d4;

margin-bottom:30px;

}

.input-group{

display:flex;

align-items:center;

background:#1b2433;

margin-bottom:18px;

padding:14px 18px;

border-radius:10px;

}

.input-group i{

color:#0A84FF;

margin-right:12px;

font-size:18px;

}

.input-group input{

width:100%;

background:none;

border:none;

outline:none;

color:white;

font-size:16px;

}

.login-btn{

width:100%;

padding:15px;

background:#0A84FF;

border:none;

border-radius:10px;

font-size:17px;

font-weight:600;

color:white;

cursor:pointer;

transition:.3s;

}

.login-btn:hover{

background:#0074e8;

transform:translateY(-2px);

}

.google-btn{

width:100%;

padding:15px;

margin-top:20px;

background:white;

color:#111;

border:none;

border-radius:10px;

cursor:pointer;

font-weight:600;

}

.google-btn i{

color:#DB4437;

margin-right:10px;

}

.login-links{

display:flex;

justify-content:space-between;

margin-top:20px;

}

.login-links a{

color:#0A84FF;

text-decoration:none;

font-size:14px;

}

.divider{

margin:30px 0;

color:#888;

position:relative;

}

.divider::before{

content:"";

position:absolute;

left:0;

top:50%;

width:40%;

height:1px;

background:#333;

}

.divider::after{

content:"";

position:absolute;

right:0;

top:50%;

width:40%;

height:1px;

background:#333;

}

.back-home{

display:block;

margin-top:25px;

color:#ccc;

text-decoration:none;

}
<div class="nav-buttons">
.login-btn,
.register-btn,
.dashboard-btn{

padding:12px 22px;

border-radius:10px;

font-weight:600;

text-decoration:none;

transition:.3s;

margin-left:10px;

}

.login-btn{

background:#ffffff;

color:#111;

}

.login-btn:hover{

background:#ececec;

}

.register-btn{

background:#0A84FF;

color:white;

}

.register-btn:hover{

background:#0668cc;

}

.dashboard-btn{

background:#16a34a;

color:white;

}

.dashboard-btn:hover{

background:#15803d;

}
.table-container{
    background:#fff;
    padding:25px;
    border-radius:15px;
    overflow:auto;
}

.members-table{
    width:100%;
    border-collapse:collapse;
}

.members-table th{
    background:#0A84FF;
    color:white;
    padding:15px;
    text-align:left;
}

.members-table td{
    padding:15px;
    border-bottom:1px solid #ececec;
}

.approve-btn{
    background:#0A84FF;
    color:white;
    border:none;
    padding:10px 18px;
    border-radius:8px;
    cursor:pointer;
    font-weight:600;
}
.resources-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));

    gap:25px;

    margin-top:30px;

}

.resource-card{

    background:#fff;

    border-radius:18px;

    padding:25px;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    transition:.3s;

}

.resource-card:hover{

    transform:translateY(-5px);

}

.resource-card h3{

    color:#1877f2;

    margin-bottom:10px;

}

.resource-card p{

    color:#666;

    margin-bottom:20px;

}

.resource-card a{

    display:inline-block;

    background:#1877f2;

    color:#fff;

    padding:10px 18px;

    border-radius:8px;

    text-decoration:none;

    font-weight:600;

}

.resource-card a:hover{

    background:#0058d6;

}
/* Scroll to top button */
#scrollTopBtn {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 999;
  width: 50px;
  height: 50px;
  border: none;
  border-radius: 50%;
  background: linear-gradient(135deg, #0f8cff, #00c853);
  color: #fff;
  font-size: 1.5rem;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(15, 140, 255, 0.4);
  transition: all 0.3s ease;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
}
#scrollTopBtn.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
#scrollTopBtn:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 8px 30px rgba(15, 140, 255, 0.6);
}
#scrollTopBtn:active {
  transform: scale(0.95);
}