/* =====================================================
   LIBERIA COUNTY MEET HUB
   VERSION 2.0
   PART 1
===================================================== */

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:Arial, Helvetica, sans-serif;
    background:#f4f6f9;
    color:#333;
    line-height:1.7;
}

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

a{
    text-decoration:none;
}

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

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

.header{

    background:#002868;
    color:white;

    position:sticky;
    top:0;
    z-index:999;

    border-bottom:4px solid #d62828;

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

}

/* top section */

.logo-title{

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

    gap:15px;

    padding:20px;

}

.logo{

    width:55px;
    height:55px;
    object-fit:contain;

}

.logo-title h1{

    font-size:2rem;
    font-weight:bold;
    color:white;
    letter-spacing:.5px;

}

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

nav{

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

    gap:10px;

    background:#01357f;

    padding:14px;

}

nav a{

    color:white;

    padding:10px 18px;

    border-radius:8px;

    font-weight:bold;

    transition:.3s;

}

nav a:hover{

    background:#d62828;

    color:white;

}

nav a.active{

    background:#FFD700;

    color:#002868;

}

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

.hero{

    min-height:72vh;

    background-image:url("images/hero-banner.jpg");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    display:flex;

    justify-content:center;

    align-items:center;

    position:relative;

}

.hero::before {
    display: none;
}

.hero-overlay{

    position:relative;

    z-index:5;

    text-align:center;

    color:white;

    max-width:850px;

    padding:40px;

}

.hero-overlay h2{

    font-size:3rem;

    margin-bottom:20px;

    text-shadow:2px 2px 8px black;

}

.hero-overlay p{

    font-size:1.2rem;

    line-height:1.8;

}

/* =====================================================
   QUICK FACTS
===================================================== */

.facts{

    width:90%;

    max-width:1200px;

    margin:60px auto;

    display:grid;

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

    gap:25px;

}

.card{

    background:white;

    padding:30px;

    text-align:center;

    border-radius:15px;

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

    transition:.3s;

    border-top:5px solid #002868;

}

.card:hover{

    transform:translateY(-8px);

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

}

.card h3{

    color:#002868;

    margin:15px 0;

    font-size:30px;

}

.card p{

    color:#555;

}

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

.about{

    width:90%;

    max-width:1100px;

    margin:70px auto;

    background:white;

    border-radius:20px;

    padding:45px;

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

}

.about h2{

    text-align:center;

    color:#002868;

    margin-bottom:25px;

    font-size:2rem;

}

.about p{

    margin-bottom:18px;

    font-size:17px;

    color:#444;

    text-align:justify;

}

/* =====================================================
   FEATURED COUNTIES
===================================================== */

.featured-counties{

    width:90%;

    max-width:1200px;

    margin:70px auto;

}

.featured-counties h2{

    text-align:center;

    color:#002868;

    margin-bottom:35px;

    font-size:2rem;

}

.county-grid{

    display:grid;

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

    gap:30px;

}

.county-card{

    background:white;

    border-radius:18px;

    overflow:hidden;

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

    transition:.3s;

}

.county-card:hover{

    transform:translateY(-10px);

} /* =====================================================
   COUNTY CARD DETAILS
===================================================== */

.county-card img{

    width:100%;

    height:250px;

    object-fit:cover;

}


.county-card h3{

    color:#002868;

    font-size:24px;

    padding:20px 20px 5px;

}


.county-card p{

    padding:0 20px 25px;

    color:#555;

}


/* =====================================================
   LATEST NEWS
===================================================== */

.latest-news{

    width:90%;

    max-width:1100px;

    margin:70px auto;

    background:white;

    padding:40px;

    border-radius:20px;

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

}


.latest-news h2{

    text-align:center;

    color:#002868;

    font-size:2rem;

    margin-bottom:30px;

}


.news-card{

    background:#f4f6f9;

    padding:25px;

    border-left:5px solid #d62828;

    border-radius:10px;

}


.news-card h3{

    color:#002868;

    margin-bottom:15px;

}


.news-card p{

    color:#444;

}


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

.btn{

    display:inline-block;

    background:#d62828;

    color:white;

    padding:12px 28px;

    border-radius:30px;

    font-weight:bold;

    margin-top:20px;

    transition:.3s;

}


.btn:hover{

    background:#002868;

    transform:translateY(-3px);

}


/* =====================================================
   PAGE HERO (ABOUT / FIXTURES / OTHER PAGES)
===================================================== */

.page-hero{

    background:white;

    text-align:center;

    padding:50px 20px;

    border-bottom:4px solid #d62828;

}


.page-hero h2{

    color:#002868;

    font-size:2.5rem;

    margin-bottom:15px;

}


.page-hero p{

    max-width:800px;

    margin:auto;

    color:#555;

    font-size:18px;

}


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

.fixtures-section{

    width:90%;

    max-width:1100px;

    margin:60px auto;

}


.fixtures-section h2{

    text-align:center;

    color:#002868;

    margin-bottom:40px;

}


.fixture-card{

    background:white;

    display:flex;

    gap:25px;

    padding:25px;

    margin-bottom:25px;

    border-radius:18px;

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

    transition:.3s;

}


.fixture-card:hover{

    transform:translateY(-7px);

}


.fixture-date{

    background:#d62828;

    color:white;

    padding:20px;

    min-width:150px;

    border-radius:12px;

    text-align:center;

    font-weight:bold;

}


.fixture-details h3{

    color:#002868;

    margin-bottom:10px;

}


.status{

    display:inline-block;

    padding:8px 18px;

    border-radius:20px;

    margin-top:15px;

    font-weight:bold;

}


.upcoming{

    background:#FFD700;

    color:#002868;

}


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

.footer{

    background:#002868;

    color:white;

    text-align:center;

    padding:30px 20px;

    margin-top:50px;

}


.footer p{

    margin:8px;

}


/* =====================================================
   MOBILE NAVIGATION PREPARATION
===================================================== */

.menu-toggle{

    display:none;

    background:none;

    border:none;

    color:white;

    font-size:30px;

    cursor:pointer;

}


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

@media(max-width:992px){

    .facts{

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

    }


    .hero-overlay h2{

        font-size:2.3rem;

    }

}


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

@media(max-width:768px){


    .logo-title{

        flex-direction:column;

        text-align:center;

    }


    .logo-title h1{

        font-size:1.5rem;

    }


    .menu-toggle{

        display:block;

        position:absolute;

        right:20px;

        top:20px;

    }


    nav{

        flex-direction:column;

    }


    nav a{

        width:100%;

        text-align:center;

    }


    .hero{

        min-height:60vh;

    }


    .hero-overlay{

        padding:25px;

    }


    .hero-overlay h2{

        font-size:1.8rem;

    }


    .hero-overlay p{

        font-size:1rem;

    }


    .facts{

        grid-template-columns:1fr;

    }


    .about{

        padding:25px;

    }


    .about h2{

        font-size:1.6rem;

    }


    .county-grid{

        grid-template-columns:1fr;

    }


    .fixture-card{

        flex-direction:column;

    }


    .fixture-date{

        width:100%;

    }

}


/* =====================================================
   SMALL PHONES
===================================================== */

@media(max-width:480px){


    .hero-overlay h2{

        font-size:1.5rem;

    }


    .card h3{

        font-size:25px;

    }


    .page-hero h2{

        font-size:1.8rem;

    }

}
/* ==========================================
   MOBILE NAVIGATION
========================================== */

.menu-toggle{

    display:none;
    font-size:30px;
    cursor:pointer;
    color:white;
    margin-left:auto;

}

.hidden{

    opacity:0;
    transform:translateY(40px);
    transition:all .8s ease;

}

.visible{

    opacity:1;
    transform:translateY(0);

}

@media (max-width:768px){

    .logo-title{

        justify-content:space-between;
        padding:15px 20px;

    }

    .menu-toggle{

        display:block;

    }

    nav{

        display:none;
        flex-direction:column;
        width:100%;
        gap:0;
        background:#002868;

    }

    nav.show{

        display:flex;

    }

    nav a{

        width:100%;
        text-align:center;
        padding:15px;

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

    }

}
/* ===========================
   COUNTIES PAGE
=========================== */

