/*
Theme Name: Faarchitetto
Theme URI: https://faarchitetto.it
Author: Agenzia Perdonà
Author URI: https://agenziaperdona.com
Description: Tema custom per faarchitetto
Version: 0.1
Text Domain: faarchitetto
*/

:root{
	--fa-white: #FFF;
	--fa-black: #000;
	--fa-grey: #767676;

	--fa-size-h2: 66px;
	--fa-line-h2: 68px;

	--fa-size-h3: 39px;
	--fa-line-h3: 40px;

	--fa-size-p: 16px;
	--fa-line-p: 26px;

	--fa-size-p-plus: 26px;
	--fa-line-p-plus: 1;

	--fa-size-mini-p: 12px;
	--fa-line-mini-p: 22px;

	--fa-font-family: "Inter", serif;
}

hr{
	opacity: 1;
}


body,html{
	font-family: var(--fa-font-family);
	overflow-x: hidden;
}

a{
	text-decoration: none!important;
}


/*TYPOGRAPHY*/
.h2{
	font-size: var(--fa-size-h2);
	line-height: var(--fa-line-h2);
	text-transform: uppercase;
	font-weight: 400;
}
.h3{
	font-size: var(--fa-size-h3);
	line-height: var(--fa-line-h3);
	text-transform: uppercase;
}
.p{
	font-size: var(--fa-size-p);
	line-height: var(--fa-line-p);
	color: var(--fa-grey);
}
.p-plus{
	font-size: var(--fa-size-p-plus);
	line-height: var(--fa-line-p-plus);
}
.mini-p{
	font-size: var(--fa-size-mini-p);
	line-height: var(--fa-line-mini-p);
}
.mini-p strong{
	font-weight: 700;
}

p{
	margin: 0;
}


.button{
	margin-top: 20px;
	border: 1px solid #000;
	border-radius: 50px;
	padding: 7px 25px 7px 25px;
	text-transform: uppercase;
	color: var(--fa-black);
	text-decoration: none;
	display: inline-block;
}
.button:hover{
	background-color: var(--fa-black);
	color: var(--fa-white);
	cursor: pointer;
}
.button:hover .button-icon svg path{stroke: #FFF;}
.button-icon svg{margin-top: -3px;margin-left: 10px;}


.button-link{
	margin-top: 20px;
	border: 1px solid #000;
	border-radius: 50px;
	padding: 7px 25px 7px 25px;
	text-transform: uppercase;
	color: var(--fa-black);
	text-decoration: none;
	display: inline-block;
}
.button-link:hover{
	background-color: var(--fa-black);
	color: var(--fa-white);
	cursor: pointer;
}
.button-link:hover .button-icon svg path{stroke: #FFF;}

.button-link .button-icon svg{
	transform: rotate(270deg)!important;
}

.back-page{
	margin-top: 20px;
	border: 1px solid #000;
	border-radius: 50px;
	padding: 7px 30px 7px 17px;
	text-transform: uppercase;
	color: var(--fa-black);
	text-decoration: none;
	display: inline-block;
	background-color: var(--fa-white);
}

.back-page:hover{
	background-color: var(--fa-black);
	color: var(--fa-white);
	cursor: pointer;
}
.back-page:hover .button-icon svg path{stroke: #FFF;}

.back-page .button-icon svg{
	transform: rotate(90deg)!important;
}

/*BLOG BUTTON*/
.btn-blog{
	margin-top: 20px;
	border: 1px solid #000;
	border-radius: 50px;
	padding: 7px 25px 7px 25px;
	text-transform: uppercase;
	color: var(--fa-black);
	text-decoration: none;
	display: inline-block;
	background-color: var(--fa-white);
}
.btn-blog:hover{
	background-color: var(--fa-black);
	color: var(--fa-white);
	cursor: pointer;
}

.btn-blog:hover .button-icon svg path{stroke: #FFF;}

.btn-blog .button-icon svg{
	transform: rotate(225deg)!important;
}

/*TITLE PAGE*/
#title-fa {
	transition: opacity 0.5s ease-in-out;
}

.hero {
  height: 40vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-transform: uppercase;
  /* Se vuoi meno margine orizzontale sugli schermi grandi, riduci o azzera i padding laterali */
  padding: 0 1rem;
}

.hero-pg{height: 20vh;}

.hero h1 {
  /*
	clamp(MIN, SCALING, MAX)
	- MIN: la misura minima (in rem o px) su schermi piccoli
	- SCALING: la dimensione fluida (in vw, che cresce all’aumentare dello schermo)
	- MAX: la dimensione massima oltre la quale il testo non cresce
  */
  font-size: clamp(2rem, 10vw, 12rem);
  font-weight: 200;
  line-height: 1;
  text-align: center;
  margin: 0;
  max-width: 100%;
  word-wrap: break-word;
}



#hero-slider {
	height: 50vh;
	z-index: 10;
}

.subtitle-slide{
	font-size: var(--fa-line-h2);
	text-transform: uppercase;
	color: var(--fa-white);
	position: absolute;
	bottom: 0;
}

.carousel-inner {
	height: 100%;
}

.carousel-item {
	height: 50vh;
	background-size: cover;
	background-position: center;
}
.item-pg{
	height: 70vh;
}

/*MENU*/
#fullscreen-menu {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background: rgb(255 255 255 / 95%);
	display: flex;
	justify-content: center;
	align-items: center;
	transform: translateY(-100%);
	transition: transform 0.4s ease-in-out;
	z-index: 9999;
}

#fullscreen-menu.active {
	transform: translateY(0);
}

