:root {

  --bg-primary: #ffffff;
  --bg-secondary: #f8fafc;
  --bg-tertiary: #f1f5f9;
  --bg-border: #e2e8f0;
  --bg-glass: rgba(255, 255, 255, 0.95);
  
  
  --phosphor-blue-dark: #2563eb;
  --phosphor-blue-glow: #60a5fa;
  

  --primary: #af385c;
  --primary-dark: #2563eb;
  --secondary: #0ea5e9;    
  --accent: #f59e0b;    
  --warning: #fbbf24;
  --danger: #ef4444;
  

  --text-primary: #0f172a;
  --text-secondary: #334155;
  --text-muted: #64748b;

  --glow-blue: 0 0 15px rgba(59, 130, 246, 0.4), 0 0 30px rgba(59, 130, 246, 0.2);
  --glow-accent: 0 0 15px rgba(245, 158, 11, 0.4), 0 0 30px rgba(245, 158, 11, 0.2);
  

  --glass-bg: rgba(255, 255, 255, 0.9);
  --glass-border: rgba(59, 130, 246, 0.3);
  

  --border: #e2e8f0;
  --shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Yekan', 'Segoe UI', Tahoma, sans-serif;
            background: #ffffff  ;
        }
        img {
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -o-user-select: none;
            user-select: none;
            -webkit-user-drag: none;
            -khtml-user-drag: none;
            -moz-user-drag: none;
            -o-user-drag: none;
        }

        .header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1000;
            padding: 20px 40px;
            transition: all 0.5s ease;
        }


.football-blue-gradient {
    width: 100%;
    background: linear-gradient(135deg, 
        #f8a9b2, 
        #ffc0d0, 
        #ffe0e6, 
        #f8ccd0, 
        #f3b0ba, 
        #ffabb4, 
        #f8a9b2);
    background-size: 300% 300%;
    animation: footballPulse 6s ease infinite;
}

@keyframes footballPulse {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
        canvas {
            display: block;
            width: 100%;
            height: auto;

            margin: 0;
            padding: 0;
        }
        .wave-container {
            width: 100%;
            position: relative;
    
        }

 
        .stadium-night-blue {
        background: radial-gradient(circle at 20% 30%, #003399, #001133);
        position: relative;
        overflow: hidden;
        }

   
        .stadium-night-blue::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0) 70%);
        animation: spotlight 12s linear infinite;
        pointer-events: none;
        }

