* { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      font-family: 'Poppins', sans-serif;
      background: linear-gradient(rgba(4, 18, 48, .88), rgba(6, 15, 40, .94));
      color: #fff;
      line-height: 1.6;
      scroll-behavior: smooth;
    }
    h1, h2, h3, h4, h5, h6 { color: #FFC107; font-weight: 800; letter-spacing: 0.5px; }
    a { text-decoration: none; color: inherit; }

    h1 span{
      font-size: 95px;
      font-weight: 800;
      line-height: 90px;
    }
    .text-left {text-align: left; }
    .text-center {text-align: center; }
    .text-right {text-align: right; }
    .text-justify {text-align: justify; }
    .clearfix { clear: both;  }
    .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

    /* scroll to top */
    .scroll-top {
      position: fixed; bottom: 30px; right: 30px; background: #FFC107; color: #0a1a2e;
      width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
      font-size: 1.6rem; box-shadow: 0 6px 20px rgba(255,193,7,0.4); opacity: 0; transform: translateY(20px);
      pointer-events: none; transition: 0.3s; z-index: 999; border: none; cursor: pointer;
    }
    .scroll-top.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
    .scroll-top:hover { background: #fff; color: #0a1a2e; transform: scale(1.08); }

    /* top bar */
    .top-bar { background: rgba(0,0,0,0.3); backdrop-filter: blur(4px); padding: 8px 0; font-size: 0.85rem; border-bottom: 1px solid rgba(255,193,7,0.2); }
    .top-bar .container { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; }
    .top-left span { margin-right: 20px; display: inline-block; }
    .top-left i { margin-right: 6px; color: #FFC107; width: 18px; }
    .top-right a { margin-left: 14px; color: #fff; transition: 0.3s; font-size: 1.1rem; }
    .top-right a:hover { color: #FFC107; transform: scale(1.1); }

    /* header */
    .header { padding: 18px 0; background: rgba(4,18,48,0.7); backdrop-filter: blur(6px); border-bottom: 1px solid rgba(255,193,7,0.15); position: sticky; top: 0; z-index: 100; }
    .header .container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; }
    .logo-placeholder { font-size: 1.8rem; font-weight: 700; color: #FFC107; letter-spacing: 1px; }
    .logo-placeholder i { margin-right: 8px; color: #fff; }
    .logo-placeholder small { font-weight: 300; font-size: 0.9rem; color: #ddd; display: block; margin-top: -4px; letter-spacing: 2px; }
    .nav-menu { display: flex; align-items: center; gap: 28px; }
    .nav-menu a { color: #f0f0f0; font-weight: 500; font-size: 0.95rem; transition: 0.3s; position: relative; }
    .nav-menu a:hover { color: #FFC107; }
    .nav-menu a::after { content: ''; position: absolute; left: 0; bottom: -4px; width: 0; height: 2px; background: #FFC107; transition: 0.3s; }
    .nav-menu a:hover::after { width: 100%; }
    .nav-menu .btn-member {
      background: #FFC107;
      color: #0a1a2e;
      padding: 8px 22px;
      border-radius: 40px;
      font-weight: 600;
      transition: 0.3s;
      border: none;
      cursor: pointer;
    }
    .nav-menu .btn-member:hover { background: #fff; color: #0a1a2e; transform: scale(1.05); }
    .nav-menu .btn-member::after { display: none; }
    .hamburger { display: none; font-size: 1.8rem; cursor: pointer; color: #FFC107; background: transparent; border: none; }
    @media (max-width: 768px) {
      .hamburger { display: block; }
      .nav-menu { display: none; flex-direction: column; width: 100%; background: rgba(4,18,48,0.96); padding: 20px 0; margin-top: 16px; border-radius: 16px; gap: 16px; backdrop-filter: blur(8px); }
      .nav-menu.active { display: flex; }
      .nav-menu a { font-size: 1.1rem; padding: 6px 0; width: 100%; text-align: center; }
      .nav-menu .btn-member { width: auto; margin: 0 auto; }
      .header .container { flex-wrap: wrap; }
    }

    /* hero slider */
    /* HERO SPLIT LAYOUT */
    .hero-split {
      display: grid;
      grid-template-columns: 2fr 1fr;
      gap: 24px;
      margin: 30px 0 40px;
      min-height: 420px;
    }
    .hero-slider {
      position: relative;
      overflow: hidden;
      border-radius: 24px;
      box-shadow: 0 12px 30px rgba(0,0,0,0.6);
      min-height: 400px;
    }
    .hero-slide {
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: center;
      opacity: 0;
      transition: opacity 1s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 0 20px;
    }
    .hero-slide.active { opacity: 1; }
    .hero-slide::before {
      content: ''; position: absolute; inset: 0;
      background: rgba(4,18,48,0.55);
      backdrop-filter: brightness(0.7);
    }
    .hero-content {
      position: relative; z-index: 2; max-width: 550px;
    }
    .hero-content h2 {
      font-size: 2.4rem;
      text-shadow: 0 4px 14px rgba(0,0,0,0.6);
      margin-bottom: 10px;
    }
    .hero-content p {
      font-size: 1.1rem;
      opacity: 0.9;
      margin-bottom: 18px;
    }
    .hero-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
    .btn { padding: 10px 28px; border-radius: 40px; font-weight: 600; border: none; cursor: pointer; transition: 0.3s; font-size: 0.95rem; }
    .btn-primary { background: #FFC107; color: #0a1a2e; }
    .btn-primary:hover { background: #fff; transform: scale(1.05); }
    .btn-outline { background: transparent; border: 2px solid #FFC107; color: #FFC107; }
    .btn-outline:hover { background: #FFC107; color: #0a1a2e; }
    .hero-dots {
      position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
      display: flex; gap: 10px; z-index: 5;
    }
    .hero-dots span {
      width: 10px; height: 10px; background: rgba(255,255,255,0.5);
      border-radius: 50%; cursor: pointer; transition: 0.3s;
    }
    .hero-dots span.active-dot { background: #FFC107; transform: scale(1.2); }

    /* Right side: Recent Blog Posts */
    .recent-posts {
      display: flex;
      flex-direction: column;
      gap: 16px;
      border-radius: 24px;
      background: rgba(255,255,255,0.04);
      padding: 18px 16px;
      backdrop-filter: blur(4px);
      border: 1px solid rgba(255,193,7,0.1);
      min-height: 400px;
      justify-content: center;
    }
    .recent-posts h3 {
      color: #FFC107;
      font-size: 1.1rem;
      border-bottom: 1px solid rgba(255,193,7,0.2);
      padding-bottom: 10px;
      margin-bottom: 6px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .recent-post-item {
      display: flex;
      gap: 14px;
      align-items: center;
      background: rgba(255,255,255,0.03);
      padding: 10px 12px;
      border-radius: 16px;
      transition: 0.3s;
      border-left: 3px solid transparent;
      cursor: default;
    }
    .recent-post-item:hover {
      background: rgba(255,193,7,0.08);
      border-left-color: #FFC107;
      transform: translateX(4px);
    }
    .recent-post-item img {
      width: 70px;
      height: 70px;
      object-fit: cover;
      border-radius: 12px;
      border: 1px solid rgba(255,193,7,0.15);
      flex-shrink: 0;
    }
    .recent-post-item .post-info h4 {
      font-size: 0.9rem;
      color: #fff;
      margin-bottom: 2px;
      line-height: 1.3;
    }
    .recent-post-item .post-info .meta {
      font-size: 0.7rem;
      opacity: 0.6;
      display: flex;
      gap: 10px;
    }
    .recent-post-item .post-info .meta span { background: rgba(255,193,7,0.12); padding: 0 8px; border-radius: 12px; color: #FFC107; }

    @media (max-width: 992px) {
      .hero-split { grid-template-columns: 1fr; }
      .recent-posts { min-height: auto; flex-direction: row; flex-wrap: wrap; justify-content: center; }
      .recent-post-item { flex: 1 1 200px; min-width: 180px; }
      .hero-slider { min-height: 320px; }
    }
    @media (max-width: 600px) {
      .hero-content h2 { font-size: 1.8rem; }
      .recent-post-item { flex: 1 1 100%; }
    }
    /* sections with animation */
    section { margin: 60px 0;  transform: translateY(40px); transition: opacity 0.7s ease, transform 0.7s ease; }
    section.visible { opacity: 1; transform: translateY(0); }
    .section { margin: 60px 0; }
    .section-title { font-size: 2rem; margin-bottom: 28px; border-left: 6px solid #FFC107; padding-left: 18px; }

    .about-grid { display: grid; grid-template-columns: repeat(1,1fr); gap: 24px; }
    .about-card { background: rgba(255,255,255,0.04); backdrop-filter: blur(4px); padding: 22px 18px; border-radius: 20px; border: 1px solid rgba(255,193,7,0.15); transition: 0.25s; }
    .about-card:hover { background: rgba(255,193,7,0.05); border-color: #FFC107; transform: translateY(-4px); }
    .about-card h4 { color: #FFC107; margin-bottom: 8px; font-size: 1.2rem; }

    .why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
    .why-grid img { width: 100%; border-radius: 24px; border: 1px solid rgba(255,193,7,0.2); }
    .why-list { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
    .why-item { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,0.04); padding: 14px 18px; border-radius: 16px; border-left: 4px solid #FFC107; }
    .why-item i { font-size: 1.6rem; color: #FFC107; animation: pulse 2s infinite; }
    @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.15); } 100% { transform: scale(1); } }
    @media (max-width:768px) { .why-grid { grid-template-columns: 1fr; } .why-list { grid-template-columns: 1fr; } }
    
    /* Sport Categories */
    .sport-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
    .sport-card { background: rgba(255,255,255,0.04); padding: 28px 16px; border-radius: 20px; text-align: center; border: 1px solid rgba(255,193,7,0.12); transition: 0.3s; }
    .sport-card:hover { transform: translateY(-6px); border-color: #FFC107; background: rgba(255,193,7,0.05); }
    .sport-card i { font-size: 3rem; color: #FFC107; margin-bottom: 12px; display: block; }
    .sport-card h4 { color: #FFC107; font-size: 1.1rem; }
    .sport-card p { font-size: 0.85rem; opacity: 0.8; margin-top: 4px; }
    @media (max-width:768px) { .sport-grid { grid-template-columns: 1fr 1fr; } }
    @media (max-width:480px) { .sport-grid { grid-template-columns: 1fr; } }
    
    /* management with image placeholders */
    .management-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
    .mgmt-card { background: rgba(255,255,255,0.03); padding: 20px 12px; border-radius: 20px; text-align: center; border: 1px solid rgba(255,193,7,0.15); }
    .mgmt-card img { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 2px solid #FFC107; margin-bottom: 10px; }

    /* partners grid (new) */
    .partners-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 20px; align-items: center; }
    .partners-grid img { width: 100%; max-width: 140px; height: 70px; object-fit: contain; filter: grayscale(0.8) brightness(1.5); transition: 0.3s; margin: 0 auto; display: block; }
    .partners-grid img:hover { filter: grayscale(0) brightness(1); transform: scale(1.05); }
    @media (max-width:768px) { .partners-grid { grid-template-columns: repeat(3,1fr); } }
    @media (max-width:480px) { .partners-grid { grid-template-columns: 1fr 1fr; } }

    /* achievements */
    .achievement-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
    .achievement-card { background: rgba(255,255,255,0.04); padding: 30px 16px; border-radius: 20px; text-align: center; border: 1px solid rgba(255,193,7,0.1); transition: 0.3s; }
    .achievement-card:hover { transform: scale(1.03); border-color: #FFC107; background: rgba(255,193,7,0.05); }
    .achievement-card .number { font-size: 3rem; font-weight: 700; color: #FFC107; display: block; line-height: 1.2; }
    .achievement-card .label { font-size: 0.9rem; opacity: 0.8; margin-top: 4px; }
    @media (max-width:768px) { .achievement-grid { grid-template-columns: 1fr 1fr; } }
    @media (max-width:480px) { .achievement-grid { grid-template-columns: 1fr; } }
    
    /* success carousel */
    .carousel-wrapper { position: relative; overflow: hidden; border-radius: 24px; }
    .carousel-track { display: flex; transition: transform 0.5s ease; }
    .carousel-item { min-width: 100%; padding: 0 10px; display: grid; grid-template-columns: 1fr 2fr; gap: 20px; align-items: center; background: rgba(255,255,255,0.04); border-radius: 24px; padding: 20px; border: 1px solid rgba(255,193,7,0.1); }
    .carousel-item img { width: 100%; height: 200px; object-fit: cover; border-radius: 20px; }
    .carousel-item .story-info h3 { color: #FFC107; margin-bottom: 6px; }
    .carousel-item .story-info p { opacity: 0.9; margin-bottom: 4px; }
    .carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.5); backdrop-filter: blur(6px); color: #FFC107; border: none; padding: 12px 16px; font-size: 1.8rem; cursor: pointer; border-radius: 40px; transition: 0.2s; z-index: 5; }
    .carousel-btn:hover { background: #FFC107; color: #0a1a2e; }
    .carousel-btn.prev { left: 12px; } .carousel-btn.next { right: 12px; }

    /* blog */
    .blog-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 30px; }
    .blog-card { background: rgba(255,255,255,0.04); border-radius: 20px; overflow: hidden; border: 1px solid rgba(255,193,7,0.1); transition: 0.3s; }
    .blog-card:hover { transform: scale(1.02); border-color: #FFC107; }
    .blog-card img { width: 100%; height: 170px; object-fit: cover; }
    .blog-body { padding: 18px; }
    .blog-body h4 { margin-bottom: 4px; font-size: 1.1rem; }
    .blog-meta { font-size: 0.8rem; opacity: 0.7; display: flex; gap: 14px; flex-wrap: wrap; margin: 6px 0 10px; }
    .blog-meta span { background: rgba(255,193,7,0.15); padding: 0 10px; border-radius: 20px; color: #FFC107; }

    /* president */
    .president-box { display: flex; gap: 30px; align-items: center; background: rgba(255,255,255,0.04); padding: 30px; border-radius: 28px; border-left: 6px solid #FFC107; backdrop-filter: blur(4px); }
    .president-box img { width: 160px; height: 160px; object-fit: cover; border-radius:50%; border: 3px solid #FFC107; }
    @media (max-width:768px) { .president-box { flex-direction: column; text-align: center; } }

    /* players carousel (adorable) */
    /*.players-carousel { background: rgba(255,255,255,0.03); padding: 30px 0; border-radius: 28px; border: 1px solid rgba(255,193,7,0.1); }
    .player-wrapper { overflow: hidden; position: relative; }
    .player-track { display: flex; transition: transform 0.6s ease; }
    .player-card { min-width: 25%; padding: 10px; text-align: center; }
    .player-card img { width: 400px; height: 450px; object-fit: cover; border: 3px solid #FFC107; margin-bottom: 10px; padding: 10px; transition: 0.3s; }
    .player-card:hover img { transform: scale(1.05); border-color: #fff; }
    .player-card h4 { color: #FFC107; font-size: 1rem; }
    .player-card p { font-size: 0.8rem; opacity: 0.8; }
    @media (max-width:768px) { .player-card { min-width: 50%; } }
    @media (max-width:480px) { .player-card { min-width: 100%; } }*/
    
    /* ============================
   PLAYERS CAROUSEL
    ============================ */
    .players-carousel {
        background: rgba(255, 255, 255, 0.03);
        padding: 30px 0;
        border-radius: 28px;
        border: 1px solid rgba(255, 193, 7, 0.1);
        position: relative;
    }
    
    .player-wrapper {
        overflow: hidden;
        position: relative;
        width: 100%;
    }
    
    .player-track {
        display: flex;
        transition: transform 0.6s ease;
        will-change: transform;
    }
    
    /* Exactly 400px wide for each player */
    .player-card {
        flex: 0 0 400px;
        width: 400px;
        padding: 10px;
        text-align: center;
        box-sizing: border-box;
    }
    
    /* Player image: exactly 400px × 450px */
    .player-card img {
        display: block;
        width: 400px;
        height: 450px;
        object-fit: cover;
    
        border: 3px solid #FFC107;
        margin: 0 auto 10px;
        padding: 10px;
        box-sizing: border-box;
    
        transition: transform 0.3s ease, border-color 0.3s ease;
    }
    
    .player-card:hover img {
        transform: scale(1.03);
        border-color: #fff;
    }
    
    .player-card h4 {
        color: #FFC107;
        font-size: 1rem;
    }
    
    .player-card p {
        font-size: 0.8rem;
        opacity: 0.8;
    }
    
    
    /* ============================
       CAROUSEL BUTTONS
    ============================ */
    .carousel-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    
        width: 50px;
        height: 50px;
    
        border: 2px solid #FFC107;
        border-radius: 50%;
    
        background: rgba(0, 0, 0, 0.7);
        color: #FFC107;
    
        display: flex;
        align-items: center;
        justify-content: center;
    
        cursor: pointer;
        z-index: 10;
    
        transition: all 0.3s ease;
    }
    
    .carousel-btn:hover {
        background: #FFC107;
        color: #000;
    }
    
    .carousel-btn.prev {
        left: 15px;
    }
    
    .carousel-btn.next {
        right: 15px;
    }
    
    
    /* ============================
       DESKTOP
       3 PLAYERS VISIBLE
    ============================ */
    @media (min-width: 1250px) {
    
        .player-wrapper {
            max-width: 1230px;
            margin: 0 auto;
        }
    
        .player-card {
            flex: 0 0 410px;
            width: 410px;
        }
    }
    
    
    /* ============================
       TABLET
       2 PLAYERS VISIBLE
    ============================ */
    @media (max-width: 1249px) and (min-width: 851px) {
    
        .player-card {
            flex: 0 0 50%;
            width: 50%;
        }
    
        .player-card img {
            width: 100%;
            max-width: 400px;
            height: 450px;
        }
    }
    
    
    /* ============================
       MOBILE
       1 PLAYER VISIBLE
    ============================ */
    @media (max-width: 850px) {
    
        .player-card {
            flex: 0 0 100%;
            width: 100%;
        }
    
        .player-card img {
            width: 100%;
            max-width: 400px;
            height: 450px;
        }
    
        .carousel-btn {
            width: 42px;
            height: 42px;
        }
    
        .carousel-btn.prev {
            left: 8px;
        }
    
        .carousel-btn.next {
            right: 8px;
        }
    }

    /* management with image placeholders */
    .management-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
    .mgmt-card { background: rgba(255,255,255,0.03); padding: 20px 12px; border-radius: 20px; text-align: center; border: 1px solid rgba(255,193,7,0.15); }
    .mgmt-card img { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 2px solid #FFC107; margin-bottom: 10px; }

    /* partners carousel */
    .partners-carousel { background: rgba(255,255,255,0.03); padding: 30px 0; border-radius: 28px; margin: 40px 0; border: 1px solid rgba(255,193,7,0.1); }
    .partner-track { display: flex; gap: 40px; overflow: hidden; animation: scrollPartners 18s linear infinite; }
    .partner-track img { height: 60px; filter: grayscale(1) brightness(2); transition: 0.3s; }
    .partner-track img:hover { filter: grayscale(0) brightness(1); }
    @keyframes scrollPartners { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
    .partner-wrapper { overflow: hidden; }

    /* CTA */
    .cta-section { padding: 60px 20px; text-align: center; border-radius: 28px; background: linear-gradient(135deg, rgba(255,193,7,0.15), rgba(4,18,48,0.8)), url('https://placecats.com/1200/400?random=99') center/cover; position: relative; overflow: hidden; margin: 40px 0; }
    .cta-section::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(45deg, rgba(255,193,7,0.05) 0px, rgba(255,193,7,0.05) 20px, transparent 20px, transparent 40px); animation: moveBg 6s linear infinite; }
    @keyframes moveBg { 0% { background-position: 0 0; } 100% { background-position: 40px 40px; } }
    .cta-section h2 { font-size: 2.6rem; position: relative; z-index: 2; }
    .cta-section .btn { position: relative; z-index: 2; margin-top: 20px; }

    /* footer */
    .footer { margin-top: 70px; padding: 40px 0 20px; border-top: 1px solid rgba(255,193,7,0.2); background: rgba(0,0,0,0.25); backdrop-filter: blur(4px); }
    .footer .container { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; }
    .footer-left .logo-placeholder { font-size: 1.6rem; }
    .footer-social a { color: #fff; margin-right: 16px; font-size: 1.4rem; transition: 0.3s; }
    .footer-social a:hover { color: #FFC107; }
    .footer-right { display: flex; gap: 50px; flex-wrap: wrap; }
    .footer-right h5 { color: #FFC107; margin-bottom: 12px; font-size: 1rem; }
    .footer-right ul { list-style: none; }
    .footer-right ul li { margin-bottom: 8px; font-size: 0.9rem; opacity: 0.8; transition: 0.2s; cursor: default; }
    .footer-right ul li:hover { opacity: 1; color: #FFC107; }
    .footer-bottom { border-top: 1px solid rgba(255,193,7,0.1); margin-top: 30px; padding-top: 20px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; font-size: 0.85rem; opacity: 0.7; }
    .footer-bottom-links { display: flex; gap: 20px; }
    .footer-bottom-links a { transition: 0.3s; }
    .footer-bottom-links a:hover { color: #FFC107; opacity: 1; }

    @media (max-width:768px) {
      .about-grid, .blog-grid, .management-grid { grid-template-columns: 1fr; }
      .hero-content h2 { font-size: 2.2rem; }
      .footer .container { flex-direction: column; gap: 30px; }
      .footer-right { flex-direction: column; gap: 20px; }
      .carousel-item { grid-template-columns: 1fr; text-align: center; }
      .footer-bottom { flex-direction: column; gap: 10px; text-align: center; }
    }