@font-face {
    font-family: "toorball-club";
    src: local("kalame"), local("Kalameh(FaNum)");
}
body {
    padding-top: 32px !important;
}

.club-page {
    --club-ink: #1e2932;
    --club-red: #e74c3c;
    --club-soft: #fff5f1;
    --club-line: #e9e3df;
    color: var(--club-ink);
    background: #fff;
    font-family: "toorball-club", "kalame", sans-serif;
    overflow: hidden;
}

.club-page *, .club-page *::before, .club-page *::after { box-sizing: border-box; }
.club-header { width: min(1240px, calc(100% - 48px)); margin: auto; display: flex; flex-direction: row-reverse; align-items: center; justify-content: space-between; gap: 24px; }
.club-app-button { display: inline-flex; align-items: center; gap: 10px; padding: 14px 18px; border-radius: 16px; background: var(--club-red); color: #fff; font-size: 18px; text-decoration: none; }
.club-app-button:hover {
    color: white;
}
    .club-app-button span:first-child {
        font-size: 18px;
        line-height: 1;
    }
.club-brand { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 8px; align-items: center; color: var(--club-ink); text-decoration: none; }
.club-brand img {
    max-width: 160px;
}
.club-brand-mark { grid-row: 1 / span 2; display: grid; place-items: center; width: 48px; height: 48px; border: 3px solid var(--club-red); border-radius: 50%; color: var(--club-red); font-size: 27px; font-weight: 800; }
.club-brand-name { color: var(--club-red); font-size: 22px; font-weight: 800; line-height: 1; }
.club-brand-subtitle { color: var(--club-ink); font: 700 8px/1 sans-serif; letter-spacing: 1px; }
.club-hero { min-height: 852px; position: relative; display: grid; place-items: center; isolation: isolate;}

.club-hero-art {
    position: absolute;
    inset: 0;
    background: url(/images/aboutus/club-head.png);
    mix-blend-mode: multiply;
    background-size: auto;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.club-hero-content { width: min(560px, calc(100% - 48px)); margin-top: 500px; text-align: center; }
.club-kicker { display: inline-block; margin-bottom: 16px; color: var(--club-red); font-size: 40px; font-weight: 700; }
.club-hero h1, .club-section-heading h2, .club-levels h2, .club-join h2 { margin: 0; font-weight: 800; letter-spacing: 0; }
.club-hero h1 { font-size: 40px; line-height: 1.2; }
.club-hero p { /* max-width: 500px; */
    margin: 16px auto;
    color: #59636a;
    font-size: 16px;
    line-height: 2;
}
.club-primary-button { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 56px; padding: 12px 24px; border-radius: 16px; background: var(--club-red); color: #fff; font-size: 20px; font-weight: 500; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.club-primary-button:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 12px 24px rgba(231,76,60,.2); }
.club-benefits, .club-steps { padding: 64px; }
.club-section-heading { text-align: center; max-width: 680px; margin: 0 auto 48px; }
.club-section-heading h2, .club-levels h2 { font-size: 24px; line-height: 1.45; }
h2 .club-kicker {
    font-size: 24px;
}
.club-section-heading p, .club-levels-copy > p {
    margin: 12px 0 0;
    color: #68727a;
    font-size: 17px;
    line-height: 1.9;
}
.club-benefit-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.club-benefit-card { min-height: 200px; padding: 24px; border: 1px solid var(--club-line); border-radius: 18px; background: #fff; text-align: right; }
.club-benefit-icon img {
    width: 48px;
    margin-bottom: 16px;
}
.club-benefit-card h3, .club-step-card h3 { margin: 0 0 8px; font-size: 19px; }
.club-benefit-card p, .club-step-card p { margin: 0; color: #747c81; font-size: 15px; line-height: 1.9; }
.club-steps { background: #fafafa; }
.club-step-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.club-step-card { display: flex; align-items: flex-start; gap: 18px; padding: 26px; border-radius: 18px; background: #fff; }
.club-step-card > span { display: grid; place-items: center; flex: 0 0 50px; height: 50px; border-radius: 50%; background: var(--club-red); color: #fff; font-size: 20px; font-weight: 700; }
.club-levels { display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; gap: 80px; padding: 100px max(24px, calc((100% - 1160px) / 2)); }
.club-levels-copy { max-width: 510px; }
.club-text-link { display: inline-flex; gap: 10px; margin-top: 24px; color: var(--club-red); font-weight: 700; text-decoration: none; }
.club-levels-visual { display: flex; align-items: end; justify-content: center; gap: 18px; min-height: 340px; padding: 30px; border-radius: 28px; background: var(--club-soft); }
.club-level { display: flex; flex-direction: column; justify-content: end; width: 30%; min-height: 160px; padding: 18px; border-radius: 18px 18px 8px 8px; color: #fff; text-align: center; }
.club-level strong { font-size: 22px; }.club-level span { margin-top: 6px; font-size: 13px; opacity: .86; }
.club-level-bronze { min-height: 180px; background: #bd7d5d; }.club-level-silver { min-height: 235px; background: #8c9aa3; }.club-level-gold { min-height: 295px; background: #d99a32; }
.club-join { padding: 100px 24px; background: var(--club-ink); color: #fff; text-align: center; }
.club-join .club-kicker { color: #ffb5a8; }.club-join h2 { font-size: clamp(30px, 4vw, 48px); }.club-join p { margin: 16px 0 28px; color: #c5cdd2; font-size: 17px; }.club-primary-button-light { background: #fff; color: var(--club-ink); }.club-primary-button-light:hover { color: var(--club-ink); }
.clud-faq {
    padding-left: 100px;
    padding-right: 100px;
}
    .clud-faq .accordion-item {
        border-left: none;
        border-right: none;
        border-radius: 0 !important;
    }
        .clud-faq .accordion-item .accordion-button::after {
            margin-right: auto;
            margin-left: 0;
            width: 32px;
            height: 32px;
            flex: 0 0 32px;
            background-image: url("/images/icon/accordion-closed.svg");
            background-size: 32px 32px;
            transform: none;
        }
        .clud-faq .accordion-item .accordion-button:not(.collapsed)::after {
            background-image: url("/images/icon/accordion-open.svg");
            transform: none;
        }
        .clud-faq .accordion-item .accordion-button {
            background: none;
            color: #2c3e50;
            font-size: 16px;
            font-weight: 600;
            border: none;
            box-shadow: none;
            border-radius: 0 !important;
        }
        .clud-faq .accordion-item .accordion-header {
            padding-top: 24px;
            padding-bottom: 24px;
        }
        .clud-faq .accordion-item .accordion-body {
            color: #7D8891;
        }
.dl-card {
    margin-bottom: 16px;
    padding: 24px 16px;
    border-radius: 16px;
    border:1px solid #EDEDED;
    color: #2c3e50;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
    font-weight: 600;
    display: flex;
}
.dl-card img{
    max-width: 32px;
}
.widget-icon, .widget, #box-widget-icon {
    display: none !important;
}
@media (max-width: 800px) {
    .club-header {
        min-height: 88px;
        width: min(100% - 32px, 560px);
    }

    .club-app-button {
        padding: 11px 13px;
        font-size: 13px;
    }

    .club-brand-mark {
        width: 38px;
        height: 38px;
        font-size: 21px;
    }

    .club-brand-name {
        font-size: 18px;
    }

    .club-hero {
        min-height: 700px;
    }

    .club-hero-content {
        margin-top: 250px;
    }

    .club-hero p {
        font-size: 16px;
    }

    .club-benefit-grid, .club-step-list {
        grid-template-columns: repeat(2, 1fr);
    }

    .club-levels {
        grid-template-columns: 1fr;
        gap: 40px;
        padding-top: 72px;
        padding-bottom: 72px;
    }

    .club-download-card {
        grid-template-columns: 1fr auto;
    }

    .club-download-brand {
        display: none;
    }

    body {
        padding-top: 0!important;
    }
    .club-hero-art {
        position: absolute;
        inset: 0;
        background: url(/images/aboutus/club-head.png);
        mix-blend-mode: multiply;
        background-size: 500px;
        background-repeat: no-repeat;
        background-position: top;
    }
    .club-brand img {
        max-width: 100px;
    }
    .club-hero-content {
        margin-top: 24px;
    }
    .club-hero h1 {
        font-size: 24px!important;
    }
    .club-hero-content {
        margin-top: 24px!important;
    }
    .club-kicker {
        font-size: 24px!important;
        font-weight: 800!important;
    }
    .club-hero p {
        margin-top: 8px !important; 
    }
    .club-primary-button {
        font-size: 16px;
    }
    .clud-faq {
        padding-left: 0px;
        padding-right: 0px;
    }
}

@media (max-width: 520px) {
    .club-benefits { padding-right: 20px; padding-left: 20px; }
    .club-download-card { grid-template-columns: 1fr; gap: 28px; padding: 34px 24px; text-align: center; }
    .club-download-copy p { margin-right: auto; margin-left: auto; }
    .club-download-qr { justify-self: center; }
    .club-download-qr img { width: 120px; height: 120px; }
}
@media (max-width: 520px) {
     .club-header { gap: 12px; }.club-app-button span:first-child { display: none; }.club-brand-subtitle { font-size: 7px; }
    .club-hero { min-height: 500px; }.club-hero-content { margin-top: 124px !important; }.club-hero h1 { font-size: 24px; }.club-benefits, .club-steps { padding-top: 0; padding-bottom: 64px; }.club-benefit-grid, .club-step-list { grid-template-columns: 1fr; }.club-benefit-card { min-height: auto; }.club-levels-visual { gap: 8px; padding: 18px 10px; }.club-level { width: 32%; padding: 12px 6px; }.club-level strong { font-size: 17px; }.club-level span { font-size: 11px; }
}