body {
     margin: 0;
     font-family: Arial, sans-serif !important;
     background-color: #fafafa;
     color: #111;
     font-weight: 500;
 }

 header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 1rem 2rem;
     background-color: white;
     border-bottom: 1px solid #ddd;
     gap: 2rem;
     padding: 0% 6%;
 }

 .logo {
     font-size: 1.5rem;
     font-weight: bold;
 }

 .logo a {
     text-decoration: none;
     color: inherit;
     font-weight: bold;
     /* optional */
 }

 header .logo {
     font-weight: bold;
     font-size: 1.5rem;
     margin-left: 4%;
 }

 .search-bar {
     flex: 1;
     margin-right: 6%;
     max-width: 400px;
 }

 .search-bar input {
     width: 60%;
     padding: 0.5rem 1rem;
     border: 1px solid #ccc;
     border-radius: 25px;
     font-size: 1rem;
     background-color: #f4f4f4;
 }



 nav {
     display: flex;
     align-items: center;
     /* gap: 1.5rem; */
 }

 header nav a {
     margin: 0 1rem;
     text-decoration: none;
     color: #111;
     font-weight: 700;
     font-size: 1.2em;
 }

 .container {
     display: flex;
     margin: 0% 3%;
     width: 100%;
 }

 aside.left,
 aside.right {
     width: 29%;
     margin: 0% 20px 0 10px;
 }

 .main {
     width: 76%;
     padding: 0%;
 }

 .box {
     background: white;
     border-radius: 8px;
     padding: 1rem;
     margin-bottom: 1rem;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
 }

 .league-item,
 .transfer {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 0.5rem 0;
     border-bottom: 1px solid #eee;
 }

 .league-item {
     display: block;
     align-items: center;
     text-decoration: none;
     color: inherit;
     gap: 10px;
     font-size: 13px;
     font-weight: 500;
     /* margin: 0px; */
 }

 .league-item img {
     margin: 10px;
     width: 15px;
     height: 15px;
     vertical-align: middle;
 }


 .league-item:hover {
     background-color: #F0F0F0;
     cursor: pointer;
 }

 .transfer img {
     width: 30px;
     height: 30px;
     border-radius: 50%;
     margin-right: 0.5rem;
 }

 .section-title {
     font-weight: bold;
     margin-bottom: 1rem;
     margin-top: 10px;
 }

 .btn-group button {
     margin-right: 0.5rem;
     padding: 0.5rem 1rem;
     border: none;
     background: #f2f2f2;
     border-radius: 20px;
     cursor: pointer;
 }

 .btn-group {
     margin-bottom: 1rem;
     margin-top: 1rem;
 }


 .arrow-btn {
     background-color: #f2f2f2;
     border: none;
     border-radius: 50%;
     width: 36px;
     height: 36px;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     transition: background 0.2s;
 }



 #bannerImage {
     display: flex;
     justify-content: center;
     margin: 15px 20px;
     width: 100%;
 }


 .body-container {
     margin: 0% 0% 0% 1%;
 }


 .tabs {
     display: flex;
     gap: 2rem;
     padding: 1rem 2rem 0.5rem;
     font-size: 1rem;
     font-weight: 500;
     background-color: white;
 }

 .tabs .active {
     border-bottom: 2px solid black;
     padding-bottom: 0.25rem;
 }

 .match-center {
     background-color: #fff;
     /* padding: 20px; */
     border-radius: 15px;
     max-width: 800px;
     margin: 0rem auto;
     font-family: sans-serif;
 }

 /* Date Slider */
 .date-slider {
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 12.5rem;
     padding-bottom: 15px;
 }

 .nav-arrow {
     background-color: #f0f0f0;
     border: none;
     width: 30px;
     height: 30px;
     border-radius: 50%;
     font-size: 14px;
     cursor: pointer;
 }

 .date-modal {
    display: none; 
    position: fixed; 
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.6);
    justify-content: center; 
    align-items: center;
    z-index: 9999;
}

.date-modal-content {
    background: #fff;
    padding: 15px;
    width: 300px;
    border-radius: 16px;
    box-shadow: 0 0 20px rgba(0,0,0,0.25);
}

/* Flatpickr Custom Design */
.flatpickr-calendar {
    font-family: 'Inter', sans-serif;
    border: none;
    border-radius: 16px;
    padding: 12px;
    box-shadow: 0px 8px 20px rgba(0,0,0,0.20);
}

/* Month + Arrows */
.flatpickr-months {
    font-size: 18px;
    font-weight: 600;
}

.flatpickr-prev-month,
.flatpickr-next-month {
    cursor: pointer;
    color: #000;
}

/* Weekdays */
.flatpickr-weekday {
    font-size: 13px;
    font-weight: 500;
    color: #666;
}

