/* =============================================================== */
/* 							RESET & BASE						   */
/* =============================================================== */
* {
              box-sizing: border-box;
              margin: 0;
              padding: 0;
}

:root {
              /* TAVOLOZZA COLORI AGGIORNATA */
              --color-primary: #1e1d1c;                          
              --color-accent: #ff9000;                                        
              --color-white: #ffffff;                                                          

              /* TIPOGRAFIA PROFESSIONALE */
              --font-heading: 'Spectrum', serif;
              --font-body: 'Work Sans', sans-serif;
              
              /* VARIABILI ANIMAZIONE LIGHTBOX (per zoomInFade) */
              --modal-initial-scale: 0.9;          
}

html, body {
	height: auto;
	font-family: var(--font-body);
	line-height: 1.6;
	color: var(--color-white);
	scroll-behavior: smooth;
	max-width: 100%;
	overflow-x: hidden; /* Impedisce fisicamente lo scroll laterale */
	position: relative;
	height: auto; /* Sovrascrive il 140% di style.css */
}

/* =============================================================== */
/* 							UTILITIES							   */
/* =============================================================== */

section {
	padding: 10%;
	text-align: center;
	position: relative;
	overflow: hidden;
}

section h2 {
	font-family: var(--font-heading);
	font-size: 45px;
	font-weight: 800;              
	position: relative;       
	z-index: 2;
	transition: opacity 0.8s ease-out, transform 0.8s ease-out;                     
}

/* Stile della Linea (Pseudo-elemento ::after) */
section h2::after {
	content: '';       
	display: block;
	width: 100px;       
	height: 2px;       
	background: var(--color-accent);       
	margin: 40px auto 50px; 
	box-shadow: 0 0 10px var(--color-accent);
}

.section-content-wrapper {

	margin: 0 auto;
	padding: 0;
	position: relative;
	z-index: 2;
}

/* =============================================================== */
/* 					CLASSI ANIMAZIONE SEQUENZIALE 				   */
/* =============================================================== */

.animate-slide-up {
    display: block; 
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1.0s ease-out, transform 1.0s ease-out;  
}

.animate-slide-left {
    display: inline-block;
    opacity: 0;
    transform: translateX(-50px); 
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-fade-in {
    display: inline-block;
    opacity: 0;

    transform: none; 
    transition: opacity 0.8s ease-in; 
}

.is-visible {
    opacity: 1;
    transform: none; 
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

#hero .animate-slide-up { 
    position: relative; 
    z-index: 2; 
}
#hero button.animate-slide-up {
    display: inline-block; 
    opacity: 0;
    transform: translateY(30px); 
    transition: all 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94); 
}

#hero button.animate-slide-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.service-box.animate-slide-up {
	opacity: 0 ;
	transform: translateY(30px) ;
	transition: opacity 0.4s ease-out, transform 0.4s ease-out;  
}

.service-box.is-visible {
	opacity: 1;
	transform: translateY(0);
}

#prodotti .prodotti-grid .prodotto-item.animate-slide-up {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.4s ease-out, transform 0.4s ease-out;  
}

#prodotti .prodotti-grid .prodotto-item.animate-slide-up.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.is-loaded {
	opacity: 1;
	transform: translate(0, 0);  
}

/* =============================================================== */
/* 								MENU 				   			   */
/* =============================================================== */

.menu-sticky {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1001;
	padding: 15px 20px;
	background: transparent;
	transition: all 0.3s ease;
}

.menu-sticky.scrolled {
	background: rgba(30, 29, 28, 0.5);       
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
	padding: 10px 25px;
	transition: background 0.3s ease, padding 0.3s ease, box-shadow 0.3s ease;
}

.menu-wrapper {
	display: flex;
	justify-content: space-between;
	align-items: center;
	max-width: 1280px;
	margin: 0 auto;
}

