.elementor-94 .elementor-element.elementor-element-8f8351f{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--background-transition:0.3s;--margin-block-start:0px;--margin-block-end:0px;--margin-inline-start:0px;--margin-inline-end:0px;--padding-block-start:0px;--padding-block-end:0px;--padding-inline-start:0px;--padding-inline-end:0px;--z-index:333;}.elementor-94 .elementor-element.elementor-element-8fc63d5 .elementor-menu-toggle{margin:0 auto;}.elementor-94 .elementor-element.elementor-element-8fc63d5 .elementor-nav-menu .elementor-item{font-family:"Lexend Deca", Sans-serif;font-weight:200;}.elementor-94 .elementor-element.elementor-element-8fc63d5 .elementor-nav-menu--main .elementor-item{color:#000000;fill:#000000;}.elementor-94 .elementor-element.elementor-element-8fc63d5 .elementor-nav-menu--main .elementor-item:hover,
					.elementor-94 .elementor-element.elementor-element-8fc63d5 .elementor-nav-menu--main .elementor-item.elementor-item-active,
					.elementor-94 .elementor-element.elementor-element-8fc63d5 .elementor-nav-menu--main .elementor-item.highlighted,
					.elementor-94 .elementor-element.elementor-element-8fc63d5 .elementor-nav-menu--main .elementor-item:focus{color:#3F5128;fill:#3F5128;}.elementor-94 .elementor-element.elementor-element-8fc63d5 .elementor-nav-menu--main .elementor-item.elementor-item-active{color:#3F5128;}.elementor-94 .elementor-element.elementor-element-8fc63d5 .elementor-nav-menu--dropdown a, .elementor-94 .elementor-element.elementor-element-8fc63d5 .elementor-menu-toggle{color:#000000;}.elementor-94 .elementor-element.elementor-element-8fc63d5 .elementor-nav-menu--dropdown{background-color:#FFFFFF;}.elementor-94 .elementor-element.elementor-element-8fc63d5 .elementor-nav-menu--dropdown a:hover,
					.elementor-94 .elementor-element.elementor-element-8fc63d5 .elementor-nav-menu--dropdown a.elementor-item-active,
					.elementor-94 .elementor-element.elementor-element-8fc63d5 .elementor-nav-menu--dropdown a.highlighted,
					.elementor-94 .elementor-element.elementor-element-8fc63d5 .elementor-menu-toggle:hover{color:#3F5128;}.elementor-94 .elementor-element.elementor-element-8fc63d5 .elementor-nav-menu--dropdown a:hover,
					.elementor-94 .elementor-element.elementor-element-8fc63d5 .elementor-nav-menu--dropdown a.elementor-item-active,
					.elementor-94 .elementor-element.elementor-element-8fc63d5 .elementor-nav-menu--dropdown a.highlighted{background-color:#FFFFFF;}.elementor-94 .elementor-element.elementor-element-8fc63d5 .elementor-nav-menu--dropdown a.elementor-item-active{color:#3F5128;background-color:#FFFFFF;}.elementor-94 .elementor-element.elementor-element-8fc63d5 .elementor-nav-menu--dropdown .elementor-item, .elementor-94 .elementor-element.elementor-element-8fc63d5 .elementor-nav-menu--dropdown  .elementor-sub-item{font-family:"Lexend Deca", Sans-serif;font-weight:200;}.elementor-94 .elementor-element.elementor-element-2e9077f{--grid-template-columns:repeat(0, auto);--grid-column-gap:5px;--grid-row-gap:0px;}.elementor-94 .elementor-element.elementor-element-2e9077f .elementor-widget-container{text-align:center;}.elementor-94 .elementor-element.elementor-element-2e9077f .elementor-social-icon{background-color:#FFFFFF;}.elementor-94 .elementor-element.elementor-element-2e9077f .elementor-social-icon i{color:#000000;}.elementor-94 .elementor-element.elementor-element-2e9077f .elementor-social-icon svg{fill:#000000;}@media(max-width:767px){.elementor-94 .elementor-element.elementor-element-5827155 img{width:28%;}.elementor-94 .elementor-element.elementor-element-5827155 > .elementor-widget-container{margin:30px 0px 0px 0px;}}/* Start custom CSS for container, class: .elementor-element-8f8351f */<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="menu.css">  
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Lexend:wght@200&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lexend:wght@500&display=swap" rel="stylesheet">
    <title>Document</title>

</head>


<style>

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Lexend', sans-serif;
    }
    
    #header {
        width: 100%;
        background-color: #ffffff;
        height: 45px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        transition: height 0.3s ease;
    }
    
    #header.minimized-header {
        height: 85px;
    }
    
    #logo {
        width: 30%;
        height: auto;
        background-color: #ffffff;
        position: relative;
        z-index: 3;
        margin-left: 104px;
    }
    
    .menu a {
        text-decoration: none;
        color: #000;
        background-color: #ffffff;
        margin-left: 0px;
        font-family: 'Lexend', sans-serif;
    }
    
    .menu {
        background-color: #ffffff;
        margin-right: 0px;
        font-family: 'Lexend', sans-serif;
        margin-top: 5px;
    }
    
    .menu-icon {
        cursor: pointer;
        background-color: #ffffff;
        width: 30px;
        height: 30px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-right: 50px;
        margin-top: 5px;
    }
    
    .menu-icon .bar {
        width: 30px;
        height: 3px;
        background-color: #000;
        transition: transform 0.3s ease;
        margin: 2px 0;
    
    }
    
    .menu-icon.active .bar:nth-child(1) {
        transform: rotate(45deg) translate(0, 4px);
        margin-top: 12px;
    }
    
    .menu-icon.active .bar:nth-child(2) {
        transform: rotate(-45deg) translate(0, -4px);
    }
    .menu-icon.active .bar:nth-child(3) {
        opacity: 0;
    }
    
    
    #cogv{margin-left: 320px;
        background-color: #ffffff;
        font-family: 'Lexend', sans-serif;
        font-weight: 500;
        }
    
        #menu.active, #cogv.active {
            display: none;
            margin-top: 5px;
        }    
    #expanded-menu {
        display: none;
        z-index: 0;
        grid-template-columns: repeat(3, 1fr);
        background-color: #ffffff;
        width: 100%;
        position: absolute;
        padding: 8px;
        top: 60px;
        left: 20px;
        list-style-type: none;
    }
    
    .columns {
        text-align: center;
        background-color: #ffffff;
    }
    
    .columns a {
        text-decoration: none;
        color: #ffffff;
        margin-bottom: 10px;
    }
    
    #whatsapp,
    #Instagram-preto,
    #facebook {
        margin-left: 10px;
    }
    
    .menu-icon,
    .grid-container,
    .grid-show,
    .grid-item {
        background-color: #ffffff;
    }
    
    .logo {
        transform: scale(1);
        transform-origin: top left;
        transition: transform 0.3s ease;
        margin-top: 0px;
    }
    
    .grid-container {
        display: none;
        margin-top: 30px;
    }
    
    .grid-show {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        grid-gap: 0px;
        width: 50%;
        margin: 0 auto;
        margin-top: -60px;
        margin-left: 600px;
    }
    
    .grid-item {
        display: flex;
        align-items: center;
        background-color: #ffffff;
        text-align: left;
        padding: 5px;
        font-size: 14px;
    }
    
    .grid-item a {
        text-decoration: none !important;
        margin: 0 5px;
        color: black !important;
        background-color: #ffffff;
    }
    
    .grid-item a i {
        font-size: 20px;
        background-color: #ffffff !important;
    }
    
    #whatsapp,
    #Instagram-preto,
    #facebook {
        width: 18px;
        margin-top: 5px;
    }
    

