:root{
	--branco: #FFFFFF;
	--branco-primary: #FFF9F9;
	--branco-second: #F9F5F5;
	--preto: #212121;
	--marrom-claro: #C1BEBD;
	--marrom-medio: #89817B;
	--marrom-escuro: #707070;
	--marrom: #4D423B;
	--preto-banner: #0F0D0C;
	--titulo-banner: #A19C98;
	--borda: #C1BEBD33;

	--padding-x-global: 6.25rem;
	--padding-x-global-mobile: 2rem;
	--section-y-global: 3rem;
	--section-y-global-mobile: 2rem;

	--Lexend: "Lexend", sans-serif;
	--NotoSans: "Noto Sans", sans-serif;
	--MontSerrat: "Montserrat", sans-serif;

	--h1-fs: 3.8rem;
	--h1-lh: 1.2em;
	--h2-fs: 3rem;
	--h2-lh: 1.2em;
	--h3-fs: 2.3rem;
	--h3-lh: 1.2em;
	--h4-fs: 1.8rem;
	--h4-lh: 1.em;
	--h5-fs: 1.4em;
	--h5-lh: 1.2em;
	--h6-fs: 1.2rem;
	--h6-lh: 1.2em; 

	--h1-fs-mobile: 3rem;
	--h1-lh-mobile: 1.2em;
	--h2-fs-mobile: 2.5rem;
	--h2-lh-mobile: 1.2em;
	--h3-fs-mobile: 2rem;
	--h3-lh-mobile: 1.2em;
	--h4-fs-mobile: 1.8rem;
	--h4-lh-mobile: 1.2em;
	--h5-fs-mobile: 1.4em;
	--h5-lh-mobile: 1.2em;
	--h6-fs-mobile: 1.2rem;
	--h6-lh-mobile: 1.2em; 
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: var(--Readex-Pro);
	font-size: calc(12px + 0.390625vw);
	line-height: 1.5;
}

body{
	overflow-x: hidden;
}

a, a:hover {
	text-decoration: none;
	color: inherit;
}

ul, ol {
	list-style: none;
	padding: 0;
}

button.btn,
button.btn:active,
button.btn:focus,
input:active,
input:focus,
textarea:active,
textarea:focus {
	outline: none !important;
	box-shadow: none !important;
}

button:focus:not(:focus-visible) {
	outline: 0!important;
	box-shadow: none!important;
}

button.btn:active {
	outline: none !important;
	box-shadow: none !important;
	border-color: transparent !important;
}

.form-control:focus {
	box-shadow: none;
}

.main {
	overflow: hidden;
	padding-top: 0;
	margin-top: 75px;
}

@media(max-width: 568px){
	.main{
		margin-top: 60px;
	}

}

.anchor {
	position: absolute;
	top: -80px;
}

/* DIV SPACE */
#space{
	background-color: var(--branco);
	padding: 50px 0;
	margin-bottom: -150px;
	z-index: 1;
	position: relative;
}

@media(max-width: 568px){
	#space{
		display: none;
	}
}

/* BOTÃO VOLTAR */
#voltar.mobile{
	display: none;
}

#voltar i{
	font-size: 20px;
}

#voltar::after {
	content: "Voltar";
    margin-left: 5px;
    vertical-align: text-top;
    font-size: 14px;
    font-weight: 200;
}

@media(max-width: 568px){
	#voltar.mobile{
		display: block;
	}
	
	#voltar.desktop{
		display: none;
	}
	
	#voltar{
		margin: 10px 0;
	}

	#voltar i{
		color: #C1BEBD;
	}

	#voltar::after {
		content: "";
		margin-right: 0px; 
	}

}

.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
	padding: 0 var(--padding-x-global);
	max-width: 100rem;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	font-weight: lighter;
	font-family: var(--Lexend);
}

.h1, h1 {
	font-size: var(--h1-fs);
	line-height: var(--h1-lh);
}

.h2, h2 {
	font-size: var(--h2-fs);
	line-height: var(--h2-lh);
}

.h3, h3 {
	font-size: var(--h3-fs);
	line-height: var(--h3-lh);
}

.h4, h4 {
	font-size: var(--h4-fs);
	line-height: var(--h4-lh);
}

.h5, h5 {
	font-size: var(--h5-fs);
	line-height: var(--h5-lh);
}

.h6, h6 {
	font-size: var(--h6-fs);
	line-height: var(--h6-lh);
}

.btn.btn-default {
	position: relative;
	padding: 10px 25px;
	border-radius: 0px;
	transition: 0.5s;
	overflow: hidden;
	color: var(--marrom-claro);
	border: 1px solid var(--borda);
	background-color: var(--marrom);
	opacity: 0.5;

}

