.custom-menu {
    background-image: linear-gradient(#188FCA, #1BA2E6);
}

.custom-menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.custom-menu ul.main-menu {
    display: flex;
    flex-wrap: nowrap;
    position: relative;
    justify-content: space-between;
    align-items: center;
    height: 114px;
}

.custom-menu ul.main-menu > li {
    display: flex;
    height: 114px;
    margin: 0;
    padding: 0;
    flex: 0 0 266px;
    align-items: center;

    & > a {
        color: #004263;
        font-weight: 600;
        padding: 24px;
        padding-right: 100px;
        font-size: 16px;
        line-height: 105%;
        height: 82px;
        flex: 1 0 100%;
        border-radius: 10px;
        transition: opacity 0.3s ease;
        
        &:hover {
            opacity: 0.9;
        }
    }

    &:nth-of-type(1) > a {
        background-image: url('../images/category_bg_1.png');
        
        /* Revert equal padding for the first button */
        padding-right: 24px;

        /* Fix for a very long english name of the first category,
            plus better looking text wrapping style. */
        &:lang(en) {
            text-wrap-style: balance;
            padding: 17px 17px 17px 24px;
        }
    }
    &:nth-of-type(2) > a {
        background-image: url('../images/category_bg_2.png');
    }
    &:nth-of-type(3) > a {
        background-image: url('../images/category_bg_3.png');
    }
    &:nth-of-type(4) > a {
        background-image: url('../images/category_bg_4.png');
    }
    

}

.custom-menu ul.submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #fff;
    padding: 20px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    z-index: 1000;
    box-sizing: border-box;
}

.custom-menu ul.submenu li {
    width: 25%;
    float: left;
    box-sizing: border-box;
    padding: 5px 10px;
}

.custom-menu ul.submenu li a {
    display: block;
    color: #333;
    text-decoration: none;
    white-space: normal;
    transition: background-color 0.3s ease;

    &:hover {
        color: #111;
    }
}

.custom-menu ul.submenu::after {
    content: "";
    display: block;
    clear: both;
}

.custom-menu ul.main-menu > li:hover > ul.submenu {
    display: block;
}

.modal-content .custom-menu {
    display: none;
}

@media screen and (max-width: 1199px) {
    .custom-menu {
        display: none;
    }
}

/* Styling of the mobile view */

.additional-menu {
    display: block !important;
}

@media screen and (min-width: 1200px) {
    .additional-menu {
        display: none !important;
    }
}

.additional-menu li a span {
    display: inline-block;
    /* Wrap long categories */
    white-space: normal !important;
    /* Leave extra space on the right for the collapse icon */
    padding-right: 30px !important;
}