/**
 * Theme Name:     Hello Elementor Child
 * Author:         Elementor Team
 * Template:       hello-elementor
 * Text Domain:	   hello-elementor-child
 * Description:    Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
 */

html, body{ 
    max-width: 100vw;
    overflow-x: hidden; 
}

a:focus-visible{
    outline: none!important;
}

.elementor-pagination .page-numbers{
    border: 1px solid #000;
    padding: 0px 5px 2px 5px;
}


/* <---------- SVG LI BULLET --------> */

.list ul {
    list-style-image: url('/wp-content/uploads/2025/04/Vector-1.svg');
}

.list li {
  position: relative;
  padding-left: 0.5em; /* Maggiore spazio tra icona e testo */
}

.list li::before {
  position: absolute;
  left: 0;
  top: 50%;
  width: 1.2em;
  height: 1.2em;
  background-image: url('icona.svg');
  background-size: contain;
  background-repeat: no-repeat;
  transform: translateY(-50%);
  content: '';
}

.list li {
  margin-bottom: 20px!important; /* Distanza tra elementi della lista */
}
/* <---------- SVG LI BULLET --------> */


/* <---------- FONTS CLAMP ----------> */

.clampH1big h1, .clampH1big h2{
	font-size: clamp(1.875rem, 1.731vw + 1.045rem, 3.75rem);
	line-height: clamp(2.2rem, 2.095vw + 1.196rem, 4.469rem)!important;
}

.clampH2big h2{
	font-size: clamp(1.625rem, 1.385vw + 0.961rem, 3.125rem);
}

.clampH2 h2{
	font-size: clamp(2rem, 1.039vw + 1.502rem, 3.125rem);
	line-height: clamp(2.2rem, 1.212vw + 1.619rem, 3.438rem)!important;
}

.clamp_p p, .clamp_p h3{
	font-size: clamp(1rem, 0.184vw + 0.912rem, 1.188rem)!important;
	line-height: clamp(1.3rem, 0.239vw + 1.186rem, 1.544rem)!important;
}

.clampNav li a{
	font-size: clamp(0.875rem, 0.245vw + 0.758rem, 1.125rem)!important;
	line-height: clamp(0.875rem, 0.245vw + 0.758rem, 1.125rem)!important;
}

.blogTitle h2{
	font-size: clamp(1.375rem, 0.462vw + 1.154rem, 1.875rem)!important;
	line-height: clamp(1.65rem, 0.554vw + 1.384rem, 2.25rem)!important;
}

.blogP p{
	font-size: clamp(1rem, 0.173vw + 0.917rem, 1.188rem)!important;
	line-height: clamp(1.37rem, 0.16vw + 1.293rem, 1.544rem)!important;
}

.sottotitolo h3{
	font-size: clamp(1.375rem, 1.154vw + 0.822rem, 2.625rem)!important;
	line-height: clamp(1.884rem, 1.411vw + 1.207rem, 3.413rem)!important;
}

.p_big p{
	font-size: clamp(1.563rem, 0.866vw + 1.148rem, 2.5rem)!important;
	line-height: clamp(2.188rem, 1.212vw + 1.607rem, 3.5rem)!important;
}

.footer p, .footer li{
	font-size: clamp(0.938rem, 0.231vw + 0.827rem, 1.188rem)!important;
}


/* <---------- FONTS CLAMP ----------> */

.accent{
	font-style: italic;
	color: #A39244;
}

.header-sagomato{
    clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
	backdrop-filter: blur(32.5px);
}

input[type=date], input[type=email], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=url], select, textarea {
    padding: 18px 15px!important;
}

/* Stile iniziale del pulsante */
.elementor-button[type="submit"],
.button-animato .elementor-button{
  cursor: pointer;
  position: relative;
  overflow: hidden; /* Contiene pseudo-elementi */
  z-index: 1;
  transition: color 0.4s ease; /* Transizione del testo */
}

/* Pseudo-elementi iniziali */
.elementor-button[type="submit"]::before,
.elementor-button[type="submit"]::after,
.button-animato .elementor-button::before,
.button-animato .elementor-button::after {
  content: '';
  position: absolute;
  width: 40px; /* Dimensione ridotta */
  height: 40px;
  background-color: #A39244; /* Colore giallo */
  transition: all 0.4s ease; /* Transizione fluida */
  z-index: -1;
}

/* Angolo superiore sinistro */
.elementor-button[type="submit"]::before,
.button-animato .elementor-button::before {
  top: 0;
  left: 0;
  clip-path: polygon(0 0, 100% 0, 0 100%); /* Triangolo in alto a sinistra */
}

/* Angolo inferiore destro */
.elementor-button[type="submit"]::after,
.button-animato .elementor-button::after {
  bottom: 0;
  right: 0;
  clip-path: polygon(100% 0, 100% 100%, 0 100%); /* Triangolo in basso a destra */
}