.counties-page{

    max-width:1200px;
    margin:60px auto;
    padding:20px;

}

.county-info{

    padding:20px;

}

.county-info h3{

    color:#002868;
    margin-bottom:15px;

}

.county-info p{

    line-height:1.7;
    color:#555;

}

.profile-btn{

    display:inline-block;
    margin-top:20px;
    padding:12px 24px;
    background:#FFD700;
    color:#002868;
    text-decoration:none;
    font-weight:bold;
    border-radius:10px;
    transition:.3s;

}

.profile-btn:hover{

    background:#d62828;
    color:white;

}
/* ==========================================
   COUNTIES PAGE
========================================== */

.counties-section{
    max-width:1200px;
    margin:50px auto;
    padding:20px;
}

.counties-title{
    text-align:center;
    color:#002868;
    font-size:36px;
    margin-bottom:10px;
}

.counties-subtitle{
    text-align:center;
    color:#666;
    margin-bottom:40px;
    font-size:17px;
}

.county-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:30px;
}

.county-card{
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 8px 25px rgba(0,0,0,.12);
    transition:.35s;
}

.county-card:hover{
    transform:translateY(-8px);
    box-shadow:0 15px 35px rgba(0,0,0,.18);
}

.county-card img{
    width:100%;
    height:220px;
    object-fit:cover;
}

.county-content{
    padding:22px;
}

.county-content h2{
    color:#002868;
    margin-top:0;
}

.county-content p{
    line-height:1.7;
    color:#555;
}

.profile-btn{
    display:inline-block;
    margin-top:15px;
    padding:12px 24px;
    background:#FFD700;
    color:#002868;
    text-decoration:none;
    font-weight:bold;
    border-radius:30px;
    transition:.3s;
}

.profile-btn:hover{
    background:#002868;
    color:white;
}
/* ==========================================
   BONG COUNTY INTRO CARD
========================================== */

.county-intro{
    max-width:1100px;
    margin:50px auto;
    padding:20px;
}

.intro-card{
    background:#ffffff;
    border-left:8px solid #FFD700;
    border-radius:18px;
    padding:35px;
    box-shadow:0 10px 25px rgba(0,0,0,.12);
    transition:.3s;
}

.intro-card:hover{
    transform:translateY(-5px);
    box-shadow:0 15px 35px rgba(0,0,0,.18);
}

.intro-card h2{
    color:#002868;
    font-size:32px;
    margin-top:0;
    margin-bottom:20px;
}

.intro-card p{
    font-size:17px;
    line-height:1.9;
    color:#444;
    margin-bottom:18px;
}

.intro-card strong{
    color:#d62828;
}

@media(max-width:768px){

.intro-card{

padding:25px;

}

.intro-card h2{

font-size:26px;

}

.intro-card p{

font-size:16px;

}

}
/* ==========================================
   BONG COUNTY FOOTBALL TEAMS
========================================== */

.team-section{
    max-width:1200px;
    margin:70px auto;
    padding:20px;
}

.team-section h2{
    text-align:center;
    color:#002868;
    font-size:34px;
    margin-bottom:15px;
}

.team-intro{
    max-width:850px;
    margin:0 auto 40px;
    text-align:center;
    color:#555;
    line-height:1.8;
    font-size:17px;
}

.team-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:30px;
}

.team-card{
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 10px 25px rgba(0,0,0,.12);
    transition:.3s;
}

.team-card:hover{
    transform:translateY(-8px);
    box-shadow:0 15px 35px rgba(0,0,0,.18);
}

.team-card img{
    width:100%;
    height:240px;
    object-fit:cover;
}

.team-content{
    padding:25px;
}

.team-content h3{
    color:#002868;
    margin-top:0;
}

.team-content p{
    color:#555;
    line-height:1.8;
}

@media(max-width:768px){

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

.team-section h2{
font-size:28px;
}

}
/* ==========================================
   NEWS PAGE
========================================== */

.news-hero{

  background:url("images/hero-banner-1.jpg") center center/cover no-repeat;
   width:100%;
   max-height:420px;
   object-fit: cover ;
   object-position:center;
    display:block;
}

.news-overlay{

    background:rgba(0,0,0,.65);
    color:#fff;
    text-align:center;
    padding:35px;
    border-radius:18px;
    max-width:750px;
    margin:20px;
}

.news-overlay h1{

    margin:0 0 15px;
    font-size:40px;

}

.news-overlay p{

    font-size:18px;
    line-height:1.8;

}


/* ==========================================
   HEADLINES
========================================== */

.headline-section{

    max-width:1200px;
    margin:50px auto;
    padding:20px;

}

.headline-section h2{

    text-align:center;
    color:#002868;
    margin-bottom:25px;

}

.headline-box{

    background:#fff;
    border-left:6px solid #d62828;
    border-radius:15px;
    box-shadow:0 8px 20px rgba(0,0,0,.12);
    padding:30px;

}

.headline-box p{

    margin:15px 0;
    font-size:17px;
    line-height:1.7;

}


/* ==========================================
   FEATURED STORY
========================================== */

.featured-story{

    max-width:1200px;
    margin:60px auto;
    padding:20px;

}

.featured-story h2{

    text-align:center;
    color:#002868;
    margin-bottom:35px;

}

.story-card{

    display:flex;
    gap:30px;
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 8px 20px rgba(0,0,0,.12);

}

.story-card img{

    width:45%;
    object-fit:cover;

}

.story-text{

    padding:30px;
    display:flex;
    flex-direction:column;
    justify-content:center;

}

.story-text h3{

    color:#002868;
    margin-top:0;

}

.story-text p{

    line-height:1.8;

}


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

.news-gallery{

    max-width:1200px;
    margin:60px auto;
    padding:20px;

}

.news-gallery h2{

    text-align:center;
    color:#002868;
    margin-bottom:35px;

}

.gallery-grid{

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:30px;

}

.gallery-card{

    background:#fff;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 8px 20px rgba(0,0,0,.12);
    transition:.3s;

}

.gallery-card:hover{

    transform:translateY(-8px);

}

.gallery-card img{

    width:100%;
    height:220px;
    object-fit:cover;
    display:block;

}

.gallery-card h3{

    color:#002868;
    padding:20px 20px 10px;

}

.gallery-card p{

    padding:0 20px 20px;
    line-height:1.7;

}


/* ==========================================
   UPDATES
========================================== */

.updates-section{

    max-width:1000px;
    margin:60px auto;
    padding:20px;

}

.updates-section h2{

    text-align:center;
    color:#002868;
    margin-bottom:25px;

}

.update-card{

    background:#fff;
    padding:30px;
    border-radius:18px;
    box-shadow:0 8px 20px rgba(0,0,0,.12);

}

.update-card p{

    margin:15px 0;
    font-size:17px;

}


/* ==========================================
   ANNOUNCEMENTS
========================================== */

.announcement-section{

    max-width:1000px;
    margin:60px auto;
    padding:20px;

}

.announcement-section h2{

    text-align:center;
    color:#002868;
    margin-bottom:25px;

}

.announcement-card{

    background:#fff;
    padding:30px;
    border-radius:18px;
    box-shadow:0 8px 20px rgba(0,0,0,.12);

}

.announcement-card p{

    line-height:1.8;
    text-align:center;

}


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

@media(max-width:768px){

.news-hero{

    height:45vh;

}

.news-overlay{

    padding:25px;

}

.news-overlay h1{

    font-size:28px;

}

.news-overlay p{

    font-size:16px;

}

.story-card{

    flex-direction:column;

}

.story-card img{

    width:100%;
    height:250px;

}

.gallery-grid{

    grid-template-columns:1fr;

}

.headline-box,
.update-card,
.announcement-card{

    padding:20px;

}

}
/* ================================
   NEWS PAGE DESIGN
================================ */


/* HERO SECTION */

.news-hero {

    position: relative;
    width: 100%;
    height: 450px;
    overflow: hidden;
    margin-top: 20px;

}


.news-hero img {

    width: 100%;
    height: 100%;
    object-fit: cover;

}



.hero-text {

    position: absolute;
    bottom: 0;
    left: 0;

    width: 100%;

    padding: 30px;

    background: rgba(0,0,0,0.55);

    color: white;

}