#fullscreen-menu ul {
	list-style: none;
	padding: 0;
	margin: 0;
	text-align: center;
}

#fullscreen-menu ul li {
	margin: 20px 0;
	text-align: start;
	text-transform: uppercase;
}

#fullscreen-menu ul li a {
	color: #000;
	font-size: var(--fa-size-h2);
	text-decoration: none;
	font-weight: 600;
}

// effetto linea menu
#fullscreen-menu .container li {
	position: relative;
	list-style: none;
	padding: 10px 0;
}

#fullscreen-menu .container li::before {
	content: "";
	position: absolute;
	bottom: 40px;
	left: -60px;
	width: 0;
	height: 1px;
	background-color: black;
	transition: width 0.3s ease-in-out;
}

#fullscreen-menu .container li:hover::before {
	width: 110%;
}

.menu-item{
	position: relative;
}

@media (min-width: 765px){
	#fullscreen-menu ul li{
		margin: 5px 0;
	}
	#fullscreen-menu ul li a {
		font-size: 40px;
	}
	#fullscreen-menu .container{
		padding-left: 100px;
	}

	#fullscreen-menu .container li::before{
		bottom: 30px;
	}
}


.menu-toggle {
	background: transparent;
	border: none;
	cursor: pointer;
	z-index: 999;
}

.close-menu {
	position: absolute;
	top: 35px;
	right: 15px;
	font-size: 2rem;
	cursor: pointer;
}

.slider-link{
	text-decoration: none;
	color: var(--fa-white)!important;
}

/* Effetto Opacity solo su Desktop */
@media (min-width: 1024px) {
	#fullscreen-menu ul li a {
		opacity: 0.5;
		transition: opacity 0.3s ease-in-out;
	}

	#fullscreen-menu ul li a:hover {
		opacity: 1;
	}
}


/**MOUSE HOMEPAGE SEZIONI**/
#hero-slider {
	cursor: none;
	position: relative;
}

/* Stile del cursore personalizzato */
#custom-cursor {
	position: fixed; /* Fisso rispetto alla finestra */
	width: 50px;
	height: 50px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	transition: transform 0.1s linear, opacity 0.2s ease;
	transform: translate(-50%, -50%);
	opacity: 0; /* Inizialmente nascosto */
}

