/* ==========================================================
   SP44MS
   CARDS.CSS
   ========================================================== */

/* ==========================================
   SEKCJE
   ========================================== */

section{

    padding:6.25vw 0;

}

.section-header{

    max-width:39.5833vw;

    margin:0 auto 4.1667vw;

    text-align:center;

}

.section-subtitle{

    display:inline-block;

    padding:0.5208vw 1.0417vw;

    margin-bottom:1.1458vw;

    border-radius:52.0312vw;

    background:rgba(0,87,184,.08);

    color:var(--primary);

    font-size:.82rem;

    font-weight:700;

    letter-spacing:.18em;

    text-transform:uppercase;

}

.section-header h2{

    margin-bottom:1.4583vw;

    font-weight:800;

}

.section-header p{

    font-size:1.1rem;

    color:var(--text-light);

}

/* ==========================================
   ABOUT GRID
   ========================================== */

.about-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:1.7708vw;

}

.about-card{

    position:relative;

    overflow:hidden;

    padding:2.3438vw;

    border-radius:1.5625vw;

    background:#ffffff;

    box-shadow:var(--shadow-sm);

    transition:.45s;

}

.about-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(
        135deg,
        rgba(0,87,184,.03),
        rgba(0,174,239,.10)
    );

    opacity:0;

    transition:.45s;

}

.about-card:hover{

    transform:

    translateY(-0.7292vw);

    box-shadow:

    var(--shadow-lg);

}

.about-card:hover::before{

    opacity:1;

}

.about-icon{

    width:4.2708vw;

    height:4.2708vw;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:1.5625vw;

    border-radius:1.25vw;

    background:var(--gradient-primary);

    box-shadow:

    0 0.7812vw 1.8229vw rgba(0,87,184,.22);

}

.about-icon img{

    width:2.1875vw;

}

.about-card h3{

    margin-bottom:0.9375vw;

}

.about-card p{

    font-size:.98rem;

}

/* ==========================================
   SPORT GRID
   ========================================== */

.sports-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:1.9792vw;

}

.sport-card{

    overflow:hidden;

    border-radius:1.7708vw;

    background:#fff;

    box-shadow:var(--shadow-sm);

    transition:.45s;

}

.sport-card:hover{

    transform:

    translateY(-0.7812vw);

    box-shadow:var(--shadow-xl);

}

/* ==========================================
   ANIMACJE WEJŚCIA
   ========================================== */

.hidden-element{

    opacity:0;

    transform:translateY(4.1667vw);

    transition:

    opacity .8s ease,

    transform .8s ease;

}

.visible{

    opacity:1;

    transform:translateY(0);

}

/* ==========================================
   PRZYCISK TOP
   ========================================== */

#scrollTop{

    position:fixed;

    right:1.8229vw;

    bottom:1.8229vw;

    width:3.125vw;

    height:3.125vw;

    border-radius:50%;

    background:var(--gradient-primary);

    color:#fff;

    font-size:1.4rem;

    border:none;

    cursor:pointer;

    box-shadow:var(--shadow-lg);

    opacity:0;

    visibility:hidden;

    transform:translateY(1.5625vw);

    transition:.35s;

    z-index:999;

}

#scrollTop.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

#scrollTop:hover{

    transform:translateY(-0.3125vw);

}