body {
         background: #0b2a5a;
         color: white;
         font-family: 'Poppins', sans-serif;
         }
         .navbar {
         background: #d10000;
         padding: 0px 0;
         }
         .navbar-brand {
         font-weight: 700;
         font-size: 24px;
         color: white !important;
         }
         .navbar-nav .nav-link {
         color: white !important;
         font-weight: 500;
         margin: 0 17px;
         font-size: 16px;
         }
         .btn-signin {
         background: #022c59;
         color: white;
         border: none;
         font-weight: 500;
         }
         .btn-register {
         background: #ffc107;
         color: black;
         font-weight: 600;
         border: none;
         }
         /* Hero */
         .hero {
         position: relative;
         background: url('../images/homebanner.jpg') center/cover no-repeat;
         height: 500px;
         display: flex;
         align-items: center;
         justify-content: center;
         text-align: center;
         }
         .hero::before {
         content: '';
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         /* background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.6)); */
         }
         .hero-content {
         position: relative;
         z-index: 2;
         }
         .hero h1 {
         font-size: 48px;
         font-weight: 800;
         letter-spacing: 1px;
         margin-bottom: 10px;
         }
         .hero h1 span {
         color: #ffc107;
         }
         .hero p {
         font-size: 18px;
         margin-bottom: 25px;
         }
         .hero .btn {
         padding: 12px 25px;
         font-weight: 600;
         margin: 0 10px;
         border-radius: 5px;
         }
         .btn-register-hero {
         background: #ffc107;
         color: black;
         border: none;
         }
         .btn-schedule {
         background: #d10000;
         color: white;
         border: none;
         }
         /* Player Images in Hero */
         .player-left {
         position: absolute;
         left: 5%;
         bottom: 0;
         height: 400px;
         z-index: 1;
         object-fit: contain;
         }
         .player-right {
         position: absolute;
         right: 5%;
         bottom: 0;
         height: 400px;
         z-index: 1;
         object-fit: contain;
         }
         /* Main Content Container */
         .main-content {
         padding: 20px 0;
         }
         /* Live Matches, News, Points Table Row */
         .content-row {
         display: flex;
         gap: 20px;
         margin-bottom: 40px;
         }
         .content-col {
         flex: 1;
         }
         .live-card, .news-card, .points-card {
         background: #0d3b7a;
         border: none;
         border-radius: 10px;
         padding: 20px;
         height: fit-content;
         }
         .live-badge {
         background: #d10000;
         color: white;
         padding: 5px 12px;
         border-radius: 20px;
         font-size: 12px;
         font-weight: 600;
         }
         .team-logo {
         width: 60px;
         height: 60px;
         }
         .news-item {
         margin-bottom: 15px;
         font-size: 14px;
         }
         .news-item strong {
         color: #ffc107;
         }
         .points-table {
         font-size: 14px;
         }
         .points-table th {
         background: #0d3b7a;
         color: white;
         font-weight: 600;
         }
         .points-table td {
         background: #0d3b7a;
         border: none;
         }
         .btn-view {
         background: #d10000;
         color: white;
         border: none;
         padding: 8px 15px;
         border-radius: 5px;
         font-size: 12px;
         }
         .btn-read-more {
         background: none;
         border: 1px solid #ffc107;
         color: #ffc107;
         padding: 5px 10px;
         border-radius: 5px;
         font-size: 12px;
         }
         /* Top Performers */
         .section-title {
         text-align: center;
         font-size: 32px;
         font-weight: 700;
         margin: 20px 0 30px;
         position: relative;
         }
         .section-title::after {
         content: '';
         width: 80px;
         height: 3px;
         background: #ffc107;
         display: block;
         margin: 10px auto;
         }
         .performer-card {
         background: #0d3b7a;
         border: none;
         border-radius: 10px;
         overflow: hidden;
         transition: transform 0.3s;
         }
         .performer-card:hover {
         transform: translateY(-5px);
         }
         .performer-img {
         height: 250px;
         object-fit: cover;
         width: 100%;
         }
         .performer-card .card-body {
         text-align: center;
         padding: 15px;
         }
         .performer-card h5 {
         font-weight: 700;
         margin-bottom: 10px;
         color: #fff;
         }
         .performer-card p {
         font-size: 16px;
         color: #ccc;
         }
         /* Upcoming Matches */
         .match-card {
         background: #0d3b7a;
         border: none;
         border-radius: 10px;
         padding: 20px;
         text-align: center;
         height: 100%;
         }
         .match-logo {
         width: 50px;
         height: 50px;
         margin-bottom: 10px;
         }
         .match-card h5 {
         font-size: 16px;
         font-weight: 600;
         margin: 10px 0;
         }
         .match-card p {
         font-size: 14px;
         color: #ccc;
         margin: 10px 0;
         }
         .btn-details {
         background: #ffc107;
         color: black;
         border: none;
         padding: 8px 15px;
         border-radius: 5px;
         font-weight: 500;
         font-size: 12px;
         }
         /* Photo Gallery */
         .gallery-img {
         height: 200px;
         object-fit: cover;
         width: 100%;
         border-radius: 10px;
         transition: transform 0.3s;
         }
         .gallery-img:hover {
         transform: scale(1.05);
         }
         .btn-gallery {
         background: #d10000;
         color: white;
         border: none;
         padding: 12px 25px;
         border-radius: 5px;
         font-weight: 600;
         }
         /* Footer */
         footer {
         background: #081f45;
         padding: 40px 0;
         margin-top: 0px;
         }
         footer h5 {
         font-weight: 600;
         margin-bottom: 15px;
         }
         footer ul {
         list-style: none;
         padding: 0 12px;
         }
         footer ul li {
         margin-bottom: 8px;
         list-style-type: circle;
         }
         footer ul li a {
         color: white;
         text-decoration: none;
         font-size: 14px;
         }
         footer ul li a:hover {
         color: #ffc107;
         }
         .social-icons a {
         margin-right: 10px;
         font-size: 20px;
         color: white;
         }
         .social-icons a:hover {
         color: #ffc107;
         }
         /* Responsive */
         @media (max-width: 768px) {
         .content-row {
         flex-direction: column;
         }
         .hero h1 {
         font-size: 32px;
         }
         .player-left, .player-right {
         height: 250px;
         display: none;
         }
         }