/**********************
*
* Menu
*
**********************/

body:has(#menu .wrapper .grid #novo-menu.opened) {
	overflow: hidden;
}

header.et-l--header {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	background: transparent;
	z-index: 999;
	transition: var(--transicao);
}

/*header.et-l--header:not(:has(#novo-menu.opened)) {
	mix-blend-mode: difference;
}*/

#menu .LinhaLogoRedesSociais .ColunaLogo{
	width: 20.875% !important;
   margin-right: 5.5% !important;
}

#menu .LinhaLogoRedesSociais .ColunaRedesSociais{
	width: 73.625% !important;
   display: flex !important;
   justify-content: flex-end !important;
}

#menu .LinhaLogoRedesSociais .ColunaRedesSociais .Redes-sociais{
   padding: 0 0 10px 0 !important;
   display: flex !important;
   flex-direction: row !important;
   list-style-type: none !important;
}

#menu .LinhaLogoRedesSociais .ColunaRedesSociais .Redes-sociais .et_pb_social_network_link .icon span{
	display: none !important;
}

#menu .LinhaLogoRedesSociais .ColunaRedesSociais .Redes-sociais .et-social-facebook{
	margin-right: 8px !important;
}

#menu .LinhaLogoRedesSociais .ColunaRedesSociais .Redes-sociais .et-social-instagram{
	margin-right: 8px !important;
}

#menu .LinhaLogoRedesSociais .ColunaRedesSociais .Redes-sociais .et-social-facebook .icon:before{
	content:"" !important;
	display: block !important;
	width: 24px !important;
	height: 24px !important;
	background-size: 100% !important;
	background-image: url("http://twist-dev.com/lp-casulo/wp-content/uploads/2025/04/Logo-Facebook-Azul.png") !important;
	background-repeat: no-repeat !important;
}

#menu .LinhaLogoRedesSociais .ColunaRedesSociais .Redes-sociais .et-social-instagram .icon:before{
	content:"" !important;
	display: block !important;
	width: 24px !important;
	height: 24px !important;
	background-size: 100% !important;
	background-image: url("http://twist-dev.com/lp-casulo/wp-content/uploads/2025/04/Logo-Instagram-Azul.png") !important;
	background-repeat: no-repeat !important;
}

#menu .LinhaLogoRedesSociais .ColunaRedesSociais .Redes-sociais .et-social-whatsapp .icon:before{
	content:"" !important;
	display: block !important;
	width: 24px !important;
	height: 24px !important;
	background-size: 100% !important;
	background-image: url("http://twist-dev.com/lp-casulo/wp-content/uploads/2025/05/Logo-Whatsapp-Azul.png") !important;
	background-repeat: no-repeat !important;
}

#menu .wrapper{
	display: flex !important;
	justify-content: flex-end !important;
}

#menu .wrapper .grid{
	display: flex !important;
   flex-direction: row-reverse !important;
   width: 100% !important;
}

#menu:has(#novo-menu) .wrapper .grid #logo {
	position: relative;
	z-index: 2;
}

#menu .wrapper .grid #novo-menu {
	display: flex !important;
	width: 70% !important;
   padding: 0px !important;
   border-right: none !important;
   margin-right: 0px !important;
}

#menu .wrapper .grid #novo-menu .et_pb_widget {
   margin: 0px !important;
   display: flex !important;
   width: 100% !important;
}

#menu .wrapper .grid #novo-menu .et_pb_widget .menu-inicial-container{
   display: flex !important;
   width: 100% !important;
   justify-content: flex-end !important;
}

#menu .wrapper .grid #novo-menu .et_pb_widget .menu-inicial-container #menu-inicial{
	display: flex !important;
   width: 100% !important;
   justify-content: space-between !important;
   padding: 0 !important;
}

#menu .wrapper .grid #novo-menu .et_pb_widget .menu-inicial-container #menu-inicial .menu-item {
	margin-bottom: 0 !important;
   display: flex !important;
   align-items: center !important;
}

#menu .wrapper .grid #novo-menu .et_pb_widget .menu-inicial-container #menu-inicial .menu-item.current-menu-item a{
	/*-font-weight: 700 !important;-*/
   color: #403f3f !important;
}

#menu .wrapper .grid #novo-menu .et_pb_widget .menu-inicial-container #menu-inicial .menu-item a{
	font-weight: 500 !important;
	color: #403f3f !important;
	font-size: 18px !important;
}

#menu .wrapper .grid #hamburger svg.icone rect {
	transform: ;transition: all 0.3s ease-in-out
}

#menu .wrapper .grid:has(#novo-menu.opened) #hamburger svg.icone .middle {
	x: 0;
	opacity: 0
}

#menu .wrapper .grid:has(#novo-menu.opened) #hamburger svg.icone .top {
	transform: rotate(45deg);
	transform-origin: center top;
	x: 50px;
	y: 35px
}

