﻿.trapezoidalContainer {
    width: 78vw;
    height: 50vh;
    transform: skewX(-20deg);
    filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.5));
    overflow: hidden;
    position: absolute;
    left: -8rem;
}

    .trapezoidalContainer::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 78vw;
        height: 50vh;
        background: linear-gradient(to left, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .1) 40%), url('../lib/ReworkLandingBottom/ZawodniczkiNaOdprawie.png') no-repeat center 30%;
        background-size: cover;
        transform: skewX(20deg);
        transform-origin: top left;
    }

.trapezoidalsWrap {
    width: 100%;
    display: flex;
    position: relative;
    align-items: center;
}

.trapezoidalHeaderSectionWrap {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 12vh;
}

.redTrapezoid {
    position: absolute;
    top: 10%;
    right: 23vw;
    width: 30rem;
    height: 9rem;
    background-color: #C8102F;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    transform: skewX(-20deg);
}

    .redTrapezoid > 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));
    }

.offerSection {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 4rem;
}

.contentColumn {
    width: 70%;
    display: flex;
    flex-direction: column;
    gap: 8rem;
    align-items: center;
    overflow: hidden;
}


.BottomSectionHorizontalPhoto {
    height: 40rem;
}

.BottomSectionVerticalPhoto {
    height: 100%;
}

.textContainer {
    text-align: center;
    background-color: #161616;
    color: #F5F5F5;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}


.horizontalTextContainer {
    text-align: center;
    background-color: #161616;
    color: #F5F5F5;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.5));
    border-bottom: solid #F8C614 10px;
}

.horizontalOrientedCard {
    max-height: 120vh;
    width: 70%;
    display: flex;
    flex-direction: column;
    filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.5));
    border-bottom: solid #F8C614 10px;
}

.horizontalOrientedCardOSF {
    width: 70%;
    display: flex;
    flex-direction: column;
}


.verticalOrientedCard {
    width: 70%;
    display: flex;
    flex-direction: row;
    filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.5));
    justify-content: center;
    align-items: center;
}


.verticalTextContainer {
    width: 50%;
    height: 100%;
    text-align: left;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #161616;
    padding: 2rem;
}

.verticalTextContainerBorderOSF {
    border-right: solid #F8C614 10px;
}

.reversedVerticalTextContainerBorderOSF {
    border-left: solid #F8C614 10px;
}

.verticalTextContainer > h4 {
    color: #F5F5F5;
}


.sectionHeaderWrap {
    width: 100%;
    height: 40rem;
    display: flex;
}

.reverseOSF {
    flex-direction: row-reverse;
}

.reverseHorizontallyOSF {
    flex-direction: column-reverse;
    border-top: solid #F8C614 10px;
    border-bottom: none;
}

.bottomTextOSF {
    width: 80%;
    text-align: center;
}

.Activities {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    text-align: center;
    width: 45%;
}

.Activity {
    border-left: solid #F8C614 10px;
    background-color: #161616;
    color: #F5F5F5;
    filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.5));
    padding: .5rem 0;
}

.BottomSectionHorizontalPhotoFirst {
    background: url('../lib/ReworkLandingBottom/ZaciekłaWalkaDzieciKatSoft.webp') no-repeat center 30%;
    background-size: cover;
    max-height: 120vh;
    display: flex;
    flex-direction: column;
    height: 40rem;
    width: 100%;
}

.bottomSectionSecondPhoto {
    background: url('../lib/ReworkLandingBottom/DzieciPrzygotowujaSieDoWalki.png') no-repeat center 30%;
    background-size: cover;
}


.bottomSectionFifthPhoto {
    background: url('../lib/ReworkLandingBottom/ZwyciezcyKonkurencji.png') no-repeat center 30%;
    background-size: cover;
}

@keyframes move {
    to {
        transform: translate(calc(-50% - 1.5em));
    }
}

.carouselOSF {
    margin: 2em 0;
    max-width: 100vw;
    width: 100%;
    height: 30rem;
    overflow: hidden;
    mask: linear-gradient(90deg, rgba(0,0,0,0.5), #fff 30%, #fff 80%, rgba(0,0,0,0.5));
}

    .carouselOSF > div {
        width: max-content;
        padding: 1em 0;
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        gap: 2rem;
        list-style: none;
        animation: move 60s linear infinite;
    }

    .carouselOSF img {
        width: 50em;
    }

.sectionEndingOSF {
    width: 100%;
    height: 50rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .1) 80%), url('../lib/ReworkLandingBottom/ZawodnicyWGorach.jpg') no-repeat center center;
    background-size: cover;
}

