body{
    margin:0;
    font-family:Arial, sans-serif;
    background:#f4f5f7;
    color:#222;
}

.hero{
    height:90vh;
    background:url('assets/images/background-bbfield.jpg');
    background-size:cover;
    background-position:center;
    position:relative;
}

.hero-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.55);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    color:white;
}

.hero h1{
    font-size:4rem;
    margin-bottom:10px;
}

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

.tagline{
    font-size:1.2rem;
}

.btn{
    margin-top:25px;
    padding:12px 25px;
    background:white;
    color:black;
    text-decoration:none;
    border-radius:8px;
    font-weight:bold;
}

.section{
    padding:60px 10%;
}

.player-card{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:40px;
}

.stats-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
    gap:15px;
}

.stat-box{
    background:white;
    border-radius:12px;
    padding:25px;
    text-align:center;
}

.stat-box span{
    display:block;
    font-size:2rem;
    font-weight:bold;
}

table{
    width:100%;
    background:white;
    border-collapse:collapse;
}

th,td{
    padding:12px;
    border:1px solid #ddd;
    text-align:center;
}

.video-container{
    position:relative;
    padding-bottom:56.25%;
    height:0;
}

.video-container iframe{
    position:absolute;
    width:100%;
    height:100%;
}

.contact-card{
    background:white;
    padding:30px;
    border-radius:12px;
}

footer{
    background:#111;
    color:white;
    text-align:center;
    padding:30px;
}

@media(max-width:768px){

.player-card{
    grid-template-columns:1fr;
}

.hero h1{
    font-size:2.5rem;
}

}