.section.fullwidth-banner {
    background-color: #F3F2F0;
    background-size: auto 100%;
    background-repeat: no-repeat;
    padding-top: var(--huge-space);
    padding-bottom: var(--huge-space);
    margin-bottom: var(--huge-space);
}

.section.fullwidth-banner.layout_2 {
    .container {
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }

    .content-block {
        max-width: 530px;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        margin-left: auto;
    }

    .banner-title {
        padding-bottom: var(--large-space);
    }

    h4 {
        color: var(--color-main-dark);
        font-size: var(--font-size-huge-text);
        line-height: 100%;
        padding-bottom: 0;
        text-align: right;

        &:nth-child(2) {
            font-size: var(--font-size-large-text);
        }
    }

    p {
        max-width: 260px;
        color: var(--color-main-dark-hover);
        font-size: var(--font-size-small-title);
        font-weight: 600;
        line-height: 33px;
        margin-bottom: calc(var(--extra-huge-space) + 2rem);
        text-align: right;
    }

    img {
        display: none;
    }

    @media screen and (max-width: 1599px) {
        .container {
            background-position: center bottom -4rem;
        }
    }

    @media screen and (max-width: 1199px) {
        background-size: 150%;
        background-position: left 70% top 0;

        .container {
            background-size: 50%;
            background-position: center bottom -4.5rem;
        }
    }

    @media screen and (max-width: 767px) {
        .container {
            background-position: left 0 bottom -2rem;
        }
    }

    @media screen and (max-width: 574px) {
        background-position: left 70% top 100%;

        .container {
            background-image: none !important;
            background-position: left 70% top 100%;
        }

        img {
            display: block;
            width: 90%;
        }

        .content-block {
            align-items: center;
        }

        h4, p {
            text-align: center;
        }

        p {
            margin-bottom: 0;
        }
    }
}

body.site_mode_women .section.fullwidth-banner.layout_2 {
    background-color: rgba(var(--c-l-rgb), .3);
    
    .container {
        background-position: bottom -4em center;
    }

    .content-block {
        max-width: 660px;
    }

    h4 {
        font-size: 3.75rem;
        font-weight: 700;

        &:nth-child(2) {
            font-size: 3.3rem;
        }
    }

    p {
        color: var(--c-light-green);
    }

    @media screen and (max-width: 1199px) {
        background-size: auto 100%;
        background-position: left 50% top 0;
    }

    
    @media screen and (max-width: 767px) {
        h4, h4:nth-child(2) {
            font-size: var(--font-size-text-large);
        }
    }

    @media screen and (max-width: 574px) {
        background-size: auto 80%;
        background-position: top;
    }
}