/* Days */
.flatpickr-day {
    font-size: 14px;
    border-radius: 50% !important;
    line-height: 36px;
    width: 36px !important;
    height: 36px !important;
    margin: 4px;
}

/* Highlight Selected Date */
.flatpickr-day.selected {
    background: #000 !important;
    color: #fff !important;
}

/* Today highlight */
.flatpickr-day.today {
    border: 1px solid #000;
}



 /* Filters */
 .filters {
     display: flex;
     gap: 1rem;
     justify-content: center;
     flex-wrap: wrap;
     margin-bottom: 20px;
 }

 .filters button {
     padding: 8px 15px;
     border: none;
     border-radius: 20px;
     background-color: #f2f2f2;
     cursor: pointer;
     font-size: 14px;
 }

 .filter-btn {
     background-color: #fff;
     border: 1px solid #ccc;
 }

 /* Match Groups */
 .match-group {
     background-color: #fafafa;
     border-radius: 12px;
     margin-bottom: 20px;
     overflow: hidden;
     font-size: 13px;
 }

 .league-name {
     background-color: #eeeeee;
     padding: 12px 15px;
     font-weight: bold;
     display: flex;
     align-items: center;
     gap: 10px;
     border-bottom: 1px solid #ddd;
 }

 .league-name img {
     width: 20px;
     height: 15px;
 }

 /* Match Card */
 .match-card {
     display: flex;
     flex-direction: column;
     padding: 15px;
     border-bottom: 1px solid #ddd;
     cursor: pointer;
     font-size: 13px;
 }

 .status {
     font-size: 12px;
     color: gray;
     margin-bottom: 5px;
 }

 .match-row {
     display: flex;
     align-items: center;
     justify-content: space-between;
 }

 .team {
     display: flex;
     align-items: center;
     font-size: 13px;
     /* font-weight: 500; */
 }

 .team.home {
     justify-content: flex-end;
     /* text then logo */
     text-align: right;
     flex: 1;
     gap: 5px;
 }

 .team.away {
     justify-content: flex-start;
     /* logo then text */
     text-align: left;
     flex: 1;
     gap: 5px;
 }

 .team img {
     width: 20px;
     height: 20px;
     object-fit: contain;
 }

 .score {
     flex: 0 0 auto;
     text-align: center;
     font-size: 13px;
     /* font-weight: bold; */
     min-width: 60px;
     margin: 0 4px;
     /* keeps center spacing */
 }


 .star-btn {
     background: none;
     border: none;
     font-size: 20px;
     cursor: pointer;
     color: #999;
 }


 .featured-trending-section {
     display: flex;
     gap: 20px;
     background-color: #fff;
     border-radius: 20px;
     margin: 20px auto;
     justify-content: center;
     flex-wrap: wrap;
 }

 .featured-news img,
 .trending-news img {
     width: 100%;
     height: auto;
     border-radius: 8px;
     object-fit: cover;
 }

 .featured-news,
 .trending-news {
     width: 50%;
     box-sizing: border-box;
 }

 .featured-news {
     flex: 1;
     background-color: #f3f3f3;
     border-radius: 15px;
     overflow: hidden;
 }

 .featured-news img {
     width: 100%;
     height: auto;
     display: block;
 }

 .featured-title {
     padding: 1rem;
     font-size: 1.5rem;
     font-weight: bold;
     margin-top: 10px;

 }

 .trending-item {
     align-items: center;
     margin-top: 15px;

     width: 100% !important;
     display: block;
 }

 .trending-item img {
     width: 80px;
     height: 60px;
     object-fit: cover;
     margin-left: 10px;
     border-radius: 5px;
 }

 .number {
     font-weight: bold;
     color: green;
     margin-right: 10px;
 }

 .trend-title {
     font-weight: 500;
 }

 .trend-meta {
     font-size: 0.9rem;
     color: gray;
 }

 .trending-news {
     flex: 1;
     padding-left: 10px;
 }

 .trending-news h3 {
     font-size: 1.2rem;
     margin-bottom: 1rem;
 }

 /* .trending-item {
     display: flex;
     align-items: center;
     margin-bottom: 1rem;
     gap: 0.75rem;
 } */

 .trending-item .number {
     background-color: #34c759;
     color: white;
     font-size: 0.9rem;
     width: 24px;
     height: 24px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: bold;
 }

 .trending-item img {
     width: 60px;
     height: 60px;
     border-radius: 8px;
     object-fit: cover;
 }

 .trend-text {
     flex: 1;
     text-decoration: none;
     color: black;
 }

 .trend-text:hover {
     text-decoration: underline;
 }

 .trend-title {
     font-weight: 500;
 }

 .trend-meta {
     font-size: 0.8rem;
     color: #666;
 }

 @media (max-width: 1024px) {
     .container {
         flex-direction: column;
     }

     aside.left,
     aside.right,
     .main {
         width: 100%;
         margin: 0 0 20px 0;
         padding: 0;
     }

     header {
         flex-direction: column;
         align-items: flex-start;
         gap: 1rem;
     }

     .search-bar {
         width: 100%;
         max-width: none;
         margin: 0;
     }

     .search-bar input {
         width: 100%;
     }

     nav {
         flex-wrap: wrap;
         justify-content: center;
         width: 100%;
         gap: 0.5rem;
     }

     .date-slider {
         gap: 4rem;
         flex-direction: row;
     }

     .featured-trending-section {
         flex-direction: column;
     }

     .featured-news,
     .trending-news {
         width: 100%;
     }
 }

 @media (max-width: 600px) {
     .tabs {
         flex-direction: column;
         gap: 1rem;
         padding: 1rem;
     }

     .filters {
         flex-direction: column;
         align-items: stretch;
     }

     /* .match-card {
         flex-direction: column;
         align-items: flex-start;
         padding-right: 1rem;
         gap: 0.5rem;
     }

     .team {
         justify-content: space-between;
         width: 100%;
     }

     .score {
         align-self: center;
         font-size: 20px;
         margin: 0.5rem 0;
     } */

     .featured-title {
         font-size: 1rem;
         
     }
     .trend-text{
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 5;   
        -webkit-box-orient: vertical;
        text-overflow: ellipsis;
     }
     /* .trending-item {
         flex-direction: row;
         gap: 0.5rem;
     } */

     .trend-meta {
         font-size: 0.7rem;
     }

     .search-bar input {
         font-size: 1rem;
         padding: 0.6rem;
     }

     header nav a {
         font-size: 1rem;
         margin: 0.5rem;
     }

     .logo {
         font-size: 1.3rem;
     }

     #bannerImage {
         margin: 10px 0;
     }
 }

 #bannerImage img {
     width: 100%;
     height: auto;
     max-width: 100%;
     display: block;
 }

 /* // Footer Css */

 .site-footer {
     background-color: #eeeeee;
     padding: 40px 60px;
     font-family: sans-serif;
     font-size: 14px;
     color: #333;
 }

 .footer-top {
     display: flex;
     justify-content: space-between;
     flex-wrap: wrap;
     border-bottom: 1px solid #ccc;
     padding-bottom: 30px;
 }

 .footer-left {
     flex: 1;
     min-width: 200px;
 }

 .footer-left img.footer-logo {
     width: 40px;
     margin-bottom: 10px;
 }

 .footer-left p {
     font-size: 1.5em;
     /* font-weight: bold; */
     line-height: 1.5;
 }

 .footer-links {
     flex: 2;
     min-width: 200px;
     display: flex;
     flex-direction: column;
     gap: 12px;
     font-size: 1.5em;
     font-weight: bold;
 }

 .footer-links a {
     color: #000;
     text-decoration: none;
     font-weight: 500;
 }

 .footer-apps {
     flex: 1;
     min-width: 200px;
 }

 .footer-apps p {
     font-weight: bold;
     margin-bottom: 10px;
 }

 .app-icons img {
     width: 36px;
     height: 36px;
     background-color: #ddd;
     border-radius: 50%;
     margin-right: 10px;
 }

 .footer-bottom {
     padding-top: 30px;
     font-size: 13px;
     display: flex;
 }

 .footer-bottom .policies {
     font-style: oblique;
     margin-left: 14%;
 }

 .footer-bottom .policies a {
     color: #444;
     text-decoration: none;
 }

 .left .box a {
     /* color: #444; */
     text-decoration: none;

 }

 .footer-bottom .legal {
     color: #666;
     font-size: 12px;
     margin-top: 10px;
     width: 40%;
 }

 .footer-bottom .social img {
     width: 20px;
     margin-left: 10px;
 }

 .follow {
     font-weight: bold;
 }

 .footer-bottom {
     display: flex !important;
     visibility: visible !important;
     opacity: 1 !important;
     height: auto !important;
 }

 .trending-single-item {
    display: flex;
    margin: 10px;
    /* height: 100%;
   width: 100%; */
}