</style>

<body>
    <div class="header" id="header">
        <div class="menu" id="menu">
            <a href="https://vitahaus.com.br/"><img src="http://vitahaus.com.br/wp-content/uploads/2023/10/Grupo-44@2x.png" alt="logo" id="logo" class="logo"></a>
        </div>
        <div class="menu" style="background-color: #ffffff;" id="cogv">
            <a href="https://vitahaus.com.br/greenview"><p>CONHEÇA O GREEN VIEW</p></a>
        </div>
        <div class= "menu" id="menu">
            <a href="https://api.whatsapp.com/send?phone=55(47)996120484&text=Ol%C3%A1!%20Gostaria%20de%20mais%20informa%C3%A7%C3%B5es%2C%20por%20favor."><img src="http://vitahaus.com.br/wp-content/uploads/2023/10/Grupo-29@2x.png" alt="whatsapp" id="whatsapp"></a>
            <a href="https://www.instagram.com/vitahausincorporadora/"><img src="http://vitahaus.com.br/wp-content/uploads/2023/10/Uniao-3@2x.png" alt="Instagram-preto" id="Instagram-preto"></a>
            <a href="https://www.facebook.com/vitahausincorporadora"><img src="https://vitahaus.com.br/wp-content/uploads/2023/10/Grupo-28@2x.png" alt="facebook" id="facebook"></a>
        </div>
        <div class="menu-icon" id="menu-icon">
            <div class="bar"></div>
            <div class="bar"></div>
            <div class="bar"></div>
        </div>
        <div class="expanded-menu" id="expanded-menu" style="background-color: #ffffff;">
            <div class="grid-container">
                <div class="grid-item">
                    <a href="https://vitahaus.com.br/">INÍCIO</a>
                </div>
                <div class="grid-item">
                    <a href="https://vitahaus.com.br/greenview">CONHEÇA O GREEN VIEW</a>
                </div>
                <div class="grid-item">
                    <a href="https://vitahaus.com.br/blog/">NOTÍCIAS</a>
                </div>
                <div class="grid-item">
                    <a href="https://vitahaus.com.br/greenview">EMPREENDIMENTO</a>
                </div>
                <div class="grid-item">
                    <a href="mailto:ola@vitahaus.com">ola@vitahaus.com</a>
                </div>
                <div class="grid-item">
                    <a href="https://api.whatsapp.com/send?phone=55(47)996120484&text=Ol%C3%A1!%20Gostaria%20de%20mais%20informa%C3%A7%C3%B5es%2C%20por%20favor.">
                        <img src="http://vitahaus.com.br/wp-content/uploads/2023/10/Grupo-29@2x.png" alt="whatsapp" id= "whatsapp">
                        <span>(47) 99612 0484</span>
                    </a>
                </div>
                <div class="grid-item">
                    <a href="httsp://vitahaus.com.br/#quem-somos">QUEM SOMOS</a>
                </div>
                <div class="grid-item">
                    <a href="tel:+4747025707">TEL.:(47) 3802 5707</a>
                </div>
                <div class="grid-item" >
                    <a href="https://www.facebook.com/vitahausincorporadora">
                        <img src="https://vitahaus.com.br/wp-content/uploads/2023/10/Grupo-28@2x.png" alt="facebook" id="facebook">
                    </a>
                    <a href="https://www.instagram.com/vitahausincorporadora/">
                        <img src="http://vitahaus.com.br/wp-content/uploads/2023/10/Uniao-3@2x.png" alt="Instagram-preto" id="Instagram-preto">
                    </a>
                    <span>@vitahaus</span>
                </div>
            </div>
        </div>
    </div>