.section.fullwidth-banner.layout_1 {
    display: grid;
    grid-template-columns: 2fr 3fr 2fr;
    padding: 0;
    color: var(--color-white);

    .column {
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        padding-top: var(--large-space);
        padding-bottom: var(--large-space);

        h3 {
            font-size: var(--font-size-text-large);
            font-weight: 700;
            line-height: 120%;
            color: var(--color-white);
            padding-bottom: var(--small-space);
            margin-bottom: var(--small-space);
        }

        p {
            color: var(--color-white);
            font-size: var(--fs-highlight-text);
            font-weight: 600;
            line-height: 140%;
            margin-bottom: var(--huge-space);
        }
    }

    .column.column-1 {
        background-image: url(../../img/light_bg_img.png);
        background-size: 180%;
        padding-left: calc(100vw * 5 / 100);
        padding-right: var(--large-space);

        .logo-wrapper {
            margin-bottom: var(--regular-space);
        }

        h3 {
            font-size: var(--font-size-text-large);
            position: relative;

            &:after {
                content: '';
                position: absolute;
                bottom: 0;
                left: 0;
                height: 2px;
                width: 100%;
                max-width: 148px;
                background-color: var(--color-white);
            }
        }
    }

    .column.column-2 {
        display: flex;
        align-items: flex-end;
        padding: 0;

        .bg-image {
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }
    }

    .column.column-3 {
        background-image: url(../../img/dark_bg_img.webp);
        padding-right: calc(100vw * 5 / 100);
        padding-left: var(--regular-space);
        text-align: right;

        h3,
        p {
            position: relative;
            padding-bottom: var(--regular-space);
            margin-bottom: var(--regular-space);

            &:after {
                content: '';
                position: absolute;
                bottom: 0;
                right: 0;
                height: 2px;
                width: 100%;
                max-width: 148px;
                background-color: var(--color-white);
            }
        }

        h3 {
            font-size: 3.875em;
        }

        p {
            line-height: 200%;
        }

        a.et_pb_button {
            color: var(--color-white);
            font-size: calc(var(--font-size-text) * 1.125);
            border-color: var(--color-white);
            padding: 11px 31px;
            margin-top: var(--small-space);

            &:hover {
                background-color: transparent;
                border-color: var(--color-white) !important;
            }
        }
    }

    @media screen and (max-width: 1699px) {
        .column.column-3 h3 {
            font-size: 3.25em;
        }
    }

    @media screen and (max-width: 1499px) {
        grid-template-columns: repeat(3, 1fr);
    }

    @media screen and (max-width: 1199px) {
        .column.column-3 h3 {
            font-size: 2.5em;
        }

        .column.column-1 h3 {
            font-size: 2em;
        }

        .column.column-1 p {
            font-size: calc(var(--font-size-text) * 1.125);
        }
    }

    @media screen and (max-width: 979px) {
        grid-template-columns: repeat(2, 1fr);

        .column.column-2 {
            display: none;
        }
    }

    @media screen and (max-width: 767px) {
        grid-template-columns: repeat(1, 1fr);

        .column.column-1 {
            padding-right: calc(100vw * 5 / 100);
            text-align: center;

            .logo-wrapper img {
                max-width: 217px;
            }

            h3 {
                font-size: 28px;
                padding-bottom: var(--regular-space);
                margin-bottom: var(--regular-space);

                &:after {
                    left: 50%;
                    transform: translateX(-50%);
                }
            }

            p {
                font-size: var(--font-size-small-text);
            }

            .social-media-list {
                justify-content: center;
            }
        }

        .column.column-2 {
            display: block;
            min-height: 350px;
        }

        .column.column-3 {
            text-align: center;

            h3 {
                font-size: 28px;
            }

            p {
                max-width: 220px;
                margin-left: auto;
                margin-right: auto;
                font-size: var(--font-size-small-text);
                font-weight: 400;
            }

            h3:after,
            p:after {
                left: 50%;
                transform: translateX(-50%);
            }
        }
    }
}

body.site_mode_women .section.fullwidth-banner.layout_1 {
    .column.column-1 {
        background-image: url(../../img/ping-squad-bg.png);
        background-size: cover;
    }

    .column.column-3 {
        background-image: url(../../img/light_green_leaves.webp);
    }

    @media screen and (max-width: 767px) {
        .column.column-1 {
            background-size: 180%;
        }
    }
}

