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

/*  
	
	FONTS UTILIZZATI : Playfair Display | Roboto
	
	COLORI UTILIZZATI : 
	
*/

/* GENERAL */

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

:root {
	--playfair: "Playfair Display", serif;
	--roboto: "Roboto", sans-serif;
	--light: #FAF7F0;
	--crema: #F5F0E1;
	--gold: #B08D57;
	--black: #0A151F;
	--brown: #997848;
	--dark-brown: #8C6F42;
	--16: clamp(0.722rem, 0.833vw, 0.889rem);
	--18: clamp(0.889rem, 0.9375vw, 1rem);
	--20: clamp(1rem, 1.041vw, 1.111rem);
	--32: clamp(1.22rem, 1.666vw, 1.778rem);
	--40: clamp(1.556rem, 2.083vw, 2.222rem);
	--60: clamp(1.667rem, 3.125vw, 3.333rem);
	--80: clamp(2.222rem, 4.166vw, 4.444rem);
	--90: clamp(2.5rem, 4.6875vw, 5rem);
	--200: clamp(4.75rem, 10.40vw, 11.111rem);
	--400: clamp(11rem, 20.83vw, 22.222rem);
	--transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55); 
}

@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;
}

a,a:visited {
	outline-style: none;
	text-decoration: none;
	color: var(--black);
}

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: 50px;
		padding-right: 50px;
	}
}

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

@media (max-width: 575.99px) {
	.container-fluid {
		padding-left: 20px;
		padding-right: 20px;
	}
}


/* COLOR */

.light {
	color: var(--light);
}

.crema {
	background-color: var(--crema);
}

.text-gold {
	color: var(--gold);
}

.text-black {
	color: var(--black);
}

.gold {
	background-color: var(--gold);
}

.black {
	background-color: var(--black);
}

/* BUTTONS */

.btn-primary {
	font-family: var(--roboto);
	padding: 14px 30px;
	background-color: var(--brown);
	color: var(--light) !important;
	border: none;
	transition: var(--transition);
	text-transform: uppercase;
}

.btn-primary:hover {
	background-color: var(--dark-brown);
}

.btn-primary:focus {
	background-color: var(--dark-brown) !important;
	border: none !important;
}

.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
	color: var(--light) !important;
	background-color: var(--dark-brown) !important;
	border-color: transparent;
}

.btn-secondary {
	font-family: var(--playfair);
	padding: 14px 30px;
	background-color: var(--light);
	color: var(--gold);
	border: none;
	transition: var(--transition);
	text-transform: uppercase;
}

.btn-secondary:hover {
	background-color: var(--crema);
	color: var(--gold);
}

.btn-secondary:focus {
	background-color: var(--light) !important;
	color: var(--gold) !important;
	border: none !important;
}

.btn-secondary:not(:disabled):not(.disabled).active, .btn-secondary:not(:disabled):not(.disabled):active, .show>.btn-secondary.dropdown-toggle {
	color: var(--gold) !important;
	background-color: var(--light) !important;
	border-color: transparent;
}


/* OVERLAY */

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

/* 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(--playfair);
	font-size: var(--90);
	color: var(--light);
	font-weight: 400;
	margin: 0;
}

h2, .h2 {
	font-family: var(--playfair);
	font-size: var(--60);
	font-weight: 400;
	margin: 0;
}

h3, .h3 {
	font-family: var(--playfair);
	font-size: var(--32);
	font-weight: 400;
	margin: 0;
}

h4, .h4 {
	font-family: var(--playfair);
	font-size: var(--40);
	margin: 0;
}

i, .i {
	font-family: var(--playfair) !important;
	font-size: var(--80) !important;
	margin: 0;
}


#nk-cookie-page-page i {
	font-family: var(--roboto) !important;
	font-size: var(--18) !important;
	margin: 0;
	font-weight: 700;
}


em, .em {
	font-style: normal;
	font-size: var(--20);
}

p, .p {
	font-family: var(--roboto);
	font-size: var(--18);
	font-weight: 300;
	margin: 0;
}

.roboto {
	font-family: var(--roboto);
}

.playfair {
	font-family: var(--playfair);
}

.single-app-text {
	font-size: var(--32);
	font-family: var(--roboto);
	font-weight: 500;
}

/* COOKIE E PRIVACY POLICY BANNER */