.hero-text h2 {

    font-size: 38px;
    margin-bottom: 10px;

}



.hero-text p {

    font-size: 18px;

}




/* NEWS AREA */


.news-container {

    width: 90%;
    max-width: 1200px;

    margin: 40px auto;

}



.news-container > h2 {

    text-align: center;

    font-size: 32px;

    margin-bottom: 30px;

}




/* NEWS GRID */


.news-grid {


    display: grid;

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

    gap: 25px;


}




/* NEWS CARD */


.news-card {


    background: white;

    border-radius: 15px;

    overflow: hidden;

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


}



.news-card img {


    width: 100%;

    height: 250px;

    object-fit: cover;


}




.news-card h3 {


    padding: 15px;

    font-size: 22px;


}




.news-card p {


    padding: 0 15px 20px;

    line-height: 1.6;

    color: #444;


}





/* MOBILE RESPONSIVE */


@media(max-width:900px){


.news-grid {


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


}



.news-hero {


    height:350px;


}


.hero-text h2 {


    font-size:28px;


}



}




@media(max-width:600px){


.news-grid {


    grid-template-columns:1fr;


}



.news-hero {


    height:300px;


}



.hero-text {


    padding:20px;


}



.hero-text h2 {


    font-size:24px;


}



.hero-text p {


    font-size:15px;


}



.news-card img {


    height:220px;


}


} /* ==========================
   MOBILE NAVIGATION
========================== */

.menu-toggle{
    display:none;
    font-size:30px;
    cursor:pointer;
    color:white;
}

@media (max-width:768px){

    .menu-toggle{
        display:block;
    }

    #navMenu{
        display:none;
        flex-direction:column;
        width:100%;
        background:#002868;
        position:absolute;
        top:80px;
        left:0;
        padding:15px 0;
        z-index:999;
    }

    #navMenu.show{
        display:flex;
    }

    #navMenu a{
        padding:15px;
        text-align:center;
        color:white;
        text-decoration:none;
        border-top:1px solid rgba(255,255,255,.15);
    }

} 
/* ==========================================
   NEWS STATUS SYSTEM
========================================== */

.news-heading {
    max-width: 900px;
    margin: 50px auto 30px;
    padding: 0 20px;
    text-align: center;
}

.news-heading h2 {
    color: #002868;
    font-size: 36px;
    margin-bottom: 12px;
}

.news-heading p {
    color: #555;
    font-size: 17px;
    line-height: 1.7;
}


/* STATUS MENU */

.news-status {
    max-width: 1000px;
    margin: 30px auto 60px;
    padding: 0 20px;

    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

.status {
    display: block;
    text-align: center;
    padding: 15px 10px;

    border-radius: 10px;

    text-decoration: none;
    font-weight: 700;

    background: white;

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

    transition: .3s;
}

.status:hover {
    transform: translateY(-4px);
}


/* STATUS COLORS */

.status.official {
    border-top: 4px solid #16803c;
    color: #16803c;
}

.status.confirmed {
    border-top: 4px solid #1769aa;
    color: #1769aa;
}

.status.reported {
    border-top: 4px solid #d9a400;
    color: #9a7500;
}

.status.unverified {
    border-top: 4px solid #d62828;
    color: #d62828;
}


/* NEWS CATEGORY */

.news-category {
    max-width: 1200px;
    margin: 0 auto 80px;
    padding: 0 20px;
}


/* CATEGORY HEADER */

.category-title {
    display: flex;
    align-items: center;
    gap: 15px;

    margin-bottom: 25px;
    padding: 18px 20px;

    background: white;

    border-radius: 14px;

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

.category-title > span {
    font-size: 28px;
}

.category-title h2 {
    margin: 0 0 5px;
    color: #002868;
}

.category-title p {
    margin: 0;
    color: #666;
    font-size: 14px;
}


/* CATEGORY BORDER */

.official-title {
    border-left: 5px solid #16803c;
}

.confirmed-title {
    border-left: 5px solid #1769aa;
}

.reported-title {
    border-left: 5px solid #d9a400;
}

.unverified-title {
    border-left: 5px solid #d62828;
}


/* NEWS GRID */

.news-category .news-grid {
    max-width: none;
    margin: 0;

    display: grid;

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

    gap: 25px;

    padding: 0;
}


/* NEWS CARD */

.news-category .news-card {
    background: white;

    border-radius: 16px;

    overflow: hidden;

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

    transition: .3s;
}

.news-category .news-card:hover {
    transform: translateY(-7px);
}


/* CARD IMAGE */

.news-category .news-card img {
    width: 100%;
    height: 230px;

    object-fit: cover;

    display: block;
}


/* CARD CONTENT */

.news-card-content {
    padding: 20px;
}


/* NEWS LABEL */

.news-label {
    display: inline-block;

    padding: 5px 10px;

    border-radius: 20px;

    font-size: 11px;

    font-weight: 800;

    margin-bottom: 10px;
}

.official-label {
    background: #e7f7ed;
    color: #16803c;
}

.confirmed-label {
    background: #e8f2fb;
    color: #1769aa;
}

.reported-label {
    background: #fff7d6;
    color: #9a7500;
}

.unverified-label {
    background: #fde8e8;
    color: #d62828;
}


/* CARD TEXT */

.news-card-content h3 {
    color: #002868;

    margin: 5px 0 10px;

    font-size: 21px;
}

.news-card-content p {
    color: #555;

    line-height: 1.7;

    margin: 0;
}

.news-card-content small {
    display: block;

    margin-top: 15px;

    color: #777;

    font-size: 12px;
}


/* ==========================================
   MOBILE NEWS DESIGN
========================================== */

@media (max-width: 768px) {

    .news-heading {
        margin-top: 35px;
    }

    .news-heading h2 {
        font-size: 28px;
    }

    .news-heading p {
        font-size: 15px;
    }


    .news-status {
        grid-template-columns: repeat(2, 1fr);

        gap: 12px;

        margin-bottom: 40px;
    }


    .status {
        font-size: 14px;
        padding: 13px 8px;
    }


    .news-category {
        padding: 0 15px;
        margin-bottom: 60px;
    }


    .category-title {
        padding: 15px;

        gap: 10px;
    }


    .category-title h2 {
        font-size: 21px;
    }


    .category-title p {
        font-size: 13px;
    }


    .news-category .news-grid {
        grid-template-columns: 1fr;
    }


    .news-category .news-card img {
        height: 220px;
    }

}


/* SMALL PHONES */

@media (max-width: 450px) {

    .news-status {
        grid-template-columns: 1fr;
    }

    .category-title > span {
        font-size: 22px;
    }

    .category-title h2 {
        font-size: 19px;
    }

}
/* ==========================================
   PAGE BACK BUTTON
========================================== */

.page-back {
    max-width: 1200px;
    margin: 20px auto 0;
    padding: 0 20px;
}

.page-back a {
    display: inline-block;

    padding: 10px 18px;

    background: #002868;
    color: white;

    text-decoration: none;

    border-radius: 8px;

    font-weight: 600;

    transition: 0.3s;
}

.page-back a:hover {
    transform: translateX(-4px);
    background: #d62828;
}


/* MOBILE */

@media (max-width: 768px) {

    .page-back {
        margin-top: 15px;
        padding: 0 15px;
    }

    .page-back a {
        font-size: 14px;
        padding: 9px 14px;
    }

}
/* ==========================================
   COUNTIES PAGE
========================================== */

.counties-header {
    max-width: 900px;
    margin: 35px auto 20px;
    padding: 0 20px;
    text-align: center;
}

.counties-header h2 {
    color: #002868;
    font-size: 36px;
    margin-bottom: 12px;
}

.counties-header p {
    color: #555;
    font-size: 17px;
    line-height: 1.7;
}


/* SEARCH BAR */

.county-search {
    max-width: 550px;
    margin: 25px auto 10px;
}

.county-search input {
    width: 100%;
    padding: 14px 18px;

    border: 2px solid #ddd;
    border-radius: 30px;

    font-size: 16px;

    outline: none;

    box-sizing: border-box;

    transition: 0.3s;
}

.county-search input:focus {
    border-color: #002868;
    box-shadow: 0 0 0 3px rgba(0,40,104,0.10);
}


/* COUNTY GRID */

.county-section {
    max-width: 1250px;
    margin: 30px auto 70px;
    padding: 0 20px;
}

.county-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 25px;
}


/* COUNTY CARD */

.county-card {
    background: #ffffff;

    border-radius: 16px;

    overflow: hidden;

    box-shadow:
        0 6px 18px rgba(0,0,0,0.10);

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

    display: flex;

    flex-direction: column;
}


.county-card:hover {

    transform: translateY(-6px);

    box-shadow:
        0 12px 28px rgba(0,0,0,0.15);

}


/* CARD IMAGE */

.county-card > img {

    width: 100%;

    height: 190px;

    object-fit: cover;

    display: block;

}


/* CARD CONTENT */

.county-card-content {

    padding: 20px;

    display: flex;

    flex-direction: column;

    flex: 1;

}


/* BADGE */

.county-badge {

    display: inline-block;

    width: fit-content;

    background: #f5c400;

    color: #111;

    padding: 5px 10px;

    border-radius: 20px;

    font-size: 11px;

    font-weight: 700;

    margin-bottom: 10px;
}


/* COUNTY NAME */

.county-card h3 {

    color: #002868;

    font-size: 22px;

    margin: 0 0 10px;

}


/* DESCRIPTION */

.county-card p {

    color: #555;

    font-size: 14px;

    line-height: 1.6;

    margin: 0 0 18px;

}


/* PROFILE BUTTON */

.county-button {

    margin-top: auto;

    display: inline-block;

    width: fit-content;

    background: #002868;

    color: white;

    padding: 9px 15px;

    border-radius: 7px;

    text-decoration: none;

    font-size: 14px;

    font-weight: 600;

    transition: 0.3s;

}


.county-button:hover {

    background: #d62828;

    transform: translateX(4px);

}


/* ==========================================
   TABLET
========================================== */

@media (max-width: 950px) {

    .county-grid {

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

        gap: 20px;

    }

}


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

@media (max-width: 650px) {

    .counties-header {

        margin-top: 25px;

    }

    .counties-header h2 {

        font-size: 28px;

    }

    .counties-header p {

        font-size: 15px;

    }

    .county-section {

        padding: 0 15px;

    }

    .county-grid {

        grid-template-columns: 1fr;

        gap: 20px;

    }

    .county-card > img {

        height: 210px;

    }

    .county-card-content {

        padding: 18px;

    }

    .county-card h3 {

        font-size: 21px;

    }

}
/* ==================================================
   HOMEPAGE HERO IMAGE SLIDESHOW
   ================================================== */

.hero {
    position: relative;
    height: 430px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #111;
}


/* HERO IMAGE CONTAINER */

.hero-images {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}


/* INDIVIDUAL HERO IMAGES */

.hero-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;

    opacity: 0;

    transition: opacity 1.2s ease-in-out;
}