.btn.btn-default:hover {
	border: 1px solid var(--borda);
	background-color: var(--marrom);
	color: var(--marrom-claro);
	opacity: 0.8;

}

@media(max-width: 568px){
	.btn.btn-default{
		display: block;
		width: 90%;
		margin: auto;
	}
}

header {
	background: transparent;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 999;
}

.navbar{
	background-color: var(--preto);
}

.navbar-expand-lg .navbar-nav {
	align-items: center;
}

/* SUBMENU */
.dropdown .dropdown-menu {
	transition: all 0.5s;
	overflow: hidden;
	transform-origin: top center;
	transform: scale(1, 0);
	display: block;
	border: 0px solid transparent;
	color: var(--branco-primary);
	background-color: var(--preto);
	border-radius: 0;
}

.dropdown .dropdown-menu .dropdown-item {
	font-size: 14px;
	padding: 8px 20px !important;
	color: #fff !important;
	background-color: #ab7636;
	text-transform: capitalize;
}

.dropdown:hover .dropdown-menu {
	transform: scale(1);
}

#menu-footer li,
#menu-header li{
	position: relative;
	transition: 0.5s;
	line-height: 0;
	margin-left: 25px;
	font-size: 14px;
	font-weight: lighter;
	font-family: var(--Lexend);
	width: fit-content;
}

#menu-footer li::before,
#menu-header li::before{
	position: absolute;
	content: "";
	width: 0;
	height: 2px;
	bottom: 5%;
	left: 50%;
	background: var(--marrom-claro);
	transition: .5s;
}

#menu-footer li:hover::before,
#menu-header li:hover::before{
	width: 100%;
	left: 0;
}

#menu-header li a{
	color: var(--branco-primary);
	font-size: 14px;
}

#link-menu-mobile{
	margin-left: 25px;
}

/* #produtos-menu .menu,
#logo-mobile{
	display: none;
} */

#logo-mobile{
	display: none;
}

#menu-mobile{
	margin-right: -10px;
	display: none;
}

#button-mobile{
	position: relative;
	width: 60px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	z-index: 9999;
	outline: 0;
	border: 0;

}

/* ANIMAÇÃO MENU MOBILE */
.line {
	margin-bottom: 5px;
	width: 100%;
	height: 3px;
	transition: transform 0.3s;
	background-color: var(--marrom-claro);
}

.line-2 {
	width: 90%;
}

.change .line-1 {
	transform: translate(0px, 5px) rotate(-40deg);
}

.change .line-2 {
	display: none;
}

.change .line-3 {
	transform: translate(0px, -2px) rotate(40deg);
}

/* IMAGEM DE FUNDO */
#back-image2,
#back-image{
	position: absolute;
	top: 5%;
	left: 5%;
	object-fit: contain;
	height: 90%;
	mix-blend-mode: multiply; /* Remove o branco ao mesclar com o fundo */
}

#back-image2{
	left: initial;
	right: 0;

}

@media(max-width: 568px){
	#back-image{
		left: -15%;
		height: 50%;
		object-fit: cover;
	}

	#back-image2 {
		bottom: 0;
		top: initial;
		object-fit: cover;
		height: 45%;
	}

}

#front-image{
	z-index: 1;
	position: relative;
}

/* SEÇÃO CATALOGO*/
#catalogo{
	padding: 80px 0;
}

#catalogo .catalogo-text h5{
	font-weight: 300;
}

.catalogo-images{
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	align-self: center;		
	grid-column-gap: 20px;
}

#second.catalogo-images{
	grid-column-gap: 0px;	
}

.catalogo-images img{
	width: 200px;
}

#first.catalogo-images img:nth-of-type(2){
	margin-top: -30px;
}

#first.catalogo-images img:nth-of-type(3){
	margin-top: 20px;
}

#first.catalogo-images img:nth-of-type(4){
	margin-top: -20px;
}

#first.catalogo-images img:nth-of-type(5){
	margin-top: 20px;
}

#second.catalogo-images img:nth-of-type(2){
	margin-top: -30px;
	margin-left: -10px;
}

#second.catalogo-images img:nth-of-type(3){
	margin-top: 20px;
	margin-left: -20px;
}

#second.catalogo-images img:nth-of-type(4){
	margin-top: -20px;
	margin-left: -30px;
}