.trending-single-item img {
    height: 30%;
    width: 30%;
}

.single-row {
    display: flex;
    justify-content: center;
    margin: 20px 0px;
}

.news-body {
    display: block;
}

.news-container {
    display: block;
    margin: 0 auto;
    padding: 0 20px;
}

.image-class,
.title-class {

    display: flex;
    justify-content: center;
    margin: 30px 0;
}

.img-news {
    width: 100%;
    max-width: 1000px;
    height: auto;
    border-radius: 10px;
}

.description-class {
    text-align: justify;
    max-width: 720px;
    margin: 50px auto;
    font-size: 18px;
    line-height: 1.6;
}

.css-1epeg5y-MftLeagueHeaderLink {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
    max-width: 100%;
    width: 100%;
    min-height: 80px;
    border-bottom: rgba(0, 0, 0, 1.0);
    padding: 0px 0px;
    text-decoration: none;
}

.css-5wriy3-HeaderText {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 0px;
}

.css-13y05ic-LeagueIconWrapper {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    border-radius: 50%;
    min-width: 48px;
    min-height: 48px;
    border: 1px solid rgba(232, 232, 232, 1.0);
    background-color: rgba(255, 255, 255, 1.0);
}

.css-5wriy3-HeaderText h2 {
    font-size: 16px;
    font-weight: 500;
    color: black;
}