#custom-cursor img {
	width: 70px;
	height: auto;
}

#custom-cursor span {
	font-size: 12px;
	color: white;
	margin-top: 5px;
}

.text-img-cursor{
	text-shadow: #000 1px 0 10px;
}
/*****/

/**CURSORE PER IMMAGINI**/
.scopri-a {
	cursor: none;
}

#img-cursor {
	position: fixed;
	width: 100px;
	height: 100px;
	pointer-events: none;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	text-align: center;
	opacity: 0;
	transition: opacity 0.2s ease, transform 0.1s ease;
	transform: translate(-50%, -50%);
	z-index: 9999;
	top: 0;
	left: 0;
}

#img-cursor img {
	width: 70px;
	height: auto;
}

#img-cursor span {
	font-size: 12px;
	color: white;
	padding: 5px 10px;
	border-radius: 5px;
	margin-top: 5px;
}

.scopri-a:hover ~ #img-cursor {
	opacity: 1;
}


/**SLIDER CURSOR**/
.carousel-indicators-container {
	position: absolute;
	top: 50%;
	right: 20px;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	gap: 10px;
	z-index: 10;
	pointer-events: auto;
}

.carousel-indicators-container:hover ~ #custom-cursor {
	display: none;
}

.carousel-indicators-container,
.carousel-indicators-container button {
	cursor: pointer !important;
}

.carousel-indicators-container:hover + #custom-cursor,
.carousel-indicators-container button:hover + #custom-cursor {
	display: none !important;
}

.carousel-indicators-container button {
	width: 17px;
	height: 17px;
	border-radius: 50%;
	border: none;
	background-color: rgba(255, 255, 255, 0.5); /* Pallini semi-trasparenti */
	transition: background-color 0.3s ease, transform 0.2s ease;
	cursor: pointer !important;

	border: 1px solid var(--fa-grey);
}

.carousel-indicators-container button.active {
	background-color: var(--fa-white); /* Pallino attivo */
	transform: scale(1.3); /* Ingrandisce il pallino attivo */
}

.carousel-indicators-container button:hover {
	background-color: var(--fa-white);
	opacity: 0.5;
}
/******/


/* Scroll page center*/
.wrap {
  position: relative;
}

.wrap::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 49.7%;
  transform: translateX(-50%);
  width: 10px;
  border: 1.5px solid;
  border-radius: 0 0 50px 50px;
  border-top: 0;
}

.scroll-thumb {
  position: absolute;
  left: 49.7%;
  transform: translateX(-50%);
  width: 5px;
  border-radius: 50px;
  background-color: #000000;
  z-index: 1;
}

@media (max-width: 767px){
	.wrap::before {left: 97.6%;}
	.scroll-thumb {left: 97.6%;}
}


/*Nascondere testo*/
.hidden {
	display: none;
}

/***** Marquee Wrapper ****/
.marquee-wrapper {
	overflow: hidden;
	white-space: nowrap;
	position: relative;
}

/* Marquee Animazione */
.marquee {
	display: flex;
	white-space: nowrap;
	will-change: transform;
	animation: marqueeScroll 25s linear infinite;
}

/* Stile del testo */
.marquee h1 {
	text-transform: uppercase;
	display: inline-block;
}

/* Animazione fluida e continua */
@keyframes marqueeScroll {
	from {
		transform: translateX(-110%);
	}
	to {
		transform: translateX(110%);
	}
}
/*******/

.black{
	color: var(--fa-black);
}
.pretitle{
	text-transform: uppercase;
	font-weight: 100;
	color: #b7b7b7;
	padding-bottom: 15px;
	display: block;
}

.box-fa{
	margin-top: 40px;
}
.h3{
	margin-bottom: 30px!important;
}
.mini-p{
	margin-top: 20px;
}
.p-plus{
	margin-top: 20px;
}
a >.p-plus{
	text-decoration: none!important;
	color: #000;
}