#nk-cookie-banner-banner p {
	font-size: var(--18);
	line-height: 120%;
	font-family: "Arial", sans-serif;
	margin-bottom: 10px !important;
}

#nk-cookie-page-page p {
	font-size: var(--18);
	line-height: 120%;
	font-family: "Arial", sans-serif;
	margin-bottom: 10px !important;
}

/* LOADER */

#loading {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100vh;
	z-index: 9999;
	background-color: var(--light);
	display: flex;
	justify-content: center;
	align-items: center;
	transition: transform 0.6s ease-in-out; /* Transition for moving up */
}

#loading img {
	opacity: 0;
	width: var(--200);
	height: auto;
	transition: opacity 0.6s ease-in-out; /* Transition for fade-in */
}

/* Adding the fade-in class */
#loading img.fadein {
	opacity: 1;
}


/* HEADER */

#header {
	padding: 50px 50px;
	background-color: transparent !important;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;
	transition: background-color 0.3s ease, color 0.3s ease, padding 0.3s ease; /* Aggiungi padding alla transizione */
}

#header.scrolled {
	background-color: var(--light) !important;
	border-bottom: 1px solid var(--gold);
	padding: 25px 50px; /* Modifica il padding per l'header scrolled */
}

.navbar {
	background-color: transparent;
	padding: 0 !important;
	background-color: transparent !important;
}

.navbar-nav {
	display: flex;
	flex-direction: row;
	gap: 30px;
}

@media (min-width: 992px) {
	.navbar-expand-lg {
		flex-flow: row nowrap;
		justify-content: space-between;
	}
}

.nav-link {
	padding: 0 !important;
	overflow: hidden;
	transition: color 0.3s ease;
	position: relative;
}

.nav-link span {
	color: var(--light);
	font-weight: 400;
	font-family: var(--roboto);
	font-size: var(--18);
}

.nav-link::before {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background-color: var(--light);
	transform: translateX(-100%);
	transition: var(--transition);
}

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

#header.scrolled .nav-link span {
	color: var(--black);
}

#header.scrolled .nav-link::before {
	background-color: var(--black);
}

.header-appartamenti .nav-link span {
	color: var(--black);
	font-weight: 400;
	font-family: var(--roboto);
	font-size: var(--20);
}

.header-appartamenti .nav-link::before {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background-color: var(--black);
	transform: translateX(-100%);
	transition: var(--transition);
}

.header-appartamenti .nav-link:hover::before {
	transform: translateX(0);
}

.navbar-brand {
	display: inline-block;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	margin: 0 !important;
}

.navbar-brand img {
	width: var(--40);
}

.navbar-brand img {
	transition: all 0.3s ease;
}

#full-screen-menu {
	display: none;
}