#second.catalogo-images img:nth-of-type(5){
	margin-top: 20px;
	margin-left: -40px;
}
/* MOBILE CATALOGO */
@media(max-width: 568px){

	.col-md-6.text-center{
		text-align: left!important;	
	}
	
	#second.catalogo-images img:nth-of-type(2),
	#second.catalogo-images img:nth-of-type(3),
	#second.catalogo-images img:nth-of-type(4),
	#second.catalogo-images img:nth-of-type(5){
		margin-left: 0;
	}

	.catalogo-images{
		grid-column-gap: 5px;	
		margin-bottom: 20px;
	}

	#catalogo .catalogo-text{
		margin: 0 auto;
		text-align: center;
		margin-top: 50px;
	}

}

/* SEÇÃO ESPECIALISTA */
#especialista{
	padding: 80px 0;
	background-color: var(--marrom-medio);
	color: var(--branco);
}

#especialista h5{
	font-weight: 300;
}
/* MOBILE ESPECIALISTA */
@media(max-width: 568px){
	#especialista{
		padding: 50px 0;
	}

	#especialista .right-box{
		text-align: center;
	}		


}

/* FOOTER */
footer{
	background-color: var(--preto);
	color: var(--marrom-claro);

}

footer b,
footer a,
footer p{
	font-size: 14px;
	margin-bottom: 0;
}

footer h6{
	text-transform: uppercase;
	font-weight: 400;
	font-size: 16px;
}

#menu-footer li{
	width: fit-content;
	margin-left: 0;

}

.wrapper-footer{
	padding: 70px 0 30px 0;
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr 1fr 2fr 1.5fr;
	gap: 2vw;
}

.footer-image{
	margin-right: 20px;

}

.tuna img {
	height: 40px;
	filter: brightness(50);
}   

.boiserie-menu{
	display: none;
}

.redes-sociais.footer{
	text-align: left;

}

.redes-sociais.footer i{
	margin-right: 5px;

}

.footer-credits{
	padding-bottom: 20px;
}

#tuna-credits-footer,
#menu-credits-footer{
	text-align: right;
}

@media(max-width: 998px) {

	.wrapper-footer{
		grid-template-columns: 1fr 1fr;
		grid-template-areas: 
			"header header"
			"header-two header-two"
			"left-two right-two"
			"left-three right-three"
			"footer-one footer-two"
			;
		gap: 4vw;

	}

	.footer-image{
		grid-area: header;
		justify-self: center;
	}

	.menu-footer{
		grid-area: header-two;
		justify-self: center;
	}

	.produtos-menu{
		grid-area: left-two;
		justify-self: center;
	}

	.pisos-menu{
		grid-area: right-two;
		justify-self: center;
	}

	.boiserie-menu{
		display: block;
		grid-area: left-three;
		justify-self: center;
	}

	.rodape-menu{
		grid-area: right-three;
		justify-self: center;
	}

	.contato{
		text-align: center;
		grid-area: footer-one;
		justify-self: center;
	}

	.wrapper-sociais-footer{
		grid-area: footer-two;
		justify-self: center;
	}

	.redes-sociais{
		text-align: center;
	}

	#link-menu-mobile{
		margin-bottom: 20px;
	}

}

@media(max-width: 768px) {

	.wrapper {
		padding: var(--section-y-global-mobile) 0;
	}

	.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
		padding: 0 var(--padding-x-global-mobile);
	}

	.h1, h1 {
		font-size: var(--h1-fs-mobile);
		line-height: var(--h1-lh-mobile);
	}

	.h2, h2 {
		font-size: var(--h2-fs-mobile);
		line-height: var(--h2-lh-mobile);
	}

	.h3, h3 {
		font-size: var(--h3-fs-mobile);
		line-height: var(--h3-lh-mobile);
	}

	.h4, h4 {
		font-size: var(--h4-fs-mobile);
		line-height: var(--h4-lh-mobile);
	}

	.h5, h5 {
		font-size: var(--h5-fs-mobile);
		line-height: var(--h5-lh-mobile);
	}

	.h6, h6 {
		font-size: var(--h6-fs-mobile);
		line-height: var(--h6-lh-mobile);
	}

	header .navbar-brand #logo-desktop{
		display: none;

	}

	header .navbar-brand #logo-mobile{
		display: block;

	}

	#menu-mobile{
		display: block;

	}

}

@media(max-width: 568px) {

	.wrapper-footer{
		grid-template-columns: 1fr 1fr;
		grid-template-areas: 
			"header header"
			"header-two header-two"
			"left-two right-two"
			"left-three right-three"
			"footer-one footer-one"
			"footer-two footer-two"
			;		
	}

	#menu-credits-footer{
		text-align: center;
	}

	#tuna-credits-footer{
		text-align: center;
		margin: 30px 0;
	}

}