/*==================================================
        RSVM PREMIER LEAGUE
        STYLE.CSS
        PART 1
==================================================*/

/*=========================
        GOOGLE FONT
=========================*/

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

/*=========================
        ROOT
=========================*/

:root{

--primary:#003366;
--secondary:#0056b3;
--gold:#ffc107;
--gold-dark:#ff9800;

--white:#ffffff;
--light:#f8fbff;
--grey:#6c757d;

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

--radius:18px;

}

/*=========================
        RESET
=========================*/

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

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

background:
linear-gradient(180deg,#edf5ff 0%,#ffffff 30%,#f5faff 70%,#dcefff 100%);

background-attachment:fixed;

overflow-x:hidden;

color:#222;

}

/*=========================
        LINKS
=========================*/

a{

text-decoration:none;

transition:.35s;

}

a:hover{

text-decoration:none;

}

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

section{

padding:80px 0;

}

.container{

max-width:1280px;

}

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

.section-title{

font-size:42px;

font-weight:700;

color:var(--primary);

position:relative;

display:inline-block;

margin-bottom:15px;

}

.section-title::after{

content:'';

position:absolute;

left:50%;

bottom:-12px;

transform:translateX(-50%);

width:90px;

height:5px;

background:var(--gold);

border-radius:20px;

}

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

.navbar{

background:linear-gradient(90deg,#003366,#0056b3);

padding:15px 0;

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

z-index:999;

}

.navbar-brand{

font-size:28px;

font-weight:700;

color:#fff!important;

letter-spacing:1px;

}

.navbar-nav .nav-link{

color:#fff!important;

font-size:16px;

font-weight:500;

margin-left:18px;

position:relative;

}

.navbar-nav .nav-link::after{

content:'';

position:absolute;

left:0;

bottom:-6px;

width:0;

height:3px;

background:#ffc107;

transition:.35s;

}

.navbar-nav .nav-link:hover::after{

width:100%;

}

.navbar-nav .nav-link:hover{

color:#ffd54f!important;

}

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

.hero-section{

min-height:700px;

display:flex;

align-items:center;

position:relative;

overflow:hidden;

background:

linear-gradient(rgba(0,40,90,.75),

rgba(0,40,90,.75)),

url("images/hero.jpg");

background-size:cover;

background-position:center;

background-repeat:no-repeat;

color:#fff;

}

.hero-section::before{

content:'';

position:absolute;

width:700px;

height:700px;

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

border-radius:50%;

top:-200px;

right:-180px;

}

.hero-section::after{

content:'';

position:absolute;

width:350px;

height:350px;

background:rgba(255,193,7,.10);

border-radius:50%;

left:-120px;

bottom:-120px;

}

.hero-section h1{

font-size:70px;

font-weight:800;

}

.hero-section h3{

font-weight:500;

margin-top:10px;

}

.hero-section p{

font-size:20px;

margin-top:25px;

line-height:1.8;

}

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

.hero-trophy{

font-size:170px;

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

filter:drop-shadow(0 15px 20px rgba(0,0,0,.35));

}

@keyframes float{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-18px);

}

100%{

transform:translateY(0);

}

}

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

.btn{

border-radius:50px;

padding:12px 30px;

font-weight:600;

transition:.35s;

}

