@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap');

html {
	scroll-behavior: smooth;
}

body {
	scroll-behavior: smooth;
	overflow-x:  hidden;
	width:  100%;
	max-width:  100%;
	font-family: "Roboto", sans-serif;
	font-weight: 400;
	font-style: normal;
}




.navbar-collapse {
	background: rgba(0, 0, 0, 0.85);
	height: 100vh;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	text-align: center;
}
.navbar .nav-item .nav-link {
	color: #fff !important;
	font-weight: 800;
	font-size: 2em;
}
.navbar .nav-item .nav-link:hover {
	animation: pulse 1s infinite;
	animation-timing-function: linear;  
	border-top: 1px solid #fff; 
	border-bottom: 1px solid #fff; 
}
.navbar .navbar-close {
	font-size: 3em;
	color: #ffffff;
	background: none;
	border: none;
}


.scroll {
	background: rgba(0, 0, 0, 0.80);
}

.fw-light {
	font-weight: 300 !important;
}

.fw-bold {
	font-weight: 700 !important;
}

.fw-black {
	font-weight: 900 !important;
}

.bg-dark {
	background: #1a1a1a !important;
}
.bg-opacity {
	background: rgba(0, 0, 0, 0.35);
}



.header .projetos, .header button img {
	height: 15px;
}
.header .logo {
	height: 40px;
}

#header-home {
		background: url(../img/header-bg.webp) no-repeat;
		background-size: cover;
		background-position: center;
}

#header-video {
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	min-width: 100%;
	height: 100vh;
	object-fit: cover;
	z-index: 1;
	margin-bottom: -10px;
}

.conteudo {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 10;
	width: 100%;
	height: 100%;
}

.btn-black {
	background: #000;
	color: #fff !important;
	border: none;
}
.btn-outline-black {
	background: none;
	color: #000 !important;
	border: 2px solid #000;
}
.btn-black:hover, .btn-outline-black:hover {
	animation: pulse 1s infinite;
	animation-timing-function: linear;   
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1);
  100% { transform: scale(1); }
  }
}

#sobre {
	background-size: 40%;
	background-position: bottom 2em right;
}


#projetos {
	height: 100vh;
	padding: 4px;
}
#projetos .area {
	width: 25%;
	background-color: #1a1a1a;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	position: relative;
	display: block;
}
#projetos .area:not(:first-child) {
	margin-left: 4px;
}
#projetos #living {
	background-image: url(../img/area-living.webp);
}
#projetos #cozinha {
	background-image: url(../img/area-cozinha.webp);
}
#projetos #gourmet {
	background-image: url(../img/area-gourmet.webp);
}
#projetos #outros {
	background-image: url(../img/area-outros.webp);
}
#projetos .mascara {
	background: rgba(0, 0, 0, 0.6);
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 5;
	transition: .7s ease;
}
#projetos .mascara:hover {
	background: rgba(0, 0, 0, 0.3);
}
#projetos .titulo {
	color: #fff;
	z-index: 8;
	position: relative;
	font-weight: 700;
	letter-spacing: 1.8em;
	writing-mode: tb-rl;
    transform: rotate(-180deg);
	position: absolute;
	bottom: 5em;
	right: 1em;
}




#showrooms {
	height: 100vh;
	background: #1a1a1a url(../img/showroom-bg.webp) no-repeat;
	background-size: 70% auto;
	background-position: right center;
	position: relative;
}

#fabrica {
	height: 100vh;
	background: #ffffff url(../img/cozinha.webp) no-repeat;
	background-size: 30% auto;
	background-position: left top;
}




#numeros {
		background: url(../img/numeros-bg.webp) no-repeat;
		background-size: cover;
		background-position: center;
}

#numeros-video {
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	min-width: 100%;
	height: 100vh;
	object-fit: cover;
	z-index: 1;
	margin-bottom: -10px;
}
#numeros p {
	border-top: 3px solid #fff;
	padding: 7px 1.8em;
}


.barras {
	height: 25px !important;
	width: auto !important;
}

.owl-dots {
	position: absolute;
	top: 2em;
	right: 2em;
}
.owl-dots .owl-dot span {
	border: 1px solid #000;
	width: 12px;
	height: 12px;
	display: block;
	border-radius: 50%;
	margin-left: 10px;
}
.owl-dots .owl-dot.active span {
	background: #000;
}



footer h6 {
	font-weight: 700;
	letter-spacing: 2px;
}

footer input {
	width: 100%;
	display: block;
	background: #ffffff;
	border-radius: 5em;
	padding: 10px 20px;
	margin-bottom: 15px;
	border: none;
}

footer button {
	border: none;
	outline: none;
	background: none;
	font-weight: 700;
	padding: 10px;
	color: #ffffff;
	margin-top: 10px;
}


.footer {
	height: 30px;
	background: #1a1a1a;
	background-size: cover;
}


.header-outros {
	height: 300px;
	background: #ffffff url(../img/header-bg.webp) no-repeat;
	background-position: center;
	background-size: cover;
	padding-top: 9em;
}

#galerias nav {
	border-bottom: 3px solid #000;
}
#galerias nav .nav-link {
	color: #000;
}

#galerias nav .nav-link.active {
	background: none;
	border-bottom: 7px solid #000;
	color: #000;
	border-radius: 0;
}

#galerias img {
	object-fit: cover;
	width: 100%;
	margin-bottom: 2em;
}
#galerias .col-8 img, #galerias .col-6 img {
	height: 18em;
}
#galerias .col-4 img {
	height: 38em;
}


.whatsapp {
	position: fixed;
	bottom: 10px;
	right: 10px;
	width: 65px;
	z-index: 50;
}


@media(max-width: 768px) {

	.whatsapp {
		width: 40px;
	}

	h1 {
		font-size: 1.9em;
	}
	h1.display-3 {
		font-size: 2.5em;
	}


	#sobre {
		background-size: 65%;
		background-position: bottom 1em right;
	}


	#projetos {
		height: 50vh;
		padding: 2px;
	}
	#projetos .titulo {
		bottom: 2em;
		right: 0.5em;
		letter-spacing: 1.4em;
	}
	#projetos .area:not(:first-child) {
		margin-left: 2px;
	}

	#numeros-video {
		height: auto;
		min-height: 70vh;
	}

	#numeros, #showrooms, #fabrica {
		min-height: 35vh;
		height: auto;
		background-size: cover;
	}

	#numeros .numeros.display-3 {
		font-size: 2.5em;
	}

	#numeros p {
		font-size: 0.85em;
		max-width: 70%;
		margin: 0 auto;
	}

	#showrooms .conteudo {
		position: relative;
	}

	#fabrica {
		background-image: none;
	}
	.owl-dots {
		right: 0;
	}


	#galerias img {
		margin-bottom: 2em;
	}
	#galerias .col-8 img {
		height: 9em;
	}
	#galerias .col-4 img {
		height: 20em;
	}

}