/*
Theme Name: Ikigai
Author: Neiko srl
Author URI: http://www.neiko.it/
Description: Ikigai - 2024
Version: 1.0
License: GNU General Public License v2 or later
*/

/*  
	
	FONTS UTILIZZATI : Schibsted Grotesk
	
	COLORI UTILIZZATI : 
	
*/


/* GENERAL */

html,body {
	margin:0;
	padding:0;
	font-family: "Schibsted Grotesk", sans-serif;
	font-size: 18px !important;
	font-weight: 400;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: inheritantialiased;
	-moz-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	background-color: var(--background-color);
	color: var(--text-color);
}

:root {
	--text-color: #181D24;
	--text-color-light: #EEEBE8;
	--text-color-pink: #BB676C;
	--text-color-brown: #988271;
	--background-color: #E6E0DB;
	--background-color-btn: #CEC3BB;
	--background-color-dark-browk: #CCC0B7;
	--background-color-btn-hover: #C3B6AC;
	--font-family: "Schibsted Grotesk", sans-serif;
	--18: clamp(0.889rem, 0.9375vw, 1rem);
	--24: clamp(1.111rem, 1.25vw, 1.333rem);
	--28: clamp(1.333rem, 1.45vw, 1.55rem);
	--40: clamp(1.667rem, 2.083vw, 2.222rem);
	--65: clamp(1.778rem, 3.385vw, 3.611rem);
	--80: clamp(1.9rem, 4.16vw, 4.444rem);
	--transition: all 0.5s cubic-bezier(0.23,1,0.32,1);
}

.no-padding {
	padding: 0 !important;
}


.no-padding-left {
	padding-left: 0 !important;
}

.no-padding-right {
	padding-right: 0 !important;
}

.light {
	color: var(--text-color-light) !important;
}


@media (max-width: 767.99px) {
	.no-padding {
		padding-left: 15px !important;
		padding-right: 15px !important;
	}
	
	.no-padding-left {
		padding-left: 15px !important;
	}
	
	.no-padding-right {
		padding-right: 15px !important;
	}
}


@media (min-width: 1600px){ 
	html,body {
		font-size: 18px !important;
	}
}


img,a img {
	border:none!important;
}

::-moz-selection {
	background:none repeat scroll 0 0 #FFF;
	color:#000;
}

* {
	outline: 0!important;
}

b,strong,.bold { 
	font-weight: 700 !important;
}

.underline {
	text-decoration: underline !important;
}

a,a:visited { 
	outline-style: none;
	text-decoration: none;
	color: inherit;
}

a:hover { 
	cursor :pointer !important;
	color: inherit;
	text-decoration: none;
}


@media (min-width: 1200px){ 
	.container-fluid {
		padding-left: 50px;
		padding-right: 50px;
	}
}

@media (min-width: 1600px){ 
	.container-fluid {
		padding-left: 100px;
		padding-right: 100px;
	}
}


/* TYPO */

.big{
	font-size: 1.1rem;  
}
.small{
	font-size: 0.9rem;
}

h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6{

}

h1,.h1 {
	font-family: var(--font-family);
	font-size: var(--80);
	color: var(--text-color);
	font-weight: 700;
	margin-bottom: 0;
}

h2,.h2 {
	font-family: var(--font-family);
	font-size: var(--40);
	color: var(--text-color);
	font-weight: 400;
	margin-bottom: 0;
}

h4,.h4 {
	font-family: var(--font-family);
	font-size: var(--24);
	color: var(--text-color);
	font-weight: 400;
}

i,.i {
	font-family: var(--font-family);
	color: var(--text-color-pink);
	font-weight: 600;
	font-style: normal;
}

.span {
	font-family: var(--font-family);
	font-size: clamp(0.889rem, 0.9375vw, 1rem);
	color: var(--text-color);
	font-weight: 400;
}

/* BUTTON */

.bottone {
	width: fit-content !important;
	color: var(--text-color) !important;
	font-size: var(--18) !important;
	text-transform: uppercase !important;
	background-color: var(--background-color-btn);
	border: none;
	padding: 10px 25px;
	transition: var(--transition);
}

.bottone:hover {
	background-color: var(--background-color-btn-hover);
	transform: translateY(-5px);
}


/* LOADER */

#loading {
	position:fixed;
	left:0;
	top:0;
	width:100%;
	height:100%;
	z-index:998;
	background-color: var(--background-color); 
}

.loader {
	display: block;
	position: absolute;
	left: 50%;
	top: 50%;
	translate: -50% -50% !important;
	animation: rotazione 2s infinite; /* Applica l'animazione */
	animation-timing-function: cubic-bezier(.25, .1, .25, 1);
}

