/******************************************/
/** Fonts                                **/
/******************************************/

@font-face {
	font-family: 'Satoshi';
	src: url('../../fonts/Satoshi-Regular.woff2') format('woff2'),
		url('../../fonts/Satoshi-Regular.woff') format('woff'),
		url('../../fonts/Satoshi-Regular.ttf') format('truetype');
		font-weight: 400;
		font-display: swap;
		font-style: normal;
}
@font-face {
	font-family: 'Satoshi';
	src: url('../../fonts/Satoshi-Medium.woff2') format('woff2'),
		url('../../fonts/Satoshi-Medium.woff') format('woff'),
		url('../../fonts/Satoshi-Medium.ttf') format('truetype');
		font-weight: 500;
		font-display: swap;
		font-style: normal;
}

@font-face {
	font-family: 'Clash Grotesk';
	src: url('../../fonts/ClashGrotesk-Light.woff2') format('woff2'),
		url('../../fonts/ClashGrotesk-Light.woff') format('woff'),
		url('../../fonts/ClashGrotesk-Light.ttf') format('truetype');
		font-weight: 300;
		font-display: swap;
		font-style: normal;
}
@font-face {
	font-family: 'Clash Grotesk';
	src: url('../../fonts/ClashGrotesk-Regular.woff2') format('woff2'),
		url('../../fonts/ClashGrotesk-Regular.woff') format('woff'),
		url('../../fonts/ClashGrotesk-Regular.ttf') format('truetype');
		font-weight: 400;
		font-display: swap;
		font-style: normal;
}
@font-face {
	font-family: 'Clash Grotesk';
	src: url('../../fonts/ClashGrotesk-Medium.woff2') format('woff2'),
		url('../../fonts/ClashGrotesk-Medium.woff') format('woff'),
		url('../../fonts/ClashGrotesk-Medium.ttf') format('truetype');
		font-weight: 500;
		font-display: swap;
		font-style: normal;
} 
@font-face {
	font-family: 'Clash Grotesk';
	src: url('../../fonts/ClashGrotesk-Semibold.woff2') format('woff2'),
		url('../../fonts/ClashGrotesk-Semibold.woff') format('woff'),
		url('../../fonts/ClashGrotesk-Semibold.ttf') format('truetype');
		font-weight: 600;
		font-display: swap;
		font-style: normal;
} 



/******************************************/
/** General                              **/
/******************************************/

:root {
	--primary: #008971;
	--secondary: #00261f;
	--light-footer: #e5fffa;
	--dark: #161615;
	--gray: #6a6a6a;
	--footer: #959595;
	--white: #ffffff;
	--black: #000000;
	--light: #f9f9f9;
	--info: #fff9ee;
	--brown: #755e31;
	--banner: rgba(22, 22, 21, 0.56);
}

* {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

html, body {
	margin: 0;
	padding: 0;
	font-weight: 300;
	color: var(--gray);
	position: relative;
	scroll-behavior: smooth;
	background-color: var(--white);
	font-family: 'Satoshi', sans-serif;
}

body {
	width: 100%;
	height: 100%;
}

a {
	color: var(--gray);
	text-decoration: none;
}

ul {list-style-type: none;}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: 'Clash Grotesk', sans-serif;
}

h2, h3, h4, h5, h6 {letter-spacing: 8.75px;}

@media (max-width: 575px) {
	h2, .h2 {
		font-size: 1.2rem;
		letter-spacing: 6px;
	}
}

@media (max-width: 420px) {h2, .h2 {font-size: 1rem;}}



/******************************************/
/** Helpers                              **/
/******************************************/

.img-cover {
	object-fit: cover;
	object-position: center center;
}

.w-50px {width: 50px;}
.w-fit {width: fit-content;}
.h-fit {height: fit-content;}
.w-40 {width: 40% !important;}
.w-60 {width: 60% !important;}

.ls-1-28 {letter-spacing: 1.28px;}

.transition-03 {transition: all .3s ease-in-out;}

.fs-7 {font-size: .9rem;}

.fw-300 {font-weight: 300;}
.fw-400 {font-weight: 400;}
.fw-500 {font-weight: 500;}
.fw-600 {font-weight: 600;}

.hover\:fw-500:hover {font-weight: 500;}

