/* ==============================
GLOBAL STYLE
============================== */

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

body{

font-family:Arial, Helvetica, sans-serif;

background:linear-gradient(135deg,#0f2027,#203a43,#2c5364);

color:#fff;

min-height:100vh;

display:flex;
flex-direction:column;

}

main{
flex:1;
}


/* ==============================
NAVBAR
============================== */

.navbar{

background:#1b1f23 !important;

box-shadow:0 5px 15px rgba(0,0,0,0.4);

}

.navbar-brand img{
height:45px;
width:auto;
background:transparent;
object-fit:contain;

}
.nav-link{

margin-left:15px;

}

.nav-link:hover{

color:#ffc107; 

}

.nav-link.active{

color:#ffc107; 

font-weight:600;

}


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

.hero{

height:90vh;

display:flex;

align-items:center;

justify-content:center;

text-align:center;

background:url('../images/psl-banner.jpg') center/cover no-repeat;

position:relative;

}

.hero::before{

content:"";

position:absolute;

top:0;
left:0;

width:100%;
height:100%;

background:rgba(0,0,0,0.6);

}

.hero-content{

position:relative;

z-index:2;

}

.hero h1{

font-size:60px;

font-weight:bold;

}

.hero p{

font-size:22px;

margin-top:10px;

}

.hero .btn{

margin-top:20px;

padding:12px 30px;

font-size:18px;

}


/* ==============================
LIVE MATCH CARD
============================== */

.live-card{

background:#ffffff;

color:#000;

padding:30px;

border-radius:12px;

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

}


/* ==============================
TEAM CARDS
============================== */

.team-card{

text-align:center;

margin-bottom:30px;

}

.team-card img{

width:100%;

height:220px;

object-fit:cover;

border-radius:12px;

transition:0.3s;

}

.team-card img:hover{

transform:scale(1.05);

}

.team-card h5{

margin-top:10px;

}


/* ==============================
PLAYER CARDS
============================== */

.player-card{

text-align:center;

background:rgba(255,255,255,0.08);

padding:15px;

border-radius:12px;

margin-bottom:20px;

transition:0.3s;

}

.player-card:hover{

transform:translateY(-6px);

}

.player-card img{

width:100%;

height:200px;

object-fit:cover;

border-radius:10px;

}

.player-card h5{

margin-top:10px;

}


/* ==============================
AUTH PAGE (LOGIN / REGISTER)
============================== */

.auth-page{

min-height:85vh;

display:flex;

align-items:center;

justify-content:center;

background:url('../images/stadium.jpg') center/cover no-repeat;

}

.auth-card{

width:100%;

max-width:420px;

padding:40px;

border-radius:15px;

background:rgba(255,255,255,0.1);

backdrop-filter:blur(12px);

border:1px solid rgba(255,255,255,0.2);

box-shadow:0 20px 50px rgba(0,0,0,0.4);

color:white;

}

.auth-card input{

height:45px;

border-radius:8px;

border:none;

}

.auth-card button{

height:45px;

font-weight:600;

border-radius:8px;

}


/* ==============================
BUTTON STYLE
============================== */

.btn-warning{

background:#ffc107;

border:none;

}

.btn-warning:hover{

background:#e0a800;

}


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

.site-footer{

background:#0f2027;
color:#ccc;
padding:50px 0;
margin-top:60px;

}

.footer-logo{

color:#ffc107;
font-weight:bold;

}

.footer-text{

font-size:14px;
margin-top:10px;

}

.footer-links{

list-style:none;
padding:0;

}

.footer-links li{

margin-bottom:8px;

}

.footer-links a{

color:#bbb;
text-decoration:none;
transition:0.3s;

}

.footer-links a:hover{

color:#ffc107;

}

.social-icons a{

color:white;
margin-right:10px;
font-size:20px;

}

.footer-bottom{

font-size:14px;
color:#999;

}


/* ==============================
RESPONSIVE
============================== */

@media(max-width:768px){

.hero h1{

font-size:36px;

}

.hero p{

font-size:18px;

}

.hero{

height:70vh;

}

}

.navbar .nav-link.active{

color:#ffc107;

font-weight:600;

}

.navbar .nav-link:hover{

color:#ffc107;

}

.navbar-animated{

transition:0.3s;

box-shadow:0 5px 20px rgba(0,0,0,0.4);

}

.navbar-animated:hover{

box-shadow:0 8px 30px rgba(0,0,0,0.6);

}
.ticker{
background:#ffc107;
color:#000;
padding:8px;
font-weight:600;
}
.notification-badge{

position:absolute;

top:-5px;

right:-5px;

background:red;

color:white;

border-radius:50%;

font-size:12px;

padding:4px 6px;

}
.avatar{

width:32px;

height:32px;

border-radius:50%;

margin-right:8px;

}

.profile-menu{

animation:fadeMenu 0.3s ease;

}

@keyframes fadeMenu{

from{
opacity:0;
transform:translateY(-10px);
}

to{
opacity:1;
transform:translateY(0);
}

}
.navbar-animated{

transition:0.3s;

box-shadow:0 5px 20px rgba(0,0,0,0.4);

}

.notification-badge{

position:absolute;

top:-6px;

right:-6px;

font-size:11px;

}

.live-ticker{

background:#ffc107;

color:#000;

font-weight:600;

padding:6px 0;

}
.leader-card{

background:#1b1f23;

padding:25px;

border-radius:15px;

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

transition:0.3s;

}

.leader-card:hover{

transform:translateY(-6px);

}

.leader-card img{

width:80px;

height:80px;

border-radius:50%;

margin-bottom:10px;

}
.live-card{

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

background:linear-gradient(yellow, orange);

padding:40px;

border-radius:20px;

color:Black;

box-shadow:0 10px 40px rgba(0,0,0,0.5);

text-align:center;

}

.live-card img{

height:80px;

margin-bottom:10px;

}

.score{

font-size:28px;

font-weight:bold;

color:Black;

}

.vs{

font-size:30px;

font-weight:bold;

}
.series-card{

background:#111827;

padding:25px;

border-radius:12px;

text-align:center;

transition:0.3s;

color:white;

}

.series-card:hover{

transform:translateY(-6px);

}

.series-card img{

max-width:120px;

}

.series-card{

background:#111827;

padding:25px;

border-radius:12px;

text-align:center;

transition:0.3s;

color:white;

}

.series-card:hover{

transform:translateY(-6px);

}

.series-card img{

max-width:120px;

}
.live-ticker{
background:#ffc107;
overflow:hidden;
white-space:nowrap;
padding:8px 0;
}

.ticker-track{
display:flex;
gap:60px;
animation:tickerMove 25s linear infinite;
}

.ticker-item{
font-weight:600;
color:#000;
}

.live-dot{
width:8px;
height:8px;
background:red;
display:inline-block;
border-radius:50%;
margin-right:5px;
animation:blink 1s infinite;
}

@keyframes tickerMove{

0%{ transform:translateX(100%); }

100%{ transform:translateX(-100%); }

}

@keyframes blink{

0%{opacity:1;}

50%{opacity:0;}

100%{opacity:1;}

}