@keyframes rotazione {
  from {
	transform: rotate(0deg); /* Inizio dell'animazione */
  }
  to {
	transform: rotate(360deg); /* Fine dell'animazione */
  }
}

/* HEADER */


/* .col-lg-header {
	padding-top: 15.4vh;
} */

.full-h {
	height: 100vh;
	display: flex;
	align-items: end;
	padding-bottom: 20px;
}

@media (max-width: 991.99px) {
	.full-h {
		height: 70vh;
	}
}

@media (max-width: 575.99px) {
	.full-h {
		height: 95vh;
	}
}


.navbar {
	border-bottom: 1px solid var(--text-color);
	padding: 0 0 0 100px;
	height: 15.4vh;
	background-color: var(--background-color);
	position: fixed;
	z-index: 100;
}

@media (max-width: 991.99px) {
	.navbar {
	padding: 0 0 0 50px;
}
}

.navbar-toggler {
	height: 15.3vh;
	padding: 50px;
	background-color: var(--background-color-dark-browk);
	border-radius: 0;
	position: relative;
	display: block;
	top: 0;
	right: 0;
	z-index: 100;
}


.burger-align {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
}

#simply-burger {
  width: 60px;
  height: 45px;
  transform: rotate(0deg);
  transition: .25s * 2 ease-in-out;
  cursor: pointer;
}

#simply-burger span {
  display: block;
  position: absolute;
  height: 4px;
  width: 100%;
  background: var(--text-color);
  border-radius: 0px;
  opacity: 1;
  left: 0;
  transform: rotate(0deg);
  transition: .25s ease-in-out;
}

#simply-burger span:nth-child(1) {
  top: 0px;
}

#simply-burger span:nth-child(2) {
  top: 18px;
}

#simply-burger span:nth-child(3) {
  top: 36px;
}

#simply-burger.open span:nth-child(1) {
  top: 18px;
  transform: rotate(135deg);
}

#simply-burger.open span:nth-child(2) {
  opacity: 0;
  left: -60px;
}

#simply-burger.open span:nth-child(3) {
  top: 18px;
  transform: rotate(-135deg);
}

.navbar-collapse {
	width: 100vw;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 100%;
	background-color: var(--background-color-btn);
	z-index: 99;
	display: flex !important;
	transition: var(--transition);
}

.navbar-collapse {
	flex-direction: row;
	flex-basis: 100%;
	flex-grow: 1;
	align-items: center;
}

.navbar-collapse.show {
	left: 0%;
}

.navbar-collapse ul {
	position: absolute;
	bottom: 50px;
	right: 100px;
	display: block;
}

.nav-link {
	font-family: var(--font-family);
	font-size: var(--65);
	color: var(--text-color);
	font-weight: 700;
	text-transform: capitalize;
	overflow: hidden;
	width: fit-content;
}

.nav-link::after {
	display: block;
	content: '';
	width: 100%;
	height: 2px;
	background-color: var(--text-color-pink);
	transition: var(--transition);
	transform: translateX(-100%);
}

.nav-link:hover {
	color: var(--text-color-pink);
}

.nav-link:hover::after  {
	transform: translateX(0%);
}

.nav-link span {
	text-align: right;
}

.img-menu {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100vh;
	object-fit: cover;
	object-position: center;
	z-index: 100;
	transition: var(--transition);
}

/* MEDIA QUERY MOBILE */

@media (max-width: 767.99px) {
	
	.navbar-brand {
		padding: 0px !important;
	}
	
	.navbar {
		padding: 0 0 30px 30px !important;
		height: 10vh;
	}
	
	.navbar-toggler {
		height: 9.9vh;
		padding: 34px;
	}
	
	.navbar-brand img {
	  max-width: 70%;
	  height: auto;
  }
	
	.img-menu {
	display: none;
	}
	
	#simply-burger {
	  width: 40px;
	  height: 25px;
	}
	
	#simply-burger span {
	  height: 3px;
	}
	
	#simply-burger span:nth-child(1) {
	  top: 0px;
	}
	
	#simply-burger span:nth-child(2) {
	  top: 12px;
	}
	
	#simply-burger span:nth-child(3) {
	  top: 24px;
	}
	
	#simply-burger.open span:nth-child(1) {
	  top: 12px;
	  transform: rotate(135deg);
	}
	
	#simply-burger.open span:nth-child(2) {
	  opacity: 0;
	  left: -30px;
	}
	
	#simply-burger.open span:nth-child(3) {
	  top: 12px;
	  transform: rotate(-135deg);
	}
	
	.img-menu {
		display: none !important; /* Nasconde le immagini */
	}
	
	#menu-top-menu {
		display: flex;
		flex-direction: column;
		align-items: end;
		margin-right: -10%;
		margin-bottom: 10%;
	}
}


.img-menu-now {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100vh;
	object-fit: cover;
	object-position: center;
	z-index: 99;
	transition: var(--transition);
}