.section.fullwidth-banner.layout_3 {
    overflow: hidden;
    z-index: 1;
    background-image: url(../../img/green_leaves_bg.webp), linear-gradient(rgba(253, 246, 227, .2), rgba(253, 246, 227, .2)), url(/wp-content/uploads/2025/06/30887723_sadsxxa_8-min-scaled.jpg);
    background-size: 73% 100%, cover, cover;
    background-position: left top, center, right;
    background-repeat: no-repeat, no-repeat, no-repeat;

    display: grid;
    grid-template-columns: 4fr 4fr 7fr;
    padding: 0;
    color: var(--color-white);

    .column {
        position: relative;
        z-index: 2;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        padding-top: var(--large-space);
        padding-bottom: var(--large-space);

        h3 {
            font-size: var(--font-size-text-large);
            font-weight: 700;
            line-height: 120%;
            color: var(--color-white);
            padding-bottom: var(--small-space);
            margin-bottom: var(--small-space);
        }

        p {
            color: var(--color-white);
            font-size: var(--fs-highlight-text);
            font-weight: 600;
            line-height: 140%;
            padding-bottom: 0;
        }
    }

    .column.column-1 {
        padding-left: calc(100vw * 5 / 100);
        padding-right: 10px;

        .logo-wrapper {
            margin-bottom: var(--regular-space);
        }

        h3 {
            font-size: var(--font-size-text-large);
            position: relative;

            &:after {
                content: '';
                position: absolute;
                bottom: 0;
                left: 0;
                height: 2px;
                width: 100%;
                max-width: 148px;
                background-color: var(--color-white);
            }
        }

        p {
            margin-bottom: var(--huge-space);
        }
    }

    .column.column-2 {
        display: flex;
        align-items: flex-end;
        padding: 0;
        z-index: 1;

        .bg-image {
            width: 100%;
            height: 100%;
            background-size: 100%;
            background-position: center top 37%;
            background-repeat: no-repeat;
            transform: scale(2.5);
        }
    }

    .column.column-3 {
        padding-right: calc(100vw * 5 / 100);
        padding-left: var(--regular-space);
        text-align: right;
        color: var(--color-main-dark);

        h3,
        .description {
            position: relative;
            padding-bottom: var(--regular-space);
            margin-bottom: var(--regular-space);
            color: inherit;

            &:after {
                content: '';
                position: absolute;
                bottom: 0;
                right: 0;
                height: 2px;
                width: 100%;
                max-width: 148px;
                background-color: var(--color-main-dark);
            }
        }

        h3 {
            font-size: var(--fs-large-title);
        }

        p {
            line-height: 200%;
            color: inherit;
            font-size: var(--font-size-small-title);
        }

        a.et_pb_button {
            color: inherit;
            font-size: calc(var(--font-size-text) * 1.125);
            border-color: var(--color-main-dark);
            padding: 11px 31px;
            margin-top: calc(var(--large-space) + 0.625rem);

            &:hover {
                background-color: var(--color-main-dark);
                border-color: var(--color-main-dark) !important;
                color: var(--color-white);
            }
        }
    }

    @media screen and (max-width: 1599px) {
        .column.column-2 .bg-image {
            background-position: center top 45%;
        }
    }

    @media screen and (max-width: 1499px) {
        grid-template-columns: repeat(3, 1fr);
    }

    @media screen and (max-width: 1199px) {
        .column.column-3 h3 {
            font-size: 2.5em;
        }

        .column.column-1 h3 {
            font-size: 2em;
        }

        .column.column-1 p {
            font-size: calc(var(--font-size-text) * 1.125);
        }

        .column.column-3 .description p {
            font-size: calc(var(--font-size-text) * 1.125);
            line-height: 140%;
            margin-bottom: 7px;

            &:last-child {
                margin-bottom: 0;
            }
        }
    }

    @media screen and (max-width: 979px) {
        grid-template-columns: repeat(2, 1fr);
        background-size: 100% 100%, cover, cover;

        .column.column-2 {
            display: none;
        }
    }

    @media screen and (max-width: 767px) {
        grid-template-columns: repeat(1, 1fr);
        background-size: 400% 90%, cover, cover;
        background-position: top center, center, bottom;

        .column.column-1 {
            padding-right: calc(100vw * 5 / 100);
            padding-bottom: 0;
            text-align: center;

            .logo-wrapper img {
                max-width: 217px;
            }

            .social-media-list {
                justify-content: center;

                a i {
                    font-size: var(--font-size-small-title);
                }
            }

            h3::after {
                left: 50%;
                transform: translateX(-50%);
            }
        }

        .column.column-1, .column.column-3 {
            h3 {
                font-size: 28px;
                max-width: 320px;
                margin-left: auto;
                margin-right: auto;
            }

            p {
                max-width: 350px;
                margin-left: auto;
                margin-right: auto;
                font-size: var(--font-size-small-text);
            }
        }

        .column.column-2 {
            display: flex;
        }

        .column.column-2 .bg-image {
            min-height: 450px;
            background-size: 130%;
            background-position: center;
            transform: scale(1);
        }

        .column.column-3 {
            text-align: center;
            padding-left: calc(100vw * 5 / 100);
            padding-top: 0;

            h3:after,
            p:after,
            .description:after {
                left: 50%;
                transform: translateX(-50%);
            }

            a.et_pb_button {
                font-size: var(--font-size-small-text);
                margin: 0 auto;
            }

            .description {
                margin-bottom: var(--large-space);
                padding-bottom: var(--large-space);
            }
        }
    }

    @media screen and (max-width: 564px) {
        background-size: 600% 90%, cover, cover;

        .column.column-2 .bg-image {
            background-size: 150%;
            min-width: 350px;
        }
    }

    @media screen and (max-width: 449px) {
        background-size: 600% 85%, cover, cover;

        .column.column-2 .bg-image {
            background-size: 150%;
            min-height: 350px;
        }
    }
}

body.site_mode_women .section.fullwidth-banner.layout_3 {
    background-image: url(../../img/purple-diagonal-bg.webp), linear-gradient(rgba(253, 246, 227, .2)), url(/wp-content/uploads/2025/06/30887723_sadsxxa_8-min-scaled.jpg);
    background-size: 73% 110%, cover, cover;
    background-position: left center, center, right;

    .column.column-3 {
        --color-main-dark: #033A35;
    }

    @media screen and (max-width: 767px) {
        background-size: 400% 100%, cover, cover;
        background-position: top -32px center, center, bottom;
    }

    @media screen and (max-width: 564px) {
        background-size: 600% 100%, cover, cover;
    }

    @media screen and (max-width: 449px) {
        background-size: 600% 95%, cover, cover;
    }
}