*{
box-sizing:border-box;
margin:0;
padding:0;
}

html,body{
width:100%;
overflow-x:hidden;
font-family:Arial;
background:url("../assets/stadium.jpg") no-repeat center center fixed;
background-size:cover;
color:white;
text-align:center;
position:relative;
}

/* overlay */

body{
font-family:Arial;
background:linear-gradient(
rgba(0,0,0,0.6),
rgba(0,0,0,0.8)
),
url("../assets/stadium.jpg") no-repeat center center fixed;
background-size:cover;
color:white;
margin:0;
text-align:center;
overflow-x:hidden;
}

/* sections */

section{
padding:15px 12px;
}

/* container */

.container{
width:100%;
max-width:1200px;
margin:auto;
padding:0 15px;
}

/* HEADER */

.header{
display:flex;
justify-content:space-between;
align-items:center;
padding:15px 20px;
background:rgba(0,0,0,0.85);
backdrop-filter:blur(6px);
}

.logo{
display:flex;
align-items:center;
gap:10px;
font-size:22px;
font-weight:bold;
color:gold;
}

.logo img{
width:40px;
}

/* HERO */

.hero{
padding:60px 20px;
background:rgba(0,0,0,0.65);
backdrop-filter:blur(6px);
-webkit-backdrop-filter:blur(6px);
}

.glow{
color:gold;
text-shadow:0 0 10px gold,0 0 20px gold;
animation:pulse 2s infinite;
}

/* STATS */

.stats{
display:flex;
justify-content:center;
gap:20px;
padding:20px;
flex-wrap:wrap;
}

.stat{
background:rgba(20,20,20,0.8);
padding:12px 20px;
border-radius:10px;
animation:float 3s infinite;
max-width:300px;
}

/* PLANS */

.plans{
display:flex;
flex-wrap:wrap;
justify-content:center;
padding:10px 15px;
margin-bottom:5px;
}

.card{
width:260px;
padding:20px;
border-radius:12px;
background:rgba(20,20,20,0.85);
box-shadow:0 0 20px rgba(0,0,0,0.6);
transition:transform .3s;
}

.card:hover{
transform:scale(1.07);
}

.vip{
border:2px solid gold;
}

.price{
font-size:30px;
color:gold;
}

.btn{
display:inline-block;
background:#00ff99;
color:black;
padding:12px 22px;
border-radius:6px;
text-decoration:none;
font-weight:bold;
margin-top:10px;
}

/* PAYMENTS */

.payment-logos{
margin-top:20px;
}

.payment-logos img{
width:80px;
margin:10px;
transition:.3s;
}

.payment-logos img:hover{
transform:scale(1.2);
}

/* PERFORMANCE TABLE */

.performance{
padding:60px 20px;
}

.performance h2{
color:#00ff9c;
margin-bottom:30px;
}

.performance-table{
width:100%;
border-collapse:collapse;
background:rgba(20,20,20,0.85);
border-radius:10px;
overflow:hidden;
}

.performance-table th{
background:#00c96b;
color:white;
padding:12px;
}

.performance-table td{
padding:10px;
border-bottom:1px solid #222;
}

/* PROFIT STATS */

.profit-stats{
display:flex;
justify-content:center;
gap:20px;
flex-wrap:wrap;
margin:40px 0;
}

.stat-box{
background:rgba(15,15,15,0.9);
border-radius:14px;
padding:25px;
text-align:center;
max-width:260px;
box-shadow:0 0 20px rgba(0,0,0,0.7);
transition:.3s;
}

.stat-box h3{
font-size:32px;
color:#00ff9c;
text-shadow:0 0 10px #00ff9c;
}

.stat-box:hover{
transform:translateY(-6px);
box-shadow:0 0 25px #00ff9c;
}

/* SAAS STATS */

.saas-stats{
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:20px;
padding:30px 10px;
}

.saas-box{
background:rgba(20,20,20,0.85);
padding:25px;
border-radius:12px;
width:200px;
box-shadow:0 0 20px rgba(0,0,0,0.6);
transition:.3s;
}

.saas-box h3{
color:#00ff9c;
font-size:30px;
text-shadow:0 0 10px #00ff9c;
}

.saas-box:hover{
transform:translateY(-6px);
box-shadow:0 0 25px #00ff9c;
}