/*****/
.py-section{
	padding-top: 100px!important;
	padding-bottom: 100px!important;
}
.pt-100{
	padding-top: 100px!important;
}

.turn-up{
	position: relative;
	height: 300px;
}
.scroll-to-top {
	position: absolute;
	width: 100%;
	height: 300px;
	cursor: pointer;
	z-index: 9999;
  }
.circle-wrapper, .arrow-wrapper {
	position: absolute;
	top: 50%;
	left: 49%;
	transform: translate(15%, 17%);
  }
.rotating-circle {
	width: 100%;
	height: auto;
	animation: rotateCircle 15s linear infinite; /* modifica 5s per velocità */
  }
@keyframes rotateCircle {
	  0%   { transform: translate(-50%, -50%) rotate(0deg);   }
	  100% { transform: translate(-50%, -50%) rotate(-360deg); }
	}

/*BLOG*/
.blog-title{
	font-size: 163px;
	font-weight: 200;
}

/*CHI SONO*/
#chi-sono .accordion-button{
	background-color: transparent;
	color: inherit;
	box-shadow: none;
	padding: 50px 0;
}

#chi-sono .accordion-item{
	border: 1px solid;
	border-bottom: none;
	border-left: none;
	border-right: none;
	border-radius: 0px;
}

/**/
.bg-monutema-1{background-image: url('https://faarchitetto.it/wp-content/uploads/2025/02/bg-1.png');height: 250px;background-size: cover;}
.bg-monutema-2{background-image: url('https://faarchitetto.it/wp-content/uploads/2025/02/bg-2.png');height: 250px;background-size: cover;}
.bg-monutema-3{background-image: url('https://faarchitetto.it/wp-content/uploads/2025/02/bg-3.png');height: 250px;background-size: cover;}
.bg-monutema-4{background-image: url('https://faarchitetto.it/wp-content/uploads/2025/02/bg-4.png');height: 250px;background-size: cover;}

/***/
#project-hero .item-pg{
	height: 85vh;
}

.list-project{
	padding: 0;
	list-style: none;
}
/* .list-project li{
	margin-bottom: 0!important;
} */

.link-contact:hover{
	opacity: 0.5;
}


input:focus, textarea:focus, select:focus {
	box-shadow: none !important;
	border-color: inherit !important;
	outline: none !important;
}


footer a{
	color: var(--fa-black)!important;
}

input[type="checkbox"].privacy {
  accent-color: black;
}


/* NASCONDERE SCROLLBAR
::-webkit-scrollbar {
  display: none;
}

html {
  scrollbar-width: none;
}

body {
  -ms-overflow-style: none;
}
*/


/**MOBILE**/
@media (max-width: 767px){
	:root{
	--fa-size-h2: 66px;
	--fa-line-h2: 68px;

	--fa-size-h3: 20px;
	--fa-line-h3: 1.5;

	--fa-size-p: 18px;
	--fa-line-p: 1.5;

	--fa-size-p-plus: 26px;
	--fa-line-p-plus: 22px;

	--fa-size-mini-p: 12px;
	--fa-line-mini-p: 22px;
	}

	.h3{
		margin-bottom: 30px;
		font-weight: 400;
	}

	.p{
		font-weight: 100;
	}


	.button{
		margin-top: 40px;
	}

	.subtitle-slide{
		font-size: 30px;
		font-weight: 400;
		line-height: 1.2;
		margin-bottom: 10px;
	}

	.py-100{
		padding-top: 50px;
		padding-bottom: 50px;
	}


	/*HERO*/
	.hero{height: 15vh;}
	#hero-slider,.carousel-item{height: 70vh;}

	#fullscreen-menu ul li a{
		font-size: 26px;
	}
}



/*SWUP JS
.transition-fade {
	opacity: 1;
	transition: opacity 0.4s ease-in-out;
}

html.is-animating .transition-fade {
	opacity: 0;
}
*/