/* Effetto hover */
.elementor-button[type="submit"]:hover,
.button-animato .elementor-button:hover {
  color: white; /* Testo bianco */
}

.elementor-button[type="submit"]:hover::before,
.elementor-button[type="submit"]:hover::after,
.button-animato .elementor-button:hover::before,
.button-animato .elementor-button:hover::after {
  width: 100%; /* Espansione per coprire tutto il pulsante */
  height: 100%;
  clip-path: none; /* Rimuove il triangolo */
  background-color: #A39244; /* Colore giallo */
}




/* Importa il font Raleway da Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300&display=swap');

/* Contenitore principale della checkbox */
.elementor-field-group-privacy {
  display: flex;
  align-items: center;
  font-family: 'Raleway', sans-serif; /* Font Raleway */
  font-size: 13px; /* Dimensione testo */
  font-style: normal; /* Testo normale */
  font-weight: 300; /* Peso font leggero */
  color: #bfbfbf; /* Colore testo */
}

/* Checkbox personalizzata */
.elementor-acceptance-field {
  appearance: none; /* Rimuove lo stile predefinito */
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 18px;
  height: 18px;
  border: 1px solid #f2f2f2!important; /* Bordo giallo */
  border-radius: 3px; /* Angoli leggermente arrotondati */
  margin-right: 10px; /* Spazio tra checkbox e testo */
  display: inline-block;
  position: relative;
  background-color: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* Stile per il "check" selezionato */
.elementor-acceptance-field:checked {
  background-color: #bdb34d; /* Sfondo giallo */
  border-color: #bdb34d;
}

.elementor-acceptance-field:checked::after {
  content: '\2713'; /* Simbolo check */
  font-size: 14px;
  color: #fff; /* Colore del check */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Testo accanto alla checkbox */
.elementor-field-group-privacy label {
  margin: 0;
  font-size: 13px!important; /* Dimensione testo */
  cursor: pointer;
  line-height: 1.2;
  transition: color 0.3s ease;
}

/* Effetto hover */
.elementor-field-group-privacy:hover .elementor-acceptance-field {
  border-color: #9c9240; /* Bordo più scuro */
}

.elementor-field-group-privacy:hover label {
  color: #fff; /* Testo bianco all'hover */
}

.elementor-field-type-acceptance .elementor-field-option{
	display:flex!important;
}





.v-corner-a, .v-corner-b{
	display:none!important;
}





/* <---------- SAGOME HOME PAGE ----------> */

	.divider-block {
		width: 100%!important;
		height: auto; /* Garantisce che il contenitore non limiti l'altezza */
		min-height: 150vh!important;
	}

    .divider {
		width: 100vw!important;
		height: 100%!important;
		background: white;
		clip-path: polygon(70% 0, 100% 20%, 100% 100%, 0% 100%, 0% 45%);
    }

    .overlay1{
		width: 100%!important;
		height: 100%!important;
		background: #A39244;
		clip-path: polygon(70% 0, 0 35%, 0% 100%);
    }

    .overlay2 {
		width: 100%!important;
		height: 100%!important;
		background: #444;
		clip-path: polygon(70% 5%, 0% 25%, 0% 100%);
    }

	.div-sagomato{
		clip-path: polygon(25% 0, 100% 0, 100% 100%, 0 100%, 0 25%);
		background-color:#fff;
	}

	.layer-light{
		background: rgba(242, 242, 242, 0.6);
	}

	.layer-dark{
		background: rgba(112, 112, 112, 0.67);
	}

	.trangle-section{
		clip-path: polygon(0 25%, 40% 0, 100% 35%, 100% 100%, 0 100%);
		min-height: 150vh!important;
	}

	.trangle-section-100{
		clip-path: polygon(0 40%, 40% 0, 100% 55%, 100% 100%, 0 100%);
		min-height: 100vh!important;
	}

	.v-section{
		clip-path: polygon(0 0, 60% 53%, 100% 17.5%, 100% 100%, 0 100%);
		min-height: 100vh!important;
	}

	.v-background{
		content: "";
		background-color: #707070;
		clip-path: polygon(0 0, 60% 35.5%, 100% 11.75%, 100% 71.7%, 60% 95.5%, 0 60%);
		min-height: 150vh !important;
	  	z-index: 0; 
	}


	.divBigSx{
		clip-path: polygon(0 20%, 40% 0, 100% 30%, 100% 80%, 60% 100%,0 70%);
		min-height: 180vh!important;
	}

	.card{
		clip-path: polygon(15% 0, 100% 0, 100% 85%, 85% 100%, 0 100%, 0 15%);  
		position: relative;
		z-index: 1;
	}

	.hero-sagomato{
		clip-path: polygon(0 0, 100% 0, 100% 100%,70% 65%, 40% 100%, 0 60%);
		background-position: center!important;
		background-size: cover!important;
	}

	.imgSagomataDx{
		clip-path: polygon(15% 25%, 50% 10%, 100% 30%, 100% 85%, 15% 55%);
		min-height: 150vh!important;
	}
	

	.heroTriangolo{
		background-position: center!important;
		background-size: cover!important;
	}

	@media only screen and (min-width: 1025px) and (max-width: 1540px) {
		.divider {
			clip-path: polygon(70% 0, 100% 15%, 100% 100%, 0% 100%, 0% 45%);
		}
		
		.trangle-section-100{
			clip-path: polygon(0 40%, 40% 0%, 100% 55%, 100% 100%, 0 100%);
			min-height: 70vh!important;
		}
		
		.imgSagomataDx{
			clip-path: polygon(15% 15%, 50% 0%, 100% 20%, 100% 98%, 15% 65%);
			min-height: 100vh!important;
		}

		.divider-block {
			min-height: 120vh!important;
		}
		
		.trangle-section {
			clip-path: polygon(0 19%, 40% 0, 100% 32%, 100% 100%, 0 100%);
			min-height: 125vh !important;
		}
		
		.divBigSx{
			min-height: 140vh!important;
		}
		
		.v-background {
			clip-path: polygon(0 24%, 60% 44.5%, 100% 30.75%, 100% 75.7%, 60% 93.5%, 0 67%);
			min-height: 200vh !important;
		}
		
		
	}

	@media only screen and (max-width: 1024px) {
		.div-sagomato{
			clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 0);
		}
		
		.divider-block {
			min-height: 100vh!important;
		}
		
		.divider {
			clip-path: polygon(70% 0, 100% 15%, 100% 100%, 0% 100%, 0% 25%);
		}
		
		.overlay1{
			clip-path: polygon(70% 0, 0 17%, 0% 100%);
		}
		
		.overlay2 {
			clip-path: polygon(70% 3%, 0% 10%, 0% 100%);
		}
		
		.divBigSx{
			clip-path: polygon(0 15%, 40% 0, 100% 30%, 100% 80%, 60% 100%,0 70%);
			min-height: 120vh!important;
		}
	
		
		.imgSagomataDx{
			clip-path: polygon(0 25%, 50% 10%, 100% 25%, 100% 85%, 0 55%);
			min-height: 100vh!important;
		}
		
		.imgSagomataSx{
			clip-path: polygon(100% 20%, 50% 0, 0 20%, 0 100%, 100% 55%);
		}
		
		.trangle-section-100{
			min-height: 70vh!important;
		}
		
		.v-background{
			min-height: 80vh !important;
			clip-path: polygon(0 0, 60% 42.5%, 100% 11.75%, 100% 67.7%, 62% 99.5%, 0 55%);
			z-index: 0; 
		}
		
		.v-section{
			clip-path: polygon(0 0, 60% 45%, 100% 13%, 100% 100%, 0 100%);
			min-height: 80vh!important;
		}
		
		.trangle-section {
			clip-path: polygon(0 20%, 40% 0, 100% 27%, 100% 100%, 0 100%);
			min-height: 140vh !important;
		}
		
	}

	@media only screen and (max-width: 767px) {
		
		.divider-block {
			min-height: 90vh!important;
		}
		
		.divBigDx{
			clip-path: polygon(100% 15%, 60% 0, 0 25%, 0 85%, 40% 100%,100% 75%)!important;
		}
		
		.divArrowDownDx {
			clip-path: polygon(100% 0, 40% 25%, 0 10%, 0 85%, 40% 100%, 100% 75%)!important;
		}
		
		.imgSagomataDx{
			clip-path: polygon(0 20%, 50% 0, 100% 20%, 100% 100%, 0 60%);
			min-height: 80vh!important;
		}
		
		.trangle-section{
			min-height: 80vh!important;
		}
		
		.trangle-section-100{
			clip-path: polygon(0 30%, 40% 0, 100% 45%, 100% 100%, 0 100%);
			min-height: 50vh!important;
		}
		
		.divBigSx{
			/*clip-path: polygon(0 5%, 40% 0, 100% 10%, 100% 95%, 60% 100%,0 90%);*/
			clip-path:polygon(0 10%, 40% 0, 100% 20%, 100% 90%, 60% 100%,0 80%);
			min-height: 100vh!important;
		}
		
		.v-section{
			clip-path: polygon(0 0, 60% 30%, 100% 10%, 100% 100%, 0 100%);
			min-height: 60vh!important;
		}
		
		.v-corner-a{
			display: block!important;
			clip-path: polygon(0 0, 60% 100%, 100% 45%, 100% 100%, 0 100%);
			min-height: 20vh!important;
		}
		
		.v-corner-b{
			display: block!important;
			clip-path: polygon(0 0, 60% 100%, 100% 45%, 100% 0);
			min-height: 20vh!important;
		}
		
		.banner-block{
			background-color: #707070!important;
		}
		
		.hero-sagomato{
			clip-path: polygon(0 0, 100% 0, 100% 100%,70% 80%, 40% 100%, 0 80%);
		}
		
		.trangle-section {
			clip-path: polygon(0 10%, 40% 0, 100% 12%, 100% 100%, 0 100%);
		}
		
	}

/* <---------- SAGOME HOME PAGE ----------> */


/* Contenitore principale */
.categorie-prodotti {
    display: flex;
    flex-wrap: wrap;
    gap: 40px 80px;
    font-family: 'Raleway', sans-serif;
}

/* Singola categoria: partenza invisibile */
.categoria-singola {
    width: calc(50% - 40px);
    box-sizing: border-box;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 1s ease forwards;
}

/* Differenza di timing tra le categorie */
.categoria-singola:nth-child(odd) {
    animation-delay: 0.2s;
}
.categoria-singola:nth-child(even) {
    animation-delay: 0.4s;
}

/* Titolo categoria */
.categoria-singola h3 {
    font-size: clamp(1.75rem, 0.577vw + 1.473rem, 2.375rem)!important;
    font-weight: 600;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden; /* Serve per il divider animato */
}

/* Divider animato */
.categoria-singola h3::after {
    content: '';
    display: block;
    width: 0;
    height: 10px;
    background: url('/wp-content/uploads/2025/04/divider.svg') repeat-x center;
    background-size: 100% 100%;
    margin-top: 10px;
    animation: growDivider 1s ease forwards;
    animation-delay: 0.8s;
}

/* Descrizione categoria */
.categoria-singola p {
    font-size: 16px;
    color: #666;
    margin-bottom: 20px;
}

/* Lista prodotti */
.lista-prodotti {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Singolo prodotto */
.lista-prodotti li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

/* Link PDF */
.lista-prodotti a {
    font-size: 16px;
    color: #222;
    text-decoration: underline;
    transition: color 0.3s ease;
}

.lista-prodotti a:hover {
    color: #A39244;
}

.badge {
    display: inline-block;
    background-color: #A39244;
    color: white;
    font-size: 12px;
    font-weight: bold;
    padding: 4px 8px;
    border-radius: 4px;
    margin-right: 10px;
    text-transform: uppercase;
}


/* Responsive mobile */
@media (max-width: 768px) {
    .categoria-singola {
        width: 100%;
    }
}

/* Animazione fade-in delle categorie */
@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animazione del divider che si "espande" */
@keyframes growDivider {
    to {
        width: 100%;
    }
}




 /* Wrapper generici */
.personale-top,
.personale-resto {
    display: flex;
    flex-wrap: wrap;
    column-gap: 20px;
    row-gap: 20px;
}

.personale-top {
    margin-bottom: 20px;
}

/* Ghost div per allineamento */
.ghost-card {
    width: calc(25% - 15px);
    aspect-ratio: 4 / 5;
    visibility: hidden;
}

/* Card base */
.card.personale {
    width: calc(25% - 15px);
    aspect-ratio: 4 / 5;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
    font-family: 'Raleway', sans-serif;
    position: relative;
}

/* Contenuto interno */
.card.personale .card-content {
    position: absolute;
    bottom: 20px;
    left: 20px;
    color: white;
    z-index: 2;
    padding-right: 15%;
}

.card.personale .nome-dipendente {
    margin: 0;
    font-size: clamp(1.375rem, 0.346vw + 1.209rem, 1.75rem);
    font-style: normal;
    font-weight: 700;
    line-height: 90%;
}

.card.personale .mansione {
    margin: 0;
    font-size: clamp(1rem, 0.231vw + 0.889rem, 1.25rem);
    font-style: normal;
    font-weight: 500;
    line-height: 110%;
}

/* Hover overlay */
.card.personale .hover-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.9);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    z-index: 3;
    text-align: center;
    padding: 20px;
    pointer-events: none;
}

.card.personale.has-certificazioni .hover-overlay {
    pointer-events: auto;
}

.card.personale.has-certificazioni:hover .hover-overlay {
    opacity: 1;
}

.card.personale .hover-overlay img {
    width: 40px;
    margin-bottom: 10px;
}

.card.personale .hover-overlay p {
    color: white;
    font-family: 'Raleway', sans-serif;
    font-size: 1rem;
}

/* Responsive */
@media screen and (max-width: 767px) {
    .card.personale {
        width: 100%;
        margin: 0;
    }

    .ghost-card {
        display: none;
    }

    .personale-top,
    .personale-resto {
        column-gap: 0;
        row-gap: 20px;
    }

    .personale-top {
        margin-bottom: 20px;
    }
}