#menu .wrapper .grid:has(#novo-menu.opened) #hamburger svg.icone .bottom {
	transform: rotate(-45deg);
	transform-origin: center top;
	x: -20px;
	y: 25px
}

#menu-bg {
	display: none;
	width: 100vw !important;
	height: 100dvh !important;
	padding: 0 !important;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 998;
	inset: 0%;
	pointer-events: visible;
	}

	#menu-bg .bg-panel {
	z-index: 0;
	background-color: var(--corAzulEscuro);
	position: absolute;
	inset: 0%;
	}

	#menu-bg .bg-panel.second {
	background-color: var(--corAzul);
}

/**********************
*
* Media Query
*
**********************/
@media only screen and (min-width: 981px) {
	#menu .wrapper .grid #novo-menu .et_pb_widget {
	   clip-path: none !important;
	}
}

@media only screen and (max-width: 980px) {
	#menu .LinhaLogoRedesSociais .ColunaLogo{
		width: 32% !important;
	   margin-right: 5.5% !important;
	}

	#menu .LinhaLogoRedesSociais .ColunaRedesSociais{
		width: 62.5% !important;
	   display: flex !important;
	   justify-content: flex-end !important;
	}

	#menu .wrapper .grid #hamburger {
		display: flex !important;
		z-index: 2;
		cursor: pointer;
		margin-bottom: 0!important;
	   width: 50px !important;
	   height: 50px !important;
	}

	#menu .wrapper .grid #hamburger .et_pb_code_inner{
	   width: 50px !important;
	   height: 50px !important;
	}

	#menu .wrapper .grid #hamburger button {
		width: 50px !important;
	  	height: 50px !important;
		all: unset;
	}

	#menu .wrapper .grid #hamburger button .icone{
		width: 50px !important;
	   height: 50px !important;
	}

	#menu .wrapper .grid {
		display: grid !important;
		justify-items: end !important;
	}

	#menu .wrapper .grid #novo-menu {
		display: grid !important;
		width: max-content !important;
		height: max-content !important;
		position: absolute !important;
		inset: 0% !important;
		z-index: 1 !important;
		top: 60px !important;
		left: 75% !important;
	}

	#menu .wrapper .grid #novo-menu li {
		font-size: var(--H3);
	}

	#menu .et_pb_row .MenuColunaLogo{
		margin-bottom: 0 !important;
	}

	#menu .wrapper .grid #novo-menu .widget_nav_menu {
		margin: 0px !important;
	   display: grid !important;
	   width: 100% !important;
		height: 100% !important;
		z-index: 3 !important;
		padding: var(--gap) !important;
		border-radius: var(--borderRadius) !important;
		background: none !important;
		backdrop-filter: blur(10px) !important;
	}

	#menu .wrapper .grid #novo-menu .widget_nav_menu,
	#menu .wrapper .grid #novo-menu .widget_nav_menu > div,
	#menu .wrapper .grid #novo-menu .widget_nav_menu .menu {
		height: 100% !important;
		margin: 0 !important;
	}

	#menu .wrapper .grid #novo-menu .widget_nav_menu .menu-inicial-container {
		display: grid !important;
		align-items: end !important;
		align-content: center !important;
		justify-content: end !important; 
		padding-right: 0 !important;
	}

	#menu .wrapper .grid #novo-menu .et_pb_widget .menu-inicial-container #menu-inicial {
	    display: grid !important;
	    width: 100% !important;
	    justify-content: space-between !important;
	}

	#menu .wrapper .grid #novo-menu .widget_nav_menu .menu {
		max-width: 1600px !important;
		width: 100% !important;
		margin: auto auto !important;
		display: grid !important;
		grid-template-columns: repeat(1, max-content) !important;
		padding-block: var(--borderRadius) !important;
		align-content: center !important;
		justify-content: space-between; !important;
		justify-items: end !important;
		gap: var(--gap) !important;
		max-height: calc(100vh -((var(--H1) + var(--paddingMenor))* 2)) !important;
		padding: 0 !important;
		overflow: hidden !important;
	}

	#menu .wrapper .grid #novo-menu li {
		font-size: var(--textoCorrido) !important;
		line-height: 1em !important;
		text-align: right !important;
		pointer-events: all !important;
		width: max-content !important;
		height: max-content !important;
	}

	#menu .wrapper .grid #novo-menu .widget_nav_menu .menu .menu-item.icon > a {
		width: 100% !important;
	}	

	#menu .wrapper .grid #novo-menu .et_pb_widget .menu-inicial-container #menu-inicial .menu-item.current_page_item a {
	   /*-font-weight: 700 !important;-*/
	   background: none !important;
	   padding: 0px !important;
	   color: #403f3f !important;
	}

	#menu .wrapper .grid #novo-menu .et_pb_widget .menu-inicial-container #menu-inicial .menu-item a{
		color: #403f3f !important;
	}

	/*#menu .wrapper .grid #novo-menu .widget_nav_menu .menu li a {
		display: grid;
		grid-template-columns: auto auto;
		gap: var(--gap);
	}*/

	#menu .wrapper .grid #novo-menu .widget_nav_menu .menu li,
	#menu .wrapper .grid #novo-menu .widget_nav_menu .menu li,
	#menu .wrapper .grid #novo-menu .widget_nav_menu .menu li > a {
		width: 100% !important;
		height: auto !important;
		font-family: var(--fonteTitulos) !important;
		height: max-content !important;
		display: grid !important;
		color: var(--corBranca) !important;
	}

	#menu .wrapper .grid #novo-menu .widget_nav_menu .menu .menu-item {
		padding: 0 !important;
	} 

	#menu .wrapper .grid #novo-menu .widget_nav_menu .menu .menu-item > a {
		justify-content: flex-start !important;
		font-size: 20px !important;
	}

	#menu .wrapper .grid #novo-menu .widget_nav_menu .menu li.para + li.spacer-tab {
		grid-area: spacer-mini;
	}

	#menu .wrapper .grid #novo-menu .widget_nav_menu .menu li.nos {
		grid-area: nos;
	}

	#menu .wrapper .grid #novo-menu .widget_nav_menu .menu li.fizemos {
		grid-area: fizemos;
	}

	#menu .wrapper .grid #novo-menu .widget_nav_menu .menu li.servicos {
		grid-area: servicos;
	}

	#menu .wrapper .grid #novo-menu .widget_nav_menu .menu li.para {
		grid-area: para;
	}																				

	#menu .wrapper .grid #novo-menu .widget_nav_menu .menu li.email + li.spacer-tab {
		grid-area: spacer;
	}

	#menu .wrapper .grid #novo-menu .widget_nav_menu .menu li.orcamento {
		grid-area: orcamento;
		padding-bottom: 2rem !important;
	}

	#menu .wrapper .grid #novo-menu .widget_nav_menu .menu li.instagram {
		grid-area: instagram;
	}

	#menu .wrapper .grid #novo-menu .widget_nav_menu .menu li.email {
		grid-area: email;
	}

	#menu .wrapper .grid #novo-menu .widget_nav_menu .menu li.endereco {
		grid-area: endereco;
	}

	#menu .wrapper .grid #novo-menu .widget_nav_menu .menu .spacer-tab:before {
		display: none;
	}

	#menu .wrapper .grid #novo-menu .widget_nav_menu .menu .menu-item.icon>a .group {
		gap: 1.2ch;
	}

	#menu .wrapper .grid #novo-menu .widget_nav_menu .menu .menu-item.icon>a .group > span:not(.wrap) {
		display: none;
	}

	#menu .wrapper .grid #novo-menu .widget_nav_menu .menu .menu-item.icon:is(.nos, .fizemos, .servicos, .para) > a {
		font-size: calc(var(--h2) * 1.4);
		padding-block: 0.2em !important;
		overflow: hidden;
	}

	#menu .wrapper .grid #novo-menu .widget_nav_menu .menu .menu-item.icon:is(.nos, .fizemos, .servicos, .para) > a .group {
		gap: 0.6ch;
		font-weight: var(--font-semibold) !important;
	}

	#menu .wrapper .grid #novo-menu .widget_nav_menu .menu .menu-item.icon:is(.nos, .fizemos, .servicos, .para) > a .group:before {
		width: 0.6em;
		height: 0.6em;
	}

	#menu .wrapper .grid #novo-menu .widget_nav_menu .menu .menu-item.icon a .group:before {
		transition: all 0.3s ease-in-out;
	}

	#menu .wrapper .grid #novo-menu:not(.opened) .widget_nav_menu .menu .menu-item.icon a .group:before {
		transform: scale(0.5) translateY(125%);
		opacity: 0;
	}

	#menu .wrapper .grid #novo-menu:not(.opened) .widget_nav_menu .menu .menu-item a.staggered-button .stagger > span {
		transform: scale(0.5) translateY(125%);
		opacity: 0;
	}
}

@media only screen and (max-width: 600px) {
	#menu .wrapper .grid #novo-menu {
		display: grid !important;
		width: max-content !important;
		height: max-content !important;
		position: absolute !important;
		inset: 0% !important;
		z-index: 1 !important;
		top: 60px !important;
		left: 65% !important;
	}
}

@media only screen and (max-width: 500px) {
	#menu .wrapper .grid #novo-menu {
		display: grid !important;
		width: max-content !important;
		height: max-content !important;
		position: absolute !important;
		inset: 0% !important;
		z-index: 1 !important;
		top: 60px !important;
		left: 52% !important;
	}
}

@media only screen and (max-width: 400px) {
	#menu .wrapper .grid #novo-menu {
		display: grid !important;
		width: max-content !important;
		height: max-content !important;
		position: absolute !important;
		inset: 0% !important;
		z-index: 1 !important;
		top: 60px !important;
		left: 45% !important;
	}
}