@keyframes spotlight {
  0% {
    transform: translate(0%, 0%);
  }
  25% {
    transform: translate(10%, 5%);
  }
  50% {
    transform: translate(20%, 10%);
  }
  75% {
    transform: translate(5%, 15%);
  }
  100% {
    transform: translate(0%, 0%);
  }
}



        .header.scrolled {       
            background: linear-gradient(
                135deg,
                rgba(255, 255, 255, 0.25),
                rgba(255, 255, 255, 0.1)
                );
                backdrop-filter: blur(12px);
                transition: background 1s ease-in;
                                
                transition: all 1s ease;   
                padding: 12px 40px;
        }


        .header.scrolled .nav-link {
            color: #1b222c ;

        }
        .header.scrolled .logo-text{
            color: #1b222c ; 

        }
        .logo-text span{
            color: var(--primary) !important;
        }
        .header.scrolled .nav-link:hover{
            color: var(--primary) !important;
        }
        .header.scrolled .logo-icon{
            filter: none;
        }
        .nav-container {
            max-width: 1400px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
                .main-content {
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.6s ease;
        }

        body.loaded .main-content {
            opacity: 1;
            visibility: visible;
        }

        .hero {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            padding: 2rem;
            position: relative;
            overflow: hidden;
        }

        .hero::before {
            content: '';
            position: absolute;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle at 20% 50%, rgba(195, 0, 255, 0.08) 0%, transparent 50%);
            animation: slowMove 20s infinite alternate;
            z-index: 0;
        }

        @keyframes slowMove {
            0% { transform: translate(-10%, -10%); }
            100% { transform: translate(10%, 10%); }
        }

        .hero-content {
            position: relative;
            z-index: 1;
            max-width: 800px;
        }


        .loader-wrapper {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: calc(199999 * 10);
            transition: opacity 1.5s cubic-bezier(0.4, 0, 0.2, 1), visibility 1.5s ease;
        }

        .loader-wrapper.hide {
            opacity: 0;
            visibility: hidden;
        }

        .loader-container {
            text-align: center;
        }

        .modern-spinner {
            width: 70px;
            height: 70px;
            position: relative;
            margin: 0 auto;
        }

        .modern-spinner .circle {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            border: 3px solid transparent;
            border-top-color: var(--primary) ;
            animation: spin 1.2s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
        }

        .modern-spinner .circle:nth-child(2) {
            width: 80%;
            height: 80%;
            top: 10%;
            left: 10%;
            border-top-color: #c95e7e;
            animation-duration: 1.5s;
            animation-direction: reverse;
        }

        .modern-spinner .circle:nth-child(3) {
            width: 60%;
            height: 60%;
            top: 20%;
            left: 20%;
            border-top-color: #e04876;
            animation-duration: 1s;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

  
        .loader-text {
            margin-top: 30px;
            color: #4facfe;
            font-size: 1rem;
            letter-spacing: 2px;
            font-weight: 300;
            direction: rtl; 
            text-align: right;
        }

        .loader-text::after {
            content: '...';
            display: inline-block;
            width: 0;
            overflow: hidden;
            vertical-align: bottom;
            animation: dots 1.5s linear infinite;
        }

        @keyframes dots {
            0% { width: 0; }
            33% { width: 8px; } 
            66% { width: 16px; }
            100% { width: 24px; }
        }
        
        .logo {
            display: flex;
            align-items: center;
            gap: 5px;
            font-size: 1.5rem;
            font-weight: 800;
            color: #ffffff ; text-shadow: 0 0 5px rgba(112, 108, 108, 0.24);
            text-decoration: none;
        }

        .logo-icon {
            background: transparent;
            filter: brightness(100);
            width: 42px;
            height: 42px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.3rem;
            transform: rotate(5deg);
            transition: transform 0.3s ease;
            color: white;
        }

        .logo:hover .logo-icon {
            transform: rotate(0deg) scale(1.05);
        }

        .logo-text {
            font-family: "vaziri","Yekan";
            letter-spacing: -0.5px;
        }

        .logo-text span {
            color: var(--primary) !important ;
        }

        
        .nav-menu {
            display: flex;
            gap: 40px;
            list-style: none;
        }
        

        .nav-link {
            text-decoration: none;
            font-weight: 500;
            color: #ffffff ; text-shadow: 0 0 5px rgba(112, 108, 108, 0.24);
            font-size: 1rem;
            transition: all 0.3s ease;
            position: relative;
            padding: 8px 0;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .nav-link i {
            font-size: 1.1rem;
            color: var(--primary) !important;
            transition: all 0.3s ease;
        }

        .nav-link::after {
            content: '';
            position: absolute;
            bottom: 0;
            right: 0;
            width: 0;
            height: 2.5px;
            background: var(--primary) !important;
            transition: width 0.3s ease;
            border-radius: 2px;
        }

        .nav-link:hover {
            color: var(--primary) !important;
        }

        .nav-link:hover i {
            transform: translateY(-2px);
        }

        .nav-link:hover::after {
            width: 100%;
            right: 0;
            left: auto;
        }
        .h1-glow{
            position: relative;
            display: flex;
            height: 300px;
            width: 450px;
            justify-content: center;
            align-items: center;

        }
        .top-img{
            
            width: 100%;
            width: 100%;

        }
 


        .nav-link.active::after {
            width: 100%;
        }

        .nav-link.active  {
            color: var(--primary) !important;
        }


        .btn-join {
            background: var(--primary) !important;
            color: white;
            border: none;
            padding: 10px 28px;
            border-radius: 40px;
            font-weight: 600;
            font-size: 0.9rem;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 2px 8px rgba(185, 16, 148, 0.3);
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .btn-join i {
            font-size: 0.9rem;
            transition: transform 0.3s ease;
        }

        .btn-join:hover {
            background: var(--primary) !important;
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(113, 17, 126, 0.4);
        }

        .btn-join:hover i {
            transform: translateX(-4px);
        }
                .floating {
            position: absolute;
            animation: float 6s infinite ease-in-out;
        }

        .floating:nth-child(1) {
            user-select: none;
            top: -36%;
            right: -130%;
            animation-delay: 0s;
            z-index: -1;
        }

        .floating:nth-child(2) {
            user-select: none;
            top: 12%;
                left: -130%;
            animation-delay: -2s;
            z-index: -1;
        }

        .floating:nth-child(3) {
            user-select: none;
            top: 70%;
            right: -115%;
            animation-delay: -4s;
            z-index: -1;
        }
                @media (max-width: 768px) {
        .floating:nth-child(1) {
            user-select: none;
            top: -35%;
            right: -75%;
            animation-delay: 0s;
            z-index: -1;
        }

        .floating:nth-child(2) {
            user-select: none;
            top: -10%;
            left: -75%;
            animation-delay: -2s;
            z-index: -1;
        }

        .floating:nth-child(3) {
            user-select: none;
            top: 70%;
            right: -50%;
            animation-delay: -4s;
            z-index: -1;
        }
        }
                @keyframes float {
            0%, 100% {
                transform: translateY(0) rotate(0deg);
            }
            50% {
                transform: translateY(-20px) rotate(5deg);
            }
        }


        .hamburger {
            display: none;
            flex-direction: column;
            gap: 5px;
            cursor: pointer;
            background: none;
            border: none;
        }

        .hamburger span {
            width: 28px;
            height: 2.5px;
            background: #af385c;
            transition: all 0.3s ease;
            border-radius: 2px;
        }
        footer{direction:rtl;width: 100%; background-color: #f392a0; color:#ffffff;padding:50px 20px 30px;font-family:"Segoe UI",Tahoma,Geneva,Verdana,sans-serif}.footer-container{max-width:1200px;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:space-between;gap:40px}.footer-col{flex:1;min-width:200px}.footer-col h3{color:#fff;font-size:1.3rem;margin-bottom:20px;position:relative;display:inline-block}.footer-col h3::after{content:"";position:absolute;bottom:-8px;right:0;width:40px;height:3px;background:var(--primary) !important;border-radius:2px}.quick-links{list-style:none}.quick-links li,.support-info p{margin-bottom:12px}.quick-links a{color:rgb(255, 255, 255);text-decoration:none;transition:all .3s ease;display:inline-flex;align-items:center;gap:8px}.quick-links a i{font-size:14px;color:var(--primary) !important}.quick-links a:hover{color:var(--primary) !important;transform:translateX(-5px)}.support-info p{display:flex;align-items:center;gap:10px}.support-info i{width:25px;color:var(--primary) !important;font-size:1.1rem}.social-icons a,.support-info a{color:rgb(255, 255, 255);text-decoration:none;transition:color .3s}.support-info a:hover{color:var(--primary) !important}.social-icons{display:flex;gap:15px;margin-top:20px;flex-wrap:wrap}.social-icons a{background:rgba(255,255,255,.1);width:42px;height:42px;display:flex;align-items:center;justify-content:center;border-radius:50%;color:#ffffff;font-size:1.3rem;transition:all .3s ease}.social-icons a:hover{background:var(--primary) !important;color:#fff;transform:translateY(-3px)}.trust-badge{margin-top:25px}.trust-badge img{max-width:100px;background:#fff;border-radius:12px;padding:8px}.copyright{text-align:center;padding-top:40px;margin-top:40px;border-top:1px solid rgba(255,255,255,.1);font-size:.85rem;color:#ffffff}.badge{background:#0f172a;padding:.2rem .6rem;border-radius:30px;font-size:.65rem;border-right:2px solid #0ff}.footer-note{margin-top:1.5rem;text-align:center;background:#050a15aa;backdrop-filter:blur(8px);border-radius:1.2rem;padding:.6rem;font-size:.65rem;color:#df8787;border:1px solid #1e2a4a}@media (min-width:481px) and (max-width:768px){.footer-container{flex-direction:column;gap:30px}}

        @media (max-width: 768px) {

            .header {
                padding: 16px 24px;
            }
            
            .header.scrolled {
                
                padding: 10px 24px;
            }
            
            .hamburger {
                display: flex;
            }
            
            .nav-menu {
                position: fixed;
                top: 70px;
                right: -100%;
                width: 80%;
                max-width: 300px;
                height: calc(100vh - 70px);
                background: linear-gradient(88deg, #ffecf6, #f76db2);
                backdrop-filter: blur(12px);
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 32px;
                transition: right 0.3s ease;
                box-shadow: 0px 0 30px rgba(0, 0, 0, 0.1);
                border-radius: 20px 0 0 20px;
            }
            
            .nav-menu.active {
                color: #0a0a0a !important;
                right: 0;
            }
            
            .nav-link {
                font-size: 1.1rem;
            }
            
            .nav-link i {
                font-size: 1.2rem;
            }
            
            .hamburger.active span:nth-child(1) {
                transform: rotate(45deg) translate(5px, 5px);
            }
            
            .hamburger.active span:nth-child(2) {
                opacity: 0;
            }
            
            .hamburger.active span:nth-child(3) {
                transform: rotate(-45deg) translate(7px, -7px);
            }
            
            .mobile-btn {
                display: block;
                margin-top: 20px;
            }
            
            .desktop-btn {
                display: none;
            }
        }
        
        @media (min-width: 769px) {

            .mobile-btn {
                display: none;
            }
        }
        

        .hero-demo {
            position: relative;
            height: 100vh;
            background: linear-gradient(135deg, #ffffff 0%, #ecfdf5 50%, #f0fdf4 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding-top: 80px;
        }
        .hero-img{
          
            box-shadow: 0 5px 20px #cfcaca;
            box-shadow: 0 2px 20px var(--primary) !important;
            position: absolute;
            display: flex;
            inset: 0;
            width: 100%;
            z-index: 0;
     

        }
        
        .hero-img img{
        
            width: 100%;
         
            inset: 0;
        }

        .hero-demo h1 {
            position: relative;
            font-size: 3.5rem;
            z-index: 1;

            color: #0a0a0a;
        }
        
        .hero-demo h1 span {
            color: var(--primary) !important;
        }
        
        .hero-demo p {
            margin-top: 20px;
            color: #a55a70;
            font-size: 1.1rem;
        }
        .hero-content {
            font-family: "Yekan";
            text-align: center;
            max-width: 1200px;
            margin: 0 auto;
            position: relative;
            z-index: 2;
        }


        .hero-title {
            font-size: 5rem;
            font-weight: 900;
            margin-bottom: 20px;
            line-height: 1.2;
            animation: fadeInUp 0.8s ease 0.1s backwards;
        }

        .hero-title .line1 {
            display: block;
            background: linear-gradient(135deg, #a1a1a1, #ffffff);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        .hero-title .highlight {
            display: block;
            background: linear-gradient(135deg, var(--primary) , #3b82f6, #3076f7);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            font-size: 5.5rem;
            margin: 10px 0;
            position: relative;
            display: inline-block;
        }

        .hero-title .highlight::before {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 0;
            width: 100%;
            height: 4px;
            background: linear-gradient(135deg, #fecfef 100%, #ff9a9e 0%, #fecfef 100%);
           border-radius: 4px;
            animation: expandWidth 0.8s ease 0.5s backwards;
        }

        @keyframes expandWidth {
            from {
                width: 0;
            }
            to {
                width: 100%;
            }
        }

        .hero-title .line3 {
            display: block;
            background: linear-gradient(135deg, #ffffff, #d8dde4);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            font-size: 3rem;
            margin-top: 10px;
        }

        .hero-description {
            font-size: 1.2rem;

            max-width: 600px;
            margin: 30px auto;
            line-height: 1.8;
            animation: fadeInUp 0.8s ease 0.2s backwards;
        }

        .content-section {
            padding: 80px 40px;

            margin: 0 auto;
        }

#about {
    position: relative;
    color: white !important;
    display: inline-block;
    width: 100%;
    overflow: hidden;
}

#about::after {
    content: "";
    position: absolute;
    top: 25%;
    left: 23%;
    filter: blur(2.5px);
    animation: float 6s infinite ease-in-out ;

    width: 12rem;
    height: 12rem;
    background-image: url('../img/f6bbd168ca7ea65e55a5fb13978d972a.png');
    background-size: cover;
    z-index: 0;
    background-repeat: no-repeat;
}

                @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }


            .fade-item {
            opacity: 0;
            transition: all 0.8s ease 0.2s;
            }

           
            .fade-item.visible {
            opacity: 1;
            transform: translate(0, 0);
            }

      
            .fade-up {
            transform: translateY(30px);
            }

            .fade-down {
            transform: translateY(-30px);
            }

            .fade-left {
            transform: translateX(30px);
            }

            .fade-right {
            transform: translateX(-30px);
            }

            .fade-up-left {
            transform: translate(-30px, 30px);
            }

            .fade-up-right {
            transform: translate(30px, 30px);
            }

            .fade-down-left {
            transform: translate(-30px, -30px);
            }

            .fade-down-right {
            transform: translate(30px, -30px);
            }

            .fade-zoom-in {
            transform: scale(0.8);
            }

            .fade-zoom-out {
            transform: scale(1.2);
            }


            .fade-rotate {
            transform: rotate(-10deg) scale(0.9);
            }
        
        .content-section h2 {
            
            color: inherit;
            margin-bottom: 20px;
            font-size: 2rem;
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .content-section h2::after {
            content: "";
            position: absolute;
            bottom: -8px;
            right: 0;
            width: 70px;
            height: 3px;
            background: var(--primary) !important;
            border-radius: 2px;
        }
        
        .content-section h2 i {
            
            color: var(--primary) !important;
            font-size: 2rem;
        }
        
        .content-section p {
            font-family: "vaziri";
            position: relative;
            z-index: 1;
            color: inherit;
            line-height: 1.8;
        }
        #flower::after {
                        content: "";
            position: absolute;
            top: 0%;
            left: 0%;
            filter: blur(2.5px);
            animation: float 6s infinite ease-in-out;
            width: 16rem;
            height: 16rem;
            background-image: url(../img/5cba34fac13da7192be7c9a3e1a07693s.png);
            background-size: cover;
            z-index: -1;
            background-repeat: no-repeat;
        }
        .stats {

            display: flex;
            gap: 40px;
            margin-top: 40px;
            flex-wrap: wrap;
        }

        
        .stat-card {
            box-shadow: 0 2px 20px rgba(0, 0, 0, 0.267);
            background: #f8fafc;
            padding: 24px;
            border-radius: 20px;
            text-align: center;
            flex: 1;
            min-width: 150px;
            transition: all 0.6s ease ;
        }


        .stat-card:nth-child(1) {
            animation-delay: 0s;
        }        
        .stat-card:nth-child(2) {
 
            animation-delay: 0.2s;
        }
        .stat-card:nth-child(3) {
            animation-delay: 0.6s;
        }

        .stat-card:hover {

            transform: translateY(-5px);
            box-shadow: 0 12px 20px rgba(0, 0, 0, 0.267);

        }
        
        .stat-card i {
            font-size: 2.5rem;
            color: var(--primary) !important;
            margin-bottom: 12px;
        }
        
        .stat-card h3 {
            font-size: 1.8rem;
            color: #0a0a0a !important;

        }
        
        .stat-card p {
            font-size: 0.9rem;
            color: #64748b;
        }
        .slider-container {
            position: relative;
            direction: ltr;
            max-width: 1400px;
            width: 100%;
            margin-block: 45px;
            justify-self: center;
            backdrop-filter: blur(2px);
            border-radius: 2.5rem;
            padding: 1.8rem 1rem;
        }


        .badge-count {
            background: #af385c;
            color: white;
            padding: 0.3rem 1rem;
            border-radius: 50px;
            font-weight: 500;
            font-size: 0.9rem;
        }


        .horizontal-scroll {
            display: flex;
            overflow-x: auto;
            scroll-behavior: smooth;
            gap: 1.5rem;
            padding: 1.2rem 0.8rem 1.8rem 0.8rem;
        }
        .horizontal-scroll::-webkit-scrollbar {
            height: 8px;
        }
        .horizontal-scroll::-webkit-scrollbar-track {
            background: #e2f0ff;
            border-radius: 20px;
        }
        .horizontal-scroll::-webkit-scrollbar-thumb {
            background: #ad274f;
            border-radius: 20px;
        }
        scrollbar-thumb:hover {
            background: var(--primary) !important;
        }


        .player-card {
            flex: 0 0 auto;
            width: 24%;
            background: #ffffff;
            border-radius: 28px;
            overflow: hidden;
   
            transition: all 0.25s ease;
            border: 1px solid rgba(245, 245, 245, 0.3);
            backdrop-filter: blur(2px);
            text-align: center;
            cursor: pointer;
        }
        .player-card:hover {
            transition: all 0.6s ease;
            transform: translateY(-6px);
            color: white;
            border-color: white;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);

        }

 
        .card-img {
            
            
            padding:0;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .card-img img {
            user-select: none;
            width: 100%;

            object-fit: cover;
            border: 4px solid white;

            transition: 0.2s;
        }
 

      
        .player-info {
            padding: 0.5rem 0.8rem 1.2rem 0.8rem;
        }
        .player-name {
            font-family: "Yekan";
            font-weight: 800;
            font-size: 1.2rem;
            color: #af385c;
            margin-bottom: 0.25rem;
            white-space: nowrap;
            overflow-x: hidden;
            text-overflow: ellipsis;
        }
        button {
                background: none;
                border: none;
                padding: 0;
                margin: 0;
                font: inherit; 
                color: inherit;
                cursor: pointer; 
                outline: none; 
        }
  
        .nav-buttons {
            display: flex;
            justify-content: center;
            gap: 1rem;
            margin-top: 1rem;
        }
        .nav-btn {
            position: absolute;
            background: #ffffffcc;
            backdrop-filter: blur(4px);
            text-decoration: none;
            padding: 0.4rem 1.2rem;
            border-radius: 50px;
            font-weight: bold;
            color: #af385c;
            font-size: 0.9rem;
            cursor: pointer;
            transition: 0.2s;
        }
        #scrollRightBtn{
            top: 40%;
             right: -40px;


             
        }
         #scrollLeftBtn{
            top: 40%;
             left: -40px;
         }
        .nav-btn:hover {

            color: rgb(0, 0, 0);
            border-color: white;
        }

.loading-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.card-img {
    position: relative;
    min-height: 200px;
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-img img {
    width: 100%;
    height: auto;
    display: block;
    position: relative;
    z-index: 2;
    transition: opacity 0.3s ease;
}


.card-img img {
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
        .wave-wrapper{
            position: relative;
            width: 100%;
            overflow: hidden;
        }

        #footWave{
            width:100%;
            height:220px;
            display:block;
        }
        footer{
    position: relative;
    z-index: 1;
    overflow: hidden;
}
#players{
    position: relative;
    overflow: hidden;
}
            #players::after{
                content: "";
                position: absolute;
                top: 2%;
                left: 12%;
                filter: blur(2.5px);
                animation: float 6s infinite ease-in-out;
                width: 12rem;
                rotate: 65deg;
                height: 12rem;
                background-image: url(../img/7dbea4e478a14ccd9d988e18777d2fa8.png);
                background-size: cover;
                z-index: 0;
                background-repeat: no-repeat;
            }


        @media (max-width:768px){
.player-card {
    width: 210px;
    min-width: 210px;
    height: 262px;  

   
}
#players::after{
                    width: 6rem;
                height: 6rem;
}
#about::after {
        width: 6.5rem;
    height: 6.5rem;
}
            .card-img{ height: 80%; overflow: hidden;}
            .center-avatar{
                width:90px;
                height:90px;
                border-width:4px;
            }
.player-card{
    height: 100%;
}

        }
        @media (max-width: 700px) {
            
            .player-card { width: 102px; }
            #scrollRightBtn #scrollLeftBtn { display: none;}

            .player-name { font-size: 1rem; }
        }