/* =========================================
BULLSEYE ODISHA - PROFESSIONAL STYLE FILE
========================================= */

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

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

body{
font-family:'Poppins',sans-serif;
background:#ffffff;
color:#333;
margin:0;
padding:0;
line-height:1.6;
text-align:center;
}

h1,h2,h3{
color:#333;
font-weight:700;
letter-spacing:1px;
margin-top:30px;
}

p{
max-width:900px;
margin:20px auto;
padding:0 15px;
font-size:17px;
color:#444;
text-align:justify;
}

/* =========================================
BUTTONS
========================================= */

button,
.main-btn,
.read-more-btn{

background:#e6e6fa;
color:#333;
border:none;
padding:12px 22px;
border-radius:8px;
font-weight:600;
cursor:pointer;
transition:0.3s;
box-shadow:0 4px 6px rgba(0,0,0,0.1);
}

button:hover,
.main-btn:hover,
.read-more-btn:hover{

background:#5d3fd3;
color:white;
transform:translateY(-3px);
box-shadow:0 8px 15px rgba(93,63,211,0.3);
}

/* =========================================
POST GRID
========================================= */

.post-grid{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:25px;
max-width:1200px;
margin:40px auto;
padding:0 20px;

}

/* =========================================
CARD DESIGN
========================================= */

.card{

background:#fff;
border-radius:12px;
overflow:hidden;
box-shadow:0 4px 12px rgba(0,0,0,0.08);
transition:0.3s;
display:flex;
flex-direction:column;

}

.card:hover{

transform:translateY(-8px);
box-shadow:0 12px 20px rgba(0,0,0,0.12);

}

.card-img{

width:100%;
height:200px;
object-fit:cover;
border-bottom:3px solid #e6e6fa;

}

.card-body{

padding:18px;
text-align:left;

}

.card-title{

font-size:20px;
margin-bottom:8px;
color:#333;

}

.card-text{

font-size:15px;
color:#666;

}

/* =========================================
PLAYER CARD GRID
========================================= */

.player-grid{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:25px;
max-width:1100px;
margin:40px auto;
padding:0 20px;

}

.player-card{

background:#fff;
border-radius:12px;
box-shadow:0 4px 10px rgba(0,0,0,0.08);
padding:20px;
transition:0.3s;

}

.player-card:hover{

transform:translateY(-6px);
box-shadow:0 10px 18px rgba(0,0,0,0.12);

}

.player-name{

font-size:20px;
font-weight:600;
margin-bottom:5px;

}

.player-role{

font-size:14px;
color:#777;
margin-bottom:10px;

}

.player-details{

display:none;
margin-top:10px;
font-size:15px;
color:#555;
line-height:1.5;

}

.player-card.active .player-details{

display:block;

}

/* =========================================
NAVIGATION MENU
========================================= */

#main-navigation a{

color:#e6e6fa;
font-size:16px;
}

#main-navigation a:hover{

background:#444;

}

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

footer{

background:#f5f5f5;
padding:40px 20px;
border-top:3px solid #e6e6fa;

}

.footer-content{

max-width:900px;
margin:auto;

}

.social-links a{

font-size:26px;
margin:0 12px;
color:#5d3fd3;
transition:0.3s;

}

.social-links a:hover{

color:#333;

}

.footer-bottom{

margin-top:20px;
padding-top:20px;
border-top:1px solid #ddd;
font-size:14px;

}

.footer-bottom a{

color:#333;
text-decoration:none;

}

.footer-bottom a:hover{

text-decoration:underline;

}

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

@media (max-width:768px){

h1{
font-size:26px;
}

h2{
font-size:22px;
}

p{
font-size:16px;
text-align:left;
}

.card-img{
height:170px;
}

}

@media (max-width:480px){

.post-grid{
grid-template-columns:1fr;
}

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

}