header{
    position: fixed;
    z-index: 1000;
    width: 100%;
    top: 0;
    filter: drop-shadow(var(--lightShadow));
}

/**** TOPBAR ****/
#topbar{
    background-color: var(--primary);
}
    .topbar-wrap{
        max-width: 1320px;
        margin: auto;
        padding: 0px 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
        .contact{
            height: fit-content;
            width: 100%;
        }
            .contact span, .contact i{
                color: var(--white);
                transition: all 100ms ease-in-out;
                white-space: nowrap;
                font-weight: 600;
            }
                .contact a:hover span, .contact a:hover i{
                    color: var(--secondary);
                }
        .contact .mail{
            margin-left: 50px;
        }

        .contact-button {
            padding: 10px 20px;
            background: rgb(66 62 70 / 30%);
            color: var(--white);
            transition: all 200ms ease-in-out;
            white-space: nowrap;
        }
            .contact-button span{color: var(--white);font-weight: 600;}
            .contact-button i{color: var(--white);}
            .contact-button:hover {
                background: rgba(0, 30, 75, 0.5);
            }

    #topbar span{
        margin-left: 5px;
    }



/**** MAINMENU ****/

#mainmenu{
    width: 100%;
    box-shadow: none;
    padding: 0px;
    display: flex;
    flex-direction: column;
}
    #mainmenu::before{
        content: '';
        background-image: url(../images/headercorner.svg);
        position: absolute;
        top: 0;
        z-index: 2;
        left: 0;
        display: block;
        height: 100%;
        width: 100%;
        background-repeat: no-repeat;
        pointer-events: none;
    }
    #mainmenu .curve{
        width: 100%;
        position: relative;
        z-index: 1;
    }
    #mainmenu .corner {
        height: 100%;
        position: absolute;
        top: 0;
        object-fit: cover;
        z-index: 1;
    }

.header-wrap{
    display: flex;
    justify-content: space-between;
    width: 100%;
    background-color: var(--white);
}

    .header-wrap::after{
        content: '';
    }
    .header-wrap .container-limited{
        position: relative;
        z-index: 2;
        width: 100%;
        display: flex;
        align-items: center;
    }
    .navbar-toggler{
        height: fit-content;
        padding: 10px 0px;
        margin-left: auto;
    }
    .navbar-toggler i {
        font-size: 36px;
    }


    .header-wrap .navbar-nav{
        margin-left: auto;
    }
        .navbar-nav .nav-item{
            margin: 0px 30px;
        }
        .navbar-nav .nav-item:last-child{
            margin-right: 0px;
        }
        .navbar-nav .nav-item .nav-link {
            font-size: var(--LG);
            font-family: var(--fontheader);
            color: var(--primary);
        }
        .navbar-nav .nav-item .nav-link i{
            color: inherit;
            margin-left: 10px;
        }
        .navbar-nav .nav-item.active .nav-link{
            color: var(--secondary);
        }
        .navbar-nav .nav-item .nav-link:hover{
            color: var(--secondary);
        }
        .navbar-nav .nav-item .submenu .nav-link{
            color: var(--white);
            font-family: var(--fonttext);
            font-size: 16px;
            font-weight: 600;
        }
        .navbar-nav .nav-item .submenu .nav-link:hover{
            color: var(--secondary);
        }

        .navbar-nav .nav-item:hover .submenu{
            transform: scaleY(1);
            opacity: 1;
        }

        .dropdown-toggle:after {
            display: none;
        }



#mainmenu .navbar-brand img{
    width: 200px;
    height: fit-content;
}

#mainmenu #mobilenav{
    display: none!important;
}

.teaser{
    margin-top: 120px;
}

/**** SUBMENU ****/

.navbar-nav .nav-item{
    display: flex;
    align-items: center;
}

#mainmenu .submenu-toggle{
    padding: 0px 10px;
}

#mainmenu .submenu-toggle i{
    color: var(--secondary);
    transition: all ease-in-out 200ms;
}
#mainmenu .submenu-toggle.collapsed i{
    color: var(--primary);
}
#mainmenu .submenu-toggle.collapsed i::before{
    content: '\f358';
}
#mainmenu .submenu-toggle:hover i{
    color: var(--secondary);
}

#mainmenu #submenu{
    background: var(--primary);
    padding: 20px;
    position: absolute;
    top: 43%;
    padding-top: 100px;
    z-index: -35;
    right: 31%;
    border-radius: 30px;
    max-width: 300px;
}

