/* EXTRA DESIGN */

        .club-list {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
            gap: 24px;
            margin-top: 40px;
        }

        .club-card {
            position: relative;
            background: #fff;
            border-radius: 24px;
            padding: 28px;
            overflow: hidden;
            box-shadow: 0 14px 35px rgba(0, 0, 0, 0.08);
            border: 1px solid #edf1f7;
            transition: all .35s ease;
        }

        .club-card::before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg,
                    rgba(209, 31, 58, 0.05),
                    rgba(11, 28, 61, 0.03));
            opacity: 0;
            transition: .35s ease;
        }

        .club-card::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 5px;
            background: linear-gradient(90deg,
                    #d11f3a,
                    #0b1c3d);
        }

        .club-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 22px 45px rgba(0, 0, 0, 0.12);
        }

        .club-card:hover::before {
            opacity: 1;
        }

        .club-card h4 {
            position: relative;
            z-index: 2;
            font-size: 22px;
            margin-bottom: 14px;
            color: #0b1c3d;
            font-weight: 700;
            font-family: 'Playfair Display', serif;
        }

        .club-card p {
            position: relative;
            z-index: 2;
            font-size: 15px;
            line-height: 1.9;
            color: #5c6574;
            margin: 0;
        }

        .sports-img img,
        .prog-image img {
            border-radius: 32px;
            width: 100%;
            height: 100%;
            object-fit: cover;
            box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
            transition: transform .5s ease;
        }

        .sports-img img:hover,
        .prog-image img:hover {
            transform: scale(1.03);
        }

        .sports-img,
        .prog-image {
            overflow: hidden;
            position: relative;
        }

        @media(max-width:768px) {

            .club-list {
                grid-template-columns: 1fr;
                gap: 18px;
            }

            .club-card {
                padding: 22px;
                border-radius: 20px;
            }

            .stit {
                font-size: 34px;
            }

            .hero-text h1 {
                font-size: 40px;
            }

            .prog-text h3 {
                font-size: 28px;
            }

            .sports-img img,
            .prog-image img {
                border-radius: 22px;
            }

        }