@media (max-width: 767.99px) {
	#full-screen-menu {
		display: block;
		transform: translateX(100%);
		transition: .65s cubic-bezier(0.86,0,0.07,1);
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: var(--light); /* Aggiunto colore di sfondo */
		z-index: 11;
		-webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.15);
		-moz-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.15);
		box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.15);
	}
	
	#full-screen-menu.active {
		transform: translateX(0);
		-webkit-box-shadow: 0px 0px 60px 0px rgba(0,0,0,0.15);
		-moz-box-shadow: 0px 0px 60px 0px rgba(0,0,0,0.15);
		box-shadow: 0px 0px 60px 0px rgba(0,0,0,0.15);
	}
	
	
	#full-screen-menu ul {
		display: flex;
		flex-direction: column;
		list-style: none;
		padding: 0;
		margin: 0;
		text-align: center;
		position: absolute;
		top: 50%;
		left: 50%;
		width: 50%;
		transform: translate(-50%, -50%);
		align-items: center;
	}
	
	#full-screen-menu li {
		padding: 0px !important;
		margin: 0px;
		font-size: 1.5rem;
		width: fit-content !important;
		position: relative;
	}
	
	.menu-toggle span {
	  display: block;
	  width: 25px;
	  height: 3px;
	  background-color: var(--black);
	  margin: 5px auto;
	  -webkit-transition: all 0.3s ease-in-out;
	  -o-transition: all 0.3s ease-in-out;
	  transition: all 0.3s ease-in-out;
	}
	
	.menu-toggle {
	  padding: 7px;
	  position: absolute;
	  display: block;
	  top: 50%;
	  transform: translate(0, -50%);
	  right: 0px;
	  z-index: 12;
	}
	
	
	#mobile-menu.is-active .bar:nth-child(2){
	  opacity: 0;
	  background-color: var(--black);
	}
	
	#mobile-menu.is-active .bar:nth-child(1){
	  -webkit-transform: translateY(7px) rotate(45deg);
	  -ms-transform: translateY(7px) rotate(45deg);
	  -o-transform: translateY(7px) rotate(45deg);
	  transform: translateY(7px) rotate(45deg);
	  background-color: var(--black);
	}
	
	#mobile-menu.is-active .bar:nth-child(3){
	  -webkit-transform: translateY(-8px) rotate(-45deg);
	  -ms-transform: translateY(-8px) rotate(-45deg);
	  -o-transform: translateY(-8px) rotate(-45deg);
	  transform: translateY(-9px) rotate(-45deg);
	  background-color: var(--black);
	}
	
	.nav-link span {
		color: var(--black);
		font-weight: 400;
		font-family: var(--font-family);
		font-size: var(--32);
	}
	
	.menu-toggle .bar {
		background-color: var(--light); /* Colore iniziale bianco */
	}
	
	.menu-toggle.scrolled .bar {
		background-color: var(--black); /* Colore dopo lo scroll */
	}
	
}

@media (max-width: 575.99px) {
	#header {
		padding: 20px 20px;
	}
	
	#header.scrolled {
		padding: 20px 20px; /* Modifica il padding per l'header scrolled */
	}
	
	.navbar-brand {
		display: inline-block;
		padding-top: 0;
		padding-bottom: 0;
		margin-right: 0;
		font-size: 1.25rem;
		line-height: inherit;
		white-space: nowrap;
	}
}


/* FOOTER */

#footer {
	border-top: 1px solid var(--brown);
}


/* PAGINE */

/* HOMEPAGE */

.container-hero {
	width: 100%;
	height: 100vh;
	position: relative;
}

.container-hero img {
	width: 100%;
	height: 100vh;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 0;
	object-fit: cover;
	object-position: center;
}

.container-hero h1 {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	z-index: 2;

}

@media (max-width: 767.99px) {
	.container-hero {
		width: 100%;
		height: 50vh;
		position: relative;
	}
	
	.container-hero img {
		width: 100%;
		height: 50vh;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 0;
		object-fit: cover;
		object-position: center;
	}
	
	.container-hero h1 {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		text-align: center;
		z-index: 2;
	
	}
}

@media (max-width: 575.99px) {
	.container-hero {
		width: 100%;
		height: 70vh;
		position: relative;
	}
	
	.container-hero img {
		height: 70vh;
		object-fit: cover;
		object-position: center;
	}
	
}


/* SEZIONE ATTICO HORIZONTAL SCROLL */


.container-btr {
  position: relative;
  width: 100%;
  min-height: 100vh;
}

.space-holder {
  position: relative;
  width: 100%;
}

