:root {
    --bg-test-color: rgba(45, 70, 150, 0.534);

    --brxp-header-height: 120px;
    --brxw-radius-s: clamp(0.9rem, calc(0.005555555555555556 * (100vw - 36rem) + 0.9rem), 1.5rem);
    --brxw-space-fluid-l: clamp(1.33rem, calc(0.012407407407407407 * (100vw - 36rem) + 1.33rem), 2.67rem);

    --megamenu-bg: oklch(0 0.0724 29.23 / 60%);
    --megamenu-bg-hover: oklch(0.1764 0.0724 29.23 / 75%);

    --popup-shadow: 4px 4px 10px rgba(0, 0, 0, 0.35);
    --popup-shadow-hover: 8px 8px 20px rgba(0, 0, 0, 0.65);

    --brxw-text-s: 0.8rem;
}

#ejk-megamenu-overons-section,
#ejk-megamenu-sport-section {
    .megamenu-section {
        background-color: orangered;

        margin-block-start: 0;
        margin-inline-end: 0;
        margin-block-end: 0;
        margin-inline-start: 0;
        padding-block-start: 0;
        padding-inline-end: 0;
        padding-block-end: 0;
        padding-inline-start: 0;
        flex-direction: row;

        padding: 0;
        padding-top: 20px;
        row-gap: 0;
        z-index: 9999;
        position: relative;
    }
}



#ejk-header-section {
    .megamenu-section {
        margin-block-start: 0;
        margin-inline-end: 0;
        margin-block-end: 0;
        margin-inline-start: 0;
        padding-block-start: 0;
        padding-inline-end: 0;
        padding-block-end: 0;
        padding-inline-start: 0;
        flex-direction: row;

        padding: 0;
        padding-top: 20px;
        row-gap: 0;
        z-index: 9999;
        position: relative;

        .megamenu-container {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            width: 80%;
            column-gap: 1cqh;
            align-content: flex-start;
            justify-content: space-evenly;
            align-items: flex-start;
            align-self: flex-start;
            margin-left: auto;
            margin-right: auto;
            background-color: var(--megamenu-bg);
            border: 3px solid var(--ejk-surface-light-l);
            border-radius: 0 0 var(--at-radius--s) var(--at-radius--s);
            box-shadow: var(--popup-shadow);
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
            padding: var(--at-space--m);
            flex-grow: 0;
            flex-shrink: 1;

            &:hover {
                background-color: var(--megamenu-bg-hover);
                border-color: var(--brxp-primary-d-8);
                box-shadow: var(--popup-shadow-hover);
            }

            .mega-col-logo {
                width: 30rem;
                height: auto;
                justify-content: center;
                margin: 0;
                margin-right: var(--brxw-space-fluid-l);

                img {
                    width: 100%;
                }
            }

            .mega-menu-block {
                padding-right: 3rem;
                width: 100%;

                &.mega-block-small {
                    width: 60%;
                }

                .mega-col-title {
                    font-family: "Poppins", sans-serif;
                    font-size: var(--at-text--m);
                    font-weight: 600;
                    letter-spacing: 1px;
                    color: var(--ejk-tertiary-d-3);
                    width: 100%;
                    padding-bottom: var(--at-space--3xs);
                    border-bottom: 2px solid var(--ejk-secondary-l-3);

                    &.title-small {
                        color: var(--ejk-secondary-l-5);
                        font-family: "Poppins", sans-serif;
                        font-size: var(--at-text--s);
                        font-weight: 500;
                        border-bottom: 2px solid var(--ejk-secondary-l-7);
                    }
                }

                .megamenu-nav__items {
                    display: flex;
                    flex-direction: column;
                    flex-wrap: nowrap;
                    align-items: flex-start;
                    row-gap: 0;
                }

                .grid-judo-eskrima {
                    display: grid;
                    align-items: initial;
                    grid-gap: 1rem;
                    grid-template-columns: 1fr 1fr;
                    justify-items: flex-start;
                    align-items: flex-start;
                    align-content: flex-start;
                    inline-size: 100%;
                }
            }

            .leeftijden-grid {
                width: 40rem;
            }
        }
    }
}