/* FEATURES */

.features{
padding:60px 20px;
}

.feature-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:20px;
margin-top:30px;
}

.feature{
background:rgba(20,20,20,0.85);
padding:20px;
border-radius:10px;
}

/* BANNER */

.banner-slider{
width:100%;
height:320px;
overflow:hidden;
position:relative;
}

.slide{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
object-fit:cover;
object-position:center;
opacity:0;
margin-top:0px;
transition:opacity 1s;
}

.slide.active{
opacity:1;
}

/* HOT MATCHES */

.hot-matches{
padding:40px 20px;
}

.match-title{
color:#00ff9c;
margin-bottom:20px;
}

.match-slider{
position:relative;
max-width:600px;
margin:auto;
height:160px;
}

.match-card{
position:absolute;
top:0;
left:0;
width:100%;
background:rgba(20,20,20,0.9);
border-radius:12px;
padding:20px;
opacity:0;
transition:opacity 1s;
text-align:center;
}

.match-card.active{
opacity:1;
}

/* SOCIAL */

.social-icons{
display:flex;
justify-content:center;
gap:15px;
margin-top:20px;
}

.social-icons img{
width:40px;
border-radius:8px;
transition:.3s;
}

.social-icons img:hover{
transform:scale(1.2);
box-shadow:0 0 15px #00ff9c;
}

/* MOBILE */

@media (max-width:768px){

.hero{
padding:40px 15px;
}

.banner-slider{
height:200px;
}
.banner-slider::after{
position:absolute;
top:5;
left:0;
width:100%;
height:100%;
background:linear-gradient(
to bottom,
rgba(0,0,0,0.3),
rgba(0,0,0,0.6)
);
}
.plans{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:15px;
padding:10px 15px;
max-width:700px;
margin:auto;
}
@media (max-width:768px){

.plans{
grid-template-columns:repeat(2,1fr);
gap:10px;
}

.card{
width:100%;
}

}
.card{
width:100%;
padding:14px;
min-height:240px;
}

.saas-stats{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
}

.payment-logos img{
width:60px;
margin:6px;
}

.performance-table{
display:block;
overflow-x:auto;
white-space:nowrap;
font-size:12px;
}

.match-slider{
height:180px;
}

.match-card h3{
font-size:18px;
}

}

/* animations */

@keyframes pulse{
0%{text-shadow:0 0 5px gold;}
50%{text-shadow:0 0 25px gold;}
100%{text-shadow:0 0 5px gold;}
}

@keyframes float{
0%{transform:translateY(0)}
50%{transform:translateY(-10px)}
100%{transform:translateY(0)}
}
header + .banner-slider{
margin-top:0;
}
.plan-table{
padding:40px 20px;
text-align:center;
}

.plan-table h2{
color:#00ff9c;
margin-bottom:20px;
}

.table-container{
overflow-x:auto;
}

.plan-table table{
width:100%;
max-width:800px;
margin:auto;
border-collapse:collapse;
background:#111;
border-radius:10px;
overflow:hidden;
}

.plan-table th{
background:#00c96b;
color:white;
padding:12px;
}

.plan-table td{
padding:10px;
border-bottom:1px solid #222;
}

.plan-table tr:hover{
background:#1a1a1a;
}

/* mobile */

@media (max-width:768px){

.plan-table table{
font-size:12px;
}

.plan-table th,
.plan-table td{
padding:8px;
}

}
.hero{
margin-bottom:10px;
}

.stats{
margin-bottom:5px;
}
.profile{
position:relative;
display:inline-block;
}

.profile i{
font-size:26px;
color:#00ff9c;
cursor:pointer;
}


/* PROFILE FIX (DO NOT REMOVE OLD CSS) */

#profileBox{
display:none;
position:relative;
}

#profileBox i{
font-size:26px;
color:#00ff9c;
cursor:pointer;
}


/* FORCE FIX (HIGH PRIORITY) */

*{
box-sizing:border-box;
margin:0;
padding:0;
}

/* BODY FIX */

html,body{
width:100%;
overflow-x:hidden;
font-family:Arial;
background:linear-gradient(
rgba(0,0,0,0.6),
rgba(0,0,0,0.8)
),
url("../assets/stadium.jpg") no-repeat center center fixed;
background-size:cover;
color:white;
text-align:center;
}

