/*UTILITY - GLOBAL*/

.Section {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 12vh;
}

.Container {
    width: 70%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

/* TABLET */
@media screen and (max-width:989px) and (min-width:576px) {
    .Container {
        width: 80%;
    }
}
/* MOBILE */
@media screen and (max-width:575px) {
    .Container {
        width: 90%;
    }
}

/*LANDING - HERO*/

.AboutClubHeroBackground {
    width: 100%;
    height: 40vw;
    min-height: 60vh;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: linear-gradient(rgba(0, 0, 0, 0.6),rgba(10, 10, 10, 0.95)), url('../TitleBg.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center !important;
    color: white;
    border-bottom: solid #C8102F 8px;
}

.AboutClubTitle {
    font-size: 6vh;
    font-kerning: none;
}

.AboutClubTitleSuperLarge {
    font-weight: 500;
    font-size: 18vh;
    line-height: 18vh;
}

.AboutClubHeroCutoutContainer {
    width: 100%;
    min-height: 65vh;
    /*max-height: 80vh;*/
    text-align: center;
    margin-top: -7vw;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
}

.AboutClubHeroCutoutImage {
    width: 100%;
}

.AboutClubHeroCutoutTextBox {
    padding: 1.6rem;
    display: grid;
    place-content: center;
    color: white;
    width: 100%;
    border-bottom: solid #C8102F 6px;
    text-align: center;
}

/*OFFER*/

.ClubInfoShort {
    min-height: 40vh;
    width: 100%;
    max-width: 70%;
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.ClubInfoColumn {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 3rem;
    text-align: center;
}

.ClubInfoIconsHolder {
    position: relative;
    min-height: 8rem;
    min-width: 8rem;
    max-width: 8rem;
    max-height: 8rem;
}

.ClubInfoShortIcon {
    position: absolute;
    top: calc(50% - 4rem);
    left: calc(50% - 4rem);
    min-height: 8rem;
    min-width: 8rem;
    max-width: 8rem;
    max-height: 8rem;
}

.OfferClassesGallery {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 2rem;
    margin: 8rem 0rem;
}

.OfferClassesGalleryRow {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.OfferExampleLabel {
    transform: skew(-20deg);
    padding: 0.4rem 1.2rem;
    color: white;
    width: auto;
    max-width: max-content;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -0.6rem;
    left: -0.6rem;
    box-shadow: 0px 6px 6px rgba(10,10,10, 0.1);
}

    .OfferExampleLabel p {
        transform: skew(20deg);
        margin: 0;
        font-weight: 600;
    }

.OfferedClassesExampleSmall {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    box-shadow: 0px 10px 10px rgba(10,10,10, 0.1);
}

.OfferedClassesExampleLarge {
    position: relative;
    width: 100%;
    max-height: 18rem;
    aspect-ratio: 16/9;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    box-shadow: 0px 10px 10px rgba(10,10,10, 0.1);
}

.TaekwondoOfferedClassesExampleSmall {
    background: url('../lib/P_tkd.jpg');
    background-size: cover;
}

.KickBoxingOfferedClassesExampleSmall {
    background: url('../lib/P_kick.jpg');
    background-size: cover;
}

.TrainingMainOfferedClassesExampleSmall {
    background: url('../lib/P_str.jpg');
    background-size: cover;
    background-position: center center;
}

.SelfDefClassesExampleSmall {
    background: url('../lib/P_self.jpg');
    background-size: cover;
}

.BoxClassesExampleSmall {
    background: url('../lib/P_box.jpg');
    background-size: cover;
}
/*COACHES CARDS*/
.trapezoidalContainerRSC {
    width: 78vw;
    height: 50vh;
    transform: skewX(20deg);
    filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.5));
    overflow: hidden;
    position: absolute;
    right: -8rem;
}

    .trapezoidalContainerRSC::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 78vw;
        height: 50vh;
        background: linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .1) 40%), url('../lib/ReworkLandingBottom/TrenerMotywujeZawodniczke.png') no-repeat center 15%;
        background-size: cover;
        transform: skewX(-20deg);
        transform-origin: top left;
    }

.trapezoidalsWrapRSC {
    width: 100%;
    display: flex;
    position: relative;
    align-items: center;
}

.redTrapezoidRSC {
    position: absolute;
    top: -28vh;
    left: 22vw;
    width: 30rem;
    height: 9rem;
    background-color: #C8102F;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    transform: skewX(20deg);
}

    .redTrapezoidRSC > h2 {
        max-width: 82%;
        font-weight: 700;
        font-size: 52px;
        color: #F5F5F5;
        transform: skewX(-20deg);
        filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.5));
    }



.sectionHeaderWrapRSC {
    width: 100%;
    height: 40rem;
    display: flex;
    overflow: clip;
    align-items: center;
}

.CoachBusinessCard {
    min-width: 40rem;
    max-width: 70%;
    width: 70%;
    display: flex;
    flex-direction: row;
    background: #161616;
}