/* CURRENT IMAGE */

.hero-image.active {
    opacity: 1;
}


/* DARK OVERLAY */

.hero-overlay {
    position: absolute;
    inset: 0;

    background: rgba(0, 0, 0, 0.48);

    z-index: 2;
}


/* HERO TEXT */

.hero-content {
    position: relative;

    z-index: 3;

    width: 90%;
    max-width: 850px;

    text-align: center;

    color: white;
}


.hero-content h2 {
    font-size: 2.2rem;

    margin-bottom: 15px;

    line-height: 1.2;
}


.hero-content p {
    font-size: 1rem;

    line-height: 1.7;

    max-width: 700px;

    margin: 0 auto;
}


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

@media (max-width: 768px) {

    .hero {
        height: 390px;
    }


    .hero-content {
        width: 88%;
    }


    .hero-content h2 {
        font-size: 1.7rem;
    }


    .hero-content p {
        font-size: 0.92rem;

        line-height: 1.6;
    }

}
/* =========================================================
   ABOUT PAGE STYLES
   Liberia County Meet Hub LR
   ========================================================= */


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

.about-hero {
    min-height: 55vh;
    background:
        linear-gradient(rgba(0, 40, 104, 0.82), rgba(0, 40, 104, 0.82)),
        url("images/hero-banner.jpg");
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 70px 20px;
    border-bottom: 5px solid #d62828;
}

.about-hero-content {
    max-width: 850px;
    color: white;
}

.about-label {
    display: inline-block;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 2px;
    color: #FFD700;
    margin-bottom: 18px;
}

.about-hero h2 {
    font-size: 3.2rem;
    margin-bottom: 20px;
    color: white;
    text-shadow: 2px 3px 8px rgba(0, 0, 0, 0.35);
}

.about-hero p {
    max-width: 750px;
    margin: auto;
    font-size: 1.15rem;
    line-height: 1.8;
    color: white;
}


/* =========================
   MAIN CONTAINER
========================= */

.about-container {
    width: 92%;
    max-width: 1150px;
    margin: 70px auto;
}


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

.about-section {
    margin-bottom: 80px;
}

.about-section-heading {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
}

.about-number {
    min-width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #002868;
    color: white;
    font-size: 18px;
    font-weight: bold;
    border-radius: 12px;
    box-shadow: 0 8px 18px rgba(0, 40, 104, 0.18);
}

.about-section-heading h2 {
    color: #002868;
    font-size: 2rem;
    margin-bottom: 4px;
}

.about-section-heading p {
    color: #777;
    font-size: 15px;
}


/* =========================
   HISTORY
========================= */

.history-card {
    background: white;
    padding: 40px;
    border-radius: 18px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.07);
    border-left: 5px solid #002868;
}

.history-card p {
    color: #444;
    font-size: 17px;
    line-height: 1.8;
    margin-bottom: 20px;
}

.history-card p:last-of-type {
    margin-bottom: 25px;
}

.history-highlight {
    display: flex;
    flex-direction: column;
    gap: 5px;
    background: #f4f6f9;
    padding: 20px;
    border-radius: 12px;
    border-left: 4px solid #d62828;
}

.history-highlight strong {
    color: #002868;
    font-size: 17px;
}

.history-highlight span {
    color: #555;
}


/* =========================
   PLAYER SELECTION
========================= */

.process-card {
    background: white;
    padding: 35px;
    border-radius: 18px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.07);
}

.process-step {
    display: flex;
    align-items: flex-start;
    gap: 25px;
}

.process-number {
    min-width: 55px;
    height: 55px;
    border-radius: 50%;
    background: #002868;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 17px;
}

.process-content {
    flex: 1;
}

.process-content > span {
    display: block;
    font-size: 12px;
    font-weight: bold;
    color: #d62828;
    letter-spacing: 1.5px;
    margin-bottom: 5px;
}

.process-content h3 {
    color: #002868;
    font-size: 1.4rem;
    margin-bottom: 8px;
}

.process-content p {
    color: #555;
    line-height: 1.8;
}

.process-line {
    width: 2px;
    height: 35px;
    background: #d7dce5;
    margin: 8px 0 8px 27px;
}

.selection-note {
    background: #002868;
    color: white;
    margin-top: 20px;
    padding: 25px 30px;
    border-radius: 15px;
}

.selection-note strong {
    display: block;
    color: #FFD700;
    margin-bottom: 5px;
    font-size: 18px;
}

.selection-note p {
    margin: 0;
    line-height: 1.7;
}


/* =========================
   DECEMBER CARD
========================= */

.december-card {
    display: grid;
    grid-template-columns: 1fr 280px;
    background: white;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.07);
}

.december-content {
    padding: 40px;
}

.about-tag {
    display: inline-block;
    background: #d62828;
    color: white;
    padding: 7px 13px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 1px;
    margin-bottom: 18px;
}

.december-content h3 {
    color: #002868;
    font-size: 2rem;
    margin-bottom: 18px;
}

.december-content p {
    color: #555;
    line-height: 1.8;
    margin-bottom: 17px;
}

.december-side {
    background: #002868;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
}

.december-box {
    text-align: center;
    border: 2px solid #FFD700;
    padding: 30px 25px;
    border-radius: 15px;
    width: 100%;
}

.december-box strong {
    display: block;
    color: #FFD700;
    font-size: 2rem;
    margin-bottom: 15px;
}