.menu-logo a {
    text-decoration: none;
    display: block;
    line-height: 0; /* Rimuove spazi vuoti sotto l'immagine */
}

.menu-logo img {
	width: 150px;       
	height: auto;
	margin-top: 5px;
	cursor: pointer;
}

.menu-links ul {
	list-style: none;
	display: flex;
}

.menu-links a {
	margin: 0 12px;
	color: var(--color-white);
	text-decoration: none;
	font-weight: 500;
	font-size: 17px;
	position: relative;
	padding-bottom: 5px;
}

.menu-links a::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0%;
	height: 2px;
	background-color: var(--color-accent);       
	transition: width 0.3s ease;
}

.menu-links a:hover {
	color: var(--color-white);
}

.menu-links a:hover::after {
	width: 100%;
}

/* ====== SELETTORE LINGUA ====== */
.language-selector {
	position: relative;
	margin-left: 20px;       
	z-index: 1010;
}

.current-lang {
	color: var(--color-white);
	text-decoration: none;
	font-weight: 300;
	font-family: var(--font-body);
	font-size: 15px;
	letter-spacing: 1.5px;
	padding: 5px 0;       
	border: none;       
	border-radius: 0;       
	display: inline-block;
	transition: color 0.3s ease;       
	background: transparent;       
}

.current-lang:hover,
.language-selector.active .current-lang {
	background: transparent;
	border-color: transparent;
	color: var(--color-accent);       
}

.current-lang i {
	margin-left: 5px;
	transition: transform 0.3s ease;
}

.language-selector.active .current-lang i {
	transform: rotate(180deg);
}

.lang-dropdown {
	position: absolute;
	top: 100%;
	right: 0;
	list-style: none;
	padding: 0;
	margin-top: 5px;
	background: var(--color-primary);       
	border-radius: 0;       
	overflow: hidden;
	min-width: 60px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);

	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity 0.3s ease, transform 0.3s ease,visibility 0.3s;
}

.language-selector.active .lang-dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.lang-dropdown li a {
	display: block;
	padding: 8px 12px;
	color: var(--color-white);
	text-decoration: none;
	font-size: 15px;
	transition: background-color 0.2s ease;
	text-align: center;
}

.lang-dropdown li a:hover {
	background-color: var(--color-accent);       
}

/* =============================================================== */
/* 								HERO 				   			   */
/* =============================================================== */

.hero {
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;       
}

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

.hero-img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
	transform: scale(1.2);       
}
.hero-img.is-fixed {
	transform: scale(1.0); 
	position: fixed; 
	top: 0;
	left: 0;
	width: 100%; 
	height: 100%; 
	object-fit: cover;
	z-index: -10; 
	transition: none; 
}

.hero-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.2);
	z-index: 1;
}

.hero-text {
	/* CORREZIONE: Non usiamo più absolute se il genitore usa flex, ma lasciamolo così come era */
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	width: 100%;
	text-align: center;
	color: var(--color-white);
	padding: 20px;
	display: flex; /* Abilita Flexbox */
	flex-direction: column; /* Impila gli elementi verticalmente (colonna) */
	align-items: center; /* Centra orizzontalmente gli elementi (es. il bottone) */
}
#hero .hero-text h2 {
	font-size:66px;
}
#hero .hero-text h2::after {
margin:20px auto;
}
#hero .hero-text p {
	font-size:20px;
	margin-bottom:40px;
}

/* ====== pulsante hero ====== */
.hero-text button {
	padding: 15px 35px;
	border: 3px;
	border-radius: 3px;   
	background: var(--color-accent); /* Sfondo ARANCIONE iniziale */
	color: var(--color-white); /* Testo BIANCO iniziale */ 
	cursor: pointer;
	transition: color 2.2s ease, box-shadow 2.2s ease;   
	font-size: 16px;
	font-weight: 700;
	font-family: var(--font-body);
	position: relative;   
	overflow: hidden;   
	z-index: 1;   
}