.text-primary {color: var(--primary) !important;}
.text-light-footer {color: var(--light-footer) !important;}
.text-dark {color: var(--dark) !important;}
.text-black {color: var(--black) !important;}
.text-footer {color: var(--footer) !important;}
.text-gray {color: var(--gray) !important;}
.text-brown {color: var(--brown) !important;}

.hover\:text-white:hover {color: var(--white) !important;}
.hover\:text-primary:hover {color: var(--primary) !important;}

.bg-primary {background-color: var(--primary) !important;}
.bg-secondary {background-color: var(--secondary) !important;}
.bg-gray {background-color: var(--gray) !important;}
.bg-light-footer {background-color: var(--light-footer) !important;}
.bg-info {background-color: var(--info) !important;}
.bg-brown {background-color: var(--brown) !important;}

.font-clash {font-family: 'Clash Grotesk', sans-serif;}

.border-primary {border: 1px solid var(--primary) !important;}

.btn-primary span {
	z-index: 10;
	line-height: 2.2;
	letter-spacing: 1.4px;
}

.btn-primary .btn-wrapper::before {
	top: 0;
	right: 0;
	width: 0;
	bottom: 0;
	z-index: 0;
	content: '';
	height: 100%;
	position: absolute;
	transition: all .3s ease-in-out;
	background-color: var(--primary);
}

.btn-primary.alt .btn-wrapper::before {background-color: var(--light-footer);}
.btn-primary.info .btn-wrapper::before {background-color: var(--brown);}

.btn-primary:hover .btn-wrapper::before {width: 100%;}
.btn-primary:hover .btn-wrapper span {color: var(--white) !important;}
.btn-primary.alt:hover .btn-wrapper span {color: var(--primary) !important;}
.btn-primary:hover .btn-wrapper p {color: var(--white);}

.btn-primary svg {
	fill: var(--white);
	transform: rotate(180deg) scale(.7);
}

.btn-primary.alt svg {fill: var(--primary);}

.btn-primary svg.ficha {
	fill: var(--white);
	transform: rotate(0deg);
}

.dropdown-menu.show {border-radius: 0;}

.dropdown-item {
	font-weight: 500;
	color: var(--dark);
}

.dropdown-item:focus,
.dropdown-item:hover {
	color: var(--primary);
	background-color: #dff0ed;
}



/**********************************/
/**                              **/
/** Back to top                  **/
/**                              **/
/**********************************/

#back-top {
	right: 5%;
	bottom: 10%;
	width: 50px;
	height: 50px;
	z-index: 1000;
}

.fade-in {
	opacity: 1;
	animation-duration: 0.5s;
	animation-iteration-count: 1;
	animation-name: fadeInOpacity;
	animation-timing-function: ease-in;
}

@keyframes fadeInOpacity {
	0% {opacity: 0;}
	100% {opacity: 1;}
}



/******************************************/
/** Navbar                               **/
/******************************************/

/** Geral **/

nav {z-index: 10;}

.produtosNavContainer {transform: translate(35%, 65%);}

.produtosNavContainer div.position-relative::before {
	z-index: 1;
	content: '';
	width: 20px;
	height: 20px;
	position: absolute;
	background-color: var(--white);
	transform: translate(20px, -5px) rotate(45deg);
}

.produtosNavContainer ul {z-index: 2;}

#produtosNav:hover .produtosNavContainer {display: flex !important;}

/** Mobile **/

.mobile-nav {z-index: 50;}

.mobile-nav,
.mobile-nav-header,
.mobile-nav img {width: 200px;}

.mobile-nav button#burger {height: 30px;}

@media (max-width: 1024px) {
	.mobile-nav,
	.mobile-nav-header,
	.mobile-nav img {width: 200px;}
}

@media (max-width: 575px) {
	.mobile-nav,
	.mobile-nav-header,
	.mobile-nav img {width: 150px;}
}

.mobile-nav #lines,
.mobile-nav #lines::before,
.mobile-nav #lines::after {
	width: 30px;
	height: 3px;
	display: block;
	transition: all .3s ease-in-out;
	background-color: var(--white);
}

.mobile-nav #lines.dark,
.mobile-nav #lines.dark::before,
.mobile-nav #lines.dark::after {background-color: var(--dark);}