.december-box span {
    color: white;
    line-height: 2;
    font-size: 15px;
}


/* =========================
   COMPETITION FORMAT FLOW
========================= */

.format-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 35px;
}

.format-step {
    min-width: 130px;
    background: white;
    padding: 20px 15px;
    text-align: center;
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.07);
    border-top: 4px solid #002868;
}

.format-step strong {
    display: block;
    color: #002868;
    font-size: 2rem;
    line-height: 1.2;
}

.format-step span {
    color: #666;
    font-size: 13px;
    font-weight: bold;
}

.format-arrow {
    font-size: 25px;
    font-weight: bold;
    color: #d62828;
}

.champion-flow {
    border-top-color: #FFD700;
}


/* =========================
   FORMAT CARDS
========================= */

.format-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}

.format-card {
    background: white;
    padding: 30px;
    border-radius: 17px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.07);
    border-top: 4px solid #002868;
}

.format-label {
    display: inline-block;
    font-size: 11px;
    font-weight: bold;
    color: #d62828;
    letter-spacing: 1.5px;
    margin-bottom: 12px;
}

.format-card h3 {
    color: #002868;
    font-size: 1.4rem;
    margin-bottom: 14px;
}

.format-card p {
    color: #555;
    line-height: 1.75;
    margin-bottom: 14px;
}

.format-card p:last-child {
    margin-bottom: 0;
}

.final-format-card {
    border-top-color: #FFD700;
}


/* =========================
   GROUP DRAW
========================= */

.draw-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}

.group-card {
    background: white;
    border-radius: 17px;
    overflow: hidden;
    box-shadow: 0 9px 23px rgba(0, 0, 0, 0.07);
}

.group-header {
    background: #002868;
    color: white;
    padding: 20px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.group-header span {
    font-weight: bold;
    font-size: 18px;
}

.group-header small {
    display: block;
    color: #FFD700;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 1px;
    margin-top: 5px;
}

.group-card ul {
    list-style: none;
    padding: 10px 0;
}

.group-card li {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 14px 25px;
    border-bottom: 1px solid #edf0f4;
    color: #444;
    font-weight: 600;
}

.group-card li:last-child {
    border-bottom: none;
}

.group-card li span {
    min-width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0f3f7;
    color: #002868;
    border-radius: 50%;
    font-size: 11px;
    font-weight: bold;
}

.host-note {
    background: #f4f6f9;
    margin-top: 25px;
    padding: 25px 30px;
    border-radius: 15px;
    border-left: 5px solid #d62828;
}

.host-note-title {
    color: #002868;
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 6px;
}

.host-note p {
    color: #555;
    margin: 0;
    line-height: 1.7;
}


/* =========================
   CHAMPIONSHIP RECORDS
========================= */

.records-intro {
    margin-bottom: 25px;
}

.records-intro p {
    color: #666;
    font-size: 16px;
}

.champion-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.champion-card {
    position: relative;
    background: white;
    padding: 30px 20px;
    text-align: center;
    border-radius: 16px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.07);
    border-top: 4px solid #002868;
    transition: 0.3s;
    overflow: hidden;
}

.champion-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 28px rgba(0, 0, 0, 0.12);
}

.champion-card.featured {
    background: #002868;
    border-top-color: #FFD700;
}

.champion-card h3 {
    color: #002868;
    font-size: 1.05rem;
    margin: 10px 0 14px;
}

.champion-card.featured h3 {
    color: white;
}

.champion-card strong {
    display: block;
    color: #d62828;
    font-size: 2.5rem;
    line-height: 1;
    margin-bottom: 7px;
}

.champion-card.featured strong {
    color: #FFD700;
}

.champion-card > span:last-child {
    color: #777;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.champion-card.featured > span:last-child {
    color: #dce5f5;
}

.record-rank {
    position: absolute;
    top: 12px;
    right: 15px;
    color: #b8c1ce;
    font-size: 11px;
    font-weight: bold;
}


/* =========================
   LEGACY / WHY IT MATTERS
========================= */

.final-section {
    margin-bottom: 20px;
}