</body>

    <script>
       
       
        document.addEventListener("DOMContentLoaded", function () {
            const menuIcon = document.getElementById("menu-icon");
            const expandedMenu = document.getElementById("expanded-menu");
            const logo = document.getElementById("logo");
            const header = document.getElementById("header");
        
            
            expandedMenu.style.display = "none";
        
            menuIcon.addEventListener("click", function () {
                if (expandedMenu.style.display === "none" || expandedMenu.style.display === "") {
                    expandedMenu.style.display = "flex";
                    menuIcon.classList.add('active');
                    header.classList.add('minimized-header');
                    logo.style.transform = "scale(2.5)";
                    logo.style.transformOrigin = "top left";
                    document.querySelectorAll('.menu:not(.menu-icon) a').forEach(item => {
                        item.classList.add('menu-hidden');
                    });
                    document.querySelector('.grid-container').classList.add('grid-show');
                } else {
                    expandedMenu.style.display = "none";
                    menuIcon.classList.remove('active');
                    header.classList.remove('minimized-header');
                    logo.style.transform = "scale(1)";
                    document.querySelectorAll('.menu:not(.menu-icon) a').forEach(item => {
                        item.classList.remove('menu-hidden');
                    });
                    document.querySelector('.grid-container').classList.remove('grid-show');
                }
            });
        });
        
        
    </script>

</html>/* End custom CSS */