/* =====================================================
   SPORTACADEMY UI
   Modern Dark Theme
   Part 1
===================================================== */

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

:root{

    --bg:#050816;
    --bg2:#0d1328;
    --card:#121932;
    --card2:#182140;

    --blue:#3B82F6;
    --cyan:#22D3EE;
    --green:#10B981;
    --yellow:#FACC15;

    --text:#ffffff;
    --light:#c6d0e7;
    --border:rgba(255,255,255,.08);

    --radius:18px;

}

html{

    scroll-behavior:smooth;

}

body{

    background:linear-gradient(180deg,#050816,#081122,#050816);

    color:var(--text);

    font-family:'Poppins',sans-serif;

    overflow-x:hidden;

}


/* Scrollbar */

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#071020;

}

::-webkit-scrollbar-thumb{

background:linear-gradient(var(--blue),var(--cyan));

border-radius:30px;

}


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

nav{

width:100%;

height:90px;

display:flex;

justify-content:space-between;

align-items:center;

padding:0 7%;

position:fixed;

top:0;

left:0;

z-index:100;

background:rgba(4,10,22,.65);

backdrop-filter:blur(20px);

border-bottom:1px solid rgba(255,255,255,.05);

}

.logo{

display:flex;

align-items:center;

gap:14px;

}

.logo i{

font-size:34px;

color:var(--cyan);

}

.logo h2{

font-weight:700;

}

.logo span{

color:var(--cyan);

}

nav ul{

display:flex;

gap:35px;

list-style:none;

}

nav a{

text-decoration:none;

color:#dfe7ff;

transition:.3s;

font-size:15px;

}

nav a:hover{

color:var(--cyan);

}

.buttons{

display:flex;

gap:15px;

}

.outline{

height:45px;

padding:0 25px;

background:none;

border:1px solid var(--cyan);

color:white;

border-radius:50px;

cursor:pointer;

transition:.35s;

}

.outline:hover{

background:var(--cyan);

color:black;

}

.solid{

height:45px;

padding:0 28px;

border:none;

cursor:pointer;

border-radius:50px;

font-weight:600;

background:linear-gradient(135deg,var(--blue),var(--cyan));

color:white;

box-shadow:0 0 25px rgba(59,130,246,.35);

transition:.35s;

}

.solid:hover{

transform:translateY(-3px);

}


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

.hero{

min-height:100vh;

padding:170px 7% 100px;

display:flex;

justify-content:space-between;

align-items:center;

gap:70px;

}

.hero-left{

flex:1;

}

.small-title{

display:inline-block;

padding:8px 18px;

border-radius:40px;

background:rgba(34,211,238,.12);

color:var(--cyan);

font-size:13px;

letter-spacing:2px;

margin-bottom:20px;

}

.hero h1{

font-size:68px;

line-height:1.15;

font-weight:800;

margin-bottom:25px;

}

.hero h1 span{

background:linear-gradient(90deg,#4cc9ff,#22D3EE,#00f5d4);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.hero-desc{

font-size:18px;

line-height:1.8;

max-width:650px;

color:var(--light);

margin-bottom:40px;

}


/* =======================
SEARCH
======================= */

.search-box{

display:flex;

align-items:center;

background:rgba(255,255,255,.05);

backdrop-filter:blur(20px);

border:1px solid rgba(255,255,255,.08);

border-radius:20px;

padding:15px;

gap:15px;

max-width:820px;

}

.search-item{

flex:1;

display:flex;

align-items:center;

gap:14px;

padding:12px 20px;

background:#0f1732;

border-radius:14px;

}

.search-item i{

font-size:18px;

color:var(--cyan);

}

.search-item input{

background:none;

border:none;

outline:none;

color:white;

width:100%;

font-size:15px;

}

.search-item select{

background:none;

border:none;

outline:none;

width:100%;

color:white;

font-size:15px;

}

.search-box button{

padding:18px 30px;

border:none;

border-radius:15px;

cursor:pointer;

font-size:15px;

font-weight:600;

background:linear-gradient(135deg,#2563EB,#22D3EE);

color:white;

transition:.35s;

}

.search-box button:hover{

transform:translateY(-3px);

box-shadow:0 0 35px rgba(34,211,238,.45);

}


/* =====================
STATS
===================== */

.stats{

display:flex;

gap:70px;

margin-top:55px;

}

.stats h2{

font-size:38px;

color:var(--cyan);

}

.stats p{

color:#bcc7df;

margin-top:5px;

}


/* ====================
RIGHT HERO
==================== */

.hero-right{

flex:1;

display:flex;

justify-content:center;

align-items:center;

position:relative;

}

.circle{

position:absolute;

width:520px;

height:520px;

background:radial-gradient(circle,
rgba(59,130,246,.30),
transparent 70%);

filter:blur(40px);

border-radius:50%;

}

.hero-right img{

width:100%;

max-width:620px;

position:relative;

z-index:10;

animation:float 5s ease-in-out infinite;

filter:drop-shadow(0 40px 60px rgba(0,0,0,.55));

}


/* Animation */

@keyframes float{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-18px);

}

100%{

transform:translateY(0px);

}

}


/* ======================
SECTION TITLE
====================== */

section{

padding:90px 7%;

}

.section-title{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:40px;

}

.section-title h2{

font-size:42px;

}

.section-title a{

text-decoration:none;

color:var(--cyan);

font-weight:600;

}

/* ======================
CMS CARDS
====================== */

.cards,
.sports-grid,
.blog-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:28px;
}

.card,
.blog-card,
.sport-box,
.cta-card,
.ad-card,
.empty-state{
border:1px solid var(--border);
border-radius:var(--radius);
background:rgba(255,255,255,.055);
box-shadow:0 24px 70px rgba(0,0,0,.22);
}