.legacy-card {
    background: #002868;
    color: white;
    padding: 55px 45px;
    border-radius: 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.legacy-card::before {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    border: 30px solid rgba(255, 255, 255, 0.04);
    border-radius: 50%;
    top: -80px;
    right: -70px;
}

.legacy-card::after {
    content: "";
    position: absolute;
    width: 150px;
    height: 150px;
    border: 25px solid rgba(255, 255, 255, 0.04);
    border-radius: 50%;
    bottom: -80px;
    left: -60px;
}

.legacy-card .about-label {
    position: relative;
    z-index: 2;
}

.legacy-card h2 {
    position: relative;
    z-index: 2;
    font-size: 2.2rem;
    margin-bottom: 20px;
}

.legacy-card p {
    position: relative;
    z-index: 2;
    max-width: 780px;
    margin: 0 auto 18px;
    line-height: 1.8;
    color: #e7edf7;
}

.legacy-line {
    width: 70px;
    height: 3px;
    background: #FFD700;
    margin: 25px auto;
}

.legacy-card > strong {
    position: relative;
    z-index: 2;
    color: #FFD700;
    font-size: 1.1rem;
}


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

@media (max-width: 992px) {

    .about-hero h2 {
        font-size: 2.6rem;
    }

    .champion-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .format-flow {
        gap: 8px;
    }

    .format-step {
        min-width: 115px;
    }

}


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

@media (max-width: 768px) {

    .about-hero {
        min-height: 50vh;
        padding: 55px 20px;
    }

    .about-hero h2 {
        font-size: 2rem;
    }

    .about-hero p {
        font-size: 1rem;
    }

    .about-label {
        font-size: 10px;
        letter-spacing: 1.3px;
    }


    .about-container {
        width: 92%;
        margin: 50px auto;
    }


    .about-section {
        margin-bottom: 60px;
    }


    .about-section-heading {
        align-items: flex-start;
        gap: 14px;
    }

    .about-number {
        min-width: 45px;
        height: 45px;
        font-size: 14px;
        border-radius: 9px;
    }

    .about-section-heading h2 {
        font-size: 1.45rem;
    }

    .about-section-heading p {
        font-size: 13px;
    }


    /* HISTORY */

    .history-card {
        padding: 25px;
    }

    .history-card p {
        font-size: 15px;
        text-align: left;
    }


    /* PLAYER SELECTION */

    .process-card {
        padding: 25px 20px;
    }

    .process-step {
        gap: 15px;
    }

    .process-number {
        min-width: 43px;
        height: 43px;
        font-size: 13px;
    }

    .process-line {
        margin-left: 21px;
    }

    .process-content h3 {
        font-size: 1.2rem;
    }

    .process-content p {
        font-size: 14px;
    }

    .selection-note {
        padding: 20px;
    }


    /* DECEMBER */

    .december-card {
        grid-template-columns: 1fr;
    }

    .december-content {
        padding: 28px 25px;
    }

    .december-content h3 {
        font-size: 1.55rem;
    }

    .december-content p {
        font-size: 14px;
    }

    .december-side {
        padding: 25px;
    }

    .december-box {
        padding: 22px;
    }

    .december-box strong {
        font-size: 1.6rem;
    }


    /* FORMAT FLOW */

    .format-flow {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .format-arrow {
        display: none;
    }

    .format-step {
        min-width: 0;
    }


    /* FORMAT CARDS */

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

    .format-card {
        padding: 25px;
    }


    /* GROUP DRAW */

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

    .group-header {
        padding: 18px 20px;
    }

    .group-card li {
        padding: 13px 20px;
    }


    /* CHAMPIONSHIP */

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

    .champion-card {
        padding: 25px 20px;
    }


    /* LEGACY */

    .legacy-card {
        padding: 40px 25px;
    }

    .legacy-card h2 {
        font-size: 1.7rem;
    }

    .legacy-card p {
        font-size: 14px;
    }

}
/* =========================================
   FIXTURES PAGE
========================================= */

.fixtures-hero {
    background: linear-gradient(135deg, #002868, #061b3d);
    color: white;
    padding: 55px 20px;
    text-align: center;
}

.fixtures-hero-content {
    max-width: 850px;
    margin: auto;
}

.fixtures-label {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #FFD700;
    margin-bottom: 12px;
}

.fixtures-hero h2 {
    margin: 0 0 12px;
    font-size: 2rem;
}

.fixtures-hero p {
    margin: 0 auto;
    max-width: 650px;
    line-height: 1.7;
    color: #e7edf7;
}


/* NOTICE */

.fixtures-notice {
    width: 90%;
    max-width: 1000px;
    margin: 30px auto 20px;
    padding: 22px;
    background: #f8f9fc;
    border-left: 5px solid #d62828;
    border-radius: 12px;
    display: flex;
    gap: 16px;
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.07);
}

.notice-icon {
    font-size: 1.4rem;
    flex-shrink: 0;
}

.fixtures-notice h3 {
    margin: 0 0 10px;
    color: #002868;
}

.fixtures-notice p {
    margin: 8px 0;
    line-height: 1.6;
    color: #444;
}


/* TBA */

.tba-intro {
    width: 90%;
    max-width: 1000px;
    margin: 20px auto 35px;
    padding: 20px;
    background: white;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.06);
}

.tba-intro h3 {
    margin: 0 0 8px;
    color: #002868;
}

.tba-intro p {
    margin: 0;
    color: #555;
    line-height: 1.6;
}


/* MAIN FIXTURE AREA */

.fixtures-container {
    width: 92%;
    max-width: 1100px;
    margin: 0 auto 60px;
}


/* GROUP */

.fixture-group {
    margin-bottom: 55px;
}

.group-heading {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 10px;
    padding-bottom: 15px;
    border-bottom: 2px solid #e5e8ef;
}

.group-label {
    display: inline-block;
    color: #d62828;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.group-heading h2 {
    margin: 0;
    color: #002868;
    font-size: 1.6rem;
}

.host-badge {
    display: inline-block;
    width: fit-content;
    padding: 8px 12px;
    border-radius: 20px;
    background: #fff4c2;
    color: #735d00;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.5px;
}

.group-description {
    color: #666;
    line-height: 1.6;
    margin: 12px 0 20px;
}


/* MATCH CARD */

.match-card {
    position: relative;
    background: white;
    margin-bottom: 18px;
    padding: 20px;
    border-radius: 15px;
    border: 1px solid #e5e8ef;
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

.match-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 100%;
    background: #002868;
}

.match-number {
    color: #888;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 1px;
    margin-bottom: 15px;
}


/* TEAMS */

.teams {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    margin-bottom: 20px;
}

.teams span {
    flex: 1;
    color: #002868;
    font-size: 1rem;
    font-weight: 800;
}

.teams strong {
    flex-shrink: 0;
    color: #d62828;
    font-size: 0.85rem;
}


/* MATCH INFORMATION */

.match-info {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding-top: 15px;
    border-top: 1px solid #edf0f5;
}

.match-info div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.match-info small {
    color: #888;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.8px;
}

.match-info strong {
    color: #444;
    font-size: 0.82rem;
    text-align: right;
}


/* STATUS */

.match-status {
    display: inline-block;
    margin-top: 16px;
    padding: 6px 11px;
    background: #eef3fa;
    color: #002868;
    border-radius: 20px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.6px;
}


/* TABLET */

@media (min-width: 600px) {

    .fixtures-hero {
        padding: 70px 30px;
    }

    .fixtures-hero h2 {
        font-size: 2.5rem;
    }

    .group-heading {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .match-info {
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
    }

    .match-info div {
        flex-direction: column;
        align-items: flex-start;
    }

    .match-info strong {
        text-align: left;
    }

}


/* DESKTOP */

@media (min-width: 900px) {

    .fixtures-hero {
        padding: 85px 30px;
    }

    .fixtures-hero h2 {
        font-size: 3rem;
    }

    .fixtures-notice {
        padding: 28px;
    }

    .match-card {
        padding: 25px 30px;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .match-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.09);
    }

    .teams span {
        font-size: 1.15rem;
    }

}
/* =========================================
RESULTS PAGE
========================================= */

.results-hero {
background: linear-gradient(135deg, #002868, #061b3d);
color: white;
padding: 55px 20px;
text-align: center;
}

.results-hero-content {
max-width: 850px;
margin: auto;
}

.results-label {
display: inline-block;
color: #FFD700;
font-size: 0.75rem;
font-weight: 800;
letter-spacing: 1.5px;
margin-bottom: 12px;
}

.results-hero h2 {
margin: 0 0 12px;
font-size: 2rem;
}

.results-hero p {
max-width: 650px;
margin: auto;
line-height: 1.7;
color: #e7edf7;
}

/* MAIN */

.results-container {
width: 92%;
max-width: 1100px;
margin: 40px auto 60px;
}

/* STATUS CARD */

.results-status-card {
text-align: center;
background: white;
padding: 35px 22px;
border-radius: 18px;
border: 1px solid #e5e8ef;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.07);
margin-bottom: 25px;
}

.results-status-icon {
width: 65px;
height: 65px;
margin: 0 auto 15px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #eef3fa;
font-size: 1.8rem;
}

.results-status-label {
color: #d62828;
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 1px;
}

.results-status-card h2 {
margin: 8px 0 12px;
color: #002868;
font-size: 1.6rem;
}

.results-status-card p {
max-width: 650px;
margin: 8px auto;
color: #666;
line-height: 1.6;
}

/* SUMMARY */

.results-summary {
display: grid;
grid-template-columns: 1fr;
gap: 15px;
margin-bottom: 50px;
}

.results-summary-card {
background: white;
padding: 22px;
border-radius: 14px;
border: 1px solid #e5e8ef;
text-align: center;
box-shadow: 0 5px 18px rgba(0, 0, 0, 0.05);
}

.results-summary-card span {
display: block;
color: #002868;
font-size: 1.8rem;
font-weight: 800;
margin-bottom: 5px;
}

.results-summary-card strong {
color: #777;
font-size: 0.8rem;
}

/* SECTION HEADINGS */

.results-section-heading {
margin-bottom: 20px;
}

.results-section-heading span {
color: #d62828;
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 1px;
}

.results-section-heading h2 {
margin: 5px 0 0;
color: #002868;
font-size: 1.6rem;
}

/* NO RESULTS */

.no-results-card {
background: #f8f9fc;
border: 1px dashed #cdd3df;
border-radius: 15px;
padding: 40px 20px;
text-align: center;
}

.no-results-icon {
font-size: 2rem;
margin-bottom: 10px;
}

.no-results-card h3 {
margin: 0 0 8px;
color: #002868;
}

.no-results-card p {
margin: 0;
color: #666;
line-height: 1.6;
}

/* INFORMATION SECTION */

.results-info {
margin-top: 50px;
}

.results-info-grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}

.results-info-card {
background: white;
padding: 22px;
border-radius: 14px;
border: 1px solid #e5e8ef;
box-shadow: 0 5px 18px rgba(0, 0, 0, 0.05);
}

.info-card-icon {
font-size: 1.5rem;
margin-bottom: 10px;
}

.results-info-card h3 {
margin: 0 0 8px;
color: #002868;
}

.results-info-card p {
margin: 0;
color: #666;
line-height: 1.6;
font-size: 0.9rem;
}

/* COMING SOON */

.results-coming {
margin-top: 50px;
padding: 35px 22px;
background: linear-gradient(135deg, #002868, #061b3d);
color: white;
border-radius: 18px;
text-align: center;
}

.results-coming span {
color: #FFD700;
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 1px;
}

.results-coming h2 {
margin: 10px auto;
max-width: 650px;
font-size: 1.4rem;
}

.results-coming p {
max-width: 650px;
margin: auto;
color: #e7edf7;
line-height: 1.6;
}

/* TABLET */

@media (min-width: 600px) {

.results-hero {
    padding: 70px 30px;
}

.results-hero h2 {
    font-size: 2.5rem;
}

.results-summary {
    grid-template-columns: repeat(3, 1fr);
}

.results-info-grid {
    grid-template-columns: repeat(2, 1fr);
}

}

/* DESKTOP */

@media (min-width: 900px) {

.results-hero {
    padding: 85px 30px;
}

.results-hero h2 {
    font-size: 3rem;
}

.results-status-card {
    padding: 45px 30px;
}

.results-info-card {
    padding: 25px;
}

.results-coming {
    padding: 45px 30px;
}

}
/* =====================================================
   HOMEPAGE UPGRADE
   ===================================================== */


/* ================= HOME INTRO ================= */

.home-intro {
    max-width: 900px;
    margin: 0 auto;
    padding: 70px 20px 55px;
    text-align: center;
}

.home-section-heading {
    text-align: center;
    margin-bottom: 30px;
}

.home-section-heading span,
.section-label {
    display: block;
    color: #c8102e;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.home-section-heading h2 {
    margin: 0 0 15px;
    font-size: 2rem;
    line-height: 1.2;
    color: #111827;
}

.home-section-heading p {
    max-width: 700px;
    margin: 0 auto;
    color: #5b6472;
    line-height: 1.7;
}

.home-intro > p {
    color: #555;
    line-height: 1.8;
    font-size: 1rem;
    margin-bottom: 18px;
}



/* ================= MEET FEATURE ================= */

.meet-feature {
    display: grid;
    grid-template-columns: 1fr;
    background: #f5f7fa;
    margin: 20px;
    border-radius: 20px;
    overflow: hidden;
}

.meet-feature-image {
    min-height: 300px;
}

.meet-feature-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.meet-feature-content {
    padding: 35px 25px;
}

.meet-feature-content h2 {
    margin: 0 0 18px;
    font-size: 1.8rem;
    line-height: 1.2;
    color: #111827;
}

.meet-feature-content p {
    color: #5b6472;
    line-height: 1.7;
    margin-bottom: 16px;
}



/* ================= BUTTON ================= */

.home-button {
    display: inline-block;
    margin-top: 10px;
    padding: 13px 20px;
    background: #c8102e;
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 700;
    transition: 0.3s ease;
}

.home-button:hover {
    background: #a50d26;
    transform: translateY(-2px);
}



/* ================= COUNTIES SHOWCASE ================= */

.counties-showcase {
    padding: 70px 20px;
}

.counties-flag-card {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    border-radius: 20px;
    overflow: hidden;
    min-height: 390px;
    background: #111;
}

.counties-flag-card img {
    width: 100%;
    height: 390px;
    object-fit: cover;
    display: block;
}

.counties-flag-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 30px;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.88),
        rgba(0, 0, 0, 0.15)
    );
    color: white;
}