.sticky {
  position: sticky;
  top: 75px;
  padding: 0 50px;
  width: 100%;
  height: auto;
  overflow: hidden;
  display: flex;
  flex-flow: column;
  box-sizing: border-box;
}

.horizontal {
  position: relative;
  height: 80vh;
  will-change: transform;
}

.cards {
  position: relative;
  height: 100%;
  padding-right: 100px; /* aggiungi padding-right per margine alla fine */
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
}

.sample-card {
  position: relative;
  width: 75vw;
  height: 100%;
  margin-right: 30px;
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.sample-card:last-child {
	position: relative;
	width: 75vw;
	height: 100%;
	margin-right: 150px;
	flex-shrink: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;	
}

.container-title {
  position: absolute;
  width: 95%;
  bottom: 30px;
  left: 30px;
  z-index: 2;
  color: var(--white);
}

.card-text {
	font-family: var(--playfair);
	font-size: var(--20);
	font-weight: 400;
}

@media (max-width: 767.99px) {
  .horizontal {
	height: 50%;
  }

  .cards {
	height: 85vh;
	padding-left: 0px;
  }

  .sample-card {
	width: 80vw;
	margin: 30px 30px 30px 0px;
  }

  .sample-card img {
	height: 85vh;
	object-fit: cover;
	object-position: center;
  }
  
  .sample-card:last-child {
	  position: relative;
	  width: 80vw;
	  height: 100%;
	  margin-right: 30px;
	  flex-shrink: 0;
	  overflow: hidden;
	  display: flex;
	  flex-direction: column;
	  justify-content: flex-end;	
  }
}

@media (max-width: 575.99px) {
  .sticky {
	top: 0px;
	padding: 0 30px;
  }

  .horizontal {
	height: 100%;
  }

  .cards {
	  padding-top: 30px;
	padding-left: 0px;
	height: 90vh;
  }
  
  .card-text {
	  font-family: var(--playfair);
	  font-size: var(--20);
	  font-weight: 400;
	  width: 90%;
  }

  .sample-card {
	width: 90vw;
	margin: 20px 20px 20px 0px;
  }
  
  .sample-card:last-child {
	  position: relative;
	  width: 90vw;
	  height: 100%;
	  margin-right: 20px;
	  flex-shrink: 0;
	  overflow: hidden;
	  display: flex;
	  flex-direction: column;
	  justify-content: flex-end;	
  }

  .sample-card img {
	height: 90vh;
  }
  
  .container-title {
	position: absolute;
	width: calc(100% - 15px);
	bottom: 15px;
	left: 15px;
	z-index: 2;
	color: var(--white);
  }
  
  .card-text {
	  font-family: var(--playfair);
	  font-size: var(--16);
	  font-weight: 400;
  }
}

/* SEZIONE INTERNI */

#interni {
	border-bottom: 1px solid var(--gold);
	border-top: 1px solid var(--gold);
}

.stile-section {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  transition: all 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  opacity: 0;
  z-index: 0;
}

.stile-section.active {
  opacity: 1;
  z-index: 1;
}

.slick-slide img {
	width: 100%;
}

.slick-slide {
  margin-right: 20px; /* Aggiungi uno spazio tra le slide */
}

@media (max-width: 575.99px) {
	.slick-slide {
	  margin-right: 0px; /* Aggiungi uno spazio tra le slide */
	}
}


.slick-slide:last-child {
  margin-right: 0; /* Rimuovi il margine dall'ultimo elemento */
}

/* modifica slick slider interni */

.slick-prev, .slick-next {
	width: 100px; /* Imposta la larghezza desiderata */
	height: 100px; /* Imposta l'altezza desiderata */
	background-size: contain;
	background-repeat: no-repeat;
	z-index: 1;
}

.slick-prev {
	left: -70px !important; /* Sposta il bottone a sinistra */
}

.slick-next {
	right: -40px !important; /* Sposta il bottone a destra */
}