.card{
overflow:hidden;
}

.card-media{
height:210px;
display:grid;
place-items:center;
background:linear-gradient(135deg,rgba(59,130,246,.32),rgba(34,211,238,.18));
}

.card-media i{
font-size:72px;
color:white;
filter:drop-shadow(0 18px 24px rgba(0,0,0,.35));
}

.green-card .card-media{background:linear-gradient(135deg,rgba(16,185,129,.35),rgba(34,211,238,.16));}
.yellow-card .card-media{background:linear-gradient(135deg,rgba(250,204,21,.35),rgba(59,130,246,.16));}
.cyan-card .card-media{background:linear-gradient(135deg,rgba(34,211,238,.36),rgba(16,185,129,.16));}
.pink-card .card-media{background:linear-gradient(135deg,rgba(236,72,153,.3),rgba(59,130,246,.16));}
.violet-card .card-media{background:linear-gradient(135deg,rgba(139,92,246,.34),rgba(34,211,238,.16));}

.card-body{
padding:24px;
}

.tag,
.ad-label,
.blog-card span{
display:inline-flex;
align-items:center;
border-radius:50px;
padding:7px 13px;
background:rgba(34,211,238,.12);
color:var(--cyan);
font-size:12px;
font-weight:700;
text-transform:uppercase;
}

.card h3,
.blog-card h3{
margin:16px 0 10px;
font-size:22px;
line-height:1.3;
}

.card p,
.blog-card p,
.ad-card p{
color:var(--light);
line-height:1.7;
}

.bottom{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
margin-top:22px;
color:var(--yellow);
font-size:14px;
font-weight:700;
}

.bottom a,
.ad-card a,
.cta-card a{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:42px;
padding:0 18px;
border:none;
border-radius:50px;
background:linear-gradient(135deg,var(--blue),var(--cyan));
color:white;
text-decoration:none;
font-size:14px;
font-weight:700;
}

/* ======================
SPORTS
====================== */

.sports h2{
font-size:42px;
margin-bottom:40px;
}

.sport-box{
display:block;
padding:34px 24px;
color:white;
text-align:center;
text-decoration:none;
transition:.35s;
}

.sport-box:hover{
transform:translateY(-8px);
border-color:rgba(34,211,238,.35);
}

.sport-box i{
font-size:42px;
color:var(--cyan);
margin-bottom:18px;
}

.sport-box h4{
font-size:21px;
margin-bottom:8px;
}

.sport-box p{
color:var(--light);
}

/* ======================
ADS AND BLOGS
====================== */

.ad-strip{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:24px;
padding-top:20px;
}

.ad-card{
display:flex;
align-items:center;
justify-content:space-between;
gap:24px;
padding:28px;
background:linear-gradient(135deg,rgba(59,130,246,.18),rgba(16,185,129,.14));
}

.ad-card h2{
margin:12px 0 6px;
font-size:28px;
}

.blog-card{
padding:28px;
}

.empty-state{
grid-column:1/-1;
padding:32px;
color:var(--light);
text-align:center;
}

/* ======================
CTA AND FOOTER
====================== */

.cta{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:28px;
}

.cta-card{
padding:42px;
}

.cta-card.blue{
background:linear-gradient(135deg,rgba(59,130,246,.28),rgba(34,211,238,.12));
}

.cta-card.green{
background:linear-gradient(135deg,rgba(16,185,129,.28),rgba(34,211,238,.10));
}

.cta-card h2{
font-size:32px;
margin-bottom:12px;
}

.cta-card p{
color:var(--light);
margin-bottom:26px;
}

footer{
padding:42px 7%;
border-top:1px solid var(--border);
background:rgba(4,10,22,.72);
text-align:center;
}

.footer-logo{
font-size:28px;
font-weight:800;
}

.footer-logo span{
color:var(--cyan);
}

.footer-links{
display:flex;
justify-content:center;
gap:24px;
margin:20px 0;
flex-wrap:wrap;
}

.footer-links a{
color:var(--light);
text-decoration:none;
}

footer p{
color:var(--light);
}

.hero-visual{
position:relative;
z-index:10;
display:grid;
place-items:center;
width:min(520px,80vw);
aspect-ratio:1;
border:1px solid rgba(255,255,255,.12);
border-radius:50%;
background:linear-gradient(135deg,rgba(59,130,246,.22),rgba(16,185,129,.12));
box-shadow:inset 0 0 80px rgba(34,211,238,.16),0 40px 90px rgba(0,0,0,.35);
animation:float 5s ease-in-out infinite;
}

.hero-visual i{
font-size:120px;
color:var(--yellow);
filter:drop-shadow(0 28px 35px rgba(0,0,0,.35));
}

.hero-visual span{
margin-top:18px;
font-size:20px;
font-weight:800;
color:var(--cyan);
}

.buttons a{
text-decoration:none;
display:inline-flex;
align-items:center;
justify-content:center;
}

@media(max-width:1050px){
nav{
height:auto;
gap:18px;
padding:18px 5%;
flex-wrap:wrap;
}

nav ul{
order:3;
width:100%;
justify-content:center;
gap:18px;
flex-wrap:wrap;
}

.hero{
padding-top:190px;
flex-direction:column;
align-items:flex-start;
}

.hero h1{
font-size:46px;
}

.cards,
.sports-grid,
.blog-grid,
.ad-strip,
.cta{
grid-template-columns:1fr;
}
}

@media(max-width:720px){
section{
padding:70px 5%;
}

.search-box,
.stats,
.ad-card{
flex-direction:column;
align-items:stretch;
}

.stats{
gap:24px;
}

.section-title{
align-items:flex-start;
gap:14px;
flex-direction:column;
}
}