.counties-flag-overlay h3 {
    margin: 0 0 10px;
    font-size: 1.7rem;
}

.counties-flag-overlay p {
    max-width: 600px;
    line-height: 1.6;
    margin: 0 0 12px;
    color: #f1f1f1;
}



/* ================= FOOTBALL PRIDE ================= */

.football-pride {
    padding: 70px 20px;
    background: #f5f7fa;
}

.football-grid {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.football-card {
    position: relative;
    min-height: 320px;
    border-radius: 18px;
    overflow: hidden;
    background: #111;
}

.football-card-large {
    min-height: 380px;
}

.football-card img {
    width: 100%;
    height: 100%;
    min-height: 320px;
    object-fit: cover;
    display: block;
}

.football-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.9),
        rgba(0, 0, 0, 0.05)
    );
}

.football-card-content {
    position: absolute;
    z-index: 2;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 25px;
    color: white;
}

.football-card-content span {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.football-card-content h3 {
    margin: 8px 0;
    font-size: 1.5rem;
}

.football-card-content p {
    margin: 0;
    line-height: 1.5;
    color: #eeeeee;
}



/* ================= STADIUM ================= */

.stadium-feature {
    max-width: 1100px;
    margin: 0 auto;
    padding: 75px 20px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 35px;
    align-items: center;
}

.stadium-images {
    position: relative;
    min-height: 360px;
}

.stadium-main-image {
    width: 88%;
    height: 320px;
    object-fit: cover;
    border-radius: 18px;
    display: block;
}

.stadium-small-image {
    position: absolute;
    width: 48%;
    height: 170px;
    object-fit: cover;
    right: 0;
    bottom: 0;
    border: 6px solid white;
    border-radius: 15px;
}

.stadium-content h2 {
    margin: 0 0 18px;
    font-size: 2rem;
    line-height: 1.2;
    color: #111827;
}

.stadium-content p {
    color: #5b6472;
    line-height: 1.7;
    margin-bottom: 16px;
}



/* ================= DISCOVER LIBERIA ================= */

.discover-liberia {
    padding: 75px 20px;
    background: #f5f7fa;
}

.discover-grid {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.discover-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.06);
}

.discover-card img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
}

.discover-card-content {
    padding: 22px;
}

.discover-card-content span {
    color: #c8102e;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.discover-card-content h3 {
    margin: 8px 0 10px;
    color: #111827;
    font-size: 1.35rem;
}

.discover-card-content p {
    margin: 0;
    color: #5b6472;
    line-height: 1.6;
}



/* ================= COMPETITION HUB ================= */

.competition-hub {
    padding: 75px 20px;
}

.competition-grid {
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}

.competition-card {
    display: block;
    padding: 28px;
    background: white;
    border: 1px solid #e4e7ec;
    border-radius: 16px;
    text-decoration: none;
    color: inherit;
    transition: 0.3s ease;
}

.competition-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.competition-icon {
    font-size: 2rem;
    margin-bottom: 12px;
}

.competition-card h3 {
    margin: 0 0 10px;
    color: #111827;
    font-size: 1.35rem;
}

.competition-card p {
    color: #5b6472;
    line-height: 1.6;
    margin-bottom: 18px;
}

.competition-card span {
    color: #c8102e;
    font-weight: 800;
}



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

.home-final {
    margin: 0;
    padding: 80px 20px;
    background: linear-gradient(
        135deg,
        #071d3a,
        #123e69
    );
    text-align: center;
    color: white;
}

.home-final-content {
    max-width: 750px;
    margin: 0 auto;
}

.home-final-content > span {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 2px;
}

.home-final h2 {
    font-size: 2.3rem;
    margin: 15px 0;
}

.home-final p {
    color: #e4e9ef;
    line-height: 1.7;
    margin-bottom: 20px;
}

.home-button-light {
    background: white;
    color: #071d3a;
}

.home-button-light:hover {
    background: #eeeeee;
    color: #071d3a;
}



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

@media (min-width: 700px) {

    .meet-feature {
        max-width: 1100px;
        margin: 30px auto;
        grid-template-columns: 1fr 1fr;
        align-items: stretch;
    }

    .meet-feature-image {
        min-height: 430px;
    }

    .meet-feature-content {
        padding: 50px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }


    .football-grid {
        grid-template-columns: 1.4fr 1fr;
    }

    .football-card-large {
        grid-row: span 2;
        min-height: 660px;
    }

    .football-card-large img {
        min-height: 660px;
    }


    .stadium-feature {
        grid-template-columns: 1.1fr 1fr;
    }


    .discover-grid {
        grid-template-columns: repeat(2, 1fr);
    }


    .competition-grid {
        grid-template-columns: repeat(3, 1fr);
    }

}


@media (min-width: 1000px) {

    .home-section-heading h2 {
        font-size: 2.4rem;
    }

    .discover-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .home-intro {
        padding-top: 90px;
        padding-bottom: 70px;
    }

} 
/* ==================================================
   COUNTY MEET VOICES
   ================================================== */

.county-voices {
    max-width: 1100px;
    margin: 0 auto;
    padding: 70px 20px;
}


.county-voices-header {
    max-width: 760px;
    margin: 0 auto 35px;
    text-align: center;
}


.county-voices-header > span {
    display: inline-block;
    margin-bottom: 12px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: #1d4ed8;
}


.county-voices-header h2 {
    margin-bottom: 14px;
    font-size: 2rem;
    color: #111827;
}


.county-voices-header p {
    margin: 0;
    color: #5b6472;
    line-height: 1.7;
}


.player-credit-card {
    max-width: 900px;
    margin: 0 auto;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07);
}


.player-credit-top {
    display: flex;
    align-items: center;
    gap: 18px;
    padding-bottom: 25px;
    border-bottom: 1px solid #e5e7eb;
}