.slick-next:before {
	content: '\203A' !important;
}

.slick-prev:before {
	content: '\2039' !important;
}


.slick-prev:before, .slick-next:before {
	font-family: var(--roboto);
	font-size: 100px !important;
	line-height: 1;
	opacity: 1 !important;
	color: var(--light) !important;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	position: absolute !important;
	top: 50% !important;
	-webkit-transform: translate(0, -50%) !important;
	-ms-transform: translate(0, -50%) !important;
	transform: translate(0, -50%) !important;
}

/* Stili per le frecce del slick slider */
.slick-prev, .slick-next {
	width: 100px; /* Imposta la larghezza desiderata */
	height: 100px; /* Imposta l'altezza desiderata */
	background-size: contain;
	background-repeat: no-repeat;
	z-index: 1;
}

/* Posizione delle frecce */
.slick-prev {
	left: -70px !important; /* Sposta il bottone a sinistra */
}

.slick-next {
	right: -40px !important; /* Sposta il bottone a destra */
}

@media (max-width: 767.99px) {
	.slick-prev, .slick-next {
		display: none !important; /* Nasconde le frecce */
	}
}

/* CONTATTI */

.wpcf7-form {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

.wpcf7-form p {
	width: 50% !important;
	padding-bottom: 20px;
	padding-right: 10px;
}

.wpcf7-form p:nth-of-type(5) {
	width: 100% !important; /* Larghezza 100% per il quarto paragrafo */
}

.wpcf7-form p:nth-of-type(6) {
	width: fit-content !important; /* Larghezza 100% per il quarto paragrafo */
	padding-right: 0; /* Rimuovere padding destro se necessario */
}

.contact-field {
	width: 100%;
	border: none;
	background-color: var(--light);
	color: var(--black);
	font-family: var(--roboto);
	font-weight: 300;
	padding: 8px 10px;
}

/* FINO A 130 METRI QUADRI e le pagine simili */

.ente-container {
	gap: 30px;
}

.ente-wrapper {
	background-color: var(--crema);
	padding: 50px;
	aspect-ratio: 1 / 1;
	align-content: center;
	flex-basis: calc(25% - 30px);
	box-sizing: border-box;
	transition: var(--transition);
}

.ente-wrapper:hover {
	transform: translateY(-10px);
}

.ente-wrapper p {
	line-height: 0.9;
}

.sell {
	opacity: 0.35;
	filter: grayscale(40%);
}

.sell:hover {
	transform: translateY(0px);
}

.fancybox-content {
	background-color: var(--crema) !important;
	width: 100%;
	padding: 100px 0px;
}

@media (max-width: 767.99px) {
	.ente-container {
		gap: 15px;
	}
	
	.ente-wrapper {
		background-color: var(--crema);
		padding: 25px;
		aspect-ratio: 1 / 1;
		align-content: center;
		flex-basis: calc(25% - 15px);
		box-sizing: border-box;
		transition: var(--transition);
	}
	
	.ente-wrapper:hover {
		transform: translateY(-10px);
	}
	
	.ente-wrapper p {
		line-height: 0.9;
	}
	
	.fancybox-content {
		background-color: var(--crema) !important;
		width: 100%;
		padding: 100px 0px;
	}
}

@media (max-width: 575.99px) {
	
	.fancybox-content {
		-webkit-overflow-scrolling: touch;
		padding: 20px !important;
	}
	
	.ente-wrapper {
		background-color: var(--crema);
		padding: 15px;
		aspect-ratio: 1 / 1;
		align-content: center;
		flex-basis: calc(50% - 15px);
		box-sizing: border-box;
		transition: var(--transition);
	}
}


.icona-ente {
	width: auto;
	height: var(--200);
}

.text-appartamenti i {
	font-family: var(--playfair) !important;
	font-size: var(--60) !important;
	margin: 0;
}