.hero-text button::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background: var(--color-primary);   
       z-index: -1;   
       transform: translateX(100%); /* Inizia nascosto in basso */
	transition: transform 0.4s cubic-bezier(0.7, 0, 0.2, 1);   
}

.hero-text button:hover {
       color: var(--color-accent);   
       transform: none;   
       box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);   
}

.hero-text button:hover::before {
       transform: translateX(0);   
}

/* =============================================================== */
/* 							CHI SIAMO 				   			   */
/* =============================================================== */

.about {
	padding: 0;       
	text-align: center;       		  
	width: 100%;	
}

.about-split-container {
	display: flex;
	flex-direction: row; 
	justify-content: center;
	align-items: center;
	gap: 0px;
	width:100%;			  
	max-width:100%;
	padding: 0; 
	margin:0;
	background-color: var(--color-accent);
}

.about-text-col {
	width: 50%;
	flex-shrink: 0;       
	background-color: #cecece;
	padding: 100px;
}

.about-image-col {
	width: 50%;
    flex-shrink: 0;
	height:100%;
	padding: 0 100px;
}

.about-text-col h2::after {
	margin: 50px 0;
	background-color: var(--color-white);
	box-shadow: 0 0 10px var(--color-white);
}

.about-text-col .dark-bg-col {     
	color: var(--color-white);
}

.about-text-content {    
	margin: 0 auto;
}

.about-text-col h2 {
	color: var(--color-white);       
	text-align: left;
	width:100%;
}
.about-text-col h2 span {
	display: block;
	font-size: 35px;
	font-weight: 700;
	background: var(--color-primary);
	color: transparent; 
	-webkit-background-clip: text; 
	background-clip: text;
	opacity: 1 ;
	transform: none ;
	transition: none ;
	font-family: var(--font-heading);
	line-height: 1.1;
}


.about-text-col .about-text-content p {
	font-size: 18px;
	text-align: left;
	opacity: 0.9;
	margin: 0 auto 40px;
	color: var(--color-primary);
	max-width: 1200px;
}

#about .section-content-wrapper p.animate-slide-up {
    opacity: 0; 
    transform: translateY(30px);
}
#about .section-content-wrapper p.animate-slide-up.is-visible {
    opacity: 1; 
	transform: translateY(0px);
}

/* Stili per la Colonna Destra */
.about-image-content img {
	width: 100%;
    max-width: none; /* <--- Rimuovi il limite per coprire tutta la colonna */
    height: 100%;
    object-fit: cover; /* Mantiene le proporzioni tagliando l'eccesso */
    display: block;
}
/* ================================================= */
/* STILE CONTATORE ANIMATO (ABOUT) */
/* ================================================= */
.contatore {
	font-family: var(--font-heading);
	font-size: 88px;
	font-weight: 700;
	color: var(--color-accent);  
	opacity: 1;  
	transform: none;  
	transition: none; /* Rimuove transizioni in conflitto */
}

.contatore-container {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	padding:  0;
	margin: 50px auto 0;
	max-width: 800px;
}

.contatore-box {
	text-align: center;
	flex-grow: 1;
	padding: 20px;
	position: relative;
	overflow: visible;
}

#about .contatore-box p.contatore-label {
	text-align: center;
}

.contatore-box:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 30%; 
    right: 0;
    height: 40%;
    width: 2px;
    background-color: var(--color-white); 
    box-shadow: 0 0 10px var(--color-white); 
}
.contatore-box .contatore {
margin-bottom: 10px;
}
.contatore-box .contatore,
.contatore-box .suffisso {
	display: inline-block;
	font-size: 46px;
	font-weight: 700;
	background: linear-gradient(
				to top,
				#fff 0%, 
				#fff 100%  
				);
	color: transparent; 
	-webkit-background-clip: text; 
	background-clip: text;
	opacity: 1 ;
	transform: none ;
	transition: none ;
	font-family: var(--font-heading);
	line-height: 1.1;
}