.player-initial {
    width: 62px;
    height: 62px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #1d4ed8;
    color: #ffffff;
    font-size: 1.4rem;
    font-weight: 700;
}


.player-credit-label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #1d4ed8;
}


.player-credit-top h3 {
    margin: 0 0 4px;
    font-size: 1.7rem;
    color: #111827;
}


.player-credit-top p {
    margin: 0;
    color: #6b7280;
    font-weight: 600;
}


.player-credit-details {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    padding: 25px 0;
}


.player-credit-details > div {
    padding: 16px;
    border-radius: 10px;
    background: #f5f7fa;
}


.player-credit-details span {
    display: block;
    margin-bottom: 7px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: #6b7280;
}


.player-credit-details strong {
    color: #111827;
    font-size: 0.95rem;
}


.player-credit-message {
    padding-top: 22px;
    border-top: 1px solid #e5e7eb;
}


.player-credit-message p {
    margin: 0;
    color: #4b5563;
    line-height: 1.8;
}


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

@media (max-width: 700px) {

    .county-voices {
        padding: 55px 16px;
    }


    .county-voices-header h2 {
        font-size: 1.6rem;
    }


    .player-credit-card {
        padding: 24px 20px;
    }


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


    .player-credit-top h3 {
        font-size: 1.4rem;
    }

}
/* ================================
   DYNAMIC RESULT MATCH CARDS
================================ */

.result-match-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 18px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}

.result-group {
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    color: #1d4ed8;
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.result-teams {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 14px;
    text-align: center;
}

.result-teams span {
    font-size: 16px;
    font-weight: 700;
    color: #111827;
}

.result-teams strong {
    min-width: 70px;
    padding: 10px 14px;
    background: #f3f4f6;
    border-radius: 10px;
    font-size: 20px;
    color: #111827;
}

.result-details {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid #e5e7eb;
}

.result-details span {
    font-size: 13px;
    color: #6b7280;
    background: #f9fafb;
    padding: 7px 10px;
    border-radius: 8px;
}

/* Mobile result cards */

@media (max-width: 600px) {
    .result-match-card {
        padding: 16px;
    }

    .result-teams {
        gap: 8px;
    }

    .result-teams span {
        font-size: 14px;
    }

    .result-teams strong {
        min-width: 58px;
        padding: 8px 10px;
        font-size: 18px;
    }

    .result-details {
        gap: 6px;
    }

    .result-details span {
        font-size: 12px;
    }
}
/* =========================================
   PROJECT TECHNICAL CONTRIBUTOR
========================================= */

.project-contributor {
    max-width: 1100px;
    margin: 40px auto;
    padding: 0 15px;
}

.project-contributor-header {
    text-align: center;
    margin-bottom: 25px;
}

.project-contributor-header > span {
    display: inline-block;
    color: #d62828;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    margin-bottom: 8px;
}

.project-contributor-header h2 {
    margin: 0 0 10px;
    color: #062b63;
    font-size: 2rem;
}

.project-contributor-header p {
    max-width: 700px;
    margin: 0 auto;
    color: #555;
    line-height: 1.7;
}


/* Contributor Card */

.contributor-card {
    max-width: 850px;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 18px;
    padding: 25px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    border-top: 4px solid #d62828;
}


/* Profile */

.contributor-profile {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 25px;
}

.contributor-initial {
    width: 65px;
    height: 65px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #062b63;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
    font-weight: 700;
}

.contributor-role {
    display: block;
    color: #d62828;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 5px;
}

.contributor-profile h3 {
    margin: 0;
    color: #062b63;
    font-size: 1.5rem;
}

.contributor-profile p {
    margin: 4px 0 0;
    color: #666;
}


/* Details */

.contributor-details {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 22px;
}

.contributor-details > div {
    background: #f4f7fb;
    border-left: 4px solid #062b63;
    border-radius: 10px;
    padding: 14px;
}

.contributor-details span {
    display: block;
    color: #777;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    margin-bottom: 5px;
}

.contributor-details strong {
    color: #062b63;
    font-size: 1rem;
}


/* Contribution Message */

.contributor-message {
    border-top: 1px solid #e5e5e5;
    padding-top: 20px;
}

.contributor-message p {
    margin: 0;
    color: #444;
    line-height: 1.8;
}


/* LinkedIn */

.contributor-link {
    margin-top: 20px;
}

.contributor-link a {
    display: inline-block;
    background: #062b63;
    color: #ffffff;
    text-decoration: none;
    padding: 10px 18px;
    border-radius: 8px;
    font-weight: 600;
    transition: 0.25s ease;
}

.contributor-link a:hover {
    background: #d62828;
    transform: translateY(-2px);
}


/* Desktop */

@media (min-width: 700px) {

    .contributor-card {
        padding: 30px;
    }

    .contributor-details {
        grid-template-columns: repeat(3, 1fr);
    }

}
/* Stage label above live match cards */
.match-stage-badge {
    display: inline-block;
    margin-bottom: 10px;
    padding: 6px 12px;
    border-radius: 20px;
    background: #002868;
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.5px;
}
/* =========================================
   LIVE MATCH SCORE AND GOAL TIMELINE
========================================= */

.live-match-card .teams {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.live-match-card .live-home-team,
.live-match-card .live-away-team {
    flex: 1;
    font-weight: 700;
    text-align: center;
    min-width: 0;
}

.live-match-card .live-match-score {
    flex: 0 0 auto;
    font-size: 1em;
    font-weight: 800;
    white-space: nowrap;
}

/* Goal timeline container */
.live-match-card .live-match-goals {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #e4e8ef;
}

.live-match-card .live-match-goals h3 {
    margin: 0 0 10px;
    font-size: 1.05rem;
}

.live-match-card .live-match-goal {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 8px 0;
    line-height: 1.5;
}

.live-match-card .goal-ball {
    flex: 0 0 auto;
}

.live-match-card .goal-minute {
    flex: 0 0 auto;
    font-weight: 800;
}

.live-match-card .goal-details {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
}

.live-match-card .goal-scorer::before {
    content: "·";
    margin-right: 6px;
}

.live-match-card .goal-scorer {
    font-weight: 600;
}

.live-match-card .no-live-goals {
    margin: 0;
    color: #606b7a;
    font-size: 0.95rem;
}

/* =====================================================
   PWA INSTALL BANNER
===================================================== */

.pwa-install-banner {

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

    max-width: 1100px;
    margin: 20px auto;
    padding: 15px 20px;

    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-left: 5px solid #FFD700;

    border-radius: 12px;

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

    animation: pwaSlideDown 0.5s ease;

}

/* Keep the banner hidden until JavaScript displays it */

.pwa-install-banner[hidden] {
    display: none !important;
}

/* App icon */

.pwa-install-icon img {

    width: 55px;
    height: 55px;

    object-fit: contain;
    border-radius: 10px;

}

/* Banner text */

.pwa-install-content {
    flex: 1;
}

.pwa-install-content h3 {

    margin: 0 0 5px;

    color: #002868;
    font-size: 1.1rem;

}

.pwa-install-content p {

    margin: 0;

    color: #555;
    font-size: 0.9rem;
    line-height: 1.5;

}

/* Install button */

#pwaInstallButton {

    background: #002868;
    color: white;

    border: none;
    border-radius: 8px;

    padding: 12px 20px;

    font-weight: bold;
    cursor: pointer;

    transition: 0.3s;

}

#pwaInstallButton:hover {

    background: #d62828;
    transform: translateY(-2px);

}

/* Close button */

#pwaInstallClose {

    background: transparent;
    border: none;

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

    cursor: pointer;

    padding: 5px;

}

/* Entrance animation */

@keyframes pwaSlideDown {

    from {
        opacity: 0;
        transform: translateY(-15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}

/* Mobile layout */

@media (max-width: 600px) {

    .pwa-install-banner {

        margin: 12px;
        padding: 12px;

        gap: 10px;

    }

    .pwa-install-icon img {

        width: 45px;
        height: 45px;

    }

    .pwa-install-content h3 {
        font-size: 0.95rem;
    }

    .pwa-install-content p {
        font-size: 0.78rem;
    }

    #pwaInstallButton {

        padding: 10px 12px;
        font-size: 0.8rem;

    }

}