/*=========================================
RSVM GIRLS PREMIER LEAGUE
STYLE.CSS
==========================================*/

:root{

--primary:#ff2d75;
--secondary:#8a2be2;
--gold:#ffc107;
--dark:#0d1028;
--dark2:#15193c;
--light:#ffffff;
--grey:#d8d8d8;

--gradient:linear-gradient(135deg,#ff2d75,#8a2be2);

}

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

body{

font-family:'Poppins',sans-serif;
background:var(--dark);
color:#fff;
overflow-x:hidden;

}

/* Scrollbar */

::-webkit-scrollbar{
width:10px;
}

::-webkit-scrollbar-track{
background:#111;
}

::-webkit-scrollbar-thumb{

background:var(--gradient);
border-radius:20px;

}

/* Links */

a{
text-decoration:none;
transition:.4s;
}

img{
max-width:100%;
display:block;
}

/*==============================
PRELOADER
==============================*/

#preloader{

position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:#05081d;
z-index:99999;

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

}

.loader{

width:70px;
height:70px;
border-radius:50%;
border:7px solid rgba(255,255,255,.15);
border-top:7px solid #ff2d75;

animation:spin 1s linear infinite;

}

@keyframes spin{

100%{
transform:rotate(360deg);
}

}

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

.glass-nav{

background:rgba(15,20,45,.65);
backdrop-filter:blur(15px);
padding:14px 0;
transition:.4s;
border-bottom:1px solid rgba(255,255,255,.08);

}

.navbar-brand{

font-size:26px;
font-weight:700;

display:flex;
align-items:center;
gap:12px;

}

.navbar-brand img{

height:52px;

}

.nav-link{

color:white!important;
margin-left:15px;
font-weight:500;
position:relative;

}

.nav-link:hover{

color:#ff2d75!important;

}

.nav-link::after{

content:"";
position:absolute;
left:0;
bottom:-6px;
width:0;
height:2px;
background:#ff2d75;

transition:.4s;

}

.nav-link:hover::after{

width:100%;

}

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

.hero{

min-height:100vh;

display:flex;
align-items:center;

position:relative;

background:

linear-gradient(rgba(8,10,30,.75),
rgba(8,10,30,.85)),

url("../images/bg.jpg");

background-size:cover;
background-position:center;

}

.overlay{

position:absolute;
inset:0;

background:

radial-gradient(circle at top right,
rgba(255,45,117,.20),
transparent 45%),

radial-gradient(circle at bottom left,
rgba(138,43,226,.25),
transparent 40%);

}

.hero .container{

position:relative;
z-index:5;

}

.hero h1{

font-size:68px;
font-weight:800;
line-height:1.1;

margin-bottom:20px;

}

.hero h1 span{

display:block;

color:#ff2d75;

}

.hero p{

font-size:18px;

line-height:1.8;

color:#e3e3e3;

margin-bottom:35px;

max-width:600px;

}

.hero-img{

width:520px;
animation:float 4s ease-in-out infinite;

}

@keyframes float{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-18px);

}

100%{

transform:translateY(0px);

}

}

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

.btn-pink{

background:var(--gradient);

color:white;

padding:13px 32px;

border-radius:40px;

font-weight:600;

border:none;

transition:.4s;

}

.btn-pink:hover{

transform:translateY(-4px);

box-shadow:0 12px 25px rgba(255,45,117,.45);

color:#fff;

}

.btn-outline-light{

border-radius:40px;

padding:13px 30px;

}

/*==============================
SECTION TITLES
==============================*/

.section-title{

font-size:42px;

font-weight:800;

margin-bottom:15px;

background:var(--gradient);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.section-subtitle{

color:#cfcfcf;

font-size:18px;

}

/*==============================
COUNTDOWN
==============================*/

.countdown-section{

padding:90px 0;

background:#111530;

text-align:center;

}

.countdown-section h2{

font-size:40px;

margin-bottom:45px;

font-weight:700;

}

#countdown{

display:flex;

justify-content:center;

gap:30px;

flex-wrap:wrap;

}

#countdown div{

width:140px;

height:140px;

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

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

border-radius:20px;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

transition:.4s;

}

#countdown div:hover{

transform:translateY(-8px);

background:var(--gradient);

}

#countdown h1{

font-size:52px;

font-weight:800;

}

#countdown span{

font-size:15px;

letter-spacing:1px;