.contatore-box p.contatore-label {
	margin-top: 5px;
	margin-bottom: 0;
	font-size: 20px;
	font-weight: 400;
	color: var(--color-primary);
	font-family: var(--font-body);
	font-weight: 400;
	text-align: center; 
	line-height: 1.4;
}

/* =============================================================== */
/* 							SERVIZI 				   			   */
/* =============================================================== */

.services {
	/* 1. Imposta l'immagine di sfondo */
	background: url('../images/contract2.jpg') no-repeat center center fixed;
	background-size: cover;
	color: var(--color-white);       
	padding: 100px 20px;
	position: relative;
	overflow: hidden;
	width: 100%;
}

/* 2. Aggiungi un overlay scuro per leggibilità (essenziale!) */
.services::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/* Overlay semi-trasparente usando il colore primario scuro */
	background: rgba(30, 29, 28, 0.6);       
	z-index: 1;
}

/* 3. Assicura che il contenuto sia sopra l'overlay */
.services .section-content-wrapper,
.services h2 {
	position: relative;
	z-index: 2;
}

.services .section-content-wrapper {
	max-width: 100%;
}

.service-grid {
	display: flex;
	flex-direction: row;
	align-items: stretch; 
	justify-content: center; 			  
	gap: 40px;
	max-width: 1280px;
	margin: 0 auto;
}

.service-box {
	color: var(--color-white);
	padding: 40px;
	flex-grow: 1; 
	flex-basis: 0; 
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;        
	justify-content: flex-start;               
	border-radius: 0;        
	opacity: 0;
	transition: transform 0.3s ease-in-out, 
				border-color 0.3s ease-in-out, 
				box-shadow 0.3s ease-in-out, 
				background 0.3s ease-in-out;
}

.service-box i {    
    font-size: 40px;     
    margin-bottom: 20px; 
	background: linear-gradient(
        to top,
        #ff7800 0%,
        #ffd800 100%
    );
    color: transparent; 
    -webkit-background-clip: text; 
    background-clip: text;
}
.service-icon {
    font-size: 3rem;
    color: var(--color-accent);
    margin-bottom: 20px;
    height: 60px; /* Altezza fissa per l'area icona */
    display: flex;
    align-items: center;
    justify-content: center;
}
.service-box h3 {    
    font-size: 2.0em; 
	color: #ff9000; 
	margin: 0 0 20px 0;
	font-family: var(--font-heading);
	font-weight: 300;
}

.service-box p {    
    font-size: 1.1em;     
}

/* =============================================================== */
/* 							PRODOTTI 				   			   */
/* =============================================================== */

.prodotti {
              background: var(--color-primary);
              color: var(--color-white);
}

.prodotti-grid {
              display: grid;
              grid-template-columns: repeat(4, 1fr);
              gap: 25px;
              justify-items: center;
}

.prodotto-item {
      position: relative;  
      background: transparent;
      border-radius: 0;
      overflow: hidden;
 
      display: block;  
      text-decoration: none;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
      transition: box-shadow 0.3s ease;
}

.prodotto-item:hover {
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
}

.prodotto-item img {
      width: 100%;
      height: 250px;  
      object-fit: cover;
      display: block;
      transition: opacity 0.7s ease-out, transform 0.7s ease-out;  
}

.prodotto-item:hover img {
      transform: scale(1.03); /* Scala leggermente per l'effetto focus */
}