.css-5wriy3-HeaderText h3 {
    font-size: 14px;
    line-height: 1.16;
    color: rgba(113, 113, 113, 1.0);
}

.trend-text {
    font-size: 15px !important;
}

.trend-title {
    font-size: 13px !important;

}

.desc-class {
    font-size: 13px !important;
    padding: 0px 10%;
}

.head-class h1 {
    font-size: 2rem !important;
}

.detailed-news-section {
    /* display: flex; */
    /* gap: 20px; */
    background-color: #fff;
    border-radius: 20px;
    margin: 20px auto;
    justify-content: center;
    flex-wrap: wrap;
}

.full-width {
    display: block;
}

.heading-news {
    width: 100%;
    background-color: #f3f3f3;
    border-radius: 15px;
    overflow: hidden;
}

.heading-news img {
    width: 100%;
}

.news-title {
    margin: 0px;
    padding: 0px;
}

.trending-single-row-item {
    display: flex;
    border-bottom: 1px solid #ccc;
    padding: 3px 0px 3px 0px;
}

.trending-single-row-item img {
    height: 100px;
    width: 100px;
    border-radius: 15px;
    margin: 20px 5px 0px 0px;
}

.link-head {
    color: #000;
    text-decoration: none;
    font-size: 13px;
    padding: 20px 5px 10px 5px;
    ;
    font-weight: bold;
}

 @media (max-width: 768px) {
     .site-footer {
         padding: 30px 20px;
         font-size: 13px;
     }

     .footer-top {
         flex-direction: column;
         gap: 30px;
         padding-bottom: 20px;
     }

     .footer-left,
     .footer-links,
     .footer-apps {
         width: 100%;
     }

     .footer-links {
         columns: 2;
         column-gap: 20px;
     }

     .footer-links a {
         break-inside: avoid;
     }

     .app-icons img {
         margin-right: 10px;
         margin-bottom: 10px;
     }

     .footer-bottom {
         flex-direction: column;
         gap: 20px;
         padding-top: 20px;
         display: flex;
         flex-wrap: wrap;
         align-items: flex-start;
         width: 100%;
     }

     .footer-bottom .copyright {
         width: 100%;
         font-size: 13px;
     }

     .footer-bottom .policies {
         width: 100%;
     }

     .footer-bottom .policies .links {
         margin-bottom: 10px;
         font-size: 13px;
     }

     .footer-bottom .policies .links a {
         margin-right: 8px;
         display: inline-block;
     }

     .footer-bottom .legal {
         font-size: 12px;
         color: #666;
     }

     .footer-bottom .social {
         display: flex;
         flex-wrap: wrap;
         align-items: center;
         gap: 10px;
         width: 100%;
     }

     .footer-bottom .social img {
         width: 20px;
         height: 20px;
         margin: 0;
     }

     .footer-bottom .follow {
         font-weight: bold;
         margin-right: 10px;
         font-size: 13px;
     }
     .trend-title {
        font-size: 13px !important;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 3;   
        -webkit-box-orient: vertical;
        text-overflow: ellipsis;
   
    }
    .trending-single-item img {
        height: 60px;
        width: 60px;
    }
 }

 @media (max-width: 480px) {
     .site-footer {
         padding: 20px 15px;
     }

     .footer-links {
         columns: 1;
     }

     .footer-left p,
     .footer-links a,
     .footer-apps p {
         font-size: 1.1em;
     }

     .app-icons img {
         width: 32px;
         height: 32px;
     }

     .footer-bottom .social img {
         width: 18px;
         height: 18px;
     }
     .trend-title {
        font-size: 13px !important;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 3;   
        -webkit-box-orient: vertical;
        text-overflow: ellipsis;
   
    }
    .trending-single-item img {
        height: 60px;
        width: 60px;
    }
 }