:root{
    --HeaderHeight: 125px;
}

header {
    height: var(--HeaderHeight);
    width: 100vw;
    background-color: #FFF;
    box-shadow: 0px 6px 7px 0px rgba(163, 215, 236, 0.20);
    font-family: 'Figtree', sans-serif;
    position: fixed;
    top: 0;
    z-index: 9999;
}

header a{
    text-decoration: none;
    color: var(--Charcoal);
}

header div[class^='container-']{
    height: 100%;
    display: flex;
    align-items: center;
    gap: 41px;
}
header ul.top-menu{
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    height: 100%;
    gap: 41px;
}

header ul.top-menu li
{
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    height: 100%;
}

header .top-menu-container
{
    height: 100%;
    display: flex;
    gap: 41px;
    align-items: center;
}

header .top-menu-logo{
    height: 100px;
}

header .top-menu{
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
}

header .top-menu ul{
    align-items: center;
}

header .top-menu li a{
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 16px;
}

header .top-menu .sub-menu{
    display: none;
    position: absolute;
    top: 100%;
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: #FFF;
    border-radius: 0 0 30px 30px;
    padding: 20px;
    box-shadow: 6px 8px 6px 0px rgba(163, 215, 236, 0.20);
    z-index: 9999;
    flex-direction: column;
    align-items: start;
    gap: 18px;
}

header .top-menu .sub-menu a{
    font-size: 16px;
}

header .top-menu li.expended .sub-menu {
    display: block;
}

header .top-menu-container .menu-menu-principal-container {
    height: 100%;
}

header .language-switcher {
    color: var(--Charcoal, #212B2F);
    font-family: Figtree, sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 48px;
    text-decoration: none;
}

header .secondary-menu li{
    list-style-type: none;
}

header .secondary-menu-large.row {
    align-items: center;
    margin-left: auto;
}

header .row {
    margin: 0;
}

header .menu-item-has-children{
    display: flex;
    align-items: center;
}

header .menu-item-has-children > a::after{
    content: "";
    background-image: url(../images/ArrowDown_4.svg);
    width: 13px;
    height: 7px;
    transition: all 200ms;
    margin-left: auto;
}

header .menu-item-has-children:hover::after {
    scale: -100%;
}

header .menu-item-has-children:hover .sub-menu {
    display: flex;
}

header .menu-item-has-children a{
    margin-right: 6px !important;
}

i.icon_panda{
    display: block;
    height: 43px;
    width: 43px;
    background-image: url(../images/icon_pandawebrx.svg);
    background-size: contain;
    background-repeat: no-repeat;
}
i.icon_numerx {
    display: block;
    height: 43px;
    width: 43px;
    background-image: url(../images/icon_numerx2.svg);
    background-size: contain;
    background-repeat: no-repeat;
}
i.icon_gesphar {
    display: block;
    height: 43px;
    width: 43px;
    background-image: url(../images/icon_gespharx8.svg);
    background-size: contain;
    background-repeat: no-repeat;
}
.menu-mobile-button {
    display: none;
}
.menu-mobile-button-close {
    display: none;
}

header .secondary-menu-mobile{
    display: none;
}

@media screen and (max-width: 1400px) {
    header .top-menu li a{
        font-size: 16px;
    }
    header .secondary-menu-large .cgsi-button {
        font-size: 16px;
    }
    header .language-switcher{
        font-size: 18px;
    }
}
@media screen and (max-width: 1200px) {


        header div[class^='container-'] {
            gap: 28px;
        }

        header ul.top-menu {
            gap: 18px;
        }

        header .secondary-menu-large .cgsi-button{
            font-size: 14px;
        }
        header .top-menu li a {
            font-size: 14px;
        }
        header .top-menu .sub-menu li a {
            font-size: 14px;
        }
}

@media screen and (max-width: 992px) {

    .header{
        padding: 20px;
    }
    header div[class^='container-'] {
        padding: 0px 20px;
        position: relative;
    }

    header .top-menu .secondary-menu-mobile li a {
        padding: 16px 30px;
    }

    header .top-menu-container .menu-menu-principal-container{
        width: 100%;
    }

    header .secondary-menu-large{
        display: none;
    }

    header .secondary-menu-mobile {
        display: flex;
    }

    .menu-mobile-button{
        display: block;
        width: 54px;
        height: 36px;
        margin-left: auto;
    }

    .menu-mobile-button-close {
        display: block;
        width: 28px;
        height: 28px;
        margin-left: auto;
    }

    header .top-menu-container{
        top: var(--HeaderHeight);
        border-radius: 0 0 0 30px;
        right: 0;
        z-index: 1000;
        position: absolute;
        background-color: white;
        height: auto;
        padding: 25px;
        width: 304px;
        display: none;
        flex-direction: column;
        align-items: start;
    }

        header .top-menu-container.expanded {
            display: flex;
        }

    header .top-menu .sub-menu{
        border-top: 1px solid #000;
        position: relative;
        box-shadow: none;
        padding: 20px 0;
        width: 100%;
    }
    header ul.top-menu{
        flex-flow: column;
        gap: 18px;
        width: 100%;
    }
    header .top-menu > li {
        border-bottom: 1px solid #000;
        width: 100%;
    }
    header .top-menu > li > a {
        width: 100%;
        padding-bottom: 18px;
    }

        header .secondary-menu-mobile {
            display: flex;
        }
}