#mainmenu #submenu .nav-link {
    font-weight: bold;
    color: var(--white);
    padding: 10px 0px;
}
#mainmenu #submenu .nav-link:hover,  #mainmenu #submenu .nav-link.active{
    color: var(--secondary);
}

/**** FOOTER ****/

footer{
    position: relative;
    padding-top: 120px;
    margin-top: 120px;
}

    .footer-wrap{
        background-color: #0a509d;
    }

        footer .wave-animation {
            position: absolute;
            top: 0;
            width: 100%;
            z-index: 3;
            height: 120px;
        }

            .footer-content {
                max-width: 1320px;
                padding: 40px 20px;
                margin: auto;
                display: flex;
                justify-content: space-between;
            }

                .footer-contact .footer-header{
                    color: var(--secondary);
                    font-family: 'Lilita One';
                    font-size: 40px;
                }
                    .footer-contact .footer-header i {
                        color: var(--secondary);
                        font-size: 40px;
                        margin-right: 10px;
                    }

            .footer-contact .footer-data {
                padding-left: 58px;
                color: var(--white);
                font-weight: 600;
            }

            .footer-contact .data-address{
                margin-bottom: 20px;
            }
                .footer-contact .data-address span {
                    color: var(--white);
                }

            .footer-contact span{
                display: block;
            }

            .footer-contact a{
                color: var(--white);
                display: block;
                transition: 100ms ease-in-out all;
            }
                .footer-contact a i {
                    margin-right: 10px;
                    color: var(--white);
                    transition: 100ms ease-in-out all;
                }
                .footer-contact a:hover{
                    color: var(--secondary);
                }
                .footer-contact a:hover i{
                    color: var(--secondary);
                }

            .footer-contact .data-header {
                font-size: 22px;
                font-weight: 600;
                margin-bottom: 20px;
                color: var(--white);
            }

        .footer-menu{
            text-align: end;
        }

            .footer-menu a{
                display: block;
                font-size: 22px;
                font-family: 'Noto Sans';
                font-weight: 600;
                color: var(--white);
                transition: 100ms ease-in-out all;
                margin-bottom: 20px;
            }
                .footer-menu a:hover{
                    color:var(--secondary) ;
                }
@media (max-width: 1600px){
    #mainmenu #submenu{
        right: 27%;
    }
}
@media (max-width: 1500px){
    #mainmenu #submenu{
        right: 25%;
    }
}
@media (max-width: 1300px){
    #mainmenu #submenu{
        right: 22%;
    }
}

@media (max-width: 1200px){
    #mainmenu #submenu{
        display: none;
    }
    #mainmenu .header-wrap .navbar-collapse{
        display: none;
    }
    #mainmenu #mobilenav{
        position: absolute;
        right: 0;
        width: 100%;
        top: 70%;
        padding: 40px 0px;
        background-color: var(--white);
        z-index: -1;
        transition: all ease-in-out 300ms;
        transform: scaleY(0);
        transform-origin: top;
        display: block!important;
        flex-basis: initial;
        padding-bottom: 0px;
    }
    #mainmenu #mobilenav.show{
        transform: scaleY(1);
    }
    .nav-item{
        margin: 0px!important;
        text-align: end;
        width: fit-content;
        margin-left: auto!important;
    }
    .navbar-nav .nav-item {
        display: initial;
        width: 100%;
    }
    #mobilenav .submenu {
        background-color: var(--primary);
        padding: 20px;
        text-align: start;
    }
    #mobilenav .submenu .nav-link{
        color: var(--white);
        font-family: var(--fonttext);
        font-size: 16px;
        font-weight: 600;
        padding: 10px 0px;
    }
    .navbar-nav .nav-item .nav-link{
        padding: 10px;
    }
    .navbar-nav .nav-item .nav-link i{
        font-size: 22px;
    }
    .submenu .nav-link.active{
        color: var(--secondary)!important;
    }
}

@media (max-width: 834px){
    /**** TOPBAR ****/
    .topbar-wrap{
        padding: 0px;
        padding-left: 20px;
    }
    #topbar .contact span{
        display: none;
    }
    .contact .mail {
        margin-left: 30px;
    }

    /**** MAINMENU ****/

    #mainmenu::before{
        height: 60%;
    }

    /**** FOOTER ****/
    .footer-content{
        flex-direction: column;
    }
    .footer-contact .footer-header{
        font-size: var(--mobileXL);
    }
    .footer-contact .footer-header i{
        font-size: var(--mobileXL);
    }
    .footer-contact .footer-data {
        padding-left: 0px;
    }
    .footer-menu {
        margin-top: 50px;
    }
    .footer-menu a{
        width: fit-content;
        text-align: start;
    }
}