/* SECTIONS */

section{
padding:15px 12px;
}

/* HEADER */

.header{
display:flex;
justify-content:space-between;
align-items:center;
padding:15px 20px;
background:rgba(0,0,0,0.85);
backdrop-filter:blur(6px);
z-index:1000;
position:relative;
}

.logo{
display:flex;
align-items:center;
gap:10px;
font-size:22px;
font-weight:bold;
color:gold;
}

.logo img{
width:40px;
}

/* PROFILE FIX */

#profileBox{
display:none;
position:relative;
}

#profileBox i{
font-size:26px;
color:#00ff9c;
cursor:pointer;
}

#dropdown{
display:none;
position:absolute;
right:0;
top:35px;
background:#111;
padding:15px;
border-radius:8px;
width:150px;
text-align:center;
box-shadow:0 0 10px rgba(0,0,0,0.5);
z-index:9999;
}

#dropdown p{
color:white;
font-size:14px;
margin-bottom:10px;
}

#dropdown a{
color:#00ff9c;
text-decoration:none;
font-size:13px;
}

/* HERO */

.hero{
padding:60px 20px;
background:rgba(0,0,0,0.65);
backdrop-filter:blur(6px);
}

.glow{
color:gold;
text-shadow:0 0 10px gold,0 0 20px gold;
animation:pulse 2s infinite;
}

/* STATS */

.stats{
display:flex;
justify-content:center;
gap:20px;
padding:20px;
flex-wrap:wrap;
}

.stat{
background:rgba(20,20,20,0.8);
padding:12px 20px;
border-radius:10px;
animation:float 3s infinite;
max-width:300px;
}

/* PLANS */

.plans{
display:flex;
flex-wrap:wrap;
justify-content:center;
padding:10px 15px;
}

.card{
width:260px;
padding:20px;
border-radius:12px;
background:rgba(20,20,20,0.85);
box-shadow:0 0 20px rgba(0,0,0,0.6);
transition:transform .3s;
}

.card:hover{
transform:scale(1.07);
}

.vip{
border:2px solid gold;
}

.price{
font-size:30px;
color:gold;
}

.btn{
display:inline-block;
background:#00ff99;
color:black;
padding:12px 22px;
border-radius:6px;
text-decoration:none;
font-weight:bold;
margin-top:10px;
}

/* BANNER */

.banner-slider{
width:100%;
height:320px;
overflow:hidden;
position:relative;
}

.slide{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
object-fit:cover;
opacity:0;
transition:opacity 1s;
}

.slide.active{
opacity:1;
}

/* HOT MATCHES */

.hot-matches{
padding:40px 20px;
}

.match-title{
color:#00ff9c;
margin-bottom:20px;
}

.match-slider{
position:relative;
max-width:600px;
margin:auto;
height:160px;
}

.match-card{
position:absolute;
top:0;
left:0;
width:100%;
background:rgba(20,20,20,0.9);
border-radius:12px;
padding:20px;
opacity:0;
transition:opacity 1s;
}

.match-card.active{
opacity:1;
}

/* PAYMENTS */

.payment-logos img{
width:80px;
margin:10px;
transition:.3s;
}

.payment-logos img:hover{
transform:scale(1.2);
}

/* STATS BOX */

.profit-stats{
display:flex;
justify-content:center;
gap:20px;
flex-wrap:wrap;
margin:40px 0;
}

.stat-box{
background:rgba(15,15,15,0.9);
border-radius:14px;
padding:25px;
max-width:260px;
box-shadow:0 0 20px rgba(0,0,0,0.7);
}

.stat-box h3{
font-size:32px;
color:#00ff9c;
}

/* MOBILE FIX */

@media (max-width:768px){

.banner-slider{
height:200px;
}

.plans{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:10px;
}

.card{
width:100%;
padding:14px;
}

.saas-stats{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
}

.payment-logos img{
width:60px;
margin:6px;
}

}

/* ANIMATION */

@keyframes pulse{
0%{text-shadow:0 0 5px gold;}
50%{text-shadow:0 0 25px gold;}
100%{text-shadow:0 0 5px gold;}
}

@keyframes float{
0%{transform:translateY(0)}
50%{transform:translateY(-10px)}
100%{transform:translateY(0)}
}