.mobile-nav #lines::before,
.mobile-nav #lines::after {content: '';}

.mobile-nav #lines::before {transform: translateY(-8px);}
.mobile-nav #lines::after {transform: translateY(5px);}

/** Opened **/

.mobile-nav.open {height: 100vh;}
.mobile-nav #lines.open {transform: rotate(45deg);}
.mobile-nav #lines.open::before {transform: translateY(0) rotate(90deg);}
.mobile-nav #lines.open::after {opacity: 0;}

.mobile-nav #lines.open,
.mobile-nav #lines.open::before,
.mobile-nav #lines.open::after {background-color: var(--primary);}

/** Content **/

.mobile-nav a span.active {color: var(--black) !important;}



/******************************************/
/** Banner Small                         **/
/******************************************/

.banner-sm {height: 250px;}

.banner-sm h1 {
	font-weight: 500;
	letter-spacing: 10px;
	transform: translateY(30px);
}

@media (max-width: 575px) {
	.banner-sm h1 {transform: translateY(25px);}
}



/******************************************/
/** Banner                               **/
/******************************************/

.banner {height: 95vh;}

.banner .overlay {
	z-index: 2;
	background-color: var(--banner);
}

.banner .bg-img {z-index: 1;}

.hero-text {z-index: 4;}

.hero-text h1 {
	line-height: 1.4;
	font-size: 2.8rem;
	letter-spacing: 12.5px;
}

@media (max-width: 991px) {.hero-text h1 {font-size: 2rem;}}

@media (max-width: 575px) {.hero-text h1 {font-size: 1.5rem;}}

@media (max-width: 400px) {
	.hero-text h1 {
		line-height: 1.6;
		font-size: 1.2rem;
		letter-spacing: 6px;
	}
}



/******************************************/
/** História                             **/
/******************************************/

.historia-big {
	z-index: 1;
	line-height: 1;
	font-size: 10rem;
}

.historia-img {margin-left: 8%;}

.historia-overlay {opacity: .8;}

.historia-right {z-index: 1;}

.historia-right h5 {letter-spacing: 12px;}

.historia-right p {line-height: 1.75;}

@media (max-width: 1200px) {
	.historia-left {
		height: 350px;
		overflow: hidden;
	}
}

@media (max-width: 575px) {
	.historia-big {font-size: 6rem;}
}



/******************************************/
/** Empresa                              **/
/******************************************/

.historia-block {width: 85%;}

@media (max-width: 1200px) {.historia-block {width: 100%;}}

@media (max-width: 991px) {.historia-block {width: 85%;}}

@media (min-width: 991px) {.historia-col-left {margin-top: 150px !important;}}

@media (max-width: 575px) {.historia-block {width: 100%;}}

.valores span {letter-spacing: 2px;}

.historia-big.empresa {transform: translateY(55px);}

.primeiraImagem {width: 35%;}
.segundaImagem {width: 25%;}
.terceiraImagem {width: 40%;}
.quartaImagem {width: 20%;}
.quintaImagem {width: 40%;}
.sextaImagem {width: 15%;}
.setimaImagem {width: 35%;}

@media (max-width: 1400px) {
	.primeiraImagem {width: 33%;}
	.segundaImagem {width: 40%;}
	.terceiraImagem {width: 33%;}
	.quartaImagem {width: 25%;}
	.quintaImagem {width: 25%;}
	.sextaImagem {width: 25%;}
	.setimaImagem {width: 25%;}
}

.col.item {height: 400px;}

#owlControl .owl-prev, #owlControl .owl-next {
	border: none;
	display: flex;
	margin: 0 10px;
	min-width: 45px;
	max-width: 45px;
	min-height: 45px;
	max-height: 45px;
	border-radius: 50%;
	align-items: center;
	justify-content: center;
	background-color: var(--primary);
}



/******************************************/
/** Serviços                             **/
/******************************************/

.ra-top {height: 250px;}

.ra-bottom div {transform: translateY(-50%);}

.ra-middle {transform: translateY(-55px);}

@media (max-width: 991px) {.ra-middle {transform: translateY(0);}}

@media (max-width: 1200px) {.ra-middle.page {transform: translateY(0);}}



/******************************************/
/** Catálogo                             **/
/******************************************/

.produto img {
	height: 200px;
	max-width: 100%;
}