text-transform:uppercase;

}
/*=========================================
FEATURED TEAMS
==========================================*/
/* TEAM POSTER */
.poster-card{

    border-radius:22px;
    overflow:hidden;

    background:#1b2145;

    border:3px solid transparent;

    transition:.4s;

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

}

.poster-card:hover{

    transform:translateY(-10px) scale(1.02);

}

.poster-img{

    width:100%;
    display:block;
    object-fit:contain;
    background:#111;

}

/* Team Colors */

.ruby{
    border-top:6px solid #ff004d;
}

.diamond{
    border-top:6px solid #00c8ff;
}

.nova{
    border-top:6px solid #8a2be2;
}

.scarlet{
    border-top:6px solid #ff4da6;
}

.sky{
    border-top:6px solid #4fc3ff;
}
/*=========================================
FIXTURE SECTION
==========================================*/
.fixture-item{

background:#1b2145;

border-left:6px solid #ff2d75;

border-radius:15px;

padding:15px 20px;

margin-bottom:15px;

display:flex;

align-items:center;

justify-content:space-between;

transition:.3s;

}

.fixture-item:hover{

transform:translateX(8px);

background:linear-gradient(90deg,#ff2d75,#8a2be2);

}

.match-no{

width:55px;

height:55px;

border-radius:50%;

background:#ff2d75;

display:flex;

align-items:center;

justify-content:center;

font-weight:bold;

font-size:18px;

}

.fixture-date{

width:130px;

font-weight:600;

}

.fixture-teams{

flex:1;

text-align:center;

font-size:20px;

font-weight:700;

}

.fixture-time{

width:90px;

text-align:right;

font-weight:bold;

color:#ffd54f;

}
/*=========================================
HIGHLIGHTS
==========================================*/

.highlights{

background:#0d1028;

padding:90px 0;

}

.highlight-card{

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

border-radius:20px;

padding:35px 20px;

transition:.4s;

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

}

.highlight-card:hover{

background:var(--gradient);

transform:translateY(-10px);

}

.highlight-card i{

font-size:48px;

margin-bottom:20px;

color:#ffc107;

}

.highlight-card h2{

font-size:48px;

font-weight:800;

margin-bottom:10px;

}

.highlight-card p{

font-size:18px;

margin:0;

}

/*=========================================
ABOUT LEAGUE
==========================================*/

.about-league{

padding:100px 0;

background:#15193c;

}

.about-league img{

width:90%;

margin:auto;

}

.league-list{

list-style:none;

padding:0;

margin-top:25px;

}

.league-list li{

margin-bottom:18px;

font-size:18px;

}

.league-list i{

color:#ffc107;

margin-right:10px;

}

/*=========================================
SOCIAL MEDIA
==========================================*/

.social-section{

padding:90px 0;

background:#0f1330;

text-align:center;

}

.social-icons{

margin-top:40px;

}

.social-icons a{

width:65px;

height:65px;

display:inline-flex;

align-items:center;

justify-content:center;

border-radius:50%;

margin:10px;

font-size:28px;

color:#fff;

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

transition:.4s;

}

.social-icons a:hover{

background:var(--gradient);

transform:translateY(-8px) rotate(360deg);

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

footer{

background:#080b1d;

padding:70px 0 20px;

border-top:2px solid rgba(255,255,255,.08);

}

footer h3,
footer h4{

font-weight:700;

margin-bottom:20px;

color:#fff;

}

footer p{

color:#cfcfcf;

line-height:1.8;

}

footer ul{

list-style:none;

padding:0;

}

footer ul li{

margin-bottom:12px;

}

footer ul li a{

color:#cfcfcf;

transition:.3s;

}

footer ul li a:hover{

color:#ff2d75;

padding-left:8px;

}

footer hr{

margin:40px 0 20px;

border-color:rgba(255,255,255,.08);

}

/*=========================================
UTILITY CLASSES
==========================================*/

.text-pink{

color:#ff2d75;

}

.bg-gradient{

background:var(--gradient);

}

.shadow-card{

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

}

.rounded-xl{

border-radius:25px;

}

.glass{

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

backdrop-filter:blur(12px);

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

}

/*=========================================
ANIMATIONS
==========================================*/

.fade-up{

animation:fadeUp .8s ease forwards;

}

.zoom{

animation:zoom .8s ease forwards;

}

@keyframes fadeUp{

0%{

opacity:0;

transform:translateY(40px);

}

100%{

opacity:1;

transform:translateY(0);

}

}

@keyframes zoom{

0%{

opacity:0;

transform:scale(.85);

}

100%{

opacity:1;

transform:scale(1);

}

}

/* Floating Background Glow */

body::before{

content:"";

position:fixed;

top:-250px;

left:-250px;

width:500px;

height:500px;

background:rgba(255,45,117,.08);

border-radius:50%;

filter:blur(120px);

z-index:-1;

}

body::after{

content:"";

position:fixed;

bottom:-250px;

right:-250px;

width:500px;

height:500px;

background:rgba(138,43,226,.08);

border-radius:50%;

filter:blur(120px);

z-index:-1;

}

/*=========================================
NAVBAR SCROLL EFFECT
==========================================*/

.navbar.scrolled{

background:#090d25;

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

padding:8px 0;

}

/*=========================================
HOVER EFFECTS
==========================================*/

img{

transition:.5s;

}

img:hover{

transform:scale(1.02);

}

.btn{

transition:.35s;

}

.btn:hover{

transform:translateY(-3px);

}

.card{

transition:.35s;

}

.card:hover{

transform:translateY(-8px);

}

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

@media(max-width:1200px){

.hero h1{

font-size:56px;

}

.hero-img{

width:420px;

}

}

@media(max-width:992px){

.hero{

text-align:center;

padding-top:120px;

padding-bottom:80px;

}

.hero h1{

font-size:48px;

}

.hero p{

margin:auto auto 30px;

}

.hero-img{

margin-top:40px;

width:360px;

}

.navbar-brand{

font-size:22px;

}

.section-title{

font-size:34px;

}

}

@media(max-width:768px){

.hero h1{

font-size:38px;

}

.hero p{

font-size:16px;

}

#countdown{

gap:15px;

}

#countdown div{

width:95px;

height:95px;

}

#countdown h1{

font-size:32px;

}