.sectionEndingButtonWrapOSF {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}


.upperButtonOSF {
    border: none;
    color: #F5F5F5;
    border-bottom: 6px solid #F0CF22;
    background-color: #161616;
    filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.5));
    width: 100%;
    max-width: 20rem;
    min-width: 15rem;
    height: 4rem;
}

.lowerButtonOSF {
    border: none;
    filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.5));
    border-bottom: 6px solid #4D4D4D;
    color: #161616;
    background-color: #F5F5F5;
    width: 100%;
    max-width: 20rem;
    min-width: 15rem;
    height: 4rem;
}

.ClubHorizontalCardPhoto {
    object-fit: cover;
    background-size: cover;
}

.ClubVerticalCard {
    width: 70%;
    display: flex;
    flex-direction: row;
    filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.5));
}


.ClubVerticalCardPhoto {
    width: 50%;
    min-height: 25rem;
    height: auto;
    object-fit: cover;
    background-size: cover;
    aspect-ratio: 18 / 9;
}

.ClubVerticalCardText {
    width: 30%;
    height: auto;
    text-align: left;
    display: flex;
    justify-content: left;
    background-color: #161616;
    color: #F5F5F5;
    word-break: break-word;
    gap: 1rem;
    flex-direction: column;
    padding: 2rem 2rem 2rem 2rem;
    flex-grow: 1;
    justify-content: center;
}

.CampVerticalCardReversed {
    flex-direction: row-reverse;
}

