
body {
    div:first-of-type.elementor-column-wrap.elementor-element-populated {
        padding: 0 !important;
    }

    &.home {

        .menu-primary-menu-container {

            &:not(.active) {
        
                .menu-trigger { 
        
                    color: #fff;
                
                }
        
            }

        }

    }

}


.menu-primary-menu-container {

    &.active {

        .menu-trigger { 

            color: var( --e-global-typography-text-font-family );
        
            &::after {

                content: "\f00d";

            }
        
        }

    }

    &:not(.active) {

        .menu {

            @media (max-width: 768px) {

                opacity: 0;
                pointer-events: none;

            }

        }

    }

    .menu {
    
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        gap: 1rem;
    
        font-family: var( --e-global-typography-text-font-family ), Sans-serif;
    
        list-style-type: none;

        transition: .3s ease;

        @media (max-width: 768px) {

            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100svh;
            padding: 1rem;
            flex-direction: column;

            background-color: white;

            z-index: 100;

            font-size: 150%;

            a {

                color: var(--e-global-color-accent);

            }

        }
    
        @media (min-width: 768px) {
    
            padding-top: 2rem;

        }

        > li {

            @media (min-width: 768px) {
    
                padding-bottom: 2rem;

            }

            &.current-menu-item,
            &.current-menu-ancestor {

                > a {

                    @media (max-width: 768px) {

                        font-weight: 600;

                    }

                    @media (min-width: 768px) {

                        background-color: #10EA3A;

                    }

                }

                @media (min-width: 768px) {

                    .sub-menu {

                        .current_page_item {

                            font-weight: 600;

                        }

                    }

                }

            }
    
            &:hover {
    
                .sub-menu {
    
                    pointer-events: all;
                    opacity: 1;
                    transform: translateY(80%);
    
                }
    
            }
    
            &.menu-item-has-children {

                @media (min-width: 768px) {
    
                    > a {
        
                        display: flex;
                        align-items: center;
                        justify-content: safe;
                        gap: 0.5em;
        
                        &::after{
        
                            font-family: "Font Awesome 5 Free";
                            font-weight: 900;
                            content: "\f105";
                            transform: rotate(90deg);
        
                            transition: .3s ease;
        
                        }
        
                    }

                    &:hover {
                        
                        > a {

                            background-color: #10EA3A;

                            &::after {
        
                                transform: rotate(-90deg);
        
                            }

                        }

                    }

                }
    
            }
    
            > a {
    
                @media (min-width: 768px) {

                    position: relative;
        
                    border-radius: 50px;
                    padding: 1rem;
                    background-color: var(--e-global-color-accent);
                    color: white;
        
                    transition: .3s ease;
        
                    z-index: 40;
        
                    &:hover {
        
                        background-color: #10EA3A;
        
                    }

                }
    
            }
    
        }
    
        .sub-menu {
    
            opacity: 0;
            pointer-events: none;
    
            position: absolute;
            background: white;
            bottom: 0;
            transform: translateY(20%);
            z-index: 22;
            width: 11rem;
    
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
    
            transition: .3s ease;
    
            padding: 1rem;
    
            border-radius: 3px;
                
            > li {
    
                list-style: none;
    
                a {
    
                    color: var(--e-global-color-accent);
    
                    &:hover {
    
                        color: #10EA3A;
    
                    }
    
                }
    
            }
    
        }
    
    }
    
    .menu-trigger {      

        z-index: 101;

        position: fixed;

        right: 1rem;
        top: 1rem;
    
        background: transparent;
        border: none;
        color: var( --e-global-typography-text-font-family );

        font-size: 200%;

        cursor: pointer;

        @media (min-width: 768px) {
        
            display: none;
        
        }  
    
        &::after {
    
            content: "\f0c9";
            font-family: "Font Awesome 5 Free";
            font-weight: 900;
    
        }
    
    }

}