.CoachCardPhotoPart {
    background: linear-gradient(110deg, rgb(61, 61, 61) 0%, rgb(36, 36, 36)45%, #161616 45%, #161616 100%);
    padding: 1.8rem 0rem;
    display: flex;
    gap: 2rem;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.CoachCardPhotoPartReversedBG {
    background: linear-gradient(250deg, rgb(61, 61, 61) 0%, rgb(36, 36, 36)45%, #161616 45%, #161616 100%);
}

.CoachCardCoachPhoto {
    width: 20vw;
    min-width: 12rem;
    max-width: 18rem;
    aspect-ratio: 1/1;
    outline: solid #F8C614 6px;
    outline-offset: -6px;
    border-radius: 50%;
}

.CoachCardNameLabel {
    transform: skew(-20deg);
    padding: 0.6rem 1.6rem;
    text-align: center;
    width: 100%;
    max-width: 80%;
}

    .CoachCardNameLabel h4 {
        transform: skew(20deg);
        line-height: 30px;
        color: white;
        filter: drop-shadow(1px 1px 2px rgba(10, 10, 10, 0.95));
    }

    .CoachCardNameLabel p {
        transform: skew(20deg);
    }

.CoachCardInfoPart {
    width: 100%;
    padding: 3rem;
    color: rgb(235, 235, 235) !important;
    width: 100%;
}

    .CoachCardInfoPart h4 {
        font-weight: 600;
        font-size: 26px;
        line-height: 32px;
    }

/* NOTEBOOK */
@media screen and (max-width:1640px) and (min-width:1200px) {
    .ClubInfoShort {
        max-width: 80%;
    }

    .CoachBusinessCard {
        max-width: 56rem;
        width: 100%;
    }


    .trapezoidalContainerRSC {
        width: 82vw;
    }

        .trapezoidalContainerRSC::before {
            width: 82vw;
        }

    .redTrapezoidRSC {
        left: 19vw;
        width: 24rem;
    }
}
/*TABLET LANDSCAPE*/
@media screen and (max-width:1199px) and (min-width:990px) {
    .ClubInfoShort {
        max-width: 100%;
    }

    .CoachBusinessCard {
        max-width: 100%;
        width: 100%;
    }

    .CoachCardCoachPhoto {
        min-width: 16rem;
        max-width: 22rem;
    }



    .trapezoidalContainerRSC {
        width: 85vw;
    }

        .trapezoidalContainerRSC::before {
            width: 85vw;
        }

    .redTrapezoidRSC {
        left: 16vw;
        width: 24rem;
    }
}


/* TABLET */
@media screen and (max-width:989px) and (min-width:576px) {


    .AboutClubTitle {
        font-size: 3rem;
    }

    .AboutClubTitleSuperLarge {
        font-size: 8.7rem;
        line-height: 8rem;
    }

    .AboutClubHeroCutoutContainer {
        min-height: 45vh;
        margin-top: -16vw;
    }

    .ClubInfoShort {
        max-width: 100%;
    }

    .ClubInfoIconsHolder {
        min-height: 7rem;
        min-width: 7rem;
        max-width: 7rem;
        max-height: 7rem;
    }

    .ClubInfoShortIcon {
        min-height: 7rem;
        min-width: 7rem;
        max-width: 7rem;
        max-height: 7rem;
        top: calc(50% - 3.5rem);
        left: calc(50% - 3.5rem);
    }

    .CoachBusinessCard {
        max-width: 70%;
        flex-direction: column !important;
        min-width: 70vw;
    }

    .CoachCardCoachPhoto {
        min-width: 16rem;
        max-width: 22rem;
    }

    .trapezoidalContainerRSC {
        width: 85vw;
        height: 40vh;
    }

        .trapezoidalContainerRSC::before {
            width: 85vw;
            height: 40vh;
        }

    .redTrapezoidRSC {
        top: -22vh;
        left: 18vw;
        width: 16rem;
        height: 6rem;
    }

    .CoachCardNameLabel {
        max-width: max-content;
        padding: 0.4rem 3rem;
    }

  
}
/* MOBILE */
@media screen and (max-width:575px) {

    .AboutClubHeroBackground {
        height: 30vw;
        min-height: 40vh;
        max-height: 70vh;
    }

    .AboutClubTitle {
        font-size: 1.6rem;
        line-height: 2rem;
    }

    .AboutClubTitleSuperLarge {
        font-weight: 500;
        font-size: 5rem;
        line-height: 5rem;
    }

    .AboutClubHeroCutoutContainer {
        min-height: 35vh;
        margin-top: -18vw;
    }

    .ClubInfoShort {
        max-width: 80%;
        flex-direction: column;
        gap: 5rem;
    }

    .ClubInfoIconsHolder {
        min-height: 6rem;
        min-width: 6rem;
        max-width: 6rem;
        max-height: 6rem;
    }

    .ClubInfoShortIcon {
        min-height: 6rem;
        min-width: 6rem;
        max-width: 6rem;
        max-height: 6rem;
        top: calc(50% - 3rem);
        left: calc(50% - 3rem);
    }

    .OfferClassesGalleryRow {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        gap: 2rem;
    }

    .CoachBusinessCard {
        max-width: 100%;
        width: 100%;
        flex-direction: column !important;
        min-width: 70vw;
    }

    .CoachCardCoachPhoto {
        min-width: 14rem;
        max-width: 18rem;
    }

    .CoachCardNameLabel {
        max-width: max-content;
        padding: 2vw 10vw;
    }

    .CoachCardInfoPart {
        padding: 1.6rem;
    }

    .trapezoidalContainerRSC {
        width: 105vw;
        height: 40vh;
    }

        .trapezoidalContainerRSC::before {
            width: 105vw;
            height: 40vh;
        }

    .redTrapezoidRSC {
        top: -22vh;
        left: 3vw;
        width: 14rem;
        height: 6rem;
    }
}