/* 1. CREAZIONE OVERLAY: Stato di Riposo (DEFAULT) è 100% visibile */
.prodotto-item::before {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 100%; /* Altezza iniziale 100% (COPERTO) */
      z-index: 10;  
       
      background: rgba(30, 29, 28, 0.85);  
       
      /* Movimento fluido e veloce con ease-out finale */
      transition: height 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 2. OVERLAY ANIMATO IN HOVER: Scompare verso il basso */
.prodotto-item:hover::before {
      height: 0; /* Si riduce verso il basso (SCOPERTO) */
}


.prodotto-item h3 {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 90%;
      z-index: 20;  
      background: transparent;  
      color: var(--color-white);  
      padding: 0;     
      font-family: var(--font-body);
      font-size: 20px;  
      font-weight: 600;
      text-align: center;
      line-height: 1.3;
      margin: 0;
      transform: translate(-50%, -50%);  
      opacity: 1; 
      transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.prodotto-item h3::after {
      content: '';
      display: block;
      width: 40px; 
      height: 1px;  
      background: var(--color-accent);  
      margin: 5px auto 0;  
      transition: width 0.3s ease-out;  
}

.prodotto-item:hover h3 {
      opacity: 0; /* Scompare (fade-out) */
      transition-delay: 0s;  
}

.prodotto-item:hover h3::after {
      width: 0; /* Scompare */
      transition-delay: 0s; /* Scompare senza ritardo */
}

/* =============================================================== */
/* 							DOWNLOAD 				   			   */
/* =============================================================== */

.download {
	background: url('../images/download.jpg') no-repeat center center fixed;
	background-size: cover;
	text-align: center;
	color: var(--color-white);       
	padding: 100px 20px;
	position: relative;
	overflow: hidden;
}


.download::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/* Overlay semi-trasparente */
	background: rgba(30, 29, 28, 0.2);       
	z-index: 1;
}

.download .section-content-wrapper,
.download h2 {
	position: relative;
	z-index: 2;
}

.download h2::after {
	background: var(--color-accent); 
	margin: 40px auto 50px auto;
}

.download-intro {
	max-width: 100%;
	margin: 0 auto 40px auto;
	font-size: 18px;
	opacity: 0.85;
	color: var(--color-white);
	font-weight: 600;
}

.download-cards {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 50px;
}

/* 4. STILE CARD TIPO SERVIZI */
.download-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	color: var(--color-white);
	background-color: var(--color-accent);
	border-radius: 0;
	overflow: hidden;
	box-shadow: none;
	text-decoration: none;
	max-width: 350px;
	transition: box-shadow 0.3s ease;
}

.download-card:hover {
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.download-image-wrapper {
	overflow: hidden;  
	border-radius: 0;
	width: 100%;
	position: relative;
	padding-bottom: 75%; /* 75% = rapporto 4:3 */
	height: 0;  
}

.download-image {
	position: absolute;  
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;  
	object-fit: cover;  
	display: block;
	transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);  
}

.download-card:hover .download-image {
	transform: scale(1.05);  
}

.download-card:hover .download-info {

      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      background: rgba(0, 0, 0, 0.1);  
}

.download-info {
	padding: 25px;
	text-align: center;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	transition: background 0.4s ease, backdrop-filter 0.4s ease;
}

.download-info h3 {
	font-family: var(--font-heading);
	font-size: 22px;
	color: var(--color-white);       
	margin-bottom: 10px;
}

.download-info p {
	font-size: 15px;
	opacity: 0.8;
	margin-bottom: 20px;
	color: var(--color-primary);       
}

.download-action {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 700;
	color: var(--color-white);    
}

/* ======================================================= */
/* 						 PARTNERS 						   */
/* ======================================================= */

.partners {
	background: linear-gradient(to bottom, #141414 0%, #1e1d1c 100%);
}

.partners-container {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	padding: 0;
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
}

#partners h2 {
    opacity: 0;
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* Quando il JS aggiunge la classe, lo rende visibile */
#partners h2.is-visible {
    opacity: 1;
}

.partner-logo {
	max-width: 100%;
	height: auto;       
	justify-self: center; 
	align-self: center;   
	filter: grayscale(100%);       
	opacity: 0;       
	transform: translateY(20px);        
	transition: opacity 1.0s ease-out, transform 1.0s ease-out, filter 1.0s ease-out;       
}