@keyframes slideInFromRight {
  0% {
	transform: translateX(100%);
	opacity: 0;
  }
  100% {
	transform: translateX(0);
	opacity: 1;
  }
}

.slide-in-right {
  animation: slideInFromRight 0.5s forwards;
}

@keyframes slideOutToRight {
  0% {
	transform: translateX(0);
	opacity: 1;
  }
  100% {
	transform: translateX(100%);
	opacity: 0;
  }
}

.slide-out-right {
  animation: slideOutToRight 0.5s forwards;
}

.fixed {
	position: fixed;
}

.header-shrink .navbar {
  height: 10vh;
  transition: var(--transition); 
}

.header-shrink .navbar-brand img {
  max-width: 70%;
  height: auto;
  transition: var(--transition); 
}

.header-shrink .navbar-toggler {
	height: 9.9vh;
	padding: 34px;
	transition: var(--transition); 
}

.header-shrink #simply-burger {
	width: 40px;
	height: 25px;
	transition: var(--transition); 
}

.header-shrink #simply-burger span:nth-child(1) {
  top: 0px;
}

.header-shrink #simply-burger span:nth-child(2) {
  top: 12px;
}

.header-shrink #simply-burger span:nth-child(3) {
  top: 24px;
}

#simply-burger.open span:nth-child(1) {
  top: 12px;
  transform: rotate(135deg);
}

#simply-burger.open span:nth-child(2) {
  opacity: 0;
  left: -40px;
}

#simply-burger.open span:nth-child(3) {
  top: 12px;
  transform: rotate(-135deg);
}

.header-shrink #simply-burger span {
  height: 3px;
  width: 100%;
}

#header * {
	transition: var(--transition);
}


/* FOOTER */

#footer {
	background-color: var(--background-color-dark-browk);
	border-top: 4px solid var(--text-color-pink);
}

.footer-contact {
	transition: var(--transition);
}

.footer-contact:hover {
	cursor :pointer;
	color: inherit;
	text-decoration: underline;
}

.line-height-s {
	line-height: 30px;
}

.privacy {
	border-top: 1px solid var(--text-color);
	padding-top: 10px;
}

@media (max-width: 767.99px) {
	.privacy {
		margin-top: 30px;
		padding-left: 0px;
	}
}


/* PAGINE */

/* HOMEPAGE */

.overlay-35 {
	width: 100%;
	height: 100%;
	background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
	display: block;
	opacity: 0.35;
	position: absolute;
	left: 0;
	top: 0;
}

@media (max-width: 767.99px) {
	.overlay-35 {
	width: calc(100% - 30px);
	left: 15px;
}

}

.titolo-copertina {
	display: block;
	position: absolute;
	left: 0;
	bottom: 10%;
}

@media (max-width: 991.99px) {
	.titolo-copertina {
		left: 2%;
		bottom: 10%;
	}
}

.symbol {
	width: clamp(10rem, 20.83vw, 22.222rem);
	display: block;
	position: absolute;
	top: -20%;
	left: 0;
	transform: translate(-40%, 0%);
}

.background-cta {
	width: 100%;
	height: 70vh;
	object-fit: cover;
	object-position: center bottom;
}

@media (max-width: 991.99px) {
	.background-cta {
		width: 100%;
		height: 50vh;
		object-fit: cover;
		object-position: center bottom;
	}
}

@media (max-width: 575.99px) {
	.background-cta {
		height: 60vh;
	}
}


.text-cta {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
}

.button-wrapper {
	display: flex;
	flex-direction: row;
	justify-content: center;
	margin-top: 50px;
	gap: 50px;
}


.overlay-60 {
	width: 100%;
	height: 100%;
	background-color: var(--text-color);
	opacity: 0.6;
	z-index: 1;
	position: absolute;
	top: 0;
	left: 0;
}

.img-hero {
	height: auto;
	width: 100%;
	object-fit: unset;
}

@media (max-width: 767.99px) {
	.img-hero {
		padding-left: 15px;
		padding-right: 15px;
		height: 65vh;
		width: 100%;
		object-fit: cover;
		object-position: center center;
	}}


/* CHI SIAMO */

.symbol-about {
	width: clamp(13.889rem, 20.83vw, 22.222rem);
	display: block;
	position: absolute;
	top: -90%;
	left: 50%;
	transform: translate(-50%, 0%);
}
@media (max-width: 767.99px) {
	.symbol-about {
		width: 8rem;
		top: -90%;
		left: 10px;
	}
}

/* ARREDAMENTO */

.filtro-arredamento {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	row-gap: 30px;
	column-gap: 40px;
	width: 100%;
}

@media (max-width: 767.99px) {
	.filtro-arredamento {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		row-gap: 20px;
		column-gap: 20px;
		width: 100%;
	}
}