.ClubVerticalReverse {
    flex-direction: row-reverse;
}
/* NOTEBOOK */
@media screen and (max-width:1640px) and (min-width:1200px) {
    .horizontalOrientedCardOSF, .verticalOrientedCard, .bottomTextOSF, .horizontalOrientedCard {
        width: 100%;
    }

    .Activities {
        width: 55%;
    }

    .trapezoidalContainer {
        width: 82vw;
        height: 50vh;
        transform: skewX(-20deg);
        filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.5));
        overflow: hidden;
        position: absolute;
        left: -8rem;
    }

        .trapezoidalContainer::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 82vw;
            height: 50vh;
            background: linear-gradient(to left, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .1) 40%), url('../lib/ReworkLandingBottom/ZawodniczkiNaOdprawie.png') no-repeat center 30%;
            background-size: cover;
            transform: skewX(20deg);
            transform-origin: top left;
        }

    .redTrapezoid {
        right: 19vw;
    }

    .horizontalOrientedCardOSF {
        width: 100%;
        max-width: 56rem;
    }

    .ClubVerticalCard {
        width: 100%;
        max-width: 56rem;
    }

    .horizontalOrientedCard {
        width: 100%;
        max-width: 56rem;
    }
}
/*TABLET LANDSCAPE*/
@media screen and (max-width:1199px) and (min-width:990px) {
    .horizontalOrientedCardOSF,
    .verticalOrientedCard,
    .bottomTextOSF,
    .horizontalOrientedCard {
        width: 100%;
    }

    .Activities {
        width: 60%;
    }

    .trapezoidalContainer {
        width: 85vw;
        height: 50vh;
        transform: skewX(-20deg);
        filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.5));
        overflow: hidden;
        position: absolute;
        left: -8rem;
    }

        .trapezoidalContainer::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 85vw;
            height: 50vh;
            background: linear-gradient(to left, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .1) 40%), url('../lib/ReworkLandingBottom/ZawodniczkiNaOdprawie.png') no-repeat center 30%;
            background-size: cover;
            transform: skewX(20deg);
            transform-origin: top left;
        }

    .redTrapezoid {
        right: 16vw;
    }

    .ClubVerticalCard {
        width: 100%;
    }
}
/* TABLET */
@media screen and (max-width:989px) and (min-width:576px) {
    .horizontalOrientedCardOSF,
    .bottomTextOSF,
    .horizontalOrientedCard {
        width: 100%;
    }

    .verticalOrientedCard {
        width: 100%;
    }

    .Activities {
        width: 90%;
    }

    .verticalOrientedCard {
        flex-direction: column;
    }

    .BottomSectionVerticalPhoto {
        width: 100%;
    }

    .verticalTextContainer {
        width: 100%;
    }

    .KhandH2 {
        font-size: calc(36 * 0.9px) !important;
        line-height: calc(50 * 0.9px);
    }

    .ClubVerticalCardPhoto {
        all: unset;
        width: 100%;
        height: auto;
        object-fit: contain;
        background-size: contain;
    }

    .ClubVerticalCard {
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .ClubVerticalCardText {
        width: 100%;
    }

    .verticalTextContainerBorderOSF {
        border-right: none;
        border-top: solid #F8C614 10px;
        text-align: center;
        background-color: #161616;
        color: #F5F5F5;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .reversedVerticalTextContainerBorderOSF {
        border-left: none;
        border-bottom: solid #F8C614 10px;
        text-align: center;
        background-color: #161616;
        color: #F5F5F5;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .ClubVerticalCard {
        display: flex;
        flex-direction: column;
    }

    .sectionHeaderWrap {
        height: 30rem;
    }

    .carouselOSF {
        height: 24rem;
    }

        .carouselOSF > div {
            gap: 1rem;
        }

        .carouselOSF img {
            width: 40em;
        }

    .trapezoidalContainer {
        width: 85vw;
        height: 40vh;
        transform: skewX(-20deg);
        filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.5));
        overflow: hidden;
        position: absolute;
        left: -8rem;
    }

        .trapezoidalContainer::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 85vw;
            height: 40vh;
            background: linear-gradient(to left, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .1) 40%), url('../lib/ReworkLandingBottom/ZawodniczkiNaOdprawie.png') no-repeat center 30%;
            background-size: cover;
            transform: skewX(20deg);
            transform-origin: top left;
        }

    .redTrapezoid {
        right: 17vw;
        top: 7%;
        height: 6rem;
        width: 18rem;
    }
}
/* MOBILE */
@media screen and (max-width:575px) {
    .horizontalOrientedCardOSF,
    .bottomTextOSF,
    .horizontalOrientedCard {
        width: 100%;
    }

    .verticalOrientedCard {
        width: 100%;
    }

    .Activities {
        width: 100%;
    }

    .KhandH2 {
        font-size: calc(36 * 0.8px) !important;
        line-height: calc(50 * 0.8px);
    }

    .verticalOrientedCard {
        flex-direction: column;
    }

    .BottomSectionVerticalPhoto {
        width: 100%;
    }

    .verticalTextContainer {
        width: 100%;
    }

    .contentColumn {
        width: 90%;
    }

    .ClubVerticalCardPhoto {
        all: unset;
        width: 100%;
        height: auto;
        object-fit: contain;
        background-size: contain;
    }

    .ClubVerticalCard {
        flex-direction: column;
        width: 100%;
    }

    .ClubVerticalCardText {
        width: 100%;
    }

    .verticalTextContainerBorderOSF {
        border-right: none;
        border-bottom: solid #F8C614 10px;
    }

    .reversedVerticalTextContainerBorderOSF {
        border-left: none;
        border-bottom: solid #F8C614 10px;
    }

    .ClubVerticalCardPhoto {
        object-fit: cover;
        background-size: contain;
        width: 100%;
    }

    .ClubVerticalCard {
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .ClubVerticalCardText {
        width: 100%;
    }


    .verticalTextContainerBorderOSF {
        border-right: none;
        border-top: solid #F8C614 10px;
        text-align: center;
        background-color: #161616;
        color: #F5F5F5;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .reversedVerticalTextContainerBorderOSF {
        border-left: none;
        border-bottom: solid #F8C614 10px;
        text-align: center;
        background-color: #161616;
        color: #F5F5F5;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .ClubVerticalCard {
        display: flex;
        flex-direction: column;
    }

    .verticalTextContainerBorderOSF {
        border: none;
    }

    .ClubVerticalReverse {
        border-top: solid #F8C614 10px;
    }

    .carouselOSF {
        height: 20rem;
    }

        .carouselOSF > div {
            gap: 1rem;
        }

        .carouselOSF img {
            width: 30em;
        }

    .trapezoidalContainer {
        width: 105vw;
        height: 40vh;
        transform: skewX(-20deg);
        filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.5));
        overflow: hidden;
        position: absolute;
        left: -8rem;
    }

        .trapezoidalContainer::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 105vw;
            height: 40vh;
            background: linear-gradient(to left, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .1) 40%), url('../lib/ReworkLandingBottom/ZawodniczkiNaOdprawie.png') no-repeat center 30%;
            background-size: cover;
            transform: skewX(20deg);
            transform-origin: top left;
        }

    .redTrapezoid {
        right: 3vw;
        top: 18%;
        height: 6rem;
        width: 16rem;
    }
}