.partner-logo.is-visible {
	opacity: 1; 
	transform: translateY(0); 
	filter: grayscale(0%);
}

/* ======================================================= */
/* 						 CONTACT 						   */
/* ======================================================= */

.contact {
	background: url('../images/Senza-titolo-44.jpg') no-repeat center center fixed;
	background-size: cover;
	color: var(--color-white);
	padding: 100px;
	position: relative;
	overflow: hidden;
	width: 100%;
}

.contact::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.2);
	z-index: 1;
}

.contact .section-content-wrapper {
    text-align: left; 
}

.contact h2,
.contact p,
.contact-content {
	position: relative;
	z-index: 2;
}

.contact h2::after {
    margin: 40px 0 50px 0; 
}

.contact-intro {
	font-size: 18px;
	font-weight: 600;
	margin: 0 0 40px;
	color: var(--color-white);
	opacity: 0;
}
.contact-intro.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.contact-content {
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap:40px;
	width: 100%;
    max-width: 1280px;
    margin: 0 auto;			  
}

.contact-map-wrapper,
.contact-form-wrapper {
	flex: 1 1;
	width: 100%;
}

.contact-map-wrapper {
    overflow: hidden; 
	margin:0 auto;			  
}

.contact-map-wrapper iframe {
	width: 100%;
	border: 0;
	margin:0 auto;
	filter: invert(90%) grayscale(80%);  
	transition: filter 0.5s ease;
	display: block;
}

.contact-form-wrapper {
	margin: 0 0 20px 0;
	width: 100%;
}

.contact-form-wrapper form {
	display: grid; 
	grid-template-columns: repeat(3, 1fr);
	gap:20px;
	margin: 0;
	background: transparent;
	padding: 0;
	border-radius: 0;       
	box-shadow: none; 
	width: 100%;
}

.contact input,
.contact textarea {
	padding: 14px;
	background: rgba(30, 29, 28, 0.8);
	color: var(--color-white);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 0;       
	font-family: var(--font-body);
	font-size: 16px;
	width: 100%;
	box-sizing: border-box;
	outline: none;
    transition: border-color 0.3s;
}

.contact textarea {
	height: 350px;
	resize: vertical;
	grid-column: 1 / -1;  
}

.contact input:focus,
.contact textarea:focus {
	outline: none;
	border-color: var(--color-accent);       
	box-shadow: 0 0 10px rgba(255, 144, 0, 0.5);     
}

/* ======================================================= */
/* ====== NUOVE REGOLE PER FLEXBOX (NOTA E PULSANTE) ====== */
/* ======================================================= */

.form-action-row {
	grid-column: 1 / -1; /* Estende il contenitore su tutte le colonne del form grid */
	display: flex;
	justify-content: space-between; /* Allinea la nota a sinistra e il pulsante a destra */
	align-items: center;
}

.required-fields-note {
	text-align: left;
	color: var(--color-white);  
	font-size: 14px;  
	opacity: 0.8;
	margin: 0;  
	flex-grow: 1; /* Permette alla nota di occupare tutto lo spazio rimanente */
	padding-right: 20px; /* Spazio tra la nota e il pulsante */
}

.contact button {
	padding: 15px;
	border: none;
	background: var(--color-accent); 
	color: var(--color-white);
	width: 200px; 
	border-radius: 0;       
	cursor: pointer;
	font-weight: 700;
	font-family: var(--font-body);
	font-size: 16px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
	transition: color 0.4s ease-out, box-shadow 0.4s ease-out;  
	position: relative;
	overflow: hidden;
	z-index: 1;  
}


.contact button::before {
	content: '';
	position: absolute;
	bottom: 0;  
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--color-primary);  
	transform: translateX(100%); /* Inizia nascosto in basso */
	transition: transform 0.4s cubic-bezier(0.7, 0, 0.2, 1);  
	z-index: -1;
}