.filtro-text::first-letter {
	text-transform: capitalize;
}

.filtro-text {
	position: relative;
	color: var(--text-color);
	font-family: var(--font-family);
	font-size: var(--28);
	text-align: center;
	font-weight: 500;
	transition: var(--transition);
	line-height: normal;
	white-space: nowrap;
	overflow: hidden;
	padding-bottom: 5px;
}

.filtro-text::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	transform: translateX(-100%);
	background-color: var(--text-color-pink);
	transition: var(--transition);
}

.filtro-text:hover, 
.filtro-text.active {
	color: var(--text-color-pink);
}

.filtro-text:hover::after,
.filtro-text.active::after {
	transform: translateX(0%);
}

.isotope-grid {
	width: 100%;
}

.fancybox-caption__body {
	display: none;
}

.current {
	color: var(--text-color-pink);
}

.img-gallery {
	min-height: clamp(12rem, 20.83vw, 22.22rem);
	object-fit: cover;
	object-position: center end;
}



#load-more {
	display: block;
	position: sticky;
	left: 50%;
	bottom: 5%;
	transform: translateX(-50%);
}

.element-item.hidden {
	display: none;
}

#mostra-meno {
	display: none;
}


/* HOME DECOR */

.img-decor {
	min-height: clamp(13.889rem, 20.83vw, 22.22rem);
	width: 100%;
	aspect-ratio: 1/1;
	object-fit: cover;
	object-position: center;
}

/* COME OPERIAMO */

#container-operiamo {
	display: flex;
	position: relative;
	width: 100%;
}

#left {
  width: 50vw;
  height: 100vh;
  position: sticky;
  top: 0;
  transition: transform 0.5s;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

.operiamo-img {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 50vw;
	height: 100vh;
	object-fit: cover;
	object-position: center center;
}

.titolo-servizi {
	position: relative; 
	transition: var(--transition-servizi);
	display: flex;
	flex-wrap: wrap;
	line-height: clamp(45px, 5vw, 130px);
}

.hide-title {
  overflow: hidden;
}

.hide-title span {
  display: inline-block;
  animation-name: reveal;
  animation-duration: .35s;
  animation-timing-function: cubic-bezier(0.17,0.84,0.44,1);
  animation-fill-mode: forwards;
  transform: translateY(100%);
  opacity: 1;
}

@keyframes reveal {
  from {
	transform: translateY(100%);
	/* opacity: 0; */
  }
  
  to {
	transform: translateY(0);
	/* opacity: 1; */
  }
}

#left h2.hideTitle .hide-title span {
animation-name: hide;
  animation-duration: .35s;
  animation-timing-function: cubic-bezier(0.9,0.03,0.69,0.22);
  animation-fill-mode: forwards;
  transform: translateY(0);
}

@keyframes hide {
  from {
	/* opacity: 1; */
  }
  
  to {
	/* opacity: 0; */
	transform: translateY(-100%);
  }
}

#right {
  width: 50vw;
  background-color: var(--background-color);
  box-sizing: border-box;
}

.right-wrapper {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 50px;
	background-color: var(--background-color);
	transform: translate(-20%, 0);
}

.filtri-servizi {
	overflow: hidden;
}

@media (max-width: 767.99px) {
	
	#right {
	  width: 0vw;
	  padding: 0;
	  background-color: var(--background-color);
	  box-sizing: border-box;
	  
	}
	
	.filtri-servizi {
		overflow: auto;
	}
	
	.titolo-servizi {
		left: 50%;
		transform: translateX(-50%);
		font-size: clamp(26px, 3.64vw, 70px);
	}
	
	.right-wrapper {
		width: 80vw;
		padding: 25px;
		transform: translate(-115%, 0);
		overflow: hidden;
	}
	
	.right-item {
	  height: 100vh;
	  display: flex;
	  flex-flow: column;
	  align-items: start;
	  justify-content: center;
	}
	
	.operiamo-img {
		width: 100%;
		height: 100vh;
	}
	
	#left {
	  width: 100vw;
	  height: 100vh;
	  position: sticky;
	  top: 0;
	  left: 0;
	  z-index: 0;
	  transition: transform 0.5s;
	}
	
}

.right-item {
  height: 100vh;
  display: flex;
  flex-flow: column;
  align-items: start;
  justify-content: center;
}

/* CONTATTI */

.symbol-contact {
	width: clamp(13.889rem, 20.83vw, 22.222rem);
	display: block;
	position: absolute;
	top: -25%;
	left: 0;
	transform: translate(-40%, 0%);
	z-index: 1;
}

.line-height {
	line-height: 55px;
}

.contact-btn {
	position: absolute;
	left: 45px;
	bottom: 30px;
	z-index: 2;
}