/* =====================================
   KOSHI VOICE SPORTS LIVE
   NEW STYLE.CSS PART 01
===================================== */


*{

margin:0;

padding:0;

box-sizing:border-box;

}


body{

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

background:#f5f7fb;

color:#222;

}



/* HEADER */

.header{

background:linear-gradient(135deg,#004aad,#0b57d0);

color:#ffffff;

padding:20px;

box-shadow:0 4px 12px rgba(0,0,0,.15);

}


.logo h1{

font-size:32px;

margin-bottom:6px;

}


.logo p{

font-size:15px;

opacity:.9;

}



/* MAIN DASHBOARD */

.dashboard{

max-width:1400px;

margin:25px auto;

display:grid;

grid-template-columns:3fr 1fr;

gap:25px;

padding:0 15px;

}


.content{

width:100%;

}



/* SECTION TITLE */

.section-title{

margin-bottom:18px;

border-left:5px solid #0b57d0;

padding-left:12px;

}


.section-title h2{

font-size:24px;

color:#0b57d0;

}



/* SPORTS GRID */

.sports-grid{

display:grid;

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

gap:20px;

margin-bottom:35px;

}



/* SPORTS CARD */

.sports-card{

background:#ffffff;

padding:22px;

border-radius:15px;

border-top:5px solid #0b57d0;

box-shadow:0 4px 15px rgba(0,0,0,.08);

transition:.3s;

}


.sports-card:hover{

transform:translateY(-6px);

box-shadow:0 10px 25px rgba(0,0,0,.15);

}


.sports-card span{

display:block;

font-size:15px;

color:#666;

margin-bottom:10px;

}


.sports-card h3{

font-size:26px;

color:#111;

margin-bottom:10px;

}


.sports-card small{

color:#888;

font-size:14px;

}



/* SPORTS HUB */

.sports-links{

display:grid;

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

gap:20px;

margin:25px 0 35px;

}


.sports-links a{

height:80px;

display:flex;

align-items:center;

justify-content:center;

background:#fff;

border-radius:14px;

text-decoration:none;

font-size:18px;

font-weight:bold;

color:#0b57d0;

border:1px solid #e5e7eb;

box-shadow:0 4px 12px rgba(0,0,0,.08);

transition:.3s;

}


.sports-links a:hover{

background:#0b57d0;

color:#fff;

transform:translateY(-5px);

}
/* =====================================
   KOSHI VOICE SPORTS LIVE
   NEW STYLE.CSS PART 02
===================================== */


/* SIDEBAR */

.sidebar{

display:flex;

flex-direction:column;

gap:18px;

}



.side-title{

background:#0b57d0;

color:#ffffff;

padding:14px;

border-radius:10px;

text-align:center;

}


.side-title h2{

font-size:22px;

}



/* SIDEBAR CARD */

.side-card{

background:#ffffff;

padding:18px;

border-radius:12px;

box-shadow:0 3px 12px rgba(0,0,0,.08);

transition:.3s;

}


.side-card:hover{

transform:translateY(-4px);

box-shadow:0 8px 18px rgba(0,0,0,.15);

}


.side-card h3{

font-size:18px;

color:#0b57d0;

margin-bottom:10px;

}


.side-card p{

font-size:15px;

color:#555;

line-height:1.6;

}



/* RESPONSIVE TABLET */

@media(max-width:992px){

.dashboard{

grid-template-columns:1fr;

}


.sidebar{

margin-top:20px;

}

}



/* MOBILE */

@media(max-width:768px){


.logo h1{

font-size:26px;

}


.section-title h2{

font-size:21px;

}


.sports-grid{

grid-template-columns:1fr;

}


.sports-card h3{

font-size:22px;

}


.sports-links{

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

}


.sports-links a{

height:70px;

font-size:15px;

}


.side-title h2{

font-size:20px;

}

}



/* SMALL MOBILE */

@media(max-width:480px){


.header{

padding:16px;

}


.logo p{

font-size:13px;

}


.sports-links{

grid-template-columns:1fr;

}


.sports-card{

padding:18px;

}


.side-card{

padding:15px;

}

}



/* SCROLL BAR */

::-webkit-scrollbar{

width:8px;

}


::-webkit-scrollbar-thumb{

background:#0b57d0;

border-radius:10px;

}


::-webkit-scrollbar-track{

background:#ececec;

}