@media (max-width: 450px) {.produto img {height: auto;}}

.produto-wrapper::before {
	left: 0;
	right: 0;
	top: 50%;
	height: 0;
	z-index: 0;
	content: '';
	width: 100%;
	position: absolute;
	background-color: var(--light);
	transition: all .5s ease-in-out;
}

.produto:hover .produto-wrapper::before {
	top: 0;
	height: 100%;
}

.produto-wrapper > * {z-index: 10;}

.produto .line {
	width: 20px;
	height: 2px;
}

.produto-top {letter-spacing: 2.75px;}

.produto-bottom {letter-spacing: 1.6px;}

@media (max-width: 1200px) {.produto-bottom {font-size: 1.2rem !important;}}

@media (max-width: 575px) {.produto-bottom {font-size: 1rem !important;}}

.mixFilter {
	border: none;
	letter-spacing: 1.28px;
}

.mixitup-control-active {
	font-weight: 600;
	color: var(--primary);
	border-bottom: 2px solid var(--primary);
}

.breadcrumb-item+.breadcrumb-item {padding-left: .3rem !important;}

.breadcrumb-item+.breadcrumb-item::before {
	padding-right: .3rem !important;
	color: var(--primary) !important;
	content: var(--bs-breadcrumb-divider, ">");
}

.produto-title {letter-spacing: 1px !important;}

.produto-container .produto-img {z-index: 1;}

.produto-svg {
	right: 0;
	bottom: 0;
	z-index: 3;
}

.fancybox-bg {background: #fff9ee !important;}

#owlCatalogo .owl-prev, #owlCatalogo .owl-next {
	border: none;
	display: flex;
	margin: 0 10px;
	min-width: 30px;
	max-width: 30px;
	min-height: 30px;
	max-height: 30px;
	border-radius: 50%;
	align-items: center;
	justify-content: center;
	background-color: var(--primary);
}



/******************************************/
/** Porfólio                             **/
/******************************************/

.port {height: 400px;}

.port.middle {transform: translateY(50%);}

.port img {
	top: 0;
	left: 0;
	bottom: 0;
	z-index: 1;
}

.port div {
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 3;
}

/** Novo */

.port-overlay {left: 0;}

@media (min-width: 575px) {
	.port:hover .port-overlay {
		width: 100% !important;
		opacity: .5 !important;
	}
	.port:hover img {width: 100% !important;}
	.port:hover p {color: var(--white) !important;}
}

@media (max-width: 1200px) {.port.middle {transform: translateY(0);}}

@media (max-width: 575px) {
	.port {height: auto;}
	.port img {
		width: 100% !important;
		height: 300px !important;
	}
	.port-bot {
		width: 100% !important;
		position: relative !important;
	}
}

.image-port:hover .overlay-port {opacity: 1 !important;}

.overlay-port {background-color: #0000007c;}



/******************************************/
/** Forms                                **/
/******************************************/

.form-select:active,
.form-select:focus,
.form-control:active,
.form-control:focus {
	box-shadow: none;
	background-color: transparent;
}

/*************/
/** Produto **/

#formProduto .form-control {
	border: 0;
	border-bottom: 2px solid var(--brown);
}

#formProduto ::placeholder {
	color: var(--brown) !important;
	opacity: 1;
}

#formProduto :-ms-input-placeholder {color: var(--brown) !important;}

#formProduto ::-ms-input-placeholder {color: var(--brown) !important;}

/***************/
/** Contactos **/

#formContactos .form-control {
	border: 0;
	border-bottom: 1px solid #d3d3d3;
}

#formContactos ::placeholder {
	opacity: 1;
	color: var(--dark) !important;
}

#formContactos :-ms-input-placeholder {color: var(--dark) !important;}

#formContactos ::-ms-input-placeholder {color: var(--dark) !important;}

.form-check-input {
	min-width: 1em !important;
	min-height: 1em !important;
}

.form-check-input:checked {
	border-color: var(--primary) !important;
	background-color: var(--primary) !important;
}

.form-check-input:focus {
	box-shadow: none;
	border-color: var(--primary) !important;
}

#formContactos .form-select:active,
#formContactos .form-select:focus,
#formContactos .form-control:active,
#formContactos .form-control:focus {
	border-color: var(--primary) !important;
}