.btn-warning{

background:linear-gradient(90deg,#ffc107,#ff9800);

border:none;

color:#000;

}

.btn-warning:hover{

transform:translateY(-4px);

box-shadow:0 12px 25px rgba(255,193,7,.35);

}

.btn-outline-light:hover{

background:#fff;

color:#003366;

}

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

.stat-card{

background:#fff;

padding:35px;

border-radius:18px;

text-align:center;

box-shadow:var(--shadow);

transition:.35s;

height:100%;

}

.stat-card:hover{

transform:translateY(-8px);

}

.stat-card h2{

font-size:52px;

font-weight:700;

color:#003366;

margin-bottom:10px;

}

.stat-card p{

font-size:18px;

font-weight:500;

color:#666;

}

/*=========================
        CHAMPION
=========================*/

.champion-banner{

background:

linear-gradient(135deg,#003366,#0056b3);

padding:50px;

border-radius:25px;

color:#fff;

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

}

.champion-logo{

font-size:90px;

text-align:center;

}

.champion-banner h2{

font-weight:700;

margin-bottom:15px;

}

.champion-banner p{

font-size:18px;

line-height:1.8;

}

.champion-banner h5{

margin-top:20px;

color:#ffd54f;

}

/*=========================
        TODAY MATCH
=========================*/

.today-match{

background:

linear-gradient(135deg,#ffffff,#eef7ff);

border-radius:20px;

padding:35px;

box-shadow:var(--shadow);

}

.today-team{

font-size:28px;

font-weight:700;

color:#003366;

}

.vs-badge{

width:80px;

height:80px;

background:

linear-gradient(135deg,#ffc107,#ff9800);

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:26px;

font-weight:700;

margin:auto;

color:#000;

box-shadow:0 10px 20px rgba(255,193,7,.4);

}

/*=========================
        UTILITIES
=========================*/

.shadow-card{

box-shadow:var(--shadow);

}

.rounded-card{

border-radius:20px;

}

.text-gold{

color:#ffc107;

}

.bg-light-blue{

background:#eef6ff;

}
/*==================================================
        RSVM PREMIER LEAGUE
        STYLE.CSS
        PART 2
        TEAM SECTION
==================================================*/

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

.team-section{
    background:linear-gradient(180deg,#f8fbff,#edf6ff);
    position:relative;
}

.team-section::before{
    content:'';
    position:absolute;
    width:300px;
    height:300px;
    background:rgba(0,91,187,.05);
    border-radius:50%;
    top:-120px;
    left:-120px;
}

.team-section::after{
    content:'';
    position:absolute;
    width:250px;
    height:250px;
    background:rgba(255,193,7,.08);
    border-radius:50%;
    bottom:-100px;
    right:-100px;
}

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

.team-card{

    border-radius:22px;

    overflow:hidden;

    color:#fff;

    transition:.35s;

    height:100%;

    position:relative;

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

}

.team-card:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 45px rgba(0,0,0,.18);

}

.team-card::before{

    content:'';

    position:absolute;

    top:-80px;

    right:-80px;

    width:180px;

    height:180px;

    border-radius:50%;

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

}

/*=========================
        HEADER
=========================*/

.team-header{

    padding:30px 20px 20px;

    text-align:center;

}

.team-logo{

    width:95px;

    height:95px;

    border-radius:50%;

    margin:auto;

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

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:46px;

    backdrop-filter:blur(10px);

    border:3px solid rgba(255,255,255,.35);

    margin-bottom:18px;

}

.team-name{

    font-size:28px;

    font-weight:700;

    margin-bottom:5px;

}

.team-subtitle{

    font-size:14px;

    opacity:.9;

}

/*=========================
        CAPTAIN
=========================*/

.captain-card{

    margin:20px;

    padding:15px;

    border-radius:15px;

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

    text-align:center;

    backdrop-filter:blur(10px);

}

.captain-card small{

    display:block;

    letter-spacing:1px;

    opacity:.9;

}

.captain-card h5{

    margin-top:8px;

    font-weight:700;

}

/*=========================
        PLAYERS
=========================*/

.players-grid{

    display:grid;

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

    gap:10px;

    padding:0 20px 25px;

}

.player{

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

    padding:10px;

    text-align:center;

    border-radius:10px;

    font-size:14px;

    transition:.30s;

    backdrop-filter:blur(10px);

}

.player:hover{

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

    transform:scale(1.04);

}

/*=========================
      SEASON 1 COLORS
=========================*/

.team-vk{

    background:linear-gradient(135deg,#d32f2f,#ef5350);

}

.team-c11{

    background:linear-gradient(135deg,#1565c0,#42a5f5);

}

.team-ww{

    background:linear-gradient(135deg,#8e24aa,#ce93d8);

}

.team-scorpion{

    background:linear-gradient(135deg,#fb8c00,#fdd835);

    color:#222;

}

.team-scorpion .captain-card,
.team-scorpion .player{

    color:#222;

}

.team-titans{

    background:linear-gradient(135deg,#00897b,#4db6ac);

}

.team-tiger{

    background:linear-gradient(135deg,#ef6c00,#ffb74d);

}

/*=========================
      SEASON 2 COLORS
=========================*/

.team-blaze{

    background:linear-gradient(135deg,#ff5722,#ff9800);

}

.team-crown{

    background:linear-gradient(135deg,#7b1fa2,#ba68c8);

}

.team-thunder{

    background:linear-gradient(135deg,#1e88e5,#64b5f6);

}

.team-falcons{

    background:linear-gradient(135deg,#00897b,#26c6da);

}

.team-wolves{

    background:linear-gradient(135deg,#455a64,#90a4ae);

}

.team-storm{

    background:linear-gradient(135deg,#283593,#5c6bc0);

}

.team-dragons{

    background:linear-gradient(135deg,#c62828,#ef5350);

}

.team-guardians{

    background:linear-gradient(135deg,#546e7a,#b0bec5);

}

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

.team-footer{

    display:flex;

    justify-content:space-around;

    padding:15px;

    margin-top:10px;

    border-top:1px solid rgba(255,255,255,.25);

}

.team-footer h5{

    margin:0;

    font-weight:700;

}

.team-footer span{

    font-size:13px;

    opacity:.9;

}

/*=========================
      BADGES
=========================*/

.team-badge{

    position:absolute;

    top:18px;

    right:18px;

    background:#fff;

    color:#003366;

    padding:6px 14px;

    border-radius:30px;

    font-size:12px;

    font-weight:700;

}

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

@media(max-width:992px){

.team-name{

font-size:24px;

}

}

@media(max-width:768px){

.players-grid{

grid-template-columns:1fr;

}

.team-logo{

width:80px;

height:80px;

font-size:38px;

}

.team-name{

font-size:22px;

}

.team-card{

margin-bottom:25px;

}

}
/*==================================================
        RSVM PREMIER LEAGUE
        STYLE.CSS
        PART 3
        FIXTURES • KNOCKOUT • POINTS TABLE
==================================================*/

/*================================
        FIXTURE SECTION
================================*/

.fixture-section{
    background:#f8fbff;
}

.fixture-card{

    background:#fff;

    border-radius:20px;

    overflow:hidden;

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

    transition:.35s;

}

.fixture-card:hover{

    transform:translateY(-5px);

}

/*================================
        TABLE
================================*/

.fixture-card table{

    margin:0;

}

.fixture-card thead{

    background:linear-gradient(90deg,#003366,#0056b3);

    color:#fff;

}

.fixture-card thead th{

    border:none;

    font-size:15px;

    padding:18px;

    text-align:center;

}

.fixture-card tbody td{

    padding:16px;

    text-align:center;

    vertical-align:middle;

    border-color:#edf1f5;

    font-size:15px;

}

.fixture-card tbody tr{

    transition:.30s;

}

.fixture-card tbody tr:hover{

    background:#eef7ff;

}

/*================================
      STATUS BADGES
================================*/

.status-completed{

    background:#28a745;

    color:#fff;

    padding:6px 14px;

    border-radius:20px;

    font-size:13px;

    font-weight:600;

}

.status-today{

    background:#ffc107;

    color:#222;

    padding:6px 14px;

    border-radius:20px;

    font-size:13px;

    font-weight:700;

}

.status-upcoming{

    background:#6c757d;

    color:#fff;

    padding:6px 14px;

    border-radius:20px;

    font-size:13px;

}

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

.match-no{

    width:42px;

    height:42px;

    background:#003366;

    color:#fff;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:700;

    margin:auto;

}

/*================================
        FIXTURE ICON
================================*/

.fixture-team{

    font-weight:600;

    color:#003366;

}

/*================================
        KNOCKOUT
================================*/

.knockout-card{

    background:#fff;

    border-radius:20px;

    padding:30px;

    text-align:center;

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

    transition:.35s;

    height:100%;

}

.knockout-card:hover{

    transform:translateY(-6px);

}

.knockout-card h4{

    font-weight:700;

    margin-bottom:20px;

}

.knockout-card h5{

    font-size:22px;

    font-weight:700;

    color:#003366;

}

.knockout-card p{

    color:#666;

    margin-top:15px;

}

/*================================
        QUALIFIER
================================*/

.qualifier-card{

    border-top:6px solid #28a745;

}

/*================================
        ELIMINATOR
================================*/

.eliminator-card{

    border-top:6px solid #ff9800;

}

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

.final-card{

    background:

    linear-gradient(135deg,#ffc107,#ff9800);

    color:#222;

}

.final-card h3{

    font-weight:800;

}

.final-card h5{

    color:#000;

}

/*================================
        POINTS TABLE
================================*/

.points-card{

    background:#fff;

    border-radius:20px;

    overflow:hidden;

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

}

.points-card table{

    margin:0;

}

.points-card thead{

    background:linear-gradient(90deg,#003366,#0056b3);

    color:#fff;

}

.points-card thead th{

    padding:18px;

    border:none;

    text-align:center;

}

.points-card tbody td{

    padding:15px;

    text-align:center;

    vertical-align:middle;

}

.points-card tbody tr{

    transition:.30s;

}

.points-card tbody tr:hover{

    background:#eef7ff;

}

/*================================
      QUALIFIED TEAMS
================================*/

.qualifier{

    background:#d4edda;

    font-weight:600;

}

.qualifier:hover{

    background:#c3e6cb !important;

}

/*================================
      ELIMINATOR
================================*/

.eliminator{

    background:#fff3cd;

    font-weight:600;

}

.eliminator:hover{

    background:#ffe8a1 !important;

}

/*================================
        ELIMINATED
================================*/

.eliminated{

    background:#f8d7da;

    color:#666;

}

/*================================
        TOP POSITION
================================*/

.position-one{

    background:#ffd700;

    color:#000;

    font-weight:700;

    border-radius:50%;

    padding:6px 10px;

}

.position-two{

    background:#c0c0c0;

    color:#000;

    font-weight:700;

    border-radius:50%;

    padding:6px 10px;

}

.position-three{

    background:#cd7f32;

    color:#fff;

    font-weight:700;

    border-radius:50%;

    padding:6px 10px;

}

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

.team-icon{

    font-size:22px;

    margin-right:8px;

}

/*================================
        POINTS
================================*/

.points{

    font-weight:700;

    color:#003366;

    font-size:18px;

}

/*================================
          NRR
================================*/

.positive{

    color:#28a745;

    font-weight:700;

}

.negative{

    color:#dc3545;

    font-weight:700;

}

/*================================
        TABLE LEGEND
================================*/

.legend-box{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:20px;

    margin-top:20px;

}

.legend-item{

    display:flex;

    align-items:center;

    font-size:14px;

}

.legend-color{

    width:18px;

    height:18px;

    border-radius:4px;

    margin-right:8px;

}

.legend-green{

    background:#d4edda;

}

.legend-yellow{

    background:#fff3cd;

}

.legend-red{

    background:#f8d7da;

}

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

@media(max-width:992px){

.fixture-card{

overflow-x:auto;

}

}

@media(max-width:768px){

.fixture-card table{

min-width:850px;

}

.points-card table{

min-width:750px;

}

.knockout-card{

margin-bottom:25px;

}

}
/*==================================================
        RSVM PREMIER LEAGUE
        STYLE.CSS
        PART 4
        RESULTS • LEADERS • GALLERY • FOOTER
==================================================*/

/*================================
        MATCH RESULTS
================================*/

#results{
    background:#f8fbff;
}

.result-card{

    background:#fff;

    border-radius:20px;

    padding:25px;

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

    transition:.35s;

    height:100%;

    border-left:6px solid #003366;

}

.result-card:hover{

    transform:translateY(-8px);

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

}

.match-status{

    display:inline-block;

    padding:6px 14px;

    border-radius:20px;

    background:#28a745;

    color:#fff;

    font-size:13px;

    font-weight:600;

    margin-bottom:18px;

}

.result-card h5{

    font-weight:700;

    color:#003366;

}

.result-card h4{

    font-size:30px;

    font-weight:700;

    color:#222;

}

.result-card hr{

    margin:15px 0;

}

.result-text{

    margin-top:18px;

    font-weight:700;

    color:#28a745;

}

/*================================
        LEADER SECTION
================================*/

.leader-card{

    background:#fff;

    border-radius:20px;

    padding:35px;

    text-align:center;

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

    transition:.35s;

    height:100%;

}

.leader-card:hover{

    transform:translateY(-8px);

}

.leader-icon{

    font-size:70px;

    margin-bottom:20px;

}

.leader-card h4{

    font-weight:700;

    margin-bottom:10px;

}

.leader-card h5{

    color:#003366;

    font-weight:700;

}

.orange-cap{

    border-top:8px solid #ff9800;

}

.purple-cap{

    border-top:8px solid #8e24aa;

}

.mvp{

    border-top:8px solid #28a745;

}

/*================================
        GALLERY
================================*/

#gallery{

    background:#eef7ff;

}

.gallery-item{

    overflow:hidden;

    border-radius:18px;

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

    transition:.35s;

    background:#fff;

}

.gallery-item:hover{

    transform:translateY(-8px);

}

.gallery-item img{

    width:100%;

    height:260px;

    object-fit:cover;

    transition:.45s;

}

.gallery-item:hover img{

    transform:scale(1.08);

}

/*================================
        CHAMPION
================================*/

.champion-banner{

    position:relative;

    overflow:hidden;

}

.champion-banner::before{

    content:'🏆';

    position:absolute;

    right:40px;

    top:20px;

    font-size:120px;

    opacity:.10;

}

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

.footer{

    background:linear-gradient(90deg,#003366,#0056b3);

    color:#fff;

    padding:70px 0 25px;

}

.footer h4{

    font-weight:700;

    margin-bottom:20px;

}

.footer h5{

    font-weight:600;

    margin-bottom:18px;

}

.footer p{

    color:#dbe7ff;

    line-height:1.8;

}

.footer a{

    display:block;

    color:#dbe7ff;

    margin-bottom:10px;

    transition:.30s;

}

.footer a:hover{

    color:#ffc107;

    padding-left:8px;

}

.footer hr{

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

    margin:35px 0 20px;

}

.footer .text-center{

    color:#dbe7ff;

}

/*================================
        SOCIAL ICONS
================================*/

.social-icons{

    display:flex;

    gap:12px;

}

.social-icons a{

    width:45px;

    height:45px;

    border-radius:50%;

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

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    font-size:18px;

}

.social-icons a:hover{

    background:#ffc107;

    color:#003366;

}

/*================================
        CELEBRATION POPUP
================================*/

.celebration-overlay{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:100%;

    background:rgba(0,0,0,.75);

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:9999;

}

.celebration-box{

    background:#fff;

    padding:45px;

    border-radius:25px;

    text-align:center;

    max-width:550px;

    width:90%;

    animation:popup .6s ease;

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

}

.trophy{

    font-size:100px;

    animation:float 3s infinite;

}

.close-btn{

    background:#ffc107;

    border:none;

    padding:14px 35px;

    border-radius:50px;

    font-weight:700;

    margin-top:25px;

    transition:.35s;

}

.close-btn:hover{

    background:#ff9800;

    transform:translateY(-4px);

}

/*================================
        POPUP ANIMATION
================================*/

@keyframes popup{

0%{

opacity:0;

transform:scale(.7);

}

100%{

opacity:1;

transform:scale(1);

}

}

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

@media(max-width:992px){

.gallery-item img{

height:220px;

}

}

@media(max-width:768px){

.result-card{

margin-bottom:25px;

}

.leader-card{

margin-bottom:25px;

}

.gallery-item img{

height:200px;

}

.footer{

text-align:center;

}

.social-icons{

justify-content:center;

}

.celebration-box{

padding:30px;

}

.trophy{

font-size:75px;

}

}
/*==================================================
        RSVM PREMIER LEAGUE
        STYLE.CSS
        PART 5
        ANIMATIONS • UTILITIES • RESPONSIVE
==================================================*/

/*====================================
            FADE ANIMATION
====================================*/

.fade-up{
    opacity:0;
    transform:translateY(40px);
    animation:fadeUp .8s forwards;
}

@keyframes fadeUp{

0%{
opacity:0;
transform:translateY(40px);
}

100%{
opacity:1;
transform:translateY(0);
}

}

/*====================================
          FADE LEFT
====================================*/

.fade-left{

opacity:0;

transform:translateX(-60px);

animation:fadeLeft .8s forwards;

}

@keyframes fadeLeft{

0%{

opacity:0;

transform:translateX(-60px);

}

100%{

opacity:1;

transform:translateX(0);

}

}

/*====================================
          FADE RIGHT
====================================*/

.fade-right{

opacity:0;

transform:translateX(60px);

animation:fadeRight .8s forwards;

}

@keyframes fadeRight{

0%{

opacity:0;

transform:translateX(60px);

}

100%{

opacity:1;

transform:translateX(0);

}

}

/*====================================
            ZOOM
====================================*/

.zoom{

animation:zoomIn .6s;

}

@keyframes zoomIn{

0%{

transform:scale(.8);

opacity:0;

}

100%{

transform:scale(1);

opacity:1;

}

}

/*====================================
        FLOAT
====================================*/

.float{

animation:floatItem 3s infinite ease-in-out;

}

@keyframes floatItem{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-10px);

}

100%{

transform:translateY(0);

}

}

/*====================================
        CONFETTI
====================================*/

.confetti{

position:fixed;

width:12px;

height:12px;

top:-30px;

z-index:99999;

animation:confettiFall linear infinite;

}

@keyframes confettiFall{

0%{

transform:translateY(0) rotate(0);

}

100%{

transform:translateY(120vh) rotate(720deg);

}

}

/*====================================
            LOADER
====================================*/

.loader{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:#fff;

display:flex;

justify-content:center;

align-items:center;

z-index:999999;

}

.loader-circle{

width:80px;

height:80px;

border:8px solid #ddd;

border-top:8px solid #003366;

border-radius:50%;

animation:spin 1s linear infinite;

}

@keyframes spin{

100%{

transform:rotate(360deg);

}

}

/*====================================
        BACK TO TOP
====================================*/

.back-to-top{

position:fixed;

right:25px;

bottom:25px;

width:55px;

height:55px;

background:#003366;

color:#fff;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

font-size:22px;

cursor:pointer;

box-shadow:0 10px 20px rgba(0,0,0,.2);

transition:.35s;

z-index:999;

}

.back-to-top:hover{

background:#ffc107;

color:#003366;

transform:translateY(-5px);

}

/*====================================
        SCROLLBAR
====================================*/

::-webkit-scrollbar{

width:10px;

height:10px;

}

::-webkit-scrollbar-track{

background:#eef4ff;

}

::-webkit-scrollbar-thumb{

background:#0056b3;

border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:#003366;

}

/*====================================
        TEXT COLORS
====================================*/

.text-primary{

color:#003366 !important;

}

.text-gold{

color:#ffc107 !important;

}

.text-success{

color:#28a745 !important;

}

.text-danger{

color:#dc3545 !important;

}

/*====================================
        BACKGROUNDS
====================================*/

.bg-primary-light{

background:#eef5ff;

}

.bg-gold{

background:#ffc107;

}

.bg-white{

background:#fff;

}

/*====================================
        SHADOWS
====================================*/

.shadow-sm{

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

}

.shadow-md{

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

}

.shadow-lg{

box-shadow:0 20px 40px rgba(0,0,0,.18);

}

/*====================================
        BORDER RADIUS
====================================*/

.rounded-10{

border-radius:10px;

}

.rounded-15{

border-radius:15px;

}

.rounded-20{

border-radius:20px;

}

.rounded-30{

border-radius:30px;

}

/*====================================
        HOVER SCALE
====================================*/

.scale{

transition:.35s;

}

.scale:hover{

transform:scale(1.05);

}

/*====================================
        IMAGE UTILITIES
====================================*/

.img-cover{

width:100%;

height:100%;

object-fit:cover;

}

.img-round{

border-radius:50%;

}

/*====================================
        SPACING
====================================*/

.mt-80{

margin-top:80px;

}

.mb-80{

margin-bottom:80px;

}

.py-80{

padding-top:80px;

padding-bottom:80px;

}

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

@media(max-width:992px){

.hero-section{

text-align:center;

padding:80px 0;

}

.hero-section h1{

font-size:48px;

}

.hero-trophy{

font-size:120px;

margin-top:40px;

}

}

@media(max-width:768px){

.section-title{

font-size:30px;

}

.hero-section{

min-height:auto;

}

.hero-section h1{

font-size:38px;

}

.hero-section h3{

font-size:22px;

}

.hero-section p{

font-size:17px;

}

.hero-trophy{

font-size:90px;

}

.stat-card{

margin-bottom:20px;

}

.today-team{

font-size:22px;

}

.vs-badge{

width:60px;

height:60px;

font-size:18px;

}

.champion-banner{

padding:30px;

text-align:center;

}

.champion-logo{

font-size:70px;

margin-bottom:20px;

}

.back-to-top{

right:15px;

bottom:15px;

width:45px;

height:45px;

font-size:18px;

}

}

@media(max-width:576px){

.hero-section h1{

font-size:32px;

}

.section-title{

font-size:26px;

}

.btn{

width:100%;

margin-bottom:12px;

}

.navbar-brand{

font-size:22px;

}

}

/*====================================
        PRINT
====================================*/

@media print{

.navbar,
.footer,
.back-to-top,
.celebration-overlay{

display:none !important;

}

body{

background:#fff;

}

}

/*==================================================
            END OF STYLE.CSS
==================================================*/

/* Top 2 - Qualifier 1 */
.top2{
    background:#fff7d6 !important;
    border-left:6px solid #ffc107;
    font-weight:700;
}

.top2:hover{
    background:#ffefb3 !important;
}

/* 3rd & 4th - Eliminator */
.top4{
    background:#e8f4ff !important;
    border-left:6px solid #0d6efd;
    font-weight:700;
}

.top4:hover{
    background:#d8ebff !important;
}
/* ===============================
   MATCH RESULTS SCROLL
==================================*/

.scroll-wrapper{
    position:relative;
    display:flex;
    align-items:center;
}

.results-scroll{
    display:flex;
    gap:20px;
    overflow-x:auto;
    scroll-behavior:smooth;
    scrollbar-width:none;
    -ms-overflow-style:none;
    width:100%;
    padding:10px 0;
    scroll-snap-type:x proximity;
    scroll-padding-left:0;
}

.results-scroll::-webkit-scrollbar{
    display:none;
}

.result-card{
    min-width:300px;
    background:#fff;
    border-radius:15px;
    padding:20px;
    min-width:300px;
    flex-shrink:0;
    transition:.3s;
    flex-shrink:0;
    border-top:5px solid #0d6efd;
}

.result-card:hover{
    transform:translateY(-8px);
}

.match-status{
    display:inline-block;
    background:#0d6efd;
    color:#fff;
    padding:5px 12px;
    border-radius:30px;
    font-size:13px;
    font-weight:700;
    margin-bottom:12px;
}

.match-status.champion{
    background:#ffc107;
    color:#000;
}

.team-score{
    font-size:16px;
    font-weight:600;
    padding:8px 0;
    border-bottom:1px dashed #ddd;
}

.result-text{
    margin-top:15px;
    font-weight:700;
    color:#198754;
}

.scroll-btn{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:45px;
    height:45px;
    border:none;
    border-radius:50%;
    background:#0d6efd;
    color:#fff;
    font-size:22px;
    cursor:pointer;
    z-index:10;
    box-shadow:0 5px 15px rgba(0,0,0,.2);
}

.scroll-btn:hover{
    background:#084298;
}

.scroll-btn.left{
    left:0;
}

.scroll-btn.right{
    right:0;
}
/* Champion Card */

.champion-card{
    min-width:320px;
    text-align:center;
    background:linear-gradient(135deg,#fff8dc,#ffe082);
    border:3px solid #ffc107;
    box-shadow:0 15px 35px rgba(255,193,7,.35);
}

.champion-trophy{
    font-size:70px;
    animation:float 2s ease-in-out infinite;
}

.champion-team{
    background:#ffc107;
    color:#000;
    border-radius:10px;
    padding:10px;
    font-weight:700;
    margin-top:10px;
}

.runner-team{
    background:#f5f5f5;
    color:#333;
    border-radius:10px;
    padding:10px;
    font-weight:600;
    margin-top:10px;
}

@keyframes float{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-8px);
    }
}
.team-image-card{
    overflow:hidden;
    border-radius:18px;
    background:#111;
    transition:.35s;
    box-shadow:0 10px 25px rgba(0,0,0,.25);
}

.team-image-card img{
    width:100%;
    display:block;
    transition:.4s;
}

.team-image-card:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 40px rgba(0,0,0,.45);
}

.team-image-card:hover img{
    transform:scale(1.03);
}
.social-links{
    display:flex;
    justify-content:center;
    gap:25px;
    flex-wrap:wrap;
    margin-top:15px;
}

.social-links a{
    color:#fff;
    text-decoration:none;
    font-weight:600;
    transition:.3s;
}

.social-links a:hover{
    color:#ffc107;
}

.social-links i{
    margin-right:6px;
}
.footer .sponsor-name{
    color:#ffc107;
    font-size:1.3rem;
    font-weight:700;
    margin-bottom:5px;
}

.footer h5{
    margin-bottom:15px;
}

.footer a{
    color:#ddd;
    text-decoration:none;
    transition:.3s;
}

.footer a:hover{
    color:#ffc107;
}
.hero-title{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    line-height:1.1;
    margin-bottom:20px;
}

.school-name{
    display:block;
    font-size:4rem;
    font-weight:900;
    color:#ffffff;
    letter-spacing:2px;
    text-transform:uppercase;
}

.league-name{
    display:block;
    margin-top:8px;
    font-size:2.2rem;
    font-weight:700;
    color:#FFD700;
    letter-spacing:4px;
    text-transform:uppercase;
}

/* Tablet */
@media (max-width:992px){
    .school-name{
        font-size:3rem;
    }

    .league-name{
        font-size:1.8rem;
    }
}

/* Mobile */
@media (max-width:576px){
    .school-name{
        font-size:1.8rem;
        letter-spacing:1px;
    }

    .league-name{
        font-size:1.2rem;
        letter-spacing:2px;
    }
}