.team-card img{

height:260px;

}

.fixture-card{

padding:25px;

}

.highlight-card{

margin-bottom:20px;

}

.social-icons a{

width:55px;

height:55px;

font-size:22px;

}

footer{

text-align:center;

}

}

@media(max-width:576px){

.hero{

padding-top:110px;

}

.hero h1{

font-size:32px;

}

.hero-img{

width:280px;

}

.btn-pink{

padding:10px 24px;

font-size:15px;

}

.section-title{

font-size:28px;

}

.navbar-brand{

font-size:18px;

}

.navbar-brand img{

height:40px;

}

}
.fixture-item{
    display:flex;
    align-items:center;
    gap:20px;                 /* Space between all columns */
    background:#1b2145;
    border-left:5px solid #ff2d75;
    border-radius:15px;
    padding:15px 20px;
    margin-bottom:15px;
    transition:.3s;
}

.fixture-item:hover{
    transform:translateX(6px);
    background:linear-gradient(90deg,#ff2d75,#8a2be2);
}

.match-no{
    min-width:60px;
    width:60px;
    height:60px;
    border-radius:50%;
    background:#ff2d75;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    font-size:18px;
    flex-shrink:0;
}

.fixture-date{
    min-width:110px;
    width:110px;
    text-align:center;
    font-weight:600;
    line-height:1.4;
    flex-shrink:0;
}

.fixture-date small{
    display:block;
    color:#ccc;
    font-size:13px;
}

.fixture-teams{
    flex:1;
    text-align:center;
    font-size:19px;
    font-weight:700;
}

.fixture-time{
    min-width:90px;
    width:90px;
    text-align:right;
    font-weight:700;
    color:#ffd54f;
    flex-shrink:0;
}

.vs{
    color:#ffd54f;
    margin:0 12px;
    font-size:18px;
}
/* ==========================
   POINTS TABLE
========================== */

.points-table{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    background:#13182f;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 15px 35px rgba(0,0,0,.35);
}

/* Header */
.points-table thead{
    background:linear-gradient(90deg,#ff2d75,#7b2cbf);
}

.points-table thead th{
    color:#fff;
    padding:16px;
    text-align:center;
    border:none;
    font-size:15px;
    font-weight:700;
    letter-spacing:.5px;
}

/* Body */

.points-table tbody tr{
    background:#1c2347;
    transition:.3s;
}

.points-table tbody tr:nth-child(even){
    background:#242c59;
}

.points-table tbody tr:hover{
    background:#323d73;
}

.points-table td{
    color:#ffffff;
    padding:15px;
    text-align:center;
    border-bottom:1px solid rgba(255,255,255,.08);
}

/* Rank */

.points-table td:first-child{
    font-weight:700;
    color:#ffd54f;
}

/* Team */

.points-table td:nth-child(2){
    text-align:left;
    font-weight:600;
}

/* Top 2 Qualification */

.points-table tbody tr:nth-child(-n+2){
    border-left:5px solid #00e676;
    background:rgba(0,230,118,.12);
}

/* Last Team */

.points-table tbody tr:last-child{
    border-bottom:none;
}

/* Qualification Box */

.qualification{

display:inline-block;

margin-top:20px;

padding:12px 25px;

border-radius:40px;

background:linear-gradient(90deg,#00c853,#00e676);

color:#fff;

font-weight:600;

box-shadow:0 8px 20px rgba(0,230,118,.35);

}.points-table{
    width:100%;
    background:#1a1f45 !important;
    color:#fff !important;
    border-radius:20px;
    overflow:hidden;
    border-collapse:separate;
    border-spacing:0;
}

.points-table thead th{
    background:linear-gradient(90deg,#ff2d75,#8a2be2) !important;
    color:#fff !important;
    border:none;
    padding:16px;
}

.points-table tbody td{
    background:#1f2550 !important;
    color:#fff !important;
    border-color:rgba(255,255,255,.08) !important;
    padding:15px;
}

.points-table tbody tr:nth-child(even) td{
    background:#252d61 !important;
}

.points-table tbody tr:hover td{
    background:#303b78 !important;
}
.footer{
    background:linear-gradient(180deg,#121633,#0c1027);
    color:#fff;
}

.footer h4,
.footer h5{
    color:#fff;
    margin-bottom:18px;
    font-weight:700;
}

.footer p,
.footer small{
    color:#cfd4ff;
}

.footer a{
    color:#cfd4ff;
    text-decoration:none;
    transition:.3s;
    line-height:2;
}

.footer a:hover{
    color:#ff2d75;
}

.footer hr{
    border-color:rgba(255,255,255,.12);
}

.footer-social{
    display:flex;
    gap:15px;
    margin-top:15px;
}

.footer-social a{
    width:45px;
    height:45px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#1f2550;
    color:#fff;
    font-size:20px;
    transition:.3s;
}

.footer-social a:hover{
    background:linear-gradient(135deg,#ff2d75,#8a2be2);
    transform:translateY(-5px);
}

.social-section{
    background:linear-gradient(180deg,#181d42,#121633);
}

.social-icons{
    display:flex;
    justify-content:center;
    gap:20px;
}

.social-icons a{
    width:60px;
    height:60px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,#ff2d75,#8a2be2);
    color:#fff;
    font-size:24px;
    transition:.3s;
    box-shadow:0 10px 25px rgba(255,45,117,.35);
}

.social-icons a:hover{
    transform:translateY(-8px) scale(1.1);
}

/* =========================================================
   RSVM GIRLS PREMIER LEAGUE - MATCH RESULTS
   ========================================================= */

.results-section {
    background: #101433;
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}

.results-section .section-heading {
    color: #ffffff;
}

.results-section .section-heading h2 {
    color: #ffffff;
    margin-bottom: 10px;
}

.results-section .section-heading p {
    color: rgba(255, 255, 255, 0.75);
}


/* =========================
   RESULTS WRAPPER
   ========================= */

.results-section .results-wrapper {
    position: relative;
    width: 100%;
}


/* =========================
   RESULTS SLIDER
   ========================= */

.results-section .results-slider {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;

    gap: 25px;

    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;

    padding: 15px 60px 25px;

    scroll-behavior: smooth;

    scrollbar-width: none;

    box-sizing: border-box;
}

.results-section .results-slider::-webkit-scrollbar {
    display: none;
}


/* =========================
   RESULT CARD
   ========================= */

.results-section .result-card {
    display: flex !important;
    flex-direction: column !important;

    min-width: 320px !important;
    max-width: 320px !important;
    width: 320px !important;

    flex: 0 0 320px !important;

    min-height: 245px;

    box-sizing: border-box;

    padding: 22px;

    background: #1d2145 !important;

    border: 1px solid rgba(255, 255, 255, 0.12) !important;

    border-radius: 20px !important;

    color: #ffffff;

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

    transition: transform 0.3s ease,
                box-shadow 0.3s ease;
}

.results-section .result-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.35);
}


/* =========================
   MATCH NUMBER
   ========================= */

.results-section .result-card .top {
    margin-bottom: 15px;
}

.results-section .result-match-no {
    display: inline-block;

    background: #ff2d75 !important;
    color: #ffffff !important;

    padding: 7px 15px;

    border-radius: 20px;

    font-size: 14px;
    font-weight: 700;

    line-height: 1.2;
}


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

.results-section .result-team {
    display: block;

    padding: 13px 5px;

    border-bottom: 1px dashed rgba(255, 255, 255, 0.15);

    color: #ffffff !important;

    font-size: 18px;
    font-weight: 600;

    line-height: 1.4;
}

.results-section .result-team span {
    color: #ffffff !important;
}

.results-section .result-team:last-of-type {
    border-bottom: none;
}


/* =========================
   WINNER
   ========================= */

.results-section .winner {
    display: block;

    margin-top: auto;
    padding: 12px 10px;

    background: linear-gradient(
        90deg,
        #2563eb,
        #4481ff
    ) !important;

    border-radius: 10px;

    color: #ffffff !important;

    text-align: center;

    font-size: 14px;
    font-weight: 700;

    line-height: 1.4;
}


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

.results-section .nav-btn {
    position: absolute;

    top: 50%;
    transform: translateY(-50%);

    z-index: 10;

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

    width: 45px !important;
    height: 45px !important;

    padding: 0 !important;

    border: none !important;
    border-radius: 50% !important;

    background: #ff2d75 !important;

    color: #ffffff !important;

    font-size: 25px;
    font-weight: 700;

    line-height: 1;

    cursor: pointer;

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

    transition: 0.25s ease;
}

.results-section .nav-btn:hover {
    background: #ff4b8b !important;
    transform: translateY(-50%) scale(1.08);
}

.results-section .nav-btn.left {
    left: 5px !important;
}

.results-section .nav-btn.right {
    right: 5px !important;
}


/* =========================
   GRAND FINAL
   ========================= */

.results-section .final-card {
    border: 1px solid rgba(255, 215, 0, 0.35) !important;
}

.results-section .final-card .result-match-no {
    background: linear-gradient(
        90deg,
        #d4af37,
        #f5d76e
    ) !important;

    color: #111111 !important;
}

.results-section .champion {
    background: linear-gradient(
        90deg,
        #b8860b,
        #f5c542
    ) !important;

    color: #111111 !important;
}


/* =========================
   QUALIFIED BADGE
   ========================= */

.qualified {
    display: inline-block;

    font-size: 9px;
    font-weight: 700;

    color: #ffffff;

    background: #198754;

    padding: 2px 5px;

    border-radius: 3px;

    margin-left: 5px;

    vertical-align: middle;
}


/* =========================
   MOBILE
   ========================= */

@media (max-width: 768px) {

    .results-section {
        padding: 60px 0;
    }

    .results-section .results-slider {
        gap: 15px;
        padding: 15px 45px 25px;
    }

    .results-section .result-card {
        min-width: 280px !important;
        max-width: 280px !important;
        width: 280px !important;
        flex-basis: 280px !important;

        min-height: 230px;

        padding: 18px;
    }

    .results-section .result-team {
        font-size: 16px;
    }

    .results-section .nav-btn {
        width: 38px !important;
        height: 38px !important;

        font-size: 20px;
    }

    .results-section .nav-btn.left {
        left: 2px !important;
    }

    .results-section .nav-btn.right {
        right: 2px !important;
    }
}

/*====================================================
   RSVM PREMIER LEAGUE - CHAMPIONSHIP BANNER
====================================================*/

.champion-banner {
    width: 100%;
    min-height: 165px;
    position: relative;
    overflow: hidden;

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

    background:
        radial-gradient(circle at center,
            #293675 0%,
            #1a2454 38%,
            #101536 72%,
            #080c25 100%);

    border-top: 2px solid rgba(255, 215, 70, 0.5);
    border-bottom: 4px solid #f4c430;

    box-shadow:
        0 8px 30px rgba(0,0,0,0.45),
        inset 0 0 50px rgba(255,215,70,0.08);

    z-index: 20;
}

/* GOLD GLOW */

.champion-glow {
    position: absolute;
    width: 500px;
    height: 500px;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    background: radial-gradient(
        circle,
        rgba(255, 210, 50, 0.16) 0%,
        rgba(255, 210, 50, 0.06) 35%,
        transparent 70%
    );

    pointer-events: none;
}


/* DECORATIVE GOLD LINES */

.champion-banner::before,
.champion-banner::after {
    content: "";
    position: absolute;

    top: 50%;
    width: 22%;
    height: 2px;

    background: linear-gradient(
        90deg,
        transparent,
        #f4c430,
        #fff0a3
    );
}

.champion-banner::before {
    left: 0;
}

.champion-banner::after {
    right: 0;
    transform: rotate(180deg);
}


/* MAIN CONTENT */

.champion-inner {
    width: 100%;
    max-width: 1100px;

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

    gap: 45px;

    position: relative;
    z-index: 5;

    padding: 18px 20px;
}


/* TROPHIES */

.champion-trophy {
    font-size: 70px;

    line-height: 1;

    filter:
        drop-shadow(0 0 8px rgba(255,205,60,0.9))
        drop-shadow(0 0 20px rgba(255,180,30,0.5));

    animation: trophyFloat 2.5s ease-in-out infinite;
}

.right-trophy {
    animation-delay: 0.7s;
}


/* TEXT */

.champion-text {
    text-align: center;
}


/* TOP LINE */

.champion-topline {
    color: #ffd84d;

    font-size: 14px;

    font-weight: 800;

    letter-spacing: 5px;

    margin-bottom: 2px;

    text-shadow:
        0 0 8px rgba(255,210,60,0.45);
}


/* CHAMPIONS */

.champion-title {
    color: #ffffff;

    font-size: 28px;

    font-weight: 900;

    letter-spacing: 8px;

    line-height: 1;

    text-shadow:
        0 3px 10px rgba(0,0,0,0.6);
}


/* SKY FALCONS */

.champion-team {
    margin-top: 4px;

    font-size: 52px;

    font-weight: 1000;

    letter-spacing: 5px;

    line-height: 1.05;

    background: linear-gradient(
        180deg,
        #fff8c4 0%,
        #ffd83d 35%,
        #f3ad19 70%,
        #fff0a0 100%
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    background-clip: text;

    filter:
        drop-shadow(0 4px 5px rgba(0,0,0,0.7))
        drop-shadow(0 0 12px rgba(255,200,40,0.35));

    animation: championGlow 2.5s ease-in-out infinite;
}


/* SUBTITLE */

.champion-subtitle {
    margin-top: 8px;

    color: #ffffff;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 3px;

    opacity: 0.95;
}


/*====================================================
   ANIMATIONS
====================================================*/

@keyframes trophyFloat {

    0%,
    100% {
        transform: translateY(0) rotate(-2deg);
    }

    50% {
        transform: translateY(-8px) rotate(2deg);
    }
}


@keyframes championGlow {

    0%,
    100% {
        filter:
            drop-shadow(0 4px 5px rgba(0,0,0,0.7))
            drop-shadow(0 0 8px rgba(255,200,40,0.25));
    }

    50% {
        filter:
            drop-shadow(0 4px 5px rgba(0,0,0,0.7))
            drop-shadow(0 0 22px rgba(255,200,40,0.65));
    }
}


/*====================================================
   MOBILE
====================================================*/

@media (max-width: 768px) {

    .champion-banner {
        min-height: 145px;
    }

    .champion-inner {
        gap: 15px;
        padding: 15px 8px;
    }

    .champion-trophy {
        font-size: 42px;
    }

    .champion-topline {
        font-size: 9px;
        letter-spacing: 2px;
    }

    .champion-title {
        font-size: 20px;
        letter-spacing: 4px;
    }

    .champion-team {
        font-size: 32px;
        letter-spacing: 2px;
    }

    .champion-subtitle {
        font-size: 8px;
        letter-spacing: 1.5px;
    }
}


@media (max-width: 480px) {

    .champion-banner {
        min-height: 125px;
    }

    .champion-inner {
        gap: 8px;
    }

    .champion-trophy {
        font-size: 30px;
    }

    .champion-topline {
        font-size: 7px;
        letter-spacing: 1px;
    }

    .champion-title {
        font-size: 16px;
        letter-spacing: 3px;
    }

    .champion-team {
        font-size: 26px;
        letter-spacing: 1px;
    }

    .champion-subtitle {
        font-size: 7px;
        margin-top: 5px;
    }
}
/*=========================================
END OF STYLE.CSS
==========================================*/