.contact button:hover {
	color: var(--color-accent);  
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);  
	transform: none;  
}

.contact button:hover::before {
	transform: translateX(0); /* L'overlay grigio si sposta verso l'alto */
}

/* =============================================================== */
/* 								FOOTER 				   			   */
/* =============================================================== */

footer {
    background: var(--color-primary); /* Sfondo grigio scuro */
    color: var(--color-white); /* Testo bianco */
    padding: 50px; /* Più spazio interno */
    border-top: 0px solid var(--color-accent); /* Bordo superiore arancione */
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* Colonna per Contatti, Social e Info */ 
    margin: 0 auto;
	padding: 0;
	gap: 40px;
}

.footer-grid span{
    color:var(--color-accent);
	font-size: 1em;
	font-weight: 900;
}

/* Stili intestazioni footer */
.footer-grid h3 {
    position: relative; /* Base per posizionare l'after */
    color: var(--color-white); /* Intestazioni Arancioni */
    font-family: var(--font-heading);
    font-weight: 700;
    margin-bottom: 25px; /* Spazio sotto h3 + linea */
    font-size: 1.2em;
}

/* Aggiunge la linea 1px sotto tutti gli h3 della footer-grid */
.footer-grid h3::after {
    content: "";
    position: absolute;
    bottom: -10px; /* 10px sotto il testo */
    left: 0;
    width: 100px;
    height: 1px;
    background-color: var(--color-accent); /* Linea arancione */
}

/* Stili icone e link contatti */
.footer-contacts p {
    margin-bottom: 8px;
}

.footer-icon {
    color: var(--color-accent);
    margin-right: 10px;
}

/* Stili Link (Email) */
.footer-contacts a {
    color: var(--color-white);
    text-decoration: none;
    transition: color 0.3s;
	margin-left:10px;
}

.footer-contacts a:hover {
    color: var(--color-accent);
}

/* Stili Social Media */

.footer-social {
	text-align: left;
}

.social-icons {
    display: flex;
	flex-direction: row;
    justify-content: flex-start; /* Allinea a sinistra */
    align-items: center; /* Assicura l'allineamento verticale */
	gap: 20px;
}

.social-icons a {
    color: var(--color-white);
    margin-right: 15px;
    transition: color 0.3s, filter 0.3s;
    font-size: 3rem; 
	line-height: 1;
}

.social-icons a:hover {
    color: var(--color-accent);
}

.social-icons img {
    width: 2.6rem;   
    height: 2.6rem;
    filter: saturate(0) brightness(2000%) hue-rotate(0deg) contrast(100%) invert(0%);
	transition: filter 0.1s ease-in-out;
}

.social-icons a:hover img{
    filter: saturate(1) brightness(1) hue-rotate(0deg) contrast(100%) invert(0%);
}

.footer-info {
	text-align: left;
}

.wa-custom-btn {
    position: fixed;
    /* Aumenta questi valori per allontanarlo di più dall'angolo */
    bottom: 40px; 
    right: 40px;
    
    /* Stile del pulsante */
    background-color: #25d366;
    color: white;
    width: 65px;
    height: 65px;
    border-radius: 15px; /* Angoli leggermente arrotondati invece che cerchio perfetto */
    
    /* Centratura icona */
    display: flex;
    align-items: center;
    justify-content: center;
    
    font-size: 38px;
    text-decoration: none;
    z-index: 9999;
    
    /* Ombra più elegante e morbida */
    box-shadow: 0 10px 25px rgba(37, 211, 102, 0.3);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Effetto al passaggio del mouse */
.wa-custom-btn:hover {
    transform: translateY(-10px); /* Salta verso l'alto */
    background-color: #20ba5a;
    box-shadow: 0 15px 30px rgba(37, 211, 102, 0.5);
    color: white;
}